/* Retain the photographed elevation and overlay only the selected finishes. */
.hero {
  --right-split: 39.84375%;
  --floor-start: 92.1875%;
  --caption-return: 0px;
  --joint-size: 3px;
  --joint-half: calc(var(--joint-size) / 2);
}

.composition-panel {
  position: absolute;
  overflow: hidden;
}

.composition-panel > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.composition-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, #fff4dd0b, transparent 58%, #27201413);
  box-shadow: inset 1px 1px 1px #fff5e526, inset -1px -1px 2px #2b231726;
}

.panel-wood {
  left: calc(var(--wood-start) + var(--joint-half));
  right: calc(100% - var(--bronze-start) + var(--joint-half));
  top: 0;
  bottom: calc(100% - var(--inlay-top) + var(--joint-half));
}

.panel-upper {
  left: calc(var(--bronze-start) + var(--joint-half));
  right: 0;
  top: 0;
  bottom: calc(100% - var(--right-split) + var(--joint-half));
}

.panel-middle {
  left: calc(var(--bronze-start) + var(--joint-half));
  right: 0;
  top: calc(var(--right-split) + var(--joint-half));
  bottom: calc(100% - var(--inlay-top) + var(--joint-half));
}

.panel-lower-left,
.panel-lower-middle,
.panel-lower-right {
  top: calc(var(--inlay-top) + var(--joint-half));
  bottom: calc(100% - var(--floor-start) + var(--joint-half));
}

