/* =============================================================
   PAGE 1 SKELETON - Collective Fluid responsive HTML/CSS system
   v0.2 - Property Lead Page Template - Loam House (Instance 1)
   =============================================================
   Class conventions (Collective standard):
     .shell     - outer fluid container (page-width boundary)
     .section   - major page block
     .grid-N    - explicit N-column grid (snaps below bp-md)
     .grid-fluid - intrinsic auto-fit grid (browser decides cols)
     .card      - reusable boxed content block

   This file uses ONLY tokens from tokens.css. It does not declare
   any colour, font, or size literal. Future property clients
   restyle by editing tokens.css; this file does not change.
   =============================================================
*/

/* =============================================================
   1. SHELL - canonical Collective fluid container
   =============================================================
   Pattern: width: min(100% - gutter, max).
   Fills available width with edge breathing room on small screens;
   caps at max-width on large screens; centred always.
*/

.shell {
  width: min(100% - var(--shell-gutter), var(--shell-max));
  margin-inline: auto;
}
.shell--narrow { width: min(100% - var(--shell-gutter), var(--shell-narrow-max)); }
.shell--wide   { width: min(100% - var(--shell-gutter), var(--shell-wide-max));   }


/* =============================================================
   2. SECTION - major page block with surface + padding
   ============================================================= */

.section {
  padding-block: var(--section-padding-y);
  position: relative;
  isolation: isolate;
}
.section--compact { padding-block: var(--section-padding-y-compact); }
.section--no-pad  { padding-block: 0; }

/* Surface modifiers */
.section--ink        { background: var(--color-surface-section-1); color: var(--color-ink-on-dark); }
.section--surface    { background: var(--color-surface-section-2); color: var(--color-ink-on-light); }
.section--light      { background: var(--color-surface-section-3); color: var(--color-ink-on-light); }
.section--neutral    { background: var(--color-surface-section-4); color: var(--color-ink-on-light); }

/* Image-overlay surface - uses --bg-image inline style on element */
.section--image {
  background-size: cover;
  background-position: center;
  color: var(--color-ink-on-dark);
}
.section--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-color-mono-50);
  z-index: 0;
}
.section--image[data-overlay="strong"]::before { background: var(--brand-color-mono-65); }
.section--image > .shell { position: relative; z-index: 1; }


/* =============================================================
   3. GRID - adaptive grids (Collective Fluid system)
   =============================================================
   .grid-N      = explicit N-column on desktop, stacks at bp-md
   .grid-fluid  = intrinsic; browser decides column count via auto-fit
                  (use for galleries, card decks where any count works)
*/

.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: var(--grid-gap);
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr 1.2fr 1fr; align-items: start; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Asymmetric brochure grid (5-col composition from "What's Included" section) */
.grid-brochure {
  display: grid;
  gap: var(--grid-gap-loose);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-brochure { grid-template-columns: 1fr 1.2fr 1fr; align-items: center; }
}

/* Intrinsic fluid grid - browser decides column count */
.grid-fluid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--grid-gap);
}
.grid-fluid--narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-fluid--wide   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }

.grid-stack {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}


/* =============================================================
   4. CARD - reusable boxed content
   ============================================================= */

.card {
  background: var(--color-surface-card);
  color: var(--color-ink-on-light);
  padding: var(--card-padding);
  border-radius: var(--radius-md);
}
.card--elevated { box-shadow: var(--shadow-card); background: var(--color-surface-card-elevated); }
.card--bordered { border: var(--border-hairline); }
.card--ghost-on-image {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-ink-on-dark) 22%, transparent);
  color: var(--color-ink-on-dark);
}


/* =============================================================
   5. PAGE HEADER + FOOTER
   ============================================================= */

.page-header {
  background: var(--color-surface-section-1);
  padding-block: var(--space-md);
}
.page-header__logo img { height: clamp(28px, 2.5vw, 40px); width: auto; }

