/* ===================================================================
   event.metrologi.ru — юбилейная конференция МС Метролоджи
   Токены бренда взяты из основного сайта:
   metrologi.kolosstudio.ru/public_html/bitrix/templates/metrologi_index
   (красный #EF4848, тёмно-синий #272242, шрифт Inter)
   =================================================================== */

:root {
  --color-red: #EF4848;
  --color-red-hover: #fa6f6f;
  --color-red-active: #b82a2a;
  --color-red-tint: #fdeaea;

  --color-navy: #1C1638;
  --color-navy-2: #140f28;

  --color-bg: #ffffff;
  --color-bg-offset: #f7f6f9;
  --color-surface: #ffffff;
  --color-border: #E0E0E0;
  --color-border-strong: #cfccdb;

  --color-text: #201d33;
  --color-text-muted: #6B6B72;
  --color-text-faint: #8D8A9B;
  --color-text-inverse: #f7f6f9;

  --color-success: #2e7d4f;
  --color-success-bg: #e6f4ec;
  --color-warning: #b5790a;
  --color-warning-bg: #fdf3e0;
  --color-error: #c62828;
  --color-error-bg: #fdeaea;

  /* The real site (metrologi.ru) is a sharp-cornered design system — inputs
     are border-radius:0, the only rounding anywhere is 50% circles (icon
     buttons, dots, spinner) or tiny 2-4px functional radii (pagination,
     search box). Cards get their definition from a thin light-gray border
     plus a soft shadow, not from color or rounding. */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(20, 16, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 16, 40, 0.10);
  --shadow-lg: 0 24px 56px rgba(20, 16, 40, 0.18);
  --shadow-card: 0 1px 10px rgba(0, 0, 0, 0.05);

  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --max-width: 1230px;

  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shared vertical rhythm for all sections — one value, redefined once on
     mobile, instead of each section carrying its own bespoke padding. */
  --section-pad: 48px;
}

