.hero{position:relative;background:var(--charcoal)}
.hero .pane__stage{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--charcoal);isolation:isolate}
.hero__media{position:absolute;inset:-8% 0;z-index:-2;transform:translate3d(0,var(--parallax,0px),0);will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient( to top,rgba(20,18,16,0.94) 0%,rgba(20,18,16,0.9) 45%,rgba(20,18,16,0.74) 74%,rgba(20,18,16,0.55) 100% )}
.hero__content{position:relative;width:min(100% - (var(--gutter) * 2),var(--shell));margin-inline:auto;padding-block:clamp(4rem,2.5rem + 7vw,8rem);color:var(--cream)}
.hero__title{color:var(--cream);max-width:15ch;margin-bottom:1.25rem}
.hero__sub{font-size:var(--fs-lede);line-height:1.45;color:var(--cream-soft);max-width:46ch;margin:0}
.hero__scroll{position:absolute;right:var(--gutter);bottom:clamp(1.5rem,1rem + 1.5vw,2.5rem);font-family:var(--font-display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--cream-soft);display:flex;align-items:center;gap:0.6rem}
.hero__scroll::after{content:"";width:1px;height:2.5rem;background:linear-gradient(to bottom,var(--cream-soft),transparent)}
@media (max-width:640px){.hero__scroll{display:none}
}
@media (min-width:901px){.hero .pane__stage{align-items:center}
.hero__content{display:grid;grid-template-columns:minmax(0,47%);padding-block:0}
.hero__scroll{right:auto;left:max(var(--gutter),calc((100% - var(--shell)) / 2))}
.hero__veil{background:linear-gradient( to bottom,rgba(20,18,16,0.72) 0%,rgba(20,18,16,0.46) 9%,rgba(20,18,16,0.2) 18%,rgba(20,18,16,0) 34% ),linear-gradient( to top,rgba(20,18,16,0.45) 0%,rgba(20,18,16,0) 20% ),linear-gradient( to right,rgba(20,18,16,0.96) 0%,rgba(20,18,16,0.955) 22%,rgba(20,18,16,0.94) 34%,rgba(20,18,16,0.9) 42%,rgba(20,18,16,0.82) 48%,rgba(20,18,16,0.68) 54%,rgba(20,18,16,0.5) 60%,rgba(20,18,16,0.34) 66%,rgba(20,18,16,0.22) 72%,rgba(20,18,16,0.12) 80%,rgba(20,18,16,0.07) 90%,rgba(20,18,16,0.05) 100% )}
}
.scene{position:relative;height:190vh;background:var(--charcoal)}
.scene__track{position:sticky;top:0;height:100svh;overflow:hidden}
.scene__viewport{position:relative;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);align-items:center}
.scene__media{position:absolute;inset:-8% 0;z-index:0;opacity:0;transition:opacity var(--dur-settle) var(--ease-reveal)}
.scene.is-active .scene__media,.scene.is-leaving .scene__media{opacity:1}
.scene__media img{width:100%;height:100%;object-fit:cover}
.scene__veil{position:absolute;inset:0;z-index:1}
.scene--left .scene__veil{background:linear-gradient( to right,rgba(20,18,16,0.94) 0%,rgba(20,18,16,0.82) 34%,rgba(20,18,16,0.3) 66%,rgba(20,18,16,0.2) 100% )}
.scene--right .scene__veil{background:linear-gradient( to left,rgba(20,18,16,0.94) 0%,rgba(20,18,16,0.82) 34%,rgba(20,18,16,0.3) 66%,rgba(20,18,16,0.2) 100% )}
.scene__panel{position:relative;z-index:2;width:min(100% - (var(--gutter) * 2),var(--shell));margin-inline:auto;display:grid}
.scene--left .scene__panel{justify-items:start}
.scene--right .scene__panel{justify-items:end;text-align:left}
.scene__copy{max-width:46ch;color:var(--cream)}
.scene__index{position:relative;z-index:3;align-self:start;padding-top:calc(var(--nav-h) + clamp(0.75rem,0.3rem + 1.6vw,1.75rem));padding-inline:var(--gutter);display:flex;align-items:baseline;gap:0.7rem;font-family:var(--font-display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--cream-soft)}
.scene--left .scene__index{justify-self:start}
.scene--right .scene__index{justify-self:end}
@media (min-width:901px) and (max-height:720px){.scene__index{padding-top:calc(var(--nav-h) + 0.4rem)}
}
@media (min-width:901px) and (max-height:660px){.scene__index{padding-top:calc(var(--nav-h) + 0.2rem)}
.scene__title{font-size:var(--fs-display-m);margin-bottom:0.5rem}
.scene__lede{font-size:1.05rem;margin-bottom:0.6rem}
.scene__body{font-size:0.95rem}
.scene__meta{margin-top:1rem}
}
.scene__index strong{font-size:1.6rem;font-weight:700;letter-spacing:0;color:var(--oxide-bright)}
.scene__title{color:var(--cream);margin-bottom:0.75rem}
.scene__lede{font-size:var(--fs-lede);line-height:1.4;color:var(--cream);margin-bottom:1rem;text-wrap:balance}
.scene__body{color:var(--cream-soft);max-width:44ch}
.scene__meta{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem 0.6rem}
.scene__meta li{font-family:var(--font-display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--cream-soft);border:1px solid var(--rule-dark);border-radius:2px;padding:0.45rem 0.75rem}
@media (max-width:900px){.scene{height:auto}
.scene__track{position:relative;height:auto}
.scene__viewport{min-height:88svh;align-items:end}
.scene__media{inset:0;transform:none;will-change:auto}
.scene--left .scene__veil,.scene--right .scene__veil{background:linear-gradient( to top,rgba(20,18,16,0.95) 0%,rgba(20,18,16,0.86) 40%,rgba(20,18,16,0.45) 75%,rgba(20,18,16,0.35) 100% )}
.scene__panel{padding-block:clamp(2.5rem,2rem + 3vw,4rem)}
.scene--left .scene__panel,.scene--right .scene__panel{justify-items:start}
.scene--left .scene__index,.scene--right .scene__index{justify-self:start;padding-top:calc(var(--nav-h) + 1rem)}
}
.crew-band{background:var(--charcoal);color:var(--cream)}
.crew-band .pane__stage{padding-block:var(--band-y)}
.crew-band__grid{width:min(100% - (var(--gutter) * 2),var(--shell));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1.2rem + 4vw,5rem);align-items:center}
@media (max-width:860px){.crew-band__grid{grid-template-columns:minmax(0,1fr)}
}
.crew-band h2{color:var(--cream)}
.crew-band p{color:var(--cream-soft);max-width:42ch}
.crew-band__media img{width:100%;border-radius:2px}
.work-teaser{background:var(--paper)}
.work-teaser .pane__stage{padding-block:var(--band-y)}
.work-teaser__head{width:min(100% - (var(--gutter) * 2),var(--shell));margin:0 auto clamp(2rem,1.5rem + 2.4vw,3.25rem);display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.5rem}
.work-teaser__head h2{margin-bottom:0}
.work-teaser__grid{width:min(100% - (var(--gutter) * 2),var(--shell));margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(0.75rem,0.5rem + 1vw,1.25rem)}
@media (max-width:760px){.work-teaser__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.work-teaser__grid>*:last-child{display:none}
}
.work-teaser__grid figure{margin:0;overflow:hidden;border-radius:2px;background:var(--panel)}
.work-teaser__grid img{width:100%;aspect-ratio:4 / 3;object-fit:cover;transition:transform var(--dur-settle) var(--ease-reveal)}
.work-teaser__grid figure:hover img{transform:scale(1.03)}
.closing{background:var(--charcoal-deep);color:var(--cream)}
.closing .pane__stage{position:relative;padding-block:clamp(5rem,3.5rem + 7vw,9rem);overflow:hidden;isolation:isolate}
.closing__media{position:absolute;inset:-10% 0;z-index:-2}
.closing__media img{width:100%;height:100%;object-fit:cover}
.closing__veil{position:absolute;inset:0;z-index:-1;background:rgba(20,18,16,0.9)}
.closing__inner{width:min(100% - (var(--gutter) * 2),var(--shell-narrow));margin-inline:auto;text-align:center}
.closing h2{color:var(--cream)}
.closing p{color:var(--cream-soft);margin-inline:auto;max-width:48ch}
.closing .actions{justify-content:center}
.direct-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:clamp(1.5rem,1rem + 2vw,3rem);margin-top:clamp(2.25rem,1.75rem + 2vw,3.25rem);padding-top:clamp(2rem,1.5rem + 2vw,3rem);border-top:1px solid var(--rule-dark)}
.direct-line{display:grid;gap:0.5rem;justify-items:center}
.direct-line__label{font-family:var(--font-display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--stone-dark)}
.direct-line__value{font-family:var(--font-display);font-size:clamp(1.15rem,1rem + 0.7vw,1.5rem);font-weight:600;letter-spacing:-0.01em;color:var(--cream);text-decoration:none;border-bottom:1px solid var(--oxide-bright);padding-bottom:3px;overflow-wrap:anywhere}
.direct-line__value:hover{color:var(--cream);border-bottom-color:var(--cream)}
.direct-line__value--pending{color:var(--cream-soft);border-bottom-style:dashed;border-bottom-color:var(--stone-dark)}
:root{--pane-h:200svh;--pane-v:100svh}
.pane__stage{position:relative}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.pane{height:var(--pane-h)}
.pane__pin{position:sticky;top:0;height:var(--pane-v);overflow:hidden}
.crew-band .pane__stage,.work-teaser .pane__stage,.closing .pane__stage{min-height:var(--pane-v);display:grid;align-content:center}
.hero .pane__stage{height:var(--pane-v)}
}
@supports (animation-timeline:view()){@media (min-width:901px) and (prefers-reduced-motion:no-preference){.pane{view-timeline-name:--pane;view-timeline-axis:block;view-timeline-inset:0}
.pane .pane__stage{animation:pane-hold linear both;animation-timeline:--pane;animation-range:cover 0% cover 100%}
@keyframes pane-hold{0%{translate:0 calc(var(--pane-v) * -1)}
33.333%{translate:0 0}
66.667%{translate:0 0}
100%{translate:0 var(--pane-v)}
}
.pane:not(.pane--lcp) .pane__stage{animation:pane-hold linear both,pane-recede linear both;animation-timeline:--pane,--pane;animation-range:cover 0% cover 100%,cover 66.667% cover 100%}
@keyframes pane-recede{from{scale:1}
to{scale:0.965}
}
.has-anim .pane:not(.pane--lcp) .reveal{opacity:1;transform:none;transition:none}
.pane__build>*,.scene__index{opacity:0;translate:0 var(--dist-reveal);animation:pane-build linear both;animation-timeline:--pane;animation-range:cover 17% cover 26%}
@keyframes pane-build{from{opacity:0;translate:0 var(--dist-reveal)}
to{opacity:1;translate:0 0}
}
}
}
@media (max-width:768px){.pane{height:auto}
.pane__pin{position:static;height:auto;overflow:visible}
.pane__stage{translate:none;scale:none;animation:none !important}
.pane__build>*,.scene__index,.scene__meta li{opacity:1 !important;translate:none !important;animation:none !important}
}
@media (prefers-reduced-motion:reduce){.pane{height:auto}
.pane__pin{position:static;height:auto;overflow:visible}
.pane__stage{translate:none;scale:none;animation:none !important}
.pane__build>*,.scene__index,.scene__meta li{opacity:1 !important;translate:none !important;animation:none !important}
}
.pane__bp{display:none;--bp-size:540px;--bp-x:-9999px;--bp-y:-9999px;--bp-line:173,196,172;--bp-grid:linear-gradient(rgba(var(--bp-line),0.42) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--bp-line),0.42) 1px,transparent 1px),linear-gradient(rgba(var(--bp-line),0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--bp-line),0.2) 1px,transparent 1px);position:absolute;left:0;top:0;z-index:0;width:var(--bp-size);height:var(--bp-size);pointer-events:none;opacity:0;transition:opacity var(--dur-settle) var(--ease-reveal);-webkit-mask-image:radial-gradient( circle at 50% 50%,#000 0%,rgba(0,0,0,0.92) 28%,rgba(0,0,0,0.55) 52%,rgba(0,0,0,0.18) 72%,transparent 86% );mask-image:radial-gradient( circle at 50% 50%,#000 0%,rgba(0,0,0,0.92) 28%,rgba(0,0,0,0.55) 52%,rgba(0,0,0,0.18) 72%,transparent 86% )}
.hero .pane__bp,.closing .pane__bp{z-index:-2}
.pane__bp__plate{position:absolute;left:0;top:0;width:var(--bp-w,100vw);height:var(--bp-h,100svh);background-image:var(--bp-grid);background-size:96px 96px,96px 96px,24px 24px,24px 24px;background-color:rgba(17,21,18,0.62)}
.pane__bp.is-lit{opacity:1;transform:translate3d(var(--bp-x),var(--bp-y),0)}
.pane__bp.is-lit .pane__bp__plate{transform:translate3d(calc(var(--bp-x) * -1),calc(var(--bp-y) * -1),0)}
.hero .pane__bp.is-drawn .pane__bp__plate{background-image:url(../images/bp-house.svg),var(--bp-grid)}
#stage-ground .pane__bp.is-drawn .pane__bp__plate{background-image:url(../images/bp-foundation.svg),var(--bp-grid)}
#stage-frame .pane__bp.is-drawn .pane__bp__plate{background-image:url(../images/bp-framing.svg),var(--bp-grid)}
#stage-roof .pane__bp.is-drawn .pane__bp__plate{background-image:url(../images/bp-roof.svg),var(--bp-grid)}
#stage-finish .pane__bp.is-drawn .pane__bp__plate{background-image:url(../images/bp-finish.svg),var(--bp-grid)}
#stage-home .pane__bp.is-drawn .pane__bp__plate{background-image:url(../images/bp-elevation.svg),var(--bp-grid)}
.pane__bp.is-drawn .pane__bp__plate{background-size:100% 100%,96px 96px,96px 96px,24px 24px,24px 24px;background-repeat:no-repeat,repeat,repeat,repeat,repeat}
@media (min-width:901px) and (hover:hover) and (pointer:fine){.pane__bp{display:block}
}