/* White lounge: a continuous photograph with a soft veil beneath the copy. */
.hero-banner--storefront { display: block; isolation: isolate; min-height: 560px; background: #f6f6f3; border: 1px solid #e3e6e7; border-radius: 24px; box-shadow: 0 18px 56px rgba(23, 39, 55, .07); }
.hero-banner--storefront::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,253,.98) 0%, rgba(255,255,253,.94) 22%, rgba(255,255,253,.78) 39%, rgba(255,255,253,.20) 61%, rgba(255,255,253,0) 78%); }
.hero-banner--storefront .hero-banner__content { width: 52%; max-width: 660px; min-height: 560px; padding: 54px 48px 62px; background: transparent; }
.hero-banner--storefront .hero-banner__content h1 { max-width: 560px; margin-bottom: 22px; font-size: clamp(44px, 4.5vw, 66px); line-height: 1.04; letter-spacing: -.025em; }
.hero-banner--storefront .hero-banner__content h1 em { color: #52677a; }
.hero-banner--storefront .hero-banner__content p { max-width: 450px; color: #34495c; line-height: 1.7; }
.hero-banner--storefront .eyebrow { margin-bottom: 22px; font-size: 11px; letter-spacing: .17em; }
.hero-banner--storefront .button-row { flex-wrap: wrap; gap: 10px; }
.hero-banner--storefront .button-row .button { min-width: 0; min-height: 48px; padding: 12px 20px; white-space: normal; }
.hero-banner--storefront .button--silver { color: var(--navy); background: rgba(255,255,255,.66); border: 1px solid #bac4cd; box-shadow: inset 0 1px 0 #fff; }
.hero-banner--storefront .hero-proof { max-width: 420px; gap: 32px; margin-top: 28px; padding-top: 20px; border-color: #7e8c9833; }
.hero-banner--storefront .hero-proof small { color: #4c6072; }
.hero-banner--storefront .storefront-photo { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; min-height: 0; margin: 0; background: #f6f6f3; pointer-events: none; }
.hero-banner--storefront .storefront-photo::after { display: none; }
.hero-banner--storefront .storefront-photo > img { display: block; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: 60% 64%; }
.storefront-photo__expand { position: absolute; z-index: 3; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px; border: 1px solid #b7c1cbbb; border-radius: 12px; background: rgba(255,255,255,.88); color: var(--navy); box-shadow: 0 4px 16px #19324f0d; backdrop-filter: blur(12px); font-size: 13px; cursor: zoom-in; }
.storefront-photo__expand:hover { background: #fff; }
.storefront-photo__expand:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.storefront-photo__expand svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.storefront-dialog { width: calc(100vw - 32px); max-width: none; height: calc(100dvh - 32px); max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid #657184; border-radius: 16px; background: var(--night); color: #fff; }
.storefront-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.storefront-dialog::backdrop { background: #020d1df2; }
.storefront-dialog__header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px 20px; border-bottom: 1px solid #63728766; }
.storefront-dialog__header h2 { flex: 1; margin: 0; color: #fff; font-family: var(--sans); font-size: 18px; line-height: 1.4; }
.storefront-dialog__controls { display: flex; gap: 6px; }
.storefront-dialog__controls button { min-height: 44px; padding: 8px 16px; border: 1px solid #637287; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; font-size: 14px; }
.storefront-dialog__controls button[aria-pressed="true"] { background: var(--silver); color: var(--navy); border-color: var(--silver); }
.storefront-dialog .dialog-close { flex: 0 0 44px; margin: 0; background: #19324f; color: #fff; border: 1px solid #637287; }
.storefront-dialog__viewport { min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; }
.storefront-dialog__viewport img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.storefront-dialog[data-scale="actual"] .storefront-dialog__viewport img { width: 1536px; height: 1024px; max-width: none; object-fit: none; margin: auto; }
.storefront-dialog__hint { margin: 0; padding: 12px 20px; border-top: 1px solid #63728766; color: var(--silver); font-size: 12px; line-height: 1.5; }
.storefront-dialog button:focus-visible, .storefront-dialog__viewport:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (max-width: 1000px) {
  .hero-banner--storefront .hero-banner__content { width: 62%; padding: 42px 32px 68px; }
  .hero-banner--storefront::before { background: linear-gradient(90deg, rgba(255,255,253,.98), rgba(255,255,253,.90) 34%, rgba(255,255,253,.44) 61%, rgba(255,255,253,0) 92%); }
}
@media (max-width: 800px) {
  .hero-banner--storefront { display: block; min-height: 620px; border-radius: 20px; }
  .hero-banner--storefront .hero-banner__content { width: 100%; max-width: 580px; min-height: 620px; padding: 32px 30px 220px; justify-content: flex-start; }
  .hero-banner--storefront .hero-banner__content h1 { max-width: 480px; font-size: clamp(38px, 6.5vw, 52px); }
  .hero-banner--storefront .hero-banner__content p { max-width: 430px; }
  .hero-banner--storefront::before { background: linear-gradient(180deg, rgba(255,255,253,.98) 0%, rgba(255,255,253,.94) 36%, rgba(255,255,253,.72) 56%, rgba(255,255,253,.10) 78%, rgba(255,255,253,0) 100%); }
  .hero-banner--storefront .storefront-photo > img { object-position: 68% center; }
  .hero-banner--storefront .button-row { max-width: 440px; }
  .hero-banner--storefront .button-row .button { flex: 1; padding-inline: 14px; white-space: normal; }
}
@media (max-width: 560px) {
  .hero-banner--storefront .hero-banner__content { padding: 28px 24px 210px; }
  .hero-banner--storefront .hero-banner__content h1 { font-size: clamp(36px, 10vw, 46px); }
  .hero-banner--storefront .eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 18px; }
  .hero-banner--storefront .button-row { display: grid; grid-template-columns: 1fr; }
  .storefront-photo__expand { right: 14px; bottom: 14px; font-size: 12px; padding-inline: 12px; }
  .storefront-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .storefront-dialog__header { padding: max(12px, env(safe-area-inset-top)) 12px 12px; gap: 10px; }
  .storefront-dialog__header h2 { font-size: 16px; }
  .storefront-dialog__controls { order: 3; width: 100%; }
  .storefront-dialog__controls button { flex: 1; }
  .storefront-dialog__hint { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
}