/* ============================================================
   Case Studies detail page — /case-studies/{slug}
   Figma: "Case study" frame (Transwayz TMS layout).
   BEM-ish `csn-` prefix, scoped to `.csn-page` so nothing here
   can leak into the original /case-study/{slug} template.
   ============================================================ */

.csn-page {
  --csn-blue: #0066ff;
  --csn-blue-soft: #eff6ff;
  --csn-navy: #0a1b3d;
  --csn-heading: #111827;
  --csn-body: #4b5563;
  --csn-muted: #6b7280;
  --csn-faint: #9ca3af;
  --csn-line: #f3f4f6;
  --csn-border: #e7e9f2;
  --csn-surface: #f4f7fe;

  --csn-red-bg: #fdeeee;
  --csn-red-line: #f6d7d7;
  --csn-red-dot: #dc2626;
  --csn-red-title: #b91c1c;
  --csn-red-body: #3f475e;

  --csn-green: #16a34a;
  --csn-green-bg: #e9f9ef;
  --csn-green-line: #cdeeda;

  --csn-radius-sm: 8px;
  --csn-radius: 12px;
  --csn-radius-lg: 16px;
  --csn-radius-xl: 24px;

  --csn-shadow-card: 0 1px 2px rgba(16, 21, 39, 0.05);
  --csn-shadow-soft:
    0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  --csn-shadow-panel: 0 21px 50px rgba(16, 21, 39, 0.1);

  --csn-arrow: url("../images/case-studies/cta-arrow.svg");

  font-family:
    "Poppins",
    "Nunito",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  color: var(--csn-body);
  background: #fff;
  overflow-x: hidden;
}

/* The global stylesheet is aggressive with generic tags; re-baseline inside
   the page so headings/paragraphs inherit this design's rhythm instead.
   :where() keeps this at zero specificity, so a component setting its own
   margin-top wins without needing to out-specify the reset — the earlier
   `.csn-page p` form silently beat every `.csn-*__text { margin-top }`. */
.csn-page :where(h1, h2, h3, h4, p, ul) {
  margin: 0;
  padding: 0;
}

.csn-page ul {
  list-style: none;
}

.csn-page img {
  max-width: 100%;
}

.csn-container {
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  padding: 0 24px;
}

.csn-section {
  padding: 96px 0;
}

.csn-section--tint {
  background: var(--csn-surface);
}

.csn-section--line {
  border-top: 1px solid var(--csn-line);
  border-bottom: 1px solid var(--csn-line);
}

/* ---------- shared section heading ---------- */

.csn-eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--csn-blue);
}

.csn-head {
  margin-bottom: 64px;
}

.csn-head--center {
  text-align: center;
}

/* Same guard as the hero title — .csn-word spans are the reveal wrapper, not a
   highlight. Words nested inside a real highlight still inherit its colour. */
.csn-head__title span:not(.csn-word) {
  color: var(--csn-blue);
}

.csn-head__title {
  margin-top: 8px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--csn-navy);
}

.csn-head__lead {
  margin-top: 16px;
  max-width: 720px;
  font-size: 16px;
  line-height: 26px;
  color: var(--csn-body);
}

.csn-head--center .csn-head__lead {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   1. Hero
   ============================================================ */

.csn-hero {
  position: relative;
  padding: 64px 0 96px;
  background:
    radial-gradient(
      366px 70px at 100% 0,
      rgba(0, 102, 255, 0.05),
      rgba(0, 102, 255, 0) 70%
    ),
    #fff;
  overflow: hidden;
}

.csn-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.csn-hero__title {
  margin-top: 20px;
  font-size: 50px;
  line-height: 60px;
  font-weight: 700;
  color: var(--csn-heading);
}

/* The CMS title often ships with its own <span>/<strong> highlight — tint it
   blue so the two-tone headline from the design survives arbitrary copy. The
   :not() guard matters: the reveal script wraps every word in a span, and
   without it the whole heading would turn blue. */
.csn-hero__title span:not(.csn-word),
.csn-hero__title strong,
.csn-hero__title b {
  color: var(--csn-blue);
  font-weight: 700;
}

.csn-hero__lead {
  margin-top: 20px;
  max-width: 592px;
  font-size: 18px;
  line-height: 29px;
  color: var(--csn-muted);
}

.csn-hero__lead p {
  margin-bottom: 12px;
}

.csn-hero__lead p:last-child {
  margin-bottom: 0;
}

.csn-hero__media {
  position: relative;
}

.csn-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--csn-radius-lg);
}

