/* Simple Store public marketing site.
   Builds on portal.css's brand tokens (--ss-*) -- load that first. Nothing
   here redefines a token; this file is presentation for the marketing
   context only (hero, feature grid, footer, etc). */

.site-body {
  background: var(--ss-white);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--ss-border);
}

.site-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--ss-space-4) var(--ss-space-5);
  display: flex;
  align-items: center;
  gap: var(--ss-space-6);
}

.site-header__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-header__logo {
  height: 38px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--ss-space-6);
  margin-left: var(--ss-space-4);
  flex: 1;
}

.site-nav__link {
  color: var(--ss-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.94rem;
  padding: 0.3rem 0.05rem;
  border-bottom: 2px solid transparent;
  transition: color var(--ss-transition), border-color var(--ss-transition);
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--ss-primary);
  border-bottom-color: var(--ss-brass);
}

.site-header__cta {
  padding: 0.65rem 1.4rem;
  font-size: 0.92rem;
  flex-shrink: 0;
}

/* ---------- Shared layout ---------- */

.site-main {
  overflow-x: clip;
}

.site-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--ss-space-8) var(--ss-space-5);
}

.site-section--tight {
  padding-top: var(--ss-space-7);
  padding-bottom: var(--ss-space-7);
}

.site-alt-section {
  background: var(--ss-bone);
  border-top: 1px solid var(--ss-border);
  border-bottom: 1px solid var(--ss-border);
}

.site-section__eyebrow {
  margin-bottom: var(--ss-space-3);
}

.site-section__title {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  max-width: 32ch;
  margin-bottom: var(--ss-space-4);
}

.site-section__lede {
  font-size: 1.1rem;
  color: var(--ss-muted);
  max-width: 60ch;
  margin: 0 0 var(--ss-space-7);
  line-height: 1.65;
}

.site-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ss-space-5);
  flex-wrap: wrap;
  margin-bottom: var(--ss-space-6);
}

.site-section__head .site-section__title {
  margin-bottom: var(--ss-space-2);
}

.site-section__center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.site-section__center .site-section__title,
.site-section__center .site-section__lede {
  margin-left: auto;
  margin-right: auto;
}

.site-prose {
  max-width: 70ch;
}

.site-prose h2 {
  margin: var(--ss-space-7) 0 var(--ss-space-3);
  font-size: 1.3rem;
}

.site-prose p,
.site-prose li {
  color: var(--ss-muted);
  line-height: 1.65;
}

.site-prose p {
  margin: 0 0 var(--ss-space-4);
}

.site-prose ul {
  margin: 0 0 var(--ss-space-4);
  padding-left: 1.3em;
}

.site-prose li {
  margin-bottom: var(--ss-space-2);
}

.site-prose a {
  color: var(--ss-primary);
}

/* ---------- 404 ---------- */

.not-found {
  padding-top: var(--ss-space-8);
  padding-bottom: var(--ss-space-8);
}

.hero-photo--sm {
  max-width: 260px;
  margin: 0 auto var(--ss-space-6);
}

/* The 404 photo already comes composed as its own card -- rounded
   corners, drop shadow, and the corner accent line all baked into the
   image itself -- so it's shown plain here rather than wrapped in
   .hero-photo__frame/.hero-photo__accent, which would just draw a second,
   redundant card around the first. */
.not-found__photo {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto var(--ss-space-6);
}

.not-found__actions {
  display: flex;
  gap: var(--ss-space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--ss-space-5);
}

/* ---------- Scroll reveal (progressive enhancement) ----------
   site.js adds "js-reveal" to <html> only when IntersectionObserver is
   available, then toggles "is-visible" per element as it scrolls into
   view. Without JS (or with it blocked), .reveal elements are never
   hidden in the first place -- nothing here depends on JS to become
   visible, only to animate in. */

html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 240ms ease, transform 240ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

