html.anim .loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--ink); color: var(--on-ink);
}
.hero h1 { font-size: var(--fs-display); max-width: 15ch; }

.skills { padding-bottom: var(--section); }

.manifesto { padding-block: var(--section); }
.manifesto-inner { max-width: 46rem; margin-inline: auto; }
.manifesto p {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(1.125rem, 0.85rem + 1.02vw, 1.75rem); line-height: 1.22;
}
.manifesto p + p { margin-top: 0.6em; color: var(--muted); }
.steps { display: grid; }

.page-top { padding-top: calc(env(safe-area-inset-top, 0px) + clamp(8rem, 14vw, 12.5rem)); }
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.back { display: inline-block; margin-bottom: clamp(32px, 4vw, 56px); color: var(--muted); }
.p-facts { grid-column: 1 / 5; }
.p-facts div { padding-block: 14px; border-top: 1px solid var(--rule); }
.p-facts div:last-child { border-bottom: 1px solid var(--rule); }
.p-facts dt { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }
.p-facts dd { font-family: var(--display); font-weight: 500; font-size: 1.0625rem; margin-top: 2px; }
.p-text { grid-column: 6 / 13; display: grid; gap: 1.1em; align-content: start; }
.p-text .lead { font-family: var(--display); font-weight: 500; font-size: clamp(1.1875rem, 0.892rem + 1.105vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.4em; }
.p-text p:not(.lead) { color: #3a3840; max-width: 62ch; }
@media (max-width: 899px) { .p-facts, .p-text { grid-column: 1 / -1; } .p-facts { order: 2; margin-top: 48px; } }

.p-ba { padding-bottom: var(--section); }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ba-grid figure { margin: 0; position: relative; color: #fff; }
.ba-grid .media { --ratio: 4 / 3; }
.ba-grid figcaption.project-caption { pointer-events: none; }
@media (max-width: 700px) { .ba-grid { grid-template-columns: 1fr; } }

.p-drawings { background: var(--paper); padding-block: var(--head) var(--section); }
.p-drawings .section-head { padding-bottom: var(--head); }

.next { position: relative; display: block; color: #fff; overflow: hidden; }
.next .media { --ratio: 21 / 9; background: var(--ink); }
.next .media img { transition: transform 1.4s var(--ease); opacity: 0.55; }
.next:hover .media img, .next:focus-visible .media img { transform: scale(1.03); }
.next-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px; }
.next-in .label { color: rgba(255,255,255,0.85); }
.next-in strong { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 0.935rem + 1.7vw, 2.5rem); line-height: 1.1; }
@media (max-width: 700px) { .next .media { --ratio: 4 / 3; } }

.c-body { padding-bottom: var(--section); }
.c-info { grid-column: 1 / 6; display: grid; gap: 28px; align-content: start; }
.c-info .lead { font-family: var(--display); font-weight: 500; font-size: clamp(1.125rem, 0.85rem + 0.935vw, 1.5rem); line-height: 1.22; }
.c-info .intro { color: var(--muted); max-width: 44ch; }
.c-list div { padding-block: 16px; border-top: 1px solid var(--rule); }
.c-list div:last-child { border-bottom: 1px solid var(--rule); }
.c-list dt { font-size: 0.8125rem; color: var(--muted); }
.c-list dd { font-family: var(--display); font-weight: 500; font-size: 1.125rem; margin-top: 2px; overflow-wrap: anywhere; }
.c-form { grid-column: 7 / 13; }
@media (max-width: 899px) { .c-info, .c-form { grid-column: 1 / -1; } .c-form { margin-top: 64px; } }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gap); }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
.field label, .field legend { font-size: 0.8125rem; color: var(--muted); padding: 0; }
.field input, .field textarea {
  font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--field-line); border-radius: 0;
  padding: 10px 0; width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }

.field-count { justify-self: end; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
fieldset.field { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 10px 16px; border: 1px solid var(--field-line); font-size: 0.9375rem; color: var(--ink); transition: background-color 0.4s, color 0.4s, border-color 0.4s; }
.chips label:hover span { border-color: var(--ink); }
.chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; color: var(--muted); }
.consent input { margin-top: 4px; accent-color: var(--ink); width: 16px; height: 16px; flex: none; }
.form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 36px; }
.form-foot .req { font-size: 0.8125rem; color: var(--muted); }
.btn-dark { cursor: pointer; background: transparent; color: var(--ink); }
#form-ok strong { display: block; font-family: var(--display); font-weight: 500; font-size: 1.25rem; margin-bottom: 8px; }
#form-ok:focus { outline: none; }

