/* =========================================================
   DYNAMIC CINEMA PRODUCTIONS — Direction B: REEL
   Modern grotesk · deep navy · sharp gold · graphic energy
   ========================================================= */

:root {
  /* Color */
  --bg:           #0A1220;        /* deep navy */
  --bg-elev:     #0F1A2D;
  --bg-soft:     #14223A;
  --line:        #1F2C44;
  --line-soft:   #15203A;
  --text:        #E8EAF0;
  --text-mute:   #8C95A6;
  --text-faint:  #4B5468;
  --gold:        #F3CF00;        /* brand yellow — matches old-site CTA */
  --gold-warm:   #F3D900;        /* logo yellow — brighter highlight */
  --gold-deep:   #C9AC00;        /* hover / pressed state */
  --gold-soft:   #FFE572;        /* italic accent text on dark bg */
  --accent-sec:  #4DA8B5;         /* teal pop for tags */

  /* Typography */
  --font-display: "Cabinet Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-body:    "General Sans", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-mono:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale */
  --t-xs:    clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --t-sm:    clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  --t-base:  clamp(0.98rem, 0.95rem + 0.18vw, 1.06rem);
  --t-lg:    clamp(1.1rem, 1.02rem + 0.5vw, 1.35rem);
  --t-xl:    clamp(1.55rem, 1.3rem + 1.3vw, 2.2rem);
  --t-2xl:   clamp(2.4rem, 1.9rem + 2.5vw, 4rem);
  --t-hero:  clamp(3rem, 2rem + 5vw, 7.5rem);

  /* Spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --container: 1360px;
  /* Raised floor from 20px → 32px so the nav CTA never sits flush against the
     viewport edge on ~1280-1360 laptop displays. Ceiling still 56px. */
  --gutter: clamp(32px, 4vw, 56px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  color-scheme: dark;
  scroll-behavior: smooth;
  /* Prevent fixed-positioned mobile drawer (translateX(100%)) from extending the visual viewport */
  overflow-x: clip;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
::selection { background: var(--gold); color: var(--bg); }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--gold); color: var(--bg);
  padding: var(--s-3) var(--s-5); z-index: 100;
}
.skip:focus { left: var(--s-5); top: var(--s-5); }

/* Display & headings */
.display, .h-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.9;
  margin: 0;
}
.display {
  font-size: var(--t-hero);
}
.display__accent {
  color: var(--gold-warm);
  font-style: italic;
  font-weight: 700;
}
.h-display {
  font-size: var(--t-2xl);
  line-height: 1;
}
.h-display__accent {
  color: var(--gold-warm);
  font-style: italic;
}

/* Hero-scoped eyebrow tag — matches .hosp-hero__eyebrow style with a gold
   dash + all-caps yellow text. Applies to the hero tag on Real Estate
   (.re-hero) and Commercial / Tourism / About (.page-head). */
.re-hero .tag,
.page-head .tag {
  color: var(--gold);
  letter-spacing: 0.28em;
  gap: 14px;
}
.re-hero .tag .tag__dot,
.page-head .tag .tag__dot {
  display: none;
}
.re-hero .tag::before,
.page-head .tag::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--gold);
  flex: 0 0 auto;
}

/* Tag — small label with dot */
.tag {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin: 0 0 var(--s-5) 0;
}
.tag__dot {
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--gold);
}

.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 56ch;
  margin: var(--s-5) 0 var(--s-6) 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 16px 28px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
  white-space: nowrap;
  border-radius: 0;
}
.btn--solid {
  background: var(--gold);
  color: var(--bg);
}
.btn--solid:hover { background: var(--gold-warm); transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.link {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--gold);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: border-color 0.3s, color 0.3s;
}
.link:hover { border-bottom-color: var(--gold); }
.link--lg { font-size: var(--t-base); }

.accent { color: var(--gold-warm); font-style: italic; font-weight: 800; }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  padding: var(--s-3) 0;
  /* Deeper, longer gradient so the transition from bar → hero image is soft
     instead of a hard cut against mountain silhouettes. */
  background: linear-gradient(180deg, rgba(10,18,32,0.94) 0%, rgba(10,18,32,0.65) 55%, rgba(10,18,32,0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), border-bottom-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10,18,32,0.94);
  padding: var(--s-2) 0;
  border-bottom-color: var(--line-soft);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(48px, 6vw, 96px);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--text);
  text-decoration: none;
}
.brand__mark {
  display: block;
  width: 56px;
  height: 48px;
  object-fit: contain;
  object-position: left center;
  transition: transform 350ms var(--ease), filter 350ms var(--ease);
  filter: drop-shadow(0 0 10px rgba(243, 207, 0, 0));
}
.brand:hover .brand__mark {
  transform: scale(1.06);
  filter: drop-shadow(0 0 14px rgba(243, 207, 0, 0.4));
}
.brand__text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding-left: var(--s-3);
  border-left: 1px solid rgba(243, 207, 0, 0.25);
  line-height: 1.15;
}
.brand__name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .brand__mark { width: 46px; height: 40px; }
  .brand__text { padding-left: var(--s-2); }
  .brand__name { font-size: 0.55rem; letter-spacing: 0.18em; }
  .brand__tag { font-size: 0.5rem; letter-spacing: 0.16em; }
}
@media (max-width: 380px) {
  .brand__tag { display: none; }
}
.nav__links { display: flex; gap: var(--s-6); align-items: center; flex-wrap: nowrap; }
.nav__links li { flex: 0 0 auto; }
.nav__links a {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color 0.3s;
  white-space: nowrap;
}
/* Tighten gap between nav items across the mid-desktop range so the brand
   block on the left does not crowd the links.
   Split into two tiers — the closer we get to 1000px, the more we shrink. */
/* Between the container width (1360px) and the ideal 1440px viewport, the
   nav is fine — just tighten link gap. */
@media (max-width: 1440px) and (min-width: 1361px) {
  .nav__inner { gap: 48px; }
  .nav__links { gap: var(--s-5); }
  .nav__links a { letter-spacing: 0.08em; }
}
/* 1441-1520: nav-inner has full gutter but the CTA still pushes links close
   to the brand. Tighten link gap slightly to add daylight next to the tagline. */
@media (max-width: 1520px) and (min-width: 1441px) {
  .nav__links { gap: var(--s-5); }
  .nav__links a { letter-spacing: 0.09em; }
}
/* From 1201-1360 the viewport is at or below the container width. The site-
   wide gutter clamp collapses to ≤ 54px, and the CTA gets pushed near the edge.
   Compress link + brand sizing so everything fits with breathing room. */
@media (max-width: 1360px) and (min-width: 1201px) {
  .nav__inner {
    gap: var(--s-6);
    padding-left: 40px;
    padding-right: 40px;
  }
  .nav__links { gap: var(--s-4); }
  .nav__links a { letter-spacing: 0.06em; font-size: 0.78rem; }
  .brand__mark { width: 50px; height: 44px; }
  .brand__text { padding-left: var(--s-2); }
  .brand__name { font-size: 0.64rem; letter-spacing: 0.18em; }
  .brand__tag { font-size: 0.58rem; letter-spacing: 0.18em; }
  .nav__cta { padding: 9px 14px; font-size: 0.78rem !important; letter-spacing: 0.08em; }
}
/* Between 1001-1200 the tagline crowds the first nav link. Hide the tagline
   entirely below 1200 so the brand collapses to name-only and the nav can
   breathe. Also enforce a hard minimum gap between brand and links. */
@media (max-width: 1200px) and (min-width: 1001px) {
  .nav__inner {
    gap: var(--s-7);
    padding-left: 32px;
    padding-right: 32px;
  }
  .brand__tag { display: none; }
  .brand__mark { width: 46px; height: 40px; }
  .brand__text { padding-left: var(--s-2); border-left-color: rgba(243, 207, 0, 0.3); }
  .brand__name { font-size: 0.62rem; letter-spacing: 0.16em; }
  .nav__links { gap: var(--s-4); }
  .nav__links a { letter-spacing: 0.05em; font-size: 0.75rem; }
  .nav__cta { padding: 9px 13px; font-size: 0.75rem !important; letter-spacing: 0.06em; }
}
.nav__links a:hover { color: var(--text); }
.nav__cta {
  padding: 10px 18px;
  background: var(--gold);
  color: var(--bg) !important;
  font-weight: 600 !important;
  font-size: var(--t-sm) !important;
  transition: background 0.3s, transform 0.3s var(--ease);
}
.nav__cta:hover { background: var(--gold-warm); transform: translateY(-2px); }
@media (max-width: 1000px) {
  /* Mobile-nav drawer is handled below; hide the inline link list entirely so the hamburger drives navigation */
  .nav__links li { display: none; }
}

/* HERO */
.hero {
  position: relative;
  /* Hero + logo marquee together fill the first viewport — the marquee
     strip lands flush at the bottom of the fold on initial load.
     --marquee-h matches the actual rendered marquee height (slot 104px
     + s-5 padding top/bottom + 2x1px borders ≈ 154px). Update here if
     the marquee slot size or padding ever changes. */
  --marquee-h: 154px;
  min-height: calc(100vh - var(--marquee-h));
  min-height: calc(100svh - var(--marquee-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px 0 var(--s-8);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(10,18,32,0.85) 0%, rgba(10,18,32,0) 60%),
    linear-gradient(180deg, rgba(10,18,32,0) 0%, rgba(10,18,32,0) 25%, rgba(10,18,32,0.85) 100%);
}
.hero__bar {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-3) var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--text-mute);
  text-transform: uppercase;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  width: 100%;
}
.hero__bar span:nth-child(1)::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (max-width: 800px) {
  .hero__bar { flex-direction: column; align-items: flex-start; gap: var(--s-2); padding-top: var(--s-4); padding-bottom: var(--s-4); }
}
.hero__content {
  position: relative; z-index: 1;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero__meta {
  margin-top: var(--s-7);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: end;
  max-width: 1080px;
}
.hero__meta p {
  color: var(--text);
  font-size: var(--t-lg);
  margin: 0;
  max-width: 36ch;
}
.hero__cta { display: flex; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 800px) {
  .hero__meta { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* LOGO MARQUEE — endless client logo scroll */
.logo-marquee {
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  padding: var(--s-5) 0;
  position: relative;
}
.logo-marquee::before, .logo-marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-elev), transparent); }
.logo-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--bg-elev), transparent); }
.logo-marquee__track {
  display: flex;
  animation: logo-marquee-scroll 55s linear infinite;
  width: max-content;
  will-change: transform;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__list {
  display: flex;
  gap: clamp(var(--s-5), 4vw, var(--s-8));
  align-items: center;
  padding-right: clamp(var(--s-5), 4vw, var(--s-8));
  margin: 0;
  list-style: none;
  white-space: nowrap;
}
.logo-marquee__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 104px;
  flex: 0 0 240px;
  padding: 0 var(--s-2);
}
.logo-marquee__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.logo-marquee__img {
  /* Universal auto-fit: every logo fills the slot edge-to-edge while preserving
     aspect ratio. Wide wordmarks hit the width limit, tall/square emblems hit
     the height limit — both at the same slot size. Drop a new file in
     images/uploads/ and reference it in _data/home.yml — no per-file CSS. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) brightness(1.15) contrast(0.95);
  opacity: 0.72;
  transition: filter 0.5s var(--ease), opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.logo-marquee__item:hover .logo-marquee__img {
  filter: grayscale(0) brightness(1) contrast(1);
  opacity: 1;
  transform: translateY(-2px);
}
.logo-marquee__img--placeholder {
  filter: none;
  opacity: 0.85;
}
.logo-marquee__item:hover .logo-marquee__img--placeholder {
  opacity: 1;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Legacy ticker keyframe kept for any references */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Keep legacy keyframe name working for any other refs */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* MANIFESTO */
.manifesto {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-10) var(--gutter);
}
.manifesto__head { margin-bottom: var(--s-6); }
.manifesto h2 {
  max-width: 22ch;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.05;
}
.h-display__accent { color: var(--gold-warm); font-style: italic; }
.manifesto__signature {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: var(--s-9);
  margin-top: var(--s-8);
  align-items: end;
}
.manifesto__signature p {
  font-size: var(--t-base);
  color: var(--text-mute);
  margin: 0 0 var(--s-5) 0;
  max-width: 52ch;
}
.manifesto__signoff {
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.55rem + 0.4vw, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold) !important;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .manifesto__signoff { white-space: normal; }
}
.manifesto__numbers {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.manifesto__numbers > div {
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
}
.manifesto__numbers span {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1;
}
.manifesto__numbers em {
  display: block;
  margin-top: var(--s-2);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
@media (max-width: 900px) { .manifesto__signature { grid-template-columns: 1fr; gap: var(--s-7); } }

/* SERVICES */
.services {
  background: var(--bg-elev);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  /* Reduced top padding — the Peak strip above already provides a beat;
     128px on top of Peak's padding created a 192px dead zone. */
  padding: var(--s-7) 0 var(--s-9);
}
.services__head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-7);
}
/* =====================================================================
   SERVICES LANES — less boxy, more cinematic.
   Three vertically-staggered lanes (film-strip rhythm), arched image
   tops, circular number tags, and a continuous traveling-light beam
   tracing each card's perimeter. Each lane offsets the loop start so
   the three lights feel like independent passes rather than synced.
   ===================================================================== */
/* =====================================================================
   SERVICES "APERTURE LANES" — full-bleed cinematic cards with rotating
   gold conic-gradient beam (matches the booking portal CTA family) and
   a diagonal projector-scan light that sweeps across each lane.
   Asymmetric clip-path silhouettes break out of the rectangle.
   ===================================================================== */

.services__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6);
  align-items: stretch;
}

/* Animatable angle for the rotating beam */
@property --svc-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* Animatable position for the diagonal scan light (in % across the card) */
@property --svc-scan {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -40%;
}

.svc {
  --svc-h: 460px;
  /* Cards are plain rectangles — no corner notches. The rotating
     gold beam still wraps the perimeter via the same variable. */
  --svc-clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  position: relative;
  display: block;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  height: var(--svc-h);
  transition: transform 0.7s var(--ease);
}
.svc--lane-1,
.svc--lane-2,
.svc--lane-3,
.svc--lane-4 {
  --svc-clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Gentle vertical stagger to add rhythm */
.svc { transform: translateY(0); }
.svc--lane-2 { transform: translateY(18px); }
.svc--lane-3 { transform: translateY(-6px); }
.svc--lane-4 { transform: translateY(12px); }
.svc:hover { transform: translateY(-12px); }
.svc--lane-2:hover { transform: translateY(6px); }
.svc--lane-3:hover { transform: translateY(-20px); }
.svc--lane-4:hover { transform: translateY(0); }

/* =====  ROTATING GOLD BEAM (full-strength, matches booking portal) ===== */
.svc__beam {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: var(--svc-clip);
  background:
    conic-gradient(from var(--svc-angle),
      rgba(243, 217, 0, 0.10) 0deg,
      rgba(243, 217, 0, 0.35) 35deg,
      #FFE96B 70deg,
      #FFFFFF 78deg,
      #FFE96B 86deg,
      rgba(243, 217, 0, 0.35) 130deg,
      rgba(243, 217, 0, 0.10) 200deg,
      rgba(243, 217, 0, 0.10) 360deg);
  /* Cut the interior so only the perimeter stroke shows */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  padding: 2.5px;                               /* beam thickness */
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: svc-beam-spin 7s linear infinite;
  animation-delay: calc(var(--lane-i) * -2.3s);
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(243, 217, 0, 0.35));
}
.svc:hover .svc__beam {
  animation-duration: 3.5s;
  filter: drop-shadow(0 0 14px rgba(243, 217, 0, 0.6));
}
@keyframes svc-beam-spin { to { --svc-angle: 360deg; } }

/* =====  INNER (full-bleed image with text overlay)  ===== */
.svc__inner {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  clip-path: var(--svc-clip);
  background: var(--bg-soft);
  overflow: hidden;
}
.svc__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.svc__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.9) contrast(1.04);
}
.svc:hover .svc__bg img { transform: scale(1.07); filter: saturate(1.05); }
.svc__bg-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(15, 19, 28, 0.20) 0%,
      rgba(15, 19, 28, 0.55) 55%,
      rgba(15, 19, 28, 0.93) 100%);
  pointer-events: none;
}

/* =====  DIAGONAL PROJECTOR SCAN LIGHT  =====
   A long, soft, gold-tinged diagonal band that travels across the card
   on a 6-second loop. Different start offsets per lane. */
.svc__scan {
  position: absolute;
  top: -20%;
  left: var(--svc-scan);
  width: 35%;
  height: 140%;
  z-index: 1;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 233, 107, 0.0) 20%,
    rgba(255, 233, 107, 0.18) 48%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 233, 107, 0.18) 52%,
    transparent 80%,
    transparent 100%);
  mix-blend-mode: screen;
  /* Cascading sweep: lane 0 (Real Estate) first, then 2 (Commercial),
     then 3 (Tourism) — reads left→right across the three lanes. */
  animation: svc-scan-sweep 6.5s ease-in-out infinite;
  animation-delay: calc(var(--lane-i) * 1.8s);
}
.svc:hover .svc__scan { animation-duration: 3.5s; }
@keyframes svc-scan-sweep {
  0%   { --svc-scan: -40%; opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  70%  { --svc-scan: 140%; opacity: 0; }
  100% { --svc-scan: 140%; opacity: 0; }
}

/* =====  TEXT OVERLAY  ===== */
.svc__body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-7) var(--s-6) var(--s-6);
  gap: var(--s-3);
}
.svc h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.3rem + 0.9vw, 2.2rem);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.02;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.svc p {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.86);
  margin: 0;
  line-height: 1.55;
  max-width: 30ch;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.svc__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--gold);
  margin-top: var(--s-3);
  align-self: flex-start;
  position: relative;
}
.svc__cta-label {
  white-space: nowrap;
}
@media (max-width: 560px) {
  .svc__cta-label { white-space: normal; }
}
.svc__cta-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  transition: width 0.5s var(--ease);
  box-shadow: 0 0 8px rgba(243, 217, 0, 0.5);
  flex-shrink: 0;
}
.svc:hover .svc__cta-line { width: 72px; }

/* Reduced motion: kill beam + scan animation, keep gold stroke visible. */
@media (prefers-reduced-motion: reduce) {
  .svc, .svc:hover, .svc--lane-2, .svc--lane-3,
  .svc--lane-2:hover, .svc--lane-3:hover { transform: none; }
  .svc__beam, .svc__scan, .svc__bg img {
    animation: none;
    transition: none;
  }
  .svc__scan { display: none; }
  .svc__beam { --svc-angle: 45deg; }
}

/* Tablet / narrow desktop: 2×2 grid so cards keep breathing room. */
@media (max-width: 1280px) and (min-width: 901px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  /* Reset stagger — rows of two look wrong when staggered. */
  .svc, .svc--lane-2, .svc--lane-3, .svc--lane-4 { transform: translateY(0); }
  .svc:hover, .svc--lane-2:hover, .svc--lane-3:hover, .svc--lane-4:hover { transform: translateY(-12px); }
}

/* Mobile: stack, remove stagger and the polygon notches (could look
   off at small widths). Keep the rotating beam — it still pops. */
