/*
 * Casalta v100 — centered mobile opening.
 *
 * The approved v85 foundation remains intact. At phone widths, the official
 * screen-grade wordmark, two-line statement, and store artwork become one
 * compact centered group at the top of the full-screen architectural hero.
 * Tablet and desktop compositions remain unchanged.
 */

@media (max-width: 700px) {
  /*
   * The compact navigation is one continuous liquid-glass surface with the
   * open top bar. The phone header uses a 16px inset while the older menu
   * positioning compensates by only 12px, leaving a visible strip at each
   * edge; compensate for the actual header inset here.
   */
  .site-v2.site-v74.site-v83.site-v85.site-v100
    .site-header.is-open
    .site-nav {
    left: -16px;
    right: -16px;
    width: auto;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .home-hero--studio
    .hero-screen {
    background: rgb(192, 210, 225);
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .home-hero--studio
    .hero-screen
    > img:first-child {
    bottom: 0;
    height: 84%;
    position: absolute;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100 .hero-download {
    align-items: center;
    justify-content: flex-start;
    padding:
      max(
        clamp(36px, calc(13.3vw - 8px), 44px),
        calc(env(safe-area-inset-top) + 12px)
      )
      18px
      max(36px, calc(env(safe-area-inset-bottom) + 24px));
    text-align: center;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100 .responsive-logo--hero {
    margin: 0 auto;
    width: clamp(168px, 47vw, 204px);
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .hero-download
    .hero-pitch {
    font-size: clamp(18px, 4.9vw, 20px);
    line-height: 1.2;
    margin: clamp(14px, 4.6vw, 18px) auto 0;
    max-width: 345px;
    text-align: center;
    width: 100%;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100 .store-badges {
    display: flex;
    gap: clamp(8px, 2.3vw, 10px);
    justify-content: center;
    margin: clamp(10px, 3.6vw, 14px) auto 0;
    width: auto;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100 .store-badge {
    flex: 0 0 auto;
    max-width: 114px;
    width: clamp(104px, 26.5vw, 114px);
  }

}

@media (max-width: 900px) {
  .site-v2.site-v74.site-v83.site-v85.site-v100 .site-header.is-open,
  .site-v2.site-v74.site-v83.site-v85.site-v100
    .site-header.is-open
    .site-nav,
  :root[data-casalta-visual-header="custom"]
    .site-v2.site-v74.site-v83.site-v85.site-v100
    .site-header.is-open,
  :root[data-casalta-visual-header="custom"]
    .site-v2.site-v74.site-v83.site-v85.site-v100
    .site-header.is-open
    .site-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
    border-color: transparent;
    box-shadow: none;
  }
}

@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
  @media (max-width: 900px) {
    .site-v2.site-v74.site-v83.site-v85.site-v100 .site-header.is-open,
    .site-v2.site-v74.site-v83.site-v85.site-v100
      .site-header.is-open
      .site-nav,
    :root[data-casalta-visual-header="custom"]
      .site-v2.site-v74.site-v83.site-v85.site-v100
      .site-header.is-open,
    :root[data-casalta-visual-header="custom"]
      .site-v2.site-v74.site-v83.site-v85.site-v100
      .site-header.is-open
      .site-nav {
      -webkit-backdrop-filter:
        saturate(var(--casalta-visual-header-saturation-target, 180%))
        blur(var(--casalta-visual-header-blur-target, 20px));
      backdrop-filter:
        saturate(var(--casalta-visual-header-saturation-target, 180%))
        blur(var(--casalta-visual-header-blur-target, 20px));
      background: rgba(
        255,
        255,
        255,
        var(--casalta-visual-header-opacity-target, 0.8)
      );
    }
  }
}

@media (max-width: 900px) and (prefers-reduced-transparency: reduce) {
  .site-v2.site-v74.site-v83.site-v85.site-v100 .site-header.is-open,
  .site-v2.site-v74.site-v83.site-v85.site-v100
    .site-header.is-open
    .site-nav,
  :root[data-casalta-visual-header="custom"]
    .site-v2.site-v74.site-v83.site-v85.site-v100
    .site-header.is-open,
  :root[data-casalta-visual-header="custom"]
    .site-v2.site-v74.site-v83.site-v85.site-v100
    .site-header.is-open
    .site-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
  }
}

@media (max-width: 900px) {
  /*
   * Keep the default compact map controls at the map edge. Earlier compact
   * rules reserve space for the selected-place card even while it is hidden,
   * which leaves these controls floating around the middle of the map.
   */
  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid:has(> .parcel-card[data-empty])
    .map-actions,
  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid:has(> .parcel-card[data-empty])
    .map-scale {
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid:has(> .parcel-card[data-empty])
    .map-actions {
    flex-direction: row;
    left: auto;
    right: max(16px, calc(env(safe-area-inset-right) + 12px));
    transform: none;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid:has(> .parcel-card[data-empty])
    .map-scale {
    left: max(16px, calc(env(safe-area-inset-left) + 12px));
  }
}

@media (max-width: 360px) {
  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid:has(> .parcel-card[data-empty])
    .map-actions,
  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid:has(> .parcel-card[data-empty])
    .map-scale {
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid:has(> .parcel-card[data-empty])
    .map-actions {
    flex-direction: column;
    right: max(14px, calc(env(safe-area-inset-right) + 10px));
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid:has(> .parcel-card[data-empty])
    .map-scale {
    left: max(14px, calc(env(safe-area-inset-left) + 10px));
  }
}

.site-v2.site-v74.site-v83.site-v85.site-v100
  .atlas-grid:fullscreen:has(> .parcel-card[data-empty])
  .map-actions,
.site-v2.site-v74.site-v83.site-v85.site-v100
  .atlas-grid:fullscreen:has(> .parcel-card[data-empty])
  .map-scale,
.site-v2.site-v74.site-v83.site-v85.site-v100
  .atlas-grid:-webkit-full-screen:has(> .parcel-card[data-empty])
  .map-actions,
.site-v2.site-v74.site-v83.site-v85.site-v100
  .atlas-grid:-webkit-full-screen:has(> .parcel-card[data-empty])
  .map-scale,
.site-v2.site-v74.site-v83.site-v85.site-v100.is-map-expanded
  .atlas-grid:has(> .parcel-card[data-empty])
  .map-actions,
.site-v2.site-v74.site-v83.site-v85.site-v100.is-map-expanded
  .atlas-grid:has(> .parcel-card[data-empty])
  .map-scale {
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
}

.site-v2.site-v74.site-v83.site-v85.site-v100
  .atlas-grid:fullscreen:has(> .parcel-card[data-empty])
  .map-scale,
.site-v2.site-v74.site-v83.site-v85.site-v100
  .atlas-grid:-webkit-full-screen:has(> .parcel-card[data-empty])
  .map-scale,
.site-v2.site-v74.site-v83.site-v85.site-v100.is-map-expanded
  .atlas-grid:has(> .parcel-card[data-empty])
  .map-scale {
  left: max(16px, calc(env(safe-area-inset-left) + 12px));
}

/*
 * V100 map controls use purpose-built vector icons and fixed square hit areas.
 * The explicit state colors resolve the older white-on-white sticky-hover and
 * full-screen-active cascade on touch devices.
 */
.site-v2.site-v74.site-v83.site-v85.site-v100 .map-actions button {
  -webkit-backdrop-filter: none;
  align-items: center;
  aspect-ratio: 1;
  backdrop-filter: none;
  background: #fff;
  border: 1px solid #000;
  border-radius: 999px;
  box-shadow: none;
  color: #000;
  display: inline-flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
  width: 44px;
}

.site-v2.site-v74.site-v83.site-v85.site-v100 .map-action-icon,
.site-v2.site-v74.site-v83.site-v85.site-v100 .map-activation-icon {
  fill: none;
  flex: 0 0 auto;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 18px;
}

.site-v2.site-v74.site-v83.site-v85.site-v100 .map-icon-collapse {
  display: none;
}

.site-v2.site-v74.site-v83.site-v85.site-v100
  [data-fullscreen].is-active
  .map-icon-expand {
  display: none;
}

.site-v2.site-v74.site-v83.site-v85.site-v100
  [data-fullscreen].is-active
  .map-icon-collapse {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .site-v2.site-v74.site-v83.site-v85.site-v100
    .map-actions
    button:not(:disabled):hover {
    background: #000;
    border-color: #000;
    color: #fff;
  }
}

.site-v2.site-v74.site-v83.site-v85.site-v100
  .map-actions
  button:not(:disabled):active {
  background: #000;
  border-color: #000;
  color: #fff;
  transform: scale(0.96);
}

.site-v2.site-v74.site-v83.site-v85.site-v100
  .map-actions
  button.is-active {
  background: #000;
  border-color: #000;
  color: #fff;
}

.site-v2.site-v74.site-v83.site-v85.site-v100
  .map-actions
  button:focus-visible,
.site-v2.site-v74.site-v83.site-v85.site-v100
  .map-activation-button:focus-visible,
.site-v2.site-v74.site-v83.site-v85.site-v100
  .map-deactivation-button:focus-visible {
  box-shadow: none !important;
  outline: 3px solid #000;
  outline-offset: 3px;
}

.site-v2.site-v74.site-v83.site-v85.site-v100
  .map-actions
  button:disabled {
  background: #fff;
  color: #72726e;
  cursor: not-allowed;
  opacity: 0.68;
}

.site-v2.site-v74.site-v83.site-v85.site-v100 .map-interaction-gate {
  display: none;
}

@media (max-width: 900px) {
  .site-v2.site-v74.site-v83.site-v85.site-v100 .atlas-grid {
    --v100-map-card-bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
    --v100-map-card-height: min(36%, 280px);
    --v100-map-control-bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]
    > .parcel-card:not([data-empty]) {
    bottom: var(--v100-map-card-bottom);
    max-height: var(--v100-map-card-height);
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]:has(> .parcel-card[data-empty])
    :is(.map-actions, .map-scale) {
    bottom: var(--v100-map-control-bottom);
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]:has(> .parcel-card:not([data-empty]))
    :is(.map-actions, .map-scale) {
    bottom: calc(
      var(--v100-map-card-bottom) +
      var(--v100-map-card-height) +
      12px
    );
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]:has(.layer-panel[open])
    :is(.map-actions, .map-scale) {
    bottom: var(--v100-map-control-bottom);
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="locked"]
    #cityMap {
    cursor: default;
    pointer-events: none;
    touch-action: pan-y;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]
    #cityMap {
    cursor: grab;
    touch-action: none;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]
    #cityMap:active {
    cursor: grabbing;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]
    #cityMap:focus-visible {
    outline: 3px solid #000;
    outline-offset: -6px;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="locked"]
    .map-interaction-gate {
    align-content: center;
    display: grid;
    gap: 0;
    inset: 0;
    justify-items: center;
    padding: 24px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    z-index: 11;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="locked"]
    .map-activation-button {
    align-items: center;
    background: #fff;
    border: 1px solid #000;
    border-radius: 999px;
    color: #000;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--display-font);
    font-size: 16px;
    font-weight: 500;
    gap: 10px;
    justify-content: center;
    letter-spacing: 0;
    min-height: 48px;
    padding: 0 20px;
    pointer-events: auto;
  }

  @media (hover: hover) and (pointer: fine) {
    .site-v2.site-v74.site-v83.site-v85.site-v100
      .atlas-grid[data-map-interaction="locked"]
      .map-activation-button:hover {
      background: #000;
      color: #fff;
    }
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="locked"]
    .map-activation-button:active {
    background: #000;
    color: #fff;
    transform: scale(0.96);
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="locked"]
    :is(.map-actions, .atlas-sidebar) {
    display: none;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]
    .map-actions {
    flex-direction: column;
    left: auto;
    right: max(16px, calc(env(safe-area-inset-right) + 12px));
    transform: none;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]
    .atlas-sidebar {
    left: max(16px, calc(env(safe-area-inset-left) + 12px));
    right: auto;
    top: max(16px, calc(env(safe-area-inset-top) + 12px));
    width: min(280px, calc(100% - 32px));
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .map-deactivation-button[hidden] {
    display: none !important;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-mode="inline"]
    .map-deactivation-button {
    align-items: center;
    background: #fff;
    border: 1px solid #000;
    border-radius: 999px;
    color: #000;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--display-font);
    font-size: 15px;
    font-weight: 500;
    height: 44px;
    justify-content: center;
    min-width: 64px;
    padding: 0 14px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 2;
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-mode="inline"]
    .layer-panel
    summary {
    padding-right: 88px;
  }

  @media (hover: hover) and (pointer: fine) {
    .site-v2.site-v74.site-v83.site-v85.site-v100
      .atlas-grid[data-map-mode="inline"]
      .map-deactivation-button:hover {
      background: #000;
      color: #fff;
    }
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-mode="inline"]
    .map-deactivation-button:active {
    background: #000;
    color: #fff;
    transform: scale(0.96);
  }
}

@media (max-width: 560px) {
  .site-v2.site-v74.site-v83.site-v85.site-v100 .atlas-grid {
    --v100-map-card-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
    --v100-map-card-height: min(
      240px,
      max(140px, calc(100% - 258px))
    );
  }
}

@media (max-width: 360px) {
  .site-v2.site-v74.site-v83.site-v85.site-v100 .atlas-grid {
    --v100-map-control-bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]
    .map-actions {
    right: max(14px, calc(env(safe-area-inset-right) + 10px));
  }

  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-interaction="active"]
    .atlas-sidebar {
    left: max(14px, calc(env(safe-area-inset-left) + 10px));
    top: max(14px, calc(env(safe-area-inset-top) + 10px));
    width: min(280px, calc(100% - 28px));
  }
}

@media (max-width: 900px) and (max-height: 500px) {
  .site-v2.site-v74.site-v83.site-v85.site-v100
    .atlas-grid[data-map-mode="inline"]
    :is(.map-actions, .map-scale) {
    bottom: auto !important;
    top: max(86px, calc(env(safe-area-inset-top) + 82px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-v2.site-v74.site-v83.site-v85.site-v100 .map-actions button,
  .site-v2.site-v74.site-v83.site-v85.site-v100 .map-activation-button,
  .site-v2.site-v74.site-v83.site-v85.site-v100 .map-deactivation-button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .site-v2.site-v74.site-v83.site-v85.site-v100 .map-actions button,
  .site-v2.site-v74.site-v83.site-v85.site-v100 .map-activation-button,
  .site-v2.site-v74.site-v83.site-v85.site-v100 .map-deactivation-button {
    forced-color-adjust: auto;
  }
}

@media (max-width: 700px) and (max-height: 650px) {
  .site-v2.site-v74.site-v83.site-v85.site-v100
    .home-hero--studio
    .hero-screen
    > img:first-child {
    height: 80%;
  }
}