@font-face {
  font-family: 'VARA Helvetica Neue';
  src: url('assets/fonts/helvetica-neue-light.woff') format('woff');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'VARA Helvetica Neue';
  src: url('assets/fonts/helvetica-neue-light-italic.woff') format('woff');
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'VARA Helvetica Neue';
  src: url('assets/fonts/helvetica-neue-medium.woff') format('woff');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'VARA Helvetica Neue';
  src: url('assets/fonts/helvetica-neue-medium-italic.woff') format('woff');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'VARA Panchang';
  src: url('assets/fonts/panchang-light.woff') format('woff');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'VARA Panchang';
  src: url('assets/fonts/panchang-regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'VARA Panchang';
  src: url('assets/fonts/panchang-medium.otf') format('opentype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --linen: #F4EFE6;
  --paras: #938E75;
  --ink: #1C1A17;
  --clay: #8C5A3C;
  --eucalyptus: #3C4A40;
  --brass: #D0B26E;
  --font-body: 'VARA Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'VARA Panchang', 'VARA Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Keeps a phrase on one line — used to protect headline line breaks */
.u-nowrap { white-space: nowrap; }

/* Selective body-copy emphasis: one phrase per approved paragraph.
   Weight only — never larger, never brass. Full-opacity linen on the
   dark sections, full-opacity ink on the linen Clinic section. */
.body-emphasis {
  font-weight: 500;
  color: var(--linen);
}

.clinic .body-emphasis {
  color: var(--ink);
}

html, body {
  background: var(--ink);
  color: var(--linen);
  font-family: var(--font-body);
  font-weight: 300;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ============================================================
   CINEMATIC LOADER — monumental gate opening over the hero
   Two fixed half-panels, each carrying the same full-viewport visual
   (sharp render beneath a canvas mosaic). Hidden unless the head
   script arms it (first visit per session, or ?loader=1).
   ============================================================ */
.loader { display: none; }

html.loader-armed .loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  /* Transparent: once the panels part, the hero shows between them */
  background: transparent;
}

/* The skip decision (repeat visit) or the boot failsafe always win */
html.loader-skip .loader,
html.loader-armed.loader-skip .loader { display: none; }

.loader-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  background: var(--ink);
  will-change: transform;
}
.loader-panel-left { left: 0; }
.loader-panel-right { right: 0; }

/* Full-viewport visual inside a half panel: the left panel anchors it
   to the left edge, the right panel to the right edge — each half shows
   its own side of the same image, never stretched, never duplicated */
.loader-visual {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
}
.loader-panel-left .loader-visual { left: 0; }
.loader-panel-right .loader-visual { right: 0; }

.loader-sharp,
.loader-mosaic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loader-mosaic { z-index: 1; }

/* At 100% the mosaic steps aside for the perfectly sharp source */
.loader.is-sharp .loader-mosaic { opacity: 0; }

/* Restrained dim so the white mark stays clear without hiding the render;
   rides inside each panel so it parts with the gates */
.loader-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(rgba(28, 26, 23, 0.36), rgba(28, 26, 23, 0.36));
  pointer-events: none;
}

/* Fine brass seam at the center, appearing immediately before the split;
   it becomes the leading edge of each gate as they open */
.loader-panel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 3;
  background: rgba(208, 178, 110, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.loader-panel-left::after { right: 0; }
.loader-panel-right::after { left: 0; }
.loader.is-opening .loader-panel::after { opacity: 1; }

/* Centered UI: mark, thin brass bar, real percentage */
.loader-ui {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    calc(24px + env(safe-area-inset-top))
    calc(24px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
  will-change: opacity;
}

.loader-logo {
  width: clamp(140px, 15vw, 216px);
  height: auto;
  display: block;
}

.loader-bar {
  width: min(280px, 52vw);
  height: 1px;
  margin-top: clamp(30px, 5vh, 44px);
  background: rgba(244, 239, 230, 0.22);
  overflow: hidden;
}

.loader-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
}

.loader-count {
  margin-top: 14px;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(244, 239, 230, 0.78);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media {
  position: absolute;
  inset: 0;
  background: var(--ink) url('assets/hero-1-poster.jpg') center / cover no-repeat;
}

#gl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.35s ease;
}

#gl-canvas.is-ready { opacity: 1; }

.hero.hero-fallback #gl-canvas { display: none; }
.hero.hero-fallback .m-video { display: block; }

.m-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  display: none;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(28, 26, 23, 0) 40%,
    rgba(28, 26, 23, 0.38) 75%,
    rgba(28, 26, 23, 0.72) 100%);
}

.hero-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 60vw);
  max-width: 480px;
  opacity: 0;
  z-index: 3;
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
}

.scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  background: rgba(208, 178, 110, 0.6);
  transform-origin: top center;
  animation: scrollHint 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollHint {
  0%   { transform: scaleY(0); transform-origin: top center; }
  45%  { transform: scaleY(1); transform-origin: top center; }
  55%  { transform: scaleY(1); transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}

.tex-source {
  position: fixed;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  left: -10px;
  top: -10px;
}

/* Soft fade from hero into section 2 (last 10vh of hero) */
.hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15vh;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(28, 26, 23, 0) 0%, var(--ink) 100%);
}

/* ---------- SECTION 2 — THE PORTAL ---------- */
/* Pinned cinematic transition: the statement type scales through the
   camera, crossfades into an image-filled mask, and the physical world
   surfaces full-bleed — the exact frame Section 3 opens with. */
.statement {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--ink);
  overflow: hidden;
}

.portal-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Future crop control for the statement media — one variable
     steers both the backdrop image and the image-filled glyphs */
  --statement-media-position: 50% 50%;
}

/* Statement backdrop — visible from the first frame, dissolved
   to ink at the end so Section 3 introduces property-01 itself */
.portal-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.portal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--statement-media-position);
  display: block;
  will-change: transform;
}

/* Kept subtle in light mode: a faint warm settle at the foot and crown
   so the pool returns to near-full colour once the linen veil lifts */
.portal-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(28, 26, 23, 0.08), rgba(28, 26, 23, 0.08)),
    linear-gradient(to top, rgba(28, 26, 23, 0.3) 0%, rgba(28, 26, 23, 0) 28%),
    linear-gradient(to bottom, rgba(28, 26, 23, 0.18) 0%, rgba(28, 26, 23, 0) 24%);
}

/* Restrained vignette — edges settle toward ink, centre stays open */
.portal-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 62% at 50% 46%, rgba(28, 26, 23, 0) 58%, rgba(28, 26, 23, 0.3) 100%);
}

/* Light-mode opening: a bright translucent linen veil over the pool —
   the image reads as a photographic trace printed into the ground.
   The scroll timeline lifts it as the portal progresses so the pool
   returns to full colour before Section 3 */
.portal-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(244, 239, 230, 0.94) 0%, rgba(244, 239, 230, 0.88) 55%, rgba(244, 239, 230, 0.92) 100%);
  will-change: opacity;
}

/* Kicker centered above the headline */
.portal-kicker {
  position: absolute;
  left: 50%;
  top: calc(50% - 11vw);
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--clay);
  opacity: 0;
  white-space: nowrap;
}

/* Statement type — the mask the world emerges through */
.portal-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.portal-line {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 4.2vw;
  letter-spacing: 0.01em;
  line-height: 1.18;
  max-width: 92vw;
}

/* Exactly two title lines — each is its own block and never wraps */
.portal-title-line {
  display: block;
  white-space: nowrap;
}

/* Legacy R16 sizing hook. R17 promotes both lines to the Panchang
   Medium brand lockup in the final hierarchy block below. */
