/* ==========================================================================
   it-consultancy.css
   Page-scoped design system for it-consultancy.html
   --------------------------------------------------------------------------
   Namespaced under `.rc-itc` (on <body>). It shares no class names with
   `.rc-its` (the IT Support page) and no visual pattern either — the two pages
   use the same brand colours and typefaces and nothing else in common.

   Where IT Support is deep navy, porcelain and soft radii, this page is
   stone-and-ink: a grained concrete surface, liquid-glass panels, hard-edged
   brutalist blocks and free-form organic shapes. The brand orange is the one
   constant.

   Almost all motion here is NATIVE scroll-driven animation
   (`animation-timeline: view()`), which runs on the compositor. Every such
   block lives inside `@supports`, and the base styles outside it are the
   finished, static state — so a browser without scroll timelines gets a
   correct page, never a stuck one.

   Contents
     1. Tokens
     2. Grain
     3. Base + typography
     4. Reveal primitive
     5. Liquid glass
     6. Organic shapes
     7. Dock navigation
     8. Hero — kinetic typography
     9. Reel — kinetic type lines
    10. Deck — sticky card stack
    11. Migrate — glass over organic field
    12. Board — neo-brutalist wall
    13. Recover — organic mass
    14. Orbit
    15. Close — brutalist slab
    16. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   The palette deliberately moves the base surface from the IT Support page's
   cool porcelain to a warm-neutral stone, so the two pages read as siblings
   rather than as the same template recoloured.
   Nothing on this page is pure white; the lightest value is #EFEDE7, and the
   glass panels are translucent stone rather than translucent white.
   ========================================================================== */
.rc-itc {
  /* Surfaces */
  --rcc-concrete: #e6e4de; /* base stone                                 */
  --rcc-concrete-2: #dbd8d0; /* one step deeper, alternating sections      */
  --rcc-raise: #efede7; /* lifted blocks                              */
  --rcc-ink: #0b1626; /* near-black navy — brutalist borders        */
  --rcc-ink-2: #14263f; /* raised surface on ink                      */

  /* Brand — unchanged from the live site */
  --rcc-signal: #ee690c;
  --rcc-navy: #0c2957;

  /* Text */
  --rcc-text: #16233a;
  --rcc-text-soft: #55607a;
  --rcc-text-inv: #e9eaf0;
  --rcc-text-inv-s: #9aa6bd;

  /* Hairlines */
  --rcc-hair: rgba(11, 22, 38, 0.14);
  --rcc-hair-inv: rgba(233, 234, 240, 0.16);

  /* Rhythm */
  --rcc-space: clamp(72px, 9.5vw, 140px);
  --rcc-gutter: clamp(24px, 4vw, 64px);

  /* Motion */
  --rcc-ease: cubic-bezier(0.2, 0.8, 0.22, 1);

  /* Clearance for the site's sticky header — single source of truth. */
  --rcc-header: 112px;
}

/* ==========================================================================
   2. GRAIN
   One fixed layer of fractal noise, generated by an inline SVG filter as a
   data URI: no network request, no image decode, resolution independent.
   `overlay` blend darkens the light areas and lightens the dark ones, so the
   same single layer grains both the concrete sections and the ink ones.
   z-index 5 keeps it above page content but below the site header (z ~999),
   so the logo and menu stay clean.
   ========================================================================== */
.rc-itc .rc-grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.085;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  /* Promotes the layer once so blending never re-rasterises on scroll. */
  will-change: transform;
}

/* ==========================================================================
   3. BASE + TYPOGRAPHY
   ========================================================================== */
body.rc-itc {
  background: var(--rcc-concrete);
  color: var(--rcc-text);
}

.rc-itc main p {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.76;
  margin: 0 0 1.15em;
  max-width: 66ch;
}

/* Headings sit a full weight heavier than on the IT Support page — this page
   leans on mass rather than on air. */
.rc-itc .rc-h2 {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.3vw, 50px);
  line-height: 1.24;
  letter-spacing: -0.03em;
  color: var(--rcc-text);
  margin: 0 0 0.62em;
  text-wrap: balance;
}
/* A heading that carries its own rule, used where the section has no slab. */
.rc-itc .rc-h2--rule {
  padding-bottom: 0.38em;
  border-bottom: 3px solid currentColor;
  display: inline-block;
}
/* A heading boxed like a rubber stamp — only on the brutalist section. */
.rc-itc .rc-h2--stamp {
  display: inline-block;
  border: 3px solid var(--rcc-ink);
  padding: 0.22em 0.44em;
  background: var(--rcc-signal);
  color: #fff;
  box-shadow: 8px 8px 0 var(--rcc-ink);
  transform: rotate(-1.1deg);
}
.rc-itc .rc-h2--display {
  font-size: clamp(32px, 4.4vw, 60px);
}

/* The line that introduces a list. Set as a heavy label with a thick rule
   under it — structure, not decoration, and no all-caps. */
.rc-itc .rc-cue {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--rcc-signal);
  margin: 1.4em 0 0;
  padding-bottom: 0.3em;
  border-bottom: 3px solid var(--rcc-signal);
  display: inline-block;
  max-width: none;
}
.rc-itc .rc-cue--dark {
  color: var(--rcc-ink);
  border-bottom-color: var(--rcc-ink);
}

/* Closing paragraph of a block. Different device to the IT Support page's
   left rule: here it is indented and set slightly larger, like a marginal
   conclusion. */
.rc-itc .rc-after {
  max-width: 70ch;
  margin: var(--rcc-gutter) 0 0 auto;
  font-size: clamp(16.5px, 1.25vw, 20px);
  line-height: 1.6;
  color: var(--rcc-text);
  padding-left: clamp(0px, 4vw, 60px);
  border-left: 6px solid var(--rcc-signal);
}
.rc-itc .rc-after--dark {
  border-left-color: var(--rcc-ink);
}

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

.rc-itc a:focus-visible,
.rc-itc [tabindex]:focus-visible {
  outline: 3px solid var(--rcc-signal);
  outline-offset: 3px;
}

