/* ============================================================
   landing.css  — shared styles for all non-home pages
   Covers: CSS variables, body base, grain texture,
           slide-down menu, topbar, footer, pills, burger,
           basket icon, page-header pattern, responsive rules.
   Loaded by: discover, retail_catalogue, sell, verticals,
              and any future page that extends base_landing.html

   The cellar chrome (forest masthead/footer, paper menu, oxblood
   accents) is defined HERE, natively — the old cellar-system.css
   override layer was folded in rule-by-rule on 2026-07-10 and
   retired. There is no second layer: what this file says is what
   the chrome looks like.
   ============================================================ */

:root {
  /* Type: the two-face cellar system. landing.css rules must never
     name a font family directly — always these vars. */
  --serif:            'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:             'Inter', system-ui, -apple-system, sans-serif;

  --cream:            #F7F4EE;
  --cream-dark:       #efe8d8;
  --parchment:        #F7F4EE;
  --parchment-pure:   #FCFAF6;
  --ink:              #23201C;
  --ink-soft:         #3a342c;
  --ink-faint:        #574E42;

  --burgundy:         #6E2233; /* oxblood */
  --burgundy-mid:     #551926;
  --burgundy-light:   #7d2a3c;
  --burgundy-pale:    #f3e9ec;
  --burgundy-mist:    #f7eef1;

  --gold:             #9a7d3e;
  --gold-warm:        #b89a55;
  --gold-light:       #cdb277;
  --gold-pale:        #efe8d3;
  --gold-faint:       #f3eee3;

  --muted:            #574E42;
  --muted-light:      #7B7263;
  --muted-faint:      #9a9082;

  --border:           rgba(35,32,28,0.12);
  --border-soft:      rgba(35,32,28,0.07);
  --border-gold:      rgba(110,34,51,0.16);
  --border-gold-soft: rgba(168, 130, 26, 0.10);

  --shadow-xs:    0 1px 4px rgba(19,16,12,0.05);
  --shadow-card:  0 2px 8px rgba(19,16,12,0.04), 0 8px 28px rgba(19,16,12,0.05);
  --shadow-hover: 0 12px 40px rgba(88,18,37,0.10), 0 24px 64px rgba(19,16,12,0.08);
  --shadow-modal: 0 40px 120px rgba(19,16,12,0.22), 0 8px 32px rgba(19,16,12,0.10);

  --radius-card: 14px;
  --radius-sm:   8px;
  --radius-pill: 100px; /* reserved for tag / filter chips only */

  /* canonical heading scale + storefront zoom */
  --h2-size: clamp(1.4rem, 2.2vw, 1.8rem);
  --h3-size: 1.25rem;
  --page-zoom: .75;

  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 0.2s;
  --t-mid:  0.4s;
  --t-slow: 0.65s;

  --topbar-h:      72px;
  --pageheader-h:  88px;
  --menu-h:        380px;

  --shell-max-width: 1280px;
  --shell-gutter-x: 48px;
  --shell-gutter-x-mobile: 18px;
  --page-header-rule-inset: 64px;
  --page-header-pad-y: 28px;
  --page-header-gap: 24px;
  /* Canonical page/H1 title size — used by EVERY storefront page header
     (catalogue, auction list+detail, discover, product). Change here once. */
  --page-header-title-size: clamp(1.8rem, 2.8vw, 2.35rem);
  --page-header-watermark-size: clamp(4rem, 10vw, 8rem);

  --ui-btn-min-h: 44px;
  --ui-btn-pad-y: 12px;
  --ui-btn-pad-x: 22px;
  --ui-btn-font-size: 0.76rem;
  --ui-btn-letter-spacing: 0.08em;
  --ui-btn-shadow: 0 6px 18px rgba(88,18,37,0.22);
  --ui-btn-shadow-hover: 0 10px 26px rgba(88,18,37,0.28);
  --ui-btn-secondary-bg: transparent;
  --ui-btn-secondary-color: var(--ink-soft);
  --ui-btn-secondary-border: var(--border-gold);
  --ui-btn-secondary-hover-bg: var(--burgundy-mist);
  --ui-btn-secondary-hover-color: var(--burgundy);
  --ui-btn-secondary-hover-border: var(--border);
  --ui-icon-btn-size: 40px;
  --ui-icon-btn-size-compact: 34px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Storefront zoom-out on every page that loads this file. Uniform scale =
   topbar/footer/content all shrink together, keeping chrome identical
   across pages. */
body { zoom: var(--page-zoom, 1); }

/* ── Canonical layout: ONE content width + responsive gutter ──
   Every storefront page sets its main container to
   `max-width:var(--shell-max-width); padding-inline:var(--shell-gutter-x)`
   so page edges line up as you navigate. The gutter steps down at
   the two standard breakpoints below — change it here once and the
   whole site follows. Standard breakpoints (site-wide):
     ≤1024px  tablet     ≤640px  phone */
@media (max-width: 1024px) { :root { --shell-gutter-x: 32px; } }
@media (max-width: 640px)  { :root { --shell-gutter-x: 20px; } }

/* ── Chrome palette — scoped, NOT :root ──
   These tokens are scoped to the chrome surfaces (and the cellar/account
   page bodies that adopted the same palette) so they never clobber the
   global --cream / --ink that unconverted page bodies still rely on. */
.landing-topbar,
.landing-menu,
.site-foot,
.cellar-page,
.account-page {
  --paper:#F7F4EE;
  --panel:#FCFAF6;
  --forest:#1E2A23;
  --forest-2:#27362C;
  --cream:#EFE8D8;
  --cream-dim:#C2B9A2;
  --oxblood:#6E2233;
  --oxblood-deep:#551926;
  --line:#E5DFD3;
  --line-forest:rgba(239,232,216,.16);
}

/* Base body for all landing pages */
.landing-page,
body.discover-page,
body.retail-page,
body.sell-page,
body.verticals-page {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink-soft);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Grain texture — fixed overlay on all landing pages ── */
.landing-page::before,
body.discover-page::before,
body.retail-page::before,
body.sell-page::before,
body.verticals-page::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9000; opacity: 0.55;
}

