:root {
  --bg: #f3f0ea;
  --surface: #f8f6f2;
  --fg: #141311;
  --muted: #6b665e;
  --line: #dcd6cb;
  --accent: #9c4f2e;
  --accent-ink: #fff;
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1440px;
  --radius: 2px;
  --radius-sm: 2px;
}

body { font-size: 1.02rem; }
em { font-style: italic; font-family: var(--font-display); }

.display { font-family: var(--font-display); font-weight: 400; line-height: .95; letter-spacing: -.02em; font-size: clamp(3.4rem, 10vw, 9.5rem); }
.display--page { font-size: clamp(3rem, 8vw, 7.5rem); max-width: 14ch; }
.h2 { font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.01em; }
.h3 { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; }
.eyebrow { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.eyebrow--light { color: rgb(255 255 255 / .85); }
.num { font-size: .75rem; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }

.btn {
  --btn-fg: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: 0 1.6rem;
  border-radius: 999px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg);
  font-weight: 600; font-size: .92rem; text-decoration: none; position: relative; overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), border-color .4s;
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover::before { transform: none; }
.btn:hover { border-color: var(--accent); color: #fff; }
.btn--line { background: transparent; color: var(--fg); --btn-fg: var(--fg); }
.btn--light { background: #fff; color: var(--fg); border-color: #fff; }
.btn--big { min-height: 3.6rem; padding: 0 2.4rem; font-size: 1rem; }
.arrow-link { display: inline-flex; gap: .5rem; align-items: center; font-weight: 600; font-size: .92rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
.arrow-link span { transition: transform .4s var(--ease); }
.arrow-link:hover span, a:hover > .arrow-link span { transform: translateX(6px); }
.back-link { display: inline-block; font-size: .85rem; text-decoration: none; color: var(--muted); margin-bottom: 2rem; }
.back-link:hover { color: var(--fg); }

/* header */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); }
body[data-route='home'] .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; color: #fff; }
body[data-route='home'] .site-header:not(.is-scrolled) .btn--line { border-color: rgb(255 255 255 / .6); color: #fff; }
body[data-route='home'] main { margin-top: -5rem; }
.header-row { display: flex; align-items: center; gap: 2rem; height: 5rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--font-display); font-size: 1.65rem; line-height: 1; }
.logo svg { width: 1.6rem; height: 1.6rem; transition: transform .8s var(--ease); }
.logo:hover svg { transform: rotate(-180deg); }
.logo em { font-size: .6em; margin-left: .3rem; letter-spacing: .02em; opacity: .7; }
.nav { display: flex; gap: 2rem; margin-left: auto; }
.nav a { text-decoration: none; font-size: .92rem; font-weight: 500; position: relative; padding: .4rem 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.header-cta { min-height: 2.6rem; padding: 0 1.2rem; }
.menu-btn { display: none; width: 2.75rem; height: 2.75rem; border: 0; background: none; margin-left: auto; position: relative; }
.menu-btn__bars, .menu-btn__bars::before { position: absolute; left: .6rem; right: .6rem; height: 1.5px; background: currentColor; content: ''; }
.menu-btn__bars { top: 1.15rem; }
.menu-btn__bars::before { left: 0; right: 0; top: .5rem; }
@media (max-width: 960px) {
  .nav, .header-cta { display: none; }
  .menu-btn { display: block; }
}

.menu { width: 100vw; height: 100dvh; background: var(--fg); color: var(--bg); animation: menu-in .6s var(--ease) both; }
.menu.is-closing { animation: menu-out .3s ease both; }
@keyframes menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes menu-out { to { opacity: 0; } }
.menu__inner { padding: 1.25rem var(--gutter) 2rem; height: 100%; display: flex; flex-direction: column; }
.menu__close { align-self: flex-end; border-color: rgb(255 255 255 / .3); }
.menu nav { display: grid; gap: .25rem; margin-top: 2rem; }
.menu nav a { font-family: var(--font-display); font-size: clamp(2.4rem, 11vw, 4rem); text-decoration: none; line-height: 1.15; }
.menu nav a[aria-current='page'] { font-style: italic; color: #d9a487; }
.menu__foot { margin-top: auto; opacity: .6; font-size: .9rem; }

/* page wipe transition */
::view-transition-old(root) { animation: vt-fade .45s ease both; }
::view-transition-new(root) { animation: vt-wipe .9s var(--ease) both; }
@keyframes vt-fade { to { opacity: .4; } }
@keyframes vt-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* hero */
.hero { position: relative; min-height: 100svh; display: grid; color: #fff; overflow: hidden; }
.hero__media, .hero__shade { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: hero-zoom 2.4s var(--ease) both; }
@keyframes hero-zoom { from { transform: scale(1.12); } }
.hero__shade { background: linear-gradient(180deg, rgb(0 0 0 / .45), rgb(0 0 0 / .05) 40%, rgb(0 0 0 / .55)); }
.hero__content { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 8rem 3rem; gap: 2rem; }
.hero .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero .line > span { display: inline-block; animation: line-up 1.2s var(--ease) both; }
.hero .line:nth-child(2) > span { animation-delay: .12s; }
@keyframes line-up { from { transform: translateY(105%); } }
.hero__eyebrow { animation: fade-in 1s .4s both; }
.hero__foot { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; animation: fade-in 1s .6s both; }
.hero__foot p { max-width: 38ch; font-size: 1.05rem; }

/* intro */
.intro { padding-block: clamp(5rem, 12vw, 10rem) clamp(3rem, 7vw, 6rem); display: grid; gap: 4rem; }
.intro__text { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.12; max-width: 24ch; }
.intro__text em { color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 0; border-top: 1px solid var(--line); padding-top: 2rem; }
.stats dt { font-size: .82rem; color: var(--muted); }
.stats dd { margin: 0; font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; font-variant-numeric: tabular-nums; }

.section-head { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 2rem; margin-bottom: 2.5rem; }
.section-head .eyebrow { width: 100%; }
.section-head .arrow-link { margin-left: auto; }

/* project cards */
.featured, .index-block, .process-teaser, .journal-teaser { padding-block: clamp(3rem, 7vw, 6rem); }
.featured__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2.5vw, 2.5rem); }
.project-card { text-decoration: none; display: grid; gap: 1rem; }
.project-card--wide { grid-column: 1 / -1; }
.project-card__media { overflow: hidden; aspect-ratio: 3 / 2; background: var(--line); }
.project-card--wide .project-card__media { aspect-ratio: 21 / 9; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.project-card:hover img { transform: scale(1.05); }
.project-card__info { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.project-card h3 { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; }
.project-card p { color: var(--muted); font-size: .88rem; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; }
.work-grid .project-card:nth-child(4n + 2), .work-grid .project-card:nth-child(4n + 3) { margin-top: 0; }
.work-grid .project-card:nth-child(even) { transform: translateY(4rem); }
html.js .work-grid .project-card:nth-child(even)[data-reveal]:not(.is-in) { transform: translateY(calc(4rem + 28px)); }
.work-grid { padding-bottom: 4rem; }

/* work index */
.work-index { border-top: 1px solid var(--fg); }
.work-index a {
  display: grid; grid-template-columns: 3rem 1.6fr 1fr 1fr 4rem; gap: 1rem; align-items: baseline;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; transition: padding .5s var(--ease), color .3s;
}
.work-index a::before { content: ''; position: absolute; inset: 0; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); z-index: -1; }
.work-index li { position: relative; isolation: isolate; }
.work-index a:hover, .work-index a:focus-visible { color: var(--bg); padding-inline: 1rem; }
.work-index a:hover::before, .work-index a:focus-visible::before { transform: scaleY(1); }
.work-index a:hover .num, .work-index a:hover .work-index__meta { color: rgb(255 255 255 / .7); }
.work-index__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.1; }
.work-index__meta { color: var(--muted); font-size: .9rem; }
.work-index__year { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .work-index a { grid-template-columns: 2.2rem 1fr auto; }
  .work-index__meta { display: none; }
}
.cursor-preview {
  position: fixed; left: 0; top: 0; z-index: 30; width: 300px; aspect-ratio: 3 / 2; pointer-events: none; overflow: hidden;
  opacity: 0; scale: .85; transition: opacity .3s, scale .5s var(--ease); will-change: transform;
}
.cursor-preview.is-on { opacity: 1; scale: 1; }
.cursor-preview img { width: 100%; height: 100%; object-fit: cover; }

/* toolbar + chips */
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding: 1.25rem 0 2.5rem; border-top: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  border: 1px solid var(--line); background: none; border-radius: 999px; padding: .55rem 1rem; font-size: .88rem; display: inline-flex; gap: .45rem; align-items: center;
  transition: background .3s, color .3s, border-color .3s;
}
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed='true'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip__n { font-size: .72rem; opacity: .6; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: .2rem; }
.view-toggle button { border: 0; background: none; padding: .45rem 1rem; border-radius: 999px; font-size: .85rem; }
.view-toggle button[aria-pressed='true'] { background: var(--fg); color: var(--bg); }
[data-work-list].is-swapping { animation: route-in .6s var(--ease) both; }

/* band */
.band { background: var(--fg); color: var(--bg); padding-block: clamp(4rem, 9vw, 8rem); --line: rgb(255 255 255 / .16); --muted: rgb(255 255 255 / .55); }
.band__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; }
.band .h2 { margin: 1rem 0 2rem; }
.band .h2 em { color: #d9a487; }
.service-list a { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; padding: 1.3rem 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); transition: padding .5s var(--ease), color .3s; }
.service-list a:hover { padding-left: 1rem; color: #d9a487; }
.service-list__arrow { opacity: 0; transform: translateX(-10px); transition: .4s var(--ease); }
.service-list a:hover .service-list__arrow { opacity: 1; transform: none; }

.process-strip { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--fg); }
.process-strip li { padding: 1.5rem 1.25rem 1.5rem 0; border-right: 1px solid var(--line); display: grid; gap: .4rem; }
.process-strip li + li { padding-left: 1.25rem; }
.process-strip li:last-child { border-right: 0; }
.process-strip h3 { font-family: var(--font-display); font-size: 2rem; }
.process-strip p { color: var(--muted); font-size: .85rem; }