/* Section shells. Padding lives on one class so the modifiers cannot tie on
   specificity and cancel each other out. */
.rc-itc .rc-section {
  position: relative;
  padding: var(--rcc-space) 0;
}
.rc-itc .rc-section--concrete {
  background: var(--rcc-concrete);
}
.rc-itc .rc-section--concrete-2 {
  background: var(--rcc-concrete-2);
}
.rc-itc .rc-section--ink {
  background: var(--rcc-ink);
}
.rc-itc .rc-section--ink .rc-h2 {
  color: var(--rcc-signal);
}
.rc-itc .rc-section--ink p {
  color: var(--rcc-text-inv);
}

/* PERFORMANCE: rendering work is skipped for the brutalist wall while it is
   off-screen. Applied only here — never to the sticky deck, the orbit or the
   organic mass, because skipped content has no layout and anything measured
   or scroll-linked would resolve against a zero-height box. */
.rc-itc #rc-security {
  content-visibility: auto;
  contain-intrinsic-size: auto 1100px;
}

/* ==========================================================================
   4. REVEAL PRIMITIVE
   The plain entrance used by blocks that do not have a scroll-driven
   treatment of their own. JS only toggles `.is-in`; CSS owns the transition.
   Gated on `html.rc-js` so the page is readable without JS.
   ========================================================================== */
.rc-js .rc-itc [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.8s var(--rcc-ease),
    transform 0.8s var(--rcc-ease);
  transition-delay: var(--rcc-delay, 0ms);
}
.rc-js .rc-itc [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   5. LIQUID GLASS
   Three ingredients, all required or it reads as a flat translucent box:
     - backdrop-filter blur + saturation boost, so what is behind is genuinely
       refracted and colour-enriched rather than just dimmed;
     - a specular sweep across the top-left, which is what makes the surface
       look curved;
     - an inset top highlight plus a soft outer shadow, which give it an edge
       and lift it off the background.
   `--glass-tint` lets the same component sit on ink or on stone.
   ========================================================================== */
.rc-itc .rc-glass {
  position: relative;
  isolation: isolate;
  border-radius: 26px;
  background: linear-gradient(
    142deg,
    rgba(255, 255, 255, calc(var(--glass-tint, 0.14) * 1.6)),
    rgba(255, 255, 255, var(--glass-tint, 0.14))
  );
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 28px 70px rgba(11, 22, 38, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
/* The specular. A single fixed-angle gradient — a moving highlight would be
   ambient motion for its own sake. */
.rc-itc .rc-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.05) 34%,
    transparent 62%
  );
  pointer-events: none;
  z-index: -1;
}
/* Variant for use on the light stone sections: the tint has to be stone, not
   white, or the panel disappears into the background and reads as white. */
.rc-itc .rc-glass--light {
  background: linear-gradient(
    142deg,
    rgba(239, 237, 231, 0.82),
    rgba(239, 237, 231, 0.55)
  );
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 22px 48px rgba(11, 22, 38, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.rc-itc .rc-glass--light p {
  color: var(--rcc-text);
}

/* Fallback: without backdrop-filter the panel would be a washed-out
   rectangle, so it becomes a solid one instead. */
@supports not (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .rc-itc .rc-glass {
    background: rgba(20, 38, 63, 0.92);
  }
  .rc-itc .rc-glass--light {
    background: var(--rcc-raise);
  }
}

/* ==========================================================================
   6. ORGANIC SHAPES
   Free-form border-radius (four horizontal and four vertical radii) rather
   than circles or blurred blobs, morphing on a long, slow keyframe. They are
   the only looping motion on the page and they carry no information, so they
   are kept very low contrast and stop entirely under reduced motion.
   ========================================================================== */
.rc-itc .rc-blob {
  position: absolute;
  display: block;
  border-radius: 58% 42% 37% 63% / 46% 39% 61% 54%;
  filter: blur(2px);
  animation: rc-morph 22s ease-in-out infinite alternate;
  will-change: border-radius, transform;
}
@keyframes rc-morph {
  0% {
    border-radius: 58% 42% 37% 63% / 46% 39% 61% 54%;
    transform: rotate(0deg) scale(1);
  }
  50% {
    border-radius: 38% 62% 58% 42% / 62% 55% 45% 38%;
    transform: rotate(6deg) scale(1.05);
  }
  100% {
    border-radius: 47% 53% 68% 32% / 35% 58% 42% 65%;
    transform: rotate(-5deg) scale(0.97);
  }
}

/* ==========================================================================
   7. DOCK NAVIGATION
   A bottom-edge glass dock. Each section is a segment; the current one grows
   and takes the brand colour, so position in the document is readable without
   opening anything and without printing numbers.

   The hover/focus label is one line, centred above the whole dock with a
   clear gap, so it never sits on top of the segments.
   ========================================================================== */
.rc-itc .rc-dock {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 900;
  transform: translateX(-50%) translateY(180%);
  transition: transform 0.55s var(--rcc-ease);
}
.rc-itc .rc-dock.is-visible {
  transform: translateX(-50%) translateY(0);
}

.rc-itc .rc-dock ul {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 11px 15px;
  list-style: none;
  border-radius: 999px;
  /* Dark glass so the dock holds up over both the stone and the ink
       sections without ever changing colour. */
  background: rgba(11, 22, 38, 0.52);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 16px 40px rgba(11, 22, 38, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.rc-itc .rc-dock li {
  position: static;
}
.rc-itc .rc-dock a {
  display: block;
  padding: 6px 0;
}
.rc-itc .rc-dock__seg {
  display: block;
  width: 24px;
  height: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.34);
  transition:
    width 0.4s var(--rcc-ease),
    background 0.3s var(--rcc-ease);
}
.rc-itc .rc-dock a:hover .rc-dock__seg {
  background: rgba(255, 255, 255, 0.7);
}
.rc-itc .rc-dock a.is-current .rc-dock__seg {
  width: 52px;
  background: var(--rcc-signal);
}

.rc-itc .rc-dock__label {
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rcc-text);
  background: var(--rcc-raise);
  border: 2px solid var(--rcc-ink);
  padding: 8px 14px;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--rcc-ease);
  /* Centred above the whole dock (li is static, so this resolves against
     the fixed dock), well clear of the segments. */
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 4px 4px 0 var(--rcc-signal);
}
.rc-itc .rc-dock a:hover .rc-dock__label,
.rc-itc .rc-dock a:focus-visible .rc-dock__label {
  opacity: 1;
}

/* ==========================================================================
   8. HERO — kinetic typography
   The headline is the layout. JS wraps each word in a span (text unchanged)
   so the words can rise into place one after another, and the whole line
   then responds to scroll as a single mass.
   ========================================================================== */
.rc-itc .rc-hero {
  position: relative;
  background: var(--rcc-concrete);
  padding: calc(var(--rcnav-clearance, 100px) + clamp(40px, 6vw, 90px)) 0 clamp(80px, 9vw, 130px);
  overflow: hidden;
}
.rc-itc .rc-hero__organics {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rc-itc .rc-blob--a {
  width: min(560px, 52vw);
  aspect-ratio: 1;
  top: -12%;
  right: -6%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(238, 105, 12, 0.5),
    rgba(238, 105, 12, 0.08) 70%
  );
}
.rc-itc .rc-blob--b {
  width: min(380px, 42vw);
  aspect-ratio: 1;
  bottom: -16%;
  left: -8%;
  background: radial-gradient(
    circle at 60% 40%,
    rgba(12, 41, 87, 0.32),
    rgba(12, 41, 87, 0.04) 72%
  );
  animation-duration: 28s;
}

.rc-itc .rc-hero__eyebrow {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--rcc-signal);
  margin: 0 0 clamp(14px, 1.6vw, 22px);
}

