/* MTO home, section 5 "Built tight": the 3D corner cutaway (2026-10-23). Pairs with cutaway.js.
   Navy section, the drawing is lit white vinyl and baby-blue glass. No card, no outline strokes.
   Palette: Royal #1D4FA3, Navy #0F2A5C, Baby Blue #A7D3F5, White, Slate #6B7480, Light Grey #E6E9EE. */

.home .ct { margin: 0; position: relative; min-width: 0; }
.home .ct-stage { position: relative; perspective: 1300px; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

/* studio light behind the part; it stays put while the part tilts */
.home .ct-light {
  position: absolute; inset: -8% -10% -6%; pointer-events: none;
  background:
    radial-gradient(42% 40% at 50% 46%, rgba(167, 211, 245, .16), rgba(167, 211, 245, 0) 70%),
    radial-gradient(56% 52% at 50% 50%, rgba(29, 79, 163, .78), rgba(29, 79, 163, .30) 55%, rgba(29, 79, 163, 0) 78%);
}
.home .ct-tilt { position: relative; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg); }
.home .ct-svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.home .ct figcaption { position: relative; margin: 4px 0 0; text-align: center; font-size: .85rem; color: #B9CCE4; }

/* floor shadow */
.home .ct-sh-l { fill: var(--navy); opacity: .9; }
.home .ct-sh-s { fill: var(--navy); opacity: 1; }

/* glass details */
.home .ct-lowe-line { fill: none; stroke: var(--sky); stroke-width: 1.3; stroke-opacity: .95; }
.home .ct-shim { opacity: .7; }

/* ---------- pick a part: it glows, the rest dims ---------- */
.home .ct-part, .home .ct-weldhl { transition: opacity .35s ease; }
.home .ct[data-on] .ct-part { opacity: .2; }
.home .ct[data-on="b"] .ct-part[data-part="b"],
.home .ct[data-on="c"] .ct-part[data-part="c"],
.home .ct[data-on="d"] .ct-part[data-part="d"] { opacity: 1; }
.home .ct[data-on="a"] .ct-part[data-part="b"] { opacity: .62; }
.home .ct[data-on="d"] .ct-part[data-part="c"] { opacity: .5; }

.home .ct-hl { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.home .ct-hl-a { fill: none; stroke: var(--sky); stroke-width: 3.2; stroke-linecap: round; filter: url(#ct-glow); }
.home .ct-hl-b { fill: var(--sky); fill-opacity: .38; stroke: var(--sky); stroke-width: 1.4; filter: url(#ct-glow); }
.home .ct-hl-c { fill: #FFFFFF; fill-opacity: .7; stroke: var(--sky); stroke-width: 1.2; filter: url(#ct-glow); }
.home .ct-hl-cf { fill: var(--sky); fill-opacity: .2; }
.home .ct-hl-d { fill: var(--sky); fill-opacity: .85; filter: url(#ct-glow); }
.home .ct-hl-dh { fill: var(--sky); fill-opacity: .26; }
.home .ct[data-on="a"] .ct-hl-a,
.home .ct[data-on="b"] .ct-hl-b,
.home .ct[data-on="c"] .ct-hl-c, .home .ct[data-on="c"] .ct-hl-cf,
.home .ct[data-on="d"] .ct-hl-d, .home .ct[data-on="d"] .ct-hl-dh { opacity: 1; }

/* leaders from each badge to its part */
.home .ct-lead path { fill: none; stroke: var(--sky); stroke-opacity: .6; stroke-width: 1.3; transition: stroke-opacity .3s ease; }
.home .ct-lead circle { fill: #FFFFFF; stroke: var(--sky); stroke-width: 2.4; stroke-opacity: .55; transition: stroke-opacity .3s ease; }
.home .ct-lead { transition: opacity .3s ease; }
.home .ct[data-on] .ct-lead { opacity: .3; }
.home .ct[data-on="a"] .ct-lead[data-part="a"], .home .ct[data-on="b"] .ct-lead[data-part="b"],
.home .ct[data-on="c"] .ct-lead[data-part="c"], .home .ct[data-on="d"] .ct-lead[data-part="d"] { opacity: 1; }
.home .ct[data-on] .ct-lead path { stroke-opacity: 1; }
.home .ct[data-on] .ct-lead circle { stroke-opacity: 1; }

/* ---------- A-D badges on the drawing ---------- */
.home .ct-hs {
  position: absolute; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; background: none; color: var(--navy); cursor: pointer; display: grid; place-items: center;
  transform: translateZ(36px); -webkit-tap-highlight-color: transparent;
}
.home .ct-hs-n {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #FFFFFF; color: var(--navy); font-family: var(--head); font-weight: 800; font-size: .88rem; line-height: 1;
  box-shadow: 0 0 0 4px rgba(167, 211, 245, .22), 0 8px 18px rgba(15, 42, 92, .55);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.home .ct-hs-n::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--sky); opacity: 0;
}
.home .ct-hs-t {
  position: absolute; top: 50%; left: calc(50% + 22px); white-space: nowrap; pointer-events: none;
  padding: 7px 13px; border-radius: 999px; background: #FFFFFF; color: var(--navy);
  font-family: var(--head); font-weight: 800; font-size: .8rem; line-height: 1.2; letter-spacing: -.005em;
  box-shadow: 0 10px 24px rgba(15, 42, 92, .45);
  opacity: 0; transform: translate(-6px, -50%); transition: opacity .22s ease, transform .22s ease;
}
.home .ct-hs-l .ct-hs-t { left: auto; right: calc(50% + 22px); transform: translate(6px, -50%); }
.home .ct-hs.on .ct-hs-t { opacity: 1; transform: translate(0, -50%); }
.home .ct-hs.on .ct-hs-n, .home .ct-hs:hover .ct-hs-n {
  background: var(--royal); color: #FFFFFF;
  box-shadow: 0 0 0 5px rgba(167, 211, 245, .45), 0 0 26px rgba(167, 211, 245, .75), 0 8px 18px rgba(15, 42, 92, .5);
}
.home .ct-hs:focus { outline: none; }
.home .ct-hs:focus-visible .ct-hs-n { outline: 3px solid #FFFFFF; outline-offset: 4px; }
.home .ct[data-on] .ct-hs:not(.on) .ct-hs-n { opacity: .55; }

/* ---------- the A-D list in the copy column ---------- */
.home .h-frame .h-frame-key { gap: 2px; }
.home .h-frame .h-frame-key li { display: block; }
.home .ct-key {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0 0 0 -6px; padding: 6px 14px 6px 6px;
  border: 0; border-radius: 999px; background: transparent; color: #FFFFFF; text-align: left; cursor: pointer;
  font: inherit; font-weight: 700; line-height: 1.3; -webkit-tap-highlight-color: transparent;
  transition: background .25s ease;
}
.home .h-frame-key .ct-key span { transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.home .ct-key:hover, .home .ct-key.on { background: rgba(167, 211, 245, .12); }
.home .ct-key.on span { background: #FFFFFF; color: var(--navy); box-shadow: 0 0 0 4px rgba(167, 211, 245, .3), 0 0 18px rgba(167, 211, 245, .6); }
.home .ct-key:focus { outline: none; }
.home .ct-key:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* ---------- assemble on first view (cutaway.js adds ct-armed, then ct-go) ---------- */
.home .ct-armed .ct-part { transform: translate(var(--dx, 0), var(--dy, 0)); }
.home .ct-armed .ct-p-argon { opacity: 0; }
.home .ct-armed .ct-hs, .home .ct-armed .ct-lead { opacity: 0; }
.home .ct-armed .ct-shadow { opacity: .35; }
.home .ct-go .ct-part { transition: opacity .35s ease, transform 1.25s cubic-bezier(.18, .82, .22, 1); }
.home .ct-go .ct-p-back { transition-delay: 0s, .1s; }
.home .ct-go .ct-p-spacer { transition-delay: 0s, .22s; }
.home .ct-go .ct-p-front { transition-delay: 0s, .34s; }
.home .ct-go .ct-p-argon { transition: opacity .9s ease 1.05s, transform 1.25s cubic-bezier(.18, .82, .22, 1) .22s; }
.home .ct-go .ct-shadow { transition: opacity 1.2s ease; }
.home .ct-go .ct-hs, .home .ct-go .ct-lead { transition: opacity .5s ease 1.3s; }
.home .ct-done .ct-part, .home .ct-done .ct-p-argon { transition: opacity .35s ease; }
.home .ct-done .ct-hs, .home .ct-done .ct-lead { transition: opacity .3s ease; }
.home .ct-go:not(.ct-done) .ct-hs-n::after { animation: ct-ping 1.6s ease-out 1.5s 2; }
@keyframes ct-ping { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }

@media (prefers-reduced-motion: reduce) {
  .home .ct-tilt { transform: none !important; }
  .home .ct-part, .home .ct-hl, .home .ct-lead, .home .ct-hs-t, .home .ct-hs-n, .home .ct-key { transition: none !important; }
  .home .ct-hs-n::after { animation: none !important; }
}

/* ---------- phone: drawing sits between the intro and the A-D list ---------- */
@media (max-width: 959px) {
  .home .h-frame .h-frame-grid { gap: 0; }
  .home .h-frame .h-frame-copy { display: contents; }
  .home .h-frame .ct { order: 1; margin: 6px -8px 18px; }
  .home .h-frame .h-frame-key, .home .h-frame .h-frame-copy > .btn { order: 2; justify-self: start; }
  .home .ct-hs-t { font-size: .74rem; padding: 6px 11px; }
}
@media (max-width: 380px) {
  .home .ct-hs-t { font-size: .7rem; padding: 6px 9px; }
}