/* Skycrest Homes homepage, version B: alternating cinema.

   Full-screen photography under dark scrims, separated by short, quiet, light
   strips. Depends on tokens.css + components.css and deliberately does NOT
   load site.css, so the small set of base rules v1 keeps there (reset, grain,
   drawer, story player, word rise) is duplicated here rather than shared.
   Everything page-specific is namespaced .v2-* so the two versions can never
   collide while both are deployed.

   The two v1 motion rules still govern every keyframe:
   1. Scroll-driven endpoints must resolve neutral when their token collapses,
      because reduced motion forces animation-duration to 1ms and a progress
      timeline then holds its 100% keyframe forever.
   2. Animations never touch a property a hover or reveal transitions. */

:root {
  --v2-display-hero: clamp(3.5rem, 9.5vw, 9.5rem);
  --v2-frame-inset: clamp(12px, 2vw, 24px);
  --v2-display-xl: clamp(2.5rem, 6.5vw, 6rem);
  --v2-display-lg: clamp(2.125rem, 4.5vw, 4rem);
  --v2-display-panel: clamp(1.9rem, 3.6vw, 3.25rem);
  --v2-numeral: clamp(3.5rem, 7vw, 6.5rem);
  --v2-panel-h: 88svh;
  --v2-parallax: 5svh;
  --v2-settle: 1.06;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --v2-parallax: 0svh;
    --v2-settle: 1;
  }
}

/* ── Base, duplicated from site.css ─────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sk-white);
  color: var(--sk-ink);
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-base);
  line-height: var(--sk-leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

/* Paper grain: one fixed SVG-noise layer, over content, under chrome. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--sk-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

img,
video {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--sk-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

.sk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--sk-space-2) var(--sk-space-3);
  background: var(--sk-white);
  color: var(--sk-ink);
  font-size: var(--sk-text-sm);
}
.sk-skip:focus {
  left: var(--sk-space-2);
  top: var(--sk-space-2);
}

.sk-container {
  width: 100%;
  max-width: var(--sk-container);
  margin-inline: auto;
  padding-inline: var(--sk-space-4);
}
.sk-container--wide {
  max-width: var(--sk-container-wide);
}

/* Header chrome, duplicated from site.css. components.css has the header
   frame; these are the parts v1 keeps page-side: logo sizing, the white logo
   over the transparent state, the hamburger bars, and the CTA hide. */
.sk-header__brand img {
  width: 104px;
  transition: filter var(--sk-duration-base) var(--sk-ease-standard);
}
/* :not(.is-open) matters. Open the drawer at the very top of the page and the
   header is still transparent and not yet stuck, so a white logo would sit on
   the drawer's white panel and vanish. */
.sk-header--transparent:not(.is-stuck):not(.is-open) .sk-header__brand img {
  filter: brightness(0) invert(1);
}

@media (max-width: 1024px) {
  .sk-header__cta {
    display: none;
  }
}

.sk-header__toggle span,
.sk-header__toggle span::before,
.sk-header__toggle span::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--sk-white);
  transition: transform var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-header__toggle span::before,
.sk-header__toggle span::after {
  content: '';
  position: relative;
}
.sk-header__toggle span::before {
  top: -7px;
}
.sk-header__toggle span::after {
  top: 5.5px;
}
.sk-header.is-stuck .sk-header__toggle span,
.sk-header.is-stuck .sk-header__toggle span::before,
.sk-header.is-stuck .sk-header__toggle span::after,
.sk-header.is-open .sk-header__toggle span,
.sk-header.is-open .sk-header__toggle span::before,
.sk-header.is-open .sk-header__toggle span::after {
  background: var(--sk-ink);
}
.sk-header.is-open .sk-header__toggle span {
  background: transparent;
}
.sk-header.is-open .sk-header__toggle span::before {
  top: -1.5px;
  transform: rotate(45deg);
}
.sk-header.is-open .sk-header__toggle span::after {
  top: -3px;
  transform: rotate(-45deg);
}

/* Mobile drawer, duplicated from site.css */
.sk-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--sk-space-4);
  padding: var(--sk-space-12) var(--sk-space-4) var(--sk-space-8);
  overflow-y: auto;
  background: var(--sk-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition:
    opacity var(--sk-duration-base) var(--sk-ease-standard),
    transform var(--sk-duration-base) var(--sk-ease-standard),
    visibility var(--sk-duration-base);
}
.sk-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sk-drawer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sk-drawer__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-3xl);
  letter-spacing: var(--sk-tracking-tight);
  text-decoration: none;
  color: var(--sk-ink);
}
.sk-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-2);
  align-items: flex-start;
  padding-top: var(--sk-space-4);
  border-top: 1px solid var(--sk-line);
}
.sk-drawer__phone {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--sk-text-xl);
  font-weight: 500;
  text-decoration: none;
  color: var(--sk-primary);
}
@media (min-width: 1201px) {
  .sk-drawer {
    display: none;
  }
}

