/* Institutional refinement: hero, snapshot, governance diagram (editorial globals: inst-editorial.css). */

/* Hero: standard full-bleed cover — bg fills entire section (grows with content). */
.inst-hero {
  position: relative;
  min-height: calc(100svh - var(--inst-header-h, 4rem));
  overflow: hidden;
}

.inst-hero-media {
  position: absolute;
  left: 0;
  right: 0;
  top: -8%;
  height: 116%;
  z-index: 0;
  overflow: hidden;
  transform-origin: 50% 38%;
  will-change: transform;
}

.inst-hero-ken-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: center center;
  backface-visibility: hidden;
}

.inst-hero-ken-track--desktop {
  display: none;
}

@media (min-width: 640px) {
  .inst-hero-ken-track--mobile {
    display: none;
  }

  .inst-hero-ken-track--desktop {
    display: block;
  }
}

.inst-hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--inst-hero-pos-mobile, center center);
}

.inst-hero-img--desktop {
  object-position: var(--inst-hero-pos-desktop, center center);
}

@media (orientation: portrait) and (min-width: 640px) {
  .inst-hero-img--desktop {
    object-position: var(--inst-hero-pos-desktop-portrait, center center);
  }
}

/* Background video: desktop (>=1024px) AND tablets/devices in landscape
   (>=768px). Portrait phones/tablets keep the image (ken-burns + grid/sweep) —
   faster, reliable autoplay, saves data/battery, and a landscape video is not
   cropped on a portrait screen. */
.inst-hero-video {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--inst-hero-pos-desktop, center center);
  /* Promote to its own compositor layer for smooth playback (no stutter). */
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .inst-hero-video--desktop {
    display: block;
  }
}

/* ── Mobile portrait only (EIB-style): play the hero video as a top band that
   fades smoothly into the section's navy background, ending around the
   Institutional Snapshot card. Desktop / landscape behaviour is unchanged;
   hero block layout and sizes (100svh stage, copy + card grid) are untouched.
   The fade is anchored to the viewport (svh) so it lands near the card
   regardless of copy length; if a browser lacks svh the mask is ignored and
   the video simply shows full-bleed (graceful fallback). ── */
@media (max-width: 639px) and (orientation: portrait) {
  /* Show the dedicated vertical video; the desktop one stays hidden (base rule). */
  .inst-hero-video--mob {
    display: block;
    /* Vertical 1080x1920 source: cover fills width (no side bars) with minimal crop. */
    object-fit: cover;
    object-position: center center;
  }

  /* Constrain the media + blueprint layers to a top band and fade its bottom into
     the navy background. A small upward overscan (negative top) tucks the band's
     opaque top edge behind the sticky header so no navy seam shows under it.
     The band height keeps the portrait video from being over-zoomed. */
  .inst-hero-media,
  .inst-hero-grid,
  .inst-hero-sweep {
    top: -4svh;
    height: 85svh;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 70%, rgba(0, 0, 0, 0.5) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 70%, rgba(0, 0, 0, 0.5) 86%, transparent 100%);
  }
}

/* Institutional code-layer: a faint engineering/blueprint grid that slowly
   drifts, plus a slow diagonal light sweep (sheen). Sits above the darkening
   scrim/vignette (z2-4) so it reads, but below the content stage (z10).
   Pure CSS — no JS, no external library. */
.inst-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  /* Fade the grid out toward the edges so it never looks like a hard table. */
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 42%, #000 0%, rgba(0, 0, 0, 0.35) 58%, transparent 86%);
  mask-image: radial-gradient(ellipse 78% 70% at 50% 42%, #000 0%, rgba(0, 0, 0, 0.35) 58%, transparent 86%);
  opacity: 0.55;
}

.inst-hero-sweep {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.inst-hero-sweep::before {
  content: "";
  position: absolute;
  top: -25%;
  left: 0;
  width: 22%;
  height: 150%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.10) 55%,
    transparent 100%
  );
  transform: translateX(-160%) rotate(8deg);
  opacity: 0;
}

/* "Lifehack" dot-grid + soft dark gradient: smooths compression artefacts and
   lifts text contrast over busy video. */
.inst-hero-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(8, 24, 44, 0.18) 0%, transparent 32%, transparent 64%, rgba(8, 24, 44, 0.28) 100%);
  background-size: 3px 3px, 100% 100%;
  background-position: 0 0, 0 0;
}