.portal-title-line:last-child {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 0.88em;
  letter-spacing: 0.025em;
}

.portal-line-solid {
  color: var(--ink);
}

/* Image-filled duplicate — the raw, ungraded statement backdrop shines
   through the glyphs while the graded image sits darker behind them */
.portal-line-img {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: url('assets/statement-pool.jpg');
  background-size: cover;
  background-position: var(--statement-media-position);
  opacity: 0;
}

/* Desktop: lock the image to the viewport so the world stays perfectly
   still while the letterforms fly past */
@media (min-width: 768px) {
  .portal-line-img {
    background-attachment: fixed;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px) {
  #gl-canvas { display: none; }
  .m-video { display: block; }
  #m-video-2 { opacity: 0; }
  .hero-logo { width: 260px; }
  .portal-line { font-size: 6.2vw; max-width: 94vw; line-height: 1.22; }
  .portal-kicker { top: calc(50% - 20vw); font-size: 11px; }
}

/* ---------- SECTION 3 — THE PROPERTY ---------- */
.property {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}

.property-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.property-img-wrap {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.property-img-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* Deliberate per-image crops — the resort exterior with the first copy,
   the interior as the second copy appears, the full overview as the
   final hold */
#prop-wrap-1 img { object-position: 50% 56%; }
#prop-wrap-2 img { object-position: 50% 50%; }
#prop-wrap-3 img { object-position: 50% 58%; }

.property-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(28,26,23,0.55) 0%, rgba(28,26,23,0) 40%),
    linear-gradient(270deg, rgba(28,26,23,0.55) 0%, rgba(28,26,23,0) 40%),
    linear-gradient(0deg, rgba(28,26,23,0.45) 0%, rgba(28,26,23,0) 30%),
    radial-gradient(ellipse at center, rgba(28,26,23,0) 40%, rgba(28,26,23,0.35) 100%);
}

.property-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: #808080;
  filter: url(#noise);
  opacity: 0.08;
  mix-blend-mode: soft-light;
}

.property-copy {
  position: absolute;
  z-index: 4;
  background: rgba(28, 26, 23, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(208, 178, 110, 0.16);
  border-radius: 2px;
  padding: 44px 40px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
}

.property-copy::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 56px;
  height: 2px;
  background: var(--brass);
}

.property-copy-1 {
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 480px;
}

.property-copy-2 {
  right: 8%;
  bottom: 12%;
  max-width: 520px;
  text-align: right;
}

.property-label {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}

.property-headline {
  font-weight: 300;
  font-size: 3.4vw;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--linen);
  margin-bottom: 28px;
}

/* Legacy R16 display hook. R17 applies Panchang Regular to both
   Property headlines and recalibrates their card measures below. */
.property-copy-1 .property-headline {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.65vw, 38px);
  letter-spacing: -0.025em;
}

.property-body {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.78);
}

.property-line {
  font-weight: 300;
  font-size: 1.5vw;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--linen);
  opacity: 0;
  transform: translateX(60px);
}

/* Card 2 type must match card 1 exactly — .property-line's generic
   rules would otherwise override color, tracking and line-height */
.property-copy-2 .property-label.property-line {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.5;
  color: var(--brass);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateX(60px);
}
.property-copy-2 .property-headline.property-line {
  font-size: 3.4vw;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--linen);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateX(60px);
}
.property-copy-2 .property-body.property-line {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.78);
  opacity: 0;
  transform: translateX(60px);
}

@media (max-width: 767px) {
  .property { padding: 48px 0 64px; }
  .property-stage {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  /* Pair the media with its card: exterior, card 1, interior, card 2,
     then the project overview as the final image */
  #prop-wrap-1 { order: 1; }
  #prop-copy-1 { order: 2; }
  #prop-wrap-2 { order: 3; }
  #prop-copy-2 { order: 4; }
  #prop-wrap-3 { order: 5; }

  .property-img-wrap {
    position: relative;
    height: 56vh;
    height: 56svh;
    opacity: 1 !important;
    transform: none !important;
    overflow: hidden;
  }
  .property-img-wrap img {
    transform: scale(1.15);
    will-change: transform;
  }
  .property-vignette, .property-grain { display: none; }

  /* Cards overlap the bottom of their image, desktop-matched styling */
  .property-copy {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    max-width: none;
    width: auto;
    margin: -64px 20px 40px;
    padding: 28px 24px;
    text-align: left;
    z-index: 5;
  }
  #prop-copy-2 { opacity: 1 !important; clip-path: none !important; transform: none !important; }

  /* Consistent type scale with desktop proportions */
  .property-label { font-size: 11px; letter-spacing: 0.15em; margin-bottom: 18px; }
  .property-headline { font-size: 7.5vw; line-height: 1.15; margin-bottom: 18px; }
  .property-body { font-size: 14px; line-height: 1.65; }
  .property-line { font-size: 4.5vw; }
  .property-copy-2 .property-headline.property-line { font-size: 7.5vw; line-height: 1.15; }
  .property-copy-2 .property-label.property-line { font-size: 11px; }
  .property-copy-2 .property-body.property-line { font-size: 14px; line-height: 1.65; }
}

/* ---------- SECTION 4 — THE LOCATION ---------- */
.location {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}

.location-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.location-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.location-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased low: the coastline and horizon live in the lower half of
     the frame — never crop to an empty field of clouds */
  object-position: 50% 68%;
  display: block;
  will-change: transform;
}

/* Directional scrim — strong enough that the copy stays readable
   over the footage at every point of the transition */
.location-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(78deg, rgba(28, 26, 23, 0.8) 0%, rgba(28, 26, 23, 0.44) 36%, rgba(28, 26, 23, 0.08) 60%, rgba(28, 26, 23, 0) 72%),
    linear-gradient(to top, rgba(28, 26, 23, 0.55) 0%, rgba(28, 26, 23, 0) 30%),
    linear-gradient(to bottom, rgba(28, 26, 23, 0.35) 0%, rgba(28, 26, 23, 0) 22%);
}

/* The map mask owns the circular reveal — clipping only, isolated
   and paint-contained so the expanding circle never flashes as a
   square during slow scrolls */
.location-map-mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: clip-path;
  clip-path: circle(0% at 60% 48%);
}

/* Live map inside the mask. Double-class specificity: MapLibre's own
   stylesheet (injected after this one) sets .maplibregl-map
   { position: relative } on the same element and would otherwise win. */
.location .location-map {
  position: absolute;
  inset: 0;
  background: #E9E3D6;
}

/* Bottom tonal protection for the facts, above the map */
.location-map-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(28, 26, 23, 0.94) 0%, rgba(28, 26, 23, 0.48) 55%, rgba(28, 26, 23, 0) 100%);
}

/* Opening copy — beneath the map layer so the expanding
   circle physically covers it */
.location-copy {
  position: absolute;
  z-index: 2;
  left: 8vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(680px, calc(100vw - 16vw));
  max-width: none;
}

.location-label {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 26px;
}

/* Two deliberate block lines on the shared left gutter — the label,
   both headline lines and the body all start at exactly 8vw.
   "Jimbaran Bay." can never split internally and "Bay." can never
   sit alone */
.location-headline {
  font-weight: 300;
  font-size: clamp(32px, 4vw, 62px);
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--linen);
  margin-bottom: 24px;
  width: 100%;
  text-align: left;
}

.location-headline > span {
  display: block;
}

.location-headline-nowrap {
  white-space: nowrap;
}

.location-body {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.78);
  max-width: 420px;
}

