/* ==========================================================================
   Otha Capital Management — Design Tokens
   Extends the dashboard's Manrope + bone/slate palette (Fund Teaser v4.4)
   ========================================================================== */

:root {
  /* Palette */
  --paper: #F5F1E8;          /* warm bone — primary surface */
  --paper-2: #EDE7D8;        /* warm bone deep — subtle differentiation */
  --slate: #1E2831;          /* deep slate — primary ink */
  --slate-2: #2E3B47;        /* slate secondary — softer emphasis */
  --slate-3: #566573;        /* slate tertiary — supporting text */
  --slate-4: #8A94A0;        /* slate muted — captions, dates */
  --ink: #0F1721;            /* near-black — display headlines */
  --oxblood: #8B2E2E;        /* accent — used sparingly for warnings/errors */
  --forest: #2D4A3E;         /* accent — used sparingly for confirmations */
  --gold: #B08D57;           /* accent — used sparingly for emphasis */
  --line: rgba(30, 40, 49, 0.12);   /* rule lines */
  --line-strong: rgba(30, 40, 49, 0.24);

  /* Type scale */
  --text-xs: 0.75rem;        /* 12px — meta, captions */
  --text-sm: 0.875rem;       /* 14px — UI text, nav */
  --text-base: 1rem;         /* 16px — body */
  --text-lg: 1.125rem;       /* 18px — lead body */
  --text-xl: 1.5rem;         /* 24px — subsection */
  --text-2xl: 2rem;          /* 32px — section title */
  --text-3xl: 2.75rem;       /* 44px — page title */
  --text-hero: clamp(3rem, 6vw, 5.25rem);   /* hero: 48-84px */
  --text-display: clamp(4rem, 8vw, 7.5rem); /* wordmark: 64-120px */

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --content-max: 1200px;
  --prose-max: 65ch;
  --nav-height: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-med: 400ms;
  --dur-slow: 800ms;

  /* Elevation (minimal — the aesthetic is flat editorial) */
  --shadow-sm: 0 1px 3px rgba(30, 40, 49, 0.08);
  --shadow-md: 0 4px 20px rgba(30, 40, 49, 0.10);
}

/* ==========================================================================
   Reset + base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--slate);
  background: var(--paper);
  overflow-x: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
}

/* Tabular numerics for financial numbers */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 { font-size: var(--text-hero); letter-spacing: -0.03em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.08em; }

p {
  max-width: var(--prose-max);
  color: var(--slate-2);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

/* Eyebrow — small caps label above section headings */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--slate-3);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: clamp(var(--space-16), 10vw, var(--space-32)) 0;
  border-bottom: 1px solid var(--line);
}

.section--tight {
  padding: clamp(var(--space-12), 6vw, var(--space-20)) 0;
}

.section--paper-2 {
  background: var(--paper-2);
}

/* Grid utilities */
.grid {
  display: grid;
  gap: var(--space-8);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Two-column asymmetric — for thesis, approach sections */
.split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
}

.split--reverse { grid-template-columns: 2fr 1fr; }

@media (max-width: 900px) {
  .split, .split--reverse { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 50;
  background: rgba(245, 241, 232, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.nav.scrolled {
  border-bottom-color: var(--line);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: var(--text-sm);
}

.nav__brand svg {
  height: 28px;
  width: auto;
  color: var(--ink);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--slate-2);
  letter-spacing: 0.02em;
}

.nav__link:hover { color: var(--ink); }

.nav__cta {
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--dur-fast) var(--ease-out);
}

.nav__cta:hover { background: var(--slate); }

@media (max-width: 768px) {
  .nav__links { gap: var(--space-4); }
  .nav__link { display: none; }
  .nav__link--portal { display: inline-block; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: clamp(var(--space-16), 12vw, var(--space-32));
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Hero backdrop — tower silhouette right, bone gradient left for text legibility */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-backdrop.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  z-index: -2;
  opacity: 1;
}

/* Gradient stays soft on the right so the observation deck reads clearly,
   opaque on the left so the headline sits crisp against paper */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--paper) 0%,
    var(--paper) 25%,
    rgba(245, 241, 232, 0.90) 42%,
    rgba(245, 241, 232, 0.35) 62%,
    rgba(245, 241, 232, 0) 82%,
    rgba(245, 241, 232, 0) 100%
  );
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero::before {
    background-image: url('../images/hero-backdrop-mobile.jpg');
    background-position: bottom right;
  }
  .hero::after {
    background: linear-gradient(
      to bottom,
      var(--paper) 0%,
      var(--paper) 40%,
      rgba(245, 241, 232, 0.85) 60%,
      rgba(245, 241, 232, 0.35) 100%
    );
  }
}

.hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--slate-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}

.hero__headline {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: var(--space-8);
  max-width: 22ch;
}

.hero__sub {
  font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
  line-height: 1.4;
  color: var(--slate-2);
  max-width: 52ch;
  margin-bottom: var(--space-12);
  font-weight: 400;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Hero wordmark deprecated — tower silhouette in backdrop image serves as right-side visual weight */
.hero__wordmark { display: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  font-family: inherit;
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--slate);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--slate-3);
}

.btn--secondary:hover {
  border-color: var(--ink);
  background: rgba(30, 40, 49, 0.04);
}

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

/* ==========================================================================
   Section-level imagery + data blocks
   ========================================================================== */

/* Two-column image + body layout — Firm and Strategy use this */
.split-image {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}

.split-image--reverse {
  grid-template-columns: 7fr 5fr;
}

@media (max-width: 900px) {
  .split-image, .split-image--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .split-image--reverse .section__image {
    order: -1;
  }
}

/* Section image — 4:3 aspect, subtle bottom-shadow gradient for polish */
.section__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 3px rgba(30, 40, 49, 0.06);
}

.section__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 40, 49, 0) 60%, rgba(30, 40, 49, 0.12) 100%);
  pointer-events: none;
}

.section__image--sticky {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-8));
}

/* Data block — restrained tabular key-facts strip inside section body */
.datablock {
  margin: var(--space-8) 0;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-6);
}

.datablock__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.datablock__value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.datablock__label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--slate-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Track label — small heading for Development / Acquisitions breakdown inside Strategy */
.track-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* First track label has no top border/padding (opens naturally after the intro paragraph) */
.section__body > p + .track-label {
  margin-top: var(--space-8);
}

/* ==========================================================================
   Sections — Firm / Strategy / Vehicles / Team
   ========================================================================== */

.section__header {
  margin-bottom: var(--space-16);
  max-width: 60ch;
}

/* Eyebrow-only variant — no h2, tighter spacing before content */
.section__header--eyebrow-only {
  margin-bottom: var(--space-8);
}

.section__header--eyebrow-only .eyebrow {
  margin-bottom: 0;
}

.section__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--space-6);
}

.section__lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--slate-2);
  max-width: 56ch;
}

.section__body {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--slate-2);
  max-width: 60ch;
}

.section__body p + p { margin-top: var(--space-5, 1.25rem); }

/* Pillars — used for Approach / disciplines */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.pillar {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-6);
}

.pillar__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
}

.pillar__body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--slate-2);
}

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Frameworks — two-card layout for Value-Add / Development */
.frameworks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.framework {
  padding: var(--space-8);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.framework__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-3);
  margin-bottom: var(--space-3);
}

.framework__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.framework__structure {
  font-size: var(--text-sm);
  color: var(--slate-3);
  margin-bottom: var(--space-4);
  font-variant-numeric: tabular-nums;
}

.framework__body {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--slate-2);
}

@media (max-width: 900px) {
  .frameworks { grid-template-columns: 1fr; }
}

/* Vehicles — OCM + Fund I + Co-Investment */
.vehicles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.vehicles--three {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .vehicles--three {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vehicle {
  padding: var(--space-8);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  position: relative;
}

.vehicle--upcoming {
  background: var(--paper-2);
  border-style: dashed;
}

.vehicle__status {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--gold);
  border-radius: 3px;
}

.vehicle__name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2);
}

