/* ==========================================================================
   PCP — The Business chapter

   Where the earlier chapters are personal, this one is structural. The colour
   moves off near-black onto DEEP NAVY and MIDNIGHT BLUE-BLACK, and the metal
   moves off warm brand gold onto a cooler CHAMPAGNE, so Business reads as a
   different register: modern, scalable, credible — not a sales page.

   Palette here is deliberately its own:
     ground   #04091a  midnight blue-black
     deep     #071731  deep navy
     raise    #0a1e3d  elevated navy (card ground)
     champagne #E8DCB0 cooler and lighter than the brand's #D4AF37
     white    #FFFFFF  clean, used for structure not decoration

   Scoped to .page-business. Defaults are VISIBLE — JS/GSAP animate from a
   hidden state at runtime — so no-JS and reduced motion still read finished.
   ========================================================================== */

.page-business {
  --biz-ground: #04091a;
  --biz-deep: #071731;
  --biz-raise: #0a1e3d;
  --biz-champagne: #E8DCB0;
  --biz-champ-soft: rgba(232, 220, 176, 0.55);
  --biz-line: rgba(232, 220, 176, 0.20);
  --biz-line-strong: rgba(232, 220, 176, 0.45);
  --biz-ink: rgba(255, 255, 255, 0.68);
  --biz-ink-dim: rgba(255, 255, 255, 0.46);

  /* Controlled depth: three planes, not one flat surface. */
  --biz-lift-1: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 34px -22px rgba(0, 0, 0, 0.85);
  --biz-lift-2:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 28px 55px -28px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(232, 220, 176, 0.16);
}

/* The shared `.bg-page` ground is black-to-navy. Business shifts it navy
   forward so the chapter is recognisably a different environment. */
.page-business.bg-page {
  background-color: var(--biz-ground);
  background-image:
    radial-gradient(1000px 640px at 88% 6%, rgba(11, 44, 92, 0.55), transparent 62%),
    radial-gradient(820px 560px at -6% 74%, rgba(7, 23, 49, 0.9), transparent 66%),
    linear-gradient(180deg, #04091a 0%, #061225 52%, #04091a 100%);
}

/* Driven by --hdr (assets/js/header.js) so this page keeps its own tint
   while still starting transparent over its opening section. */
.page-business .site-header { background-color: rgba(4, 9, 26, calc(0.76 * var(--hdr, 1))); }

.page-business .eyebrow { color: var(--biz-champagne); }

/* Champagne replaces warm gold for gradient text in this chapter. */
.page-business .text-gold-gradient {
  background: linear-gradient(140deg, #F7EFD2 0%, #E8DCB0 44%, #C8B274 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Structured grid rhythm -------------------------------------------- */

/* A measured column grid the whole chapter sits on, rather than each section
   inventing its own. */
[data-business] .biz-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 1024px) {
  [data-business] .biz-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  [data-business] .biz-span-4 { grid-column: span 4; }
  [data-business] .biz-span-5 { grid-column: span 5; }
  [data-business] .biz-span-6 { grid-column: span 6; }
  [data-business] .biz-span-7 { grid-column: span 7; }
  [data-business] .biz-span-8 { grid-column: span 8; }
}

/* Hairline register marks, so the grid reads as a system. */
[data-business] .biz-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--biz-line) 12%, var(--biz-line) 88%, transparent);
}

/* ==========================================================================
   The transition: development → application
   The story connection, made structural. PCP develops people; business is one
   environment where that development gets applied. Pure CSS linework — no
   SVG, no canvas — so every label stays real, selectable, focusable text.
   ========================================================================== */

[data-business] .biz-bridge {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  border: 1px solid var(--biz-line);
  border-radius: var(--radius-edit, 4px);
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(11, 44, 92, 0.5) 0%, transparent 60%),
    linear-gradient(160deg, var(--biz-deep) 0%, var(--biz-ground) 100%);
  box-shadow: var(--biz-lift-1);
}

[data-business] .biz-bridge-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

[data-business] .biz-bridge-label {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--biz-champ-soft);
}

