/* =========================================================
   FINAL REFERENCE OVERRIDES
   Matches the supplied hero/nav screenshot as closely as
   possible while keeping the site responsive.
   ========================================================= */

:root{
  --reference-navy:#0b1320;
}

/* Same horizontal content rhythm for header and body */
.container{
  width:min(1440px, calc(100% - 96px)) !important;
  max-width:1440px !important;
  margin-inline:auto !important;
}

/* Transparent navbar sitting directly over the hero */
html body > header.site-header#top{
  position:absolute !important;
  inset:0 0 auto 0 !important;
  width:100% !important;
  height:auto !important;
  z-index:1000 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html body > header.site-header#top .nav-wrap{
  width:min(1440px, calc(100% - 96px)) !important;
  max-width:1440px !important;
  min-height:82px !important;
  margin-inline:auto !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:235px minmax(0,1fr) 178px !important;
  align-items:center !important;
  gap:34px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

html body > header.site-header#top .brand-image{
  min-width:0 !important;
  background:transparent !important;
}
html body > header.site-header#top .brand-image img{
  width:215px !important;
  max-width:100% !important;
  height:auto !important;
  display:block !important;
}

html body > header.site-header#top .main-nav{
  min-width:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:29px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html body > header.site-header#top .main-nav a{
  padding:30px 0 23px !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:#fff !important;
  opacity:.9 !important;
  white-space:nowrap !important;
  text-shadow:0 1px 8px rgba(0,0,0,.5) !important;
}
html body > header.site-header#top .main-nav a::after{
  bottom:16px !important;
  height:2px !important;
  background:#e99a18 !important;
}

html body > header.site-header#top .nav-cta{
  width:178px !important;
  justify-self:end !important;
  gap:6px !important;
  background:transparent !important;
}
html body > header.site-header#top .nav-cta .btn{
  width:178px !important;
  min-height:48px !important;
  padding:11px 18px !important;
  border-radius:5px !important;
  font-size:14px !important;
  box-shadow:0 7px 18px rgba(0,0,0,.24) !important;
}
html body > header.site-header#top .nav-cta small{
  font-size:10px !important;
  line-height:1.1 !important;
  color:#fff !important;
}

/* Hero dimensions and full-width background */
html body main > .hero#overview{
  position:relative !important;
  width:100% !important;
  height:620px !important;
  min-height:620px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  isolation:isolate !important;
  color:#fff !important;
  background:
    url("assets/hero-user-bg.png")
    center center / cover no-repeat
    var(--reference-navy) !important;
}

/* Strong navy/blue transition on the left, fading over the image */
html body main > .hero#overview::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(
      90deg,
      rgba(11,19,32,1) 0%,
      rgba(11,19,32,1) 23%,
      rgba(11,19,32,.98) 31%,
      rgba(11,19,32,.92) 39%,
      rgba(11,19,32,.76) 47%,
      rgba(11,19,32,.50) 55%,
      rgba(11,19,32,.25) 62%,
      rgba(11,19,32,.08) 69%,
      rgba(11,19,32,0) 76%,
      rgba(11,19,32,0) 100%
    ) !important;
}

/* Very subtle overall dark atmosphere like the screenshot */
html body main > .hero#overview::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg,rgba(4,10,18,.10),rgba(4,10,18,.02) 55%,rgba(2,7,13,.18)),
    linear-gradient(0deg,rgba(2,8,14,.18),rgba(2,8,14,0) 35%) !important;
}

html body main > .hero#overview .hero-glow,
html body main > .hero#overview .house-frame{
  display:none !important;
}

html body main > .hero#overview .hero-grid{
  width:min(1440px, calc(100% - 96px)) !important;
  max-width:1440px !important;
  height:620px !important;
  min-height:620px !important;
  margin-inline:auto !important;
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:42% 58% !important;
  align-items:stretch !important;
}

/* Hero copy */
html body main > .hero#overview .hero-copy{
  align-self:center !important;
  width:100% !important;
  max-width:540px !important;
  padding:90px 0 30px !important;
}
html body main > .hero#overview .hero-copy > .eyebrow{
  display:none !important;
}
html body main > .hero#overview h1{
  max-width:540px !important;
  margin:0 0 18px !important;
  font-size:50px !important;
  line-height:.92 !important;
  letter-spacing:-.035em !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}
