/* One architectural window, continuing the Pergolas aperture and scale. */
.facades { position:relative; margin-top:20px; color:var(--cream); }
.facades-header-nav { display:flex; gap:30px; margin-right:110px; font-size:13px; }
.facades-header-nav a { display:flex; align-items:center; min-height:44px; }
.facades-header-nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.facades :is(a,button):focus-visible { outline:2px solid var(--cream); outline-offset:5px; }
.contour-journey { position:relative; }
.contour-anchor { position:absolute; top:0; }
.contour-stage { position:relative; padding:8px; }
.contour-aperture { position:relative; isolation:isolate; }
.contour-chapter { position:relative; height:calc(100svh - 16px); min-height:380px; overflow:hidden; border-radius:var(--radius); background:#555149; }
.contour-chapter + .contour-chapter { margin-top:8px; }
.contour-media,.contour-shade { position:absolute; inset:0; }
.contour-media img,.contour-media canvas,.contour-media video { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 50%; }
.contour-media canvas,.contour-media video { opacity:0; }
.contour-media canvas[data-ready="true"] { opacity:1; }
.contour-chapter.is-watching video.is-ready { opacity:1; }
.contour-chapter.is-watching canvas { opacity:0; }
.contour-shade { pointer-events:none; background:transparent; }
.contour-title { position:absolute; left:calc(var(--shell) - 8px); right:calc(var(--shell) - 8px); top:12%; pointer-events:none; }
.contour-title .eyebrow { font-size:13px; margin-bottom:22px; }
.contour-title h2 { font-size:clamp(100px,14.6vw,260px); line-height:.86; letter-spacing:-.075em; font-weight:400; }
.contour-title h3 { font-size:clamp(60px,8vw,142px); line-height:.95; letter-spacing:-.065em; font-weight:400; }
.contour-caption { position:absolute; left:calc(var(--shell) - 8px); bottom:70px; display:flex; align-items:center; gap:35px; }
.contour-caption p { font-size:11px; line-height:1.5; }
.contour-caption p span { margin-left:20px; font-size:15px; }
.contour-destination { position:absolute; z-index:4; right:calc(var(--shell) - 8px); bottom:64px; }
.contour-afterword { padding-top:clamp(55px,6.5vw,105px); display:flex; align-items:baseline; justify-content:space-between; gap:50px; }
.contour-afterword > p { font-size:13px; }
.contour-afterword > div { width:50%; max-width:560px; }
.contour-afterword > div > p:first-child { font-size:clamp(21px,2.15vw,35px); line-height:1.22; letter-spacing:-.035em; }
.contour-afterword .contour-qualification { margin-top:23px; max-width:400px; color:var(--taupe); font-size:11px; line-height:1.65; }
/* One film in one viewport: 240 frames over ≈ 2.4 viewports, then a ≈ .35 viewport hold on the last frame before the
 * sticky stage releases (contour-scroll.js timeline.architectureEnd = .88). No scroll is held for anything else. */
html.is-motion .contour-journey.is-scrubbing:not(.is-static) { height:375svh; }
html.is-motion .contour-journey.is-scrubbing:not(.is-static) .contour-stage { position:sticky; top:0; height:100svh; min-height:396px; }
html.is-motion .contour-journey.is-scrubbing:not(.is-static) .contour-aperture { width:100%; height:100%; overflow:hidden; border-radius:var(--radius); clip-path:inset(var(--contour-inset-y,0%) var(--contour-inset-x,0%) round var(--contour-radius,44px)); }
html.is-motion .contour-journey.is-scrubbing:not(.is-static) .contour-chapter { position:absolute; inset:0; margin:0; height:100%; border-radius:0; }
/* A missing enhancement still leaves one readable architectural card. */
html:not(.is-motion) .contour-media canvas,.contour-journey.is-static .contour-media canvas,.contour-journey:not(.is-scrubbing) .contour-media canvas { opacity:0; }
html:not(.is-motion) .contour-title,.contour-journey.is-static .contour-title,.contour-journey:not(.is-scrubbing) .contour-title { opacity:1 !important; transform:none !important; }
html:not(.is-motion) .contour-caption,.contour-journey.is-static .contour-caption,.contour-journey:not(.is-scrubbing) .contour-caption { bottom:100px; }
@media (max-width:700px) {
  .facades-header-nav { position:absolute; top:50px; left:0; gap:22px; margin:0; font-size:12px; }
  .facades { margin-top:0; }
  .contour-stage { padding:6px; }
  .contour-chapter { height:calc(100svh - 12px); border-radius:28px; }
  html.is-motion .contour-journey.is-scrubbing:not(.is-static) { height:350svh; }
  .contour-title { top:13%; left:20px; right:20px; }
  .contour-title .eyebrow { font-size:11px; margin-bottom:18px; }
  .contour-title h2 { font-size:16.1vw; }
  .contour-title h3 { font-size:17vw; line-height:.97; }
  .contour-media img,.contour-media video { object-position:50% center; }
  .contour-caption { bottom:134px; left:22px; gap:20px; }
  .contour-caption p { font-size:10px; }
  .contour-caption p span { margin-left:14px; font-size:13px; }
  .contour-destination { right:22px; bottom:66px; }
  .contour-destination .pill { min-height:46px; padding-left:17px; font-size:12px; gap:20px; }
  .contour-afterword { padding-top:52px; flex-direction:column; gap:25px; }
  .contour-afterword > p { font-size:12px; }
  .contour-afterword > div { width:100%; }
  .contour-afterword > div > p:first-child { font-size:25px; max-width:340px; }
  .contour-afterword .contour-qualification { font-size:10px; max-width:300px; margin-top:20px; }
  html:not(.is-motion) .contour-caption,.contour-journey.is-static .contour-caption,.contour-journey:not(.is-scrubbing) .contour-caption { bottom:135px; flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (max-height:540px) and (orientation:landscape) {
  .contour-chapter { min-height:0; }
  html.is-motion .contour-journey.is-scrubbing:not(.is-static) .contour-stage { min-height:0; }
  .contour-title { top:12%; }
  .contour-title .eyebrow { margin-bottom:12px; font-size:10px; }
  .contour-title h2 { font-size:13vw; }
  .contour-title h3 { font-size:10vw; }
  .contour-caption { bottom:54px; }
  .contour-destination { bottom:42px; }
}
@media (prefers-reduced-motion:reduce) { .facades * { transition:none!important; } }

/* Without the scrubbing journey the couplet is always readable. */
html:not(.is-motion) .contour-caption,.contour-journey.is-static .contour-caption,.contour-journey:not(.is-scrubbing) .contour-caption { opacity:1!important; }


@media(max-width:700px) {
  .contour-chapter:is([data-film-transport="video"],[data-film-waiting="true"]) .contour-caption { flex-direction:column; align-items:flex-start; gap:4px; }
}