.panel-lower-left { left: 0; right: calc(100% - var(--wood-start) + var(--joint-half)); }
.panel-lower-middle { left: calc(var(--wood-start) + var(--joint-half)); right: calc(100% - var(--bronze-start) + var(--joint-half)); }
.panel-lower-right { left: calc(var(--bronze-start) + var(--joint-half)); right: 0; }
.panel-lower-left::after { background: linear-gradient(112deg, #fff5e62e, #fff5e60a); }

html[data-palette='04'] .site-header:not(.is-scrolled) .menu-toggle { color: var(--ink); }

/* Recessed joints: a narrow dark core, a lit edge, and a restrained shadow.
   One joint per meeting avoids doubling the apparent gap. */
.material-joint {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.joint-vertical {
  width: var(--joint-size);
  transform: translateX(-50%);
  background: linear-gradient(90deg, #8b7c65, #3e3227 42%, #4e4030 72%, #a3967f);
  box-shadow: -.5px 0 .5px #faf0db80, 1px 0 1.5px #21170f45;
}

.joint-horizontal {
  height: var(--joint-size);
  transform: translateY(-50%);
  background: linear-gradient(#96866d, #443629 35%, #352a20 70%, #a4967f);
  box-shadow: 0 -.5px .5px #faf0db80, 0 1px 1.5px #21170f45;
}

.joint-wood-top { left: var(--wood-start); top: 0; bottom: calc(100% - var(--inlay-top) + var(--caption-return)); }
.joint-right-top { left: var(--bronze-start); top: 0; bottom: calc(100% - var(--inlay-top) + var(--caption-return)); }
.joint-right-split { left: var(--bronze-start); right: 0; top: var(--right-split); }
.joint-main { left: 0; right: 0; top: var(--inlay-top); }
.joint-wood-bottom { left: var(--wood-start); top: var(--inlay-top); bottom: calc(100% - var(--floor-start)); }
.joint-right-bottom { left: var(--bronze-start); top: var(--inlay-top); bottom: calc(100% - var(--floor-start)); }
.joint-floor { left: 0; right: 0; top: var(--floor-start); }
.joint-return { display: none; }

.caption-stone-return { display: none; }

/* Three message studies. Explore and the X symbols keep their approved sizes. */
.hero .hero-partner { font-weight: 700; }
.hero .hero-services-mobile { display: none; }
.hero .hero-partner-seam {
  position: absolute;
  z-index: 4;
  left: calc(var(--gutter) - 12px);
  right: calc(var(--gutter) - 12px);
  bottom: calc(100% - var(--inlay-top) + 24px);
  margin: 0;
  white-space: nowrap;
}

html[data-message='10'] .hero .hero-partner-seam,
html:not([data-message='10']) .hero .hero-partner-explore,
html[data-message='11'] .hero-partner-seam > svg { display: none; }

/* Selected message 10: the partner statement is above Explore.
   Manrope's cap height at 32px is 23.04px, exceeding the 22px circle. */
html[data-message='10'] .hero .hero-foot {
  width: calc(var(--wood-start) - var(--gutter) + 9px);
  z-index: 5;
}

/* One continuous axis from the opening marks, across the floor, into the
   existing chapter marker. The circles sit above the line. */
.hero-continuation { display: none; }

html[data-message='10'] .hero-continuation {
  display: block;
  position: absolute;
  z-index: 4;
  pointer-events: none;
  left: var(--spine-x, calc(var(--gutter) - 12px + var(--opening-x-size) / 2));
  top: var(--spine-start, 100%);
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--copper);
}

html[data-message='10'] .hero .hero-foot > .eyebrow {
  margin-left: calc(var(--opening-x-size) + var(--opening-label-gap));
}

html[data-message='10'] .stone-bridge .bridge-line {
  left: var(--spine-x, calc(var(--gutter) - 12px + var(--opening-x-size) / 2));
  transform: translateX(-50%);
}

html[data-message='10'] .stone-bridge > svg {
  left: calc(var(--spine-x, var(--gutter)) - var(--opening-wayfinding-size) / 2);
}

html[data-message='10'] .hero .hero-partner-explore {
  margin: 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.12;
}

html[data-message='10'] .hero-partner-explore .hero-copy-line {
  display: inline-block;
}

@media (min-width: 761px) and (max-width: 1100px) {
  html[data-message='10'] .hero .hero-foot {
    bottom: calc(7.8125% + 6px);
  }

  html[data-message='10'] .hero .hero-foot .eyebrow {
    margin-top: 8px;
  }
}

@media (max-width: 760px) {
  .hero { --right-split: 39.848384%; --joint-size: 2px; }

  html[data-message='10'] .hero .hero-foot {
    width: calc(var(--wood-start) - var(--gutter) + 5px);
    bottom: 8%;
    display: flex;
    flex-direction: column;
  }

  html[data-message='10'] .hero .hero-foot > .eyebrow {
    display: none;
  }

  html[data-message='10'] .hero .hero-services-mobile {
    display: block;
    position: absolute;
    z-index: 4;
    left: calc(var(--gutter) - 8px);
    width: calc(var(--wood-start) - var(--gutter) - 4px);
    bottom: calc(100% - var(--inlay-top) + 20px);
    font-weight: 700;
    letter-spacing: normal;
    text-wrap: balance;
  }

  .hero-services-mobile > span {
    display: inline-block;
  }

  html[data-message='10'] .hero .hero-partner-explore {
    display: flex;
    /* Close the visual gap while retaining Explore's full touch target. */
    margin: 0 0 -8px;
    padding-left: 0;
    font-size: var(--opening-label-size);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.4;
  }

  html[data-message='10'] .hero .hero-partner-explore > svg {
    display: block;
  }

  .hero .hero-partner-seam {
    left: calc(var(--gutter) - 8px);
    right: calc(var(--gutter) - 8px);
    bottom: calc(100% - var(--inlay-top) + 19px);
    gap: 10px;
  }

}

@media (max-width: 560px) {
  html:not([data-message='10']) .hero { --caption-return: 62px; }

  /* A travertine return gives the single line real room on small screens.
     Its photo slice follows the original stone's vertical position. */
  html:not([data-message='10']) .caption-stone-return {
    display: block;
    position: absolute;
    z-index: 2;
    inset: 0;
    clip-path: polygon(0 calc(var(--inlay-top) - var(--caption-return)), 100% calc(var(--inlay-top) - var(--caption-return)), 100% var(--inlay-top), 0 var(--inlay-top));
  }

  .caption-stone-return > svg { width: 100%; height: 100%; display: block; }

  html:not([data-message='10']) .joint-return {
    display: block;
    left: var(--wood-start);
    right: 0;
    top: calc(var(--inlay-top) - var(--caption-return));
  }

}

@media (min-width: 1700px) {
  .hero .hero-partner-seam { left: 7rem; }
}

@media (max-width: 360px) {
  .hero .hero-partner-seam { gap: 8px; }
  html[data-message='10'] .hero .hero-services-mobile { letter-spacing: -.015em; }
}

/* Keep content available when users enlarge their default type size. */
@media (max-width: 19rem) {
  .hero .hero-partner-seam { white-space: normal; }
  html:not([data-message='10']) .hero { --caption-return: 80px; }
}