/* Typography from the supplied HTML; footer and studio animation match Framer. */
:root{--mx:clamp(16px,4vw,56px)}
body{font-family:'Bricolage Grotesque',sans-serif;font-feature-settings:normal;font-optical-sizing:auto;font-kerning:auto;-webkit-font-smoothing:antialiased}
.hero{height:100vh;min-height:600px;padding:0}
.hero-content{position:absolute;left:var(--mx);right:var(--mx);bottom:clamp(22px,5vh,52px);width:auto;display:block;color:#f4f2ec}
.hero-content h1,.emotional .hero-content h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(54px,15vw,210px);font-weight:800;line-height:.82;letter-spacing:-.04em;text-transform:uppercase;font-style:normal;white-space:normal;margin:0;max-width:none;font-feature-settings:normal;font-optical-sizing:auto;font-kerning:auto}
.emotional .hero-content h1{font-weight:400;letter-spacing:-.02em;text-transform:none;font-style:italic;color:#f4f2ec}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:18px;flex-wrap:wrap;flex-direction:row}
.hero-bottom p{max-width:300px;color:#d6d3ca;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;line-height:1.5;margin:0}
/* Footer heading measured from Framer's desktop, tablet and phone variants. */
footer{padding:104px 40px 38px}
footer h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:140px;line-height:.84;letter-spacing:-.04em;text-transform:uppercase;font-optical-sizing:auto;font-kerning:auto;font-feature-settings:'blwf' on,'cv03' on,'cv04' on,'cv09' on,'cv11' on;font-variation-settings:'opsz' 14;color:#f4f2ec;margin:0 0 64px}
footer h2 span{color:#e2ff2e}
@media(min-width:810px) and (max-width:1199px){footer{padding:80px 28px 34px}footer h2{font-size:72px;line-height:.9;margin-bottom:52px}}
@media(max-width:809px){footer{padding:64px 16px 30px}footer h2{font-size:48px;line-height:.9;margin-bottom:44px}}
.footer-cols a{overflow-wrap:anywhere}
@media(min-width:810px) and (max-width:1199px){.footer-cols{grid-template-columns:1.4fr 1fr 1fr}}
.works h2,.awards h2{font-size:clamp(28px,5vw,58px);font-weight:800;letter-spacing:-.02em;line-height:normal}
.emotional .works h2{font-size:clamp(28px,5vw,58px);font-weight:400;font-style:italic;text-transform:none;line-height:normal}
.bio h2{font-size:clamp(24px,3.2vw,42px);font-weight:400;line-height:1.25;letter-spacing:-.02em}.bio h2 em{font-style:italic}
.stats strong{font-size:clamp(30px,4vw,52px);letter-spacing:-.03em;line-height:normal}
.eyebrow{letter-spacing:.2em}.label>span{letter-spacing:.14em}.year{letter-spacing:.16em}.stats span{letter-spacing:.14em}.clients-heading{letter-spacing:.16em}
.label strong{font-size:16px;font-weight:600}.awards-grid h3{font-size:18px;font-weight:600;line-height:1.2}
.footer-cols .eyebrow{letter-spacing:.16em}
/* Remaining text styles from the supplied HTML; retain requested larger navigation/contact sizes. */
.eyebrow,.year,.label>span,.stats span,.portrait>span,.scroll-cue,.awards header p,.awards-grid article>span,.awards-grid article p,.toggle button{font-family:'JetBrains Mono',monospace;font-weight:400;font-feature-settings:normal}
.toggle button{font-size:11px;letter-spacing:.16em}
.portrait>span{font-size:10px;letter-spacing:.16em}
.scroll-cue{font-size:10px;letter-spacing:.2em}
.awards header p{font-size:13px;letter-spacing:normal}
.awards-grid article p{font-size:12px;letter-spacing:normal;text-transform:none}
.clients span{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:400;letter-spacing:normal}
.bio p:not(.eyebrow){font-size:15px;line-height:1.7}
.studio p:not(.eyebrow){font-family:'Bricolage Grotesque',sans-serif;font-size:15px;line-height:1.6}
.studio-button{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:400;letter-spacing:.16em}
.more a strong{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:normal}
.recognition-compact{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:40px;align-items:start;padding:52px 40px;border-top:1px solid #f4f2ec26;border-bottom:1px solid #f4f2ec26}
.recognition-compact h2{font-size:36px;line-height:1;letter-spacing:-.02em;margin:0}
.recognition-copy p{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;line-height:1.6;color:#f4f2ec;margin:0;max-width:760px}
.recognition-copy .recognition-note{color:#878579;margin-top:8px}
@media(max-width:809px){.recognition-compact{grid-template-columns:1fr;gap:20px;padding:40px 16px}.recognition-compact h2{font-size:28px}.recognition-copy p{font-size:15px}}
.recognition-heading img{display:block;width:56px;height:56px;margin-bottom:20px}
.recognition-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
.recognition-item{border-top:1px solid #f4f2ec26;padding-top:14px}
.recognition-item h3{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:normal;margin:0 0 7px}
.recognition-item p{font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.6;letter-spacing:.04em;color:#aaa89e;margin:0}
.recognition-best{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.5;letter-spacing:.03em;color:#e2ff2e;margin-top:8px}
@media(max-width:809px){.recognition-heading{display:flex;align-items:center;gap:16px}.recognition-heading img{width:40px;height:40px;margin:0}.recognition-list{gap:20px}.recognition-item h3{font-size:16px}}
@media(max-width:480px){.recognition-list{grid-template-columns:1fr}}
.recognition-prose{grid-template-columns:minmax(220px,.6fr) minmax(0,1.4fr);align-items:center}
.recognition-prose .recognition-heading{display:flex;align-items:center;gap:16px}
.recognition-prose .recognition-heading img{width:40px;height:40px;margin:0}
.recognition-prose h2{font-size:30px}
.recognition-prose .recognition-copy p{font-size:17px;line-height:1.7;color:#bdbab2}
.recognition-highlight{color:#f4f2ec}
@media(max-width:1199px){.recognition-prose{grid-template-columns:1fr;gap:24px}}
@media(max-width:809px){.recognition-prose h2{font-size:28px}.recognition-prose .recognition-copy p{font-size:15px}}
.bio-recognition{display:flex;align-items:flex-start;gap:14px}
.bio-recognition img{width:28px;height:28px;flex-shrink:0;margin-top:3px}
.bio .bio-recognition p{margin:0;color:#bdbab2;font-size:15px;line-height:1.7}
.hero .toggle{height:62px;padding:6px;border:1px solid #f4f2ec80;background:#060606cc;box-shadow:0 4px 24px #0005;width:max-content}
.hero .toggle button,.hero .toggle button:last-child{width:152px;padding:14px 10px;font-size:13px;line-height:20px;font-weight:600;letter-spacing:.12em;color:#f4f2ec}
.hero .toggle button[aria-pressed=true]{color:#060606}
.hero .pill{top:6px;bottom:6px;left:6px;width:152px}
.emotional .hero .pill{width:152px;transform:translateX(152px)}
.emotional .hero-content h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-style:italic;letter-spacing:-.035em;line-height:.9}
.emotional .works h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-style:italic;font-size:clamp(34px,5.5vw,66px);line-height:1;letter-spacing:-.025em}
@media(max-width:809px){.hero .toggle{height:58px;padding:5px}.hero .toggle button,.hero .toggle button:last-child{width:128px;padding:12px 6px;font-size:12px;line-height:20px;letter-spacing:.1em}.hero .pill{top:5px;bottom:5px;left:5px;width:128px}.emotional .hero .pill{width:128px;transform:translateX(128px)}}



/* Original About layout, with consistent paragraph styling. */
.bio p:not(.eyebrow),.bio .bio-recognition p,.bio p:not(.eyebrow):nth-of-type(3){font-size:15px;line-height:1.7;color:#c9c6be;margin:0}
.bio>div:last-child{gap:24px}
.bio .recognition-highlight{color:inherit}

/* Approved original logo variants; one inherited timeline drives both logo and CTA. */
@keyframes synthSodaBrandPalette{
 0%,100%{--soda-color:#ff4fa3;--soda-pink:1;--soda-yellow:0;--soda-white:0}
 33.333333%{--soda-color:#d2ff00;--soda-pink:0;--soda-yellow:1;--soda-white:0}
 66.666667%{--soda-color:#ffffff;--soda-pink:0;--soda-yellow:0;--soda-white:1}
}
.studio{--soda-color:#ff4fa3;--soda-pink:1;--soda-yellow:0;--soda-white:0;animation:synthSodaBrandPalette 9.6s steps(1) infinite;grid-template-columns:220px minmax(0,660px);justify-content:center;align-items:center;gap:clamp(40px,7vw,100px);padding:72px 40px;background:linear-gradient(120deg,#17161b,#0b0b0d 75%);border-top:1px solid #ffffff0d;border-bottom:1px solid #ffffff0d}
.studio>div:first-child{display:flex;flex-direction:column;align-items:center;gap:18px}
.studio .eyebrow{color:#a4a0aa;margin:0;font-size:10px;letter-spacing:.14em}
.soda-logo{position:relative;display:block;width:170px;height:170px;flex:none}
.studio .soda-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none;transition:none}
.soda-pink{opacity:var(--soda-pink)}.soda-yellow{opacity:var(--soda-yellow)}.soda-white{opacity:var(--soda-white)}
.studio>div:last-child{gap:20px}.studio h2{font-size:clamp(32px,3.5vw,44px);line-height:1.06}
.studio p:not(.eyebrow){max-width:590px;color:#c9c6ce}
.studio .studio-button,.studio .studio-button:hover{filter:none;background:var(--soda-color);color:#090909;transition:none}
.studio .studio-button:hover{box-shadow:0 0 0 3px #ffffff20}
@media(max-width:809px){.studio{grid-template-columns:minmax(0,1fr);gap:28px;padding:44px 24px}.studio>div:first-child{align-items:flex-start;gap:12px}.soda-logo{width:128px;height:128px}.studio h2{font-size:32px}.studio .studio-button{font-size:10px;padding:15px 19px}}
@media(prefers-reduced-motion:reduce){.studio{animation:none}}

/* Editorial studio card: copy leads, original logo is the right-hand signature. */
.studio{margin:24px 40px 48px;padding:64px clamp(32px,5vw,80px);grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);gap:48px;max-width:none;border:1px solid #ffffff14;border-radius:12px;background:radial-gradient(ellipse at 88% 42%,#25212b 0,transparent 55%),#101012}
.studio .studio-copy{grid-column:1;grid-row:1;gap:22px;align-items:flex-start}
.studio .studio-art{grid-column:2;grid-row:1;align-self:stretch;justify-content:center;align-items:center;border-left:1px solid #ffffff12;padding-left:32px}
.studio .eyebrow{font-size:10px;color:#a4a0aa;letter-spacing:.18em}
.studio h2{font-size:clamp(42px,4.8vw,68px);line-height:.98;letter-spacing:-.045em}
.studio p:not(.eyebrow){max-width:480px;font-size:15px;line-height:1.65}
.soda-logo{width:clamp(200px,24vw,300px);height:auto;aspect-ratio:1}
.studio .studio-button{margin-top:4px;padding:16px 22px;font-size:11px;letter-spacing:.12em;border-radius:6px}
@media(min-width:810px) and (max-width:1050px){.studio{margin:20px 28px 40px;padding:48px 32px;gap:28px;grid-template-columns:minmax(0,1fr) 240px}.studio .studio-art{padding-left:20px}.soda-logo{width:220px}}
@media(max-width:809px){.studio{margin:16px 16px 32px;padding:32px 26px;grid-template-columns:minmax(0,1fr);gap:28px;border-radius:10px}.studio .studio-copy{grid-column:1;grid-row:2;gap:20px}.studio .studio-art{grid-column:1;grid-row:1;border-left:0;border-bottom:1px solid #ffffff12;padding:0 0 22px;align-items:flex-start}.soda-logo{width:160px}.studio h2{font-size:44px}.studio p:not(.eyebrow){font-size:14px}.studio .studio-button{max-width:100%;font-size:10px;padding:15px 17px}}

/* Vimeo collections */
.showcase-link,.vimeo-direct{display:inline-block;font-family:Inter,sans-serif;font-size:12px;letter-spacing:.08em;line-height:1.5;color:inherit;border-bottom:1px solid currentColor;padding-bottom:5px;margin-top:28px}.campaign-film{margin-bottom:56px}.campaign-film>h2{font-size:24px;line-height:1.2}.vimeo-direct{margin:18px 0}.campaign-film .full-credits p{overflow-wrap:anywhere}
/* Emotional: warm coral and a substantial editorial italic. */
body.emotional{--accent:#ff86b4;background:#100c0b}
.emotional .hero-content h1{font-family:'Fraunces',Georgia,serif;font-weight:700;font-style:italic;font-size:clamp(48px,13vw,190px);letter-spacing:-.045em;line-height:.98;font-optical-sizing:none;color:#f4f2ec}
.emotional .works h2{font-family:'Fraunces',Georgia,serif;font-weight:700;font-style:italic;font-size:clamp(32px,4.8vw,64px);letter-spacing:-.035em;line-height:1.08;font-optical-sizing:none;color:var(--accent)}
.emotional .label>span,.emotional .play,.emotional .bio h2 em,.emotional .bio .eyebrow:first-child{color:var(--accent)}
.emotional .play{border-color:var(--accent)}
.emotional .hero .pill{background:var(--accent)}
@media(max-width:809px){.emotional .hero-content h1{font-size:clamp(40px,12vw,94px)}}
.external-film{position:relative;display:block;aspect-ratio:16/9;background:#151515;overflow:hidden}.external-film img{width:100%;height:100%;object-fit:cover;opacity:.7}.external-film span{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:600}.making-of{margin-top:48px}.making-of>h2{font-size:32px;line-height:1.1;margin-bottom:24px}

/* Vector arrow: avoids iOS emoji substitution. */
.showcase-link::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M3 3h10v10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M3 3h10v10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}

.footer-cols.footer-minimal{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px}.footer-minimal .footer-social{display:flex;flex-direction:row;gap:28px}.footer-minimal .footer-copyright{margin:0;color:#92928c}@media(max-width:809px){.footer-cols.footer-minimal{flex-direction:column;align-items:flex-start;gap:32px}.footer-minimal .footer-social{gap:28px}}

.contact-compose{max-width:760px;margin:0 0 48px}.contact-disclosure summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid #ffffff50;font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-.025em}.contact-disclosure summary::-webkit-details-marker{display:none}.contact-disclosure summary span{color:var(--accent);font-size:32px;font-weight:400;transition:transform .2s}.contact-disclosure[open] summary span{transform:rotate(45deg)}.contact-address{color:#aaa;font-size:16px;margin:20px 0 0;overflow-wrap:anywhere}#contact-form{padding:28px 0 4px}#contact-form label{display:flex;flex-direction:column;gap:10px;font-size:13px;color:#bbb;letter-spacing:.02em}#contact-form .contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}#contact-form input:not([type=hidden]),#contact-form textarea{width:100%;box-sizing:border-box;border:1px solid #ffffff35;border-radius:3px;background:#141414;color:#f4f2ec;padding:13px 14px;font:16px Inter,Arial,sans-serif;line-height:1.5}#contact-form textarea{resize:vertical;min-height:130px}#contact-form :is(input,textarea):focus{outline:1px solid var(--accent);border-color:var(--accent)}#contact-form button{margin-top:20px;padding:14px 22px;background:var(--accent);color:#090909;border:0;border-radius:3px;font:600 15px Inter,Arial,sans-serif;cursor:pointer}#contact-form button:disabled{opacity:.55;cursor:wait}#contact-form button span{margin-left:20px}#contact-form .contact-trap{display:none!important}#contact-form .contact-status{font:14px/1.6 Inter,Arial,sans-serif;color:#ccc;margin:14px 0 0}#contact-form .contact-status:empty{display:none}.contact-disclosure summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}@media(max-width:809px){.contact-compose{margin-bottom:40px}.contact-disclosure summary{font-size:27px}.contact-address{font-size:15px}#contact-form .contact-fields{grid-template-columns:1fr;gap:18px}}

.contact-always-open>h3{margin:0;padding:18px 0;border-bottom:1px solid #ffffff50;font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-.025em;line-height:1.3}@media(max-width:809px){.contact-always-open>h3{font-size:27px}}

.emotional .hero-content h1{font-family:'Allura',cursive;font-weight:400;font-style:normal;font-size:clamp(62px,16vw,210px);line-height:.82;letter-spacing:0;white-space:pre-line;text-transform:none}.emotional .works h2{font-family:'Allura',cursive;font-weight:400;font-style:normal;font-size:clamp(46px,6vw,82px);line-height:1.08;letter-spacing:0}@media(max-width:809px){.emotional .hero-content h1{font-size:clamp(58px,16vw,140px);line-height:.85}.emotional .works h2{font-size:clamp(42px,10vw,65px)}}

#contact-form input:-webkit-autofill,#contact-form input:-webkit-autofill:hover,#contact-form input:-webkit-autofill:focus{-webkit-text-fill-color:#f4f2ec;-webkit-box-shadow:0 0 0 1000px #141414 inset;caret-color:#f4f2ec}#contact-form input:autofill{color:#f4f2ec;background:#141414}

/* Match Action: natural word wrapping instead of a forced line break. */
.emotional .hero-content h1{white-space:normal;max-width:100%;text-wrap:wrap}@media(max-width:809px){.emotional .hero-content h1{max-width:3.2em}}

/* Contact: open, centered form with a direct email alternative. */
footer#contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,6vw,100px);row-gap:56px;align-items:start}
#contact>h2{margin:0;font-size:clamp(72px,9.7vw,140px)}
#contact .contact-compose{width:100%;max-width:680px;justify-self:center;margin:0}
.contact-always-open>h3{border:0;text-align:center;padding:0 0 8px}
.contact-address{text-align:center;line-height:1.7;margin-top:24px}
.contact-address a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.contact-address a:hover{color:var(--accent)}
#contact>.footer-minimal{grid-column:1/-1}
@media(max-width:809px){footer#contact{grid-template-columns:minmax(0,1fr);row-gap:40px}#contact>h2{font-size:48px}.contact-always-open>h3{font-size:27px}#contact .footer-social{flex-wrap:wrap}}
.footer-social>span{font-size:20px;line-height:1.4;font-weight:600;color:#92928c;cursor:default}@media(max-width:809px){.footer-social>span{font-size:18px}}