/* sections/_hero.css */
/* ============================================================
   LOCKUP Theme — Hero Section
   Full-viewport hero with map + site preview card
   ============================================================ */

.hero {
  position: relative;
  min-height: min(70vh, 720px);
  background: var(--clr-black);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero.section,
section.hero {
  --hero-inset-y: var(--space-8);
  padding-block: 0;
  padding-top: calc(72px + var(--hero-inset-y));
  padding-bottom: var(--hero-inset-y);
}

.hero__inner {
  position: relative;
  width: 100%;
  min-height: min(520px, 60vh);
  display: flex;
  align-items: center;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  /* Prevent nowrap headline max-content from inflating the flex column */
  min-width: 0;
  /* Only needed for mobile cqi headline sizing; avoid collapse in flex */
  container-type: inline-size;
  container-name: hero-content;
}

/* ── Eyebrow ─────────────────────────────────────────────── */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: 1.5rem;
  background: #f5c5180f;
  border: 2px solid #f5c51849;
  padding: 0.4rem 1rem;
  width: fit-content;
}

.hero__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-yellow);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* ── Headline ────────────────────────────────────────────── */
.hero__headline {
  font-family: var(--font-heading);
  font-size: var(--fs-hero); /* fallback before JS fit / no cqi */
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-transform: uppercase;
  /*
   * Do not mix overflow-x/overflow-y (hidden + visible). CSS forces the
   * visible axis to auto, which shows a desktop scrollbar on the headline.
   * Parent .hero already clips; JS fit keeps lines inside the column.
   */
  overflow: visible;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports (font-size: 1cqi) {
  .hero__headline {
    /* Cap to content column so nowrap lines cannot blow past the viewport */
    font-size: min(var(--fs-hero), 17.5cqi);
  }
}

.hero__line1 {
  color: var(--clr-white);
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

.hero__line2 {
  color: var(--clr-yellow);
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

/* ── Subtext ─────────────────────────────────────────────── */
.hero__subtext {
  font-size: 1.05rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 440px;
}

/* ── CTA Buttons ─────────────────────────────────────────── */
.hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero__ctas .btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Postcode Finder ─────────────────────────────────────── */
.hero__finder {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 2.25rem 1.5rem 1.5rem;
  max-width: 480px;
  margin-top: 1.5rem;
}

.hero__finder-label {
  position: absolute;
  top: -0.85rem;
  left: 1.25rem;
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--clr-black);
  background: var(--clr-yellow);
  padding: 0.35rem 0.85rem;
  text-transform: uppercase;
  font-family: var(--font-heading);
  line-height: 1;
}

.hero__finder-row {
  display: flex;
  gap: 0.5rem;
}

.hero__finder-input {
  flex: 1;
  background: var(--clr-black);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--clr-white);
  font-size: 0.9rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition-fast);
}

.hero__finder-input::placeholder {
  color: var(--clr-text-muted);
}

.hero__finder-input:focus {
  border-color: var(--clr-yellow);
}

.hero__finder-btn {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.85rem 1.5rem;
}

.hero__finder-geo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--clr-white);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  transition: color var(--transition-fast);
  font-family: var(--font-body);
  font-weight: 600;
  width: 100%;
}

.hero__finder-geo:hover {
  color: var(--clr-yellow);
}

.hero__geo-dot,
.hero__geo-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--clr-white);
  opacity: 0.8;
}

.hero__finder-meta {
  color: var(--clr-text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  margin-left: auto;
}

/* ── Map Wrapper ─────────────────────────────────────────── */
.hero__map-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}

.hero__map-wrap .hero__map-static,
.hero__map-wrap .hero__map,
.hero__map-wrap .hero__site-card {
  pointer-events: auto;
}

/* Site card needs pointer events */
.hero__site-card {
  pointer-events: auto;
}

/* Google Map container — below site card in stack */
.hero__map-static {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: auto;
  background: #3a3a3a;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.hero__map-static.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero__map-static--loading {
  background: #3a3a3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.5'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") center / 48px 48px no-repeat;
}

.hero__map-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid rgba(248, 205, 4, 0.35);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.hero__map-hint.is-hidden {
  opacity: 0;
}

.hero__map {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: auto;
  background: #3a3a3a;
}

.hero__map.is-map-loading {
  background: #3a3a3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.5'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") center / 48px 48px no-repeat;
}

.hero__map.is-map-ready {
  background: #3a3a3a;
}

/* Faint silver city / large-town reference POIs on the hero map */
.hero-map-city-poi {
  position: absolute;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.hero-map-city-poi__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--clr-n-grey);
  margin: 0 auto 6px;
  opacity: 0.75;
}

.hero-map-city-poi__name {
  font-family: var(--font-display, Oswald, "Barlow Condensed", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(200, 200, 200, 0.65);
  text-transform: uppercase;
}

/* Lockup site marker labels on the hero / detail maps */
.hero-map-site-label {
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, 8px);
  pointer-events: none;
}

.hero-map-site-label__title {
  font-family: var(--font-display, Oswald, "Barlow Condensed", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--clr-accent, #F8CD04);
  text-transform: uppercase;
}

.hero-map-site-label__title--muted {
  color: #fff;
}

.hero-map-site-label__city {
  font-family: var(--font-display, Oswald, "Barlow Condensed", sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(200, 200, 200, 0.65);
  text-transform: uppercase;
  margin-top: 2px;
}

.hero-map-site-label__meta {
  font-size: 11px;
  color: #DCDEE1;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Marker affordance tip — teach that yellow site pins are clickable */
.lockup-map-image-marker--tappable {
  overflow: visible;
}

.hero-map-marker-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(4px);
  padding: 0.35rem 0.65rem;
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid rgba(248, 205, 4, 0.65);
  border-radius: 2px;
  color: var(--clr-yellow);
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  z-index: 30;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.2s ease;
}

.hero-map-marker-tip::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
}

.hero-map-marker-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(248, 205, 4, 0.65);
}

.hero-map-marker-tip__text {
  display: block;
  line-height: 1.2;
}

/* Card closed: tip on the focused/nearest pin */
.hero__map-wrap:not(.hero__map-wrap--card-open) .hero-map-marker-tip--primary {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  animation: hero-marker-tip-pulse 2.4s ease-in-out infinite;
}

/* Card open: tip on OTHER site pins (e.g. Paisley while Cumbernauld is previewed) */
.hero__map-wrap--card-open .lockup-map-image-marker--tappable:not(.is-selected) .hero-map-marker-tip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  animation: hero-marker-tip-pulse 2.4s ease-in-out infinite;
}

.hero__map-wrap--card-open .lockup-map-image-marker--tappable.is-selected .hero-map-marker-tip {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

/* Desktop: hover any unselected pin for tip when card closed */
@media (hover: hover) and (pointer: fine) {
  .hero__map-wrap:not(.hero__map-wrap--card-open) .lockup-map-image-marker--tappable:hover .hero-map-marker-tip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    animation: none;
  }

  .hero-map-marker-tip:hover {
    background: rgba(248, 205, 4, 0.16);
  }
}

@keyframes hero-marker-tip-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__map-wrap:not(.hero__map-wrap--card-open) .hero-map-marker-tip--primary,
  .hero__map-wrap--card-open .lockup-map-image-marker--tappable:not(.is-selected) .hero-map-marker-tip {
    animation: none;
  }
}

/* After first manual pin click, hide tips until page reload */
.hero__map-wrap--tips-dismissed .hero-map-marker-tip {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

/* ── Site Preview Card (popup above marker) ──────────────── */
.hero__site-card {
  position: absolute;
  z-index: 5;
  width: 280px;
  aspect-ratio: 4 / 3;
  overflow: visible;
  pointer-events: auto;
  border: 1px solid rgba(248, 205, 4, 0.55);
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: none;
  opacity: 0;
  transform: translateX(-50%);
  cursor: pointer;
}

.hero__site-card.is-visible {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  z-index: 5;
}

/* Small arrow/triangle pointing down toward the marker */
.hero__site-card::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(248, 205, 4, 0.55);
}

/* Card flipped below marker — arrow at top pointing up */
.hero__site-card--below::after {
  bottom: auto;
  top: -8px;
  border-top: none;
  border-bottom: 8px solid rgba(248, 205, 4, 0.55);
}

/* Close button */
.hero__site-card-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.hero__site-card-close:hover {
  background: rgba(248, 205, 4, 0.8);
  color: #000;
}

.hero__site-card-image {
  position: absolute;
  inset: 3px;
  background: var(--clr-dark-grey);
  overflow: hidden;
  z-index: 1;
}

.hero__site-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Yellow corner brackets */
.hero__site-card-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: #F8CD04;
  border-style: solid;
  border-width: 0;
  z-index: 4;
}

.hero__site-card-corner--tl { top: 0px; left: 0px; border-top-width: 1px; border-left-width: 1px; }
.hero__site-card-corner--tr { top: -2px; right: -2px; border-top-width: 2px; border-right-width: 2px; }
.hero__site-card-corner--bl { bottom: -2px; left: -2px; border-bottom-width: 2px; border-left-width: 2px; }
.hero__site-card-corner--br { bottom: -2px; right: -2px; border-bottom-width: 2px; border-right-width: 2px; }