/* ---------- hero meta cards ----------
   Four tinted cards, each with an icon tile, label/value stack, a small arrow
   chip in the corner and a faint dot-grid watermark. The Figma source for this
   row is a flattened raster, so the colour ramp is reproduced by hand and
   applied per card via the --csn-c / --csn-t custom properties. */

.csn-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
}

.csn-meta__item {
  --csn-c: var(--csn-blue);
  --csn-t: #eef3ff;

  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eef1f7;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.csn-meta__item--2 {
  --csn-c: #7c5cff;
  --csn-t: #f3efff;
}

.csn-meta__item--3 {
  --csn-c: #16a394;
  --csn-t: #e7f6f3;
}

.csn-meta__item--4 {
  --csn-c: #f59e0b;
  --csn-t: #fff4e5;
}

/* Dot-grid watermark in the top-right corner of each card. */
.csn-meta__item::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 62px;
  height: 44px;
  background-image: radial-gradient(var(--csn-c) 1.1px, transparent 1.1px);
  background-size: 9px 9px;
  opacity: 0.18;
  pointer-events: none;
}

.csn-meta__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csn-t);
  border-radius: 12px;
}

/* The exported SVGs carry a baked-in fill, so they are used as masks and
   recoloured to the card's accent instead of being recoloured in the file. */
.csn-meta__glyph {
  width: 24px;
  height: 24px;
  background: var(--csn-c);
  -webkit-mask: var(--csn-icon) center / contain no-repeat;
  mask: var(--csn-icon) center / contain no-repeat;
}

.csn-meta__body {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-right: 26px;
}

.csn-meta__label {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #9aa3b2;
}

.csn-meta__value {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--csn-navy);
  word-break: break-word;
}

.csn-meta__go {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csn-t);
  border-radius: 50%;
}

.csn-meta__go span {
  width: 14px;
  height: 14px;
  background: var(--csn-c);
  -webkit-mask: var(--csn-arrow) center / contain no-repeat;
  mask: var(--csn-arrow) center / contain no-repeat;
}

/* ============================================================
   2. Showcase slider
   ============================================================ */

/* Continuous loop marquee. The viewport clips, the track is translated by JS,
   and the slide set is cloned so the wrap is seamless. Vertical padding keeps
   the card shadows from being clipped by that overflow. */
.csn-show {
  position: relative;
  margin: 0 -12px;
  padding: 12px;
  overflow: hidden;
  cursor: grab;
}

.csn-show.is-dragging {
  cursor: grabbing;
}

.csn-show__track {
  display: flex;
  gap: 24px;
  will-change: transform;
}

.csn-show__card {
  --csn-c: var(--csn-blue);
  --csn-t: #eef4ff;

  position: relative;
  flex: 0 0 calc((100% - 48px) / 3);
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: #fff;
  border-radius: 20px;
  /* Two layers: a tight contact shadow plus a wide diffuse one. A single large
     blur reads as a hard band against the tinted section background. */
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 10px 30px rgba(16, 24, 40, 0.06);
}

/* Colour ramp across the row, matching the mock's blue / green / purple. */
.csn-show__card:nth-child(3n + 2) {
  --csn-c: #16a34a;
  --csn-t: #e8f7ee;
}

.csn-show__card:nth-child(3n + 3) {
  --csn-c: #7c5cff;
  --csn-t: #f2eeff;
}

/* The mock insets the screenshot inside the card rather than bleeding it to
   the edge, so it keeps its own rounded corners. */
.csn-show__media {
  aspect-ratio: 352 / 248;
  border-radius: 12px;
  overflow: hidden;
  background: var(--csn-surface);
}

.csn-show__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.csn-show__body {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 10px 34px;
}

/* Dot-grid watermark in the bottom-left corner, as in the mock. */
.csn-show__body::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 8px;
  width: 58px;
  height: 26px;
  background-image: radial-gradient(var(--csn-c) 1.1px, transparent 1.1px);
  background-size: 9px 9px;
  opacity: 0.22;
  pointer-events: none;
}

.csn-show__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csn-t);
  border-radius: 12px;
}

.csn-show__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.csn-show__text {
  min-width: 0;
}

.csn-show__title {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--csn-navy);
}

