/* ============================================================
   PARKSIDE — Likova-inspired editorial park edition
   ============================================================ */

/* self-hosted fonts (latin subset only — page has no non-latin copy) */
@font-face {
  font-family: 'Italiana';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/italiana-400.woff2) format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/lato-300.woff2) format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/lato-300i.woff2) format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/lato-400.woff2) format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/lato-700.woff2) format('woff2');
}

/* ---- Parkside brand palette (Brand Guidelines 2026) ----
   Forest Sage #314B43 · Warm Stone #E7E1D7 · Mist Eucalyptus #C9D6CF
   Dried Olive #7A8B78 · Oat Milk #F5F1EA · Smoked Walnut #4A4038
   Champagne Bronze #B69A6A                                          */
:root {
  --paper: #f5f1ea;
  /* Oat Milk      — background tone   */
  --paper-2: #e7e1d7;
  /* Warm Stone    — main neutral      */
  --mist: #c9d6cf;
  /* Mist Eucalyptus — secondary       */
  --ink: #332e27;
  /* text, a shade under Smoked Walnut */
  --ink-soft: #685f55;
  /* 5.56 on Oat Milk / 4.81 on Warm Stone (was
                              #6d6459 = 4.46 on stone, just under AA)      */
  --walnut: #4a4038;
  /* Smoked Walnut — depth / contrast  */
  --leaf: #7a8b78;
  /* Dried Olive   — natural accent    */
  --leaf-bright: #c9d6cf;
  --gold: #b69a6a;
  /* Champagne Bronze — luxury accent  */
  /* Champagne Bronze and Dried Olive are ACCENT tones: they read correctly on
     the dark forest bands (gold is 6.05 there) and as rules/borders/focus
     rings, but as TEXT on the light bands they collapse to 2.07–3.22 — far
     under AA. These are the same hues darkened until they clear 4.8 on Warm
     Stone (the tighter of the two light grounds). Use them for any accent
     text sitting on --paper / --paper-2; keep the originals everywhere else. */
  --gold-ink: #735d38;
  /* 5.56 paper / 4.82 stone */
  --leaf-ink: #576456;
  /* 5.55 paper / 4.80 stone */
  --forest: #032617;
  /* PRIMARY — deep forest green       */
  --forest-2: #0a3324;
  /* lifted forest for gradients       */
  --forest-3: #02170e;
  /* darkest — footer                  */
  --line: rgba(3, 38, 23, 0.16);
  /* Opaline (brand headline face) is a licensed font with no web files on
     hand — Italiana is the closest free stand-in for its high-contrast,
     elegant display cut. Swap in Opaline woff2 here when licensed. */
  --font-brand: "Italiana", "Marcellus", serif;
  --font-display: "Lato", "Helvetica Neue", sans-serif;
  --pad: clamp(20px, 5vw, 84px);
  --sec-y: clamp(72px, 11vh, 140px);
  /* one vertical rhythm for every band */
  --track: 0.22em;
}

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

html {
  scroll-behavior: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

/* <picture> only exists to let the browser pick avif vs jpg — it must not
   participate in layout, or `height:100%` on the img would resolve against
   an inline wrapper instead of the figure it used to be a direct child of. */
picture {
  display: contents;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--leaf);
  color: var(--paper);
}

/* ============================================================
   BOOT VEIL — a flat forest field that holds the page until the
   vegetation has decoded, so scene 1 never shows holes.
   ============================================================ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(120% 100% at 50% 45%, #24382f 0%, #16241d 62%, #0d1712 100%);
  display: grid;
  place-items: center;
  will-change: opacity;
}

.boot__mark {
  width: 46px;
  height: 1px;
  background: rgba(233, 226, 213, 0.25);
  position: relative;
  overflow: hidden;
}

.boot__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-2);
  transform: scaleX(0);
  transform-origin: left;
  animation: boot-sweep 1.15s cubic-bezier(.5, 0, .2, 1) infinite;
}

@keyframes boot-sweep {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }

  48% {
    transform: scaleX(1);
    transform-origin: left;
  }

  52% {
    transform: scaleX(1);
    transform-origin: right;
  }

  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

body.is-booting {
  overflow: hidden;
}

/* ============================================================
   BUTTERFLY — lives in the hero; wings + flight are driven from JS
   ============================================================ */
.butterfly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: clamp(96px, 9.6vw, 156px);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.bfly-cursor,
.bfly-float {
  will-change: transform;
}

.bfly {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 22px rgba(8, 16, 11, 0.5));
}

/* JS writes the wing transforms every frame (flap speed answers the mouse) */
.bwing {
  transform-box: fill-box;
  will-change: transform;
}

.bwing--l {
  transform-origin: 100% 46%;
}

.bwing--r {
  transform-origin: 0% 46%;
}

/* gentle idle life — slow drift + a little rotation */
.bfly-float {
  animation: bfly-float 6.5s ease-in-out infinite;
}

@keyframes bfly-float {

  0%,
  100% {
    transform: translate(0, 0) rotate(-2.5deg);
  }

  50% {
    transform: translate(4px, -10px) rotate(2.5deg);
  }
}

/* ============================================================
   LEAVES CANVAS (site-wide)
   ============================================================ */
#leaves {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

/* ============================================================
   HEADER
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 2.6vw, 28px) var(--pad);
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease, color 0.4s ease;
}

.nav.is-scrolled {
  background: rgba(246, 244, 238, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: 12px;
  padding-bottom: 12px;
}

.nav.is-dark:not(.is-scrolled) {
  color: var(--paper);
}

.nav__burger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 34px;
  padding: 4px 0;
}

.nav__burger span {
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s ease, opacity 0.35s ease, width 0.35s ease;
}

.nav__burger span:nth-child(2) {
  width: 70%;
}

.nav__burger:hover span:nth-child(2) {
  width: 100%;
}

body.menu-open .nav__burger span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

body.menu-open .nav__burger span:nth-child(2) {
  opacity: 0;
}

body.menu-open .nav__burger span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

body.menu-open .nav,
body.menu-open .nav.is-dark:not(.is-scrolled) {
  color: var(--ink);
}

.nav__logo {
  margin-left: clamp(16px, 2.4vw, 32px);
  margin-right: auto;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nav__logosvg {
  height: clamp(24px, 2.6vw, 32px);
  width: auto;
  display: block;
  color: currentColor;
}

.nav.is-scrolled .nav__logo,
body.menu-open .nav__logo {
  opacity: 1;
  pointer-events: auto;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 30px);
}

.nav__phone {
  font-size: 12px;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

.nav__phone:hover {
  opacity: 1;
}

.nav__cta {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid currentColor;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* --leaf at 3.22 was too light to carry --paper text; the ink variant makes
   the filled hover state legible instead of merely tinted */
.nav__cta:hover {
  background: var(--leaf-ink);
  border-color: var(--leaf-ink);
  color: var(--paper);
}

/* ============================================================
   FULLSCREEN MENU
   ============================================================ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  visibility: hidden;
  pointer-events: none;
}

.menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.menu__panel {
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(90px, 14vh, 150px) var(--pad) clamp(30px, 6vh, 70px);
}

.menu__links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 1.6vh, 16px);
}

.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-weight: 200;
  font-size: clamp(26px, 4.6vh, 44px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(30px);
  transition: color 0.3s ease, letter-spacing 0.4s ease;
}

.menu__links a i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--leaf-ink);
}

/* letter-spacing on hover reflows the whole row on every pointer-in; the
   colour shift alone carries the state, and --leaf-ink stays legible */
.menu__links a:hover {
  color: var(--leaf-ink);
}

.menu__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(24px);
}

.menu__img {
  overflow: hidden;
  width: min(320px, 100%);
  aspect-ratio: 4/3;
  clip-path: polygon(0 12%, 10% 12%, 10% 0, 100% 0, 100% 100%, 0 100%);
}

.menu__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.menu__aside:hover .menu__img img {
  transform: scale(1.06);
}

/* ============================================================
   HERO  =  the loader.  One continuous scene in three beats:
     1. dense vegetation fills the frame
     2. the camera pushes through it
     3. it lands at the edges as a border and the centre opens
   Every .v transform is written by ONE function in main.js
   (intro progress + parallax + sway), so nothing ever fights.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #101a15;
  isolation: isolate;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- HERO = film only --- */
.hero__film {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(1.02) brightness(1.02);
}

.hero__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 78% at 50% 42%, transparent 52%, rgba(8, 16, 11, 0.42) 100%),
    linear-gradient(180deg, rgba(8, 16, 11, 0.34) 0%, transparent 26%, transparent 60%, rgba(6, 12, 8, 0.6) 100%);
}

.hero__mark {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0 var(--pad);
  pointer-events: none;
}

/* the film's opening plays as a loading screen; this thin bar sweeps
   underneath until the hero reveals */
.hero__loader {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(70px, 12vh, 130px);
  transform: translateX(-50%);
  width: clamp(120px, 16vw, 200px);
  height: 1px;
  background: rgba(245, 241, 234, 0.22);
  overflow: hidden;
  pointer-events: none;
}

.hero__loaderbar {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
  animation: hero-sweep 1.25s cubic-bezier(.5, 0, .2, 1) infinite;
}

@keyframes hero-sweep {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }

  48% {
    transform: scaleX(1);
    transform-origin: left;
  }

  52% {
    transform: scaleX(1);
    transform-origin: right;
  }

  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

