:root {
  /* Permanent palette for new AKRUS-city pages. Values are taken from about.html. */
  --color-brown-darkest: #1a0f0d;
  --color-brown-dark: #2a1913;
  --color-brown-deep: #5d3c25;
  --color-brown-medium: #7f583a;
  --color-beige: #be9c75;
  --color-beige-light: #fff1e9;
  --color-cream: #fff7ec;
  --color-surface-light: var(--color-cream);
  --color-text-dark: #241817;
  --color-text-soft: #39241f;
  --color-text-light: var(--color-cream);
  --color-accent-deep: #7b3b28;
  --color-accent: #ad552d;
  --color-nav-accent: #ffd49b;
  --color-brown-darkest-rgb: 26, 15, 13;
  --color-brown-dark-rgb: 42, 25, 19;
  --color-brown-deep-rgb: 93, 60, 37;
  --color-brown-medium-rgb: 127, 88, 58;
  --color-beige-rgb: 190, 156, 117;
  --color-cream-rgb: 255, 247, 236;
  --color-accent-deep-rgb: 123, 59, 40;
  --color-accent-rgb: 173, 85, 45;
  --color-nav-accent-rgb: 255, 212, 155;
  --gradient-hero:
    radial-gradient(ellipse 54% 120% at 104% 0%,
      rgba(var(--color-accent-rgb), .2) 0%,
      rgba(var(--color-accent-rgb), 0) 72%),
    radial-gradient(ellipse 45% 95% at -8% 100%,
      rgba(var(--color-cream-rgb), .18) 0%,
      rgba(var(--color-cream-rgb), 0) 74%),
    linear-gradient(145deg,
      var(--color-beige) 0%,
      var(--color-beige) 42%,
      var(--color-brown-medium) 78%,
      var(--color-brown-deep) 100%);
  --gradient-accent-light: linear-gradient(145deg,
    var(--color-cream) 0%,
    rgba(var(--color-beige-rgb), .55) 100%);
  --gradient-accent-medium: linear-gradient(145deg,
    var(--color-beige) 0%,
    rgba(var(--color-brown-medium-rgb), .72) 100%);
  --gradient-topic-card-deep: linear-gradient(145deg,
    var(--color-brown-deep) 0%,
    var(--color-brown-dark) 100%);
  --gradient-topic-card-coffee: linear-gradient(145deg,
    var(--color-brown-medium) 0%,
    var(--color-brown-deep) 58%,
    var(--color-brown-dark) 100%);
  --gradient-topic-card-cognac: linear-gradient(145deg,
    var(--color-accent-deep) 0%,
    var(--color-brown-deep) 62%,
    var(--color-brown-dark) 100%);
  --gradient-topic-card-caramel: linear-gradient(145deg,
    var(--color-brown-medium) 0%,
    var(--color-accent-deep) 54%,
    var(--color-brown-deep) 100%);
  --gradient-about:
    linear-gradient(180deg,
      rgba(var(--color-brown-darkest-rgb), .88) 0,
      rgba(var(--color-brown-dark-rgb), .64) var(--header-h),
      rgba(var(--color-brown-dark-rgb), 0) calc(var(--header-h) + 48px)),
    radial-gradient(ellipse 54% 48% at 104% 12%,
      rgba(var(--color-accent-rgb), .16) 0%,
      rgba(var(--color-accent-rgb), 0) 74%),
    radial-gradient(ellipse 48% 42% at -8% 48%,
      rgba(var(--color-cream-rgb), .14) 0%,
      rgba(var(--color-cream-rgb), 0) 76%),
    linear-gradient(180deg,
      var(--color-beige) 0%,
      var(--color-beige) 24%,
      var(--color-brown-medium) 56%,
      var(--color-brown-deep) 80%,
      var(--color-brown-dark) 100%);

  /* Legacy prototype tokens. New internal pages use the permanent palette above. */
  --milk: #fff7ec;
  --powder: #e7c2b8;
  --powder-light: #f2ddd4;
  --sand: #d7b38f;
  --copper: #b45f35;
  --copper-bright: #ad552d;
  --cognac: #7b3b28;
  --terracotta: #9f4f3f;
  --amber: #eda956;
  --gold: #cfa66a;
  --coffee: #39241f;
  --chocolate: #211411;
  --graphite-brown: #2b2524;
  --ink: #241817;
  --blue: #456f82;
  --blue-dark: #253e4b;
  --blue-mist: #a9c5cd;
  --white: #ffffff;
  --heading: Georgia, "Times New Roman", serif;
  --body: "Segoe UI", Arial, sans-serif;
  --shell: 1380px;
  --header-h: 104px;
  --radius-s: 18px;
  --radius-m: 30px;
  --radius-l: 46px;
  --shadow: 0 32px 90px rgba(34, 19, 15, 0.22);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--chocolate);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  color: var(--chocolate);
  background: var(--milk);
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

.shell {
  width: min(calc(100% - 72px), var(--shell));
  margin-inline: auto;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 500;
  line-height: 1.02;
  text-wrap: balance;
}

h2 {
  margin-bottom: 26px;
  font-size: clamp(3rem, 5.2vw, 5.8rem);
  letter-spacing: -.045em;
}

.overline {
  margin-bottom: 18px;
  color: var(--cognac);
  font-size: .82rem;
  font-weight: 760;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.site-header {
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  min-height: var(--header-h);
  border-bottom: 1px solid rgba(255, 247, 236, .19);
  color: var(--milk);
  background: linear-gradient(180deg, rgba(26, 15, 13, .74), rgba(26, 15, 13, .18));
}

.header-inner {
  display: flex;
  min-height: var(--header-h);
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.brand {
  display: flex;
  min-width: 210px;
  color: var(--milk);
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}

.brand-name {
  font-family: var(--heading);
  font-size: clamp(2rem, 2.35vw, 2.65rem);
  letter-spacing: -.035em;
}

.brand-note {
  margin-top: 10px;
  color: #e9cdc1;
  font-size: .73rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.site-nav,
.nav-list {
  display: flex;
  align-items: center;
}

.site-nav {
  justify-content: flex-end;
  gap: 26px;
}

.nav-list {
  margin: 0;
  padding: 0;
  gap: 18px;
  list-style: none;
}

.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  min-height: 52px;
  padding: 12px 5px;
  border: 0;
  color: var(--milk);
  background: none;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  font-size: clamp(1rem, 1.08vw, 1.18rem);
  font-weight: 680;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}

.nav-link:hover,
.nav-link:focus-visible { color: var(--color-nav-accent); }

.nav-link.is-active {
  color: var(--color-nav-accent);
  box-shadow: inset 0 -2px rgba(211, 123, 63, .78);
}

.chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}

.dropdown-toggle[aria-expanded="true"] .chevron { transform: rotate(225deg) translate(-1px, -1px); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: -20px;
  display: grid;
  width: 290px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255, 225, 190, .24);
  border-radius: var(--radius-s);
  background: rgba(37, 23, 20, .96);
  box-shadow: var(--shadow);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
  backdrop-filter: blur(18px);
}