/* ══════════════════════════════════════════
   SLIDE-DOWN MENU — paper surface
   ══════════════════════════════════════════ */
/* ── Top chrome: the menu wrapper animates its pixel height (0 → measured
   --menu-h) and pushes the topbar down via normal flow. A single, explicit
   px target can't overshoot, and — unlike grid `0fr→1fr` — its size never
   diverges from the content under `body { zoom }` (which made the bar shoot
   past and snap back). --menu-h is set from the menu's real height in JS. ── */
.topchrome { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.topchrome__menu {
  height: 0; overflow: hidden;
  transition: height var(--t-slow) var(--ease-smooth);
}
body.menu-open .topchrome__menu { height: var(--menu-h); }

.landing-menu {
  background: var(--paper);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 24px 60px rgba(19,16,12,0.12);
}

.landing-menu::after {
  content: '';
  position: absolute; bottom: -1px; left: 48px; right: 48px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent 60%);
  opacity: 0.4;
}

.landing-menu__inner {
  max-width: 1280px; margin: 0 auto; padding: 28px var(--shell-gutter-x) 30px;
}

.landing-menu__header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 24px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px;
}

.landing-menu__header-logo { height: 52px; width: auto; }

.landing-menu__close {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  color: var(--oxblood); font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-mid) var(--ease-smooth);
}
.landing-menu__close:hover { background: var(--burgundy-mist); border-color: rgba(110,34,51,.3); }

.landing-menu__grid {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; padding-top: 24px;
}

.landing-menu__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* menu tiles read as cards: panel surface, oxblood left-edge on hover/active */
.landing-menu .landing-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; min-height: 58px; border-radius: var(--radius-card);
  text-decoration: none; color: var(--forest); font-family: var(--serif);
  border: 1px solid var(--line); border-left: 2px solid transparent;
  background: var(--panel);
  transition: border-color .2s ease, background .2s ease;
}
.landing-menu__link:hover {
  border-color: var(--line); border-left-color: var(--oxblood);
  background: var(--paper);
}
.landing-menu__link--active {
  background: var(--paper); border-color: var(--line);
  border-left: 2px solid var(--oxblood);
}