.a-intro { padding-bottom: var(--section); }
.a-portrait { grid-column: 1 / 6; margin: 0; }
.a-portrait .placeholder { aspect-ratio: 4 / 5; }
.a-text { grid-column: 7 / 13; display: grid; gap: 1.1em; align-content: start; }
.a-text .lead { font-family: var(--display); font-weight: 500; font-size: clamp(1.1875rem, 0.892rem + 1.105vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; }
.a-text p:not(.lead) { color: #3a3840; max-width: 58ch; }
@media (max-width: 899px) { .a-portrait, .a-text { grid-column: 1 / -1; } .a-portrait { margin-bottom: 40px; max-width: 460px; } }
.a-missions { padding-block: var(--section); border-top: 1px solid var(--rule); }
.missions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); }
.missions li { padding-block: 24px; border-top: 1px solid var(--rule); display: grid; gap: 6px; align-content: start; }
.missions .abbr { font-family: var(--display); font-weight: 500; color: var(--olive); font-size: 0.9375rem; }
.missions h3 { font-size: var(--fs-h3); }
.missions p { color: var(--muted); }
@media (max-width: 899px) { .missions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .missions { grid-template-columns: 1fr; } }
.a-domains { padding-bottom: var(--section); }
.domain-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.domain-grid figure { margin: 0; position: relative; color: #fff; }
.domain-grid .media { --ratio: 3 / 4; }
@media (max-width: 900px) { .domain-grid { grid-template-columns: 1fr 1fr; } }
.a-approach { padding-bottom: var(--section); }
.page-contact-band { background: var(--ink); color: var(--on-ink); padding-top: var(--section); }
.page-contact-band .section-head .over { color: var(--on-ink-muted); }
.page-contact-band.compact { padding-top: 0; }

.ab-name {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1; white-space: nowrap;
  font-size: min(calc((100vw - 2 * var(--gutter)) / 15.8), 96px);
  letter-spacing: var(--track); margin-right: calc(-1 * var(--track));
}
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.story-frame { grid-column: 1 / 7; position: sticky; top: 12vh; height: 76vh; align-self: start; overflow: hidden; background: #fff; }
.story-frame figure { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease); }
.story-frame figure.on { clip-path: inset(0 0 0 0); }
.story-frame img { width: 100%; height: 100%; object-fit: cover; }
.story-frame figure.drawing img { object-fit: contain; padding: 6%; background: #fff; }
.story-frame figcaption { position: absolute; left: 16px; bottom: 14px; font-size: 0.8125rem; padding: 6px 10px; background: rgba(5,4,9,0.72); color: #fff; }
.story-steps { grid-column: 8 / 13; }
.st { min-height: 78vh; display: grid; align-content: center; gap: 14px; opacity: 0.28; transition: opacity 0.8s var(--ease); }
.st.on { opacity: 1; }
.st-n { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 2.125rem + 3.4vw, 5.5rem); line-height: 0.9; color: var(--olive); letter-spacing: 0.02em; }
.st h3 { font-size: clamp(1.25rem, 0.935rem + 1.19vw, 2rem); }

.section-head h2.sentence { text-transform: none; letter-spacing: -0.01em; margin-right: 0; font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.15; max-width: 22ch; }
.st p { color: #3a3840; max-width: 42ch; }
.st-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.st-tags span { font-size: 0.75rem; font-weight: 500; padding: 5px 9px; border: 1px solid #A9A49A; color: var(--muted); }
.st-img { display: none; }
@media (max-width: 899px) {
  .story-frame { display: none; }
  .story-steps { grid-column: 1 / -1; }
  .st { min-height: 0; opacity: 1; padding-block: 36px; border-top: 1px solid var(--rule); }
  .st-img { display: block; margin: 8px 0 0; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
  .st-img img { width: 100%; height: 100%; object-fit: cover; }
  .st-img.drawing img { object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) { .story-frame figure, .st { transition: none; } }

.band-dark .st p { color: rgba(239,237,232,0.78); }
.band-dark .st-n { color: #A9AE95; }
.band-dark .st-tags span { border-color: rgba(239,237,232,0.3); color: var(--on-ink-muted); }
.band-dark .story-count { background: var(--ink); color: var(--on-ink); }
@media (max-width: 899px) { .band-dark .st { border-top-color: rgba(239,237,232,0.16); } }

.pj-head { padding-bottom: clamp(5rem, 6.25vw, 5.5rem); background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax -1px); }
.pj-head .section-head .over { color: var(--on-ink-muted); }
.pj-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.pj-filters button {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.9375rem; color: var(--on-ink);
  background: transparent; border: 1px solid var(--field-line-on-ink); padding: 10px 18px; border-radius: 0;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.pj-filters button:hover { border-color: var(--on-ink); }
.pj-filters button[aria-pressed="true"] { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.pj-filters button:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 3px; }
.pj-count { text-align: center; color: var(--on-ink-muted); font-size: 0.875rem; margin-top: 14px; }
.pj-band { background: var(--ink); color: var(--on-ink); padding-block: 4px; }
.pj-cta .label { color: var(--muted); }
.pj-cta strong { font-family: var(--display); font-weight: 500; font-size: clamp(1.125rem, 0.85rem + 0.85vw, 1.75rem); line-height: 1.15; max-width: 16ch; }
.pj-cta .go { font-family: var(--display); font-weight: 500; }
.band-dark > .ct-next { padding-top: 0; }
.pj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pj-card { position: relative; color: #fff; transition: opacity 0.6s var(--ease); }
.pj-card[hidden] { display: none; }
.pj-card > a, .pj-card > div { display: block; position: relative; }
.pj-card .media { --ratio: 4 / 3; }
.pj-card .media img { transition: transform 1.4s var(--ease); }
.pj-card a:hover .media img, .pj-card a:focus-visible .media img { transform: scale(1.04); }
.pj-card .project-caption h3 { font-size: clamp(1rem, 0.855rem + 0.54vw, 1.25rem); }
.pj-soon { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 0.75rem; padding: 5px 9px; background: var(--paper); color: var(--ink); }
@media (max-width: 1000px) { .pj-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pj-grid { grid-template-columns: 1fr; } }

.ct-split { display: grid; grid-template-columns: 5fr 7fr; }
.ct-photo { position: sticky; top: 0; height: 100vh; height: 100svh; margin: 0; overflow: hidden; align-self: start; }
.ct-photo img { width: 100%; height: 100%; object-fit: cover; }
.ct-main > .over { display: block; color: var(--muted); margin-bottom: 14px; }
.ct-main h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 1.19rem + 3.06vw, 4rem); line-height: 1; letter-spacing: var(--track); }
.ct-main .lead { margin-top: clamp(20px, 2.5vw, 32px); font-family: var(--display); font-weight: 500; font-size: clamp(1.125rem, 0.85rem + 0.935vw, 1.5rem); line-height: 1.22; max-width: 26ch; }
.ct-quick { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--ink); }
.ct-quick a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); transition: padding-left 0.6s var(--ease); }
.ct-quick a:hover, .ct-quick a:focus-visible { padding-left: 10px; }
.ct-quick small { font-size: 0.8125rem; color: var(--muted); min-width: 6rem; }
.ct-quick strong { font-family: var(--display); font-weight: 500; font-size: clamp(1.0625rem, 0.81rem + 0.9vw, 1.5rem); flex: 1; overflow-wrap: anywhere; }
.ct-quick .arrow { font-family: var(--display); font-size: 1.25rem; }
.ct-where { margin-top: 18px; color: var(--muted); font-size: 0.9375rem; }
.ct-form-wrap { margin-top: clamp(56px, 7vw, 96px); }
.ct-form-wrap h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.125rem, 0.85rem + 0.765vw, 1.5rem); margin-bottom: 28px; }
@media (max-width: 899px) {
  .ct-split { grid-template-columns: 1fr; }
  .ct-photo { position: relative; height: auto; aspect-ratio: 4 / 3; order: 2; }
  .ct-main { padding-bottom: 5rem; }
}
.ct-next { padding-block: var(--section); }
.ct-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); counter-reset: n; }
.ct-steps li { padding-top: 24px; border-top: 1px solid rgba(239,237,232,0.3); display: grid; gap: 10px; align-content: start; }
.ct-steps .n { font-family: var(--display); font-size: clamp(2.25rem, 1.7rem + 1.7vw, 3.5rem); line-height: 1; color: #A9AE95; }
.ct-steps h3 { font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.25rem); }
.ct-steps p { color: rgba(239,237,232,0.78); max-width: 34ch; }
@media (max-width: 760px) { .ct-steps { grid-template-columns: 1fr; gap: 36px; } }