/* ============================================
   Layout: Containers, Grid, Flexbox
   ============================================ */

/* Page Wrapper */
.page-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* dvh accounts for mobile browser chrome (address bar) showing/hiding —
     100vh alone is the classic mobile bug where it's measured against the
     shrunk viewport, then jumps/clips as the chrome collapses on scroll.
     vh stays first as the fallback for browsers without dvh support. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Wraps header + everything through .section-property-details so the
   sticky header's containing block ends there — it releases before
   .section-contact-cta instead of persisting for the whole page.
   position:relative is for the mobile bottom-bar's release handoff (see
   .header-sticky.is-header-released in responsive.css + js/main.js) — a
   bottom-anchored sticky element positioned first in a tall container
   never actually catches (it only ever scrolls away like static), so
   mobile fakes the same release-at-container-end behavior with JS
   toggling position:fixed -> position:absolute against this box. Doesn't
   affect desktop's real position:sticky, which keys off the scroll
   container, not the nearest positioned ancestor. */
.header-scroll-region {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-256);
}

.page-wrapper > .section-contact-cta {
  margin-top: var(--space-24);
}

/* Main Content */
.main-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-256);
}

.rest-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.content-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.property-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

/* Section Container */
.section-container {
  width: 100%;
  max-width: calc(var(--size-container-max) + 2 * var(--size-container-padding));
  margin: 0 auto;
  padding: 0 var(--size-container-padding);
  box-sizing: border-box;
}

/* ============================================
   Header
   ============================================ */

.header-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);

  width: 100%;
  background-color: transparent;
  /* Transparent by design, but its full-width box still sits above
     everything at z-index var(--z-sticky) — without this, its empty
     space (outside .header-container's actual buttons) swallows clicks
     meant for whatever is stacked underneath it. */
  pointer-events: none;
  padding: var(--space-32) var(--size-container-padding) var(--space-32);

  animation: slideDown var(--transition-slow) ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-container {
  width: 100%;
  max-width: var(--size-container-max);
  margin: 0 auto;
}

.header-nav {
  width: 100%;
}

.header-actions {
  display: flex;
  gap: var(--space-32);
  align-items: flex-start;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.header-actions li {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
}

.header-actions li:first-child {
  justify-content: center;
}

.header-actions li:last-child {
  justify-content: flex-end;
}

/* ============================================
   Sections
   ============================================ */

section {
  width: 100%;
}

/* ============================================
   Hero Cover
   ============================================ */

.section-hero-cover {
  position: relative;
  height: 100vh;
  /* Pulls the section up by .header-sticky's own rendered height (135px)
     plus .header-scroll-region's 256px gap after it (391px total), so the
     image starts at the very top of the page instead of below the header.
     .header-sticky keeps its normal-flow box (unchanged) and its own
     z-index already puts it above the image — this just makes that box
     overlap the photo instead of sitting in a blank strip above it. Header
     stays position:sticky, so it continues floating over the hero as you
     scroll, same as it already does over the rest of the page. */
  margin-top: -391px;
  /* .main-content's gap (256px) is tuned for the space between fully-formed
     content sections further down the page — between a full-bleed cover
     and the opening letter that follows, that reads as a gap, not pacing.
     Pulls it down to a tighter, still-deliberate 64px. */
  margin-bottom: -192px;
}

/* Fixed 791px banner height — matches the Figma frame's deliberate crop,
   not the source photo's own aspect ratio (object-fit:cover handles the
   difference, same pattern as .location-map's fixed height below).
   Shrinks at ≤1024 — see responsive.css — once the headline drops out of
   the overlay and into normal flow below it. */
.hero-cover-media {
  position: relative;
  width: 100%;
  height: 88vh;
  overflow: hidden;
}

.hero-cover-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Two overlays from the design: a vertical vignette (top/bottom edges) plus
   a soft top-to-bottom scrim so the white logo and headline stay legible
   over the photo without flattening it. */
.hero-cover-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(41, 48, 41, 0.2) 0%, rgba(41, 48, 41, 0) 20%, rgba(41, 48, 41, 0) 80%, rgba(41, 48, 41, 0.2) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 52.9%, rgba(0, 0, 0, 0.24) 100%);
}

