:root {
  --paper: #f1f3f0;
  --paper-bright: #fafbf8;
  --mist: #dce5e1;
  --ink: #11181f;
  --ink-soft: #26323a;
  --muted: #66716f;
  --line: rgba(17, 24, 31, 0.18);
  --blue: #2453ff;
  --blue-deep: #1639c9;
  --white: #f8faf7;
  --radius: 0px;
  --gutter: clamp(1.25rem, 4.2vw, 5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: auto !important;
  overscroll-behavior: none;
  background: var(--ink);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 83, 255, 0.75) transparent;
}

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 300;
  padding: 0.8rem 1rem;
  background: var(--ink);
  color: var(--white) !important;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: '';
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(17, 24, 31, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 31, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

body > x-dc > div,
x-dc > div,
main > section:not([data-nav='dark']),
main > article {
  background-color: var(--paper) !important;
}

main,
footer,
[data-nav-bar],
[data-nav-overlay] {
  position: relative;
  z-index: 2;
}

::selection {
  background: var(--blue) !important;
  color: var(--white) !important;
}

:focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 3px !important;
}

:where(a, button, input, textarea, [role='button'], [role='slider']):focus-visible {
  box-shadow: 0 0 0 2px var(--paper-bright);
}

a {
  color: var(--blue) !important;
}

/* Keep the About-page commission CTA legible over its cobalt surface. */
#about-cta a {
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 0 !important;
  background: var(--blue) !important;
  color: var(--white) !important;
}

#about-cta a:hover,
#about-cta a:focus-visible {
  background: var(--blue-deep) !important;
  color: var(--white) !important;
}

h1,
h2,
h3,
legend {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.052em !important;
}

h1,
.page-intro-title {
  font-size: clamp(3.25rem, 8.4vw, 9.5rem) !important;
  line-height: 0.88 !important;
}

h2 {
  line-height: 0.95 !important;
}

p,
li,
input,
textarea,
button {
  letter-spacing: -0.012em;
}

[style*='color:#6F6455'] {
  color: var(--muted) !important;
}

[style*='background:#F6F2EA'] {
  background-color: var(--paper) !important;
}

[style*='background:#E3DACB'] {
  background-color: var(--mist) !important;
}

[style*='background:#1E1E1C'],
section[data-nav='dark'],
footer[data-nav='dark'] {
  background-color: var(--ink) !important;
}

section[data-nav='dark'],
section[data-nav='dark'] h1,
section[data-nav='dark'] h2,
section[data-nav='dark'] h3,
section[data-nav='dark'] p,
section[data-nav='dark'] a,
footer,
footer h2,
footer p,
footer li,
footer a {
  color: var(--white) !important;
}

/* The navigation becomes a precise floating datum rather than a soft pill. */
[data-nav-bar] {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  left: 1rem !important;
  width: auto !important;
  max-width: none !important;
  height: 62px !important;
  padding: 0.45rem 0.45rem 0.45rem 1.25rem !important;
  transform: none !important;
  gap: clamp(1.2rem, 3vw, 3.5rem) !important;
  border: 1px solid rgba(17, 24, 31, 0.2) !important;
  border-radius: var(--radius) !important;
  background: rgba(241, 243, 240, 0.83) !important;
  box-shadow: 0 14px 50px rgba(17, 24, 31, 0.08) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

[data-nav-bar]::before {
  width: 8px;
  align-self: stretch;
  margin: -0.45rem 0 -0.45rem -1.25rem;
  background: var(--blue);
  content: '';
}

[data-nav-bar] > a:first-of-type {
  display: flex;
  min-height: 44px;
  align-items: center;
  margin-right: auto;
  color: var(--ink) !important;
  font-size: 0.72rem !important;
  font-weight: 500;
}

[data-nav-bar] > a:first-of-type img {
  width: 24px !important;
  filter: grayscale(1) contrast(1.5);
}

[data-nav-links] a {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink) !important;
  border-color: transparent !important;
  font-size: 0.78rem !important;
  transition: color 240ms ease, transform 240ms var(--ease-out);
}

