/* DDSG's construction film is the single authored motion sequence. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--header-height:80px}
html{scroll-behavior:auto;scroll-padding-top:96px;scrollbar-color:#8aa6b8 #edf3f6}
::selection{background:#c4e6f7;color:#102d46}
.site-header{position:sticky;top:0;height:var(--header-height);background:#fff;z-index:20}
.site-header .brand img{width:144px;height:52px}
.button{transition:background 160ms ease,transform 160ms var(--ease-out)}
.button:hover{transform:none}
.button:active{transform:scale(.97)}
.build-story{background:#f1f7fc;position:relative}
.story-stage{position:relative;min-height:680px;isolation:isolate;overflow:hidden}
.story-media{position:relative;aspect-ratio:16/9;width:100%;background:#f1f7fc}
.story-media img,.story-media video{display:block;width:100%;height:100%;object-fit:contain}
.story-media video{position:absolute;inset:0;opacity:0}
.film-ready .story-media video{opacity:1}
.story-copy{padding:36px 6%;position:relative}
.story-copy .eyebrow{margin-bottom:22px;font-size:11px;letter-spacing:.08em}
.story-copy h1{font-size:clamp(42px,4.25vw,72px);letter-spacing:-.035em;line-height:1.06}
.story-copy h2{font-size:clamp(34px,3.25vw,52px);letter-spacing:-.03em;line-height:1.12}
.story-copy h2 span{color:var(--blue)}
.story-description{font-size:15px;line-height:1.75;color:#425d71;max-width:38ch;margin:24px 0}
.story-copy .button{gap:24px}
.story-copy .booking-note{margin:12px 0 0;font-size:11px}
.story-copy .text-link{font-size:13px;min-height:44px}
.story-caption{font-size:10px;color:#425d71;padding:20px 6%}
.story-controls[hidden]{display:none}
.story-controls{position:absolute;bottom:26px;left:5%;right:5%;display:flex;align-items:center;gap:24px;font-size:11px;z-index:4}
.story-controls .story-cue{margin-right:auto;color:#425d71;display:flex;gap:20px;align-items:center}
.motion-toggle,.story-controls>a{border:0;background:transparent;color:#102d46;padding:10px 0;min-height:44px;font-size:11px;text-decoration:underline;text-underline-offset:5px}
.story-progress{display:none;position:absolute;inset:auto 0 0;height:2px;background:#dce7ef}
.story-progress span{display:block;width:100%;height:100%;background:#087db5;transform:scaleX(0);transform-origin:left}
.scroll-active .story-progress{display:block}
.scroll-active.build-story{height:380svh}
.scroll-active .story-stage{height:calc(100svh - var(--header-height));min-height:0;position:sticky;top:var(--header-height)}
.scroll-active .story-media{position:absolute;inset:0;aspect-ratio:auto}
.scroll-active .story-copy{position:absolute;top:50%;transform:translateY(-50%);padding:0;z-index:2}
.scroll-active .story-opening{left:5%;width:32%;max-width:470px}
.scroll-active .story-finished{right:5%;width:29%;max-width:430px}
.scroll-active .story-caption{position:absolute;top:16px;right:5%;padding:0;font-size:11px}
.scroll-active .story-description{font-size:clamp(13px,1.05vw,16px)}
.scroll-active .story-controls{bottom:18px}
/* Static/no-JS mode retains both pieces of copy and the complete reference. */
.build-story:not(.scroll-active) .story-opening{max-width:680px}
.build-story:not(.scroll-active) .story-finished{max-width:680px}
.build-story:not(.scroll-active) .story-media{max-height:650px}
.build-story:not(.scroll-active) .story-stage{display:flex;flex-direction:column}
.build-story:not(.scroll-active) .story-opening{order:-1}
.build-story:not(.scroll-active) .story-controls{position:relative;inset:auto;margin:0 6%;flex-wrap:wrap}
.build-story:not(.scroll-active) .story-cue,.build-story:not(.scroll-active) .story-controls>a{display:none}
.concept-image img{object-fit:contain}
.concept-card:hover .concept-image img{transform:none}
.contact-band{scroll-margin-top:100px}
@media(hover:hover) and (pointer:fine){.button:hover{transform:translateY(-1px)}.motion-toggle:hover,.story-controls>a:hover{color:var(--blue)}}
@media(max-width:1000px){.site-header .brand>span{display:none}.site-header nav{gap:22px}.story-copy h1{font-size:clamp(40px,4.5vw,58px)}.scroll-active .story-opening{width:34%}.scroll-active .story-finished{width:31%;right:4%}.story-copy .eyebrow{font-size:9px}.story-copy .button{font-size:12px;padding:13px 17px}}
@media(max-width:760px){
 :root{--header-height:72px}
 .site-header{padding:0 6%}.site-header .brand img{width:134px;height:48px}
 .site-header .menu-toggle{display:block;min-height:44px}
 .site-header nav{display:none;position:absolute;top:72px;left:0;right:0;padding:24px 6%;background:white;border-bottom:1px solid var(--line)}
 .site-header nav.is-open{display:flex;flex-direction:column;align-items:stretch}
 .scroll-active.build-story{height:330svh}
 .scroll-active .story-media{inset:0 0 auto;height:43%}
 .scroll-active .story-copy{top:44%;left:7%;right:7%;width:auto;max-width:none;transform:none}
 .story-copy h1{font-size:clamp(34px,7.7vw,46px);line-height:1.04}
 .story-copy h2{font-size:clamp(32px,7.2vw,42px)}
 .story-copy .eyebrow{font-size:11px;margin-bottom:12px;letter-spacing:.04em}
 .story-description,.scroll-active .story-description{font-size:13px;line-height:1.6;margin:14px 0;max-width:47ch}
 .story-copy .booking-note{display:none}
 .story-copy .button{padding:12px 18px;min-height:44px}
 .scroll-active .story-caption{top:10px;right:6%;font-size:11px}
 .story-controls{gap:14px;left:7%;right:7%;font-size:10px}
 .story-controls .story-cue{gap:8px;font-size:11px}
 .motion-toggle,.story-controls>a{font-size:11px}
 .build-story:not(.scroll-active) .story-copy{padding:32px 7%}
}
@media(prefers-reduced-motion:reduce){.button:active,.button:hover{transform:none}.story-media video{display:none}.story-copy{transition:none}}
.contact-band>.eyebrow{color:white}