/* ============================================================
   ThreeDoors — corporate.css
   /corporate page sections only. Loads after the design system
   (tokens.css + components.css) and the shared site layout/chrome
   (site.css). Tokens only — no new colours, type, or spacing.
   ============================================================ */

/* ------------------------------------------------------------
   Start with the problem — problem-led card grid
   ------------------------------------------------------------ */
.problems { display: grid; gap: var(--space-3); }
@media (min-width: 760px) { .problems { grid-template-columns: repeat(3, 1fr); } }
.problem { display: flex; flex-direction: column; }
.problem .card__body { flex: 1 1 auto; }
.problem__route {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-3);
  font-family: var(--font-sans); font-size: var(--t-caption); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption); color: var(--color-accent); text-decoration: none;
  transition: gap var(--motion-fast) var(--ease-out-slow), color var(--motion-fast) var(--ease-out-slow);
}
.problem__route:hover { gap: var(--space-2); color: var(--color-text); }
.problem__route .icon { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   What you get — three outputs (claw-column rhythm)
   ------------------------------------------------------------ */
.outputs { display: grid; gap: var(--space-5); }
@media (min-width: 820px) { .outputs { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.output {
  display: grid; gap: var(--space-2); align-content: start;
  padding-top: var(--space-3); border-top: 1px solid var(--color-border);
  scroll-margin-top: 96px;
}
.output__mark { color: var(--color-accent); margin-bottom: var(--space-1); }
.output h3 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.output p { color: var(--color-text-body); }

/* ------------------------------------------------------------
   FRINGE preview — teal feature band, six letters + route through
   ------------------------------------------------------------ */
.fr-preview { display: grid; gap: var(--space-4); max-width: 760px; }
.fr-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-2); }
@media (min-width: 620px) { .fr-mini { grid-template-columns: repeat(6, 1fr); } }
.fr-mini__role { display: grid; gap: 4px; justify-items: start; }
.fr-mini__icon { width: 36px; height: 36px; color: var(--color-door-cream); margin-bottom: 4px; }
.fr-mini__letter {
  font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-semibold);
  font-size: var(--t-h2); line-height: 1; color: var(--color-door-cream);
}
.fr-mini__name {
  font-family: var(--font-sans); font-size: var(--t-caption-xs); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(241, 231, 210, 0.78);
}

/* ------------------------------------------------------------
   How it runs — 01 → 04 steps
   ------------------------------------------------------------ */
.runs { display: grid; gap: var(--space-4); }
@media (min-width: 680px) { .runs { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); } }
@media (min-width: 1040px) { .runs { grid-template-columns: repeat(4, 1fr); } }
.run {
  display: grid; gap: var(--space-2); align-content: start;
  padding-top: var(--space-3); border-top: 1px solid var(--color-border);
}
.run__num {
  font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-regular);
  font-size: var(--t-h2); line-height: 1; color: var(--color-accent); letter-spacing: var(--ls-h2);
}
.run h3 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.run p { color: var(--color-text-body); font-size: var(--t-body); }

/* ------------------------------------------------------------
   Pricing — quiet, centred. No table.
   ------------------------------------------------------------ */
.pricing { display: grid; gap: var(--space-3); justify-items: center; text-align: center; max-width: 600px; margin-inline: auto; }
.pricing__figure {
  font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-semibold);
  font-size: var(--t-display); line-height: 1; color: var(--color-text);
}
.pricing__figure small {
  display: block; font-family: var(--font-sans); font-size: var(--t-caption); font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-soft); margin-top: var(--space-2);
}
.pricing p { color: var(--color-text-body); }

/* ------------------------------------------------------------
   Enquire — concierge CTA
   ------------------------------------------------------------ */
.enquire {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  padding: var(--space-7) var(--space-5);
  display: grid; gap: var(--space-4); justify-items: center; text-align: center;
  background: var(--color-surface);
}
.enquire__head { display: grid; gap: var(--space-3); justify-items: center; max-width: 600px; }
.enquire__title { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.enquire__ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.enquire__note { font-size: var(--t-caption); color: var(--color-text-soft); letter-spacing: var(--ls-caption); }