/* ==========================================================================
   Tridhya Tech — New Homepage (static build)
   Design tokens and sections mirror the Next.js redesign.
   All rules are scoped under .tridhya-homepage for WordPress integration:
   enqueue this file on the homepage only.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens + scoped reset ---------- */
.tridhya-homepage {
  --th-ink: #0d3a54;
  --th-ink-soft: #3d4658;
  --th-paper: #f4f5f7;
  --th-white: #ffffff;
  --th-petro: #00517c;
  --th-petro-deep: #003a5c;
  --th-petro-tint: #e3eef5;
  --th-aqua: #06b6e8;
  --th-aqua-tint: #e0f6fe;
  --th-mist: #eaedf2;
  --th-hairline: #d8dde6;
  --th-font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --th-font-body: 'Inter', system-ui, sans-serif;
  --th-container: 1320px;
  --th-ease: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: var(--th-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--th-ink);
  background: var(--th-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tridhya-homepage *,
.tridhya-homepage *::before,
.tridhya-homepage *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* scoped wrapper — live header/footer sit outside and are untouched */
.tridhya-homepage img,
.tridhya-homepage video {
  display: block;
  max-width: 100%;
}
.tridhya-homepage a {
  color: inherit;
  text-decoration: none;
}
.tridhya-homepage button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.tridhya-homepage ul,
.tridhya-homepage ol {
  list-style: none;
}
.tridhya-homepage ::selection {
  background: rgba(6, 182, 232, 0.25);
}
.tridhya-homepage :focus-visible {
  outline: 2px solid var(--th-aqua);
  outline-offset: 3px;
  border-radius: 4px;
}
.tridhya-homepage html {
  scroll-behavior: smooth;
}

/* ---------- Layout helpers ---------- */
.th-container {
  max-width: var(--th-container);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 640px) {
  .th-container {
    padding-inline: 32px;
  }
}
.th-icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Section rhythm */
.th-hero,
.th-stats,
.th-services,
.th-work,
.th-industries,
.th-why,
.th-voices,
.th-faq,
.th-cta,
.th-contact {
  position: relative;
}
.th-stats,
.th-faq {
  padding-block: 80px;
}
.th-services,
.th-industries,
.th-contact {
  padding-block: 96px;
  background: var(--th-white);
}
.th-work,
.th-why {
  padding-block: 96px;
  background: var(--th-paper);
}
.th-voices,
.th-cta {
  background: var(--th-ink);
  color: #f4f5f7;
  padding-block: 112px;
}
@media (min-width: 1024px) {
  .th-stats,
  .th-faq {
    padding-block: 96px;
  }
  .th-services,
  .th-industries,
  .th-contact,
  .th-work,
  .th-why {
    padding-block: 144px;
  }
  .th-voices,
  .th-cta {
    padding-block: 144px;
  }
}

/* Section header pattern (title left, support right) */
.th-section-head {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .th-section-head {
    grid-template-columns: repeat(12, 1fr);
  }
  .th-section-head > h2 {
    grid-column: span 7;
  }
  .th-section-head > div {
    grid-column: span 5;
    align-self: end;
  }
}
.th-section-head h2 {
  font-family: var(--th-font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: inherit;
}
.th-section-head p {
  max-width: 448px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--th-ink-soft);
}

/* ---------- Buttons ---------- */
.th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  padding: 16px 28px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.th-btn .th-icon {
  font-size: 16px;
  transition: transform 0.2s ease;
}
.th-btn:hover .th-icon {
  transform: translate(2px, -2px);
}
.th-btn--aqua {
  background: var(--th-aqua);
  color: var(--th-ink);
}
.th-btn--aqua:hover {
  background: var(--th-paper);
}
.th-btn--petro {
  background: var(--th-petro);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 81, 124, 0.2);
}
.th-btn--petro:hover {
  background: var(--th-petro-deep);
}
.th-btn--ghost-light {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f4f5f7;
}
.th-btn--ghost-light:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
}
.th-btn--ghost-dark {
  border: 1px solid var(--th-hairline);
  background: #fff;
  color: var(--th-ink);
}
.th-btn--ghost-dark:hover {
  border-color: var(--th-petro);
  color: var(--th-petro);
}

/* Text link with arrow */
.th-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--th-petro);
}
.th-arrow-link .th-icon {
  font-size: 16px;
  transition: transform 0.2s ease;
}
.th-arrow-link:hover .th-icon {
  transform: translate(2px, -2px);
}

/* ---------- Header ---------- */
.th-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.th-header.is-scrolled {
  background: #fff;
  border-bottom-color: var(--th-hairline);
  box-shadow: 0 1px 24px rgba(6, 11, 20, 0.06);
}
.th-header__inner {
  max-width: var(--th-container);
  margin-inline: auto;
  padding-inline: 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f4f5f7;
  transition: color 0.3s ease;
}
@media (min-width: 640px) {
  .th-header__inner {
    padding-inline: 32px;
  }
}
@media (min-width: 1024px) {
  .th-header__inner {
    height: 76px;
  }
}
.th-header.is-scrolled .th-header__inner {
  color: var(--th-ink);
}
.th-logo img {
  height: 32px;
  width: auto;
  transition: filter 0.3s ease;
}
.th-header.is-scrolled .th-logo img {
  filter: none;
}
.th-header:not(.is-scrolled) .th-logo img {
  filter: brightness(0) invert(1);
}
.th-nav {
  display: none;
  align-items: center;
  gap: 32px;
}
@media (min-width: 1024px) {
  .th-nav {
    display: flex;
  }
}
.th-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(244, 245, 247, 0.7);
  transition: color 0.2s ease;
}
.th-header.is-scrolled .th-nav a {
  color: var(--th-ink-soft);
}
.th-nav a:hover {
  color: #f4f5f7;
}
.th-header.is-scrolled .th-nav a:hover {
  color: var(--th-ink);
}
.th-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.th-header__cta {
  display: none;
}
@media (min-width: 640px) {
  .th-header__cta {
    display: inline-flex;
  }
}
.th-header:not(.is-scrolled) .th-header__cta {
  background: #f4f5f7;
  color: var(--th-ink);
}
.th-header:not(.is-scrolled) .th-header__cta:hover {
  background: var(--th-aqua);
}
.th-header.is-scrolled .th-header__cta {
  background: var(--th-petro);
  color: #fff;
}
.th-header.is-scrolled .th-header__cta:hover {
  background: var(--th-petro-deep);
}
.th-header__cta {
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.th-header__cta .th-icon {
  font-size: 16px;
  transition: transform 0.2s ease;
}
.th-header__cta:hover .th-icon {
  transform: translate(2px, -2px);
}
.th-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 20px;
  transition: background-color 0.2s ease;
}
.th-header:not(.is-scrolled) .th-burger:hover {
  background: rgba(255, 255, 255, 0.1);
}
.th-header.is-scrolled .th-burger:hover {
  background: rgba(13, 58, 84, 0.05);
}
@media (min-width: 1024px) {
  .th-burger {
    display: none;
  }
}

/* Mobile menu */
.th-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--th-ink);
  color: #f4f5f7;
  display: none;
}
.th-mobile-menu.is-open {
  display: block;
}
.th-mobile-menu__bar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 20px;
}
.th-mobile-menu__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 20px;
}
.th-mobile-menu nav {
  margin-top: 32px;
  padding-inline: 20px;
}
.th-mobile-menu nav a {
  display: block;
  padding-block: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--th-font-display);
  font-size: 1.875rem;
  font-weight: 600;
  color: #f4f5f7;
}
.th-mobile-menu .th-logo img {
  filter: brightness(0) invert(1);
}

/* ---------- Hero ---------- */
.th-hero {
  overflow: hidden;
  background: var(--th-ink);
  color: #f4f5f7;
}
.th-hero__media {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: min(100svh, 100vh);
  min-height: 640px;
  overflow: hidden;
}
.th-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
.th-hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 58, 84, 0.8), rgba(13, 58, 84, 0.55), var(--th-ink));
}
.th-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(43, 61, 89, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43, 61, 89, 0.35) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.4;
}
.th-hero__glow {
  position: absolute;
  right: -160px;
  top: 25%;
  width: 540px;
  height: 540px;
  border-radius: 999px;
  background: rgba(6, 182, 232, 0.1);
  filter: blur(140px);
}
.th-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: 144px;
  padding-bottom: 40px;
}
@media (min-width: 1024px) {
  .th-hero__content {
    padding-bottom: 56px;
  }
}
.th-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(244, 245, 247, 0.6);
  margin-bottom: 28px;
  opacity: 0;
  animation: th-fade-in 0.7s ease 0.1s forwards;
}
.th-pulse {
  position: relative;
  width: 6px;
  height: 6px;
  flex: none;
}
.th-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(6, 182, 232, 0.6);
  animation: th-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.th-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--th-aqua);
}
@keyframes th-ping {
  75%, 100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
.th-hero__title {
  font-family: var(--th-font-display);
  font-weight: 700;
  font-size: clamp(2.9rem, 7.4vw, 6.75rem);
  line-height: 0.99;
  letter-spacing: -0.035em;
}
.th-hero__title .th-l {
  display: block;
  overflow: hidden;
  padding-bottom: 4px;
}
.th-hero__title .th-l > span {
  display: block;
  transform: translateY(110%);
  animation: th-line-rise 0.9s var(--th-ease) forwards;
}
.th-hero__title .th-l:nth-child(1) > span {
  animation-delay: 0.15s;
}
.th-hero__title .th-l:nth-child(2) > span {
  animation-delay: 0.27s;
}
.th-hero__title .th-l:nth-child(3) > span {
  animation-delay: 0.39s;
}
.th-hero__title .th-accent {
  color: var(--th-aqua);
}
@keyframes th-line-rise {
  to {
    transform: translateY(0);
  }
}
@keyframes th-fade-in {
  to {
    opacity: 1;
  }
}
.th-hero__lead {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 36px;
  opacity: 0;
  transform: translateY(18px);
  animation: th-rise-in 0.7s var(--th-ease) 0.55s forwards;
}
@keyframes th-rise-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1024px) {
  .th-hero__lead {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.th-hero__sub {
  max-width: 576px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(244, 245, 247, 0.65);
}
@media (min-width: 640px) {
  .th-hero__sub {
    font-size: 1.125rem;
  }
}
.th-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  .th-hero__ctas {
    flex-direction: row;
  }
}
.th-hero__proof {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 28px;
  margin-top: 56px;
  opacity: 0;
  animation: th-fade-in 0.8s ease 0.75s forwards;
}
@media (min-width: 1024px) {
  .th-hero__proof {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.th-hero__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
}
.th-hero__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.th-hero__stat strong {
  font-family: var(--th-font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  letter-spacing: -0.02em;
}
.th-hero__stat span {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(244, 245, 247, 0.5);
}
.th-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}
.th-hero__badges img {
  height: 26px;
  width: auto;
}

/* Marquee */
.th-marquee {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--th-ink);
  padding-block: 36px;
}
@media (min-width: 1024px) {
  .th-marquee {
    padding-block: 44px;
  }
}
.th-marquee__label {
  margin-bottom: 28px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(244, 245, 247, 0.4);
}
.th-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.th-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 24px;
}
/* JS adds .is-looping only after cloning enough sets and publishing
   --th-marquee-shift, so the loop can never run with bad geometry. */
.th-marquee__track.is-looping {
  animation: th-marquee 42s linear infinite;
}
.th-marquee__viewport:hover .th-marquee__track {
  animation-play-state: paused;
}
.th-marquee__track img {
  height: 56px;
  width: auto;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
@media (min-width: 1024px) {
  .th-marquee__track img {
    height: 64px;
  }
  .th-marquee__track {
    gap: 24px;
  }
}
.th-marquee__track img:hover {
  opacity: 1;
  filter: none;
}
@keyframes th-marquee {
  to {
    transform: translateX(calc(-1 * var(--th-marquee-shift, 50%)));
  }
}

/* ---------- Stats band ---------- */
.th-stats {
  background: var(--th-paper);
}
.th-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 0;
  border-block: 1px solid var(--th-hairline);
  padding-block: 48px;
}
@media (min-width: 640px) {
  .th-stats__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .th-stats__grid {
    grid-template-columns: repeat(6, 1fr);
    padding-block: 56px;
  }
}
.th-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid var(--th-hairline);
  padding-left: 20px;
}
.th-stat:first-child,
.th-stat:nth-child(3n + 1) {
  border-left: 0;
  padding-left: 0;
}
@media (min-width: 1024px) {
  .th-stat,
  .th-stat:nth-child(3n + 1) {
    border-left: 1px solid var(--th-hairline);
    padding-left: 32px;
  }
  .th-stat:first-child {
    border-left: 0;
    padding-left: 0;
  }
}
.th-stat strong {
  font-family: var(--th-font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--th-petro);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .th-stat strong {
    font-size: 3rem;
  }
}
@media (min-width: 1024px) {
  .th-stat strong {
    font-size: 3.4rem;
  }
}
.th-stat strong em {
  font-style: normal;
  color: var(--th-aqua);
}
.th-stat span {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--th-ink-soft);
}

/* ---------- Services ---------- */
.th-ai-band {
  display: grid;
  margin-top: 56px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--th-petro);
  color: #fff;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.th-ai-band:hover {
  background: var(--th-aqua);
  color: var(--th-ink);
}
@media (min-width: 640px) {
  .th-ai-band {
    grid-template-columns: 1fr 240px;
  }
}
@media (min-width: 1024px) {
  .th-ai-band {
    grid-template-columns: 1fr 320px;
  }
}
.th-ai-band__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 28px;
}
.th-ai-band__kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.25s ease;
}
.th-ai-band:hover .th-ai-band__kicker {
  color: rgba(13, 58, 84, 0.6);
}
.th-ai-band__title {
  font-family: var(--th-font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.th-ai-band__text {
  max-width: 448px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.25s ease;
}
.th-ai-band:hover .th-ai-band__text {
  color: rgba(13, 58, 84, 0.7);
}
.th-ai-band__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}
.th-ai-band__link .th-icon {
  font-size: 16px;
  transition: transform 0.2s ease;
}
.th-ai-band:hover .th-ai-band__link .th-icon {
  transform: translate(2px, -2px);
}
.th-ai-band__media {
  position: relative;
  min-height: 190px;
  display: none;
}
@media (min-width: 640px) {
  .th-ai-band__media {
    display: block;
  }
}
.th-ai-band__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.th-ai-band:hover .th-ai-band__media img {
  transform: scale(1.05);
}
.th-ai-band__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 81, 124, 0.6), transparent);
  transition: background 0.5s ease;
}
.th-ai-band:hover .th-ai-band__media::after {
  background: linear-gradient(to right, rgba(6, 182, 232, 0.4), transparent);
}

/* Accordion (services + FAQ) */
.th-acc {
  margin-top: 64px;
  border-top: 1px solid var(--th-hairline);
}
.th-acc__item {
  border-bottom: 1px solid var(--th-hairline);
}
.th-acc__btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 20px;
  padding-block: 28px;
  text-align: left;
}
@media (min-width: 640px) {
  .th-acc__btn {
    gap: 32px;
  }
}
.th-acc__num {
  font-family: var(--th-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(13, 58, 84, 0.35);
  transition: color 0.25s ease;
}
.th-acc__item.is-open .th-acc__num,
.th-acc__btn:hover .th-acc__num {
  color: var(--th-petro);
}
.th-acc__title {
  flex: 1;
  font-family: var(--th-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(13, 58, 84, 0.75);
  transition: color 0.25s ease;
}
@media (min-width: 640px) {
  .th-acc__title {
    font-size: 1.875rem;
  }
}
.th-acc__item.is-open .th-acc__title,
.th-acc__btn:hover .th-acc__title {
  color: var(--th-ink);
}
.th-acc__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--th-hairline);
  color: var(--th-ink-soft);
  font-size: 16px;
  transition: transform 0.3s var(--th-ease), background-color 0.3s ease,
    border-color 0.3s ease, color 0.3s ease;
}
.th-acc__btn:hover .th-acc__toggle {
  border-color: var(--th-ink);
}
.th-acc__item.is-open .th-acc__toggle {
  transform: rotate(45deg);
  background: var(--th-ink);
  border-color: var(--th-ink);
  color: var(--th-paper);
}
.th-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--th-ease);
}
.th-acc__item.is-open .th-acc__panel {
  grid-template-rows: 1fr;
}
.th-acc__panel-inner {
  overflow: hidden;
}
.th-acc__panel-grid {
  display: grid;
  gap: 24px;
  padding: 0 10px 36px 40px;
}
@media (min-width: 640px) {
  .th-acc__panel-grid {
    padding-left: 64px;
  }
}
@media (min-width: 1024px) {
  .th-acc__panel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
.th-acc__desc {
  max-width: 448px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--th-ink-soft);
}
.th-acc__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 1024px) {
  .th-acc__side {
    align-items: flex-end;
  }
}
.th-chips {
  display: flex;
  max-width: 384px;
  flex-wrap: wrap;
  gap: 8px;
}
@media (min-width: 1024px) {
  .th-chips {
    justify-content: flex-end;
  }
}
.th-chip {
  border-radius: 999px;
  border: 1px solid var(--th-hairline);
  background: #fff;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--th-ink-soft);
}

