/* =====================================================================
   VIRTUAL EXPERIENCE — Lake District · One Mandwa · Zen
   Palette & type follow the reference tour design.
   ===================================================================== */

:root {
  --slate:      #3D494E;  /* header bar / primary brand dark */
  --slate-soft: #4E5C62;  /* hover lift on the primary */
  --sage:       #7C8B84;  /* accent rules, underlines, eyebrows */
  --ink:        #3D494E;  /* headings */
  --muted:      #7f858f;  /* body copy */
  --line:       rgba(61, 73, 78, 0.14);
  --paper:      #ffffff;
  --mist:       #eef1f5;

  /* Legacy names kept as aliases so every existing rule keeps working — the
     palette moved from navy/gold to slate/sage, the structure did not. */
  --navy:      var(--slate);
  --navy-soft: var(--slate-soft);
  --gold:      var(--sage);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Level container / transitions ---------- */
.level {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0.7s;
  z-index: 1;
}
.level--active {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 2;
}

/* =====================================================================
   SHARED — header, brand, hamburger, buttons
   ===================================================================== */
.site-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 34px 48px;
}

.brand {
  font-family: var(--serif);
  line-height: 1;
  color: var(--navy);
}
/* Every header now carries the HORIZONTAL Samira Habitats lockup (ratio ~3.2).
   For a wide logo, WIDTH is the lever, not height: the old height-based sizing
   was tuned for the portrait destination logo, and 96px of height would render
   this one ~306px wide while making the viewer bar needlessly tall. Set the
   width and let height follow. */
.brand__logo {
  width: 268px;
  max-width: 42vw;
  height: auto;
  display: block;
}
/* Slimmer in the viewer, so the bar takes as little of the panorama as it can. */
.viewer__head .brand__logo { width: 206px; }

@media (max-width: 1180px) {
  .brand__logo { width: 232px; }
  .viewer__head .brand__logo { width: 186px; }
}
@media (max-width: 900px) {
  .brand__logo { width: 188px; }
  .viewer__head .brand__logo { width: 158px; }
}
.brand__top {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
}
.brand__main {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 4px;
  margin-top: 4px;
}
.brand__sub {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 5px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
}
.brand__sub::before,
.brand__sub::after { content: ""; height: 1px; width: 26px; background: var(--navy); opacity: 0.6; }

/* hamburger */
.hamburger {
  width: 34px; height: 26px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  background: none; border: none; cursor: pointer;
  padding: 0;
}
.hamburger span { height: 2px; width: 100%; background: var(--navy); border-radius: 2px; }
.hamburger--dark span { background: var(--navy); }
.hamburger--sm { width: 22px; height: 15px; }

/* primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
  padding: 20px 34px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.btn-primary:hover { background: var(--navy-soft); transform: translateY(-2px); }
.btn-primary__arrow { font-size: 16px; }

/* =====================================================================
   LEVEL 1 — HERO
   ===================================================================== */
.hero { background: var(--mist); }
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translateX(-1.2%); }
  to   { transform: scale(1.12) translateX(1.2%); }
}
@media (prefers-reduced-motion: reduce) { .hero__media { animation: none; } }

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 32%, rgba(255,255,255,0.18) 62%, rgba(255,255,255,0) 80%);
}
.hero__content {
  position: absolute;
  z-index: 10;
  left: 88px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 620px;
}
.eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--navy);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 4.8vw, 76px);
  line-height: 1.02;
  color: var(--navy);
  margin-top: 20px;
  white-space: pre-line;
}
.rule {
  width: 88px; height: 3px;
  background: var(--gold);
  margin: 26px 0 22px;
}
.hero__desc {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 440px;
  white-space: pre-line;
}

/* scroll hint */
.scroll-hint {
  position: absolute;
  z-index: 10;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--navy);
  opacity: 0.85;
}
.scroll-hint__mouse {
  width: 20px; height: 32px;
  border: 1.5px solid var(--navy);
  border-radius: 12px;
  position: relative;
}
.scroll-hint__mouse::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 6px;
  background: var(--navy);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollWheel 1.6s infinite;
}
@keyframes scrollWheel { 0%{opacity:1;top:7px} 60%{opacity:0;top:15px} 100%{opacity:0} }

/* =====================================================================
   LEVEL 2 — CHOOSE YOUR DESTINATION
   ===================================================================== */
