/* ==========================================================================
   Für Unternehmen & Partner – page styles
   --------------------------------------------------------------------------
   Built on the Phase-1 foundation: container, grid, surfaces, buttons,
   eyebrow, links, notes, the field error and the header/footer all come from
   the shared stylesheets. Nothing global is redefined here.

   Source of truth:
   design/subpages/business-partners/source/business-partners-v01-client-preview/
     Unternehmen-Partner-v01.dc.html

   1. Shared section head split
   2. Hero
   3. Business mobility use cases
   4. Business benefits
   5. Collaboration flow
   6. Firmenkunden / Partner switch
   7. Trust / references
   8. Corporate enquiry
   ========================================================================== */

/* ========================================== 1. Shared section head split == */
/*
  The approved page opens four sections with the same split: title block on the
  left, lead paragraph on the right, both sitting on the same baseline.
*/

.section-split {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-lg) var(--space-2xl);
  margin-block-end: clamp(2.75rem, 5vw, 4.5rem);
}

.section-split__head {
  flex: 1 1 27.5rem;
}

.section-split > p {
  flex: 1 1 21rem;
  max-width: 32.5rem;
}

.section-split--between {
  justify-content: space-between;
}

.section-split--between .section-split__head {
  max-width: 40rem;
}

.section-split--between > p {
  flex: 0 1 23.75rem;
}

/* ============================================================ 2. Hero ==== */

.business-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(40rem, 94vh, 55rem);
  background-color: var(--color-ink);
  overflow: hidden;
  isolation: isolate;
}

.business-hero__media,
.business-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.business-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.business-hero__scrim {
  background:
    linear-gradient(
      180deg,
      rgba(19, 28, 36, 0.66) 0%,
      rgba(19, 28, 36, 0.22) 200px,
      rgba(19, 28, 36, 0.1) 45%,
      rgba(19, 28, 36, 0.62) 78%,
      rgba(19, 28, 36, 0.94) 100%
    ),
    linear-gradient(90deg, rgba(19, 28, 36, 0.7) 0%, rgba(19, 28, 36, 0.38) 40%, rgba(19, 28, 36, 0) 72%);
}

.business-hero__inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block-start: calc(var(--header-height-compact) + clamp(2.5rem, 7vh, 5.5rem));
}

.business-hero__intro {
  max-width: 47.5rem;
}

.business-hero__title {
  margin-block-start: var(--space-md);
  font-size: clamp(2.375rem, 4.6vw, 4.125rem);
  line-height: 1.05;
  letter-spacing: -0.016em;
  color: var(--color-text-on-ink);
}

.business-hero__lead {
  max-width: 35rem;
  margin-block-start: var(--space-lg);
  font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.84);
}

.business-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-2xl);
}

/* The approved hero pairs two equally sized actions; the header variant of
   the outline button is deliberately smaller, so it is restored here. */
.business-hero__secondary {
  min-height: 3.25rem;
  padding: 1.0625rem 1.5rem;
  font-size: var(--font-size-md);
}

/* ----------------------------------------------------------- chain motif */

.chain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1rem;
  margin-block-start: clamp(2.5rem, 9vh, 6.5rem);
  padding-block: var(--space-md) var(--space-lg);
  border-block-start: var(--border-width-hairline) solid var(--color-border-on-ink);
}

.chain__item {
  display: flex;
  align-items: center;
  min-width: 0;
}

.chain__label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-on-ink-muted);
}

.chain__item--accent .chain__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold-light);
}

.chain__dot {
  display: block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-on-ink-faint);
}

.chain__item--accent .chain__dot {
  background-color: var(--color-gold-light);
}

/* The connectors only appear once the row actually fits on one line. */
.chain__line {
  display: none;
  flex: 1;
  height: 1px;
  min-width: 1.5rem;
  margin-inline: 1.125rem;
  background-image: linear-gradient(90deg, rgba(216, 190, 140, 0.55), rgba(216, 190, 140, 0.18));
}

@media (min-width: 768px) {
  .chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.875rem;
  }

  .chain__item {
    flex: 1 1 auto;
  }

  .chain__item:last-child {
    flex: 0 0 auto;
  }

  .chain__line {
    display: block;
  }
}