html.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-stagger > *:nth-child(1) { --reveal-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { --reveal-delay: 80ms; }
.reveal-stagger > *:nth-child(3) { --reveal-delay: 160ms; }
.reveal-stagger > *:nth-child(4) { --reveal-delay: 240ms; }
.reveal-stagger > *:nth-child(5) { --reveal-delay: 320ms; }
.reveal-stagger > *:nth-child(6) { --reveal-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Hero ---------- */

.site-hero {
  position: relative;
  background:
    radial-gradient(ellipse 900px 560px at 82% -12%, rgba(176, 141, 87, 0.16), transparent 60%),
    radial-gradient(ellipse 1100px 700px at 8% 8%, rgba(8, 101, 144, 0.10), transparent 55%),
    linear-gradient(180deg, #FBF9F3 0%, var(--ss-bone) 100%);
  border-bottom: 1px solid var(--ss-border);
  overflow: hidden;
}

.site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(26,26,26,0.05) 1px, transparent 1px);
  background-size: 100% 44px;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.5) 40%, transparent 90%);
  pointer-events: none;
}

.site-hero__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  min-height: min(86vh, 820px);
  display: flex;
  align-items: center;
  padding: clamp(2.5rem, 7vw, 4rem) var(--ss-space-5) clamp(3rem, 7vw, 4.5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--ss-space-6), 6vw, var(--ss-space-8));
  align-items: center;
  width: 100%;
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.hero-copy {
  display: grid;
  gap: var(--ss-space-6);
}

.site-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--ss-brass);
}

.site-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ss-brass);
}

.site-hero__title {
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
  line-height: 1.04;
  max-width: 16ch;
  letter-spacing: -0.015em;
}

.site-hero__title em {
  font-style: italic;
  color: var(--ss-primary);
}

.site-hero__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--ss-muted);
  max-width: 50ch;
  line-height: 1.65;
  margin: 0;
}

.site-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-4);
}

.ss-btn-lg {
  padding: 1rem 2.1rem;
  font-size: 1.02rem;
}

.site-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-6);
  padding-top: var(--ss-space-5);
  border-top: 1px solid var(--ss-border);
}

.site-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.site-hero__meta-figure {
  font-family: var(--ss-font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ss-ink);
}

.site-hero__meta-label {
  font-size: 0.85rem;
  color: var(--ss-muted);
}

/* ---------- Hero photo ----------
   .hero-photo__frame is a fixed-proportion window (object-fit: cover)
   rather than sized to the image -- swapping in a different photo later
   never needs a CSS change, only a different src on .hero-photo__img. */

.hero-photo {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 520px;
}

.hero-photo__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--ss-radius);
  overflow: hidden;
  border: 1px solid rgba(247, 244, 236, 0.5);
  box-shadow:
    0 30px 60px -20px rgba(6, 78, 110, 0.35),
    0 10px 26px rgba(26, 26, 26, 0.10);
  background: linear-gradient(155deg, var(--ss-primary) 0%, var(--ss-primary-dark) 62%, #043a52 100%);
}

.hero-photo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* Illustration variant -- used wherever the hero has no facility-specific
   photo to show (platform landing page, and any facility page until it has
   a real photo of its own). Same frame/glow/accent as .hero-photo__img,
   just an icon centered on the gradient instead of an <img>. */

.hero-photo__frame--illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-photo__illustration {
  width: 46%;
  height: 46%;
  color: rgba(247, 244, 236, 0.85);
}

.hero-photo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(6, 78, 110, 0.28) 100%);
  pointer-events: none;
}

.hero-photo__accent {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 96px;
  height: 96px;
  border-right: 3px solid var(--ss-brass);
  border-bottom: 3px solid var(--ss-brass);
  border-radius: 0 0 var(--ss-radius-sm) 0;
  z-index: -1;
}

.hero-photo::before {
  content: "";
  position: absolute;
  left: -18px;
  top: -18px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--ss-brass-tint-strong);
  z-index: -1;
}

/* ---------- How it works ---------- */

.steps-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ss-space-6);
  counter-reset: step;
}

@media (max-width: 760px) {
  .steps-strip {
    grid-template-columns: 1fr;
    gap: var(--ss-space-5);
  }
}

.step-card {
  position: relative;
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-sm);
  padding: var(--ss-space-6) var(--ss-space-5) var(--ss-space-5);
  transition: transform var(--ss-transition), box-shadow var(--ss-transition), border-color var(--ss-transition);
}

.step-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-md);
  border-color: var(--ss-brass);
}

.steps-strip .step-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.4rem;
  left: calc(100% + var(--ss-space-3));
  width: calc(var(--ss-space-6) - 2 * var(--ss-space-3));
  height: 1px;
  background-image: linear-gradient(90deg, var(--ss-brass) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
}