.vehicle__type {
  font-size: var(--text-sm);
  color: var(--slate-3);
  margin-bottom: var(--space-5);
  letter-spacing: 0.02em;
}

.vehicle__body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--slate-2);
  margin-bottom: var(--space-5);
  min-height: 0;
}

/* Three-card layout has slightly tighter body copy for balance */
.vehicles--three .vehicle__body {
  font-size: 0.9375rem;
}

.vehicle__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.vehicle__cta:hover { color: var(--slate); }

@media (max-width: 900px) {
  .vehicles,
  .vehicles--three { grid-template-columns: 1fr; }
}

/* Team */
.team {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-12);
}

.team__photo {
  width: 100%;
  aspect-ratio: 4/5;
  background-color: var(--slate);
  background-image: url('../images/tom-turner-headshot.jpg');
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(30, 40, 49, 0.10);
}

.team__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 40, 49, 0) 70%, rgba(30, 40, 49, 0.08) 100%);
  pointer-events: none;
}

.team__name {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

.team__title {
  font-size: var(--text-sm);
  color: var(--slate-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: var(--space-6);
}

.team__bio {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--slate-2);
  max-width: 60ch;
}

.team__bio p + p { margin-top: var(--space-4); }

@media (max-width: 900px) {
  .team { grid-template-columns: 1fr; gap: var(--space-8); }
  .team__photo { max-width: 320px; }
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(var(--space-20), 12vw, var(--space-32)) 0;
}

.contact .section__title { color: var(--paper); }
.contact .section__lede { color: rgba(245, 241, 232, 0.72); }
.contact .eyebrow { color: rgba(245, 241, 232, 0.55); }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-16);
  margin-top: var(--space-12);
  align-items: start;
}

.contact__info h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(245, 241, 232, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-2);
}

.contact__info-group + .contact__info-group {
  margin-top: var(--space-6);
}

.contact__info a, .contact__info p {
  color: var(--paper);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.contact__info a:hover {
  border-bottom-color: var(--paper);
}

.form {
  display: grid;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(245, 241, 232, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.form__input, .form__select, .form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--paper);
  background: rgba(245, 241, 232, 0.06);
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 4px;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.form__input:focus, .form__select:focus, .form__textarea:focus {
  outline: none;
  border-color: rgba(245, 241, 232, 0.55);
  background: rgba(245, 241, 232, 0.10);
}

.form__textarea {
  min-height: 140px;
  resize: vertical;
  font-family: inherit;
}

.form__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23F5F1E8' opacity='0.55'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: calc(var(--space-4) + 20px);
}

.form__select option {
  background: var(--ink);
  color: var(--paper);
}

.form__submit {
  justify-self: start;
  padding: var(--space-4) var(--space-8);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
  border-radius: 4px;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.form__submit:hover {
  background: transparent;
  color: var(--paper);
  transform: translateY(-1px);
}

.form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.form__status {
  font-size: var(--text-sm);
  color: rgba(245, 241, 232, 0.72);
  min-height: 1.5em;
}

.form__status--success { color: #A8D9B9; }
.form__status--error { color: #E8A0A0; }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .form__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--ink);
  color: rgba(245, 241, 232, 0.72);
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid rgba(245, 241, 232, 0.12);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer__brand svg {
  height: 28px;
  color: var(--paper);
  margin-bottom: var(--space-4);
}

.footer__tagline {
  color: rgba(245, 241, 232, 0.55);
  font-size: var(--text-sm);
  max-width: 40ch;
  line-height: 1.55;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__link {
  color: rgba(245, 241, 232, 0.72);
  font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__link:hover { color: var(--paper); }

.footer__disclaimer {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.42);
  max-width: 90ch;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(245, 241, 232, 0.12);
}

.footer__copy {
  font-size: var(--text-xs);
  color: rgba(245, 241, 232, 0.42);
  margin-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  .fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Focus states — accessibility
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}