[hidden] {
  display:none!important
}

@font-face {
  font-family:DM;
  src:url('assets/sans.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Cormorant;
  src:url('assets/serif.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

:root {
  --paper:#f3efe8;
  --wine:#501b2c;
  --copper:#935039;
  --muted:#6a5b5e;
  --line:#501b2c26;
  --sans:DM,Arial,sans-serif;
  --serif:Cormorant,Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(24px,5vw,88px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--wine);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer
}

img {
  display:block;
  width:100%;
  height:auto
}

h1,h2,p {
  margin:0
}

h1,h2 {
  font-weight:400
}

h1 {
  font-family:var(--serif);
  font-size:clamp(3.5rem,6vw,6.8rem);
  line-height:1.05;
  letter-spacing:-.035em
}

h2 {
  font-family:var(--serif)
}

em {
  font-weight:400
}

a,button {
  -webkit-tap-highlight-color:transparent
}

:focus-visible {
  outline:2px solid var(--copper);
  outline-offset:6px
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--paper);
  color:var(--wine);
  padding:12px 20px;
  z-index:100
}

.skip-link:focus {
  top:16px
}

.site-header {
  height:124px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px var(--gutter);
  position:relative;
  z-index:40
}

.brand {
  display:block;
  width:142px;
  flex-shrink:0
}

.brand img {
  width:100%
}

.desktop-nav {
  display:flex;
  gap:38px;
  align-items:center
}

.desktop-nav a {
  font-size:.875rem;
  position:relative;
  padding:8px 0
}

.desktop-nav a:after {
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease)
}

.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after {
  transform:scaleX(1)
}

.menu-toggle {
  display:none
}

.mobile-nav {
  display:none
}

.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:30px var(--gutter);
  color:var(--muted);
  font-size:.75rem;
  border-top:1px solid var(--line)
}

.site-footer>div {
  display:flex;
  gap:24px;
  align-items:center
}

.motion-pref {
  display:none;
  padding:0
}

.has-js .motion-pref {
  display:inline-block
}

.site-footer a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.home {
  background:#25231d;
  color:#fff
}

.home .site-header {
  position:absolute;
  inset:0 0 auto;
  color:#fff
}

.home .brand img {
  filter:brightness(0) invert(1)
}

.cinema {
  height:100svh;
  min-height:640px;
  position:relative;
  overflow:hidden;
  background:#343329
}

.cinema-media,.cinema-shade,.cinema-media img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.cinema-media img {
  object-fit:cover;
  object-position:center 44%
}

.cinema-shade {
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 35%,rgba(0,0,0,.13) 50%,rgba(0,0,0,.66));
  pointer-events:none
}

.cinema-copy {
  position:absolute;
  bottom:158px;
  left:var(--gutter);
  max-width:600px
}

.cinema-copy h1 {
  font-size:clamp(3.5rem,5vw,5.5rem);
  line-height:1.02;
  letter-spacing:-.025em;
  color:white;
  text-shadow:0 1px 18px #0002
}

.cinema-link {
  display:inline-block;
  font-size:.875rem;
  margin-top:30px;
  border-bottom:1px solid #fffa;
  padding-bottom:8px;
  transition:letter-spacing .4s var(--ease)
}

.cinema-link:hover {
  letter-spacing:.03em
}

.cinema-bottom {
  position:absolute;
  bottom:79px;
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:.75rem;
  align-items:center;
  color:#fff
}

.home-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  color:#fff;
  border-color:#ffffff30;
  padding-top:19px;
  padding-bottom:19px;
  font-size:.75rem
}

.home-footer>div {
  gap:22px
}

.eyebrow {
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.13em;
  color:var(--muted);
  display:block
}

.underlined-link {
  display:inline-block;
  border-bottom:1px solid currentColor;
  padding:4px 0;
  font-size:.875rem;
  line-height:1.5
}

.page-heading {
  padding:60px var(--gutter) 80px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px
}

.page-heading h1 {
  font-size:clamp(4rem,8vw,9rem)
}

.page-heading>span {
  font-size:.875rem;
  color:var(--muted);
  padding-bottom:15px
}

.portfolio {
  padding:0 var(--gutter) 120px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:100px 9vw;
  align-items:start
}

.portfolio-item {
  min-width:0
}

.portfolio-1 {
  grid-row:span 2
}

.portfolio-2 {
  padding-top:120px
}

.portfolio-3 {
  padding-top:20px
}

.portfolio-image {
  display:block;
  overflow:hidden;
  background:#e6e0d5
}

.portfolio-1 img {
  aspect-ratio:4/5;
  object-fit:cover
}

.portfolio .small-source {
  max-width:361px;
  margin-left:auto
}

.portfolio .small-source img {
  aspect-ratio:361/640
}

.portfolio-label {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  align-items:baseline
}

.portfolio-label h2 {
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.35
}

.portfolio-label>span {
  font-size:.75rem;
  color:var(--muted)
}

.portfolio-2 .portfolio-label,.portfolio-3 .portfolio-label {
  max-width:361px;
  margin-left:auto
}

.portfolio-image img {
  transition:transform 1.3s var(--ease)
}

@media(hover:hover) {
  .portfolio-image:hover img {
    transform:scale(1.035)
  }

}

.studio-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(50px,8vw,150px);
  padding:60px var(--gutter) 110px;
  align-items:center
}

.portrait {
  max-width:420px;
  overflow:hidden
}

.portrait img {
  aspect-ratio:3/4;
  object-fit:cover
}

.studio-text .eyebrow {
  margin-bottom:26px
}

.studio-text h1 {
  font-size:clamp(3.1rem,4.4vw,5.5rem)
}

.bio {
  margin-top:60px;
  max-width:460px
}

.bio h2 {
  font-family:var(--sans);
  font-size:1.25rem;
  margin-bottom:4px
}

.bio>span {
  font-size:.875rem;
  color:var(--muted)
}

.bio p {
  margin-top:24px;
  color:var(--muted)
}

.bio .underlined-link {
  margin-top:28px
}

.brand-signature {
  border-top:1px solid var(--line);
  padding:90px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px
}

.brand-signature img {
  width:76px
}

.brand-signature p {
  font-family:var(--serif);
  font-size:2.25rem;
  line-height:1.15
}

.process-page {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw;
  padding:90px var(--gutter) 140px
}

.process-heading .eyebrow {
  margin-bottom:26px
}

.process-list {
  padding-top:12px
}

.process-row {
  display:flex;
  gap:30px;
  padding:25px 0 32px;
  border-top:1px solid var(--line)
}

.process-row>span {
  font-size:.75rem;
  line-height:3.3;
  color:var(--copper)
}

.process-row h2 {
  font-size:2.5rem;
  line-height:1.2
}

.process-row p {
  font-size:1rem;
  margin-top:10px;
  color:var(--muted)
}

.process-list>.underlined-link {
  margin-top:32px
}

.contact-page {
  padding:70px var(--gutter) 110px;
  min-height:calc(100svh - 210px)
}

.contact-page .eyebrow {
  margin-bottom:24px
}

.contact-page h1 {
  font-size:clamp(4rem,8vw,8.75rem);
  max-width:900px
}

.contact-link {
  display:inline-block;
  margin-top:50px;
  font-size:clamp(1.35rem,2vw,2rem);
  border-bottom:1px solid var(--copper);
  padding-bottom:5px
}

.contact-page p {
  margin-top:14px;
  color:var(--muted)
}

.contact-region {
  display:block;
  font-size:.875rem;
  color:var(--muted);
  margin-top:42px
}

.project-cover {
  padding:30px var(--gutter) 0;
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
  gap:7vw;
  align-items:center
}

.detail-visual {
  background:#e6e0d5;
  overflow:hidden
}

.detail-visual img {
  height:min(76vh,880px);
  min-height:460px;
  object-fit:cover;
  object-position:center 46%
}

.detail-visual.small-source {
  display:flex;
  justify-content:center;
  background:#e8e2d8;
  padding:48px 0
}

.small-source img {
  width:100%;
  max-width:361px;
  height:auto;
  min-height:0
}

.project-title {
  padding:30px 0
}

.project-title .eyebrow {
  margin-bottom:20px
}

.project-title h1 {
  font-size:clamp(3rem,4.5vw,5.8rem)
}

.project-title>a {
  margin-top:34px
}

.project-info {
  padding:70px var(--gutter) 85px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw
}

.project-info>p {
  max-width:460px;
  font-size:1.125rem
}

.project-info .credit {
  font-size:.875rem;
  color:var(--muted);
  margin-bottom:20px
}

.project-info>div>.underlined-link {
  margin-right:26px;
  margin-bottom:14px
}

.zoom-button {
  display:none
}

.has-js .zoom-button {
  display:inline-block
}

.next-project {
  padding:55px var(--gutter) 80px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}

.next-project>span {
  font-size:.875rem;
  color:var(--muted)
}

.next-project>a {
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,4rem);
  line-height:1.2
}

.legal-page {
  padding:65px var(--gutter) 100px;
  max-width:1000px
}

.legal-page h1 {
  margin-bottom:60px
}

.legal-page h2 {
  font-size:2.1rem;
  margin:34px 0 12px
}

.legal-page p {
  max-width:700px;
  color:var(--muted)
}

.legal-page>a {
  margin-top:32px
}

.locked {
  overflow:hidden
}

.lightbox {
  width:min(1100px,94vw);
  max-height:94svh;
  border:0;
  background:var(--paper);
  padding:22px;
  color:var(--wine)
}

.lightbox::backdrop {
  background:#16130fec;
  backdrop-filter:blur(8px)
}

.lightbox-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px
}

.lightbox-close {
  font-size:2rem;
  line-height:1;
  padding:8px
}

.lightbox-image {
  width:100%;
  height:72svh;
  object-fit:contain
}

.lightbox-source {
  display:inline-block;
  font-size:.875rem;
  margin-top:16px;
  text-decoration:underline
}

.line-mask {
  display:block;
  overflow:hidden;
  padding-bottom:.16em;
  margin-bottom:-.16em
}

.line-inner {
  display:block;
  transform-origin:bottom left
}

.motion-ready .intro-motion .line-inner {
  animation:line-rise 1.15s var(--ease) both;
  animation-delay:calc(var(--line-index,0)*.13s + .12s)
}

.motion-ready .cinema-copy .cinema-link {
  animation:soft-enter 1.2s var(--ease) .5s both
}

.motion-ready .reveal {
  transition:opacity 1.1s var(--ease),transform 1.25s var(--ease),filter 1s var(--ease)
}

.motion-ready .reveal.pending {
  opacity:0;
  transform:translateY(35px);
  filter:blur(3px)
}

.motion-ready .brand-signature.reveal.pending img {
  transform:rotate(-35deg) scale(.9)
}

.brand-signature img {
  transition:transform 1.5s var(--ease)
}

@keyframes line-rise {
  from {
    transform:translateY(115%) rotate(2deg);
    opacity:0
  }

  to {
    transform:translateY(0) rotate(0);
    opacity:1
  }

}

@keyframes soft-enter {
  from {
    opacity:0;
    transform:translateY(15px)
  }

  to {
    opacity:1;
    transform:translateY(0)
  }

}

@media(max-width:1000px) {
  .portfolio {
    gap:70px 6vw
  }

  .studio-layout {
    gap:5vw
  }

  .studio-text h1 {
    font-size:3.8rem
  }

  .project-cover {
    gap:5vw
  }

  .project-title h1 {
    font-size:3.5rem
  }

  .desktop-nav {
    gap:25px
  }

}