/* ---------- Approach (scroll-scrubbed video) ---------- */
.th-approach {
  background: var(--th-ink);
  color: #f4f5f7;
}
.th-approach__track {
  position: relative;
  height: 420vh;
}
.th-approach__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.th-approach__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.th-approach__wash {
  position: absolute;
  inset: 0;
  background: rgba(13, 58, 84, 0.7);
}
.th-approach__wash-2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--th-ink), rgba(13, 58, 84, 0.45) 50%, rgba(13, 58, 84, 0.75));
}
.th-approach__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(43, 61, 89, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43, 61, 89, 0.35) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.3;
}
/* intro overlay */
.th-approach__intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 20px;
  text-align: center;
  transition: opacity 0.5s var(--th-ease), transform 0.5s var(--th-ease);
}
.th-approach__intro.is-hidden {
  opacity: 0;
  transform: translateY(-24px);
  pointer-events: none;
}
.th-approach__intro .th-kicker {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(244, 245, 247, 0.6);
}
.th-approach__intro h2 {
  margin-top: 20px;
  max-width: 896px;
  font-family: var(--th-font-display);
  font-size: clamp(2.4rem, 5.6vw, 4.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.th-approach__intro h2 .th-accent {
  color: var(--th-aqua);
}
.th-approach__intro p {
  margin-top: 24px;
  max-width: 576px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(244, 245, 247, 0.65);
}
.th-approach__chips {
  margin-top: 36px;
  display: flex;
  max-width: 672px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.th-approach__chips .th-chip {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(13, 58, 84, 0.4);
  color: rgba(244, 245, 247, 0.8);
  backdrop-filter: blur(4px);
}
.th-approach__chips .th-dash {
  width: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.th-approach__hint {
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(244, 245, 247, 0.45);
}
.th-approach__hint::after {
  content: '';
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, var(--th-aqua), transparent);
}
/* step captions */
.th-approach__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.th-approach__stage-inner {
  width: 100%;
  max-width: var(--th-container);
  margin-inline: auto;
  padding-inline: 20px;
  padding-bottom: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
@media (min-width: 640px) {
  .th-approach__stage-inner {
    padding-inline: 32px;
  }
}
@media (min-width: 1024px) {
  .th-approach__stage-inner {
    padding-bottom: 112px;
  }
}
.th-step {
  max-width: 672px;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.45s var(--th-ease), transform 0.45s var(--th-ease);
  visibility: hidden;
  position: absolute;
}
.th-step.is-active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  position: relative;
}
.th-step__num {
  font-family: var(--th-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--th-aqua);
}
.th-step__num span {
  color: rgba(244, 245, 247, 0.4);
}
.th-step h3 {
  margin-top: 12px;
  font-family: var(--th-font-display);
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.th-step p {
  margin-top: 16px;
  max-width: 512px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(244, 245, 247, 0.75);
}
.th-step__proof {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(13, 58, 84, 0.4);
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(244, 245, 247, 0.85);
  backdrop-filter: blur(4px);
}
.th-step__proof::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--th-aqua);
}
/* step rail (desktop) */
.th-approach__rail {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
  flex: none;
}
@media (min-width: 1024px) {
  .th-approach__rail {
    display: flex;
  }
}
.th-approach__rail li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: rgba(244, 245, 247, 0.35);
  transition: color 0.5s ease;
}
.th-approach__rail li::before {
  content: '';
  width: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.5s ease, background-color 0.5s ease;
}
.th-approach__rail li.is-active {
  color: #f4f5f7;
}
.th-approach__rail li.is-active::before {
  width: 32px;
  background: var(--th-aqua);
}
/* bottom progress bar */
.th-approach__bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.th-approach__bar-row {
  max-width: var(--th-container);
  margin-inline: auto;
  height: 56px;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 640px) {
  .th-approach__bar-row {
    padding-inline: 32px;
  }
}
.th-approach__bar-label {
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 245, 247, 0.5);
}
.th-approach__bar-tag {
  font-family: var(--th-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(244, 245, 247, 0.5);
}
.th-approach__progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
}
.th-approach__progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(to right, var(--th-petro), var(--th-aqua), var(--th-aqua));
}
/* reduced-motion static fallback */
.th-approach--static .th-approach__track {
  height: auto;
}
.th-approach--static .th-approach__sticky {
  position: relative;
  height: auto;
}
.th-approach--static .th-approach__video,
.th-approach--static .th-approach__wash-2 {
  display: none;
}
.th-approach--static .th-approach__sticky {
  padding: 96px 0 0;
}
.th-approach--static .th-static-grid {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  margin: 56px auto 0;
  width: min(1280px, calc(100% - 40px));
  list-style: none;
}
.th-approach--static .th-static-grid > li > div {
  display: block;
}
@media (min-width: 640px) {
  .th-approach--static .th-static-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .th-approach--static .th-static-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.th-approach--static .th-static-grid li {
  background: var(--th-ink);
  padding: 28px;
}
.th-approach--static .th-static-grid .th-step__num {
  font-size: 0.875rem;
}
.th-approach--static .th-static-grid h3 {
  margin-top: 8px;
  font-size: 1.25rem;
}
.th-approach--static .th-static-grid p {
  font-size: 0.875rem;
  margin-top: 8px;
}
.th-approach--static .th-static-grid .th-step__proof {
  margin-top: 16px;
  border: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
  font-size: 0.75rem;
  color: rgba(244, 245, 247, 0.5);
}

/* ---------- Work (case studies) ---------- */
.th-work__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 640px) {
  .th-work__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.th-work__head h2 {
  font-family: var(--th-font-display);
  font-size: clamp(2.3rem, 4.6vw, 4.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.th-case-feat {
  display: grid;
  gap: 40px;
  border-top: 1px solid var(--th-hairline);
  padding-top: 40px;
  margin-top: 56px;
}
@media (min-width: 1024px) {
  .th-case-feat {
    grid-template-columns: repeat(12, 1fr);
    gap: 56px;
  }
  .th-case-feat__media {
    grid-column: span 8;
  }
  .th-case-feat__body {
    grid-column: span 4;
  }
}
.th-case-feat__frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--th-ink);
  display: block;
}
.th-case-feat__frame img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.7s ease;
}
@media (min-width: 640px) {
  .th-case-feat__frame img {
    aspect-ratio: 16 / 8;
  }
}
.th-case-feat__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 58, 84, 0.95), rgba(13, 58, 84, 0.3) 55%, rgba(13, 58, 84, 0.05));
}
.th-case-feat__badge {
  position: absolute;
  left: 28px;
  top: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(244, 245, 247, 0.9);
  backdrop-filter: blur(4px);
}
.th-case-feat__title {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  font-family: var(--th-font-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #f4f5f7;
}
@media (min-width: 640px) {
  .th-case-feat__title {
    font-size: 2.25rem;
  }
}
.th-case-feat__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.th-case-feat__meta h4,
.th-case-feat__metrics h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(13, 58, 84, 0.45);
}
.th-case-feat__meta p {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--th-ink-soft);
}
.th-case-feat__meta > div + div {
  margin-top: 24px;
}
.th-case-feat__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  border-top: 1px solid var(--th-hairline);
  padding-top: 32px;
}
.th-case-feat__metrics strong {
  font-family: var(--th-font-display);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--th-petro);
}
@media (min-width: 1024px) {
  .th-case-feat__metrics strong {
    font-size: 3.75rem;
  }
}
.th-case-feat__metrics p {
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--th-ink-soft);
}
/* supporting trio */
.th-cases {
  display: grid;
  gap: 56px 40px;
  border-top: 1px solid var(--th-hairline);
  padding-top: 56px;
  margin-top: 56px;
}
@media (min-width: 640px) {
  .th-cases {
    grid-template-columns: repeat(3, 1fr);
  }
}
.th-case {
  display: block;
}
.th-case__frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--th-mist);
  margin-bottom: 24px;
}
.th-case__frame img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.th-case:hover .th-case__frame img,
.th-case-feat:hover .th-case-feat__frame img {
  transform: scale(1.04);
}
.th-case__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(13, 58, 84, 0.5);
}
.th-case__meta .th-icon {
  font-size: 16px;
  color: rgba(13, 58, 84, 0.3);
  transition: transform 0.2s ease, color 0.2s ease;
}
.th-case:hover .th-case__meta .th-icon {
  transform: translate(2px, -2px);
  color: var(--th-petro);
}
.th-case h3 {
  margin-top: 12px;
  font-family: var(--th-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.th-case > p {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--th-ink-soft);
}
.th-case__metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 20px;
}
.th-case__metric strong {
  font-family: var(--th-font-display);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--th-petro);
}
.th-case__metric span {
  font-size: 0.8125rem;
  color: var(--th-ink-soft);
}

/* ---------- Industries filmstrip ---------- */
.th-film {
  display: none;
  height: 600px;
  gap: 12px;
  margin-top: 56px;
}
@media (min-width: 1024px) {
  .th-film {
    display: flex;
  }
}
.th-film__panel {
  position: relative;
  min-width: 0;
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--th-ink);
  transition: flex-grow 0.7s ease-out;
}
.th-film__panel:hover,
.th-film__panel:focus-visible {
  flex-grow: 2.9;
}
.th-film__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 0.7s ease, opacity 0.7s ease;
}
.th-film__panel:hover img,
.th-film__panel:focus-visible img {
  transform: scale(1.04);
  opacity: 1;
}
.th-film__dim {
  position: absolute;
  inset: 0;
  background: rgba(13, 58, 84, 0.45);
  transition: background-color 0.7s ease;
}
.th-film__panel:hover .th-film__dim,
.th-film__panel:focus-visible .th-film__dim {
  background: rgba(13, 58, 84, 0.2);
}
.th-film__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 58, 84, 0.95), rgba(13, 58, 84, 0.45) 55%, rgba(13, 58, 84, 0.1));
}
.th-film__num {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(13, 58, 84, 0.3);
  color: #f4f5f7;
  font-family: var(--th-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}
.th-film__arrow {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #f4f5f7;
  color: var(--th-ink);
  font-size: 16px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.th-film__panel:hover .th-film__arrow,
.th-film__panel:focus-visible .th-film__arrow {
  opacity: 1;
  transform: translateY(0);
}
.th-film__content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 24px;
  color: #f4f5f7;
}
.th-film__content h3 {
  font-family: var(--th-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.th-film__story {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-out 0.15s;
}
.th-film__panel:hover .th-film__story,
.th-film__panel:focus-visible .th-film__story {
  grid-template-rows: 1fr;
}
.th-film__story-inner {
  overflow: hidden;
}
.th-film__story p {
  max-width: 448px;
  padding-top: 12px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(244, 245, 247, 0.8);
}
.th-film__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.th-film__chips .th-chip {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(13, 58, 84, 0.75);
  color: #f4f5f7;
  backdrop-filter: blur(4px);
}
/* mobile stacked cards */
.th-film-cards {
  display: grid;
  gap: 20px;
  margin-top: 48px;
}
@media (min-width: 640px) {
  .th-film-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .th-film-cards {
    display: none;
  }
}
.th-film-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
}
.th-film-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.th-film-card:hover img {
  transform: scale(1.05);
}
.th-film-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 58, 84, 0.85), rgba(13, 58, 84, 0.25) 55%, transparent);
}
.th-film-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px;
  color: #f4f5f7;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.th-film-card__body h3 {
  font-family: var(--th-font-display);
  font-size: 1.125rem;
  font-weight: 600;
}
.th-film-card__body p {
  margin-top: 4px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(244, 245, 247, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.th-film-card__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(244, 245, 247, 0.15);
  color: #f4f5f7;
  font-size: 16px;
  flex: none;
  backdrop-filter: blur(4px);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.th-film-card:hover .th-film-card__go {
  background: var(--th-aqua);
  color: var(--th-ink);
}
/* index wall */
.th-index {
  margin-top: 56px;
}
.th-index > p {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(13, 58, 84, 0.45);
}
.th-index__grid {
  display: grid;
  gap: 0 40px;
  border-top: 1px solid var(--th-hairline);
  margin-top: 20px;
}
@media (min-width: 640px) {
  .th-index__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.th-index__row {
  position: relative;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--th-hairline);
  padding-block: 24px;
}
.th-index__row::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  background: rgba(227, 238, 245, 0.6);
  transition: transform 0.3s ease-out;
}
.th-index__row:hover::before {
  transform: scaleY(1);
}
.th-index__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.3s ease;
}
.th-index__row:hover .th-index__inner {
  transform: translateX(6px);
}
.th-index__num {
  font-family: var(--th-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(13, 58, 84, 0.3);
  transition: color 0.3s ease;
}
.th-index__row:hover .th-index__num {
  color: var(--th-petro);
}
.th-index__row h3 {
  margin-top: 4px;
  font-family: var(--th-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.th-index__row p {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--th-ink-soft);
}
.th-index__inner .th-icon {
  margin-top: 8px;
  font-size: 16px;
  color: var(--th-petro);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.th-index__row:hover .th-index__inner .th-icon {
  opacity: 1;
  transform: translate(0, 0);
}

/* ---------- Why Tridhya ---------- */
.th-why__grid {
  display: grid;
  gap: 40px;
  margin-top: 56px;
}
@media (min-width: 1024px) {
  .th-why__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 48px;
  }
  .th-why__photo {
    grid-column: span 5;
  }
  .th-why__matrix {
    grid-column: span 7;
  }
}
.th-why__photo-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .th-why__photo-frame {
    position: sticky;
    top: 112px;
  }
}
.th-why__photo-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .th-why__photo-frame img {
    aspect-ratio: 4 / 5;
  }
}
.th-why__photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 58, 84, 0.8), rgba(13, 58, 84, 0.1) 55%, transparent);
}
.th-why__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 24px;
  color: #f4f5f7;
}
.th-why__caption p {
  max-width: 280px;
  font-family: var(--th-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.th-why__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.th-why__tags .th-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(13, 58, 84, 0.4);
  color: #f4f5f7;
  backdrop-filter: blur(4px);
}
.th-why__matrix {
  display: grid;
  gap: 1px;
  background: var(--th-hairline);
  border: 1px solid var(--th-hairline);
  border-radius: 16px;
  overflow: hidden;
  align-self: start;
}
@media (min-width: 640px) {
  .th-why__matrix {
    grid-template-columns: 1fr 1fr;
  }
}
.th-why__cell {
  background: #fff;
  padding: 28px;
  transition: background-color 0.3s ease;
}
@media (min-width: 640px) {
  .th-why__cell {
    padding: 32px;
  }
}
.th-why__cell:hover {
  background: rgba(227, 238, 245, 0.4);
}
.th-why__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--th-petro-tint);
  color: var(--th-petro);
  font-size: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.th-why__cell:hover .th-why__icon {
  background: var(--th-petro);
  color: #fff;
}
.th-why__cell h3 {
  margin-top: 20px;
  font-family: var(--th-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}
.th-why__cell:hover h3 {
  color: var(--th-petro);
}
.th-why__cell p {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--th-ink-soft);
}

/* ---------- Voices (testimonial rotator) ---------- */
.th-voices {
  overflow: hidden;
}
.th-voices__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(43, 61, 89, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43, 61, 89, 0.35) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.2;
}
.th-voices__glow {
  position: absolute;
  left: -160px;
  top: 0;
  width: 480px;
  height: 480px;
  border-radius: 999px;
  background: rgba(6, 182, 232, 0.07);
  filter: blur(140px);
  transform: translateY(-40%);
}
.th-voices__inner {
  position: relative;
}
.th-voices__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.th-voices__top > p:first-child {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(244, 245, 247, 0.5);
}
.th-voices__counter {
  font-family: var(--th-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 245, 247, 0.5);
}
.th-voices__counter span {
  color: rgba(244, 245, 247, 0.3);
}
.th-voices__stage {
  position: relative;
  margin-top: 40px;
}
.th-voices__mark {
  position: absolute;
  top: -64px;
  left: -8px;
  font-family: var(--th-font-display);
  font-weight: 700;
  font-size: 11rem;
  line-height: 1;
  color: rgba(6, 182, 232, 0.1);
  user-select: none;
  pointer-events: none;
}
@media (min-width: 640px) {
  .th-voices__mark {
    top: -80px;
    left: -16px;
    font-size: 15rem;
  }
}
.th-quote {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--th-ease), transform 0.5s var(--th-ease);
  visibility: hidden;
}
.th-quote.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.th-quote > p {
  max-width: 1024px;
  font-family: var(--th-font-display);
  font-weight: 500;
  font-size: clamp(1.65rem, 3.6vw, 3.05rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #f4f5f7;
}
.th-quote footer {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
}
.th-quote__who {
  display: flex;
  align-items: center;
  gap: 16px;
}
.th-quote__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--th-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: #f4f5f7;
}
.th-quote__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #f4f5f7;
}
.th-quote__role {
  font-size: 0.875rem;
  color: rgba(244, 245, 247, 0.55);
}
.th-voices__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 32px;
  margin-top: 64px;
}
.th-voices__arrows {
  display: flex;
  gap: 12px;
}
.th-voices__arrows button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(244, 245, 247, 0.7);
  font-size: 20px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.th-voices__arrows button:hover {
  border-color: var(--th-aqua);
  color: var(--th-aqua);
}
.th-voices__bars {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 8px;
}
@media (min-width: 640px) {
  .th-voices__bars {
    gap: 12px;
  }
}
.th-voices__bars button {
  display: flex;
  align-items: center;
  height: 24px;
  width: 64px;
}
@media (min-width: 640px) {
  .th-voices__bars button {
    width: 96px;
  }
}
.th-voices__bar {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.th-voices__bar > i {
  position: absolute;
  inset: 0;
  display: block;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--th-aqua);
}
.th-voices__bar.is-done > i {
  transform: scaleX(1);
  background: rgba(255, 255, 255, 0.4);
}
.th-voices__bar.is-filling > i {
  transition: transform linear;
}