body.is-loading {
  overflow: hidden;
}

/* --- deepest plane: misty forest light, luminous toward the centre --- */
.hero__sky {
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(46% 40% at 50% 46%, rgba(233, 226, 213, 0.5), transparent 68%),
    radial-gradient(90% 70% at 50% 40%, rgba(122, 139, 120, 0.45), transparent 66%),
    linear-gradient(180deg, #3c5347 0%, #24382f 48%, #101a15 100%);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}

.hero__motes {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* ============================================================
   CENTRE STAGE — portal + lockup, all three stacked in one grid cell
   ============================================================ */
.stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 52px);
  padding: 8vh var(--pad) 0;
  text-align: center;
  pointer-events: none;
}

/* the residences fill the entire viewport; the vegetation frames them.
   A base overscan (scale 1.06) keeps the parallax translate from ever
   exposing an edge. */
.portal {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(calc(1.06 * var(--stageScale, 1)));
  transform-origin: center;
  will-change: transform, clip-path;
  /* scene 3 "pop": JS opens this from a closed slit */
  clip-path: inset(50% 0% 50% 0%);
}

.portal img,
.portal video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  /* the film is the one crisp, luminous thing in the frame */
  filter: saturate(1.02) brightness(1.06) contrast(1.03);
  transform: scale(var(--portalZoom, 1));
  will-change: transform;
}

.portal__grade {
  position: absolute;
  inset: 0;
  background:
    /* a soft pool of shade behind the lockup so the wordmark stays legible */
    radial-gradient(40% 34% at 50% 52%, rgba(10, 20, 15, 0.5), transparent 76%),
    linear-gradient(180deg, rgba(12, 22, 17, 0.42) 0%, transparent 22%, transparent 60%, rgba(10, 18, 13, 0.5) 100%),
    radial-gradient(120% 100% at 50% 44%, transparent 56%, rgba(10, 18, 13, 0.4) 100%);
}

.lockup {
  z-index: 2;
  width: min(34vw, 430px);
  color: var(--paper);
  will-change: transform;
  /* mouse parallax — --px/--py are written on the parent .hero__mark */
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  filter: drop-shadow(0 14px 40px rgba(6, 14, 10, 0.75));
  /* the logo reveals with a soft upward wipe */
  --lockOp: 1;
}

.lockup__logo {
  width: 100%;
  height: auto;
  display: block;
}