/* Label — top left, yellow bg with black text */
.hero__site-card-label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-black);
  background: var(--clr-yellow);
  padding: 0.1rem 1rem;
  z-index: 3;
  white-space: nowrap;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bottom overlay */
.hero__site-card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.50rem 0.50rem 0.50rem;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.hero__site-card-address {
  display: block;
  font-size: 0.65rem;
  color: #DCDEE1;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}

.hero__site-card-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6rem;
  color: #DCDEE1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero__site-card-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
  margin-top: 0.55rem;
  position: relative;
  z-index: 3;
}

.btn.hero__site-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex: 0 0 calc(50% - 0.2rem);
  width: calc(50% - 0.2rem);
  max-width: calc(50% - 0.2rem);
  min-width: 0;
  margin-top: 0;
  padding: 0.5rem 0.4rem;
  background: transparent;
  color: var(--clr-yellow);
  border: 1px solid var(--clr-yellow);
  border-radius: 2px;
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  text-align: center;
  cursor: pointer;
}

.btn.hero__site-card-cta[hidden] {
  display: none;
}

.btn.hero__site-card-cta:hover {
  background: var(--clr-yellow);
  border-color: var(--clr-yellow);
  color: var(--clr-black);
  transform: translateY(-1px);
}

.btn.hero__site-card-cta:active {
  transform: translateY(0);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero.section,
  section.hero {
    --hero-inset-y: var(--space-6);
    padding-top: calc(72px + var(--hero-inset-y));
    padding-bottom: var(--hero-inset-y);
  }

  .hero {
    min-height: auto;
  }

  .hero__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__content {
    /* Balanced tablet column — avoid full-bleed oversized headline */
    max-width: min(32rem, 100%);
    width: 100%;
    min-width: 0;
  }
  .hero__headline {
    overflow-wrap: normal;
    word-break: normal;
    line-height: 0.88;
  }
  .hero__line1,
  .hero__line2 {
    max-width: 100%;
    white-space: nowrap;
  }
  .hero__subtext,
  .hero__finder {
    max-width: 100%;
  }
  .hero__map-wrap {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    height: clamp(320px, 42vh, 400px);
    margin-top: 2rem;
    margin-bottom: 0;
    pointer-events: auto;
    overflow: hidden;
    z-index: 1;
  }
  .hero__site-card {
    width: 220px;
    z-index: 5;
  }

  .hero-map-city-poi {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero.section,
  section.hero {
    --hero-inset-y: var(--space-6);
    padding-top: calc(72px + var(--hero-inset-y));
    padding-bottom: var(--hero-inset-y);
  }

  .hero__content {
    max-width: 100%;
    min-width: 0;
  }
  .hero__headline {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    line-height: 0.88;
    letter-spacing: -0.02em;
    /*
     * iPhone 12 Pro = 390 CSS px. Prefer a CSS size that always fits
     * "SECURE SPACE." / "SMART ACCESS." even if JS fit fails or is late.
     * 10vw @ 390 ≈ 39px; clamp keeps it readable without edge clipping.
     */
    font-size: clamp(2rem, 10vw, 2.75rem);
  }
  @supports (font-size: 1cqi) {
    .hero__headline {
      font-size: min(2.75rem, 14cqi, 10vw);
    }
  }
  .hero__line1,
  .hero__line2 {
    display: block;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
  }
  .hero__subtext,
  .hero__finder {
    max-width: 100%;
  }
  .hero__ctas {
    flex-direction: column;
  }
  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }
  .hero__finder-row {
    flex-direction: column;
  }
  .hero__finder-btn {
    width: 100%;
    justify-content: center;
  }
  .hero__finder-geo {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
  .hero__finder-meta {
    margin-left: 0;
    width: 100%;
  }
  .hero__map-wrap {
    height: 280px;
  }
  .hero__site-card {
    width: min(180px, calc(100% - 2rem));
  }
}

@media (max-width: 480px) {
  .hero__headline {
    line-height: 0.88;
  }
}

@media (max-width: 360px) {
  .hero__eyebrow {
    font-size: 0.6rem;
    padding: 0.35rem 0.75rem;
  }
  .hero__headline {
    letter-spacing: -0.025em;
    line-height: 0.88;
  }
  .hero__finder {
    padding: 2rem 1rem 1.25rem;
  }
  .hero__finder-meta {
    font-size: 0.7rem;
  }
}

/* components/_hero-features.css */
/* ── Hero Features Bar (homepage + location detail) ───────── */
.loc-detail__hero-features {
  background: var(--clr-white);
}

.home-hero-features {
  margin-top: 0;
}

.loc-detail .loc-detail__hero-features {
  margin-top: var(--space-16);
}

.loc-detail__hero-features-inner {
  display: flex;
  gap: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.loc-detail__hero-feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.loc-detail__hero-feature:last-child {
  border-right: none;
}

.loc-detail__hero-feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  min-height: 20px;
}

.loc-detail__hero-feature-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.loc-detail__hero-feature-sub {
  font-size: var(--fs-xs);
  color: var(--clr-davy-grey);
  text-align: right;
  letter-spacing: 0.06em;
}

.loc-detail__hero-feature-label {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-black);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.loc-detail__hero-feature-desc {
  font-size: var(--fs-xs);
  color: var(--clr-davy-grey);
  line-height: 1.4;
}

/* Location-only: per-feature desktop / mobile visibility */
@media (min-width: 769px) {
  .loc-detail__hero-feature--mobile-only {
    display: none;
  }
}

@media (max-width: 768px) {
  .loc-detail__hero-feature--desktop-only {
    display: none;
  }
}

@media (max-width: 1024px) {
  .loc-detail__hero-features-inner {
    display: grid;
    /* 2 cols so 4 features fill evenly (avoids orphan row with empty cells) */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(0, 0, 0, 0.1);
    border-left: none;
    border-right: none;
  }

  .loc-detail__hero-feature {
    border: none;
    background: var(--clr-white);
  }
}

@media (max-width: 768px) {
  .loc-detail__hero-feature-label {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .loc-detail__hero-features-inner {
    grid-template-columns: 1fr;
  }

  .loc-detail__hero-feature {
    padding: var(--space-3) var(--space-4);
  }

  .loc-detail__hero-feature-label {
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  .loc-detail__hero-feature-desc,
  .loc-detail__hero-feature-sub {
    font-size: 0.7rem;
  }
}

@media (max-width: 360px) {
  .loc-detail__hero-features-inner {
    grid-template-columns: 1fr;
  }

  .loc-detail__hero-feature {
    padding: var(--space-3);
  }

  .loc-detail__hero-feature-label {
    font-size: 0.9rem;
    line-height: 1.25;
  }

  .loc-detail__hero-feature-top {
    margin-bottom: var(--space-1);
  }
}

/* sections/_why.css */

.why{ background: #151515; }
.why__header{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding-bottom: 3rem;
}
.why__headline{ font-family:var(--font-heading); font-size:var(--fs-h1); line-height:0.8; text-transform:uppercase; color:#ffffff; letter-spacing:.02em; max-width:480px; }
.why__headline span{ color:var(--clr-accent); }
.why__body{
  font-size: 1rem;
  color: var(--clr-text-muted);
  line-height: 1.75;
  max-width: 460px;
}
.why__divider{
  width: 100%;
  height: 2px;
  background: #F8CD04;
}
.why__sizes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,.08);
  border-top: none;
  overflow: hidden;
}
.why__size-card{
  padding: 2rem 2rem 2.25rem;
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  position: relative;
  background: #1a1a1a;
  min-width: 0;
}
.why__size-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--clr-accent);
}
.why__size-card:last-child{ border-right: none; }
.why__size-num{
  all: unset;
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-size: .7rem;
  color: var(--clr-text-muted);
  letter-spacing: .1em;
  font-family: var(--font-body);
}
.why__size-range{
  margin: .35rem 0 0;
  display: flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: wrap;
}
.why__size-range-value{
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clr-white);
}
.why__size-range-unit{
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.why__size-range-unit sup{
  font-size: .62em;
  line-height: 0;
}
.why__size-label{
  font-family: var(--font-heading);
  font-size: 1.35rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-accent);
  line-height: 1.1;
  margin: 0;
}
.why__size-desc{
  margin: 0;
  font-size: .82rem;
  color: var(--clr-text-muted);
  line-height: 1.55;
}
.why__ideal{
  margin-top: auto;
  padding-top: .5rem;
}
.why__ideal-heading{
  margin: 0 0 .65rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.why__ideal-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.why__ideal-item{
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.why__ideal-icon{
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
}
.why__ideal-icon svg,
.why__ideal-icon img{
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
}
.why__ideal-text{
  font-size: .78rem;
  line-height: 1.45;
  color: var(--clr-white);
}
.why__ctas{
  margin-top: clamp(2rem, 4vw, 3rem);
}
.why__ctas .btn--outline{
  background: transparent;
  color: var(--clr-white);
  border-color: var(--clr-text-muted);
}
.why__ctas .btn--outline:hover{
  background: transparent;
  color: var(--clr-white);
  border-color: var(--clr-text-muted);
}
@media(max-width:1024px){
  .why__header{ grid-template-columns: 1fr; gap: 2rem; }
  .why__sizes{ grid-template-columns: 1fr; }
  .why__headline{ max-width:100%; overflow-wrap:anywhere; }
  .why__body{ max-width:100%; }
  .why__size-card{
    border-right: none;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .why__size-card:first-child{ border-top: none; }
}
@media(max-width:640px){
  .why__headline{ font-size:2.5rem; max-width:100%; }
}

/* sections/_smart-access.css */
/* ── Smart Access — interactive phone + door demo ── */
.smart-access__phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.smart-access-demo {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.smart-access-demo__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(380px, 54vw, 560px);
}

.smart-access-demo__device {
  position: relative;
  z-index: 2;
  width: 48%;
  flex-shrink: 0;
  margin-right: -10%;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

.smart-access-demo__bezel {
  background: #0a0a0a;
  border: 3px solid #2a2a2a;
  border-radius: 28px;
  padding: 10px 8px 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.smart-access-demo__screen {
  background: #151515;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 440px;
}

.smart-access-demo__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.smart-access-demo__status-dots {
  display: flex;
  gap: 3px;
}

.smart-access-demo__status-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}

.smart-access-demo__unit {
  padding: 0.85rem 1rem 0.5rem;
}

.smart-access-demo__unit-label {
  display: block;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #82827c;
  margin-bottom: 0.35rem;
}

.smart-access-demo__unit-name {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}

.smart-access-demo__panel {
  margin: 0.5rem 0.85rem 0;
  padding: 1.25rem 0.75rem 1rem;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
}

.smart-access-demo__tap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  width: 100%;
}

.smart-access-demo__ring {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid #c9a227;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.smart-access-demo.is-unlocking .smart-access-demo__ring {
  animation: smart-access-pulse 0.7s ease-in-out infinite;
}

.smart-access-demo.is-unlocked .smart-access-demo__ring {
  border-color: #4ade80;
  box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.15);
}

.smart-access-demo__lock {
  width: 28px;
  height: 28px;
  color: #fff;
  transition: transform 0.35s ease, color 0.35s ease;
}

.smart-access-demo.is-unlocked .smart-access-demo__lock {
  color: #4ade80;
  transform: rotate(-8deg) scale(1.05);
}

.smart-access-demo__lock-open {
  display: none;
}

.smart-access-demo.is-unlocked .smart-access-demo__lock-closed {
  display: none;
}

.smart-access-demo.is-unlocked .smart-access-demo__lock-open {
  display: block;
}

.smart-access-demo__tap-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.smart-access-demo__tap-meta {
  font-size: 0.55rem;
  color: var(--clr-text-muted);
  letter-spacing: 0.02em;
}

.smart-access-demo__unlock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 1.7rem);
  margin: 0.85rem auto 0;
  padding: 0.85rem 1rem;
  border: 0;
  background: var(--clr-yellow);
  color: #151515;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.smart-access-demo__unlock-btn:hover {
  background: #e0b900;
}