.csn-show__desc {
  margin-top: 6px;
  font-size: 14px;
  line-height: 22px;
  color: var(--csn-muted);
}

.csn-show__go {
  position: absolute;
  right: 10px;
  bottom: 16px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csn-t);
  border-radius: 50%;
}

.csn-show__go img {
  filter: none;
}

.csn-show__go img {
  width: 16px;
  height: 16px;
}



/* ============================================================
   3. Benefits
   ============================================================ */

.csn-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.csn-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 25px;
  background: #fff;
  border: 1px solid var(--csn-line);
  border-radius: var(--csn-radius-lg);
  box-shadow: var(--csn-shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.csn-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csn-blue-soft);
  border-radius: var(--csn-radius-sm);
}

.csn-card__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.csn-card__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--csn-navy);
}

.csn-card__text {
  font-size: 14px;
  line-height: 22px;
  color: var(--csn-body);
}

/* ============================================================
   4. Challenges
   ============================================================ */

/* ---------- tab switcher ---------- */

.csn-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.csn-tabs__bar {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--csn-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(16, 21, 39, 0.06);
}

.csn-tabs__btn {
  min-width: 240px;
  padding: 14px 28px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #101527;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.csn-tabs__btn:hover {
  color: var(--csn-blue);
}

.csn-tabs__btn.is-active {
  color: #fff;
  background: var(--csn-blue);
}

.csn-tabs__panel[hidden] {
  display: none;
}

.csn-panel {
  padding: 32px;
  background: #fff;
  border: 1px solid var(--csn-border);
  border-radius: 18px;
  box-shadow: var(--csn-shadow-panel);
}

.csn-panel__title {
  margin-bottom: 32px;
  font-size: 26px;
  line-height: 38px;
  font-weight: 600;
  text-align: center;
  color: #101527;
  letter-spacing: -0.33px;
}

.csn-problems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 26px;
}

/* Tone is set per tab in the CMS; the card reads it from these three custom
   properties so a new tone is one rule rather than a new set of selectors. */
.csn-problem {
  --csn-tone-bg: var(--csn-red-bg);
  --csn-tone-line: var(--csn-red-line);
  --csn-tone-dot: var(--csn-red-dot);
  --csn-tone-title: var(--csn-red-title);

  display: flex;
  gap: 10px;
  padding: 15px 16px;
  background: var(--csn-tone-bg);
  border: 1px solid var(--csn-tone-line);
  border-radius: 12px;
}

.csn-problem--warning {
  --csn-tone-bg: #fff8e6;
  --csn-tone-line: #f7e4ae;
  --csn-tone-dot: #d97706;
  --csn-tone-title: #b45309;
}

.csn-problem--good {
  --csn-tone-bg: var(--csn-green-bg);
  --csn-tone-line: var(--csn-green-line);
  --csn-tone-dot: var(--csn-green);
  --csn-tone-title: #15803d;
}

.csn-problem--neutral {
  --csn-tone-bg: #f4f6fa;
  --csn-tone-line: #e2e7f0;
  --csn-tone-dot: #64748b;
  --csn-tone-title: #334155;
}

.csn-problem__dot {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csn-tone-dot);
  border-radius: 50%;
}

.csn-problem__dot img {
  width: 3px;
  height: 11px;
}

.csn-problem__title {
  font-size: 13px;
  line-height: 17px;
  font-weight: 700;
  color: var(--csn-tone-title);
}

.csn-problem__text {
  margin-top: 8px;
  font-size: 12px;
  line-height: 22px;
  color: var(--csn-red-body);
}

.csn-problem--good .csn-problem__dot img {
  width: 10px;
  height: 10px;
}

/* ============================================================
   5. Workflow / process — vertical zig-zag timeline
   ============================================================ */

.csn-wf {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  /* Geometry measured off the Figma render (854px wide) and scaled by 920/854.
     Row 189 + gap 87 = 276px between circle centres. The connector path in
     case_studies_detail.blade.php is generated from the same numbers — change one
     and the curve stops meeting the circles. */
  gap: 87px;
}

.csn-wf__row {
  position: relative;
  z-index: 1;
  height: 189px;
  display: grid;
  /* inset | card | circle | card | inset */
  grid-template-columns: 108px minmax(0, 1fr) 172px minmax(0, 1fr) 108px;
  align-items: center;
}