.rc-itc .rc-hero__title {
  position: relative;
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 8.2vw, 122px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--rcc-text);
  margin: 0;
  max-width: 14ch;
}
/* Word wrappers written by JS. `overflow:hidden` on the wrapper is what makes
   each word appear to rise out of the line rather than fade in. */
.rc-itc .rc-hero__title .rc-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Room for glyph overhangs (y, f, s, e) that the tight tracking pushes
     past the word box; the negative margin keeps the spacing unchanged. */
  padding: 0.04em 0.12em 0.1em;
  margin: -0.04em -0.12em -0.1em;
}
.rc-itc .rc-hero__title .rc-w > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(112%) rotate(3deg);
  animation: rc-word 0.95s var(--rcc-ease) both;
  animation-delay: calc(var(--w) * 60ms);
}
@keyframes rc-word {
  to {
    transform: none;
  }
}

.rc-itc .rc-hero__panel {
  --glass-tint: 0.5;
  margin-top: clamp(36px, 5vw, 70px);
  margin-left: auto;
  max-width: 640px;
  padding: clamp(26px, 3vw, 42px);
  background: linear-gradient(
    142deg,
    rgba(239, 237, 231, 0.78),
    rgba(239, 237, 231, 0.48)
  );
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 26px 56px rgba(11, 22, 38, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.rc-itc .rc-hero__panel p {
  color: var(--rcc-text);
  max-width: none;
}
.rc-itc .rc-hero__panel p:last-child {
  margin-bottom: 0;
}

/* Hero row: the consultancy route on the left, the glass panel on the right,
   so the space under the headline is used instead of left empty. */
.rc-itc .rc-hero__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 70px);
}
.rc-itc .rc-hero__row .rc-hero__panel {
  margin: 0;
}

.rc-itc .rc-hero__side-label {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--rcc-text-soft);
  margin: 0 0 clamp(18px, 2vw, 26px);
  opacity: 0;
  animation: rc-step-in 0.7s var(--rcc-ease) 0.55s both;
}

.rc-itc .rc-steps {
  position: relative;
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The line joining the four steps, drawn downwards on load. */
.rc-itc .rc-steps::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(var(--rcc-signal), rgba(238, 105, 12, 0.15));
  transform-origin: top;
  animation: rc-step-line 1.1s var(--rcc-ease) 0.8s both;
}
@keyframes rc-step-line {
  from {
    transform: scaleY(0);
  }
}
.rc-itc .rc-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(16px, 1.6vw, 22px);
  align-items: center;
  opacity: 0;
  animation: rc-step-in 0.7s var(--rcc-ease) both;
  animation-delay: calc(0.75s + var(--i) * 0.14s);
}
@keyframes rc-step-in {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.rc-itc .rc-steps__n {
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--rcc-ink);
  border-radius: 50%;
  background: var(--rcc-raise);
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--rcc-ink);
  box-shadow: 3px 3px 0 var(--rcc-ink);
  transition:
    background 0.3s var(--rcc-ease),
    color 0.3s var(--rcc-ease),
    transform 0.3s var(--rcc-ease);
}
.rc-itc .rc-steps__t {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rcc-text);
}
.rc-itc .rc-steps__d {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.4;
  color: var(--rcc-text-soft);
}
.rc-itc .rc-steps li:hover .rc-steps__n {
  background: var(--rcc-signal);
  color: #fff;
  transform: translate(-2px, -2px);
}

.rc-itc .rc-hero__cta {
  margin-top: clamp(28px, 3.4vw, 44px);
  opacity: 0;
  animation: rc-step-in 0.7s var(--rcc-ease) 1.4s both;
}