/* Footer lockup, duplicated from site.css: "HOMES" is charcoal and would all
   but disappear on ink, so the dark footer gets the solid-white treatment. */
.sk-footer__brand img {
  width: 132px;
  filter: brightness(0) invert(1);
}

/* Small screens, duplicated from site.css */
@media (max-width: 720px) {
  .sk-container {
    padding-inline: var(--sk-space-3);
  }
  .sk-drawer__link {
    font-size: var(--sk-text-2xl);
  }
}

/* Story film, duplicated from site.css. Click to play, never touches LCP. */
.sk-story {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--sk-ink);
}
.sk-story__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.sk-story__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sk-duration-cinematic) var(--sk-ease-standard);
}
.sk-story__poster:hover img {
  transform: scale(1.03);
}
.sk-story__poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 35, 43, 0.6), rgba(22, 35, 43, 0.12));
}
.sk-story__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sk-space-2);
  color: var(--sk-white);
  pointer-events: none;
}
.sk-story__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--sk-radius-pill);
  /* Deeper than v1's 0.35: white glyph must hold 3:1 over a forced-white
     poster pixel, and 0.55 ink lands it at 4.1:1. */
  background: rgba(11, 20, 26, 0.55);
  transition:
    background-color var(--sk-duration-base) var(--sk-ease-standard),
    transform var(--sk-duration-base) var(--sk-ease-standard);
}
.sk-story__poster:hover .sk-story__icon {
  background: var(--sk-primary);
  transform: scale(1.06);
}
.sk-story__icon svg {
  margin-left: 4px;
}
.sk-story__label {
  font-size: var(--sk-text-xs);
  letter-spacing: var(--sk-tracking-widest);
  text-transform: uppercase;
  /* The label sits mid-poster where the scrim thins to ~0.38, which is 2.3:1
     over a forced-white pixel. The pill carries its own floor: 6.5:1. */
  padding: 0.5rem 0.875rem;
  border-radius: var(--sk-radius-pill);
  background: rgba(11, 20, 26, 0.68);
}
.sk-story video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sk-story.is-playing .sk-story__poster,
.sk-story.is-playing .sk-story__play {
  display: none;
}

/* ── 1. Hero ────────────────────────────────────────────────────────────── */

.v2-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: var(--sk-space-20) 0 var(--sk-space-12);
  /* clip, not hidden: hidden would turn the hero into a scroll container and
     capture the anonymous view() timeline on the media below. */
  overflow: clip;
  isolation: isolate;
  background: var(--sk-ink);
}

.v2-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.v2-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stronger upper stops than v1. This hero stacks eyebrow, three headline
   lines, subhead and buttons, so on a short phone viewport the eyebrow tops
   out around 93% of the frame where v1's 0.55 tail would leave a forced white
   pixel at 4.3:1. At these stops the white 13px eyebrow holds 5.2:1 there and
   6.5:1 at its desktop position. */
.v2-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(22, 35, 43, 0.92) 0%,
    rgba(22, 35, 43, 0.78) 50%,
    rgba(22, 35, 43, 0.64) 100%
  );
}

/* A hairline keyline just inside the photo edge. Pure chrome: it frames the
   frame. z-index 0 keeps it above the scrim; the content never reaches it
   because the hero's own padding is wider than the inset at every width. */
.v2-hero::before {
  content: '';
  position: absolute;
  inset: var(--v2-frame-inset);
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
@media (max-width: 720px) {
  .v2-hero::before {
    content: none;
  }
}

/* Sky at 13px cannot hold 4.5:1 against a worst-case pixel this high in the
   frame, so over photography the eyebrow is white; sky stays the eyebrow
   colour on the solid dark papers, where it composites at 9.7:1. The leading
   hairline gives the one-axis stack a visible anchor point. */
.v2-hero .sk-eyebrow--onDark {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-space-2);
  color: var(--sk-white);
}
.v2-hero .sk-eyebrow--onDark::before {
  content: '';
  width: 56px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}

/* One axis. Everything in the hero hangs off the same left edge: the v1
   editorial offset read as unintentional, so v2 does not stagger anything. */
.v2-hero__inner {
  width: 100%;
  max-width: var(--sk-container-wide);
  margin-inline: auto;
  padding-inline: var(--sk-space-4);
}