/* Colour ramp cycles across the steps exactly as in the design. Rows, and the
   dots on the shared connector, are tagged by the template rather than derived
   with :nth-child. */
.csn-c1 {
  --csn-c: #2f6bff;
  --csn-t: #eaf1ff;
}

.csn-c2 {
  --csn-c: #22c55e;
  --csn-t: #e8f9ee;
}

.csn-c3 {
  --csn-c: #a855f7;
  --csn-t: #f5ecfe;
}

.csn-c4 {
  --csn-c: #f97316;
  --csn-t: #fff0e4;
}

.csn-c5 {
  --csn-c: #06b6d4;
  --csn-t: #e3f8fc;
}

.csn-c6 {
  --csn-c: #16a34a;
  --csn-t: #e7f7ec;
}

/* Circle stack: tinted ring, white disc, icon, number badge straddling the
   ring's top edge. */
.csn-wf__mark {
  position: relative;
  z-index: 2;
  grid-row: 1;
  grid-column: 3;
  justify-self: center;
  width: 172px;
  height: 172px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csn-t);
  border-radius: 50%;
}

.csn-wf__disc {
  width: 136px;
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
}

.csn-wf__disc img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.csn-wf__num {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--csn-c);
  border-radius: 50%;
}

.csn-wf__card {
  position: relative;
  z-index: 1;
  /* Centred in the fixed-height row, held at the row's height by min-height.
     align-self cannot be transitioned, so the card stays centred and the growth
     is driven by the text's animated max-height below — that keeps the whole
     expansion smooth in both directions. */
  align-self: center;
  min-height: 189px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.07);
  transition:
    margin 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.45s ease;
}

/* Odd steps sit left of the circle, even steps right. The card's inner edge
   stops exactly on the circle's centre line, so the circle overlaps its
   outer half — the extra padding keeps the copy clear of the ring. */
.csn-wf__row--left .csn-wf__card {
  grid-row: 1;
  grid-column: 2;
  margin-right: -86px;
  padding-right: 140px;
}

.csn-wf__row--right .csn-wf__card {
  grid-row: 1;
  grid-column: 4;
  margin-left: -86px;
  padding-left: 140px;
}

.csn-wf__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--csn-navy);
}

/* The mock gives every step a three-line blurb, which is what keeps the rows
   uniform and lets the connector meet each circle at a fixed point. CMS copy is
   longer, so it is clamped to three lines — and expands on hover so the whole
   thing is readable without disturbing the timeline geometry. */
.csn-wf__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: 72px;
  margin-top: 8px;
  overflow: hidden;
  font-size: 14px;
  line-height: 24px;
  color: var(--csn-muted);
  /* No delay on the way out, so the card collapses as one movement. */
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

/* Hovering lifts the whole row above its neighbours so the card can overlap
   them, and widens the card outwards — away from the circle, into the gutter
   between the timeline and the container edge. Growing outwards keeps the
   inner edge pinned on the circle's centre line, so the connector geometry is
   untouched. */
.csn-wf__row:hover,
.csn-wf__row:focus-within {
  z-index: 5;
}

/* Grow outwards, but stop short of the navbar container so the card never
   reaches the page edge or crowds the connector. 30vw is the tuned figure;
   min() with the container gutter means the card always clears the timeline
   box by at least 132px, and never grows inwards on narrow screens. */
.csn-wf__row--left:hover .csn-wf__card,
.csn-wf__row--left:focus-within .csn-wf__card {
  margin-left: min(-132px, calc(352px - 30vw));
}

.csn-wf__row--right:hover .csn-wf__card,
.csn-wf__row--right:focus-within .csn-wf__card {
  margin-right: min(-132px, calc(352px - 30vw));
}

/* Width alone cannot fit the longest CMS descriptions, so once the card has
   grown as wide as it is allowed to, the clamp is released and it takes the
   little extra height it still needs.
   ------------------------------------------------------------------------ */
/* Releasing the clamp is instantaneous, so if the height grew straight away the
   card would spike tall while still narrow and then settle back down. Holding
   the height until the width has nearly finished keeps the growth monotonic. */
.csn-wf__row:hover .csn-wf__text,
.csn-wf__row:focus-within .csn-wf__text {
  -webkit-line-clamp: 40;
  max-height: 640px;
  transition-delay: 0.16s;
}

.csn-wf__row:hover .csn-wf__card,
.csn-wf__row:focus-within .csn-wf__card {
  box-shadow: 0 22px 54px rgba(16, 24, 40, 0.14);
}