.hero__tag {
  z-index: 3;
  align-self: end;
  margin-bottom: clamp(88px, 14vh, 150px);
  text-align: center;
  color: rgba(245, 241, 234, 0.94);
  font-size: clamp(11px, 1.25vw, 14px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(6, 14, 10, 0.9), 0 2px 24px rgba(6, 14, 10, 0.8);
  opacity: 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

/* ============================================================
   VEGETATION LAYER — in FRONT of the stage; it is the border.

   Every cutout is graded through ONE filter recipe so the mixed stock
   foliage reads as a single photograph: sepia + hue-rotate pulls every
   leaf onto the same forest hue, then brightness/blur set its depth.
   Per-element rules only ever change --b (brightness) and --bl (blur).
   ============================================================ */
.veg {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.veg__cam {
  position: absolute;
  inset: 0;
  transform: scale(var(--camScale, 1));
  will-change: transform;
}

.v {
  position: absolute;
  object-fit: contain;
  will-change: transform;
  backface-visibility: hidden;
  --b: 0.5;
  --bl: 2px;
  filter:
    saturate(0.46) sepia(0.3) hue-rotate(44deg) saturate(1.06) brightness(var(--b)) blur(var(--bl));
  /* transform is written wholesale by main.js — never set it here */
}

/* ---- scene-1 only: masses that hide the centre, then blow past us ---- */
.v--fill {
  --b: 0.34;
  --bl: 8px;
}

.v--fill-a {
  left: -8%;
  top: 20%;
  width: 68%;
  height: 66%;
  --rot: -4;
}

.v--fill-b {
  left: 4%;
  top: -12%;
  width: 92%;
  height: 70%;
  --rot: 2;
}

.v--fill-c {
  left: 10%;
  top: 40%;
  width: 80%;
  height: 62%;
  --rot: -3;
}

.v--fill-d {
  left: 20%;
  top: 0%;
  width: 64%;
  height: 68%;
  --rot: 3;
}

/* ---- canopy above ---- */
.v--canopy-c {
  left: 26%;
  top: -14%;
  width: 50%;
  height: 54%;
  object-position: top center;
  --b: 0.62;
  --bl: 1px;
  --rot: 0;
}

.v--canopy-l {
  left: -11%;
  top: -11%;
  width: 52%;
  height: 56%;
  object-position: left top;
  --b: 0.6;
  --bl: 1.5px;
  --rot: -6;
}

.v--canopy-r {
  right: -11%;
  top: -13%;
  width: 52%;
  height: 56%;
  object-position: right top;
  --b: 0.58;
  --bl: 1.7px;
  --rot: -6;
  --mir: -1;
}

/* ---- mossy trunks / lianas down the sides ---- */
.v--trunk-l {
  left: -9%;
  top: -14%;
  width: 26%;
  height: 100%;
  object-position: left top;
  --b: 0.62;
  --bl: 1.1px;
  --rot: 4;
}

.v--trunk-r {
  right: -9%;
  top: -22%;
  width: 26%;
  height: 100%;
  object-position: right top;
  --b: 0.6;
  --bl: 1.3px;
  --rot: 4;
  --mir: -1;
}

.v--palm-l {
  left: -22%;
  bottom: -18%;
  width: 54%;
  height: 82%;
  object-position: left bottom;
  --b: 0.5;
  --bl: 2.4px;
  --rot: 9;
}

.v--palm-r {
  right: -18%;
  top: -22%;
  width: 52%;
  height: 68%;
  object-position: right top;
  --b: 0.52;
  --bl: 2.1px;
  --rot: 172;
}

/* ---- mid-height ferns ---- */
.v--fern-l {
  left: -13%;
  top: 32%;
  width: 34%;
  height: 40%;
  --b: 0.54;
  --bl: 2.2px;
  --rot: -8;
}

.v--fern-r {
  right: -13%;
  top: 28%;
  width: 34%;
  height: 40%;
  --b: 0.52;
  --bl: 2.4px;
  --rot: -8;
  --mir: -1;
}

/* ---- undergrowth along the base ---- */
.v--bush-l {
  left: -12%;
  bottom: -18%;
  width: 46%;
  height: 46%;
  --b: 0.42;
  --bl: 3.6px;
  --rot: 0;
}

.v--bush-r {
  right: -12%;
  bottom: -20%;
  width: 48%;
  height: 48%;
  --b: 0.4;
  --bl: 3.9px;
  --rot: 0;
  --mir: -1;
}

.v--yucca-l {
  left: 10%;
  bottom: -14%;
  width: 26%;
  height: 26%;
  --b: 0.46;
  --bl: 2.9px;
  --rot: -3;
}

.v--yucca-r {
  right: 8%;
  bottom: -16%;
  width: 28%;
  height: 28%;
  --b: 0.44;
  --bl: 3.2px;
  --rot: 3;
  --mir: -1;
}

.v--grass {
  left: -6%;
  bottom: -18%;
  width: 112%;
  height: 34%;
  object-fit: cover;
  object-position: center bottom;
  --b: 0.42;
  --bl: 3.4px;
  --rot: 0;
  /* cover-fitting shows the element's box, so fade its top edge out */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 14%, #000 46%, transparent 96%);
  mask-image: linear-gradient(to top, transparent 0%, #000 14%, #000 46%, transparent 96%);
}

/* ---- wildflowers: small, tucked into the undergrowth ---- */
.v--wf {
  width: clamp(20px, 2.4vw, 38px);
  aspect-ratio: 1 / 2;
  filter: brightness(0.5) saturate(0.45) sepia(0.2) hue-rotate(40deg) blur(1px);
}

.v--wf-1 {
  left: 13%;
  bottom: 1%;
  --rot: -5;
}

.v--wf-2 {
  right: 15%;
  bottom: 0%;
  --rot: 6;
  --mir: -1;
}

.v--wf-3 {
  left: 4%;
  bottom: 5%;
  --rot: 3;
}

/* ---- orchids: the jewels of the border. Small, nestled at the very
   edges, and kept warm rather than paper-white. ---- */
.v--or {
  width: clamp(24px, 2.7vw, 44px);
  aspect-ratio: 1 / 1;
  opacity: 0.92;
  filter:
    saturate(0.5) sepia(0.2) brightness(0.7) blur(0.4px) drop-shadow(0 6px 10px rgba(6, 14, 10, 0.65));
}

.v--or-1 {
  left: 4.5%;
  top: 25%;
  --rot: -16;
}

.v--or-2 {
  left: 2.5%;
  bottom: 31%;
  --rot: 12;
}

.v--or-3 {
  right: 4%;
  top: 39%;
  --rot: 16;
}

.v--or-4 {
  right: 6.5%;
  bottom: 26%;
  --rot: -9;
}

.v--or-5 {
  left: 15%;
  top: 5%;
  --rot: 168;
}

/* ============================================================
   HERO ATMOSPHERE + UI
   ============================================================ */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background:
    radial-gradient(122% 116% at 50% 46%, transparent 46%, rgba(6, 14, 10, 0.62) 100%),
    linear-gradient(180deg, rgba(6, 14, 10, 0.36) 0%, transparent 24%, transparent 62%, rgba(5, 12, 8, 0.6) 100%);
}

.hero__foot {
  position: absolute;
  z-index: 40;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(18px, 4vh, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(245, 241, 234, 0.82);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.hero__disc {
  pointer-events: auto;
  width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px);
  border-radius: 50%;
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 18px;
  animation: disc-bob 2.6s ease-in-out infinite;
}

@keyframes disc-bob {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 6px;
  }
}

/* Portrait / small screens. The viewport is far narrower than the border was
   drawn for, so every side element has to be pushed further off-canvas or it
   grows over the centre instead of framing it. */
@media (max-width: 860px) {

  /* portal stays full-bleed; on a tall phone the 16:9 render crops to the
     building, which is the right subject to keep centred */
  .portal img {
    object-position: 50% 42%;
  }

  .lockup {
    width: min(64vw, 340px);
  }

  .hero__tag {
    font-size: 9px;
    letter-spacing: 0.24em;
    margin-bottom: clamp(58px, 10vh, 88px);
    max-width: 100%;
  }

  .hero__scrollcue {
    display: none;
  }

  .v--canopy-l {
    left: -38%;
    top: -8%;
    width: 84%;
    height: 40%;
  }

  .v--canopy-r {
    right: -38%;
    top: -10%;
    width: 84%;
    height: 40%;
  }

  .v--canopy-c {
    left: 8%;
    top: -18%;
    width: 84%;
    height: 32%;
  }

  .v--trunk-l {
    left: -36%;
    width: 56%;
  }

  .v--trunk-r {
    right: -36%;
    width: 56%;
  }

  .v--palm-l {
    left: -58%;
    width: 100%;
    height: 58%;
  }

  .v--palm-r {
    right: -56%;
    top: -14%;
    width: 96%;
    height: 48%;
  }

  .v--fern-l {
    left: -54%;
    top: 42%;
    width: 74%;
    height: 24%;
  }

  .v--fern-r {
    right: -54%;
    top: 38%;
    width: 74%;
    height: 24%;
  }

  .v--bush-l {
    left: -44%;
    bottom: -12%;
    width: 80%;
    height: 28%;
  }

  .v--bush-r {
    right: -44%;
    bottom: -14%;
    width: 82%;
    height: 29%;
  }

  .v--yucca-l {
    left: -14%;
    bottom: -9%;
    width: 44%;
    height: 16%;
  }

  .v--yucca-r {
    right: -16%;
    bottom: -10%;
    width: 46%;
    height: 17%;
  }

  .v--grass {
    height: 22%;
  }

  .v--or-1 {
    left: 0%;
    top: 34%;
  }

  .v--or-2 {
    left: -2%;
    bottom: 26%;
  }

  .v--or-3 {
    right: 0%;
    top: 42%;
  }

  .v--or-4 {
    right: -1%;
    bottom: 20%;
  }

  .v--or-5 {
    display: none;
  }

  .v--wf-1 {
    left: 6%;
  }

  .v--wf-2 {
    right: 7%;
  }

  .v--wf-3 {
    display: none;
  }

  .butterfly {
    width: clamp(70px, 20vw, 96px);
  }

  /* the desktop nav CTA is far too heavy over a phone-sized hero */
  .nav__cta {
    font-size: 10px;
    letter-spacing: 0.18em;
    padding: 9px 14px;
  }

  .nav__phone {
    display: none;
  }
}

/* ============================================================
   LIQUID GLASS (ported from spec)
   ============================================================ */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 20%,
      rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.liquid-glass:hover {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.liquid-glass:active {
  transform: scale(0.98);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: clamp(16px, 2.4vh, 30px) 0;
  background: var(--forest);
  color: var(--paper);
  border-top: 1px solid rgba(245, 241, 234, .1);
  border-bottom: 1px solid rgba(245, 241, 234, .1);
}

.marquee__track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}

.marquee__track span {
  font-family: var(--font-brand);
  font-size: clamp(15px, 2vw, 24px);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-right: 1em;
  color: rgba(245, 241, 234, .86);
}

/* ============================================================
   BIGNOTE — the headline scrolls sideways while images arrive.
   The section is pinned; vertical scroll drives a horizontal
   translate of a track that carries the words and the images.
   ============================================================ */
.bignote {
  position: relative;
  background: var(--paper);
}

.bignote__pin {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}

/* the track carries the giant line; images are absolutely placed within it
   (behind the words) so they scroll horizontally with the text and can sit
   above / below the line, straddling it like the reference */
.bignote__track {
  position: relative;
  height: 100%;
  width: max-content;
  display: flex;
  align-items: center;
  padding: 0 14vw;
  will-change: transform;
}

.bignote__word {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(52px, 9vw, 150px);
  line-height: 0.95;
  white-space: nowrap;
  color: var(--forest);
  letter-spacing: -0.005em;
}

/* BEHIND the text (z-index 1), staggered high/low so they peek above and
   below the line and read as "appearing under" the words */
.bignote__img {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  width: clamp(170px, 17vw, 300px);
  aspect-ratio: 4/5;
  box-shadow: 0 30px 70px rgba(6, 14, 10, 0.24);
}

.bignote__img--wide {
  width: clamp(220px, 23vw, 400px);
  aspect-ratio: 4/3;
}

.bignote__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* clearly ABOVE / BELOW the line, overlapping it slightly */
.bignote__img--a {
  left: 14%;
  top: 9%;
}

.bignote__img--b {
  left: 44%;
  bottom: 8%;
}

.bignote__img--c {
  left: 74%;
  top: 11%;
}

.bignote__sketch {
  position: absolute;
  z-index: 1;
  left: 60%;
  top: 5%;
  width: clamp(170px, 19vw, 320px);
  height: auto;
  opacity: 0.65;
}


@media (max-width: 820px) {

  /* MOBILE — one photo above, one below, the two lines between them.
     Nothing overlaps: the type gets its own clear band so it stays
     readable, and it's weighted up because Italiana is a thin face. */
  .bignote {
    overflow: hidden;
  }

  .bignote__pin {
    height: auto;
    display: block;
    overflow: hidden;
    padding: clamp(48px, 9vh, 90px) 0;
  }

  .bignote__track {
    position: relative;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(26px, 5vh, 48px);
    padding: 0 var(--pad);
    transform: none !important;
  }

  .bignote__word {
    order: 2;
    position: static;
    display: block;
    white-space: normal;
    font-size: clamp(26px, 8.3vw, 56px);
    line-height: 1.14;
    color: var(--forest);
    /* Italiana ships in a single light weight — a hairline stroke gives it
       the heft it needs at small sizes without swapping the brand face */
    -webkit-text-stroke: 0.7px var(--forest);
    letter-spacing: -0.005em;
  }

  .bignote__ln {
    display: block;
    white-space: nowrap;
    will-change: transform;
  }

  .bignote__ln--a {
    text-align: left;
  }

  .bignote__ln--b {
    text-align: right;
  }

  /* photos: offset and asymmetric like the reference — a tall portrait
     sitting left, a wider frame sitting right. Never full-bleed. */
  .bignote__img,
  .bignote__img--wide {
    position: relative;
    display: block;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0;
    box-shadow: 0 22px 50px rgba(6, 14, 10, .18);
  }

  .bignote__img--a {
    order: 1;
    align-self: flex-start;
    width: 52%;
    aspect-ratio: 3/4;
  }

  .bignote__img--b {
    order: 3;
    align-self: flex-end;
    width: 66%;
    aspect-ratio: 4/3;
  }

  /* only two photos on mobile — declared AFTER the block above so it wins */
  .bignote__track .bignote__img--c,
  .bignote__track .bignote__sketch {
    display: none !important;
  }
}

/* ============================================================
   FEATURE — a cinematic render, then the frame "turns green" as the
   forest-green body scrolls up over the sticky cover; three pillars
   follow, each title / description / image-right (Frida pattern).
   ============================================================ */
.feature {
  position: relative;
  background: var(--forest);
}

/* The cover used to hold a second full-screen film that dissolved into the
   green. That film is gone: #difference already ends on a film, and stacking
   another one before the amenities read as two video sections back to back.
   The cover is now simply the green frame itself — the background turns green
   the moment you leave #difference, and the amenities intro fades in over it. */
.feature__cover {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--forest);
}

.feature__body {
  position: relative;
  background: var(--forest);
  padding-bottom: clamp(50px, 8vh, 96px);
}

/* the three pillars are STACKED and cross-fade one at a time while pinned,
   so the next one is never visible underneath */
.feature__stack {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.feature__stack .fpanel {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: clamp(40px, 6vh, 90px) 0 clamp(40px, 6vh, 90px) var(--pad);
  opacity: 0;
  will-change: opacity;
}

.feature__stack .fpanel+.fpanel {
  border-top: 0;
}

.feature__stack .fpanel__media {
  height: min(70vh, 640px);
}

.fpanel {
  min-height: 92vh;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(50px, 8vh, 110px) 0 clamp(50px, 8vh, 110px) var(--pad);
  color: var(--paper);
}

/* ---- two amenities per screen -----------------------------------------
   The single-amenity panel bled its image off the right edge, so it had no
   right padding. A pair has to be symmetrical, and both columns start at the
   top so the two titles sit on the same line regardless of image height. */
.fpanel--duo {
  grid-template-columns: 1fr 1fr;
  /* align-content centres the ROW inside the 100vh frame, while align-items
     keeps the two cards top-aligned to each other so their titles share a
     baseline. With align-items alone the pair sat at the top of the frame and
     left a dead band across the bottom of every slide. */
  align-content: center;
  align-items: start;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(32px, 5vh, 64px) var(--pad);
}

.acard {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}

/* a fixed height rather than aspect-ratio: two cards plus their copy have to
   clear the viewport, and a 4/3 box at half-width would overflow a short one */
.acard img {
  width: 100%;
  height: min(56vh, 540px);
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

.acard figcaption {
  padding-top: clamp(14px, 2vh, 22px);
}

.acard__title {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: -.008em;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.12;
  color: var(--paper);
  margin-bottom: 8px;
}

.acard__desc {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: rgba(245, 241, 234, .74);
  max-width: 42ch;
}

@media (max-width: 900px) {
  .fpanel--duo {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vh, 44px);
  }

  .acard img {
    height: min(38vh, 320px);
  }
}

.fpanel+.fpanel {
  border-top: 1px solid rgba(245, 241, 234, 0.1);
}

.fpanel__text {
  max-width: 36rem;
}

.fpanel__text .disp {
  margin-bottom: 8px;
}

.fpanel__text .lead {
  margin-bottom: clamp(22px, 3vh, 30px);
}

.fpanel__media {
  position: relative;
  height: min(72vh, 660px);
  overflow: hidden;
  border-radius: 46% 0 0 46% / 60% 0 0 40%;
  box-shadow: 0 40px 90px rgba(4, 10, 7, 0.4);
}

.fpanel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .feature__stack {
    height: auto;
  }

  .feature__stack .fpanel {
    position: relative;
    inset: auto;
    opacity: 1 !important;
  }

  .fpanel {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 28px;
    padding: clamp(44px, 7vh, 84px) var(--pad);
  }

  .fpanel__media {
    height: 56vh;
    border-radius: 8px;
    order: -1;
  }

  .feature__cover {
    height: 74vh;
  }
}

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */
.sec {
  position: relative;
  padding: var(--sec-y) var(--pad);
  background: var(--paper);
}

.sec--stone {
  background: var(--paper-2);
}

.sec--dark {
  background: var(--forest);
  color: var(--paper);
}

.sec--tight {
  padding-top: calc(var(--sec-y) * .45);
}

.sec>*:not(.dapple) {
  position: relative;
  z-index: 1;
}

.dapple {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 46% at 82% -4%, rgba(122, 139, 120, .1), transparent 60%);
}

/* eyebrow: no rule line — a plain text label that INHERITS the parent's
   alignment, so it centres in centred sections and stays left elsewhere */
.eyebrow {
  display: block;
  text-align: inherit;
  margin-bottom: clamp(18px, 3vh, 34px);
}

/* Lato Light at 12px under .34em tracking is too thin to hold its own —
   caps that widely tracked need weight to stay legible, not less of it. */
.eyebrow span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--leaf-ink);
}

