/* Mobile experience — 25 Oct 2026. Natural height; never clip text or lock scrolling. */
.home-agency .agency-intro{grid-column:1;grid-row:1}
.home-agency .agency-portrait{grid-column:2;grid-row:1}
@media(max-width:900px){
 .home-agency .agency-bottom{display:flex;flex-direction:column;gap:16px}
 .home-agency .agency-portrait{align-self:center;order:0}
 .home-agency .agency-intro{order:1;width:100%;max-width:none}
 .home-agency .agency-hero{min-height:0;padding-top:18px}
 .home-agency .agency-kicker{margin-bottom:12px}
 .home-agency .agency-title{margin-bottom:14px}
 .home-agency .agency-cutout{width:280px;max-width:100%}
 .home-agency .agency-cutout img{height:200px;width:100%;max-height:none;object-fit:contain;object-position:center bottom}
 .home-agency .agency-lead{font-size:1rem;line-height:1.45;max-width:42ch;margin:0 0 12px}
 .home-agency .agency-actions{flex-direction:row;align-items:center;gap:8px 16px;margin:0 0 14px}
 .home-agency .agency-actions .button{min-height:48px;padding:12px 24px;width:auto;flex:1;align-self:auto;text-align:center;font-size:1rem}
 .home-agency .agency-work-link{font-size:.9375rem;min-height:48px;padding:10px 0;align-self:auto;justify-content:center}
 .home-agency .agency-cred{font-size:.875rem;line-height:1.45;padding-top:12px;gap:12px;max-width:none}
 .home-agency .agency-cred strong{font-size:1.125rem}
 .home-agency .agency-footline{margin-top:14px;padding:10px 0;gap:8px}
 .home-agency .agency-footline>span{font-size:.8125rem;max-width:25ch}
 .home-agency .agency-footline a{font-size:.875rem;min-height:44px}
}
@media(max-width:700px){
 /* A fixed header height prevents scroll-triggered jumps and keeps anchor offsets accurate. */
 .brand-system .topbar .nav,.brand-system .topbar.scrolled .nav{height:60px;min-height:60px;transition:none}
 .brand-system .navlinks{max-height:calc(100svh - 60px);overflow-y:auto;overscroll-behavior:contain;padding:12px 20px 20px}
 .brand-system .navlinks a{min-height:48px;padding:12px;line-height:1.4}
 .brand-system .menu-toggle{width:44px;min-height:44px;justify-content:center;padding:10px}
 .home-agency .topbar .brand{font-size:1.25rem}
 .home-agency .agency-hero>.wrap{width:calc(100% - 40px)}
 .home-agency .agency-title{font-size:clamp(2rem,8.5vw,3.5rem);line-height:1.08;letter-spacing:-.045em}
 .home-agency .agency-title>span{white-space:normal}
 .home-agency .agency-kicker p{font-size:.75rem;line-height:1.4;letter-spacing:.02em}
 .home-agency .agency-cutout img{height:clamp(150px,25svh,210px)}
 .home-agency .agency-bottom{gap:14px}
 .brand-system .section{padding-block:52px}
 .brand-system .section-intro{gap:18px;margin-bottom:28px}
 .brand-system .section-intro p{margin-bottom:0}
 .brand-system :is(.impact,.approach,.testimonial){min-height:0}
 .brand-system .closing{padding-block:52px}
 .brand-system .contact-email{overflow-wrap:anywhere}
 .brand-system :is(.work-subnav,.service-subnav){max-height:calc(100svh - 104px);overflow-y:auto}
 /* Mobile content is visible immediately; scrolling never waits for an entrance effect. */
 .site-motion-on main [data-motion-reveal]{opacity:1;transform:none;transition:none}
 .site-motion-on main [data-motion-intro]>.wrap,.home-agency :is(.agency-title,.agency-portrait){animation:none}
 .brand-system .agency-cutout::before{transform:none;will-change:auto}
}
@media(max-width:359px){
 .home-agency .agency-actions{gap:8px;flex-direction:column;align-items:stretch}
 .home-agency .agency-actions .button,.home-agency .agency-work-link{align-self:stretch;width:100%}
 .home-agency .agency-hero>.wrap{width:calc(100% - 32px)}
}
@media(max-height:500px) and (orientation:landscape){.brand-system .topbar{position:relative}.brand-system main .breadcrumbs,.brand-system .work-subnav,.brand-system .service-subnav{position:relative;top:auto}}