/* Brass locator pulse over the coastline */
.location-locator {
  position: absolute;
  left: 60%;
  top: 48%;
  z-index: 5;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.location-locator-dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 14px 3px rgba(208, 178, 110, 0.65);
}

.location-locator-ring {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(208, 178, 110, 0.9);
  animation: locationPulse 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.location-locator-ring-2 {
  animation-delay: 1.2s;
}

@keyframes locationPulse {
  0%   { left: -5px;  top: -5px;  width: 10px; height: 10px; opacity: 0.9; }
  100% { left: -44px; top: -44px; width: 88px; height: 88px; opacity: 0; }
}

/* Broad brass halo inside the map — communicates the general
   area, not a precise parcel */
.location-halo {
  width: 0;
  height: 0;
}

.location-halo-core {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 6px rgba(208, 178, 110, 0.25), 0 0 22px 8px rgba(208, 178, 110, 0.35);
}

.location-halo-ring {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(176, 142, 62, 0.9);
  animation: locationHaloPulse 2.8s ease-out infinite;
}

.location-halo-ring-2 {
  animation-delay: 1.4s;
}

@keyframes locationHaloPulse {
  0%   { left: -6px;  top: -6px;  width: 12px;  height: 12px;  opacity: 0.85; }
  100% { left: -70px; top: -70px; width: 140px; height: 140px; opacity: 0; }
}

.location-halo-label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(244, 239, 230, 0.88);
  padding: 7px 11px;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(28, 26, 23, 0.18);
}

/* Brass rule + location facts, directly over the map */
.location-facts {
  position: absolute;
  left: 8vw;
  right: 8vw;
  bottom: 7vh;
  z-index: 6;
}

.location-rule {
  display: block;
  height: 1px;
  width: 0%;
  background: rgba(208, 178, 110, 0.85);
  margin-bottom: 26px;
}

.location-facts-grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.location-fact {
  margin: 0;
}

.location-fact-value {
  display: block;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--linen);
  margin-bottom: 9px;
}

.location-fact-label {
  display: block;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.62);
}

/* MapLibre chrome: required attribution stays visible but discreet */
.location-map .maplibregl-ctrl-attrib {
  background: rgba(244, 239, 230, 0.72);
  border-radius: 2px 0 0 0;
}

.location-map .maplibregl-ctrl-attrib a {
  color: #6E675A;
}

.location-map .maplibregl-cooperative-gesture-screen {
  background: rgba(28, 26, 23, 0.55);
  font-family: var(--font-body);
}

/* Graceful fallback: if the map stack fails, keep the video + copy */
.location-no-map .location-map {
  display: none;
}

@media (max-width: 767px) {
  /* Mobile crop from the same single asset — coastline kept low
     in frame, composition anchored to the beach side */
  .location-video-wrap video {
    object-position: 35% 62%;
  }

  .location-vignette {
    background:
      linear-gradient(to bottom, rgba(28, 26, 23, 0.72) 0%, rgba(28, 26, 23, 0.3) 34%, rgba(28, 26, 23, 0) 58%),
      linear-gradient(to top, rgba(28, 26, 23, 0.55) 0%, rgba(28, 26, 23, 0) 30%);
  }

  /* Mobile: the copy becomes a single rising card over the held video.
     It animates as one unit (the desktop per-line clip wipes are
     disabled on mobile in the timeline) and exits before the map. */
  .location-copy {
    left: calc(22px + env(safe-area-inset-left));
    right: calc(22px + env(safe-area-inset-right));
    top: auto;
    bottom: calc(26px + env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    max-width: none;
    padding: 24px 22px;
    background: rgba(28, 26, 23, 0.82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(208, 178, 110, 0.3);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.26);
    will-change: transform, opacity;
  }

  .location-label {
    font-size: 11px;
    margin-bottom: 18px;
  }

  /* Same type scale inside the card — the two deliberate lines stay
     left-aligned and "Jimbaran Bay." still never splits */
  .location-headline {
    font-size: clamp(24px, 8.4vw, 40px);
    width: 100%;
    margin-bottom: 16px;
  }

  .location-body {
    font-size: 14px;
    max-width: none;
  }

  /* Map emerges from the lower-middle of the viewport */
  .location-locator {
    left: 50%;
    top: 62%;
  }

  .location-map-mask {
    clip-path: circle(0% at 50% 62%);
  }

  .location-map-fade {
    height: 52%;
  }

  /* Facts stack vertically near the bottom */
  .location-facts {
    left: 7vw;
    right: 7vw;
    bottom: calc(5svh + 8px);
  }

  .location-rule {
    margin-bottom: 20px;
  }

  .location-facts-grid {
    flex-direction: column;
    gap: 16px;
  }

  .location-fact-value {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .location-fact-label {
    font-size: 9px;
  }
}

/* Reduced motion: quiet the continuously pulsing locator rings only —
   the pinned timeline itself runs in every browser */
@media (prefers-reduced-motion: reduce) {
  .location-locator-ring,
  .location-halo-ring {
    animation: none;
    opacity: 0.35;
  }
}

/* ---------- SECTION 5 — HUMAN GARAGE CERTIFIED ----------
   One pinned 100svh composition (~220vh of scroll). Every state is
   absolutely positioned inside the stage — nothing stacks, nothing
   reflows. The whole design is centred in a min(1180px, 90vw)
   container; the portrait anchors the right of the viewport. */
.hgc {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}

.hgc-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #11110F;
}

/* Centred composition container */
.hgc-inner {
  position: relative;
  width: min(1180px, calc(100vw - 10vw));
  margin-inline: auto;
  height: 100%;
}

/* --- Garry Lineham portrait: right side of the viewport, blended
   into the ink ground through a directional gradient --- */
.hgc-portrait {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 76vh;
  width: 44vw;
  margin: 0;
  z-index: 1;
  clip-path: inset(0% 0% 100% 0%);
  overflow: hidden;
}

.hgc-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
  will-change: transform, filter;
}

/* Left edge dissolves into the ink; crown and foot fade softly */
.hgc-portrait-blend {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(28, 26, 23, 0.6) 15%, rgba(28, 26, 23, 0) 40%),
    linear-gradient(to bottom, rgba(28, 26, 23, 0.5) 0%, rgba(28, 26, 23, 0) 14%),
    linear-gradient(to top, rgba(28, 26, 23, 0.5) 0%, rgba(28, 26, 23, 0) 14%);
}

/* Act 3: the portrait sinks to a low-contrast layer — never removed */
.hgc-portrait-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--ink);
  opacity: 0;
}

/* --- The official mark: 170–220px on desktop, upper-left in acts 2–3 --- */
.hgc-markwrap {
  position: absolute;
  left: 68%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(170px, 15vw, 220px);
  z-index: 4;
  will-change: transform;
}

.hgc-mark {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}

/* --- Copy: one left-area column; blocks replace one another --- */
.hgc-copy {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  width: min(500px, 42%);
  z-index: 4;
}

.hgc-label {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 30px;
}

.hgc-block {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  opacity: 0;
}

.hgc-headline {
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1.16;
  color: var(--linen);
  margin-bottom: 24px;
}

.hgc-subhead {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paras);
  margin-bottom: 22px;
}

.hgc-para {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.78);
  max-width: 46ch;
}

/* --- Atmosphere: a clean matte near-black ground. One very soft warm
   light sits behind the mark; a second field adds an extremely subtle
   eucalyptus-black tonal variation; fine monochromatic grain and a
   soft vignette finish the frame. No lines, no pattern, no glow --- */