.eyebrow--light span {
  color: var(--mist);
}

.eyebrow--overlay {
  position: absolute;
  z-index: 3;
  top: clamp(24px, 5vh, 54px);
  left: var(--pad);
}

.eyebrow--overlay span {
  color: var(--paper);
}

/* Tracking is size-specific. Letters read progressively FURTHER apart as type
   grows, so display sizes want negative tracking — this was +.008em, opening
   an already-airy face at 66px. .bignote__word (115px) already ran negative;
   the section headings now agree with it. */
.disp {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(30px, 5vw, 66px);
  line-height: 1.07;
  letter-spacing: -.014em;
  color: var(--ink);
  max-width: 20ch;
}

.disp--light {
  color: var(--paper);
}

.lead {
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.72;
  max-width: 62ch;
  color: var(--ink-soft);
  margin-top: clamp(14px, 2vh, 24px);
}

.lead--light {
  color: rgba(245, 241, 234, .82);
}

.lead--wide {
  max-width: 74ch;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 15px 28px;
  transition: background .35s, color .35s, border-color .35s, transform .35s;
}

.btn--solid {
  background: var(--gold);
  color: #241a0e;
}

.btn--solid:hover {
  background: #c9ad7c;
  color: #201708;
  transform: translateY(-2px);
}

.btn--ghost {
  border: 1px solid var(--forest);
  color: var(--forest);
}

.btn--ghost:hover {
  background: var(--forest);
  color: var(--paper);
}

.btn--light {
  color: var(--paper);
  border-color: rgba(245, 241, 234, .5);
}

.btn--light:hover {
  background: var(--paper);
  color: var(--forest);
  border-color: var(--paper);
}

/* split-lines mechanics (JS builds .line-mask > .line) */
.split-lines .line-mask {
  display: block;
  overflow: hidden;
}

.split-lines .line {
  display: block;
  transform: translateY(103%);
}

/* slat image reveal */
.blockimg__mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  pointer-events: none;
}

.blockimg__mask span {
  flex: 1;
  background: var(--paper);
}

.sec--stone .blockimg__mask span,
.gallery .blockimg__mask span {
  background: var(--paper-2);
}

.framewrap {
  position: relative;
}

.fireflies {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   NAV LINKS (desktop)
   ============================================================ */
.nav__links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 1.5vw, 26px);
}

.nav__links a {
  position: relative;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .82;
  transition: opacity .3s;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.4, 0, .1, 1);
}

.nav__links a:hover {
  opacity: 1;
}

.nav__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* scroll progress bar */
.scrollbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  pointer-events: none;
}


/* ---- amenities feature: intro head, panel numbers, extra list ---- */
/* the stack holds all three panels in ONE viewport cell so they cross-fade
   in place — the next panel is never visible beneath the current one */
/* the three panels occupy ONE viewport cell and cross-fade through it,
   so you only ever see one at a time — the next is never visible under
   it. They fade in place: opacity only, no travel. */
/* the intro is layer 0 of this stack, so it stacks and un-stacks with the
   panels rather than living in its own pinned frame above them */
.fstack {
  position: relative;
  height: 100vh;
}

.fstack .fpanel {
  position: absolute;
  inset: 0;
  min-height: 0;
}

@media (max-width: 900px) {
  .fstack {
    height: auto;
  }

  .fstack .fpanel,
  .fstack .feature__head {
    position: relative;
    inset: auto;
    opacity: 1 !important;
  }

  .fstack .feature__head {
    height: auto;
    padding-block: clamp(48px, 9vh, 90px);
  }
}

/* the amenities intro lives INSIDE the pinned cover so it can fade in
   over the green while the frame is still held — no scroll in between */
.feature__head {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 0;
  height: 100%;
  padding: 0 var(--pad);
  max-width: 1000px;
  color: var(--paper);
  opacity: 0;
}

.feature__head .disp {
  margin: 6px 0 14px;
}

/* .fpanel__no removed — the amenity panels no longer carry 01/02/03 */
.fpanel__title {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 44px);
  line-height: 1.1;
  color: var(--paper);
  margin-bottom: 12px;
}

/* .feature__more removed — the amenities block ends on the three panels */

/* ============================================================
   ENQUIRY FORM — floating labels, hairline underlines
   ============================================================ */
.enquire {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}

.enquire__title {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.1;
  color: var(--ink);
  margin: 10px 0 14px;
}

.enquire__note {
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 34ch;
  font-size: 15px;
}

.eform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
}

.eform__row--3 {
  grid-template-columns: .8fr 1fr 1.2fr;
}

/* The form now sits on its own paper card, lifted off the Warm Stone band.
   Previously the fields floated loose on the section background, which gave
   the whole column no edge and made the bare underlines hard to read as
   inputs at all. */
.eform {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vh, 20px);
  background: var(--paper);
  border: 1px solid rgba(3, 38, 23, .10);
  padding: clamp(22px, 3vw, 40px);
}

/* ---- filled fields --------------------------------------------------
   A tinted well plus a bottom rule, so the tap/click area is visible before
   you interact with it — a lone 1px underline reads as a divider, not a
   field. The rule thickens via an inset shadow rather than border-width so
   focus never reflows the row by a pixel. */
.field {
  position: relative;
}

.field input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(3, 38, 23, 0.26);
  background: rgba(3, 38, 23, 0.028);
  padding: 26px 14px 10px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  border-radius: 2px 2px 0 0;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.field input:hover {
  background: rgba(3, 38, 23, 0.05);
}

.field input:focus {
  outline: none;
  background: rgba(3, 38, 23, 0.045);
  border-bottom-color: var(--gold-ink);
  box-shadow: inset 0 -1px 0 var(--gold-ink);
}

.field label {
  position: absolute;
  left: 14px;
  top: 26px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  /* transform only — transitioning font-size would relayout every frame */
  pointer-events: none;
  transition: transform .3s cubic-bezier(.4, 0, .1, 1), color .3s;
  transform-origin: left;
}

.field input:focus+label,
.field input:not(:placeholder-shown)+label {
  /* a focus state must be the MOST legible state of a field, hence gold-ink
     (4.8 on stone) rather than raw --gold (2.07) */
  transform: translateY(-17px) scale(.8);
  color: var(--gold-ink);
}

.eform__label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

/* ---- select: same well, custom chevron so it stops looking OS-default --- */
.field--select .eform__label {
  position: static;
}