@media (max-width: 760px) {
  .steps-strip .step-card:not(:last-child)::after {
    display: none;
  }
}

.step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ss-primary);
  color: var(--ss-white);
  font-family: var(--ss-font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: var(--ss-space-4);
}

.step-card__icon {
  position: absolute;
  top: var(--ss-space-6);
  right: var(--ss-space-5);
  width: 30px;
  height: 30px;
  color: var(--ss-brass);
  opacity: 0.85;
}

.step-card h3 {
  font-size: 1.15rem;
  margin-bottom: var(--ss-space-2);
}

.step-card p {
  margin: 0;
  color: var(--ss-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Feature grid ("why Simple Store") ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ss-space-5);
}

.feature-card {
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: var(--ss-space-6) var(--ss-space-5);
  box-shadow: var(--ss-shadow-sm);
  transition: transform var(--ss-transition), box-shadow var(--ss-transition), border-color var(--ss-transition);
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-md);
  border-color: var(--ss-brass);
}

.feature-card:hover .feature-card__icon {
  background: var(--ss-primary);
  color: var(--ss-white);
}

.feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ss-radius-sm);
  background: var(--ss-primary-tint);
  color: var(--ss-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ss-space-4);
  transition: background-color var(--ss-transition), color var(--ss-transition);
}

.feature-card__icon svg {
  width: 22px;
  height: 22px;
}

.feature-card h3 {
  font-size: 1.15rem;
  margin-bottom: var(--ss-space-2);
}

.feature-card p {
  margin: 0;
  color: var(--ss-muted);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* ---------- Pricing / unit-type cards ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ss-space-5);
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: var(--ss-space-5) var(--ss-space-5) var(--ss-space-5);
  box-shadow: var(--ss-shadow-sm);
  transition: transform var(--ss-transition), box-shadow var(--ss-transition), border-color var(--ss-transition);
  overflow: hidden;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ss-shadow-lg);
  border-color: var(--ss-brass);
}

.pricing-card:hover .pricing-card__illustration svg {
  transform: scale(1.06);
}

.pricing-card__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
  margin: calc(var(--ss-space-2) * -1) calc(var(--ss-space-2) * -1) var(--ss-space-4);
  border-radius: var(--ss-radius-sm);
  background:
    radial-gradient(ellipse 220px 120px at 30% 20%, var(--ss-brass-tint-strong), transparent 65%),
    var(--ss-bone);
}

.pricing-card__illustration svg {
  width: 76px;
  height: 76px;
  color: var(--ss-primary);
  transition: transform 240ms ease;
}

.pricing-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--ss-space-3);
  min-height: 1.6rem;
}

.pricing-card__size {
  font-family: var(--ss-font-serif);
  font-weight: 600;
  font-size: 1.55rem;
  margin-bottom: 0.15rem;
}

.pricing-card__kind {
  color: var(--ss-muted);
  font-size: 0.9rem;
  margin-bottom: var(--ss-space-3);
}

.pricing-card__fits {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--ss-ink);
  background: var(--ss-primary-tint);
  border-radius: var(--ss-radius-sm);
  padding: 0.6rem 0.75rem;
  margin-bottom: var(--ss-space-4);
  line-height: 1.5;
}

.pricing-card__fits svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.15rem;
  color: var(--ss-primary);
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: auto;
  margin-bottom: var(--ss-space-2);
}

.pricing-card__price-figure {
  font-family: var(--ss-font-serif);
  font-weight: 600;
  font-size: 2rem;
  color: var(--ss-primary);
}

.pricing-card__price-period {
  color: var(--ss-muted);
  font-size: 0.92rem;
}

.pricing-card__available {
  font-size: 0.85rem;
  color: var(--ss-muted);
  margin-bottom: var(--ss-space-5);
}

.pricing-card__available strong {
  color: var(--ss-ink);
}

.pricing-card .ss-btn {
  width: 100%;
}

.site-teaser-footer {
  text-align: center;
  margin-top: var(--ss-space-7);
}

/* ---------- Location / hours section ---------- */

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--ss-space-7);
  align-items: stretch;
}

