/* Brand development: a split title, stacking reasons, and the identity prism */

/* 1. "Brand Identity vs. Visual Systems": the two halves arrive from opposite sides */

.versus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25em .4em;
  font-size: clamp(34px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -.04em;
}
.versus-vs {
  font-size: .5em;
  font-weight: 400;
  letter-spacing: 0;
  opacity: .55;
}
.versus-b { color: transparent; -webkit-text-stroke: 1.5px var(--navy); }
.js .versus span { display: inline-block; opacity: 0; transition: opacity .8s ease, transform 1s var(--ease); }
.js .versus-a { transform: translateX(-12vw); }
.js .versus-b { transform: translateX(12vw); transition-delay: .15s; }
.js .versus-vs { transform: scale(.4); transition-delay: .35s; }
.js .is-in .versus span { opacity: 1; transform: none; }

.brand-lead {
  max-width: 34em;
  margin: clamp(20px, 4vh, 44px) 0 0 auto;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.45;
}

/* Reasons: each card pins near the top and the next slides over it */

.brand-reasons { padding-top: 0; }
.reasons-title {
  max-width: 16em;
  margin: 0 0 clamp(20px, 4vh, 40px);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.reasons {
  margin: 0;
  padding: 0;
  list-style: none;
}
.reason {
  position: sticky;
  top: calc(16px + var(--n) * 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  min-height: clamp(260px, 42vh, 400px);
  margin-bottom: 18vh;
  padding: clamp(26px, 3.4vw, 52px);
  border-radius: 22px;
  box-shadow: 0 -8px 40px rgba(16, 40, 76, .14);
}
.reason:last-child { margin-bottom: 4vh; }
.reason:nth-child(1) { background: var(--navy); color: var(--white); }
.reason:nth-child(2) { background: #cddcf0; color: var(--navy); }
.reason:nth-child(3) { background: var(--white); color: var(--navy); }
.reason h4 {
  align-self: start;
  margin: 0;
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.reason p {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
}

/* 2. The framework's introduction, above the prism */
.framework-lead {
  max-width: 46em;
  margin: 0 0 clamp(20px, 4vh, 40px);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.5;
}

/* The prism: a large hexagon with its six pillars around it. Hovering a pillar
   spins the hexagon, shrinks it to the right, and opens that pillar's frame */

.prism-stage {
  --hex: min(50vh, 42vw);
  position: relative;
  height: clamp(520px, 74vh, 820px);
}
.prism {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hex);
  height: var(--hex);
  transform: translate(-50%, -50%);
  transition: transform 1s var(--ease);
}
.prism-stage.is-open .prism { transform: translate(calc(-50% + 24vw), -50%) scale(.6); }

.prism-hex {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--navy);
}

.pillar {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px 18px;
  border: 1.5px solid var(--navy);
  border-radius: 100px;
  background: var(--paper);
  color: var(--navy);
  font: 700 clamp(17px, 1.7vw, 26px) / 1 var(--grotesk);
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  /* main.js places each pillar around the hexagon */
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0));
  transition: background-color .3s, color .3s, scale .3s;
}
.pillar:hover, .pillar.is-active { background: var(--navy); color: var(--white); }
.pillar.is-active { scale: 1.08; }

/* The frame on the left */
.prism-frame {
  position: absolute;
  left: 0;
  top: 50%;
  width: min(44%, 580px);
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid rgba(16, 40, 76, .2);
  border-left: 5px solid var(--navy);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 24px 60px rgba(16, 40, 76, .14);
  opacity: 0;
  transform: translate(-40px, -50%);
  transition: opacity .5s ease, transform .8s var(--ease);
  pointer-events: none;
}
.prism-stage.is-open .prism-frame { opacity: 1; transform: translate(0, -50%); pointer-events: auto; transition-delay: .2s; }

.frame-panel { animation: panel-in .45s ease both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.frame-side {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
}
.frame-panel h3 {
  margin: 0 0 16px;
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.frame-panel h3 span { display: block; margin-top: 6px; font-size: .45em; font-weight: 400; letter-spacing: 0; opacity: .7; }
.frame-panel ul { display: grid; gap: 10px; margin: 0 0 18px; padding-left: 1.1em; }
.frame-panel li, .frame-purpose { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; }
.frame-purpose { margin: 0; padding-top: 16px; border-top: 1px solid rgba(16, 40, 76, .18); }

@media (max-width: 760px) {
  .brand-lead { margin-left: 0; }
  .reason { grid-template-columns: 1fr; top: calc(10px + var(--n) * 22px); min-height: 0; }
  .prism-stage { --hex: 62vw; height: auto; display: flex; flex-direction: column-reverse; gap: 28px; }
  .prism { position: relative; left: auto; top: auto; margin: 70px auto; transform: none; }
  .prism-stage.is-open .prism { transform: scale(.8); }
  .pillar { font-size: 14px; padding: 7px 11px; }
  .prism-frame { position: relative; top: auto; width: auto; display: none; transform: none; }
  .prism-stage.is-open .prism-frame { display: block; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .versus span { opacity: 1; transform: none; transition: none; }
  .prism, .prism-frame { transition: none; }
  .frame-panel { animation: none; }
}