.field--select select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(3, 38, 23, 0.26);
  background-color: rgba(3, 38, 23, 0.028);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23685f55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding: 14px 40px 14px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  border-radius: 2px 2px 0 0;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.field--select select:hover {
  background-color: rgba(3, 38, 23, 0.05);
}

.field--select select:focus {
  outline: none;
  border-bottom-color: var(--gold-ink);
  box-shadow: inset 0 -1px 0 var(--gold-ink);
}

/* ---- consent: a real brand checkbox instead of the OS control ---------- */
.eform__consent .check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
}

.eform__consent .check span {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.eform__consent input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  border: 1px solid rgba(3, 38, 23, 0.32);
  border-radius: 2px;
  background: var(--paper);
  cursor: pointer;
  position: relative;
  transition: background .25s ease, border-color .25s ease;
}

.eform__consent input[type="checkbox"]:hover {
  border-color: var(--gold-ink);
}

.eform__consent input[type="checkbox"]:checked {
  background: var(--forest);
  border-color: var(--forest);
}

/* the tick, drawn with two borders — no asset, scales with the box */
.eform__consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--paper);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(43deg);
}

.eform__btn {
  align-self: flex-start;
  border: 0;
  cursor: pointer;
  margin-top: 4px;
}

.eform__thanks {
  display: none;
  color: var(--forest);
  font-size: 14px;
}

.eform.is-sent .eform__thanks {
  display: block;
}

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

  .eform__row,
  .eform__row--3 {
    grid-template-columns: 1fr;
  }

  .feature__more {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   EXPANDING PANELS (Why Parkside) — hover / tap to open
   ============================================================ */
.sec--deep {
  background: var(--forest-3);
  color: var(--paper);
}

#why .lead {
  max-width: 72ch;
}

.expand {
  display: flex;
  gap: 8px;
  margin-top: clamp(30px, 5vh, 60px);
  height: min(66vh, 580px);
}

/* WHY PARKSIDE fits in one screen.
   The heading, lead and a 580px panel row plus full --sec-y padding added up
   to well over a viewport, so the panels were always half below the fold.
   The section is now exactly one screen tall and the panel row takes whatever
   height is left over, instead of every part being sized independently. */
@media (min-width: 901px) {
  .why {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(44px, 6vh, 76px);
  }

  .why .eyebrow {
    margin-bottom: clamp(10px, 1.6vh, 18px);
  }

  /* sized to leave room for the panels rather than for its own band */
  .why .disp {
    font-size: clamp(30px, 3.7vw, 54px);
    max-width: 22ch;
  }

  .why .lead {
    margin-top: clamp(10px, 1.6vh, 18px);
  }

  .why .expand {
    flex: 1 1 auto;
    height: auto;
    /* floor: the collapsed titles run VERTICALLY, and "Designed Around Nature"
       needs ~285px of panel height. Below this the section is allowed to grow
       past the viewport and scroll again — better than clipping the type. */
    min-height: 300px;
    margin-top: clamp(18px, 2.6vh, 36px);
  }
}

.epanel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 2px;
  transition: flex-grow .65s cubic-bezier(.4, 0, .1, 1);
}

.epanel.is-open {
  flex-grow: 3.6;
}

.epanel__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: brightness(0.42) saturate(0.85);
  transition: transform 1s cubic-bezier(.4, 0, .1, 1), filter .6s;
}

.epanel.is-open .epanel__bg {
  transform: scale(1);
  filter: brightness(0.72) saturate(1);
}

.epanel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 23, 14, 0.1) 30%, rgba(2, 23, 14, 0.82) 100%);
}

.epanel__inner {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 2vw, 32px);
  color: var(--paper);
}

/* .epanel__no removed — the Why Parkside panels no longer carry 01/02/03 */
.epanel__title {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 34px);
  margin: 10px 0 0;
  line-height: 1.05;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: left;
  white-space: nowrap;
}

.epanel.is-open .epanel__title {
  writing-mode: horizontal-tb;
  transform: none;
  margin: 8px 0 12px;
}

.epanel__text {
  max-width: 48ch;
  color: rgba(245, 241, 234, 0.82);
  line-height: 1.6;
  font-size: 15px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s .15s, transform .5s .15s;
}

.epanel.is-open .epanel__text {
  opacity: 1;
  transform: none;
}

@media (max-width: 860px) {
  .expand {
    flex-direction: column;
    height: auto;
    gap: 10px;
  }

  /* `flex: 1 1 0` sets flex-BASIS 0, which in a column container replaces
     `height` entirely — the panels collapsed to 0. Reset the flex so the
     explicit heights below actually apply. */
  /* every panel identical — nothing grows or shrinks on tap */
  .epanel,
  .epanel.is-open {
    flex: none;
    height: 38vh;
  }

  .epanel__title {
    writing-mode: horizontal-tb;
    transform: none;
    margin: 8px 0 10px;
  }

  .epanel__text {
    opacity: 1;
    transform: none;
  }

  /* readable without hover on touch */
  /* no hover on touch, so the open/closed zoom just crops the image for no
     reason — every panel sits flat and evenly lit instead */
  .epanel__bg,
  .epanel.is-open .epanel__bg {
    transform: none;
    filter: brightness(0.6) saturate(0.95);
  }
}

@media (min-width: 1101px) {
  .nav__burger {
    display: none;
  }
}

@media (max-width: 1100px) {
  .nav__links {
    display: none;
  }
}

/* ============================================================
   HERO COPY (over the film)
   ============================================================ */
.hero__copy {
  z-index: 3;
  text-align: center;
  max-width: 640px;
  opacity: 0;
  pointer-events: none;
}

.hero__eyebrow {
  font-size: 12px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, .85);
}

.hero__headline {
  font-family: var(--font-brand);
  font-size: clamp(22px, 3vw, 40px);
  color: var(--paper);
  margin-top: 12px;
  line-height: 1.12;
  text-shadow: 0 2px 24px rgba(6, 14, 10, .6);
}

.hero__lead {
  font-size: clamp(13px, 1.3vw, 16px);
  color: rgba(245, 241, 234, .84);
  margin: 14px auto 0;
  max-width: 52ch;
  line-height: 1.62;
}

.hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

.hero__actions .btn {
  pointer-events: auto;
}

/* ============================================================
   FILM SECTIONS (video background + copy)
   ============================================================ */
.film {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--paper);
}

.film--tall {
  min-height: 100vh;
}

.film__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 15, .34) 0%, transparent 34%, rgba(8, 16, 11, .78) 100%);
}

.film__shade--soft {
  background: linear-gradient(180deg, rgba(8, 16, 11, .52), rgba(8, 16, 11, .58));
}

.film__inner {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 8vh, 108px) var(--pad);
  max-width: 1040px;
  width: 100%;
}

/* z-index 3 — ABOVE .film__inner, so the wash takes the copy with it rather
   than leaving text stranded on a green field */
.film__green {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--forest);
  opacity: 0;
  pointer-events: none;
}

.film__inner--center {
  margin: auto;
  text-align: center;
}

.film__inner--center .disp,
.film__inner--center .lead {
  margin-left: auto;
  margin-right: auto;
}

.moments {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 40px);
  margin-top: clamp(24px, 4vh, 48px);
}

.moments li {
  border-top: 1px solid rgba(245, 241, 234, .3);
  padding-top: 16px;
}

.moments em {
  display: block;
  font-style: normal;
  font-family: var(--font-brand);
  font-size: clamp(15px, 1.5vw, 20px);
  margin-bottom: 8px;
}

.moments span {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(245, 241, 234, .78);
}

.film__sound {
  margin-top: clamp(26px, 4vh, 40px);
  color: var(--paper);
  border: 1px solid rgba(245, 241, 234, .5);
  padding: 11px 20px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .3s, color .3s;
}

.film__sound:hover {
  background: var(--paper);
  color: var(--forest);
}

.diffgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 46px);
  margin-top: clamp(26px, 4vh, 50px);
  max-width: 920px;
}

.diffgrid b {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 26px);
  display: block;
  margin-bottom: 8px;
}

.diffgrid p {
  color: rgba(245, 241, 234, .8);
  line-height: 1.62;
  font-size: 14px;
}

.pullquote {
  font-family: var(--font-brand);
  font-size: clamp(24px, 3.4vw, 50px);
  line-height: 1.2;
  letter-spacing: -.012em;
  margin: clamp(24px, 4vh, 44px) auto 0;
  max-width: 22ch;
  color: var(--paper);
}

/* ============================================================
   WHY (pillars)
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 54px);
  margin-top: clamp(30px, 5vh, 62px);
}

.pillar {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.pillar__no {
  font-family: var(--font-brand);
  font-size: 22px;
  color: var(--gold);
}

.pillar b {
  display: block;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 26px);
  margin: 12px 0 10px;
}

.pillar p {
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 15px;
}

/* ============================================================
   LOCATION
   ============================================================ */
.loc {
  position: relative;
  background: var(--paper-2);
  padding: var(--sec-y) var(--pad);
}

.loc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}

.proxlist {
  list-style: none;
  margin-top: clamp(18px, 3vh, 32px);
}

.proxlist li {
  display: flex;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.proxlist b {
  font-family: var(--font-brand);
  font-size: 19px;
  min-width: 62px;
  color: var(--forest);
}

.proxlist em {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
}

.proxlist span {
  font-size: 13px;
  color: var(--ink-soft);
}

.loc__mediawrap {
  position: relative;
}

.loc__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}

