/* ==========================================================================
   it-support.css
   Page-scoped design system for it-support.html
   --------------------------------------------------------------------------
   Everything is namespaced under `.rc-its` (set on <body>) so this file can be
   dropped into the existing build without touching, or being touched by,
   style.css / responsive.css / default.css.

   Load order matters: this file is linked AFTER responsive.css, so on equal
   specificity it wins. Where the theme uses `!important` (e.g.
   `.dark-background h2`), we simply don't reuse those class names.

   Contents
     1. Tokens
     2. Base + typography
     3. Motion primitives (reveals, parallax, reduced-motion)
     4. Progress bar + section rail
     5. Hero (Z pattern)
     6. Section shells
     7. Sticky pane + scrolling ledger
     8. Horizontal scroll section
     9. Bento grid
    10. Cloud (mirrored Z) + editorial stagger
    11. Thread / advisory list
    12. Closing band
    13. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   The palette is inherited from the live site (brand orange + the two navies)
   and extended with a cool porcelain family for the light sections.
   Brief constraint: no pure white anywhere — the lightest surface on the page
   is #ECEFF4, a blue-leaning off-white that sits under the navy instead of
   fighting it.
   ========================================================================== */
.rc-its {
  /* Surfaces */
  --rc-void: #010c26; /* deepest navy — hero + managed services      */
  --rc-navy: #0c2957; /* secondary navy — cloud section + footer     */
  --rc-navy-soft: #00173c; /* raised surface on dark backgrounds          */
  --rc-paper: #eceff4; /* off-white, cool                             */
  --rc-paper-2: #e2e7ef; /* one step deeper, for alternating sections   */
  --rc-paper-raise: #f2f4f8; /* tiles on paper — still not white            */

  /* Ink */
  --rc-ink: #081a37; /* headings on light                           */
  --rc-ink-body: #46566f; /* body copy on light                          */
  --rc-ink-invert: #e8edf6; /* body copy on dark                           */
  --rc-ink-muted: #8fa2bd; /* secondary copy on dark                      */

  /* Brand */
  --rc-signal: #ee690c;
  --rc-signal-tint: rgba(238, 105, 12, 0.14);
  --rc-signal-line: rgba(238, 105, 12, 0.32);

  /* Hairlines */
  --rc-line-light: rgba(8, 26, 55, 0.12);
  --rc-line-dark: rgba(232, 237, 246, 0.14);

  /* Rhythm — one modular scale drives every vertical gap on the page */
  --rc-space: clamp(64px, 9vw, 130px);
  --rc-gutter: clamp(24px, 4vw, 64px);
  --rc-radius: 18px;
  --rc-radius-sm: 10px;

  /* Motion */
  --rc-ease: cubic-bezier(0.22, 0.75, 0.28, 1);
  --rc-dur: 0.75s;

  /* Offset used by every sticky element so nothing hides under the site's
       sticky header (#header-sticky). Single source of truth. */
  --rc-header: 112px;
}

/* ==========================================================================
   2. BASE + TYPOGRAPHY
   ========================================================================== */
body.rc-its {
  background: var(--rc-paper);
  color: var(--rc-ink-body);
}
/* NOTE: no `overflow-x: hidden` on <body>. It would make the body a scroll
   container in several engines and silently break `position: sticky`, which
   this page relies on twice. Every layer that overflows (hero ornaments, the
   horizontal track, the closing ornament) is clipped by its own
   `overflow: hidden` parent instead, so there is nothing left to hide. */

/* The theme sets a global 15px/26px body. This page needs a slightly larger,
   longer-measure setting because it is a long-form service page. */
.rc-its main p {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.78;
  margin: 0 0 1.15em;
  /* Measure cap: ~68 characters. Longer lines lose the reader on prose
       this dense. */
  max-width: 68ch;
}

.rc-its .rc-h2 {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.1vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--rc-ink);
  margin: 0 0 0.6em;
  /* Headings break on their own terms, not the container's. */
  text-wrap: balance;
}
.rc-its .rc-h2--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 20ch;
}

/* On dark sections the heading takes the brand orange, matching the rest of
   the site's dark blocks. */
.rc-its .rc-section--deep .rc-h2,
.rc-its .rc-close .rc-h2 {
  color: var(--rc-signal);
}
.rc-its .rc-section--deep p,
.rc-its .rc-close p {
  color: var(--rc-ink-invert);
}

/* The line that introduces a list. It is structural information — "a list
   follows" — so it gets a rule rather than a label. No all-caps eyebrow. */
.rc-its .rc-lead-in {
  color: var(--rc-ink);
  font-weight: 600;
  padding-top: 18px;
  border-top: 1px solid var(--rc-line-light);
  margin-bottom: 0;
}
.rc-its .rc-section--deep .rc-lead-in {
  color: #fff;
  border-top-color: var(--rc-line-dark);
}