html body main > .hero#overview h1 span{
  color:#ef9d18 !important;
}
html body main > .hero#overview .hero-lead{
  width:100% !important;
  max-width:500px !important;
  margin:0 0 12px !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color:rgba(255,255,255,.94) !important;
}
html body main > .hero#overview .hero-strong{
  margin:0 0 20px !important;
  font-size:14px !important;
  font-weight:800 !important;
}
html body main > .hero#overview .hero-benefits{
  width:100% !important;
  max-width:510px !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:18px !important;
}
html body main > .hero#overview .benefit{
  gap:8px !important;
  font-size:10px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
}
html body main > .hero#overview .benefit .icon{
  width:31px !important;
  height:31px !important;
  color:#e99a18 !important;
}

/* Right-side membership card */
html body main > .hero#overview .hero-visual{
  position:relative !important;
  min-height:620px !important;
}
html body main > .hero#overview .seat-card{
  display:block !important;
  position:absolute !important;
  top:130px !important;
  right:0 !important;
  width:270px !important;
  padding:19px 20px 18px !important;
  border:1px solid #d88a12 !important;
  border-radius:9px !important;
  background:rgba(4,15,25,.84) !important;
  box-shadow:none !important;
  text-align:center !important;
}
html body main > .hero#overview .seat-card > span{
  font-size:11px !important;
  color:#f1a01b !important;
}
html body main > .hero#overview .seat-card strong{
  margin-top:7px !important;
  font-size:58px !important;
  line-height:1 !important;
}
html body main > .hero#overview .seat-card h3{
  margin:4px 0 14px !important;
  font-size:14px !important;
}
html body main > .hero#overview .seat-card p{
  font-size:11px !important;
}

/* Tablet/mobile keep the existing collapsible menu behavior */
@media (max-width:1050px){
  .container{
    width:min(100% - 48px, 940px) !important;
  }

  html body > header.site-header#top .nav-wrap{
    width:min(100% - 48px, 940px) !important;
    grid-template-columns:205px minmax(0,1fr) 150px !important;
    gap:20px !important;
  }

  html body > header.site-header#top .brand-image img{
    width:190px !important;
  }

  html body > header.site-header#top .main-nav{
    gap:18px !important;
  }

  html body > header.site-header#top .main-nav a{
    font-size:9px !important;
  }

  html body > header.site-header#top .nav-cta,
  html body > header.site-header#top .nav-cta .btn{
    width:150px !important;
  }

  html body main > .hero#overview .hero-grid{
    width:min(100% - 48px, 940px) !important;
  }

  html body main > .hero#overview h1{
    font-size:44px !important;
  }

  html body main > .hero#overview .seat-card{
    width:225px !important;
  }
}

@media (max-width:860px){
  html body > header.site-header#top .nav-wrap{
    width:min(100% - 30px, 760px) !important;
    grid-template-columns:1fr auto auto !important;
    min-height:68px !important;
  }

  html body > header.site-header#top .main-nav{
    position:absolute !important;
    top:68px !important;
    left:0 !important;
    right:0 !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:8px 18px 18px !important;
  }

  html body > header.site-header#top .main-nav.open{
    display:flex !important;
    background:#0b1320 !important;
  }

  html body main > .hero#overview{
    height:auto !important;
    min-height:720px !important;
    background-position:61% center !important;
  }

  html body main > .hero#overview .hero-grid{
    width:min(100% - 30px, 760px) !important;
    height:auto !important;
    min-height:720px !important;
    grid-template-columns:1fr !important;
  }

  html body main > .hero#overview .hero-copy{
    max-width:560px !important;
    padding-top:102px !important;
  }

  html body main > .hero#overview .hero-visual{
    min-height:260px !important;
  }

  html body main > .hero#overview .seat-card{
    top:30px !important;
    right:10px !important;
    width:185px !important;
  }
}

@media (max-width:620px){
  .container{
    width:calc(100% - 30px) !important;
  }

  html body main > .hero#overview h1{
    font-size:39px !important;
  }

  html body main > .hero#overview .hero-benefits{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* Hero heading vertical position only — restore centered placement */
html body main > .hero#overview .hero-copy{
  align-self:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}


/* =========================================================
   NAVBAR FIX — fully transparent and sitting on the hero
   Only navbar-related styles are changed below.
   ========================================================= */

/* The header is inside the hero, so target that exact structure. */
html body main > .hero#overview > header.site-header#top{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:auto !important;
  width:100% !important;
  z-index:100 !important;

  background:transparent !important;
  background-color:rgba(0,0,0,0) !important;
  background-image:none !important;

  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Remove any generated strip/layer behind the navbar. */
html body main > .hero#overview > header.site-header#top::before,
html body main > .hero#overview > header.site-header#top::after,
html body main > .hero#overview > header.site-header#top .nav-wrap::before,
html body main > .hero#overview > header.site-header#top .nav-wrap::after{
  content:none !important;
  display:none !important;
}