.loc__media img,
.loc__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   AMENITIES (sticky image + list)
   ============================================================ */
.amrows {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(30px, 5vh, 60px);
  align-items: start;
}

.amrows__list {
  display: flex;
  flex-direction: column;
}

.amrow {
  text-align: left;
  padding: clamp(14px, 2vh, 22px) 0;
  border-top: 1px solid var(--line);
  transition: padding-left .4s cubic-bezier(.4, 0, .1, 1), opacity .3s;
  opacity: .58;
}

.amrow:last-child {
  border-bottom: 1px solid var(--line);
}

.amrow b {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 26px);
  display: block;
}

.amrow span {
  font-size: 13px;
  color: var(--ink-soft);
}

.amrow.is-on {
  opacity: 1;
  padding-left: 16px;
}

.amrow.is-on b {
  color: var(--forest);
}

.amrows__mediawrap {
  position: sticky;
  top: 12vh;
}

.amrows__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}

.amrows__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amrows__media figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 18px 22px;
  color: var(--paper);
  font-family: var(--font-brand);
  font-size: clamp(17px, 1.7vw, 22px);
  background: linear-gradient(transparent, rgba(8, 16, 11, .72));
  z-index: 3;
}

/* ============================================================
   PINNED ARCHITECTURE
   ============================================================ */
/* Forest, not paper. .pinsec__title is --paper text and the ONLY thing that
   made it legible was the video painting over this background — but the video
   is preload="none", so between scroll-in and first frame (or if autoplay is
   blocked, or it 404s) the title was paper-on-paper: invisible. A dark base
   makes the un-loaded state the readable one. */
.pinsec {
  position: relative;
  height: 185vh;
  background: var(--forest);
}

.pinsec__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.pinsec__frame {
  position: relative;
  width: 62vw;
  height: 64vh;
  overflow: hidden;
  will-change: width, height;
}

.pinsec__frame img,
.pinsec__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
}

.pinsec__shade {
  position: absolute;
  inset: 0;
  background: rgba(14, 29, 20, 0);
}

.pinsec__title {
  position: absolute;
  z-index: 4;
  color: var(--paper);
  text-align: center;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(30px, 5.4vw, 78px);
  line-height: 1.05;
  letter-spacing: -.016em;
  opacity: 0;
  text-shadow: 0 8px 40px rgba(6, 14, 10, .7);
}

/* ============================================================
   ARCHITECT — two calm columns, one type scale, minimal words
   ============================================================ */
.arch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(20px, 3vh, 40px);
}

.arch__name {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.14;
  color: var(--ink);
  margin: 12px 0 14px;
  max-width: 18ch;
}

.arch__bio {
  color: var(--ink-soft);
  line-height: 1.72;
  max-width: 40ch;
  font-size: 15px;
}



/* The studio mark. It also gives the left column its own opening element —
   with "About the Architect" removed, this side jumped straight into the big
   name while the right side still opened on a small "Global Recognition"
   label. The logo restores that balance. */
.arch__logo {
  width: clamp(84px, 8vw, 116px);
  height: auto;
  display: block;
  margin-bottom: clamp(16px, 2.4vh, 26px);
}

.arch__kicker {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 12px;
}

.arch__lead .arch__bio+.arch__bio {
  margin-top: 14px;
}

.arch__bio b {
  font-weight: 600;
  color: var(--ink);
}

.arch__awards .arch__list {
  margin-top: 4px;
}

.arch__list {
  list-style: none;
}

.arch__list li {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.arch__list li:last-child {
  border-bottom: 1px solid var(--line);
}

.arch__list b {
  display: block;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 23px);
  color: var(--ink);
  margin-bottom: 5px;
}

.arch__list span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

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

/* ============================================================
   INTERIORS
   ============================================================ */
.intergrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 30px);
  margin-top: clamp(30px, 5vh, 56px);
}

.interior {
  position: relative;
  overflow: hidden;
}

.interior--wide {
  grid-column: 1 / -1;
}

.interior>img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.4, 0, .1, 1);
}

.interior:not(.interior--wide)>img {
  aspect-ratio: 4/3;
}

.interior:hover>img {
  transform: scale(1.04);
}

.interior figcaption {
  padding: 16px 2px 0;
}

.interior figcaption b {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  display: block;
  margin-bottom: 4px;
}

.interior figcaption span {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ============================================================
   COLLAGE — centred statement with scattered images around it
   ============================================================ */
.collage {
  position: relative;
  background: var(--paper);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(70px, 12vh, 150px) var(--pad);
  overflow: hidden;
}

/* was max-width:60ch, which is what wrapped the title; the lead keeps its own
   46ch measure below, so only that needs constraining */
.collage__mid {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 100%;
}

.collage__eyebrow {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--leaf-ink);
}

/* Both lines stay on one line at every width. The <br> supplies the only
   break; nowrap forbids any other. Because nowrap can't reflow, the size has
   to be width-proportional or it would overflow — hence the vw term, capped
   so it stops growing on large screens. */
.collage__title {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(20px, 6.2vw, 56px);
  line-height: 1.12;
  letter-spacing: -.012em;
  white-space: nowrap;
  color: var(--ink);
  margin: clamp(12px, 2vh, 22px) 0;
}

.collage__title em {
  font-style: italic;
}

.collage__lead {
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 46ch;
  margin: 0 auto;
  font-size: clamp(14px, 1.3vw, 16px);
}

.collage__img {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 26px 60px rgba(6, 14, 10, .16);
}

.collage__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .85s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.collage__img--1 {
  left: 5%;
  top: 8%;
  width: clamp(140px, 16vw, 260px);
  aspect-ratio: 4/5;
}

.collage__img--2 {
  right: 8%;
  top: 4%;
  width: clamp(130px, 15vw, 240px);
  aspect-ratio: 1/1;
}

.collage__img--3 {
  left: 13%;
  bottom: 6%;
  width: clamp(150px, 17vw, 280px);
  aspect-ratio: 5/4;
}

.collage__img--4 {
  right: 5%;
  bottom: 9%;
  width: clamp(140px, 16vw, 260px);
  aspect-ratio: 4/5;
}

@media (max-width: 900px) {

  /* MOBILE — keep the scattered composition (same as desktop / the
     reference): the copy sits centred and the photos stay absolutely
     placed around it, smaller and bleeding off the left & right edges. */
  .collage {
    min-height: 118vh;
    padding-inline: 0;
    display: grid;
    place-items: center;
  }

  .collage__mid {
    max-width: 88%;
    padding-inline: 6%;
  }

  .collage__img {
    position: absolute;
  }

  /* Each width is capped in vh as well as %.
     These photos are sized as a % of the container's WIDTH, but the container
     is sized in vh — so on a short, wide screen (a landscape phone, a small
     tablet) they grew taller than the space available and collided with the
     centred copy. The vh cap makes the composition shrink with whichever
     dimension is tighter. Caps are per aspect-ratio: 4/5 is 1.25x as tall as
     it is wide, so it needs the smallest width cap. */
  .collage__img--1 {
    left: -12%;
    top: 8%;
    width: min(46%, 26vh);
    aspect-ratio: 4/5;
  }

  .collage__img--2 {
    right: -10%;
    top: 3%;
    width: min(42%, 30vh);
    aspect-ratio: 1/1;
  }

  .collage__img--3 {
    left: -8%;
    bottom: 6%;
    width: min(44%, 36vh);
    aspect-ratio: 5/4;
  }

  /* also dropped from bottom:12% — its top edge was crossing the last line of
     the lead. Sitting just below img--3's baseline keeps the scatter from
     flattening into a straight row. */
  .collage__img--4 {
    right: -12%;
    bottom: 4%;
    width: min(46%, 26vh);
    aspect-ratio: 4/5;
  }
}

/* ============================================================
   CONSTRUCTION PROGRESS
   ============================================================ */
.progress {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 54px);
  margin-top: clamp(30px, 5vh, 56px);
}

.progress__cam {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.progress__cam img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) brightness(.92);
}

.progress__cam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 14, 10, .35), transparent 30%, transparent 70%, rgba(6, 14, 10, .45));
}

.progress__live,
.progress__caminfo,
.progress__time,
.progress__watching {
  position: absolute;
  z-index: 2;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .92);
  font-variant-numeric: tabular-nums;
}

.progress__live {
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.progress__live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5533c;
  animation: livepulse 1.4s infinite;
}

.progress__watching {
  top: 16px;
  right: 16px;
}

.progress__caminfo {
  bottom: 16px;
  left: 16px;
}

.progress__time {
  bottom: 16px;
  right: 16px;
}

.progress__meter {
  align-self: center;
}

.progress__label {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist);
}

.progress__pct {
  font-family: var(--font-brand);
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1;
  color: var(--paper);
  margin-top: 6px;
}

.progress__bar {
  height: 4px;
  background: rgba(245, 241, 234, .18);
  margin: 16px 0 10px;
  overflow: hidden;
}

.progress__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 1.6s cubic-bezier(.4, 0, .1, 1);
}

.progress__upd {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, .6);
}

.progress__meter p {
  color: rgba(245, 241, 234, .72);
  line-height: 1.7;
  margin-top: 16px;
  font-size: 15px;
}