/* Closing paragraph of a block: wider measure, quieter, generous top space. */
.rc-its .rc-coda {
  max-width: 100ch;
  text-wrap: pretty;
  margin: var(--rc-gutter) 0 0;
  padding-left: 22px;
  border-left: 2px solid var(--rc-signal);
  color: var(--rc-ink-body);
}
.rc-its .rc-coda--invert {
  color: var(--rc-ink-invert);
}

.rc-its main ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Visible keyboard focus everywhere — the theme does not provide one. */
.rc-its a:focus-visible,
.rc-its [tabindex]:focus-visible {
  outline: 2px solid var(--rc-signal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ==========================================================================
   3. MOTION PRIMITIVES
   --------------------------------------------------------------------------
   SCROLL-TRIGGERED REVEALS
   One transition definition, reused by every element carrying [data-reveal].
   JS only toggles `.is-in`; it never writes styles per frame, so reveals cost
   nothing on the scroll thread.

   The hidden state applies only when `html.rc-js` is set (added by an inline
   script in <head>). Without JS the content renders normally — progressive
   enhancement, and no blank page if the script 404s.
   ========================================================================== */
.rc-js .rc-its [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--rc-dur) var(--rc-ease),
    transform var(--rc-dur) var(--rc-ease);
  /* STAGGER: the delay is a custom property so the same rule serves every
       element; JS reads data-reveal-delay once and writes it here. */
  transition-delay: var(--rc-delay, 0ms);
  will-change: opacity, transform;
}
.rc-js .rc-its [data-reveal].is-in {
  opacity: 1;
  transform: none;
  /* Released after the animation so the element stops holding a layer. */
  will-change: auto;
}

/* PARALLAX 2.0
   Where the browser supports scroll-driven animations, depth layers are
   animated by the compositor off the main thread — no scroll listener, no
   layout reads, and it keeps running while the main thread is busy.
   `--rc-from` / `--rc-to` are written once by JS from data-parallax. */
@supports (animation-timeline: view()) {
  .rc-its [data-parallax] {
    animation: rc-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes rc-drift {
    from {
      transform: translate3d(0, var(--rc-from, 7%), 0);
    }
    to {
      transform: translate3d(0, var(--rc-to, -7%), 0);
    }
  }
}
/* Browsers without it fall back to a single rAF-batched JS loop
   (see it-support.js → initParallaxFallback). */
.rc-its [data-parallax] {
  will-change: transform;
}

/* ACCESSIBILITY FLOOR
   Everything decorative stops; nothing that carries meaning disappears. */
@media (prefers-reduced-motion: reduce) {
  .rc-its .rc-photo img {
    transition: none !important;
  }
  .rc-js .rc-its [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .rc-its [data-parallax] {
    animation: none !important;
    transform: none !important;
  }
  .rc-its *,
  .rc-its *::before,
  .rc-its *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   4. PROGRESS BAR + SECTION RAIL
   ========================================================================== */
.rc-its .rc-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
}
.rc-its .rc-progress__bar {
  display: block;
  height: 100%;
  background: var(--rc-signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  /* scaleX only — width animation would invalidate layout every frame. */
  will-change: transform;
}

.rc-its .rc-rail {
  position: fixed;
  top: 50%;
  left: 26px;
  transform: translateY(-50%);
  z-index: 900;
  /* Fades in once the reader is past the hero. */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s var(--rc-ease),
    visibility 0.45s;
}
.rc-its .rc-rail.is-visible {
  opacity: 1;
  visibility: visible;
}
.rc-its .rc-rail ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rc-its .rc-rail a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.rc-its .rc-rail__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(8, 26, 55, 0.3);
  flex: 0 0 auto;
  transition:
    background 0.3s var(--rc-ease),
    border-color 0.3s var(--rc-ease),
    transform 0.3s var(--rc-ease);
}
/* MICRO-INTERACTION: the label is the section's own heading, revealed on
   hover/focus. No truncated invented labels, no numbering. */
.rc-its .rc-rail__label {
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rc-ink);
  background: var(--rc-paper-raise);
  border: 1px solid var(--rc-line-light);
  border-radius: var(--rc-radius-sm);
  padding: 8px 12px;
  max-width: 230px;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.3s var(--rc-ease),
    transform 0.3s var(--rc-ease);
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(8, 26, 55, 0.12);
}
.rc-its .rc-rail a:hover .rc-rail__label,
.rc-its .rc-rail a:focus-visible .rc-rail__label {
  opacity: 1;
  transform: translateX(0);
}
.rc-its .rc-rail a:hover .rc-rail__dot {
  transform: scale(1.25);
  border-color: var(--rc-signal);
}
/* Scroll-spy state, set by an IntersectionObserver. */
.rc-its .rc-rail a.is-current .rc-rail__dot {
  background: var(--rc-signal);
  border-color: var(--rc-signal);
  transform: scale(1.3);
}

/* ==========================================================================
   5. HERO — the Z pattern
   --------------------------------------------------------------------------
   A 2x2 grid. Top row is heavy on the left (title) and light on the right
   (mark); bottom row reverses the weight. The diagonal SVG connects the two
   rows so the return sweep of the Z is drawn, not just implied.
   ========================================================================== */
.rc-its .rc-hero {
  position: relative;
  background: var(--rc-void);
  padding: calc(var(--rcnav-clearance, 100px) + clamp(44px, 6vw, 96px)) 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
  /* Isolates the hero's stacking context from the sticky header. */
  isolation: isolate;
}
.rc-its .rc-hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Depth layer A — an engineering mesh, pure CSS gradients (no image request). */
.rc-its .rc-hero__mesh {
  position: absolute;
  inset: -12% -6%;
  background-image:
    linear-gradient(to right, var(--rc-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rc-line-dark) 1px, transparent 1px);
  background-size: 84px 84px;
  /* Fades the grid out toward the edges so it reads as depth, not wallpaper. */
  -webkit-mask-image: radial-gradient(
    ellipse at 62% 38%,
    #000 5%,
    transparent 72%
  );
  mask-image: radial-gradient(ellipse at 62% 38%, #000 5%, transparent 72%);
  opacity: 0.7;
}
/* Depth layer B — the brand glow behind the mark. */
.rc-its .rc-hero__glow {
  position: absolute;
  top: 4%;
  right: 2%;
  width: min(620px, 62vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(238, 105, 12, 0.28) 0%,
    rgba(238, 105, 12, 0) 62%
  );
}
/* Depth layer C — reuses an ornament already shipped with the theme. */
.rc-its .rc-hero__ornament {
  position: absolute;
  left: -60px;
  bottom: -40px;
  width: min(280px, 26vw);
  opacity: 0.3;
}

.rc-its .rc-hero__z {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "tl tr"
    "bl br";
  column-gap: var(--rc-gutter);
  row-gap: clamp(56px, 8vw, 110px);
  align-items: start;
}
.rc-its .rc-hero__cell--tl {
  grid-area: tl;
}
.rc-its .rc-hero__cell--tr {
  grid-area: tr;
  justify-self: end;
  align-self: center;
}
.rc-its .rc-hero__cell--bl {
  grid-area: bl;
}
.rc-its .rc-hero__cell--br {
  grid-area: br;
  align-self: end;
}

/* The page title. It names the service; the H1 states the offer. Sentence
   case, no tracking-out — the size difference alone carries the hierarchy. */
.rc-its .rc-hero__kicker {
  font-family: "Kanit", sans-serif;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
  color: var(--rc-signal);
  margin: 0 0 18px;
  padding-left: 46px;
  position: relative;
}
.rc-its .rc-hero__kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 32px;
  height: 2px;
  background: var(--rc-signal);
  transform-origin: 0 50%;
  animation: rc-rule-in 0.9s var(--rc-ease) both 0.15s;
}
@keyframes rc-rule-in {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.rc-its .rc-hero__title {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  max-width: none;
  text-wrap: balance;
}
.rc-its .rc-hero__cell p {
  color: var(--rc-ink-invert);
  max-width: 54ch;
  margin-bottom: 0;
}
.rc-its .rc-hero__cell--br p {
  color: var(--rc-ink-muted);
}

/* The Z's diagonal. Stroke-dash offset animates once on load — this is the
   page's single orchestrated entrance, everything else is user-triggered. */
.rc-its .rc-hero__diagonal {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  height: clamp(90px, 14vw, 210px);
  width: 100%;
  z-index: -1;
  pointer-events: none;
}
.rc-its .rc-hero__diagonal line {
  stroke: var(--rc-signal-line);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: rc-draw 1.6s var(--rc-ease) both 0.45s;
}
@keyframes rc-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* The signal mark. Pointer tilt is a micro-interaction: it answers the
   cursor, it does not loop on its own. */
.rc-its .rc-signal {
  width: min(340px, 40vw);
  aspect-ratio: 1;
  transform: perspective(900px) rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition: transform 0.35s var(--rc-ease);
}
.rc-its .rc-signal svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rc-its .rc-signal__ring {
  fill: none;
  stroke: var(--rc-line-dark);
  stroke-width: 1;
  transform-origin: 110px 110px;
}
.rc-its .rc-signal__ring--2 {
  stroke: rgba(238, 105, 12, 0.25);
}
.rc-its .rc-signal__ring--3 {
  stroke: rgba(238, 105, 12, 0.45);
}
.rc-its .rc-signal__trace {
  fill: none;
  stroke: var(--rc-signal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: rc-draw 1.8s var(--rc-ease) both 0.7s;
}
.rc-its .rc-signal__core {
  fill: var(--rc-signal);
}

/* ==========================================================================
   6. SECTION SHELLS
   Padding lives on one class only (`.rc-section`) so the modifiers can never
   cancel each other out through specificity ties.
   ========================================================================== */
.rc-its .rc-section {
  position: relative;
  padding: var(--rc-space) 0;
}
/* PERFORMANCE: skip rendering work for off-screen sections.
   Applied deliberately to the two self-contained sections only. It is kept
   OFF the hero, the two sticky sections and the horizontal-scroll section
   because skipped content has no layout, so `scrollWidth` / element heights
   would measure as 0 on init and the scroll maths would be wrong.
   contain-intrinsic-size reserves an estimated height so the scrollbar
   doesn't jump as sections are skipped and un-skipped. */
.rc-its #rc-security,
.rc-its #rc-partner {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.rc-its .rc-section--paper {
  background: var(--rc-paper);
}
.rc-its .rc-section--paper-2 {
  background: var(--rc-paper-2);
}
.rc-its .rc-section--deep {
  background: var(--rc-void);
}

.rc-its .rc-block-head {
  max-width: 62ch;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.rc-its .rc-block-head--wide {
  max-width: 74ch;
}

/* ==========================================================================
   7. STICKY PANE + SCROLLING LEDGER
   Requested pattern: framing copy pinned on one side, list scrolling on the
   other. `--rc-sticky-top` keeps it clear of the site's sticky header.
   ========================================================================== */
.rc-its .rc-sticky {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
}
/* Mirrored variant: the pinned column moves to the right, so consecutive
   sticky sections do not read as the same template twice. */
.rc-its .rc-sticky--flip .rc-sticky__pane {
  order: 2;
}
.rc-its .rc-sticky--flip .rc-thread {
  order: 1;
}

.rc-its .rc-sticky__pane {
  position: sticky;
  top: var(--rc-header);
  /* Sticky needs a resolvable height context; align-self:start on the grid
       item provides it. */
  align-self: start;
}

/* The list itself. Rows are hairline-separated: the rule encodes "same kind
   of thing, repeated", which is exactly what the list is. */
.rc-its .rc-ledger li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--rc-ink);
  padding: clamp(20px, 2.6vw, 32px) 8px;
  border-bottom: 1px solid var(--rc-line-light);
  transition:
    color 0.3s var(--rc-ease),
    padding-left 0.35s var(--rc-ease);
}
.rc-its .rc-ledger li:first-child {
  border-top: 1px solid var(--rc-line-light);
}
.rc-its .rc-ledger__mark {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 1.5px solid var(--rc-signal);
  /* A diamond, not a bullet — reads as a marker rather than a count. */
  transform: rotate(45deg);
  transition:
    background 0.3s var(--rc-ease),
    transform 0.35s var(--rc-ease);
}
/* MICRO-INTERACTION on hover: the row steps in and the marker fills. */
.rc-its .rc-ledger li:hover {
  padding-left: 22px;
  color: var(--rc-signal);
}
.rc-its .rc-ledger li:hover .rc-ledger__mark {
  background: var(--rc-signal);
  transform: rotate(135deg);
}

/* ---------------------------------------------------------------- photos
   Soft, rounded and quiet, like the rest of this page: an 18px radius, a
   diffuse shadow and a small status chip in the corner that reuses the
   language of the monitoring panel. */
.rc-its .rc-photo {
  position: relative;
  margin: 0;
  border-radius: var(--rc-radius);
  overflow: hidden;
  background: var(--rc-navy-soft);
  box-shadow: 0 24px 50px rgba(8, 26, 55, 0.16);
  isolation: isolate;
}
.rc-its .rc-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--rc-ease);
}
.rc-its .rc-photo:hover img {
  transform: scale(1.035);
}
.rc-its .rc-photo figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 23, 60, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: "Kanit", sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.rc-its .rc-photo__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5fd08a;
  box-shadow: 0 0 0 3px rgba(95, 208, 138, 0.25);
}
/* In a sticky pane the picture must leave the pane short enough to stay
   fully on screen while it is pinned. */
