/* ============================================================
   Residenza Due Laghi — landing page (page-scoped additions)

   Loaded in addition to styles.css. Only defines what styles.css
   does not already provide; everything else on this page reuses
   the shared design system verbatim.
   ============================================================ */

.section--stats {
  padding-block: clamp(40px, 6vw, 64px);
}

.section--stats .about__stats {
  margin: 0;
}

@media (min-width: 561px) {
  .section--stats .about__stats {
    justify-content: center;
    text-align: center;
  }
}

#specs .project__map {
  order: 0;
}

/* The base .gallery-slider rules now live in styles.css, shared with the
   portfolio rows on index.html. Only the full-bleed overrides stay here. */

/* ------------------------------------------------------------
   Two units side by side — second-floor apartments page
   ------------------------------------------------------------ */

.units-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 48px);
  margin-top: 48px;
}

.unit-card {
  border: 1px solid var(--hairline);
  padding: clamp(24px, 3vw, 36px);
  /* a column so the plan button can be pinned to the card's baseline —
     the two cards hold a different number of spec rows */
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------
   Apartments page only (body.page-apartments): dark brown ground,
   white cards outlined in gold, white specs section. Everything
   here is scoped so the penthouse page, which loads the same
   stylesheet, is untouched.
   ------------------------------------------------------------ */

.page-apartments {
  --apt-brown: #150e08;
  --apt-brown-soft: #241810;
  --apt-gold: #c9a24a;
  --apt-gold-bright: #dcb968;
}

.page-apartments .section--dark,
.page-apartments .contact {
  background: var(--apt-brown);
}

/* replaces the teal/brass ambient of the shared dark section */
.page-apartments .section--dark::before {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(201, 162, 74, 0.14) 0%, transparent 55%),
    radial-gradient(circle at 84% 88%, rgba(201, 162, 74, 0.1) 0%, transparent 52%);
}

/* The slider covers this section entirely; a dark backdrop keeps the
   sub-pixel edge above the dark units section from showing as a white line. */
.page-apartments .section.section--glimpse {
  background: var(--apt-brown);
}

.section--units {
  /* the slider button's browns, so .floorplan-cta styling carries over */
  --rdl-brown: #3b2a1e;
  --rdl-brown-hover: #5a4030;
}

/* a single pool of warm light behind the two cards */
.page-apartments .section--units.section--dark::before {
  background-image:
    radial-gradient(ellipse 62% 46% at 50% 46%, rgba(201, 162, 74, 0.22) 0%,
      rgba(201, 162, 74, 0.08) 48%, transparent 76%);
}

.page-apartments .section--units .project__price {
  color: var(--apt-gold-bright);
}

.page-apartments .section--units .project__price-dot,
.page-apartments .section--units .project__price-dot::after {
  background: var(--apt-gold-bright);
}

.page-apartments .unit-card {
  background: #fff;
  border: 1px solid var(--apt-gold);
  color: var(--ink);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.75);
}

.page-apartments .unit-card__name,
.page-apartments .unit-card .spec-table__row dt,
.page-apartments .unit-card .spec-table__row dd {
  color: var(--ink);
}

.page-apartments .unit-card .spec-table__row {
  border-bottom-color: rgba(28, 30, 26, 0.12);
}

.page-apartments .unit-card .spec-table__row:last-child {
  border-bottom: none;
}

.section--units .floorplan-cta {
  margin-top: auto;
  padding-top: 24px;
}

.page-apartments .site-footer {
  background: #0d0906;
  border-top-color: rgba(201, 162, 74, 0.22);
}

/* the animated CTA in gold with a white sheen sweeping across it; the
   wave animation itself is untouched. Dark brown label, because paper
   would disappear against the near-white stop. */
.page-apartments .btn--wave {
  background-image: linear-gradient(120deg, var(--apt-gold), #f4e7c9,
    var(--apt-gold-bright), #f4e7c9, var(--apt-gold));
  color: var(--apt-brown);
}

.page-apartments .btn--wave:hover,
.page-apartments .btn--wave:focus-visible {
  color: var(--apt-brown);
}

/* The link to the penthouse keeps the home page's teal wave. */
.page-apartments .btn--wave-teal {
  background-image: linear-gradient(120deg, var(--brass-bright), #5ea399, var(--petrol), #5ea399, var(--brass-bright));
  color: var(--paper);
}

.page-apartments .btn--wave-teal:hover,
.page-apartments .btn--wave-teal:focus-visible {
  color: var(--petrol-deep);
}

.page-apartments .contact .btn--solid {
  background: var(--apt-gold);
  border-color: var(--apt-gold);
  color: var(--apt-brown);
}

.page-apartments .contact .btn--solid:hover,
.page-apartments .contact .btn--solid:focus-visible {
  background: var(--apt-gold-bright);
  border-color: var(--apt-gold-bright);
  color: var(--apt-brown);
}

.unit-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  margin: 0;
}

.unit-card__price {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--brass-deep);
  margin: 8px 0 20px;
}

