@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/source-serif-4/source-serif-4-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/source-serif-4/source-serif-4-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/source-serif-4/source-serif-4-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans/instrument-sans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans/instrument-sans-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans/instrument-sans-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans/instrument-sans-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --color-black-deep: #090d0f;
  --color-anthracite: #172326;
  --color-ivory: #f4efe5;
  --color-ivory-soft: #fbf6ee;
  --color-petrol: #00525f;
  --color-turquoise: #4B9FA8;
  --color-bordeaux: #883136;
  --color-coral: #c75b46;
  --color-brass: #b89a68;

  --color-text-on-dark: color-mix(in srgb, var(--color-ivory) 82%, transparent);
  --color-text-on-light: color-mix(in srgb, var(--color-anthracite) 84%, transparent);
  --color-surface-dark: color-mix(in srgb, var(--color-anthracite) 68%, transparent);
  --color-surface-light: color-mix(in srgb, var(--color-ivory-soft) 76%, transparent);

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Typography role foundation candidate: current production values */
  --type-display-hero-family: var(--font-serif);
  --type-display-hero-weight: 400;
  --type-display-hero-size: clamp(2.5rem, 1.3rem + 4.5vw, 5.125rem);
  --type-display-hero-line-height: 1.02;

  --type-display-section-feature-family: var(--font-serif);
  --type-display-section-feature-weight: 400;
  --type-display-section-feature-size: clamp(3.15rem, 5.65vw, 5.35rem);
  --type-display-section-feature-line-height: 0.92;
  --type-display-section-feature-letter-spacing: -0.01em;

  --type-display-section-family: var(--font-serif);
  --type-display-section-weight: 400;
  --type-display-section-size: clamp(2.85rem, 3.8vw, 4.4rem);
  --type-display-section-line-height: 1;
  --type-display-section-letter-spacing: -0.01em;

  --type-display-page-family: var(--font-serif);
  --type-display-page-weight: 400;
  --type-display-page-size: 3.75rem;
  --type-display-page-line-height: 1.04;

  --type-heading-editorial-family: var(--font-serif);
  --type-heading-editorial-weight: 600;
  --type-heading-editorial-size: 2rem;
  --type-heading-editorial-line-height: 1.15;

  --type-heading-panel-family: var(--font-serif);
  --type-heading-panel-weight: 400;
  --type-heading-panel-size: clamp(1.45rem, 1.7vw, 1.85rem);
  --type-heading-panel-line-height: 1.1;

  --type-heading-functional-family: var(--font-sans);
  --type-heading-functional-weight: 600;
  --type-heading-functional-size: 1.25rem;
  --type-heading-functional-line-height: normal;

  --type-heading-component-family: var(--font-sans);
  --type-heading-component-weight: 600;
  --type-heading-component-size: 0.92rem;
  --type-heading-component-line-height: 1.3;

  --type-editorial-lead-family: var(--font-serif);
  --type-editorial-lead-weight: 400;
  --type-editorial-lead-size: 1.2rem;
  --type-editorial-lead-line-height: 1.55;

  --type-editorial-statement-family: var(--font-serif);
  --type-editorial-statement-weight: 600;
  --type-editorial-statement-size: 0.95rem;
  --type-editorial-statement-line-height: 1.55;

  --type-body-family: var(--font-sans);
  --type-body-weight: 400;
  --type-body-size: 1rem;
  --type-body-line-height: 1.6;
  --type-body-letter-spacing: normal;

  --type-body-small-family: var(--font-sans);
  --type-body-small-weight: 400;
  --type-body-small-size: 0.9375rem;
  --type-body-small-line-height: 1.5;
  --type-body-small-letter-spacing: normal;

  --type-action-family: var(--font-sans);
  --type-action-weight: 500;
  --type-action-size: 0.9375rem;
  --type-action-line-height: 1.2;
  --type-action-letter-spacing: normal;

  --type-label-family: var(--font-sans);
  --type-label-weight: 600;
  --type-label-size: 0.75rem;
  --type-label-line-height: 1.35;
  --type-label-letter-spacing: 0.12em;
  --type-label-text-transform: uppercase;

  --type-meta-family: var(--type-body-small-family);
  --type-meta-weight: var(--type-body-small-weight);
  --type-meta-size: 0.84375rem;
  --type-meta-line-height: 1.4;
  --type-meta-letter-spacing: var(--type-body-small-letter-spacing);

  --content-max-width: 1180px;
  --content-gutter: 4rem;
  --section-padding-y: 7rem;
  --section-padding-y-mobile: 4rem;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  --shadow-dark-card: 0 24px 80px rgba(0, 0, 0, 0.35);
  --shadow-primary: 0 16px 42px color-mix(in srgb, var(--color-bordeaux) 26%, transparent);
  --shadow-light-card: 0 16px 42px color-mix(in srgb, var(--color-anthracite) 7%, transparent);
  --border-dark: 1px solid rgba(107, 191, 189, 0.22);
  --border-light: 1px solid color-mix(in srgb, var(--color-anthracite) 12%, transparent);

  --color-cream: var(--color-ivory);
  --color-muted: #c9bda9;
  --transition-soft: 180ms ease;
  --hero-background-image: url("assets/backgrounds/hero/hero-desktop.webp");
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--color-ivory);
  background: var(--color-black-deep);
}

button,
input,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration-color: rgba(107, 191, 189, 0.72);
  text-underline-offset: 0.24em;
  transition:
    color var(--transition-soft),
    border-color var(--transition-soft),
    background var(--transition-soft),
    text-decoration-color var(--transition-soft);
}

a:hover {
  color: #ffffff;
  text-decoration-color: var(--color-coral);
}

a:focus-visible {
  outline: 2px solid var(--color-turquoise);
  outline-offset: 4px;
}

.section--light :is(a, button):focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 4px;
}

.site-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(107, 191, 189, 0.11), transparent 20rem),
    linear-gradient(135deg, var(--color-black-deep) 0%, var(--color-anthracite) 52%, #07090a 100%);
}

.site-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: min(100%, var(--content-max-width));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem var(--content-gutter);
  transform: translateX(-50%);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-ivory);
  text-decoration: none;
}

.site-logo__image {
  width: auto;
  max-width: none;
  height: 3rem;
  display: block;
  flex: 0 0 auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  color: color-mix(in srgb, var(--color-ivory) 78%, transparent);
  font-family: var(--type-action-family);
  font-size: var(--type-action-size);
  font-weight: var(--type-action-weight);
  line-height: var(--type-action-line-height);
  letter-spacing: var(--type-action-letter-spacing);
}

.site-nav a {
  text-decoration: none;
}

.site-nav-toggle {
  display: none;
}

.section {
  position: relative;
  isolation: isolate;
}

.section--dark {
  color: var(--color-ivory);
  background: var(--color-black-deep);
}

.section__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--content-max-width));
  margin: 0 auto;
  padding-inline: var(--content-gutter);
}

.hero {
  min-height: calc(100vh - 72px);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: 8.5rem var(--section-padding-y);
  background:
    radial-gradient(circle at 78% 66%, rgba(199, 91, 70, 0.14), transparent 24rem),
    radial-gradient(circle at 68% 34%, rgba(107, 191, 189, 0.1), transparent 23rem),
    linear-gradient(135deg, var(--color-black-deep) 0%, #081112 54%, var(--color-black-deep) 100%);
}

.hero::before,
.hero::after,
.hero__atmosphere {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.hero::before {
  inset: 0;
  background:
    radial-gradient(circle at 74% 48%, rgba(184, 154, 104, 0.2), transparent 20rem),
    radial-gradient(circle at 84% 78%, rgba(199, 91, 70, 0.12), transparent 24rem);
  opacity: 0.78;
}

.hero::after {
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-black-deep) 74%, transparent) 0%, color-mix(in srgb, var(--color-black-deep) 18%, transparent) 34%, color-mix(in srgb, var(--color-black-deep) 72%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-black-deep) 92%, transparent) 0%, color-mix(in srgb, var(--color-black-deep) 82%, transparent) 31%, color-mix(in srgb, var(--color-black-deep) 38%, transparent) 63%, color-mix(in srgb, var(--color-black-deep) 72%, transparent) 100%),
    radial-gradient(circle at 72% 52%, rgba(107, 191, 189, 0.08), transparent 19rem);
}

.hero__atmosphere {
  inset: 0;
  background-image: var(--hero-background-image);
  background-position: center center;
  background-size: cover;
  opacity: 0.72;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.72fr);
  grid-template-areas:
    "lead proof"
    "actions proof"
    "handoff proof";
  align-items: center;
  gap: 2.4rem 4rem;
}

.hero__lead {
  grid-area: lead;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-label,
.card-label {
  margin: 0;
  color: var(--color-turquoise);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  line-height: var(--type-label-line-height);
  text-transform: var(--type-label-text-transform);
}

.hero__lead > .section-label,
.hero-production-card .card-label {
  color: var(--color-turquoise);
}

.section-title {
  margin: 1.3rem 0 0;
}

.section-copy {
  margin: 1.7rem 0 0;
  max-width: 33rem;
  color: var(--color-text-on-dark);
}

.hero__title {
  font-family: var(--type-display-hero-family);
  font-size: var(--type-display-hero-size);
  font-weight: var(--type-display-hero-weight);
  line-height: var(--type-display-hero-line-height);
}

.hero__copy {
  font-family: var(--type-editorial-lead-family);
  font-size: var(--type-editorial-lead-size);
  font-weight: var(--type-editorial-lead-weight);
  line-height: var(--type-editorial-lead-line-height);
}

.hero__actions {
  grid-area: actions;
}

.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.button {
  min-height: 3rem;
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: var(--radius-pill);
  font-family: var(--type-action-family);
  font-size: var(--type-action-size);
  font-weight: var(--type-action-weight);
  line-height: var(--type-action-line-height);
  letter-spacing: var(--type-action-letter-spacing);
  text-decoration: none;
}

.button--primary {
  padding: 0.9rem 1.45rem 0.9rem 1.7rem;
  border: 1px solid rgba(199, 91, 70, 0.78);
  color: #fff8ef;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-bordeaux) 96%, transparent), rgba(199, 91, 70, 0.54)),
    color-mix(in srgb, var(--color-bordeaux) 72%, transparent);
  box-shadow: var(--shadow-primary);
}

.button--primary:hover,
.button--primary:focus-visible {
  background:
    linear-gradient(135deg, var(--color-bordeaux), rgba(199, 91, 70, 0.68)),
    color-mix(in srgb, var(--color-bordeaux) 82%, transparent);
}

.button--secondary {
  padding: 0.75rem 0;
  color: color-mix(in srgb, var(--color-ivory) 86%, transparent);
  border-radius: var(--radius-sm);
}

.audio-button {
  --audio-button-size: 2rem;
  --audio-button-fill: var(--color-petrol);
  --audio-button-border-color: var(--audio-button-fill);
  --audio-button-icon-color: var(--color-ivory);
  --audio-button-icon-width: 0.62rem;
  --audio-button-icon-height: 0.82rem;

  width: var(--audio-button-size);
  height: var(--audio-button-size);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--audio-button-border-color);
  border-radius: 50%;
  color: var(--audio-button-icon-color);
  background: var(--audio-button-fill);
}