.hgc-atmo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hgc-atmo-light {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* Warm light, centred behind the Human Garage mark */
.hgc-atmo-light-a {
  width: 88vmax;
  height: 88vmax;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(208, 178, 110, 0.13) 0%, rgba(208, 178, 110, 0.045) 42%, rgba(208, 178, 110, 0) 70%);
}

/* Eucalyptus-black tonal variation, low and off-centre */
.hgc-atmo-light-b {
  width: 96vmax;
  height: 96vmax;
  left: 18%;
  bottom: -34%;
  background: radial-gradient(closest-side, rgba(60, 74, 64, 0.24) 0%, rgba(60, 74, 64, 0) 68%);
}

.hgc-atmo-grain {
  position: absolute;
  inset: 0;
  filter: url(#noise);
  opacity: 0.025;
}

/* Soft vignette — the edges settle, the centre stays open */
.hgc-atmo-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 76% 66% at 50% 46%, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0.44) 100%);
}

/* --- Scope rail: one horizontal track near the bottom of the stage.
   Each item pairs an empty brass-edged icon placeholder with its term
   label; the track drifts slowly during the final act (scroll-driven,
   not a JS loop) and is clipped by the stage --- */
.hgc-rail {
  position: absolute;
  left: 50%;
  width: 100vw;
  translate: -50% 0;
  bottom: 6.5%;
  z-index: 3;
  /* Horizontally the stage itself clips the drifting track; keeping
     the rail's own box open gives the desktop dock-magnification
     room to grow upward without clipping */
  overflow: visible;
  pointer-events: none;
}

.hgc-rail-track {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  /* The track always runs wider than the viewport, so the
     scroll-scrubbed drift always has room to travel */
  width: max-content;
  min-width: 124vw;
  gap: clamp(44px, 5.5vw, 88px);
  will-change: transform;
}

.hgc-term {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.85);
  white-space: nowrap;
  opacity: 0;
}

/* Scope icons — directly recolored transparent PNGs avoid browser mask
   failures. Equal square boxes keep the rail aligned regardless of the
   original drawings' proportions. */
.hgc-term-icon {
  display: block;
  width: clamp(30px, 2.6vw, 44px);
  height: auto;
  aspect-ratio: 1;
  flex: 0 0 auto;
  object-fit: contain;
  /* Dock magnification grows the icon upward from its baseline */
  transform-origin: center bottom;
}

/* Short landscape viewports: keep every state inside the stage */
@media (min-width: 768px) and (max-height: 560px) {
  .hgc-markwrap { width: 118px; }
  .hgc-copy { top: 46%; width: min(500px, 46%); }
  .hgc-headline { font-size: 22px; margin-bottom: 14px; }
  .hgc-label { margin-bottom: 8px; }
  .hgc-block { top: 26px; }
  .hgc-subhead { margin-bottom: 8px; }
  .hgc-para { font-size: 12px; line-height: 1.4; }
  .hgc-rail { bottom: 4%; }
  .hgc-rail-track { gap: 40px; }
  .hgc-term { gap: 8px; font-size: 9.5px; }
  .hgc-term-icon { width: 34px; height: 34px; }
  .hgc-portrait { height: 84vh; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px) {
  /* Portrait fills the upper/central viewport; gradients protect
     the logo above and the copy below */
  .hgc-portrait {
    left: 0;
    right: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: 54svh;
  }

  .hgc-portrait-blend {
    background:
      linear-gradient(to bottom, rgba(28, 26, 23, 0.5) 0%, rgba(28, 26, 23, 0) 20%),
      linear-gradient(to top, var(--ink) 2%, rgba(28, 26, 23, 0.72) 38%, rgba(28, 26, 23, 0) 72%);
  }

  .hgc-markwrap {
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
    width: clamp(118px, 30vw, 150px);
  }

  .hgc-copy {
    left: 0;
    right: 0;
    top: 40%;
    /* ~120px reserved below the paragraph for the complete icon
       rail, its labels and the mobile safe-area inset — the rail
       lives inside this zone and can never overlap the copy */
    bottom: calc(120px + env(safe-area-inset-bottom));
    width: auto;
    transform: none;
  }

  .hgc-label { font-size: 11px; margin-bottom: 20px; }
  .hgc-block { top: 38px; }
  .hgc-headline { font-size: clamp(21px, 6.4vw, 28px); margin-bottom: 16px; }
  .hgc-subhead { font-size: 11px; margin-bottom: 14px; }
  .hgc-para { font-size: 14px; max-width: none; }

  /* Scope rail: anchored to the stage bottom inside the zone reserved
     beneath the closing copy. On mobile the rail is a draggable strip —
     native touch panning plus pointer-capture mouse/stylus dragging
     (JS), with gentle snap-to-center on each term. data-lenis-prevent
     (in the markup) keeps Lenis from treating the horizontal drag as
     page scroll. */
  .hgc-rail {
    bottom: calc(14px + env(safe-area-inset-bottom));
    opacity: 0;
    pointer-events: auto;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    cursor: grab;
  }

  .hgc-rail::-webkit-scrollbar { display: none; }

  /* While pointer-dragging, snapping must not fight the pointer */
  .hgc-rail.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .hgc-rail-track {
    width: max-content;
    min-width: 150vw;
    gap: clamp(28px, 8vw, 44px);
    /* Side room so the first and last term can actually reach the
       snap center */
    padding-inline: 38vw;
  }

  .hgc-term {
    gap: 10px;
    font-size: 10px;
    scroll-snap-align: center;
  }

  .hgc-term-icon { width: 30px; height: 30px; }
}

/* Short mobile landscape: compact copy and rail so the certification
   paragraph always clears the rail */
@media (max-width: 767px) and (max-height: 560px) {
  .hgc-label { margin-bottom: 8px; }
  .hgc-block { top: 22px; }
  .hgc-subhead { margin-bottom: 8px; }
  .hgc-para { font-size: 12px; line-height: 1.45; }
  .hgc-rail { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .hgc-term { gap: 7px; font-size: 9px; }
  .hgc-term-icon { width: 28px; height: 28px; }
}

/* ============================================================
   SECTION 6 — THE CLINIC
   One pinned 100svh composition on a warm linen field. Copy left,
   edge-to-edge photography right; the five programs replace one
   another through a brass scan-line clip reveal.
   ============================================================ */

.clinic {
  position: relative;
  background: var(--linen);
}

/* A one-pixel brass line leads the linen reveal over the final
   dark Human Garage frame */
.clinic::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--brass);
  opacity: 0.85;
  z-index: 2;
}

.clinic-stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--linen);
}

@supports (height: 100dvh) {
  .clinic-stage { height: 100dvh; }
}

/* ---------- Media: right side, edge to edge ---------- */
.clinic-media {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: 42%;
  overflow: hidden;
  background: var(--linen);
  z-index: 1;
}

/* Ghosted wordmark behind the opening composition. The existing white
   logo PNG is used purely as an alpha mask over a clay fill, so the
   mark is a tint of the linen ground itself. It sits above the media
   layer but below the label, DNA and opening copy, and the timeline
   fades it out before Diagnostics enters (reverse scroll restores it).
   The stage clips it, so the oversized mobile size can never cause
   horizontal overflow. */
.clinic-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  /* The source PNG carries padding; the visible mark is ~93% of the
     box width, so 84vw renders the wordmark at ≈78vw of the viewport */
  width: 84vw;
  aspect-ratio: 5000 / 4000;
  background-color: var(--clay);
  -webkit-mask-image: url("assets/VaraLogowhite.png");
  mask-image: url("assets/VaraLogowhite.png");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.05;
  z-index: 2;
  pointer-events: none;
}

