:root {

  --navy: #152f53;
  --navy-soft: rgb(21 47 83 / .72);
  --blue: #003b7c;
  --yellow: #ffe500;
  --red: #d10007;
  --green: #01671d;
  --beige: #ede3d6;
  --desk: #0d1628;
  --paper: #f7f2ea;
  --paper-2: #eee5d6;
  --muted: var(--navy-soft);
  --gap: 16px;
  --radius: 20px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--desk);
  color: var(--navy);
  font-family: 'CA Metro', 'Arial Narrow', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; appearance: none; }
[hidden] { display: none !important; }
img { user-select: none; -webkit-user-drag: none; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.page { position: fixed; left: 0; top: 0; width: 100vw; height: 100svh; transform-origin: 0 0; }
.page__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.page--scene { z-index: 10; overflow: hidden; background: var(--beige); --u: 1; }
.scene__zoom { position: absolute; inset: 0; will-change: transform; }
.world, .ui { position: absolute; left: 0; top: 0; width: 1920px; height: 950px; transform-origin: 0 0; pointer-events: none; }
.world { will-change: transform; }
.world > *, .ui > * { position: absolute; }
.L { display: block; max-width: none; }

@property --k { syntax: '<number>'; inherits: false; initial-value: 1; }
.L--cover {
  background: radial-gradient(calc(var(--rx, 637.6px) * var(--k)) calc(var(--ry, 315.6px) * var(--k)) at var(--cx, 50%) var(--cy, 50%),
    rgba(237, 227, 214, 0) 0%, rgba(237, 227, 214, .35) 34.78%, var(--beige) 100%);
}

.L--shadow { border-radius: 50%; background: #301d11; transform-origin: 0 0; }

.L--topfade { --tf: 193, 164, 136; pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--tf)) calc(100% - 70px), rgba(var(--tf), .82) calc(100% - 56px),
    rgba(var(--tf), .55) calc(100% - 40px), rgba(var(--tf), .28) calc(100% - 21px), rgba(var(--tf), .08) calc(100% - 7px), rgba(var(--tf), 0)); }
.L--panshadow { border-radius: 50%; background: rgba(48, 29, 17, .69); filter: blur(16px); pointer-events: none; }
.L--flag { transform-origin: 0 0; }
.rev { overflow: hidden; }
.rev__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; max-width: none; }
.rev--diag, .rev__in { transform-origin: 0 0; }
.rev__in { position: absolute; left: 0; top: 0; }
.ui a, .ui button, .ui .badge__hit i { pointer-events: auto; }