[data-nav-links] a:hover,
[data-nav-links] a[aria-current='page'] {
  color: var(--blue) !important;
  transform: translateY(-1px);
}

[data-nav-cta],
[data-nav-bar] > a:last-of-type {
  min-width: 118px;
  height: 46px !important;
  justify-content: center;
  border-radius: var(--radius) !important;
  background: var(--blue) !important;
  color: var(--white) !important;
  transition: background 240ms ease, transform 400ms var(--ease-out) !important;
}

[data-nav-cta]::after,
[data-nav-bar] > a:last-of-type::after {
  margin-left: 0.7rem;
  content: '↗';
  font-size: 1rem;
}

[data-nav-cta]:hover,
[data-nav-bar] > a:last-of-type:hover {
  background: var(--blue-deep) !important;
}

[data-nav-overlay] {
  z-index: 180 !important;
  background: var(--ink) !important;
}

[data-nav-overlay] > a:not(:last-child) {
  display: flex;
  min-height: 58px;
  align-items: center;
  color: var(--white) !important;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: clamp(3rem, 11vw, 6rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.06em !important;
  line-height: 0.86;
}

[data-nav-overlay] > a:not(:last-child):hover {
  color: var(--blue) !important;
}

[data-nav-overlay] > a:last-of-type {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding-inline: 1.4rem !important;
  border-radius: 0 !important;
  background: var(--blue) !important;
  color: var(--white) !important;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

[data-nav-overlay] [data-nav-close] {
  color: var(--white) !important;
}

[data-burger-lines] {
  border-color: var(--ink) !important;
}

/* Hero thesis: landscape photography held inside a rigorous blue datum. */
.page-home #hero {
  min-height: 680px !important;
  border: 12px solid var(--paper);
  background: var(--ink) !important;
}

.page-home #hero::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(248, 250, 247, 0.56);
  content: '';
}

.page-home #hero > div:nth-of-type(2) {
  z-index: 1;
  background: linear-gradient(90deg, rgba(7, 19, 31, 0.76) 0%, rgba(7, 19, 31, 0.36) 38%, transparent 68%), linear-gradient(0deg, rgba(7, 19, 31, 0.62), transparent 45%) !important;
}

.page-home #hero > div:nth-of-type(3) {
  z-index: 2;
  justify-content: flex-end !important;
  padding: 0 var(--gutter) clamp(5.5rem, 10vh, 8rem) !important;
}

.page-home #hero-copy {
  max-width: min(76rem, 78vw) !important;
}

.page-home #hero h1 {
  max-width: 9.6ch;
  color: var(--white) !important;
  font-size: clamp(4rem, 10vw, 11rem) !important;
  text-wrap: balance;
}

/* Core messaging must never depend on an observer firing at exactly the right frame. */
.page-home #hero [data-mask] {
  clip-path: none !important;
}

.page-home #hero [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

.page-home #hero p,
.page-home #hero > a {
  color: var(--white) !important;
}

.page-home #hero #hero-copy > p:first-child {
  display: inline-block;
  margin-bottom: 1.2rem !important;
  padding: 0.55rem 0.75rem;
  background: var(--blue);
  color: var(--white) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.68rem !important;
}

.page-home #hero #hero-copy > p:last-child {
  margin-top: 1.25rem !important;
  max-width: none !important;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem) !important;
  font-style: italic;
}

.page-home #hero > a {
  z-index: 4;
  left: auto !important;
  right: var(--gutter);
}

.page-home #hero > a span {
  background: var(--blue) !important;
}

/* Secondary page heroes use cropped photographic plates. */
body:not(.page-home) main > section:first-child {
  width: calc(100% - 24px);
  height: clamp(520px, 72vh, 820px) !important;
  margin: 12px;
  border: 1px solid rgba(17, 24, 31, 0.16);
}

body:not(.page-home) main > section:nth-child(2) {
  position: relative;
  padding-top: clamp(7rem, 15vh, 11rem) !important;
}

body:not(.page-home) main > section:nth-child(2)::before {
  display: block;
  width: 4.5rem;
  height: 0.55rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  background: var(--blue);
  content: '';
}

