/* Screen 03 — "Corner 3" artwork composited on the 3840×2160 design canvas.
   Geometry comes from the delivered con3 assets: every .lyr / .tx carries its
   design-pixel origin in --x / --y, so 1 unit == 1 design px == var(--u). */

:root {
  --font-art: "DB Heavent";
}

.page--art {
  padding: 0;
  background: #04081c;
}

.page--art .hud-frame {
  display: none;
}

/* ---- Layer primitives (shared with screen-01) ---- */

.lyr {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* --y is the box top the line would have at line-height:1. Subtracting the
   half-leading keeps the first cap top at --y + 0.235em whatever --lh is. */
.tx {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc((var(--y) - (var(--lh, var(--fs)) - var(--fs)) / 2) * var(--u));
  margin: 0;
  padding: 0;
  font-family: var(--font-art);
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh, var(--fs)) * var(--u));
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: #fff;
  z-index: 3;
  /* Live text is artwork, never a target: without this the labels over a
     button swallow every tap that lands on a glyph. */
  pointer-events: none;
}

/* Sits above the button art, which the hotspot over it keeps clickable. */
.tx--on-btn {
  z-index: 5;
}

/* ---- Page 01 — Excellence Journey ---- */

.tx--title {
  font-weight: 700;
}

.tx--subtitle {
  font-weight: 400;
  color: #4bf8fa;
}

.tx--pill {
  font-weight: 700;
}

.tx--chip {
  font-weight: 500;
}

.tx--card-head {
  font-weight: 700;
}

.tx--card-lead {
  font-weight: 700;
}

.tx--bul {
  list-style: none;
  font-weight: 700;
}

.tx--bul li {
  position: relative;
  padding-left: calc(var(--bul, 23) * var(--u));
}

.tx--bul li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* The panel copy is centred on the panel, so the run is a centred box rather
   than a left-anchored one; --x / --w give its edges. */
.tx--centred {
  width: calc(var(--w) * var(--u));
  text-align: center;
}

.tx--panel-head {
  font-weight: 700;
  color: #4cfcfd;
}

.tx--panel-copy {
  font-weight: 400;
}

.tx--btn-head {
  font-weight: 700;
}

.tx--btn-sub {
  font-weight: 700;
}

/* ---- Page 02 — Ownership Mindset & Accountability ---- */

.tx--quote {
  font-weight: 700;
  color: #4bf8fa;
}

.tx--badge {
  font-weight: 700;
}

.tx--head {
  font-weight: 700;
}

/* Each card's accent, used for its three section labels. */
.card--define {
  --accent: #00adee;
}

.card--demonstrate {
  --accent: #f69220;
}

.card--diffuse {
  --accent: #3fb98b;
}

.tx--label {
  font-weight: 700;
  color: var(--accent);
}

.tx--body {
  font-weight: 400;
}

/* The reference sets a wider-than-a-word-space gap inside "OUR  APPROACH".
   Spelling it as an explicit width keeps the label the same point size as
   "OUR TEAM" beside it, which padding it out with extra spaces would not. */
.tx-gap {
  display: inline-block;
  width: calc(var(--g) * var(--u));
}

/* Tracking, in design px, for a line that has to measure up to the one below
   it: the point size stays put and the letters carry the difference. */
.tx-track {
  letter-spacing: calc(var(--ls) * var(--u));
}

.tx--chip-lg {
  font-weight: 700;
}

/* ---- Page 03 — 2026 Engineering ADP Reform ---- */

.tx--cyan {
  color: #4bf8fa;
}

.tx--banner {
  font-weight: 700;
}

/* The three rotation banners sit on narrow bevelled pills, where bold ink runs
   into the chamfer; medium keeps the label inside the pill's lit face. */
.tx--route {
  font-weight: 500;
}

.tx--note {
  font-weight: 400;
}

.tx--chip-sm {
  font-weight: 400;
}