.clinic-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  clip-path: inset(0% 100% 0% 0%);
  will-change: clip-path;
}

.clinic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.045);
  will-change: transform;
}

.clinic-img-diagnostics  { object-position: 43% 50%; }
.clinic-img-biohacking   { object-position: 50% 52%; }
.clinic-img-movement     { object-position: 52% 48%; }
.clinic-img-hydrotherapy { object-position: 43% 50%; }
.clinic-img-nutrition    { object-position: 42% 52%; }

/* The one-pixel brass scan line that leads each reveal */
.clinic-scan {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: var(--brass);
  opacity: 0;
  z-index: 10;
  will-change: transform;
}

/* ---------- Copy: centred container, left column ---------- */
.clinic-inner {
  position: relative;
  z-index: 5;
  width: min(1280px, calc(100vw - 10vw));
  margin-inline: auto;
  height: 100%;
}

.clinic-label {
  position: absolute;
  top: 9%;
  left: 0;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
  opacity: 0;
}

.clinic-copy {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: min(430px, 33%);
}

.clinic-block {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  translate: 0 -50%;
  opacity: 0;
  will-change: transform, opacity;
}

/* ---------- Opening state: one full-width linen stage ----------
   The intro begins centred across the whole viewport — never trapped
   in the program column — then travels into the left copy position
   as Diagnostics reveals the media (scroll-driven, both directions) */
.clinic-opening {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* DNA sculpture — centred above the label by the scroll timeline
   (left/top/xPercent/y are all GSAP-driven). No container, border or
   background; one very faint warm shadow separates it from the linen. */
.clinic-dna {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 180px;
  height: 220px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.clinic-dna svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 3px rgba(140, 90, 60, 0.16));
}

@media (max-width: 1023px) and (min-width: 768px) {
  .clinic-dna { width: 145px; height: 175px; }
}

#clinic-block-intro {
  position: relative;
  max-width: min(1200px, 92vw);
  text-align: center;
  opacity: 0;
  will-change: transform, opacity;
}

/* Two deliberate block-level lines — the break cannot reflow, so no
   orphaned word is possible; wide measure, tight editorial leading */
.clinic-opening .clinic-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 56px);
  max-width: min(1200px, 92vw);
  margin-inline: auto;
  margin-bottom: clamp(30px, 3.6vh, 44px);
  line-height: 0.95;
}

.clinic-opening .clinic-title > span {
  display: block;
  white-space: nowrap;
}

.clinic-opening .clinic-para {
  margin-inline: auto;
  max-width: min(760px, 100%);
  line-height: 1.55;
}

.clinic-eyebrow {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 18px;
}

.clinic-title {
  font-weight: 300;
  font-size: clamp(38px, 4.5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 22px;
}

.clinic-para {
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  max-width: 43ch;
  color: rgba(28, 26, 23, 0.74);
}

/* ---------- Editorial progress device ---------- */
.clinic-progress {
  position: absolute;
  left: 0;
  bottom: 7%;
  display: flex;
  align-items: center;
  gap: 26px;
  opacity: 0;
}

.clinic-count {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--paras);
  font-variant-numeric: tabular-nums;
}

.clinic-segments { display: flex; gap: 10px; }

.clinic-seg {
  display: block;
  width: 44px; height: 1px;
  background: rgba(28, 26, 23, 0.16);
  transition: background-color 0.3s ease;
}

.clinic-seg.is-done   { background: rgba(28, 26, 23, 0.42); }
.clinic-seg.is-active { background: var(--brass); }

/* ---------- Mobile: photograph upper, copy lower ---------- */
@media (max-width: 767px) {
  .clinic-media {
    left: 0; right: 0; top: 0;
    bottom: auto;
    height: 35svh;
  }

  /* Subtle dark backing at the image's lower edge so the counter and
     segmented rail — which sit on that edge — stay readable over any
     programme photograph. Gated by --media-shade: the timeline raises
     it only as the first programme frame appears, so the opening
     composition never shows a bare gradient band on empty linen */
  .clinic-media::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 96px;
    background: linear-gradient(to top, rgba(28, 26, 23, 0.55) 0%, rgba(28, 26, 23, 0) 100%);
    opacity: var(--media-shade, 0);
    pointer-events: none;
  }

  /* Mobile: the ghosted mark runs slightly wider than the viewport at
     a lower tint — the stage clips it, so no horizontal overflow */
  .clinic-watermark {
    width: 122vw;
    opacity: 0.035;
  }

  .clinic-inner {
    width: auto;
    padding-inline: calc(24px + env(safe-area-inset-left)) calc(24px + env(safe-area-inset-right));
  }

  .clinic-label {
    top: calc(35svh + 20px);
    left: calc(24px + env(safe-area-inset-left));
    font-size: 11px;
  }

  /* Linen copy panel: the block starts 28px below the image edge so
     the headline always sits fully inside the panel. The progress
     device now lives on the image itself, so the copy region only
     reserves the required 24px + safe-area beneath every paragraph */
  .clinic-copy {
    left: calc(24px + env(safe-area-inset-left));
    right: calc(24px + env(safe-area-inset-right));
    top: calc(35svh + 28px);
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: auto;
  }

  .clinic-block { top: 0; translate: none; }

  /* Mobile opening: one balanced flex column — DNA, label, headline,
     paragraph — centred as a group inside the safe viewport. The DNA
     is an ordinary flex child here: no absolute position, no negative
     transform, nothing can leave the viewport. */
  .clinic-opening {
    flex-direction: column;
    justify-content: center;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  #clinic-block-intro {
    max-width: none;
    width: 100%;
    padding-inline: calc(24px + env(safe-area-inset-left)) calc(24px + env(safe-area-inset-right));
  }

  .clinic-eyebrow { font-size: 10px; margin-bottom: 12px; }

  .clinic-title {
    font-size: clamp(30px, 8.6vw, 40px);
    margin-bottom: 14px;
  }

  /* The longer two-line opening headline gets its own size so line one
     never overflows the safe padding at 360–430px widths */
  .clinic-opening .clinic-title {
    font-size: clamp(17px, 4.6vw, 28px);
    margin-bottom: 18px;
  }

  /* In-flow DNA: the bottom margin reserves room for the label, which
     the timeline parks between the sculpture and the headline */
  .clinic-dna {
    position: relative;
    left: auto;
    top: auto;
    width: 105px;
    height: 130px;
    margin-bottom: 68px;
    flex: 0 0 auto;
  }

  .clinic-para { font-size: 14px; max-width: 46ch; }


  /* The counter and segmented rail move onto the image's bottom edge,
     seated on the gradient above — fully outside the paragraph space
     at every timeline state */
  .clinic-progress {
    left: calc(24px + env(safe-area-inset-left));
    right: calc(24px + env(safe-area-inset-right));
    top: calc(35svh - 34px);
    bottom: auto;
    gap: 18px;
  }

  .clinic-count { color: rgba(244, 239, 230, 0.88); }

  .clinic-seg { flex: 1; width: auto; max-width: 44px; background: rgba(244, 239, 230, 0.3); }
  .clinic-seg.is-done { background: rgba(244, 239, 230, 0.62); }
  .clinic-seg.is-active { background: var(--brass); }
  .clinic-segments { flex: 1; }

  .clinic-img { transform: scale(1.025); }

  .clinic-img-diagnostics  { object-position: 42% 50%; }
  .clinic-img-biohacking   { object-position: 50% 54%; }
  .clinic-img-movement     { object-position: 51% 43%; }
  .clinic-img-hydrotherapy { object-position: 39% 50%; }
  .clinic-img-nutrition    { object-position: 39% 52%; }
}