body:not(.page-home) main > section:nth-child(2) :is(h1, .page-intro-title) {
  max-width: 11ch !important;
}

/* Keep hero copy above the image and clear of the information plate. */
.secondary-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: '';
  background: linear-gradient(90deg, rgba(7, 19, 31, 0.72), rgba(7, 19, 31, 0.28) 60%, transparent),
    linear-gradient(0deg, rgba(7, 19, 31, 0.42), transparent 75%);
}

.secondary-hero__copy {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(7.5rem, 11vw, 9rem);
  left: var(--gutter);
  z-index: 2;
  animation: secondary-hero-enter 800ms var(--ease-out) both;
}

.secondary-hero__label {
  margin: 0 0 1rem;
  color: var(--white) !important;
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.secondary-hero h1 {
  margin: 0;
  max-width: 14ch;
  color: var(--white) !important;
  font-size: clamp(2.65rem, 5.8vw, 6.75rem) !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

@keyframes secondary-hero-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .secondary-hero__copy { animation: none; }
}

.portfolio-plate {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 5;
  display: grid;
  min-width: min(19rem, calc(100vw - 3rem));
  grid-template-columns: 1fr auto;
  gap: 1rem 2.25rem;
  padding: 1rem 1.15rem;
  border-left: 6px solid var(--blue);
  background: rgba(248, 250, 247, 0.88);
  color: var(--ink);
  box-shadow: 0 18px 60px rgba(17, 24, 31, 0.14);
  backdrop-filter: blur(14px);
}

.portfolio-plate span {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.portfolio-plate span:nth-child(even) {
  color: var(--blue);
  text-align: right;
}

/* Project imagery gets a measured, gallery-like rhythm. */
main img[data-fade] {
  filter: saturate(0.78) contrast(1.04);
  transition: opacity 1100ms var(--ease-out), transform 1400ms var(--ease-out), filter 700ms ease !important;
}

main [data-band]:hover img[data-fade],
main article > div:hover img[data-fade] {
  filter: saturate(1) contrast(1.02);
}

#work article {
  width: 88%;
  margin-bottom: clamp(6rem, 13vh, 11rem) !important;
}

/* Expand the invisible hit area of plan labels without moving their visual anchor. */
[data-label] {
  min-width: 44px;
  min-height: 44px;
  margin: -15px -8px !important;
  padding: 15px 8px !important;
}

a[data-reveal][style*='border-bottom'] {
  min-height: 44px;
  padding-top: 10px !important;
}

#work article:nth-of-type(even) {
  width: 76%;
  margin-left: auto;
}

#work article > div:last-child {
  padding-right: 0 !important;
  padding-left: var(--gutter) !important;
}

#work article:nth-of-type(even) > div:last-child {
  padding-left: 0 !important;
  padding-right: var(--gutter) !important;
}

#work h3 {
  font-size: clamp(1.6rem, 3vw, 3.2rem) !important;
}

.page-projects main > article {
  border-top: 1px solid var(--line);
}

.page-projects main > article > div:first-child {
  width: calc(100% - (var(--gutter) * 2));
  margin-right: var(--gutter);
  margin-left: var(--gutter);
}

.page-projects main > article h2 {
  font-size: clamp(2.6rem, 5.4vw, 6.5rem) !important;
}

.page-projects main > article [style*='text-transform:uppercase'] {
  color: var(--blue) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* The studio process is treated as a sequence of working drawings. */
.page-about [data-phase] {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.page-about [data-phase]::before {
  position: absolute;
  top: 0.75rem;
  left: 0;
  color: var(--blue);
  content: 'PHASE ' attr(data-phase) ' / 04';
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

.page-about [data-phase] h3 {
  font-size: clamp(2rem, 4vw, 4.5rem) !important;
}

/* Consultation form: deep blueprint field with crisp, tactile controls. */
#consult-card {
  border: 1px solid rgba(248, 250, 247, 0.22);
  border-radius: var(--radius) !important;
  background-color: var(--ink) !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  color: var(--white) !important;
  box-shadow: 0 30px 90px rgba(17, 24, 31, 0.2);
}

#consult-card > div[style*='position:absolute'] {
  opacity: 0.04 !important;
}

#consult-card legend,
#consult-card p,
#consult-card input,
#consult-card textarea,
#consult-card button {
  color: var(--white) !important;
}

