/* ─────────────────────────────────────────────────────────────────────────────
   site.css — Mosaique components: fonts, nav, buttons, hero.
   Brand tokens (colours, type scale, --font / --font-display) live in base.css :root.
   Everything scales fluidly; nothing is built to a fixed canvas.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Margem (headings) — self-hosted, Medium is the only weight supplied ──────── */
@font-face {
  font-family: "Margem"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/Margem-Medium.woff2") format("woff2"), url("../fonts/Margem-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Margem"; font-weight: 500; font-style: italic; font-display: swap;
  src: url("../fonts/Margem-MediumItalic.woff2") format("woff2"), url("../fonts/Margem-MediumItalic.otf") format("opentype");
}

/* ── Buttons: Mosaique pills (override the kit's uppercase rectangles) ───────── */
.btn { border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; line-height: 1.2; padding: .5em 3.2em; }   /* slim, long pill as designed (~33px tall at desktop) */
.btn-fill        { background: var(--teal); color: var(--white); }
.btn-fill:hover  { background: var(--brand-dark); }
.btn-amber       { background: var(--amber); color: var(--brown); }
.btn-amber:hover { background: #E5A63C; }
.btn-cream       { background: var(--cream); color: var(--brown); }
.btn-cream:hover { background: var(--white); }
.btn-outline     { color: var(--brown); }
.btn-outline:hover { background: var(--brown); color: var(--white); }

/* ── Navigation: solid cream bar, always visible, compacts on scroll ─────────── */
.nav, .nav.nav--static, .nav.is-scrolled {
  position: fixed; inset: 0 0 auto; z-index: 40;
  background: var(--cream); color: var(--orange);
  box-shadow: 0 1px 0 rgba(134, 82, 39, .10);
  transition: box-shadow .3s var(--ease);
}
.nav.is-compact { box-shadow: 0 2px 14px rgba(134, 82, 39, .12); }
.nav__bar {
  max-width: none;                            /* edge to edge: logo and language toggle sit the same distance from each side */
  padding-inline: clamp(16px, 2.4vw, 36px);
  min-height: 0;
  padding-block: var(--nav-pad, 18px);
  gap: clamp(14px, 2.5vw, 40px);
  transition: padding .3s var(--ease);
}
.nav.is-compact .nav__bar { --nav-pad: 13px; }

/* Logo (includes/logo.php — the real wordmark SVG, 225×60, fill: currentColor) */
.nav__logo { display: block; flex: none; color: var(--amber); line-height: 0; }
.logo { display: block; --logo-h: 44px; }
.logo__svg { display: block; height: var(--logo-h); width: auto; transition: height .3s var(--ease); }
.nav.is-compact .logo { --logo-h: 38px; }

/* Anchored sections land just under the compact bar (13px pad ×2 + 38px logo) */
[id] { scroll-margin-top: 64px; }

/* Links */
.nav__links { margin-inline: auto; gap: clamp(16px, calc(1.4vw + 2px), 28px); flex-wrap: nowrap; }
.nav__links a {
  position: relative; font: 500 13px/1 var(--font); letter-spacing: 0; text-transform: none;
  color: var(--orange); padding-block: .45em; white-space: nowrap;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a.is-cta { font-weight: 600; text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 1.5px; }
.nav__links a.is-cta::after { display: none; }

/* Language toggle (English active; French rendered but inert until that version exists) */
.lang-row { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.lang { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; background: var(--sage); font: 500 13px/1 var(--font); flex: none; }
/* Arrow out to the Beau Plan site, beside the toggle */
.nav__ext { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 999px; background: var(--orange); color: var(--white); font: 500 13px/1 var(--font); text-decoration: none; white-space: nowrap; transition: background .2s var(--ease), transform .2s var(--ease); }
.nav__ext:hover, .nav__ext:focus-visible { background: var(--teal); transform: translateX(2px); }
.nav__ext svg { width: 18px; height: 18px; fill: currentColor; }   /* Beau Plan arrowhead, white */
.lang__item { display: inline-flex; align-items: center; gap: .5em; padding: .75em 1.7em; border-radius: 999px; color: #6E8483; }
.lang__item.is-active { background: var(--teal); color: var(--white); }
a.lang__item { text-decoration: none; transition: color .2s var(--ease); }
.lang__item:not(.is-active):hover, .lang__item:not(.is-active):focus-visible { color: var(--teal); }
.legal__notice { background: var(--sage); color: var(--brown); padding: .8em 1.2em; border-radius: 8px; font-size: 14px; margin-bottom: 1.5rem; max-width: none; }   /* legal pages are English-only for now */

/* Burger + drawer in brand colours */
.nav__burger { color: var(--orange); }
.drawer { background: var(--cream); color: var(--brown); }
.drawer__links { gap: .75rem; }
.drawer__links a { font-family: var(--font); font-size: 18px; font-weight: 500; color: var(--orange); }
.drawer__links .btn { color: var(--white); align-self: flex-start; font-size: 13px; padding: .5em 2.2em; margin-top: .5rem; }   /* colour beats the orange link colour above; flex-start stops it stretching the drawer width */
.drawer .lang-row { margin-top: 1.5rem; align-self: flex-start; }

/* Links centred on the bar, not between the logo and the (wider) language toggle. Equal 1fr side columns can't
   shrink below their content, so where there isn't room the links shift only as far as they must. */
@media (min-width: 1041px) {
  .nav__bar { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }   /* max-content: the toggle + arrow never overflow their column (FR labels run wider) */
  .nav__links { margin-inline: 0; }
  .nav__logo { justify-self: start; }   /* keep the link the size of the logo */
  .nav__bar > .lang-row { justify-self: end; }
}
@media (max-width: 1180px) { .nav__links { gap: 16px; } .nav__links a { font-size: 12px; } }
/* French links run wider: tighten the toggle padding where the bar is narrow */
@media (min-width: 1041px) and (max-width: 1400px) {
  html[lang="fr"] .nav__bar .lang__item { padding-inline: 1em; }
}
@media (min-width: 1041px) and (max-width: 1120px) {
  html[lang="fr"] .nav__links { gap: 9px; }
  html[lang="fr"] .nav__bar { gap: 12px; }
  html[lang="fr"] .nav__bar .lang__item { padding-inline: .6em; }
}
@media (max-width: 1040px) { .nav__bar > .lang-row { display: none; } }
@media (max-width: 860px)  { .nav__links { display: none; } .logo { --logo-h: 36px; } .nav__burger { margin-left: auto; } }   /* burger at the right edge, logo at the left */

/* ── Hero: photo left, orange "tile" panel right, sage showing through the rounded corner ── */
.hero-mq {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(min(100%, 340px), 1fr);   /* orange panel ≈ 36% of the width */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  background: var(--sage);
  color: var(--white);
  overflow: hidden;
}
.hero-mq__media { position: relative; min-height: 420px; overflow: hidden; }
.hero-mq__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero-mq__panel {
  --panel-r: min(32vw, 510px);                 /* ≈ the panel's own width → a true quarter-circle corner */
  position: relative;
  display: flex; flex-direction: column;
  background: var(--orange);
  border-top-right-radius: var(--panel-r);
  padding: 0 clamp(24px, 2.6vw, 44px) clamp(28px, 3vw, 48px) clamp(24px, 2.6vw, 44px);
}
/* Top gap is the give: it fills the viewport-tall panel up to the design gap, and shrinks first on short
   windows (down to a floor that keeps text clear of the corner) before the text gets pushed off-screen. */
.hero-mq__panel::before { content: ""; flex: 1 0 0; min-height: calc(var(--panel-r) * .2); max-height: calc(var(--panel-r) * .55); }
/* Two columns: intro + prices span both; launch/date and the button share a first column only as wide as the
   date, so the button's right edge lines up with the end of "2026". */
.hero-mq__content { display: grid; grid-template-columns: fit-content(100%) 1fr; gap: clamp(14px, 1.4vw, 22px); }
.hero-mq__intro, .hero-mq__prices, .hero-mq__disclaimer { grid-column: 1 / -1; }
.hero-mq__launch, .hero-mq__cta { grid-column: 1; }
.hero-mq__content p { max-width: none; }
.hero-mq__intro  { font-size: clamp(26px, 2.1vw, 40px); font-weight: 600; line-height: 1; letter-spacing: 0; }   /* design: Montserrat SemiBold 40/100% at the 1920 frame */
.hero-mq__prices { font-family: var(--font-display); font-size: clamp(28px, 2.4vw, 50px); font-weight: 500; line-height: 1; letter-spacing: 0; margin-top: clamp(20px, 3vw, 56px); }   /* design: Margem Medium 50/100% at 1920 */
.hero-mq__disclaimer { font-size: clamp(13px, 1vw, 18px); line-height: 1.2; opacity: .8; margin-top: calc(-1 * clamp(6px, .7vw, 12px)); }
.hero-mq__launch { font-size: clamp(20px, 1.6vw, 31px); font-weight: 500; line-height: 1; letter-spacing: .03em; }   /* design: Montserrat Medium 31/100%, +3% at 1920 */
.hero-mq__date   { display: block; font-family: var(--font-display); font-size: clamp(40px, 3.65vw, 70px); font-weight: 500; line-height: 1; letter-spacing: 0; margin-top: .15em; }   /* design: Margem Medium 70/100% at 1920 */
.hero-mq__cta    { justify-self: end; margin-top: clamp(8px, 1vw, 16px); font-size: clamp(15px, 1.2vw, 18px); padding: .65em 3.6em; }   /* sized to its label, right edge on the date's */

@media (max-width: 860px) {
  /* Stacked, still one screen tall (min-height from above): the panel takes what its text needs, the photo gets
     the rest, so Register Now stays above the fold. */
  .hero-mq { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .hero-mq__media { min-height: 180px; }   /* ponytail: floor for tiny phones — below this the hero grows past the fold instead */
  .hero-mq__panel { --panel-r: min(56vw, 300px); }
  .hero-mq__panel::before { flex-grow: 0; min-height: calc(var(--panel-r) * .35); }   /* fixed gap; the photo absorbs spare height */
  .hero-mq__intro { font-size: 20px; }
  .hero-mq__date  { font-size: 34px; }
}

/* ── Hero entrance — the mosaic idea, kept light. Plays once the loader has lifted
   (html.mq-loaded, set by js/loader.js or js/site.js). JS-off (no .reveal-ready) → final state.
   Reduced motion → no hidden start states at all. ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .hero-mq__panel {
    transition: border-top-right-radius 1s cubic-bezier(.22, .61, .36, 1) .15s, transform .9s cubic-bezier(.22, .61, .36, 1);
  }
  html.reveal-ready .hero-mq__media img { transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1), transform 1.6s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .hero-mq__content > * { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); transition-delay: .05s; }
  html.reveal-ready .hero-mq__content > :nth-child(2) { transition-delay: .25s; }
  html.reveal-ready .hero-mq__content > :nth-child(3) { transition-delay: .45s; }
  html.reveal-ready .hero-mq__content > :nth-child(4) { transition-delay: .7s; }

  /* Start states: a square tile that rounds into the mosaic shape; the photo wipes in like a tile sliding into place. */
  html.reveal-ready:not(.mq-loaded) .hero-mq__panel { border-top-right-radius: 0; transform: translateY(18px); }
  html.reveal-ready:not(.mq-loaded) .hero-mq__media img { clip-path: inset(0 100% 0 0); transform: scale(1.06); }
  /* The copy waits for html.mq-revealed — set when the loader's break is 90% done (js/loader.js) — so it is
     SEEN coming in rather than already there when the last tiles clear. Panel + photo start earlier, on .mq-loaded. */
  html.reveal-ready:not(.mq-revealed) .hero-mq__content > * { opacity: 0; }
  html.reveal-ready:not(.mq-revealed) .hero-mq__content > :nth-child(1) { transform: translateX(48px); }    /* intro — in from the right */
  html.reveal-ready:not(.mq-revealed) .hero-mq__content > :nth-child(2) { transform: translateX(-48px); }   /* prices — in from the left */
  html.reveal-ready:not(.mq-revealed) .hero-mq__content > :nth-child(3) { transform: translateX(48px); }    /* launch + date — in from the right */
  html.reveal-ready:not(.mq-revealed) .hero-mq__content > :nth-child(4) { transform: none; }                /* Register Now — fades in where it is */
  html.reveal-ready.mq-loaded .hero-mq__media img { clip-path: inset(0); transform: none; }
}

/* ── Breeze band: full-bleed photo, one line of copy flowing along an arc on scroll ──
   js/site.js moves the textPath's startOffset with scroll and scales the photo (data-breeze).
   Without JS / with reduced motion the line rests centred on the arc — the design's still frame. */
.breeze {
  position: relative; overflow: hidden; background: #1d2a1f; width: 100%;
  /* Height only — NOT aspect-ratio + max-height: CSS transfers a max-height cap to the width of an
     aspect-ratio box, which left a gap down the right side in short windows. */
  height: clamp(360px, 56.25vw, 100svh);
}
.breeze__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
  transform: scale(var(--zoom, 1)); transform-origin: 55% 55%; will-change: transform;
}
.breeze__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.breeze__text {
  font-family: var(--font); font-weight: 500; font-size: 48px;         /* SVG user units — scales with the band */
  fill: var(--white); letter-spacing: .01em;
  paint-order: stroke fill; stroke: rgba(0,0,0,.18); stroke-width: 6px; stroke-linejoin: round;   /* keeps it legible over bright leaves */
}
@media (max-width: 860px) { .breeze { display: none; } }   /* hidden on phones (the lazy photo never loads); the old phone sizing is in git history */
@media (prefers-reduced-motion: reduce) { .breeze__img { transform: none !important; } }

/* ── Split tile: colour text panel + photo with one quarter-circle corner (includes/layouts/split-tile.php) ──
   Photo side and rounded corner are set by modifier classes; colours by --tile-panel / --tile-photo-bg. */
.tile {
  display: grid;
  grid-template-columns: minmax(min(100%, 340px), 1fr) minmax(0, 2fr);
  min-height: clamp(520px, 56vw, 100svh);
  color: var(--brown);
}
.tile--photo-left { grid-template-columns: minmax(0, 2fr) minmax(min(100%, 340px), 1fr); }
.tile--photo-left .tile__panel { order: 2; }
.tile--photo-left .tile__media { order: 1; }

.tile__panel { background: var(--tile-panel, var(--sage)); display: grid; align-content: center; padding: clamp(40px, 6vw, 96px) clamp(24px, 3.4vw, 52px); }
.tile__copy  { display: grid; gap: clamp(20px, 2.4vw, 36px); max-width: 30rem; }
.tile__title { font-size: clamp(34px, 3.4vw, 54px); line-height: 1.06; color: var(--brown); }
html[lang="fr"] .tile__title { font-size: clamp(28px, 2.9vw, 48px); }   /* "harmonieusement" (~8.7em) must fit the column whole */
.tile__text  { display: grid; gap: 1em; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; }
.tile__text p { max-width: none; }
.tile__cta   { margin-top: clamp(4px, .8vw, 12px); }

.tile__media { position: relative; background: var(--tile-photo-bg, var(--teal)); overflow: hidden; min-height: 320px; }
.tile__media img {
  --tile-r: min(48vw, 640px);                    /* quarter-circle radius ≈ the photo's own height */
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
.tile--corner-tl .tile__media img { border-top-left-radius: var(--tile-r); object-position: 60% 50%; }
.tile--corner-tr .tile__media img { border-top-right-radius: var(--tile-r); }
.tile--corner-bl .tile__media img { border-bottom-left-radius: var(--tile-r); }
.tile--corner-br .tile__media img { border-bottom-right-radius: var(--tile-r); }
/* Optional partner logo pinned to the photo's bottom-right corner (after the corner rules so it wins). */
.tile__media img.tile__badge {
  inset: auto clamp(16px, 2vw, 32px) clamp(16px, 2vw, 32px) auto;
  width: clamp(110px, 12vw, 180px); height: auto;
  object-fit: contain; border-radius: 0;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35));
}

@media (max-width: 860px) {
  .tile, .tile--photo-left { grid-template-columns: 1fr; min-height: 0; }
  .tile--photo-left .tile__panel { order: 1; }
  .tile--photo-left .tile__media { order: 2; }
  .tile__media { aspect-ratio: 4 / 3; min-height: 0; }
  .tile__media img { --tile-r: min(60vw, 300px); }
  .tile__copy { max-width: none; }
}

/* Entrance — same language as the hero: the photo is a square tile that rounds into the mosaic shape
   as it wipes in; the copy slides in from the panel's outer edge in three beats. Plays once, when the
   section scrolls into view (js/site.js adds .is-in). JS off → at rest. Reduced motion → no start states. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .tile__media img { transition: border-radius 1s cubic-bezier(.22, .61, .36, 1) .1s, clip-path 1.1s cubic-bezier(.65, 0, .35, 1), transform 1.6s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .tile__copy > * { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .tile__copy > :nth-child(1) { transition-delay: .15s; }
  html.reveal-ready .tile__copy > :nth-child(2) { transition-delay: .35s; }
  html.reveal-ready .tile__copy > :nth-child(3) { transition-delay: .6s; }

  html.reveal-ready .tile[data-reveal]:not(.is-in) .tile__media img { border-radius: 0; transform: scale(1.06); }
  html.reveal-ready .tile--photo-right[data-reveal]:not(.is-in) .tile__media img { clip-path: inset(0 0 0 100%); }   /* wipes in from the right edge */
  html.reveal-ready .tile--photo-left[data-reveal]:not(.is-in)  .tile__media img { clip-path: inset(0 100% 0 0); }   /* … or from the left */
  html.reveal-ready .tile[data-reveal].is-in .tile__media img { clip-path: inset(0); transform: none; }
  html.reveal-ready .tile[data-reveal]:not(.is-in) .tile__copy > * { opacity: 0; }
  html.reveal-ready .tile--photo-right[data-reveal]:not(.is-in) .tile__copy > * { transform: translateX(-48px); }   /* copy on the left comes in from the left */
  html.reveal-ready .tile--photo-left[data-reveal]:not(.is-in)  .tile__copy > * { transform: translateX(48px); }
  html.reveal-ready .tile[data-reveal]:not(.is-in) .tile__copy > .tile__cta { transform: none; }                    /* the button fades in where it is */
}

/* ── Map: aerial with interest markers + the Mosaique pin (includes/layouts/map-pins.php) ──────────
   Markers and pin are positioned in % of the IMAGE on .map__fit, a cover replica sized in container
   units, so they stay on their landmarks whatever the crop. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Crop: the image is anchored bottom-right and sized so --crop-l of its width and --crop-t of its height fall off
   the stage (the stage takes the remaining shape). Markers/pin/areas are % of .map__fit, so they follow the crop.
   Keep the leftmost marker (x ~40%) and the top-most label / Mosaique pin (y ~44%) in view when tuning these. */
.map { position: relative; color: var(--white); overflow: hidden; --crop-l: .2; --crop-t: 0; }
.map__stage { position: relative; background: #7f8f7a; container-type: size; overflow: hidden;
  aspect-ratio: calc(var(--map-w) * (1 - var(--crop-l))) / calc(var(--map-h) * (1 - var(--crop-t))); }
.map__fit { position: absolute; right: 0; bottom: 0;
  width: calc(100cqw / (1 - var(--crop-l))); height: calc(100cqh / (1 - var(--crop-t))); }
.map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.map__cta { position: absolute; left: 50%; top: clamp(20px, 3vw, 48px); transform: translateX(-50%); margin: 0; z-index: 2; white-space: nowrap; }

/* Markers: an amber teardrop whose tip sits on (--x, --y), with a pill that stretches right out of its round top
   into a speech bubble (the drop's point stays as the bubble's tail). The <li> is a 0×0 anchor at the tip.
   --pin is the pill's height and the drop's width. */
.map__markers { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.map__marker  { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; --pin: clamp(22px, 1.9vw, 32px);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }   /* one shadow for drop + pill together */
.map__marker::after {                                /* the teardrop (100×140): circle centre .9 pin above the tip */
  content: ""; position: absolute; left: calc(var(--pin) * -.5); bottom: 0;
  width: var(--pin); height: calc(var(--pin) * 1.4); background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M50 140C50 140 0 84 0 50a50 50 0 1 1 100 0c0 34-50 90-50 90Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M50 140C50 140 0 84 0 50a50 50 0 1 1 100 0c0 34-50 90-50 90Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: 50% 100%;   /* pops in on its tip */
}
.map__label {
  /* The pill's left rounded end is the drop's circle exactly (same centre, same diameter), so the bubble reads as
     the drop stretched sideways. */
  position: absolute; z-index: 1;   /* above the teardrop (::after paints after it otherwise), so the name isn't covered */
  left: calc(var(--pin) * -.5); bottom: calc(var(--pin) * .4);
  height: var(--pin); box-sizing: border-box; padding: 0 calc(var(--pin) * .45);
  display: flex; align-items: center; width: max-content; white-space: nowrap;
  font: 600 clamp(10px, .8vw, 13px)/1 var(--font);
  color: var(--white); background: var(--amber); border-radius: 999px;
}

/* Areas: hover a traced outline → the rest of the map dims and the outline shows (g:hover, no JS) */
.map__areas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map__area-dim   { fill: #000; opacity: 0; transition: opacity .35s ease; }
.map__area-shape { fill: transparent; stroke: var(--white); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-opacity: 0;
  pointer-events: all; cursor: pointer; transition: stroke-opacity .35s ease; }
.map__area:hover .map__area-dim   { opacity: .55; }
.map__area:hover .map__area-shape { stroke-opacity: 1; }

/* Pin: amber teardrop (100×130 viewBox), tip on (--x, --y) */
.map__pin { position: absolute; left: var(--x); top: var(--y); width: clamp(64px, 8.5vw, 130px); aspect-ratio: 100 / 130; transform: translate(-50%, -100%); z-index: 1; }
.map__pin-shape { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 16px rgba(0,0,0,.3)); }
.map__pin-logo  { position: absolute; left: 50%; top: 38.5%; transform: translate(-50%, -50%); width: 78%; color: var(--white); line-height: 0; }
.map__pin-logo .logo { --logo-h: auto; }
.map__pin-logo .logo__svg { width: 100%; height: auto; }
.map__pin-shadow { position: absolute; left: 50%; bottom: -5px; width: 30%; height: 6px; border-radius: 50%; background: rgba(0,0,0,.35); transform: translateX(-50%); filter: blur(3px); }

@media (max-width: 860px) {
  .map { --crop-l: .35; }   /* crop more of the left on phones (see "Crop" above) */
  .map { background: var(--cream); }   /* the strip behind the button matches the sections around it (not the white body) */
  .map__cta { position: static; transform: none; text-align: center; padding-bottom: 16px; }   /* above the map, not over it */
  .map__marker { --pin: 9px; }
  .map__label { font-size: 6.5px; }
  .map__pin { width: 44px; }
}

/* Choreography — once .is-in lands (js/site.js). JS off → at rest. Reduced motion → at rest. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .map:not(.is-in) .map__marker::after,
  html.reveal-ready .map:not(.is-in) .map__label,
  html.reveal-ready .map:not(.is-in) .map__pin { opacity: 0; }
  /* 1) the teardrop pops in on its tip  2) the pill (starting clipped to the drop's circle, same colour, so no seam)
     stretches right out of the drop, name fades in; the drop stays as the tail */
  .map.is-in .map__marker::after  { animation: mq-marker-pop .4s cubic-bezier(.34, 1.56, .64, 1) var(--delay) both; }
  .map.is-in .map__label          { animation: mq-marker-in .01s linear calc(var(--delay) + .4s) both,
                                               mq-marker-expand var(--dur) cubic-bezier(.22, .61, .36, 1) calc(var(--delay) + .45s) both; }
  .map.is-in .map__pin            { animation: mq-pin-drop 1.1s cubic-bezier(.22, .61, .36, 1) var(--pin-delay) both; }
}
@keyframes mq-marker-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes mq-marker-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mq-marker-expand {
  0%   { clip-path: inset(0 calc(100% - var(--pin)) 0 0 round 999px); color: transparent; }
  60%  { color: transparent; }
  100% { clip-path: inset(0 0 0 0 round 999px); color: var(--white); }
}
@keyframes mq-pin-drop {
  0%   { opacity: 0; transform: translate(-50%, calc(-100% - 140px)); }
  50%  { opacity: 1; transform: translate(-50%, -100%); }
  66%  { transform: translate(-50%, calc(-100% - 26px)); }
  80%  { transform: translate(-50%, -100%); }
  90%  { transform: translate(-50%, calc(-100% - 8px)); }
  100% { opacity: 1; transform: translate(-50%, -100%); }
}

/* ── Intro text block: centred copy on a flat colour (includes/layouts/intro-text.php) ─────────── */
.intro { background: var(--intro-bg, var(--cream)); color: var(--brown); padding-block: clamp(64px, 9vw, 128px); }
.intro__inner { display: grid; justify-items: center; text-align: center; gap: clamp(24px, 3vw, 44px); }
.intro__head { display: grid; gap: .55em; justify-items: center; }
.intro__eyebrow { font: 500 clamp(17px, 1.35vw, 23px)/1.3 var(--font); color: var(--brown); max-width: none; }
.intro__title { font-size: clamp(30px, 3.1vw, 50px); line-height: 1.1; max-width: 32ch; }   /* one line at desktop, as designed */
.intro__text { display: grid; gap: 1.1em; max-width: var(--intro-measure, 74rem); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; }
.intro__text p { max-width: none; }
.intro__cta { margin-top: clamp(4px, 1vw, 16px); }
#every-piece { padding-bottom: clamp(32px, 4vw, 64px); }   /* the frangipani drawing below sits up close to the copy */
#drawing { padding-top: 0; }

/* Entrance: eyebrow + heading, then copy, then button — each fading up into place. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .intro__inner > * { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .intro__inner > :nth-child(2) { transition-delay: .25s; }
  html.reveal-ready .intro__inner > :nth-child(3) { transition-delay: .5s; }
  html.reveal-ready .intro[data-reveal]:not(.is-in) .intro__inner > * { opacity: 0; transform: translateY(28px); }
}

/* ── Line drawing: frangipani artwork revealed right → left as if drawn (includes/layouts/line-drawing.php)
   The whole drawing sits under an SVG mask; .draw__pen (a soft-edged white sweep) slides from the right edge
   to past the left edge, uncovering the line as it travels. Petals bloom at their turn (--t). */
.draw { background: var(--draw-bg, var(--cream)); padding-block: clamp(24px, 4vw, 64px); overflow: hidden; }
.draw__svg { display: block; width: min(100%, 1680px); margin-inline: auto; height: auto; overflow: visible; }
.draw__line { fill: #8F4F1B; }
.draw__petals path { fill: var(--amber); }
.draw__pen { transform: translateX(-220px); }                                  /* at rest: everything revealed */

@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .draw__pen { transition: transform 3.4s cubic-bezier(.45, .05, .55, .95); }
  html.reveal-ready .draw[data-reveal]:not(.is-in) .draw__pen { transform: translateX(1680px); transition: none; }   /* pen waiting at the right edge */
  html.reveal-ready .draw__petals {
    transition: opacity .9s ease;                                             /* fade in place — no movement */
    transition-delay: calc(var(--t, 0) * 3.4s + .35s);                         /* just after the pen passes the flower */
  }
  html.reveal-ready .draw[data-reveal]:not(.is-in) .draw__petals { opacity: 0; transition: none; }
}

/* ── Arch list: teal arch + photo arch slideshow left, heading + flower-bulleted list right
   (includes/layouts/arch-list.php). The art box is square; the arches are placed in % of it and stand on its
   bottom edge, which is the section's bottom edge (no bottom padding on that column). ─────────────────── */
.hood { background: var(--cream); color: var(--brown); overflow: hidden; }
/* --hood-pad: the copy's top padding AND the photo arch's top offset, so the arch top lines up with the heading.
   The teal arch rises above both to the top of the section's padding. Both arches run to the section's bottom. */
.hood { --hood-pad: clamp(56px, 6.5vw, 100px); }
.hood__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  gap: clamp(24px, 4vw, 72px); padding-top: clamp(40px, 5vw, 80px);
}
.hood__art { position: relative; max-width: 560px; min-height: 420px; }
.hood__arch { position: absolute; bottom: 0; overflow: hidden; border-radius: 999px 999px 0 0; }
.hood__arch--back  { left: 2%;  width: 68%; top: 0;              background: var(--hood-arch, var(--teal)); }   /* colour per block: --hood-arch */
.hood__arch--photo { left: 26%; width: 74%; top: var(--hood-pad); background: var(--sage); }
.hood__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .9s ease; }
.hood__slide.is-active { opacity: 1; }