/* ======================================== 3. Business mobility use cases == */
/*
  One markup tree, two presentations.

  Base (also the no-JavaScript state): the four use cases are an editorial
  sequence – photograph, lead, three blocks, call to action – and the case
  navigation is not shown, because buttons without a script do nothing.

  js/business.js marks the document with .js-cases. From there the sequence
  becomes the approved switcher: every panel is placed in the same grid cell,
  so the tallest one defines the height and nothing shifts when the case
  changes. The photograph cross-fades, the text swaps instantly, and inactive
  panels are `visibility: hidden`, which keeps them out of both the tab order
  and the accessibility tree.
*/

.use-case + .use-case {
  margin-block-start: clamp(3rem, 6vw, 5rem);
}

.use-cases__nav {
  display: none;
}

/* ---------------------------------------------------------------- media */

.use-case__media {
  position: relative;
  aspect-ratio: 4 / 5;
  /*
    The approved design caps the photograph before it takes over a narrow
    screen; on the desktop canvas it may grow to its full 4:5 height. A
    max-height on a box with an aspect ratio transfers back into the width,
    so the minimum width restores the full column and the surplus is cropped
    by object-fit instead.
  */
  max-block-size: 32.5rem;
  min-inline-size: 100%;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-surface-cool);
}

.use-case__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.use-case__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) clamp(1.25rem, 2vw, 1.625rem);
  background-image: linear-gradient(0deg, rgba(19, 28, 36, 0.72), rgba(19, 28, 36, 0));
  color: var(--color-text-on-ink);
}

.use-case__caption-title {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-footer-label);
  text-transform: uppercase;
  color: var(--color-text-on-ink-strong);
}

.use-case__caption-count {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-on-ink-faint);
}

.use-case__caption-count b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold-light);
}

/* ----------------------------------------------------------------- body */

.use-case__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  margin-block-start: var(--space-lg);
}

.use-case__lead {
  margin-block-end: var(--space-xs);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-display);
}

.use-case__block {
  padding-block: var(--space-md);
  border-block-start: var(--border-width-hairline) solid var(--color-border-warm);
}

.use-case__block-key {
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

.use-case__block-value {
  margin-block-start: 0.625rem;
  font-size: 0.96875rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

.use-case__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-width-hairline) solid var(--color-border-warm);
}

.use-case__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}

.use-case__cta .icon {
  transition: transform var(--transition-base);
}

.use-case__cta:hover .icon,
.use-case__cta:focus-visible .icon {
  transform: translateX(3px);
}

.use-case__next {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border-width-hairline) solid var(--color-border-warm);
  color: var(--color-text-strong);
  transition: border-color var(--transition-base), color var(--transition-base);
}

.use-case__next:hover {
  border-color: var(--color-text-strong);
}

/* Without the script there is nothing to advance to. */
.use-case__next {
  display: none;
}

/* -------------------------------------------- sequence on wide screens -- */

@media (min-width: 1024px) {
  .use-case {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17.5rem, 1.1fr);
    gap: 0 clamp(1.75rem, 3.5vw, 3.5rem);
    align-items: start;
  }

  .use-case__media {
    max-block-size: 42.5rem;
  }

  .use-case__body {
    margin-block-start: 0;
  }
}

/* ------------------------------------------------------- switcher (JS) -- */

.js-cases .use-cases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg) 0;
}

.js-cases .use-cases__nav {
  display: grid;
  grid-row: 1;
  grid-column: 1;
}

/* The panel and its two parts become direct grid items, so every photograph
   shares one cell and every body shares another. */
.js-cases .use-case {
  display: contents;
}

.js-cases .use-case + .use-case {
  margin-block-start: 0;
}