@media (max-width: 640px) {
  :root { --section-pad: 28px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
/* !important on the base type rules below is intentional: the page is
   embedded inside Bitrix24 Sites, whose own theme CSS defines a same-
   specificity body/h1-h6 font-family and heading color rule that loads
   AFTER this stylesheet — without !important it wins the cascade by
   source order alone and silently replaces Inter with Open Sans. */
body {
  font-family: var(--font-body) !important;
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font: inherit; color: inherit; }
/* font-weight: 700 !important below is the same class of fix — Bitrix24
   Sites' own theme CSS carries ".landing-public-mode h1" through "h6"
   rules (element selector scoped by a class = higher specificity than our
   plain heading classes like .hero-title or .anniversary-text h2) that
   flatten every heading to font-weight:400, silently un-bolding the hero
   title, section titles, card headings, program row titles, etc. More
   specific rules like .program-row.is-break h4 (which wants 600, not 700)
   still win over this per normal specificity, !important or not. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display) !important; font-weight: 700 !important; line-height: 1.15; }
:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Kills the browser's default black focus ring on a mouse-clicked button
   (program tabs, route points) while keeping the red ring above for
   keyboard navigation. */
button:focus:not(:focus-visible) { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 15px;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-red);
  font-weight: 700;
}

/* Primary buttons replicate the main site's .button-a exactly:
   rectangular (no radius), solid red, bold white text, hover lightens to #fa6f6f. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 40px;
  border-radius: 0;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  line-height: 1.2;
  transition: all 0.2s ease;
}
.btn-primary {
  background: var(--color-red);
  border: 1px solid var(--color-red);
  color: #fff;
}
.btn-primary:hover { background: #fa6f6f; border-color: #fa6f6f; }
.btn-primary:active { background: var(--color-red-active); border-color: var(--color-red-active); }
.btn-secondary {
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
}
.btn-secondary:hover { background: var(--color-navy); color: #fff; }
.btn-on-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-on-dark:hover { background: #fff; color: var(--color-navy); border-color: #fff; }
/* Small CTA (header) matches the site's CRM-widget button ("Заказать звонок").
   !important below: on Bitrix24 Sites, theme.min.css defines
   .btn-sm:not([class*="g-btn-size-"]) with higher specificity than a plain
   .btn-sm, so it wins regardless of stylesheet order and silently shrinks
   this button — same class of bug as the body/h1-h4 font-family fix above. */
.btn-sm { padding: 10px 22px !important; font-size: 14px !important; line-height: 1.2 !important; border-radius: 0 !important; }

/* ===== Header =====
   Ported from the real site's own markup/classes (header, header__data,
   logo-main, header__address, contacts-top, callback, search-top,
   menu-main) with the real spacing/sizes/colors, so it matches
   metrologi.ru exactly. Values below are copied from the site's own
   style.css, not invented. Then a second bar (.header-landingnav) is
   this landing page's own in-page navigation + register CTA. */
.header { position: relative; z-index: 500; background: #fff; }
.header__data { border-bottom: 1px solid #ecebee; }
.header_1 .header__data { border-bottom: 0; }
.header__part_1 { padding-top: 20px; padding-bottom: 10px; }
.cnt { width: 100%; max-width: 1230px; padding-left: 15px; padding-right: 15px; margin: 0 auto; position: relative; }

.header__grid_1 { display: flex; align-items: center; height: 100px; position: relative; }
.header__grid_1 > .header__grid-item_1 { flex-shrink: 0; }
.header__grid_1 > .header__grid-item_2 { display: flex; align-items: center; margin-left: auto; }

.logo-main { display: block; width: 88px; flex-shrink: 0; }
.logo-main__img { display: block; width: 100%; height: auto; }
a.logo-main:hover { opacity: 0.8; }

.h_flexer { display: flex; align-items: center; justify-content: flex-end; }
.header__address, .header__time {
  font-size: 16px; line-height: 26px; color: #8D8A9B; padding-left: 40px; white-space: nowrap;
}
.header__address a { color: var(--color-red); }
.header__address a:hover { color: var(--color-navy); }
.contacts-top__phone {
  display: block; position: relative;
  font-size: 16px; line-height: 26px; color: #8D8A9B; padding-left: 40px; white-space: nowrap;
}
.contacts-top__phone-icon {
  position: absolute; top: 50%; left: 18px; margin-top: -10px;
}
.contacts-top__phone:hover { color: var(--color-red); }
.callback { margin-left: 20px; }
/* Real site's "Заказать звонок" (CRM-widget button) is a slightly
   different red than the brand accent used everywhere else — #ff534a,
   not #EF4848. Scoped to this one button only. */
.callback .btn-primary { background: #ff534a; border-color: #ff534a; }
.callback .btn-primary:hover { background: #ff6f63; border-color: #ff6f63; }

.search-top { position: relative; z-index: 5; margin-left: 35px; }
.search-top__button-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; font-size: 20px; color: #6b6b72;
  transition: color var(--transition);
}
.search-top__button-toggle:hover { color: var(--color-red); }

@media (max-width: 991px) {
  .header__address, .header__time, .contacts-top { display: none; }
}

/* ===== Real site's main nav bar (.menu-main) ===== */
.menu-main { background: #fff; }
.menu-main__list { display: flex; flex-wrap: wrap; justify-content: space-between; }
.menu-main__link {
  display: block; padding: 10px 0 21px;
  font-size: 16px; font-weight: 400; line-height: 21px; color: var(--color-navy);
  transition: color var(--transition);
}
.menu-main__link:hover { color: var(--color-red); }

/* ===== Mobile hamburger + slide-in menu (real site markup/behavior:
   .button-toggle-menu-main toggles an "expanded" class on .menu-main,
   which slides .menu-main__data in from the left as a fixed full-screen
   panel). Hidden on desktop, shown ≤991px. ===== */
.button-toggle-menu-main {
  display: none;
  align-items: center; justify-content: center;
  padding: 10px 10px;
  color: var(--color-red);
  position: absolute; top: 50%; left: -10px; margin-top: -16px;
  background: none; border: none; cursor: pointer; z-index: 5;
}
.button-toggle-menu-main__icon {
  display: flex; align-items: center; width: 20px;
  border-top: 3px solid currentColor; border-bottom: 3px solid currentColor;
}
.button-toggle-menu-main__icon::before {
  content: ''; display: block; width: 100%; height: 3px; margin: 3px 0; background: currentColor;
}
.button-toggle-menu-main__icon-close { display: none; font-size: 16px; }
.expanded .button-toggle-menu-main__icon { display: none; }
.expanded .button-toggle-menu-main__icon-close { display: block; }

@media (max-width: 991px) {
  .button-toggle-menu-main { display: flex; }
  .logo-main {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .menu-main__data {
    /* top/height account for the header's real total height — .header__part_1's
       20px+10px padding plus the .header__grid_1 height (100px here, 88px
       below the 767px breakpoint) — not just the grid height, or the panel
       starts under the logo instead of under the whole header. */
    position: fixed; top: 130px; left: -100%;
    width: 100%; height: calc(100% - 130px);
    background: #fff; border-top: 1px solid #ecebee;
    z-index: 1010; overflow: auto;
    transition: all 0.5s ease;
  }
  .expanded .menu-main__data { left: 0; }
  .menu-main__data-inner { padding: 0 20px; }
  .menu-main__list { display: block; }
  .menu-main__item { border-bottom: 1px solid #ecebee; }
  .menu-main__link { padding: 16px 0; }
}

@media (max-width: 767px) {
  .header__grid_1 { height: 88px; }
  .logo-main { width: 68px; left: 20%; }
  .menu-main__data { top: 118px; height: calc(100% - 118px); }
}

.header-landingnav {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.header-landingnav .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; padding-bottom: 16px; gap: 20px;
}
.landing-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.landing-nav a {
  font-size: 12.5px; font-weight: 700; color: var(--color-navy);
  text-transform: uppercase; letter-spacing: 0.03em;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  padding: 7px 14px; white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.landing-nav a:hover { color: var(--color-red); border-color: var(--color-red); }

@media (max-width: 900px) {
  .landing-nav { gap: 16px; overflow-x: auto; }
}
/* Bordered "pill" chips read as heavy/cramped on a narrow screen — switch
   to plain underlined text links in a single scrollable row instead. */
@media (max-width: 640px) {
  .landing-nav { gap: 20px; }
  .landing-nav a {
    border: none; border-radius: 0; padding: 4px 0;
    font-size: 13px; letter-spacing: 0.02em;
    border-bottom: 2px solid transparent;
  }
  .landing-nav a:hover { border-color: var(--color-red); }
}
@media (max-width: 560px) {
  .header-landingnav .container { gap: 12px; }
  .landing-nav a { font-size: 12px; white-space: nowrap; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 40px 0 72px;
  overflow: hidden;
  background: var(--color-bg);
}
.hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  width: 46%;
  pointer-events: none;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--color-bg) 0%, transparent 30%);
}
/* Two overlaid copies of the same grid, one navy/red for the white-background
   half, one white for the half sitting over the photo — a soft horizontal
   mask fade between them keeps the transition smooth, not a hard edge. */
.hero-grid-decor {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.07;
  background-image:
    linear-gradient(var(--color-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-red) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, black 0%, black 42%, transparent 62%);
}
.hero-grid-decor-light {
  opacity: 0.35;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  mask-image: linear-gradient(90deg, transparent 38%, black 58%);
}

@media (max-width: 900px) {
  .hero-photo { display: none; }
}
.hero-inner { position: relative; z-index: 1; max-width: 780px; }
.hero-badges { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-bg-offset); border-radius: var(--radius-sm);
  padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--color-navy);
}
.hero-badge svg { color: var(--color-red); flex-shrink: 0; }
.hero-title {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 16px;
  color: var(--color-navy);
}
.hero-title em { color: var(--color-red); font-style: normal; }
.hero-lede { font-size: 19px; font-weight: 700; color: var(--color-navy); margin-top: 20px; }
.hero-sub {
  margin-top: 20px;
  font-size: 18px;
  color: var(--color-text-muted);
  max-width: 56ch;
}
.hero-dates {
  margin-top: 4px;
  font-weight: 700;
  color: var(--color-navy);
}
.hero-cta-row { display: flex; align-items: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .hero { padding: 56px 0 48px; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { width: 100%; white-space: normal; }
}

/* ===== Stats strip (between hero and the anniversary band) ===== */
.stats-strip { padding: 40px 0; }
.stats-strip .container { display: flex; gap: 0; }
.stat-block { display: flex; gap: 14px; padding: 0 40px; border-left: 1px solid var(--color-border); }
.stat-block:first-child { padding-left: 0; border-left: none; }
.stat-block-icon { color: var(--color-red); flex-shrink: 0; padding-top: 4px; }
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); color: var(--color-navy); line-height: 1; }
.stat-label { font-size: 13.5px; color: var(--color-text-muted); margin-top: 6px; }

@media (max-width: 768px) {
  .stats-strip .container { flex-direction: column; gap: 20px; }
  .stat-block { border-left: none; padding: 0; border-top: 1px solid var(--color-border); padding-top: 16px; }
  .stat-block:first-child { border-top: none; padding-top: 0; }
}

/* ===== Anniversary strip ===== */
.anniversary-band {
  background: var(--color-navy);
  color: #fff;
  overflow: hidden;
}
.anniversary-band-main {
  position: relative;
  padding: 56px 0;
  min-height: 320px;
  display: flex;
  align-items: center;
}
/* Kicker/heading/subtitle run the block's full width; only the body
   paragraphs below are constrained to half the block. */
.anniversary-text { position: relative; z-index: 2; width: 100%; }
.anniversary-text .kicker { color: #ff7a7a; }
.anniversary-text h2 { margin-top: 12px; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700; line-height: 1.3; color: #fff; }
.anniversary-subtitle { margin-top: 12px; font-size: 18px; font-weight: 700; color: #fff; }
.anniversary-body { margin-top: 20px; max-width: 50%; }
.anniversary-body p { font-size: 15px; color: rgba(255,255,255,0.85); }
.anniversary-body p + p { margin-top: 14px; }

/* The artwork is a full-bleed background for the whole block — it sits
   behind the heading and is allowed to run under the text (per design).
   align-items: flex-end (not center) shifts it toward the bottom edge of
   the band, per request. */
.anniversary-art {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end;
  pointer-events: none;
}
.anniversary-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.anniversary-art-desktop { transform: translateY(20px); }
/* Mobile has its own, smaller illustration (see index.html) — desktop's
   wide one is hidden below the same breakpoint that swaps the two in. */
.anniversary-art-mobile { display: none; }

/* ===== "Draw-in" animation (client-supplied artwork, generated by SVG
   Artista) — each path/line/circle has its own real length baked in as
   stroke-dasharray/stroke-dashoffset below; adding .active to the <svg>
   (done once by script.js, via IntersectionObserver on scroll) transitions
   every dashoffset to 0, so the whole graphic draws itself in. ===== */
.anniversary-art-desktop svg .svg-elem-1 { stroke-dashoffset: 305.35009765625px; stroke-dasharray: 305.35009765625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s; }
.anniversary-art-desktop svg.active .svg-elem-1 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-2 { stroke-dashoffset: 271.39013671875px; stroke-dasharray: 271.39013671875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s; }
.anniversary-art-desktop svg.active .svg-elem-2 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-3 { stroke-dashoffset: 223.469970703125px; stroke-dasharray: 223.469970703125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s; }
.anniversary-art-desktop svg.active .svg-elem-3 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-4 { stroke-dashoffset: 153.489990234375px; stroke-dasharray: 153.489990234375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s; }
.anniversary-art-desktop svg.active .svg-elem-4 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-5 { stroke-dashoffset: 333.83984375px; stroke-dasharray: 333.83984375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s; }
.anniversary-art-desktop svg.active .svg-elem-5 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-6 { stroke-dashoffset: 81.23847198486328px; stroke-dasharray: 81.23847198486328px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s; }
.anniversary-art-desktop svg.active .svg-elem-6 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-7 { stroke-dashoffset: 124.8631591796875px; stroke-dasharray: 124.8631591796875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s; }
.anniversary-art-desktop svg.active .svg-elem-7 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-8 { stroke-dashoffset: 128.98358917236328px; stroke-dasharray: 128.98358917236328px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s; }
.anniversary-art-desktop svg.active .svg-elem-8 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-9 { stroke-dashoffset: 131.99386596679688px; stroke-dasharray: 131.99386596679688px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s; }
.anniversary-art-desktop svg.active .svg-elem-9 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-10 { stroke-dashoffset: 104.94107055664062px; stroke-dasharray: 104.94107055664062px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s; }
.anniversary-art-desktop svg.active .svg-elem-10 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-11 { stroke-dashoffset: 104.94113159179688px; stroke-dasharray: 104.94113159179688px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s; }
.anniversary-art-desktop svg.active .svg-elem-11 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-12 { stroke-dashoffset: 93.24974822998047px; stroke-dasharray: 93.24974822998047px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s; }
.anniversary-art-desktop svg.active .svg-elem-12 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-13 { stroke-dashoffset: 96.79007720947266px; stroke-dasharray: 96.79007720947266px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s; }
.anniversary-art-desktop svg.active .svg-elem-13 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-14 { stroke-dashoffset: 103.09085083007812px; stroke-dasharray: 103.09085083007812px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s; }
.anniversary-art-desktop svg.active .svg-elem-14 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-15 { stroke-dashoffset: 96.79022216796875px; stroke-dasharray: 96.79022216796875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s; }
.anniversary-art-desktop svg.active .svg-elem-15 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-16 { stroke-dashoffset: 65.16673278808594px; stroke-dasharray: 65.16673278808594px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s; }
.anniversary-art-desktop svg.active .svg-elem-16 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-17 { stroke-dashoffset: 33.58351516723633px; stroke-dasharray: 33.58351516723633px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s; }
.anniversary-art-desktop svg.active .svg-elem-17 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-18 { stroke-dashoffset: 25.407451629638672px; stroke-dasharray: 25.407451629638672px; fill: transparent; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s; }
.anniversary-art-desktop svg.active .svg-elem-18 { stroke-dashoffset: 0; fill: rgb(238, 72, 72); }
.anniversary-art-desktop svg .svg-elem-19 { stroke-dashoffset: 1193.3416748046875px; stroke-dasharray: 1193.3416748046875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s; }
.anniversary-art-desktop svg.active .svg-elem-19 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-20 { stroke-dashoffset: 3114.987548828125px; stroke-dasharray: 3114.987548828125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s; }
.anniversary-art-desktop svg.active .svg-elem-20 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-21 { stroke-dashoffset: 887.1505737304688px; stroke-dasharray: 887.1505737304688px; fill: transparent; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s; }
.anniversary-art-desktop svg.active .svg-elem-21 { stroke-dashoffset: 0; fill: rgb(252, 80, 71); }
.anniversary-art-desktop svg .svg-elem-22 { stroke-dashoffset: 405.6817932128906px; stroke-dasharray: 405.6817932128906px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9s; }
.anniversary-art-desktop svg.active .svg-elem-22 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-23 { stroke-dashoffset: 1718.1500244140625px; stroke-dasharray: 1718.1500244140625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s; }
.anniversary-art-desktop svg.active .svg-elem-23 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-24 { stroke-dashoffset: 291.659912109375px; stroke-dasharray: 291.659912109375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1s; }
.anniversary-art-desktop svg.active .svg-elem-24 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-25 { stroke-dashoffset: 252.04171752929688px; stroke-dasharray: 252.04171752929688px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s; }
.anniversary-art-desktop svg.active .svg-elem-25 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-26 { stroke-dashoffset: 246.1500244140625px; stroke-dasharray: 246.1500244140625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s; }
.anniversary-art-desktop svg.active .svg-elem-26 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-27 { stroke-dashoffset: 388.1100158691406px; stroke-dasharray: 388.1100158691406px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s; }
.anniversary-art-desktop svg.active .svg-elem-27 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-28 { stroke-dashoffset: 88.77078909215008px; stroke-dasharray: 88.77078909215008px; fill: transparent; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s; }
.anniversary-art-desktop svg.active .svg-elem-28 { stroke-dashoffset: 0; fill: rgb(255, 255, 255); }
.anniversary-art-desktop svg .svg-elem-29 { stroke-dashoffset: 57.41769440932395px; stroke-dasharray: 57.41769440932395px; fill: transparent; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s; }
.anniversary-art-desktop svg.active .svg-elem-29 { stroke-dashoffset: 0; fill: rgb(255, 255, 255); }
.anniversary-art-desktop svg .svg-elem-30 { stroke-dashoffset: 404.9100036621094px; stroke-dasharray: 404.9100036621094px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.7s; }
.anniversary-art-desktop svg.active .svg-elem-30 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-31 { stroke-dashoffset: 528.570068359375px; stroke-dasharray: 528.570068359375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s; }
.anniversary-art-desktop svg.active .svg-elem-31 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-32 { stroke-dashoffset: 507.300048828125px; stroke-dasharray: 507.300048828125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.9s; }
.anniversary-art-desktop svg.active .svg-elem-32 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-33 { stroke-dashoffset: 226.6600341796875px; stroke-dasharray: 226.6600341796875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4s; }
.anniversary-art-desktop svg.active .svg-elem-33 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-34 { stroke-dashoffset: 226.6600341796875px; stroke-dasharray: 226.6600341796875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.1s; }
.anniversary-art-desktop svg.active .svg-elem-34 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-35 { stroke-dashoffset: 226.6600341796875px; stroke-dasharray: 226.6600341796875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s; }
.anniversary-art-desktop svg.active .svg-elem-35 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-36 { stroke-dashoffset: 226.6600341796875px; stroke-dasharray: 226.6600341796875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.3s; }
.anniversary-art-desktop svg.active .svg-elem-36 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-37 { stroke-dashoffset: 226.6600341796875px; stroke-dasharray: 226.6600341796875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s; }
.anniversary-art-desktop svg.active .svg-elem-37 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-38 { stroke-dashoffset: 355.199951171875px; stroke-dasharray: 355.199951171875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.5s; }
.anniversary-art-desktop svg.active .svg-elem-38 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-39 { stroke-dashoffset: 319.72998046875px; stroke-dasharray: 319.72998046875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s; }
.anniversary-art-desktop svg.active .svg-elem-39 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-40 { stroke-dashoffset: 259.4000244140625px; stroke-dasharray: 259.4000244140625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.7s; }
.anniversary-art-desktop svg.active .svg-elem-40 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-41 { stroke-dashoffset: 343.1100158691406px; stroke-dasharray: 343.1100158691406px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s; }
.anniversary-art-desktop svg.active .svg-elem-41 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-42 { stroke-dashoffset: 343.1200256347656px; stroke-dasharray: 343.1200256347656px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.9s; }
.anniversary-art-desktop svg.active .svg-elem-42 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-43 { stroke-dashoffset: 343.1199951171875px; stroke-dasharray: 343.1199951171875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5s; }
.anniversary-art-desktop svg.active .svg-elem-43 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-44 { stroke-dashoffset: 418.75px; stroke-dasharray: 418.75px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.1s; }
.anniversary-art-desktop svg.active .svg-elem-44 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-45 { stroke-dashoffset: 376.67999267578125px; stroke-dasharray: 376.67999267578125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s; }
.anniversary-art-desktop svg.active .svg-elem-45 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-46 { stroke-dashoffset: 310.9599914550781px; stroke-dasharray: 310.9599914550781px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.3s; }
.anniversary-art-desktop svg.active .svg-elem-46 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-47 { stroke-dashoffset: 310.9599914550781px; stroke-dasharray: 310.9599914550781px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.4s; }
.anniversary-art-desktop svg.active .svg-elem-47 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-48 { stroke-dashoffset: 357.32000732421875px; stroke-dasharray: 357.32000732421875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.5s; }
.anniversary-art-desktop svg.active .svg-elem-48 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-49 { stroke-dashoffset: 88.77078909215008px; stroke-dasharray: 88.77078909215008px; fill: transparent; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6s; }
.anniversary-art-desktop svg.active .svg-elem-49 { stroke-dashoffset: 0; fill: rgb(255, 255, 255); }
.anniversary-art-desktop svg .svg-elem-50 { stroke-dashoffset: 53.60609817504883px; stroke-dasharray: 53.60609817504883px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.7s; }
.anniversary-art-desktop svg.active .svg-elem-50 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-51 { stroke-dashoffset: 35.469993591308594px; stroke-dasharray: 35.469993591308594px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.8s; }
.anniversary-art-desktop svg.active .svg-elem-51 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-52 { stroke-dashoffset: 88.77078909215008px; stroke-dasharray: 88.77078909215008px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.9s; }
.anniversary-art-desktop svg.active .svg-elem-52 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-53 { stroke-dashoffset: 197.09999084472656px; stroke-dasharray: 197.09999084472656px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6s; }
.anniversary-art-desktop svg.active .svg-elem-53 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-54 { stroke-dashoffset: 462.5030822753906px; stroke-dasharray: 462.5030822753906px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.1s; }
.anniversary-art-desktop svg.active .svg-elem-54 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-55 { stroke-dashoffset: 88.77078909215008px; stroke-dasharray: 88.77078909215008px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.2s; }
.anniversary-art-desktop svg.active .svg-elem-55 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-56 { stroke-dashoffset: 304.7982482910156px; stroke-dasharray: 304.7982482910156px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.3s; }
.anniversary-art-desktop svg.active .svg-elem-56 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-57 { stroke-dashoffset: 322.14251708984375px; stroke-dasharray: 322.14251708984375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s; }
.anniversary-art-desktop svg.active .svg-elem-57 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-58 { stroke-dashoffset: 8.02001953125px; stroke-dasharray: 8.02001953125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.5s; }
.anniversary-art-desktop svg.active .svg-elem-58 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-59 { stroke-dashoffset: 10.3900146484375px; stroke-dasharray: 10.3900146484375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.6s; }
.anniversary-art-desktop svg.active .svg-elem-59 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-60 { stroke-dashoffset: 12.610015869140625px; stroke-dasharray: 12.610015869140625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.7s; }
.anniversary-art-desktop svg.active .svg-elem-60 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-61 { stroke-dashoffset: 12.610015869140625px; stroke-dasharray: 12.610015869140625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.8s; }
.anniversary-art-desktop svg.active .svg-elem-61 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-62 { stroke-dashoffset: 13.1400146484375px; stroke-dasharray: 13.1400146484375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.9s; }
.anniversary-art-desktop svg.active .svg-elem-62 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-63 { stroke-dashoffset: 12.610015869140625px; stroke-dasharray: 12.610015869140625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7s; }
.anniversary-art-desktop svg.active .svg-elem-63 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-64 { stroke-dashoffset: 11.040008544921875px; stroke-dasharray: 11.040008544921875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.1s; }
.anniversary-art-desktop svg.active .svg-elem-64 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-65 { stroke-dashoffset: 8.3800048828125px; stroke-dasharray: 8.3800048828125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s; }
.anniversary-art-desktop svg.active .svg-elem-65 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-66 { stroke-dashoffset: 462.5924072265625px; stroke-dasharray: 462.5924072265625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.3s; }
.anniversary-art-desktop svg.active .svg-elem-66 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-67 { stroke-dashoffset: 187.49771118164062px; stroke-dasharray: 187.49771118164062px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.4s; }
.anniversary-art-desktop svg.active .svg-elem-67 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-68 { stroke-dashoffset: 157.30593872070312px; stroke-dasharray: 157.30593872070312px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.5s; }
.anniversary-art-desktop svg.active .svg-elem-68 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-69 { stroke-dashoffset: 527.361083984375px; stroke-dasharray: 527.361083984375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.6s; }
.anniversary-art-desktop svg.active .svg-elem-69 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-70 { stroke-dashoffset: 421.41925048828125px; stroke-dasharray: 421.41925048828125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.7s; }
.anniversary-art-desktop svg.active .svg-elem-70 { stroke-dashoffset: 0; }
.anniversary-art-desktop svg .svg-elem-71 { stroke-dashoffset: 221.37753295898438px; stroke-dasharray: 221.37753295898438px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.8s; }
.anniversary-art-desktop svg.active .svg-elem-71 { stroke-dashoffset: 0; }
/* ===== Mobile "draw-in" animation — a separate, smaller piece of art
   (client-supplied, own SVG Artista export) with its own timing, scoped
   under .anniversary-art-mobile so it doesn't collide with the desktop
   svg-elem-N rules above despite sharing the same class names. ===== */
.anniversary-art-mobile svg .svg-elem-1 { stroke-dashoffset: 139.08999633789062px; stroke-dasharray: 139.08999633789062px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s; }
.anniversary-art-mobile svg.active .svg-elem-1 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-2 { stroke-dashoffset: 123.739990234375px; stroke-dasharray: 123.739990234375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s; }
.anniversary-art-mobile svg.active .svg-elem-2 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-3 { stroke-dashoffset: 102.07998657226562px; stroke-dasharray: 102.07998657226562px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s; }
.anniversary-art-mobile svg.active .svg-elem-3 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-4 { stroke-dashoffset: 70.46002197265625px; stroke-dasharray: 70.46002197265625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s; }
.anniversary-art-mobile svg.active .svg-elem-4 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-5 { stroke-dashoffset: 151.94998168945312px; stroke-dasharray: 151.94998168945312px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s; }
.anniversary-art-mobile svg.active .svg-elem-5 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-6 { stroke-dashoffset: 37.803794860839844px; stroke-dasharray: 37.803794860839844px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s; }
.anniversary-art-mobile svg.active .svg-elem-6 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-7 { stroke-dashoffset: 57.51603698730469px; stroke-dasharray: 57.51603698730469px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s; }
.anniversary-art-mobile svg.active .svg-elem-7 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-8 { stroke-dashoffset: 59.38615036010742px; stroke-dasharray: 59.38615036010742px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s; }
.anniversary-art-mobile svg.active .svg-elem-8 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-9 { stroke-dashoffset: 60.74628448486328px; stroke-dasharray: 60.74628448486328px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s; }
.anniversary-art-mobile svg.active .svg-elem-9 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-10 { stroke-dashoffset: 48.524959564208984px; stroke-dasharray: 48.524959564208984px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s; }
.anniversary-art-mobile svg.active .svg-elem-10 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-11 { stroke-dashoffset: 48.524959564208984px; stroke-dasharray: 48.524959564208984px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s; }
.anniversary-art-mobile svg.active .svg-elem-11 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-12 { stroke-dashoffset: 43.23452377319336px; stroke-dasharray: 43.23452377319336px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s; }
.anniversary-art-mobile svg.active .svg-elem-12 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-13 { stroke-dashoffset: 44.834617614746094px; stroke-dasharray: 44.834617614746094px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s; }
.anniversary-art-mobile svg.active .svg-elem-13 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-14 { stroke-dashoffset: 47.684906005859375px; stroke-dasharray: 47.684906005859375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s; }
.anniversary-art-mobile svg.active .svg-elem-14 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-15 { stroke-dashoffset: 44.834617614746094px; stroke-dasharray: 44.834617614746094px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s; }
.anniversary-art-mobile svg.active .svg-elem-15 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-16 { stroke-dashoffset: 30.54295539855957px; stroke-dasharray: 30.54295539855957px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s; }
.anniversary-art-mobile svg.active .svg-elem-16 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-17 { stroke-dashoffset: 16.27153491973877px; stroke-dasharray: 16.27153491973877px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s; }
.anniversary-art-mobile svg.active .svg-elem-17 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-18 { stroke-dashoffset: 12.583257675170898px; stroke-dasharray: 12.583257675170898px; fill: transparent; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s; }
.anniversary-art-mobile svg.active .svg-elem-18 { stroke-dashoffset: 0; fill: rgb(238, 72, 72); }
.anniversary-art-mobile svg .svg-elem-19 { stroke-dashoffset: 540.3458251953125px; stroke-dasharray: 540.3458251953125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s; }
.anniversary-art-mobile svg.active .svg-elem-19 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-20 { stroke-dashoffset: 1408.6907958984375px; stroke-dasharray: 1408.6907958984375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s; }
.anniversary-art-mobile svg.active .svg-elem-20 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-21 { stroke-dashoffset: 402.0372314453125px; stroke-dasharray: 402.0372314453125px; fill: transparent; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s; }
.anniversary-art-mobile svg.active .svg-elem-21 { stroke-dashoffset: 0; fill: rgb(252, 80, 71); }
.anniversary-art-mobile svg .svg-elem-22 { stroke-dashoffset: 184.4126434326172px; stroke-dasharray: 184.4126434326172px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9s; }
.anniversary-art-mobile svg.active .svg-elem-22 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-23 { stroke-dashoffset: 257.08998107910156px; stroke-dasharray: 257.08998107910156px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s; }
.anniversary-art-mobile svg.active .svg-elem-23 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-24 { stroke-dashoffset: 25.15997314453125px; stroke-dasharray: 25.15997314453125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1s; }
.anniversary-art-mobile svg.active .svg-elem-24 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-25 { stroke-dashoffset: 114.98516845703125px; stroke-dasharray: 114.98516845703125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s; }
.anniversary-art-mobile svg.active .svg-elem-25 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-26 { stroke-dashoffset: 112.32998657226562px; stroke-dasharray: 112.32998657226562px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s; }
.anniversary-art-mobile svg.active .svg-elem-26 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-27 { stroke-dashoffset: 176.47999572753906px; stroke-dasharray: 176.47999572753906px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s; }
.anniversary-art-mobile svg.active .svg-elem-27 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-28 { stroke-dashoffset: 41.20707631680062px; stroke-dasharray: 41.20707631680062px; fill: transparent; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s; }
.anniversary-art-mobile svg.active .svg-elem-28 { stroke-dashoffset: 0; fill: rgb(255, 255, 255); }
.anniversary-art-mobile svg .svg-elem-29 { stroke-dashoffset: 27.007077522574754px; stroke-dasharray: 27.007077522574754px; fill: transparent; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s; }
.anniversary-art-mobile svg.active .svg-elem-29 { stroke-dashoffset: 0; fill: rgb(255, 255, 255); }
.anniversary-art-mobile svg .svg-elem-30 { stroke-dashoffset: 184.07000732421875px; stroke-dasharray: 184.07000732421875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 2.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.7s; }
.anniversary-art-mobile svg.active .svg-elem-30 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-31 { stroke-dashoffset: 239.9499969482422px; stroke-dasharray: 239.9499969482422px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s; }
.anniversary-art-mobile svg.active .svg-elem-31 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-32 { stroke-dashoffset: 230.3400115966797px; stroke-dasharray: 230.3400115966797px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.9s; }
.anniversary-art-mobile svg.active .svg-elem-32 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-33 { stroke-dashoffset: 103.52000427246094px; stroke-dasharray: 103.52000427246094px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4s; }
.anniversary-art-mobile svg.active .svg-elem-33 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-34 { stroke-dashoffset: 103.52998352050781px; stroke-dasharray: 103.52998352050781px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.1s; }
.anniversary-art-mobile svg.active .svg-elem-34 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-35 { stroke-dashoffset: 103.52000427246094px; stroke-dasharray: 103.52000427246094px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s; }
.anniversary-art-mobile svg.active .svg-elem-35 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-36 { stroke-dashoffset: 103.52000427246094px; stroke-dasharray: 103.52000427246094px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.3s; }
.anniversary-art-mobile svg.active .svg-elem-36 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-37 { stroke-dashoffset: 103.52000427246094px; stroke-dasharray: 103.52000427246094px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s; }
.anniversary-art-mobile svg.active .svg-elem-37 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-38 { stroke-dashoffset: 161.6099853515625px; stroke-dasharray: 161.6099853515625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.5s; }
.anniversary-art-mobile svg.active .svg-elem-38 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-39 { stroke-dashoffset: 145.5800018310547px; stroke-dasharray: 145.5800018310547px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s; }
.anniversary-art-mobile svg.active .svg-elem-39 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-40 { stroke-dashoffset: 118.31999206542969px; stroke-dasharray: 118.31999206542969px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 3.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.7s; }
.anniversary-art-mobile svg.active .svg-elem-40 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-41 { stroke-dashoffset: 156.1400146484375px; stroke-dasharray: 156.1400146484375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s; }
.anniversary-art-mobile svg.active .svg-elem-41 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-42 { stroke-dashoffset: 156.13999938964844px; stroke-dasharray: 156.13999938964844px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 4.9s; }
.anniversary-art-mobile svg.active .svg-elem-42 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-43 { stroke-dashoffset: 156.14999389648438px; stroke-dasharray: 156.14999389648438px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5s; }
.anniversary-art-mobile svg.active .svg-elem-43 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-44 { stroke-dashoffset: 190.32000732421875px; stroke-dasharray: 190.32000732421875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.1s; }
.anniversary-art-mobile svg.active .svg-elem-44 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-45 { stroke-dashoffset: 171.30999755859375px; stroke-dasharray: 171.30999755859375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s; }
.anniversary-art-mobile svg.active .svg-elem-45 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-46 { stroke-dashoffset: 141.6099853515625px; stroke-dasharray: 141.6099853515625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.3s; }
.anniversary-art-mobile svg.active .svg-elem-46 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-47 { stroke-dashoffset: 141.6099853515625px; stroke-dasharray: 141.6099853515625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.4s; }
.anniversary-art-mobile svg.active .svg-elem-47 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-48 { stroke-dashoffset: 162.57000732421875px; stroke-dasharray: 162.57000732421875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.5s; }
.anniversary-art-mobile svg.active .svg-elem-48 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-49 { stroke-dashoffset: 41.20707631680062px; stroke-dasharray: 41.20707631680062px; fill: transparent; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6s; }
.anniversary-art-mobile svg.active .svg-elem-49 { stroke-dashoffset: 0; fill: rgb(255, 255, 255); }
.anniversary-art-mobile svg .svg-elem-50 { stroke-dashoffset: 25.325103759765625px; stroke-dasharray: 25.325103759765625px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 4.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.7s; }
.anniversary-art-mobile svg.active .svg-elem-50 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-51 { stroke-dashoffset: 17.12000274658203px; stroke-dasharray: 17.12000274658203px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.8s; }
.anniversary-art-mobile svg.active .svg-elem-51 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-52 { stroke-dashoffset: 41.20707631680062px; stroke-dasharray: 41.20707631680062px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.9s; }
.anniversary-art-mobile svg.active .svg-elem-52 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-53 { stroke-dashoffset: 90.16999816894531px; stroke-dasharray: 90.16999816894531px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6s; }
.anniversary-art-mobile svg.active .svg-elem-53 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-54 { stroke-dashoffset: 62.09042739868164px; stroke-dasharray: 62.09042739868164px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.1s; }
.anniversary-art-mobile svg.active .svg-elem-54 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-55 { stroke-dashoffset: 41.20707631680062px; stroke-dasharray: 41.20707631680062px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.2s; }
.anniversary-art-mobile svg.active .svg-elem-55 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-56 { stroke-dashoffset: 142.83352661132812px; stroke-dasharray: 142.83352661132812px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.3s; }
.anniversary-art-mobile svg.active .svg-elem-56 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-57 { stroke-dashoffset: 150.90687561035156px; stroke-dasharray: 150.90687561035156px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s; }
.anniversary-art-mobile svg.active .svg-elem-57 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-58 { stroke-dashoffset: 4.8000030517578125px; stroke-dasharray: 4.8000030517578125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.5s; }
.anniversary-art-mobile svg.active .svg-elem-58 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-59 { stroke-dashoffset: 5.9000091552734375px; stroke-dasharray: 5.9000091552734375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.6s; }
.anniversary-art-mobile svg.active .svg-elem-59 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-60 { stroke-dashoffset: 6.9300079345703125px; stroke-dasharray: 6.9300079345703125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 5.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.7s; }
.anniversary-art-mobile svg.active .svg-elem-60 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-61 { stroke-dashoffset: 6.9300079345703125px; stroke-dasharray: 6.9300079345703125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.8s; }
.anniversary-art-mobile svg.active .svg-elem-61 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-62 { stroke-dashoffset: 7.1800079345703125px; stroke-dasharray: 7.1800079345703125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.1s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 6.9s; }
.anniversary-art-mobile svg.active .svg-elem-62 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-63 { stroke-dashoffset: 6.9300079345703125px; stroke-dasharray: 6.9300079345703125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7s; }
.anniversary-art-mobile svg.active .svg-elem-63 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-64 { stroke-dashoffset: 6.20001220703125px; stroke-dasharray: 6.20001220703125px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.1s; }
.anniversary-art-mobile svg.active .svg-elem-64 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-65 { stroke-dashoffset: 4.9600067138671875px; stroke-dasharray: 4.9600067138671875px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s; }
.anniversary-art-mobile svg.active .svg-elem-65 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-66 { stroke-dashoffset: 216.2290802001953px; stroke-dasharray: 216.2290802001953px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.5s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.3s; }
.anniversary-art-mobile svg.active .svg-elem-66 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-67 { stroke-dashoffset: 88.28480529785156px; stroke-dasharray: 88.28480529785156px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.4s; }
.anniversary-art-mobile svg.active .svg-elem-67 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-68 { stroke-dashoffset: 74.21849822998047px; stroke-dasharray: 74.21849822998047px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.5s; }
.anniversary-art-mobile svg.active .svg-elem-68 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-69 { stroke-dashoffset: 246.35728454589844px; stroke-dasharray: 246.35728454589844px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.8s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.6s; }
.anniversary-art-mobile svg.active .svg-elem-69 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-70 { stroke-dashoffset: 197.0843505859375px; stroke-dasharray: 197.0843505859375px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 6.9s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.7s; }
.anniversary-art-mobile svg.active .svg-elem-70 { stroke-dashoffset: 0; }
.anniversary-art-mobile svg .svg-elem-71 { stroke-dashoffset: 104.03582000732422px; stroke-dasharray: 104.03582000732422px; transition: stroke-dashoffset 1s cubic-bezier(0.645, 0.045, 0.355, 1) 7s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 7.8s; }
.anniversary-art-mobile svg.active .svg-elem-71 { stroke-dashoffset: 0; }

.anniversary-marquee {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}
.anniversary-marquee .track {
  display: inline-flex; gap: 48px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  animation: scrollTrack 32s linear infinite;
}
.anniversary-marquee .track span strong { color: var(--color-red); }
@keyframes scrollTrack {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 860px) {
  .anniversary-band-main { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 24px 24px; }
  .anniversary-text { padding-left: 0; }
  .anniversary-body { max-width: 100%; }
  /* Text first, illustration below — in normal flow, not absolutely
     positioned/overlapping — and it's the separate, smaller mobile SVG,
     not the wide desktop one scaled down. */
  .anniversary-art-desktop { display: none; }
  .anniversary-art-mobile {
    display: block;
    position: static;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    pointer-events: none;
  }
  .anniversary-art-mobile svg { width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .anniversary-marquee .track { animation: none; }
  .anniversary-art-desktop svg [class^="svg-elem-"],
  .anniversary-art-mobile svg [class^="svg-elem-"] { transition: none !important; stroke-dashoffset: 0 !important; }
}

/* ===== Section base ===== */
section { padding: var(--section-pad) 0; }
.section-head { margin-bottom: 48px; }
.section-title {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-top: 12px;
  letter-spacing: -0.01em;
}
.section-desc { margin-top: 12px; color: var(--color-text-muted); font-size: 16px; }
.program-pdf-btn { margin-top: 32px; margin-bottom: 8px; }

/* ===== "Кому" (audience) ===== */
#audience { padding: var(--section-pad) 0; }
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.audience-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition);
}
.audience-card:hover { box-shadow: var(--shadow-md); }
.audience-icon { color: var(--color-red); margin-bottom: 20px; }
.audience-card h3 { font-size: 18px; font-weight: 700; color: var(--color-navy); }
.audience-card p { margin-top: 8px; color: var(--color-text-muted); font-size: 14.5px; max-width: 46ch; }

@media (max-width: 860px) {
  .audience-grid { grid-template-columns: 1fr; }
}

/* ===== "Три дня, которые собирают профессиональное сообщество" — full-bleed
   red band. Text and cards both run the block's full width now (no more
   two-column text+photo split, no more cards half-overlapping onto white
   background below) — the brand pattern is a right-anchored, full-height,
   semi-transparent decorative background instead of a product photo. */
.conf-cta-section { background: var(--color-bg); }
.conf-cta-colorblock {
  position: relative;
  background: var(--color-red);
  color: #fff;
  overflow: hidden;
}
.conf-cta-pattern {
  position: absolute; top: 0; right: 0; z-index: 0;
  height: 100%; width: auto;
  opacity: 0.5; pointer-events: none;
}
.conf-cta-inner { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 56px; }

.conf-cta-text { width: 100%; max-width: 760px; }
.conf-cta-text h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700; color: #fff; }
.conf-cta-text p { margin-top: 20px; font-size: 15px; color: rgba(255,255,255,0.92); max-width: 68ch; }
.conf-cta-list-label { margin-top: 28px; font-size: 18px; font-weight: 700; }

.conf-cta-cards {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.conf-cta-card {
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 24px;
  box-shadow: var(--shadow-card);
}
.conf-cta-card-icon { margin-bottom: 16px; color: var(--color-red); }
.conf-cta-card h4 { font-size: 15.5px; font-weight: 700; color: var(--color-navy); }
.conf-cta-card p { margin-top: 8px; font-size: 13.5px; color: var(--color-text-muted); }

@media (max-width: 860px) {
  .conf-cta-cards { grid-template-columns: 1fr; }
}

/* ===== Tag cloud — evenly distributed across the block width ===== */
.tagcloud-section { padding: var(--section-pad) 0; }
.tag-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.tag-chip {
  background: var(--color-navy); color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 10px 16px; border-radius: var(--radius-sm);
  white-space: nowrap;
}
.tag-chip.tag-accent { background: var(--color-red); }

@media (max-width: 640px) {
  /* A wrapped wall of chips reads as a huge block on a narrow screen —
     one scrollable row keeps the same content compact. */
  .tag-cloud {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .tag-chip { flex-shrink: 0; }
}

/* ===== Программа (tabs) ===== */
.program-venue-note {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 20px;
  padding: 12px 16px; background: var(--color-bg-offset); border-radius: var(--radius-sm);
}
.program-venue-note svg { color: var(--color-red); flex-shrink: 0; }
.program-venue-note strong { color: var(--color-navy); }

.program-tabs { display: flex; gap: 8px; margin-bottom: 32px; border-bottom: 1px solid var(--color-border); }
.program-tab {
  padding: 14px 4px; margin-right: 28px;
  font-weight: 700; font-size: 15px; color: var(--color-text-faint);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.program-tab.active { color: var(--color-navy); border-bottom-color: var(--color-red); }
.program-tab:hover:not(.active) { color: var(--color-text-muted); }
.program-tabs-scroll { overflow-x: auto; }

.program-day-badge {
  display: inline-block; margin-left: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--color-red-tint); color: var(--color-red);
  vertical-align: middle;
}

.program-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.program-list { display: none; flex-direction: column; }
.program-list.active { display: flex; }
.program-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.program-row::before {
  content: ''; position: absolute; left: 130px; top: 0; bottom: 0;
  border-left: 1px solid var(--color-border);
}
.program-list > .program-row:last-child { border-bottom: none; }
/* When script.js progressively hides rows on mobile, the true last row is
   no longer :last-child (the toggle button is appended after it) — this
   covers that case so the visible list still ends without a trailing line. */
.program-row.is-last-visible { border-bottom: none; }

.program-toggle-btn {
  display: none;
  width: 100%;
  align-items: center; justify-content: center; gap: 8px;
  padding: 16px 0;
  background: none; border: none; border-top: 1px solid var(--color-border);
  font-weight: 700; font-size: 14px; color: var(--color-red);
  cursor: pointer;
}
.program-toggle-btn svg { transition: transform 0.25s var(--transition); }
.program-toggle-btn.is-expanded svg { transform: rotate(180deg); }
@media (max-width: 640px) {
  .program-toggle-btn { display: flex; }
}
.program-time { font-weight: 700; color: var(--color-text-muted); font-size: 14px; }
.program-row h4 { font-size: 16.5px; font-weight: 700; color: var(--color-navy); }
.program-row p { margin-top: 4px; color: var(--color-text-muted); font-size: 14.5px; }
.program-speaker { margin-top: 8px; font-size: 13.5px; color: var(--color-text-faint); font-weight: 600; }

/* Break rows (coffee, lunch, transfer) get a gray fill so they read as pauses */
.program-row.is-break {
  background: var(--color-bg-offset);
}
/* !important: needed to beat the new global h1-h6 { font-weight: 700
   !important } guard above (added against Bitrix's own font-weight:400
   heading reset) — without it, break rows would lose their lighter 600
   weight since !important always wins over specificity, never the other
   way round. */
.program-row.is-break h4 { color: var(--color-text-muted); font-weight: 600 !important; }

/* "Подробнее" accordion for the detailed talk abstract */
.program-more-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--color-red);
}
.program-more-toggle svg { transition: transform var(--transition); }
.program-row.expanded .program-more-toggle svg { transform: rotate(180deg); }
.program-more {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s var(--transition), opacity 0.3s var(--transition), margin-top 0.35s var(--transition);
}
.program-row.expanded .program-more { max-height: 900px; opacity: 1; margin-top: 14px; }
.program-more p { margin-top: 10px; font-size: 14px; color: var(--color-text-muted); }
.program-more p:first-child { margin-top: 0; }

@media (max-width: 640px) {
  .program-row { grid-template-columns: 1fr; gap: 6px; }
  .program-row::before { display: none; }
}

/* ===== Спикеры ===== */
.speakers-headliners {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 20px;
}
.speakers-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.speaker-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition);
}
.speaker-card:hover { box-shadow: var(--shadow-md); }
/* All speaker photos share one portrait ratio and one duotone treatment,
   so wildly different source photos (studio vs office, different light and
   backgrounds) still read as one consistent system. */
.speaker-photo {
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #efeef4, #dedbe8);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint);
  position: relative;
  overflow: hidden;
}
.speaker-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  filter: contrast(1.06) saturate(0.92);
}
.speaker-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(28,22,56,0.28), rgba(28,22,56,0.05) 55%, rgba(239,72,72,0.1));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.speaker-body { padding: 16px 18px 20px; }
.speaker-name { font-weight: 700; font-size: 15px; color: var(--color-navy); }
.speaker-role { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.speaker-topic {
  margin-top: 10px; font-size: 12.5px; color: var(--color-text-faint);
  padding-top: 10px; border-top: 1px dashed var(--color-border);
}
.speaker-day-badge {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: rgba(39,34,66,0.85); color: #fff;
  padding: 3px 9px; border-radius: var(--radius-full);
}
.speaker-card.tbd .speaker-photo { color: var(--color-text-faint); }
.speaker-card.tbd .speaker-name { color: var(--color-text-faint); }

@media (max-width: 900px) {
  .speakers-headliners { grid-template-columns: 1fr; }
  .speakers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* Long stacked list of 9 cards makes the page very tall — a horizontal
     swipe carousel keeps the section compact on mobile. */
  .speakers-headliners,
  .speakers-grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 16px; padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .speakers-headliners .speaker-card,
  .speakers-grid .speaker-card {
    flex: 0 0 62%; scroll-snap-align: start;
  }
  /* A 4:5 portrait photo on a narrower card reads as very tall — flatten
     it and tighten the body padding so the whole card is more compact. */
  .speakers-headliners .speaker-photo,
  .speakers-grid .speaker-photo {
    aspect-ratio: 5 / 4;
  }
  .speakers-headliners .speaker-body,
  .speakers-grid .speaker-body {
    padding: 12px 14px 14px;
  }
  .speakers-headliners .speaker-topic,
  .speakers-grid .speaker-topic {
    margin-top: 8px; padding-top: 8px;
  }
}

/* Swipe hint — a small round arrow badge overlaid on the row's edge (not
   the row itself moving). script.js wraps each swipeable row in
   .swipe-hint-wrap and appends .swipe-hint-arrow once it first scrolls
   into view; the badge fades in and does a gentle side-to-side nudge
   until the visitor actually scrolls the row, then it fades out for good. */
.swipe-hint-wrap { position: relative; }
.swipe-hint-arrow {
  position: absolute; right: 10px; bottom: 10px; z-index: 6;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.swipe-hint-wrap.show-hint .swipe-hint-arrow {
  opacity: 1;
  animation: swipeArrowNudge 1.3s ease-in-out infinite;
}
@keyframes swipeArrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint-wrap.show-hint .swipe-hint-arrow { animation: none; }
}

/* ===== Галерея ===== */
/* Each "row group" below spans exactly 6 columns and shares one row-span,
   so tiles tile edge-to-edge with no leftover gaps (grid-auto-flow: dense
   is kept as a safety net, not load-bearing). */
/* Flat 4-column grid — every row lands on an exact multiple of 4 column
   units (2+1+1, 2+1+1, 1+1+1+1 = 12 units / 4 cols = 3 clean rows), so
   there's never a leftover gap, on desktop or mobile alike. Square tiles
   via aspect-ratio (not row-span) keep every row the same height; the
   two "wide" tiles are just 2 columns wide at the same aspect so they
   line up without needing row spans at all. */
.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gallery-item {
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, #efeef4, #dedbe8);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint); font-size: 12px;
  overflow: hidden; position: relative;
  aspect-ratio: 1;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.gallery-item.g1,
.gallery-item.g4 { grid-column: span 2; aspect-ratio: 2 / 1; }

@media (max-width: 860px) {
  .gallery-masonry { gap: 6px; }
}

/* ===== Custom scrollbars for horizontal swipe/scroll strips ===== */
.speakers-headliners,
.speakers-grid,
.tag-cloud,
.landing-nav,
.program-tabs-scroll,
.route-points {
  scrollbar-width: thin;
  scrollbar-color: var(--color-red) transparent;
}
.speakers-headliners::-webkit-scrollbar,
.speakers-grid::-webkit-scrollbar,
.tag-cloud::-webkit-scrollbar,
.landing-nav::-webkit-scrollbar,
.program-tabs-scroll::-webkit-scrollbar,
.route-points::-webkit-scrollbar {
  height: 5px;
}
.speakers-headliners::-webkit-scrollbar-track,
.speakers-grid::-webkit-scrollbar-track,
.tag-cloud::-webkit-scrollbar-track,
.landing-nav::-webkit-scrollbar-track,
.program-tabs-scroll::-webkit-scrollbar-track,
.route-points::-webkit-scrollbar-track {
  background: var(--color-border);
  border-radius: var(--radius-full);
}
.speakers-headliners::-webkit-scrollbar-thumb,
.speakers-grid::-webkit-scrollbar-thumb,
.tag-cloud::-webkit-scrollbar-thumb,
.landing-nav::-webkit-scrollbar-thumb,
.program-tabs-scroll::-webkit-scrollbar-thumb,
.route-points::-webkit-scrollbar-thumb {
  background: var(--color-red);
  border-radius: var(--radius-full);
}
.speakers-headliners::-webkit-scrollbar-thumb:hover,
.speakers-grid::-webkit-scrollbar-thumb:hover,
.tag-cloud::-webkit-scrollbar-thumb:hover,
.landing-nav::-webkit-scrollbar-thumb:hover,
.program-tabs-scroll::-webkit-scrollbar-thumb:hover,
.route-points::-webkit-scrollbar-thumb:hover {
  background: var(--color-red-hover);
}

/* On mobile the real site's own horizontal scrollers never show a
   scrollbar at all — swipe is the only affordance. Hide it here to match,
   overriding the thin red desktop styling above. */
@media (max-width: 900px) {
  .speakers-headliners,
  .speakers-grid,
  .tag-cloud,
  .landing-nav,
  .program-tabs-scroll,
  .route-points {
    scrollbar-width: none;
  }
  .speakers-headliners::-webkit-scrollbar,
  .speakers-grid::-webkit-scrollbar,
  .tag-cloud::-webkit-scrollbar,
  .landing-nav::-webkit-scrollbar,
  .program-tabs-scroll::-webkit-scrollbar,
  .route-points::-webkit-scrollbar {
    display: none;
  }
}

/* ===== Gallery lightbox ===== */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 16, 40, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--transition);
}
.lightbox-overlay.show { opacity: 1; pointer-events: auto; }
.lightbox-overlay img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  box-shadow: var(--shadow-lg); border-radius: var(--radius-sm);
}
.lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }
@media (max-width: 640px) {
  .lightbox-overlay { padding: 16px; }
  .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
}