.landing-menu__link-label {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 400;
  letter-spacing: .005em; color: var(--forest);
}
.landing-menu__link:hover .landing-menu__link-label,
.landing-menu__link--active .landing-menu__link-label { color: var(--oxblood); }

/* arrow always hinted, slides + turns oxblood on hover/active */
.landing-menu__link-arrow {
  font-size: 1rem; color: var(--cream-dim); opacity: .38; transform: none;
  transition: opacity .2s ease, color .2s ease, transform .2s ease;
}
.landing-menu__link:hover .landing-menu__link-arrow,
.landing-menu__link--active .landing-menu__link-arrow {
  opacity: 1; color: var(--oxblood); transform: translateX(2px);
}

/* Account section — Inter labels, Fraunces name, clean rule */
.landing-menu__account {
  border-left: 1px solid var(--line); padding-left: 48px;
  display: flex; flex-direction: column; gap: 16px;
}

.landing-menu__muted {
  font-family: var(--sans); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--muted-light, #7B7263);
}
.landing-menu__whoLine { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.landing-menu__whoName { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--forest); }

.landing-menu__actions { display: flex; flex-direction: column; gap: 8px; }

/* Cart link in menu */
.landing-menu .landing-menu__basket-link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; gap: 8px;
  min-height: var(--ui-btn-min-h); padding: 0 16px;
  border: 1px solid rgba(35,32,28,0.22); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--forest);
  text-decoration: none;
  font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.05em;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.landing-menu .landing-menu__basket-link:hover {
  border-color: var(--oxblood); color: var(--oxblood); background: var(--paper);
  transform: translateY(-1px);
}

.landing-menu__basket-count {
  position: absolute;
  right: 16px;
  margin-left: 0;
  background: var(--oxblood);
  color: var(--cream);
  font-size: 0.60rem;
  font-weight: 500;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
}
.landing-menu__basket-count.is-hidden { display: none; }
.landing-menu__basket-icon { flex-shrink: 0; color: var(--muted); }

.landing-menu__tagline {
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line);
}
.landing-menu__tagline-text {
  font-family: var(--serif); font-style: italic;
  font-size: 0.95rem; color: var(--taupe, #574E42); font-weight: 300;
}

/* Pills (only used inside the menu — container-prefixed, see nav-link note) */
.landing-menu .landing-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 24px; border-radius: var(--radius-sm);
  text-decoration: none; font-family: var(--sans); font-size: 0.76rem;
  letter-spacing: 0.05em; border: 1px solid rgba(35,32,28,0.22);
  background: var(--panel); color: var(--forest);
  transition: all var(--t-mid) var(--ease-smooth);
}
.landing-menu .landing-pill:hover { border-color: var(--oxblood); color: var(--oxblood); background: var(--paper); transform: translateY(-1px); }
.landing-menu .landing-pill--primary { background: var(--oxblood); border-color: var(--oxblood); color: var(--cream); box-shadow: 0 4px 16px rgba(88,18,37,0.18); }
.landing-menu .landing-pill--primary:hover { background: var(--oxblood-deep); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(88,18,37,0.24); }
.landing-menu .landing-pill--quiet { background: transparent; color: var(--muted); }

/* ══════════════════════════════════════════
   TOP BAR — forest bookend
   ══════════════════════════════════════════ */
.landing-topbar {
  position: relative;   /* flows inside .topchrome, directly below the menu */
  height: var(--topbar-h);
  background: var(--forest);
  border-bottom: 1px solid var(--line-forest);
  box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 6px 24px rgba(20,28,23,.12);
}

.landing-topbar::after {
  content: '';
  position: absolute; bottom: -1px; left: 64px; right: 64px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-forest), transparent);
  opacity: 1;
}

.landing-topbar__inner {
  height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--shell-gutter-x);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
}

