/* ==========================================================================
   software-support.css
   Page-scoped design system for software-support.html
   --------------------------------------------------------------------------
   Namespaced under `.ss-page`. It shares no class name and no layout pattern
   with `.rc-its` (IT Support), `.rc-itc` (IT Consultancy) or `.sd-page`
   (Software Development).

   Register: editorial. The three earlier service pages are all built out of
   objects — panels, glass, slabs, line work. This one has almost no objects
   at all. Each section is a flat, full-bleed colour field, and the structure
   comes from type scale, measure, alignment and a handful of hairlines.
   Its lists are set in Montserrat at display size rather than Kanit, which
   gives them a different texture from every other page in the set.

   Brand orange, the two navies and the typefaces are the only things all
   four pages have in common.

   Contents
     1. Tokens
     2. Base + typography
     3. Entrance primitive
     4. Running head + index panel
     5. Hero — split-colour headline
     6. Stagger list
     7. Gutter heading
     8. Shape flow
     9. Multi-column list
    10. Mask reveal
    11. Transit rules
    12. Afterword
    13. Close
    14. Pictures, diagram and controls
    15. Responsive
    16. Reduced motion
   ========================================================================== */

/* Registered so it can be interpolated. An unregistered custom property
   animates as a discrete swap, which would make the mask below jump rather
   than sweep. */
@property --ss-m {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* ==========================================================================
   1. TOKENS
   A warm sand base — the first warm-led surface in the set. IT Support is
   cool porcelain, IT Consultancy is neutral stone, Software Development is
   cool slate; this one leans amber, and pairs with a deep ember drawn from
   the brand orange rather than a second neutral.
   No pure white anywhere: the lightest value is #F3ECE1 and it is used only
   for text on the dark fields.
   ========================================================================== */
.ss-page {
  /* Fields */
  --ss-sand: #e0d8cc;
  --ss-sand-2: #d2c8b8;
  --ss-navy: #12243f;
  --ss-ember: #b8480c; /* a deeper cut of the brand orange            */
  --ss-ink: #17110d; /* warm near-black, the closing field          */

  /* Brand */
  --ss-signal: #ee690c;

  /* Text */
  --ss-text: #241d16;
  --ss-text-soft: #5c5145;
  --ss-text-inv: #e9ecf2;
  --ss-text-warm: #f3ece1;

  /* Hairlines — this page has very few, so each one has to earn its place */
  --ss-line: rgba(36, 29, 22, 0.22);
  --ss-line-inv: rgba(233, 236, 242, 0.22);
  --ss-line-warm: rgba(243, 236, 225, 0.3);

  /* Rhythm */
  --ss-space: clamp(76px, 9.5vw, 146px);
  --ss-gutter: clamp(24px, 4vw, 70px);
  /* The distance from the viewport edge to the container's text edge.
       Full-bleed elements use it to line their text up with the grid. */
  --ss-inset: max(20px, calc((100vw - 1110px) / 2));

  --ss-ease: cubic-bezier(0.2, 0.74, 0.24, 1);
  --ss-header: 112px;
}

/* ==========================================================================
   2. BASE + TYPOGRAPHY
   Larger body copy and a longer leading than the other three pages: this one
   is read, not scanned.
   ========================================================================== */
body.ss-page {
  background: var(--ss-sand);
  color: var(--ss-text);
}

.ss-page main p {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.85;
  margin: 0 0 1.2em;
  max-width: 62ch;
}
.ss-page main p:last-child {
  margin-bottom: 0;
}

.ss-page .ss-h2 {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 3.7vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 0.6em;
  color: var(--ss-text);
  text-wrap: balance;
}
.ss-page .ss-h2--wide {
  max-width: 18ch;
}
.ss-page .ss-h2--centre {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 16ch;
}

/* The line that introduces a list. A rule above and the weight of the list
   itself — no label, no all-caps, nothing invented. */
.ss-page .ss-cue {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  padding-top: 1em;
  border-top: 1px solid currentColor;
  margin-top: 1.4em;
  max-width: none;
}

/* Closing paragraph of a block: pulled to the right and set tight, so it
   reads as a conclusion rather than as more of the same. */
.ss-page .ss-close-note {
  max-width: 54ch;
  margin-left: auto;
  margin-top: clamp(40px, 5vw, 76px);
  font-size: clamp(15.5px, 1.05vw, 17px);
  color: var(--ss-text-soft);
}
.ss-page .ss-close-note--left {
  margin-left: 0;
}

.ss-page main ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ss-page a:focus-visible,
.ss-page button:focus-visible {
  outline: 2px solid var(--ss-signal);
  outline-offset: 4px;
}

/* Field shells. Padding lives on one class only, so the field modifiers can
   never tie on specificity and cancel each other out. */
.ss-page .ss-section {
  position: relative;
  padding: var(--ss-space) 0;
}
.ss-page .ss-section--sand {
  background: var(--ss-sand);
}
.ss-page .ss-section--sand-2 {
  background: var(--ss-sand-2);
}

.ss-page .ss-section--navy {
  background: var(--ss-navy);
  color: var(--ss-text-inv);
}
.ss-page .ss-section--navy .ss-h2,
.ss-page .ss-section--navy p {
  color: var(--ss-text-inv);
}
.ss-page .ss-section--navy .ss-close-note {
  color: rgba(233, 236, 242, 0.72);
}

.ss-page .ss-section--ember {
  background: var(--ss-ember);
  color: var(--ss-text-warm);
}
.ss-page .ss-section--ember .ss-h2,
.ss-page .ss-section--ember p {
  color: var(--ss-text-warm);
}

/* PERFORMANCE: `content-visibility` is deliberately not used anywhere on this
   page. Every section now either measures, masks, floats around a shape or
   runs a scroll-linked transform, and skipped content has no layout for a
   scroll timeline or a shape-outside float to resolve against. */

/* ==========================================================================
   3. ENTRANCE PRIMITIVE
   Blocks with no scroll-driven treatment of their own fade up through a
   short rise. Gated on `html.ss-js` so the page reads without JavaScript.
   ========================================================================== */
.ss-js .ss-page [data-in] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.8s var(--ss-ease),
    transform 0.8s var(--ss-ease);
  transition-delay: var(--ss-delay, 0ms);
}
.ss-js .ss-page [data-in].is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   4. RUNNING HEAD + INDEX PANEL
   A book's running head: the current section's own heading, set vertically
   along the left edge, updated as you scroll. It is also the control that
   opens the index, so the page needs no invented navigation label anywhere.
   ========================================================================== */
