:root {
  --navy: #18365f;
  --navy-deep: #0d1c31;
  --blue-grey: #6f83a5;
  --pale: #dfe5ed;
  --line: #aeb9c8;
  --white: #ffffff;
  --text: #18365f;
  --page-pad: clamp(24px, 3.1vw, 60px);
  --content-max: 1460px;
  --display-font: "Prompt", sans-serif;
  --body-font: "Prompt", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #fff; }
body { margin: 0; font-family: var(--body-font); color: var(--text); background: #fff; line-height: 1.45; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
.menu-open { overflow: hidden; }
.section-pad { padding-left: var(--page-pad); padding-right: var(--page-pad); }
.eyebrow { font-size: clamp(16px, 1.302vw, 25px); line-height: 1.52; font-weight: 600; letter-spacing: 0; }
.credential { font-size: 12px !important; line-height: 1.35 !important; }

.site-header { position: absolute; inset: 0 0 auto 0; z-index: 30; height: 104px; display: flex; align-items: flex-start; justify-content: space-between; padding: 26px var(--page-pad) 0; color: white; }
.brand img { width: clamp(78px, 6vw, 116px); }
.desktop-nav { display: flex; gap: clamp(28px, 3vw, 58px); padding-top: 3px; }
.desktop-nav a { position: relative; text-decoration: none; font-size: 18px; line-height: 28px; font-weight: 400; letter-spacing: .02em; padding-bottom: 7px; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .22s ease; }
.desktop-nav a:hover::after, .desktop-nav a.is-active::after { transform: scaleX(1); }
.menu-toggle { display: none; background: none; border: 0; width: 40px; padding: 3px; }
.menu-toggle span { display: block; height: 1px; background: #fff; margin: 7px 0; }
.mobile-menu { position: fixed; inset: 0; z-index: 100; background: linear-gradient(160deg, #213f70 0%, #0d1c31 100%); color: #fff; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.mobile-menu[aria-hidden="false"] { opacity: 1; visibility: visible; }
.mobile-menu nav { height: 100%; display: grid; grid-template-rows: repeat(4, 1fr); padding: 145px 20px 110px; }
.mobile-menu nav a { display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 23px; border-bottom: 1px solid rgba(255,255,255,.8); transform: translateY(15px); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.mobile-menu nav a:nth-child(1) { transition-delay: .05s; }
.mobile-menu nav a:nth-child(2) { transition-delay: .1s; }
.mobile-menu nav a:nth-child(3) { transition-delay: .15s; }
.mobile-menu nav a:nth-child(4) { border-bottom: 0; transition-delay: .2s; }
.mobile-menu[aria-hidden="false"] nav a { transform: translateY(0); opacity: 1; }
.menu-close { position: absolute; top: 17px; right: 17px; color: #fff; background: transparent; border: 0; font-size: 40px; font-weight: 200; line-height: 1; }

.cta-button { width: min(100%, 320px); min-height: 74px; border: 1px solid var(--navy); display: inline-flex; align-items: center; justify-content: center; gap: 26px; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; transition: background .25s ease, color .25s ease, transform .25s ease; }
.cta-button:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.cta-button--light { border-color: rgba(255,255,255,.9); color: #fff; }
.cta-button--light:hover { background: #fff; color: var(--navy); }
.email-link { display: inline-block; margin-top: 28px; font-size: 12px; font-weight: 700; text-underline-offset: 5px; }
.email-link--light { color: #fff; }

.site-footer { padding: 22px var(--page-pad) 26px; font-size: 12px; line-height: 25px; font-weight: 400; color: var(--navy); background: #fff; }
.footer-rule { height: 1px; background: var(--line); margin-bottom: 18px; }
.site-footer p { margin: 4px 0; max-width: 1100px; }
.footer-strapline { font-weight: 600; }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Home */
.home-hero-shell { height: 200svh; min-height: 1440px; }
.home-hero { position: sticky; top: 0; height: 100svh; min-height: 720px; overflow: hidden; background: #1b2735; color: white; }
.home-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero-overlay { position: absolute; inset: 0; background: rgba(10,24,42,.28); }
.home-hero-copy { position: absolute; left: clamp(7%, 9.7vw, 186px); top: 50%; transform: translateY(-48%); z-index: 3; width: min(780px, 56vw); }
.home-hero-copy h1 { margin: 0 0 30px; font-size: clamp(36px, 3.646vw, 70px); line-height: 1.143; font-weight: 500; letter-spacing: 0; }
.home-hero-copy p { width: min(820px, 85%); font-size: clamp(16px, 1.302vw, 25px); line-height: 1.52; font-weight: 300; letter-spacing: 0; margin: 0 0 38px; }
.home-hero-outline { position: absolute; z-index: 2; width: 115%; max-width: none; left: -7%; bottom: -15%; opacity: .86; pointer-events: none; }
.home-content { position: relative; z-index: 5; background: #fff; margin-top: -100svh; }
.clarity-section { min-height: 660px; display: grid; place-items: center; }
.clarity-section h2 { font-size: clamp(36px, 3.646vw, 70px); line-height: .929; margin: 0; font-weight: 600; letter-spacing: 0; }
.home-services { max-width: var(--content-max); margin: 0 auto; padding-bottom: 180px; }
.home-services > .eyebrow { margin-bottom: 44px; }
.home-service-list { margin-left: 15%; margin-right: 15%; }
.home-service { min-height: 205px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.home-service:last-child { border-bottom: 0; }
.home-service.align-right { justify-content: flex-end; }
.home-service.align-left { justify-content: flex-start; }
.home-service-inner { width: min(55%, 640px); }
.home-service.align-right .home-service-inner { text-align: right; }
.home-service.align-left .home-service-inner { text-align: left; }
.home-service .service-no { display: block; font-size: clamp(42px, 3.646vw, 70px); font-weight: 100; line-height: 1.514; letter-spacing: 0; margin-bottom: 0; }
.home-service h3 { max-width: 610px; font-size: clamp(22px, 1.823vw, 35px); line-height: 1; font-weight: 600; letter-spacing: 0; margin: 0 0 18px; }
.home-service p { margin: 0; font-size: clamp(13px, .938vw, 18px); line-height: 1.556; font-weight: 400; letter-spacing: 0; }
.home-service-cta { text-align: center; padding-top: 52px; }
.about-tom { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: .92fr 1.08fr; gap: 80px; align-items: center; padding-bottom: 190px; }
.about-tom > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1); }
.about-tom-copy h2 { font-family: var(--display-font); font-size: clamp(48px, 4.167vw, 80px); line-height: .875; font-weight: 100; letter-spacing: 0; margin: 0 0 24px; }
.about-tom-copy p { font-size: clamp(13px, .938vw, 18px); line-height: 1.556; font-weight: 400; letter-spacing: 0; max-width: 650px; }
.about-tom-copy .cta-button { margin-top: 12px; }
.expertise-section { background: linear-gradient(to bottom, var(--pale) 0 58%, #fff 58% 100%); min-height: 650px; padding-top: 48px; }
.expertise-section .eyebrow { max-width: var(--content-max); margin: 0 auto; }
.expertise-list { width: min(1080px, 76vw); margin: 110px auto 0; display: flex; flex-direction: column; }
.expertise-list span { font-family: var(--display-font); font-size: clamp(40px, 4.167vw, 80px); line-height: .875; font-weight: 100; letter-spacing: 0; }
.home-cta { min-height: 520px; background: url('/assets/home-cta-bg.jpg') center/cover no-repeat; display: flex; align-items: center; }
.home-cta-inner { width: min(1280px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.45fr .8fr; gap: 80px; align-items: center; }
.home-cta h2 { font-family: var(--display-font); font-weight: 100; font-size: clamp(44px, 4.167vw, 80px); line-height: .875; letter-spacing: 0; margin: 0; }
.home-cta p { max-width: 460px; font-size: clamp(14px, .938vw, 18px); line-height: 1.556; font-weight: 600; letter-spacing: 0; }

/* About */
.about-hero { position: relative; height: 66vw; max-height: 1200px; min-height: 720px; color: #fff; overflow: hidden; }
.about-hero > img { width: 100%; height: 100%; object-fit: cover; }
.about-hero-shade { position: absolute; inset: 0; background: rgba(0,0,0,.24); }
.about-hero-copy { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
.about-hero-copy h1 { font-family: var(--display-font); font-weight: 100; font-size: clamp(58px, 5.208vw, 100px); line-height: 1; letter-spacing: -.05em; margin: 0 0 60px; }
.about-hero-copy p { max-width: 1120px; font-size: clamp(18px, 1.302vw, 25px); line-height: 1.52; font-weight: 600; letter-spacing: 0; }
.about-intro { min-height: 720px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; }
.about-intro > p:not(.credential) { max-width: 1120px; font-size: clamp(18px, 1.302vw, 25px); line-height: 1.52; font-weight: 600; letter-spacing: 0; margin: 0; }
.about-columns { max-width: 1760px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 90px; }
.about-columns article { min-height: 760px; padding: 0 50px 90px; border-right: 1px solid var(--line); }
.about-columns article:first-child { padding-left: 0; }
.about-columns article:last-child { border-right: 0; padding-right: 0; }
.about-columns h2 { font-family: var(--display-font); font-size: clamp(48px, 4.167vw, 80px); line-height: .875; font-weight: 100; margin: 0 0 80px; letter-spacing: 0; }
.about-columns h3 { font-size: clamp(18px, 1.302vw, 25px); line-height: 1.52; font-weight: 600; letter-spacing: 0; margin: 0 0 38px; }
.about-columns p { font-size: clamp(14px, .938vw, 18px); line-height: 1.556; font-weight: 400; letter-spacing: 0; }
.about-columns .method { margin-top: 40px; font-size: clamp(14px, .938vw, 18px); line-height: 1.556; font-weight: 400; letter-spacing: 0; }
.about-outline { width: 100%; height: clamp(300px, 23.5vw, 450px); overflow: hidden; padding: 20px var(--page-pad) 0; display: flex; align-items: flex-end; }
.about-outline img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; margin: 0; }

/* Services */
.simple-hero { position: relative; height: 540px; background: linear-gradient(155deg, #294977 0%, #0b1a2e 100%); color: white; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 72px; }
.simple-hero h1 { font-family: var(--display-font); font-size: clamp(62px, 5.208vw, 100px); line-height: 1; font-weight: 100; margin: 0; letter-spacing: -.05em; }
.services-main { max-width: 1380px; margin: 0 auto; padding-top: 250px; }
.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; min-height: 330px; border-bottom: 1px solid var(--line); padding: 0 85px; align-items: center; }
.service-row:last-child,
.services-list > .service-row:last-of-type { border-bottom: 0 !important; padding-bottom: 0; margin-bottom: 0; }
.service-meta h2 { max-width: 520px; font-size: clamp(18px, 1.302vw, 25px); line-height: 1.52; font-weight: 600; letter-spacing: 0; margin: 0 0 28px; }
.service-row .service-no { font-size: clamp(42px, 3.646vw, 70px); font-weight: 100; line-height: 1.514; letter-spacing: 0; }
.service-copy { max-width: 620px; font-size: clamp(14px, .938vw, 18px); line-height: 1.556; font-weight: 400; letter-spacing: 0; }
.service-copy p { margin: 0 0 22px; }
.services-cta { min-height: 690px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.services-cta h2 { font-family: var(--display-font); font-weight: 100; font-size: clamp(62px, 5.208vw, 100px); line-height: 1; letter-spacing: -.05em; margin: 0 0 55px; }

/* Contact */
.contact-main { min-height: 2580px; position: relative; overflow: clip; background: linear-gradient(130deg, #254b7e 0%, #1b3c68 38%, #7a8eae 100%); color: #fff; }
.contact-page .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; }
.contact-stage { position: relative; min-height: 2580px; }
.contact-pin { position: sticky; top: 0; z-index: 8; height: 100svh; min-height: 720px; pointer-events: none; }
.contact-label { position: absolute; left: var(--page-pad); top: 265px; width: 24%; padding-left: 10px; font-size: 25px; line-height: 38px; font-weight: 600; letter-spacing: 0; }
.contact-actions { position: absolute; right: var(--page-pad); top: 250px; width: min(24%, 390px); pointer-events: auto; }
.contact-scroll { position: relative; z-index: 3; min-height: 2580px; margin-top: -100svh; padding: 0 var(--page-pad); }
.contact-lines { position: absolute; inset: 0 var(--page-pad) auto; height: 1920px; pointer-events: none; }
.contact-lines span { position: absolute; top: 185px; bottom: 0; width: 1px; background: rgba(255,255,255,.45); }
.contact-lines span:nth-child(1) { left: 24%; }
.contact-lines span:nth-child(2) { left: 52%; }
.contact-lines span:nth-child(3) { left: 80%; }
.contact-title { position: absolute; left: calc(var(--page-pad) + 24%); top: 1080px; width: 56%; padding-left: 18px; }
.contact-title h1 { font-size: clamp(72px, 5.208vw, 100px); line-height: .95; font-weight: 500; letter-spacing: 0; margin: 0; }
.contact-copy { position: absolute; left: calc(var(--page-pad) + 52%); top: 1650px; width: 28%; padding: 20px 18px 0; font-size: clamp(15px, .938vw, 18px); line-height: 1.556; font-weight: 400; letter-spacing: 0; }
.contact-outline { position: absolute; z-index: 2; width: calc(100% - (2 * var(--page-pad))); max-width: none; left: var(--page-pad); bottom: 0; opacity: .8; }

@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .about-columns { grid-template-columns: 1fr; }
  .about-columns article, .about-columns article:first-child, .about-columns article:last-child { border-right: 0; border-bottom: 1px solid var(--line); padding: 70px 0; min-height: 0; }
  .about-columns article:last-child { border-bottom: 0; }
}

@media (max-width: 767px) {
  :root { --page-pad: 20px; }
  .site-header { height: 78px; padding-top: 15px; }
  .brand img { width: 96px; }
  .menu-toggle { width: 34px; }
  .site-footer { padding-top: 18px; font-size: 8.5px; line-height: 1.55; }
  .footer-rule { margin-bottom: 38px; }
  .cta-button { width: 100%; min-height: 56px; font-size: 9px; }
  .email-link { margin-top: 20px; font-size: 10px; }

  .home-hero-shell { height: 1140px; min-height: 1140px; }
  .home-hero { height: 570px; min-height: 570px; }
  .home-content { margin-top: -570px; }
  .home-hero-video { object-position: 48% center; }
  .home-hero-copy { left: 15px; top: 140px; transform: none; width: 250px; }
  .home-hero-copy h1 { font-size: 24px; line-height: .95; margin-bottom: 24px; }
  .home-hero-copy p { width: 225px; font-size: 10px; line-height: 1.45; margin-bottom: 22px; }
  .home-hero-copy .cta-button { width: 190px; }
  .home-hero-outline { display: none; }
  .clarity-section { min-height: 310px; }
  .clarity-section h2 { font-size: 26px; line-height: .93; text-align: center; }
  .home-services { padding-bottom: 95px; }
  .home-services > .eyebrow { margin-bottom: 38px; }
  .home-service-list { margin: 0; }
  .home-service { min-height: 205px; justify-content: flex-start !important; text-align: left !important; padding: 28px 0; }
  .home-service-inner, .home-service.align-right .home-service-inner, .home-service.align-left .home-service-inner { width: 100%; text-align: left; }
  .home-service .service-no { font-size: 48px; margin-bottom: 28px; }
  .home-service h3 { font-size: 16px; line-height: 1.05; max-width: 280px; }
  .home-service p { font-size: 10px; }
  .home-service-cta { padding-top: 36px; }
  .about-tom { grid-template-columns: 1fr; gap: 25px; padding-bottom: 80px; }
  .about-tom > img { aspect-ratio: 1.15 / 1; object-position: center 20%; }
  .about-tom-copy h2 { font-size: 44px; margin-bottom: 18px; }
  .about-tom-copy p { font-size: 10px; line-height: 1.55; }
  .credential { font-size: 7.5px !important; }
  .expertise-section { min-height: 520px; background: linear-gradient(to bottom, var(--pale) 0 74%, #fff 74% 100%); padding-top: 32px; }
  .expertise-list { width: 89%; margin: 55px auto 0; }
  .expertise-list span { font-size: 32px; line-height: .77; }
  .home-cta { min-height: 430px; padding-top: 60px; padding-bottom: 55px; }
  .home-cta-inner { display: block; text-align: center; }
  .home-cta h2 { font-size: 42px; max-width: 300px; margin: 0 auto 38px; }
  .home-cta p { font-size: 10px; max-width: 220px; margin: 0 auto 20px; }
  .home-cta .cta-button { width: 200px; }

  .about-hero { height: 610px; min-height: 610px; }
  .about-hero > img { object-position: 54% center; }
  .about-hero-copy { justify-content: flex-start; padding-top: 145px; }
  .about-hero-copy h1 { font-size: 48px; line-height: 1; letter-spacing: -.05em; margin-bottom: 44px; }
  .about-hero-copy p { font-size: 16px; line-height: 1.32; max-width: 350px; }
  .about-intro { min-height: 580px; padding-top: 90px; padding-bottom: 90px; gap: 28px; }
  .about-intro > p:not(.credential) { font-size: 14px; line-height: 1.45; max-width: 330px; }
  .about-columns { padding-top: 0; }
  .about-columns article, .about-columns article:first-child, .about-columns article:last-child { padding: 68px 10px; }
  .about-columns h2 { font-size: 43px; margin-bottom: 38px; }
  .about-columns h3 { font-size: 17px; line-height: 1.25; margin-bottom: 26px; }
  .about-columns p { font-size: 11px; line-height: 1.55; }
  .about-columns .method { font-size: 10px; }
  .about-outline { height: 150px; padding: 28px 10px 0; }
  .about-outline img { width: 100%; height: 100%; margin: 0; object-fit: contain; object-position: center bottom; }

  .simple-hero { height: 360px; padding-bottom: 75px; }
  .simple-hero h1 { font-size: 48px; line-height: 1; letter-spacing: -.05em; }
  .services-main { padding-top: 65px; }
  .service-row { display: block; min-height: 0; padding: 0 0 50px; margin-bottom: 50px; }
  .services-list > .service-row:last-of-type { border-bottom: 0 !important; padding-bottom: 0; margin-bottom: 0; }
  .service-meta h2 { font-size: 16px; max-width: 300px; margin-bottom: 28px; }
  .service-row .service-no { font-size: 49px; margin-bottom: 36px; display: block; }
  .service-copy { max-width: 330px; font-size: 11px; }
  .service-copy p { margin-bottom: 18px; }
  .services-cta { min-height: 420px; }
  .services-cta h2 { font-size: 40px; line-height: 1; letter-spacing: -.05em; }
  .services-cta .cta-button { width: 100%; }

  .contact-main { min-height: 875px; overflow: hidden; }
  .contact-main .site-header { position: relative; }
  .contact-stage { min-height: 785px; }
  .contact-pin { position: static; height: auto; min-height: 0; pointer-events: auto; }
  .contact-scroll { position: static; min-height: 0; margin-top: 0; padding: 0 20px 45px; }
  .contact-lines { display: none; }
  .contact-label { position: static; width: auto; padding: 0; text-align: center; font-size: 17px; margin: 95px 0 58px; }
  .contact-title { position: static; width: auto; padding: 0; }
  .contact-title h1 { text-align: center; font-size: 44px; line-height: .86; margin-bottom: 60px; }
  .contact-copy { position: static; width: auto; padding: 0; font-size: 18px; line-height: 1.52; max-width: 310px; margin: 0 auto 36px; }
  .contact-actions { position: static; width: auto; max-width: 360px; margin: 0 auto; }
  .contact-outline { display: none; }
}

/* Typography system synced to XD master styles */
.home-service h3, .service-meta h2, .about-columns h3 { font-family: var(--body-font); }

/* V5 XD alignment refinements */
.desktop-nav a:hover::after { transform: scaleX(1); }
.desktop-nav a.is-active::after { transform: scaleX(0); }

.cta-button {
  width: min(100%, 390px);
  min-height: 96px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: .04em;
  gap: 30px;
}
.email-link {
  margin-top: 34px;
  font-size: 25px;
  line-height: 38px;
  font-weight: 600;
  text-underline-offset: 8px;
}

.site-footer {
  padding: 54px var(--page-pad) 62px;
  font-size: 12px;
  line-height: 25px;
}
.footer-rule { margin-bottom: 44px; }
.site-footer p { margin: 0 0 13px; max-width: 1500px; }
.site-footer .footer-strapline { margin-top: 20px; margin-bottom: 0; }

/* Home hero: outline enters later in the sticky scroll, never in first frame */
.home-hero-shell { height: 200svh; }
.home-hero-copy { top: 46%; }
.home-hero-outline {
  --hero-progress: 0;
  width: 112%;
  left: -6%;
  bottom: -2%;
  transform: translateY(calc((1 - var(--hero-progress)) * 92%));
  opacity: calc(.88 * var(--hero-progress));
  transition: opacity .05s linear;
}
.home-content { margin-top: -100svh; }

/* Home services: one central axis. Right-side rows read left, left-side rows read right. */
.home-service-list { margin-left: 15%; margin-right: 15%; }
.home-service { display: block; min-height: 225px; padding: 38px 0; }
.home-service-inner { width: 50%; max-width: none; }
.home-service.align-right .home-service-inner { margin-left: 50%; text-align: left; padding-left: 34px; }
.home-service.align-left .home-service-inner { margin-right: 50%; text-align: right; padding-right: 34px; }
.home-service.align-right h3, .home-service.align-right p { margin-left: 0; margin-right: auto; }
.home-service.align-left h3, .home-service.align-left p { margin-left: auto; margin-right: 0; }
.home-service-cta { padding-top: 86px; }
.home-services { padding-bottom: 215px; }

/* Expertise master panel: exact 657px field at 1920 desktop */
.expertise-section {
  min-height: 657px;
  height: 657px;
  padding-top: 58px;
  background: linear-gradient(to bottom, var(--pale) 0 66%, #fff 66% 100%);
  overflow: visible;
}
.expertise-list { margin-top: 145px; }

/* Home closing panel: XD left/right composition and breathing room */
.home-cta { min-height: 720px; padding-top: 86px; padding-bottom: 88px; }
.home-cta-inner { width: min(1500px, 100%); grid-template-columns: 1.1fr .9fr; gap: 120px; align-items: center; }
.home-cta h2 { font-size: clamp(62px, 5.208vw, 100px); line-height: 1; letter-spacing: -.05em; }
.home-cta p { max-width: 520px; font-size: 25px; line-height: 38px; margin: 0 0 34px; }

/* About end mark: keep within gutters and close to footer */
.about-outline { height: clamp(360px, 26vw, 500px); padding: 22px var(--page-pad) 0; }
.about-outline img { width: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; }

/* Services footer/CTA breathing room */
.services-cta { min-height: 760px; padding-top: 80px; padding-bottom: 90px; }
.services-cta h2 { margin-bottom: 68px; }

/* Contact: fixed/sticky frame with scroll-through content, matching XD motion sequence */
.contact-main { min-height: 275svh; overflow: clip; }
.contact-main .site-header { position: sticky; top: 0; z-index: 30; height: 104px; margin-bottom: -104px; }
.contact-stage { min-height: 275svh; position: relative; }
.contact-pin { position: sticky; top: 0; z-index: 12; height: 100svh; min-height: 720px; pointer-events: none; }
.contact-lines { position: absolute; inset: 0 var(--page-pad); height: 100%; pointer-events: none; }
.contact-lines span { position: absolute; top: 185px; bottom: 0; width: 1px; background: rgba(255,255,255,.42); }
.contact-lines span:nth-child(1) { left: 18%; }
.contact-lines span:nth-child(2) { left: 46%; }
.contact-lines span:nth-child(3) { left: 74%; }
.contact-label { top: 245px; left: var(--page-pad); width: 18%; padding-left: 0; }
.contact-actions { top: 245px; right: var(--page-pad); width: 26%; max-width: 390px; }
.contact-actions .cta-button { width: 100%; }
.contact-actions .email-link { margin-top: 44px; }
.contact-scroll { position: absolute; inset: 0; z-index: 4; min-height: 275svh; margin: 0; padding: 0 var(--page-pad); }
.contact-title { left: calc(var(--page-pad) + 18%); top: 93svh; width: 56%; padding-left: 18px; }
.contact-title h1 { font-size: clamp(72px, 5.208vw, 100px); line-height: .95; }
.contact-copy { left: calc(var(--page-pad) + 46%); top: 158svh; width: 28%; padding: 20px 18px 0; font-size: 18px; line-height: 28px; }
.contact-outline { width: calc(100% - (2 * var(--page-pad))); left: var(--page-pad); bottom: 2svh; }
.contact-page .site-footer { position: relative; z-index: 40; }

@media (max-width: 700px) {
  .cta-button { min-height: 58px; width: 100%; font-size: 10px; line-height: 16px; }
  .email-link { font-size: 13px; line-height: 20px; margin-top: 24px; }
  .site-footer { padding: 42px 20px 48px; }
  .footer-rule { margin-bottom: 34px; }
  .site-footer p { margin-bottom: 10px; }
  .site-footer .footer-strapline { margin-top: 16px; }
  .home-hero-outline { display: none; }
  .home-service.align-right .home-service-inner,
  .home-service.align-left .home-service-inner { margin: 0; padding: 0; text-align: left; width: 100%; }
  .expertise-section { height: auto; min-height: 520px; }
  .home-cta { min-height: 430px; }
  .home-cta p { font-size: 10px; line-height: 16px; }
  .contact-main { min-height: 875px; }
  .contact-main .site-header { position: relative; height: 86px; margin-bottom: 0; }
  .contact-stage { min-height: 785px; }
  .contact-pin { position: static; height: auto; min-height: 0; }
  .contact-scroll { position: static; min-height: 0; padding: 0 20px 45px; }
  .contact-lines { display: none; }
  .contact-label { position: static; width: auto; margin: 95px 0 58px; text-align: center; }
  .contact-title { position: static; width: auto; padding: 0; }
  .contact-copy { position: static; width: auto; padding: 0; }
  .contact-actions { position: static; width: auto; max-width: 360px; }
}

/* V6 final desktop fidelity pass */
@media (min-width: 701px) {
  /* Navigation: hover only, never persistent */
  .desktop-nav a::after { transform: scaleX(0) !important; }
  .desktop-nav a:hover::after { transform: scaleX(1) !important; }

  /* Homepage services: alternating blocks around one central axis.
     01/03/05 are on the right and RIGHT aligned; 02/04/06 on the left and LEFT aligned. */
  .home-service-list { margin-left: 15%; margin-right: 15%; }
  .home-service { display: block; min-height: 225px; padding: 38px 0; }
  .home-service-inner { width: 50%; max-width: none; }
  .home-service.align-right .home-service-inner {
    margin-left: 50%; padding-left: 34px; padding-right: 0; text-align: right;
  }
  .home-service.align-left .home-service-inner {
    margin-right: 50%; padding-right: 34px; padding-left: 0; text-align: left;
  }
  .home-service.align-right h3, .home-service.align-right p { margin-left: auto; margin-right: 0; }
  .home-service.align-left h3, .home-service.align-left p { margin-left: 0; margin-right: auto; }

  /* Home hero: clean first frame; outline rises from below during sticky scroll. */
  .home-hero-copy { top: 48%; transform: translateY(-50%); }
  .home-hero-outline {
    width: calc(100% - (2 * var(--page-pad)));
    left: var(--page-pad);
    bottom: 0;
    transform: translateY(calc((1 - var(--hero-progress)) * 115%));
    opacity: calc(.92 * var(--hero-progress));
  }

  /* Shared end-mark logic: ABOUT and CONTACT use exactly the same horizontal measure as the footer rule. */
  .about-outline {
    width: 100%; height: auto; padding: 0 var(--page-pad); margin: 24px 0 0; overflow: hidden; display: block;
  }
  .about-outline img {
    display: block; width: 100%; height: auto; max-width: none; object-fit: contain; object-position: center bottom; margin: 0;
  }

  /* Expertise panel master height and placement */
  .expertise-section { height: 657px; min-height: 657px; padding-top: 58px; }
  .expertise-list { margin-top: 145px; }

  /* Closing CTA: preserve the XD left/right architecture */
  .home-cta { min-height: 720px; padding-top: 86px; padding-bottom: 88px; }
  .home-cta-inner { width: min(1500px, 100%); grid-template-columns: 1.05fr .95fr; gap: 110px; align-items: center; }
  .home-cta h2 { text-align: left; }
  .home-cta-inner > div { justify-self: start; width: min(100%, 520px); }

  /* Footer spacing, unified on every desktop page */
  .site-footer { padding: 66px var(--page-pad) 82px; }
  .footer-rule { margin-bottom: 58px; }
  .site-footer p { margin: 0 0 18px; max-width: 1500px; }
  .site-footer .footer-strapline { margin-top: 24px; margin-bottom: 0; }

  /* Contact: one sticky frame. Only title/copy/endmark move through it. */
  .contact-main { min-height: 300svh; overflow: visible; }
  .contact-stage {
    --contact-progress: 0;
    position: relative; height: 300svh; min-height: 2160px;
  }
  .contact-frame {
    position: sticky; top: 0; height: 100svh; min-height: 720px; overflow: hidden;
  }
  .contact-frame .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; margin: 0; }
  .contact-lines { position: absolute; inset: 0 var(--page-pad); height: 100%; z-index: 5; pointer-events: none; }
  .contact-lines span { position: absolute; top: 185px; bottom: 0; width: 1px; background: rgba(255,255,255,.42); }
  .contact-lines span:nth-child(1) { left: 18%; }
  .contact-lines span:nth-child(2) { left: 46%; }
  .contact-lines span:nth-child(3) { left: 74%; }
  .contact-label {
    position: absolute; z-index: 20; top: 245px; left: var(--page-pad); width: 18%; padding: 0;
    font-size: 25px; line-height: 38px; font-weight: 600;
  }
  .contact-actions {
    position: absolute; z-index: 20; top: 245px; right: var(--page-pad); width: 26%; max-width: 390px;
    pointer-events: auto;
  }
  .contact-actions .cta-button { width: 100%; }
  .contact-actions .email-link { margin-top: 44px; }
  .contact-title {
    position: absolute; z-index: 8; left: calc(var(--page-pad) + 18%); width: 56%; padding-left: 18px;
    top: 0;
    transform: translateY(calc(105svh - (var(--contact-progress) * 155svh)));
    will-change: transform;
  }
  .contact-title h1 { margin: 0; font-size: clamp(72px, 5.208vw, 100px); line-height: .95; font-weight: 500; }
  .contact-copy {
    position: absolute; z-index: 8; left: calc(var(--page-pad) + 46%); width: 28%; padding: 0 18px;
    top: 0;
    transform: translateY(calc(132svh - (var(--contact-progress) * 118svh)));
    font-size: 18px; line-height: 28px; font-weight: 400; will-change: transform;
  }
  .contact-copy p { margin: 0; }
  .contact-outline {
    position: absolute; z-index: 7;
    width: calc(100% - (2 * var(--page-pad))); height: auto; max-width: none;
    left: var(--page-pad); bottom: auto; top: 0;
    transform: translateY(calc(155svh - (var(--contact-progress) * 104svh)));
    opacity: .86; will-change: transform;
  }
  .contact-page .site-footer { position: relative; z-index: 40; }
}

/* V7 refinements from final XD review */
@media (min-width: 701px) {
  /* Home About Tom: larger portrait, wider composition, more editorial spacing */
  .about-tom {
    max-width: 1460px;
    grid-template-columns: 560px minmax(0, 1fr);
    gap: 118px;
    align-items: center;
    padding-top: 70px;
    padding-bottom: 220px;
  }
  .about-tom > img {
    width: 560px;
    height: 560px;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .about-tom-copy {
    max-width: 660px;
  }
  .about-tom-copy h2 { margin-bottom: 34px; }
  .about-tom-copy p { margin: 0 0 26px; max-width: 620px; }
  .about-tom-copy .credential { margin-top: 34px; margin-bottom: 28px; }
  .about-tom-copy .cta-button { margin-top: 18px; }

  /* The large ROCHE end mark on About must use the same live width as Contact/footer. */
  .about-outline,
  .contact-outline {
    box-sizing: border-box;
  }
  .about-outline {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
    margin-top: 30px;
  }
  .about-outline img {
    width: 100%;
  }

  /* Contact grid returns to the XD four-column frame. */
  .contact-lines span:nth-child(1) { left: 24%; }
  .contact-lines span:nth-child(2) { left: 52%; }
  .contact-lines span:nth-child(3) { left: 80%; }
  .contact-label { width: 24%; }
  .contact-actions { width: 24%; max-width: 390px; }
  .contact-title { left: calc(var(--page-pad) + 24%); width: 56%; }
  .contact-copy { left: calc(var(--page-pad) + 52%); width: 28%; }

  /* Motion timing from XD: frame first, then headline, copy, then end mark. */
  .contact-title {
    transform: translateY(calc(112svh - (var(--contact-progress) * 160svh)));
  }
  .contact-copy {
    transform: translateY(calc(146svh - (var(--contact-progress) * 124svh)));
  }
  .contact-outline {
    width: calc(100% - (2 * var(--page-pad)));
    left: var(--page-pad);
    transform: translateY(calc(170svh - (var(--contact-progress) * 112svh)));
  }
}

/* V8 desktop fidelity pass: XD 1920px master */
@media (min-width: 701px) {
  /* Header */
  .site-header {
    height: 112px;
    padding-top: 25px;
  }
  .brand img {
    width: 146.93px;
    max-width: none;
  }
  .desktop-nav {
    gap: clamp(58px, 4.25vw, 82px);
    padding-top: 4px;
  }
  .desktop-nav a {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: .02em;
  }
  .desktop-nav a::after { transform: scaleX(0) !important; }
  .desktop-nav a:hover::after { transform: scaleX(1) !important; }

  /* Home hero: match the XD composition rather than a narrow left column */
  .home-hero-copy {
    left: clamp(220px, 18.1vw, 350px);
    top: clamp(250px, 31.5vh, 340px);
    transform: none;
    width: min(1030px, 67vw);
  }
  .home-hero-copy h1 {
    width: 100%;
    font-size: clamp(48px, 3.646vw, 70px);
    line-height: 1.143;
    margin-bottom: 36px;
    white-space: nowrap;
  }
  .home-hero-copy p {
    width: min(900px, 88%);
    font-size: clamp(18px, 1.302vw, 25px);
    line-height: 1.52;
    margin-bottom: 44px;
  }
  .home-hero-copy .cta-button { width: 390px; }

  /* Home services retain the central axis but with the XD's breathing room */
  .clarity-section { min-height: 760px; }
  .home-services { padding-bottom: 205px; }
  .home-services > .eyebrow { margin-bottom: 56px; }
  .home-service { min-height: 255px; padding-top: 46px; padding-bottom: 46px; }
  .home-service-list { margin-left: 15%; margin-right: 15%; }

  /* Closing CTA is an 886px design field in the XD master */
  .home-cta {
    height: 886px;
    min-height: 886px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .home-cta-inner {
    width: min(1500px, 100%);
    grid-template-columns: 1.05fr .95fr;
    gap: 110px;
    align-items: center;
  }

  /* Footer: 12 / 25 with no extra paragraph spacing layered on top */
  .site-footer {
    padding: 60px var(--page-pad) 70px;
    font-size: 12px;
    line-height: 25px;
  }
  .footer-rule { margin-bottom: 48px; }
  .site-footer p,
  .site-footer .footer-strapline {
    margin: 0;
    line-height: 25px;
  }
}

@media (min-width: 701px) and (max-width: 1250px) {
  .home-hero-copy {
    left: 14vw;
    width: 75vw;
  }
  .home-hero-copy h1 { white-space: normal; }
}

/* V9 XD fidelity pass: 26 Aug review */
@media (min-width: 701px) {
  /* Header: stronger mark, wider navigation rhythm, hover line tight to type */
  .site-header {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }
  .brand img { width: 146.93px; }
  .desktop-nav { gap: clamp(68px, 4.7vw, 92px); }
  .desktop-nav a { padding-bottom: 3px; }
  .desktop-nav a::after { bottom: 0; }

  /* Homepage hero. Only the moving image is sticky; all designed content scrolls away. */
  .home-hero-shell {
    position: relative;
    height: 200svh;
    min-height: 1440px;
  }
  .home-hero-bg {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
    background: #1b2735;
    color: #fff;
  }
  .home-hero-content-layer {
    position: absolute;
    inset: 0 0 auto 0;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
    color: #fff;
    z-index: 2;
  }
  .home-hero-copy {
    left: clamp(258px, 18.4vw, 354px);
    top: clamp(300px, 31.5vh, 350px);
    width: min(1080px, 69vw);
    transform: none;
  }
  .home-hero-copy h1 {
    width: 100%;
    white-space: nowrap;
  }
  .home-hero-copy p {
    width: min(900px, 88%);
  }
  .home-hero-outline {
    position: absolute;
    width: calc(100% - (2 * var(--page-pad)));
    max-width: none;
    left: var(--page-pad);
    bottom: 0;
    opacity: .9;
    transform: none;
  }
  .home-content { margin-top: -100svh; }

  /* Homepage services: right-side rows are left aligned; left-side rows are right aligned. */
  .home-service.align-right .home-service-inner {
    margin-left: 50%;
    padding-left: 34px;
    padding-right: 0;
    text-align: left;
  }
  .home-service.align-left .home-service-inner {
    margin-right: 50%;
    padding-right: 34px;
    padding-left: 0;
    text-align: right;
  }
  .home-service.align-right h3,
  .home-service.align-right p { margin-left: 0; margin-right: auto; }
  .home-service.align-left h3,
  .home-service.align-left p { margin-left: auto; margin-right: 0; }

  /* About Tom on homepage: XD portrait proportion and spacing. */
  .about-tom {
    max-width: 1460px;
    grid-template-columns: 596px minmax(0, 1fr);
    gap: 122px;
    align-items: center;
    padding-top: 92px;
    padding-bottom: 230px;
  }
  .about-tom > img {
    width: 596px;
    height: 712px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
  }
  .about-tom-copy { max-width: 665px; }
  .about-tom-copy h2 { margin-bottom: 42px; }
  .about-tom-copy p { margin: 0 0 30px; }
  .about-tom-copy .credential { margin-top: 40px; margin-bottom: 34px; }
  .about-tom-copy .cta-button { margin-top: 24px; }

  /* Expertise field: fixed 657px master; typography deliberately bridges tint into white. */
  .expertise-section {
    height: 657px;
    min-height: 657px;
    padding-top: 58px;
    background: linear-gradient(to bottom, var(--pale) 0 59.5%, #fff 59.5% 100%);
    overflow: visible;
  }
  .expertise-list {
    width: min(1080px, 72vw);
    margin: 132px auto 0;
  }

  /* Closing homepage panel follows immediately and matches XD left/right architecture. */
  .home-cta {
    height: 657px;
    min-height: 657px;
    padding: 0 var(--page-pad);
  }
  .home-cta-inner {
    width: min(1500px, 100%);
    grid-template-columns: 1fr .78fr;
    gap: 115px;
    align-items: center;
  }
  .home-cta h2 {
    font-size: clamp(72px, 5.208vw, 100px);
    line-height: 1;
    max-width: 760px;
  }
  .home-cta-inner > div {
    width: min(100%, 520px);
    justify-self: start;
  }
  .home-cta p { margin-bottom: 36px; }

  /* About page dividers stop before the oversized end mark. */
  .about-columns article {
    position: relative;
    border-right: 0;
  }
  .about-columns article:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 620px;
    background: var(--line);
  }
  .about-columns { padding-bottom: 78px; }
  .about-outline { margin-top: 0; }

  /* Shared ROCHE end mark follows the same live width as the footer rule. */
  .about-outline,
  .contact-outline {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }
  .about-outline img,
  .contact-outline { max-width: none; }

  /* Footer: exact 12/25 rhythm, without additive paragraph margins. */
  .site-footer {
    padding-top: 60px;
    padding-bottom: 70px;
    font-size: 12px;
    line-height: 25px;
  }
  .footer-rule { margin-bottom: 48px; }
  .site-footer p,
  .site-footer .footer-strapline {
    margin: 0;
    line-height: 25px;
  }
}

@media (min-width: 701px) and (max-width: 1250px) {
  .home-hero-copy { left: 14vw; width: 76vw; }
  .home-hero-copy h1 { white-space: normal; }
  .about-tom { grid-template-columns: minmax(420px, 46vw) minmax(0, 1fr); gap: 7vw; }
  .about-tom > img { width: 100%; height: auto; aspect-ratio: 596 / 712; }
}

/* V10 — clean homepage sequencing and separated lower blocks */
@media (min-width: 701px) {
  /* Hero is two clear scroll moments over one sticky video:
     1) clean opening frame; 2) oversized ROCHE reveal. */
  .home-hero-shell {
    position: relative;
    height: 200svh;
    min-height: 1440px;
  }
  .home-hero-bg {
    position: sticky;
    top: 0;
    z-index: 0;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
  }
  .home-hero-content-layer {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
  }
  .home-hero-outline-stage {
    position: absolute;
    top: 100svh;
    left: 0;
    right: 0;
    z-index: 2;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
    pointer-events: none;
  }
  .home-hero-outline-stage .home-hero-outline {
    position: absolute;
    left: var(--page-pad);
    right: var(--page-pad);
    bottom: 0;
    width: calc(100% - (2 * var(--page-pad)));
    max-width: none;
    opacity: .92;
    transform: none;
  }
  .home-content {
    margin-top: 0;
  }

  /* Keep the opening hero faithful to the XD composition. */
  .home-hero-copy {
    left: clamp(258px, 18.4vw, 354px);
    top: clamp(300px, 31.5vh, 350px);
    width: min(1080px, 69vw);
    transform: none;
  }
  .home-hero-copy h1 {
    width: 100%;
    white-space: nowrap;
  }
  .home-hero-copy p {
    width: min(900px, 88%);
  }

  /* Services: odd rows sit right of the axis and read left-aligned;
     even rows sit left of the axis and read right-aligned. */
  .home-service.align-right .home-service-inner {
    margin-left: 50%;
    margin-right: 0;
    padding-left: 34px;
    padding-right: 0;
    text-align: left;
  }
  .home-service.align-left .home-service-inner {
    margin-right: 50%;
    margin-left: 0;
    padding-right: 34px;
    padding-left: 0;
    text-align: right;
  }
  .home-service.align-right h3,
  .home-service.align-right p { margin-left: 0; margin-right: auto; }
  .home-service.align-left h3,
  .home-service.align-left p { margin-left: auto; margin-right: 0; }

  /* Expertise is its own complete block. The pale panel is 657px high,
     while the typography is given enough white field below to finish cleanly. */
  .expertise-section {
    position: relative;
    isolation: isolate;
    height: auto;
    min-height: 980px;
    padding-top: 58px;
    padding-bottom: 120px;
    background: #fff;
    overflow: hidden;
  }
  .expertise-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 657px;
    background: var(--pale);
    z-index: -1;
  }
  .expertise-section .eyebrow {
    position: relative;
    z-index: 1;
  }
  .expertise-list {
    position: relative;
    z-index: 1;
    width: min(1080px, 72vw);
    margin: 132px auto 0;
  }

  /* CTA is a second, independent block. Nothing from Expertise can overlap it. */
  .home-cta {
    position: relative;
    z-index: 1;
    height: 657px;
    min-height: 657px;
    margin-top: 0;
    padding: 0 var(--page-pad);
    background: url('/assets/home-cta-bg.jpg') center/cover no-repeat;
    overflow: hidden;
  }
  .home-cta-inner {
    height: 100%;
    width: min(1500px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr .78fr;
    gap: 115px;
    align-items: center;
  }
  .home-cta h2 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(72px, 5.208vw, 100px);
    line-height: 1;
    text-align: left;
  }
  .home-cta-inner > div {
    width: min(100%, 520px);
    justify-self: start;
  }

  /* Contact page fixed frame proportions from the supplied XD. */
  .contact-label {
    top: 210px;
  }
  .contact-actions {
    top: 210px;
  }
  .contact-lines span {
    top: 132px;
  }
  .contact-title {
    transform: translateY(calc(104svh - (var(--contact-progress) * 154svh)));
  }
  .contact-copy {
    transform: translateY(calc(142svh - (var(--contact-progress) * 120svh)));
  }
  .contact-outline {
    transform: translateY(calc(166svh - (var(--contact-progress) * 110svh)));
  }
}

@media (min-width: 701px) and (max-width: 1250px) {
  .home-hero-copy h1 { white-space: normal; }
  .expertise-section { min-height: 880px; }
  .expertise-list { width: 76vw; }
}


/* V11 — 26 Aug final desktop review pass */
@media (min-width: 701px) {
  /* HOME HERO: the video remains the pinned stage for the entire opening sequence.
     Opening copy scrolls away, ROCHE begins entering immediately, then the white clarity panel
     scrolls over the still-pinned video. */
  .home-hero-shell {
    position: relative;
    height: 300svh;
    min-height: 2160px;
    background: transparent;
  }
  .home-hero-bg {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 720px;
    z-index: 0;
  }
  .home-hero-content-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100svh;
    min-height: 720px;
    z-index: 3;
  }
  .home-hero-outline-stage {
    position: absolute;
    top: 100svh;
    left: 0;
    right: 0;
    height: 100svh;
    min-height: 720px;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
  }
  .home-hero-outline-stage .home-hero-outline {
    position: absolute;
    top: 0;
    bottom: auto;
    left: var(--page-pad);
    width: calc(100% - (2 * var(--page-pad)));
    max-width: none;
    opacity: .9;
    transform: none;
  }
  .home-hero-clarity-stage {
    position: absolute;
    top: 200svh;
    left: 0;
    right: 0;
    z-index: 4;
    min-height: 100svh;
    height: 100svh;
    background: #fff;
    display: grid;
    place-items: center;
  }
  .home-hero-clarity-stage h2 {
    margin: 0;
    font-size: clamp(36px, 3.646vw, 70px);
    line-height: .929;
    font-weight: 600;
    letter-spacing: 0;
  }
  .home-content { margin-top: 0; }

  /* HOME SERVICES: one fixed centre spine. Odd items sit to the right but read left-aligned;
     even items sit to the left but read right-aligned. Rules span the full editorial measure. */
  .home-service-list {
    position: relative;
    margin-left: 10.5%;
    margin-right: 10.5%;
  }
  .home-service-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(174,185,200,.55);
    pointer-events: none;
  }
  .home-service {
    position: relative;
    min-height: 255px;
    padding: 46px 0;
    border-bottom: 1px solid var(--line);
  }
  .home-service:last-child { border-bottom: 0; }
  .home-service-inner { width: 50%; max-width: none; }
  .home-service.align-right .home-service-inner {
    margin-left: 50%;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }
  .home-service.align-left .home-service-inner {
    margin-left: 0;
    margin-right: 50%;
    padding-left: 0;
    padding-right: 0;
    text-align: right;
  }
  .home-service.align-right .service-no,
  .home-service.align-right h3,
  .home-service.align-right p {
    margin-left: 36px;
    margin-right: 0;
  }
  .home-service.align-left .service-no,
  .home-service.align-left h3,
  .home-service.align-left p {
    margin-left: auto;
    margin-right: 36px;
  }
  .home-service.align-left h3,
  .home-service.align-left p { max-width: 610px; }

  /* CONTACT: the load frame is sparse and fixed. CONTACT + CTA + email remain pinned.
     Headline, body copy and the oversized ROCHE move through that fixed architecture. */
  .contact-main {
    min-height: 300svh;
    overflow: visible;
  }
  .contact-stage {
    --contact-progress: 0;
    position: relative;
    height: 300svh;
    min-height: 2160px;
  }
  .contact-frame {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
  }
  .contact-frame .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
  }
  .contact-lines {
    position: absolute;
    inset: 0 var(--page-pad);
    height: 100%;
    z-index: 5;
    pointer-events: none;
  }
  .contact-lines span {
    top: 185px;
    bottom: 0;
    background: rgba(255,255,255,.42);
  }
  .contact-lines span:nth-child(1) { left: 24%; }
  .contact-lines span:nth-child(2) { left: 52%; }
  .contact-lines span:nth-child(3) { left: 80%; }
  .contact-label {
    top: 258px;
    left: var(--page-pad);
    width: 24%;
    padding: 0;
  }
  .contact-actions {
    top: 248px;
    right: var(--page-pad);
    width: 24%;
    max-width: 390px;
  }
  .contact-actions .email-link { margin-top: 42px; }

  /* Starts just below the viewport, then moves into the central column as soon as scrolling begins. */
  .contact-title {
    left: calc(var(--page-pad) + 24%);
    width: 56%;
    top: 0;
    padding-left: 18px;
    transform: translateY(calc(100svh - (var(--contact-progress) * 138svh)));
  }
  .contact-copy {
    left: calc(var(--page-pad) + 52%);
    width: 28%;
    top: 0;
    padding: 0 18px;
    transform: translateY(calc(145svh - (var(--contact-progress) * 116svh)));
  }
  .contact-outline {
    left: var(--page-pad);
    width: calc(100% - (2 * var(--page-pad)));
    top: 0;
    bottom: auto;
    padding: 0;
    transform: translateY(calc(160svh - (var(--contact-progress) * 96svh)));
    opacity: .86;
  }

  /* Keep the footer above the moving frame only after the contact sequence has completed. */
  .contact-page .site-footer { position: relative; z-index: 40; }
}


/* V12 — desktop motion/alignment corrections from XD review */
@media (min-width: 701px) {
  /* HOME HERO — ROCHE bridges the video/white-panel transition. */
  .home-hero-outline-stage {
    top: 165svh;
    height: 45svh;
    min-height: 0;
    z-index: 5;
  }
  .home-hero-outline-stage .home-hero-outline {
    top: 0;
    left: var(--page-pad);
    width: calc(100% - (2 * var(--page-pad)));
    height: auto;
  }
  .home-hero-clarity-stage {
    overflow: hidden;
    isolation: isolate;
  }
  .home-hero-outline-on-white {
    position: absolute;
    z-index: 1;
    top: -35svh;
    left: var(--page-pad);
    width: calc(100% - (2 * var(--page-pad)));
    max-width: none;
    height: auto;
    pointer-events: none;
  }
  .home-hero-clarity-stage h2 { position: relative; z-index: 2; }

  /* HOME SERVICES — invisible central axis only. No visible vertical divider. */
  .home-service-list::before { display: none !important; content: none !important; }
  .home-service-list {
    margin-left: 10.5%;
    margin-right: 10.5%;
  }
  .home-service-inner { width: 50%; }
  .home-service.align-right .home-service-inner {
    margin-left: 50%;
    margin-right: 0;
    text-align: left;
  }
  .home-service.align-left .home-service-inner {
    margin-left: 0;
    margin-right: 50%;
    text-align: right;
  }
  .home-service.align-right .service-no,
  .home-service.align-right h3,
  .home-service.align-right p {
    margin-left: 34px;
    margin-right: 0;
  }
  .home-service.align-left .service-no,
  .home-service.align-left h3,
  .home-service.align-left p {
    margin-left: auto;
    margin-right: 34px;
  }

  /* CONTACT — fixed architectural frame with sequenced moving content. */
  .contact-main { min-height: 300svh; overflow: visible; }
  .contact-stage { height: 300svh; min-height: 2160px; }
  .contact-frame {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
  }
  .contact-lines span:nth-child(1) { left: 20%; }
  .contact-lines span:nth-child(2) { left: 47%; }
  .contact-lines span:nth-child(3) { left: 74%; }
  .contact-label {
    top: 258px;
    left: var(--page-pad);
    width: 20%;
  }
  .contact-actions {
    top: 250px;
    right: calc(var(--page-pad) + 3%);
    width: 23%;
    max-width: 390px;
  }
  .contact-title {
    left: calc(var(--page-pad) + 20%);
    width: 54%;
    top: 0;
    padding-left: 18px;
    transform: translateY(calc(108svh - (var(--contact-progress) * 180svh)));
  }
  .contact-copy {
    left: calc(var(--page-pad) + 44%);
    width: 22%;
    top: 0;
    padding: 0 18px;
    transform: translateY(calc(150svh - (var(--contact-progress) * 125svh)));
  }
  .contact-outline {
    left: var(--page-pad);
    width: calc(100% - (2 * var(--page-pad)));
    top: 0;
    bottom: auto;
    transform: translateY(calc(145svh - (var(--contact-progress) * 105svh)));
    opacity: .86;
  }
}

/* V13 — XD fidelity pass: contact line sequencing + latest home spacing corrections */
@media (min-width: 701px) {
  /* HOME HERO: bring the outlined ROCHE into the scroll much earlier. */
  .home-hero-outline-stage {
    top: 126svh;
    height: 74svh;
    min-height: 0;
    overflow: visible;
  }
  .home-hero-outline-stage .home-hero-outline {
    top: 0;
    left: var(--page-pad);
    width: calc(100% - (2 * var(--page-pad)));
  }
  .home-hero-outline-on-white {
    top: -39svh;
  }

  /* EXPERTISE: Revenue Intelligence remains on the pale panel; finish the list in white,
     then leave a deliberate white field before the CTA block. */
  .expertise-section {
    min-height: 1120px;
    padding-bottom: 190px;
  }
  .expertise-section::before {
    height: 730px;
  }
  .expertise-list {
    margin-top: 145px;
  }

  /* HOME CTA: match the XD's asymmetric left statement / right action composition. */
  .home-cta {
    height: 657px;
    min-height: 657px;
    padding: 0 var(--page-pad);
  }
  .home-cta-inner {
    width: min(1500px, 100%);
    grid-template-columns: 1fr .72fr;
    gap: 145px;
    align-items: center;
  }
  .home-cta h2 {
    max-width: 560px;
    font-size: clamp(72px, 5.208vw, 100px);
    line-height: 1.02;
  }
  .home-cta-inner > div {
    width: min(100%, 520px);
    align-self: center;
  }
  .home-cta p {
    font-size: 25px;
    line-height: 38px;
    margin: 0 0 36px;
  }
  .home-cta .cta-button {
    width: 100%;
    min-height: 102px;
  }
  .home-cta .email-link {
    font-size: 25px;
    line-height: 38px;
    margin-top: 34px;
  }

  /* CONTACT: the XD has only the left and right architectural rules on load.
     The centre rule belongs to the scroll sequence and appears later, beginning beneath the copy. */
  .contact-lines span:nth-child(1),
  .contact-lines span:nth-child(3) {
    top: 185px;
    opacity: 1;
  }
  .contact-lines span:nth-child(2) {
    top: 66svh;
    bottom: 0;
    opacity: clamp(0, calc((var(--contact-progress) - 0.50) * 8), 1);
    transform: translateY(clamp(0px, calc((0.56 - var(--contact-progress)) * 120px), 120px));
  }
  .contact-label {
    top: 258px;
  }
  .contact-actions {
    top: 250px;
  }
  .contact-title {
    transform: translateY(calc(108svh - (var(--contact-progress) * 180svh)));
  }
  .contact-copy {
    transform: translateY(calc(150svh - (var(--contact-progress) * 125svh)));
  }
  .contact-outline {
    transform: translateY(calc(145svh - (var(--contact-progress) * 105svh)));
  }
}

/* v15 — Homepage Expertise: lock to XD desktop composition */
@media (min-width: 1000px) {
  .home-page .expertise-section {
    position: relative;
    min-height: 1120px;
    padding-top: 58px;
    padding-bottom: 190px;
    background: #fff;
    overflow: hidden;
  }

  .home-page .expertise-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 657px;
    background: var(--pale);
    z-index: -1;
  }

  .home-page .expertise-section .eyebrow {
    position: relative;
    z-index: 1;
    max-width: var(--content-max);
    margin: 0 auto;
  }

  .home-page .expertise-list {
    position: relative;
    z-index: 1;
    width: min(1080px, 72vw);
    margin: 178px auto 0;
  }

  .home-page .expertise-list span {
    font-size: clamp(58px, 3.65vw, 70px);
    line-height: .79;
    font-weight: 100;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

/* v16 — HOME closing CTA: match the supplied XD geometry exactly on desktop */
@media (min-width: 1000px) {
  .home-page .home-cta {
    height: 657px;
    min-height: 657px;
    padding: 0;
    margin: 0;
    background: url('/assets/home-cta-bg.jpg') center center / cover no-repeat;
    overflow: hidden;
  }

  .home-page .home-cta-inner {
    height: 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 8.3vw 0 11.1vw;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 560px;
    column-gap: 7.8vw;
    align-items: center;
  }

  .home-page .home-cta h2 {
    width: 520px;
    max-width: 520px;
    margin: 0;
    font-family: var(--display-font);
    font-size: clamp(78px, 5.2vw, 100px);
    line-height: 1.06;
    font-weight: 100;
    letter-spacing: 0;
    text-align: left;
    justify-self: start;
  }

  .home-page .home-cta-inner > div {
    width: 560px;
    max-width: 560px;
    margin: 0;
    justify-self: start;
    align-self: center;
  }

  .home-page .home-cta p {
    width: 560px;
    max-width: 560px;
    margin: 0 0 46px 0;
    font-size: 25px;
    line-height: 1.52;
    font-weight: 600;
    letter-spacing: 0;
  }

  .home-page .home-cta .cta-button {
    width: 560px;
    height: 110px;
    min-height: 110px;
    box-sizing: border-box;
    padding: 0 72px;
    font-size: 16px;
    letter-spacing: .04em;
  }

  .home-page .home-cta .email-link {
    display: inline-block;
    margin-top: 42px;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 600;
  }
}

/* V17 — Home closing CTA matched directly to XD desktop composition */
@media (min-width: 701px) {
  .home-cta {
    position: relative;
    display: block;
    height: 657px;
    min-height: 657px;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    background-position: center center;
  }

  .home-cta-inner {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .home-cta h2 {
    position: absolute;
    top: 165px;
    left: 50%;
    width: max-content;
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
    font-family: var(--display-font);
    font-size: 80px;
    line-height: 70px;
    font-weight: 100;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }

  .home-cta-inner > div {
    position: absolute;
    top: 324px;
    left: 55.1%;
    width: 520px;
    max-width: 520px;
    margin: 0;
    justify-self: auto;
  }

  .home-cta p {
    width: 520px;
    max-width: 520px;
    margin: 0 0 34px;
    font-size: 25px;
    line-height: 38px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .home-cta .cta-button {
    width: 390px;
    min-height: 96px;
  }

  .home-cta .email-link {
    margin-top: 34px;
    font-size: 25px;
    line-height: 38px;
    font-weight: 600;
  }
}

@media (min-width: 701px) and (max-width: 1450px) {
  .home-cta h2 {
    font-size: clamp(56px, 4.167vw, 80px);
    line-height: .875;
  }
  .home-cta-inner > div {
    left: 55%;
    width: min(42vw, 520px);
  }
  .home-cta p {
    width: 100%;
    font-size: clamp(18px, 1.3vw, 25px);
    line-height: 1.52;
  }
}

@media (max-width: 700px) {
  .home-cta h2 {
    white-space: normal;
  }
}


/* V18 — Home closing CTA, locked to the supplied XD desktop artboard */
@media (min-width: 1000px) {
  .home-page .home-cta {
    position: relative;
    display: block;
    height: 886px;
    min-height: 886px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: url('/assets/home-cta-bg.jpg') center center / cover no-repeat;
  }

  .home-page .home-cta-inner {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: 886px;
    margin: 0;
    padding: 0;
  }

  /* XD: one 80px line centred across the full banner, not within either column */
  .home-page .home-cta h2 {
    position: absolute;
    top: 238px;
    left: 50%;
    width: max-content;
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
    font-family: var(--display-font);
    font-size: 80px;
    line-height: 70px;
    font-weight: 100;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }

  /* XD: action column begins just to the right of centre, below the centred headline */
  .home-page .home-cta-inner > div {
    position: absolute;
    top: 414px;
    left: 50%;
    width: 560px;
    max-width: 560px;
    margin: 0;
  }

  .home-page .home-cta p {
    width: 560px;
    max-width: 560px;
    margin: 0 0 50px 0;
    font-size: 25px;
    line-height: 38px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .home-page .home-cta .cta-button {
    width: 390px;
    height: 96px;
    min-height: 96px;
    box-sizing: border-box;
    padding: 0 54px;
    font-size: 16px;
    letter-spacing: .04em;
  }

  .home-page .home-cta .email-link {
    display: inline-block;
    margin-top: 42px;
    font-size: 25px;
    line-height: 38px;
    font-weight: 600;
  }
}


/* v19 — Expertise spacing and vertical placement matched to latest XD */
@media (min-width: 1000px) {
  .home-page .expertise-section {
    position: relative;
    min-height: 0;
    height: auto;
    padding-top: 145px;
    padding-bottom: 0;
    background: #fff;
    overflow: visible;
  }

  .home-page .expertise-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 520px;
    background: var(--pale);
    z-index: 0;
  }

  .home-page .expertise-section .eyebrow {
    position: relative;
    z-index: 1;
    max-width: var(--content-max);
    margin: 0 auto;
  }

  .home-page .expertise-list {
    position: relative;
    z-index: 1;
    width: min(1080px, 72vw);
    margin: 108px auto 313px;
  }

  .home-page .expertise-list span {
    font-size: clamp(58px, 3.65vw, 70px);
    line-height: .79;
    font-weight: 100;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

/* V20 — final pre-contact desktop refinements from XD */
@media (min-width: 1000px) {
  /* HOME HERO: outlined ROCHE finishes flush on the white clarity-panel edge. */
  .home-page .home-hero-outline-stage {
    top: 100svh;
    height: 100svh;
    min-height: 720px;
    overflow: visible;
  }
  .home-page .home-hero-outline-stage .home-hero-outline {
    top: auto;
    bottom: 0;
    left: var(--page-pad);
    width: calc(100% - (2 * var(--page-pad)));
    max-width: none;
    height: auto;
    transform: none;
  }
  /* Avoid a duplicate offset outline in the white panel: the white edge itself is the datum. */
  .home-page .home-hero-outline-on-white {
    display: none;
  }

  /* ABOUT: XD vertical rules overshoot the headings and continue down through the content field. */
  .about-page .about-columns {
    position: relative;
    overflow: visible;
  }
  .about-page .about-columns article {
    position: relative;
    border-right: 0;
  }
  .about-page .about-columns article:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -120px;
    right: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
    pointer-events: none;
  }
  .about-page .about-columns article > * {
    position: relative;
    z-index: 1;
  }
}

/* V21 — Home hero ROCHE timing/edge alignment from XD */
@media (min-width: 701px) {
  /* The outline enters shortly after the CTA and lands exactly on the
     white Commercial Clarity panel edge at 200svh. */
  .home-hero-outline-stage {
    top: 150svh;
    height: 50svh;
    min-height: 0;
    overflow: visible;
  }

  .home-hero-outline-stage .home-hero-outline {
    top: auto;
    bottom: 0;
    left: var(--page-pad);
    right: var(--page-pad);
    width: calc(100% - (2 * var(--page-pad)));
    max-width: none;
    height: auto;
    transform: none;
  }
}

/* V22 — Home hero: tighten CTA-to-ROCHE transition to match XD */
@media (min-width: 701px) {
  /* Start the outline much earlier in the hero scroll. It still finishes
     exactly on the white clarity-panel boundary at 200svh. */
  .home-page .home-hero-outline-stage {
    top: 112svh;
    height: 88svh;
    min-height: 0;
    overflow: visible;
  }

  .home-page .home-hero-outline-stage .home-hero-outline {
    top: auto;
    bottom: 0;
    left: var(--page-pad);
    right: var(--page-pad);
    width: calc(100% - (2 * var(--page-pad)));
    max-width: none;
    height: auto;
    transform: none;
  }
}

/* V23 — HOME hero transition rebuilt from XD geometry.
   The previous versions only moved the stage start while keeping the logo
   pinned to the 200svh boundary, so the visible timing barely changed.
   Here the logo itself starts at 112svh and the white clarity panel begins
   immediately after the rendered ROCHE mark. */
@media (min-width: 701px) {
  .home-page .home-hero-shell {
    /* 112svh lead-in + ~21.5vw ROCHE mark + 100svh clarity panel */
    height: calc(212svh + 21.5vw);
    min-height: 0;
  }

  .home-page .home-hero-outline-stage {
    top: 112svh;
    height: 21.5vw;
    min-height: 0;
    overflow: visible;
    z-index: 5;
  }

  .home-page .home-hero-outline-stage .home-hero-outline {
    top: 0;
    bottom: auto;
    left: var(--page-pad);
    right: var(--page-pad);
    width: calc(100% - (2 * var(--page-pad)));
    max-width: none;
    height: auto;
    transform: none;
    opacity: .92;
  }

  .home-page .home-hero-clarity-stage {
    top: calc(112svh + 21.5vw - 1px);
    height: 100svh;
    min-height: 720px;
    z-index: 6;
  }

  .home-page .home-hero-outline-on-white {
    display: none;
  }
}


/* V24 — micro-adjustment: outlined ROCHE should kiss the white panel edge on the home hero. */
@media (min-width: 701px) {
  .home-page {
    --home-roche-outline-height: calc(((100vw - (2 * var(--page-pad))) * 0.21493) + 2px);
  }

  .home-page .home-hero-shell {
    height: calc(212svh + var(--home-roche-outline-height));
  }

  .home-page .home-hero-outline-stage {
    top: 112svh;
    height: var(--home-roche-outline-height);
  }

  .home-page .home-hero-clarity-stage {
    top: calc(112svh + var(--home-roche-outline-height) - 1px);
  }
}

/* V25 — remove the hairline between the home clarity panel and Services. */
.home-page .home-content {
  box-shadow: 0 -2px 0 #fff;
}
.home-page .home-services {
  border-top: 0 !important;
  outline: 0 !important;
}

/* V26 — Homepage Expertise matched to XD: 80px type and deeper pale panel */
@media (min-width: 1000px) {
  .home-page .expertise-section::before {
    height: 590px;
  }

  .home-page .expertise-list span {
    font-size: 80px;
    line-height: 70px;
    font-weight: 100;
    letter-spacing: 0;
  }
}

/* V27 — CONTACT desktop choreography rebuilt from the XD motion states. */
@media (min-width: 1000px) {
  .contact-page .contact-main {
    min-height: 300svh;
    overflow: visible;
  }

  .contact-page .contact-stage {
    --contact-progress: 0;
    position: relative;
    height: 300svh;
    min-height: 2160px;
  }

  /* Everything architectural stays pinned while the three content layers move. */
  .contact-page .contact-frame {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
  }

  .contact-page .contact-frame .site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 40;
  }

  /* XD grid: left/right rules are present from the opening frame. */
  .contact-page .contact-lines {
    position: absolute;
    inset: 0 var(--page-pad);
    height: 100%;
    z-index: 5;
    pointer-events: none;
  }
  .contact-page .contact-lines span {
    position: absolute;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,.43);
  }
  .contact-page .contact-lines span:nth-child(1) {
    left: 20%;
    top: 0;
    opacity: 1;
  }
  .contact-page .contact-lines span:nth-child(3) {
    left: 74%;
    top: 0;
    opacity: 1;
  }

  /* The centre rule is part of the scroll reveal, not the load frame. */
  .contact-page .contact-lines span:nth-child(2) {
    left: 47%;
    top: clamp(0px, calc((1 - var(--contact-progress)) * 96svh), 96svh);
    opacity: clamp(0, calc((var(--contact-progress) - .20) * 8), 1);
  }

  .contact-page .contact-label {
    position: absolute;
    z-index: 10;
    left: var(--page-pad);
    top: 258px;
    width: 20%;
    padding: 0;
    font-size: 25px;
    line-height: 38px;
    font-weight: 600;
  }

  .contact-page .contact-actions {
    position: absolute;
    z-index: 20;
    top: 250px;
    right: calc(var(--page-pad) + 3%);
    width: 23%;
    max-width: 390px;
    pointer-events: auto;
  }
  .contact-page .contact-actions .cta-button { width: 100%; }
  .contact-page .contact-actions .email-link { margin-top: 42px; }

  /* STATE 1: headline is already visible, low in the centre-left column. */
  .contact-page .contact-title {
    position: absolute;
    z-index: 12;
    left: calc(var(--page-pad) + 20%);
    top: 0;
    width: 54%;
    padding-left: 18px;
    transform: translateY(calc(67svh - (var(--contact-progress) * 112svh)));
    will-change: transform;
  }
  .contact-page .contact-title h1 {
    margin: 0;
    font-size: clamp(64px, 4.167vw, 80px);
    line-height: .92;
    font-weight: 500;
    letter-spacing: 0;
  }

  /* STATE 2: body copy rises into the central/right column after the title. */
  .contact-page .contact-copy {
    position: absolute;
    z-index: 12;
    left: calc(var(--page-pad) + 44%);
    top: 0;
    width: 22%;
    padding: 0 18px;
    font-size: 18px;
    line-height: 28px;
    transform: translateY(calc(125svh - (var(--contact-progress) * 101svh)));
    will-change: transform;
  }
  .contact-page .contact-copy p { margin: 0; }

  /* STATE 3: ROCHE rises last and lands on the white/footer boundary. */
  .contact-page .contact-outline {
    position: absolute;
    z-index: 8;
    left: var(--page-pad);
    bottom: -1px;
    top: auto;
    width: calc(100% - (2 * var(--page-pad)));
    max-width: none;
    height: auto;
    opacity: .86;
    transform: translateY(calc((1 - var(--contact-progress)) * 105svh));
    will-change: transform;
    pointer-events: none;
  }

  .contact-page .site-footer {
    position: relative;
    z-index: 50;
  }
}

/* V28 — Contact page alignment pass from latest XD/video notes */
@media (min-width: 1000px) {
  .contact-page .contact-frame {
    --contact-line-top: 166px;
    --contact-line-cut: clamp(0px, calc((var(--contact-progress) - .62) * 140svh), 52svh);
  }

  /* The structural rules begin below the sticky header and shorten late so they never sit over the outlined ROCHE mark. */
  .contact-page .contact-lines {
    inset: 0 var(--page-pad);
  }

  .contact-page .contact-lines span {
    top: var(--contact-line-top) !important;
    bottom: var(--contact-line-cut);
  }

  .contact-page .contact-lines span:nth-child(1) {
    left: 19.6%;
  }

  .contact-page .contact-lines span:nth-child(2) {
    left: 42.2%;
    top: clamp(var(--contact-line-top), calc((1 - var(--contact-progress)) * 88svh), 88svh) !important;
  }

  .contact-page .contact-lines span:nth-child(3) {
    left: 65.0%;
  }

  /* Bring the right-hand CTA block and the body copy slightly left to match the XD columns. */
  .contact-page .contact-actions {
    top: 223px;
    left: calc(var(--page-pad) + ((100% - (2 * var(--page-pad))) * 0.672));
    right: auto;
    width: min(390px, calc((100% - (2 * var(--page-pad))) * 0.215));
    max-width: 390px;
  }

  .contact-page .contact-actions .email-link {
    margin-top: 38px;
  }

  .contact-page .contact-copy {
    left: calc(var(--page-pad) + ((100% - (2 * var(--page-pad))) * 0.433));
    width: min(330px, calc((100% - (2 * var(--page-pad))) * 0.205));
    padding-left: 14px;
    padding-right: 10px;
  }
}

/* V29 — email links 18px on Contact and Home CTA */
@media (min-width: 701px) {
  .contact-page .email-link,
  .home-page .home-cta .email-link {
    font-size: 18px;
    line-height: 28px;
  }
}

/* V30 — Homepage clarity panel: slightly tighter white space above/below heading. */
@media (min-width: 701px) {
  .home-page .home-hero-shell {
    height: calc(200svh + var(--home-roche-outline-height));
  }

  .home-page .home-hero-clarity-stage {
    height: 88svh;
    min-height: 640px;
  }
}

/* V32 — Contact opening state: large headline begins high in the viewport by default. */
@media (min-width: 1000px) {
  .contact-page .contact-title {
    transform: translateY(calc(25svh - (var(--contact-progress) * 70svh)));
  }
}

/* V33 — Contact page: lock the new opening and final scroll states. */
@media (min-width: 1000px) {
  /* Opening frame: headline sits high immediately, matching the new XD state. */
  .contact-page .contact-title {
    transform: translateY(calc(23svh - (var(--contact-progress) * 68svh)));
  }

  /* The short centre rule is visible in the lower half on load, then rises with the scroll. */
  .contact-page .contact-lines span:nth-child(2) {
    top: clamp(var(--contact-line-top), calc((1 - var(--contact-progress)) * 58svh), 58svh) !important;
    opacity: 1;
  }

  /* Final frame: body copy settles higher above the outlined ROCHE. */
  .contact-page .contact-copy {
    transform: translateY(calc(122svh - (var(--contact-progress) * 110svh)));
  }
}

/* V34 — Contact opening frame: align CONTACT, headline and CTA to one top axis. */
@media (min-width: 1000px) {
  .contact-page .contact-frame {
    --contact-content-top: 205px;
  }

  .contact-page .contact-label {
    top: var(--contact-content-top);
  }

  .contact-page .contact-actions {
    top: var(--contact-content-top);
  }

  .contact-page .contact-title {
    transform: translateY(calc(var(--contact-content-top) - (var(--contact-progress) * 68svh)));
  }
}

/* V35 — Contact page: tighten the vertical breathing room between the upper content and the lower reveal. */
@media (min-width: 1000px) {
  .contact-page .contact-copy {
    transform: translateY(calc(116svh - (var(--contact-progress) * 106svh)));
  }

  .contact-page .contact-outline {
    transform: translateY(calc((1 - var(--contact-progress)) * 98svh));
  }

  .contact-page .contact-lines span:nth-child(2) {
    top: clamp(var(--contact-line-top), calc((1 - var(--contact-progress)) * 54svh), 54svh) !important;
  }
}

/* V36 — MOBILE HOMEPAGE FIRST LOOK. 402px XD master; desktop remains untouched. */
.hero-intro-mobile { display: none; }

@media (max-width: 700px) {
  :root { --page-pad: 16px; }

  .home-page .site-header {
    height: 76px;
    padding: 16px 20px 0;
  }
  .home-page .brand img { width: 96px; }
  .home-page .menu-toggle { width: 31px; padding: 0; margin-top: 1px; }
  .home-page .menu-toggle span { height: 2px; margin: 7px 0; }

  /* Mobile hero is a bespoke 402px composition, not a compressed desktop stage. */
  .home-page .home-hero-shell {
    position: relative;
    height: auto;
    min-height: 0;
    background: transparent;
  }
  .home-page .home-hero-bg {
    position: absolute;
    inset: 0 0 auto 0;
    height: 872px;
    min-height: 872px;
    overflow: hidden;
    z-index: 0;
  }
  .home-page .home-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 59% center;
  }
  .home-page .home-hero-overlay { background: rgba(10,24,42,.24); }
  .home-page .home-hero-content-layer {
    position: relative;
    inset: auto;
    height: 872px;
    min-height: 872px;
    overflow: hidden;
    z-index: 2;
    color: #fff;
  }
  .home-page .home-hero-copy {
    position: absolute;
    left: 57px;
    top: 268px;
    width: 309px;
    transform: none;
    color: #fff;
  }
  .home-page .home-hero-copy h1 {
    width: 309px;
    margin: 0 0 42px;
    font-size: 35px;
    line-height: 35px;
    font-weight: 500;
    color: #fff;
    white-space: normal;
  }
  .home-page .home-hero-copy h1 br {
    content: "";
    display: block;
    margin-bottom: 27px;
  }
  .home-page .hero-intro-desktop { display: none; }
  .home-page .hero-intro-mobile {
    display: block;
    width: 310px;
    margin: 0 0 46px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    color: #fff;
  }
  .home-page .home-hero-copy .cta-button {
    width: 362px;
    height: 64px;
    min-height: 64px;
    margin-left: -41px;
    border: 1px solid var(--navy);
    background: #fff;
    color: var(--navy);
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    justify-content: center;
    gap: 28px;
  }
  .home-page .home-hero-outline-stage { display: none; }

  /* Commercial clarity block */
  .home-page .home-hero-clarity-stage {
    position: relative;
    inset: auto;
    top: auto;
    height: 330px;
    min-height: 330px;
    padding: 0 20px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .home-page .home-hero-clarity-stage h2 {
    margin: 0;
    font-size: 35px;
    line-height: 35px;
    font-weight: 500;
    text-align: center;
    color: var(--navy);
  }
  .home-page .home-hero-outline-on-white { display: none; }
  .home-page .home-content { margin-top: 0; }

  /* Services */
  .home-page .home-services {
    max-width: none;
    margin: 0;
    padding: 40px 20px 82px;
  }
  .home-page .home-services > .eyebrow {
    margin: 0 0 56px;
    font-size: 10px;
    line-height: 16px;
    font-weight: 600;
  }
  .home-page .home-service-list { margin: 0; }
  .home-page .home-service,
  .home-page .home-service.align-left,
  .home-page .home-service.align-right {
    min-height: 0;
    display: block;
    padding: 0 5px 51px 35px;
    margin: 0 0 51px;
    border-bottom: 1px solid var(--line);
  }
  .home-page .home-service:last-child { margin-bottom: 0; border-bottom: 0 !important; padding-bottom: 0; }
  .home-page .home-service-inner,
  .home-page .home-service.align-right .home-service-inner,
  .home-page .home-service.align-left .home-service-inner {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  .home-page .home-service .service-no {
    display: block;
    margin: 0 0 23px;
    font-size: 58px;
    line-height: 58px;
    font-weight: 100;
  }
  .home-page .home-service h3 {
    max-width: 300px;
    margin: 0 0 23px;
    font-size: 17px;
    line-height: 20px;
    font-weight: 600;
  }
  .home-page .home-service p {
    max-width: 300px;
    margin: 0;
    font-size: 12px;
    line-height: 19px;
    font-weight: 400;
  }
  .home-page .home-service-cta { padding: 16px 0 0; }
  .home-page .home-service-cta .cta-button {
    width: 100%;
    height: 58px;
    min-height: 58px;
    font-size: 10px;
    background: #fff;
  }

  /* About Tom: mobile XD order is title, portrait, copy, credential, CTA. */
  .home-page .about-tom {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 60px 20px 84px;
  }
  .home-page .about-tom-copy { display: contents; }
  .home-page .about-tom-copy h2 {
    order: 1;
    align-self: center;
    margin: 0 0 56px;
    font-size: 52px;
    line-height: 52px;
    font-weight: 100;
    text-align: center;
  }
  .home-page .about-tom > img {
    order: 2;
    width: 310px;
    height: 328px;
    max-width: calc(100vw - 40px);
    margin: 0 auto 58px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
    filter: grayscale(1);
  }
  .home-page .about-tom-copy p {
    order: 3;
    width: 310px;
    max-width: calc(100vw - 72px);
    margin: 0 auto 28px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
  }
  .home-page .about-tom-copy p:nth-of-type(2) { order: 4; }
  .home-page .about-tom-copy .credential {
    order: 5;
    width: 310px;
    margin: 4px auto 34px;
    font-size: 12px !important;
    line-height: 18px !important;
  }
  .home-page .about-tom-copy .cta-button {
    order: 6;
    width: 310px;
    height: 58px;
    min-height: 58px;
    margin: 0 auto;
    font-size: 10px;
  }

  /* Expertise */
  .home-page .expertise-section {
    position: relative;
    min-height: 0;
    height: auto;
    padding: 54px 20px 74px;
    background: var(--pale);
    overflow: hidden;
  }
  .home-page .expertise-section::before { display: none; }
  .home-page .expertise-section .eyebrow {
    margin: 0 0 48px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
  }
  .home-page .expertise-list {
    width: 302px;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 27px;
  }
  .home-page .expertise-list span {
    display: block;
    font-size: 45px;
    line-height: 39px;
    font-weight: 100;
    white-space: normal;
  }

  /* Closing mobile CTA */
  .home-page .home-cta {
    position: relative;
    min-height: 720px;
    height: 720px;
    padding: 0 16px;
    background: url('/assets/home-cta-bg.jpg') center center / cover no-repeat;
    display: block;
  }
  .home-page .home-cta-inner {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
  }
  .home-page .home-cta h2 {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    max-width: 300px;
    margin: 0;
    font-size: 56px;
    line-height: 52px;
    font-weight: 100;
    text-align: center;
  }
  .home-page .home-cta-inner > div {
    position: absolute;
    top: 340px;
    left: 16px;
    right: 16px;
    width: auto;
    margin: 0;
  }
  .home-page .home-cta p {
    width: 310px;
    max-width: calc(100vw - 72px);
    margin: 0 auto 56px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    text-align: center;
  }
  .home-page .home-cta .cta-button {
    width: 100%;
    height: 64px;
    min-height: 64px;
    background: #fff;
    color: var(--navy);
    border-color: var(--navy);
    font-size: 14px;
  }
  .home-page .home-cta .email-link {
    margin-top: 44px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
  }

  .home-page .site-footer {
    padding: 40px 20px 46px;
    font-size: 8px;
    line-height: 13px;
  }
  .home-page .footer-rule { margin-bottom: 30px; }
}

/* V37 — Mobile closing CTA matched more closely to the 402px XD artboard */
@media (max-width: 700px) {
  .home-page .home-cta {
    min-height: 960px;
    height: 960px;
    padding: 0 16px;
  }

  .home-page .home-cta h2 {
    top: 112px;
    width: 310px;
    max-width: 310px;
    font-family: var(--display-font);
    font-size: 45px;
    line-height: 52px;
    font-weight: 100;
    letter-spacing: 0;
  }

  .home-page .home-cta-inner > div {
    top: 500px;
    left: 16px;
    right: 16px;
  }

  .home-page .home-cta p {
    width: 315px;
    max-width: calc(100vw - 56px);
    margin: 0 auto 74px;
    font-family: var(--body-font);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .home-page .home-cta .cta-button {
    height: 66px;
    min-height: 66px;
    font-family: var(--body-font);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .home-page .home-cta .email-link {
    margin-top: 62px;
    font-family: var(--body-font);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0;
  }
}


/* V38 — Mobile About Tom image uses the full 20px page gutter. */
@media (max-width: 700px) {
  .home-page .about-tom > img {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 310 / 328;
    object-fit: cover;
    object-position: center center;
    margin-left: 0;
    margin-right: 0;
  }
}

/* V39 — Mobile homepage service typography matched to XD at 402px */
@media (max-width: 767px) {
  .home-page .home-service .service-no {
    font-family: var(--display-font);
    font-size: 70px;
    line-height: 106px;
    font-weight: 100;
    letter-spacing: 0;
    margin: 0 0 12px;
  }

  .home-page .home-service h3 {
    max-width: 320px;
    margin: 0 0 24px;
    font-family: var(--body-font);
    font-size: 25px;
    line-height: 38px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .home-page .home-service p {
    max-width: 315px;
    margin: 0;
    font-family: var(--body-font);
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .home-page .home-service,
  .home-page .home-service.align-left,
  .home-page .home-service.align-right {
    padding-left: 35px;
    padding-right: 5px;
    padding-bottom: 58px;
    margin-bottom: 58px;
  }
}

/* V40 — All CTA button typography standardised to XD */
.cta-button,
.home-page .home-hero-copy .cta-button,
.home-page .home-service-cta .cta-button,
.home-page .about-tom-copy .cta-button,
.home-page .home-cta .cta-button,
.contact-page .contact-actions .cta-button,
.services-page .cta-button,
.about-page .cta-button {
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: .04em;
}

/* V41 — Mobile closing CTA: match the XD composition at 402px */
@media (max-width: 700px) {
  .home-page .home-cta {
    min-height: 1035px;
    height: 1035px;
    padding: 0 20px;
  }

  .home-page .home-cta h2 {
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: 322px;
    max-width: calc(100vw - 40px);
    margin: 0;
    font-family: var(--display-font);
    font-size: 45px;
    line-height: 52px;
    font-weight: 100;
    letter-spacing: 0;
    text-align: center;
  }

  .home-page .home-cta-inner > div {
    top: 505px;
    left: 20px;
    right: 20px;
  }

  .home-page .home-cta p {
    width: 315px;
    max-width: calc(100vw - 50px);
    margin: 0 auto 66px;
    font-family: var(--body-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
  }

  .home-page .home-cta .cta-button {
    width: 100%;
    height: 66px;
    min-height: 66px;
  }

  .home-page .home-cta .email-link {
    margin-top: 58px;
    font-family: var(--body-font);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0;
  }
}

/* V42 — mobile homepage section labels: Services matches Expertise exactly */
@media (max-width: 767px) {
  .home-page .home-services > .eyebrow,
  .home-page .expertise-section .eyebrow {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
  }
}

/* V43 — Mobile homepage hero spacing matched to XD landing composition */
.home-page .home-hero-copy h1 > span { display: inline; }

@media (max-width: 700px) {
  .home-page .home-hero-copy {
    top: 270px;
  }

  .home-page .home-hero-copy h1 {
    margin: 0 0 50px;
  }

  .home-page .home-hero-copy h1 > span {
    display: block;
    margin: 0 0 33px;
  }

  .home-page .home-hero-copy h1 > span:last-child {
    margin-bottom: 0;
  }

  .home-page .home-hero-copy h1 br {
    display: initial;
    margin: 0;
  }

  .home-page .hero-intro-mobile {
    margin-bottom: 50px;
  }
}


/* V46 — Mobile buttons use the XD 20px page gutter left and right. */
@media (max-width: 700px) {
  .cta-button,
  .home-page .home-hero-copy .cta-button,
  .home-page .home-service-cta .cta-button,
  .home-page .about-tom-copy .cta-button,
  .home-page .home-cta .cta-button,
  .contact-page .contact-actions .cta-button,
  .services-page .cta-button,
  .about-page .cta-button {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    display: flex;
  }
}


/* V47 — Mobile closing CTA matched to XD typography and vertical composition. */
@media (max-width: 700px) {
  .home-page .home-cta {
    min-height: 1035px;
    height: 1035px;
    padding: 0 20px;
  }

  .home-page .home-cta h2 {
    top: 112px;
    left: 50%;
    transform: translateX(-50%);
    width: 362px;
    max-width: calc(100vw - 40px);
    margin: 0;
    font-family: var(--display-font);
    font-size: 65px;
    line-height: 65px;
    font-weight: 100;
    letter-spacing: -0.05em;
    text-align: center;
  }

  .home-page .home-cta-inner > div {
    top: 575px;
    left: 20px;
    right: 20px;
    width: auto;
  }

  .home-page .home-cta p {
    width: 362px;
    max-width: calc(100vw - 40px);
    margin: 0 auto 68px;
    font-family: var(--body-font);
    font-size: 25px;
    line-height: 38px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
  }

  .home-page .home-cta .cta-button {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    height: 66px;
    min-height: 66px;
  }

  .home-page .home-cta .email-link {
    margin-top: 58px;
    font-family: var(--body-font);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0;
  }
}

/* V48 — Mobile closing panel is exactly one viewport high, as per XD. */
@media (max-width: 700px) {
  .home-page .home-cta {
    height: 100svh !important;
    min-height: 0 !important;
    max-height: 100svh;
    padding: 0 20px;
    overflow: hidden;
  }

  .home-page .home-cta h2 {
    top: 10.5svh;
  }

  .home-page .home-cta-inner > div {
    top: 49svh;
    bottom: auto;
  }

  .home-page .home-cta p {
    margin-bottom: 5.5svh;
  }

  .home-page .home-cta .email-link {
    margin-top: 4.5svh;
  }
}

/* V49 — Mobile closing CTA: match XD proportions and centre CTA inside 20px gutters. */
@media (max-width: 700px) {
  .home-page .home-cta {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    padding: 0 20px !important;
    overflow: hidden;
  }

  .home-page .home-cta h2 {
    top: 12.5svh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 350px !important;
    max-width: calc(100vw - 40px) !important;
    font-family: "Prompt", sans-serif !important;
    font-size: 65px !important;
    line-height: 65px !important;
    font-weight: 100 !important;
    letter-spacing: -0.05em !important;
    text-align: center !important;
  }

  .home-page .home-cta-inner > div {
    top: 50.5svh !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  .home-page .home-cta p {
    width: 310px !important;
    max-width: 310px !important;
    margin: 0 auto 55px !important;
    font-family: "Prompt", sans-serif !important;
    font-size: 25px !important;
    line-height: 38px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .home-page .home-cta .cta-button {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 66px !important;
    min-height: 66px !important;
    box-sizing: border-box !important;
  }

  .home-page .home-cta .email-link {
    margin-top: 46px !important;
    font-family: "Prompt", sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }
}

/* V50 — Mobile hero CTA is centred to the viewport, independent of the inset hero copy column. */
@media (max-width: 700px) {
  .home-page .home-hero-copy .cta-button {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: calc(20px - 57px) !important;
    margin-right: 0 !important;
  }
}

/* V53 — About mobile layout rebuilt from XD/mobile reference. */
@media (max-width: 700px) {
  .about-page .about-hero {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden;
  }

  .about-page .about-hero > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% center;
  }

  .about-page .about-hero-shade {
    background: rgba(0,0,0,.28);
  }

  .about-page .about-hero-copy {
    inset: 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
  }

  .about-page .about-hero-copy h1 {
    margin: 37svh 0 30px !important;
    font-family: var(--display-font);
    font-size: 45px !important;
    line-height: 45px !important;
    font-weight: 100 !important;
    letter-spacing: -.05em !important;
  }

  .about-page .about-hero-copy p {
    width: 340px !important;
    max-width: calc(100vw - 40px) !important;
    margin: 0 auto !important;
    font-family: var(--body-font);
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .about-page .about-intro {
    min-height: 0 !important;
    padding: 112px 20px 100px !important;
    gap: 34px !important;
    text-align: center;
  }

  .about-page .about-intro > p:not(.credential) {
    width: 338px;
    max-width: 100%;
    margin: 0 auto;
    font-family: var(--body-font);
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .about-page .about-intro .credential {
    margin: 2px auto 0 !important;
    font-family: var(--body-font);
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .about-page .about-intro .credential strong {
    font-weight: 600;
  }

  .about-page .about-columns {
    display: block;
    padding: 0 20px !important;
    margin: 0 !important;
    max-width: none;
  }

  .about-page .about-columns article,
  .about-page .about-columns article:first-child,
  .about-page .about-columns article:last-child {
    min-height: 0 !important;
    padding: 70px 0 74px !important;
    margin: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .about-page .about-columns article:last-child {
    padding-bottom: 86px !important;
    border-bottom: 0 !important;
  }

  .about-page .about-columns h2 {
    margin: 0 0 44px !important;
    font-family: var(--display-font);
    font-size: 45px !important;
    line-height: 45px !important;
    font-weight: 100 !important;
    letter-spacing: -.05em !important;
  }

  .about-page .about-columns h3 {
    margin: 0 0 30px !important;
    max-width: 350px;
    font-family: var(--body-font);
    font-size: 25px !important;
    line-height: 38px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .about-page .about-columns p {
    margin: 0 0 26px !important;
    max-width: 350px;
    font-family: var(--body-font);
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .about-page .about-columns .method {
    margin-top: 31px !important;
    margin-bottom: 0 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
  }

  .about-page .about-columns article:nth-child(2) p:last-child,
  .about-page .about-columns article:nth-child(3) p:last-child {
    margin-bottom: 0 !important;
  }

  .about-page .about-columns article:nth-child(3) h3:nth-of-type(2) {
    margin-top: 42px !important;
  }

  .about-page .about-outline {
    height: 205px !important;
    padding: 28px 20px 0 !important;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }

  .about-page .about-outline img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain;
    object-position: center bottom;
    margin: 0 !important;
  }

  .about-page .site-footer {
    padding: 22px 20px 42px !important;
  }

  .about-page .footer-rule {
    margin-bottom: 30px !important;
  }
}


/* V54 — About mobile: align column content to the same inset as homepage services. */
@media (max-width: 700px) {
  .about-page .about-columns article {
    padding-left: 35px !important;
    padding-right: 5px !important;
  }

  .about-page .about-columns h2 {
    font-size: 35px !important;
    line-height: 35px !important;
    font-weight: 100 !important;
    letter-spacing: 0 !important;
  }

  .about-page .about-columns h3 {
    font-size: 25px !important;
    line-height: 38px !important;
    font-weight: 600 !important;
  }

  .about-page .about-columns p,
  .about-page .about-columns .method {
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
  }
}

/* V56 — About mobile: exact XD column inset + heading scale. */
@media (max-width: 700px) {
  .about-page .about-columns {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .about-page .about-columns article,
  .about-page .about-columns article:first-child,
  .about-page .about-columns article:last-child {
    box-sizing: border-box;
    padding-left: 35px !important;
    padding-right: 0 !important;
  }

  .about-page .about-columns article > h2,
  .about-page .about-columns article > h3,
  .about-page .about-columns article > p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  .about-page .about-columns h2 {
    font-size: 51px !important;
    line-height: 44px !important;
    font-weight: 100 !important;
    letter-spacing: 0 !important;
  }

  .about-page .about-columns h3 {
    font-size: 25px !important;
    line-height: 38px !important;
    font-weight: 600 !important;
  }

  .about-page .about-columns p,
  .about-page .about-columns .method {
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
  }
}

/* V57 — One footer system across every page: match the homepage exactly. */
@media (max-width: 700px) {
  .site-footer,
  .home-page .site-footer,
  .about-page .site-footer,
  .services-page .site-footer,
  .contact-page .site-footer {
    padding: 40px 20px 46px !important;
    font-family: var(--body-font) !important;
    font-size: 8px !important;
    line-height: 13px !important;
    font-weight: 400 !important;
    color: var(--navy) !important;
    background: #fff !important;
  }

  .site-footer .footer-rule,
  .home-page .footer-rule,
  .about-page .footer-rule,
  .services-page .footer-rule,
  .contact-page .footer-rule {
    margin-bottom: 30px !important;
  }

  .site-footer p,
  .home-page .site-footer p,
  .about-page .site-footer p,
  .services-page .site-footer p,
  .contact-page .site-footer p {
    margin: 0 0 13px !important;
    max-width: 100% !important;
    font-family: var(--body-font) !important;
    font-size: 8px !important;
    line-height: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  .site-footer .footer-strapline,
  .home-page .site-footer .footer-strapline,
  .about-page .site-footer .footer-strapline,
  .services-page .site-footer .footer-strapline,
  .contact-page .site-footer .footer-strapline {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    font-size: 8px !important;
    line-height: 13px !important;
    font-weight: 600 !important;
  }
}


/* V58 — Keep long CONSULTANCY heading inside the 402px mobile canvas. */
@media (max-width: 700px) {
  .about-page .about-columns article:nth-child(3) > h2 {
    font-size: 48px !important;
    line-height: 44px !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }
}


/* V59 — About mobile: XD text boxes are 298px wide. */
@media (max-width: 700px) {
  .about-page .about-columns article > h2,
  .about-page .about-columns article > h3,
  .about-page .about-columns article > p,
  .about-page .about-columns article > .method {
    width: 298px !important;
    max-width: 298px !important;
    box-sizing: border-box;
  }
}


/* V60 — Use the homepage mobile header treatment across every page. */
@media (max-width: 700px) {
  .site-header,
  .home-page .site-header,
  .about-page .site-header,
  .services-page .site-header,
  .contact-page .site-header {
    height: 76px !important;
    padding: 16px 20px 0 !important;
  }

  .brand img,
  .home-page .brand img,
  .about-page .brand img,
  .services-page .brand img,
  .contact-page .brand img {
    width: 96px !important;
    max-width: 96px !important;
  }

  .menu-toggle,
  .home-page .menu-toggle,
  .about-page .menu-toggle,
  .services-page .menu-toggle,
  .contact-page .menu-toggle {
    display: block !important;
    width: 31px !important;
    padding: 0 !important;
    margin-top: 1px !important;
  }

  .menu-toggle span,
  .home-page .menu-toggle span,
  .about-page .menu-toggle span,
  .services-page .menu-toggle span,
  .contact-page .menu-toggle span {
    height: 2px !important;
    margin: 7px 0 !important;
  }
}

/* V61 — Mobile header: match XD across every page. */
@media (max-width: 700px) {
  .site-header,
  .home-page .site-header,
  .about-page .site-header,
  .services-page .site-header,
  .contact-page .site-header {
    height: 76px !important;
    padding: 16px 20px 0 !important;
    align-items: flex-start !important;
  }

  .brand img,
  .home-page .brand img,
  .about-page .brand img,
  .services-page .brand img,
  .contact-page .brand img {
    width: 96px !important;
    max-width: 96px !important;
  }

  .menu-toggle,
  .home-page .menu-toggle,
  .about-page .menu-toggle,
  .services-page .menu-toggle,
  .contact-page .menu-toggle {
    display: block !important;
    width: 27px !important;
    height: 25px !important;
    padding: 0 !important;
    margin-top: 4px !important;
  }

  .menu-toggle span,
  .home-page .menu-toggle span,
  .about-page .menu-toggle span,
  .services-page .menu-toggle span,
  .contact-page .menu-toggle span {
    width: 27px !important;
    height: 1.5px !important;
    margin: 5px 0 !important;
  }
}

/* V62 — Mobile header: match XD logo/burger relationship exactly. */
@media (max-width: 700px) {
  .site-header,
  .home-page .site-header,
  .about-page .site-header,
  .services-page .site-header,
  .contact-page .site-header {
    height: 76px !important;
    padding: 16px 20px 0 !important;
    align-items: flex-start !important;
  }

  .brand,
  .home-page .brand,
  .about-page .brand,
  .services-page .brand,
  .contact-page .brand {
    display: block !important;
    line-height: 0 !important;
  }

  .brand img,
  .home-page .brand img,
  .about-page .brand img,
  .services-page .brand img,
  .contact-page .brand img {
    width: 96px !important;
    max-width: 96px !important;
    display: block !important;
  }

  .menu-toggle,
  .home-page .menu-toggle,
  .about-page .menu-toggle,
  .services-page .menu-toggle,
  .contact-page .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 24px !important;
    height: 31px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateY(0) !important;
  }

  .menu-toggle span,
  .home-page .menu-toggle span,
  .about-page .menu-toggle span,
  .services-page .menu-toggle span,
  .contact-page .menu-toggle span {
    display: block !important;
    width: 24px !important;
    height: 1.5px !important;
    margin: 0 !important;
    flex: 0 0 1.5px !important;
  }
}


/* V63 — Use supplied burger SVG exactly across all mobile pages. */
@media (max-width: 700px) {
  .menu-toggle,
  .home-page .menu-toggle,
  .about-page .menu-toggle,
  .services-page .menu-toggle,
  .contact-page .menu-toggle {
    width: 24px !important;
    height: 22px !important;
    padding: 0 !important;
    margin: 5px 0 0 0 !important;
    display: block !important;
    line-height: 0 !important;
  }

  .menu-toggle img,
  .home-page .menu-toggle img,
  .about-page .menu-toggle img,
  .services-page .menu-toggle img,
  .contact-page .menu-toggle img {
    display: block !important;
    width: 24px !important;
    height: 22px !important;
  }

  .menu-toggle span,
  .home-page .menu-toggle span,
  .about-page .menu-toggle span,
  .services-page .menu-toggle span,
  .contact-page .menu-toggle span {
    display: none !important;
  }
}

/* V64 — Mobile header elements anchor independently to page margins, as per XD. */
@media (max-width: 700px) {
  .site-header,
  .home-page .site-header,
  .about-page .site-header,
  .services-page .site-header,
  .contact-page .site-header {
    width: 100% !important;
    height: 78px !important;
    padding: 0 !important;
    display: block !important;
  }

  .site-header .brand,
  .home-page .site-header .brand,
  .about-page .site-header .brand,
  .services-page .site-header .brand,
  .contact-page .site-header .brand {
    position: absolute !important;
    left: 20px !important;
    top: 20px !important;
    margin: 0 !important;
  }

  .site-header .menu-toggle,
  .home-page .site-header .menu-toggle,
  .about-page .site-header .menu-toggle,
  .services-page .site-header .menu-toggle,
  .contact-page .site-header .menu-toggle {
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    left: auto !important;
    width: 24px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}




/* V67 — Mobile footer exact XD treatment across all pages */
@media (max-width: 700px) {
  footer,
  .site-footer,
  .footer {
    padding: 0 20px 34px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  footer::before,
  .site-footer::before,
  .footer::before {
    content: none !important;
    display: none !important;
  }

  footer hr,
  .site-footer hr,
  .footer hr,
  footer .footer-rule,
  .site-footer .footer-rule,
  .footer .footer-rule {
    display: block !important;
    width: 100% !important;
    margin: 0 0 38px !important;
    border: 0 !important;
    border-top: 1px solid rgba(24, 54, 95, 0.55) !important;
  }

  footer p,
  .site-footer p,
  .footer p {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-family: var(--body-font) !important;
    font-size: 12px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
  }

  footer p:first-of-type,
  .site-footer p:first-of-type,
  .footer p:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  footer p:nth-of-type(2),
  .site-footer p:nth-of-type(2),
  .footer p:nth-of-type(2) {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  footer p:last-of-type,
  .site-footer p:last-of-type,
  .footer p:last-of-type {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 600 !important;
  }
}


/* V68 — Mobile footer typography and leading to match XD */
@media (max-width: 700px) {
  footer p,
  .site-footer p,
  .footer p {
    font-size: 10px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
  }

  footer p:first-of-type,
  .site-footer p:first-of-type,
  .footer p:first-of-type {
    margin-bottom: 20px !important;
  }

  footer p:nth-of-type(2),
  .site-footer p:nth-of-type(2),
  .footer p:nth-of-type(2) {
    margin-bottom: 20px !important;
  }

  footer p:last-of-type,
  .site-footer p:last-of-type,
  .footer p:last-of-type {
    font-size: 10px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
  }
}


/* V69 — Mobile footer type scale and wrapping matched to XD */
@media (max-width: 700px) {
  footer p,
  .site-footer p,
  .footer p {
    font-size: 14px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
  }

  footer p:first-of-type,
  .site-footer p:first-of-type,
  .footer p:first-of-type {
    margin-bottom: 26px !important;
  }

  footer p:nth-of-type(2),
  .site-footer p:nth-of-type(2),
  .footer p:nth-of-type(2) {
    margin-bottom: 26px !important;
  }

  footer p:last-of-type,
  .site-footer p:last-of-type,
  .footer p:last-of-type {
    font-size: 14px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
  }
}


/* V70 — Footer matches XD mobile typography and deliberate line breaks */
.footer-legal-mobile { display: none; }

@media (max-width: 700px) {
  .site-footer {
    padding: 0 20px 34px !important;
  }

  .site-footer .footer-rule {
    width: 100% !important;
    margin: 0 0 38px !important;
  }

  .site-footer p {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 13.333px !important;   /* 10pt */
    line-height: 26.667px !important; /* 20pt */
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .footer-legal-desktop { display: none !important; }
  .footer-legal-mobile { display: block !important; }

  .site-footer p:first-of-type {
    margin: 0 0 26px !important;
  }

  .site-footer .footer-legal-mobile {
    margin: 0 0 26px !important;
  }

  .site-footer .footer-strapline {
    margin: 0 !important;
    font-size: 13.333px !important;
    line-height: 26.667px !important;
    font-weight: 600 !important;
  }
}


/* V71 — Override older page-specific 8px footer rules */
@media (max-width: 700px) {
  .home-page .site-footer p,
  .about-page .site-footer p,
  .services-page .site-footer p,
  .contact-page .site-footer p,
  .site-footer p {
    font-size: 10px !important;
    line-height: 20px !important;
  }

  .home-page .site-footer .footer-legal-mobile,
  .about-page .site-footer .footer-legal-mobile,
  .services-page .site-footer .footer-legal-mobile,
  .contact-page .site-footer .footer-legal-mobile,
  .site-footer .footer-legal-mobile {
    font-size: 10px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
  }

  .home-page .site-footer .footer-strapline,
  .about-page .site-footer .footer-strapline,
  .services-page .site-footer .footer-strapline,
  .contact-page .site-footer .footer-strapline,
  .site-footer .footer-strapline {
    font-size: 10px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
  }
}


/* V72 — Services mobile matched to supplied XD reference */
@media (max-width: 700px) {
  /* Hero */
  .services-page .simple-hero {
    height: 540px !important;
    min-height: 540px !important;
    padding: 0 20px 82px !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .services-page .simple-hero h1 {
    margin: 0 !important;
    font-family: var(--display-font) !important;
    font-size: 35px !important;
    line-height: 35px !important;
    font-weight: 100 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  /* Main list */
  .services-page .services-main {
    max-width: none !important;
    margin: 0 !important;
    padding: 60px 20px 0 !important;
  }

  .services-page .services-list {
    width: 100% !important;
  }

  .services-page .service-row {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 24px 58px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .services-page .service-row + .service-row {
    padding-top: 58px !important;
  }

  .services-page .services-list > .service-row:last-of-type {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .services-page .service-meta {
    display: flex !important;
    flex-direction: column !important;
  }

  .services-page .service-meta h2 {
    order: 1 !important;
    width: 298px !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    font-family: var(--body-font) !important;
    font-size: 18px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .services-page .service-row .service-no {
    order: 2 !important;
    display: block !important;
    margin: 0 0 27px !important;
    font-family: var(--display-font) !important;
    font-size: 49px !important;
    line-height: 49px !important;
    font-weight: 100 !important;
    letter-spacing: 0 !important;
  }

  .services-page .service-copy {
    width: 298px !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-family: var(--body-font) !important;
    font-size: 10px !important;
    line-height: 15.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .services-page .service-copy p {
    margin: 0 0 16px !important;
  }

  .services-page .service-copy p:last-child {
    margin-bottom: 0 !important;
  }

  /* Closing CTA */
  .services-page .services-cta {
    width: 100% !important;
    min-height: 500px !important;
    padding: 112px 0 76px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  .services-page .services-cta h2 {
    width: 300px !important;
    max-width: calc(100vw - 40px) !important;
    margin: 0 auto 58px !important;
    font-family: var(--display-font) !important;
    font-size: 35px !important;
    line-height: 35px !important;
    font-weight: 100 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .services-page .services-cta .cta-button {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 auto !important;
    font-size: 14px !important;
    line-height: 21px !important;
    font-weight: 500 !important;
  }
}


/* V73 — Services mobile typography locked to established mobile styles */
@media (max-width: 700px) {
  /* Same thin display treatment used elsewhere */
  .services-page .simple-hero h1 {
    font-family: var(--display-font) !important;
    font-size: 45px !important;
    line-height: 45px !important;
    font-weight: 100 !important;
    letter-spacing: 0 !important;
  }

  /* Same service typography as the approved homepage mobile service blocks */
  .services-page .service-meta h2 {
    width: 298px !important;
    max-width: 100% !important;
    font-family: var(--body-font) !important;
    font-size: 25px !important;
    line-height: 38px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    margin-bottom: 24px !important;
  }

  .services-page .service-row .service-no {
    font-family: var(--display-font) !important;
    font-size: 70px !important;
    line-height: 70px !important;
    font-weight: 100 !important;
    letter-spacing: 0 !important;
    margin-bottom: 30px !important;
  }

  .services-page .service-copy {
    width: 298px !important;
    max-width: 100% !important;
    font-family: var(--body-font) !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .services-page .service-copy p {
    margin: 0 0 22px !important;
  }

  .services-page .service-copy p:last-child {
    margin-bottom: 0 !important;
  }

  /* Closing panel uses the same approved thin display style */
  .services-page .services-cta h2 {
    font-family: var(--display-font) !important;
    font-size: 45px !important;
    line-height: 45px !important;
    font-weight: 100 !important;
    letter-spacing: 0 !important;
  }
}


/* V74 — Contact mobile matched to supplied XD reference */
@media (max-width: 700px) {
  .contact-page {
    background: #fff !important;
  }

  .contact-page .contact-main {
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  .contact-page .contact-stage {
    position: relative !important;
    min-height: 875px !important;
    height: 875px !important;
    overflow: visible !important;
    background: linear-gradient(130deg, #254b7e 0%, #1b3c68 38%, #7a8eae 100%) !important;
    color: #fff !important;
  }

  .contact-page .contact-frame {
    position: relative !important;
    width: 100% !important;
    height: 875px !important;
    min-height: 875px !important;
    overflow: visible !important;
  }

  .contact-page .site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
  }

  .contact-page .contact-lines {
    display: none !important;
  }

  .contact-page .contact-label {
    position: absolute !important;
    top: 153px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--body-font) !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }

  .contact-page .contact-title {
    position: absolute !important;
    top: 258px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .contact-page .contact-title h1 {
    margin: 0 !important;
    font-family: var(--body-font) !important;
    font-size: 35px !important;
    line-height: 30px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .contact-page .contact-copy {
    position: absolute !important;
    top: 410px !important;
    left: 47px !important;
    width: 308px !important;
    max-width: calc(100vw - 94px) !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--body-font) !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .contact-page .contact-copy p {
    margin: 0 !important;
  }

  .contact-page .contact-actions {
    position: absolute !important;
    top: 690px !important;
    left: 20px !important;
    right: auto !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .contact-page .contact-actions .cta-button {
    width: 100% !important;
    max-width: 100% !important;
    height: 65px !important;
    min-height: 65px !important;
    margin: 0 !important;
    font-family: var(--body-font) !important;
    font-size: 14px !important;
    line-height: 21px !important;
    font-weight: 500 !important;
  }

  .contact-page .contact-actions .email-link {
    display: inline-block !important;
    margin-top: 43px !important;
    font-family: var(--body-font) !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
  }

  /* Outline block below the gradient */
  .contact-page .contact-outline-wrap {
    position: absolute !important;
    top: 953px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    height: auto !important;
    z-index: 3 !important;
    display: block !important;
    pointer-events: none !important;
  }

  .contact-page .contact-outline {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    opacity: 1 !important;
  }

  /* Create the white outline area before the shared footer */
  .contact-page .contact-main {
    padding-bottom: 205px !important;
  }

  .contact-page .site-footer {
    position: relative !important;
    background: #fff !important;
  }
}


/* V75 — Contact mobile ROCHE outline spacing tightened to XD */
@media (max-width: 700px) {
  .contact-page .contact-main {
    padding-bottom: 120px !important;
  }

  .contact-page .contact-outline-wrap {
    top: 905px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
  }

  .contact-page .site-footer {
    margin-top: -18px !important;
  }
}


/* V76 — Contact mobile ROCHE outline: prevent bottom crop */
@media (max-width: 700px) {
  .contact-page .contact-outline-wrap {
    height: auto !important;
    overflow: visible !important;
  }

  .contact-page .contact-outline {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    overflow: visible !important;
  }

  /* Give the outline enough vertical room before the footer rule */
  .contact-page .contact-main {
    padding-bottom: 250px !important;
  }

  .contact-page .site-footer {
    margin-top: 0 !important;
  }
}


/* V77 — Contact mobile: tighten ROCHE outline/footer spacing */
@media (max-width: 700px) {
  .contact-page .contact-main {
    padding-bottom: 175px !important;
  }

  .contact-page .contact-outline-wrap {
    top: 925px !important;
  }

  .contact-page .site-footer {
    margin-top: -28px !important;
  }
}


/* V78 — Contact mobile: anchor ROCHE outline closer to footer rule */
@media (max-width: 700px) {
  .contact-page .contact-outline-wrap {
    top: 940px !important;
  }

  .contact-page .contact-main {
    padding-bottom: 155px !important;
  }

  .contact-page .site-footer {
    margin-top: -42px !important;
  }
}


/* V79 — Contact mobile CTA: white button, no hover state */
@media (max-width: 700px) {
  .contact-page .contact-actions .cta-button,
  .contact-page .contact-actions .cta-button:hover,
  .contact-page .contact-actions .cta-button:focus,
  .contact-page .contact-actions .cta-button:active {
    background: #fff !important;
    color: #18365F !important;
    border-color: #18365F !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
}


/* V80 — Contact mobile ROCHE outline: full mark visible, tightly anchored to footer rule */
@media (max-width: 700px) {
  .contact-page .contact-stage,
  .contact-page .contact-frame,
  .contact-page .contact-main {
    overflow: visible !important;
  }

  .contact-page .contact-main {
    position: relative !important;
    padding-bottom: 222px !important;
  }

  .contact-page .contact-outline-wrap {
    position: absolute !important;
    top: 950px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    height: 150px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
    z-index: 3 !important;
  }

  .contact-page .contact-outline {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
    overflow: visible !important;
  }

  .contact-page .site-footer {
    margin-top: -8px !important;
  }
}


/* V81 — Contact mobile: reduce space beneath ROCHE outline */
@media (max-width: 700px) {
  .contact-page .contact-main {
    padding-bottom: 185px !important;
  }
}

/* V82 — Mobile menu matched to XD: diagonal separators + restrained entrance animation */
@media (max-width: 700px) {
  .mobile-menu {
    background: linear-gradient(180deg, #213f70 0%, #0d1c31 100%) !important;
    overflow: hidden !important;
  }

  .mobile-menu nav {
    position: relative !important;
    height: 100svh !important;
    min-height: 100svh !important;
    display: grid !important;
    grid-template-rows: repeat(4, 1fr) !important;
    padding: 106px 20px 96px !important;
    overflow: hidden !important;
  }

  .mobile-menu nav a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    font-family: var(--body-font) !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    opacity: 0 !important;
    transform: translateY(14px) !important;
    transition: opacity .42s ease, transform .42s cubic-bezier(.2,.7,.2,1) !important;
  }

  .mobile-menu nav a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -17px !important;
    width: 112% !important;
    height: 1px !important;
    background: rgba(255,255,255,.88) !important;
    transform: rotate(-27.5deg) scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform .58s cubic-bezier(.22,.72,.18,1) !important;
    pointer-events: none !important;
  }

  .mobile-menu nav a:nth-child(4)::after {
    display: none !important;
  }

  .mobile-menu nav a:nth-child(1) { transition-delay: .16s !important; }
  .mobile-menu nav a:nth-child(2) { transition-delay: .25s !important; }
  .mobile-menu nav a:nth-child(3) { transition-delay: .34s !important; }
  .mobile-menu nav a:nth-child(4) { transition-delay: .43s !important; }

  .mobile-menu nav a:nth-child(1)::after { transition-delay: .04s !important; }
  .mobile-menu nav a:nth-child(2)::after { transition-delay: .13s !important; }
  .mobile-menu nav a:nth-child(3)::after { transition-delay: .22s !important; }

  .mobile-menu[aria-hidden="false"] nav a {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .mobile-menu[aria-hidden="false"] nav a::after {
    transform: rotate(-27.5deg) scaleX(1) !important;
  }

  .menu-close {
    top: 18px !important;
    right: 17px !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 3 !important;
  }

  .menu-close::before,
  .menu-close::after {
    content: "" !important;
    position: absolute !important;
    left: 1px !important;
    top: 11px !important;
    width: 22px !important;
    height: 1.5px !important;
    background: #fff !important;
    transform-origin: center !important;
  }

  .menu-close::before { transform: rotate(45deg) !important; }
  .menu-close::after { transform: rotate(-45deg) !important; }
}

/* V83 — Mobile menu: centre diagonal separators in the gaps between menu labels */
@media (max-width: 700px) {
  .mobile-menu nav a::after {
    left: 50% !important;
    right: auto !important;
    top: 100% !important;
    bottom: auto !important;
    width: calc(100vw - 40px) !important;
    transform: translate(-50%, -50%) rotate(-27.5deg) scaleX(0) !important;
    transform-origin: center center !important;
  }

  .mobile-menu[aria-hidden="false"] nav a::after {
    transform: translate(-50%, -50%) rotate(-27.5deg) scaleX(1) !important;
  }
}


/* V84 — Mobile menu typography matched to XD */
@media (max-width: 700px) {
  .mobile-menu nav a {
    font-size: 22px !important;
    line-height: 33px !important;
    font-weight: 300 !important;
    letter-spacing: 0.02em !important;
  }
}


/* V85 — Keep mobile menu visible during link navigation; prevents page flash */
html.menu-navigating .mobile-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html.menu-navigating {
  overflow: hidden !important;
}


/* V86 — Desktop hero heading: one statement per line (mobile two-line split unchanged) */
@media (min-width: 701px) {
  .home-page .home-hero-copy h1 > span {
    display: block;
  }

  .home-page .home-hero-copy h1 > span br {
    display: none;
  }
}