/* ===== Registration section wrapper ===== */
.registration-section {
  background: var(--color-navy);
  padding: var(--section-pad) 0 40px;
}
.registration-section .kicker { color: #ff7a7a; }
.registration-section .section-head .section-title { color: #fff; }
.registration-section .section-desc { color: rgba(255,255,255,0.6); }
.registration-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 48px);
  box-shadow: var(--shadow-lg);
}

.registration-partner {
  margin-top: 32px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap;
}
.registration-partner-label {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
}
.registration-partner-logo {
  display: inline-flex; align-items: center;
  opacity: 0.9; transition: opacity var(--transition);
}
.registration-partner-logo:hover { opacity: 1; }
.registration-partner-logo img { height: 28px; width: auto; display: block; }
.registration-partner-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 16px;
  border: 1px dashed rgba(255,255,255,0.35); border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
}

/* ===== Footer =====
   Rebuilt on the real site's own markup/classes (footer, footer__part_1/2,
   menu-bottom, contacts-bottom, social-media, footer__address, footer__conf),
   with the real spacing/colors from its own style.css. */
.footer { position: relative; background: #fff; }
.footer__part_1 { padding: 40px 0; border-top: 1px solid #e0e0e0; }
.footer__part_2 { padding: 27px 0; border-top: 1px solid #e0e0e0; font-size: 14px; }

.footer__grid_1 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px; }
.RatingBadgeWidget {
  display: block; width: 150px; height: 50px;
  background-repeat: no-repeat; background-size: contain;
}
.footer__grid_2 { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px 30px; }

.menu-bottom__list { display: flex; flex-wrap: wrap; gap: 20px; }
.menu-bottom__link {
  display: block; color: var(--color-navy); font-size: 16px; font-weight: 500;
  transition: color var(--transition);
}
.menu-bottom__link:hover { color: var(--color-red); }

.social-media__list { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.social-media__item { display: block; padding: 8px 0; color: var(--color-navy); transition: opacity var(--transition); }
.social-media__item-img { display: block; width: 20px; height: 20px; }
.social-media__item:hover { opacity: 0.7; }

.contacts-bottom__list { display: flex; flex-wrap: wrap; gap: 24px 35px; }
.contacts-bottom__item-link { display: flex; align-items: center; gap: 12px; color: var(--color-text-muted); }
.contacts-bottom__item-link:hover { color: var(--color-red); }
.contacts-bottom__item-icon { color: var(--color-navy); flex-shrink: 0; }

.footer__conf { color: #8D8A9B; }
.footer__conf:hover { color: var(--color-red); }
.footer__address { color: #8D8A9B; }

/* Mobile footer stacking — exact values from the real site's own
   @media (max-width: 767px) rules, not approximated. */
@media (max-width: 767px) {
  .footer__part_1 { padding-top: 0; }
  .footer__part_2 { padding: 21px 0 56px; }
  .footer__grid_1 { justify-content: flex-start; }
  .footer__grid_1 .footer__grid-item { max-width: none; padding-left: 0; }
  .footer__grid_1 .footer__grid-item_1 { width: 100%; }
  .footer__grid_2 { display: block; margin-left: 0; }
  .footer__grid_2 .footer__grid-item { max-width: none; padding-left: 0; }
  .footer__grid_2 .footer__grid-item_2 { padding-top: 6px; }
  .contacts-bottom__list { display: block; margin-left: 0; }
  .contacts-bottom__item { margin: 0 0 10px 0; }
}

/* =====================================================================
   Registration FORM (adapted from provided prototype — same interaction
   logic, restyled to brand tokens above)
   ===================================================================== */
.form-header { text-align: left; margin-bottom: 32px; }
.form-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700; margin-top: 8px; color: var(--color-navy); letter-spacing: -0.01em; }
.form-sub { color: var(--color-text-muted); font-size: 14.5px; margin-top: 8px; max-width: 56ch; }

.progress-track { display: flex; gap: 8px; margin-top: 24px; }
.progress-seg { height: 4px; flex: 1; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; }
.progress-seg .fill { height: 100%; width: 0%; background: var(--color-red); transition: width 0.4s var(--transition); }
.progress-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--color-text-faint); }

.step-card { margin-bottom: 24px; }
.step-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--color-navy); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-num.done { background: var(--color-success); }
.step-eyebrow-title { font-size: 18px; font-weight: 700; color: var(--color-navy); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-grid { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 16px; }
.form-group.full { grid-column: 1/-1; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.form-group input, .form-group select {
  width: 100%; padding: 12px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-bg-offset); font-size: 15px;
  min-height: 48px; transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input::placeholder { color: var(--color-text-faint); }
.form-group input:focus, .form-group select:focus { border-color: var(--color-red); box-shadow: 0 0 0 3px var(--color-red-tint); outline: none; }
.form-group input.invalid { border-color: var(--color-error); }
.field-error { font-size: 12px; color: var(--color-error); margin-top: 4px; display: none; }
.field-error.show { display: block; }
.field-hint { font-size: 12.5px; color: var(--color-text-faint); margin-top: 4px; }
.consent-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.consent-row input {
  width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--color-red); cursor: pointer;
}
.consent-row input.invalid { outline: 2px solid var(--color-error); outline-offset: 2px; border-radius: 3px; }
.consent-row label { font-size: 12.5px; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.consent-row a { color: var(--color-red); font-weight: 600; }

.fork-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
@media (max-width: 560px) { .fork-row { grid-template-columns: 1fr; } }
.fork-option {
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 16px;
  cursor: pointer; transition: all var(--transition); background: var(--color-bg-offset);
  display: flex; align-items: flex-start; gap: 12px;
}
.fork-option:hover { border-color: color-mix(in oklab, var(--color-red) 35%, var(--color-border-strong)); }
.fork-option.active { border-color: var(--color-red); background: color-mix(in oklab, var(--color-red) 5%, var(--color-bg-offset)); box-shadow: 0 0 0 1px var(--color-red) inset; }
.fork-radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: border-color var(--transition); }
.fork-option.active .fork-radio-dot { border-color: var(--color-red); }
.fork-radio-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--color-red); opacity: 0; transition: opacity var(--transition); }
.fork-option.active .fork-radio-dot::after { opacity: 1; }
.fork-option-title { font-weight: 700; font-size: 14px; color: var(--color-navy); }
.fork-option-desc { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }

.undecided-panel { display: none; padding: 20px; border-radius: var(--radius-md); background: var(--color-bg-offset); border: 1px dashed var(--color-border-strong); }
.undecided-panel.show { display: block; }
.undecided-panel-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; color: var(--color-navy); }
.undecided-panel p { font-size: 14px; color: var(--color-text-muted); margin-top: 8px; }

.days-section.hidden { display: none; }

.day-toggle-list { display: grid; gap: 12px; }
.day-toggle {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
  background: var(--color-bg-offset);
}
.day-toggle:hover { border-color: color-mix(in oklab, var(--color-red) 40%, var(--color-border-strong)); }
.day-toggle.checked { border-color: var(--color-red); background: color-mix(in oklab, var(--color-red) 5%, var(--color-bg-offset)); }
.day-toggle input[type="checkbox"] { display: none; }
.day-check-box {
  width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border-strong);
  flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); background: var(--color-bg);
}
.day-toggle.checked .day-check-box { background: var(--color-red); border-color: var(--color-red); }
.day-check-box svg { opacity: 0; transition: opacity var(--transition); width: 14px; height: 14px; color: #fff; }
.day-toggle.checked .day-check-box svg { opacity: 1; }
.day-toggle-body { flex: 1; }
.day-toggle-title { font-weight: 700; font-size: 15px; color: var(--color-navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.day-badge { font-family: var(--font-mono); font-size: 11px; background: var(--color-navy); color: #fff; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 700; }
.day-badge-accent { background: transparent; color: var(--color-red); border: 1px solid var(--color-red); }
.day-toggle-desc { font-size: 13.5px; color: var(--color-text-muted); margin-top: 4px; }

.day-subpanel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--transition), opacity 0.3s var(--transition), margin-top 0.35s var(--transition); opacity: 0; margin-top: 0; }
.day-toggle.checked + .day-subpanel { max-height: 900px; opacity: 1; margin-top: 12px; }
.subpanel-inner { padding-left: calc(24px + 16px); }

.slot-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .slot-grid { grid-template-columns: 1fr; } }
.slot-card {
  position: relative; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
  padding: 16px; cursor: pointer; background: var(--color-bg);
  transition: border-color var(--transition), background var(--transition), opacity var(--transition);
}
.slot-card input { display: none; }
.slot-card:hover:not(.full) { border-color: color-mix(in oklab, var(--color-red) 40%, var(--color-border-strong)); }
.slot-card.selected { border-color: var(--color-red); background: color-mix(in oklab, var(--color-red) 6%, var(--color-bg)); }
.slot-time { font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; align-items: center; color: var(--color-navy); }
.slot-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.slot-card.selected .slot-radio { border-color: var(--color-red); }
.slot-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--color-red); opacity: 0; transition: opacity var(--transition); }
.slot-card.selected .slot-radio::after { opacity: 1; }
.slot-meta { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slot-occupancy { font-size: 12px; color: var(--color-text-muted); font-family: var(--font-mono); }
.slot-occupancy.tight { color: var(--color-warning); font-weight: 700; }
.slot-occupancy.full { color: var(--color-error); font-weight: 700; }
.occ-bar { flex: 1; height: 5px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; max-width: 80px; }
.occ-fill { height: 100%; background: var(--color-success); border-radius: var(--radius-full); transition: width 0.5s var(--transition), background var(--transition); }
.occ-fill.tight { background: var(--color-warning); }
.occ-fill.full { background: var(--color-error); }
.slot-card.full { cursor: not-allowed; opacity: 0.55; }
.slot-card.full .slot-time::after { content: 'Мест нет'; font-size: 12px; font-weight: 700; color: var(--color-error); }

.dinner-block {
  margin-top: 20px; padding: 16px; border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--color-red) 4%, var(--color-bg-offset));
  border: 1px dashed color-mix(in oklab, var(--color-red) 30%, var(--color-border-strong));
}
.dinner-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dinner-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--color-navy); }
.dinner-toggle-switch { position: relative; width: 44px; height: 26px; border-radius: var(--radius-full); background: var(--color-border-strong); flex-shrink: 0; cursor: pointer; transition: background var(--transition); }
.dinner-toggle-switch.on { background: var(--color-red); }
.dinner-toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--transition); }
.dinner-toggle-switch.on::after { transform: translateX(18px); }
.dinner-toggle-switch input { display: none; }
/* Shown once DINNER_LIMIT (2, company-wide across the main registrant +
   colleagues) is reached — every still-off toggle is locked until a spot
   frees up, so nobody can silently overshoot the cap. */