.v2-hero__headline {
  margin: 0;
  max-width: 14ch;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--v2-display-hero);
  line-height: var(--sk-leading-display);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-white);
  text-wrap: balance;
}

.v2-hero__headline .sk-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Room above and below so ascenders and descenders are not clipped by the
     reveal mask; the negative margin keeps the line spacing unchanged. */
  padding-block: 0.14em;
  margin-block: -0.14em;
}
.v2-hero__headline .sk-word > span {
  display: inline-block;
  transform: translateY(100%);
  animation: v2-word-rise var(--sk-duration-cinematic) var(--sk-ease-entrance) forwards;
  animation-delay: calc(var(--sk-word-index, 0) * var(--sk-stagger) + var(--sk-duration-instant));
}
@keyframes v2-word-rise {
  to {
    transform: none;
  }
}

.v2-hero__subhead {
  margin: var(--sk-space-4) 0 0;
  max-width: 40ch;
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-relaxed);
  color: rgba(255, 255, 255, 0.86);
}

.v2-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-2);
  margin-top: var(--sk-space-5);
}

.sk-hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--sk-space-4);
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.sk-hero__scroll-line {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--sk-sky);
  animation: v2-scroll-cue 2.4s var(--sk-ease-standard) infinite;
}
@keyframes v2-scroll-cue {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(250%);
  }
}

/* ── Light strips ───────────────────────────────────────────────────────── */

/* The pause between photographs. Everything centred on one axis and set at
   full measure, so no side of the strip is ever an empty column. */
.v2-strip {
  padding: clamp(5rem, 14vh, 9rem) var(--sk-space-4);
  background: var(--sk-paper-bone);
  text-align: center;
}

/* 52rem rather than the narrow container: the headers inside stay on their
   own tighter ch maxes either way. */
.v2-strip__inner {
  max-width: 52rem;
  margin-inline: auto;
}

.v2-strip__title {
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--v2-display-lg);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-tightest);
  color: var(--sk-ink-deep);
  text-wrap: balance;
}

/* The stakes line runs longer than the 20ch statement tier; 28ch lets it
   break as two full lines instead of four ragged ones. */
.v2-strip__title--wide {
  max-width: 28ch;
}

.v2-strip__body {
  margin: var(--sk-space-4) auto 0;
  max-width: 46ch;
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-relaxed);
  color: var(--sk-slate);
}

/* ── 2. Problem: the manifest ──────────────────────────────────────────────
   A full-measure editorial index rather than a centred strip: headline block
   on the left axis, then three ledger rows that use the whole container —
   numeral, failure mode and its cost each in their own column, separated by
   hairlines that draw on reveal. Every measure is filled by type, so the
   section reads as a spread rather than a floating paragraph. */
.v2-manifest {
  padding: clamp(5rem, 14vh, 9rem) var(--sk-space-4);
  background: var(--sk-paper-bone);
}

.v2-manifest__inner {
  max-width: var(--sk-container-wide);
  margin-inline: auto;
}

.v2-manifest__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--v2-display-xl);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-tightest);
  color: var(--sk-ink-deep);
  text-wrap: balance;
}

.v2-manifest__lede {
  margin: var(--sk-space-4) 0 0;
  max-width: 44ch;
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-relaxed);
  color: var(--sk-slate);
}

.v2-manifest__list {
  margin: clamp(var(--sk-space-8), 10vh, var(--sk-space-12)) 0 0;
  padding: 0;
  list-style: none;
}

.v2-manifest__row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3rem, 8vw, 7rem) minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(var(--sk-space-4), 4vw, var(--sk-space-8));
  align-items: baseline;
  padding-block: clamp(var(--sk-space-5), 6vh, var(--sk-space-6));
}

/* Hairlines are drawn spans rather than borders so the [data-sk-reveal='rule']
   draw applies; absolute so a scaling 1px line can never nudge row layout. */
.v2-manifest__rule {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--sk-line);
}
.v2-manifest__rule--end {
  inset: auto 0 0;
}

.v2-manifest__num {
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  font-weight: 600;
  letter-spacing: var(--sk-tracking-widest);
  color: var(--sk-primary);
  font-variant-numeric: tabular-nums;
}

.v2-manifest__name {
  margin: 0;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--v2-display-panel);
  line-height: var(--sk-leading-snug);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-ink-deep);
  text-wrap: balance;
}

.v2-manifest__note {
  margin: 0;
  max-width: 40ch;
  font-size: var(--sk-text-base);
  line-height: var(--sk-leading-relaxed);
  color: var(--sk-slate);
}

@media (max-width: 720px) {
  .v2-manifest__row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .v2-manifest__name {
    grid-column: 2;
  }
  .v2-manifest__note {
    grid-column: 2;
    margin-top: var(--sk-space-2);
  }
}