.chooser {
  background:
    radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f3f5f8 70%, #eef1f5 100%);
  overflow-y: auto;
}
.site-head--dark .brand,
.brand--dark { color: var(--navy); }

.chooser__inner {
  position: relative;
  z-index: 5;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 150px 24px 60px;
}
.step {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 5px;
  color: var(--navy);
  padding-bottom: 12px;
  position: relative;
}
.step::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 34px; height: 2px;
  background: var(--gold);
}
.chooser__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 74px);
  color: var(--navy);
  margin-top: 20px;
}
.chooser__sub {
  font-size: 16px;
  color: var(--muted);
  margin-top: 10px;
  letter-spacing: 0.5px;
}

.cards {
  display: flex;
  gap: 40px;
  margin-top: 54px;
  flex-wrap: wrap;
  justify-content: center;
}
.card {
  width: 300px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(22, 41, 78, 0.08);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-align: center;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 80px rgba(22, 41, 78, 0.16);
}
/* thumbnail strip from the folder's first panorama */
.card__thumb {
  width: 100%;
  height: 148px;
  background-size: cover;
  background-position: center;
  background-color: #dfe4ec;
  position: relative;
}
.card__thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,41,78,0) 45%, rgba(22,41,78,0.35) 100%);
}
.card__count {
  position: absolute;
  right: 12px; bottom: 10px;
  z-index: 2;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #fff;
  background: rgba(22,41,78,0.7);
  border-radius: 20px;
  padding: 5px 12px;
}
.card__body {
  padding: 30px 32px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card__icon {
  width: 74px; height: 74px;
  margin-top: -67px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(22,41,78,0.16);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  position: relative;
  z-index: 3;
}
.card__icon svg { width: 36px; height: 36px; }
.card__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--navy);
}
.card__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 12px;
  max-width: 220px;
}
.card__go {
  margin-top: 24px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.card:hover .card__go { transform: scale(1.08); }

/* =====================================================================
   LEVEL 3 — VIEWER
   ===================================================================== */
.viewer { background: #000; }
.viewer__pano { position: absolute; inset: 0; }

/* ---- Viewer header bar ----
   Dark slate bar, everything on it reversed out to white. The logo swaps to
   its knockout variant here (see brand.logoLight in js/config.js) — the
   colour artwork's dark grey wordmark measures 1.05:1 against this bar,
   i.e. invisible, while white measures 9.29:1. */
.viewer__head {
  background: var(--slate);
  /* The logo is short and wide now, so the bar no longer needs to be tall to
     accommodate it — this pads normally and still comes out slimmer than the
     108px the portrait logo forced. */
  padding: 10px 40px;
  align-items: center;
  box-shadow: 0 2px 18px rgba(0,0,0,0.22);
}
/* No plate behind the logo — it sits directly on the slate bar. That only
   works because the bar uses the knockout-WHITE artwork (brand.logoLight):
   the colour logo's dark grey wordmark measures 1.05:1 here and would be
   invisible without something light behind it. */
.viewer__head .brand,
.viewer__head .brand--dark,
.viewer__head .brand__sub,
.viewer__head .menu-text { color: #fff; }
.viewer__head .brand__sub::before,
.viewer__head .brand__sub::after { background: #fff; }
.viewer__head .hamburger--dark span { background: #fff; }
.viewer__head .viewer__divider { background: rgba(255,255,255,0.28); }
.viewer__head .brand__main { font-size: 24px; }
.viewer__head-right {
  display: flex;
  align-items: center;
  gap: 26px;
}

/* ---- The 3 toggles ---- */
.view-switch {
  display: flex;
  align-items: center;
  gap: 4px;
}
.view-switch__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.5px;
  white-space: nowrap;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 24px;
  transition: color 0.2s ease, background 0.2s ease;
}
.view-switch__ic {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  transition: border-color 0.2s ease;
  flex: none;
}
.view-switch__ic svg { width: 18px; height: 18px; }
/* :not() for the same reason as the point rail — a bare :hover outranks
   --active on specificity and would paint the selected destination's label
   navy-on-navy, i.e. invisible. */
/* On the dark bar the states invert: inactive is muted white, the ACTIVE one
   is a solid white pill with slate text. */
.view-switch__btn { color: rgba(255,255,255,0.72); }
.view-switch__btn:not(.view-switch__btn--active):hover { color: #fff; }
.view-switch__btn--active { color: var(--slate); background: #fff; }
.view-switch__btn--active .view-switch__ic { border-color: rgba(61,73,78,0.35); }
.viewer__divider { width: 1px; height: 30px; background: var(--line); }
.menu-text {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; letter-spacing: 3px;
  color: var(--navy);
}

/* ---- Point rail (left) ---- */
.floors {
  position: absolute;
  left: 30px; top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 22px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
  min-width: 96px;
  max-height: 68vh;
  overflow-y: auto;
}
.floors__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--navy);
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.floors__list { display: flex; flex-direction: column; gap: 10px; }
.floor {
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  color: var(--navy);
  transition: background 0.2s ease, color 0.2s ease;
  font-family: var(--sans);
}
.floor__num { display: block; font-size: 19px; font-weight: 600; line-height: 1; }
/* :not() keeps the hover tint off the selected point — a bare .floor:hover
   outranks .floor--active on specificity and would leave the active item as
   white text on a pale background. */
.floor:not(.floor--active):hover { background: rgba(22,41,78,0.06); }
.floor--active { background: var(--navy); color: #fff; }

/* ---- 180/360 badge (bottom-right) ---- */
.deg-badge {
  position: absolute;
  right: 34px; bottom: 40px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.95);
  border-radius: 30px;
  padding: 12px 20px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--navy);
  box-shadow: 0 12px 34px rgba(0,0,0,0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}
.deg-badge:hover { background: #fff; transform: translateY(-1px); }
.deg-badge__icon { display: flex; align-items: center; }
.deg-badge__icon svg { width: 17px; height: 17px; }

/* The bottom-left scene caption has been removed — the header toggle and the
   point rail already carry that information. */

/* ---- Loading indicator ----
   Two grades. The full veil is for first entry, when the screen is genuinely
   empty. Once a panorama is up, a scene swap cross-fades from it — the old
   view stays sharp throughout — so dimming the screen there would be hiding
   something worth looking at. That case gets the chip instead. */
.pano-loading {
  position: absolute; inset: 0;
  z-index: 12;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: rgba(6, 12, 24, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}
.pano-loading.on { display: flex; }
.pano-loading__ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: var(--gold);
  animation: panoSpin 0.9s linear infinite;
  flex: none;
}
.pano-loading__text {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500; letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
@keyframes panoSpin { to { transform: rotate(360deg); } }

/* the chip — same pill language as the other viewer controls */
.pano-loading--subtle {
  inset: auto;
  left: 50%; top: 104px;
  transform: translateX(-50%);
  flex-direction: row;
  gap: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 30px;
  padding: 9px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.pano-loading--subtle .pano-loading__ring {
  width: 15px; height: 15px;
  border-color: rgba(22,41,78,0.2);
  border-top-color: var(--navy);
}
.pano-loading--subtle .pano-loading__text { color: var(--navy); font-size: 10px; }

/* hide pannellum default UI */
.pnlm-controls-container, .pnlm-panorama-info, .pnlm-load-box { display: none !important; }

/* =====================================================================
   SLIDE-OUT MENU
   ===================================================================== */
.menu-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 340px;
  background: var(--navy);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  padding: 90px 44px;
  overflow-y: auto;
}
.menu-panel--open { transform: none; }
.menu-panel__close {
  position: absolute;
  top: 30px; right: 40px;
  font-size: 34px;
  color: #fff;
  background: none; border: none; cursor: pointer;
  line-height: 1;
}
.menu-panel__nav { display: flex; flex-direction: column; gap: 8px; }
.menu-panel__nav a {
  font-family: var(--serif);
  font-size: 26px;
  color: #fff;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.menu-panel__nav a:hover { color: var(--gold); padding-left: 8px; }
.menu-panel__nav a.is-disabled { opacity: 0.4; pointer-events: none; }

/* The destination list that used to sit here has been removed — the three
   destinations are offered on the header bar only. */

/* =====================================================================
   LIVE COMPASS
   ===================================================================== */
.compass {
  position: fixed;
  right: 30px; top: 130px;
  z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.compass[hidden] { display: none; }
.compass__dial {
  width: 74px; height: 74px;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.compass__dial svg { width: 100%; height: 100%; display: block; }
.compass text {
  text-anchor: middle;
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  dominant-baseline: middle;
}
.compass__n { fill: #e6b463; }
.compass__d { fill: #ffffff; }
.compass__label {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
  .view-switch__btn { padding: 8px 12px; letter-spacing: 1.5px; font-size: 12px; }
  .view-switch__ic { display: none; }
}
@media (max-width: 900px) {
  .site-head { padding: 22px 24px; }
  .viewer__head { padding: 5px 20px; }
  .hero__content { left: 28px; right: 28px; }
  .brand__main { font-size: 24px; }
  .cards { gap: 22px; }
  .card { width: 280px; }
  .floors { left: 14px; padding: 14px 10px; min-width: 78px; }
  .floor__num { font-size: 16px; }
  .deg-badge { right: 14px; bottom: 20px; padding: 10px 16px; }
  .compass { right: 16px; top: 110px; }
  .compass__dial { width: 60px; height: 60px; }
  .viewer__divider, .menu-text span:last-child { display: none; }
}

/* Short / square windows (incl. phones in landscape) */
@media (max-height: 820px) {
  .site-head { padding: 16px 24px; }
  .brand__main { font-size: 22px; }
  /* Short windows: the hero logo has to give way to the headline, but the
     viewer bar can still carry a decent logo since it only costs bar height.
     The .site-head padding above also matches .viewer__head (same element,
     both classes, equal specificity, later wins) and would put the bar's
     fat padding back — so restate it here, tight, after that rule. */
  .viewer__head { padding: 9px 24px; }
  .brand__logo { width: 210px; }
  .viewer__head .brand__logo { width: 168px; }
  .hero__content {
    top: auto; bottom: 34px; transform: none;
    left: 34px; right: 34px; max-width: 620px;
  }
  .eyebrow { font-size: 12px; letter-spacing: 3px; }
  .hero__title { font-size: 34px; line-height: 1.05; margin-top: 10px; }
  .rule { margin: 14px 0 12px; }
  .hero__desc { font-size: 14px; line-height: 1.5; max-width: 460px; }
  .btn-primary { padding: 14px 26px; margin-top: 18px; }
  .scroll-hint { display: none; }
  .chooser__inner { padding-top: 110px; }
  .floors { padding: 12px 10px; max-height: 60vh; }
  .floors__list { gap: 4px; }
  .floor { padding: 8px; }
  .floor__num { font-size: 16px; }
  .compass { top: 100px; }
  .pano-loading--subtle { top: 86px; }
}
@media (max-height: 620px) {
  .eyebrow { display: none; }
  .hero__title { font-size: 26px; margin-top: 6px; }
  .hero__desc { font-size: 13px; line-height: 1.45; }
  .btn-primary { padding: 12px 22px; margin-top: 14px; font-size: 13px; }
  .compass { display: none; }
}

/* =====================================================================
   MOBILE — rotate to landscape prompt
   ===================================================================== */
.rotate-note { display: none; }
@media (max-width: 900px) and (orientation: portrait) {
  .rotate-note {
    display: flex;
    position: fixed; inset: 0;
    z-index: 9998;
    flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    gap: 18px;
    padding: 32px;
    background: var(--navy);
    color: #fff;
  }
  .rotate-note__icon {
    width: 66px; height: 66px;
    color: var(--gold);
    animation: rotate-hint 2.2s ease-in-out infinite;
  }
  .rotate-note__title {
    font-family: var(--serif);
    font-size: 26px; font-weight: 600;
    letter-spacing: 1px;
  }
  .rotate-note__sub {
    font-family: var(--sans);
    font-size: 14px; font-weight: 400;
    letter-spacing: 2px;
    opacity: 0.75;
    max-width: 320px;
    line-height: 1.6;
  }
}
@keyframes rotate-hint {
  0%, 40%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}

/* =====================================================================
   SG VILLA — square emblem logo
   The shared theme sizes .brand__logo by WIDTH, tuned for the wide Samira
   lockup (ratio ~3.2). This emblem is square (~1:1), so size it by HEIGHT
   instead and let width follow. Appended last so it wins the cascade.
   ===================================================================== */
.brand__logo { width: auto; height: 66px; }
.viewer__head .brand__logo { width: auto; height: 52px; }
@media (max-width: 1180px) {
  .brand__logo { width: auto; height: 60px; }
  .viewer__head .brand__logo { width: auto; height: 48px; }
}
@media (max-width: 900px) {
  .brand__logo { width: auto; height: 52px; }
  .viewer__head .brand__logo { width: auto; height: 44px; }
}