.audio-button__icon {
  width: 0;
  height: 0;
  margin-left: 0.11rem;
  border-block: calc(var(--audio-button-icon-height) / 2) solid transparent;
  border-left: var(--audio-button-icon-width) solid currentColor;
}

.audio-button[aria-pressed="true"] .audio-button__icon {
  width: 0.14rem;
  height: 0.68rem;
  margin-left: -0.34rem;
  border: 0;
  background: currentColor;
  box-shadow: 0.36rem 0 currentColor;
}

.sample-card audio[data-audio-source] {
  display: none;
}

.audio-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--audio-button-fill) 70%, var(--color-ivory));
  outline-offset: 3px;
}

.audio-button:disabled {
  cursor: not-allowed;
  opacity: 0.82;
}

.hero__handoff {
  grid-area: handoff;
  width: min(100%, 33rem);
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-turquoise) 22%, transparent);
}

.hero__handoff .section-handoff {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: color-mix(in srgb, var(--color-ivory) 72%, transparent);
  text-decoration: none;
}

.hero__handoff .section-handoff__text {
  display: grid;
  gap: 0.25rem;
}

.hero__handoff strong {
  color: var(--color-turquoise);
  font-family: var(--type-action-family);
  font-size: var(--type-meta-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__handoff .section-handoff__text > span {
  font-family: var(--type-body-small-family);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.hero__handoff .section-handoff__arrow {
  color: var(--color-turquoise);
  font-size: 1.25rem;
}

.card {
  border-radius: var(--radius-lg);
}

.card--dark {
  border: var(--border-dark);
  background: var(--color-surface-dark);
  box-shadow: var(--shadow-dark-card);
  backdrop-filter: blur(10px);
}

.hero-production-card {
  grid-area: proof;
  width: min(100%, 26rem);
  justify-self: end;
  padding: clamp(1.25rem, 2.2vw, 1.8rem);
}

.hero-proof__intro {
  text-align: center;
}

.hero-proof__intro h2 {
  margin: 0.8rem 0 0;
  color: #fff8ef;
  font-family: var(--type-heading-editorial-family);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: var(--type-heading-editorial-weight);
  line-height: var(--type-heading-editorial-line-height);
}

.hero-proof__intro p:not(.card-label) {
  max-width: 20rem;
  margin: 0.65rem auto 0;
  color: color-mix(in srgb, var(--color-ivory) 78%, transparent);
  font-family: var(--type-editorial-lead-family);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
}

.hero-proof__image {
  width: min(110%, 25.3rem);
  display: block;
  margin: 1.2rem 0 0 50%;
  transform: translateX(-50%);
}

.hero-proof__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.45rem 0 0;
  padding: 1.1rem 0;
  border-block: 1px solid color-mix(in srgb, var(--color-ivory) 24%, transparent);
}

.hero-proof__facts div {
  text-align: center;
}

.hero-proof__facts div + div {
  border-left: 1px solid color-mix(in srgb, var(--color-ivory) 24%, transparent);
}

.hero-proof__facts dt,
.hero-proof__facts dd,
.hero-proof__status p {
  margin: 0;
}

.hero-proof__facts dt {
  color: var(--color-ivory);
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3vw, 3.3rem);
  line-height: 0.95;
}

.hero-proof__facts dd {
  margin-top: 0.45rem;
  color: var(--color-turquoise);
  font-family: var(--type-label-family);
  font-size: 0.67rem;
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  line-height: var(--type-label-line-height);
  text-transform: uppercase;
}

.hero-proof__status {
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
  padding-left: 1.35rem;
  color: color-mix(in srgb, var(--color-ivory) 84%, transparent);
  font-family: var(--type-body-small-family);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.hero-proof__status p:first-child::before {
  width: 0.65rem;
  height: 0.65rem;
  display: inline-block;
  margin: 0 0.7rem 0 -1.35rem;
  border-radius: 50%;
  background: var(--color-turquoise);
  content: "";
}

.hero-proof__status strong {
  color: var(--color-coral);
  font-weight: 600;
}

.section--light {
  color: var(--color-anthracite);
  background: var(--color-ivory-soft);
}

.card--light {
  border: var(--border-light);
  background: var(--color-surface-light);
  box-shadow: var(--shadow-light-card);
}

.section-handoff {
  color: var(--color-petrol);
  transition: color var(--transition-soft);
}

.section-handoff:hover,
.section-handoff:focus-visible {
  color: var(--color-coral);
}


.section-handoff__text {
  min-width: 0;
}

.section-handoff__arrow {
  flex: 0 0 auto;
}

/* Connected production */
.connected-production {
  --connected-production-background: url("assets/backgrounds/connected-production/connected-production-desktop.webp");

  overflow: hidden;
  padding-block: clamp(5rem, 7vw, 7.4rem) clamp(3.8rem, 5vw, 5.2rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-ivory-soft) 42%, transparent), color-mix(in srgb, var(--color-ivory-soft) 68%, transparent)),
    var(--connected-production-background) center top / cover no-repeat,
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--color-turquoise) 10%, transparent), transparent 18rem),
    radial-gradient(circle at 14% 82%, color-mix(in srgb, var(--color-bordeaux) 5%, transparent), transparent 15rem),
    var(--color-ivory-soft);
}

.connected-production__intro {
  max-width: 58rem;
  margin: 0 auto;
  text-align: center;
}

.connected-production__label,
.connected-field > .section-label,
.connected-endpoint > .section-label {
  color: var(--color-petrol);
}

.connected-production__label::after,
.connected-domain h3::after {
  width: 3rem;
  height: 2px;
  display: block;
  margin: 0.9rem auto 0;
  background: var(--color-bordeaux);
  content: "";
}

.connected-production__title {
  max-width: 58rem;
  margin: 1.2rem auto 0;
  color: var(--color-anthracite);
  font-family: var(--type-display-section-family);
  font-size: var(--type-display-section-size);
  font-weight: var(--type-display-section-weight);
  line-height: var(--type-display-section-line-height);
  letter-spacing: var(--type-display-section-letter-spacing);
}

.connected-production__copy {
  max-width: 40rem;
  margin: 1.35rem auto 0;
  color: var(--color-text-on-light);
  font-family: var(--type-body-family);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
}

.connected-production__model {
  --connected-connector-gap: clamp(1rem, 2.8vw, 3rem);

  display: grid;
  grid-template-columns: minmax(10rem, 0.74fr) minmax(0, 2.4fr) minmax(10rem, 0.74fr);
  gap: var(--connected-connector-gap);
  align-items: center;
  margin-top: clamp(2.9rem, 4.5vw, 4.4rem);
}

.connected-endpoint {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}

.connected-endpoint::after {
  position: absolute;
  top: 50%;
  width: var(--connected-connector-gap);
  height: 1px;
  background: color-mix(in srgb, var(--color-petrol) 62%, transparent);
  content: "";
}

.connected-endpoint::after { display: none; }

.connected-icon {
  position: relative;
  width: clamp(5.6rem, 8vw, 7.2rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-petrol) 56%, transparent);
  border-radius: 50%;
  color: var(--color-petrol);
  background: color-mix(in srgb, var(--color-ivory-soft) 86%, transparent);
}

.connected-icon::before {
  width: 54%;
  height: 54%;
  background: currentColor;
  -webkit-mask: var(--connected-icon) center / contain no-repeat;
  mask: var(--connected-icon) center / contain no-repeat;
  content: "";
}

.connected-icon--author { --connected-icon: url("assets/icons/service/wlsm-icon-author.svg"); }
.connected-icon--narration { --connected-icon: url("assets/icons/service/wlsm-icon-narration.svg"); }
.connected-icon--production { --connected-icon: url("assets/icons/service/wlsm-icon-production.svg"); }
.connected-icon--review { --connected-icon: url("assets/icons/editorial-thematic/wlsm-icon-listening-headphones.svg"); }
.connected-icon--waveform { --connected-icon: url("assets/icons/editorial-thematic/wlsm-icon-audio-waveform.svg"); }

.connected-endpoint > p:last-child {
  max-width: 12rem;
  margin: 0;
  color: var(--color-text-on-light);
  font-family: var(--type-body-small-family);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.connected-field {
  padding: clamp(1.5rem, 3vw, 2.3rem) clamp(1rem, 2.4vw, 2.1rem) 1.65rem;
  border: 1px solid color-mix(in srgb, var(--color-petrol) 65%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-ivory-soft) 65%, transparent);
}

.connected-field > .section-label {
  display: block;
  margin: 0 0 1.55rem;
  text-align: center;
}

.connected-field__domains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.connected-domain {
  min-width: 0;
  display: grid;
  justify-items: center;
  padding: 0 clamp(0.9rem, 2vw, 1.8rem);
  text-align: center;
}

.connected-domain + .connected-domain {
  border-left: 1px dashed color-mix(in srgb, var(--color-petrol) 36%, transparent);
}

.connected-domain .connected-icon {
  width: 4.35rem;
  border: 0;
  background: transparent;
}

.connected-domain h3 {
  margin: 1rem 0 0;
  color: var(--color-petrol);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: 1.4;
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
}

.connected-domain h3::after { width: 2.25rem; margin-top: 0.7rem; }