/* ---------- FAQ ---------- */
.th-faq__grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .th-faq__grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .th-faq__grid > h2 {
    grid-column: span 4;
  }
  .th-faq__grid > div {
    grid-column: span 8;
  }
}
.th-faq__grid h2 {
  font-family: var(--th-font-display);
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.th-faq .th-acc {
  margin-top: 0;
}
.th-faq .th-acc__title {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}
.th-faq .th-acc__btn {
  padding-block: 20px;
}
.th-faq .th-acc__toggle {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.th-faq .th-acc__panel-grid {
  padding: 0 10px 24px 0;
}
@media (min-width: 640px) {
  .th-faq .th-acc__panel-grid {
    padding-left: 0;
  }
}

/* ---------- CTA ---------- */
.th-cta {
  overflow: hidden;
}
.th-cta__glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 720px;
  height: 420px;
  border-radius: 999px;
  background: rgba(6, 182, 232, 0.1);
  filter: blur(140px);
  transform: translate(-50%, -50%);
}
.th-cta__inner {
  position: relative;
}
.th-cta h2 {
  max-width: 1024px;
  font-family: var(--th-font-display);
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #f4f5f7;
}
.th-cta h2 .th-accent {
  color: var(--th-aqua);
}
.th-cta__sub {
  margin-top: 28px;
  max-width: 576px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(244, 245, 247, 0.65);
}
@media (min-width: 640px) {
  .th-cta__sub {
    font-size: 1.125rem;
  }
}
.th-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
}
@media (min-width: 640px) {
  .th-cta__buttons {
    flex-direction: row;
  }
}
.th-cta__journey {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 80px;
}
@media (min-width: 640px) {
  .th-cta__journey {
    grid-template-columns: repeat(3, 1fr);
  }
}
.th-cta__journey div {
  background: var(--th-ink);
  padding: 24px 28px;
}
.th-cta__journey dt {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(244, 245, 247, 0.45);
}
.th-cta__journey dd {
  margin-top: 8px;
  font-family: var(--th-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f4f5f7;
}

/* ---------- Contact ---------- */
.th-contact__grid {
  display: grid;
  gap: 56px;
}
@media (min-width: 1024px) {
  .th-contact__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 64px;
  }
  .th-contact__intro {
    grid-column: span 5;
  }
  .th-contact__form-wrap {
    grid-column: span 7;
  }
}
.th-contact__intro h2 {
  font-family: var(--th-font-display);
  font-size: clamp(2.3rem, 4.2vw, 3.9rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.03em;
}
.th-contact__intro > p {
  margin-top: 24px;
  max-width: 384px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--th-ink-soft);
}
.th-contact__channels {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.th-contact__channels a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s ease;
}
.th-contact__channels a:hover {
  color: var(--th-petro);
}
.th-contact__channels span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--th-hairline);
  font-size: 16px;
  flex: none;
}
.th-form {
  border-radius: 24px;
  border: 1px solid var(--th-hairline);
  background: var(--th-paper);
  padding: 28px;
}
@media (min-width: 640px) {
  .th-form {
    padding: 40px;
  }
}
.th-form__row {
  display: grid;
  gap: 20px;
}
@media (min-width: 640px) {
  .th-form__row {
    grid-template-columns: 1fr 1fr;
  }
}
.th-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}
.th-form input,
.th-form textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--th-hairline);
  background: #fff;
  padding: 14px 16px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--th-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.th-form input::placeholder,
.th-form textarea::placeholder {
  color: rgba(13, 58, 84, 0.35);
}
.th-form input:focus,
.th-form textarea:focus {
  outline: none;
  border-color: var(--th-petro);
  box-shadow: 0 0 0 4px rgba(0, 81, 124, 0.1);
}
.th-form textarea {
  resize: none;
}
.th-form__field + .th-form__field {
  margin-top: 20px;
}
.th-form__submit {
  width: 100%;
  margin-top: 24px;
}
.th-form__note {
  margin-top: 16px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--th-ink-soft);
}
.th-form__success {
  display: none;
  min-height: 380px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.th-form.is-sent .th-form__body {
  display: none;
}
.th-form.is-sent .th-form__success {
  display: flex;
}
.th-form__success-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--th-petro);
  color: #fff;
  font-size: 24px;
}
.th-form__success h3 {
  margin-top: 24px;
  font-family: var(--th-font-display);
  font-size: 1.5rem;
  font-weight: 600;
}
.th-form__success p {
  margin-top: 12px;
  max-width: 384px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--th-ink-soft);
}
.th-form__success button {
  margin-top: 24px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--th-petro);
}

/* ---------- Footer ---------- */
.th-footer {
  background: var(--th-ink);
  color: #f4f5f7;
}
.th-footer__inner {
  max-width: var(--th-container);
  margin-inline: auto;
  padding: 80px 20px 40px;
}
@media (min-width: 640px) {
  .th-footer__inner {
    padding-inline: 32px;
  }
}
@media (min-width: 1024px) {
  .th-footer__inner {
    padding-top: 112px;
  }
}
.th-footer__grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 1024px) {
  .th-footer__grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .th-footer__brand {
    grid-column: span 4;
  }
  .th-footer__col {
    grid-column: span 2;
  }
}
.th-footer__brand p {
  margin-top: 20px;
  max-width: 384px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(244, 245, 247, 0.55);
}
.th-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
}
.th-footer__social a {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(244, 245, 247, 0.55);
  transition: color 0.2s ease;
}
.th-footer__social a:hover {
  color: #f4f5f7;
}
.th-footer__col h3 {
  font-size: 0.875rem;
  font-weight: 600;
}
.th-footer__col ul {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.th-footer__col a,
.th-footer__col li {
  font-size: 0.875rem;
  color: rgba(244, 245, 247, 0.55);
  transition: color 0.2s ease;
}
.th-footer__col a:hover {
  color: #f4f5f7;
}
.th-footer__offices {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 64px;
}
@media (min-width: 640px) {
  .th-footer__offices {
    grid-template-columns: repeat(3, 1fr);
  }
}
.th-footer__office {
  background: var(--th-ink);
  padding: 24px 28px;
}
.th-footer__office .th-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(244, 245, 247, 0.4);
}
.th-footer__office h4 {
  margin-top: 10px;
  font-family: var(--th-font-display);
  font-size: 1rem;
  font-weight: 600;
}
.th-footer__office h4 span {
  font-weight: 400;
  color: rgba(244, 245, 247, 0.5);
}
.th-footer__office p {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(244, 245, 247, 0.5);
}
.th-footer__more {
  margin-top: 16px;
  font-size: 0.75rem;
  color: rgba(244, 245, 247, 0.4);
}
.th-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 32px;
  margin-top: 56px;
  font-size: 0.75rem;
  color: rgba(244, 245, 247, 0.5);
}
@media (min-width: 640px) {
  .th-footer__bottom {
    flex-direction: row;
    align-items: center;
  }
}
.th-footer__bottom a {
  transition: color 0.2s ease;
}
.th-footer__bottom a:hover {
  color: #f4f5f7;
}
.th-footer__bottom nav {
  display: flex;
  gap: 24px;
}

/* ---------- Reveal on scroll ---------- */
.th-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--th-ease), transform 0.6s var(--th-ease);
}
.th-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tridhya-homepage *,
  .tridhya-homepage *::before,
  .tridhya-homepage *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tridhya-homepage .th-marquee__track {
    animation: none !important;
  }
  .tridhya-homepage .th-reveal {
    opacity: 1;
    transform: none;
  }
  .tridhya-homepage .th-hero__title .th-l > span,
  .tridhya-homepage .th-hero__eyebrow,
  .tridhya-homepage .th-hero__lead,
  .tridhya-homepage .th-hero__proof {
    transform: none;
    opacity: 1;
    animation: none;
  }
}