/* journal */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; margin-top: 3rem; }
.journal-teaser .journal-grid { margin-top: 0; }
.journal-grid--two { grid-template-columns: repeat(2, 1fr); margin-top: 0; padding-bottom: 4rem; }
.journal-card { text-decoration: none; display: grid; gap: .7rem; align-content: start; }
.journal-card__media { overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: .5rem; }
.journal-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.journal-card:hover img { transform: scale(1.05); }
.journal-card h3 { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; }
.journal-card p:last-child { color: var(--muted); font-size: .95rem; }
.journal-card__meta { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.journal-lead { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; text-decoration: none; padding-top: 1rem; }
.journal-lead__media { overflow: hidden; aspect-ratio: 16 / 10; }
.journal-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.journal-lead:hover img { transform: scale(1.04); }
.journal-lead .h2 { margin: .8rem 0 1rem; }
.journal-lead p { color: var(--muted); margin-bottom: 1.5rem; }

/* page head */
.page-head { padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1.5rem; }
.page-head__lede { max-width: 56ch; font-size: 1.12rem; color: var(--muted); }
.page-head .display em, .display--page em { color: var(--accent); }

/* project detail */
.project__head { padding-block: clamp(2.5rem, 6vw, 5rem) 3rem; display: grid; gap: 1.25rem; }
.project__lede { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.2; max-width: 32ch; }
.project__hero { margin: 0; }
.project__hero img { width: 100%; max-height: 88vh; object-fit: cover; }
.zoom { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; overflow: hidden; }
.zoom img { transition: transform 1.2s var(--ease); }
.zoom:hover img { transform: scale(1.03); }
.project__body { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 8vw, 7rem); }
.facts { margin: 0; display: grid; gap: 1.25rem; align-content: start; position: sticky; top: 6rem; }
.facts div { border-top: 1px solid var(--line); padding-top: .75rem; }
.facts dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: .2rem 0 0; }
.narrative { display: grid; gap: 3rem; max-width: 62ch; }
.narrative .h3 { margin-bottom: .8rem; }
.narrative p { font-size: 1.08rem; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; }
.palette li { display: grid; gap: .5rem; font-size: .85rem; }
.palette span { aspect-ratio: 1; background: var(--c); border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); transition: transform .6s var(--ease); }
.palette li:hover span { transform: scale(1.06) rotate(-8deg); border-radius: 46% 54% 50% 50%; }
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; padding-bottom: clamp(4rem, 8vw, 7rem); }
.gallery__item { margin: 0; grid-column: 1 / span 8; display: grid; gap: .7rem; }
.gallery__item:nth-child(2) { grid-column: 6 / span 7; }
.gallery__item.is-portrait { grid-column: span 5; }
.gallery__item:nth-child(2).is-portrait { grid-column: 7 / span 5; }
.gallery__item:nth-child(3):not(.is-portrait) { grid-column: 2 / span 10; }
.gallery figcaption { font-size: .85rem; color: var(--muted); }
.next-project { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem 2rem; text-decoration: none; padding: clamp(3rem, 8vw, 6rem) var(--gutter); background: var(--fg); color: var(--bg); overflow: hidden; }
.next-project__title { font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 6rem); line-height: 1; grid-column: 1; }
.next-project__img { grid-column: 2; grid-row: 1 / span 2; width: clamp(140px, 22vw, 340px); aspect-ratio: 4 / 3; overflow: hidden; }
.next-project__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.next-project:hover img { transform: scale(1.08); }
.next-project .eyebrow { color: rgb(255 255 255 / .6); }

