: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}

/* 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(--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}

/* 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}
}