:root {
  --obsidian: #0a0c10;
  --graphite: #11151b;
  --line: #2a303a;
  --warm-white: #f4f0ea;
  --muted: #a6adb8;
  --red: #d81e2b;
  color-scheme: dark;
  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--obsidian); }
body { background: var(--obsidian); color: var(--warm-white); margin: 0; }
a { color: inherit; }
.shell { margin: 0 auto; max-width: 1180px; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.site-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 5.5rem; }
.brand { align-items: center; display: inline-flex; gap: .55rem; text-decoration: none; }
.brand img { display: block; height: 2.15rem; width: 4.45rem; }
.brand-name { font-size: 1.15rem; font-weight: 760; letter-spacing: -.045em; }
.language { display: flex; gap: .75rem; }
.language a { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; padding: .5rem 0; text-decoration: none; }
.language a[aria-current="page"] { color: var(--warm-white); }
.language a:hover, .language a:focus-visible { color: var(--red); }
.hero { min-height: min(43rem, calc(100vh - 5.5rem)); padding: clamp(5.5rem, 13vw, 10rem) 0 5rem; position: relative; }
.hero::after { background: var(--red); content: ""; height: .45rem; left: 0; position: absolute; top: clamp(3rem, 7vw, 5rem); width: clamp(4.5rem, 10vw, 8rem); }
.eyebrow { color: var(--red); font-size: .72rem; font-weight: 850; letter-spacing: .17em; margin: 0 0 1.5rem; text-transform: uppercase; }
h1 { font-size: clamp(3.3rem, 8.5vw, 7.3rem); font-weight: 760; letter-spacing: -.075em; line-height: .88; margin: 0; max-width: 12ch; }
.lead { color: var(--muted); font-size: clamp(1.12rem, 2vw, 1.38rem); line-height: 1.62; margin: 2.25rem 0 0; max-width: 43rem; }
.principles { border-top: 1px solid var(--line); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section-label { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .15em; margin: 0 0 2rem; text-transform: uppercase; }
.principle-grid { background: var(--line); display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); }
.principle { background: var(--graphite); min-height: 18rem; padding: 2rem; }
.number { color: var(--red); font-size: .78rem; font-weight: 850; letter-spacing: .13em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); letter-spacing: -.045em; line-height: 1; margin: 4.7rem 0 1rem; }
.principle h2 { margin-top: 3.7rem; }
.principle p, .statement p { color: var(--muted); line-height: 1.65; margin: 0; }
.statement { border-top: 1px solid var(--line); max-width: 52rem; padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.statement h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: .94; margin: 0 0 1.5rem; max-width: 14ch; }
.statement p { font-size: 1.12rem; max-width: 43rem; }
.privacy { border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; line-height: 1.6; padding: 1.5rem 0; }
.site-footer { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: .78rem; justify-content: space-between; padding: 2rem 0 2.5rem; }
.site-footer strong { color: var(--warm-white); letter-spacing: -.02em; }
@media (max-width: 720px) {
  .principle-grid { grid-template-columns: 1fr; }
  .principle { min-height: 0; }
  .hero { min-height: 0; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: .75rem; }
}