.ss-page .ss-runner {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 940;
  transform: translateY(-50%) translateX(-102%);
  transition:
    transform 0.5s var(--ss-ease),
    background 0.3s var(--ss-ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-height: 62vh;
  padding: 22px 12px;
  background: var(--ss-ink);
  border: 0;
  border-right: 1px solid var(--ss-line-warm);
  cursor: pointer;
}
.ss-page .ss-runner.is-visible {
  transform: translateY(-50%) translateX(0);
}
.ss-page .ss-runner:hover {
  background: var(--ss-signal);
}

.ss-page .ss-runner__text {
  /* vertical-rl plus a half turn reads bottom-to-top, which is the
       convention for a spine. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ss-text-warm);
  overflow: hidden;
  max-height: 46vh;
  text-align: right;
}
/* The tick doubles as the open/close state indicator. */
.ss-page .ss-runner__tick {
  width: 11px;
  height: 11px;
  background: var(--ss-signal);
  flex: 0 0 auto;
  transition:
    transform 0.4s var(--ss-ease),
    background 0.3s var(--ss-ease);
}
.ss-page .ss-runner:hover .ss-runner__tick {
  background: var(--ss-text-warm);
}
.ss-page .ss-runner[aria-expanded="true"] .ss-runner__tick {
  transform: rotate(45deg) scale(1.2);
}

.ss-page .ss-index {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 950;
  width: min(560px, 92vw);
  background: var(--ss-ink);
  border-right: 1px solid var(--ss-line-warm);
  overflow-y: auto;
  display: flex;
  align-items: center;
  padding: clamp(60px, 8vh, 110px) clamp(28px, 5vw, 74px);
  transform: translateX(-100%);
  transition: transform 0.55s var(--ss-ease);
}
.ss-page .ss-index.is-open {
  transform: none;
}
/* `display: flex` above outranks the UA rule for [hidden], so the attribute
   has to be honoured explicitly or the panel would sit in the layout while
   still marked hidden from assistive technology. */
.ss-page .ss-index[hidden],
.ss-page .ss-scrim[hidden] {
  display: none;
}
.ss-page .ss-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.ss-page .ss-index li + li {
  border-top: 1px solid var(--ss-line-warm);
}
.ss-page .ss-index a {
  display: block;
  padding: clamp(13px, 1.7vh, 22px) 0;
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 23px);
  line-height: 1.15;
  color: var(--ss-text-warm);
  text-decoration: none;
  transition:
    color 0.25s var(--ss-ease),
    transform 0.35s var(--ss-ease);
}
.ss-page .ss-index a:hover,
.ss-page .ss-index a.is-current {
  color: var(--ss-signal);
}
.ss-page .ss-index a:hover {
  transform: translateX(10px);
}

/* Scrim. Clicking it closes the panel; it is inert to screen readers because
   the panel itself owns the interaction. */
.ss-page .ss-scrim {
  position: fixed;
  inset: 0;
  z-index: 930;
  background: rgba(23, 17, 13, 0.55);
  opacity: 0;
  transition: opacity 0.4s var(--ss-ease);
}
.ss-page .ss-scrim.is-open {
  opacity: 1;
}

/* ==========================================================================
   5. HERO — split-colour headline
   One element, one gradient, clipped to the glyphs. No duplicated text, no
   stacked layers, nothing for a screen reader to read twice.
   ========================================================================== */
.ss-page .ss-hero {
  background: var(--ss-sand);
  padding: calc(var(--rcnav-clearance, 100px) + clamp(40px, 5.5vw, 84px)) 0 clamp(56px, 7vw, 100px);
}
.ss-page .ss-hero__eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--ss-signal);
  margin: 0 0 clamp(18px, 2.2vw, 30px);
}
.ss-page .ss-hero__title {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: clamp(38px, 7.4vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.038em;
  margin: 0;
  max-width: 16ch;
  /* The colour changes at the headline's own midline. */
  background-image: linear-gradient(
    to bottom,
    var(--ss-text) 0 50%,
    var(--ss-signal) 50% 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Without background-clip on text the headline would be invisible, so it
   falls back to a solid fill. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ss-page .ss-hero__title {
    background-image: none;
    color: var(--ss-text);
  }
}

.ss-page .ss-bleed-rule {
  height: 1px;
  background: var(--ss-line);
  margin: clamp(34px, 4.4vw, 66px) 0;
}

.ss-page .ss-hero__stand {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ss-gutter);
}
.ss-page .ss-hero__stand p {
  max-width: none;
  font-size: clamp(15px, 1vw, 16.5px);
  color: var(--ss-text-soft);
}
/* The last of the three is the thesis of the page, so it is set in the
   heading face at the same size as the others — weight, not scale. */
.ss-page .ss-hero__stand p:last-child {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ss-text);
}