.dinner-toggle-switch.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.dinner-desc { font-size: 12.5px; color: var(--color-text-muted); margin-top: 8px; }
.dinner-alert { display: none; align-items: center; gap: 8px; margin-top: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-warning-bg); color: var(--color-warning); font-size: 12px; font-weight: 600; }
.dinner-alert.show { display: flex; }

/* Shown at the top of the form when the page is opened via a personal
   "edit your registration" link (?token=...) from an email — either while
   the existing data loads, once it's loaded, or if the link turned out to
   be invalid/expired. */
.edit-mode-notice { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; }
.edit-mode-notice.is-loading { background: var(--color-bg); color: var(--color-text-muted); }
.edit-mode-notice.is-ready { background: var(--color-success-bg); color: var(--color-success); }
.edit-mode-notice.is-error { background: var(--color-warning-bg); color: var(--color-warning); }

/* Shown only in edit mode (personal link from an email) once the current
   data has loaded — lets a returning visitor cancel their own
   registration instead of just adjusting it. */
.cancel-registration-link {
  display: block; margin-top: 12px; padding: 0; border: none; background: none;
  font-size: 13px; color: var(--color-text-muted); text-decoration: underline;
  cursor: pointer;
}
.cancel-registration-link:hover { color: var(--color-error); }