.flagband { left: 173.43px; top: 0; width: 364.06px; height: 237.24px; display: flex; }
.flagband i { flex: 1; }
.flagband i:nth-child(1) { background: var(--green); }
.flagband i:nth-child(2) { background: #fff; }
.flagband i:nth-child(3) { background: var(--red); }
.badge { left: 99px; top: 146px; width: 514px; height: 523px; transform-origin: 257.5px 256.4px; }

.badge__hit { position: absolute; left: 2px; top: 0; width: 512px; height: 434px; overflow: hidden; pointer-events: none; }
.badge__hit i { display: block; width: 512px; height: 512px; border-radius: 50%; }

.badge__clip, .badge__in { position: absolute; left: 0; top: 0; width: 514px; height: 523px; }
.badge__clip { overflow: hidden; translate: 0 -89px; }
.badge__in { translate: 0 89px; }
.badge__art, .badge__art svg { position: absolute; left: 0; top: 0; width: 514px; height: 523px; display: block; }
.badge__video { position: absolute; left: 2px; top: 0; width: 512px; height: 512px; border-radius: 50%; object-fit: cover; opacity: 0; background: transparent; }

.badge__video { transition: opacity .45s ease; }
.badge.has-video .badge__video { opacity: 1; }

.callout { left: 556px; top: 150px; width: 367px; height: 131px; opacity: 0; translate: 0 8px; transition: opacity .3s ease, translate .3s var(--ease-out); }
.page--scene.is-hint .callout { opacity: 1; translate: 0 0; }
.callout img { position: absolute; inset: 0; width: 100%; height: 100%; }
.callout__glass { position: absolute; left: 62px; top: 0; width: 254px; height: 98px; border-radius: 8px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.redlabel { left: 105px; top: 530px; width: 501px; height: 112px; }

.datelabel {
  left: 105px; top: 653px; width: 501px; height: 146px; border-radius: 73px; background: rgba(0, 0, 0, .2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; align-items: center; padding-top: 27px; font-family: 'CA Metro', 'Arial Narrow', Arial, sans-serif; line-height: 1; text-align: center; text-transform: uppercase; white-space: nowrap;
}
.datelabel__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #ede3d6; stroke-dasharray: 6 6; }
.datelabel__h { font-weight: 900; font-size: 21px; color: #ede3d6; }
.datelabel__d { margin-top: 5px; font-weight: 800; font-size: 32px; line-height: 34px; color: #ffe500; }
.datelabel__d .br { display: block; }
.dateshade { left: 79px; top: 665px; width: 555px; height: 122px; border-radius: 50%; background: #1c2a3b; filter: blur(40px); pointer-events: none; }
.is-tab .dateshade, .is-mob .dateshade { display: none; }

.metrobox { left: 1495px; top: 45px; width: 271.2px; height: 84px; }
.panel {
  left: 1406px; top: 174px; width: 450px; height: 288px; margin: 0; border-radius: 8px;
  background: rgba(21, 47, 83, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; font-family: 'CA Metro', sans-serif; text-transform: uppercase;
}
.panel__kicker {
  position: absolute; left: 39px; right: 40px; top: 36px; margin: 0; display: flex; align-items: center; gap: 12px;
  font-weight: 800; font-size: 23px; line-height: 17px; letter-spacing: .02em; white-space: nowrap;
}
.panel__kicker::before, .panel__kicker::after { content: ''; flex: 1; height: 1px; background: #fff; }
.panel__title {
  position: absolute; left: 0; right: 0; top: 60px; margin: 0; display: flex; justify-content: center; align-items: center; gap: 10px;
  font-weight: 800; font-size: 32px; line-height: 1.3; letter-spacing: .02em; white-space: nowrap;
}

.info { position: relative; top: -.11em; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; transition: transform .2s var(--ease-out); }
.info::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.info img { display: block; width: 100%; height: 100%; }
.info:hover { transform: scale(1.12); }
.info:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.panel__btn {
  position: absolute; left: 24px; top: 116px; width: 402px; height: 72px; border: 0; border-radius: 6px; padding: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: var(--yellow); color: #000; font-weight: 700; font-size: 32px; line-height: 1; text-transform: uppercase;
  box-shadow: 0 8px 48px rgba(255, 237, 0, .5);
  transition: transform .2s var(--ease-out), box-shadow .3s ease-out;
}
.panel__btn svg { width: 32px; height: 32px; flex: none; }

.panel__btn > span { position: relative; top: .07em; }

.panel__btn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(152.07deg, #fff -20.04%, rgba(255, 255, 255, 0) 63.86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

.panel { pointer-events: auto; transition: background-color .3s ease-out, height .3s ease-out, color .3s ease-out; }

.ui .panel__info {
  position: absolute; left: 199px; top: auto; bottom: -23px; width: 52px; height: 52px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease-out, translate .3s ease-out, transform .2s var(--ease-out);
}
.panel__info::before { inset: 0; }
.panel__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--blue); }
.panel__info img { position: absolute; left: 9.75px; top: 9.75px; width: 32.5px; height: 32.5px; }

@media (hover: hover) {
  .panel:is(:hover, :has(:focus-visible)) { height: 312px; background-color: var(--blue); color: var(--yellow); }
  .panel:is(:hover, :has(:focus-visible)) .panel__info { opacity: 1; pointer-events: auto; }
  .panel:is(:hover, :has(:focus-visible)) .panel__btn { box-shadow: 0 4px 21px rgba(255, 237, 0, .5); }
}

.panel__cat {
  position: absolute; left: 24px; top: 204px; width: 402px; height: 60px; border: 0; border-radius: 6px; padding: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--navy); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase;
  transition: background-color .2s ease;
}
.panel__cat > span { position: relative; top: .07em; }
.panel__cat:hover { background: #e9f1fb; }
.ui button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.legal {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-start;
  gap: calc(24px * var(--u)); padding: calc(32px * var(--u)) calc(64px * var(--u)) calc(32px * var(--u)) calc(120px * var(--u));
  background: rgba(63, 35, 22, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff;
  transition: padding-top .35s cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) { .legal:hover { padding-top: calc(44px * var(--u)); } }
.legal__more {
  flex: none; width: max(18px, calc(24px * var(--u))); height: max(18px, calc(24px * var(--u))); padding: 0; border: 0; background: none; color: #fff;
  transition: transform .25s var(--ease-out);
}
.legal__more svg { width: 100%; height: 100%; display: block; }
.legal.is-open .legal__more { transform: rotate(180deg); }
.legal__text {
  margin: 0; font-size: max(12px, calc(14px * var(--u))); line-height: 1.4; text-transform: uppercase;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.legal.is-open .legal__text { -webkit-line-clamp: unset; display: block; max-height: min(70svh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.legal { cursor: pointer; }

.legal:hover, .legal:focus-within, .legal.is-open { z-index: 4; }
.world, .ui { z-index: 2; }
#worldLand, #worldBack { z-index: 0; }

:root:not(.intro-on) #worldLand { clip-path: polygon(var(--win-x) -3000px, 9000px -3000px, 9000px 6000px, var(--win-x) 6000px); }
.page--scene:is(.is-tab, .is-mob) #worldLand { clip-path: none; }

.world--hot { z-index: 3; }
.hot {
  position: absolute; left: var(--x); top: var(--y); width: 60px; height: 60px; margin: -30px 0 0 -30px; padding: 0; border: 0; background: none;
  pointer-events: auto; transform: scale(var(--inv, 1));
}

.hot::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); pointer-events: none; opacity: 0;
}
.hot-beat .hot::before { animation: hotPulse 2.4s cubic-bezier(.2, .7, .3, 1) 2; }
.still .hot::before { opacity: 1; }
@keyframes hotPulse { 0% { transform: scale(.4); opacity: .95; } 75%, 100% { transform: scale(1); opacity: 0; } }
.hot__dot { position: absolute; left: 12px; top: 12px; width: 36px; height: 36px; background: url(img/ui/dot.svg) 0 0 / 100% 100% no-repeat; }
.hot__dot::after { content: ''; position: absolute; inset: 0; background: url(img/ui/dot-active.svg) 0 0 / 100% 100% no-repeat; opacity: 0; transition: opacity .2s ease; }

@media (hover: hover) {
  .hot:is(:hover, .is-hover, :focus-visible) { z-index: 2; }
  .hot:is(:hover, .is-hover, :focus-visible) .hot__dot::after { opacity: 1; }
  .hot:is(:hover, .is-hover, :focus-visible)::before { animation: none; opacity: 0; }
}

.hot__label {
  position: absolute; left: 50%; bottom: calc(100% + 2px); width: max-content; max-width: min(320px, calc(100vw - 24px));
  transform: translate(calc(-50% + var(--tx, 0px)), 6px);
  background: rgba(21, 47, 83, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; border-radius: 8px; padding: 10px 14px;
  font-size: 15px; line-height: 1.2; text-align: left; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.hot__label b { display: block; font-weight: 800; }
.hot__label span { display: block; margin-top: 3px; font-size: 13px; }
.hot.is-below .hot__label { bottom: auto; top: calc(100% + 2px); transform: translate(calc(-50% + var(--tx, 0px)), -6px); }
@media (hover: hover) { .hot:is(:hover, .is-hover, :focus-visible) .hot__label { opacity: 1; transform: translate(calc(-50% + var(--tx, 0px)), 0); } }

.flaghit { pointer-events: auto; cursor: pointer; clip-path: polygon(81.65% .2%, 99.76% 53.2%, 21.32% 69.2%, 3.16% 15.6%); }
.hot:focus-visible { outline: none; }
.hot:focus-visible .hot__dot { border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }

.intro-on #worldLand > *, .intro-on #worldBack > *, .intro-on #worldFront > *, .intro-on .ui > *, .intro-on .mt > *, .intro-on .world--hot, .intro-on .legal { opacity: .001; }
.intro-layers #worldLand > *, .intro-layers #worldBack > *, .intro-layers #worldFront > *, .intro-layers .ui > *, .intro-layers .mt > *, .intro-layers .legal, .intro-layers .rev__img,
.intro-layers .rev__in, .intro-layers .badge__clip, .intro-layers .badge__in { will-change: transform, opacity; }
.intro-on .scene__zoom * { pointer-events: none !important; }
.intro-on .scene__zoom { visibility: hidden; }
.intro-run .scene__zoom { visibility: visible; }
.intro-run .world--hot { pointer-events: none; }

.mt, .mpill, .below { display: none; }
.page--scene.is-tab, .page--scene.is-mob { overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; }
.is-tab .legal, .is-mob .legal, .is-tab .ui--right, .is-mob .ui--right, .is-tab .callout, .is-mob .callout { display: none; }
.is-mob .redlabel, .is-mob .datelabel { display: none; }

.is-tab .badge__clip, .is-tab .badge__in { translate: none; }
.is-mob .badge__clip { translate: 0 -132.6px; }
.is-mob .badge__in { translate: 0 132.6px; }
.is-tab .badge__hit { height: 512px; }
.is-mob .badge__hit { height: 390.4px; }

.is-tab .datelabel { border-radius: 73px; background: rgba(0, 0, 0, .2); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); }

.is-mob .mpill {
  display: flex; align-items: center; gap: 18px; left: 105.7px; top: 528.3px; width: 498.9px; height: 164.6px; padding-left: 35.9px;
  border-radius: 99.6px; background: var(--red); color: #fff;
}
.mpill__upto { flex: none; width: 217px; height: 78.8px; fill: #fff; }
.mpill__txt { font-weight: 800; font-size: 28.38px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.mpill .br { display: block; }

.is-tab .mt, .is-mob .mt { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mt > * { position: absolute; margin: 0; }

.mt__logo { left: calc(34px * var(--u)); top: calc(34px * var(--u)); width: calc(208.6px * var(--u)); height: calc(56px * var(--u)); }
.is-mob .mt__logo { left: calc(24px * var(--u)); top: calc(24px * var(--u)); width: calc(149px * var(--u)); height: calc(40px * var(--u)); }
.mt__dates { display: none; }
.is-mob .mt__dates {
  display: block; right: calc(32px * var(--u)); bottom: calc(164px * var(--u));
  color: #fff; font-weight: 700; font-size: calc(16px * var(--u)); line-height: 1.125; letter-spacing: .02em; text-transform: uppercase;
}
.mt__dates .br { display: block; }
.mbar {
  left: 0; right: 0; bottom: 0; pointer-events: auto; display: flex; color: #fff; text-transform: uppercase;
  background: rgba(21, 47, 83, .6); backdrop-filter: blur(9.2px); -webkit-backdrop-filter: blur(9.2px);
}
.mbar__txt { display: flex; flex-direction: column; align-items: stretch; }
.mbar__kicker { margin: 0; display: flex; align-items: center; gap: calc(12px * var(--u)); font-weight: 800; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; }
.mbar__kicker::before, .mbar__kicker::after { content: ''; flex: 1; height: 1px; background: #fff; }
.mbar__title { margin: 0; display: flex; align-items: center; justify-content: center; gap: calc(8px * var(--u)); font-weight: 800; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; }
.mbar .info { width: calc(27.6px * var(--u)); height: calc(27.6px * var(--u)); }
.mbar__btn {
  flex: none; display: flex; align-items: center; justify-content: center; border: 0; padding: 0;
  background: var(--yellow); color: #000; font-weight: 700; line-height: 1.2; text-transform: uppercase;
  box-shadow: 0 calc(8px * var(--u)) calc(48px * var(--u)) rgba(255, 237, 0, .5);
}
.mbar__btn svg { flex: none; height: auto; }
.mbar button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.mbar__btn:focus-visible { outline-color: #fff; }
.is-tab .mbar {
  height: calc(114.9px * var(--u)); padding: calc(28.15px * var(--u)) calc(24px * var(--u)) 0 calc(30.6px * var(--u)); align-items: flex-start; justify-content: space-between;
  border-radius: 0 0 calc(9.2px * var(--u)) calc(9.2px * var(--u));
}
.is-tab .mbar__txt { padding-left: calc(4px * var(--u)); }
.is-tab .mbar__title { margin-top: calc(-4px * var(--u)); gap: calc(6px * var(--u)); }
.is-tab .mbar__kicker { font-size: calc(20px * var(--u)); padding: 0 calc(7.2px * var(--u)); gap: calc(12.3px * var(--u)); }
.is-tab .mbar__title { font-size: calc(32px * var(--u)); }
.is-tab .mbar__btn { align-self: center; margin-top: calc(-28.15px * var(--u)); width: calc(277.4px * var(--u)); height: calc(64px * var(--u)); padding-top: calc(4px * var(--u)); gap: calc(14px * var(--u)); border-radius: calc(6.9px * var(--u)); font-size: calc(26px * var(--u)); }
.is-tab .mbar__btn svg { width: calc(11.6px * var(--u)); }
.is-mob .mbar {
  height: calc(151px * var(--u)); padding: calc(21px * var(--u)) calc(24px * var(--u)) calc(16px * var(--u)); flex-direction: column; justify-content: space-between;
  border-radius: 0 0 calc(8px * var(--u)) calc(8px * var(--u)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.is-mob .mbar__txt { padding: 0 calc(5.8px * var(--u)); }
.is-mob .mbar__kicker { font-size: calc(18px * var(--u)); padding: 0 calc(6.2px * var(--u)); gap: calc(8.5px * var(--u)); }
.is-mob .mbar__title { font-size: calc(28px * var(--u)); gap: calc(4px * var(--u)); margin-top: calc(-5px * var(--u)); }
.is-mob .mbar .info { width: calc(24px * var(--u)); height: calc(24px * var(--u)); }
.is-mob .mbar__btn { height: calc(52px * var(--u)); padding-top: calc(2px * var(--u)); gap: calc(12px * var(--u)); border-radius: calc(6px * var(--u)); font-size: calc(24px * var(--u)); }
.is-mob .mbar__btn svg { width: calc(10.1px * var(--u)); }

.is-tab .below, .is-mob .below { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #152f53; padding: 28px 24px 40px; }
.is-mob .below { padding: 28px 16px 40px; }

.page--catalog { z-index: 20; overflow: hidden; }
.catalog__bg { position: absolute; inset: 0; background: var(--paper); }

.catalog__bg { background: var(--paper) url(img/catalog-landscape.webp) center top / 100% auto no-repeat; }
.catalog__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247, 242, 234, .5) 0, rgba(247, 242, 234, .84) 30vh, var(--paper) 64vh);
}

.catalog__head {
  --side: clamp(16px, 4vw, 56px);
  --flag-w: clamp(150px, 16.4vw, 420px); --flag-h: calc(var(--flag-w) * 1.2);
  --title-fs: clamp(36px, 4.6vw, 88px);
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr calc(var(--title-fs) * 1.02); align-items: end;
  column-gap: clamp(24px, 3vw, 56px); padding: clamp(28px, 2.3vw, 44px) calc(var(--flag-w) + var(--side) + clamp(24px, 3vw, 56px)) 20px var(--side); color: var(--navy);
  min-height: var(--flag-h);
  overflow-x: clip;
}
.catalog__home {
  grid-column: 1 / -1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px, 1.6vw, 30px);
  padding: 0; border: 0; background: none; color: var(--navy); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}

.catalog__arrow { width: 32px; height: 32px; flex: none; transform: scaleX(-1); transition: transform .2s var(--ease-out); }
.catalog__home:hover .catalog__arrow { transform: scaleX(-1) translateX(3px); }
.catalog__homeText { position: relative; top: .07em; }
.catalog__title { grid-column: 1 / -1; grid-row: 2 / span 2; margin: 0; font-weight: 900; font-size: var(--title-fs); line-height: 1.02; text-transform: uppercase; white-space: nowrap; }
.catalog__title .br { display: block; }

.catalog__lead { grid-column: 1 / -1; grid-row: 3; align-self: start; margin-left: calc(var(--title-fs) * 3.42 + clamp(16px, 1.6vw, 28px)); }
.catalog__lead .lb { display: block; }

.catalog__lead { position: relative; isolation: isolate; margin-top: 0; margin-right: 0; margin-bottom: .3em; font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.4; color: var(--navy); --lead-shade: 0; }

.catalog__lead { margin-top: calc(var(--title-fs) * .188 - .35em); margin-bottom: 0; }

.catalog__lead::before {
  content: ''; position: absolute; inset: -6px -10px; z-index: -1; border-radius: 40px; pointer-events: none;
  background: rgba(6, 10, 22, var(--lead-shade, .4)); box-shadow: 0 0 40px 28px rgba(6, 10, 22, var(--lead-shade, .4));
}

.catalog__flag { position: absolute; z-index: 3; top: 0; right: var(--side); width: var(--flag-w); height: var(--flag-h); }
.catalog__cloth { position: absolute; top: 0; pointer-events: none; }
.catalog__flagHit { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.catalog__flagHit.is-over { cursor: grab; }
.flag-drag, .flag-drag * { cursor: grabbing !important; }
.catalog__flagI {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--red); pointer-events: none;
  opacity: 0; transition: opacity .15s ease; box-shadow: 0 4px 12px rgba(21, 47, 83, .25);
}
.catalog__flagI img { display: block; width: 100%; height: 100%; }
.catalog__flagI.is-on { opacity: 1; }
.catalog__head button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (max-width: 1100px) {
  .catalog__head { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 14px; }
  .catalog__title { grid-row: 2; white-space: normal; }
  .catalog__lead { grid-column: 1; grid-row: 3; max-width: 62ch; margin: 0 0 .3em; }
  .catalog__lead .lb { display: inline; }
}

@media (max-width: 760px) {
  .catalog__head { --flag-w: clamp(84px, 24vw, 150px); padding-top: calc(var(--flag-h) + 16px); padding-right: var(--side); }
}

.group { position: relative; z-index: 1; padding: 0 clamp(16px, 4vw, 56px) 24px; container-type: inline-size; }
.group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 36px 0 16px; }
.group__title { margin: 0; font-weight: 900; font-size: clamp(22px, 2.2vw, 32px); text-transform: uppercase; }
.group__lead { margin: 0; color: var(--muted); font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; }
.group__title { color: var(--navy); }
.group__lead { color: var(--navy-soft); font-size: 16px; }

.bonus {
  --pw: clamp(250px, 19vw, 360px);
  position: relative; z-index: 1; margin: 0 clamp(16px, 4vw, 56px); padding: clamp(48px, 4.2vw, 80px) 0 clamp(8px, 1vw, 20px);
  display: grid; grid-template-columns: minmax(0, 940px) auto; justify-content: center; align-items: center; column-gap: clamp(32px, 6vw, 140px); color: var(--navy);
}
.bonus__title { margin: 0; max-width: 15em; font-weight: 900; font-size: clamp(30px, 3.2vw, 62px); line-height: 1.02; text-transform: uppercase; }
.bonus__accent { color: var(--red); }
.bonus__list {
  list-style: none; margin: clamp(28px, 2.9vw, 56px) 0 0; padding: 0; max-width: 880px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 1.7vw, 32px) clamp(24px, 2.5vw, 48px);
}
.bonus__item { display: flex; align-items: center; gap: clamp(12px, 1vw, 20px); }

.bonus__num {
  flex: none; display: grid; place-items: center; width: clamp(56px, 4.2vw, 80px); aspect-ratio: 1; padding-top: .14em; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--navy); font-weight: 800; font-size: clamp(22px, 1.6vw, 30px); line-height: 1;
}
.bonus__label { font-weight: 700; font-size: clamp(15px, 1.05vw, 20px); line-height: 1.15; text-transform: uppercase; }
.bonus__links { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 3vw, 56px); margin-top: clamp(28px, 2.9vw, 52px); }
.bonus__link {
  padding: 0; border: 0; background: none; color: var(--navy); font-weight: 700; font-size: clamp(18px, 1.25vw, 24px); line-height: 1.2;
  text-decoration: underline dashed 2px; text-underline-offset: .3em; transition: color .2s ease;
}
.bonus__link:hover { color: var(--blue); }
.bonus__link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.bonus__phone {
  --u: calc(var(--pw) * .9064 / 390);
  position: relative; width: var(--pw); aspect-ratio: 769 / 1576;
  filter: drop-shadow(0 calc(26 * var(--u)) calc(34 * var(--u)) rgba(21, 47, 83, .2)) drop-shadow(0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(21, 47, 83, .12));
}
.bonus__screen { position: absolute; left: 4.68%; top: 1.84%; width: 90.64%; height: 96.26%; border-radius: calc(46.4 * var(--u)); overflow: hidden; background: #fff; }
.bonus__glass {
  position: absolute; left: 4.68%; top: 1.84%; width: 90.64%; height: 96.26%; border-radius: calc(46.4 * var(--u)); pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .07) 34%, rgba(255, 255, 255, 0) 34.2%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .1) 52.2%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(120% 60% at 15% 0, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 calc(1.5 * var(--u)) 0 rgba(255, 255, 255, .45), inset 0 0 calc(10 * var(--u)) rgba(5, 16, 33, .12);
}
.bonus__device { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }

.bonus__ribbon {
  --r: calc(15 * var(--u));
  position: absolute; left: calc(-44 * var(--u)); right: calc(-44 * var(--u)); top: calc(302 * var(--u)); height: calc(124 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(20 * var(--u)); isolation: isolate;
  color: #fff; font-weight: 900; line-height: .9; text-transform: uppercase;
}
.bonus__ribbon::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--navy);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent var(--r), #000 calc(var(--r) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent var(--r), #000 calc(var(--r) + .5px)) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent var(--r), #000 calc(var(--r) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent var(--r), #000 calc(var(--r) + .5px)) right / 51% 100% no-repeat;
}
.bonus__one { font-size: calc(52 * var(--u)); text-align: right; }
.bonus__one small, .bonus__per small { display: block; font-size: .46em; font-weight: 800; line-height: 1.05; }
.bonus__per { font-size: calc(50 * var(--u)); color: var(--yellow); }
.bonus__per small { color: #fff; }

.sticker {
  --s: 96px;
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: var(--s); aspect-ratio: 1; border-radius: 50%; color: #fff; text-transform: uppercase;
  background: radial-gradient(circle at 50% 34%, #23467a, var(--navy) 62%, #0e2443);
}
.sticker b { display: block; font-weight: 900; font-size: calc(var(--s) * .17); line-height: .88; letter-spacing: .01em; }
.sticker b:first-child { padding-top: .1em; }
.sticker::after { content: ''; position: absolute; inset: 5.5%; border-radius: 50%; border: calc(var(--s) * .03) solid var(--ring, #81d0f5); }
.bonus__token {
  --s: calc(136 * var(--u)); rotate: -7deg;
  box-shadow: 0 0 0 calc(4 * var(--u)) #fff, 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(5, 16, 33, .5), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(5, 16, 33, .35);
}

.app { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #1d2a3f; font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; line-height: 1.2; }
.app__status { flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(54 * var(--u)); padding: calc(4 * var(--u)) calc(30 * var(--u)) 0 calc(38 * var(--u)); background: #1a3c7a; color: #fff; }
.app__status span { font-weight: 700; font-size: calc(17 * var(--u)); }
.app__status svg { width: calc(66 * var(--u)); height: calc(15 * var(--u)); }
.app__bar { flex: none; display: grid; grid-template-columns: calc(52 * var(--u)) minmax(0, 1fr) calc(52 * var(--u)); align-items: center; height: calc(50 * var(--u)); background: #1a3c7a; color: #fff; }
.app__bar span { text-align: center; font-weight: 700; font-size: calc(18 * var(--u)); }
.app__back { justify-self: center; width: calc(10 * var(--u)); height: calc(16 * var(--u)); }
.app__i { justify-self: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.app__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) 0; }
.app__total { flex: none; display: flex; justify-content: space-between; align-items: center; height: calc(52 * var(--u)); padding: 0 calc(18 * var(--u)); border-radius: calc(10 * var(--u)); background: #f4f7fd; }
.app__total span { font-size: calc(15 * var(--u)); font-weight: 600; }
.app__total b { font-size: calc(24 * var(--u)); font-weight: 700; }
.app__rate { flex: none; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); font-size: calc(15 * var(--u)); color: #4a5568; }
.app__rate img { width: calc(22 * var(--u)); height: auto; border-radius: 50%; }

.bonus__phone .app__rate { visibility: hidden; }
.app__hist { flex: none; }
.app__row { display: flex; justify-content: space-between; align-items: center; padding: calc(9 * var(--u)) calc(4 * var(--u)); border-bottom: 1px solid #e8ecf3; }
.app__row span { font-size: calc(14 * var(--u)); font-weight: 600; }
.app__row small { display: block; margin-top: calc(3 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 400; color: #8a95a8; }
.app__row b { font-size: calc(17 * var(--u)); font-weight: 700; color: #1f7a3a; }
.app__more { flex: none; display: grid; place-items: center; height: calc(44 * var(--u)); border-radius: calc(10 * var(--u)); background: #eef4fd; color: #2d63b8; font-size: calc(15 * var(--u)); font-weight: 600; }
.app__terms { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: calc(8 * var(--u)); margin-top: calc(-4 * var(--u)); color: #2d63b8; font-size: calc(14 * var(--u)); }
.app__terms svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.app__tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; padding: calc(4 * var(--u)); border-radius: calc(10 * var(--u)); background: #f1f3f7; }
.app__tabs span { display: grid; place-items: center; height: calc(36 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; color: #6b7686; }
.app__tabs .is-on { background: #fff; color: #1d2a3f; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.app__goods { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.app__good { display: flex; flex-direction: column; padding: calc(10 * var(--u)); border-radius: calc(10 * var(--u)); box-shadow: inset 0 0 0 1px #e8ecf3; }
.app__good img { display: block; width: 100%; height: calc(96 * var(--u)); object-fit: contain; }
.app__good span { margin-top: calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; }
.app__good small { margin-top: calc(2 * var(--u)); font-size: calc(10 * var(--u)); color: #8a95a8; }
.app__good b { margin-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 700; color: var(--red); }

.abanner { display: block; flex: none; width: 100%; height: auto; aspect-ratio: 656 / 112; border-radius: calc(10 * var(--u)); }

@media (max-width: 900px) {
  .bonus { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bonus__text { display: contents; }
  .bonus__title { order: 1; max-width: 16em; text-align: center; }
  .bonus { --pw: clamp(220px, 44vw, 320px); }
  .bonus__phone { order: 2; margin: clamp(32px, 6vw, 48px) 0 8px; }
  .bonus__list { order: 3; justify-self: stretch; max-width: 640px; margin-left: auto; margin-right: auto; }
  .bonus__links { order: 4; justify-content: center; }
}
@media (max-width: 560px) {
  .bonus__list { grid-template-columns: minmax(0, 1fr); }
}

.bonus--b, .bonus--c {
  margin-top: clamp(32px, 3vw, 56px); padding: clamp(40px, 3.6vw, 72px) clamp(24px, 4.2vw, 80px);
  border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 30px -20px rgba(0, 0, 0, .45);
}
.bonus--b { background: #fffdf8; }

.bonus--c { justify-content: space-between; align-items: end; padding-bottom: 0; overflow: hidden; background: #ece2d4 url(img/bonus/wall.webp) 100% 0 / max(100%, var(--bgw)) auto no-repeat;

  --bgh: calc(var(--pw) * 2.0494 + clamp(40px, 3.6vw, 72px) + clamp(28px, 2.4vw, 44px)); --bgw: calc(var(--bgh) * 1.12 * 2.3746);
}
.bonus--c .bonus__text { align-self: start; }
.bonus--c .bonus__phone { margin-bottom: clamp(28px, 2.4vw, 44px); }
.bonus--c .bonus__phone::after {
  content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -1.5%; height: 4%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 40, 20, .45), rgba(60, 40, 20, 0));
}
@media (max-width: 900px) {
  .bonus--c { background-position: 22% 100%; background-size: auto 100%; }
  .bonus--c .bonus__phone { order: 5; margin: clamp(32px, 6vw, 48px) 0 clamp(20px, 5vw, 32px); }
  .bonus--c .bonus__text { padding-bottom: 0; }
  .bonus--c .bonus__links { margin-bottom: 0; }
}

.bonus__bg, .bonus__stamp { display: none; }
.bonus--d {
  --sw: clamp(360px, 25vw, 480px); --n: clamp(16px, 1.4vw, 26px); --lift: clamp(80px, 6.4vw, 124px); --pw: clamp(250px, 17.5vw, 336px);
  --ticket: #fdfaf4; --stub: #efe5d7; --rad: clamp(24px, 2.2vw, 40px); --ring: #81d0f5;
  margin-top: calc(var(--lift) + clamp(28px, 2.4vw, 48px)); padding: 0;
  grid-template-columns: minmax(0, 1fr) var(--sw); justify-content: stretch; align-items: stretch; column-gap: 0;
}
.bonus--d .bonus__bg { display: block; position: absolute; inset: 0; z-index: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .06)) drop-shadow(0 18px 30px rgba(21, 47, 83, .14)); }
.bonus--d .bonus__shape {
  --cut: calc(100% - var(--sw));
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--rad);
  background: linear-gradient(90deg, var(--ticket) 0 var(--cut), var(--stub) 0);
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent var(--n), #000 calc(var(--n) + .5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--cut) 100%, transparent var(--n), #000 calc(var(--n) + .5px)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at var(--cut) 0, transparent var(--n), #000 calc(var(--n) + .5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--cut) 100%, transparent var(--n), #000 calc(var(--n) + .5px)) bottom / 100% 51% no-repeat;
}
.bonus--d .bonus__shape::after { content: ''; position: absolute; left: calc(var(--cut) - 1px); top: calc(var(--n) + 10px); bottom: calc(var(--n) + 10px); border-left: 2px dashed rgba(21, 47, 83, .22); }

.bonus--d .bonus__italy { position: absolute; right: calc(var(--sw) - 2px); bottom: 0; width: calc((100% - var(--sw)) * .62); height: auto; max-width: none; opacity: .3; mix-blend-mode: multiply; }

@media (min-width: 901px) {
  .bonus--d .bonus__italy { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46%); mask-image: linear-gradient(90deg, transparent 0, #000 46%); }
}
.bonus--d .bonus__text { position: relative; z-index: 1; padding: clamp(40px, 4vw, 76px) clamp(28px, 4vw, 76px); }
.bonus--d .bonus__title { max-width: 16em; font-size: clamp(30px, 2.9vw, 56px); }
.bonus--d .bonus__list { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(32px, 3vw, 56px); }
.bonus--d .bonus__item { flex-direction: column; align-items: flex-start; gap: clamp(12px, 1vw, 18px); padding: 0 clamp(12px, 1.3vw, 26px); border-left: 1px solid rgba(21, 47, 83, .14); }
.bonus--d .bonus__item:first-child { padding-left: 0; border-left: 0; }

.bonus--d .bonus__num {
  --d: clamp(72px, 5.4vw, 104px);
  width: var(--d); background: var(--navy); color: #fff; font-weight: 900; font-size: calc(var(--d) * .36);
  box-shadow: inset 0 0 0 calc(var(--d) * .055) var(--navy), inset 0 0 0 calc(var(--d) * .085) var(--ring), 0 6px 14px rgba(21, 47, 83, .18);
}
.bonus--d .bonus__label { font-size: clamp(14px, .98vw, 19px); }
.bonus--d .bonus__links { gap: 14px 18px; margin-top: clamp(32px, 3vw, 56px); }
.bonus--d .bonus__link {
  display: inline-flex; align-items: center; min-height: 56px; padding: .16em 1.5em 0; border-radius: 999px;
  font-weight: 800; font-size: clamp(15px, 1vw, 19px); letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.bonus--d .bonus__link:first-child { background: var(--navy); color: #fff; }
.bonus--d .bonus__link:first-child:hover { background: #22477a; }
.bonus--d .bonus__link:last-child { background: var(--ticket); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.bonus--d .bonus__link:last-child:hover { background: #f0ede6; }
.bonus--d .bonus__phone {
  z-index: 1; justify-self: center; align-self: start; margin: calc(-1 * var(--lift)) 0 clamp(28px, 2.4vw, 44px);
  filter: drop-shadow(0 calc(1.5 * var(--u)) calc(1.5 * var(--u)) rgba(10, 24, 44, .45)) drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(21, 47, 83, .2)) drop-shadow(0 calc(30 * var(--u)) calc(40 * var(--u)) rgba(21, 47, 83, .16));
}
.bonus--d .bonus__per { color: var(--ring); }

.bonus--d .bonus__stamp { display: flex; position: absolute; z-index: 2; box-shadow: 0 0 0 3px #fff, 0 10px 20px rgba(21, 47, 83, .25), 0 2px 4px rgba(21, 47, 83, .2); }
.bonus--d .bonus__stamp--1 { --s: clamp(70px, 5vw, 96px); left: calc(100% - var(--sw) - var(--s) / 2); bottom: 16%; rotate: -8deg; }
.bonus--d .bonus__stamp--2 { --s: clamp(44px, 3.1vw, 60px); right: calc(var(--sw) + clamp(20px, 2vw, 40px)); top: clamp(16px, 1.6vw, 32px); rotate: 12deg; }

@media (min-width: 901px) and (max-width: 1180px) { .bonus--d .bonus__stamp--2 { display: none; } }

@media (max-width: 900px) {
  .bonus--d {
    --pw: clamp(220px, 40vw, 300px); --lift: 72px; --sh: calc(var(--pw) * 2.0494 - var(--lift) + 36px);
    grid-template-columns: minmax(0, 1fr); justify-items: stretch; margin-top: calc(var(--lift) + 32px);
  }
  .bonus--d .bonus__shape {
    background: linear-gradient(180deg, var(--stub) 0 var(--sh), var(--ticket) 0);
    -webkit-mask: radial-gradient(circle at 0 var(--sh), transparent var(--n), #000 calc(var(--n) + .5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% var(--sh), transparent var(--n), #000 calc(var(--n) + .5px)) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 var(--sh), transparent var(--n), #000 calc(var(--n) + .5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% var(--sh), transparent var(--n), #000 calc(var(--n) + .5px)) right / 51% 100% no-repeat;
  }
  .bonus--d .bonus__shape::after { left: calc(var(--n) + 10px); right: calc(var(--n) + 10px); top: calc(var(--sh) - 1px); bottom: auto; border-left: 0; border-top: 2px dashed rgba(21, 47, 83, .22); }
  .bonus--d .bonus__italy { left: 0; right: auto; width: 100%; bottom: 0; }
  .bonus--d .bonus__phone { order: -1; justify-self: center; margin: calc(-1 * var(--lift)) 0 36px; }

  .bonus--d .bonus__text { display: block; padding: 64px clamp(20px, 5vw, 40px) calc((100vw - 32px) * .45); }
  .bonus--d .bonus__title { text-align: left; }
  .bonus--d .bonus__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-left: 0; margin-right: 0; }
  .bonus--d .bonus__item, .bonus--d .bonus__item:first-child { padding: 0; border: 0; }
  .bonus--d .bonus__links { justify-content: flex-start; }
  .bonus--d .bonus__stamp--1 { left: 16px; bottom: auto; top: calc(var(--sh) - var(--s) / 2); }
  .bonus--d .bonus__stamp--2 { right: 6px; top: calc(var(--sh) - var(--s) - 22px); }
}
@media (max-width: 560px) {
  .bonus--d .bonus__links { flex-direction: column; align-items: stretch; }
  .bonus--d .bonus__link { justify-content: center; }
}

.brands {
  position: relative; z-index: 1; margin: 0 clamp(16px, 4vw, 56px); padding: clamp(40px, 3.8vw, 72px) 0 clamp(32px, 2.9vw, 56px);
  color: var(--navy); text-align: center;
}
.brands__title { margin: 0; font-weight: 900; font-size: clamp(28px, 3.1vw, 60px); line-height: 1.05; text-transform: uppercase; }
.brands__accent { color: var(--red); }
.brands__lead { margin: .45em 0 0; font: 700 clamp(16px, 1.45vw, 28px)/1.25 'Lato', 'Helvetica Neue', Arial, sans-serif; }
.brands__list {
  --lh: clamp(52px, 6.8vw, 131px);
  list-style: none; margin: clamp(24px, 2.9vw, 56px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px clamp(16px, 4.2vw, 100px);
}
.brands__list li { display: flex; flex: none; }
.brands__logo { display: block; width: auto; max-width: none; height: calc(var(--lh) * var(--k)); }

@media (max-width: 900px) {
  .brands__title { font-size: 36px; }
  .brands__lead { font-size: 18px; }
  .brands__list { --lh: clamp(52px, 10vw, 84px); row-gap: 10px; }
  .brands__list li:nth-child(n+6) { order: 2; }
  .brands__list::after { content: ''; order: 1; flex-basis: 100%; }
}

@media (max-width: 560px) {
  .brands__title { font-size: 32px; }
  .brands__lead { font-size: 16px; }
  .brands__accent { display: block; }
}

.grid {

  --card-name: clamp(22px, 1.9vw, 30px); --tier-fs: 25px; --tier-pad: 19px; --st: 46px; --st-fs: 20px;
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));

  --media-min: 230px;
  grid-auto-rows: minmax(calc((100cqw - 3 * var(--gap)) / 4 * 1.04), auto);
  grid-auto-flow: dense;
}
@container (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(calc((100cqw - 2 * var(--gap)) / 3 * 1.04), auto); }
}
@container (max-width: 620px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(calc((100cqw - var(--gap)) / 2 * 1.62), auto); --gap: 12px; --media-min: 140px; }
  .card--L { grid-row: span 1 !important; }
}

@container (max-width: 620px) {
  .grid { grid-auto-rows: auto; }
  .grid > .card { grid-column: span 2 !important; grid-row: span 1 !important; }
  .grid > .card--W { grid-template-columns: none; grid-template-rows: minmax(0, 1fr) auto; }
  .card--shot .card__media { min-height: calc(100cqw / 1.75); }
}
.card--L { grid-column: span 2; grid-row: span 2; }
.card--W { grid-column: span 2; }
.card--T { grid-row: span 2; }

.card {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius);
  background: #fff; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 30px -20px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.card { background: #fffdf8; --tier-bg: #fffdf8; }
.card--W { grid-template-rows: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@container (max-width: 620px) { .card--W { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.card__media { position: relative; perspective: 900px; min-height: var(--media-min, 140px); }
.card__glow {
  position: absolute; inset: -30%; z-index: -1; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(255, 150, 40, .75), rgba(255, 90, 20, .25) 32%, transparent 58%);
}
.card__img {
  position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; object-fit: contain;
  transition: transform .5s var(--ease-out), opacity .35s ease;
  backface-visibility: hidden;
}
.card--S .card__img, .card--T .card__img { left: 9%; top: 9%; width: 82%; height: 82%; }
.card__img--b { opacity: 0; transform: rotateX(-32deg) translateY(8%) scale(.92); }
@media (hover: hover) {
  .card:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 22px 40px -22px rgba(0, 0, 0, .55); }
  .card.has-alt.alt-ready:hover .card__img--a { opacity: 0; transform: rotateX(32deg) translateY(-8%) scale(.92); }
  .card.has-alt.alt-ready:hover .card__img--b { opacity: 1; transform: none; }
}
.card__body { position: relative; z-index: 1; padding: 0 18px 32px;   display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-width: 0; }

.card__body > .tiers { margin-top: 6px; }
.card--W .card__body { padding: 18px 20px 34px 0; justify-content: center; }

.card--room .card__body { padding-top: 16px; }
.card--room.card--W .card__body { padding: 22px 22px 36px 24px; }
.card__name { margin: 0; font-weight: 800; font-size: var(--card-name); line-height: 1.1; }
.card__note { margin: 0; font-size: 13px; color: var(--muted); }

.page--catalog { --skel: #e4d9c7; --skel-2: #d6c9b3; }

.card__media--room { overflow: hidden; background: #ece6dc; }
.card__room {
  position: absolute; inset: 0; container-type: size; --by: 1; --z: 1;
  --sw: calc(max(100cqw, 100cqh * var(--sar)) * var(--z)); --sh: calc(var(--sw) / var(--sar)); --st: calc((100cqh - var(--sh)) * var(--by));
}

.card__scene {
  position: absolute; left: calc((100cqw - var(--sw)) * var(--bx)); top: var(--st); width: var(--sw); height: var(--sh); max-width: none;
  transition: opacity .4s ease;
}

.card__thing {
  position: absolute; left: calc(var(--x) * 100cqw); bottom: calc(100cqh - var(--st) - var(--y) * var(--sh));
  width: min(var(--s) * var(--sh), 92cqw); translate: -50% calc((1 - var(--fb)) * 100%);
}

[data-fit="shift"] .card__thing {
  --fm: 4cqw; --tw: min(var(--s) * var(--sh), (100cqw - 2 * var(--fm)) / (var(--o1) - var(--o0)));
  width: var(--tw);
  left: clamp(var(--fm) + (.5 - var(--o0)) * var(--tw), var(--x) * 100cqw, 100cqw - var(--fm) - (var(--o1) - .5) * var(--tw));
}
[data-fit="shrink"] .card__thing {
  --fm: 4cqw;
  width: min(var(--s) * var(--sh), (var(--x) * 100cqw - var(--fm)) / (.5 - var(--o0)), ((1 - var(--x)) * 100cqw - var(--fm)) / (var(--o1) - .5));
}
.card .card__room .card__img--a {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: fill;
  transition: opacity .4s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.card--room { --shc: 28 22 16; }
.warm .card--room { --shc: 46 27 10; }
.card__shadow {
  position: absolute; left: calc(var(--cx) * 100%); top: calc(var(--cy) * 100%); width: calc(var(--w) * 100%); aspect-ratio: 9 / 1;
  translate: -50% -62%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--shc) / .72), rgb(var(--shc) / .45) 40%, rgb(var(--shc) / 0));
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
}
.card__shadow::after {
  content: ''; position: absolute; left: -14%; right: -14%; top: 50%; aspect-ratio: 4.5 / 1; translate: 0 -46%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--shc) / .26), rgb(var(--shc) / .1) 55%, rgb(var(--shc) / 0));
}
.card__shadow--amb { width: calc(var(--w) * 112%); aspect-ratio: 5 / 1; translate: -50% -46%; background: radial-gradient(closest-side, rgb(var(--shc) / .24), rgb(var(--shc) / .09) 55%, rgb(var(--shc) / 0)); }
.card__shadow--amb::after { content: none; }
.card__shadow--flat {
  width: calc(var(--w) * 102.5%); height: calc(var(--h) * 105%); aspect-ratio: auto; translate: -50% -48.8%;

  background: radial-gradient(closest-side, rgb(var(--shc) / .1) 70%, rgb(var(--shc) / .5) 88%, rgb(var(--shc) / .5) 92%, rgb(var(--shc) / .22) 96%, rgb(var(--shc) / 0));
}
.card__shadow--flat::after {
  content: ''; position: absolute; inset: -2% -2% -4%; translate: none; aspect-ratio: auto; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--shc) / .1) 90%, rgb(var(--shc) / 0));
}

@media (hover: hover) {
  .card--room:hover .card__img--a { transform: translateY(-7%); }
  .card--room:hover .card__shadow { opacity: .3; transform: scale(1.3, 1.5); }
  .card--room:hover .card__shadow--flat { opacity: .45; transform: scale(1.05); }
}
.card--room .card__media::after { inset: 0; border-radius: 0; }

.card__shot { position: absolute; left: 0; top: 0; max-width: none; transition: opacity .35s ease; }

.card__media::after {
  content: ''; position: absolute; left: 12%; top: 12%; right: 12%; bottom: 6%; border-radius: 18px; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) 130% 0 / 250% 100% no-repeat, var(--skel);
  opacity: 0; transition: opacity .35s ease;
}
.is-skel .card__media::after { opacity: 1; transition: none; }
.card.is-loading .card__media::after { opacity: 1; animation: skelShine 1.4s ease-in-out infinite; }

:root:not(.cam-on) .page--catalog[inert] .card.is-loading .card__media::after { animation-play-state: paused; }
.card.is-loading :is(.card__img, .card__scene, .card__shadow, .card__shot) { opacity: 0; }

.card.has-alt:not(.alt-ready) .card__img--b { visibility: hidden; }
.is-skel .card__img { opacity: 0 !important; transition: none; }
.is-unskel .card__img--a { transition: opacity .45s ease var(--d, 0ms), transform .5s var(--ease-out); }
.is-unskel .card__media::after { opacity: 0; transition: opacity .4s ease var(--d, 0ms); }

:is(.is-skel, .is-unskel) :is(.card__name, .card__note, .card__retail > span) { width: fit-content; max-width: 100%; border-radius: 6px; }
.is-skel :is(.card__name, .card__note, .card__retail, .card__retail b) { color: transparent; }
.is-skel :is(.card__name, .card__note, .card__retail > span) { background-color: var(--skel); }
.is-skel .tier { background-color: var(--skel); color: transparent; }
.is-skel .tier__plus { opacity: 0; }
.is-skel .tier__st { background-color: var(--skel-2); color: transparent; box-shadow: 0 0 0 2px var(--tier-bg); }
.is-unskel :is(.card__name, .card__note, .card__retail, .card__retail > span, .card__retail b, .tier, .tier__st, .tier__plus) {
  transition: color .35s ease var(--d, 0ms), background-color .35s ease var(--d, 0ms), box-shadow .35s ease var(--d, 0ms), opacity .35s ease var(--d, 0ms);
}
:is(.is-skel, .is-unskel) .card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) 130% 0 / 250% 100% no-repeat;
  animation: skelShine 1.4s ease-in-out infinite;
}
.is-unskel .card::after { opacity: 0; transition: opacity .3s ease var(--d, 0ms); }
@keyframes skelShine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.card__retail { margin: 0; font-size: 15px; color: var(--muted); }

.card__retail, .sheet__retail { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; }
.card__art, .sheet__art { white-space: nowrap; }

.card__retail b { color: var(--red); font-weight: 700; }
.card__hit { position: absolute; inset: 0; z-index: 4; border: 0; background: transparent; border-radius: inherit; }
.card__hit:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }

.transit {
  position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 20px);
  padding: 7px 12px 7px 9px; border-radius: 999px; background: rgba(21, 47, 83, .76);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none;
  color: #fff; font: 800 13px/1 'CA Metro', 'Arial Narrow', Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .4s ease var(--d, 0ms);
}
.transit svg { flex: none; width: 18px; height: 18px; color: var(--paper-2); }
.transit__t { position: relative; top: .07em; }

:is(.is-skel, .card.is-loading) .transit { opacity: 0; transition: none; }

.sheet__transit {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border-radius: 999px;
  background: rgba(21, 47, 83, .07); color: var(--navy); font: 800 13px/1 'CA Metro', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.sheet__transit svg { flex: none; width: 20px; height: 20px; color: var(--navy-soft); }
.sheet__transit__t { position: relative; top: .07em; }
.hot__label .hot__transit { margin-top: 7px; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); }
@media (max-width: 760px) {
  .transit { top: 8px; left: 8px; gap: 5px; padding: 5px 9px 5px 7px; font-size: 11px; max-width: calc(100% - 16px); }
  .transit svg { width: 15px; height: 15px; }
}

.tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.tier {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--navy); color: #fff; border-radius: 999px; padding: 3px var(--tier-pad, 12px) 3px 3px;
  font-weight: 800; font-size: var(--tier-fs, 15px); line-height: 1;
}

.tier__plus, .tier__price { position: relative; top: .07em; }
.tier__st > span { display: block; transform: translateY(.035em); }
.tier--top { background: var(--red); }

.tier__st {
  display: inline-grid; place-items: center; min-width: var(--st, 30px); height: var(--st, 30px); padding: 0 6px; border-radius: 999px;
  background: var(--navy); color: #fff; font-weight: 900; font-size: var(--st-fs, 14px);
  transform: scale(1.22); margin-right: 3px;
  box-shadow: 0 0 0 2px var(--tier-bg, var(--paper)), inset 0 0 0 2.5px var(--navy), inset 0 0 0 3.8px #81d0f5;
}
.tier { margin-left: 4px; }
.tiers-flat .tier__st { transform: none; margin-right: 0; box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 3.5px #81d0f5; }
.tiers-flat .tier { margin-left: 0; }
.tier__plus { opacity: .65; font-weight: 400; }
@container (max-width: 620px) {
  .grid { --card-name: 20px; --tier-fs: 21px; --tier-pad: 14px; --st: 38px; --st-fs: 17px; }
  .card__body { padding: 0 12px 28px; gap: 8px; }
  .card__body > .tiers { margin-top: 4px; }
  .card--room .card__body { padding-top: 10px; }
  .card--W .card__body, .card--room.card--W .card__body { padding: 10px 12px 28px; }
}

.disclaimer {
  position: relative; z-index: 1; margin: 24px clamp(16px, 4vw, 56px) 0; padding: 24px 0 120px;
  border-top: 1px solid rgba(0, 0, 0, .12); font-size: 12px; line-height: 1.45; color: var(--muted); text-transform: uppercase;
}

.disclaimer { color: var(--navy-soft); border-color: rgba(21, 47, 83, .15); }

.rules-link { color: inherit; text-decoration: underline 1px; text-underline-offset: .2em; }
@media (hover: hover) { .rules-link:hover { text-decoration-thickness: 2px; } }
.rules-link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.page--catalog .disclaimer { padding-bottom: calc(var(--offer-room, 180px) + 24px); }
.offer {
  position: absolute; z-index: 5; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(1100px, calc(100% - 32px));
  transform: translate3d(-50%, calc(100% + 40px), 0); opacity: 0; visibility: hidden;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, visibility 0s linear .55s;
}
.offer.is-on { transform: translate3d(-50%, 0, 0); opacity: 1; visibility: visible; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, visibility 0s; }
.offer__in {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
  padding: 18px 18px 18px 28px; border-radius: 16px; color: #fff;
  background: rgba(21, 47, 83, .82); box-shadow: 0 18px 50px rgba(5, 14, 30, .35), inset 0 0 0 1px rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.offer__text { flex: 1 1 22em; min-width: 0; margin: 0; font: 400 18px/1.4 'Lato', 'Helvetica Neue', Arial, sans-serif; }
.offer__kicker { display: block; font: 700 22px/1.1 'CA Metro', 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; color: var(--yellow); margin-bottom: 4px; }
.offer__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.offer__btn {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: .14em 20px 0; border-radius: 10px; border: 0;
  font: 700 16px/1 'CA Metro', 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.offer__btn--cta { background: var(--yellow); color: #000; box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
.offer__btn--cta:hover { background: #fff04d; }
.offer__btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.offer__btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.offer__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.still .offer, .still .offer.is-on { transition: none; }
@media (max-width: 760px) {
  .offer { bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(100% - 20px); }
  .offer__in { padding: 14px; gap: 12px; }
  .offer__text { flex-basis: 100%; font-size: 15px; }
  .offer__kicker { font-size: 19px; }
  .offer__cta { width: 100%; }
  .offer__btn { flex: 1 1 auto; }
}

.page--about { z-index: 40; overflow: hidden; }

.close {
  position: absolute; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  background: var(--yellow); color: var(--navy); font-size: 0; line-height: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 0 4px 14px rgba(5, 13, 24, .22); transition: background-color .2s ease;
}
.close:hover { background: #fff04d; }
@media (max-width: 760px) { .close { width: 40px; height: 40px; } }
.close::before, .close::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 18.7px; height: 2.2px; margin: -1.1px 0 0 -9.35px;
  border-radius: 1.1px; background: currentColor; rotate: 45deg;
}
.close::after { rotate: -45deg; }

.sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(8, 12, 22, .66); backdrop-filter: blur(5px); }
.sheet__panel {
  position: relative; width: min(1200px, 94vw); height: min(760px, 90svh);
  background: var(--paper); border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.sheet__close { top: 16px; right: 16px; }
.sheet__gallery {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 12px; padding: 28px;
  background: radial-gradient(ellipse at 50% 42%, #fff 0, #f3ede3 55%, #e7dccb 100%);
}
.sheet__stage { position: relative; perspective: 1400px; min-height: 0; }
.sheet__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; }
.sheet__views { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.sheet__viewname { margin: 0; min-height: 1.3em; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--navy); }
.view {
  display: block; width: 72px; height: 72px; padding: 6px; border: 2px solid transparent; border-radius: 14px;
  background: rgba(255, 255, 255, .85); transition: border-color .2s, transform .2s var(--ease-out);
}
.view img { display: block; width: 100%; height: 100%; object-fit: contain; }
.view:hover { transform: translateY(-2px); }
.view[aria-pressed="true"] { border-color: var(--navy); }
.view:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.sheet__info { padding: 40px 40px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

.sheet__tag { margin: 0; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.sheet__title { margin: 0; font-weight: 900; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.02; padding-right: 48px; }
.sheet__note { margin: -6px 0 0; color: var(--muted); font-size: 16px; }
.sheet__prices { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.sheet__prices .tiers { gap: 10px; }
.sheet__prices .tier { font-size: 28px; padding-right: 20px; }
.sheet__prices .tier__st { min-width: 50px; height: 50px; font-size: 21px; }
.sheet__retail { margin: 0; color: var(--muted); font-size: 15px; }
.sheet__retail b { color: var(--red); font-weight: 700; }

.sheet__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sheet__chips[hidden] { display: none; }
.sheet__chips li {
  padding: .5em .95em .45em; border-radius: 999px; background: rgba(21, 47, 83, .07); color: var(--navy);
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.2; white-space: nowrap;
}

.sheet__desc p { margin: 0 0 12px; font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.55; }
.sheet__nav { margin-top: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-top: 12px; }
.sheet__step { border: 0; background: none; text-align: left; font-weight: 700; font-size: 14px; color: var(--navy); padding: 8px 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet__step--next { text-align: right; }
.sheet__count { color: var(--muted); font-size: 13px; }
.ghost { position: absolute; z-index: 70; pointer-events: none; object-fit: contain; transform-origin: 0 0; }
@media (max-width: 760px) {
  .sheet__panel { width: 100vw; height: 100svh; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: 46svh minmax(0, 1fr); }
  .sheet__gallery { padding: 56px 16px 12px; }
  .view { width: 60px; height: 60px; padding: 5px; }
  .sheet__info { padding: 20px 18px 16px; }
  .sheet__prices .tier { font-size: 18px; }
}

.v-c .page { transition: none; will-change: transform; }

.camworld { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.camworld[hidden] { display: none; }
.camworld__move { position: absolute; left: 0; top: 0; width: 5420px; height: 1770px; transform-origin: 0 0; will-change: transform; }
.camworld__move > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.camworld__soft { opacity: 0; will-change: opacity; }

.world-fly .page--scene { background: transparent; }
.world-fly .L--landscape { visibility: hidden; }

.world-fly.world-ownland .L--landscape { visibility: visible; }
.world-still :is(.camworld__wide, .camworld__land) { visibility: hidden; }

.is-webkit.world-on:not(.boot):not(.from-about) body {
  background: var(--desk) url(img/world/tuscany-soft.webp) var(--under-pos, 50% 40%) / var(--under-size, cover) no-repeat;
}
.world-on .catalog__bg { background: none; }
.world-on .catalog__bg::after { opacity: 0; transition: opacity .5s ease; }
.world-on .page--catalog.is-washed .catalog__bg::after { opacity: 1; }
.world-on .catalog__bg.no-tr::after { transition: none; }

.camrim { position: absolute; inset: 0; z-index: 50; border-radius: inherit; pointer-events: none; opacity: 0; will-change: opacity; --rim: 4px; --rim-r: 50px; }
.camrim > i { position: absolute; left: 0; right: 0; box-sizing: border-box; will-change: transform; border: 0 solid rgba(255, 255, 255, .85); }
.camrim > .camrim__t { top: 0; height: var(--rim-r); border-width: var(--rim) var(--rim) 0; border-top-left-radius: inherit; border-top-right-radius: inherit; }
.camrim > .camrim__b { bottom: 0; height: var(--rim-r); border-width: 0 var(--rim) var(--rim); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.camrim > :is(.camrim__l, .camrim__r) { top: var(--rim-r); bottom: var(--rim-r); width: var(--rim); background: rgba(255, 255, 255, .85); }
.camrim > .camrim__l { right: auto; }
.camrim > .camrim__r { left: auto; }

.cam-on .catalog__cloth { opacity: 0; transition: opacity .2s ease; }

.page--catalog > .glass { opacity: 0; transition: opacity .5s ease; }
.world-fly .page--catalog > .glass { opacity: 1; }

.glass-rest :is(.page--about > .flagcard, .page--catalog > .glass) { visibility: hidden; }

.glass-rest.world-cat .page--catalog > .glass { transition: opacity .5s ease, visibility 0s .6s; }

.world-cat :is(.camworld__wide, .camworld__land) { visibility: hidden; }
.page--about > .flagcard { display: none; }
.world-on .page--about { background: none; }
.world-on .page--about > .flagcard { display: block; }

.is-webkit .page--catalog > .glass { display: none; }
.is-webkit.world-fly .page--catalog :is(.transit, .offer__in) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-webkit.world-fly .page--catalog :is(.catalog__head, .catalog__home, .catalog__lead, .group__title, .group__lead),
.is-webkit.world-fly .catalog__bg::after, .is-webkit.world-fly .card__shot { transition: none; }

.is-webkit.land-hold .page--catalog :is(.catalog__head, .catalog__home, .catalog__lead, .group__title, .group__lead) { color: #fff; }
.is-webkit.land-hold .page--catalog.is-washed .catalog__bg::after { opacity: 0; }

.world-on .page--catalog :is(.catalog__head, .catalog__home, .catalog__lead, .group__title, .group__lead) { transition: color .5s ease; }
.world-fly .page--catalog :is(.catalog__head, .catalog__home, .catalog__lead, .group__title, .group__lead) { color: #fff; }

.world-fly .page--catalog .page__scroll { scrollbar-color: transparent transparent; }

.world-on :is(.is-skel, .is-unskel) .card::after { display: none; }

.world-on .is-skel :is(.card__scene, .card__shadow, .card__shot) { opacity: 0; }
.world-on .page--catalog.is-skel { --skel: #efe9e0; --skel-2: #e4dcd0; }
.world-on .is-skel .card__media--room { background-color: #fffdf8; }
.world-on .is-unskel .card__media--room { transition: background-color .35s ease var(--d, 0ms); }

.camworld__calm { opacity: 0; transition: opacity .5s ease; }
.vivid.world-cat .camworld__calm { opacity: 1; }
.vivid.world-on .catalog__bg::after {
  background:
    linear-gradient(90deg, rgba(247, 242, 234, .34) 0, rgba(247, 242, 234, .2) 34%, rgba(247, 242, 234, 0) 60%),
    linear-gradient(180deg, rgba(247, 242, 234, .04) 0, rgba(247, 242, 234, .1) 14vh, rgba(247, 242, 234, .42) 28vh, rgba(247, 242, 234, .92) 40vh, var(--paper) 52vh);
}

.from-about .page { opacity: 0; }

.boot .page { visibility: hidden !important; }
.boot body { background: var(--beige); }
.boot-cat body { background: var(--paper); }

.from-about body { background: var(--beige); }
.page[inert] .hot::before { animation-play-state: paused; }

.dig {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: none; overflow: hidden; color: var(--navy); font-family: 'Lato', system-ui, sans-serif;
}
.dig::backdrop { background: transparent; }
.dig__shade { position: absolute; inset: 0; background: rgba(0, 45, 98, .6); will-change: opacity; }
.dig__frame { position: absolute; will-change: translate; }
.dig__panel { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.dig__panel:focus { outline: none; }
.dig__body { position: relative; flex: 1; min-height: 0; }
.dig__title { margin: 0; font-family: 'CA Metro', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.2; text-align: center; text-transform: uppercase; }
.dig__h { margin: 0; font-family: 'CA Metro', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.2; text-transform: uppercase; }
.dig .br, .dig .br-tm { display: block; }
.dig__list { list-style: none; margin: 0; padding: 0; }
.dig__step { display: flex; align-items: center; gap: 24px; margin: 0; }
.dig__ico { flex: none; display: block; width: 96px; height: auto; }
.dig__step p { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.dig__box { border-radius: 6px; }
.dig__box--store { background: #f9f8f1; }
.dig__foot { display: flex; justify-content: center; align-items: center; gap: 26px; }
.dig__btn {
  flex: none; height: 56px; padding: 0 24px; border: 0; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Lato', system-ui, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; text-transform: uppercase;
  text-decoration: none; transition: background-color .2s, box-shadow .2s;
}
.dig__btn--main { background: var(--navy); color: #fff; }
.dig__btn--main:hover { background: #22477a; }
.dig__btn--line { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.dig__btn--line:hover { box-shadow: inset 0 0 0 2px var(--navy); }
.dig__btn img { width: 24px; height: 24px; }
.dig__close {
  position: absolute; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--yellow); color: var(--navy); box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 0 4px 14px rgba(5, 13, 24, .22); transition: background-color .2s ease;
}
.dig__close:hover { background: #fff04d; }
.dig__close svg { display: block; width: 20px; height: 20px; }
.dig button:focus-visible, .dig .dig__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--navy); }

.dig--desk .dig__frame { left: 50%; top: 50%; width: 1040px; height: 722px; margin: -361px 0 0 -520px; transform: scale(var(--k, 1)); }
.dig--desk .dig__panel { border-radius: 16px; box-shadow: 0 4px 32px rgba(0, 0, 0, .16); }
.dig--desk .dig__close { top: 30px; right: 25px; }
.dig--desk .dig__in { padding: 39px 23px 0 42px; }
.dig--desk .dig__title { margin-bottom: 53px; }
.dig--desk .dig__cols { display: grid; grid-template-columns: 450px 505px; column-gap: 20px; align-items: start; }
.dig--desk .dig__how { padding-top: 15px; }
.dig--desk .dig__how .dig__h { margin-bottom: 43px; }
.dig--desk .dig__how .dig__list { display: flex; flex-direction: column; gap: 8px; }
.dig--desk .dig__step p { flex: 0 1 330px; }
.dig--desk .dig__side { display: flex; flex-direction: column; gap: 7px; }
.dig--desk .dig__box--store { height: 167px; padding: 15px 16px 0 15px; }
.dig--desk .dig__box--store .dig__h { margin: 0 0 11px 3.5px; }
.dig--desk .dig__box--web { height: 249px; padding: 22px 16px 0 15px; background: #f9f8f1; }
.dig--desk .dig__box--web .dig__h { margin-bottom: 15px; }
.dig--desk .dig__box--web .dig__step { height: 80px; gap: 16px; }
.dig--desk .br-tm { display: none; }
.dig--desk .dig__foot { position: absolute; left: 329.5px; top: 622px; justify-content: flex-start; }
.dig--desk .dig__btn--line { width: 236px; }

.dig--tab .dig__frame, .dig--mob .dig__frame { inset: 0; }
.dig--tab .dig__body, .dig--mob .dig__body { overflow-y: auto; overscroll-behavior: contain; }
.dig--tab .dig__h, .dig--mob .dig__h { text-align: center; }
.dig--tab .dig__foot, .dig--mob .dig__foot {
  position: relative; z-index: 1; flex: none; height: 88px; padding: 16px; gap: 16px; background: #fff; box-shadow: 0 0 24px rgba(0, 0, 0, .25);
}
.dig--tab .dig__btn--line, .dig--mob .dig__btn--line { width: 220px; padding: 0 16px; }
.dig--tab .dig__in { max-width: 768px; margin: 0 auto; padding: 64px 0 40px; }
.dig--tab .dig__close { top: 22px; right: 22px; }
.dig--tab .dig__title { font-size: 32px; padding: 0 72px 16px; }
.dig--tab .dig__how { margin-top: 32px; padding: 0 16px; }
.dig--tab .dig__how .dig__h { margin-bottom: 17px; }
.dig--tab .dig__how .dig__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.dig--tab .dig__how .dig__step, .dig--tab .dig__box--web .dig__step { flex-direction: column; justify-content: flex-start; gap: 8px; text-align: center; }
.dig--tab .dig__side { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.dig--tab .dig__box--store { height: 165px; padding: 24px 120px 0; }
.dig--tab .dig__box--store .dig__h { margin-bottom: 16px; }
.dig--tab .dig__box--store .dig__step { gap: 8px; }
.dig--tab .dig__box--web { padding: 22px 16px 0; }
.dig--tab .dig__box--web .dig__h { margin-bottom: 15px; }
.dig--tab .dig__box--web .dig__list { display: flex; justify-content: center; gap: 40px; padding: 0 80px; }
.dig--tab .dig__box--web .dig__step { flex: 1 1 0; min-width: 0; gap: 16px; }
.dig--mob .dig__in { padding: 32px 0 32px; }
.dig--mob .dig__close { top: 16px; right: 16px; width: 40px; height: 40px; }
.dig--mob .dig__title { font-size: 26px; padding: 0 56px 16px; }
.dig--mob .dig__h { font-size: 20px; }
.dig--mob .dig__how { margin-top: 16px; padding: 0 16px; }
.dig--mob .dig__how .dig__h { margin-bottom: 17px; }
.dig--mob .dig__list { display: flex; flex-direction: column; gap: 8px; }
.dig--mob .dig__step { gap: 8px; }
.dig--mob .dig__step p { font-size: 16px; }
.dig--mob .dig__side { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.dig--mob .dig__box--store { min-height: 144px; padding: 24px 16px 0; }
.dig--mob .dig__box--web { padding: 22px 16px 0; }
.dig--mob .dig__box--web .dig__h { margin-bottom: 15px; }
.dig--mob .dig__box--web .dig__list { gap: 0; }
.dig--mob .dig__box--web .dig__step { min-height: 80px; gap: 16px; }
@media (max-width: 399px) {
  .dig--mob .dig__foot { gap: 10px; padding: 16px 12px; }
  .dig--mob .dig__btn { font-size: 16px; padding: 0 14px; }
  .dig--mob .dig__btn--line { width: auto; }
}

.dig__in--friend { display: none; }
.dig--friend .dig__in--how { display: none; }
.dig--friend .dig__in--friend { display: block; }
.dig--friend .dig__btn--line { display: none; }
.friend { list-style: none; margin: 0; padding: 0; }
.friend__step { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 300px); column-gap: 24px; align-items: start; }
.friend__step + .friend__step { margin-top: 28px; }
.friend__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 16px/1 'Lato', 'Helvetica Neue', Arial, sans-serif; }
.friend__main p, .friend__gift { margin: 0; font: 600 18px/1.25 'Lato', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.01em; }
.friend__banner { --u: .86px; width: calc(350 * var(--u)); margin-bottom: 12px; }
.friend__note { margin: 0; padding: 4px 0 4px 24px; border-left: 1px solid rgba(21, 47, 83, .15); font: 400 14px/1.3 'Lato', 'Helvetica Neue', Arial, sans-serif; color: var(--navy-soft); }
.friend__step--gift { grid-template-columns: 32px repeat(2, minmax(0, 1fr)); padding-top: 28px; border-top: 1px solid rgba(21, 47, 83, .15); align-items: center; }
.friend__gift { display: flex; align-items: center; gap: 14px; }
.friend__plus { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding-top: .14em; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--navy); font: 800 19px/1 'CA Metro', 'Arial Narrow', Arial, sans-serif; }
.friend__foot { margin: 24px 0 0; text-align: center; font: 400 14px/1.3 'Lato', 'Helvetica Neue', Arial, sans-serif; color: var(--navy-soft); }
.friend__rules { margin: 10px 0 0; text-align: center; font: 700 15px/1.3 'Lato', 'Helvetica Neue', Arial, sans-serif; color: var(--navy); }
.friend__rules .rules-link:hover { color: var(--blue); }
.dig--desk .dig__in--friend { padding: 39px 64px 0; }
.dig--desk .dig__in--friend .dig__title { margin-bottom: 40px; }

.dig--desk.dig--friend .dig__frame { height: 616px; margin-top: -308px; }
.dig--desk.dig--friend .dig__foot { left: 0; right: 0; top: 524px; justify-content: center; }
.dig--tab .dig__in--friend, .dig--mob .dig__in--friend { padding-left: 24px; padding-right: 24px; }
.dig--tab .dig__in--friend .dig__title, .dig--mob .dig__in--friend .dig__title { padding: 0 48px 24px; }
.dig--tab .friend__step, .dig--mob .friend__step { grid-template-columns: 32px minmax(0, 1fr); row-gap: 8px; }
.dig--tab .friend__note, .dig--mob .friend__note { grid-column: 2; padding: 0; border: 0; }
.dig--tab .friend__step--gift { grid-template-columns: 32px repeat(2, minmax(0, 1fr)); }
.dig--mob .friend__step--gift .friend__gift { grid-column: 2; }
.dig--mob .friend__banner { --u: .78px; }

.still *, .still *::before, .still *::after { transition: none !important; animation: none !important; }

.is-flow .catalog__home { display: none; }
.is-flow .below { padding: 0; background: var(--paper); isolation: isolate; }
.is-flow .below .catalog__bg {
  bottom: auto; height: 100lvh; z-index: -1;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.is-flow .below .page__scroll { position: relative; inset: auto; overflow: visible; }

.is-flow .scene__zoom { overflow: hidden; }

.mdock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; pointer-events: none; }
.mdock .mbar { position: relative; z-index: 1; }

.mdock .offer {
  position: relative; left: auto; bottom: auto; width: auto; margin: 0 10px 10px;
  transform: translateY(calc(100% + 10px)); opacity: 0; visibility: hidden; pointer-events: auto;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, visibility 0s linear .55s;
}
@media (min-width: 761px) { .mdock .offer { margin: 0 16px 10px; } }
.mdock .offer.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, visibility 0s; }
.cam-on .mdock { opacity: 0; }

.page--about { background: linear-gradient(90deg, #01671d 0 33.34%, #fbfaf6 33.34% 66.67%, #d10007 66.67% 100%); }

.edge-b { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; height: 6px; pointer-events: none; }

.is-mob .mbar__btn { height: max(44px, calc(52px * var(--u))); }
.is-mob .mbar { --btn-add: max(0px, 44px - 52px * var(--u));
  height: calc(151px * var(--u) + var(--btn-add) / 2); padding-top: calc(21px * var(--u) - var(--btn-add) / 2); }