@media(max-width:760px) {
  :root {
    --gutter:24px
  }

  .site-header {
    height:96px;
    padding-top:15px;
    padding-bottom:15px
  }

  .brand {
    width:116px
  }

  .desktop-nav {
    display:none
  }

  .menu-toggle {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:.875rem;
    padding:12px 0 12px 12px
  }

  .menu-toggle span {
    display:block;
    width:22px;
    height:7px;
    border-top:1px solid currentColor;
    border-bottom:1px solid currentColor;
    transition:transform .4s var(--ease)
  }

  .mobile-nav.open {
    display:flex
  }

  .mobile-nav {
    position:absolute;
    left:0;
    right:0;
    top:96px;
    padding:44px var(--gutter) 55px;
    background:var(--paper);
    color:var(--wine);
    flex-direction:column;
    gap:18px;
    box-shadow:0 60px 100px #0003
  }

  .mobile-nav>a {
    font-family:var(--serif);
    font-size:2.75rem;
    line-height:1.2
  }

  .mobile-nav>a[aria-current] {
    color:var(--copper)
  }

  .mobile-nav .nav-instagram {
    font-family:var(--sans);
    font-size:.875rem;
    margin-top:12px
  }

  .home:has(.mobile-nav.open) .site-header {
    background:var(--paper);
    color:var(--wine)
  }

  .home:has(.mobile-nav.open) .brand img {
    filter:none
  }

  .site-footer {
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding-top:25px;
    padding-bottom:25px
  }

  .site-footer>div {
    flex-wrap:wrap;
    gap:20px
  }

  .cinema {
    min-height:590px
  }

  .cinema-copy {
    bottom:180px;
    right:var(--gutter)
  }

  .cinema-copy h1 {
    font-size:clamp(3.3rem,13vw,4.5rem)
  }

  .cinema-link {
    margin-top:24px
  }

  .cinema-bottom {
    bottom:102px;
    font-size:.75rem;
    gap:16px
  }

  .home-footer {
    flex-direction:row;
    align-items:center;
    padding-top:20px;
    padding-bottom:20px;
    gap:12px;
    font-size:.75rem
  }

  .home-footer>div {
    gap:16px
  }

  .home-footer>span {
    max-width:120px;
    line-height:1.4
  }

  .page-heading {
    display:block;
    padding:35px var(--gutter) 52px
  }

  .page-heading h1 {
    font-size:5rem
  }

  .page-heading>span {
    display:block;
    margin-top:17px;
    padding:0
  }

  .portfolio {
    display:block;
    padding-bottom:70px
  }

  .portfolio-item {
    margin-bottom:58px
  }

  .portfolio-2,.portfolio-3 {
    padding-top:0
  }

  .portfolio .small-source {
    margin:0 auto
  }

  .portfolio-2 .portfolio-label,.portfolio-3 .portfolio-label {
    margin-left:auto;
    margin-right:auto
  }

  .portfolio-label {
    gap:10px
  }

  .portfolio-label h2 {
    font-size:.9375rem
  }

  .studio-layout {
    display:flex;
    flex-direction:column-reverse;
    padding-top:35px;
    padding-bottom:60px;
    gap:46px;
    align-items:stretch
  }

  .studio-text h1 {
    font-size:clamp(3rem,12vw,4.5rem)
  }

  .bio {
    margin-top:38px
  }

  .portrait {
    max-width:360px
  }

  .brand-signature {
    padding:60px var(--gutter);
    gap:26px;
    justify-content:flex-start
  }

  .brand-signature img {
    width:60px
  }

  .brand-signature p {
    font-size:1.8rem
  }

  .process-page {
    display:block;
    padding:45px var(--gutter) 75px
  }

  .process-heading h1 {
    font-size:4.5rem
  }

  .process-list {
    margin-top:60px;
    padding-top:0
  }

  .process-row {
    gap:24px
  }

  .process-row h2 {
    font-size:2.4rem
  }

  .contact-page {
    padding-top:40px;
    padding-bottom:80px;
    min-height:calc(100svh - 223px)
  }

  .contact-page h1 {
    font-size:clamp(3.5rem,14vw,5.8rem)
  }

  .contact-link {
    margin-top:42px;
    font-size:1.3rem
  }

  .contact-region {
    margin-top:35px
  }

  .project-cover {
    display:flex;
    flex-direction:column-reverse;
    padding:30px 0 0;
    gap:34px;
    align-items:stretch
  }

  .project-title {
    padding:0 var(--gutter)
  }

  .project-title h1 {
    font-size:3.6rem
  }

  .project-title>a {
    margin-top:22px
  }

  .detail-visual img {
    height:auto;
    min-height:0;
    object-fit:contain
  }

  .detail-visual.small-source {
    padding:30px var(--gutter)
  }

  .project-info {
    display:block;
    padding:42px var(--gutter) 45px
  }

  .project-info>div {
    margin-top:32px
  }

  .next-project {
    display:block;
    padding:36px var(--gutter) 48px
  }

  .next-project>span {
    display:block;
    margin-bottom:13px
  }

  .next-project>a {
    font-size:2.4rem
  }

  .legal-page {
    padding-top:35px
  }

  .legal-page h1 {
    font-size:3.7rem;
    margin-bottom:42px
  }

  .lightbox {
    padding:15px
  }

  .lightbox-image {
    height:69svh
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

  .reveal.pending {
    opacity:1!important;
    transform:none!important;
    filter:none!important
  }

}

html[data-motion=off] {
  scroll-behavior:auto
}

html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after {
  animation:none!important;
  transition:none!important
}

html[data-motion=off] .reveal.pending {
  opacity:1;
  transform:none;
  filter:none
}

.motion-ready .reveal {
  transition-delay:var(--reveal-delay,0ms)
}

.motion-pref:disabled {
  cursor:default
}

@view-transition {
  navigation:auto
}

::view-transition-old(root) {
  animation:page-out .25s ease both
}

::view-transition-new(root) {
  animation:page-in .5s ease both
}

@keyframes page-out {
  to {
    opacity:0
  }

}

@keyframes page-in {
  from {
    opacity:0;
    transform:translateY(6px)
  }

  to {
    opacity:1;
    transform:none
  }

}

@media(prefers-reduced-motion:reduce) {
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) {
    animation:none!important
  }

}

html[data-motion=off]::view-transition-group(*),html[data-motion=off]::view-transition-old(*),html[data-motion=off]::view-transition-new(*) {
  animation:none!important
}

.home .site-header {
  background:linear-gradient(180deg,#0005,transparent)
}

.cinema-shade {
  background:linear-gradient(90deg,#0004,transparent 65%),linear-gradient(180deg,#0008,transparent 35%,#0003 50%,#000b)
}

/* Page openings share the cinematic scale of the approved home. */ .has-stage {
  background:var(--paper)
}

.has-stage .site-header {
  position:absolute;
  inset:0 0 auto;
  color:white;
  background:linear-gradient(180deg,#0004,transparent)
}

.has-stage .brand img {
  filter:brightness(0) invert(1)
}

.site-header.scrolled {
  position:fixed!important;
  height:84px;
  inset:0 0 auto;
  background:var(--wine)!important;
  color:white!important;
  box-shadow:0 5px 30px #0001;
  animation:header-enter .4s var(--ease)
}

.site-header.scrolled .brand img {
  filter:brightness(0) invert(1)
}

.site-header.scrolled .brand {
  width:116px
}

@keyframes header-enter {
  from {
    transform:translateY(-100%)
  }

  to {
    transform:translateY(0)
  }

}

section[id] {
  scroll-margin-top:110px
}

.stage {
  position:relative;
  min-height:720px;
  height:100svh;
  background:var(--wine);
  color:white;
  display:grid;
  grid-template-columns:54% 46%;
  overflow:hidden
}

.stage-image {
  height:100%;
  min-width:0;
  overflow:hidden;
  background:#ded6cb;
  view-transition-name:architecture-image
}

.stage-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%
}

.stage-image>a {
  display:block;
  height:100%
}

.stage-copy {
  position:relative;
  align-self:center;
  padding:130px clamp(34px,4.5vw,80px) 70px;
  min-width:0;
  z-index:2
}

.stage-copy .eyebrow {
  color:#fff9;
  margin-bottom:32px;
  font-size:.75rem
}

.stage-copy h1 {
  font-size:clamp(3rem,4.7vw,6rem);
  line-height:1.08;
  letter-spacing:-.025em
}

.stage-copy .underlined-link {
  margin-top:34px;
  color:white
}

.stage-copy .stage-subtitle {
  font-size:1rem;
  line-height:1.6;
  color:#fff9;
  margin-top:28px
}

.stage-note {
  margin-top:46px
}

.stage-note h2 {
  font-family:var(--sans);
  font-size:1.125rem;
  margin-bottom:6px
}

.stage-note>span {
  font-size:.875rem;
  color:#fffb
}

.has-stage .desktop-nav a {
  color:white
}

.stage-copy>h1+.gallery-trigger {
  margin-right:24px
}

.stage-copy .detail-return {
  display:block;
  width:max-content;
  font-size:.875rem;
  max-width:100%;
  color:#fffb;
  margin-top:20px
}

.framed-image {
  display:flex;
  justify-content:center;
  align-items:center;
  background:#ddd3c5
}

.framed-image img {
  height:min(76svh,880px);
  width:auto;
  max-width:100%;
  object-fit:contain
}

.cinema-media {
  view-transition-name:architecture-image
}

.motion-ready .stage-image img {
  animation:photo-settle 4.2s var(--ease) both
}

@keyframes photo-settle {
  from {
    transform:scale(1.055)
  }

  to {
    transform:scale(1)
  }

}

/* Projects: intentional selection controls;
no automatic slide changes. */ .showcase-copy h1 {
  font-size:clamp(2.5rem,3.6vw,4.8rem)
}

.showcase-project {
  margin-top:48px
}

.showcase-kind {
  font-size:.75rem;
  color:#fff9
}

.showcase-title {
  font-family:var(--serif);
  font-size:clamp(2.15rem,3vw,3.6rem);
  line-height:1.2;
  margin-top:8px;
  overflow-wrap:normal
}

.showcase-copy .showcase-link {
  margin-top:22px
}

.showcase-controls {
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:58px;
  width:100%;
  max-width:430px
}

.has-js .showcase-controls {
  display:flex
}

.showcase-controls button {
  font-size:.875rem;
  min-height:44px;
  padding:8px 0
}

.showcase-controls .slide-dot {
  font-size:.75rem;
  min-width:38px;
  border-bottom:1px solid #fff3;
  color:#fff9
}

.showcase-controls .slide-dot[aria-pressed=true] {
  border-color:white;
  color:white
}

.slide-dots {
  display:flex;
  gap:7px
}

.project-showcase[data-frame=true] .showcase-photo {
  background:#d8cdbd
}

.project-showcase[data-frame=true] .showcase-image-link {
  display:flex;
  justify-content:center;
  align-items:center
}

.project-showcase[data-frame=true] .showcase-photo img {
  width:auto;
  height:min(76svh,880px);
  max-width:100%;
  object-fit:contain
}

.showcase-photo.is-changing img {
  opacity:.25;
  transform:scale(1.025)
}

.showcase-photo img {
  transition:opacity .5s var(--ease),transform 1s var(--ease)
}

.selected-projects {
  padding:95px var(--gutter) 120px
}

.collection-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:50px
}

.collection-heading h2 {
  font-size:clamp(2.75rem,4vw,4.5rem);
  line-height:1.2
}

.project-collection {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px
}

.project-tile {
  min-width:0
}

.tile-photo {
  display:block;
  overflow:hidden;
  background:#e6e0d5
}

.tile-photo img {
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform 1.4s var(--ease)
}

.tile-caption {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-top:22px
}

.tile-caption .eyebrow {
  font-size:.75rem;
  margin-bottom:7px;
  letter-spacing:.08em
}

.tile-caption h2 {
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.4
}

.gallery-trigger {
  display:none;
  font-size:.875rem;
  white-space:nowrap;
  border-bottom:1px solid currentColor;
  padding:4px 0
}

.has-js .gallery-trigger {
  display:inline-block
}

@media(hover:hover) {
  .tile-photo:hover img {
    transform:scale(1.045)
  }

}

/* The person, then the studio's concise philosophy. */ .studio-stage {
  grid-template-columns:48% 52%
}

.studio-stage .stage-copy {
  grid-column:1;
  grid-row:1;
  padding-left:var(--gutter)
}

.studio-stage-photo {
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e4d9cc;
  view-transition-name:none
}

.studio-stage-photo img {
  height:min(72svh,680px);
  width:auto;
  max-width:480px;
  object-fit:contain;
  box-shadow:0 24px 65px #4b2b2918
}

.studio-stage .stage-copy h1 {
  font-size:clamp(3rem,4.4vw,5.8rem)
}

.studio-essence {
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:9vw;
  padding:115px var(--gutter) 125px;
  overflow:hidden
}

.essence-heading h2 {
  font-size:clamp(3rem,4.4vw,5.3rem);
  line-height:1.05;
  margin-top:25px;
  position:relative;
  z-index:1
}

.essence-copy {
  max-width:460px;
  position:relative;
  z-index:1;
  padding-top:42px
}

.essence-copy p {
  color:var(--muted);
  margin-bottom:25px;
  font-size:1rem
}

.essence-copy>a {
  margin-top:13px
}

.essence-symbol {
  position:absolute;
  width:330px;
  bottom:-140px;
  left:20%;
  opacity:.08;
  pointer-events:none
}

/* Identity gives the process its own visual opening. */ .process-stage {
  display:block
}

.process-stage .stage-copy {
  max-width:750px;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  padding-left:var(--gutter);
  padding-top:110px
}

.process-stage .stage-copy h1 {
  font-size:clamp(4.25rem,7vw,8.25rem)
}

.process-symbol {
  position:absolute;
  width:clamp(300px,38vw,600px);
  right:7%;
  top:50%;
  transform:translateY(-50%);
  opacity:.4
}

.process-symbol img {
  filter:brightness(0) invert(1)
}

.motion-ready .process-symbol img {
  animation:identity-open 2.1s var(--ease) both
}

@keyframes identity-open {
  from {
    opacity:0;
    transform:rotate(-32deg) scale(.86)
  }

  to {
    opacity:1;
    transform:rotate(0) scale(1)
  }

}

.stage-index {
  position:absolute;
  bottom:48px;
  right:var(--gutter);
  font-size:.75rem;
  color:#fff9;
  letter-spacing:.12em
}

.process-journey {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  align-items:start;
  gap:9vw;
  padding:110px var(--gutter) 125px
}

.journey-photo {
  position:sticky;
  top:120px;
  max-width:480px;
  overflow:hidden
}

.journey-photo img {
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 75%
}

.journey-step {
  display:flex;
  gap:30px;
  padding:34px 0;
  border-top:1px solid var(--line)
}

.journey-step>span {
  font-size:.75rem;
  color:var(--copper);
  padding-top:13px
}

.journey-step h2 {
  font-size:2.8rem;
  line-height:1.2
}

.journey-step p {
  font-size:1rem;
  color:var(--muted);
  margin-top:13px;
  max-width:390px
}

.journey-steps>.underlined-link {
  margin-top:32px
}

/* Contact opens directly on the existing contact channel. */ .contact-stage {
  grid-template-columns:56% 44%
}

.contact-stage .stage-copy {
  grid-column:1;
  grid-row:1;
  padding-left:var(--gutter)
}

.contact-stage-photo {
  grid-column:2;
  grid-row:1
}

.contact-stage-photo img {
  object-position:center 70%
}

.contact-stage .stage-copy h1 {
  font-size:clamp(3rem,4.5vw,6rem)
}

.contact-stage .contact-link {
  font-size:clamp(1.15rem,2vw,1.8rem);
  margin-top:48px;
  border-color:#ffffff80
}

.contact-stage .stage-copy .stage-subtitle {
  font-size:.875rem;
  margin-top:17px
}

.contact-stage .contact-region {
  color:#fff9;
  font-size:.875rem;
  margin-top:38px
}

/* Consistent gallery controls, real loading/error states, and a generous hit area. */ .lightbox {
  width:min(1180px,96vw);
  max-height:96svh;
  padding:22px 26px
}

.lightbox-header {
  margin-bottom:14px;
  font-size:.875rem
}

.lightbox-close {
  font-size:.875rem;
  display:flex;
  gap:12px;
  align-items:center;
  min-height:44px;
  padding:4px 0 4px 15px
}

.lightbox-close span {
  font-size:1.6rem
}

.lightbox-media {
  position:relative;
  background:#e6dfd5;
  min-height:250px
}

.lightbox-image {
  height:65svh;
  max-height:750px;
  object-fit:contain;
  width:100%
}

.gallery-loading {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e6dfd5e6;
  font-size:.875rem;
  padding:30px;
  text-align:center
}

.lightbox-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:12px 0
}

