/* Motion and case browsing */
.lab>div{max-width:800px}.lab h3{font-size:24px}.lab p:not(.eyebrow){font-size:14px;line-height:1.9;max-width:760px}.lab{gap:40px;padding-block:38px}
nav{gap:25px}nav a{position:relative}nav a:not(.nav-contact)::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s}nav a:hover::after{transform:scaleX(1)}
.button,.work-open,.brand-cta{transition:background .3s,color .3s,transform .4s,border-color .3s}.button:hover{transform:translateY(-3px)}.work-card:hover .work-open{transform:rotate(45deg);background:var(--accent)}
.work-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .4s,transform .8s;transform:scale(1)}.preview-playing .work-preview{opacity:1}.work-card:hover .work-preview{transform:scale(1.035)}.preview-label{position:absolute;left:14px;bottom:18px;padding:5px 8px;background:#151515bb;border:1px solid #ffffff40;color:#fff;font-size:9px;letter-spacing:1px;opacity:0;transition:opacity .3s}.preview-playing .preview-label{opacity:1}.support-grid .work-preview{object-fit:contain}.work-open{z-index:1}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.reveal.is-visible{opacity:1;transform:none}.hero-copy{animation:hero-arrive 1s both}@keyframes hero-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}dialog[open]{animation:dialog-arrive .28s both}@keyframes dialog-arrive{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.project-notes{display:none}.brand-section{border-top:1px solid var(--line);padding-top:80px}.brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.brand-card{background:transparent;text-align:left;padding:0;min-width:0}.brand-cover{aspect-ratio:1.4;background:#eee;overflow:hidden;position:relative}.brand-cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.brand-card:hover img{transform:scale(1.045)}.brand-cta{position:absolute;right:12px;bottom:12px;background:#151515e0;padding:10px 13px;font-size:11px;border:1px solid #ffffff40}.brand-card:hover .brand-cta{background:var(--accent)}.brand-caption{padding-top:20px}.brand-caption h3{font-size:27px;margin:7px 0}.brand-caption p{font-size:13px;color:var(--muted);margin:0}.brand-caption .eyebrow{font-size:10px}.portfolio-strip{border-top:1px solid var(--line);margin-top:44px;padding-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.portfolio-strip h3{font-size:22px;margin:10px 0}.portfolio-strip p{font-size:12px;color:var(--muted);margin-bottom:0}.portfolio-strip .eyebrow{font-size:10px}.portfolio-links{display:flex;gap:28px;justify-content:flex-end}.portfolio-links a{font-size:13px;border-bottom:1px solid #555;padding-bottom:10px;transition:color .3s}.portfolio-links a:hover{color:var(--accent)}.portfolio-links span{display:block;margin-top:8px;font-size:10px;color:var(--muted)}
.player-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}.player-tools button{background:transparent;border:1px solid #666;padding:9px 12px;font-size:11px}.player-tools button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.player-tools span{color:var(--muted);font-size:10px;line-height:1.6}.wide{width:min(1320px,calc(100% - 32px))}.wide .dialog-body video{max-height:72svh;object-fit:contain}
.brand-gallery{display:grid;grid-template-columns:1fr 1fr;gap:30px 20px;margin-top:30px}.brand-gallery figure{margin:0;min-width:0}.gallery-page{padding:0;background:#fff;display:block;overflow:hidden;width:100%;cursor:zoom-in}.gallery-page img{width:100%;height:auto;transition:transform .55s}.gallery-page:hover img{transform:scale(1.025)}.brand-gallery figcaption{font-size:11px;color:var(--muted);line-height:1.6;margin-top:12px}.gallery-hint{font-size:12px!important;color:var(--muted)!important}#brand-dialog{width:min(1160px,calc(100% - 32px))}#brand-dialog h2{font-size:38px}.image-stage{overflow:auto;padding:20px;height:calc(90svh - 145px);overscroll-behavior:contain;background:#30302e;scrollbar-gutter:stable}.image-stage img{max-width:none;width:100%;height:auto;margin:auto;cursor:zoom-in}.image-stage img.zoomed{cursor:zoom-out}.image-toolbar{display:flex;align-items:center;gap:16px;padding:12px 22px;background:#1d1d1c;border-bottom:1px solid var(--line);flex-wrap:wrap}.image-toolbar button{background:transparent;border:1px solid #666;padding:8px 12px;font-size:12px}.image-toolbar button:disabled{opacity:.35;cursor:default}.zoom-tools{display:flex;gap:8px;margin-left:auto}#image-dialog{width:min(1320px,calc(100% - 24px));overflow:hidden}#image-title{font-size:12px;color:var(--muted);line-height:1.7}#image-count{font-size:12px;color:var(--muted);white-space:nowrap}
@media(max-width:900px){nav{gap:17px;font-size:12px}.brand-grid{gap:18px}.brand-caption h3{font-size:24px}.portfolio-links{gap:20px}.portfolio-strip{gap:25px}}
@media(max-width:640px){.brand-grid{grid-template-columns:1fr;gap:32px}.brand-cover{aspect-ratio:1.5}.brand-section{padding-top:60px}.portfolio-strip{grid-template-columns:1fr;gap:24px}.portfolio-links{justify-content:flex-start;gap:28px}.brand-gallery{grid-template-columns:1fr;gap:25px}#brand-dialog h2{font-size:28px}.image-stage{padding:8px;height:calc(90svh - 180px)}.image-toolbar{gap:12px;padding:12px}.image-toolbar button{padding:8px 10px;font-size:11px}.zoom-tools{margin-left:0;width:100%;justify-content:center}#image-dialog .dialog-top{padding:10px 14px}.player-tools span{width:100%}.reveal{transform:translateY(12px)}nav{font-size:14px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero-copy,dialog[open]{animation:none}.work-preview{transition:none}.button:hover,.work-card:hover img,.work-card:hover video,.brand-card:hover img{transform:none}}

#brand-body{white-space:pre-line}

#case-body{white-space:pre-line}

/* Hero actions and visitor-initiated showreel control. */
.hero-actions>a{min-width:180px;min-height:52px;justify-content:center;background:#ffffff08;border-color:#ffffff70}
.hero-actions>a:hover{background:#ffffff18;border-color:#eeeee9;color:var(--paper)}
.hero-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;bottom:24px}
.hero-media-controls{grid-column:2;display:flex;align-items:center}
.hero-bottom>a{grid-column:3;justify-self:end;display:grid;place-items:center;width:44px;height:44px}
.hero-bottom .showreel-inline{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;color:var(--paper);font-size:13px;letter-spacing:.5px;white-space:nowrap;transition:color .25s}
.showreel-inline svg{flex-shrink:0}.hero-bottom .showreel-inline:hover{color:var(--accent)}
.background-motion-toggle{position:absolute;z-index:2;top:128px;right:var(--pad);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;padding:0;background:#0003;color:#ddd;transition:background .25s,color .25s}
.background-motion-toggle:hover{background:#0007;color:#fff}
.background-motion-toggle .motion-play{display:none}
.background-motion-toggle[data-paused="true"] .motion-pause{display:none}
.background-motion-toggle[data-paused="true"] .motion-play{display:block}
@media(max-width:640px){.hero-actions>a{min-width:0;min-height:48px;flex:1}.hero-bottom{grid-template-columns:1fr auto 1fr;column-gap:8px;bottom:16px}.hero-bottom .showreel-inline{font-size:12px;gap:9px}.background-motion-toggle{top:94px}.showreel-inline svg{width:20px;height:20px}}
.showreel-dialog{width:min(1180px,calc(100% - 32px))}.showreel-dialog .dialog-body video{max-height:64svh;object-fit:contain}.showreel-dialog .dialog-body h2{margin-top:0;margin-bottom:20px}.showreel-dialog .showreel-player-note{font-size:12px;color:var(--muted)}
@media(max-width:640px){.showreel-dialog .dialog-body{padding:16px}.showreel-dialog .dialog-body h2{font-size:21px}.showreel-dialog .showreel-player-note{font-size:11px}}

.showreel-dialog .dialog-top{gap:16px}.showreel-dialog .dialog-top .eyebrow{margin:0;min-width:0}.showreel-dialog .dialog-top button{flex-shrink:0}
@media(max-width:640px){.showreel-dialog .dialog-top .eyebrow{font-size:9px;letter-spacing:1px;line-height:1.5;overflow-wrap:anywhere}}

/* Desktop-only background shortcut; readable copy and controls keep their own hit areas. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 .hero-copy{pointer-events:none}
 .hero-copy>.eyebrow,.hero-copy>h1,.hero-copy>.hero-sub,.hero-copy>.hero-note{pointer-events:auto;width:fit-content;max-width:100%;cursor:text}
 .hero-actions{pointer-events:auto;width:fit-content;max-width:100%}
 .hero,.hero-media,.hero-shade{cursor:default}
 .hero-bottom{cursor:auto}
 .hero button,.hero a{cursor:pointer}
}