.rc-its .rc-photo--pane {
  margin-top: clamp(22px, 2.6vw, 34px);
  aspect-ratio: 16 / 10;
  max-height: 34vh;
  width: 100%;
}
.rc-its .rc-photo--wide {
  margin-top: clamp(30px, 3.6vw, 52px);
  aspect-ratio: 21 / 8;
}

/* ==========================================================================
   8. HORIZONTAL SCROLL SECTION
   --------------------------------------------------------------------------
   The wrapper is tall; the stage inside it is sticky and full-height. As the
   wrapper scrolls through the viewport, JS maps that progress to translateX
   on the track. The wrapper's height is set by JS from the real track width,
   so the track always lands exactly at its end — no dead scroll, no clipping.
   ========================================================================== */
.rc-its .rc-hscroll {
  position: relative;
  /* Fallback height before JS measures; replaced inline on init. */
  height: 240vh;
  /* The stage reserves --rc-header at its top so pinned cards clear the
     floating navbar. Pulling the wrapper up by the same amount keeps that
     reserve from showing up as a gap under the intro before it pins. */
  margin-top: calc(-1 * var(--rc-header));
}
.rc-its .rc-hscroll__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--rc-header);
  /* The reserved band overlaps the intro above; let clicks and text
     selection pass through it. */
  pointer-events: none;
}
/* Clips the translating track only — the paragraph below it is not clipped. */
.rc-its .rc-hscroll__viewport {
  overflow: hidden;
  pointer-events: auto;
}
.rc-its .rc-hscroll__after {
  pointer-events: auto;
}
.rc-its .rc-hscroll__after .rc-coda {
  margin-top: clamp(28px, 3vw, 44px);
  margin-bottom: 0;
}
.rc-its .rc-hscroll__track {
  display: flex;
  gap: clamp(18px, 2vw, 30px);
  padding: 0 max(24px, calc((100vw - 1140px) / 2));
  will-change: transform;
}
.rc-its .rc-hcard {
  flex: 0 0 auto;
  width: clamp(230px, 26vw, 330px);
  min-height: clamp(230px, 26vw, 320px);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--rc-navy-soft);
  border: 1px solid var(--rc-line-dark);
  border-radius: var(--rc-radius);
  color: #fff;
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.28;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.35s var(--rc-ease),
    transform 0.35s var(--rc-ease);
}
/* The rule grows on hover — a small confirmation that the card is the unit
   of attention here. */