/* ---------- Short landscape: compact left-copy / right-image split ---------- */
@media (max-width: 767px) and (max-height: 560px) {
  .clinic-media {
    left: 48%; top: 0; bottom: 0;
    height: 100%;
  }

  /* Landscape keeps the split layout: no bottom-edge image gradient,
     progress back on the linen floor in ink tones */
  .clinic-media::after { content: none; }

  .clinic-label { top: 7%; }

  .clinic-copy {
    top: 0; bottom: 0;
    width: 42%;
    right: auto;
  }

  .clinic-block { top: 50%; translate: 0 -50%; }

  .clinic-eyebrow { font-size: 8.5px; margin-bottom: 6px; }
  .clinic-title { font-size: clamp(17px, 5vh, 22px); margin-bottom: 8px; }
  .clinic-para { font-size: 11.5px; line-height: 1.45; max-width: 40ch; }

  /* Short landscape: shrink the sculpture first, never the type */
  .clinic-dna { width: 84px; height: 104px; margin-bottom: 40px; }

  .clinic-progress { top: auto; bottom: 6%; gap: 14px; }
  .clinic-count { color: var(--paras); }
  .clinic-seg { max-width: 32px; background: rgba(28, 26, 23, 0.16); }
  .clinic-seg.is-done { background: rgba(28, 26, 23, 0.42); }
  .clinic-seg.is-active { background: var(--brass); }
}

/* ---------- Desktop-width short landscape: the same compaction, so the
   longer program bodies keep their holds without clipping ---------- */
@media (min-width: 768px) and (max-height: 560px) {
  .clinic-media { left: 48%; }

  .clinic-label { top: 7%; }

  .clinic-copy { width: 42%; }

  .clinic-eyebrow { font-size: 8.5px; margin-bottom: 6px; }
  .clinic-title { font-size: clamp(17px, 5vh, 22px); margin-bottom: 8px; }
  .clinic-para { font-size: 11.5px; line-height: 1.45; max-width: 40ch; }

  /* Short landscape: shrink the sculpture first, never the type */
  .clinic-dna { width: 84px; height: 104px; }

  .clinic-progress { bottom: 6%; gap: 14px; }
  .clinic-seg { max-width: 32px; }
}

/* ============================================================
   SECTION 7 — THE ARCHITECTURE
   One pinned 100svh stage on linen. The exterior render opens in a
   controlled frame, expands to the full viewport, then settles as
   the interior reveals through a rectangular portal aperture.
   The two images are semantic placeholders: object-fit cover plus
   per-image object-position variables keep any future replacement
   working without code changes.
   ============================================================ */

.architecture {
  position: relative;
  background: var(--linen);
}

.architecture-stage {
  --architecture-exterior-position: 50% 50%;
  --architecture-interior-position: 50% 50%;
  /* Portal aperture: top right bottom left — adjustable */
  --architecture-portal-inset: 18% 22% 44% 46%;
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--linen);
}

@supports (height: 100dvh) {
  .architecture-stage { height: 100dvh; }
}

/* ---------- Exterior ---------- */
.architecture-exterior {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(12.5% 7% 100% 7%);
  will-change: clip-path;
}

.architecture-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.architecture-img-exterior {
  object-position: var(--architecture-exterior-position);
  transform: scale(1.055);
}

.architecture-img-interior {
  object-position: var(--architecture-interior-position);
  transform: scale(1.04);
}

/* Layered ink treatment protecting the exterior copy — deep at the far
   left, easing through the copy column, essentially clear by the right
   third so the building, landscaping and water stay bright. A second
   bottom lift guards the lower copy line. The box runs 30% wider than
   the stage so the scroll-driven micro-drift can never expose an edge */
.architecture-exterior-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -15%;
  width: 130%;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  background:
    linear-gradient(90deg, rgba(28, 26, 23, 0.88) 0%, rgba(28, 26, 23, 0.7) 27%, rgba(28, 26, 23, 0.4) 46%, rgba(28, 26, 23, 0.08) 68%, rgba(28, 26, 23, 0) 82%),
    linear-gradient(0deg, rgba(28, 26, 23, 0.52) 0%, rgba(28, 26, 23, 0.1) 38%, rgba(28, 26, 23, 0) 62%);
}

/* Mobile-only second ink wash: joins at the second exterior beat so the
   body paragraph and statistics sit on a deeper ground than the headline.
   Desktop never renders it. */
.architecture-exterior-shade-body { display: none; }

/* Fine brass edge tracing the frame, drawn in sync with its clip */
.architecture-edge {
  position: absolute;
  inset: 12.5% 7% 100% 7%;
  z-index: 4;
  pointer-events: none;
  border: 1px solid rgba(208, 178, 110, 0.85);
  will-change: inset;
}

/* ---------- Documentary inset: the real site, mid exterior act ---------- */
.architecture-inset {
  position: absolute;
  /* 7% matches the frame's own inset + a 20px breathing gap, so the
     video and its caption always sit fully inside the framed render —
     the caption can never drift onto the bare stage and lose contrast */
  right: calc(7% + 20px);
  top: 50%;
  width: clamp(220px, 19vw, 310px);
  margin: 0;
  z-index: 6;
  opacity: 0;
  will-change: transform, opacity;
}

.architecture-inset video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--ink);
  /* The restrained brass edge — no card, no chrome */
  border: 1px solid rgba(208, 178, 110, 0.85);
}

/* The caption is one editorial unit with the film: an ink block seated
   directly beneath the frame, so the text never floats over the render */
.architecture-inset-caption {
  padding: 14px 16px;
  background: rgba(28, 26, 23, 0.82);
}

.architecture-inset-kicker {
  display: block;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 8px;
}

.architecture-inset-note {
  display: block;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244, 239, 230, 0.9);
}

/* ---------- Interior (revealed through the portal) ----------
   Three stacked room figures; the active one always sits at full
   opacity before its successor fades in, so no frame can flash */
.architecture-interior {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 2;
  overflow: hidden;
  clip-path: inset(var(--architecture-portal-inset));
  opacity: 0;
  will-change: clip-path;
}

.architecture-room {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  will-change: opacity;
}

.architecture-room.is-active {
  opacity: 1;
}

.architecture-room picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Per-room crops: the bed and its ocean opening, the copper tub and
   vanity wall, the kitchen island — each stays recognizable */
#architecture-room-1 img { object-position: 50% 58%; }
#architecture-room-2 img { object-position: 50% 46%; }
#architecture-room-3 img { object-position: 50% 52%; }

/* Strong but restrained backing for the interior copy */
.architecture-interior-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, rgba(28, 26, 23, 0.82) 0%, rgba(28, 26, 23, 0.46) 38%, rgba(28, 26, 23, 0) 66%);
}

/* Thin brass edge that briefly defines the aperture while it opens */
.architecture-aperture {
  position: absolute;
  inset: var(--architecture-portal-inset);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(208, 178, 110, 0.9);
  will-change: inset;
}

/* Warm tonal overlay — passes once, during the tunable-white sentence */
.architecture-tonal {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(85% 85% at 38% 58%, rgba(208, 178, 110, 0.24) 0%, rgba(140, 90, 60, 0.12) 52%, rgba(140, 90, 60, 0) 80%);
}

/* ---------- Copy ---------- */
.architecture-inner {
  position: relative;
  z-index: 7;
  height: 100%;
  width: min(1280px, calc(100vw - 10vw));
  margin-inline: auto;
}