/* ==========================================================================
   6. STAGGER LIST
   Seven criteria, each starting further right than the one above. The rules
   run the full width of the viewport while the text steps inward, so the
   growing gap between rule and text is the narrowing-down.
   ========================================================================== */
.ss-page .ss-open {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--ss-gutter);
  align-items: start;
  margin-bottom: clamp(46px, 5.5vw, 86px);
}

.ss-page .ss-stagger {
  border-bottom: 1px solid var(--ss-line);
}
.ss-page .ss-stagger li {
  border-top: 1px solid var(--ss-line);
  /* --s is the step index. It drives the indent only; nothing on this page
       is numbered, and the diagonal carries the ordering on its own. */
  padding: clamp(15px, 1.7vw, 26px) var(--ss-inset) clamp(15px, 1.7vw, 26px)
    calc(var(--ss-inset) + var(--s) * clamp(10px, 2.6vw, 52px));
  transition: background 0.3s var(--ss-ease);
}
.ss-page .ss-stagger li span {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2.5vw, 36px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--ss-text);
  transition: color 0.3s var(--ss-ease);
}
.ss-page .ss-stagger li:hover {
  background: rgba(36, 29, 22, 0.05);
}

@supports (animation-timeline: view()) {
  /* Each row slides into its indent as it is reached — scrubbed, so it
       reverses exactly when the reader scrolls back. */
  .ss-page .ss-stagger__pick {
    animation: ss-slide linear both;
    animation-timeline: view();
    animation-range: entry 35% entry 95%;
  }
  @keyframes ss-slide {
    from {
      transform: translateX(-38px);
      opacity: 0.3;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
}

/* ==========================================================================
   7. GUTTER HEADING
   The heading is rotated into the gutter and runs the full height of the
   block, so everything to its right reads as filed under one label.
   ========================================================================== */
.ss-page .ss-gutter__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(26px, 4vw, 72px);
  align-items: stretch;
}
.ss-page .ss-gutter__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1;
  letter-spacing: -0.01em;
  padding-right: clamp(14px, 1.6vw, 24px);
  border-right: 1px solid var(--ss-line-inv);
  /* Starts at the bottom, because rotate(180deg) flips the block. */
  align-self: stretch;
}
.ss-page .ss-gutter__a {
  align-self: center;
}
/* Both text columns sit on the same horizontal axis. */
.ss-page .ss-gutter__b {
  align-self: center;
  padding-left: clamp(18px, 2vw, 34px);
  border-left: 1px solid var(--ss-line-inv);
}
.ss-page .ss-gutter__b p {
  font-size: clamp(15px, 1vw, 16px);
  color: rgba(233, 236, 242, 0.74);
}

/* ==========================================================================
   8. SHAPE FLOW
   The copy wraps around a form rather than around a box. `shape-outside`
   takes the same polygon as `clip-path`, so the wrap follows what is
   actually drawn. Where shape-outside is unsupported the float is still a
   rectangle and the text still wraps — it degrades to a plain magazine
   float, never to a broken layout.
   ========================================================================== */
.ss-page .ss-flow {
  --form: polygon(
    54% 0%,
    79% 7%,
    96% 28%,
    100% 56%,
    88% 83%,
    62% 100%,
    33% 97%,
    11% 79%,
    0% 51%,
    7% 23%,
    27% 4%
  );
}
.ss-page .ss-flow__form {
  display: block;
  float: right;
  width: min(400px, 40vw);
  aspect-ratio: 1;
  margin: 0 0 18px clamp(20px, 3vw, 50px);
  shape-outside: var(--form);
  clip-path: var(--form);
  shape-margin: 18px;
  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(243, 236, 225, 0.5),
      transparent 58%
    ),
    linear-gradient(150deg, #d4620f, #7d2f06);
}
.ss-page .ss-flow p {
  max-width: none;
}

/* ==========================================================================
   9. MULTI-COLUMN LIST
   Seven parallel tasks poured into two columns and left to break where the
   browser decides. Nothing here is a first or a last, so nothing is placed
   as though it were.
   ========================================================================== */
