/* Rebuild the Services composition with Ariel layout primitives and one breakpoint. */
.services-page {
  --services-bg: var(--page-bg);
  --services-surface: var(--page-surface);
  --services-surface-soft: var(--page-surface-soft);
  --services-ink: var(--page-text);
  --services-copy: #bdcbd9;
  --services-muted: #91a7bf;
  --services-accent: var(--page-accent);
  --services-border: var(--page-border);
  --services-line: #4c677f;
  --services-illustration-fill: #e9c4ad;
  --services-illustration-stroke: #14283d;
  --services-illustration-highlight: #ccd1ef;
  --services-inverse-bg: #ede4db;
  --services-inverse-ink: #12283c;
  --services-inverse-copy: #53677a;
  background: var(--services-bg);
  color: var(--services-ink);
  font-family: var(--font-interface);
  line-height: 1.55;
}
html[data-ariel-theme="light"] .services-page {
  --services-surface: #fcf8f2;
  --services-surface-soft: #ebe3d9;
  --services-ink: #172b40;
  --services-copy: #566a7b;
  --services-muted: #78899c;
  --services-accent: #a86548;
  --services-border: #d8d0c6;
  --services-line: #c6ac96;
  --services-illustration-fill: #e9c5af;
  --services-illustration-stroke: #172b40;
  --services-illustration-highlight: #aabce2;
  --services-inverse-bg: #173047;
  --services-inverse-ink: #f7f1ea;
  --services-inverse-copy: #c2d0de;
}
.services-page :where(h1, h2, h3, p) {
  margin: 0;
}
.services-page svg {
  display: block;
}
.services-page :focus-visible {
  outline-color: var(--services-accent);
}
.services-container {
  inline-size: min(100% - clamp(1.875rem, 7.7vi, 2.5rem), 82.5rem);
  padding-inline: 0;
}
.services-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 1.75rem;
  color: var(--services-muted);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.14em;
}
.services-kicker > span:first-child {
  flex-shrink: 0;
  color: var(--services-accent);
}
.services-kicker__line {
  flex: 0 0 2rem;
  block-size: 1px;
  background: var(--services-accent);
}
.services-page :where(h1, h2, h3) {
  font-family: var(--font-interface);
  letter-spacing: -0.055em;
}
.services-page :where(h1, h2) em {
  color: var(--services-accent);
  font-family: var(--font-editorial);
  font-weight: 500;
}
.services-page h1 {
  max-inline-size: 13ch;
  font-size: clamp(2.65rem, 8.1vi, 5.6rem);
  font-weight: 760;
  line-height: 1.08;
}
.services-page h2 {
  font-size: clamp(2.25rem, 6.2vi, 4.4rem);
  font-weight: 750;
  line-height: 1.14;
}
.services-intro {
  overflow: clip;
  padding-block: calc(var(--header-height) + 1.6rem) 3rem;
}
.services-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--services-muted);
  font-size: 0.72rem;
  font-weight: 650;
}
.services-breadcrumb > span:nth-child(2),
.services-breadcrumb a:hover {
  color: var(--services-accent);
}
.services-intro__layout {
  --ariel-gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: 3.8rem 1.4rem;
}
.services-intro__lead {
  max-inline-size: 47ch;
  margin-block-start: 2rem;
  color: var(--services-copy);
  font-size: clamp(1rem, 2.5vi, 1.2rem);
  line-height: 1.8;
}
.services-actions {
  gap: 1rem 2.25rem;
  margin-block-start: 2.1rem;
}
.services-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-block-size: 3.5rem;
  max-inline-size: 100%;
  padding: 0.8rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 99rem;
  background: #ecc0a4;
  color: #19293a;
  font-family: var(--font-interface);
  font-size: 0.79rem;
  font-weight: 850;
  line-height: inherit;
  box-shadow: none;
  transition:
    transform 180ms,
    background-color 180ms;
}
.services-button > .services-link-arrow {
  font-size: 1.2rem;
  font-weight: 500;
}
.services-button:hover {
  background: #ffddc4;
  color: #19293a;
  transform: translateY(-2px);
}
.services-text-link {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  max-inline-size: 100%;
  padding-block: 0.55rem;
  border-block-end: 1px solid var(--services-border);
  color: var(--services-ink);
  font-size: 0.78rem;
  font-weight: 800;
}
.services-link-arrow {
  flex-shrink: 0;
  font-size: 1rem;
}
.services-text-link:hover,
.services-offering__link:hover {
  border-color: currentColor;
  color: var(--services-accent);
}
.services-flight {
  position: relative;
  inline-size: min(100%, 31rem);
  min-block-size: 18rem;
  margin-inline: auto;
  color: var(--services-accent);
}
.services-flight svg {
  inline-size: 100%;
}
.services-flight__ring {
  stroke: var(--services-line);
  opacity: 0.55;
}
.services-flight__ring--inner {
  opacity: 0.35;
}
.services-flight__path {
  stroke: var(--services-accent);
}
.services-flight__path--fine {
  stroke: var(--services-line);
  opacity: 0.75;
}
.services-flight__point,
.services-flight__center {
  fill: var(--services-accent);
}
.services-flight__point--quiet {
  fill: var(--services-muted);
}
.services-flight__mark {
  stroke: #19293a;
}
.services-flight__cross {
  stroke: var(--services-muted);
}
.services-flight__label {
  position: absolute;
  display: grid;
  gap: 0.28rem;
  color: var(--services-ink);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.services-flight__label small {
  color: var(--services-muted);
  font-size: 0.52rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.services-flight__label--top {
  inset-block-start: 18%;
  inset-inline-start: 0;
}
.services-flight__label--bottom {
  inset-block-end: 17%;
  inset-inline-end: 0;
}
.services-flight__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 1%;
  color: var(--services-muted);
  font-size: 0.54rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.14em;
}
.services-flight__caption b {
  padding-inline: 0.3rem;
  color: var(--services-accent);
}
.services-intro__bottom {
  --ariel-gap: 1rem;
  justify-content: space-between;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--services-border);
  color: var(--services-muted);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.services-intro__bottom-dot {
  padding-inline: 0.7rem;
  color: var(--services-accent);
  font-size: 0.5rem;
}
.services-intro__bottom-arrow {
  padding-inline-start: 0.7rem;
  color: var(--services-accent);
}
.services-detail {
  padding-block: 5.5rem 6rem;
  background: var(--services-surface);
}
.services-section-heading {
  margin-block-end: 3.1rem;
}
.services-section-heading__layout {
  --ariel-gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
.services-section-heading__layout > p {
  max-inline-size: 38ch;
  color: var(--services-copy);
  font-size: 0.98rem;
  line-height: 1.85;
}
.services-offerings {
  border-block-start: 1px solid var(--services-border);
}
.services-offering {
  --ariel-gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 2.65rem 3rem;
  border-block-end: 1px solid var(--services-border);
}
.services-offering__index {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--services-accent);
  font-size: 0.78rem;
  font-weight: 850;
}
.services-offering__index small {
  color: var(--services-muted);
  font-size: 0.61rem;
  letter-spacing: 0.15em;
}
.services-offering__drawing {
  display: grid;
  place-items: center;
  inline-size: 9rem;
  block-size: 9rem;
  border: 1px solid var(--services-border);
  border-radius: 50%;
  background: var(--services-surface-soft);
  color: var(--services-ink);
}
.services-offering__drawing svg {
  inline-size: 7rem;
}
.services-offering__body h3 {
  font-size: clamp(1.65rem, 4vi, 2.5rem);
  font-weight: 750;
  line-height: 1.15;
}
.services-offering__body > p {
  max-inline-size: 56ch;
  margin-block-start: 1rem;
  color: var(--services-copy);
  font-size: 0.95rem;
  line-height: 1.85;
}
.services-offering__tags {
  --ariel-gap: 0.55rem;
  margin: 1.4rem 0 1.5rem;
  padding: 0;
  list-style: none;
}
.services-offering__tags li {
  max-inline-size: 100%;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--services-border);
  border-radius: 99rem;
  color: var(--services-copy);
  font-size: 0.67rem;
  font-weight: 700;
}
.services-offering__link {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  max-inline-size: 100%;
  padding-block-end: 0.65rem;
  border-block-end: 1px solid var(--services-border);
  color: var(--services-ink);
  font-size: 0.77rem;
  font-weight: 800;
}
.services-note {
  padding-block: 5.5rem;
}
.services-note__layout {
  --ariel-gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}