.lightbox-tools button {
  min-height:44px;
  font-size:.875rem;
  padding:8px 0
}

.gallery-counter {
  font-size:.75rem;
  color:var(--muted)
}

.gallery-credit {
  font-size:.75rem;
  color:var(--muted);
  margin-top:13px
}

.lightbox-source {
  margin-top:8px
}

.lightbox-media {
  touch-action:pan-y
}

::view-transition-group(architecture-image) {
  animation-duration:.7s;
  animation-timing-function:var(--ease)
}

@media(max-width:1100px) {
  .stage-copy {
    padding-left:34px;
    padding-right:34px
  }

  .stage-copy h1 {
    font-size:3.8rem
  }

  .showcase-copy h1 {
    font-size:3rem
  }

  .showcase-controls {
    gap:9px
  }

  .showcase-controls button {
    font-size:.8125rem
  }

  .slide-dots {
    gap:2px
  }

  .studio-stage .stage-copy h1,.contact-stage .stage-copy h1 {
    font-size:3.65rem
  }

  .project-collection {
    gap:24px
  }

  .tile-caption {
    align-items:flex-start;
    flex-direction:column
  }

  .studio-stage-photo img {
    max-width:85%
  }

}

@media(max-width:760px) {
  .site-header.scrolled {
    height:80px
  }

  .menu-toggle .menu-label {
    display:inline;
    width:auto;
    height:auto;
    border:0;
    transform:none
  }

  .menu-toggle .menu-lines {
    width:22px;
    height:14px;
    border:0;
    position:relative;
    transform:none
  }

  .menu-lines:before,.menu-lines:after {
    content:'';
    position:absolute;
    left:0;
    width:22px;
    height:1px;
    background:currentColor;
    transition:transform .4s var(--ease),top .4s var(--ease)
  }

  .menu-lines:before {
    top:3px
  }

  .menu-lines:after {
    top:10px
  }

  .menu-toggle[aria-expanded=true] .menu-lines:before {
    top:7px;
    transform:rotate(45deg)
  }

  .menu-toggle[aria-expanded=true] .menu-lines:after {
    top:7px;
    transform:rotate(-45deg)
  }

  .mobile-nav {
    position:fixed;
    inset:96px 0 0;
    height:calc(100dvh - 96px);
    overflow:auto;
    padding:30px var(--gutter) 60px;
    gap:22px;
    background:var(--wine);
    color:white;
    box-shadow:none;
    counter-reset:menu;
    justify-content:center
  }

  .site-header.scrolled .mobile-nav {
    top:80px;
    height:calc(100dvh - 80px)
  }

  .mobile-nav>a:not(.nav-instagram) {
    display:flex;
    align-items:baseline;
    gap:22px;
    counter-increment:menu
  }

  .mobile-nav>a:not(.nav-instagram):before {
    content:counter(menu,decimal-leading-zero);
    font-family:var(--sans);
    font-size:.75rem;
    color:#fff7;
    letter-spacing:0
  }

  .mobile-nav>a[aria-current] {
    color:#e9c0aa
  }

  .mobile-nav .nav-instagram {
    font-size:.875rem;
    color:#fff9;
    margin-top:22px
  }

  .menu-open {
    overflow:hidden
  }

  body.menu-open .site-header {
    background:var(--wine)!important;
    color:white!important
  }

  body.menu-open .brand img {
    filter:brightness(0) invert(1)!important
  }

  .mobile-nav.open {
    animation:menu-enter .5s var(--ease) both
  }

  .mobile-nav.open>a {
    animation:soft-enter .7s var(--ease) both
  }

  .mobile-nav.open>a:nth-child(2) {
    animation-delay:.06s
  }

  .mobile-nav.open>a:nth-child(3) {
    animation-delay:.12s
  }

  .mobile-nav.open>a:nth-child(4) {
    animation-delay:.18s
  }

  .mobile-nav.open>a:nth-child(5) {
    animation-delay:.24s
  }

  @keyframes menu-enter {
    from {
      opacity:0;
      transform:translateY(-12px)
    }

    to {
      opacity:1;
      transform:none
    }

  }

  .stage {
    display:block;
    height:100svh;
    min-height:750px
  }

  .stage-image {
    position:absolute;
    inset:0;
    max-width:none
  }

  .stage-image:after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,#0008,transparent 35%,#0003 50%,#000c)
  }

  .stage-image img {
    height:100%;
    width:100%;
    object-fit:cover;
    object-position:center 50%
  }

  .stage-copy {
    position:absolute;
    bottom:54px;
    left:0;
    right:0;
    align-self:initial;
    padding:0 var(--gutter);
    z-index:2
  }

  .stage-copy .eyebrow {
    margin-bottom:23px;
    color:#fffc
  }

  .stage-copy h1 {
    font-size:clamp(3rem,12.6vw,4.5rem);
    line-height:1.05;
    text-shadow:0 1px 20px #0002
  }

  .stage-copy .underlined-link {
    margin-top:26px
  }

  .showcase-copy {
    bottom:32px
  }

  .showcase-copy h1 {
    font-size:clamp(2.9rem,12vw,4.1rem)
  }

  .showcase-project {
    margin-top:26px
  }

  .showcase-title {
    font-size:2.3rem
  }

  .showcase-kind {
    color:#fffc
  }

  .showcase-copy .showcase-link {
    margin-top:15px
  }

  .showcase-controls {
    margin-top:28px;
    max-width:none
  }

  .showcase-controls button {
    font-size:.875rem
  }

  .project-showcase[data-frame=true] .showcase-photo img,.framed-image img {
    width:100%;
    max-width:none;
    height:100%;
    object-fit:cover
  }

  .selected-projects {
    padding:65px var(--gutter) 75px
  }

  .collection-heading {
    display:block;
    margin-bottom:35px
  }

  .collection-heading h2 {
    font-size:3rem;
    margin-top:18px
  }

  .project-collection {
    display:block
  }

  .project-tile {
    margin-bottom:48px
  }

  .project-tile:last-child {
    margin-bottom:0
  }

  .tile-caption {
    flex-direction:row;
    align-items:flex-end;
    margin-top:18px
  }

  .tile-caption h2 {
    font-size:1rem
  }

  .studio-stage-photo {
    display:block;
    background:#927c6a
  }

  .studio-stage-photo img {
    max-width:none;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 38%;
    box-shadow:none
  }

  .studio-stage .stage-copy {
    padding:0 var(--gutter)
  }

  .studio-stage .stage-copy h1 {
    font-size:clamp(2.9rem,11.4vw,4.2rem)
  }

  .stage-note {
    margin-top:29px
  }

  .stage-note h2 {
    font-size:1.0625rem
  }

  .stage-note>span {
    color:#fffc
  }

  .studio-essence {
    display:block;
    padding:70px var(--gutter) 90px
  }

  .essence-heading h2 {
    font-size:3.15rem;
    line-height:1.08;
    margin-top:22px
  }

  .essence-copy {
    padding-top:38px;
    max-width:none
  }

  .essence-symbol {
    width:260px;
    left:auto;
    right:-50px;
    bottom:-105px
  }

  .process-stage .stage-copy {
    position:absolute;
    left:0;
    top:auto;
    bottom:90px;
    transform:none;
    padding:0 var(--gutter);
    max-width:none
  }

  .process-stage .stage-copy h1 {
    font-size:clamp(4rem,16vw,5.7rem)
  }

  .process-symbol {
    top:130px;
    right:-30px;
    width:300px;
    transform:none;
    opacity:.26
  }

  .stage-index {
    bottom:30px;
    right:var(--gutter)
  }

  .process-journey {
    display:flex;
    flex-direction:column;
    padding:65px var(--gutter) 75px;
    gap:45px
  }

  .journey-photo {
    position:static;
    width:100%;
    max-width:none
  }

  .journey-photo img {
    aspect-ratio:4/3;
    object-position:center 75%
  }

  .journey-steps {
    width:100%
  }

  .journey-step {
    gap:25px;
    padding:28px 0
  }

  .journey-step h2 {
    font-size:2.65rem
  }

  .contact-stage .stage-copy {
    padding:0 var(--gutter);
    bottom:58px
  }

  .contact-stage .stage-copy h1 {
    font-size:clamp(2.9rem,11.8vw,4.1rem)
  }

  .contact-stage .contact-link {
    font-size:1.25rem;
    margin-top:34px;
    border-color:#fffa
  }

  .contact-stage .stage-copy .stage-subtitle {
    font-size:.875rem;
    color:#fffc;
    margin-top:13px
  }

  .contact-stage .contact-region {
    color:#fffc;
    margin-top:28px;
    font-size:.875rem
  }

  .contact-stage-photo img {
    object-position:center 65%
  }

  .project-detail-stage .stage-copy {
    bottom:60px
  }

  .project-detail-stage .stage-copy h1 {
    font-size:clamp(3.2rem,13vw,4.5rem)
  }

  .stage-copy .detail-return {
    display:block;
    margin-top:20px
  }

  .lightbox {
    width:96vw;
    max-height:96svh;
    padding:12px 15px
  }

  .lightbox-image {
    height:60svh
  }

  .lightbox-header {
    font-size:.875rem;
    margin-bottom:9px
  }

  .gallery-credit {
    line-height:1.4
  }

  .lightbox-tools {
    padding:6px 0
  }

  .lightbox-source {
    font-size:.8125rem
  }

}

@media(max-width:360px) {
  .showcase-controls .slide-dot {
    min-width:30px
  }

  .showcase-controls {
    gap:8px
  }

  .showcase-title {
    font-size:2.1rem
  }

}

@media(prefers-reduced-motion:reduce) {
  .stage-image img,.process-symbol img,.mobile-nav.open,.mobile-nav.open>a,.site-header.scrolled {
    animation:none!important
  }

  .showcase-photo.is-changing img {
    opacity:1;
    transform:none
  }

}