.hood__copy { display: grid; align-content: start; gap: clamp(28px, 3vw, 48px); padding: var(--hood-pad) 0 clamp(48px, 6vw, 96px) clamp(24px, 7vw, 100px); }   /* pushed right, off the centre line */
.hood__title { font-size: clamp(25px, 1.95vw, 32px); line-height: 1.25; color: var(--hood-accent, var(--brown)); }
.hood__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.4vw, 22px); }
.hood__item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.hood__bullet { display: block; color: var(--hood-accent, #8F4F1B); margin-top: 3px; }
.icon-flower { display: block; width: 22px; height: auto; }
.hood__item-text { display: grid; gap: .15em; }
.hood__item-title { font: 500 clamp(17px, 1.3vw, 21px)/1.3 var(--font); color: var(--hood-accent, var(--brown)); }
.hood__cta { margin: clamp(8px, 1.2vw, 20px) 0 0; justify-self: start; }
.hood__item-sub { font: 400 clamp(12px, .95vw, 14px)/1.4 var(--font); color: var(--hood-sub, var(--orange)); }   /* colour per block: --hood-sub */

/* Mirror (the Clubhouse block): copy on the left, arches on the right — photo arch first, the back arch to its right
   running off the edge. */
.hood--art-right .hood__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hood--art-right .hood__art  { order: 2; justify-self: end; width: 100%; }   /* justify-self, not an auto margin — that collapsed the box to 0 wide */
.hood--art-right .hood__copy { order: 1; padding-left: 0; padding-right: clamp(24px, 4vw, 64px); }
.hood--art-right .hood__arch--back  { left: auto; right: -14%; width: 82%; }
.hood--art-right .hood__arch--photo { left: 0; width: 74%; }

/* .hood--bleed (Neighbourhood, Clubhouse, Resident Support — desktop): fatter photo arch; the back arch's
   right side runs to the screen edge — pushed past the art box by the .wrap gutter; .hood's overflow clips any
   scrollbar-width overshoot. The pinned Clubhouse / Resident Support arches are sized in "Clubhouse life pin". */
@media (min-width: 861px) {
  .hood--bleed .hood__art { max-width: none; }
  .hood--bleed .hood__arch--photo { width: 92%; }
  .hood--bleed .hood__arch--back  { left: 40%; width: auto; right: calc(-1 * (var(--pad) + max(0px, (100vw - var(--wrap)) / 2))); }
}

/* .hood--follow: a section that continues the one above (Resident Support under the Clubhouse list) — tight seam */
.hood--follow .hood__inner { padding-top: clamp(8px, 1vw, 16px); }
@media (max-width: 860px) {
  .hood__inner { grid-template-columns: 1fr; gap: 0; }
  .hood { --hood-pad: 12vw; }
  /* Mirrored blocks (Clubhouse, Resident Support) take the Neighbourhood's phone layout exactly: one column, copy
     first, back arch left and photo arch right. .hood--art-right's own rules out-rank the plain ones, so restate. */
  .hood--art-right .hood__inner { grid-template-columns: 1fr; }
  .hood--art-right .hood__art { order: 2; justify-self: stretch; }
  .hood--art-right .hood__copy { order: 1; padding-right: 0; }
  .hood--art-right .hood__arch--back  { left: 2%; right: auto; width: 68%; }
  .hood--art-right .hood__arch--photo { left: 26%; width: 74%; }
  .hood__art { max-width: none; min-height: 0; aspect-ratio: 1 / 1.05; }
  .hood__copy { padding: clamp(32px, 8vw, 48px) 0; order: -1; }   /* copy first, arches below */
}

/* Entrance: arches fade up, the photo arch settling a little towards the teal one; heading fades up; list
   items load in one after another. Plays once (data-reveal → .is-in). */
@media (prefers-reduced-motion: no-preference) {
  /* Order matters: the PHOTO fades in first over the plain page, the arch behind it fades in afterwards — a
     translucent photo over the arch read as broken. */
  html.reveal-ready .hood__arch--photo { transition: opacity .8s ease, transform 1.3s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .hood__arch--back  { transition: opacity .9s ease .75s, transform 1s cubic-bezier(.22, .61, .36, 1) .75s; }
  html.reveal-ready .hood__title       { transition: opacity .8s ease .2s, transform .8s cubic-bezier(.22, .61, .36, 1) .2s; }
  html.reveal-ready .hood__item        { transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(.45s + var(--i, 0) * .14s); }

  html.reveal-ready .hood[data-reveal]:not(.is-in) .hood__arch--back  { opacity: 0; transform: translateY(24px); }
  html.reveal-ready .hood[data-reveal]:not(.is-in) .hood__arch--photo { opacity: 0; transform: translate(18%, 24px); }   /* starts further right, eases in towards the teal arch */
  html.reveal-ready .hood--art-right[data-reveal]:not(.is-in) .hood__arch--photo { transform: translate(-18%, 24px); }  /* mirrored: eases in from the left */
  @media (max-width: 860px) { html.reveal-ready .hood--art-right[data-reveal]:not(.is-in) .hood__arch--photo { transform: translate(18%, 24px); } }   /* phones: not mirrored */
  html.reveal-ready .hood[data-reveal]:not(.is-in) .hood__title       { opacity: 0; transform: translateY(20px); }
  html.reveal-ready .hood[data-reveal]:not(.is-in) .hood__item        { opacity: 0; transform: translateY(16px); }
}

/* ── Rich world: orange tile with a huge rounded bottom-left corner
   (includes/layouts/rich-world.php) ─────────────────────────────────────────────────────────────── */
.rich { background: var(--sage); color: var(--white); overflow: hidden; }
.rich__tile {
  --tile-r: 74% 82%;                                             /* the mosaic corner: x% of width / y% of height */
  background: var(--orange);
  border-bottom-left-radius: var(--tile-r);
  padding: clamp(56px, 7vw, 110px) 0 clamp(90px, 10vw, 160px);   /* bottom room so the curve clears the copy */
}
.rich__copy { display: grid; justify-items: center; text-align: center; gap: clamp(22px, 2.6vw, 40px); }
.rich__title { font-size: clamp(30px, 3.4vw, 54px); line-height: 1.1; color: var(--white); }
.rich__text { display: grid; gap: 1.1em; max-width: 48rem; font-size: clamp(13px, .95vw, 15px); line-height: 1.6; }
.rich__text p { max-width: none; }
@media (max-width: 860px) {
  .rich__tile { --tile-r: 70% 50%; padding-bottom: clamp(120px, 32vw, 180px); }   /* curve starts below the last line of copy (FR runs longer) */
}

/* Entrance: the tile's corner rounds from square into the mosaic shape; heading then copy fade up. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .rich__tile   { transition: border-bottom-left-radius 1.2s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .rich__title  { transition: opacity .8s ease .15s, transform .8s cubic-bezier(.22, .61, .36, 1) .15s; }
  html.reveal-ready .rich__text   { transition: opacity .8s ease .4s, transform .8s cubic-bezier(.22, .61, .36, 1) .4s; }
  html.reveal-ready .rich[data-reveal]:not(.is-in) .rich__tile  { border-bottom-left-radius: 0; }
  html.reveal-ready .rich[data-reveal]:not(.is-in) .rich__title,
  html.reveal-ready .rich[data-reveal]:not(.is-in) .rich__text  { opacity: 0; transform: translateY(22px); }}

/* ── Parallax band: full-width photo, drifts against the scroll and zooms in (includes/layouts/parallax-band.php) ── */
.plx { position: relative; overflow: hidden; height: clamp(360px, 56vw, 90svh); background: #24301f; }
.plx__img {
  position: absolute; left: 0; top: -15%; width: 100%; height: 130%;          /* taller than the band = room to travel */
  object-fit: cover; object-position: center;
  transform: translateY(var(--shift, 0)) scale(var(--zoom, 1)); transform-origin: 50% 50%; will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .plx__img { transform: none !important; top: 0; height: 100%; } }

/* ── Apartments & Cottages intro → 23 Apartments (includes/layouts/apartments-cottages.php) ─────────────
   ONE section, everything placed in cqw (1% of the section width) exactly as measured from the design.
   Desktop: the section is 105.5cqw tall and its pieces are absolutely placed. Below 860px: normal flow. */
.ac { position: relative; background: var(--teal); container-type: inline-size; color: var(--brown); overflow: hidden; height: 105.5cqw; }
.ac__sage  { position: absolute; inset: 0; background: var(--sage); border-top-right-radius: 45cqw; }       /* the one sage shape; teal only beyond this corner */
.ac__cream { position: absolute; left: 0; right: 0; top: 49cqw; bottom: 0; background: var(--cream); border-top-left-radius: 45cqw; }

.ac__intro { position: absolute; left: 20cqw; right: 20cqw; top: 15cqw; display: grid; justify-items: center; text-align: center; gap: 2.4cqw; }
.ac__title { font-size: 3.3cqw; line-height: 1.12; }
.ac__text  { display: grid; gap: 1em; font-size: 14px; line-height: 1.55; }
.ac__text p { max-width: none; }

.ac__apt   { position: absolute; inset: 0; pointer-events: none; }   /* full-bleed layer sits over .ac__intro; let clicks/selection through */
.ac__copy, .ac__media { pointer-events: auto; }
.ac__media { position: absolute; left: calc(33cqw - 15px); top: 63.5cqw; width: calc(67cqw + 15px); bottom: 0; }   /* +15px taken from the copy */
/* Corner radius as in the design: ~30% of the photo width. All slides are plain rectangles (the exterior render's
   Figma-baked transparent corner was filled from the surrounding sky at export), so the frame alone shapes them. */
/* clip-path repeats the corner: overflow + radius alone stops clipping a slide while its opacity fade runs on its own layer */
.ac__frame { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; border-top-left-radius: 30cqw; clip-path: inset(0 round 30cqw 0 0 0); background: var(--cream); }
.ac__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .9s ease; }
.ac__slide.is-active { opacity: 1; }
.ac__slide--contain { object-fit: contain; background: var(--white); padding: 4%; box-sizing: border-box; }   /* floor plans: whole drawing on white */
/* Prev / next pills, bottom-right of the photo (apartments and cottages). Only the image changes; the copy stays put.
   Prev is outlined, Next is filled, both frosted so they sit on any photo. */
.ac__nav { position: absolute; right: clamp(12px, 1.6vw, 24px); bottom: clamp(24px, 3vw, 48px); display: flex; gap: 10px; z-index: 1; }
.ac__arrow {
  height: clamp(32px, 2.5vw, 38px); padding: 0 clamp(16px, 1.5vw, 24px); border-radius: 999px; cursor: pointer;
  font: 600 clamp(12px, .95vw, 15px)/1 var(--font); color: var(--teal); letter-spacing: .02em; white-space: nowrap;
  border: 2px solid var(--teal); background: rgba(243, 239, 235, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ac__arrow--next { background: rgba(243, 239, 235, .72); border-color: transparent; }
.ac__arrow:hover { background: var(--teal); color: var(--white); border-color: var(--teal); }
.ac__arrow:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* Desktop: the nav sits in .ac__media / .cot__media (outside the frame's container), so cqw here is the section's
   width — same unit as the copy — letting the pills share the Register button's baseline and height (1.1cqw × 2.2 + 2px border). */
.ac__media .ac__nav  { bottom: calc(2.75cqw - 4px + 50px); }   /* = .ac__copy bottom */
.cot__media .ac__nav { bottom: 5cqw; }                          /* = .cot__copy bottom */
.ac__media .ac__arrow, .cot__media .ac__arrow { height: calc(2.42cqw + 2px); font-size: .95cqw; }
.ac__copy  { position: absolute; left: calc(5cqw - 15px); bottom: calc(2.75cqw - 4px + 50px); width: calc(26cqw - 15px); display: grid; gap: 1.3cqw; }   /* 15px further left, 15px narrower; 50px above the cottages sage, which overlaps this block by (2.75cqw - 4px) */
.ac__apt-title { font-size: 3.3cqw; line-height: 1.1; }
.ac__apt-text  { font-size: 1.25cqw; line-height: 1.55; max-width: none; }
.ac__cta       { margin-top: .4cqw; }
.ac__cta .btn  { font-size: 1.1cqw; padding: .5em 3.4em; }

@media (max-width: 860px) {
  .ac { height: auto; }
  .ac__sage  { border-top-right-radius: 32cqw; }   /* smaller teal corner so the heading can sit higher without clipping */
  /* Heading + both paragraphs on sage. The fixed-height cream shape can't track where the paragraphs break at
     every width/language, so on phones the apartments block carries the cream (and its curved corner) instead. */
  .ac__cream { display: none; }
  .ac__intro { position: relative; left: auto; right: auto; top: auto; padding: 12cqw var(--pad) 14cqw; gap: 20px; }
  .ac__apt   { background: var(--cream); border-top-left-radius: 30cqw; }
  .ac__title { font-size: clamp(28px, 8cqw, 36px); }
  .ac__text  { font-size: 16px; }
  .ac__apt   { position: relative; inset: auto; padding-top: 22cqw; }
  .ac__copy  { position: relative; left: auto; bottom: auto; width: auto; padding: 0 var(--pad) 10cqw; gap: 14px; justify-items: end; text-align: right; }
  .ac__apt-title { font-size: clamp(28px, 8cqw, 36px); }
  .ac__apt-text  { font-size: 16px; }
  .ac__cta .btn  { font-size: 14px; }
  .ac__media { position: relative; left: auto; top: auto; width: 100%; aspect-ratio: 32 / 21; }
  .ac__media .ac__nav, .cot__media .ac__nav { bottom: 16px; }
  .ac__media .ac__arrow, .cot__media .ac__arrow { height: 32px; font-size: 12px; }
}

/* Entrance. Intro (section .is-in): heading then copy fade up. Apartments (.ac__apt.is-in): the cream corner rounds
   in from square, the photo slides in from the right, the copy slides in from the left. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .ac__title, html.reveal-ready .ac__text { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .ac__text { transition-delay: .25s; }
  html.reveal-ready .ac[data-reveal]:not(.is-in) .ac__title,
  html.reveal-ready .ac[data-reveal]:not(.is-in) .ac__text { opacity: 0; transform: translateY(24px); }

  html.reveal-ready .ac__cream { transition: border-top-left-radius 1.2s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .ac__media { transition: transform 1.1s cubic-bezier(.22, .61, .36, 1) .1s, opacity .9s ease .1s; }
  html.reveal-ready .ac__copy > * { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .ac__copy > :nth-child(2) { transition-delay: .2s; }
  html.reveal-ready .ac__copy > :nth-child(3) { transition-delay: .4s; }
  html.reveal-ready .ac:has(.ac__apt[data-reveal]:not(.is-in)) .ac__cream { border-top-left-radius: 0; }
  html.reveal-ready .ac__apt[data-reveal]:not(.is-in) .ac__media { transform: translateX(12%); opacity: 0; }
  html.reveal-ready .ac__apt[data-reveal]:not(.is-in) .ac__copy > * { opacity: 0; transform: translateX(-32px); }
  html.reveal-ready .ac__apt[data-reveal]:not(.is-in) .ac__copy > .ac__cta { transform: none; }
}

/* ── 21 Cottages: mirror of the apartments block (same partial). Cream page, sage shape with a 45% rounded top-right
   corner, photo full-bleed left (67% wide) with a 30% rounded top-right corner, copy at 71%. 60cqw tall. ─── */
/* Rides 2.75% of the width UP over the apartments block (measured from the design). The section itself is
   transparent in that band: the sage covers the photo on the left, and to the right of the sage's rounded corner the
   apartments photo shows through until the cottages' own cream begins at --cot-overlap. */
.cot { --cot-overlap: calc(2.75cqw - 4px); position: relative; z-index: 2; background: transparent; container-type: inline-size; color: var(--brown); overflow: hidden; height: 60cqw; margin-top: calc(-1 * var(--cot-overlap)); }
.cot__cream { position: absolute; left: 0; right: 0; top: var(--cot-overlap); bottom: 0; background: var(--cream); }
.cot__sage  { position: absolute; inset: 0; background: var(--sage); border-top-right-radius: 45cqw; }
.cot__media { position: absolute; left: 0; top: 14cqw; width: 67cqw; bottom: 0; }
.cot__frame { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; border-top-right-radius: 30cqw; clip-path: inset(0 round 0 30cqw 0 0); background: var(--sage); }   /* clip-path: see .ac__frame */
/* The cottages photo(s) reuse .ac__slide / .ac__nav from the apartments carousel above; buttons bottom-LEFT here
   (the photo's rounded corner is top-right, and the copy sits to the right of it). */
.cot__media .ac__nav { right: auto; left: clamp(12px, 1.6vw, 24px); }
.cot__copy  { position: absolute; left: 71cqw; right: 3cqw; bottom: 5cqw; display: grid; gap: 1.3cqw; }
.cot__title { font-size: 3.3cqw; line-height: 1.1; }
.cot__text  { font-size: 1.25cqw; line-height: 1.55; max-width: none; }
.cot__cta   { margin-top: .4cqw; }
.cot__cta .btn { font-size: 1.1cqw; padding: .5em 3.4em; }

@media (max-width: 860px) {
  .cot { height: auto; --cot-overlap: 0px; display: flex; flex-direction: column; }
  .cot__sage  { border-top-right-radius: 50cqw; }
  .cot__copy  { order: -1; z-index: 1; position: relative; left: auto;   /* z-index: order -1 also paints it first, under the sage */ right: auto; bottom: auto; padding: 22cqw var(--pad) 8cqw; gap: 14px; }   /* heading + text above the gallery */
  .cot__title { font-size: clamp(28px, 8cqw, 36px); }
  .cot__text  { font-size: 16px; }
  .cot__cta .btn { font-size: 14px; }
  .cot__media { position: relative; left: auto; top: auto; width: 100%; aspect-ratio: 32 / 21; }
}

/* Entrance: the sage corner rounds in from square, the photo slides in from the left, the copy from the right. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .cot__sage  { transition: border-top-right-radius 1.2s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .cot__media { transition: transform 1.1s cubic-bezier(.22, .61, .36, 1) .1s, opacity .9s ease .1s; }
  html.reveal-ready .cot__copy > * { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .cot__copy > :nth-child(2) { transition-delay: .2s; }
  html.reveal-ready .cot__copy > :nth-child(3) { transition-delay: .4s; }
  html.reveal-ready .cot[data-reveal]:not(.is-in) .cot__sage  { border-top-right-radius: 0; }
  html.reveal-ready .cot[data-reveal]:not(.is-in) .cot__media { transform: translateX(-12%); opacity: 0; }
  html.reveal-ready .cot[data-reveal]:not(.is-in) .cot__copy > * { opacity: 0; transform: translateX(32px); }
  html.reveal-ready .cot[data-reveal]:not(.is-in) .cot__copy > .cot__cta { transform: none; }
}

/* ── Image band with title: full-width photo, gradient from the top, centred eyebrow + heading
   (includes/layouts/image-title.php). Gradient colour/strength/reach via --band-grad-* on the section. ─── */
.band { position: relative; overflow: hidden; background: #2a2b22; color: var(--brown); container-type: inline-size; aspect-ratio: 1394 / 876; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (min-width: 861px) { #clubhouse .band__img { object-position: 0% 50%; } }   /* show the render's full left edge; the ~10% cover crop comes off the right */
.band__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--band-grad-rgb, 0 0 0) / var(--band-grad-a, .8)) 0%, rgb(var(--band-grad-rgb, 0 0 0) / 0) var(--band-grad-stop, 40%));
}
.band__copy {
  position: absolute; left: var(--pad); right: var(--pad); top: calc(7.5cqw - 25px); display: grid; justify-items: center; text-align: center; gap: 1.2cqw;
  /* Translucent cream plate behind the eyebrow + title: the clubhouse render has little sky, so the brown type needs a ground.
     width: fit-content keeps the plate hugging the copy; margin-inline: auto centres it. --band-plate-a tunes the opacity. */
  width: fit-content; margin-inline: auto; padding: clamp(14px, 1.6cqw, 26px) clamp(20px, 2.6cqw, 44px);
  background: rgb(243 239 235 / var(--band-plate-a, .82)); border-radius: 6px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.band__eyebrow { font: 500 clamp(15px, 1.35cqw, 21px)/1.3 var(--font); max-width: none; }
.band__title   { font-size: clamp(28px, 3.3cqw, 48px); line-height: 1.12; }
@media (max-width: 860px) {
  .band { aspect-ratio: 4 / 5; }
  .band__copy { top: 6cqw; gap: 8px; padding: 12px 16px; }
  .band__eyebrow { font-size: 15px; }
  .band__title { font-size: clamp(20px, 5.6cqw, 26px); }
}
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .band__eyebrow, html.reveal-ready .band__title { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .band__title { transition-delay: .2s; }
  html.reveal-ready .band__copy { transition: opacity .6s ease; }   /* the cream plate fades in with the copy rather than sitting there empty */
  html.reveal-ready .band[data-reveal]:not(.is-in) .band__copy { opacity: 0; }
  html.reveal-ready .band[data-reveal]:not(.is-in) .band__eyebrow,
  html.reveal-ready .band[data-reveal]:not(.is-in) .band__title { opacity: 0; transform: translateY(20px); }
}

/* ── Pin + crossfade (includes/layouts/pin-crossfade.php): Clubhouse copy then Resident Support copy scroll normally
   in the left column; both panels' arches share ONE sticky cell on the right. Resident Support's arches fade in over
   the Clubhouse ones once its copy comes up (.is-b from js/site.js). Small screens / JS off → panels stack. ── */
@media (min-width: 861px) {
  html.reveal-ready .pin {
    --pin-gutter: max(var(--pad), calc((100% - var(--wrap)) / 2));
    position: relative; display: grid; grid-template-columns: calc(50% - var(--pin-gutter)) 1fr;
    padding-left: var(--pin-gutter); background: var(--cream); color: var(--brown); overflow: clip;   /* clip, not hidden: hidden would break the sticky art */
  }
  /* Flatten the stage / panel / section / inner wrappers so each panel's copy and art become grid items of .pin */
  html.reveal-ready .pin__stage, html.reveal-ready .pin__panel, html.reveal-ready .pin .hood, html.reveal-ready .pin .hood__inner { display: contents; }
  html.reveal-ready .pin .hood__copy { grid-column: 1; min-height: 100svh; align-content: center; padding: var(--nav-h) clamp(24px, 4vw, 64px) 24px 0; gap: clamp(20px, 2.2vw, 36px); }
  html.reveal-ready .pin__panel--b .hood__copy { min-height: 70svh; align-content: start; padding-top: clamp(16px, 2.5vw, 40px); }   /* short list: sits close under the Clubhouse list, not centred in its own viewport */
  html.reveal-ready .pin .hood__list { gap: clamp(10px, 1vw, 16px); }
  html.reveal-ready .pin .hood__art { grid-column: 2; grid-row: 1 / 3; position: sticky; top: 0; height: 100svh; max-width: none; width: 100%; margin: 0; }
  /* Arches against the sticky box (the right half of the screen): photo arch's left edge on the page centre line,
     back arch runs to the screen edge — the same placement the stage had. */
  html.reveal-ready .pin .hood--art-right .hood__arch--back  { top: 12%; left: 24%; right: 0; width: auto; }
  html.reveal-ready .pin .hood--art-right .hood__arch--photo { top: 25%; left: 0; width: 64%; }
  /* Panel B's arches sit on top of A's (later in the DOM) and cross-fade in */
  html.reveal-ready .pin__panel--b .hood__arch { opacity: 0; transition: opacity .9s ease; }
  html.reveal-ready .pin.is-b .pin__panel--b .hood__arch { opacity: 1; }
}

/* ── Photo + panel (includes/layouts/photo-panel.php): photo left, teal right with a sage quarter-round carrying copy ── */
.pp { display: grid; grid-template-columns: 1fr 1fr; background: var(--pp-outer, var(--teal)); color: var(--brown); container-type: inline-size; height: 50.7cqw; overflow: hidden; }
.pp__media { position: relative; overflow: hidden; }
.pp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.pp__panel { position: relative; }
.pp__shape { position: absolute; inset: 0; background: var(--pp-panel, var(--sage)); border-top-right-radius: 100% 92%; }
.pp__copy  { position: absolute; left: 8%; right: 12%; bottom: 10cqw; display: grid; gap: 1.6cqw; }
.pp__title { font-size: clamp(22px, 2.2cqw, 34px); line-height: 1.2; }
.pp__title .br-mobile { display: none; }   /* "|" in the heading: a line break on phones only */
@media (max-width: 860px) { .pp__title .br-mobile { display: inline; } }
.pp__text  { font-size: clamp(13px, 1.05cqw, 15px); line-height: 1.6; max-width: 34cqw; }
@media (max-width: 860px) {
  .pp { grid-template-columns: 1fr; height: auto; }
  .pp__media { aspect-ratio: 4 / 3; }
  .pp__shape { border-top-right-radius: 70% 60%; }
  .pp__copy { position: relative; left: auto; right: auto; bottom: auto; padding: 22cqw var(--pad) 12cqw; gap: 16px; }
  .pp__title { font-size: clamp(24px, 7cqw, 32px); }
  .pp__text  { font-size: 16px; max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .pp__shape { transition: border-top-right-radius 1.2s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .pp__img   { transition: opacity .9s ease; }
  html.reveal-ready .pp__copy > * { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .pp__copy > :nth-child(2) { transition-delay: .2s; }
  html.reveal-ready .pp[data-reveal]:not(.is-in) .pp__shape { border-top-right-radius: 0; }
  html.reveal-ready .pp[data-reveal]:not(.is-in) .pp__img   { opacity: 0; }
  html.reveal-ready .pp[data-reveal]:not(.is-in) .pp__copy > * { opacity: 0; transform: translateY(18px); }
}

/* ── Parallax band with copy (Buying from Abroad): white centred copy in the sky that starts lower and drifts
   up to rest near the top as the band scrolls (--copy-y from js/site.js). ───────────────────────────── */
.plx { height: var(--plx-h, clamp(360px, 56vw, 90svh)); }
.plx__copy {
  position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--nav-h) + clamp(40px, 4vw, 60px));   /* 4vw only passes the 40px floor above 1000px, so phones are unchanged */
  transform: translateY(var(--copy-y, 0));
  display: grid; justify-items: center; text-align: center; gap: clamp(14px, 1.6vw, 24px); color: var(--white);
}
.plx__title { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.1; color: var(--white); text-shadow: 0 1px 12px rgba(0,0,0,.18); }
.plx__text  { font-size: clamp(13px, 1.1vw, 16px); line-height: 1.6; max-width: 58rem; text-shadow: 0 1px 10px rgba(0,0,0,.25); }
.plx__logos { list-style: none; margin: clamp(8px, 1.2vw, 20px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(24px, 4vw, 64px); }
.plx__logos img { display: block; height: clamp(34px, 3.6vw, 56px); width: auto; filter: drop-shadow(0 1px 8px rgba(0,0,0,.25)); }   /* cream SVGs; shadow matches the copy's */
@media (prefers-reduced-motion: reduce) { .plx__copy { transform: none !important; } }

/* ── Intro text: optional accent / copy colour / trailing logo ── */
.intro__title { color: var(--intro-accent, var(--brown)); }
.intro__text  { color: var(--intro-text, var(--brown)); }
.intro__after { margin-top: clamp(8px, 2vw, 24px); color: var(--teal); }
.intro__subtitle { font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 30px); font-weight: 500; line-height: 1.15; color: var(--intro-accent, var(--brown)); margin: 0 0 .8em; }
.intro__list { list-style: none; margin: 0 auto; padding: 0; max-width: 56rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: .7em 2.5em; text-align: left; color: var(--intro-text, var(--brown)); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; }
.intro__list li { position: relative; padding-left: 1.6em; max-width: none; }
.intro__list li::before { content: ""; position: absolute; left: 0; top: .25em; width: 1em; height: 1em; background: var(--teal); -webkit-mask: url("../images/favicon.svg") center / contain no-repeat; mask: url("../images/favicon.svg") center / contain no-repeat; }   /* frangipani mark, tinted teal */
.logo-novaterra { display: block; width: clamp(260px, 26vw, 400px); height: auto; }   /* images/logo-novaterra.png, "a novaterra project" wordmark, trimmed, tinted to --teal #728C8B */

/* ── Stats band (includes/layouts/stats-band.php) ── */
.stats { position: relative; overflow: hidden; background: #6f8aa3; color: var(--white); container-type: inline-size; height: 54.7cqw; }
.stats__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.stats__list { position: absolute; left: var(--pad); right: var(--pad); top: 8.5cqw; margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: clamp(32px, 9cqw, 150px); text-align: center; }
.stats__item { display: grid; gap: .6cqw; justify-items: center; }
.stats__value { font: 500 clamp(30px, 4.2cqw, 62px)/1 var(--font); }
.stats__label { font: 400 clamp(12px, 1.25cqw, 18px)/1.35 var(--font); }
@media (max-width: 860px) {
  .stats { height: auto; aspect-ratio: 4 / 5; }
  .stats__list { top: 10cqw; gap: 18px; flex-wrap: wrap; }
  .stats__value { font-size: clamp(28px, 9cqw, 40px); }
  .stats__label { font-size: 13px; }
}

/* ── Register block (includes/layouts/register-cta.php): laptop over a teal square on the left, sage panel on the
   right with copy + the register form. Panel content sets the height; the laptop centres vertically beside it. ── */
.reg { position: relative; display: grid; grid-template-columns: 46fr 54fr; min-height: 100vh; min-height: 100svh; background: var(--cream); color: var(--brown); container-type: inline-size; overflow: hidden; }
.reg__visual { position: relative; display: grid; align-items: center; padding: 5cqw 0; }
.reg__sage   { position: absolute; inset: 0; background: var(--sage); }                                                    /* the visual sits on the panel's sage */
.reg__curve  { position: absolute; left: -.5cqw; top: -.5cqw; width: 94cqw; aspect-ratio: 1; background: var(--cream); border-radius: 50%; }   /* the big cream circle, measured off the design: Ø94cqw touching the top-left, clipped by the section */
.reg__square { position: absolute; left: 21.7cqw; top: 44%; right: 0; bottom: 0; background: var(--teal); border-top-left-radius: 100% 100%; }   /* teal quarter-ellipse (the design's left edge drifts inward as it rises: the radius is the whole block), flush to the panel and the bottom */
.reg__laptop { position: relative; z-index: 1; width: calc(93% + 4px); max-width: none; height: auto; margin-left: 7%; }   /* image is trimmed to the laptop: left edge ~7% in, right edge 4px over the panel */
.reg__panel  { position: relative; background: var(--sage); border-bottom-right-radius: 34cqw 30cqw; padding: 5cqw 9cqw 6cqw 5cqw; display: grid; gap: clamp(20px, 2.2cqw, 34px); align-content: center; }
.reg__copy   { display: grid; gap: .9cqw; }
.reg__title  { font-size: clamp(30px, 3.2cqw, 48px); line-height: 1.05; }
.reg__sub    { font-family: var(--font-display); font-size: clamp(16px, 1.4cqw, 21px); line-height: 1.3; max-width: none; margin-top: -.3cqw; }
.reg__text   { font-size: clamp(13px, 1cqw, 15px); line-height: 1.6; max-width: 40cqw; margin-top: .8cqw; }
.reg__form .form--lines__grid { column-gap: clamp(16px, 2cqw, 32px); row-gap: 4px; }
.reg__form .form--lines__foot { justify-content: space-between; margin-top: clamp(14px, 1.6cqw, 24px); }
@media (max-width: 860px) {
  .reg { grid-template-columns: 1fr; min-height: 0; }
  .reg__visual { padding: 10cqw var(--pad) 0; }
  .reg__square { left: 30%; top: 46%; }
  .reg__laptop { width: 92%; margin: 0 auto; }
  .reg__panel  { border-bottom-right-radius: 50cqw 24cqw; padding: 10cqw var(--pad) 14cqw; }
  .reg__text   { max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .reg__panel { transition: border-bottom-right-radius 1.2s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .reg__square, html.reveal-ready .reg__curve, html.reveal-ready .reg__laptop { transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .reg__curve { transition: border-radius 1.2s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .reg[data-reveal]:not(.is-in) .reg__curve { border-radius: 0; }              /* the square rounds into the circle */
  html.reveal-ready .reg__laptop { transition-delay: .2s; }
  html.reveal-ready .reg__copy > *, html.reveal-ready .reg__form { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .reg__copy > :nth-child(2) { transition-delay: .15s; }
  html.reveal-ready .reg__copy > :nth-child(3) { transition-delay: .3s; }
  html.reveal-ready .reg__form { transition-delay: .45s; }
  html.reveal-ready .reg[data-reveal]:not(.is-in) .reg__panel  { border-bottom-right-radius: 0; }
  html.reveal-ready .reg[data-reveal]:not(.is-in) .reg__square { opacity: 0; transform: translateY(20px); }
  html.reveal-ready .reg[data-reveal]:not(.is-in) .reg__laptop { opacity: 0; transform: translateX(-30px); }
  html.reveal-ready .reg[data-reveal]:not(.is-in) .reg__copy > *, html.reveal-ready .reg[data-reveal]:not(.is-in) .reg__form { opacity: 0; transform: translateX(28px); }
}
/* ── Register form section + underline form (includes/register-form.php) ── */
.form--lines { max-width: none; gap: 0; }
.form--lines__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 56px); row-gap: 6px; }
.line { display: block; position: relative; }
.line input, .line select {
  width: 100%; border: 0; border-bottom: 1px solid rgba(134, 82, 39, .35); border-radius: 0; background: transparent;
  padding: .8em .6em .65em; font: 400 13px/1.4 var(--font); color: var(--brown);
}
.line input::placeholder { color: rgba(134, 82, 39, .55); }
.line select { appearance: none; -webkit-appearance: none; color: rgba(134, 82, 39, .55); padding-right: 2.4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23865227' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6em center / 16px; }
.line select:valid { color: var(--brown); }
.line input:focus, .line select:focus { outline: none; border-bottom-color: var(--teal); }
/* In-field errors (js/site.js): the placeholder carries the message */
.line .is-invalid, .line .is-invalid::placeholder { color: #b0261a; border-bottom-color: #b0261a; }
.form .form--lines__consent.is-invalid { color: #b0261a; }
.line--pw label, div.line--select label { display: block; }
div.line--select { display: flex; gap: 12px; }   /* Country: the "Other" box sits to the right of the dropdown */
div.line--select label { flex: 1; min-width: 0; }
div.line--select label:has(> input[hidden]) { display: none; }
/* box showing → dropdown shrinks to just fit "Other"/"Autre" (auto width would size to "South Africa") */
div.line--select:has(input:not([hidden])) > label:first-child { flex: none; width: 6.2em; }
div.line--select:has(input:not([hidden])) select { padding-right: 1.7em; background-position: right .3em center; background-size: 14px; }
.line--tel { display: flex; align-items: stretch; }
.line--tel label { flex: 1; min-width: 0; }
.line--tel select { width: auto; flex: none; padding-right: 1.9em; background-position: right .3em center; background-size: 14px; }
.line--pw input { padding-right: 2.8em; }
.pw__eye { position: absolute; right: .4em; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; color: #9A948C; display: grid; place-items: center; }
.pw__eye-i--off { display: none; }
.pw__eye[aria-pressed="true"] .pw__eye-i--on  { display: none; }
.pw__eye[aria-pressed="true"] .pw__eye-i--off { display: block; }
.form--lines__foot { display: flex; justify-content: flex-end; align-items: center; gap: clamp(16px, 2vw, 36px); margin-top: clamp(16px, 2vw, 28px); font-size: 13px; }
.form .form--lines__consent { display: flex; flex-direction: row; align-items: center; gap: 12px; font-size: 12px; color: var(--brown); }   /* .form prefix: outranks the kit's `.form label { display: grid }`, which otherwise stacks the checkbox under the text */
.form--lines__consents { display: grid; gap: 8px; }
.form--lines__disclaimer { margin: 0; max-width: none; font-size: 12px; font-style: italic; color: var(--brown); }
.form--lines__consent a { color: inherit; text-decoration: underline; }
.form--lines__consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); border: 1px solid #C9C4BD; }
.form--lines__submit { background: var(--amber); color: var(--brown); border: 0; border-radius: 999px; padding: .6em 2.6em; font: 600 13px/1.2 var(--font); cursor: pointer; }
.form--lines__submit:hover { background: #E5A63C; }
.form--lines__login { margin-top: clamp(12px, 1.4vw, 20px); font-size: 13px; color: var(--brown); text-align: left; max-width: none; }
.form--lines__login a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.form--lines__login-q { font-family: var(--font-display); font-size: clamp(16px, 1.4cqw, 21px); line-height: 1.3; color: var(--teal); }   /* matches .reg__sub; the "Sign in" link keeps the small bold style */
.reg .form__msg { margin-bottom: .6rem; min-height: 0; }
.reg .form__msg:empty { display: none; }
@media (max-width: 860px) {
  .form--lines__grid { grid-template-columns: 1fr; }
  .form--lines__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── Footer: frangipani photo, white wordmark, thin bottom bar ── */
.footer { position: relative; overflow: hidden; background: #2b3a22; color: var(--white); container-type: inline-size; height: max(56cqw, 680px);   /* floor: the stack below has px minimums (44px icons, 13px text) */ padding: 0; }
.footer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.footer__mark { position: absolute; left: 0; right: 0; top: 9cqw; display: flex; flex-direction: column; align-items: center; color: var(--white); }
.footer__mark .logo { --logo-h: auto; }
.footer__mark .logo__svg { height: auto; width: min(33cqw, 600px); filter: drop-shadow(0 2px 14px rgba(0,0,0,.25)); }
.footer__social { display: flex; gap: 1.6cqw; list-style: none; margin: 3cqw 0 0; padding: 0; }
.footer__bp span { color: inherit; font: 500 max(13px, .95cqw)/1.2 var(--font); text-decoration: underline; text-underline-offset: .25em; }
.footer__social a { display: grid; place-items: center; width: 44px; height: 44px; color: inherit; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transition: background .2s; }
.footer__social a:hover { background: rgba(255,255,255,.15); }
.footer__social svg { width: max(18px, 1.3cqw); height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
.footer__bp { display: flex; flex-direction: column; align-items: center; gap: 3.5cqw; margin-top: 8cqw; color: inherit; text-decoration: none; }
.footer__bp img { width: min(16cqw, 300px); height: auto; filter: drop-shadow(0 2px 14px rgba(0,0,0,.25)); }
.footer__bar {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 3cqw; padding-top: 1.2cqw; border-top: 1px solid rgba(255,255,255,.55);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; font: 400 11px/1.4 var(--font); color: var(--white);
}
.footer__copy { max-width: none; }
.footer__by   { max-width: none; text-align: center; }
.footer__by a, .footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.footer__legal { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0; text-transform: none; }
@media (max-width: 860px) {
  .footer { height: max(125cqw, 640px); }   /* 4:5, with the same px floor */
  .footer__mark { top: 14cqw; }
  .footer__mark .logo__svg { width: 70cqw; }
  .footer__social { gap: 5cqw; margin-top: 7cqw; }
  .footer__bp { gap: 6cqw; margin-top: 16cqw; }
  .footer__bp img { width: 36cqw; }
  .footer__bar { grid-template-columns: 1fr; text-align: center; gap: 6px; bottom: 6cqw; }
  .footer__legal { justify-content: center; }
}

/* ── FAQs page (faqs.php): cream page, brown Margem headings, sage rules, amber plus that turns into a minus ── */
.faq { background: var(--cream); color: var(--brown); }
.faq__head { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 104px) clamp(36px, 5vw, 72px); }
.faq__shape { position: absolute; top: -30vw; right: -12vw; width: 52vw; height: 52vw; max-width: 720px; max-height: 720px; background: var(--sage); border-radius: 50%; }   /* the mosaic tile peeking in top-right */
.faq__head-in { position: relative; display: grid; gap: 1rem; }
.faq__title { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; }
.faq__intro { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.65; max-width: 56ch; color: var(--muted); margin-top: .4rem; }
.faq__intro a { color: var(--brown); text-decoration: underline; text-underline-offset: .2em; }
.faq__body { padding-block: 0 clamp(48px, 6vw, 96px); }
.faq__list { max-width: 900px; }   /* inside .wrap so it lines up with the heading, not centred */
.faq__item { border-top: 1px solid #B9C7C2; }
.faq__item:last-child { border-bottom: 1px solid #B9C7C2; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(18px, 2vw, 26px) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.3; color: var(--brown); transition: color .25s var(--ease); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover, .faq__item[open] .faq__q { color: var(--orange); }
.faq__plus { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); transition: transform .35s var(--ease), background .25s var(--ease); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--brown); transform: translate(-50%, -50%); }
.faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.faq__item[open] .faq__plus { transform: rotate(180deg); background: var(--orange); }
.faq__item[open] .faq__plus::after { transform: translate(-50%, -50%) rotate(0deg); }   /* the plus becomes a minus */
.faq__a { padding: 0 clamp(40px, 5vw, 64px) clamp(18px, 2vw, 28px) 0; }
.faq__a p { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.7; max-width: 66ch; color: var(--brown); }
.faq__cta { background: var(--sage); color: var(--brown); padding-block: clamp(44px, 5vw, 80px); }
.faq__cta-in { display: grid; justify-items: center; text-align: center; gap: 1.4rem; }
.faq__cta-title { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.15; max-width: 22ch; }
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .faq__head-in > *, html.reveal-ready .faq__item, html.reveal-ready .faq__cta-in > * { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .faq__head-in > :nth-child(2) { transition-delay: .12s; }
  html.reveal-ready .faq__head-in > :nth-child(3) { transition-delay: .24s; }
  html.reveal-ready .faq__cta-in > :nth-child(2) { transition-delay: .15s; }
  html.reveal-ready .faq__head[data-reveal]:not(.is-in) .faq__head-in > *, html.reveal-ready .faq__item[data-reveal]:not(.is-in), html.reveal-ready .faq__cta[data-reveal]:not(.is-in) .faq__cta-in > * { opacity: 0; transform: translateY(22px); }
  html.reveal-ready .faq__shape { transition: border-radius 1.4s cubic-bezier(.22, .61, .36, 1), transform 1.4s cubic-bezier(.22, .61, .36, 1); }
  html.reveal-ready .faq__head[data-reveal]:not(.is-in) .faq__shape { border-radius: 0; transform: translate(6vw, -6vw); }   /* the tile rounds in, like the rest of the site */
}
@media (max-width: 860px) {
  .faq__shape { top: -36vw; right: -30vw; width: 80vw; height: 80vw; }
  .faq__a { padding-right: 0; }
}

/* Body copy is a flat 15px on desktop (phones keep their sizes from the max-width: 860px blocks) */
@media (min-width: 861px) {
  :root { --t-body: 15px; }
  .tile__text, .intro__text, .rich__text, .ac__text, .ac__apt-text, .cot__text,
  .pp__text, .plx__text, .reg__text, .faq__intro, .faq__a p { font-size: 15px; }
}