:root{--home-section-space:88px}
/* A short coloured name introduces each navigation destination. */
:root .Layout_menu nav a.site-text-link{font-size:clamp(24px,3vw,44px);line-height:1.2;padding:18px 0;align-items:center}
:root .Layout_menu nav a.site-text-link>.site-link-label{display:flex;flex-wrap:wrap;align-items:baseline;flex:1;column-gap:.3em;row-gap:.1em}
.Layout_menu .menu-short{font-size:inherit;line-height:inherit;font-weight:800;color:var(--brand-pink,#e44b8b);white-space:nowrap}
.Layout_menu .menu-divider{font-size:inherit;line-height:inherit;font-weight:400;color:var(--mineral-teal)}
.Layout_menu .menu-description{font-size:inherit;line-height:inherit;font-weight:500;text-transform:none}
:root .Layout_menu nav a.site-text-link>.site-link-arrow{margin-left:24px!important}
.Pages_projectGrid .ProjectCard_card h2{font-size:clamp(1.5rem,2.45vw,2.5rem);line-height:1.15;text-wrap:balance}
body:has(.Pages_projectGrid) .Pages_pageHero h1 em{color:var(--brand-pink,#e44b8b)}

/* The same section rhythm is used throughout the homepage. */
body:has(.CinematicHero_hero) :is(.home-intro,.home-showcase,.Home_clients,.Layout_footer){padding-block:var(--home-section-space)}
.home-showcase .showcase-caption{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.home-showcase .home-client-mark{display:block;width:auto!important;height:48px!important;max-width:190px;object-fit:contain;filter:brightness(0) invert(1);margin:0 0 24px}
.home-showcase .showcase-caption h3{margin-bottom:20px}
.home-showcase .showcase-case-link{margin-top:32px}

/* Shared rows keep the paired case studies aligned as their copy wraps. */
@supports(grid-template-rows:subgrid){
 .home-showcase .showcase-story-project{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:24px}
 .home-showcase .showcase-story-project .showcase-caption{display:contents}
 .home-showcase .showcase-story-project .home-client-mark{margin:8px 0 0}
 .home-showcase .showcase-story-project :is(h3,p,.showcase-case-link){margin:0}
 .home-showcase .showcase-story-project .showcase-case-link{padding-top:8px;align-self:start}
}

/* One full-area contact link, including its heading, arrow and support text. */
:root .Layout_contactBand.contact-banner{padding:0}
:root .contact-banner a.contact-banner-link.site-text-link{display:block;padding:var(--home-section-space) var(--section-inset,var(--gutter));color:var(--canvas)!important}
:root .contact-banner-link .Layout_contactTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:.35em;margin:48px 0;font-size:clamp(2rem,10.4vw,9rem);line-height:1.15}
:root .contact-banner-link .contact-banner-question{display:block;flex:1;min-width:0;max-width:100%;width:auto}
:root .contact-banner-link .Layout_contactTitle>.site-link-arrow{position:static!important;width:1em!important;height:1em!important;margin:.12em 0 0!important;flex:none;color:var(--electric-teal)!important}
.contact-banner-link .Layout_bandBottom{border-top:0;padding-top:0}
.contact-banner-link :is(.eyebrow,.Layout_bandBottom){text-decoration:none}

/* A rough-edged stroke grows like ink across each hovered menu label. */
:root .Layout_menu nav a.site-text-link:is(:hover,:focus-visible)>.site-link-label{text-decoration:none}
.Layout_menu :is(.menu-short,.menu-divider,.menu-description){position:relative}
.Layout_menu :is(.menu-short,.menu-divider,.menu-description)::after{content:"";position:absolute;inset:auto 0 -.04em;height:.1em;min-height:2px;background:currentColor;pointer-events:none;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5 12 2 30 3 48 1.7 72 2.5 96 1.2 121 2 144 1.5 160 3 159 6 140 5.7 118 6.8 96 5.6 72 7 50 5.8 28 6.5 11 5.7 0 6Z'/%3E%3C/svg%3E");mask-size:100% 100%;mask-repeat:no-repeat;transform:scaleX(0);transform-origin:left center;transition:transform .2s ease-out}
.Layout_menu nav a:is(:hover,:focus-visible) :is(.menu-short,.menu-divider,.menu-description)::after{transform:scaleX(1);transition-duration:.48s;transition-timing-function:cubic-bezier(.2,.8,.25,1)}
.Layout_menu nav a:is(:hover,:focus-visible) .menu-divider::after{transition-delay:.04s}
.Layout_menu nav a:is(:hover,:focus-visible) .menu-description::after{transition-delay:.08s}
@media(prefers-reduced-motion:reduce){.Layout_menu :is(.menu-short,.menu-divider,.menu-description)::after{transition:none!important}}
html[data-motion="off"] .Layout_menu :is(.menu-short,.menu-divider,.menu-description)::after{transition:none!important}

/* Progress follows the title, so the existing focus/scroll behaviour reveals it. */
.contact-flow .step>nav[aria-label="Enquiry progress"]{margin:24px 0 28px}
.contact-flow .step>nav .progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;gap:12px}
.contact-flow .step>nav .progress li{min-width:0;line-height:1.5}
@media(max-width:760px){:root{--home-section-space:56px}}
@media(max-width:600px){
 .Pages_projectGrid .ProjectCard_card h2{font-size:clamp(1.5rem,6.4vw,2rem)}
 :root .Layout_menu nav a.site-text-link{font-size:24px;padding:15px 0}
 :root .Layout_menu nav a.site-text-link>.site-link-label{column-gap:.3em;row-gap:5px}
 .Layout_menu .menu-description{flex-basis:100%;font-size:18px;line-height:1.35}
 :root .contact-banner-link .Layout_contactTitle{margin-block:32px}
 .contact-flow .step>nav .progress{gap:8px}
}