/* Case study detail pages, following the site's case-study layout:
   hero facts and product stage, title + overview, process tiles,
   ticket panels and an up-next banner. Colours come from each project. */

.tcs {
  --tcs-bg: #0b042a;
  --tcs-tile: #0b052c;
  --tcs-panel-h: min(27.135vw, 521px);
  --tcs-radius: 2.08vw;
  position: relative;
  color: #fff;
  overflow: hidden;
}
.tcs *, .tcs *::before, .tcs *::after { box-sizing: border-box; }
.tcs :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.tcs :where(ul, ol) { list-style: none; }
.tcs a { color: inherit; text-decoration: none; }
.tcs :where(h1, h2, h3, .tcs-count, .tcs-stages, .tcs-side, .tcs-facts, .tcs-tile-number, .tcs-next-title) { font-family: Rajdhani, sans-serif; }
.tcs :where(p, li, dd) { font-family: 'Open Sans', sans-serif; }

.tcs-wrap { padding-inline: 1.5rem; }
.tcs-main { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 15vw; margin: 7.5em 0 2.5rem; }

/* Hero */
.tcs-hero-bg {
  position: absolute; inset: 0 0 auto; height: min(118vw, 1400px); z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 42%, color-mix(in srgb, var(--tcs-color) 30%, transparent), transparent 70%),
    radial-gradient(1.4px 1.4px at 50% 50%, rgb(255 255 255 / .16) 99%, transparent) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.tcs-hero { display: flex; flex-direction: column; gap: 9vw; }
.tcs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3vw; }
.tcs-facts div { display: flex; flex-direction: column; gap: 1.5vw; }
.tcs-facts div:nth-child(2) { align-items: center; text-align: center; }
.tcs-facts div:nth-child(3) { align-items: flex-end; text-align: end; }
.tcs-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.tcs-facts dd {
  width: fit-content; max-width: 100%; padding: .35em .7em; border-radius: 3px;
  background: rgb(255 255 255 / .12); font-family: Rajdhani, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; line-height: 1.3; text-transform: uppercase;
}

.tcs-stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'visual visual' 'start end'; gap: 8vw 4vw; }
.tcs-visual {
  grid-area: visual; position: relative; display: grid; place-items: center;
  -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent);
}
.tcs-visual-art { position: absolute; top: 50%; left: 50%; width: 132%; max-width: none; transform: translate(-50%, -54%); opacity: .95; }
.tcs--ticket .tcs-visual-art { top: 34%; width: 100%; }
.tcs-visual-product { position: relative; width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgb(0 0 0 / .55)); }
.tcs-side { display: flex; flex-direction: column; justify-content: space-between; gap: 6vw; font-size: 12px; font-weight: 700; letter-spacing: .03em; line-height: 1.5; text-transform: uppercase; }
.tcs-side-start { grid-area: start; }
.tcs-side-end { grid-area: end; align-items: flex-end; text-align: end; }
.tcs-count { color: var(--tcs-accent); }
.tcs-stages li + li { margin-top: .2em; }
.tcs-discover { border-bottom: 1px solid rgb(255 255 255 / .3); padding-bottom: .2em; transition: border-color .3s, color .3s; }
.tcs-discover:hover, .tcs-discover:focus-visible { color: var(--tcs-accent); border-color: currentColor; }