.rc-its .rc-hcard__rule {
  position: absolute;
  left: clamp(22px, 2.4vw, 32px);
  top: clamp(22px, 2.4vw, 32px);
  width: 34px;
  height: 2px;
  background: var(--rc-signal);
  transition: width 0.4s var(--rc-ease);
}
/* Photo behind each card, tinted into the navy and darkened towards the
   label so the text always reads. */
.rc-its .rc-hcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.75);
  transition:
    opacity 0.5s var(--rc-ease),
    transform 0.9s var(--rc-ease);
}
.rc-its .rc-hcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 23, 60, 0.35) 0%,
    rgba(0, 23, 60, 0.55) 45%,
    rgba(0, 12, 34, 0.95) 100%
  );
  pointer-events: none;
}
.rc-its .rc-hcard__rule,
.rc-its .rc-hcard__label {
  position: relative;
  z-index: 2;
}
.rc-its .rc-hcard__rule {
  position: absolute;
}
.rc-its .rc-hcard:hover {
  border-color: var(--rc-signal-line);
  transform: translateY(-4px);
}
.rc-its .rc-hcard:hover .rc-hcard__img {
  opacity: 0.7;
  transform: scale(1.05);
}
.rc-its .rc-hcard:hover .rc-hcard__rule {
  width: 64px;
}

