/* ═══ Interactive Crest ═══ */
.crest-section { background: #fff; padding: 80px 0; }
.crest-interactive {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 22px 48px;
  align-items: start;
}
.crest-data { display: none; }

/* Stage */
.crest-stage {
  grid-column: 1; grid-row: 1 / 3;
  position: relative;
  width: 100%; max-width: 480px; margin: 0 auto;
  aspect-ratio: 1 / 1;
  align-self: center;
  --cx: 50%; --cy: 50%; --cr: 30%;
}
.crest-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(6,15,34,0.14));
  transition: filter .4s ease;
}
.crest-stage.is-active .crest-img {
  filter: drop-shadow(0 24px 48px rgba(6,15,34,0.14)) brightness(0.72) saturate(0.65);
}
.crest-dim {
  position: absolute; inset: -6%;
  pointer-events: none; border-radius: 26px;
  background: radial-gradient(
    circle at var(--cx) var(--cy),
    transparent 0, transparent calc(var(--cr) - 4%),
    rgba(6,15,34,0.42) calc(var(--cr) + 6%),
    rgba(6,15,34,0.62) 100%);
  opacity: 0; transition: opacity .35s ease;
}
.crest-stage.is-active .crest-dim { opacity: 1; }
.crest-ring {
  position: absolute; left: var(--cx); top: var(--cy);
  width: calc(var(--cr) * 2); height: calc(var(--cr) * 2);
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 2px solid rgba(201,169,97,.9);
  box-shadow: 0 0 0 6px rgba(201,169,97,.14), 0 0 44px 12px rgba(201,169,97,.32);
  opacity: 0; pointer-events: none;
  transition: left .45s cubic-bezier(.34,1.4,.64,1), top .45s cubic-bezier(.34,1.4,.64,1),
              width .45s cubic-bezier(.34,1.4,.64,1), height .45s cubic-bezier(.34,1.4,.64,1),
              opacity .3s ease;
}
.crest-stage.is-active .crest-ring { opacity: 1; }

/* Panel — desktop */
.crest-panel {
  grid-column: 2; grid-row: 2;
  position: relative;
  min-height: 200px;
  display: grid; grid-template-areas: "stack"; align-items: start;
}
.crest-panel-idle {
  grid-area: stack;
  font-size: 15px; line-height: 1.7; color: #64748b; margin: 0;
}
.crest-panel-idle strong {
  display: block; margin-top: 8px; font-size: 17px; color: #0a1a3a;
}
.crest-panel-content {
  grid-area: stack;
  padding: 28px 32px;
  border-left: 3px solid #c9a961;
  background: linear-gradient(180deg, rgba(201,169,97,.06), rgba(201,169,97,0));
  border-radius: 0 16px 16px 0;
  opacity: 0; transform: translateX(14px);
  transition: opacity .4s ease, transform .4s ease;
}
.crest-stage.is-active ~ .crest-panel .crest-panel-content {
  opacity: 1; transform: translateX(0);
}
.crest-panel-value {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #c9a961; margin: 0 0 10px;
}
.crest-panel-component {
  font-size: 24px; font-weight: 700; color: #0a1a3a;
  margin: 0 0 14px; font-family: Georgia, serif; line-height: 1.2;
}
.crest-panel-desc { font-size: 16px; line-height: 1.7; color: #334155; margin: 0; }
.crest-interactive:has(.crest-stage.is-active) .crest-panel-idle { display: none; }

/* Legend chips — desktop */
.crest-legend {
  grid-column: 2; grid-row: 1;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-content: flex-start;
}
.crest-legend button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 100px;
  border: 1.5px solid #e2e8f0; background: #fff;
  font-size: 13px; font-weight: 600; color: #0a1a3a;
  cursor: pointer; font-family: inherit;
  transition: all .2s ease;
  white-space: nowrap;
}
.crest-legend button .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #c9a961; color: #fff; font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.crest-legend button .chip-name { font-weight: 700; }
.crest-legend button .chip-part { color: #94a3b8; font-weight: 500; font-size: 12px; }
.crest-legend button:hover,
.crest-legend button:focus-visible {
  border-color: #c9a961; background: #fefbf3; outline: none;
}
.crest-legend button.is-active {
  background: #0a1a3a; border-color: #0a1a3a; color: #fff;
}
.crest-legend button.is-active .n { background: #c9a961; color: #0a1a3a; }
.crest-legend button.is-active .chip-part { color: rgba(255,255,255,.7); }

/* ─── Mobile ─── */
@media (max-width: 900px) {
  .crest-section { padding: 48px 0; }
  .crest-interactive {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 20px; padding: 0 20px;
  }
  /* Reorder on mobile: crest → chips → panel */
  .crest-stage { grid-column: 1; grid-row: auto; max-width: 300px; order: 1; }
  .crest-legend { grid-column: 1; grid-row: auto; order: 2; justify-content: center; gap: 8px; }
  .crest-panel { grid-column: 1; grid-row: auto; order: 3; min-height: 0; }
  .crest-panel-idle { text-align: center; padding: 0 12px; }
  .crest-panel-content {
    padding: 22px 22px;
    border-left: none;
    border-top: 3px solid #c9a961;
    border-radius: 0 0 14px 14px;
    transform: translateY(10px);
  }
  .crest-stage.is-active ~ .crest-panel .crest-panel-content {
    transform: translateY(0);
  }
  .crest-panel-component { font-size: 20px; }
  .crest-panel-desc { font-size: 15px; }
  .crest-legend button { padding: 9px 14px; font-size: 12.5px; gap: 6px; }
  .crest-legend button .n { width: 18px; height: 18px; font-size: 10.5px; }
  .crest-legend button .chip-part { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .crest-img, .crest-dim, .crest-ring, .crest-panel-content, .crest-legend button {
    transition: none !important;
  }
}

/* Panel illustration icon (brochure pages 6-8) */
.crest-panel-icon {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
  margin: 0 0 18px;
  filter: drop-shadow(0 6px 14px rgba(6,15,34,0.12));
  transition: opacity 0.35s ease, transform 0.35s ease;
}
@media (max-width: 900px) {
  .crest-panel-icon { width: 64px; height: 64px; margin: 0 auto 14px; }
}

/* ═══ Bulletproof: cap every illustration inside the crest panel ═══ */
.crest-panel-icon,
.crest-panel img,
.crest-panel-content img,
.crest-panel picture img,
[data-interactive-crest] .crest-panel img {
  width: 76px !important;
  height: 76px !important;
  max-width: 76px !important;
  max-height: 76px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 0 16px !important;
}
@media (max-width: 900px) {
  .crest-panel-icon,
  .crest-panel img,
  .crest-panel-content img,
  .crest-panel picture img,
  [data-interactive-crest] .crest-panel img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    margin: 0 auto 12px !important;
  }
}

/* Hide the panel heading only (keeps chips and description) */
.crest-panel-component { display: none !important; }