.colleague-dinner-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--color-border);
  font-size: 13.5px; color: var(--color-navy); font-weight: 600;
}

.colleague-section { border-top: 1px dashed var(--color-border); margin-top: 32px; padding-top: 24px; }
.colleague-intro { display: flex; align-items: flex-start; gap: 16px; }
.colleague-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-bg-offset); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-red); }
.colleague-text h3 { font-size: 16px; font-weight: 700; color: var(--color-navy); }
.colleague-text p { font-size: 14px; color: var(--color-text-muted); margin-top: 4px; }
.add-colleague-btn {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-full); border: 1.5px dashed var(--color-border-strong);
  font-size: 14px; font-weight: 600; color: var(--color-text-muted); transition: all var(--transition);
}
.add-colleague-btn:hover { border-color: var(--color-red); color: var(--color-red); background: var(--color-red-tint); }

.form-submit-row {
  margin-top: 32px; padding-top: 24px; border-top: 1px dashed var(--color-border);
}
.form-submit-row .btn { width: 100%; }
@media (max-width: 480px) {
  .form-submit-row .btn { padding: 14px; }
}

.colleague-card {
  margin-top: 16px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background: var(--color-bg-offset); position: relative; animation: slideDown 0.3s var(--transition);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.colleague-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.colleague-card-head span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); }