/* ── 3. Guide: full-height photo split ──────────────────────────────────── */

.v2-guide {
  display: grid;
  grid-template-columns: 45fr 55fr;
  min-height: 100svh;
  background: var(--sk-paper-bone);
}

.v2-guide__media {
  position: relative;
  overflow: clip;
}
.v2-guide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-guide__body {
  align-self: center;
  padding: clamp(4rem, 10vh, 7rem) clamp(2rem, 7vw, 7rem);
  max-width: 44rem;
}

.v2-guide__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--v2-display-lg);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-tightest);
  color: var(--sk-ink-deep);
  text-wrap: balance;
}

.v2-guide__copy {
  margin: var(--sk-space-4) 0 0;
  max-width: 52ch;
  color: var(--sk-slate);
}

.v2-guide .sk-stats {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sk-space-4) var(--sk-space-6);
  margin-top: var(--sk-space-8);
}

.v2-guide__signoff {
  margin: var(--sk-space-8) 0 0;
  font-size: var(--sk-text-sm);
  font-weight: 500;
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  color: var(--sk-slate-muted);
}

@media (max-width: 860px) {
  .v2-guide {
    grid-template-columns: 1fr;
  }
  .v2-guide__media {
    height: 60svh;
  }
  .v2-guide__body {
    padding: var(--sk-space-8) var(--sk-space-4) var(--sk-space-10);
  }
}

/* ── 4. Plan: four split rows ───────────────────────────────────────────── */

.v2-plan {
  background: var(--sk-paper-limestone);
  padding-block: clamp(4rem, 10vh, 7rem);
}

.v2-plan__intro {
  max-width: var(--sk-container-narrow);
  margin-inline: auto;
  padding-inline: var(--sk-space-4);
  text-align: center;
}

.v2-plan__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

/* Image left, text right, all four rows on the same axis. Alternating sides
   is the obvious move and precisely the restlessness this page avoids. */
.v2-row {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: var(--sk-container-wide);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--sk-space-4);
}

.v2-frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--sk-limestone);
}
.v2-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-row__number {
  display: block;
  font-family: var(--sk-font-display);
  font-weight: 300;
  font-size: var(--v2-numeral);
  line-height: 0.9;
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-primary);
  font-variant-numeric: tabular-nums;
}

.v2-row__title {
  margin: var(--sk-space-2) 0 0;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-display-md);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-ink-deep);
}

.v2-row__body {
  margin: var(--sk-space-2) 0 0;
  max-width: 38ch;
  color: var(--sk-slate);
}

.v2-plan__more {
  margin-top: var(--sk-space-6);
  text-align: center;
}

@media (max-width: 860px) {
  .v2-row {
    grid-template-columns: 1fr;
    gap: var(--sk-space-3);
  }
}

/* ── 5. Work: the centerpiece ───────────────────────────────────────────── */

/* A dark intro strip announces the cinema block the panels then deliver. */
.v2-strip--dark {
  background: var(--sk-paper-dark);
}
.v2-strip--dark .v2-strip__title {
  color: var(--sk-white);
}
.v2-strip--dark .v2-strip__body {
  color: rgba(255, 255, 255, 0.72);
}

.v2-panel {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background: var(--sk-ink);
}

/* Extended above and below by exactly the parallax travel so the drift can
   never expose a gap at either edge. */
.v2-panel__media {
  position: absolute;
  inset: calc(var(--v2-parallax) * -1) 0;
  z-index: -2;
}
.v2-panel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom-weighted scrim tuned against a forced white pixel. The 0.88 floor
   holds flat through 26% because the label bar tops out near 24% on desktop:
   white type inside the hold composites to 13.4:1. On a 72svh mobile panel
   the location line rides up to ~36%, where the ramp still gives 0.66 and
   white 5.9:1. Mid-frame stays near-clear because no text ever sits there. */
.v2-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(11, 20, 26, 0.88) 0%,
    rgba(11, 20, 26, 0.88) 26%,
    rgba(11, 20, 26, 0.3) 52%,
    rgba(11, 20, 26, 0.06) 100%
  );
}

.v2-panel__inner {
  display: flex;
  align-items: flex-end;
  min-height: var(--v2-panel-h);
  max-width: var(--sk-container-wide);
  margin-inline: auto;
  padding: var(--sk-space-8) var(--sk-space-4) var(--sk-space-6);
}

.v2-panel__meta {
  width: 100%;
  max-width: 44rem;
}

/* The hairline carries the sky accent instead of the location line: it is
   decorative, so it owes no contrast ratio, while 12px caps over a photo do. */