html[data-motion=off] .stage-image img,html[data-motion=off] .process-symbol img {
  animation:none!important
}

/* Each menu page keeps its own composition, separate from the home opening. */ .route-projects .stage,.route-studio .stage {
  height:auto;
  min-height:0;
  background:var(--paper);
  color:var(--wine);
  overflow:visible
}

.route-projects .project-showcase {
  padding:38px var(--gutter) 75px;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:7vw;
  align-items:center
}

.route-projects .showcase-photo {
  height:min(78svh,820px);
  background:#e4ded4
}

.route-projects .stage-copy {
  padding:20px 0 45px;
  position:relative
}

.route-projects .stage-copy .eyebrow {
  color:var(--muted)
}

.route-projects .showcase-copy h1 {
  font-size:clamp(4rem,6.5vw,7.5rem);
  line-height:1.02;
  color:var(--wine);
  text-shadow:none
}

.route-projects .showcase-kind {
  color:var(--muted)
}

.route-projects .showcase-title {
  font-size:clamp(2.1rem,3vw,3.4rem)
}

.route-projects .stage-copy .underlined-link {
  color:var(--wine)
}

.route-projects .showcase-project {
  margin-top:45px
}

.route-projects .showcase-controls {
  margin-top:48px;
  color:var(--wine)
}

.route-projects .showcase-controls .slide-dot {
  color:var(--muted);
  border-color:var(--line)
}

.route-projects .showcase-controls .slide-dot[aria-pressed=true] {
  color:var(--wine);
  border-color:var(--wine)
}

.route-projects .selected-projects {
  padding-top:50px;
  border-top:1px solid var(--line)
}

.route-projects .project-showcase[data-frame=true] .showcase-photo img {
  height:100%;
  max-width:100%;
  object-fit:contain
}

.route-studio .studio-stage {
  padding:60px var(--gutter) 100px;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:7vw
}

.route-studio .studio-stage-photo {
  background:#e8e0d5;
  padding:32px;
  height:auto;
  align-self:stretch
}

.route-studio .studio-stage-photo img {
  width:100%;
  height:auto;
  max-width:420px;
  object-fit:contain;
  box-shadow:none
}

.route-studio .stage-copy {
  padding:20px 0 50px;
  color:var(--wine)
}

.route-studio .stage-copy h1 {
  font-size:clamp(3.5rem,5vw,6rem);
  text-shadow:none;
  line-height:1.08
}

.route-studio .stage-copy .eyebrow,.route-studio .stage-note>span {
  color:var(--muted)
}

.route-studio .stage-copy .underlined-link {
  color:var(--wine)
}

.route-studio .studio-essence {
  background:#e9dfd2;
  padding-top:95px;
  padding-bottom:110px
}

.route-process .process-stage {
  height:auto;
  min-height:570px;
  background:#e7dccb;
  color:var(--wine)
}

.route-process .process-stage .stage-copy {
  position:relative;
  top:auto;
  left:auto;
  transform:none;
  padding:85px var(--gutter) 100px;
  max-width:760px
}

.route-process .stage-copy .eyebrow,.route-process .stage-copy .stage-subtitle {
  color:var(--muted)
}

.route-process .stage-copy .underlined-link {
  color:var(--wine)
}

.route-process .process-symbol img {
  filter:none
}

.route-process .process-symbol {
  width:clamp(280px,34vw,490px);
  right:7%;
  opacity:.6
}

.route-process .stage-index {
  color:var(--muted)
}

.route-contact .contact-stage {
  height:calc(100svh - 124px);
  min-height:650px;
  display:block;
  overflow:hidden
}

.route-contact .stage-copy {
  padding:80px var(--gutter) 100px;
  max-width:820px;
  position:relative
}

.route-contact .stage-copy h1 {
  font-size:clamp(3.8rem,6vw,7rem);
  max-width:750px
}

.contact-symbol {
  position:absolute;
  right:-50px;
  top:50%;
  transform:translateY(-50%);
  width:clamp(350px,43vw,650px);
  opacity:.2;
  pointer-events:none
}

.contact-symbol img {
  filter:brightness(0) invert(1)
}

.motion-ready .contact-symbol img {
  animation:identity-open 2s var(--ease) both
}

.route-contact .site-footer {
  background:var(--wine);
  color:#fffb;
  border-color:#fff2
}

.route-contact .contact-region {
  color:#fff9
}

@media(max-width:1100px) {
  .route-studio .stage-copy h1 {
    font-size:3.6rem
  }

  .route-projects .project-showcase {
    gap:5vw
  }

  .route-projects .showcase-controls {
    gap:8px
  }

}

@media(max-width:760px) {
  .mobile-nav {
    justify-content:safe center
  }

  .route-projects .project-showcase {
    display:flex;
    flex-direction:column;
    padding:25px var(--gutter) 55px;
    gap:0;
    align-items:stretch;
    overflow:hidden
  }

  .route-projects .showcase-copy {
    position:static;
    padding:0;
    display:contents
  }

  .route-projects .showcase-copy>.eyebrow {
    order:0;
    margin-bottom:16px
  }

  .route-projects .showcase-copy>h1 {
    order:1;
    font-size:4.5rem;
    line-height:1.1;
    margin-bottom:32px
  }

  .route-projects .showcase-photo {
    position:relative;
    inset:auto;
    order:2;
    height:auto;
    aspect-ratio:4/5;
    width:100%;
    view-transition-name:architecture-image
  }

  .route-projects .showcase-photo:after {
    display:none
  }

  .route-projects .showcase-photo img {
    object-fit:cover;
    width:100%;
    height:100%
  }

  .route-projects .showcase-project {
    order:3;
    margin-top:25px
  }

  .route-projects .showcase-title {
    font-size:2.5rem;
    margin-top:6px
  }

  .route-projects .showcase-link {
    order:4;
    margin-top:18px;
    align-self:flex-start
  }

  .route-projects .showcase-controls {
    order:5;
    margin-top:25px
  }

  .route-projects .selected-projects {
    padding-top:60px
  }

  .route-studio .studio-stage {
    display:flex;
    flex-direction:column-reverse;
    padding:35px var(--gutter) 65px;
    gap:35px
  }

  .route-studio .stage-copy {
    position:static;
    padding:0
  }

  .route-studio .stage-copy h1 {
    font-size:clamp(2.9rem,11.5vw,4.2rem)
  }

  .route-studio .stage-note {
    margin-top:32px
  }

  .route-studio .studio-stage-photo {
    position:relative;
    inset:auto;
    background:#e8e0d5;
    padding:20px;
    align-items:center;
    display:flex
  }

  .route-studio .studio-stage-photo:after {
    display:none
  }

  .route-studio .studio-stage-photo img {
    max-width:420px;
    height:auto;
    width:100%;
    object-fit:contain
  }

  .route-studio .studio-essence {
    padding:65px var(--gutter) 80px
  }

  .route-process .process-stage {
    min-height:660px
  }

  .route-process .process-stage .stage-copy {
    position:relative;
    top:auto;
    left:auto;
    bottom:auto;
    transform:none;
    padding:60px var(--gutter) 245px
  }

  .route-process .stage-copy h1 {
    font-size:clamp(3.7rem,15vw,5rem);
    text-shadow:none
  }

  .route-process .process-symbol {
    top:auto;
    bottom:-50px;
    right:-25px;
    width:240px;
    transform:none;
    opacity:.45
  }

  .route-process .stage-index {
    bottom:35px;
    left:var(--gutter);
    right:auto
  }

  .route-contact .contact-stage {
    height:auto;
    min-height:calc(100svh - 96px)
  }

  .route-contact .stage-copy {
    position:relative;
    inset:auto;
    padding:60px var(--gutter) 95px
  }

  .route-contact .stage-copy h1 {
    font-size:clamp(2.9rem,11.8vw,4.2rem)
  }

  .route-contact .contact-symbol {
    right:-90px;
    top:auto;
    bottom:-120px;
    transform:none;
    width:360px;
    opacity:.12
  }

  .route-contact .contact-region {
    margin-top:37px
  }

}

@media(max-height:520px) and (max-width:760px) {
  .mobile-nav {
    justify-content:flex-start
  }

}