.architecture-label {
  position: absolute;
  top: 9%;
  left: 0;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
  opacity: 0;
}

.architecture-copy-exterior {
  position: absolute;
  left: clamp(24px, 3vw, 48px);
  bottom: calc(12.5svh + 5svh);
  max-width: min(460px, 40vw);
  opacity: 0;
  will-change: transform, opacity;
  /* One very soft shadow inherited by the whole block — no card, no
     border, no visible rectangle behind the copy */
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.architecture-headline {
  font-weight: 300;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--linen);
  margin-bottom: 20px;
}

.architecture-para {
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  max-width: 42ch;
  color: rgba(244, 239, 230, 0.94);
}

/* Figures along one shared brass rule */
.architecture-figures {
  position: relative;
  display: flex;
  gap: clamp(30px, 4vw, 60px);
  margin-top: 28px;
  padding-top: 18px;
}

.architecture-figures-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
}

.architecture-figure {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.architecture-figure strong {
  font-weight: 300;
  font-size: clamp(19px, 1.6vw, 24px);
  letter-spacing: 0.02em;
  color: var(--linen);
}

.architecture-figure em {
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.82);
}

/* ---------- Interior copy ---------- */
.architecture-copy-interior {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  max-width: min(470px, 38vw);
  opacity: 0;
  will-change: transform, opacity;
}

.architecture-eyebrow {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
}

.architecture-headline-interior {
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--linen);
  margin-bottom: 18px;
}

/* Three sequential copy beats stacked in one grid cell — the
   container always sizes to the tallest beat, so nothing reflows */
.architecture-beats { display: grid; }

.architecture-beat {
  grid-area: 1 / 1;
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  max-width: 46ch;
  color: rgba(244, 239, 230, 0.9);
  opacity: 0;
  will-change: transform, opacity;
}

/* ---------- Mobile: same story, exterior fills most of the viewport ---------- */
@media (max-width: 767px) {
  .architecture-stage {
    --architecture-exterior-position: 50% 42%;
    --architecture-portal-inset: 24% 30% 40% 30%;
  }

  .architecture-inner { width: 100%; }

  /* Mobile: the label joins the copy flow (reparented by the timeline
     setup) so beat 1 holds label + headline together low on the render */
  .architecture-label {
    position: static;
    font-size: 11px;
    margin-bottom: 14px;
  }

  /* Mobile exterior becomes three consecutive scroll beats over the
     same render (timeline-driven): 1) label + headline low on the
     image, 2) headline lifts while body + statistics arrive, 3) the
     tall construction inset. The copy block keeps a 24px gutter plus
     safe-area, so the paragraph never reaches the viewport sides. */
  .architecture-copy-exterior {
    left: calc(24px + env(safe-area-inset-left));
    right: calc(24px + env(safe-area-inset-right));
    bottom: calc(13svh + env(safe-area-inset-bottom));
    max-width: none;
  }

  /* Beat 2 deepens the ground behind body + statistics */
  .architecture-exterior-shade-body {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to top, rgba(28, 26, 23, 0.72) 0%, rgba(28, 26, 23, 0.4) 34%, rgba(28, 26, 23, 0) 62%);
  }

  .architecture-headline {
    font-size: clamp(28px, 8vw, 36px);
    margin-bottom: 14px;
  }

  .architecture-para { font-size: 14px; }

  .architecture-figures {
    gap: 26px;
    margin-top: 20px;
    padding-top: 14px;
  }

  .architecture-figure strong { font-size: 18px; }
  .architecture-figure em { font-size: 9px; }

  /* Inside the Villas: the whole composition is bottom-anchored where
     the gradient is strongest — every beat stays inside the wash and
     never crosses the bright centre of the room imagery */
  .architecture-copy-interior {
    left: calc(24px + env(safe-area-inset-left));
    right: calc(24px + env(safe-area-inset-right));
    top: auto;
    bottom: calc(42px + env(safe-area-inset-bottom));
    translate: none;
    max-width: none;
  }

  .architecture-headline-interior { font-size: clamp(22px, 6.4vw, 30px); margin-bottom: 12px; }
  .architecture-beat { font-size: 14px; line-height: 1.55; }

  .architecture-interior-shade {
    background: linear-gradient(to top, rgba(28, 26, 23, 0.92) 0%, rgba(28, 26, 23, 0.62) 36%, rgba(28, 26, 23, 0.22) 60%, rgba(28, 26, 23, 0) 78%);
  }

  /* The exterior shade becomes bottom-left weighted, aligned with the
     low copy block — strong below the statistics, easing to clear at
     the top right so the render stays visible */
  .architecture-exterior-shade {
    left: 0;
    width: 100%;
    background:
      linear-gradient(to top, rgba(28, 26, 23, 0.9) 0%, rgba(28, 26, 23, 0.62) 30%, rgba(28, 26, 23, 0.22) 56%, rgba(28, 26, 23, 0) 78%),
      linear-gradient(90deg, rgba(28, 26, 23, 0.42) 0%, rgba(28, 26, 23, 0.1) 52%, rgba(28, 26, 23, 0) 78%);
  }

  /* Beat 3: the construction film becomes a tall portrait composition —
     near full-width (viewport minus ~48px) and 58–64svh high, with the
     caption seated directly beneath; video + caption fit the viewport
     as one unit. The 30% horizontal crop keeps the excavator in frame. */
  .architecture-inset {
    left: 50%;
    right: auto;
    top: 50%;
    width: calc(100vw - 48px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  .architecture-inset video {
    aspect-ratio: auto;
    height: 60svh;
    object-position: 30% 50%;
  }

  .architecture-inset-kicker { font-size: 10px; }
  .architecture-inset-note { font-size: 12px; }

  /* Mobile room crops: bed, tub and island stay recognizable */
  #architecture-room-1 img { object-position: 56% 60%; }
  #architecture-room-2 img { object-position: 42% 46%; }
  #architecture-room-3 img { object-position: 50% 46%; }
}

/* ---------- Short landscape: compact type and tighter frame clearances ---------- */
@media (max-height: 560px) {
  .architecture-label { top: 6%; }

  .architecture-copy-exterior {
    bottom: 11%;
    max-width: 44vw;
  }

  .architecture-headline {
    font-size: clamp(20px, 4.6vh, 30px);
    margin-bottom: 10px;
  }

  .architecture-para { font-size: 12px; line-height: 1.5; }

  .architecture-figures {
    gap: 24px;
    margin-top: 14px;
    padding-top: 10px;
  }

  .architecture-figure strong { font-size: 15px; }
  .architecture-figure em { font-size: 8.5px; }

  .architecture-copy-interior { max-width: 44vw; }
  .architecture-eyebrow { margin-bottom: 10px; }
  .architecture-headline-interior { font-size: clamp(18px, 4vh, 26px); margin-bottom: 8px; }
  .architecture-beat { font-size: 12px; line-height: 1.5; }
}

/* ============================================================
   FOOTER — the final landing point
   Quiet, spacious ink field after the warm interior sequence.
   Real email CTA (no fake newsletter), legal entity, address as
   a map link, and the white VARA mark at a controlled size.
   ============================================================ */
.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--linen);
  overflow: hidden;
}

.site-footer-inner {
  width: min(1280px, calc(100vw - 10vw));
  margin-inline: auto;
  padding: clamp(76px, 13vh, 132px) 0 42px;
}

.site-footer-logo {
  display: block;
  width: clamp(96px, 9vw, 132px);
  height: auto;
  margin-bottom: clamp(52px, 9vh, 92px);
}

.site-footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(60px, 10vh, 104px);
}