@supports (animation-timeline: view()) {
  /* KINETIC: as the hero leaves, the headline tightens its tracking, lifts
       and fades. Scrubbed by the scroll position, so it reverses exactly when
       the reader scrolls back up. */
  .rc-itc .rc-hero__title {
    animation: rc-tighten linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  @keyframes rc-tighten {
    to {
      letter-spacing: -0.075em;
      transform: translateY(-26px);
      opacity: 0.3;
    }
  }
}

/* ==========================================================================
   9. REEL — pinned, scroll-filled type lines
   Eight display lines set in a faint tint that fill with the text colour,
   left to right and in order, while the list is pinned mid-viewport. The
   fill edge is a gradient stop driven by --fill; it-consultancy.js writes
   it per line, sizes the track (list height + scroll budget) and sets the
   sticky offset, so none of the pinning exists without JS.
   The spans are inline so a line that wraps keeps filling onto its second
   row instead of filling both rows at once.
   Without JS, or with reduced motion, the lines are simply solid.
   ========================================================================== */
.rc-itc .rc-reel-track {
  position: relative;
  margin: clamp(32px, 4vw, 56px) 0 0;
}
/* No margin on the list itself: a sticky element's margins shorten its
   travel, and the track height is measured without them. */
.rc-itc .rc-reel {
  margin: 0;
}
.rc-itc .rc-reel-track.is-pinned .rc-reel {
  position: sticky;
}
/* Each line is its own point: a hairline between rows and a square marker,
   so the eight items read as a list rather than one paragraph. */
.rc-itc .rc-reel li {
  --reel-size: clamp(22px, 3.1vw, 42px);
  --reel-mark: clamp(10px, 0.9vw, 14px);
  --reel-pad: clamp(12px, 1.3vw, 20px);
  position: relative;
  /* The span stays inline (a flex item would be blockified), so a wrapped
     line still fills row by row. The marker is positioned instead. */
  padding: var(--reel-pad) 0 var(--reel-pad) calc(var(--reel-mark) + clamp(14px, 1.6vw, 24px));
  border-top: 1px solid var(--rcc-hair);
}
.rc-itc .rc-reel li:last-child {
  border-bottom: 1px solid var(--rcc-hair);
}
.rc-itc .rc-reel li::before {
  content: "";
  position: absolute;
  left: 0;
  /* centred on the first line of text, however many lines it wraps to */
  top: calc(var(--reel-pad) + (var(--reel-size) * 1.16 - var(--reel-mark)) / 2);
  width: var(--reel-mark);
  height: var(--reel-mark);
  box-sizing: border-box;
  background: var(--rcc-signal);
  border: 2px solid var(--rcc-ink);
  box-shadow: 2px 2px 0 var(--rcc-ink);
}
.rc-itc .rc-reel li span {
  display: inline;
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: var(--reel-size, clamp(22px, 3.1vw, 42px));
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--rcc-text);
}
.rc-itc .rc-reel--fill li span {
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--rcc-text) calc(var(--fill, 0%) - 6%),
    rgba(22, 35, 58, 0.16) var(--fill, 0%)
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* ==========================================================================
   10. DECK — sticky card stack
   Three panels describing a sequence, so they stack in reading order: each
   pins a little lower than the one before and buries it, leaving a visible
   lip. The offset and the z-order both come from --i, set in the markup.
   Pure `position: sticky` — no scroll maths, nothing to measure.
   ========================================================================== */
/* Spacing between cards is a flex `gap`, never a margin. A sticky element's
   travel is limited to its container minus its OWN margins, so a tall
   margin-bottom made the earlier cards unpin early and slide under each
   other before the last card could land on top. */
.rc-itc .rc-deck {
  margin-top: clamp(36px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 26vh;
}
/* Empty last flex item: the gap before it keeps the finished stack pinned
   for one more stretch of scroll, with the last card resting on top. */
.rc-itc .rc-deck::after {
  content: "";
  display: block;
  height: 0;
}
.rc-itc .rc-deck__card {
  position: sticky;
  /* Each card parks 26px below the previous one. */
  top: calc(var(--rcc-header) + var(--i) * 26px);
  z-index: calc(var(--i) + 1);
  padding: clamp(28px, 3.4vw, 52px);
  min-height: 250px;
  display: flex;
  align-items: center;
}
.rc-itc .rc-deck__card p {
  margin-bottom: 0;
  font-size: clamp(16px, 1.35vw, 20px);
}
/* A thick orange edge on the left of every card so the buried lip still reads
   as a card and not as a shadow. */
.rc-itc .rc-deck__card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--rcc-signal);
}

/* ==========================================================================
   11. MIGRATE — glass over an organic field
   The only ink section in the upper half. Three glass panels at different
   horizontal positions and drift depths, floating over morphing blobs, so the
   blobs genuinely refract through the backdrop-filter.
   ========================================================================== */
.rc-itc .rc-migrate {
  overflow: hidden;
}
.rc-itc .rc-migrate__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rc-itc .rc-blob--c {
  width: min(520px, 55vw);
  aspect-ratio: 1;
  top: 6%;
  left: -8%;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(238, 105, 12, 0.55),
    rgba(238, 105, 12, 0.05) 70%
  );
}
.rc-itc .rc-blob--d {
  width: min(440px, 48vw);
  aspect-ratio: 1;
  bottom: 2%;
  right: -6%;
  background: radial-gradient(
    circle at 55% 45%,
    rgba(60, 120, 220, 0.4),
    rgba(60, 120, 220, 0.03) 72%
  );
  animation-duration: 26s;
}
.rc-itc .rc-blob--e {
  width: min(320px, 36vw);
  aspect-ratio: 1;
  top: 44%;
  left: 46%;
  background: radial-gradient(
    circle at 45% 50%,
    rgba(238, 105, 12, 0.28),
    rgba(12, 41, 87, 0.02) 70%
  );
  animation-duration: 32s;
}

.rc-itc .rc-migrate__stack {
  position: relative;
  margin-top: clamp(40px, 4.5vw, 70px);
  display: grid;
  gap: clamp(26px, 3.2vw, 54px);
}
.rc-itc .rc-migrate__panel {
  --glass-tint: 0.13;
  padding: clamp(26px, 3vw, 44px);
  max-width: 620px;
}
.rc-itc .rc-migrate__panel p {
  margin-bottom: 0;
  max-width: none;
}
/* Staggered horizontally so the three panels read as drifting rather than as
   a stacked column. */
.rc-itc .rc-migrate__panel:nth-child(2) {
  margin-left: auto;
}
.rc-itc .rc-migrate__panel:nth-child(3) {
  margin-left: auto;
  margin-right: auto;
}

