/* --------------------------------------------------------------------------
   Pillar & Spurs
   The client-partner pillar as a stack of cylinders, the specialist spurs as
   skewed bars either side, and the leadership team as a bar underneath.
   Sizes are container-query units, so the whole graphic scales with its own
   width (60 / 80 / 90% of the screen) rather than the viewport.
   -------------------------------------------------------------------------- */

/* Webflow sets display: contents on the component's host inline, so layout
   lives on .ps rather than :host. */
:host {
  display: block;
}

.ps {
  box-sizing: border-box;
  width: var(--ps-w-d, 60%);
  margin-inline: auto;
  /* cq units inside resolve against this box. */
  container-type: inline-size;
}

@media (max-width: 991px) {
  .ps { width: var(--ps-w-t, 80%); }
}

@media (max-width: 767px) {
  .ps { width: var(--ps-w-m, 90%); }
}

.ps *,
.ps *::before,
.ps *::after {
  box-sizing: border-box;
}

.ps ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps p {
  margin: 0;
}

.ps-stage {
  --ps-oxford-blue: #07274b;
  --ps-polynesian-blue: #0e4c92;
  --ps-celestial-blue: #469dc8;
  --ps-carolina-blue: #84bcda;
  --ps-alice-blue: #e0edf5;
  --ps-ice-white: #fcfcfc;
  --ps-paynes-gray: #4c5870;

  --ps-skew: -18deg;
  --ps-radius: 0.6cqw;
  --ps-text: clamp(12px, 1.75cqw, 21px);
  --ps-head-text: clamp(10px, 1.15cqw, 15px);
  --ps-disc-h: max(60px, 9.4cqw);
  --ps-lid: 24%;

  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 33cqw) 1fr;
  grid-template-areas:
    "hl hc hr"
    "l  c  r"
    "b  b  b";
  column-gap: 3cqw;
  row-gap: 1.6cqw;
  padding: 2cqw 0;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  color: var(--ps-oxford-blue);
}

/* Everything sits above the ring. */
.ps-stage > * {
  position: relative;
  z-index: 1;
}

.ps-orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--ps-paynes-gray);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  opacity: 0.45;
}

.ps-head {
  font-size: var(--ps-head-text);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ps-paynes-gray);
}

.ps-head-l { grid-area: hl; }
.ps-head-c { grid-area: hc; }
.ps-head-r { grid-area: hr; }

/* ---------- Pillar ---------- */

.ps-pillar {
  grid-area: c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.4cqw 1.6cqw;
  border-radius: calc(var(--ps-radius) * 2);
  background: var(--ps-alice-blue);
  transform-origin: 50% 100%;
}

.ps-discs {
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
}

/* A cylinder: straight sides, an elliptical foot from the border radius, and a
   lighter elliptical lid sitting on top. */
.ps-disc {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--ps-disc-h);
  padding: 1.2cqw 1.4cqw;
  border-radius: 0 0 50% 50% / 0 0 var(--ps-lid) var(--ps-lid);
  background: linear-gradient(180deg, #15579d 0%, var(--ps-polynesian-blue) 58%, #0a3c78 100%);
  box-shadow: 0 0.3cqw 0.9cqw rgba(7, 39, 75, 0.18);
  color: var(--ps-ice-white);
  text-align: center;
  text-wrap: balance;
  font-size: var(--ps-text);
  font-weight: 600;
  line-height: 1.25;
}

.ps-disc::before {
  content: "";
  position: absolute;
  top: calc(var(--ps-lid) / -2);
  left: 0;
  right: 0;
  height: var(--ps-lid);
  /* Slightly proud of the body, as a real lid sits on a tin. */
  border-radius: 50%;
  background: linear-gradient(180deg, #4d87c4 0%, #2a6cb0 100%);
}

.ps-disc > span {
  position: relative;
  z-index: 1;
}

/* ---------- Spurs and the base bar ---------- */

.ps-col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 1.6cqw;
  padding-block: 2cqw;
}

.ps-col-l { grid-area: l; }
.ps-col-r { grid-area: r; }
.ps-base { grid-area: b; }

.ps-shape {
  padding: 1.15cqw 1.4cqw;
  border-radius: var(--ps-radius);
  background: var(--ps-carolina-blue);
  transform: skewX(var(--ps-skew));
}

