/* ===========================================================
   Triveni Power - Company Positioning
   Always-dark band. Split intro: headline left, body right.
   Three-pillar row with orange accent left-bar on reveal.
   =========================================================== */

.positioning {
  /* Local dark scope - same pattern as .hero */
  --ink:          #FFFFFF;
  --ink-80:       rgba(255, 255, 255, 0.84);
  --ink-60:       rgba(255, 255, 255, 0.60);
  --ink-40:       rgba(255, 255, 255, 0.42);
  --ink-12:       rgba(255, 255, 255, 0.16);
  --ink-06:       rgba(255, 255, 255, 0.08);
  --paper:        #231F20;
  --accent:       #F58220;
  --secondary:    #1B5A90;

  background: #000000;          /* solid black per spec */
  color: var(--ink);
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
}

/* =========================================================
   AURORA BACKGROUND - layered animated gradients (Aceternity-style)
   Cursor parallax is driven by --aurora-x / --aurora-y set in JS.
   ========================================================= */
.positioning__aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Soft top/bottom fade so the aurora melts into adjacent sections */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.positioning__aurora-layer {
  position: absolute;
  inset: -20%;
  filter: blur(48px);
  will-change: transform, background-position;
  transform:
    translate3d(calc(var(--aurora-x, 0px) * 0.6), calc(var(--aurora-y, 0px) * 0.6), 0);
  transition: transform 420ms var(--ease-out);
}

/* Layer A - warm (brand orange + amber) */
.positioning__aurora-layer--a {
  background:
    repeating-linear-gradient(
      100deg,
      rgba(245,130,32,0.00) 0%,
      rgba(245,130,32,0.00) 7%,
      rgba(245,130,32,0.35) 10%,
      rgba(255,194,14,0.35) 15%,
      rgba(245,130,32,0.00) 20%,
      rgba(245,130,32,0.00) 25%
    ),
    repeating-linear-gradient(
      100deg,
      rgba(35,31,32,0)   0%,
      rgba(35,31,32,0)  10%,
      rgba(35,31,32,0.45) 12%,
      rgba(35,31,32,0)  14%,
      rgba(35,31,32,0)  22%
    );
  background-size: 300% 200%;
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: posAuroraDrift 38s linear infinite;
}
/* Layer B - cool counter-drift (navy) for depth */
.positioning__aurora-layer--b {
  background:
    repeating-linear-gradient(
      100deg,
      rgba(23,71,158,0.00) 0%,
      rgba(23,71,158,0.00) 12%,
      rgba(23,71,158,0.32) 16%,
      rgba(118,176,67,0.18) 22%,
      rgba(23,71,158,0.00) 28%,
      rgba(23,71,158,0.00) 40%
    );
  background-size: 280% 220%;
  opacity: 0.50;
  mix-blend-mode: screen;
  animation: posAuroraDrift 52s linear infinite reverse;
  transform:
    translate3d(calc(var(--aurora-x, 0px) * -0.4), calc(var(--aurora-y, 0px) * -0.4), 0);
}

@keyframes posAuroraDrift {
  0%   { background-position: 0% 0%,   0% 0%; }
  50%  { background-position: 200% 50%, 200% 50%; }
  100% { background-position: 0% 0%,   0% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .positioning__aurora-layer { animation: none !important; transition: none !important; }
}

.positioning__container {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

/* -------- Intro: split headline / body ------------------- */
.positioning__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
  margin-bottom: clamp(56px, 7vw, 104px);
}

.positioning__index {
  font-family: "Inter", var(--font-sans), system-ui, sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  display: inline-block;
  margin-bottom: var(--s-4);
}
.positioning__index::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--ink-40);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-1px);
}

.positioning__title {
  font-family: "Raleway", var(--font-display);
  font-size: var(--fs-l);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 900ms var(--ease-out),
              transform 900ms var(--ease-out);
}
.positioning__title em {
  font-style: normal;
  color: var(--accent);
}
.positioning__intro[data-revealed="true"] .positioning__title {
  opacity: 1;
  transform: translateY(0);
}

.positioning__body-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
}