/* Keep navbar aligned with the same 1440px page content width. */
html body main > .hero#overview > header.site-header#top .nav-wrap{
  width:min(1440px, calc(100% - 96px)) !important;
  max-width:1440px !important;
  margin:0 auto !important;

  background:transparent !important;
  background-color:rgba(0,0,0,0) !important;
  background-image:none !important;

  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* No background on navbar children either. */
html body main > .hero#overview > header.site-header#top .brand,
html body main > .hero#overview > header.site-header#top .brand-image,
html body main > .hero#overview > header.site-header#top .main-nav,
html body main > .hero#overview > header.site-header#top .nav-cta{
  background:transparent !important;
  background-color:rgba(0,0,0,0) !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Mobile menu only gets a solid background after it is opened. */
@media (max-width:860px){
  html body main > .hero#overview > header.site-header#top .nav-wrap{
    width:min(100% - 30px, 760px) !important;
  }

  html body main > .hero#overview > header.site-header#top .main-nav{
    background:transparent !important;
  }

  html body main > .hero#overview > header.site-header#top .main-nav.open{
    background:#0b1320 !important;
  }
}


/* =========================================================
   FINAL NAVBAR: NO VISIBLE BACKGROUND AT ALL
   Header sits as a pure overlay inside the hero.
   ========================================================= */
.hero#overview{
  position:relative !important;
}

.hero#overview > header.site-header#top{
  position:absolute !important;
  inset:0 0 auto 0 !important;
  width:100% !important;
  z-index:1000 !important;
  isolation:auto !important;

  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  background-blend-mode:normal !important;

  border:none !important;
  outline:none !important;
  box-shadow:none !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
  opacity:1 !important;
}

/* Kill every possible decorative/header layer. */
.hero#overview > header.site-header#top::before,
.hero#overview > header.site-header#top::after,
.hero#overview > header.site-header#top .nav-wrap::before,
.hero#overview > header.site-header#top .nav-wrap::after{
  content:none !important;
  display:none !important;
}

/* Same width as the hero/body content, but completely unpainted. */
.hero#overview > header.site-header#top .nav-wrap{
  width:min(1440px, calc(100% - 96px)) !important;
  max-width:1440px !important;
  margin:0 auto !important;
  padding:0 !important;

  background:none !important;
  background-color:transparent !important;
  background-image:none !important;

  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}

/* All navbar structural children are also unpainted. */
.hero#overview > header.site-header#top .brand,
.hero#overview > header.site-header#top .brand-image,
.hero#overview > header.site-header#top .main-nav,
.hero#overview > header.site-header#top .nav-cta{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}

/* Restored user logo. */
.hero#overview > header.site-header#top .brand-image img{
  width:215px !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* Only the orange Apply Now button itself has a painted surface. */
.hero#overview > header.site-header#top .nav-cta .btn{
  background:linear-gradient(180deg,#f0a52d,#c97805) !important;
}

/* Mobile dropdown remains transparent until it is intentionally opened. */
@media (max-width:860px){
  .hero#overview > header.site-header#top .nav-wrap{
    width:min(100% - 30px,760px) !important;
  }

  .hero#overview > header.site-header#top .main-nav{
    background:none !important;
    background-color:transparent !important;
  }

  .hero#overview > header.site-header#top .main-nav.open{
    background:#0b1320 !important;
  }
}


/* =========================================================
   HERO OVERLAY FLOW FIX
   Removes the visual "navbar strip" by making the hero
   gradient continuous from the top edge of the banner.
   Navbar styles are intentionally untouched.
   ========================================================= */

/* Keep the same hero image, but make the overlay feel like one
   continuous banner rather than a dark horizontal header band. */
html body main > .hero#overview::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;

  background:
    linear-gradient(
      90deg,
      rgba(11,19,32,.97) 0%,
      rgba(11,19,32,.96) 20%,
      rgba(11,19,32,.90) 31%,
      rgba(11,19,32,.78) 41%,
      rgba(11,19,32,.58) 51%,
      rgba(11,19,32,.34) 61%,
      rgba(11,19,32,.15) 69%,
      rgba(11,19,32,.04) 75%,
      rgba(11,19,32,0) 82%,
      rgba(11,19,32,0) 100%
    ) !important;
}

/* Remove any full-height top-to-bottom dark veil.
   Keep only a subtle bottom vignette so the very top of the hero
   remains visually continuous behind the transparent navbar. */
html body main > .hero#overview::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:0 !important;
  height:110px !important;
  z-index:1 !important;
  pointer-events:none !important;

  background:
    linear-gradient(
      0deg,
      rgba(2,8,15,.26) 0%,
      rgba(2,8,15,.12) 46%,
      rgba(2,8,15,0) 100%
    ) !important;
}

