.home-page{background:#080808;color:#f2f2ec;--scene-height:calc(100svh - var(--nav-height));padding-top:var(--nav-height)}
.home-page .frame-footer{border-color:#30302d;color:#aaa}
.scroll-scene{position:relative;isolation:isolate;--scene-shade:0;--cover-opacity:1}
.scene-stage{position:sticky;top:var(--nav-height);height:var(--scene-height);min-height:400px;background:#555b4c;z-index:0}
.scene-media,.scene-media>img,.scene-media>video,.scene-shade,.scene-cover{position:absolute;inset:0;width:100%;height:100%}
.scene-media{overflow:hidden}.scene-media>img,.scene-media>video{object-fit:cover;object-position:center}.scene-media>video{opacity:0}.scene-media>video.is-playing{opacity:1}
.scene-shade{background:#080808;opacity:var(--scene-shade);pointer-events:none}
.scene-cover{background:linear-gradient(180deg,transparent 55%,#0009);opacity:var(--cover-opacity)}
.motion-label{position:absolute;top:22px;left:4%;font-size:9px;letter-spacing:.6px;background:#0006;padding:7px 10px}
.scene-heading{position:absolute;left:4%;right:20%;bottom:90px}.scene-heading h1{font-weight:400;font-size:clamp(40px,4.8vw,76px);line-height:1.12;letter-spacing:-1.7px;margin:14px 0 22px;max-width:950px;overflow-wrap:anywhere}.scene-heading>a{font-size:13px}
.scene-controls{position:absolute;bottom:30px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:11px}.scene-controls button{border-color:#ffffff88;border-radius:30px;color:#fff;font-size:11px;padding:11px 17px;background:#0006}.scene-controls button:hover:not(:disabled){background:#000a}.scene-controls button:disabled{opacity:.8}
.scene-stories{position:relative;z-index:2;margin-top:0;padding:32px 4% 70px;scroll-margin-top:calc(var(--nav-height) + 24px);background:linear-gradient(transparent,#080808)}
.home-section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:28px}.home-section-heading h2{font-weight:400;font-size:25px;letter-spacing:-.4px}.home-section-heading>a{font-size:12px;color:#ccc}
.home-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.home-story{display:block;min-width:0}.home-story>img,.home-story>.content-media,.story-type-art{width:100%;aspect-ratio:1.5;height:auto;object-fit:cover;margin-bottom:18px}.home-story>span{font-size:10px;color:#c6c8bf}.home-story h3{font-size:clamp(20px,2vw,30px);font-weight:400;line-height:1.3;margin-top:12px;overflow-wrap:anywhere}.home-story p{font-size:11px;color:#b3b6aa;margin-top:18px}.home-story:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}.story-type-art{background:#252922;padding:9%;display:flex;flex-direction:column;justify-content:space-between;font-size:clamp(35px,5vw,80px);letter-spacing:-3px}.story-type-art span{font-size:13px;letter-spacing:0;line-height:1.4}
.home-purpose{background:#080808;position:relative;padding:65px 4% 130px;display:grid;grid-template-columns:1fr 2fr;gap:8%}.home-purpose>.eyebrow{padding-top:12px}.home-purpose h2{font-size:clamp(35px,4.8vw,72px);font-weight:400;line-height:1.15;letter-spacing:-1.5px}.home-purpose p{font-size:17px;line-height:1.8;max-width:540px;color:#aaa;margin-top:30px}.home-purpose a{display:inline-block;margin-top:25px;font-size:13px;border-bottom:1px solid #888;padding-bottom:8px}.home-purpose small{display:block;font-size:10px;color:#888;margin-top:22px}
.home-work-feature{position:relative;background:#080808;padding:0 4% 100px}.home-work-image{display:block;position:relative;height:clamp(350px,55vw,750px)}.home-work-image>span{position:absolute;bottom:24px;right:24px;padding:12px 20px;background:#080808;color:#fff;font-size:12px}.home-work-caption{display:flex;justify-content:space-between;gap:25px;align-items:baseline;padding-top:22px}.home-work-caption h3{font-size:25px;font-weight:400}.home-work-caption p{font-size:11px;color:#aaa}
@media(max-width:700px){.home-story-grid{gap:15px}.home-story h3{font-size:18px}.story-type-art{font-size:38px}.story-type-art span{font-size:10px}.home-purpose{gap:6%;grid-template-columns:1fr 2.3fr;padding-bottom:85px}.home-purpose p{font-size:14px}.scene-heading{right:6%}}
@media(max-width:560px){.scene-heading{bottom:110px}.scene-heading h1{font-size:42px}.motion-label{max-width:92%;font-size:8px}.scene-controls{bottom:24px;gap:12px;font-size:10px}.scene-controls button{font-size:10px}.scene-stories{padding-top:22px;padding-bottom:30px}.home-story-grid{grid-template-columns:1fr;gap:34px}.home-story>img,.home-story>.content-media,.story-type-art{aspect-ratio:1.65}.home-story h3{font-size:26px}.story-type-art{font-size:72px;padding:24px}.story-type-art span{font-size:16px}.home-purpose{display:block;padding-top:55px}.home-purpose h2{margin-top:28px;font-size:40px}.home-work-caption{display:block}.home-work-caption p{margin-top:12px}.home-work-feature{padding-bottom:65px}}
@media(prefers-reduced-motion:reduce){.scene-stage{position:relative;top:0}.scene-shade{opacity:0!important}.scene-cover{opacity:1!important}.scene-media>video{display:none}.scene-stories{background:#080808}.home-page{scroll-behavior:auto}}

/* Four configurable hero slots; only this strip scrolls horizontally. */
.project-selector{position:absolute;left:4%;right:4%;bottom:79px;display:flex;gap:10px;overflow-x:auto;max-width:92%;padding:7px 2px 12px;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#aaa #ffffff15;touch-action:pan-x pan-y;isolation:isolate}
.project-selector[hidden]{display:none}
.project-selector>button{flex:0 0 auto;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:44px;padding:10px 18px;border:1px solid #ffffff70;border-radius:2px;background:#10140fc9;color:#fff;font-size:12px;letter-spacing:.2px}
.project-selector>button:hover:not(:disabled){background:#30382fee}
.project-selector>button[aria-pressed="true"]{background:#f1f1e9;color:#111;border-color:#f1f1e9;box-shadow:inset 0 -3px #808a6c}
.project-selector>button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.home-page .scene-heading{bottom:174px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:560px){.project-selector{bottom:76px;gap:8px}.project-selector>button{font-size:11px;padding:10px 14px}.home-page .scene-heading{bottom:167px}.home-page .scene-heading h1{font-size:clamp(30px,8vw,42px)}}
@media(max-height:600px){.home-page .scene-heading h1{font-size:34px;margin:10px 0}.home-page .motion-label{top:12px}.home-page .scene-stage{min-height:420px}}
/* Hero content uses flow layout; shared banner styles live in navigation.css. */
.home-page .scene-cover{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px;padding:22px 4% 24px}.home-page .motion-label{position:static;justify-self:start;max-width:100%;margin:0}.home-page .scene-heading{position:static;align-self:end;min-width:0;max-width:100%;padding-bottom:8px}.home-page .scene-heading h1{font-size:clamp(36px,5vw,80px);margin:12px 0 16px;line-height:1.08}.home-page .project-selector{position:static;max-width:100%;width:100%;padding:5px 2px 8px;margin:0;min-height:62px;gap:12px}.project-selector>a{flex:0 0 auto;padding:12px 18px;border:1px solid #aaa;font-size:14px;background:#111a;color:#fff}.home-page .project-selector>button{font-size:14px;max-width:290px;min-height:46px}.home-page .scene-controls{position:static;min-width:0}.home-page .scene-stage{min-height:440px}
@media(max-width:560px){.home-page .scene-cover{padding:16px 4%;gap:10px}.home-page .scene-heading h1{font-size:clamp(32px,9vw,48px)}.home-page .project-selector>button{font-size:12px;max-width:220px}.home-page .scene-stage{min-height:450px}}
@media(max-height:650px) and (min-width:561px){.home-page .scene-heading h1{font-size:42px}.home-page .scene-cover{gap:8px;padding-top:14px;padding-bottom:14px}}

.home-work-image>.content-media-fallback{position:absolute;inset:0;display:grid;background:#252922;color:#ddd}

#motion-toggle{width:48px;height:48px;padding:0;border:1px solid #ffffffaa;border-radius:50%;background:#1119;color:white;font-size:22px;line-height:1}
@media(hover:hover) and (pointer:fine){#motion-toggle{opacity:0;transition:opacity 160ms}.scene-stage:hover #motion-toggle,.scene-stage:focus-within #motion-toggle{opacity:1}}
@media(prefers-reduced-motion:reduce){#motion-toggle{transition:none}}

/* Compact, accessible project dots. */
.home-page .project-selector{gap:0;min-height:32px;padding:0;overflow:visible}
.home-page .project-selector>button{position:relative;flex:0 0 32px;width:32px;min-height:32px;height:32px;padding:0;border:0;background:transparent;box-shadow:none;border-radius:50%}
.home-page .project-selector>button::after{content:"";position:absolute;inset:12px;border-radius:50%;background:#ffffff70;transition:background 180ms,transform 180ms}
.home-page .project-selector>button:hover{background:transparent}
.home-page .project-selector>button[aria-pressed="true"]{background:transparent;box-shadow:none}
.home-page .project-selector>button[aria-pressed="true"]::after{background:#fff;transform:scale(1.25)}
.hero-outgoing{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.hero-outgoing>img,.hero-outgoing>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-outgoing>video{opacity:0}.hero-outgoing>video.is-playing{opacity:1}
@media(prefers-reduced-motion:reduce){.home-page .project-selector>button::after{transition:none}}

/* The entire media layer, including the fallback poster, emerges from black. */
.scene-stage{background:#080808}
.scene-media{opacity:0;transition:opacity 1000ms cubic-bezier(.2,.6,.3,1)}
.scene-media.is-revealed{opacity:1}
.scene-media>video{transition:opacity 650ms ease}
@media(prefers-reduced-motion:reduce){.scene-media{opacity:1;transition:none}.scene-media>video{transition:none}}

/* Video loading stays black; posters are only explicit static/error fallbacks. */
.scene-media>.scene-poster{visibility:hidden}
.scene-media.show-static>.scene-poster{visibility:visible}