.page-footer {
  background: var(--color-surface-section-1);
  color: var(--color-ink-on-dark);
  padding-block: var(--space-xl);
  text-align: center;
}
.page-footer__logo img { height: clamp(32px, 3vw, 48px); width: auto; margin-inline: auto; }
.page-footer__address { font-size: var(--type-body-sm); margin: var(--space-md) 0 var(--space-sm); }
.page-footer__credits { font-size: var(--type-body-sm); margin: 0; opacity: 0.8; }
.page-footer .hairline {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--color-ink-on-dark) 20%, transparent);
  margin: var(--space-md) auto;
  max-width: 32rem;
}
.page-footer a { color: var(--color-ink-on-dark); text-decoration: underline; }


/* =============================================================
   6. TYPE ROLE CLASSES
   ============================================================= */

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin: 0 0 var(--space-sm) 0;
}
.display-xl { font-size: var(--type-display-xl); line-height: var(--leading-display-tight); letter-spacing: var(--tracking-display-spacious); text-wrap: balance; }
.display-lg { font-size: var(--type-display-lg); line-height: var(--leading-display-tight); letter-spacing: var(--tracking-display-spacious); text-wrap: balance; }
.display-md { font-size: var(--type-display-md); line-height: var(--leading-display-snug);  letter-spacing: var(--tracking-display-airy); }
.lead       { font-size: var(--type-body-lg);    line-height: var(--leading-body); }


/* =============================================================
   7. HERO SPLIT
   ============================================================= */

.hero-split {
  display: grid;
  gap: var(--grid-gap);
  align-items: start;
}
@media (min-width: 768px) {
  .hero-split { grid-template-columns: 55fr 45fr; gap: var(--grid-gap-loose); align-items: center; }
}
.hero-split__copy { padding-block: var(--space-lg); }
.hero-split__copy .lead { margin-top: var(--space-md); max-width: 36ch; }


/* =============================================================
   8. FORM CARD
   ============================================================= */

.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.form-card__heading {
  font-family: var(--font-display);
  font-size: var(--type-heading-md);
  font-weight: var(--font-weight-display);
  margin: 0 0 var(--space-xs) 0;
  color: var(--color-ink-on-light);
}

.form-row { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 480px) {
  .form-row--two-up { grid-template-columns: 1fr 1fr; }
}

.form-field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.form-field label {
  font-size: var(--type-body-sm);
  line-height: var(--leading-body-tight);
  color: var(--color-ink-on-light);
}
.form-field label span { color: var(--color-action-primary-bg); margin-left: 0.15em; }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body-tight);
  height: 2.75rem; /* 44px touch target */
  padding-inline: var(--space-sm);
  background: var(--color-surface-card-elevated);
  color: var(--color-ink-on-light);
  border: var(--border-input);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
  width: 100%;
}
.form-field input:focus-visible {
  outline: 2px solid var(--color-border-input-focus);
  outline-offset: 2px;
  border-color: var(--color-border-input-focus);
}
.form-field[data-invalid="true"] input { border-color: var(--color-validation-error); }
.form-field__error {
  font-size: var(--type-body-sm);
  color: var(--color-validation-error);
  min-height: 1.2em;
}


/* =============================================================
   9. CTA BUTTON + CTA BAR
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--type-button);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-button);
  height: 3rem;
  padding-inline: var(--space-lg);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-duration-default) var(--motion-easing-default),
              color           var(--motion-duration-default) var(--motion-easing-default);
}
.btn--full-width { width: 100%; }

.btn--primary    { background: var(--color-action-primary-bg); color: var(--color-action-primary-fg); }
.btn--primary:hover { background: var(--color-action-primary-hover-bg); }

.btn--secondary  { background: var(--color-action-secondary-bg); color: var(--color-action-secondary-fg); }
.btn--secondary:hover { background: var(--color-action-secondary-hover-bg); }

.btn--pill-light {
  background: var(--color-action-secondary-bg);
  color:      var(--color-action-secondary-fg);
  border-radius: var(--radius-pill);
  padding-inline: var(--space-xl);
}
.btn--pill-light:hover { background: var(--color-action-secondary-hover-bg); }

.cta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.cta-bar[data-align="center"] { justify-content: center; }
.cta-bar[data-align="end"]    { justify-content: flex-end; }
.cta-bar[data-align="stretch"] .btn { flex: 1 1 0; min-width: max-content; }
@media (max-width: 767.98px) {
  .cta-bar[data-count="2"], .cta-bar[data-count="3"] { flex-direction: column; }
  .cta-bar[data-count="2"] .btn,
  .cta-bar[data-count="3"] .btn { width: 100%; }
}


/* =============================================================
   10. SECTION HEADER
   ============================================================= */