.v2-panel__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: var(--sk-space-3);
  background: rgba(136, 211, 242, 0.55);
}

.v2-panel__location {
  margin: 0 0 var(--sk-space-1);
  font-size: var(--sk-text-xs);
  font-weight: 500;
  letter-spacing: var(--sk-tracking-widest);
  text-transform: uppercase;
  color: var(--sk-white);
}

.v2-panel__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--v2-display-panel);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-white);
  text-wrap: balance;
}

/* Entrance: the whole panel wipes open while the photo settles from 1.06 to
   rest. The wipe rides the shared [data-sk-reveal='wipe'] rule in
   components.css; only the inner settle is defined here, mirroring the
   .sk-project__image pattern. scale, not transform: the parallax animation
   owns transform on the parent media box and this element must stay clear. */
:where(.sk-js) [data-sk-reveal='wipe'] .v2-panel__img {
  scale: var(--v2-settle);
  transition: scale var(--sk-duration-cinematic) var(--sk-ease-standard);
}
[data-sk-reveal='wipe'].is-revealed .v2-panel__img {
  scale: 1;
}

/* Detail pair on the same dark ground, so the block reads as one sequence. */
.v2-details {
  background: var(--sk-ink);
  padding: var(--sk-space-2) 0 0;
}
.v2-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sk-space-2);
  max-width: var(--sk-container-wide);
  margin-inline: auto;
  padding-inline: var(--sk-space-4);
}
.v2-details figure {
  margin: 0;
}
.v2-details figcaption {
  padding-top: var(--sk-space-2);
  font-size: var(--sk-text-xs);
  letter-spacing: var(--sk-tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.v2-details .v2-frame {
  background: var(--sk-ink-deep);
}

.v2-work__more {
  background: var(--sk-ink);
  padding: var(--sk-space-8) var(--sk-space-4) var(--sk-space-10);
  text-align: center;
}

@media (max-width: 860px) {
  .v2-panel__inner {
    min-height: 72svh;
  }
  .v2-details__grid {
    grid-template-columns: 1fr;
  }
}

/* ── 6. Film ────────────────────────────────────────────────────────────── */

.v2-film {
  background: var(--sk-paper-dark);
  padding: clamp(4rem, 10vh, 7rem) var(--sk-space-4);
}
.v2-film__inner {
  max-width: var(--sk-container-wide);
  margin-inline: auto;
}
.v2-film__eyebrow {
  text-align: center;
}
.v2-film__quote {
  max-width: 62ch;
  margin: var(--sk-space-8) auto 0;
  text-align: center;
}
.v2-film__quote .sk-testimonial__quote p {
  text-indent: 0;
}
.v2-film__quote .sk-testimonial__attribution {
  justify-content: center;
}

/* ── 8. CTA ─────────────────────────────────────────────────────────────── */

.v2-cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 92svh;
  padding: var(--sk-space-16) var(--sk-space-4);
  overflow: clip;
  isolation: isolate;
  background: var(--sk-ink-deep);
  text-align: center;
}

.v2-cta__media {
  position: absolute;
  inset: calc(var(--v2-parallax) * -1) 0;
  z-index: -2;
}
.v2-cta__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The stack sits mid-frame, so unlike the hero the scrim has to hold its
   strength through the middle stop, not just at the floor. Worst case white
   pixel at the 0.84 stop: sky eyebrow 5.1:1, white body 8.4:1. */
.v2-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(11, 20, 26, 0.94) 0%,
    rgba(11, 20, 26, 0.84) 55%,
    rgba(11, 20, 26, 0.62) 100%
  );
}

.v2-cta__inner {
  max-width: var(--sk-container);
}

.v2-cta__headline {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--v2-display-xl);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-white);
  text-wrap: balance;
}

.v2-cta__body {
  margin: var(--sk-space-4) auto 0;
  max-width: 60ch;
  font-size: var(--sk-text-lg);
  color: rgba(255, 255, 255, 0.86);
}

.v2-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sk-space-2);
  margin-top: var(--sk-space-5);
}

.v2-cta__note {
  margin: var(--sk-space-4) 0 0;
  font-size: var(--sk-text-sm);
  color: rgba(255, 255, 255, 0.86);
}

/* ── Rendering economy ──────────────────────────────────────────────────── */

/* Everything below the fold skips rendering until it approaches. The panels
   stay out of this list: their wipe transition and view() parallax want real
   boxes, and their images are already lazy. */