.connected-domain p {
  margin: 1rem 0 0;
  color: var(--color-text-on-light);
  font-family: var(--type-body-small-family);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

@media (min-width: 721px) {
  .connected-production__model {
    position: relative;
    align-items: stretch;
  }

  .connected-endpoint,
  .connected-field {
    position: relative;
    z-index: 1;
  }

  .connected-endpoint {
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .connected-endpoint > .section-label { align-self: end; }
  .connected-endpoint > p:last-child { align-self: start; }
  .connected-endpoint::after { display: block; top: 50%; width: auto; transform: translateY(-50%); }
  .connected-endpoint--input::after { right: calc(var(--connected-connector-gap) * -1); left: 50%; }
  .connected-endpoint--output::after { right: 50%; left: calc(var(--connected-connector-gap) * -1); }
  .connected-endpoint .connected-icon { z-index: 1; }
  .connected-icon { background: var(--color-ivory-soft); }
  .connected-field { background: var(--color-ivory-soft); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .section-handoff {
    transition: none;
  }
}

.process {
  --process-stage-height: clamp(23.5rem, 29vw, 30rem);
  --process-surface: var(--color-ivory-soft);

  overflow: hidden;
  color: var(--color-anthracite);
  background: var(--process-surface);
}

.process__intro {
  position: relative;
  min-height: var(--process-stage-height);
  height: var(--process-stage-height);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding-block: clamp(4rem, 5.2vw, 5.25rem) clamp(5.5rem, 7vw, 6.5rem);
  color: var(--color-ivory);
  background:
    radial-gradient(circle at 84% 32%, rgba(75, 159, 168, 0.11), transparent 20rem),
    linear-gradient(135deg, var(--color-black-deep) 0%, #0b191c 58%, var(--color-anthracite) 100%);
}

.process__intro::after {
  position: absolute;
  z-index: 1;
  right: -6%;
  bottom: -1px;
  left: -6%;
  height: clamp(6.5rem, 11vw, 11rem);
  background: var(--process-surface);
  clip-path: polygon(0 46%, 9% 24%, 23% 30%, 38% 55%, 53% 64%, 68% 55%, 82% 32%, 92% 21%, 100% 28%, 100% 100%, 0 100%);
  content: "";
}

.process__background {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 86% 22%, rgba(75, 159, 168, 0.09), transparent 19rem),
    linear-gradient(12deg, transparent 0 42%, rgba(75, 159, 168, 0.035) 58%, transparent 72%);
  opacity: 0.52;
}

.process__intro-inner {
  position: relative;
  z-index: 2;
}

.process__label {
  color: var(--color-turquoise);
}

.process__title {
  max-width: 46rem;
  margin-top: 1rem;
  color: var(--color-ivory);
  font-family: var(--type-display-section-family);
  font-size: var(--type-display-section-size);
  font-weight: var(--type-display-section-weight);
  line-height: var(--type-display-section-line-height);
  letter-spacing: var(--type-display-section-letter-spacing);
}

.process__title span {
  color: var(--color-turquoise);
}

.process__copy {
  max-width: 37rem;
  margin-top: 1.35rem;
  color: color-mix(in srgb, var(--color-ivory) 90%, transparent);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
}

.process__copy p {
  margin: 0;
}

.process__body {
  position: relative;
  background: var(--process-surface);
}

.process__inner {
  padding-block: clamp(2.1rem, 3.5vw, 3.25rem) clamp(3.2rem, 5vw, 4.7rem);
}
.process-steps {
  --process-marker-size: clamp(4.5rem, 5.6vw, 5.25rem);
  --process-column-gap: clamp(1rem, 2.5vw, 2.5rem);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--process-column-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-step {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 2rem var(--process-marker-size) auto;
  justify-items: center;
  align-content: start;
  row-gap: 0.85rem;
  text-align: center;
}

.process-step::before,
.process-step::after {
  position: absolute;
  z-index: 0;
  top: calc(2.85rem + var(--process-marker-size) / 2);
  width: calc(50% + var(--process-column-gap) / 2);
  height: 1px;
  background: color-mix(in srgb, var(--color-petrol) 32%, transparent);
  content: "";
}

.process-step::before {
  right: 50%;
}

.process-step::after {
  left: 50%;
}

.process-step:first-child::before,
.process-step:last-child::after {
  display: none;
}

.process-step__number {
  color: var(--color-petrol);
  font-family: var(--type-heading-panel-family);
  font-size: var(--type-heading-panel-size);
  font-weight: var(--type-heading-panel-weight);
  line-height: var(--type-heading-panel-line-height);
}

.process-step__marker {
  position: relative;
  z-index: 1;
  width: var(--process-marker-size);
  height: var(--process-marker-size);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-petrol) 72%, transparent);
  border-radius: 50%;
  background: var(--process-surface);
  box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--process-surface) 94%, transparent);
}

.process-step__icon {
  width: 56%;
  height: 56%;
  object-fit: contain;
}

.process-step__content {
  width: 100%;
  min-width: 0;
}

.process-step__title,
.process-step__description {
  margin: 0;
}

.process-step__title {
  color: var(--color-petrol);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: var(--type-label-text-transform);
  text-wrap: balance;
}

.process-step__description {
  max-width: 15.5rem;
  margin: 0.7rem auto 0;
  color: var(--color-text-on-light);
  font-family: var(--type-body-small-family);
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-small-weight);
  line-height: var(--type-body-small-line-height);
  letter-spacing: var(--type-body-small-letter-spacing);
}

.process__closing {
  max-width: 48rem;
  margin: clamp(3.2rem, 4.5vw, 4.25rem) auto 0;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-petrol) 24%, transparent);
  color: var(--color-anthracite);
  font-family: var(--type-editorial-lead-family);
  font-size: var(--type-editorial-lead-size);
  font-weight: var(--type-editorial-lead-weight);
  line-height: var(--type-editorial-lead-line-height);
  text-align: center;
}

.process__closing span {
  color: var(--color-petrol);
}

@media (min-width: 721px) {
  .process__intro {
    overflow: hidden;
    background: transparent;
  }

  .process__intro::after {
    display: none;
  }

  .process__background {
    background-image: url("assets/backgrounds/process/process-desktop.webp");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: max(1280px, 100vw) auto;
    opacity: 1;
  }

  .process__background::after {
    display: none;
  }

  .process__body {
    background: var(--process-surface);
  }
}

@media (max-width: 960px) {
  .process-steps {
    --process-column-gap: clamp(0.7rem, 1.5vw, 1rem);
  }

}

@media (min-width: 721px) {
  .hero__title { font-size: clamp(2.5rem, 1.3rem + 4.15vw, 4.75rem); }
}

@media (max-width: 720px) {
  .process {
    --process-stage-height: clamp(25.5rem, 108vw, 27rem);
  }

  .process__intro {
    overflow: hidden;
    padding-block: 3.7rem 6.1rem;
    background: var(--color-black-deep);
  }

  .process__intro::after {
    display: block;
    right: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3.75rem;
    border-radius: 0;
    background: var(--process-surface);
    clip-path: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2018%20C150%205%20275%2025%20390%2044%20C525%2066%20700%2056%20815%2038%20C885%2027%20940%2027%201000%2030%20L1000%20120%20L0%20120%20Z'%20fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2018%20C150%205%20275%2025%20390%2044%20C525%2066%20700%2056%20815%2038%20C885%2027%20940%2027%201000%2030%20L1000%20120%20L0%20120%20Z'%20fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    filter: drop-shadow(0 -1px 1px rgba(244, 239, 229, 0.12));
  }

  .process__background {
    background-image: url("assets/backgrounds/process/process-mobile.webp");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 110% auto;
    opacity: 0.88;
  }

  .process__background::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9, 13, 15, 0.5) 0%, rgba(9, 13, 15, 0.26) 56%, transparent 72%);
    content: "";
  }

  .process__background::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 52%;
    background: linear-gradient(180deg, transparent 0%, rgba(9, 13, 15, 0.22) 28%, rgba(9, 13, 15, 0.72) 72%, var(--color-black-deep) 100%);
    content: "";
  }

  .process__title {
    max-width: 23rem;
    margin-top: 0.9rem;
  }

  .process__title span {
    display: block;
  }

  .process__copy {
    max-width: 30rem;
    margin-top: 1.15rem;
  }

  .process__inner {
    padding-block: 1.25rem 3.2rem;
  }

  .process-steps {
    --process-marker-size: 3.4rem;

    max-width: 39rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    margin-inline: auto;
  }

  .process-step {
    grid-template-columns: 2.4rem var(--process-marker-size) minmax(0, 1fr);
    grid-template-rows: auto;
    justify-items: start;
    align-items: start;
    gap: 0.75rem;
    text-align: left;
  }

  .process-step::before {
    display: none;
  }

  .process-step::after {
    left: calc(2.4rem + 0.75rem + var(--process-marker-size) / 2);
    right: auto;
    top: calc(0.3rem + var(--process-marker-size) / 2);
    width: 1px;
    height: calc(100% + 1.75rem);
    transform: translateX(-50%);
  }

  .process-step__number {
    width: 100%;
    padding-top: 0;
    text-align: right;
  }

  .process-step__marker {
    margin-top: 0.3rem;
  }

  .process-step__description {
    max-width: none;
    margin: 0.4rem 0 0;
    font-size: var(--type-body-small-size);
    line-height: var(--type-body-small-line-height);
  }

  .process__closing {
    max-width: 30rem;
    margin-top: 2.7rem;
    text-align: center;
  }

}

.site-footer {
  padding: 1.75rem 0;
  color: color-mix(in srgb, var(--color-ivory) 66%, transparent);
  background: #070a0b;
  font-family: var(--type-body-small-family);
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-small-weight);
  line-height: var(--type-body-small-line-height);
  letter-spacing: var(--type-body-small-letter-spacing);
}
.site-footer__inner {
  width: min(100%, var(--content-max-width));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 4rem;
  margin: 0 auto;
  padding-inline: var(--content-gutter);
}
.site-footer__logo { display: inline-flex; flex: 0 0 auto; text-decoration: none; }
.site-footer__logo img { display: block; width: auto; height: 2rem; }
.site-footer__meta { display: grid; justify-items: end; gap: 0.45rem; text-align: right; }
.site-footer__meta p { margin: 0; }
.site-footer__legal { display: flex; gap: 1rem; }
.site-footer__legal a { color: color-mix(in srgb, var(--color-ivory) 74%, transparent); }
.site-footer__legal a:hover { color: var(--color-ivory); }

.legal-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at top left, rgba(107, 191, 189, 0.12), transparent 28rem),
    linear-gradient(135deg, var(--color-black-deep), var(--color-anthracite));
}

.legal-main {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  color: var(--color-ivory);
}

.legal-main h1 {
  margin: 0;
  font-family: var(--type-display-page-family);
  font-size: var(--type-display-page-size);
  font-weight: var(--type-display-page-weight);
  line-height: var(--type-display-page-line-height);
}

.legal-main h2 {
  margin: 2.25rem 0 0.75rem;
  color: #ffffff;
  font-family: var(--type-heading-functional-family);
  font-size: var(--type-heading-functional-size);
  font-weight: var(--type-heading-functional-weight);
  line-height: var(--type-heading-functional-line-height);
}

.legal-main p {
  --type-body-line-height: 1.7;

  margin: 0.875rem 0 0;
  color: var(--color-muted);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
}

.legal-note {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-ivory) 18%, transparent);
}