@media(max-width:960px){.brand-system.page-services .service-subnav{top:auto;max-height:none;overflow:visible}}

/* Desktop hero: reserve a real image column so the portrait cannot crowd the intro. */
@media(min-width:901px){
 .home-agency .agency-bottom{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4.2vw,64px);align-items:center}
 .home-agency .agency-intro{position:relative;z-index:2;width:100%;max-width:590px;min-width:0}
 .home-agency .agency-portrait{position:relative;z-index:1;width:100%;max-width:clamp(390px,34vw,520px);min-width:0;justify-self:end}
 .home-agency .agency-cutout img{width:100%;height:clamp(340px,44svh,540px);object-fit:contain;object-position:center bottom}
}

/* Tablet layouts: give section intros enough room to wrap without a narrow side column. */
@media(min-width:701px) and (max-width:960px){
 .brand-system .section-intro{grid-template-columns:minmax(0,1.1fr) minmax(15rem,.9fr);gap:5%;align-items:start;margin-bottom:clamp(38px,6vw,60px)}
 .brand-system .section-intro>p{max-width:38ch;line-height:1.65}
}

/* Warm ivory is the primary action colour on charcoal; peach gives quiet feedback. */
.brand-system :is(.agency-hero,.impact,.expertise,.process,.featured-work,.blog-card,.case-next,.closing,.case-hero) .button,
.brand-system.page-work .page-hero .button,
.brand-system.page-case .page-hero .button{
 background:#faf8f5;border:1px solid #faf8f5;color:#20201e;
}
.brand-system :is(.agency-hero,.impact,.expertise,.process,.featured-work,.blog-card,.case-next,.closing,.case-hero) .button .icon,
.brand-system.page-work .page-hero .button .icon,
.brand-system.page-case .page-hero .button .icon{color:#20201e;stroke:#20201e}
.brand-system :is(.agency-hero,.impact,.expertise,.process,.featured-work,.blog-card,.case-next,.closing,.case-hero) .button:hover,
.brand-system.page-work .page-hero .button:hover,
.brand-system.page-case .page-hero .button:hover{background:#e4b9a9;border-color:#e4b9a9;color:#20201e}
.brand-system :is(.agency-hero,.impact,.expertise,.process,.featured-work,.blog-card,.case-next,.closing,.case-hero) .button:focus-visible,
.brand-system.page-work .page-hero .button:focus-visible,
.brand-system.page-case .page-hero .button:focus-visible{outline:3px solid #e4b9a9;outline-offset:5px}
@media(max-width:700px){
 .brand-system .section{padding-block:72px}
 .brand-system .section .section{padding-block:0}
 .brand-system .section-intro{gap:24px;margin-bottom:36px}
 .brand-system .section-intro>p{max-width:38ch;line-height:1.65}
 .brand-system .metric-grid{gap:28px}
 .brand-system .metric-grid>a{padding-block:28px;gap:20px;min-height:0}
 .brand-system .metric-grid>a>span{font-size:1.0625rem;line-height:1.65;max-width:34ch}
 .brand-system .expertise-shortcuts{gap:32px}
 .brand-system .expertise-shortcuts a{padding-block:28px}
 .brand-system .principles{padding-top:16px}
 .brand-system .principles>div{padding-block:28px}
 .brand-system .client-industry{padding-block:28px}
 .brand-system .closing{padding-block:64px}
 .brand-system .closing-grid{gap:28px}
 .brand-system .work-film{padding-block:40px}
 .brand-system .work-film-grid{gap:32px}
 .brand-system .work-film-copy{font-size:1rem;line-height:1.7}
 .home-agency .agency-kicker{margin-bottom:16px}
 .home-agency .agency-title{margin-bottom:18px}
 .home-agency .agency-bottom{gap:18px}
 .home-agency .agency-footline{margin-top:20px;padding-block:16px}
 .home-agency .agency-cred{padding-top:16px}
}

/* Case-study openings: make the focus area and project evidence quick to scan. */
.brand-system.page-case .case-hero,
.brand-system.page-case .page-hero.compact{
 min-height:0;display:block;align-items:initial;justify-content:initial;
 padding:clamp(44px,6.5vw,82px) 0 clamp(40px,5.5vw,68px)
}
.brand-system.page-case .case-hero .wrap,
.brand-system.page-case .page-hero.compact .wrap{width:min(100% - 96px,1160px);padding:0}
.brand-system.page-case .case-hero .eyebrow,
.brand-system.page-case .page-hero.compact .eyebrow{margin-bottom:14px;letter-spacing:.16em}
.brand-system.page-case .case-hero h1,
.brand-system.page-case .page-hero.compact h1{max-width:18ch;font-size:clamp(2.8rem,5.5vw,5.5rem);line-height:1.02;margin-bottom:18px}
.brand-system.page-case .case-hero .lead,
.brand-system.page-case .page-hero.compact .lead{max-width:62ch;font-size:clamp(1.15rem,1.7vw,1.42rem);line-height:1.55;margin-bottom:0}
.brand-system.page-case .case-focus{display:grid;gap:9px;margin-top:24px}
.brand-system.page-case .case-focus-label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-accent)}
.brand-system.page-case .case-focus-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.brand-system.page-case .case-focus-list li{border:1px solid var(--dark-rule);border-radius:999px;padding:7px 12px;color:var(--dark-paper);font-size:.82rem;line-height:1.25}
.brand-system.page-case .case-hero-metric{display:grid;grid-template-columns:minmax(190px,.55fr) minmax(0,1fr);gap:14px 28px;align-items:baseline;max-width:850px;margin-top:28px;padding-top:18px}
.brand-system.page-case .case-hero-metric strong{font-size:clamp(2rem,3.5vw,3.35rem);line-height:1.08}
.brand-system.page-case .case-hero-metric span{max-width:52ch;font-size:1rem;line-height:1.55}
.brand-system.page-case .case-snapshot{padding-block:clamp(30px,4vw,48px)}
.brand-system.page-case .case-snapshot .eyebrow{margin-bottom:10px}
.brand-system.page-case .case-snapshot .lead{max-width:70ch;font-size:1.08rem;line-height:1.6;margin:0}
@media(max-width:700px){
 .brand-system.page-case .case-hero,
 .brand-system.page-case .page-hero.compact{padding:34px 0 40px}
 .brand-system.page-case .case-hero .wrap,
 .brand-system.page-case .page-hero.compact .wrap{width:calc(100% - 40px)}
 .brand-system.page-case .case-hero h1,
 .brand-system.page-case .page-hero.compact h1{font-size:clamp(2.45rem,9vw,3.75rem);margin-bottom:14px}
 .brand-system.page-case .case-focus{margin-top:18px}
 .brand-system.page-case .case-focus-list{gap:7px}
 .brand-system.page-case .case-focus-list li{font-size:.78rem;padding:7px 10px}
 .brand-system.page-case .case-hero-metric{grid-template-columns:1fr;gap:6px;margin-top:20px;padding-top:15px}
 .brand-system.page-case .case-hero-metric strong{font-size:clamp(1.8rem,8vw,2.8rem)}
}

/* Mobile/tablet hero: keep the portrait in normal flow, below all reading content.
   Match the backdrop selectors so legacy absolute positioning cannot win. */
@media(max-width:960px){
 .brand-system.home-agency .agency-hero{min-height:0;padding:28px 0 0;background:#20201e}
 .brand-system.home-agency .agency-hero::after{content:none}
 .brand-system.home-agency .agency-hero>.wrap{position:relative;z-index:auto}
 .brand-system.home-agency .agency-hero .agency-bottom{display:flex;flex-direction:column;gap:28px;align-items:stretch}
 .brand-system.home-agency .agency-hero .agency-intro{position:relative;z-index:auto;order:1;width:100%;max-width:none;padding:0;min-width:0}
 .brand-system.home-agency .agency-hero .agency-portrait{position:relative;inset:auto;order:0;z-index:auto;align-self:center;width:min(100%,360px);height:auto;max-width:100%;margin:0;opacity:1;overflow:hidden;pointer-events:none}
 .brand-system.home-agency .agency-hero .agency-portrait img{display:block;width:100%;height:auto;max-width:100%;max-height:320px;object-fit:contain;object-position:center bottom;transform:none;will-change:auto}
 .brand-system.home-agency .agency-hero .agency-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0 0 24px}
 .brand-system.home-agency .agency-hero .agency-actions a{width:100%;min-height:48px;justify-content:center;align-self:stretch;font-size:1rem;line-height:1.4;white-space:normal;text-align:center}
 .brand-system.home-agency .agency-hero .agency-lead{font-size:1.125rem;line-height:1.55;color:#faf8f5;margin:0 0 24px;max-width:48ch}
 .brand-system.home-agency .agency-hero .agency-cred{font-size:1rem;line-height:1.5;color:#d7d0ca;max-width:none;gap:14px;margin:0;padding-top:20px}
 .brand-system.home-agency .agency-hero .agency-footline{position:relative;margin-top:24px;padding-block:20px;gap:16px;flex-wrap:wrap}
 .brand-system.home-agency .agency-hero .agency-footline>span{font-size:.875rem;line-height:1.5;max-width:30ch}
 .brand-system.home-agency .agency-hero .agency-footline a{font-size:.9375rem;min-height:48px;padding:8px 0}
}
@media(max-width:700px){
 .brand-system.home-agency .agency-hero .agency-title{font-size:clamp(2rem,8.7vw,3.75rem);line-height:1.12;margin-bottom:28px}
 .brand-system.home-agency .agency-hero .agency-title>span{white-space:normal}
 .brand-system.home-agency .agency-hero .agency-kicker{margin-bottom:22px}
 .brand-system.home-agency .agency-hero .agency-kicker p{font-size:.8125rem;line-height:1.5}
}
@media(max-width:359px){
 .brand-system.home-agency .agency-hero .agency-cred{grid-template-columns:1fr;gap:8px}
 .brand-system.home-agency .topbar .brand{font-size:1.1rem}
}
@media(min-width:701px) and (max-width:960px){
 .brand-system>footer .foot{flex-wrap:wrap;gap:16px}
 .brand-system>footer .foot .footer-legal{margin-left:0;flex-wrap:wrap;white-space:normal}
}

/* Full mobile QA: comfortable filters and contained Work decorations. */
@media(max-width:700px){
 .brand-system .topic-filter,.brand-system .insight-tag{min-height:44px;padding-block:11px}
 .brand-system .page-hero h1,.brand-system .insights-hero h1{overflow-wrap:normal;word-break:normal;hyphens:manual}
}

@media(max-width:700px){
 .brand-system.page-work .client-industry-grid{grid-template-columns:minmax(0,1fr)}
 .brand-system.page-work .client-industry>summary{min-height:64px;font-size:1rem;padding:16px;flex-wrap:wrap}
 .brand-system.page-work .client-industry-count{font-size:.8125rem;white-space:normal}
}