@media (max-width: 900px) {
  .services__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .svc {
    --svc-h: 360px;
    --svc-clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .svc, .svc--lane-2, .svc--lane-3, .svc--lane-4,
  .svc:hover, .svc--lane-2:hover, .svc--lane-3:hover, .svc--lane-4:hover {
    transform: none;
  }
  .svc:hover { transform: translateY(-6px); }
}


/* WORK */
.work {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-10) var(--gutter);
}
.work__head {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--s-5); align-items: end;
  margin-bottom: var(--s-8);
}
.work__head .h-display { max-width: 18ch; }
.work__head .tag { margin: 0; }
.work__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: var(--s-5);
}
.work__item {
  grid-column: span 3;
  display: flex; flex-direction: column; gap: var(--s-4);
  position: relative;
}
.work__item--feat { grid-column: span 4; grid-row: span 2; }
.work__item--feat ~ .work__item:not(.work__item--wide) { grid-column: span 2; }
.work__item--wide { grid-column: span 6; }
.work__img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-elev);
}
.work__item--feat .work__img { aspect-ratio: 4/3; }
.work__item--wide .work__img { aspect-ratio: 21/8; }
.work__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease), filter 0.6s;
  filter: saturate(0.95);
}
.work__item:hover .work__img img { transform: scale(1.04); filter: saturate(1.1); }
.work__meta {
  display: flex; gap: var(--s-3); align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-wrap: wrap;
}
.work__tag {
  color: var(--gold);
  padding: 3px 8px;
  border: 1px solid var(--gold-deep);
}
.work__year { margin-left: auto; }
.work__item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
  max-width: 34ch;
}
.work__item h3 span { display: block; color: var(--gold-warm); font-style: italic; font-weight: 500; }
@media (max-width: 900px) {
  .work__head { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: 1fr; }
  .work__item, .work__item--feat, .work__item--wide { grid-column: span 1; grid-row: auto; }
  .work__item--feat .work__img { aspect-ratio: 16/10; }
  .work__item--wide .work__img { aspect-ratio: 16/10; }
}

/* BAND */
.band {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line-soft);
  padding: var(--s-8) var(--gutter) var(--s-6);
}
.band__inner {
  max-width: 1100px; margin: 0 auto; text-align: center;
}
.band__lead {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 var(--s-5) 0;
}
.band__num span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 4rem + 8vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--gold-warm);
  display: inline-block;
}
.band__num sup {
  font-size: 0.4em;
  vertical-align: super;
  color: var(--gold);
  margin-left: 4px;
}
.band__sub {
  margin: var(--s-5) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-xl);
  letter-spacing: -0.015em;
  color: var(--text);
}
.band__sub em { color: var(--text-mute); font-style: italic; font-weight: 500; font-size: 0.7em; display: block; margin-top: var(--s-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }

/* QUOTE */
.quote {
  padding: var(--s-10) var(--gutter);
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.quote figure { margin: 0; }
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
  max-width: 28ch;
}
.quote figcaption {
  margin-top: var(--s-7);
  display: flex; gap: var(--s-4); align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.quote__name { color: var(--gold); }
.quote__role { color: var(--text-faint); }

/* JOURNAL */
.journal {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-9) var(--gutter);
}
.journal__head { margin-bottom: var(--s-7); }
.journal__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.journal__item {
  padding: var(--s-7) var(--s-5) var(--s-7) 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s;
  cursor: pointer;
}
.journal__item:last-child { border-right: none; }
.journal__item:hover { background: var(--bg-elev); padding-left: var(--s-4); }
.journal__date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: var(--s-5);
}
.journal__item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--s-4) 0;
  max-width: 26ch;
}
.journal__item p {
  font-size: var(--t-sm);
  color: var(--text-mute);
  margin: 0 0 var(--s-5);
  max-width: 36ch;
}
.journal__more {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  transition: color 0.3s;
}
.journal__item:hover .journal__more { color: var(--gold); }
@media (max-width: 900px) {
  .journal__grid { grid-template-columns: 1fr; }
  .journal__item { border-right: none; padding: var(--s-6) 0; }
}

/* CTA */
.cta {
  background: var(--bg-elev);
  border-top: 1px solid var(--line-soft);
  padding: var(--s-10) var(--gutter);
}
.cta__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.cta__inner .h-display {
  font-size: clamp(2.4rem, 1.6rem + 3.5vw, 5.4rem);
  margin: 0 0 var(--s-5);
  max-width: 18ch;
}
.cta__actions { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-6); }

/* FOOTER */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding: var(--s-9) var(--gutter) var(--s-5);
}
.footer__inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line-soft);
}
.footer__brand { display: flex; align-items: flex-start; gap: var(--s-4); }
.footer__mark { width: 40px; height: 34px; object-fit: contain; flex-shrink: 0; }
.footer__brand p { margin: 0; font-family: var(--font-display); font-size: var(--t-base); font-weight: 700; }
.footer__brand span { color: var(--text-mute); font-size: var(--t-sm); font-weight: 400; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.footer h4 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin: 0 0 var(--s-4) 0;
}
.footer ul li { margin-bottom: var(--s-3); }
.footer ul a { color: var(--text-mute); font-size: var(--t-sm); transition: color 0.3s; }
.footer ul a:hover { color: var(--text); }
.footer__contact p { margin: 0 0 var(--s-4) 0; color: var(--text-mute); font-size: var(--t-sm); line-height: 1.7; }
.social { display: flex; gap: var(--s-3); }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  transition: border-color 0.3s, color 0.3s;
}
.social a:hover { border-color: var(--gold); color: var(--gold); }
.footer__base {
  max-width: var(--container); margin: var(--s-5) auto 0;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.footer__base a { color: var(--text-faint); }
.footer__base a:hover { color: var(--text); }
@media (max-width: 800px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__base { flex-direction: column; gap: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   REAL ESTATE PAGE
   ========================================================= */
.re-hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: flex-end;
  padding-top: 160px;
  padding-bottom: var(--s-9);
  overflow: hidden;
}
.re-hero .hero__veil {
  background:
    linear-gradient(180deg, rgba(10,18,32,0.65) 0%, rgba(10,18,32,0.2) 35%, rgba(10,18,32,0.9) 100%);
}
.re-hero__content {
  position: relative; z-index: 1;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.re-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.8rem + 3.5vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-5);
  max-width: 18ch;
}
.re-hero h1 .accent {
  color: var(--gold-warm);
  font-style: italic;
}

/* Big stats row */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-row > div {
  padding: var(--s-7) var(--s-5);
  border-right: 1px solid var(--line);
}
.stat-row > div:last-child { border-right: none; }
.stat-row__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4.2rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
}
/* Long text-based stat numbers (e.g. "Next-day") — force one line and
   size just enough smaller to match the other stats' visual weight while
   still fitting the column. */
.stat-row > div:nth-child(4) .stat-row__num {
  font-size: clamp(2.0rem, 1.2rem + 2.2vw, 3.4rem);
  white-space: nowrap;
}
.stat-row__num sup {
  font-size: 0.45em;
  color: var(--gold);
  vertical-align: super;
}
.stat-row__label {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  max-width: 22ch;
}
@media (max-width: 800px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-row > div:nth-child(2) { border-right: none; }
  .stat-row > div:nth-child(1), .stat-row > div:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* PACKAGES */
.packages {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-8) var(--gutter) var(--s-7);
}
.packages__head {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
  align-items: stretch;
}
.packages__head-left {
  display: flex;
  flex-direction: column;
  justify-content: center; /* center the headline + body block vertically against the taller CTA card */
  gap: var(--s-5);
}
.packages__head .h-display {
  margin: 0;
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4.4rem);
  line-height: 0.95;
  max-width: 16ch;
}
.packages__head p,
.packages__head .packages__body {
  color: var(--text-mute);
  font-size: var(--t-base);
  line-height: 1.6;
  margin: 0;
  max-width: 48ch;
}
.packages__head-right {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 100%;
}
.packages__head-right .portal-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.packages__head-right .portal-card__inner {
  flex: 1;
  justify-content: center;
}

/* =====================================================================
   PORTAL BOOKING CARD
   Bordered CTA with an animated rotating gold-gradient border. Built
   with @property + conic-gradient + a mask that punches out the center,
   leaving only a rotating gold ring. Static gold border fallback for
   browsers without @property.
   ===================================================================== */
@property --portal-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes portal-spin { to { --portal-angle: 360deg; } }
@keyframes portal-arrow-nudge {
  0%, 70%, 100% { transform: translateX(0); }
  85% { transform: translateX(4px); }
}
@keyframes portal-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.7); opacity: 0.35; }
}
.portal-card {
  position: relative;
  display: block;
  isolation: isolate;
  padding: 22px 26px 20px;
  border-radius: 4px;
  background: linear-gradient(180deg,
    rgba(243, 217, 0, 0.06) 0%,
    rgba(15, 19, 28, 0.55) 60%,
    rgba(15, 19, 28, 0.85) 100%);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  border: 1px solid var(--gold-deep); /* fallback */
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.portal-card--lg {
  padding: 32px 34px 30px;
}
/* Optional subtle background photo inside the booking CTA card.
   Sits beneath the rotating gold border and the readable text. Inline
   `background-image` and `opacity` come from the data file so it can be
   tuned in Decap without touching CSS. */
.portal-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
  pointer-events: none;
  /* Slight blur softens busy photos; remove if you want crisp. */
  filter: saturate(0.85);
}
/* When a bg photo is present, layer a vertical dark scrim on top of the
   photo so headline/sub stay legible regardless of the photo's brightness. */
.portal-card--has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(15, 19, 28, 0.55) 0%,
    rgba(15, 19, 28, 0.78) 65%,
    rgba(15, 19, 28, 0.92) 100%);
  pointer-events: none;
}
.portal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -18px rgba(243, 217, 0, 0.55);
}
@supports (background: conic-gradient(from var(--portal-angle), red, blue)) {
  .portal-card { border-color: transparent; }
  .portal-card__border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
      from var(--portal-angle),
      rgba(243, 217, 0, 0.0)   0%,
      rgba(243, 217, 0, 0.0)  20%,
      var(--gold)             35%,
      #fff5a8                 50%,
      var(--gold)             65%,
      rgba(243, 217, 0, 0.0)  80%,
      rgba(243, 217, 0, 0.0) 100%
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask-composite: exclude;
    animation: portal-spin 7s linear infinite;
    pointer-events: none;
    z-index: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .portal-card__border { animation: none; }
  }
}
.portal-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.portal-card--lg .portal-card__inner { gap: 12px; }
.portal-card--lg .portal-card__headline {
  font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.1rem);
  margin: 4px 0 6px;
}
.portal-card--lg .portal-card__sub {
  font-size: 1rem;
  margin: 0 0 12px;
}
.portal-card--lg .portal-card__btn {
  padding: 16px 28px;
  font-size: 13px;
}
.portal-card--lg .portal-card__hint { margin-top: 10px; }
.portal-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.portal-card__pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: portal-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .portal-card__pulse { animation: none; }
}
.portal-card__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.05rem + 0.9vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 2px 0 4px;
}
.portal-card__sub {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-mute);
  margin: 0 0 8px;
  max-width: 38ch;
}
.portal-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  padding: 14px 22px;
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s;
  align-self: flex-start;
}
.portal-card:hover .portal-card__btn { background: #fff5a8; }
.portal-card__btn-arrow {
  display: inline-block;
  animation: portal-arrow-nudge 2.4s ease-in-out infinite;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .portal-card__btn-arrow { animation: none; }
}
.portal-card:hover .portal-card__btn-arrow {
  animation-play-state: paused;
  transform: translateX(4px);
}
.portal-card__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 6px;
}

/* Reinforcement bar between packages and add-ons */
.portal-reminder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 16px 22px;
  margin: var(--s-7) 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background: rgba(243, 217, 0, 0.03);
  border-radius: 2px;
}
.portal-reminder__text {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
}
.portal-reminder__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.portal-reminder__link:hover { color: #fff5a8; }
.portal-reminder__arrow { display: inline-block; transition: transform 0.2s; }
.portal-reminder__link:hover .portal-reminder__arrow { transform: translateX(3px); }

/* Sqft tabs */
.sqft {
  display: flex; flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line);
  margin-bottom: var(--s-6);
  background: var(--bg-elev);
}
.sqft__label {
  display: flex; align-items: center;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  border-right: 1px solid var(--line);
}
.sqft button {
  appearance: none;
  flex: 1; min-width: 110px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  color: var(--text-mute);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 0.3s, background 0.3s;
  position: relative;
}
.sqft button:last-child { border-right: none; }
.sqft button:hover { color: var(--text); background: var(--bg-soft); }
.sqft button[aria-selected="true"] {
  color: var(--bg);
  background: var(--gold);
}

/* Tier cards */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.tier {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: clamp(var(--s-6), 3.5vw, var(--s-7));
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color 0.4s, transform 0.4s var(--ease);
}
.tier:hover {
  border-color: var(--gold-deep);
  transform: translateY(-6px);
}
.tier--featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(230,180,80,0.06) 0%, var(--bg-elev) 60%);
}
/* Per-tier badge label. Rendered as a real HTML element so it can hold
   an inline SVG icon or the DCP logo image alongside the text. */
.tier__badge {
  position: absolute;
  top: -1px; right: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bg);
  background: var(--gold);
  padding: 6px 12px;
  line-height: 1;
}
.tier__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* SVG strokes inherit currentColor (= --bg, near-black) */
  color: var(--bg);
  font-size: 11px;
  line-height: 1;
}
/* DCP triangle mark — source PNG is gold; force to solid black so it reads
   on the gold badge background. brightness(0) crushes RGB to 0; the alpha
   channel is preserved so the shape stays clean. */
.tier__badge-logo {
  display: inline-block;
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: brightness(0);
}
.tier__name {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin: 0 0 var(--s-4) 0;
}
.tier__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-5) 0;
  max-width: 22ch;
}
.tier__price {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  /* Price and $ sign in brand gold for emphasis */
  color: var(--gold);
}
.tier__price .currency {
  font-size: var(--t-lg);
  color: var(--gold);
  font-weight: 600;
}
.tier__price .amount {
  font-size: clamp(2.6rem, 1.8rem + 2vw, 3.6rem);
  line-height: 1;
  font-feature-settings: "tnum", "lnum";
  transition: opacity 0.2s ease;
}
.tier__price.is-updating .amount { opacity: 0.2; }
.tier__price-note {
  color: var(--text-faint);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  margin: 0 0 var(--s-5);
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.tier__divider {
  height: 1px;
  background: var(--line);
  margin: var(--s-4) 0;
}
.tier__features {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.tier__features li {
  font-size: var(--t-sm);
  color: var(--text-mute);
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.tier__features li::before {
  content: '+';
  position: absolute;
  left: 0; top: 0;
  color: var(--gold);
  font-weight: 700;
  font-family: var(--font-mono);
}
.tier__features li strong {
  color: var(--text);
  font-weight: 600;
}
.tier .btn { align-self: stretch; justify-content: center; }

/* Add-ons */
.addons {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.addons h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-6);
}
.addons__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.addon {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s;
  position: relative;
}
/* Cards with a REQUIRED or BY REQUEST tag place the tag centered below the
   description — it's a footer stamp, not a corner badge. No layout shift is
   needed on the head. */
.addon:hover { background: var(--bg-elev); }
.addon__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-1);
}
.addon__media {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text-faint);
}
.addon__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.92);
  transition: filter 280ms var(--ease);
}
.addon:hover .addon__media img { filter: saturate(1.02) brightness(1); }
.addon__media-placeholder {
  display: inline-grid;
  place-items: center;
  width: 100%; height: 100%;
  color: var(--gold);
  opacity: 0.7;
}
.addon__head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.addon__name {
  font-family: var(--font-display);
  font-weight: 700;
  /* Bump the title one step in the type scale so it reads at a glance.
     Wraps to 2 lines when needed — no ellipsis truncation. Overflow-wrap +
     text-wrap balance so long words like "Construction" can break if the
     column gets tight instead of getting cut. */
  font-size: var(--t-lg, 1.125rem);
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.015em;
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  text-wrap: balance;
}
.addon__price {
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}
.addon__desc {
  font-size: var(--t-sm);
  color: var(--text-mute);
  line-height: 1.5;
  margin: var(--s-2) 0 0;
}

/* Footer tag base — shared by REQUIRED and BY REQUEST so both pills read
   as the same visual language. Solid gold badge, small-caps mono, centered
   below the card description. Auto top margin pins it to the bottom of the
   card so all cards in a row have their tags aligned. Text can wrap on
   narrow columns — balanced wrap keeps line lengths even. */
.addon__required-pill,
.addon__premium-pill {
  align-self: center;
  margin: auto auto 0;
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: 2px;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  max-width: 100%;
}
/* Push the tag to the bottom of the card so tags across a row align even
   when descriptions have different lengths. The card is already a column
   flex container. */
.addon--required,
.addon--premium { justify-content: flex-start; }
.addon--required .addon__desc,
.addon--premium .addon__desc { margin-bottom: var(--s-3); }

@media (max-width: 1000px) {
  .tiers { grid-template-columns: 1fr; }
  .packages__head { grid-template-columns: 1fr; gap: var(--s-5); }
  .addons__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .addons__grid { grid-template-columns: 1fr; }
  .sqft { flex-direction: column; }
  .sqft button { border-right: none; border-bottom: 1px solid var(--line); width: 100%; }
  .addon__media { width: 56px; height: 56px; }
}

.packages__note {
  margin-top: var(--s-7);
  font-size: var(--t-sm);
  color: var(--text-mute);
  max-width: none;
  width: 100%;
}
.packages__note a { color: var(--gold); border-bottom: 1px solid transparent; }
.packages__note a:hover { border-bottom-color: var(--gold); }

/* ===== COMMERCIAL RE =====
   Sits between Virtuals and Reviews on the Real Estate page.
   Signals a different track from the residential tier grid: single dark
   panel (no card grid, no rectangles), 3 verticals separated by hairline
   rules, one "contact for pricing" CTA. */
/* -------------------------------------------------------------------------
   COMMERCIAL RE — vignette composition (organic shapes, no rectangles).
   Each vertical is a horizontal panel with 3 image shapes on one side and a
   text block on the other. Even verticals put images right; odd flip to
   images left. Ghost display word drifts behind each panel. Lightbox is
   wired through the existing [data-cre-gallery]/[data-cre-photo] handler.
   No cursor-follow motion; only static hover state on shapes.
   ------------------------------------------------------------------------- */
.commercial-re--vignette {
  padding: var(--s-8) var(--gutter) 0;
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}

/* Chapter divider — full-width hairline framing the section tag as the
   chapter label. Reads as a clear visual break from the residential grid
   above. Gold accent to tie into brand palette. */
.commercial-re--vignette .commercial-re__chapter {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(var(--s-4), 3vw, var(--s-6));
  margin: 0 auto var(--s-7);
  max-width: 100%;
}
.commercial-re--vignette .commercial-re__chapter-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 207, 0, 0.55), rgba(243, 207, 0, 0.55));
}
.commercial-re--vignette .commercial-re__chapter-rule:last-child {
  background: linear-gradient(90deg, rgba(243, 207, 0, 0.55), rgba(243, 207, 0, 0.55), transparent);
}
.commercial-re--vignette .commercial-re__chapter-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0 var(--s-2);
  white-space: nowrap;
}

.commercial-re--vignette .commercial-re__head {
  display: grid;
  gap: var(--s-3);
  max-width: 78ch;
  margin-bottom: var(--s-8);
}
.commercial-re--vignette .commercial-re__tag {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.commercial-re--vignette .commercial-re__tag::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--gold);
}
.commercial-re--vignette .commercial-re__headline {
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}
.commercial-re--vignette .commercial-re__body {
  margin: 0;
  color: var(--text-mute);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 62ch;
}

/* Vertical panel — the alternating flow */
.commercial-re--vignette .vert {
  position: relative;
  padding: clamp(var(--s-4), 3vw, var(--s-6)) 0;
  overflow: visible;
}
.commercial-re--vignette .vert__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
  min-height: clamp(380px, 38vw, 520px);
}

/* Ghost display word drifting behind. Positioned so the START of the word
   is fully readable on the outer edge and the END tucks slightly behind
   the image cluster — gives the section clear industry labels while still
   letting the shapes lead visually. Opacity a touch higher for legibility. */
.commercial-re--vignette .vert__ghost {
  position: absolute;
  top: -6%;
  left: -1%;
  right: auto;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(120px, 18vw, 260px);
  line-height: 0.85;
  /* Letter-spacing relaxed from -0.045em to -0.01em on 2026-08-08 (Matt)
     because Cabinet Grotesk italic "Of" — as in "Office" — collided:
     the O counter ran into the f bowl. Slight negative tracking keeps the
     word visually tight without letters overlapping. */
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.09);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  user-select: none;
  text-align: left;
}
.commercial-re--vignette .vert--reverse .vert__ghost {
  /* On reversed rows text is on the right — flip anchor so the word starts
     on the right edge and its tail tucks behind the shapes on the left. */
  left: auto;
  right: -1%;
  text-align: right;
}

