/* A brand-blue band that holds the screen while you scroll through what a service covers.
   The section is as tall as its slides need; the stage inside sticks to the viewport, so
   scrolling advances one slide at a time and the numeral counts them off. Without scripts,
   and under reduced motion, nothing is pinned: it is one screen with the first slide. */
.sld{position:relative;background:var(--blue);color:#fff}

/* Lifting out of a hero, the band opens the way the home page's panel does: full width in
   layout and clipped to look inset, so opening and closing it cost no reflow.

   Two progressions, both written by view.js. `--p` opens it: 0 while its top edge rests on the
   fold, 1 once it has taken the screen. `--q` closes it again: 1 for the whole pinned run, then
   back to 0 over the last screen, once the slides are done and the pin has let go. So it grows
   out of the fold as a rounded card and leaves as one, and the corners that round are the ones
   at the edge it is travelling away from — top on the way in, bottom on the way out. Whichever
   of the two is further from open decides the inset, so they never fight over it. */
/* The same card-opening after the numbered-points section, on pages that put a diagnosis
   before the band: the progress is measured from the band's own edges, so nothing about the
   motion depends on what sits above it — only the section above has to make room. */
.intro + .sld,.thr + .sld,.pri--light + .sld,.prod + .sld{
  --p:0;
  --q:1;
  --cut:calc(var(--section-lift-inset) * (1 - min(var(--p),var(--q))));
  --rad-t:calc(var(--section-lift-radius) * (1 - var(--p)));
  --rad-b:calc(var(--section-lift-radius) * (1 - var(--q)));
  z-index:1;
  margin-top:calc(var(--section-lift) * -1);
  clip-path:inset(0 var(--cut) round var(--rad-t) var(--rad-t) var(--rad-b) var(--rad-b));
}
/* Without :has() the hero cannot make room, so the band stays in the flow rather than
   covering the copy. It keeps the rounded top; it simply does not lift. */
@supports not selector(:has(*)){ .intro + .sld,.thr + .sld,.pri--light + .sld,.prod + .sld{margin-top:0} }
/* Phones: full width from the start, so only the corners open. */
@media (max-width:36em){ .intro + .sld,.thr + .sld,.pri--light + .sld,.prod + .sld{--section-lift-inset:0px} }
.js .sld{height:calc(var(--slides,1) * var(--per,1) * 100vh)}

.sld__pin{
  position:relative;overflow:hidden;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  /* The bottom padding is what lifts the slide copy into the upper third and leaves the
     two corners to the section heading and the count. */
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(9rem,22vh,15rem);
}
.js .sld__pin{position:sticky;top:0;height:100vh}

/* The supplied artwork is the whole background, pattern and colour together — not a texture
   to lay over the blue. The flat colour behind it is only a fallback while it loads. */
.sld__wash{position:absolute;inset:0;pointer-events:none}
.sld__washimg{width:100%;height:100%;object-fit:cover;display:block}

/* The copy starts on the page's own left edge at every width, so the slide title lines up with
   the headings in the sections above and below it. That rules out giving the marks a column of
   their own: a column pushes all of the copy in by its width. Instead they hang in the margin
   beside the container where there is room for them, as drawn, and lie along the bottom of the
   copy where there is not — either way nothing shoves the text sideways. */
.sld__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;align-items:flex-start;
}

/* ---- the marks ----------------------------------------------------------- */
/* Under the copy by default: a row of dashes reading left to right, the active one filling. */
.sld__ticks{
  order:2;display:flex;flex-direction:row;align-items:center;
  gap:clamp(.75rem,1.4vw,1.125rem);
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
}
/* A hairline, not a bar. The active one is longer, and while the slide is waiting its turn
   to move on, the bright fill grows across it — the mark IS the timer. */
.sld__tick{
  position:relative;overflow:hidden;
  appearance:none;display:block;width:1.5rem;height:1px;padding:0;border:0;border-radius:1px;
  background:rgba(255,255,255,.34);cursor:pointer;
  transition:background var(--dur) var(--ease),width var(--dur) var(--b2-ease);
}
.sld__tick::after{
  content:"";position:absolute;inset:0;background:#fff;
  transform:scaleX(0);transform-origin:0 50%;
}
.sld__tick:hover{background:rgba(255,255,255,.6)}
/* No track behind the active mark: the solid line itself is what grows, so while it counts
   down there is nothing to its right rather than a faint rail waiting to be filled. */