.ss-page .ss-flowlist {
  columns: 2;
  column-gap: clamp(30px, 5vw, 86px);
  column-rule: 1px solid var(--ss-line-inv);
  margin-top: clamp(10px, 1.6vw, 22px);
}
.ss-page .ss-flowlist li {
  break-inside: avoid;
  padding: clamp(14px, 1.5vw, 22px) 0;
  border-top: 1px solid var(--ss-line-inv);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.55vw, 24px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ss-text-inv);
  transition:
    color 0.3s var(--ss-ease),
    padding-left 0.35s var(--ss-ease);
}
.ss-page .ss-flowlist li:hover {
  color: var(--ss-signal);
  padding-left: 10px;
}

/* ==========================================================================
   10. MASK REVEAL
   The copy resolves from faint to full as it is read, driven by a gradient
   mask whose edge is tied to scroll position. The unread part sits at low
   opacity rather than at zero, so nothing is ever actually hidden — and the
   whole effect only exists where both scroll timelines and registered custom
   properties are supported.
   ========================================================================== */
.ss-page .ss-reveal {
  max-width: 70ch;
}
.ss-page .ss-reveal p {
  font-size: clamp(16.5px, 1.2vw, 19px);
}

@supports (animation-timeline: view()) {
  .ss-page .ss-reveal {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 var(--ss-m),
      rgba(0, 0, 0, 0.17) calc(var(--ss-m) + 12%),
      rgba(0, 0, 0, 0.17) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 var(--ss-m),
      rgba(0, 0, 0, 0.17) calc(var(--ss-m) + 12%),
      rgba(0, 0, 0, 0.17) 100%
    );
    animation: ss-settle linear both;
    animation-timeline: view();
    animation-range: cover 12% cover 72%;
  }
  @keyframes ss-settle {
    from {
      --ss-m: 0%;
    }
    to {
      --ss-m: 108%;
    }
  }
}

/* ==========================================================================
   11. TRANSIT RULES
   A full-bleed rule draws left to right above each paragraph, with a marker
   that lands as it completes. Movement from one side to the other, three
   times, which is what a migration is.
   The IT Support page draws a diagonal and the Software Development page
   draws verticals, so this direction was still free.
   ========================================================================== */
.ss-page .ss-transit__set {
  margin-top: clamp(34px, 4vw, 62px);
}
.ss-page .ss-transit__row + .ss-transit__row {
  margin-top: clamp(44px, 5vw, 80px);
}
.ss-page .ss-transit__rule {
  display: block;
  position: relative;
  height: 1px;
  background: var(--ss-line);
  margin-bottom: clamp(20px, 2.4vw, 34px);
}
.ss-page .ss-transit__rule i {
  position: absolute;
  inset: 0;
  background: var(--ss-signal);
  transform-origin: 0 50%;
}
.ss-page .ss-transit__rule b {
  position: absolute;
  right: 0;
  top: -4px;
  width: 9px;
  height: 9px;
  background: var(--ss-signal);
}
.ss-page .ss-transit__row p {
  max-width: 66ch;
}

@supports (animation-timeline: view()) {
  .ss-page .ss-transit__rule i {
    transform: scaleX(0);
    animation: ss-across linear both;
    animation-timeline: view();
    animation-range: entry 30% entry 92%;
  }
  @keyframes ss-across {
    to {
      transform: scaleX(1);
    }
  }

  .ss-page .ss-transit__rule b {
    opacity: 0;
    animation: ss-land linear both;
    animation-timeline: view();
    /* Lands only once the rule has finished crossing. */
    animation-range: entry 86% entry 100%;
  }
  @keyframes ss-land {
    to {
      opacity: 1;
    }
  }
}

/* ==========================================================================
   12. AFTERWORD
   One centred column in which each paragraph is set smaller than the one
   before. Type scale is the only structure: no rules, no boxes, no markers
   anywhere in this section.
   ========================================================================== */
.ss-page .ss-after__col {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.ss-page .ss-after__col p {
  margin-left: auto;
  margin-right: auto;
}
.ss-page .ss-after__p1 {
  max-width: 56ch;
  font-size: clamp(18px, 1.85vw, 27px);
  line-height: 1.5;
}
.ss-page .ss-after__p2 {
  max-width: 54ch;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.65;
}
.ss-page .ss-after__p3 {
  max-width: 48ch;
  font-size: clamp(14.5px, 1.05vw, 17px);
  line-height: 1.8;
  color: rgba(243, 236, 225, 0.82);
}

/* ==========================================================================
   13. CLOSE
   The headline takes the hero's split-colour treatment with the two colours
   reversed, so the page ends where it began having changed sides. The CTA is
   a text link whose rule grows out to full width — the quietest of the four
   closing actions, which suits a page built from type rather than objects.
   ========================================================================== */
.ss-page .ss-close {
  background: var(--ss-ink);
}
.ss-page .ss-close__title {
  font-size: clamp(34px, 5.6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.032em;
  max-width: 15ch;
  margin-bottom: clamp(32px, 4vw, 58px);
  background-image: linear-gradient(
    to bottom,
    var(--ss-signal) 0 50%,
    var(--ss-sand) 50% 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ss-page .ss-close__title {
    background-image: none;
    color: var(--ss-sand);
  }
}
.ss-page .ss-close__body {
  max-width: 640px;
}
/* Text left, photo right: the photo fills the empty half of the band. */
.ss-page .ss-close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
}
.ss-page .ss-close__figure {
  aspect-ratio: 4 / 5;
}
@media (max-width: 991.98px) {
  .ss-page .ss-close__grid {
    grid-template-columns: 1fr;
  }
  .ss-page .ss-close__figure {
    aspect-ratio: 16 / 10;
  }
}
.ss-page .ss-close__body p {
  color: var(--ss-text-warm);
}
.ss-page .ss-close__ask {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.45;
  border-top: 1px solid var(--ss-line-warm);
  padding-top: 1.1em;
  margin-top: 1.4em;
}
.ss-page .ss-close__cta {
  margin-top: 38px;
}

.ss-page .ss-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 25px);
  color: var(--ss-signal);
  text-decoration: none;
  transition: color 0.3s var(--ss-ease);
}
.ss-page .ss-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ss-ease);
}
.ss-page .ss-link:hover {
  color: var(--ss-sand);
}
.ss-page .ss-link:hover::after {
  transform: scaleX(1);
}
.ss-page .ss-link i {
  transition: transform 0.4s var(--ss-ease);
}
.ss-page .ss-link:hover i {
  transform: translateX(7px);
}