/* Text block */
.commercial-re--vignette .vert__text {
  position: relative;
  z-index: 3;
  max-width: 44ch;
}
.commercial-re--vignette .vert--reverse .vert__text {
  order: 2;
  justify-self: end;
  text-align: right;
  margin-left: auto;
}
.commercial-re--vignette .vert__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.commercial-re--vignette .vert__label::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--gold);
}
.commercial-re--vignette .vert--reverse .vert__label {
  flex-direction: row-reverse;
}
.commercial-re--vignette .vert__name {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
}
.commercial-re--vignette .vert__desc {
  margin: 0;
  color: var(--text-mute);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Visual composition — shapes container */
.commercial-re--vignette .vert__viz {
  position: relative;
  z-index: 2;
  aspect-ratio: 4 / 3.6;
  width: 100%;
}
.commercial-re--vignette .vert--reverse .vert__viz {
  order: 1;
}

/* Shared shape base. Static positioning — no cursor-following motion. Only
   hover state affects box-shadow and inner image scale. */
.commercial-re--vignette .vert__shape {
  position: absolute;
  overflow: hidden;
  display: block;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  transition: box-shadow 240ms ease;
}
.commercial-re--vignette .vert__shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
}
.commercial-re--vignette .vert__shape:hover,
.commercial-re--vignette .vert__shape:focus-visible {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(243, 207, 0, 0.5);
  outline: none;
}
.commercial-re--vignette .vert__shape:hover img,
.commercial-re--vignette .vert__shape:focus-visible img {
  transform: scale(1.035);
  filter: brightness(1.05) saturate(1.03);
}

/* Arch — hero image, dome top */
.commercial-re--vignette .vert__shape--arch {
  top: 2%;
  right: 0;
  width: 78%;
  height: 62%;
  border-radius: 50% 50% 4px 4px / 40% 40% 3px 3px;
  z-index: 3;
}
.commercial-re--vignette .vert--reverse .vert__shape--arch {
  right: auto;
  left: 0;
}

/* Pill — ellipse mid-shot */
.commercial-re--vignette .vert__shape--pill {
  top: 44%;
  left: 8%;
  width: 44%;
  height: 28%;
  border-radius: 50%;
  z-index: 4;
}
.commercial-re--vignette .vert--reverse .vert__shape--pill {
  left: auto;
  right: 8%;
}

/* Circle — detail portrait, floating front */
.commercial-re--vignette .vert__shape--circle {
  bottom: 0;
  left: 0;
  width: 40%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  border: 6px solid var(--bg);
  z-index: 5;
}
.commercial-re--vignette .vert--reverse .vert__shape--circle {
  left: auto;
  right: 0;
}

/* If a vert has only 2 photos (no pill), rebalance so it feels intentional
   instead of sparse: bigger arch, bigger circle overlapping into the arch. */
.commercial-re--vignette .vert__viz:not(:has(.vert__shape--pill)) {
  aspect-ratio: 4 / 3.2;
}
.commercial-re--vignette .vert__viz:not(:has(.vert__shape--pill)) .vert__shape--arch {
  top: 0;
  width: 82%;
  height: 78%;
}
.commercial-re--vignette .vert__viz:not(:has(.vert__shape--pill)) .vert__shape--circle {
  width: 48%;
  bottom: 0;
  left: 4%;
}
.commercial-re--vignette .vert--reverse .vert__viz:not(:has(.vert__shape--pill)) .vert__shape--circle {
  left: auto;
  right: 4%;
}

/* CTA row. No trailing padding: the next section (Always Included) supplies
   its own top spacing so we don't stack empty margins under the button. */
.commercial-re--vignette .commercial-re__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-8) 0 0;
  text-align: center;
  position: relative;
  margin-top: var(--s-6);
}
.commercial-re--vignette .commercial-re__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 207, 0, 0.7), transparent);
}
.commercial-re--vignette .commercial-re__cta-body {
  margin: 0;
  color: var(--text-mute);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 58ch;
}

/* Rounded pill variant of gold CTA button */
.btn.commercial-re__cta-btn--pill {
  border-radius: 999px;
  padding-inline: clamp(var(--s-6), 4vw, var(--s-8));
}

@media (max-width: 900px) {
  .commercial-re--vignette .vert__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--s-6);
  }
  .commercial-re--vignette .vert--reverse .vert__text {
    order: 0;
    text-align: left;
    margin-left: 0;
    justify-self: start;
  }
  .commercial-re--vignette .vert--reverse .vert__label {
    flex-direction: row;
  }
  .commercial-re--vignette .vert--reverse .vert__viz {
    order: 1;
  }
  .commercial-re--vignette .vert__viz {
    aspect-ratio: 4 / 4.2;
    max-width: 520px;
  }
  .commercial-re--vignette .vert__ghost {
    font-size: clamp(80px, 20vw, 160px);
    top: -4%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .commercial-re--vignette .vert__shape,
  .commercial-re--vignette .vert__shape img {
    transition: none;
  }
  .commercial-re--vignette .vert__shape:hover img {
    transform: none;
  }
}

/* "Always included" block */
.always {
  background: var(--bg-elev);
  border-top: 1px solid var(--line-soft);
  padding: var(--s-10) var(--gutter);
}
.always__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: var(--s-9);
  align-items: center;
}
.always__media {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.always__media img { width: 100%; height: 100%; object-fit: cover; }
.always__list { margin-top: var(--s-5); display: flex; flex-direction: column; gap: 0; }
.always__list li {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.always__list li:last-child { border-bottom: 1px solid var(--line); }
.always__list .num {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--gold);
  letter-spacing: 0.05em;
  padding-top: 4px;
}
.always__list h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2) 0;
}
.always__list p { margin: 0; color: var(--text-mute); font-size: var(--t-sm); max-width: 48ch; }
@media (max-width: 900px) {
  .always__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .always__media { aspect-ratio: 16/10; }
}

/* =========================================================
   MOTION SYSTEM
   ========================================================= */

/* Scroll reveals — opacity/clip-path only (no CLS) */
.reveal { opacity: 1; }
.reveal-up { opacity: 1; }
.reveal-clip { opacity: 1; }

@supports (animation-timeline: scroll()) {
  .reveal {
    opacity: 0;
    animation: rv-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  .reveal-up {
    opacity: 0;
    filter: blur(8px);
    animation: rv-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  .reveal-clip {
    clip-path: inset(100% 0 0 0);
    animation: rv-clip linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}
@keyframes rv-fade { to { opacity: 1; } }
@keyframes rv-rise { to { opacity: 1; filter: blur(0); } }
@keyframes rv-clip { to { clip-path: inset(0 0 0 0); } }

/* Parallax hero zoom (scroll-driven) */
@supports (animation-timeline: scroll()) {
  .hero__media img,
  .re-hero .hero__media img {
    animation: hero-zoom linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    will-change: transform;
  }
}
@keyframes hero-zoom {
  from { transform: scale(1.0); }
  to   { transform: scale(1.18) translateY(-3%); }
}

/* Animated cursor word in hero */
/* Wrap keeps the accent word, cursor bar, and terminal period on the same
   line so the period never orphans below on narrow viewports. */
.morph-word-wrap {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
}
.morph-word__punct {
  display: inline;
  color: inherit;
  margin-left: 0;
}
/* On phones the hero clamp still produces a font-size that overflows for
   long accent words like "cinema-grade." — shrink the display slightly so
   the accent line fits without wrapping the terminal period. */
@media (max-width: 480px) {
  .hero .display { font-size: clamp(2.4rem, 1.6rem + 5vw, 3.4rem); }
}
.morph-word {
  position: relative;
  display: inline-block;
  color: var(--gold-warm);
  font-style: italic;
  font-weight: 700;
}
.morph-word::after {
  content: '';
  display: inline-block;
  width: 0.06em;
  height: 0.9em;
  background: var(--gold);
  margin-left: 0.02em;
  vertical-align: -0.08em;
  animation: cursor-blink 1s steps(2, start) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* =========================================================
   SECTION RHYTHM COLLAPSE
   When two padded sections stack, the combined top+bottom padding
   creates 200–256px dead voids. These adjacent-sibling rules trim
   the *following* section's top padding so adjacent sections breathe
   without floating in a desert of empty pixels.
   ========================================================= */
/* After Peak, any major section should kiss closer */
/* Peak needs to breathe a touch — was s-7, now s-8 so the strip doesn't sit
   right on top of neighboring sections. */
.peak + .band,
.peak + .cta,
.peak + .always,
.peak + .timeline,
.peak + .process,
.peak + .quote,
.peak + .team,
.peak + .dest { padding-top: var(--s-8); }

/* Big section → Peak: give Peak a real gap above so it feels intentional */
.band + .peak,
.cta + .peak,
.always + .peak,
.timeline + .peak,
.process + .peak,
.dest + .peak,
.team + .peak,
.manifesto + .peak,
.cx-explorer + .peak,
.packages + .peak,
.reviews + .peak,
.contact-main + .peak { margin-top: var(--s-7); }

/* CTA/Band/Quote chains — these stack often on inner pages with
   128+128 = 256px voids between them. Halve the seam. */
.band + .cta,
.cta + .band,
.quote + .cta,
.always + .quote,
.timeline + .band,
.process + .cta,
.dest + .timeline { padding-top: var(--s-8); }

/* About page (Who We Are) — tighten page-head → team and team → band
   seams. Defaults yielded ~150–180px dead voids. Collapse to ~64–80px. */
.page-head + .team { padding-top: var(--s-6); }
.page-head:has(+ .team) { padding-bottom: var(--s-6); }
.team + .band { padding-top: var(--s-6); }
.team:has(+ .band) { padding-bottom: var(--s-6); }
/* Band → Peak ribbon: trim band's internal bottom padding so the
   '4,000+' lockup nestles into the Peak strip. */
.band:has(+ .peak) { padding-bottom: var(--s-6); }

/* Commercial page — collapse the chain of large stacked sections that
   used to leave 192–224px voids between every block. Pattern:
   page-head → cx-numbers → cx-explorer → process → reviews → peak → cta. */
.page-head + .cx-numbers { padding-top: var(--s-6); }
.page-head:has(+ .cx-numbers) { padding-bottom: var(--s-6); }
.cx-numbers + .cx-explorer { padding-top: var(--s-6); }
.cx-numbers:has(+ .cx-explorer) { padding-bottom: var(--s-6); }
/* cx-explorer → process (new adjacency after re-order) */
.cx-explorer + .process { padding-top: var(--s-1); }
.cx-explorer:has(+ .process) { padding-bottom: var(--s-1); }
/* process → reviews (new adjacency after re-order) */
.process + .reviews { padding-top: var(--s-5); }
.process:has(+ .reviews) { padding-bottom: var(--s-6); }
/* reviews → peak (unchanged — reviews still hands off to Peak ribbon) */
.reviews:has(+ .peak) { padding-bottom: var(--s-5); }
/* peak → cta (new adjacency after re-order) */
.peak + .cta { padding-top: var(--s-7); }
/* Trim the inner-page CTA ("Tell us about your brand") bottom dead
   space so the footer joins cleanly. */
.cta:has(+ * footer), .cta:last-of-type { padding-bottom: var(--s-7); }

/* Virtuals (last .deliverable on the real-estate page) sits directly
   above .reviews. .deliverable carries a 96px bottom margin and .reviews
   carries a 96px top padding — 192px combined dead space under the
   before/after sliders. Collapse both. */
.deliverable + .reviews {
  padding-top: var(--s-5);
}
.deliverable:has(+ .reviews) {
  margin-bottom: 0;
}

/* =========================================================
   MARKETING AT ITS PEAK — animated compact lockup
   ========================================================= */
.peak {
  /* Restored breathing room — s-6 felt too tight against neighbors;
     s-7 (48px) internal padding lets the horizon lockup rest evenly.
     Paired with s-7/s-8 margin/padding on adjacent sections. */
  padding: var(--s-7) var(--gutter);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(243, 207, 0, 0.05) 0%, transparent 70%),
    var(--bg-elev);
  position: relative;
  overflow: hidden;
}
.peak__lockup {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 32px);
  width: 100%;
  text-align: center;
}
.peak__mark {
  width: clamp(64px, 8vw, 110px);
  height: auto;
  color: var(--gold);
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(243, 207, 0, 0.18));
  overflow: visible;
}
.peak__horizon {
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.28;
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
}
.peak__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
}
.peak__starGlow {
  opacity: 0;
  filter: blur(3px);
}
@supports (animation-timeline: view()) {
  .peak__horizon {
    animation: peakDraw 1s linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  .peak__path--main {
    animation: peakDraw 1.1s linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 55%;
  }
  .peak__star {
    animation: peakStar 0.6s ease-out both;
    animation-timeline: view();
    animation-range: cover 30% cover 60%;
    transform-origin: 60px 8px;
    transform-box: fill-box;
  }
  .peak__starGlow {
    animation: peakStarGlow 2.4s ease-in-out infinite;
    animation-delay: 1.2s;
    transform-origin: 60px 8px;
    transform-box: fill-box;
  }
}
@supports not (animation-timeline: view()) {
  .peak__horizon { animation: peakDraw 1.2s var(--ease) 0.1s forwards; }
  .peak__path--main { animation: peakDraw 1.6s var(--ease) 0.4s forwards; }
  .peak__star { animation: peakStar 0.6s ease-out 1.7s forwards; transform-origin: 60px 8px; transform-box: fill-box; transform: scale(0); }
  .peak__starGlow { animation: peakStarGlow 2.4s ease-in-out 2s infinite; transform-origin: 60px 8px; transform-box: fill-box; }
}
@keyframes peakDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes peakStar {
  0%   { transform: scale(0); opacity: 0; }
  55%  { transform: scale(1.7); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes peakStarGlow {
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  50%      { opacity: 0.55; transform: scale(1.25); }
}

.peak__phrase {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 2.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
  white-space: nowrap;
}
.peak__phrase em {
  font-style: italic;
  font-weight: 600;
  color: var(--gold-warm);
  display: inline-block;
  animation: peakPulse 4s ease-in-out infinite;
}
@keyframes peakPulse {
  0%, 100% { text-shadow: 0 0 0 rgba(243, 217, 0, 0); }
  50%      { text-shadow: 0 0 32px rgba(243, 217, 0, 0.4); }
}
.peak__dot {
  color: var(--gold);
  margin-left: 2px;
}

@media (max-width: 640px) {
  .peak { padding: var(--s-6) var(--gutter); }
  .band + .peak,
  .cta + .peak,
  .always + .peak,
  .timeline + .peak,
  .process + .peak,
  .dest + .peak,
  .team + .peak,
  .manifesto + .peak,
  .cx-explorer + .peak,
  .packages + .peak,
  .reviews + .peak,
  .contact-main + .peak { margin-top: var(--s-6); }
  .peak + .band,
  .peak + .cta,
  .peak + .always,
  .peak + .timeline,
  .peak + .process,
  .peak + .quote,
  .peak + .team,
  .peak + .dest { padding-top: var(--s-7); }
  .peak__lockup { flex-direction: column; gap: var(--s-3); }
  .peak__phrase { white-space: normal; font-size: clamp(1.5rem, 4.5vw, 2.4rem); }
  .peak__mark { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .peak__path, .peak__horizon { stroke-dashoffset: 0 !important; animation: none !important; }
  .peak__star { transform: scale(1) !important; opacity: 1 !important; animation: none !important; }
  .peak__starGlow { opacity: 0.3 !important; animation: none !important; }
  .peak__phrase em { animation: none !important; }
}


/* =========================================================
   PAGE HEADERS (generic) — for inner pages without full hero
   ========================================================= */
.page-head {
  position: relative;
  padding: 180px 0 var(--s-9);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.page-head__media {
  position: absolute; inset: 0; z-index: 0;
}
.page-head__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
.page-head__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(10,18,32,0.9) 0%, rgba(10,18,32,0) 60%),
    linear-gradient(180deg, rgba(10,18,32,0.5) 0%, rgba(10,18,32,0.3) 30%, rgba(10,18,32,0.95) 100%);
}
.page-head__inner {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.8rem + 3.8vw, 6.4rem);
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: var(--s-4) 0 var(--s-5);
  max-width: 22ch;
}
.page-head h1 .accent { color: var(--gold-warm); font-style: italic; }
.page-head .lede { margin-top: var(--s-5); }

/* =========================================================
   COMMERCIAL PAGE — category navigator (interactive)
   ========================================================= */
.commercial-explorer {
  background: var(--bg);
  padding: var(--s-10) 0;
  position: relative;
  overflow: hidden;
}
.commercial-explorer__head {
  max-width: var(--container);
  margin: 0 auto var(--s-8);
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: var(--s-9); align-items: end;
}
.commercial-explorer__head h2 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.4rem, 1.7rem + 2.6vw, 4.4rem);
}
.commercial-explorer__head p {
  color: var(--text-mute);
  font-size: var(--t-base);
  line-height: 1.6;
  margin: 0;
  max-width: 44ch;
}
@media (max-width: 900px) {
  .commercial-explorer__head { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* The category split — image on one side, expanded info on other */
.cx-stage {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-7);
  align-items: stretch;
  min-height: 540px;
}
.cx-stage__viewer {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.cx-stage__viewer img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 1.8s var(--ease);
  transform: scale(1.04);
}
.cx-stage__viewer img.is-active {
  opacity: 1;
  transform: scale(1);
}
.cx-stage__viewer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,18,32,0) 50%, rgba(10,18,32,0.85) 100%);
  pointer-events: none;
}
.cx-stage__viewer-label {
  position: absolute;
  left: var(--s-5); bottom: var(--s-5);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
}

.cx-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.cx-list__item {
  display: block;
  padding: clamp(20px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: padding-left 0.4s var(--ease), background 0.4s var(--ease);
}
.cx-list__item:hover { padding-left: var(--s-4); }
.cx-list__item.is-active {
  padding-left: var(--s-4);
  background: linear-gradient(90deg, rgba(230,180,80,0.04) 0%, rgba(230,180,80,0) 100%);
}
.cx-list__item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
}
.cx-list__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
  display: block;
}
.cx-list__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
  transition: color 0.3s;
}
.cx-list__item:hover .cx-list__title,
.cx-list__item.is-active .cx-list__title { color: var(--gold-warm); }
.cx-list__desc {
  font-size: var(--t-sm);
  color: var(--text-mute);
  margin: var(--s-3) 0 0;
  max-width: 48ch;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s var(--ease), opacity 0.5s var(--ease), margin 0.4s var(--ease);
}
.cx-list__item.is-active .cx-list__desc {
  max-height: 200px;
  opacity: 1;
  margin-top: var(--s-3);
}
.cx-list__arrow {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  color: var(--text-faint);
  font-size: var(--t-lg);
  transition: color 0.3s, transform 0.4s var(--ease);
}
.cx-list__item:hover .cx-list__arrow,
.cx-list__item.is-active .cx-list__arrow {
  color: var(--gold);
  transform: translateY(-50%) translateX(4px);
}

@media (max-width: 900px) {
  .cx-stage { grid-template-columns: 1fr; gap: var(--s-5); }
  .cx-stage__viewer { aspect-ratio: 4/3; }
}

/* Commercial: featured projects strip */
.cx-projects {
  max-width: var(--container);
  margin: var(--s-10) auto 0;
  padding: 0 var(--gutter);
}
.cx-projects__head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: var(--s-7);
  gap: var(--s-5);
}
.cx-projects__head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  letter-spacing: -0.03em;
  margin: 0;
}
.cx-projects__scroll {
  display: grid;
  grid-template-columns: repeat(6, minmax(260px, 1fr));
  gap: var(--s-5);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--s-4);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.cx-projects__scroll::-webkit-scrollbar { height: 6px; }