.landing-topbar__nav { display: flex; align-items: center; gap: 2px; }

/* Container-prefixed: page stylesheets carry generic link resets like
   `.cellar-page a { color: inherit }` that would otherwise out-specify the
   chrome (this is what the retired !important layer was papering over). */
.landing-topbar .landing-topbar__nav-link {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 12px;
  font-family: var(--sans); font-size: 0.70rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; color: var(--cream-dim);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: all var(--t-mid) var(--ease-smooth);
}
.landing-topbar .landing-topbar__nav-link:hover { color: #fff; background: rgba(239,232,216,.08); }
.landing-topbar .landing-topbar__nav-link--active {
  color: var(--cream); background: transparent; position: relative;
}
.landing-topbar__nav-link--active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; background: var(--oxblood);
}

/* brand logo: invert the dark mark to read on forest */
.landing-topbar__brand { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.landing-topbar__logo {
  height: 52px; width: auto; display: block;
  filter: brightness(0) invert(1); opacity: .92;
  transition: opacity var(--t-mid);
}
.landing-topbar__brand:hover .landing-topbar__logo { opacity: 0.82; }

/* right-hand utilities — every control is exactly 40px tall, same hover */
.landing-topbar__right {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  color: var(--cream);
}
.landing-topbar .landing-topbar__notify,
.landing-topbar .landing-topbar__basket,
.landing-topbar .landing-topbar__account-link,
.landing-topbar .landing-burger {
  position: relative; box-sizing: border-box;
  height: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream); background: none; border: none;
  border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
/* icon-only controls are square; account link grows for its label */
.landing-topbar__notify,
.landing-topbar__basket,
.landing-burger { width: 40px; padding: 0; }
.landing-topbar__account-link { width: auto; padding: 0 12px; }
.landing-topbar .landing-topbar__notify:hover,
.landing-topbar .landing-topbar__basket:hover,
.landing-topbar .landing-topbar__account-link:hover,
.landing-topbar .landing-burger:hover { background: rgba(239,232,216,.10); color: #fff; }
.landing-topbar .util-ico { width: 18px; height: 18px; stroke: currentColor; fill: none; flex: none; }
.landing-topbar__basket-icon { display: block; flex-shrink: 0; width: 18px; height: 18px; stroke: currentColor; fill: none; }

/* the notify bell replaces the old dot + "Notifications" text label */
.landing-topbar__notify-dot,
.landing-topbar__notify-label { display: none; }
.landing-topbar__account-label { font-weight: 500; }

/* count badges */
.landing-topbar__basket-count,
.landing-topbar__notify-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--oxblood); color: #fff;
  font-family: var(--sans); font-size: 9px; font-weight: 600; line-height: 1;
  letter-spacing: 0; border-radius: 9px; border: 1.5px solid var(--forest);
}
.landing-topbar__basket-count.is-hidden,
.landing-topbar__notify-count.is-hidden { display: none; }

/* Burger */
.landing-burger__lines { width: 16px; height: 12px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.landing-burger__lines span { display: block; height: 1.5px; border-radius: 2px; background: var(--cream); transition: width var(--t-mid) var(--ease-smooth); }
.landing-burger__lines span:nth-child(1) { width: 100%; }
.landing-burger__lines span:nth-child(2) { width: 72%; }
.landing-burger__lines span:nth-child(3) { width: 44%; }
.landing-burger:hover .landing-burger__lines span { background: #fff; }
.landing-burger:hover .landing-burger__lines span:nth-child(2) { width: 100%; }
.landing-burger:hover .landing-burger__lines span:nth-child(3) { width: 72%; }

/* ══════════════════════════════════════════
   SHARED PAGE HEADER PATTERN
   (both .dv-pageHeader and .rc-pageHeader use the same
   margin-top trick — defined here so it works in both)
   ══════════════════════════════════════════ */
.landing-pageheader-base {
  position: relative;
  margin-top: var(--topbar-h);     /* sits flush under the fixed topbar */
  background: var(--parchment-pure);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.landing-pageheader-base::after {
  content: '';
  position: absolute; bottom: -1px; left: var(--page-header-rule-inset); right: var(--page-header-rule-inset);
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent 60%);
  opacity: 0.45;
}

/* ══════════════════════════════════════════
   FOOTER — forest bookend with hero + columns
   (markup in _footer.html, class .site-foot)
   ══════════════════════════════════════════ */
.site-foot { background: var(--forest); color: var(--cream); font-family: var(--sans); }
.site-foot a { color: inherit; text-decoration: none; }
.site-foot__wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--shell-gutter-x); }