.dropdown-menu a {
  display: block;
  padding: 13px 14px;
  border-radius: 11px;
  color: #f8dfd3;
  font-size: 1rem;
  text-decoration: none;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible { color: var(--white); background: rgba(211, 123, 63, .16); }

.has-dropdown.is-open .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.button {
  display: inline-flex;
  min-height: 58px;
  padding: 16px 27px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.button:hover { transform: translateY(-3px); }

.portal-button {
  color: var(--white);
  background: linear-gradient(135deg, #557f91, var(--blue-dark));
  box-shadow: 0 14px 38px rgba(20, 42, 53, .3), inset 0 1px rgba(255,255,255,.18);
}

.portal-button:hover { background: linear-gradient(135deg, #628fa2, #2e5364); }

.header-portal {
  min-height: 50px;
  padding: 14px 21px;
  font-size: 1rem;
}

.menu-toggle { display: none; }

.hero {
  position: relative;
  display: flex;
  min-height: max(720px, 94svh);
  overflow: hidden;
  color: var(--milk);
  background: var(--chocolate);
  align-items: stretch;
}

.hero-media,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  filter: saturate(1.04) contrast(1.03) brightness(.94);
  animation: hero-breathe 14s ease-out both;
}

.hero-media::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 48% 78% at 22% 54%, rgba(255, 198, 139, .16) 0%, rgba(244, 169, 108, .09) 42%, rgba(225, 132, 76, .025) 66%, transparent 78%);
  content: "";
  pointer-events: none;
}

.hero-shade {
  z-index: 1;
  background:
    radial-gradient(ellipse 54% 70% at 9% 48%, rgba(25, 13, 10, .48) 0%, rgba(30, 16, 12, .3) 44%, rgba(32, 17, 13, .08) 72%, transparent 100%),
    linear-gradient(180deg, rgba(18, 10, 8, .14) 0%, transparent 52%, rgba(18, 10, 8, .56) 100%);
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  min-width: 0;
  min-height: 100%;
  padding-top: calc(var(--header-h) + 64px);
  padding-bottom: 28px;
  align-content: end;
  gap: 30px;
  grid-template-columns: minmax(0, 1fr);
}

.hero-copy {
  position: relative;
  z-index: 0;
  width: 100%;
  min-width: 0;
  max-width: 620px;
  padding: 22px 24px 24px 0;
  animation: rise-in .8s ease-out both;
}

.hero-copy::before {
  position: absolute;
  z-index: -1;
  top: -8px;
  right: -28px;
  bottom: -8px;
  left: -56px;
  background: radial-gradient(ellipse 112% 96% at 0% 50%, rgba(27, 14, 11, .54) 0%, rgba(31, 16, 12, .37) 48%, rgba(33, 17, 13, .13) 76%, transparent 100%);
  content: "";
  pointer-events: none;
}

.hero h1 {
  max-width: 610px;
  margin-bottom: 18px;
  font-size: clamp(2.8rem, 3.7vw, 4.65rem);
  line-height: 1.01;
  letter-spacing: -.045em;
  text-shadow: 0 8px 32px rgba(18, 9, 7, .38);
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.hero-lead {
  max-width: 560px;
  margin-bottom: 24px;
  color: #fff0e8;
  font-size: clamp(1.125rem, 1.18vw, 1.25rem);
  line-height: 1.5;
}

.primary-button {
  color: var(--white);
  background: linear-gradient(135deg, var(--copper-bright), var(--cognac));
  box-shadow: 0 18px 48px rgba(104, 41, 22, .42), inset 0 1px rgba(255,255,255,.2);
}

.primary-button:hover {
  background: linear-gradient(135deg, #b45f35, #783724);
  box-shadow: 0 22px 55px rgba(104, 41, 22, .5), 0 0 34px rgba(237, 169, 86, .13);
}

.hero-points {
  display: grid;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 18px;
  border: 1px solid rgba(255, 224, 197, .34);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(31, 17, 13, .66), rgba(24, 13, 11, .58));
  box-shadow: 0 18px 50px rgba(16, 8, 7, .22), inset 0 1px rgba(255, 235, 218, .05);
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  backdrop-filter: blur(12px);
}

.hero-points li {
  border-right: 1px solid rgba(255, 224, 197, .32);
}

.hero-points a {
  display: grid;
  min-height: 72px;
  padding: 16px 24px;
  color: #fff1e9;
  align-items: center;
  gap: 16px;
  grid-template-columns: 32px 1fr;
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.hero-points li:last-child { border-right: 0; }

.hero-points a:hover,
.hero-points a:focus-visible { color: var(--white); background: rgba(189, 100, 53, .12); }

.hero-points span { color: #ffbd71; font-size: .72rem; letter-spacing: .09em; }

.section-powder {
  position: relative;
  padding: 140px 0;
  background:
    radial-gradient(circle at 8% 15%, rgba(180, 95, 53, .15), transparent 24%),
    linear-gradient(145deg, #f5e1d8 0%, #e6beb2 52%, #d5aa96 100%);
}

.section-intro {
  display: grid;
  margin-bottom: 70px;
  align-items: end;
  gap: 60px;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
}

.section-intro h2 { margin-bottom: 0; }
.intro-copy { margin: 0 0 10px; color: #5e3930; font-size: 1.08rem; }

.direction-stage {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(87, 43, 31, .17);
  border-radius: var(--radius-l);
  background: rgba(255, 245, 236, .55);
  box-shadow: 0 35px 100px rgba(72, 35, 25, .16);
  grid-template-columns: minmax(360px, .8fr) minmax(500px, 1.2fr);
}

.direction-feature {
  position: relative;
  display: flex;
  min-height: 590px;
  overflow: hidden;
  padding: 46px;
  color: var(--milk);
  background:
    linear-gradient(160deg, rgba(62, 31, 24, .18), rgba(35, 19, 16, .82)),
    linear-gradient(135deg, #9d4b32, #3a211d 72%);
  flex-direction: column;
  justify-content: space-between;
}

.direction-feature::before,
.direction-feature::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.direction-feature::before {
  top: 11%;
  right: -24%;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(255, 202, 133, .32);
  box-shadow: 0 0 80px rgba(224, 116, 54, .12);
}

.direction-feature::after {
  top: 22%;
  right: -4%;
  width: 150px;
  height: 150px;
  background: rgba(235, 148, 78, .18);
  box-shadow: 0 0 70px 30px rgba(235, 148, 78, .12);
}

.feature-light {
  position: absolute;
  right: 18%;
  bottom: -15%;
  width: 160px;
  height: 420px;
  background: linear-gradient(180deg, rgba(255, 190, 112, .03), rgba(255, 166, 77, .23));
  filter: blur(18px);
  transform: rotate(28deg);
}

.direction-number { position: relative; z-index: 2; color: #eec18c; font-size: .84rem; letter-spacing: .18em; }
.direction-feature > div:last-child { position: relative; z-index: 2; }
.card-label, .story-tag { color: #eab185; font-size: .74rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.direction-feature h3 { max-width: 420px; margin-bottom: 20px; color: var(--milk); font-size: clamp(2.6rem, 4vw, 4.5rem); letter-spacing: -.04em; }
.direction-feature p:not(.card-label) { max-width: 470px; color: #e9cfc3; }
.direction-feature a { color: var(--milk); font-weight: 740; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 6px; }

.direction-list { display: grid; }
.direction-row {
  display: grid;
  min-height: 118px;
  padding: 25px 34px;
  border-bottom: 1px solid rgba(88, 46, 35, .14);
  background: rgba(255, 247, 240, .4);
  align-items: center;
  gap: 24px;
  grid-template-columns: 38px 1fr 30px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, padding .2s ease;
}

.direction-row:last-child { border-bottom: 0; }
.direction-row span { color: var(--cognac); font-size: .73rem; letter-spacing: .08em; }
.direction-row strong { font-family: var(--heading); font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 500; }
.direction-row i { color: var(--copper); font-style: normal; font-size: 1.25rem; }
.direction-row:hover, .direction-row:focus-visible { padding-left: 42px; color: var(--cognac); background: rgba(255, 248, 240, .85); }

.section-dark {
  position: relative;
  overflow: hidden;
  padding: 150px 0;
  color: var(--color-cream);
  background: linear-gradient(145deg,
    var(--color-brown-deep),
    var(--color-brown-dark) 68%,
    var(--color-brown-deep));
}

.ambient { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(30px); }
.ambient-copper { top: 12%; right: -8%; width: 420px; height: 420px; background: rgba(var(--color-accent-rgb), .14); box-shadow: 0 0 150px 80px rgba(var(--color-accent-rgb), .08); }
.section-intro-light h2 { color: var(--color-cream); }
.section-intro-light .overline { color: var(--color-nav-accent); }
.section-intro-light .intro-copy { color: rgba(var(--color-cream-rgb), .76); }

.editorial-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.1fr .9fr .9fr;
  grid-template-rows: repeat(2, minmax(300px, auto));
}

.story {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--color-beige-rgb), .12);
  border-radius: var(--radius-m);
  background: var(--color-brown-dark);
  box-shadow: 0 20px 55px rgba(var(--color-brown-darkest-rgb), .18);
  flex-direction: column;
  transition: transform .28s ease, box-shadow .28s ease;
}

.story:hover { transform: translateY(-7px); box-shadow: 0 30px 75px rgba(var(--color-brown-darkest-rgb), .28); }
.story-main { grid-row: 1 / 3; }
.story-image { position: relative; min-height: 230px; overflow: hidden; }
.story-main .story-image { min-height: 470px; }
.story-content { display: flex; padding: 30px; flex: 1; flex-direction: column; }
.story-main .story-content { padding: 38px; }
.story h3 { margin-bottom: 18px; color: var(--color-cream); font-size: clamp(1.55rem, 2.35vw, 2.75rem); letter-spacing: -.025em; }
.story-main h3 { font-size: clamp(2.4rem, 3.4vw, 4rem); }
.story-content > p:not(.story-tag) { color: rgba(var(--color-cream-rgb), .76); }
.story a { margin-top: auto; color: var(--color-nav-accent); font-weight: 720; text-decoration-color: rgba(var(--color-nav-accent-rgb), .35); text-underline-offset: 5px; }

.story-city { background: linear-gradient(180deg, var(--color-brown-deep) 0%, var(--color-brown-medium) 52%, var(--color-brown-dark) 100%); }
.story-city::before { position: absolute; inset: 0; background: radial-gradient(circle at 55% 27%, rgba(var(--color-nav-accent-rgb), .55), transparent 17%), linear-gradient(120deg, transparent 35%, rgba(var(--color-accent-rgb), .25), transparent 72%); content: ""; }
.window-grid { position: absolute; right: 7%; bottom: 0; width: 70%; height: 82%; background: repeating-linear-gradient(90deg, transparent 0 32px, rgba(var(--color-brown-darkest-rgb), .62) 32px 36px), repeating-linear-gradient(0deg, rgba(var(--color-nav-accent-rgb), .78) 0 13px, rgba(var(--color-brown-dark-rgb), .8) 13px 24px); clip-path: polygon(18% 0,100% 14%,100% 100%,0 100%,0 28%); box-shadow: -40px 0 90px rgba(var(--color-accent-rgb), .16); }

.paper-scene { background: linear-gradient(145deg, var(--color-brown-medium), var(--color-brown-dark)); }
.paper-scene::before { position: absolute; top: 16%; left: 26%; width: 53%; height: 73%; border-radius: 7px; background: var(--color-cream); box-shadow: -24px 18px rgba(var(--color-beige-rgb), .28), 24px -13px rgba(var(--color-cream-rgb), .16); content: ""; transform: rotate(-6deg); }
.paper-scene span { position: absolute; z-index: 2; top: 42%; left: 39%; width: 29%; height: 3px; background: var(--color-accent-deep); box-shadow: 0 17px var(--color-beige), 0 34px var(--color-beige); transform: rotate(-6deg); }

.story-copper { background: radial-gradient(circle at 86% 12%, rgba(var(--color-beige-rgb), .28), transparent 24%), linear-gradient(145deg, var(--color-brown-medium), var(--color-brown-deep)); }
.room-scene { background: linear-gradient(145deg, var(--color-brown-dark), var(--color-brown-medium) 60%, var(--color-beige)); }
.room-scene::before { position: absolute; top: 16%; right: 16%; width: 92px; height: 92px; border-radius: 50%; background: var(--color-nav-accent); box-shadow: 0 0 60px 25px rgba(var(--color-beige-rgb), .32); content: ""; }
.room-scene span { position: absolute; right: -2%; bottom: -28%; width: 75%; height: 66%; border-radius: 50% 50% 0 0; background: var(--color-brown-deep); box-shadow: -120px 15px 0 -65px var(--color-brown-medium); }
.story-rose { background: radial-gradient(circle at 14% 22%, rgba(var(--color-cream-rgb), .22), transparent 22%), linear-gradient(150deg, var(--color-brown-medium), var(--color-brown-deep)); }
.story-question { background: radial-gradient(circle at 80% 30%, rgba(var(--color-beige-rgb), .2), transparent 20%), linear-gradient(145deg, var(--color-brown-deep), var(--color-brown-dark)); }

.section-copper {
  padding: 130px 0;
  background: var(--gradient-hero);
}

.video-layout { display: grid; align-items: center; gap: 90px; grid-template-columns: minmax(480px, 1.15fr) minmax(350px, .85fr); }
.video-cover { position: relative; display: flex; min-height: 520px; overflow: hidden; padding: 40px; border: 1px solid rgba(var(--color-beige-rgb), .28); border-radius: var(--radius-l); color: var(--color-cream); background: radial-gradient(circle at 60% 37%, rgba(var(--color-beige-rgb), .25), transparent 20%), linear-gradient(145deg, var(--color-brown-dark), var(--color-brown-deep) 55%, var(--color-brown-darkest)); box-shadow: var(--shadow); align-items: flex-end; }
.video-cover::before { position: absolute; top: -15%; right: -9%; width: 70%; height: 120%; border: 1px solid rgba(var(--color-nav-accent-rgb), .23); border-radius: 50%; content: ""; transform: rotate(-17deg); }
.video-cover::after { position: absolute; right: 17%; bottom: -8%; width: 250px; height: 72%; border-radius: 150px 150px 0 0; background: linear-gradient(180deg, var(--color-brown-medium), var(--color-brown-dark)); box-shadow: 0 0 70px rgba(var(--color-accent-rgb), .28); content: ""; }
.video-halo { position: absolute; z-index: 2; top: 29%; right: 23%; width: 150px; height: 150px; border-radius: 50%; background: rgba(var(--color-beige-rgb), .14); box-shadow: 0 0 80px 45px rgba(var(--color-accent-rgb), .15); }
.video-index { position: absolute; z-index: 3; top: 32px; left: 36px; color: var(--color-beige-light); font-size: .75rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.play-button { position: absolute; z-index: 4; top: 44%; left: 48%; display: grid; width: 86px; height: 86px; padding-left: 5px; border: 1px solid rgba(var(--color-cream-rgb), .58); border-radius: 50%; color: var(--color-text-dark); background: rgba(var(--color-cream-rgb), .91); box-shadow: 0 18px 50px rgba(var(--color-brown-darkest-rgb), .27); place-items: center; transform: translate(-50%,-50%); }
.video-cover > p { position: relative; z-index: 4; max-width: 390px; margin: 0; font-family: var(--heading); font-size: clamp(2rem,3vw,3.4rem); line-height: 1.05; }
.video-copy h2 { color: var(--color-text-dark); }
.video-copy > p:not(.overline) { max-width: 540px; color: var(--color-text-soft); font-size: 1.12rem; }
.line-link { display: inline-flex; margin-top: 20px; padding-bottom: 7px; border-bottom: 1px solid currentColor; color: var(--color-text-dark); align-items: center; gap: 18px; font-weight: 760; text-decoration: none; }

.section-deep { position: relative; overflow: hidden; padding: 150px 0; color: #d9c2b8; background: linear-gradient(120deg, #171010, #2c1917 62%, #46231b); }
.about-glow { position: absolute; top: -20%; left: 9%; width: 420px; height: 420px; border-radius: 50%; background: rgba(193,80,39,.1); box-shadow: 0 0 140px 80px rgba(193,80,39,.08); }
.about-layout { position: relative; display: grid; align-items: center; gap: 60px; grid-template-columns: 140px minmax(260px,.7fr) minmax(460px,1.15fr); }
.about-mark { display: grid; width: 120px; height: 120px; border: 1px solid rgba(224,169,102,.4); border-radius: 50%; color: #d69965; font-family: var(--heading); font-size: 4.2rem; place-items: center; box-shadow: 0 0 60px rgba(213,110,55,.09); }
.about-heading h2 { margin-bottom: 12px; color: var(--milk); }
.about-heading .overline { color: #d9976d; }
.official-name { color: #d3a995; font-size: 1.06rem; }
.about-copy { padding-left: 52px; border-left: 1px solid rgba(222,172,124,.27); }
.about-lead { color: var(--milk); font-family: var(--heading); font-size: clamp(1.65rem,2.3vw,2.6rem); line-height: 1.3; }
.about-copy > p:not(.about-lead) { color: #cfb4a8; }
.light-link { color: #efbd8b; }

.portal-section { position: relative; overflow: hidden; padding: 92px 0; color: #e5f0f2; background: linear-gradient(135deg, #1f333c, #365c6d 62%, #223b46); }
.portal-ambient { position: absolute; right: 8%; bottom: -70%; width: 520px; height: 520px; border-radius: 50%; background: rgba(137,192,211,.14); box-shadow: 0 0 120px 70px rgba(137,192,211,.09); }
.portal-layout { position: relative; display: grid; align-items: center; gap: 45px; grid-template-columns: 130px minmax(0,1fr) auto; }
.portal-orbit { display: grid; width: 104px; height: 104px; border: 1px solid rgba(169,211,224,.45); border-radius: 50%; place-items: center; box-shadow: 0 0 45px rgba(141,199,219,.12); }
.portal-orbit span { width: 34px; height: 34px; border: 1px solid rgba(215,235,240,.68); border-radius: 50%; background: rgba(150,202,219,.12); }
.portal-copy .overline { color: #a9ced9; }
.portal-copy h2 { margin-bottom: 14px; color: var(--white); font-size: clamp(2.5rem,4vw,4.6rem); }
.portal-copy > p:not(.overline) { max-width: 720px; margin: 0; color: #c4d8dd; }
.portal-large { min-width: 210px; border: 1px solid rgba(196,226,235,.25); }

.contacts-intro { grid-template-columns: 1fr .55fr; }
.contact-list { display: grid; margin: 0; border-top: 1px solid rgba(83,43,32,.24); grid-template-columns: repeat(2,minmax(0,1fr)); }
.contact-list > div { position: relative; min-height: 175px; padding: 34px 65px 34px 0; border-bottom: 1px solid rgba(83,43,32,.24); }
.contact-list > div:nth-child(odd) { padding-right: 45px; border-right: 1px solid rgba(83,43,32,.24); }
.contact-list > div:nth-child(even) { padding-left: 45px; }
.contact-list dt { margin-bottom: 24px; color: var(--cognac); font-size: .76rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.contact-list dd { margin: 0; overflow-wrap: anywhere; font-family: var(--heading); font-size: clamp(1.45rem,2.2vw,2.25rem); }
.contact-list a,.requisites-list a { color: var(--ink); text-decoration-color: rgba(70,35,28,.4); text-underline-offset: 6px; transition:color .2s ease,text-decoration-color .2s ease; }
.contact-list a:hover,.requisites-list a:hover { color:var(--cognac); text-decoration-color:currentColor; }
.contact-list > div > span { position: absolute; top: 35px; right: 12px; color: rgba(93,50,39,.46); font-size: .72rem; letter-spacing: .08em; }

.home-bridges { overflow: hidden; }
.home-bridge-grid { display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.home-bridge-card { position:relative; display:flex; min-height:330px; overflow:hidden; padding:38px; border:1px solid rgba(94,52,40,.16); border-radius:var(--radius-m); color:var(--ink); background:linear-gradient(145deg,rgba(255,250,245,.88),rgba(239,211,197,.66)); box-shadow:0 24px 70px rgba(92,52,39,.1); flex-direction:column; text-decoration:none; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.home-bridge-card::after { position:absolute; right:-70px; bottom:-90px; width:220px; height:220px; border-radius:50%; background:rgba(190,91,48,.09); content:""; }
.home-bridge-card:hover,.home-bridge-card:focus-visible { border-color:rgba(161,78,44,.34); box-shadow:0 28px 78px rgba(92,52,39,.16); transform:translateY(-6px); }
.home-bridge-card > span { margin-bottom:auto; color:var(--cognac); font-size:.78rem; font-weight:780; letter-spacing:.12em; }
.home-bridge-card h3 { max-width:330px; margin:52px 0 18px; font-size:clamp(2rem,2.6vw,3rem); line-height:1.02; }
.home-bridge-card p { max-width:390px; color:#73584e; }
.home-bridge-card strong { position:relative; z-index:1; margin-top:18px; color:var(--cognac); font-size:.9rem; }
.home-portal-compact { padding-block:68px; }
.home-portal-compact .portal-copy h2 { font-size:clamp(2.25rem,3.5vw,3.8rem); }

.inner-page { background:var(--powder); }
.page-hero { position:relative; display:flex; min-height:560px; overflow:hidden; padding:calc(var(--header-h) + 110px) 0 96px; color:var(--milk); background:linear-gradient(135deg,#241411,#4b251b 58%,#2b1916); align-items:flex-end; }
.page-hero::before { position:absolute; inset:0; background:linear-gradient(90deg,rgba(24,13,11,.18),transparent 58%),radial-gradient(circle at 82% 34%,rgba(223,126,67,.18),transparent 28%); content:""; }
.page-hero-materials { background:var(--gradient-hero); }
.page-hero-about { background:linear-gradient(135deg,#211412,#40211d 54%,#36202a); }
.page-hero-glow { position:absolute; right:8%; bottom:-220px; width:520px; height:520px; border:1px solid rgba(235,171,103,.18); border-radius:50%; box-shadow:0 0 120px rgba(211,111,58,.12),inset 0 0 90px rgba(230,157,93,.08); }
.page-hero-inner { position:relative; z-index:1; }
.page-hero .overline { margin-bottom:24px; color:#e8aa7b; }
.page-hero h1 { max-width:1050px; margin-bottom:28px; font-size:clamp(3.8rem,7vw,7.4rem); line-height:.94; letter-spacing:-.045em; overflow-wrap:normal; word-break:normal; hyphens:none; }
.page-hero p:last-child { max-width:760px; margin:0; color:#e9d2c6; font-size:clamp(1.08rem,1.4vw,1.3rem); line-height:1.6; }
.page-content-section { position:relative; }

.requisites-section { padding:110px 0; }
.requisites-layout { display:grid; align-items:start; gap:clamp(48px,8vw,130px); grid-template-columns:minmax(230px,.65fr) minmax(0,1.35fr); }
.requisites-heading h2 { margin:0; }
.requisites-list { margin:0; border-top:1px solid rgba(83,43,32,.24); }
.requisites-list > div { display:grid; padding:22px 0; border-bottom:1px solid rgba(83,43,32,.24); gap:28px; grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr); }
.requisites-list dt { color:var(--cognac); font-size:.76rem; font-weight:760; letter-spacing:.1em; text-transform:uppercase; }
.requisites-list dd { margin:0; overflow-wrap:anywhere; color:#4e332d; font-family:var(--heading); font-size:clamp(1.15rem,1.7vw,1.55rem); line-height:1.45; }
.contacts-page-section { padding-top:50px; border-top:1px solid rgba(94,52,40,.12); }

.site-footer { padding: 82px 0 26px; color: #ceb6ab; background: #15100f; }
.footer-main { display: grid; padding-bottom: 64px; gap: 60px; grid-template-columns: 1.25fr .8fr .8fr 1fr; }
.footer-brand .brand-name { margin-bottom: 14px; color: var(--milk); }
.footer-brand p:not(.brand-name) { margin-bottom: 7px; }
.footer-brand span, .footer-main > div:last-child p { color: #ad958b; font-size: .9rem; }
.footer-main h2 { margin-bottom: 20px; color: #e5cfc4; font-family: var(--body); font-size: .75rem; font-weight: 760; letter-spacing: .15em; text-transform: uppercase; }
.footer-main ul { display: grid; margin: 0; padding: 0; gap: 11px; list-style: none; }
.footer-main a { color: #ccb4a9; text-decoration-color: rgba(204,180,169,.28); text-underline-offset: 5px; }
.footer-main a:hover { color: var(--milk); }
.footer-contact-list li { color:#c8afa4; line-height:1.55; overflow-wrap:anywhere; }
.footer-contact-list span { display:block; color:#9e857a; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; }
.footer-contact-list a { display:inline-block; }
.footer-legal { margin:22px 0 0; color:#8f786f; font-size:.82rem; line-height:1.5; }
.footer-bottom { display: flex; padding-top: 24px; border-top: 1px solid rgba(229,202,188,.13); color: #927e75; justify-content: space-between; gap: 20px; font-size: .82rem; }
.footer-bottom a { color: #c9aea2; text-underline-offset: 5px; }

@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-breathe { from { transform: scale(1.035); } to { transform: scale(1); } }

@media (hover:hover) and (min-width:1181px) {
  .has-dropdown:hover .dropdown-menu { opacity:1; pointer-events:auto; transform:translateY(0); }
}

@media (max-width: 1380px) {
  .shell { width: min(calc(100% - 48px), var(--shell)); }
  .header-inner { gap: 24px; }
  .nav-list { gap: 10px; }
  .site-nav { gap: 18px; }
  .nav-link { font-size: 1rem; }
  .header-portal { padding-inline: 17px; }
  .hero-copy { max-width: 580px; }
  .hero h1 { font-size: clamp(2.7rem,3.75vw,4.15rem); }
  .hero-points a { padding-inline: 18px; }
  .page-hero h1 { font-size:clamp(3.6rem,6.5vw,6.5rem); }
}

@media (max-width: 1180px) {
  :root { --header-h: 86px; }
  .site-header { position: absolute; background: rgba(24,14,12,.72); backdrop-filter: blur(14px); }
  .brand-note { font-size: .67rem; }
  .menu-toggle { display: inline-flex; min-height: 50px; padding: 11px 15px; border: 1px solid rgba(255,236,218,.35); border-radius: 999px; color: var(--milk); background: rgba(37,21,18,.34); cursor: pointer; align-items: center; gap: 11px; font-weight: 700; }
  .menu-toggle-icon, .menu-toggle-icon::before, .menu-toggle-icon::after { display:block; width:21px; height:2px; background:currentColor; transition:transform .2s ease,opacity .2s ease; }
  .menu-toggle-icon { position:relative; }
  .menu-toggle-icon::before,.menu-toggle-icon::after { position:absolute; left:0; content:""; }
  .menu-toggle-icon::before { top:-7px; }
  .menu-toggle-icon::after { top:7px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon { background:transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { top:0; transform:rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { top:0; transform:rotate(-45deg); }
  .site-nav { position:fixed; z-index:99; top:var(--header-h); right:0; bottom:0; left:0; display:flex; overflow-y:auto; padding:28px 24px 40px; color:var(--milk); background:linear-gradient(145deg,#211310,#3a1e18); align-items:stretch; flex-direction:column; justify-content:flex-start; gap:22px; opacity:0; pointer-events:none; transform:translateY(-12px); transition:opacity .2s ease,transform .2s ease; }
  .site-nav.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-list { display:block; }
  .nav-item { border-bottom:1px solid rgba(255,226,199,.18); }
  .nav-link { width:100%; min-height:66px; padding:16px 5px; justify-content:space-between; font-size:1.15rem; text-align:left; }
  .dropdown-menu { position:static; display:none; width:auto; margin:0 0 14px; padding:5px 0 6px 16px; border:0; border-left:2px solid rgba(225,150,95,.45); border-radius:0; background:transparent; box-shadow:none; opacity:1; pointer-events:auto; transform:none; backdrop-filter:none; }
  .has-dropdown.is-open .dropdown-menu { display:grid; }
  .dropdown-menu a { font-size:1.05rem; }
  .header-portal { align-self:stretch; min-height:60px; font-size:1.08rem; }
  .hero-copy { max-width:580px; }
  .hero-points { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero-points a { min-height:70px; }
  .home-bridge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-bridge-card:last-child { grid-column:1 / -1; }
  .page-hero { min-height:510px; padding-top:calc(var(--header-h) + 90px); }
  .section-intro { grid-template-columns:1fr; gap:24px; }
  .intro-copy { max-width:720px; }
  .direction-stage { grid-template-columns:1fr; }
  .direction-feature { min-height:480px; }
  .direction-list { grid-template-columns:repeat(2,1fr); }
  .direction-row { border-right:1px solid rgba(88,46,35,.14); }
  .editorial-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:auto; }
  .story-main { grid-row:auto; grid-column:1 / 3; display:grid; grid-template-columns:1.2fr .8fr; }
  .story-main .story-image { min-height:420px; }
  .video-layout { gap:55px; grid-template-columns:1fr 1fr; }
  .about-layout { grid-template-columns:110px .7fr 1fr; gap:36px; }
  .about-mark { width:96px; height:96px; font-size:3.4rem; }
  .about-copy { padding-left:35px; }
  .footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal-layout { grid-template-columns:90px 1fr; }
  .portal-large { grid-column:2; justify-self:start; }
  .portal-orbit { width:82px; height:82px; }
}

@media (max-width: 760px) {
  :root { --header-h: 78px; }
  body { font-size:16px; }
  .shell { width:min(calc(100% - 30px),var(--shell)); }
  h2 { font-size:clamp(2.65rem,12vw,4rem); }
  .brand-name { font-size:1.85rem; }
  .brand-note { max-width:220px; margin-top:7px; font-size:.58rem; }
  .menu-toggle span:last-child { display:none; }
  .hero { min-height:max(760px,100svh); }
  .hero-media img { object-position:67% 50%; }
  .hero-shade { background:linear-gradient(180deg,rgba(24,14,12,.08) 0%,rgba(27,14,12,.12) 27%,rgba(30,14,11,.5) 55%,rgba(20,11,9,.84) 100%); }
  .hero-inner { min-height:max(760px,100svh); padding-top:calc(var(--header-h) + 82px); padding-bottom:20px; gap:20px; }
  .hero-copy { max-width:560px; padding:18px 8px 20px 0; align-self:end; }
  .hero-copy::before { top:-5px; right:-14px; bottom:-5px; left:-22px; background:radial-gradient(ellipse 118% 100% at 0% 50%,rgba(27,14,11,.58),rgba(33,17,13,.36) 58%,rgba(33,17,13,.06) 86%,transparent); }
  .hero h1 { width:100%; max-width:560px; margin-bottom:16px; font-size:clamp(2.3rem,8.2vw,3.65rem); line-height:1.02; text-wrap:wrap; }
  .hero-lead { width:100%; margin-bottom:20px; font-size:1.05rem; line-height:1.48; }
  .primary-button { width:100%; min-height:62px; }
  .hero-points { padding:0 16px; grid-template-columns:1fr; }
  .hero-points li { border-right:0; border-bottom:1px solid rgba(255,224,197,.3); }
  .hero-points a { min-height:52px; padding:12px 4px; font-size:.93rem; }
  .hero-points li:last-child { border-bottom:0; }
  .page-hero { min-height:470px; padding:calc(var(--header-h) + 78px) 0 68px; }
  .page-hero h1 { max-width:680px; margin-bottom:22px; font-size:clamp(3rem,12vw,5rem); line-height:.98; }
  .page-hero p:last-child { font-size:1.03rem; }
  .home-bridge-grid { grid-template-columns:1fr; }
  .home-bridge-card:last-child { grid-column:auto; }
  .home-bridge-card { min-height:270px; padding:28px; }
  .home-bridge-card h3 { margin-top:38px; }
  .requisites-layout { grid-template-columns:1fr; gap:38px; }
  .requisites-list > div { grid-template-columns:1fr; gap:8px; }
  .home-portal-compact { padding-block:58px; }
  .section-powder,.section-dark,.section-deep { padding:95px 0; }
  .requisites-section { padding:80px 0; }
  .section-copper { padding:85px 0; }
  .section-intro { margin-bottom:45px; }
  .direction-stage { border-radius:28px; }
  .direction-feature { min-height:430px; padding:30px; }
  .direction-list { grid-template-columns:1fr; }
  .direction-row { min-height:96px; padding:20px 24px; border-right:0; }
  .direction-row:hover { padding-left:29px; }
  .editorial-grid { grid-template-columns:1fr; }
  .story-main { display:flex; grid-column:auto; }
  .story-main .story-image { min-height:350px; }
  .story-main .story-content,.story-content { padding:26px; }
  .story h3,.story-main h3 { font-size:clamp(1.8rem,8vw,2.6rem); }
  .video-layout { grid-template-columns:1fr; }
  .video-cover { min-height:430px; padding:28px; }
  .video-copy { order:-1; }
  .about-layout { grid-template-columns:1fr; gap:26px; }
  .about-mark { width:82px; height:82px; }
  .about-copy { padding-top:28px; padding-left:0; border-top:1px solid rgba(222,172,124,.27); border-left:0; }
  .portal-section { padding:75px 0; }
  .portal-layout { grid-template-columns:1fr; }
  .portal-orbit { width:78px; height:78px; }
  .portal-large { width:100%; grid-column:auto; }
  .contacts-intro { grid-template-columns:1fr; }
  .contact-list { grid-template-columns:1fr; }
  .contact-list > div:nth-child(odd),.contact-list > div:nth-child(even) { padding:27px 50px 27px 0; border-right:0; }
  .contact-list > div { min-height:140px; }
  .footer-main { grid-template-columns:repeat(2,1fr); gap:42px; }
}

@media (max-width: 430px) {
  .brand-note { display:none; }
  .header-inner { gap:12px; }
  .brand { min-width:0; }
  .hero { min-height:max(740px,100svh); }
  .hero-media img { object-position:66% 50%; }
  .hero-inner { min-height:max(740px,100svh); padding-top:122px; }
  .hero h1 { font-size:clamp(2.15rem,9vw,2.5rem); }
  .hero-lead { font-size:1rem; }
  .page-hero { min-height:440px; padding-top:130px; }
  .page-hero h1 { font-size:clamp(2.7rem,13.5vw,3.6rem); }
  .page-hero-glow { right:-180px; }
  .home-bridge-card { padding:24px; }
  .direction-feature { min-height:400px; }
  .direction-feature h3 { font-size:2.6rem; }
  .direction-row { grid-template-columns:30px 1fr 20px; gap:12px; }
  .direction-row strong { font-size:1.38rem; }
  .story-main .story-image { min-height:300px; }
  .video-cover { min-height:380px; }
  .play-button { width:72px; height:72px; }
  .footer-main { grid-template-columns:1fr; }
  .footer-bottom { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 360px) {
  .shell { width:min(calc(100% - 24px),var(--shell)); }
  .brand-name { font-size:1.65rem; }
  .hero h1 { font-size:2rem; }
  .hero-lead { line-height:1.48; }
  .page-hero h1 { font-size:2.7rem; }
  .direction-feature { padding:24px; }
  .direction-row { padding-inline:19px; }
}

@media (min-width: 761px) and (max-height: 820px) {
  .hero { min-height:100svh; }
  .hero-inner { min-height:100svh; padding-top:calc(var(--header-h) + 28px); padding-bottom:16px; gap:18px; }
  .hero-copy { max-width:570px; padding:14px 18px 16px 0; }
  .hero h1 { max-width:560px; margin-bottom:12px; font-size:clamp(2.55rem,3.25vw,3.85rem); line-height:.99; }
  .hero-lead { max-width:540px; margin-bottom:14px; font-size:1.05rem; line-height:1.4; }
  .primary-button { min-height:54px; padding-block:13px; }
  .hero-points a { min-height:58px; padding-block:12px; }
}

@media (max-width: 760px) and (max-height: 820px) {
  .hero { min-height:100svh; }
  .hero-inner { min-height:100svh; padding-top:calc(var(--header-h) + 34px); padding-bottom:12px; gap:12px; }
  .hero-copy { padding:12px 4px 14px 0; }
  .hero h1 { margin-bottom:12px; font-size:clamp(2rem,7.4vw,3.1rem); line-height:1; }
  .hero-lead { margin-bottom:14px; font-size:.95rem; line-height:1.38; }
  .primary-button { min-height:54px; padding-block:13px; }
  .hero-points a { min-height:44px; padding-block:8px; }
}

/* Calm About page: all rules are isolated from the other pages. */
.about-page {
  --about-surface: var(--color-cream);
  --about-surface-deep: var(--color-beige-light);
  --about-text: var(--color-text-dark);
  --about-text-soft: var(--color-text-soft);
  --about-accent: var(--color-accent-deep);
  color: var(--about-text);
  background: var(--color-brown-dark);
}

.about-page main {
  position: relative;
  display: flex;
  min-height: 100svh;
  background: var(--gradient-about);
  flex-direction: column;
  isolation: isolate;
}

.about-page .company-requisites {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  overflow-y: visible;
  padding: calc(var(--header-h) + 48px) 0 86px;
  background: transparent;
  isolation: isolate;
}

.about-page .company-requisites-layout {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: start;
  gap: clamp(46px, 6vw, 88px);
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
}

.about-page .company-summary {
  padding-top: 10px;
}

.about-page .company-summary h1 {
  margin: 0 0 26px;
  color: var(--about-text);
  font-size: clamp(2.15rem, 3.4vw, 3.25rem);
  letter-spacing: -.035em;
}

.about-page .company-statement {
  max-width: 560px;
  margin: 0;
  color: var(--about-text);
  font-family: var(--heading);
  font-size: clamp(1.16rem, 1.28vw, 1.34rem);
  line-height: 1.58;
}

.about-page .requisites-panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(var(--color-accent-deep-rgb), .16);
  border-radius: 24px;
  background: linear-gradient(180deg,
    var(--about-surface) 0%,
    var(--about-surface-deep) 100%);
  box-shadow:
    0 10px 20px rgba(var(--color-brown-darkest-rgb), .22),
    0 34px 88px rgba(var(--color-brown-dark-rgb), .34),
    26px 50px 78px rgba(var(--color-accent-rgb), .28),
    inset 0 1px rgba(var(--color-cream-rgb), .72);
  isolation: isolate;
}

.about-page .requisites-panel h2 {
  margin: 0 0 14px;
  color: var(--about-text-soft);
  font-size: clamp(1.85rem, 2.4vw, 2.35rem);
  letter-spacing: -.025em;
}

.about-page .requisites-list {
  margin: 0;
  border-top: 1px solid rgba(var(--color-accent-deep-rgb), .18);
}

.about-page .requisites-list > div {
  display: grid;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--color-accent-deep-rgb), .14);
  gap: 16px;
  grid-template-columns: minmax(155px, .68fr) minmax(0, 1.32fr);
}

.about-page .requisites-list dt,
.about-page .about-contact-grid dt {
  color: var(--about-accent);
  font-size: .7rem;
  font-weight: 760;
  letter-spacing: .075em;
  line-height: 1.45;
  text-transform: uppercase;
}

.about-page .requisites-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--about-text);
  font-size: .98rem;
  font-variant-numeric: tabular-nums;
  font-weight: 610;
  line-height: 1.45;
}

.about-page .requisites-list a,
.about-page .about-contact-grid a {
  color: inherit;
  text-decoration-color: rgba(var(--color-accent-deep-rgb), .42);
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.about-page .requisites-list a:hover,
.about-page .about-contact-grid a:hover {
  color: var(--about-accent);
  text-decoration-color: currentColor;
}

.about-page .about-contacts {
  position: relative;
  z-index: 0;
  flex: 1 0 auto;
  padding: 20px 0 24px;
  color: var(--about-surface);
  background: transparent;
}

.about-page .about-contacts-layout > h2 {
  margin: 0 0 7px;
  color: var(--about-surface);
  font-size: clamp(1.9rem, 2.5vw, 2.4rem);
  letter-spacing: -.025em;
}

.about-page .about-contact-grid {
  display: grid;
  margin: 0;
  border-top: 1px solid rgba(var(--color-cream-rgb), .2);
  border-left: 1px solid rgba(var(--color-cream-rgb), .2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-page .about-contact-grid > div {
  min-width: 0;
  padding: 9px 16px;
  border-right: 1px solid rgba(var(--color-cream-rgb), .2);
  border-bottom: 1px solid rgba(var(--color-cream-rgb), .2);
}

.about-page .about-contact-grid dt {
  margin-bottom: 5px;
  color: var(--about-surface-deep);
}

.about-page .about-contact-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--about-surface);
  font-family: var(--heading);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.42;
}

.about-page .about-contact-grid a:hover,
.about-page .about-contact-grid a:focus-visible {
  color: var(--about-surface-deep);
  text-decoration-color: currentColor;
}

@media (max-width: 1050px) {
  .about-page .company-requisites-layout {
    gap: 34px;
    grid-template-columns: 1fr;
  }

  .about-page .company-summary {
    max-width: 760px;
    padding-top: 0;
  }

  .about-page .company-summary h1 { margin-bottom: 18px; }
}

@media (max-width: 760px) {
  .about-page .company-requisites {
    padding: calc(var(--header-h) + 34px) 0 42px;
  }

  .about-page .company-summary h1 { font-size: 2.25rem; }
  .about-page .company-statement { font-size: 1.18rem; }
  .about-page .requisites-panel {
    padding: 22px 18px;
    border-radius: 18px;
    box-shadow:
      0 8px 18px rgba(var(--color-brown-darkest-rgb), .2),
      0 26px 64px rgba(var(--color-brown-dark-rgb), .3),
      16px 38px 58px rgba(var(--color-accent-rgb), .2),
      inset 0 1px rgba(var(--color-cream-rgb), .72);
  }

  .about-page .requisites-list > div {
    gap: 3px;
    grid-template-columns: 1fr;
  }

  .about-page .about-contacts { padding: 18px 0 22px; }
  .about-page .about-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .about-page .company-requisites { padding-top: 110px; }
  .about-page .company-requisites-layout { gap: 28px; }
  .about-page .company-summary h1 { margin-bottom: 14px; font-size: 2rem; }
  .about-page .company-statement { font-size: 1.12rem; line-height: 1.55; }
  .about-page .requisites-panel {
    padding: 20px 15px;
    box-shadow:
      0 7px 14px rgba(var(--color-brown-darkest-rgb), .18),
      0 20px 46px rgba(var(--color-brown-dark-rgb), .26),
      10px 28px 42px rgba(var(--color-accent-rgb), .16),
      inset 0 1px rgba(var(--color-cream-rgb), .72);
  }

  .about-page .requisites-panel h2 { font-size: 1.8rem; }
  .about-page .requisites-list dd { font-size: .94rem; }
  .about-page .about-contact-grid > div { padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Reusable article page and the related owner resource on management.html. */
.article-page {
  color: var(--color-text-dark);
  background: var(--color-brown-darkest);
}

.article-page .site-header {
  background: linear-gradient(180deg,
    rgba(var(--color-brown-darkest-rgb), .96),
    rgba(var(--color-brown-dark-rgb), .9));
}

.article-publication {
  background: var(--color-cream);
}

.article-shell {
  width: min(calc(100% - 72px), 860px);
  margin-inline: auto;
}

.article-header {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 64px) 0 62px;
  border-bottom: 1px solid rgba(var(--color-accent-deep-rgb), .2);
  background: var(--gradient-hero);
}

.article-header .overline {
  margin-bottom: 22px;
  color: var(--color-accent-deep);
}

.article-header h1 {
  max-width: 820px;
  margin-bottom: 24px;
  color: var(--color-text-dark);
  font-size: clamp(3.1rem, 5.2vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.article-deck {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 1.05rem;
}

.article-body {
  padding: 82px 0 118px;
}

.article-section + .article-section {
  margin-top: 74px;
  padding-top: 68px;
  border-top: 1px solid rgba(var(--color-accent-deep-rgb), .18);
}

.article-section h2 {
  max-width: 780px;
  margin-bottom: 30px;
  color: var(--color-text-dark);
  font-size: clamp(2.15rem, 3.8vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.article-section p {
  margin-bottom: 24px;
  color: var(--color-text-soft);
  font-size: 1.1rem;
  line-height: 1.82;
}

.article-section p:last-of-type {
  margin-bottom: 0;
}

.article-section.article-section--surface,
.article-section.article-section--final {
  margin-inline: -48px;
  padding: 52px 48px;
  border: 1px solid rgba(var(--color-accent-deep-rgb), .16);
  border-radius: var(--radius-m);
}

.article-section.article-section--surface {
  background: var(--gradient-accent-light);
  box-shadow: 0 24px 64px rgba(var(--color-brown-dark-rgb), .08);
}

.article-section.article-section--final {
  background: var(--gradient-accent-medium);
  box-shadow: 0 24px 60px rgba(var(--color-brown-dark-rgb), .12);
}

.article-section.article-section--final h2,
.article-section.article-section--final p {
  color: var(--color-text-dark);
}

.article-section p.article-callout {
  margin: 34px -24px 0;
  padding: 28px 30px;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--color-text-dark);
  background: var(--gradient-accent-light);
  box-shadow: 0 18px 44px rgba(var(--color-brown-dark-rgb), .08);
  font-family: var(--heading);
  font-size: clamp(1.28rem, 2.1vw, 1.62rem);
  line-height: 1.55;
}

.article-section p.article-callout--medium,
.article-section p.article-callout--dark {
  color: var(--color-text-dark);
  background: var(--gradient-accent-medium);
  box-shadow: 0 18px 44px rgba(var(--color-brown-dark-rgb), .12);
}

.article-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 38px;
  border: 1px solid rgba(var(--color-accent-rgb), .28);
  border-radius: 22px;
  background: var(--color-brown-dark);
  box-shadow: 0 24px 58px rgba(var(--color-brown-darkest-rgb), .18);
  aspect-ratio: 16 / 9;
}

.article-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.article-media {
  width: 100%;
  overflow: hidden;
  margin: 42px 0;
  border: 1px solid rgba(var(--color-accent-deep-rgb), .18);
  border-radius: 22px;
  background: var(--color-beige-light);
  box-shadow: 0 22px 54px rgba(var(--color-brown-dark-rgb), .12);
}

.article-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.article-media-caption {
  margin: 0;
  padding: 14px 18px 16px;
  color: var(--color-text-soft);
  font-size: .9rem;
  line-height: 1.55;
}

.article-management-link {
  display: inline-flex;
  min-height: 54px;
  margin-top: 38px;
  padding: 14px 22px;
  border: 1px solid rgba(var(--color-accent-rgb), .46);
  border-radius: 999px;
  color: var(--color-text-dark);
  background: var(--color-cream);
  align-items: center;
  gap: 14px;
  font-weight: 740;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.article-management-link:hover,
.article-management-link:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-beige-light);
  transform: translateY(-2px);
}

.owner-resources {
  padding: 105px 0 120px;
  border-top: 1px solid rgba(var(--color-accent-deep-rgb), .18);
  background: linear-gradient(145deg,
    var(--color-beige) 0%,
    var(--color-brown-medium) 100%);
}

.owner-resources-layout {
  display: grid;
  align-items: start;
  gap: clamp(42px, 7vw, 100px);
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
}

.owner-resources-heading h2 {
  margin-bottom: 0;
  font-size: clamp(2.8rem, 4.5vw, 4.8rem);
}

.owner-resource-card {
  display: grid;
  min-height: 310px;
  padding: 42px;
  border: 1px solid rgba(var(--color-accent-deep-rgb), .2);
  border-radius: var(--radius-m);
  color: var(--color-text-dark);
  background: linear-gradient(145deg,
    var(--color-cream) 0%,
    var(--color-beige-light) 100%);
  box-shadow: 0 24px 66px rgba(var(--color-brown-dark-rgb), .14);
  gap: 30px;
  grid-template-columns: 38px minmax(0, 1fr);
  text-decoration: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.owner-resource-card:hover,
.owner-resource-card:focus-visible {
  border-color: rgba(var(--color-accent-rgb), .58);
  box-shadow: 0 30px 76px rgba(var(--color-brown-dark-rgb), .2);
  transform: translateY(-5px);
}

.owner-resource-number {
  padding-top: 5px;
  color: var(--color-accent-deep);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .12em;
}

.owner-resource-card h3 {
  max-width: 660px;
  margin-bottom: 22px;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.owner-resource-card p {
  max-width: 650px;
  margin-bottom: 28px;
  color: var(--color-text-soft);
  font-size: 1.05rem;
}

.owner-resource-card strong {
  color: var(--color-accent-deep);
  font-size: .92rem;
}

@media (max-width: 1180px) {
  .article-header { padding-top: calc(var(--header-h) + 68px); }
  .owner-resources-layout { grid-template-columns: 1fr; }
  .owner-resources-heading { max-width: 620px; }
}

@media (max-width: 760px) {
  .article-shell { width: min(calc(100% - 32px), 860px); }
  .article-header { padding: calc(var(--header-h) + 54px) 0 48px; }
  .article-header .overline { margin-bottom: 17px; font-size: .72rem; letter-spacing: .13em; }
  .article-header h1 { margin-bottom: 18px; font-size: clamp(2.45rem, 11.4vw, 3.65rem); line-height: 1.02; text-wrap: wrap; }
  .article-deck { font-size: .98rem; }
  .article-body { padding: 58px 0 82px; }
  .article-section + .article-section { margin-top: 52px; padding-top: 48px; }
  .article-section h2 { margin-bottom: 24px; font-size: clamp(2rem, 9.2vw, 2.8rem); text-wrap: wrap; }
  .article-section p { margin-bottom: 21px; font-size: 1.02rem; line-height: 1.72; }
  .article-section.article-section--surface,
  .article-section.article-section--final { margin-inline: 0; padding: 32px 24px; border-radius: 20px; }
  .article-section p.article-callout { margin-inline: 0; padding: 24px 22px; font-size: 1.24rem; }
  .article-video { margin-top: 30px; border-radius: 14px; }
  .article-media { margin: 32px 0; border-radius: 14px; }
  .article-management-link { width: 100%; margin-top: 32px; padding-inline: 18px; justify-content: space-between; }
  .owner-resources { padding: 78px 0 88px; }
  .owner-resources-layout { gap: 34px; }
  .owner-resources-heading h2 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .owner-resource-card { min-height: 0; padding: 28px 24px; gap: 14px; grid-template-columns: 1fr; }
  .owner-resource-card h3 { font-size: clamp(1.85rem, 8.4vw, 2.55rem); }
  .owner-resource-card p { font-size: 1rem; }
}

@media (max-width: 360px) {
  .article-shell { width: min(calc(100% - 24px), 860px); }
  .article-header h1 { font-size: 2.35rem; }
  .article-section h2 { font-size: 1.95rem; }
  .owner-resource-card { padding: 24px 20px; }
}

/* Management page: preserve the existing composition and gradient geometry;
   replace only the colour basis with the approved AKRUS-city palette. */
.management-page {
  color: var(--color-text-dark);
  background: var(--color-cream);
}

.management-page :focus-visible {
  outline-color: var(--color-accent);
}

.management-page .site-header {
  border-bottom-color: rgba(var(--color-cream-rgb), .19);
  background: linear-gradient(180deg,
    rgba(var(--color-brown-darkest-rgb), .74),
    rgba(var(--color-brown-darkest-rgb), .18));
}

.management-page .brand-note {
  color: rgba(var(--color-cream-rgb), .82);
}

.management-page .nav-link.is-active {
  box-shadow: inset 0 -2px rgba(var(--color-accent-rgb), .78);
}

.management-page .dropdown-menu {
  border-color: rgba(var(--color-beige-rgb), .24);
  background: rgba(var(--color-brown-dark-rgb), .96);
  box-shadow: 0 32px 90px rgba(var(--color-brown-darkest-rgb), .22);
}

.management-page .dropdown-menu a {
  color: var(--color-beige-light);
}

.management-page .dropdown-menu a:hover,
.management-page .dropdown-menu a:focus-visible {
  color: var(--color-cream);
  background: rgba(var(--color-accent-rgb), .16);
}

.management-page .portal-button {
  color: var(--color-cream);
  background: linear-gradient(135deg,
    var(--color-brown-deep),
    var(--color-brown-dark));
  box-shadow:
    0 14px 38px rgba(var(--color-brown-darkest-rgb), .3),
    inset 0 1px rgba(var(--color-cream-rgb), .18);
}

.management-page .portal-button:hover {
  background: linear-gradient(135deg,
    var(--color-brown-medium),
    var(--color-brown-deep));
}

.management-page .page-hero-management {
  color: var(--color-cream);
  background: linear-gradient(135deg,
    var(--color-brown-darkest),
    var(--color-brown-deep) 58%,
    var(--color-brown-dark));
}

.management-page .page-hero-management::before {
  background:
    linear-gradient(90deg,
      rgba(var(--color-brown-darkest-rgb), .18),
      transparent 58%),
    radial-gradient(circle at 82% 34%,
      rgba(var(--color-accent-rgb), .18),
      transparent 28%);
}

.management-page .page-hero-glow {
  border-color: rgba(var(--color-nav-accent-rgb), .18);
  box-shadow:
    0 0 120px rgba(var(--color-accent-rgb), .12),
    inset 0 0 90px rgba(var(--color-beige-rgb), .08);
}

.management-page .page-hero .overline {
  color: var(--color-nav-accent);
}

.management-page .page-hero p:last-child {
  color: rgba(var(--color-cream-rgb), .82);
}

.management-page .section-powder {
  background:
    radial-gradient(circle at 8% 15%,
      rgba(var(--color-accent-rgb), .15),
      transparent 24%),
    linear-gradient(145deg,
      var(--color-cream) 0%,
      var(--color-beige-light) 52%,
      var(--color-beige) 100%);
}

.management-page .intro-copy {
  color: var(--color-text-soft);
}

.management-page .direction-stage {
  border-color: rgba(var(--color-accent-deep-rgb), .17);
  background: rgba(var(--color-cream-rgb), .55);
  box-shadow: 0 35px 100px rgba(var(--color-brown-dark-rgb), .16);
}

.management-page .direction-feature {
  color: var(--color-cream);
  background:
    linear-gradient(160deg,
      rgba(var(--color-brown-deep-rgb), .18),
      rgba(var(--color-brown-dark-rgb), .82)),
    linear-gradient(135deg,
      var(--color-brown-medium),
      var(--color-brown-dark) 72%);
}

.management-page .direction-feature::before {
  border-color: rgba(var(--color-nav-accent-rgb), .32);
  box-shadow: 0 0 80px rgba(var(--color-accent-rgb), .12);
}

.management-page .direction-feature::after {
  background: rgba(var(--color-accent-rgb), .18);
  box-shadow: 0 0 70px 30px rgba(var(--color-accent-rgb), .12);
}

.management-page .feature-light {
  background: linear-gradient(180deg,
    rgba(var(--color-cream-rgb), .03),
    rgba(var(--color-beige-rgb), .23));
}

.management-page .direction-number {
  color: var(--color-nav-accent);
}

.management-page .card-label {
  color: var(--color-beige-light);
}

.management-page .direction-feature h3,
.management-page .direction-feature a {
  color: var(--color-cream);
}

.management-page .direction-feature p:not(.card-label) {
  color: rgba(var(--color-cream-rgb), .82);
}

.management-page .direction-feature a {
  text-decoration-color: rgba(var(--color-cream-rgb), .35);
}

.management-page .direction-row {
  border-bottom-color: rgba(var(--color-accent-deep-rgb), .14);
  background: rgba(var(--color-cream-rgb), .4);
}

.management-page .direction-row span,
.management-page .direction-row:hover,
.management-page .direction-row:focus-visible {
  color: var(--color-accent-deep);
}

.management-page .direction-row i {
  color: var(--color-accent);
}

.management-page .direction-row:hover,
.management-page .direction-row:focus-visible {
  background: rgba(var(--color-cream-rgb), .85);
}

.management-page .owner-resources {
  border-top-color: rgba(var(--color-accent-deep-rgb), .18);
  background: var(--gradient-accent-medium);
}

.management-page .owner-resource-card {
  border-color: rgba(var(--color-accent-deep-rgb), .2);
  color: var(--color-text-dark);
  background: var(--gradient-accent-light);
  box-shadow: 0 24px 66px rgba(var(--color-brown-dark-rgb), .14);
}

.management-page .owner-resource-card:hover,
.management-page .owner-resource-card:focus-visible {
  border-color: rgba(var(--color-accent-rgb), .58);
  box-shadow: 0 30px 76px rgba(var(--color-brown-dark-rgb), .2);
}

.management-page .owner-resource-number,
.management-page .owner-resource-card strong,
.management-page .owner-resources .overline {
  color: var(--color-accent-deep);
}

.management-page .owner-resource-card p {
  color: var(--color-text-soft);
}

.management-page .site-footer {
  color: rgba(var(--color-cream-rgb), .75);
  background: var(--color-brown-darkest);
}

.management-page .footer-brand .brand-name,
.management-page .footer-main a:hover {
  color: var(--color-cream);
}

.management-page .footer-brand span,
.management-page .footer-main > div:last-child p {
  color: rgba(var(--color-cream-rgb), .62);
}

.management-page .footer-main h2 {
  color: rgba(var(--color-cream-rgb), .86);
}

.management-page .footer-main a {
  color: rgba(var(--color-cream-rgb), .75);
  text-decoration-color: rgba(var(--color-cream-rgb), .28);
}

.management-page .footer-contact-list li {
  color: rgba(var(--color-cream-rgb), .72);
}

.management-page .footer-contact-list span {
  color: rgba(var(--color-cream-rgb), .56);
}

.management-page .footer-legal {
  color: rgba(var(--color-cream-rgb), .5);
}

.management-page .footer-bottom {
  border-top-color: rgba(var(--color-cream-rgb), .13);
  color: rgba(var(--color-cream-rgb), .52);
}

.management-page .footer-bottom a {
  color: rgba(var(--color-cream-rgb), .7);
}

@media (max-width: 1180px) {
  .management-page .site-header {
    background: rgba(var(--color-brown-darkest-rgb), .72);
  }

  .management-page .menu-toggle {
    border-color: rgba(var(--color-cream-rgb), .35);
    color: var(--color-cream);
    background: rgba(var(--color-brown-dark-rgb), .34);
  }

  .management-page .site-nav {
    color: var(--color-cream);
    background: linear-gradient(145deg,
      var(--color-brown-darkest),
      var(--color-brown-dark));
  }

  .management-page .nav-item {
    border-bottom-color: rgba(var(--color-beige-rgb), .18);
  }

  .management-page .dropdown-menu {
    border-left-color: rgba(var(--color-accent-rgb), .45);
    background: transparent;
  }

  .management-page .direction-row {
    border-right-color: rgba(var(--color-accent-deep-rgb), .14);
  }
}

/* Shared situational catalog pages. */
.topic-page {
  color: var(--color-text-dark);
  background: var(--color-cream);
}

.topic-page .topic-hero {
  background: var(--gradient-hero);
}

.topic-page .topic-hero::before {
  background:
    linear-gradient(90deg,
      rgba(var(--color-cream-rgb), .12),
      transparent 58%),
    radial-gradient(circle at 82% 34%,
      rgba(var(--color-accent-rgb), .18),
      transparent 28%);
}

.topic-page .topic-hero .overline {
  color: var(--color-accent-deep);
}

.topic-page .topic-hero p:last-child {
  color: var(--color-text-soft);
}

.topic-page--before .page-hero-glow {
  right: 7%;
}

.topic-page--during .page-hero-glow {
  right: auto;
  left: 10%;
  bottom: -255px;
}

.topic-page--problems .page-hero-glow {
  right: 18%;
  bottom: -285px;
}

.topic-catalog {
  --topic-halo-top: auto;
  --topic-halo-right: -690px;
  --topic-halo-bottom: -540px;
  --topic-halo-left: auto;
  --topic-halo-size: clamp(1040px, 77vw, 1320px);
  --topic-halo-blur: 27px;
  --topic-halo-opacity: .94;
  --topic-halo-transform: rotate(-13deg) scaleY(.84);
  position: relative;
  min-height: 540px;
  overflow: hidden;
  padding: 96px 0 118px;
  background: var(--color-cream);
  isolation: isolate;
}

.topic-catalog::before,
.topic-catalog::after {
  position: absolute;
  z-index: 0;
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  pointer-events: none;
}

.topic-catalog::before {
  top: var(--topic-halo-top);
  right: var(--topic-halo-right);
  bottom: var(--topic-halo-bottom);
  left: var(--topic-halo-left);
  width: var(--topic-halo-size);
  height: var(--topic-halo-size);
  background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 35%,
    rgba(var(--color-nav-accent-rgb), .025) 42%,
    rgba(var(--color-beige-rgb), .11) 49%,
    rgba(var(--color-accent-rgb), .17) 57%,
    rgba(var(--color-accent-deep-rgb), .095) 64%,
    rgba(var(--color-beige-rgb), .04) 71%,
    transparent 81%);
  filter: blur(var(--topic-halo-blur));
  opacity: var(--topic-halo-opacity);
  transform: var(--topic-halo-transform);
}

.topic-catalog::after {
  display: none;
}

.topic-page--during .topic-catalog {
  --topic-halo-right: auto;
  --topic-halo-bottom: -590px;
  --topic-halo-left: -720px;
  --topic-halo-size: clamp(1020px, 74vw, 1270px);
  --topic-halo-transform: rotate(14deg) scaleY(.86);
}

.topic-page--problems .topic-catalog {
  --topic-halo-right: auto;
  --topic-halo-bottom: -760px;
  --topic-halo-left: 28%;
  --topic-halo-size: clamp(1080px, 78vw, 1340px);
  --topic-halo-transform: rotate(-3deg) scaleY(.82);
}

.topic-catalog > .shell {
  position: relative;
  z-index: 1;
}

.topic-catalog-head {
  display: grid;
  margin-bottom: 58px;
  align-items: end;
  gap: 48px;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}

.topic-catalog-head h2 {
  max-width: 850px;
  margin-bottom: 0;
  color: var(--color-text-dark);
  font-size: clamp(2.7rem, 4.4vw, 4.5rem);
}

.topic-catalog-head > p:last-child {
  max-width: 560px;
  margin: 0 0 8px;
  color: var(--color-text-soft);
  font-size: 1.06rem;
}

.topic-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.topic-card {
  --topic-card-halo-top: auto;
  --topic-card-halo-right: -190px;
  --topic-card-halo-bottom: -300px;
  --topic-card-halo-left: auto;
  --topic-card-halo-size: 500px;
  --topic-card-halo-blur: 12px;
  --topic-card-halo-opacity: .96;
  --topic-card-halo-transform: none;
  --topic-card-halo-background: radial-gradient(circle at center,
    transparent 0%,
    transparent 36%,
    rgba(var(--color-nav-accent-rgb), .055) 43%,
    rgba(var(--color-beige-rgb), .23) 52%,
    rgba(var(--color-accent-rgb), .18) 60%,
    rgba(var(--color-accent-deep-rgb), .07) 68%,
    transparent 78%);
  position: relative;
  min-width: 0;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid rgba(var(--color-beige-rgb), .28);
  border-radius: var(--radius-m);
  background: var(--gradient-topic-card-deep);
  box-shadow: 0 22px 58px rgba(var(--color-brown-dark-rgb), .18);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.topic-card:nth-child(4n + 2) {
  --topic-card-halo-top: -250px;
  --topic-card-halo-right: -215px;
  --topic-card-halo-bottom: auto;
  --topic-card-halo-left: auto;
  --topic-card-halo-size: 420px;
  --topic-card-halo-blur: 17px;
  --topic-card-halo-opacity: .72;
  --topic-card-halo-transform: rotate(-12deg) scaleX(1.14) scaleY(.88);
  --topic-card-halo-background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 38%,
    rgba(var(--color-nav-accent-rgb), .045) 45%,
    rgba(var(--color-beige-rgb), .19) 54%,
    rgba(var(--color-accent-rgb), .16) 63%,
    rgba(var(--color-accent-deep-rgb), .055) 71%,
    transparent 82%);
  background: var(--gradient-topic-card-coffee);
}

.topic-card:nth-child(4n + 3) {
  --topic-card-halo-top: -555px;
  --topic-card-halo-right: auto;
  --topic-card-halo-bottom: auto;
  --topic-card-halo-left: -300px;
  --topic-card-halo-size: 740px;
  --topic-card-halo-blur: 24px;
  --topic-card-halo-opacity: .68;
  --topic-card-halo-transform: rotate(14deg) scaleY(.82);
  --topic-card-halo-background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(var(--color-nav-accent-rgb), .04) 47%,
    rgba(var(--color-beige-rgb), .17) 56%,
    rgba(var(--color-accent-rgb), .12) 64%,
    rgba(var(--color-accent-deep-rgb), .04) 72%,
    transparent 83%);
  background: var(--gradient-topic-card-cognac);
}

.topic-card:nth-child(4n + 4) {
  --topic-card-halo-top: auto;
  --topic-card-halo-right: auto;
  --topic-card-halo-bottom: -545px;
  --topic-card-halo-left: 4%;
  --topic-card-halo-size: 690px;
  --topic-card-halo-blur: 17px;
  --topic-card-halo-opacity: .9;
  --topic-card-halo-transform: rotate(-6deg) scaleX(1.08);
  --topic-card-halo-background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 32%,
    rgba(var(--color-nav-accent-rgb), .055) 40%,
    rgba(var(--color-beige-rgb), .24) 50%,
    rgba(var(--color-accent-rgb), .24) 59%,
    rgba(var(--color-accent-deep-rgb), .105) 68%,
    transparent 80%);
  background: var(--gradient-topic-card-caramel);
}

.topic-card::after {
  position: absolute;
  z-index: 0;
  top: var(--topic-card-halo-top);
  right: var(--topic-card-halo-right);
  bottom: var(--topic-card-halo-bottom);
  left: var(--topic-card-halo-left);
  width: var(--topic-card-halo-size);
  height: var(--topic-card-halo-size);
  border: 0;
  border-radius: 50%;
  background: var(--topic-card-halo-background);
  filter: blur(var(--topic-card-halo-blur));
  opacity: var(--topic-card-halo-opacity);
  transform: var(--topic-card-halo-transform);
  content: "";
  pointer-events: none;
}

.topic-empty::after {
  position: absolute;
  right: -240px;
  bottom: -285px;
  width: 560px;
  height: 560px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    transparent 0%,
    transparent 38%,
    rgba(var(--color-beige-rgb), .08) 48%,
    rgba(var(--color-accent-rgb), .09) 58%,
    rgba(var(--color-accent-deep-rgb), .03) 68%,
    transparent 79%);
  filter: blur(18px);
  opacity: .5;
  content: "";
  pointer-events: none;
}

.topic-card:hover,
.topic-card:focus-within {
  border-color: rgba(var(--color-nav-accent-rgb), .52);
  box-shadow: 0 28px 68px rgba(var(--color-brown-dark-rgb), .26);
  transform: translateY(-4px);
}

.topic-card-link {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 310px;
  padding: clamp(26px, 2.4vw, 34px);
  color: var(--color-cream);
  flex-direction: column;
  text-decoration: none;
}

.topic-card-link:focus-visible {
  outline: 3px solid var(--color-nav-accent);
  outline-offset: -7px;
}

.topic-card-type {
  margin-bottom: 24px;
  color: var(--color-nav-accent);
  font-size: .76rem;
  font-weight: 780;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.topic-card h3 {
  margin: 0 0 16px;
  color: var(--color-cream);
  font-size: clamp(1.45rem, 1.65vw, 1.85rem);
  line-height: 1.14;
  letter-spacing: -.02em;
}

.topic-card-summary {
  margin-bottom: 22px;
  color: rgba(var(--color-cream-rgb), .82);
  font-size: .96rem;
  line-height: 1.56;
}

.topic-card-action {
  margin-top: auto;
  color: var(--color-nav-accent);
  font-weight: 760;
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-nav-accent-rgb), .38);
  text-underline-offset: 6px;
}

.topic-card-link:hover .topic-card-action,
.topic-card-link:focus-visible .topic-card-action {
  color: var(--color-cream);
  text-decoration-color: currentColor;
}

.topic-empty {
  position: relative;
  display: flex;
  min-height: 250px;
  overflow: hidden;
  padding: clamp(32px, 5vw, 60px);
  border: 1px solid rgba(var(--color-accent-deep-rgb), .16);
  border-radius: var(--radius-l);
  background: var(--gradient-accent-light);
  box-shadow: 0 25px 72px rgba(var(--color-brown-deep-rgb), .12);
  flex-direction: column;
  justify-content: flex-end;
  grid-column: 1 / -1;
}

.topic-page--problems .topic-empty {
  background: var(--gradient-accent-medium);
  grid-column: 1 / -1;
}

.topic-empty-index {
  position: absolute;
  z-index: 1;
  top: 38px;
  left: clamp(32px, 5vw, 60px);
  color: var(--color-accent-deep);
  font-size: .8rem;
  font-weight: 780;
  letter-spacing: .16em;
}

.topic-empty p:not(.topic-empty-index) {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0;
  color: var(--color-text-soft);
  font-family: var(--heading);
  font-size: clamp(2rem, 3.4vw, 3.8rem);
  line-height: 1.08;
}

@media (max-width: 1180px) {
  .topic-catalog-head {
    gap: 26px;
    grid-template-columns: 1fr;
  }

  .topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .topic-catalog {
    --topic-halo-right: -510px;
    --topic-halo-bottom: -320px;
    --topic-halo-left: auto;
    --topic-halo-size: 760px;
    --topic-halo-blur: 22px;
    --topic-halo-opacity: .76;
    min-height: 440px;
    padding: 82px 0 96px;
  }

  .topic-page--during .topic-catalog {
    --topic-halo-right: auto;
    --topic-halo-bottom: -340px;
    --topic-halo-left: -520px;
    --topic-halo-size: 760px;
  }

  .topic-page--problems .topic-catalog {
    --topic-halo-right: auto;
    --topic-halo-bottom: -520px;
    --topic-halo-left: 12%;
    --topic-halo-size: 780px;
  }

  .topic-catalog-head {
    margin-bottom: 40px;
  }

  .topic-catalog-head h2 {
    font-size: clamp(2.45rem, 11vw, 3.7rem);
  }

  .topic-grid {
    grid-template-columns: 1fr;
  }

  .topic-card,
  .topic-empty,
  .topic-page--problems .topic-empty {
    min-height: 290px;
    border-radius: var(--radius-m);
    grid-column: 1 / -1;
  }

  .topic-card-link {
    min-height: 290px;
    padding: 28px;
  }

  .topic-card h3 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .topic-empty {
    padding: 30px;
  }

  .topic-empty-index {
    top: 30px;
    left: 30px;
  }

  .topic-empty p:not(.topic-empty-index) {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}

/* Shared colour unification for About and Materials; layout stays unchanged. */
.materials-page {
  color: var(--color-text-dark);
  background: var(--color-cream);
}

.about-page :focus-visible,
.materials-page :focus-visible {
  outline-color: var(--color-accent);
}

.about-page .site-header,
.materials-page .site-header {
  border-bottom-color: rgba(var(--color-cream-rgb), .19);
  background: linear-gradient(180deg,
    rgba(var(--color-brown-darkest-rgb), .74),
    rgba(var(--color-brown-darkest-rgb), .18));
}

.about-page .brand-note,
.materials-page .brand-note {
  color: rgba(var(--color-cream-rgb), .82);
}

.about-page .nav-link.is-active,
.materials-page .nav-link.is-active {
  color: var(--color-nav-accent);
  box-shadow: inset 0 -2px rgba(var(--color-accent-rgb), .78);
}

.about-page .dropdown-menu,
.materials-page .dropdown-menu {
  border-color: rgba(var(--color-beige-rgb), .24);
  background: rgba(var(--color-brown-dark-rgb), .96);
  box-shadow: 0 32px 90px rgba(var(--color-brown-darkest-rgb), .22);
}

.about-page .dropdown-menu a,
.materials-page .dropdown-menu a {
  color: var(--color-beige-light);
}

.about-page .dropdown-menu a:hover,
.about-page .dropdown-menu a:focus-visible,
.about-page .dropdown-menu a:active,
.materials-page .dropdown-menu a:hover,
.materials-page .dropdown-menu a:focus-visible,
.materials-page .dropdown-menu a:active {
  color: var(--color-cream);
  background: rgba(var(--color-accent-rgb), .16);
}

.materials-page .page-hero-materials {
  color: var(--color-text-dark);
}

.materials-page .page-hero-materials::before {
  background:
    linear-gradient(90deg,
      rgba(var(--color-cream-rgb), .12),
      transparent 58%),
    radial-gradient(circle at 82% 34%,
      rgba(var(--color-accent-rgb), .18),
      transparent 28%);
}

.materials-page .page-hero-glow {
  border: 0;
  background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 35%,
    rgba(var(--color-nav-accent-rgb), .025) 42%,
    rgba(var(--color-beige-rgb), .11) 49%,
    rgba(var(--color-accent-rgb), .17) 57%,
    rgba(var(--color-accent-deep-rgb), .095) 64%,
    rgba(var(--color-beige-rgb), .04) 71%,
    transparent 81%);
  box-shadow: none;
  filter: blur(18px);
  opacity: .74;
  transform: rotate(-9deg) scaleX(1.12);
}

.materials-page .page-hero .overline {
  color: var(--color-accent-deep);
}

.materials-page .page-hero p:last-child {
  color: var(--color-text-soft);
}

.materials-page .story-tag {
  color: var(--color-nav-accent);
}

.materials-page .story a:hover,
.materials-page .story a:focus-visible,
.materials-page .story a:active {
  color: var(--color-cream);
  text-decoration-color: currentColor;
}

.materials-page .line-link:hover,
.materials-page .line-link:focus-visible,
.materials-page .line-link:active {
  color: var(--color-accent-deep);
}

.about-page .requisites-list a:focus-visible,
.about-page .requisites-list a:active {
  color: var(--about-accent);
  text-decoration-color: currentColor;
}

.materials-page .site-footer {
  color: rgba(var(--color-cream-rgb), .75);
  background: var(--color-brown-darkest);
}

.materials-page .footer-brand .brand-name,
.materials-page .footer-main a:hover,
.materials-page .footer-main a:focus-visible,
.materials-page .footer-main a:active {
  color: var(--color-cream);
}

.materials-page .footer-brand span,
.materials-page .footer-main > div:last-child p {
  color: rgba(var(--color-cream-rgb), .62);
}

.materials-page .footer-main h2 {
  color: rgba(var(--color-cream-rgb), .86);
}

.materials-page .footer-main a {
  color: rgba(var(--color-cream-rgb), .75);
  text-decoration-color: rgba(var(--color-cream-rgb), .28);
}

.materials-page .footer-contact-list li {
  color: rgba(var(--color-cream-rgb), .72);
}

.materials-page .footer-contact-list span {
  color: rgba(var(--color-cream-rgb), .56);
}

.materials-page .footer-bottom {
  border-top-color: rgba(var(--color-cream-rgb), .13);
  color: rgba(var(--color-cream-rgb), .52);
}

.materials-page .footer-bottom a {
  color: rgba(var(--color-cream-rgb), .7);
}

@media (max-width: 1180px) {
  .about-page .site-header,
  .materials-page .site-header {
    background: rgba(var(--color-brown-darkest-rgb), .72);
  }

  .about-page .menu-toggle,
  .materials-page .menu-toggle {
    border-color: rgba(var(--color-cream-rgb), .35);
    color: var(--color-cream);
    background: rgba(var(--color-brown-dark-rgb), .34);
  }

  .about-page .site-nav,
  .materials-page .site-nav {
    color: var(--color-cream);
    background: linear-gradient(145deg,
      var(--color-brown-darkest),
      var(--color-brown-dark));
  }

  .about-page .nav-item,
  .materials-page .nav-item {
    border-bottom-color: rgba(var(--color-beige-rgb), .18);
  }

  .about-page .dropdown-menu,
  .materials-page .dropdown-menu {
    border-left-color: rgba(var(--color-accent-rgb), .45);
    background: transparent;
  }
}