@keyframes livepulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .25;
  }
}

/* ============================================================
   DEVELOPER
   ============================================================ */
.devstats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: clamp(30px, 5vh, 56px) 0;
}

.devstats b {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  display: block;
  line-height: 1.04;
}

.devstats span {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.devmedia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  max-width: 760px;
}

.devmedia figure {
  position: relative;
  overflow: hidden;
}

.devmedia img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center;
}

.devpillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 50px);
  margin: clamp(30px, 5vh, 56px) 0;
}

.devpillars b {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  display: block;
  margin-bottom: 10px;
}

.devpillars p {
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 15px;
}

/* ============================================================
   NEWS
   ============================================================ */
.newsgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(30px, 5vh, 56px);
}

.newscard figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  margin-bottom: 16px;
}

.newscard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.4, 0, .1, 1);
}

.newscard:hover img {
  transform: scale(1.05);
}

.newscard em {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}

.newscard b {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 26px);
  display: block;
  margin: 8px 0;
  line-height: 1.22;
}

.newscard p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.newscard>a {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--forest);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color .3s;
}

.newscard>a:hover {
  color: var(--gold);
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--paper);
}

.cta__bg {
  position: absolute;
  inset: 0;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 11, .5), rgba(8, 16, 11, .76));
}

.cta__inner {
  position: relative;
  z-index: 2;
  padding: var(--pad);
  max-width: 780px;
  margin: auto;
  text-align: center;
}

.cta__inner .disp,
.cta__inner .lead {
  margin-left: auto;
  margin-right: auto;
}

/* Three facts over a bright render. Two things made them unreadable: they were
   set in ITALIANA, whose numerals are far smaller and lighter than its caps
   (so "1741", "2028" and "187" nearly vanished), and they sat on the lightest
   part of the image with no local scrim. Same lesson as the architect stats:
   numeric values go in the text face, never the display face. */
/* A fixed three-column grid, NOT flex-wrap: the three items are wider than
   .cta__inner's 780px cap, so wrapping put two on one row and orphaned the
   third underneath. A grid can't wrap — the columns just get narrower — and
   the type is sized to fit inside that cap rather than to fill the plate. */
.cta__facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(28px, 3.6vh, 44px);
  /* a quiet plate so the row keeps its contrast wherever the render is bright */
  background: rgba(6, 14, 10, .34);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 241, 234, .14);
  border-radius: 2px;
  padding: clamp(13px, 1.7vh, 18px) clamp(4px, .8vw, 10px);
}

.cta__facts li {
  padding: 2px clamp(10px, 1.5vw, 22px);
  border-left: 1px solid rgba(245, 241, 234, .16);
  text-align: center;
}

.cta__facts li:first-child {
  border-left: 0;
}

.cta__facts em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, .74);
  margin-bottom: 7px;
}

.cta__facts span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 1.15vw, 16px);
  color: var(--paper);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Between 621 and 900 the shared responsive block drops this to two columns,
   which orphans the third fact into the left-hand cell. Three across isn't an
   option at that width — it leaves 149px per column for a 145px address that
   is set `nowrap`, so it would overflow — so the odd one out spans the full
   width instead and centres itself. The vertical rule is swapped for a
   horizontal one so it reads as a second row rather than a stray cell. */
/* NOTE the 521px boundary, not 620: the shared RESPONSIVE block further down
   this file sets two columns at max-width:900 and one column at max-width:520.
   Being later in the source it wins at equal specificity, so these ranges have
   to match its boundaries — an earlier attempt at 620 was simply overridden
   and left 521–620px showing the orphan uncentred. */
@media (min-width: 521px) and (max-width: 900px) {
  .cta__facts {
    row-gap: 14px;
  }

  .cta__facts li:last-child {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid rgba(245, 241, 234, .16);
    padding-top: 16px;
  }
}

@media (max-width: 520px) {
  .cta__facts {
    gap: 16px;
    padding: 18px 22px;
  }

  .cta__facts li {
    border-left: 0;
    padding: 0;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--forest-3);
  color: var(--paper);
  padding: clamp(50px, 8vh, 90px) var(--pad) 30px;
  position: relative;
  overflow: hidden;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  padding-bottom: clamp(30px, 5vh, 50px);
  border-bottom: 1px solid rgba(245, 241, 234, .14);
}

.footer__logo {
  width: clamp(150px, 16vw, 200px);
  height: auto;
  display: block;
  color: var(--paper);
  margin-bottom: clamp(14px, 2vh, 22px);
}

.footer__tag {
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mist);
}

.footer__brands {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(18px, 3vh, 30px);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer__brand-label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  font-weight: bold;
}

.footer__brand-logo {
  height: 30px;
  width: auto;
}

/* .footer__cta / .footer__desc removed — the footer lead is now just the
   wordmark + tagline */
.footer__enq h4 {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 12px;
}

.footer__enq p {
  color: rgba(245, 241, 234, .78);
  line-height: 1.7;
  margin-bottom: 8px;
}

.footer__enq a:hover {
  color: var(--gold);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: clamp(30px, 5vh, 50px) 0;
}

.footer__col h4 {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 14px;
}

.footer__col a {
  display: block;
  padding: 5px 0;
  color: rgba(245, 241, 234, .72);
  font-size: 14px;
  transition: color .3s;
}

.footer__col a:hover {
  color: var(--paper);
}

/* .footer__word (the giant PARKSIDE watermark) removed */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 241, 234, .14);
}

.footer__legal {
  font-size: 12px;
  color: rgba(245, 241, 234, .5);
  line-height: 1.6;
  max-width: 96ch;
}

.footer__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: rgba(245, 241, 234, .6);
  flex-wrap: wrap;
}

.footer__meta a:hover {
  color: var(--gold);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {

  .pillars,
  .diffgrid,
  .devpillars,
  .newsgrid,
  .loc__grid,
  .amrows,
  .architect,
  .progress,
  .gallery,
  .footer__top {
    grid-template-columns: 1fr;
  }

  .moments,
  .archstats,
  .devstats,
  .cta__facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .intergrid {
    grid-template-columns: 1fr;
  }

  .interior--wide {
    grid-column: auto;
  }

  .amrows__mediawrap {
    position: relative;
    top: 0;
    order: -1;
  }

  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .residences__shade {
    background: linear-gradient(180deg, rgba(8, 16, 11, .5), rgba(8, 16, 11, .8));
  }

  .pinsec__frame {
    width: 84vw;
    height: 52vh;
  }

  .moments li {
    padding-top: 12px;
  }
}

@media (max-width: 520px) {

  .moments,
  .archstats,
  .devstats,
  .cta__facts,
  .footer__cols {
    grid-template-columns: 1fr;
  }
}

/* residences collage — a gentle zoom on hover */
.collage__img:hover img {
  transform: scale(1.07);
}

/* ============================================================
   LOCATION — editorial: headline, one wide film, then a quiet
   walking-distance list. Generous space, hairlines, no boxes.
   ============================================================ */
/* NOTE: no ch-based max-width here — `ch` resolves against THIS element's
   font-size (body ~16px), not the big display face inside, which
   collapsed the heading to ~176px and broke it one word per line. */
.loc__head {
  max-width: min(90%, 900px);
}

.loc__head .disp em {
  font-style: italic;
  color: var(--leaf-ink);
}

.loc__hero {
  position: relative;
  overflow: hidden;
  margin: clamp(34px, 6vh, 72px) 0 clamp(28px, 4vh, 52px);
  aspect-ratio: 21/9;
}

.loc__hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}

.loc__hero:hover video {
  transform: scale(1.06);
}

/* ---- map beside the walking list --------------------------------------
   Two columns: the map holds the left, the address and walk times the right.
   Pairing them side by side is what makes a squarish map work — it reads as
   a panel next to its key rather than a wide band that has to fill the page.
   No fixed aspect ratio and height:auto, so whatever artwork is dropped in
   keeps its own proportions and is never cropped. */
.loc__split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(30px, 5vh, 64px);
}

.loc__map {
  position: relative;
  margin: 0;
  overflow: hidden;
  cursor: zoom-in;
  border-radius: 2px;
  background: #f8f6f4;
}

.loc__map img {
  width: 100%;
  height: auto;
  display: block;
}

.loc__side {
  min-width: 0;
}

/* single column inside the narrower right-hand track */
.loc__side .loc__meta {
  display: block;
  padding-bottom: clamp(22px, 3vh, 34px);
}

.loc__side .loc__lead {
  max-width: none;
  margin-top: 10px;
}

/* The three-across row (time | name | description) was written for the full
   page width. In the right-hand track it squeezes both text columns and the
   names start wrapping mid-phrase ("Mary Brickell / Village"). Inside the
   split the description drops under the name so each gets the full width. */
.loc__side .walk__row {
  grid-template-columns: 104px 1fr;
  row-gap: 5px;
  column-gap: clamp(14px, 1.6vw, 24px);
  align-items: baseline;
}

.loc__side .walk__desc {
  grid-column: 2;
}

.loc__side .walk__name {
  font-size: clamp(19px, 1.6vw, 25px);
}

@media (max-width: 900px) {

  /* stack: map first, then the walking list underneath */
  .loc__split {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vh, 40px);
  }
}

.loc__meta {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
  padding-bottom: clamp(34px, 5vh, 62px);
}