/* One continuous dashed snake behind the whole timeline, weaving past each
   circle on the side opposite its card. Path and dots are generated in the
   template from the row pitch above. */
.csn-wf__trail {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* The lead-in arc starts above the first row box, so the path must be allowed
     to paint outside the viewBox. */
  overflow: visible;
  pointer-events: none;
}

.csn-wf__trail path {
  fill: none;
  stroke: #cfd6e4;
  stroke-width: 2;
  stroke-dasharray: 6 9;
  stroke-linecap: round;
}

.csn-wf__trail circle {
  fill: var(--csn-c);
}

/* ============================================================
   6. Goals / outcomes
   ============================================================ */

.csn-goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.csn-goal {
  display: flex;
  gap: 12px;
  padding: 20px 22px;
  background: var(--csn-green-bg);
  border: 1px solid var(--csn-green-line);
  border-radius: var(--csn-radius);
}

.csn-goal__check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csn-green);
  border-radius: 50%;
}

.csn-goal__check img {
  width: 10px;
  height: 10px;
}

.csn-goal__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--csn-navy);
}

.csn-goal__text {
  margin-top: 6px;
  font-size: 13px;
  line-height: 22px;
  color: var(--csn-body);
}

/* ============================================================
   7. Tech stack
   ============================================================ */

/* Same continuous loop as the showcase — see .csn-show above. */
.csn-techwrap {
  position: relative;
  margin: 0 -12px;
  padding: 12px;
  overflow: hidden;
  cursor: grab;
}

.csn-techwrap.is-dragging {
  cursor: grabbing;
}

.csn-tech {
  display: flex;
  gap: 24px;
  will-change: transform;
}

.csn-tech__card {
  /* Overridden inline with the colour sampled from the uploaded logo; these
     are the fallback for logos too greyscale to sample. */
  --csn-c: #2f6bff;
  --csn-t: #e8f1ff;

  position: relative;
  flex: 0 0 278px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 24px 34px;
  background: #fff;
  border-radius: 20px;
  /* Two layers: a tight contact shadow plus a wide diffuse one. A single large
     blur reads as a hard band against the tinted section background. */
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 10px 30px rgba(16, 24, 40, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.csn-tech__card:nth-child(4n + 2) {
  --csn-c: #22c55e;
  --csn-t: #e9f9ee;
}

.csn-tech__card:nth-child(4n + 3) {
  --csn-c: #16a34a;
  --csn-t: #eaf7ec;
}

.csn-tech__card:nth-child(4n + 4) {
  --csn-c: #f59e0b;
  --csn-t: #fdf1de;
}

.csn-tech__badge {
  width: 132px;
  height: 132px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #fff 0%, var(--csn-t) 62%);
  border-radius: 50%;
}

/* When a logo colour has been sampled it drives both the halo and the rule,
   so each card picks up its own brand tint. */
.csn-tech__card[style*="--csn-c"] .csn-tech__badge {
  background: radial-gradient(circle at 50% 40%, #fff 0%, color-mix(in srgb, var(--csn-c) 18%, #fff) 62%);
}

.csn-tech__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

.csn-tech__name {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--csn-navy);
  text-align: center;
}

.csn-tech__desc {
  margin-top: 6px;
  font-size: 14px;
  line-height: 22px;
  color: var(--csn-muted);
  text-align: center;
}

/* Accent rule pinned to the bottom edge of the card. */
.csn-tech__card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 72px;
  height: 4px;
  background: var(--csn-c);
  border-radius: 4px 4px 0 0;
}

.csn-tech__note {
  max-width: 720px;
  margin: 0 auto 48px;
  font-size: 16px;
  line-height: 28px;
  color: var(--csn-muted);
  text-align: center;
}

/* ============================================================
   8. Testimonial
   ============================================================ */

.csn-quote {
  position: relative;
  padding: 96px 80px;
  background: var(--csn-navy);
  border-radius: var(--csn-radius-xl);
  overflow: hidden;
}

.csn-quote::after {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background: linear-gradient(
    to left,
    rgba(0, 102, 255, 0.22),
    rgba(0, 102, 255, 0)
  );
  pointer-events: none;
}

.csn-quote__inner {
  position: relative;
  z-index: 1;
  max-width: 672px;
}

.csn-quote__mark {
  width: 48px;
  height: 48px;
  margin-bottom: 32px;
}

.csn-quote__text {
  font-size: 30px;
  line-height: 42px;
  color: #fff;
}

.csn-quote__by {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.csn-quote__avatar {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: #6b7280;
  border: 2px solid var(--csn-blue);
  border-radius: 50%;
}

.csn-quote__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* With a section photo the block becomes two columns; the copy keeps its
   max-width and the image fills the rest, bleeding to the panel's edge. */
/* Figma: the photo is 522/1200 of the block's width and runs nearly its full
   height, inset 15px from the panel edge. */
.csn-quote--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44%;
  gap: 40px;
  align-items: stretch;
  padding: 15px;
}

.csn-quote--split .csn-quote__inner {
  max-width: none;
  align-self: center;
  padding: 33px 0 33px 65px;
}

.csn-quote--split::after {
  inset: 0 0 0 40%;
}

.csn-quote__media {
  position: relative;
  z-index: 1;
  align-self: stretch;
  border-radius: 18px;
  overflow: hidden;
}

.csn-quote__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csn-quote__stars {
  display: flex;
  gap: 2px;
}

.csn-quote__stars img {
  width: 16px;
  height: 16px;
}

.csn-quote__name {
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
}

.csn-quote__role {
  font-size: 12px;
  line-height: 16px;
  color: #93c5fd;
}

/* ============================================================
   9. Footer CTA
   ============================================================ */

.csn-cta {
  position: relative;
  padding: 74px 24px 80px;
  background: #e9f9fa;
  text-align: center;
  overflow: hidden;
}

.csn-cta__blob {
  position: absolute;
  width: 392px;
  height: 392px;
  pointer-events: none;
}

.csn-cta__blob--right {
  top: -100px;
  right: -120px;
}

.csn-cta__blob--left {
  top: 160px;
  left: -230px;
}

.csn-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 614px;
  margin: 0 auto;
}

