/* The homepage is a small creative studio: a message beside the work. */
.motion-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);grid-template-areas:"over over" "title stage" "intro stage" "foot foot";column-gap:clamp(32px,5vw,76px);row-gap:28px;padding-top:38px;padding-bottom:28px}
.motion-overline{grid-area:over;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);padding-bottom:15px;border-bottom:1px solid var(--line)}
.motion-hero h1{grid-area:title;font-size:clamp(56px,5.9vw,94px);line-height:.99;letter-spacing:-.067em;font-weight:500;margin:24px 0 0;align-self:end}
.motion-hero h1 em{font-family:Cormorant,Georgia,serif;color:var(--accent);font-weight:600;letter-spacing:-.035em}
.motion-intro{grid-area:intro;align-self:start;padding-bottom:24px}
.motion-intro p{font-size:15px;color:var(--muted);max-width:47ch;line-height:1.65;margin:16px 0 24px}
.motion-intro .motion-lead{font-size:clamp(18px,1.65vw,24px);line-height:1.4;letter-spacing:-.02em;color:var(--ink);margin:0;max-width:34ch}
.creative-stage{grid-area:stage;background:#d9d2c3;border:1px solid #c3baaa;min-width:0;align-self:center;position:relative;isolation:isolate;box-shadow:0 22px 45px -35px #26332877}
.stage-topline,.stage-bottomline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;font-size:9px;letter-spacing:.12em;font-weight:700;color:#3f493e}
.stage-topline{border-bottom:1px solid #b9b3a6}
.stage-status{display:flex;align-items:center;gap:6px;font-size:8px}.stage-status>span{width:5px;height:5px;background:#a34e35;border-radius:50%}
.stage-canvas{aspect-ratio:1.19;position:relative;overflow:hidden;background:radial-gradient(ellipse at 65% 40%,#eee8dd 0%,#d5ccbb 75%)}
.stage-orbit{width:72%;aspect-ratio:1;border:1px solid #b3ab9977;border-radius:50%;position:absolute;top:6%;left:18%}
.stage-orbit:after{content:"";position:absolute;inset:12%;border:1px solid #b3ab9955;border-radius:50%}
.stage-watermark{position:absolute;left:4%;bottom:5%;font-size:clamp(40px,6.8vw,100px);line-height:1;font-weight:700;letter-spacing:-.08em;color:#b7ad9866}
.work-frame{position:absolute;display:block;color:#f3eee3;background:#20251f;text-decoration:none;box-shadow:0 12px 22px #1b201d38;transition:transform .35s ease,box-shadow .35s ease;transform:rotate(var(--rotate));border:4px solid #252b24}
.work-frame:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 20px 32px #1b201d44;z-index:5}
.work-frame:focus-visible{outline-offset:5px;z-index:6}
.frame-image{overflow:hidden;position:relative}.frame-image img,.frame-image video{width:100%;height:100%;object-fit:cover;display:block}
.work-social{--rotate:-7deg;left:7%;top:11%;width:38%;z-index:3}.work-social .frame-image{aspect-ratio:1122/1402}
.work-film{--rotate:4deg;right:5%;top:6%;width:51%;z-index:2}.work-film .frame-image{aspect-ratio:16/9}
.work-brand{--rotate:6deg;right:10%;bottom:7%;width:36%;z-index:4}.work-brand .frame-image{aspect-ratio:1}
.frame-caption{display:flex;justify-content:space-between;align-items:center;min-height:26px;padding:5px 5px 2px;font-size:8px;letter-spacing:.1em;font-weight:700}
.film-tag{position:absolute;left:8px;top:8px;background:#142018e8;color:#fff;padding:4px 6px;font-size:7px;letter-spacing:.08em}
.stage-note{position:absolute;left:6%;bottom:6%;font-family:Cormorant,Georgia,serif;font-style:italic;line-height:1.15;font-size:clamp(16px,2vw,27px);color:#46503f;z-index:1}
.stage-bottomline{border-top:1px solid #b9b3a6;padding:5px 10px 5px 18px;min-height:54px}
#hero-motion-toggle{display:flex;align-items:center;gap:8px;border:1px solid #8b9385;background:transparent;color:#263125;padding:9px 12px;min-height:44px;font-size:11px;cursor:pointer;letter-spacing:0}
#hero-motion-toggle[hidden]{display:none}#hero-motion-toggle:hover{background:#263125;color:#fff}
.motion-foot{grid-area:foot;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:18px;font-size:10px;letter-spacing:.1em;color:var(--muted)}
.motion-foot a{text-decoration:none;min-height:44px;display:flex;align-items:center;gap:20px}
@media(min-width:1100px){.motion-hero{min-height:690px}}
@media(max-width:1000px){.motion-hero{column-gap:24px}.motion-hero h1{font-size:clamp(48px,6.2vw,65px)}.motion-intro .hero-actions{gap:13px}.motion-intro .button{padding:12px}.stage-topline{padding:13px 10px}.stage-status{display:none}.stage-bottomline{padding-left:10px}.stage-bottomline>span{font-size:8px}}
@media(max-width:760px){.motion-hero{grid-template-columns:1fr;grid-template-areas:"over" "title" "stage" "intro" "foot";padding-top:25px;row-gap:26px}.motion-overline{gap:8px}.motion-overline .eyebrow{font-size:9px;letter-spacing:.11em}.motion-hero h1{font-size:clamp(48px,10.8vw,76px);margin:0;line-height:.97}.motion-hero h1 em br{display:none}.creative-stage{width:100%;max-width:620px;justify-self:center}.stage-canvas{aspect-ratio:1.3}.stage-note{font-size:22px}.work-social{width:35%;top:9%}.work-film{width:51%;top:6%}.work-brand{width:29%;bottom:4%;right:9%}.stage-watermark{font-size:65px}.stage-status{display:flex}.motion-intro{padding-bottom:0}.motion-intro .motion-lead{max-width:43ch}.motion-intro p{max-width:58ch;font-size:16px}.motion-foot{flex-direction:column;align-items:flex-start;gap:5px}.motion-foot a{font-size:9px}.motion-hero .hero-actions{gap:18px}}
@media(max-width:390px){.motion-hero h1{font-size:45px}.stage-note{font-size:18px}.stage-topline{font-size:8px}.stage-status{font-size:7px}.frame-caption{font-size:7px;min-height:23px}.stage-bottomline>span{max-width:15ch}.work-frame{border-width:3px}}
@media(prefers-reduced-motion:reduce){.work-frame{transition:none}.work-frame:hover{transform:rotate(var(--rotate))}}

.film-frames{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}
.film-frames .film-still{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.film-first{animation:hero-drift 16s ease-in-out infinite alternate}
.creative-stage[data-motion="paused"] .film-still{animation-play-state:paused}
@keyframes hero-drift{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes hero-reveal{0%,35%,100%{opacity:0;transform:scale(1.06)}45%,85%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.creative-stage:not([data-motion="playing"]) .film-still{animation:none}.creative-stage:not([data-motion="playing"]) .film-second{display:none}}

.creative-stage:not([data-motion]) .film-still{animation:none}