@font-face {
  font-family: "Inter";
  src: url("/assets/Inter-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #171918;
  --paper: #f4f1e8;
  --orange: #f04b32;
  --lilac: #c8bef4;
  --line: rgba(23, 25, 24, 0.22);
  --max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }

.section-dark { background: var(--ink); color: var(--paper); }
.section-paper { background: var(--paper); color: var(--ink); }
.section-orange { background: var(--orange); color: var(--ink); }
.section-lilac { background: var(--lilac); color: var(--ink); }
.site-header {
  align-items: center;
  background: var(--paper);
  display: flex;
  height: 76px;
  justify-content: space-between;
  padding: 0 5vw;
  position: relative;
  z-index: 5;
}
.brand { align-items: start; display: inline-flex; flex-direction: column; gap: 3px; }
.brand img { height: 24px; width: auto; }
.brand-subtitle { font-size: 9px; font-weight: 750; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; }
.desktop-nav { display: flex; gap: 30px; }
.desktop-nav a, .mobile-nav a { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.desktop-nav a:hover, .mobile-nav a:hover { color: var(--orange); }
.mobile-nav { display: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  min-height: min(720px, calc(100vh - 76px));
  padding: clamp(50px, 8vw, 120px) 5vw clamp(56px, 8vw, 100px);
}
.hero-copy { align-self: end; max-width: 720px; }
.eyebrow, .section-kicker {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hero .eyebrow { color: var(--orange); margin: 0 0 36px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.055em; }
h1 { font-size: clamp(4.6rem, 12.5vw, 11rem); line-height: 0.86; margin: 0 0 42px; }
h1 em, h2 em { font-style: normal; color: var(--orange); }
.hero-intro { font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.35; margin-bottom: 30px; max-width: 500px; }
.hero-state { align-items: center; display: flex; font-size: 12px; font-weight: 700; gap: 9px; letter-spacing: 0.08em; margin: 0 0 28px; text-transform: uppercase; }
.hero-state span { background: var(--orange); border-radius: 50%; display: inline-block; height: 8px; width: 8px; }
.text-link { border-bottom: 1px solid currentColor; display: inline-flex; font-size: 14px; font-weight: 700; gap: 12px; padding-bottom: 7px; }
.text-link span { font-size: 18px; line-height: 12px; }
.text-link:hover { border-color: var(--orange); color: var(--orange); }
.light-link { color: var(--paper); }
.hero-mark { align-self: center; justify-self: end; max-width: 390px; padding: 20px 0 20px 40px; width: 100%; }
.hero-mark img { height: auto; margin-left: auto; width: min(100%, 340px); }
.hero-index { color: var(--orange); font-size: 12px; font-weight: 750; letter-spacing: 0.12em; margin-top: 25px; text-align: right; }
.hero-index span { color: var(--paper); margin: 0 8px; }

.ticker { background: var(--orange); display: flex; font-size: 12px; font-weight: 750; justify-content: space-between; letter-spacing: 0.1em; padding: 14px 5vw; text-transform: uppercase; }
.intro, .pillars, .now { padding: clamp(78px, 10vw, 150px) 5vw; }
.section-kicker { color: var(--orange); margin-bottom: 42px; }
.intro-grid, .now-grid { display: grid; gap: 10vw; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr); }
h2 { font-size: clamp(3rem, 6.3vw, 7rem); line-height: 0.92; margin-bottom: 0; }
.intro-body { max-width: 440px; padding-top: 8px; }
.intro-body p { font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.38; }
.intro-body p + p { margin-top: 22px; }
.intro-body .text-link { margin-top: 22px; }

.section-heading-row { align-items: end; display: flex; gap: 40px; justify-content: space-between; margin-bottom: 50px; }
.section-heading-row p { font-size: 16px; margin: 0 0 4px; max-width: 305px; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.pillar-card { display: flex; flex-direction: column; min-height: 355px; padding: 25px; }
.pillar-number { font-size: 13px; font-weight: 750; letter-spacing: 0.08em; }
.pillar-card h3 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1; margin: auto 0 16px; }
.pillar-card p { font-size: 15px; margin: 0; max-width: 225px; }
.pillar-rule { background: currentColor; display: block; height: 2px; margin-top: 28px; width: 48px; }
.pillar-orange { background: var(--orange); }
.pillar-ink { background: var(--ink); color: var(--paper); }
.pillar-lilac { background: var(--lilac); }
.pillar-paper-outline { border: 1px solid var(--ink); }

.feature { align-items: center; display: grid; gap: clamp(40px, 8vw, 130px); grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); padding: clamp(60px, 9vw, 130px) 5vw; }
.feature-image-wrap { background: var(--paper); overflow: hidden; }
.feature-image-wrap img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.feature .eyebrow { color: var(--orange); margin-bottom: 28px; }
.feature h2 { margin-bottom: 36px; }
.feature-copy > p:last-child { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.4; max-width: 420px; }

.principles { padding: clamp(78px, 10vw, 140px) 5vw; }
.principles .section-kicker { color: var(--ink); }
.principles-heading { align-items: end; display: flex; gap: 10vw; justify-content: space-between; margin-bottom: 58px; }
.principles-heading h2 { max-width: 760px; }
.principles-heading p { font-size: 16px; margin: 0 0 7px; max-width: 330px; }
.principle-grid { border-top: 1px solid rgba(23, 25, 24, 0.55); display: grid; grid-template-columns: repeat(3, 1fr); }
.principle-item { border-right: 1px solid rgba(23, 25, 24, 0.55); min-height: 260px; padding: 24px 28px 25px 0; }
.principle-item + .principle-item { padding-left: 28px; }
.principle-item:last-child { border-right: 0; }
.principle-number { font-size: 12px; font-weight: 750; letter-spacing: 0.1em; }
.principle-item h3 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1; margin: 82px 0 15px; }
.principle-item p { font-size: 15px; line-height: 1.4; margin: 0; max-width: 300px; }