.cx-projects__scroll::-webkit-scrollbar-track { background: var(--bg-elev); }
.cx-projects__scroll::-webkit-scrollbar-thumb { background: var(--line); }
.cx-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.cx-card__img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-elev);
}
.cx-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.cx-card:hover .cx-card__img img { transform: scale(1.05); }
.cx-card__tag {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.cx-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}
.cx-card__client {
  font-size: var(--t-sm);
  color: var(--text-mute);
  margin: 0;
}

/* =========================================================
   TOURISM PAGE — destination grid
   ========================================================= */
.dest {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-10) var(--gutter);
}
.dest__head {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: var(--s-9); align-items: end;
  margin-bottom: var(--s-8);
}
.dest__head h2 {
  margin: 0; max-width: 16ch;
  font-size: clamp(2.4rem, 1.7rem + 2.6vw, 4.4rem);
  line-height: 0.95;
}
.dest__head p {
  color: var(--text-mute); font-size: var(--t-base);
  line-height: 1.6; margin: 0;
  max-width: 44ch;
}
.dest__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-5);
}
.dest-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform 0.6s var(--ease), border-color 0.4s;
}
.dest-card:hover { transform: translateY(-4px); border-color: var(--gold-deep); }
.dest-card--lg { grid-column: span 4; }
.dest-card--md { grid-column: span 2; }
.dest-card--sm { grid-column: span 3; }
.dest-card__img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.dest-card--lg .dest-card__img { aspect-ratio: 16/9; }
.dest-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.dest-card:hover .dest-card__img img { transform: scale(1.06); }
.dest-card__body {
  padding: var(--s-5) var(--s-5) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.dest-card__loc {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.dest-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: var(--s-1) 0;
  color: var(--text);
}
.dest-card--lg .dest-card__title {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}
.dest-card__client {
  font-size: var(--t-sm);
  color: var(--text-mute);
  margin: 0;
}
.dest-card__year {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .dest__head { grid-template-columns: 1fr; gap: var(--s-5); }
  .dest__grid { grid-template-columns: 1fr; }
  .dest-card--lg, .dest-card--md, .dest-card--sm { grid-column: span 1; }
}

/* === Tourism destination vignettes (case-study layout) === */
.dest__stack {
  display: flex; flex-direction: column;
  gap: clamp(var(--s-7), 4vw, var(--s-10));
  margin-top: var(--s-7);
}
.vignette {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-areas:
    "hero body"
    "bts  bts";
  gap: clamp(var(--s-4), 2.2vw, var(--s-6));
  padding: clamp(var(--s-4), 2vw, var(--s-6));
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  overflow: hidden;
}
.vignette::before {
  /* Gold accent bar — top edge */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 25%, var(--gold) 75%, transparent 100%);
  opacity: 0; transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.vignette:hover {
  border-color: var(--gold-deep);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(243, 207, 0, 0.06);
}
.vignette:hover::before { opacity: 1; }
.vignette--reverse {
  grid-template-areas:
    "body hero"
    "bts  bts";
  grid-template-columns: 1fr 1.35fr;
}

.vignette__hero { grid-area: hero; position: relative; }
.vignette__media {
  position: relative;
  display: block; width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
  border: 0; padding: 0;
  cursor: pointer;
}
.vignette__media--still { cursor: default; }
.vignette__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease), filter 0.6s;
  filter: saturate(1.05);
}
.vignette:hover .vignette__media img { transform: scale(1.04); }
.vignette__poster-tag {
  position: absolute; bottom: var(--s-3); left: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
  background: rgba(0,0,0,0.55);
  padding: 6px 10px; border: 1px solid rgba(243, 207, 0, 0.4);
  backdrop-filter: blur(6px);
}

/* Empty state — no hero image and no video yet. Renders as a subtle,
   intentional placeholder (not a broken ‘missing image’) so vignettes can
   ship with just a title/location/description while media is pending. */
.vignette__media--empty {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(135deg, #0F1418, #05080B);
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.vignette__empty-mark {
  color: rgba(255,255,255,0.18);
  display: inline-flex;
}
.vignette--placeholder .vignette__media:hover .vignette__empty-mark {
  color: rgba(255,255,255,0.26);
  transition: color 0.4s var(--ease);
}

.vignette__body {
  grid-area: body;
  display: flex; flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-2);
  justify-content: center;
}
.vignette__loc {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.vignette__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  letter-spacing: -0.022em;
  line-height: 1.05;
  margin: var(--s-1) 0 var(--s-1);
  color: var(--text);
}
.vignette__client {
  font-size: var(--t-sm);
  color: var(--text-mute);
  margin: 0;
}
.vignette__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-left: 4px;
}
.vignette__rule {
  height: 2px; width: 64px;
  background: var(--gold);
  margin: var(--s-3) 0 var(--s-2);
  transition: width 0.6s var(--ease);
}
.vignette:hover .vignette__rule { width: 120px; }
.vignette__desc {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0;
  max-width: 56ch;
}

/* =====================================================================
   BTS — POLAROID SCATTER
   White-bordered prints casually overlapping, like photos laid on a desk.
   Each polaroid is tilted slightly, with a small tape strip at the top.
   Hover: straighten, lift, raise z-index above neighbors.
   ===================================================================== */
.vignette__bts {
  grid-area: bts;
  padding-top: var(--s-5);
  margin-top: var(--s-2);
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.vignette__bts-label {
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint);
}
.vignette__bts-scatter {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(var(--s-3), 1.6vw, var(--s-5));
  padding: clamp(var(--s-4), 2vw, var(--s-6)) clamp(var(--s-2), 1vw, var(--s-4));
  /* No background tint — polaroids sit directly on the section surface. */
  background: transparent;
}
/* Desktop / tablet — polaroids share the row equally and FILL the
   available width regardless of how many there are (1–6). With fewer
   prints, each stretches larger; with more, each is narrower. */
@media (min-width: 901px) {
  .vignette__bts-scatter .polaroid {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin-top: 0;
  }
  /* Per-variant flex-grow weights so neighbors are different sizes —
     keeps the hand-arranged feel instead of a perfectly even row.
     max-width caps each print so a row of 2-3 photos doesn't balloon
     into oversized prints — instead they sit centered at a tasteful
     size while still allowing some asymmetry. */
  .vignette__bts-scatter .polaroid--p0 { flex-grow: 1.05; max-width: 240px; }
  .vignette__bts-scatter .polaroid--p1 { flex-grow: 0.85; max-width: 200px; margin-top: 18px; }
  .vignette__bts-scatter .polaroid--p2 { flex-grow: 1.15; max-width: 250px; margin-top: -4px; }
  .vignette__bts-scatter .polaroid--p3 { flex-grow: 0.9;  max-width: 210px; margin-top: 22px; }
  .vignette__bts-scatter .polaroid--p4 { flex-grow: 1.0;  max-width: 225px; margin-top: 6px; }
}

.polaroid {
  position: relative;
  margin: 0;
  flex: 0 1 auto;
  background: #f4f1e8; /* warm cream paper */
  padding: 10px 10px 32px;
  border-radius: 1px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.5),
    0 12px 28px rgba(0,0,0,0.45),
    0 2px 4px rgba(0,0,0,0.35);
  transition:
    transform 0.55s var(--ease),
    box-shadow 0.55s var(--ease),
    z-index 0s 0.55s;
  transform-origin: center 60%;
  /* Per-print tilt — varied via index */
  transform: rotate(calc((var(--bi, 0) * 17 % 11 - 5) * 0.7deg)) translateY(0);
  will-change: transform;
}
/* Five size variants — varied dimensions = NOT uniform */
.polaroid--p0 { width: clamp(180px, 22vw, 260px); }
.polaroid--p1 { width: clamp(150px, 17vw, 200px); margin-top: 14px; }
.polaroid--p2 { width: clamp(200px, 24vw, 280px); margin-top: -6px; }
.polaroid--p3 { width: clamp(160px, 19vw, 220px); margin-top: 20px; }
.polaroid--p4 { width: clamp(170px, 20vw, 240px); margin-top: 4px; }

/* Photo opening — slight inner shadow gives depth */
.polaroid__photo {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #0b0c0e;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5),
              inset 0 2px 6px rgba(0,0,0,0.45);
}
/* Alternate aspect ratios so prints feel hand-picked, not templated */
.polaroid--p1 .polaroid__photo { aspect-ratio: 3 / 4; }
.polaroid--p3 .polaroid__photo { aspect-ratio: 1 / 1; }
.polaroid--p4 .polaroid__photo { aspect-ratio: 5 / 4; }

.polaroid__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.02);
  transition: transform 1.2s var(--ease);
}
/* Tape strip across top — translucent washi tape.
   z-index lifts the tape ABOVE the photo so it visibly pins the print. */
.polaroid::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 58px; height: 16px;
  background: rgba(255, 244, 180, 0.55);
  border: 1px solid rgba(255, 244, 180, 0.35);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  transform: translateX(-50%) rotate(calc((var(--bi, 0) * 13 % 7 - 3) * 1.2deg));
  pointer-events: none;
  z-index: 3;
}
/* Keep the photo opening below the tape. */
.polaroid__photo { z-index: 1; }
/* Alternate tape positions for variety */
.polaroid--p1::before { left: 22%; transform: translateX(-50%) rotate(-12deg); }
.polaroid--p3::before { left: 78%; transform: translateX(-50%) rotate(10deg); }
.polaroid--p4::before { left: 35%; transform: translateX(-50%) rotate(-6deg); }

/* Tape "pinning" — on the steeply cross-angled variants, drop the tape
   downward so the bottom edge slips over the photo by a few pixels.
   That bit of overlap is what makes it read as actually holding the
   print down, not just floating above. */
.polaroid--p1::before { top: 4px;  height: 22px; }
.polaroid--p3::before { top: 3px;  height: 22px; }
.polaroid--p4::before { top: -2px; height: 20px; }

/* Hover: straighten, lift, bring forward */
.polaroid:hover {
  transform: rotate(0deg) translateY(-10px) scale(1.04);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.5),
    0 24px 50px rgba(0,0,0,0.55),
    0 4px 10px rgba(0,0,0,0.4);
  z-index: 5;
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    z-index 0s;
}
.polaroid:hover .polaroid__photo img {
  transform: scale(1.03);
}

/* Handwritten caption in the polaroid white space */
.polaroid--has-caption { padding-bottom: 48px; }
.polaroid__caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  margin: 0;
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.15;
  color: #1a1a1a;
  text-align: center;
  /* Subtle ink-pen feel */
  letter-spacing: 0.005em;
  /* Truncate long captions to 2 lines max */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Slight ink-color variance to avoid uniformity — desync via index */
  filter: hue-rotate(calc(var(--bi, 0) * 7deg)) saturate(0.7) brightness(0.95);
}
/* Pen-color variations by polaroid index — ballpoint blue, pencil grey, black ink */
.polaroid--p0 .polaroid__caption { color: #1a1a1a; }
.polaroid--p1 .polaroid__caption { color: #1f3a6b; } /* ballpoint blue */
.polaroid--p2 .polaroid__caption { color: #2b2b2b; }
.polaroid--p3 .polaroid__caption { color: #3a3530; } /* sepia ink */
.polaroid--p4 .polaroid__caption { color: #1f3a6b; }

/* Empty / placeholder polaroid */
.polaroid--empty .polaroid__photo {
  background: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.04) 0 8px,
    rgba(0,0,0,0.08) 8px 16px
  );
  display: flex; align-items: center; justify-content: center;
}
.polaroid__placeholder {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(0, 0, 0, 0.35);
}
.polaroid__placeholder-text {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.polaroid--empty:hover .polaroid__placeholder {
  color: rgba(0, 0, 0, 0.55);
}

@media (max-width: 900px) {
  .vignette,
  .vignette--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "body"
      "bts";
  }
  .vignette__bts-scatter {
    justify-content: center;
    padding: var(--s-4) var(--s-2);
  }
  .polaroid--p0 { width: clamp(160px, 42vw, 220px); }
  .polaroid--p1 { width: clamp(140px, 36vw, 180px); }
  .polaroid--p2 { width: clamp(170px, 44vw, 230px); }
  .polaroid--p3 { width: clamp(150px, 38vw, 200px); }
  .polaroid--p4 { width: clamp(160px, 40vw, 210px); }
}

/* Mobile — condensed 2-up grid so all polaroids fit without long vertical scroll.
   Keeps tilts, tape, and captions intact; just shrinks footprint. */
@media (max-width: 700px) {
  .vignette__bts-scatter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    justify-items: center;
    gap: var(--s-4) var(--s-3);
    padding: var(--s-4) var(--s-2);
  }
  /* Reset width variants — let grid track decide width.
     Reset stagger margins so rows align cleanly on small screens. */
  .polaroid,
  .polaroid--p0,
  .polaroid--p1,
  .polaroid--p2,
  .polaroid--p3,
  .polaroid--p4 {
    width: 100%;
    max-width: 200px;
    margin-top: 0;
    padding: 7px 7px 24px;
  }
  /* Re-introduce a tiny vertical stagger via nth-child so the grid still feels scattered, not gridded */
  .vignette__bts-scatter .polaroid:nth-child(2n) { margin-top: 14px; }
  .vignette__bts-scatter .polaroid:nth-child(4n+1) { transform: rotate(-2.5deg); }
  .vignette__bts-scatter .polaroid:nth-child(4n+2) { transform: rotate(2deg); }
  .vignette__bts-scatter .polaroid:nth-child(4n+3) { transform: rotate(1.5deg); }
  .vignette__bts-scatter .polaroid:nth-child(4n)   { transform: rotate(-1.5deg); }

  /* Caption tightening for small prints */
  .polaroid--has-caption { padding-bottom: 34px; }
  .polaroid__caption {
    left: 8px;
    right: 8px;
    bottom: 6px;
    font-size: 0.95rem;
    line-height: 1.1;
  }
  /* Smaller tape strip to match smaller prints */
  .polaroid::before {
    width: 40px;
    height: 12px;
    top: -6px;
  }
}

/* Tourism process timeline */
.timeline {
  background: var(--bg-elev);
  border-top: 1px solid var(--line-soft);
  padding: var(--s-10) var(--gutter);
}
.timeline__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.timeline__head { margin-bottom: var(--s-7); max-width: 36ch; }
.timeline__steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  counter-reset: tlstep;
}
.timeline__step {
  padding: var(--s-7) var(--s-5) var(--s-7) 0;
  border-right: 1px solid var(--line);
  position: relative;
  counter-increment: tlstep;
}
.timeline__step:last-child { border-right: none; }
.timeline__step::before {
  content: counter(tlstep, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: var(--s-5);
}
.timeline__step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  line-height: 1.05;
}
.timeline__step p {
  font-size: var(--t-sm);
  color: var(--text-mute);
  line-height: 1.55;
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 900px) {
  .timeline__steps { grid-template-columns: 1fr; }
  .timeline__step { border-right: none; border-bottom: 1px solid var(--line); padding: var(--s-5) 0; }
}

/* =========================================================
   PORTFOLIO PAGE — filter + masonry
   ========================================================= */
.pf-filter {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-7);
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: center;
}
.pf-filter__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-right: var(--s-4);
}
.pf-filter button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-mute);
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.pf-filter button:hover { color: var(--text); border-color: var(--gold-deep); }
.pf-filter button[aria-pressed="true"] {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

.pf-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-10);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
  grid-auto-flow: dense;
}
.pf-item {
  position: relative;
  overflow: hidden;
  background: var(--bg-elev);
  grid-column: span 2;
  aspect-ratio: 4/5;
  transition: opacity 0.4s, transform 0.6s var(--ease);
}
.pf-item--wide { grid-column: span 3; aspect-ratio: 16/10; }
.pf-item--tall { grid-column: span 2; aspect-ratio: 3/5; }
.pf-item--feat { grid-column: span 4; aspect-ratio: 16/10; }
.pf-item.is-hidden { opacity: 0; transform: scale(0.92); pointer-events: none; height: 0; aspect-ratio: auto; padding: 0; margin: 0; border: 0; }
.pf-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
  filter: saturate(0.95);
}
.pf-item:hover img { transform: scale(1.06); filter: saturate(1.1); }
.pf-item__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: linear-gradient(180deg, rgba(10,18,32,0) 0%, rgba(10,18,32,0.92) 100%);
  display: flex; flex-direction: column; gap: var(--s-2);
  transform: translateY(20%);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.pf-item:hover .pf-item__overlay { transform: translateY(0); opacity: 1; }
.pf-item__tag {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.pf-item__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-item, .pf-item--wide, .pf-item--tall, .pf-item--feat { grid-column: span 1; aspect-ratio: 4/5; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
/* (Why a small studio? intro section removed — team now appears directly below hero) */

/* =====================================================================
   TEAM — personalized member cards
   ===================================================================== */
.team {
  background: var(--bg-elev);
  border-top: 1px solid var(--line-soft);
  padding: clamp(var(--s-8), 6vw, var(--s-10)) 0;
}
/* When team flows into the band (same bg), don't draw a divider between them */
.team:has(+ .band) { border-bottom: 0; }
.team__head {
  max-width: var(--container-wide, 1640px);
  margin: 0 auto var(--s-8);
  padding: 0 clamp(var(--s-5), 3vw, var(--s-7));
}
/* Tag-only head — pull the grid up tight (no h2, no subhead) */
.team__head:not(:has(h2)):not(:has(.team__sub)) { margin-bottom: var(--s-4); }
.team__sub {
  max-width: 56ch;
  margin: var(--s-4) 0 0;
  color: var(--text-mute);
  font-size: var(--t-lg);
  line-height: 1.55;
}
.team__grid {
  /* Wider container for the team section so 5 cards fit on one line */
  max-width: var(--container-wide, 1640px);
  margin: 0 auto;
  padding: 0 clamp(var(--s-5), 3vw, var(--s-7));
  display: grid;
  /* Default: 5 columns for the 5-member team on desktop */
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(var(--s-3), 1.5vw, var(--s-5));
}

/* Card */
.member {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.member:hover {
  border-color: var(--gold-deep);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* Gold corner accent — animates to L-bracket on hover */
.member__corner {
  position: absolute;
  top: 0; right: 0;
  width: 24px; height: 24px;
  pointer-events: none;
  z-index: 3;
}
.member__corner::before,
.member__corner::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: width 0.5s var(--ease), height 0.5s var(--ease);
}
.member__corner::before { top: 0; right: 0; width: 24px; height: 2px; }
.member__corner::after  { top: 0; right: 0; width: 2px;  height: 24px; }
.member:hover .member__corner::before { width: 56px; }
.member:hover .member__corner::after  { height: 56px; }

/* Photo */
.member__img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.member__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.95);
  transition: transform 1.6s var(--ease);
}
.member:hover .member__img img { transform: scale(1.04); }

/* Placeholder tile for members without photos yet */
.member__placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-2);
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(180deg, #1c1c1a 0%, #141412 100%);
  color: rgba(255,255,255,0.4);
  transition: color 0.6s var(--ease);
}
.member__placeholder svg { width: 56px; height: 56px; }
.member__placeholder-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.member:hover .member__placeholder { color: rgba(255,255,255,0.62); }

/* Tenure pill on the photo */
.member__tenure {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(0,0,0,0.68);
  border: 1px solid rgba(243, 207, 0, 0.45);
  backdrop-filter: blur(6px);
  padding: 6px 10px;
}

/* Signature shot — small framed thumbnail in top-left */
.member__shot {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  width: 84px;
  aspect-ratio: 3/2;
  overflow: hidden;
  border: 2px solid var(--bg-soft);
  box-shadow: 0 8px 18px rgba(0,0,0,0.55), 0 0 0 1px rgba(243,207,0,0.35);
  transform: rotate(calc((var(--mi, 0) * 17 % 11 - 5) * 0.6deg));
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
  z-index: 2;
}
.member__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}
.member:hover .member__shot {
  transform: rotate(0deg) scale(1.04);
  border-color: var(--gold);
}

/* Body */
.member__body {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
}
.member__role {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.member__loc {
  color: var(--text-faint);
  font-size: 0.72em;
  letter-spacing: 0.08em;
  margin-left: 4px;
}
.member__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
  color: var(--text);
}
.member__bio {
  font-size: var(--t-sm);
  color: var(--text-mute);
  line-height: 1.55;
  margin: 0;
}

