.site-header { min-height: var(--s24); display: flex; align-items: center; justify-content: space-between; gap: var(--s8); position: relative; z-index: 5; }
.site-nav { display: flex; align-items: center; gap: var(--s12); }
.site-nav .text-link { color: var(--secondary); }
.site-nav .nav-contact { color: var(--silver); }
.menu-toggle { display: none; min-height: 44px; background: transparent; border: 0; padding: var(--s2); align-items: center; gap: var(--s3); font-size: var(--nav); }
.menu-icon { position: relative; width: 20px; height: 12px; border-block: 1px solid currentColor; }
.hero { position: relative; display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; padding-top: var(--s12); }
.hero-copy { position: relative; z-index: 1; padding-block: var(--s12) var(--s18); }
.signal-dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.hero h1 { font-size: var(--display); line-height: .99; letter-spacing: -.055em; margin-block: var(--s8); font-weight: 450; white-space: nowrap; }
.hero h1 .serif { color: var(--gold); font-size: 1.08em; }
.hero-description { color: var(--secondary); font-size: var(--small); line-height: 26px; margin-bottom: var(--s8); }
.hero-art { position: relative; width: 116%; margin-left: -8%; align-self: center; }
.orbit-art { width: 100%; height: auto; }
.art-note, .art-coordinate { position: absolute; font-size: 9px; line-height: 12px; letter-spacing: 2px; color: var(--secondary); }
.art-note--top { top: 10%; left: 53%; }
.art-note--bottom { top: 77%; left: 16%; }
.art-coordinate { bottom: 0; right: 5%; font-size: 8px; letter-spacing: 1.5px; }
.hero-footer { grid-column: 1 / -1; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s6); padding-block: var(--s6); color: var(--secondary); font-size: var(--label); letter-spacing: .5px; }
.hero-footer > span { text-transform: uppercase; letter-spacing: 1.5px; }
.hero-footer .text-link { font-size: var(--label); }
.services { padding-block: var(--s32) var(--s18); }
.services-intro { display: grid; grid-template-columns: 1.12fr 1fr; gap: var(--s12); align-items: end; margin-bottom: var(--s18); }
.intro-copy { justify-self: end; color: var(--muted); font-size: var(--small); line-height: 26px; padding-bottom: var(--s2); }
.service-row { display: grid; grid-template-columns: .2fr 1fr 1fr; gap: var(--s8); padding-block: var(--s12); border-top: 1px solid var(--paper-line); }
.service-number { font-size: var(--label); letter-spacing: 1.5px; color: var(--muted); padding-top: var(--s2); white-space: nowrap; }
.service-row h3 { font-size: var(--row-title); line-height: 1.2; letter-spacing: -.045em; }
.service-subtitle { font-size: var(--small); color: var(--muted); margin-top: var(--s3); }
.service-detail > p { color: var(--muted); font-size: var(--small); line-height: 26px; max-width: 420px; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.services-footnote { padding-top: var(--s8); border-top: 1px solid var(--paper-line); font-size: var(--nav); color: var(--muted); }
.services-footnote span { margin-right: var(--s3); }
.studio { display: grid; grid-template-columns: 1.12fr 1fr; gap: var(--s18); padding-block: var(--s32); }
.studio h2 { font-size: clamp(36px, 4vw, 56px); }
.studio-signature { margin-top: var(--s18); display: flex; align-items: center; gap: var(--s6); }
.studio-signature img { opacity: .8; }
.studio-signature span { font-size: var(--label); line-height: 20px; letter-spacing: 1px; color: var(--secondary); }
.studio-copy { padding-top: var(--s12); }
.studio-copy .studio-lead { font-size: 28px; line-height: 1.5; letter-spacing: -.8px; margin-bottom: var(--s8); color: var(--silver); }
.studio-copy > p { color: var(--secondary); font-size: var(--small); line-height: 28px; margin-bottom: var(--s6); }
.principles { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-size: var(--label); }
.contact { background: var(--elevated); }
.contact-inner { padding-block: var(--s18) var(--s24); }
.contact-main { display: grid; grid-template-columns: 1.12fr 1fr; align-items: end; gap: var(--s18); margin-top: var(--s12); }
.contact h2 { font-size: var(--display); line-height: .99; letter-spacing: -.055em; }
.contact h2 .serif { color: var(--gold); }
.contact-copy { padding-bottom: var(--s2); }
.contact-copy > p { font-size: var(--small); color: var(--secondary); line-height: 28px; margin-bottom: var(--s8); }
.contact-email { display: flex; width: fit-content; margin-top: var(--s3); color: var(--secondary); }
.site-footer { min-height: 144px; display: flex; align-items: center; justify-content: space-between; gap: var(--s6); }
.site-footer > p { font-size: var(--label); color: var(--secondary); }
.site-footer .text-link { font-size: var(--label); }
.error-page { min-height: 100dvh; display: grid; align-content: center; justify-items: start; gap: var(--s8); padding-block: var(--s18); }
.error-page h1 { font-size: var(--heading); line-height: 1.15; letter-spacing: -.045em; }
.error-page > p { color: var(--secondary); }
@media (min-width: 1440px) { .hero { padding-top: var(--s18); } }
@media (max-width: 1099px) {
  .hero h1 { font-size: clamp(64px, 7.4vw, 96px); }
  .site-nav { gap: var(--s8); }
  .service-row { grid-template-columns: 40px 1fr 1fr; }
  .studio, .contact-main { gap: var(--s12); }
}
@media (max-width: 959px) {
  .hero { grid-template-columns: 1fr; padding-top: var(--s6); }
  .hero-copy { padding-bottom: var(--s8); }
  .hero h1 { font-size: 96px; }
  .hero-art { width: 65%; margin: -160px 0 var(--s8) auto; opacity: .75; }
  .hero-copy { pointer-events: none; }
  .hero-copy a { pointer-events: auto; }
  .hero-description { max-width: 360px; }
  .hero-footer { position: relative; }
  .services { padding-block: var(--s24) var(--s18); }
  .services-intro { grid-template-columns: 1fr; gap: var(--s8); }
  .intro-copy { justify-self: start; }
  .service-row { grid-template-columns: 32px 1fr; }
  .service-detail { grid-column: 2; }
  .service-detail > p { max-width: none; }
  .studio { grid-template-columns: 1fr; gap: var(--s12); padding-block: var(--s24); }
  .studio-signature { display: none; }
  .studio-copy { padding-top: 0; max-width: 560px; }
  .contact-main { grid-template-columns: 1fr; gap: var(--s12); }
}
@media (max-width: 639px) {
  .site-header { min-height: 80px; flex-wrap: wrap; gap: 0; padding-block: var(--s4); }
  .brand img { width: 40px; }
  .site-nav { width: 100%; flex-direction: column; align-items: stretch; gap: var(--s2); padding-block: var(--s6) var(--s2); }
  .site-nav a { justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s2); }
  .js-nav .menu-toggle { display: flex; }
  .js-nav .site-nav { display: none; }
  .js-nav .site-nav.is-open { display: flex; }
  .menu-toggle[aria-expanded='true'] .menu-icon { border: 0; }
  .menu-toggle[aria-expanded='true'] .menu-icon::before, .menu-toggle[aria-expanded='true'] .menu-icon::after { content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor; transform: rotate(45deg); }
  .menu-toggle[aria-expanded='true'] .menu-icon::after { transform: rotate(-45deg); }
  .hero { padding-top: var(--s8); }
  .hero-copy { padding-top: var(--s6); padding-bottom: 0; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.2px; }
  .hero h1 { font-size: clamp(56px, 14.8vw, 80px); margin-block: var(--s8) var(--s6); }
  .hero-description { font-size: var(--nav); line-height: 24px; }
  .hero-art { opacity: 1; width: 100%; margin: 0 auto var(--s8); }
  .hero-footer { padding-block: var(--s4); }
  .hero-footer > span { font-size: 8px; line-height: 16px; max-width: 150px; }
  .hero-footer .text-link { font-size: 9px; gap: var(--s2); }
  .services { padding-block: var(--s18); }
  .services-intro { margin-bottom: var(--s12); }
  .section-heading h2 { margin-top: var(--s6); }
  .service-row { grid-template-columns: 24px 1fr; gap: var(--s6) var(--s3); padding-block: var(--s8); }
  .service-number { font-size: 9px; letter-spacing: .5px; }
  .service-subtitle { font-size: var(--nav); }
  .service-detail > p { font-size: var(--nav); line-height: 24px; }
  .tag { font-size: 9px; }
  .services-footnote { font-size: var(--label); line-height: 20px; }
  .studio { padding-block: var(--s18); }
  .studio-copy .studio-lead { font-size: 24px; }
  .studio-copy > p { font-size: var(--nav); line-height: 26px; }
  .principles { gap: var(--s2) var(--s4); }
  .contact-inner { padding-block: var(--s12) var(--s18); }
  .contact-main { margin-top: var(--s8); }
  .contact h2 { font-size: 80px; }
  .contact-copy > p { font-size: var(--nav); }
  .site-footer { flex-wrap: wrap; padding-block: var(--s8); gap: var(--s6); }
  .site-footer .brand { width: 100%; }
  .site-footer > p { font-size: 9px; }
}