/* ==========================================================================
   inner.css — brings the inner pages onto the homepage look.
   Loaded after styles.css / content.css / theme.css / sections.css and
   before chrome.css. Remaps the legacy navy + cream tokens to the
   homepage ink + paper palette, then restyles the shared components.
   ========================================================================== */

:root {
  --ink: #09091a;
  --ink-2: #33333d;
  --ink-3: #5c5c66;
  --paper: #f6f5f2;
  --line: #e4e2dd;
  --orange-deep: #b84a00;
  --band-blue: #2B5BA8;

  /* legacy tokens → homepage palette */
  --blue-d: var(--ink);
  --cream: var(--paper);
  --navy-text: var(--ink-2);
  --navy-muted: var(--ink-3);
  --text: var(--ink-2);
  --text-secondary: var(--ink-2);
  --muted: var(--ink-3);
  --border: var(--line);
  --hairline: var(--line);
  --bg: var(--paper);
  --orange-ink: var(--orange-deep);
  --navy-bg: var(--band-blue);
}

body {
  font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink-2);
  background: #fff;
}

/* ── Type ─────────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }
h2 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
h3 { font-weight: 700; letter-spacing: -0.02em; }
.section-header h2 { font-size: var(--step-4); font-weight: 800; }
.section-header p:not(.section-tag) { color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }

/* Eyebrows: sentence case, no tracking, like the homepage .meta */
.section-tag,
.section-tag-blue,
.section-tag-orange,
.page-hero-eyebrow,
.svc-hero-banner .page-hero-eyebrow,
.cred-strip-label,
.usecase-card .usecase-label,
.usecase-glass .usecase-label,
.srv-badge,
.work-badge,
.srv-kicker,
.work-meta,
.section-services .srv-card .srv-problems-heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
}
.section-tag-orange { color: var(--orange-deep); }

/* ── Page hero: white, no waves, display-size title ───── */
.page-hero { background: #fff; }
.page-hero::before { content: none; }
.breadcrumbs:has(+ .page-hero) { background: #fff; box-shadow: none; clip-path: none; }
.breadcrumbs a { color: var(--ink-2); text-decoration-color: var(--orange); text-underline-offset: 0.25em; }
.breadcrumbs a:hover { color: var(--orange-deep); }
.breadcrumbs [aria-current] { color: var(--ink-3); }
.page-hero-title {
  font-size: var(--step-5);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
}
.page-hero-desc { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

/* ── Bands ────────────────────────────────────────────── */
.section-alt,
#approach.section-alt,
#contact.section-alt { background: var(--paper) !important; }

/* CTA band: the homepage blue band with white type */
.cta-banner { background: var(--band-blue); color: #fff; }
.cta-inner h2 { color: #fff; font-weight: 800; }
.cta-inner p { color: rgba(255, 255, 255, 0.88); }
.cta-banner a:focus-visible,
.cta-banner .btn:focus-visible { outline-color: #fff; }
.cta-banner .btn-white { background: var(--orange); color: var(--ink); }
.cta-banner .btn-white:hover { background: #ff8424; }
.cta-banner .btn-white:active { background: #e86500; }
.cta-banner .btn-ghost { color: #fff; text-decoration-color: var(--orange); }
.cta-banner .btn-ghost:hover { color: #fff; }

/* ── Buttons: homepage pills ─────────────────────────── */
.btn {
  min-width: 120px;
  min-height: 52px;
  border-radius: 999px;
  font-weight: 700;
}
.btn-primary,
.form-submit,
.page-hero .btn-white { background: var(--orange); color: var(--ink); border: 0; }
.btn-primary:hover,
.form-submit:hover,
.page-hero .btn-white:hover { background: #ff8424; color: var(--ink); }
.btn-primary:active,
.form-submit:active,
.page-hero .btn-white:active { background: #e86500; }
.btn-outline,
.page-hero .btn-ghost { color: var(--ink); border: 0; box-shadow: inset 0 0 0 2px var(--ink); background: transparent; }
.btn-outline:hover,
.page-hero .btn-ghost:hover { background: var(--ink); color: #fff; }

.text-link { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.text-link:hover { color: var(--orange-deep); }

/* ── Cards: white, hairline, 14px radius, orange on hover ── */
.info-card,
.usecase-card,
.related-card,
.team-card,
.work-card,
.srv-card,
.cta-audience-card,
.market-card,
.founder-card,
.why-card,
.stat-card,
.story-stat-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
.section-alt .info-card,
.section-alt .usecase-card,
.section-alt .srv-card,
.section-alt .work-card { background: #fff; }
.srv-card::before, .srv-card::after { content: none; }
.info-card:hover,
.usecase-card:hover,
.related-card:hover,
.team-card:hover,
.work-card:hover,
.srv-card:hover,
.cta-audience-card:hover,
.founder-card:hover,
.why-card:hover,
.stat-card:hover,
.story-stat-row:hover { border-color: var(--orange); box-shadow: none; transform: none; }
.related-card svg { color: var(--orange-deep); }

.note-box { border-left-color: var(--orange); color: var(--ink-2); }
.check-list li { color: var(--ink-2); }
.proc-num { color: var(--orange-deep); font-weight: 800; }

/* FAQ: match homepage weight */
.faq-q { color: var(--ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .btn, .info-card, .usecase-card, .related-card, .srv-card, .work-card { transition: none !important; }
}

/* Mockup labels: inactive labels were translucent white on the light page; use muted ink for 4.5:1.
   Deepen teal on the active chip for 4.5:1. */
span.screen-label { color: var(--c-ink-3); }
span.screen-label:hover { color: var(--c-ink); }
span.screen-label.label-active { color: #11564d; }

/* Form fields meet the 44px touch target */
.form-input { min-height: 48px; }