/* NATIVE MODE — applied by JS on touch/narrow viewports and whenever
   reduced motion is requested. The same markup becomes an ordinary
   swipeable, scroll-snapped row: no pinning, no transform, no scroll maths. */
.rc-its .rc-hscroll--native {
  height: auto;
  margin-top: 0;
}
.rc-its .rc-hscroll--native .rc-hscroll__stage {
  position: static;
  height: auto;
  padding-top: 0;
  pointer-events: auto;
}
.rc-its .rc-hscroll--native .rc-hscroll__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
}
.rc-its .rc-hscroll--native .rc-hscroll__track {
  transform: none !important;
}
/* On touch / narrow screens a swipe row hid most of the list behind one
   oversized card with no cue that it scrolls. Instead, every item is shown
   at once as a compact grid: nothing to discover, nothing to swipe. */
.rc-its .rc-hscroll--native .rc-hscroll__viewport {
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
}
.rc-its .rc-hscroll--native .rc-hscroll__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 max(16px, calc((100vw - 1140px) / 2));
}
.rc-its .rc-hscroll--native .rc-hcard {
  width: auto;
  min-height: 108px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.3;
}
.rc-its .rc-hscroll--native .rc-hcard__rule {
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  height: auto;
}
.rc-its .rc-hscroll--native .rc-hcard:hover .rc-hcard__rule {
  width: 2px;
}

/* ==========================================================================
   8b. MANAGED SERVICES INTRO — text + live monitoring panel
   --------------------------------------------------------------------------
   The intro copy promises continuous oversight; the panel beside it shows
   it. Everything moves with CSS only: a signal line that never ends (two
   identical periods sliding one period left), a scan beam and breathing
   load bars. All of it is stopped by the page's reduced-motion floor in
   section 3.
   ========================================================================== */