.positioning__body {
  font-size: var(--fs-l);
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0;
  /* Base color painted via gradient so a brighter band can sweep across for shine */
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.82) 0%,
    rgba(255,255,255,0.82) 42%,
    rgba(255,255,255,1.00) 50%,
    rgba(255,255,255,0.82) 58%,
    rgba(255,255,255,0.82) 100%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out) 0.2s,
              transform 700ms var(--ease-out) 0.2s;
}
.positioning__body--muted {
  /* Slightly dimmer palette for the second paragraph */
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.58) 0%,
    rgba(255,255,255,0.58) 42%,
    rgba(255,255,255,0.92) 50%,
    rgba(255,255,255,0.58) 58%,
    rgba(255,255,255,0.58) 100%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transition-delay: 0.35s;
}
.positioning__intro[data-revealed="true"] .positioning__body {
  opacity: 1;
  transform: translateY(0);
  animation: posBodyShine 9s ease-in-out 0.9s infinite;
}
.positioning__intro[data-revealed="true"] .positioning__body--muted {
  animation: posBodyShine 9s ease-in-out 1.9s infinite;
}
@keyframes posBodyShine {
  0%   { background-position: 200% 0; }
  50%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .positioning__body,
  .positioning__body--muted { animation: none !important; }
}

/* Bold emphasis inside body paragraphs - solid white, opts out of the
   parent's background-clip:text so it reads cleanly on top of the shine. */
.positioning__body strong {
  font-weight: 700;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
          text-fill-color: var(--accent);
  letter-spacing: -0.005em;
  cursor: pointer;
  padding: 1px 6px;
  margin: 0 -4px;
  border-radius: 6px;
  /* Hover highlight - orange fill sweeps in from the left using background-size */
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transition:
    background-size 380ms var(--ease-out),
    color 240ms var(--ease-out),
    -webkit-text-fill-color 240ms var(--ease-out),
    text-fill-color 240ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
}
.positioning__body strong:hover {
  background-size: 100% 100%;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
          text-fill-color: #FFFFFF;
  box-shadow: 0 6px 24px rgba(245, 130, 32, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .positioning__body strong { transition: none !important; }
}

/* =========================================================
   INLINE HYPERLINKS inside body paragraphs (21st.dev style)
   ========================================================= */
.positioning__ilink {
  /* Opt out of the parent's background-clip: text so the link can keep
     its own underline & accent treatment */
  -webkit-text-fill-color: currentColor;
          text-fill-color: currentColor;
  color: inherit;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  padding: 0 2px;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-size var(--dur-base) var(--ease-out);
}
.positioning__ilink:hover,
.positioning__ilink:focus-visible {
  color: var(--accent);
  background-size: 100% 100%;
  background-image: linear-gradient(var(--accent), var(--accent));
  -webkit-text-fill-color: #FFFFFF;
          text-fill-color: #FFFFFF;
  color: #FFFFFF;
  outline: none;
}

/* =========================================================
   HOVER-PREVIEW CARD - follows cursor, 21st.dev pattern
   ========================================================= */
.positioning__preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 240px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(0.92);
  transform-origin: top left;
  transition:
    opacity 220ms var(--ease-out),
    transform 260ms var(--ease-out);
}
.positioning__preview[data-visible="true"] {
  opacity: 1;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1);
}
.positioning__preview-inner {
  position: relative;
  background: #0A0809;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.positioning__preview-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.positioning__preview-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.positioning__preview-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.positioning__preview-title {
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.3;
}

/* Hide preview on touch devices (no hover) */
@media (hover: none) {
  .positioning__preview { display: none; }
}

/* -------- Thematic image --------------------------------- */
.positioning__image {
  position: relative;
  margin: 0 0 clamp(56px, 7vw, 104px);
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
}
.positioning__image[data-revealed="true"] {
  opacity: 1;
  transform: translateY(0);
}
.positioning__image img {
  display: block;
  width: 100%;
  height: clamp(260px, 40vw, 520px);
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05);
}
/* Subtle dark-to-transparent gradient so the image blends into the dark section at top & bottom */
.positioning__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(35,31,32,0.18) 0%,
    rgba(35,31,32,0.00) 18%,
    rgba(35,31,32,0.00) 82%,
    rgba(35,31,32,0.28) 100%
  );
  pointer-events: none;
}

/* =========================================================
   THREE PILLAR CARDS - Horizontal slider, text-on-image
   2 cards fully visible + 20% of card 3 peeking at the right.
   ========================================================= */