.remove-colleague { color: var(--color-text-faint); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-sm); }
.remove-colleague:hover { color: var(--color-error); background: var(--color-error-bg); }

.colleague-schedule { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.colleague-schedule-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.day-chip {
  padding: 8px 16px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border-strong);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--transition); background: var(--color-bg);
  white-space: nowrap;
}
.day-chip:hover { border-color: color-mix(in oklab, var(--color-red) 40%, var(--color-border-strong)); }
.day-chip.active { background: var(--color-red); color: #fff; border-color: var(--color-red); }
.day-chip.unsure { border-style: dashed; }
.day-chip.unsure.active { background: var(--color-text-faint); border-color: var(--color-text-faint); }

.colleague-slot-row { display: none; margin-top: 12px; align-items: center; gap: 12px; flex-wrap: wrap; }
.colleague-slot-row.show { display: flex; }
.colleague-slot-row label { font-size: 12px; color: var(--color-text-muted); }
.colleague-slot-row select { max-width: 280px; }
.colleague-unsure-note { display: none; font-size: 12px; color: var(--color-text-muted); margin-top: 8px; font-style: italic; }
.colleague-unsure-note.show { display: block; }

.summary-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; width: 100%;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border); padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 -8px 24px rgba(20,16,40,0.06);
  /* Hidden until the visitor scrolls past the threshold (see script.js);
     once shown it never hides again. */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--transition), opacity 0.3s var(--transition);
}
.summary-bar.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.summary-note { font-size: 14px; color: var(--color-text-muted); }