.rc-its .rc-split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--rc-gutter);
  /* Bottom-aligned so the lead-in line sits right above the cards it
     introduces. */
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.rc-its .rc-split .rc-block-head {
  margin-bottom: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.rc-its .rc-split .rc-block-head .rc-lead-in {
  margin-top: auto;
  padding-top: 18px;
}

/* Stretched against the bottom-aligned copy so the panel ends level with it;
   the chart takes whatever height the rows leave over. */
.rc-its .rc-monitor {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.2vw, 18px);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(238, 105, 12, 0.12), transparent 60%),
    var(--rc-navy-soft);
  border: 1px solid var(--rc-line-dark);
  border-radius: var(--rc-radius);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
}

.rc-its .rc-monitor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rc-its .rc-monitor__live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rc-its .rc-monitor__pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ecf8e;
}
.rc-its .rc-monitor__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3ecf8e;
  animation: rc-mon-ping 1.8s ease-out infinite;
}
.rc-its .rc-monitor__status {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(62, 207, 142, 0.1);
  border: 1px solid rgba(62, 207, 142, 0.25);
  color: #7fe3b4;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.rc-its .rc-monitor__chart {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(52px, 4.5vw, 66px);
  margin-bottom: 10px;
  border-radius: var(--rc-radius-sm);
  background: rgba(1, 12, 38, 0.55);
  border: 1px solid var(--rc-line-dark);
  overflow: hidden;
}
.rc-its .rc-monitor__chart svg {
  display: block;
  width: 100%;
  height: 100%;
}
.rc-its .rc-monitor__grid line {
  stroke: rgba(232, 237, 246, 0.07);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.rc-its .rc-monitor__wave {
  animation: rc-mon-slide 6s linear infinite;
}
.rc-its .rc-monitor__area {
  fill: url(#rcMonitorFill);
}
.rc-its .rc-monitor__line {
  fill: none;
  stroke: var(--rc-signal);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.rc-its .rc-monitor__scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08));
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  animation: rc-mon-scan 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.rc-its .rc-monitor__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  flex: 0 0 auto;
}
.rc-its .rc-monitor__row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1.3fr) minmax(0, 1fr) 68px;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--rc-radius-sm);
  background: rgba(232, 237, 246, 0.03);
  border: 1px solid rgba(232, 237, 246, 0.06);
}
.rc-its .rc-monitor__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ecf8e;
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.14);
}
.rc-its .rc-monitor__name {
  color: var(--rc-ink-invert);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-its .rc-monitor__bar {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: rgba(232, 237, 246, 0.08);
  overflow: hidden;
}
.rc-its .rc-monitor__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 60%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(62, 207, 142, 0.55), #3ecf8e);
  transform-origin: left center;
  animation: rc-mon-breathe var(--t, 3.2s) ease-in-out infinite alternate;
}
.rc-its .rc-monitor__tag {
  justify-self: end;
  color: var(--rc-ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes rc-mon-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-320px); }
}
@keyframes rc-mon-scan {
  from { left: -60px; }
  to { left: 100%; }
}
@keyframes rc-mon-ping {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3); opacity: 0; }
}
@keyframes rc-mon-breathe {
  from { transform: scaleX(0.78); }
  to { transform: scaleX(1); }
}

/* ==========================================================================
   9. BENTO GRID
   Four columns. Tile size is information: the always-on, broad controls take
   the wide and tall cells; the discrete ones take single cells. Spans are set
   so the grid closes with no holes at every breakpoint.
   ========================================================================== */
.rc-its .rc-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
  gap: clamp(12px, 1.4vw, 20px);
  /* `dense` lets the single-cell tiles backfill around the tall one.
       Without it the final wide tile cannot find three free columns and the
       grid ends with a hole. */
  grid-auto-flow: row dense;
}
.rc-its .rc-bento__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--rc-paper-raise);
  border: 1px solid var(--rc-line-light);
  border-radius: var(--rc-radius);
  font-family: "Kanit", sans-serif;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.3;
  color: var(--rc-ink);
  overflow: hidden;
  transition:
    border-color 0.35s var(--rc-ease),
    box-shadow 0.35s var(--rc-ease);
}
.rc-its .rc-bento__tile--wide {
  grid-column: span 2;
}
/* Pinned to the last column so the closing wide tile gets columns 1-3 of
    the final row and the grid closes flush. */
.rc-its .rc-bento__tile--tall {
  grid-column: 4;
  grid-row: span 2;
  align-items: center;
}
/* Closes the last row: one tall cell + a three-wide tile = four columns. */
.rc-its .rc-bento__tile:last-child {
  grid-column: span 3;
}

/* MICRO-INTERACTION: a spotlight that tracks the pointer. --mx/--my are
   written by JS on pointermove, so the effect costs one custom-property
   update and no layout. */