.smart-access-demo__unlock-btn:active {
  transform: scale(0.98);
}

.smart-access-demo.is-unlocking,
.smart-access-demo.is-locking {
  pointer-events: none;
}

.smart-access-demo.is-unlocking .smart-access-demo__unlock-btn,
.smart-access-demo.is-locking .smart-access-demo__unlock-btn {
  opacity: 0.7;
  cursor: wait;
}

.smart-access-demo.is-unlocked .smart-access-demo__unlock-btn {
  background: #fff;
  color: #151515;
}

.smart-access-demo.is-unlocked .smart-access-demo__unlock-btn:hover {
  background: var(--clr-yellow);
}

.smart-access-demo__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
  padding: 0.7rem 0.5rem 0.85rem;
  margin-top: auto;
}

.smart-access-demo__nav span {
  text-align: center;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #82827c;
}

/* Roll-up door */
.smart-access-demo__door {
  position: relative;
  width: 76%;
  flex-shrink: 0;
  z-index: 1;
}

.smart-access-demo__door-frame {
  position: relative;
  aspect-ratio: 1.05;
  background: #0d0d0d;
  border: 3px solid #151515;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55);
}

.smart-access-demo__door-inner {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0d0d0d;
}

/* Workspace scene behind the shutter */
.smart-access-demo__door-inner::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: url("../../images/smart-access-unit-interior.jpg") center / cover no-repeat;
}

.smart-access-demo__door-shutter {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    #f8cd04 0,
    #f8cd04 10px,
    #151515 10px,
    #151515 12px
  );
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.45, 0, 0.2, 1);
  will-change: transform;
}

/* Bottom rail / weather seal finish on the shutter */
.smart-access-demo__door-shutter-finish {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  z-index: 2;
  background:
    linear-gradient(
      to bottom,
      #ffe45a 0%,
      #f8cd04 28%,
      #c9a003 72%,
      #8a6f02 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 -1px 0 #151515,
    0 3px 6px rgba(0, 0, 0, 0.35);
  border-top: 2px solid #151515;
}

.smart-access-demo__door-shutter-finish::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(21, 21, 21, 0.28);
  border-radius: 1px;
}

/* Horizontal black pull bar on the bottom rail */
.smart-access-demo__door-shutter-handle {
  position: absolute;
  left: 50%;
  bottom: 4px;
  z-index: 3;
  width: 56px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(
      to bottom,
      #3a3a3a 0%,
      #1a1a1a 45%,
      #0a0a0a 100%
    );
  border: 1px solid #050505;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.35);
}

.smart-access-demo__door-shutter-handle::before,
.smart-access-demo__door-shutter-handle::after {
  content: none;
}

.smart-access-demo.is-unlocked .smart-access-demo__door-shutter {
  transform: translateY(-95%);
}

.smart-access-demo__hint {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

.smart-access-demo.is-unlocked .smart-access-demo__hint {
  color: #4ade80;
}

.smart-access-demo__fallback-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@keyframes smart-access-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(248, 205, 4, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(248, 205, 4, 0);
    transform: scale(1.03);
  }
}

@media (max-width: 1024px) {
  .smart-access__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .smart-access__body {
    max-width: 100%;
  }

  .smart-access-demo {
    max-width: min(440px, 100%);
  }

  .smart-access-demo__stage {
    min-height: clamp(280px, 42vw, 380px);
    width: 100%;
    max-width: 100%;
  }

  .smart-access-demo__device {
    width: 46%;
    margin-right: -12%;
  }

  .smart-access-demo__door {
    width: 66%;
  }

  .smart-access-demo__screen {
    min-height: 340px;
  }

  .smart-access-demo__ring {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 640px) {
  .smart-access {
    overflow-x: clip;
  }

  .smart-access-demo {
    max-width: 100%;
  }

  .smart-access-demo__stage {
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    justify-content: center;
  }

  .smart-access-demo__device {
    width: 42%;
    margin-right: -12%;
  }

  .smart-access-demo__door {
    width: 62%;
  }

  .smart-access-demo__bezel {
    border-radius: 18px;
    border-width: 2px;
    padding: 7px 5px 9px;
  }

  .smart-access-demo__screen {
    min-height: 255px;
    border-radius: 14px;
  }

  .smart-access-demo__ring {
    width: 64px;
    height: 64px;
  }

  .smart-access-demo__lock {
    width: 28px;
    height: 28px;
  }

  .smart-access-demo__unlock-btn {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    padding: 0.55rem 0.65rem;
    min-height: 2.4rem;
  }

  .smart-access-demo__door-shutter-finish {
    height: 14px;
  }

  .smart-access-demo__door-shutter-handle {
    width: 40px;
    height: 7px;
    bottom: 3px;
  }

  .smart-access-demo__hint {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    padding-inline: 0.5rem;
  }
}

@media (max-width: 400px) {
  .smart-access-demo__device {
    width: 40%;
    margin-right: -14%;
  }

  .smart-access-demo__door {
    width: 64%;
  }

  .smart-access-demo__screen {
    min-height: 230px;
  }

  .smart-access-demo__unit-name {
    font-size: 0.78rem;
  }

  .smart-access-demo__tap-label {
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-access-demo__door-shutter,
  .smart-access-demo__ring,
  .smart-access-demo__lock {
    transition: none;
  }

  .smart-access-demo.is-unlocking .smart-access-demo__ring {
    animation: none;
  }
}

/* sections/_made-simple.css */
/* ── Storage Made Simple (3 steps + CTA) ── */
.made-simple{
  background: var(--clr-white);
  color: var(--clr-black);
  padding-block: clamp(3.5rem, 6vw, 5rem);
}
.made-simple__header{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding-bottom: 3rem;
}
.made-simple__header-left{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.made-simple__header-left .section-tag{
  margin-bottom: 0;
  color: var(--clr-black);
}
.made-simple__headline{
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: 0.8;
  text-transform: uppercase;
  color: var(--clr-black);
  letter-spacing: .02em;
  max-width: 480px;
  margin: 0;
}
.made-simple__headline span{
  color: var(--clr-black);
  display: block;
  width: fit-content;
  background: var(--clr-yellow);
  margin-top: 0.2rem;
  padding: 0.15rem;
  padding-top: 0rem;
}
.made-simple__intro{
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-davy-grey);
  max-width: 460px;
  margin: 0;
}

/* Shared landscape slot — same width and height for every step icon */
.made-simple{
  --ms-icon-width: min(100%, 20rem);
  --ms-icon-ratio: 2675 / 1552;
  --ms-step-gap: 1.15rem;
}

.made-simple__steps{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 0 3rem;
  padding: 0;
  align-items: stretch;
}

/* Align title / icon / description rows across all 3 columns */
@supports (grid-template-rows: subgrid){
  .made-simple__steps{
    grid-template-rows: auto auto auto;
  }
  .made-simple__step{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: var(--ms-step-gap);
  }
}

.made-simple__step{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ms-step-gap);
  min-width: 0;
}

.made-simple__step-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 3.25rem; /* keeps titles on one shared baseline band */
}

