/* ===== Homepage stage: centred hero, intro, scroll reveals, Scorecard pop-up ===== */
:root:root body section.hero.hero--stage .hero-grid { display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: calc(100svh - 72px); padding: 48px 0 88px; position: relative; grid-template-columns: none !important; }
:root:root body section.hero.hero--stage .hero-main { max-width: 1240px; margin: 0 auto; will-change: transform, opacity; transform-origin: 50% 40%; }
:root:root:root:root body section.hero.hero--stage .hero-main h1, :root:root:root:root body section.hero.hero--stage .hero-main h1.h1-v4 { font-size: clamp(40px, 5.5vw, 84px) !important; line-height: 1.02 !important; letter-spacing: -0.028em !important; text-align: center !important; margin: 0 auto !important; max-width: none !important; }
:root:root body section.hero.hero--stage h1 .line { display: block; }
:root:root body section.hero.hero--stage h1 .line > span { animation: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
:root:root body section.hero.hero--stage .lede { max-width: 600px; margin: 32px auto 0 !important; color: var(--grey-2) !important; font-size: clamp(16px, 1.2vw, 18px) !important; line-height: 1.6 !important; text-align: center !important; }
:root:root body section.hero.hero--stage .hero-actions { margin-top: 40px; display: flex; justify-content: center; }
:root:root body section.hero.hero--stage .hero-actions .btn-primary { padding: 16px 30px !important; font-size: 0.9375rem !important; }
:root:root body section.hero.hero--stage .hero-cta-box { display: none; }

/* Intro */
.mx-on section.hero.hero--stage .mx-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.02em 0.04em 0.24em; margin: -0.02em -0.04em -0.24em; }
.mx-on section.hero.hero--stage .mx-w > span { display: inline-block; transform: translate3d(0, 108%, 0) rotate(4deg); transform-origin: 0 100%; opacity: 0; filter: blur(6px);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, filter 0.8s ease; transition-delay: calc(var(--i) * 45ms); }
.mx-on section.hero.hero--stage.mx-go .mx-w > span { transform: none; opacity: 1; filter: none; }
.mx-on section.hero.hero--stage .lede, .mx-on section.hero.hero--stage .hero-actions { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.mx-on section.hero.hero--stage .lede { transition-delay: calc(var(--mx-words, 9) * 45ms + 200ms); }
.mx-on section.hero.hero--stage .hero-actions { transition-delay: calc(var(--mx-words, 9) * 45ms + 320ms); }
.mx-on section.hero.hero--stage.mx-go .lede, .mx-on section.hero.hero--stage.mx-go .hero-actions { opacity: 1; transform: none; }

/* Scroll cue */
.mx-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.mx-cue-k { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-2); }
.mx-cue-line { width: 1px; height: 44px; background: linear-gradient(to bottom, rgba(240,237,232,0), rgba(240,237,232,0.6)); transform-origin: top; animation: mx-cue 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes mx-cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Scroll reveals */
.mx-on .mx { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(4px); transition: opacity 0.9s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s ease; transition-delay: var(--d, 0ms); }
.mx-on .mx.mx-in { opacity: 1; transform: none; filter: none; }
.mx-on .mx-img { clip-path: inset(0 0 100% 0); transform: scale(1.06); transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0ms); }
.mx-on .mx-img.mx-in { clip-path: inset(0 0 0 0); transform: none; }
.mx-on .mx-h .mx-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.02em 0.04em 0.22em; margin: -0.02em -0.04em -0.22em; }
.mx-on .mx-h .mx-w > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--d, 0ms) + var(--i) * 45ms); }
.mx-on .mx-h.mx-in .mx-w > span { transform: none; }