.unit-card .spec-table {
  border-top: none;
}

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

.highlight-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.highlight-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline-on-dark);
}

.highlight-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.highlight-list__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--brass-bright);
}

.highlight-list__body {
  margin: 0;
  color: rgba(244, 241, 233, 0.82);
}

.highlight-list__body b {
  color: var(--paper);
  font-weight: 500;
}

.footer-simple {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

.footer-simple .pref-source {
  margin-top: 0;
  align-self: center;
}

.footer-simple__back {
  font-size: 14px;
  text-decoration: none;
  color: rgba(244, 241, 233, 0.65);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium);
}

.footer-simple__back:hover,
.footer-simple__back:focus-visible {
  color: var(--brass-bright);
  border-bottom-color: var(--brass-bright);
}

.floorplan-cta {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.floorplan-modal__group {
  margin-top: 24px;
}

.floorplan-modal__frame {
  display: block;
  width: 100%;
  height: min(70vh, 640px);
  border: 1px solid var(--hairline);
  object-fit: contain;
  background: #fff;
}

.floorplan-modal__frame[hidden],
.floorplan-modal__link[hidden] {
  display: none;
}

.floorplan-modal__link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--cypress);
}

/* ------------------------------------------------------------
   "A first glimpse" — full-bleed slider with flashlight heading
   ------------------------------------------------------------ */

.section--glimpse {
  --rdl-brown: #3b2a1e;
  --rdl-brown-hover: #5a4030;
  --rdl-glow: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 14px rgba(255, 255, 255, 0.75));
  position: relative;
  padding: 0;
  min-height: min(100svh, 900px);
  display: grid;
  overflow: hidden;
}

.section--glimpse.section::before {
  display: none;
}

.section--glimpse .gallery-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  aspect-ratio: auto;
  border: 0;
}

.section--glimpse .gallery-slider:has(.gallery-slider__slide:hover),
.section--glimpse .gallery-slider:has(.gallery-slider__slide:focus-within) {
  box-shadow: none;
}

.section--glimpse .gallery-slider__dots {
  z-index: 2;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .section--glimpse:hover .gallery-slider__arrow {
    opacity: 1;
  }
}

.glimpse__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 241, 233, 0.45) 0, transparent 35%);
}

.section--glimpse .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(48px, 8vw, 96px) clamp(56px, 7vw, 88px);
  pointer-events: none;
}

.section--glimpse .project__location,
.section--glimpse .section__heading {
  color: var(--rdl-brown);
}