[data-business] .biz-bridge-body {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

[data-business] .biz-inputs {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A node: a small structured plate, data-like rather than decorative. */
[data-business] .biz-node {
  position: relative;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--biz-line);
  border-radius: 2px;
  background: linear-gradient(150deg, rgba(10, 30, 61, 0.85) 0%, rgba(4, 9, 26, 0.9) 100%);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}

[data-business] .biz-node-index {
  display: block;
  margin-bottom: 0.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--biz-champ-soft);
}

/* The connector bus. Stub out of each node, down the spine, across to the
   output. Each segment is a 1px gradient that JS draws in sequence. */
[data-business] .biz-wires {
  position: relative;
  min-height: 2px;
}

[data-business] .biz-wire {
  background: linear-gradient(90deg, var(--biz-line-strong), var(--biz-line));
  transform-origin: left center;
}

[data-business] .biz-wire-v {
  background: linear-gradient(180deg, var(--biz-line), var(--biz-line-strong), var(--biz-line));
  transform-origin: top center;
}

/* The output plate: the same system, one step further on. */
[data-business] .biz-output {
  position: relative;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  border: 1px solid var(--biz-line-strong);
  border-radius: var(--radius-edit, 4px);
  background:
    radial-gradient(100% 120% at 0% 0%, rgba(232, 220, 176, 0.07) 0%, transparent 62%),
    linear-gradient(150deg, var(--biz-raise) 0%, var(--biz-deep) 100%);
  box-shadow: var(--biz-lift-2);
}

[data-business] .biz-output-title {
  margin: 0.35rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}

[data-business] .biz-output-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

[data-business] .biz-output-list li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--biz-ink-dim);
}

[data-business] .biz-output-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 4px;
  height: 1px;
  background: var(--biz-champagne);
}

[data-business] .biz-bridge-note {
  margin: clamp(2rem, 4vh, 2.75rem) 0 0;
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  border-top: 1px solid var(--biz-line);
  max-width: 46em;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--biz-ink);
}

/* Desktop: inputs left, wires in a real column, output right. */
@media (min-width: 900px) {
  [data-business] .biz-bridge-body {
    grid-template-columns: minmax(0, 1fr) clamp(5rem, 12vw, 10rem) minmax(0, 1.15fr);
    /* No column gap: the wires column IS the space between the plates. A gap
       here would leave the linework floating, connected to nothing. */
    column-gap: 0;
  }
  [data-business] .biz-wires { align-self: stretch; min-height: 100%; }

  /* Horizontal stubs, one per input row. */
  [data-business] .biz-wire-h {
    position: absolute;
    left: 0;
    width: 50%;
    height: 1px;
  }
  /* Explicit rather than nth-of-type, so reordering the wires cannot silently
     move a stub off its node. */
  [data-business] .biz-wire-h { top: var(--stub, 50%); }

  /* The spine. */
  [data-business] .biz-wire-spine {
    position: absolute;
    left: 50%;
    top: 16.6%;
    height: 66.8%;
    width: 1px;
  }

  /* Out to the output plate. */
  [data-business] .biz-wire-out {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 1px;
  }

  /* A single champagne junction dot where the spine meets the output. */
  [data-business] .biz-junction {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--biz-champagne);
    box-shadow: 0 0 10px rgba(232, 220, 176, 0.6);
  }
}

/* Mobile: the system runs top to bottom instead. */
@media (max-width: 899px) {
  [data-business] .biz-wires { min-height: 2.5rem; }
  [data-business] .biz-wire-h,
  [data-business] .biz-junction { display: none; }
  [data-business] .biz-wire-spine,
  [data-business] .biz-wire-out {
    position: absolute;
    left: 1.25rem;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, var(--biz-line), var(--biz-line-strong));
    transform-origin: top center;
  }
  [data-business] .biz-wire-out { display: none; }
}

/* ==========================================================================
   Cards
   Pointer-following light, restrained perspective, a thin champagne edge on
   engagement, icon movement and internal depth. No flip, no big tilt, no
   glow bloom. Only transform / opacity / box-shadow are transitioned.
   ========================================================================== */

[data-business] .biz-cards {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}