/* ==========================================================================
   14. PICTURES, DIAGRAM AND CONTROLS
   The page was built from type alone; this section is what was added to it.
   Two rules hold it together:
     - every photograph is duotoned into one of the page's three fields
       (sand, navy, ember) before it is ever loaded, so a picture never
       introduces a colour the page does not already own;
     - anything that moves is either tied to the scroll (it reverses when the
       reader scrolls back) or driven by the reader's own pointer. Nothing
       loops for its own sake except the packets on the integration map,
       which are the one thing on the page that is genuinely continuous.
   ========================================================================== */

/* ------------------------------------------------ the opening full-bleed band */
.ss-page .ss-band {
  position: relative;
  margin: clamp(30px, 4vw, 58px) 0 0;
  height: clamp(190px, 27vw, 380px);
  overflow: hidden;
}
.ss-page .ss-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  /* Oversized, so the drift below never exposes an edge. */
  scale: 1.16;
}
/* The band dissolves into the sand field at both ends rather than butting
   against it, so the page keeps reading as one surface. */
.ss-page .ss-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--ss-sand) 0%,
    rgba(224, 216, 204, 0) 22%,
    rgba(224, 216, 204, 0) 74%,
    var(--ss-sand) 100%
  );
}

/* ------------------------------------------------------------ plain figures */
.ss-page .ss-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.ss-page .ss-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ss-ease);
}
.ss-page .ss-figure--tall {
  aspect-ratio: 4 / 5;
}
.ss-page .ss-figure figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 14px;
  background: var(--ss-signal);
  color: var(--ss-text-warm);
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ss-page .ss-figure:hover img {
  transform: scale(1.045);
}

/* The first column of the opening grid carries the heading and, under it,
   the section's picture. */
.ss-page .ss-open__head {
  display: grid;
  gap: clamp(22px, 2.6vw, 38px);
}

/* --------------------------------------------- the criteria, as a shortlist */
.ss-page .ss-stagger__pick {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
/* The mark is the whole state: empty square, filled square. */
.ss-page .ss-stagger__mark {
  flex: 0 0 auto;
  width: clamp(14px, 1.5vw, 20px);
  height: clamp(14px, 1.5vw, 20px);
  border: 1px solid var(--ss-text);
  transition:
    background 0.3s var(--ss-ease),
    border-color 0.3s var(--ss-ease),
    transform 0.3s var(--ss-ease);
}
.ss-page .ss-stagger__text {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2.5vw, 36px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--ss-text);
  transition: color 0.3s var(--ss-ease);
}
.ss-page .ss-stagger__pick:hover .ss-stagger__text {
  color: var(--ss-signal);
}
.ss-page .ss-stagger__pick:hover .ss-stagger__mark {
  border-color: var(--ss-signal);
}
.ss-page .ss-stagger__pick[aria-pressed="true"] .ss-stagger__mark {
  background: var(--ss-signal);
  border-color: var(--ss-signal);
}
.ss-page .ss-stagger__pick[aria-pressed="true"] .ss-stagger__text {
  color: var(--ss-signal);
}
.ss-page .ss-stagger li:has(.ss-stagger__pick[aria-pressed="true"]) {
  background: rgba(238, 105, 12, 0.07);
}
.ss-page .ss-stagger__pick:focus-visible {
  outline: 2px solid var(--ss-signal);
  outline-offset: 6px;
}

/* ------------------------ Find section: the list beside the photograph
   The criteria live in the copy column next to the picture instead of
   running full bleed below it, so the column has no dead space. The
   picture stretches to the height of the copy column. */
