/* Homepage-only extension. Shared navigation, type families, CTA styling and tokens remain authoritative. */
.document-home .site-shell { background: var(--fw-navy-900); }
.document-home .home-hero {
  display: block;
  min-height: max(100svh, 790px);
  padding: 88px max(32px, calc((100vw - 1260px) / 2)) 64px;
}
.document-home .gradient-field {
  background: url("assets/tekmerion-hero-background.png?v=1b579538") center / 100% 100% no-repeat;
}
.document-home .gradient-field::after { content: none; }
.document-hero-layout { display: grid; grid-template-columns: 40% 60%; align-items: start; }
.document-home .home-copy { position: relative; z-index: 2; width: 100%; }
.document-home .display-heading { margin: 76px 0 34px; font-size: clamp(38px, 3.5vw, 58px); line-height: .96; }
.document-home .display-heading span { display: block; white-space: nowrap; }
.document-home .body-copy { max-width: 450px; }
.document-home .actions { margin-top: 32px; }
.document-carousel {
  --document-width: 220px;
  --document-height: 320px;
  --carousel-radius: 340px;
  --scene-scale: .7;
  position: relative;
  min-width: 0;
  margin: 38px -36px 0 -12px;
  outline: none;
}
.document-carousel:focus-visible { outline: 2px solid var(--fw-cyan); outline-offset: 6px; border-radius: var(--fi-radius-control); }
.carousel-viewport { position: relative; width: 100%; aspect-ratio: 1060 / 660; touch-action: pan-y pinch-zoom; cursor: grab; user-select: none; }
.document-carousel.is-dragging .carousel-viewport { cursor: grabbing; }
.carousel-scaled-scene { position: absolute; top: 0; left: 50%; width: 1060px; height: 660px; transform: translateX(-50%) scale(var(--scene-scale)); transform-origin: top center; }
.carousel-perspective { position: absolute; inset: 0; perspective: 1450px; perspective-origin: 50% 41%; }
.carousel-camera { position: absolute; left: 50%; top: 41%; transform: rotateX(-14deg); transform-style: preserve-3d; }
.document-ring { position: absolute; transform-style: preserve-3d; }
.document-card {
  position: absolute;
  left: calc(var(--document-width) / -2);
  top: calc(var(--document-height) / -2);
  width: var(--document-width);
  height: var(--document-height);
  padding: 24px 17px;
  border: 1px solid var(--fi-border-blue-soft);
  border-radius: 0;
  background: linear-gradient(120deg, var(--fi-surface), var(--fi-bg-page-start));
  color: var(--fi-text-heading);
  box-shadow: var(--fi-shadow-soft);
  backface-visibility: visible;
}
.document-card.is-selected {
  border-color: var(--fw-orange);
  background: linear-gradient(120deg, var(--fi-surface-warm), var(--fi-status-warning-bg));
  box-shadow: 0 0 4px var(--fi-status-warning-border), 0 0 14px color-mix(in srgb, var(--fw-orange) 36%, transparent), 0 16px 22px color-mix(in srgb, var(--fw-orange) 13%, transparent);
}
.document-ink { opacity: var(--detail-opacity, 1); filter: blur(var(--detail-blur, 0px)); }
.document-title { height: 32px; margin: 0 0 12px; font: var(--fi-weight-bold) 14px/1.2 var(--fw-font-display); text-transform: uppercase; letter-spacing: -.4px; }
.document-title-text { opacity: var(--title-opacity, 1); }
.document-title-placeholder { display: block; width: 78%; height: 9px; margin-top: -22px; background: var(--fi-border-muted); opacity: calc(1 - var(--title-opacity, 1)); }
.document-fields { margin: 0; }
.document-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 23px; border-bottom: 1px solid var(--fi-border-blue-soft); }
.document-field dt { font-size: 9px; line-height: 1.2; }
.document-field dd { margin: 0; flex: 0 0 55px; height: 7px; background: var(--fi-border-muted); }
.document-bars { margin-top: 17px; }
.document-bars i { display: block; height: 7px; margin: 8px 0; background: var(--fi-border-muted); }
.document-bars i:nth-child(2) { width: 85%; }
.document-bars i:nth-child(3) { width: 92%; }
.document-bars i:nth-child(4) { width: 64%; }
.carousel-ground { position: absolute; top: 263px; left: -10px; width: 1080px; height: 350px; overflow: visible; pointer-events: none; }
.carousel-ground ellipse { fill: none; stroke: var(--fw-cyan); stroke-width: 1.5; }
.carousel-ground ellipse:first-child { filter: drop-shadow(0 0 5px var(--fw-cyan)); }
.carousel-ground ellipse:nth-child(2) { stroke-dasharray: 2 12; opacity: .5; }
.carousel-ground ellipse:nth-child(3) { opacity: .4; }
.document-observation { position: absolute; top: 44%; left: 57%; width: min(245px, 40%); display: flex; gap: 12px; padding: 17px; border: 1px solid var(--fw-border-cyan); border-radius: var(--fi-radius-control); background: var(--fw-navy-900); color: var(--fw-white); box-shadow: var(--fi-shadow-hero); pointer-events: none; }
.observation-warning { flex: 0 0 30px; width: 30px; height: 30px; fill: var(--fw-orange); }
.warning-mark { fill: none; stroke: var(--fi-text-dark-action); stroke-width: 3; }
.observation-category { margin: 0 0 9px; color: var(--fw-orange); font-size: 10px; font-weight: var(--fi-weight-bold); letter-spacing: .04em; text-transform: uppercase; }
.document-observation h2 { margin: 0; font-size: 12px; line-height: 1.4; }
.observation-detail { margin: 10px 0 0; font-size: 11px; line-height: 1.4; color: var(--fw-muted); }
.observation-copy.is-changing { animation: observation-appear 180ms ease-out; }
@keyframes observation-appear { from { opacity: .4; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: -12px; position: relative; }
.carousel-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--fw-border-cyan); border-radius: var(--fi-radius-control); color: var(--fw-white); background: var(--fw-navy-900); cursor: pointer; }
.carousel-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.carousel-arrow:hover { border-color: var(--fw-orange); }
.carousel-arrow:focus-visible { outline: 2px solid var(--fw-orange); outline-offset: 3px; }
.carousel-selection { min-width: 164px; text-align: center; color: var(--fi-text-heading); }
.selected-document-name { display: block; font-size: 12px; font-weight: var(--fi-weight-bold); }
.carousel-hint { display: block; margin-top: 4px; font-size: 11px; }
.hero-fringe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
.hero-fringe-item { display: flex; gap: 17px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.45; color: var(--fw-white); text-shadow: 0 1px 3px var(--fw-navy-900); }
.hero-fringe-item:nth-child(even) { padding-top: 26px; }
.hero-fringe-item svg { width: 38px; height: 42px; flex: 0 0 38px; fill: none; stroke: var(--fw-cyan); stroke-width: 2; filter: drop-shadow(0 1px 1px var(--fw-navy-900)); }
.hero-fringe-item p { margin: 0; max-width: 210px; }
.hero-fringe-item p::after { content: ''; display: block; width: 27px; height: 2px; margin-top: 14px; background: var(--fw-cyan); }
.hero-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.carousel-no-script { padding: 20px; background: var(--fw-navy-900); }
@media (min-width: 981px) and (max-width: 1199px) {
  .document-home .display-heading { font-size: clamp(34px, 3.8vw, 45px); }
  .document-home .home-copy .body-copy { max-width: 360px; }
  .document-observation { padding: 12px; gap: 8px; }
  .observation-warning { flex-basis: 24px; width: 24px; height: 24px; }
}
@media (min-width: 681px) and (max-width: 980px) {
  .document-home .home-hero { padding: 105px 24px 48px; }
  .document-hero-layout { grid-template-columns: 1fr; }
  .document-home .home-copy { max-width: 660px; }
  .document-home .display-heading { margin-top: 38px; font-size: clamp(44px, 6vw, 58px); }
  .document-home .body-copy { max-width: 600px; }
  .document-carousel { width: min(760px, 100%); margin: 24px auto 0; }
  .hero-fringe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-fringe-item:nth-child(even) { padding-top: 0; }
}
@media (max-width: 680px) {
  .document-home .home-hero { min-height: auto; padding: 32px 24px 48px; }
  .document-home .gradient-field { background-size: auto 100%; background-position: 36% center; }
  .document-hero-layout { display: block; }
  .document-home .display-heading { margin: 36px 0 28px; font-size: clamp(30px, 7.7vw, 49px); }
  .document-home .body-copy { font-size: 16px; }
  .document-home .actions { margin-top: 24px; }
  .document-carousel { margin: 30px -24px 0; }
  .carousel-viewport { height: 372px; aspect-ratio: auto; overflow: hidden; }
  .carousel-scaled-scene { width: 100%; height: 372px; left: 0; transform: none; }
  .carousel-perspective { perspective: none; }
  .carousel-camera { top: 180px; transform: none; }
  .document-ring { transform: none !important; }
  .document-card { box-shadow: var(--fi-shadow-card); }
  .carousel-ground { display: none; }
  .document-observation { position: relative; inset: auto; width: calc(100% - 48px); max-width: 400px; margin: 0 auto 20px; padding: 17px; min-height: 128px; }
  .document-observation h2 { font-size: 14px; }
  .observation-detail { font-size: 12px; }
  .carousel-controls { margin-top: 0; }
  .carousel-selection { color: var(--fw-white); text-shadow: 0 1px 3px var(--fw-navy-900); }
  .carousel-hint { font-size: 0; }
  .carousel-hint::after { content: 'Swipe to explore'; font-size: 11px; }
  .hero-fringe { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .hero-fringe-item:nth-child(even) { padding-top: 0; }
  .hero-fringe-item p { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .observation-copy.is-changing { animation: none; }
}