@supports (animation-timeline: view()) {
  /* PARALLAX, compositor-side. Each panel drifts a different distance, so
       the group separates in depth as the section crosses the viewport. */
  .rc-itc .rc-migrate__panel {
    animation: rc-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes rc-drift {
    from {
      transform: translate3d(0, var(--d, 44px), 0);
    }
    to {
      transform: translate3d(0, calc(var(--d, 44px) * -1), 0);
    }
  }
  .rc-itc .rc-migrate__panel:nth-child(1) {
    --d: 30px;
  }
  .rc-itc .rc-migrate__panel:nth-child(2) {
    --d: 64px;
  }
  .rc-itc .rc-migrate__panel:nth-child(3) {
    --d: 16px;
  }
}

/* ==========================================================================
   12. BOARD — neo-brutalist wall
   Zero radius, 3px solid borders, hard offset shadows with no blur, and a
   resting tilt per block. Hovering or pressing a block snaps it straight and
   pushes it into its own shadow, so it reads as a physical object.
   ========================================================================== */
.rc-itc .rc-board__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: start;
  margin-bottom: clamp(44px, 5vw, 76px);
}
.rc-itc .rc-board__copy p:last-child {
  margin-bottom: 0;
}

.rc-itc .rc-board__wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.rc-itc .rc-board__wall li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 112px;
  padding: clamp(16px, 1.6vw, 22px);
  background: var(--rcc-raise);
  border: 3px solid var(--rcc-ink);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--rcc-ink);
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.22;
  color: var(--rcc-ink);
  transform: rotate(var(--t));
  transition:
    transform 0.28s var(--rcc-ease),
    box-shadow 0.28s var(--rcc-ease),
    background 0.28s var(--rcc-ease);
}
/* Every third block is filled, which breaks the grid into an irregular
   rhythm without changing any cell's size. */
.rc-itc .rc-board__wall li:nth-child(3n + 2) {
  background: var(--rcc-signal);
  color: #fff;
}
.rc-itc .rc-board__wall li:nth-child(4n + 4) {
  background: var(--rcc-ink);
  color: var(--rcc-raise);
  box-shadow: 8px 8px 0 var(--rcc-signal);
}

/* The reveal primitive sets `transform: none`, which would flatten the tilt.
   These two rules carry the tilt through both reveal states; they are written
   at higher specificity than the generic rule on purpose. */
.rc-js .rc-itc .rc-board__wall li[data-reveal] {
  transform: rotate(calc(var(--t) * 4)) translate3d(0, 34px, 0);
}
.rc-js .rc-itc .rc-board__wall li[data-reveal].is-in {
  transform: rotate(var(--t));
}
/* Pressed state. Last in the cascade so it wins over `.is-in`. */
.rc-itc .rc-board__wall li:hover,
.rc-js .rc-itc .rc-board__wall li[data-reveal].is-in:hover {
  transform: rotate(0deg) translate(5px, 5px);
  box-shadow: 3px 3px 0 var(--rcc-ink);
}
.rc-itc .rc-board__wall li:nth-child(4n + 4):hover {
  box-shadow: 3px 3px 0 var(--rcc-signal);
}

/* ==========================================================================
   13. RECOVER — recovery simulation
   Copy on the left, a compact visual on the right: an ink mass that keeps
   reshaping, carrying a map of systems around a core. States are classes on
   #rcRecover set by it-consultancy.js:
     .is-incident   one node (data-failed) fails, its link breaks, a wave
     .is-restoring  Backups draws a restore line to the failed node
     .is-recovered  the node flashes green and reconnects
   --tx / --ty lean the visual toward the pointer.
   ========================================================================== */
.rc-itc .rc-recover {
  background: var(--rcc-concrete);
  overflow: hidden;
}
.rc-itc .rc-recover__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--rcc-gutter);
  align-items: center;
}
.rc-itc .rc-recover__copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
}
.rc-itc .rc-recover__close {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 27px);
  line-height: 1.38;
  color: var(--rcc-ink);
  margin-top: 1.6em;
  margin-bottom: 0;
}

.rc-itc .rc-recover__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.rc-itc .rc-recover__visual {
  --tx: 0px;
  --ty: 0px;
  --rcr-ok: #3ecf8e;
  --rcr-alert: #ff5b45;
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  transform: translate3d(var(--tx), var(--ty), 0);
  transition: transform 0.6s var(--rcc-ease);
}

.rc-itc .rc-recover__mass {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 26%, rgba(238, 105, 12, 0.35), transparent 55%),
    linear-gradient(150deg, var(--rcc-ink-2), var(--rcc-ink));
  border-radius: 54% 46% 38% 62% / 48% 42% 58% 52%;
  box-shadow: 0 40px 80px -30px rgba(11, 22, 38, 0.55);
  animation: rc-morph 16s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rc-morph {
  0%, 100% { border-radius: 54% 46% 38% 62% / 48% 42% 58% 52%; }
  33% { border-radius: 42% 58% 60% 40% / 56% 38% 62% 44%; }
  66% { border-radius: 62% 38% 46% 54% / 40% 58% 42% 60%; }
}
/* A short shudder when an incident hits. */
.rc-itc .rc-recover__visual.is-incident .rc-recover__mass {
  animation: rc-morph 16s ease-in-out infinite, rc-shake 0.5s ease-in-out 1;
}
@keyframes rc-shake {
  20% { translate: -6px 0; }
  40% { translate: 5px 0; }
  60% { translate: -3px 0; }
  80% { translate: 2px 0; }
}

.rc-itc .rc-recover__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rc-itc .rcr-orbit {
  fill: none;
  stroke: rgba(233, 234, 240, 0.12);
  stroke-width: 1;
  stroke-dasharray: 2 8;
  transform-origin: 200px 200px;
  animation: rc-spin 60s linear infinite;
}
@keyframes rc-spin {
  to { transform: rotate(360deg); }
}

/* Data flowing along every healthy link. */
.rc-itc .rcr-link {
  stroke: rgba(233, 234, 240, 0.4);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
  animation: rc-flow 1.2s linear infinite;
  transition: stroke 0.3s ease, opacity 0.3s ease;
}
@keyframes rc-flow {
  to { stroke-dashoffset: -20; }
}