/* Scorecard pop-up */
.score-pop { position: fixed !important; right: 28px; bottom: 28px; z-index: 900; width: 340px; margin: 0 !important; padding: 26px 26px 24px !important;
  background: rgba(17, 17, 17, 0.92) !important; border: 1px solid rgba(240, 237, 232, 0.22) !important; border-radius: 4px; text-align: left;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; transform: translate3d(0, 28px, 0) scale(0.96); transform-origin: 100% 100%;
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.7s; display: block !important; }
.score-pop.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.score-pop .score-pop-k { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(126, 200, 160); margin: 0 0 10px !important; }
.score-pop .hero-cta-title { font-size: 1.375rem !important; line-height: 1.25 !important; margin: 0 0 10px !important; }
.score-pop .hero-cta-support { font-size: 0.9375rem !important; line-height: 1.55 !important; color: var(--grey-1) !important; margin: 0 0 18px !important; }
.score-pop .btn-primary { width: 100%; justify-content: center; }
.score-pop-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; background: none; color: var(--grey-2); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 2px; }
.score-pop-x:hover, .score-pop-x:focus-visible { color: var(--cream); background: rgba(240, 237, 232, 0.08); }
@media (max-width: 940px) { .score-pop { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .mx-on .mx, .mx-on .mx-img, .mx-on .mx-h .mx-w > span, .mx-on section.hero.hero--stage .lede, .mx-on section.hero.hero--stage .hero-actions { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  .mx-cue-line { animation: none; }
  .score-pop { transition: none; }
}

@media (max-width: 940px) {
  :root:root body section.hero.hero--stage .hero-main { padding: 0 clamp(20px, 5vw, 40px); box-sizing: border-box; width: 100%; }
  :root:root:root:root body section.hero.hero--stage .hero-main h1, :root:root:root:root body section.hero.hero--stage .hero-main h1.h1-v4 { font-size: clamp(38px, 10.6vw, 64px) !important; line-height: 1.04 !important; }
  :root:root body section.hero.hero--stage .hero-grid { min-height: calc(100svh - 56px); padding: 32px 0 64px; }
}

@media (min-width: 941px) { :root:root body section.hero.hero--stage h1 .line { white-space: nowrap; } }

/* Round 2: no flash before the intro, labels, crops, mobile */
.mx-pre section.hero.hero--stage .hero-main { opacity: 0; }
:root:root body section.hero.hero--stage .cta-m { display: none; }
:root:root body .proof-strip .proof-strip-label { margin: 0 0 22px; font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--grey-2); text-align: left; }
/* Case study crops */
:root:root body .cases-section .case-card-photo--at { object-position: 50% 86% !important; }
:root:root body .cases-section .case-card-photo--eq { object-position: 86% 50% !important; }
:root:root body .cases-section .case-card-photo--sb { object-position: 96% 60% !important; }
@media (max-width: 940px) {
  :root:root:root:root body section.hero.hero--stage .hero-main h1, :root:root:root:root body section.hero.hero--stage .hero-main h1.h1-v4 { font-size: clamp(32px, 8.8vw, 52px) !important; line-height: 1.06 !important; }
  :root:root body section.hero.hero--stage .lede { font-size: 15px !important; }
  :root:root body section.hero.hero--stage .lede .lede-a { white-space: nowrap; font-size: min(15px, calc((100vw - 44px) / 26.5)); letter-spacing: -0.005em; }
  :root:root body section.hero.hero--stage .cta-d { display: none; }
  :root:root body section.hero.hero--stage .cta-m { display: inline; }
}

/* Pathway: three chevrons that arrive 1, 2, 3 */
:root:root body .doors.doors--arrows { gap: 6px !important; }
:root:root body .doors--arrows .door { --pt: 30px; border: 0 !important; border-radius: 0 !important; background: rgba(240, 237, 232, 0.045) !important; padding: 34px calc(var(--pt) + 26px) 32px calc(var(--pt) + 22px) !important; position: relative;
  clip-path: polygon(0 0, calc(100% - var(--pt)) 0, 100% 50%, calc(100% - var(--pt)) 100%, 0 100%, var(--pt) 50%); transition: background 0.3s ease; }
:root:root body .doors--arrows .door:first-child { padding-left: 30px !important; clip-path: polygon(0 0, calc(100% - var(--pt)) 0, 100% 50%, calc(100% - var(--pt)) 100%, 0 100%, 0 50%); }
:root:root body .doors--arrows .door:hover { background: rgba(240, 237, 232, 0.085) !important; }
:root:root body .doors--arrows .door-num { font-size: 0.8125rem; letter-spacing: 0.04em; color: rgb(126, 200, 160) !important; }
.mx-on .doors--arrows .door { opacity: 0; transform: translate3d(-36px, 0, 0); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease; }
.mx-on .doors--arrows .door:nth-child(2) { transition-delay: 0.32s, 0.32s, 0s; }
.mx-on .doors--arrows .door:nth-child(3) { transition-delay: 0.64s, 0.64s, 0s; }
.mx-on .doors--arrows.is-in .door { opacity: 1; transform: none; }
@media (max-width: 940px) {
  :root:root body .doors--arrows .door, :root:root body .doors--arrows .door:first-child { --pt: 22px; padding: 26px 24px calc(var(--pt) + 24px) !important; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pt)), 50% 100%, 0 calc(100% - var(--pt))); }
  :root:root body .doors--arrows .door + .door { padding-top: calc(var(--pt) + 22px) !important; clip-path: polygon(0 0, 50% var(--pt), 100% 0, 100% calc(100% - var(--pt)), 50% 100%, 0 calc(100% - var(--pt))); margin-top: calc(var(--pt) * -0.6); }
  :root:root body .doors--arrows .door:last-child { padding-bottom: 28px !important; clip-path: polygon(0 0, 50% var(--pt), 100% 0, 100% 100%, 0 100%); }
  .mx-on .doors--arrows .door { transform: translate3d(0, -24px, 0); }
}
@media (prefers-reduced-motion: reduce) { .mx-on .doors--arrows .door { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* What clients say (top of the homepage) */
:root:root body .testi-strip { border-top: 1px solid var(--border-col); padding-top: 26px; margin-top: 8px; }
:root:root body .testi-strip .proof-strip-label { margin: 0 0 24px; font-size: 0.8125rem; color: var(--grey-2); text-align: left; }
:root:root body .testi-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
:root:root body .testi-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 24px 22px; border: 1px solid var(--border-col); background: rgba(240, 237, 232, 0.025); text-align: left; }
:root:root body .testi-logo { height: 26px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; opacity: 0.9; }
:root:root body .testi-q { margin: 0; padding: 0; border: 0; }
:root:root body .testi-q p { margin: 0; font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--cream); }
:root:root body .testi-who { margin: auto 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; line-height: 1.45; }
:root:root body .testi-name { color: var(--cream); }
:root:root body .testi-role { color: var(--grey-2); }
:root:root body .testi-result { font-size: 0.875rem; color: rgb(126, 200, 160); text-decoration: none; border-bottom: 1px solid rgba(126, 200, 160, 0.35); padding-bottom: 2px; }
:root:root body .testi-result:hover { border-bottom-color: rgb(126, 200, 160); }
@media (max-width: 940px) { :root:root body .testi-list { grid-template-columns: 1fr; gap: 16px; } }
/* Header Scorecard button steps aside while the pop-up is showing */
body.pop-open .site-header a[href*="scoreapp"] { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

@media (max-width: 940px) { :root:root body section.hero .testi-strip { margin-left: clamp(20px, 5vw, 40px); margin-right: clamp(20px, 5vw, 40px); } }

/* Testimonials: headshots, breathing room below */
:root:root body section.hero .testi-strip { margin-bottom: 96px; }
:root:root body .testi-face { display: block; margin-top: auto; }
:root:root body .testi-face img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; clip-path: none !important; transform: none !important; }
:root:root body .testi-face + .testi-who { margin-top: 0; }
@media (max-width: 940px) { :root:root body section.hero .testi-strip { margin-bottom: 64px; } }

/* Usability pass: tablet hero layout, instant catch-up for skipped reveals, lighter motion on touch screens */
@media (min-width: 601px) and (max-width: 767px) {
  :root:root:root:root body section.hero.hero--stage .hero-main h1.h1-lines { position: static !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 auto !important; }
}
@media (max-width: 940px) {
  :root:root:root:root body section.hero.hero--stage h1 .line, :root:root:root:root body section.hero.hero--stage h1 .h1-split { white-space: normal !important; }
  .mx-on .mx { filter: none; transform: translate3d(0, 20px, 0); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0ms); }
  .mx-on .mx.mx-in { transform: none; }
  .mx-on section.hero.hero--stage .mx-w > span { filter: none; }
}
.mx-on .mx-now, .mx-on .mx-now .mx-w > span { transition: none !important; }

/* On phones the hero is a flex column and the headline block carries order: 1, so the testimonials need a later slot or they jump above the headline */
:root:root:root body section.hero .testi-strip { order: 2; }