@media (max-width: 860px) {
  .location-grid {
    grid-template-columns: 1fr;
  }
}

.location-card {
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-sm);
  padding: var(--ss-space-6);
  display: flex;
  flex-direction: column;
}

.location-card dl {
  margin: 0 0 var(--ss-space-5);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ss-space-3) var(--ss-space-5);
}

.location-card dt {
  color: var(--ss-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 0.1rem;
}

.location-card dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.location-card .ss-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Location map -- .map-placeholder is the shared frame for both the real
   Google Maps embed and its static fallback (see home.html), so either one
   gets the same rounded corners, border, and shadow regardless of which
   is rendered. */

.map-placeholder {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 320px;
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-border);
  overflow: hidden;
  box-shadow: var(--ss-shadow-sm);
  background: #EFEAD9;
}

.map-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-placeholder__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26, 26, 26, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 26, 26, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

.map-placeholder__road {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(26, 26, 26, 0.06);
}

.map-placeholder__road--h {
  left: 0;
  right: 0;
  top: 62%;
  height: 22px;
}

.map-placeholder__road--v {
  top: 0;
  bottom: 0;
  left: 28%;
  width: 22px;
}

.map-placeholder__pin {
  position: absolute;
  left: 28%;
  top: 62%;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-placeholder__pin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  background: var(--ss-primary);
  box-shadow: var(--ss-shadow-md);
}

.map-placeholder__pin-badge svg {
  transform: rotate(-45deg);
  width: 22px;
  height: 22px;
  color: var(--ss-white);
}

.map-placeholder__caption {
  position: absolute;
  left: var(--ss-space-4);
  bottom: var(--ss-space-4);
  right: var(--ss-space-4);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: var(--ss-muted);
  box-shadow: var(--ss-shadow-sm);
}

.map-placeholder__caption strong {
  color: var(--ss-ink);
  font-weight: 600;
}

/* ---------- Locations grid (platform landing / locations index) ---------- */

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ss-space-5);
}

.location-tile {
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-sm);
  padding: var(--ss-space-6) var(--ss-space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform var(--ss-transition), box-shadow var(--ss-transition), border-color var(--ss-transition);
}

.location-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-md);
  border-color: var(--ss-brass);
}

.location-tile__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ss-radius-sm);
  background: var(--ss-primary-tint);
  color: var(--ss-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ss-space-4);
}

.location-tile__icon svg {
  width: 22px;
  height: 22px;
}

.location-tile__name {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}

.location-tile__place {
  color: var(--ss-muted);
  font-size: 0.92rem;
  margin: 0 0 var(--ss-space-5);
}

.location-tile__cta {
  margin-top: auto;
}

/* A facility that's is_public (listed) but not yet is_open (rentable), or
   the purely cosmetic "more locations coming" tile that has no Facility
   behind it at all -- see public/templates/public/_locations_grid.html.
   No hover lift (nothing to click through to) and a muted badge instead
   of the "View This Location" button. */

.location-tile--coming-soon {
  cursor: default;
}

.location-tile--coming-soon:hover {
  transform: none;
  box-shadow: var(--ss-shadow-sm);
  border-color: var(--ss-border);
}

.location-tile--coming-soon .location-tile__icon {
  background: var(--ss-border);
  color: var(--ss-muted);
}

.location-tile__badge {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ss-muted);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ss-ink);
  color: rgba(247, 244, 236, 0.72);
}

.site-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--ss-space-8) var(--ss-space-5) var(--ss-space-6);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--ss-space-6);
}