.section-header        { margin-bottom: var(--space-xl); }
.section-header--center { text-align: center; }
.section-header .eyebrow { color: var(--color-action-primary-bg); }


/* =============================================================
   11. IMAGE BLOCK
   ============================================================= */

.image-block {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.image-block[data-aspect="21-9"] img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }
.image-block[data-aspect="16-9"] img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.image-block[data-aspect="4-3"]  img { aspect-ratio: 4 / 3;  object-fit: cover; width: 100%; }
.image-block[data-aspect="3-4"]  img { aspect-ratio: 3 / 4;  object-fit: cover; width: 100%; height: 100%; }
.image-block[data-aspect="1-1"]  img { aspect-ratio: 1 / 1;  object-fit: cover; width: 100%; }
.image-block[data-variant="bleed"] { border-radius: 0; }
.image-block--site-plan img { background: var(--color-surface-section-4); object-fit: contain; }


/* =============================================================
   12. FEATURE BLOCK
   ============================================================= */

.feature-block { padding-block: var(--space-sm); }
.feature-block[data-divider="below"] { border-bottom: var(--border-hairline); padding-bottom: var(--space-md); }
.feature-block[data-align="center"]  { text-align: center; }
.feature-block h3 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--type-heading-md);
  letter-spacing: var(--tracking-display-airy);
  color: var(--color-action-primary-bg);
  margin: 0 0 var(--space-2xs) 0;
}
.feature-block p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
  margin: 0;
}


/* =============================================================
   13. FEATURE CARD (icon + heading + body, on dark/image surface)
   ============================================================= */

.feature-card-group {
  display: grid;
  gap: var(--space-md);
  margin-block: var(--space-xl);
}
.feature-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md);
  border: 1px solid color-mix(in srgb, var(--color-ink-on-dark) 22%, transparent);
  border-radius: var(--radius-md);
  text-align: left;
}
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-ink-on-dark) 30%, transparent);
  color: var(--color-ink-on-dark);
}
.feature-card h3 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--type-heading-md);
  letter-spacing: var(--tracking-display-airy);
  margin: 0 0 var(--space-2xs) 0;
}
.feature-card p { margin: 0; font-size: var(--type-body); }


/* =============================================================
   14. STAT ROW
   ============================================================= */

.stat-block { margin-top: var(--space-2xl); text-align: center; }
.stat-block__headline { max-width: 40ch; margin-inline: auto; color: var(--color-action-primary-bg); }
.stat-row {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0 0;
  display: grid;
  gap: var(--space-md);
  border-block: var(--border-hairline);
  padding-block: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .stat-row[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
  .stat-row[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .stat-row[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
}
.stat-row__item { text-align: center; }
.stat-row__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-stat-value);
  line-height: 1;
  color: var(--color-action-primary-bg);
  margin-bottom: var(--space-2xs);
}
.stat-row__value small { font-size: 0.4em; vertical-align: baseline; margin-left: 0.1em; }
.stat-row__label { font-size: var(--type-stat-label); }


/* =============================================================
   15. IMAGE GALLERY
   ============================================================= */

.image-gallery {
  display: grid;
  gap: var(--space-2xs);
  /* Intrinsic auto-fit: browser decides 1, 2, or 4 columns */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.image-gallery__item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.image-gallery__pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}
.image-gallery__pagination button {
  width: 8px; height: 8px; padding: 0;
  border: none; border-radius: 999px;
  background: color-mix(in srgb, var(--color-ink-on-light) 30%, transparent);
  cursor: pointer;
}
.image-gallery__pagination button[aria-selected="true"] { background: var(--color-action-primary-bg); }


/* =============================================================
   16. UTILITY
   ============================================================= */

.text-center  { text-align: center; }
.text-on-dark { color: var(--color-ink-on-dark); }
.text-on-dark .eyebrow,
.text-on-dark h1, .text-on-dark h2, .text-on-dark h3,
.text-on-dark p { color: var(--color-ink-on-dark); }


/* =============================================================
   17. SECTION REVEAL MOTION (progressive enhancement)
   =============================================================
   Default: sections are fully visible (no JS dependency).
   Reveal animation only activates when .js-reveal class is added
   to the <html> element by page1-form.js, AND the section has
   not yet entered the viewport. This means JS failure cannot
   render the page invisible.
*/

.js-reveal .section:not(.is-visible) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-duration-slower) var(--motion-easing-decelerate),
              transform var(--motion-duration-slower) var(--motion-easing-decelerate);
}
.js-reveal .section.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .section, .js-reveal .section.is-visible {
    opacity: 1; transform: none; transition: none;
  }
}