/* ---------- Industries v2 — six equal cards, single-screen section ---------- */
.th-industries {
  padding-block: 56px;
}
@media (min-width: 1024px) {
  .th-industries {
    padding-block: 64px;
  }
}
.th-ind-grid {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .th-ind-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  .th-ind-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.th-ind-card {
  display: block;
}
.th-ind-card__frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--th-mist);
}
.th-ind-card__frame img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.6s var(--th-ease);
}
.th-ind-card:hover .th-ind-card__frame img {
  transform: scale(1.05);
}
.th-ind-card__go {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(13, 58, 84, 0.55);
  color: #f4f5f7;
  font-size: 16px;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
.th-ind-card:hover .th-ind-card__go {
  opacity: 1;
  transform: translateY(0);
  background: var(--th-aqua);
  color: var(--th-ink);
}
.th-ind-card h3 {
  margin-top: 14px;
  font-family: var(--th-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--th-ink);
  transition: color 0.25s ease;
}
.th-ind-card:hover h3 {
  color: var(--th-petro);
}
.th-ind-card p {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--th-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Testimonials: client photo + company logo ---------- */
.th-quote__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--th-petro-tint);
  flex: none;
}
.th-quote__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.th-quote__monogram {
  font-style: normal;
  font-family: var(--th-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--th-petro);
}
.th-quote__logo {
  margin-left: auto;
  height: 30px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.th-quote:hover .th-quote__logo,
.th-quote__logo:hover {
  filter: none;
  opacity: 1;
}

/* ==========================================================================
   Density pass — every section fits a ~750px single-screen viewport
   (small laptop). Overrides above; later rules win at equal specificity.
   ========================================================================== */

/* ---- global rhythm ---- */
.tridhya-homepage .th-stats,
.tridhya-homepage .th-faq {
  padding-block: 52px;
}
.tridhya-homepage .th-services,
.tridhya-homepage .th-work,
.tridhya-homepage .th-why,
.tridhya-homepage .th-industries,
.tridhya-homepage .th-contact {
  padding-block: 56px;
}
.tridhya-homepage .th-voices,
.tridhya-homepage .th-cta {
  padding-block: 64px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-stats,
  .tridhya-homepage .th-faq { padding-block: 56px; }
  .tridhya-homepage .th-services,
  .tridhya-homepage .th-work,
  .tridhya-homepage .th-why,
  .tridhya-homepage .th-industries,
  .tridhya-homepage .th-contact { padding-block: 68px; }
  .tridhya-homepage .th-voices,
  .tridhya-homepage .th-cta { padding-block: 72px; }
}
.tridhya-homepage .th-section-head h2 {
  font-size: clamp(2.05rem, 4vw, 3.4rem);
}
.tridhya-homepage .th-section-head {
  gap: 20px;
}

/* ---- hero: full pitch inside one screen ---- */
.tridhya-homepage .th-hero__content {
  min-height: 0;
  padding-top: 108px;
  padding-bottom: 20px;
}
.tridhya-homepage .th-hero__eyebrow {
  margin-bottom: 16px;
}
.tridhya-homepage .th-hero__title {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
}
.tridhya-homepage .th-hero__lead {
  margin-top: 22px;
  gap: 20px;
}
.tridhya-homepage .th-hero__proof {
  margin-top: 26px;
  padding-top: 18px;
  gap: 14px;
}
.tridhya-homepage .th-hero__stat strong {
  font-size: 1.35rem;
}
.tridhya-homepage .th-marquee {
  padding-block: 22px;
}
.tridhya-homepage .th-marquee__label {
  margin-bottom: 14px;
}
.tridhya-homepage .th-marquee__track img {
  height: 44px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-marquee__track img { height: 52px; }
}
.tridhya-homepage .th-hero__btn,
.tridhya-homepage .th-hero__ctas .th-btn {
  padding: 13px 24px;
}

/* ---- stats band ---- */
.tridhya-homepage .th-stats__grid {
  padding-block: 32px;
  gap: 24px 0;
}
.tridhya-homepage .th-stat strong {
  font-size: clamp(2rem, 2.8vw, 2.6rem);
}
@media (min-width: 640px) {
  .tridhya-homepage .th-stat strong { font-size: 2.2rem; }
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-stat strong { font-size: 2.6rem; }
}

/* ---- services: compact index ---- */
.tridhya-homepage .th-acc {
  margin-top: 32px;
}
.tridhya-homepage .th-acc__btn {
  padding-block: 17px;
  gap: 14px;
}
.tridhya-homepage .th-acc__title {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}
.tridhya-homepage .th-acc__toggle {
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.tridhya-homepage .th-acc__panel-grid {
  padding: 0 8px 20px 36px;
  gap: 14px;
}
.tridhya-homepage .th-acc__desc {
  font-size: 0.9rem;
  max-width: 560px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-acc__panel-grid { padding-left: 46px; }
}
.tridhya-homepage .th-chips .th-chip {
  padding: 5px 12px;
}

/* ---- work: four equal proof cards ---- */
.th-work-grid {
  display: grid;
  gap: 18px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .th-work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1180px) {
  .th-work-grid { grid-template-columns: repeat(4, 1fr); }
}
.th-work-card {
  display: block;
}
.th-work-card__frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--th-mist);
}
.th-work-card__frame img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.6s var(--th-ease);
}
.th-work-card:hover .th-work-card__frame img {
  transform: scale(1.05);
}
.th-work-card__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(13, 58, 84, 0.5);
  color: rgba(244, 245, 247, 0.92);
  padding: 5px 11px;
  font-size: 0.68rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
}
.th-work-card__go {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(13, 58, 84, 0.55);
  color: #f4f5f7;
  font-size: 14px;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.th-work-card:hover .th-work-card__go {
  opacity: 1;
  transform: translateY(0);
  background: var(--th-aqua);
  color: var(--th-ink);
}
.th-work-card h3 {
  margin-top: 12px;
  font-family: var(--th-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--th-ink);
  transition: color 0.25s ease;
}
.th-work-card:hover h3 {
  color: var(--th-petro);
}
.th-work-card > p {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--th-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.th-work-card__metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px !important;
  display: flex;
}
.th-work-card__metric strong {
  font-family: var(--th-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--th-petro);
}
.th-work-card__metric span {
  font-size: 0.75rem;
  color: var(--th-ink-soft);
}

/* ---- industries: final squeeze ---- */
.tridhya-homepage .th-ind-grid {
  margin-top: 24px;
  gap: 16px;
}
.tridhya-homepage .th-ind-card h3 {
  margin-top: 10px;
  font-size: 1.05rem;
}
.tridhya-homepage .th-ind-card p {
  margin-top: 4px;
  font-size: 0.8rem;
}
.tridhya-homepage .th-ind-card__go {
  width: 34px;
  height: 34px;
  font-size: 14px;
  right: 12px;
  bottom: 12px;
}

/* ---- why: compact proof ---- */
.tridhya-homepage .th-why__grid {
  margin-top: 28px;
  gap: 24px;
}
.tridhya-homepage .th-why__photo-frame img {
  aspect-ratio: 4 / 3;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-why__photo-frame img { aspect-ratio: 1 / 1; }
}
.tridhya-homepage .th-why__caption p {
  font-size: 1rem;
  max-width: 240px;
}
.tridhya-homepage .th-why__cell {
  padding: 18px 20px;
}
.th-why__cell .th-why__icon {
  width: 38px;
  height: 38px;
  font-size: 17px;
  border-radius: 10px;
}
.th-why__cell h3 {
  margin-top: 12px;
  font-size: 1.02rem;
}
.th-why__cell p {
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- voices: tighter stage ---- */
.tridhya-homepage .th-voices__stage {
  margin-top: 24px;
}
.tridhya-homepage .th-quote > p {
  font-size: clamp(1.35rem, 3vw, 2.3rem);
}
.tridhya-homepage .th-quote footer {
  margin-top: 22px;
}
.tridhya-homepage .th-voices__controls {
  margin-top: 32px;
  padding-top: 22px;
}
.tridhya-homepage .th-voices__mark {
  font-size: 8rem;
  top: -44px;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-voices__mark { font-size: 10rem; top: -56px; }
}

/* ---- FAQ / CTA / contact squeeze ---- */
.tridhya-homepage .th-faq .th-acc__btn {
  padding-block: 14px;
}
.tridhya-homepage .th-cta h2 {
  font-size: clamp(2.2rem, 4.8vw, 4rem);
}
.tridhya-homepage .th-cta__buttons {
  margin-top: 24px;
}
.tridhya-homepage .th-cta__journey {
  margin-top: 36px;
}
.tridhya-homepage .th-cta__journey div {
  padding: 16px 22px;
}
.tridhya-homepage .th-contact__intro > p {
  margin-top: 14px;
}
.tridhya-homepage .th-contact__channels {
  margin-top: 22px;
}
.tridhya-homepage .th-form {
  padding: 22px;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-form { padding: 28px; }
}
.tridhya-homepage .th-form__field + .th-form__field {
  margin-top: 14px;
}
.tridhya-homepage .th-form textarea {
  rows: 3;
}
.tridhya-homepage .th-form__submit {
  margin-top: 16px;
  padding: 13px 24px;
}

/* ---- density fixes round 2 ---- */
.tridhya-homepage .th-industries {
  padding-block: 44px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-industries { padding-block: 48px; }
}
.tridhya-homepage .th-ind-grid {
  margin-top: 20px;
  gap: 14px;
}
.tridhya-homepage .th-ind-card__frame img {
  aspect-ratio: 2 / 1;
}
.tridhya-homepage .th-why {
  padding-block: 48px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-why { padding-block: 56px; }
}

/* ---- density round 3: unified compact headings ---- */
.tridhya-homepage .th-section-head h2,
.tridhya-homepage .th-work__head h2,
.tridhya-homepage .th-faq__grid h2,
.tridhya-homepage .th-contact__intro h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
}
.tridhya-homepage .th-faq__grid {
  gap: 24px;
}

/* industries: cap heading so it stays on one line within the 750px budget */
.tridhya-homepage .th-industries .th-section-head h2 {
  font-size: clamp(1.7rem, 2.4vw, 2.15rem);
  letter-spacing: -0.02em;
}

/* ============================================================
   PREMIUM POLISH PASS v1.7 — clean, modern, saleable (body content only;
   the live site header and footer stay untouched)
   1. Hero: signature gradient accent, CTAs anchored under copy,
      monochrome proof badges + marquee, calmer video bed
   2. Buttons with real presence (glow, lift)
   3. Restored heading presence + taller card imagery after density pass
   ============================================================ */

/* ---- 1. Hero ---- */
.tridhya-homepage .th-hero__media video {
  opacity: 0.14;
}
.tridhya-homepage .th-hero__media::before {
  background:
    radial-gradient(60% 50% at 18% 38%, rgba(13, 58, 84, 0.72), transparent 70%),
    linear-gradient(180deg, rgba(13, 58, 84, 0.55), rgba(13, 58, 84, 0.2) 40%, rgba(13, 58, 84, 0.82));
}
.tridhya-homepage .th-hero__glow {
  width: 640px;
  height: 640px;
  right: -220px;
  top: 18%;
  opacity: 0.55;
}

.tridhya-homepage .th-hero__eyebrow {
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(244, 245, 247, 0.14);
  border-radius: 999px;
  background: rgba(13, 58, 84, 0.35);
  backdrop-filter: blur(6px);
  color: rgba(244, 245, 247, 0.78);
  width: fit-content;
}

.tridhya-homepage .th-hero__title .th-accent {
  background: linear-gradient(92deg, var(--th-aqua) 0%, #7ad7f4 55%, #c9ecfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Lead stays a left-anchored column: sub, then CTAs right below it */
@media (min-width: 1024px) {
  .tridhya-homepage .th-hero__lead {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 26px;
  }
  .tridhya-homepage .th-hero__sub {
    max-width: 540px;
    font-size: 1.0625rem;
    line-height: 1.65;
  }
}
.tridhya-homepage .th-hero__ctas {
  flex-wrap: wrap;
}

/* Proof badges: real cert marks, sized individually (v3.7) */
.tridhya-homepage .th-hero__badges {
  gap: 26px;
  align-items: center;
}
.tridhya-homepage .th-hero__badges img {
  width: auto;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}
.tridhya-homepage .th-hero__badges img:hover {
  opacity: 1;
}

/* Marquee: clean white monochrome logos */
.tridhya-homepage .th-marquee__label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: rgba(244, 245, 247, 0.42);
}
.tridhya-homepage .th-marquee__viewport img {
  filter: grayscale(1) brightness(2.4);
  opacity: 0.5;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.tridhya-homepage .th-marquee__viewport img:hover {
  opacity: 0.95;
}

/* ---- 2. Buttons with presence ---- */
.tridhya-homepage .th-btn--aqua {
  box-shadow: 0 10px 28px rgba(6, 182, 232, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.25s var(--th-ease), box-shadow 0.25s var(--th-ease), background-color 0.25s var(--th-ease);
}
.tridhya-homepage .th-btn--aqua:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(6, 182, 232, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.tridhya-homepage .th-btn--ghost-light {
  border: 1px solid rgba(244, 245, 247, 0.22);
  background: rgba(244, 245, 247, 0.04);
  transition: transform 0.25s var(--th-ease), background-color 0.25s var(--th-ease), border-color 0.25s var(--th-ease);
}
.tridhya-homepage .th-btn--ghost-light:hover {
  transform: translateY(-2px);
  background: rgba(244, 245, 247, 0.1);
  border-color: rgba(244, 245, 247, 0.4);
}

/* ---- 3. Heading presence (post-density restore) ---- */
.tridhya-homepage .th-section-head h2,
.tridhya-homepage .th-work__head h2,
.tridhya-homepage .th-faq__grid h2 {
  font-size: clamp(2rem, 3.4vw, 3.05rem) !important;
  letter-spacing: -0.025em;
}
/* industries heading keeps its one-line cap (750px budget) */

/* Card imagery slightly taller for impact */
@media (min-width: 1024px) {
  .tridhya-homepage .th-ind-card__frame img {
    aspect-ratio: 16 / 9;
  }
  .tridhya-homepage .th-work-card__media img {
    aspect-ratio: 16 / 10;
  }
}

/* Marquee: soft fade at the edges instead of hard cuts */
.tridhya-homepage .th-marquee__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* ---- height budget corrections (keep one-screen sections) ---- */
/* Industries: keep the 750px one-screen budget with equal cards */
@media (min-width: 1024px) {
  .tridhya-homepage .th-ind-card__frame img {
    aspect-ratio: 2 / 1;
  }
  .tridhya-homepage .th-industries {
    padding-block: 38px;
  }
  .tridhya-homepage .th-ind-grid {
    margin-top: 18px;
    gap: 12px;
  }
}

/* Hero: tighten the lead column so the band stays lean */
.tridhya-homepage .th-hero__lead {
  margin-top: 28px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-hero__lead {
    gap: 20px;
  }
  .tridhya-homepage .th-hero__sub {
    line-height: 1.6;
  }
}

.tridhya-homepage .th-marquee__viewport img {
  opacity: 0.7;
}
.tridhya-homepage .th-hero__ctas {
  gap: 16px;
}

/* ============================================================
   UNIFIED SECTION RHYTHM v1.8 — one consistent vertical pace
   All content sections share the same top/bottom padding.
   Hero + marquee + stats strip remain structural bands.
   ============================================================ */
.tridhya-homepage .th-services,
.tridhya-homepage .th-work,
.tridhya-homepage .th-industries,
.tridhya-homepage .th-why,
.tridhya-homepage .th-voices,
.tridhya-homepage .th-faq,
.tridhya-homepage .th-cta {
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-services,
  .tridhya-homepage .th-work,
  .tridhya-homepage .th-industries,
  .tridhya-homepage .th-why,
  .tridhya-homepage .th-voices,
  .tridhya-homepage .th-faq,
  .tridhya-homepage .th-cta {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-services,
  .tridhya-homepage .th-work,
  .tridhya-homepage .th-industries,
  .tridhya-homepage .th-why,
  .tridhya-homepage .th-voices,
  .tridhya-homepage .th-faq,
  .tridhya-homepage .th-cta {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

/* Stats band joins the rhythm: 96px outside the hairlines,
   tighter 40px inside so the numbers stay a crisp strip */
.tridhya-homepage .th-stats {
  padding-top: 64px;
  padding-bottom: 64px;
}
.tridhya-homepage .th-stats__grid {
  padding-block: 40px;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-stats {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-stats {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .tridhya-homepage .th-stats__grid {
    padding-block: 40px;
  }
}

/* ============================================================
   HERO GRADIENT REFRESH v1.9 — video removed; minimal gradient
   bed + subtle micro-elements (dot grid, hairline rings, soft
   orb, cursor-tracking glow). Pointer-reactive via --th-mx/--th-my.
   Hero content joins the unified 96px rhythm.
   ============================================================ */

/* Base gradient bed (replaces video) */
.tridhya-homepage .th-hero {
  background:
    radial-gradient(1100px 760px at 78% 12%, rgba(6, 102, 158, 0.34) 0%, transparent 62%),
    radial-gradient(900px 680px at 8% 92%, rgba(0, 81, 124, 0.4) 0%, transparent 64%),
    linear-gradient(158deg, #0a0f1e 0%, #081426 52%, #0a1c31 100%);
}
.tridhya-homepage .th-hero__media,
.tridhya-homepage .th-hero__glow {
  display: none;
}

/* Decorative layer */
.tridhya-homepage .th-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Fine dot grid, fading out toward the bottom */
.tridhya-homepage .th-hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(244, 245, 247, 0.13) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
}

/* Concentric hairline rings — one quiet motif on the right */
.tridhya-homepage .th-hero__ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(244, 245, 247, 0.07);
  right: -180px;
  top: 50%;
  transform: translateY(-50%) translate(calc((var(--th-mx, 0.5) - 0.5) * 18px), calc((var(--th-my, 0.4) - 0.5) * 12px));
  will-change: transform;
}
.tridhya-homepage .th-hero__ring--1 {
  width: 560px;
  height: 560px;
}
.tridhya-homepage .th-hero__ring--2 {
  width: 780px;
  height: 780px;
  border-color: rgba(244, 245, 247, 0.045);
  transform: translateY(-50%) translate(calc((var(--th-mx, 0.5) - 0.5) * -26px), calc((var(--th-my, 0.4) - 0.5) * -18px));
}
.tridhya-homepage .th-hero__ring--1::after {
  content: "";
  position: absolute;
  top: 12%;
  right: 12%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--th-aqua);
  opacity: 0.7;
  box-shadow: 0 0 18px rgba(6, 182, 232, 0.8);
}

/* One soft aqua orb drifting slowly */
.tridhya-homepage .th-hero__orb {
  position: absolute;
  right: 6%;
  top: 18%;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(6, 182, 232, 0.16), rgba(6, 182, 232, 0.05) 55%, transparent 72%);
  filter: blur(2px);
  transform: translate(calc((var(--th-mx, 0.5) - 0.5) * 34px), calc((var(--th-my, 0.4) - 0.5) * 22px));
  animation: th-orb-drift 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes th-orb-drift {
  from { margin-top: 0; }
  to { margin-top: 34px; }
}

/* Cursor-tracking glow (lerped in JS) */
.tridhya-homepage .th-hero__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(6, 182, 232, 0.1) 0%, rgba(6, 182, 232, 0.04) 45%, transparent 70%);
  transform: translate(calc(var(--th-mx, 0.5) * 100% - 260px), calc(var(--th-my, 0.35) * 100% - 260px));
  will-change: transform;
}

/* Hero joins the 96px rhythm (top also clears the ~75px fixed nav) */
.tridhya-homepage .th-hero__content {
  padding-top: 176px;
  padding-bottom: 64px;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-hero__content {
    padding-top: 160px;
    padding-bottom: 80px;
  }
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-hero__content {
    padding-top: 171px; /* 75px fixed header + 96px rhythm */
    padding-bottom: 96px;
  }
}

/* Reduced motion: elements stay static */
@media (prefers-reduced-motion: reduce) {
  .tridhya-homepage .th-hero__orb { animation: none; }
  .tridhya-homepage .th-hero__ring,
  .tridhya-homepage .th-hero__orb,
  .tridhya-homepage .th-hero__cursor { transform: none; }
}

/* Hero: keep marquee above the fold — the marquee strip adds its
   own vertical space, so the content bottom rests at 56px */
@media (min-width: 1024px) {
  .tridhya-homepage .th-hero__content {
    padding-bottom: 56px;
  }
}

/* ============================================================
   HERO INTERACTIVE LAYER v2.0 — clearly visible mouse motion
   - CSS 3D wireframe globe (meridians + parallels + orbit node)
     that tilts/translates with the pointer via --th-mx/--th-my
   - Canvas dot grid: dots morph into "+" marks near the cursor
   - Brighter cursor glow
   ============================================================ */
.tridhya-homepage .th-hero__bg {
  perspective: 1100px;
}

/* Canvas dot grid replaces the static CSS dots once JS runs */
.tridhya-homepage .th-hero__grid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tridhya-homepage .th-hero.th-canvas-on .th-hero__dots {
  display: none;
}

/* ---- Wireframe globe ---- */
.tridhya-homepage .th-hero__globe {
  --gs: clamp(300px, 32vw, 460px);
  position: absolute;
  top: 50%;
  right: 3%;
  width: var(--gs);
  height: var(--gs);
  transform-style: preserve-3d;
  transform:
    translateY(-50%)
    translate(calc((var(--th-mx, 0.5) - 0.5) * 34px), calc((var(--th-my, 0.4) - 0.5) * 24px))
    rotateY(calc((var(--th-mx, 0.5) - 0.5) * 44deg))
    rotateX(calc((var(--th-my, 0.4) - 0.5) * -30deg));
  will-change: transform;
}
.tridhya-homepage .th-hero__globe-halo {
  position: absolute;
  inset: -22%;
  border-radius: 999px;
  background: radial-gradient(circle at 42% 38%, rgba(6, 182, 232, 0.14), rgba(6, 182, 232, 0.04) 52%, transparent 72%);
  transform: translateZ(-60px);
}
.tridhya-homepage .th-hero__globe-sphere {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: th-globe-spin 70s linear infinite;
}
@keyframes th-globe-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

/* Meridians (vertical rings) */
.tridhya-homepage .th-hero__globe-sphere .gm {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(154, 225, 248, 0.16);
  transform: rotateY(var(--ry, 0deg));
}
.tridhya-homepage .th-hero__globe-sphere .gm:first-child {
  border-color: rgba(6, 182, 232, 0.38);
}

/* Parallels (latitude rings at ±30°) */
.tridhya-homepage .th-hero__globe-sphere .gp {
  position: absolute;
  inset: 6.7%;
  border-radius: 50%;
  border: 1px solid rgba(154, 225, 248, 0.12);
  transform: rotateX(90deg) translateZ(calc(var(--gs) * 0.25));
}
.tridhya-homepage .th-hero__globe-sphere .gp--s {
  transform: rotateX(90deg) translateZ(calc(var(--gs) * -0.25));
}

/* Equator + orbiting node */
.tridhya-homepage .th-hero__globe-sphere .gq {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(6, 182, 232, 0.3);
  transform: rotateX(90deg);
}
.tridhya-homepage .th-hero__globe-sphere .gn {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 999px;
  background: var(--th-aqua);
  box-shadow: 0 0 14px rgba(6, 182, 232, 0.9), 0 0 34px rgba(6, 182, 232, 0.45);
}

/* Brighter cursor glow */
.tridhya-homepage .th-hero__cursor {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(6, 182, 232, 0.17) 0%, rgba(6, 182, 232, 0.06) 45%, transparent 70%);
  transform: translate(calc(var(--th-mx, 0.5) * 100% - 280px), calc(var(--th-my, 0.35) * 100% - 280px));
}

/* Old decorative elements retired */
.tridhya-homepage .th-hero__ring,
.tridhya-homepage .th-hero__orb {
  display: none;
}

@media (max-width: 1023px) {
  .tridhya-homepage .th-hero__globe {
    --gs: 240px;
    right: -6%;
    opacity: 0.7;
  }
}
@media (max-width: 639px) {
  .tridhya-homepage .th-hero__globe {
    display: none;
  }
}

/* Reduced motion: static scene */
@media (prefers-reduced-motion: reduce) {
  .tridhya-homepage .th-hero__globe-sphere { animation: none; }
  .tridhya-homepage .th-hero__globe { transform: translateY(-50%); }
}

/* ---- visibility boost: unmistakable but tasteful ---- */
.tridhya-homepage .th-hero__cursor {
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(6, 182, 232, 0.24) 0%, rgba(6, 182, 232, 0.09) 40%, transparent 68%);
  transform: translate(calc(var(--th-mx, 0.5) * 100% - 310px), calc(var(--th-my, 0.35) * 100% - 310px));
}
.tridhya-homepage .th-hero__globe-sphere .gm {
  border-color: rgba(154, 225, 248, 0.22);
}
.tridhya-homepage .th-hero__globe-sphere .gm:first-child {
  border-color: rgba(6, 182, 232, 0.45);
}
.tridhya-homepage .th-hero__globe-sphere .gq {
  border-color: rgba(6, 182, 232, 0.38);
}

/* ============================================================
   v2.1 — globe removed per feedback; back to minimal rings +
   orb, with clearly stronger pointer parallax so the mouse
   integration reads instantly. Dot-to-plus canvas + glow stay.
   ============================================================ */
.tridhya-homepage .th-hero__globe {
  display: none;
}

/* Rings + orb re-enabled with amplified, opposite-direction parallax */
.tridhya-homepage .th-hero__ring {
  display: block;
  opacity: 1;
}
.tridhya-homepage .th-hero__ring--1 {
  transform: translateY(-50%) translate(calc((var(--th-mx, 0.5) - 0.5) * 42px), calc((var(--th-my, 0.4) - 0.5) * 30px));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.tridhya-homepage .th-hero__ring--2 {
  transform: translateY(-50%) translate(calc((var(--th-mx, 0.5) - 0.5) * -58px), calc((var(--th-my, 0.4) - 0.5) * -40px));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.tridhya-homepage .th-hero__ring--1::after {
  content: "";
  position: absolute;
  top: 12%;
  right: 12%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--th-aqua);
  opacity: 0.75;
  box-shadow: 0 0 16px rgba(6, 182, 232, 0.85);
}

.tridhya-homepage .th-hero__orb {
  display: block;
  transform: translate(calc((var(--th-mx, 0.5) - 0.5) * 64px), calc((var(--th-my, 0.4) - 0.5) * 44px));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  animation: th-orb-drift 12s ease-in-out infinite alternate;
}
@keyframes th-orb-drift {
  from { margin-top: 0; }
  to { margin-top: 30px; }
}

/* Ring stroke slightly more present */
.tridhya-homepage .th-hero__ring {
  border-color: rgba(154, 225, 248, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .tridhya-homepage .th-hero__ring--1,
  .tridhya-homepage .th-hero__ring--2,
  .tridhya-homepage .th-hero__orb {
    transform: translateY(-50%);
    transition: none;
  }
  .tridhya-homepage .th-hero__orb { animation: none; }
}

/* reduced-motion fix: orb is not translateY-centered like the rings */
@media (prefers-reduced-motion: reduce) {
  .tridhya-homepage .th-hero__orb {
    transform: none;
  }
}

/* ============================================================
   v2.2 — marquee readability fix ("Trusted by global enterprises"
   was too dim). Clearer kicker label + stronger logos.
   ============================================================ */
.tridhya-homepage .th-marquee__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(244, 245, 247, 0.72);
  margin-bottom: 16px;
}
.tridhya-homepage .th-marquee__viewport img {
  filter: grayscale(1) brightness(2);
  opacity: 0.8;
}
.tridhya-homepage .th-marquee__viewport img:hover {
  opacity: 1;
}

/* ============================================================
   v2.3 — marquee: bigger client logos, original brand colors
   (monochrome filter removed)
   ============================================================ */
.tridhya-homepage .th-marquee__track img {
  height: 52px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-marquee__track img { height: 62px; }
}
.tridhya-homepage .th-marquee__viewport img {
  filter: none;
  opacity: 0.95;
}
.tridhya-homepage .th-marquee__viewport img:hover {
  opacity: 1;
}

/* ============================================================
   v2.4 — stats merged into services section (below accordion),
   strip background/borders removed
   ============================================================ */
.tridhya-homepage .th-stats__grid {
  border-block: none;
  padding-block: 0;
  margin-top: 56px;
}
@media (max-width: 1023px) {
  .tridhya-homepage .th-stats__grid {
    margin-top: 40px;
  }
}

/* ============================================================
   v2.5 — Industries redesigned: minimal editorial list
   Six typographic rows with hairline rules + one image panel
   that cross-fades to the hovered industry (no six photo cards).
   ============================================================ */
.tridhya-homepage .th-ind-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-ind-wrap {
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    margin-top: 48px;
    align-items: start;
  }
}

/* ---- Rows ---- */
.tridhya-homepage .th-ind-list {
  border-top: 1px solid var(--th-hairline);
}
.tridhya-homepage .th-ind-row {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr 26px;
  grid-template-areas:
    "num name go"
    "num desc go";
  column-gap: 16px;
  align-items: center;
  padding: 20px 8px 20px 12px;
  border-bottom: 1px solid var(--th-hairline);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s var(--th-ease), padding-left 0.3s var(--th-ease);
}
.tridhya-homepage .th-ind-row__num {
  grid-area: num;
  font-family: var(--th-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--th-hairline);
  transition: color 0.3s var(--th-ease);
}
.tridhya-homepage .th-ind-row__name {
  grid-area: name;
  font-family: var(--th-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--th-ink);
  transition: color 0.3s var(--th-ease);
}
.tridhya-homepage .th-ind-row__desc {
  grid-area: desc;
  margin-top: 5px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(13, 58, 84, 0.5);
  transition: color 0.3s var(--th-ease);
}
.tridhya-homepage .th-ind-row__go {
  grid-area: go;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--th-ink);
  opacity: 0.25;
  transform: translateX(-4px);
  transition: opacity 0.3s var(--th-ease), transform 0.3s var(--th-ease),
              background-color 0.3s var(--th-ease), color 0.3s var(--th-ease);
}
.tridhya-homepage .th-ind-row__go .th-icon {
  width: 14px;
  height: 14px;
}

@media (min-width: 1024px) {
  .tridhya-homepage .th-ind-row {
    grid-template-columns: 46px 1fr 32px;
    padding: 21px 10px 21px 14px;
  }
  .tridhya-homepage .th-ind-row__name {
    font-size: 1.5rem;
  }
}

/* Row hover / active */
.tridhya-homepage .th-ind-row:hover,
.tridhya-homepage .th-ind-row.is-on {
  background: linear-gradient(90deg, rgba(0, 81, 124, 0.05), rgba(0, 81, 124, 0) 65%);
  padding-left: 20px;
}
.tridhya-homepage .th-ind-row:hover .th-ind-row__name,
.tridhya-homepage .th-ind-row.is-on .th-ind-row__name {
  color: var(--th-petro);
}
.tridhya-homepage .th-ind-row:hover .th-ind-row__num,
.tridhya-homepage .th-ind-row.is-on .th-ind-row__num {
  color: var(--th-aqua);
}
.tridhya-homepage .th-ind-row:hover .th-ind-row__desc,
.tridhya-homepage .th-ind-row.is-on .th-ind-row__desc {
  color: rgba(13, 58, 84, 0.68);
}
.tridhya-homepage .th-ind-row:hover .th-ind-row__go,
.tridhya-homepage .th-ind-row.is-on .th-ind-row__go {
  opacity: 1;
  transform: translateX(0);
  background: var(--th-petro);
  color: #fff;
}

/* ---- Single image panel ---- */
.tridhya-homepage .th-ind-visual {
  display: none;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-ind-visual {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    background: var(--th-ink);
    box-shadow: 0 24px 60px rgba(13, 58, 84, 0.14);
  }
}
.tridhya-homepage .th-ind-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s var(--th-ease), transform 1.4s var(--th-ease);
}
.tridhya-homepage .th-ind-visual img.is-on {
  opacity: 1;
  transform: scale(1);
}
.tridhya-homepage .th-ind-visual__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 58, 84, 0) 45%, rgba(13, 58, 84, 0.35) 100%);
  pointer-events: none;
}

