@font-face {
  font-family: Geist;
  src: url('/assets/geist-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --canvas: #050505;
  --surface: #101010;
  --raised: #171717;
  --ink: #f5f3f0;
  --muted: #a1a1a1;
  --accent: #e86a24;
  --accent-depth: #a94b1c;
  --edge: #292929;
  --ease: cubic-bezier(.22, .68, 0, 1);
  --space-section: clamp(80px, 9vw, 136px);
  font-family: Geist, Arial, sans-serif;
  font-synthesis: none;
  background: var(--canvas);
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}
* {box-sizing: border-box}
body {margin: 0; min-height: 100svh; background: var(--canvas)}
#glow-cursor-layer {position: fixed; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; contain: strict}
#glow-cursor-layer .glow-cursor {pointer-events: none}
.hero-copy, .hero-art, .chapter > .container, .site-footer > .container, .closing {position: relative; z-index: 1}
@media (prefers-reduced-motion: reduce) {
  #glow-cursor-layer {display: none}
}
a {color: inherit; text-decoration: none}
button, input, textarea, select {font: inherit}
button, a {-webkit-tap-highlight-color: transparent}
a, button {transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 300ms var(--ease)}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {outline: 2px solid var(--accent); outline-offset: 5px}
::selection {background: var(--accent); color: var(--canvas)}
h1, h2, h3, p {margin: 0}
h1, h2, h3 {text-wrap: balance}
h1, h2 {font-weight: 600; letter-spacing: -.055em; line-height: 1.04}
h1 {font-size: clamp(44px, 5.2vw, 76px)}
h2 {font-size: clamp(36px, 3.8vw, 56px)}
h3 {font-size: 24px; line-height: 1.2; font-weight: 550; letter-spacing: -.035em}
.container {width: min(1280px, 88%); margin-inline: auto}
.skip {position: absolute; left: 20px; top: 12px; clip-path: inset(50%); z-index: 100; padding: 14px 20px; background: var(--ink); color: var(--canvas)}
.skip:focus {clip-path: none}
.header-sentinel {height: 1px; margin-bottom: -1px; pointer-events: none} /* taste-skill-ignore: invisible functional scroll sentinel */
.header-shell {position: sticky; top: 0; z-index: 30; background: transparent; transition: background-color 300ms ease}
.header-shell.is-scrolled {background: var(--canvas)}
.site-header {display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 24px}
.brand {display: inline-flex; min-height: 44px; align-items: center}
.brand img {display: block; width: 144px; height: auto; filter: grayscale(1) brightness(1.2)}
nav {display: flex; gap: 32px}
nav a {display: inline-flex; align-items: center; position: relative; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--muted)}
.site-header nav a::after {content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; bottom: 1px; left: calc(50% - 2px); background: var(--accent); opacity: 0; transform: translateY(3px); transition: opacity 220ms ease, transform 220ms var(--ease)}
.site-header nav a[aria-current], nav a:hover {color: var(--ink)}
.site-header nav a[aria-current]::after, .site-header nav a:hover::after {opacity: 1; transform: translateY(0)}
.button {display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 52px; border: 0; padding: 15px 24px; border-radius: 100px; background: var(--ink); color: var(--canvas); font-size: 14px; font-weight: 600; cursor: pointer}
.button::after {content: '\2197'; font-size: 18px; line-height: 1; transition: transform 300ms var(--ease)}
.button:not(.glass-button):hover {background: var(--accent); color: var(--canvas); transform: translateY(-2px)}
.button:hover::after {transform: translate(2px, -2px)}
.button:active {transform: translateY(0)}
.quiet-link, .back-link {display: inline-flex; align-items: center; position: relative; min-height: 44px; font-size: 14px; font-weight: 500; gap: 16px}
.quiet-link::after, .back-link::after {content: '\2197'; color: var(--accent); transition: transform 300ms var(--ease)}
.back-link::after {content: '\2190'}
.quiet-link:hover::after {transform: translate(2px, -2px)}
.back-link:hover::after {transform: translateX(-3px)}
.quiet-link:not(.glass-button)::before {content: ''; position: absolute; height: 1px; bottom: 7px; left: 0; right: 26px; background: var(--accent-depth); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease)} /* taste-skill-ignore: brief requests a fine orange link interaction */
.quiet-link:not(.glass-button):hover::before {transform: scaleX(1)}
.hero {display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: center; gap: 32px; padding-block: 22px 72px}
.hero-copy {padding-bottom: 12px; min-width: 0}
.hero h1 {font-size: clamp(46px, 5.3vw, 78px); line-height: 1.04; letter-spacing: -.06em; font-weight: 600}
.hero-punctuation {color: var(--accent)}
.intro {max-width: 43ch; margin-top: 32px; font-size: 18px; line-height: 1.65; color: var(--muted)}
.actions {display: flex; align-items: center; flex-wrap: wrap; gap: 30px; margin-top: 36px}
.hero-location {display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-top: 64px}
.hero-location::before {content: ''; width: 5px; height: 5px; background: var(--muted); border-radius: 50%}
.hero-art {position: relative; min-width: 0}
#dither-hero {position: relative; width: 100%; height: 650px; overflow: hidden; filter: grayscale(1)}
.veil-fallback {width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: screen}
.motion-toggle {display: flex; align-items: center; gap: 8px; margin: -12px auto 0; position: relative; border: 0; background: transparent; color: var(--muted); padding: 10px 14px; min-height: 44px; border-radius: 22px; font-size: 13px; cursor: pointer}
.motion-toggle::after {content: '\2016'; font-size: 12px; color: var(--accent); order: -1}
.motion-toggle[aria-pressed='true']::after {content: '\25B7'}
.motion-toggle:hover {color: var(--ink); background: var(--surface)}
/* The brief requests optical glass on selected actions only. No animated blur or continuous shine. */
.glass-button {
  --glass-base: rgba(255, 255, 255, .055);
  --glass-hover: rgba(30, 30, 30, .96);
  --glass-border: rgba(255, 255, 255, .18);
  --glass-reflection: rgba(255, 255, 255, .14);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--glass-border); /* taste-skill-ignore: requested fine silver glass edge */
  background: rgba(23, 23, 23, .96); color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); /* taste-skill-ignore: user explicitly requests compact glass controls */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.24); /* taste-skill-ignore: restrained material depth explicitly requested */
  font-size: 13px; font-weight: 550; line-height: 1.2; text-decoration: none;
  cursor: pointer; transform: translateY(0) scale(1);
  transition: transform 450ms cubic-bezier(.22,1,.36,1), background-color 400ms ease, border-color 400ms ease, box-shadow 450ms ease, color 250ms ease;
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) { /* taste-skill-ignore: requested glass support with opaque fallback */
  .glass-button {background: var(--glass-base); --glass-hover: rgba(255,255,255,.09)}
}
.glass-button::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -60%; bottom: -60%; left: 0; width: 44%; border-radius: 50%;
  background: linear-gradient(100deg, transparent 8%, var(--glass-reflection) 50%, transparent 92%); /* taste-skill-ignore: requested moving glass reflection, not page decoration */
  transform: translateX(-165%) skewX(-18deg); opacity: 0;
}
.glass-button::after {flex-shrink: 0}
.glass-button:focus-visible {outline: 2px solid var(--accent); outline-offset: 4px; border-color: rgba(255,255,255,.4)}
.glass-button--primary {
  --glass-base: rgba(245, 243, 240, .94);
  --glass-hover: rgba(255, 255, 255, .98);
  --glass-reflection: rgba(255, 255, 255, .58);
  --glass-border: rgba(255, 255, 255, .72);
  background: var(--glass-base); color: var(--canvas); font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(0,0,0,.1), 0 3px 12px rgba(0,0,0,.22); /* taste-skill-ignore: restrained primary glass depth requested */
}
.glass-button--primary::after {color: var(--canvas)}
.quiet-link.glass-button::after {font-size: 18px; color: var(--accent)}
.motion-toggle.glass-button {display: flex; width: max-content; margin-inline: auto; gap: 8px; padding-inline: 16px}
.motion-toggle.glass-button::after {font-size: 12px}
.project-arrow.glass-button {display: grid; padding: 0; width: 44px; height: 44px; font-size: 22px; color: var(--accent); --glass-base: rgba(14,14,14,.78); --glass-hover: rgba(30,30,30,.88)}
@media (hover: hover) {
  .glass-button:not(:disabled):not([aria-disabled='true']):hover {
    background: var(--glass-hover); color: var(--ink); border-color: rgba(255,255,255,.34);
    transform: translateY(-2px) scale(1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset -1px 0 0 rgba(232,106,36,.2), inset 0 -1px 0 rgba(0,0,0,.3), 0 5px 14px rgba(0,0,0,.28); /* taste-skill-ignore: subtle glass edge lighting requested */
  }
  .glass-button--primary:not(:disabled):not([aria-disabled='true']):hover {color: var(--canvas); border-color: rgba(255,255,255,.85)}
  .glass-button:not(:disabled):not([aria-disabled='true']):hover::before {animation: glass-reflection 520ms cubic-bezier(.22,1,.36,1) both}
  .glass-button:not(:disabled):not([aria-disabled='true']):hover::after {transform: translate(2px,-1px)}
  .motion-toggle.glass-button:not(:disabled):not([aria-disabled='true']):hover::after {transform: none}
}
.glass-button:not(:disabled):not([aria-disabled='true']):active {transform: translateY(0) scale(.98); background: var(--glass-hover); box-shadow: inset 0 1px 3px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.15)} /* taste-skill-ignore: tactile pressed glass state */
.glass-button:not(:disabled):not([aria-disabled='true']):active::before {animation: none; opacity: .45; transform: translateX(65%) skewX(-18deg)}
.glass-button:is(:disabled,[aria-disabled='true']) {opacity: .45; cursor: not-allowed; transform: none; box-shadow: none} /* taste-skill-ignore: disable material depth with the control */
.glass-button:is(:disabled,[aria-disabled='true'])::before {animation: none; opacity: 0}
.glass-button:is(:disabled,[aria-disabled='true'])::after {transform: none}
@keyframes glass-reflection {
  0% {opacity: 0; transform: translateX(-165%) skewX(-18deg)}
  22% {opacity: .65}
  65% {opacity: .45}
  100% {opacity: 0; transform: translateX(360%) skewX(-18deg)}
}
.chapter {padding-block: var(--space-section); scroll-margin-top: 10px}
.about-chapter {background: var(--surface)}
.about-grid {display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10%}
.about-grid h1::before, .about-grid h2::before {content: ''; display: block; width: 28px; height: 2px; margin-bottom: 24px; background: var(--accent)}
.location {font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 28px}
.statement {font-size: clamp(22px, 2vw, 29px); font-weight: 400; line-height: 1.5; letter-spacing: -.035em}
.about-copy {padding-top: 26px}
.tagline {margin-top: 40px; font-size: 16px; line-height: 1.7; color: var(--muted)}
.section-intro {display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px}
.section-intro > p {font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 40ch}
.services-chapter {background: var(--canvas)}
.service-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px}
.service-card {position: relative; display: flex; flex-direction: column; min-height: 328px; padding: 36px; background: var(--raised); border: 1px solid #222; border-radius: 6px; transition: background-color 300ms ease, border-color 300ms ease, transform 350ms var(--ease)} /* taste-skill-ignore: brief preserves cards with subtle border contrast */
.service-card::after {content: ''; position: absolute; left: 36px; right: 36px; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease)}
.service-card > p {font-size: 16px; line-height: 1.6; margin-top: 20px; color: var(--muted); max-width: 32ch}
.service-bottom {margin-top: auto; padding-top: 38px}
.price {display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums}
.price > span:first-child {color: var(--muted); font-size: 13px}
.price strong {font-size: 36px; line-height: 1.2; letter-spacing: -.045em; font-weight: 500}
.price-period {font-size: 14px; color: var(--muted)}
.service-action {display: inline-flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; min-height: 44px; margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--muted)}
.service-action::after {content: '\2197'; color: var(--accent); font-size: 20px; transition: transform 300ms var(--ease)}
.service-card:focus-within {background: #1d1d1d; border-color: #393939}
.service-card:focus-within::after {transform: scaleX(1)}
.service-action:hover {color: var(--ink)}
.service-action:hover::after {transform: translate(2px, -2px)}
.pricing-note {font-size: 13px; line-height: 1.7; color: var(--muted); margin-top: 32px}
.pricing-note a {color: var(--ink); text-decoration: underline; text-decoration-color: #555; text-underline-offset: 5px}
.pricing-note a:hover {text-decoration-color: var(--accent)}
.portfolio-chapter {background: var(--surface)}
.project-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 28px}
.project-card {display: block; min-width: 0}
.project-card:first-child {grid-column: 1 / -1}
.project-image {position: relative; overflow: hidden; background: var(--canvas); aspect-ratio: 4 / 3; border-radius: 3px}
.project-card:first-child .project-image {aspect-ratio: 16 / 9}
.project-image img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease)}
.project-arrow {position: absolute; right: 24px; bottom: 24px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--accent); font-size: 24px; transition: color 250ms ease, background-color 400ms ease, border-color 400ms ease, box-shadow 450ms ease, transform 450ms cubic-bezier(.22,1,.36,1)}
.project-card:focus-visible img {transform: scale(1.025)}
.project-card:focus-visible .project-arrow {background: rgba(30,30,30,.88); color: var(--accent); border-color: rgba(255,255,255,.4)}
.project-card:focus-visible .project-arrow::before {animation: glass-reflection 520ms cubic-bezier(.22,1,.36,1) both}
.project-caption {display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 24px}
.project-caption h3 {font-size: 30px; font-weight: 500; letter-spacing: -.045em}
.project-caption p {font-size: 14px; color: var(--muted); line-height: 1.6; margin-top: 8px}
.concept-label {font-size: 13px; color: var(--muted); white-space: nowrap}
.project-detail {padding-top: 56px}
.project-detail .section-intro {margin-top: 44px}
.project-cover {width: 100%; height: auto; max-height: 800px; object-fit: contain; background: var(--canvas); display: block}
.project-story {display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10%; padding-block: 56px}
.project-story ul {padding-left: 20px; color: var(--muted); line-height: 2; font-size: 16px}
.project-story li::marker {color: var(--accent)}
.contact-chapter {background: var(--canvas)}
.contact-intro {display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 8%; align-items: end; margin-bottom: 72px}
.contact-intro h1, .contact-intro h2 {font-size: clamp(32px, 4vw, 58px); line-height: 1.1}
.contact-intro > p {font-size: 16px; line-height: 1.7; color: var(--muted)}
.contact-grid {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11%}
.contact-links {display: flex; flex-direction: column; align-items: flex-start; gap: 22px}
.contact-links a {display: flex; flex-direction: column; justify-content: center; min-height: 44px; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere}
.contact-links .contact-email {font-size: clamp(18px, 1.85vw, 26px); font-weight: 500; letter-spacing: -.045em; margin-bottom: 14px}
.contact-links span {font-size: 13px; color: var(--muted); margin-bottom: 4px}
.contact-links a:hover, .draft-link:hover {color: var(--accent)}
.contact-links a.contact-method {flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 14px}
.contact-method .contact-icon {flex: 0 0 20px; margin-top: 4px; color: var(--muted); transition: color 200ms ease}
.contact-method:hover .contact-icon, .contact-method:focus-visible .contact-icon {color: var(--accent)}
.contact-links .contact-detail {display: block; min-width: 0; font: inherit; color: inherit; margin: 0}
.contact-links .contact-detail > span {display: block}
.footer-grid a.contact-method {gap: 10px}
.footer-grid .contact-icon {width: 16px; height: 16px; flex-basis: 16px; margin-top: 0}
.contact-links > p {margin-top: 30px; color: var(--muted); font-size: 14px; line-height: 1.7}
.contact-form {display: flex; flex-direction: column; gap: 26px; min-width: 0}
.contact-form {scroll-margin-top: 24px}
.form-step {display: flex; flex-direction: column; align-items: stretch; gap: 26px}
.form-step h3 {max-width: 26ch}
.form-step h3:focus {outline: none}
.form-progress {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; color: var(--muted)}
.form-progress li {padding-bottom: 12px; border-bottom: 2px solid var(--edge)}
.form-progress li[aria-current] {color: var(--ink); border-color: var(--accent)}
.form-progress li.is-complete {border-color: #777}
.step-description {font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 38ch; margin-top: -12px}
.form-step-actions {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px}
.form-step-actions > :only-child {margin-left: auto}
.form-back {border: 0; background: transparent; color: var(--muted); padding: 0 8px 0 0; cursor: pointer}
.form-back::after {order: -1}
.form-back:hover {color: var(--ink)}
.form-note a {color: var(--ink); text-decoration: underline; text-underline-offset: 3px}
.direct-email {display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px}
.direct-email:hover {color: var(--ink)}
.form-row {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px}
.contact-form label {display: flex; flex-direction: column; gap: 11px; font-size: 14px; font-weight: 500; min-width: 0}
input, select, textarea {width: 100%; border: 1px solid #343434; border-radius: 3px; padding: 16px; background: var(--surface); color: var(--ink); font-size: 16px; min-height: 54px; transition: border-color 250ms ease, background-color 250ms ease}
input:hover, select:hover, textarea:hover {border-color: #555}
input:focus, select:focus, textarea:focus {border-color: var(--accent); background: var(--raised)}
input:focus-visible, select:focus-visible, textarea:focus-visible {outline-offset: 3px; outline-width: 1px}
textarea {resize: vertical; min-height: 152px}
::placeholder {color: var(--muted); opacity: 1}
.form-note, .form-status {font-size: 13px; color: var(--muted); line-height: 1.7}
.form-status {padding-left: 16px; border-left: 2px solid var(--accent)}
.form-status:empty {display: none}
.contact-form .button {align-self: flex-start}
.draft-link {display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 5px}
.closing {padding-block: 96px; display: flex; justify-content: space-between; align-items: center; gap: 24px}
.closing p {font-size: 30px; letter-spacing: -.04em; max-width: 26ch}
.site-footer {background: var(--surface); padding-block: 80px 32px}
.footer-top {display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 56px}
.footer-tagline {font-size: 24px; line-height: 1.4; letter-spacing: -.035em}
.footer-grid {display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 32px; padding-block: 28px; border-top: 1px solid var(--edge)} /* taste-skill-ignore: brief requests subtle footer separators */
.footer-grid nav {display: flex; flex-direction: column; gap: 0}
.footer-grid > div {display: flex; flex-direction: column; align-items: flex-start}
.footer-grid a {min-height: 44px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere}
.footer-grid > div a {display: inline-flex; align-items: center}
.footer-grid a:hover {color: var(--accent)}
.footer-wordmark {font-size: clamp(84px, 23vw, 334px); line-height: .8; letter-spacing: -.075em; font-weight: 650; color: #606060; margin-top: 64px; user-select: none}
.footer-location {display: flex; align-items: center; gap: 10px; margin-top: 48px; font-size: 13px; color: var(--muted)}
.footer-location::before {content: ''; width: 5px; height: 5px; background: var(--accent); border-radius: 50%}
@media (hover: hover) {
  .service-card:hover {background: #1d1d1d; border-color: #393939; transform: translateY(-3px)}
  .service-card:hover::after {transform: scaleX(1)}
  .service-card:hover .service-action {color: var(--ink)}
  .project-card:hover img {transform: scale(1.025)}
  .project-card:hover .project-arrow {background: rgba(30,30,30,.88); color: var(--accent); border-color: rgba(255,255,255,.34); transform: translateY(-2px)}
  .project-card:hover .project-arrow::before {animation: glass-reflection 520ms cubic-bezier(.22,1,.36,1) both}
}
.project-card:active .project-arrow.glass-button {transform: scale(.98)}
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-pending {opacity: 0; transform: translateY(12px)}
  .reveal {transition: opacity 450ms ease, transform 350ms var(--ease), background-color 300ms ease, border-color 300ms ease}
}
@media (max-width: 1100px) {
  .container {width: 90%}
  nav {gap: 24px}
  .hero h1 {font-size: clamp(42px, 5.2vw, 60px)}
  #dither-hero {height: 570px}
  .service-grid {grid-template-columns: repeat(3, minmax(0, 1fr))}
  .service-card {padding: 28px}
  .service-card::after {left: 28px; right: 28px}
  .contact-grid {gap: 7%}
  .footer-grid {grid-template-columns: .7fr 1fr 1fr; gap: 24px}
  .footer-grid a {font-size: 13px}
}
@media (max-width: 800px) {
  .header-shell {position: relative}
  .site-header {gap: 20px}
  .brand img {width: 122px}
  nav {gap: 15px}
  nav a {font-size: 13px}
  .hero {grid-template-columns: minmax(0, 1fr); padding-block: 48px 72px; gap: 24px}
  .hero-copy {max-width: 700px}
  .hero h1 {font-size: clamp(38px, 7.6vw, 62px)}
  .hero-location {margin-top: 32px}
  #dither-hero {height: 470px}
  .hero-art {width: min(460px, 100%); margin-inline: auto}
  .about-grid {grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 7%}
  .about-copy {padding-top: 26px}
  .statement {font-size: 23px}
  .location {margin-top: 20px}
  .section-intro {gap: 28px; margin-bottom: 40px}
  .service-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px}
  .project-grid {gap: 44px 20px}
  .project-caption {display: block}
  .concept-label {display: block; margin-top: 12px}
  .contact-intro {grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px}
  .contact-intro > p {max-width: 48ch}
  .contact-grid {grid-template-columns: 1fr; gap: 56px}
  .contact-links {gap: 18px}
  .contact-links > p {margin-top: 16px}
  .contact-links .contact-email {font-size: 24px}
  .footer-grid {grid-template-columns: 1fr 1fr}
  .footer-grid nav {grid-row: span 2}
  .footer-top {align-items: flex-start}
  .footer-tagline {font-size: 22px}
  .project-story {grid-template-columns: 1fr; gap: 16px}
}
@media (max-width: 580px) {
  :root {--space-section: 72px; scroll-padding-top: 24px}
  .container {width: calc(100% - 40px)}
  .site-header {flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 20px 0}
  .brand img {width: 121px}
  .site-header nav {width: 100%; gap: 2px 10px; justify-content: space-between; flex-wrap: wrap}
  .site-header nav a {font-size: 13px; min-height: 44px}
  .hero {padding-top: 40px; padding-bottom: 64px; gap: 24px}
  .hero h1 {font-size: clamp(30px, 8.4vw, 47px); letter-spacing: -.06em; line-height: 1.08}
  .intro {font-size: 16px; margin-top: 26px; max-width: 36ch}
  .actions {gap: 16px; margin-top: 28px}
  .button {gap: 20px; padding-inline: 20px}
  .actions .glass-button {gap: 12px; padding-inline: 16px}
  .hero-location {margin-top: 28px}
  .hero-art {margin-top: 0}
  #dither-hero {height: 430px}
  h1 {font-size: 42px}
  h2 {font-size: 36px}
  h3 {font-size: 24px}
  .about-grid {grid-template-columns: 1fr; gap: 32px}
  .about-copy {padding-top: 0}
  .about-grid h1::before, .about-grid h2::before {margin-bottom: 20px}
  .statement {font-size: 22px; line-height: 1.55}
  .tagline {margin-top: 28px}
  .section-intro {display: block; margin-bottom: 36px}
  .section-intro > p {margin-top: 24px}
  .service-grid {grid-template-columns: 1fr; gap: 16px}
  .service-card {padding: 28px; min-height: 296px}
  .service-bottom {padding-top: 32px}
  .service-card > p {max-width: none; margin-top: 18px}
  .project-grid {grid-template-columns: 1fr; gap: 40px}
  .project-card:first-child {grid-column: auto}
  .project-card:first-child .project-image {aspect-ratio: 4 / 3}
  .project-caption {display: flex; padding-top: 20px}
  .project-caption h3 {font-size: 28px}
  .project-caption p {font-size: 13px}
  .concept-label {margin-top: 0; font-size: 13px}
  .project-arrow {right: 16px; bottom: 16px}
  .contact-intro h1, .contact-intro h2 {font-size: clamp(26px, 7vw, 40px)}
  .form-row {grid-template-columns: 1fr; gap: 26px}
  .contact-links .contact-email {font-size: 20px}
  .footer-top {flex-direction: column; gap: 28px; margin-bottom: 32px}
  .footer-grid {grid-template-columns: 1fr; gap: 24px; padding-block: 24px}
  .footer-grid nav {grid-row: auto; flex-direction: row; flex-wrap: wrap; gap: 0 20px}
  .footer-grid a {font-size: 13px}
  .footer-wordmark {font-size: 22.5vw; margin-top: 40px}
  .footer-location {font-size: 13px; margin-top: 32px}
  .site-footer {padding-block: 56px 28px}
  .closing {flex-direction: column; align-items: flex-start; padding-block: 72px}
}
@media (max-width: 360px) {
  .container {width: calc(100% - 32px)}
  .site-header nav {column-gap: 8px; justify-content: flex-start}
  .hero h1 {font-size: 29px}
  .actions {gap: 16px}
  .button, .quiet-link {font-size: 13px}
  .project-caption {display: block}
  .concept-label {margin-top: 10px}
}
@media (prefers-reduced-motion: reduce) {
  :root {scroll-behavior: auto}
  *, *::before, *::after {animation: none !important; transition: none !important}
  .button:hover, .service-card:hover, .project-card:hover img, .project-card:hover .project-arrow,
  .glass-button:not(:disabled):not([aria-disabled='true']):hover,
  .glass-button:not(:disabled):not([aria-disabled='true']):active,
  .glass-button:not(:disabled):not([aria-disabled='true']):hover::after,
  .project-card:active .project-arrow.glass-button {transform: none}
  .glass-button::before {display: none}
}
[hidden] {display: none !important}
@media (max-width: 360px) {.contact-links .contact-email {font-size: 16px}}