.architectural-photo {
  --dusk-position: 54% 50%;
  --dusk-scale: scale(1.34);
  --dusk-origin: 46% 16%;
}
.architectural-photo > .hero-dusk-image {
  object-position: var(--dusk-position);
  filter: saturate(.89) brightness(.99);
  transform: var(--dusk-scale);
  transform-origin: var(--dusk-origin);
}
@media (prefers-reduced-motion: no-preference) {
  .architectural-photo.hero-light-ready { isolation: isolate; }
  .architectural-photo.hero-light-ready::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url("/assets/hero-window-shade.svg") var(--dusk-position) / cover no-repeat;
    transform: var(--dusk-scale);
    transform-origin: var(--dusk-origin);
    transition: opacity 2s cubic-bezier(.42, 0, .2, 1) .15s;
  }
  .architectural-photo.hero-light-ready.hero-light-on::before { opacity: 0; }
}

.hero-visual .control-detail { display: block; text-decoration: none; }
.hero-visual .control-detail .detail-caption {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.hero-visual .control-detail:hover .detail-caption,
.hero-visual .control-detail:focus-visible .detail-caption { color: var(--paper); }

.projects .projects-grid {
  --project-gap: clamp(16px, 2.3vw, 32px);
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--project-gap) * 2) / 2.25);
  gap: var(--project-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 12px;
}

.projects .project-card {
  display: flex;
  flex-direction: column;
  grid-row: auto;
  margin: 0;
  scroll-snap-align: start;
}

.projects .project-copy { display: flex; flex: 1; flex-direction: column; }
.projects .project-copy h3 { min-block-size: 2.4em; line-height: 1.2; }
.projects .project-open { margin-top: auto; }

.project-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.project-controls[hidden] { display: none; }
.project-controls button {
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  min-width: 44px;
  min-height: 44px;
  padding: 5px 12px;
  font: inherit;
}
.project-controls button:hover { border-color: var(--bronze); }
.project-controls :is([data-project-prev], [data-project-next]) { font-size: 23px; }

.process-photo { object-position: 50% 42%; }

.people-band {
  --people-muted: color-mix(in srgb, var(--ink) 72%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 20%, transparent);
  color: var(--ink);
  background: var(--paper);
}
.people-band .process-team { background: none; border: 0; margin: 0 auto; padding: clamp(36px, 6vw, 80px) 0; }
.people-band .process-team p:not(.eyebrow), .people-band .partner-invite p { color: var(--people-muted); }
.people-band .process-team .team-experience { color: var(--ink); font-size: clamp(20px, 2.4vw, 29px); margin: 0 0 10px; }
.people-band .eyebrow { color: var(--people-muted); }

.people-band .team-portraits figure {
  position: relative;
  display: block;
  grid-row: auto;
  padding: 0;
  border-radius: clamp(12px, 2.3vw, 29px);
  overflow: hidden;
  background: var(--ink);
}

.people-band .team-portraits img { aspect-ratio: 4 / 5.5; filter: grayscale(1); }
.people-band .team-portraits figure:hover img { filter: grayscale(1) brightness(1.12); }
.people-band .team-portraits figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-row: auto;
  padding: clamp(10px, 1.8vw, 22px);
  margin: 0;
  text-align: center;
  font-size: clamp(14px, 1.65vw, 22px);
  background: linear-gradient(180deg, #1c1b19df, transparent 29%, transparent 59%, #1c1b19ee);
}
.people-band .team-portraits figcaption > span:first-child { color: var(--paper); }
.people-band .team-role {
  color: var(--paper);
  font-size: clamp(11px, 1.05vw, 15px);
  min-block-size: 4lh;
}

@media (min-width: 371px) and (max-width: 700px) {
  .people-band .team-role { min-block-size: 3lh; }
}

@media (min-width: 1100px) {
  .people-band .team-role { min-block-size: 2lh; }
}
.people-band .partner-invite h2, .people-band .partner-invite-list a { color: var(--ink); }
.people-band .partner-link,
.people-band .partner-invite-list a:is(:hover, :focus-visible),
.people-band .partner-invite-number { color: color-mix(in srgb, var(--bronze) 80%, var(--ink)); }

@media (max-width: 760px) {
  .projects .projects-grid { grid-auto-columns: 85%; }
  .projects .project-copy h3 { min-block-size: 0; }
  .people-band .team-portraits { gap: 12px; }
  .people-band .team-portraits figure { padding: 0; }
}

@media (min-width: 761px) {
  @supports (grid-template-rows: subgrid) {
    .projects .projects-grid {
      grid-template-rows: repeat(5, auto);
      column-gap: var(--project-gap);
      row-gap: 0;
    }
    .projects .project-card {
      display: grid;
      grid-row: 1 / span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .projects .project-card .project-copy {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .projects .project-copy h3 { min-block-size: 0; }
    .projects .project-open { margin-top: 0; }
  }
}
.hero-visual .touch-photo > img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
html.scene-expanded, html.scene-expanded body { overflow: hidden; }
.experience-shell.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100dvh;
  margin: 0;
  background: var(--ink);
  grid-template-columns: minmax(0, 1fr) 388px;
}
.experience-shell.is-expanded .room-window { height: 100%; min-height: 0; }
.experience-shell.is-expanded .phone-dock { overflow: auto; }
.room-tools .tool-buttons button { touch-action: none; }
@media (max-width: 760px) {
  .experience-shell.is-expanded { display: flex; flex-direction: column; overflow: hidden; }
  .experience-shell.is-expanded .room-window { flex: 1; height: auto; min-height: 0; }
  .experience-shell.is-expanded .phone-dock { flex: none; overflow: visible; }
}

@media (max-width:760px) {
  .hero-visual figcaption span { display:block; white-space:nowrap; }
}

.project-controls [data-project-pause] { position:relative; width:44px; }
.project-controls [data-project-pause] > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.project-controls [data-project-pause]::before { content:''; display:block; margin:auto; width:12px; height:14px; background:linear-gradient(to right,currentColor 0 33%,transparent 33% 67%,currentColor 67%); }
.project-controls [data-project-pause][aria-pressed='true']::before { width:0; height:0; background:none; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid currentColor; }