.tx--stack {
  font-weight: 700;
  color: #4bf8fa;
}

.hotspot {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  touch-action: manipulation;
  appearance: none;
  -webkit-appearance: none;
  transform: scale(1);
  transition:
    transform var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out),
    opacity var(--motion-fast) var(--ease-out);
}

/* Declared after .hotspot so its z-index wins: an artwork-backed button has to
   sit above the labels drawn over it, or the glyphs eat the taps. */
.hotspot--art {
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  z-index: 6;
  /* The delivered pill is a rounded rectangle of radius 40, not a stadium. */
  border-radius: calc(40 * var(--u));
}

/* The two journey buttons are the only things on the landing page that can be
   tapped, and the artwork alone does not say so. A ring in the page's own cyan,
   breathing slowly, marks them as targets; it settles the moment one is
   pressed so the feedback reads as a press and not as more idling. */
.hotspot--art::after {
  content: "";
  position: absolute;
  inset: calc(-8 * var(--u));
  /* Offset outwards by 8, so the radius has to grow by 8 to stay concentric
     with the pill's corners; inheriting it would round the ends too tightly. */
  border-radius: calc(48 * var(--u));
  border: calc(3 * var(--u)) solid rgba(75, 248, 250, 0.6);
  box-shadow:
    0 0 calc(24 * var(--u)) rgba(75, 248, 250, 0.45),
    inset 0 0 calc(20 * var(--u)) rgba(75, 248, 250, 0.2);
  pointer-events: none;
  animation: hint-pulse 2.4s ease-in-out infinite;
}

.hotspot--art:active::after,
.hotspot--art.is-pressed::after {
  animation: none;
  opacity: 1;
  border-color: rgba(160, 253, 255, 0.95);
  box-shadow:
    0 0 calc(34 * var(--u)) rgba(75, 248, 250, 0.7),
    inset 0 0 calc(26 * var(--u)) rgba(75, 248, 250, 0.35);
}

@keyframes hint-pulse {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

.hotspot:focus-visible {
  outline: calc(4 * var(--u)) solid var(--color-focus);
  outline-offset: calc(6 * var(--u));
}

.hotspot:active,
.hotspot.is-pressed {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(0.985);
  opacity: 0.96;
}

.hotspot--cta {
  top: 79%;
  height: 9%;
  min-height: var(--touch-min);
  border-radius: 999px;
}

.hotspot--ownership {
  left: 9.5%;
  width: 29.5%;
}

.hotspot--adp {
  left: 40.5%;
  width: 30.5%;
}

.nav-chrome--cluster {
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  align-items: unset;
  justify-content: unset;
  pointer-events: none;
  z-index: var(--nav-chrome-z);
}

/* Home button. The design draws it only on the two detail pages, at a 104 px
   disc centred on (3576, 1916) — a flat pale face lit along its top rim,
   carrying a navy house outline. */
.nav-chrome--cluster.is-detail #nav-home,
.nav-chrome--cluster:not(.is-hub) #nav-home {
  left: 93.13%;
  top: 88.73%;
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
  min-width: calc(104 * var(--u));
  min-height: calc(104 * var(--u));
  border: 0;
  background: rgba(116, 139, 170, 0.94);
  box-shadow:
    inset 0 calc(6 * var(--u)) calc(8 * var(--u)) calc(-2 * var(--u))
      rgba(255, 255, 255, 0.95),
    inset 0 calc(-6 * var(--u)) calc(9 * var(--u)) calc(-3 * var(--u))
      rgba(255, 255, 255, 0.6),
    0 calc(5 * var(--u)) calc(16 * var(--u)) rgba(0, 6, 22, 0.3);
  color: #122851;
}

.cluster-glyph {
  width: 50%;
  height: 44.23%;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .hotspot {
    transition: none;
  }

  /* Keep the ring, drop the breathing. */
  .hotspot--art::after {
    animation: none;
    opacity: 0.85;
  }
}