.hero-cover-logo {
  position: absolute;
  left: var(--size-container-padding);
  top: 40px;
  margin: 0;
  font-family: var(--font-arimo);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* Desktop: overlays the image, pinned to its bottom edge (matches Figma's
   absolute layout there) — a legitimate overlay composition, not a layout
   shortcut. Height matches .hero-cover-media exactly (not inset:0 top+bottom,
   which would stretch to the section's full height, footer included) so the
   overlay stays scoped to the photo. Drops to normal static flow below the
   (now shorter) image at ≤1024, see responsive.css. */
.hero-cover-body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 84vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 40px;
}

/* Left edge lines up with .hero-cover-logo — both just inherit
   .section-container's own left padding, no extra offset needed. */
.hero-cover-title {
  max-width: 570px;
  margin: 0;
  font-family: var(--font-arimo);
  font-size: 56px;
  font-weight: 700;
  line-height: normal;
  color: #ffffff;
}

.hero-cover-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

/* .delivery-estimate is reused as-is (see components below), but its own
   desktop margin-left aligns it under .property-credits in the Property
   Overview section further down the page — meaningless here, where
   flexbox already positions it inside the footer row. */
.hero-cover-footer .delivery-estimate {
  margin-left: 0;
}

/* Single-element centering, not a layout system — the scroll cue sits at
   the visual center of the row regardless of how wide the delivery
   estimate block next to it ends up being. */
.hero-scroll-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

/* transform isn't additive — the shared glass-button :hover/:active rules
   (components.css) set their own translateY/scale, which would otherwise
   replace this centering transform outright and knock the button off its
   centered position. Re-apply the same lift/press on top of translate(-50%,-50%)
   instead of just the shared rule's bare offset. */
.hero-scroll-btn:hover {
  transform: translate(-50%, calc(-50% - 1px));
}

.hero-scroll-btn:active {
  transform: translate(-50%, -50%) scale(0.96);
}

/* Welcome Section */
.section-welcome .section-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

/* Now nested inside .welcome-body (was a sibling with its own wider
   920px column at a shallower 354px indent) — takes on the body's own
   566px/482px column instead of keeping a separate one, so margin-bottom
   replaces .section-container's old flex gap between the two. */
.welcome-title {
  margin: 0 0 var(--space-64);
  font-family: var(--font-arimo);
  font-size: var(--font-size-48);
  font-weight: 600;
  color: var(--color-primary);
  line-height: normal;
}

.welcome-body {
  width: 566px;
  max-width: 100%;
  margin-left: 482px;
  font-family: var(--font-arimo);
  font-size: var(--font-size-24);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.welcome-body p + p {
  margin-top: 28px;
}

.hygge-text p + p {
  margin-top: 28px;
}

/* ============================================
   Property Intro
   ============================================ */

.property-intro-row {
  display: flex;
  align-items: flex-end;
  gap: 142px;
}

.property-intro-main {
  flex: 1 1 802px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.property-intro-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.property-intro-eyebrow {
  font-family: var(--font-arimo);
  font-size: var(--font-size-14);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.property-intro-title {
  font-family: var(--font-arimo);
  /* Literal 56px, matching .hero-cover-title (h1) exactly — not the
     shared --font-size-48 H2 token, so other H2s stay unaffected. */
  font-size: 56px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: normal;
}

.property-intro-specs {
  display: flex;
  gap: var(--space-32) 39px;
  flex-wrap: wrap;
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: normal;
}

.property-credits {
  flex: 0 0 448px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  font-family: var(--font-arimo);
  font-size: var(--font-size-20);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: normal;
}

.property-credits P{
  margin-top: 0;
}

/* Desktop: label + value render as one unbroken line per credit ("Projeto
   AM Studio") — both inherit .property-credits' 20px/500 by default, same
   look as before this was split into separate elements. Mobile (≤768)
   gives each its own size/weight and stacks the two credits side by side
   instead — see responsive.css, matches the Figma mobile frame. */
.property-credit {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
}

/* ============================================
   Hero Rotator
   ============================================ */

.hero-rotator {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.hero-slide {
  position: relative;
  flex: 0 0 10vw;
  height: 64vh;
  overflow: hidden;
  transition: flex-basis var(--transition-slow);
  cursor: pointer;
}

.hero-slide.is-active {
  flex: 1 1 920px;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-slide-timer {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--hero-timer-fade-duration, 250ms) ease, transform var(--hero-timer-fade-duration, 250ms) ease;
  pointer-events: none;
}

.hero-slide-timer.is-visible {
  opacity: 1;
  transform: scale(1);
}

@property --pie-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.hero-slide-timer-fill {
  --pie-angle: 0deg;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: conic-gradient(transparent 0deg, transparent var(--pie-angle), var(--color-primary) var(--pie-angle), var(--color-primary) 360deg);
}

.hero-slide-timer-fill.is-filling {
  animation: heroTimerSweep var(--hero-rotate-duration, 3s) linear forwards;
}

/* Depletes clockwise from a full circle (100%) to empty (0%) */
@keyframes heroTimerSweep {
  from {
    --pie-angle: 0deg;
  }
  to {
    --pie-angle: 360deg;
  }
}

/* ============================================
   Delivery Estimate
   ============================================ */

.delivery-estimate {
  width: 316px;
  max-width: 100%;
  /* Aligns to the same column as .property-credits (802px main + 142px gap
     from the section-container's own left padding). */
  margin-left: 944px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.delivery-estimate-label {
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: normal;
}

.delivery-estimate-value {
  font-family: var(--font-arimo);
  font-size: var(--font-size-20);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: normal;
  margin-top: 0;
}

/* ============================================
   Section Header (label + title + subtitle) shared pattern
   ============================================ */

.section-header {
  width: 448px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.section-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section-title {
  font-family: var(--font-arimo);
  font-size: var(--font-size-48);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: normal;
}

.section-subtitle {
  font-family: var(--font-arimo);
  font-size: var(--font-size-24);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
}

/* ============================================
   Hygge / Conceito Section
   ============================================ */

.section-hygge {
  padding: var(--space-128);
}

/* Figma node 972:348 — image column (330px, own 118px left inset) + text
   column (flex:1, 236px left inset before its content starts). Both insets
   are real spacing in the design, not export noise — confirmed against the
   node's rendered screenshot. */
.hygge-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}

.hygge-image-main {
  flex: 0 0 330px;
  width: 330px;
  height: 313px;
  margin-left: 118px;
}

.hygge-image-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hygge-text-column {
  flex: 1 1 0;
  min-width: 0;
  /* 448px of actual content + the real 236px inset before it (box-sizing
     is border-box site-wide, so max-width here has to cover both or the
     inset alone eats most of the 448px, wrapping text into a narrow column). */
  max-width: 684px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-left: 236px;
}

.hygge-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
}

.hygge-content .section-header {
  width: 211px;
}

.hygge-text {
  font-family: var(--font-arimo);
  font-size: var(--font-size-20);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.hygge-credit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  width: 328px;
}

.hygge-image-credit {
  position: relative;
  flex: 0 0 141px;
  width: 141px;
  height: 146px;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.hygge-image-credit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hygge-credit-text {
  flex: 1 1 0;
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.hygge-credit-name {
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.hygge-credit-role {
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.4;
}

/* ============================================
   Floor Plans
   ============================================ */

.floor-plans-intro {
  padding-left: 472px;
  margin-bottom: var(--space-64);
  /* position: sticky; */
  top: 40px;
  z-index: 1;
}

.floor-plans-title {
  font-family: var(--font-arimo);
  font-size: var(--font-size-48);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: normal;
}

.floor-plans-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-128);
}

.floor-plan-section {
  display: flex;
  gap: 142px;
  align-items: flex-start;
  /* position: sticky; */
  top: 128px;
  background-color: var(--color-background);
}

.floor-plan-content {
  flex: 0 0 330px;
  padding-top: 252px;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.floor-plan-title {
  font-family: var(--font-arimo);
  font-size: var(--font-size-40, 2.5rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: normal;
}

.floor-plan-description {
  font-family: var(--font-arimo);
  font-size: var(--font-size-20);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: normal;
}

.floor-plan-visual {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-beige-light);
}

.floor-plan-image-wrap {
  position: relative;
  width: 100%;
}

.floor-plan-image {
  width: 100%;
  height: auto;
  display: block;
}

.floor-plan-pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  transform: translate(-50%, -50%);

  width: 40px;
  height: 40px;
  padding: 8px;
  border: none;
  border-radius: 50%;
  background-color: var(--color-background);
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.floor-plan-pin:hover,
.floor-plan-pin:focus-visible {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Solid (non-glass) fill so text contrast never depends on what's behind
   it in the plan photo — glass gradients here measured as low as
   ~3.9:1 over dark areas (garden/shadow), under WCAG AA's 4.5:1.
   rgba(20,20,18,0.72) + white text holds >=4.5:1 over both a pure white
   and a pure black backdrop (~7.4:1 and ~19.3:1 respectively). */
.floor-plan-pin-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 500;
  color: #ffffff;
  pointer-events: none;
  line-height: 1;
}

/* Mobile-only replacement for .floor-plan-pin — see responsive.css ≤1024.
   On a small screen the pins sit too close together on the scaled-down
   plan image, making mistaps easy; a labeled photo grid below the plan
   gives each room a bigger, unambiguous tap target instead. Hidden on
   desktop, where the pins have enough room to stay precise. */
.floor-plan-gallery {
  display: none;
}

.floor-plan-gallery-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.floor-plan-gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  transition: transform var(--transition-base);
}

.floor-plan-gallery-item:hover img,
.floor-plan-gallery-item:focus-visible img {
  transform: scale(1.03);
}

.floor-plan-gallery-caption {
  font-family: var(--font-arimo);
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
}

/* ============================================
   Philosophy Section
   ============================================ */

.section-philosophy {
  padding: var(--space-128) 0;
}

.philosophy-content {
  width: 580px;
  max-width: 100%;
  margin-left: 472px;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.philosophy-title {
  font-family: var(--font-arimo);
  font-size: var(--font-size-48);
  font-weight: 700;
  color: #000000;
  line-height: normal;
}

.philosophy-description {
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
  width: 288px;
  max-width: 100%;
}

/* ============================================
   Photo Gallery
   ============================================ */

.gallery-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.gallery-row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.gallery-item {
  display: block;
  height: 320px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.gallery-item:hover img {
  transform: scale(1.03);
}

.gallery-item--sm {
  flex: 0 1 330px;
}

.gallery-item--md {
  flex: 0 1 448px;
}

.gallery-item--lg {
  flex: 0 1 566px;
}

.gallery-item--xl {
  flex: 1 1 920px;
}

.gallery-item--rooftop {
  width: 100%;
  height: auto;
  aspect-ratio: 1392 / 787;
}

/* ============================================
   Location: Quote + Map
   ============================================ */

.section-location {
  /* position: sticky; */
  top: 0;
  padding-top: 103px;
  z-index: 1;
  background-color: var(--color-background);
}

.section-location .section-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.location-quote-row {
  width: 100%;
  padding-left: 472px;
  box-sizing: border-box;
}

.location-quote {
  width: 802px;
  max-width: 100%;
  font-family: var(--font-arimo);
  font-size: var(--font-size-48);
  font-weight: 700;
  color: #000000;
  line-height: normal;
}

.location-quote-highlight {
  background-color: var(--color-marker);
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
}

/* Full-bleed row: legend keeps the standard container inset on the left,
   map runs flush to the viewport's right edge (matches Figma exactly —
   .location-map-row is 1440 wide while its quote-row sibling stays inset). */
.location-map-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-24);
  width: 100%;
  padding-left: var(--size-container-padding);
  margin-top: var(--space-64);
}

.location-map {
  flex: 1 1 auto;
  min-width: 0;
  /* min-height, not height — .location-map-row's align-items:stretch
     grows it to match .location-legend's real content height (now 20
     items, taller than the original 596px), instead of stopping short
     and leaving the legend running past the map's bottom edge. */
  min-height: 596px;
  background-color: #d9d9d9;
  font-family: var(--font-arimo);
}

/* Standard OSM tiles are more saturated/detailed than the Positron style
   this map used before — grayscale + brightness fakes that light, muted
   look back without a paid/keyed tile provider. */
.location-map .leaflet-tile-pane {
  filter: grayscale(1) brightness(1.08) contrast(0.95);
}

.location-legend {
  flex: 0 0 448px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
  align-content: start;
  padding: var(--space-64) 0;
  list-style: none;
  margin: 0;
}

.location-legend-item {
  display: flex;
  flex-direction: column;
}

.location-legend-distance {
  font-family: var(--font-arimo);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-forest);
}

.location-legend-name {
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--color-primary);
}

/* Leaflet marker/popup skin: bring the house pin + popup card in line with
   this site's tokens instead of Leaflet's defaults. */
.location-marker-house {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-marker);
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.location-marker-poi {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-forest);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.location-popup .leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.location-popup .leaflet-popup-content {
  margin: var(--space-12) var(--space-16);
  font-family: var(--font-arimo);
}

.location-popup-title {
  display: block;
  font-family: var(--font-arimo);
  font-size: var(--font-size-14);
  font-weight: 600;
  color: var(--color-primary);
}

.location-popup-subtitle {
  display: block;
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
}

/* ============================================
   Property Details (Amenities / Features / Installation)
   ============================================ */

.section-property-details {
  background-color: var(--color-beige-light);
  /* .content-groups' own 64px gap still applies before this section (it's
     shared/uniform across all of .content-groups' children) — cancel it
     here so the beige starts flush against .section-location above,
     instead of leaving a white gap floating between them. Desktop only —
     mobile keeps the gap. */
  margin-top: calc(-1 * var(--space-64));
  /* Was --space-256 (256px) — with .details-title no longer sticky, that
     was just dead beige void before "Características do imóvel" starts.
     This is now the section's only top spacing (margin-top above cancels
     the white gap outside it), so it reads as intentional breathing room
     inside the beige, not a leftover gap between sections. */
  padding-top: var(--space-64);
  padding-bottom: var(--space-128);
  z-index: 1;
}

.property-details-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--space-24);
}

.details-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.details-title {
  font-family: var(--font-arimo);
  /* Matches every other H2 on the page (48px) — was 40px, the H3 tier's
     own size, despite being marked up as h2 like its siblings. */
  font-size: var(--font-size-48);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
  background-color: var(--color-beige-light);
  /* Reserve room for the longest title's 2 lines so all three sit the
     same height, then bottom-align the text so a 1-line title's baseline
     matches a 2-line title's — keeps the item lists below starting flush. */
  min-height: 2.4em;
  display: flex;
  align-items: flex-end;
}

.details-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--space-32);
  background: linear-gradient(to bottom, var(--color-beige-light), transparent);
  pointer-events: none;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.details-item {
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
  /* Override the global `p + p { margin-top }` rule (reset.css) — these
     sit in a CSS grid, not flowing prose, so adjacent-sibling spacing
     must come from .details-grid's own gap, not paragraph margin. */
  margin-top: 0;
}

/* Closes out .section-property-details — PDF download, secondary to the
   "Fale com a corretora" CTA in .section-contact-cta right after this, so
   it stays an outline pill rather than the solid-fill button language. */
.details-download {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  margin-top: var(--space-64);
  padding-top: var(--space-64);
  border-top: 1px solid var(--color-border);
}

.details-download-text {
  font-family: var(--font-arimo);
  font-size: var(--font-size-20);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.details-download-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  /* min-height, not height — keeps the ~44px touch target even if the
     label wraps to two lines on a narrow column. */
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--space-12) var(--space-24);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-primary);
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.details-download-link svg {
  flex-shrink: 0;
}