.made-simple__step-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--clr-accent);
  color: var(--clr-black);
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.made-simple__step-title{
  font-family: var(--font-subheading);
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  font-weight: 700;
  text-transform: none;
  color: var(--clr-black);
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

.made-simple__illus{
  width: var(--ms-icon-width);
  aspect-ratio: var(--ms-icon-ratio);
  height: auto;
  max-width: 100%;
  flex-shrink: 0;
  display: grid;
  place-items: stretch;
  overflow: hidden;
}

.made-simple__icon-frame{
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: stretch;
  overflow: hidden;
}

.made-simple__svg,
.made-simple__icon{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.made-simple__svg{
  color: var(--clr-black);
}

.made-simple__step-text{
  font-size: .9rem;
  line-height: 1.6;
  color: #555;
  max-width: 280px;
  width: 100%;
  margin: 0;
  padding-top: 0.65rem;
  text-wrap: pretty;
}

@supports not (grid-template-rows: subgrid){
  .made-simple__step-text{
    margin-top: auto;
  }
}

.made-simple .btn--outline{
  background: transparent;
  color: var(--clr-black);
  border-color: var(--clr-black);
}
.made-simple .btn--outline:hover{
  background: transparent;
  color: var(--clr-black);
  border-color: var(--clr-black);
}

@media (max-width: 900px){
  .made-simple{
    --ms-icon-width: min(100%, 20rem);
  }
  .made-simple__header{
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
  }
  .made-simple__headline,
  .made-simple__intro{
    max-width: 100%;
  }
  .made-simple__steps{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    max-width: 360px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
  }
  .made-simple__step{
    display: flex;
    grid-row: auto;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(21,21,21,.1);
  }
  .made-simple__step:last-child{
    padding-bottom: 0;
    border-bottom: none;
  }
  .made-simple__step-head{
    min-height: 0;
  }
  .made-simple__step-title{
    font-size: clamp(1.15rem, 4.5vw, 1.35rem);
  }
}

/* sections/_home-video.css */
/* ── Homepage Video Section ── */
.home-video{
  background: var(--clr-black);
  color: var(--clr-white);
  padding-block: clamp(3.5rem, 6vw, 5rem) 0;
}
.home-video__header{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding-bottom: 3rem;
}
.home-video__header-left{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.home-video__header-left .section-tag{
  margin-bottom: 0;
}
.home-video__headline{
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: 0.8;
  text-transform: uppercase;
  color: var(--clr-white);
  letter-spacing: .02em;
  max-width: 480px;
  margin: 0;
}
.home-video__headline span{
  color: var(--clr-accent);
}
.home-video__intro{
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-text-muted);
  max-width: 460px;
  margin: 0;
}
.home-video__player{
  max-width: 960px;
  margin: 0 auto;
}
.home-video__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--clr-dark-grey);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 0 1px rgba(248,205,4,.15), 0 24px 48px rgba(0,0,0,.35);
  overflow: hidden;
}
.home-video__frame::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--clr-accent);
  z-index: 1;
  pointer-events: none;
}
.home-video__lite{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #f03;
  transition: color .15s ease;
}
.home-video__lite:hover,
.home-video__lite:focus-visible{
  color: #c00;
}
.home-video__lite:focus-visible{
  outline: 2px solid var(--clr-accent);
  outline-offset: -4px;
}
.home-video__thumb{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
.home-video__play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.home-video__play-icon{
  width: clamp(3rem, 12vw, 4.25rem);
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.45));
  transition: transform .15s ease;
}
.home-video__lite:hover .home-video__play-icon,
.home-video__lite:focus-visible .home-video__play-icon{
  transform: scale(1.06);
}
.home-video__iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.home-video__frame.is-playing .home-video__lite{
  display: none;
}
.home-video__caption{
  margin: 1rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--clr-text-muted);
  text-align: center;
}
.home-video__tour{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--clr-dark-grey);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--clr-accent);
}
.home-video__tour-icon{
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
}
.home-video__tour-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}
.home-video__tour-content{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.home-video__tour-badge{
  display: inline-block;
  width: fit-content;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-accent);
}
.home-video__tour-title{
  font-family: var(--font-subheading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-white);
  margin: 0;
}
.home-video__tour-text{
  font-size: .9rem;
  line-height: 1.55;
  color: var(--clr-text-muted);
  margin: 0;
  max-width: 520px;
}
.home-video__tour-btn{
  flex-shrink: 0;
  white-space: nowrap;
}
.home-video__divider{
  width: 100%;
  height: 2px;
  background: var(--clr-accent);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: block;
}
@media (max-width: 900px){
  .home-video__header{
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
  }
  .home-video__headline,
  .home-video__intro{
    max-width: 100%;
  }
  .home-video__tour{
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
  }
  .home-video__tour-icon{
    width: 3rem;
    height: 3rem;
  }
  .home-video__tour-btn{
    justify-self: stretch;
    width: 100%;
    justify-content: center;
  }
}

