:root{
  --bg:#f1f0ea; --ink:#11110f; --muted:#6f6d65; --line:#cbc8bd; --accent:#e04b2a;
  --max:1180px; --pad:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}
a{color:inherit;text-decoration:none}
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.top{display:flex;justify-content:space-between;align-items:center;padding:28px 0 20px;border-bottom:1px solid var(--line);position:relative}
.wordmark{font-weight:800;letter-spacing:-.04em;font-size:1.15rem}
.lang{display:flex;gap:8px;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.lang a{padding:7px 10px;border:1px solid var(--line);border-radius:999px}
.lang a.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hero{min-height:78vh;display:grid;grid-template-columns:1.5fr .5fr;gap:48px;align-items:end;padding:clamp(72px,12vw,160px) 0 48px;border-bottom:1px solid var(--line)}
.eyebrow,.section-label,.step-num{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
h1{font-size:clamp(3.6rem,10vw,9.2rem);line-height:.88;letter-spacing:-.075em;margin:18px 0 24px;max-width:11ch;font-weight:800}
.lede{font-size:clamp(1.1rem,2vw,1.45rem);max-width:42rem;color:#35342f}
.hero-mark{align-self:center;justify-self:end;width:min(22vw,220px);aspect-ratio:1;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;position:relative}
.hero-mark:before,.hero-mark:after{content:"";position:absolute;background:var(--ink)}
.hero-mark:before{width:62%;height:1px}
.hero-mark:after{height:62%;width:1px}
.hero-mark span{width:16%;aspect-ratio:1;border-radius:50%;background:var(--accent);z-index:2}
.section{padding:88px 0;border-bottom:1px solid var(--line)}
.section-grid{display:grid;grid-template-columns:.45fr 1.55fr;gap:48px}
h2{font-size:clamp(2rem,4vw,4rem);line-height:.98;letter-spacing:-.05em;margin:0 0 40px;max-width:14ch}
.manifesto{font-size:clamp(1.45rem,2.6vw,2.4rem);line-height:1.2;letter-spacing:-.03em;max-width:28ch;margin:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.step{padding:24px 22px 36px 0;border-right:1px solid var(--line);min-height:260px}
.step+.step{padding-left:22px}
.step:last-child{border-right:0}
.step h3{font-size:1.15rem;letter-spacing:-.02em;margin:48px 0 12px}
.step p{color:var(--muted);font-size:.95rem;margin:0}
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.principle{padding:24px 34px 44px 0;border-bottom:1px solid var(--line)}
.principle:nth-child(even){padding-left:34px;border-left:1px solid var(--line)}
.principle strong{display:block;font-size:1.4rem;letter-spacing:-.025em;margin-bottom:8px}
.principle span{color:var(--muted)}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.note{border:1px solid var(--line);padding:24px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s ease}
.note:hover{transform:translateY(-3px);border-color:var(--ink)}
.note small{color:var(--muted);text-transform:uppercase;letter-spacing:.09em}
.note b{font-size:1.25rem;letter-spacing:-.025em;max-width:14ch}
.footer{padding:32px 0 50px;display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:.86rem}
.accent{color:var(--accent)}
@media(max-width:800px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-mark{justify-self:start;width:120px}
  .section-grid{grid-template-columns:1fr;gap:30px}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:0}.step:nth-child(3){border-top:1px solid var(--line)}
  .principles,.notes{grid-template-columns:1fr}
  .principle:nth-child(even){padding-left:0;border-left:0}
}
@media(max-width:520px){
  .top{padding-top:20px}
  h1{font-size:clamp(3.1rem,18vw,5.2rem)}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-top:1px solid var(--line);padding-left:0!important}
  .notes{grid-template-columns:1fr}
  .footer{flex-direction:column}
}