.positioning__pillars {
  --card-gap: clamp(16px, 1.6vw, 24px);
  display: grid;
  grid-auto-flow: column;
  /* 2 full cards + 20% of third visible = divide viewport by 2.2 */
  grid-auto-columns: calc((100% - var(--card-gap) * 2) / 2.2);
  gap: var(--card-gap);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
  /* allow the overflowed 3rd card to show beyond the container's right padding */
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
}
.positioning__pillars::-webkit-scrollbar { display: none; }

/* Pagination dots below the slider */
.positioning__slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(20px, 2vw, 32px);
}
.positioning__slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 260ms var(--ease-out), transform 260ms var(--ease-out), width 260ms var(--ease-out);
}
.positioning__slider-dot:hover { background: rgba(255,255,255,0.55); }
.positioning__slider-dot[aria-current="true"] {
  background: var(--accent);
  width: 24px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .positioning__slider-dot { transition: none !important; }
}

.positioning__pillar {
  position: relative;
  scroll-snap-align: start;
  min-width: 0;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
.positioning__pillar[data-revealed="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* The entire card is a link */
.positioning__pillar-link-wrap {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition:
    transform 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out);
}
.positioning__pillar-link-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

/* Media - image fills the whole card */
.positioning__pillar-media {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #0A0809;
}
.positioning__pillar-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.positioning__pillar-link-wrap:hover .positioning__pillar-media img {
  transform: scale(1.05);
}

/* Dark gradient overlay from bottom for text legibility */
.positioning__pillar-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.55) 72%,
    rgba(0,0,0,0.88) 100%
  );
  z-index: 1;
}

/* Index badge top-left on image */
.positioning__pillar-index {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}

/* Title - over image, bottom-left */
.positioning__pillar-title {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--fs-l);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* Liquid-glass pill - same treatment as hero CTAs */
.positioning__pillar-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  align-self: flex-start;
  margin-top: var(--s-3);
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0.03) 100%);

  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.05);
          backdrop-filter: blur(24px) saturate(180%) brightness(1.05);

  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    inset 0 0 24px rgba(255,255,255,0.06),
    0 8px 24px rgba(0,0,0,0.20),
    0 1px 0 rgba(255,255,255,0.10);

  text-shadow: 0 1px 2px rgba(0,0,0,0.30);

  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* Curvature sheen overlay */
.positioning__pillar-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.00) 30%,
    rgba(255,255,255,0.00) 70%,
    rgba(255,255,255,0.10) 100%
  );
  mix-blend-mode: overlay;
  z-index: -1;
}

/* Shine sweep removed for a cleaner CTA. */
.positioning__pillar-link:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.50);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.10) 60%, rgba(255,255,255,0.05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    inset 0 0 32px rgba(255,255,255,0.10),
    0 12px 32px rgba(0,0,0,0.28),
    0 1px 0 rgba(255,255,255,0.18);
}
.positioning__pillar-link:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    inset 0 0 18px rgba(255,255,255,0.05),
    0 4px 12px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.08);
}

/* -------- Section CTA row (Explore more) ----------------- */
.positioning__cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vw, 88px);
}

/* .positioning__cta / --who visual rules moved to css/buttons.css
   under canonical .btn--ghost kind. Local rules below handle the
   svg icon sizing + arrow nudge on hover only. */
.positioning__cta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.positioning__cta:hover svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .positioning__pillar-link,
  .positioning__pillar-link::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   Responsive
   ========================================================= */

/* Slider - fewer cards visible on smaller screens so each card stays readable */
@media (max-width: 1023px) {
  .positioning__pillars {
    grid-auto-columns: calc((100% - var(--card-gap)) / 1.6);  /* 1.6 cards */
  }
}
@media (max-width: 640px) {
  .positioning__pillars {
    grid-auto-columns: calc(100% - var(--card-gap) * 2);       /* 1 card full + small peek */
  }
}