.js-cases .use-case__media {
  grid-row: 2;
  grid-column: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.js-cases .use-case__image {
  transform: scale(1.04);
  transition: transform 1.1s ease;
}

.js-cases .use-case[data-active="true"] .use-case__media {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s linear 0s;
}

.js-cases .use-case[data-active="true"] .use-case__image {
  transform: none;
}

.js-cases .use-case__body {
  grid-row: 3;
  grid-column: 1;
  margin-block-start: 0;
  visibility: hidden;
}

.js-cases .use-case[data-active="true"] .use-case__body {
  visibility: visible;
}

/*
  Below the approved desktop canvas the text column has no reserved height, so
  an inactive body is removed from the flow instead of merely hidden and the
  section keeps the height of the case that is actually shown. The photograph
  above it stays stacked, which is what makes the cross-fade possible.
*/
.js-cases .use-case[data-active="false"] .use-case__body {
  display: none;
}

.js-cases .use-case__next {
  display: inline-flex;
}

/*
  Case navigation – chips below 1024px. They used to be one horizontally
  scrolled row, which left 03 and 04 behind a gesture nothing announced. All
  four now share a grid instead, so every choice is visible at once: one column
  on a narrow phone and two from 25rem up, which is the width at which the
  longest title – "Kunden & Geschäftspartner" – still fits a half-width chip
  without shrinking the type.
*/
.use-cases__nav {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  padding-block-end: var(--space-3xs);
}

@media (min-width: 25rem) {
  .use-cases__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.use-case-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  border: var(--border-width-hairline) solid var(--color-border-warm);
  background-color: transparent;
  font-size: 0.84375rem;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  transition: background-color var(--transition-base), border-color var(--transition-base),
    color var(--transition-base);
}

.use-case-tab[aria-pressed="true"] {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-text-on-ink);
}

.use-case-tab__num {
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-footer-label);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.use-case-tab[aria-pressed="true"] .use-case-tab__num {
  color: var(--color-gold-light);
}

.use-case-tab__rule {
  display: none;
}

.use-cases__hint {
  display: none;
}

@media (min-width: 1024px) {
  .js-cases .use-cases {
    grid-template-columns:
      minmax(13.75rem, 0.9fr)
      minmax(0, 1.35fr)
      minmax(17.5rem, 1.1fr);
    gap: 0 clamp(1.75rem, 3.5vw, 3.5rem);
    padding-block-start: 2.25rem;
    border-block-start: var(--border-width-hairline) solid var(--color-border-warm);
  }

  .js-cases .use-cases__nav {
    grid-row: 1;
    grid-column: 1;
  }

  .js-cases .use-case__media {
    grid-row: 1;
    grid-column: 2;
  }

  .js-cases .use-case__body {
    grid-row: 1;
    grid-column: 3;
  }

  /* The stacked bodies come back, so the tallest case defines the column. */
  .js-cases .use-case[data-active="false"] .use-case__body {
    display: flex;
  }

  /* Vertical case navigation with the animated champagne rule. */
  .js-cases .use-cases__nav {
    display: flex;
  }

  .use-cases__nav {
    flex-direction: column;
    padding-block-end: 0;
  }

  .use-case-tab {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: start;
    gap: 0.375rem 0;
    min-height: 3.5rem;
    padding: var(--space-md) 0;
    border: 0;
    border-block-end: var(--border-width-hairline) solid var(--color-border-warm-soft);
    /* The chips below this width wrap, the desktop entries set their own line
       height per part - so the index keeps the tight box it has here. */
    line-height: 1;
    text-align: start;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
  }

  .use-case-tab[aria-pressed="true"] {
    background-color: transparent;
    color: var(--color-text-strong);
  }

  .use-case-tab:hover {
    color: var(--color-text-strong);
  }

  .use-case-tab__num {
    padding-block-start: 0.25rem;
    font-size: var(--font-size-2xs);
    letter-spacing: var(--letter-spacing-eyebrow);
    color: var(--color-text-muted);
  }

  .use-case-tab[aria-pressed="true"] .use-case-tab__num {
    color: var(--color-gold-deep);
  }

  .use-case-tab__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-heading);
    color: inherit;
  }

  .use-case-tab__rule {
    display: block;
    grid-column: 1;
    width: 0;
    height: 1px;
    margin-block-start: var(--space-2xs);
    background-color: var(--color-gold);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .use-case-tab[aria-pressed="true"] .use-case-tab__rule {
    width: 1.75rem;
  }

  .use-cases__hint {
    display: block;
    margin-block-start: var(--space-md);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-text);
    color: var(--color-text-muted);
  }

  .js-cases .use-case__next {
    display: none;
  }

  .js-cases .use-case__foot {
    padding-block-start: var(--space-lg);
    border-block-start: 0;
  }

  .js-cases .use-case__cta {
    align-self: flex-start;
    padding-block-end: var(--space-3xs);
    border-block-end: var(--border-width-hairline) solid var(--color-gold);
    min-height: 0;
  }
}

