/* Card rail: pinned horizontal sequence for the service card section that follows
   the introduction on the five individual service pages. Loaded only on those pages.
   card-rail.js builds these wrappers at runtime, so without JS, or with reduced motion,
   the cards keep their original vertical stack. The rail is given the height of that
   stack, so the page length is unchanged. */

/* Takes over the layering core.css gives `.ivory-video-wrap > .section`, which the
   cards lose once they sit inside the rail. */
.card-rail {
  /* Centred cards with the next one in view (Hamad, 2 Nov 2026). One gap between every
     pair of cards, from 1rem on phones to the header's own height on desktop, the band the
     navigation keeps clear above every section. Each card keeps the 48rem desktop width and
     on narrower screens leaves room either side for the gap and a glimpse of its
     neighbour. --card-rail-vw is the rail's own width, set by card-rail.js, so a desktop
     scrollbar never shifts the centre. */
  --card-rail-vw: 100vw;
  --card-rail-gap: clamp(1rem, var(--card-rail-vw) * 0.04, var(--header-h, 3.5rem));
  --card-rail-peek: clamp(0.75rem, var(--card-rail-vw) * 0.08 - 1rem, 8rem);
  --card-rail-card: min(48rem, var(--card-rail-vw) - 2 * (var(--card-rail-gap) + var(--card-rail-peek)));
  position: relative;
  z-index: 1;
  height: calc(var(--card-rail-count, 1) * 100svh);
  /* card-rail.js keeps the reader's place when a card grows or shrinks; browser scroll
     anchoring would correct the same change a second time. */
  overflow-anchor: none;
}

.card-rail__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
}

.card-rail__track {
  display: flex;
  align-items: flex-start;
  gap: var(--card-rail-gap);
  /* Card 1 starts centred; card-rail.js moves the track by each card's measured centre. */
  padding-inline-start: calc((var(--card-rail-vw) - var(--card-rail-card)) / 2);
  height: 100%;
  will-change: transform;
}

/* One slide per card. card-rail.js moves the whole track upwards as an open card taller
   than the screen is read, from its top landing point to its bottom one (Pattern 2), so
   every slide stays on one plane. */
.card-rail__slide {
  position: relative;
  flex: 0 0 var(--card-rail-card);
  width: var(--card-rail-card);
  min-width: 0;
}

/* Inside a slide the section, its wrap and the card take the slide's width exactly. */
.card-rail__slide > .pillar-section > .wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.card-rail__slide > .pillar-section > .wrap > .pillar-numeral-row,
.card-rail__slide > .pillar-section > .wrap > .pillar-numeral-row > .pillar-card {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* One horizontal plane (Hamad, 1 Nov 2026). The sitewide section reveal starts each
   `.wrap` child 12px low and raises it once its section is visible, 80ms later per child.
   Inside the rail a card only becomes visible as it slides in, so it was still rising
   while it travelled and sat below the card leaving, a staircase across the move. Here
   the reveal keeps its fade and drops the vertical travel. */
.js-ready .card-rail__slide > .pillar-section > .wrap > *,
.js-ready .card-rail__slide > .pillar-section.is-visible > .wrap > * {
  transform: none;
}

/* One top, open or closed (Hamad, 1 Nov 2026). Each card section centres its card, and an
   open card fills its section, so opening gave up the spare space above the card and its
   top rose, by up to 150px on desktop. Inside the rail the card is laid out from the top
   and card-rail.js sets --card-rail-lead to the closed card's centred offset, so a closed
   card sits exactly where centring put it and an open card keeps that top and grows
   downwards. The desktop hover and open scale grows from the card's top edge for the
   same reason. */
.card-rail--anchored .card-rail__slide > .pillar-section,
.card-rail--anchored .card-rail__slide > .pillar-section > .wrap,
.card-rail--anchored .card-rail__slide > .pillar-section > .wrap > .pillar-numeral-row {
  justify-content: flex-start;
}

.card-rail--anchored .card-rail__slide > .pillar-section > .wrap {
  margin-top: var(--card-rail-lead, 0px);
}

.card-rail__slide .pillar-card {
  transform-origin: 50% 0;
}

/* Each card section keeps a minimum of one screen and grows with its content when Read
   More opens, at every width. */
.page-service .card-rail__slide > .pillar-section,
.page-service .card-rail__slide > .pillar-section:has(.r-accordion__item.is-open) {
  position: relative;
  height: auto;
  min-height: 100svh;
  max-height: none;
}