.details-download-link:hover {
  background-color: var(--color-primary);
  color: var(--color-background);
}

.details-download-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.details-download-meta {
  font-family: var(--font-arimo);
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
}

/* ============================================
   Contact CTA
   ============================================ */

.section-contact-cta {
  position: relative;
  padding: var(--space-256) 0 var(--space-32) 0;
  /* Makes this section the containing block for position:fixed
     descendants (.scroll-to-top-wrap) — it behaves exactly like a
     viewport-fixed corner button, but scoped/clipped to this section
     instead of the whole page, with no JS involved. */
  transform: translateZ(0);
  min-height: 100vh;
  /* dvh accounts for mobile browser chrome — see .page-wrapper's comment. */
  min-height: 100dvh;
}

.contact-cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 129px;
  text-align: center;
}

.contact-cta-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.contact-cta-title {
  font-family: var(--font-arimo);
  font-size: var(--font-size-48);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: normal;
}

.contact-cta-description {
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: normal;
}

.contact-cta-button {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-32) 48px;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.contact-cta-button:hover {
  background-color: #1c211c;
}

.icon-whatsapp-contact {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-beige-light);
}

.contact-cta-button span {
  font-family: var(--font-arimo);
  font-size: 32px;
  font-weight: 500;
  color: var(--color-beige-light);
  white-space: nowrap;
}