@media (max-width: 960px) {
  :root {
    --content-gutter: 2rem;
  }

  .site-nav {
    gap: 1.15rem;
  }


  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "lead"
      "proof"
      "actions"
      "handoff";
  }

  .hero-production-card {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  :root {
    --content-gutter: 1.25rem;
    --type-display-hero-line-height: 1.06;
    --type-editorial-lead-size: 1.08rem;
    --type-heading-editorial-size: 1.65rem;
    --hero-background-image: url("assets/backgrounds/hero/hero-mobile.webp");
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-block: 1.25rem;
    transform: translateY(0);
    transition: transform var(--transition-soft);
  }

  .site-header--surfaced {
    background: color-mix(in srgb, var(--color-black-deep) 94%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-ivory) 12%, transparent);
  }

  .site-header--hidden {
    transform: translateY(-100%);
  }

  .site-header--hidden:focus-within {
    transform: translateY(0);
  }

  .site-logo__image {
    height: 2.5rem;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0.4rem var(--content-gutter) 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-ivory) 12%, transparent);
    background: var(--color-black-deep);
    max-height: calc(100vh - 5rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  @supports (height: 100dvh) {
    .site-nav {
      max-height: calc(100dvh - 5rem);
    }
  }

  .site-nav.is-open {
    display: grid;
  }

  .site-nav a {
    min-height: 2.85rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--color-ivory) 10%, transparent);
  }

  .site-nav a:last-child {
    border-bottom: 0;
  }

  .site-nav-toggle {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-grid;
    align-content: center;
    justify-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-ivory) 22%, transparent);
    border-radius: var(--radius-sm);
    color: var(--color-ivory);
    background: transparent;
    cursor: pointer;
  }

  .site-nav-toggle span {
    width: 1.1rem;
    height: 1px;
    display: block;
    background: currentColor;
  }

  .site-nav-toggle:focus-visible {
    outline: 2px solid var(--color-turquoise);
    outline-offset: 3px;
  }

  .section {
    scroll-margin-top: 5.5rem;
  }

  .hero {
    min-height: calc(100vh - 88px);
    padding-block: 7rem var(--section-padding-y-mobile);
  }

  .hero::before {
    opacity: 0.42;
  }

  .hero::after {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--color-black-deep) 88%, transparent) 0%, color-mix(in srgb, var(--color-black-deep) 74%, transparent) 45%, color-mix(in srgb, var(--color-black-deep) 90%, transparent) 100%),
      radial-gradient(circle at 78% 22%, rgba(107, 191, 189, 0.08), transparent 14rem);
  }

  .hero__atmosphere {
    background-position: 58% center;
    opacity: 0.36;
  }

  .hero__inner {
    gap: 1.7rem;
  }

  .section-title {
    margin-top: 1.05rem;
  }

  .section-copy {
    margin-top: 1.3rem;
  }

  .hero-production-card {
    width: 100%;
  }

  .cta-row {
    width: 100%;
  }

  .hero__handoff { width: 100%; margin-top: 0.5rem; }

  .hero-proof__image { width: min(110%, 22rem); }

  .hero-proof__status { font-size: 0.9rem; }

  .site-footer {
    padding-block: 2rem;
  }

  .site-footer__inner {
    display: grid;
    justify-items: start;
    gap: 1.15rem;
  }

  .site-footer__logo img {
    height: 1.8rem;
  }

  .site-footer__meta {
    justify-items: start;
    gap: 0.6rem;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

@media (max-width: 720px) {
  :root {
    --type-display-section-feature-size: clamp(2.62rem, 12vw, 3.25rem);
    --type-display-section-feature-line-height: 1.02;
    --type-display-section-size: clamp(2.25rem, 8vw, 2.65rem);
    --type-display-section-line-height: 1.02;
  }

}

/* Are we a fit? */
.fit {
  overflow: hidden;
  padding-block: clamp(4.2rem, 5.8vw, 5.9rem) clamp(3.5rem, 5vw, 4.9rem);
  background:
    radial-gradient(circle at 8% 3%, color-mix(in srgb, var(--color-petrol) 6%, transparent), transparent 14rem),
    radial-gradient(circle at 96% 88%, color-mix(in srgb, var(--color-bordeaux) 5%, transparent), transparent 16rem),
    var(--color-ivory-soft);
}

.fit__atmosphere,
.fit__atmosphere::after {
  position: absolute;
  z-index: 0;
  width: clamp(11rem, 19vw, 17rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--color-petrol) 7%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.fit__atmosphere {
  top: -7rem;
  left: -7rem;
  box-shadow: 0 0 0 1.25rem color-mix(in srgb, var(--color-petrol) 3%, transparent), 0 0 0 2.7rem color-mix(in srgb, var(--color-petrol) 2%, transparent);
}

.fit__atmosphere::after {
  top: calc(100vh - 11rem);
  left: calc(100vw - clamp(8rem, 15vw, 14rem));
  border-color: color-mix(in srgb, var(--color-bordeaux) 7%, transparent);
  box-shadow: 0 0 0 1.25rem color-mix(in srgb, var(--color-bordeaux) 3%, transparent), 0 0 0 2.7rem color-mix(in srgb, var(--color-bordeaux) 2%, transparent);
}

.fit__inner { width: min(100%, 1440px); }
.fit__intro { max-width: none; margin: 0 auto; text-align: center; }
.fit__label { color: var(--color-bordeaux); }

.fit__title {
  max-width: none;
  margin: 0.75rem auto 0;
  color: var(--color-anthracite);
  font-family: var(--type-display-section-family);
  font-size: var(--type-display-section-size);
  font-weight: var(--type-display-section-weight);
  line-height: var(--type-display-section-line-height);
  letter-spacing: var(--type-display-section-letter-spacing);
  text-wrap: balance;
}

.fit__copy {
  max-width: 44rem;
  margin: 1.05rem auto 0;
  color: var(--color-text-on-light);
  font-family: var(--type-editorial-lead-family);
  font-size: var(--type-editorial-lead-size);
  font-weight: var(--type-editorial-lead-weight);
  line-height: var(--type-editorial-lead-line-height);
}

.fit__overview {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(1rem, 1.8vw, 1.45rem);
  align-items: start;
  margin-top: clamp(2.05rem, 3.6vw, 2.85rem);
}

.fit-panel,
.fit-planning {
  border: var(--border-light);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-ivory-soft) 80%, white);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-anthracite) 4%, transparent);
}

.fit-panel { padding: clamp(1.35rem, 2.05vw, 1.8rem) clamp(1.4rem, 2.3vw, 2rem); }
.fit-panel__header { display: flex; align-items: center; gap: 0.65rem; }
.fit-panel__badge { width: clamp(2.5rem, 3vw, 3.1rem); height: clamp(2.5rem, 3vw, 3.1rem); flex: 0 0 auto; }

.fit-panel__header h3,
.fit-planning h3 {
  margin: 0;
  font-family: var(--type-heading-panel-family);
  font-size: var(--type-heading-panel-size);
  font-weight: var(--type-heading-panel-weight);
  line-height: var(--type-heading-panel-line-height);
  text-wrap: balance;
}

.fit-panel--positive .fit-panel__header h3,
.fit-planning h3 { color: var(--color-petrol); }
.fit-panel--alternative { border-color: color-mix(in srgb, var(--color-bordeaux) 14%, transparent); }
.fit-panel--alternative .fit-panel__header h3 { color: var(--color-bordeaux); }

.fit-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}

.fit-category {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding-inline: 0.6rem;
  text-align: center;
}

.fit-category + .fit-category::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: color-mix(in srgb, var(--color-petrol) 13%, transparent);
  content: "";
}

.fit-category__icon { width: clamp(3rem, 3.4vw, 3.65rem); height: clamp(3rem, 3.4vw, 3.65rem); object-fit: contain; }
.fit-category h4,
.fit-alternatives h4 { margin: 0; color: var(--color-anthracite); font-family: var(--type-heading-component-family); font-size: var(--type-heading-component-size); font-weight: var(--type-heading-component-weight); line-height: var(--type-heading-component-line-height); }
.fit-category p { margin: 0.28rem 0 0; color: var(--color-text-on-light); font-family: var(--type-meta-family); font-size: calc(var(--type-meta-size) * 0.94); font-weight: var(--type-meta-weight); line-height: var(--type-meta-line-height); }

.fit-panel__genre {
  margin: 1.1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid color-mix(in srgb, var(--color-petrol) 13%, transparent);
  color: var(--color-text-on-light);
  font-family: var(--type-meta-family);
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-line-height);
  text-align: center;
}