/* "Who We Are" CTA - centred inside the body-col flex column */
.positioning__cta--who {
  align-self: center;
  margin-top: clamp(4px, 0.6vw, 10px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .positioning__title,
  .positioning__body,
  .positioning__pillar {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .positioning__pillar::before {
    transition: none;
    height: clamp(40px, 5vw, 68px);
  }
}

/* =========================================================
   NEW LAYOUT - sticky-scroll storytelling.
   The video pins to the viewport while the user scrolls; the
   black text band slides up over it as scroll progresses. Once
   the band scrolls past, the video shows again at the bottom.
   Overrides win because they appear later in the cascade.
   ========================================================= */

.positioning:has(.positioning__stage) {
  padding: 0;
  background: #000;
  /* Slides up over the pinned Hero section as the user scrolls. */
  position: relative;
  z-index: 2;
}
/* Aurora gradients aren't needed once a video runs as the bg layer. */
.positioning:has(.positioning__stage) .positioning__aurora {
  display: none;
}

/* Stage fills exactly one viewport - no internal scroll. */
.positioning__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Two stacked video elements crossfade at the loop point. Both share
   the same box; positioning.js toggles their opacity around the seam
   so playback reads as one continuous loop. */
.positioning__bg-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* Eased crossfade - slow at the seams, accelerates through the
     middle so the dissolve reads as natural rather than mechanical. */
  transition: opacity 1500ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* A is visible by default, B starts hidden underneath. */
.positioning__bg-video--a { opacity: 1; }
.positioning__bg-video--b { opacity: 0; }
/* When JS marks a video as "fading out", let it fall to 0. */
.positioning__bg-video.is-out { opacity: 0; }
.positioning__bg-video.is-in  { opacity: 1; }

/* Band is anchored to the bottom of the stage and overlays the video.
   A vertical gradient fades from transparent at the top to near-black
   at the bottom so the video reads clearly up top and the text reads
   clearly against the dark area at the bottom. */
.positioning__band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 25%,
    rgba(0, 0, 0, 0.85) 65%,
    rgba(0, 0, 0, 0.95) 100%);
  margin: 0;
  /* vh-based so short laptops (e.g. 590px tall) don't get blown-up
     padding that crowds content against the viewport bottom. */
  padding-top: clamp(24px, 6vh, 90px);
}
.positioning__band-inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(28px, 6vh, 80px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 900px) {
  /* On mobile/tablet, switch from "video bg + bottom-anchored band overlay"
     to a clean stacked layout: video on top with a fixed aspect ratio,
     then the dark band as a normal block below. The single-viewport
     overlay design squeezes too much content on small screens. */
  .positioning:has(.positioning__stage) {
    height: auto;
    overflow: visible;
  }
  .positioning__stage {
    height: auto;
    overflow: visible;
  }
  /* Video A defines the layout (relative + aspect ratio).
     Video B is the crossfade partner - overlay it on A absolutely
     so it doesn't add a second 16:11 block of empty space below. */
  .positioning__bg-video--a {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    display: block;
  }
  .positioning__bg-video--b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    display: block;
  }
  .positioning__stage { position: relative; }
  .positioning__band {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    background: #000;
    margin: 0;
    padding-top: 0;
  }
  .positioning__band-inner {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px);
    padding: clamp(40px, 6vw, 64px) var(--gutter);
  }
  .positioning__band-left {
    padding-bottom: clamp(8px, 2vw, 16px);
  }
  .positioning__years-logo {
    max-width: 300px;
    margin: 0 auto;
  }
}

.positioning__band-left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

/* 50 years logo - trimmed so the text column has more room. */
.positioning__years-logo {
  width: 100%;
  max-width: clamp(300px, 30vw, 480px);   /* Total ~36% larger than the original 220-340px range */
  height: auto;
  display: block;
}

.positioning__band-right {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 24px);
}

/* Title overrides - left-aligned, always visible (drop the old reveal) */
.positioning__band-right .positioning__title {
  text-align: left;
  opacity: 1;
  transform: none;
  margin-bottom: 0;
}

/* Body paragraphs - Raleway 400 / 18px / white */
.positioning__band-right .positioning__body {
  opacity: 1;
  transform: none;
  animation: none !important;
  background: none !important;
  -webkit-background-clip: initial;
          background-clip: initial;
  font-family: "Raleway", var(--font-display);
  font-weight: 400;
  font-size: var(--fs-m);
  line-height: 1.6;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.positioning__band-right .positioning__body--muted {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}

/* CTA - left-aligned under body */
.positioning__band-right .positioning__cta--who {
  align-self: flex-start;
  margin-top: 0;
}