.site-foot__hero { border-bottom: 1px solid var(--line-forest); }
.site-foot__hero .site-foot__wrap {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 48px; flex-wrap: wrap; padding-top: 64px; padding-bottom: 64px;
}
.site-foot__hero h2 {
  font-family: var(--serif); font-weight: 400; font-size: 31px; line-height: 1.08;
  letter-spacing: -.01em; max-width: 16ch; color: var(--cream);
}
.site-foot__hero p { margin-top: 16px; color: var(--cream-dim); font-size: 14px; max-width: 42ch; line-height: 1.6; }
.site-foot__hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.site-foot__btn {
  display: inline-flex; align-items: center; font-family: var(--sans); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cream); white-space: nowrap;
  padding: 13px 22px; border: 1px solid var(--cream); border-radius: var(--radius-sm, 4px);
  transition: background .2s, color .2s, border-color .2s;
}
.site-foot__btn:hover { border-color: #E0A4AE; color: #E0A4AE; }
.site-foot__btn--primary { background: var(--oxblood); border-color: var(--oxblood); color: var(--cream); }
.site-foot__btn--primary:hover { background: #8a2a3d; border-color: #8a2a3d; color: var(--cream); }

.site-foot__cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px;
  padding: 64px var(--shell-gutter-x) 48px; max-width: 1280px; margin: 0 auto;
}
.site-foot__col h2,
.site-foot__col h4 { font-weight: 600; margin-top: 0; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 16px; }
.site-foot__col a { display: block; font-size: 14px; color: var(--cream); padding: 6px 0; transition: color .2s; opacity: .85; }
.site-foot__col a:hover { opacity: 1; color: #E0A4AE; }
.site-foot__wordmark { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--cream); margin-bottom: 16px; }
.site-foot__wordmark .dot { color: var(--oxblood); }
.site-foot__about { font-size: 13px; color: var(--cream-dim); line-height: 1.65; max-width: 30ch; }
.site-foot__legal { border-top: 1px solid var(--line-forest); }
.site-foot__legal .site-foot__wrap {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; padding: 24px 48px;
}
.site-foot__legal p { font-size: 12px; letter-spacing: .03em; color: var(--cream-dim); }

/* ══════════════════════════════════════════
   SHARED RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .landing-menu__inner,
  .landing-topbar__inner { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 920px) { .landing-topbar__account-label { display: none; } }

@media (max-width: 760px) {
  .landing-menu__grid { grid-template-columns: 1fr; }
  .landing-menu__account { border-left: none; padding-left: 0; border-top: 1px solid var(--border-soft); padding-top: 20px; }
  .landing-menu__nav { grid-template-columns: 1fr; }
  .landing-topbar__nav { display: none; }
  .landing-topbar__inner { grid-template-columns: 1fr auto; padding: 0 18px; }
  /* account icon stays on mobile (only its ≤920px text label hides) — the
     cellar chrome deliberately kept it; the old display:none here predated
     the redesign and was being defeated by the override layer. */

  .site-foot__cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 48px 24px 40px; }
  .site-foot__brandcol { grid-column: 1 / -1; }
  .site-foot__hero .site-foot__wrap { flex-direction: column; align-items: flex-start; gap: 24px; padding-left: 24px; padding-right: 24px; }
  .site-foot__hero-cta { width: 100%; }
  .site-foot__wrap { padding-left: 24px; padding-right: 24px; }
  .site-foot__legal .site-foot__wrap { padding-left: 24px; padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-menu,
  .landing-topbar { transition: none !important; animation: none !important; }
}