/* =============================================================
   18. CAROUSEL - Collective Fluid responsive carousel component
   =============================================================
   Used by Section 2 (hero strip) and Section 8 (interior gallery).
   Single-slide-per-frame at narrow widths; multi-slide visible at
   wider viewports via auto-fit-style overflow scroll. Auto-advance
   driven by JS (page1-form.js). Pause on hover.
   ----------
   Markup contract:
     <div class="carousel" data-autoplay="true" data-interval="2000" data-loop="true">
       <div class="carousel__track">
         <figure class="carousel__slide">...</figure>
         <figure class="carousel__slide">...</figure>
         ...
       </div>
       <div class="carousel__dots" role="tablist"></div>  <!-- generated by JS -->
     </div>
*/

.carousel {
  position: relative;
  overflow: hidden;
}
.carousel__track {
  display: flex;
  gap: var(--space-2xs);
  transition: transform var(--motion-duration-slow) var(--motion-easing-emphasised);
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 100%;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Carousel ratios - reference CFR ratio tokens. Carousel does NOT define
   its own ratio doctrine; it inherits the ratio of the underlying media type. */
.carousel--hero    .carousel__slide { aspect-ratio: var(--ratio-landscape); }  /* 3:2 standard landscape */
.carousel--gallery .carousel__slide { aspect-ratio: var(--ratio-portrait); }   /* 4:5 portrait - TODO: revisit per CFR (interior renders are landscape content, may shift to 3:2) */

/* Multi-slide visible at wider viewports - for gallery only */
@media (min-width: 768px)  { .carousel--gallery .carousel__slide { flex-basis: calc(50% - var(--space-2xs) / 2); } }
@media (min-width: 1024px) { .carousel--gallery .carousel__slide { flex-basis: calc(25% - var(--space-2xs) * 3 / 4); } }

/* Dots */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}
.carousel__dot {
  width: 8px; height: 8px; padding: 0;
  border: none; border-radius: 999px;
  background: color-mix(in srgb, var(--color-ink-on-light) 30%, transparent);
  cursor: pointer;
  transition: background-color var(--motion-duration-fast);
}
.carousel__dot[aria-selected="true"] { background: var(--color-action-primary-bg); }
.carousel--on-dark .carousel__dot { background: color-mix(in srgb, var(--color-ink-on-dark) 30%, transparent); }
.carousel--on-dark .carousel__dot[aria-selected="true"] { background: var(--color-ink-on-dark); }


/* =============================================================
   19. NARRATIVE STACKING GRID - Section 3 layout
   =============================================================
   Collective Fluid principle: HTML carries content in the desired
   mobile reading order (interleaved image → feature → image →
   feature). Desktop multi-column layout is achieved via CSS Grid
   placement (grid-template-areas), NOT by reordering content.
   This means the markup is the narrative; the CSS is the canvas.
*/

.grid-narrative {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
  /* Mobile: natural HTML source order = the narrative */
}
.grid-narrative > * { min-width: 0; }

@media (min-width: 768px) {
  /* Default narrative grid (3 media interleaved with 3 features + tall right image) */
  .grid-narrative {
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-template-areas:
      "header  header   header"
      "media1  feature1 mediaLg"
      "media2  feature2 mediaLg"
      "media3  feature3 mediaLg"
      "cta     cta      cta";
    gap: var(--grid-gap-loose) var(--grid-gap);
    align-items: start;
  }
  .grid-narrative__header   { grid-area: header; }
  .grid-narrative__media-1  { grid-area: media1;  align-self: stretch; }
  .grid-narrative__media-2  { grid-area: media2;  align-self: stretch; }
  .grid-narrative__media-3  { grid-area: media3;  align-self: stretch; }
  .grid-narrative__media-lg { grid-area: mediaLg; align-self: stretch; }
  .grid-narrative__feature-1 { grid-area: feature1; align-self: center; }
  .grid-narrative__feature-2 { grid-area: feature2; align-self: center; }
  .grid-narrative__feature-3 { grid-area: feature3; align-self: center; }
  .grid-narrative__cta       { grid-area: cta; }

  /* Right-column tall portrait image fills its grid area */
  .grid-narrative__media-lg { height: 100%; }
  .grid-narrative__media-lg img { height: 100%; }
}