.site-footer-title {
  font-weight: 300;
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--linen);
  margin-bottom: 22px;
}

.site-footer-body {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: rgba(244, 239, 230, 0.62);
  max-width: 38ch;
  margin-bottom: 38px;
}

.site-footer-cta {
  display: inline-block;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: none;
  padding: 17px 38px;
  border: 1px solid rgba(208, 178, 110, 0.5);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.site-footer-cta:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}

.site-footer-legal {
  font-style: normal;
  text-align: right;
  flex: 0 0 auto;
}

.site-footer-entity {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--linen);
  margin-bottom: 20px;
}

.site-footer-line {
  margin-bottom: 14px;
}

.site-footer-line a {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(244, 239, 230, 0.62);
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer-line a:hover {
  color: var(--brass);
}

.site-footer-rule {
  display: block;
  height: 1px;
  background: rgba(208, 178, 110, 0.28);
  margin-bottom: 28px;
}

.site-footer-copy {
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 230, 0.42);
}

@media (max-width: 767px) {
  .site-footer-inner {
    width: auto;
    padding: 64px calc(22px + env(safe-area-inset-right)) 34px calc(22px + env(safe-area-inset-left));
  }

  .site-footer-logo {
    width: 88px;
    margin-bottom: 48px;
  }

  .site-footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 52px;
    padding-bottom: 56px;
  }

  .site-footer-title { font-size: clamp(30px, 8.4vw, 40px); }
  .site-footer-body { font-size: 14px; margin-bottom: 30px; }
  .site-footer-legal { text-align: left; }
  .site-footer-copy { font-size: 10px; }
}

/* ============================================================
   R17 BRAND TYPE HIERARCHY
   The brand guide assigns tracked uppercase Panchang to names,
   headlines and section titles. Helvetica Neue remains the reading
   face for labels, captions, controls and body copy.
   ============================================================ */
.portal-line,
.property-headline,
.location-headline,
.hgc-label,
.hgc-headline,
.clinic-opening .clinic-title,
.architecture-headline,
.architecture-headline-interior,
.site-footer-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-synthesis: none;
}

/* The two major opening statements use the supplied Medium face.
   Their second lines carry the warm Hillside Clay signature color. */
.portal-line {
  font-weight: 500;
  font-size: clamp(38px, 4.2vw, 68px);
  letter-spacing: 0.025em;
  line-height: 1.08;
}

.portal-title-line:last-child {
  font-family: inherit;
  font-weight: inherit;
  font-size: 0.96em;
  letter-spacing: 0.045em;
}

.portal-line-solid .portal-title-line:last-child,
.portal-line-img .portal-title-line:last-child {
  color: var(--clay);
  -webkit-text-fill-color: var(--clay);
}

.clinic-opening .clinic-title {
  font-weight: 500;
  font-size: clamp(28px, 3.55vw, 54px);
  letter-spacing: 0.018em;
  line-height: 1.02;
}

.clinic-opening .clinic-title > span:last-child {
  color: var(--clay);
}

/* Supporting brand headlines use Regular so the page retains a clear
   step down from the two monumental opening statements. */
.property-headline,
.location-headline,
.hgc-headline,
.architecture-headline,
.architecture-headline-interior,
.site-footer-title {
  font-weight: 400;
  letter-spacing: 0.02em;
}

.property-copy-1 .property-headline {
  font-size: clamp(22px, 2.3vw, 34px);
  letter-spacing: 0.02em;
}

.property-copy-2 .property-headline.property-line {
  font-size: clamp(20px, 2.1vw, 32px);
  line-height: 1.22;
  letter-spacing: 0.015em;
}

.property-copy-2 .property-headline > span {
  display: block;
  white-space: nowrap;
}

.location-headline {
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.14;
}

.location-headline > span:last-child {
  color: var(--brass);
}

.hgc-label {
  font-weight: 400;
  letter-spacing: 0.28em;
}

.hgc-headline {
  font-size: clamp(19px, 2vw, 29px);
  line-height: 1.22;
  color: var(--brass);
}

.architecture-headline {
  font-size: clamp(20px, 2.05vw, 32px);
  line-height: 1.16;
}

.architecture-copy-exterior {
  max-width: min(620px, 48vw);
}

.architecture-copy-interior {
  max-width: min(520px, 46vw);
}

.architecture-headline > span,
.architecture-headline-interior > span {
  display: block;
  white-space: nowrap;
}

.architecture-headline-interior {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.16;
}

.architecture-program-accent {
  display: inline;
  color: var(--brass);
}

.site-footer-title {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
}

@media (max-width: 767px) {
  .portal-line {
    font-size: clamp(16px, 4.8vw, 20px);
    max-width: 96vw;
    line-height: 1.2;
  }

  .property-copy-1 .property-headline,
  .property-copy-2 .property-headline.property-line {
    font-size: clamp(19px, 5.4vw, 23px);
    line-height: 1.25;
  }

  .location-headline {
    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.22;
  }

  .hgc-headline {
    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.26;
  }

  .clinic-opening .clinic-title {
    font-size: clamp(16px, 4.6vw, 20px);
    letter-spacing: 0.01em;
    line-height: 1.16;
  }

  .clinic-opening .clinic-title > span {
    transform: scaleX(0.76);
    transform-origin: center;
  }

  .architecture-headline {
    font-size: clamp(16.5px, 4.6vw, 19px);
    line-height: 1.24;
  }

  .architecture-copy-exterior {
    max-width: none;
  }

  .architecture-copy-interior {
    max-width: none;
  }

  .architecture-headline-interior {
    font-size: clamp(16.5px, 4.7vw, 20px);
    line-height: 1.22;
  }

  .site-footer-title {
    font-size: clamp(23px, 6.2vw, 27px);
  }
}

@media (min-width: 768px) and (max-height: 560px) {
  .hgc-headline {
    font-size: 19px;
  }

  .clinic-opening .clinic-title {
    font-size: clamp(20px, 4.5vh, 26px);
  }

  .architecture-headline {
    font-size: clamp(18px, 4vh, 24px);
  }

  .architecture-headline-interior {
    font-size: clamp(17px, 3.8vh, 22px);
  }
}

/* ============================================================
   R19 BODY-COPY READABILITY
   Increase desktop reading text by 2px and mobile reading text by
   1px without enlarging labels, counters, statistics or display type.
   ============================================================ */
.property-body,
.property-copy-2 .property-body.property-line,
.location-body,
.hgc-para,
.site-footer-body {
  font-size: 17px;
}

.clinic-para {
  font-size: clamp(16px, 1.18vw, 18px);
}

.architecture-para,
.architecture-beat {
  font-size: clamp(17px, 1.28vw, 19px);
}

.architecture-inset-note {
  font-size: 15px;
}

.site-footer-line a {
  font-size: 16px;
}

@media (max-width: 767px) {
  .property-body,
  .property-copy-2 .property-body.property-line,
  .location-body,
  .hgc-para,
  .clinic-para,
  .architecture-para,
  .architecture-beat,
  .site-footer-body,
  .site-footer-line a {
    font-size: 15px;
  }

  .architecture-inset-note {
    font-size: 13px;
  }
}

@media (min-width: 768px) and (max-height: 560px) {
  .hgc-para,
  .architecture-para,
  .architecture-beat {
    font-size: 14px;
  }

  .clinic-para {
    font-size: 13.5px;
  }
}

@media (max-width: 767px) and (max-height: 560px) {
  .hgc-para,
  .architecture-para,
  .architecture-beat {
    font-size: 13px;
  }

  .clinic-para {
    font-size: 12.5px;
  }
}