.rc-its .rc-bento__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    var(--rc-signal-tint),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s var(--rc-ease);
  pointer-events: none;
}
.rc-its .rc-bento__tile:hover::after {
  opacity: 1;
}
.rc-its .rc-bento__tile:hover {
  border-color: var(--rc-signal-line);
  box-shadow: 0 18px 40px rgba(8, 26, 55, 0.08);
}

/* ==========================================================================
   10. CLOUD (mirrored Z) + EDITORIAL STAGGER
   ========================================================================== */
.rc-its .rc-cloud__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: center;
}
/* A layered plane instead of a stock image: three translucent sheets at
   different depths, drifting apart as the section crosses the viewport. */
.rc-its .rc-plane {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.rc-its .rc-plane__layer {
  position: absolute;
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-line-dark);
  background: linear-gradient(
    140deg,
    rgba(12, 41, 87, 0.95),
    rgba(1, 12, 38, 0.7)
  );
}
.rc-its .rc-plane__layer--a {
  inset: 0 18% 18% 0;
}
.rc-its .rc-plane__layer--b {
  inset: 9% 9% 9% 9%;
  border-color: var(--rc-signal-line);
}
.rc-its .rc-plane__layer--c {
  inset: 18% 0 0 18%;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  background: linear-gradient(
    140deg,
    rgba(238, 105, 12, 0.22),
    rgba(1, 12, 38, 0.85)
  );
}

/* Photo in the front pane; the two panes behind stay as a stack of windows. */
.rc-its .rc-plane__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  mix-blend-mode: luminosity;
}
.rc-its .rc-plane__layer--c::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(238, 105, 12, 0.28), rgba(1, 12, 38, 0.35) 55%);
  pointer-events: none;
}

/* The three paragraphs step down and to the right — the Z's descent,
   expressed in the text block itself. */
.rc-its .rc-step {
  margin-left: clamp(0px, 3vw, 46px);
}
.rc-its .rc-step--2 {
  margin-left: clamp(0px, 6vw, 92px);
}

.rc-its .rc-stagger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(36px, 4vw, 64px);
}
.rc-its .rc-stagger p {
  max-width: none;
  padding-top: 26px;
  border-top: 2px solid var(--rc-ink);
  margin-bottom: 0;
}
/* Offset baselines: the columns refuse to line up, which is the point. */
.rc-its .rc-stagger p:nth-child(2) {
  margin-top: clamp(0px, 4vw, 60px);
  border-top-color: var(--rc-signal);
}
.rc-its .rc-stagger p:nth-child(3) {
  margin-top: clamp(0px, 8vw, 120px);
}

/* ==========================================================================
   11. THREAD / ADVISORY LIST
   A continuous line whose fill tracks the section's scroll progress. It shows
   position within the roadmap without printing digits.
   ========================================================================== */
.rc-its .rc-thread {
  position: relative;
  padding-left: 34px;
}
.rc-its .rc-thread__line {
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--rc-line-light);
  border-radius: 2px;
  overflow: hidden;
}
.rc-its .rc-thread__line i {
  display: block;
  width: 100%;
  height: 0;
  background: var(--rc-signal);
  /* Height is written by JS from scroll progress; transform would be
       cheaper, but this element is 2px wide and updates are rAF-batched. */
  transition: height 0.12s linear;
}
.rc-its .rc-advice li {
  position: relative;
  font-family: "Kanit", sans-serif;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.32;
  color: var(--rc-ink);
  padding: clamp(16px, 2vw, 24px) 0;
  transition:
    transform 0.35s var(--rc-ease),
    color 0.3s var(--rc-ease);
}
.rc-its .rc-advice li::before {
  content: "";
  position: absolute;
  left: -34px;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc-paper);
  border: 2px solid var(--rc-line-light);
  transition:
    border-color 0.3s var(--rc-ease),
    background 0.3s var(--rc-ease);
}
.rc-its .rc-advice li:hover {
  transform: translateX(8px);
  color: var(--rc-signal);
}
.rc-its .rc-advice li:hover::before {
  border-color: var(--rc-signal);
  background: var(--rc-signal);
}

/* ==========================================================================
   12. CLOSING BAND
   ========================================================================== */
.rc-its .rc-close {
  background: linear-gradient(160deg, var(--rc-navy) 0%, var(--rc-void) 70%);
  overflow: hidden;
  text-align: center;
}
.rc-its .rc-close__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rc-its .rc-close__ornament {
  position: absolute;
  right: -40px;
  top: 10%;
  width: min(300px, 30vw);
  opacity: 0.25;
}
.rc-its .rc-close__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}
.rc-its .rc-close__inner p {
  margin-left: auto;
  margin-right: auto;
}
.rc-its .rc-h2--display {
  font-size: clamp(34px, 4.6vw, 64px);
  letter-spacing: -0.02em;
}
.rc-its .rc-close__cta {
  margin-top: 36px;
}
/* Reuses the theme's `.btn.ss-btn`, only adding a motion affordance. */
.rc-its .rc-close__cta .btn {
  transition:
    transform 0.3s var(--rc-ease),
    box-shadow 0.3s var(--rc-ease);
}
.rc-its .rc-close__cta .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(238, 105, 12, 0.3);
}