/* Make sure the hero image itself begins at the true top edge,
   directly underneath the transparent navbar. */
html body main > .hero#overview{
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}


/* =========================================================
   HERO LEFT CONTENT POSITION ONLY
   Keeps the approved hero/nav treatment unchanged.
   Vertically centers the left content between:
   - 50px below the navbar
   - 50px above the bottom of the hero
   ========================================================= */
html body main > .hero#overview .hero-copy{
  align-self:stretch !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  /* Navbar is 82px high + 50px requested gap */
  padding-top:132px !important;
  padding-bottom:50px !important;

  /* Preserve the existing horizontal alignment */
  text-align:left !important;
}

/* Keep mobile spacing practical without changing the rest of the hero */
@media (max-width:860px){
  html body main > .hero#overview .hero-copy{
    padding-top:118px !important;
    padding-bottom:50px !important;
  }
}


/* =========================================================
   HERO MEMBERSHIP BOX POSITION ONLY
   Move the Exclusive Membership box down so its bottom border
   aligns with the bottom of the icon row on desktop.
   Nothing else in the site is changed.
   ========================================================= */
html body main > .hero#overview .seat-card{
  top:auto !important;
  bottom:72px !important;
  right:0 !important;
}

/* Keep mobile/tablet behavior as-is */
@media (max-width:860px){
  html body main > .hero#overview .seat-card{
    top:30px !important;
    bottom:auto !important;
    right:10px !important;
  }
}

@media (max-width:620px){
  html body main > .hero#overview .seat-card{
    top:74px !important;
    bottom:auto !important;
    right:10px !important;
  }
}


/* =========================================================
   ACCELERATOR FEATURE ALIGNMENT ONLY
   Align all icons, headings, and descriptions from the top
   so each column looks uniform.
   ========================================================= */
html body main .accelerator .accelerator-feature{
  justify-content:flex-start !important;
  align-items:center !important;
  padding-top:26px !important;
}

/* Give every icon the exact same reserved space */
html body main .accelerator .accelerator-feature .big-icon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  flex:0 0 44px !important;
  margin:0 0 10px !important;
  display:grid !important;
  place-items:center !important;
}

/* Keep all titles beginning at the same vertical position */
html body main .accelerator .accelerator-feature strong{
  min-height:16px !important;
  margin:0 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}

/* Keep description spacing consistent below each title */
html body main .accelerator .accelerator-feature p{
  margin:6px 0 0 !important;
}


/* =========================================================
   MONTHLY DROP CARD ONLY
   - Uses the same house image as the hero banner
   - Counter styled to match the supplied reference
   - Counter bottom aligns with the View Upcoming Deals button
   ========================================================= */

html body main #properties .drop-card{
  position:relative !important;
  min-height:210px !important;
  overflow:hidden !important;
  border-radius:10px !important;
  color:#fff !important;

  /* Same background photo used in the hero banner */
  background:
    linear-gradient(
      90deg,
      rgba(4,15,25,.98) 0%,
      rgba(4,15,25,.90) 42%,
      rgba(4,15,25,.55) 67%,
      rgba(4,15,25,.28) 100%
    ),
    url("assets/hero-user-bg.png") center center / cover no-repeat !important;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:end !important;
  gap:24px !important;
  padding:16px 16px 15px !important;
}

/* Hide the old separate image and overlay because the card now uses
   the hero image directly as its background. */
html body main #properties .drop-card > img,
html body main #properties .drop-card > .drop-overlay{
  display:none !important;
}

/* Left content */
html body main #properties .drop-copy{
  position:relative !important;
  z-index:2 !important;
  width:auto !important;
  max-width:500px !important;
  min-height:178px !important;
  padding:0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

html body main #properties .drop-copy .eyebrow{
  margin:0 0 8px !important;
  color:#f0a21b !important;
  font-size:12px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
}

html body main #properties .drop-copy h2{
  margin:0 0 10px !important;
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
}

html body main #properties .drop-copy p{
  margin:0 0 8px !important;
  font-size:11px !important;
  line-height:1.35 !important;
}

/* Push the button to the bottom so its bottom edge matches the counter. */
html body main #properties .drop-copy .btn{
  margin-top:auto !important;
  min-height:38px !important;
  padding:10px 16px !important;
  display:inline-flex !important;
  align-items:center !important;
}