.v2-guide,
.v2-plan,
.v2-film,
.v2-strip--stakes {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* ── Scroll-driven motion ───────────────────────────────────────────────── */

/* Positive condition on purpose: a browser that cannot parse
   animation-timeline drops the whole block and keeps the complete page.
   Endpoints all resolve neutral once --v2-parallax and --v2-settle collapse
   in the reduced-motion token block at the top of this file. */
@supports (animation-timeline: view()) {
  /* Hero Ken Burns: starts at rest-plus-six and settles to 1 as the hero
     leaves. scale, never transform, so nothing else is clobbered. */
  .v2-hero__image {
    scale: var(--v2-settle);
    animation: v2-kenburns linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  @keyframes v2-kenburns {
    from {
      scale: var(--v2-settle);
    }
    to {
      scale: 1;
    }
  }

  /* Vertical drift on the big bands. The media boxes are oversized by the
     same token, so the travel never shows an edge. */
  .v2-panel__media,
  .v2-cta__media {
    animation: v2-band-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes v2-band-drift {
    from {
      transform: translateY(calc(var(--v2-parallax) * -1));
    }
    to {
      transform: translateY(var(--v2-parallax));
    }
  }
}

/* ── Hero trust line (Cavalcade Tour of Homes) ──────────────────────────── */
.v2-hero__badge {
  margin: var(--sk-space-4) 0 0;
  font-size: var(--sk-text-xs);
  font-weight: 500;
  letter-spacing: var(--sk-tracking-widest);
  text-transform: uppercase;
}
.v2-hero__badge a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 0.35em;
}
.v2-hero__badge a:hover,
.v2-hero__badge a:focus-visible {
  color: var(--sk-white);
  text-decoration-color: var(--sk-white);
}

/* ── Google reviews ─────────────────────────────────────────────────────── */
.v2-reviews {
  background: var(--sk-paper-limestone);
  padding: clamp(4rem, 10vh, 7rem) var(--sk-space-4);
}
.v2-reviews__inner {
  max-width: var(--sk-container-wide);
  margin-inline: auto;
}
.v2-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sk-space-3) var(--sk-space-4);
}
.v2-reviews__title {
  margin: var(--sk-space-2) 0 0;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-display-lg);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-tightest);
  color: var(--sk-ink-deep);
}
.v2-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sk-space-4);
  margin: var(--sk-space-6) 0 0;
  padding: 0;
  list-style: none;
}
.v2-reviews__item {
  display: flex;
}
.v2-review {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: clamp(1.75rem, 2.4vw, 2.5rem);
  background: var(--sk-white);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-md);
  transition: box-shadow var(--sk-duration-base) var(--sk-ease-standard), transform var(--sk-duration-base) var(--sk-ease-standard);
}
.v2-review:hover {
  box-shadow: var(--sk-shadow-lg);
  transform: translateY(-4px);
}
.v2-review__mark {
  width: 34px;
  height: 26px;
  color: var(--sk-primary);
}
.v2-review__quote {
  flex: 1;
  margin: var(--sk-space-3) 0 0;
  font-family: var(--sk-font-body);
  font-size: 1.0625rem;
  line-height: var(--sk-leading-relaxed);
  color: var(--sk-ink);
}
.v2-review__quote p {
  margin: 0;
}
.v2-review__by {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: var(--sk-space-4);
  padding-top: var(--sk-space-3);
  border-top: 1px solid var(--sk-line);
}
.v2-review__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--sk-radius-pill);
  background: var(--sk-deep);
  color: var(--sk-white);
  font-size: var(--sk-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.v2-review__who {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.v2-review__name {
  font-weight: 600;
  color: var(--sk-ink-deep);
}
.v2-review__source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--sk-text-xs);
  color: var(--sk-slate-muted);
}
.v2-review__source svg {
  width: 14px;
  height: 14px;
}