/* Signature quote — italic with gold rule + opening and closing quote marks */
/* .member__quote block removed — signature quote line is no longer rendered
   on team cards. */

/* Specialty chips */
.member__specs {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.member__specs li {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease);
}
.member:hover .member__specs li {
  border-color: rgba(243, 207, 0, 0.4);
  color: var(--gold);
  background: rgba(243, 207, 0, 0.04);
}

/* Footer meta row — stat + fun fact */
.member__meta {
  display: flex; align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
}
.member__fun { flex: 1 1 140px; min-width: 0; }
.member__stat {
  display: flex; flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}
.member__stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.member__stat-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 4px;
}
.member__fun {
  font-size: 0.82rem;
  color: var(--text-mute);
  font-style: italic;
  line-height: 1.45;
  margin: 0;
}

/* Mid-desktop — 3-up */
@media (max-width: 1380px) {
  .team__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Tablet — 2-up */
@media (max-width: 1024px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile — single column, tighter spacing, smaller overlays */
@media (max-width: 700px) {
  .team { padding: var(--s-7) 0; }
  .team__head { margin-bottom: var(--s-6); }
  .team__sub { font-size: var(--t-base); }
  .team__grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .member__body { padding: var(--s-5); gap: var(--s-2); }
  .member__name { font-size: var(--t-lg); }
  .member__bio { font-size: 0.92rem; }
  .member__tenure {
    font-size: 0.58rem;
    padding: 5px 9px;
    letter-spacing: 0.14em;
  }
  .member__shot { width: 64px; }

  .member__specs li { font-size: 0.58rem; padding: 4px 8px; letter-spacing: 0.12em; }
  .member__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    margin-top: var(--s-2);
    padding-top: var(--s-3);
  }
  .member__stat-value { font-size: 1.45rem; }
  .member__fun { font-size: 0.78rem; }
}

/* Values list */
.values {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-10) var(--gutter);
}
.values__head { margin-bottom: var(--s-7); }
.values__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.value {
  padding: var(--s-7) var(--s-5) var(--s-7) 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.value:last-child { border-right: none; }
.value__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--gold);
  letter-spacing: 0.12em;
  margin: 0 0 var(--s-5);
}
.value h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  line-height: 1.1;
}
.value p {
  font-size: var(--t-sm);
  color: var(--text-mute);
  margin: 0;
  line-height: 1.55;
  max-width: 32ch;
}
@media (max-width: 900px) {
  .values__grid { grid-template-columns: 1fr; }
  .value { border-right: none; padding: var(--s-5) 0; }
}

/* =========================================================
   CONTACT PAGE — qualifying form
   ========================================================= */
.contact-main {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-10) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-9);
  align-items: start;
}
.contact-sidebar {
  position: sticky;
  top: 120px;
}
.contact-sidebar h2 {
  margin: 0 0 var(--s-5);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
  line-height: 1;
  max-width: 16ch;
}
.contact-sidebar p {
  color: var(--text-mute);
  font-size: var(--t-base);
  line-height: 1.6;
  margin: 0 0 var(--s-7);
  max-width: 40ch;
}
.contact-direct {
  border-top: 1px solid var(--line);
  padding-top: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.contact-direct dt {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-top: var(--s-4);
}
.contact-direct dt:first-child { margin-top: 0; }
.contact-direct dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.contact-direct dd a { color: var(--text); transition: color 0.3s; }
.contact-direct dd a:hover { color: var(--gold); }

/* Form */
.qform {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: clamp(28px, 4vw, 56px);
}
.qform__step {
  display: none;
  animation: fade-in 0.4s var(--ease);
}
.qform__step.is-active { display: block; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.qform__progress {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
}
.qform__dot {
  flex: 1;
  height: 3px;
  background: var(--line);
  transition: background 0.4s var(--ease);
}
.qform__dot.is-active { background: var(--gold); }
.qform__dot.is-done { background: var(--gold-deep); }
.qform__step-num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin: 0 0 var(--s-3);
}
.qform h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 var(--s-6);
  max-width: 26ch;
}
.qform__options {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.qform__option {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  padding: var(--s-5) var(--s-5);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
}
.qform__option:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.qform__option[aria-pressed="true"] {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(230,180,80,0.08), rgba(230,180,80,0.02));
}
.qform__option-sub {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.qform__field {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.qform__field label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.qform__field input,
.qform__field select,
.qform__field textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  padding: var(--s-4);
  width: 100%;
  appearance: none;
}
.qform__field textarea { min-height: 120px; resize: vertical; font-family: var(--font-body); }
.qform__field input:focus,
.qform__field select:focus,
.qform__field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-soft);
}
.qform__row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.qform__actions {
  display: flex; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.qform__back {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s;
}
.qform__back:hover { color: var(--text); }
.qform__back:disabled { visibility: hidden; }
.qform__next {
  appearance: none;
  border: none;
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 14px 24px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s var(--ease);
}
.qform__next:hover { background: var(--gold-warm); transform: translateY(-2px); }
.qform__next:disabled { opacity: 0.4; pointer-events: none; }
.qform__success {
  text-align: center;
  padding: var(--s-7) 0;
}
.qform__success svg { display: block; margin: 0 auto var(--s-5); }
.qform__success h3 { margin: 0 auto var(--s-4); max-width: 22ch; }
.qform__success p { color: var(--text-mute); max-width: 36ch; margin: 0 auto; line-height: 1.6; }

@media (max-width: 900px) {
  .contact-main { grid-template-columns: 1fr; gap: var(--s-7); }
  .contact-sidebar { position: static; }
  .qform__options { grid-template-columns: 1fr; }
  .qform__row { grid-template-columns: 1fr; }
}

/* =========================================================
   COMMERCIAL PAGE: stats / process
   ========================================================= */
.cx-numbers {
  background: var(--bg-elev);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: var(--s-9) 0;
}
.cx-numbers__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-7);
  align-items: end;
}
.cx-numbers__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  max-width: 18ch;
}
.cx-numbers__lead em {
  color: var(--gold-warm);
  font-style: italic;
}
.cx-num {
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
}
.cx-num__big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
}
.cx-num__big sup {
  color: var(--gold);
  font-size: 0.5em;
  vertical-align: super;
}
.cx-num__lbl {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  max-width: 22ch;
}
@media (max-width: 900px) {
  .cx-numbers__inner { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

/* Add for footer: external arrow */
.footer ul a::after { content: ''; }

/* SR-only utility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Improve home page polish: animated 'Peak' integration in hero */
.hero__peak-mark {
  position: absolute;
  top: 140px; right: var(--gutter);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  display: flex; align-items: center; gap: var(--s-3);
  opacity: 0;
  animation: fade-in 1.2s 0.4s var(--ease) forwards;
}
.hero__peak-mark svg { display: block; }
.hero__peak-mark svg .peak-mini { stroke: var(--gold); stroke-width: 1.4; fill: none; }
@media (max-width: 800px) { .hero__peak-mark { display: none; } }

/* Mobile nav menu */
.menu-btn {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
}
.menu-btn span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  position: relative;
  transition: background 0.2s;
}
.menu-btn span::before,
.menu-btn span::after {
  content: '';
  position: absolute; left: 0;
  width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease);
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .menu-btn { display: inline-flex; z-index: 110; position: relative; }
  /* Remove backdrop-filter from .nav so it doesn't create a containing block
     that traps position:fixed descendants. Move blur to nav__inner instead. */
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
  }
  .nav__inner {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background 0.3s var(--ease);
  }
  /* Once user scrolls, fade in a subtle solid bar so logo/menu stay readable over light hero sections */
  .nav.is-scrolled .nav__inner {
    background: rgba(10,18,32,0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* Hide nav background while menu is open so overlay sits flush */
  .nav:has(.nav__links.is-open) .nav__inner {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgb(10, 18, 32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--s-4);
    padding: 100px var(--gutter) var(--s-7);
    margin: 0;
    list-style: none;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    visibility: hidden;
    z-index: 105;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav__links.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .nav__links li {
    display: list-item !important;
    width: 100%;
    list-style: none;
  }
  .nav__links a {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 2vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text) !important;
    line-height: 1.1;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav__links a:hover,
  .nav__links a:active { color: var(--gold) !important; }
  .nav__links a.nav__cta {
    margin-top: var(--s-5);
    padding: 18px 24px !important;
    font-size: var(--t-base) !important;
    background: var(--gold) !important;
    color: var(--bg) !important;
    text-align: center;
    border-bottom: none;
  }
  /* Prevent body scroll while menu is open */
  body:has(.nav__links.is-open) { overflow: hidden; }
}

/* Animated divider — geometric peak line that draws on scroll */
.peak-divider {
  height: 80px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: var(--bg);
}
.peak-divider svg { width: 100%; max-width: 220px; height: 40px; opacity: 0.6; }
.peak-divider svg path {
  stroke: var(--gold);
  stroke-width: 1;
  fill: none;
}


/* ============================================
   LEGAL PAGE (privacy / terms)
============================================ */
.legal {
  padding: var(--s-10) var(--gutter) var(--s-12);
  background: var(--bg);
}
.legal__inner {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
}
.legal__inner h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: var(--s-10) 0 var(--s-4);
  color: var(--text);
}
.legal__inner h2:first-of-type { margin-top: 0; }
.legal__inner h3 {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: var(--s-7) 0 var(--s-3);
  color: var(--gold-warm);
  letter-spacing: -0.005em;
}
.legal__inner p {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-mute);
  margin: 0 0 var(--s-4);
}
.legal__inner p strong { color: var(--text); font-weight: 600; }
.legal__inner a {
  color: var(--gold-warm);
  text-decoration: underline;
  text-decoration-color: rgba(230,180,80,0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
}
.legal__inner a:hover { text-decoration-color: var(--gold-warm); }
.legal__inner hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-10) 0;
}

/* ============================================
   AMBIENT BACKGROUND LAYER
   Drifting golden light blobs + grain + faint
   mountain silhouettes parallaxing on scroll.
   Sits behind all content via z-index: -1 on
   <body>::before / ::after / .ambient
============================================ */
body { position: relative; overflow-x: hidden; isolation: isolate; }

.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.ambient__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  mix-blend-mode: screen;
  will-change: transform;
}
.ambient__blob--1 {
  width: 720px; height: 720px;
  top: -120px; left: -120px;
  background: radial-gradient(circle, rgba(243, 207, 0, 0.7), transparent 60%);
  animation: drift-1 32s ease-in-out infinite;
}
.ambient__blob--2 {
  width: 560px; height: 560px;
  top: 40%; right: -200px;
  background: radial-gradient(circle, rgba(77, 168, 181, 0.4), transparent 60%);
  animation: drift-2 40s ease-in-out infinite;
}
.ambient__blob--3 {
  width: 800px; height: 800px;
  bottom: -200px; left: 30%;
  background: radial-gradient(circle, rgba(243, 217, 0, 0.35), transparent 60%);
  animation: drift-3 50s ease-in-out infinite;
}
@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(80px, 120px) scale(1.15); }
  66% { transform: translate(-40px, 80px) scale(0.92); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-160px, -60px) scale(1.1); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(120px, -100px) scale(1.05); }
  80% { transform: translate(-80px, 40px) scale(0.95); }
}

/* Grain noise overlay — adds cinematic film texture */
.ambient__grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.95  0 0 0 0 0.95  0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: grain-shift 1.5s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, -2%); }
  40%  { transform: translate(2%, -4%); }
  60%  { transform: translate(-2%, 3%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Cinematic light-leak layer — replaces the old mountain silhouette.
   Three soft warm streaks drift slowly across the lower viewport at
   different speeds & angles, evoking vintage film leaks bleeding
   onto a darkroom print. On-brand for a cinematography company. */
.ambient__peaks {
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  overflow: hidden;
  /* Stacking three angled gradients, each animated independently via
     pseudo-elements below. The base layer is transparent. */
}
.ambient__peaks::before,
.ambient__peaks::after {
  content: "";
  position: absolute;
  left: -40%;
  right: -40%;
  height: 280px;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(60px);
  will-change: transform, opacity;
}
/* Lower warm streak — the dominant light leak */
.ambient__peaks::before {
  bottom: 8%;
  background:
    linear-gradient(100deg,
      transparent 0%,
      rgba(243, 207, 0, 0.00) 18%,
      rgba(243, 207, 0, 0.34) 38%,
      rgba(255, 196, 90, 0.42) 50%,
      rgba(243, 207, 0, 0.30) 62%,
      rgba(243, 207, 0, 0.00) 82%,
      transparent 100%);
  transform: translate3d(-12%, 0, 0) rotate(-4deg);
  opacity: 0.55;
  animation: leak-drift-a 28s ease-in-out infinite;
}
/* Upper cool/teal counter-streak, much subtler */
.ambient__peaks::after {
  top: 12%;
  background:
    linear-gradient(80deg,
      transparent 0%,
      rgba(77, 168, 181, 0.00) 22%,
      rgba(77, 168, 181, 0.22) 46%,
      rgba(220, 240, 240, 0.18) 56%,
      rgba(77, 168, 181, 0.18) 64%,
      rgba(77, 168, 181, 0.00) 84%,
      transparent 100%);
  transform: translate3d(8%, 0, 0) rotate(3deg);
  opacity: 0.32;
  animation: leak-drift-b 38s ease-in-out infinite;
}
@keyframes leak-drift-a {
  0%   { transform: translate3d(-14%, 6px, 0) rotate(-4deg); opacity: 0.38; }
  35%  { transform: translate3d(-2%,  -8px, 0) rotate(-2deg); opacity: 0.62; }
  65%  { transform: translate3d(6%,    4px, 0) rotate(-5deg); opacity: 0.48; }
  100% { transform: translate3d(-14%,  6px, 0) rotate(-4deg); opacity: 0.38; }
}
@keyframes leak-drift-b {
  0%   { transform: translate3d(8%,  -6px, 0) rotate(3deg);  opacity: 0.20; }
  50%  { transform: translate3d(-6%, 10px, 0) rotate(5deg);  opacity: 0.38; }
  100% { transform: translate3d(8%,  -6px, 0) rotate(3deg);  opacity: 0.20; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient__blob, .ambient__grain { animation: none !important; }
  .ambient__peaks::before, .ambient__peaks::after { animation: none !important; }
}
@media (max-width: 760px) {
  .ambient__blob { filter: blur(80px); opacity: 0.14; }
}

/* =========================================================
   COMMERCIAL — Explorer v2 (separated columns, smooth crossfade)
   ========================================================= */
.cx-explorer {
  padding: var(--s-10) var(--gutter) var(--s-9);
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.cx-explorer__head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-7);
  align-items: end;
  margin-bottom: var(--s-8);
}
.cx-explorer__head h2 { margin: var(--s-3) 0 0; }
/* When eyebrow tag has been removed, the h2 sits flush at the top —
   no dead margin above it. */
.cx-explorer__head > div > h2:first-child { margin-top: 0; }
.cx-explorer__head p { color: var(--text-mute); max-width: 48ch; }
@media (max-width: 900px) {
  .cx-explorer__head { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Split: lanes on left, sticky preview on right */
.cx-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--s-8);
  align-items: start;
}
.cx-lanes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--line);
}
.cx-lanes > li { border-bottom: 1px solid var(--line); }

.cx-lane {
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: var(--s-5) var(--s-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
  position: relative;
  transition: padding 380ms var(--ease), background 380ms var(--ease);
}
.cx-lane::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: width 420ms var(--ease);
}
.cx-lane:hover,
.cx-lane:focus-visible { padding-left: var(--s-6); outline: none; }
.cx-lane.is-active { padding-left: var(--s-7); background: linear-gradient(90deg, rgba(243, 207, 0, 0.06), transparent 70%); }
.cx-lane.is-active::before { width: var(--s-5); }

.cx-lane__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-faint);
  letter-spacing: 0.08em;
  width: 28px;
}
.cx-lane.is-active .cx-lane__num,
.cx-lane:hover .cx-lane__num { color: var(--gold); }

.cx-lane__body { display: grid; gap: 4px; }
.cx-lane__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 280ms var(--ease);
}
.cx-lane:hover .cx-lane__title,
.cx-lane.is-active .cx-lane__title { color: var(--gold-warm); }
.cx-lane__desc {
  color: var(--text-mute);
  font-size: var(--t-sm);
  line-height: 1.45;
  max-width: 52ch;
}

.cx-lane__arrow {
  color: var(--text-faint);
  font-size: 1.2rem;
  transform: translateX(-6px);
  opacity: 0.6;
  transition: transform 380ms var(--ease), opacity 280ms var(--ease), color 280ms var(--ease);
}
.cx-lane:hover .cx-lane__arrow,
.cx-lane.is-active .cx-lane__arrow {
  transform: translateX(0);
  opacity: 1;
  color: var(--gold);
}

/* Sticky preview right column */
.cx-preview {
  position: sticky;
  top: 96px;
  display: grid;
  gap: var(--s-4);
}
.cx-preview__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.65);
}
.cx-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 520ms var(--ease);
  pointer-events: none;
}
.cx-frame.is-active { opacity: 1; }
.cx-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 8000ms ease-out;
}
.cx-frame.is-active img { transform: scale(1); }
.cx-frame figcaption {
  position: absolute;
  left: var(--s-5); bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 18, 32, 0.55);
  padding: 6px 10px;
  border-radius: 4px;
  backdrop-filter: blur(6px);
}
.cx-preview__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,18,32,0) 55%, rgba(10,18,32,0.55) 100%);
  pointer-events: none;
}
.cx-preview__cta { display: flex; justify-content: flex-end; }

/* Mobile-only inline thumbnail on each lane row */
.cx-lane__thumb { display: none; }

@media (max-width: 980px) {
  .cx-split { grid-template-columns: 1fr; gap: var(--s-6); }
  .cx-preview { display: none; }

  .cx-lane {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: var(--s-3);
    padding-right: var(--s-3) !important;
  }
  .cx-lane__body { min-width: 0; }
  .cx-lane__title { white-space: normal; }
  .cx-lane__desc { white-space: normal; }

  .cx-lane__thumb {
    display: block;
    flex: 0 0 auto;
    width: 96px;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    position: relative;
  }
  .cx-lane__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92) brightness(0.92);
    transition: filter 260ms var(--ease), transform 320ms var(--ease);
  }
  .cx-lane.is-active .cx-lane__thumb {
    border-color: rgba(243, 207, 0, 0.55);
    box-shadow: 0 6px 22px rgba(243, 207, 0, 0.18);
  }
  .cx-lane.is-active .cx-lane__thumb img {
    filter: saturate(1.02) brightness(1);
    transform: scale(1.04);
  }
  .cx-lane:hover .cx-lane__thumb img,
  .cx-lane:focus-visible .cx-lane__thumb img {
    filter: saturate(1.02) brightness(1);
  }
}

@media (max-width: 520px) {
  .cx-lane__thumb { width: 76px; }
  .cx-lane { column-gap: var(--s-2); }
}

/* ============== Detail panels (clicked category reveals) ============== */
.cx-details {
  margin-top: var(--s-9);
  display: grid;
  gap: var(--s-7);
}
.cx-detail {
  display: none;
  border-top: 1px solid var(--line);
  padding-top: var(--s-7);
  scroll-margin-top: 96px;
}
.cx-detail.is-active {
  display: block;
  animation: cxDetailIn 600ms var(--ease) both;
}
@keyframes cxDetailIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cx-detail__head { margin-bottom: var(--s-6); max-width: 64ch; }
.cx-detail__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: var(--s-3);
}
.cx-detail__head h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
}
.cx-detail__head p { color: var(--text-mute); }

.cx-detail__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}
@media (max-width: 900px) {
  .cx-detail__grid { grid-template-columns: 1fr; }
}

.cx-detail__video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.cx-detail__video-frame img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.85;
}
.cx-detail__video-caption {
  position: absolute;
  left: var(--s-4); bottom: var(--s-3); right: var(--s-4);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--text);
  background: rgba(10, 18, 32, 0.6);
  padding: 8px 12px;
  border-radius: 4px;
  backdrop-filter: blur(6px);
}

