/* Measurements from the live reference, 23 October 2026.
   CREIG content, artwork proportions and accessible controls remain intrinsic. */
.shell{max-width:1440px}
.hero{min-height:620px}
.hero-copy,.hero h1{max-width:681px}
.hero-services{top:215px}
.hero-pill{line-height:20px;padding:4px 16px}
.hero-pill>span{font-size:14px}
.hero-bg{transform:translateY(var(--parallax,0px));object-position:center;will-change:auto}
.showreel-card{width:334px;height:288px;box-shadow:none;background:#032b3e80;padding:12px}
.reel-image{height:225px}
.showreel-card .play-circle{border:0;background:none;width:48px;height:48px}
.showreel-card>span:last-child{padding:8px 14px;background:#032b3e}
.brands-section{padding-top:128px;padding-bottom:80px;background-color:white;background-image:radial-gradient(#032b3e0b .7px,transparent .8px);background-size:12px 12px}
.brands-section>.shell{display:grid;grid-template-columns:26% minmax(0,1fr);align-items:center;gap:32px 0;text-align:left}
.brands-section h2{font-size:18px;line-height:1.5;max-width:240px;margin:0;grid-row:1/3;padding-right:32px}
.brands-section .brand-marquee{grid-column:2}
.brands-section .portfolio-note{grid-column:1/-1;text-align:center}
.brand-marquee+.brand-marquee{margin-top:0}
.marquee-track{gap:80px;animation-duration:25s;padding-right:80px}
.marquee-track.reverse{animation-direction:reverse}
.brand-marquee:focus-within .marquee-track,.brand-marquee:hover .marquee-track{animation-play-state:paused}
.brands-section .portfolio-note{margin-top:40px}
.home-about{padding-top:160px;padding-bottom:84px}
.home-about h2{max-width:752px;font-size:54px;line-height:1.15385}
.featured .section-heading h2{font-size:100px;line-height:1.06;max-width:none}
.feature-project{padding-top:80px;padding-bottom:80px;gap:10%}
.feature-copy{width:40%}
.feature-copy h3{font-size:54px;color:var(--grey)}
.feature-category{font-size:54px;line-height:1.16;max-width:550px}
.feature-image{width:48%;height:650px}
.feature-image-label{background:transparent;left:24px;right:24px;bottom:14px;padding:0;color:inherit}
.tone-1 .feature-image-label{color:white}
.feature-image>img{padding:28px 28px 52px}
.process-grid{gap:20px}
.process-card{border-radius:16px;min-height:495px;padding:24px;gap:40px}
.process-image{max-width:198px}
.process-image>span{width:46px;height:46px;font-size:16px}
.process-card h3{font-size:28px}
.process-card>p{font-size:16px}
.faq-list{max-width:880px}
.faq-list summary{font-size:20px;padding:24px 0}
.collaboration-grid{max-width:1360px;gap:16px}
.collaboration-section{background:var(--light)}
.collaboration-card:not(.dark){background:white}
.collaboration-card{padding:40px;border-radius:12px}
.collaboration-card h3{font-size:32px}
.difference-grid{max-width:1092px}
.work-grid{gap:20px}
.work-image{aspect-ratio:1.08;border-radius:12px}
.page-intro{padding-top:120px;padding-bottom:80px}
.page-intro h1{max-width:850px}
.page-journal .page-intro,.page-collaboration .page-intro{text-align:left}
.page-journal .page-intro h1,.page-collaboration .page-intro h1{margin-left:0;max-width:768px}
.page-journal .page-intro .eyebrow,.page-collaboration .page-intro .eyebrow{justify-content:flex-start}
.page-journal .page-intro .shell>p:last-child:not(.eyebrow){margin-left:0}
.page-journal main>.section.shell{padding-top:0}
.page-journal .journal-grid{gap:40px 20px}
.page-journal .journal-card{background:var(--light);border-radius:16px;overflow:hidden;padding-bottom:24px}
.page-journal .journal-image{border-radius:16px 16px 0 0;height:288px}
.page-journal .journal-image img{aspect-ratio:auto}
.page-journal .journal-meta,.page-journal .journal-card h3{margin-left:24px;margin-right:24px}
.page-journal .journal-card h3{display:block;font-size:24px;line-height:1.33}
.page-journal .journal-arrow{display:none}
.article-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-top:120px;padding-bottom:80px}
.article-hero h1{font-size:54px;line-height:1.15385;margin:24px 0}
.article-hero>div>p:last-child{font-size:18px;line-height:1.6;color:var(--grey);max-width:548px}
.article-hero .article-cover{padding:0}
.article-hero .article-cover img{width:100%;height:520px;max-height:630px;object-fit:contain}
.article-layout{display:grid;grid-template-columns:minmax(240px,424px) 1fr;gap:8%;padding-top:80px;padding-bottom:80px;align-items:start}
.article-layout>aside{padding:32px;border:1px solid var(--line);background:var(--light);border-radius:16px;position:sticky;top:40px}
.article-layout>aside>p:nth-child(2){font-size:20px;line-height:1.6;margin:28px 0;color:var(--grey)}
.article-layout>aside .button{font-size:16px}
.article-layout .article-body{max-width:none;padding:0;margin:0}
.about-hero{padding-top:120px;padding-bottom:100px}
.about-hero h1{line-height:1.06;gap:20px}
.about-hero-image{border-radius:6px}
.case-heading{padding-top:120px;padding-bottom:40px;grid-template-columns:1fr auto;gap:40px}
.case-heading h1{font-size:54px;line-height:1.154;margin:0;color:var(--grey)}
.case-type{font-size:54px;line-height:1.154;letter-spacing:-.025em;max-width:940px}
.case-intro{font-size:24px;line-height:1.5;margin-bottom:48px;color:var(--grey)}
.case-hero>img{max-height:730px;min-height:0}
.case-story{grid-template-columns:35% 1fr;gap:8%;padding-top:100px}
.gallery-grid{gap:20px}
.contact-layout{grid-template-columns:.65fr 1fr;gap:60px;padding-top:100px;padding-bottom:84px}
.contact-card{padding:40px}
.contact-hero h1{max-width:900px;margin:auto}
.project-form input:not([type=checkbox]){height:52px}
.project-form textarea{min-height:190px;border-radius:8px}
.contact-option:focus-visible{outline-offset:2px}
.contact-back{font-size:14px;justify-self:start;padding:12px 4px;text-decoration:underline;text-underline-offset:4px}
.button-icon{height:24px;position:relative}
.arrow-icon{flex:none;transition:transform .3s var(--ease)}
.button-icon:has(.arrow-icon)::after{content:'↗';position:absolute;left:0;top:28px;font-size:24px;line-height:24px;transition:transform .3s var(--ease)}
.button:hover .arrow-icon{transform:translateY(-28px)}
.button:hover .button-icon:has(.arrow-icon)::after{transform:translateY(-28px)}
.button-label{position:relative;overflow:hidden}
.button-label>span{display:block;transition:transform .3s var(--ease)}
.button-label>span+span{position:absolute;top:100%;left:0;width:100%}
.button:hover .button-label>span{transform:translateY(-100%)}
.motion-ready [data-reveal]{transform:translateY(56px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--reveal-delay,0s)}
.motion-ready [data-reveal].is-visible{transform:none}
.reveal-line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.reveal-line>span{display:block}
.motion-ready [data-reveal]:not(.is-visible) .reveal-line>span{transform:translateY(110%)}
.motion-ready .is-visible .reveal-line>span{animation:lineEnter .6s var(--ease) both;animation-delay:calc(var(--line-index,0) * .1s)}
@keyframes lineEnter{from{transform:translateY(110%)}to{transform:translateY(0)}}
.studio-stage{position:relative;height:100%;overflow:hidden}
.closing-stage{position:relative;width:100%;min-height:inherit;display:grid;place-items:center;overflow:hidden}
.studio-piece,.floating-piece{object-fit:contain}
.studio-art{opacity:1}
.studio-art::after{display:none}
.studio-piece{box-shadow:0 12px 30px #0002;max-width:253px;width:20%;height:35%}
.studio-piece-0{left:0;top:38%}
.studio-piece-1{left:23%;top:4%}
.studio-piece-2{left:43%;top:69%}
.studio-piece-3{left:69%;top:4%}
.studio-piece-4{left:84%;top:42%}
.studio-bottom{top:50%;bottom:auto;transform:translateY(-50%);text-align:center;z-index:1;max-width:750px}
.studio-bottom .eyebrow{justify-content:center}
.studio-bottom h2{font-size:54px;line-height:1.15;margin:24px auto;max-width:650px}
.studio-bottom>p:last-child{margin:auto;color:var(--grey);font-size:18px}
.scroll-motion .studio-visual{height:300svh;max-height:none;overflow:clip}
.scroll-motion .studio-stage{position:sticky;top:0;height:100svh;min-height:620px}
.scroll-motion .studio-piece{translate:calc(var(--scatter-x,0px) * (1 - var(--studio-progress,0))) calc(var(--scatter-y,0px) * (1 - var(--studio-progress,0)))}
.studio-piece-0{--scatter-x:-700px;--scatter-y:150px}
.studio-piece-1{--scatter-x:-400px;--scatter-y:-500px}
.studio-piece-2{--scatter-x:0px;--scatter-y:600px}
.studio-piece-3{--scatter-x:500px;--scatter-y:-500px}
.studio-piece-4{--scatter-x:800px;--scatter-y:150px}
.closing-panel{position:absolute;width:56vw;height:60vh;overflow:hidden;border-radius:12px;background:#080808}
.closing-panel img{width:100%;height:100%;object-fit:cover;opacity:.35}
.closing-copy h2{font-size:54px;line-height:1.154}
.scroll-motion .closing{height:300svh;display:block;overflow:clip}
.scroll-motion .closing-panel{width:calc(56vw + 49vw * var(--closing-progress,0));height:calc(60vh + 40vh * var(--closing-progress,0))}
.scroll-motion .closing-stage{position:sticky;top:0;height:100svh;min-height:620px}
.scroll-motion .floating-piece{translate:calc(var(--exit-x,0px) * var(--closing-progress,0)) calc(var(--exit-y,0px) * var(--closing-progress,0));scale:calc(1 + var(--closing-progress,0) * .4)}
.piece-0,.piece-1,.piece-2{--exit-x:-350px}
.piece-3,.piece-4,.piece-5{--exit-x:350px}
.piece-0,.piece-3,.piece-5{--exit-y:-200px}
.piece-1,.piece-2,.piece-4{--exit-y:200px}
@media(min-width:992px){.home-services .service-row{top:240px;min-height:330px;grid-template-columns:23% 35% 28%;gap:7%;padding:48px 0}.home-services .service-row:nth-child(n){z-index:auto}.service-thumb{aspect-ratio:1.15}.service-copy h3{font-size:32px}}
@media(min-width:1800px){:root{--pad:40px}.hero-copy,.hero h1{max-width:681px}.hero h1{font-size:62px}.hero-services,.hero-bottom{max-width:1440px;padding-left:40px;padding-right:40px}.showreel-card{width:334px}.reel-image{height:225px}}
@media(min-width:992px) and (max-width:1199px){.hero-services{top:185px}.hero h1{font-size:56px}.hero-copy{max-width:62%}.hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:24px}.showreel-card{width:290px;height:auto}.reel-image{height:210px}.feature-category{font-size:40px}.featured .section-heading h2{font-size:80px}}
@media(max-width:991px){:root{--pad:32px}.hero{height:auto;min-height:0;padding-top:160px;padding-bottom:64px}.hero-services{position:relative;top:auto;font-size:14px;margin-bottom:48px}.hero-services>div{gap:24px}.hero-bottom{position:relative;bottom:auto;display:flex;flex-direction:column;align-items:stretch;gap:40px}.hero-copy{max-width:681px}.hero h1{font-size:48px}.showreel-card{order:-1;width:100%;height:auto;margin:0;padding:8px;max-width:none;box-shadow:none;border-radius:0;border:0}.reel-image{height:320px;width:100%}.showreel-card>span:last-child{display:flex;font-size:14px;padding:8px 14px}.hero-actions{flex-direction:row;align-items:center;gap:24px}.hero-actions .button{font-size:18px;min-height:52px}.hero-proof{max-width:360px}.section{padding-top:80px;padding-bottom:80px}.section-heading h2,h2{font-size:40px}.home-about h2{font-size:48px}.featured .section-heading h2{font-size:64px}.feature-category{font-size:32px}.feature-image{height:540px}.feature-copy{width:46%}.process-card{min-height:430px;padding:28px 20px}.process-image{max-width:140px}.process-card>p{font-size:14px}.page-intro{padding-top:80px;padding-bottom:60px}.page-intro h1{font-size:48px}.about-hero{padding-top:80px;padding-bottom:60px}.contact-card{padding:28px}.contact-layout{grid-template-columns:38% 1fr;gap:5%}.contact-hero h1{font-size:48px}.home-about{padding-top:80px;padding-bottom:80px}.studio-visual{height:650px}.closing{min-height:650px}}
@media(max-width:767px){:root{--pad:24px}.hero{padding-top:136px;padding-bottom:32px}.hero-services{font-size:14px;line-height:1.4;margin-bottom:32px}.hero-services>div{gap:18px}.hero-services>div+div{margin-top:20px;justify-content:flex-start}.hero-bottom{gap:24px}.hero h1{font-size:36px;line-height:1.15;max-width:100%;text-wrap:initial}.hero-pill{font-size:12px;margin-bottom:20px;padding:4px 12px}.reel-image{height:280px}.showreel-card{display:block;background:#032b3e80}.showreel-card .play-circle{width:48px;height:48px;font-size:20px}.showreel-card>span:last-child{display:flex;padding:6px 10px;line-height:1.4}.hero-actions{margin-top:32px;gap:24px;flex-direction:column;align-items:flex-start}.hero-proof{order:-1;width:auto}.hero-proof p{font-size:14px}.hero-proof>div>span{font-size:12px}.proof-images{width:76px}.proof-images img{width:30px;height:32px}.hero-actions .button{min-height:50px;padding:12px 24px;font-size:16px}.hero-background .hero-bg{object-position:center;transform:none}.section{padding-top:64px;padding-bottom:64px}.section-heading h2,h2{font-size:32px}.home-about h2{font-size:36px}.home-about{padding-top:64px;padding-bottom:64px}.brands-section{padding-top:64px;padding-bottom:48px}.brands-section h2{font-size:22px;margin-bottom:40px;max-width:270px}.brands-section .portfolio-note{margin-top:32px}.marquee-track{gap:48px;padding-right:48px}.brand-marquee+.brand-marquee{margin-top:32px}.marquee-track>span{font-size:25px}.studio-visual{height:420px;min-height:0}.studio-piece{width:32%;height:42%}.studio-bottom{bottom:32px}.studio-bottom h2{font-size:44px;max-width:400px}.studio-bottom>p:last-child{font-size:14px}.process-grid{gap:16px}.process-card{min-height:0;display:grid;grid-template-columns:1fr 100px;text-align:left;gap:24px;padding:28px}.process-card>div:first-child{align-self:center}.process-card .eyebrow{justify-content:flex-start}.process-card h3{font-size:24px;margin-top:8px}.process-image{grid-row:1/3;grid-column:2;max-width:100px}.process-image>span{width:34px;height:34px;font-size:12px;border-width:3px}.process-card>p{font-size:14px;grid-column:1}.featured .section-heading h2{font-size:48px}.feature-project{padding-top:32px;padding-bottom:32px;gap:28px}.feature-copy{width:100%;gap:24px}.feature-copy h3{font-size:36px}.feature-category{font-size:30px;max-width:100%;margin-bottom:24px}.feature-image{width:100%;height:460px}.feature-copy>div:last-child>p{font-size:16px}.collaboration-card{padding:32px}.collaboration-card h3{font-size:28px}.page-intro{padding-top:64px;padding-bottom:48px}.page-intro h1{font-size:36px}.about-hero h1{font-size:64px;gap:24px 12px}.about-hero-image{height:280px}.about-manifesto h2{font-size:28px}.contact-layout{grid-template-columns:1fr;gap:48px}.contact-card{padding:28px}.contact-hero h1{font-size:36px}.contact-hero{padding-bottom:80px}.closing{min-height:560px}.closing-stage{min-height:560px}.closing-copy{padding:100px 24px}.closing-copy h2{font-size:36px}.closing .floating-piece{width:90px;height:120px}.work-grid{gap:24px}.work-image{aspect-ratio:1.08}.faq-list summary{font-size:18px}.site-footer{padding-top:64px}.footer-grid{grid-template-columns:1fr 1fr;gap:48px 24px}.footer-intro{grid-column:1/-1}.footer-intro h2{font-size:28px}.footer-links{font-size:14px}.footer-links>.text-link{font-size:13px}.journal-card h3{font-size:26px}}
@media(max-width:479px){:root{--pad:16px}.hero{height:auto;max-height:none;min-height:0;padding-top:124px;padding-bottom:24px}.hero h1{font-size:28px;line-height:1.15}.hero-services{font-size:14px;margin-bottom:24px}.hero-services>div{gap:14px}.hero-services>div+div{margin-top:16px}.hero-bottom{gap:0}.hero-pill{margin-top:0;margin-bottom:20px;max-width:100%;font-size:11px}.showreel-card{margin:0 0 0;width:100%;padding:6px}.reel-image{height:208px}.showreel-card>span:last-child{font-size:14px;padding:6px 10px}.hero-actions{margin-top:32px;gap:24px}.hero-proof{gap:12px}.hero-proof>div:last-child{max-width:235px}.hero-proof p{font-size:12px}.hero-proof>div>span{font-size:11px}.home-about h2{font-size:28px}.home-about .eyebrow{font-size:12px}.section-heading h2,h2{font-size:28px}.featured .section-heading h2{font-size:40px}.feature-copy h3{font-size:32px}.feature-category{font-size:28px}.feature-image{height:390px}.process-card{padding:24px 20px;gap:16px;grid-template-columns:1fr 80px}.process-image{max-width:80px}.process-card h3{font-size:24px}.process-card>p{font-size:13px}.studio-bottom h2{font-size:38px}.closing-copy h2{font-size:28px}.closing-copy .eyebrow{font-size:10px}.closing{min-height:480px}.closing-stage{min-height:480px}.closing .floating-piece{width:74px;height:100px}.page-intro h1,.contact-hero h1{font-size:28px}.about-hero h1{font-size:48px}.about-hero-image{height:240px}.about-manifesto h2{font-size:24px}.case-heading h1{font-size:40px}.footer-intro h2{font-size:26px}.footer-links>.text-link{overflow-wrap:anywhere;font-size:12px}.contact-address{font-size:23px}.form-grid{gap:24px}.collaboration-card{padding:28px}.collaboration-card h3{font-size:28px}.faq-list summary{font-size:17px}}
@media(min-width:992px) and (max-height:700px){.hero{min-height:620px}.hero-services{top:150px}.hero h1{font-size:52px}.hero-bottom{bottom:40px}.hero-actions{margin-top:28px}.hero-pill{margin-bottom:18px}.home-services .service-row{top:90px}}
@media(prefers-reduced-motion:reduce){.reveal-line>span{transform:none!important;animation:none!important}.scroll-motion .studio-visual,.scroll-motion .closing{height:auto}.scroll-motion .studio-stage,.scroll-motion .closing-stage{position:relative;height:auto;min-height:600px}.studio-piece,.floating-piece{translate:none!important;scale:1!important}.button:hover .arrow-icon,.button:hover .button-icon:has(.arrow-icon)::after,.button:hover .button-label>span{transform:none}.button-icon:has(.arrow-icon)::after,.button-label>span+span{display:none}.marquee-track{padding-right:0}}

/* Responsive compositions confirmed against the reference's actual breakpoints. */
@media(min-width:992px){
  .scroll-motion .process-card{translate:0 var(--process-offset,0px)}
  .scroll-motion .feature-project{position:relative;min-height:810px}
  .scroll-motion .feature-copy{position:absolute;left:0;top:80px;bottom:80px;opacity:var(--project-progress,1)}
  .scroll-motion .feature-image{width:calc(100% - 52% * var(--project-progress,1));margin-left:auto;position:relative;z-index:1;flex:none}
  .scroll-motion .feature-project:focus-within .feature-copy{opacity:1}
  .scroll-motion .feature-project:focus-within .feature-image{width:48%}
}
@media(max-width:991px){
  :root{--pad:24px}
  .desktop-nav,.nav-contact,.pages-menu{display:none}
  .menu-toggle{display:block}
  .mobile-nav{inset:80px 0 0}
  .menu-open .site-header{position:fixed;top:0;background:white;color:var(--ink)}
  .hero{padding-top:176px;padding-bottom:48px}
  .hero-services{margin-bottom:96px}
  .hero-bottom{flex-direction:row;align-items:center;gap:24px}
  .hero-copy{max-width:512px;flex:1;min-width:0}
  .showreel-card{order:0;flex:0 0 224px;width:224px;height:224px}
  .reel-image{height:180px}
  .hero-actions{flex-wrap:wrap}
  .brands-section{padding:56px 0}
  .brands-section h2{font-size:18px;margin:0}
  .home-about{padding-top:96px;padding-bottom:64px}
  .home-about h2{font-size:40px;max-width:650px}
  .about-hero{padding-top:64px;padding-bottom:0}
  .about-hero h1{font-size:72px;flex-wrap:nowrap;gap:19px}
  .about-hero-image{width:224px;height:224px;order:0;flex:none}
  .about-manifesto{padding-top:96px}
  .page-intro{padding-top:64px;padding-bottom:56px}
  .page-journal .journal-image{height:256px}
  .page-journal .journal-card h3{font-size:20.8px}
  .page-journal .journal-grid{grid-template-columns:1fr 1fr;gap:36px 18px}
  .case-heading{padding-top:64px;padding-bottom:36px}
  .case-heading h1,.case-type{font-size:40px}
  .case-hero>img{max-height:560px}
  .case-story{padding-top:72px}
  .article-hero{padding-top:64px;grid-template-columns:1fr;gap:40px}
  .article-hero h1{font-size:40px}
  .article-hero .article-cover img{height:448px}
  .article-layout{grid-template-columns:minmax(240px,34%) 1fr;gap:40px;padding-top:56px}
  .article-layout>aside{padding:24px}
  .article-layout>aside>p:nth-child(2){font-size:16px}
  .contact-layout{grid-template-columns:1fr;gap:56px;padding-top:72px;padding-bottom:64px}
  .contact-hero{padding-top:160px;padding-bottom:96px}
  .collaboration-grid{gap:13px}
  .closing-panel{width:100%;height:100%;border-radius:0}
  .closing-art{display:none}
}
@media(max-width:767px){
  :root{--pad:20px}
  .mobile-nav{inset:72px 0 0}
  .hero{padding-top:176px;padding-bottom:42px}
  .hero-services{margin-bottom:80px}
  .hero-bottom{flex-wrap:wrap;gap:16px}
  .hero-copy{flex:1 1 400px;max-width:400px}
  .showreel-card{flex-basis:176px;width:176px;height:176px}
  .reel-image{height:132px}
  .hero-actions{flex-direction:row;align-items:center;gap:20px}
  .hero-proof{order:0}
  .brands-section{padding:48px 0}
  .brands-section>.shell{grid-template-columns:1fr;text-align:center;gap:28px}
  .brands-section h2{grid-row:auto;padding:0;max-width:270px;margin:auto}
  .brands-section .brand-marquee{grid-column:1}
  .brands-section .portfolio-note{margin-top:0}
  .brands-section .brand-marquee+.brand-marquee{margin:0}
  .home-about h2{font-size:28px;max-width:550px}
  .home-about{padding-top:80px;padding-bottom:48px}
  .about-hero{padding-top:56px}
  .about-hero h1{font-size:56px;gap:16px;justify-content:center}
  .about-hero h1>span:first-child{font-size:64px}
  .about-hero-image{width:176px;height:176px;flex:0 1 176px;min-width:70px}
  .about-manifesto{padding-top:48px}
  .about-manifesto h2{font-size:24px}
  .page-intro{padding-top:56px;padding-bottom:48px}
  .page-journal .journal-grid{grid-template-columns:1fr 1fr;gap:32px 16px}
  .page-journal .journal-card h3{font-size:20px;margin-left:16px;margin-right:16px}
  .page-journal .journal-meta{font-size:12px;margin-left:16px;margin-right:16px}
  .case-heading{padding-top:56px;padding-bottom:32px;grid-template-columns:1fr;gap:24px}
  .case-heading h1,.case-type{font-size:28px}
  .case-intro{font-size:20px;margin-bottom:32px}
  .case-story{padding-top:48px;grid-template-columns:1fr}
  .case-hero>img{max-height:400px}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:16px}
  .gallery-tall{grid-row:span 2}
  .feature-image{height:384px}
  .article-hero{padding-top:56px;gap:36px}
  .article-hero h1{font-size:28px}
  .article-hero .article-cover img{height:384px}
  .article-layout{grid-template-columns:1fr;padding-top:48px;gap:40px}
  .article-layout>aside{order:2;position:static}
  .article-layout .article-body section>p{font-size:18px}
  .contact-layout{padding-top:48px;padding-bottom:48px;gap:48px}
  .contact-hero{padding-top:160px;padding-bottom:80px}
  .project-form input:not([type=checkbox]){height:44px}
  .project-form textarea{min-height:144px}
  .collaboration-grid{grid-template-columns:1fr 1fr;gap:12px}
  .collaboration-card{padding:24px 16px}
  .collaboration-card h3{font-size:24px}
  .collaboration-card li{font-size:14px}
  .plan-cta{font-size:16px}
}
@media(max-width:479px){
  :root{--pad:16px}
  .hero{padding-top:128px;padding-bottom:37px}
  .hero-services{margin-bottom:24px}
  .hero-services>div{gap:16px}
  .hero-bottom{gap:24px}
  .hero-copy{max-width:352px;flex:1 1 100%}
  .hero h1{line-height:1.19355}
  .showreel-card{order:-1;width:100%;height:224px;flex:1 1 100%;padding:6px}
  .reel-image{height:184px}
  .hero-pill{margin-bottom:16px}
  .hero-actions{flex-direction:column;align-items:flex-start;margin-top:29px;gap:20px}
  .hero-proof{order:-1;width:100%}
  .hero-proof>div:last-child{max-width:none}
  .brands-section{padding-top:38px;padding-bottom:38px}
  .home-about{padding-top:56px;padding-bottom:40px}
  .home-about h2{font-size:26px}
  .about-hero{padding-top:48px}
  .about-hero h1{font-size:40px;gap:8px;letter-spacing:-.035em}
  .about-hero h1>span:first-child{font-size:44px}
  .about-hero-image{width:52px;height:64px;min-width:52px;flex-basis:52px}
  .about-manifesto{padding-top:38px}
  .about-manifesto>p:last-child{font-size:16px}
  .page-intro{padding-top:48px;padding-bottom:38px}
  .page-journal .journal-grid{grid-template-columns:1fr;gap:24px}
  .case-heading{padding-top:48px;padding-bottom:29px}
  .case-heading h1,.case-type{font-size:26px}
  .case-hero>img{max-height:none}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-tall{grid-row:auto}
  .feature-image{height:256px}
  .article-hero{padding-top:48px;gap:32px;padding-bottom:38px}
  .article-hero h1{font-size:26px}
  .article-hero .article-cover img{height:256px}
  .contact-hero{padding-top:144px;padding-bottom:56px}
  .contact-layout{padding-top:42px;padding-bottom:40px;gap:38px}
  .contact-card{padding:20px 16px}
  .contact-address{font-size:20px}
  .collaboration-grid{grid-template-columns:1fr;gap:20px}
  .collaboration-card{padding:24px}
  .closing-copy h2{font-size:26px}
}

.work-tags{top:50%;bottom:auto;transform:translateY(-50%)}
.work-tags span{font-size:14px}
.contact-hero-bg{background:url('images/rowalo-contact.webp') center/cover;filter:none;transform:none}

@media(max-width:767px){.work-image{height:384px;aspect-ratio:auto}.work-tags span{font-size:12px}}
@media(max-width:479px){.work-image{height:256px}.work-tags span{font-size:11px}}

@media(min-width:992px){.page-home main>.hero{position:sticky;top:0}.page-home main>section:not(.hero){position:relative;z-index:1}}
.page-collaboration,.page-collaboration .site-header{background:var(--light)}
.home-journal .journal-grid{grid-template-columns:1fr .8fr 1fr;align-items:center;gap:24px}
.home-journal .journal-card h3{font-size:24px;line-height:1.33}
.home-journal .journal-image{aspect-ratio:1;display:flex}
.home-journal .journal-card:last-child{margin-top:120px}
.journal-callout{border-radius:12px;background:var(--ink);color:white;min-height:420px;padding:32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:32px}
.journal-callout h3{font-size:36px;line-height:1.15}
.journal-callout .eyebrow{font-size:12px}
.journal-callout .button{font-size:16px;padding:14px 20px;min-height:52px}
@media(max-width:991px){.home-journal .journal-grid{grid-template-columns:1fr 1fr}.journal-callout{grid-column:1/-1;order:3;min-height:260px;align-items:center;text-align:center}.journal-callout h3{font-size:32px;max-width:500px}.home-journal .journal-card:last-child{margin-top:0}}
@media(max-width:479px){.home-journal .journal-grid{grid-template-columns:1fr}.journal-callout h3{font-size:28px}.home-journal .journal-image{aspect-ratio:1.4}}

.page-journal .page-intro h1{max-width:none}
.page-collaboration .collaboration-section{padding-top:80px}
.contact-hero h1{max-width:551px}
@media(max-width:991px){.contact-hero h1{max-width:448px}.page-collaboration .collaboration-section{padding-top:48px}}
@media(max-width:767px){.contact-hero h1{max-width:368px}}
@media(max-width:479px){.contact-hero h1{max-width:288px}}

.reveal-line{padding-bottom:0;margin-bottom:0}
.article-hero{align-items:start}
.article-hero h1{max-width:548px}
.article-hero .article-cover img{height:630px}
@media(max-width:991px){.article-hero .article-cover img{height:448px}}
@media(max-width:767px){.article-hero .article-cover img{height:384px}}
@media(max-width:479px){.article-hero .article-cover img{height:256px}}

/* Each canvas covers the sticky hero, including the margins on wide screens. */
.studio-visual,.page-home main>section.shell:not(.collaboration-section),.page-home .home-about,.page-home .featured,.page-home .approach,
.page-home .difference-section,.page-home .faq-section,.page-home .home-journal{background-color:white}
@media(min-width:992px){
  .page-home main>section.shell{box-shadow:0 0 0 100vmax var(--section-bg,white);clip-path:inset(0 -100vmax)}
  .page-home .collaboration-section{--section-bg:var(--light)}
}
@media(max-width:767px){
  .process-grid{align-items:start}
  .process-card{display:flex;flex-direction:column;text-align:center;padding:20px;gap:24px}
  .process-card .eyebrow{justify-content:center}
  .process-card>p{font-size:16px;line-height:1.5}
  .process-image{grid-row:auto;grid-column:auto;width:144px;max-width:144px}
  .process-image img{object-fit:contain;border-radius:0;filter:none}
}
@media(max-width:479px){
  .process-card{position:sticky;top:20px;padding:16px;min-height:322px}
  .process-image{width:112px;max-width:112px}
}
@media(max-width:479px) and (prefers-reduced-motion:reduce){.process-card{position:relative;top:auto}}

/* CREIG identity: unchanged circular SVG, official cyan and accessible blues. */
.brand{font-size:inherit;letter-spacing:normal;line-height:1;gap:0}
.brand-logo{display:block;width:82px;height:82px;object-fit:contain;background:white;border-radius:50%;padding:2px;flex:none}
.site-footer .brand-logo{width:104px;height:104px;padding:0}
.hero-background{background:var(--brand);isolation:isolate}
.hero-bg{filter:grayscale(1);mix-blend-mode:luminosity}
.hero-background::after{background:linear-gradient(180deg,#032b3e38 0%,transparent 42%,#032b3e4d 100%)}
.hero-light{background:radial-gradient(ellipse at 70% 50%,var(--brand),transparent 60%);animation:none}
.site-header.on-dark{background:#032b3e33}
.accent-dot{background:var(--brand)}
.contact-hero{background:var(--brand);isolation:isolate}
.contact-hero-bg{filter:grayscale(1);mix-blend-mode:luminosity;opacity:.85}
.dark{background-color:var(--ink)}
.collaboration-card.dark,.service-row,.journal-callout{background:var(--ink)}
.tone-0{background:#edf5f7}.tone-1{background:#073444}.tone-2{background:#e7f1f4}.tone-3{background:#e5eef4}.tone-4{background:#eef5f6}
.service-thumb{background:#0b3446}
.dark .text-link:hover{color:var(--brand)}
.dark .project-number,.dark .plan-subtitle{color:#b0c9d3}
.copy-status,.form-status{color:var(--accent)}
.button:hover,.plan-cta:hover{background:var(--accent);color:white}
@media(max-width:991px){.brand-logo{width:72px;height:72px}.site-header.on-dark{background:#032b3e33}}
@media(max-width:767px){.brand-logo{width:64px;height:64px}.site-footer .brand-logo{width:96px;height:96px}}