/* Split hero for About and What we do: words on the left, a tall footage panel on the right,
   the page's braid preset running behind both. Shared by about.css and expertise.css pages only. */

.hero-split { align-items: stretch; }
.hero-split .hero__glow { background: radial-gradient(55% 60% at 78% 55%, rgba(212, 250, 131, .1), transparent 70%), radial-gradient(40% 40% at 10% 100%, rgba(31, 107, 95, .35), transparent 70%), var(--deep); }
.hero-split__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 8vh, 5rem));
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}
.hero-split__text { grid-column: 1 / span 7; padding-bottom: clamp(0rem, 2vh, 1.5rem); }
.hero-split__text h1 { font-size: clamp(2.75rem, 6.2vw, 6rem); max-width: 11.5ch; }
.hero-split__text .lead { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); color: var(--mist-70); max-width: 30ch; }

/* the footage panel: hard corners, strand on its left edge running down into the ground */
.hero-split__media {
  grid-column: 8 / span 5;
  justify-self: end;
  position: relative;
  width: min(100%, calc((100svh - var(--header-h) - 9rem) * .8));
  aspect-ratio: 4 / 5;
}
.hero-split__media .panel, .hero-split__media .panel__media { height: 100%; }
.hero-split__media .panel { box-shadow: var(--shadow-float); }
.hero-split__media .panel__media::after { background: linear-gradient(180deg, rgba(10, 38, 33, .18) 0%, rgba(10, 38, 33, .5) 70%, rgba(10, 38, 33, .9) 100%); }
.hero-split__media .panel::before { top: 18%; bottom: -3rem; }
.hero-split__media .video-toggle { z-index: 5; }

/* intro: the panel opens from its strand side while the headline rises; never fully hidden (it carries the LCP) */
html.motion .hero-split__media .panel__media { animation: split-open 1.3s var(--ease-strand) .1s both; }
html.motion .hero-split__media .panel::before { animation: split-strand 1.2s var(--ease-strand) .35s both; transform-origin: top; }
@keyframes split-open { from { clip-path: inset(0 38% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes split-strand { from { transform: scaleY(0); } }

@media (max-width: 899px) {
  .hero-split { min-height: auto; }
  .hero-split__grid { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: 3rem; }
  .hero-split__text, .hero-split__media { grid-column: 1; }
  .hero-split__text { padding-bottom: 0; }
  .hero-split__media { width: 100%; aspect-ratio: 16 / 10; justify-self: stretch; }
  .hero-split__media .panel::before { bottom: -1px; }
}

/* very small phones: the 11.5ch cap and the 2.75rem minimum split "Progress is a" into one-word rows */
@media (max-width: 359px) { .hero-split__text h1 { font-size: 2.15rem; max-width: none; } }
/* phones on their side: size by height so the panel and copy share the short screen */
@media (orientation: landscape) and (max-height: 520px) { .hero-split__text h1 { font-size: clamp(2rem, 11vh, 6rem); } }