@media (max-width: 860px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

.site-footer__logo {
  height: 32px;
  width: auto;
  margin-bottom: var(--ss-space-4);
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.site-footer__tagline {
  max-width: 32ch;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 var(--ss-space-5);
}

.site-footer__social {
  display: flex;
  gap: var(--ss-space-3);
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(247, 244, 236, 0.18);
  color: rgba(247, 244, 236, 0.75);
  transition: border-color var(--ss-transition), color var(--ss-transition), background-color var(--ss-transition);
}

.site-footer__social-link:hover {
  color: var(--ss-white);
  border-color: var(--ss-brass);
  background: rgba(176, 141, 87, 0.14);
}

.site-footer__social-link svg {
  width: 16px;
  height: 16px;
}

.site-footer .ss-label {
  color: rgba(247, 244, 236, 0.5);
  margin-bottom: var(--ss-space-3);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--ss-space-2);
}

.site-footer__address,
.site-footer__hours {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0 0 var(--ss-space-3);
}

.site-footer__hours--muted {
  color: rgba(247, 244, 236, 0.5);
  font-size: 0.85rem;
}

.site-footer__link {
  color: rgba(247, 244, 236, 0.85);
  font-size: 0.92rem;
  text-decoration: none;
  width: fit-content;
}

.site-footer__link:hover {
  color: var(--ss-brass);
}

.site-footer__bottom {
  border-top: 1px solid rgba(247, 244, 236, 0.12);
  padding: var(--ss-space-4) var(--ss-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ss-space-3);
  text-align: center;
  font-size: 0.82rem;
  color: rgba(247, 244, 236, 0.45);
}

.site-footer__bottom-links {
  display: flex;
  gap: var(--ss-space-4);
}

.site-footer__bottom-links a {
  color: rgba(247, 244, 236, 0.45);
}

.site-footer__bottom-links a:hover {
  color: var(--ss-brass);
}

/* ---------- Rent flow ---------- */

.rent-flow {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: var(--ss-space-7);
  align-items: start;
}

@media (max-width: 860px) {
  .rent-flow {
    grid-template-columns: 1fr;
  }
}

.rent-summary {
  position: sticky;
  top: calc(64px + var(--ss-space-5));
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-md);
  padding: var(--ss-space-6);
}

.rent-summary__size {
  font-family: var(--ss-font-serif);
  font-weight: 600;
  font-size: 1.7rem;
  margin-bottom: var(--ss-space-2);
}

.rent-summary__price {
  font-family: var(--ss-font-serif);
  color: var(--ss-primary);
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: var(--ss-space-4);
}

.rent-form-card {
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-sm);
  padding: var(--ss-space-6);
}

/* ---------- Rent-next placeholder ---------- */

.handoff-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-lg);
  padding: var(--ss-space-8) var(--ss-space-6);
  position: relative;
  overflow: hidden;
}

.handoff-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ss-brass), var(--ss-primary));
}

.handoff-card__check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ss-primary-tint);
  color: var(--ss-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--ss-space-5);
}

.handoff-card__check svg {
  width: 28px;
  height: 28px;
}

.handoff-summary {
  margin: var(--ss-space-6) 0;
  padding: var(--ss-space-5);
  background: var(--ss-bone);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  text-align: left;
}

.handoff-summary dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ss-space-2) var(--ss-space-4);
  font-size: 0.95rem;
}

.handoff-summary dt {
  color: var(--ss-muted);
}

.handoff-summary dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

.handoff-next-steps {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: var(--ss-space-2) 0 var(--ss-space-6);
}

/* ---------- Empty / sold-out state ---------- */

