/* Natural section flow, balanced hero columns, and subtle motion. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --space-eyebrow: 12px;
  --space-copy: 16px;
  --space-heading: 24px;
}

/* Keep the existing header treatment; only adapt the longer list of words. */
.site-header .nav-links { gap: clamp(10px, 1.1vw, 20px); }
.site-header .nav-links a { white-space: nowrap; }
.site-header .header-inner { gap: 20px; }
.header-brand { flex-shrink: 0; }
.nav-toggle { display: none; }

/* Content determines section height. No viewport locks or chapter scrollers. */
.section, #highlights { padding-block: clamp(36px, 4vw, 64px); }
.section .section-eyebrow,
#highlights .section-eyebrow,
#homes > .container > .section-eyebrow {
  margin: 0 0 var(--space-eyebrow);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: none;
}
/* Keep text spacing consistent without changing page or column gutters. */
:is(#overview, #highlights, #homes, #gallery, #masterplan, #lifestyle, #amenities, #location, #enquire, #faq)
  :is(h2, h3) + :is(p, .section-lead, .glance-intro, .residence-size) {
  margin-top: var(--space-copy);
}
.section p + :is(h2, h3) { margin-top: var(--space-heading); }
.section .section-eyebrow + :is(h2, h3) { margin-top: 0; }
.section p + p { margin-top: var(--space-copy); }
#enquire .enquire-grid > div > p + p:not(.eyebrow) { margin-top: var(--space-copy); }
#overview { min-height: 0; }
#highlights > .container { row-gap: 28px; }
#lifestyle { padding-bottom: 0; }
.location-content { max-height: none; overflow: visible; }
#homes .residence-tabs { margin: 26px 0; }
#homes .residence-tabs button { min-height: 56px; padding-block: 14px; }
#homes .residence-price { margin: 10px 0; }

/* Size containment makes the left card alone determine the desktop row height. */
.editorial-hero .hero-composition { align-items: stretch; }
.editorial-hero .hero-details { align-self: start; }
.editorial-hero .hero-media {
  contain: size;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.editorial-hero .hero-image {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  max-width: none;
}
.editorial-hero .hero-offer { flex-shrink: 0; margin: 0; }

.cta-arrow { width: 20px; height: 20px; flex: 0 0 20px; }
.cta-arrow.arrow-left { transform: rotate(180deg); }
.cta-arrow.arrow-down { transform: rotate(90deg); }
.gallery-controls button { display: grid; place-items: center; }
.hero-bottom a { display: inline-flex; align-items: center; gap: 12px; }
.btn, .text-link, .gallery-controls button {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .35s var(--motion-ease);
}
.btn .cta-arrow, .text-link .cta-arrow { transition: transform .35s var(--motion-ease); }
.btn:hover .cta-arrow, .text-link:hover .cta-arrow { transform: translateX(3px); }
.btn .cta-arrow.arrow-down, .text-link .cta-arrow.arrow-down { transform: rotate(90deg); }
.btn:hover .cta-arrow.arrow-down, .text-link:hover .cta-arrow.arrow-down { transform: translateY(3px) rotate(90deg); }
.residence-panels { position: relative; display: flow-root; }
#homes .residence-panel { margin-top: 0; }
.residence-tabs button { transition: background-color .3s ease, color .3s ease; }
.level-plus, .faq-chev, .location-item summary::after { transition: transform .3s var(--motion-ease); }
.gallery-grid .is-current, .gallery-grid .is-next,
.modal-backdrop:not(.hidden) .modal { animation: content-enter .45s var(--motion-ease) both; }
@keyframes content-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1024px) {
  .site-header .header-inner { position: relative; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--type-ui);
  }
  .nav-toggle span { transition: transform .3s var(--motion-ease); }
  .nav-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
  .site-header .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 12px 20px;
    margin: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 12px 24px #45322612;
    z-index: 45;
  }
  .site-header .nav-links.is-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
  .site-header .nav-links a { padding: 12px 0; min-height: 44px; }
  .site-header .header-inner > .btn { margin-left: 0; }
}
@media (max-width: 820px) {
  .editorial-hero .hero-media { contain: none; }
  .editorial-hero .hero-image { flex: none; height: auto; aspect-ratio: 1.3; }
}
@media (max-width: 480px) {
  .site-header .nav-links.is-open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header .header-inner { gap: 10px; }
  .nav-toggle { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Field errors sit directly beneath the matching input. */
.field-error {
  color: #a42d20;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin: -6px 0 16px;
}
.field input[aria-invalid="true"], .phone-wrap.is-invalid { border-bottom-color: #a42d20; }

.gpl-form .btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}