body { isolation: isolate; }
#kitchen-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  z-index: 0;
  clip-path: none;
  transition: none;
}
#kitchen-stage canvas { cursor: default; }
main { position: relative; z-index: 1; pointer-events: none; }
main > section { pointer-events: auto; }
main > .hero { isolation: auto; pointer-events: none; }
.hero-bottom { pointer-events: auto; }
.site-footer { position: relative; z-index: 1; background: rgba(13, 16, 14, .92); }
.page-away #kitchen-stage { pointer-events: none; }
.scene-loading { top: 48%; left: 70%; }
.scene-ready .scene-loading, .scene-failed .scene-loading { visibility: hidden; }
#scene-fallback { inset: 12% 0 8% auto; width: 67%; height: 80%; object-fit: contain; }

.site-header > .brand, .site-footer > .brand, .signature-mark {
  position: relative;
  display: block;
  overflow: hidden;
  width: 195px;
  height: 72px;
  flex-shrink: 0;
}
.original-logo {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(-50%);
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: .93;
}
.site-footer > .brand { width: 172px; height: 62px; }
.signature-mark { width: 108px; height: 42px; }
.desktop-nav a[aria-current] { color: var(--accent); }
.desktop-nav a[aria-current]:after { width: 100%; }

.intro-band { background: rgba(15, 19, 16, .76); }
.projects { background: rgba(12, 16, 13, .70); }
.offer { background: rgba(18, 23, 19, .80); }
.about { background: rgba(12, 17, 13, .77); }
.process { background: rgba(12, 17, 13, .73); }
.contact { background: rgba(19, 27, 21, .80); }
.about-copy > p:not(.eyebrow):not(.service-area), .offer-intro > p:not(.eyebrow), .offer-list details > div,
.process-grid article > p, .section-heading > p, .contact-copy > p:not(.eyebrow) { color: #b6beb0; }
.section-heading .eyebrow, .offer-intro .eyebrow, .about-copy .eyebrow, .contact-copy .eyebrow { color: #a8b69b; }
.js .reveal { opacity: 1; transform: none; transition: none; }
.project-photo { transform-origin: center; }
.project-meta > span:first-child { color: #eeefe8; }
.about-image { container-type: size; }
/* Frame the photo inside its baked-in letterbox, keeping the mirror reflection near the top. */
.about-image img {
  --photo-width: max(100cqw, 80.17cqh);
  width: var(--photo-width);
  max-width: none;
  height: auto;
  left: 50%;
  top: calc((100cqh - var(--photo-width) * 1.24736) * .12 - var(--photo-width) * .45877);
  transform: translateX(-50%);
}

.stone-light-control { gap: 10px; }
.stone-light-control .finish-label { min-width: 97px; margin-right: 9px; cursor: pointer; }
.stone-light-control > svg { width: 16px; height: 16px; color: #c4ae89; }
#stone-light {
  width: 105px;
  height: 24px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  background: transparent;
  accent-color: #d2b674;
}
#stone-light::-webkit-slider-runnable-track { height: 2px; background: #8a784d; }
#stone-light::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; border: 2px solid #171a13; border-radius: 50%; background: #e1c47f; margin-top: -4.5px; outline: 1px solid #9f8c61; }
#stone-light::-moz-range-track { height: 2px; background: #8a784d; }
#stone-light::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid #171a13; border-radius: 50%; background: #e1c47f; }
#stone-light:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.page-progress { position: fixed; z-index: 30; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; }
.page-progress > span { display: block; width: 100%; height: 100%; background: #c9ad70; transform: scaleX(0); transform-origin: left; }
.ambient-controls { position: fixed; z-index: 15; right: 24px; bottom: 22px; display: flex; gap: 2px; background: #11180eef; border: 1px solid #ffffff2b; box-shadow: 0 4px 20px #0004; }
.ambient-controls[hidden] { display: none; }
.ambient-controls .icon-button { width: 38px; height: 38px; }
.ambient-controls [data-tooltip]:after { left: auto; right: 0; transform: none; }
.hero-description { max-width: 320px; color: #bbc0b4; }
.hero-copy { width: 500px; }
.hero-copy h1 { font-size: 72px; }
.scene-caption { color: #9c9e91; }

@media (min-width: 1600px) {
  .hero-copy { width: 610px; }
  .hero-copy h1 { font-size: 88px; }
  .site-header > .brand { width: 215px; height: 78px; }
}
@media (max-width: 1199px) {
  .site-header > .brand { width: 175px; height: 68px; }
  .hero-copy { width: 435px; }
  .hero-copy h1 { font-size: 63px; }
  .stone-light-control .finish-label { min-width: 88px; margin-right: 2px; }
  #stone-light { width: 85px; }
}
@media (max-width: 899px) {
  .hero-copy { width: 90%; }
  .hero-copy h1 { font-size: 62px; }
  .scene-loading { left: 50%; top: 65%; }
  #scene-fallback { inset: 35% 0 13%; width: 100%; height: 52%; }
  .site-footer > .brand { width: 172px; }
}
@media (max-width: 599px) {
  .site-header > .brand { width: 140px; height: 59px; }
  .header-contact { font-size: 9px; gap: 8px; }
  .hero-copy h1 { font-size: 47px; }
  .hero-copy { width: 88%; }
  .hero { min-height: 650px; }
  .hero-description { max-width: 285px; }
  .scene-caption { display: none; }
  .stone-light-control { gap: 7px; }
  .stone-light-control .finish-label { min-width: 79px; margin-right: 1px; }
  .stone-light-control .finish-label > span { font-size: 6px; }
  .stone-light-control > svg { width: 12px; height: 12px; }
  #stone-light { width: 70px; }
  .site-footer > .brand { width: calc(100% - 42px); height: 62px; }
  .site-footer > .brand > img { width: 172px; }
  .ambient-controls { right: 12px; bottom: 12px; }
  .ambient-controls .icon-button { width: 35px; height: 35px; }
  .projects { background: rgba(12, 16, 13, .76); }
}
@media (max-width: 359px) {
  .site-header > .brand { width: 121px; height: 55px; }
  .hero-copy h1 { font-size: 41px; }
  .stone-light-control { gap: 5px; }
  #stone-light { width: 51px; }
}
@media (prefers-reduced-motion: reduce) {
  #kitchen-stage { transition: none; }
  .js .reveal { opacity: 1; transform: none; }
}