/* Title and overview */
.tcs-intro-head { display: flex; flex-direction: column; gap: 6vw; }
.tcs-heading h1 { font-size: 10vw; font-weight: 700; line-height: .86; text-transform: uppercase; text-wrap: balance; }
.tcs-tagline { margin-top: .25em; color: var(--tcs-color); font-family: Rajdhani, sans-serif; font-size: 7vw; font-weight: 700; line-height: .95; text-transform: uppercase; text-wrap: balance; }
.tcs-overview { display: flex; flex-direction: column; gap: 1rem; }
.tcs-overview h2 { font-size: 3.5vw; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.tcs-overview p { color: rgb(255 255 255 / .5); font-size: 4vw; line-height: 1.5; }
.tcs-intro-foot { display: flex; flex-direction: column; gap: 6vw; margin-top: 8vw; padding-top: 8vw; border-top: 1px solid rgb(255 255 255 / .1); }
.tcs-statement { color: rgb(255 255 255 / .5); font-size: 4vw; font-weight: 500; line-height: 1.4; }
.tcs-rule { display: none; }
.tcs-scope { display: flex; flex-wrap: wrap; gap: .6rem; align-content: flex-start; }
.tcs-scope li { padding: .55em 1em; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; color: rgb(255 255 255 / .7); font-size: 12px; line-height: 1.3; }

/* Process tiles: framed squares with notches cut from the frame */
.tcs-tiles {
  display: flex; gap: 4vw; margin-inline: -1.5rem; padding: 0 1.5rem 2px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-inline: 1.5rem; scrollbar-width: none;
}
.tcs-tiles::-webkit-scrollbar { display: none; }
.tcs-tiles > .tcs-tile { flex: 0 0 74vw; scroll-snap-align: start; }
.tcs-tile {
  --frame: var(--tcs-color); --bw: clamp(9px, 1.25vw, 18px);
  position: relative; aspect-ratio: 434 / 463; display: flex; flex-direction: column; justify-content: space-between;
  padding: 8vw; border: var(--bw) solid var(--frame); border-radius: clamp(6px, .6vw, 10px); background: var(--tcs-tile);
}
.tcs-tile:nth-child(3n + 2) { --frame: var(--tcs-accent); }
.tcs-tile:nth-child(3n) { --frame: color-mix(in srgb, var(--tcs-color) 55%, var(--tcs-accent)); }
.tcs-tile::before, .tcs-tile::after { content: ''; position: absolute; background: var(--frame); pointer-events: none; }
.tcs-tile > * { position: relative; z-index: 1; }
.tcs-tile-title { justify-content: center; gap: 1.2em; }
.tcs-tile-title h2 { display: flex; flex-direction: column; text-transform: uppercase; line-height: 1; }
.tcs-tile-title h2 span { font-size: 6vw; font-weight: 300; }
.tcs-tile-title h2 strong { font-size: 8.5vw; font-weight: 700; }
.tcs-tile-title p { color: rgb(255 255 255 / .6); font-size: 3.6vw; line-height: 1.45; }
.tcs-tile-number { font-size: 6vw; font-weight: 700; line-height: 1; }
.tcs-tile h3 { font-size: 6vw; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.tcs-tile p { margin-top: .6em; max-width: 26ch; color: rgb(255 255 255 / .7); font-size: 3.6vw; line-height: 1.45; }
/* Notch shapes vary per tile */
.tcs-tile-title::before { top: 0; inset-inline-start: 18%; width: 34%; height: 17%; clip-path: polygon(0 0, 100% 0, 78% 100%, 50% 28%, 22% 100%); }
.tcs-tile-title::after { bottom: 0; inset-inline-start: 38%; width: 14%; height: 15%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tcs-tile:nth-child(2)::before { top: 42%; inset-inline-end: 0; width: 20%; height: 20%; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.tcs-tile:nth-child(3)::before { top: 0; inset-inline-end: 42%; width: 14%; height: 15%; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tcs-tile:nth-child(3)::after { top: 42%; inset-inline-end: 0; width: 17%; height: 17%; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.tcs-tile:nth-child(4)::before { bottom: 0; inset-inline-end: 0; width: 46%; height: 44%; clip-path: polygon(100% 0, 100% 100%, 0 100%, 18% 72%, 0 48%, 46% 52%); }
.tcs-tile:nth-child(5)::before { top: 0; inset-inline-start: 43%; width: 14%; height: 15%; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tcs-tile:nth-child(6)::before { top: 0; inset-inline-end: 20%; width: 14%; height: 15%; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tcs-tile:nth-child(6)::after { bottom: 0; inset-inline-start: 18%; width: 14%; height: 15%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[dir='rtl'] .tcs-tile:nth-child(2)::before,
[dir='rtl'] .tcs-tile:nth-child(3)::after { transform: scaleX(-1); }
[dir='rtl'] .tcs-tile:nth-child(4)::before { transform: scaleX(-1); }

/* Ticket panels: body and stub joined by a perforation */
.tcs-ticket { display: flex; flex-direction: column; }
.tcs-ticket-body {
  display: flex; flex-direction: column; justify-content: center; padding: 8vw;
  border-radius: 6vw; background: var(--tcs-color); color: #fff;
}
.tcs-ticket-body h2 {
  margin-bottom: 4vw; padding-bottom: 4vw; border-bottom: 1px solid rgb(255 255 255 / .2);
  font-size: 9vw; font-weight: 400; letter-spacing: .02em; line-height: .9; text-transform: uppercase;
}
.tcs-ticket-body h3 { margin-bottom: 3vw; font-size: 5vw; font-weight: 700; line-height: 1.2; text-transform: none; }
.tcs-bullets { display: grid; gap: .5em; font-size: 4vw; font-weight: 500; line-height: 1.4; }
.tcs-bullets li { display: flex; gap: .7em; }
.tcs-bullets li::before { content: ''; flex: none; width: .38em; height: .38em; margin-top: .55em; border-radius: 50%; background: #fff; }
.tcs-results { display: grid; gap: .55em; font-size: 4.5vw; font-weight: 600; line-height: 1.35; }
.tcs-results li { display: flex; gap: .8em; }
.tcs-results span { flex: none; color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-weight: 700; }
.tcs-stub {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6vw;
  height: 42vw; overflow: hidden; border-radius: 6vw; background: var(--tcs-color);
  border-top: 2px dashed rgb(255 255 255 / .55);
}
.tcs-stub-art { width: 62%; height: auto; filter: brightness(0) invert(1); }
.tcs-barcode {
  flex: none; width: 16%; height: 46%;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px, #fff 5px 9px, transparent 9px 11px, #fff 11px 12px, transparent 12px 16px);
}
.tcs-ticket-dark { flex-direction: column-reverse; }
.tcs-ticket-dark .tcs-ticket-body, .tcs-ticket-dark .tcs-stub { background: #000; }
.tcs-ticket-dark .tcs-stub { border-top: 0; border-bottom: 2px dashed rgb(255 255 255 / .4); }
.tcs-ticket-dark .tcs-stub-art { filter: none; }

/* Up next */
.tcs-next { display: block; margin-bottom: 4vw; }
.tcs-next-frame { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 60vw; }
.tcs-next-art { width: 100%; height: auto; opacity: .22; transition: opacity .5s, transform .8s cubic-bezier(.2, .7, .2, 1); }
.tcs-next-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; text-align: center; }
.tcs-next-label { color: rgb(255 255 255 / .6); font-family: Rajdhani, sans-serif; font-size: 4vw; font-weight: 500; }
.tcs-next-title { font-size: 6vw; font-weight: 500; line-height: 1; text-transform: uppercase; }
.tcs-next:hover .tcs-next-art, .tcs-next:focus-visible .tcs-next-art { opacity: .5; transform: scale(1.03); }
.tcs-next:focus-visible { outline: 1px solid var(--tcs-accent); outline-offset: 8px; }

@media (min-width: 640px) {
  .tcs-wrap { padding-inline: 13vw; }
  .tcs-main { gap: 8vw; margin-top: 10em; }
  .tcs-hero { gap: 5vw; }
  .tcs-facts div { gap: .45vw; }
  .tcs-facts dt, .tcs-facts dd { font-size: clamp(10px, .69vw, 13px); }
  .tcs-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 4.6fr) minmax(0, 1fr); grid-template-areas: 'start visual end'; gap: 2vw; }
  .tcs-side { justify-content: center; gap: 13vw; padding-block: 4vw 2vw; font-size: clamp(10px, .69vw, 13px); }
  .tcs-visual { padding-block: 5vw 2vw; }
  .tcs-visual-art { width: 112%; }
  .tcs--ticket .tcs-visual-art { top: 24%; width: 92%; }
  .tcs-intro-head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 6vw; }
  .tcs-heading { flex: 0 1 42%; }
  .tcs-heading h1 { font-size: 4vw; }
  .tcs-tagline { font-size: 2.6vw; }
  .tcs-overview { flex: 0 1 50%; padding-top: .4vw; }
  .tcs-overview h2 { font-size: clamp(14px, 1.042vw, 20px); }
  .tcs-overview p { font-size: clamp(14px, 1.2vw, 22px); line-height: 1.45; }
  .tcs-intro-foot { flex-direction: row; gap: 4vw; margin-top: 4vw; padding-top: 4vw; }
  .tcs-statement { flex: 1; font-size: clamp(15px, 1.25vw, 24px); }
  .tcs-rule { display: block; flex: none; width: 1px; background: rgb(255 255 255 / .15); }
  .tcs-scope { flex: 1; }
  .tcs-scope li { font-size: clamp(11px, .83vw, 15px); }
  .tcs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4vw; margin-inline: 0; padding: 0; overflow: visible; }
  .tcs-tile { padding: 3vw 3vw 3.4vw; }
  .tcs-tile-title h2 span { font-size: 3vw; }
  .tcs-tile-title h2 strong { font-size: 5vw; }
  .tcs-tile-title p, .tcs-tile p { font-size: clamp(12px, 1.5vw, 17px); }
  .tcs-tile-number { font-size: 4vw; }
  .tcs-tile h3 { font-size: 3.4vw; }
  .tcs-ticket, .tcs-ticket-dark { flex-direction: row; }
  .tcs-ticket-body { flex: 985 1 0; min-width: 0; min-height: var(--tcs-panel-h); padding: 4.5vw; border-radius: var(--tcs-radius); }
  .tcs-ticket-body h2 { margin-bottom: 2.2vw; padding-bottom: 2.2vw; font-size: 4.583vw; white-space: nowrap; }
  .tcs-ticket-body h3 { margin-bottom: 1.4vw; font-size: clamp(16px, 1.3vw, 25px); }
  .tcs-ticket-body h3 br { display: none; }
  .tcs-bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em 2.5vw; font-size: clamp(13px, 1.05vw, 20px); }
  .tcs-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9em 2.5vw; font-size: clamp(14px, 1.25vw, 24px); }
  .tcs-stub {
    flex: 415 1 0; height: auto; min-height: var(--tcs-panel-h); gap: 2.4vw; border-radius: var(--tcs-radius);
    border-top: 0; border-inline-start: 2px dashed rgb(255 255 255 / .55);
  }
  .tcs-stub-art { width: calc(var(--tcs-panel-h) * .74); max-width: none; flex: none; margin-inline: calc(var(--tcs-panel-h) * -.27); transform: rotate(-90deg); }
  .tcs-barcode {
    width: 22%; height: 72%;
    background: repeating-linear-gradient(180deg, #fff 0 2px, transparent 2px 5px, #fff 5px 9px, transparent 9px 11px, #fff 11px 12px, transparent 12px 16px);
  }
  .tcs-ticket-dark .tcs-stub { border-bottom: 0; border-inline-start: 0; border-inline-end: 2px dashed rgb(255 255 255 / .4); }
  .tcs-next-frame { min-height: 10rem; }
  .tcs-next-art { width: 82%; }
  .tcs-next-label { font-size: clamp(16px, 1.6vw, 24px); }
  .tcs-next-title { font-size: clamp(32px, 4.4vw, 64px); }
}

/* Supplied case-study descriptions stay compact until a card is hovered or focused. */
.tcs-detail-card { cursor: default; }
.tcs-detail-card:focus-visible { outline: 2px solid var(--tcs-accent); outline-offset: 5px; }
.tcs-detail-copy {
  color: rgb(255 255 255 / .78);
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .tcs-detail-card .tcs-detail-copy {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: max-height .3s ease, opacity .25s ease, transform .25s ease;
  }
  .tcs-detail-card:hover .tcs-detail-copy,
  .tcs-detail-card:focus-visible .tcs-detail-copy {
    max-height: 3em;
    opacity: 1;
    transform: translateY(0);
  }
  .tcs-detail-copy { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

.tcs-grid-list .tcs-detail-card .tcs-detail-copy {
  padding-inline-end: 2.4rem;
  font-size: clamp(12px, .85vw, 14px);
}
.tcs-check-list .tcs-detail-card .tcs-detail-copy { grid-column: 2 / -1; }
.tcs-profiles-grid .tcs-detail-card .tcs-detail-copy,
.tcs-quote-list .tcs-detail-card .tcs-detail-copy { max-width: 38ch; }
.tcs-quote-list .tcs-detail-card h3 {
  font-family: Rajdhani, sans-serif;
  font-size: 5.6vw;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.tcs-lines-list .tcs-detail-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.tcs-lines-list .tcs-detail-card .tcs-detail-copy { grid-column: 2 / 3; }
.tcs-ach-grid .tcs-detail-card .tcs-detail-copy { max-width: 42ch; }

@media (hover: none), (pointer: coarse) {
  .tcs-detail-card .tcs-detail-copy {
    display: block;
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    -webkit-line-clamp: 3;
  }
  .tcs-check-list .tcs-detail-card .tcs-detail-copy { grid-column: 2 / -1; }
}

@media (min-width: 640px) {
  .tcs-quote-list .tcs-detail-card h3 { font-size: clamp(18px, 1.45vw, 26px); }
}

@media (min-width: 1024px) {
  .tcs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6vw 2.6vw; }
  .tcs-tile-title h2 span { font-size: 2.188vw; }
  .tcs-tile-title h2 strong { font-size: 3.125vw; }
  .tcs-tile-title p, .tcs-tile p { font-size: clamp(12px, .9vw, 17px); }
  .tcs-tile-number { font-size: 2.604vw; }
  .tcs-tile h3 { font-size: 2.083vw; }
}

/* Arabic text needs more line height than the Latin display sizes */
[dir='rtl'] .tcs :where(h1, h2, h3, .tcs-tagline) { line-height: 1.3; }
[dir='rtl'] .tcs-ticket-body h2 { white-space: normal; }

/* Reveal sections as they scroll in, where supported */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tcs-intro, .tcs-tile, .tcs-ticket, .tcs-next {
      animation: tcs-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
    }
  }
}
@keyframes tcs-rise { from { opacity: 0; transform: translateY(48px); } }

/* =====================================================================
   Per-project designs. Each project page composes its own hero and
   sections; the shared frame (facts row, title, up next) stays common.
   The site styles every p at 20px+, every span as a block and every
   heading in uppercase, so sizes here are always set explicitly.
   ===================================================================== */

.tcs :where(h2, h3) { text-transform: none; }
.tcs-display {
  font-family: Rajdhani, sans-serif; font-size: 10vw; font-weight: 700; line-height: .92;
  text-transform: uppercase; text-wrap: balance;
}
.tcs-kicker { font-family: Rajdhani, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }
.tcs-sub { color: rgb(255 255 255 / .55); font-family: Rajdhani, sans-serif; font-size: 4.6vw; font-weight: 500; line-height: 1.25; }
.tcs-lead { color: rgb(255 255 255 / .85); font-size: 4.2vw; line-height: 1.45; }
.tcs-col-title { font-family: Rajdhani, sans-serif; font-size: 5.4vw; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.tcs-center { text-align: center; }
.tcs-center-link { align-self: center; }
.tcs-head { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 8vw; }
.tcs-head--center { align-items: center; text-align: center; }
.tcs-arrow { width: 1.4em; height: 1.4em; flex: none; }
.tcs-dots { display: grid; gap: .7em; }
.tcs-dots li { display: flex; gap: .75em; color: rgb(255 255 255 / .75); font-size: 4vw; line-height: 1.5; }
.tcs-dots li::before { content: ''; flex: none; width: .38em; height: .38em; margin-top: .62em; border-radius: 50%; background: var(--tcs-accent); }
.tcs-dots strong { color: #fff; font-weight: 700; }
.tcs-dots--large li { color: #fff; font-family: Rajdhani, sans-serif; font-size: 5.4vw; font-weight: 600; line-height: 1.25; }
.tcs-numbered { display: grid; gap: 0; counter-reset: none; }
.tcs-numbered li { display: flex; gap: 1em; align-items: baseline; padding: .9em 0; border-top: 1px solid rgb(255 255 255 / .12); font-family: Rajdhani, sans-serif; font-size: 5.4vw; font-weight: 600; line-height: 1.2; }
.tcs-numbered li span { flex: none; color: var(--tcs-accent); font-size: .7em; }
/* Wide product scene on the editorial and glow heroes; its edges fade into the page so the generated backdrop never shows a seam. */
.tcs-hero-scene { position: relative; width: 112%; margin: 0 -6%; }
.tcs-hero-scene img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(72% 70% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(72% 70% at 50% 50%, #000 62%, transparent 100%);
  animation: tcs-float 7s ease-in-out infinite;
}

/* ---------- Hero backgrounds ---------- */
.tcs--aurora .tcs-hero-bg {
  height: min(130vw, 1500px); -webkit-mask-image: linear-gradient(#000 35%, transparent 75%); mask-image: linear-gradient(#000 35%, transparent 75%);
  background:
    radial-gradient(28% 26% at 12% 4%, #19d3b0, transparent 70%),
    radial-gradient(30% 28% at 42% 0%, var(--tcs-color), transparent 72%),
    radial-gradient(26% 26% at 72% 6%, #2f6bff, transparent 70%),
    radial-gradient(30% 30% at 95% 2%, var(--tcs-accent), transparent 70%);
  filter: blur(30px);
}
.tcs--editorial .tcs-hero-bg { background: none; }
.tcs--metrics .tcs-hero-bg {
  background: radial-gradient(40% 30% at 82% 30%, color-mix(in srgb, var(--tcs-color) 45%, transparent), transparent 70%),
    radial-gradient(30% 22% at 10% 70%, color-mix(in srgb, var(--tcs-accent) 18%, transparent), transparent 70%);
}
.tcs--orbit .tcs-hero-bg {
  background: radial-gradient(42% 32% at 50% 40%, color-mix(in srgb, var(--tcs-color) 40%, transparent), transparent 72%);
}
.tcs--pipeline .tcs-hero-bg {
  background:
    radial-gradient(45% 35% at 70% 40%, color-mix(in srgb, var(--tcs-color) 42%, transparent), transparent 70%),
    linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px) 0 0 / 100% 64px;
}
.tcs--blueprint .tcs-hero-bg {
  background:
    linear-gradient(rgb(162 182 239 / .09) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(162 182 239 / .09) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(50% 40% at 50% 38%, color-mix(in srgb, var(--tcs-color) 70%, transparent), transparent 75%);
}
.tcs--poster .tcs-hero-bg {
  background: radial-gradient(70% 40% at 50% 34%, color-mix(in srgb, var(--tcs-color) 38%, transparent), transparent 70%);
}
.tcs--spotlight .tcs-hero-bg {
  background: conic-gradient(from 200deg at 30% 0%, transparent 0 40deg, color-mix(in srgb, var(--tcs-accent) 16%, transparent) 55deg, transparent 75deg),
    radial-gradient(40% 32% at 30% 42%, color-mix(in srgb, var(--tcs-color) 40%, transparent), transparent 72%);
}

/* Navy project colour is too dark for text on the page background */
.tcs--blueprint .tcs-tagline { color: var(--tcs-accent); }

/* ---------- Heroes ---------- */
.tcs-hero--aurora { gap: 10vw; }
.tcs-aurora { position: relative; display: grid; place-items: center; padding-top: 12vw; }
.tcs-aurora-product { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 40px 60px rgb(0 0 0 / .6)); animation: tcs-float 7s ease-in-out infinite; }
.tcs-aurora-floor { position: absolute; inset: auto 8% -4% 8%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tcs-color) 55%, transparent), transparent); filter: blur(10px); }
@keyframes tcs-float { 50% { transform: translateY(-1.6%); } }


.tcs-orbit { position: relative; width: min(100%, 82vw); aspect-ratio: 1; margin: 6vw auto 0; }
.tcs-orbit-ring { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--tcs-accent) 35%, transparent); border-radius: 50%; }
.tcs-orbit-ring--mid { inset: 13%; border-style: dashed; border-color: rgb(255 255 255 / .14); }
.tcs-orbit-ring--in { inset: 27%; border-color: color-mix(in srgb, var(--tcs-accent) 55%, transparent); box-shadow: 0 0 60px color-mix(in srgb, var(--tcs-color) 50%, transparent) inset; }
.tcs-orbit-spin { position: absolute; inset: 0; animation: tcs-spin 26s linear infinite; }
.tcs-orbit-spin i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--tcs-accent); box-shadow: 0 0 14px 3px var(--tcs-accent); }
.tcs-orbit-spin i:nth-child(1) { top: -5px; left: calc(50% - 5px); }
.tcs-orbit-spin i:nth-child(2) { top: 62%; left: 6.5%; }
.tcs-orbit-spin i:nth-child(3) { top: 75%; right: 18%; width: 6px; height: 6px; }
@keyframes tcs-spin { to { transform: rotate(360deg); } }
.tcs-orbit-product { position: absolute; top: 50%; left: 50%; width: 92%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 30px 50px rgb(0 0 0 / .6)); }
.tcs-orbit-stages li {
  position: absolute; display: flex; gap: .45em; align-items: center; padding: .4em .75em; transform: translate(-50%, -50%);
  border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; background: rgb(11 4 42 / .85); backdrop-filter: blur(6px);
  font-family: Rajdhani, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.tcs-orbit-stages li span { color: var(--tcs-accent); }
.tcs-orbit-foot, .tcs-spot-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: Rajdhani, sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; }

.tcs-tilt { position: relative; display: grid; place-items: center; padding-block: 8vw 4vw; perspective: 1400px; }
.tcs-tilt-art { position: absolute; top: 50%; left: 50%; width: 120%; max-width: none; transform: translate(-50%, -58%); opacity: .5; }
.tcs-tilt-card {
  position: relative; width: 94%; padding: 3%; border: 1px solid rgb(255 255 255 / .14); border-radius: 18px;
  background: linear-gradient(150deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02)); backdrop-filter: blur(10px);
  transform: rotateX(16deg) rotateY(-14deg) rotateZ(2deg); box-shadow: 0 60px 80px -30px rgb(0 0 0 / .7);
}
.tcs-tilt-product { width: 100%; height: auto; }
.tcs-tilt-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; width: 100%; margin-top: 6vw; font-family: Rajdhani, sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; }

.tcs-hero--blueprint { gap: 7vw; }
.tcs-bp { position: relative; padding: 9vw 5vw 5vw; border: 1px solid rgb(162 182 239 / .25); }
.tcs-bp-corner { position: absolute; width: 18px; height: 18px; border-color: var(--tcs-accent); border-style: solid; }
.tcs-bp-corner:nth-child(1) { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.tcs-bp-corner:nth-child(2) { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.tcs-bp-corner:nth-child(3) { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.tcs-bp-corner:nth-child(4) { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.tcs-bp-top { position: absolute; inset: 3vw 4vw auto; display: flex; justify-content: space-between; font-family: Rajdhani, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.tcs-bp-product { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgb(0 0 0 / .5)); }
.tcs-bp-ruler { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 5vw; border-top: 1px solid rgb(162 182 239 / .4); }
.tcs-bp-ruler li { position: relative; padding-top: .8em; font-family: Rajdhani, sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; color: rgb(255 255 255 / .75); }
.tcs-bp-ruler li::before { content: ''; position: absolute; top: -1px; inset-inline-start: 0; width: 1px; height: 9px; background: var(--tcs-accent); }
.tcs-bp-ruler span { color: var(--tcs-accent); }

.tcs-poster { position: relative; display: grid; padding-block: 6vw; }
.tcs-poster-art { width: 100%; height: auto; }
.tcs-poster-product { position: relative; width: 82%; height: auto; margin: -24% 0 0 auto; filter: drop-shadow(0 40px 60px rgb(0 0 0 / .7)); }
[dir='rtl'] .tcs-poster-product { margin: -24% auto 0 0; }
.tcs-poster-count { position: absolute; top: 2vw; inset-inline-start: 0; font-family: Rajdhani, sans-serif; font-size: 12px; font-weight: 700; }

.tcs-spot { display: flex; flex-direction: column; gap: 6vw; padding-top: 6vw; }
.tcs-spot-visual { position: relative; display: grid; place-items: center; }
.tcs-spot-disc { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--tcs-accent), var(--tcs-color) 55%, color-mix(in srgb, var(--tcs-color) 30%, #0b042a)); opacity: .9; }
.tcs-spot-product { position: relative; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgb(0 0 0 / .6)); }
.tcs-spot-stages { display: grid; }
.tcs-spot-stages li {
  display: flex; gap: .5em; align-items: baseline; padding: .15em 0; border-bottom: 1px solid rgb(255 255 255 / .1);
  color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / .55); font-family: Rajdhani, sans-serif; font-size: 10vw; font-weight: 700; line-height: 1.05; text-transform: uppercase;
}
.tcs-spot-stages li:first-child { color: var(--tcs-accent); -webkit-text-stroke: 0; }
.tcs-spot-stages span { color: var(--tcs-accent); -webkit-text-stroke: 0; font-size: .3em; }

/* ---------- Intros ---------- */
.tcs-intro--ring, .tcs-intro--stack .tcs-stack-cols { display: flex; flex-direction: column; gap: 6vw; }
.tcs-intro--ring h1, .tcs-intro--center h1 { font-family: Rajdhani, sans-serif; font-size: 11vw; font-weight: 700; line-height: .9; text-transform: uppercase; text-wrap: balance; }
.tcs-intro--ring .tcs-tagline { margin-top: .15em; font-size: 7vw; }
.tcs-ring-overview { display: flex; flex-direction: column; gap: .8rem; }
.tcs-ring-overview p, .tcs-stack-cols p:not(.tcs-tagline) { color: rgb(255 255 255 / .55); font-size: 4vw; line-height: 1.5; }
.tcs-intro--center { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.tcs-intro--center .tcs-tagline { margin: 0; font-size: 7vw; }
.tcs-center-desc { max-width: 52ch; color: rgb(255 255 255 / .6); font-size: 4vw; line-height: 1.55; }
.tcs-intro--stack h1 { font-family: Rajdhani, sans-serif; font-size: 16vw; font-weight: 700; line-height: .82; text-transform: uppercase; letter-spacing: -.01em; }
.tcs-intro--stack .tcs-stack-cols { margin-top: 6vw; padding-top: 6vw; border-top: 1px solid rgb(255 255 255 / .14); }
.tcs-intro--stack .tcs-tagline { margin: 0; font-size: 8vw; }
.tcs-stack-cols > div { display: flex; flex-direction: column; gap: .8rem; }
.tcs-stack-cols .tcs-stack-headline { color: #fff; font-family: Rajdhani, sans-serif; font-size: 5.4vw; font-weight: 600; line-height: 1.25; }

/* ---------- Process ---------- */
.tcs-rows { display: flex; flex-direction: column; gap: 14vw; }
.tcs-row { display: flex; flex-direction: column; gap: 8vw; }
.tcs-row-text { display: flex; flex-direction: column; gap: 1.2rem; }
.tcs-row-steps { display: grid; gap: 1.1rem; margin-top: .6rem; }
.tcs-row-steps p { color: rgb(255 255 255 / .65); font-size: 4vw; line-height: 1.55; }
.tcs-row-steps strong { color: #fff; font-weight: 700; }
.tcs-row-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 55%, transparent); mask-image: radial-gradient(75% 70% at 50% 50%, #000 55%, transparent); }
.tcs-row-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); transform-origin: 38% 34%; }
.tcs-row-media--art { display: grid; place-items: center; background: radial-gradient(closest-side, color-mix(in srgb, var(--tcs-color) 55%, transparent), transparent); }
.tcs-row-art { width: 82%; height: auto; transform: rotate(-8deg); filter: drop-shadow(0 0 30px var(--tcs-color)); }

.tcs-showcase { position: relative; display: grid; place-items: center; }
.tcs-showcase-frame { position: relative; z-index: 1; width: 100%; padding: 0 3% 3%; border: 1px solid rgb(255 255 255 / .16); border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--tcs-color) 35%, #0b042a), #0b042a 70%); box-shadow: 0 0 0 8px rgb(255 255 255 / .03); }
.tcs-showcase-bar { display: flex; gap: 6px; padding: 14px 4px; }
.tcs-showcase-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .25); }
.tcs-showcase-img { width: 100%; height: auto; }
.tcs-showcase-art { position: absolute; inset: auto -6% -6% auto; width: 46%; opacity: .45; transform: rotate(-6deg); }
.tcs-twocol-grid { display: grid; gap: 10vw; margin-top: 8vw; }
.tcs-twocol-grid > div { display: flex; flex-direction: column; gap: 1.4rem; }
.tcs-twocol .tcs-col-title br, .tcs-collage .tcs-col-title br { display: none; }

.tcs-zig-map { display: none; }
.tcs-zig-cards { display: grid; gap: 4vw; counter-reset: none; }
.tcs-zig-cards li { display: flex; flex-direction: column; gap: .8rem; padding: 7vw 6vw; border: 1px solid rgb(255 255 255 / .1); border-radius: 18px; background: rgb(255 255 255 / .04); }
.tcs-zig-cards h3 { display: flex; gap: .6em; align-items: baseline; font-family: Rajdhani, sans-serif; font-size: 5.4vw; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.tcs-zig-cards h3 span { color: var(--tcs-accent); }
.tcs-zig-cards p { color: rgb(255 255 255 / .6); font-size: 3.8vw; line-height: 1.55; }

.tcs-circuit-list { position: relative; display: grid; gap: 6vw; padding-inline-start: 8vw; }
.tcs-circuit-list::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 2vw; width: 2px; background: linear-gradient(var(--tcs-accent), color-mix(in srgb, var(--tcs-accent) 20%, transparent)); }
.tcs-circuit-list li { position: relative; }
.tcs-circuit-node { position: absolute; top: 1.4rem; inset-inline-start: calc(-6vw - 6px); width: 14px; height: 14px; border: 2px solid var(--tcs-accent); border-radius: 50%; background: #0b042a; box-shadow: 0 0 0 5px color-mix(in srgb, var(--tcs-accent) 18%, transparent); }
.tcs-circuit-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.3rem; border: 1px solid color-mix(in srgb, var(--tcs-accent) 30%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--tcs-color) 14%, #0b042a); }
.tcs-circuit-num { color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-size: 13px; font-weight: 700; }
.tcs-circuit-card h3 { font-family: Rajdhani, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.tcs-circuit-card p { color: rgb(255 255 255 / .6); font-size: 15px; line-height: 1.5; }

.tcs-pipe-board { display: flex; gap: 12px; margin-inline: -1.5rem; padding: 0 1.5rem 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tcs-pipe-board::-webkit-scrollbar { display: none; }
.tcs-pipe-col { flex: 0 0 70vw; display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 14px; background: rgb(255 255 255 / .05); scroll-snap-align: start; }
.tcs-pipe-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; }
.tcs-pipe-top h3 { font-family: Rajdhani, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tcs-pipe-top span { padding: 2px 9px; border-radius: 999px; background: var(--tcs-color); font-family: Rajdhani, sans-serif; font-size: 12px; font-weight: 700; }
.tcs-pipe-card { display: flex; flex-direction: column; gap: 18px; padding: 16px; border: 1px solid rgb(255 255 255 / .08); border-radius: 10px; background: #120a38; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .6); }
.tcs-pipe-card p { color: rgb(255 255 255 / .75); font-size: 15px; line-height: 1.5; }
.tcs-pipe-bar { position: relative; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .1); overflow: hidden; }
.tcs-pipe-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--tcs-color), var(--tcs-accent)); }
[dir='rtl'] .tcs-pipe-bar::after { inset: 0 0 0 auto; }

.tcs-time-list { position: relative; display: grid; gap: 7vw; padding-inline-start: 9vw; }
.tcs-time-list::before { content: ''; position: absolute; top: .5rem; bottom: .5rem; inset-inline-start: 3vw; width: 1px; background: rgb(162 182 239 / .35); }
.tcs-time-list li { position: relative; }
.tcs-time-dot { position: absolute; top: .9rem; inset-inline-start: calc(-6vw - 6px); width: 13px; height: 13px; border-radius: 50%; background: var(--tcs-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tcs-accent) 20%, transparent); }
.tcs-time-card { display: flex; flex-direction: column; gap: .8rem; }
.tcs-time-status { width: fit-content; padding: .45em .9em; border: 1px solid color-mix(in srgb, var(--tcs-accent) 50%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tcs-color) 60%, transparent); font-family: Rajdhani, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tcs-time-card p { color: rgb(255 255 255 / .7); font-size: 4.2vw; line-height: 1.5; }

.tcs-stairs-list { display: grid; gap: 4vw; }
.tcs-stairs-list li { display: flex; flex-direction: column-reverse; gap: .8rem; }
.tcs-stair-block { display: flex; align-items: center; height: 14vw; width: calc(46% + var(--step) * 13.5%); padding-inline: 4vw; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--tcs-color) calc(40% + var(--step) * 15%), #0b042a), var(--tcs-color)); }
.tcs-stair-block span { font-family: Rajdhani, sans-serif; font-size: 7vw; font-weight: 700; }
.tcs-stair-text h3 { font-family: Rajdhani, sans-serif; font-size: 6vw; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.tcs-stair-text p { margin-top: .3em; color: rgb(255 255 255 / .6); font-size: 3.8vw; line-height: 1.5; }

.tcs-funnel-list { display: grid; gap: 8px; }
.tcs-funnel-list li { display: flex; justify-content: center; }
.tcs-funnel-bar {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: baseline; width: calc(100% - var(--step) * 4%);
  padding: 5vw 6vw; border-radius: 12px; background: color-mix(in srgb, var(--tcs-color) calc(100% - var(--step) * 14%), #1a0f48);
}
.tcs-funnel-num { grid-row: span 2; color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-size: 8vw; font-weight: 700; line-height: 1; }
.tcs-funnel-bar h3 { font-family: Rajdhani, sans-serif; font-size: 5.6vw; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.tcs-funnel-bar p { color: rgb(255 255 255 / .75); font-size: 3.8vw; line-height: 1.5; }

/* ---------- Solutions ---------- */
.tcs-collage { display: flex; flex-direction: column; gap: 8vw; }
.tcs-collage-grid { display: grid; gap: 6vw; }
.tcs-collage-side { display: flex; flex-direction: column; gap: 1.2rem; text-align: center; }
.tcs-collage-art { display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 4px; background: linear-gradient(140deg, var(--tcs-color), color-mix(in srgb, var(--tcs-accent) 60%, #0b042a)); }
.tcs-collage-art-img { width: 120%; max-width: none; height: auto; filter: brightness(0) invert(1); opacity: .9; transform: rotate(-10deg); }
.tcs--aurora .tcs-collage-art-img { width: 84%; max-width: 100%; }
.tcs-collage-main { position: relative; overflow: hidden; min-height: 110vw; border-radius: 4px; background: radial-gradient(90% 70% at 60% 20%, color-mix(in srgb, var(--tcs-accent) 70%, transparent), var(--tcs-color) 60%, #1b0c4d); }
.tcs-collage-img { position: absolute; top: 4%; inset-inline-end: -18%; width: 130%; max-width: none; height: auto; }
.tcs-collage-glass { position: absolute; inset: auto 4% 4% 4%; padding: 6vw; border: 1px solid rgb(255 255 255 / .2); border-radius: 6px; background: rgb(20 10 60 / .55); backdrop-filter: blur(14px); }
.tcs-collage-glass .tcs-dots li { color: #fff; font-size: 3.8vw; }
.tcs-collage-glass .tcs-dots li::before { background: #fff; }

.tcs-cards-grid { display: grid; gap: 4vw; }
.tcs-cards-grid li { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10vw; min-height: 40vw; padding: 6vw; overflow: hidden; border: 1px solid rgb(255 255 255 / .1); border-radius: 18px; background: linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / .015)); }
.tcs-cards-grid li::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tcs-color) 60%, transparent), transparent); opacity: .7; transition: opacity .4s; }
.tcs-cards-grid li:hover::after { opacity: 1; }
.tcs-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--tcs-accent) 60%, transparent); border-radius: 12px; color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-size: 15px; font-weight: 700; }
.tcs-cards-grid h3 { position: relative; z-index: 1; font-family: Rajdhani, sans-serif; font-size: 6vw; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.tcs--metrics .tcs-cards-grid .tcs-detail-card .tcs-detail-copy {
  position: relative; z-index: 1; display: block; max-height: none; overflow: visible;
  opacity: 1; transform: none; -webkit-line-clamp: unset; transition: none;
}

.tcs-orb { display: flex; flex-direction: column; gap: 10vw; }
.tcs-orb-text { display: flex; flex-direction: column; gap: 1rem; }
.tcs-orb-list { display: grid; margin-top: 1rem; }
.tcs-orb-list li { display: flex; gap: 1em; padding: .8em 0; border-top: 1px solid rgb(255 255 255 / .1); font-family: Rajdhani, sans-serif; font-size: 5vw; font-weight: 600; line-height: 1.2; }
.tcs-orb-list span { color: var(--tcs-accent); font-size: .75em; }
.tcs-orb-diagram { position: relative; width: min(100%, 86vw); aspect-ratio: 1; margin-inline: auto; }
.tcs-orb-ring { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--tcs-accent) 45%, transparent); border-radius: 50%; background: radial-gradient(closest-side, transparent 70%, color-mix(in srgb, var(--tcs-color) 30%, transparent)); }
.tcs-orb-ring--in { inset: 19%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tcs-color) 40%, transparent), transparent); }
.tcs-orb-core { position: absolute; top: 50%; left: 50%; width: 30%; transform: translate(-50%, -50%); font-family: Rajdhani, sans-serif; font-size: 4vw; font-weight: 700; line-height: 1.05; text-align: center; text-transform: uppercase; }
.tcs-orb-node { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: #0b042a; border: 1px solid var(--tcs-accent); box-shadow: 0 0 22px color-mix(in srgb, var(--tcs-accent) 70%, transparent); color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-size: 14px; font-weight: 700; }

.tcs-grid-list { display: grid; border-top: 1px solid rgb(255 255 255 / .15); border-inline-start: 1px solid rgb(255 255 255 / .15); }
.tcs-grid-list li { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8vw; min-height: 44vw; padding: 6vw; border-bottom: 1px solid rgb(255 255 255 / .15); border-inline-end: 1px solid rgb(255 255 255 / .15); transition: background .35s; }
.tcs-grid-list li:hover { background: var(--tcs-color); }
.tcs-grid-num { color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-size: 12vw; font-weight: 700; line-height: .8; transition: color .35s; }
.tcs-grid-list li:hover .tcs-grid-num { color: #fff; }
.tcs-grid-list h3 { padding-inline-end: 2.4rem; font-family: Rajdhani, sans-serif; font-size: 5.6vw; font-weight: 600; line-height: 1.15; }
.tcs-grid-list .tcs-arrow { position: absolute; bottom: 6vw; inset-inline-end: 6vw; }
.tcs--pipeline .tcs-grid-list .tcs-detail-card .tcs-detail-copy {
  position: relative; z-index: 1; display: block; max-height: none; overflow: visible;
  opacity: 1; transform: none; -webkit-line-clamp: unset; transition: none;
}
[dir='rtl'] .tcs-arrow { transform: scaleX(-1); }

.tcs-check { display: flex; flex-direction: column; gap: 8vw; }
.tcs-check-head { display: flex; flex-direction: column; gap: 1rem; }
.tcs-check-list { display: grid; border-top: 1px solid rgb(162 182 239 / .25); }
.tcs-check-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid rgb(162 182 239 / .25); }
.tcs-check-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--tcs-color); color: var(--tcs-accent); }
.tcs-check-icon svg { width: 20px; height: 20px; }
.tcs-check-text { font-family: Rajdhani, sans-serif; font-size: 5vw; font-weight: 600; line-height: 1.2; }
.tcs-check-num { color: rgb(255 255 255 / .4); font-family: Rajdhani, sans-serif; font-size: 13px; font-weight: 700; }

