*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#080808;color:#f2eee7;overflow-x:hidden}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}.dark{background:#080808;color:#f2eee7}.light{background:#fff;color:#202020}header{padding:30px 6%;display:flex;justify-content:space-between;gap:24px;align-items:center}nav{display:flex;gap:28px;font-size:13px}.wordmark{font-size:12px;letter-spacing:1.5px}.about{padding:76px 6% 84px}.eyebrow{font-size:11px;letter-spacing:1.4px;line-height:1.5;opacity:.7;margin:0 0 20px}h1,h2{font-family:Arial,Helvetica,sans-serif;font-weight:400;letter-spacing:-1.8px}h1{font-size:clamp(44px,6vw,78px);line-height:1.06;margin:26px 0 38px}h2{font-size:clamp(40px,5vw,64px);margin:0}h3{font-size:22px;font-weight:400;margin:0}p{line-height:1.65;margin:0 0 16px}.bio{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;max-width:850px}.bio p:first-child{font-size:20px;line-height:1.55}.bio p:last-child{font-size:15px;color:#b8b4ae}.text-link{display:inline-flex;gap:24px;align-items:center;font-size:13px;margin-top:30px}.project{padding:30px 6% 80px}.section-top{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#656565;letter-spacing:.9px;margin-bottom:32px}.title-row{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}.title-row p{font-size:13px;margin:0;line-height:1.5}figure{margin:0;min-width:0}.video{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}.video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .35s;pointer-events:none}.video.playing>img{opacity:0}.player-mount,.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.play-fallback{position:absolute;left:16px;bottom:16px;z-index:2;border:0;background:#fff;color:#111;padding:12px 16px}.video.failed .play-fallback{display:none}figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:13px;line-height:1.5;flex-wrap:wrap}.sound{background:transparent;color:inherit;border:0;padding:5px 0;border-bottom:1px solid #a9a9a9;font-size:11px;min-width:64px;margin-left:auto}.intro-copy{max-width:740px;margin:30px auto 0}.intro-copy>p:first-child{font-size:22px;line-height:1.5}.recognition{font-size:13px;letter-spacing:.2px}.recognition span{margin:0 8px}.context{font-size:13px;color:#646464}.member-section{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:center;border-top:1px solid #ddd;margin-top:42px;padding-top:34px}.member-copy h3{font-family:Georgia,serif;font-size:36px;margin-bottom:14px}.member-copy p:last-child{font-size:14px;color:#646464}.role{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid #ddd;margin-top:44px;padding-top:30px}.role p{font-size:18px;max-width:700px;line-height:1.65}.media-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin:50px 0 22px}.media-heading p{font-size:11px;color:#646464;margin:0}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.coach-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.coach-grid>figure>img{width:100%;height:270px;object-fit:cover;object-position:center}.campaign-art{max-width:640px}.campaign-art img{width:100%;display:block}footer{padding:65px 6%}footer>a{font-family:Arial,Helvetica,sans-serif;font-size:clamp(23px,3vw,40px);overflow-wrap:anywhere}.footer-name{font-size:12px;color:#b8b4ae;margin:34px 0 0}[hidden]{display:none!important}.video-error{position:absolute;z-index:3;bottom:0;left:0;right:0;background:#111e;color:#fff;padding:12px;font-size:12px}
@media(min-width:1450px){header,.about,.project,footer{padding-left:max(6%,calc((100% - 1250px)/2));padding-right:max(6%,calc((100% - 1250px)/2))}}
@media(max-width:680px){header{flex-wrap:wrap;padding:24px 6%}nav{gap:22px}.about{padding:40px 6% 54px}.bio,.role,.member-section{grid-template-columns:1fr;gap:20px}.bio p:first-child{font-size:18px}.title-row{flex-direction:column;align-items:start}.section-top{flex-wrap:wrap;gap:10px}.video-grid,.coach-grid{grid-template-columns:1fr;gap:30px}.coach-grid>figure>img{height:auto;max-height:420px}.project{padding-bottom:55px}.intro-copy>p:first-child{font-size:20px}.role p{font-size:17px}.media-heading{margin-top:38px}footer{padding:48px 6%}.sound{min-height:44px}.member-copy .eyebrow{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.video>img{transition:none}}
.player-mount video{width:100%;height:100%;object-fit:cover}
.title-row{display:block;padding-top:16px}.title-row h2{margin-bottom:14px}.title-row p{color:#646464}.title-row p span{margin:0 6px}
.about-summary{max-width:760px;font-size:18px;line-height:1.65;color:#b8b4ae;margin:0}
.guest-heading h3{font-size:32px;font-weight:700}
.coach-grid{grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.coach-grid .coach-feature{grid-row:span 2}
.coach-grid>figure>img{display:block;aspect-ratio:auto;height:auto;max-height:none;object-fit:contain;background:transparent}
@media(max-width:680px){.coach-grid{grid-template-columns:1fr}.coach-grid .coach-feature{grid-row:auto}.guest-heading h3{font-size:28px}}
.viral-clip{max-width:480px;margin:48px auto 0}
.viral-clip .video{aspect-ratio:4/5}
.viral-clip .player-mount{width:222.222%;left:50%;right:auto;transform:translateX(-50%)}
.viral-clip .player-mount video{object-fit:cover}
.viral-clip figcaption{font-size:14px}
.coach-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px;gap:24px}
.coach-grid>figure>img{width:100%;aspect-ratio:16/9;object-fit:contain}
.campaign-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-top:28px}
.campaign-pair .viral-clip{max-width:none;margin:0}
.campaign-pair .jane-clip .video{aspect-ratio:4/5}
.jane-clip .player-mount video{object-fit:contain}
.jane-clip .video>img{object-fit:contain;background:#080808}
/* One shared corner treatment for all portfolio media. */
:root{--media-radius:16px}
.video{border-radius:var(--media-radius);overflow:hidden;isolation:isolate;clip-path:inset(0 round var(--media-radius))}
.coach-grid>figure>img,.campaign-art>img{border-radius:var(--media-radius)}
@media(max-width:680px){:root{--media-radius:12px}}
/* Keep the lower caption band outside the Tiffany portrait preview. */
.viral-clip .player-mount{height:120%;width:266.667%;top:0;bottom:auto}
.role .role-tenure{font-weight:600;margin-bottom:18px}
.coach-story{margin-top:28px}
.film-stack{display:grid;gap:34px;margin-top:34px}.film-stack figcaption a{text-decoration:underline;text-underline-offset:3px}
.launch-film{margin-top:28px}
.role-feature{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start;margin-top:44px;padding-top:30px}
.role-feature .role{display:block;border:0;margin:0;padding:0;text-align:left}
.role-feature .role h3{margin-bottom:20px}
.role-feature .launch-film{margin-top:0}
@media(max-width:680px){.role-feature{grid-template-columns:1fr;gap:24px}}
.story-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
.story-pair .coach-story{margin-top:0}
@media(max-width:680px){.story-pair{grid-template-columns:1fr;gap:30px}}
/* Scroll previews use the page's sound buttons, without player hover chrome. */
.video[data-youtube] iframe{pointer-events:none}
body{background:#fff}
.identity .wordmark{display:block}
.brand-title{font-size:10px;letter-spacing:.8px;line-height:1.5;color:#626262;margin:9px 0 0;max-width:360px}
.about.light .about-summary{color:#626262}
.project.dark .title-row p{color:#b8b4ae}
.project.dark .role-feature,.project.dark .member-section{border-color:#383838}
.project.dark .sound{border-color:#777}
footer.light .footer-name{color:#626262}
.commercial-pair{margin-top:34px}
.commercial-pair .video{aspect-ratio:1920/804}
.campaign-pair{max-width:560px;margin:28px auto 0;gap:20px}
@media(max-width:680px){.campaign-pair{max-width:280px;gap:24px}}
.section-heading h3{font-size:24px;font-weight:400}
.section-heading+.story-pair{border-top:1px solid #ddd;padding-top:0;margin-top:0}
.section-heading+.coach-grid{margin-top:0}
#supernatural>figure.lead{max-width:860px;margin-left:auto;margin-right:auto}
@media(max-width:680px){.section-heading h3{font-size:24px}}
@media(max-width:680px){.coach-grid{grid-template-columns:1fr}.campaign-pair{grid-template-columns:1fr;gap:28px}}
.coach-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.coach-grid>figure>img{height:auto;aspect-ratio:16/9;object-fit:cover;background:transparent}
@media(max-width:680px){.coach-grid{grid-template-columns:1fr}.coach-grid>figure>img{aspect-ratio:auto}}
.campaign-heading{margin-top:40px;margin-bottom:8px}
.campaign-credit{font-size:13px;color:#bfc0c3;margin:14px 0 0}
.campaign-heading h3{font-size:24px;margin-bottom:9px}
.campaign-heading p{font-size:14px;margin:0}
.campaign-heading+.commercial-pair{margin-top:0}
.campaign-pair{grid-template-columns:repeat(3,minmax(0,1fr));max-width:850px}
.shea-clip .video{aspect-ratio:4/5}
@media(max-width:680px){.campaign-pair{grid-template-columns:1fr;max-width:280px}}
#supernatural{--supernatural-yellow:#edfe5d;background:#000;color:#f5f7fb}
#supernatural h2,#supernatural h3{color:var(--supernatural-yellow)}
#supernatural h2 a{color:inherit;text-decoration:none}

#supernatural h2{letter-spacing:-1.5px;line-height:1.1}
#supernatural .campaign-heading h3,#supernatural .section-heading h3{font-family:Arial,Helvetica,sans-serif;font-size:24px;font-weight:400;line-height:1.3;letter-spacing:0}
#supernatural .role-copy,#supernatural .title-row p,#supernatural figcaption,#supernatural .campaign-heading p{color:#bfc0c3}

/* Keep YouTube footage in its original frame, without zooming captions away. */
.campaign-pair .viral-clip .video{aspect-ratio:16/9;min-height:200px}
.viral-clip .player-mount{width:100%;height:100%;inset:0;transform:none}
.video[data-youtube]{min-height:200px}
.video[data-youtube] iframe{pointer-events:auto}
.video-error{position:static;background:transparent;color:#bfc0c3;margin:10px 0 0;padding:0}

.shea-clip .video{aspect-ratio:16/9}
.coach-grid>figure>img[src="assets/shea.jpg"]{height:auto;aspect-ratio:auto;object-fit:contain}

figure>.play-fallback{position:static;display:block;margin-top:10px;border-radius:8px}
#wonderscope{padding-top:64px;background:#fff;color:#202020}
#wonderscope .video{background:#f0ebe0}
#beck .video{background:#7c8694}
#ytma .role{border-top:1px solid #ddd;margin-top:0;padding-top:0}
#ytma .role-feature{border-top:1px solid #ddd;margin-top:0;padding-top:0}
#beck .video video,#wonderscope .video video{position:relative;width:100%;height:100%;left:0;top:0}
.wonderscope-title h2{max-width:390px;margin-bottom:18px}
.wonderscope-title h2 img{display:block;width:100%;height:auto}
#wonderscope>.lead{max-width:860px;margin-left:auto;margin-right:auto}
.wonderscope-role{grid-template-columns:1.2fr 1fr;align-items:center}
.wonderscope-role .role-copy{color:#626262}
.wonderscope-key-image{width:100%;height:auto;max-width:430px;justify-self:end;display:block;border-radius:var(--media-radius)}
.wonderscope-story-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px;gap:24px}
#wonderscope figcaption{color:#626262}
@media(max-width:680px){#wonderscope{padding-top:44px}.wonderscope-title h2{max-width:300px}.wonderscope-role,.wonderscope-story-grid{grid-template-columns:1fr}.wonderscope-key-image{justify-self:start;max-width:430px}}
#here-be-dragons{background:#000;color:#f5f7fb;padding-top:64px}
#here-be-dragons>.lead{max-width:860px;margin-left:auto;margin-right:auto}
#here-be-dragons .video{aspect-ratio:2/1}
#here-be-dragons .title-row p,#here-be-dragons figcaption{color:#bfc0c3}
.dragons-copy{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;border-top:1px solid #383838;margin-top:44px;padding-top:30px;font-size:18px;line-height:1.65}
.dragons-description{color:#f5f7fb}
.dragons-copy .role-copy{color:#bfc0c3}
@media(max-width:680px){#here-be-dragons{padding-top:44px}.dragons-copy{grid-template-columns:1fr;gap:10px;font-size:17px}}
.dragons-feature{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.dragons-feature .dragons-copy{display:block;border:0;margin:0;padding:0}
.dragons-feature .lead{width:100%;min-width:0}
.hbd-project-matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px}
.hbd-project-matrix figure{min-width:0;background:#000;margin:0}
.hbd-project-matrix img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0}
@media(max-width:900px){.hbd-project-matrix{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}}
@media(max-width:580px){.hbd-project-matrix{grid-template-columns:1fr;gap:0}}
@media(max-width:680px){.dragons-feature{grid-template-columns:1fr;gap:24px}}
/* Give all three guest-coach videos matching top and bottom edges. */
.campaign-pair .jane-clip .video,.campaign-pair .viral-clip .video,.campaign-pair .shea-clip .video{aspect-ratio:16/9;min-height:200px;background:#000}
.campaign-pair .player-mount video{object-fit:contain}
.supernatural-wordmark{width:min(100%,460px);aspect-ratio:750/194;position:relative;overflow:hidden}
.supernatural-wordmark a{display:block;width:100%;height:100%}
.supernatural-wordmark img{position:absolute;max-width:none;width:132.533%;height:auto;left:-18.667%;top:-41.237%;filter:contrast(1.2)}
/* Align the visible Wonderscope wordmark and trailer with the section copy. */
.wonderscope-title h2{width:min(100%,390px);aspect-ratio:1195/198;position:relative;overflow:hidden}
.wonderscope-title h2 img{position:absolute;max-width:none;width:129.372%;height:auto;left:-16.067%;top:-33.838%}
#wonderscope>.lead{margin-left:0;margin-right:0;width:100%}

/* Chatbot bubble visibility (the widget injects its own styles at runtime) */
.asw-btn{border:2px solid rgba(255,255,255,.85) !important;}

/* Selected Work carousel */
.section-intro{max-width:62ch;font-size:16px;line-height:1.6;margin:0 0 28px}
.carousel{position:relative}
.carousel-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 4px 12px}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{flex:0 0 min(100%,620px);scroll-snap-align:center;min-width:0;margin:0}
.carousel-slide .video{border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9}
.carousel-slide figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:14px}
.carousel-slide 
.carousel-btn{position:absolute;top:32%;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.9);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.carousel-prev{left:-8px}
.carousel-next{right:-8px}
.carousel-btn:hover{background:#fff}
@media(max-width:700px){.carousel-btn{display:none}
.carousel-slide{flex:0 0 85%}}

.slide-credits{display:block}
.slide-credits .c1{display:inline;font-weight:700}
.slide-credits .c2{display:inline;margin-left:7px}
.slide-credits .c3{display:block;opacity:.6;font-size:12px;margin-top:3px}

#ytma .role-feature{border-top:0;margin-top:0;padding-top:0}
#ytma .role{border-top:0;margin-top:0;padding-top:0}
