/* ==========================================================================
   Stevens & Briant — homepage "cinematic" layer (October 2026)
   Loaded after styles.css on the homepage only.

   Adapted from a reference reel of three property sites: full-bleed
   photography with minimal chrome, a scroll film that opens the page (the
   camera comes down from the sky to a front door, js/film.js), a pinned
   scroll story whose chapters read "From ... to ...", words that light up
   as you scroll, slanted portrait reveals, pill controls, and a thin
   progress line with a "Scroll to explore" cue. Every effect is an
   enhancement: with no JS, reduced motion or ?noanim the same content
   renders as a still hero and plain stacked sections.
   ========================================================================== */

/* ---- Header ------------------------------------------------------------- */

/* The floating frosted pill is shared with the inner pages: see "Header"
   in styles.css. */

/* Reading progress: a hairline across the top of the screen. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  height: 2px;
  background: var(--glow);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  pointer-events: none;
}

/* ---- Over the film, the header reads in ink ------------------------------ */

/* The film opens on a bright golden-hour sky, so the transparent header
   uses ink type and the solid appraisal button from the first paint, like
   the pill it turns into. The phone menu keeps its own white-on-ink. */
body.home:not(.nav-open) .site-header:not(.scrolled) { color: var(--ink); --focus-ring: var(--ink); }
@media (min-width: 1101px) {
  body.home .site-header:not(.scrolled):not(.site-header-pinned) .nav-cta {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
  body.home .site-header:not(.scrolled):not(.site-header-pinned) .nav-cta:hover {
    background: var(--ink-soft);
    border-color: var(--ink-soft);
    color: #fff;
  }
}

/* ---- Hero: the scroll film ("sky to front door") ---------------------------

   js/film.js draws the frame that matches the scroll position on the canvas
   and fades the headings with it. Three layouts:
   - html.film-on: a tall section with a sticky full-screen stage. The film
     plays over six screens of scrolling, five and a half on upright
     screens, resting on each scene (js/film.js). html.film-lite (Save-Data
     or 2G) shows the five scene pictures, crossfading, over two and a half
     screens.
   - No class (reduced motion, ?noanim, no JS): one still screen, the
     headline at the top and the buttons at the bottom.
   The opening picture is a bright sky, so the headline and the buttons are
   ink. The headings in between are white on a soft dark shade, and the
   buttons arrive on a paper haze that hands over into the page below. */

.film {
  position: relative;
  /* The opening picture's colours, for the moment before it paints. */
  background: linear-gradient(to bottom, #6f98cd 0%, #a7bfd8 30%, #f1cf9b 45%, #ecdcc8 62%, #d8c3aa 100%);
}
.film-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.film-media,
.film-shade,
.film-haze,
.film-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.film-poster,
.film-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Hidden until js/film.js has drawn a real frame on it, then a quick fade
   (a visitor who scrolled before the frames arrived sees a dissolve, not a
   cut). Lite mode draws the five scenes on it; without a canvas at all
   (film-still) the opening picture stays. */
.film-canvas { display: none; opacity: 0; transition: opacity 0.25s ease; }
html.film-on .film-canvas { display: block; }
html.film-still .film-canvas { display: none; }
.film-canvas.is-live { opacity: 1; }
.film-canvas.is-lost { transition: none; }
.film-shade {
  background: linear-gradient(to top, rgba(12, 14, 16, 0.68) 0%, rgba(12, 14, 16, 0.38) 30%, rgba(12, 14, 16, 0) 58%);
  opacity: 0;
}
.film-haze {
  background: linear-gradient(to top, var(--paper) 0%, rgba(252, 252, 251, 0.92) 16%, rgba(252, 252, 251, 0.6) 36%, rgba(252, 252, 251, 0) 62%);
  opacity: 0;
}
/* The end of the film: the scene fades to paper before the stage lets go,
   so it never shares the screen with the sales figures below it. */
.film-fade {
  background: var(--paper);
  opacity: 0;
}

/* Still hero: the headline at the top, the buttons at the bottom. The
   three lines between them belong to the film (screen readers still read
   them). */
.film-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  /* At least a screen; taller when a short window needs it, never clipped. */
  min-height: 100vh;
  min-height: 100svh;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--header-h) + clamp(12px, 5vh, 64px)) var(--gutter) calc(clamp(28px, 7vh, 84px) + env(safe-area-inset-bottom));
}
html:not(.film-on) .film-beat-line {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.film-haze { opacity: 1; }
html.film-on .film-haze { opacity: 0; }

.film-beat-brand { text-align: center; }
.film-title { color: var(--ink); }
.film-brand {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(48px, min(14.5vw, 17vh), 160px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.film-brand-line { display: block; white-space: nowrap; }
.film-tagline {
  display: block;
  margin-top: clamp(14px, 2.4vh, 28px);
  font-size: clamp(23px, 2.5vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* A soft light halo keeps the thin serif clear of the brightest clouds. */
  text-shadow: 0 0 18px rgba(252, 246, 236, 0.75), 0 0 2px rgba(252, 246, 236, 0.6);
}

.film-line {
  max-width: 15ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.3);
}
.film-line em { font-style: italic; font-weight: 300; letter-spacing: -0.01em; }

.film-cta-title {
  max-width: 14ch;
  font-size: clamp(38px, 4.8vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.film-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 3.6vh, 40px);
}
.film-actions .btn { text-align: center; }
/* The two agents' buttons: one size, one style, side by side. */
.film-calls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.film-call {
  min-width: 10em;
  background: rgba(252, 252, 251, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.film-call:hover { background: var(--ink); color: #fff; }
@media (max-width: 560px) {
  /* Phones: the appraisal across the full width, the two agents under it. */
  .film-actions { flex-direction: column; align-items: stretch; }
  .film-call { min-width: 0; padding-left: 12px; padding-right: 12px; }
}

/* Short laptop windows (1366x768 at 125%, 1366x600): the still hero sizes
   its type off the height so the buttons stay on the first screen. */
@media (min-width: 821px) and (max-height: 700px) {
  html:not(.film-on) .film-brand { font-size: clamp(44px, min(14.5vw, 12.5vh), 160px); }
  html:not(.film-on) .film-tagline { margin-top: 10px; }
  html:not(.film-on) .film-cta-title { font-size: clamp(32px, min(4.8vw, 7vh), 78px); }
}

/* "Scroll to explore", a progress line along the bottom of the screen and
   the skip link belong to the film only. */
.film-cue,
.film-progress,
.film-skip { display: none; }

/* ---- The film itself ------------------------------------------------------- */

/* The scroll length, in screens: tune here. js/film.js paces the rests
   and the camera moves inside it (HOLD, FADE_OUT). */
html.film-on .film {
  --film-screens: 6;
  height: calc((var(--film-screens) + 1) * 100vh);
}
@media (max-aspect-ratio: 1/1) {
  html.film-on .film { --film-screens: 5.5; }
}
html.film-on.film-lite .film { --film-screens: 2.5; }

html.film-on .film-stage {
  position: sticky;
  top: 0;
  /* Covers the screen when a phone's toolbars slide away; the words stay
     inside the smaller, always-visible height below. */
  height: 100vh;
  height: 100lvh;
  min-height: 0;
}
html.film-on .film-copy {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: block;
  max-width: none;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
html.film-on .film-beat {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) calc(clamp(56px, 10vh, 112px) + env(safe-area-inset-bottom));
  will-change: opacity, transform;
}
/* js/film.js owns the fades from here; until it runs only the headline shows. */
html.film-on .film-beat:not(.film-beat-brand) { opacity: 0; }
html.film-on .film-beat.is-live { pointer-events: auto; }
html.film-on .film-beat-brand {
  top: 0;
  bottom: auto;
  padding-top: calc(var(--header-h) + clamp(20px, 7vh, 104px));
}
/* No canvas at all: ink headings over the bright opening picture. */
html.film-still .film-line { color: var(--ink); text-shadow: none; }
/* Very short screens (a small phone turned sideways): a smaller last
   heading, so it clears the header. */
@media (max-height: 420px) {
  html.film-on .film-cta-title { font-size: 30px; }
  html.film-on .film-actions { margin-top: 14px; }
  html.film-on .film-beat { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

.film-cue,
.story-cue {
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.story-cue { display: inline-flex; color: rgba(255, 255, 255, 0.82); }
html.film-on .film-cue {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(20px, 4vh, 40px) + env(safe-area-inset-bottom));
  display: inline-flex;
  transform: translateX(-50%);
  color: rgba(16, 16, 16, 0.8);
  text-shadow: 0 0 14px rgba(252, 246, 236, 0.8);
  white-space: nowrap;
}
/* "Scroll to explore": a small mouse outline with a wheel that drops. */
.hero-cue-mouse {
  position: relative;
  flex: none;
  width: 18px;
  height: 27px;
  border: 1.5px solid currentColor;
  border-radius: 10px;
}
.hero-cue-mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 2px;
  background: currentColor;
  animation: cue-wheel 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cue-wheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (pointer: coarse) {
  .film-cue .hero-cue-mouse { display: none; }
}
/* Phones: the cue sits on the left, clear of the skip link on the right. */
@media (max-width: 560px) {
  html.film-on .film-cue { left: var(--gutter); transform: none; }
}
/* "Skip": a quiet way past the film, on a frosted pill so it reads on
   every scene. It goes once the buttons arrive (js/film.js). */
html.film-on .film-skip {
  position: absolute;
  /* Above the headings: it comes first in the page (first in the tab order),
     and the live heading's box would otherwise take its taps. */
  z-index: 1;
  right: var(--gutter);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--pill);
  background: rgba(252, 252, 251, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
html.film-on .film-skip:hover { background: #fff; }
/* An ink ring with a paper halo, so the focus shows on light and dark scenes;
   a focused link never hides. */
html.film-on .film-skip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(252, 252, 251, 0.85);
}
html.film-on .film-skip.is-gone:focus-visible { opacity: 1; visibility: visible; }
html.film-on .film-skip.is-gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
html.film-on .film-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: block;
  height: 2px;
  background: rgba(16, 16, 16, 0.1);
}
.film-progress span {
  position: absolute;
  inset: 0;
  background: var(--glow);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---- Hero intro (html.hero-intro, set in index.html's <head>) -------------
   Pure CSS, so it starts at first paint rather than after the scripts and
   the web fonts. The headline is never hidden: it is painted at first
   paint, a little low and soft, and pulls into focus with translate and
   blur only, so the intro never holds back the largest paint. The picture
   settles with the canvas inside it, so a frame drawn during the intro
   lines up with the poster under it. Fill "backwards" lets go at the end.
   No class (no JS, reduced motion, ?noanim): nothing moves. */

@keyframes hero-settle { from { scale: 1.08; } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-lift { from { translate: 0 18px; } }
@keyframes hero-focus { from { translate: 0 0.3em; filter: blur(14px); } }

@media (prefers-reduced-motion: no-preference) {
  .hero-intro .film-media {
    animation: hero-settle 1.6s cubic-bezier(0.19, 1, 0.22, 1) backwards;
  }
  .hero-intro .film-brand {
    animation: hero-focus 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0.05s backwards;
  }
  .hero-intro .film-tagline {
    animation: hero-lift 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.2s backwards;
  }
  .hero-intro .film-cue {
    animation: hero-fade 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s backwards;
  }
}

/* ---- Intro statement: words light up as you scroll ----------------------- */

.home .intro { padding-top: clamp(40px, 6vw, 96px); }
.statement .word { display: inline; }
.motion [data-words] .word { color: rgba(16, 16, 16, 0.16); transition: none; }

/* ---- Listings: a softer, rounded feature card ---------------------------- */

.home .card-grid-feature > .prop-card:first-child .prop-media { border-radius: var(--radius-lg); }
.home .card-grid-feature > .prop-card:first-child .prop-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 14px 24px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: none;
  overflow: visible;
}
.home .card-grid-feature > .prop-card:first-child .prop-cta::after { display: none; }

/* Photos drift inside their rounded frames as the card crosses the screen
   (cinema.js). The <picture> is a little taller than the frame so the
   drift never shows an edge; the <img> stays free for motion.js's reveal. */
.home .prop-media picture,
.team-cinema .agent-media picture {
  position: absolute;
  inset: -7% 0;
  display: block;
}
.home .prop-media picture img { width: 100%; height: 100%; object-fit: cover; }
.team-cinema .agent-media { position: relative; }

/* Eyebrow rules ("01 ———") draw themselves in as the heading arrives. */
.eyebrow-num::after { transform-origin: left; transition: transform 1.1s var(--ease) 0.15s; }
.rule-pending .eyebrow-num::after { transform: scaleX(0); }

/* ---- 03 Story ------------------------------------------------------------ */

.story { padding-bottom: clamp(56px, 7vw, 110px); }
.story-head { margin-bottom: clamp(36px, 5vw, 72px); }
.story-head .section-title { max-width: 16ch; }

/* Stacked (default): each chapter is a rounded photo card with its words
   over a dark fade at the bottom. */
.story-chapters {
  list-style: none;
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.story-chapter {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #2A2826;
  color: #fff;
  min-height: min(78vh, 760px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.story-frame { position: absolute; inset: 0; margin: 0; z-index: -1; }
.story-frame picture { display: block; width: 100%; height: 100%; }
.story-frame img { width: 100%; height: 100%; object-fit: cover; }
.story-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 62% at 12% 100%, rgba(10, 10, 10, 0.62), rgba(10, 10, 10, 0) 72%),
    linear-gradient(to top, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.34) 36%, rgba(10, 10, 10, 0) 64%),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.22), rgba(10, 10, 10, 0) 18%);
}
.story-credit {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 1;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.story-text {
  padding: clamp(28px, 4vw, 64px);
  max-width: 760px;
}
.story-num {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: rgba(255, 255, 255, 0.72);
  font-feature-settings: "tnum" 1;
}
.story-title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #fff;
}
.story-title em { font-weight: 300; }
.story-text > p:last-child {
  margin: 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

.story-hud { display: none; }
.story-foot { margin-top: clamp(32px, 4vw, 56px); }
.story-foot .method-cta { margin-top: 0; }

/* Pinned (cinema.js adds .story-pinned on wide screens with motion on):
   one full-screen stage, chapters stacked on top of each other, the HUD
   along the bottom. */
.story-pinned .story-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #1C1B1A;
  color: #fff;
}
.story-pinned .story-chapters {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  max-width: none;
}
.story-pinned .story-chapter {
  position: absolute;
  inset: 0;
  border-radius: 0;
  min-height: 0;
  background: transparent;
  align-items: flex-end;
}
.story-pinned .story-chapter + .story-chapter { visibility: hidden; }
.story-pinned .story-frame { overflow: hidden; }
.story-pinned .story-frame img { will-change: transform; }
.story-pinned .story-text {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) calc(clamp(72px, 12vh, 132px) + 40px);
}
.story-pinned .story-text > * { max-width: 760px; }
.story-pinned .story-credit { bottom: 92px; right: var(--gutter); }

.story-pinned .story-hud {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 76px;
  font-family: var(--sans);
}
.story-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: rgba(255, 255, 255, 0.7);
  font-feature-settings: "tnum" 1;
}
.story-count b { color: #fff; font-weight: 700; }
.story-pinned .story-cue { justify-self: center; }
.story-progress {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}
.story-progress span {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

/* ---- Dusk and dawn: the page darkens through the story and moments ------ */

:root { --night: #141312; }
.tone-shift { position: relative; height: clamp(140px, 26vh, 300px); pointer-events: none; }
/* A pixel of overlap so no paper seam shows where the band meets the night. */
.tone-dusk { margin-bottom: -1px; }
.tone-dawn { margin-top: -1px; }
.tone-dusk { background: linear-gradient(to bottom, var(--paper), #D9D3C9 30%, #6C655D 70%, var(--night)); }
.tone-dawn { background: linear-gradient(to bottom, var(--night), #6C655D 32%, #D9D3C9 70%, var(--paper)); }

.story { background: var(--night); color: #fff; }
.story .section-title { color: #fff; }
.story .eyebrow-light .eyebrow-num { color: #fff; }
.story .text-link,
.moments .text-link { color: #fff; }

/* ---- Moments: illustrative AI clips --------------------------------------- */

.moments {
  background: var(--night);
  color: #fff;
  padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 6vw, 96px);
}
.moments-head { margin-bottom: clamp(32px, 4vw, 64px); }
.moments-head .section-title { color: #fff; max-width: 14ch; }
/* One quiet note for the whole section; the clips themselves carry no
   label (docs/ai-footage.md). */
.moments-note {
  margin-top: 16px;
  max-width: 52ch;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.1px;
  color: rgba(255, 255, 255, 0.56);
}

/* Stacked (default): rounded 16:9 cards, captions over a soft fade. */
.moments-track {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.moment { position: relative; margin: 0; }
.moment-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #26231F;
  isolation: isolate;
}
/* The poster is a lazy <img> (no JS needed, nothing fetched early); the
   clip sits on top and fades in once it is actually playing. */
.moment-frame { position: absolute; inset: 0; }
.moment-poster,
.moment-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moment-video { opacity: 0; transition: opacity 0.6s ease; }
.moment-video.is-playing { opacity: 1; }
.moment-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 10% 100%, rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0) 70%),
    linear-gradient(to top, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0) 45%);
  pointer-events: none;
}
.moment-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 6px;
  padding: clamp(20px, 3vw, 44px);
  max-width: 640px;
}
.moment-num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: rgba(255, 255, 255, 0.72);
  font-feature-settings: "tnum" 1;
}
.moment-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
}
.moment-title em { font-style: italic; font-weight: 300; }
.moment-sub { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }

.moments-hud { display: none; }
.moments-foot { margin-top: clamp(20px, 2.5vw, 36px); }
.moments-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--pill);
  background: transparent;
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.moments-toggle::before {
  content: "";
  width: 10px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.moments-toggle[data-state="paused"]::before {
  width: 0;
  height: 0;
  border-left: 11px solid currentColor;
  border-right: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.moments-toggle:hover { border-color: #fff; }

/* Pinned film strip (cinema.js adds .moments-pinned on wide screens with
   motion on): one full-screen stage, the cards in a row that slides past. */
.moments-pinned .moments-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.moments-pinned .moments-track {
  --card-w: min(76vw, 1240px);
  --gap: 4vw;
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  gap: var(--gap);
  max-width: none;
  padding: 0 calc((100vw - var(--card-w)) / 2);
  transform: translateY(-50%);
}
.moments-pinned .moment { flex: 0 0 var(--card-w); }
.moments-pinned .moment-media { aspect-ratio: auto; height: min(calc(var(--card-w) * 9 / 16), 74svh); }
/* The heading sits over the top of the stage while the first window is
   small, and lifts away as it opens (cinema.js). */
.moments-pinned .moments-head {
  position: absolute;
  top: clamp(56px, 8vh, 96px);
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0 auto;
  text-align: center;
}
.moments-pinned .moments-head .section-title { max-width: none; }
.moments-pinned .moments-note { margin-left: auto; margin-right: auto; }
.moments-pinned .moments-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
}

/* ---- 04 Team: equal portraits on paper ----------------------------------- */

.team-cinema { background: var(--paper); color: var(--ink); }
.team-cinema .team-copy { grid-column: auto; }
/* Wide screens: the pair sits in the right three-quarters of the grid, an
   editorial offset under the left-hand heading, so the 800px portraits are
   never stretched past their size. */
@media (min-width: 1101px) {
  .team-cinema .team-copy {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .team-cinema .team-copy .team-grid { grid-column: 4 / -1; }
}
.team-cinema .team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}
.team-cinema .agent-card { display: grid; gap: 28px; align-content: start; }
.team-cinema .agent-media {
  margin: 0;
  aspect-ratio: 4 / 4.4;
  border-radius: var(--radius-lg);
  background: #E6E4E0;
  overflow: hidden;
}
.team-cinema .agent-media picture { display: block; width: 100%; height: 100%; }
.team-cinema .agent-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: none;
  transition: transform 1.2s var(--ease);
}
.team-cinema .agent-card:hover .agent-media img { transform: scale(1.03); filter: none; }
.team-cinema .agent-info { border-top: 1px solid var(--hairline); padding-top: 26px; }
.team-cinema .agent-info h3 { font-size: clamp(30px, 2.8vw, 42px); color: var(--ink); }
.team-cinema .agent-role { color: var(--grey); }
.team-cinema .agent-bio { color: var(--grey); }
.team-cinema .agent-contact a { color: var(--ink); }

/* ---- 05 Reviews ----------------------------------------------------------- */

/* Review tiles, stat tiles, pill chips and soft form fields are shared with
   the inner pages: see styles.css. */

/* ---- 06 Suburbs: the cursor photo gets a rounded frame ------------------- */

.area-preview { border-radius: var(--radius-md); box-shadow: 0 30px 60px -30px rgba(16, 16, 16, 0.45); }

/* ---- 07 Report ------------------------------------------------------------ */

.home .report-card { border-radius: var(--radius-lg); border-color: var(--hairline); box-shadow: 0 30px 80px -50px rgba(16, 16, 16, 0.35); }
.home .report-cover img { border-radius: 10px; }
.home .report-cover::before { border-radius: 10px; }
.home .report-badge { border-radius: var(--pill); }

/* ---- 08 Appraisal: under a warm sky ---------------------------------------- */

.home #appraisal {
  /* A tall sky that cinema.js slides through: pale at the top of the band,
     golden by the time you reach the buttons. */
  background: linear-gradient(to bottom, var(--paper) 0%, #EEF1F2 16%, #F1ECE4 40%, var(--sky-low) 62%, #F0D3B0 84%, #EBC79F 100%);
  background-size: 100% 220%;
  background-position: 50% 0%;
}
.home .appraisal-choice {
  border-radius: var(--radius-lg);
  border-color: rgba(16, 16, 16, 0.1);
  box-shadow: 0 24px 60px -40px rgba(16, 16, 16, 0.4);
}
.home .appraisal-choice-primary { border-color: var(--ink); }

/* ---- Footer: the wordmark becomes a window onto a dusk photo ---------------- */

/* cinema.js adds .is-near as the footer approaches, so the photo is not
   fetched with the page. Without it (no JS, reduced motion) the mark stays
   plain white type. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home .footer-mark[data-photo].is-near {
    background-image: image-set(url("../assets/img/cinema/story-door-960.webp") type("image/webp"), url("../assets/img/cinema/story-door-1280.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: 50% 40%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ---- Phone call bar: pills ------------------------------------------------- */

@media (max-width: 820px) {
  .home .mobile-cta a { border-radius: var(--pill); }
  .home .mobile-cta { border-top: 0; box-shadow: 0 -10px 30px -20px rgba(16, 16, 16, 0.3); }
}

/* ---- Responsive -------------------------------------------------------------- */

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

@media (max-width: 820px) {
  .story-chapter { min-height: 72svh; }
  .story-credit { top: 18px; bottom: auto; right: 18px; }
  .story-title { font-size: clamp(40px, 11vw, 64px); }
  .story-text { padding: 24px 22px 26px; }
  .story-text > p:last-child { font-size: 16px; }
}

@media (max-width: 640px) {
  .moment-media { aspect-ratio: 4 / 5; }
  .moment-caption { padding: 22px; }
  .team-cinema .team-grid { grid-template-columns: 1fr; }
  .team-cinema .agent-media { aspect-ratio: 1 / 1; }
}

/* ---- Reduced motion and ?noanim: everything still, nothing hidden ----------- */

@media (prefers-reduced-motion: reduce) {
  .hero-cue-mouse::after { animation: none; }
}