.contact-cta-broker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.contact-cta-broker-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.contact-cta-broker-name {
  font-family: var(--font-arimo);
  font-size: var(--font-size-20);
  font-weight: 400;
  color: #000000;
  line-height: normal;
}

.contact-cta-broker-creci {
  font-family: var(--font-arimo);
  font-size: var(--font-size-14);
  font-weight: 600;
  text-transform: uppercase;
  color: #000000;
  line-height: normal;
}

.contact-cta-signature {
  max-width: 480px!important;
  object-fit: contain;
}

.contact-cta-legal {
  width: 920px;
  max-width: 100%;
  font-family: var(--font-arimo);
  font-size: var(--font-size-12);
  font-weight: 400;
  color: var(--color-primary);
  line-height: normal;
}

/* ============================================
   Pin Overlay
   ============================================ */

.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
}

.pin-overlay[hidden] {
  display: none;
}

.pin-overlay-backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-beige-light);
}

.pin-overlay-close {
  position: absolute;
  top: var(--space-32);
  /* Same edge alignment math as .header-container: centered up to
     --size-container-max, then pinned to --size-container-padding. */
  right: max(var(--size-container-padding), calc((100% - var(--size-container-max)) / 2));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

/* Bullets nav — same spot .cta-share sits at in the header: centered
   within the left half of .header-actions (not the raw container edge).
   Reproduces that math: container's left edge, plus half the leftover
   space in its 48px-wide li once the gap between the two li is removed. */
.pin-overlay-bullets {
  position: absolute;
  top: var(--space-32);
  --pin-overlay-container-left: max(var(--size-container-padding), calc((100% - var(--size-container-max)) / 2));
  --pin-overlay-container-width: min(calc(100% - (var(--size-container-padding) * 2)), var(--size-container-max));
  --pin-overlay-li-width: calc((var(--pin-overlay-container-width) - var(--space-32)) / 2);
  left: calc(var(--pin-overlay-container-left) + (var(--pin-overlay-li-width) - 48px) / 2);
  display: flex;
  align-items: center;
  gap: var(--space-16);
  z-index: 1;
}

.pin-overlay-bullet {
  display: flex;
  align-items: center;
  /* 0 while inactive — a nonzero gap still reserves space next to the
     collapsed (max-width:0) label even though it renders empty. */
  gap: 0;
  min-width: 48px;
  height: 48px;
  padding: var(--space-8);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-arimo);
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--color-primary);
  justify-content: center;
  transition: padding var(--transition-base), gap var(--transition-base);
}