/* Counter — reference styling */
html body main #properties .countdown{
  position:relative !important;
  inset:auto !important;
  z-index:3 !important;

  align-self:end !important;
  margin:0 !important;

  display:grid !important;
  grid-template-columns:repeat(4,58px) !important;

  background:rgba(2,14,23,.90) !important;
  border:1px solid #e29412 !important;
  border-radius:9px !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

/* Four equal counter cells */
html body main #properties .countdown span{
  min-width:58px !important;
  width:58px !important;
  height:66px !important;
  padding:8px 4px 7px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;

  text-align:center !important;
  border-right:1px solid rgba(226,148,18,.55) !important;
}

html body main #properties .countdown span:last-child{
  border-right:0 !important;
}

html body main #properties .countdown b{
  display:block !important;
  margin:0 0 7px !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

html body main #properties .countdown small{
  display:block !important;
  color:#fff !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
}

/* Tablet/mobile only: stack naturally without changing other sections */
@media (max-width:760px){
  html body main #properties .drop-card{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }

  html body main #properties .drop-copy{
    min-height:auto !important;
  }

  html body main #properties .drop-copy .btn{
    margin-top:10px !important;
  }

  html body main #properties .countdown{
    justify-self:start !important;
    margin-top:8px !important;
  }
}


/* Footer logo only */
.site-footer .footer-brand-image img{
  width:220px !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}


/* =========================================================
   NAVBAR ALIGNMENT ONLY
   Keep logo, navigation, and CTA on one horizontally aligned
   row with a shared vertical center.
   ========================================================= */
.hero#overview > header.site-header#top .nav-wrap{
  display:grid !important;
  grid-template-columns:215px minmax(0,1fr) 178px !important;
  align-items:center !important;
  min-height:82px !important;
}

/* Left logo */
.hero#overview > header.site-header#top .brand-image{
  align-self:center !important;
  justify-self:start !important;
  display:flex !important;
  align-items:center !important;
  height:82px !important;
}

/* Center navigation */
.hero#overview > header.site-header#top .main-nav{
  align-self:center !important;
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:82px !important;
  padding:0 !important;
}

/* Remove unequal vertical padding from links so they center perfectly */
.hero#overview > header.site-header#top .main-nav a{
  display:flex !important;
  align-items:center !important;
  height:82px !important;
  padding:0 !important;
}

/* Keep active underline in the same visual position */
.hero#overview > header.site-header#top .main-nav a::after{
  bottom:16px !important;
}

/* Right CTA */
.hero#overview > header.site-header#top .nav-cta{
  align-self:center !important;
  justify-self:end !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  height:82px !important;
}

/* Mobile keeps its existing responsive layout */
@media (max-width:860px){
  .hero#overview > header.site-header#top .nav-wrap{
    grid-template-columns:1fr auto auto !important;
    min-height:68px !important;
  }

  .hero#overview > header.site-header#top .brand-image,
  .hero#overview > header.site-header#top .nav-cta{
    height:68px !important;
  }

  .hero#overview > header.site-header#top .main-nav{
    height:auto !important;
  }

  .hero#overview > header.site-header#top .main-nav a{
    height:auto !important;
    padding:12px 0 !important;
  }
}


/* =========================================================
   MEMBERSHIP + HOW IT WORKS SECTION SPACING ONLY
   50px top and bottom padding on both sections.
   ========================================================= */
html body main > section.membership{
  padding-top:50px !important;
  padding-bottom:50px !important;
}

html body main > section.process{
  padding-top:50px !important;
  padding-bottom:50px !important;
}


/* =========================================================
   ACCELERATOR + PROPERTIES SECTION SPACING ONLY
   Add 50px top and bottom padding to both attached sections.
   ========================================================= */
html body main > section.accelerator{
  padding-top:50px !important;
  padding-bottom:50px !important;
}

html body main > section#properties{
  padding-top:50px !important;
  padding-bottom:50px !important;
}


/* =========================================================
   NAVIGATION — 6-ITEM MENU FIT
   Added for Why 10K Club / How It Works / Concierge ordering.
   ========================================================= */
@media (min-width:861px) and (max-width:1180px){
  .hero#overview > header.site-header#top .nav-wrap{
    grid-template-columns:190px minmax(0,1fr) 155px !important;
    column-gap:14px !important;
  }
  .hero#overview > header.site-header#top .brand-image img{
    width:190px !important;
  }
  .hero#overview > header.site-header#top .main-nav{
    gap:14px !important;
  }
  .hero#overview > header.site-header#top .main-nav a{
    font-size:9.5px !important;
    letter-spacing:.015em !important;
  }
  .hero#overview > header.site-header#top .nav-cta,
  .hero#overview > header.site-header#top .nav-cta .btn{
    width:155px !important;
  }
}