.now-grid { align-items: start; }
.now-list { border-top: 1px solid var(--line); }
.now-item { border-bottom: 1px solid var(--line); display: grid; gap: 30px; grid-template-columns: 135px 1fr; padding: 22px 0; }
.now-label { color: var(--orange); font-size: 12px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.now-item p { font-size: 18px; line-height: 1.35; margin: 0; max-width: 450px; }

.contact { padding: clamp(78px, 10vw, 145px) 5vw; }
.contact .section-kicker { color: var(--ink); }
.contact-grid { display: grid; gap: 10vw; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr); }
.contact-body { max-width: 440px; padding-top: 10px; }
.contact-body > p { font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.38; }
.contact-links { border-top: 1px solid rgba(23, 25, 24, 0.55); margin-top: 48px; }
.contact-link { align-items: center; border-bottom: 1px solid rgba(23, 25, 24, 0.55); display: flex; font-size: 16px; font-weight: 700; justify-content: space-between; padding: 16px 0; }
.contact-link:hover { padding-left: 8px; padding-right: 8px; }

.site-footer { align-items: center; display: grid; gap: 36px; justify-items: center; padding: 48px 5vw 35px; text-align: center; }
.footer-brand img { height: 23px; margin: 0 auto; width: auto; }
.footer-brand p { color: rgba(244, 241, 232, 0.7); font-size: 13px; line-height: 1.45; margin: 22px 0 0; }
.footer-meta { align-items: center; color: rgba(244, 241, 232, 0.7); display: flex; font-size: 12px; gap: 25px; justify-content: center; }
.footer-meta a:hover { color: var(--orange); }

@media (max-width: 860px) {
  .site-header { height: 68px; padding: 0 6vw; }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; position: relative; }
  .mobile-nav summary { cursor: pointer; list-style: none; padding: 8px 0 8px 10px; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary span { background: var(--ink); display: block; height: 2px; margin: 5px 0; width: 23px; }
  .mobile-menu { background: var(--paper); border: 1px solid var(--ink); display: grid; gap: 18px; min-width: 160px; padding: 22px; position: absolute; right: 0; top: 42px; }
  .hero { grid-template-columns: 1fr; min-height: 650px; padding: 58px 6vw 64px; }
  .hero-mark { align-self: end; max-width: 210px; padding: 34px 0 0; }
  .hero-mark img { width: 150px; }
  .hero-index { margin-top: 12px; }
  .ticker { flex-wrap: wrap; gap: 8px 24px; padding: 13px 6vw; }
  .intro, .pillars, .now, .contact { padding-left: 6vw; padding-right: 6vw; }
  .intro-grid, .now-grid, .contact-grid, .feature { gap: 48px; grid-template-columns: 1fr; }
  .intro-body { padding-top: 0; }
  .section-heading-row { align-items: start; display: block; }
  .section-heading-row p { margin-top: 22px; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-card { min-height: 300px; }
  .feature { padding-left: 6vw; padding-right: 6vw; }
  .feature-copy { max-width: 500px; }
  .principles { padding-left: 6vw; padding-right: 6vw; }
  .principles-heading { align-items: start; display: block; }
  .principles-heading p { margin-top: 22px; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-item, .principle-item + .principle-item { border-bottom: 1px solid rgba(23, 25, 24, 0.55); border-right: 0; min-height: 0; padding: 24px 0; }
  .principle-item h3 { margin-top: 48px; }
  .principle-item:last-child { border-bottom: 0; }
  .now-item { gap: 18px; grid-template-columns: 110px 1fr; }
  .site-footer { padding-left: 6vw; padding-right: 6vw; }
  .footer-meta { flex-wrap: wrap; margin-top: 42px; }
}

@media (max-width: 520px) {
  body { font-size: 15px; }
  h1 { font-size: clamp(4.4rem, 20vw, 7rem); }
  h2 { font-size: clamp(3.1rem, 15vw, 5rem); }
  .hero { min-height: 620px; }
  .hero-intro { font-size: 1.05rem; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-card { min-height: 235px; }
  .pillar-card h3 { margin-top: 60px; }
  .feature-image-wrap img { aspect-ratio: 4 / 3; }
  .now-item { display: block; }
  .now-item p { font-size: 17px; margin-top: 10px; }
  .footer-meta { display: grid; gap: 13px; }
}