/* Home: the approved visual carousel, without stacked content sections. */
.home .project-showcase{background:#302b27;min-height:0;touch-action:pan-y pinch-zoom}
.home .showcase-photo{position:relative}
.home .showcase-copy h1{color:white}
.slide-pause{display:none;position:relative;width:44px;height:44px;color:#fffc;padding:0;border:0;flex-shrink:0}
.has-js .slide-pause{display:inline-flex}
.slide-pause::before,.slide-pause::after{content:'';position:absolute;top:16px;width:2px;height:12px;background:currentColor}
.slide-pause::before{left:17px}
.slide-pause::after{left:24px}
.slide-pause[aria-pressed=true]::before{left:18px;top:15px;width:0;height:0;background:none;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid currentColor}
.slide-pause[aria-pressed=true]::after{display:none}
.slide-pause:disabled{cursor:default}
.home .stage-image:after{pointer-events:none}
.home .showcase-image-link{position:absolute;inset:0;z-index:1}
.home .project-showcase .showcase-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;animation:none!important;transform:none}
.home .showcase-photo:after{z-index:3}
.home .showcase-copy{z-index:4}
.home .showcase-controls{position:relative;justify-content:center;gap:0;max-width:none;min-height:44px}
.home .showcase-controls .slide-dots{gap:8px}
.home .showcase-controls .slide-dot{width:44px;min-width:44px;min-height:44px;padding:8px 0}
.home .showcase-controls .slide-pause{position:absolute;right:0;top:0;min-height:44px;padding:0}
.home .showcase-image-link picture{display:contents}
.home .project-showcase .showcase-photo .slide-image{opacity:0;z-index:0;transition:opacity .9s var(--ease)}
.home .project-showcase .showcase-photo .slide-image.is-outgoing{opacity:1;z-index:1}
.home .project-showcase .showcase-photo .slide-image.is-active{opacity:1;z-index:2}
@media(min-width:761px){
 .home .project-showcase{display:block}
 .home .showcase-photo{position:absolute;inset:0}
 .home .showcase-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0009,transparent 78%),linear-gradient(0deg,#0005,transparent 65%);pointer-events:none}
 .home .showcase-copy{position:absolute;left:0;bottom:44px;width:min(650px,50vw);padding:0 var(--gutter)}
 .home .showcase-copy h1{font-size:clamp(3.4rem,5.1vw,6.6rem)}
 .home .showcase-project{margin-top:28px}
 .home .showcase-controls{margin-top:30px}
 .home[data-motion=off] .showcase-photo img{animation:none}
 .home .project-showcase .slide-image[data-asset="quarto"]{object-position:center 62%}
 .home .project-showcase .slide-image[data-asset="closet"]{object-position:center 38%}
}
.site-header.scrolled{background:rgba(243,239,232,.96)!important;color:var(--wine)!important;box-shadow:0 1px 0 var(--line);backdrop-filter:blur(12px)}
.site-header.scrolled .brand img{filter:none}
.home .site-header{background:linear-gradient(180deg,#0004,transparent);box-shadow:none}
.route-contact .site-footer{background:var(--paper);color:var(--muted);border-color:var(--line)}
@media(max-width:760px){
 .home .showcase-photo{position:absolute;inset:0}
 .home .showcase-copy{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
 .home .showcase-copy h1{font-size:clamp(2.9rem,12vw,4.1rem)}
 .home .showcase-controls{margin-top:24px}
 .home .showcase-project{margin-top:24px}
 .mobile-nav{background:var(--paper);color:var(--wine)}
 .mobile-nav>a:not(.nav-instagram):before{color:var(--muted)}
 .mobile-nav>a[aria-current]{color:var(--copper)}
 .mobile-nav .nav-instagram{color:var(--muted)}
 body.menu-open .site-header{background:var(--paper)!important;color:var(--wine)!important}
 body.menu-open .brand img{filter:none!important}
}


/* Project details: transparent navigation and editorial information. */
html,body,.mobile-nav,.lightbox {
  scrollbar-width:none;
  -ms-overflow-style:none
}

::-webkit-scrollbar {
  display:none
}

.route-detail {
  --detail-paper:#f3efe8;
  --detail-ink:#501b2c;
  --detail-muted:#655a57;
  --detail-line:#501b2c26;
  background:var(--detail-paper)
}

.route-detail .site-header,.route-detail .site-header.scrolled {
  position:absolute!important;
  inset:0 0 auto;
  height:112px;
  padding:20px var(--gutter);
  color:white!important;
  background:linear-gradient(180deg,#0007,transparent)!important;
  box-shadow:none;
  backdrop-filter:none;
  animation:none
}

.route-detail .brand,.route-detail .site-header.scrolled .brand {
  width:138px
}

.route-detail .site-header .brand img {
  filter:brightness(0) invert(1)
}

.route-detail .desktop-nav {
  gap:34px
}

.route-detail .stage-image img {
  animation:none!important;
  transform:none
}

.route-detail .project-info {
  padding:clamp(56px,6vw,88px) var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(44px,7vw,112px);
  align-items:start;
  background:var(--detail-paper);
  color:var(--detail-ink)
}

.project-intro:before {
  content:'';
  display:block;
  width:44px;
  height:1px;
  margin-bottom:28px;
  background:var(--copper)
}

.route-detail .project-info>.project-intro {
  margin:0
}

.project-intro h2 {
  max-width:19ch;
  font-size:clamp(2.7rem,4.5vw,4.4rem);
  line-height:1.08;
  letter-spacing:-.025em
}

.project-intro h2 em {
  color:var(--copper)
}

.project-intro>p {
  max-width:35ch;
  margin-top:24px;
  color:var(--detail-muted);
  font-size:1.0625rem;
  line-height:1.75
}

.project-reference {
  padding:8px 0 6px clamp(28px,3.5vw,48px);
  border-left:1px solid var(--detail-line)
}

.project-credits {
  display:grid;
  gap:24px;
  margin:0
}

.project-credits dt {
  margin-bottom:6px;
  color:var(--detail-muted);
  font-size:.875rem;
  letter-spacing:.045em
}

.project-credits dd {
  margin:0;
  font-size:1rem;
  line-height:1.5
}

.route-detail .project-reference>.underlined-link {
  margin:28px 0 0;
  padding:8px 0;
  font-size:.875rem;
  border-color:#93503980
}

.route-detail .next-project {
  padding:42px var(--gutter) 48px;
  background:var(--detail-paper);
  color:var(--detail-ink);
  border-top:1px solid var(--detail-line)
}

.route-detail .next-project>span {
  color:var(--detail-muted)
}

.route-detail .next-project>a {
  font-size:clamp(2.4rem,4vw,3.8rem)
}

.route-detail .site-footer {
  padding:26px var(--gutter) 30px;
  background:var(--detail-paper);
  color:var(--detail-muted);
  border-top:1px solid var(--detail-line)
}

.route-detail .site-footer a,.route-detail .motion-pref {
  font-size:.875rem
}

body.route-detail.menu-open .site-header {
  background:var(--detail-paper)!important;
  color:var(--detail-ink)!important
}

@media(max-width:760px) {
  .route-detail .site-header,.route-detail .site-header.scrolled {
    height:96px;
    padding-top:15px;
    padding-bottom:15px
  }

  .route-detail .brand,.route-detail .site-header.scrolled .brand {
    width:116px
  }

  .route-detail .site-header.scrolled .mobile-nav {
    top:0;
    height:100dvh
  }

  .route-detail .project-info {
    display:block;
    padding:48px var(--gutter) 50px
  }

  .project-intro:before {
    margin-bottom:24px
  }

  .project-intro h2 {
    font-size:clamp(2.4rem,10vw,3rem)
  }

  .project-intro>p {
    margin-top:20px;
    font-size:1rem
  }

  .route-detail .project-reference {
    margin-top:32px;
    padding:26px 0 0;
    border-left:0;
    border-top:1px solid var(--detail-line)
  }

  .project-credits {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
  }

  .project-credits.one-credit {
    grid-template-columns:1fr
  }

  .route-detail .next-project {
    padding:32px var(--gutter) 36px
  }

  .route-detail .next-project>span {
    margin-bottom:12px
  }

  .route-detail .next-project>a {
    font-size:2.5rem
  }

  .route-detail .site-footer {
    gap:12px
  }
}

@media(max-width:360px) {
  .project-credits {
    grid-template-columns:1fr
  }
}

/* A quiet, accessible return to the top of each project. */
.route-detail .back-to-top {
  position:fixed;
  right:var(--gutter);
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:30;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  color:var(--wine);
  background:rgba(243,239,232,.97);
  border:1px solid #501b2c33;
  border-radius:50%;
  box-shadow:0 4px 18px #17191612;
  transition:background-color 180ms var(--ease);
}
.route-detail .back-to-top:hover { background:#e7dfd4; }
.route-detail .back-to-top:focus-visible { outline:2px solid var(--copper); outline-offset:4px; }
.route-detail.menu-open .back-to-top,
.route-detail.locked .back-to-top { visibility:hidden; }


/* AP Entre Tons: project narrative, four views and the supplied material board. */
:is(.route-ap, .route-closet) { --story-ink:#302d2a; --story-muted:#635d56; color:var(--story-ink) }
:is(.route-ap, .route-closet) .ap-opening { grid-template-columns:59% 41%; background:#292a27; min-height:640px; height:min(980px,100svh) }
:is(.route-ap, .route-closet) .ap-opening .stage-copy h1 { font-size:clamp(4.5rem,6.5vw,7.5rem); line-height:1 }
:is(.route-ap, .route-closet) .ap-opening .stage-image img { object-position:center 47% }
:is(.route-ap, .route-closet) .ap-opening .stage-copy { padding-left:clamp(36px,4.5vw,80px); padding-right:32px }
.ap-opening .stage-copy>.underlined-link { font-size:.9375rem }
:is(.route-ap, .route-closet) .ap-opening .stage-copy>.detail-return { display:block; width:fit-content; margin-top:18px; margin-right:0 }
.ap-opening .underlined-link>span { margin-left:16px }
.ap-story { background:var(--paper) }
.ap-story [id] { scroll-margin-top:56px }
.story-wrap { width:calc(100% - 2 * var(--gutter)); max-width:1296px; margin-inline:auto }
.story-intro,.story-heading-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,8vw,130px); align-items:start }
.story-intro { padding-top:clamp(64px,8vw,124px); padding-bottom:clamp(48px,6vw,92px) }
.ap-story h2 { font-size:clamp(2.7rem,4.5vw,4.7rem); line-height:1.06; letter-spacing:-.025em; font-weight:400 }
.ap-story h2 em { color:var(--copper) }
.story-prose { max-width:50ch }
.story-prose p { color:var(--story-muted); font-size:1rem; line-height:1.9 }
.story-prose p+p { margin-top:24px }
.story-intro .story-prose { padding-top:8px }
.room-gallery { margin-bottom:clamp(72px,9vw,144px) }
.room-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:28px; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:none; padding-bottom:8px }
.room-slide { margin:0; flex:0 0 40%; min-width:0; scroll-snap-align:start }
.room-enlarge { display:block; width:100%; padding:0; position:relative; text-align:left }
.room-enlarge img { width:100%; aspect-ratio:3/4; object-fit:cover }
.room-enlarge-label { position:absolute; right:16px; bottom:16px; color:#fff; font-size:.75rem; background:#292a27d9; padding:6px 12px }
.room-enlarge-label>span { margin-left:10px }
.room-slide figcaption { display:flex; gap:18px; margin-top:17px; font-size:.875rem; color:var(--story-muted) }
.room-slide figcaption>span { color:var(--copper); font-size:.75rem }
.room-controls { display:flex; align-items:center; justify-content:space-between; margin-top:28px; padding-top:16px; border-top:1px solid #302d2a26 }
.room-controls button { min-height:44px; padding:4px 0; font-size:.875rem; display:flex; align-items:center; gap:18px }
.room-controls button:disabled { opacity:.35; cursor:default }
.room-counter { font-size:.75rem; letter-spacing:.08em }
.story-materials { margin-bottom:clamp(84px,10vw,156px) }
.project-palette { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(16px,3vw,52px); list-style:none; margin:64px 0 44px; padding:0 }
.project-palette li { min-width:0; text-align:center; font-size:.75rem; color:var(--story-muted) }
.palette-swatch { display:block; border-radius:50%; background:var(--swatch); aspect-ratio:1; border:1px solid #302d2a18; max-width:126px; margin:0 auto 16px }
.material-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px }
.material-sample { margin:0; min-width:0 }
.material-sample img { aspect-ratio:1.2; width:100%; object-fit:cover }
.material-sample figcaption { margin-top:14px; font-size:.875rem; line-height:1.5 }
.material-sample figcaption span { display:block; color:var(--story-muted); font-size:.75rem; margin-top:4px }
.board-link { margin-top:32px; font-size:.8125rem }
.board-link>span { margin-left:14px }
.story-chapter { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,130px); align-items:start; margin-bottom:clamp(80px,10vw,150px) }
.chapter-photo { margin:0 }
.story-image-button { display:block; padding:0; width:100%; text-align:left }
.chapter-photo img { width:100%; height:auto }
.chapter-copy { padding-top:32px }
.chapter-number { display:block; font-size:.6875rem; letter-spacing:.14em; color:var(--copper); margin-bottom:26px }
.chapter-copy h2,.light-copy h2 { margin-bottom:30px }
.chapter-detail { margin:36px 0 0 auto; width:58%; max-width:330px }
.chapter-detail img { width:100%; height:auto }
.chapter-detail figcaption,.light-detail figcaption { color:var(--story-muted); font-size:.75rem; margin-top:12px; line-height:1.6 }
.story-light { background:#292a27; color:#f3efe8; padding:clamp(64px,8vw,126px) 0; margin-bottom:clamp(80px,10vw,150px) }
.light-composition { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(48px,10vw,150px); align-items:center }
.story-light .chapter-number { color:#cfaa95 }
.story-light h2 em { color:#cfaa95 }
.story-light .story-prose p { color:#dbd6ce }
.light-detail { margin:0; width:100% }
.light-detail img { width:100%; aspect-ratio:1.04; object-fit:cover }
.light-detail figcaption { color:#c8c0b5 }
.story-experience .chapter-photo { order:2 }
.story-experience .chapter-copy { order:1 }
.story-closing { text-align:center; padding:0 0 clamp(72px,9vw,140px) }
.closing-rule { display:block; margin:0 auto 40px; width:48px; height:1px; background:var(--copper) }
.ap-story .story-closing h2 { font-size:clamp(3rem,5vw,5rem); max-width:25ch; margin:0 auto 34px }
.closing-copy { max-width:60ch; margin:auto; color:var(--story-muted); line-height:1.9 }
.closing-note { max-width:32ch; margin:32px auto 0; font-family:var(--serif); font-size:clamp(1.7rem,2.5vw,2.25rem); line-height:1.3; color:var(--copper) }
.story-reference { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:36px 0 44px; border-top:1px solid #302d2a26 }
.story-reference .project-credits { display:flex; gap:64px }
.story-reference .project-credits dt { color:var(--story-muted) }
.story-reference .underlined-link { font-size:.875rem }
:is(.route-ap, .route-closet) .next-project { color:var(--story-ink); display:block }
:is(.route-ap, .route-closet) .next-project>span { display:block }
:is(.route-ap, .route-closet) .next-project>a:not(.ap-back) { display:flex; justify-content:space-between; gap:24px; align-items:center }
:is(.route-ap, .route-closet) .next-project>a.ap-back { display:inline-block; margin-top:28px; font-size:.875rem }
@media(max-width:1000px) and (min-width:761px) {
  :is(.route-ap, .route-closet) .ap-opening .stage-copy h1 { font-size:4.3rem }
  .story-chapter { gap:44px }
  .chapter-copy { padding-top:0 }
  .ap-story h2 { font-size:2.7rem }
}
@media(max-width:760px) {
  :is(.route-ap, .route-closet) .ap-opening { display:block; height:100svh; min-height:650px; max-height:960px; background:#292a27 }
  :is(.route-ap, .route-closet) .ap-opening .stage-image { position:absolute; inset:0 }
  :is(.route-ap, .route-closet) .ap-opening .stage-image:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#0002 0%,transparent 30%,#0004 54%,#000b 100%) }
  :is(.route-ap, .route-closet) .ap-opening .stage-copy { position:absolute; bottom:0; left:0; width:100%; padding:0 var(--gutter) 42px; color:white }
  :is(.route-ap, .route-closet) .ap-opening .stage-copy h1 { font-size:clamp(3.6rem,16vw,5rem); line-height:.98 }
  :is(.route-ap, .route-closet) .ap-opening .stage-copy .eyebrow { font-size:.625rem; margin-bottom:20px }
  :is(.route-ap, .route-closet) .ap-opening .stage-copy>.underlined-link { margin-top:26px; font-size:.875rem }
  :is(.route-ap, .route-closet) .ap-opening .stage-copy>.detail-return { margin-top:14px; font-size:.8125rem }
  .story-intro,.story-heading-row,.story-chapter,.light-composition { display:block }
  .story-intro { padding-top:64px; padding-bottom:42px }
  .ap-story h2 { font-size:clamp(2.5rem,10.5vw,3.25rem); line-height:1.09 }
  .story-intro .story-prose { margin-top:30px; padding:0 }
  .story-prose p { font-size:.9375rem; line-height:1.9 }
  .story-prose p+p { margin-top:20px }
  .room-track { gap:20px; margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter) }
  .room-slide { flex-basis:86% }
  .room-slide figcaption { font-size:.8125rem }
  .room-gallery { margin-bottom:76px }
  .room-controls { margin-top:22px }
  .story-heading-row .story-prose { margin-top:24px }
  .project-palette { gap:12px; margin:36px 0 34px }
  .palette-swatch { margin-bottom:12px }
  .project-palette li { font-size:.5625rem; line-height:1.4 }
  .material-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px }
  .material-sample:last-child { grid-column:1/-1; width:calc(50% - 10px); margin-inline:auto }
  .material-sample figcaption { font-size:.8125rem }
  .material-sample figcaption span { font-size:.6875rem }
  .story-materials { margin-bottom:76px }
  .story-chapter { margin-bottom:76px }
  .chapter-copy { padding-top:36px }
  .chapter-number { margin-bottom:20px }
  .chapter-copy h2,.light-copy h2 { margin-bottom:24px }
  .chapter-detail { width:66%; margin-top:28px }
  .story-light { padding:64px 0; margin-bottom:76px }
  .light-detail { width:82%; margin:34px 0 0 auto }
  .story-experience .chapter-photo { margin:0 }
  .story-closing { padding-bottom:68px }
  .ap-story .story-closing h2 { font-size:clamp(2.75rem,11vw,3.4rem); max-width:16ch; margin-bottom:28px }
  .story-closing h2 br { display:none }
  .closing-copy { font-size:.9375rem; text-align:left }
  .closing-note { font-size:1.875rem }
  .story-reference { display:block; padding:28px 0 36px }
  .story-reference .project-credits { gap:32px; justify-content:space-between; font-size:.875rem }
  .story-reference .project-credits dd { font-size:.875rem }
  .story-reference .underlined-link { margin-top:26px }
}
@media(prefers-reduced-motion:reduce) { .room-track { scroll-behavior:auto } }
html[data-motion=off] .room-track { scroll-behavior:auto }

/* Estudio: Cauanne, people and the origin of Brandi. */
.route-studio-narrative {
  --studio-ink:#501b2c;
  --studio-muted:#675c58;
  background:var(--paper);
  color:var(--studio-ink);
}

.studio-container {
  width:calc(100% - 2 * var(--gutter));
  max-width:1296px;
  margin-inline:auto;
}

.studio-opening {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(48px,7vw,112px);
  align-items:center;
  padding:24px 0 100px;
}

.studio-kicker {
  display:block;
  margin-bottom:28px;
  font-size:.6875rem;
  color:var(--copper);
  text-transform:uppercase;
  letter-spacing:.16em;
}

.studio-opening h1 {
  font-size:clamp(3.5rem,4.6vw,5.4rem);
  line-height:1.07;
  letter-spacing:-.03em;
}

.studio-opening h1 em,.studio-statement em {
  color:var(--copper);
}

.studio-invitation .underlined-link span {
  margin-left:16px;
}

.studio-opening-media,.studio-people-media,.studio-brand-media {
  padding:24px;
  background:#e7dfd4;
}

.studio-opening-media { margin:0; }

.studio-portrait-frame {
  overflow:hidden;
  width:100%;
}

.studio-portrait-frame img {
  width:100%;
  height:auto;
}

/* The photograph remains intact; the frame excludes screenshot interface edges. */
.portrait-first { aspect-ratio:563/798; }
.portrait-garden { aspect-ratio:475/796; }
.portrait-work { aspect-ratio:633/785; }

.studio-prose {
  max-width:50ch;
  color:var(--studio-muted);
}

.studio-prose p {
  font-size:1rem;
  line-height:1.9;
}

.studio-prose p+p {
  margin-top:24px;
}

.studio-prose strong {
  color:var(--studio-ink);
  font-weight:400;
}

.studio-intro {
  max-width:44ch;
  margin-top:30px;
}

.studio-intro::before {
  content:'';
  display:block;
  width:36px;
  height:1px;
  margin-bottom:22px;
  background:var(--copper);
}

.studio-intro p { line-height:1.8; }
.studio-intro p:first-child { color:var(--studio-ink); }
.studio-intro p+p { margin-top:12px; }

.studio-statement {
  font-size:clamp(2.7rem,4.1vw,4.5rem);
  line-height:1.1;
  letter-spacing:-.025em;
}

.studio-origins {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(48px,7vw,112px);
  align-items:center;
  padding:72px 0 104px;
  border-top:1px solid var(--line);
  scroll-margin-top:48px;
}

.studio-origins .studio-statement {
  padding-left:38px;
  border-left:1px solid #93503966;
}

.studio-people {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(48px,7vw,112px);
  align-items:center;
  padding-bottom:clamp(84px,9vw,144px);
}

.studio-people-copy { grid-column:2; grid-row:1; }
.studio-people-media { grid-column:1; grid-row:1; margin:0; max-width:475px; }

.studio-people .studio-statement {
  margin-top:34px;
}

.studio-brand-story {
  background:#e9e1d6;
  padding:clamp(64px,7vw,112px) 0;
}

.studio-brand-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(48px,7vw,112px);
  align-items:center;
}

.studio-brand-copy .studio-statement {
  margin-bottom:30px;
}

.studio-brand-media {
  margin:0 0 0 auto;
  width:100%;
  max-width:547px;
}

.studio-belonging {
  padding:clamp(80px,8vw,128px) 0 clamp(80px,8vw,128px);
}

.studio-belonging-copy {
  max-width:60ch;
  margin-inline:auto;
}

.studio-invitation {
  margin-top:80px;
  text-align:center;
}

.studio-closing-rule {
  display:block;
  width:48px;
  height:1px;
  margin:0 auto 36px;
  background:var(--copper);
}

.studio-invitation .studio-statement {
  max-width:27ch;
  margin-inline:auto;
  font-size:clamp(3rem,4.8vw,5rem);
}

.studio-invitation .underlined-link {
  margin-top:32px;
  font-size:.9375rem;
}

.route-studio-narrative .site-footer {
  background:var(--paper);
  color:var(--studio-muted);
  border-top:1px solid var(--line);
}

@media(max-width:1100px) and (min-width:761px) {
  .studio-opening { gap:40px; padding-bottom:64px; }
  .studio-opening h1 { font-size:3.45rem; }
  .studio-statement { font-size:2.7rem; }
  .studio-origins,.studio-people,.studio-brand-grid { gap:44px; }
  .studio-origins .studio-statement { padding-left:24px; }
}

@media(max-width:760px) {
  .studio-opening {
    display:block;
    padding:30px 0 54px;
  }

  .studio-kicker {
    margin-bottom:20px;
    font-size:.625rem;
  }

  .studio-opening h1 {
    font-size:clamp(2.55rem,11vw,3.5rem);
    line-height:1.08;
  }

  .studio-opening-media { margin-top:32px; }
  .studio-opening-media,.studio-people-media,.studio-brand-media { padding:16px; }
  .studio-origins,.studio-people,.studio-brand-grid { display:block; }
  .studio-prose p { font-size:.9375rem; line-height:1.9; }
  .studio-prose p+p { margin-top:22px; }
  .studio-intro { margin-top:24px; }
  .studio-intro::before { margin-bottom:20px; }
  .studio-intro p { line-height:1.8; }
  .studio-intro p+p { margin-top:12px; }
  .studio-statement { font-size:clamp(2.4rem,10.3vw,3.2rem); line-height:1.12; }
  .studio-origins { padding:48px 0 64px; }

  .studio-origins .studio-statement {
    margin-top:32px;
    padding:0;
    border-left:0;
  }

  .studio-origins .studio-statement br { display:none; }
  .studio-people { padding-bottom:64px; }
  .studio-people .studio-statement { margin-top:28px; }
  .studio-people-media { margin-top:36px; width:100%; }
  .studio-brand-story { padding:56px 0; }
  .studio-brand-copy .studio-statement { margin-bottom:26px; }
  .studio-brand-media { margin:36px 0 0; }
  .studio-belonging { padding:64px 0 72px; }
  .studio-invitation { margin-top:52px; }
  .studio-invitation .studio-statement { font-size:clamp(2.7rem,11.5vw,3.6rem); max-width:19ch; }
  .studio-invitation .studio-statement br { display:none; }
}

/* Processo: escuta, identidade e quatro etapas expansíveis. */
.route-process-refined {
  --process-ink:#501b2c;
  --process-muted:#675c58;
  --process-line:#501b2c24;
  background:#f3efe8;
  color:var(--process-ink);
}

.route-process-refined .process-wrap {
  width:calc(100% - 2 * var(--gutter));
  max-width:1296px;
  margin-inline:auto;
}

.route-process-refined main [id] { scroll-margin-top:112px; }

.process-eyebrow {
  display:block;
  color:var(--copper);
  font-family:var(--sans);
  font-size:.625rem;
  line-height:1.6;
  letter-spacing:.19em;
  text-transform:uppercase;
}

.process-intro { overflow:hidden; }

.process-intro-grid {
  position:relative;
  padding-top:44px;
  padding-bottom:224px;
}

.process-intro-copy { position:relative; z-index:1; }
.process-intro-copy .process-eyebrow { margin-bottom:24px; }

.route-process-refined .process-intro h1 {
  max-width:13ch;
  font-family:var(--serif);
  font-size:clamp(3rem,12.6vw,4.7rem);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.route-process-refined h1 em,
.process-origin-line em,
.process-steps-header h2 em,
.process-invitation h2 em { color:var(--copper); }

.process-intro-prose {
  max-width:55ch;
  margin-top:32px;
  color:var(--process-muted);
  font-size:.9375rem;
  line-height:1.85;
}

.process-intro-prose p+p { margin-top:16px; }
.process-intro-prose strong { color:var(--process-ink); font-weight:400; }

.process-brand-drawing {
  position:absolute;
  right:-18px;
  bottom:8px;
  width:156px;
  pointer-events:none;
}

.process-brand-drawing img {
  width:100%;
  opacity:.34;
  transform:none;
}

.motion-ready .process-brand-drawing img {
  animation:process-drawing-arrive 1.8s var(--ease) both;
}

.process-drawing-index {
  display:block;
  margin-top:12px;
  padding-right:18px;
  text-align:right;
  color:var(--process-muted);
  font-size:.625rem;
  letter-spacing:.13em;
}

@keyframes process-drawing-arrive {
  from { opacity:0; transform:translateY(18px) scale(.97); }
  to { opacity:.34; transform:translateY(0) scale(1); }
}

.process-origin {
  padding-block:54px 60px;
  background:#ebe4d9;
  border-top:1px solid #501b2c12;
  border-bottom:1px solid #501b2c12;
}

.process-origin-grid { display:grid; gap:28px; }
.process-origin-lines { max-width:100%; }

.process-origin-line {
  font-family:var(--serif);
  font-size:clamp(2rem,8.6vw,3.1rem);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.process-origin-line+.process-origin-line { margin-top:14px; }

.process-origin-note {
  max-width:42ch;
  margin-top:4px;
  font-size:.9375rem;
  line-height:1.8;
  color:var(--process-muted);
}

.process-steps { padding-top:68px; padding-bottom:68px; }
.process-steps-header { margin-bottom:38px; }
.process-steps-header .process-eyebrow { margin-bottom:20px; }

.route-process-refined .process-steps-header h2 {
  max-width:20ch;
  font-family:var(--serif);
  font-size:clamp(2.8rem,10.8vw,3.5rem);
  line-height:1.06;
  letter-spacing:-.03em;
}

.process-steps-hint {
  max-width:42ch;
  margin-top:22px;
  font-size:.8125rem;
  line-height:1.7;
  color:var(--process-muted);
}

.process-steps-grid { display:grid; gap:36px; align-items:start; }
.process-steps-media { margin:0; }

.process-steps-media img {
  width:100%;
  aspect-ratio:4 / 3;
  height:auto;
  object-fit:cover;
  object-position:center 43%;
}

.process-steps-media figcaption {
  margin-top:14px;
  font-size:.6875rem;
  line-height:1.7;
  letter-spacing:.025em;
  color:var(--process-muted);
}

.process-accordion-list { border-top:1px solid var(--process-line); min-width:0; }
.process-step { border-bottom:1px solid var(--process-line); }

.process-step-trigger {
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 24px;
  align-items:start;
  gap:14px;
  padding-block:24px;
  list-style:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.process-step-trigger::-webkit-details-marker { display:none; }
.process-step-trigger::marker { content:''; }

.process-step-number {
  padding-top:7px;
  color:var(--copper);
  font-family:var(--sans);
  font-size:.6875rem;
  line-height:1.7;
  letter-spacing:.06em;
}

.process-step-heading { display:block; min-width:0; }

.process-step-title {
  display:block;
  margin:0;
  font-family:var(--serif);
  font-size:2.125rem;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.025em;
}

.process-step-lead {
  display:block;
  max-width:38ch;
  margin-top:12px;
  color:var(--process-muted);
  font-size:.875rem;
  line-height:1.7;
}

.process-step-toggle {
  position:relative;
  width:24px;
  height:24px;
  margin-top:7px;
  color:var(--copper);
}

.process-step-toggle::before,
.process-step-toggle::after {
  content:'';
  position:absolute;
  inset-block-start:11px;
  inset-inline-start:4px;
  width:16px;
  height:1px;
  background:currentColor;
}

.process-step-toggle::after {
  transform:rotate(90deg);
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}

.process-step[open] .process-step-toggle::after { opacity:0; transform:rotate(0); }
.process-step[open] .process-step-title { color:var(--copper); }
.process-step-panel { padding:0 0 30px 38px; }

.process-step-body {
  max-width:55ch;
  padding-left:18px;
  border-left:1px solid #93503959;
  color:var(--process-muted);
  font-size:.9375rem;
  line-height:1.85;
}

.process-step-body p+p { margin-top:20px; }
.process-step-body strong { color:var(--process-ink); font-weight:400; }

.process-step-body .process-step-thought {
  margin-top:26px;
  font-family:var(--serif);
  font-size:1.65rem;
  line-height:1.25;
  color:var(--copper);
}

.process-step[open] .process-step-panel { animation:process-panel-arrive .25s var(--ease) both; }

@keyframes process-panel-arrive {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}

.process-invitation {
  padding-top:16px;
  padding-bottom:76px;
  text-align:center;
}

.process-invitation-rule {
  display:block;
  width:54px;
  height:1px;
  margin:0 auto 36px;
  background:#93503980;
}

.route-process-refined .process-invitation h2 {
  max-width:24ch;
  margin-inline:auto;
  font-family:var(--serif);
  font-size:clamp(2.75rem,11vw,4rem);
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.process-invitation .underlined-link { margin-top:28px; padding-block:12px; }
.process-invitation .underlined-link span { margin-left:16px; }

.route-process-refined .site-footer {
  background:#f3efe8;
  color:var(--process-muted);
  border-top:1px solid var(--process-line);
}

@media(min-width:761px) {
  .process-intro-grid {
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(40px,7vw,100px);
    align-items:center;
    padding-top:64px;
    padding-bottom:90px;
  }
  .route-process-refined .process-intro h1 { font-size:clamp(3.6rem,5.8vw,6rem); }
  .process-intro-prose { margin-top:36px; font-size:1rem; }
  .process-brand-drawing { position:relative; inset:auto; width:100%; max-width:clamp(320px,28vw,400px); justify-self:end; }
  .process-brand-drawing img { opacity:.65; }
  .process-drawing-index { margin-top:26px; padding-right:0; }
  @keyframes process-drawing-arrive {
    from { opacity:0; transform:translateY(18px) scale(.97); }
    to { opacity:.65; transform:translateY(0) scale(1); }
  }
  .process-origin { padding-block:70px 78px; }
  .process-origin-grid { grid-template-columns:minmax(130px,.4fr) minmax(0,1fr); column-gap:clamp(32px,6vw,88px); row-gap:30px; }
  .process-origin-grid>.process-eyebrow { padding-top:8px; }
  .process-origin-lines { max-width:none; }
  .process-origin-line { font-size:clamp(2.3rem,3.45vw,3.5rem); }
  .process-origin-line+.process-origin-line { margin-top:12px; }
  .process-origin-note { grid-column:2; max-width:55ch; font-size:1rem; }
  .process-steps { padding-top:90px; padding-bottom:94px; }
  .process-steps-header { margin-bottom:50px; }
  .route-process-refined .process-steps-header h2 { font-size:clamp(3rem,4.4vw,4.75rem); }
  .process-steps-grid { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(38px,6vw,90px); }
  .process-steps-media { position:sticky; top:120px; }
  .process-steps-media img { aspect-ratio:3 / 4; object-position:center 48%; }
  .process-step-trigger { grid-template-columns:30px minmax(0,1fr) 24px; gap:20px; padding-block:26px; }
  .process-step-title { font-size:2.5rem; }
  .process-step-number,.process-step-toggle { margin-top:4px; }
  .process-step-lead { font-size:.9375rem; }
  .process-step-panel { padding-left:50px; padding-bottom:36px; }
  .process-step-body { font-size:1rem; padding-left:24px; }
  .process-step-body .process-step-thought { font-size:1.875rem; }
  .process-invitation { padding-top:14px; padding-bottom:104px; }
  .route-process-refined .process-invitation h2 { font-size:clamp(3.3rem,5vw,5.25rem); }
}

@media(min-width:1101px) {
  .process-intro-grid { padding-top:64px; padding-bottom:80px; }
  .process-origin { padding-block:86px 94px; }
  .process-steps { padding-top:110px; padding-bottom:116px; }
  .process-steps-header { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:clamp(38px,6vw,90px); }
  .process-steps-header .process-eyebrow { grid-column:1; margin-bottom:22px; }
  .process-steps-header h2 { grid-column:1; }
  .process-steps-hint { grid-column:2; grid-row:2; align-self:end; margin-top:0; margin-bottom:6px; }
}

@media(hover:hover) and (pointer:fine) {
  .process-step-trigger:hover .process-step-title { color:var(--copper); }
}

html[data-motion=off] .route-process-refined .process-brand-drawing img,
html[data-motion=off] .route-process-refined .process-step-panel,
html[data-motion=off] .route-process-refined .process-step-toggle::after { animation:none!important; transition:none!important; }

@media(prefers-reduced-motion:reduce) {
  .route-process-refined .process-brand-drawing img,
  .route-process-refined .process-step-panel,
  .route-process-refined .process-step-toggle::after { animation:none!important; transition:none!important; }
}

/* Directional navigation: stable layout on Estudio, Processo and Contato. */
.has-scroll-header {
  --nav-height:124px;
  padding-top:var(--nav-height);
}
.has-scroll-header .site-header,
.has-scroll-header .site-header.scrolled {
  position:fixed!important;
  inset:0 0 auto;
  height:var(--nav-height);
  padding:20px var(--gutter);
  background:var(--paper)!important;
  color:var(--wine)!important;
  box-shadow:none;
  backdrop-filter:none;
  animation:none;
  transform:translateY(0);
  transition:transform 260ms var(--ease);
}
.has-scroll-header .site-header.scrolled { box-shadow:0 1px 0 var(--line); }
.has-scroll-header .site-header .brand,
.has-scroll-header .site-header.scrolled .brand { width:142px; }
.has-scroll-header .site-header .brand img { filter:none; }
.has-scroll-header .site-header.header-is-hidden {
  transform:translateY(calc(-100% - 1px));
  pointer-events:none;
}
.has-scroll-header.menu-open .site-header {
  transform:none;
  transition:none;
  pointer-events:auto;
}
.has-scroll-header main:focus,
.has-scroll-header footer a { scroll-margin-top:calc(var(--nav-height) + 20px); }

/* Keep the content's natural height, including at short desktop viewports. */
.route-contact.has-scroll-header .contact-stage {
  height:auto;
  min-height:max(650px, calc(100svh - var(--nav-height)));
}

@media(max-width:760px) {
  .has-scroll-header { --nav-height:96px; }
  .has-scroll-header .site-header,
  .has-scroll-header .site-header.scrolled { padding:15px var(--gutter); }
  .has-scroll-header .site-header .brand,
  .has-scroll-header .site-header.scrolled .brand { width:116px; }
  .has-scroll-header .mobile-nav,
  .has-scroll-header .site-header.scrolled .mobile-nav {
    top:var(--nav-height);
    height:calc(100dvh - var(--nav-height));
  }
  .route-contact.has-scroll-header .contact-stage {
    min-height:calc(100svh - var(--nav-height));
  }
}
@media(prefers-reduced-motion:reduce) {
  .has-scroll-header .site-header { transition:none; }
}
html[data-motion=off] .has-scroll-header .site-header { transition:none; }

/* Immersive project gallery: the image is the interface. */
.route-detail .stage-image .project-image-open {
  display:block; width:100%; height:100%; padding:0; cursor:zoom-in;
}
.route-detail .stage-copy { pointer-events:none; }
.route-detail .stage-copy a,.route-detail .stage-copy button { pointer-events:auto; }
.route-detail [data-gallery-index] { cursor:zoom-in; }
.route-detail .room-enlarge-label { display:none; }
.lightbox.immersive-gallery {
  position:fixed; inset:0; width:100vw; height:100dvh;
  max-width:none; max-height:none; margin:0; padding:0; border:0;
  color:#f3efe8; background:#171713f5; overflow:hidden;
  overscroll-behavior:contain;
}
.lightbox.immersive-gallery::backdrop { background:#171713d9; backdrop-filter:blur(5px); }
.immersive-gallery .lightbox-media {
  position:absolute; inset:0; min-height:0;
  background:transparent; overflow:hidden; touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.immersive-gallery .lightbox-image {
  position:absolute; left:50%; top:50%;
  width:auto; height:auto; max-width:none; max-height:none;
  margin:0; object-fit:contain; transform-origin:center;
  transform:translate(-50%,-50%); opacity:0;
  transition:opacity 160ms ease; cursor:zoom-in;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.immersive-gallery .lightbox-image.is-ready { opacity:1; }
.immersive-gallery .lightbox-image.is-zoomed { cursor:grab; }
.immersive-gallery .lightbox-media:active .lightbox-image.is-zoomed { cursor:grabbing; }
.immersive-gallery .lightbox-close,
.immersive-gallery .gallery-prev,
.immersive-gallery .gallery-next {
  position:absolute; z-index:2; display:grid; place-items:center;
  width:48px; height:48px; min-height:48px; padding:0;
  border:1px solid #f3efe835; border-radius:50%;
  color:#f3efe8; background:#171713b3;
  transition:background-color 160ms ease;
}
.immersive-gallery .lightbox-close { top:calc(16px + env(safe-area-inset-top,0px)); right:16px; }
.immersive-gallery .gallery-prev { top:calc(50% - 24px); left:12px; }
.immersive-gallery .gallery-next { top:calc(50% - 24px); right:12px; }
.immersive-gallery button:hover { background:#171713e6; }
.immersive-gallery button:focus-visible { outline:2px solid #f3efe8; outline-offset:4px; }
.immersive-gallery .gallery-loading {
  inset:0; color:#f3efe8; background:transparent; pointer-events:none;
}
.gallery-status {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
@media(min-width:761px) {
  .immersive-gallery .lightbox-close { top:24px; right:24px; }
  .immersive-gallery .gallery-prev { left:24px; }
  .immersive-gallery .gallery-next { right:24px; }
}
@media(prefers-reduced-motion:reduce) {
  .immersive-gallery .lightbox-image,.immersive-gallery button { transition:none; }
}
html[data-motion=off] .immersive-gallery .lightbox-image,
html[data-motion=off] .immersive-gallery button { transition:none; }

/* Contact: one continuous wine field, with an inviting Instagram link. */
.route-contact {
  background:var(--wine);
  color:var(--paper);
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.route-contact main { flex:1; }
.route-contact .site-header,
.route-contact.has-scroll-header .site-header,
.route-contact.has-scroll-header .site-header.scrolled {
  background:var(--wine)!important;
  color:var(--paper)!important;
  box-shadow:none;
}
.route-contact .site-header .brand img { filter:brightness(0) invert(1); }
.route-contact .desktop-nav a:after { opacity:.65; }
.route-contact .contact-stage,
.route-contact.has-scroll-header .contact-stage {
  position:relative;
  height:auto;
  min-height:max(520px, calc(100svh - var(--nav-height,124px) - 88px));
  background:var(--wine);
  color:var(--paper);
  isolation:isolate;
}
.route-contact .contact-stage .stage-copy {
  position:relative;
  inset:auto;
  z-index:1;
  padding:clamp(48px,7vh,88px) var(--gutter) 84px;
  max-width:960px;
  transform:none;
}
.route-contact .contact-stage .eyebrow {
  color:#dcc2c8;
  font-size:.6875rem;
  letter-spacing:.18em;
  margin-bottom:26px;
}
.route-contact .contact-stage h1 {
  max-width:780px;
  font-size:clamp(3.75rem,6.2vw,6.5rem);
  line-height:1.07;
  letter-spacing:-.025em;
  text-shadow:none;
  text-wrap:balance;
}
.route-contact .contact-stage h1 em { color:var(--paper); }
.route-contact .contact-stage .contact-link {
  display:grid;
  grid-template-columns:24px 96px 18px;
  align-items:center;
  gap:16px;
  min-height:52px;
  width:fit-content;
  max-width:100%;
  padding:8px 0;
  margin-top:42px;
  border:0;
  color:var(--paper);
  font-size:1.125rem;
  font-weight:400;
  line-height:1.35;
}
.contact-instagram-icon { width:24px; height:24px; flex:none; }
.contact-account {
  justify-self:start;
  padding:4px 0;
  white-space:nowrap;
  border-bottom:1px solid #f3efe86b;
  transition:border-color 220ms var(--ease);
}
.contact-link-arrow {
  width:18px;
  height:18px;
  flex:none;
  margin-left:0;
  transition:transform 220ms var(--ease);
}
.route-contact .contact-link:hover .contact-account { border-color:var(--paper); }
.route-contact .contact-link:hover .contact-link-arrow { transform:translate(2px,-2px); }
.route-contact a:focus-visible,
.route-contact button:focus-visible { outline-color:var(--paper); }
.route-contact .contact-stage .stage-subtitle {
  max-width:350px;
  margin-top:12px;
  color:#e1cbd1;
  font-size:.8125rem;
  line-height:1.65;
}
/* Contact phone: a discreet companion to the Instagram link. */
.route-contact .contact-stage .contact-phone {
  display:grid;
  grid-template-columns:24px 96px 18px;
  align-items:center;
  gap:16px;
  min-height:52px;
  width:fit-content;
  max-width:100%;
  margin-top:8px;
  padding:8px 0;
  color:var(--paper);
  font-size:1.125rem;
  font-weight:400;
  line-height:1.35;
  text-decoration:none;
}
.route-contact .contact-phone-icon { width:24px; height:24px; flex:none; }
.route-contact .contact-phone-number {
  justify-self:start;
  padding:4px 0;
  white-space:nowrap;
  border-bottom:1px solid #f3efe86b;
  transition:border-color 220ms var(--ease);
}
.route-contact .contact-phone-arrow {
  width:18px;
  height:18px;
  flex:none;
  margin-left:0;
  transition:transform 220ms var(--ease);
}
.route-contact .contact-phone:hover .contact-phone-number { border-color:var(--paper); }
.route-contact .contact-phone:hover .contact-phone-arrow { transform:translate(2px,-2px); }
@media(max-width:760px) {
  .route-contact .contact-stage .contact-phone { gap:12px; }
  .route-contact .contact-phone-arrow { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) {
  .route-contact .contact-phone-number,.route-contact .contact-phone-arrow { transition:none; }
}
html[data-motion=off] .route-contact .contact-phone-number,
html[data-motion=off] .route-contact .contact-phone-arrow { transition:none; }
/* End contact phone styles. */
.route-contact .contact-stage .contact-region {
  display:block;
  margin-top:40px;
  color:#e1cbd1;
  font-size:.75rem;
  letter-spacing:.015em;
}
.route-contact .contact-symbol {
  z-index:0;
  right:-5%;
  top:auto;
  bottom:-105px;
  width:clamp(390px,43vw,680px);
  opacity:.075;
  transform:none;
}
.route-contact .contact-symbol img { filter:brightness(0) invert(1); }
.route-contact .site-footer {
  position:relative;
  flex:none;
  background:var(--wine);
  color:#e1cbd1;
  border:0;
  gap:16px 32px;
  padding:22px var(--gutter);
  font-size:.75rem;
  line-height:1.6;
}
.route-contact .site-footer:before {
  content:'';
  position:absolute;
  top:0;
  left:var(--gutter);
  right:var(--gutter);
  border-top:1px solid #f3efe826;
}
.route-contact .site-footer>div { gap:24px; flex-wrap:wrap; }
.route-contact .site-footer a,
.route-contact .site-footer button {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0;
  font-size:inherit;
}
.route-contact .site-footer button:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}
.route-contact .site-footer .motion-pref { display:none; }
.has-js .route-contact .site-footer .motion-pref { display:inline-flex; }
body.route-contact.menu-open .site-header,
body.route-contact.has-scroll-header.menu-open .site-header {
  background:var(--paper)!important;
  color:var(--wine)!important;
}
body.route-contact.menu-open .site-header .brand img { filter:none!important; }
body.route-contact.menu-open .site-header :focus-visible { outline-color:var(--wine); }
@media(max-width:760px) {
  .route-contact .contact-stage,
  .route-contact.has-scroll-header .contact-stage {
    min-height:max(500px, calc(100svh - var(--nav-height,96px) - 116px));
  }
  .route-contact .contact-stage .stage-copy {
    padding:42px var(--gutter) 88px;
    max-width:580px;
  }
  .route-contact .contact-stage .eyebrow { margin-bottom:24px; }
  .route-contact .contact-stage h1 {
    font-size:clamp(2.5rem,10.8vw,4.25rem);
    max-width:510px;
    line-height:1.12;
  }
  .route-contact .contact-stage .contact-link { gap:12px; margin-top:34px; min-height:52px; }
  .contact-link-arrow { margin-left:0; }
  .route-contact .contact-stage .contact-region { margin-top:32px; }
  .route-contact .contact-symbol { right:-108px; bottom:-105px; width:360px; opacity:.08; }
  .route-contact .site-footer { align-items:flex-start; gap:8px; padding:20px var(--gutter) 24px; }
  .route-contact .site-footer>div { gap:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .route-contact .contact-account,.route-contact .contact-link-arrow { transition:none; }
}
html[data-motion=off] .route-contact .contact-account,
html[data-motion=off] .route-contact .contact-link-arrow { transition:none; }

/* Privacy preference controls, scoped to the existing legal page. */
.legal-page .analytics-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 28px;
  margin:20px 0 14px;
}
.legal-page .analytics-controls .underlined-link { min-height:44px; }
.legal-page .analytics-controls [aria-pressed=true] { border-bottom-color:var(--copper); color:var(--copper); }
.legal-page .analytics-status { font-size:.875rem; line-height:1.6; }
/* /Privacy preference controls. */

/* Closet: the same editorial components as AP Entre Tons, with its own imagery. */
.route-closet .closet-opening .stage-image img { object-position:center 48%; }
.route-closet .room-caption { display:block; color:var(--story-muted); font-size:inherit; }
.route-closet .closet-gallery-key { display:flex; flex-wrap:wrap; gap:8px 26px; margin:0 0 18px; color:var(--story-muted); font-size:.6875rem; line-height:1.5; letter-spacing:.04em; }
.route-closet .project-photo-caption { margin-top:14px; color:var(--story-muted); font-size:.75rem; line-height:1.6; }

/* Each narrative image is a distinct source viewport. Full originals stay in
   the gallery; the native source is used here so responsive thumbnails are
   never enlarged into detail crops. Dimensions in HTML remain source-correct. */
.route-closet .closet-focus { position:relative; overflow:hidden; aspect-ratio:var(--focus-ratio); background:#302d2a; }
.route-closet .closet-focus img { position:absolute; left:var(--focus-left); top:var(--focus-top); width:var(--focus-width); max-width:none; height:auto; aspect-ratio:auto; object-fit:initial; object-position:initial; }

/* Keep the execution views below their usable native crop width. This also
   gives the text and photograph a balanced measure after removing duplicates. */
.route-closet .story-chapter { max-width:1080px; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:clamp(40px,6vw,100px); align-items:center; }
.route-closet .story-chapter .chapter-copy { padding-top:0; }
.route-closet .closet-lines .chapter-photo { width:100%; max-width:440px; }
.route-closet .closet-routine { grid-template-columns:minmax(0,1fr) minmax(0,380px); }
.route-closet .closet-routine .chapter-photo { width:100%; max-width:380px; }
.route-closet .closet-light-focus { width:100%; max-width:620px; }
.route-closet .story-materials { margin-bottom:clamp(68px,8vw,120px); }
.route-closet .project-palette { margin-bottom:0; }

/* The supplied opening portrait is 472 x 732px. On desktop, an editorial
   portrait frame protects that resolution instead of stretching it across
   59% of a wide display. The charcoal field and type continue the AP language;
   the composition remains centered on wide monitors, and mobile is untouched. */
@media(min-width:761px) {
  .route-closet .closet-opening {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,92px);
    padding-inline:max(var(--gutter),calc((100vw - 1160px) / 2));
  }
  .route-closet .closet-opening .stage-image {
    display:grid;
    place-items:center;
    padding-block:120px 60px;
    background:#292a27;
    overflow:visible;
  }
  .route-closet .closet-opening .stage-image .project-image-open {
    width:min(100%,472px,calc((min(980px,100svh) - 180px) * .6448087432));
    height:auto;
    aspect-ratio:472 / 732;
    box-shadow:0 0 0 1px #f3efe82b;
  }
  .route-closet .closet-opening .stage-image img {
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
  .route-closet .closet-opening .stage-copy {
    padding:130px 0 70px;
  }
  .route-closet .closet-opening .stage-copy h1 {
    font-size:clamp(4.3rem,6.2vw,6.5rem);
  }
}

@media(max-width:1000px) and (min-width:761px) {
  .route-closet .story-chapter { grid-template-columns:1fr 1fr; gap:40px; }
}
@media(max-width:760px) {
  .route-closet .closet-gallery-key { margin-bottom:16px; gap:6px 18px; font-size:.625rem; }
  .route-closet .story-chapter { display:block; }
  .route-closet .story-chapter .chapter-photo { margin-inline:auto; }
  .route-closet .story-chapter .chapter-copy { padding-top:34px; }
  .route-closet .closet-light-focus { width:100%; margin:32px 0 0; }
  .route-closet .project-photo-caption { font-size:.6875rem; margin-top:12px; }
  .route-closet .story-materials { margin-bottom:70px; }
}
/* /Closet imagery */

/* Madeira & verde: a static close view of wood, light and textiles. */
.route-quarto .quarto-opening .stage-image { position:relative; }
.route-quarto .quarto-opening .stage-image img {
  object-position:left 100%;
  transform:scale(1.12);
  transform-origin:30% 90%;
}
@media(max-width:760px) {
  .route-quarto .quarto-opening .stage-image img {
    transform:scale(1.45);
    transform-origin:30% 85%;
  }
}
/* /Madeira opening */

/* BRAND REFRESH BEGIN */
/* Supplied brand artwork, in the existing wine/copper/white palette. */
.site-header .brand img {
  aspect-ratio:1078 / 392;
  object-fit:contain;
}
.mobile-nav-brand { display:none; }
.site-footer>div { gap:20px; }
.site-footer .footer-instagram {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  margin:-8px 0;
  color:inherit;
  text-decoration:none;
  flex:none;
}
.site-footer .footer-instagram svg {
  display:block;
  width:20px;
  height:20px;
}
.site-footer .footer-instagram:hover {
  color:var(--wine);
  text-decoration:none;
}
.route-contact .site-footer .footer-instagram:hover { color:var(--paper); }

@media(max-width:760px) {
  .mobile-nav {
    justify-content:flex-start;
    padding-top:clamp(32px,12dvh,110px);
    padding-bottom:calc(clamp(28px,4dvh,46px) + env(safe-area-inset-bottom,0px));
    overflow-y:auto;
    overscroll-behavior-y:contain;
  }
  .mobile-nav>a { flex:none; }
  .mobile-nav .mobile-nav-brand {
    display:block;
    align-self:center;
    width:108px;
    margin: auto 0 0;
    flex:none;
  }
  .mobile-nav-brand img {
    width:100%;
    height:auto;
    aspect-ratio:865 / 810;
    filter:none;
  }
  .mobile-nav.open>a:nth-of-type(1) { animation-delay:0s; }
  .mobile-nav.open>a:nth-of-type(2) { animation-delay:.06s; }
  .mobile-nav.open>a:nth-of-type(3) { animation-delay:.12s; }
  .mobile-nav.open>a:nth-of-type(4) { animation-delay:.18s; }
  .mobile-nav.open>a:nth-of-type(5) { animation-delay:.24s; }
  .site-footer { gap:14px; }
  .site-footer>div { gap:14px; }
}
@media(max-width:760px) and (max-height:680px) {
  .mobile-nav {
    justify-content:flex-start;
    padding:24px var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));
    gap:12px;
  }
  .mobile-nav .mobile-nav-brand { width:80px; }
  .mobile-nav>a:not(.nav-instagram) { font-size:2.35rem; }
  .mobile-nav .nav-instagram { margin-top:14px; }
}
/* BRAND REFRESH END */