/* ---- industries: uniform single-line rows, tighter rhythm ---- */
@media (min-width: 1024px) {
  .tridhya-homepage .th-ind-row {
    padding: 15px 10px 15px 14px;
  }
  .tridhya-homepage .th-ind-visual {
    aspect-ratio: 1 / 1;
  }
  .tridhya-homepage .th-ind-row__desc {
    font-size: 0.8438rem;
  }
}

/* ============================================================
   v2.7 — UNIFIED EDITORIAL SECTION HEADERS
   Replaces the old "big sentence + right-aligned paragraph":
     · accent-dash kicker label  -> orientation
     · two-tone display heading  -> hierarchy (ink + muted tail)
     · support column top-aligned -> clean relationship
   (a full-width hairline rule was tried here and removed in v3.6)
   Applies to services, work, industries, why, faq, and the CTA.
   ============================================================ */

/* ---- Shell ---- */
.tridhya-homepage .th-section-head {
  display: grid;
  gap: 20px 64px;
  padding-top: 30px;
  border-top: 1px solid var(--th-hairline);
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-section-head {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px 72px;
  }
  .tridhya-homepage .th-section-head > div {
    align-self: start;
    padding-top: 3px;
  }
}
/* work head inherits the shell (overrides its old flex row) */
.tridhya-homepage .th-work__head {
  display: grid;
  align-items: start;
  justify-content: normal;
}

/* ---- Kicker ---- */
.tridhya-homepage .th-eyebrow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--th-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-petro);
}
.tridhya-homepage .th-eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--th-aqua);
}
.tridhya-homepage .th-eyebrow--light {
  color: rgba(244, 245, 247, 0.6);
}

/* ---- Display heading (two-tone) ---- */
.tridhya-homepage .th-section-head h2,
.tridhya-homepage .th-work__head h2,
.tridhya-homepage .th-faq__grid h2 {
  font-family: var(--th-font-display);
  font-size: clamp(2rem, 3.6vw, 3.1rem) !important;
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.032em;
  max-width: 21ch;
  color: var(--th-ink);
  text-wrap: balance;
}
.tridhya-homepage .th-h-muted {
  color: rgba(13, 58, 84, 0.36);
}

/* ---- Support column ---- */
.tridhya-homepage .th-section-head > div > p {
  margin: 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(13, 58, 84, 0.58);
}
.tridhya-homepage .th-work__head .th-arrow-link {
  margin-top: 0;
}

/* ---- FAQ head joins the same language ---- */
.tridhya-homepage .th-faq__grid {
  padding-top: 30px;
  border-top: 1px solid var(--th-hairline);
}
.tridhya-homepage .th-faq__grid > .th-eyebrow {
  grid-column: 1 / -1;
}
.tridhya-homepage .th-faq__grid > h2 {
  max-width: 13ch;
}

/* ---- Closing CTA: light variant ---- */
.tridhya-homepage .th-cta__inner .th-eyebrow {
  margin-bottom: 22px;
}

/* ---- reset the legacy 12-col placement rules on the shared head ---- */
.tridhya-homepage .th-section-head > h2 {
  grid-column: auto;
}
.tridhya-homepage .th-section-head > div {
  grid-column: auto;
}
/* FAQ keeps its 12-col split (h2 4 / accordion 8) but must not stretch */
.tridhya-homepage .th-faq__grid {
  align-items: start;
}

/* ============================================================
   v2.8 — Industries: image panel matches the list height exactly
   (was a fixed 1:1 aspect box, which left it shorter than the
   six rows). Stretch it to the grid row instead.
   ============================================================ */
@media (min-width: 1024px) {
  .tridhya-homepage .th-ind-visual {
    aspect-ratio: auto;
    align-self: stretch;
    height: 100%;
    min-height: 320px;
  }
}

/* ============================================================
   v2.9 — Case studies redesigned: featured study + metric index
   Two-column split (same 1.12fr/1fr ratio as the section head):
     left  = one featured case with a large metric
     right = three hairline rows, each leading with its number
   Replaces the four cramped 290px badge-overlay cards.
   ============================================================ */
.tridhya-homepage .th-work-body {
  display: grid;
  gap: 36px;
  margin-top: 44px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-work-body {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 64px;
    align-items: stretch;
  }
}

/* ---- Featured study ---- */
.tridhya-homepage .th-work-feat {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.tridhya-homepage .th-work-feat__frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--th-mist);
}
.tridhya-homepage .th-work-feat__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.75s var(--th-ease);
}
.tridhya-homepage .th-work-feat:hover .th-work-feat__frame img {
  transform: scale(1.04);
}
.tridhya-homepage .th-work-feat__go {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--th-ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--th-ease), transform 0.3s var(--th-ease);
}
.tridhya-homepage .th-work-feat__go .th-icon { width: 16px; height: 16px; }
.tridhya-homepage .th-work-feat:hover .th-work-feat__go {
  opacity: 1;
  transform: none;
}
.tridhya-homepage .th-work-feat__body {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--th-hairline);
}
.tridhya-homepage .th-work-feat__client {
  margin: 0 0 9px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--th-petro);
}
.tridhya-homepage .th-work-feat h3 {
  margin: 0;
  font-family: var(--th-font-display);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--th-ink);
}
.tridhya-homepage .th-work-feat__desc {
  margin: 9px 0 0;
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(13, 58, 84, 0.55);
}
.tridhya-homepage .th-work-feat__metric {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 18px 0 0;
}
.tridhya-homepage .th-work-feat__metric strong {
  font-family: var(--th-font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--th-petro);
}
.tridhya-homepage .th-work-feat__metric span {
  font-size: 0.875rem;
  line-height: 1.35;
  color: rgba(13, 58, 84, 0.55);
}

/* ---- Index rows ---- */
.tridhya-homepage .th-work-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--th-hairline);
}
.tridhya-homepage .th-work-row {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 22px;
  padding: 20px 10px 20px 12px;
  border-bottom: 1px solid var(--th-hairline);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s var(--th-ease), padding-left 0.3s var(--th-ease);
}
.tridhya-homepage .th-work-row__client {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13, 58, 84, 0.42);
  transition: color 0.3s var(--th-ease);
}
.tridhya-homepage .th-work-row__title {
  display: block;
  margin-top: 7px;
  font-family: var(--th-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--th-ink);
  transition: color 0.3s var(--th-ease);
}
.tridhya-homepage .th-work-row__metric {
  text-align: right;
}
.tridhya-homepage .th-work-row__metric strong {
  display: block;
  font-family: var(--th-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--th-petro);
}
.tridhya-homepage .th-work-row__metric span {
  display: block;
  margin-top: 6px;
  max-width: 18ch;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(13, 58, 84, 0.45);
}
.tridhya-homepage .th-work-row__go {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--th-ink);
  opacity: 0.22;
  transform: translateX(-4px);
  transition: opacity 0.3s var(--th-ease), transform 0.3s var(--th-ease),
              background-color 0.3s var(--th-ease), color 0.3s var(--th-ease);
}
.tridhya-homepage .th-work-row__go .th-icon { width: 14px; height: 14px; }

/* Row hover */
.tridhya-homepage .th-work-row:hover {
  background: linear-gradient(90deg, rgba(0, 81, 124, 0.05), rgba(0, 81, 124, 0) 70%);
  padding-left: 18px;
}
.tridhya-homepage .th-work-row:hover .th-work-row__title {
  color: var(--th-petro);
}
.tridhya-homepage .th-work-row:hover .th-work-row__client {
  color: var(--th-aqua);
}
.tridhya-homepage .th-work-row:hover .th-work-row__go {
  opacity: 1;
  transform: none;
  background: var(--th-petro);
  color: #fff;
}

/* ---- case studies: fill the rows with substance, trim the feature ---- */
.tridhya-homepage .th-work-row__desc {
  display: block;
  margin-top: 8px;
  max-width: 40ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(13, 58, 84, 0.5);
  transition: color 0.3s var(--th-ease);
}
.tridhya-homepage .th-work-row:hover .th-work-row__desc {
  color: rgba(13, 58, 84, 0.68);
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-work-feat__frame img {
    aspect-ratio: 16 / 9;
  }
  .tridhya-homepage .th-work-row {
    padding: 24px 12px 24px 14px;
  }
}