.tcs-pills-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tcs-pills-cloud li {
  display: flex; gap: .6em; align-items: center; padding: .7em 1.2em; border: 1px solid color-mix(in srgb, var(--tcs-accent) 60%, transparent); border-radius: 999px;
  font-family: Rajdhani, sans-serif; font-size: 5vw; font-weight: 600; line-height: 1.1; transition: background .3s, transform .3s;
}
.tcs-pills-cloud li:nth-child(3n + 1) { background: var(--tcs-color); border-color: var(--tcs-color); }
.tcs-pills-cloud li:nth-child(3n + 2) { transform: rotate(-2deg); }
.tcs-pills-cloud li:hover { transform: translateY(-4px) rotate(0); }
.tcs-pills-cloud span { color: var(--tcs-accent); font-size: .65em; }
.tcs-pills-cloud li:nth-child(3n + 1) span { color: #fff; opacity: .7; }

.tcs-profiles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vw; }
.tcs-profiles-grid li { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 7vw 4vw; border: 1px solid rgb(255 255 255 / .1); border-radius: 22px; background: rgb(255 255 255 / .04); text-align: center; }
.tcs-profile-avatar { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--tcs-accent), var(--tcs-color), var(--tcs-accent)); padding: 3px; }
.tcs-profile-avatar span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #120a38; font-family: Rajdhani, sans-serif; font-size: 18px; font-weight: 700; }
.tcs-profiles-grid h3 { font-family: Rajdhani, sans-serif; font-size: 4.6vw; font-weight: 700; line-height: 1.2; }
.tcs--spotlight .tcs-profiles-grid .tcs-detail-card .tcs-detail-copy {
  position: relative; z-index: 1; display: block; max-height: none; overflow: visible;
  opacity: 1; transform: none; -webkit-line-clamp: unset; transition: none;
}
.tcs-profile-lines { display: grid; justify-items: center; gap: 6px; width: 100%; }
.tcs-profile-lines i { display: block; width: 70%; height: 5px; border-radius: 5px; background: rgb(255 255 255 / .08); }
.tcs-profile-lines i + i { width: 45%; }

