:root {
  --ink: #11110f;
  --paper: #f0eee7;
  --muted: #aaa89f;
  --line: rgba(17, 17, 15, 0.16);
  --blue: #aebee7;
  --coral: #dc765f;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial;
  --font-serif: Georgia, "Times New Roman";
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans), sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--blue); color: var(--ink); }

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 34px;
  color: #f4f1e9;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.mark { width: 25px; height: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; transform: rotate(45deg); }
.mark span { display: block; background: currentColor; border-radius: 1px; }
.mark span:nth-child(2), .mark span:nth-child(3) { opacity: .38; }
nav { display: flex; align-items: center; gap: 30px; font-size: 13px; }
nav a { opacity: .72; transition: opacity .2s ease; }
nav a:hover, nav a:focus-visible { opacity: 1; }
.nav-contact { border: 1px solid rgba(255,255,255,.38); border-radius: 999px; padding: 10px 18px; }

.hero {
  position: relative;
  min-height: 940px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 130px 5vw 80px;
  color: #f4f1e9;
  background:
    radial-gradient(circle at 72% 57%, rgba(102, 124, 184, .22), transparent 29%),
    linear-gradient(135deg, #121317 0%, #08090c 52%, #15161b 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.hero-kicker { position: relative; z-index: 2; display: flex; justify-content: space-between; max-width: 700px; margin-bottom: 34px; font-family: var(--font-sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.hero h1 { position: relative; z-index: 2; margin: 0; max-width: 1050px; font-family: var(--font-sans); font-size: clamp(74px, 10.2vw, 156px); font-weight: 500; line-height: .84; letter-spacing: -.075em; }
.hero h1 span { display: block; margin-left: 12vw; font-family: var(--font-serif); font-weight: 400; letter-spacing: -.045em; color: #b7c6ee; }
.hero-bottom { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 70px; max-width: 1080px; }
.hero-bottom p { max-width: 440px; margin: 0; font-size: 19px; line-height: 1.55; color: rgba(244,241,233,.72); }
.text-link { font-size: 12px; text-transform: uppercase; letter-spacing: .13em; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 8px; }
.text-link span { margin-left: 18px; }

.signal { position: absolute; z-index: 1; right: -80px; bottom: -160px; width: 650px; aspect-ratio: 1; border-radius: 50%; }
.signal-orbit { position: absolute; inset: 0; border: 1px solid rgba(183,198,238,.21); border-radius: 50%; }
.orbit-two { inset: 120px; border-color: rgba(220,118,95,.22); }
.signal-core { position: absolute; inset: 238px; display: grid; place-items: center; border-radius: 50%; color: #101114; background: #b7c6ee; box-shadow: 0 0 90px rgba(183,198,238,.25); }
.signal-core .mark { width: 38px; height: 38px; }
.signal-label { position: absolute; font-size: 9px; letter-spacing: .2em; color: rgba(255,255,255,.38); }
.label-one { top: 25%; left: 8%; }.label-two { top: 3%; right: 21%; }.label-three { right: 1%; bottom: 34%; }

.section-shell { padding: 120px 5vw; border-bottom: 1px solid var(--line); }
.section-label { margin: 0; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: #65645f; }
.studio-copy { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12vw; margin-top: 70px; }
.studio h2 { margin: 0; font-family: var(--font-serif); font-size: clamp(62px, 7vw, 110px); font-weight: 400; line-height: .9; letter-spacing: -.045em; }
.studio-copy > div { max-width: 540px; padding-top: 18px; }
.studio-copy p { font-size: 17px; line-height: 1.7; color: #5d5b55; }
.studio-copy .lead { margin-top: 0; font-size: 26px; line-height: 1.35; color: var(--ink); letter-spacing: -.025em; }

.work { background: #16171a; color: #f4f1e9; }
.work .section-label { color: #858580; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 52px; }
.section-heading > p:last-child { margin: 0; font-size: 13px; color: #8e8d87; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.product-card { min-height: 650px; display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; color: #171713; }
.product-card.blue { background: var(--blue); }.product-card.paper { background: #d8d4c8; }.product-card.coral { background: var(--coral); }
.product-top { display: flex; justify-content: space-between; padding: 20px 22px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid rgba(17,17,15,.18); }
.product-visual { position: relative; flex: 1; display: grid; place-items: center; min-height: 300px; border-bottom: 1px solid rgba(17,17,15,.18); }
.focus-dial { width: 190px; aspect-ratio: 1; border: 1px solid rgba(17,17,15,.48); border-radius: 50%; display: grid; place-items: center; }
.focus-dial::before { content: ""; position: absolute; width: 116px; aspect-ratio: 1; border: 1px solid rgba(17,17,15,.24); border-radius: 50%; }
.focus-dial i { width: 6px; height: 6px; background: var(--ink); border-radius: 50%; box-shadow: 0 -74px 0 var(--ink); }
.note-lines { width: 55%; transform: rotate(-5deg); }
.note-lines i { display: block; height: 1px; margin: 32px 0; background: rgba(17,17,15,.55); }
.note-lines i:nth-child(2) { width: 80%; }.note-lines i:nth-child(3) { width: 58%; }
.nutrition-ring { width: 190px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--ink) 0 62%, rgba(17,17,15,.16) 62% 100%); display: grid; place-items: center; }
.nutrition-ring::after { content: ""; width: 142px; aspect-ratio: 1; border-radius: 50%; background: var(--coral); }
.nutrition-ring i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #f0eee7; transform: translate(89px, -24px); }
.product-copy { padding: 26px 22px 30px; }
.product-copy > p:first-child { margin: 0 0 18px; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.product-copy h3 { margin: 0 0 20px; font-family: var(--font-serif); font-size: 38px; font-weight: 400; line-height: .95; letter-spacing: -.035em; }
.product-copy > p:last-child { margin: 0; max-width: 34ch; font-size: 13px; line-height: 1.55; }

.principles { background: #f0eee7; }
.principle-list { margin-top: 70px; border-top: 1px solid var(--line); }
.principle { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 40px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); }
.principle > span { font-size: 10px; color: #77756f; }
.principle h3 { margin: 0; font-family: var(--font-serif); font-size: 42px; font-weight: 400; letter-spacing: -.03em; }
.principle p { margin: 0; color: #5e5c56; }

.contact { display: grid; grid-template-columns: .8fr 2.2fr; gap: 40px; min-height: 520px; align-items: start; background: #b7c6ee; }
.contact > div p { margin: 0 0 28px; font-size: 16px; }
.contact-address { display: inline-block; font-family: var(--font-serif); font-size: clamp(38px, 5.2vw, 78px); line-height: 1.08; letter-spacing: -.045em; border-bottom: 2px solid rgba(17,17,15,.28); }
.inline-address { white-space: nowrap; }
footer { min-height: 180px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; padding: 36px 5vw; background: #0b0c0f; color: #efede5; }
.footer-links { display: flex; gap: 28px; font-size: 12px; color: #9a9993; }
footer > p { justify-self: end; margin: 0; font-size: 11px; color: #74736e; }

.legal-page { min-height: 100vh; background: var(--paper); padding: 30px 5vw 100px; }
.legal-page .brand { margin-bottom: 120px; }
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content .section-label { margin-bottom: 24px; }
.legal-content h1 { margin: 0 0 54px; font-family: var(--font-serif); font-size: clamp(64px, 9vw, 118px); font-weight: 400; line-height: .9; letter-spacing: -.05em; }
.legal-content h2 { margin: 48px 0 12px; font-size: 16px; }
.legal-content p, .legal-content li { color: #55534e; font-size: 15px; line-height: 1.75; }
.legal-content ul { padding-left: 20px; }
.legal-content a { border-bottom: 1px solid var(--line); }

@media (max-width: 900px) {
  .hero { min-height: 820px; }
  .hero h1 span { margin-left: 0; }
  .signal { width: 450px; right: -190px; bottom: -80px; }
  .signal-core { inset: 170px; }
  .studio-copy { grid-template-columns: 1fr; gap: 50px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 560px; }
  .principle { grid-template-columns: 40px 1fr; }
  .principle p { grid-column: 2; }
  .contact { grid-template-columns: 1fr; min-height: 430px; }
  footer { grid-template-columns: 1fr auto; }
  footer > p { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 600px) {
  .site-header { padding: 20px; }
  .site-header nav a:not(.nav-contact) { display: none; }
  .hero { min-height: 760px; padding: 120px 20px 54px; }
  .hero-kicker span:last-child { display: none; }
  .hero h1 { font-size: 66px; }
  .hero-bottom { margin-top: 48px; align-items: flex-start; flex-direction: column; }
  .hero-bottom p { font-size: 16px; }
  .section-shell { padding: 82px 20px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .studio h2 { font-size: 62px; }
  .studio-copy .lead { font-size: 22px; }
  .product-copy h3 { font-size: 34px; }
  .principle { gap: 20px; }
  .principle h3 { font-size: 32px; }
  .contact-address { font-size: 34px; word-break: break-word; }
  footer { padding: 40px 20px; grid-template-columns: 1fr; }
  .footer-links, footer > p { justify-self: start; }
  .legal-page { padding: 24px 20px 80px; }
  .legal-page .brand { margin-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}