#consult-card [data-tile] {
  border: 1px solid rgba(248, 250, 247, 0.22) !important;
  background: rgba(248, 250, 247, 0.06) !important;
}

#consult-card [data-tile]:hover,
#consult-card [data-tile][aria-pressed='true'] {
  border-color: var(--blue) !important;
  background: var(--blue) !important;
}

#consult-card [data-pill] {
  border-color: rgba(248, 250, 247, 0.34) !important;
  border-radius: 0 !important;
}

#consult-card [data-pill]:hover,
#consult-card [data-pill][aria-pressed='true'] {
  border-color: var(--blue) !important;
  color: #9eb3ff !important;
}

#consult-card [data-submit],
#consult-card [data-next] {
  border-color: var(--blue) !important;
  border-radius: 0 !important;
  background: var(--blue) !important;
  color: var(--white) !important;
  padding-inline: 1.25rem !important;
}

#consult-card [data-progress] > span,
#consult-card [data-underline] {
  background: var(--blue) !important;
}

footer {
  position: relative;
  overflow: hidden;
  border-top: 8px solid var(--blue);
}

footer::before {
  position: absolute;
  right: -0.08em;
  bottom: -0.24em;
  color: rgba(248, 250, 247, 0.035);
  content: 'A/S';
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: min(42vw, 34rem);
  font-weight: 500;
  letter-spacing: -0.09em;
  line-height: 1;
  pointer-events: none;
}

footer form {
  border-color: rgba(248, 250, 247, 0.28) !important;
}

.demo-disclosure {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(248, 250, 247, 0.28);
  background: rgba(17, 24, 31, 0.9);
  color: var(--white);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.demo-disclosure span {
  opacity: 0.66;
}

.demo-disclosure a {
  min-height: 24px;
  color: #9eb3ff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.demo-disclosure a:hover {
  color: var(--white);
}

.footer-legal {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246,242,234,0.16);
  text-align: center;
}

.footer-legal p {
  margin: 0;
  color: #F6F2EA;
  font-size: 0.75rem;
  line-height: 1.7;
  opacity: 0.55;
}

.footer-legal nav {
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
  gap: 1rem;
}