/* Right column at MOBILE uses CFR portrait ratio (4:5) for a sensible standalone shape.
   At DESKTOP, the slot stretches across multiple grid rows - let the GRID CELL define
   the shape, not aspect-ratio (which would otherwise compute a width wider than the
   1fr column and overflow the shell). object-fit: cover handles framing in either case. */
.grid-narrative__media-lg[data-aspect="portrait"],
.image-block[data-aspect="portrait"] {
  aspect-ratio: var(--ratio-portrait);
}
.grid-narrative__media-lg[data-aspect="portrait"] img,
.image-block[data-aspect="portrait"] img {
  width: 100%; height: 100%; object-fit: cover;
}
@media (min-width: 768px) {
  /* Desktop: grid cell determines shape; clear aspect-ratio to prevent overflow */
  .grid-narrative__media-lg[data-aspect="portrait"] {
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: var(--radius-md);
  }
}
/* Standard CFR landscape (3:2) helper */
.image-block[data-aspect="3-2"] {
  aspect-ratio: var(--ratio-landscape);
}
.image-block[data-aspect="3-2"] img {
  width: 100%; height: 100%; object-fit: cover;
}


/* =============================================================
   20. BROCHURE STACK - Section 6 layered brochure mockup
   =============================================================
   Stylised effect: front "brochure" with 3 layered cards behind
   it visible at the corners, suggesting a stack of brochure
   spreads. Replaces the flat single-image v0.3 treatment.
*/

.brochure-stack {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  aspect-ratio: 3 / 4;
}
.brochure-stack__layer {
  position: absolute;
  inset: 0;
  background: var(--color-surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background-size: cover;
  background-position: center;
  transition: transform var(--motion-duration-default) var(--motion-easing-default);
}
.brochure-stack__layer--3 { transform: rotate(-3deg) translate(-4%, 3%); opacity: 0.75; }
.brochure-stack__layer--2 { transform: rotate(2deg)  translate(3%, -2%); opacity: 0.85; }
.brochure-stack__layer--1 { transform: rotate(-1deg) translate(-1%, 1%); opacity: 0.95; }
.brochure-stack__cover    { transform: rotate(0deg);  z-index: 5; }
.brochure-stack:hover .brochure-stack__layer--3 { transform: rotate(-5deg) translate(-7%, 5%); }
.brochure-stack:hover .brochure-stack__layer--2 { transform: rotate(4deg)  translate(5%, -4%); }
.brochure-stack:hover .brochure-stack__layer--1 { transform: rotate(-2deg) translate(-3%, 3%); }
@media (prefers-reduced-motion: reduce) {
  .brochure-stack__layer { transition: none; }
  .brochure-stack:hover .brochure-stack__layer--1,
  .brochure-stack:hover .brochure-stack__layer--2,
  .brochure-stack:hover .brochure-stack__layer--3 { transform: none; }
}


/* =============================================================
   22. AERIAL DIAGRAM + AMENITY GRID - Section 7
   =============================================================
   The aerial diagram is a tall portrait visual (cropped from the
   brochure). Centred, capped width, breathing room above the
   amenity-card grid below. Amenity cards: 3-up at desktop, stacks
   to single column on mobile per CFR mobile-first content hierarchy.
*/

.aerial-diagram {
  margin: 0 auto var(--space-2xl);
  max-width: 38rem;
  padding-block: var(--space-md);
}
.aerial-diagram img {
  width: 100%; height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.amenity-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  margin-top: var(--space-lg);
}
@media (min-width: 768px) {
  .amenity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.amenity-card {
  padding: 0;
  background: var(--color-surface-card-elevated);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.amenity-card__media {
  margin: 0;
  width: 100%;
}
.amenity-card__media[data-aspect="3-2"] { aspect-ratio: var(--ratio-landscape); }
.amenity-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.amenity-card__body {
  padding: var(--card-padding);
}
.amenity-card__body h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--type-heading-md);
  letter-spacing: var(--tracking-display-spacious);
  color: var(--color-action-primary-bg);
  margin: 0 0 var(--space-xs) 0;
}
.amenity-card__body p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
  margin: 0;
  color: var(--color-ink-on-light);
}