.rc-itc .rcr-restore {
  stroke: var(--rcc-signal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 1s var(--rcc-ease), opacity 0.3s ease;
}

.rc-itc .rcr-core__dot {
  fill: var(--rcc-signal);
}
.rc-itc .rcr-core__ring {
  fill: none;
  stroke: rgba(238, 105, 12, 0.45);
  stroke-width: 1.5;
}
.rc-itc .rcr-core__pulse {
  fill: rgba(238, 105, 12, 0.25);
  transform-origin: 200px 200px;
  animation: rc-core 2.4s ease-out infinite;
}
@keyframes rc-core {
  from { transform: scale(0.6); opacity: 0.9; }
  to { transform: scale(1.6); opacity: 0; }
}

.rc-itc .rcr-node__dot {
  fill: var(--rcr-ok);
  transition: fill 0.3s ease;
}
.rc-itc .rcr-node__halo {
  fill: rgba(62, 207, 142, 0.14);
  stroke: rgba(62, 207, 142, 0.35);
  stroke-width: 1;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.rc-itc .rcr-node--backups .rcr-node__dot {
  fill: #e9eaf0;
}
.rc-itc .rcr-node--backups .rcr-node__halo {
  fill: rgba(233, 234, 240, 0.1);
  stroke: rgba(233, 234, 240, 0.3);
}
.rc-itc .rcr-node__wave {
  fill: none;
  stroke: var(--rcr-alert);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.rc-itc .rcr-node text {
  fill: #e9eaf0;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-anchor: middle;
}

/* ---- incident: failed node + broken link ---- */
.rc-itc .rc-recover__visual.is-incident .rcr-node.is-failed .rcr-node__dot,
.rc-itc .rc-recover__visual.is-restoring .rcr-node.is-failed .rcr-node__dot {
  fill: var(--rcr-alert);
}
.rc-itc .rc-recover__visual.is-incident .rcr-node.is-failed .rcr-node__halo,
.rc-itc .rc-recover__visual.is-restoring .rcr-node.is-failed .rcr-node__halo {
  fill: rgba(255, 91, 69, 0.18);
  stroke: rgba(255, 91, 69, 0.55);
}
.rc-itc .rc-recover__visual.is-incident .rcr-node.is-failed .rcr-node__wave {
  animation: rc-wave 1.1s ease-out infinite;
}
@keyframes rc-wave {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(4); opacity: 0; }
}
.rc-itc .rc-recover__visual.is-incident .rcr-link.is-failed,
.rc-itc .rc-recover__visual.is-restoring .rcr-link.is-failed {
  stroke: var(--rcr-alert);
  opacity: 0.25;
  animation-play-state: paused;
}

/* ---- restoring: Backups draws the route ---- */
.rc-itc .rc-recover__visual.is-restoring .rcr-restore.is-active {
  stroke-dashoffset: 0;
  opacity: 1;
}
.rc-itc .rc-recover__visual.is-restoring .rcr-node--backups .rcr-node__halo {
  fill: rgba(238, 105, 12, 0.22);
  stroke: rgba(238, 105, 12, 0.6);
}

/* ---- recovered: green flash ---- */
.rc-itc .rc-recover__visual.is-recovered .rcr-node.is-failed .rcr-node__halo {
  animation: rc-heal 0.9s ease-out 1;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes rc-heal {
  0% { transform: scale(1); fill: rgba(62, 207, 142, 0.5); }
  100% { transform: scale(1.5); fill: rgba(62, 207, 142, 0.14); }
}

/* ---- status chip ---- */
.rc-itc .rc-recover__status {
  position: absolute;
  left: 50%;
  bottom: 4%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: none;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(11, 22, 38, 0.85);
  border: 1px solid rgba(233, 234, 240, 0.16);
  color: #e9eaf0;
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.rc-itc .rc-recover__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rcr-ok);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.18);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.rc-itc .rc-recover__visual.is-incident .rc-recover__status-dot {
  background: var(--rcr-alert);
  box-shadow: 0 0 0 3px rgba(255, 91, 69, 0.22);
}
.rc-itc .rc-recover__visual.is-restoring .rc-recover__status-dot {
  background: var(--rcc-signal);
  box-shadow: 0 0 0 3px rgba(238, 105, 12, 0.22);
}

/* ---- trigger button ---- */
.rc-itc .rc-recover__trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 2px solid var(--rcc-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--rcc-ink);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.rc-itc .rc-recover__trigger svg {
  width: 16px;
  height: 16px;
}
.rc-itc .rc-recover__trigger:hover,
.rc-itc .rc-recover__trigger:focus-visible {
  background: var(--rcc-ink);
  color: #fff;
  transform: translateY(-2px);
}
.rc-itc .rc-recover__trigger:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
  background: transparent;
  color: var(--rcc-ink);
}

/* ==========================================================================
   14. ORBIT
   Six categories weighed against each other rather than ranked, so they sit
   around a ring: no first, no last, nothing to number. The organic ring
   behind them turns with the scroll; the labels stay upright.
   ========================================================================== */
.rc-itc .rc-orbit__intro {
  max-width: 64ch;
  margin-bottom: clamp(40px, 5vw, 70px);
}

.rc-itc .rc-orbit {
  position: relative;
  width: min(760px, 92vw);
  aspect-ratio: 1;
  margin: 0 auto;
}
.rc-itc .rc-orbit__ring {
  position: absolute;
  inset: 12%;
  border: 2px dashed rgba(11, 22, 38, 0.22);
  border-radius: 56% 44% 38% 62% / 48% 42% 58% 52%;
  display: block;
}
/* Centre mark — the decision the six criteria are weighed for. */
.rc-itc .rc-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: var(--rcc-signal);
  border-radius: 50%;
}
.rc-itc .rc-orbit__items li {
  --r: clamp(150px, 20vw, 262px);
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(150px, 19vw, 215px);
  /* Rotate out to the item's angle, step out along the radius, then rotate
       back by the same amount so the label ends up upright. */
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg))
    translateY(calc(var(--r) * -1)) rotate(calc(var(--i) * -60deg));
}
.rc-itc .rc-orbit__items li span {
  display: block;
  padding: 16px 18px;
  background: var(--rcc-raise);
  border: 2px solid var(--rcc-ink);
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.25;
  color: var(--rcc-ink);
  text-align: center;
  box-shadow: 5px 5px 0 rgba(11, 22, 38, 0.18);
  transition:
    box-shadow 0.3s var(--rcc-ease),
    transform 0.3s var(--rcc-ease),
    background 0.3s var(--rcc-ease);
}
.rc-itc .rc-orbit__items li:hover span {
  background: var(--rcc-signal);
  color: #fff;
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 rgba(11, 22, 38, 0.3);
}