.fit-panel__genre span { display: block; margin-bottom: 0.3rem; color: var(--color-petrol); font-family: var(--type-action-family); font-size: 0.78em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fit-alternatives { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.fit-alternatives li { padding: 0.95rem 0; }
.fit-alternatives p { margin: 0.2rem 0 0; color: var(--color-text-on-light); font-family: var(--type-meta-family); font-size: var(--type-meta-size); font-weight: var(--type-meta-weight); line-height: var(--type-meta-line-height); }

.fit-planning {
  margin-top: clamp(2rem, 3.6vw, 2.75rem);
  padding: 0 clamp(1.45rem, 2.5vw, 1.8rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fit-planning__intro { max-width: 44rem; margin: 0 auto; text-align: center; }
.fit-planning__intro p,
.fit-planning__categories p { color: var(--color-text-on-light); font-family: var(--type-meta-family); font-size: var(--type-meta-size); font-weight: var(--type-meta-weight); line-height: var(--type-meta-line-height); }
.fit-planning__intro p { margin: 0.55rem 0 0; }
.fit-planning__categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); margin: 1.45rem 0 0; padding: 0; list-style: none; }
.fit-planning__categories li { min-width: 0; padding: 0; text-align: center; }
.fit-planning__motif { position: relative; display: flex; align-items: center; justify-content: space-between; height: 0.65rem; margin: 0 auto 0.42rem; color: var(--color-petrol); }
.fit-planning__motif::before { position: absolute; z-index: 0; right: 0; left: 0; height: 1px; background: color-mix(in srgb, var(--color-petrol) 44%, transparent); content: ""; }
.fit-planning__motif span { position: relative; z-index: 1; display: block; width: 0.38rem; height: 0.38rem; border: 1px solid var(--color-petrol); border-radius: 50%; background: var(--color-petrol); }
.fit-planning__motif--solo { width: 1.7rem; justify-content: center; }
.fit-planning__motif--dual { width: 2.15rem; }
.fit-planning__motif--series { width: 2.7rem; }
.fit-planning__motif--series::before { right: -0.55rem; }
.fit-planning__motif--dual span:last-child,
.fit-planning__motif--series span:last-child { border-color: var(--color-bordeaux); background: var(--color-bordeaux); }
.fit-planning__categories h4 { margin: 0; color: var(--color-petrol); font-family: var(--type-editorial-statement-family); font-size: var(--type-editorial-statement-size); font-weight: var(--type-editorial-statement-weight); line-height: var(--type-editorial-statement-line-height); }
.fit-planning__categories p { margin: 0.35rem 0 0; }

@media (max-width: 960px) {
  .fit__overview { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .fit-panel { padding-inline: clamp(1.35rem, 3vw, 1.8rem); }
}

@media (max-width: 720px) {
  .fit { padding-block: 3.45rem 3rem; }
  .fit__atmosphere { top: -8rem; left: -8rem; }
  .fit__atmosphere::after { top: calc(100vh - 10rem); left: calc(100vw - 10rem); }
  .fit__title { max-width: 25rem; margin-top: 0.7rem; }
  .fit__copy { max-width: 31rem; margin-top: 0.9rem; }
  .fit__overview { gap: 0.8rem; margin-top: 1.85rem; }
  .fit-panel { padding: 1.1rem; }
  .fit-panel__header { align-items: flex-start; gap: 0.65rem; }
  .fit-panel__badge { width: 2.4rem; height: 2.4rem; }
  .fit-categories { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
  .fit-category { grid-template-columns: 2.85rem minmax(0, 1fr); justify-items: start; gap: 0.75rem; padding: 0.85rem 0; text-align: left; }
  .fit-category + .fit-category::before { top: 0; right: 0; bottom: auto; width: auto; height: 1px; }
  .fit-category__icon { width: 2.85rem; height: 2.85rem; }
  .fit-panel__genre { margin-top: 0.95rem; padding-top: 0.7rem; text-align: left; }
  .fit-alternatives { margin-top: 0.9rem; }
  .fit-alternatives li { padding: 0.85rem 0; }
  .fit-planning { margin-top: 1.85rem; padding: 0; }
  .fit-planning__categories { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.15rem; }
  .fit-planning__categories li { padding: 0; text-align: left; }
  .fit-planning__motif { margin: 0 0 0.42rem; }
}

/* Voice fit before production */
.voice-fit { overflow: hidden; padding-block: clamp(4.5rem, 6.4vw, 6.5rem) clamp(3.65rem, 5vw, 5rem); background: radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--color-petrol) 6%, transparent), transparent 17rem), radial-gradient(circle at 95% 78%, color-mix(in srgb, var(--color-bordeaux) 5%, transparent), transparent 19rem), var(--color-ivory); }
.voice-fit__atmosphere, .voice-fit__atmosphere::after { position: absolute; z-index: 0; width: clamp(12rem, 21vw, 18rem); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--color-petrol) 7%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
.voice-fit__atmosphere { top: -8rem; right: -8rem; box-shadow: 0 0 0 1.3rem color-mix(in srgb, var(--color-petrol) 3%, transparent), 0 0 0 2.8rem color-mix(in srgb, var(--color-petrol) 2%, transparent); }
.voice-fit__atmosphere::after { top: calc(100vh - 6rem); right: calc(100vw - 8rem); border-color: color-mix(in srgb, var(--color-bordeaux) 7%, transparent); box-shadow: 0 0 0 1.3rem color-mix(in srgb, var(--color-bordeaux) 3%, transparent), 0 0 0 2.8rem color-mix(in srgb, var(--color-bordeaux) 2%, transparent); }
.voice-fit__inner { width: min(100%, 1280px); }
.voice-fit__intro { max-width: 53rem; margin: 0 auto; text-align: center; }
.voice-fit__label { color: var(--color-bordeaux); }
.voice-fit__title { margin: 0.75rem auto 0; color: var(--color-anthracite); font-family: var(--type-display-section-family); font-size: var(--type-display-section-size); font-weight: var(--type-display-section-weight); line-height: var(--type-display-section-line-height); letter-spacing: var(--type-display-section-letter-spacing); text-wrap: balance; }
.voice-fit__copy { max-width: 48rem; margin: 1.05rem auto 0; color: var(--color-text-on-light); font-family: var(--type-editorial-lead-family); font-size: var(--type-editorial-lead-size); font-weight: var(--type-editorial-lead-weight); line-height: var(--type-editorial-lead-line-height); }
.voice-fit__journey-frame { position: relative; margin-top: clamp(2.8rem, 5vw, 4.35rem); }
.voice-fit__journey { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 4.5rem); margin: 0; padding: 0; list-style: none; }
.voice-fit__audio-thread { position: absolute; z-index: 0; top: calc(1rem + clamp(1.15rem, 2.15vw, 1.75rem) + clamp(3.4rem, 5.15vw, 4.125rem) - 1.75rem); left: 7%; width: 86%; height: 3.5rem; opacity: 0.34; object-fit: fill; pointer-events: none; }
.voice-fit-stage { position: relative; z-index: 1; display: grid; justify-items: center; min-width: 0; text-align: center; }
.voice-fit-stage__label { margin: 0; color: var(--color-petrol); font-family: var(--type-label-family); font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-line-height); letter-spacing: var(--type-label-letter-spacing); text-transform: var(--type-label-text-transform); }
.voice-fit-stage__icon { position: relative; width: clamp(5.55rem, 8.1vw, 6.6rem); aspect-ratio: 1; display: grid; place-items: center; margin-top: clamp(2rem, 3vw, 2.55rem); border: 1px solid color-mix(in srgb, var(--color-petrol) 32%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--color-ivory-soft) 91%, white); box-shadow: 0 10px 26px color-mix(in srgb, var(--color-anthracite) 5%, transparent); }
.voice-fit-stage__icon img { width: 51%; height: 51%; object-fit: contain; }
.voice-fit-stage__content { max-width: 20rem; margin-top: clamp(1.35rem, 2vw, 1.8rem); }
.voice-fit-stage h3 { margin: 0; color: var(--color-anthracite); font-family: var(--type-heading-panel-family); font-size: var(--type-heading-panel-size); font-weight: var(--type-heading-panel-weight); line-height: var(--type-heading-panel-line-height); text-wrap: balance; }
.voice-fit-stage p:not(.voice-fit-stage__label) { margin: 0.72rem 0 0; color: var(--color-text-on-light); font-family: var(--type-body-small-family); font-size: var(--type-body-small-size); font-weight: var(--type-body-small-weight); line-height: var(--type-body-small-line-height); }
.voice-fit-stage--listening .voice-fit-stage__icon { width: clamp(6.8rem, 10.3vw, 8.25rem); margin-top: clamp(1.15rem, 2.15vw, 1.75rem); box-shadow: 0 0 0 0.65rem color-mix(in srgb, var(--color-petrol) 3%, transparent), 0 14px 30px color-mix(in srgb, var(--color-anthracite) 6%, transparent); }
.voice-fit-stage--listening .voice-fit-stage__icon img { width: 60%; height: 60%; }
.voice-fit-stage--listening .voice-fit-stage__content { margin-top: clamp(1.55rem, 2.5vw, 2.15rem); }
.voice-fit__trust { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2.3vw, 1.7rem); align-items: center; max-width: 1120px; margin: clamp(3rem, 5.5vw, 4.5rem) auto 0; padding: clamp(1.35rem, 2.25vw, 1.85rem) clamp(1.45rem, 3vw, 2.5rem); border: 1px solid color-mix(in srgb, var(--color-turquoise) 23%, transparent); border-radius: var(--radius-lg); color: var(--color-ivory); background: linear-gradient(105deg, color-mix(in srgb, var(--color-black-deep) 98%, transparent), color-mix(in srgb, var(--color-petrol) 58%, var(--color-anthracite))), var(--color-anthracite); box-shadow: var(--shadow-light-card); }
.voice-fit__trust-icon { width: clamp(4.25rem, 6.5vw, 5.4rem); height: auto; opacity: 0.9; filter: brightness(0) invert(1) opacity(0.78); }
.voice-fit__trust h3 { margin: 0; font-family: var(--type-heading-panel-family); font-size: var(--type-heading-panel-size); font-weight: var(--type-heading-panel-weight); line-height: var(--type-heading-panel-line-height); text-wrap: balance; }
.voice-fit__trust p { max-width: 51rem; margin: 0.48rem 0 0; color: color-mix(in srgb, var(--color-ivory) 78%, transparent); font-family: var(--type-body-small-family); font-size: var(--type-body-small-size); font-weight: var(--type-body-small-weight); line-height: var(--type-body-small-line-height); }
@media (max-width: 900px) {
  .voice-fit__journey-frame { max-width: 46rem; margin-inline: auto; }
  .voice-fit__journey { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .voice-fit__audio-thread { display: none; }
  .voice-fit__journey::before { position: absolute; top: 5.2rem; bottom: 5.2rem; left: 2.5rem; width: 1px; background: color-mix(in srgb, var(--color-petrol) 26%, transparent); content: ""; }
  .voice-fit-stage { grid-template-columns: 5rem minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; column-gap: clamp(1rem, 3vw, 1.7rem); padding: 0 0 2rem; text-align: left; }
  .voice-fit-stage + .voice-fit-stage { padding-top: 0.35rem; }
  .voice-fit-stage__label { grid-column: 2; grid-row: 1; padding-top: 0.2rem; }
  .voice-fit-stage__icon, .voice-fit-stage--listening .voice-fit-stage__icon { grid-column: 1; grid-row: 1 / -1; width: 5rem; margin-top: 0; box-shadow: 0 8px 18px color-mix(in srgb, var(--color-anthracite) 5%, transparent); }
  .voice-fit-stage--listening .voice-fit-stage__icon { box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--color-petrol) 3%, transparent), 0 8px 18px color-mix(in srgb, var(--color-anthracite) 5%, transparent); }
  .voice-fit-stage__content, .voice-fit-stage--listening .voice-fit-stage__content { grid-column: 2; grid-row: 2; max-width: 35rem; margin-top: 0.4rem; }
  .voice-fit__trust { margin-top: 1.45rem; }
}

@media (max-width: 720px) {
  .voice-fit { padding-block: 3.65rem 3.25rem; }
  .voice-fit__atmosphere { top: -9rem; right: -9rem; }
  .voice-fit__atmosphere::after { top: calc(100vh - 8rem); right: calc(100vw - 10rem); }
  .voice-fit__title { max-width: 25rem; margin-top: 0.7rem; }
  .voice-fit__copy { max-width: 31rem; margin-top: 0.9rem; }
  .voice-fit__journey-frame { margin-top: 2.35rem; }
  .voice-fit__journey::before { display: none; }
  .voice-fit-stage { grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: 0.95rem; padding-bottom: 1.75rem; }
  .voice-fit-stage:not(:last-child)::after { position: absolute; z-index: 0; top: 4.65rem; right: auto; bottom: 0.1rem; left: 2.1rem; width: 1px; height: auto; background: color-mix(in srgb, var(--color-petrol) 26%, transparent); content: ""; transform: translateX(-50%); }
  .voice-fit-stage__icon, .voice-fit-stage--listening .voice-fit-stage__icon { width: 4.2rem; }
  .voice-fit-stage h3 { font-size: clamp(1.32rem, 5.7vw, 1.55rem); }
  .voice-fit-stage p:not(.voice-fit-stage__label) { margin-top: 0.48rem; }
  .voice-fit__trust { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.7rem; align-items: start; margin-top: 1.2rem; padding: 1.2rem; }
  .voice-fit__trust-icon { grid-column: 1; grid-row: 1; align-self: start; width: 2.75rem; margin-top: 0.1rem; }
  .voice-fit__trust > div { grid-column: 2; grid-row: 1; min-width: 0; }
  .voice-fit__trust p { margin-top: 0.42rem; }
}