/* ---- featured: metric moves inline-right to mirror the index rows ---- */
.tridhya-homepage .th-work-feat__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-work-feat__body {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }
}
.tridhya-homepage .th-work-feat__metric {
  display: block;
  margin: 0;
  text-align: right;
}
.tridhya-homepage .th-work-feat__metric strong {
  display: block;
  font-size: 2.25rem;
}
.tridhya-homepage .th-work-feat__metric span {
  display: block;
  margin-top: 8px;
  max-width: 19ch;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ---- case studies: stacked layout on small screens ---- */
@media (max-width: 1023px) {
  .tridhya-homepage .th-work-row {
    grid-template-columns: minmax(0, 1fr) 30px;
    grid-template-areas:
      "body go"
      "metric go";
    row-gap: 14px;
    align-items: center;
    padding: 22px 10px 22px 12px;
  }
  .tridhya-homepage .th-work-row__body { grid-area: body; }
  .tridhya-homepage .th-work-row__go { grid-area: go; }
  .tridhya-homepage .th-work-row__metric {
    grid-area: metric;
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-align: left;
  }
  .tridhya-homepage .th-work-row__metric strong {
    font-size: 1.45rem;
  }
  .tridhya-homepage .th-work-row__metric span {
    margin-top: 0;
    max-width: none;
    font-size: 0.78rem;
  }
  /* featured metric reads as a caption line, not a right column */
  .tridhya-homepage .th-work-feat__metric {
    text-align: left;
  }
  .tridhya-homepage .th-work-feat__metric strong {
    font-size: 2rem;
  }
  .tridhya-homepage .th-work-feat__metric span {
    max-width: none;
  }
}

/* ============================================================
   v3.3 — Why Tridhya: photo matches the matrix height
   The photo was a 493px square sitting beside a 451px matrix
   (42px mismatch) and used a sticky frame. Now the photo column
   stretches to the matrix height exactly, and the caption earns
   a little more presence.
   ============================================================ */
@media (min-width: 1024px) {
  .tridhya-homepage .th-why__photo {
    align-self: stretch;
    min-height: 0;
  }
  .tridhya-homepage .th-why__photo-frame {
    position: relative;      /* drop the sticky behaviour */
    top: auto;
    height: 100%;
    min-height: 400px;
    box-shadow: 0 24px 60px rgba(13, 58, 84, 0.14);
  }
  .tridhya-homepage .th-why__photo-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

/* Slightly deeper caption bed so the overlay text always reads */
.tridhya-homepage .th-why__photo-frame::after {
  background: linear-gradient(
    to top,
    rgba(13, 58, 84, 0.88) 0%,
    rgba(13, 58, 84, 0.5) 38%,
    rgba(13, 58, 84, 0.08) 68%,
    transparent 100%
  );
}

/* Matrix: keep it from running taller than the photo on wide screens */
.tridhya-homepage .th-why__matrix {
  min-height: 0;
}

/* ---- why matrix: let the cells breathe (density pass had cut
        padding to 18px, which read as cramped for an enterprise
        credibility block). Photo grows with it via the stretch. ---- */
.tridhya-homepage .th-why__cell {
  padding: 26px 24px;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-why__cell {
    padding: 30px 28px;
  }
}
.tridhya-homepage .th-why__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}
.tridhya-homepage .th-why__icon .th-icon {
  width: 20px;
  height: 20px;
}
.tridhya-homepage .th-why__cell h3 {
  margin-top: 18px;
}
.tridhya-homepage .th-why__cell p {
  margin-top: 9px;
  line-height: 1.55;
}

/* ============================================================
   v3.5 — hero glow now aligns with the cursor (+) marks
   The old transform used percentages, which resolve against the
   glow's OWN 620px box rather than the hero — so the glow only
   drifted inside a small area while the canvas plus marks
   followed the true pointer. Now JS publishes hero-relative
   pixel values (--th-gx/--th-gy) and the glow centres on them.
   ============================================================ */
/* The -50% offsets centre the 620px box on the cursor point; the px
   fallbacks keep a sensible resting position when JS never runs. */
.tridhya-homepage .th-hero__cursor {
  left: 0;
  top: 0;
  transform: translate(
    calc(var(--th-gx, 710px) - 50%),
    calc(var(--th-gy, 310px) - 50%)
  );
}

/* ============================================================
   v3.6 — drop the full-width hairline above section headings
   (the rule + the 30px gap it needed are both removed, so the
   headings fall back on the uniform 96px section rhythm)
   ============================================================ */
.tridhya-homepage .th-section-head,
.tridhya-homepage .th-work__head,
.tridhya-homepage .th-faq__grid {
  border-top: none;
  padding-top: 0;
}

/* ============================================================
   v3.7 — real certification marks in the hero
   · ISO seals are square, detailed and white-on-transparent, so
     they get 42px and no colour filter (grayscale+brighten would
     have flattened them)
   · the NSE mark is a full-colour logo and leads the eyebrow
     where we claim to be listed
   ============================================================ */
.tridhya-homepage .th-hero__badges img[src*="iso-logo"],
.tridhya-homepage .th-hero__badges img[src*="iso-iec-logo"] {
  height: 42px;
  width: auto;
}
.tridhya-homepage .th-hero__badges img[src*="adobe"] {
  height: 26px;
}
.tridhya-homepage .th-hero__badges img[src*="liferay"] {
  height: 24px;
}

/* NSE mark inside the "listed" pill */
.tridhya-homepage .th-hero__eyebrow-logo {
  flex: none;
  width: auto;
  height: 20px;
  object-fit: contain;
}
.tridhya-homepage .th-hero__eyebrow:has(.th-hero__eyebrow-logo) {
  padding-left: 14px;
}

/* The taller 42px ISO seals added 18px, pushing the marquee below the
   fold; reclaim it from the hero's bottom padding so the whole hero
   (headline → certs → client logos) still lands in one screen. */
@media (min-width: 1024px) {
  .tridhya-homepage .th-hero__content {
    padding-bottom: 34px;
  }
}

/* ============================================================
   v3.9 — hero logos enlarged for legibility
   The ISO seals and partner wordmarks were too small to read.
   Heights roughly +40%, opacity to full, and the space is
   reclaimed from the proof block's own margins so the hero
   still fits a single screen.
   ============================================================ */
.tridhya-homepage .th-hero__badges img {
  opacity: 1;
}
.tridhya-homepage .th-hero__badges img[src*="iso-logo"],
.tridhya-homepage .th-hero__badges img[src*="iso-iec-logo"] {
  height: 58px;
}
.tridhya-homepage .th-hero__badges img[src*="adobe"] {
  height: 38px;
}
.tridhya-homepage .th-hero__badges img[src*="liferay"] {
  height: 36px;
}
.tridhya-homepage .th-hero__eyebrow-logo {
  height: 26px;
}
.tridhya-homepage .th-hero__badges {
  gap: 30px;
}

/* reclaim the added height above the badge row */
@media (min-width: 1024px) {
  .tridhya-homepage .th-hero__proof {
    margin-top: 38px;
    padding-top: 20px;
  }
  .tridhya-homepage .th-hero__content {
    padding-bottom: 22px;
  }
}

/* reclaim the remaining height from the small gaps (not the headline,
   not the 96px top rhythm) so the enlarged logo row still fits */
@media (min-width: 1024px) {
  .tridhya-homepage .th-hero__eyebrow {
    margin-bottom: 12px;
  }
  .tridhya-homepage .th-hero__lead {
    margin-top: 20px;
  }
  .tridhya-homepage .th-hero__proof {
    margin-top: 32px;
  }
  .tridhya-homepage .th-marquee {
    padding-block: 18px;
  }
}

/* ============================================================
   v4.1 — BUTTON COLOUR FIX
   `.tridhya-homepage a { color: inherit }` (specificity 0,1,1)
   outranked every `.th-btn--*` colour rule (0,1,0), so all button
   text inherited its section colour instead. In the dark hero the
   aqua CTA therefore had near-white text, and its hover background
   was the same near-white — text vanished.
   These scoped rules (0,2,0) win, and the primary hover is now a
   deeper aqua rather than a white flash.
   ============================================================ */
.tridhya-homepage .th-btn {
  text-decoration: none;
}
.tridhya-homepage .th-btn--aqua {
  background: var(--th-aqua);
  color: var(--th-ink);
}
.tridhya-homepage .th-btn--aqua:hover {
  background: #05a5d2;
  color: var(--th-ink);
}
.tridhya-homepage .th-btn--petro {
  background: var(--th-petro);
  color: #fff;
}
.tridhya-homepage .th-btn--petro:hover {
  background: var(--th-petro-deep);
  color: #fff;
}
.tridhya-homepage .th-btn--ghost-light {
  color: #f4f5f7;
}
.tridhya-homepage .th-btn--ghost-light:hover {
  color: #ffffff;
}
.tridhya-homepage .th-btn--ghost-dark {
  background: #fff;
  color: var(--th-ink);
}
.tridhya-homepage .th-btn--ghost-dark:hover {
  color: var(--th-petro);
}

/* ============================================================
   v4.3 — SHARP BUTTON GEOMETRY
   The Tridhya wordmark is a pure geometric mark with no rounded
   corners, so every interactive button drops the pill radius and
   takes a hard edge to match it.
   Left circular on purpose: glows, rings, the pulse dot, the
   testimonial avatar and monogram (those are shapes, not buttons).
   ============================================================ */
.tridhya-homepage .th-btn,
.tridhya-homepage .th-btn--aqua,
.tridhya-homepage .th-btn--petro,
.tridhya-homepage .th-btn--ghost-light,
.tridhya-homepage .th-btn--ghost-dark,
.tridhya-homepage .th-acc__toggle,
.tridhya-homepage .th-voices__arrows button,
.tridhya-homepage .th-ind-row__go,
.tridhya-homepage .th-work-row__go,
.tridhya-homepage .th-work-feat__go {
  border-radius: 0;
}

/* ============================================================
   v4.4 — SECTION CONTAINER MATCHED TO THE HEADER NAVIGATION
   The live header uses Bootstrap's .container with p-0, so its
   content box is 1320px at a 1440 viewport (x 53..1373), 1140px
   from 1200, 960px from 992, and full-bleed below that.
   Ours was 1280px WITH 32px padding, putting content at 105..1321
   — 52px out of step with the header on both sides.
   Now matched. Full-bleed areas (client logo marquee) are
   unaffected: the marquee sits outside .th-container.
   ============================================================ */
.tridhya-homepage .th-container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 0;
}
@media (max-width: 1399.98px) {
  .tridhya-homepage .th-container { max-width: 1140px; }
}
@media (max-width: 1199.98px) {
  .tridhya-homepage .th-container { max-width: 960px; }
}
/* below 992px the live header runs full-bleed; body copy still needs a
   gutter so text never touches the screen edge */
@media (max-width: 991.98px) {
  .tridhya-homepage .th-container {
    max-width: 100%;
    padding-inline: 20px;
  }
}

/* The header's .nav-bar carries its own 16px inset once the layout is
   >=1200px (logo at x69 @1440), and none below that. Mirroring it makes
   our content edge land exactly on the logo / header CTA edge. */
@media (min-width: 1200px) {
  .tridhya-homepage .th-container {
    padding-inline: 16px;
  }
}

/* ============================================================
   v5.0 — BRAND BLUE RETUNE + SERVICES REDESIGN
   Palette taken from the live site's own stylesheet:
     petrol #00517c (primary), aqua #06b6e8 (accent),
     mid-blue #0592ba, light washes #f3fbff / #e1f9ff.
   The neutral near-black/grey build is replaced: dark sections
   become deep petrol-blue, light sections get brand washes.
   The services section is rebuilt visually: blue-wash bed,
   concentric-arc motif (echoing the hero rings), numbered
   chip buttons, open-card lift with accent rail, branded chips,
   and an icon in every open panel.
   ============================================================ */

/* ---- 1. Token retune ---- */
.tridhya-homepage {
  --th-paper: #f3fbff;
  --th-hairline: #d4e5f0;
  --th-mist: #e6f2fa;
  --th-ink-soft: #4d85a3;
}

/* ---- 2. Dark sections become deep brand blue ---- */
.tridhya-homepage .th-hero {
  background:
    radial-gradient(1100px 760px at 78% 12%, rgba(6, 146, 204, 0.34) 0%, transparent 62%),
    radial-gradient(900px 680px at 8% 92%, rgba(0, 81, 124, 0.5) 0%, transparent 64%),
    linear-gradient(158deg, #04283f 0%, #043453 52%, #054061 100%);
}
.tridhya-homepage .th-voices,
.tridhya-homepage .th-cta {
  background:
    radial-gradient(900px 600px at 85% 10%, rgba(6, 146, 204, 0.18) 0%, transparent 60%),
    linear-gradient(170deg, #04283f 0%, #032e49 100%);
}

/* keep dark-section body text on the blue (slightly cooler tint) */
.tridhya-homepage .th-voices,
.tridhya-homepage .th-cta {
  color: #eef7fc;
}

/* ---- 3. Light sections: brand wash rhythm ---- */
.tridhya-homepage .th-services {
  position: relative;
  /* the wash starts tinted at the top edge — a pure-white start made
     the boundary with the white clients section above invisible */
  background:
    radial-gradient(1200px 700px at 88% -10%, rgba(6, 182, 232, 0.09) 0%, transparent 60%),
    linear-gradient(180deg, #f3fbff 0%, #e9f5fc 55%, #e2f1fa 100%);
  overflow: hidden;
}
.tridhya-homepage .th-why {
  background: linear-gradient(180deg, #ffffff, #f3fbff);
}
.tridhya-homepage .th-work,
.tridhya-homepage .th-industries,
.tridhya-homepage .th-faq {
  background: #ffffff;
}

/* ---- 4. Services: concentric-arc motif (hero echo) ---- */
.tridhya-homepage .th-services::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  border: 1px solid rgba(0, 81, 124, 0.14);
  pointer-events: none;
}
.tridhya-homepage .th-services::after {
  content: "";
  position: absolute;
  top: -260px;
  right: -250px;
  width: 700px;
  height: 700px;
  border-radius: 999px;
  border: 1px solid rgba(6, 182, 232, 0.12);
  pointer-events: none;
}

/* ---- 5. Accordion: numbered chip + open-card lift ---- */
.tridhya-homepage .th-services .th-acc__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--th-hairline);
  border-radius: 0;
  background: #fff;
  color: var(--th-petro);
  font-family: var(--th-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color 0.25s var(--th-ease), color 0.25s var(--th-ease),
              border-color 0.25s var(--th-ease);
}
.tridhya-homepage .th-services .th-acc__btn {
  transition: background-color 0.25s var(--th-ease), padding-left 0.25s var(--th-ease);
}
.tridhya-homepage .th-services .th-acc__btn:hover {
  background: rgba(0, 81, 124, 0.04);
  padding-left: 10px;
}
.tridhya-homepage .th-services .th-acc__btn:hover .th-acc__num {
  border-color: var(--th-petro);
}
.tridhya-homepage .th-services .th-acc__item.is-open .th-acc__num {
  background: linear-gradient(135deg, var(--th-petro), #0592ba);
  border-color: transparent;
  color: #fff;
}
.tridhya-homepage .th-services .th-acc__item.is-open .th-acc__btn {
  background: #fff;
}
/* accent rail on the open card */
.tridhya-homepage .th-services .th-acc__item {
  border-left: 3px solid transparent;
  transition: border-color 0.25s var(--th-ease);
}
.tridhya-homepage .th-services .th-acc__item.is-open {
  border-left-color: var(--th-aqua);
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 81, 124, 0.1);
}

/* ---- 6. Open panel: icon block + branded chips ---- */
.tridhya-homepage .th-acc__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 0;
  background: var(--th-petro-tint);
  color: var(--th-petro);
  flex: none;
}
.tridhya-homepage .th-acc__icon .th-icon {
  width: 22px;
  height: 22px;
}
.tridhya-homepage .th-services .th-acc__panel-grid {
  align-items: start;
}
.tridhya-homepage .th-services .th-chip {
  background: #e1f4fc;
  border-color: #bfe3f4;
  color: #0c5883;
}
.tridhya-homepage .th-services .th-acc__desc {
  color: rgba(12, 60, 90, 0.72);
}

/* stats inside services: petrol numerals on the wash */
.tridhya-homepage .th-stats__grid {
  border-block: 1px solid var(--th-hairline);
  padding-block: 40px;
  margin-top: 56px;
}

/* panel grid with the new icon column: icon | description | side */
@media (min-width: 1024px) {
  .tridhya-homepage .th-services .th-acc__panel-grid {
    grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px 48px;
    align-items: start;
  }
  .tridhya-homepage .th-services .th-acc__icon {
    grid-row: 1;
  }
}
@media (max-width: 1023px) {
  .tridhya-homepage .th-services .th-acc__panel-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .tridhya-homepage .th-services .th-acc__desc {
    flex: 1 1 260px;
  }
  .tridhya-homepage .th-services .th-acc__side {
    flex: 1 1 260px;
  }
}

/* ============================================================
   v5.1 — SERVICES AS TABS
   Left: numbered service list (editorial hairline rows).
   Right: detail panel with larger type, chips and redirect links.
   Replaces the accordion in this section only (FAQ keeps its own).
   ============================================================ */
.tridhya-homepage .th-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-tabs {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 56px;
    align-items: start;
  }
}

/* ---- Tab list ---- */
.tridhya-homepage .th-tabs__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--th-hairline);
}
.tridhya-homepage .th-tabs__tab {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 14px;
  padding: 15px 10px 15px 8px;
  border: 0;
  border-bottom: 1px solid var(--th-hairline);
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--th-font-body);
  transition: background-color 0.25s var(--th-ease), border-left-color 0.25s var(--th-ease),
              padding-left 0.25s var(--th-ease);
}
.tridhya-homepage .th-tabs__num {
  font-family: var(--th-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8fb3c7;
  transition: color 0.25s var(--th-ease);
}
.tridhya-homepage .th-tabs__label {
  font-family: var(--th-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--th-ink);
  transition: color 0.25s var(--th-ease);
}
.tridhya-homepage .th-tabs__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--th-petro);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s var(--th-ease), transform 0.25s var(--th-ease),
              background-color 0.25s var(--th-ease), color 0.25s var(--th-ease);
}
.tridhya-homepage .th-tabs__mark .th-icon { width: 13px; height: 13px; }

.tridhya-homepage .th-tabs__tab:hover {
  background: rgba(0, 81, 124, 0.04);
}
.tridhya-homepage .th-tabs__tab:hover .th-tabs__label {
  color: var(--th-petro);
}
.tridhya-homepage .th-tabs__tab.is-active {
  background: #fff;
  border-left-color: var(--th-aqua);
  padding-left: 14px;
  box-shadow: 0 14px 34px rgba(0, 81, 124, 0.08);
}
.tridhya-homepage .th-tabs__tab.is-active .th-tabs__label {
  color: var(--th-petro);
}
.tridhya-homepage .th-tabs__tab.is-active .th-tabs__num {
  color: var(--th-aqua);
}
.tridhya-homepage .th-tabs__tab.is-active .th-tabs__mark {
  opacity: 1;
  transform: none;
  background: var(--th-petro);
  color: #fff;
}
.tridhya-homepage .th-tabs__tab:focus-visible {
  outline: 2px solid var(--th-aqua);
  outline-offset: -2px;
}

/* ---- Detail panel ---- */
.tridhya-homepage .th-tabs__panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--th-hairline);
  border-left: 3px solid var(--th-aqua);
  box-shadow: 0 18px 44px rgba(0, 81, 124, 0.1);
  padding: 34px 34px 30px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-tabs__panel {
    padding: 40px 44px 36px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 1023px) {
  .tridhya-homepage .th-tabs__panels {
    order: -1; /* detail first on mobile, list acts as the picker below */
  }
}
.tridhya-homepage .th-tabs__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tridhya-homepage .th-tabs__head .th-acc__icon {
  width: 52px;
  height: 52px;
}
.tridhya-homepage .th-tabs__head .th-acc__icon .th-icon {
  width: 25px;
  height: 25px;
}
.tridhya-homepage .th-tabs__head h3 {
  margin: 0;
  font-family: var(--th-font-display);
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--th-ink);
}
.tridhya-homepage .th-tabs__desc {
  margin: 20px 0 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(12, 60, 90, 0.78);
  max-width: 58ch;
}
.tridhya-homepage .th-tabs__panel .th-chips {
  margin-top: 24px;
}
.tridhya-homepage .th-tabs__links {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-tabs__links {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
  }
}
.tridhya-homepage .th-tabs__links .th-arrow-link {
  font-weight: 600;
}
.tridhya-homepage .th-tabs__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #0c5883;
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 88, 131, 0.35);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tridhya-homepage .th-tabs__more .th-icon { width: 13px; height: 13px; }
.tridhya-homepage .th-tabs__more:hover {
  color: var(--th-aqua);
  border-color: var(--th-aqua);
}

/* ============================================================
   v5.2 — TITLES IN BRAND BLUE + PILL ALIGNMENT
   1. Display h2s take the brand petrol itself (#00517c, the
      live site's headline color); everything else that derived
      from the old near-black ink now sits on deep petrol ink.
   2. Chips inside the services tabs panel left-align (the old
      accordion rule squeezed them right).
   ============================================================ */
.tridhya-homepage .th-section-head h2,
.tridhya-homepage .th-work__head h2,
.tridhya-homepage .th-faq__grid h2 {
  color: #00517c;
}
.tridhya-homepage .th-h-muted {
  color: rgba(0, 81, 124, 0.42);
}
.tridhya-homepage .th-cta h2 {
  color: #f4f5f7; /* dark section keeps light headings */
}

/* pills: flush-left inside the tabs panel */
.tridhya-homepage .th-tabs__panel .th-chips {
  max-width: none;
  justify-content: flex-start;
}

/* ============================================================
   v5.3 — tabs: left list stretches to the panel height
   The detail panel floors at 420px; the six tab rows now share
   that height equally (57px -> 70px rows) so both columns end
   on the same line.
   ============================================================ */