/* Keep the bar to one line on narrow phones: drop the padding, shrink the
   type, and cut the "Участие бесплатное." lead-in — "Количество мест
   ограничено." alone is short enough to sit next to the button. */
@media (max-width: 480px) {
  .summary-bar { padding: 12px 16px; gap: 10px; }
  .summary-note { font-size: 12.5px; white-space: nowrap; }
  .summary-note-full { display: none; }
  .summary-bar .btn { padding: 10px 16px !important; font-size: 13px; white-space: nowrap; }
}

.success-screen { display: none; text-align: center; padding: 64px 24px; }
.success-screen.show { display: block; animation: fadeUp 0.5s var(--transition); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.success-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.success-title { font-size: 24px; font-weight: 700; color: var(--color-navy); }
.success-text { color: var(--color-text-muted); margin-top: 12px; max-width: 48ch; margin-inline: auto; font-size: 14px; }
.success-details { margin-top: 32px; text-align: left; background: var(--color-bg-offset); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); border-radius: var(--radius-md); padding: 20px; max-width: 480px; margin-inline: auto; }
.success-details-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; gap: 12px; }
.success-details-row:last-child { border-bottom: none; }
.success-details-row span:first-child { color: var(--color-text-muted); flex-shrink: 0; }
.success-details-row span:last-child { font-weight: 600; text-align: right; color: var(--color-navy); }

.form-content.hidden { display: none; }

/* Compact confirm panel shown when a visitor arrives via the email's
   direct "Отменить регистрацию" link (?token=...&cancel=1) — replaces
   the whole multi-step form so cancelling takes one click, not a scroll
   through fields they don't need to touch. */
.cancel-confirm-panel { text-align: center; padding: 48px 24px; }
.cancel-confirm-text { color: var(--color-text-muted); margin-top: 12px; font-size: 15px; max-width: 48ch; margin-inline: auto; }
.cancel-confirm-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cancel-confirm-actions .btn { min-width: 260px; }
.cancel-confirm-back { font-size: 13.5px; color: var(--color-text-muted); text-decoration: underline; }
.cancel-confirm-back:hover { color: var(--color-navy); }

.section-divider-note {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--color-text-faint);
  margin-top: 12px; padding: 12px; background: var(--color-bg-offset); border-radius: var(--radius-sm);
}

body.has-summary-bar .registration-section { padding-bottom: 72px; }

/* ===== Back-to-top button ===== */
.back-to-top {
  position: fixed; right: 24px; bottom: 96px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.3s var(--transition), transform 0.3s var(--transition), background var(--transition);
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--color-red); }
@media (max-width: 720px) {
  .back-to-top { right: 12px; bottom: 84px; width: 40px; height: 40px; }
}

/* =====================================================================
   "Как добраться" — three-point horizontal route with expandable panels
   ===================================================================== */
.route-section { padding: var(--section-pad) 0; }
.route-line-wrap { position: relative; margin: 56px 0 32px; }
.route-line {
  position: absolute; top: 13px; left: 0; right: 0; height: 2px;
  background: var(--color-border-strong);
}
.route-line .route-transfer-badge {
  position: absolute; top: -34px; left: 66%; transform: translateX(-50%);
  background: var(--color-red); color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: var(--radius-full); white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.route-points { position: relative; display: flex; justify-content: space-between; }
.route-point { background: none; border: none; padding: 0; cursor: pointer; text-align: left; flex: 1; }
.route-point:not(:last-child) { margin-right: 16px; }
.route-point-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-bg); border: 2px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition), background var(--transition);
}
.route-point-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); transition: background var(--transition); }
.route-point.active .route-point-dot { border-color: var(--color-red); background: var(--color-red); }
.route-point.active .route-point-dot::after { background: #fff; }
.route-point-label { margin-top: 14px; font-weight: 700; font-size: 14.5px; color: var(--color-navy); }
.route-point-sub { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }

.route-panels { margin-top: 8px; }
.route-panel {
  display: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 3vw, 32px);
  animation: fadeUp 0.35s var(--transition);
}
.route-panel.active { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; }
.route-panel h4 { font-size: 19px; font-weight: 700; color: var(--color-navy); }
.route-panel p { margin-top: 12px; color: var(--color-text-muted); font-size: 14.5px; }
.route-panel ul { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.route-panel li { font-size: 14px; color: var(--color-text-muted); display: flex; gap: 8px; }
.route-panel li::before { content: '•'; color: var(--color-red); flex-shrink: 0; }
.route-return-note { margin-top: 16px; font-size: 12.5px; color: var(--color-text-faint); font-style: italic; }
.route-hotel-note {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--color-red-tint); color: var(--color-navy); font-size: 13.5px;
}
.route-hotel-note strong { color: var(--color-red); }
.route-map-placeholder {
  aspect-ratio: 4/3; border-radius: var(--radius-sm); background: var(--color-bg-offset);
  border: 1px dashed var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint); font-size: 13px; text-align: center; padding: 20px;
}
.route-map {
  aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.route-map iframe { display: block; border: 0; }

@media (max-width: 720px) {
  .route-panel.active { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Three equal-width columns squeeze each label onto 3-4 wrapped lines on
     a narrow screen and read as cramped — same fix as the other swipeable
     rows: one horizontally-scrolling strip of full-size cards instead. The
     original single full-row .route-line only works when all three points
     share one row, so on mobile each card grows its own connector segment
     instead (below), bridged across the gap into the next card so it still
     reads as one continuous line running behind the dots. */
  .route-line { display: none; }
  .route-line-wrap { margin: 0 0 24px; }
  .route-line .route-transfer-badge {
    position: static; transform: none;
    display: inline-flex; margin-bottom: 20px;
  }
  .route-points {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 16px; padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .route-point {
    position: relative;
    flex: 0 0 68%; scroll-snap-align: start;
  }
  .route-point:not(:last-child) { margin-right: 0; }
  /* Sits behind the dot (z-index:0 vs. the dot's z-index:1 below) and
     stretches 16px past this card's own right edge — exactly the gap
     width — into the next card, so the line reads as unbroken even
     though it's really a separate segment per card. */
  .route-point::before {
    content: '';
    position: absolute; top: 13px; left: 0; right: -16px; z-index: 0;
    height: 2px; background: var(--color-border-strong);
  }
  .route-point:last-child::before { right: 0; }
  .route-point-dot { position: relative; z-index: 1; }
}