/* Samples */
.samples{overflow:hidden;
padding-block:clamp(4.75rem,7vw,6.5rem) clamp(3.5rem,5vw,4.75rem);
background:var(--color-ivory)}
.samples__atmosphere{position:absolute;
z-index:0;
top:0;
right:0;
left:auto;
width:min(100%,96rem);
height:clamp(29rem,34vw,35rem);
background:url("assets/backgrounds/samples/samples-desktop.webp") right top/min(72rem,100%) auto no-repeat;
pointer-events:none}
.samples__atmosphere::after{position:absolute;
inset:0;
background:radial-gradient(78% 28% at 28% 100%,var(--color-ivory) 0%,rgba(244,239,229,.72) 50%,transparent 100%),linear-gradient(90deg,rgba(244,239,229,.72) 0%,rgba(244,239,229,.36) 37%,rgba(244,239,229,.04) 66%),linear-gradient(180deg,transparent 36%,rgba(244,239,229,.48) 58%,var(--color-ivory) 82%);
content:""}
.samples__inner{width:min(100%,1180px)}
.samples__intro{max-width:min(42%,31rem);
min-height:clamp(21rem,25vw,24rem)}
@media (min-width:1600px){.samples__showcase{margin-top:1.5rem}}
.samples__label,.samples__title em{color:var(--color-bordeaux)}
.samples__title em{display:inline-block;
font-size:.68em;
line-height:1.04}
.samples__title{margin:.7rem 0 0;
color:var(--color-anthracite);
font-family:var(--type-display-section-family);
font-size:var(--type-display-section-size);
font-weight:var(--type-display-section-weight);
line-height:var(--type-display-section-line-height);
letter-spacing:var(--type-display-section-letter-spacing)}
.samples__copy{display:grid;
gap:.72rem;
max-width:30rem;
margin-top:1.15rem;
color:var(--color-text-on-light);
font-family:var(--type-body-family);
font-size:var(--type-body-size);
font-weight:var(--type-body-weight);
line-height:var(--type-body-line-height);
letter-spacing:var(--type-body-letter-spacing)}
.samples__copy p,.samples__listening-cue p{margin:0}
.samples__copy p+p{font-family:var(--type-body-small-family);
font-size:var(--type-body-small-size);
font-weight:var(--type-body-small-weight);
line-height:var(--type-body-small-line-height);
letter-spacing:var(--type-body-small-letter-spacing)}
.samples__listening-cue{display:grid;
grid-template-columns:2.35rem minmax(0,1fr);
gap:.75rem;
align-items:center;
max-width:27rem;
margin-top:1.15rem;
padding-top:1rem;
border-top:1px solid color-mix(in srgb,var(--color-petrol) 19%,transparent);
color:var(--color-petrol);
font-family:var(--type-body-small-family);
font-size:var(--type-body-small-size);
font-weight:var(--type-body-small-weight);
line-height:var(--type-body-small-line-height);
letter-spacing:var(--type-body-small-letter-spacing)}
.samples__listening-icon{width:1.55rem;
height:1.55rem;
object-fit:contain;
justify-self:center}
.samples__showcase{display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(1.5rem,2.5vw,2.5rem)}
.narrator{display:grid;
grid-template-columns:clamp(9rem,11.5vw,11rem) minmax(0,1fr);
gap:clamp(.75rem,1.3vw,1rem);
align-items:start;
min-width:0}
.narrator+.narrator{padding-left:clamp(1.25rem,2.5vw,2.5rem);
border-left:1px solid color-mix(in srgb,var(--color-anthracite) 13%,transparent)}
.narrator__portrait{width:100%;
height:clamp(11rem,15vw,12.5rem);
object-fit:contain;
object-position:center bottom;
box-shadow:inset 0 0 1.25rem 0.1rem color-mix(in srgb,var(--color-ivory) 80%,transparent)}
.narrator--aiden .narrator__portrait{width:112%;
max-width:none;
justify-self:center}
.narrator__content{min-width:0}
.narrator__identity{padding-bottom:1rem;
border-bottom:1px solid color-mix(in srgb,var(--color-anthracite) 13%,transparent)}
.narrator__identity h3{margin:0;
color:var(--color-anthracite);
font-family:var(--type-heading-editorial-family);
font-size:var(--type-heading-panel-size);
font-weight:var(--type-heading-panel-weight);
line-height:var(--type-heading-panel-line-height)}
.narrator__identity p,.sample-card__mood,.samples-guidance__block h3{margin:.42rem 0 0;
font-family:var(--type-label-family);
font-size:var(--type-label-size);
font-weight:var(--type-label-weight);
line-height:var(--type-label-line-height);
letter-spacing:var(--type-label-letter-spacing);
text-transform:var(--type-label-text-transform)}
.narrator__identity p{color:var(--color-bordeaux)}
.narrator--aiden .narrator__identity p{color:var(--color-petrol)}
.narrator__samples{display:grid;
grid-template-columns:minmax(0,1fr);
gap:.6rem;
margin-top:1rem}
.sample-card{--sample-accent:var(--color-petrol);
min-width:0;
display:block;
padding:.75rem .95rem;
border:var(--border-light);
border-radius:var(--radius-md);
background:color-mix(in srgb,var(--color-ivory-soft) 88%,white)}
.sample-card--bordeaux{--sample-accent:var(--color-bordeaux)}
.sample-card__mood{margin:0;
color:var(--sample-accent)}
.sample-card h4{margin:.3rem 0 0;
color:var(--color-anthracite);
font-family:var(--type-heading-component-family);
font-size:var(--type-heading-component-size);
font-weight:var(--type-heading-component-weight);
line-height:var(--type-heading-component-line-height)}
.sample-card__control{display:flex;
gap:.75rem;
align-items:center;
min-width:0;
margin-top:.65rem;
color:color-mix(in srgb,var(--color-anthracite) 65%,transparent);
font:var(--type-meta-size)/var(--type-meta-line-height) var(--type-body-small-family)}
.sample-card .audio-button{--audio-button-fill:var(--sample-accent)}
.sample-card__waveform{width:clamp(6rem,10vw,8rem);
min-width:5rem;
flex:0 1 clamp(6rem,10vw,8rem);
aspect-ratio:278.972 / 76.738;
align-self:center;
background-color:var(--sample-accent);
-webkit-mask:url("assets/icons/editorial-thematic/wlsm-icon-audio-waveform.svg") center / contain no-repeat;
mask:url("assets/icons/editorial-thematic/wlsm-icon-audio-waveform.svg") center / contain no-repeat}
.sample-card__duration{flex:0 0 auto;
color:color-mix(in srgb,var(--color-anthracite) 68%,transparent);
font-family:var(--type-meta-family);
font-size:var(--type-meta-size);
font-weight:var(--type-meta-weight);
line-height:var(--type-meta-line-height);
letter-spacing:var(--type-meta-letter-spacing);
white-space:nowrap}

.samples__guidance{display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(1.5rem,3vw,2.5rem);
margin-top:clamp(2.5rem,5vw,4rem)}
.samples-guidance__block{display:grid;
grid-template-columns:2.8rem minmax(0,1fr);
gap:.8rem;
padding:clamp(1.25rem,2.2vw,1.8rem) clamp(0rem,2.2vw,2.2rem)}

.samples-guidance__block img{width:2.2rem;
max-height:2.2rem;
object-fit:contain}
.samples-guidance__icon--ear{width:1.52rem;
height:2.2rem;
justify-self:center}
.samples-guidance__block h3{margin:0;
color:var(--color-petrol)}
.samples-guidance__block p{margin:.48rem 0 0;
color:var(--color-text-on-light);
font-family:var(--type-meta-family);
font-size:var(--type-meta-size);
font-weight:var(--type-meta-weight);
line-height:var(--type-meta-line-height);
letter-spacing:var(--type-meta-letter-spacing)}
@media(max-width:960px){.samples__intro{max-width:min(48%,31rem);
min-height:clamp(25rem,48vw,29rem)}
.samples__showcase{grid-template-columns:minmax(0,1fr);
gap:2rem;
max-width:46rem;
margin-inline:auto}
.narrator{grid-template-columns:clamp(10rem,25vw,12.5rem) minmax(0,1fr);
gap:1.25rem}
.narrator+.narrator{padding:2rem 0 0;
border-top:1px solid color-mix(in srgb,var(--color-anthracite) 13%,transparent);
border-left:0}
.narrator__portrait{height:clamp(10.5rem,25vw,12.5rem)}
}
@media(max-width:720px){.samples{padding-block:3.8rem 3rem}
.samples__atmosphere{height:clamp(31rem,145vw,38rem);
background-image:url("assets/backgrounds/samples/samples-mobile.webp");
background-position:center top;
background-size:cover}
.samples__atmosphere::after{background:linear-gradient(180deg,rgba(244,239,229,.08),rgba(244,239,229,.54) 70%,var(--color-ivory))}
.samples__intro{max-width:25rem;
min-height:clamp(19rem,80vw,21rem)}
.samples__guidance{grid-template-columns:minmax(0,1fr)}
.samples__showcase{gap:2.3rem}
.narrator{grid-template-columns:minmax(0,1fr);
gap:.75rem;
max-width:31rem;
margin-inline:auto}
.narrator+.narrator{padding:2.3rem 0 0;
border-top:1px solid color-mix(in srgb,var(--color-anthracite) 13%,transparent);
border-left:0}
.narrator__portrait{width:min(48vw,10.5rem);
height:auto;
max-width:none;
margin-inline:auto;
box-shadow:inset 0 0 1.7rem .22rem color-mix(in srgb,var(--color-ivory) 84%,transparent),inset 0 0 .72rem .08rem color-mix(in srgb,var(--color-ivory) 54%,transparent)}
.narrator--aiden .narrator__portrait{width:min(53vw,11.5rem)}
.narrator__identity{text-align:center}
.narrator__samples{width:min(72vw,18rem);
margin-inline:auto;
gap:.6rem}
.sample-card{padding:.85rem}
.samples-guidance__block{padding:1.2rem 0}
}
@media(max-width:480px){.samples__showcase{margin-top:clamp(1rem,5vw,1.35rem)}
.narrator__portrait{-webkit-mask-image:radial-gradient(ellipse 104% 104% at 50% 50%,#000 82%,rgba(0,0,0,.9) 90%,rgba(0,0,0,.42) 98%,transparent 100%);
mask-image:radial-gradient(ellipse 104% 104% at 50% 50%,#000 82%,rgba(0,0,0,.9) 90%,rgba(0,0,0,.42) 98%,transparent 100%)}}

/* Case study / references */
.references {
  overflow: hidden;
  padding-block: clamp(5.5rem, 8vw, 8.5rem) clamp(4rem, 6vw, 6rem);
  background: #000;
}

.references__inner { width: min(100%, var(--content-max-width)); }

.references__intro { max-width: 48rem; margin-inline: auto; text-align: center; }
.references__label { color: var(--color-turquoise); }
.references__title {
  margin: 0.85rem 0 0;
  color: var(--color-ivory);
  font-family: var(--type-display-section-family);
  font-size: var(--type-display-section-size);
  font-weight: var(--type-display-section-weight);
  line-height: var(--type-display-section-line-height);
  letter-spacing: var(--type-display-section-letter-spacing);
  text-wrap: balance;
}
.references__meta {
  margin: 1.35rem 0 0;
  color: var(--color-turquoise);
  font-family: var(--type-body-small-family);
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-small-weight);
  line-height: var(--type-body-small-line-height);
  letter-spacing: var(--type-body-small-letter-spacing);
}
.references__copy {
  max-width: 36rem;
  margin: 0.8rem auto 0;
  color: var(--color-text-on-dark);
  font-family: var(--type-body-family);
  font-size: clamp(1rem, 1vw, 1.08rem);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
}

.references__visual { width: min(100%, 70rem); margin: clamp(2.5rem, 3.8vw, 3.6rem) auto 0; line-height: 0; }
.references__visual img { display: block; width: 100%; height: auto; }

.references__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 5rem);
  max-width: 50rem;
  margin: clamp(2rem, 3.8vw, 3.25rem) auto 0;
}
.references__facts > div { min-width: 0; text-align: center; }
.references__facts dt {
  color: var(--color-ivory);
  font-family: var(--type-heading-panel-family);
  font-size: clamp(1.9rem, 2.7vw, 2.5rem);
  font-weight: var(--type-heading-panel-weight);
  line-height: var(--type-heading-panel-line-height);
  white-space: nowrap;
}
.references__facts dd {
  margin: 0.38rem 0 0;
  color: color-mix(in srgb, var(--color-turquoise) 78%, var(--color-ivory));
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: var(--type-label-text-transform);
}
.references__testimonial { max-width: 40rem; margin: clamp(1.85rem, 3vw, 2.5rem) auto 0; color: var(--color-ivory); text-align: center; }
.references__testimonial p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.28rem, 1.5vw, 1.55rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.52;
}
.references__testimonial footer { display: grid; gap: 0.18rem; margin-top: 1.3rem; color: color-mix(in srgb, var(--color-ivory) 64%, transparent); font-family: var(--type-meta-family); font-size: var(--type-meta-size); font-weight: var(--type-meta-weight); line-height: var(--type-meta-line-height); letter-spacing: var(--type-meta-letter-spacing); }
.references__testimonial cite { color: var(--color-turquoise); font-style: normal; }