/* Desktop: text on the left, a smaller ring on the right, so the ring
   fills the space beside the copy instead of sitting alone below it.
   The ring sizes itself from its own width (container units), so the
   labels stay inside it at every column width. */
@media (min-width: 992px) {
  .rc-itc .rc-orbit__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
  }
  .rc-itc .rc-orbit__layout .rc-orbit__intro {
    margin-bottom: 0;
  }
  .rc-itc .rc-orbit__layout .rc-orbit {
    container-type: inline-size;
    width: min(540px, 100%);
    margin: 0 0 0 auto;
  }
  .rc-itc .rc-orbit__layout .rc-orbit__items li {
    --r: 34cqw;
    width: clamp(125px, 30cqw, 175px);
  }
  .rc-itc .rc-orbit__layout .rc-orbit__items li span {
    padding: 11px 12px;
    font-size: clamp(13px, 2.6cqw, 15px);
  }
  .rc-itc .rc-orbit__layout .rc-orbit::after {
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
  }
}

@supports (animation-timeline: view()) {
  .rc-itc .rc-orbit__ring {
    animation: rc-turn linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes rc-turn {
    from {
      transform: rotate(-26deg);
    }
    to {
      transform: rotate(26deg);
    }
  }
}

/* ==========================================================================
   15. CLOSE — brutalist slab
   Flat brand orange, full bleed, with a heavy stone slab sitting off-centre
   on a hard shadow. The IT Support page closes centred and soft; this one
   closes hard left and loud.
   ========================================================================== */
.rc-itc .rc-close {
  background: var(--rcc-signal);
}
.rc-itc .rc-close__slab {
  max-width: 860px;
  background: var(--rcc-raise);
  border: 4px solid var(--rcc-ink);
  padding: clamp(30px, 4vw, 66px);
  box-shadow: 16px 16px 0 var(--rcc-ink);
}
.rc-itc .rc-close__slab .rc-h2 {
  color: var(--rcc-ink);
}
.rc-itc .rc-close__ask {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.4;
  color: var(--rcc-ink);
  border-top: 3px solid var(--rcc-ink);
  padding-top: 1.1em;
  margin-top: 1.4em;
  margin-bottom: 0;
}
.rc-itc .rc-close__cta {
  margin-top: 34px;
}

/* A block button rather than the theme's rounded one — it belongs to this
   section's register. It physically depresses into its own shadow. */
.rc-itc .rc-brut-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--rcc-ink);
  color: #fff;
  border: 3px solid var(--rcc-ink);
  padding: 18px 32px;
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 18px);
  text-decoration: none;
  box-shadow: 9px 9px 0 var(--rcc-signal);
  transition:
    transform 0.16s var(--rcc-ease),
    box-shadow 0.16s var(--rcc-ease);
}
.rc-itc .rc-brut-btn:hover {
  color: #fff;
  transform: translate(4px, 4px);
  box-shadow: 5px 5px 0 var(--rcc-signal);
}
.rc-itc .rc-brut-btn:active {
  transform: translate(9px, 9px);
  box-shadow: 0 0 0 var(--rcc-signal);
}

/* ==========================================================================
   15b. PHOTOGRAPHS
   Photos are framed like everything else on this page: a thick ink border,
   a hard offset shadow and a stamped label, so they read as part of the
   brutalist system rather than as stock pictures dropped in.
   ========================================================================== */
.rc-itc .rc-photo {
  position: relative;
  margin: 0;
  border: 4px solid var(--rcc-ink);
  background: var(--rcc-ink);
  box-shadow: 12px 12px 0 var(--rcc-signal);
  overflow: hidden;
}
.rc-itc .rc-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.03);
  transition: transform 0.8s var(--rcc-ease);
}
.rc-itc .rc-photo:hover img {
  transform: scale(1.04);
}
.rc-itc .rc-photo figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 9px 14px;
  background: var(--rcc-ink);
  color: #fff;
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-top: 3px solid var(--rcc-signal);
}

/* Advice: text left, photo right (the column was empty). */
.rc-itc .rc-photo-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.rc-itc .rc-photo--advice {
  aspect-ratio: 1 / 1;
  rotate: 1.2deg; /* separate property: the reveal animates `transform` */
}