.ss-page .ss-open--find {
  align-items: stretch;
  margin-bottom: 0;
}
.ss-page .ss-open--find .ss-open__head {
  display: flex;
  flex-direction: column;
}
.ss-page .ss-open--find .ss-figure--tall {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 420px;
}
.ss-page .ss-open--find .ss-figure--tall img {
  position: absolute;
  inset: 0;
}
.ss-page .ss-stagger--inline {
  margin-top: 6px;
}
.ss-page .ss-stagger--inline li {
  padding: clamp(11px, 1vw, 14px) 10px clamp(11px, 1vw, 14px)
    calc(10px + var(--s) * clamp(4px, 0.9vw, 14px));
}
.ss-page .ss-stagger--inline .ss-stagger__text {
  font-size: clamp(15.5px, 1.3vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ss-page .ss-stagger--inline .ss-stagger__mark {
  width: 14px;
  height: 14px;
}
.ss-page .ss-close-note--inline {
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  max-width: none;
}

/* The tally under the list: a rule that fills as far as the reader has
   marked, and one line of plain language. */
.ss-page .ss-tally {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin: clamp(26px, 3vw, 40px) 0 0;
  max-width: none;
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--ss-text-soft);
}
.ss-page .ss-tally__bar {
  flex: 0 0 auto;
  position: relative;
  width: clamp(70px, 12vw, 160px);
  height: 3px;
  background: var(--ss-line);
}
.ss-page .ss-tally__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 1%);
  background: var(--ss-signal);
  transition: width 0.45s var(--ss-ease);
}

/* ------------------------------------------ the photograph inside the shape */
.ss-page .ss-flow__form {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(150deg, #d4620f, #7d2f06);
}
.ss-page .ss-flow__form img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.86;
}

/* --------------------------------------------------- the integration wiring */
.ss-page .ss-wire {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 3vw, 54px);
  align-items: center;
  margin: clamp(38px, 4.5vw, 70px) 0 clamp(30px, 3.4vw, 52px);
}
.ss-page .ss-wire__shot {
  position: relative;
  margin: 0;
  aspect-ratio: 14 / 9;
  overflow: hidden;
}
.ss-page .ss-wire__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Integrate: the photo sits under the heading and stretches to the height
   of the copy beside it, so there is no empty band under the title. */
.ss-page .ss-open--integrate {
  align-items: stretch;
}
.ss-page .ss-open--integrate .ss-open__head {
  display: flex;
  flex-direction: column;
}
.ss-page .ss-wire__shot--side {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 240px;
}
.ss-page .ss-wire__shot--side img {
  position: absolute;
  inset: 0;
}
/* With the photo moved up, the diagram stands alone, centred. */
.ss-page .ss-wire--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.ss-page .ss-wire__map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ss-page .ss-wire__links path {
  fill: none;
  stroke: var(--ss-line-inv);
  stroke-width: 1;
}
/* The packets. Every path is normalised to pathLength=100, and the dash
   pattern (a 5-unit packet every 50 units) repeats exactly once per cycle,
   so moving the offset by one period gives a seamless, continuous stream:
   two packets on every connector at any moment.
   Left paths are drawn node -> hub, so a falling offset flows INTO the hub;
   right paths are also drawn node -> hub, so a rising offset flows OUT. */
.ss-page .ss-wire__flow {
  filter: drop-shadow(0 0 3px rgba(238, 105, 12, 0.9));
}
.ss-page .ss-wire__flow path {
  fill: none;
  stroke: var(--ss-signal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 5 45;
  animation: ss-flow-in 2.4s linear infinite;
  animation-delay: var(--d, 0s);
}
.ss-page .ss-wire__flow path.is-out {
  animation-name: ss-flow-out;
}
@keyframes ss-flow-in {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -50; }
}
@keyframes ss-flow-out {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 50; }
}

/* The platform in the middle: a steady core, an orbit of dashes turning
   around it, a pulse ring and a beating centre dot. */