@media (max-width: 720px) {
  .references { padding-block: 4rem 3.25rem; }
  .references__intro { max-width: 25rem; }
  .references__title { margin-top: 0.7rem; }
  .references__meta { margin-top: 1.1rem; }
  .references__copy { margin-top: 0.7rem; }
  .references__visual { width: min(100%, 34rem); margin-top: 2rem; }
  .references__facts { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; max-width: 16rem; margin-top: 2.2rem; }
  .references__facts dd { margin-top: 0.28rem; }
  .references__testimonial { max-width: 26rem; margin-top: 1.7rem; }
  .references__testimonial p { font-size: 1.22rem; line-height: 1.55; }
}

/* About us */
.about {
  overflow: hidden;
  padding-block: clamp(5.5rem, 8vw, 8.5rem) clamp(4.5rem, 6vw, 6.5rem);
  background: var(--color-ivory-soft);
}

.about__inner { width: min(100%, var(--content-max-width)); }
.about__intro {
  display: grid;
  justify-items: center;
  max-width: 45rem;
  margin-inline: auto;
  text-align: center;
}
.about::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: min(50rem, 56.25vw);
  background:
    linear-gradient(180deg, transparent 52%, var(--color-ivory-soft) 100%),
    url("assets/backgrounds/about/about-desktop.webp") center top / 100% auto no-repeat;
  content: "";
  pointer-events: none;
}
.about__label { color: var(--color-petrol); }
.about__mark { width: auto; height: 1.45rem; margin-top: 0.65rem; }
.about__title {
  margin: 0.7rem 0 0;
  color: var(--color-anthracite);
  font-family: var(--type-display-section-family);
  font-size: var(--type-display-section-size);
  font-weight: var(--type-display-section-weight);
  line-height: var(--type-display-section-line-height);
  letter-spacing: var(--type-display-section-letter-spacing);
  text-wrap: balance;
}
.about__title span { color: var(--color-bordeaux); }
.about__lead {
  max-width: 40rem;
  margin: 1.15rem auto 0;
  color: var(--color-text-on-light);
  font-family: var(--type-editorial-lead-family);
  font-size: var(--type-editorial-lead-size);
  font-weight: var(--type-editorial-lead-weight);
  line-height: var(--type-editorial-lead-line-height);
}

.about__human-centre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 3vw, 2.5rem);
  margin-top: clamp(2.25rem, 3.2vw, 3.25rem);
}
.about__visual {
  position: relative;
  width: 100%;
  max-width: 36rem;
  margin: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0 clamp(3.75rem, 7vw, 7.5rem) 0.35rem color-mix(in srgb, var(--color-petrol) 42%, transparent);
}
.about__visual::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 13, 15, 0.07), rgba(136, 49, 54, 0.025));
  content: "";
  pointer-events: none;
}
.about__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: brightness(0.94) contrast(1.06) saturate(0.94);
}
.about__relationship {
  align-self: center;
  max-width: 29rem;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-petrol) 42%, transparent);
  color: var(--color-text-on-light);
}
.about__relationship p { margin: 0; }
.about__relationship p:first-child {
  color: var(--color-anthracite);
  font-family: var(--type-editorial-lead-family);
  font-size: var(--type-editorial-lead-size);
  font-weight: var(--type-editorial-lead-weight);
  line-height: 1.45;
}
.about__lower {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  margin-top: clamp(2.8rem, 5vw, 4.8rem);
  padding-top: clamp(4rem, 6vw, 5.25rem);
  text-align: center;
}
.about__lower::before {
  position: absolute;
  z-index: -1;
  top: -1.5rem;
  left: 50%;
  width: 100vw;
  height: calc(100% + 1.5rem);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--color-ivory-soft);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}
.about__closing {
  max-width: 38rem;
  margin: 0;
  color: var(--color-anthracite);
  font-family: var(--type-heading-editorial-family);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  font-weight: 400;
  line-height: 1.3;
}
.about__closing span { color: var(--color-bordeaux); }

@media (max-width: 820px) {
  .about__human-centre { gap: 1.8rem; }
  .about__visual { max-width: 42rem; margin-inline: auto; }
  .about__relationship { align-self: auto; max-width: 35rem; }
}

@media (max-width: 720px) {
  .about { padding-block: 4rem 3.35rem; }
  .about__intro { max-width: 25rem; }
  .about__mark { height: 1.25rem; margin-top: 0.55rem; }
  .about__title { margin-top: 0.7rem; }
  .about__lead { margin-top: 1rem; }
  .about__human-centre { margin-top: 2.25rem; }
  .about__visual { box-shadow: 0 0 4rem 0.2rem color-mix(in srgb, var(--color-petrol) 36%, transparent); }
  .about__relationship { padding-top: 0.85rem; }
  .about__lower { margin-top: 1.25rem; padding-top: 1.7rem; }
  .about__lower::before { top: -1rem; height: calc(100% + 1rem); }
  .about__closing { font-size: clamp(1.35rem, 6vw, 1.65rem); }
}

@media (min-width: 821px) {
  .about { padding-block: clamp(3.5rem, 5vw, 4.75rem) clamp(4.5rem, 6vw, 6.5rem); }
  .about::before {
    height: min(50rem, 56.25vw);
    background:
      linear-gradient(180deg, transparent 48%, var(--color-ivory-soft) 100%),
      url("assets/backgrounds/about/about-desktop.webp") center top / 100% auto no-repeat;
  }
  .about__label {
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }
  .about__label::before,
  .about__label::after {
    width: clamp(5rem, 8vw, 7.5rem);
    height: 1px;
    background: color-mix(in srgb, var(--color-petrol) 60%, transparent);
    content: "";
  }
  .about__mark { height: 1.55rem; margin-top: 0.5rem; }
  .about__title {
    margin-top: 0.6rem;
    font-size: clamp(3.5rem, 5.6vw, 5.3rem);
    line-height: 0.98;
  }
  .about__lead {
    max-width: 46rem;
    margin-top: 1rem;
    color: color-mix(in srgb, var(--color-anthracite) 88%, transparent);
    font-family: var(--type-body-family);
    font-size: clamp(1.05rem, 1.35vw, 1.18rem);
    line-height: 1.5;
  }
  .about__human-centre {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 36rem) minmax(18rem, 24rem);
    justify-content: space-between;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-top: clamp(4.5rem, 5.5vw, 5.5rem);
  }
  .about__visual {
    overflow: visible;
  }
  .about__visual::after { display: none; }
  .about__visual img {
    object-position: 50% 46%;
    -webkit-mask-image: radial-gradient(ellipse 94% 112% at 46% 44%, #000 60%, rgba(0, 0, 0, 0.94) 75%, rgba(0, 0, 0, 0.52) 90%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: radial-gradient(ellipse 94% 112% at 46% 44%, #000 60%, rgba(0, 0, 0, 0.94) 75%, rgba(0, 0, 0, 0.52) 90%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
  .about__relationship {
    max-width: 31rem;
    padding-top: 1.45rem;
  }
  .about__relationship p:first-child {
    max-width: 28rem;
  }
  .about__lower {
    margin-top: clamp(1rem, 1.8vw, 1.5rem);
    padding-top: clamp(2.25rem, 3vw, 2.75rem);
  }
  .about__closing {
    font-size: clamp(1.7rem, 2.25vw, 2.25rem);
    line-height: 1.2;
  }
}

@media (max-width: 720px) {
  .about::before {
    display: block;
    height: min(31rem, 125vw);
    background:
      linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-ivory-soft) 76%, transparent) 52%, var(--color-ivory-soft) 82%),
      url("assets/backgrounds/about/about-mobile.webp") center top / 100% auto no-repeat;
  }
}

/* Final questions */
.faq {
  overflow: hidden;
  padding-block: clamp(5.5rem, 8vw, 8.5rem) clamp(5rem, 8vw, 7.5rem);
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--color-petrol) 27%, transparent), transparent 26rem),
    linear-gradient(145deg, var(--color-black-deep), #0b1516 56%, var(--color-black-deep));
}
.faq__atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-black-deep) 90%, transparent), transparent 48%, color-mix(in srgb, var(--color-black-deep) 84%, transparent)),
    repeating-linear-gradient(0deg, transparent 0 3.75rem, color-mix(in srgb, var(--color-turquoise) 6%, transparent) 3.8rem 3.86rem);
  opacity: 0.4;
  pointer-events: none;
}
.faq__inner { max-width: 66rem; }
.faq__intro { max-width: 43rem; }
.faq__label { color: var(--color-turquoise); }
.faq__title {
  max-width: 38rem;
  color: var(--color-ivory);
  font-family: var(--type-display-section-family);
  font-size: var(--type-display-section-size);
  font-weight: var(--type-display-section-weight);
  line-height: var(--type-display-section-line-height);
  letter-spacing: var(--type-display-section-letter-spacing);
  text-wrap: balance;
}
.faq__lead {
  max-width: 38rem;
  color: color-mix(in srgb, var(--color-ivory) 73%, transparent);
  font-family: var(--type-editorial-lead-family);
  font-size: var(--type-editorial-lead-size);
  font-weight: var(--type-editorial-lead-weight);
  line-height: var(--type-editorial-lead-line-height);
}
.faq__list { margin-top: clamp(3.5rem, 6vw, 5.5rem); border-top: 1px solid color-mix(in srgb, var(--color-turquoise) 30%, transparent); }
.faq__item { border-bottom: 1px solid color-mix(in srgb, var(--color-turquoise) 25%, transparent); }
.faq__item summary {
  min-height: 4.75rem;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  color: var(--color-ivory);
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--color-turquoise); outline-offset: -0.25rem; }
.faq__number {
  color: color-mix(in srgb, var(--color-turquoise) 82%, var(--color-ivory));
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  line-height: var(--type-label-line-height);
}
.faq__question {
  font-family: var(--type-heading-functional-family);
  font-size: clamp(1rem, 1vw + 0.65rem, 1.22rem);
  font-weight: var(--type-heading-functional-weight);
  line-height: 1.35;
}
.faq__toggle {
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--color-turquoise) 70%, transparent);
  border-radius: 50%;
}
.faq__toggle::before,
.faq__toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.52rem;
  height: 1px;
  background: var(--color-turquoise);
  content: "";
  transform: translate(-50%, -50%);
}
.faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--transition-soft); }
.faq__item[open] .faq__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__answer {
  max-width: 43rem;
  padding: 0 3.5rem 1.6rem;
  color: color-mix(in srgb, var(--color-ivory) 72%, transparent);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
}
.faq__answer p { margin: 0; }
.faq__cta {
  max-width: 43rem;
  margin-top: clamp(3rem, 5vw, 4.75rem);
}
.faq__cta h3 {
  margin: 0;
  color: var(--color-ivory);
  font-family: var(--type-heading-editorial-family);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  font-weight: var(--type-heading-editorial-weight);
  line-height: var(--type-heading-editorial-line-height);
}
.faq__cta p {
  max-width: 34rem;
  margin: 0.85rem 0 0;
  color: color-mix(in srgb, var(--color-ivory) 72%, transparent);
  font-family: var(--type-editorial-lead-family);
  font-size: var(--type-editorial-lead-size);
  font-weight: var(--type-editorial-lead-weight);
  line-height: var(--type-editorial-lead-line-height);
}
.faq__cta .button { margin-top: 1.8rem; }