.sld__tick.is-on{width:2.5rem;background:transparent}
/* Not counting down (the reader is scrolling, or the cycling has been stopped): the active
   mark still reads as active, just filled rather than filling. */
.sld__tick.is-on::after{transform:scaleX(1)}
.sld__tick.is-on.is-timing::after{animation:sld-fill var(--dwell,5s) linear forwards}
@keyframes sld-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sld__tick:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* ---- the slides ---------------------------------------------------------- */
/* Stacked in one grid cell so the stage is always as tall as its tallest slide and never
   jumps as they change — the same reason the principles row is pinned to its tallest card. */
.sld__main{min-width:0;width:100%;display:flex;flex-direction:column}
/* Wide enough that every one of these titles holds a single line down to about 768px. That is
   what keeps the slides matching each other: reserving a second line instead left a hole above
   the body on the short titles, and letting them wrap freely moved the body a whole line up and
   down as the slides changed. The body keeps its own, much narrower reading measure. */
.sld__stage{display:grid;max-width:64rem}
.sld__slide{grid-area:1/1;align-self:start}
.sld__slide[hidden]{display:none}
/* The container only decides which slide is present; the reveal itself is the same
   word-slice the page headings use, replayed by view.js on every change. The quick fade is
   the fallback for when the motion stack has not loaded. */
.js .sld__slide{display:block;visibility:hidden;opacity:0;transition:opacity .25s var(--ease),visibility 0s .25s}
.js .sld__slide.is-on{visibility:visible;opacity:1;transition:opacity .25s var(--ease)}

/* Named, because the marks beside the title are offset by a fraction of it to meet its cap top. */
.sld{--sld-title-size:clamp(1.75rem,1.1rem + 2.2vw,3.25rem)}
.sld__title{
  margin:0;font-family:var(--font-display);font-weight:var(--w-display);
  font-size:var(--sld-title-size);line-height:1.12;letter-spacing:var(--h2-track);color:#fff;
}
.sld__body{
  margin:clamp(1rem,2vw,1.5rem) 0 0;max-width:41rem;
  font-size:var(--body-size);line-height:var(--body-lh);letter-spacing:var(--body-track);
  color:rgba(255,255,255,.92);
}
/* The section's own heading, not part of any slide: it sits above them and stays put while
   they change. In the content column, so it lines up with the slide title by construction. */
.sld__label{
  margin:0 0 clamp(1.75rem,4vw,3rem);
  font-weight:var(--w-ui);font-size:var(--cap-size);line-height:var(--cap-lh);
  letter-spacing:var(--eyebrow-track);text-transform:uppercase;color:rgba(255,255,255,.82);
}

/* ---- the figure ----------------------------------------------------------- */
/* A dot mark for whatever the slide is about, standing in the empty half of the band. Created
   by view.js — it is decoration and there is nothing to show without scripts — and only where
   there is room for it clear of the copy and clear of the count in the corner. Sized off the
   viewport rather than the container, because the space it lives in is the full-bleed margin
   the container does not reach. */
.sld__mark{display:none}

/* ---- dark tone ----------------------------------------------------------- */
/* Near-black with the gradient carrying the colour, and the slide heading in light blue
   rather than white so it still leads the eye once the background stops being brand blue. */