.ps-shape > span {
  display: block;
  text-align: center;
  text-wrap: balance;
  font-size: var(--ps-text);
  font-weight: 600;
  line-height: 1.25;
  /* Cancels the skew, so only the bar is slanted. */
  transform: skewX(calc(-1 * var(--ps-skew)));
}

.ps-base .ps-shape {
  padding-block: 1.5cqw;
}

/* ---------- Animation ----------
   Armed by JS before the first paint; .ps[data-in="true"] runs it. Nothing is
   armed without JS, so the finished diagram shows as-is. */

.ps[data-armed] .ps-pillar,
.ps[data-armed] .ps-disc,
.ps[data-armed] .ps-spur,
.ps[data-armed] .ps-base {
  opacity: 0;
}

.ps[data-armed] .ps-pillar { transform: scaleY(0.2); }
.ps[data-armed] .ps-col-l .ps-spur { transform: translateX(-140%); }
.ps[data-armed] .ps-col-r .ps-spur { transform: translateX(140%); }
.ps[data-armed] .ps-base { transform: translateY(45%); }
.ps[data-armed] .ps-orbit { opacity: 0; }

.ps[data-armed][data-in="true"] .ps-pillar,
.ps[data-armed][data-in="true"] .ps-spur,
.ps[data-armed][data-in="true"] .ps-base {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--ps-spur-dur, 0.6s) ease var(--ps-d, 0s),
    transform var(--ps-spur-dur, 0.6s) cubic-bezier(0.22, 0.9, 0.26, 1) var(--ps-d, 0s);
}

.ps[data-armed][data-in="true"] .ps-pillar {
  transition-duration: 0.55s;
  transition-timing-function: cubic-bezier(0.22, 0.9, 0.26, 1.02);
}

/* Each cylinder drops in and settles with a short squash. */
.ps[data-armed][data-in="true"] .ps-disc {
  animation: ps-drop var(--ps-disc-dur, 0.62s) cubic-bezier(0.25, 0.85, 0.35, 1) var(--ps-d, 0s) both;
}

@keyframes ps-drop {
  0% { opacity: 0; transform: translateY(-230%) scaleY(1.06); }
  55% { opacity: 1; transform: translateY(0) scaleY(0.93); }
  75% { transform: translateY(0) scaleY(1.04); }
  100% { opacity: 1; transform: none; }
}

.ps[data-armed][data-in="true"] .ps-orbit {
  opacity: 0.45;
  transition: opacity 1s ease 0.15s;
}

/* A slow drift around the ring, once everything has landed. */
.ps[data-armed][data-in="true"] .ps-orbit ellipse {
  animation: ps-drift 90s linear 1.4s infinite;
}

@keyframes ps-drift {
  to { stroke-dashoffset: -120; }
}

@media (prefers-reduced-motion: reduce) {
  .ps[data-armed] .ps-pillar,
  .ps[data-armed] .ps-disc,
  .ps[data-armed] .ps-spur,
  .ps[data-armed] .ps-base,
  .ps[data-armed] .ps-orbit {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .ps[data-armed] .ps-orbit { opacity: 0.45; }
}

/* ---------- Mobile ----------
   Too narrow for three columns: the pillar goes on top, then the spurs in two
   columns beneath it (still sliding in from their own side), then the base. */
@media (max-width: 767px) {
  .ps-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hc hc"
      "c  c"
      "hl hl"
      "l  r"
      "b  b";
    column-gap: 3cqw;
    row-gap: 3cqw;
  }

  .ps-head-r { display: none; }
  .ps-head-l { margin-top: 1cqw; }

  .ps-stage {
    --ps-text: clamp(12px, 3.4cqw, 18px);
    --ps-head-text: clamp(10px, 2.4cqw, 13px);
    --ps-disc-h: max(56px, 16cqw);
    --ps-radius: 1.2cqw;
  }

  .ps-pillar {
    padding: 5cqw 4cqw;
    border-radius: 3cqw;
  }

  .ps-discs { gap: 4cqw; }

  .ps-col {
    justify-content: flex-start;
    gap: 3cqw;
    padding-block: 0;
  }

  .ps-shape { padding: 2.6cqw 2cqw; }
  .ps-base .ps-shape { padding-block: 3.4cqw; }
}