html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
  body { margin: 0; background: #000; color: #fff; font-family: 'Manrope', sans-serif; overflow-x: clip; }
  * { box-sizing: border-box; }
  a { color: #3590DD; text-decoration: none; }
  a:hover { color: #8fc3f0; }
  img, video { display: block; max-width: 100%; }
  ::selection { background: rgba(53,144,221,.35); }
  @keyframes elv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  /* two identical keyframes so alternating the name per page restarts the run */
  @keyframes elv-fadeup-a { from { opacity: 0; transform: translate3d(0,7px,0); } to { opacity: 1; transform: none; } }
  @keyframes elv-fadeup-b { from { opacity: 0; transform: translate3d(0,7px,0); } to { opacity: 1; transform: none; } }
  @keyframes elv-spin { to { transform: rotate(360deg); } }
  @keyframes elv-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes elv-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
  @keyframes elv-orbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
  [data-mb] { position: relative; isolation: isolate; overflow: hidden; background: #050505 !important; color: #fff !important; border: 1px solid rgba(184,184,184,.25) !important; transition: border-color .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1), color .28s cubic-bezier(.22,1,.36,1); }
  [data-mb]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; transform: translate(-50%,-50%); background: conic-gradient(from 0deg, transparent 0 64%, rgba(53,144,221,.35) 74%, #3590DD 82%, #cfe6fa 86%, transparent 94%); animation: elv-orbit 3s linear infinite; z-index: -2; }
  [data-mb]::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: #050505; z-index: -1; transition: background .28s cubic-bezier(.22,1,.36,1); }
  /* #0b0b0b was a 2% lift off #050505 — invisible. This reads as a real state
     without lighting the button up, and the border ring carries the rest. */
  [data-mb]:hover::after { background: #121a22; }
  [data-mb]:hover { border-color: rgba(53,144,221,.55) !important; }
  @media (prefers-reduced-motion: reduce) { [data-mb]::before { animation: none; } }
  @keyframes elv-rise { from { transform: translateY(105%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes elv-bob { 0%,100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(7px); opacity: 1; } }
  @keyframes elv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  [data-menucta]:hover [data-ctaarrow] { transform: translateX(6px); }
  /* press feedback via brightness, not transform: several of these buttons
     carry their own rotate/scale that a transform here would clobber */
  a:active, button:active, [role="button"]:active { filter: brightness(.88); }
  a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
  input:focus-visible, select:focus-visible {
    outline: 2px solid #3590DD; outline-offset: 3px; border-radius: inherit;
  }
  @media (prefers-reduced-motion: reduce) {
    a, button, [role="button"], [data-mb], [data-mb]::after { transition-duration: .01ms !important; }
  }
  @media (max-width: 1023px) {
    [data-hs-host] { height: auto !important; }
    [data-hs-sticky] { position: static !important; height: auto !important; }
    [data-hs-track] { width: 100% !important; flex-direction: column !important; transform: none !important; height: auto !important; }
    [data-hs-panel] { width: 100% !important; height: auto !important; min-height: 88vh; }
    [data-hs-rail] { display: none !important; }
    [data-hs-grid] { grid-template-columns: 1fr !important; padding-top: 12vh !important; padding-bottom: 12vh !important; }
    [data-hs-seal] { display: none !important; }
    [data-menugrid] { grid-template-columns: 1fr !important; }
    [data-polaroids] { height: 460px !important; }
    [data-oval] { width: 100% !important; height: 46% !important; transform: translate(18%,22%) rotate(-12deg) !important; }
  }
  .elv-idle, .elv-idle * { animation-play-state: paused !important; }
  @media (prefers-reduced-motion: reduce) {
    [data-hs-host] { height: auto !important; }
    [data-hs-sticky] { position: static !important; height: auto !important; }
    [data-hs-track] { width: 100% !important; flex-direction: column !important; transform: none !important; height: auto !important; }
    [data-hs-panel] { width: 100% !important; height: auto !important; min-height: 80vh; }
  }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
  /* ---- Cosmic bridge above the footer -----------------------------------
     The reference builds its starfield from ~1000 box-shadows on three divs.
     That is one enormous paint region per layer and it repaints on every
     scroll. Here the same three depths are baked once into repeating tiles and
     moved with transform only, so the whole thing is GPU-composited and costs
     no main-thread paint. The near ridge is pure #000, which is what dissolves
     the section into the footer with no gradient seam. */
  .elv-cos { position: relative; overflow: hidden; background: #000; height: clamp(520px, 74vh, 780px); }
  .elv-cos-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #000 0%, #04070f 38%, #071426 72%, #0a1b30 100%); }
  .elv-cos-layer { position: absolute; left: 0; right: 0; top: 0; height: 200%; background-repeat: repeat; will-change: transform;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 58%, transparent 78%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 58%, transparent 78%); }
  .elv-cos-1 { animation: elv-star 130s linear infinite; }
  .elv-cos-2 { animation: elv-star 210s linear infinite; }
  .elv-cos-3 { animation: elv-star 330s linear infinite; }
  @keyframes elv-star { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-50%,0); } }
  /* the horizon: one wide, low ellipse of light, no decorative blobs */
  .elv-cos-glow { position: absolute; left: 50%; bottom: 8%; width: 150%; height: 46%; transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 100%, rgba(53,144,221,.34) 0%, rgba(53,144,221,.12) 34%, transparent 68%); }
  .elv-cos-range { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: block; }
  /* Distance reads as height plus haze: the far range has to rise ABOVE the
     near one, or the black foreground simply swallows it. Heights were
     inverted before, which flattened all three into a single mass. */
  .elv-cos-r1 { color: #1a2f4a; height: 52%; }
  .elv-cos-r2 { color: #101f36; height: 40%; }
  .elv-cos-r3 { color: #000; height: 36%; }
  /* the band of light that collects at the base of a distant range — this is
     what actually sells depth in mountain photography, more than the tones */
  .elv-cos-haze { position: absolute; left: 0; right: 0; pointer-events: none; }
  .elv-cos-haze-1 { bottom: 34%; height: 16%; background: linear-gradient(180deg, transparent, rgba(96,158,218,.26) 58%, transparent); }
  .elv-cos-haze-2 { bottom: 22%; height: 14%; background: linear-gradient(180deg, transparent, rgba(46,96,148,.20) 62%, transparent); }
  .elv-cos-copy { position: absolute; left: 0; right: 0; top: 34%; text-align: center; padding: 0 clamp(20px,5vw,48px); }
  .elv-cos-head { margin: 0; font-family: 'Lexend Peta', sans-serif; font-weight: 700;
    font-size: clamp(2.2rem, 7vw, 5.4rem); line-height: 1; letter-spacing: .06em; color: #F5F5F2;
    text-shadow: 0 0 60px rgba(53,144,221,.28); }
  .elv-cos-sub { margin: clamp(16px,2.4vw,26px) 0 0; display: flex; flex-wrap: wrap; gap: clamp(14px,3vw,34px); justify-content: center; }
  .elv-cos-sub span { font-size: .6875rem; letter-spacing: .34em; text-transform: uppercase; color: rgba(245,245,242,.52); }
  .elv-cos [data-in] .elv-cos-head, .elv-cos-copy[data-in] .elv-cos-head { }
  .elv-cos-copy .elv-cos-head, .elv-cos-copy .elv-cos-sub span {
    opacity: 0; transform: translateY(16px);
    transition: opacity 1s cubic-bezier(0.22,1,0.36,1), transform 1s cubic-bezier(0.22,1,0.36,1); }
  .elv-cos-copy[data-in] .elv-cos-head, .elv-cos-copy[data-in] .elv-cos-sub span { opacity: 1; transform: none; }
  .elv-cos-copy[data-in] .elv-cos-sub span:nth-child(1) { transition-delay: .18s; }
  .elv-cos-copy[data-in] .elv-cos-sub span:nth-child(2) { transition-delay: .30s; }
  .elv-cos-copy[data-in] .elv-cos-sub span:nth-child(3) { transition-delay: .42s; }
  @media (max-width: 640px) { .elv-cos { height: clamp(460px, 62vh, 560px); } .elv-cos-copy { top: 28%; } }
  @media (prefers-reduced-motion: reduce) {
    .elv-cos-1, .elv-cos-2, .elv-cos-3 { animation: none !important; }
    .elv-cos-copy .elv-cos-head, .elv-cos-copy .elv-cos-sub span { opacity: 1 !important; transform: none !important; }
  }
  /* ---- Footer ----------------------------------------------------------
     Horizontal bands, not one ragged five-column grid: in the five-column
     version the row stretched to the height of the Downtown column and left a
     dead half-screen under the brand. Bands also give the two stores — the
     most useful thing here — their own register instead of squeezing them into
     a nav-sized track. One accent, swappable in one place. */
  :root { --accent: #3590DD; --ink: #F5F5F2; --ink-2: rgba(245,245,242,.62); --ink-3: rgba(245,245,242,.40); --hair: rgba(255,255,255,.09); }
  .elv-foot { background: #000; }
  .elv-foot-in { max-width: 1280px; margin: 0 auto; padding: clamp(56px,7vw,96px) clamp(20px,5vw,56px) 40px; }
  .elv-eyebrow { margin: 0 0 22px; font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); }
  .elv-foot a { color: var(--ink-2); }

  /* newsletter — the one interactive thing, so the one piece of real glass */
  .elv-nl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(18px,3vw,44px);
    padding: clamp(22px,2.6vw,30px) clamp(22px,2.8vw,34px); border-radius: 18px;
    background: rgba(255,255,255,.055); backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
  .elv-nl-in { min-height: 48px; min-width: min(240px,58vw); padding: 0 18px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--ink);
    font-family: 'Manrope',sans-serif; font-size: .9375rem;
    transition: border-color .2s cubic-bezier(0.22,1,0.36,1), background .2s cubic-bezier(0.22,1,0.36,1); }
  .elv-nl-in::placeholder { color: rgba(245,245,242,.34); }
  .elv-join { min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ink); color: #000;
    font-family: 'Manrope',sans-serif; font-weight: 600; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
    transition: background .2s cubic-bezier(0.22,1,0.36,1), color .2s cubic-bezier(0.22,1,0.36,1); }
  .elv-join:hover { background: var(--accent); }

  /* Five columns: brand, Shop, Company, Downtown, West End. The dead space in
     the earlier five-column pass came from the row stretching to the tallest
     column — align-content:start plus tighter store blocks keeps the heights
     close, so nothing is padded out to match Downtown. */
  .elv-cols { display: grid; gap: clamp(36px,4vw,44px) clamp(24px,3vw,40px);
    grid-template-columns: 1fr; margin-top: clamp(44px,5vw,64px); }
  @media (min-width: 620px)  { .elv-cols { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .elv-cols { grid-template-columns: 1.35fr .85fr .85fr 1.15fr 1.15fr; } }
  .elv-col { display: flex; flex-direction: column; align-items: flex-start; align-content: start; }
  .elv-eyebrow { margin: 0 0 16px; font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
  .elv-addr { font-style: normal; display: flex; flex-direction: column; align-items: flex-start; }
  .elv-street { color: var(--ink); font-size: 1rem; line-height: 1.4; letter-spacing: -.01em; }
  .elv-city { color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
  .elv-near { margin-top: 6px; color: var(--ink-3); font-size: .8125rem; line-height: 1.5; }
  .elv-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
    font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }
  .elv-dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
  .elv-hours { display: flex; gap: 14px; margin-top: 14px; font-size: .8125rem; line-height: 1.9;
    font-variant-numeric: tabular-nums; }
  .elv-hours-d { color: var(--ink-3); white-space: pre-line; }
  .elv-hours-t { color: var(--ink-2); white-space: pre-line; }

  /* microinteractions: felt, not noticed */
  .elv-link { display: block; padding: 6px 0; font-size: .9375rem; line-height: 1;
    transition: color .2s cubic-bezier(0.22,1,0.36,1), transform .2s cubic-bezier(0.22,1,0.36,1); }
  .elv-link { justify-self: start; }
  .elv-link:hover { color: var(--ink) !important; transform: translateX(3px); }
  .elv-soc { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -11px; opacity: .6;
    transition: opacity .2s cubic-bezier(0.22,1,0.36,1), color .2s cubic-bezier(0.22,1,0.36,1); }
  .elv-soc:hover { opacity: 1; color: var(--accent) !important; }
  .elv-dir { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; margin-top: 8px;
    color: var(--accent) !important; font-size: .875rem; transition: gap .2s cubic-bezier(0.22,1,0.36,1); }
  .elv-dir:hover { gap: 13px; }
  .elv-tel { margin-top: 14px; color: var(--ink) !important; font-size: .9375rem; font-variant-numeric: tabular-nums;
    transition: color .2s cubic-bezier(0.22,1,0.36,1); }
  .elv-tel:hover { color: var(--accent) !important; }

  .elv-legal { margin-top: clamp(32px,4vw,48px); padding-top: 22px; border-top: 1px solid var(--hair);
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px; }

  /* reveal: 18px, .75s, gentle stagger — felt, not noticed */
  .elv-rv { opacity: 0; transform: translateY(18px);
    transition: opacity .75s cubic-bezier(0.22,1,0.36,1), transform .75s cubic-bezier(0.22,1,0.36,1); }
  .elv-rv[data-in] { opacity: 1; transform: none; }
  .elv-cols > .elv-rv:nth-child(2) { transition-delay: .06s; }
  .elv-cols > .elv-rv:nth-child(3) { transition-delay: .12s; }
  .elv-cols > .elv-rv:nth-child(4) { transition-delay: .18s; }
  .elv-cols > .elv-rv:nth-child(5) { transition-delay: .24s; }

  @media (max-width: 619px) {
    .elv-foot a:not(.elv-soc) { min-height: 44px; display: inline-flex; align-items: center; }
    .elv-soc { margin-left: -13px; }
  }
  @media (prefers-reduced-motion: reduce) { .elv-rv { opacity: 1 !important; transform: none !important; } }
  [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .85s cubic-bezier(0.22,1,0.36,1), transform .85s cubic-bezier(0.22,1,0.36,1); }
  [data-reveal][data-in] { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }
  @media (max-width: 1024px) {
    [data-bento] { grid-template-columns: 1fr 1fr !important; }
    [data-bento] > a:first-child { grid-row: auto !important; min-height: 320px !important; }
    [data-grid4] { grid-template-columns: 1fr 1fr !important; }
    [data-foot] { grid-template-columns: 1fr 1fr !important; }
    [data-heroaside] { display: none !important; }
    [data-herogrid] { grid-template-columns: 1fr !important; }
    [data-desknav] { display: none !important; }
    [data-burger] { display: block !important; }
  }
  @media (max-width: 1023px) {
    [data-catmarquee] { min-height: auto !important; }
    [data-foot] a, [data-footlegal] a, [data-menucontact] a { min-height: 44px; display: inline-flex; align-items: center; }
  }
  @media (max-width: 767px) {
    [data-herorail] { display: none !important; }
    [data-herogrid] { padding-left: 20px !important; }
    [data-heroreadout] { right: 16px !important; }
    [data-split], [data-bento], [data-trio], [data-grid4], [data-foot], [data-splitrow] { grid-template-columns: 1fr !important; }
    [data-bento] > div { grid-template-rows: auto !important; }
  }
.scp0:hover { opacity: 0.62 !important; }
.scp1:hover { border-color: rgba(53, 144, 221, 0.6) !important; color: rgb(53, 144, 221) !important; }
.scp2:hover { color: rgb(255, 255, 255) !important; }
.scp3:hover { box-shadow: rgba(53, 144, 221, 0.5) 0px 0px 28px !important; color: rgb(255, 255, 255) !important; }
.scp4:hover { border-color: rgba(53, 144, 221, 0.6) !important; color: rgb(255, 255, 255) !important; }
.scp5:hover { color: rgb(53, 144, 221) !important; }
.scp6:hover { transform: rotate(0deg) scale(1.04) !important; color: rgb(255, 255, 255) !important; }
.scp7:hover { background: rgb(255, 255, 255) !important; color: rgb(53, 144, 221) !important; }
.scp8:hover { background: rgb(143, 195, 240) !important; color: rgb(0, 0, 0) !important; box-shadow: rgba(53, 144, 221, 0.45) 0px 0px 26px !important; }
.scp9:hover { transform: rotate(0deg) scale(1.05) !important; z-index: 6 !important; }
.scpa:hover { background: rgb(255, 255, 255) !important; color: rgb(0, 0, 0) !important; }
.scpb:focus { outline: rgb(53, 144, 221) solid 2px !important; outline-offset: 2px !important; }
.scpc:hover { border-color: rgba(53, 144, 221, 0.6) !important; }
.scpd:focus { border-color: rgb(53, 144, 221) !important; outline: none !important; }
.scpe:hover { box-shadow: rgba(53, 144, 221, 0.5) 0px 0px 28px !important; }
.scpf:focus { border-color: var(--accent) !important; outline: none !important; }

/* ---- WordPress host reset -------------------------------------------------
   Elementor and the parent theme set a larger inherited base, which shifted
   every size the design left to inherit (16px in the original, 22px here).
   Re-establish the original baseline on the widget that holds the markup. */
.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container {
  font-size: 16px;
  line-height: normal;
  color: #fff;
}
.e-con, .e-con-inner, .elementor-widget-html { --e-con-gap: 0px; }
.elementor-element, .e-con > .e-con-inner { max-width: none !important; }
body.elementor-page { background: #000; }
/* Twenty Twenty-Five ships scroll-behavior:smooth on <html>; the original does
   not, and it desynchronises the scroll-driven hero pan. The one place the
   design does want smooth scrolling asks for it explicitly in JS. */
html { scroll-behavior: auto !important; }