/* Section 03 — Positioning ("One person. Zero handoffs.")
   All classes prefixed pos-. Three full-width bands on the cream canvas:
   statement → card → process strip. */

.pos-section {
  position: relative;
  padding: 120px 40px 100px;
  background: transparent; /* cream canvas shows through */
}

.pos-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
}

/* ---------- Band 1: the statement owns the frame ---------- */

.pos-kicker {
  font-family: var(--font-inter);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body-sm);
  color: var(--color-stone-gray);
  margin-bottom: var(--spacing-20);
}

.pos-statement {
  font-family: var(--font-inter);
  font-size: min(160px, 11.1vw); /* poster scale, fitted beside the art */
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.06em;
  word-spacing: 0.03em;
  line-height: 0.95;
  color: var(--color-ink-black);
}

.pos-statement-line {
  display: block;
  white-space: nowrap;
}

/* ---------- Band 1b: the character animation, right of the statement ---------- */

.pos-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.pos-lead-text { flex: 1 1 auto; min-width: 0; }

.pos-lead-art {
  flex: none;
  display: flex;
  justify-content: flex-end;
}

.pos-lead-video {
  display: block;
  height: 580px;
  width: auto;
  max-width: none;
}

/* ---------- Band 2: the card, full width, two text columns ---------- */

.pos-card {
  width: 100%;
  background: var(--color-pure-white);
  border-radius: 64px;
  padding: 76px 72px 80px;
  margin-top: 88px;
  text-align: center;
}

.pos-nameplate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.pos-monogram {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 2.5px solid var(--color-ink-black);
  border-radius: 50%;
  font-family: var(--font-inter);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
}

.pos-name {
  font-family: var(--font-inter);
  font-size: 46px;
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-ink-black);
}

.pos-card-lead {
  font-family: var(--font-inter);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-ink-black);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.pos-card-line {
  font-family: var(--font-inter);
  font-size: var(--text-subheading); /* 20px */
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-stone-gray);
}

/* ---------- Band 3: the real person, hugged by the ribbon ---------- */

.pos-portrait {
  position: relative;
  width: min(1080px, 100%);
  margin: 150px auto 30px;
}

.pos-portrait-media {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-illustration); /* 63.75px */
  overflow: hidden;
  line-height: 0;
}

.pos-portrait-video,
.pos-portrait-ill {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* the illustrated frame crossfades in over the frozen last frame */
.pos-portrait-ill {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.pos-portrait-done .pos-portrait-ill { opacity: 1; }

/* The ribbon is one closed ellipse split into two arcs that meet exactly at
   the left and right seams — the only place it "ends" is behind the frame. */
.pos-portrait-ribbon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: auto;
  aspect-ratio: 1400 / 1000;
  max-width: none;
  pointer-events: none;
  overflow: visible;
}

.pos-portrait-ribbon-back { z-index: 0; }
.pos-portrait-ribbon-front { z-index: 2; }

/* the hug: both arcs draw on from the seams after the video settles */
.pos-ribbon-stroke {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.25s cubic-bezier(0.33, 0, 0.2, 1);
}

.pos-portrait-done .pos-ribbon-stroke { stroke-dashoffset: 0; }
.pos-portrait-done .pos-portrait-ribbon-back .pos-ribbon-stroke { transition-delay: 0.5s; }
.pos-portrait-done .pos-portrait-ribbon-front .pos-ribbon-stroke { transition-delay: 0.72s; }

.pos-ribbon-text {
  font-family: var(--font-inter);
  font-size: 46px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  fill: var(--color-coral-pop);
  opacity: 0;
  transition: opacity 0.8s ease 1.7s;
}

.pos-portrait-done .pos-ribbon-text { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pos-ribbon-stroke,
  .pos-ribbon-text,
  .pos-portrait-ill { transition: none; }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 1180px) {
  .pos-lead { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pos-lead-art { justify-content: flex-start; width: 100%; }
  .pos-lead-video { height: 460px; }
  .pos-card { padding: 48px 40px; }
  .pos-name { font-size: 34px; }
  .pos-card-lead { font-size: 24px; }
  .pos-ribbon-text { font-size: 34px; }
}

@media (max-width: 760px) {
  .pos-section { padding: 90px 24px 80px; }
  .pos-statement { font-size: 15vw; }
  .pos-lead-video { height: 340px; }
  .pos-portrait { margin-top: 90px; }
  .pos-ribbon-text { font-size: 26px; }
}


/* ---------- quiet atmosphere ---------- */

.pos-cluster { right: 6%; top: 7%; }