/* ================================================ 4. Business benefits == */

.benefits__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 5rem);
}

.benefits__lead {
  max-width: 25rem;
  margin-block-start: var(--space-md);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-on-ink-soft);
}

.benefits__list {
  border-block-start: var(--border-width-hairline) solid var(--color-border-on-ink);
}

.benefit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-block-end: var(--border-width-hairline) solid var(--color-border-on-ink);
}

.benefit__num {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 3vw, 2.75rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-light);
}

.benefit__title {
  font-size: clamp(1.375rem, 1.8vw, 1.6875rem);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-on-ink);
}

.benefit__text {
  max-width: 32.5rem;
  margin-block-start: var(--space-xs);
  font-size: 0.96875rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-on-ink-muted);
}

@media (min-width: 1024px) {
  .benefits__inner {
    grid-template-columns: minmax(17.5rem, 0.8fr) minmax(0, 1.2fr);
  }

  .benefits__intro {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-xl));
    align-self: start;
  }

  .benefit {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }
}

/* ================================================ 5. Collaboration flow == */

.process__flow {
  position: relative;
}

.process__flow-rail,
.process__flow-progress {
  position: absolute;
  z-index: 1;
}

.process__flow-rail {
  background-color: var(--color-border-warm);
}

.process__flow-progress {
  background-color: var(--color-gold);
}

.process__steps {
  position: relative;
}

.process-step {
  position: relative;
}

/* The marker sits on the rail: an open champagne ring with a solid core. */
.process-step__marker {
  position: absolute;
  z-index: 2;
  width: 11px;
  height: 11px;
  border: var(--border-width-hairline) solid var(--color-gold);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
}

.process-step__marker::after {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 2px;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background-color: var(--color-gold);
}

.process-step__num {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-deep);
}

.process-step__title {
  margin-block-start: 0.625rem;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
}

.process-step__text {
  margin-block-start: 0.625rem;
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

/* Vertical timeline below 1024px. */
.process__flow {
  padding-inline-start: var(--space-xl);
}

.process__flow-rail,
.process__flow-progress {
  inset-inline-start: 5px;
  inset-block-start: 6px;
  width: 1px;
}

.process__flow-rail {
  inset-block-end: 6px;
}

.process__flow-progress {
  height: calc(100% - 12px);
  transform-origin: top;
}

.process-step {
  padding-block-end: var(--space-2xl);
}

.process-step:last-child {
  padding-block-end: 0;
}

.process-step__marker {
  inset-inline-start: calc(-1 * var(--space-xl));
  inset-block-start: 4px;
}

/* Horizontal timeline on the approved desktop canvas. */
@media (min-width: 1024px) {
  .process__flow {
    padding-inline-start: 0;
  }

  .process__flow-rail,
  .process__flow-progress {
    inset-inline-start: 0;
    inset-block-start: 5px;
    inset-block-end: auto;
    width: auto;
    height: 1px;
  }

  .process__flow-rail {
    inset-inline-end: 0;
  }

  .process__flow-progress {
    width: 100%;
    height: 1px;
    transform-origin: left;
  }

  .process__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 clamp(1.5rem, 3vw, 3rem);
  }

  .process-step {
    padding-block: 2.25rem 0;
  }

  .process-step__marker {
    inset-inline-start: 0;
    inset-block-start: 0;
  }
}

/*
  The champagne rule draws itself in once the section is reached. It is a
  static, fully drawn rule without JavaScript and with reduced motion, because
  main.js only marks the document with .js-reveal when motion is allowed.
*/
/* The wrapper carries [data-reveal] because it has a real box that an
   IntersectionObserver can measure; the rule itself is one pixel wide. Its
   own fade is cancelled – the steps inside bring their own. */