/* services */
.services { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--fg); }
.service { padding: 2.5rem 2.5rem 2.5rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; align-content: start; }
.service:nth-child(even) { padding-left: 2.5rem; border-left: 1px solid var(--line); }
.service ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.service li, .tags li { border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(4rem, 9vw, 8rem); }
.split__media { overflow: hidden; aspect-ratio: 4 / 5; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__text { display: grid; gap: 1.25rem; justify-items: start; max-width: 46ch; }
.split__text .h2 em { color: var(--accent); }
.split--rev .split__media { order: 2; }

/* process timeline */
.timeline { border-top: 1px solid var(--fg); }
.timeline__step { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 2rem; padding-block: 3rem; border-bottom: 1px solid var(--line); }
.timeline__n { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 8rem); line-height: .8; color: var(--accent); }
.timeline__step p { max-width: 56ch; }
.timeline__time { color: var(--muted); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin: .5rem 0 1rem; }

/* studio */
.studio-images { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2rem; align-items: end; }
.studio-images figure { margin: 0; overflow: hidden; }
.studio-images img { width: 100%; height: 100%; object-fit: cover; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; padding-block: clamp(4rem, 8vw, 7rem); }
.values .h3 { margin-bottom: .75rem; }
.values p { color: var(--muted); }
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; margin-bottom: 1.5rem; }
.person { display: grid; gap: .4rem; align-content: start; }
.person__mono {
  aspect-ratio: 4 / 5; display: grid; place-items: center; margin-bottom: .8rem; font-family: var(--font-display); font-size: 4.5rem;
  background: linear-gradient(160deg, #e6dfd3, #cfc4b3); color: #6b5a47; transition: background .6s, color .6s;
}
.person:hover .person__mono { background: linear-gradient(160deg, #9c4f2e, #6c3520); color: #f3f0ea; }
.person h3 { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; }
.person__role { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.person p:last-child { color: var(--muted); font-size: .92rem; }

/* article */
.article__head { padding-block: clamp(2.5rem, 6vw, 5rem) 3rem; display: grid; gap: 1.25rem; }
.article__hero { margin-block: 0 4rem; }
.article__hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.article__body { width: min(100% - 2 * var(--gutter), 68ch); margin: 0 auto clamp(4rem, 8vw, 7rem); display: grid; gap: 1.5rem; font-size: 1.12rem; line-height: 1.75; }
.article__body > p:first-child::first-letter { font-family: var(--font-display); float: left; font-size: 4.6rem; line-height: .8; padding: .35rem .6rem 0 0; color: var(--accent); }

/* inquiry */
.inquiry { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(2rem, 6vw, 6rem); padding-bottom: clamp(4rem, 8vw, 7rem); align-items: start; }
.form { display: grid; gap: 3rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-grid > legend { margin-bottom: 1.5rem; float: left; width: 100%; }
.form-grid > legend + * { clear: both; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea { border-width: 0 0 1px; border-radius: 0; padding-inline: 0; background: transparent; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 1px 0 0 var(--fg); }
.radio-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-pills label { position: relative; }
.radio-pills input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-pills span { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1.1rem; font-size: .88rem; transition: .3s; }
.radio-pills input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.radio-pills input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.radio-pills input[aria-invalid='true'] + span { border-color: var(--error, #b42318); }
.inquiry__aside { position: sticky; top: 6rem; display: grid; gap: 2rem; padding: 2rem; background: var(--surface); border: 1px solid var(--line); }
.next-steps { display: grid; gap: 1rem; counter-reset: s; }
.next-steps li { padding-left: 2.2rem; position: relative; font-size: .95rem; }
.next-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: .75rem; display: grid; place-items: center; }
.form-success { display: grid; gap: 1.25rem; justify-items: start; padding: 3rem; background: var(--surface); border: 1px solid var(--line); }

/* credits */
.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; padding-bottom: 5rem; }
.credits li { display: flex; gap: .9rem; align-items: center; font-size: .88rem; }
.credits img { width: 64px; height: 48px; object-fit: cover; flex: none; }

/* footer */
.site-footer { background: var(--fg); color: var(--bg); padding-block: 0 2rem; --muted: rgb(255 255 255 / .55); --line: rgb(255 255 255 / .14); }
.footer-cta { display: grid; gap: .5rem; padding-block: clamp(4rem, 10vw, 8rem); text-decoration: none; border-bottom: 1px solid var(--line); }
.footer-cta span { color: var(--muted); }
.footer-cta strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 9vw, 8rem); line-height: 1; transition: color .4s; }
.footer-cta strong span { display: inline-block; color: inherit; transition: transform .5s var(--ease); }
.footer-cta:hover strong { color: #d9a487; }
.footer-cta:hover strong span { transform: translateX(1rem); }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-block: 3rem; }
.footer-grid nav { display: grid; gap: .3rem; justify-items: start; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.footer-base { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1.5rem; font-size: .85rem; }
.footer-base .demo-note { max-width: 70ch; }

.not-found { min-height: 60vh; align-content: center; justify-items: start; }

/* responsive */
@media (max-width: 1000px) {
  .band__grid, .project__body, .inquiry, .journal-lead { grid-template-columns: 1fr; }
  .facts { position: static; grid-template-columns: repeat(2, 1fr); }
  .inquiry__aside { position: static; }
  .process-strip { grid-template-columns: repeat(3, 1fr); }
  .process-strip li:nth-child(3) { border-right: 0; }
  .process-strip li:nth-child(4) { padding-left: 0; }
  .journal-grid, .team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .featured__grid, .work-grid, .services, .split, .values, .journal-grid, .journal-grid--two, .form-grid, .studio-images, .footer-grid { grid-template-columns: 1fr; }
  .work-grid .project-card:nth-child(even) { transform: none; }
  .project-card--wide .project-card__media { aspect-ratio: 4 / 3; }
  .service, .service:nth-child(even) { padding: 2rem 0; border-left: 0; }
  .split--rev .split__media { order: 0; }
  .stats { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
  .stats dd { font-size: 2.4rem; }
  .process-strip { grid-template-columns: 1fr 1fr; }
  .process-strip li, .process-strip li + li { padding: 1.25rem 1rem 1.25rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .team__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .person__mono { font-size: 3rem; }
  .gallery { grid-template-columns: 1fr; gap: 2rem; }
  .gallery__item, .gallery__item:nth-child(n), .gallery__item.is-portrait { grid-column: auto; }
  .timeline__step { grid-template-columns: 1fr; gap: 1rem; }
  .next-project { grid-template-columns: 1fr; }
  .next-project__img { grid-column: 1; grid-row: auto; width: 100%; }
  .form-success { padding: 1.5rem; }
  .inquiry__aside { padding: 1.5rem; }
}