.hero-visual {
  position: absolute;
  inset: 0;
  isolation: isolate;
  z-index: -1;
}
.hero-reticle {
  position: absolute;
  left: var(--hero-x, 83.7%);
  top: var(--hero-y, 63.5%);
  width: clamp(1.9rem, 4.4vw, 3.65rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #ffc29b;
  background: #27180d27;
  box-shadow: 0 0 1rem #f983485f, inset 0 0 .55rem #f9834839;
  pointer-events: none;
  transition: left .35s cubic-bezier(.23,.74,.3,1), top .35s cubic-bezier(.23,.74,.3,1);
}
.hero-reticle::before, .hero-reticle::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}
.hero-reticle::before { border: 1px dashed #ffad79b3; }
.hero-reticle::after {
  inset: 35%;
  background: linear-gradient(#ffe2ca,#ffe2ca) center/1px 100% no-repeat,
              linear-gradient(#ffe2ca,#ffe2ca) center/100% 1px no-repeat;
}
.hero-leader {
  display: none;
  position: absolute;
  left: var(--hero-x);
  top: var(--hero-y);
  width: var(--hero-leader-length);
  border-top: 1px dashed #ffc299a8;
  transform-origin: left center;
  transform: rotate(var(--hero-leader-angle));
  pointer-events: none;
  transition: left .35s ease, top .35s ease, width .35s ease, transform .35s ease;
}
.hero-visual[data-hero-located] .hero-leader { display: block; }
.hero-measure {
  position: absolute;
  inset: auto 0 1.45rem auto;
  width: min(40%, 25.5rem);
  padding: .68rem .77rem .64rem;
  color: #fff4e7;
  background: linear-gradient(120deg, #171916f7, #27201bf4);
  border: 1px solid #e09f77a8;
  border-inline-start: 3px solid var(--hot);
  border-radius: .45rem;
  box-shadow: 0 .6rem 1.6rem #0007;
}
.hero-measure-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .34rem .62rem;
  padding-bottom: .48rem;
  border-bottom: 1px solid #e6bd9e3e;
}
.hero-measure-head h2 { display: inline-flex; align-items: center; gap: .38rem; font-size: 1.48rem; }
.hero-measure-head .workshop-icon { width: 1.07rem; height: 1.07rem; color: #ff9c66; }
.hero-measure-options { display: flex; flex-wrap: wrap; gap: .34rem; }
.hero-measure-options button {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-height: 2.75rem;
  padding: .35rem .54rem;
  border-radius: .22rem;
  border: 1px solid #a38a76;
  background: #292821;
  color: #fff4e9;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}
.hero-measure-options .workshop-icon { width: .91rem; height: .91rem; color: inherit; }
.hero-measure-options button:hover { border-color: #ffc6a2; }
.hero-measure-options button[aria-pressed="true"] { background: #ffb487; border-color: #ffb487; color: #231911; }
.hero-measure-reading {
  display: grid;
  grid-template-columns: minmax(0,1fr) fit-content(43%);
  align-items: end;
  gap: .16rem .58rem;
  padding-top: .5rem;
}
.hero-measure-fact { display: grid; gap: .24rem; min-width: 0; }
.hero-measure-fact > strong { color: #ffb88d; font: 700 2.45rem/1 var(--title); font-variant-numeric: tabular-nums; }
.hero-measure-fact > div { display: grid; gap: .14rem; font-size: 1rem; line-height: 1.32; }
.hero-measure-fact span { font-weight: 700; }
.hero-measure-fact small { color: #e2d2c4; font-size: var(--caption-size); }
.hero-measure-reading a, .hero-measure-fallback {
  display: inline-flex;
  align-items: center;
  gap: .27rem;
  min-height: 2.75rem;
  color: #ffccab;
  font-size: 1rem;
  font-weight: 700;
  text-underline-offset: .23em;
}
.hero-measure-reading a:hover, .hero-measure-fallback:hover { color: #fff0e2; }
.hero-measure-fallback { margin-top: .15rem; }

.speaker-exploded {
  --focus: #ffd0a7;
  margin-bottom: 1.45rem;
  padding: clamp(.9rem, 3vw, 2.3rem);
  background: radial-gradient(ellipse at 5% 5%, #38291f, #1b1c19 70%);
  color: #fff4e9;
  border: 1px solid #695241;
  border-radius: .65rem;
}
.exploded-heading { margin-bottom: .98rem; }
.exploded-heading h2 { margin: .45rem 0 .56rem; }
.exploded-heading > p:last-child { max-width: 64ch; color: #e9d9cc; line-height: 1.41; }
.exploded-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(15rem,.8fr); gap: .9rem; align-items: start; }
.exploded-figure {
  margin: 0;
  min-width: 0;
  background: #191b17;
  border: 1px solid #765e4c;
  border-radius: .45rem;
  overflow: clip;
}
.exploded-art { position: relative; isolation: isolate; aspect-ratio: 2; }
.exploded-art img { height: 100%; object-fit: cover; }
.exploded-figure figcaption { padding: .56rem .65rem; color: #e5d5c7; font-size: var(--caption-size); line-height: 1.36; }
.exploded-figure figcaption a, .exploded-next { color: #ffc39c; font-weight: 700; text-underline-offset: .22em; }
.exploded-pin {
  width: clamp(1.23rem, 4.25%, 2.05rem);
  box-shadow: 0 0 .7rem #0009;
  z-index: 3;
}
.exploded-axis, .exploded-outline {
  position: absolute;
  opacity: .43;
  color: #ffc6a0;
  pointer-events: none;
  transition: opacity .24s ease, filter .24s ease;
}
.exploded-axis { border-top: 1px solid currentColor; }
.exploded-axis::before, .exploded-axis::after {
  content: "";
  position: absolute;
  top: -.24rem;
  height: .45rem;
  border-inline-start: 1px solid currentColor;
}
.exploded-axis::before { left: 0; }
.exploded-axis::after { right: 0; }
.exploded-axis--cut { left: 51.7%; top: 44%; width: 13.3%; }
.exploded-axis--depth { left: 29.5%; top: 69%; width: 13%; }
.exploded-outline {
  left: 11.4%;
  top: 11.4%;
  width: 19.8%;
  height: 79.5%;
  border: 1px dashed currentColor;
  border-radius: 50%;
  transform: rotate(10deg);
}
.exploded-glass {
  position: absolute;
  left: 86%;
  top: 51%;
  transform: translate(-50%, -50%);
  padding: .12em .43em;
  border: 1px solid #a6cbd7a0;
  border-radius: .17rem;
  background: #142127dc;
  color: #d6eef4;
  font-size: min(.83rem, 14px);
  font-weight: 700;
  line-height: 1.25;
}
.exploded-art:has([data-diagram-pin="0"][data-active]) .exploded-axis--cut,
.exploded-art:has([data-diagram-pin="1"][data-active]) .exploded-outline,
.exploded-art:has([data-diagram-pin="2"][data-active]) .exploded-axis--depth { opacity: 1; filter: drop-shadow(0 0 .24rem #fc995d); }
.exploded-data { display: grid; min-width: 0; gap: .45rem; }
.exploded-controls { display: grid; grid-template-columns: minmax(0,1fr); gap: .4rem; }
.exploded-controls button {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: center;
  gap: .26rem .52rem;
  min-height: 3.05rem;
  padding: .38rem .54rem;
  background: #2e2a22;
  color: #fff1e4;
  border: 1px solid #a88870;
  border-radius: .26rem;
  text-align: start;
  line-height: 1.27;
}
.exploded-controls button:hover { border-color: #ffc8a5; }
.exploded-controls button[aria-pressed="true"] { color: #211710; background: #ffc6a6; border-color: #ffc6a6; }
.exploded-controls button > strong { font: 700 1.4rem/1 var(--title); font-variant-numeric: tabular-nums; }
.exploded-controls button > span:last-child { font-size: 1rem; font-weight: 700; }
.exploded-letter {
  display: grid;
  place-items: center;
  width: 1.24em;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: .85rem;
  font-weight: 700;
}
.exploded-note { min-height: 4.25em; padding: .28rem .1rem .13rem; }
.exploded-fallback { padding-left: 1.35rem; }
.exploded-next { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; width: fit-content; }

.home-fit-cases { margin-bottom: 3.85rem; }
.fit-cases-heading { margin-bottom: 1.05rem; }
.fit-cases-heading p { max-width: 62ch; margin-top: .56rem; color: var(--muted); }
.fit-cases-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .83rem; align-items: stretch; }
.fit-case {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: clip;
  border: 1px solid #d1bd9f;
  border-radius: .57rem;
  background: #fffaf0;
}
.fit-case--wide {
  grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr);
  grid-template-rows: auto;
  grid-column: 1 / -1;
  background: #f2e5d4;
}
.fit-case-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  background: #27211b;
}
.fit-case-media img { aspect-ratio: 2; object-fit: cover; }
.fit-case--wide .fit-case-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.fit-case-media figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: .41rem .62rem;
  background: #1a1915de;
  color: #fff3e2;
  font-size: .86rem;
}
.fit-case-copy {
  display: flex;
  flex-direction: column;
  gap: .63rem;
  min-width: 0;
  padding: clamp(.83rem, 1.9vw, 1.55rem);
}
.fit-case-copy h2, .fit-case-copy h3 { margin: 0; font-size: clamp(1.85rem, 3.1vw, 2.85rem); text-wrap: wrap; }
.fit-case:not(.fit-case--wide) .fit-case-copy h3 { font-size: clamp(1.75rem, 2.35vw, 2.35rem); }
.fit-case-stages { display: grid; grid-template-columns: minmax(0,1fr); gap: .42rem; margin: 0; }
.fit-case--wide .fit-case-stages { grid-template-columns: repeat(2,minmax(0,1fr)); }
.fit-case-stages > div {
  min-width: 0;
  padding: .5rem .59rem;
  background: #f5eddf;
  border: 1px solid #d9c6aa;
  border-radius: .26rem;
}
.fit-case-stages > div:last-child { background: #fff9ed; border-color: #bd8b6d; }
.fit-case-stages dt { color: #694d3a; font-size: var(--caption-size); font-weight: 700; }
.fit-case-stages dd { margin: .17rem 0 0; }
.fit-case-stages dd > strong { color: #8f3212; font: 700 clamp(1.45rem, 2.55vw, 2rem)/1 var(--title); font-variant-numeric: tabular-nums; }
.fit-case-stages dd > p, .fit-case-decision > p { margin-top: .18rem; line-height: 1.36; }
.fit-case-decision {
  padding: .42rem .57rem;
  background: #f3e2cd;
  border-left: 2px solid #a6411b;
}
.fit-case-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .62rem; margin-top: auto; }
.fit-case-source {
  display: inline-flex;
  align-items: center;
  gap: .26rem;
  min-height: 2.4rem;
  color: #5c4535;
  text-underline-offset: .23em;
  font-size: var(--caption-size);
  font-weight: 600;
}
.fit-case-source:hover { color: #9b3612; }
.guide-fit-case { margin: 0 0 1.55rem; }

@media (max-width: 980px) {
  .exploded-grid { grid-template-columns: minmax(0,1.2fr) minmax(13rem,1fr); }
  .fit-cases-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto auto;
  }
  .hero-inner { display: contents; }
  .hero-copy {
    position: relative;
    grid-row: 1;
    width: min(100% - 2 * var(--gutter), 43rem);
    margin-inline: auto;
    padding: 2.5rem 0 .75rem;
  }
  .hero h1 { font-size: clamp(3.6rem, 12.4vw, 6.35rem); margin: .85rem 0 1.02rem; }
  .hero-visual {
    position: relative;
    grid-row: 2;
    inset: auto;
    z-index: 0;
    height: clamp(13.7rem, 61vw, 23rem);
  }
  .hero-art { inset: 0; height: 100%; }
  .hero-art img { object-position: 56% 60%; }
  .hero-art::after { background: linear-gradient(180deg, var(--deep), #10110f69 15%, transparent 33%, #10110f00 72%, #10110f8a); }
  .hero-reticle { left: var(--hero-x, 75%); top: var(--hero-y, 60%); }
  .hero-measure {
    position: relative;
    inset: auto;
    grid-row: 3;
    width: min(100% - 2 * var(--gutter), 43rem);
    margin: -1.12rem auto 1.28rem;
    z-index: 1;
  }
}
@media (max-width: 665px) {
  .exploded-grid, .fit-case--wide { grid-template-columns: minmax(0,1fr); }
  .fit-case--wide .fit-case-media img { position: static; aspect-ratio: 2; }
  .home-fit-cases { margin-bottom: 2.85rem; }
}
@media (max-width: 510px) {
  .fit-cases-grid { grid-template-columns: minmax(0,1fr); }
  .fit-case--wide .fit-case-stages { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 355px) {
  .hero h1 { font-size: clamp(3.25rem, 14vw, 3.65rem); }
  .hero-copy { padding-top: 2.05rem; }
  .hero-measure-fact > strong { font-size: 2rem; }
  .exploded-controls button { grid-template-columns: auto minmax(0,1fr); }
  .exploded-controls button > span:last-child { grid-column: 2; }
}