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

html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg);
  font-weight: 400;
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--bg); }

/* === Typography helpers === */
.t-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.t-display {
  font-size: clamp(48px, 8vw, var(--fs-5xl));
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.t-h2 {
  font-size: clamp(32px, 4.5vw, var(--fs-3xl));
  font-weight: 300;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.t-h3 {
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.t-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
  font-weight: 300;
}

.t-meta {
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}

/* === Layout === */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(60px, 10vw, 140px); }
.section--tight { padding-block: clamp(40px, 6vw, 80px); }
.section--dark { background: var(--bg-dark); color: var(--on-dark); }
.section--dark .t-eyebrow { color: var(--on-dark-mute); }
.section--dark .t-lead { color: var(--on-dark-mute); }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--accent); }

.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.btn--on-dark { background: var(--bg); color: var(--ink); }
.btn--on-dark:hover { background: var(--accent); color: var(--accent-ink); }

.btn--ghost-on-dark { background: transparent; color: var(--on-dark); border: 1px solid rgba(255,255,255,.25); }
.btn--ghost-on-dark:hover { background: var(--on-dark); color: var(--ink); }

/* Arrow-circle CTA (referenced from QELLI/AURA refs) */
.cta-arrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink);
  transition: gap var(--dur-fast) var(--ease);
}
.cta-arrow .circle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cta-arrow:hover { gap: 22px; }
.cta-arrow:hover .circle { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* === Section heading pattern === */
.heading-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 64px;
}
.heading-row__title { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
@media (max-width: 720px) {
  .heading-row { grid-template-columns: 1fr; }
}

/* === Utility === */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}