@media (min-width: 1024px) {
  .tridhya-homepage .th-tabs {
    align-items: stretch;
  }
  .tridhya-homepage .th-tabs__list {
    height: 100%;
  }
  .tridhya-homepage .th-tabs__tab {
    flex: 1;
  }
}

/* ============================================================
   v5.4 — tighten the space below the pills
   The links row used margin-top:auto, parking every spare pixel
   between chips and links (47px). Fixed 24px gap instead, and a
   slightly shorter panel so the leftover doesn't pool at the
   bottom either.
   ============================================================ */
.tridhya-homepage .th-tabs__links {
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-tabs__panel {
    min-height: 400px;
  }
}

/* ============================================================
   v5.5 — CASE STUDIES AS A PEEK CAROUSEL
   One full slide in view, the next slide half-visible at the
   screen edge. Full-bleed scroller (first slide aligns to the
   content container edge), scroll-snap, arrows + progress dots.
   ============================================================ */
.tridhya-homepage .th-work {
  overflow: hidden; /* the viewport-wide track lives here */
}
.tridhya-homepage .th-work-viewport {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-left: max(20px, calc(50% - 644px));
  padding-right: max(20px, calc(50% - 644px));
  scroll-padding-left: max(20px, calc(50% - 644px));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tridhya-homepage .th-work-viewport::-webkit-scrollbar {
  display: none;
}
.tridhya-homepage .th-work-slide {
  flex: none;
  scroll-snap-align: start;
  width: 84vw;       /* mobile: full card + peek */
}
@media (min-width: 992px) {
  .tridhya-homepage .th-work-slide {
    width: min(860px, 60vw); /* full card + ~half-card peek at the edge */
  }
}
.tridhya-homepage .th-work-slide__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--th-hairline);
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(13, 58, 84, 0.08);
  transition: transform 0.35s var(--th-ease), box-shadow 0.35s var(--th-ease);
}
.tridhya-homepage .th-work-slide__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(13, 58, 84, 0.14);
}
.tridhya-homepage .th-work-slide__frame {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--th-hairline);
}
.tridhya-homepage .th-work-slide__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  transition: transform 0.7s var(--th-ease);
}
.tridhya-homepage .th-work-slide__link:hover img {
  transform: scale(1.04);
}
.tridhya-homepage .th-work-slide__go {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--th-petro);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--th-ease), transform 0.3s var(--th-ease);
}
.tridhya-homepage .th-work-slide__go .th-icon { width: 15px; height: 15px; }
.tridhya-homepage .th-work-slide__link:hover .th-work-slide__go {
  opacity: 1;
  transform: none;
}
.tridhya-homepage .th-work-slide__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 24px;
}
.tridhya-homepage .th-work-slide__client {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0c5883;
}
.tridhya-homepage .th-work-slide__body h3 {
  margin: 10px 0 0;
  font-family: var(--th-font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--th-ink);
}
.tridhya-homepage .th-work-slide__desc {
  margin: 9px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(13, 58, 84, 0.66);
}
.tridhya-homepage .th-work-slide__metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--th-hairline);
}
.tridhya-homepage .th-work-slide__metric strong {
  font-family: var(--th-font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #00517c;
}
.tridhya-homepage .th-work-slide__metric span {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(13, 58, 84, 0.55);
}

/* controls */
.tridhya-homepage .th-work-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 32px;
}
.tridhya-homepage .th-work-dots {
  display: flex;
  gap: 8px;
  margin-right: auto;
}
.tridhya-homepage .th-work-dot {
  width: 22px;
  height: 3px;
  background: var(--th-hairline);
  transition: background-color 0.3s var(--th-ease);
}
.tridhya-homepage .th-work-dot.is-on {
  background: var(--th-petro);
}
.tridhya-homepage .th-work-arrows {
  display: flex;
  gap: 10px;
}
.tridhya-homepage .th-work-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--th-hairline);
  border-radius: 0;
  background: #fff;
  color: var(--th-petro);
  cursor: pointer;
  transition: background-color 0.25s var(--th-ease), color 0.25s var(--th-ease),
              border-color 0.25s var(--th-ease), opacity 0.25s var(--th-ease);
}
.tridhya-homepage .th-work-arrow .th-icon { width: 18px; height: 18px; }
.tridhya-homepage .th-work-arrow:hover:not(:disabled) {
  background: var(--th-petro);
  border-color: var(--th-petro);
  color: #fff;
}
.tridhya-homepage .th-work-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* mobile: leave a visible hint of the next card */
@media (max-width: 991.98px) {
  .tridhya-homepage .th-work-slide {
    width: 78vw;
  }
}

/* ============================================================
   v5.9 — CASE STUDIES SECTION GOES DARK
   Deep petrol-blue bed (same family as hero / voices / CTA),
   light headings, white cards popping off the dark, and more
   breathing room between the title block and the carousel.
   ============================================================ */
.tridhya-homepage .th-work {
  background:
    radial-gradient(1000px 640px at 14% 0%, rgba(6, 146, 204, 0.18) 0%, transparent 60%),
    radial-gradient(800px 520px at 92% 100%, rgba(0, 81, 124, 0.35) 0%, transparent 62%),
    linear-gradient(170deg, #04283f 0%, #032e49 100%);
  color: #eef7fc;
}

/* heading block: light on dark + room below the title */
.tridhya-homepage .th-work .th-section-head {
  margin-bottom: 56px;
}
.tridhya-homepage .th-work .th-section-head h2 {
  color: #f4f5f7;
}
.tridhya-homepage .th-work .th-h-muted {
  color: rgba(154, 217, 244, 0.55);
}
.tridhya-homepage .th-work .th-eyebrow {
  color: rgba(154, 225, 248, 0.8);
}
.tridhya-homepage .th-work .th-arrow-link {
  color: #7fd8f2;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-work .th-section-head {
    margin-bottom: 64px;
  }
}

/* cards: white on the dark bed, deeper shadow */
.tridhya-homepage .th-work-slide__link {
  box-shadow: 0 20px 48px rgba(2, 18, 32, 0.4);
}
.tridhya-homepage .th-work-slide__link:hover {
  box-shadow: 0 30px 60px rgba(2, 18, 32, 0.5);
}

/* controls: translucent on dark */
.tridhya-homepage .th-work-dot {
  background: rgba(244, 245, 247, 0.22);
}
.tridhya-homepage .th-work-dot.is-on {
  background: var(--th-aqua);
}
.tridhya-homepage .th-work-arrow {
  background: rgba(244, 245, 247, 0.05);
  border-color: rgba(244, 245, 247, 0.28);
  color: #cfeafc;
}
.tridhya-homepage .th-work-arrow:hover:not(:disabled) {
  background: var(--th-aqua);
  border-color: var(--th-aqua);
  color: var(--th-ink);
}

/* v5.10 — cards: drop the border, the shadow does the separation */
.tridhya-homepage .th-work-slide__link {
  border: none;
}
.tridhya-homepage .th-work-slide__frame {
  border-bottom: none;
}

/* v5.11 — trust marquee logos 1.5x (52/62 -> 78/93) */
.tridhya-homepage .th-marquee__track img {
  height: 78px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-marquee__track img {
    height: 93px;
  }
}

/* reclaim the 31px the larger logos added, keeping the hero on one screen */
@media (min-width: 1024px) {
  .tridhya-homepage .th-hero__content {
    padding-bottom: 14px;
  }
  .tridhya-homepage .th-hero__proof {
    margin-top: 26px;
  }
  .tridhya-homepage .th-marquee {
    padding-block: 12px;
  }
}

/* v5.13 — metrics row: drop the top/bottom hairlines */
.tridhya-homepage .th-stats__grid {
  border-block: none;
  padding-block: 0;
  margin-top: 64px;
}

/* v5.14 — metrics: centered, larger figures */
.tridhya-homepage .th-stat {
  align-items: center;
  text-align: center;
  border-left: none;      /* column dividers go too when centering */
  padding-left: 0;
  gap: 10px;
}
.tridhya-homepage .th-stat strong {
  font-size: 3.1rem;      /* 2.6 -> 3.1rem */
}
.tridhya-homepage .th-stat span {
  font-size: 0.9375rem;   /* 13 -> 15px */
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ============================================================
   v5.15 — INDUSTRIES AS A 3×2 ICON CARD GRID
   Images removed; light wash bed with decorative corner motif;
   six equal cards with tinted icon tiles and arrow chips.
   ============================================================ */
.tridhya-homepage .th-industries {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 640px at 8% -12%, rgba(6, 182, 232, 0.08) 0%, transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f3fbff 55%, #eaf6fd 100%);
}
.tridhya-homepage .th-industries::before {
  content: "";
  position: absolute;
  bottom: -190px;
  right: -150px;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  border: 1px solid rgba(0, 81, 124, 0.13);
  pointer-events: none;
}
.tridhya-homepage .th-industries::after {
  content: "";
  position: absolute;
  bottom: -270px;
  right: -235px;
  width: 700px;
  height: 700px;
  border-radius: 999px;
  border: 1px solid rgba(6, 182, 232, 0.11);
  pointer-events: none;
}

.tridhya-homepage .th-ind-cards {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-ind-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-ind-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.tridhya-homepage .th-ind-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 30px;
  grid-template-areas: "icon body go";
  align-items: center;
  column-gap: 16px;
  padding: 24px 20px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(13, 58, 84, 0.07);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--th-ease), box-shadow 0.3s var(--th-ease),
              border-left-color 0.3s var(--th-ease);
  border-left: 3px solid transparent;
}
.tridhya-homepage .th-ind-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(13, 58, 84, 0.13);
  border-left-color: var(--th-aqua);
}
.tridhya-homepage .th-ind-card__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--th-petro-tint);
  color: var(--th-petro);
  transition: background-color 0.3s var(--th-ease), color 0.3s var(--th-ease);
}
.tridhya-homepage .th-ind-card__icon .th-icon { width: 23px; height: 23px; }
.tridhya-homepage .th-ind-card:hover .th-ind-card__icon {
  background: var(--th-petro);
  color: #fff;
}
.tridhya-homepage .th-ind-card__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tridhya-homepage .th-ind-card__title {
  font-family: var(--th-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--th-ink);
  transition: color 0.25s var(--th-ease);
}
.tridhya-homepage .th-ind-card:hover .th-ind-card__title {
  color: var(--th-petro);
}
.tridhya-homepage .th-ind-card__desc {
  font-size: 0.8438rem;
  line-height: 1.5;
  color: rgba(13, 58, 84, 0.62);
}
.tridhya-homepage .th-ind-card__go {
  grid-area: go;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--th-petro);
  opacity: 0.25;
  transform: translateX(-4px);
  transition: opacity 0.25s var(--th-ease), transform 0.25s var(--th-ease),
              background-color 0.25s var(--th-ease), color 0.25s var(--th-ease);
}
.tridhya-homepage .th-ind-card__go .th-icon { width: 14px; height: 14px; }
.tridhya-homepage .th-ind-card:hover .th-ind-card__go {
  opacity: 1;
  transform: none;
  background: var(--th-aqua);
  color: var(--th-ink);
}

/* ============================================================
   v5.16 — industry cards: vertical layout (icon → title →
   desc → case-studies link); fixes the two blank icons
   ============================================================ */
.tridhya-homepage .th-ind-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 28px 26px 24px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(13, 58, 84, 0.07);
  border-left: 3px solid transparent;
  transition: transform 0.3s var(--th-ease), box-shadow 0.3s var(--th-ease),
              border-left-color 0.3s var(--th-ease);
}
.tridhya-homepage .th-ind-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(13, 58, 84, 0.13);
  border-left-color: var(--th-aqua);
}
.tridhya-homepage .th-ind-card__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: var(--th-petro-tint);
  color: var(--th-petro);
  transition: background-color 0.3s var(--th-ease), color 0.3s var(--th-ease);
}
.tridhya-homepage .th-ind-card__icon .th-icon { width: 24px; height: 24px; }
.tridhya-homepage .th-ind-card:hover .th-ind-card__icon {
  background: var(--th-petro);
  color: #fff;
}
.tridhya-homepage .th-ind-card__title {
  margin: 18px 0 0;
  font-family: var(--th-font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--th-ink);
  transition: color 0.25s var(--th-ease);
}
.tridhya-homepage .th-ind-card:hover .th-ind-card__title {
  color: var(--th-petro);
}
.tridhya-homepage .th-ind-card__desc {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(13, 58, 84, 0.62);
}
.tridhya-homepage .th-ind-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0c5883;
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 88, 131, 0.35);
  padding-bottom: 3px;
  transition: color 0.25s var(--th-ease), border-color 0.25s var(--th-ease);
}
.tridhya-homepage .th-ind-card__link .th-icon { width: 14px; height: 14px; }
.tridhya-homepage .th-ind-card:hover .th-ind-card__link,
.tridhya-homepage .th-ind-card__link:hover {
  color: var(--th-aqua);
  border-color: var(--th-aqua);
}
/* keep card rows even: title/desc area flexes, link pins to the bottom */
@media (min-width: 640px) {
  .tridhya-homepage .th-ind-card { min-height: 100%; }
}

/* v5.17 — case-study count reference per industry card */
.tridhya-homepage .th-ind-card__link strong {
  font-family: var(--th-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: #00517c;
  transition: color 0.25s var(--th-ease);
}
.tridhya-homepage .th-ind-card:hover .th-ind-card__link strong,
.tridhya-homepage .th-ind-card__link:hover strong {
  color: var(--th-aqua);
}

/* ============================================================
   v5.18 — per-industry case-study reference links
   2-3 named refs per card instead of a generic link.
   ============================================================ */
.tridhya-homepage .th-ind-card__refs {
  margin-top: auto;
  padding-top: 18px;
  width: 100%;
}
.tridhya-homepage .th-ind-card__refs-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8fb3c7;
  margin-bottom: 8px;
}
.tridhya-homepage .th-ind-card__ref-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tridhya-homepage .th-ind-card__ref-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: #e1f4fc;
  border: 1px solid #bfe3f4;
  color: #0c5883;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s var(--th-ease), color 0.25s var(--th-ease),
              border-color 0.25s var(--th-ease);
}
.tridhya-homepage .th-ind-card__ref-links a::after {
  content: "→";
  font-size: 0.7rem;
  opacity: 0.55;
}
.tridhya-homepage .th-ind-card__ref-links a:hover {
  background: var(--th-petro);
  border-color: var(--th-petro);
  color: #fff;
}

/* v5.19 — industry card type scale up (title 1.5x, desc a step) */
.tridhya-homepage .th-ind-card__title {
  font-size: 1.75rem;      /* 19px -> 28px (1.5x) */
  letter-spacing: -0.02em;
  margin-top: 20px;
}
.tridhya-homepage .th-ind-card__desc {
  font-size: 0.9688rem;    /* 14px -> 15.5px */
  line-height: 1.6;
  margin-top: 10px;
}

/* v5.19b — the old density-pass rule (.th-ind-card h3 at 1.05rem,
   0,2,1 specificity) outranked the class selector; restate at the
   same specificity so the larger type actually applies. */
.tridhya-homepage .th-ind-card h3 {
  font-size: 1.75rem;      /* 19px -> 28px (1.5x) */
  letter-spacing: -0.02em;
  margin-top: 20px;
}
.tridhya-homepage .th-ind-card p {
  font-size: 0.9688rem;    /* 14px -> 15.5px */
  line-height: 1.6;
  margin-top: 10px;
}

/* v5.21 — why-card titles on the industries scale (28px) */
.tridhya-homepage .th-why__cell h3 {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 20px;
}

/* ============================================================
   v5.22 — voices section joins the editorial header system
   Kicker + two-tone display title (light variant for the dark
   bed); the slide counter moves into the support column.
   ============================================================ */
