.service-page {
  --service-accent: var(--accent);
  --service-copy: #424944;
  background: #fff;
}
.service-page--association { --service-accent: #3c60bc; }
.service-page--research { --service-accent: #3a5e82; }
.service-page--data { --service-accent: #3372c2; }
.service-page a:focus-visible,
.service-page button:focus-visible { outline: 2px solid var(--service-accent); outline-offset: 4px; }
.services-menu .extras-menu__panel { min-width: 300px; }

.service-hero {
  padding: clamp(5.5rem, 10vw, 10rem) 0 clamp(5rem, 8vw, 8rem);
}
.service-hero h1 {
  max-width: 1060px;
  margin: 0;
  font: 500 clamp(44px, 5.5vw, 80px)/.99 var(--serif);
  letter-spacing: -.027em;
  text-wrap: balance;
}
.service-hero__lead {
  max-width: 820px;
  margin: clamp(2rem, 3vw, 2.8rem) 0 0;
  color: var(--ink);
  font: 400 clamp(21px, 2vw, 27px)/1.42 var(--serif);
}

.service-main {
  display: grid;
  grid-template-columns: 210px minmax(0, 820px);
  justify-content: center;
  gap: clamp(4rem, 8vw, 9rem);
  padding-bottom: clamp(6rem, 10vw, 11rem);
  border-top: 1px solid var(--line);
}
.service-rail {
  position: sticky;
  top: 120px;
  align-self: start;
  padding-top: clamp(5rem, 8vw, 8rem);
}
.service-rail__label {
  display: block;
  margin-bottom: .75rem;
  color: var(--ink);
  font: 500 13px/1.4 var(--sans);
  letter-spacing: 0;
}
.service-rail a {
  display: block;
  padding: .4rem 0;
  color: var(--muted);
  font: 500 12px/1.45 var(--sans);
  text-decoration: none;
}
.service-rail a:hover { color: var(--service-accent); }
.service-article { min-width: 0; }
.service-section {
  padding: clamp(5rem, 8vw, 8rem) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 84px;
}
.service-section:last-child { border-bottom: 0; }
.service-section h2 {
  max-width: 760px;
  margin: 0 0 1.6rem;
  font: 500 clamp(34px, 4vw, 50px)/1.06 var(--serif);
  letter-spacing: -.018em;
  text-wrap: balance;
}
.service-section > p,
.service-question p,
.service-case p,
.service-related p {
  max-width: 760px;
  margin: 0 0 1.25rem;
  color: var(--service-copy);
  font: 400 19px/1.58 var(--serif);
}
.service-section > p:last-child,
.service-question p:last-child,
.service-case p:last-child { margin-bottom: 0; }

.service-case {
  margin-top: 2.75rem;
  padding: clamp(2rem, 4vw, 3.4rem);
  border: 1px solid #202421;
  background: #fff;
}
.service-case h3 {
  max-width: 700px;
  margin: 0 0 1.25rem;
  font: 500 clamp(28px, 3.2vw, 39px)/1.08 var(--serif);
  letter-spacing: -.012em;
}
.service-case__link,
.service-contact__link {
  display: inline-flex;
  align-items: baseline;
  gap: .65rem;
  margin-top: .75rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid currentColor;
  color: var(--service-accent);
  font: 500 14px/1.45 var(--sans);
  text-decoration: none;
}
.service-page .link-arrow { display: inline-block; transition: transform .2s; }
.service-page a:hover .link-arrow--right { transform: translateX(4px); }
.service-page .link-arrow--up-right {
  position: relative;
  width: .78em;
  height: .78em;
  flex: 0 0 .78em;
  align-self: center;
  transition: transform .2s;
}
.service-page .link-arrow--up-right::before {
  content: "";
  position: absolute;
  left: .08em;
  bottom: .08em;
  width: .91em;
  border-top: 1px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: left center;
}
.service-page .link-arrow--up-right::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: .38em;
  height: .38em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.service-page a:hover .link-arrow--up-right { transform: translate(3px, -3px); }

.service-questions { padding-bottom: 0; }
.service-question {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: 2.1rem 0;
  border-top: 1px solid var(--line);
}
.service-question:first-of-type { margin-top: 2.5rem; }
.service-question h3 {
  margin: 0;
  color: var(--ink);
  font: 600 18px/1.35 var(--sans);
  letter-spacing: -.005em;
}
.service-question p { font-size: 18px; }

.service-contact {
  padding-top: clamp(5rem, 8vw, 8rem);
}
.service-contact__link {
  max-width: 700px;
  margin-top: 1rem;
  color: var(--service-accent);
  font: 500 clamp(20px, 2.3vw, 27px)/1.3 var(--serif);
}
.service-related {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  border-top: 1px solid var(--line);
}
.service-related__inner {
  display: grid;
  grid-template-columns: 210px minmax(0, 820px);
  justify-content: center;
  gap: clamp(4rem, 8vw, 9rem);
}
.service-related h2 {
  margin: 0;
  font: 500 20px/1.25 var(--serif);
  letter-spacing: 0;
}
.service-related__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2.5rem;
}
.service-related__links a {
  color: var(--ink);
  font: 500 22px/1.25 var(--serif);
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.service-related__links a:hover { color: var(--service-accent); }

@media (max-width: 1100px) {
  .service-main,
  .service-related__inner { grid-template-columns: minmax(0, 820px); }
  .service-related__inner { row-gap: 1.5rem; }
  .service-rail { display: none; }
}

@media (max-width: 760px) {
  .services-menu .extras-menu__panel { min-width: 0; }
  .service-hero { padding: 4.5rem 0 5rem; }
  .service-hero h1 { font-size: clamp(39px, 10vw, 44px); }
  .service-hero__lead { margin-top: 1.6rem; font-size: 21px; }
  .service-main { padding-bottom: 6rem; }
  .service-section { padding: 5rem 0; scroll-margin-top: 70px; }
  .service-section h2 { font-size: clamp(32px, 8.5vw, 37px); }
  .service-section > p,
  .service-question p,
  .service-case p,
  .service-related p { font-size: 18px; }
  .service-case { margin-top: 2.25rem; padding: 1.5rem; }
  .service-question { grid-template-columns: 1fr; gap: .8rem; padding: 1.75rem 0; }
  .service-question h3 { font-size: 17px; }
  .service-case__link,
  .service-contact__link {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: .75rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
  .service-related__links { grid-template-columns: 1fr; }
  .service-related__links a { min-height: 44px; display: flex; align-items: center; }
}