/* content-media — alternating rows of copy and media.
   Same two-up shape as Story, repeated. The alternation is done with `order`
   rather than by reordering the markup, so the copy always precedes its media
   for a screen reader however the row is arranged visually. */
.splitrows .sec__inner { display: flex; flex-direction: column; align-items: stretch; gap: clamp(40px, 6vw, 88px); }
.splitrows__head { align-self: flex-start; }

.splitrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.splitrow__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.splitrow__heading {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 40px);
  line-height: .98;
  letter-spacing: .01em;
  color: var(--color-navy);
  margin: 0;
  text-wrap: balance;
}
.tone--navy .splitrow__heading { color: inherit; }
.splitrow__body { color: var(--text-muted); margin: 0; text-wrap: pretty; }

.splitrow__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--radius-card);
  background: var(--gray-200) center / cover no-repeat;
  display: block;
}
.tone--navy .splitrow__media { background-color: #ffffff1f; }
.splitrow__video { object-fit: cover; }

/* Media to the left, copy to the right — visual order only. */
.splitrow--media-left .splitrow__text  { order: 2; }
.splitrow--media-left .splitrow__media { order: 1; }

@media (max-width: 767px) {
  .splitrow { grid-template-columns: 1fr; gap: 20px; }
  /* Stacked, the copy leads every row regardless of the desktop arrangement. */
  .splitrow--media-left .splitrow__text  { order: 1; }
  .splitrow--media-left .splitrow__media { order: 2; }
}

/* A map or widget in the media column. Same box as the photo it replaces. */
.splitrow__embed { border: 0; width: 100%; display: block; }

/* --- Held media -----------------------------------------------------------
   One column of copy with a single media beside it, which stays put while the
   copy scrolls and lets go at the end of the section. Used on /getting-here/,
   where the map is the thing the page is about and repeating it per row would
   be worse than holding one.

   position:sticky does the whole job, so there is no scroll listener here. A
   sticky element is released by its own containing block, and that block is
   this section, so the map lets go exactly where the section ends, which is
   where the "Ready to Play" band begins. Nothing has to know the band exists.

   Two things sticky is fussy about, both handled below: an ancestor with
   overflow other than visible silently kills it, and the item must not be
   stretched to the row height or there is no slack for it to move in, hence
   align-items:start on the grid. */
.splitrows--held .sec__inner { gap: clamp(32px, 4vw, 56px); }

.splitrows__held {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.splitrows__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
  /* Sticky is measured against the nearest scrollport. A clip or hidden
     overflow anywhere up the tree would make the hold silently do nothing. */
  overflow: visible;
}
.splitrows__hold {
  position: sticky;
  /* Clears the header when it comes back on an upward scroll, which is the one
     moment the two would otherwise overlap. */
  top: calc(var(--header-height, 86px) + 20px);
}
/* Shorter than the column beside it, on purpose. A sticky item can only travel
   through the slack between its own height and its container's, so a media
   TALLER than the copy sets the row height and then holds nothing: it reads as
   an ordinary two-up and the effect silently does not happen. Measured at
   1280px, a 3/4 portrait map came out 756px against 496px of copy, which is
   exactly that failure. */
.splitrows--held .splitrow__media { aspect-ratio: 16 / 10; }

/* --- The lede ---------------------------------------------------------------
   Three tiers, in the order somebody reads them: the address, the numbers that
   qualify it, then everything else.

   The page this was built for said "getting here" in the hero, again in a
   headline, and again in a subhead before giving an address set smaller than
   any of them. Hierarchy, not styling: the fix is to make the thing people
   came for the biggest thing on the page and demote the rest behind it. */
.splitrows__lede { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.splitrows__lede-label { color: var(--text-subtle); margin: 0; }
.splitrows__lede-value {
  margin: 0;
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  /* Bigger than the row headings below it by design. If this ever stops being
     the largest type in the column, the hierarchy this layout exists for has
     gone. */
  font-size: clamp(30px, 4vw, 52px);
  line-height: .98;
  letter-spacing: .01em;
  color: inherit;
  text-wrap: balance;
}
.splitrows__lede-value a { color: inherit; text-decoration: none; }
.splitrows__lede-value a:hover,
.splitrows__lede-value a:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
.splitrows__lede-note { color: var(--text-muted); margin: 0; }
.splitrows__lede-cta { margin-top: 4px; }

/* The remaining copy, once a lede is carrying the page. Measured at 1440 the
   ladder reads 52 / 22 / 20: lede, then the pairs, then this. At the heading's
   default it came out 24px, LARGER than the 22px pairs above it, which put the
   third tier ahead of the second and is the flatness this layout exists to
   fix. Sized against the pairs, not by eye. */
.splitrows__copy--led .splitrow__heading { font-size: clamp(17px, 1.4vw, 20px); }
.splitrows__copy--led .splitrow__body { font-size: var(--fs-body-sm); }

/* Under a lede the pairs are a supporting row, not the finale they are when a
   block has no lede, so they lose the rule above them and sit closer. */
.splitrows__copy--led .splitrows__facts { border-top: 0; padding-top: 0; }

/* Contact details under the copy. Same eyebrow-over-display-value pairing as
   the at-a-glance strip, which is where these sat before. */
.splitrows__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
  margin: 0;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--rule);
}
.splitrows__fact { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.splitrows__fact-label { color: var(--text-subtle); margin: 0; }
.splitrows__fact-value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-h2);
  line-height: 1.05;
  color: inherit;
  overflow-wrap: break-word;
}
/* Display weight and uppercase, so a permanent underline reads as a mistake.
   The label above already says what it is. */
.splitrows__fact-value a { color: inherit; text-decoration: none; }
.splitrows__fact-value a:hover,
.splitrows__fact-value a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
  /* Stacked, there is nothing beside the copy to hold the media against, and a
     sticky map over scrolling text on a phone covers the thing being read. */
  .splitrows__held { grid-template-columns: 1fr; }
  .splitrows__hold { position: static; top: auto; }
  .splitrows--held .splitrow__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) {
  .splitrows__facts { grid-template-columns: 1fr; }
}