.csn-cta__title {
  font-family: "Raleway", "Poppins", sans-serif;
  font-size: 38px;
  line-height: 43px;
  font-weight: 600;
  color: #000;
}

.csn-cta__text {
  margin-top: 24px;
  font-family: "Raleway", "Poppins", sans-serif;
  font-size: 17px;
  line-height: 26px;
  color: #2c2c2c;
}

.csn-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 42px;
  padding: 17px 34px;
  font-family: "Raleway", "Poppins", sans-serif;
  font-size: 19px;
  line-height: 30px;
  font-weight: 600;
  color: #fff;
  background: #000;
  border-radius: 13px;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.csn-cta__btn:hover,
.csn-cta__btn:focus {
  color: #fff;
  background: var(--csn-blue);
  transform: translateY(-2px);
}

.csn-cta__btn img {
  width: 21px;
  height: 21px;
}

.csn-meta__item:hover,
.csn-card:hover,
.csn-tech__card:hover,
.csn-gallery__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
}

/* ============================================================
   Scroll reveal — hidden pre-paint under .csn-anim, released when the element
   enters the viewport (.is-inview). Mirrors the dubai/llm pages.
   ============================================================ */

.csn-anim .csn-eyebrow,
.csn-anim .csn-hero__lead,
.csn-anim .csn-hero__media,
.csn-anim .csn-meta__item,
.csn-anim .csn-head__lead,
.csn-anim .csn-quote__media,
.csn-anim .csn-card,
.csn-anim .csn-tabs__bar,
.csn-anim .csn-problem,
.csn-anim .csn-wf__card,
.csn-anim .csn-tech__note,
.csn-anim .csn-quote__mark,
.csn-anim .csn-quote__text,
.csn-anim .csn-quote__by,
.csn-anim .csn-cta__text,
.csn-anim .csn-cta__btn {
  opacity: 0;
  transform: translateY(24px);
}

/* The circles scale rather than travel: the connector behind them is a static
   path, so a translate would visibly desync the two mid-animation. */
.csn-anim .csn-wf__mark {
  opacity: 0;
  transform: scale(0.92);
}

.csn-anim .csn-wf__trail {
  opacity: 0;
}

.csn-anim .is-inview {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.csn-anim .csn-wf__trail.is-inview {
  transition: opacity 0.9s ease 0.2s;
}

/* .csn-anim .is-inview is more specific than .csn-wf__card, so it replaces the
   card's own transition list once revealed — which silently killed the hover
   animation. Re-state both here. */
.csn-anim .csn-wf__card.is-inview {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    margin 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.45s ease;
}

/* Titles reveal word by word, left to right. */
.csn-anim .csn-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
}