/* Infrastructure: photo pinned on the left while the card deck stacks. */
.rc-itc .rc-infra {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.rc-itc .rc-photo--infra {
  position: sticky;
  top: calc(var(--rcc-header) + 20px);
  margin-top: clamp(36px, 4vw, 60px);
  aspect-ratio: 4 / 5;
  box-shadow: 12px 12px 0 var(--rcc-ink);
}

/* Closing: slab and photo side by side on the orange band. */
.rc-itc .rc-close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.rc-itc .rc-photo--partner {
  aspect-ratio: 3 / 4;
  box-shadow: 16px 16px 0 var(--rcc-ink);
  rotate: -1.5deg;
}

@media (max-width: 991.98px) {
  .rc-itc .rc-photo-row,
  .rc-itc .rc-infra,
  .rc-itc .rc-close__grid {
    grid-template-columns: 1fr;
  }
  .rc-itc .rc-photo--advice,
  .rc-itc .rc-photo--infra,
  .rc-itc .rc-photo--partner {
    position: relative;
    top: auto;
    aspect-ratio: 16 / 10;
    rotate: none;
    margin-right: 12px;
  }
  .rc-itc .rc-photo--infra {
    margin-top: 28px;
  }
  .rc-itc .rc-photo--partner {
    order: -1;
  }
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  .rc-itc .rc-board__wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

  .rc-itc .rc-hero__panel {
    margin-left: 0;
  }
  /* Stacked: the panel's copy first, then the route and its button. */
  .rc-itc .rc-hero__row {
    grid-template-columns: 1fr;
  }
  .rc-itc .rc-hero__side {
    order: 2;
  }
  .rc-itc .rc-board__head {
    grid-template-columns: 1fr;
  }
  .rc-itc .rc-board__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The deck stops pinning: with a short viewport the cards would cover
       each other before they could be read. */
  .rc-itc .rc-deck {
    gap: 22px;
  }
  .rc-itc .rc-deck::after {
    display: none;
  }
  .rc-itc .rc-deck__card {
    position: static;
    min-height: 0;
  }

  .rc-itc .rc-migrate__panel {
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* The ring carries no meaning on a narrow screen, so the six items
       become an ordinary column. */
  .rc-itc .rc-orbit {
    width: 100%;
    aspect-ratio: auto;
    display: grid;
    gap: 14px;
  }
  .rc-itc .rc-orbit__ring,
  .rc-itc .rc-orbit::after {
    display: none;
  }
  .rc-itc .rc-orbit__items {
    display: grid;
    gap: 14px;
  }
  .rc-itc .rc-orbit__items li {
    position: static;
    width: auto;
    transform: none;
  }
  .rc-itc .rc-orbit__items li span {
    text-align: left;
  }

  .rc-itc .rc-recover__grid {
    grid-template-columns: 1fr;
  }
  .rc-itc .rc-recover__visual {
    width: min(100%, 360px);
  }
  .rc-itc .rc-after {
    padding-left: 20px;
    border-left-width: 4px;
  }

  /* Labels are too wide for a phone; the segments stay tappable. */
  .rc-itc .rc-dock__label {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .rc-itc .rc-board__wall {
    grid-template-columns: 1fr;
  }
  .rc-itc .rc-board__wall li {
    min-height: 0;
  }
  .rc-itc .rc-h2--stamp {
    box-shadow: 5px 5px 0 var(--rcc-ink);
  }
  .rc-itc .rc-close__slab {
    box-shadow: 8px 8px 0 var(--rcc-ink);
    border-width: 3px;
  }
  .rc-itc .rc-dock ul {
    gap: 5px;
    padding: 9px 11px;
  }
  .rc-itc .rc-dock__seg {
    width: 16px;
  }
  .rc-itc .rc-dock a.is-current .rc-dock__seg {
    width: 34px;
  }
}

/* Hover affordances are pointer-only: on touch they either never fire or
   stick after a tap. */
@media (hover: none) {
  .rc-itc .rc-board__wall li:hover,
  .rc-js .rc-itc .rc-board__wall li[data-reveal].is-in:hover {
    transform: rotate(var(--t));
    box-shadow: 8px 8px 0 var(--rcc-ink);
  }
  .rc-itc .rc-orbit__items li:hover span {
    background: var(--rcc-raise);
    color: var(--rcc-ink);
    transform: none;
  }
}

/* ==========================================================================
   ACCESSIBILITY FLOOR
   Blobs stop morphing, scroll-driven animations are pinned to their finished
   state, entrances become instant. Nothing that carries meaning disappears.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rc-itc .rc-photo img {
    transition: none !important;
  }
  .rc-itc .rc-hero__side-label,
  .rc-itc .rc-steps li,
  .rc-itc .rc-steps::before,
  .rc-itc .rc-hero__cta {
    animation: none !important;
    opacity: 1 !important;
  }
  .rc-js .rc-itc [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .rc-js .rc-itc .rc-board__wall li[data-reveal] {
    transform: rotate(var(--t)) !important;
  }
  .rc-itc .rc-blob {
    animation: none !important;
  }
  .rc-itc .rc-hero__title .rc-w > i {
    animation: none !important;
    transform: none !important;
  }
  .rc-itc .rc-hero__title,
  .rc-itc .rc-reel li span,
  .rc-itc .rc-migrate__panel,
  .rc-itc .rc-recover__mass,
  .rc-itc .rc-orbit__ring {
    animation: none !important;
    transform: none !important;
  }
  /* Animations only: the SVG nodes are placed with transform attributes,
     which a `transform: none` here would collapse onto the origin. The
     simulation still changes state, just without motion. */
  .rc-itc .rc-recover__visual * {
    animation: none !important;
  }
  .rc-itc *,
  .rc-itc *::before,
  .rc-itc *::after {
    transition-duration: 0.001ms !important;
  }
}

/* Selected text: brand colours, and full-height bands so descenders are not
   cut off by the line below. */
.rc-itc ::selection {
  background: var(--rcc-signal);
  color: #fff;
}
.rc-itc .rc-h2--stamp ::selection,
.rc-itc .rc-h2--stamp::selection {
  background: var(--rcc-ink);
  color: #fff;
}

/* "We can help you:" introduces the list, so it sits directly above it. */
.rc-itc .rc-cue--list {
  margin-top: clamp(40px, 5vw, 72px);
}
.rc-itc .rc-cue--list + .rc-reel-track {
  margin-top: clamp(18px, 2vw, 26px);
}

/* "We can help you evaluate:" heads the orbit column; the ring sits below it. */
.rc-itc .rc-orbit__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.rc-itc .rc-orbit__cue {
  align-self: center;
  margin: 0 0 clamp(18px, 2.4vw, 34px);
}
@media (min-width: 992px) {
  .rc-itc .rc-orbit__layout {
    align-items: start;
  }
  .rc-itc .rc-orbit__side {
    padding-top: clamp(8px, 2vw, 30px);
  }
}
@media (max-width: 991.98px) {
  .rc-itc .rc-orbit__side {
    align-items: stretch;
  }
  .rc-itc .rc-orbit__cue {
    align-self: flex-start;
  }
}

/* Mobile: tighter gap between the hero's button and the next section. */
@media (max-width: 767.98px) {
  .rc-itc .rc-hero {
    padding-bottom: 44px;
  }
  .rc-itc #rc-advice {
    padding-top: 36px;
  }
}

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