@media (min-width: 640px)  { [data-business] .biz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { [data-business] .biz-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

[data-business] .biz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--biz-line);
  border-radius: var(--radius-edit, 4px);
  /* Internal depth: a lit top edge over a navy body over a darker floor. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 18%),
    linear-gradient(158deg, var(--biz-raise) 0%, var(--biz-deep) 62%, var(--biz-ground) 100%);
  box-shadow: var(--biz-lift-1);
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 520ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 520ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 320ms ease;
}

/* The pointer light. JS sets --mx/--my; this is the only thing that follows
   the cursor, and it stays inside the card. */
[data-business] .biz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    22rem circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 220, 176, 0.11) 0%,
    rgba(232, 220, 176, 0.04) 34%,
    transparent 68%
  );
  transition: opacity 420ms ease;
}

/* The thin active champagne edge. A 1px inset ring, not a glow. */
[data-business] .biz-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(232, 220, 176, 0.5);
  transition: opacity 380ms ease;
}

[data-business] .biz-card:hover,
[data-business] .biz-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--biz-lift-2);
  border-color: transparent;
}

[data-business] .biz-card:hover::before,
[data-business] .biz-card:focus-within::before { opacity: 1; }

[data-business] .biz-card:hover::after,
[data-business] .biz-card:focus-within::after { opacity: 1; }

[data-business] .biz-card:active { transform: translateY(-1px) scale(0.997); }

[data-business] .biz-card > * { position: relative; z-index: 2; }

/* Icon: its own small plate, lifting and brightening with the card. */
[data-business] .biz-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--biz-line);
  border-radius: 2px;
  background: linear-gradient(150deg, rgba(232, 220, 176, 0.08) 0%, transparent 70%);
  color: var(--biz-champagne);
  transition:
    transform 520ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 320ms ease;
}

[data-business] .biz-icon svg { width: 1.2rem; height: 1.2rem; }

[data-business] .biz-card:hover .biz-icon,
[data-business] .biz-card:focus-within .biz-icon {
  transform: translateY(-2px) scale(1.06);
  border-color: var(--biz-line-strong);
}

[data-business] .biz-card-index {
  margin: 1.4rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--biz-champ-soft);
}

[data-business] .biz-card-title {
  margin: 0.45rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

[data-business] .biz-card-body {
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--biz-ink-dim);
}

/* --- Track cards ------------------------------------------------------- */

[data-business] .biz-tracks {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}

@media (min-width: 1024px) { [data-business] .biz-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

[data-business] .biz-track { }

/* The middle track is the structural centre, so it sits one plane forward —
   depth, not a "most popular" badge. */
[data-business] .biz-track-lead {
  border-color: var(--biz-line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 18%),
    radial-gradient(120% 90% at 50% 0%, rgba(232, 220, 176, 0.07) 0%, transparent 58%),
    linear-gradient(158deg, #0c2447 0%, var(--biz-deep) 62%, var(--biz-ground) 100%);
  box-shadow: var(--biz-lift-2);
}

@media (min-width: 1024px) {
  [data-business] .biz-track-lead { transform: translateY(-0.75rem); }
  [data-business] .biz-track-lead:hover,
  [data-business] .biz-track-lead:focus-within { transform: translateY(-1.1rem); }
}

[data-business] .biz-track-step {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--biz-champ-soft);
}

[data-business] .biz-track-name {
  margin: 0.6rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.85rem, 2.8vw, 2.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
}

[data-business] .biz-track-body {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--biz-ink-dim);
}

[data-business] .biz-track-list {
  margin: 1.6rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--biz-line);
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

[data-business] .biz-track-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
}

/* Data-like tick: two hairlines, not a filled icon. */
[data-business] .biz-track-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 1px;
  background: var(--biz-champagne);
}

[data-business] .biz-track-foot { margin-top: auto; padding-top: 1.75rem; }

/* --- Numbered steps --------------------------------------------------- */

[data-business] .biz-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}

[data-business] .biz-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
  border: 1px solid var(--biz-line);
  border-radius: var(--radius-edit, 4px);
  background: linear-gradient(158deg, rgba(10, 30, 61, 0.6) 0%, rgba(4, 9, 26, 0.75) 100%);
  box-shadow: var(--biz-lift-1);
  transition: transform 480ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)), border-color 320ms ease;
}