/* ---------- Results ---------- */
.tcs-conclusion { display: flex; flex-direction: column; gap: 8vw; }
.tcs-conclusion-visual { position: relative; display: grid; place-items: center; padding-block: 8vw; }
.tcs-conclusion-glow { position: absolute; inset: 0; background: conic-gradient(from 30deg, var(--tcs-accent), #2f6bff, #19d3b0, var(--tcs-color), var(--tcs-accent)); border-radius: 50%; filter: blur(60px); opacity: .45; }
.tcs-conclusion-img { position: relative; width: 100%; height: auto; }
.tcs-conclusion-text { display: flex; flex-direction: column; gap: 1rem; }

.tcs-impact { display: flex; flex-direction: column; gap: 8vw; }
.tcs-impact > div { display: flex; flex-direction: column; gap: 1.4rem; }
.tcs-impact .tcs-col-title br { display: none; }
.tcs-closing { display: flex; flex-direction: column; gap: 6vw; }
.tcs-closing-rule { display: block; width: 64px; height: 4px; background: var(--tcs-color); }
.tcs-closing p { font-family: Rajdhani, sans-serif; font-size: 10vw; font-weight: 700; line-height: 1; text-transform: uppercase; text-wrap: balance; }

.tcs-display--xl { font-size: 13vw; }
.tcs-metrics-grid { display: grid; gap: 8vw; margin-top: 8vw; }
.tcs-metrics-col { display: flex; flex-direction: column; gap: 6vw; }
.tcs-metrics-lead { font-family: Rajdhani, sans-serif; font-size: 6vw; font-weight: 400; line-height: 1.25; }
.tcs-metrics-lead br { display: none; }
.tcs-metric span { color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-size: 9vw; font-weight: 700; line-height: 1; }
.tcs-metric p { margin-top: .7em; padding-top: .7em; border-top: 1px solid rgb(255 255 255 / .14); color: rgb(255 255 255 / .75); font-family: Rajdhani, sans-serif; font-size: 4.6vw; font-weight: 600; line-height: 1.3; }
.tcs-metrics-visual { display: grid; place-items: center; overflow: hidden; padding: 10vw 4vw; border: 1px solid rgb(255 255 255 / .08); border-radius: 16px; background: linear-gradient(180deg, #0f0838, color-mix(in srgb, var(--tcs-color) 55%, #0b042a)); }
.tcs-metrics-img { width: 112%; max-width: none; height: auto; }

.tcs-ach-grid { display: grid; gap: 4vw; }
.tcs-ach-grid li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 56vw; padding: 8vw 6vw; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tcs-accent) 25%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--tcs-color) 10%, #0d0632); text-align: center; }
.tcs-ach-num { position: relative; z-index: 1; color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.tcs-ach-grid h3 { position: relative; z-index: 1; font-family: Rajdhani, sans-serif; font-size: 7vw; font-weight: 700; line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.tcs--orbit .tcs-ach-grid .tcs-detail-copy {
  position: relative; z-index: 1; display: block; max-height: none; overflow: visible;
  opacity: 1; transform: none; -webkit-line-clamp: unset; transition: none;
}
.tcs-ach-glow { position: absolute; inset: auto 10% -55% 10%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tcs-accent) 55%, transparent), transparent); }

.tcs-lines-list { display: grid; border-top: 1px solid rgb(255 255 255 / .18); }
.tcs-lines-list li { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 6vw 0; border-bottom: 1px solid rgb(255 255 255 / .18); transition: color .3s, padding .4s; }
.tcs-lines-list li > span { color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-size: 14px; font-weight: 700; }
.tcs-lines-list h3 { font-family: Rajdhani, sans-serif; font-size: 7vw; font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.tcs-lines-list li:hover { color: var(--tcs-accent); padding-inline-start: 1rem; }

.tcs-band { padding-block: 12vw; background: linear-gradient(120deg, var(--tcs-color), color-mix(in srgb, var(--tcs-color) 60%, #0b042a)); }
.tcs-band-head { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 8vw; }
.tcs-band .tcs-sub { color: rgb(255 255 255 / .75); }
.tcs-band-list { display: grid; gap: 0; }
.tcs-band-list li { display: flex; flex-direction: column; gap: .6rem; padding: 6vw 0; border-top: 1px solid rgb(255 255 255 / .22); }
.tcs-band-list span { color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-size: 8vw; font-weight: 700; line-height: 1; }
.tcs-band-list p { font-family: Rajdhani, sans-serif; font-size: 5.6vw; font-weight: 600; line-height: 1.2; }

.tcs-bars-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3vw; align-items: end; padding-top: 4vw; border-bottom: 1px solid rgb(255 255 255 / .25); }
.tcs-bars-chart li { display: flex; flex-direction: column-reverse; gap: .7rem; }
.tcs-bar { display: flex; align-items: flex-start; justify-content: center; height: calc(26vw + var(--step) * 13vw); padding-top: .6rem; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--tcs-accent), var(--tcs-color)); transform-origin: bottom; }
.tcs-bar span { font-family: Rajdhani, sans-serif; font-size: 5vw; font-weight: 700; }
.tcs-bars-chart p { font-family: Rajdhani, sans-serif; font-size: 3.6vw; font-weight: 600; line-height: 1.2; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tcs-bar, .tcs-stair-block { animation: tcs-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  }
}
@keyframes tcs-grow { from { transform: scaleY(.15); } }
.tcs-stair-block { transform-origin: left; }

.tcs-quote { display: flex; flex-direction: column; gap: 6vw; }
.tcs-quote blockquote { position: relative; margin: 0; padding-top: 14vw; }
.tcs-quote blockquote > span { position: absolute; top: -4vw; inset-inline-start: -1vw; color: var(--tcs-color); font-family: Georgia, serif; font-size: 34vw; line-height: 1; }
.tcs-quote blockquote p { position: relative; font-family: Rajdhani, sans-serif; font-size: 11vw; font-weight: 700; line-height: .95; text-transform: uppercase; text-wrap: balance; }
.tcs-quote .tcs-head { margin: 6vw 0 0; }
.tcs-quote-list { display: grid; gap: 4vw; }
.tcs-quote-list li { display: flex; flex-direction: column; gap: .8rem; padding: 6vw; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--tcs-color) 40%, #0b042a), rgb(255 255 255 / .03)); }
.tcs-quote-list span { color: var(--tcs-accent); font-family: Rajdhani, sans-serif; font-size: 14px; font-weight: 700; }
.tcs-quote-list p { font-family: Rajdhani, sans-serif; font-size: 5.6vw; font-weight: 600; line-height: 1.2; }

/* Reveal the new sections too */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tcs-row, .tcs-collage-grid, .tcs-twocol-grid, .tcs-showcase, .tcs-zig-cards li, .tcs-circuit-list li, .tcs-pipe-col, .tcs-time-list li,
    .tcs-stairs-list li, .tcs-funnel-list li, .tcs-cards-grid li, .tcs-orb-diagram, .tcs-grid-list li, .tcs-check-list li, .tcs-pills-cloud,
    .tcs-profiles-grid li, .tcs-conclusion, .tcs-metrics-grid, .tcs-ach-grid li, .tcs-lines-list li, .tcs-band-list li, .tcs-quote blockquote, .tcs-quote-list li, .tcs-closing {
      animation: tcs-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}

@media (min-width: 640px) {
  .tcs-display { font-size: clamp(34px, 3.6vw, 68px); }
  .tcs-display--xl { font-size: clamp(48px, 5.6vw, 108px); }
  .tcs-sub { font-size: clamp(16px, 1.35vw, 24px); }
  .tcs-lead { font-size: clamp(15px, 1.2vw, 22px); }
  .tcs-col-title { font-size: clamp(18px, 1.5vw, 28px); }
  .tcs-head { margin-bottom: 4vw; }
  .tcs-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 4vw; }
  .tcs-head--split .tcs-sub { max-width: 28ch; text-align: end; }
  .tcs-dots li { font-size: clamp(14px, 1.1vw, 19px); }
  .tcs-dots--large li { font-size: clamp(20px, 1.8vw, 32px); }
  .tcs-numbered li { font-size: clamp(18px, 1.6vw, 28px); }
  .tcs-hero-scene { width: min(100%, 1240px); margin: -2vw auto -3vw; }

  .tcs-hero--aurora { gap: 3vw; }
  .tcs-aurora { padding-top: 6vw; }
  .tcs-aurora-product { width: 72%; }

  .tcs-orbit { width: min(68vw, 880px); margin-top: 3vw; }
  .tcs-orbit-stages li { font-size: clamp(11px, .8vw, 14px); }
  .tcs-orbit-foot, .tcs-spot-foot, .tcs-tilt-meta { font-size: clamp(10px, .69vw, 13px); }

  .tcs-tilt { padding-block: 4vw 0; }
  .tcs-tilt-art { width: 104%; }
  .tcs-tilt-card { width: 70%; }
  .tcs-tilt-meta { margin-top: 3vw; }

  .tcs-bp { padding: 5vw 6vw 3vw; }
  .tcs-bp-top { inset: 1.6vw 2vw auto; font-size: clamp(10px, .69vw, 13px); }
  .tcs-bp-product { width: 76%; margin-inline: auto; }
  .tcs-bp-ruler { margin-top: 3vw; }
  .tcs-bp-ruler li { font-size: clamp(10px, .76vw, 14px); }

  .tcs-poster { padding-block: 3vw; }
  .tcs-poster-product { width: 58%; margin-top: -26%; }
  .tcs-poster-count { top: 0; font-size: clamp(10px, .69vw, 13px); }

  .tcs-spot { flex-direction: row; align-items: center; gap: 4vw; padding-top: 3vw; }
  .tcs-spot-visual { flex: 1.25; }
  .tcs-spot-stages { flex: 1; }
  .tcs-spot-stages li { font-size: clamp(40px, 4.4vw, 84px); }

  .tcs-intro--ring { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 6vw; }
  .tcs-ring-title { flex: 0 1 44%; }
  .tcs-ring-overview { flex: 0 1 46%; padding-top: .4vw; }
  .tcs-intro--ring h1 { font-size: clamp(40px, 4vw, 76px); }
  .tcs-intro--ring .tcs-tagline { font-size: clamp(28px, 2.6vw, 50px); }
  .tcs-intro--compact .tcs-ring-title { flex-basis: 30%; padding-inline-start: 6vw; }
  .tcs-intro--compact h1 { font-size: clamp(34px, 3vw, 58px); }
  .tcs-intro--compact .tcs-tagline { font-size: clamp(22px, 1.9vw, 36px); }
  .tcs-intro--compact .tcs-ring-overview { flex-basis: 52%; }
  .tcs-intro--compact .tcs-ring-overview p { color: rgb(255 255 255 / .65); font-weight: 600; }
  .tcs-ring-overview p, .tcs-stack-cols p:not(.tcs-tagline) { font-size: clamp(14px, 1.2vw, 22px); }
  .tcs-intro--center h1 { font-size: clamp(48px, 5.2vw, 100px); }
  .tcs-intro--center .tcs-tagline { font-size: clamp(26px, 2.4vw, 46px); }
  .tcs-center-desc { font-size: clamp(15px, 1.25vw, 22px); }
  .tcs-intro--stack h1 { font-size: clamp(72px, 10.5vw, 200px); }
  .tcs-intro--stack .tcs-stack-cols { flex-direction: row; justify-content: space-between; gap: 6vw; margin-top: 3vw; padding-top: 3vw; }
  .tcs-intro--stack .tcs-tagline { flex: 0 1 40%; font-size: clamp(30px, 3vw, 58px); }
  .tcs-stack-cols > div { flex: 0 1 46%; }
  .tcs-stack-cols .tcs-stack-headline { font-size: clamp(18px, 1.6vw, 30px); }

  .tcs-rows { gap: 7vw; }
  .tcs-row { flex-direction: row; align-items: center; gap: 6vw; }
  .tcs-row > * { flex: 1; min-width: 0; }
  .tcs-row-steps p { font-size: clamp(14px, 1.15vw, 20px); }

  .tcs-showcase-frame { width: 78%; }
  .tcs-showcase-art { width: 34%; inset: auto 2% -8% auto; }
  .tcs-twocol-grid { grid-template-columns: 1fr 1fr; gap: 5vw; margin-top: 3vw; }

  .tcs-circuit-list { padding: 0; }
  .tcs-circuit-node { inset-inline-start: calc(-6vw - 6px); }

  .tcs-pipe-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .tcs-pipe-col { flex: none; }
  .tcs-pipe-card p { font-size: clamp(13px, .95vw, 17px); }

  .tcs-time-list { gap: 0; padding: 0; }
  .tcs-time-list::before { inset-inline-start: 50%; }
  .tcs-time-list li { width: 50%; padding-block: 1.4vw; padding-inline: 0 4vw; text-align: end; }
  .tcs-time-list li:nth-child(even) { margin-inline-start: 50%; padding-inline: 4vw 0; text-align: start; }
  .tcs-time-dot { inset-inline-start: auto; inset-inline-end: -7px; top: 2.2vw; }
  .tcs-time-list li:nth-child(even) .tcs-time-dot { inset-inline-start: -6px; inset-inline-end: auto; }
  .tcs-time-list li:nth-child(odd) .tcs-time-status { margin-inline-start: auto; }
  .tcs-time-card p { font-size: clamp(15px, 1.2vw, 21px); }

  .tcs-stairs-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4vw; align-items: end; }
  .tcs-stairs-list li { flex-direction: column; gap: 1.4vw; }
  .tcs-stair-block { width: 100%; height: calc(8vw + var(--step) * 4.5vw); align-items: flex-start; padding: 1.2vw; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--tcs-color), color-mix(in srgb, var(--tcs-color) calc(30% + var(--step) * 12%), #0b042a)); transform-origin: bottom; }
  .tcs-stair-block span { font-size: clamp(22px, 2.2vw, 40px); }
  .tcs-stair-text h3 { font-size: clamp(18px, 1.5vw, 28px); }
  .tcs-stair-text p { font-size: clamp(13px, .95vw, 17px); }

  .tcs-funnel-bar { grid-template-columns: 6vw 14vw 1fr; align-items: center; width: calc(100% - var(--step) * 8%); padding: 1.6vw 2.6vw; }
  .tcs-funnel-num { grid-row: auto; font-size: clamp(28px, 2.6vw, 48px); }
  .tcs-funnel-bar h3 { font-size: clamp(18px, 1.6vw, 30px); }
  .tcs-funnel-bar p { font-size: clamp(13px, 1vw, 18px); }

  .tcs-collage { gap: 4vw; }
  .tcs-collage-grid { grid-template-columns: 1fr 1.9fr; gap: 2vw; align-items: stretch; }
  .tcs-collage-side { justify-content: space-between; }
  .tcs-collage-main { min-height: 0; aspect-ratio: 16 / 10.5; }
  .tcs-collage-img { width: 96%; top: 6%; inset-inline-end: -10%; }
  .tcs-collage-glass { inset: auto auto 6% 6%; width: 52%; padding: 2vw; }
  [dir='rtl'] .tcs-collage-glass { inset: auto 6% 6% auto; }
  .tcs-collage-glass .tcs-dots li { font-size: clamp(13px, 1vw, 18px); }

  .tcs-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6vw; }
  .tcs-cards-grid li { min-height: 15vw; padding: 2.2vw; gap: 3vw; }
  .tcs-cards-grid h3 { font-size: clamp(18px, 1.5vw, 28px); }

  .tcs-orb { flex-direction: row; align-items: center; gap: 6vw; }
  .tcs-orb-text { flex: 1; }
  .tcs-orb-diagram { flex: 0 0 38vw; width: auto; }
  .tcs-orb-list li { font-size: clamp(16px, 1.3vw, 24px); }
  .tcs-orb-core { font-size: clamp(14px, 1.4vw, 26px); }

  .tcs-grid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tcs-grid-list li { min-height: 16vw; padding: 2.4vw; gap: 3vw; }
  .tcs-grid-num { font-size: clamp(44px, 4.4vw, 84px); }
  .tcs-grid-list h3 { font-size: clamp(17px, 1.4vw, 26px); }
  .tcs-grid-list .tcs-arrow { bottom: 2.4vw; inset-inline-end: 2.4vw; }

  .tcs-check { flex-direction: row; align-items: flex-start; gap: 6vw; }
  .tcs-check-head { position: sticky; top: 8rem; flex: 0 0 34%; }
  .tcs-check-list { flex: 1; }
  .tcs-check-list li { padding: 1.4vw 0; }
  .tcs-check-text { font-size: clamp(17px, 1.5vw, 28px); }

  .tcs-pills-cloud { gap: 14px; max-width: 1100px; margin-inline: auto; }
  .tcs-pills-cloud li { font-size: clamp(18px, 1.9vw, 34px); }

  .tcs-profiles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6vw; }
  .tcs-profiles-grid li { padding: 2.6vw 2vw; }
  .tcs-profile-avatar { width: 76px; height: 76px; }
  .tcs-profiles-grid h3 { font-size: clamp(16px, 1.3vw, 24px); }

  .tcs-conclusion { flex-direction: row; align-items: center; gap: 4vw; }
  .tcs-conclusion-visual { flex: 1.3; padding-block: 3vw; }
  .tcs-conclusion-text { flex: 1; }

  .tcs-impact { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 6vw; }
  .tcs-impact > h2 { flex: 0 0 34%; }
  .tcs-impact > div { flex: 0 1 52%; }
  .tcs-closing { flex-direction: row; align-items: flex-start; gap: 3vw; }
  .tcs-closing-rule { flex: none; margin-top: 2.2vw; width: 6vw; }
  .tcs-closing p { font-size: clamp(40px, 5vw, 96px); }

  .tcs-metrics-grid { grid-template-columns: 1fr 1fr 2fr; gap: 3vw; margin-top: 3vw; }
  .tcs-metrics-col { gap: 2.4vw; }
  .tcs-metrics-lead { min-height: 6.5em; font-size: clamp(17px, 1.5vw, 28px); }
  .tcs-metric span { font-size: clamp(30px, 2.5vw, 48px); }
  .tcs-metric p { font-size: clamp(14px, 1.1vw, 20px); }
  .tcs-metrics-visual { padding: 3vw 2vw; }

  .tcs-ach-grid { grid-template-columns: 1fr 1fr; gap: 2vw; }
  .tcs-ach-grid li { min-height: 22vw; padding: 3vw; }
  .tcs-ach-grid h3 { font-size: clamp(24px, 2.4vw, 46px); }

  .tcs-lines-list li { padding: 2.2vw 0; gap: 3vw; }
  .tcs-lines-list h3 { font-size: clamp(28px, 3.4vw, 64px); }
  .tcs-lines-list li > span { font-size: clamp(13px, .9vw, 16px); }

  .tcs-band { padding-block: 6vw; }
  .tcs-band-head { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 4vw; }
  .tcs-band-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tcs-band-list li { padding: 0 2vw; border-top: 0; border-inline-start: 1px solid rgb(255 255 255 / .25); }
  .tcs-band-list li:first-child { padding-inline-start: 0; border: 0; }
  .tcs-band-list span { font-size: clamp(36px, 3.4vw, 64px); }
  .tcs-band-list p { font-size: clamp(17px, 1.4vw, 26px); }

  .tcs-bars-chart { gap: 2vw; padding-top: 2vw; }
  .tcs-bar { height: calc(9vw + var(--step) * 5vw); }
  .tcs-bar span { font-size: clamp(22px, 2vw, 38px); }
  .tcs-bars-chart p { font-size: clamp(15px, 1.25vw, 23px); }

  .tcs-quote { gap: 3vw; }
  .tcs-quote blockquote { padding: 4vw 0 0 8vw; }
  [dir='rtl'] .tcs-quote blockquote { padding: 4vw 8vw 0 0; }
  .tcs-quote blockquote > span { top: -2vw; font-size: clamp(140px, 14vw, 260px); }
  .tcs-quote blockquote p { font-size: clamp(44px, 5.4vw, 104px); }
  .tcs-quote-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4vw; }
  .tcs-quote-list li { padding: 2.2vw; min-height: 13vw; justify-content: space-between; }
  .tcs-quote-list p { font-size: clamp(16px, 1.35vw, 25px); }
}