/* =============================================================
   21. SECTION 5 BRIGHTEN VARIANT
   =============================================================
   David's v0.3 review: "image needs slight tweak - a touch more
   light, a touch less darkness, closer to the original feel".
   Achieved by lowering overlay opacity AND applying a CSS filter
   that mildly increases brightness + saturation. Toggle via
   data-brightness="warm" on .section--image.
*/

.section--image[data-brightness="warm"]::before {
  background: rgba(0, 0, 0, 0.32);
}
.section--image[data-brightness="warm"] {
  background-blend-mode: lighten;
  filter: saturate(1.05) brightness(1.04);
}


/* =============================================================
   23. SECTION 4 - denser white silhouette + thicker card borders (v0.7)
   =============================================================
   David's review: thicker card borders; denser font silhouette on
   sub-heading + body without increasing size or boldness. Achieved
   via subtle 0.5px text-shadow that thickens character strokes
   visually (a "synthetic weight" technique that doesn't change
   actual font-weight).
*/

.section--image .feature-card { border-width: 2px; border-color: color-mix(in srgb, var(--color-ink-on-dark) 48%, transparent); }
.section--image .feature-card__icon { border-width: 2px; border-color: color-mix(in srgb, var(--color-ink-on-dark) 55%, transparent); }

/* Density technique - a 0.4–0.5px text-shadow in the same colour
   thickens the rendered glyph silhouette by a fraction of a pixel
   without changing font-weight or size. Restricted to non-headline
   text inside Section 4 + Section 8 image-overlay sections. */
.section--image .lead,
.section--image .feature-card h3,
.section--image .feature-card p,
.section--image > .shell > p {
  text-shadow:
    0 0 0.4px var(--color-ink-on-dark),
    0 0 0.4px var(--color-ink-on-dark);
}


/* =============================================================
   24. BROCHURE STACK - white wordmark overlay (v0.7)
   ============================================================= */

.brochure-stack__cover {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brochure-stack__wordmark {
  width: 60%;
  max-width: 220px;
  height: auto;
  filter: brightness(0) invert(1);  /* force white regardless of source SVG/PNG colour */
  opacity: 0.95;
  mix-blend-mode: screen;
}


/* =============================================================
   25. CAROUSEL - CONTINUOUS MARQUEE MOTION (v0.7)
   =============================================================
   .carousel--marquee replaces the discrete-slide auto-advance with a
   smooth continuous scroll. JS duplicates the slide list once so the
   animation loops seamlessly (you never see the seam). Pause on hover.
*/

.carousel--marquee {
  overflow: hidden;
  /* Disable the slide-advance JS for this variant by skipping
     dot generation in JS when this class is present. */
}
.carousel--marquee .carousel__track {
  display: flex;
  gap: var(--space-2xs);
  width: max-content;             /* width = sum of all slides */
  animation: marquee-scroll var(--marquee-duration, 60s) linear infinite;
  will-change: transform;
}
.carousel--marquee:hover .carousel__track,
.carousel--marquee:focus-within .carousel__track {
  animation-play-state: paused;
}
.carousel--marquee .carousel__slide {
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 320px);   /* fluid slide width */
  aspect-ratio: var(--ratio-portrait);  /* 4:5 - consistent across all slides */
}
.carousel--marquee .carousel__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* track is 2x duplicated → -50% = exactly one set */
}
@media (prefers-reduced-motion: reduce) {
  .carousel--marquee .carousel__track { animation: none; }
}


/* =============================================================
   FORM THANK-YOU PANEL (production design-preview behaviour)
   ============================================================= */
.form-thankyou {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}
.form-thankyou h2 { margin: 0 0 var(--space-xs); }
.form-thankyou p { margin: 0; font-size: var(--type-body); line-height: var(--leading-body); }
.form-thankyou a { color: var(--color-action-primary-bg); }