[data-business] .biz-step:hover { transform: translateX(4px); border-color: var(--biz-line-strong); }

[data-business] .biz-step-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(232, 220, 176, 0.32);
}

[data-business] .biz-step-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

[data-business] .biz-step-body {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--biz-ink-dim);
}

/* --- FAQ -------------------------------------------------------------- */

.page-business .faq { border-color: var(--biz-line); }
.page-business .faq summary:hover h3 { color: var(--biz-champagne); }
.page-business .faq-icon { color: var(--biz-champ-soft); }

/* --- Closing band ----------------------------------------------------- */

/* Structured navy, not a gold slab — this chapter closes credible, not loud. */
[data-business] .biz-close {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--biz-line-strong);
  border-radius: var(--radius-edit, 4px);
  background:
    radial-gradient(90% 130% at 88% 0%, rgba(232, 220, 176, 0.09) 0%, transparent 58%),
    linear-gradient(150deg, #0c2447 0%, var(--biz-deep) 55%, var(--biz-ground) 100%);
  box-shadow: var(--biz-lift-2);
  text-align: center;
}

/* Faint measured linework, so even the CTA reads as system rather than sell. */
[data-business] .biz-close::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(90deg, var(--biz-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--biz-line) 1px, transparent 1px);
  background-size: clamp(4rem, 9vw, 7rem) clamp(4rem, 9vw, 7rem);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 74%);
}

[data-business] .biz-close > * { position: relative; }

[data-business] .biz-close-title {
  margin: 1.25rem auto 0;
  max-width: 34rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}

[data-business] .biz-close-body {
  margin: 1.5rem auto 0;
  max-width: 32rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--biz-ink);
}

/* --- Motion policy ---------------------------------------------------- */

/* Coarse pointers get none of the pointer tracking; the card still lifts. */
@media (hover: none) {
  [data-business] .biz-card::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-business] .biz-card,
  [data-business] .biz-icon,
  [data-business] .biz-step {
    transition: none;
    transform: none !important;
    will-change: auto;
  }
  [data-business] .biz-card::before { display: none; }
  [data-business] .biz-wire,
  [data-business] .biz-wire-v { transform: none !important; }
}

@media (max-width: 767px) {
  .page-business { --biz-lift-2: 0 1px 0 rgba(255,255,255,0.07) inset, 0 22px 44px -26px rgba(0,0,0,0.9), 0 0 0 1px rgba(232,220,176,0.16); }
}

/* ==========================================================================
   The mansion as one continuous ground — business page
   --------------------------------------------------------------------------
   Same treatment as Home and About. The room is painted on .pcp-cinematic-bg,
   the single position:fixed, inset:0, z-index:-1 layer that already sits
   behind all content. One layer means it never scrolls, there is no seam
   between sections, and no section owns a background block of its own.

   The veil is the same gradient the other pages carry (0.82-0.96), so the
   darkness behind the copy — and therefore its legibility — matches exactly.

   This file is loaded by business.html and by nothing else, so these rules
   need no page class and cannot reach another page.
   ========================================================================== */
