/* A single uninterrupted canvas, from the first hero gesture to the night garden. */
.hero-journey{height:710svh;isolation:isolate}
.transformation-anchor{position:absolute;top:45svh;left:0;width:1px;height:1px;pointer-events:none}
.cinematic-hero{isolation:isolate;perspective:none;filter:none!important}
.cinematic-hero .hero-image{z-index:0;transform:scale(1.025);object-position:center}
.cinematic-hero #garden-canvas,.cinematic-hero .sequence-fallback{z-index:1;inset:0;width:100%;height:100%;object-fit:cover}
.garden-construction-buffer{position:absolute;z-index:1;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.garden-construction-buffer.ready:not(.reduced){visibility:visible}
@media(prefers-reduced-motion:reduce){.garden-construction-buffer{display:none}}
.cinematic-hero .sequence-fallback{opacity:0}
.cinematic-hero .hero-shade{z-index:2;background:linear-gradient(90deg,#061e1666,transparent 75%),linear-gradient(0deg,#061e1699,transparent 65%)}
.cinematic-hero .cinema-shade{z-index:2;opacity:0;background:linear-gradient(0deg,#041a13d6,transparent 65%)}
.cinematic-hero .hero-content,.cinematic-hero .hero-caption{z-index:5}
.cinematic-hero .cinema-copy,.cinematic-hero .cinema-controls,.cinematic-hero .cinema-top,.cinematic-hero .cinema-skip{z-index:5;opacity:0;visibility:hidden}
.cinematic-hero .cinema-copy{bottom:170px;will-change:transform,opacity}
.cinematic-hero .hero-content{will-change:transform,opacity}
.cinematic-hero #transformation-title{position:relative;min-height:2.1em;overflow:visible}
.caption-layer{position:absolute;inset:0;display:block;pointer-events:none;will-change:transform,opacity}
.caption-layer:not(:first-child){opacity:0}
.cinematic-hero .sequence-status,.cinematic-hero .sequence-retry{z-index:8}
.cinematic-hero .sequence-status{right:var(--gutter);top:145px}
.expertise-shot:first-child img{object-position:center}
.shot-copy,.expertise-shot img,.craft-print,.projects-grid{will-change:transform}
@media(max-width:760px){.hero-journey{height:660svh}.transformation-anchor{top:42svh}.cinematic-hero .hero-image{object-position:center}.cinematic-hero .cinema-copy{bottom:161px}.cinematic-hero .hero-content{bottom:19vh}.caption-layer{line-height:1.05}}
@media(prefers-reduced-motion:reduce){.hero-journey{height:auto}.cinematic-hero{height:100svh;min-height:720px}.cinematic-hero .hero-content{opacity:1!important;visibility:visible!important;transform:none!important}.cinematic-hero .cinema-copy,.cinematic-hero .cinema-controls,.cinematic-hero .cinema-top,.cinematic-hero .cinema-skip{display:none}.cinematic-hero .hero-caption{opacity:1!important}.cinematic-hero .hero-image{transform:none}.transformation-anchor{top:0}.caption-layer{will-change:auto}}
/* The next view is revealed in viewport coordinates, rather than restarting below the film. */
.expertise{margin-top:-100svh}
@media(prefers-reduced-motion:reduce){.expertise{margin-top:0}.expertise-stage{transform:none!important;clip-path:none!important}}
.cinematic-hero .cinema-copy{width:calc(100% - var(--gutter)*2);max-width:650px}
@media(max-width:760px){.cinematic-hero .cinema-copy{width:88%;max-width:88%}}
.expertise{background:transparent}

/* The real filmed shot is scrubbed by the same native scroll journey. */
.video-hero-mode .hero-journey{height:510svh}
.video-hero-mode #garden-canvas,.video-hero-mode .cinema-copy,.video-hero-mode .cinema-top,.video-hero-mode .cinema-shade,.video-hero-mode .stage-dots{display:none!important}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .3s ease;transform:scale(1.025);pointer-events:none}
.hero-film.ready{opacity:1}
.video-hero-mode .hero-shade{background:linear-gradient(90deg,#061e168c,transparent 85%),linear-gradient(0deg,#061e1699,transparent 70%)}
@media(max-width:760px){.video-hero-mode .hero-journey{height:530svh}.hero-film{object-position:60% center}}
@media(prefers-reduced-motion:reduce){.video-hero-mode .hero-journey{height:auto}.hero-film{transition:none}.video-hero-mode .hero-caption{visibility:visible!important}.video-hero-mode .cinema-controls,.video-hero-mode .cinema-skip{display:none!important}}

.construction-video-mode .hero-film,.construction-video-mode .cinematic-hero .hero-image{
 object-position:center;
 transform:scale(var(--film-scale,1.025));
}
.film-credit{flex-basis:100%;font-size:10px;line-height:1.65}
.film-credit a{text-decoration:underline;text-underline-offset:.15em}
.construction-video-mode .hero-shade{background:linear-gradient(90deg,#10281f82,transparent 76%),linear-gradient(0deg,#071810cc,transparent 60%)}
.construction-video-mode .cinema-controls{width:min(430px,60vw);text-shadow:0 1px 5px #041a13}
@media(max-width:760px){
 .construction-video-mode .cinema-controls{width:calc(100% - var(--gutter)*2)}
}

.garden-visit-mode .hero-journey {
 height: 850svh;
}

.garden-visit,
.garden-visit-shade {
 position: absolute;
 inset: 0;
 pointer-events: none;
}

.garden-visit {
 z-index: 3;
}

.garden-visit-visual,
.garden-visit-camera {
 position: absolute;
 inset: 0;
}

.garden-visit-camera {
 width: 100%;
 height: 100%;
 visibility: hidden;
}

.garden-visit-camera.ready {
 visibility: visible;
}

.garden-travelling-film,
.garden-travelling-canvas {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
}

.garden-travelling-film {
 object-fit: cover;
 object-position: var(--travelling-position, 50%) center;
 transform: scale(1.025);
}

.garden-travelling-film.ready,
.garden-travelling-canvas.ready {
 opacity: 1;
}

.garden-ambient-canvas {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transform: scale(1.025);
 opacity: 0;
}

.garden-ambient-canvas.is-live {
 opacity: 1;
 transition: opacity 140ms ease-out;
}

.garden-ambient-toggle {
 position: absolute;
 z-index: 2;
 top: clamp(78px, 12svh, 118px);
 right: var(--gutter);
 min-height: 44px;
 padding: 0 15px;
 border: 1px solid #f6f2e888;
 border-radius: 3px;
 background: #10271bb8;
 color: var(--cream);
 font: 500 11px/1 var(--sans);
 pointer-events: auto;
 cursor: pointer;
}

.garden-visit .garden-travelling-retry {
 z-index: 2;
 pointer-events: auto;
}

.garden-visit-photo {
 position: absolute;
 inset: 0 auto auto 0;
 max-width: none;
 transform-origin: top left;
 pointer-events: none;
}

.garden-visit-shade {
 opacity: 0;
 background: linear-gradient(0deg, #071a13ed, #071a1340 42%, transparent 69%);
}

.garden-visit-copy {
 position: absolute;
 left: var(--gutter);
 right: var(--gutter);
 bottom: clamp(42px, 9svh, 116px);
 width: min(620px, calc(100% - 2 * var(--gutter)));
 opacity: 0;
 color: var(--cream);
}

.garden-visit-copy[aria-hidden="true"] {
 visibility: hidden;
}

.garden-visit-copy[data-align="right"] {
 left: auto;
 width: min(460px, calc(100% - 2 * var(--gutter)));
}

.garden-visit-copy h2 {
 margin: 14px 0 16px;
 font: 400 clamp(44px, 5.1vw, 87px)/.92 var(--serif);
 letter-spacing: -.045em;
 text-wrap: balance;
}

.garden-visit-copy h2 em {
 color: #dce4c6;
}

.garden-visit-copy > p:last-child {
 max-width: 42ch;
 margin: 0;
 font-size: clamp(14px, 1.25vw, 18px);
 line-height: 1.55;
}

.garden-visit-final .round-link {
 display: inline-flex;
 margin-top: 10px;
 pointer-events: auto;
}

.garden-visit-summary {
 display: none;
}

@media (max-width:760px) {
 .garden-visit-mode .hero-journey {
  height: 780svh;
 }
 .garden-visit-copy {
  bottom: clamp(30px, 7svh, 60px);
 }
 .garden-visit-copy h2 {
  font-size: clamp(34px, 9.6vw, 55px);
  margin: 12px 0;
 }
}

@media (prefers-reduced-motion:reduce) {
 .garden-visit-mode .hero-journey {
  height: auto;
 }
 .garden-visit {
  display: none;
 }
 .garden-visit-summary {
  display: grid;
  gap: 24px;
  padding: 52px var(--gutter);
  color: var(--cream);
  background: var(--forest);
 }
 .garden-visit-summary h2 {
  margin: 0 0 8px;
  font: 400 clamp(30px, 4vw, 45px)/1 var(--serif);
 }
 .garden-visit-summary p {
  max-width: 46ch;
  margin: 0;
 }
}


.garden-visit-extended .hero-journey { height: 1220svh; }
@media (max-width:760px) {
 .garden-visit-extended .hero-journey { height: 1140svh; }
}
@media (prefers-reduced-motion:reduce) {
 .garden-visit-extended .hero-journey { height: auto; }
}

.garden-world-tour .hero-journey { height: 1480svh; }
.garden-world-tour .cinematic-hero #garden-canvas { display: none; }
.garden-world-tour .hero-image:not([data-world-poster]) { visibility: hidden; }
.garden-world-tour .garden-travelling-canvas:not(.ready) { opacity: 0; }
@media (max-width:760px) {
 .garden-world-tour .hero-journey { height: 1340svh; }
}
@media (prefers-reduced-motion:reduce) {
 .garden-world-tour .hero-journey { height: auto; }
}