/* Shared navigation, cards, forms, buttons and media. No hover-only UI. */
.site-header { height: var(--header-height); padding-inline: clamp(1.25rem, 1.2vw, 2rem); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; position: sticky; top: 0; background: var(--color-paper); z-index: var(--z-header); border-bottom: 1px solid #ececea; }
.wordmark { font-size: 1.1875rem; line-height: 1.2; font-weight: 550; letter-spacing: .13em; white-space: nowrap; }
.site-header nav { display: flex; gap: clamp(1.5rem, 2.6vw, 3.5rem); align-items: center; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.0625rem; line-height: 1.3; color: var(--color-muted); }
.site-header nav a[aria-current] { color: var(--color-ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.menu-toggle { display: none; align-items: center; gap: .6rem; min-height: 44px; font-size: var(--text-caption); }
.menu-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.label,.eyebrow { font-size: var(--text-caption); line-height: 1.6; color: var(--color-muted); }
.eyebrow { margin-bottom: var(--space-5); }
.statement,.type-display { font-size: var(--text-statement); line-height: 1.4; text-wrap: balance; font-weight: 450; }
.lead { font-size: var(--text-lead); line-height: 1.65; }
.text-link { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; font-size: 1rem; line-height: 1.5; }
.text-link .icon { width: 1.125rem; height: 1.125rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 54px; padding: .875rem 1.5rem; background: var(--color-ink); color: white; font-size: var(--text-body); line-height: 1.4; border: 1px solid var(--color-ink); }
.project-image { background: var(--color-soft); aspect-ratio: 4/3; overflow: hidden; }
.project-image img,.project-image video { width: 100%; height: 100%; object-fit: cover; }
.rhythm-0 .project-image { aspect-ratio: 1; }
.rhythm-1 .project-image { aspect-ratio: 16/10; }
.rhythm-2 .project-image { aspect-ratio: 4/3; }
.project-caption { display: grid; grid-template-columns: 1fr 1.2rem; column-gap: .6rem; row-gap: .2rem; padding-top: .85rem; }
.project-caption h2 { font-size: clamp(1.0625rem, 1rem + .25vw, 1.3125rem); color: var(--color-accent); line-height: 1.45; font-weight: 450; }
.project-caption > .icon { width: 1.1rem; height: 1.1rem; margin-top: .25rem; }
.project-caption p { grid-column: span 2; display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-caption); line-height: 1.6; }
.project-caption p span { color: var(--color-muted); }
.service-row { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--grid-gap); padding-block: var(--space-7); border-top: 1px solid var(--color-line); align-items: start; }
.service-row:last-child { border-bottom: 1px solid var(--color-line); }
.service-number { grid-column: span 1; color: var(--color-muted); font-size: var(--text-caption); }
.service-row > div { grid-column: span 5; }
.service-row > div p { margin-top: .65rem; font-size: var(--text-caption); color: var(--color-muted); }
.service-row > p { grid-column: span 5; }
.service-row > .icon { grid-column: span 1; justify-self: end; }
.filter-group { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.filter-group button { min-height: 44px; padding: .5rem 0; color: var(--color-muted); border-bottom: 1px solid transparent; }
.filter-group [aria-pressed=true] { color: var(--color-ink); border-color: var(--color-ink); }
.empty-state { padding: var(--space-8) 0; color: var(--color-muted); }
.search-field { display: flex; flex-direction: column; gap: .4rem; font-size: var(--text-caption); }
.search-field input { border: 0; border-bottom: 1px solid var(--color-ink); padding: .5rem 0; background: transparent; min-height: 44px; font-size: 1rem; }
.site-footer { margin-top: var(--section-space); padding-block: var(--space-8) var(--space-6); border-top: 1px solid var(--color-line); background: var(--color-soft); }
.footer-top { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--grid-gap); margin-bottom: var(--space-9); }
.footer-top > p { grid-column: span 4; }
.footer-inquiry { grid-column: 6 / span 7; display: flex; gap: 1rem; align-items: center; justify-content: space-between; font-size: var(--text-heading); line-height: 1.3; }
.footer-inquiry .icon { width: .85em; height: .85em; }
.footer-grid { row-gap: 2rem; font-size: var(--text-caption); }
.footer-grid .wordmark { display: inline-block; margin-bottom: .85rem; }
.footer-grid .label { margin-bottom: .6rem; }
.footer-social { display: flex; flex-direction: column; align-items: flex-start; }
.footer-social a { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.footer-social .icon { width: 1rem; height: 1rem; }
.footer-bottom { display: flex; gap: 1rem 2rem; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-line); font-size: var(--text-min); color: var(--color-muted); }
.footer-bottom a,.footer-bottom button { display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; }
.footer-bottom .icon { width: 1rem; height: 1rem; }
.media-dialog { width: calc(100% - 2rem); max-width: 120rem; height: calc(100dvh - 2rem); max-height: none; border: 0; background: #111; color: white; padding: 4rem 1rem 1rem; }
.media-dialog::backdrop { background: #000c; }
.dialog-close { position: absolute; top: .5rem; right: 1rem; display: flex; align-items: center; gap: 1rem; min-height: 44px; font-size: var(--text-caption); }
.dialog-close span { font-size: 2rem; line-height: 1; }
.dialog-stage { width: 100%; height: calc(100% - 3.5rem); display: flex; align-items: center; justify-content: center; }
.dialog-stage img,.dialog-stage video { width: 100%; height: 100%; object-fit: contain; }
.dialog-stage iframe { width: 100%; height: 100%; border: 0; }
.dialog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.5rem; }
.dialog-toolbar button { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.dialog-caption { font-size: var(--text-caption); text-align: center; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 800px) {
  .menu-toggle { display: inline-flex; }
  .site-header nav { display: none; position: absolute; inset: var(--header-height) 0 auto; padding: 1.5rem var(--page-gutter) 2rem; background: white; border-bottom: 1px solid var(--color-line); z-index: var(--z-menu); }
  .site-header nav.is-open { display: grid; gap: .6rem; }
  .site-header nav a { font-size: 1.5rem; }
  .service-row > div { grid-column: span 9; }
  .service-row > p { grid-column: 2 / span 10; }
  .service-row > .icon { grid-column: 12; grid-row: 1; }
  .footer-top > p,.footer-inquiry { grid-column: span 12; }
  .footer-top { margin-bottom: var(--space-7); }
}
@media (max-width: 600px) {
  .wordmark { font-size: 1rem; letter-spacing: .09em; }
  .project-grid { row-gap: var(--space-7); }
  .project-image,.rhythm-0 .project-image,.rhythm-1 .project-image,.rhythm-2 .project-image { aspect-ratio: 4/3; }
  .project-caption h2 { font-size: 1.125rem; }
  .filter-group { gap: .35rem 1.2rem; }
  .filter-group button { font-size: 1rem; }
  .service-row { padding-block: var(--space-6); row-gap: var(--space-4); }
  .service-row h3 { font-size: 1.375rem; }
  .footer-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1rem; }
  .footer-bottom > p { grid-column: span 2; margin-bottom: .5rem; }
  .media-dialog { width: 100%; height: 100dvh; max-width: none; margin: 0; padding-inline: .5rem; }
}