@media (min-width: 1024px) {
  .tcs-zig-map { position: relative; display: block; height: 19vw; margin: 0 -13vw 4vw; }
  .tcs-zig-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  [dir='rtl'] .tcs-zig-lines { transform: scaleX(-1); }
  .tcs-zig-lines polyline { fill: none; stroke: rgb(255 255 255 / .4); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .tcs-zig-faint { fill: none; stroke: rgb(255 255 255 / .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .tcs-zig-nodes li { position: absolute; top: var(--y); inset-inline-start: var(--x); display: flex; flex-direction: column; gap: .3rem; padding-top: 1.4vw; }
  .tcs-zig-dot { position: absolute; top: -8px; inset-inline-start: -8px; width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: var(--tcs-accent); box-shadow: 0 0 16px 5px var(--tcs-accent); }
  .tcs-zig-num { margin-inline-start: -.1em; font-family: Rajdhani, sans-serif; font-size: clamp(26px, 2.2vw, 42px); font-weight: 500; line-height: 1; }
  .tcs-zig-stage { font-family: Rajdhani, sans-serif; font-size: clamp(12px, .9vw, 16px); font-weight: 700; text-transform: uppercase; }
  .tcs-zig-nodes li:last-child { inset-inline-start: auto; inset-inline-end: calc(100% - var(--x)); align-items: flex-end; text-align: end; }
  .tcs-zig-nodes li:last-child .tcs-zig-dot { inset-inline-start: auto; inset-inline-end: -8px; }
  .tcs-zig-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6vw; }
  .tcs-zig-cards li { padding: 2vw; }
  .tcs-zig-cards h3 { font-size: clamp(17px, 1.3vw, 24px); }
  .tcs-zig-cards p { font-size: clamp(13px, .95vw, 17px); }

  .tcs-circuit-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4vw; }
  .tcs-circuit-list::before { top: 50%; bottom: auto; inset-inline: 0; width: auto; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--tcs-accent) 20%, transparent), var(--tcs-accent), color-mix(in srgb, var(--tcs-accent) 20%, transparent)); }
  .tcs-circuit-list li { display: grid; grid-template-rows: 1fr 4vw 1fr; }
  .tcs-circuit-node { position: relative; top: auto; inset-inline-start: auto; grid-row: 2; align-self: center; justify-self: center; }
  .tcs-circuit-card { grid-row: 1; align-self: end; position: relative; }
  .tcs-circuit-list li:nth-child(even) .tcs-circuit-card { grid-row: 3; align-self: start; }
  .tcs-circuit-card::after { content: ''; position: absolute; top: 100%; left: 50%; width: 1px; height: calc(2vw - 7px); background: var(--tcs-accent); }
  .tcs-circuit-list li:nth-child(even) .tcs-circuit-card::after { top: auto; bottom: 100%; }
  .tcs-circuit-card h3 { font-size: clamp(18px, 1.4vw, 26px); }
  .tcs-circuit-card p { font-size: clamp(13px, .95vw, 17px); }
}

.tcs-quote-list .tcs-detail-copy {
  color: rgb(255 255 255 / .78);
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 400;
  line-height: 1.45;
}
.tcs--spotlight .tcs-quote-list .tcs-detail-card .tcs-detail-copy {
  position: relative; z-index: 1; display: block; max-height: none; overflow: visible;
  opacity: 1; transform: none; -webkit-line-clamp: unset; transition: none;
}