.csn-anim .is-inview .csn-word,
.csn-anim .csn-word.is-inview {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease var(--csn-wd, 0ms),
    transform 0.5s ease var(--csn-wd, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .csn-page *,
  .csn-anim .csn-page * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .csn-anim .csn-page [class] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1199.98px) {
  .csn-hero__title {
    font-size: 42px;
    line-height: 52px;
  }

  .csn-quote {
    padding: 72px 48px;
  }

  .csn-quote__text {
    font-size: 26px;
    line-height: 38px;
  }
}

@media (max-width: 991.98px) {
  .csn-section {
    padding: 72px 0;
  }

  .csn-hero {
    padding: 48px 0 72px;
  }

  .csn-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .csn-hero__title {
    font-size: 36px;
    line-height: 46px;
  }

  .csn-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 48px;
  }

  .csn-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .csn-show__card {
    flex-basis: calc((100% - 24px) / 2);
  }

  .csn-quote--split {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .csn-quote--split::after {
    inset: 0;
  }

  .csn-quote__media {
    margin: 0 16px 16px;
  }

  .csn-quote__media img {
    min-height: 260px;
  }

  .csn-head {
    margin-bottom: 48px;
  }

  /* Timeline collapses to a single centred column: circle above card, no
     zig-zag and no connector (it only reads at desktop width). The explicit
     grid-row/grid-column pinning from the desktop rules has to be undone or
     the circle and the card land in the same cell. */
  .csn-wf {
    gap: 28px;
  }

  .csn-wf__trail {
    display: none;
  }

  .csn-wf__row,
  .csn-wf__row--left,
  .csn-wf__row--right {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .csn-wf__mark {
    order: -1;
    grid-row: auto;
    grid-column: 1;
    width: 132px;
    height: 132px;
    margin-bottom: 18px;
  }

  .csn-wf__disc {
    width: 98px;
    height: 98px;
  }

  .csn-wf__disc img {
    width: 42px;
    height: 42px;
  }

  .csn-wf__row--left .csn-wf__card,
  .csn-wf__row--right .csn-wf__card,
  .csn-wf__row--left:hover .csn-wf__card,
  .csn-wf__row--right:hover .csn-wf__card {
    grid-row: auto;
    grid-column: 1;
    width: 100%;
    margin: 0;
    padding: 22px 20px;
    text-align: center;
  }

  .csn-tabs__btn {
    min-width: 0;
    flex: 1;
    padding: 12px 18px;
    font-size: 15px;
  }

  .csn-cta__title {
    font-size: 32px;
    line-height: 40px;
  }
}

@media (max-width: 767.98px) {
  .csn-section {
    padding: 56px 0;
  }

  .csn-container {
    padding: 0 16px;
  }

  .csn-hero__title {
    font-size: 30px;
    line-height: 40px;
  }

  .csn-hero__lead {
    font-size: 16px;
    line-height: 26px;
  }

  .csn-head__title {
    font-size: 24px;
    line-height: 32px;
  }

  .csn-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .csn-cards,
  .csn-problems,
  .csn-goals {
    grid-template-columns: minmax(0, 1fr);
  }

  .csn-panel {
    padding: 20px 16px;
  }

  .csn-panel__title {
    font-size: 20px;
    line-height: 30px;
  }

  .csn-tabs__bar {
    width: 100%;
  }

  .csn-tech__card {
    flex-basis: 232px;
  }

  .csn-show__card {
    flex-basis: 86%;
  }

  .csn-quote {
    padding: 48px 24px;
    border-radius: var(--csn-radius-lg);
  }

  .csn-quote__text {
    font-size: 20px;
    line-height: 32px;
  }

  .csn-quote__by {
    flex-wrap: wrap;
  }

  .csn-cta {
    padding: 56px 16px;
  }

  .csn-cta__title {
    font-size: 26px;
    line-height: 34px;
  }

  .csn-cta__btn {
    font-size: 16px;
    padding: 14px 24px;
  }
}

@media (max-width: 479.98px) {
  .csn-tabs__bar {
    flex-direction: column;
  }

  .csn-meta__item {
    padding-bottom: 24px;
  }
}