/* Supplied final logo: preserve vector artwork and aspect ratio. */
.brand:has(>img.brand-wordmark){display:inline-flex;gap:0;line-height:0;letter-spacing:normal;flex-shrink:0;width:220px}
.brand>img.brand-wordmark{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
.header .brand:has(>img.brand-wordmark){width:210px}
@media(max-width:1000px){.header .brand:has(>img.brand-wordmark){width:180px}}
@media(max-width:360px){.header .brand:has(>img.brand-wordmark){width:170px}}

/* Centre the typography, excluding the lower dot, within the header. */
.header .brand>img.brand-wordmark{transform:translateY(9.15%)}

/* Reduce only the footer artwork; retain its existing layout space. */
.footer .brand>img.brand-wordmark{width:180px;height:auto;align-self:center}
.footer .brand:has(>img.brand-wordmark){height:40.8922px}

/* Match Work menu typography to Services; preserve dimensions and spacing. */
.work-link-copy>strong{font-weight:600;color:#e0e9f7}
.work-link-copy>small{color:#9aacc6}

/* Match dropdown arrow colour to Services. */
.work-link-copy .work-link-arrow{color:#9aacc6}

/* Match Work dropdown icons to Services. */
.work-link-icon{color:#9aacc6}

/* Normal title tracking in both dropdowns. */
.work-link-copy>strong,.header .mega-text strong{letter-spacing:normal}

/* Work hero labels and homepage-style scroll cue. */
.work-hero-topline{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:2}
.work-hero-topline>.website-breadcrumb{display:flex;align-items:center;gap:16px}
.work-hero-topline>.amir-breadcrumb{margin-bottom:0}
.work-hero-topline-project{margin-bottom:30px}
.work-original-label{flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;font-size:10px;font-weight:500;letter-spacing:.12em;line-height:1.7;color:#b4bdca}
.work-scroll-cue{flex-shrink:0;gap:10px;font-size:8px;letter-spacing:.12em;color:#abbace;white-space:nowrap}
.work-scroll-cue>.scroll-icon{order:-1;display:block;width:20px;height:28px;color:#b6c9e4;animation:scroll-icon-float 5s ease-in-out infinite;will-change:transform}
.work-scroll-cue>.scroll-icon svg{display:block;width:100%;height:100%}
.work-hero-scroll-row{display:flex;justify-content:flex-end;margin-top:24px;position:relative;z-index:2}
#work-content{scroll-margin-top:30px}
@media(max-width:600px){.work-hero-topline{flex-wrap:wrap;gap:12px}.work-original-label{margin-left:auto;font-size:8px}.intro-bottom:has(>.work-scroll-cue){flex-wrap:wrap;gap:20px}.intro-bottom>.work-scroll-cue{margin-left:auto}.work-scroll-cue{font-size:7px}}
@media(prefers-reduced-motion:reduce){.work-scroll-cue>.scroll-icon{animation:none;will-change:auto}}

/* Centre the scroll cue on project detail pages only. */
.project-intro>.work-hero-scroll-row{justify-content:center}

/* Scroll cue for individual service heroes; retain their existing grid and content. */
.inner-page-hero.service-detail-hero>div.service-hero-scroll-row{position:absolute;right:0;bottom:25px;z-index:2}
#page-content{scroll-margin-top:30px}
@media(max-width:600px){.inner-page-hero.service-detail-hero>div.service-hero-scroll-row{bottom:12px}}

/* Centre only the six individual service-page scroll cues. */
.inner-page-hero.service-detail-hero>div.service-hero-scroll-row{left:50%;right:auto;transform:translateX(-50%)}

/* Centre all inner-page scroll cues on phones; preserve desktop placement. */
@media(max-width:600px){
 .inner-page-hero .intro-bottom:has(>.work-scroll-cue){flex-direction:column;align-items:stretch}
 .inner-page-hero .intro-bottom>.work-scroll-cue{align-self:center;margin-left:auto;margin-right:auto}
 .inner-page-hero>.work-hero-scroll-row{justify-content:center}
}

/* Left-align Original Design Work below the breadcrumb on phones. */
@media(max-width:600px){.inner-page-hero:has(.work-scroll-cue:not(.section-scroll-cue)) .work-original-label{margin-left:0;margin-right:auto;flex-basis:100%;text-align:left}}

/* Give mobile service scroll cues their own row and breathing room. */
@media(max-width:600px){
 .inner-page-hero.service-detail-hero>div.service-hero-scroll-row{position:static;grid-column:1/-1;display:flex;justify-content:center;left:auto;right:auto;bottom:auto;transform:none;margin-top:12px}
}

/* Keep secondary overview labels below the primary page label on phones. */
@media(max-width:600px){
 .inner-page-hero:has(.section-scroll-cue) .work-hero-topline{flex-direction:column;align-items:flex-start;gap:10px}
 .inner-page-hero:has(.section-scroll-cue) .work-original-label{margin-left:0;margin-right:auto;text-align:left;font-size:8px;color:#8995a5}
}

/* Centre the shared conversation star with its label. */
.cta .eyebrow{display:flex;align-items:center;gap:9px;min-height:23.8px}
.cta .eyebrow>.tiny-star{flex-shrink:0;line-height:1;margin-right:0}

/* Match only the contact pill to the Services box; preserve the mobile menu. */
@media(min-width:601px){.header nav>.nav-contact{gap:10px;padding:8px 15px;border-radius:999px}}

/* Match the visible icon gap, accounting for the empty space inside the Services SVG. */
@media(min-width:601px){.header nav>.nav-contact{gap:14px}}

/* Enlarge only the contact arrow by 2px; keep the text line as the button height reference. */
.header nav>.nav-contact>span{font-size:calc(1em + 2px);line-height:1}

/* Header-only diagonal arrow swap: one pass per hover/focus, no layout movement. */
.header nav>.nav-contact>.contact-arrow-slide{position:relative;display:inline-block;overflow:hidden;vertical-align:middle;transform:translateY(-2.5px)}
.contact-arrow-slide>span{display:block;line-height:1}
.contact-arrow-slide>.contact-arrow-in{position:absolute;inset:0;transform:translate(-1.25em,1.25em)}
@keyframes contact-arrow-slide-out{to{transform:translate(1.25em,-1.25em)}}
@keyframes contact-arrow-slide-in{from{transform:translate(-1.25em,1.25em)}to{transform:translate(0,0)}}
@media(prefers-reduced-motion:no-preference){
 .header nav>.nav-contact:focus-visible .contact-arrow-out{animation:contact-arrow-slide-out .38s cubic-bezier(.22,.61,.36,1) both}
 .header nav>.nav-contact:focus-visible .contact-arrow-in{animation:contact-arrow-slide-in .38s cubic-bezier(.22,.61,.36,1) both}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .header nav>.nav-contact:hover .contact-arrow-out{animation:contact-arrow-slide-out .38s cubic-bezier(.22,.61,.36,1) both}
 .header nav>.nav-contact:hover .contact-arrow-in{animation:contact-arrow-slide-in .38s cubic-bezier(.22,.61,.36,1) both}
}

/* CTA-only arrow swaps. Grid baselines retain original glyph position and line height. */
:is(a,button) .cta-arrow-slide{display:inline-grid;grid-template-areas:"arrow";overflow:clip;vertical-align:baseline;font:inherit;letter-spacing:inherit;color:inherit}
.cta-arrow-slide>.cta-arrow-out,.cta-arrow-slide>.cta-arrow-in{grid-area:arrow;display:block;font:inherit;letter-spacing:inherit;color:inherit}
.cta-arrow-slide>.cta-arrow-in{transform:translate(-1.25em,1.25em)}
:is(a,button):is(:hover,:focus-visible) span.cta-arrow-slide,:is(a,button):is(:hover,:focus-visible) span.cta-arrow-slide>span{color:inherit!important}
/* Replace old arrow-box nudges, retaining their resting positions. */
:is(.round-arrow,.cap-arrow,.build-card-link-arrow,.pin-open):has(>.cta-arrow-slide),.site-footer-email>span:has(>.cta-arrow-slide),.footer-social-links>a>span:has(>.cta-arrow-slide){transform:none!important}
.image-action:has(>.cta-arrow-slide){transform:translateY(3px)!important}
@media(prefers-reduced-motion:no-preference){
 :is(a,button):focus-visible .cta-arrow-slide>.cta-arrow-out{animation:contact-arrow-slide-out .38s cubic-bezier(.22,.61,.36,1) both}
 :is(a,button):focus-visible .cta-arrow-slide>.cta-arrow-in{animation:contact-arrow-slide-in .38s cubic-bezier(.22,.61,.36,1) both}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 :is(a,button):hover .cta-arrow-slide>.cta-arrow-out{animation:contact-arrow-slide-out .38s cubic-bezier(.22,.61,.36,1) both}
 :is(a,button):hover .cta-arrow-slide>.cta-arrow-in{animation:contact-arrow-slide-in .38s cubic-bezier(.22,.61,.36,1) both}
}

/* Approved Back to top hover colors; resting appearance unchanged. */
.site-footer .footer-bottom>a[href="#top"]:hover{background:#2563eb;border-color:#2563eb;color:#fff}
.site-footer .footer-bottom>a[href="#top"]:hover>span{color:#fff;border-color:#ffffff80}

/* Services: design on the left, development and brand on the right. */
@media(min-width:801px){.header .mega-services-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}.header .mega-digital-grid{grid-template-columns:1fr;gap:0}.header .mega-digital-grid .mega-service{border-bottom:1px solid #ffffff12}.header .mega-digital-grid .mega-service:last-child{border-bottom:0}.header .mega-lower-grid{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:24px;margin-top:0;align-self:stretch}.header .mega-lower-grid>section{min-width:0}}

/* Allow the two development services to size naturally above Brand & Identity. */
@media(min-width:801px){.header .mega-lower-grid{grid-template-rows:auto 1fr}}