/* Play button overlay — clean centered triangle, no background circle, no pulse ring */
.play-btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: none;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,0.6));
  transition: transform 320ms var(--ease), filter 320ms var(--ease);
}
.play-btn::before { content: none; }
.play-btn::after  { content: none; }
.play-btn > span {
  display: block;
  width: 0; height: 0;
  border-left: 26px solid var(--gold);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  margin-left: 6px;
  filter: drop-shadow(0 0 14px rgba(243, 207, 0, 0.5));
  transition: border-left-color 220ms var(--ease);
}
.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.10);
  filter: drop-shadow(0 8px 26px rgba(243, 207, 0, 0.55));
}
.play-btn:hover > span { border-left-color: var(--gold-warm); }

/* Behind-the-scenes thumb grid */
.cx-detail__bts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  align-content: start;
}
.cx-detail__bts li {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.cx-detail__bts li:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
.cx-detail__bts img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.cx-detail__bts li:hover img { transform: scale(1.05); }
.cx-detail__bts span {
  position: absolute;
  left: 8px; bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 18, 32, 0.6);
  padding: 4px 8px;
  border-radius: 3px;
}

.cx-detail__projects {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5);
  display: grid;
  gap: var(--s-2);
}
.cx-detail__projects li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  color: var(--text-mute);
}
.cx-detail__projects strong {
  color: var(--text);
  font-weight: 600;
  margin-right: var(--s-2);
}

/* =========================================================
   PROCESS — Interactive phase stepper
   ========================================================= */
.process {
  padding: var(--s-7) var(--gutter) var(--s-9);
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.process__head { margin-bottom: var(--s-5); max-width: none; }
.process__head h2 {
  margin: 0 0 var(--s-2);
  white-space: nowrap;
}
.process__head .lede {
  color: var(--text-mute);
  white-space: nowrap;
  margin: 0;
  max-width: none;
}
@media (max-width: 900px) {
  .process__head h2, .process__head .lede { white-space: normal; }
}

.process__rail {
  position: relative;
  height: 2px;
  background: var(--line);
  margin-bottom: var(--s-6);
  border-radius: 1px;
  overflow: hidden;
}
.process__rail-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 25%;
  background: linear-gradient(90deg, var(--gold), var(--gold-warm));
  transition: width 680ms var(--ease);
  box-shadow: 0 0 18px rgba(243, 207, 0, 0.45);
}

.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  align-items: stretch;
}
@media (max-width: 980px) {
  .process__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .process__steps { grid-template-columns: 1fr; }
}

.phase {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--s-5);
  color: inherit;
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  overflow: hidden;
  height: 100%;
}
.phase.is-active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(243, 207, 0, 0.06), transparent 60%), var(--bg-elev);
}
.phase::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--ease);
}
.phase.is-active::after { transform: scaleX(1); }

.phase__head {
  display: grid;
  grid-template-areas:
    "num    chev"
    "icon   icon"
    "title  title"
    "time   time";
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  align-items: center;
}
.phase__num   { grid-area: num; }
.phase__icon  { grid-area: icon; justify-self: start; margin: var(--s-3) 0 var(--s-2); }
.phase__title { grid-area: title; margin: 0; }
.phase__time  { grid-area: time; }
.phase__chev  { grid-area: chev; justify-self: end; }
.phase__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  color: var(--text-faint);
}
.phase.is-active .phase__num { color: var(--gold); }

.phase__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--text-mute);
  transition: color 380ms var(--ease);
}
.phase.is-active .phase__icon { color: var(--gold); }
.phase__icon svg { width: 100%; height: 100%; }

.phase__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.phase__time {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.phase__chev {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--text-mute);
  font-size: 1.2rem;
  transition: transform 380ms var(--ease), color 280ms var(--ease);
}
.phase.is-active .phase__chev { transform: rotate(45deg); color: var(--gold); }

.phase__body {
  opacity: 1;
  flex: 1;
}
.phase__body p {
  color: var(--text-mute);
  font-size: var(--t-sm);
  line-height: 1.6;
  margin: 0;
}
.phase__meta {
  list-style: none;
  margin: 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: var(--s-2);
}
.phase__meta li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--s-3);
  font-size: var(--t-xs);
}
.phase__meta span {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.phase__meta strong { color: var(--text); font-weight: 500; }

/* ============== SVG motion graphics inside .phase__icon ============== */
/* At rest: shapes are fully drawn but slightly faded. On activation: full opacity + draw animation replays via keyframes. */
.phase-svg-ring, .phase-svg-handle,
.phase-svg-page, .phase-svg-line,
.phase-svg-body, .phase-svg-lens,
.phase-svg-axis, .phase-svg-wave {
  opacity: 0.55;
  transition: opacity 380ms var(--ease);
}
.phase.is-active .phase-svg-ring,
.phase.is-active .phase-svg-handle,
.phase.is-active .phase-svg-page,
.phase.is-active .phase-svg-line,
.phase.is-active .phase-svg-body,
.phase.is-active .phase-svg-lens,
.phase.is-active .phase-svg-axis,
.phase.is-active .phase-svg-wave { opacity: 1; }

@keyframes drawRing  { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 0; } }
@keyframes drawDash  { from { stroke-dashoffset: var(--dash, 50); } to { stroke-dashoffset: 0; } }
.phase.is-active .phase-svg-ring   { stroke-dasharray: 100; animation: drawDash 1200ms var(--ease); --dash: 100; }
.phase.is-active .phase-svg-handle { stroke-dasharray: 22;  animation: drawDash 600ms var(--ease) 600ms backwards; --dash: 22; }
.phase-svg-dot { transform-origin: 28px 28px; transform: scale(1); transition: transform 380ms var(--ease); }
.phase.is-active .phase-svg-dot { animation: dotPop 380ms var(--ease) 900ms; }
@keyframes dotPop { from { transform: scale(0); } to { transform: scale(1); } }

.phase.is-active .phase-svg-page { stroke-dasharray: 160; animation: drawDash 1100ms var(--ease); --dash: 160; }
.phase.is-active .phase-svg-line--1 { stroke-dasharray: 24; animation: drawDash 420ms var(--ease) 700ms backwards; --dash: 24; }
.phase.is-active .phase-svg-line--2 { stroke-dasharray: 24; animation: drawDash 420ms var(--ease) 900ms backwards; --dash: 24; }
.phase.is-active .phase-svg-line--3 { stroke-dasharray: 24; animation: drawDash 420ms var(--ease) 1100ms backwards; --dash: 24; }
.phase.is-active .phase-svg-line--4 { stroke-dasharray: 24; animation: drawDash 420ms var(--ease) 1300ms backwards; --dash: 24; }

.phase.is-active .phase-svg-body { stroke-dasharray: 140; animation: drawDash 1000ms var(--ease); --dash: 140; }
.phase.is-active .phase-svg-lens { stroke-dasharray: 140; animation: drawDash 900ms var(--ease) 350ms backwards; --dash: 140; }
.phase-svg-reel {
  transform-origin: center;
  transform: scale(0);
  transition: transform 380ms var(--ease);
}
.phase.is-active .phase-svg-reel--1,
.phase.is-active .phase-svg-reel--2 {
  transform: scale(1);
  transition-delay: 700ms;
  animation: reelSpin 4s linear infinite 1100ms;
}
@keyframes reelSpin {
  to { transform: rotate(360deg); }
}
.phase-svg-rec {
  opacity: 0;
  transition: opacity 280ms var(--ease) 900ms;
}
.phase.is-active .phase-svg-rec {
  opacity: 1;
  animation: recBlink 1.2s ease-in-out infinite 1200ms;
}
@keyframes recBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.phase.is-active .phase-svg-axis { stroke-dasharray: 50;  animation: drawDash 600ms var(--ease); --dash: 50; }
.phase.is-active .phase-svg-wave { stroke-dasharray: 120; animation: drawDash 1400ms var(--ease) 300ms backwards; --dash: 120; }
.phase-svg-cursor {
  opacity: 0;
  transition: opacity 280ms var(--ease) 1500ms;
}
.phase.is-active .phase-svg-cursor {
  opacity: 1;
  animation: cursorSlide 3s ease-in-out infinite 1700ms;
}
@keyframes cursorSlide {
  0% { transform: translateX(-22px) translateY(2px); }
  50% { transform: translateX(8px) translateY(-4px); }
  100% { transform: translateX(-22px) translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .phase-svg-ring, .phase-svg-handle, .phase-svg-dot,
  .phase-svg-page, .phase-svg-line, .phase-svg-body, .phase-svg-lens,
  .phase-svg-reel, .phase-svg-rec, .phase-svg-axis, .phase-svg-wave, .phase-svg-cursor {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* =========================================================
   CX CASES — Rich case studies inside commercial detail panels
   ========================================================= */
.cx-cases {
  margin: var(--s-6) 0 var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
}
.cx-cases__head {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--s-4);
  font-weight: 500;
}
.cx-cases__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}
.cx-case {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: var(--s-5);
  align-items: start;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}
.cx-case:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.cx-case__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
}
.cx-case__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(0.92);
  transition: transform 600ms var(--ease), filter 380ms var(--ease);
}
.cx-case:hover .cx-case__thumb img {
  transform: scale(1.04);
  filter: saturate(1) brightness(1);
}
.cx-case__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cx-case__sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cx-case__title {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.2;
  margin: 0;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.cx-case__quote {
  margin: var(--s-2) 0 0;
  padding: 0 0 0 var(--s-4);
  border-left: 2px solid var(--gold);
  font-style: italic;
  color: var(--gold-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.cx-case__desc {
  margin: 0;
  color: var(--text-mute);
  font-size: 0.95rem;
  line-height: 1.65;
}
@media (max-width: 760px) {
  .cx-case {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .cx-case__thumb {
    max-width: 320px;
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================
   PROCESS — Feathered category-specific background imagery
   ========================================================= */
.phase {
  isolation: isolate;
}
.phase::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 65% 45%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 70% at 65% 45%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 78%);
  filter: grayscale(0.35) saturate(0.7);
  transition: opacity 600ms var(--ease);
}
.phase[data-phase="1"]::before { background-image: url("../images/behind-the-scenes-dp.png"); }
.phase[data-phase="2"]::before { background-image: url("../images/studio-editor.png"); }
.phase[data-phase="3"]::before { background-image: url("../images/commercial-music-venue.png"); }
.phase[data-phase="4"]::before { background-image: url("../images/studio-editor.png"); background-position: right center; }
.phase:hover::before { opacity: 0.10; }
.phase.is-active::before { opacity: 0.13; }

/* Keep all phase content above the feathered bg */
.phase > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .phase::before { transition: none; }
}

/* =========================================================
   DELIVERABLES — Real Estate page format showcase
   ========================================================= */
.deliverables-intro {
  max-width: var(--container);
  margin: var(--s-4) auto var(--s-5);
  padding: 0 var(--gutter);
}
.deliverables-intro__inner { max-width: 64ch; }
.deliverables-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: var(--s-3) 0 var(--s-3);
  color: var(--text);
}

.deliverable {
  max-width: var(--container);
  margin: 0 auto var(--s-9);
  padding: 0 var(--gutter);
}
.deliverable__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  align-items: start;
  max-width: 92ch;
  margin-bottom: var(--s-6);
}
.deliverable__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  color: var(--gold);
  padding-top: 0.4em;
}
.deliverable__head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
  color: var(--text);
}
.deliverable__head p {
  color: var(--text-mute);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

/* ===== VCAROUSEL — universal carousel (landscape + vertical) ===== */
.vcarousel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
}
.vcarousel__track {
  position: relative;
  overflow: hidden;
  padding: var(--s-4) 0;
}
/* Side-fade gradients removed so the carousel section blends seamlessly
   into the surrounding page. (They were solid var(--bg) bands which read
   as a visible "rectangle" frame against the lighter ambient background.) */
.vcarousel__track::before,
.vcarousel__track::after { content: none; }

.vcarousel__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 280ms var(--ease);
  z-index: 4;
  flex-shrink: 0;
}
.vcarousel__arrow svg { width: 22px; height: 22px; }
.vcarousel__arrow:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  transform: scale(1.08);
}
.vcarousel__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}
/* Looping carousels keep arrows always active */
.vcarousel[data-loop="true"] .vcarousel__arrow { opacity: 1; }

/* Hospitality testimonial carousel: arrows always render (>1 video) and
   must sit visually centered on the media, not on the whole card (media
   + name + role). The vcarousel is position:relative and arrows are
   absolutely positioned at the measured media center via CSS var
   --vcarousel-media-center (published by JS in app.js). */
.hosp-block--testimonials .vcarousel { position: relative; align-items: start; }
.hosp-block--testimonials .vcarousel__arrow {
  position: absolute;
  top: var(--vcarousel-media-center, 50%);
  transform: translateY(-50%);
  z-index: 3;
}
.hosp-block--testimonials .vcarousel__arrow--prev { left: 0; }
.hosp-block--testimonials .vcarousel__arrow--next { right: 0; }
.hosp-block--testimonials .vcarousel__arrow:hover { transform: translateY(-50%) scale(1.08); }

/* ===== VCARD — landscape variant (16:9) ===== */
.vcard {
  flex: 0 0 auto;
  transition: transform 600ms var(--ease), filter 600ms var(--ease), opacity 600ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  /* Very subtle feather: tiny blur, gentle dim, slight scale */
  filter: blur(0.6px);
  opacity: 0.82;
  transform: scale(0.95);
  transform-origin: center;
  pointer-events: none;
}
.vcard.is-center {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}
/* Cards directly adjacent to center stay sharp — only the outermost cards
   keep the soft feather blur. */
.vcard.is-near {
  filter: blur(0);
  opacity: 0.95;
  transform: scale(0.97);
  pointer-events: auto;
  z-index: 1;
}

/* Stills carousels (photos / twilights): no side feather, all sharp */
.vcarousel--stills .vcard,
.vcarousel--stills .vcard.is-center {
  filter: none;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.vcarousel--stills .vcard.is-center .vcard__media {
  /* Keep the gold focus glow as a subtle accent on the centered photo */
  border-color: rgba(243, 207, 0, 0.25);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}
.vcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
}
.vcard.is-center .vcard__media {
  border-color: rgba(243, 207, 0, 0.4);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(243,207,0,0.15);
}
.vcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Play button — clean centered triangle, no circular background */
.vcard__media .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  outline: 0;
  box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 280ms var(--ease), filter 280ms var(--ease);
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
}
.vcard__media .play-btn::before,
.vcard__media .play-btn::after { display: none; content: none; }
.vcard__media .play-btn span {
  display: block;
  width: 0; height: 0;
  border-left: 22px solid var(--gold);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  margin-left: 4px;
  filter: drop-shadow(0 0 12px rgba(243, 207, 0, 0.45));
  transition: border-left-color 220ms var(--ease), transform 220ms var(--ease);
}
.vcard__media .play-btn:hover {
  transform: translate(-50%, -50%) scale(1.12);
  background: transparent;
}
.vcard__media .play-btn:hover span { border-left-color: var(--gold-warm); }
.vcard.is-center .vcard__media .play-btn { opacity: 1; }

.vcard__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 var(--s-2);
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.vcard.is-center .vcard__meta { opacity: 1; }

/* Hospitality resident testimonials: always show the meta (name + role)
   below every card, not just the center one, so each subject reads even
   when their card is feathered/off-center. */
.hosp-block--testimonials .vcard__meta { opacity: 1; }
.vcard__type {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Yellow type label centered below the video — always visible across all cards */
.vcard__type--below {
  display: block;
  text-align: center;
  margin-top: var(--s-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcard--vertical .vcard__type--below {
  font-size: 0.6rem;
  margin-top: var(--s-2);
}
.vcard__meta h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
  font-weight: 500;
}
.vcard--still .vcard__media .play-btn { display: none; }

/* ===== Landscape carousel layout (3-up) ===== */
.vcarousel:not(.vcarousel--vertical) .vcarousel__track {
  display: flex;
  gap: var(--s-5);
  justify-content: center;
}

/* Desktop-only arrow hide — for carousels where every card already fits
   on screen at wide viewports (e.g. 3 senior-living testimonials).
   Below 640px the mobile carousel only shows 1 card, so arrows must return. */
@media (min-width: 641px) {
  .vcarousel--no-arrows-desktop .vcarousel__arrow { display: none; }
}
.vcarousel:not(.vcarousel--vertical) .vcard {
  width: calc((100% - 2 * var(--s-5)) / 3);
  max-width: 380px;
}

/* Cinematic Video Tours carousel: slightly larger cards, no caption below
   (the type/duration label was removed at Matt's request). Widening the
   max-width lets the 16:9 media grow ~15% at wide viewports without
   changing the 3-up layout math. */
#tours .vcarousel:not(.vcarousel--vertical) .vcard {
  max-width: 440px;
}

/* ===== Vertical reels variant (5-up vertical 9:16) ===== */
.vcarousel--vertical .vcarousel__track {
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  align-items: stretch;
}
.vcard--vertical {
  width: calc((100% - 4 * var(--s-4)) / 5);
  max-width: 220px;
  gap: var(--s-2);
}
.vcard--vertical .vcard__media {
  aspect-ratio: 9 / 16;
  border-radius: 14px;
}
.vcard--vertical .vcard__type {
  text-align: center;
  font-size: 0.65rem;
}

/* Responsive: collapse to fewer visible cards on smaller screens */
@media (max-width: 980px) {
  .vcarousel:not(.vcarousel--vertical) .vcard {
    width: calc((100% - var(--s-5)) / 2);
  }
  .vcard--vertical { width: calc((100% - 2 * var(--s-4)) / 3); }
}
@media (max-width: 640px) {
  /* Mobile carousel peek layout — shows a hint of the prev and next card
     on either side of the centered card so users know there's more to see.
     Three cards are rendered by JS (prev, center, next) with .is-peek on the
     flanking two. Peek flanks are wide enough to show recognizable thumbnail
     content (~24% width ≈ 90px at 375px viewport). */
  .vcarousel:not(.vcarousel--vertical) .vcarousel__track {
    gap: var(--s-3);
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .vcarousel:not(.vcarousel--vertical) .vcard {
    width: 62%;
    max-width: none;
    flex: 0 0 auto;
    transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  }
  .vcarousel:not(.vcarousel--vertical) .vcard.is-peek {
    width: 24%;
    opacity: 0.55;
    transform: scale(0.94);
    pointer-events: none;
  }
  .vcarousel:not(.vcarousel--vertical) .vcard.is-peek .vcard__meta,
  .vcarousel:not(.vcarousel--vertical) .vcard.is-peek .vcard__type,
  .vcarousel:not(.vcarousel--vertical) .vcard.is-peek .vcard__play,
  .vcarousel:not(.vcarousel--vertical) .vcard.is-peek .play-btn { display: none; }
  /* No blur — keep peek thumbnails legible so users recognize what's next */
  .vcarousel:not(.vcarousel--vertical) .vcard.is-peek .vcard__media {
    filter: none;
  }
  .vcard--vertical { width: 60%; max-width: 240px; }
  .vcarousel__track { padding: var(--s-3) 0; }
  .vcarousel__arrow { width: 38px; height: 38px; }
  .deliverable__head { grid-template-columns: 1fr; gap: var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
  .vcard { transition: none; }
}

/* =========================================================
   BEFORE / AFTER SLIDER
   ========================================================= */
.ba-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
@media (max-width: 860px) { .ba-row { grid-template-columns: 1fr; } }

.ba {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ba__pair {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--bg-elev);
  user-select: none;
  touch-action: none;
}
.ba__after,
.ba__before {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ba__before-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Clip from the RIGHT — width of the visible "before" reveal is controlled
     by --ba-pos (0–100). At 50%, right inset = 50%, showing left half. */
  clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}
.ba__before-wrap .ba__before {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.ba__line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
}
.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.15);
  pointer-events: none;
}
.ba__grip svg { width: 22px; height: 22px; }
.ba__input {
  /* Visually hidden range — keeps keyboard/a11y access; pointer drag is on .ba__pair */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.ba__pair { cursor: ew-resize; }
.ba__label {
  position: absolute;
  top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10,18,32,0.7);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 4;
}
.ba__label--before { left: var(--s-3); }
.ba__label--after  { right: var(--s-3); }
.ba figcaption {
  font-size: 0.9rem;
  color: var(--text-mute);
  line-height: 1.55;
}

/* ============== GALLERY MOSAIC + LIGHTBOX ============== */
.gallery {
  position: relative;
}
/* Mosaic grid — 4 cols desktop, 3 tablet, 2 mobile. Row height small so spans build mosaic. */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 110px;
  grid-auto-flow: dense;
  gap: 14px;
}
@media (max-width: 1100px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 130px; }
}
@media (max-width: 720px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 10px; }
}
@media (max-width: 460px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 110px; }
}