.tridhya-homepage .th-voices .th-section-head h2 {
  color: #f4f5f7;
}
.tridhya-homepage .th-voices .th-h-muted {
  color: rgba(154, 217, 244, 0.55);
}
.tridhya-homepage .th-voices__head {
  margin-bottom: 44px;
}
.tridhya-homepage .th-voices__counter {
  font-family: var(--th-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(154, 225, 248, 0.7);
  white-space: nowrap;
}
.tridhya-homepage .th-voices__counter span:last-child {
  color: rgba(154, 225, 248, 0.4);
}

/* ============================================================
   v5.23 — trust logos: editorial head + boxed 4x2 tile grid
   Replaces the marquee. The band is now a plain white section on
   the unified rhythm; the head uses the standard light-variant
   colors (petrol kicker, dark two-tone title). The grid sits in
   the container width; 1px gaps over a hairline background give
   the divider lines, and a hairline border closes the box. Old
   __viewport/__track and __label rules above are dormant — the
   markup no longer uses those classes.
   ============================================================ */
.tridhya-homepage .th-marquee {
  padding-block: 64px;
  background: #fff;
  border-top: 0;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-marquee {
    padding-block: 80px;
  }
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-marquee {
    padding-block: 96px;
  }
}
.tridhya-homepage .th-marquee__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 36px;
  background: var(--th-hairline);
  border: 1px solid var(--th-hairline);
}
.tridhya-homepage .th-marquee__grid img {
  display: block;
  width: 100%;
  height: auto;
  /* client webps are opaque white tiles (fringe cropped out); the
     backdrop guards the hairline if an asset ever ships transparent */
  background: #fff;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-marquee__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   v5.25 — hero: balance the padding above the NSE badge and
   below the cert badges. The white header now overlays the hero
   top, so the bottom padding matches the *visible* top gap per
   breakpoint (120 / 88 / 96px, measured). Also retires the old
   one-screen "reclaim" bottom squeeze (14px) — the hero grows.
   ============================================================ */
.tridhya-homepage .th-hero__content {
  padding-bottom: 120px;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-hero__content {
    padding-bottom: 88px;
  }
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-hero__content {
    padding-bottom: 96px;
  }
}

/* ============================================================
   v5.26 — company metrics move into the clients section head
   They leave the strip under Services and fill the head's empty
   support column: a compact 3x2 metric block (2 cols on phones),
   bottom-aligned with the title. Petrol numerals, aqua suffixes,
   13px labels — same brand type as the rest of the page. The old
   strip rules (margin-top, centered layout, 3.1rem figures) are
   overridden at higher specificity.
   ============================================================ */
.tridhya-homepage .th-marquee__head .th-marquee__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
  margin: 0;
  padding-block: 0;
  border-block: none;
}
.tridhya-homepage .th-marquee__head .th-stat {
  align-items: flex-start;
  text-align: left;
  gap: 6px;
}
.tridhya-homepage .th-marquee__head .th-stat strong {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--th-petro);
  font-variant-numeric: tabular-nums;
}
.tridhya-homepage .th-marquee__head .th-stat strong em {
  color: var(--th-aqua);
}
/* the numerals live in <i class="th-count"> — kill the UA italic */
.tridhya-homepage .th-marquee__head .th-stat .th-count {
  font-style: normal;
}
.tridhya-homepage .th-marquee__head .th-stat span {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(13, 58, 84, 0.62);
}
.tridhya-homepage .th-marquee__head-support {
  align-self: end;
}
@media (min-width: 640px) {
  .tridhya-homepage .th-marquee__head .th-marquee__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   v5.27 — AI strip at the foot of the services section
   A dark petrol panel (same gradient family as the hero) with a
   masked grid motif and an aqua glow: two messages — "AI-first
   engineering" (we build with AI) and "agentic AI in production"
   (we ship AI agents) — icon tile + title + one line each, split
   by a hairline on desktop, stacked on smaller screens.
   ============================================================ */
.tridhya-homepage .th-ai-strip {
  position: relative;
  overflow: hidden;
  margin-top: 56px;
  padding: 40px 32px;
  border-radius: 20px;
  background: linear-gradient(158deg, #04283f 0%, #043453 55%, #054061 100%);
  color: #f4f5f7;
}
.tridhya-homepage .th-ai-strip__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(760px 420px at 88% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(760px 420px at 88% 0%, #000 0%, transparent 72%);
}
.tridhya-homepage .th-ai-strip__glow {
  position: absolute;
  right: -140px;
  top: -180px;
  width: 520px;
  height: 340px;
  border-radius: 999px;
  background: rgba(6, 182, 232, 0.16);
  filter: blur(120px);
}
.tridhya-homepage .th-ai-strip__inner {
  position: relative;
}
.tridhya-homepage .th-ai-strip__inner .th-eyebrow {
  margin-bottom: 28px;
}
.tridhya-homepage .th-ai-strip__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.tridhya-homepage .th-ai-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.tridhya-homepage .th-ai-strip__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 22px;
  color: var(--th-aqua);
  background: rgba(6, 182, 232, 0.14);
  border: 1px solid rgba(6, 182, 232, 0.35);
}
.tridhya-homepage .th-ai-strip__body h3 {
  margin: 4px 0 8px;
  font-family: var(--th-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: #f4f5f7;
}
.tridhya-homepage .th-ai-strip__body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(244, 245, 247, 0.72);
}
@media (min-width: 900px) {
  .tridhya-homepage .th-ai-strip {
    padding: 48px 52px;
  }
  .tridhya-homepage .th-ai-strip__cols {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .tridhya-homepage .th-ai-strip__item + .th-ai-strip__item {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 56px;
  }
  .tridhya-homepage .th-ai-strip__item:not(:first-child) {
    padding-right: 8px;
  }
}

/* ============================================================
   v5.29 — services tabs cleanup
   1. The 01-06 tab numbers are gone from the markup; the row
      grid drops the 40px number gutter to match.
   2. Flat cards: the detail panel and the active tab row lose
      their lift shadows — the hairline border and the aqua rail
      carry the separation.
   3. The panel CTA is now a .th-btn--aqua pill (swapped in the
      markup); the "Explore ..." text link stays after it.
   ============================================================ */
.tridhya-homepage .th-tabs__tab {
  grid-template-columns: minmax(0, 1fr) 26px;
}
.tridhya-homepage .th-tabs__panel {
  box-shadow: none;
}
.tridhya-homepage .th-tabs__tab.is-active {
  box-shadow: none;
}

/* ============================================================
   v5.30 — ONE BUTTON EVERYWHERE: the header "Contact us" look
   The header runs Bootstrap .btn-primary: #06b6e8 fill, white
   16px/400 text, 13x32 padding, square corners, hover #0592ba.
   Every .th-btn takes that geometry (the ghost variant keeps
   its own colors), and the aqua variant adopts the exact header
   colors — white text replaces the old dark-on-aqua.
   ============================================================ */
.tridhya-homepage .th-btn {
  padding: 13px 32px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.tridhya-homepage .th-hero__ctas .th-btn {
  padding: 13px 32px; /* retire the tighter hero-only padding */
}
.tridhya-homepage .th-btn--aqua {
  background: var(--th-aqua);
  color: #fff;
  box-shadow: none; /* the old "presence" glow went with the old design */
}
.tridhya-homepage .th-btn--aqua:hover {
  background: #0592ba;
  color: #fff;
}

/* ============================================================
   v5.31 — panel actions always stack
   The Explore link sits on its own line with the CTA button
   below it in every panel (the row layout only fit when both
   labels were short, so panels aligned differently).
   ============================================================ */
.tridhya-homepage .th-tabs__links {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* ============================================================
   v5.32 — case studies: 3-up infinite slider
   The scroll-snap scroller is replaced by a JS-translated track
   (three cloned sets): three cards centered in the container,
   neighbours peeking at the screen edges, blurred and dimmed.
   Arrows, dots, keyboard and pointer-drag all loop seamlessly.
   ============================================================ */
.tridhya-homepage .th-work-viewport {
  display: block;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  scroll-snap-type: none;
  cursor: grab;
}
.tridhya-homepage .th-work-viewport.is-dragging {
  cursor: grabbing;
}
.tridhya-homepage .th-work-track {
  display: flex;
  gap: 32px;
  will-change: transform;
}
.tridhya-homepage .th-work-track.is-animating {
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}
.tridhya-homepage .th-work-viewport .th-work-slide {
  flex: none;
  scroll-snap-align: none;
  transition: filter 0.45s ease, opacity 0.45s ease;
}
.tridhya-homepage .th-work-viewport .th-work-slide.is-peek {
  filter: blur(4px);
  opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  .tridhya-homepage .th-work-track.is-animating {
    transition: none;
  }
  .tridhya-homepage .th-work-viewport .th-work-slide {
    transition: none;
  }
}

/* ============================================================
   v5.33 — industries cards: flat hairline rest + full invert
   Base: hairline border replaces the floating shadow, a touch
   more padding, wider grid gaps. Hover: the whole card inverts
   to deep petrol — white title, light description, aqua icon
   tile, dark-bed reference chips — and lifts.
   ============================================================ */
.tridhya-homepage .th-ind-card {
  border: 1px solid var(--th-hairline);
  box-shadow: none;
  padding: 30px 28px 28px;
  transition: transform 0.3s var(--th-ease), box-shadow 0.3s var(--th-ease),
              background-color 0.35s var(--th-ease), border-color 0.35s var(--th-ease);
}
.tridhya-homepage .th-ind-card:hover {
  background-color: #043453;
  border-color: #043453;
  transform: translateY(-6px);
  box-shadow: 0 26px 52px rgba(2, 18, 32, 0.32);
}
.tridhya-homepage .th-ind-card:hover .th-ind-card__icon {
  background: rgba(6, 182, 232, 0.16);
  color: var(--th-aqua);
}
.tridhya-homepage .th-ind-card:hover .th-ind-card__title,
.tridhya-homepage .th-ind-card:hover h3 {
  color: #f4f5f7;
}
.tridhya-homepage .th-ind-card:hover .th-ind-card__desc,
.tridhya-homepage .th-ind-card:hover p {
  color: rgba(244, 245, 247, 0.72);
}
.tridhya-homepage .th-ind-card:hover .th-ind-card__refs-label {
  color: rgba(154, 225, 248, 0.6);
}
.tridhya-homepage .th-ind-card:hover .th-ind-card__ref-links a {
  background: rgba(6, 182, 232, 0.12);
  border-color: rgba(6, 182, 232, 0.35);
  color: #cfeafc;
}
.tridhya-homepage .th-ind-card:hover .th-ind-card__ref-links a:hover {
  background: var(--th-aqua);
  border-color: var(--th-aqua);
  color: var(--th-ink);
}
.tridhya-homepage .th-ind-grid,
.tridhya-homepage .th-ind-cards {
  gap: 20px;
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-ind-grid,
  .tridhya-homepage .th-ind-cards {
    gap: 20px;
  }
}

/* ============================================================
   v5.36 — why section: editorial layout, no cards
   The team photo is replaced by a framed visual (sticky on
   desktop), and the six differentiators drop their card boxes
   for a divided editorial list: icon left, title + line right.
   ============================================================ */
.tridhya-homepage .th-why__grid {
  margin-top: 40px;
}
.tridhya-homepage .th-why__art {
  padding: 0;
  background: #fff;
  border: 1px solid var(--th-hairline);
}
@media (min-width: 1024px) {
  .tridhya-homepage .th-why__art {
    grid-column: span 5;
    align-self: start;
    position: sticky;
    top: 112px;
  }
}
.tridhya-homepage .th-why__art img {
  display: block;
  width: 100%;
  height: auto;
}
.tridhya-homepage .th-why__matrix {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.tridhya-homepage .th-why__cell {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 18px;
  row-gap: 6px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--th-hairline);
  background: transparent;
}
.tridhya-homepage .th-why__cell:first-child {
  padding-top: 6px;
}
.tridhya-homepage .th-why__cell:last-child {
  border-bottom: none;
}
.tridhya-homepage .th-why__cell .th-why__icon {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 0;
  font-size: 20px;
}
.tridhya-homepage .th-why__cell h3 {
  margin: 2px 0 0;
  font-size: 1.125rem;
}
.tridhya-homepage .th-why__cell p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ============================================================
   v5.39 — work controls mirror the testimonials section:
   arrows on the left, progress bars on the right. The dashes
   become wide equal bars (flex, capped), right-aligned, the
   same rhythm as .th-voices__controls.
   ============================================================ */
.tridhya-homepage .th-work-controls {
  justify-content: space-between;
}
.tridhya-homepage .th-work-dots {
  margin-right: 0;
  flex: 1;
  justify-content: flex-end;
  gap: 12px;
}
.tridhya-homepage .th-work-dot {
  flex: 1;
  max-width: 72px;
  width: auto;
}

/* ============================================================
   v5.40 — voices: video testimonial cards + brand logo coins
   Each quote opens with a video card (thumbnail, circular play
   badge, duration chip) that opens a lightbox modal and plays.
   The author row drops the avatar photo and the right-side
   logo: the client logo becomes a round coin before the name.
   ============================================================ */
.tridhya-homepage .th-quote__video {
  position: relative;
  display: block;
  width: min(420px, 100%);
  margin: 0 0 22px;
  padding: 0;
  border: 1px solid rgba(244, 245, 247, 0.16);
  background: #04283f;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}
.tridhya-homepage .th-quote__video-thumb {
  display: block;
  overflow: hidden;
}
.tridhya-homepage .th-quote__video-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.82;
  transition: transform 0.5s var(--th-ease), opacity 0.3s ease;
}
.tridhya-homepage .th-quote__video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--th-petro);
  box-shadow: 0 8px 24px rgba(2, 18, 32, 0.45);
  transition: transform 0.25s var(--th-ease), background-color 0.25s ease;
}
.tridhya-homepage .th-quote__video-play .th-icon { width: 24px; height: 24px; }
.tridhya-homepage .th-quote__video-time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  background: rgba(2, 18, 32, 0.78);
  color: #f4f5f7;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.tridhya-homepage .th-quote__video:hover .th-quote__video-thumb img {
  transform: scale(1.04);
  opacity: 1;
}
.tridhya-homepage .th-quote__video:hover .th-quote__video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--th-aqua);
  color: var(--th-ink);
}
.tridhya-homepage .th-quote__video:focus-visible {
  outline: 2px solid var(--th-aqua);
  outline-offset: 2px;
}
/* client logo as a round coin before the author */
.tridhya-homepage .th-quote__brandlogo {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}
.tridhya-homepage .th-quote__brandlogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* lightbox */
.tridhya-homepage .th-video-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(2, 18, 32, 0.86);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.tridhya-homepage .th-video-modal.is-open {
  display: grid;
}
.tridhya-homepage .th-video-modal__frame {
  width: min(920px, 100%);
  background: #04283f;
  border: 1px solid rgba(244, 245, 247, 0.16);
}
.tridhya-homepage .th-video-modal__frame video {
  display: block;
  width: 100%;
  max-height: min(78vh, 640px);
}
.tridhya-homepage .th-video-modal__close {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 245, 247, 0.3);
  background: rgba(244, 245, 247, 0.06);
  color: #f4f5f7;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.tridhya-homepage .th-video-modal__close:hover {
  background: var(--th-aqua);
  border-color: var(--th-aqua);
  color: var(--th-ink);
}
.tridhya-homepage .th-video-modal__close .th-icon { width: 18px; height: 18px; }

/* ============================================================
   v5.41 — voices: video left, text right
   The active quote becomes a two-column grid — square video
   card on the left, quote text + author on the right. Below
   1024px it stacks (video above text).
   ============================================================ */
@media (min-width: 1024px) {
  .tridhya-homepage .th-quote.is-active {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    column-gap: 56px;
    row-gap: 24px;
    align-items: center;
  }
  .tridhya-homepage .th-quote.is-active .th-quote__video {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    margin: 0;
  }
  .tridhya-homepage .th-quote.is-active > p {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    max-width: none;
  }
  .tridhya-homepage .th-quote.is-active > footer {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
}
.tridhya-homepage .th-quote__video {
  width: min(400px, 100%);
}
.tridhya-homepage .th-quote__video-thumb img {
  aspect-ratio: 1 / 1;
}

/* ============================================================
   v5.50 — two-tone titles: the muted half goes brand cyan
   Every section title's second span (e.g. "global enterprises"
   in "Trusted by global enterprises") drops the soft light-blue
   for the aqua accent itself, on light and dark beds alike.
   ============================================================ */
.tridhya-homepage .th-h-muted,
.tridhya-homepage .th-work .th-h-muted,
.tridhya-homepage .th-voices .th-h-muted {
  color: var(--th-aqua);
}

/* v5.53 — service panel titles are links now: inherit the title
   look, take petrol on hover */
.tridhya-homepage .th-tabs__head h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.tridhya-homepage .th-tabs__head h3 a:hover {
  color: var(--th-petro);
}

/* ============================================================
   v5.51 — AI strip: square corners + four points
   The panel and icon tiles drop their radius (the site's
   buttons/cards are square), and two new points join the
   original pair: AI-ready data foundations and governed,
   secure AI. Four items sit in a 2x2 grid on desktop.
   ============================================================ */
.tridhya-homepage .th-ai-strip {
  border-radius: 0;
}
.tridhya-homepage .th-ai-strip__icon {
  border-radius: 0;
}
@media (min-width: 900px) {
  .tridhya-homepage .th-ai-strip__cols {
    grid-template-columns: 1fr 1fr;
    gap: 36px 56px;
  }
  /* the old vertical divider assumed a single row; retire it */
  .tridhya-homepage .th-ai-strip__item + .th-ai-strip__item {
    border-left: none;
    padding-left: 0;
  }
  .tridhya-homepage .th-ai-strip__item:not(:first-child) {
    padding-right: 0;
  }
}

/* v5.52 — AI strip gets its main heading (universal two-tone
   pattern, light variant for the dark bed; the muted half picks
   up the global cyan from v5.50) */
.tridhya-homepage .th-ai-strip__inner .th-eyebrow {
  margin-bottom: 14px;
}
.tridhya-homepage .th-ai-strip__inner h2 {
  margin: 0 0 30px;
  max-width: 26ch;
  font-family: var(--th-font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #f4f5f7;
}

/* ============================================================
   v5.56 — the Get Started CTA goes light
   Same composition (kicker, big two-tone title, sub, buttons)
   on the light brand wash instead of the dark bed, so the page
   closes: dark voices band, cyan trust strip, light CTA, footer.
   ============================================================ */
.tridhya-homepage .th-cta {
  background:
    radial-gradient(1000px 620px at 12% 0%, rgba(6, 182, 232, 0.1) 0%, transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f3fbff 60%, #eaf6fd 100%);
}
.tridhya-homepage .th-cta .th-eyebrow--light {
  color: var(--th-petro);
}
.tridhya-homepage .th-cta h2 {
  color: #00517c;
}
.tridhya-homepage .th-cta__sub {
  color: rgba(13, 58, 84, 0.7);
}
.tridhya-homepage .th-cta .th-btn--ghost-light {
  border: 1px solid rgba(0, 81, 124, 0.35);
  background: transparent;
  color: var(--th-petro);
}
.tridhya-homepage .th-cta .th-btn--ghost-light:hover {
  border-color: var(--th-aqua);
  color: var(--th-aqua);
}
.tridhya-homepage .th-cta .th-approach__grid {
  background-image:
    linear-gradient(to right, rgba(0, 81, 124, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 81, 124, 0.06) 1px, transparent 1px);
}