.footer-legal a {
  color: #F6F2EA;
  font-size: 0.75rem;
  opacity: 0.72;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Signature: a live survey rail, showing position and current story. */
.survey-rail {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 60;
  display: grid;
  width: 42px;
  height: min(54vh, 520px);
  transform: translateY(-50%);
  grid-template-rows: 1fr auto;
  border: 1px solid rgba(17, 24, 31, 0.2);
  border-right: 0;
  background: rgba(241, 243, 240, 0.82);
  backdrop-filter: blur(12px);
}

.survey-rail__track {
  position: relative;
  width: 1px;
  height: calc(100% - 2rem);
  margin: 1rem auto;
  background: rgba(17, 24, 31, 0.18);
}

.survey-rail__fill {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: top;
}

.survey-rail__meta {
  display: flex;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(17, 24, 31, 0.18);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  gap: 0.7rem;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.survey-rail__count {
  color: var(--blue);
}

.portfolio-gate,
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: var(--white);
  pointer-events: none;
}

.portfolio-gate {
  transition: clip-path 850ms var(--ease-out);
  clip-path: inset(0 0 0 0);
}

.portfolio-gate.is-done {
  clip-path: inset(0 0 100% 0);
}

.portfolio-gate__mark {
  display: grid;
  gap: 0.8rem;
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.portfolio-gate__mark::after {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.72);
  content: '';
  animation: gate-line 900ms var(--ease-out) both;
  transform-origin: left;
}

.page-wipe {
  transform: translateY(100%);
  transition: transform 500ms var(--ease-out);
}

.page-wipe.is-leaving {
  transform: translateY(0);
}

@keyframes gate-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 900px) {
  :root {
    --section-y-responsive: clamp(4.5rem, 9vh, 6rem);
    --section-y-compact: clamp(3.5rem, 7vh, 4.75rem);
  }

  /* Touch layouts should never reserve space for copy that is waiting on an
     observer threshold. Motion remains on desktop, while smaller screens get
     an immediate, stable reading flow. */
  [data-mask] {
    clip-path: none !important;
    opacity: 1 !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-nav-bar] {
    right: 0.75rem !important;
    left: 0.75rem !important;
    padding-right: 0.35rem !important;
    padding-left: 1rem !important;
  }

  [data-nav-bar]::before {
    margin-left: -1rem;
  }

  [data-nav-bar] > a:first-of-type {
    letter-spacing: 0.12em !important;
  }

  [data-nav-cta] {
    min-width: 96px;
    padding-inline: 0.8rem !important;
  }

  .survey-rail {
    display: none;
  }

  .page-home #hero {
    height: 100svh !important;
    min-height: 700px !important;
    max-height: 980px;
    border-width: 8px;
  }

  .page-home #hero-copy {
    max-width: 92vw !important;
  }

  .page-home #hero h1 {
    font-size: clamp(3.5rem, 16vw, 7rem) !important;
  }

  .page-home #hero > a {
    display: none !important;
  }

  .page-home .portfolio-plate {
    display: none;
  }

  /* Keep the editorial rhythm, but stop desktop viewport spacing leaking onto
     touch layouts where stacked content already creates plenty of breathing room. */
  .page-home main > section:nth-child(2),
  .page-home main > section:nth-child(5),
  .page-home main > section:nth-child(6) {
    padding-top: var(--section-y-responsive) !important;
    padding-bottom: var(--section-y-responsive) !important;
  }

  .page-home #work {
    padding-bottom: var(--section-y-responsive) !important;
  }

  .page-home #pullquote {
    height: clamp(460px, 58svh, 600px) !important;
  }

  .page-home #siting-frame {
    min-height: clamp(500px, 62svh, 640px) !important;
  }

  .page-home #siting-copy {
    padding-top: var(--section-y-responsive) !important;
    padding-bottom: var(--section-y-responsive) !important;
  }

  .page-home #begin {
    height: clamp(560px, 70svh, 700px) !important;
    min-height: 560px !important;
  }

  .page-home #begin > div:last-child {
    padding-top: var(--section-y-responsive) !important;
  }

  .page-projects main > article {
    padding-bottom: var(--section-y-compact) !important;
  }

  .page-projects main > article > figure {
    padding-top: var(--section-y-responsive) !important;
  }

  .page-projects #commissions {
    padding-top: var(--section-y-responsive) !important;
    padding-bottom: var(--section-y-responsive) !important;
  }

  .page-about [data-process-grid] > div:last-child {
    gap: var(--section-y-responsive) !important;
  }

  .page-about main > section:nth-child(3) {
    padding-bottom: var(--section-y-responsive) !important;
  }

  .page-about main > section:nth-child(4),
  .page-about #about-cta {
    padding-top: var(--section-y-responsive) !important;
    padding-bottom: var(--section-y-responsive) !important;
  }

  .page-contact #consultation,
  .page-contact main > section[data-screen-label='Map'] {
    padding-bottom: var(--section-y-responsive) !important;
  }

  body:not(.page-home) main > section:first-child {
    height: clamp(430px, 62svh, 650px) !important;
  }

  #work article,
  #work article:nth-of-type(even) {
    width: 100%;
  }

  #work article > div:last-child,
  #work article:nth-of-type(even) > div:last-child {
    padding-right: var(--gutter) !important;
    padding-left: var(--gutter) !important;
  }

  .page-projects main > article > div:first-child {
    width: calc(100% - 1.5rem);
    margin-right: 0.75rem;
    margin-left: 0.75rem;
  }

  a[href^='mailto:'],
  a[href^='tel:'] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  .page-contact main a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 840px) {
  [data-nav-bar] {
    height: 58px !important;
  }

  [data-nav-links],
  [data-nav-bar] > a:last-of-type {
    display: none !important;
  }

  [data-nav-burger] {
    display: flex !important;
  }

  [data-nav-overlay] {
    padding: max(5.5rem, env(safe-area-inset-top)) clamp(1.5rem, 7vw, 4rem)
      max(2rem, env(safe-area-inset-bottom)) !important;
    gap: clamp(0.6rem, 2vh, 1.25rem) !important;
  }

  [data-nav-overlay] [data-nav-close] {
    top: max(1rem, env(safe-area-inset-top)) !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
  }

  body:not(.page-home) main > section:first-child {
    height: clamp(430px, 56svh, 520px) !important;
  }

  body:not(.page-home) main > section:nth-child(2) {
    padding-top: clamp(4.5rem, 10vw, 6rem) !important;
  }

  body:not(.page-home) main > section:nth-child(2)::before {
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  }

  #work article,
  #work article:nth-of-type(even) {
    margin-bottom: var(--section-y-compact) !important;
  }
}