.empty-state {
  text-align: center;
  padding: var(--ss-space-7) var(--ss-space-5);
  border: 1px dashed var(--ss-border);
  border-radius: var(--ss-radius);
  color: var(--ss-muted);
}

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  .site-nav {
    display: none;
  }

  .site-header__inner {
    justify-content: space-between;
  }

  .site-section {
    padding: var(--ss-space-7) var(--ss-space-4);
  }

  .hero-photo {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ---------- Chat widget ---------- */
/* See public/templates/public/_chat_widget.html -- only rendered on
   Facility-scoped pages (base.html includes it inside {% if facility %}).
   Open/close is a plain hidden-attribute toggle (public/static/public/js/
   site.js); the request cycle itself is HTMX, posting to public:chat and
   appending the reply into #chat-transcript. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chat-widget {
  position: fixed;
  right: var(--ss-space-5);
  bottom: var(--ss-space-5);
  z-index: 60;
}

.chat-widget__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-2);
  border: none;
  border-radius: var(--ss-radius-pill);
  background: var(--ss-primary);
  color: var(--ss-white);
  padding: 0.9rem 1.4rem;
  font-family: var(--ss-font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--ss-shadow-lg);
  transition: background-color var(--ss-transition), transform var(--ss-transition);
}

.chat-widget__toggle:hover {
  background: var(--ss-primary-dark);
  transform: translateY(-1px);
}

.chat-widget__toggle-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.chat-widget__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--ss-space-3));
  width: min(360px, calc(100vw - 2 * var(--ss-space-5)));
  max-height: min(560px, 75vh);
  display: flex;
  flex-direction: column;
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-lg);
  overflow: hidden;
}

.chat-widget__panel[hidden] {
  display: none;
}

.chat-widget__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ss-space-3);
  padding: var(--ss-space-4) var(--ss-space-5);
  background: var(--ss-primary);
  color: var(--ss-white);
}

.chat-widget__title {
  font-family: var(--ss-font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

.chat-widget__subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.chat-widget__close {
  border: none;
  background: transparent;
  color: var(--ss-white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.chat-widget__transcript {
  flex: 1;
  overflow-y: auto;
  padding: var(--ss-space-4) var(--ss-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ss-space-4);
  background: var(--ss-bone);
}

.chat-widget__turn {
  display: flex;
  flex-direction: column;
  gap: var(--ss-space-2);
}

.chat-widget__bubble {
  max-width: 88%;
  padding: var(--ss-space-3) var(--ss-space-4);
  border-radius: var(--ss-radius-sm);
  font-size: 0.92rem;
  line-height: 1.45;
}

.chat-widget__bubble p {
  margin: 0;
}

.chat-widget__bubble + .chat-widget__handoff {
  margin-top: var(--ss-space-2);
}

.chat-widget__bubble--user {
  align-self: flex-end;
  background: var(--ss-primary);
  color: var(--ss-white);
}

.chat-widget__bubble--bot {
  align-self: flex-start;
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  color: var(--ss-ink);
}

.chat-widget__bubble--error {
  border-color: var(--ss-danger);
  color: var(--ss-danger);
}

.chat-widget__bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.85rem 1rem;
}

.chat-widget__typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ss-muted);
  animation: ssChatTypingPulse 1.2s infinite ease-in-out;
}

.chat-widget__typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-widget__typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes ssChatTypingPulse {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-widget__typing-dot {
    animation: none;
    opacity: 0.7;
  }
}

.chat-widget__handoff {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-2);
}

.chat-widget__handoff-link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ss-radius-sm);
  background: var(--ss-primary);
  color: var(--ss-white);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  transition: background-color var(--ss-transition);
}

.chat-widget__handoff-link:hover {
  background: var(--ss-primary-dark);
}

.chat-widget__form {
  display: flex;
  gap: var(--ss-space-2);
  padding: var(--ss-space-3) var(--ss-space-4);
  border-top: 1px solid var(--ss-border);
  background: var(--ss-white);
}

.chat-widget__form input[type="text"] {
  flex: 1;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  padding: 0.65rem 0.9rem;
  font-family: var(--ss-font-sans);
  font-size: 0.92rem;
}

.chat-widget__form input[type="text"]:focus {
  outline: 2px solid var(--ss-primary);
  outline-offset: 1px;
}

.chat-widget__send {
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
}

.chat-widget__fallback {
  margin: 0;
  padding: var(--ss-space-2) var(--ss-space-4) var(--ss-space-3);
  font-size: 0.78rem;
  color: var(--ss-muted);
  background: var(--ss-white);
}

.chat-widget__fallback a {
  color: var(--ss-primary);
}

@media (max-width: 480px) {
  .chat-widget {
    right: var(--ss-space-3);
    bottom: var(--ss-space-3);
    left: var(--ss-space-3);
  }

  .chat-widget__panel {
    width: 100%;
  }

  .chat-widget__toggle-label {
    display: none;
  }
}

/* ---------- Cookie consent notice ---------- */

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent {
  position: fixed;
  left: var(--ss-space-5);
  bottom: var(--ss-space-5);
  z-index: 65;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--ss-space-4);
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-lg);
  padding: var(--ss-space-5);
}

.cookie-consent__text {
  font-size: 0.85rem;
  color: var(--ss-muted);
  line-height: 1.55;
  margin: 0;
}

.cookie-consent__text a {
  color: var(--ss-primary);
}

.cookie-consent__accept {
  align-self: flex-start;
}

@media (max-width: 480px) {
  .cookie-consent {
    left: var(--ss-space-3);
    right: var(--ss-space-3);
    bottom: var(--ss-space-3);
    max-width: none;
  }
}