.ss-page .ss-wire__hub circle {
  fill: none;
  stroke: var(--ss-text-inv);
  stroke-width: 1.4;
}
/* Opaque, so packets disappear INTO the platform instead of crossing it. */
.ss-page .ss-wire__core {
  fill: var(--ss-navy) !important;
}
.ss-page .ss-wire__orbit {
  stroke: var(--ss-signal) !important;
  stroke-width: 1.6 !important;
  stroke-dasharray: 6 6.5;
  transform-origin: 210px 150px;
  animation: ss-orbit 9s linear infinite;
}
@keyframes ss-orbit {
  to { transform: rotate(360deg); }
}
.ss-page .ss-wire__pulse {
  transform-origin: 210px 150px;
  animation: ss-hub 2.4s ease-out infinite;
}
@keyframes ss-hub {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.ss-page .ss-wire__dot {
  fill: var(--ss-signal) !important;
  stroke: none !important;
  transform-origin: 210px 150px;
  animation: ss-beat 1.2s ease-in-out infinite;
}
@keyframes ss-beat {
  50% { transform: scale(1.5); opacity: 0.7; }
}

/* The systems light up in turn as they send or receive. */
.ss-page .ss-wire__nodes circle {
  fill: var(--ss-text-inv);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: ss-node 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ss-node {
  0%, 60%, 100% {
    fill: var(--ss-text-inv);
    transform: scale(1);
  }
  20% {
    fill: var(--ss-signal);
    transform: scale(1.35);
  }
}
.ss-page .ss-wire__labels text {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  fill: rgba(233, 236, 242, 0.78);
}
.ss-page .ss-wire__labels .ss-wire__hub-label {
  fill: var(--ss-signal);
}

/* ------------------------------------------------- configuration switchboard */
.ss-page .ss-config {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: start;
}
.ss-page .ss-switchboard {
  border-top: 2px solid var(--ss-text);
  padding-top: clamp(18px, 2vw, 26px);
}
.ss-page .ss-switchboard__shot {
  position: relative;
  margin: 0 0 clamp(16px, 2vw, 24px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.ss-page .ss-switchboard__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-page .ss-switchboard__shot figcaption {
  position: absolute;
  right: 0;
  top: 0;
  padding: 7px 11px;
  background: var(--ss-text);
  color: var(--ss-sand);
  font-family: "Montserrat", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ss-page .ss-switchboard__set li + li {
  border-top: 1px solid var(--ss-line);
}
.ss-page .ss-switchboard [role="switch"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: clamp(11px, 1.2vw, 15px) 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.ss-page .ss-switchboard__name {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.3;
  color: var(--ss-text);
  transition: color 0.25s var(--ss-ease);
}
.ss-page .ss-switchboard__track {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 18px;
  border: 1px solid var(--ss-text);
  transition: background 0.3s var(--ss-ease);
}
.ss-page .ss-switchboard__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 12px;
  background: var(--ss-text);
  transition:
    transform 0.32s var(--ss-ease),
    background 0.32s var(--ss-ease);
}
.ss-page .ss-switchboard [aria-checked="true"] .ss-switchboard__track {
  background: var(--ss-signal);
  border-color: var(--ss-signal);
}
.ss-page .ss-switchboard [aria-checked="true"] .ss-switchboard__track::after {
  transform: translateX(20px);
  background: var(--ss-text-warm);
}
.ss-page .ss-switchboard [role="switch"]:hover .ss-switchboard__name {
  color: var(--ss-signal);
}
.ss-page .ss-switchboard [role="switch"]:focus-visible {
  outline: 2px solid var(--ss-signal);
  outline-offset: 3px;
}
.ss-page .ss-switchboard__out {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  padding-top: clamp(12px, 1.4vw, 16px);
  border-top: 1px solid var(--ss-line);
  max-width: none;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.6;
  color: var(--ss-text-soft);
}

/* ------------------------------------------------------- before / after wipe */
.ss-page .ss-compare {
  position: relative;
  margin: clamp(34px, 4vw, 60px) 0 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  touch-action: pan-y;
}
.ss-page .ss-compare img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* The second image is clipped to the reader's position, so only one of the
   two is ever painted twice over. */
.ss-page .ss-compare__over {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--x, 50%));
}
.ss-page .ss-compare__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x, 50%);
  width: 2px;
  background: var(--ss-signal);
  pointer-events: none;
}
/* The grip, drawn on the seam. */
.ss-page .ss-compare__seam::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--ss-signal);
  box-shadow: 0 6px 20px rgba(23, 17, 13, 0.4);
}
.ss-page .ss-compare__tag {
  position: absolute;
  top: 0;
  padding: 8px 13px;
  font-family: "Montserrat", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}
.ss-page .ss-compare__tag--a {
  left: 0;
  background: rgba(23, 17, 13, 0.76);
  color: var(--ss-text-warm);
}
.ss-page .ss-compare__tag--b {
  right: 0;
  background: var(--ss-signal);
  color: var(--ss-text-warm);
}
/* The real control. It covers the whole picture, so dragging anywhere works,
   and it keeps the keyboard and screen-reader behaviour of a range input. */
.ss-page .ss-compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}
.ss-page .ss-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 100%;
}
.ss-page .ss-compare__range::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: 0;
  background: none;
}
.ss-page .ss-compare__range:focus-visible {
  outline: 2px solid var(--ss-signal);
  outline-offset: 3px;
}

/* --------------------------------------------- the photographic closing field */
.ss-page .ss-after {
  overflow: hidden;
}
.ss-page .ss-after__field {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  pointer-events: none;
}
.ss-page .ss-after__field img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  mix-blend-mode: luminosity;
}
.ss-page .ss-after__field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    78% 62% at 50% 50%,
    rgba(184, 72, 12, 0.88) 30%,
    rgba(184, 72, 12, 0.6) 100%
  );
}
.ss-page .ss-after .container {
  position: relative;
  z-index: 1;
}