/* ==========================================================================
   13. RESPONSIVE
   Breakpoints follow Bootstrap's so this page stays in step with the theme.
   ========================================================================== */
@media (max-width: 1399.98px) {
  .rc-its .rc-rail {
    display: none;
  } /* Not enough side gutter to sit in. */
}

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

  /* Intro and monitor stack; the panel keeps a readable width. */
  .rc-its .rc-split {
    grid-template-columns: 1fr;
  }
  .rc-its .rc-monitor {
    max-width: 560px;
  }

  /* Z collapses to a single reading column; the diagonal is removed rather
       than squashed, because on one column the Z no longer describes the
       layout. */
  .rc-its .rc-hero__z {
    grid-template-columns: 1fr;
    grid-template-areas: "tl" "tr" "bl" "br";
  }
  .rc-its .rc-hero__cell--tr {
    justify-self: start;
  }
  .rc-its .rc-hero__diagonal {
    display: none;
  }
  .rc-its .rc-signal {
    width: min(260px, 60vw);
  }

  /* Sticky is disabled below lg: with the columns stacked there is nothing
       for the pane to stay beside, and pinning would only add scroll noise. */
  .rc-its .rc-sticky {
    grid-template-columns: 1fr;
  }
  .rc-its .rc-sticky__pane {
    position: static;
  }
  .rc-its .rc-sticky--flip .rc-sticky__pane,
  .rc-its .rc-sticky--flip .rc-thread {
    order: 0;
  }

  .rc-its .rc-cloud__grid {
    grid-template-columns: 1fr;
  }
  .rc-its .rc-cloud__visual {
    max-width: 380px;
  }
  .rc-its .rc-step,
  .rc-its .rc-step--2 {
    margin-left: 0;
  }

  .rc-its .rc-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rc-its .rc-bento__tile--wide,
  .rc-its .rc-bento__tile:last-child {
    grid-column: span 2;
  }
  .rc-its .rc-bento__tile--tall {
    grid-column: span 1;
    grid-row: span 1;
    align-items: flex-end;
  }

  .rc-its .rc-photo--pane {
    max-height: none;
  }
  .rc-its .rc-photo--wide {
    aspect-ratio: 16 / 10;
  }
  .rc-its .rc-stagger {
    grid-template-columns: 1fr;
  }
  .rc-its .rc-stagger p:nth-child(2),
  .rc-its .rc-stagger p:nth-child(3) {
    margin-top: 0;
  }
}

@media (max-width: 575.98px) {
  /* No room for the load bars next to the labels; status tags carry it. */
  .rc-its .rc-monitor__row {
    grid-template-columns: 8px minmax(0, 1fr) auto;
  }
  .rc-its .rc-monitor__bar {
    display: none;
  }
  .rc-its .rc-bento {
    grid-template-columns: 1fr;
  }
  .rc-its .rc-bento__tile,
  .rc-its .rc-bento__tile--wide,
  .rc-its .rc-bento__tile--tall,
  .rc-its .rc-bento__tile:last-child {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 120px;
  }

  .rc-its .rc-coda {
    padding-left: 16px;
  }
}

/* Hover affordances are pointer-only: on touch they either never fire or
   stick after a tap. */
@media (hover: none) {
  .rc-its .rc-ledger li:hover {
    padding-left: 8px;
    color: var(--rc-ink);
  }
  .rc-its .rc-advice li:hover {
    transform: none;
    color: var(--rc-ink);
  }
  .rc-its .rc-hcard:hover {
    transform: none;
  }
}

/* Mobile: security tiles read as centred labels. */
@media (max-width: 767.98px) {
  .rc-its .rc-bento__tile {
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 96px;
  }
}

/* "Our consultants can advise on:" points at the list beside it. The list is
   in the left column, so the arrow points left and nudges that way; stacked
   on small screens the list is below, so it turns to point down. */
.rc-its .rc-lead-in--point {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.rc-its .rc-point {
  display: inline-flex;
  width: 58px;
  height: 22px;
  color: var(--rc-signal);
  animation: rc-point-x 1.6s var(--rc-ease) infinite;
}
.rc-its .rc-point svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes rc-point-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}
@media (min-width: 992px) {
  /* The arrow leads out of the pane toward the list on the left. */
  .rc-its .rc-sticky--flip .rc-lead-in--point {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}
@media (max-width: 991.98px) {
  .rc-its .rc-point {
    width: 22px;
    height: 22px;
    transform-origin: center;
    rotate: -90deg;
    animation-name: rc-point-y;
  }
  @keyframes rc-point-y {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .rc-its .rc-point { animation: none !important; }
}

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