/* The approved film supplies the garden's physical depth; copy stays in HTML. */
:root {
  --sc-canvas: #ffffff;
  --sc-ink: #172820;
  --sc-font-text: Inter, Arial, sans-serif;
  --sc-track-normal: 0;
}
.nav { position: relative; z-index: 30; background: #fff; }
.hero {
  height: auto;
  overflow: visible;
  --hero-exit: clamp(0, calc(var(--sc-p, 0) / .3), 1);
  /* Fade back over seconds 23–28 of the 30.25-second film. */
  --hero-return-p: clamp(0, calc((var(--hero-film-time, 0) - 23) / 5), 1);
  --hero-return: calc(var(--hero-return-p) * var(--hero-return-p) * (3 - 2 * var(--hero-return-p)));
  --hero-header-visible: 76px;
}
.hero-stage { position: relative; height: clamp(640px, 86svh, 960px); overflow: clip; background: #f5faf5; }
.hero--cinematic .hero-stage { position: sticky; top: 0; height: 100svh; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media :is(video, .sc-stage__poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay { position: absolute; inset: 0; z-index: 2; }
.hero--cinematic .hero-overlay { transform: translate3d(calc(var(--hero-exit) * -100%), 0, 0); will-change: transform, opacity; }
.hero--cinematic .hero-callout { transform: translate3d(calc(var(--hero-exit) * 100vw), 0, 0); will-change: transform, opacity; }
.hero--cinematic.hero--returning :is(.hero-overlay, .hero-callout) { transform: none; opacity: var(--hero-return); }
.hero-wash { z-index: 2; width: 68%; height: 100%; background: linear-gradient(90deg, #f5faf5 0%, #f5faf5f7 46%, #f5faf5d9 65%, #f5faf500 100%); pointer-events: none; }
.hero-inner { z-index: 3; pointer-events: none; }
.hero-copy { max-width: 570px; padding-top: clamp(60px, 15svh, 170px); pointer-events: auto; }
.hero-description { max-width: 510px; }
.hero .trust { top: auto; bottom: 110px; gap: 20px; }
.hero-callout { z-index: 4; top: auto; bottom: calc(48px + var(--hero-header-visible)); left: auto; right: 5.7%; width: 238px; }
.hero-scroll { position: absolute; bottom: calc(24px + var(--hero-header-visible)); left: 50%; z-index: 4; display: none; align-items: center; justify-content: center; width: 44px; height: 56px; padding: 7px; border-radius: 24px; background: #f5faf5; color: var(--green); transform: translateX(-50%); pointer-events: none; }
.hero-scroll svg { width: 100%; height: 100%; }
.hero--cinematic .hero-scroll { display: flex; }
.hero-progress { position: absolute; z-index: 5; bottom: 0; left: 0; width: 100%; height: 3px; background: #ffffff80; display: none; }
.hero--cinematic .hero-progress { display: block; }
.hero-progress span { display: block; width: calc(var(--sc-p, 0) * 100%); height: 100%; background: var(--yellow); }
.hero-scene-headlines { --scene-right-inset: 5.7vw; --scene-bottom-inset: max(48px, env(safe-area-inset-bottom)); display: none; position: absolute; z-index: 3; right: var(--scene-right-inset); bottom: var(--scene-bottom-inset); width: min(560px, 88.6%); pointer-events: none; }
.hero--cinematic .hero-scene-headlines { display: block; }
.hero-scene-scrim { position: absolute; right: calc(-1 * var(--scene-right-inset)); bottom: calc(-1 * var(--scene-bottom-inset)); width: calc(100% + var(--scene-right-inset) + 100px); height: 260px; background: radial-gradient(ellipse at 85% 100%, #103e2ce6 0%, #103e2cb3 42%, #103e2c00 75%); opacity: var(--scene-presence, 0); }
.hero-scene-headline { position: absolute; right: 0; bottom: 0; width: 100%; color: #f5faf5; font-size: clamp(34px, 3.2vw, 52px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; text-align: right; text-wrap: balance; text-shadow: 0 2px 14px #103e2c80; opacity: var(--scene-opacity, 0); transform: translate3d(0, calc((1 - var(--scene-opacity, 0)) * 18px), 0); will-change: transform, opacity; }
.hero-scene-headline span { display: block; }
.hero:not(.hero--cinematic) { height: auto !important; }
.hero:not(.hero--cinematic) :is(.hero-overlay, .hero-callout) { transform: none; opacity: 1; }
.hero:not(.hero--cinematic) .hero-callout { bottom: 48px; }
.hero:not(.hero--cinematic) video { display: none; }
.hero:not(.hero--cinematic) .sc-stage__poster { opacity: 1 !important; }

@media (max-width: 1050px) and (min-width: 861px) {
  .hero-copy { max-width: 510px; }
  .hero h1 { font-size: 48px; }
  .hero-callout { right: 4%; width: 210px; }
  .hero .trust { gap: 12px; }
  .hero .trust > div { width: 122px; }
}
@media (max-width: 860px) {
  /* Open with the full shot; expand the film as its HTML panel slides away. */
  .hero { padding-bottom: 0; --hero-film-height: calc(100vw * 2 / 3); }
  .hero-stage { height: auto; }
  .hero--cinematic .hero-stage { height: 100svh; }
  .hero-media { position: relative; width: 100%; aspect-ratio: 3 / 2; }
  .hero--cinematic .hero-media { aspect-ratio: auto; height: calc(var(--hero-film-height) + var(--hero-exit) * (1 - var(--hero-return)) * (100svh - var(--hero-film-height))); }
  .hero-overlay::before { content: ""; position: absolute; inset: var(--hero-film-height) 0 0; background: #f5faf5; }
  .hero--cinematic .hero-stage { background: #103e2c; }
  .hero-wash { display: none; }
  .hero-inner { height: auto; margin-top: var(--hero-film-height); padding-block: 25px 20px; }
  .hero-copy { max-width: none; padding: 0; gap: 13px; }
  .hero h1 { font-size: clamp(32px, 5.6vw, 42px); line-height: 1.06; }
  .hero h1 br:nth-of-type(2) { display: none; }
  .hero-description { font-size: 14px; max-width: 480px; }
  .hero-description br { display: none; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .07em; }
  .hero-buttons { height: auto; gap: 18px; }
  .hero-buttons .button { width: auto; min-height: 44px; padding-inline: 18px; font-size: 12px; }
  .hero-buttons .work-link { font-size: 12px; gap: 8px; }
  .hero-buttons .play { width: 34px; height: 34px; font-size: 13px; }
  .hero .trust { position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; height: auto; }
  .hero .trust > div { width: auto; gap: 7px; font-size: 10px; }
  .hero .trust img { width: 24px; height: 24px; }
  .hero .hero-callout { position: absolute; top: 16px; bottom: auto; left: 20px; right: auto; width: 180px; margin: 0; padding: 14px; gap: 8px; border-radius: 12px; }
  .hero .hero-callout h3 { font-size: 16px; line-height: 1.2; }
  .hero .hero-callout h3 br { display: inline; }
  .hero .hero-callout p { font-size: 11px; }
  .hero .hero-callout button { font-size: 12px; min-height: 28px; }
  .hero-scroll { top: -54px; bottom: auto; left: 0; width: 36px; height: 44px; padding: 5px; transform: none; }
  .hero-scene-headlines { --scene-right-inset: 20px; --scene-bottom-inset: max(28px, env(safe-area-inset-bottom)); width: calc(100% - 40px); }
  .hero-scene-headline { font-size: clamp(26px, 5.2vw, 36px); line-height: 1.12; letter-spacing: -.025em; }
  .hero-scene-scrim { width: calc(100% + 40px); height: 210px; }
  .hero:not(.hero--cinematic) .hero-overlay { position: relative; }
  .hero:not(.hero--cinematic) .hero-overlay::before { inset: 0; }
  .hero:not(.hero--cinematic) .hero-inner { margin-top: 0; }
  .hero:not(.hero--cinematic) .hero-callout { top: 16px; bottom: auto; }
}
@media (max-width: 700px) {
  .hero .trust { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 860px) and (max-height: 740px) {
  .hero-inner { padding-block: 20px 16px; }
  .hero-copy { gap: 12px; }
  .hero--cinematic .trust { display: none; }
}
@media (min-width: 701px) and (max-width: 860px) {
  .hero--cinematic { --hero-film-height: 48svh; }
  .hero--cinematic .hero-media :is(video, .sc-stage__poster) { object-position: 50% 58%; }
  .hero-inner { padding-block: 20px; }
  .hero .trust { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto !important; }
  .hero--cinematic .hero-stage { position: relative; height: clamp(640px, 86svh, 960px); }
  .hero :is(.hero-overlay, .hero-media, .hero-callout) { transform: none !important; }
  .hero :is(.hero-overlay, .hero-callout) { opacity: 1 !important; }
  .hero :is(video, .hero-scroll, .hero-progress, .hero-scene-headlines) { display: none !important; }
  .hero .sc-stage__poster { opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .hero--cinematic .hero-stage { height: auto; }
}