.pcp-cinematic-bg {
  background-image:
    linear-gradient(180deg,
      rgba(3, 10, 20, 0.96) 0%,
      rgba(3, 10, 20, 0.84) 12%,
      rgba(3, 10, 20, 0.82) 88%,
      rgba(3, 10, 20, 0.96) 100%),
    url('../media/backgrounds/pcp-business-background.png');
  background-size: cover, cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* Section fills cleared, so the one ground shows through unbroken. */
.surface-navy,
.surface-navy-solid,
.surface-elevated {
  background: none;
}

/* The bar stays opaque at the exact colour it already uses. It was
   translucent, which over a fixed room would have let the mansion show
   through the navigation. Only the alpha changes — the hue does not.

   .page-business is required, not decorative: the rule 600 lines above sets
   this same property at that specificity, and a bare .site-header would lose
   to it. Declared later in the same file, so it wins on order. */
.page-business .site-header { background-color: rgb(4, 9, 26); }

/* ==========================================================================
   "What PCP develops" — the outer box carries a photograph
   --------------------------------------------------------------------------
   .biz-bridge is the outer box and appears exactly once in the whole site, so
   this reaches that box and nothing else. The page's own background is not
   involved: this is a background on the card, not on the page.

   The box's base layer was linear-gradient(160deg, #071731, #04091a) — fully
   opaque, so a photograph behind it would never have shown. That same
   gradient is now the VEIL, at the alpha that keeps the diagram legible, and
   the photograph sits underneath it. The radial accent at the top left is
   repeated verbatim so the card keeps the light it already had.

   Everything in this box is thin: 0.58rem labels at 0.28em tracking, and
   hairline wires at 0.20 alpha. The veil is therefore heavier than the one
   used on cards that only carry a heading and a paragraph.

   CLIPPING. background-clip: padding-box stops the image at the inside edge
   of the 1px border; overflow: hidden makes the 4px corners clip it. Checked
   that nothing inside the box is drawn outside it — the wires and nodes are
   all within the padding box — so clipping costs the diagram nothing.
   ========================================================================== */
[data-business] .biz-bridge {
  /* Veil alphas found by sweeping them against measured contrast rather than
     chosen by eye. The weakest piece in the box is one of the 0.58rem labels;
     at 0.24 / 0.64 / 0.70 it reads 5.51:1 on a laptop and 5.12:1 on a phone,
     both clear of the 4.5:1 AA line. The next step down, 0.20 / 0.60 / 0.66,
     drops it to 4.40:1 and fails, so this is the lightest the veil can be
     while the diagram still reads.

     Against the first version (0.5 / 0.90 / 0.93) the photograph is 66%
     brighter and carries 3.3x the tonal variation, which is the part a
     visitor actually sees. The image itself is untouched: same file, same
     cover sizing, same centre — only what sits on top of it changed. */
  background-image:
    radial-gradient(120% 100% at 12% 0%, rgba(11, 44, 92, 0.24) 0%, transparent 60%),
    linear-gradient(160deg, rgba(7, 23, 49, 0.64) 0%, rgba(4, 9, 26, 0.70) 100%),
    url('../media/backgrounds/pcp-develops-bg.jpg');
  background-size: auto, auto, cover;
  background-position: 0% 0%, 0% 0%, 50% 50%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-clip: padding-box;
  overflow: hidden;
}

/* ==========================================================================
   "Your business deserves a system around it" — the Home loop behind it
   --------------------------------------------------------------------------
   .biz-close appears once in the site, so this reaches that box and nothing
   else. Its size, padding, border and radius are untouched; only what is
   painted inside it changes.

   STACKING. The box is position: relative with overflow: hidden, so the
   video is clipped to its rounded corners without any extra clipping rule.
   Four layers, back to front:

     0  the video
     1  the veil that keeps the words readable
     2  ::before, the box's own grid texture, which would otherwise be
        buried by the video
     3  the copy and the button

   [data-business] .biz-close > * already sets position: relative on every
   child, which includes the video and the veil; the rules below are declared
   later at the same specificity and take it back.
   ========================================================================== */
[data-business] .biz-close-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: 0.58;
  filter: saturate(0.85) contrast(1.04);
  pointer-events: none;
}
[data-business] .biz-close-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 9, 26, 0.72) 0%, rgba(7, 23, 49, 0.56) 36%,
                    rgba(7, 23, 49, 0.60) 66%, rgba(4, 9, 26, 0.80) 100%),
    radial-gradient(80% 60% at 50% 50%, rgba(4, 9, 26, 0.34), transparent 80%);
}
[data-business] .biz-close::before { z-index: 2; }
[data-business] .biz-close > .biz-bridge-label,
[data-business] .biz-close > .biz-close-title,
[data-business] .biz-close > .biz-close-body,
[data-business] .biz-close > .mt-9 { z-index: 3; }

/* Reduced motion: no loop at all, and the box falls back to its gradient. */
@media (prefers-reduced-motion: reduce) {
  [data-business] .biz-close-video,
  [data-business] .biz-close-veil { display: none; }
}