.services-menu{position:relative}
.services-menu summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px}
.services-menu summary::-webkit-details-marker{display:none}
.services-menu summary:hover,.services-menu[open]>summary{color:var(--pink)}
.services-menu summary:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.services-dropdown{position:absolute;top:calc(100% + 14px);left:-18px;width:244px;padding:12px;background:#fff;color:var(--ink);box-shadow:0 12px 60px #0003;border:1px solid #ededf0;border-radius:14px}
.services-dropdown a{display:block;padding:11px 12px;border-radius:7px;font-size:14px;line-height:1.3;letter-spacing:.02em;text-transform:none}
.services-dropdown a:hover,.services-dropdown a:focus-visible{background:#f3f3f6;color:var(--pink)}
.navigation nav{gap:22px}
.navigation #mobile-nav{max-height:calc(100svh - 80px);overflow-y:auto}
#mobile-nav .services-menu{width:100%}
#mobile-nav .services-dropdown{position:static;width:100%;padding:12px 0 0;background:transparent;color:inherit;box-shadow:none}
#mobile-nav .services-dropdown a{padding-left:16px}
@media(min-width:801px) and (max-width:1100px){.navigation nav{gap:14px}.navigation nav,.navigation .reel-link,.navigation .pill{font-size:12px;letter-spacing:.025em}}

.services-dropdown::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
#mobile-nav .services-dropdown{border:0;border-radius:0}#mobile-nav .services-dropdown::before{display:none}

.services-menu summary>a{color:inherit;text-decoration:none}.services-menu summary>a:hover{color:var(--pink)}
.footer-pages{display:flex;flex-wrap:wrap;gap:24px 40px;margin-top:36px;font-size:15px}.footer-pages a:hover{color:var(--pink)}
@media(max-width:550px){.footer-pages{gap:20px 30px}}

.site-footer .footer-pages{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-top:0;font-size:inherit;line-height:inherit;color:inherit}.site-footer .footer-pages a{color:inherit}.site-footer .footer-pages a:hover{color:var(--pink)}

/* Keep the return link above the animated footer grid, including its full hit area. */
.site-footer .footer-return{z-index:2}
.site-footer .footer-return a{position:relative;line-height:1.5;min-height:44px}

/* The studio and partner marks form one compact footer column. */
.site-footer .footer-identity{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.site-footer .footer-identity .brand{display:flex}
.site-footer .footer-identity .footer-memberships{margin-top:0;gap:0}
@media(max-width:650px){.site-footer .footer-identity{gap:16px}}
/* Reserve room for the return link and fixed chat control on narrow screens. */
@media(max-width:650px){
 .site-footer .footer-return{position:relative;top:auto;right:auto;margin-bottom:16px}
 .site-footer.wrap{padding-bottom:104px}
}

/* Keep Instagram and Back to top on the same row. */
.site-footer .footer-top{grid-template-columns:1.2fr 1fr .8fr 1.2fr;padding-right:0}
.site-footer .footer-social{display:grid;grid-template-columns:1fr auto;column-gap:22px;align-content:start}
.site-footer .footer-social>a{grid-column:1}
.site-footer .footer-social>a:first-child{display:flex;align-items:center;min-height:44px}
.site-footer .footer-social .footer-return{position:static;grid-column:2;grid-row:1;margin:0;align-items:center}
.site-footer .footer-social .footer-return a{padding:0;white-space:nowrap;min-height:44px;color:white}
.site-footer .footer-social .footer-return a:hover{color:var(--pink)}
@media(max-width:900px){.site-footer .footer-top{grid-template-columns:1fr 1fr}.site-footer .footer-social{grid-column:1/-1}}
@keyframes panel-fade-in{from{opacity:0}to{opacity:1}}
.services-menu[open] .services-dropdown,.chat-panel:not([hidden]){animation:panel-fade-in .3s ease-out both}
@media(prefers-reduced-motion:reduce){.services-menu[open] .services-dropdown,.chat-panel:not([hidden]){animation:none}}

/* Shared blue-hero supporting copy: smaller type and heading-top alignment. */
.project-page .case-hero .case-title>.case-hero-note>p:not(.eyebrow){font-size:clamp(18px,1.4vw,20px);line-height:1.5;text-align:left;margin-bottom:0}
@media(min-width:901px){
 .project-page:not(.about-page) .case-title:not(:has(h1[data-long-title])):has(.case-hero-note){align-items:start;row-gap:0}
 .project-page:not(.about-page) .case-title:not(:has(h1[data-long-title])):has(.case-hero-note)>div{display:contents}
 .project-page:not(.about-page) .case-title:not(:has(h1[data-long-title])):has(.case-hero-note)>div:first-child>:not(h1){grid-column:1;grid-row:1}
 .project-page:not(.about-page) .case-title:not(:has(h1[data-long-title])):has(.case-hero-note) h1{grid-column:1;grid-row:2}
 .project-page:not(.about-page) .case-title:not(:has(h1[data-long-title])) .case-hero-note>.eyebrow{grid-column:2;grid-row:1}
 .project-page:not(.about-page) .case-title:not(:has(h1[data-long-title])) .case-hero-note>p:not(.eyebrow){grid-column:2;grid-row:2;align-self:start}
}
@media(min-width:801px) and (max-width:900px){
 .info-page .case-title:has(.case-hero-note){align-items:start;row-gap:0}
 .info-page .case-title:has(.case-hero-note)>div{display:contents}
 .info-page .case-title:has(.case-hero-note)>div:first-child>.eyebrow{grid-column:1;grid-row:1}
 .info-page .case-title:has(.case-hero-note) h1{grid-column:1;grid-row:2}
 .info-page .case-title .case-hero-note>p{grid-column:2;grid-row:2;align-self:start}
}

/* Small award laurels replace the footer studio mark. */
.site-footer .footer-identity{width:100%}
.footer-awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:12px;width:100%;max-width:300px}
.footer-awards img{display:block;width:100%;height:80px;object-fit:contain;filter:brightness(0) invert(1)}
@media(max-width:650px){.site-footer .footer-identity{grid-column:1/-1}.footer-awards{max-width:300px}}

/* Mobile navigation enters gently; desktop awards have more separation. */
@media(min-width:901px){.site-footer .footer-top>address{padding-left:24px}}
@media(max-width:650px){
 .intro .shape-pencil{display:none}
 .navigation #mobile-nav:not([hidden]){animation:panel-fade-in .35s ease-out both}
 #mobile-nav .services-menu[open] .services-dropdown{animation:none}
}
@media(prefers-reduced-motion:reduce){.navigation #mobile-nav:not([hidden]){animation:none}}

/* Equal social-link rows, with the return link alongside LinkedIn. */
.site-footer .footer-social>a{display:flex;align-items:center;min-height:44px}

/* Gallery groups share one section gap rather than doubling adjacent padding. */
.project-page main>.case-gallery-group{padding-top:0}
.case-gallery-group>.case-pair:first-child{margin-top:0}
.project-page main>.case-gallery-group:has(+.case-next){padding-bottom:0}

/* Two decorative, hand-drawn accents on the homepage. */
.drawn-underline{position:relative;display:inline-block;isolation:isolate}
.drawn-underline::after{content:"";position:absolute;left:-1%;right:-1%;bottom:-.10em;height:.13em;z-index:-1;pointer-events:none;background:var(--underline-colour);transform:rotate(-1deg)}
.underline-green{--underline-colour:#00a07f}
.underline-yellow{--underline-colour:#ffc200}

.underline-pink{--underline-colour:#ffabc9}
.underline-blue{--underline-colour:#2470c7}

/* Keep decorative spans white in the footer and vary each drawn stroke. */
.contact h2 .drawn-underline{color:white}
.contact h2 .pink{color:var(--pink)}
.underline-yellow::after{transform:rotate(.6deg)}
.underline-pink::after{transform:rotate(-1.6deg)}
.underline-blue::after{transform:rotate(.9deg)}
.contact .underline-yellow::after{transform:rotate(-.5deg)}
.chat-launcher.show-invitation>span{font-weight:400;font-size:19px}
@media(max-width:650px){.chat-launcher.show-invitation>span{font-size:18px}}

/* Smooth drawn curves with softly rounded ends. */
.drawn-underline::after{-webkit-mask:var(--underline-mask) center/100% 100% no-repeat;mask:var(--underline-mask) center/100% 100% no-repeat}
.underline-green{--underline-mask:url("/assets/underlines/green.svg?v=90")}
.underline-yellow{--underline-mask:url("/assets/underlines/yellow.svg?v=90")}
.underline-pink{--underline-mask:url("/assets/underlines/pink.svg?v=90")}
.underline-blue{--underline-mask:url("/assets/underlines/blue.svg?v=90")}
.contact .underline-yellow{--underline-mask:url("/assets/underlines/footer.svg?v=90")}

.news-controls button[hidden]{display:none}
.news-controls:not(:has(button:not([hidden]))){margin-top:0}

/* Keep the full navigation on tablets; use the compact header on phones. */
.navigation{--header-glass:rgba(36,54,92,.18);background:var(--header-glass)}
.navigation.is-light{--header-glass:rgba(255,255,255,.65);background:var(--header-glass)}
.navigation.is-blue{background:var(--header-glass)}
.navigation>nav:not(#mobile-nav){flex-wrap:nowrap;white-space:nowrap}
.mobile-actions{display:none}
@media(max-width:650px){
 .navigation>nav:not(#mobile-nav){display:none}
 .mobile-actions{display:flex;align-items:center;gap:24px}
 .navigation .mobile-toggle,.mobile-reel{display:flex;align-items:center;gap:10px;padding:10px 0;background:none;border:0;color:inherit;font-size:14px;font-weight:400;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
 .mobile-toggle span{font-size:25px;line-height:1}
 .navigation #mobile-nav,.navigation.is-light #mobile-nav{position:fixed;top:88px;left:0;right:0;display:flex;flex-direction:column;align-items:flex-end;gap:22px;padding:28px 6%;text-align:right;color:inherit;background:var(--header-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-height:calc(100dvh - 88px);overflow-y:auto}
 .navigation #mobile-nav:not([hidden]){animation:none}
 #mobile-nav .services-menu summary{justify-content:flex-end}
 #mobile-nav .services-dropdown a{text-align:right;padding-right:0}
}
@media(max-width:900px){.intro .shape-pencil{display:none}.intro>div{padding-left:0}}
@media(max-width:650px){
 .navigation #mobile-nav{top:80px;max-height:calc(100dvh - 80px)}
 .mobile-actions{gap:20px}
 #reel-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:64px 0;background:#000;border:0;overflow:hidden}
 #reel-dialog[open]{display:flex;align-items:center;justify-content:center}
 #reel-dialog .reel-frame{width:100%;max-height:calc(100dvh - 128px)}
 #reel-dialog .reel-close{top:max(20px,env(safe-area-inset-top));right:20px;z-index:1;min-height:44px}
}
/* Keep each glass surface independent so the dropdown can blur the page too. */
.navigation,.navigation.is-light,.navigation.is-blue{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.navigation::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--header-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* Four compact award marks, with an evenly spaced contact group to their right. */
.footer-awards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:360px}
.footer-awards img{height:66px}
@media(min-width:1101px){
 .site-footer .footer-top{grid-template-columns:minmax(330px,1.65fr) minmax(170px,.9fr) minmax(90px,.55fr) minmax(210px,1fr);gap:32px}
 .site-footer .footer-top>address{padding-left:0}
 .site-footer .footer-social{column-gap:24px}
}
@media(min-width:901px) and (max-width:1100px){
 .site-footer .footer-top{grid-template-columns:1fr 1fr 1fr;gap:28px}
 .site-footer .footer-identity{grid-column:1/-1}
 .site-footer .footer-top>address{padding-left:0}
}
@media(max-width:900px){
 .site-footer .footer-identity{grid-column:1/-1}
 .footer-awards{max-width:340px}
}
@media(max-width:400px){.footer-awards{gap:10px}.footer-awards img{height:58px}}

@media(min-width:651px) and (max-width:1100px){
 .navigation{padding-left:4%;padding-right:4%}
 .navigation>nav:not(#mobile-nav){display:flex;gap:clamp(10px,1.5vw,16px)}
 .navigation nav,.navigation .reel-link,.navigation .pill{font-size:clamp(10px,1.2vw,12px);letter-spacing:.025em}
 .navigation .pill.small{padding:10px 14px}
 .navigation .brand img{width:80px}
}

/* Keep wide-screen content centred while section colours span the viewport. */
@media(min-width:1819px){
 main>section.wrap:not(.contact){padding-left:calc((100% - 1600px)/2);padding-right:calc((100% - 1600px)/2)}
 .project-page #top.case-hero .case-title{max-width:1818.18px;margin-left:auto;margin-right:auto;padding-left:109.09px;padding-right:109.09px}
 .project-page #top.about-hero .case-title,.project-page #top.work-page-hero .case-title{padding-right:890.91px}
 .project-page .case-hero>div:not(.case-title),.project-page .case-hero>.case-video,.project-page .case-hero>.case-cover,.project-page .case-hero>picture{max-width:1600px;margin-left:auto;margin-right:auto;display:block}
 .project-page .case-hero>picture:has(.about-ogre,.work-dragon,.jobs-character,.services-character){max-width:none;margin:0}
 .project-page .case-hero .about-ogre{right:calc((100% - 1600px)/2);width:1135px}
 .project-page .case-hero .work-dragon{right:calc((100% - 1600px)/2);width:1100px}
 .project-page .case-hero .jobs-character,.project-page .case-hero .services-character{right:calc((100% - 1600px)/2);width:780px}
 .intro .shape-pencil{left:calc((100% - 1600px)/2)}
 .expertise .shape-red-star{right:calc((100% - 1600px)/2)}
 .faq .shape-semicircle{left:calc((100% - 1600px)/2 + 160px)}
}
.project-page .case-hero>div:not(.case-title),.project-page .case-hero>.case-video,.project-page .case-hero>.case-cover{max-width:1600px;margin-left:auto;margin-right:auto}

/* Raise hero characters on large displays while preserving scroll parallax. */
@media(min-width:1600px){
 .project-page .case-hero .jobs-character{top:calc(112px - 10%)}
 .project-page .case-hero .services-character{top:calc(100px - 10%)}
}

/* Partner marks share the award row width while retaining their proportions. */
.site-footer .footer-identity .footer-memberships{display:grid;grid-template-columns:1fr 1.3fr .65fr;align-items:center;gap:24px;width:100%;max-width:360px}
.site-footer .footer-memberships a{display:block;min-width:0}
.site-footer .footer-memberships img{display:block;width:100%;height:50px;max-width:100%;object-fit:contain;filter:brightness(0) invert(1)}
@media(max-width:900px){.site-footer .footer-identity .footer-memberships{max-width:340px}}
@media(max-width:400px){.site-footer .footer-identity .footer-memberships{gap:18px}}

/* Mobile controls: joined header/menu surfaces and generous touch targets. */
.news-image,.news-image img{border-radius:0}
@media(max-width:650px){
 .navigation #mobile-nav,.navigation.is-light #mobile-nav{position:absolute;top:calc(100% - 1px);gap:24px;max-height:calc(100dvh - 80px)}
 .navigation nav,.navigation .mobile-toggle,.mobile-reel,#reel-dialog .reel-close{font-weight:600;letter-spacing:.065em}
 .mobile-actions{gap:24px}
 #mobile-nav>a,#mobile-nav summary{min-height:44px;display:flex;align-items:center;justify-content:flex-end}
 #mobile-nav .services-menu summary{gap:10px}
 #mobile-nav .services-menu summary>span{order:-1;display:grid;place-items:center;min-width:44px;min-height:44px;font-size:28px;line-height:1}
 #mobile-nav .services-dropdown a{padding:14px 0 14px 16px;min-height:44px;font-weight:600;letter-spacing:.03em}
 .chat-panel{position:fixed;top:max(12px,env(safe-area-inset-top));bottom:auto;right:16px;width:calc(100vw - 32px);max-height:calc(50svh - 12px);padding:18px 20px;overflow:auto}
 .chat-panel h2{font-size:30px;line-height:1.1;margin-bottom:10px;padding-right:28px}
 .chat-panel>p:not(.eyebrow),.chat-note{display:none}
 .chat-panel label{margin:0 0 6px;font-size:13px}
 .chat-panel textarea{height:72px;max-height:90px;resize:none;padding:9px;display:block}
 .chat-panel .pill{margin-top:12px;padding:11px 8px;font-size:14px;min-height:44px}
 #reel-dialog .reel-close{background:transparent;border:0;box-shadow:none;border-radius:0;font-size:14px;text-transform:uppercase;padding:10px;outline:none}
 #reel-dialog .reel-close:focus-visible{outline:1px solid white;outline-offset:2px}
}

/* Keep fixed navigation outside page-entry animation and on its own paint layer. */
.navigation{position:fixed;top:0;left:0;right:0;transform:translateZ(0)}
.hero-actions{display:contents}
.chat-panel textarea:focus,.chat-panel textarea:focus-visible{outline:none;border-color:#8a94a8;box-shadow:none}
.jobs-details .vacancy-callout p{margin-top:0}
@media(max-width:650px){
 .chat-panel{padding:22px 24px}
 .chat-panel label{margin-bottom:10px}
 .chat-panel textarea{padding:12px}
 .chat-panel .pill{margin-top:18px;padding:13px 10px}
 .hero .watch .play,.hero-foot{display:none}
 .hero h1{font-size:clamp(56px,calc(12vw + 2px),80px)}
 .hero-content{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
 .hero-actions{display:flex;align-items:center;gap:22px}
 .hero-actions .hero-scroll{position:static;transform:none;flex:none}
}
@media(max-width:650px) and (max-height:700px){
 .hero h1{font-size:clamp(42px,calc(11vw + 2px),66px)}
}

/* Desktop arrow is anchored to the hero, independently of its content. */
.hero-scroll-mobile{display:none}
@media(max-width:650px){.hero-scroll-desktop{display:none}.hero-scroll-mobile{display:grid}}