.inst-hero-veil-gradient,
.inst-hero-vignette,
.inst-hero-scrim,
.inst-hero-lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.inst-hero-vignette {
  z-index: 3;
  background:
    radial-gradient(ellipse 94% 82% at 50% 40%, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.38) 100%),
    radial-gradient(ellipse 125% 100% at 50% 100%, rgba(0, 0, 0, 0.42) 0%, transparent 55%);
}

.inst-hero-scrim {
  z-index: 2;
  background: rgba(0, 0, 0, 0.14);
}

.inst-hero-lights {
  z-index: 4;
  overflow: hidden;
}

.inst-hero-glint {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(44px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 72%);
  opacity: 0.55;
}

.inst-hero-glint--a {
  top: 8%;
  right: 14%;
  width: min(42vw, 28rem);
  height: min(32vw, 20rem);
}

.inst-hero-glint--b {
  bottom: 14%;
  left: 18%;
  width: min(36vw, 22rem);
  height: min(28vw, 16rem);
  opacity: 0.42;
}

.inst-hero-stage {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--inst-header-h, 4rem));
  padding: 1rem 0 1.25rem;
}

/* Desktop: centre copy/CTAs in viewport; snapshot height does not push buttons down. */
@media (min-width: 1024px) {
  .inst-hero-stage__grid {
    align-items: start;
  }

  .inst-hero-copy {
    min-height: calc(100svh - var(--inst-header-h, 4rem) - 2rem);
    justify-content: center;
  }
}

.inst-hero-copy {
  display: flex;
  flex-direction: column;
}

/* Compact Institutional Snapshot in hero */
.inst-hero-snapshot > div:first-child {
  padding: 0.625rem 1rem;
}

.inst-hero-snapshot > div:nth-child(2) {
  padding: 0.625rem 1rem;
}

.inst-hero-snapshot .inst-hero-snapshot__tagline {
  display: none;
}

@media (min-width: 1024px) {
  .inst-hero-snapshot .inst-hero-snapshot__tagline {
    display: block;
  }
}

.inst-hero-snapshot [data-inst-metrics] {
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  padding-bottom: 0.625rem;
}

.inst-hero-snapshot .inst-metric {
  padding: 0.375rem 0.5rem;
}

.inst-hero-snapshot .inst-metric-value {
  font-size: 1.25rem;
  line-height: 1.2;
}

.inst-hero-snapshot dl {
  font-size: 0.8125rem;
}

.inst-hero-snapshot dl > div {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.inst-hero-snapshot__facts summary {
  list-style: none;
}

.inst-hero-snapshot__facts summary::-webkit-details-marker {
  display: none;
}

.inst-hero-snapshot__facts summary::after {
  content: "+";
  float: right;
  font-weight: 600;
  color: #6b7785;
}

.inst-hero-snapshot__facts[open] summary::after {
  content: "−";
}

.inst-hero-snapshot__actions a {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.inst-hero-copy p,
.inst-hero-copy h1,
.inst-hero-copy summary,
.inst-hero-copy .reveal {
  color: rgba(247, 249, 252, 0.92);
}

.inst-hero-copy h1 {
  color: #f7f9fc;
}

.inst-hero-copy details p {
  color: rgba(247, 249, 252, 0.78);
}

.inst-hero-copy summary {
  color: rgba(247, 249, 252, 0.72);
}

/* Hero snapshot — float above the scrim (design revision). */
.inst-hero-snapshot.inst-card {
  transform: none;
  box-shadow:
    0 4px 8px rgba(11, 44, 74, 0.08),
    0 24px 70px rgba(11, 44, 74, 0.18);
}

.inst-hero-snapshot.inst-card:hover {
  transform: none;
}

.inst-hero-copy .inst-display-1 {
  color: #f7f9fc;
}

.inst-hero-lead,
.inst-hero-lead * {
  color: rgba(247, 249, 252, 0.9) !important;
}

@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 639.98px) {
    .inst-hero-ken-track--mobile {
      animation: inst-hero-ken-mobile 28s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
      -webkit-animation: inst-hero-ken-mobile 28s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
    }
  }

  @media (min-width: 640px) {
    .inst-hero-ken-track--desktop {
      animation: inst-hero-ken-desktop 30s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
      -webkit-animation: inst-hero-ken-desktop 30s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
    }
  }

  .inst-hero-vignette {
    animation: inst-hero-vignette-breathe 48s ease-in-out infinite alternate;
  }

  .inst-hero-scrim {
    animation: inst-hero-scrim-breathe 44s ease-in-out infinite alternate;
  }

  .inst-hero-glint--a {
    animation: inst-hero-glint-a 52s ease-in-out infinite alternate;
  }

  .inst-hero-glint--b {
    animation: inst-hero-glint-b 40s ease-in-out infinite alternate;
  }

  .inst-hero-grid {
    animation: inst-hero-grid-drift 46s linear infinite;
  }

  .inst-hero-sweep::before {
    animation: inst-hero-sweep 11s ease-in-out infinite;
  }
}

