/* ==================================================
   TITAN CAPITAL - BASE / DESIGN TOKENS
   ================================================== */

:root {
  --color-primary: #1F2329;
  --color-secondary: #475569;
  --color-silver: #94A3B8;
  --color-light: #F8FAFC;
  --color-white: #FFFFFF;

  /* Charcoal surfaces either side of the primary band, so a component can sit
     above or below the hero / header without leaving the palette. Both are
     derived from the primary rather than invented: 'deep' keeps the ~0.78
     per-channel factor the previous Slate Charcoal palette used for its deep
     tone, 'raised' is a single ~+6 per-channel step. Both hold the primary's hue
     (~215-217deg), so the navy tint the deep tone used to carry is gone from
     every dark surface. In use: footer, mobile nav drawer and form status box on
     'deep', the hero action cards on 'raised'. */
  --color-primary-deep: #181B20;
  --color-primary-raised: #252A31;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-surface-alt: #F8FAFC;
  /* Homepage hero band. The one surface that is deliberately not a palette hue:
     a near-achromatic grey (saturation 0.4%), so it sits beside the cool slate
     neutrals without reading as a tint, and light enough that the hero's own
     text keeps AA on it (#1F2329 12.97:1, #475569 6.23:1). It gives the hero a
     block edge - 1.16:1 against the page surface below and a hard stop against
     the charcoal header above - so the hero reads as a band of its own rather
     than as the page itself. */
  --color-surface-hero: #E8E9E9;
  --color-text: #1F2329;
  --color-text-muted: #475569;
  --color-text-faint: #64748B;
  --color-text-on-dark: #F8FAFC;
  --color-text-on-dark-muted: #CBD5E1;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);

  --leading-tight: 1.15;
  --leading-body: 1.7;
  --tracking-caps: 0.14em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  /* Section rhythm: 40px on phones, ramping to a flat 50px from ~900px
     viewports upward. The previous 4rem -> 7rem ramp resolved to 104px at a
     1120px viewport (and 112px at 1440px) and stacked into a ~208-224px dead
     band between two adjacent sections. */
  --section-pad: clamp(2.5rem, 1.9rem + 2.2vw, 3.125rem);

  --container: 78rem;
  --header-h: 4.5rem;
  --radius-sm: 4px;
  --radius-md: 6px;
  --border-hair: 1px solid var(--color-border);
  --dur: 180ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-sans);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-light);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  line-height: var(--leading-tight);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  text-wrap: balance;
}

p { color: var(--color-text-muted); max-width: 62ch; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
strong { color: var(--color-primary); }

/* Section eyebrow - mono caps label */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--color-silver);
  vertical-align: middle;
  margin-right: 0.75rem;
}

.section-head { max-width: 44rem; margin-bottom: var(--space-8); }
.section-head h2 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.section-head p { font-size: var(--text-md); }
.section-head--dark h2 { color: var(--color-white); }
.section-head--dark p { color: var(--color-text-on-dark-muted); }
.section-head--dark .eyebrow { color: var(--color-silver); }
.section-head--dark .eyebrow::before { background: var(--color-secondary); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: var(--section-pad); }
.section--white { background: var(--color-white); }
.section--dark { background: var(--color-primary); color: var(--color-text-on-dark); }
.section--dark h2, .section--dark h3 { color: var(--color-white); }

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :focus-visible { outline-color: var(--color-silver); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

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

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}