@media (min-width: 721px) {
  .faq__inner { padding-right: clamp(8rem, 16vw, 16rem); }
}

@media (max-width: 720px) {
  .faq { padding-block: 4rem 4.5rem; }
  .faq__atmosphere { background: linear-gradient(180deg, color-mix(in srgb, var(--color-black-deep) 36%, transparent), var(--color-black-deep) 85%); }
  .faq__title { margin-top: 0.7rem; }
  .faq__lead { margin-top: 1rem; }
  .faq__list { margin-top: 2.75rem; }
  .faq__item summary { grid-template-columns: 1.7rem minmax(0, 1fr) 1.35rem; gap: 0.7rem; min-height: 4.5rem; padding-block: 1rem; }
  .faq__question { font-size: 1rem; }
  .faq__answer { padding: 0 0 1.35rem 2.4rem; font-size: 0.96rem; line-height: 1.58; }
  .faq__cta { margin-top: 2.75rem; }
  .faq__cta h3 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .faq__cta p { margin-top: 0.75rem; }
  .faq__cta .button { width: auto; margin-top: 1.55rem; white-space: nowrap; }
}

/* Simple contact */
.contact {
  overflow: hidden;
  padding-block: clamp(5rem, 8vw, 8rem);
  color: var(--color-anthracite);
  background:
    radial-gradient(circle at 7% 14%, color-mix(in srgb, var(--color-turquoise) 12%, transparent), transparent 21rem),
    radial-gradient(circle at 88% 76%, color-mix(in srgb, var(--color-coral) 8%, transparent), transparent 24rem),
    var(--color-ivory);
}
.contact::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: clamp(-23rem, -20vw, -13rem);
  width: clamp(34rem, 48vw, 48rem);
  aspect-ratio: 1;
  background: repeating-radial-gradient(
    circle at 54% 48%,
    transparent 0 3.8rem,
    color-mix(in srgb, var(--color-petrol) 30%, transparent) 3.87rem 3.95rem
  );
  mask-image: radial-gradient(ellipse at center, #000 12%, transparent 72%);
  opacity: 0.4;
  pointer-events: none;
  content: "";
  transform: translateY(-50%) rotate(-18deg);
}
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(32rem, 1fr);
  align-items: start;
  gap: clamp(3.5rem, 8vw, 8rem);
}
.contact__intro { max-width: 25rem; padding-top: clamp(0.3rem, 2vw, 2.75rem); }
.contact__label { color: var(--color-petrol); }
.contact__title {
  color: var(--color-anthracite);
  font-family: var(--type-display-section-family);
  font-size: var(--type-display-section-size);
  font-weight: var(--type-display-section-weight);
  line-height: var(--type-display-section-line-height);
  letter-spacing: var(--type-display-section-letter-spacing);
  text-wrap: balance;
}
.contact__lead {
  margin: 1.5rem 0 0;
  color: var(--color-text-on-light);
  font-family: var(--type-editorial-lead-family);
  font-size: var(--type-editorial-lead-size);
  font-weight: var(--type-editorial-lead-weight);
  line-height: var(--type-editorial-lead-line-height);
}
.contact__reassurance {
  margin: 1.7rem 0 0;
  color: var(--color-petrol);
  font-family: var(--type-editorial-statement-family);
  font-size: var(--type-editorial-statement-size);
  font-weight: var(--type-editorial-statement-weight);
  line-height: var(--type-editorial-statement-line-height);
}
.contact__form-area {
  padding: clamp(1.3rem, 3vw, 2.35rem);
  border: var(--border-light);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-ivory-soft) 80%, transparent);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--color-anthracite) 5%, transparent);
}
.contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.contact-form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.contact-form__field { min-width: 0; }
.contact-form__field:not(.contact-form__field--half) { grid-column: 1 / -1; }
.contact-form label {
  display: block;
  color: var(--color-anthracite);
  font-family: var(--type-heading-component-family);
  font-size: var(--type-heading-component-size);
  font-weight: var(--type-heading-component-weight);
  line-height: var(--type-heading-component-line-height);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 3.2rem;
  margin-top: 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--color-petrol) 28%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-anthracite);
  background: color-mix(in srgb, var(--color-ivory) 68%, white);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  transition: border-color var(--transition-soft), box-shadow var(--transition-soft), background var(--transition-soft);
}
.contact-form textarea { min-height: 13rem; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: color-mix(in srgb, var(--color-anthracite) 64%, transparent); }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
  border-color: var(--color-petrol);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-petrol) 18%, transparent);
  background: var(--color-ivory-soft);
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] { border-color: var(--color-bordeaux); }
.contact-form__field--story { margin-top: 0.7rem; }
.contact-form__support {
  margin: 0.45rem 0 0;
  color: color-mix(in srgb, var(--color-anthracite) 68%, transparent);
  font-family: var(--type-meta-family);
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-line-height);
}
.contact-form__error {
  min-height: 1.25rem;
  margin: 0.35rem 0 0;
  color: var(--color-bordeaux);
  font-family: var(--type-meta-family);
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-line-height);
}
.contact-form__submit {
  margin-top: 1.8rem;
  cursor: pointer;
}
.contact-form__submit:disabled { cursor: wait; opacity: 0.72; }
.contact-form__reassurance {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: color-mix(in srgb, var(--color-anthracite) 72%, transparent);
  font-family: var(--type-body-small-family);
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-small-weight);
  line-height: var(--type-body-small-line-height);
}
.contact-form__privacy {
  margin: 0.3rem 0 0;
  color: color-mix(in srgb, var(--color-anthracite) 64%, transparent);
  font-family: var(--type-meta-family);
  font-size: 0.69rem;
  font-weight: var(--type-meta-weight);
  line-height: 1.2;
}
.contact-form__privacy a { color: var(--color-petrol); }
.contact__status {
  color: var(--color-anthracite);
  font-family: var(--type-editorial-lead-family);
  font-size: var(--type-editorial-lead-size);
  font-weight: var(--type-editorial-lead-weight);
  line-height: var(--type-editorial-lead-line-height);
}
.contact__status[hidden] { display: none; }
.contact__status[data-state="error"] { color: var(--color-bordeaux); }
.contact__status p { margin: 0; }
.contact__status p + p { margin-top: 0.8rem; }
.contact__status a { color: inherit; }

@media (max-width: 960px) {
  .connected-production__model {
    grid-template-columns: minmax(8.5rem, 0.7fr) minmax(0, 2fr) minmax(8.5rem, 0.7fr);
    --connected-connector-gap: 1.5rem;
  }

  .connected-domain { padding-inline: 0.8rem; }
}

@media (max-width: 720px) {
  .connected-production {
    --connected-production-background: url("assets/backgrounds/connected-production/connected-production-mobile.webp");

    padding-block: 3.8rem 3.25rem;
    background-position: center top;
  }

  .connected-production__intro { max-width: 30rem; text-align: left; }
  .connected-production__title { margin-top: 1rem; font-size: clamp(2.55rem, 11.5vw, 3.25rem); }
  .connected-production__copy { margin-top: 1.1rem; }
  .connected-production__label::after { margin-inline: 0; }

  .connected-production__model {
    --connected-connector-gap: 1.5rem;

    grid-template-columns: minmax(0, 1fr);
    gap: var(--connected-connector-gap);
    max-width: 31rem;
    margin-top: 2.7rem;
    margin-inline: auto;
  }

  .connected-endpoint { grid-template-columns: 4.5rem minmax(0, 1fr); justify-items: start; align-items: center; gap: 1rem; text-align: left; }
  .connected-endpoint > .section-label { grid-column: 2; margin: 0; align-self: end; }
  .connected-endpoint .connected-icon { grid-column: 1; grid-row: 1 / span 2; width: 4.5rem; }
  .connected-endpoint > p:last-child { grid-column: 2; max-width: 24rem; }
  .connected-endpoint::after { display: block; top: auto; right: auto; bottom: calc(var(--connected-connector-gap) * -1); left: 2.25rem; width: 1px; height: var(--connected-connector-gap); transform: translateX(-50%); }
  .connected-endpoint--output::after { display: none; }

  .connected-field { position: relative; padding: 1.45rem 1.1rem 0.55rem; }
  .connected-field::after { position: absolute; bottom: calc(var(--connected-connector-gap) * -1); left: 2.25rem; width: 1px; height: var(--connected-connector-gap); background: color-mix(in srgb, var(--color-petrol) 62%, transparent); content: ""; transform: translateX(-50%); }
  .connected-field > .section-label { margin-bottom: 1.25rem; text-align: left; }
  .connected-field__domains { grid-template-columns: minmax(0, 1fr); }
  .connected-domain { grid-template-columns: 4rem minmax(0, 1fr); justify-items: start; padding: 1.15rem 0; text-align: left; }
  .connected-domain + .connected-domain { border-top: 1px dashed color-mix(in srgb, var(--color-petrol) 36%, transparent); border-left: 0; }
  .connected-domain .connected-icon { grid-column: 1; grid-row: 1 / span 2; width: 3.5rem; }
  .connected-domain h3 { grid-column: 2; margin: 0; }
  .connected-domain h3::after { margin-inline: 0; }
  .connected-domain p { grid-column: 2; margin-top: 0.7rem; }

}

@media (max-width: 900px) {
  .contact::before {
    top: 1rem;
    left: -14rem;
    width: 22rem;
    opacity: 0.22;
    transform: rotate(-18deg);
  }
  .contact__inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .contact__intro { max-width: 38rem; padding-top: 0; }
  .contact__form-area { max-width: 46rem; }
}

@media (max-width: 720px) {
  .contact { padding-block: 4rem; }
  .contact::before { display: none; }
  .contact__inner { gap: 2.35rem; }
  .contact__title { margin-top: 0.75rem; font-size: clamp(2.35rem, 11vw, 3.3rem); }
  .contact__lead { margin-top: 1.1rem; }
  .contact__reassurance { margin-top: 1.25rem; }
  .contact__form-area { padding: 1.15rem; }
  .contact-form__fields { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
  .contact-form__field--half { grid-column: 1 / -1; }
  .contact-form textarea { min-height: 14rem; }
  .contact-form__submit { width: 100%; margin-top: 1.5rem; }
}