/* Slow drift of the blueprint grid (one cell over the cycle). */
@keyframes inst-hero-grid-drift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 72px 72px, 72px 72px;
  }
}

/* Diagonal light sweep: crosses once, then rests for the remainder of the cycle. */
@keyframes inst-hero-sweep {
  0% {
    transform: translateX(-160%) rotate(8deg);
    opacity: 0;
  }
  6% {
    opacity: 0.85;
  }
  34% {
    transform: translateX(560%) rotate(8deg);
    opacity: 0.85;
  }
  42%,
  100% {
    transform: translateX(560%) rotate(8deg);
    opacity: 0;
  }
}

/* Ken Burns: start zoomed in, ease out + gentle pan (alternate reverses). */
@keyframes inst-hero-ken-mobile {
  from {
    transform: scale(1.2) translate3d(-1.4%, 0, 0);
  }
  to {
    transform: scale(1.02) translate3d(1.6%, 0.4%, 0);
  }
}

@keyframes inst-hero-ken-desktop {
  from {
    transform: scale(1.24) translate3d(-1.4%, -0.35%, 0);
  }
  to {
    /* Min scale > 1 + modest pan: avoids right-edge gap on wide viewports. */
    transform: scale(1.07) translate3d(0.6%, 0.2%, 0);
  }
}

@keyframes inst-hero-vignette-breathe {
  from {
    opacity: 0.72;
  }
  to {
    opacity: 1;
  }
}

@keyframes inst-hero-scrim-breathe {
  from {
    opacity: 0.82;
  }
  to {
    opacity: 1;
  }
}

@keyframes inst-hero-glint-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.38;
  }
  to {
    transform: translate3d(-3%, 2%, 0) scale(1.08);
    opacity: 0.62;
  }
}

@keyframes inst-hero-glint-b {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.3;
  }
  to {
    transform: translate3d(2.5%, -1.5%, 0) scale(1.06);
    opacity: 0.52;
  }
}

.inst-hero-veil-gradient {
  background: linear-gradient(
    105deg,
    rgba(11, 44, 74, 0.72) 0%,
    rgba(11, 44, 74, 0.42) 42%,
    rgba(11, 44, 74, 0.18) 68%,
    rgba(11, 44, 74, 0.08) 100%
  );
}

.inst-metric.is-counting .inst-metric-value {
  opacity: 0.92;
}

/* Interactive governance diagram */
.inst-gov-diagram .inst-gov-layer {
  cursor: pointer;
  outline: none;
  transition: opacity 220ms ease, filter 220ms ease;
}

.inst-gov-diagram .inst-gov-layer rect,
.inst-gov-diagram .inst-gov-layer line,
.inst-gov-diagram .inst-gov-layer path {
  transition: fill 220ms ease, stroke 220ms ease, stroke-width 220ms ease;
}

.inst-gov-diagram.is-layer-active .inst-gov-layer:not(.is-active) {
  opacity: 0.38;
}

.inst-gov-diagram .inst-gov-layer.is-active rect:first-of-type,
.inst-gov-diagram .inst-gov-layer:focus-visible rect:first-of-type {
  stroke: #1f6ae1;
  stroke-width: 2.25;
}

.inst-gov-diagram-hint {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Draw-on-scroll diagrams (opt-in: [data-inst-draw] on an <svg> with stroked
   shapes). JS toggles .is-drawn once in view. Filled diagrams are unaffected. */
[data-inst-draw] :is(path, line, rect, circle, polyline) {
  stroke-dasharray: var(--inst-draw-len, 1200);
  stroke-dashoffset: var(--inst-draw-len, 1200);
  transition: stroke-dashoffset 1400ms var(--inst-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

[data-inst-draw].is-drawn :is(path, line, rect, circle, polyline) {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .inst-hero-media {
    top: 0;
    height: 100%;
    transform: none !important;
    will-change: auto;
  }

  .inst-hero-video,
  .inst-hero-sweep {
    display: none;
  }

  .inst-hero-ken-track,
  .inst-hero-vignette,
  .inst-hero-scrim,
  .inst-hero-glint,
  .inst-hero-grid {
    animation: none;
  }

  [data-inst-draw] :is(path, line, rect, circle, polyline) {
    stroke-dashoffset: 0;
    transition: none;
  }

  [data-inst-parallax] {
    transform: none !important;
  }
}