.js-reveal .process__flow {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Scaled rather than resized: a transform keeps the rule on the compositor
   and, unlike a percentage width, does not redraw itself when the window is
   resized after the rule has already been drawn. */
.js-reveal .process__flow-progress {
  transform: scaleY(0);
  transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-reveal .process__flow.is-revealed .process__flow-progress {
  transform: none;
}

@media (min-width: 1024px) {
  .js-reveal .process__flow-progress {
    transform: scaleX(0);
  }
}

/* ================================= 6. Firmenkunden / Partner switch ====== */
/*
  Without JavaScript the tab strip is not rendered and both segments are read
  in sequence, each with its own eyebrow and headline. js/business.js marks the
  document with .js-segments and turns them into the approved tabs.
*/

.segments__tabs {
  display: none;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  border-block-end: var(--border-width-hairline) solid var(--color-border-warm);
}

.js-segments .segments__tabs {
  display: flex;
}

.segment-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  min-height: 2.75rem;
  padding: 0 0 var(--space-md);
  background-color: transparent;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.segment-tab:hover,
.segment-tab[aria-selected="true"] {
  color: var(--color-text-strong);
}

.segment-tab__num {
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.segment-tab[aria-selected="true"] .segment-tab__num {
  color: var(--color-gold-deep);
}

.segment-tab__underline {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: var(--border-width-active);
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.segment-tab[aria-selected="true"] .segment-tab__underline {
  transform: scaleX(1);
}

/* ------------------------------------------------------------- panels -- */

.segment {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 6rem);
  padding-block-start: clamp(2.5rem, 5vw, 4.5rem);
}

.segment + .segment {
  margin-block-start: clamp(3rem, 6vw, 5rem);
  border-block-start: var(--border-width-hairline) solid var(--color-border-warm);
}

.js-segments .segment {
  margin-block-start: 0;
  border-block-start: 0;
}

.js-segments .segment[data-active="false"] {
  display: none;
}

.segment__title {
  margin-block-start: var(--space-sm);
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.segment__copy {
  max-width: 28.75rem;
  margin-block-start: var(--space-md);
  font-size: 1.03125rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

.segment__cta {
  margin-block-start: clamp(1.75rem, 3vw, 2.25rem);
  min-height: 3.25rem;
  padding: 1.125rem 1.625rem;
}

.segment__areas {
  border-block-start: var(--border-width-hairline) solid var(--color-border-warm);
}

.segment-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs) clamp(1.25rem, 3vw, 2.5rem);
  padding-block: var(--space-lg);
  border-block-end: var(--border-width-hairline) solid var(--color-border-warm);
}

.segment-area__term {
  font-family: var(--font-display);
  font-size: var(--font-size-feature);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-strong);
}

.segment-area__text {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .segment {
    grid-template-columns: minmax(18.75rem, 0.9fr) minmax(0, 1.1fr);
  }

  .segment-area {
    grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.2fr);
  }
}

/* ==================================================== 7. Trust / refs ==== */

.trust__lead {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

/*
  The hairline grid is drawn with a 1px gap over a warm background, so the
  cells keep the square, rule-based language of the approved design.

  That warm background is also why the row must never be half filled: an unused
  cell is not invisible, it is a warm block where a reference should be. Three
  references need 36rem of viewport to sit side by side, so below that they
  become a column and every cell stays occupied.
*/
.trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  border: var(--border-width-hairline) solid var(--color-border-warm);
  background-color: var(--color-border-warm);
}

@media (min-width: 36rem) {
  .trust__grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 7rem;
  padding: var(--space-md);
  background-color: var(--color-surface);
}

.trust__rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  background-color: var(--color-border-warm);
}

.trust__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-3xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.trust__note {
  margin-block-start: var(--space-lg);
}

/* ============================================== 8. Corporate enquiry ===== */

.corporate-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.corporate-cta__lines {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: -1;
  width: 100%;
  height: 26.25rem;
  pointer-events: none;
}

.corporate-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 7rem);
}

.corporate-cta__title {
  margin-block-start: var(--space-md);
  font-size: clamp(2rem, 3.4vw, 3.125rem);
  line-height: var(--line-height-display-tight);
  letter-spacing: var(--letter-spacing-display-tight);
  color: var(--color-text-on-ink);
}