@supports (animation-timeline: view()) {
  /* Both photographic fields drift against the scroll. Scrubbed, so they
     track the reader in both directions instead of playing once. */
  .ss-page .ss-band__img,
  .ss-page .ss-after__field img {
    animation: ss-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes ss-drift {
    from {
      translate: 0 -5%;
    }
    to {
      translate: 0 5%;
    }
  }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  .ss-page .ss-gutter__grid {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ss-page .ss-gutter__b {
    grid-column: 2;
    border-left: 0;
    padding-left: 0;
    padding-top: 24px;
    border-top: 1px solid var(--ss-line-inv);
    margin-top: 26px;
  }
}

@media (max-width: 991.98px) {
  .ss-page {
    --ss-header: 86px;
  }

  .ss-page .ss-hero__stand {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .ss-page .ss-open {
    grid-template-columns: 1fr;
  }
  /* One column: the picture follows the heading, the wiring follows the
     photograph it explains, and the switchboard follows the copy it
     demonstrates. Nothing is dropped — every picture and every control
     survives the stack. */
  .ss-page .ss-open__head .ss-figure--tall {
    aspect-ratio: 16 / 10;
  }
  .ss-page .ss-wire__shot--side {
    flex: none;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .ss-page .ss-open--find .ss-figure--tall {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .ss-page .ss-wire,
  .ss-page .ss-config {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
  }
  .ss-page .ss-band {
    height: clamp(150px, 34vw, 230px);
  }
  .ss-page .ss-compare {
    aspect-ratio: 4 / 3;
  }
  .ss-page .ss-compare__seam::after {
    width: 34px;
    height: 34px;
  }
  /* A rotated heading needs height to run along; stacked, it has none, so
       it returns to the horizontal. */
  .ss-page .ss-gutter__grid {
    grid-template-columns: 1fr;
  }
  .ss-page .ss-gutter__b {
    grid-column: auto;
  }
  .ss-page .ss-gutter__label {
    writing-mode: horizontal-tb;
    transform: none;
    border-right: 0;
    border-bottom: 1px solid var(--ss-line-inv);
    padding-right: 0;
    padding-bottom: 0.4em;
  }

  /* The float would leave a one-word column beside it on a narrow screen, so
     the picture stops floating and takes the full measure instead — stacked,
     it is a picture above the copy rather than a shape the copy runs around. */
  .ss-page .ss-flow__form {
    float: none;
    width: min(440px, 82vw);
    margin: 0 auto clamp(26px, 5vw, 36px);
  }

  .ss-page .ss-flowlist {
    columns: 1;
  }

  /* The runner becomes a small control in the corner: the vertical text has
       no room, but the index still has to be reachable. */
  .ss-page .ss-runner {
    top: auto;
    bottom: 18px;
    left: 18px;
    transform: translateX(-160%);
    max-height: none;
    padding: 14px;
    border: 1px solid var(--ss-line-warm);
  }
  .ss-page .ss-runner.is-visible {
    transform: none;
  }
  .ss-page .ss-runner__text {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .ss-page .ss-stagger li {
    padding-left: calc(var(--ss-inset) + var(--s) * 6px);
  }
  .ss-page .ss-close__body {
    max-width: none;
  }
}

/* Hover affordances are pointer-only: on touch they either never fire or
   stick after a tap. */
@media (hover: none) {
  .ss-page .ss-stagger li:hover {
    background: transparent;
  }
  .ss-page .ss-stagger li:hover span {
    color: var(--ss-text);
  }
  .ss-page .ss-flowlist li:hover {
    color: var(--ss-text-inv);
    padding-left: 0;
  }
  .ss-page .ss-index a:hover {
    transform: none;
  }
}

/* ==========================================================================
   16. REDUCED MOTION
   Every scroll-driven effect is pinned to its finished state. Nothing that
   carries meaning disappears: the rules are drawn, the markers have landed,
   the masked copy is at full strength.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ss-js .ss-page [data-in] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ss-page .ss-stagger__pick {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  /* The packets stop, but the connectors they ran along stay drawn, so the
     map still says what is joined to what. */
  .ss-page .ss-wire__flow path,
  .ss-page .ss-wire__pulse,
  .ss-page .ss-wire__orbit,
  .ss-page .ss-wire__dot,
  .ss-page .ss-wire__nodes circle {
    animation: none !important;
  }
  .ss-page .ss-wire__flow path {
    stroke-dasharray: 4 9;
    opacity: 0.85;
  }
  .ss-page .ss-band__img,
  .ss-page .ss-after__field img {
    animation: none !important;
    translate: none !important;
  }
  .ss-page .ss-figure img {
    transition: none !important;
  }
  .ss-page .ss-figure:hover img {
    transform: none !important;
  }
  .ss-page .ss-reveal {
    animation: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .ss-page .ss-transit__rule i {
    animation: none !important;
    transform: scaleX(1) !important;
  }
  .ss-page .ss-transit__rule b {
    animation: none !important;
    opacity: 1 !important;
  }
  .ss-page *,
  .ss-page *::before,
  .ss-page *::after {
    transition-duration: 0.001ms !important;
  }
}

/* Integrate: the cue heads the diagram it introduces. */
.ss-page .ss-cue--centre {
  display: block;
  width: fit-content;
  margin: clamp(40px, 5vw, 70px) auto 0;
  text-align: center;
}
.ss-page .ss-cue--centre + .ss-wire {
  margin-top: clamp(20px, 2.4vw, 34px);
}

/* Configuration and Implementation on one line where there is room. */
@media (min-width: 992px) {
  .ss-page #ss-config .ss-h2--wide {
    max-width: none;
    white-space: nowrap;
  }
}

/* Data migration: the middle paragraph steps to the right, so the three
   rows zig-zag across the full width like data moving over. */
@media (min-width: 992px) {
  .ss-page .ss-transit__row--right p {
    margin-left: auto;
  }
}

/* Mobile section rhythm: one step between sections instead of ~150px. */
@media (max-width: 767.98px) {
  .ss-page {
    --ss-space: 52px;
  }
}