.pin-overlay-bullet-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* width:auto isn't animatable — grow the label's max-width instead, and
   the pill (no explicit width) follows its content smoothly each frame. */
.pin-overlay-bullet-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--color-forest);
  white-space: nowrap;
  transition: max-width var(--transition-base), opacity var(--transition-fast);
}

.pin-overlay-bullet.is-active {
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-8);
}

.pin-overlay-bullet.is-active .pin-overlay-bullet-label {
  max-width: 200px;
  opacity: 1;
}

/* Current pavimento name, set by initPinOverlay's render(). Anchored to
   the top-left corner and read sideways (tilt your head left) — sits in
   the left margin, clear of .pin-overlay-prev which is vertically
   centered further down for any image of normal aspect ratio. */
.pin-overlay-floor {
  position: absolute;
  top: var(--space-64);
  left: var(--space-32);
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg);
  font-family: var(--font-arimo);
  font-size: var(--font-size-32);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  z-index: 1;
}

/* Prev/next only make sense once a floor has more than one pin —
   .has-nav is toggled on .pin-overlay by initPinOverlay's render(). */
.pin-overlay-nav {
  display: none;
  position: absolute;
  top: 50%;
  /* margin, not transform, for centering — the shared hover/active glass
     rules (components.css) set their own `transform`, which would
     otherwise clobber a centering translateY here. */
  margin-top: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--color-text-primary);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.pin-overlay.has-nav .pin-overlay-nav {
  display: flex;
}

.pin-overlay-prev {
  left: var(--space-32);
}

.pin-overlay-next {
  right: var(--space-32);
}

.pin-overlay-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.pin-overlay-image {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* ============================================
   Gallery Lightbox
   ============================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-beige-light);
}

.lightbox-close {
  position: absolute;
  top: var(--space-32);
  /* Same edge alignment math as .header-container: centered up to
     --size-container-max, then pinned to --size-container-padding. */
  right: max(var(--size-container-padding), calc((100% - var(--size-container-max)) / 2));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

/* Prev/next only make sense once the gallery has more than one photo —
   .has-nav is toggled on .lightbox by initGalleryLightbox's render(). */
.lightbox-nav {
  display: none;
  position: absolute;
  top: 50%;
  /* margin, not transform, for centering — the shared hover/active glass
     rules (components.css) set their own `transform`, which would
     otherwise clobber a centering translateY here. */
  margin-top: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--color-text-primary);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.lightbox.has-nav .lightbox-nav {
  display: flex;
}

.lightbox-prev {
  left: var(--space-32);
}

.lightbox-next {
  right: var(--space-32);
}

.lightbox-image {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}