.gphoto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  cursor: zoom-in;
  /* Default size: 1 col, 2 rows tall (normal landscape tile) */
  grid-column: span 1;
  grid-row: span 2;
}
/* Mosaic size variants */
.gphoto--tall      { grid-row: span 3; }                  /* portrait */
.gphoto--wide      { grid-column: span 2; grid-row: span 2; }  /* landscape feature */
.gphoto--hero      { grid-column: span 2; grid-row: span 3; }  /* large feature */
.gphoto--small     { grid-row: span 2; }
@media (max-width: 720px) {
  .gphoto--wide,
  .gphoto--hero    { grid-column: span 2; }
  .gphoto--hero    { grid-row: span 3; }
}

.gphoto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease), filter 350ms var(--ease);
  filter: brightness(0.96) saturate(0.98);
}
.gphoto:hover img {
  transform: scale(1.04);
  filter: brightness(1.05) saturate(1.05);
}
.gphoto__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, rgba(10,18,32,0) 0%, rgba(10,18,32,0.78) 70%, rgba(10,18,32,0.92) 100%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
  pointer-events: none;
}
.gphoto:hover .gphoto__caption,
.gphoto:focus-visible .gphoto__caption {
  opacity: 1;
  transform: translateY(0);
}
.gphoto:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Hidden-until-expanded items */
.gphoto.is-hidden {
  display: none;
}
.gallery__more {
  margin-top: var(--s-5);
  display: flex;
  justify-content: center;
}
.gallery__more button {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(243, 207, 0, 0.35);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}
.gallery__more button:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
.gallery__more.is-done { display: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 9, 16, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(20px, 4vw, 64px);
}
.lightbox.is-open {
  display: flex;
  animation: lbFade 220ms ease;
}
@keyframes lbFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox__stage {
  position: relative;
  max-width: min(1400px, 100%);
  max-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.lightbox__img-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 200px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: lbZoom 280ms var(--ease);
}
@keyframes lbZoom {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox__cap {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lightbox__counter {
  color: var(--gold);
}
.lightbox__title {
  color: var(--text);
}

/* Hide gallery captions: don't overlay text on hover-thumbnails or the
   expanded lightbox image. Captions remain in the DOM (data-title +
   inner span) for screen-reader labels and future use, just not shown. */
.gphoto__caption { display: none !important; }
.lightbox__title { display: none !important; }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(20, 34, 58, 0.7);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
  z-index: 2;
}
.lightbox__nav:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
  transform: translateY(-50%) scale(1.06);
}
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(20, 34, 58, 0.7);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 220ms var(--ease), color 220ms var(--ease);
  z-index: 3;
}
.lightbox__close:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.lightbox__close svg { width: 22px; height: 22px; }
@media (max-width: 720px) {
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox.is-open,
  .lightbox__img,
  .gphoto img { animation: none; transition: none; }
}

/* ============================================================
   VIDEO CARD — click-to-play overlay (.vcard__media--video)
   Consistent across real-estate carousels, commercial detail
   frames, and tourism destination cards.
   ============================================================ */

/* Make the button a positioned container that fills the media slot */
button.vcard__media--video {
  /* Inherit all .vcard__media dimensions/layout from the existing rule */
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-soft);
  background: var(--bg-elev);
  cursor: pointer;
  /* Inherit border-radius / overflow from .vcard__media */
}

/* Pointer cursor for the button state only; cursor turns default after swap */
button.vcard__media--video[data-video-active] {
  cursor: default;
}

/* Play icon overlay — centered, absolutely positioned */
.vcard__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Subtle transition for hover */
  transition: opacity 220ms var(--ease);
}

.vcard__play svg {
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
  transition: transform 280ms var(--ease), filter 280ms var(--ease);
}

button.vcard__media--video:hover .vcard__play svg {
  transform: scale(1.10);
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.75));
}

/* Focus ring */
button.vcard__media--video:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Commercial detail frame — full-width, taller aspect ratio */
.vcard__media--frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
}

/* Tourism destination card — button fills dest-card__img slot */
button.vcard__media--dest {
  /* Reset button default styles that dest-card__img doesn't have */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  /* Inherits aspect-ratio from .dest-card__img */
  overflow: hidden;
  border-radius: 0; /* dest-card handles its own radius */
  border: none;
  background: var(--bg-elev);
}

button.vcard__media--dest img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}

button.vcard__media--dest:hover img {
  transform: scale(1.06);
}

/* After video swap, the <video> inside the button fills the space */
button.vcard__media--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .vcard__play svg,
  button.vcard__media--video:hover .vcard__play svg,
  button.vcard__media--dest img,
  button.vcard__media--dest:hover img {
    transition: none;
    transform: none;
  }
}

/* ---- 70vw/70vh video overlay support ----
   Inline (card) video has no native controls — only our custom expand button
   is shown. As a belt-and-suspenders measure (in case autoplay is blocked and
   we fall back to native controls), hide the fullscreen button explicitly so
   no duplicate "expand" icon ever appears beside our custom one. Safari
   ignores `controlslist="nofullscreen"`, but it does respect this pseudo. */
.dcp-card-video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
.dcp-card-video::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}
.dcp-card-video::-webkit-media-controls-overlay-play-button {
  /* Keep the big center play button hidden on iOS Safari too */
  display: none !important;
}

/* =========================================================
   CX EMPTY HINT — shown until a lane is picked
   ========================================================= */
.cx-empty {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5);
  margin-top: var(--s-7);
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(243, 207, 0, 0.025), transparent 60%);
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.cx-empty.is-hidden {
  display: none;
}
.cx-empty__mark {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(243, 207, 0, 0.08);
  color: var(--gold);
  flex: 0 0 38px;
}
.cx-empty__text { margin: 0; line-height: 1.5; }

/* =========================================================
   CX REEL — Cinematic case-study layout inside detail panels
   Alternating L/R hero shot, gold "slate" tag overlay,
   sprocket-hole rail header to evoke 16mm film.
   ========================================================= */
.cx-reel {
  margin: 0 0 var(--s-5);
}
.cx-reel__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.cx-reel__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.cx-reel__sprockets {
  flex: 1;
  height: 14px;
  background-image:
    linear-gradient(to right,
      rgba(243, 207, 0, 0.55) 0,
      rgba(243, 207, 0, 0.55) 6px,
      transparent 6px,
      transparent 22px);
  background-repeat: repeat-x;
  background-size: 22px 14px;
  background-position: 0 50%;
  opacity: 0.7;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.cx-reel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-7);
}
.cx-reel__item {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-6);
  align-items: center;
  position: relative;
  padding: var(--s-4) 0;
  border-radius: 12px;
  transition: background 260ms var(--ease), transform 260ms var(--ease);
}

/* ============================================================
   PROJECT SEPARATOR — full-width yellow hairline with tick marks
   at each end (filmstrip-perforation feel). Sits between projects.
   Rendered on every .cx-reel__item except the last one in its lane.
   Implementation: single ::after with layered backgrounds that draw
   a center hairline plus two vertical ticks at each end.
   ============================================================ */
.cx-reel__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--s-7) * -0.5 - 5px);
  height: 11px;
  background:
    linear-gradient(var(--gold), var(--gold)) left center / 2px 11px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right center / 2px 11px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center center / 100% 1px no-repeat;
  pointer-events: none;
  opacity: 0.9;
}
.cx-reel__item--reverse { grid-template-columns: 1fr 1.15fr; }
.cx-reel__item--reverse .cx-reel__media { order: 2; }
.cx-reel__item--reverse .cx-reel__body  { order: 1; }

/* Per-case portrait aspect ratios — opt-in via Decap "Photo Frame Aspect".
   Reshapes the media slot from 16:9 landscape to a portrait ratio so vertical
   apparel / model / product photos aren't cropped top-and-bottom. The grid
   also rebalances so the text column stays a comfortable reading width. */
.cx-reel__item--aspect-4x5 { grid-template-columns: 0.8fr 1fr; }
.cx-reel__item--aspect-4x5.cx-reel__item--reverse { grid-template-columns: 1fr 0.8fr; }
.cx-reel__item--aspect-4x5 .cx-reel__media { aspect-ratio: 4 / 5; }

.cx-reel__item--aspect-3x4 { grid-template-columns: 0.7fr 1fr; }
.cx-reel__item--aspect-3x4.cx-reel__item--reverse { grid-template-columns: 1fr 0.7fr; }
.cx-reel__item--aspect-3x4 .cx-reel__media { aspect-ratio: 3 / 4; }

/* Optional per-project video button (inside .cx-reel__media) */
.cx-reel__video {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.cx-reel__video img { width: 100%; height: 100%; object-fit: cover; }
.cx-reel__video .vcard__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}
.cx-reel__video:hover .vcard__play,
.cx-reel__video:focus-visible .vcard__play { transform: translate(-50%, -50%) scale(1.06); }
.cx-reel__video:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Optional per-project BTS scatter — spans both grid columns below the case */
.cx-reel__bts {
  grid-column: 1 / -1;
  margin-top: var(--s-5);
}
.cx-reel__item--has-bts { align-items: start; }
@media (max-width: 768px) {
  .cx-reel__bts { margin-top: var(--s-4); }
}

/* When a case uses the 3:4 portrait aspect AND has BTS photos, move the
   BTS block up into the text column so it fills the empty space next to
   the tall media instead of sitting below it. Scoped to 3:4 only so
   16:9 and 4:5 cases keep the classic full-width scatter. */
@media (min-width: 901px) {
  .cx-reel__item--aspect-3x4.cx-reel__item--has-bts {
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .cx-reel__item--aspect-3x4.cx-reel__item--has-bts .cx-reel__media {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .cx-reel__item--aspect-3x4.cx-reel__item--has-bts .cx-reel__body {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .cx-reel__item--aspect-3x4.cx-reel__item--has-bts .cx-reel__bts {
    grid-column: 2;
    grid-row: 2;
    padding-left: 8px;
    padding-top: 0;
    margin-top: var(--s-3);
  }
  .cx-reel__item--aspect-3x4.cx-reel__item--has-bts .vignette__bts-label {
    margin-top: 0;
    margin-bottom: 8px;
  }
  /* Reverse layout: media on right, body/BTS stacked on left */
  .cx-reel__item--reverse.cx-reel__item--aspect-3x4.cx-reel__item--has-bts .cx-reel__media {
    grid-column: 2;
  }
  .cx-reel__item--reverse.cx-reel__item--aspect-3x4.cx-reel__item--has-bts .cx-reel__body,
  .cx-reel__item--reverse.cx-reel__item--aspect-3x4.cx-reel__item--has-bts .cx-reel__bts {
    grid-column: 1;
    padding-left: 0;
    padding-right: 8px;
  }
  /* Force a compact 4-across polaroid grid so all 4 fit next to media */
  .cx-reel__item--aspect-3x4.cx-reel__item--has-bts .vignette__bts-scatter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: start;
  }
  .cx-reel__item--aspect-3x4.cx-reel__item--has-bts .vignette__bts-scatter .polaroid {
    flex: none;
    max-width: none;
    width: 100%;
    margin: 0;
  }
}
/* Yellow background highlight on project hover was removed at Matt's
   request (2026-08-08) — the image zoom + brightness lift on hover
   remain, but the diagonal gold-tinted gradient behind the card is
   gone. If you want a hover affordance back later, add it here. */
.cx-reel__item:hover {
  background: transparent;
}

.cx-reel__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.cx-reel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.92);
  transition: transform 600ms var(--ease), filter 380ms var(--ease);
}
.cx-reel__item:hover .cx-reel__media img {
  transform: scale(1.04);
  filter: saturate(1.02) brightness(1);
}

/* Placeholder tile — renders when a case has copy but no thumb / video / photos yet.
   Used for shell cases that live in Decap awaiting media. */
.cx-reel__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255, 205, 96, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.25));
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
}
.cx-reel__placeholder-icon {
  opacity: 0.55;
  transition: opacity 380ms var(--ease), transform 600ms var(--ease);
}
.cx-reel__item:hover .cx-reel__placeholder-icon {
  opacity: 0.75;
  transform: translateY(-2px);
}
.cx-reel__placeholder-label {
  color: rgba(255, 255, 255, 0.55);
}

/* Photo carousel — lives inside .cx-reel__media, looks identical until you notice the dots */
.cx-reel__carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cx-reel__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cx-reel__track::-webkit-scrollbar { display: none; }
.cx-reel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: block;
  filter: saturate(0.92) brightness(0.92);
  transition: transform 600ms var(--ease), filter 380ms var(--ease);
}
.cx-reel__item:hover .cx-reel__slide {
  transform: scale(1.04);
  filter: saturate(1.02) brightness(1);
}
/* Contain mode: show full image, letterbox top/bottom on tall photos */
.cx-reel__carousel--contain .cx-reel__slide {
  object-fit: contain;
  background: #141821;
}
.cx-reel__carousel--contain .cx-reel__track {
  background: #141821;
}
/* Contain mode hover — no scale (contained images shouldn't be cropped by scale) */
.cx-reel__carousel--contain .cx-reel__item:hover .cx-reel__slide,
.cx-reel__item:hover .cx-reel__carousel--contain .cx-reel__slide {
  transform: none;
}
/* Yellow prev/next arrows — always visible on carousels */
.cx-reel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--gold);
  color: #0A0B0E;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  z-index: 3;
  transition: transform 200ms var(--ease), background 200ms var(--ease), opacity 200ms var(--ease);
}
.cx-reel__arrow--prev { left: 12px; }
.cx-reel__arrow--next { right: 12px; }
.cx-reel__arrow:hover {
  background: #FFD833;
  transform: translateY(-50%) scale(1.08);
}
.cx-reel__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.cx-reel__arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 640px) {
  .cx-reel__arrow { width: 36px; height: 36px; }
  .cx-reel__arrow--prev { left: 8px; }
  .cx-reel__arrow--next { right: 8px; }
}
/* Dot indicators — bottom center, subtle */
.cx-reel__dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 11, 14, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
  pointer-events: auto;
}
.cx-reel__dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 220ms var(--ease), transform 220ms var(--ease), width 220ms var(--ease);
}
.cx-reel__dot:hover { background: rgba(255, 255, 255, 0.75); }
.cx-reel__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cx-reel__dot.is-active {
  background: var(--gold);
  width: 20px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .cx-reel__track { scroll-behavior: auto; }
  .cx-reel__slide { transition: none; }
}

/* Gold "slate" tag — bottom-left corner, like a film slate */
.cx-reel__slate {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 10px;
  background: rgba(8, 14, 24, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(243, 207, 0, 0.35);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  pointer-events: none;
}
.cx-reel__slate-num {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.cx-reel__slate-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(243, 207, 0, 0.7);
}
.cx-reel__slate-cat {
  color: var(--text-mute);
}

.cx-reel__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cx-reel__sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cx-reel__title {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.18;
  margin: 0;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cx-reel__rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin: var(--s-1) 0 var(--s-2);
  transition: width 320ms var(--ease);
}
.cx-reel__item:hover .cx-reel__rule { width: 96px; }
.cx-reel__quote {
  margin: 0;
  padding: 0 0 0 var(--s-4);
  border-left: 2px solid var(--gold);
  font-style: italic;
  color: var(--gold-soft, var(--gold));
  font-size: 0.98rem;
  line-height: 1.5;
}
.cx-reel__desc {
  margin: 0;
  color: var(--text-mute);
  font-size: 0.98rem;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .cx-reel__item,
  .cx-reel__item--reverse {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .cx-reel__item--reverse .cx-reel__media { order: 1; }
  .cx-reel__item--reverse .cx-reel__body  { order: 2; }
  .cx-reel__head { gap: var(--s-3); }
}

/* =====================================================================
   REVIEWS — multi-card editorial testimonial grid for real-estate page.
   Replaces the single .quote section. Cards are not rigid rectangles —
   each gets a soft offset border, an oversized opening quote glyph,
   and gold stars. Trailing card is a shimmering Google-review CTA.
   ===================================================================== */
.reviews {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-9) var(--gutter) var(--s-8);
}
.reviews__head {
  max-width: 920px;
  margin: 0 auto var(--s-8);
  text-align: center;
}
.reviews__head .tag { justify-content: center; }
.reviews__head .h-display {
  /* Sized to fit on a single line at most desktop widths */
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.9rem);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
  max-width: 100%;
  overflow: visible;
}
@media (max-width: 720px) {
  .reviews__head .h-display {
    /* Allow wrap on narrow screens — single-line nowrap would overflow */
    white-space: normal;
    font-size: clamp(1.4rem, 0.9rem + 2.2vw, 1.9rem);
  }
}
.reviews__head .lede {
  color: var(--text-mute);
  max-width: 56ch;
  margin: 0 auto;
}
.reviews__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.review-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transform: rotate(calc((var(--ri, 0) * 11 % 5 - 2) * 0.18deg));
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), border-color 0.3s, background 0.3s;
}
.review-card:hover {
  transform: rotate(0deg) translateY(-3px);
  border-color: rgba(243, 207, 0, 0.45);
  background: linear-gradient(180deg, var(--bg-elev) 0%, rgba(243,207,0,0.03) 100%);
}
.review-card::before {
  content: "\201C";
  position: absolute;
  top: -12px;
  left: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.32;
  pointer-events: none;
}
.review-card__stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
}
.review-card__star {
  width: 16px;
  height: 16px;
  fill: currentColor;
  filter: drop-shadow(0 0 4px rgba(243, 207, 0, 0.3));
}
.review-card__quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
  flex: 1;
}
.review-card__quote .accent { color: var(--gold); font-style: italic; }

/* Clamp long reviews to a consistent height across the grid/carousel —
   keeps every card the same size so the section doesn't get unwieldy.
   A subtle fade hints there's more to read. "Read full review" button
   below the clamp opens the lightbox modal. */
.review-card__quote--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
  /* Fade the last line so truncation feels intentional, not abrupt. */
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
/* "Read full review" — deliberately quiet so it doesn't compete with the
   gold mono name pill in the cite section below it. Sentence-case display
   font + muted text color = reads as an action prompt, not a sibling label.
   On hover it warms up to gold + underline to confirm it's interactive. */