/* Italiana is a high-contrast DISPLAY face: tiny counters, hairline strokes,
   no real caps distinction. It was inheriting down here from the older
   .loc__addr rule above and rendering an address at 12px under .2em tracking —
   the least readable string on the page (2.07:1). Addresses are data: set them
   in the text face, at a text size, with text tracking. */
.loc__addr {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  line-height: 1.75;
}

.loc__lead {
  color: var(--ink-soft);
  line-height: 1.75;
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 52ch;
}

/* the walking list — one hairline per row, nothing else */
.walk {
  position: relative;
  list-style: none;
  counter-reset: none;
}

.walk__row {
  display: grid;
  grid-template-columns: 130px 1.1fr 1fr;
  align-items: baseline;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(20px, 2.8vh, 30px) 0;
  border-top: 1px solid var(--line);
  transition: padding-left .5s cubic-bezier(.22, .61, .36, 1);
}

.walk__row:last-child {
  border-bottom: 1px solid var(--line);
}

.walk__row:hover {
  padding-left: 14px;
}

.walk__time {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.walk__time b {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  transition: color .4s ease;
}

.walk__time i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.walk__name {
  font-family: var(--font-brand);
  font-size: clamp(19px, 2vw, 28px);
  color: var(--ink);
  transition: color .4s ease;
}

.walk__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.walk__row:hover .walk__time b,
.walk__row:hover .walk__name {
  color: var(--gold);
}

@media (max-width: 820px) {
  .loc__meta {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .loc__hero {
    aspect-ratio: 4/3;
  }

  .walk__row {
    grid-template-columns: 92px 1fr;
    row-gap: 6px;
  }

  .walk__desc {
    grid-column: 2;
  }
}

/* external-link buttons (e.g. Open Dropbox) */
.btn--ext {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn__ext {
  width: 15px;
  height: 15px;
  flex: none;
  display: block;
}

/* ============================================================
   SECTION SEAMS — a soft tonal bleed so light/dark bands hand off
   to each other instead of hard-cutting. Purely decorative.
   ============================================================ */
.sec,
.loc,
.collage,
.feature__body {
  position: relative;
}

.sec--deep::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(60px, 9vh, 130px);
  background: linear-gradient(180deg, rgba(0, 0, 0, .22), transparent);
  pointer-events: none;
}

/* the light act gets a matching soft entry */
.loc::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(60px, 9vh, 130px);
  background: linear-gradient(180deg, rgba(3, 38, 23, .06), transparent);
  pointer-events: none;
}

/* scroll-driven elements get their own compositor layer — stops the
   repaint stutter you feel on long pinned runs */
.fpanel,
.bignote__track,
.collage__img,
.loc__hero video,
.feature__cover video {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* ============================================================
   FINAL POLISH — stack progress, nav active state, film drift
   ============================================================ */

/* nav: the section you're in stays underlined */
.nav__links a.is-current {
  opacity: 1;
}

.nav__links a.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* lightbox for the residences collage */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: rgba(2, 23, 14, .93);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  object-fit: contain;
  transform: scale(.97);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.lightbox.is-open img {
  transform: scale(1);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  color: var(--paper);
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  padding: 14px;
  cursor: pointer;
  opacity: .7;
  transition: opacity .3s;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  opacity: 1;
}

.lightbox__close {
  top: 18px;
  right: 22px;
}

.lightbox__nav--prev {
  left: 14px;
  top: 50%;
}

.lightbox__nav--next {
  right: 14px;
  top: 50%;
}

/* each row carries its own destination photo as a child element, revealed
   beside IT specifically on hover — anchored to the row itself rather than
   the map, so it always lines up with the exact row you're pointing at. It
   pops into the gutter and over the map's edge (the only free space, since
   the list column itself is too narrow to hold a preview without covering
   the row's own description text). */
.walk__row {
  position: relative;
}

.walk__peek {
  position: absolute;
  z-index: 4;
  left: 70%;
  top: 50%;
  margin-right: clamp(14px, 1.6vw, 24px);
  width: clamp(150px, 16vw, 240px);
  aspect-ratio: 4/3;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-50%) translateX(12px);
  pointer-events: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
  box-shadow: 0 24px 60px rgba(6, 14, 10, .24);
}

.walk__row:hover .walk__peek {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.walk__peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .walk__peek {
    display: none;
  }
}

/* ---- "A Day at Parkside" hidden (temporary) --------------------------
   display:none rather than opacity:0 (which is what the hero lockup needs)
   because this is a whole section — it must not hold layout height, and its
   pool-day.mp4 must not download.
   The nav/menu "Lifestyle" entries existed only to reach this block, so they
   are hidden with it — repointing them at another section would have left two
   nav items underlining at once, since every other section already has its
   own link. (The footer's "Location" also aimed here; that one was simply
   wrong and now points at #location, so it stays fixed either way.)
   TO RESTORE: delete this whole rule — block and links come back together. */
#day,
.nav__links a[href="#day"],
.menu__links a[href="#day"] {
  display: none;
}

/* ---- hero lockup hidden everywhere ------------------------------------
   The film plays in full at every size and resolves onto its own Parkside
   wordmark, so this overlay would always be a second, offset copy.
   There used to be an aspect-ratio split here that revealed the overlay on
   narrow screens (where the film's own mark gets cropped) and stopped the
   film early to avoid doubling up. That was dropped deliberately: it meant
   phone and tablet visitors never saw the reveal animation at all, which is
   the whole point of the film.
   Hidden with opacity rather than `display:none` ON PURPOSE: this <h1> is the
   page's ONLY h1, and display:none would drop it out of the document outline
   and out of search results. `!important` because hero()'s reveal timeline
   animates this element's opacity inline.
   TO RESTORE: delete this one rule. */
.hero__mark {
  opacity: 0 !important;
  pointer-events: none;
}

/* keyboard focus that matches the brand instead of the default ring */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.epanel:focus-visible {
  outline-offset: -3px;
}

/* gold is a 2.07 accent on the light bands — a focus ring has to be visible
   against whatever it lands on, so the light sections get the ink variant */
.sec:not(.sec--dark) :focus-visible,
.loc :focus-visible,
.collage :focus-visible {
  outline-color: var(--gold-ink);
}


/* ============================================================
   POLISH LAYER — touch, press feedback, and mobile legibility.
   Appended last so it settles the cascade deliberately.
   ============================================================ */

/* ---- 1. Press feedback ------------------------------------------------
   Every pressable thing confirms it heard you, instantly. The existing
   .btn transition ran transform at 350ms alongside its colour fades, which
   is far too slow to read as a press — feedback wants 100–160ms. Colour
   keeps the slower fade; transform gets its own fast curve. */
.btn,
.nav__cta,
.film__sound,
.eform__btn {
  transition: background .35s ease, color .35s ease, border-color .35s ease,
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.btn:active,
.nav__cta:active,
.film__sound:active,
.eform__btn:active {
  transform: scale(.97);
}

/* ---- 2. Hover belongs to pointers -------------------------------------
   On a touchscreen :hover latches after a tap and the element stays stuck
   in its hover state. Lift/translate effects are now pointer-only; colour
   changes stay everywhere so tapping still gives feedback. */
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover {
    transform: translateY(-2px);
  }
}

@media not all and (hover: hover) {
  .btn--solid:hover {
    transform: none;
  }
}

/* ---- 3. Touch targets -------------------------------------------------
   WCAG 2.5.5 / Apple HIG want ~44px. The burger (34x25) was the smallest
   control on the page and it is the ONLY way to open the menu on mobile. */
@media (max-width: 1100px) {
  .nav__burger {
    width: 44px;
    height: 44px;
    justify-content: center;
    margin-left: -5px;
    /* keep the bars optically where they were */
  }
}

@media (max-width: 900px) {
  .nav__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .btn {
    min-height: 44px;
  }

  .film__sound {
    min-height: 44px;
  }

  /* .menu__links a already measures 45px — left alone deliberately */
  /* footer nav columns were 27px rows — the densest tap area on the page */
  .footer__col a {
    display: block;
    padding-block: 14px;
  }

  /* phone + email hit areas were 20px tall */
  .menu__aside a,
  .footer__enq a {
    display: inline-block;
    padding-block: 12px;
  }

  /* the logo is a link home — give it a real target */
  .nav__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .field--select select {
    min-height: 44px;
  }

  /* ---- 4. iOS zoom ---------------------------------------------------
     Safari on iOS zooms the whole page whenever a focused field is under
     16px — the layout jumps the moment you tap a field. All nine text
     inputs were 15px. 16px is the threshold, not a preference. */
  .field input,
  .field--select select,
  .eform textarea {
    font-size: 16px;
  }

  /* the consent checkbox was a 13x13 target */
  .eform__consent .check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .eform__consent .check {
    gap: 14px;
    align-items: center;
  }
}

/* ---- 5. Mobile type floor ---------------------------------------------
   Tracked caps shrink hardest on small screens: .nav__cta was 10px and the
   buttons 12px under .18em tracking. Nudged up so the accent labels stay
   readable at arm's length. */
@media (max-width: 600px) {
  .nav__cta {
    font-size: 11px;
    letter-spacing: .16em;
  }

  .btn {
    font-size: 12.5px;
    letter-spacing: .14em;
    padding: 15px 24px;
  }

  .footer__legal {
    font-size: 12px;
    line-height: 1.7;
  }

  .feature__caption {
    font-size: 12px;
  }
}