.corporate-cta__lead {
  max-width: 30rem;
  margin-block-start: var(--space-lg);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-on-ink-muted);
}

.corporate-cta__note {
  margin-block-start: var(--space-lg);
}

/* ------------------------------------------------------- direct routes -- */

.direct-list {
  margin-block-start: clamp(2rem, 4vw, 2.75rem);
  border-block-start: var(--border-width-hairline) solid var(--color-border-on-ink);
}

.direct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 2.75rem;
  padding-block: var(--space-md);
  border-block-end: var(--border-width-hairline) solid var(--color-border-on-ink);
  color: var(--color-text-on-ink);
}

.direct:hover {
  color: var(--color-gold-light);
}

.direct__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.direct__kind {
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-footer-label);
  text-transform: uppercase;
  color: var(--color-text-on-ink-faint);
}

.direct__label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.direct .icon {
  flex: none;
  stroke: var(--color-gold-light);
  transition: transform var(--transition-base);
}

.direct:hover .icon,
.direct:focus-visible .icon {
  transform: translateX(3px);
}

/* -------------------------------------------------------------- form --- */

.corporate-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg) clamp(1.25rem, 2.5vw, 2.25rem);
  align-content: start;
}

.corporate-form__field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2xs);
  margin: 0;
  min-width: 0;
}

.corporate-form__label {
  display: block;
  padding: 0;
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-footer-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.corporate-form__control {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-xs) 0;
  border: 0;
  border-block-end: var(--border-width-hairline) solid var(--color-border-on-ink-strong);
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  line-height: 1.4;
  color: var(--color-text-on-ink);
  transition: border-color var(--transition-base);
}

.corporate-form__control::placeholder {
  color: var(--color-text-on-ink-faint);
  opacity: 1;
}

.corporate-form__control:focus {
  outline: none;
  border-block-end-color: var(--color-gold-light);
}

.corporate-form__control:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}

.corporate-form__control[aria-invalid="true"] {
  border-block-end-color: var(--color-gold-light);
  box-shadow: 0 1px 0 0 var(--color-gold-light);
}

.corporate-form__control--area {
  resize: vertical;
  min-height: 4.5rem;
  line-height: var(--line-height-text);
}

select.corporate-form__control {
  appearance: none;
  cursor: pointer;
  padding-inline-end: var(--space-lg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23d8be8c' stroke-width='1.4'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

select.corporate-form__control option {
  color: var(--color-text-strong);
}

/* The shared field error is reused; on ink it needs a legible tone. */
.corporate-form .field__error {
  color: var(--color-gold-light);
}

/* ------------------------------------------------------------ interest -- */

.corporate-form__interest {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.interest {
  display: flex;
  gap: 1px;
  border: var(--border-width-hairline) solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.18);
}

.interest__option {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-ink);
  font-size: 0.90625rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-on-ink-muted);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.interest__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.interest__dot {
  display: block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-on-ink-faint);
  transition: background-color var(--transition-base);
}

.interest__option:has(.interest__input:checked) {
  background-color: var(--color-surface);
  color: var(--color-text-strong);
}

.interest__option:has(.interest__input:checked) .interest__dot {
  background-color: var(--color-gold);
}

.interest__option:has(.interest__input:focus-visible) {
  outline: 2px solid var(--color-gold-light);
  outline-offset: -3px;
}

/* -------------------------------------------------------------- footer -- */

.corporate-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-block-start: var(--space-2xs);
}

.corporate-form__submit {
  min-height: 3.5rem;
  padding: 1.1875rem 1.75rem;
}

.corporate-form__hint {
  max-width: 18.75rem;
}

/* Prototype-only notice: the enquiry is not transmitted in this phase. */
.corporate-form__status {
  padding-inline-start: var(--space-sm);
  border-inline-start: var(--border-width-active) solid var(--color-gold);
  color: var(--color-text-on-ink-muted);
}

@media (min-width: 640px) {
  .corporate-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .corporate-form__interest,
  .corporate-form__field--wide,
  .corporate-form__foot,
  .corporate-form__status {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .corporate-cta__inner {
    grid-template-columns: minmax(20rem, 0.9fr) minmax(0, 1.1fr);
  }
}