.sld--dark{background:#05080f}
.sld--dark .sld__title{color:#35b6e8}
.sld--dark .sld__body{color:rgba(255,255,255,.84)}
/* #64748b came in at about 4.1:1 on the near-black ground, and lower still where the wash
   image runs pale blue behind it — the label was the least readable thing in the section.
   White at 72% clears it comfortably against both. */
.sld--dark .sld__label{color:rgba(255,255,255,.72)}
.sld--dark .sld__tick{background:rgba(255,255,255,.4)}
.sld--dark .sld__num{color:rgba(255,255,255,.1)}

/* ---- the count ----------------------------------------------------------- */
/* The count rolls one character at a time: each sits in its own masked column, and only a
   column whose character actually changed moves. 01 to 02 therefore rolls the 1 to a 2 and
   leaves the 0 alone, the way a counter should. Line height leaves room for the serif's
   old-style figures, whose descenders would otherwise be clipped by the mask. */
.sld__num{
  position:absolute;right:clamp(1rem,4vw,4.5rem);bottom:clamp(1rem,4vw,3rem);z-index:1;
  margin:0;display:flex;align-items:flex-end;pointer-events:none;user-select:none;
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(5rem,13vw,11rem);line-height:1.18;letter-spacing:-.04em;
  color:rgba(255,255,255,.22);
}
.sld__col{position:relative;display:block;overflow:hidden}
.sld__d{display:block;transition:transform .7s var(--b2-ease)}
.sld__d.is-enter{transform:translateY(calc(var(--dir,1) * 100%))}
.sld__d.is-exit{position:absolute;left:0;top:0;width:100%;transform:translateY(calc(var(--dir,1) * -100%))}

/* Past 96em the band stops using the site container and takes the whole frame, the way the
   comp (Figma 288-579) draws it: the count as a ghost in the left margin, the copy in a narrow
   column beside it, the figure filling the right half, and the marks alone in the bottom-left
   corner. The three cannot be mixed with the container layout — a count beside the heading needs
   the copy indented to make room for it, and a figure that size needs the column narrow.

   Placed at the comp's own 1920x1080 coordinates written as vw/vh, so the whole composition
   scales with the window the way the frame does. Absolute, which also means the pin's padding
   does not shift anything: an absolute box is laid out against the padding box, not inside it. */
@media (min-width:96em){
  .sld__inner{display:block;position:static;max-width:none;padding-inline:0}

  .sld__main{position:absolute;left:24.74vw;top:17.6vh;width:29.11vw}
  .sld__stage{max-width:none}
  .sld__body{max-width:22.55vw}
  .sld__label{margin-bottom:2.35rem;font-size:1rem}
  .sld__title{line-height:1.04}

  /* 206px at 1920, white at a tenth — it is a ghost behind the lockup, not a label. */
  .sld__num{
    left:11.61vw;top:18.64vh;right:auto;bottom:auto;
    font-family:var(--font-display);font-size:clamp(5rem,10.73vw,13rem);
    line-height:1.2;letter-spacing:-.048em;color:rgba(255,255,255,.1);
  }

  .sld__ticks{
    position:absolute;left:6.72vw;top:80.65vh;margin-top:0;
    flex-direction:column;align-items:flex-start;width:max-content;
  }

  /* Centred on where the comp puts it rather than pinned to its top-left, so that on a short
     window the figure can shrink to fit the height instead of being clipped by the band. */
  .sld__mark{
    display:block;position:absolute;z-index:1;pointer-events:none;
    left:73.83vw;top:58.84vh;right:auto;transform:translate(-50%,-50%);
    width:min(39.95vw,71vh);aspect-ratio:1;
  }
}

@media (max-width:48em){
  .sld__num{font-size:clamp(4rem,18vw,7rem)}
  /* The pinned screen reserves its lower third for the count in the corner. At this width
     that is 186px of empty ground between the footnote and the figure, so the run is halved:
     enough to keep the count clear of the copy, not so much that the screen reads as unfinished. */
  .sld__pin{padding-bottom:clamp(5.5rem,13vh,9rem)}
}

/* Nothing is pinned when motion is unwelcome: a held screen that will not advance on its
   own terms is a trap, so the band becomes one ordinary screen and the marks still switch. */
@media (prefers-reduced-motion:reduce){
  .js .sld{height:auto}
  .js .sld__pin{position:relative;height:auto;min-height:100vh}
  .js .sld__slide{transition:none}
  .sld__tick,.sld__d{transition:none}
  .sld__tick.is-on.is-timing::after{animation:none}
}

/* ---------- Heading, lead and footer line ----------
   These sit still while the slides cycle, so the section says what it is before the first
   slide has to. The footer line is the one claim that applies to every slide. */
.sld__heading{
  margin:0 0 clamp(.5rem,1.2vw,.9rem);
  max-width:24ch;
  font-family:var(--font-display);font-weight:var(--w-display);
  font-size:clamp(1.5rem,1rem + 1.6vw,2.5rem);line-height:1.15;letter-spacing:var(--h2-track);
  color:#fff;
}
.sld__heading strong,.sld__heading b{font-weight:var(--w-display);color:var(--blue-light,#8ccbff)}
.sld__lead{margin:0 0 clamp(1.5rem,3.5vw,2.75rem);max-width:52ch;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.72)}
.sld__foot{
  position:absolute;left:0;right:0;bottom:clamp(1.25rem,3.5vh,2.5rem);
  z-index:3;display:flex;gap:.9rem;align-items:flex-start;
  width:min(100% - 2*var(--gutter),var(--container-max));margin-inline:auto;
  padding:clamp(.9rem,2vw,1.25rem) clamp(1.1rem,2.4vw,1.75rem);
  border-radius:.75rem;background:rgba(3,10,22,.72);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.8);
}
.sld__foot-mark{flex:none;color:var(--blue-light,#8ccbff)}
.sld__foot-text strong,.sld__foot-text b{font-weight:var(--w-ui);color:var(--blue-light,#8ccbff)}
@media (max-width:48em){
  .sld__foot{position:static;margin-top:2rem;width:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
  .sld__heading{max-width:none}
}

/* The intro is its own block, not part of the slide column. Above 96em the whole band is
   placed at the comp's coordinates, and the copy column there is only 29vw wide — sized for a
   slide title. Putting the section heading in it squeezed the heading and left the ghost count
   aligned to the heading instead of the slide. So the intro gets its own place, and the slide
   lockup and its count move down together to sit under it. */
.sld__intro{margin-bottom:clamp(1.5rem,3.5vh,2.75rem)}
/* Wide layout, placed at the coordinates of Figma frame 303-1309: the slide lockup keeps the
   top of the frame with its ghost count above it and the tick rail to its left, and the section
   intro sits alone in the bottom-left corner. Written as vw/vh so the whole composition scales
   with the window, the same way the rest of this band does. */
@media (min-width:96em){
  .sld--intro .sld__num{left:15.1vw;top:12.4vh}
  .sld--intro .sld__main{left:15.4vw;top:29vh;width:27vw}
  .sld--intro .sld__body{max-width:26vw}
  .sld--intro .sld__ticks{left:9.6vw;top:29.4vh}
  .sld--intro .sld__intro{position:absolute;left:15.4vw;top:74vh;width:min(42vw,46rem);margin:0}
  /* The lead is one line in the frame; its default reading measure wrapped it to two. */
  .sld--intro .sld__lead{max-width:none;margin-bottom:0}
  /* The frame has no footer bar. The line is real copy from the other mock-up, so it moves to
     the empty bottom-right rather than sitting on top of the intro in the bottom-left. */
  .sld--intro .sld__foot{left:auto;right:6vw;bottom:5.5vh;width:min(34vw,30rem);margin-inline:0}
}
/* Inside the intro the label leads the heading, so it does not need the comp's larger gap. */
.sld--intro .sld__intro .sld__label{margin-bottom:clamp(.6rem,1.4vh,1rem)}
/* Mirror the background texture. The gradient is directional, so this decides which corner of
   the band is dark and therefore which corner can carry copy. */
.sld--flip-x .sld__washimg{transform:scaleX(-1)}
.sld--flip-y .sld__washimg{transform:scaleY(-1)}
.sld--flip-xy .sld__washimg{transform:scale(-1,-1)}
/* Frame 303-1309 sets the slide title much smaller than the original band did: about 31px at a
   1920 frame, on one line, sitting under the ghost count rather than filling the column. Scoped
   to the intro variant so the Wellness band keeps its own larger title. */
.sld--intro{--sld-title-size:clamp(1.25rem,.9rem + 1.1vw,2rem)}