/* Tablet: two up, the third card wraps */
@media (max-width: 1100px) {
  .v2-reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Phone: one swipeable row instead of three tall stacked cards */
@media (max-width: 720px) {
  .v2-reviews__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: var(--sk-space-2);
    margin-inline: calc(var(--sk-space-4) * -1);
    padding: 0 var(--sk-space-4) var(--sk-space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sk-space-4);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .v2-reviews__grid::-webkit-scrollbar {
    display: none;
  }
  .v2-reviews__item {
    scroll-snap-align: start;
  }
  .v2-review:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-review,
  .v2-review:hover {
    transition: none;
    transform: none;
  }
}

/* Hero line breaks are set in the markup for wide screens; phones wrap freely. */
@media (max-width: 720px) {
  .v2-hero__br {
    display: none;
  }
}

/* ── Recent work slider (Markup #22) ─────────────────────────────────────
   Native horizontal scroll with snap points: touch swipe, trackpad and
   keyboard work with no library. Slides are ~72% wide so the next one peeks
   in and the 900px project photos stay sharp. */
.v2-slider {
  background: var(--sk-ink);
  padding: var(--sk-space-2) 0 var(--sk-space-10);
}
.v2-slider__track {
  --v2-slide-w: min(72vw, 1040px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--v2-slide-w);
  gap: var(--sk-space-3);
  padding-inline: max(var(--sk-space-4), calc((100vw - var(--sk-container-wide)) / 2 + var(--sk-space-4)));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--sk-space-4), calc((100vw - var(--sk-container-wide)) / 2 + var(--sk-space-4)));
  scrollbar-width: none;
  cursor: grab;
}
.v2-slider__track::-webkit-scrollbar {
  display: none;
}
.v2-slider__track.is-dragging,
.v2-slider__track.is-moving {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.v2-slider__track:focus-visible {
  outline: 2px solid var(--sk-sky);
  outline-offset: 4px;
}
.v2-slide {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--sk-radius-md);
  scroll-snap-align: start;
  color: var(--sk-white);
  text-decoration: none;
  background: var(--sk-ink-deep);
}
.v2-slide__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sk-duration-slow) var(--sk-ease-standard);
  -webkit-user-drag: none;
  user-select: none;
}
.v2-slide:hover .v2-slide__img {
  transform: scale(1.03);
}
.v2-slide__meta {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: linear-gradient(180deg, rgba(11, 20, 26, 0) 0%, rgba(11, 20, 26, 0.78) 100%);
}
.v2-slide__location {
  font-size: var(--sk-text-xs);
  font-weight: 500;
  letter-spacing: var(--sk-tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.v2-slide__title {
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: var(--sk-leading-tight);
}
.v2-slider__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-3);
  max-width: var(--sk-container-wide);
  margin: var(--sk-space-5) auto 0;
  padding-inline: var(--sk-space-4);
}
.v2-slider__nav {
  display: flex;
  align-items: center;
  gap: var(--sk-space-2);
  color: var(--sk-white);
}
.v2-slider__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--sk-radius-pill);
  background: transparent;
  color: var(--sk-white);
  cursor: pointer;
  transition: background-color var(--sk-duration-fast) var(--sk-ease-standard), border-color var(--sk-duration-fast) var(--sk-ease-standard), opacity var(--sk-duration-fast);
}
.v2-slider__btn svg {
  width: 20px;
  height: 20px;
}
.v2-slider__btn:hover:not(:disabled),
.v2-slider__btn:focus-visible {
  background: var(--sk-primary);
  border-color: var(--sk-primary);
}
.v2-slider__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.v2-slider__count {
  min-width: 4.5ch;
  font-size: var(--sk-text-sm);
  letter-spacing: var(--sk-tracking-wide);
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .v2-slider__track {
    --v2-slide-w: 86vw;
    gap: var(--sk-space-2);
  }
  .v2-slide {
    aspect-ratio: 4 / 5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-slider__track {
    scroll-behavior: auto;
  }
  .v2-slide__img,
  .v2-slide:hover .v2-slide__img {
    transition: none;
    transform: none;
  }
}

/* ── Google reviews slider ────────────────────────────────────────────────
   Same native scroll-snap mechanism as the projects slider; three cards on
   desktop, two on tablet, one (with the next peeking) on phones. */
.v2-reviews__rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: var(--sk-space-2) 0 0;
  font-size: var(--sk-text-sm);
  color: var(--sk-slate);
}
.v2-reviews__rating strong {
  font-weight: 600;
  color: var(--sk-ink-deep);
}
.v2-reviews__stars,
.v2-review__stars {
  display: inline-flex;
  gap: 2px;
  color: #e8a92e;
}
.v2-reviews__stars svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.v2-review__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.v2-review__stars {
  margin-bottom: var(--sk-space-2);
}
.v2-reviews__slider {
  margin-top: var(--sk-space-6);
}
.v2-reviews__track {
  --v2-gutter: max(var(--sk-space-4), calc((100vw - var(--sk-container-wide)) / 2 + var(--sk-space-4)));
  --v2-cols: 3;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((min(100vw, var(--sk-container-wide)) - 2 * var(--sk-space-4) - (var(--v2-cols) - 1) * var(--sk-space-4)) / var(--v2-cols));
  gap: var(--sk-space-4);
  margin: 0;
  padding: var(--sk-space-1) var(--v2-gutter) var(--sk-space-3);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--v2-gutter);
  scrollbar-width: none;
  cursor: grab;
}
.v2-reviews__track::-webkit-scrollbar {
  display: none;
}
.v2-reviews__track.is-dragging,
.v2-reviews__track.is-moving {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.v2-reviews__track:focus-visible {
  outline: 2px solid var(--sk-primary);
  outline-offset: 4px;
}
.v2-reviews__track .v2-reviews__item {
  scroll-snap-align: start;
  user-select: none;
}
.v2-reviews__track .v2-review:hover {
  transform: none;
}
.v2-reviews .v2-slider__bar {
  margin-top: var(--sk-space-4);
}
.v2-reviews .v2-slider__nav {
  color: var(--sk-ink);
}
.v2-reviews .v2-slider__btn {
  border-color: var(--sk-line-strong);
  color: var(--sk-ink);
}
.v2-reviews .v2-slider__btn:hover:not(:disabled),
.v2-reviews .v2-slider__btn:focus-visible {
  background: var(--sk-primary);
  border-color: var(--sk-primary);
  color: var(--sk-white);
}
.v2-reviews .v2-slider__count {
  color: var(--sk-slate);
}
@media (max-width: 1100px) {
  .v2-reviews__track {
    --v2-cols: 2;
  }
}
@media (max-width: 720px) {
  .v2-reviews__track {
    grid-auto-columns: 86vw;
    gap: var(--sk-space-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-reviews__track {
    scroll-behavior: auto;
  }
}

/* ── Hero slideshow with Ken Burns ─────────────────────────────────────────
   Slides stack in the hero media box and crossfade; the visible one slowly
   zooms. The leaving slide keeps its zoom while it fades so nothing jumps. */
.v2-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--sk-ease-standard);
}
.v2-hero__slide.is-active {
  opacity: 1;
}
.v2-hero__slide > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.v2-hero__slide.is-active .v2-hero__image,
.v2-hero__slide.is-leaving .v2-hero__image {
  animation: v2-hero-zoom 9s ease-out both;
}
@keyframes v2-hero-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero__slide {
    transition: none;
  }
  .v2-hero__slide.is-active .v2-hero__image,
  .v2-hero__slide.is-leaving .v2-hero__image {
    animation: none;
  }
}