.services-note h2 {
  max-inline-size: 20ch;
}
.services-note__copy p {
  max-inline-size: 43ch;
  margin-block-end: 1.75rem;
  color: var(--services-copy);
  font-size: 0.99rem;
  line-height: 1.8;
}
.services-end {
  padding-block: 5rem 5.5rem;
  background: var(--services-inverse-bg);
  color: var(--services-inverse-ink);
}
.services-end__layout {
  --ariel-gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.services-end .services-kicker {
  color: var(--services-inverse-copy);
}
.services-end h2 {
  font-size: clamp(2.4rem, 6vi, 4.3rem);
}
.services-end h2 em {
  color: var(--services-inverse-ink);
}
.services-end__copy > p:not(.services-kicker) {
  max-inline-size: 44ch;
  margin-block: 1.5rem 2rem;
  color: var(--services-inverse-copy);
  font-size: 1rem;
  line-height: 1.75;
}
.services-end__symbol {
  justify-self: center;
  inline-size: min(70%, 16rem);
  color: var(--services-inverse-ink);
}
.services-end__symbol svg {
  inline-size: 100%;
}
.services-button--dark,
.services-button--dark:hover {
  background: var(--services-inverse-ink);
  color: var(--services-inverse-bg);
}
.services-button--dark:hover {
  filter: brightness(1.15);
}

@media (min-width: 64rem) {
  .services-intro {
    padding-block-start: calc(var(--header-height) + 2.2rem);
  }
  .services-intro__layout {
    --ariel-gap: 0;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    padding-block: 5.6rem 4rem;
  }
  .services-flight {
    inline-size: 100%;
  }
  .services-section-heading__layout,
  .services-note__layout {
    --ariel-gap: 3rem;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr);
  }
  .services-detail {
    padding-block: 6.8rem 7rem;
  }
  .services-offering {
    --ariel-gap: 3rem;
    grid-template-columns: 7.5rem 13rem minmax(0, 1fr);
    align-items: center;
    padding-block: 3.1rem;
  }
  .services-offering__drawing {
    inline-size: 11.5rem;
    block-size: 11.5rem;
  }
  .services-offering__drawing svg {
    inline-size: 8.4rem;
  }
  .services-offering__body {
    max-inline-size: 46rem;
  }
  .services-note {
    padding-block: 6.3rem;
  }
  .services-note__layout {
    align-items: end;
  }
  .services-end {
    padding-block: 6.6rem 6.9rem;
  }
  .services-end__layout {
    --ariel-gap: 5rem;
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  }
  .services-end__symbol {
    inline-size: 16rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .services-button {
    transition: none;
  }
}