/* sections/_locations-map.css */
/* ── Locations Map Section ── */
.locations-map{
  --locations-map-height:450px;
  --locations-map-popup-offset:7.5rem;
  background:var(--clr-dark-grey);
  padding-bottom:60px;
  border-top:1px solid rgba(255,255,255,.06);
}
.locations-map__top{ display:flex; align-items:center; justify-content:space-between; padding:2.5rem var(--gutter); max-width:var(--max-width); margin:0 auto; width:100%; }
.locations-map__top-left{ display:flex; flex-direction:column; gap:.25rem; }
.locations-map__top .section-tag{ margin-bottom:0; }
.locations-map__headline{ font-family:var(--font-heading); font-size:var(--fs-h1); line-height:0.8; text-transform:uppercase; color:#fff; }
.locations-map__headline span{ color:var(--clr-accent); }
.locations-map__all{ font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#F8CD04; white-space:nowrap; transition:opacity .15s; align-self:center; }
.locations-map__all:hover{ opacity:.7; color:#F8CD04; }
.locations-map__body{ display:grid; grid-template-columns:minmax(320px,360px) 1fr; grid-template-rows:var(--locations-map-height); height:var(--locations-map-height); min-height:0; max-width:var(--max-width); margin:0 auto; padding-inline:var(--gutter); width:100%; }
.locations-map__cards{ display:flex; flex-direction:column; height:100%; max-height:var(--locations-map-height); min-height:0; border-right:1px solid rgba(255,255,255,.08); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#F8CD04 rgba(255,255,255,.05); }
.locations-map__cards::-webkit-scrollbar{ width:6px; }
.locations-map__cards::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:3px; }
.locations-map__cards::-webkit-scrollbar-thumb{ background:#F8CD04; border-radius:3px; }
.locations-map__cards::-webkit-scrollbar-thumb:hover{ background:#fff; }
.locations-map__card{ display:flex; align-items:center; gap:1rem; padding:1.125rem 1.25rem; border-left:3px solid transparent; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; transition:background .2s,border-color .2s; flex-shrink:0; }
.locations-map__card:hover{ background:rgba(255,255,255,.03); border-left-color:rgba(248,205,4,.4); }
.locations-map__card--active{ background:rgba(255,255,255,.05) !important; border-left-color:#F8CD04 !important; }
.locations-map__card-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem; }
.locations-map__card-header{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:0; }
.locations-map__card-title{ font-family:var(--font-heading); font-size:1.15rem; letter-spacing:.05em; text-transform:uppercase; color:#fff; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.locations-map__flagship{ background:#F8CD04; color:#151515; font-size:.55rem; font-weight:700; letter-spacing:.08em; padding:2px 6px; border-radius:2px; white-space:nowrap; flex-shrink:0; }
.locations-map__avail{ font-size:.7rem; white-space:nowrap; display:inline-flex; align-items:center; gap:.25rem; }
.locations-map__avail--green{ color:#F8CD04; }
.locations-map__address{ font-size:.78rem; color:var(--clr-text-muted); margin:0; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.locations-map__units{ font-size:.72rem; color:var(--clr-text-muted); display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0; }
.locations-map__card-actions{ flex-shrink:0; align-self:center; }
.locations-map__card-btn{ padding:.75rem 1.125rem; font-size:.85rem; letter-spacing:.1em; min-height:2.75rem; min-width:6.75rem; justify-content:center; border:1px solid transparent; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.locations-map__card-btn:hover{ transform:none; box-shadow:0 4px 12px rgba(248,205,4,.22); }
.locations-map__card--active .locations-map__card-btn{ box-shadow:0 4px 14px rgba(248,205,4,.28); }
.locations-map__map-wrap{ position:relative; overflow:hidden; height:var(--locations-map-height); min-height:0; }
.locations-map__map{ position:absolute; top:0; left:0; right:0; bottom:0; }
.locations-map__photos{
  position:absolute;
  top:1rem;
  right:1rem;
  z-index:12;
  width:min(280px, calc(100% - 2rem));
  max-height:calc(100% - 1rem - var(--locations-map-popup-offset));
  display:flex;
  flex-direction:column;
  background:rgba(21,21,21,.96);
  border:1px solid rgba(255,255,255,.12);
  border-left:3px solid #F8CD04;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  overflow:hidden;
}
.locations-map__photos[hidden]{ display:none; }
.locations-map__photos-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  padding:.875rem 1rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.locations-map__photos-heading{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  min-width:0;
}
.locations-map__photos-title{
  font-family:var(--font-heading);
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  margin:0;
  line-height:1.3;
}
.locations-map__photos-label{
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#F8CD04;
  margin:0;
}
.locations-map__photos-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.75rem;
  height:1.75rem;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.15);
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.locations-map__photos-close:hover{
  background:#F8CD04;
  border-color:#F8CD04;
  color:#151515;
}
.locations-map__photos-loader{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  padding:1.5rem 1rem;
  flex-shrink:0;
}
.locations-map__photos-loader[hidden]{
  display:none;
}
.locations-map__photos-spinner{
  width:1.75rem;
  height:1.75rem;
  border:2px solid rgba(248,205,4,.25);
  border-top-color:#F8CD04;
  border-radius:50%;
  animation:locations-map-photos-spin .7s linear infinite;
}
@keyframes locations-map-photos-spin{
  to{ transform:rotate(360deg); }
}
.locations-map__photos-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.5rem;
  padding:.75rem;
  overflow-y:auto;
  max-height:240px;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#F8CD04 rgba(255,255,255,.05);
}
.locations-map__photos-grid--loading{
  visibility:hidden;
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.locations-map__photos-grid::-webkit-scrollbar{ width:5px; }
.locations-map__photos-grid::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:3px; }
.locations-map__photos-grid::-webkit-scrollbar-thumb{ background:#F8CD04; border-radius:3px; }
.locations-map__photos-grid::-webkit-scrollbar-thumb:hover{ background:#fff; }
.locations-map__photo{
  display:block;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#2F2F2D;
}
.locations-map__photo a,
.locations-map__photo-btn{
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.locations-map__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.locations-map__photo--siteplan a,
.locations-map__photo--siteplan .locations-map__photo-btn{
  aspect-ratio:1/1;
  background:#151515;
}
.locations-map__photo--siteplan img{
  object-fit:contain;
  padding:.25rem;
}
.locations-map__photo-caption{
  display:block;
  padding:.35rem .4rem .45rem;
  font-size:.6rem;
  line-height:1.3;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#82827C;
  background:#151515;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.locations-map__popup{ margin:1rem; position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.25rem 1.5rem; background:rgba(21,21,21,.96); border-top:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px); z-index:10; }
.locations-map__popup-title{ font-family:var(--font-heading); font-size:1.5rem; letter-spacing:.05em; text-transform:uppercase; color:#fff; margin-bottom:.25rem; }
.locations-map__popup-meta{ display:flex; align-items:center; gap:.75rem; font-size:.8rem; color:#82827C; flex-wrap:wrap; }
.locations-map__popup-meta > span{ display:inline-flex; align-items:center; gap:.25rem; }
.locations-map__pin-icon{ vertical-align:middle; flex-shrink:0; }
.locations-map__popup-actions{ display:flex; gap:.75rem; flex-shrink:0; }
.locations-map__popup-actions .btn{ border:1px solid #282828; }

/* Full-screen photo viewer (no new tab) */
.locations-lightbox{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}
.locations-lightbox[hidden]{ display:none; }
.locations-lightbox__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,.88);
  cursor:pointer;
}
.locations-lightbox__dialog{
  position:relative;
  z-index:1;
  width:min(920px, 100%);
  max-height:calc(100vh - 3rem);
  display:flex;
  flex-direction:column;
  gap:.75rem;
  background:#151515;
  border:1px solid rgba(255,255,255,.12);
  border-top:3px solid #F8CD04;
  box-shadow:0 24px 64px rgba(0,0,0,.55);
}
.locations-lightbox__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1rem 0;
}
.locations-lightbox__title{
  font-family:var(--font-heading);
  font-size:1rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  margin:0;
  line-height:1.3;
}
.locations-lightbox__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.15);
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.locations-lightbox__close:hover{
  background:#F8CD04;
  border-color:#F8CD04;
  color:#151515;
}
.locations-lightbox__viewer{
  position:relative;
  margin:0 1rem;
  min-height:min(60vh, 520px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0d0d0d;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.locations-lightbox__loader{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(13,13,13,.72);
  pointer-events:none;
}
.locations-lightbox__loader[hidden]{
  display:none;
}
.locations-lightbox__img{
  max-width:100%;
  max-height:min(60vh, 520px);
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  opacity:1;
  transition:opacity .2s ease;
}
.locations-lightbox.is-loading .locations-lightbox__img{
  opacity:0;
}
.locations-lightbox__img--siteplan{
  padding:1rem;
}
.locations-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:2.5rem;
  height:2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(21,21,21,.85);
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.locations-lightbox__nav:hover{
  background:#F8CD04;
  border-color:#F8CD04;
  color:#151515;
}
.locations-lightbox__nav--prev{ left:.75rem; }
.locations-lightbox__nav--next{ right:.75rem; }
.locations-lightbox__nav:disabled{
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
}
.locations-lightbox__counter{
  position:absolute;
  bottom:.75rem;
  left:.75rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  color:#fff;
  background:rgba(0,0,0,.65);
  padding:.25rem .5rem;
  border-radius:2px;
}
.locations-lightbox__caption{
  margin:0;
  padding:0 1rem 1rem;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#82827C;
  text-align:center;
}
@media(max-width:1024px){
  .locations-map{
    --locations-map-height:clamp(380px, 42vh, 460px);
    --locations-map-popup-offset:9.5rem;
  }
  .locations-map__body{
    grid-template-columns:1fr;
    grid-template-rows:auto auto; /* don't stretch cards to map height */
    height:auto;
  }
  .locations-map__cards{
    flex-direction:column;
    flex-wrap:nowrap;
    height:auto;
    max-height:none;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .locations-map__card{
    flex:0 0 auto;
    min-width:0;
    align-items:center;
  }
  .locations-map__card-actions{ align-self:center; }
  .locations-map__map-wrap{
    position:relative;
    overflow:hidden;
    height:var(--locations-map-height);
  }
  .locations-map__photos{
    top:auto;
    right:.75rem;
    left:.75rem;
    bottom:var(--locations-map-popup-offset);
    width:auto;
    max-height:calc(100% - 1rem - var(--locations-map-popup-offset));
    height:auto;
  }
  .locations-map__photos-grid{
    max-height:180px;
  }
  .locations-map__top{ padding:1.5rem var(--gutter); }
  .locations-lightbox{ padding:1rem; }
  .locations-lightbox__viewer{ min-height:min(50vh, 420px); }
  .locations-lightbox__img{ max-height:min(50vh, 420px); }
}

@media(max-width:640px){
  .locations-map{
    /* Compact enough for phone viewports while keeping popup + photos usable */
    --locations-map-height:clamp(420px, 58vh, 520px);
    --locations-map-popup-offset:13.5rem;
  }
  .locations-map__top{ flex-direction:column; align-items:flex-start; gap:1rem; padding:1.25rem var(--gutter); }
  .locations-map__headline{ overflow-wrap:anywhere; }
  .locations-map__card{ flex-wrap:wrap; gap:.75rem; }
  .locations-map__card-actions{ width:100%; align-self:stretch; }
  .locations-map__card-btn{ width:100%; min-width:0; }
  .locations-map__photos{
    top:auto;
    left:.75rem;
    right:.75rem;
    bottom:var(--locations-map-popup-offset);
    width:auto;
    max-height:calc(100% - 1rem - var(--locations-map-popup-offset));
    height:auto;
    justify-content:flex-start;
    border-bottom:0;
  }
  .locations-map__photos-header{
    padding:.55rem .75rem .4rem;
  }
  .locations-map__photos-title{ display:none; } /* popup already shows site name */
  .locations-map__photos-label{ font-size:.6rem; }
  .locations-map__photos-grid{
    max-height:168px;
    gap:.35rem;
    padding:.45rem .5rem .55rem;
  }
  .locations-map__photo-caption{ display:none; }
  .locations-map__popup{
    margin:.75rem;
    padding:.875rem 1rem;
    gap:.625rem;
    flex-direction:column;
    align-items:stretch;
  }
  .locations-map__popup-title{
    font-size:1.15rem;
    margin-bottom:.15rem;
  }
  .locations-map__popup-meta{
    font-size:.72rem;
    gap:.5rem;
  }
  .locations-map__popup-meta > span:first-child{
    min-width:0;
    max-width:100%;
  }
  #popup-address{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:12rem;
  }
  .locations-map__popup-actions{ width:100%; flex-direction:column; gap:.5rem; }
  .locations-map__popup-actions .btn{
    width:100%;
    justify-content:center;
    min-height:2.5rem;
    padding:.65rem 1rem;
  }
}















/* sections/_who-its-for.css */
/* ── Smart Access Section ── */
.smart-access{ background:#2F2F2D; }
.smart-access__inner{ display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.smart-access__headline{ font-family:var(--font-heading); font-size:var(--fs-h1); line-height:0.8; text-transform:uppercase; color:#fff; margin-bottom:1.5rem; }
.smart-access__headline span{ color:var(--clr-accent); }
.smart-access__body{ font-size:1rem; color:var(--clr-text-muted); line-height:1.75; margin-bottom:1.5rem; max-width:480px; }
.smart-access__list{ list-style:none; display:flex; flex-direction:column; gap:.875rem; margin-bottom:2rem; }
.smart-access__list li{ font-size:.9rem; color:#E8E8E8; display:flex; align-items:flex-start; gap:.75rem; line-height:1.5; }
.smart-access__list li::before{ content:"✓"; background:#F8CD04; color:#151515; font-weight:900; font-size:.7rem; width:20px; height:20px; border-radius:3px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.15rem; }
.phone-mock{ background:#2F2F2D; border-radius:24px; padding:1.75rem 1.5rem; border:1px solid rgba(255,255,255,.1); max-width:260px; margin:0 auto; }
.phone-mock__screen{ display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; }
.phone-mock__label{ font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:#82827C; }
.phone-mock__unit{ font-family:var(--font-heading); font-size:1rem; letter-spacing:.05em; color:#fff; }
.phone-mock__lock{ font-size:2.5rem; margin:.5rem 0; }
.phone-mock__tap{ font-family:var(--font-heading); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.phone-mock__sub{ font-size:.7rem; color:#82827C; }
.phone-mock__btn{ width:100%; justify-content:center; margin-top:.5rem; font-size:.8rem; padding:.65rem; }
.phone-mock__nav{ display:flex; justify-content:space-around; margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08); }
.phone-mock__nav span{ font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:#82827C; }
@media(max-width:1024px){ .smart-access__inner{ grid-template-columns:1fr; } .phone-mock{ max-width:220px; } .smart-access__body{ max-width:100%; } }



.smart-access__phone-img{ max-width:100%; height:auto; display:block; margin:0 auto; }
/* ── Who It's For ── */
.who{ background:var(--clr-white); color:#151515; }
.who__headline{ font-family:var(--font-heading); font-size:var(--fs-h1); line-height:0.8; text-transform:uppercase; color:#151515; margin-bottom:2rem; }
.who__headline span{ background:#F8CD04; color:#151515; padding:0 .25rem; display:block; width:fit-content; }
.who__tabs{ display:flex; gap:0; overflow:hidden; align-self:flex-end; }
.who__tab{ padding:.75rem 1.5rem; font-family:var(--font-heading); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#151515; background:#fff; border:1px solid #151515; border-right:none; cursor:pointer; transition:background .15s,color .15s; }
.who__tab--active{ background:#151515; color:var(--clr-yellow); }
.who__tab:hover:not(.who__tab--active){ color:#fff; }
.who__panel{ display:none; }
.who__panel--active{ display:block; }
.who__desc{ margin-bottom:2rem; }
.who__desc h3{ font-family:var(--font-heading); font-size:1.25rem; letter-spacing:.05em; text-transform:uppercase; color:#fff; margin-bottom:.75rem; }
.who__desc p{ font-size:.9rem; color:#82827C; line-height:1.65; margin-bottom:1.25rem; max-width:480px; }
.who__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#e0e0e0; border:1px solid #e0e0e0; border-radius:4px; overflow:hidden; }
.who__card{ background:#fff; padding:1.75rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; transition:background .2s; }
.who__card:hover{ background:rgba(255,255,255,.03); }
.who__card-num{ font-size:.65rem; font-weight:700; letter-spacing:.12em; color:var( --clr-davy-grey); }
.who__card-icon{ display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px; background:#F8CD04; flex-shrink:0; }
.who__card strong{ font-family:var(--font-heading); font-size:.95rem; letter-spacing:.05em; text-transform:uppercase; color:var(--clr-dark-grey); }
.who__card p{ font-size:.8rem; color:#151515; line-height:1.6; }
@media(max-width:1024px){ .who__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#e0e0e0; border:1px solid #e0e0e0; border-radius:4px; overflow:hidden; } }
@media(max-width:640px){ .who__grid{ display:grid; grid-template-columns:1fr; gap:1px; background:#e0e0e0; border:1px solid #e0e0e0; border-radius:4px; overflow:hidden; } }











.who__header{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:2rem; gap:2rem;  }
.who__header .who__headline{ margin-bottom:0; }
@media(max-width:768px){
  .who__header{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .who__tabs{ width:100%; flex-wrap:wrap; }
  .who__tab{ flex:1 1 auto; min-width:0; text-align:center; padding:.65rem 1rem; font-size:.72rem; }
  .who__panel-left{ padding:1.5rem 1.25rem; }
  .who__panel-title{ font-size:clamp(1.25rem,5vw,1.75rem); overflow-wrap:anywhere; }
}


.who__tab:last-child{ border-right:1px solid #151515; }



.who__tag{ font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#151515; display:block; }
.who__panel-inner{ display:grid; grid-template-columns:1fr 1.5fr; border:1px solid #e0e0e0; border-radius:4px; overflow:hidden; }
.who__panel-left{ background:#151515; padding:2rem 1.75rem; display:flex; flex-direction:column; gap:1rem; align-items:flex-start; justify-content:flex-start; }
.who__panel-left .btn{ align-self:flex-start; margin-top:.75rem; font-size: 0.85rem; }
.who__panel-tag{ font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#F8CD04; }
.who__panel-title{ font-family:var(--font-heading); font-size:1.75rem; letter-spacing:.03em; text-transform:uppercase; color:#fff; line-height:1.15; }
.who__panel-body{ font-size:.875rem; color:var(--clr-text-muted); line-height:1.65; }
.who__panel-body p{ margin:0 0 1rem; }
.who__panel-body p:last-child{ margin-bottom:0; }
.who__panel-body ul,
.who__panel-body ol{ margin:0 0 1rem; padding-left:1.25rem; }
.who__panel-body ul{ list-style:disc; }
.who__panel-body ol{ list-style:decimal; }
.who__panel-body li{ margin-bottom:.35rem; }
.who__panel-body li::marker{ color: var(--clr-black); }
.who__card-text{ font-size:.8rem; color:#151515; line-height:1.6; }
.who__card-text p{ margin:0 0 .5rem; }
.who__card-text p:last-child{ margin-bottom:0; }
.who__card-text ul,
.who__card-text ol{ margin:0; padding-left:1.1rem; }
.who__card-text ul{ list-style:disc; }
.who__card-text ol{ list-style:decimal; }
.who__card-text li{ margin-bottom:.25rem; }
.who__card-text li::marker{ color: var(--clr-black); }
.who__grid{ display:grid; grid-template-columns:repeat(2,1fr); }
.who__card{ background:#fff; padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.3rem; border-left:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; }
.who__card:nth-child(3),.who__card:nth-child(4){ border-bottom:none; }
.who__card-num{ font-size:.65rem; font-weight:700; letter-spacing:.12em; color:var( --clr-davy-grey); text-align:right; margin-bottom:-.5rem; }
.who__card-icon{ display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px; background:#F8CD04;  flex-shrink:0; }
.who__card strong{ font-family:var(--font-heading); font-size:.95rem; letter-spacing:.05em; text-transform:uppercase; color:var(--clr-dark-grey); }
.who__card p{ font-size:.8rem; color:#151515; line-height:1.6; }
@media(max-width:1024px){ .who__panel-inner{ grid-template-columns:1fr; } .who__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .who__grid{ grid-template-columns:1fr; } }

/* sections/_testimonials-home.css */
/* ── Testimonials ── */
.testimonials{ background:var(--clr-black); }
.testimonials__layout{ display:grid; grid-template-columns:1fr 2fr; gap:3rem; align-items:start; }
/* Left column */
.testimonials__tag{ font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--clr-yellow); display:block; }
.testimonials__headline{ font-family:var(--font-heading); font-size:clamp(2.5rem,4vw,3.75rem); font-weight:900; line-height:0.8; text-transform:uppercase; color:var(--clr-white); margin-bottom:1.25rem; letter-spacing:.01em; }
.testimonials__headline span{ color:var(--clr-yellow); }
.testimonials__meta{ display:none; /* Hidden for now — Google review score/count */ align-items:center; gap:.5rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.testimonials__review-btn{
  margin-top:0;
  border-radius:0;
  padding:.875rem 1.5rem;
  font-size:.85rem;
  letter-spacing:.1em;
  border-width:0;
}
.testimonials__review-btn:hover{
  transform:none;
}
.testimonials__stars-row{ color:var(--clr-yellow); font-size:1.1rem; letter-spacing:.05em; }
.testimonials__score{ font-family:var(--font-heading); font-size:1rem; color:var(--clr-white); font-weight:700; }
.testimonials__count{ font-size:.75rem; color:#888; }
.testimonials__nav{ display:flex; gap:.75rem; }
.testimonials__layout > .testimonials__nav{ display:none; }
.testimonials__btn{ width:40px; height:40px; min-width:40px; min-height:40px; border-radius:4px; border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--clr-white); font-size:1rem; cursor:pointer; transition:background .15s,border-color .15s; }
.testimonials__btn:hover{ background:var(--clr-yellow); border-color:var(--clr-yellow); color:var(--clr-black); }
/* Cards */
.testimonials__track{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; column-gap:1.25rem; row-gap:1rem; align-items:stretch; }
.testimonials__card{ background:#111; border:1px solid rgba(255,255,255,.08); border-radius:0; padding:1.25rem; display:flex; flex-direction:column; grid-row:1; }
.testimonials__nav--featured{ grid-column:2; grid-row:2; align-self:start; }
.testimonials__card--featured{ border-color:var(--clr-yellow); border-width:2px; }
.testimonials__company{ font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#B0A256; order:2; }
.testimonials__card-header{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; order:1; min-width:0; }
.testimonials__name{ font-size:.9rem; font-weight:700; color:#999; order:0; min-width:0; overflow-wrap:anywhere; }
.testimonials__ago{ font-size:.65rem; color:#8E8E8E; white-space:nowrap; flex-shrink:0; }
.testimonials__stars{ color:#888; font-size:.9rem; letter-spacing:.05em; order:3; }
.testimonials__review{ font-size:.8rem; color:#888; line-height:1.7; font-style:italic; flex:1; order:4; }
.testimonials__read-more{ order:5; align-self:flex-start; margin-top:.25rem; }
.testimonials__card .reviews-page__read-more.testimonials__read-more{ color:#E2C93A; }
.testimonials__card .reviews-page__read-more.testimonials__read-more:hover{ color:var(--clr-white); }
.testimonials__card--featured .testimonials__name{ color:var(--clr-white); }
.testimonials__card--featured .testimonials__ago{ color:#B0B0B0; }
.testimonials__card--featured .testimonials__company{ color:var(--clr-yellow); }
.testimonials__card--featured .testimonials__stars{ color:var(--clr-yellow); }
.testimonials__card--featured .testimonials__review{ color:var(--clr-white); }
.testimonials__card--featured .reviews-page__read-more.testimonials__read-more{ color:var(--clr-yellow); }
.testimonials__card--featured .reviews-page__read-more.testimonials__read-more:hover{ color:var(--clr-white); }
@media(max-width:1024px){ .testimonials__layout{ grid-template-columns:1fr; } .testimonials__track{ grid-template-columns:1fr; } .testimonials__card{ display:none; grid-row:auto; } .testimonials__card--featured{ display:flex; grid-column:1; grid-row:1; } .testimonials__nav--featured{ grid-column:1; grid-row:2; } }
@media(max-width:640px){ .testimonials__card--featured{ display:flex; } .testimonials__review-btn{ width:100%; justify-content:center; } .testimonials__card-header{ flex-wrap:wrap; } .testimonials__ago{ white-space:normal; } }

/* sections/_faq-accordion.css */
/* -- FAQ -- */
.faq{ background:var(--clr-white); color:#151515; }
.faq__tag{ font-size:.65rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#151515; text-align:center; }
.faq__headline{ font-family:var(--font-heading); font-size:var(--fs-h1); line-height:.80; text-transform:uppercase; margin-bottom:3rem; letter-spacing:.01em; text-align:center; display:flex; flex-direction:column; align-items:center; }
.faq__headline-line1{ color:#151515; display:block; width:fit-content; }
.faq__headline-line2{ color:#151515; display:block; background:var(--clr-yellow); width:fit-content; margin-top: 0.2rem;
  padding: 0.15rem;
  padding-top: 0rem;}
.faq__list{ display:flex; flex-direction:column; border-top:3px solid #151515; }
.faq__all-cta{
  display:flex;
  justify-content:center;
  margin-top:2rem;
}
.faq__all-btn{
  min-width:11rem;
  justify-content:center;
}
.faq .faq__all-btn.btn--primary{
  background:var(--clr-yellow);
  color:var(--clr-black);
  border-color:var(--clr-yellow);
}
.faq .faq__all-btn.btn--primary:hover{
  background:#e0b900;
  border-color:#e0b900;
  color:var(--clr-black);
}
.faq__item{ border-bottom:1px solid #e0e0e0; }
.faq__item-heading{ margin:0; font-size:inherit; }
/* Answer hidden by default via [hidden] attribute */
.faq__answer{ padding:0 0 1.5rem 3.5rem; }
.faq__answer[hidden]{ display:none; }
.faq__answer p{ font-size:.95rem; color:#555; line-height:1.75; max-width:720px; }
.faq__answer-body{ font-size:.95rem; color:#555; line-height:1.75; max-width:720px; }
.faq__answer-body p{ margin:0 0 1rem; }
.faq__answer-body p:last-child{ margin-bottom:0; }
/* Question row */
.faq__question{ width:100%; display:flex; align-items:center; gap:1rem; padding:1.5rem 0; background:transparent; border:none; color:#151515; font-family:var(--font-body); font-size:clamp(0.9rem,1.5vw,1.1rem); font-weight:900; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; text-align:left; transition:color .15s; }
.faq__question:focus-visible{ outline:2px solid var(--clr-yellow); outline-offset:4px; border-radius:2px; }
.faq__question:hover .faq__q-text{ color:#151515; }
.faq__num{ background:var(--clr-yellow); color:#000; font-size:1.3rem; font-weight:900; letter-spacing:.05em; flex-shrink:0; font-family:var(--font-body); display:inline-flex; align-items:center; justify-content:center; padding:.25rem .5rem; }
.faq__q-text{ flex:1; color:#151515; font-weight:900; }
/* Toggle icon � square button */
.faq__icon{ margin-left:auto; flex-shrink:0; width:42px; height:42px; border:2px solid #000; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:300; color:#151515; transition:background .15s, border-color .15s, color .15s; line-height:1; background:#fff; }
.faq__icon-minus{ display:none; }
.faq__icon-plus{ display:block; }
.faq__item--open .faq__icon{ background:var(--clr-yellow); border-color:var(--clr-yellow); color:#151515; }
.faq__item--open .faq__icon-plus{ display:none; }
.faq__item--open .faq__icon-minus{ display:block; }
.faq__footer{
  margin-top:1.5rem;
  text-align:center;
  font-size:1rem;
  color:#767676;
  line-height:1.6;
}
.faq__footer-link{
  color:#151515;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .15s;
}
.faq__footer-link:hover{
  color:var(--clr-yellow-muted);
}
@media(max-width:768px){
  .faq__headline{ margin-bottom:2rem; }
  .faq__answer{ padding:0 0 1.25rem 2.5rem; }
  .faq__question{ gap:.85rem; padding:1.15rem 0; }
  .faq__num{ font-size:1.15rem; }
  .faq__icon{ width:36px; height:36px; font-size:1.2rem; }
}
@media(max-width:480px){
  .faq__answer{ padding-left:0; }
  .faq__question{ gap:.75rem; }
  .faq__num{ font-size:1rem; }
  .faq__q-text{ overflow-wrap:anywhere; }
}

/* components/_lockitup-headline.css */
/* Lock-It-Up branded headline (shared: homepage section, get-price) */
.lockitup__headline {
  font-family: var(--font-heading);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 0;
  letter-spacing: -0.01em;
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lockitup__headline-top {
  display: block;
  font-size: clamp(2.75rem, 6vw, 5.75rem);
  color: var(--clr-white);
  width: max-content;
  max-width: 100%;
  margin-left: -0.15rem;
  white-space: nowrap;
}

.lockitup__headline-bottom {
  display: block;
  width: max-content;
  max-width: 100%;
  line-height: 1;
  margin-top: -0.12em;
  text-align: left;
}

.lockitup__up {
  display: inline-block;
  background: var(--clr-yellow);
  color: var(--clr-black);
  font-size: clamp(2.75rem, 6vw, 5.75rem);
  padding: 0 0.12em 0.04em 0.08em;
  line-height: 0.92;
  white-space: nowrap;
}

.lockitup__sq {
  display: inline-block;
  width: 0.18em;
  height: 0.18em;
  background: var(--clr-yellow);
  vertical-align: 0.15em;
  margin: 0 0.04em;
  font-style: normal;
  border-radius: 0;
  flex-shrink: 0;
}

.lockitup__sq--dark {
  background: var(--clr-black);
  vertical-align: 0;
  margin-left: 0.05em;
}

/* Large tablet */
@media (max-width: 1024px) {
  .lockitup__headline-top,
  .lockitup__up {
    font-size: clamp(2.75rem, 5.2vw, 4.5rem);
  }
}

/* Phone / small tablet — fill most of the content width */
@media (max-width: 768px) {
  .lockitup__headline-top,
  .lockitup__up {
    font-size: clamp(2.5rem, 10.5vw, 3.75rem);
  }

  .lockitup__up {
    padding: 0 0.1em 0.03em 0.06em;
  }
}

@media (max-width: 480px) {
  .lockitup__headline-top,
  .lockitup__up {
    font-size: clamp(2.35rem, 11vw, 3.25rem);
  }
}

/* sections/_lock-it-up.css */
/* -- Lock It Up -- */
.lockitup{ background:var(--clr-bg); position:relative; overflow:hidden; }

/* Live info row � inside body, no box */
.lockitup__info-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2.5rem; }
.lockitup__live{ display:inline-flex; align-items:center; gap:.55rem; font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--clr-text-muted); }
.lockitup__live-dot{ width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 7px #4ade80; flex-shrink:0; }
.lockitup__stage{ font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--clr-text-muted); }

/* Centred tagline with yellow gradient side rules */
.lockitup__tagline{ display:flex; align-items:center; gap:1.5rem; margin-bottom:2rem; }
.lockitup__tagline::before{ content:''; flex:1; height:2px; background:linear-gradient(to left, var(--clr-yellow-muted), transparent); }
.lockitup__tagline::after{ content:''; flex:1; height:2px; background:linear-gradient(to right, var(--clr-yellow-muted), transparent); }
.lockitup__tagline-text{ font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--clr-yellow); white-space:nowrap; }

/* Main headline + CTAs */
.lockitup__hero{ display:grid; grid-template-columns:1fr 1fr; gap:2rem 3rem; align-items:center; margin-bottom:3rem; }

/* Headline typography � components/_lockitup-headline.css */

/* Step cards */
.lockitup__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:6px; overflow:hidden; margin-bottom:0; }
.lockitup__step{ background:var(--clr-black); padding:1.5rem 1.5rem 1.75rem; position:relative; display:flex; flex-direction:column; gap:.5rem; }
.lockitup__step-num{ position:absolute; top:.75rem; right:.85rem; font-size:.6rem; font-weight:700; letter-spacing:.12em; color:var(--clr-text-muted); font-family:var(--font-body); }
.lockitup__step strong{ display:block; font-family:var(--font-heading); font-size:1.1rem; letter-spacing:.1em; text-transform:uppercase; color:var(--clr-yellow); margin-top:.25rem; }
.lockitup__step p{ font-size:.75rem; color:var(--clr-text-muted); line-height:1.65; }

/* CTA column */
.lockitup__ctas{
  --lockitup-cta-width: 84%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:1.75rem;
  align-self:center;
  width:100%;
}

.lockitup__ctas .btn{ border-radius:0; }
.lockitup__cta-primary{
  justify-content:center;
  width:var(--lockitup-cta-width);
  border-width:0;
  letter-spacing:.1em;
  min-height:3.875rem;
  padding:1.125rem 1.75rem;
  font-size:1.1rem;
}
.lockitup__ctas-row{
  display:flex;
  align-items:stretch;
  gap:1.35rem;
  width:var(--lockitup-cta-width);
}
.lockitup__cta-secondary{
  flex:1 1 0;
  min-width:0;
  justify-content:center;
  min-height:3.875rem;
  padding:1rem 1.35rem;
  font-size:.95rem;
  letter-spacing:.1em;
}
.lockitup__phone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:.75rem;
  min-height:3.875rem;
  padding:1rem 1.35rem;
  font-family:var(--font-heading);
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--clr-white);
  border:1px solid rgba(255,255,255,.2);
  transition:color .15s,border-color .15s,background .15s;
  white-space:nowrap;
  text-decoration:none;
  box-sizing:border-box;
}
.lockitup__phone svg{
  width:1.25rem;
  height:1.25rem;
  flex-shrink:0;
}
.lockitup__phone:hover{ color:var(--clr-yellow); border-color:var(--clr-yellow); }
.lockitup__ctas .btn--outline {
  background:  transparent;
  color:       var(--clr-white);
  border-color:var(--clr-text-muted);
}
.lockitup__ctas .btn--outline:hover {
  background:  transparent;
  color:       var(--clr-white);
  border-color:var(--clr-text-muted);
}

/* Section divider — matches .home-video__divider */
.lockitup__stripe{
  width: 100%;
  height: 2px;
  background: var(--clr-accent);
  display: block;
}

@media(max-width:768px){
  .lockitup__hero{ grid-template-columns:1fr; align-items:start; gap:2rem; }
  .lockitup__headline{ width:100%; }
  .lockitup__ctas{ max-width:100%; align-self:stretch; align-items:stretch; }
  .lockitup__cta-primary,
  .lockitup__ctas-row{ width:100%; }
  .lockitup__ctas-row{ flex-direction:column; }
  .lockitup__phone{ width:100%; }
  .lockitup__steps{ grid-template-columns:1fr; }
  .lockitup__info-row{ flex-direction:column; align-items:flex-start; gap:.5rem; }
}
@media(max-width:480px){
  .lockitup__tagline{ gap:.75rem; }
  .lockitup__tagline-text{ white-space:normal; text-align:center; line-height:1.4; }
  .lockitup__phone{ white-space:normal; text-align:center; }
}

/* components/_testimonials-modal.css */
/* ── Shared testimonial Read More modal (homepage, location, reviews) ── */
body.reviews-modal-open {
  overflow: hidden;
}

.reviews-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 400);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 1rem);
}

.reviews-modal[hidden] {
  display: none;
}

.reviews-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.reviews-modal__content {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--clr-dark-grey, #2F2F2D);
  border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.1));
  padding: var(--space-8, 2rem) var(--space-6, 1.5rem) var(--space-6, 1.5rem);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--clr-yellow, #F8CD04) rgba(255, 255, 255, 0.05);
}

.reviews-modal__content::-webkit-scrollbar {
  width: 6px;
}

.reviews-modal__content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.reviews-modal__content::-webkit-scrollbar-thumb {
  background: var(--clr-yellow, #F8CD04);
  border-radius: 3px;
}

.reviews-modal__content::-webkit-scrollbar-thumb:hover {
  background: var(--clr-white, #fff);
}

.reviews-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.1));
  color: var(--clr-white, #fff);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.reviews-modal__close:hover {
  background: var(--clr-yellow, #F8CD04);
  color: var(--clr-black, #000);
}

.reviews-modal__author {
  margin-bottom: var(--space-5, 1.25rem);
  padding-bottom: var(--space-4, 1rem);
  padding-right: var(--space-10, 2.5rem);
  border-bottom: 1px solid var(--clr-border, rgba(255, 255, 255, 0.1));
}

.reviews-page__card-author-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  min-width: 0;
}

.reviews-modal .reviews-page__card-logo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--clr-border, rgba(255, 255, 255, 0.15));
}

.reviews-modal .reviews-page__card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reviews-page__card-logo-fallback {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-black, #151515);
  line-height: 1;
  text-transform: uppercase;
}

.reviews-page__card-author-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.reviews-modal .reviews-page__card-name {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--clr-white, #fff);
}

.reviews-modal .reviews-page__card-company {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--clr-yellow, #F8CD04);
  line-height: 1.3;
}

.reviews-modal .reviews-page__card-details {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--clr-text-muted, #6a6a6a);
  line-height: 1.4;
}

.reviews-modal__stars {
  color: var(--clr-yellow, #F8CD04);
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3, 0.75rem);
}

.reviews-modal__quote {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--clr-text-muted, #ccc);
  font-style: italic;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .reviews-modal .reviews-page__card-logo {
    width: 48px;
    height: 48px;
  }

  .reviews-modal__author {
    padding-right: var(--space-8, 2rem);
  }

  .reviews-modal__content {
    padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
    max-height: 90vh;
  }
}

@media (max-width: 360px) {
  .reviews-modal {
    padding: var(--space-2, 0.5rem);
  }

  .reviews-modal__close {
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
  }
}