/* Smooth swiping: while dragging, no hover zoom or text selection, and the
   page doesn't scroll the track's links; pictures don't get dragged. */
.v2-slider__track.is-dragging .v2-slide__img,
.v2-slider__track.is-dragging .v2-slide:hover .v2-slide__img {
  transform: none;
  transition: none;
}
.v2-slider__track.is-dragging,
.v2-reviews__track.is-dragging {
  user-select: none;
}
.v2-slider__track.is-dragging a,
.v2-reviews__track.is-dragging a {
  pointer-events: none;
}

/* Review cards: same height (six lines of quote each), with Read more on
   longer reviews; an opened card grows on its own without stretching others. */
.v2-reviews__track {
  align-items: start;
}
.v2-reviews__track .v2-review__quote {
  min-height: calc(6 * 1.65em);
}
.v2-reviews__track .v2-review__quote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
.v2-reviews__track .v2-review.is-open .v2-review__quote p {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}
.v2-review__more {
  align-self: flex-start;
  margin-top: var(--sk-space-1);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--sk-text-sm);
  font-weight: 600;
  color: var(--sk-primary);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.v2-review__more:hover,
.v2-review__more:focus-visible {
  color: var(--sk-deep);
}

/* Mouse users drag the tracks, so text in them shouldn't start selecting. */
.v2-slider__track,
.v2-reviews__track {
  -webkit-user-select: none;
  user-select: none;
}
.v2-slide,
.v2-slide__img {
  -webkit-user-drag: none;
}

/* Reviews slider aligned to the heading: the slider already sits inside the
   section's side padding, so the track only centres to the container width
   (no second gutter). Three cards fill the container; the fourth peeks in. */
.v2-reviews__track {
  --v2-gutter: max(0px, calc((100% - var(--sk-container-wide)) / 2));
  grid-auto-columns: calc((100% - (var(--v2-cols) - 1) * var(--sk-space-4)) / var(--v2-cols));
  padding-inline: var(--v2-gutter);
  scroll-padding-inline: var(--v2-gutter);
}
.v2-reviews .v2-slider__bar {
  padding-inline: 0;
}
@media (max-width: 720px) {
  .v2-reviews__track {
    grid-auto-columns: 88%;
  }
}

/* Client film: YouTube player inserted on click fills the 16:9 frame. */
.sk-story__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Faster hero rotation (every 4.5s): quicker crossfade, zoom spans one slide. */
.v2-hero__slide {
  transition-duration: 1.2s;
}
.v2-hero__slide.is-active .v2-hero__image,
.v2-hero__slide.is-leaving .v2-hero__image {
  animation-duration: 6s;
}