.section--glimpse .project__location {
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.section--glimpse .section__heading {
  font-size: clamp(44px, 7.5vw, 104px);
  line-height: 1;
  letter-spacing: -0.015em;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.section--glimpse .section__head.is-visible .project__location,
.section--glimpse .section__head.is-visible .section__heading {
  color: transparent;
  background: linear-gradient(100deg, var(--rdl-brown) 0 42%, #fff8ea 50%, var(--rdl-brown) 58% 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation:
    glimpse-flashlight 2.4s var(--ease-premium) both,
    glimpse-glow 1.4s var(--ease-premium) 1.2s both;
}

.section--glimpse .section__head.is-visible .section__heading {
  animation-delay: 0.15s, 1.35s;
}

@keyframes glimpse-flashlight {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes glimpse-glow {
  from {
    filter: none;
  }
  to {
    filter: var(--rdl-glow);
  }
}

.section--glimpse .floorplan-cta {
  margin-top: auto;
  padding-top: 32px;
  pointer-events: auto;
}

.section--glimpse .floorplan-cta .btn--solid,
.section--units .floorplan-cta .btn--solid {
  position: relative;
  overflow: hidden;
  background: var(--rdl-brown);
  border-color: var(--rdl-brown);
  color: var(--paper);
}

.section--glimpse .floorplan-cta .btn--solid::after,
.section--units .floorplan-cta .btn--solid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 248, 234, 0.75) 50%, transparent 70%);
  transform: translateX(-120%);
}

.section--glimpse .floorplan-cta.is-visible .btn--solid,
.section--units .floorplan-cta.is-visible .btn--solid {
  box-shadow: 0 0 0 1px #fff, 0 0 18px rgba(255, 255, 255, 0.55);
  animation: glimpse-btn-glow 1.4s var(--ease-premium) 1.5s backwards;
}

.section--glimpse .floorplan-cta.is-visible .btn--solid::after,
.section--units .floorplan-cta.is-visible .btn--solid::after {
  animation: glimpse-beam 1.6s var(--ease-premium) 0.4s both;
}

.section--glimpse .floorplan-cta .btn--solid:hover,
.section--glimpse .floorplan-cta .btn--solid:focus-visible,
.section--units .floorplan-cta .btn--solid:hover,
.section--units .floorplan-cta .btn--solid:focus-visible {
  background: var(--rdl-brown-hover);
  border-color: var(--rdl-brown-hover);
  color: var(--paper);
  box-shadow: 0 0 0 1px #fff, 0 0 28px rgba(255, 255, 255, 0.8);
}

@keyframes glimpse-beam {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}

@keyframes glimpse-btn-glow {
  from {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  to {
    box-shadow: 0 0 0 1px #fff, 0 0 18px rgba(255, 255, 255, 0.55);
  }
}

@media (max-width: 560px) {
  .section--glimpse {
    min-height: 82svh;
  }

  .section--glimpse .section__heading {
    font-size: clamp(38px, 11vw, 56px);
  }

  .footer-simple {
    flex-direction: column;
    gap: 10px;
  }
}

/* ------------------------------------------------------------
   Contact — light. On the property pages the request form sits
   on white, directly under the dark highlights section: no gap,
   so no strip of page background shows between the two.
   ------------------------------------------------------------ */

.contact,
.page-apartments .contact {
  margin-top: 0;
  background: #fff;
  color: var(--ink);
}

.contact .contact__heading {
  color: var(--ink);
}

.contact .contact__note,
.contact .contact__detail,
.contact .field label,
.contact .field__label,
.contact .field--checkbox,
.contact .radio-option,
.contact .form-success p {
  color: var(--ink-soft);
}

.contact .radio-option:hover {
  color: var(--ink);
}

.contact .radio-option:has(input:checked),
.contact .field--checkbox a,
.contact .form-msg,
.contact .form-success h3 {
  color: var(--brass-deep);
}

.contact .field input,
.contact .field select,
.contact .field textarea {
  background: var(--paper);
  border-color: var(--hairline);
  color: var(--ink);
}

.contact .field input::placeholder,
.contact .field textarea::placeholder {
  color: rgba(74, 74, 66, 0.6);
}

.contact .field input:focus,
.contact .field select:focus,
.contact .field textarea:focus {
  outline-color: var(--brass);
  border-color: var(--brass);
  background: #fff;
}

/* ============================================================
   Why Peschiera — pinned while the track scrolls past; the
   script splits the text into visual lines and fills them one
   after another (--fill 0–1), like the home "How we build" bars.
   ============================================================ */

.why {
  --per-line: 14svh;
  position: relative;
  height: calc(100svh + var(--lines, 6) * var(--per-line));
  background: var(--ambient-glow), var(--stone);
}

.why__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 64px;
}

.why__inner {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.why__heading {
  margin-bottom: 22px;
}

.why__bar {
  display: block;
  position: relative;
  max-width: 420px;
  height: 1px;
  margin-bottom: clamp(28px, 4vw, 48px);
  background: var(--hairline);
}

.why__bar::after {
  content: "";
  position: absolute;
  inset: -0.5px 0;
  background: var(--brass-deep);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

.why__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 3vw, 42px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Faint until the scroll "charges" it, left to right with a soft edge. */
.why__line {
  --edge: calc(var(--fill, 0) * 108% - 4%);
  display: block;
  color: transparent;
  background: linear-gradient(90deg, var(--ink) calc(var(--edge) - 4%), rgba(28, 30, 26, 0.16) calc(var(--edge) + 4%));
  -webkit-background-clip: text;
  background-clip: text;
}

@media (max-width: 900px) {
  .why {
    --per-line: 9svh;
  }

  .why__stage {
    padding-top: 84px;
  }

  .why__heading {
    margin-bottom: 16px;
  }
}

/* Too short to pin (landscape phones) or reduced motion: plain, fully inked text. */
@media (max-height: 520px), (prefers-reduced-motion: reduce) {
  .why {
    height: auto;
  }

  .why__stage {
    position: static;
    height: auto;
    padding-block: 96px 64px;
  }

  .why__line {
    color: var(--ink);
    background: none;
  }

  .why__bar::after {
    transform: none;
  }
}

/* Under "Materials": a question and a button to the other Due Laghi page. */
.cross-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.cross-link__question {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink);
}