@media (max-width: 520px) {
  :root {
    --section-y-responsive: clamp(4rem, 8vh, 5rem);
    --section-y-compact: clamp(3rem, 6vh, 4rem);
  }

  [data-nav-bar] {
    top: 0.5rem !important;
    right: 0.5rem !important;
    left: 0.5rem !important;
  }

  [data-nav-bar] > a:last-of-type {
    display: none !important;
  }

  [data-nav-bar] > a:first-of-type {
    font-size: 0.67rem !important;
  }

  .portfolio-plate {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    min-width: 0;
    gap: 0.7rem 1rem;
    padding: 0.85rem 0.9rem;
  }

  body:not(.page-home) main > section:nth-child(2) {
    padding-top: 4.25rem !important;
  }

  body:not(.page-home) main > section:nth-child(2) :is(h1, .page-intro-title) {
    font-size: clamp(2.7rem, 13vw, 3.35rem) !important;
    line-height: 0.92 !important;
  }

  #consult-card {
    padding: clamp(1.25rem, 5vw, 1.75rem) !important;
  }

  .page-home #pullquote {
    height: clamp(430px, 54svh, 500px) !important;
  }

  .page-home #siting-frame {
    min-height: clamp(480px, 60svh, 540px) !important;
  }

  .page-home #begin {
    height: clamp(540px, 68svh, 620px) !important;
    min-height: 540px !important;
  }

  /* Mobile footer: turn the wide editorial layout into one centred composition. */
  footer {
    padding: 3.5rem 1.25rem 1.75rem !important;
    text-align: center;
  }

  footer > div > div:first-child {
    flex-direction: column;
    align-items: center !important;
    gap: 2rem !important;
  }

  footer > div > div:first-child > img {
    width: 168px !important;
    margin-inline: auto;
  }

  footer > div > div:first-child > div {
    width: min(100%, 360px);
    flex: none !important;
  }

  footer > div > div:first-child form {
    width: 100%;
  }

  footer > div > div:first-child + [role='separator'] {
    margin: 2.5rem 0 2.25rem !important;
  }

  footer > div > [role='separator'] + div {
    flex-direction: column;
    align-items: center !important;
    gap: 2.25rem !important;
  }

  footer nav[aria-label='Footer'] {
    width: 100%;
    flex: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2.25rem 1.25rem !important;
    text-align: center;
  }

  footer nav[aria-label='Footer'] > div:last-child {
    grid-column: 1 / -1;
  }

  footer nav[aria-label='Footer'] h2 {
    margin-bottom: 1rem !important;
  }

  footer nav[aria-label='Footer'] ul {
    justify-items: center;
    gap: 0.6rem !important;
  }

  footer nav[aria-label='Footer'] li,
  footer nav[aria-label='Footer'] a {
    justify-content: center;
    text-align: center;
  }

  footer ul[aria-label*='social media'] {
    width: 100%;
    justify-content: center;
  }

  .footer-legal {
    margin-top: 2.5rem !important;
    padding-top: 1.25rem !important;
  }

  .demo-disclosure {
    right: 0.75rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: 0.75rem;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .portfolio-gate {
    display: none;
  }
}