.review-card__expand {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 0;
  background: transparent;
  border: 0;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.review-card__expand-label {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 1px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.review-card__expand:hover,
.review-card__expand:focus-visible {
  color: var(--gold);
  outline: none;
}
.review-card__expand:hover .review-card__expand-label,
.review-card__expand:focus-visible .review-card__expand-label {
  opacity: 1;
}
.review-card__expand svg { transition: transform 0.2s ease; opacity: 0.85; }
.review-card__expand:hover svg { transform: translateX(3px); opacity: 1; }
/* The <template> holding the full quote body is invisible — it's just
   a stash JS reads when opening the modal. */
.review-card__expand-body { display: none; }

/* ===========================================================
   Review Lightbox Modal
   =========================================================== */
.review-modal {
  /* Reset default <dialog> styles, recenter, theme to site palette. */
  padding: 0;
  margin: auto;
  border: none;
  background: transparent;
  color: var(--text);
  max-width: min(640px, calc(100vw - var(--s-5) * 2));
  width: 100%;
  max-height: calc(100vh - var(--s-6) * 2);
  overflow: visible;
}
.review-modal::backdrop {
  background: rgba(8, 10, 14, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.review-modal[open] { animation: review-modal-in 0.32s cubic-bezier(.2,.7,.2,1); }
@keyframes review-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.review-modal__inner {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid rgba(243, 207, 0, 0.32);
  border-radius: 18px;
  padding: var(--s-7) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  max-height: calc(100vh - var(--s-6) * 2);
  overflow-y: auto;
}
.review-modal__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.review-modal__close:hover,
.review-modal__close:focus-visible {
  color: var(--gold);
  border-color: rgba(243, 207, 0, 0.5);
  transform: rotate(90deg);
  outline: none;
}
.review-modal__stars {
  display: flex;
  gap: 3px;
  color: var(--gold);
}
.review-modal__stars svg {
  width: 18px; height: 18px;
  fill: currentColor;
  filter: drop-shadow(0 0 4px rgba(243, 207, 0, 0.3));
}
.review-modal__quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
}
.review-modal__quote .accent { color: var(--gold); font-style: italic; }
.review-modal__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.review-modal__name {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.review-modal__role {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.review-modal__role:empty { display: none; }
.review-card__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.review-card__name {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.review-card__role {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

/* Google review CTA — reuses the rotating gold conic-gradient ("beam")
   pattern proven on .portal-card. Rendered as a full-width block below
   either the reviews grid or the reviews carousel. */
.reviews__cta {
  margin-top: var(--s-6);
}

/* ── Carousel mode (>4 reviews) ──
   Re-use the vcarousel controller; just style the review-cards as
   vcards so they slot into the carousel track. */
.reviews--carousel .reviews-carousel {
  margin: 0 calc(var(--s-7) * -1);   /* let arrows sit outside container */
  padding: 0 var(--s-7);
}
.reviews-carousel__track {
  gap: var(--s-5);
}
.reviews-carousel .review-card {
  /* Carousel cards lay out flex within track; remove tilt */
  transform: none;
  min-height: 240px;
  height: 100%;
}
.reviews-carousel .review-card:hover { transform: translateY(-3px); }

@property --grb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.google-review-btn {
  --grb-pad: 2px;
  position: relative;
  display: block;
  border-radius: 18px;
  text-decoration: none;
  isolation: isolate;
  background:
    conic-gradient(from var(--grb-angle),
      rgba(243, 207, 0, 0.05) 0deg,
      rgba(243, 207, 0, 0.95) 90deg,
      rgba(255, 255, 255, 0.9) 140deg,
      rgba(243, 207, 0, 0.95) 190deg,
      rgba(243, 207, 0, 0.05) 360deg);
  padding: var(--grb-pad);
  animation: grb-spin 6s linear infinite;
  box-shadow: 0 12px 40px -16px rgba(243, 207, 0, 0.55);
  transition: box-shadow 0.4s;
}
.google-review-btn:hover {
  animation-duration: 3.5s;
  box-shadow: 0 16px 56px -14px rgba(243, 207, 0, 0.75);
}
@keyframes grb-spin { to { --grb-angle: 360deg; } }

.google-review-btn__beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(243, 207, 0, 0.18), transparent 70%);
  filter: blur(20px);
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
}
.google-review-btn__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-elev);
  border-radius: calc(18px - var(--grb-pad));
  color: var(--text);
  transition: background 0.3s;
}
.google-review-btn:hover .google-review-btn__inner {
  background: linear-gradient(180deg, var(--bg-elev) 0%, rgba(243,207,0,0.05) 100%);
}
.google-review-btn__logo {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.google-review-btn__logo svg { width: 32px; height: 32px; }
.google-review-btn__copy {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px var(--s-3);
  flex: 1;
}
.google-review-btn__stars {
  grid-row: 1;
  grid-column: 1;
  display: inline-flex;
  gap: 1px;
  color: var(--gold);
  align-self: end;
}
.google-review-btn__stars svg { width: 14px; height: 14px; fill: currentColor; }
.google-review-btn__label {
  grid-row: 2;
  grid-column: 1 / span 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.google-review-btn__sub {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  justify-self: start;
  align-self: end;
}
.google-review-btn__arrow {
  grid-row: 1 / span 2;
  grid-column: 3;
  font-size: 1.6rem;
  color: var(--gold);
  align-self: center;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.google-review-btn:hover .google-review-btn__arrow {
  transform: translate(4px, -4px);
}

@media (max-width: 760px) {
  .review-card { padding: var(--s-5) var(--s-4) var(--s-4); }
  .google-review-btn__inner { padding: var(--s-4); gap: var(--s-3); flex-wrap: wrap; }
  .google-review-btn__logo { flex: 0 0 44px; width: 44px; height: 44px; }
  .google-review-btn__logo svg { width: 26px; height: 26px; }
  .google-review-btn__copy { gap: 2px var(--s-2); }
  .google-review-btn__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .google-review-btn { animation: none; background: linear-gradient(135deg, var(--gold), #fff7a0, var(--gold)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOSPITALITY PAGE — distinct visual language from CRE.
   Book-chapter dividers, category-forward titles, alternating section tones,
   horizontal-only video. All classes prefixed .hosp-* to avoid leakage.
   ═══════════════════════════════════════════════════════════════════════════ */

/* HERO — shorter than other pages per direction */
.hosp-hero {
  position: relative;
  min-height: 460px;
  overflow: hidden;
}
.hosp-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.5) saturate(1.05);
}
.hosp-hero__grade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,18,32,.2) 0,
    rgba(10,18,32,.55) 55%,
    rgba(10,18,32,.98) 100%);
}
.hosp-hero__inner {
  position: relative; max-width: 1240px; margin: 0 auto;
  padding: 140px 40px 60px;
  min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hosp-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.hosp-hero__eyebrow::before {
  content: ""; width: 44px; height: 1px; background: var(--gold);
}
.hosp-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 8vw, 92px);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 1100px;
}
.hosp-hero__title .accent {
  color: var(--gold-warm);
  font-style: italic;
  /* Inherit the h1's 800 weight — matches Real Estate hero pattern. */
}
.hosp-hero__sub {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.55;
  color: var(--ink-mute);
  max-width: 680px;
}

/* SECTION SHELLS — alternating tones so each vertical reads as its own place */
.hosp-sec {
  position: relative;
  padding: 96px 40px 120px;
  overflow: hidden;
}
.hosp-sec--senior-living      { background: var(--bg);      }   /* navy */
.hosp-sec--short-term-rentals { background: #0D1017;        }   /* charcoal */
.hosp-sec--hotels-resorts     { background: var(--bg-elev); }   /* elevated navy */
.hosp-sec__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }

/* Optional faint title backdrop (per-vertical, from CMS) */
.hosp-sec__title-bg {
  position: absolute; inset: 0 0 auto 0;
  height: 340px;
  background-size: cover; background-position: center;
  opacity: 0; /* enabled inline when title_bg_image is set in CMS */
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0));
  pointer-events: none;
}

/* SECTION HEADER — title + subtitle left, Coverage inventory right */
.hosp-sec__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  padding-bottom: 28px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(242,240,233,.14);
}
.hosp-sec__title-wrap { min-width: 0; }
.hosp-sec__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--ink);
  margin: 0;
}
.hosp-sec__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-soft);
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -.015em;
  margin: 14px 0 0;
  line-height: 1.3;
}
.hosp-sec__coverage {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
  line-height: 1.9;
  font-weight: 500;
  padding-left: 24px;
  border-left: 1px solid rgba(242,240,233,.22);
  min-width: 200px;
  align-self: end;
  padding-bottom: 4px;
}
.hosp-sec__coverage strong {
  display: block;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 6px;
}
.hosp-sec__coverage span { display: block; }
.hosp-sec__lede {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.6;
  color: var(--ink-mute);
  max-width: 780px;
  margin-bottom: 56px;
}
.hosp-sec__lede strong {
  color: var(--ink);
  font-weight: 600;
}

/* HORIZONTAL VIDEO PLAYER (Senior + STR)
   Constrained to a comfortable reading width and centered so it feels
   more intentional than a full-bleed rectangle. Matt asked for a smaller
   video on Building Tour and STR Property Film. */
.hosp-video {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 48px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.55);
}

/* Two-video Property Film row (STR):
   Wraps 1 or 2 .hosp-video figures. With one video the wrapper is a
   no-op (the child keeps its 900px cap). With two, the row expands to
   a comfortable width and shows the pair side by side on desktop,
   stacked on mobile. */
.hosp-video-pair {
  width: 100%;
}
.hosp-video-pair--two {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.hosp-video-pair--two .hosp-video {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
@media (max-width: 860px) {
  .hosp-video-pair--two {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 900px;
  }
  .hosp-video-pair--two .hosp-video { margin-bottom: 20px; }
  .hosp-video-pair--two .hosp-video:last-child { margin-bottom: 0; }
}
.hosp-video img,
.hosp-video__player {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hosp-video__scrim {
  position: absolute; inset: 0;
  /* Scrim now darkens the TOP so the meta (top-left) reads over the poster.
     Bottom is left clean so it doesn't fight the browser video control bar. */
  background: linear-gradient(180deg,rgba(0,0,0,.7) 0,transparent 45%,transparent 100%);
  pointer-events: none;
}
.hosp-video__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92px; height: 92px;
  border-radius: 50%;
  background: rgba(243,207,0,.94);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}
.hosp-video__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 24px solid #0A1220;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  margin-left: 6px;
}

/* Interactive button variant — STR property film overlay play button.
   Reset native <button> chrome, allow clicks, add hover feedback. */
.hosp-video__play--btn {
  pointer-events: auto;
  padding: 0;
  cursor: pointer;
  transition: transform 220ms var(--ease, cubic-bezier(.2,.7,.2,1)),
              background 220ms var(--ease, cubic-bezier(.2,.7,.2,1));
}
.hosp-video__play--btn:hover {
  background: rgba(243,207,0,1);
  transform: translate(-50%, -50%) scale(1.06);
}
.hosp-video__play--btn:focus-visible {
  outline: 2px solid rgba(243,207,0,.6);
  outline-offset: 6px;
}

/* Hide overlay elements once the video starts playing so native controls
   are usable and the film shows unobstructed. */
.hosp-video--overlay-play.is-playing .hosp-video__play,
.hosp-video--overlay-play.is-playing .hosp-video__scrim,
.hosp-video--overlay-play.is-playing .hosp-video__meta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease, cubic-bezier(.2,.7,.2,1));
}
.hosp-video__meta {
  position: absolute;
  /* Anchored top-left so the meta doesn't overlap the browser's video
     control bar (play/scrubber/audio/fullscreen), which sits at the
     bottom of the <video> element. */
  left: 32px; top: 28px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
  z-index: 2;
}
.hosp-video__meta strong {
  color: var(--gold);
  font-weight: 600;
}
.hosp-video__meta div {
  margin-top: 6px;
  font-family: var(--font-display);
  text-transform: none;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--ink);
  font-weight: 600;
}

/* DETAIL ROW — image + deliverables list */
.hosp-detail-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: stretch;
}
.hosp-detail__media {
  position: relative;
  background: #0B1A2E;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  min-height: 380px;
}
.hosp-detail__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hosp-detail__tag {
  position: absolute;
  top: 20px; left: 20px;
  background: rgba(10,18,32,.9);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 2px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.hosp-deliverables {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 0;
}
.hosp-deliverable {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.hosp-deliverable:last-child {
  border-bottom: none;
}
.hosp-deliverable__body h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.hosp-deliverable__body p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* HOTELS & RESORTS — editorial gallery */
.hosp-hotel__lead {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.hosp-hotel__lead-media,
.hosp-hotel__strip-item {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #000;
  border-radius: 2px;
}
.hosp-hotel__lead-media img,
.hosp-hotel__strip-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hosp-frame__cap {
  position: absolute;
  left: 24px; bottom: 22px; right: 24px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.hosp-frame__cap strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--gold-soft);
  text-transform: none;
  margin-bottom: 6px;
}
.hosp-hotel__lead-copy {
  background: var(--bg);
  padding: 40px 36px;
  border: 1px solid var(--border);
  border-radius: 2px;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.hosp-hotel__lead-copy h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.18;
}
.hosp-hotel__lead-copy p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.hosp-hotel__lead-meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.hosp-hotel__strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
/* -----------------------------------------------------------------
   HOSPITALITY · CONTENT BLOCKS (Senior + STR shared)
   Blocks are stacked vertically inside .hosp-sec__inner.
   Each block has its own head (h3 + meta) and its own content region.
   ----------------------------------------------------------------- */
.hosp-block { margin-top: 72px; }
.hosp-block:first-of-type { margin-top: 12px; }
/* Titles centered above the media; supporting meta text hidden per Matt's
   request (was "3 plans · use arrows to browse" etc.) */
.hosp-block__head {
  display: block;
  text-align: center;
  margin-bottom: 28px;
}
.hosp-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  text-align: center;
}
.hosp-block__meta { display: none; }

/* SIDE-BY-SIDE PLAN CAROUSELS */
.hosp-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.hosp-plans__col { min-width: 0; }

/* PLAN CAROUSEL — JS-driven, one image at a time. Arrows sit OUTSIDE the
   media, on the sides, matching the .vcarousel testimonial pattern.
   Captions live under the whole row so arrows are true image-center. */
.hosp-carousel {
  position: relative;
}
.hosp-carousel__row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hosp-carousel__viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
  background: #0A0F1B;
  border: 1px solid rgba(242,240,233,.08);
  border-radius: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
/* Plan viewports render a scanned/isometric image with text labels. Keep
   the 3:2 aspect that matches most architectural exports so plans fill the
   frame without heavy letterboxing, but switch to a white mount so real
   plans (which have white backgrounds) blend seamlessly. */
[data-plan-carousel] .hosp-carousel__viewport {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.06);
}

/* Hospitality testimonial cards — the plans block above uses a 2-col grid
   so each plan viewport reads ~480px wide, while the shared 3-up vcarousel
   layout capped testimonial cards at ~360px — visibly smaller. Break the
   testimonial vcarousel out past the block edges (up to −180px each side
   at wider viewports) and raise the .vcard max-width so the three
   testimonial videos scale up into the same visual size range as the plan
   viewports. The negative margin is bounded so it never causes horizontal
   overflow: at 1440px it’s about −80px, at 1920px it hits the −180px cap. */
.hosp-block--testimonials .vcarousel {
  margin-inline: max(-180px, calc((100% - 100vw + 40px) / 2));
}
.hosp-block--testimonials .vcarousel:not(.vcarousel--vertical) .vcard {
  max-width: 480px;
}

/* On narrower viewports, don’t break out — the block already fills most of
   the viewport, so keep the standard layout to avoid horizontal overflow. */
@media (max-width: 1180px) {
  .hosp-block--testimonials .vcarousel { margin-inline: 0; }
}
.hosp-carousel__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 280ms var(--ease);
  flex-shrink: 0;
}
.hosp-carousel__arrow svg { width: 22px; height: 22px; }
.hosp-carousel__arrow:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  transform: scale(1.08);
}
.hosp-carousel__track {
  display: flex;
  width: 100%; height: 100%;
  transition: transform 480ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.hosp-carousel__item {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  display: block;
}
.hosp-carousel__item--plan {
  padding: 16px;
  box-sizing: border-box;
}
.hosp-carousel__item--plan img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.hosp-carousel__caption {
  padding: 14px 4px 0;
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
  text-align: center;
  min-height: 46px;
}
.hosp-carousel__caption strong {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.hosp-carousel__caption span {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* Legacy figcaption inside carousel items — hide since caption now lives outside the viewport */
.hosp-carousel__item figcaption {
  display: none;
}
.hosp-carousel__item--video { width: 68%; max-width: 640px; }
.hosp-carousel__item--video video,
.hosp-carousel__item--video img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; display: block;
}
.hosp-carousel__item--video-legacy-figcaption {
  padding: 14px 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid rgba(242,240,233,.08);
}
.hosp-carousel__item figcaption strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -.005em;
}
.hosp-carousel__item figcaption span {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
}
/* Legacy .hosp-carousel__btn (old overlay style) — no longer emitted, but keep
   the rule empty so nothing lingers if a cached HTML asset still references it. */
.hosp-carousel__btn { display: none; }

/* GALLERY — grid, click to open in a lightbox.
   3 per row on Building Photos, 4 per row on STR gallery so photos are
   bigger and viewers can see more detail (Matt: "Make the photos bigger
   and have 3-4 images on one line instead"). */
.hosp-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hosp-gallery--str { grid-template-columns: repeat(4, 1fr); }
.hosp-gallery__item {
  display: block;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 2px;
  background: #0A0F1B;
  border: 1px solid rgba(242,240,233,.08);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hosp-gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.hosp-gallery__item:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(0,0,0,.55); }
.hosp-gallery__item:hover img { transform: scale(1.04); }

/* LIGHTBOX — minimal built-in viewer */
.hosp-lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
  padding: 40px;
}
.hosp-lightbox.is-open { display: flex; }
.hosp-lightbox img {
  max-width: min(1400px, 92vw);
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.7);
}
.hosp-lightbox__caption {
  position: absolute; bottom: 24px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
}
.hosp-lightbox__close,
.hosp-lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 24px;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.hosp-lightbox__close:hover,
.hosp-lightbox__nav:hover { background: rgba(255,255,255,.16); }
.hosp-lightbox__close { top: 24px; right: 24px; }
.hosp-lightbox__nav--prev { top: 50%; left: 24px; transform: translateY(-50%); }
.hosp-lightbox__nav--next { top: 50%; right: 24px; transform: translateY(-50%); }

/* CLOSING CTA BAND */
.hosp-cta {
  background: #050912;
  padding: 110px 40px;
  border-top: 1px solid rgba(242,240,233,.22);
}
.hosp-cta__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}
.hosp-cta h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 60px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  max-width: 720px;
  margin: 0;
}
.hosp-cta h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-soft);
}
.hosp-cta__btn {
  display: inline-block;
  background: var(--gold);
  color: #0A1220;
  padding: 20px 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.hosp-cta__btn:hover {
  background: var(--gold-warm);
  transform: translateY(-1px);
}

/* RESPONSIVE — collapse gracefully */
@media (max-width: 900px) {
  .hosp-hero__inner { padding: 120px 24px 48px; min-height: 380px; }
  .hosp-hero { min-height: 380px; }
  .hosp-sec { padding: 64px 24px 80px; }
  .hosp-sec__header {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hosp-sec__coverage {
    text-align: left;
    padding-left: 0; padding-top: 16px;
    border-left: none;
    border-top: 1px solid rgba(242,240,233,.22);
    min-width: 0;
  }
  .hosp-block { margin-top: 56px; }
  .hosp-plans { grid-template-columns: 1fr; gap: 40px; }
  .hosp-carousel__item--plan { width: 92%; }
  .hosp-carousel__item--video { width: 92%; }
  .hosp-gallery,
  .hosp-gallery--str { grid-template-columns: repeat(2, 1fr); }
  .hosp-detail-row { grid-template-columns: 1fr; gap: 32px; }
  .hosp-detail__media { min-height: 320px; }
  .hosp-hotel__lead { grid-template-columns: 1fr; }
  .hosp-hotel__strip { grid-template-columns: 1fr; }
  .hosp-cta { padding: 80px 24px; }
  .hosp-cta__inner { grid-template-columns: 1fr; gap: 32px; }
  .hosp-cta__btn { justify-self: start; }

  /* Video meta shrinks + darker scrim so text reads over the poster on small screens */
  .hosp-video__scrim {
    /* Flipped: darker top on mobile for meta contrast. */
    background: linear-gradient(180deg, rgba(0,0,0,.85) 0, transparent 40%, transparent 100%);
  }
  .hosp-video__meta { left: 16px; top: 14px; right: 16px; font-size: 10px; letter-spacing: .18em; }
  .hosp-video__meta div { font-size: 15px; margin-top: 4px; line-height: 1.25; }
  .hosp-video__play { width: 64px; height: 64px; }
  .hosp-video__play::after {
    border-left: 16px solid #0A1220;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin-left: 4px;
  }
}