/* ==========================================================================
   BHARAT BHUJAL TECH PVT. LTD. - EXACT HEADER, BANNER & FOOTER STYLESHEET
   ========================================================================== */

/* --- Design Tokens --- */
:root {
  --primary-blue: #0080ff;
  --primary-hover: #0066cc;
  --dark-navy: #07152b;
  --header-dark: #0c1e3a;
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --text-light-footer: #94a3b8;
  --border-light: #e2e8f0;
  --bg-light-pill: #f0f5fa;
  --cyan-accent: #38bdf8;

  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --transition: all 0.25s ease;
}

/* Final mobile guardrails for the services directory. */
@media (max-width: 640px) {
  .services-directory-page .services-directory-hero .contact-hero-title {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 2rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .services-directory-page .services-directory-hero .contact-hero-title span.highlight-blue {
    display: block !important;
    white-space: normal !important;
  }

  .services-directory-page .services-directory-hero .contact-hero-subtitle {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 0.92rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .services-directory-page .services-directory-intro .services-main-heading {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.9rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .services-directory-page .services-directory-intro .services-subtext-para {
    width: 100% !important;
    max-width: 320px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Valued clients reference layout: content, 2x2 metrics, artwork and logo rail. */
.valued-clients-section {
  position: relative;
  isolation: isolate;
  min-height: 780px;
  padding: 42px 0 62px;
  overflow: hidden;
  background:
    radial-gradient(circle at 19% 12%, rgba(255, 255, 255, 0.9), transparent 28%),
    radial-gradient(circle at 81% 20%, rgba(115, 204, 255, 0.25), transparent 31%),
    linear-gradient(145deg, #f8fcff 0%, #e9f6ff 54%, #d9effc 100%);
}

.valued-clients-section::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -104px;
  height: 230px;
  z-index: -1;
  opacity: 0.72;
  background:
    radial-gradient(ellipse at 14% 78%, rgba(94, 169, 231, 0.34) 0 19%, transparent 20%),
    radial-gradient(ellipse at 38% 88%, rgba(119, 191, 241, 0.3) 0 21%, transparent 22%),
    radial-gradient(ellipse at 71% 74%, rgba(86, 170, 227, 0.28) 0 22%, transparent 23%),
    linear-gradient(174deg, transparent 33%, rgba(80, 169, 234, 0.22) 34% 56%, transparent 57%);
  filter: blur(0.3px);
}

.clients-container {
  width: min(100% - 132px, 1800px);
  max-width: 1800px;
  padding: 0;
}

.clients-hero-grid {
  display: grid;
  grid-template-columns: minmax(430px, 0.98fr) minmax(330px, 0.62fr) minmax(610px, 1.18fr);
  align-items: center;
  gap: clamp(28px, 2.6vw, 58px);
  min-height: 470px;
  margin-bottom: 28px;
}

.clients-left-col {
  width: auto;
  max-width: 640px;
  padding: 0;
  margin: 0;
  z-index: 3;
}

.clients-category-pill {
  margin-bottom: 22px;
}

.clients-main-heading {
  max-width: 600px;
  margin-bottom: 22px;
  font-size: clamp(3rem, 4.1vw, 5.1rem);
  line-height: 1.03;
  letter-spacing: -2.4px;
}

.clients-subtext-para {
  max-width: 620px;
  margin-bottom: 28px;
  font-size: clamp(1rem, 1.12vw, 1.22rem);
  line-height: 1.58;
}

.clients-action-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.btn-clients-explore {
  min-height: 62px;
  padding: 16px 30px;
  font-size: 1rem;
}

.btn-client-story {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 8px 22px 8px 8px;
  color: #102d58;
  border: 1px solid rgba(196, 220, 243, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 26px rgba(0, 105, 200, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-client-story:hover {
  color: #102d58;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(0, 105, 200, 0.17);
}

.client-story-play {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding-left: 3px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #1798ff, #0874e8);
  box-shadow: 0 8px 18px rgba(0, 119, 255, 0.28);
}

.client-story-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.client-story-copy strong {
  font-size: 1.05rem;
  line-height: 1.1;
}

.client-story-copy small {
  color: #607796;
  font-size: 0.82rem;
}

.clients-stats-row {
  width: auto;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-self: center;
  z-index: 4;
}

.client-stat-card {
  min-height: 174px;
  padding: 25px 24px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  border: 1px solid rgba(214, 230, 244, 0.98);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 18px 36px rgba(0, 91, 171, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.client-stat-card:nth-child(2) .cstat-icon-circle {
  background: linear-gradient(145deg, #22c878, #099b5b);
}

.client-stat-card:nth-child(3) .cstat-icon-circle {
  background: linear-gradient(145deg, #ff9a16, #f36d00);
}

.client-stat-card:nth-child(4) .cstat-icon-circle {
  background: linear-gradient(145deg, #9b5cff, #6323d8);
}

.cstat-icon-circle {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  font-size: 1.22rem;
}

.cstat-num,
.cstat-bold {
  font-size: clamp(1.45rem, 1.7vw, 2rem);
  letter-spacing: -0.5px;
}

.cstat-lbl {
  margin-top: 5px;
  font-size: 0.92rem;
  line-height: 1.25;
}

.clients-right-visual-wrap {
  position: relative;
  inset: auto;
  width: 100%;
  height: 460px;
  justify-self: stretch;
  z-index: 2;
}

.clients-site-artwork-box {
  width: 100%;
  max-width: none;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 112px 0 0 112px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(0, 85, 167, 0.22), -18px 0 0 rgba(85, 174, 247, 0.28);
}

.clients-site-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: none;
  filter: saturate(1.08) contrast(1.02);
}

.clients-site-artwork-box:hover .clients-site-img {
  transform: scale(1.035);
}

.site-glass-fade-overlay {
  background: linear-gradient(180deg, rgba(10, 45, 82, 0.02), transparent 54%, rgba(5, 33, 71, 0.2));
}

.clients-live-badge {
  right: 26px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 294px;
  padding: 13px 18px;
  color: #0d2d5b;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 12px 28px rgba(0, 57, 121, 0.18);
  backdrop-filter: blur(12px);
  font-size: 0.98rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.clients-live-badge b {
  color: #0477ef;
  font-weight: 800;
}

.clients-live-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #1689f4;
  box-shadow: 0 7px 15px rgba(0, 126, 255, 0.26);
}

.client-logos-showcase-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(100%, 1780px);
  margin: 0 auto 24px;
  z-index: 5;
}

.client-logos-showcase-card {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  padding: 28px 34px;
  border-radius: 32px;
  border: 1px solid rgba(218, 235, 248, 0.95);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 42px rgba(0, 73, 145, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.client-logos-viewport {
  padding: 0;
  mask-image: none;
}

.client-logos-grid {
  gap: 0;
  animation-duration: 28s;
}

.client-logo-box {
  flex: 0 0 clamp(174px, 10.2vw, 224px);
  height: 76px;
  padding: 8px 16px;
  border: 0;
  border-right: 1px solid rgba(211, 229, 244, 0.95);
  border-radius: 0;
  background: transparent;
}

.client-logo-box:last-child {
  border-right: 0;
}

.client-logo-box .logo-svg {
  max-height: 58px;
}

.client-logo-nav {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  padding: 0;
  color: #087cf0;
  border: 1px solid rgba(204, 226, 244, 0.98);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(0, 89, 173, 0.14);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.client-logo-nav:hover {
  color: #fff;
  background: #087cf0;
  transform: scale(1.06);
}

@media (max-width: 1390px) and (min-width: 901px) {
  .clients-container {
    width: min(100% - 72px, 1240px);
  }

  .clients-hero-grid {
    grid-template-columns: minmax(360px, 1fr) minmax(270px, 0.72fr) minmax(440px, 1.08fr);
    gap: 24px;
  }

  .clients-main-heading {
    font-size: clamp(2.65rem, 4.4vw, 4rem);
  }

  .client-stat-card {
    min-height: 150px;
    padding: 18px;
  }

  .clients-right-visual-wrap {
    height: 390px;
  }

  .client-logos-showcase-shell {
    gap: 12px;
  }

  .client-logo-nav {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

@media (max-width: 900px) {
  .valued-clients-section {
    min-height: auto;
    padding: 56px 0 72px;
  }

  .clients-container {
    width: min(100% - 36px, 720px);
  }

  .clients-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-height: 0;
    margin-bottom: 32px;
  }

  .clients-left-col,
  .clients-stats-row,
  .clients-right-visual-wrap {
    width: 100%;
    max-width: none;
  }

  .clients-left-col {
    order: 1;
  }

  .clients-stats-row {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clients-right-visual-wrap {
    order: 3;
    height: clamp(280px, 63vw, 450px);
  }

  .clients-main-heading {
    font-size: clamp(2.6rem, 9vw, 4rem);
  }

  .client-stat-card {
    min-height: 138px;
    padding: 19px;
  }

  .client-logos-showcase-shell {
    gap: 8px;
  }

  .client-logos-showcase-card {
    padding: 20px 18px;
  }

  .client-logo-nav {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 0.8rem;
  }
}

@media (max-width: 560px) {
  .clients-action-wrap {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .btn-clients-explore,
  .btn-client-story {
    width: 100%;
    justify-content: center;
  }

  .clients-stats-row {
    gap: 10px;
  }

  .client-stat-card {
    min-height: 126px;
    padding: 14px;
    gap: 10px;
    border-radius: 18px;
  }

  .cstat-icon-circle {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 0.95rem;
  }

  .cstat-num,
  .cstat-bold {
    font-size: 1.15rem;
  }

  .cstat-lbl {
    font-size: 0.72rem;
  }

  .clients-site-artwork-box {
    border-radius: 48px 0 0 48px;
  }

  .clients-live-badge {
    right: 12px;
    bottom: 12px;
    min-width: 0;
    max-width: calc(100% - 24px);
    padding: 9px 12px;
    font-size: 0.75rem;
  }

  .clients-live-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .client-logo-nav {
    display: none;
  }

  .client-logos-showcase-card {
    width: 100%;
  }
}

/* Shared service overview: match the supplied left-copy / right-visual reference. */
body[data-service] .premium-overview-section {
  position: relative;
  overflow: hidden;
  padding: 62px 0 70px;
  background:
    radial-gradient(circle at 94% 42%, rgba(112, 201, 255, 0.18), transparent 31%),
    linear-gradient(180deg, #f4fbff 0%, #ffffff 100%);
}

body[data-service] .premium-overview-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #061d33 0%, #0a78be 48%, #1dd6a2 100%);
}

body[data-service] .premium-overview-reference {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(460px, 1.02fr);
  align-items: center;
  gap: clamp(42px, 6vw, 92px);
  max-width: 1280px;
  margin: 0 auto;
}

body[data-service] .premium-overview-reference-copy {
  min-width: 0;
}

body[data-service] .premium-overview-reference-kicker {
  display: inline-flex;
  align-items: center;
  color: #117ce4;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1.4px;
  line-height: 1;
}

body[data-service] .premium-overview-reference-kicker::before {
  content: '';
  width: 26px;
  height: 3px;
  margin-right: 10px;
  border-radius: 99px;
  background: #1387ed;
}

body[data-service] .premium-overview-reference-copy h2 {
  max-width: 650px;
  margin: 18px 0 23px;
  color: #08284d;
  font-size: clamp(2rem, 3.35vw, 3.2rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -1.5px;
}

body[data-service] .premium-overview-reference-callout {
  max-width: 650px;
  padding: 0 0 0 24px;
  border-left: 4px solid #1685ef;
}

body[data-service] .premium-overview-reference-callout p,
body[data-service] .premium-overview-reference-secondary {
  margin: 0;
  color: #334d6a;
  font-size: 0.98rem;
  line-height: 1.72;
}

body[data-service] .premium-overview-reference-secondary {
  max-width: 650px;
  margin-top: 24px;
  color: #536c86;
}

body[data-service] .premium-overview-reference-visual {
  position: relative;
  min-width: 0;
}

body[data-service] .premium-overview-reference-visual::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 12px -12px -12px 12px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(58, 164, 239, 0.26), rgba(132, 211, 255, 0.06));
  filter: blur(2px);
}

body[data-service] .premium-overview-reference-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1.48 / 1;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  background: #dceefa;
  box-shadow: 0 22px 40px rgba(28, 82, 124, 0.2);
}

@media (max-width: 980px) {
  body[data-service] .premium-overview-reference {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  body[data-service] .premium-overview-reference-copy {
    max-width: 760px;
  }

  body[data-service] .premium-overview-reference-visual {
    width: min(100%, 760px);
  }
}

@media (max-width: 560px) {
  body[data-service] .premium-overview-section {
    padding: 52px 0 58px;
  }

  body[data-service] .premium-overview-reference {
    gap: 28px;
  }

  body[data-service] .premium-overview-reference-copy h2 {
    margin: 15px 0 20px;
    font-size: 2rem;
    letter-spacing: -0.8px;
  }

  body[data-service] .premium-overview-reference-callout {
    padding-left: 16px;
  }

  body[data-service] .premium-overview-reference-callout p,
  body[data-service] .premium-overview-reference-secondary {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  body[data-service] .premium-overview-reference-visual img {
    aspect-ratio: 1.2 / 1;
    border-radius: 14px;
  }
}

/* FAQ final composition: no search bar, stronger section heading, right accordion raised. */
@media (min-width: 1200px) {
  .faq-answers-section {
    padding: 54px 0 92px;
    background:
      radial-gradient(circle at 78% 5%, rgba(105, 211, 255, 0.24), transparent 31%),
      radial-gradient(circle at 8% 58%, rgba(128, 204, 255, 0.13), transparent 28%),
      linear-gradient(145deg, #f8fcff 0%, #e9f6ff 55%, #f5fbff 100%);
  }

  .faq-container {
    display: grid;
    grid-template-columns: minmax(500px, 0.82fr) minmax(650px, 1.18fr);
    column-gap: clamp(56px, 6vw, 112px);
    row-gap: 0;
    width: min(100% - 128px, 1760px);
    max-width: 1760px;
  }

  .faq-header-box {
    grid-column: 1;
    grid-row: 1;
    display: block;
    max-width: 720px;
    margin: 0;
    text-align: left;
  }

  .faq-category-pill {
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }

  .faq-main-heading {
    max-width: 700px;
    margin-bottom: 20px;
    color: #071e3d;
    font-family: var(--font-heading);
    font-size: clamp(3.25rem, 4.2vw, 5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -2.2px;
  }

  .faq-main-heading .highlight-blue-txt {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
    color: #087cf0;
  }

  .faq-main-heading .highlight-blue-txt::after {
    content: '';
    position: absolute;
    left: 1%;
    right: 3%;
    bottom: 0;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #087cf0, #38bdf8);
    transform: rotate(-1.4deg);
  }

  .faq-subtext-para {
    max-width: 650px;
    margin: 0;
    color: #526b87;
    font-size: 1.05rem;
    line-height: 1.65;
  }

  .faq-main-grid {
    display: contents;
  }

  .faq-left-droplet-col {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    align-self: start;
    margin-top: 54px;
    justify-content: flex-start;
  }

  .faq-droplet-artwork-wrap {
    width: min(100%, 590px);
    max-width: 590px;
  }

  .faq-droplet-img {
    filter: drop-shadow(0 22px 34px rgba(0, 112, 243, 0.17));
  }

  .faq-right-accordion-grid {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
  }

  .faq-item-header {
    min-height: 62px;
    padding: 11px 17px 11px 14px;
    border-radius: 19px;
    border-color: rgba(191, 219, 254, 0.98);
    box-shadow: 0 9px 22px rgba(0, 80, 160, 0.075);
  }

  .faq-question-title {
    color: #0c2d58;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
  }

  .faq-item-body {
    margin-left: 0;
  }

  .faq-item-body p {
    padding: 15px 19px;
    color: #526b87;
    border: 1px solid rgba(215, 233, 248, 0.9);
    background: rgba(239, 248, 255, 0.92);
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .faq-search-bar {
    display: none;
  }

  .faq-answers-section {
    padding-top: 54px;
  }

  .faq-header-box {
    margin-bottom: 30px;
  }

  .faq-main-grid {
    align-items: start;
  }

  .faq-right-accordion-grid {
    margin-top: -8px;
  }
}

@media (max-width: 900px) {
  .faq-search-bar {
    display: none;
  }

  .faq-main-heading {
    font-size: clamp(2.65rem, 10vw, 4rem);
  }

  .faq-main-grid {
    align-items: start;
  }

  .faq-right-accordion-grid {
    margin-top: 0;
  }
}

/* ======================================================================
   ABOUT MOTION + PREMIUM BACKGROUND
   ====================================================================== */
.about-bharat-section {
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 22%, rgba(89, 190, 255, 0.28), transparent 24%),
    radial-gradient(circle at 10% 84%, rgba(64, 211, 192, 0.12), transparent 25%),
    linear-gradient(135deg, #fbfdff 0%, #eef8ff 46%, #e5f3ff 100%);
}

.about-bharat-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(rgba(0, 132, 255, 0.2) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.48) 42.2% 42.35%, transparent 42.5% 100%);
  background-size: 24px 24px, 100% 100%;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.2));
}

.about-bharat-section::after {
  content: '';
  position: absolute;
  top: 8%;
  right: 18%;
  width: 360px;
  height: 360px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(0, 132, 255, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 26px rgba(0, 132, 255, 0.035),
    0 0 0 54px rgba(0, 132, 255, 0.022);
  animation: aboutOrbitalPulse 9s ease-in-out infinite;
}

.about-motion-ready .about-left-col>*,
.about-motion-ready .about-right-col {
  opacity: 0;
}

.about-motion-ready .about-left-col>* {
  transform: translateY(22px);
}

.about-motion-ready .about-right-col {
  transform: translateX(82px) scale(0.96);
}

.about-bharat-section.is-visible .about-left-col>*,
.about-bharat-section.is-visible .about-right-col {
  opacity: 1;
  transform: none;
}

.about-bharat-section.is-visible .about-hero-badge {
  animation: aboutFadeUp 0.7s 0.05s both cubic-bezier(0.22, 1, 0.36, 1);
}

.about-bharat-section.is-visible .about-main-headline {
  animation: aboutFadeUp 0.75s 0.14s both cubic-bezier(0.22, 1, 0.36, 1);
}

.about-bharat-section.is-visible .about-company-desc {
  animation: aboutFadeUp 0.75s 0.23s both cubic-bezier(0.22, 1, 0.36, 1);
}

.about-bharat-section.is-visible .about-bento-card {
  animation: aboutFadeUp 0.72s both cubic-bezier(0.22, 1, 0.36, 1);
}

.about-bharat-section.is-visible .about-bento-card:nth-child(1) {
  animation-delay: 0.3s;
}

.about-bharat-section.is-visible .about-bento-card:nth-child(2) {
  animation-delay: 0.38s;
}

.about-bharat-section.is-visible .about-bento-card:nth-child(3) {
  animation-delay: 0.46s;
}

.about-bharat-section.is-visible .about-bento-card:nth-child(4) {
  animation-delay: 0.54s;
}

.about-bharat-section.is-visible .about-cta-action-row {
  animation: aboutFadeUp 0.75s 0.64s both cubic-bezier(0.22, 1, 0.36, 1);
}

.about-bharat-section.is-visible .about-right-col {
  animation: aboutSlideFromRight 0.95s 0.18s both cubic-bezier(0.16, 1, 0.3, 1);
}

.about-bharat-section.is-visible .scene-drilling {
  animation: sceneDrillingIn 0.92s 0.3s both cubic-bezier(0.16, 1, 0.3, 1);
}

.about-bharat-section.is-visible .scene-water {
  animation: sceneWaterIn 0.8s 0.5s both cubic-bezier(0.16, 1, 0.3, 1);
}

.about-bharat-section.is-visible .scene-aquifer {
  animation: sceneAquiferIn 0.88s 0.66s both cubic-bezier(0.16, 1, 0.3, 1);
}

.about-bharat-section.is-visible .showcase-badge {
  animation: badgePopIn 0.65s both cubic-bezier(0.16, 1, 0.3, 1), badgeFloat 6s 1.7s ease-in-out infinite;
}

.about-bharat-section.is-visible .showcase-yield {
  animation-delay: 0.52s, 2s;
}

.about-bharat-section.is-visible .showcase-experience {
  animation-delay: 0.62s, 2.3s;
}

.about-bharat-section.is-visible .showcase-resources {
  animation-delay: 0.72s, 2.15s;
}

.about-bharat-section.is-visible .showcase-mapping {
  animation-delay: 0.78s, 2.5s;
}

.about-bharat-section.is-visible .showcase-pan {
  animation-delay: 0.84s, 2.65s;
}

@keyframes aboutFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aboutSlideFromRight {
  from {
    opacity: 0;
    transform: translateX(82px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes sceneDrillingIn {
  from {
    opacity: 0;
    transform: translateX(100px) rotate(9deg) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateX(0) rotate(3deg) scale(1);
  }
}

@keyframes sceneWaterIn {
  from {
    opacity: 0;
    transform: translateX(90px) rotate(10deg) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(0) rotate(3deg) scale(1);
  }
}

@keyframes sceneAquiferIn {
  from {
    opacity: 0;
    transform: translateX(75px) rotate(-8deg) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateX(0) rotate(-1deg) scale(1);
  }
}

@keyframes badgePopIn {
  from {
    opacity: 0;
    transform: translateX(38px) scale(0.88);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes badgeFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes aboutOrbitalPulse {

  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .about-bharat-section::after,
  .about-bharat-section.is-visible .about-left-col>*,
  .about-bharat-section.is-visible .about-right-col,
  .about-bharat-section.is-visible .scene-drilling,
  .about-bharat-section.is-visible .scene-water,
  .about-bharat-section.is-visible .scene-aquifer,
  .about-bharat-section.is-visible .showcase-badge {
    animation: none !important;
    transition: none !important;
  }

  .about-motion-ready .about-left-col>*,
  .about-motion-ready .about-right-col,
  .about-bharat-section.is-visible .about-left-col>*,
  .about-bharat-section.is-visible .about-right-col {
    opacity: 1;
    transform: none;
  }
}

/* --- Global Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 15px;
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background-color: #ffffff;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-main-title,
.about-main-headline,
.section-title,
.section-heading,
.title-bold,
.card-desc h4,
.feat-content h4,
.service-card-item h3,
.stat-meta .txt-bold {
  font-family: var(--font-heading) !important;
  letter-spacing: 0.2px;
}

.container {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 40px;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

.text-white {
  color: #ffffff !important;
}

.text-cyan {
  color: var(--cyan-accent) !important;
}

.text-blue {
  color: var(--primary-blue) !important;
}

/* ==========================================================================
   1. TOP BAR (DARK NAVY - EXACT AS SCREENSHOT)
   ========================================================================== */
.top-bar {
  background: var(--dark-navy);
  color: #d1d5db;
  font-size: 0.83rem;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.top-info-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-weight: 500;
  font-size: 0.83rem;
}

.top-info-item i {
  color: #ffffff;
  font-size: 0.88rem;
}

.top-info-item:hover {
  color: #ffffff;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.top-quick-links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.83rem;
  font-weight: 500;
}

.top-quick-links a {
  color: #cbd5e1;
}

.top-quick-links a:hover {
  color: #ffffff;
}

.v-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
}

.v-sep-thick {
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.25);
}

.top-social-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-social-group a {
  color: #cbd5e1;
  font-size: 0.92rem;
}

.top-social-group a:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

/* ==========================================================================
   2. MAIN NAVBAR (WHITE / SHADOW - EXACT AS SCREENSHOT)
   ========================================================================== */
.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #f1f5f9;
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 24px;
}

/* Logo */
.brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-main-logo {
  height: 52px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  display: block;
}

/* Nav Menu */
.nav-menu {
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-item {
  position: relative;
}

.nav-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  padding: 10px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--primary-blue);
}

.nav-link.active {
  color: var(--primary-blue);
  font-weight: 700;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-blue);
  border-radius: 2px;
}

.nav-arrow {
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.has-dropdown:hover .nav-arrow {
  transform: rotate(180deg);
  color: var(--primary-blue);
}

.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 320px;
  display: grid;
  grid-template-columns: repeat(2, minmax(235px, 1fr));
  gap: 2px 6px;
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border-light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  z-index: 100;
}

.has-dropdown:hover .dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}

.dropdown-list li a i {
  color: var(--primary-blue);
  font-size: 0.88rem;
}

.dropdown-list li a:hover {
  background: #f0f7ff;
  color: var(--primary-blue);
  transform: translateX(4px);
}

/* Right Actions */
.nav-right-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-search-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.btn-search-circle:hover {
  background: #e2e8f0;
  color: var(--primary-blue);
}

.btn-inquiry-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #0070f3 0%, #0056cc 100%);
  color: #ffffff;
  padding: 11px 24px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.2px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 112, 243, 0.38);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-inquiry-pill:hover {
  background: linear-gradient(135deg, #005fcc 0%, #004599 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 112, 243, 0.5);
  color: #ffffff;
}

.btn-inquiry-pill .inquiry-icon {
  font-size: 0.95rem;
}

.btn-inquiry-pill .arrow-icon {
  font-size: 0.82rem;
  transition: transform 0.2s ease;
}

.btn-inquiry-pill:hover .arrow-icon {
  transform: translateX(3px);
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}

.mobile-toggle .bar {
  width: 24px;
  height: 3px;
  background: var(--header-dark);
  border-radius: 2px;
}

/* ==========================================================================
   3. HERO BANNER SECTION
   ========================================================================== */
.hero-banner {
  position: relative;
  min-height: 700px;
  background:
    radial-gradient(ellipse at 8% 12%, rgba(255, 255, 255, 0.42) 0%, transparent 38%),
    radial-gradient(ellipse at 28% 88%, rgba(14, 150, 220, 0.15) 0%, transparent 48%),
    linear-gradient(135deg, #eaf5ff 0%, #dff0ff 48%, #cfe9f9 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 0 90px 0;
}

.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.20) 0%, rgba(208, 235, 251, 0.08) 78%, transparent 100%),
    radial-gradient(ellipse at 12% 82%, rgba(79, 177, 226, 0.12), transparent 48%);
}

.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.72;
  background: radial-gradient(ellipse at 8% 112%,
    transparent 0 92px,
    rgba(16, 132, 195, 0.10) 93px 95px,
    transparent 96px 132px,
    rgba(16, 132, 195, 0.075) 133px 135px,
    transparent 136px 172px,
    rgba(16, 132, 195, 0.05) 173px 175px,
    transparent 176px);
}

/* Background Video - Right Aligned with Seamless Light Blend */
.hero-video-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  z-index: 1;
  pointer-events: none;
}

.hero-video-bg {
  position: absolute;
  top: 50%;
  right: 0;
  left: auto;
  width: 62%;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  will-change: opacity;
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 2%,
      #000000 6%,
      #000000 100%);
  mask-image: linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 2%,
      #000000 6%,
      #000000 100%);
}

.hero-video-bg.video-visible {
  opacity: 1;
}

@media (max-width: 767px) {
  .hero-video-bg {
    right: 0;
    width: 100%;
  }
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      #f8fbff 0%,
      #f8fbff 10%,
      rgba(248, 251, 255, 0.70) 18%,
      rgba(248, 251, 255, 0.15) 25%,
      transparent 32%,
      transparent 100%);
  pointer-events: none;
}

/* ==========================================================================
   HERO CONTENT CONTAINER (CLEAN FULL-VIDEO HERO LAYOUT)
   ========================================================================== */
.hero-container {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  width: 100%;
}

.hero-left-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  visibility: visible;
  opacity: 1;
}

/* Sleek Micro Badge */
.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(2, 132, 199, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(2, 132, 199, 0.25);
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.10);
  margin-bottom: 20px;
}

.badge-pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: pulse-green 1.8s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.badge-title-txt {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #0284c7;
  text-transform: uppercase;
}

/* Main Heading */
.hero-main-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -1.2px;
  color: #0c2340;
  margin-bottom: 18px;
  text-shadow: 0 2px 20px rgba(0, 128, 255, 0.06);
}

.text-water-gradient {
  background: linear-gradient(135deg, #0284c7 0%, #0070e0 45%, #0369a1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  position: relative;
  filter: drop-shadow(0 2px 10px rgba(0, 128, 255, 0.2));
}

/* Crisp Concise Subtitle */
.hero-subtext-para {
  font-size: 1.15rem;
  color: #334155;
  line-height: 1.65;
  margin-bottom: 34px;
  max-width: 580px;
  font-weight: 450;
  text-shadow: none;
}

/* Action Buttons */
.hero-buttons-flex {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 42px;
  flex-wrap: wrap;
}

.btn-hero-explore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #0080ff 0%, #005fcc 100%);
  color: #ffffff;
  padding: 14px 30px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.98rem;
  box-shadow: 0 8px 24px rgba(0, 110, 230, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-hero-explore:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 110, 230, 0.5);
  background: linear-gradient(135deg, #0284c7 0%, #0070e0 100%);
  color: #ffffff;
}

.btn-hero-talk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.90);
  color: #0c2340;
  border: 1.5px solid rgba(2, 132, 199, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px 26px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.98rem;
  box-shadow: 0 4px 18px rgba(12, 35, 64, 0.06);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-hero-talk:hover {
  background: #ffffff;
  border-color: #0080ff;
  color: #0080ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 128, 255, 0.18);
}

/* Elevated Glass Metric Dock */
.hero-stats-bar,
.hero-banner .hero-stats-bar {
  display: flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 12px 18px !important;
  border-radius: 18px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 16px 45px rgba(12, 35, 64, 0.08), 0 2px 8px rgba(0, 128, 255, 0.05) !important;
  max-width: fit-content !important;
  gap: 0 !important;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 18px;
  position: relative;
}

.stat-item:not(:last-child)::after,
.hero-banner .hero-stats-bar .stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(203, 213, 225, 0.8) !important;
}

.stat-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.22);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.10);
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}

.stat-item:hover .stat-icon-circle {
  transform: scale(1.08);
  background: rgba(0, 128, 255, 0.18);
  border-color: #0080ff;
  color: #0070e0;
}

.stat-meta {
  display: flex;
  flex-direction: column;
}

.stat-meta .num,
.stat-meta .txt-bold,
.hero-banner .hero-stats-bar .stat-meta .num,
.hero-banner .hero-stats-bar .stat-meta .txt-bold {
  font-size: 1.18rem;
  font-weight: 800;
  color: #0c2340 !important;
  line-height: 1.1;
}

.stat-meta .lbl,
.hero-banner .hero-stats-bar .stat-meta .lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b !important;
  line-height: 1.2;
}


/* ==========================================================================
   HERO RIGHT: MODERN VISUAL SHOWCASE WITH STRATUM PANEL
   ========================================================================== */
.hero-visual-showcase {
  display: flex;
  gap: 20px;
  align-items: stretch;
  position: relative;
  z-index: 5;
}

.hero-showcase-card {
  flex: 1;
  background: #ffffff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 80, 200, 0.16), 0 0 0 1px rgba(186, 230, 253, 0.8);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hero-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 75px rgba(0, 80, 200, 0.22);
}

.showcase-img-box {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  background: #0f172a;
}

.showcase-real-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.hero-showcase-card:hover .showcase-real-photo {
  transform: scale(1.05);
}

.showcase-photo-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 21, 43, 0.45) 0%, transparent 40%, rgba(7, 21, 43, 0.75) 100%);
  pointer-events: none;
}

.showcase-live-status {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.25);
  z-index: 3;
}

.live-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  animation: pulse-green 1.5s infinite;
}

/* Floating Metric Badges */
.hero-float-metric {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  padding: 10px 16px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.95);
  z-index: 3;
  transition: transform 0.3s ease;
}

.hero-float-metric:hover {
  transform: scale(1.05);
}

.metric-tr {
  top: 18px;
  right: 18px;
}

.metric-bl {
  bottom: 20px;
  left: 18px;
}

.hfm-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1rem;
}

.bg-water-blue {
  background: linear-gradient(135deg, #0080ff 0%, #0284c7 100%);
}

.bg-eco-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.hfm-content {
  display: flex;
  flex-direction: column;
}

.hfm-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--header-dark);
  line-height: 1.1;
}

.hfm-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
}

/* Switcher Bar on Bottom of Card */
.showcase-switcher-bar {
  padding: 14px 18px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e2e8f0;
}

.switcher-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.switcher-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.sw-pill:hover {
  background: #e0f2fe;
  color: var(--primary-blue);
  border-color: #bae6fd;
}

.sw-pill.active {
  background: var(--primary-blue);
  color: #ffffff;
  border-color: var(--primary-blue);
  box-shadow: 0 4px 12px rgba(0, 128, 255, 0.3);
}

/* 4 Geology Stratum Cards Column */
.hero-geology-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 250px;
  flex-shrink: 0;
  justify-content: center;
}

.geology-card {
  position: relative;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.geology-card:hover {
  transform: translateX(-6px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 128, 255, 0.2);
  border-color: #38bdf8;
  background: #ffffff;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.topsoil-ico {
  background: #fef3c7;
  color: #b45309;
}

.sand-ico {
  background: #e0f2fe;
  color: #0284c7;
}

.aquifer-ico {
  background: linear-gradient(135deg, #0080ff 0%, #38bdf8 100%);
  color: #ffffff;
  position: relative;
}

.rock-ico {
  background: #f1f5f9;
  color: #334155;
}

.ping-ring {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid #38bdf8;
  animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {

  75%,
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.card-desc {
  flex: 1;
}

.card-desc h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--header-dark);
  line-height: 1.2;
}

.card-desc span {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.card-chevron {
  color: var(--text-muted);
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.geology-card:hover .card-chevron {
  color: var(--primary-blue);
  transform: translateX(3px);
}

.card-aquifer-highlight {
  border-color: #38bdf8;
  box-shadow: 0 8px 24px rgba(0, 128, 255, 0.2);
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
}

.arm-highlight {
  background: var(--primary-blue);
  height: 2.5px;
}

/* Bottom Water Wave */
.hero-bottom-wave-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 125px;
  z-index: 8;
  pointer-events: none;
}

.wave-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.float-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(56, 189, 248, 0.4) 60%, transparent 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  animation: float-bubble-up 4s infinite ease-in;
}

.fb-1 {
  width: 16px;
  height: 16px;
  left: 18%;
  bottom: 20px;
  animation-duration: 3.6s;
}

.fb-2 {
  width: 22px;
  height: 22px;
  left: 45%;
  bottom: 10px;
  animation-duration: 4.8s;
  animation-delay: 0.8s;
}

.fb-3 {
  width: 14px;
  height: 14px;
  left: 72%;
  bottom: 18px;
  animation-duration: 3.9s;
  animation-delay: 1.5s;
}

.fb-4 {
  width: 20px;
  height: 20px;
  left: 88%;
  bottom: 12px;
  animation-duration: 4.4s;
  animation-delay: 2.1s;
}

@keyframes float-bubble-up {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }

  30% {
    opacity: 0.9;
  }

  100% {
    transform: translateY(-75px) scale(1.1);
    opacity: 0;
  }
}

.foliage-corner-l {
  position: absolute;
  bottom: 0;
  left: -15px;
  width: 140px;
  height: 110px;
  z-index: 9;
}

.foliage-corner-r {
  position: absolute;
  bottom: 0;
  right: -10px;
  width: 140px;
  height: 110px;
  z-index: 9;
}

/* ==========================================================================
   4. ABOUT US SECTION (RICH WATER AESTHETIC & ENVIRONMENTAL THEME)
   ========================================================================== */
.about-bharat-section {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f1f8fe 40%, #e2f2ff 100%);
  padding: 90px 0 120px 0;
  overflow: hidden;
}

/* Radiant Ambient Sky Glows */
.about-bg-sky-glow {
  position: absolute;
  top: -80px;
  right: 5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(0, 128, 255, 0.06) 45%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.about-bg-aqua-mesh {
  position: absolute;
  top: 30%;
  left: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(56, 189, 248, 0.12) 40%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   ABOUT US SECTION: EXACT REFERENCE DESIGN MATCH
   ========================================================================== */
.about-bharat-section {
  position: relative;
  padding: 80px 0 100px 0;
  background: linear-gradient(180deg, #f7fbff 0%, #edf5fd 100%);
  overflow: hidden;
}

.about-bg-sky-glow {
  position: absolute;
  top: -10%;
  left: 20%;
  width: 600px;
  height: 500px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(0, 128, 255, 0.05) 50%, transparent 75%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.about-bg-aqua-mesh {
  position: absolute;
  bottom: 10%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.06) 0%, rgba(56, 189, 248, 0.08) 50%, transparent 75%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}


/* Main 2-Column Responsive Grid */
.about-main-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 44px;
  align-items: center;
  position: relative;
  z-index: 5;
}

/* Left Column Content */
.about-left-col {
  display: flex;
  flex-direction: column;
}

/* Frosted Capsule Badge: [🏢 ABOUT BHARAT BHUJAL] [CGWA • ISO ACCREDITED] */
.about-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid #93c5fd;
  box-shadow: 0 4px 14px rgba(0, 110, 240, 0.08);
  padding: 4px 6px 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
  width: fit-content;
}

.badge-icon-building {
  color: #0077ff;
  font-size: 0.92rem;
}

.about-hero-badge .badge-txt {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #0b2238;
}

.about-hero-badge .badge-tag-pill {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: #0077ff;
  color: #ffffff;
  padding: 4px 14px;
  border-radius: var(--radius-full);
}

/* Main Headline with Wavy Underline */
.about-main-headline {
  font-family: var(--font-heading) !important;
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1.15;
  color: #0b2238;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

.highlight-water-solutions {
  color: #0084ff;
  position: relative;
  display: inline-block;
}

.wavy-underline-svg {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 12px;
  overflow: visible;
  pointer-events: none;
}

/* Lead Description Paragraph */
.about-company-desc {
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: #4b5e76;
  line-height: 1.68;
  max-width: 530px;
  margin-bottom: 26px;
}

.about-company-desc strong {
  color: #0b2238;
  font-weight: 700;
}

/* 4 Bento Feature Cards (2x2 Grid) */
.about-features-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 30px;
}

.about-bento-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(226, 235, 245, 0.95);
  border-radius: 18px;
  padding: 18px 16px 16px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 50, 130, 0.04);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.about-bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 80, 200, 0.1);
  border-color: rgba(56, 189, 248, 0.6);
}

.bento-watermark {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--font-heading);
  pointer-events: none;
  line-height: 1;
}

.bento-blue .bento-watermark {
  color: #bae6fd;
}

.bento-green .bento-watermark {
  color: #a7f3d0;
}

.bento-orange .bento-watermark {
  color: #fed7aa;
}

.bento-purple .bento-watermark {
  color: #ddd6fe;
}

.bento-icon-disc {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.15rem;
  color: #ffffff;
  transition: transform 0.25s ease;
}

.about-bento-card:hover .bento-icon-disc {
  transform: scale(1.08);
}

.bento-blue .bento-icon-disc {
  background: linear-gradient(135deg, #38bdf8 0%, #0084ff 100%);
  box-shadow: 0 4px 12px rgba(0, 132, 255, 0.35);
}

.bento-green .bento-icon-disc {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.bento-orange .bento-icon-disc {
  background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.bento-purple .bento-icon-disc {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.bento-card-body {
  flex: 1;
}

.bento-card-body h5 {
  font-family: var(--font-heading) !important;
  font-size: 0.98rem;
  font-weight: 700;
  color: #0b2238;
  margin-bottom: 5px;
  line-height: 1.25;
}

.bento-card-body p {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}

.bento-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
}

.bento-blue .bento-bottom-bar {
  background: #0084ff;
}

.bento-green .bento-bottom-bar {
  background: #10b981;
}

.bento-orange .bento-bottom-bar {
  background: #f59e0b;
}

.bento-purple .bento-bottom-bar {
  background: #8b5cf6;
}

/* Action Row */
.about-cta-action-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.btn-about-knowmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0077ff;
  color: #ffffff;
  padding: 13px 28px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.94rem;
  box-shadow: 0 8px 22px rgba(0, 119, 255, 0.36);
  transition: all 0.28s ease;
  text-decoration: none;
}

.btn-about-knowmore:hover {
  background: #0066dd;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 119, 255, 0.48);
  color: #ffffff;
}

.btn-about-knowmore i {
  transition: transform 0.2s ease;
}

.btn-about-knowmore:hover i {
  transform: translateX(4px);
}

.btn-watch-video-story {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  transition: opacity 0.2s ease;
}

.btn-watch-video-story:hover {
  opacity: 0.9;
}

.video-play-disc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0077ff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 5px 15px rgba(0, 119, 255, 0.36);
  transition: transform 0.25s ease;
}

.video-play-disc i {
  margin-left: 2px;
}

.btn-watch-video-story:hover .video-play-disc {
  transform: scale(1.08);
}

.video-story-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.video-story-txt {
  font-size: 0.94rem;
  font-weight: 700;
  color: #0b2238;
  line-height: 1.2;
}

.video-story-sub {
  font-size: 0.74rem;
  font-weight: 500;
  color: #64748b;
  margin-top: 2px;
}

/* ==========================================================================
   RIGHT COLUMN: EXACT MOCKUP VISUAL COMPOSITION (PIXEL-PERFECT)
   ========================================================================== */
.about-right-col {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.about-showcase-graphic-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 20px 45px rgba(0, 70, 180, 0.14));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.about-showcase-graphic-wrap:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 28px 60px rgba(0, 90, 220, 0.22));
}

.about-showcase-hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 28px;
}

/* Generated visual callouts keep all critical copy crisp and responsive. */
.about-showcase-graphic-wrap {
  isolation: isolate;
  aspect-ratio: 1.05 / 1;
  max-width: 760px;
  overflow: visible;
}

.showcase-scene {
  position: absolute;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.98);
  border-radius: 34px;
  box-shadow: 0 18px 34px rgba(0, 63, 140, 0.18);
  background: #dff1ff;
}

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

.scene-drilling {
  top: 5%;
  left: 7%;
  width: 68%;
  height: 61%;
  transform: rotate(3deg);
  z-index: 1;
}

.scene-water {
  top: 28%;
  right: -1%;
  width: 43%;
  height: 43%;
  transform: rotate(3deg);
  z-index: 2;
}

.scene-aquifer {
  bottom: 2%;
  left: 23%;
  width: 60%;
  height: 42%;
  transform: rotate(-1deg);
  z-index: 3;
}

.showcase-badge {
  position: absolute;
  z-index: 30;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 11px 18px 11px 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  box-shadow: 0 12px 25px rgba(17, 78, 145, 0.16);
  color: #09244b;
  white-space: nowrap;
}

.showcase-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #dff0ff;
  color: #087eef;
  font-size: 1.3rem;
}

.showcase-badge-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
}

.showcase-badge-copy strong {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.25px;
}

.showcase-badge-copy small {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #344967;
}

.showcase-yield {
  top: 8%;
  right: -4%;
}

.showcase-yield .showcase-badge-icon {
  background: #dcefff;
}

.showcase-experience {
  top: 49%;
  left: -7%;
}

.showcase-experience .showcase-badge-icon {
  background: #fff0c7;
  color: #f6a800;
}

.showcase-resources {
  top: 56%;
  right: -7%;
}

.showcase-resources .showcase-badge-icon {
  background: #dff0ff;
}

.showcase-mapping {
  bottom: 13%;
  left: 1%;
}

.showcase-pan {
  right: -4%;
  bottom: 11%;
}

.showcase-pan .showcase-badge-icon {
  background: #dcefff;
}

.showcase-dark-badge {
  min-height: 62px;
  padding: 9px 18px 9px 12px;
  background: rgba(4, 69, 145, 0.94);
  color: #ffffff;
  box-shadow: 0 12px 25px rgba(0, 53, 125, 0.26);
}

.showcase-dark-badge .showcase-badge-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  background: #087eef;
  color: #ffffff;
  font-size: 1.05rem;
}

.showcase-dark-badge .showcase-badge-copy small {
  color: #dbeafe;
}

/* Floating Leaf Decor on Left Edge */
.about-leaf-decor-left {
  position: absolute;
  top: 48%;
  left: 0;
  transform: translateY(-50%);
  width: 52px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

.about-leaf-img-left {
  width: 100%;
  height: auto;
  display: block;
}

/* Bottom Ambient Wave Layer */
.about-bottom-wave-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
  line-height: 0;
}

.about-bottom-wave-layer .about-wave-svg {
  width: 100%;
  height: 55px;
  display: block;
}

/* Responsive Queries for About Us */
@media (max-width: 1200px) {
  .about-main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-right-col {
    margin-top: 10px;
  }
}

@media (max-width: 992px) {
  .about-main-headline {
    font-size: 2.6rem;
  }
}

@media (max-width: 768px) {
  .about-main-headline {
    font-size: 2.1rem;
  }

  .about-features-2x2 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-hero-badge {
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {
  .about-cta-action-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .btn-about-knowmore {
    justify-content: center;
  }

  .btn-watch-video-story {
    justify-content: center;
  }
}

/* The service banners intentionally keep only the core message. */
.service-detail-banner {
  min-height: 360px;
}

.service-detail-banner-layout {
  grid-template-columns: 1fr;
}

.service-detail-banner-copy {
  max-width: 980px;
}

/* Compact, more balanced service overview card. */
.shared-service-overview-section .dedicated-service-container {
  max-width: 1340px;
}

.shared-service-overview-section .dedicated-service-overview {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(34px, 4.2vw, 64px);
  margin-bottom: 68px;
  padding: 34px;
  border-radius: 30px;
  box-shadow: 0 18px 48px rgba(16, 65, 105, 0.09);
}

.shared-service-overview-section .dedicated-service-image-wrap {
  min-height: 410px;
  border-width: 7px;
  border-radius: 26px 64px 26px 26px;
}

.shared-service-overview-section .dedicated-service-copy {
  padding-right: 0;
}

.shared-service-overview-section .dedicated-service-copy h2 {
  max-width: 650px;
  margin-top: 10px;
  margin-bottom: 19px;
  font-size: clamp(1.95rem, 2.85vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.9px;
}

.shared-service-overview-section .dedicated-service-lead-card {
  padding: 14px 17px;
  margin-bottom: 15px;
}

.shared-service-overview-section .dedicated-service-copy .dedicated-service-lead {
  font-size: 0.94rem;
  line-height: 1.65;
}

.shared-service-overview-section .dedicated-service-copy .dedicated-service-detail {
  font-size: 0.91rem;
  line-height: 1.65;
}

.shared-service-overview-section .dedicated-service-checklist {
  gap: 10px 12px;
  margin-top: 20px;
}

.shared-service-overview-section .dedicated-service-checklist li {
  min-height: 50px;
  padding: 9px 12px;
  font-size: 0.76rem;
}

.shared-service-overview-section .dedicated-service-checklist li i {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
}

@media (max-width: 900px) {
  .shared-service-overview-section .dedicated-service-overview {
    padding: 28px;
  }
}

@media (max-width: 640px) {
  .shared-service-overview-section .dedicated-service-overview {
    padding: 20px;
    border-radius: 24px;
  }

  .shared-service-overview-section .dedicated-service-image-wrap {
    min-height: 290px;
    border-radius: 21px 46px 21px 21px;
  }

  .shared-service-overview-section .dedicated-service-copy h2 {
    font-size: 1.95rem;
  }
}

/* ======================================================================
   ABOUT SHOWCASE POLISH PASS
   Keeps the reference composition balanced at desktop and prevents the
   floating visual badges from escaping the viewport on tablet widths.
   ====================================================================== */
.about-bharat-section {
  background:
    radial-gradient(circle at 76% 16%, rgba(152, 218, 255, 0.28), transparent 27%),
    linear-gradient(145deg, #f9fcff 0%, #eff8ff 52%, #e4f3ff 100%);
}

.about-main-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(410px, 0.95fr);
  gap: clamp(30px, 4vw, 72px);
}

.about-left-col,
.about-right-col {
  min-width: 0;
}

.about-main-headline {
  font-size: clamp(2.55rem, 3.15vw, 3.35rem);
  line-height: 0.98;
  letter-spacing: -1px;
  white-space: nowrap;
  margin-bottom: 14px;
}

.about-company-desc {
  max-width: 610px;
  font-size: 0.98rem;
  line-height: 1.72;
}

.highlight-water-solutions {
  white-space: nowrap;
}

.wavy-underline-svg {
  bottom: -3px;
  height: 10px;
}

.about-features-2x2 {
  gap: 18px;
}

.about-bento-card {
  min-height: 126px;
  padding: 19px 17px 17px;
}

.about-showcase-graphic-wrap {
  width: min(100%, 760px);
  margin-inline: auto;
}

@media (max-width: 1100px) {
  .about-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
    gap: 28px;
  }

  .about-main-headline {
    font-size: 2.75rem;
  }

  .about-bento-card {
    min-height: 118px;
  }

  .showcase-badge {
    gap: 8px;
    padding-right: 12px;
  }

  .showcase-badge-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .showcase-badge-copy strong {
    font-size: 0.88rem;
  }

  .showcase-badge-copy small {
    font-size: 0.64rem;
  }
}

@media (max-width: 1024px) {
  .about-main-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .about-left-col {
    max-width: 860px;
    margin-inline: auto;
    width: 100%;
  }

  .about-right-col {
    width: 100%;
    margin-top: 0;
  }

  .about-showcase-graphic-wrap {
    width: min(100%, 690px);
  }

  .showcase-yield,
  .showcase-resources,
  .showcase-pan {
    right: 0;
  }

  .showcase-experience {
    left: 0;
  }
}

@media (max-width: 640px) {
  .about-bharat-section {
    padding-top: 54px;
    padding-bottom: 86px;
  }

  .about-main-headline {
    font-size: 2.25rem;
    letter-spacing: -0.7px;
  }

  .about-company-desc {
    font-size: 0.9rem;
  }

  .about-features-2x2 {
    gap: 12px;
  }

  .about-bento-card {
    min-height: 104px;
    padding: 15px 14px 15px;
  }

  .about-showcase-graphic-wrap {
    width: calc(100% - 10px);
    min-height: 310px;
  }

  .showcase-badge {
    max-width: 47%;
    white-space: normal;
  }
}

/* ===========================================================================
   DEDICATED SERVICE DETAIL PAGES
   =========================================================================== */
.dedicated-service-hero {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.dedicated-service-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(4, 24, 49, 0.94), rgba(3, 84, 139, 0.78) 58%, rgba(0, 128, 255, 0.46));
}

.dedicated-service-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 38px;
  padding-bottom: 42px;
}

.dedicated-service-hero h1 {
  max-width: 900px;
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.08;
}

.dedicated-service-hero p {
  max-width: 740px;
  color: #e7f5ff;
  font-size: 1.05rem;
  line-height: 1.65;
}

.dedicated-service-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 19px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  color: #062140;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(2, 31, 61, 0.2);
}

.dedicated-service-hero-cta:hover {
  color: #fff;
  background: #0080ff;
}

.dedicated-service-section {
  padding: 92px 0 110px;
  background: linear-gradient(180deg, #f2f8ff 0%, #ffffff 70%);
}

.dedicated-service-container {
  max-width: 1720px;
}

.dedicated-service-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(34px, 5vw, 76px);
  margin-bottom: 78px;
}

.dedicated-service-image-wrap {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  border: 10px solid #fff;
  border-radius: 30px 76px 30px 30px;
  background: #dbeafe;
  box-shadow: 0 22px 52px rgba(7, 45, 82, 0.16);
}

.dedicated-service-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(4, 28, 58, 0.45));
  pointer-events: none;
}

.dedicated-service-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dedicated-service-image-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 34, 65, 0.78);
  backdrop-filter: blur(12px);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.7px;
}

.dedicated-service-image-badge i {
  color: #7dd3fc;
}

.dedicated-service-eyebrow {
  display: inline-block;
  color: #0080ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.dedicated-service-copy h2,
.dedicated-service-facts h2,
.dedicated-service-process h2,
.dedicated-service-bottom-cta h2 {
  color: #071e3d;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.15;
}

.dedicated-service-copy h2 {
  margin: 12px 0 20px;
}

.dedicated-service-copy h2 span {
  color: #0077ff;
}

.dedicated-service-copy p {
  max-width: 650px;
  margin: 0 0 15px;
  color: #596b80;
  font-size: 0.98rem;
  line-height: 1.75;
}

.dedicated-service-copy .dedicated-service-lead {
  color: #263c57;
  font-size: 1.08rem;
  font-weight: 600;
}

.dedicated-service-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.dedicated-service-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #334e6b;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.45;
}

.dedicated-service-checklist i {
  color: #10b981;
  margin-top: 3px;
}

.dedicated-service-facts,
.dedicated-service-process {
  padding: 46px;
  border: 1px solid #dbeafe;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 34px rgba(9, 61, 105, 0.07);
}

.dedicated-service-facts {
  margin-bottom: 30px;
}

.dedicated-service-facts h2 {
  margin-top: 9px;
  font-size: 2rem;
}

.dedicated-service-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.dedicated-service-fact {
  position: relative;
  min-height: 150px;
  padding: 22px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(145deg, #f0f8ff, #fff);
}

.dedicated-service-fact span {
  position: absolute;
  top: 10px;
  right: 16px;
  color: #bfdbfe;
  font-size: 1.8rem;
  font-weight: 900;
}

.dedicated-service-fact i {
  display: block;
  margin-bottom: 22px;
  color: #0284c7;
  font-size: 1.45rem;
}

.dedicated-service-fact strong {
  display: block;
  max-width: 150px;
  color: #163b60;
  font-size: 0.9rem;
  line-height: 1.35;
}

.dedicated-service-process {
  background: linear-gradient(145deg, #071d38, #0b4d7b);
}

.dedicated-service-process .dedicated-service-eyebrow {
  color: #7dd3fc;
}

.dedicated-service-process h2 {
  max-width: 600px;
  margin-top: 10px;
  color: #fff;
  font-size: 2rem;
}

.dedicated-service-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.dedicated-service-step {
  padding: 22px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.dedicated-service-step span {
  color: #7dd3fc;
  font-size: 1.6rem;
  font-weight: 900;
}

.dedicated-service-step p {
  margin-top: 22px;
  color: #e0f2fe;
  font-size: 0.9rem;
  line-height: 1.55;
}

.dedicated-service-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin-top: 30px;
  padding: 38px 44px;
  border-radius: 24px;
  background: linear-gradient(120deg, #e0f2fe, #eff6ff);
}

.dedicated-service-bottom-cta h2 {
  max-width: 650px;
  margin-top: 9px;
  font-size: 2rem;
}

.dedicated-service-bottom-cta p {
  max-width: 720px;
  margin: 12px 0 0;
  color: #41617e;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .dedicated-service-overview {
    grid-template-columns: 1fr;
  }

  .dedicated-service-image-wrap {
    min-height: 360px;
  }

  .dedicated-service-fact-grid,
  .dedicated-service-step-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dedicated-service-hero {
    min-height: 350px;
  }

  .dedicated-service-hero-inner {
    padding-top: 24px;
    padding-bottom: 28px;
  }

  .dedicated-service-hero h1 {
    font-size: 2.2rem;
  }

  .dedicated-service-hero p {
    font-size: 0.92rem;
  }

  .dedicated-service-section {
    padding: 62px 0 74px;
  }

  .dedicated-service-image-wrap {
    min-height: 280px;
    border-radius: 22px 48px 22px 22px;
  }

  .dedicated-service-copy h2 {
    font-size: 2rem;
  }

  .dedicated-service-checklist {
    grid-template-columns: 1fr;
  }

  .dedicated-service-facts,
  .dedicated-service-process {
    padding: 28px 20px;
  }

  .dedicated-service-bottom-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 28px 20px;
  }
}

.dedicated-service-rich-content {
  display: grid;
  gap: 30px;
  margin: 0 0 30px;
}

.dedicated-service-rich-intro,
.dedicated-service-rich-section {
  padding: 42px 46px;
  border: 1px solid #dbeafe;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 34px rgba(9, 61, 105, 0.07);
}

.dedicated-service-rich-intro {
  background: linear-gradient(135deg, #e9f6ff, #ffffff 62%);
}

.dedicated-service-rich-content h2 {
  margin: 10px 0 14px;
  color: #071e3d;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1.15;
}

.dedicated-service-rich-content p {
  max-width: 900px;
  margin: 0;
  color: #596b80;
  font-size: 0.98rem;
  line-height: 1.75;
}

.dedicated-service-solution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.dedicated-service-solution-card {
  position: relative;
  min-height: 170px;
  padding: 26px 24px 22px;
  overflow: hidden;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: linear-gradient(145deg, #f3f9ff, #ffffff);
}

.dedicated-service-solution-card:nth-child(5) {
  grid-column: 1 / -1;
}

.dedicated-service-solution-card>span {
  position: absolute;
  top: 10px;
  right: 18px;
  color: #bfdbfe;
  font-size: 1.7rem;
  font-weight: 900;
}

.dedicated-service-solution-card h3 {
  max-width: 80%;
  margin: 0 0 12px;
  color: #12385d;
  font-size: 1.08rem;
}

.dedicated-service-solution-card p {
  font-size: 0.9rem;
}

.dedicated-service-application-grid,
.dedicated-service-strength-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.dedicated-service-application-grid span,
.dedicated-service-strength-grid span {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 13px 14px;
  border-radius: 12px;
  color: #244664;
  background: #f1f8ff;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}

.dedicated-service-application-grid i,
.dedicated-service-strength-grid i {
  flex: 0 0 auto;
  color: #0284c7;
  margin-top: 2px;
}

.dedicated-service-strengths {
  background: linear-gradient(135deg, #071d38, #0b4d7b);
}

.dedicated-service-strengths h2 {
  color: #fff;
}

.dedicated-service-strengths .dedicated-service-eyebrow {
  color: #7dd3fc;
}

.dedicated-service-strengths p {
  color: #dbeafe;
}

.dedicated-service-strengths .dedicated-service-strength-grid span {
  color: #e0f2fe;
  background: rgba(255, 255, 255, 0.09);
}

.dedicated-service-strengths .dedicated-service-strength-grid i {
  color: #7dd3fc;
}

.dedicated-service-faq-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.dedicated-service-faq-list details {
  padding: 0 18px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #f8fbff;
}

.dedicated-service-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  color: #163b60;
  font-weight: 800;
  list-style: none;
}

.dedicated-service-faq-list summary::-webkit-details-marker {
  display: none;
}

.dedicated-service-faq-list summary i {
  color: #0284c7;
  transition: transform 0.2s ease;
}

.dedicated-service-faq-list details[open] summary i {
  transform: rotate(180deg);
}

.dedicated-service-faq-list details p {
  padding: 0 0 18px;
  font-size: 0.9rem;
}

.dedicated-service-rich-process {
  padding: 44px 46px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 28px;
  background: linear-gradient(135deg, #061a33, #075985 72%, #0876a9);
  box-shadow: 0 18px 38px rgba(7, 45, 82, 0.18);
}

.dedicated-service-rich-process .dedicated-service-eyebrow {
  color: #7dd3fc;
}

.dedicated-service-rich-process h2 {
  color: #fff;
}

.dedicated-service-rich-step-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.dedicated-service-rich-step {
  min-height: 178px;
  padding: 20px 18px;
  border: 1px solid rgba(186, 230, 253, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.09);
}

.dedicated-service-rich-step>span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 22px;
  border-radius: 50%;
  color: #062140;
  background: #7dd3fc;
  font-size: 0.82rem;
  font-weight: 900;
}

.dedicated-service-rich-step h3 {
  margin: 0 0 9px;
  color: #fff;
  font-size: 0.96rem;
  line-height: 1.25;
}

.dedicated-service-rich-step p {
  color: #dbeafe;
  font-size: 0.78rem;
  line-height: 1.55;
}

body[data-service="gpr-survey"] {
  background: #f4f9fd;
}

body[data-service="gpr-survey"] .dedicated-service-hero {
  min-height: 470px;
  background-position: center 46%;
}

body[data-service="gpr-survey"] .dedicated-service-hero-overlay {
  background: linear-gradient(105deg, rgba(3, 24, 50, 0.96) 0%, rgba(5, 62, 100, 0.86) 48%, rgba(5, 91, 125, 0.38) 100%);
}

body[data-service="gpr-survey"] .dedicated-service-hero-inner {
  max-width: 1720px;
}

body[data-service="gpr-survey"] .dedicated-service-hero h1 {
  max-width: 820px;
  font-size: clamp(2.25rem, 3.5vw, 3.7rem);
  letter-spacing: -1px;
}

body[data-service="gpr-survey"] .dedicated-service-hero p {
  max-width: 690px;
  font-size: 1.08rem;
}

body[data-service="gpr-survey"] .dedicated-service-section {
  padding-top: 76px;
  background: linear-gradient(180deg, #f4f9fd 0%, #ffffff 78%);
}

body[data-service="gpr-survey"] .dedicated-service-container {
  max-width: 1720px;
}

body[data-service="gpr-survey"] .dedicated-service-overview {
  padding: 28px;
  border: 1px solid #d9e9f5;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(12, 69, 110, 0.1);
}

body[data-service="gpr-survey"] .dedicated-service-image-wrap {
  min-height: 520px;
  border-width: 8px;
  border-radius: 24px 64px 24px 24px;
}

body[data-service="gpr-survey"] .dedicated-service-copy {
  padding: 12px 18px 12px 0;
}

body[data-service="gpr-survey"] .dedicated-service-copy h2 {
  font-size: clamp(2rem, 3vw, 3rem);
}

body[data-service="gpr-survey"] .dedicated-service-rich-content {
  gap: 24px;
}

body[data-service="gpr-survey"] .dedicated-service-rich-intro {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  column-gap: 42px;
  align-items: center;
  padding: 38px 46px;
}

body[data-service="gpr-survey"] .dedicated-service-rich-intro .dedicated-service-eyebrow {
  grid-row: span 2;
  align-self: start;
}

body[data-service="gpr-survey"] .dedicated-service-rich-intro h2 {
  margin-top: 0;
}

body[data-service="gpr-survey"] .dedicated-service-rich-intro p {
  grid-column: 2;
}

body[data-service="gpr-survey"] .dedicated-service-rich-section {
  border-radius: 24px;
}

body[data-service="gpr-survey"] .dedicated-service-solution-card {
  min-height: 190px;
  border-color: #d6e8f5;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body[data-service="gpr-survey"] .dedicated-service-solution-card:hover {
  transform: translateY(-4px);
  border-color: #7dd3fc;
  box-shadow: 0 14px 26px rgba(3, 105, 161, 0.12);
}

body[data-service="gpr-survey"] .dedicated-service-solution-card h3 {
  font-size: 1.1rem;
}

body[data-service="gpr-survey"] .dedicated-service-application-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-service="gpr-survey"] .dedicated-service-application-grid span {
  min-height: 50px;
  align-items: center;
  border: 1px solid #d9ebf7;
  background: #fff;
}

body[data-service="gpr-survey"] .dedicated-service-strengths {
  border: 0;
}

body[data-service="gpr-survey"] .dedicated-service-faq-section {
  background: #fff;
}

body[data-service="gpr-survey"] .dedicated-service-bottom-cta {
  border: 1px solid #cce6f6;
  box-shadow: 0 14px 30px rgba(12, 69, 110, 0.08);
}

@media (max-width: 900px) {

  .dedicated-service-solution-grid,
  .dedicated-service-application-grid,
  .dedicated-service-strength-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dedicated-service-rich-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-service="gpr-survey"] .dedicated-service-application-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {

  .dedicated-service-rich-intro,
  .dedicated-service-rich-section {
    padding: 28px 20px;
    border-radius: 22px;
  }

  .dedicated-service-solution-grid,
  .dedicated-service-application-grid,
  .dedicated-service-strength-grid {
    grid-template-columns: 1fr;
  }

  .dedicated-service-solution-card:nth-child(5) {
    grid-column: auto;
  }

  .dedicated-service-rich-process {
    padding: 28px 20px;
    border-radius: 22px;
  }

  .dedicated-service-rich-step-grid {
    grid-template-columns: 1fr;
  }

  body[data-service="gpr-survey"] .dedicated-service-hero {
    min-height: 420px;
  }

  body[data-service="gpr-survey"] .dedicated-service-overview {
    padding: 14px;
    border-radius: 22px;
  }

  body[data-service="gpr-survey"] .dedicated-service-image-wrap {
    min-height: 300px;
  }

  body[data-service="gpr-survey"] .dedicated-service-copy {
    padding: 18px 8px 8px;
  }

  body[data-service="gpr-survey"] .dedicated-service-rich-intro {
    display: block;
    padding: 28px 20px;
  }

  body[data-service="gpr-survey"] .dedicated-service-rich-intro h2 {
    margin-top: 10px;
  }

  body[data-service="gpr-survey"] .dedicated-service-rich-intro p {
    margin-top: 12px;
  }

  body[data-service="gpr-survey"] .dedicated-service-application-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   GPR SURVEY LANDING PAGE REDESIGN
   =========================================================================== */
.gpr-redesign-hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  color: #fff;
  background-position: center;
  background-size: cover;
}

.gpr-redesign-hero-overlay,
.gpr-redesign-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(3, 24, 50, 0.98) 0%, rgba(4, 55, 93, 0.9) 44%, rgba(4, 64, 104, 0.22) 100%);
}

.gpr-redesign-hero-inner,
.gpr-redesign-container {
  position: relative;
  z-index: 1;
  max-width: 1580px;
}

.gpr-redesign-hero-inner {
  padding-top: 30px;
  padding-bottom: 28px;
}

.gpr-redesign-hero .contact-breadcrumb-wrap {
  margin-bottom: 24px;
}

.gpr-redesign-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
  align-items: center;
  gap: 48px;
}

.gpr-redesign-kicker {
  display: inline-block;
  color: #08bdf0;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.gpr-redesign-hero h1 {
  max-width: 720px;
  margin: 12px 0 16px;
  color: #fff;
  font-size: clamp(2.45rem, 4.2vw, 4.35rem);
  line-height: 1.04;
  letter-spacing: -1.6px;
}

.gpr-redesign-hero h1 span {
  color: #36d5f5;
}

.gpr-redesign-hero p {
  max-width: 600px;
  color: #d8f1fc;
  font-size: 0.98rem;
  line-height: 1.6;
}

.gpr-redesign-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.gpr-redesign-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.gpr-redesign-btn:hover {
  transform: translateY(-2px);
}

.gpr-redesign-btn-primary {
  color: #fff;
  background: #087ff0;
  box-shadow: 0 9px 22px rgba(0, 126, 255, 0.28);
}

.gpr-redesign-btn-primary:hover {
  color: #fff;
  background: #0566c9;
}

.gpr-redesign-btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(7, 44, 75, 0.32);
}

.gpr-redesign-btn-outline:hover {
  color: #082849;
  background: #fff;
}

.gpr-redesign-hero-visual {
  position: relative;
  min-height: 390px;
}

.gpr-redesign-hero-visual img {
  width: 100%;
  height: 390px;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px 22px 22px 78px;
  box-shadow: 0 20px 42px rgba(0, 23, 55, 0.36);
}

.gpr-redesign-radar-panel {
  position: absolute;
  right: -28px;
  bottom: 25px;
  width: 68%;
  min-height: 170px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 17px;
  color: #d9f8ff;
  background: rgba(4, 31, 57, 0.86);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
}

.gpr-redesign-radar-panel span {
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.gpr-redesign-radar-panel b {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
}

.gpr-radar-lines {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 88px;
  margin-top: 10px;
  padding: 9px 8px 0;
  overflow: hidden;
  border: 1px solid rgba(109, 220, 239, 0.25);
  background: repeating-linear-gradient(0deg, rgba(47, 197, 228, 0.12) 0, rgba(47, 197, 228, 0.12) 1px, transparent 1px, transparent 17px), repeating-linear-gradient(90deg, rgba(47, 197, 228, 0.1) 0, rgba(47, 197, 228, 0.1) 1px, transparent 1px, transparent 26px);
}

.gpr-radar-lines i {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #ffdd45, #ff5b32 45%, #15c7d9 75%, #1e5dce);
}

.gpr-radar-lines i:nth-child(1) {
  height: 42%;
}

.gpr-radar-lines i:nth-child(2) {
  height: 78%;
}

.gpr-radar-lines i:nth-child(3) {
  height: 58%;
}

.gpr-radar-lines i:nth-child(4) {
  height: 90%;
}

.gpr-radar-lines i:nth-child(5) {
  height: 66%;
}

.gpr-radar-lines i:nth-child(6) {
  height: 82%;
}

.gpr-radar-lines i:nth-child(7) {
  height: 52%;
}

.gpr-redesign-hero-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.gpr-redesign-hero-features>div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d9f8ff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.gpr-redesign-hero-features i {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid rgba(125, 236, 255, 0.42);
  border-radius: 50%;
  color: #031f3a;
  background: #48ddf7;
}

.gpr-redesign-section {
  padding: 74px 0;
  background: #f4faff;
}

.gpr-redesign-section h2 {
  margin: 7px 0 13px;
  color: #082b52;
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -0.6px;
}

.gpr-redesign-section p {
  color: #5b7087;
  font-size: 0.86rem;
  line-height: 1.65;
}

.gpr-redesign-overview {
  padding-top: 54px;
}

.gpr-redesign-overview-grid {
  display: grid;
  grid-template-columns: minmax(380px, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 62px;
}

.gpr-redesign-image-frame {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 22px 54px 22px 22px;
  box-shadow: 0 18px 38px rgba(8, 69, 111, 0.18);
}

.gpr-redesign-image-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(4, 35, 67, 0.55));
  pointer-events: none;
}

.gpr-redesign-image-frame::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: -16px;
  top: 42px;
  width: 25px;
  height: 115px;
  border-radius: 12px;
  background: #49d7dd;
  box-shadow: 0 8px 20px rgba(8, 193, 207, 0.4);
}

.gpr-redesign-image-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gpr-redesign-image-tag {
  position: absolute;
  z-index: 2;
  bottom: 19px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-radius: 12px;
  color: #0b3457;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.18);
}

.gpr-redesign-image-tag i {
  color: #008bd1;
}

.gpr-redesign-image-tag small {
  display: block;
  color: #6a8195;
  font-size: 0.58rem;
}

.gpr-overview-scan {
  position: absolute;
  z-index: 3;
  right: 16px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(4, 35, 67, 0.25);
}

.gpr-overview-scan span {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.gpr-overview-scan-color {
  top: 65px;
  width: 47%;
  height: 34%;
  background: linear-gradient(180deg, #1637b6 0%, #08b9da 25%, #f4df2d 48%, #ef4e27 65%, #17298e 100%);
}

.gpr-overview-scan-color::after {
  content: '';
  position: absolute;
  inset: 28px 8px 8px;
  opacity: 0.7;
  background: repeating-linear-gradient(0deg, transparent 0 13px, rgba(255, 255, 255, 0.78) 14px, transparent 15px), repeating-linear-gradient(90deg, transparent 0 19px, rgba(0, 24, 91, 0.55) 20px, transparent 21px);
  transform: skewY(-6deg);
}

.gpr-overview-scan-color div {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 10px;
  left: 14px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 47%;
}

.gpr-overview-scan-color div i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: rgba(255, 255, 255, 0.48);
}

.gpr-overview-scan-color div i:nth-child(1) {
  height: 35%;
}

.gpr-overview-scan-color div i:nth-child(2) {
  height: 65%;
}

.gpr-overview-scan-color div i:nth-child(3) {
  height: 44%;
}

.gpr-overview-scan-color div i:nth-child(4) {
  height: 83%;
}

.gpr-overview-scan-color div i:nth-child(5) {
  height: 55%;
}

.gpr-overview-scan-color div i:nth-child(6) {
  height: 74%;
}

.gpr-overview-scan-gray {
  right: 28px;
  bottom: 68px;
  width: 47%;
  height: 27%;
  background: linear-gradient(180deg, #26333c, #a5b1b5 48%, #33404a);
}

.gpr-overview-scan-gray::after {
  content: '';
  position: absolute;
  inset: 25px 7px 8px;
  background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(255, 255, 255, 0.75) 9px, transparent 10px), radial-gradient(ellipse at 40% 55%, transparent 0 20%, rgba(12, 26, 36, 0.9) 21% 24%, transparent 25% 33%, rgba(255, 255, 255, 0.75) 34% 36%, transparent 37%);
}

.gpr-redesign-overview-copy h2 {
  font-size: clamp(2rem, 3vw, 3rem);
}

.gpr-redesign-overview-copy p {
  max-width: 680px;
  margin-bottom: 12px;
}

.gpr-redesign-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 23px;
}

.gpr-redesign-mini-grid>div {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid #e0edf6;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(13, 84, 128, 0.07);
  color: #163d62;
  font-size: 0.68rem;
  line-height: 1.25;
}

.gpr-redesign-mini-grid i {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #16b7df;
}

.gpr-redesign-mini-grid>div:nth-child(2) i {
  background: #16b989;
}

.gpr-redesign-mini-grid>div:nth-child(3) i {
  background: #f77d56;
}

.gpr-redesign-mini-grid>div:nth-child(4) i {
  background: #8660e7;
}

.gpr-redesign-benefits {
  background: #fff;
}

.gpr-redesign-benefits-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.5fr);
  gap: 50px;
  align-items: center;
}

.gpr-redesign-benefits-intro p {
  max-width: 300px;
}

.gpr-redesign-benefit-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 20px;
}

.gpr-redesign-benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.gpr-redesign-benefit>i {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid #a5e8f2;
  border-radius: 50%;
  color: #0578b5;
  background: #dffaff;
}

.gpr-redesign-benefit:nth-child(2n)>i {
  color: #087f63;
  border-color: #a7ead7;
  background: #e3fff6;
}

.gpr-redesign-benefit:nth-child(3n)>i {
  color: #8051d9;
  border-color: #d4c0ff;
  background: #f0eaff;
}

.gpr-redesign-benefit b,
.gpr-redesign-benefit small {
  display: block;
}

.gpr-redesign-benefit b {
  color: #123b60;
  font-size: 0.75rem;
  line-height: 1.35;
}

.gpr-redesign-benefit small {
  margin-top: 4px;
  color: #6b8093;
  font-size: 0.66rem;
  line-height: 1.4;
}

.gpr-redesign-process {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f9fdff, #eef9ff);
}

.gpr-redesign-process::after {
  content: '';
  position: absolute;
  right: -10%;
  bottom: -35%;
  width: 70%;
  height: 80%;
  border-top: 2px solid rgba(55, 206, 238, 0.16);
  border-radius: 50%;
  transform: rotate(-8deg);
  box-shadow: 0 -24px 0 rgba(55, 206, 238, 0.1), 0 -48px 0 rgba(55, 206, 238, 0.07);
}

.gpr-redesign-section-lead {
  margin-top: 0;
}

.gpr-redesign-process-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}

.gpr-redesign-process-grid article {
  position: relative;
  min-height: 180px;
  padding: 17px 15px;
  border: 1px solid #d9edf7;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 25px rgba(7, 88, 130, 0.09);
}

.gpr-process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 21px;
  border-radius: 50%;
  color: #fff;
  background: #0579e6;
  font-size: 0.76rem;
  font-weight: 900;
}

.gpr-redesign-process-grid article:nth-child(2) .gpr-process-number {
  background: #11a98c;
}

.gpr-redesign-process-grid article:nth-child(3) .gpr-process-number {
  background: #8b5fe7;
}

.gpr-redesign-process-grid article:nth-child(4) .gpr-process-number {
  background: #f47743;
}

.gpr-redesign-process-grid article:nth-child(5) .gpr-process-number {
  background: #126dde;
}

.gpr-redesign-process-grid article>i {
  position: absolute;
  top: 25px;
  right: 17px;
  color: #b6d9eb;
}

.gpr-redesign-process-grid h3 {
  margin: 0 0 8px;
  color: #153f64;
  font-size: 0.76rem;
}

.gpr-redesign-process-grid p {
  margin: 0;
  color: #698096;
  font-size: 0.66rem;
  line-height: 1.45;
}

.gpr-redesign-technical {
  background: #f4faff;
}

.gpr-redesign-technical-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  overflow: hidden;
  border-radius: 20px;
  background: #052d54;
  box-shadow: 0 16px 34px rgba(5, 49, 86, 0.2);
}

.gpr-redesign-technical-copy {
  padding: 45px 38px;
  color: #fff;
  background: linear-gradient(135deg, #032650, #075985);
}

.gpr-redesign-technical-copy h2 {
  color: #fff;
}

.gpr-redesign-technical-copy p {
  color: #d8effb;
}

.gpr-redesign-technical-copy ul {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.gpr-redesign-technical-copy li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #dff8ff;
  font-size: 0.72rem;
  line-height: 1.4;
}

.gpr-redesign-technical-copy li i {
  color: #42def3;
}

.gpr-redesign-technical-visual {
  position: relative;
  min-height: 390px;
  overflow: hidden;
}

.gpr-redesign-technical-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gpr-redesign-visual-labels {
  position: absolute;
  right: 22px;
  top: 30px;
  display: grid;
  gap: 8px;
}

.gpr-redesign-visual-labels span {
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  color: #fff;
  background: rgba(2, 26, 48, 0.7);
  font-size: 0.62rem;
}

.gpr-redesign-tech-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 24px;
}

.gpr-redesign-tech-stats span {
  padding: 10px 8px;
  border: 1px solid rgba(130, 225, 249, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}

.gpr-redesign-tech-stats b,
.gpr-redesign-tech-stats small {
  display: block;
}

.gpr-redesign-tech-stats b {
  color: #fff;
  font-size: 0.72rem;
}

.gpr-redesign-tech-stats small {
  margin-top: 4px;
  color: #9bd8ee;
  font-size: 0.57rem;
}

.gpr-redesign-industries {
  background: #fff;
}

.gpr-redesign-industry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  margin-top: 28px;
}

.gpr-redesign-industry-grid article {
  overflow: hidden;
  border: 1px solid #dcecf5;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 20px rgba(5, 78, 119, 0.08);
}

.gpr-redesign-industry-grid img {
  width: 100%;
  height: 128px;
  display: block;
  object-fit: cover;
}

.gpr-redesign-industry-grid article>div {
  position: relative;
  padding: 14px 16px 18px;
}

.gpr-redesign-industry-grid article>div>i {
  color: #08a9d2;
}

.gpr-redesign-industry-grid h3 {
  margin: 7px 0 5px;
  color: #123b60;
  font-size: 0.78rem;
}

.gpr-redesign-industry-grid p {
  margin: 0;
  font-size: 0.65rem;
  line-height: 1.45;
}

.gpr-redesign-industry-grid a {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #b5e7f2;
  border-radius: 50%;
  color: #007bd1;
  font-size: 0.66rem;
}

.gpr-redesign-case-study {
  background: #f5fbff;
}

.gpr-redesign-case-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 38px;
  padding: 28px;
  border: 1px solid #dcecf6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(7, 77, 119, 0.07);
}

.gpr-redesign-case-grid>img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 14px;
}

.gpr-redesign-case-grid h2 {
  margin-bottom: 10px;
}

.gpr-redesign-case-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px 22px;
  margin-top: 18px;
}

.gpr-redesign-case-facts span {
  display: grid;
  grid-template-columns: 25px 1fr;
  column-gap: 8px;
}

.gpr-redesign-case-facts i {
  grid-row: span 2;
  color: #087bd0;
}

.gpr-redesign-case-facts b,
.gpr-redesign-case-facts small {
  display: block;
}

.gpr-redesign-case-facts b {
  color: #1a4569;
  font-size: 0.66rem;
}

.gpr-redesign-case-facts small {
  color: #70869a;
  font-size: 0.62rem;
  line-height: 1.35;
}

.gpr-redesign-faq {
  background: #fff;
}

.gpr-redesign-faq-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 70px;
  align-items: start;
}

.gpr-redesign-faq-grid>div:first-child p {
  max-width: 310px;
}

.gpr-redesign-faq-list {
  display: grid;
  gap: 9px;
}

.gpr-redesign-faq-list details {
  padding: 0 15px;
  border: 1px solid #dcecf6;
  border-radius: 11px;
  background: #f8fcff;
}

.gpr-redesign-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  cursor: pointer;
  color: #173f61;
  font-size: 0.72rem;
  font-weight: 800;
  list-style: none;
}

.gpr-redesign-faq-list summary::-webkit-details-marker {
  display: none;
}

.gpr-redesign-faq-list summary i {
  color: #087ed7;
}

.gpr-redesign-faq-list details p {
  padding: 0 0 14px;
  font-size: 0.71rem;
}

.gpr-redesign-related {
  background: #f4faff;
}

.gpr-redesign-related-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.gpr-redesign-related-heading>a {
  color: #087bd1;
  font-size: 0.76rem;
  font-weight: 800;
}

.gpr-redesign-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 25px;
}

.gpr-redesign-related-card {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  border: 1px solid #d9eaf5;
  border-radius: 14px;
  color: #123b60;
  background: #fff;
  box-shadow: 0 9px 20px rgba(8, 77, 117, 0.08);
}

.gpr-redesign-related-card img {
  width: 100%;
  height: 108px;
  display: block;
  object-fit: cover;
}

.gpr-redesign-related-card>span {
  position: absolute;
  top: 91px;
  left: 13px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #08a9d2;
  font-size: 0.62rem;
  font-weight: 900;
}

.gpr-redesign-related-card b {
  display: block;
  padding: 18px 13px 12px;
  font-size: 0.68rem;
  line-height: 1.25;
}

.gpr-redesign-related-card>i {
  position: absolute;
  right: 13px;
  bottom: 13px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #b7e5f3;
  border-radius: 50%;
  color: #057bd0;
  font-size: 0.62rem;
}

.gpr-redesign-cta {
  position: relative;
  overflow: hidden;
  padding: 48px 0;
  color: #fff;
  background: url('assect/contact-cta-plant.jpg') center / cover no-repeat;
}

.gpr-redesign-cta-overlay {
  background: linear-gradient(90deg, rgba(2, 39, 74, 0.95), rgba(2, 71, 108, 0.7));
}

.gpr-redesign-cta .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.gpr-redesign-cta h2 {
  margin: 8px 0 5px;
  color: #fff;
}

.gpr-redesign-cta p {
  margin: 0;
  color: #d7effa;
  font-size: 0.8rem;
}

.gpr-workflow-section {
  padding: 72px 0;
  background: #f4f8fb;
}

.gpr-workflow-panel {
  position: relative;
  overflow: hidden;
  padding: 62px 36px 64px;
  border: 1px solid #bfe3f8;
  border-radius: 32px;
  background: linear-gradient(145deg, #f8fcff 0%, #e7f3ff 55%, #fafdff 100%);
  box-shadow: 0 18px 42px rgba(34, 106, 151, 0.08);
}

.gpr-workflow-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 5px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #0798e5, #405fea, #b23de4);
  box-shadow: 0 3px 12px rgba(72, 112, 230, 0.24);
}

.gpr-workflow-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
  padding: 8px 17px;
  border: 1px solid #a9d6f5;
  border-radius: 999px;
  color: #087fca;
  background: #e2f2ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.gpr-workflow-pill i {
  color: #058bcf;
  font-size: 0.55rem;
}

.gpr-workflow-panel>h2 {
  margin: 20px 0 0;
  color: #0a203d;
  text-align: center;
  font-size: clamp(2rem, 3vw, 3.1rem);
  letter-spacing: -1.4px;
}

.gpr-workflow-panel>h2 span {
  color: #2165da;
}

.gpr-workflow-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 17px;
  margin-top: 104px;
}

.gpr-workflow-card {
  position: relative;
  min-height: 190px;
  padding: 70px 18px 22px;
  border: 2px solid #84beff;
  border-radius: 17px;
  text-align: center;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 16px 24px rgba(31, 111, 164, 0.08);
}

.gpr-workflow-card:nth-child(2) {
  border-color: #b59aff;
}

.gpr-workflow-card:nth-child(3) {
  border-color: #ffad61;
}

.gpr-workflow-card:nth-child(4) {
  border-color: #65e7a7;
}

.gpr-workflow-card:nth-child(5) {
  border-color: #ff7fc0;
}

.gpr-workflow-orb {
  position: absolute;
  top: -62px;
  left: 50%;
  width: 106px;
  height: 106px;
  padding: 5px;
  transform: translateX(-50%);
  border: 3px solid #0b90ff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 9px 22px rgba(16, 117, 215, 0.22);
}

.gpr-workflow-card:nth-child(2) .gpr-workflow-orb {
  border-color: #814bf4;
  box-shadow: 0 9px 22px rgba(129, 75, 244, 0.22);
}

.gpr-workflow-card:nth-child(3) .gpr-workflow-orb {
  border-color: #ff791e;
  box-shadow: 0 9px 22px rgba(255, 121, 30, 0.22);
}

.gpr-workflow-card:nth-child(4) .gpr-workflow-orb {
  border-color: #09b982;
  box-shadow: 0 9px 22px rgba(9, 185, 130, 0.22);
}

.gpr-workflow-card:nth-child(5) .gpr-workflow-orb {
  border-color: #e92c8b;
  box-shadow: 0 9px 22px rgba(233, 44, 139, 0.22);
}

.gpr-workflow-orb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.gpr-workflow-orb b {
  position: absolute;
  right: -2px;
  bottom: -7px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #087fe7;
  font-size: 0.68rem;
  font-weight: 900;
}

.gpr-workflow-card:nth-child(2) .gpr-workflow-orb b {
  background: #814bf4;
}

.gpr-workflow-card:nth-child(3) .gpr-workflow-orb b {
  background: #f2671d;
}

.gpr-workflow-card:nth-child(4) .gpr-workflow-orb b {
  background: #08a978;
}

.gpr-workflow-card:nth-child(5) .gpr-workflow-orb b {
  background: #df267e;
}

.gpr-workflow-card h3 {
  margin: 0 0 13px;
  color: #102f51;
  font-size: 0.94rem;
  line-height: 1.3;
}

.gpr-workflow-card p {
  margin: 0;
  color: #40556b;
  font-size: 0.72rem;
  line-height: 1.55;
}

.gpr-workflow-underline {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 45px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #0b83e8;
}

.gpr-workflow-card:nth-child(2) .gpr-workflow-underline {
  background: #814bf4;
}

.gpr-workflow-card:nth-child(3) .gpr-workflow-underline {
  background: #f2671d;
}

.gpr-workflow-card:nth-child(4) .gpr-workflow-underline {
  background: #08a978;
}

.gpr-workflow-card:nth-child(5) .gpr-workflow-underline {
  background: #df267e;
}

.gpr-workflow-card:not(:last-child)::after {
  content: '›';
  position: absolute;
  right: -27px;
  top: -22px;
  color: #4d96f0;
  font-size: 2rem;
  font-weight: 300;
}

.gpr-workflow-card:nth-child(2)::after {
  color: #814bf4;
}

.gpr-workflow-card:nth-child(3)::after {
  color: #ff791e;
}

.gpr-workflow-card:nth-child(4)::after {
  color: #09b982;
}

@media (max-width: 1050px) {
  .gpr-redesign-hero-grid {
    grid-template-columns: 1fr;
  }

  .gpr-redesign-hero-visual {
    max-width: 680px;
  }

  .gpr-redesign-benefits-grid,
  .gpr-redesign-faq-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .gpr-redesign-benefits-intro p,
  .gpr-redesign-faq-grid>div:first-child p {
    max-width: 700px;
  }

  .gpr-redesign-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gpr-redesign-technical-grid {
    grid-template-columns: 1fr;
  }

  .gpr-redesign-technical-visual {
    min-height: 320px;
  }

  .gpr-workflow-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 88px;
  }

  .gpr-workflow-card:nth-child(3)::after {
    display: none;
  }
}

@media (max-width: 700px) {
  body[data-service="gpr-survey"] {
    overflow-x: hidden;
  }

  .gpr-redesign-hero {
    min-height: 0;
  }

  .gpr-redesign-hero-inner {
    padding-top: 22px;
    padding-bottom: 24px;
  }

  .gpr-redesign-hero h1 {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }

  .gpr-redesign-hero-grid {
    gap: 28px;
  }

  .gpr-redesign-hero-visual {
    min-height: 240px;
  }

  .gpr-redesign-hero-visual img {
    height: 240px;
  }

  .gpr-redesign-radar-panel {
    right: 10px;
    width: 58%;
  }

  .gpr-redesign-hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 9px;
  }

  .gpr-redesign-section {
    padding: 55px 0;
  }

  .gpr-redesign-overview-grid,
  .gpr-redesign-case-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .gpr-redesign-image-frame {
    min-height: 300px;
  }

  .gpr-redesign-mini-grid,
  .gpr-redesign-benefit-list,
  .gpr-redesign-industry-grid,
  .gpr-redesign-related-grid {
    grid-template-columns: 1fr;
  }

  .gpr-redesign-process-grid {
    grid-template-columns: 1fr;
  }

  .gpr-redesign-process-grid article {
    min-height: 140px;
  }

  .gpr-redesign-technical-copy {
    padding: 32px 23px;
  }

  .gpr-redesign-tech-stats {
    grid-template-columns: 1fr;
  }

  .gpr-redesign-case-grid {
    padding: 18px;
  }

  .gpr-redesign-case-facts {
    grid-template-columns: 1fr;
  }

  .gpr-redesign-related-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .gpr-redesign-cta .container {
    align-items: flex-start;
    flex-direction: column;
  }

  .gpr-redesign-cta .gpr-redesign-actions {
    margin-top: 0;
  }

  .gpr-redesign-cta .gpr-redesign-btn {
    width: 100%;
  }

  body[data-service="gpr-survey"] .gpr-redesign-hero h1 {
    max-width: 100%;
    font-size: clamp(2rem, 8vw, 2.7rem);
    letter-spacing: -0.8px;
    overflow-wrap: anywhere;
  }

  body[data-service="gpr-survey"] .gpr-redesign-overview-copy h2 {
    font-size: 1.75rem;
    overflow-wrap: anywhere;
  }

  body[data-service="gpr-survey"] .gpr-redesign-hero .gpr-redesign-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-service="gpr-survey"] .gpr-redesign-hero .gpr-redesign-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Homepage hero polish: calm editorial copy + framed field visual.
   This final layer intentionally supersedes the older experimental hero rules.
   -------------------------------------------------------------------------- */
body.home-page .hero-banner {
  min-height: 680px;
  height: clamp(680px, calc(100svh - 138px), 790px);
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 255, 255, 0.9), transparent 29%),
    radial-gradient(circle at 18% 92%, rgba(198, 107, 67, 0.09), transparent 28%),
    #f7f3ec;
}

body.home-page .hero-banner .hero-container {
  width: min(calc(100% - 112px), 1480px);
  margin: 0 auto;
  padding: 0;
}

body.home-page .hero-intro-layout {
  width: min(100%, 710px);
  padding: 0;
}

body.home-page .hero-heading-content {
  width: 100%;
}

body.home-page .hero-main-title {
  max-width: 710px;
  font-size: clamp(3.25rem, 4.5vw, 5.15rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

body.home-page .hero-italic-line {
  font-size: 0.84em;
  line-height: 1.05;
}

body.home-page .hero-side-copy {
  width: min(100%, 500px);
  margin-top: 27px;
}

body.home-page .hero-subtext-para {
  max-width: 470px;
  margin-bottom: 24px;
  color: #53656b;
  font-size: 1rem;
  line-height: 1.7;
}

body.home-page .hero-buttons-flex {
  gap: 12px;
}

body.home-page .btn-hero-explore,
body.home-page .btn-hero-talk {
  min-height: 52px;
  border-radius: 10px;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

body.home-page .btn-hero-explore {
  padding: 13px 21px 13px 23px;
  background: #0b3035;
  box-shadow: 0 13px 24px rgba(11, 48, 53, 0.16);
}

body.home-page .btn-hero-explore:hover {
  background: #16494b;
  box-shadow: 0 16px 28px rgba(11, 48, 53, 0.22);
}

body.home-page .btn-hero-talk {
  padding: 12px 19px;
  border-color: rgba(11, 48, 53, 0.34);
  color: #0b3035;
  background: rgba(255, 255, 255, 0.45);
}

body.home-page .btn-hero-talk:hover {
  border-color: #0b3035;
  color: #0b3035;
  background: rgba(255, 255, 255, 0.84);
}

body.home-page .hero-banner .hero-stats-bar {
  width: min(100%, 700px);
  max-width: 700px !important;
  margin-top: 48px;
}

body.home-page .hero-video-bg-wrap {
  top: 50%;
  right: clamp(24px, 4vw, 72px);
  width: min(51vw, 800px);
  height: min(72vh, 610px);
  aspect-ratio: auto;
  border: 8px solid rgba(255, 255, 255, 0.7);
  border-radius: 34px;
  clip-path: none;
  overflow: hidden;
  background: #0a292f;
  box-shadow: 0 26px 65px rgba(22, 53, 52, 0.18), 0 3px 0 rgba(198, 107, 67, 0.25);
  transform: translateY(-50%);
}

body.home-page .hero-banner .hero-video-bg {
  object-fit: cover;
  object-position: center;
  filter: saturate(0.96) contrast(1.03);
}

body.home-page .hero-banner .hero-video-overlay {
  background:
    linear-gradient(90deg, rgba(4, 20, 24, 0.54), transparent 43%),
    linear-gradient(0deg, rgba(4, 20, 24, 0.67), transparent 38%, rgba(4, 20, 24, 0.08)) !important;
}

body.home-page .hero-media-label,
body.home-page .hero-media-caption,
body.home-page .hero-media-side-note {
  display: block;
  position: absolute;
  z-index: 3;
}

body.home-page .hero-media-label {
  top: 24px;
  left: 24px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(8, 30, 33, 0.32);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  backdrop-filter: blur(10px);
}

body.home-page .hero-media-label i {
  margin-right: 7px;
  color: #e2a16f;
}

body.home-page .hero-media-caption {
  bottom: 27px;
  left: 27px;
  padding-left: 16px;
  border-left: 1px solid #e2a16f;
}

body.home-page .hero-media-caption p {
  margin: 0 0 11px;
  color: #fff;
  font-family: Georgia, serif;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  font-style: italic;
  line-height: 1.14;
}

body.home-page .hero-media-caption a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 0.77rem;
  font-weight: 700;
}

body.home-page .hero-media-side-note {
  top: 50%;
  right: 26px;
  width: 190px;
  padding-left: 14px;
  border-left: 1px solid rgba(226, 161, 111, 0.8);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%);
}

body.home-page .hero-media-side-note span {
  color: #e2a16f;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 1.3px;
}

body.home-page .hero-media-side-note p {
  margin: 10px 0 15px;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.22;
}

body.home-page .hero-media-side-note small {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

body.home-page .hero-media-side-note small i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e2a16f;
}

@media (max-width: 1120px) {
  body.home-page .hero-banner {
    height: auto;
    min-height: 0;
    padding: 68px 0 48px;
  }

  body.home-page .hero-banner .hero-container {
    width: calc(100% - 64px);
  }

  body.home-page .hero-intro-layout {
    width: 100%;
  }

  body.home-page .hero-video-bg-wrap {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 54px auto 0;
    transform: none;
  }
}

@media (max-width: 700px) {
  body.home-page .hero-banner {
    padding: 44px 0 30px;
  }

  body.home-page .hero-banner .hero-container {
    width: calc(100% - 40px);
  }

  body.home-page .hero-main-title {
    font-size: clamp(2.65rem, 11vw, 4rem);
  }

  body.home-page .hero-side-copy {
    margin-top: 21px;
  }

  body.home-page .hero-subtext-para {
    font-size: 0.9rem;
  }

  body.home-page .hero-buttons-flex {
    align-items: stretch;
    flex-wrap: wrap;
  }

  body.home-page .btn-hero-explore,
  body.home-page .btn-hero-talk {
    min-height: 46px;
    padding: 10px 14px;
    font-size: 0.78rem;
  }

  body.home-page .hero-banner .hero-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 15px 0 !important;
    margin-top: 32px;
  }

  body.home-page .hero-stats-bar .stat-item {
    padding: 5px 8px;
    border-right: 0;
  }

  body.home-page .hero-stats-bar .stat-item:first-child {
    padding-left: 0;
  }

  body.home-page .hero-video-bg-wrap {
    min-height: 300px;
    margin-top: 38px;
    border-width: 5px;
    border-radius: 22px;
  }

  body.home-page .hero-media-label {
    top: 15px;
    left: 15px;
    padding: 7px 10px;
    font-size: 0.5rem;
  }

  body.home-page .hero-media-caption {
    bottom: 17px;
    left: 17px;
    padding-left: 11px;
  }

  body.home-page .hero-media-caption p {
    margin-bottom: 6px;
    font-size: clamp(1.05rem, 5vw, 1.4rem);
  }

  body.home-page .hero-media-caption a {
    font-size: 0.65rem;
  }

  body.home-page .hero-media-side-note {
    display: none;
  }
}

@media (max-width: 700px) {
  .gpr-workflow-section {
    padding: 52px 0;
  }

  .gpr-workflow-panel {
    padding: 48px 18px;
    border-radius: 24px;
  }

  .gpr-workflow-panel>h2 {
    font-size: 1.85rem;
  }

  .gpr-workflow-grid {
    grid-template-columns: 1fr;
    gap: 82px;
    margin-top: 86px;
  }

  .gpr-workflow-card:not(:last-child)::after {
    display: none;
  }

  .gpr-workflow-card {
    min-height: 180px;
  }
}

/* ===========================================================================
   SERVICES DIRECTORY PAGE
   Reuses the site's blue-water language while giving the complete service
   catalogue a compact, scan-friendly card layout.
   =========================================================================== */
.services-directory-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: url('assect/about-hero-dam.jpg') center 42% / cover no-repeat;
}

.services-directory-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(5, 23, 48, 0.94) 0%, rgba(3, 86, 142, 0.78) 58%, rgba(0, 128, 255, 0.45) 100%);
}

.services-directory-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 34px;
  padding-bottom: 34px;
}

.services-directory-hero .contact-hero-title {
  max-width: 760px;
  margin-bottom: 12px;
}

.services-directory-hero .contact-hero-subtitle {
  max-width: 670px;
  margin-bottom: 0;
}

.services-directory-section {
  position: relative;
  overflow: hidden;
  padding: 94px 0 112px;
  background: linear-gradient(180deg, #f2f8ff 0%, #fbfdff 48%, #ffffff 100%);
}

.services-directory-glow {
  position: absolute;
  top: -180px;
  left: 50%;
  width: min(760px, 86vw);
  height: 430px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.2), rgba(0, 128, 255, 0.04) 52%, transparent 74%);
}

.services-directory-container {
  position: relative;
  z-index: 1;
  max-width: 1540px;
}

.services-directory-intro {
  max-width: 850px;
  margin: 0 auto 48px;
  text-align: center;
}

.services-directory-intro .services-main-heading {
  margin-bottom: 13px;
}

.services-directory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.directory-service-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 65, 110, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.directory-service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 128, 255, 0.42);
  box-shadow: 0 22px 42px rgba(15, 65, 110, 0.16);
}

.directory-card-media {
  position: relative;
  height: 188px;
  overflow: hidden;
  background: #dbeafe;
}

.directory-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 33, 63, 0.28) 100%);
}

.directory-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.directory-service-card:hover .directory-card-media img {
  transform: scale(1.08);
}

.directory-card-number {
  position: absolute;
  right: 13px;
  bottom: 10px;
  z-index: 1;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 30, 60, 0.38);
}

.directory-card-body {
  display: flex;
  min-height: 210px;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 21px 20px;
}

.directory-card-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0077ff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.9px;
  line-height: 1;
}

.directory-card-body h3 {
  margin: 13px 0 8px;
  color: #071e3d;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.3;
}

.directory-card-body p {
  margin: 0 0 18px;
  color: #5c6b7e;
  font-size: 0.78rem;
  line-height: 1.58;
}

.directory-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: #0077ff;
  font-size: 0.77rem;
  font-weight: 800;
  text-decoration: none;
}

.directory-card-link i {
  transition: transform 0.2s ease;
}

.directory-card-link:hover i {
  transform: translateX(4px);
}

.directory-card-purple .directory-card-tag {
  background: #ede9fe;
  color: #7c3aed;
}

.directory-card-cyan .directory-card-tag {
  background: #cffafe;
  color: #0891b2;
}

.directory-card-sapphire .directory-card-tag {
  background: #dbeafe;
  color: #1d4ed8;
}

.directory-card-emerald .directory-card-tag {
  background: #d1fae5;
  color: #059669;
}

.directory-card-purple .directory-card-link {
  color: #7c3aed;
}

.directory-card-cyan .directory-card-link {
  color: #0891b2;
}

.directory-card-sapphire .directory-card-link {
  color: #1d4ed8;
}

.directory-card-emerald .directory-card-link {
  color: #059669;
}

.services-directory-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #061b35 0%, #0b4776 58%, #0080c8 100%);
}

.services-directory-cta::after {
  content: '';
  position: absolute;
  top: -120px;
  right: 8%;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(125, 211, 252, 0.26);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(125, 211, 252, 0.08), 0 0 0 70px rgba(125, 211, 252, 0.04);
}

.services-directory-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 220px;
}

.services-directory-cta .pill-category-text {
  color: #7dd3fc;
  font-size: 0.72rem;
}

.services-directory-cta h2 {
  max-width: 580px;
  margin: 12px 0 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  line-height: 1.15;
}

.services-directory-cta .btn-white-contact-pill {
  flex-shrink: 0;
}

@media (max-width: 1320px) {
  .services-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .services-directory-section {
    padding: 76px 0 88px;
  }

  .services-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .services-directory-cta-inner {
    min-height: 190px;
  }
}

@media (max-width: 640px) {
  .services-directory-page {
    overflow-x: hidden;
  }

  .services-directory-hero {
    min-height: 330px;
  }

  .services-directory-hero-inner {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .services-directory-hero .contact-hero-title,
  .services-directory-hero .contact-hero-subtitle,
  .services-directory-intro .services-main-heading,
  .services-directory-intro .services-subtext-para {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .services-directory-hero .contact-hero-title,
  .services-directory-hero .contact-hero-subtitle,
  .services-directory-intro .services-main-heading,
  .services-directory-intro .services-subtext-para {
    width: 100%;
    white-space: normal;
    word-break: break-word;
  }

  .services-directory-hero .contact-hero-title {
    font-size: 2.05rem;
  }

  .services-directory-hero .contact-hero-title span.highlight-blue {
    display: inline;
    white-space: normal;
  }

  .services-directory-intro .services-main-heading {
    font-size: 1.95rem;
  }

  .services-directory-section {
    padding: 62px 0 70px;
  }

  .services-directory-intro {
    margin-bottom: 34px;
  }

  .services-directory-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .directory-card-media {
    height: 205px;
  }

  .directory-card-body {
    min-height: 0;
    padding: 20px 19px 21px;
  }

  .services-directory-cta-inner {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-height: 270px;
  }

  .services-directory-cta h2 {
    font-size: 2rem;
  }
}

/* ==========================================================================
   4. OUR SERVICES SECTION (EXACT AS SCREENSHOT)
   ========================================================================== */
.services-solutions-section {
  position: relative;
  background: linear-gradient(180deg, #edf5ff 0%, #f4f9ff 45%, #ffffff 100%);
  padding: 100px 0 110px 0;
  overflow: hidden;
}

.services-bg-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.15) 0%, rgba(0, 128, 255, 0.05) 50%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}

/* Water Splash Corner Decor (Top-Left & Top-Right) */
.services-water-splash {
  position: absolute;
  top: -15px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
}

.splash-top-left {
  left: -20px;
  width: 480px;
}

.splash-top-right {
  right: -20px;
  width: 480px;
}

.splash-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 128, 255, 0.15));
}

.services-inner-container {
  position: relative;
  z-index: 2;
  max-width: 1680px;
  margin: 0 auto;
}

/* Section Header */
.services-header-box {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 52px auto;
}

.services-category-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
}

.pill-blue-dash {
  width: 32px;
  height: 2.5px;
  background: var(--primary-blue);
  border-radius: 2px;
}

.pill-category-text {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--primary-blue);
  text-transform: uppercase;
}

.services-main-heading {
  font-size: 2.65rem;
  font-weight: 800;
  color: #071e3d;
  line-height: 1.22;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.highlight-blue-txt,
.services-main-heading .highlight-blue-txt,
.process-main-heading .highlight-blue-txt {
  color: #0077ff !important;
  background: linear-gradient(135deg, #0077ff 0%, #00b4d8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline;
}

.services-subtext-para {
  font-size: 1.05rem;
  color: #526071;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* 6 Services Grid (3 Columns x 2 Rows) */
.services-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.services-view-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 42px;
}

.services-view-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  border: 1.5px solid #0077ff;
  border-radius: 999px;
  background: #ffffff;
  color: #0066d6;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 119, 255, 0.12);
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.services-view-more-btn i {
  font-size: 0.82rem;
  transition: transform 180ms ease;
}

.services-view-more-btn:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #0077ff, #00a7e8);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(0, 119, 255, 0.24);
}

.services-view-more-btn:hover i {
  transform: translateX(4px);
}

/* Individual Solution Card (Enlarged Premium Size) */
.solution-card {
  background: #ffffff;
  border-radius: 26px;
  display: flex;
  height: 320px;
  overflow: hidden;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.solution-card:hover {
  transform: translateY(-9px);
}

/* Individual Card Theme Borders & Ambient Glow Shadows */
.card-theme-blue {
  border: 2.5px solid #0084ff;
  box-shadow: 0 14px 38px rgba(0, 132, 255, 0.12);
}

.card-theme-blue:hover {
  border-color: #0066ee;
  box-shadow: 0 24px 55px rgba(0, 132, 255, 0.28);
}

.card-theme-sapphire {
  border: 2.5px solid #2563eb;
  box-shadow: 0 14px 38px rgba(37, 99, 235, 0.12);
}

.card-theme-sapphire:hover {
  border-color: #1d4ed8;
  box-shadow: 0 24px 55px rgba(37, 99, 235, 0.28);
}

.card-theme-azure {
  border: 2.5px solid #0284c7;
  box-shadow: 0 14px 38px rgba(2, 132, 199, 0.12);
}

.card-theme-azure:hover {
  border-color: #0369a1;
  box-shadow: 0 24px 55px rgba(2, 132, 199, 0.28);
}

.card-theme-emerald {
  border: 2.5px solid #10b981;
  box-shadow: 0 14px 38px rgba(16, 185, 129, 0.12);
}

.card-theme-emerald:hover {
  border-color: #059669;
  box-shadow: 0 24px 55px rgba(16, 185, 129, 0.28);
}

.card-theme-cyan {
  border: 2.5px solid #06b6d4;
  box-shadow: 0 14px 38px rgba(6, 182, 212, 0.12);
}

.card-theme-cyan:hover {
  border-color: #0891b2;
  box-shadow: 0 24px 55px rgba(6, 182, 212, 0.28);
}

.card-theme-purple {
  border: 2.5px solid #8b5cf6;
  box-shadow: 0 14px 38px rgba(139, 92, 246, 0.12);
}

.card-theme-purple:hover {
  border-color: #7c3aed;
  box-shadow: 0 24px 55px rgba(139, 92, 246, 0.28);
}

/* Card Left Side (Cover Image with organic curve fade) */
.card-media-side {
  position: relative;
  width: 45%;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  background: #e2e8f0;
}

.card-cover-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.solution-card:hover .card-cover-photo {
  transform: scale(1.08);
}

/* Organic Soft Curved Mask Divider */
.media-curve-mask {
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 48px;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.5) 35%, #ffffff 100%);
  pointer-events: none;
}

/* Card Right Side Details */
.card-details-side {
  flex: 1;
  padding: 22px 22px 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background: #ffffff;
  z-index: 2;
  overflow: hidden;
}

/* Card Header Flex: Icon Badge + (Tag & Title) side by side */
.card-header-flex {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding-right: 48px;
  /* space for top-right watermark number */
  margin-bottom: 4px;
}

/* Icon Badge */
.card-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.solution-card:hover .card-icon-badge {
  transform: scale(1.1) rotate(-4deg);
}

.srv-badge-blue {
  background: linear-gradient(135deg, #38bdf8 0%, #0084ff 100%);
  box-shadow: 0 6px 16px rgba(0, 132, 255, 0.35);
}

.srv-badge-sapphire {
  background: linear-gradient(135deg, #60a5fa 0%, #1d4ed8 100%);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.srv-badge-azure {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}

.srv-badge-emerald {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.srv-badge-cyan {
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
  box-shadow: 0 6px 16px rgba(6, 182, 212, 0.35);
}

.srv-badge-purple {
  background: linear-gradient(135deg, #c084fc 0%, #7c3aed 100%);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
}

/* Title & Micro-tag Group beside Icon */
.card-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.service-micro-tag {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2.5px 9px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.2;
}

.tag-blue {
  background: #e0f2fe;
  color: #0077ff;
}

.tag-sapphire {
  background: #dbeafe;
  color: #1d4ed8;
}

.tag-azure {
  background: #e0f2fe;
  color: #0284c7;
}

.tag-emerald {
  background: #d1fae5;
  color: #059669;
}

.tag-cyan {
  background: #cffafe;
  color: #0891b2;
}

.tag-purple {
  background: #ede9fe;
  color: #7c3aed;
}

.card-title-text {
  font-family: var(--font-heading) !important;
  font-size: 1.14rem;
  font-weight: 800;
  color: #071e3d;
  line-height: 1.25;
  margin: 0;
}

/* Watermark Number in Top Right */
.card-watermark-num {
  position: absolute;
  top: -4px;
  right: 0;
  font-family: var(--font-heading) !important;
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: transform 0.3s ease;
  opacity: 0.85;
}

.solution-card:hover .card-watermark-num {
  transform: scale(1.1);
}

.wm-blue {
  color: #bae6fd;
}

.wm-sapphire {
  color: #bfdbfe;
}

.wm-azure {
  color: #bae6fd;
}

.wm-emerald {
  color: #a7f3d0;
}

.wm-cyan {
  color: #a5f3fc;
}

.wm-purple {
  color: #ddd6fe;
}

/* Description Paragraph */
.card-desc-text {
  font-family: var(--font-body);
  font-size: 0.83rem;
  color: #52637a;
  line-height: 1.45;
  margin: 6px 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Feature Bullet Badges Row */
.card-specs-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  padding: 7px 10px;
  background: #f8fafc;
  border-radius: 9px;
  border-left: 3px solid #cbd5e1;
}

.card-theme-blue .card-specs-row {
  border-left-color: #0084ff;
  background: #f0f7ff;
}

.card-theme-sapphire .card-specs-row {
  border-left-color: #2563eb;
  background: #f0f5ff;
}

.card-theme-azure .card-specs-row {
  border-left-color: #0284c7;
  background: #f0f9ff;
}

.card-theme-emerald .card-specs-row {
  border-left-color: #059669;
  background: #f0fdf4;
}

.card-theme-cyan .card-specs-row {
  border-left-color: #0891b2;
  background: #ecfeff;
}

.card-theme-purple .card-specs-row {
  border-left-color: #7c3aed;
  background: #faf5ff;
}

.card-spec-item {
  font-size: 0.74rem;
  font-weight: 600;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-spec-item i {
  font-size: 0.72rem;
  color: #0077ff;
}

.card-theme-sapphire .card-spec-item i {
  color: #2563eb;
}

.card-theme-azure .card-spec-item i {
  color: #0284c7;
}

.card-theme-emerald .card-spec-item i {
  color: #059669;
}

.card-theme-cyan .card-spec-item i {
  color: #0891b2;
}

.card-theme-purple .card-spec-item i {
  color: #7c3aed;
}

/* Action Buttons */
.btn-card-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 0.86rem;
  font-weight: 700;
  width: fit-content;
  text-decoration: none;
  transition: all 0.28s ease;
}

.btn-card-action i {
  transition: transform 0.2s ease;
}

.btn-card-action:hover i {
  transform: translateX(3px);
}

.btn-theme-blue {
  background: #f0f7ff;
  color: #0077ff;
  border: 1.5px solid #93c5fd;
}

.btn-theme-blue:hover {
  background: #0077ff;
  color: #ffffff;
  border-color: #0077ff;
  box-shadow: 0 4px 14px rgba(0, 119, 255, 0.35);
}

.btn-theme-sapphire {
  background: #f0f5ff;
  color: #2563eb;
  border: 1.5px solid #93c5fd;
}

.btn-theme-sapphire:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.btn-theme-azure {
  background: #f0f9ff;
  color: #0284c7;
  border: 1.5px solid #7dd3fc;
}

.btn-theme-azure:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.btn-theme-emerald {
  background: #f0fdf4;
  color: #059669;
  border: 1.5px solid #86efac;
}

.btn-theme-emerald:hover {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.btn-theme-cyan {
  background: #ecfeff;
  color: #0891b2;
  border: 1.5px solid #67e8f9;
}

.btn-theme-cyan:hover {
  background: #0891b2;
  color: #ffffff;
  border-color: #0891b2;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
}

.btn-theme-purple {
  background: #faf5ff;
  color: #7c3aed;
  border: 1.5px solid #c4b5fd;
}

.btn-theme-purple:hover {
  background: #7c3aed;
  color: #ffffff;
  border-color: #7c3aed;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

/* Responsive Queries */
@media (max-width: 1400px) {
  .services-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .services-cards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .solution-card {
    height: 290px;
  }

  .services-main-heading {
    font-size: 2.1rem;
  }
}

@media (max-width: 580px) {
  .solution-card {
    flex-direction: column;
    height: auto;
    border-radius: 20px;
  }

  .card-media-side {
    width: 100%;
    height: 210px;
  }

  .media-curve-mask {
    top: auto;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
  }

  .card-details-side {
    padding: 22px 18px 20px 18px;
  }
}

/* ==========================================================================
   4.5. OUR PROCESS SECTION (RICH HYDROGEOLOGICAL BACKGROUND)
   ========================================================================== */
.process-flow-section {
  position: relative;
  background-color: #f6faff;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(56, 189, 248, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 88% 28%, rgba(0, 112, 243, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 30%, rgba(139, 92, 246, 0.08) 0%, transparent 60%),
    radial-gradient(rgba(2, 132, 199, 0.12) 1.5px, transparent 1.5px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 36px 36px;
  padding: 100px 0 150px 0;
  overflow: hidden;
}

/* Background Visual Effects Layer */
.process-bg-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Glow Orbs */
.proc-bg-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.proc-bg-glow-orb.orb-1 {
  width: 500px;
  height: 500px;
  top: -80px;
  left: -100px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, transparent 70%);
}

.proc-bg-glow-orb.orb-2 {
  width: 520px;
  height: 520px;
  top: 15%;
  right: -100px;
  background: radial-gradient(circle, rgba(0, 112, 243, 0.2) 0%, transparent 70%);
}

.proc-bg-glow-orb.orb-3 {
  width: 700px;
  height: 320px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(14, 165, 233, 0.22) 0%, transparent 70%);
}

/* Topographic Hydrogeological Contour Curves */
.proc-topographic-svg {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  opacity: 0.95;
  pointer-events: none;
}

/* Subsurface Water Stream Wave */
.proc-subsurface-stream-svg {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 300px;
  filter: blur(10px);
  pointer-events: none;
}

/* Corner Foliage Leaf Accents */
.proc-leaf-accent {
  position: absolute;
  width: 140px;
  height: auto;
  opacity: 0.88;
  filter: drop-shadow(0 14px 28px rgba(0, 80, 180, 0.16));
  pointer-events: none;
  z-index: 2;
  transition: transform 0.6s ease;
}

.proc-leaf-accent.leaf-left {
  top: 25px;
  left: -25px;
  transform: rotate(18deg);
  animation: procLeafSwayLeft 7s ease-in-out infinite alternate;
}

.proc-leaf-accent.leaf-right {
  top: 35px;
  right: -30px;
  transform: rotate(-24deg);
  animation: procLeafSwayRight 8.5s ease-in-out infinite alternate;
}

@keyframes procLeafSwayLeft {
  0% {
    transform: translateY(0) rotate(18deg);
  }

  100% {
    transform: translateY(14px) rotate(25deg);
  }
}

@keyframes procLeafSwayRight {
  0% {
    transform: translateY(0) rotate(-24deg);
  }

  100% {
    transform: translateY(12px) rotate(-17deg);
  }
}

/* Radar Pulse / Hydro Sensor Rings */
.proc-radar-pulse {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1.5px dashed rgba(56, 189, 248, 0.4);
  box-shadow: inset 0 0 30px rgba(0, 112, 243, 0.08);
  pointer-events: none;
  animation: procRadarSpin 35s linear infinite;
}

.proc-radar-pulse::before {
  content: '';
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  border: 1px solid rgba(2, 132, 199, 0.28);
}

.proc-radar-pulse::after {
  content: '';
  position: absolute;
  inset: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.24) 0%, transparent 75%);
}

.proc-radar-pulse.pulse-left {
  top: 30px;
  left: 3%;
}

.proc-radar-pulse.pulse-right {
  top: 40px;
  right: 3%;
}

@keyframes procRadarSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.process-inner-container {
  position: relative;
  z-index: 2;
  max-width: 1720px;
  margin: 0 auto;
}

/* Header */
.process-header-box {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 65px auto;
}

.process-category-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
}

.process-main-heading {
  font-family: var(--font-heading) !important;
  font-size: 2.65rem;
  font-weight: 800;
  color: #071e3d;
  line-height: 1.24;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.process-subtext-para {
  font-size: 1.05rem;
  color: #526071;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* 6 Step Horizontal Process Flow Grid */
.process-cards-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  position: relative;
  align-items: stretch;
}

/* Horizontal Rainbow Hydro Aura Behind Cards */
.process-cards-row::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 2%;
  right: 2%;
  height: 140px;
  transform: translateY(-40%);
  background: linear-gradient(90deg,
      rgba(0, 112, 243, 0.14) 0%,
      rgba(139, 92, 246, 0.16) 20%,
      rgba(249, 115, 22, 0.14) 40%,
      rgba(16, 185, 129, 0.14) 60%,
      rgba(244, 63, 94, 0.14) 80%,
      rgba(14, 165, 233, 0.16) 100%);
  filter: blur(48px);
  z-index: 0;
  pointer-events: none;
  border-radius: 60px;
}

.process-step-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

/* Top Floating Circular Image Bubble */
.step-image-bubble {
  position: relative;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: #ffffff;
  padding: 3.5px;
  box-shadow: 0 10px 24px rgba(7, 21, 43, 0.14);
  z-index: 3;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-step-item:hover .step-image-bubble {
  transform: translateY(-5px) scale(1.06);
}

.step-circle-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Number Badge on Circle */
.step-num-badge {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #ffffff;
  font-family: var(--font-heading) !important;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  border: 2px solid #ffffff;
  transition: transform 0.3s ease;
}

.process-step-item:hover .step-num-badge {
  transform: translateX(-50%) scale(1.15);
}

/* Connecting Curved Dashed Arrow */
.step-connect-arrow {
  position: absolute;
  top: 32px;
  right: -20px;
  width: 40px;
  height: 22px;
  z-index: 4;
  pointer-events: none;
}

.step-connect-arrow svg {
  width: 100%;
  height: 100%;
}

/* Card Body (High-contrast, readable, premium aesthetic) */
.step-card-card {
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  margin-top: -48px;
  padding: 60px 12px 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  flex: 1;
  min-height: 175px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(12, 30, 58, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.step-card-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: linear-gradient(180deg, rgba(240, 247, 255, 0.85) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 14px 14px 0 0;
}

.process-step-item:hover .step-card-card {
  transform: translateY(-5px);
}

.step-title-text {
  font-family: var(--font-heading) !important;
  font-size: 1.02rem;
  font-weight: 800;
  color: #071e3d;
  line-height: 1.28;
  margin-top: 2px;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
  position: relative;
  z-index: 2;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* Description Text - Crisp Dark Slate (#1e293b) for crystal-clear readability */
.step-desc-text {
  font-family: var(--font-body);
  font-size: 0.81rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.40;
  margin-bottom: 8px;
  min-height: 50px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 2;
  width: 100%;
  flex: none;
}

/* Bottom Accent Line */
.step-bottom-bar {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: width 0.3s ease;
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.process-step-item:hover .step-bottom-bar {
  width: 68px;
}

/* Individual Step Color Themes & Ambient Glows */
/* Step 1: Blue */
.step-color-blue .step-image-bubble {
  border: 3.5px solid #0080ff;
  box-shadow: 0 10px 25px rgba(0, 128, 255, 0.25);
}

.step-color-blue .step-card-card {
  border-color: #93c5fd;
}

.step-color-blue:hover .step-card-card {
  border-color: #0080ff;
  box-shadow: 0 22px 46px rgba(0, 128, 255, 0.22);
}

.badge-blue,
.bar-blue {
  background: linear-gradient(135deg, #0080ff 0%, #0055d4 100%);
}

/* Step 2: Purple */
.step-color-purple .step-image-bubble {
  border: 3.5px solid #8b5cf6;
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.25);
}

.step-color-purple .step-card-card {
  border-color: #c4b5fd;
}

.step-color-purple:hover .step-card-card {
  border-color: #8b5cf6;
  box-shadow: 0 22px 46px rgba(139, 92, 246, 0.22);
}

.badge-purple,
.bar-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

/* Step 3: Orange */
.step-color-orange .step-image-bubble {
  border: 3.5px solid #f97316;
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.25);
}

.step-color-orange .step-card-card {
  border-color: #fdba74;
}

.step-color-orange:hover .step-card-card {
  border-color: #f97316;
  box-shadow: 0 22px 46px rgba(249, 115, 22, 0.22);
}

.badge-orange,
.bar-orange {
  background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
}

/* Step 4: Green */
.step-color-green .step-image-bubble {
  border: 3.5px solid #10b981;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.25);
}

.step-color-green .step-card-card {
  border-color: #86efac;
}

.step-color-green:hover .step-card-card {
  border-color: #10b981;
  box-shadow: 0 22px 46px rgba(16, 185, 129, 0.22);
}

.badge-green,
.bar-green {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

/* Step 5: Pink */
.step-color-pink .step-image-bubble {
  border: 3.5px solid #ec4899;
  box-shadow: 0 10px 25px rgba(236, 72, 153, 0.25);
}

.step-color-pink .step-card-card {
  border-color: #f9a8d4;
}

.step-color-pink:hover .step-card-card {
  border-color: #ec4899;
  box-shadow: 0 22px 46px rgba(236, 72, 153, 0.22);
}

.badge-pink,
.bar-pink {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

/* Step 6: Cyan */
.step-color-cyan .step-image-bubble {
  border: 3.5px solid #06b6d4;
  box-shadow: 0 10px 25px rgba(6, 182, 212, 0.25);
}

.step-color-cyan .step-card-card {
  border-color: #67e8f9;
}

.step-color-cyan:hover .step-card-card {
  border-color: #06b6d4;
  box-shadow: 0 22px 46px rgba(6, 182, 212, 0.22);
}

.badge-cyan,
.bar-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
}

/* Bottom Water Wave & Bubbles */
.process-bottom-water {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  pointer-events: none;
  z-index: 1;
}

.process-wave-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.proc-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(56, 189, 248, 0.4));
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  animation: procFloatBubble 6s ease-in-out infinite;
}

.pb-1 {
  width: 18px;
  height: 18px;
  left: 15%;
  bottom: 35px;
  animation-duration: 5s;
}

.pb-2 {
  width: 12px;
  height: 12px;
  left: 45%;
  bottom: 20px;
  animation-duration: 7s;
  animation-delay: 1.5s;
}

.pb-3 {
  width: 22px;
  height: 22px;
  left: 75%;
  bottom: 40px;
  animation-duration: 6.5s;
  animation-delay: 0.5s;
}

.pb-4 {
  width: 14px;
  height: 14px;
  left: 88%;
  bottom: 25px;
  animation-duration: 5.5s;
  animation-delay: 2s;
}

@keyframes procFloatBubble {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-15px) scale(1.1);
  }
}

/* Responsive Queries for Process Section */
@media (max-width: 1400px) {
  .process-cards-row {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 55px;
    column-gap: 28px;
  }

  .step-connect-arrow {
    display: none;
  }

  .step-card-card {
    min-height: 170px;
  }
}

@media (max-width: 860px) {
  .process-cards-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 55px;
    column-gap: 20px;
  }

  .process-main-heading {
    font-size: 2.1rem;
  }
}

@media (max-width: 580px) {
  .process-cards-row {
    grid-template-columns: 1fr;
    row-gap: 65px;
  }

  .step-card-card {
    min-height: auto;
  }
}

/* ==========================================================================
   4.8. OUR VALUED CLIENTS SECTION (EXACT AS SCREENSHOT)
   ========================================================================== */
.valued-clients-section {
  position: relative;
  background: linear-gradient(180deg, #f0f7ff 0%, #e6f2fd 45%, #f4faff 100%);
  padding: 90px 0 110px 0;
  overflow: hidden;
}

/* Ambient Sky & Corner Water Splashes */
.clients-bg-sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 350px;
  background: radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.clients-splash-left {
  position: absolute;
  left: -80px;
  top: 100px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(0, 128, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.clients-splash-right {
  position: absolute;
  right: -80px;
  bottom: 120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.clients-container {
  position: relative;
  z-index: 2;
  max-width: 1720px;
  margin: 0 auto;
}

/* Top Hero Grid: Left Content & Right Site Artwork Backdrop */
.clients-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 25px;
}

.clients-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.clients-main-heading {
  font-size: 2.85rem;
  font-weight: 800;
  color: #071e3d;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.clients-subtext-para {
  font-size: 1.05rem;
  color: #526071;
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: 26px;
}

.btn-clients-explore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-blue);
  color: #ffffff;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 128, 255, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-clients-explore:hover {
  background: var(--primary-hover);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 128, 255, 0.45);
}

/* Right Column: Site Artwork Box */
.clients-right-visual-wrap {
  position: relative;
  height: 260px;
  display: flex;
  justify-content: flex-end;
}

.clients-site-artwork-box {
  position: relative;
  width: 100%;
  max-width: 580px;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(0, 80, 200, 0.15);
  border: 1.5px solid rgba(186, 230, 253, 0.9);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.clients-site-artwork-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0, 100, 255, 0.22);
}

.clients-site-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.clients-site-artwork-box:hover .clients-site-img {
  transform: scale(1.06);
}

.site-glass-fade-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 21, 43, 0.2) 0%, transparent 40%, rgba(7, 21, 43, 0.5) 100%);
  pointer-events: none;
}

.clients-live-badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 3;
}

/* 4 Floating Stats Badges Row */
.clients-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.client-stat-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #dbeafe;
  box-shadow: 0 6px 20px rgba(0, 80, 200, 0.06);
  transition: all 0.3s ease;
}

.client-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 100, 255, 0.12);
  border-color: #93c5fd;
}

.cstat-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0080ff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0, 128, 255, 0.3);
}

.cstat-info {
  display: flex;
  flex-direction: column;
}

.cstat-num,
.cstat-bold {
  font-family: var(--font-heading) !important;
  font-size: 1.45rem;
  font-weight: 800;
  color: #071e3d;
  line-height: 1.1;
}

.cstat-lbl {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.25;
  margin-top: 2px;
}

/* Main White Rounded Card Containing Client Logos */
.client-logos-showcase-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 38px 40px;
  border: 1px solid rgba(210, 230, 255, 0.8);
  box-shadow: 0 14px 45px rgba(0, 80, 200, 0.07);
  margin-bottom: 34px;
}

.client-logos-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px 14px;
  align-items: center;
}

.client-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  padding: 8px 12px;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: #fdfefe;
}

.client-logo-box:hover {
  background: #f0f7ff;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 6px 16px rgba(0, 80, 200, 0.08);
}

.client-logo-box .logo-svg {
  max-width: 100%;
  max-height: 46px;
  width: auto;
  height: auto;
  transition: all 0.3s ease;
}

/* Bottom Tagline */
.clients-bottom-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.tagline-blue-dash {
  width: 45px;
  height: 2px;
  background: var(--primary-blue);
  border-radius: 2px;
}

.tagline-text {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #0077ff;
  text-transform: uppercase;
}

/* Bottom Wave */
.clients-bottom-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}

.clients-wave-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Responsive Queries */
@media (max-width: 1400px) {
  .client-logos-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .clients-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .clients-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .clients-right-visual-wrap {
    justify-content: center;
    height: 220px;
  }
}

@media (max-width: 860px) {
  .client-logos-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .client-logos-showcase-card {
    padding: 24px 20px;
  }

  .clients-main-heading {
    font-size: 2.2rem;
  }
}

@media (max-width: 580px) {
  .client-logos-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .clients-stats-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   4.9. CLIENT TESTIMONIALS SECTION (EXACT AS SCREENSHOT)
   ========================================================================== */
.testimonials-slider-section {
  position: relative;
  background: linear-gradient(180deg, #f0f7fe 0%, #ffffff 45%, #ecf5fe 100%);
  padding: 85px 0 45px 0;
  overflow: hidden;
}

.testi-bg-sky {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1500px;
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.22) 0%, rgba(0, 112, 243, 0.05) 50%, transparent 75%);
  pointer-events: none;
}

/* Left Foliage Decor (Removed) */
.testi-leaf-decor-left {
  display: none !important;
}

/* Left Bottom Water Splash Accent (Removed) */
.testi-water-splash-left {
  display: none !important;
}

.testi-container {
  position: relative;
  z-index: 2;
  width: min(100% - 64px, 1680px);
  max-width: 1680px;
  margin: 0 auto;
  padding: 0;
}

/* Header with proper breathing room */
.testi-header-box {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 52px auto;
}

.testi-category-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 7px 22px;
  background: rgba(0, 112, 243, 0.08);
  border: 1px solid rgba(0, 112, 243, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.pill-blue-dash {
  display: inline-block;
  width: 22px;
  height: 2px;
  background-color: #0070f3;
  border-radius: 2px;
}

.pill-category-text {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #0070f3;
  text-transform: uppercase;
}

.testi-main-heading {
  font-size: clamp(2.4rem, 3.2vw, 3.25rem);
  font-weight: 800;
  color: #0c1e3a;
  line-height: 1.16;
  margin-bottom: 16px;
  letter-spacing: -0.6px;
}

.testi-main-heading .highlight-blue-txt {
  color: #0070f3;
  background: linear-gradient(135deg, #0070f3 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.testi-subtext-para {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.68;
  max-width: 680px;
  margin: 0 auto;
}

/* Testimonials Showcase: Centered with Left & Right Edge Fade */
.testi-slider-showcase {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Left & Right Edge Fade */
.testi-edge-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 95px;
  pointer-events: none;
  z-index: 15;
  transition: opacity 0.3s ease;
}

.testi-edge-fade.fade-left {
  left: 0;
  background: linear-gradient(to right, #f0f7fe 0%, rgba(240, 247, 254, 0.75) 45%, rgba(240, 247, 254, 0) 100%);
}

.testi-edge-fade.fade-right {
  right: 0;
  background: linear-gradient(to left, #ecf5fe 0%, rgba(236, 245, 254, 0.75) 45%, rgba(236, 245, 254, 0) 100%);
}

/* Viewport with CSS Mask Fade */
.testi-cards-viewport {
  position: relative;
  overflow: hidden;
  padding: 16px 8px;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.testi-cards-row {
  display: flex;
  gap: 26px;
  align-items: stretch;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Testimonial Card - Spacious, Elevated & Premium */
.testi-card-box {
  flex: 0 0 calc((100% - 52px) / 3);
  min-width: 0;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 28px 26px 28px;
  border: 1px solid rgba(191, 219, 254, 0.75);
  box-shadow: 0 10px 30px -4px rgba(12, 54, 110, 0.07), 0 4px 12px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: hidden;
}

.testi-card-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #38bdf8, #0070f3, #0284c7);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testi-card-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -8px rgba(0, 112, 243, 0.16), 0 6px 16px rgba(0, 0, 0, 0.04);
  border-color: rgba(96, 165, 250, 0.6);
}

.testi-card-box:hover::before {
  opacity: 1;
}

/* Top Header of Card */
.testi-card-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.testi-quote-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 112, 243, 0.1), rgba(56, 189, 248, 0.14));
  color: #0070f3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border: 1px solid rgba(0, 112, 243, 0.15);
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.08);
}

.testi-rating-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.testi-star-rating {
  color: #f59e0b;
  font-size: 0.95rem;
  display: flex;
  gap: 3px;
}

.testi-rating-score {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0c1e3a;
  background: #fef3c7;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.2px;
}

/* Quote Body */
.testi-quote-body {
  font-size: 0.96rem;
  font-weight: 450;
  color: #334155;
  line-height: 1.72;
  margin-bottom: 24px;
  flex: 1;
}

/* Author Bar at bottom */
.testi-author-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
}

.author-logo-square {
  width: 60px;
  height: 48px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  transition: all 0.25s ease;
}

.testi-card-box:hover .author-logo-square {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.author-meta-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.author-name-txt {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0c1e3a;
  line-height: 1.25;
}

.author-role-txt {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0070f3;
  line-height: 1.25;
}

.author-company-txt {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.25;
}

.testi-verified-pill {
  color: #10b981;
  font-size: 1.15rem;
  margin-left: auto;
  display: flex;
  align-items: center;
  opacity: 0.9;
  flex-shrink: 0;
}

/* Navigation Arrow Buttons - Centered & Elevated */
.testi-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.arrow-prev {
  left: -24px;
  background: #ffffff;
  color: #0c1e3a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid #cbd5e1;
  font-size: 1rem;
}

.arrow-prev:hover {
  background: #f8fafc;
  transform: translateY(-50%) scale(1.1);
  border-color: #94a3b8;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.arrow-next {
  right: -24px;
  background: linear-gradient(135deg, #0070f3, #0056cc);
  color: #ffffff;
  box-shadow: 0 8px 26px rgba(0, 112, 243, 0.45);
  border: none;
  font-size: 1.05rem;
}

.arrow-next:hover {
  background: linear-gradient(135deg, #005fcc, #004599);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 10px 32px rgba(0, 112, 243, 0.6);
}

/* Pagination Dots */
.testi-pagination-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}

.p-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.3s ease;
  cursor: pointer;
}

.p-dot.active {
  background: #0070f3;
  width: 28px;
  border-radius: 999px;
}

/* Responsive for Testimonials Section */
@media (max-width: 1024px) {
  .testi-slider-showcase {
    max-width: 960px;
  }

  .testi-cards-row {
    gap: 20px;
  }

  .testi-card-box {
    flex: 0 0 calc((100% - 20px) / 2);
  }

  .testi-edge-fade {
    width: 60px;
  }
}

@media (max-width: 720px) {
  .testimonials-slider-section {
    padding: 65px 0 80px;
  }

  .testi-cards-row {
    gap: 16px;
  }

  .testi-card-box {
    flex: 0 0 100%;
    min-height: auto;
    padding: 26px 20px 22px;
  }

  .testi-edge-fade {
    width: 35px;
  }

  .arrow-prev {
    left: -12px;
    width: 42px;
    height: 42px;
  }

  .arrow-next {
    right: -12px;
    width: 42px;
    height: 42px;
  }
}

/* Bottom Splash Wave (Removed per user request) */
.testi-bottom-water-splash {
  display: none !important;
}


/* ==========================================================================
   4.10. FREQUENTLY ASKED QUESTIONS (SEE MASTER OVERRIDE SECTION AT END OF FILE)
   ========================================================================== */
/* Master styles for #faqs are consolidated at the end of this stylesheet under section MASTER FAQ SECTION SYSTEM */

/* ==========================================================================
   5. MASTER FOOTER (EXACT MATCH AS SCREENSHOT)
   ========================================================================== */
.master-footer {
  position: relative;
  background: linear-gradient(180deg, #051329 0%, #071936 50%, #040e1e 100%);
  color: #cbd5e1;
  padding-top: 80px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Background Artwork: Mountains + Sine Wave curves + Droplet Ripple */
.footer-bg-landscape {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.mountain-backdrop-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 0%, rgba(14, 116, 144, 0.25) 0%, rgba(7, 25, 54, 0) 70%);
}

.footer-sine-waves-svg {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 500px;
  height: 180px;
  opacity: 0.8;
}

.footer-water-drop-art {
  display: none !important;
}

.drop-column {
  position: absolute;
  bottom: 45px;
  width: 6px;
  height: 40px;
  background: linear-gradient(180deg, transparent 0%, #38bdf8 100%);
  border-radius: 3px;
  box-shadow: 0 0 12px #38bdf8;
}

.drop-ripple-circle {
  position: absolute;
  bottom: 25px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.6);
  transform: rotateX(65deg);
  animation: drop-ripple-expand 3s infinite ease-out;
}

.dr-1 {
  width: 60px;
  height: 60px;
}

.dr-2 {
  width: 110px;
  height: 110px;
  animation-delay: 1s;
}

.dr-3 {
  width: 170px;
  height: 170px;
  animation-delay: 2s;
}

@keyframes drop-ripple-expand {
  0% {
    transform: rotateX(65deg) scale(0.3);
    opacity: 1;
  }

  100% {
    transform: rotateX(65deg) scale(1.3);
    opacity: 0;
  }
}

/* Main 4-Column Grid - Exactly Matching Header Container Width */
.footer-main-container {
  position: relative;
  z-index: 5;
  width: 100% !important;
  max-width: 1720px !important;
  margin: 0 auto 50px auto !important;
  padding: 0 40px !important;
}

.footer-grid-5col {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.25fr 1.6fr;
  gap: clamp(24px, 3.5vw, 60px);
  align-items: flex-start;
  justify-content: space-between;
}

/* Col 1: Brand */
.footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}

.footer-logo:hover {
  transform: translateY(-2px);
}

.footer-logo-img {
  height: 42px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

.brand-mission-text {
  font-size: 0.92rem;
  color: #94a3b8;
  line-height: 1.68;
  margin-bottom: 16px;
  max-width: 360px;
}

.footer-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.22);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
  letter-spacing: 0.3px;
}

.footer-trust-badge i {
  color: #0070f3;
}

.footer-social-circles {
  display: flex;
  gap: 10px;
}

.footer-social-circles a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}

.footer-social-circles a:hover {
  background: linear-gradient(135deg, #0070f3, #0284c7);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 112, 243, 0.4);
}

/* Modern Footer Headings */
.footer-heading {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 22px;
  letter-spacing: 0.2px !important;
  display: flex;
  flex-direction: column;
}

.heading-accent-line {
  display: block;
  width: 34px;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8, #0070f3);
  border-radius: 99px;
  margin-top: 8px;
}

/* Col 2: Quick Links */
.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-list li a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.94rem;
  color: #94a3b8;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.22s ease;
}

.f-link-arrow {
  font-size: 0.68rem;
  color: #0284c7;
  transition: transform 0.22s ease, color 0.22s ease;
}

.footer-nav-list li a:hover {
  color: #ffffff;
  transform: translateX(5px);
}

.footer-nav-list li a:hover .f-link-arrow {
  color: #38bdf8;
  transform: translateX(3px);
}

/* Col 3: Services */
.footer-services-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-services-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
  color: #cbd5e1;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  transition: all 0.22s ease;
}

.f-service-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: all 0.22s ease;
}

.footer-services-list li a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  transform: translateX(4px);
}

.footer-services-list li a:hover .f-service-badge {
  background: #0070f3;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.45);
}

/* Col 4: Get in Touch Cards */
.footer-contact-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.f-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: all 0.25s ease;
  position: relative;
}

.f-contact-card.f-contact-link:hover {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.f-contact-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.f-contact-card.f-contact-link:hover .f-contact-icon-box {
  background: #0070f3;
  color: #ffffff;
  border-color: #38bdf8;
}

.f-contact-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.f-contact-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #64748b;
}

.f-contact-val {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.highlight-val {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.2px;
}

.f-card-action-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0070f3, #0284c7);
  color: #ffffff;
  align-self: center;
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(0, 112, 243, 0.4);
}

.closed-pill {
  display: inline-block;
  font-size: 0.68rem;
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.22);
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 600;
  margin-left: 4px;
}

/* Bottom Strip */
.footer-bottom-strip {
  position: relative;
  z-index: 5;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
  font-size: 0.85rem;
  color: #94a3b8;
}

.footer-bottom-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100% !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
}

.footer-bottom-inner .copyright-text {
  text-align: center;
}

.legal-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.legal-links a {
  color: #94a3b8;
}

.legal-links a:hover {
  color: #ffffff;
}

.legal-links .sep {
  color: rgba(255, 255, 255, 0.2);
}

.made-in-tag {
  color: #cbd5e1;
}

.heart-blue {
  color: var(--cyan-accent);
}

/* ==========================================================================
   6. MODAL DIALOG
   ========================================================================== */
.modal-backdrop-layer {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 43, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  padding: 20px;
}

.modal-backdrop-layer.active {
  opacity: 1;
  visibility: visible;
}

.modal-dialog-box {
  background: #ffffff;
  width: 100%;
  max-width: 540px;
  border: 1px solid rgba(186, 230, 253, 0.8);
  border-radius: 24px;
  padding: 38px 36px 34px;
  position: relative;
  box-shadow: 0 28px 80px rgba(2, 24, 54, 0.34), 0 0 0 8px rgba(255, 255, 255, 0.08);
  transform: scale(0.92);
  transition: var(--transition);
}

.modal-backdrop-layer.active .modal-dialog-box {
  transform: scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 17px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.55rem;
  color: #71839b;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.modal-close-btn:hover {
  color: #0b2b50;
  background: #eef7fd;
  transform: rotate(90deg);
}

.modal-header-section {
  text-align: center;
  margin-bottom: 26px;
}

.modal-icon-bubble {
  width: 52px;
  height: 52px;
  background: #e0f2fe;
  color: var(--primary-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin: 0 auto 12px auto;
}

.modal-header-section h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--header-dark);
  margin-bottom: 5px;
}

.modal-header-section p {
  color: var(--text-muted);
  font-size: 0.87rem;
  line-height: 1.5;
}

.modal-form-body .form-group {
  margin-bottom: 16px;
}

.modal-form-body .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.modal-form-body label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--header-dark);
  margin-bottom: 6px;
}

.modal-form-body input,
.modal-form-body select,
.modal-form-body textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  outline: none;
  transition: var(--transition);
  background: #ffffff;
  color: var(--text-dark);
}

.modal-form-body input:focus,
.modal-form-body select:focus,
.modal-form-body textarea:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.15);
}

.modal-form-body textarea {
  min-height: 112px;
  resize: vertical;
}

.modal-form-body input::placeholder,
.modal-form-body textarea::placeholder {
  color: #9aabbd;
}

.btn-modal-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #087de0, #0d5fb5);
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 10px;
}

.btn-modal-submit:hover {
  background: linear-gradient(135deg, #096fc8, #084d97);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(8, 107, 200, 0.24);
}

.btn-modal-submit:disabled,
.btn-send-message-pill:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.form-status-message {
  width: 100%;
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
}

.form-status-message.is-success {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.form-status-message.is-error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

/* ==========================================================================
   7. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1200px) {
  .hero-main-title {
    font-size: 2.8rem;
  }

  .footer-grid-5col {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 992px) {
  .nav-menu {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 24px;
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: none;
  }

  .nav-menu.active {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .dropdown-list {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: 16px;
    margin-top: 8px;
  }

  .mobile-toggle {
    display: flex;
  }

  .hero-banner {
    padding: 60px 0 80px 0;
    min-height: auto;
  }

  .hero-video-bg {
    left: 50%;
    right: auto;
    width: 100%;
    min-width: auto;
    transform: translate(-50%, -50%);
    object-position: center center;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-video-overlay {
    background: linear-gradient(180deg,
        rgba(248, 251, 255, 0.92) 0%,
        rgba(248, 251, 255, 0.70) 55%,
        rgba(248, 251, 255, 0.35) 100%);
  }

  .hero-main-title {
    font-size: 2.7rem;
  }

  .hero-visual-showcase {
    flex-direction: column;
    width: 100%;
  }

  .hero-geology-column {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .about-main-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-showcase-composition {
    max-width: 480px;
    margin: 0 auto;
  }

  .footer-grid-5col {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }

  .top-bar-inner {
    justify-content: center;
  }

  .btn-consultation-pill span {
    display: none;
  }

  .btn-consultation-pill {
    padding: 10px 14px;
  }

  .hero-main-title {
    font-size: 2.3rem;
  }

  .hero-stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px;
    width: 100%;
    max-width: 100%;
  }

  .about-main-headline {
    font-size: 2.2rem;
  }

  .about-features-2x2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-showcase-graphic-wrap {
    width: calc(100% - 22px);
    aspect-ratio: 1 / 1.05;
    min-height: 320px;
  }

  .scene-drilling {
    left: 4%;
    width: 73%;
    height: 58%;
  }

  .scene-water {
    right: -3%;
    width: 46%;
    height: 39%;
  }

  .scene-aquifer {
    left: 18%;
    width: 66%;
    height: 40%;
  }

  .showcase-badge {
    min-height: 56px;
    gap: 7px;
    padding: 7px 10px 7px 7px;
    border-radius: 15px;
  }

  .showcase-badge-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 0.9rem;
  }

  .showcase-badge-copy strong {
    font-size: 0.72rem;
  }

  .showcase-badge-copy small {
    margin-top: 2px;
    font-size: 0.55rem;
  }

  .showcase-yield {
    right: -3%;
  }

  .showcase-experience {
    left: -4%;
  }

  .showcase-resources {
    right: -4%;
  }

  .showcase-pan {
    right: -2%;
  }

  .showcase-dark-badge .showcase-badge-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .about-sub-photo-card {
    width: 65%;
  }

  .stat-badge-top {
    right: 0;
  }

  .stat-badge-bottom {
    left: 0;
    bottom: 20px;
  }

  .stat-item {
    padding: 6px 8px;
  }

  .stat-item:not(:last-child)::after {
    display: none;
  }

  .hero-geology-column {
    grid-template-columns: 1fr;
  }

  .showcase-switcher-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-grid-5col {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* Final viewport guard: keep the showcase fully inside tablet and phone layouts. */
@media (max-width: 1024px) {
  .about-main-grid {
    grid-template-columns: 1fr;
  }

  .about-right-col {
    overflow: visible;
  }

  .showcase-yield,
  .showcase-resources,
  .showcase-pan {
    right: 0;
  }

  .showcase-experience {
    left: 0;
  }
}

@media (max-width: 640px) {
  .about-showcase-graphic-wrap {
    width: calc(100% - 16px);
  }

  .about-main-headline {
    white-space: normal;
    line-height: 1.02;
  }

  .showcase-yield,
  .showcase-resources,
  .showcase-pan {
    right: 0;
  }

  .showcase-experience {
    left: 0;
  }
}

/* Final feature-card redesign: compact, aligned and easier to scan. */
.about-features-2x2 {
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 27px;
}

.about-bento-card {
  min-height: 0;
  height: 116px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 15px 18px 15px 16px;
  border: 1px solid rgba(205, 224, 241, 0.95);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.88));
  box-shadow: 0 10px 24px rgba(28, 91, 145, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.about-bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  width: 42px;
  height: 3px;
  border-radius: 0 0 8px 8px;
  background: currentColor;
  opacity: 0.22;
}

.bento-blue {
  color: #0084ff;
}

.bento-green {
  color: #10b981;
}

.bento-orange {
  color: #f59e0b;
}

.bento-purple {
  color: #8b5cf6;
}

.bento-icon-disc {
  width: 46px;
  height: 46px;
  font-size: 1.08rem;
}

.bento-card-body {
  min-width: 0;
  padding-right: 20px;
}

.bento-card-body h5 {
  margin-bottom: 4px;
  font-size: 1rem;
  line-height: 1.15;
  color: #0b2238;
}

.bento-card-body p {
  font-size: 0.75rem;
  line-height: 1.38;
  color: #60728a;
}

.bento-watermark {
  top: 13px;
  right: 15px;
  font-size: 1.18rem;
}

.bento-bottom-bar {
  height: 4px;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .about-bento-card {
    height: auto;
    min-height: 104px;
    padding: 14px 16px;
  }

  .bento-card-body {
    padding-right: 14px;
  }
}

/* ======================================================================
   VALUED CLIENTS REFERENCE COMPOSITION
   ====================================================================== */
.valued-clients-section {
  min-height: 680px;
  padding: 24px 0 54px;
  background:
    radial-gradient(circle at 38% 5%, rgba(177, 226, 255, 0.5), transparent 33%),
    linear-gradient(145deg, #f7fcff 0%, #e8f6ff 55%, #dff1fc 100%);
}

.valued-clients-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 116, 236, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.2;
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3) 35%, transparent 85%);
}

.clients-container {
  max-width: 2040px;
  padding: 0 68px;
}

.clients-hero-grid {
  position: relative;
  display: block;
  min-height: 340px;
  margin-bottom: 0;
}

.clients-left-col {
  position: relative;
  z-index: 5;
  width: 54%;
  padding: 22px 0 0 42px;
}

.clients-category-pill {
  gap: 12px;
  margin-bottom: 12px;
}

.clients-main-heading {
  font-size: clamp(2.8rem, 4vw, 4rem);
  line-height: 1.05;
  margin-bottom: 15px;
  letter-spacing: -1px;
}

.clients-subtext-para {
  max-width: 790px;
  font-size: 1.04rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.clients-right-visual-wrap {
  position: absolute;
  top: -24px;
  right: -68px;
  width: 58%;
  height: 370px;
  z-index: 1;
  display: block;
}

.clients-site-artwork-box {
  width: 100%;
  max-width: none;
  height: 100%;
  border: 0;
  border-radius: 0 0 0 230px;
  box-shadow: -20px 0 50px rgba(0, 87, 176, 0.14);
  background: #b8e3fb;
}

.clients-site-img {
  object-position: 78% center;
  transform: scale(1.1);
  filter: saturate(1.08) contrast(1.02);
}

.clients-site-artwork-box:hover .clients-site-img {
  transform: scale(1.14);
}

.site-glass-fade-overlay {
  background: linear-gradient(90deg, rgba(237, 248, 255, 0.98) 0%, rgba(237, 248, 255, 0.6) 14%, transparent 40%, rgba(0, 91, 191, 0.08) 100%);
}

.clients-live-badge {
  display: none;
}

.clients-stats-row {
  position: relative;
  z-index: 6;
  width: 51%;
  margin: -116px 0 28px auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.client-stat-card {
  min-height: 92px;
  padding: 12px 13px;
  gap: 11px;
  border-radius: 17px;
  border: 1px solid rgba(197, 222, 242, 0.95);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px rgba(0, 73, 150, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.cstat-icon-circle {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  font-size: 1.05rem;
}

.cstat-num,
.cstat-bold {
  font-size: 1.18rem;
}

.cstat-lbl {
  font-size: 0.68rem;
}

.client-logos-showcase-card {
  position: relative;
  z-index: 4;
  margin-bottom: 24px;
  padding: 18px 28px 20px;
  border-radius: 28px;
  border: 1px solid rgba(205, 229, 247, 0.95);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(0, 80, 160, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.client-logos-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px 12px;
}

.client-logo-box {
  height: 82px;
  padding: 8px 10px;
  border: 1px solid rgba(221, 235, 247, 0.9);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
}

.client-logo-box .logo-svg {
  max-height: 52px;
}

.clients-bottom-tagline {
  position: relative;
  z-index: 4;
  gap: 16px;
}

.tagline-blue-dash {
  width: 58px;
  height: 2px;
}

.tagline-text {
  font-size: 0.72rem;
  letter-spacing: 2.8px;
}

@media (max-width: 1300px) {
  .clients-container {
    padding: 0 42px;
  }

  .clients-left-col {
    padding-left: 18px;
  }

  .clients-right-visual-wrap {
    right: -42px;
  }

  .client-logos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .clients-stats-row {
    width: 56%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: -92px;
  }
}

@media (max-width: 860px) {
  .valued-clients-section {
    min-height: auto;
    padding: 54px 0 72px;
  }

  .clients-container {
    padding: 0 22px;
  }

  .clients-hero-grid {
    min-height: 0;
  }

  .clients-left-col {
    width: 100%;
    padding: 0;
  }

  .clients-main-heading {
    font-size: 2.45rem;
  }

  .clients-right-visual-wrap {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 260px;
    margin-top: 28px;
  }

  .clients-site-artwork-box {
    border-radius: 30px 30px 110px 30px;
  }

  .clients-stats-row {
    width: 100%;
    margin: 18px 0 24px;
  }

  .client-logos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .clients-main-heading {
    font-size: 2.05rem;
  }

  .clients-subtext-para {
    font-size: 0.9rem;
  }

  .clients-stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .client-logos-showcase-card {
    padding: 14px;
  }

  .client-logos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .client-logo-box {
    height: 70px;
  }

  .clients-bottom-tagline {
    gap: 8px;
  }

  .tagline-blue-dash {
    width: 28px;
  }

  .tagline-text {
    font-size: 0.58rem;
    letter-spacing: 1.3px;
  }
}

/* ======================================================================
   SITE-WIDE VISUAL CONSISTENCY PASS
   ====================================================================== */
body {
  background: #f5fbff;
}

section[id] {
  scroll-margin-top: 92px;
}

.services-solutions-section,
.process-flow-section,
.valued-clients-section,
.testimonials-slider-section,
.faq-answers-section {
  border-top: 1px solid rgba(180, 216, 240, 0.55);
}

.services-main-heading,
.process-main-heading,
.clients-main-heading,
.testi-main-heading,
.faq-main-heading {
  text-wrap: balance;
}

.services-cards-grid,
.process-cards-row,
.client-logos-showcase-card,
.testimonials-slider-section .testi-card-box,
.faq-accordion-item {
  filter: drop-shadow(0 10px 22px rgba(0, 74, 144, 0.045));
}

.service-card-item,
.step-card-card,
.faq-accordion-item {
  border-color: rgba(200, 224, 241, 0.95);
  box-shadow: 0 12px 28px rgba(0, 74, 144, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.service-card-item:hover,
.step-card-card:hover,
.faq-accordion-item:hover {
  box-shadow: 0 18px 36px rgba(0, 103, 205, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.client-logo-box .logo-svg {
  display: block;
  width: 100%;
  height: 52px;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}

.client-logo-box {
  overflow: hidden;
}

.clients-bottom-wave,
.testi-bottom-water-splash,
.about-bottom-wave-layer {
  opacity: 0.9;
}

@media (min-width: 1500px) {

  .services-inner-container,
  .process-inner-container,
  .faq-container {
    max-width: 1780px;
  }
}

/* Spacious 6-step process flow layout */
@media (min-width: 1401px) {
  .process-cards-row {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 20px;
  }

  .step-connect-arrow {
    right: -24px;
    width: 48px;
  }

  .step-card-card {
    border-radius: 16px;
    min-height: 175px;
    height: 100%;
    padding: 60px 12px 14px 12px;
    justify-content: flex-start;
  }

  .step-title-text {
    font-size: 1.02rem;
    margin-top: 2px;
    margin-bottom: 6px;
    line-height: 1.28;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-desc-text {
    font-size: 0.81rem;
    line-height: 1.40;
    margin-bottom: 8px;
    min-height: 50px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: none;
  }
}

@media (min-width: 861px) and (max-width: 1400px) {
  .process-cards-row {
    column-gap: 18px;
    row-gap: 40px;
  }
}

/* Keep section backgrounds full-bleed, but constrain the actual content. */
.about-bharat-section>.container,
.services-inner-container,
.industries-container,
.testi-container,
.faq-container,
.cta-section-container {
  width: min(100% - 64px, 1480px);
  max-width: 1480px;
  margin-inline: auto;
}

.process-inner-container {
  width: min(100% - 64px, 1720px);
  max-width: 1720px;
  margin-inline: auto;
}

.clients-container {
  width: min(100% - 72px, 1760px);
  max-width: 1760px;
  margin-inline: auto;
  padding-inline: 0;
}

.clients-right-visual-wrap {
  right: -32px;
}

@media (max-width: 900px) {

  .about-bharat-section>.container,
  .services-inner-container,
  .process-inner-container,
  .industries-container,
  .testi-container,
  .faq-container,
  .clients-container,
  .cta-section-container {
    width: min(100% - 40px, 760px);
  }

  .clients-right-visual-wrap {
    right: auto;
  }
}

/* Final valued-clients polish: narrower content and crisp generated artwork. */
.clients-container {
  width: min(100% - 120px, 1680px);
  max-width: 1680px;
}

.clients-right-visual-wrap {
  right: -18px;
  width: 56%;
  height: 356px;
}

.clients-site-img {
  object-position: center center;
  transform: scale(1.015);
  image-rendering: auto;
}

.clients-site-artwork-box:hover .clients-site-img {
  transform: scale(1.03);
}

.clients-stats-row {
  width: 53%;
}

@media (max-width: 1300px) {
  .clients-container {
    width: min(100% - 72px, 1180px);
  }

  .clients-right-visual-wrap {
    right: -24px;
    width: 57%;
  }
}

@media (max-width: 900px) {
  .clients-container {
    width: min(100% - 40px, 760px);
  }

  .clients-right-visual-wrap {
    right: auto;
    width: 100%;
  }

  .clients-stats-row {
    width: 100%;
  }
}

/* Valued client logos: compact, auto-moving left/right showcase. */
.client-logos-showcase-card {
  width: min(100% - 96px, 1540px);
  margin-inline: auto;
  overflow: hidden;
}

.client-logos-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 2px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.client-logos-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: max-content;
  animation: clientsLogoAutoScroll 24s ease-in-out infinite;
  will-change: transform;
}

.client-logo-box {
  flex: 0 0 clamp(166px, 13vw, 204px);
  height: 82px;
}

.client-logos-showcase-card:hover .client-logos-grid,
.client-logos-showcase-card:focus-within .client-logos-grid {
  animation-play-state: paused;
}

@keyframes clientsLogoAutoScroll {

  0%,
  10% {
    transform: translate3d(0, 0, 0);
  }

  45%,
  55% {
    transform: translate3d(var(--clients-logo-shift, -420px), 0, 0);
  }

  90%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 900px) {
  .client-logos-showcase-card {
    width: 100%;
  }

  .client-logo-box {
    flex-basis: 166px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-logos-grid {
    animation: none;
  }
}

/* Final valued-clients alignment: keep the artwork on the right and the cards clean. */
.valued-clients-section {
  overflow: hidden;
}

.clients-hero-grid {
  overflow: visible;
}

.clients-left-col {
  width: 47%;
  padding-left: 18px;
}

.clients-right-visual-wrap {
  top: -12px;
  right: -82px;
  width: 53%;
  height: 342px;
}

.clients-site-artwork-box {
  border-radius: 0 0 0 185px;
  box-shadow: -28px 14px 54px rgba(0, 87, 176, 0.17);
}

.clients-site-img {
  object-position: center center;
  transform: scale(1.005);
}

.clients-site-artwork-box:hover .clients-site-img {
  transform: scale(1.025);
}

.clients-stats-row {
  width: 52%;
  margin-top: -92px;
  gap: 12px;
}

.client-stat-card {
  min-height: 96px;
  padding: 13px 14px;
  align-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(0, 73, 150, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.cstat-info {
  min-width: 0;
}

.cstat-num,
.cstat-bold,
.cstat-lbl {
  white-space: nowrap;
}

@media (max-width: 1300px) and (min-width: 901px) {
  .clients-left-col {
    width: 46%;
    padding-left: 8px;
  }

  .clients-right-visual-wrap {
    right: -54px;
    width: 55%;
  }

  .clients-stats-row {
    width: 57%;
  }
}

@media (max-width: 900px) {
  .clients-left-col {
    width: 100%;
    padding-left: 0;
  }

  .clients-right-visual-wrap {
    top: auto;
    right: auto;
    width: 100%;
    height: 260px;
  }

  .clients-stats-row {
    width: 100%;
    margin-top: 18px;
  }
}

/* About hero balance: compact both columns and create a clear center gap. */
@media (min-width: 1025px) {
  .about-main-grid {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 0.82fr);
    gap: clamp(52px, 5vw, 86px);
    align-items: center;
  }

  .about-left-col {
    width: min(100%, 820px);
  }

  .about-company-desc {
    max-width: 580px;
  }

  .about-right-col {
    width: min(100%, 650px);
    justify-self: end;
  }

  .about-showcase-graphic-wrap {
    width: min(100%, 650px);
  }
}

/* Services section polish: compact cards with stronger headings. */
@media (min-width: 901px) {
  .services-header-box {
    max-width: 900px;
    margin-bottom: 38px;
  }

  .services-main-heading {
    font-size: clamp(2.9rem, 3.35vw, 3.45rem);
    line-height: 1.12;
  }

  .services-cards-grid {
    width: min(100%, 1500px);
    margin-inline: auto;
    gap: 24px;
  }

  .solution-card {
    height: 292px;
    border-radius: 22px;
  }

  .card-media-side {
    width: 43%;
  }

  .card-details-side {
    padding: 18px 18px 17px 16px;
  }

  .card-title-text {
    font-size: 1.2rem;
  }
}

@media (max-width: 900px) {
  .services-main-heading {
    font-size: 2.45rem;
  }
}

/* Hero banner: right-aligned video with seamless light fade on larger screens */
@media (min-width: 1025px) {
  .hero-banner {
    min-height: clamp(650px, 40vw, 820px);
    padding: 82px 0 94px;
    background:
      radial-gradient(ellipse at 8% 12%, rgba(255, 255, 255, 0.42) 0%, transparent 38%),
      radial-gradient(ellipse at 28% 88%, rgba(14, 150, 220, 0.15) 0%, transparent 48%),
      linear-gradient(135deg, #eaf5ff 0%, #dff0ff 48%, #cfe9f9 100%);
  }

  .hero-video-bg {
    left: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    min-width: 0;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background: transparent;
  }

  .hero-video-overlay {
    background: linear-gradient(90deg,
        #f8fbff 0%,
        #f8fbff 40%,
        rgba(248, 251, 255, 0.70) 44%,
        rgba(248, 251, 255, 0.15) 48%,
        transparent 52%,
        transparent 100%);
  }

  .hero-banner .hero-container {
    width: 100%;
    max-width: none;
    padding-inline: 4%;
  }

  .hero-banner .hero-left-content {
    width: 40%;
    min-width: 0;
    max-width: 760px;
  }

  .hero-banner .hero-main-title {
    font-size: clamp(2rem, 2.9vw, 3.5rem);
  }

  .hero-banner .hero-main-title .text-water-gradient {
    display: inline;
  }
}

/* Valued clients redesign: artwork left, readable content right, no overlay collision. */
@media (min-width: 901px) {
  .valued-clients-section {
    min-height: auto;
    padding: 72px 0 86px;
  }

  .clients-container {
    width: min(100% - 88px, 1540px);
    max-width: 1540px;
  }

  .clients-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    gap: clamp(44px, 5vw, 82px);
    align-items: center;
    min-height: 390px;
    margin-bottom: 22px;
  }

  .clients-right-visual-wrap {
    position: relative;
    inset: auto;
    order: 1;
    width: min(100%, 690px);
    height: 340px;
    justify-self: start;
  }

  .clients-left-col {
    order: 2;
    width: 100%;
    max-width: 680px;
    padding: 0;
    margin-left: auto;
    z-index: 8;
  }

  .clients-category-pill {
    margin-bottom: 16px;
  }

  .clients-main-heading {
    max-width: 680px;
    font-size: clamp(2.75rem, 3.7vw, 4rem);
    line-height: 1.08;
    color: #071e3d;
    text-shadow: none;
  }

  .clients-subtext-para {
    max-width: 640px;
    color: #526071;
    font-size: 1.02rem;
    line-height: 1.65;
  }

  .clients-site-artwork-box {
    border-radius: 34px 120px 34px 34px;
    box-shadow: 0 20px 48px rgba(0, 87, 176, 0.18);
  }

  .clients-site-img {
    object-position: center center;
    transform: scale(1.01);
  }

  .site-glass-fade-overlay {
    background: linear-gradient(180deg, rgba(7, 21, 43, 0.02) 0%, transparent 58%, rgba(7, 21, 43, 0.18) 100%);
  }

  .clients-stats-row {
    width: min(100%, 1240px);
    margin: 0 auto 30px;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .client-stat-card {
    min-height: 88px;
  }
}

@media (max-width: 900px) {
  .valued-clients-section {
    padding: 56px 0 70px;
  }

  .clients-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .clients-left-col {
    order: 1;
  }

  .clients-right-visual-wrap {
    order: 2;
  }

  .clients-main-heading {
    color: #071e3d;
    text-shadow: none;
  }
}

/* Valued clients visual polish: stronger hierarchy and a finished premium frame. */
@media (min-width: 901px) {
  .valued-clients-section {
    padding: 64px 0 78px;
    background:
      radial-gradient(circle at 78% 20%, rgba(80, 190, 255, 0.2), transparent 31%),
      radial-gradient(circle at 12% 78%, rgba(0, 119, 255, 0.08), transparent 28%),
      linear-gradient(135deg, #f8fcff 0%, #e8f6ff 52%, #dff2ff 100%);
  }

  .clients-container {
    width: min(100% - 96px, 1500px);
    max-width: 1500px;
  }

  .clients-hero-grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
    gap: clamp(54px, 5.5vw, 92px);
    min-height: 372px;
  }

  .clients-right-visual-wrap {
    width: min(100%, 670px);
    height: 336px;
  }

  .clients-site-artwork-box {
    border-radius: 42px 145px 42px 42px;
    box-shadow: 0 24px 54px rgba(0, 75, 150, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.7);
  }

  .clients-site-img {
    object-position: 62% center;
  }

  .clients-left-col {
    max-width: 650px;
  }

  .clients-category-pill {
    padding-bottom: 4px;
  }

  .clients-main-heading {
    font-size: clamp(3rem, 3.8vw, 4.15rem);
    letter-spacing: -1.8px;
    margin-bottom: 18px;
  }

  .clients-subtext-para {
    max-width: 620px;
    font-size: 1.04rem;
    line-height: 1.68;
  }

  .btn-clients-explore {
    padding: 13px 30px;
    box-shadow: 0 12px 28px rgba(0, 119, 255, 0.28);
  }

  .clients-stats-row {
    width: min(100%, 1180px);
    gap: 16px;
    margin-bottom: 34px;
  }

  .client-stat-card {
    min-height: 92px;
    padding: 14px 16px;
    border-radius: 20px;
  }

  .cstat-num,
  .cstat-bold {
    font-size: 1.22rem;
  }

  .cstat-lbl {
    font-size: 0.7rem;
  }

  .client-logos-showcase-card {
    width: min(100%, 1400px);
    padding: 20px 24px 22px;
    border-radius: 30px;
    box-shadow: 0 18px 40px rgba(0, 80, 160, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }

  .client-logos-viewport {
    padding-inline: 8px;
  }
}

/* FAQ reference layout: left visual/heading, right search and one clean accordion. */
@media (min-width: 901px) {
  .faq-answers-section {
    padding: 62px 0 82px;
    background:
      radial-gradient(circle at 72% 5%, rgba(105, 211, 255, 0.26), transparent 32%),
      linear-gradient(145deg, #f8fcff 0%, #eaf7ff 56%, #f5fbff 100%);
  }

  .faq-container {
    width: min(100% - 96px, 1640px);
    max-width: 1640px;
  }

  .faq-header-box {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
    column-gap: clamp(42px, 6vw, 100px);
    align-items: start;
    max-width: none;
    margin: 0 0 28px;
    text-align: left;
  }

  .faq-category-pill,
  .faq-main-heading,
  .faq-subtext-para {
    grid-column: 1;
  }

  .faq-category-pill {
    justify-content: flex-start;
    margin-bottom: 12px;
  }

  .faq-main-heading {
    font-size: clamp(2.8rem, 3.6vw, 4rem);
    line-height: 1.03;
    letter-spacing: -1.3px;
    margin-bottom: 16px;
  }

  .faq-subtext-para {
    max-width: 640px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
  }

  .faq-search-bar {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    align-items: center;
    align-self: start;
    min-height: 54px;
    margin-top: 0;
    padding: 5px 6px 5px 18px;
    border: 1px solid rgba(209, 229, 245, 0.95);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 26px rgba(0, 90, 170, 0.1), inset 0 1px 0 #ffffff;
  }

  .faq-search-bar i {
    color: #0b4b91;
    font-size: 1.05rem;
  }

  .faq-search-bar input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    padding: 0 14px;
    background: transparent;
    color: #0c1e3a;
    font: 500 0.95rem var(--font-body);
  }

  .faq-search-bar input::placeholder {
    color: #7b8da3;
  }

  .faq-search-bar button {
    border: 0;
    border-radius: 999px;
    padding: 12px 30px;
    background: linear-gradient(135deg, #087cf0, #0068d9);
    color: #ffffff;
    font: 700 0.92rem var(--font-body);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 108, 230, 0.25);
  }

  .faq-main-grid {
    grid-template-columns: minmax(420px, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(42px, 5vw, 82px);
    align-items: center;
  }

  .faq-left-droplet-col {
    min-height: 480px;
  }

  .faq-droplet-artwork-wrap {
    max-width: 570px;
  }

  .faq-droplet-img {
    width: 100%;
    filter: drop-shadow(0 22px 34px rgba(0, 112, 243, 0.16));
  }

  .faq-right-accordion-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .faq-column {
    display: contents;
  }

  .faq-item-header {
    min-height: 58px;
    padding: 10px 16px 10px 14px;
    gap: 12px;
    border-radius: 18px;
    box-shadow: 0 7px 18px rgba(0, 80, 160, 0.07);
  }

  .faq-item-num {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #31b7f5, #087cf0);
    font-size: 0.78rem;
  }

  .faq-question-title {
    font-size: 0.98rem;
  }

  .faq-toggle-circle {
    width: 32px;
    height: 32px;
    background: #ffffff;
  }

  .faq-item-body p {
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 0.86rem;
  }
}

@media (max-width: 900px) {
  .faq-search-bar {
    display: flex;
    margin: 22px 0 0;
    min-height: 48px;
  }

  .faq-search-bar input {
    min-width: 0;
  }

  .faq-search-bar button {
    padding: 10px 18px;
  }

  .faq-droplet-artwork-wrap {
    max-width: 420px;
  }
}

/* FAQ heading/search correction: prevent heading from disappearing at compact widths. */
@media (min-width: 1200px) {
  .faq-header-box {
    grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
    grid-template-areas:
      "category search"
      "heading search"
      "subtext search";
    column-gap: clamp(48px, 6vw, 96px);
  }

  .faq-category-pill {
    grid-area: category;
  }

  .faq-main-heading {
    grid-area: heading;
    align-self: center;
    font-size: clamp(3rem, 3.7vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -1.7px;
    margin-bottom: 18px;
  }

  .faq-subtext-para {
    grid-area: subtext;
  }

  .faq-search-bar {
    grid-area: search;
  }

  .faq-main-heading .highlight-blue-txt {
    position: relative;
    display: inline-block;
    padding-bottom: 9px;
  }

  .faq-main-heading .highlight-blue-txt::after {
    content: '';
    position: absolute;
    left: 2%;
    right: 5%;
    bottom: 0;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #087cf0, #36c5f4);
    transform: rotate(-1.5deg);
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .faq-answers-section {
    padding: 48px 0 70px;
  }

  .faq-container {
    width: min(100% - 56px, 900px);
  }

  .faq-header-box {
    display: block;
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
  }

  .faq-category-pill {
    justify-content: center;
  }

  .faq-main-heading,
  .faq-subtext-para {
    max-width: 760px;
    margin-inline: auto;
  }

  .faq-search-bar {
    max-width: 680px;
    margin: 22px auto 0;
  }

  .faq-main-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .faq-left-droplet-col {
    min-height: 0;
  }

  .faq-droplet-artwork-wrap {
    max-width: 500px;
  }

  .faq-right-accordion-grid {
    width: min(100%, 760px);
    margin-inline: auto;
  }
}

/* FAQ final composition: no search bar, stronger section heading, right accordion raised. */
@media (min-width: 1200px) {
  .faq-answers-section {
    padding: 54px 0 92px;
    background:
      radial-gradient(circle at 78% 5%, rgba(105, 211, 255, 0.24), transparent 31%),
      radial-gradient(circle at 8% 58%, rgba(128, 204, 255, 0.13), transparent 28%),
      linear-gradient(145deg, #f8fcff 0%, #e9f6ff 55%, #f5fbff 100%);
  }

  .faq-container {
    display: grid;
    grid-template-columns: minmax(500px, 0.82fr) minmax(650px, 1.18fr);
    column-gap: clamp(56px, 6vw, 112px);
    row-gap: 0;
    width: min(100% - 128px, 1760px);
    max-width: 1760px;
  }

  .faq-header-box {
    grid-column: 1;
    grid-row: 1;
    display: block;
    max-width: 720px;
    margin: 0;
    text-align: left;
  }

  .faq-category-pill {
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }

  .faq-main-heading {
    max-width: 700px;
    margin-bottom: 20px;
    color: #071e3d;
    font-family: var(--font-heading);
    font-size: clamp(3.25rem, 4.2vw, 5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -2.2px;
  }

  .faq-main-heading .highlight-blue-txt {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
    color: #087cf0;
  }

  .faq-main-heading .highlight-blue-txt::after {
    content: '';
    position: absolute;
    left: 1%;
    right: 3%;
    bottom: 0;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #087cf0, #38bdf8);
    transform: rotate(-1.4deg);
  }

  .faq-subtext-para {
    max-width: 650px;
    margin: 0;
    color: #526b87;
    font-size: 1.05rem;
    line-height: 1.65;
  }

  .faq-main-grid {
    display: contents;
  }

  .faq-left-droplet-col {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    align-self: start;
    margin-top: 54px;
    justify-content: flex-start;
  }

  .faq-droplet-artwork-wrap {
    width: min(100%, 590px);
    max-width: 590px;
  }

  .faq-droplet-img {
    filter: drop-shadow(0 22px 34px rgba(0, 112, 243, 0.17));
  }

  .faq-right-accordion-grid {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
  }

  .faq-item-header {
    min-height: 62px;
    padding: 11px 17px 11px 14px;
    border-radius: 19px;
    border-color: rgba(191, 219, 254, 0.98);
    box-shadow: 0 9px 22px rgba(0, 80, 160, 0.075);
  }

  .faq-question-title {
    color: #0c2d58;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
  }

  .faq-item-body p {
    padding: 15px 19px;
    color: #526b87;
    border: 1px solid rgba(215, 233, 248, 0.9);
    background: rgba(239, 248, 255, 0.92);
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .faq-search-bar {
    display: none;
  }

  .faq-answers-section {
    padding-top: 54px;
  }

  .faq-header-box {
    margin-bottom: 30px;
  }

  .faq-main-grid {
    align-items: start;
  }

  .faq-right-accordion-grid {
    margin-top: -8px;
  }
}

@media (max-width: 900px) {
  .faq-search-bar {
    display: none;
  }

  .faq-main-heading {
    font-size: clamp(2.65rem, 10vw, 4rem);
  }

  .faq-main-grid {
    align-items: start;
  }

  .faq-right-accordion-grid {
    margin-top: 0;
  }
}

/* Final valued-clients premium pass: balanced copy, metrics, artwork and logo rail. */
@media (min-width: 1400px) {
  .valued-clients-section {
    min-height: 760px;
    padding: 64px 0 66px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(235, 248, 255, 0.5) 46%, rgba(201, 236, 252, 0.72) 100%),
      linear-gradient(135deg, #f8fcff 0%, #e9f7ff 48%, #d7effd 100%);
  }

  .clients-container {
    width: min(100% - 150px, 1680px);
    max-width: 1680px;
    padding: 0;
  }

  .clients-hero-grid {
    display: grid;
    grid-template-columns: minmax(440px, 0.95fr) minmax(300px, 0.54fr) minmax(570px, 1.03fr);
    grid-template-areas: "copy stats media";
    align-items: center;
    gap: clamp(24px, 2.2vw, 42px);
    min-height: 425px;
    margin-bottom: 34px;
  }

  .clients-left-col {
    grid-area: copy;
    width: auto;
    max-width: 620px;
    padding: 0;
    margin: 0;
    align-self: center;
  }

  .clients-main-heading {
    max-width: 590px;
    font-size: clamp(3.15rem, 3.85vw, 4.65rem);
    line-height: 1.02;
    letter-spacing: 0;
    margin: 16px 0 20px;
  }

  .clients-subtext-para {
    max-width: 610px;
    font-size: clamp(1rem, 1.02vw, 1.14rem);
    line-height: 1.62;
    margin-bottom: 26px;
  }

  .clients-action-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
  }

  .btn-clients-explore {
    min-height: 56px;
    padding: 15px 28px;
    font-size: 0.98rem;
    box-shadow: 0 14px 30px rgba(0, 119, 255, 0.22);
  }

  .btn-client-story {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    min-height: 56px;
    padding: 7px 20px 7px 7px;
    color: #102d58;
    border: 1px solid rgba(187, 216, 242, 0.95);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 30px rgba(0, 91, 171, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .btn-client-story:hover {
    color: #102d58;
    transform: translateY(-3px);
  }

  .client-story-play {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding-left: 3px;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #1798ff, #0874e8);
    box-shadow: 0 8px 18px rgba(0, 119, 255, 0.28);
  }

  .client-story-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .client-story-copy strong {
    font-size: 1rem;
    line-height: 1.1;
  }

  .client-story-copy small {
    color: #607796;
    font-size: 0.8rem;
  }

  .clients-stats-row {
    grid-area: stats;
    width: auto;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-self: center;
  }

  .client-stat-card {
    min-height: 138px;
    padding: 20px 18px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    border: 1px solid rgba(189, 220, 244, 0.92);
    border-radius: 20px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 252, 255, 0.72));
    box-shadow: 0 18px 34px rgba(0, 91, 171, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
  }

  .client-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 42px rgba(0, 91, 171, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }

  .cstat-icon-circle {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 1.08rem;
  }

  .cstat-num,
  .cstat-bold {
    font-size: clamp(1.28rem, 1.38vw, 1.72rem);
    letter-spacing: 0;
  }

  .cstat-lbl {
    margin-top: 4px;
    font-size: 0.82rem;
    line-height: 1.18;
  }

  .clients-right-visual-wrap {
    grid-area: media;
    position: relative;
    inset: auto;
    width: 100%;
    height: 425px;
    justify-self: stretch;
  }

  .clients-site-artwork-box {
    width: 100%;
    max-width: none;
    height: 100%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.86);
    border-radius: 84px 26px 26px 84px;
    background: #d9f1ff;
    box-shadow: 0 28px 58px rgba(0, 85, 167, 0.2), -14px 0 0 rgba(75, 169, 248, 0.22);
  }

  .clients-site-img {
    object-position: 56% center;
    transform: scale(1.015);
    filter: saturate(1.12) contrast(1.04);
  }

  .clients-site-artwork-box:hover .clients-site-img {
    transform: scale(1.035);
  }

  .site-glass-fade-overlay {
    opacity: 0.16;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.62), transparent 40%, rgba(0, 119, 255, 0.08));
  }

  .clients-live-badge {
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    padding: 12px 16px;
    color: #0d2d5b;
    border: 1px solid rgba(215, 232, 247, 0.96);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    font-size: 0.92rem;
    line-height: 1.2;
    letter-spacing: 0;
    box-shadow: 0 18px 34px rgba(13, 88, 158, 0.16);
  }

  .clients-live-badge b {
    color: #0477ef;
  }

  .clients-live-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #1689f4;
  }

  .client-logos-showcase-shell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(100%, 1600px);
    margin: 0 auto 24px;
    z-index: 5;
  }

  .client-logos-showcase-card {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    padding: 20px 26px;
    border: 1px solid rgba(192, 222, 246, 0.95);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 50px rgba(0, 105, 200, 0.12);
  }

  .client-logos-viewport {
    padding: 0;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  .client-logos-grid {
    gap: 0;
    animation-duration: 28s;
  }

  .client-logo-box {
    flex: 0 0 clamp(168px, 9.4vw, 208px);
    height: 68px;
    padding: 7px 14px;
    border: 0;
    border-right: 1px solid rgba(211, 229, 244, 0.95);
    border-radius: 0;
    background: transparent;
  }

  .client-logo-box:last-child {
    border-right: 0;
  }

  .client-logo-box .logo-svg {
    max-height: 52px;
  }

  .client-logo-nav {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    padding: 0;
    color: #087cf0;
    border: 1px solid rgba(204, 226, 244, 0.98);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(0, 89, 173, 0.14);
  }

  .client-logo-nav:hover {
    color: #fff;
    background: #087cf0;
    transform: scale(1.06);
  }
}

@media (max-width: 1399px) and (min-width: 901px) {
  .clients-container {
    width: min(100% - 72px, 1240px);
  }

  .clients-hero-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(250px, 0.65fr) minmax(390px, 0.95fr);
    grid-template-areas: "copy stats media";
    align-items: center;
    gap: 22px;
  }

  .clients-left-col {
    grid-area: copy;
  }

  .clients-stats-row {
    grid-area: stats;
  }

  .clients-right-visual-wrap {
    grid-area: media;
  }

  .clients-main-heading {
    font-size: clamp(2.65rem, 4.4vw, 4rem);
  }

  .client-stat-card {
    min-height: 132px;
    padding: 17px;
  }

  .clients-right-visual-wrap {
    height: 370px;
  }

  .clients-site-artwork-box {
    border-radius: 70px 20px 20px 70px;
  }

  .client-logos-showcase-shell {
    gap: 12px;
  }

  .client-logo-nav {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

@media (max-width: 900px) {
  .valued-clients-section {
    min-height: auto;
    padding: 56px 0 72px;
  }

  .clients-container {
    width: min(100% - 36px, 720px);
  }

  .clients-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-height: 0;
    margin-bottom: 32px;
  }

  .clients-left-col,
  .clients-stats-row,
  .clients-right-visual-wrap {
    width: 100%;
    max-width: none;
  }

  .clients-left-col {
    order: 1;
  }

  .clients-stats-row {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clients-right-visual-wrap {
    order: 3;
    height: clamp(280px, 63vw, 450px);
  }

  .clients-main-heading {
    font-size: clamp(2.6rem, 9vw, 4rem);
  }

  .client-stat-card {
    min-height: 138px;
    padding: 19px;
  }

  .client-logos-showcase-shell {
    gap: 8px;
  }

  .client-logos-showcase-card {
    padding: 20px 18px;
  }

  .client-logo-nav {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 0.8rem;
  }
}

@media (max-width: 560px) {
  .clients-action-wrap {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .btn-clients-explore,
  .btn-client-story {
    width: 100%;
    justify-content: center;
  }

  .clients-stats-row {
    gap: 10px;
  }

  .client-stat-card {
    min-height: 126px;
    padding: 14px;
    gap: 10px;
    border-radius: 18px;
  }

  .cstat-icon-circle {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 0.95rem;
  }

  .cstat-num,
  .cstat-bold {
    font-size: 1.15rem;
  }

  .cstat-lbl {
    font-size: 0.72rem;
  }

  .clients-site-artwork-box {
    border-radius: 48px 0 0 48px;
  }

  .clients-live-badge {
    right: 12px;
    bottom: 12px;
    min-width: 0;
    max-width: calc(100% - 24px);
    padding: 9px 12px;
    font-size: 0.75rem;
  }

  .clients-live-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .client-logo-nav {
    display: none;
  }

  .client-logos-showcase-card {
    width: 100%;
  }
}

/* Valued clients: stats cards removed, rebalance copy and artwork. */
@media (min-width: 1400px) {
  .clients-hero-grid {
    grid-template-columns: minmax(520px, 0.92fr) minmax(640px, 1.08fr);
    grid-template-areas: "copy media";
    gap: clamp(54px, 5.2vw, 96px);
    min-height: 430px;
    margin-bottom: 38px;
  }

  .clients-left-col {
    grid-area: copy;
    max-width: 700px;
  }

  .clients-main-heading {
    max-width: 680px;
  }

  .clients-subtext-para {
    max-width: 680px;
  }

  .clients-right-visual-wrap {
    grid-area: media;
    height: 430px;
  }
}

@media (max-width: 1399px) and (min-width: 901px) {
  .clients-hero-grid {
    grid-template-columns: minmax(390px, 0.96fr) minmax(430px, 1.04fr);
    grid-template-areas: "copy media";
    gap: 34px;
  }

  .clients-left-col {
    grid-area: copy;
  }

  .clients-right-visual-wrap {
    grid-area: media;
  }
}

@media (max-width: 900px) {
  .clients-stats-row {
    display: none;
  }

  .clients-right-visual-wrap {
    order: 2;
  }
}

/* Valued clients: add cleaner top and bottom breathing room between sections. */
.valued-clients-section {
  padding-top: 86px;
  padding-bottom: 86px;
}

@media (min-width: 1400px) {
  .valued-clients-section {
    padding-top: 92px;
    padding-bottom: 88px;
  }

  .clients-hero-grid {
    margin-bottom: 44px;
  }
}

@media (max-width: 900px) {
  .valued-clients-section {
    padding-top: 64px;
    padding-bottom: 70px;
  }
}

/* Valued clients: reduce oversized right image width for a cleaner composition. */
@media (min-width: 1400px) {
  .clients-hero-grid {
    grid-template-columns: minmax(560px, 1fr) minmax(520px, 760px);
    gap: clamp(42px, 4.2vw, 78px);
  }

  .clients-right-visual-wrap {
    width: min(100%, 760px);
    justify-self: end;
    height: 410px;
  }
}

@media (max-width: 1399px) and (min-width: 901px) {
  .clients-hero-grid {
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 560px);
    gap: 28px;
  }

  .clients-right-visual-wrap {
    width: min(100%, 560px);
    justify-self: end;
  }
}

/* FAQ premium redesign: compact accordion, stronger visual framing and cleaner rhythm. */
@media (min-width: 1200px) {
  .faq-answers-section {
    padding: 82px 0 96px;
    background:
      linear-gradient(180deg, rgba(237, 248, 255, 0.96) 0%, rgba(247, 252, 255, 0.98) 48%, #ffffff 100%),
      linear-gradient(135deg, #f8fcff 0%, #eaf8ff 58%, #f6fbff 100%);
  }

  .faq-container {
    display: grid;
    grid-template-columns: minmax(460px, 0.9fr) minmax(620px, 1.1fr);
    column-gap: clamp(54px, 6vw, 104px);
    row-gap: 0;
    width: min(100% - 136px, 1580px);
    max-width: 1580px;
    align-items: start;
  }

  .faq-header-box {
    grid-column: 1;
    grid-row: 1;
    display: block;
    max-width: 650px;
    margin: 0;
    text-align: left;
  }

  .faq-category-pill {
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 18px;
  }

  .faq-main-heading {
    max-width: 650px;
    margin-bottom: 18px;
    color: #071e3d;
    font-size: clamp(3rem, 3.65vw, 4.55rem);
    line-height: 1.03;
    letter-spacing: 0;
  }

  .faq-main-heading .highlight-blue-txt {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
    color: #0787f3;
  }

  .faq-main-heading .highlight-blue-txt::after {
    content: '';
    position: absolute;
    left: 0;
    right: 5%;
    bottom: 0;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #087cf0, #31c4e8);
    transform: rotate(-1.2deg);
  }

  .faq-subtext-para {
    max-width: 610px;
    margin: 0;
    color: #536d8b;
    font-size: 1rem;
    line-height: 1.7;
  }

  .faq-main-grid {
    display: contents;
  }

  .faq-left-droplet-col {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    margin-top: 38px;
    align-self: start;
    justify-content: flex-start;
  }

  .faq-droplet-artwork-wrap {
    width: min(100%, 520px);
    max-width: 520px;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(188, 222, 247, 0.95);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 24px 55px rgba(0, 101, 188, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .faq-droplet-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 22px;
    filter: saturate(1.08) contrast(1.03);
  }

  .droplet-water-ripples {
    display: none;
  }

  .faq-right-accordion-grid {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(100%, 790px);
    margin-top: 4px;
  }

  .faq-column {
    display: contents;
  }

  .faq-accordion-item {
    overflow: hidden;
    border: 1px solid rgba(185, 218, 244, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(0, 74, 144, 0.08);
    filter: none;
  }

  .faq-accordion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(0, 103, 205, 0.13);
  }

  .faq-accordion-item.active {
    border-color: rgba(39, 150, 239, 0.6);
    box-shadow: 0 22px 44px rgba(0, 112, 210, 0.14);
  }

  .faq-item-header {
    min-height: 66px;
    padding: 13px 18px 13px 16px;
    gap: 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .faq-accordion-item.active .faq-item-header {
    border-color: transparent;
    background: linear-gradient(90deg, rgba(239, 249, 255, 0.96), rgba(255, 255, 255, 0.96));
  }

  .faq-item-num {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: linear-gradient(145deg, #25b7f3, #087cf0);
    color: #ffffff;
    font: 800 0.8rem var(--font-body);
    box-shadow: 0 9px 18px rgba(0, 119, 255, 0.22);
  }

  .faq-question-title {
    color: #0c2d58;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .faq-toggle-circle {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-color: rgba(0, 124, 240, 0.5);
    background: #ffffff;
  }

  .faq-item-body {
    background: transparent;
  }

  .faq-item-body p {
    margin: 0 16px 16px 68px;
    padding: 16px 18px;
    color: #536d8b;
    border: 1px solid rgba(210, 230, 246, 0.92);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(239, 248, 255, 0.96), rgba(255, 255, 255, 0.96));
    font-size: 0.9rem;
    line-height: 1.62;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .faq-answers-section {
    padding: 64px 0 80px;
  }

  .faq-container {
    width: min(100% - 60px, 980px);
  }

  .faq-main-heading {
    letter-spacing: 0;
  }

  .faq-droplet-artwork-wrap {
    max-width: 460px;
    padding: 12px;
    border: 1px solid rgba(188, 222, 247, 0.95);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 20px 44px rgba(0, 101, 188, 0.12);
  }

  .faq-droplet-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
  }

  .faq-right-accordion-grid {
    width: min(100%, 820px);
    gap: 12px;
  }
}

@media (max-width: 900px) {
  .faq-answers-section {
    padding: 56px 0 70px;
  }

  .faq-main-heading {
    letter-spacing: 0;
  }

  .faq-droplet-artwork-wrap {
    max-width: 420px;
    padding: 10px;
    border: 1px solid rgba(188, 222, 247, 0.95);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 18px 36px rgba(0, 101, 188, 0.11);
  }

  .faq-droplet-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
  }

  .faq-right-accordion-grid {
    gap: 10px;
  }

  .faq-accordion-item {
    overflow: hidden;
    border-radius: 16px;
  }

  .faq-item-header {
    min-height: 58px;
    padding: 11px 12px;
    gap: 10px;
  }

  .faq-item-body p {
    margin: 0 12px 12px;
    padding: 13px 14px;
    border-radius: 12px;
  }
}

/* ==========================================================================
   UNIFIED GLOBAL SECTION HEADER SYSTEM (MATCHING REFERENCE DESIGN EXACTLY)
   ========================================================================== */
.about-category-pill,
.services-category-pill,
.process-category-pill,
.industries-category-pill,
.clients-category-pill,
.testi-category-pill,
.faq-category-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding: 7px 22px !important;
  background: rgba(0, 112, 243, 0.08) !important;
  border: 1px solid rgba(0, 112, 243, 0.2) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  width: fit-content !important;
}

.pill-blue-dash {
  display: inline-block !important;
  width: 22px !important;
  height: 2px !important;
  background-color: #0070f3 !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

.pill-category-text {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: #0070f3 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  font-family: var(--font-body) !important;
}

.about-main-headline,
.services-main-heading,
.process-main-heading,
.industries-main-heading,
.clients-main-heading,
.testi-main-heading,
.faq-main-heading {
  font-size: clamp(2.35rem, 3.2vw, 3.25rem) !important;
  font-weight: 800 !important;
  color: #0c1e3a !important;
  line-height: 1.16 !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.6px !important;
  text-wrap: balance !important;
}

.highlight-blue-txt,
.about-main-headline .highlight-blue-txt,
.services-main-heading .highlight-blue-txt,
.process-main-heading .highlight-blue-txt,
.industries-main-heading .highlight-blue-txt,
.clients-main-heading .highlight-blue-txt,
.testi-main-heading .highlight-blue-txt,
.faq-main-heading .highlight-blue-txt {
  color: #0070f3 !important;
  background: linear-gradient(135deg, #0070f3 0%, #0284c7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline !important;
}

.services-subtext-para,
.process-subtext-para,
.industries-subtext-para,
.testi-subtext-para,
.faq-subtext-para {
  font-size: 1.05rem !important;
  color: #475569 !important;
  line-height: 1.68 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.clients-subtext-para {
  font-size: 1.05rem !important;
  color: #475569 !important;
  line-height: 1.68 !important;
  max-width: 680px !important;
  margin-bottom: 26px !important;
}

.about-company-desc {
  font-size: 1.05rem !important;
  color: #475569 !important;
  line-height: 1.68 !important;
  max-width: 680px !important;
  margin-bottom: 24px !important;
}

.services-header-box,
.process-header-box,
.testi-header-box,
.faq-header-box {
  display: block !important;
  text-align: center !important;
  max-width: 820px !important;
  margin: 0 auto 52px auto !important;
}

.services-header-box .services-category-pill,
.process-header-box .process-category-pill,
.testi-header-box .testi-category-pill,
.faq-header-box .faq-category-pill {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 600px) {

  .about-main-headline,
  .services-main-heading,
  .process-main-heading,
  .clients-main-heading,
  .testi-main-heading,
  .faq-main-heading {
    font-size: clamp(1.85rem, 5.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
  }

  .about-category-pill,
  .services-category-pill,
  .process-category-pill,
  .clients-category-pill,
  .testi-category-pill,
  .faq-category-pill {
    padding: 6px 16px !important;
    gap: 8px !important;
  }

  .pill-blue-dash {
    width: 16px !important;
  }

  .pill-category-text {
    font-size: 0.75rem !important;
    letter-spacing: 1.5px !important;
  }
}

/* ==========================================================================
   MASTER CLIENTS SECTION WIDTH & PROPORTION ENHANCEMENT
   Expands the container, balances the 2-col hero grid, and widens logo shell
   ========================================================================== */
.valued-clients-section {
  padding: 80px 0 85px !important;
  overflow: hidden !important;
}

.clients-container {
  width: min(100% - 56px, 1740px) !important;
  max-width: 1740px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.clients-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) minmax(540px, 1.25fr) !important;
  grid-template-areas: "copy media" !important;
  align-items: center !important;
  gap: clamp(32px, 3.8vw, 68px) !important;
  min-height: 480px !important;
  margin-bottom: 38px !important;
}

.clients-left-col {
  grid-area: copy !important;
  width: 100% !important;
  max-width: 660px !important;
  align-self: center !important;
}

.clients-right-visual-wrap {
  grid-area: media !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 470px !important;
  justify-self: stretch !important;
}

.clients-site-artwork-box {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(0, 85, 167, 0.22) !important;
}

.clients-site-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.client-logos-showcase-shell {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 28px !important;
  gap: 16px !important;
  display: flex !important;
  align-items: center !important;
}

.client-logos-showcase-card {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 22px 28px !important;
  border-radius: 28px !important;
}

@media (max-width: 1100px) {
  .clients-hero-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "copy" "media" !important;
    gap: 32px !important;
    min-height: auto !important;
  }

  .clients-right-visual-wrap {
    height: 380px !important;
  }
}

@media (max-width: 720px) {
  .clients-container {
    width: min(100% - 28px, 720px) !important;
  }

  .clients-right-visual-wrap {
    height: 280px !important;
  }
}

/* ==========================================================================
   INDUSTRIES WE SERVE SECTION (WORLD-CLASS HIGH-AESTHETIC SYSTEM)
   ========================================================================== */
.industries-serve-section {
  position: relative;
  padding: 100px 0 115px;
  background: linear-gradient(180deg, #f8fafc 0%, #f0f7ff 45%, #ffffff 100%);
  overflow: hidden;
}

.industries-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ind-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.45;
}

.ind-radial-glow.glow-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 112, 243, 0.18) 0%, rgba(2, 132, 199, 0) 70%);
  top: -150px;
  right: -100px;
}

.ind-radial-glow.glow-2 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(0, 112, 243, 0) 70%);
  bottom: -100px;
  left: -100px;
}

.ind-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 112, 243, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
}

.industries-container {
  position: relative;
  z-index: 1;
  width: min(100% - 64px, 1480px) !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.industries-header-centered {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}

/* Industries Cards Grid */
.industries-grid {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.industry-card {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.industry-card:hover {
  transform: translateY(-9px);
  border-color: rgba(0, 112, 243, 0.38);
  box-shadow: 0 24px 48px -12px rgba(0, 112, 243, 0.18), 0 0 0 1px rgba(0, 112, 243, 0.15);
}

.industry-card.hidden {
  display: none !important;
}

/* Card Media */
.industry-card-media {
  position: relative;
  height: 235px;
  overflow: hidden;
  background: #0f172a;
}

.industry-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.industry-card:hover .industry-img {
  transform: scale(1.08);
}

.industry-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 30, 58, 0.1) 0%, rgba(12, 30, 58, 0.5) 100%);
  pointer-events: none;
}

.industry-number-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(12, 30, 58, 0.72);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  letter-spacing: 0.5px;
}

.industry-tag-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #ffffff;
  color: #0070f3;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.3px;
}

/* Card Body */
.industry-card-body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.industry-icon-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.industry-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 112, 243, 0.12) 0%, rgba(2, 132, 199, 0.05) 100%);
  color: #0070f3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 112, 243, 0.18);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.industry-card:hover .industry-icon-box {
  background: linear-gradient(135deg, #0070f3 0%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 112, 243, 0.3);
  transform: rotate(3deg);
}

.industry-card-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0c1e3a;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.3px;
}

.industry-card-desc {
  font-size: 0.94rem;
  color: #64748b;
  line-height: 1.62;
  margin-bottom: 22px;
}

/* Feature List */
.industry-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.industry-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: #334155;
  font-weight: 500;
  line-height: 1.45;
}

.ind-check-icon {
  width: 18px;
  height: 18px;
  color: #0070f3;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Card Footer */
.industry-card-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.industry-stat-chip {
  background: rgba(0, 112, 243, 0.08);
  color: #0070f3;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 112, 243, 0.16);
  letter-spacing: 0.2px;
}

.industry-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0c1e3a;
  text-decoration: none;
  transition: all 0.25s ease;
}

.industry-cta-link svg {
  transition: transform 0.25s ease;
}

.industry-cta-link:hover {
  color: #0070f3;
}

.industry-cta-link:hover svg {
  transform: translateX(4px);
}

/* Callout Action Banner */
.industries-action-banner {
  margin-top: 60px;
  background: linear-gradient(135deg, #0c1e3a 0%, #1e3a8a 60%, #0369a1 100%);
  border-radius: 26px;
  padding: 44px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  box-shadow: 0 22px 48px -14px rgba(12, 30, 58, 0.35);
  position: relative;
  overflow: hidden;
}

.industries-action-banner::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.ind-banner-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.ind-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 12px;
  color: #7dd3fc;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.pulse-point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
  animation: indPulse 2s infinite ease-in-out;
}

@keyframes indPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.ind-banner-title {
  color: #ffffff;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 10px 0;
  letter-spacing: -0.4px;
}

.ind-banner-text {
  color: rgba(226, 232, 240, 0.88);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

.ind-banner-action {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.btn-ind-primary {
  background: #ffffff;
  color: #0070f3;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 15px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.btn-ind-primary:hover {
  background: #f0f7ff;
  color: #0284c7;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.btn-ind-call {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  font-family: inherit;
}

.btn-ind-call:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-3px);
}

/* Responsive Media Queries */
@media (max-width: 1280px) {
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (max-width: 980px) {
  .industries-action-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 34px 30px;
    gap: 24px;
  }

  .ind-banner-action {
    width: 100%;
    flex-wrap: wrap;
  }

  .btn-ind-primary,
  .btn-ind-call {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .industries-serve-section {
    padding: 70px 0 85px;
  }

  .industries-container {
    padding: 0 20px;
  }

  .industries-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .industries-filter-bar {
    gap: 8px;
    margin-bottom: 34px;
  }

  .ind-filter-btn {
    padding: 8px 18px;
    font-size: 0.85rem;
  }

  .industry-card-body {
    padding: 22px 20px 20px;
  }

  .industry-card-media {
    height: 200px;
  }
}

/* ==========================================================================
   GLOBAL SECTOR FEASIBILITY CTA SECTION (BELOW FAQ)
   ========================================================================== */
.global-cta-section {
  position: relative;
  background: #ffffff;
  padding: 52px 0 95px 0;
  z-index: 5;
}

.cta-section-container {
  width: min(100% - 64px, 1480px) !important;
  max-width: 1480px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

.global-cta-section .industries-action-banner {
  margin-top: 0;
}

/* FAQ -> CTA section divider: a soft water transition matching the other page sections. */
.faq-cta-transition {
  position: relative;
  z-index: 4;
  height: 80px;
  margin-top: -35px;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  line-height: 0;
}

.faq-cta-transition::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(680px, 70vw);
  height: 24px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.14);
  filter: blur(18px);
}

.faq-cta-transition-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.faq-cta-bubble {
  position: absolute;
  display: block;
  border: 1px solid rgba(56, 189, 248, 0.42);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.18);
  animation: faqCtaBubbleFloat 5.5s ease-in-out infinite;
}

.faq-cta-bubble-one {
  width: 13px;
  height: 13px;
  left: 18%;
  bottom: 30px;
}

.faq-cta-bubble-two {
  width: 8px;
  height: 8px;
  left: 72%;
  bottom: 42px;
  animation-delay: 1.2s;
}

.faq-cta-bubble-three {
  width: 17px;
  height: 17px;
  left: 84%;
  bottom: 21px;
  animation-delay: 2.1s;
}

@keyframes faqCtaBubbleFloat {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.72;
  }

  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .global-cta-section {
    padding: 28px 0 65px 0;
  }

  .faq-cta-transition {
    height: 66px;
  }

  .faq-cta-bubble-one {
    bottom: 20px;
  }

  .faq-cta-bubble-two {
    bottom: 28px;
  }

  .faq-cta-bubble-three {
    bottom: 14px;
  }

  .cta-section-container {
    padding: 0 20px;
  }
}

/* ==========================================================================
   VALUED CLIENTS REFERENCE COMPOSITION
   Centered heading, category rail, 7x2 logo showcase and stats strip.
   ========================================================================== */
.valued-clients-section {
  min-height: 790px !important;
  padding: 96px 0 124px !important;
  overflow: hidden !important;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(247, 252, 255, 0.95) 0%, rgba(232, 246, 255, 0.82) 64%, rgba(175, 222, 251, 0.92) 100%),
    linear-gradient(135deg, #f7fcff 0%, #e4f4ff 58%, #c8eaff 100%) !important;
}

.valued-clients-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.12) 58%, transparent 78%);
  pointer-events: none;
}

.clients-bg-sky {
  z-index: -1;
  height: 460px;
  background: radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.88) 0%, rgba(168, 222, 255, 0.32) 44%, transparent 74%);
}

.clients-splash-left,
.clients-splash-right {
  z-index: -1;
  filter: blur(4px);
  opacity: 0.58;
}

.clients-map-backdrop {
  position: absolute;
  top: 15px;
  left: 4%;
  right: 4%;
  height: 260px;
  z-index: -1;
  opacity: 0.38;
  pointer-events: none;
}

.clients-map-backdrop::before,
.clients-map-backdrop::after {
  content: '';
  position: absolute;
  width: 36%;
  height: 78%;
  background-image: radial-gradient(circle, rgba(109, 181, 239, 0.48) 1.25px, transparent 1.7px);
  background-size: 9px 9px;
  border-radius: 48% 42% 52% 35%;
  filter: blur(0.1px);
}

.clients-map-backdrop::before {
  left: 0;
  top: 10%;
  transform: rotate(-14deg) skewX(-12deg);
  clip-path: polygon(0 28%, 13% 17%, 27% 20%, 36% 5%, 56% 13%, 68% 4%, 82% 18%, 100% 22%, 89% 53%, 75% 60%, 72% 88%, 52% 78%, 42% 98%, 26% 76%, 8% 81%);
}

.clients-map-backdrop::after {
  right: 0;
  top: 4%;
  width: 42%;
  transform: rotate(8deg) skewX(8deg);
  clip-path: polygon(0 20%, 13% 9%, 29% 19%, 39% 2%, 57% 14%, 77% 8%, 100% 25%, 93% 56%, 78% 62%, 74% 85%, 53% 74%, 39% 100%, 24% 77%, 7% 68%);
}

.clients-industrial-horizon {
  position: absolute;
  right: 0;
  bottom: 42px;
  left: 0;
  height: 158px;
  z-index: -1;
  overflow: hidden;
  opacity: 0.16;
  background: linear-gradient(180deg, transparent 0%, rgba(186, 230, 253, 0.1) 45%, rgba(125, 211, 252, 0.2) 100%);
  pointer-events: none;
}

.clients-plant-left,
.clients-plant-right,
.clients-stack-left,
.clients-stack-right {
  position: absolute;
  bottom: 8px;
  display: block;
  background: #93c5fd;
  opacity: 0.6;
}

.clients-plant-left {
  left: 0;
  width: 220px;
  height: 44px;
  clip-path: polygon(0 100%, 0 62%, 8% 62%, 8% 35%, 18% 35%, 18% 64%, 28% 64%, 28% 16%, 38% 16%, 38% 60%, 50% 60%, 50% 27%, 62% 27%, 62% 68%, 77% 68%, 77% 43%, 88% 43%, 88% 100%);
}

.clients-stack-left {
  left: 3.2%;
  width: 20px;
  height: 108px;
  border-radius: 50% 50% 5px 5px;
  background: linear-gradient(90deg, #bae6fd 0 30%, #7dd3fc 30% 70%, #bae6fd 70%);
}

.clients-plant-right {
  right: 0;
  width: 275px;
  height: 50px;
  clip-path: polygon(0 100%, 0 62%, 13% 62%, 13% 28%, 22% 28%, 22% 55%, 31% 55%, 31% 8%, 42% 8%, 42% 63%, 55% 63%, 55% 36%, 64% 36%, 64% 55%, 76% 55%, 76% 20%, 87% 20%, 87% 61%, 100% 61%, 100% 100%);
}

.clients-stack-right {
  right: 2.5%;
  width: 23px;
  height: 142px;
  border-radius: 50% 50% 4px 4px;
  background: linear-gradient(90deg, #bae6fd 0 28%, #7dd3fc 28% 72%, #bae6fd 72%);
}

.clients-container {
  position: relative;
  z-index: 3;
  width: min(100% - 120px, 1740px) !important;
  max-width: 1740px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.clients-reference-header {
  max-width: 1080px;
  margin: 0 auto 28px;
  text-align: center;
}

.clients-category-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 30px !important;
  margin: 0 0 17px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.clients-category-pill .pill-blue-dash {
  width: 62px !important;
  height: 3px !important;
  background: #087cf0 !important;
}

.clients-category-pill .pill-category-text {
  color: #4770ad !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
}

.clients-main-heading {
  margin: 0 0 14px !important;
  color: #09225c !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(2.8rem, 4.25vw, 4.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.03 !important;
  letter-spacing: -1.2px !important;
}

.clients-main-heading .highlight-blue-txt {
  color: #087cf0 !important;
}

.clients-subtext-para {
  max-width: 980px !important;
  margin: 0 auto !important;
  color: #5b719e !important;
  font-size: 1.05rem !important;
  font-weight: 500;
  line-height: 1.55 !important;
}

.clients-filter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 30px;
  flex-wrap: nowrap;
}

.clients-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 23px;
  border: 1px solid rgba(225, 237, 250, 0.98);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #123776;
  box-shadow: 0 9px 22px rgba(23, 102, 180, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  font: 700 0.9rem var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.clients-filter-btn i {
  color: #087cf0;
  font-size: 1.18rem;
}

.clients-filter-btn:hover,
.clients-filter-btn.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #087cf0 0%, #1477ec 100%);
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(0, 112, 243, 0.26);
  transform: translateY(-2px);
}

.clients-filter-btn:hover i,
.clients-filter-btn.is-active i {
  color: #ffffff;
}

.client-logos-showcase-shell {
  position: relative !important;
  display: block !important;
  width: min(100% - 116px, 1620px) !important;
  max-width: 1620px !important;
  margin: 0 auto 34px !important;
}

.client-logos-showcase-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 19px 40px rgba(0, 105, 200, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px);
}

.client-logos-viewport {
  width: 100%;
  overflow: visible !important;
  padding: 0 !important;
  mask-image: none !important;
}

.client-logos-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  animation: none !important;
  transform: none !important;
}

.client-logo-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: 92px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 6px 17px rgba(31, 102, 165, 0.05), inset 0 0 0 1px rgba(232, 241, 250, 0.62) !important;
}

.client-logo-box .logo-svg {
  display: block;
  width: 100%;
  max-width: 190px;
  max-height: 68px !important;
}

.client-logo-nav {
  position: absolute !important;
  top: 50% !important;
  z-index: 4 !important;
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #087cf0 !important;
  box-shadow: 0 12px 25px rgba(0, 92, 179, 0.14) !important;
  transform: translateY(-50%) !important;
}

.client-logo-nav:hover {
  background: #087cf0 !important;
  color: #ffffff !important;
  transform: translateY(-50%) scale(1.06) !important;
}

.client-logo-prev {
  left: -76px !important;
}

.client-logo-next {
  right: -76px !important;
}

.clients-stats-row {
  position: relative;
  z-index: 3;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  width: min(100% - 230px, 1280px) !important;
  margin: 0 auto !important;
  padding: 17px 26px !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 16px 32px rgba(0, 104, 198, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(13px);
}

.clients-stats-row .client-stat-card {
  position: relative;
  min-height: 64px !important;
  padding: 0 21px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.clients-stats-row .client-stat-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 0;
  width: 1px;
  height: calc(100% - 16px);
  background: #dbeafa;
}

.clients-stats-row .cstat-icon-circle {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px;
  color: #087cf0 !important;
  background: #d9edff !important;
  box-shadow: none !important;
}

.clients-stats-row .cstat-num {
  color: #0d367d !important;
  font-family: var(--font-body) !important;
  font-size: 1.3rem !important;
}

.clients-stats-row .cstat-lbl {
  color: #5d74a1 !important;
  font-size: 0.83rem !important;
}

.clients-bottom-tagline {
  display: none !important;
}

.clients-bottom-wave {
  height: 130px !important;
  z-index: 1 !important;
}

@media (max-width: 1360px) {
  .clients-container {
    width: min(100% - 70px, 1320px) !important;
  }

  .clients-filter-row {
    gap: 8px;
  }

  .clients-filter-btn {
    padding-inline: 16px;
  }

  .client-logos-showcase-shell {
    width: min(100% - 96px, 1180px) !important;
  }

  .client-logo-prev {
    left: -66px !important;
  }

  .client-logo-next {
    right: -66px !important;
  }
}

@media (max-width: 980px) {
  .valued-clients-section {
    min-height: auto !important;
    padding: 76px 0 108px !important;
  }

  .clients-reference-header {
    margin-bottom: 24px;
  }

  .clients-reference-break {
    display: none;
  }

  .clients-filter-row {
    flex-wrap: wrap;
  }

  .clients-filter-btn {
    min-height: 46px;
    padding-inline: 16px;
  }

  .client-logos-showcase-shell {
    width: min(100% - 28px, 720px) !important;
  }

  .client-logos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .client-logo-nav {
    width: 44px !important;
    height: 44px !important;
  }

  .client-logo-prev {
    left: -22px !important;
  }

  .client-logo-next {
    right: -22px !important;
  }

  .clients-stats-row {
    width: min(100% - 36px, 720px) !important;
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 14px;
  }

  .clients-stats-row .client-stat-card:nth-child(2)::after {
    display: none;
  }

  .clients-stats-row .client-stat-card:nth-child(-n + 2) {
    border-bottom: 1px solid #dbeafa !important;
    padding-bottom: 12px !important;
  }
}

@media (max-width: 560px) {
  .valued-clients-section {
    padding-top: 60px !important;
  }

  .clients-map-backdrop {
    opacity: 0.2;
  }

  .clients-category-pill {
    gap: 12px !important;
  }

  .clients-category-pill .pill-blue-dash {
    width: 34px !important;
  }

  .clients-category-pill .pill-category-text {
    font-size: 0.78rem !important;
    letter-spacing: 1px !important;
  }

  .clients-main-heading {
    font-size: clamp(2.25rem, 10vw, 3.15rem) !important;
  }

  .clients-subtext-para {
    font-size: 0.9rem !important;
  }

  .clients-filter-row {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 3px 4px 11px;
    scrollbar-width: none;
  }

  .clients-filter-row::-webkit-scrollbar {
    display: none;
  }

  .clients-filter-btn {
    flex: 0 0 auto;
    font-size: 0.78rem;
  }

  .client-logos-showcase-card {
    padding: 12px !important;
    border-radius: 21px !important;
  }

  .client-logos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .client-logo-box {
    height: 74px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .client-logo-box .logo-svg {
    max-height: 52px !important;
  }

  .client-logo-nav {
    display: none !important;
  }

  .clients-stats-row {
    width: min(100% - 28px, 520px) !important;
    padding: 12px 8px !important;
    border-radius: 20px !important;
  }

  .clients-stats-row .client-stat-card {
    padding: 0 8px !important;
    gap: 8px !important;
  }

  .clients-stats-row .cstat-icon-circle {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px;
    font-size: 0.85rem;
  }

  .clients-stats-row .cstat-num {
    font-size: 1rem !important;
  }

  .clients-stats-row .cstat-lbl {
    font-size: 0.68rem !important;
  }

  .clients-industrial-horizon {
    bottom: 25px;
  }
}

/* ==========================================================================
   MASTER FAQ SECTION SYSTEM (BALANCED & PROPORTIONED - MATCHING EXACT REFERENCE)
   ========================================================================== */
.faq-answers-section {
  position: relative !important;
  background-color: #f0f7ff !important;
  background-image: url('assect/faq-backround.png') !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
  background-size: cover !important;
  padding: 60px 0 75px 0 !important;
  overflow: hidden !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Soft Feathered Fade at Top Border: Seamlessly dissolves into previous section */
.faq-answers-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Soft Feathered Fade at Bottom Border: Seamlessly dissolves into section below */
.faq-answers-section::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 65px !important;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 35%, rgba(255, 255, 255, 0) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.faq-bg-sky {
  display: none !important;
}

.faq-container-fluid {
  position: relative !important;
  z-index: 4 !important;
  width: 100% !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 3.5vw, 44px) !important;
}

/* 2-Column Exact Layout: Left Framing Droplet + Right Accordion Stack */
.faq-exact-layout {
  display: grid !important;
  grid-template-columns: minmax(340px, 43%) minmax(480px, 57%) !important;
  align-items: center !important;
  gap: clamp(20px, 3vw, 50px) !important;
  width: 100% !important;
}

/* Left Visual Column: Free space allowing the 3D Droplet on background to show unobstructed */
.faq-visual-col {
  min-height: 520px !important;
  width: 100% !important;
  pointer-events: none !important;
  display: block !important;
}

/* Right Content Column */
.faq-content-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

/* Header */
.faq-header-box {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto 30px auto !important;
}

.faq-header-box .faq-category-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto 16px auto !important;
  padding: 7px 22px !important;
  background: rgba(0, 112, 243, 0.08) !important;
  border: 1px solid rgba(0, 112, 243, 0.2) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  width: fit-content !important;
}

.faq-main-heading {
  font-family: 'Plus Jakarta Sans', var(--font-heading), -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(2.35rem, 3.2vw, 3.25rem) !important;
  font-weight: 800 !important;
  color: #0c1e3a !important;
  line-height: 1.16 !important;
  margin: 0 auto 16px auto !important;
  text-align: center !important;
  letter-spacing: -0.6px !important;
  text-wrap: balance !important;
}

.faq-main-heading .highlight-blue-txt {
  color: #0070f3 !important;
  background: linear-gradient(135deg, #0070f3 0%, #0284c7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline !important;
  font-weight: 800 !important;
}

.faq-subtext-para {
  font-family: 'Plus Jakarta Sans', var(--font-body), sans-serif !important;
  font-size: 1.05rem !important;
  color: #475569 !important;
  line-height: 1.68 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Accordion Stack (Single-Column Vertical List) */
.faq-accordion-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
  width: 100% !important;
}

/* Individual Accordion Card - Sleek Luxury Glass Capsule */
.faq-card-item {
  position: relative !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(210, 235, 255, 0.92) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 16px rgba(12, 38, 78, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.faq-card-item:hover {
  background: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 7px 22px rgba(0, 112, 243, 0.1) !important;
  transform: translateY(-1.5px) !important;
}

/* Active card item */
.faq-card-item.active {
  background: #ffffff !important;
  border-color: #0070f3 !important;
  box-shadow: 0 7px 24px rgba(0, 112, 243, 0.12) !important;
}

/* Card Header */
.faq-card-header {
  display: flex !important;
  align-items: center !important;
  padding: 11px 18px 11px 16px !important;
  gap: 13px !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* Number pill badge */
.faq-num-pill {
  background: linear-gradient(135deg, #0070f3 0%, #0056c6 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 4px 13px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 7px rgba(0, 112, 243, 0.28) !important;
}

/* Pipe divider */
.faq-divider-pipe {
  color: #cbd5e1 !important;
  font-size: 1.2rem !important;
  font-weight: 300 !important;
  margin: 0 2px !important;
  user-select: none !important;
}

/* Question Title */
.faq-question-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0a1f3c !important;
  line-height: 1.36 !important;
  flex: 1 !important;
  margin: 0 !important;
  text-align: left !important;
  letter-spacing: -0.2px !important;
  transition: color 0.25s ease !important;
}

.faq-card-item:hover .faq-question-title {
  color: #0070f3 !important;
}

/* Action button (+ or -) */
.faq-action-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: none !important;
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.76rem !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 7px rgba(14, 165, 233, 0.28) !important;
}

.faq-action-btn:hover {
  transform: scale(1.08) !important;
}

.faq-card-item.active .faq-action-btn {
  background: linear-gradient(135deg, #0070f3 0%, #0050c8 100%) !important;
  box-shadow: 0 3px 9px rgba(0, 112, 243, 0.35) !important;
}

/* Answer Body */
.faq-card-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, padding 0.25s ease;
  padding: 0 22px 0 74px !important;
}

.faq-card-item.active .faq-card-body {
  max-height: 240px !important;
  opacity: 1 !important;
  padding: 2px 22px 14px 74px !important;
}

.faq-card-body p {
  margin: 0 !important;
  font-size: 0.89rem !important;
  color: #4a5c70 !important;
  line-height: 1.62 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-top: 1px dashed rgba(220, 235, 250, 0.8) !important;
  padding-top: 8px !important;
}

/* Responsive Breakpoints */
@media (max-width: 1180px) {
  .faq-exact-layout {
    grid-template-columns: minmax(300px, 40%) 1fr !important;
    gap: 24px !important;
  }

  .faq-visual-col {
    min-height: 460px !important;
  }
}

@media (max-width: 900px) {
  .faq-answers-section {
    background-position: left bottom !important;
    padding: 48px 0 58px 0 !important;
  }

  .faq-exact-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .faq-visual-col {
    display: none !important;
  }

  .faq-content-col {
    max-width: 720px !important;
    margin: 0 auto !important;
  }

  .faq-card-body {
    padding: 0 16px 0 16px !important;
  }

  .faq-card-item.active .faq-card-body {
    padding: 2px 16px 12px 16px !important;
  }
}

@media (max-width: 640px) {
  .faq-container-fluid {
    padding: 0 14px !important;
  }

  .faq-answers-section {
    padding: 38px 0 46px 0 !important;
  }

  .faq-card-header {
    padding: 9px 14px !important;
    gap: 8px !important;
  }

  .faq-divider-pipe {
    display: none !important;
  }

  .faq-num-pill {
    padding: 3px 10px !important;
    font-size: 0.75rem !important;
  }

  .faq-question-title {
    font-size: 0.88rem !important;
  }

  .faq-main-heading {
    font-size: 1.8rem !important;
  }
}

/* Valued clients polish: reduce the dead space below the logo showcase and balance logo scale. */
@media (min-width: 981px) {
  .valued-clients-section {
    min-height: 680px !important;
    padding-bottom: 92px !important;
  }

  .client-logos-showcase-shell {
    margin-bottom: 18px !important;
  }

  .clients-industrial-horizon {
    bottom: 26px;
    height: 128px;
    opacity: 0.3;
  }

  .clients-bottom-wave {
    height: 112px !important;
  }

  .logo-gail .logo-svg,
  .logo-railways .logo-svg,
  .logo-jsw .logo-svg {
    transform: scale(1.18);
  }

  .logo-adani .logo-svg,
  .logo-indianoil .logo-svg {
    transform: scale(1.08);
  }
}

@media (max-width: 980px) {
  .valued-clients-section {
    padding-bottom: 92px !important;
  }

  .clients-industrial-horizon {
    bottom: 20px;
    opacity: 0.25;
  }
}

/* Clients header now follows the same unified section-heading system as the rest of the page. */
.clients-reference-header {
  display: block !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto 52px !important;
  text-align: center !important;
}

.clients-reference-header .clients-category-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: fit-content !important;
  margin: 0 auto 16px !important;
  padding: 7px 22px !important;
  border: 1px solid rgba(0, 112, 243, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(0, 112, 243, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.clients-reference-header .clients-category-pill .pill-blue-dash {
  width: 22px !important;
  height: 2px !important;
}

.clients-reference-header .clients-category-pill .pill-category-text {
  color: #0070f3 !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
}

.clients-reference-header .clients-main-heading {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 16px !important;
  color: #0c1e3a !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(2.35rem, 3.2vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.6px !important;
  text-align: center !important;
  text-wrap: balance !important;
}

.clients-reference-header .clients-main-heading .highlight-blue-txt {
  color: #0070f3 !important;
  background: linear-gradient(135deg, #0070f3 0%, #0284c7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline !important;
}

.clients-reference-header .clients-subtext-para {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  color: #475569 !important;
  font-size: 1.05rem !important;
  line-height: 1.68 !important;
  text-align: center !important;
}

@media (max-width: 600px) {
  .clients-reference-header {
    margin-bottom: 32px !important;
  }

  .clients-reference-header .clients-main-heading {
    font-size: clamp(1.85rem, 5.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
  }

  .clients-reference-header .clients-subtext-para {
    font-size: 0.9rem !important;
  }
}

/* Process background refresh: clean, calm and focused on the six-step workflow. */
.process-flow-section {
  background:
    radial-gradient(circle at 8% 10%, rgba(56, 189, 248, 0.22) 0%, transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(129, 140, 248, 0.16) 0%, transparent 30%),
    linear-gradient(180deg, #f8fcff 0%, #eef7ff 56%, #e3f3ff 100%) !important;
}

.process-bg-fx-layer {
  z-index: 0 !important;
}

.process-surface-grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(0, 112, 243, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 112, 243, 0.065) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.72) 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.72) 65%, transparent 100%);
}

.process-center-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  width: min(900px, 74vw);
  height: 360px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.2) 48%, transparent 72%);
  filter: blur(10px);
}

.proc-bg-glow-orb {
  opacity: 0.58 !important;
  filter: blur(86px) !important;
}

/* The old decorative contour/leaf/radar layers are intentionally removed from the visual system. */
.proc-topographic-svg,
.proc-subsurface-stream-svg,
.proc-leaf-accent,
.proc-radar-pulse {
  display: none !important;
}

.process-inner-container {
  position: relative;
  z-index: 3;
}

/* Process motion polish: slower entrance, softer hover and calmer water bubbles. */
.process-header-box {
  transition-duration: 1.2s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.process-step-item {
  transition-duration: 1.15s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.process-step-item:nth-child(1) {
  transition-delay: 0.12s !important;
}

.process-step-item:nth-child(2) {
  transition-delay: 0.30s !important;
}

.process-step-item:nth-child(3) {
  transition-delay: 0.48s !important;
}

.process-step-item:nth-child(4) {
  transition-delay: 0.66s !important;
}

.process-step-item:nth-child(5) {
  transition-delay: 0.84s !important;
}

.process-step-item:nth-child(6) {
  transition-delay: 1.02s !important;
}

.process-step-item .step-image-bubble,
.process-step-item .step-card-card,
.process-step-item .step-num-badge,
.process-step-item .step-bottom-bar {
  transition-duration: 0.65s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.proc-bubble {
  animation-duration: 11s !important;
  animation-timing-function: ease-in-out !important;
}

.pb-1 {
  animation-duration: 10s !important;
}

.pb-2 {
  animation-duration: 14s !important;
}

.pb-3 {
  animation-duration: 13s !important;
}

.pb-4 {
  animation-duration: 12s !important;
}

/* ==========================================================================
   HOMEPAGE MASTER SCROLL ENTRANCE & HOVER ANIMATION SUITE
   ========================================================================== */

/* 1. SCROLL-ENTRANCE REVEAL ENGINE */
.scroll-reveal-init {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(2px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.scroll-reveal-init.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

/* Staggered sequential entrance for card grids & stacks */
.scroll-reveal-init.is-revealed .reveal-stagger-item {
  animation: revealItemEntrance 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.08s * var(--stagger-index, 0));
}

@keyframes revealItemEntrance {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 2. SECTION-BY-SECTION INTERACTIVE HOVER ANIMATIONS */

/* --- Category Pills Hover --- */
.services-category-pill,
.process-category-pill,
.industries-category-pill,
.clients-category-pill,
.testi-category-pill,
.faq-category-pill {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease !important;
}

.services-category-pill:hover,
.process-category-pill:hover,
.industries-category-pill:hover,
.clients-category-pill:hover,
.testi-category-pill:hover,
.faq-category-pill:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 20px rgba(0, 112, 243, 0.15) !important;
  border-color: rgba(0, 112, 243, 0.4) !important;
}

/* --- Hero Banner Hover Interactions --- */
.hero-consult-btn,
.btn-consult-primary {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.hero-consult-btn:hover,
.btn-consult-primary:hover {
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 14px 30px rgba(0, 112, 243, 0.38) !important;
}

.hero-call-btn:hover {
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18) !important;
}

.hero-stat-badge {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.hero-stat-badge:hover {
  transform: translateY(-5px) scale(1.04) !important;
  box-shadow: 0 18px 36px rgba(0, 40, 100, 0.22) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}

/* --- About Section Bento Cards Hover --- */
.about-bento-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    background 0.45s ease !important;
}

.about-bento-card:hover {
  transform: translateY(-8px) scale(1.012) !important;
  box-shadow: 0 24px 48px -12px rgba(0, 70, 160, 0.16), 0 0 0 1px rgba(0, 112, 243, 0.25) !important;
  border-color: rgba(0, 112, 243, 0.45) !important;
}

.about-bento-card:hover .bento-icon-bubble {
  transform: translateY(-3px) rotate(8deg) scale(1.12) !important;
  box-shadow: 0 10px 22px rgba(0, 112, 243, 0.28) !important;
}

.about-bento-card:hover .bento-bottom-bar {
  width: 100% !important;
  filter: drop-shadow(0 0 8px rgba(0, 112, 243, 0.4));
}

.bento-icon-bubble,
.bento-bottom-bar {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.45s ease,
    box-shadow 0.4s ease !important;
}

/* --- Services 6 Cards Hover --- */
.solution-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease !important;
}

.solution-card:hover {
  transform: translateY(-9px) scale(1.01) !important;
  box-shadow: 0 24px 50px -10px rgba(0, 80, 180, 0.18), 0 0 0 1px rgba(0, 112, 243, 0.3) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
}

.solution-card .card-cover-photo {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.solution-card:hover .card-cover-photo {
  transform: scale(1.08) !important;
}

.solution-card:hover .card-icon-bubble {
  transform: rotate(-8deg) scale(1.1) !important;
  box-shadow: 0 10px 22px rgba(0, 112, 243, 0.3) !important;
}

.solution-card .card-icon-bubble {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

.solution-card:hover .btn-card-consult {
  color: #0070f3 !important;
}

.solution-card:hover .btn-card-consult i {
  transform: translateX(6px) !important;
}

.solution-card .btn-card-consult i {
  transition: transform 0.3s ease !important;
}

/* --- Our Process 6 Step Columns Hover --- */
.process-step-column {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.process-step-column:hover {
  transform: translateY(-10px) !important;
}

.process-step-column .step-circle-frame {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease !important;
}

.process-step-column:hover .step-circle-frame {
  transform: scale(1.08) !important;
  box-shadow: 0 16px 36px rgba(0, 112, 243, 0.28) !important;
}

.process-step-column .step-num-pill {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease !important;
}

.process-step-column:hover .step-num-pill {
  transform: scale(1.2) rotate(6deg) !important;
  box-shadow: 0 6px 16px rgba(0, 112, 243, 0.35) !important;
}

.process-step-column .step-card-box {
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.process-step-column:hover .step-card-box {
  border-color: rgba(56, 189, 248, 0.7) !important;
  box-shadow: 0 16px 36px rgba(0, 70, 160, 0.12) !important;
}

/* --- Industries 6 Cards Hover --- */
.industry-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease !important;
}

.industry-card:hover {
  transform: translateY(-9px) !important;
  box-shadow: 0 26px 52px -12px rgba(12, 30, 58, 0.2), 0 0 0 1px rgba(0, 112, 243, 0.3) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
}

.industry-card .industry-img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.industry-card:hover .industry-img {
  transform: scale(1.08) !important;
}

.industry-card:hover .industry-number-badge {
  transform: scale(1.14) !important;
  box-shadow: 0 6px 16px rgba(0, 112, 243, 0.4) !important;
}

.industry-card:hover .industry-tag-badge {
  transform: translateY(-3px) !important;
  background: #0070f3 !important;
  color: #ffffff !important;
}

.industry-card .industry-number-badge,
.industry-card .industry-tag-badge {
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease !important;
}

.industry-card:hover .industry-cta-link svg {
  transform: translateX(6px) !important;
}

.industry-card .industry-cta-link svg {
  transition: transform 0.3s ease !important;
}

/* --- Valued Clients Logo Boxes & Buttons Hover --- */
.client-logo-box {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease !important;
}

.client-logo-box:hover {
  transform: translateY(-6px) scale(1.06) !important;
  box-shadow: 0 16px 32px rgba(0, 80, 180, 0.14) !important;
  border-color: rgba(0, 112, 243, 0.45) !important;
  background: #ffffff !important;
}

.client-logo-prev,
.client-logo-next {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    box-shadow 0.3s ease !important;
}

.client-logo-prev:hover,
.client-logo-next:hover {
  transform: scale(1.15) !important;
  background: #0070f3 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 112, 243, 0.38) !important;
}

/* --- Testimonials Slider Cards Hover --- */
.testi-card-box {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease !important;
}

.testi-card-box:hover {
  transform: translateY(-7px) scale(1.01) !important;
  box-shadow: 0 24px 48px -10px rgba(0, 70, 160, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
}

.testi-card-box:hover .quote-icon-decor,
.testi-card-box:hover .testi-quote-mark {
  transform: rotate(-12deg) scale(1.18) !important;
  color: #0070f3 !important;
}

.quote-icon-decor,
.testi-quote-mark {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease !important;
}

/* --- FAQ Cards Hover --- */
.faq-card-item {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease !important;
}

.faq-card-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 32px rgba(0, 80, 180, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.65) !important;
}

.faq-card-item:hover .faq-num-pill {
  transform: scale(1.12) !important;
  background: linear-gradient(135deg, #0070f3, #38bdf8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.3) !important;
}

.faq-card-item:hover .faq-question-title {
  color: #0070f3 !important;
}

.faq-card-item:hover .faq-action-btn {
  transform: scale(1.14) !important;
  background: #0070f3 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 112, 243, 0.35) !important;
}

.faq-num-pill,
.faq-question-title,
.faq-action-btn {
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}

/* --- Global CTA Banner Hover & Shimmer --- */
.industries-action-banner {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease !important;
}

.industries-action-banner:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 28px 58px -12px rgba(12, 30, 58, 0.42) !important;
}

.btn-ind-primary {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.btn-ind-primary:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 14px 30px rgba(0, 112, 243, 0.4) !important;
}

.btn-ind-primary:hover svg {
  transform: translateX(5px);
}

.btn-ind-primary svg {
  transition: transform 0.3s ease;
}

.btn-ind-call:hover {
  transform: translateY(-3px) scale(1.03) !important;
  background: #ffffff !important;
  color: #0c1e3a !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22) !important;
}

.btn-ind-call:hover svg {
  animation: phoneRing 0.5s ease infinite alternate;
}

@keyframes phoneRing {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(-14deg) scale(1.1);
  }

  75% {
    transform: rotate(14deg) scale(1.1);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* --- Footer Hover Interactions --- */
.footer-nav-list li a,
.footer-services-list li a {
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.footer-nav-list li a:hover,
.footer-services-list li a:hover {
  transform: translateX(8px) !important;
  color: #38bdf8 !important;
}

.footer-nav-list li a:hover .f-link-arrow,
.footer-services-list li a:hover .f-link-arrow {
  transform: translateX(3px) !important;
  color: #38bdf8 !important;
}

.f-link-arrow {
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.footer-social-circles a {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s ease,
    box-shadow 0.35s ease !important;
}

.footer-social-circles a:hover {
  transform: translateY(-5px) scale(1.15) !important;
  background: linear-gradient(135deg, #0070f3, #38bdf8) !important;
  box-shadow: 0 10px 22px rgba(0, 112, 243, 0.45) !important;
}

/* ==========================================================================
   VALUED CLIENTS: BOTTOM GAP + HIDE OLD ARROWS + DUAL MARQUEE SYSTEM
   ========================================================================== */

/* Increase bottom spacing */
.valued-clients-section {
  padding-bottom: 140px !important;
}

@media (max-width: 980px) {
  .valued-clients-section {
    padding-bottom: 120px !important;
  }
}

/* Hide old arrow buttons */
.client-logo-nav {
  display: none !important;
}

/* Marquee Container */
.client-marquee-wrap {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

/* Edge fade masks for each row */
.client-marquee-row {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Track: holds logos inline, duplicated via JS for seamless loop */
.client-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

/* Left-scrolling row */
.marquee-left .client-marquee-track {
  animation: marqueeScrollLeft 28s linear infinite;
}

/* Right-scrolling row */
.marquee-right .client-marquee-track {
  animation: marqueeScrollRight 28s linear infinite;
}

/* Pause on hover */
.client-marquee-row:hover .client-marquee-track {
  animation-play-state: paused;
}

@keyframes marqueeScrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeScrollRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* Logo boxes inside marquee */
.client-marquee-wrap .client-logo-box {
  flex: 0 0 auto;
  min-width: 155px;
  max-width: 185px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(200, 224, 241, 0.85);
  border-radius: 16px;
  padding: 10px 18px;
  box-shadow: 0 4px 14px rgba(0, 70, 160, 0.06);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.client-marquee-wrap .client-logo-box:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 14px 28px rgba(0, 80, 180, 0.14);
  border-color: rgba(0, 112, 243, 0.4);
}

.client-marquee-wrap .client-logo-box .logo-svg {
  width: 100%;
  height: auto;
  max-height: 42px;
}

/* Real client artwork from assect/client; keep each logo contained inside its card. */
.client-marquee-wrap .client-logo-box .client-logo-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 768px) {
  .client-marquee-wrap .client-logo-box {
    min-width: 130px;
    max-width: 155px;
    height: 62px;
    padding: 8px 14px;
    border-radius: 13px;
  }

  .client-marquee-track {
    gap: 14px;
  }

  .client-marquee-wrap .client-logo-box .client-logo-image {
    max-height: 40px;
  }

  .marquee-left .client-marquee-track {
    animation-duration: 22s;
  }

  .marquee-right .client-marquee-track {
    animation-duration: 22s;
  }
}

/* ==========================================================================
   PROCESS SECTION: MULTI-DIRECTIONAL ENTRANCE ANIMATIONS
   ========================================================================== */

/* --- Header entrance (from top) --- */
.process-header-box {
  opacity: 0;
  transform: translateY(-60px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-header-box.proc-anim-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Cards: hidden by default --- */
.process-step-item {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Direction-specific initial states */
.process-step-item[data-anim-dir="left"] {
  transform: translateX(-90px) scale(0.92);
}

.process-step-item[data-anim-dir="right"] {
  transform: translateX(90px) scale(0.92);
}

.process-step-item[data-anim-dir="top"] {
  transform: translateY(-80px) scale(0.92);
}

.process-step-item[data-anim-dir="bottom"] {
  transform: translateY(80px) scale(0.92);
}

/* Visible state — all snap to origin */
.process-step-item.proc-anim-visible,
.process-cards-5row .process-step-item {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger delays for 6 cards */
.process-step-item:nth-child(1) {
  transition-delay: 0.05s;
}

.process-step-item:nth-child(2) {
  transition-delay: 0.15s;
}

.process-step-item:nth-child(3) {
  transition-delay: 0.25s;
}

.process-step-item:nth-child(4) {
  transition-delay: 0.35s;
}

.process-step-item:nth-child(5) {
  transition-delay: 0.45s;
}

.process-step-item:nth-child(6) {
  transition-delay: 0.55s;
}

/* ==========================================================================
   SERVICES SECTION: SCROLL ENTRANCE + HOVER ANIMATIONS
   ========================================================================== */

/* --- Header entrance (fade up) --- */
.services-header-box {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-header-box.srv-anim-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Cards: hidden by default with direction --- */
.solution-card {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
}

/* Direction initial states */
.solution-card[data-srv-dir="left"] {
  transform: translateX(-100px) rotate(-2deg) scale(0.9);
}

.solution-card[data-srv-dir="right"] {
  transform: translateX(100px) rotate(2deg) scale(0.9);
}

.solution-card[data-srv-dir="top"] {
  transform: translateY(-90px) scale(0.9);
}

.solution-card[data-srv-dir="bottom"] {
  transform: translateY(90px) scale(0.9);
}

/* Visible state */
.solution-card.srv-anim-visible {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1);
}

/* Stagger delays for 6 service cards */
.solution-card:nth-child(1) {
  transition-delay: 0.06s;
}

.solution-card:nth-child(2) {
  transition-delay: 0.18s;
}

.solution-card:nth-child(3) {
  transition-delay: 0.30s;
}

.solution-card:nth-child(4) {
  transition-delay: 0.42s;
}

.solution-card:nth-child(5) {
  transition-delay: 0.54s;
}

.solution-card:nth-child(6) {
  transition-delay: 0.66s;
}

/* ====== HOVER ANIMATIONS ====== */

/* Card lift + glow on hover */
.solution-card.srv-anim-visible {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease;
}

.solution-card.srv-anim-visible:hover {
  transform: translateY(-10px) scale(1.025);
  box-shadow: 0 24px 52px rgba(0, 70, 200, 0.16), 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Image zoom on hover */
.solution-card .card-cover-photo {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.solution-card:hover .card-cover-photo {
  transform: scale(1.12);
  filter: brightness(1.08);
}

/* Border glow pulse on hover */
.solution-card .card-border-glow {
  transition: opacity 0.45s ease, box-shadow 0.45s ease;
}

.solution-card:hover .card-border-glow {
  opacity: 1;
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.35), 0 0 28px rgba(59, 130, 246, 0.12);
}

/* Icon badge bounce on hover */
.solution-card .card-icon-badge {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.solution-card:hover .card-icon-badge {
  transform: scale(1.18) rotate(-8deg);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}

/* Watermark number subtle lift */
.solution-card .card-watermark-num {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.solution-card:hover .card-watermark-num {
  transform: translateY(-6px) scale(1.1);
  opacity: 0.22;
}

/* Spec items stagger highlight */
.solution-card .card-spec-item {
  transition: transform 0.35s ease, color 0.35s ease;
}

.solution-card:hover .card-spec-item:nth-child(1) {
  transform: translateX(4px);
  transition-delay: 0.05s;
}

.solution-card:hover .card-spec-item:nth-child(2) {
  transform: translateX(4px);
  transition-delay: 0.12s;
}

/* Learn More button slide + glow on card hover */
.solution-card .btn-card-action {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, background 0.4s ease;
}

.solution-card:hover .btn-card-action {
  transform: translateX(6px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.25);
}

/* Arrow icon nudge on hover */
.solution-card .btn-card-action i {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.solution-card:hover .btn-card-action i {
  transform: translateX(5px);
}

/* ==========================================================================
   HOMEPAGE GLOBAL MOTION: SLOW + SMOOTH
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body * {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Shared scroll reveal and staggered section entrances. */
.scroll-reveal-init {
  transition-duration: 1.15s !important;
}

.scroll-reveal-init.is-revealed .reveal-stagger-item {
  animation-duration: 1.2s !important;
  animation-delay: calc(0.14s * var(--stagger-index, 0)) !important;
}

/* Alternate service-detail cards from the left and right instead of making
   every card use the same vertical entrance. */
body[data-service] .scroll-reveal-init.is-revealed .reveal-stagger-item[data-reveal-direction="left"],
body.contact-page .scroll-reveal-init.is-revealed .reveal-stagger-item[data-reveal-direction="left"] {
  animation-name: revealItemFromLeft !important;
}

body[data-service] .scroll-reveal-init.is-revealed .reveal-stagger-item[data-reveal-direction="right"],
body.contact-page .scroll-reveal-init.is-revealed .reveal-stagger-item[data-reveal-direction="right"] {
  animation-name: revealItemFromRight !important;
}

@keyframes revealItemFromLeft {
  0% {
    opacity: 0;
    transform: translate3d(-48px, 22px, 0) scale(0.97);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes revealItemFromRight {
  0% {
    opacity: 0;
    transform: translate3d(48px, 22px, 0) scale(0.97);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

/* About-page impact strip placed directly below the Who We Are section. */
.about-impact-strip-section {
  position: relative;
  padding: 18px 0 38px;
  background: linear-gradient(180deg, #f7fcff 0%, #eef8fd 100%);
}

.about-impact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1280px;
  margin: 0 auto;
  padding: 17px 22px;
  border: 1px solid rgba(211, 232, 247, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 12px 28px rgba(29, 91, 135, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.about-impact-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 74px;
  padding: 8px 24px;
  position: relative;
  color: #0a3261;
}

.about-impact-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 0;
  width: 1px;
  height: calc(100% - 16px);
  background: #d6eaf7;
}

.about-impact-icon {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  place-items: center;
  color: #0b4d91;
  font-size: 1.55rem;
  transition: transform 220ms ease;
}

.about-impact-copy {
  display: grid;
  gap: 2px;
}

.about-impact-copy strong {
  color: #082f5d;
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.1;
}

.about-impact-copy small {
  color: #345a7d;
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
}

.about-impact-stat:hover .about-impact-icon {
  transform: translateY(-3px) scale(1.06);
}

@media (max-width: 800px) {
  .about-impact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 0;
  }

  .about-impact-stat:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 520px) {
  .about-impact-strip-section {
    padding: 12px 0 28px;
  }

  .about-impact-strip {
    grid-template-columns: 1fr;
    padding: 12px 16px;
  }

  .about-impact-stat {
    justify-content: flex-start;
    min-height: 62px;
    padding: 8px 10px;
  }

  .about-impact-stat::after {
    top: auto !important;
    right: 10px !important;
    bottom: 0;
    width: calc(100% - 20px) !important;
    height: 1px !important;
  }

  .about-impact-stat:last-child::after {
    display: none;
  }
}

/* Projects page uses the home page footer markup; hide its legacy footer remnant. */
.projects-page-body .master-footer .projects-footer-bottom {
  display: none !important;
}

/* Keep only the centered Technomantra India copyright on the Projects page. */
.projects-page-body .projects-register-summary {
  display: none !important;
}

.projects-page-body .master-footer .footer-bottom-inner {
  justify-content: center !important;
  text-align: center;
}

.projects-page-body .master-footer .footer-bottom-inner .legal-links,
.projects-page-body .master-footer .footer-bottom-inner .made-in-tag {
  display: none !important;
}

.projects-page-body .master-footer .footer-bottom-inner .copyright-text {
  font-size: 0;
}

.projects-page-body .master-footer .footer-bottom-inner .copyright-text::after {
  content: "© 2026 technomantraindia";
  font-size: 0.85rem;
  color: #94a3b8;
}

.projects-page-body .master-footer .footer-bottom-strip {
  display: none !important;
}

.projects-page-body .master-footer .footer-bottom-inner .copyright-text::after {
  content: "\00A9 2026 Technomantra India. All Rights Reserved.";
}

.projects-page-body .master-footer .projects-copyright-bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #9db3c8;
  font-size: 0.82rem;
  letter-spacing: 0.15px;
  text-align: center;
}

.projects-page-body .master-footer .projects-copyright-divider {
  color: rgba(255, 255, 255, 0.32);
}

.projects-page-body .master-footer .projects-copyright-bar strong {
  color: #ff6b35;
  font-weight: 800;
}

.projects-page-body .master-footer .projects-copyright-bar a {
  text-decoration: none;
}

/* Service-detail pages now share the homepage's entrance language. */
body[data-service] .service-hero-motion>* {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(2px);
}

body[data-service] .service-hero-motion.is-revealed>* {
  animation: serviceHeroEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-service] .service-hero-motion.is-revealed>*:nth-child(2) {
  animation-delay: 0.1s;
}

body[data-service] .service-hero-motion.is-revealed>*:nth-child(3) {
  animation-delay: 0.2s;
}

body.contact-page .contact-hero-inner.scroll-reveal-init {
  transition-duration: 0.95s !important;
}

@keyframes serviceHeroEntrance {
  0% {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-service] .scroll-reveal-init {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  body[data-service] .scroll-reveal-init .reveal-stagger-item,
  body[data-service] .service-hero-motion>*,
  body.contact-page .scroll-reveal-init,
  body.contact-page .scroll-reveal-init .reveal-stagger-item {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }
}

/* About section entrance and floating badges. */
.about-bharat-section.is-visible .about-hero-badge,
.about-bharat-section.is-visible .about-main-headline,
.about-bharat-section.is-visible .about-company-desc,
.about-bharat-section.is-visible .about-bento-card,
.about-bharat-section.is-visible .about-cta-action-row {
  animation-duration: 1.05s !important;
}

.about-bharat-section.is-visible .about-right-col,
.about-bharat-section.is-visible .scene-drilling,
.about-bharat-section.is-visible .scene-water,
.about-bharat-section.is-visible .scene-aquifer {
  animation-duration: 1.25s !important;
}

.about-bharat-section.is-visible .showcase-badge {
  animation-duration: 1.05s, 10s !important;
}

.about-orbital-ring {
  animation-duration: 14s !important;
}

/* Hero and ambient water motions. */
.badge-pulse-indicator,
.live-dot-pulse {
  animation-duration: 3.6s !important;
}

.ping-ring {
  animation-duration: 3.6s !important;
}

.float-bubble {
  animation-duration: 8s !important;
}

.fb-1 {
  animation-duration: 7.2s !important;
}

.fb-2 {
  animation-duration: 9.6s !important;
}

.fb-3 {
  animation-duration: 7.8s !important;
}

.fb-4 {
  animation-duration: 8.8s !important;
}

.drop-ripple-circle {
  animation-duration: 6s !important;
}

.dr-2 {
  animation-delay: 2s !important;
}

.dr-3 {
  animation-delay: 4s !important;
}

/* Clients marquee, CTA pulse and FAQ transition bubbles. */
.marquee-left .client-marquee-track,
.marquee-right .client-marquee-track {
  animation-duration: 42s !important;
}

.pulse-point {
  animation-duration: 4s !important;
}

.faq-cta-bubble {
  animation-duration: 10s !important;
}

.btn-ind-call:hover svg {
  animation-duration: 0.9s !important;
}

@media (max-width: 768px) {

  .marquee-left .client-marquee-track,
  .marquee-right .client-marquee-track {
    animation-duration: 36s !important;
  }
}

/* Shared hover timing across the homepage. */
.hero-consult-btn,
.btn-consult-primary,
.hero-call-btn,
.hero-stat-badge,
.about-bento-card,
.solution-card,
.process-step-item,
.industry-card,
.client-logo-box,
.testi-card-box,
.faq-card-item,
.industries-action-banner,
.btn-ind-primary,
.btn-ind-call {
  transition-duration: 0.72s !important;
}

.solution-card .card-cover-photo,
.industry-card .industry-img,
.clients-site-img {
  transition-duration: 0.95s !important;
}

.btn-card-action i,
.industry-cta-link svg,
.btn-ind-primary svg,
.footer-nav-list li a,
.footer-services-list li a {
  transition-duration: 0.58s !important;
}

/* Valued clients header: align copy to the left like the content-led section layouts. */
.clients-reference-header {
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

.clients-reference-header .clients-category-pill {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.clients-reference-header .clients-main-heading,
.clients-reference-header .clients-subtext-para {
  text-align: left !important;
}

.clients-reference-header .clients-subtext-para {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Reuse the Valued Clients atmosphere behind the CTA section. */
.global-cta-section {
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(247, 252, 255, 0.95) 0%, rgba(232, 246, 255, 0.82) 64%, rgba(175, 222, 251, 0.92) 100%),
    linear-gradient(135deg, #f7fcff 0%, #e4f4ff 58%, #c8eaff 100%) !important;
}

.global-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.16) 58%, transparent 78%);
}

.global-cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
  background-image: radial-gradient(circle, rgba(109, 181, 239, 0.48) 1.15px, transparent 1.7px);
  background-size: 10px 10px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
}

.global-cta-section .cta-section-container {
  position: relative;
  z-index: 1;
}

/* Keep the Valued Clients header centered; the left alignment belongs to FAQ. */
.clients-reference-header {
  max-width: 1080px !important;
  margin: 0 auto 52px !important;
  text-align: center !important;
}

.clients-reference-header .clients-category-pill {
  margin-left: auto !important;
  margin-right: auto !important;
}

.clients-reference-header .clients-main-heading,
.clients-reference-header .clients-subtext-para {
  text-align: center !important;
}

.clients-reference-header .clients-subtext-para {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Align only the FAQ category label, heading and description to the left. */
.faq-header-box {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.faq-header-box .faq-category-pill {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.faq-header-box .faq-main-heading,
.faq-header-box .faq-subtext-para {
  text-align: left !important;
}

.faq-header-box .faq-main-heading,
.faq-header-box .faq-subtext-para {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* CTA refresh: a lighter glass card with a calm blue accent instead of the dark banner. */
.global-cta-section .industries-action-banner {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 252, 255, 0.97) 58%, rgba(229, 245, 255, 0.96) 100%) !important;
  border: 1px solid rgba(93, 174, 232, 0.28) !important;
  border-left: 5px solid #42aef4 !important;
  box-shadow: 0 22px 52px -18px rgba(26, 111, 173, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.global-cta-section .industries-action-banner::before {
  top: -120px;
  right: -60px;
  width: 330px;
  height: 330px;
  background: radial-gradient(circle, rgba(111, 201, 250, 0.24) 0%, rgba(170, 225, 251, 0.1) 42%, transparent 72%) !important;
}

.global-cta-section .industries-action-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image: radial-gradient(circle, rgba(76, 165, 224, 0.24) 1px, transparent 1.5px);
  background-size: 13px 13px;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 55%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 55%, #000 100%);
}

.global-cta-section .ind-banner-content,
.global-cta-section .ind-banner-action {
  position: relative;
  z-index: 1;
}

.global-cta-section .ind-banner-badge {
  background: rgba(55, 164, 232, 0.1) !important;
  border-color: rgba(47, 153, 222, 0.24) !important;
  color: #0877bd !important;
}

.global-cta-section .pulse-point {
  background: #159ee8 !important;
  box-shadow: 0 0 10px rgba(21, 158, 232, 0.55) !important;
}

.global-cta-section .ind-banner-title {
  color: #102d58 !important;
}

.global-cta-section .ind-banner-text {
  color: #526b87 !important;
}

.global-cta-section .btn-ind-primary {
  background: linear-gradient(135deg, #0b82ed 0%, #36b9ef 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 9px 22px rgba(15, 135, 224, 0.24) !important;
}

.global-cta-section .btn-ind-primary:hover {
  background: linear-gradient(135deg, #0874d5 0%, #159fdc 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(15, 135, 224, 0.32) !important;
}

.global-cta-section .btn-ind-call {
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(34, 139, 207, 0.3) !important;
  color: #1267a8 !important;
  box-shadow: 0 5px 16px rgba(42, 129, 185, 0.08) !important;
}

.global-cta-section .btn-ind-call:hover {
  background: #eaf7ff !important;
  border-color: #53afe7 !important;
  color: #075a96 !important;
  box-shadow: 0 12px 26px rgba(42, 129, 185, 0.16) !important;
}

/* ========================================================================
   FINAL HOMEPAGE RESPONSIVE SYSTEM
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

img,
video {
  max-width: 100%;
}

@media (max-width: 1199px) {

  .container,
  .clients-container,
  .testi-container,
  .faq-container-fluid,
  .services-inner-container,
  .process-inner-container,
  .industries-container,
  .footer-main-container,
  .footer-bottom-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .nav-list {
    gap: 20px;
  }

  .hero-left-content {
    max-width: 680px;
  }

  .hero-main-title {
    font-size: clamp(2.65rem, 4.8vw, 3.5rem);
  }

  .about-main-grid {
    gap: 38px;
  }

  .services-cards-grid {
    gap: 22px;
  }

  .process-cards-row {
    gap: 20px;
  }

  .client-marquee-wrap {
    max-width: 100%;
  }

  .testi-slider-showcase {
    max-width: 100%;
  }
}

@media (max-width: 1100px) {
  .main-header .navbar-container {
    height: 72px;
  }

  .main-header .site-main-logo {
    height: 46px;
    max-width: 220px;
  }

  .main-header .nav-menu {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    padding: 20px 28px 24px;
    display: none;
    background: #ffffff;
    box-shadow: 0 16px 30px rgba(9, 47, 86, 0.12);
    isolation: isolate;
    z-index: 1100;
  }

  .main-header .nav-menu.active {
    display: block;
  }

  .main-header .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .main-header .nav-link {
    width: 100%;
    padding: 12px 4px;
  }

  .main-header .dropdown-list {
    position: static;
    min-width: 0;
    width: 100%;
    margin: 2px 0 6px;
    padding: 4px 0 4px 14px;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    box-shadow: none;
    border: 0;
  }

  .main-header .has-dropdown.dropdown-open>.dropdown-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    max-height: 48vh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    padding: 6px 8px 6px 14px;
    border: 1px solid #e1eef8;
    border-radius: 14px;
    background: #f8fcff;
  }

  .main-header .dropdown-list li a {
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 0.82rem;
  }

  .main-header .mobile-toggle {
    display: flex;
  }

  .hero-banner {
    min-height: 620px;
    padding: 72px 0 86px;
  }

  .hero-stats-bar {
    max-width: 100%;
  }

  .faq-exact-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .faq-visual-col {
    display: none !important;
  }

  .faq-content-col {
    max-width: 900px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 900px) {
  .top-bar {
    padding: 7px 0;
  }

  .top-bar-inner {
    justify-content: center;
    gap: 8px 16px;
  }

  .top-bar-left {
    justify-content: center;
    gap: 10px 18px;
  }

  .top-bar-right {
    display: none;
  }

  .hero-banner {
    min-height: 0;
    padding: 64px 0 78px;
  }

  .hero-container {
    align-items: flex-start;
  }

  .hero-left-content {
    width: 100%;
    max-width: 720px;
  }

  .hero-main-title {
    font-size: clamp(2.25rem, 7vw, 3.15rem);
    line-height: 1.12;
  }

  .hero-subtext-para {
    max-width: 640px;
    font-size: 1rem;
  }

  .hero-buttons-flex {
    margin-bottom: 30px;
  }

  .hero-stats-bar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .stat-item {
    min-width: 0;
    padding: 6px 8px;
  }

  .stat-item:not(:last-child)::after {
    display: none;
  }

  .about-main-grid {
    grid-template-columns: 1fr !important;
    gap: 42px;
  }

  .about-left-col,
  .about-right-col {
    width: 100%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }

  .about-main-headline {
    white-space: normal;
  }

  .about-showcase-graphic-wrap {
    margin-left: auto;
    margin-right: auto;
  }

  .services-solutions-section,
  .process-flow-section,
  .valued-clients-section,
  .testimonials-slider-section,
  .faq-answers-section {
    overflow: hidden;
  }

  .services-header-box,
  .process-header-box,
  .clients-reference-header,
  .testi-header-box {
    width: 100%;
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .services-main-heading,
  .process-main-heading,
  .clients-main-heading,
  .testi-main-heading {
    font-size: clamp(2rem, 5.5vw, 3rem) !important;
    line-height: 1.16;
  }

  .services-subtext-para,
  .process-subtext-para,
  .clients-subtext-para,
  .testi-subtext-para {
    max-width: 680px;
    font-size: 0.98rem;
  }

  .process-cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px 18px;
  }

  .step-connect-arrow {
    display: none !important;
  }

  .client-marquee-wrap .client-logo-box {
    min-width: 142px;
    max-width: 165px;
    height: 68px;
  }

  .testi-container {
    width: 100% !important;
  }

  .testi-edge-fade {
    width: 32px;
  }

  .testi-nav-arrow.arrow-prev {
    left: 2px;
  }

  .testi-nav-arrow.arrow-next {
    right: 2px;
  }

  .faq-header-box {
    text-align: left !important;
    max-width: 760px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .faq-header-box .faq-category-pill {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .faq-header-box .faq-main-heading,
  .faq-header-box .faq-subtext-para {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .global-cta-section .industries-action-banner {
    padding: 32px 28px !important;
    gap: 24px;
  }

  .global-cta-section .ind-banner-action {
    flex-wrap: wrap;
  }

  .footer-grid-5col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 26px;
  }

  .footer-sine-waves-svg {
    width: 360px;
  }

  .footer-water-drop-art {
    right: -20px;
    transform: scale(0.78);
    transform-origin: right bottom;
  }
}

@media (max-width: 700px) {
  .dropdown-list {
    grid-template-columns: 1fr;
  }

  .container,
  .clients-container,
  .testi-container,
  .faq-container-fluid,
  .services-inner-container,
  .process-inner-container,
  .industries-container,
  .footer-main-container,
  .footer-bottom-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .main-header .navbar-container {
    gap: 10px;
  }

  .main-header .site-main-logo {
    height: 42px;
    max-width: 190px;
  }

  .btn-inquiry-pill {
    padding: 10px 13px;
  }

  .btn-inquiry-pill span {
    display: none;
  }

  .hero-banner {
    padding: 54px 0 68px;
  }

  .hero-badge-pill {
    max-width: 100%;
    padding: 6px 12px;
  }

  .badge-title-txt {
    font-size: 0.66rem;
    letter-spacing: 0.85px;
  }

  .hero-main-title {
    font-size: clamp(2rem, 9vw, 2.65rem);
    letter-spacing: -0.8px;
  }

  .hero-main-title br {
    display: none;
  }

  .hero-subtext-para {
    font-size: 0.92rem;
    line-height: 1.58;
  }

  .hero-buttons-flex {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .btn-hero-explore,
  .btn-hero-talk {
    width: 100%;
    justify-content: center;
  }

  .hero-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-radius: 14px;
  }

  .stat-item {
    gap: 7px;
    padding: 5px 3px;
  }

  .stat-icon-circle {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .stat-meta .num,
  .stat-meta .txt-bold {
    font-size: 0.95rem;
  }

  .stat-meta .lbl {
    font-size: 0.62rem;
  }

  .about-bharat-section {
    padding-top: 58px !important;
    padding-bottom: 78px !important;
  }

  .about-main-headline,
  .services-main-heading,
  .process-main-heading,
  .clients-main-heading,
  .testi-main-heading,
  .faq-main-heading {
    font-size: clamp(1.8rem, 8.5vw, 2.35rem) !important;
    line-height: 1.18 !important;
  }

  .about-company-desc,
  .services-subtext-para,
  .process-subtext-para,
  .clients-subtext-para,
  .testi-subtext-para,
  .faq-subtext-para {
    font-size: 0.9rem !important;
    line-height: 1.62 !important;
  }

  .about-features-2x2 {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .about-bento-card {
    height: auto;
    min-height: 96px;
  }

  .services-solutions-section {
    padding: 68px 0 82px;
  }

  .services-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .solution-card {
    height: auto !important;
    min-height: 0;
    flex-direction: column;
    border-radius: 20px;
  }

  .card-media-side {
    width: 100%;
    height: 190px;
    flex: 0 0 190px;
  }

  .media-curve-mask {
    top: auto;
    right: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 38px;
    background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
  }

  .card-details-side {
    padding: 20px 17px 18px;
  }

  .card-title-text {
    font-size: 1.08rem;
  }

  .process-flow-section {
    padding: 68px 0 118px;
  }

  .process-cards-row {
    grid-template-columns: 1fr !important;
    gap: 66px;
  }

  .step-card-card {
    min-height: 0 !important;
  }

  .step-image-bubble {
    width: 108px;
    height: 108px;
  }

  .process-bottom-water {
    height: 92px;
  }

  .valued-clients-section {
    padding-top: 60px !important;
    padding-bottom: 108px !important;
  }

  .clients-reference-break {
    display: none;
  }

  .client-marquee-wrap {
    gap: 12px;
  }

  .client-marquee-wrap .client-logo-box {
    min-width: 124px;
    max-width: 142px;
    height: 60px;
    padding: 7px 11px;
    border-radius: 12px;
  }

  .client-marquee-wrap .client-logo-box .logo-svg {
    max-height: 36px;
  }

  .clients-bottom-wave {
    height: 86px !important;
  }

  .testimonials-slider-section {
    padding: 62px 0 72px;
  }

  .testi-header-box {
    margin-bottom: 28px;
  }

  .testi-cards-viewport {
    padding: 10px 4px;
  }

  .testi-card-box {
    border-radius: 18px;
    padding: 24px 18px 20px;
  }

  .testi-nav-arrow {
    width: 38px;
    height: 38px;
  }

  .testi-nav-arrow.arrow-prev {
    left: -2px;
  }

  .testi-nav-arrow.arrow-next {
    right: -2px;
  }

  .faq-answers-section {
    padding: 46px 0 58px !important;
  }

  .faq-header-box {
    margin-bottom: 26px !important;
  }

  .faq-header-box .faq-category-pill {
    max-width: 100%;
    padding: 6px 14px !important;
  }

  .faq-header-box .pill-category-text {
    font-size: 0.68rem;
    letter-spacing: 1.2px;
  }

  .faq-card-header {
    min-height: 54px;
    padding: 9px 11px !important;
    gap: 7px !important;
  }

  .faq-num-pill {
    padding: 3px 8px !important;
    font-size: 0.7rem !important;
  }

  .faq-question-title {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
  }

  .faq-action-btn {
    width: 28px !important;
    height: 28px !important;
  }

  .global-cta-section {
    padding: 24px 0 58px !important;
  }

  .global-cta-section .cta-section-container {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .global-cta-section .industries-action-banner {
    padding: 25px 20px !important;
    border-left-width: 4px !important;
    border-radius: 20px;
  }

  .global-cta-section .ind-banner-title {
    font-size: 1.35rem;
    line-height: 1.28;
  }

  .global-cta-section .ind-banner-text {
    font-size: 0.88rem;
  }

  .global-cta-section .ind-banner-action {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .global-cta-section .btn-ind-primary,
  .global-cta-section .btn-ind-call {
    width: 100%;
    justify-content: center;
  }

  .master-footer {
    padding-top: 58px;
  }

  .footer-grid-5col {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }

  .footer-main-container {
    margin-bottom: 34px !important;
  }

  .footer-col {
    min-width: 0;
  }

  .footer-bottom-inner {
    justify-content: center;
    text-align: center;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .legal-links {
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-water-drop-art {
    display: none;
  }

  .modal-dialog-box {
    max-width: calc(100vw - 28px);
    padding: 28px 20px;
    border-radius: 20px;
  }
}

/* Cleaner mobile contact bar and navigation header. */
@media (max-width: 700px) {
  .top-bar {
    padding: 7px 0;
    font-size: 0.68rem;
  }

  .top-bar-inner {
    display: block;
  }

  .top-bar-left {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px 12px;
  }

  .top-info-item {
    min-width: 0;
    gap: 6px;
    font-size: 0.68rem;
    line-height: 1.25;
    white-space: nowrap;
  }

  .top-info-item i {
    flex-shrink: 0;
    font-size: 0.72rem;
  }

  .top-bar-right {
    display: none;
  }

  .main-header .navbar-container {
    height: 70px;
    gap: 8px;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .main-header .brand-logo {
    min-width: 0;
  }

  .main-header .site-main-logo {
    height: 39px;
    max-width: 178px;
  }

  .nav-right-actions {
    gap: 6px;
    flex-shrink: 0;
  }

  .btn-inquiry-pill {
    gap: 7px;
    padding: 9px 12px;
    font-size: 0.8rem;
    border-radius: 999px;
  }

  .btn-inquiry-pill .inquiry-icon {
    font-size: 0.8rem;
  }

  .btn-inquiry-pill .arrow-icon {
    font-size: 0.72rem;
  }

  .mobile-toggle {
    padding: 6px 3px 6px 7px;
  }

  .mobile-toggle .bar {
    width: 23px;
    height: 2.5px;
  }
}

@media (max-width: 520px) {
  .top-info-item:first-child {
    display: none;
  }

  .top-bar-left {
    gap: 4px 8px;
  }

  .top-info-item {
    font-size: 0.64rem;
  }
}

@media (max-width: 430px) {
  .top-bar-left .top-info-item:nth-child(-n + 2) {
    display: none;
  }

  .main-header .site-main-logo {
    max-width: 172px;
  }

  .hero-stats-bar {
    gap: 5px;
    padding: 10px 7px;
  }

  .stat-item {
    gap: 5px;
    padding-inline: 1px;
  }

  .stat-meta .num,
  .stat-meta .txt-bold {
    font-size: 0.85rem;
  }

  .stat-meta .lbl {
    font-size: 0.56rem;
  }
}

/* ==========================================================================
   EXACT DESIGN FOR ABOUT US PAGE (100% SCREENSHOT MATCH)
   ========================================================================== */

/* 1. Page Hero Banner */
.about-hero-page-banner {
  position: relative;
  width: 100%;
  padding: 100px 0 80px 0;
  background-image: url('assect/about-hero-dam.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
}

.about-hero-page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7, 25, 48, 0.88) 0%, rgba(15, 60, 100, 0.78) 50%, rgba(2, 132, 199, 0.65) 100%);
  z-index: 1;
}

.about-hero-banner-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.about-page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
}

.about-page-breadcrumb a {
  color: #ffffff;
  text-decoration: none;
}

.about-page-title {
  font-family: var(--font-heading) !important;
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.about-page-title span.highlight-blue {
  color: #38bdf8;
}

.about-page-subtitle {
  font-family: var(--font-heading) !important;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f0f9ff;
  margin-bottom: 18px;
}

.about-page-desc {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  max-width: 820px;
}

/* Common Badges & Headings */
.about-sec-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0284c7;
  margin-bottom: 16px;
}

.about-sec-badge .badge-dash {
  width: 26px;
  height: 2.5px;
  background: #0284c7;
  border-radius: 2px;
}

.about-sec-heading {
  font-family: var(--font-heading) !important;
  font-size: 2.75rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.22;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.about-sec-heading span.highlight-text {
  color: #2563eb;
}

.about-sec-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 16px;
}

/* 2. WHO WE ARE SECTION (LUXURY BENTO REDESIGN) */
.about-whoweare-sec {
  padding: 100px 0;
  background: #f8fafc;
  background-image: radial-gradient(circle at 5% 5%, rgba(56, 189, 248, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 95% 95%, rgba(2, 132, 199, 0.06) 0%, transparent 45%);
  position: relative;
  overflow: hidden;
}

.whoweare-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.about-grid-2col {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 56px;
  align-items: center;
}

.about-whoweare-img-wrap {
  position: relative;
  border-radius: 32px;
  padding: 12px;
  background: #ffffff;
  border: 1.5px solid rgba(186, 230, 253, 0.9);
  box-shadow: 0 24px 60px rgba(14, 116, 144, 0.12), 0 0 35px rgba(56, 189, 248, 0.15);
  width: 100%;
}

.about-whoweare-img-inner {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 440px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.about-whoweare-img-wrap img.main-whoweare-img,
.about-whoweare-img-wrap video.main-whoweare-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-whoweare-img-wrap:hover img.main-whoweare-img,
.about-whoweare-img-wrap:hover video.main-whoweare-video {
  transform: scale(1.05);
}

/* Floating Glass Stat Badge */
.whoweare-floating-stat-badge {
  position: absolute;
  bottom: -18px;
  right: -18px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(186, 230, 253, 0.9);
  border-radius: 20px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 14px 36px rgba(14, 116, 144, 0.18);
  z-index: 10;
  transition: transform 0.3s ease;
}

.whoweare-floating-stat-badge:hover {
  transform: translateY(-4px);
}

.whoweare-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
}

.whoweare-stat-info {
  display: flex;
  flex-direction: column;
}

.whoweare-stat-number {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.whoweare-stat-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.2px;
}

.highlight-blue-gradient {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.about-whoweare-content .about-sec-heading {
  font-family: var(--font-heading) !important;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.22;
  color: #0f172a;
  margin-bottom: 22px;
}

.about-whoweare-content .about-sec-text {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #475569;
  margin-bottom: 32px;
  font-weight: 400;
}

.whoweare-feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.whoweare-card-item {
  border-radius: 22px;
  padding: 26px 20px;
  text-align: left;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  border: 1.5px solid transparent;
}

.whoweare-card-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.whoweare-card-item.card-blue {
  background: linear-gradient(145deg, #ffffff 0%, #edf6ff 100%);
  border-color: #dbeafe;
}

.whoweare-card-item.card-green {
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
  border-color: #dcfce7;
}

.whoweare-card-item.card-amber {
  background: linear-gradient(145deg, #ffffff 0%, #fffbeb 100%);
  border-color: #fef08a;
}

.whoweare-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: #ffffff;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.whoweare-card-item.card-blue .whoweare-icon-box {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

.whoweare-card-item.card-green .whoweare-icon-box {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.28);
}

.whoweare-card-item.card-amber .whoweare-icon-box {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.28);
}

.whoweare-card-title {
  font-family: var(--font-heading) !important;
  font-size: 1.12rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.whoweare-card-divider {
  width: 32px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 3px;
}

.whoweare-card-item.card-blue .whoweare-card-divider {
  background: #93c5fd;
}

.whoweare-card-item.card-green .whoweare-card-divider {
  background: #86efac;
}

.whoweare-card-item.card-amber .whoweare-card-divider {
  background: #fde047;
}

.whoweare-card-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
}

/* 3. OUR EXPERTISE SECTION (LUXURY BENTO REDESIGN) */
.about-expertise-sec {
  position: relative;
  padding: 100px 0 135px 0;
  background: #f8fafc;
  background-image: radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #f8fafc 0%, #edf6ff 100%);
  overflow: hidden;
}

.expertise-wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 95px;
  pointer-events: none;
  z-index: 1;
}

.expertise-wave-bottom svg {
  width: 100%;
  height: 100%;
  display: block;
}

.expertise-container-full {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.about-expertise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}

.exact-expertise-title {
  font-family: var(--font-heading) !important;
  font-size: 2.75rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.22;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.exact-expertise-para {
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #475569;
  margin-bottom: 28px;
}

/* 2x2 Feature Bento Matrix */
.expertise-bento-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.exp-bento-card {
  border-radius: 20px;
  padding: 20px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #ffffff;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09);
}

.exp-bento-card.card-blue {
  background: linear-gradient(145deg, #ffffff 0%, #edf6ff 100%);
  border-color: #dbeafe;
}

.exp-bento-card.card-green {
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
  border-color: #dcfce7;
}

.exp-bento-card.card-amber {
  background: linear-gradient(145deg, #ffffff 0%, #fffbeb 100%);
  border-color: #fef08a;
}

.exp-bento-card.card-purple {
  background: linear-gradient(145deg, #ffffff 0%, #faf5ff 100%);
  border-color: #e9d5ff;
}

.exp-bento-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #ffffff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.exp-bento-card.card-blue .exp-bento-icon {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}

.exp-bento-card.card-green .exp-bento-icon {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.28);
}

.exp-bento-card.card-amber .exp-bento-icon {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.28);
}

.exp-bento-card.card-purple .exp-bento-icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.28);
}

.exp-bento-info {
  display: flex;
  flex-direction: column;
}

.exp-bento-title {
  font-family: var(--font-heading) !important;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
  line-height: 1.25;
}

.exp-bento-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Right Column: 3D Artwork Bento Box Frame */
.expertise-3d-visual-wrap {
  position: relative;
  border-radius: 32px;
  padding: 12px;
  background: #ffffff;
  border: 1.5px solid rgba(186, 230, 253, 0.9);
  box-shadow: 0 24px 60px rgba(14, 116, 144, 0.14), 0 0 35px rgba(56, 189, 248, 0.15);
  width: 100%;
}

.expertise-3d-img-inner {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.expertise-3d-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.expertise-3d-visual-wrap:hover img.expertise-3d-img {
  transform: scale(1.04);
}

/* Floating Glass Badge on 3D Visual */
.expertise-floating-glass-badge {
  position: absolute;
  bottom: -18px;
  left: -18px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(186, 230, 253, 0.9);
  border-radius: 20px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 14px 36px rgba(14, 116, 144, 0.18);
  z-index: 10;
  transition: transform 0.3s ease;
}

.expertise-floating-glass-badge:hover {
  transform: translateY(-4px);
}

.exp-glass-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

.exp-glass-info {
  display: flex;
  flex-direction: column;
}

.exp-glass-title {
  font-family: var(--font-heading) !important;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.exp-glass-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

/* 4. OUR JOURNEY SECTION (PREMIUM LUXURY DESIGN) */
.about-journey-sec {
  position: relative;
  padding: 110px 0 130px 0;
  background-image: url('assect/about-hero-dam.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  overflow: hidden;
}

.journey-wave-top-divider {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
  z-index: 3;
}

.journey-wave-top-divider svg {
  width: 100%;
  height: 100%;
}

.journey-wave-bottom-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
  z-index: 3;
}

.journey-wave-bottom-divider svg {
  width: 100%;
  height: 100%;
}

.about-journey-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244, 248, 252, 0.95) 0%, rgba(255, 255, 255, 0.72) 30%, rgba(224, 242, 254, 0.55) 70%, rgba(248, 250, 252, 0.95) 100%);
  z-index: 1;
}

.journey-inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

.journey-header-box {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 50px auto;
}

.journey-main-title {
  font-family: var(--font-heading) !important;
  font-size: 2.85rem;
  font-weight: 800;
  color: #1e1b4b;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.journey-main-title span.blue-highlight {
  color: #2563eb;
}

.journey-subtext {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #475569;
  max-width: 720px;
  margin: 0 auto;
}

/* Wave Track & Pins */
.journey-wave-track-wrap {
  position: relative;
  margin-bottom: 30px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

.journey-wave-svg {
  position: absolute;
  top: 50%;
  left: 3%;
  right: 3%;
  width: 94%;
  height: 40px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.journey-pins-row {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.journey-pin-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.journey-pin-num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(7, 25, 48, 0.2);
  border: 3px solid #ffffff;
  transition: transform 0.3s ease;
}

.journey-pin-item:hover .journey-pin-num {
  transform: scale(1.18);
}

.pin-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.pin-green {
  background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
}

.pin-blue {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.pin-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.pin-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.journey-arrow-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0284c7;
  color: #ffffff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.journey-pin-dot-line {
  width: 2px;
  height: 22px;
  border-left: 2px dotted #0284c7;
  margin-top: 4px;
}

/* 5 Cards Row */
.journey-cards-5col {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  position: relative;
  z-index: 3;
}

.journey-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(7, 25, 48, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
}

.journey-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 50px rgba(2, 132, 199, 0.22);
  border-color: #38bdf8;
  background: #ffffff;
}

.journey-card-media {
  position: relative;
  height: 140px;
  width: 100%;
  overflow: hidden;
}

.journey-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.journey-card:hover .journey-card-img {
  transform: scale(1.08);
}

.journey-card-num-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  z-index: 2;
}

.journey-card-body {
  padding: 20px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.journey-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.journey-card-icon-badge {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
  z-index: 2;
}

.icon-badge-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.icon-badge-green {
  background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
}

.icon-badge-blue {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.icon-badge-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.icon-badge-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.journey-card-title {
  font-family: var(--font-heading) !important;
  font-size: 1.02rem;
  font-weight: 800;
  color: #1e1b4b;
  margin: 0;
  line-height: 1.25;
}

.journey-card-desc {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.5;
}

/* 5. WHY CHOOSE US SECTION (LUXURY GLASS DESIGN) */
.about-whychoose-sec {
  padding: 100px 0;
  background: #f8fafc;
  background-image: radial-gradient(circle at 10% 10%, rgba(56, 189, 248, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(2, 132, 199, 0.06) 0%, transparent 45%);
  position: relative;
}

.whychoose-header-center {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 55px auto;
}

.whychoose-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.whychoose-card-box {
  position: relative;
  border-radius: 24px;
  padding: 40px 30px;
  background: #ffffff;
  transition: all 0.38s ease;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.whychoose-card-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
  border-color: #38bdf8;
}

.whychoose-top-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4.5px;
}

.whychoose-card-box.card-theme-1 .whychoose-top-line {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.whychoose-card-box.card-theme-2 .whychoose-top-line {
  background: linear-gradient(90deg, #22c55e, #15803d);
}

.whychoose-card-box.card-theme-3 .whychoose-top-line {
  background: linear-gradient(90deg, #f59e0b, #b45309);
}

.whychoose-card-box.card-theme-4 .whychoose-top-line {
  background: linear-gradient(90deg, #a855f7, #6d28d9);
}

.whychoose-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  font-size: 1.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.35s ease;
}

.whychoose-card-box:hover .whychoose-icon {
  transform: scale(1.1) rotate(5deg);
}

.whychoose-card-box.card-theme-1 .whychoose-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.whychoose-card-box.card-theme-2 .whychoose-icon {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}

.whychoose-card-box.card-theme-3 .whychoose-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
}

.whychoose-card-box.card-theme-4 .whychoose-icon {
  background: linear-gradient(135deg, #a855f7 0%, #6d28d9 100%);
}

.whychoose-card-title {
  font-family: var(--font-heading) !important;
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
  line-height: 1.25;
}

.whychoose-card-desc {
  font-size: 0.94rem;
  color: #475569;
  line-height: 1.6;
}

/* 6. CTA BANNER SECTION */
.about-cta-banner-sec {
  position: relative;
  padding: 90px 0;
  background-image: url('assect/about-bottom-water.jpg');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  overflow: hidden;
}

.about-cta-banner-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7, 30, 50, 0.9) 0%, rgba(13, 71, 100, 0.85) 100%);
  z-index: 1;
}

.about-cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  border-radius: 28px;
  padding: 48px 56px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.about-cta-content {
  max-width: 720px;
}

.about-cta-badge {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #38bdf8;
  margin-bottom: 12px;
  display: block;
}

.about-cta-title {
  font-family: var(--font-heading) !important;
  font-size: 2.3rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 12px;
}

.about-cta-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
}

.btn-cta-white {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font-heading) !important;
  font-size: 1rem;
  font-weight: 800;
  padding: 16px 36px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-cta-white:hover {
  background: #38bdf8;
  color: #ffffff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 36px rgba(56, 189, 248, 0.4);
}


/* RESPONSIVE MEDIA QUERIES FOR ABOUT PAGE */
@media (max-width: 1024px) {

  .about-grid-2col,
  .about-expertise-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .expertise-cards-4col {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

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

  .about-cta-inner {
    flex-direction: column;
    text-align: center;
    padding: 36px 28px;
  }
}

@media (max-width: 640px) {
  .expertise-bento-2x2 {
    grid-template-columns: 1fr;
  }

  .expertise-cards-4col {
    grid-template-columns: 1fr;
  }

  .exp-callout-badge {
    font-size: 0.75rem;
    padding: 4px 12px 4px 4px;
  }

  .badge-icon-box,
  .badge-icon-circle {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }
}

@media (max-width: 768px) {
  .about-page-title {
    font-size: 2.5rem;
  }

  .about-sec-heading {
    font-size: 2rem;
  }

  .whoweare-feature-cards {
    grid-template-columns: 1fr;
  }

  .whychoose-cards-grid {
    grid-template-columns: 1fr;
  }

  .roadmap-steps-flex {
    gap: 30px;
  }

  .roadmap-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .roadmap-line-path {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   OUR JOURNEY: REFERENCE-MATCHED RESERVOIR STORYBOARD
   -------------------------------------------------------------------------- */
.about-journey-sec {
  padding: 86px 0 112px;
  background-image: url('assect/about-journey-backdrop-v2.png');
  background-size: cover;
  background-position: center 54%;
}

.about-journey-sec::before {
  background:
    linear-gradient(180deg, rgba(246, 250, 255, 0.96) 0%, rgba(247, 252, 255, 0.78) 23%, rgba(242, 249, 255, 0.66) 58%, rgba(234, 247, 255, 0.78) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 50%, rgba(255, 255, 255, 0.2));
}

.journey-inner-container {
  max-width: 1510px;
  padding: 0 42px;
}

.journey-header-box {
  max-width: 1040px;
  margin-bottom: 28px;
}

.journey-header-box .about-sec-badge {
  color: #168df0;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.journey-header-box .badge-dash {
  width: 54px;
  height: 2px;
  background: #168df0;
}

.journey-main-title {
  margin-bottom: 14px;
  font-size: clamp(2.2rem, 3.15vw, 3.25rem);
  letter-spacing: -0.8px;
}

.journey-main-title span.blue-highlight {
  color: #168df0;
}

.journey-subtext {
  max-width: 970px;
  font-size: clamp(0.98rem, 1.14vw, 1.18rem);
  line-height: 1.45;
}

.journey-wave-track-wrap {
  height: 82px;
  margin: 0 0 4px;
  padding: 0 34px;
}

.journey-wave-svg {
  top: 38%;
  left: 7%;
  width: 86%;
  height: 66px;
  opacity: 0.52;
}

.journey-wave-svg path {
  stroke: #65a9e9;
  stroke-width: 2.2;
  stroke-dasharray: none;
}

.journey-pins-row {
  align-items: flex-start;
}

.journey-pin-num {
  width: 66px;
  height: 66px;
  border-width: 7px;
  font-size: 1.2rem;
  box-shadow: 0 6px 15px rgba(7, 25, 48, 0.16);
}

.journey-pin-dot-line {
  height: 30px;
  margin-top: 2px;
  border-left-width: 3px;
  border-left-color: currentColor;
}

.journey-pin-item:nth-child(1) {
  color: #f59e0b;
}

.journey-pin-item:nth-child(3) {
  color: #84cc16;
}

.journey-pin-item:nth-child(5) {
  color: #0284c7;
}

.journey-pin-item:nth-child(7) {
  color: #8b5cf6;
}

.journey-pin-item:nth-child(9) {
  color: #06b6d4;
}

.journey-arrow-badge {
  width: 34px;
  height: 34px;
  margin-top: 10px;
  background: #f8fcff;
  color: #168df0;
  border: 4px solid rgba(255, 255, 255, 0.95);
  font-size: 0.78rem;
  box-shadow: 0 6px 13px rgba(30, 101, 162, 0.18);
}

.journey-cards-5col {
  gap: 22px;
}

.journey-card {
  min-height: 296px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(30, 93, 143, 0.12);
}

.journey-card-media {
  height: 138px;
  width: calc(100% - 24px);
  margin: 12px 12px 0;
  border-radius: 13px;
}

.journey-card-body {
  padding: 12px 18px 20px;
}

.journey-card-header {
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
}

.journey-card-icon-badge {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border: 0;
  box-shadow: none;
}

.journey-card-title {
  font-size: clamp(0.94rem, 1.07vw, 1.14rem);
}

.journey-card-desc {
  margin: 0;
  padding-left: 60px;
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .journey-inner-container {
    padding: 0 24px;
  }

  .journey-cards-5col {
    grid-template-columns: repeat(3, 1fr);
  }

  .journey-wave-track-wrap {
    display: none;
  }

  .journey-header-box {
    margin-bottom: 30px;
  }
}

@media (max-width: 700px) {
  .about-journey-sec {
    padding: 70px 0 86px;
  }

  .journey-inner-container {
    padding: 0 16px;
  }

  .journey-main-title {
    font-size: 2.2rem;
  }

  .journey-cards-5col {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .journey-card {
    min-height: 0;
  }

  .journey-card-media {
    height: 170px;
  }
}

/* ==========================================================================
   CONTACT PAGE STYLES (PREMIUM HIGH-CONTRAST DESIGN & MASTER MATCH)
   ========================================================================== */

/* 1. LUXURY ROYAL BLUE & HIGH-CONTRAST HERO BANNER */
.contact-hero-banner-sec,
.about-hero-page-banner {
  position: relative;
  padding: 95px 0 115px 0;
  background-image: url('assect/about-hero-dam.jpg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.contact-hero-dark-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7, 25, 48, 0.86) 0%, rgba(13, 59, 102, 0.78) 50%, rgba(37, 99, 235, 0.82) 100%),
    radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.35) 0%, transparent 60%);
  z-index: 1;
}

.contact-hero-inner,
.about-hero-banner-inner {
  position: relative;
  z-index: 2;
  text-align: left;
}

.about-page-breadcrumb,
.contact-page-breadcrumb,
.contact-breadcrumb-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 25, 47, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 999px;
  padding: 7px 20px;
  font-family: var(--font-heading), sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.about-page-breadcrumb:hover,
.contact-page-breadcrumb:hover,
.contact-breadcrumb-wrap:hover {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.about-page-breadcrumb a,
.contact-page-breadcrumb a,
.contact-breadcrumb-wrap a {
  color: #38bdf8;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.3s ease;
}

.about-page-breadcrumb a:hover,
.contact-page-breadcrumb a:hover,
.contact-breadcrumb-wrap a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.about-page-breadcrumb i,
.contact-page-breadcrumb i,
.contact-breadcrumb-wrap i {
  font-size: 0.68rem;
  color: #94a3b8;
}

.bc-current {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.about-page-title,
.contact-hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.8px;
  max-width: 950px;
}

.about-page-title span.highlight-blue,
.contact-hero-title span.highlight-blue,
.blue-highlight-glow {
  background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-family: inherit !important;
}

.about-page-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.4;
  margin-bottom: 14px;
  max-width: 760px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.about-page-desc,
.contact-hero-subtext,
.contact-hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.04rem;
  line-height: 1.68;
  color: #f1f5f9;
  max-width: 760px;
  margin-bottom: 10px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* FLOATING LUXURY HERO STATS BAR (EXACT AS HOME & ABOUT PAGE) */
.hero-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 22px;
  padding: 16px 24px;
  max-width: 900px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28), 0 0 25px rgba(56, 189, 248, 0.15);
  margin-top: 35px;
}

.hero-stats-bar .stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  transition: all 0.3s ease;
}

.hero-stats-bar .stat-item:last-child {
  border-right: none;
}

.hero-stats-bar .stat-item:hover {
  transform: translateY(-3px);
}

.hero-stats-bar .stat-icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.45);
}

.hero-stats-bar .stat-meta {
  display: flex;
  flex-direction: column;
}

.hero-stats-bar .stat-meta .num,
.hero-stats-bar .stat-meta .txt-bold {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
}

.hero-stats-bar .stat-meta .lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #7dd3fc;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 2px;
}

/* 2. 4 CONTACT INFO CARDS BAR (LUXURY GLASS & GAP ABOVE) */
.contact-cards-bar-sec {
  position: relative;
  padding: 65px 0 75px 0;
  background: #f4f8fc;
  background-image: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.14) 0%, transparent 65%);
  margin-top: 0;
  z-index: 5;
}

.contact-cards-4col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.contact-info-card-item {
  border-radius: 24px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05), 0 4px 10px rgba(15, 23, 42, 0.02);
  position: relative;
  overflow: hidden;
}

.contact-info-card-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12), 0 0 25px rgba(56, 189, 248, 0.2);
}

.contact-info-card-item.card-theme-blue {
  border-top: 4px solid #2563eb;
  background-image: linear-gradient(180deg, rgba(219, 234, 254, 0.25) 0%, #ffffff 40%);
}

.contact-info-card-item.card-theme-green {
  border-top: 4px solid #16a34a;
  background-image: linear-gradient(180deg, rgba(220, 252, 231, 0.25) 0%, #ffffff 40%);
}

.contact-info-card-item.card-theme-amber {
  border-top: 4px solid #d97706;
  background-image: linear-gradient(180deg, rgba(254, 240, 138, 0.25) 0%, #ffffff 40%);
}

.contact-info-card-item.card-theme-purple {
  border-top: 4px solid #7c3aed;
  background-image: linear-gradient(180deg, rgba(221, 214, 254, 0.25) 0%, #ffffff 40%);
}

.contact-card-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.contact-card-icon-circle.icon-blue {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.contact-card-icon-circle.icon-green {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.35);
}

.contact-card-icon-circle.icon-amber {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.35);
}

.contact-card-icon-circle.icon-purple {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}

.contact-card-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.contact-card-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  line-height: 1.45;
}

.contact-card-phones a {
  color: inherit;
  text-decoration: none;
}

.contact-card-phones a:hover {
  color: #2563eb;
}

.contact-card-val:hover {
  color: #2563eb;
}

.contact-card-val-sm {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #475569;
}

.contact-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 4px;
}

/* 3. GET IN TOUCH MAIN FORM & VISUAL CARD */
.contact-main-form-sec {
  padding: 70px 0 100px 0;
  background: #f4f8fc;
  background-image: radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #f8fafc 0%, #edf6ff 100%);
}

.contact-form-visual-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: stretch;
}

.contact-form-card-wrapper {
  background: #ffffff;
  border-radius: 28px;
  padding: 40px 36px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.07);
}

.contact-sec-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 2.85rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.contact-sec-title span.blue-highlight {
  color: #2563eb;
}

.contact-form-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 0.96rem;
  color: #64748b;
  margin-bottom: 30px;
}

.contact-actual-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-inputs-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group-item label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
}

.req-star {
  color: #ef4444;
}

.form-control-pill {
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  font-family: 'Inter', sans-serif;
  font-size: 0.94rem;
  color: #0f172a;
  outline: none;
  transition: all 0.3s ease;
}

.form-control-pill:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.select-pill {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%25232563eb'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  cursor: pointer;
}

.textarea-pill {
  resize: vertical;
  min-height: 120px;
  border-radius: 16px;
}

.btn-send-message-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #2563eb;
  color: #ffffff;
  padding: 16px 36px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
  transition: all 0.35s ease;
}

.btn-send-message-pill:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
}

/* Right Column: Visual Card with Background Image */
.contact-visual-card-right {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  background-image: url('assect/contact-river-dam.jpg');
  background-size: cover;
  background-position: center;
}

.contact-visual-card-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.45) 100%);
  z-index: 1;
}

.contact-card-backdrop-img {
  display: none;
}

.contact-card-glass-box {
  position: relative;
  z-index: 3;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(16px);
  padding: 32px 28px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 400px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
}

.contact-card-glass-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 12px;
}

.contact-card-glass-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #e2e8f0;
  line-height: 1.55;
}

.contact-card-floating-badges-row {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  padding: 18px 22px;
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
}

.contact-card-floating-pill {
  display: flex;
  align-items: center;
  gap: 10px;
}

.floating-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.floating-icon-circle.icon-blue {
  background: #2563eb;
}

.floating-icon-circle.icon-green {
  background: #16a34a;
}

.floating-icon-circle.icon-amber {
  background: #d97706;
}

.floating-pill-lbl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

/* 4. FIND US HERE - OFFICE LOCATION & MAP (CENTERED HEADER & LUXURY CONTAINER) */
.contact-office-map-sec {
  padding: 95px 0 115px 0;
  background: #f4f8fc;
  background-image: radial-gradient(circle at 50% 30%, rgba(56, 189, 248, 0.12) 0%, transparent 65%);
}

.location-sec-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px auto;
}

.contact-sec-title-centered {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.85rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: -0.5px;
}

.contact-sec-title-centered span.blue-highlight {
  color: #2563eb;
  font-family: 'Playfair Display', Georgia, serif !important;
}

.contact-sec-desc-centered {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #475569;
  line-height: 1.65;
  text-align: center;
}

.office-map-card-container {
  background: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08), 0 0 30px rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.office-map-grid-2col {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  min-height: 480px;
}

.office-info-left-col {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
}

.office-header-group {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 32px;
}

.office-main-icon-circle {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

.office-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.office-address {
  font-family: 'Inter', sans-serif;
  font-size: 0.94rem;
  line-height: 1.65;
  color: #475569;
}

.office-contact-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.office-detail-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.office-detail-row:hover {
  background: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.office-row-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.office-row-icon.icon-blue {
  background: #dbeafe;
  color: #2563eb;
}

.office-row-icon.icon-green {
  background: #dcfce7;
  color: #16a34a;
}

.office-row-icon.icon-darkblue {
  background: #e0e7ff;
  color: #3730a3;
}

.office-row-icon.icon-sky {
  background: #0284c7;
  color: #ffffff;
}

.office-row-content {
  display: flex;
  flex-direction: column;
}

.office-row-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.office-row-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
}

.office-row-val:hover {
  color: #2563eb;
}

.office-row-txt {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: #334155;
  font-weight: 600;
}

.btn-get-directions-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background: #2563eb;
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
  transition: all 0.35s ease;
}

.btn-get-directions-pill:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
}

.office-map-right-col {
  width: 100%;
  height: 100%;
  min-height: 480px;
}

/* RESPONSIVE MEDIA QUERIES FOR CONTACT PAGE */
@media (max-width: 1024px) {
  .hero-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .hero-stats-bar .stat-item {
    border-right: none;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .contact-cards-4col-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form-visual-grid {
    grid-template-columns: 1fr;
  }

  .office-map-grid-2col {
    grid-template-columns: 1fr;
  }

  .contact-office-map-sec {
    padding: 54px 0 64px;
  }

  .contact-office-map-sec>.container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .location-sec-header {
    margin-bottom: 28px;
  }

  .office-map-card-container {
    border-radius: 22px;
  }

  .office-info-left-col {
    padding: 28px 20px 24px;
  }

  .office-header-group {
    gap: 14px;
    margin-bottom: 24px;
  }

  .office-main-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 1.25rem;
  }

  .office-title {
    font-size: 1.25rem;
    margin-bottom: 4px;
  }

  .office-address {
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .office-contact-rows {
    gap: 12px;
  }

  .office-detail-row {
    gap: 11px;
    padding: 10px 12px;
    border-radius: 13px;
  }

  .office-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 0.92rem;
  }

  .office-row-label {
    font-size: 0.68rem;
    letter-spacing: 0.35px;
  }

  .office-row-val {
    font-size: 0.9rem;
  }

  .office-row-txt {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .office-detail-row.direction-row {
    margin-top: 4px !important;
  }

  .btn-get-directions-pill {
    gap: 8px;
    padding: 11px 14px;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  .office-map-right-col {
    min-height: 280px;
  }
}

@media (max-width: 640px) {
  .hero-stats-bar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .contact-hero-title {
    font-size: 2.3rem;
  }

  .contact-cards-4col-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-cards-bar-sec {
    padding: 34px 0 44px;
  }

  .contact-cards-bar-sec>.container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .contact-info-card-item {
    min-height: 0;
    padding: 20px 22px;
    gap: 11px;
    border-radius: 22px;
    flex-direction: row;
    align-items: flex-start;
  }

  .contact-card-meta {
    min-width: 0;
    flex: 1;
  }

  .contact-card-icon-circle {
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 14px;
    font-size: 1.1rem;
  }

  .contact-card-label {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }

  .contact-card-val {
    font-size: 0.96rem;
    line-height: 1.35;
    margin-bottom: 2px;
  }

  .contact-card-val-sm {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .contact-card-sub {
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .form-inputs-row-2col {
    grid-template-columns: 1fr;
  }

  .contact-card-floating-badges-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-main-form-sec {
    padding: 40px 0 54px;
  }

  .contact-main-form-sec>.container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .contact-form-visual-grid {
    gap: 22px;
  }

  .contact-form-card-wrapper {
    padding: 28px 20px 24px;
    border-radius: 24px;
  }

  .contact-form-card-wrapper .about-sec-badge {
    margin-bottom: 12px;
  }

  .contact-sec-title {
    font-size: 2.25rem;
    line-height: 1.1;
    margin-bottom: 10px;
  }

  .contact-form-subtext {
    font-size: 0.86rem;
    line-height: 1.5;
    margin-bottom: 22px;
  }

  .contact-actual-form {
    gap: 14px;
  }

  .form-group-item {
    gap: 5px;
  }

  .form-group-item label {
    font-size: 0.78rem;
  }

  .form-control-pill {
    padding: 12px 16px;
    font-size: 0.86rem;
    border-radius: 13px;
  }

  .textarea-pill {
    min-height: 100px;
  }

  .form-submit-row {
    width: 100%;
  }

  .btn-send-message-pill {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    font-size: 0.86rem;
  }

  .contact-visual-card-right {
    min-height: 430px;
    padding: 24px 20px 28px;
    border-radius: 24px;
  }

  .contact-card-glass-box {
    width: 100%;
    max-width: none;
    padding: 24px 20px;
    border-radius: 20px;
  }

  .contact-card-glass-title {
    font-size: 1.45rem;
    line-height: 1.2;
    margin-bottom: 9px;
  }

  .contact-card-glass-desc {
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .contact-card-floating-badges-row {
    width: 100%;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .floating-icon-circle {
    width: 34px;
    height: 34px;
    font-size: 0.88rem;
  }

  .floating-pill-lbl {
    font-size: 0.72rem;
  }
}

/* ==========================================================================
   KNOWLEDGE CENTER PAGE STYLES (MATCHING REFERENCE DESIGN EXACTLY)
   ========================================================================== */

/* 1. HERO SECTION */
.knowledge-hero-sec {
  position: relative;
  padding: 85px 0 100px 0;
  background-image: url('assect/about-hero-dam.jpg');
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.knowledge-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.88) 0%, rgba(240, 249, 255, 0.92) 50%, rgba(255, 255, 255, 0.95) 100%),
    radial-gradient(circle at 90% 20%, rgba(56, 189, 248, 0.25) 0%, transparent 60%);
  z-index: 1;
}

.knowledge-hero-container {
  position: relative;
  z-index: 2;
}

.knowledge-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

.knowledge-hero-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.6rem, 4.3vw, 3.8rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.6px;
}

.knowledge-hero-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.68;
  color: #475569;
  max-width: 650px;
  margin-bottom: 30px;
}

/* Search Box */
.knowledge-search-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 8px 6px 24px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.9);
  max-width: 580px;
  transition: all 0.3s ease;
}

.knowledge-search-box:focus-within {
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.15), 0 0 0 2px #2563eb;
}

.knowledge-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 0.96rem;
  color: #0f172a;
  padding: 10px 0;
}

.knowledge-search-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  transition: all 0.3s ease;
}

.knowledge-search-btn:hover {
  background: #1d4ed8;
  transform: scale(1.05);
}

/* Right Column: 4 Floating Quick Cards */
.knowledge-hero-right-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.knowledge-quick-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  padding: 14px 20px;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  text-decoration: none;
  transition: all 0.3s ease;
}

.knowledge-quick-card:hover {
  transform: translateX(6px);
  background: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.quick-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.quick-card-icon.icon-blue {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.quick-card-icon.icon-amber {
  background: linear-gradient(135deg, #d97706, #b45309);
}

.quick-card-icon.icon-purple {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.quick-card-icon.icon-cyan {
  background: linear-gradient(135deg, #0284c7, #0369a1);
}

.quick-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}

.quick-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #64748b;
}

/* 2. 6 CATEGORY QUICK FILTER BAR (LUXURY INTERACTIVE TILES) */
.knowledge-category-bar-sec {
  position: relative;
  z-index: 10;
  padding: 0 0 50px 0;
  margin-top: -35px;
  background: transparent;
}

.knowledge-category-filter-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  background: #ffffff;
  padding: 22px 24px;
  border-radius: 24px;
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08), 0 0 25px rgba(56, 189, 248, 0.12);
  border: 1.5px solid rgba(226, 232, 240, 0.95);
  margin-top: 32px;
  margin-bottom: 40px;
  width: 100%;
}

.category-filter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  text-decoration: none;
  padding: 18px 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.03);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  cursor: pointer;
  width: 100%;
}

.category-filter-item:hover,
.category-filter-item.active {
  background: #ffffff;
  border-color: #0284c7;
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(2, 132, 199, 0.16), 0 0 20px rgba(56, 189, 248, 0.18);
}

.category-filter-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 999px 999px 0 0;
}

.cat-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.25rem;
  transition: transform 0.35s ease;
}

.cat-icon-circle.icon-blue {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.cat-icon-circle.icon-green {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.35);
}

.cat-icon-circle.icon-sky {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
}

.cat-icon-circle.icon-amber {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.35);
}

.cat-icon-circle.icon-purple {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}

.cat-icon-circle.icon-cyan {
  background: linear-gradient(135deg, #0891b2, #0e7490);
  box-shadow: 0 8px 20px rgba(8, 145, 178, 0.35);
}

.category-filter-item:hover .cat-icon-circle,
.category-filter-item.active .cat-icon-circle {
  transform: scale(1.08) rotate(3deg);
}

.cat-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.28;
}

/* 3. FEATURED INSIGHTS SECTION (ICE BLUE TINT) */
.knowledge-featured-sec {
  padding: 85px 0 85px 0;
  background: linear-gradient(180deg, #f0f7ff 0%, #e8f3fe 60%, #e2f0fd 100%);
  position: relative;
  overflow: hidden;
}

.knowledge-sec-header-box {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 32px auto;
}

.knowledge-sec-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.75rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 12px;
}

.knowledge-sec-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 660px;
  margin: 0 auto;
}

/* Category Filter Pills Row (Exact Match with Reference Image) */
.featured-category-pills-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.feat-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  background: #ffffff;
  color: #1e293b;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feat-pill-btn i {
  font-size: 0.95rem;
  color: #0075ff;
  transition: color 0.3s ease;
}

.feat-pill-btn:hover {
  background: #ffffff;
  border-color: #0075ff;
  color: #0075ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 117, 255, 0.12);
}

.feat-pill-btn.active {
  background: #0075ff;
  color: #ffffff;
  border-color: #0075ff;
  box-shadow: 0 8px 22px rgba(0, 117, 255, 0.35);
}

.feat-pill-btn.active i {
  color: #ffffff;
}

/* Grid Layout: 1 Large Left Card + 3 Right Stacked Cards */
.knowledge-featured-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}

/* Left Large Featured Article Card */
.featured-card-large {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
  cursor: pointer;
}

.featured-card-large:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.1);
  border-color: #38bdf8;
}

.featured-media-box {
  position: relative;
  height: 310px;
  overflow: hidden;
}

.featured-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: #0075ff;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 999px;
  letter-spacing: 0.6px;
  z-index: 2;
  box-shadow: 0 6px 16px rgba(0, 117, 255, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.featured-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.featured-card-large:hover .featured-media-img {
  transform: scale(1.05);
}

.featured-content-box {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.featured-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.cat-pill-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cat-pill-tag.badge-blue {
  background: #e0f2fe;
  color: #0284c7;
}

.cat-pill-tag.badge-green {
  background: #dcfce7;
  color: #15803d;
}

.cat-pill-tag.badge-sky {
  background: #e0f2fe;
  color: #0369a1;
}

.cat-pill-tag.badge-amber {
  background: #fef3c7;
  color: #b45309;
}

.article-date-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: #64748b;
  font-weight: 600;
}

.featured-article-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.65rem;
  font-weight: 800;
  color: #0b1e36;
  line-height: 1.3;
  margin-bottom: 12px;
}

.featured-article-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.94rem;
  line-height: 1.65;
  color: #64748b;
  margin-bottom: 0;
}

/* Right Stacked 3 Small Cards Column */
.featured-cards-stacked-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
}

.featured-small-card-row {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #ffffff;
  border-radius: 20px;
  padding: 16px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  cursor: pointer;
}

.featured-small-card-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
  border-color: #38bdf8;
}

.small-card-thumb {
  position: relative;
  width: 140px;
  height: 115px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.small-card-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  color: #ffffff;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.small-card-tag.badge-teal {
  background: #0f766e;
}

.small-card-tag.badge-blue {
  background: #0284c7;
}

.small-card-tag.badge-orange {
  background: #ea580c;
}

.small-card-tag.badge-green {
  background: #16a34a;
}

.small-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.featured-small-card-row:hover .small-thumb-img {
  transform: scale(1.08);
}

.small-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.small-card-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0b1e36;
  line-height: 1.35;
  margin-bottom: 6px;
}

.small-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.48;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-small-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: #0075ff;
  text-decoration: none;
  transition: gap 0.3s ease;
}

.btn-small-card-link:hover {
  gap: 10px;
  color: #0056cc;
}

/* Bottom Carousel Navigation Bar (Exact Match with Reference Image) */
.featured-bottom-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 40px;
}

.carousel-arrow-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1.5px solid #0284c7;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-arrow-btn.prev {
  background: #ffffff;
  color: #0284c7;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.14);
}

.carousel-arrow-btn.prev:hover {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  border-color: #0284c7;
  transform: scale(1.08);
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.35);
}

.carousel-arrow-btn.next {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.32);
}

.carousel-arrow-btn.next:hover {
  background: linear-gradient(135deg, #0070f3, #1d4ed8);
  border-color: #0070f3;
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(0, 112, 243, 0.42);
}

.carousel-dots-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carousel-dots-group .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.carousel-dots-group .dot.active {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  width: 20px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35);
}


/* 4. IMPACT COUNTER BANNER (DARK FLOATING BENTO SHOWCASE CARD ON WHITE BACKGROUND) */
.knowledge-impact-counter-sec {
  position: relative;
  padding: 75px 0;
  background: #ffffff;
  overflow: hidden;
}

.impact-bento-master-card {
  position: relative;
  background: linear-gradient(135deg, #05142b 0%, #08244d 50%, #03142e 100%);
  border-radius: 32px;
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 30px 70px rgba(5, 20, 43, 0.22), 0 0 40px rgba(0, 117, 255, 0.15);
  padding: 52px 56px;
  overflow: hidden;
  color: #ffffff;
}

.impact-card-bg-artwork {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.impact-card-bg-artwork svg {
  width: 100%;
  height: 100%;
}

.impact-bento-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 45px;
  align-items: center;
}

.impact-left-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.impact-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  margin-bottom: 16px;
}

.badge-blue-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.impact-sub-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.impact-main-heading {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.7rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 14px;
}

.impact-main-heading .highlight-blue-gradient {
  background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.impact-main-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.96rem;
  color: #94a3b8;
  line-height: 1.65;
  margin-bottom: 24px;
}

.impact-trust-pills-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.impact-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.impact-trust-item i {
  color: #38bdf8;
  font-size: 0.95rem;
}

/* Right 4 Bento Stat Cards Grid */
.impact-right-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.impact-bento-stat-card {
  border-radius: 24px;
  padding: 24px 22px;
  border: 1.5px solid transparent;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
}

.impact-bento-stat-card.card-blue {
  background: linear-gradient(135deg, rgba(0, 117, 255, 0.18), rgba(0, 117, 255, 0.08));
  border-color: rgba(0, 117, 255, 0.35);
}

.impact-bento-stat-card.card-green {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.18), rgba(22, 163, 74, 0.08));
  border-color: rgba(22, 163, 74, 0.35);
}

.impact-bento-stat-card.card-sky {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.18), rgba(2, 132, 199, 0.08));
  border-color: rgba(2, 132, 199, 0.35);
}

.impact-bento-stat-card.card-amber {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.18), rgba(217, 119, 6, 0.08));
  border-color: rgba(217, 119, 6, 0.35);
}

.impact-bento-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 117, 255, 0.3);
  border-color: #38bdf8;
}

.bento-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.bento-icon-number-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bento-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.2rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.35s ease;
  flex-shrink: 0;
}

.impact-bento-stat-card:hover .bento-icon-circle {
  transform: scale(1.08) rotate(4deg);
}

.bento-icon-circle.icon-blue {
  background: linear-gradient(135deg, #0075ff, #0056cc);
  box-shadow: 0 6px 16px rgba(0, 117, 255, 0.4);
}

.bento-icon-circle.icon-green {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.4);
}

.bento-icon-circle.icon-sky {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.4);
}

.bento-icon-circle.icon-amber {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4);
}

.bento-card-trend {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trend-blue {
  background: rgba(0, 117, 255, 0.25);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.trend-green {
  background: rgba(22, 163, 74, 0.25);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.trend-sky {
  background: rgba(2, 132, 199, 0.25);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.trend-amber {
  background: rgba(217, 119, 6, 0.25);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.bento-card-number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0;
}

.bento-card-number.text-blue {
  color: #60a5fa;
}

.bento-card-number.text-green {
  color: #4ade80;
}

.bento-card-number.text-sky {
  color: #38bdf8;
}

.bento-card-number.text-amber {
  color: #fbbf24;
}

.bento-card-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}

.bento-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.4;
}

/* 5. BROWSE ARTICLES BY CATEGORY (PURE CRISP WHITE SECTION) */
.knowledge-categories-grid-sec {
  padding: 85px 0 95px 0;
  background: #ffffff;
  position: relative;
}

.knowledge-cat-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 50px;
}

.cat-bento-card-item {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* Category Specific Colored Accent Borders & Shadows */
.cat-bento-card-item.bento-border-blue {
  border: 1.5px solid #bfdbfe;
}

.cat-bento-card-item.bento-border-green {
  border: 1.5px solid #bbf7d0;
}

.cat-bento-card-item.bento-border-sky {
  border: 1.5px solid #bae6fd;
}

.cat-bento-card-item.bento-border-amber {
  border: 1.5px solid #fde68a;
}

.cat-bento-card-item.bento-border-purple {
  border: 1.5px solid #e9d5ff;
}

.cat-bento-card-item.bento-border-cyan {
  border: 1.5px solid #a5f3fc;
}

.cat-bento-card-item.bento-border-blue:hover {
  border-color: #0075ff;
  box-shadow: 0 20px 45px rgba(0, 117, 255, 0.18);
  transform: translateY(-8px);
}

.cat-bento-card-item.bento-border-green:hover {
  border-color: #16a34a;
  box-shadow: 0 20px 45px rgba(22, 163, 74, 0.18);
  transform: translateY(-8px);
}

.cat-bento-card-item.bento-border-sky:hover {
  border-color: #0284c7;
  box-shadow: 0 20px 45px rgba(2, 132, 199, 0.18);
  transform: translateY(-8px);
}

.cat-bento-card-item.bento-border-amber:hover {
  border-color: #d97706;
  box-shadow: 0 20px 45px rgba(217, 119, 6, 0.18);
  transform: translateY(-8px);
}

.cat-bento-card-item.bento-border-purple:hover {
  border-color: #7c3aed;
  box-shadow: 0 20px 45px rgba(124, 58, 237, 0.18);
  transform: translateY(-8px);
}

.cat-bento-card-item.bento-border-cyan:hover {
  border-color: #0891b2;
  box-shadow: 0 20px 45px rgba(8, 145, 178, 0.18);
  transform: translateY(-8px);
}

/* Action Button Color Customizations */
.cat-bento-action-circle.action-blue {
  background: #0075ff;
  box-shadow: 0 6px 18px rgba(0, 117, 255, 0.3);
}

.cat-bento-action-circle.action-green {
  background: #16a34a;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.3);
}

.cat-bento-action-circle.action-sky {
  background: #0284c7;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3);
}

.cat-bento-action-circle.action-amber {
  background: #d97706;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.3);
}

.cat-bento-action-circle.action-purple {
  background: #7c3aed;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.3);
}

.cat-bento-action-circle.action-cyan {
  background: #0891b2;
  box-shadow: 0 6px 18px rgba(8, 145, 178, 0.3);
}

.cat-bento-media {
  position: relative;
  height: 210px;
  overflow: hidden;
}

.bento-count-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bento-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.cat-bento-card-item:hover .bento-media-img {
  transform: scale(1.08);
}

.cat-bento-footer {
  padding: 26px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex: 1;
  background: #ffffff;
}

.cat-mini-tag {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.cat-mini-tag.text-blue {
  color: #0075ff;
}

.cat-mini-tag.text-green {
  color: #16a34a;
}

.cat-mini-tag.text-sky {
  color: #0284c7;
}

.cat-mini-tag.text-amber {
  color: #d97706;
}

.cat-mini-tag.text-purple {
  color: #7c3aed;
}

.cat-mini-tag.text-cyan {
  color: #0891b2;
}

.cat-bento-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b1e36;
  line-height: 1.3;
  margin-bottom: 8px;
}

.cat-bento-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.55;
}

.cat-bento-action-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0075ff;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 117, 255, 0.3);
  text-decoration: none;
  transition: all 0.35s ease;
}

.cat-bento-card-item:hover .cat-bento-action-circle {
  background: #0056cc;
  transform: scale(1.08) rotate(-45deg);
  box-shadow: 0 8px 22px rgba(0, 117, 255, 0.45);
}

/* MATCHING LUXURY CTA BANNER INSIDE CATEGORIES */
.cat-bento-cta-banner {
  position: relative;
  background: linear-gradient(135deg, #0075ff 0%, #0052cc 50%, #003db3 100%);
  border-radius: 28px;
  padding: 42px 48px;
  color: #ffffff;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 50px rgba(0, 117, 255, 0.25);
}

.cta-banner-bg-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner-inner-grid {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cta-banner-text-content {
  max-width: 680px;
}

.cta-banner-heading {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.1rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 10px;
}

.cta-banner-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.cta-banner-actions-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.btn-cta-primary-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: #0075ff;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: all 0.35s ease;
}

.btn-cta-primary-pill:hover {
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.btn-cta-secondary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.35s ease;
}

.btn-cta-secondary-pill:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

/* 6. POPULAR RESOURCES GRID (PALE SLATE BACKGROUND FOR CONTRAST) */
.knowledge-popular-sec {
  padding: 90px 0 100px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.knowledge-popular-4col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.popular-card-item {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
}

.popular-card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.popular-media-box {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.popular-tag-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  color: #ffffff;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.popular-tag-badge.badge-blue {
  background: #2563eb;
}

.popular-tag-badge.badge-sky {
  background: #0284c7;
}

.popular-tag-badge.badge-amber {
  background: #d97706;
}

.popular-tag-badge.badge-purple {
  background: #7c3aed;
}

.popular-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.popular-card-item:hover .popular-img {
  transform: scale(1.05);
}

.popular-content-box {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.popular-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 12px;
}

/* 7. SUBSCRIBE NEWSLETTER BANNER (SAPPHIRE DARK GRADIENT) */
.knowledge-subscribe-sec {
  padding: 75px 0 95px 0;
  background: #ffffff;
}

.subscribe-banner-card {
  background: linear-gradient(135deg, #071e3d 0%, #0d3870 50%, #1d4ed8 100%);
  border-radius: 28px;
  padding: 48px 52px;
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: 40px;
  align-items: center;
  border: 1.5px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 25px 60px rgba(0, 80, 200, 0.2);
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.subscribe-left-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.subscribe-sprout-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.subscribe-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 10px;
}

.subscribe-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  color: #cbd5e1;
  margin-bottom: 28px;
}

.knowledge-popular-4col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.popular-card-item {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
}

.popular-card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.popular-media-box {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.popular-tag-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  color: #ffffff;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.popular-tag-badge.badge-blue {
  background: #2563eb;
}

.popular-tag-badge.badge-sky {
  background: #0284c7;
}

.popular-tag-badge.badge-amber {
  background: #d97706;
}

.popular-tag-badge.badge-purple {
  background: #7c3aed;
}

.popular-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.popular-card-item:hover .popular-img {
  transform: scale(1.05);
}

.popular-content-box {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.popular-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 12px;
}

/* 7. SUBSCRIBE NEWSLETTER BANNER */
.knowledge-subscribe-sec {
  padding: 50px 0 90px 0;
  background: #ffffff;
}

.subscribe-banner-card {
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 50%, #eff6ff 100%);
  border-radius: 28px;
  padding: 45px 50px;
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: 40px;
  align-items: center;
  border: 1px solid #bfdbfe;
  box-shadow: 0 20px 45px rgba(37, 99, 235, 0.1);
  position: relative;
  overflow: hidden;
}

.subscribe-left-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.subscribe-sprout-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
}

.subscribe-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 10px;
}

.subscribe-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  color: #475569;
  margin-bottom: 28px;
}

.subscribe-input-form {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 8px 6px 24px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  max-width: 540px;
}

.subscribe-email-pill {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 0.94rem;
  color: #0f172a;
}

.btn-subscribe-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #2563eb;
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
  transition: all 0.3s ease;
}

.btn-subscribe-pill:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

/* 6. SUSTAINABLE WATER SOLUTIONS CTA BANNER (FLOATING CARD WITH WHITE GAP BEFORE FOOTER) */
.knowledge-cta-rock-stream-sec {
  position: relative;
  padding: 60px 0 95px 0;
  /* Substantial bottom padding creates a crisp white gap before dark footer */
  background: #ffffff;
  /* Clean white background isolates dark CTA card from dark footer */
}

.cta-banner-floating-wrapper {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 25px 65px rgba(5, 20, 43, 0.22);
  border: 1.5px solid rgba(56, 189, 248, 0.3);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-rock-stream-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.42) contrast(1.15);
}

.cta-rock-stream-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 18, 36, 0.75) 0%, rgba(6, 26, 48, 0.85) 100%);
  z-index: 2;
}

.relative-z2 {
  position: relative;
  z-index: 5;
  width: 100%;
}

.cta-glass-floating-card {
  background: rgba(12, 42, 68, 0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(56, 189, 248, 0.22);
  border-radius: 24px;
  padding: 44px 52px;
  width: 100%;
}

.cta-glass-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cta-left-text-block {
  max-width: 940px;
}

.cta-sub-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.badge-dash {
  color: #38bdf8;
  font-weight: 800;
}

.badge-sub-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.cta-card-heading {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.35rem, 1.95vw, 2.15rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 12px;
}

.cta-card-subtext {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.82rem, 0.92vw, 0.94rem);
  color: #cbd5e1;
  line-height: 1.6;
}

@media (min-width: 1025px) {

  .cta-card-heading,
  .cta-card-subtext {
    white-space: nowrap;
  }
}

.cta-right-btn-block {
  flex-shrink: 0;
}

.btn-white-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: #0b1e36;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 0.96rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.35s ease;
}

.btn-white-contact-pill:hover {
  background: #f0f7ff;
  color: #0075ff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 117, 255, 0.35);
}

/* RESPONSIVE STYLES FOR KNOWLEDGE CENTER */
@media (max-width: 1024px) {
  .knowledge-hero-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-category-filter-bar {
    grid-template-columns: repeat(3, 1fr);
  }

  .knowledge-featured-grid {
    grid-template-columns: 1fr;
  }

  .impact-counter-inner-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .impact-stats-4col-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .knowledge-cat-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-glass-card-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .cta-glass-floating-card {
    padding: 36px 28px;
  }
}

@media (max-width: 640px) {
  .knowledge-category-filter-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .impact-stats-4col-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-cat-bento-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   KNOWLEDGE CENTER: MULTI-DIRECTIONAL SCROLL ENTRANCE ANIMATIONS
   ========================================================================== */
.kn-anim-init {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Multi-directional Offsets */
.kn-anim-left {
  transform: translateX(-65px);
}

.kn-anim-right {
  transform: translateX(65px);
}

.kn-anim-top {
  transform: translateY(-45px);
}

.kn-anim-bottom {
  transform: translateY(45px);
}

.kn-anim-scale {
  transform: scale(0.92) translateY(30px);
}

/* Revealed Active State */
.kn-anim-init.kn-anim-visible {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* Progressive Stagger Delays */
.kn-stagger-1 {
  transition-delay: 0.08s;
}

.kn-stagger-2 {
  transition-delay: 0.16s;
}

.kn-stagger-3 {
  transition-delay: 0.24s;
}

.kn-stagger-4 {
  transition-delay: 0.32s;
}

.kn-stagger-5 {
  transition-delay: 0.40s;
}

.kn-stagger-6 {
  transition-delay: 0.48s;
}

/* ==========================================================================
   SERVICE DETAIL PAGE STYLES (LUXURY BENTO & SIDEBAR LAYOUT)
   ========================================================================== */
.service-detail-section {
  padding: 80px 0 110px 0;
  background: #f8fafc;
  background-image: radial-gradient(circle at 10% 10%, rgba(56, 189, 248, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(2, 132, 199, 0.05) 0%, transparent 45%);
}

.service-detail-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

.service-detail-fullwidth,
.service-detail-grid {
  display: block;
  width: 100%;
}

/* Sidebar Styling */
.service-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.service-menu-widget {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.widget-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
}

.service-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 14px;
  background: #f8fafc;
  color: #334155;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
}

.service-menu-link i.service-icon {
  font-size: 1.1rem;
  margin-right: 12px;
  color: #0284c7;
  width: 24px;
  text-align: center;
}

.service-menu-link i.arrow-icon {
  font-size: 0.82rem;
  color: #94a3b8;
  transition: transform 0.3s ease, color 0.3s ease;
}

.service-menu-link:hover,
.service-menu-link.active {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #ffffff;
  border-color: #2563eb;
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.service-menu-link:hover i,
.service-menu-link.active i {
  color: #ffffff;
}

.service-menu-link:hover i.arrow-icon,
.service-menu-link.active i.arrow-icon {
  transform: translateX(4px);
}

/* Sidebar Callout Widget */
.service-contact-widget {
  background: linear-gradient(145deg, #0b1e36 0%, #0369a1 100%);
  border-radius: 24px;
  padding: 30px 26px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(11, 30, 54, 0.25);
}

.service-contact-widget::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.15);
  pointer-events: none;
}

.contact-widget-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #38bdf8;
  margin-bottom: 20px;
}

.contact-widget-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
}

.contact-widget-text {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 22px;
}

.btn-sidebar-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: #ffffff;
  color: #0369a1;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-sidebar-call:hover {
  background: #38bdf8;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Sidebar Download Brochure Widget */
.service-download-widget {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-download-widget:hover {
  border-color: #38bdf8;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(14, 116, 144, 0.12);
}

.download-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #e0f2fe;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.download-info h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.download-info p {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

/* Main Content Area */
.service-content-body {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* 1. TOP FLOATING FEATURES PILL BAR (EXACT MOCKUP MATCH) */
.service-top-features-bar {
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 32px;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.top-feat-icon.icon-blue {
  background: linear-gradient(135deg, #0075ff 0%, #0284c7 100%);
}

.top-feat-icon.icon-green {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}

.top-feat-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
}

.top-feat-divider {
  width: 1px;
  height: 38px;
  background: #e2e8f0;
}

/* 2. OVERVIEW 2-COLUMN LUXURY CARD (EXACT MOCKUP MATCH) */
.service-overview-card-wrapper {
  background: #ffffff;
  border-radius: 28px;
  padding: 40px 36px;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
}

.service-overview-2col-layout {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 38px;
  align-items: center;
}

/* Left Media Column: Fluid Wave & Floating Card */
.service-overview-left-media {
  position: relative;
  width: 100%;
}

.fluid-backdrop-shape {
  position: absolute;
  top: -14px;
  left: -16px;
  width: calc(100% + 32px);
  height: calc(100% + 28px);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.35) 0%, rgba(37, 99, 235, 0.75) 100%);
  border-radius: 42% 58% 65% 35% / 45% 42% 58% 55%;
  z-index: 1;
  filter: blur(3px);
}

.showcase-img-container {
  position: relative;
  z-index: 2;
  border-radius: 32px 75px 32px 32px;
  overflow: hidden;
  height: 390px;
  width: 100%;
  box-shadow: 0 20px 45px rgba(11, 30, 54, 0.18);
  border: 2px solid #ffffff;
}

.showcase-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.showcase-floating-white-card {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 5;
  background: #ffffff;
  border-radius: 20px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
  max-width: 310px;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.floating-icon-box {
  width: 48px;
  height: 48px;
  background: #0b223d;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.floating-card-info {
  flex: 1;
}

.floating-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  color: #0f172a;
  line-height: 1.3;
  display: block;
}

.floating-card-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Right Overview Content */
.service-overview-right-content {
  display: flex;
  flex-direction: column;
}

.overview-sub-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.overview-sub-badge .badge-dash {
  color: #2563eb;
  font-weight: 800;
}

.overview-sub-badge .badge-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.service-overview-heading {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.15rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 14px;
  line-height: 1.2;
}

.service-overview-heading span {
  color: #0f172a;
}

.overview-bottom-3cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.overview-feat-card {
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 18px;
  padding: 16px 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.03);
  transition: all 0.3s ease;
}

.overview-feat-card:hover {
  transform: translateY(-3px);
  border-color: #38bdf8;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.feat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #ffffff;
  margin-bottom: 12px;
}

.feat-card-icon.icon-bg-blue {
  background: linear-gradient(135deg, #0075ff 0%, #0284c7 100%);
}

.feat-card-icon.icon-bg-green {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.feat-card-icon.icon-bg-orange {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.feat-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  color: #0f172a;
  margin-bottom: 4px;
  line-height: 1.25;
}

.feat-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.38;
  margin: 0;
}

.service-section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 16px;
  line-height: 1.25;
}

.service-section-title span {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service-para {
  font-size: 1.02rem;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 24px;
}

/* Service Highlights Grid */
.service-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.highlight-stat-card {
  background: linear-gradient(145deg, #f8fafc 0%, #edf6ff 100%);
  border-radius: 20px;
  padding: 22px 18px;
  text-align: center;
  border: 1px solid #dbeafe;
  transition: transform 0.3s ease;
}

.highlight-stat-card:hover {
  transform: translateY(-4px);
}

.stat-val {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2rem;
  font-weight: 800;
  color: #0284c7;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-lbl {
  font-size: 0.84rem;
  font-weight: 600;
  color: #64748b;
}

/* Bento Features Grid */
.service-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.service-bento-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 30px 24px;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
  border-color: #bae6fd;
}

.bento-icon-bubble {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.service-bento-card.card-green .bento-icon-bubble {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25);
}

.service-bento-card.card-amber .bento-icon-bubble {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.25);
}

.service-bento-card.card-purple .bento-icon-bubble {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25);
}

.bento-card-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.bento-card-desc {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.65;
}

/* Process Steps Grid */
.service-process-wrapper {
  background: #ffffff;
  border-radius: 28px;
  padding: 36px 32px;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
}

.process-steps-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.process-step-item {
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: none;
  position: relative;
  transition: all 0.3s ease;
}

.process-step-item:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.step-num-pill {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0284c7;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.step-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.step-desc {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.5;
}

/* Spec Table Styling */
.service-spec-wrapper {
  background: #ffffff;
  border-radius: 28px;
  padding: 36px 32px;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
}

.service-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 22px;
}

.service-spec-table th,
.service-spec-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.92rem;
}

.service-spec-table th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.service-spec-table td:first-child {
  font-weight: 700;
  color: #0284c7;
  width: 35%;
}

.service-spec-table td:last-child {
  color: #475569;
}

/* Service FAQs */
.service-faq-wrapper {
  background: #ffffff;
  border-radius: 28px;
  padding: 36px 32px;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
}

@media (max-width: 1024px) {
  .service-overview-2col-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .service-top-features-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .top-feat-divider {
    display: none;
  }
}

@media (max-width: 640px) {
  .service-bento-grid {
    grid-template-columns: 1fr;
  }

  .service-highlights-grid {
    grid-template-columns: 1fr;
  }

  .process-steps-4col {
    grid-template-columns: 1fr;
  }

  .service-main-showcase-frame {
    height: 280px;
  }

  .overview-bottom-3cards-grid {
    grid-template-columns: 1fr;
  }

  .service-top-features-bar {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   COMPLETE SERVICE DETAIL REDESIGN (8 SECTIONS TEMPLATE)
   ========================================================================== */

.service-detail-section {
  padding: 60px 0 100px 0;
  background: #f8fafc;
  background-image: radial-gradient(circle at 12% 12%, rgba(56, 189, 248, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 88% 88%, rgba(2, 132, 199, 0.04) 0%, transparent 45%);
}

.service-detail-container {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* SECTION HEADERS & BADGES */
.sd-sec-header {
  margin-bottom: 36px;
}

.sd-sec-header.text-center {
  text-align: center;
}

.sd-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: fit-content;
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(37, 99, 235, 0.12) 100%);
  border: 1px solid rgba(2, 132, 199, 0.22);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
}

.sd-badge-row.center {
  justify-content: center;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

.sd-badge-dash {
  color: #0284c7;
  font-weight: 800;
  display: none;
}

.sd-badge-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0284c7;
  box-shadow: 0 0 10px #0284c7;
  display: inline-block;
  flex-shrink: 0;
  animation: sdPulseGlow 2s infinite ease-in-out;
}

@keyframes sdPulseGlow {

  0%,
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7);
  }

  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(2, 132, 199, 0);
  }
}

.sd-badge-text {
  font-family: var(--font-heading) !important;
  font-size: 0.8rem;
  font-weight: 800;
  color: #0284c7;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.sd-badge-icon-sm {
  color: #0284c7;
  font-size: 0.85rem;
}

.sd-section-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.1rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #0b192c;
  line-height: 1.22;
  letter-spacing: -0.6px;
  margin: 0 0 18px 0;
}

.sd-section-title span {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 900;
}

/* 1. SECTION 1: SERVICE OVERVIEW (PURE WHITE CARD) */
.sd-overview-sec {
  background: #ffffff;
  border-radius: 30px;
  padding: 52px 48px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 20px 50px rgba(11, 30, 54, 0.07);
  position: relative;
  overflow: hidden;
}

.sd-overview-sec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 50%, #2563eb 100%);
}

.sd-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 52px;
  align-items: center;
}

.sd-overview-media {
  position: relative;
  width: 100%;
}

.sd-media-shape-bg {
  position: absolute;
  top: -16px;
  left: -18px;
  width: calc(100% + 36px);
  height: calc(100% + 32px);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(37, 99, 235, 0.7) 100%);
  border-radius: 40% 60% 65% 35% / 45% 40% 60% 55%;
  z-index: 1;
  filter: blur(4px);
}

.sd-media-frame {
  position: relative;
  z-index: 2;
  border-radius: 36px 85px 36px 36px;
  overflow: hidden;
  height: 440px;
  width: 100%;
  box-shadow: 0 24px 55px rgba(11, 30, 54, 0.18);
  border: 2.5px solid #ffffff;
  background: #ffffff;
}

.sd-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sd-floating-badge {
  position: absolute;
  bottom: 22px;
  left: 22px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
}

.sd-badge-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0b223d 0%, #0369a1 100%);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(3, 105, 161, 0.25);
}

.sd-badge-title {
  font-family: var(--font-heading) !important;
  font-weight: 800;
  font-size: 0.9rem;
  color: #0f172a;
  display: block;
  line-height: 1.25;
}

.sd-badge-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #64748b;
  display: block;
}

.sd-overview-content {
  display: flex;
  flex-direction: column;
}

.sd-para-lead {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.75;
  color: #1e293b;
  margin-top: 6px;
  margin-bottom: 16px;
  font-weight: 500;
  position: relative;
  padding-left: 18px;
  border-left: 3.5px solid #0284c7;
  background: linear-gradient(90deg, rgba(240, 249, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
  padding: 14px 18px;
  border-radius: 0 14px 14px 0;
}

.sd-para-body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.72;
  color: #475569;
  margin-bottom: 26px;
}

.sd-compact-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.sd-highlight-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
  border: 1.5px solid rgba(14, 165, 233, 0.18);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.sd-highlight-chip:hover {
  border-color: #38bdf8;
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.16);
}

.sd-chip-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
  transition: transform 0.3s ease;
}

.sd-highlight-chip:hover .sd-chip-icon-box {
  transform: scale(1.12) rotate(6deg);
}

.sd-highlight-chip i.fa-circle-check {
  color: #ffffff;
  font-size: 0.82rem;
}

.sd-highlight-chip span {
  font-family: var(--font-heading) !important;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

/* 2. SECTION 2: WHY THIS SERVICE MATTERS (KEY BENEFITS REDESIGN) */
.sd-why-matters-sec {
  background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 50%, #f0f7ff 100%);
  border-radius: 32px;
  padding: 56px 44px;
  border: 1.5px solid rgba(186, 230, 253, 0.6);
  box-shadow: 0 24px 60px rgba(11, 30, 54, 0.05);
  position: relative;
  overflow: hidden;
}

.sd-why-matters-sec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #38bdf8 50%, transparent 100%);
}

.sd-benefits-horizontal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sd-benefit-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 30px 26px 24px 26px;
  border: 1.5px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sd-benefit-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 50px rgba(2, 132, 199, 0.14);
  border-color: #7dd3fc;
  background: #ffffff;
}

.sd-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 18px;
}

.sd-benefit-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  transition: transform 0.35s ease;
}

.sd-benefit-card:hover .sd-benefit-icon {
  transform: scale(1.1) rotate(4deg);
}

.sd-benefit-icon.icon-blue {
  background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.28);
}

.sd-benefit-icon.icon-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
  box-shadow: 0 8px 20px rgba(6, 182, 212, 0.28);
}

.sd-benefit-icon.icon-green {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.28);
}

.sd-benefit-icon.icon-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.28);
}

.sd-benefit-icon.icon-amber {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.28);
}

.sd-card-num-badge {
  font-family: var(--font-heading) !important;
  font-size: 0.92rem;
  font-weight: 800;
  color: #94a3b8;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.sd-benefit-card:hover .sd-card-num-badge {
  color: #0284c7;
  background: #e0f2fe;
  border-color: #7dd3fc;
}

.sd-benefit-title {
  font-family: var(--font-heading) !important;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
  line-height: 1.35;
  letter-spacing: -0.2px;
}

.sd-benefit-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.65;
  margin: 0 0 20px 0;
  flex: 1;
}

.sd-card-bottom-line {
  height: 3px;
  width: 36px;
  border-radius: 999px;
  transition: width 0.35s ease;
}

.sd-benefit-card:hover .sd-card-bottom-line {
  width: 100%;
}

.bar-blue {
  background: linear-gradient(90deg, #0284c7, #2563eb);
}

.bar-cyan {
  background: linear-gradient(90deg, #06b6d4, #0284c7);
}

.bar-green {
  background: linear-gradient(90deg, #10b981, #059669);
}

.bar-purple {
  background: linear-gradient(90deg, #8b5cf6, #6d28d9);
}

.bar-amber {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

/* 3. SECTION 3: OUR METHODOLOGY (EXECUTION WORKFLOW REDESIGN) */
.sd-methodology-sec {
  background: linear-gradient(180deg, #f0f7ff 0%, #e6f2fd 45%, #f4faff 100%);
  border-radius: 32px;
  padding: 60px 36px 64px 36px;
  border: 1.5px solid rgba(186, 230, 253, 0.8);
  box-shadow: 0 20px 50px rgba(11, 30, 54, 0.05);
  position: relative;
  overflow: visible;
}

.sd-methodology-sec .sd-sec-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
}

.sd-methodology-sec .sd-badge-row {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sd-methodology-sec .sd-section-title {
  text-align: center !important;
}

.sd-methodology-sec::before {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 24px;
  right: 24px;
  height: 5px;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 25%, #8b5cf6 50%, #ec4899 75%, #10b981 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  box-shadow: 0 2px 14px rgba(56, 189, 248, 0.45), 0 0 22px rgba(139, 92, 246, 0.3);
  animation: lineShimmerGlow 6s ease-in-out infinite alternate;
  z-index: 3;
}

@keyframes lineShimmerGlow {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 2px 14px rgba(56, 189, 248, 0.45), 0 0 22px rgba(139, 92, 246, 0.3);
  }

  100% {
    background-position: 100% 50%;
    box-shadow: 0 2px 18px rgba(236, 72, 153, 0.5), 0 0 28px rgba(16, 185, 129, 0.35);
  }
}

.process-cards-5row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
  align-items: stretch;
  margin-top: 50px;
}

.process-cards-5row .step-image-bubble {
  width: 106px;
  height: 106px;
}

.process-cards-5row .step-connect-arrow {
  top: 36px;
  right: -20px;
  width: 40px;
}

.process-cards-5row .step-card-card {
  margin-top: -48px;
  padding: 60px 12px 14px 12px;
  min-height: 175px;
}

.process-cards-5row .step-title-text {
  font-size: 1.02rem;
  line-height: 1.28;
  margin-top: 2px;
  margin-bottom: 6px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-cards-5row .step-desc-text {
  font-size: 0.81rem;
  line-height: 1.40;
  margin-bottom: 8px;
  min-height: 50px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

@media (max-width: 1400px) {
  .process-cards-5row {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 55px;
    column-gap: 24px;
  }
}

@media (max-width: 860px) {
  .process-cards-5row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 55px;
    column-gap: 20px;
  }
}

@media (max-width: 580px) {
  .process-cards-5row {
    grid-template-columns: 1fr;
    row-gap: 65px;
  }
}

.sd-process-timeline-wrap {
  position: relative;
  margin-top: 36px;
}

.sd-timeline-flowing-line {
  position: absolute;
  top: 32px;
  left: 8%;
  right: 8%;
  height: 4px;
  background: linear-gradient(90deg, #0284c7 0%, #06b6d4 25%, #8b5cf6 60%, #10b981 85%, #f59e0b 100%);
  z-index: 1;
  border-radius: 999px;
  opacity: 0.85;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.sd-process-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}

.sd-process-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

.sd-step-num-bubble {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #0284c7;
  color: #0284c7;
  font-family: var(--font-heading) !important;
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.18);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 3;
}

.sd-step-num-bubble.step-theme-blue {
  border-color: #0284c7;
  color: #0284c7;
}

.sd-step-num-bubble.step-theme-cyan {
  border-color: #06b6d4;
  color: #06b6d4;
}

.sd-step-num-bubble.step-theme-purple {
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.sd-step-num-bubble.step-theme-green {
  border-color: #10b981;
  color: #10b981;
}

.sd-step-num-bubble.step-theme-amber {
  border-color: #f59e0b;
  color: #f59e0b;
}

.sd-process-step-item:hover .sd-step-num-bubble.step-theme-blue {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.35);
}

.sd-process-step-item:hover .sd-step-num-bubble.step-theme-cyan {
  background: linear-gradient(135deg, #06b6d4, #0284c7);
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 12px 28px rgba(6, 182, 212, 0.35);
}

.sd-process-step-item:hover .sd-step-num-bubble.step-theme-purple {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 12px 28px rgba(139, 92, 246, 0.35);
}

.sd-process-step-item:hover .sd-step-num-bubble.step-theme-green {
  background: linear-gradient(135deg, #10b981, #047857);
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.35);
}

.sd-process-step-item:hover .sd-step-num-bubble.step-theme-amber {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.35);
}

.sd-step-card {
  background: #ffffff;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  border-radius: 22px;
  padding: 24px 18px 20px 18px;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
  transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.sd-step-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.sd-step-mini-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f0f7ff;
  border: 1px solid #e0f2fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #0284c7;
  margin-bottom: 12px;
  margin-top: 4px;
  transition: all 0.35s ease;
  flex-shrink: 0;
}

.sd-process-step-item:hover .sd-step-mini-icon {
  transform: scale(1.12);
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.3);
}

.sd-process-step-item:hover .sd-step-card {
  transform: translateY(-8px);
  background: #ffffff;
  border-color: #7dd3fc;
  box-shadow: 0 20px 45px rgba(2, 132, 199, 0.16);
}

.sd-step-title {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.35;
  letter-spacing: -0.3px;
}

.sd-step-desc {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 16px 0;
  flex: 1;
}

.sd-step-accent-line {
  height: 3.5px;
  width: 34px;
  border-radius: 999px;
  margin: 0 auto;
  transition: width 0.35s ease;
}

.sd-process-step-item:hover .sd-step-accent-line {
  width: 100%;
}

/* 4. SECTION 4: TECHNICAL CAPABILITIES (DARK ROYAL NAVY CENTERPIECE) */
.sd-tech-specs-sec {
  background: linear-gradient(135deg, #071527 0%, #0b1e36 60%, #0d2746 100%);
  border-radius: 32px;
  padding: 56px 48px;
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 25px 60px rgba(11, 30, 54, 0.35);
  position: relative;
  overflow: hidden;
}

.sd-tech-specs-sec::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.sd-tech-specs-sec .sd-badge-row {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
}

.sd-tech-specs-sec .sd-badge-text,
.sd-tech-specs-sec .sd-badge-icon-sm {
  color: #38bdf8;
}

.sd-tech-specs-sec .sd-section-title {
  color: #ffffff;
}

.sd-tech-specs-sec .sd-section-title span {
  background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sd-tech-specs-sec .sd-para-body {
  color: #cbd5e1;
}

.sd-tech-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

.sd-tech-left {
  display: flex;
  flex-direction: column;
}

.sd-tech-rows-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.sd-tech-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sd-tech-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sd-tech-value {
  font-family: 'Inter', sans-serif;
  font-size: 0.94rem;
  color: #f1f5f9;
  font-weight: 500;
}

.sd-tech-right-visual {
  position: relative;
}

.sd-visual-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 2px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
  background: #061324;
}

.sd-visual-img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
}

.sd-stat-overlays {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 10px;
}

.sd-stat-pill {
  flex: 1;
  background: rgba(11, 30, 54, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  padding: 12px 10px;
  text-align: center;
  color: #ffffff;
}

.sd-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.25rem;
  font-weight: 800;
  color: #38bdf8;
  display: block;
}

.sd-stat-lbl {
  font-size: 0.72rem;
  color: #cbd5e1;
  font-weight: 600;
}

/* 5. SECTION 5: APPLICATION AREAS (LIGHT ICE BLUE TINT) */
.sd-applications-sec {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border-radius: 28px;
  padding: 50px 40px;
  border: 1.5px solid #7dd3fc;
}

.sd-apps-4col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sd-app-card {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sd-app-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
  border-color: #38bdf8;
}

.sd-app-img-wrap {
  position: relative;
  height: 190px;
  overflow: hidden;
}

.sd-app-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.sd-app-card:hover .sd-app-img-wrap img {
  transform: scale(1.08);
}

.sd-app-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.sd-app-card:hover .sd-app-arrow {
  background: #0284c7;
  color: #ffffff;
  transform: translateX(3px);
}

.sd-app-body {
  padding: 18px;
}

.sd-app-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.sd-app-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* 6. SECTION 6: DELIVERABLES (PURE WHITE CARD) */
.sd-deliverables-sec {
  background: #ffffff;
  border-radius: 28px;
  padding: 48px 40px;
  border: 1.5px solid #dbeafe;
  box-shadow: 0 16px 45px rgba(2, 132, 199, 0.05);
}

.sd-deliverables-card {
  background: linear-gradient(145deg, #ffffff 0%, #f0f7ff 100%);
  border-radius: 24px;
  padding: 36px;
  border: 1px solid #dbeafe;
}

.sd-deliverables-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 44px;
  align-items: center;
}

.sd-deliv-badge-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1.5px solid #bae6fd;
  border-radius: 20px;
  padding: 16px 20px;
  margin-top: 22px;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08);
}

.sd-deliv-badge-box i {
  font-size: 2.2rem;
  color: #ef4444;
}

.sd-deliv-badge-box strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  color: #0f172a;
}

.sd-deliv-badge-box span {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
}

.sd-deliv-checklist-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.sd-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.sd-check-item i {
  color: #10b981;
  font-size: 1.05rem;
}

.sd-check-item span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: #1e293b;
}

/* 7. SECTION 7: FREQUENTLY ASKED QUESTIONS (SOFT TINT SLATE) */
.sd-faq-sec {
  background: #f8fafc;
  border-radius: 28px;
  padding: 48px 40px;
  border: 1.5px solid #e2e8f0;
}

.sd-faq-2col-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 32px;
}

.sd-faq-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sd-faq-item {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.sd-faq-item.active {
  background: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
}

.sd-faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
}

.sd-faq-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
}

.sd-faq-toggle-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eff6ff;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.sd-faq-item.active .sd-faq-toggle-icon {
  transform: rotate(45deg);
  background: #0284c7;
  color: #ffffff;
}

.sd-faq-body {
  display: none;
  padding: 0 20px 18px 20px;
  border-top: 1px solid #f1f5f9;
}

.sd-faq-item.active .sd-faq-body {
  display: block;
  margin-top: 6px;
  padding-top: 12px;
}

.sd-faq-body p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.65;
  margin: 0;
}

/* 8. SECTION 8: EXPLORE RELATED SERVICES (PURE WHITE CARD) */
.sd-related-sec {
  background: #ffffff;
  border-radius: 28px;
  padding: 48px 40px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.sd-related-4col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sd-related-card {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.sd-related-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  border-color: #38bdf8;
}

.sd-related-img-box {
  height: 150px;
  overflow: hidden;
}

.sd-related-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.sd-related-card:hover .sd-related-img-box img {
  transform: scale(1.08);
}

.sd-related-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sd-related-info h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.sd-related-info p {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 1;
}

.sd-related-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0284c7;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.sd-related-card:hover .sd-related-link {
  gap: 10px;
  color: #2563eb;
}

/* RESPONSIVE DESIGN RULES */
@media (max-width: 1024px) {

  .sd-overview-grid,
  .sd-tech-specs-grid,
  .sd-deliverables-grid,
  .sd-faq-2col-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sd-benefits-horizontal-grid,
  .sd-apps-4col-grid,
  .sd-related-4col-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sd-process-steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .sd-timeline-flowing-line {
    display: none;
  }
}

@media (max-width: 640px) {
  .service-detail-container {
    gap: 60px;
    padding: 0 20px;
  }

  .sd-benefits-horizontal-grid,
  .sd-apps-4col-grid,
  .sd-related-4col-grid,
  .sd-process-steps-grid,
  .sd-compact-highlights,
  .sd-deliv-checklist-wrap {
    grid-template-columns: 1fr;
  }

  .sd-methodology-sec,
  .sd-tech-specs-sec,
  .sd-deliverables-card,
  .sd-faq-sec {
    padding: 30px 20px;
  }
}


font-size: 0.95rem;
color: rgba(255, 255, 255, 0.6);
font-family: 'Inter',
sans-serif;
margin-bottom: 28px;
}

.gpr-redesign-cta .gpr-redesign-actions {
  justify-content: center;
}


/* ======================================================================
   GPR SECTIONS — RESPONSIVE
   ====================================================================== */

@media (max-width: 960px) {

  .gpr-redesign-overview-grid,
  .gpr-redesign-benefits-grid,
  .gpr-redesign-technical-grid,
  .gpr-redesign-case-grid,
  .gpr-redesign-faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .gpr-redesign-benefit-list {
    grid-template-columns: 1fr 1fr;
  }

  .gpr-workflow-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gpr-redesign-industry-grid,
  .gpr-redesign-related-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Restore the earlier GPR service-detail overview composition. */
body[data-service="gpr-survey"] .gpr-redesign-overview {
  padding: 54px 0 74px;
  background: #f4faff;
}

body[data-service="gpr-survey"] .gpr-redesign-overview-grid {
  display: grid;
  grid-template-columns: minmax(380px, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 62px;
}

body[data-service="gpr-survey"] .gpr-redesign-image-frame {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 8px solid #ffffff;
  border-radius: 22px 54px 22px 22px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(8, 69, 111, 0.18);
}

body[data-service="gpr-survey"] .gpr-redesign-image-frame::before,
body[data-service="gpr-survey"] .gpr-redesign-image-frame::after {
  display: none;
}

body[data-service="gpr-survey"] .gpr-redesign-image-frame img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
}

body[data-service="gpr-survey"] .gpr-redesign-overview-copy h2 {
  margin: 7px 0 13px;
  color: #082b52;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.8px;
}

body[data-service="gpr-survey"] .gpr-redesign-overview-copy p {
  max-width: 680px;
  margin-bottom: 12px;
  color: #5b7087;
  font-size: 0.86rem;
  line-height: 1.65;
}

body[data-service="gpr-survey"] .gpr-redesign-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 23px;
}

body[data-service="gpr-survey"] .gpr-redesign-mini-grid>div {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid #e0edf6;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(13, 84, 128, 0.07);
  color: #163d62;
  font-size: 0.68rem;
  line-height: 1.25;
}

/* Shared reference-style banner for every service detail page. */
.service-detail-banner {
  min-height: 470px;
  background-position: center;
}

.service-detail-banner .dedicated-service-hero-overlay {
  background: linear-gradient(90deg, rgba(3, 27, 57, 0.97) 0%, rgba(4, 49, 87, 0.9) 40%, rgba(2, 42, 76, 0.55) 72%, rgba(2, 19, 39, 0.35) 100%);
}

.service-detail-banner .dedicated-service-hero-inner {
  width: 100%;
  padding-top: 34px;
  padding-bottom: 38px;
}

.service-detail-banner .contact-breadcrumb-wrap {
  width: fit-content;
  margin-bottom: 28px;
  padding: 9px 15px;
  border: 1px solid rgba(19, 180, 255, 0.35);
  border-radius: 999px;
  background: rgba(2, 29, 57, 0.58);
  box-shadow: 0 8px 20px rgba(0, 11, 28, 0.15);
}

.service-detail-banner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  align-items: center;
  gap: clamp(30px, 5vw, 88px);
}

.service-detail-banner-copy {
  position: relative;
  z-index: 2;
  max-width: 790px;
}

.service-detail-banner-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #1ad9f3;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 2px;
}

.service-detail-banner-copy h1 {
  max-width: 780px;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(2.35rem, 4.35vw, 4.55rem);
  line-height: 1.02;
  letter-spacing: -1.6px;
}

.service-detail-banner-copy p {
  max-width: 720px;
  margin: 0;
  color: #e4f5ff;
  font-size: clamp(0.96rem, 1.35vw, 1.1rem);
  line-height: 1.65;
}

.service-detail-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.service-detail-banner-primary,
.service-detail-banner-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 850;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.service-detail-banner-primary {
  color: #fff;
  background: linear-gradient(135deg, #057dff, #0a54de);
  box-shadow: 0 12px 25px rgba(0, 112, 255, 0.3);
}

.service-detail-banner-secondary {
  border: 1px solid rgba(255, 255, 255, 0.64);
  color: #fff;
  background: rgba(5, 37, 68, 0.3);
}

.service-detail-banner-primary:hover,
.service-detail-banner-secondary:hover {
  color: #fff;
  transform: translateY(-2px);
}

.service-detail-banner-secondary:hover {
  border-color: #31d7f1;
  background: rgba(8, 112, 190, 0.55);
}

.service-detail-banner-visual {
  position: relative;
  min-height: 330px;
  overflow: visible;
}

.service-detail-banner-visual>img {
  width: 100%;
  height: 350px;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 24px;
  box-shadow: 0 22px 42px rgba(0, 12, 32, 0.3);
}

.service-detail-banner-features {
  position: absolute;
  top: 18px;
  right: -22px;
  display: grid;
  width: min(220px, 42%);
  padding: 17px 15px;
  border: 1px solid rgba(80, 192, 255, 0.28);
  border-radius: 18px;
  background: rgba(3, 34, 66, 0.91);
  box-shadow: 0 18px 34px rgba(0, 13, 35, 0.32);
  backdrop-filter: blur(12px);
}

.service-detail-banner-features>div {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
}

.service-detail-banner-features>div+div {
  border-top: 1px solid rgba(160, 215, 246, 0.16);
}

.service-detail-banner-features i {
  display: grid;
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #08b9ff, #0966dc);
  box-shadow: 0 6px 15px rgba(0, 147, 255, 0.3);
}

@media (max-width: 1050px) {
  .service-detail-banner-layout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
    gap: 32px;
  }

  .service-detail-banner-copy h1 {
    font-size: clamp(2.25rem, 5vw, 3.7rem);
  }

  .service-detail-banner-features {
    right: -12px;
  }
}

@media (max-width: 760px) {
  .service-detail-banner {
    min-height: 0;
  }

  .service-detail-banner .dedicated-service-hero-inner {
    padding-top: 24px;
    padding-bottom: 38px;
  }

  .service-detail-banner .contact-breadcrumb-wrap {
    margin-bottom: 22px;
  }

  .service-detail-banner-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .service-detail-banner-copy h1 {
    font-size: clamp(2.15rem, 10vw, 3.35rem);
    letter-spacing: -0.8px;
  }

  .service-detail-banner-copy p {
    font-size: 0.94rem;
  }

  .service-detail-banner-visual {
    min-height: 260px;
    padding-right: 20px;
  }

  .service-detail-banner-visual>img {
    height: 270px;
  }

  .service-detail-banner-features {
    top: 12px;
    right: 0;
    width: min(205px, 48%);
    padding: 10px 11px;
  }

  .service-detail-banner-features>div {
    min-height: 56px;
    font-size: 0.67rem;
  }

  .service-detail-banner-features i {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    font-size: 0.7rem;
  }
}

/* The Projects hero now has three metrics, so keep the dock balanced. */
.projects-page-body .hero-stats-bar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 480px) {
  .service-detail-banner-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .service-detail-banner-primary,
  .service-detail-banner-secondary {
    width: 100%;
  }

  .service-detail-banner-visual {
    padding-right: 0;
  }

  .service-detail-banner-features {
    right: 10px;
    width: 45%;
  }
}

/* Generic service overview: polished image-and-content card. */
body[data-service] .dedicated-service-section {
  padding: 76px 0 112px;
  background: linear-gradient(180deg, #f3f9ff 0%, #f8fbff 55%, #ffffff 100%);
}

body[data-service] .dedicated-service-container {
  max-width: 1500px;
}

body[data-service] .dedicated-service-overview {
  position: relative;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  gap: clamp(44px, 5.4vw, 92px);
  margin-bottom: 84px;
  padding: 42px;
  border: 1px solid #d8e8f6;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 65px rgba(16, 65, 105, 0.1);
  overflow: hidden;
}

body[data-service] .dedicated-service-overview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #009fe3 0%, #1976ed 55%, #7655ee 100%);
}

body[data-service] .dedicated-service-image-wrap {
  min-height: 470px;
  border: 8px solid #fff;
  border-radius: 28px 74px 28px 28px;
  box-shadow: 0 22px 42px rgba(11, 61, 101, 0.2);
  isolation: isolate;
}

body[data-service] .dedicated-service-image-wrap::after {
  background: linear-gradient(180deg, rgba(4, 28, 58, 0) 48%, rgba(4, 28, 58, 0.58) 100%);
}

body[data-service] .dedicated-service-image-wrap img {
  transition: transform 0.55s ease;
}

body[data-service] .dedicated-service-image-wrap:hover img {
  transform: scale(1.035);
}

body[data-service] .dedicated-service-image-accent {
  position: absolute;
  z-index: 1;
  top: 29%;
  left: -13px;
  width: 17px;
  height: 35%;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(180deg, #36d1dc, #1887ef);
  box-shadow: 0 8px 24px rgba(24, 135, 239, 0.4);
}

body[data-service] .dedicated-service-image-badge {
  left: 22px;
  bottom: 22px;
  padding: 13px 19px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(5, 34, 65, 0.86);
  box-shadow: 0 8px 24px rgba(1, 20, 40, 0.2);
}

body[data-service] .dedicated-service-copy {
  align-self: center;
  padding: 8px 4px 8px 0;
}

body[data-service] .dedicated-service-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 2px;
}

body[data-service] .dedicated-service-copy h2 {
  max-width: 760px;
  margin: 12px 0 23px;
  color: #071e3d;
  font-size: clamp(2.15rem, 3.15vw, 3.45rem);
  line-height: 1.08;
  letter-spacing: -1.3px;
}

body[data-service] .dedicated-service-copy h2 span {
  background: linear-gradient(110deg, #0678d9, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body[data-service] .dedicated-service-lead-card {
  margin: 0 0 18px;
  padding: 15px 20px;
  border-left: 3px solid #0798dc;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, #eef8ff 0%, #f8fbff 75%, rgba(248, 251, 255, 0) 100%);
}

body[data-service] .dedicated-service-copy p {
  max-width: 780px;
  margin: 0;
  font-size: 0.99rem;
  line-height: 1.75;
}

body[data-service] .dedicated-service-copy .dedicated-service-lead {
  color: #162f4e;
  font-size: 1.04rem;
  line-height: 1.7;
  font-weight: 650;
}

body[data-service] .dedicated-service-copy .dedicated-service-detail {
  color: #526b84;
}

body[data-service] .dedicated-service-checklist {
  gap: 13px 15px;
  margin-top: 26px;
}

body[data-service] .dedicated-service-checklist li {
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid #cce3f7;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fcff, #eef7ff);
  color: #183452;
  box-shadow: 0 7px 16px rgba(25, 102, 156, 0.045);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

body[data-service] .dedicated-service-checklist li:hover {
  transform: translateY(-2px);
  border-color: #8dccf4;
  box-shadow: 0 10px 22px rgba(25, 102, 156, 0.11);
}

body[data-service] .dedicated-service-checklist li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #0b8edb, #1769dc);
  box-shadow: 0 5px 12px rgba(23, 105, 220, 0.25);
  font-size: 0.72rem;
}

/* GPR content blocks use the supplied service copy while keeping the same visual system. */
body[data-service="gpr-survey"] .gpr-redesign-benefit-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-service="gpr-survey"] .gpr-redesign-technical-copy li {
  gap: 11px;
}

body[data-service="gpr-survey"] .gpr-redesign-technical-copy li span,
body[data-service="gpr-survey"] .gpr-redesign-technical-copy li b,
body[data-service="gpr-survey"] .gpr-redesign-technical-copy li small {
  display: block;
}

body[data-service="gpr-survey"] .gpr-redesign-technical-copy li b {
  color: #ffffff;
  font-size: 0.74rem;
}

body[data-service="gpr-survey"] .gpr-redesign-technical-copy li small {
  margin-top: 3px;
  color: #c9e8f5;
  font-size: 0.66rem;
  line-height: 1.45;
}

body[data-service="gpr-survey"] .gpr-industries-intro {
  margin-top: 8px;
  color: #60788b;
  font-size: 0.85rem;
}

body[data-service="gpr-survey"] .gpr-application-grid article {
  min-height: 112px;
}

body[data-service="gpr-survey"] .gpr-application-grid article>div {
  height: 100%;
}

body[data-service="gpr-survey"] .gpr-application-grid h3 {
  margin-top: 12px;
  padding-right: 0;
}

body[data-service="gpr-survey"] .gpr-application-grid p {
  max-width: 210px;
}

body[data-service="gpr-survey"] .gpr-redesign-mini-grid i {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #16b7df;
}

body[data-service="gpr-survey"] .gpr-redesign-mini-grid>div:nth-child(2) i {
  background: #16b989;
}

body[data-service="gpr-survey"] .gpr-redesign-mini-grid>div:nth-child(3) i {
  background: #f77d56;
}

body[data-service="gpr-survey"] .gpr-redesign-mini-grid>div:nth-child(4) i {
  background: #8660e7;
}

@media (max-width: 960px) {
  body[data-service="gpr-survey"] .gpr-redesign-overview-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  body[data-service="gpr-survey"] .gpr-redesign-image-frame {
    max-width: 760px;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  body[data-service] .dedicated-service-overview {
    gap: 32px;
    padding: 30px;
  }
}

@media (max-width: 640px) {
  body[data-service] .dedicated-service-section {
    padding-top: 52px;
  }

  body[data-service] .dedicated-service-overview {
    gap: 28px;
    padding: 21px;
    border-radius: 24px;
  }

  body[data-service] .dedicated-service-overview::before {
    left: 21px;
    right: 21px;
  }

  body[data-service] .dedicated-service-image-wrap {
    min-height: 290px;
    border-radius: 22px 48px 22px 22px;
  }

  body[data-service] .dedicated-service-copy {
    padding: 0;
  }

  body[data-service] .dedicated-service-copy h2 {
    font-size: 2rem;
    letter-spacing: -0.7px;
  }

  body[data-service] .dedicated-service-checklist {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body[data-service="gpr-survey"] .gpr-redesign-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* Final process-section polish — keep this after legacy responsive rules. */
body[data-service] .reference-process-reference {
  padding: 72px 0 82px;
  background:
    radial-gradient(circle at 4% 18%, rgba(36, 143, 239, 0.14), transparent 25%),
    radial-gradient(circle at 96% 82%, rgba(141, 205, 255, 0.18), transparent 27%),
    linear-gradient(180deg, #fbfdff 0%, #f2f9ff 100%);
}

/* Final Our Journey layout override. */
body.about-page .about-journey-reference {
  position: relative;
  overflow: hidden;
  padding: 28px 0 58px;
  background:
    radial-gradient(circle at 82% 10%, rgba(189, 228, 255, 0.25), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

body.about-page .about-journey-reference::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  opacity: 0.58;
  pointer-events: none;
  background-image: radial-gradient(rgba(71, 166, 231, 0.15) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 35%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 35%, #000 100%);
}

body.about-page .about-journey-reference-container {
  position: relative;
  z-index: 1;
  max-width: 1580px;
  padding: 0 28px;
}

body.about-page .about-journey-reference-layout {
  display: grid;
  grid-template-columns: minmax(520px, 0.92fr) minmax(650px, 1.08fr);
  align-items: center;
  gap: clamp(38px, 4.5vw, 82px);
}

body.about-page .about-journey-reference-visual {
  position: relative;
  min-height: 470px;
}

body.about-page .about-journey-reference-blob {
  position: absolute;
  inset: 16px 34px 20px -20px;
  border-radius: 48% 52% 50% 50%;
  background: linear-gradient(145deg, #a8e3ff 0%, #dff6ff 70%, rgba(235, 250, 255, 0.3) 100%);
  transform: rotate(-7deg);
  opacity: 0.78;
}

body.about-page .about-journey-reference-image {
  position: relative;
  z-index: 1;
  width: min(100%, 670px);
  height: 470px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0 46% 46% 0;
  box-shadow: 0 22px 44px rgba(24, 99, 145, 0.18);
  clip-path: ellipse(88% 88% at 30% 50%);
}

body.about-page .about-journey-reference-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.03);
}

body.about-page .about-journey-reference-content {
  position: relative;
  padding-top: 4px;
}

body.about-page .about-journey-reference-kicker {
  justify-content: flex-start;
  margin-bottom: 15px;
  color: #178fe9;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 2.2px;
}

body.about-page .about-journey-reference-kicker .badge-dash {
  width: 30px;
  height: 2px;
  background: #178fe9;
}

body.about-page .about-journey-reference-content h2 {
  max-width: 720px;
  margin: 0;
  color: #0b2c53;
  font-size: clamp(2.4rem, 4.15vw, 4.45rem);
  font-weight: 850;
  line-height: 0.99;
  letter-spacing: -0.065em;
}

body.about-page .about-journey-reference-content h2 span {
  color: #158cf0;
  background: linear-gradient(90deg, #087edc 0%, #22a9ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.about-page .about-journey-reference-intro {
  max-width: 720px;
  margin: 20px 0 0;
  color: #58718a;
  font-size: clamp(0.9rem, 1.1vw, 1.08rem);
  line-height: 1.52;
}

body.about-page .about-journey-reference-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 38px;
}

body.about-page .about-journey-reference-timeline::before {
  content: '';
  position: absolute;
  top: 39px;
  right: 6%;
  left: 6%;
  border-top: 2px dotted #b7dff3;
}

body.about-page .about-journey-reference-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}

body.about-page .about-journey-reference-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 22px;
  right: -17px;
  color: #499fe0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

body.about-page .about-journey-reference-node {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 17px;
  border: 5px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.45rem;
  box-shadow: 0 10px 22px rgba(36, 124, 181, 0.2);
}

body.about-page .journey-reference-cyan .about-journey-reference-node {
  background: #18b6c7;
}

body.about-page .journey-reference-blue .about-journey-reference-node {
  background: #1477d7;
}

body.about-page .journey-reference-purple .about-journey-reference-node {
  background: #8648df;
}

body.about-page .journey-reference-orange .about-journey-reference-node {
  background: #f49a12;
}

body.about-page .about-journey-reference-step h3 {
  margin: 0 0 8px;
  color: #0d315a;
  font-size: clamp(0.9rem, 1.1vw, 1.12rem);
  font-weight: 850;
  line-height: 1.2;
}

body.about-page .about-journey-reference-step p {
  max-width: 170px;
  margin: 0 auto;
  color: #607a95;
  font-size: 0.76rem;
  line-height: 1.48;
}

@media (max-width: 1180px) {
  body.about-page .about-journey-reference-layout {
    grid-template-columns: minmax(410px, 0.86fr) minmax(0, 1.14fr);
    gap: 40px;
  }

  body.about-page .about-journey-reference-visual,
  body.about-page .about-journey-reference-image {
    min-height: 390px;
    height: 390px;
  }
}

@media (max-width: 820px) {
  body.about-page .about-journey-reference {
    padding: 62px 0 70px;
  }

  body.about-page .about-journey-reference-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  body.about-page .about-journey-reference-visual {
    min-height: 310px;
  }

  body.about-page .about-journey-reference-image {
    width: min(100%, 620px);
    height: 310px;
    margin: 0 auto;
  }

  body.about-page .about-journey-reference-content {
    text-align: center;
  }

  body.about-page .about-journey-reference-kicker {
    justify-content: center;
  }

  body.about-page .about-journey-reference-content h2,
  body.about-page .about-journey-reference-intro {
    margin-right: auto;
    margin-left: auto;
  }

  body.about-page .about-journey-reference-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  body.about-page .about-journey-reference-timeline::before,
  body.about-page .about-journey-reference-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  body.about-page .about-journey-reference-container {
    padding: 0 18px;
  }

  body.about-page .about-journey-reference-content h2 {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }

  body.about-page .about-journey-reference-timeline {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.about-page .about-journey-reference-step p {
    max-width: 250px;
  }
}

body[data-service] .reference-process-reference h2 {
  width: min(1080px, 100%);
  margin: 16px auto 12px;
  font-family: inherit;
  font-size: clamp(2.15rem, 3.1vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -1.2px;
  text-wrap: balance;
}

body[data-service] .reference-process-reference .reference-section-intro {
  max-width: 720px;
  margin: 0 auto;
  color: #536b87;
  font-size: 0.98rem;
  line-height: 1.55;
}

body[data-service] .reference-process-reference .reference-process-grid {
  gap: 44px;
  margin-top: 66px;
}

/* Final About reference overrides. */
body.about-page .about-whoweare-sec {
  padding: 72px 0 66px;
  background: #fff;
}

body.about-page .about-grid-2col {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  grid-template-areas: 'copy visual';
  gap: clamp(42px, 6vw, 84px);
}

body.about-page .about-whoweare-content {
  grid-area: copy;
}

body.about-page .about-whoweare-img-wrap {
  grid-area: visual;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: 0 18px 40px rgba(24, 88, 127, 0.16);
}

body.about-page .about-whoweare-img-inner {
  height: 330px;
  border: 4px solid #fff;
  border-radius: 19px;
  box-shadow: none;
}

body.about-page .about-whoweare-content .about-sec-heading {
  max-width: 500px;
  margin-bottom: 14px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.08;
}

body.about-page .about-whoweare-content .about-sec-text {
  max-width: 505px;
  margin-bottom: 22px;
  font-size: 0.82rem;
  line-height: 1.62;
}

body.about-page .about-whychoose-sec {
  padding: 74px 0 82px;
  background:
    radial-gradient(circle at 50% 0%, rgba(166, 221, 255, 0.15), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f7fcff 100%);
}

body.about-page .whychoose-card-box {
  min-height: 160px;
  padding: 8px 28px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 900px) {
  body.about-page .about-grid-2col {
    grid-template-columns: 1fr;
    grid-template-areas: 'copy' 'visual';
  }

  body.about-page .about-whoweare-img-inner {
    height: min(54vw, 360px);
  }
}

@media (max-width: 600px) {

  body.about-page .about-whoweare-sec,
  body.about-page .about-whychoose-sec {
    padding-top: 56px;
    padding-bottom: 60px;
  }

  body.about-page .about-whoweare-img-inner {
    height: 270px;
  }
}

body[data-service] .reference-process-card {
  min-height: 258px;
  padding: 78px 24px 22px;
  border: 1px solid rgba(110, 183, 243, 0.44);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(34, 105, 157, 0.09);
}

body[data-service] .reference-process-card h3 {
  max-width: 240px;
  margin: 9px 0 11px;
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.22;
}

body[data-service] .reference-process-card p {
  max-width: 230px;
  color: #5a718c;
  font-size: 0.8rem;
  line-height: 1.5;
}

body[data-service] .reference-process-icon {
  width: 94px;
  height: 94px;
  border: 1px solid rgba(99, 174, 240, 0.5);
  box-shadow: 0 12px 24px rgba(30, 115, 188, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

body[data-service] .reference-process-arrow {
  right: -36px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(105, 145, 255, 0.52);
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(49, 112, 187, 0.12);
}

/* Final Our Journey override — keeps the reference layout above legacy rules. */
body.about-page .about-journey-reference {
  position: relative;
  overflow: hidden;
  padding: 28px 0 58px;
  background:
    radial-gradient(circle at 82% 10%, rgba(189, 228, 255, 0.25), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

body.about-page .about-journey-reference::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  opacity: 0.58;
  pointer-events: none;
  background-image: radial-gradient(rgba(71, 166, 231, 0.15) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 35%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 35%, #000 100%);
}

body.about-page .about-journey-reference-container {
  position: relative;
  z-index: 1;
  max-width: 1580px;
  padding: 0 28px;
}

body.about-page .about-journey-reference-layout {
  display: grid;
  grid-template-columns: minmax(520px, 0.92fr) minmax(650px, 1.08fr);
  align-items: center;
  gap: clamp(38px, 4.5vw, 82px);
}

body.about-page .about-journey-reference-visual {
  position: relative;
  min-height: 470px;
}

body.about-page .about-journey-reference-blob {
  position: absolute;
  inset: 16px 34px 20px -20px;
  border-radius: 48% 52% 50% 50%;
  background: linear-gradient(145deg, #a8e3ff 0%, #dff6ff 70%, rgba(235, 250, 255, 0.3) 100%);
  transform: rotate(-7deg);
  opacity: 0.78;
}

body.about-page .about-journey-reference-image {
  position: relative;
  z-index: 1;
  width: min(100%, 670px);
  height: 470px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0 46% 46% 0;
  box-shadow: 0 22px 44px rgba(24, 99, 145, 0.18);
  clip-path: ellipse(88% 88% at 30% 50%);
}

body.about-page .about-journey-reference-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.03);
}

body.about-page .about-journey-reference-content {
  position: relative;
  padding-top: 4px;
}

body.about-page .about-journey-reference-kicker {
  justify-content: flex-start;
  margin-bottom: 15px;
  color: #178fe9;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 2.2px;
}

body.about-page .about-journey-reference-kicker .badge-dash {
  width: 30px;
  height: 2px;
  background: #178fe9;
}

body.about-page .about-journey-reference-content h2 {
  max-width: 720px;
  margin: 0;
  color: #0b2c53;
  font-size: clamp(2.4rem, 4.15vw, 4.45rem);
  font-weight: 850;
  line-height: 0.99;
  letter-spacing: -0.065em;
}

body.about-page .about-journey-reference-content h2 span {
  color: #158cf0;
  background: linear-gradient(90deg, #087edc 0%, #22a9ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.about-page .about-journey-reference-intro {
  max-width: 720px;
  margin: 20px 0 0;
  color: #58718a;
  font-size: clamp(0.9rem, 1.1vw, 1.08rem);
  line-height: 1.52;
}

body.about-page .about-journey-reference-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 38px;
}

body.about-page .about-journey-reference-timeline::before {
  content: '';
  position: absolute;
  top: 39px;
  right: 6%;
  left: 6%;
  border-top: 2px dotted #b7dff3;
}

body.about-page .about-journey-reference-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}

body.about-page .about-journey-reference-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 22px;
  right: -17px;
  color: #499fe0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

body.about-page .about-journey-reference-node {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 17px;
  border: 5px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.45rem;
  box-shadow: 0 10px 22px rgba(36, 124, 181, 0.2);
}

body.about-page .journey-reference-cyan .about-journey-reference-node {
  background: #18b6c7;
}

body.about-page .journey-reference-blue .about-journey-reference-node {
  background: #1477d7;
}

body.about-page .journey-reference-purple .about-journey-reference-node {
  background: #8648df;
}

body.about-page .journey-reference-orange .about-journey-reference-node {
  background: #f49a12;
}

body.about-page .about-journey-reference-step h3 {
  margin: 0 0 8px;
  color: #0d315a;
  font-size: clamp(0.9rem, 1.1vw, 1.12rem);
  font-weight: 850;
  line-height: 1.2;
}

body.about-page .about-journey-reference-step p {
  max-width: 170px;
  margin: 0 auto;
  color: #607a95;
  font-size: 0.76rem;
  line-height: 1.48;
}

@media (max-width: 1180px) {
  body.about-page .about-journey-reference-layout {
    grid-template-columns: minmax(410px, 0.86fr) minmax(0, 1.14fr);
    gap: 40px;
  }

  body.about-page .about-journey-reference-visual,
  body.about-page .about-journey-reference-image {
    min-height: 390px;
    height: 390px;
  }
}

@media (max-width: 820px) {
  body.about-page .about-journey-reference {
    padding: 62px 0 70px;
  }

  body.about-page .about-journey-reference-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  body.about-page .about-journey-reference-visual {
    min-height: 310px;
  }

  body.about-page .about-journey-reference-image {
    width: min(100%, 620px);
    height: 310px;
    margin: 0 auto;
  }

  body.about-page .about-journey-reference-content {
    text-align: center;
  }

  body.about-page .about-journey-reference-kicker {
    justify-content: center;
  }

  body.about-page .about-journey-reference-content h2,
  body.about-page .about-journey-reference-intro {
    margin-right: auto;
    margin-left: auto;
  }

  body.about-page .about-journey-reference-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  body.about-page .about-journey-reference-timeline::before,
  body.about-page .about-journey-reference-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  body.about-page .about-journey-reference-container {
    padding: 0 18px;
  }

  body.about-page .about-journey-reference-content h2 {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }

  body.about-page .about-journey-reference-timeline {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.about-page .about-journey-reference-step p {
    max-width: 250px;
  }
}

/* Final section background palette: each service block has its own visual identity. */
body[data-service] .reference-service-overview-combined.reference-service-overview-combined {
  background:
    radial-gradient(circle at 3% 18%, rgba(99, 190, 255, 0.13), transparent 22%),
    radial-gradient(circle at 98% 84%, rgba(205, 239, 255, 0.72), transparent 26%),
    #ffffff;
  border-bottom: 1px solid #e5f1f8;
}

body[data-service] .reference-process-reference.reference-process-reference {
  background:
    radial-gradient(circle at -3% 45%, rgba(51, 153, 239, 0.2), transparent 28%),
    radial-gradient(circle at 103% 58%, rgba(124, 208, 255, 0.2), transparent 27%),
    linear-gradient(135deg, #eaf7ff 0%, #f5fbff 48%, #e6f5ff 100%);
  border-top: 1px solid #d9edf9;
  border-bottom: 1px solid #d9edf9;
}

body[data-service] .reference-technical-section.reference-technical-section {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.98), rgba(236, 248, 255, 0.96)),
    repeating-linear-gradient(135deg, transparent 0 34px, rgba(65, 170, 231, 0.035) 35px 36px);
  border-bottom: 1px solid #dceff8;
}

body[data-service] .reference-applications-reference.reference-applications-reference {
  background:
    radial-gradient(circle at 8% 12%, rgba(93, 208, 184, 0.12), transparent 23%),
    radial-gradient(circle at 92% 88%, rgba(105, 190, 255, 0.14), transparent 25%),
    linear-gradient(135deg, #effbf9 0%, #f8fdff 52%, #edf8ff 100%);
  border-bottom: 1px solid #deeff1;
}

body[data-service] .reference-faq-reference.reference-faq-reference {
  background:
    radial-gradient(circle at 4% 8%, rgba(89, 166, 255, 0.14), transparent 23%),
    radial-gradient(circle at 96% 92%, rgba(176, 139, 255, 0.1), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border-top: 1px solid #e6eff8;
}

body[data-service] .reference-service-cta-reference.reference-service-cta-reference {
  background:
    radial-gradient(circle at 10% 50%, rgba(91, 192, 255, 0.16), transparent 24%),
    linear-gradient(180deg, #f1f9ff 0%, #e7f5ff 100%);
}

@media (max-width: 1100px) {
  body[data-service] .reference-process-reference .reference-process-grid {
    gap: 30px;
    margin-top: 58px;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-process-reference {
    padding: 46px 0 54px !important;
  }

  body[data-service] .reference-process-reference h2 {
    width: 100%;
    margin: 13px auto 12px !important;
    font-size: clamp(1.85rem, 8.2vw, 2.15rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.7px !important;
  }

  body[data-service] .reference-process-reference .reference-section-intro {
    max-width: 340px;
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
  }

  body[data-service] .reference-process-reference .reference-process-grid {
    gap: 18px !important;
    margin-top: 32px !important;
  }

  body[data-service] .reference-process-card {
    min-height: 180px !important;
    padding: 18px 14px 16px !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 22px rgba(34, 105, 157, 0.08) !important;
  }

  body[data-service] .reference-process-card::before {
    right: 20px !important;
    left: 20px !important;
    height: 3px !important;
  }

  body[data-service] .reference-process-icon {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 10px !important;
    border-radius: 16px !important;
    font-size: 1.25rem !important;
  }

  body[data-service] .reference-process-card h3 {
    max-width: 260px !important;
    margin: 0 auto 8px !important;
    font-size: 0.94rem !important;
    line-height: 1.2 !important;
  }

  body[data-service] .reference-process-card p {
    max-width: 270px !important;
    font-size: 0.72rem !important;
    line-height: 1.42 !important;
  }

  body[data-service] .reference-process-card .reference-process-bottom-line {
    width: 44px !important;
    height: 3px !important;
    margin-top: 16px !important;
  }
}

/* Keep the homepage hero video fully visible without the fade masks. */
.hero-banner .hero-video-bg {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hero-banner .hero-video-overlay {
  background: transparent !important;
}

@media (min-width: 1025px) {
  .hero-banner .hero-video-overlay {
    background: linear-gradient(90deg,
      transparent 0%,
      transparent 37%,
      rgba(224, 241, 253, 0.30) 40%,
      rgba(224, 241, 253, 0.12) 43%,
      transparent 47%,
      transparent 100%) !important;
  }
}

/* Mobile service hero: keep the opening view compact, readable, and intentional. */
@media (max-width: 760px) {
  body[data-service] .reference-service-hero {
    min-height: 0 !important;
    background-position: center center !important;
  }

  body[data-service] .reference-service-hero-overlay {
    background:
      linear-gradient(180deg, rgba(4, 25, 48, 0.78) 0%, rgba(7, 49, 88, 0.72) 48%, rgba(6, 65, 133, 0.82) 100%),
      radial-gradient(circle at 82% 12%, rgba(42, 174, 255, 0.24), transparent 46%);
  }

  body[data-service] .reference-service-hero-inner {
    width: 100%;
    min-width: 0;
    padding: 26px 20px 36px !important;
  }

  body[data-service] .reference-service-breadcrumb {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    margin: 0 0 20px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    box-sizing: border-box;
    font-size: 0.67rem !important;
    line-height: 1.35 !important;
  }

  body[data-service] .reference-service-breadcrumb span {
    flex: 1 1 auto;
    flex-basis: auto;
    min-width: 0;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-service] .reference-service-hero-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-top: 0 !important;
  }

  body[data-service] .reference-service-kicker {
    font-size: 0.68rem !important;
    letter-spacing: 1.15px !important;
  }

  body[data-service] .reference-service-hero-copy h1 {
    max-width: 100%;
    margin: 13px 0 !important;
    font-size: clamp(2.05rem, 8.8vw, 2.65rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.85px !important;
  }

  body[data-service] .reference-service-hero-copy>p {
    max-width: 100%;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
  }

  body[data-service] .reference-service-actions {
    width: 100%;
    margin-top: 20px !important;
  }

  body[data-service] .reference-service-btn-primary {
    width: 100%;
    min-height: 46px !important;
    padding: 0 18px;
    font-size: 0.76rem !important;
    box-sizing: border-box;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-service-hero-inner {
    padding: 22px 18px 32px !important;
  }

  body[data-service] .reference-service-breadcrumb {
    margin-bottom: 18px !important;
    padding: 9px 12px !important;
    font-size: 0.64rem !important;
  }

  body[data-service] .reference-service-hero-copy h1 {
    font-size: clamp(2rem, 8.5vw, 2.3rem) !important;
  }
}

/* Mobile stats dock: keep the four highlights balanced in a 2 x 2 layout. */
@media (max-width: 640px) {
  .hero-stats-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
    max-width: 100%;
    padding: 10px !important;
    border-radius: 20px;
  }

  .hero-stats-bar .stat-item {
    min-width: 0;
    min-height: 66px;
    padding: 9px 10px !important;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.075);
  }

  .hero-stats-bar .stat-item:not(:last-child)::after {
    display: none;
  }

  .hero-stats-bar .stat-icon-circle {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    font-size: 1rem;
  }

  .hero-stats-bar .stat-meta {
    min-width: 0;
  }

  .hero-stats-bar .stat-meta .num,
  .hero-stats-bar .stat-meta .txt-bold {
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-stats-bar .stat-meta .lbl {
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Mobile polish for the shared sustainable-solutions CTA. */
@media (max-width: 640px) {

  body.about-page .knowledge-cta-rock-stream-sec,
  body.about-page .knowledge-cta-rock-stream-sec>.container,
  body.about-page .cta-banner-floating-wrapper,
  body.about-page .cta-glass-floating-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.about-page .cta-glass-card-inner {
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
  }

  body.about-page .cta-left-text-block,
  body.about-page .cta-card-heading,
  body.about-page .cta-card-subtext {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .knowledge-cta-rock-stream-sec {
    padding: 26px 0 42px;
  }

  .knowledge-cta-rock-stream-sec>.container {
    padding-right: 12px;
    padding-left: 12px;
  }

  .cta-banner-floating-wrapper {
    min-height: 0;
    padding: 10px;
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(5, 20, 43, 0.2);
  }

  .cta-glass-floating-card {
    padding: 24px 20px 22px;
    border-radius: 18px;
  }

  .cta-glass-card-inner {
    gap: 22px;
    align-items: stretch;
  }

  .cta-left-text-block {
    width: 100%;
    max-width: none;
  }

  .cta-sub-badge-row {
    gap: 7px;
    margin-bottom: 11px;
  }

  .badge-sub-text {
    max-width: 250px;
    font-size: 0.62rem;
    line-height: 1.4;
    letter-spacing: 1.2px;
  }

  .cta-card-heading {
    font-size: clamp(1.5rem, 6.7vw, 1.7rem);
    line-height: 1.1;
    margin-bottom: 10px;
  }

  .cta-card-subtext {
    font-size: 0.78rem;
    line-height: 1.48;
  }

  .cta-right-btn-block {
    width: 100%;
  }

  .cta-right-btn-block .btn-white-contact-pill {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 0.9rem;
  }
}

/* Compact two-column mobile footer: navigation and services sit beside each other. */
@media (max-width: 700px) {
  .master-footer {
    padding-top: 44px;
  }

  .footer-main-container {
    margin-bottom: 24px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .footer-grid-5col {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr) !important;
    column-gap: 16px;
    row-gap: 26px;
  }

  .footer-grid-5col .col-brand,
  .footer-grid-5col .col-contact {
    grid-column: 1 / -1;
  }

  .footer-grid-5col .col-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .brand-mission-text {
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 13px;
    font-size: 0.86rem;
    line-height: 1.55;
  }

  .footer-logo {
    margin-bottom: 14px;
    padding: 7px 14px;
  }

  .footer-logo-img {
    height: 38px;
    max-width: 205px;
  }

  .footer-trust-badge {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 16px;
    padding: 6px 11px;
    font-size: 0.69rem;
  }

  .footer-social-circles {
    justify-content: center;
  }

  .footer-heading {
    margin-bottom: 15px;
    font-size: 1rem !important;
  }

  .heading-accent-line {
    width: 30px;
    height: 3px;
    margin-top: 6px;
  }

  .footer-nav-list {
    gap: 9px;
  }

  .footer-nav-list li a {
    gap: 7px;
    font-size: 0.79rem;
    line-height: 1.35;
  }

  .footer-services-list {
    gap: 6px;
  }

  .footer-services-list li a {
    align-items: flex-start;
    gap: 8px;
    padding: 4px 4px 4px 3px;
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .f-service-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.72rem;
  }

  .f-service-title {
    min-width: 0;
    padding-top: 5px;
  }

  .footer-contact-items {
    gap: 8px;
  }

  .f-contact-card {
    gap: 10px;
    padding: 10px 11px;
    border-radius: 12px;
  }

  .f-contact-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.85rem;
  }

  .f-contact-label {
    font-size: 0.64rem;
    letter-spacing: 0.65px;
  }

  .f-contact-val {
    font-size: 0.78rem;
    line-height: 1.38;
  }

  .footer-bottom-strip {
    padding: 16px 0;
    font-size: 0.72rem;
  }

  .footer-bottom-inner {
    gap: 8px;
  }
}

/* Our Journey — screenshot-matched landscape and milestone timeline. */
body.about-page .about-journey-reference {
  position: relative;
  overflow: hidden;
  padding: 28px 0 58px;
  background:
    radial-gradient(circle at 82% 10%, rgba(189, 228, 255, 0.25), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

body.about-page .about-journey-reference::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  opacity: 0.58;
  pointer-events: none;
  background-image: radial-gradient(rgba(71, 166, 231, 0.15) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 35%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 35%, #000 100%);
}

body.about-page .about-journey-reference-container {
  position: relative;
  z-index: 1;
  max-width: 1580px;
  padding: 0 28px;
}

body.about-page .about-journey-reference-layout {
  display: grid;
  grid-template-columns: minmax(520px, 0.92fr) minmax(650px, 1.08fr);
  align-items: center;
  gap: clamp(38px, 4.5vw, 82px);
}

body.about-page .about-journey-reference-visual {
  position: relative;
  min-height: 470px;
}

body.about-page .about-journey-reference-blob {
  position: absolute;
  inset: 16px 34px 20px -20px;
  border-radius: 48% 52% 50% 50%;
  background: linear-gradient(145deg, #a8e3ff 0%, #dff6ff 70%, rgba(235, 250, 255, 0.3) 100%);
  transform: rotate(-7deg);
  opacity: 0.78;
}

body.about-page .about-journey-reference-image {
  position: relative;
  z-index: 1;
  width: min(100%, 670px);
  height: 470px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0 46% 46% 0;
  box-shadow: 0 22px 44px rgba(24, 99, 145, 0.18);
  clip-path: ellipse(88% 88% at 30% 50%);
}

body.about-page .about-journey-reference-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.03);
}

body.about-page .about-journey-reference-content {
  position: relative;
  padding-top: 4px;
}

body.about-page .about-journey-reference-kicker {
  justify-content: flex-start;
  margin-bottom: 15px;
  color: #178fe9;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 2.2px;
}

body.about-page .about-journey-reference-kicker .badge-dash {
  width: 30px;
  height: 2px;
  background: #178fe9;
}

body.about-page .about-journey-reference-content h2 {
  max-width: 720px;
  margin: 0;
  color: #0b2c53;
  font-size: clamp(2.4rem, 4.15vw, 4.45rem);
  font-weight: 850;
  line-height: 0.99;
  letter-spacing: -0.065em;
}

body.about-page .about-journey-reference-content h2 span {
  color: #158cf0;
  background: linear-gradient(90deg, #087edc 0%, #22a9ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.about-page .about-journey-reference-intro {
  max-width: 720px;
  margin: 20px 0 0;
  color: #58718a;
  font-size: clamp(0.9rem, 1.1vw, 1.08rem);
  line-height: 1.52;
}

body.about-page .about-journey-reference-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 38px;
}

body.about-page .about-journey-reference-timeline::before {
  content: '';
  position: absolute;
  top: 39px;
  right: 6%;
  left: 6%;
  border-top: 2px dotted #b7dff3;
}

body.about-page .about-journey-reference-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}

body.about-page .about-journey-reference-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 22px;
  right: -17px;
  color: #499fe0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

body.about-page .about-journey-reference-node {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 17px;
  border: 5px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.45rem;
  box-shadow: 0 10px 22px rgba(36, 124, 181, 0.2);
}

body.about-page .journey-reference-cyan .about-journey-reference-node {
  background: #18b6c7;
}

body.about-page .journey-reference-blue .about-journey-reference-node {
  background: #1477d7;
}

body.about-page .journey-reference-purple .about-journey-reference-node {
  background: #8648df;
}

body.about-page .journey-reference-orange .about-journey-reference-node {
  background: #f49a12;
}

body.about-page .about-journey-reference-step h3 {
  margin: 0 0 8px;
  color: #0d315a;
  font-size: clamp(0.9rem, 1.1vw, 1.12rem);
  font-weight: 850;
  line-height: 1.2;
}

body.about-page .about-journey-reference-step p {
  max-width: 170px;
  margin: 0 auto;
  color: #607a95;
  font-size: 0.76rem;
  line-height: 1.48;
}

@media (max-width: 1180px) {
  body.about-page .about-journey-reference-layout {
    grid-template-columns: minmax(410px, 0.86fr) minmax(0, 1.14fr);
    gap: 40px;
  }

  body.about-page .about-journey-reference-visual,
  body.about-page .about-journey-reference-image {
    min-height: 390px;
    height: 390px;
  }
}

@media (max-width: 820px) {
  body.about-page .about-journey-reference {
    padding: 62px 0 70px;
  }

  body.about-page .about-journey-reference-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  body.about-page .about-journey-reference-visual {
    min-height: 310px;
  }

  body.about-page .about-journey-reference-image {
    width: min(100%, 620px);
    height: 310px;
    margin: 0 auto;
  }

  body.about-page .about-journey-reference-content {
    text-align: center;
  }

  body.about-page .about-journey-reference-kicker {
    justify-content: center;
  }

  body.about-page .about-journey-reference-content h2,
  body.about-page .about-journey-reference-intro {
    margin-right: auto;
    margin-left: auto;
  }

  body.about-page .about-journey-reference-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  body.about-page .about-journey-reference-timeline::before,
  body.about-page .about-journey-reference-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  body.about-page .about-journey-reference-container {
    padding: 0 18px;
  }

  body.about-page .about-journey-reference-content h2 {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }

  body.about-page .about-journey-reference-timeline {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.about-page .about-journey-reference-step p {
    max-width: 250px;
  }
}

/* Why Choose Us — premium feature-card finish. */
body.about-page .about-whychoose-sec {
  position: relative;
  overflow: hidden;
  padding: 88px 0 96px;
  background:
    radial-gradient(circle at 8% 18%, rgba(94, 193, 255, 0.2), transparent 27%),
    radial-gradient(circle at 92% 76%, rgba(144, 224, 255, 0.18), transparent 29%),
    linear-gradient(145deg, #fafdff 0%, #eef8ff 52%, #f8fcff 100%);
}

body.about-page .about-whychoose-sec::before,
body.about-page .about-whychoose-sec::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(80, 172, 229, 0.15);
  border-radius: 50%;
}

body.about-page .about-whychoose-sec::before {
  top: -160px;
  left: -120px;
  width: 430px;
  height: 430px;
  box-shadow: 0 0 0 26px rgba(114, 204, 255, 0.035), 0 0 0 52px rgba(114, 204, 255, 0.025);
}

body.about-page .about-whychoose-sec::after {
  right: -170px;
  bottom: -210px;
  width: 500px;
  height: 500px;
  box-shadow: 0 0 0 28px rgba(114, 204, 255, 0.035), 0 0 0 56px rgba(114, 204, 255, 0.025);
}

body.about-page .about-whychoose-sec .whoweare-container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
}

body.about-page .whychoose-header-center {
  max-width: 760px;
  margin: 0 auto 48px;
}

body.about-page .whychoose-header-center .about-sec-badge {
  margin-bottom: 17px;
  color: #0787dc;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
}

body.about-page .whychoose-header-center .badge-dash {
  width: 28px;
  height: 2px;
  background: #0787dc;
}

body.about-page .whychoose-header-center .about-sec-heading {
  margin-bottom: 15px;
  color: #082e59 !important;
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

body.about-page .whychoose-header-center .highlight-text {
  color: #168aeb !important;
  background: linear-gradient(120deg, #087fdc 0%, #4f6cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.about-page .whychoose-intro {
  max-width: 620px;
  color: #607b94;
  font-size: 0.84rem;
  line-height: 1.65;
}

body.about-page .whychoose-cards-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

body.about-page .whychoose-card-box {
  min-height: 246px;
  padding: 28px 25px 24px;
  border: 1px solid rgba(113, 182, 222, 0.28);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 30px rgba(32, 101, 145, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

body.about-page .whychoose-card-box::before {
  position: absolute;
  top: 17px;
  right: 20px;
  color: rgba(26, 112, 164, 0.2);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 1.5px;
}

body.about-page .whychoose-card-box:nth-child(1)::before {
  content: '01';
}

body.about-page .whychoose-card-box:nth-child(2)::before {
  content: '02';
}

body.about-page .whychoose-card-box:nth-child(3)::before {
  content: '03';
}

body.about-page .whychoose-card-box:nth-child(4)::before {
  content: '04';
}

body.about-page .whychoose-card-box::after {
  display: none !important;
}

body.about-page .whychoose-card-box:hover {
  transform: translateY(-8px);
  border-color: rgba(34, 157, 220, 0.52);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 42px rgba(32, 101, 145, 0.14), 0 0 0 4px rgba(94, 193, 255, 0.08);
}

body.about-page .whychoose-top-line {
  display: block;
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 4px;
  border-radius: 0 0 8px 8px;
}

body.about-page .whychoose-card-box.card-theme-1 .whychoose-top-line {
  background: linear-gradient(90deg, #168ee4, #6bd6ff);
}

body.about-page .whychoose-card-box.card-theme-2 .whychoose-top-line {
  background: linear-gradient(90deg, #25af61, #86db9c);
}

body.about-page .whychoose-card-box.card-theme-3 .whychoose-top-line {
  background: linear-gradient(90deg, #ed9418, #ffd078);
}

body.about-page .whychoose-card-box.card-theme-4 .whychoose-top-line {
  background: linear-gradient(90deg, #7e49df, #bf9aff);
}

body.about-page .whychoose-icon {
  position: relative;
  width: 66px;
  height: 66px;
  margin: 12px auto 20px;
  border: 1px solid currentColor;
  border-radius: 21px;
  box-shadow: 0 12px 22px rgba(36, 117, 173, 0.12), inset 0 0 0 5px rgba(255, 255, 255, 0.48);
  font-size: 1.28rem;
  transition: transform 220ms ease, border-radius 220ms ease;
}

body.about-page .whychoose-card-box:hover .whychoose-icon {
  transform: translateY(-3px) rotate(-4deg);
  border-radius: 50%;
}

body.about-page .whychoose-card-title {
  margin: 0 0 10px;
  color: #092f5c;
  font-size: 1.04rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

body.about-page .whychoose-card-desc {
  max-width: 218px;
  color: #607b94;
  font-size: 0.78rem;
  line-height: 1.58;
}

@media (max-width: 980px) {
  body.about-page .whychoose-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 600px) {
  body.about-page .about-whychoose-sec {
    padding: 64px 0 70px;
  }

  body.about-page .whychoose-header-center {
    margin-bottom: 34px;
  }

  body.about-page .whychoose-header-center .about-sec-heading {
    font-size: clamp(1.85rem, 9vw, 2.4rem) !important;
  }

  body.about-page .whychoose-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.about-page .whychoose-card-box {
    min-height: 0;
    padding: 25px 24px 23px;
  }
}

/* About page: screenshot-matched approach and trusted-partner sections. */
body.about-page .about-approach-sec {
  padding: 58px 0 64px;
  background:
    radial-gradient(circle at 14% 22%, rgba(71, 178, 244, 0.17), transparent 25%),
    radial-gradient(circle at 91% 74%, rgba(150, 226, 255, 0.2), transparent 27%),
    linear-gradient(180deg, #f5fcff 0%, #eaf7fd 100%);
}

body.about-page .about-approach-container {
  max-width: 1180px;
}

body.about-page .about-approach-layout {
  grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.54fr);
  gap: clamp(38px, 5vw, 70px);
}

body.about-page .about-approach-visual {
  min-height: 330px;
}

body.about-page .about-approach-image-frame {
  width: min(294px, 86%);
  height: 326px;
  border-radius: 34px 58px 30px 58px;
  box-shadow: 0 18px 34px rgba(22, 106, 156, 0.18);
}

body.about-page .about-approach-blob-back {
  top: 10px;
  left: 4%;
  width: 195px;
  height: 112px;
}

body.about-page .about-approach-blob-front {
  right: 2%;
  bottom: 0;
  width: 176px;
  height: 118px;
}

body.about-page .about-approach-content h2 {
  font-size: clamp(2rem, 3.2vw, 2.85rem);
}

body.about-page .about-approach-intro {
  margin-bottom: 28px;
}

body.about-page .about-approach-steps {
  gap: 16px;
}

body.about-page .about-approach-step:not(:last-child)::after {
  content: '›';
  position: absolute;
  top: 9px;
  right: -11px;
  color: #63b4e5;
  font-size: 1.2rem;
  font-weight: 800;
}

body.about-page .about-approach-step-number {
  width: 46px;
  height: 46px;
  margin-bottom: 13px;
  border-width: 3px;
  font-size: 0.74rem;
}

body.about-page .about-approach-step h3 {
  font-size: 0.86rem;
}

body.about-page .about-whychoose-sec {
  padding: 62px 0 70px;
  background:
    radial-gradient(circle at 14% 12%, rgba(107, 197, 255, 0.14), transparent 25%),
    radial-gradient(circle at 86% 78%, rgba(153, 221, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #f8fdff 0%, #eef9fe 100%);
}

body.about-page .about-whychoose-sec .whoweare-container {
  max-width: 1120px;
}

body.about-page .whychoose-header-center {
  max-width: 700px;
  margin-bottom: 34px;
}

body.about-page .whychoose-header-center .about-sec-badge {
  color: #168ee4;
}

body.about-page .whychoose-header-center .badge-dash {
  background: #168ee4;
}

body.about-page .whychoose-header-center .about-sec-heading {
  color: #0d315a !important;
  font-size: clamp(1.85rem, 3vw, 2.55rem) !important;
  letter-spacing: -0.035em;
}

body.about-page .whychoose-intro {
  max-width: 610px;
  color: #607b94;
  font-size: 0.78rem;
}

body.about-page .whychoose-cards-grid {
  max-width: 1060px;
  margin: 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.about-page .whychoose-card-box {
  min-height: 150px;
  padding: 4px 25px 0;
}

body.about-page .whychoose-card-box:not(:last-child)::after {
  top: 8px;
  height: 120px;
  background: linear-gradient(180deg, transparent, #d5eaf6 20%, #d5eaf6 80%, transparent);
}

body.about-page .whychoose-icon {
  width: 53px;
  height: 53px;
  margin-bottom: 13px;
}

body.about-page .whychoose-card-title {
  font-size: 0.9rem;
}

body.about-page .whychoose-card-desc {
  max-width: 188px;
  font-size: 0.69rem;
}

@media (max-width: 900px) {
  body.about-page .about-approach-step:not(:last-child)::after {
    display: none;
  }
}

/* Final About reference overrides. */
body.about-page .about-whoweare-sec {
  padding: 72px 0 66px;
  background: #fff;
}

body.about-page .about-grid-2col {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  grid-template-areas: 'copy visual';
  gap: clamp(42px, 6vw, 84px);
}

body.about-page .about-whoweare-content {
  grid-area: copy;
}

body.about-page .about-whoweare-img-wrap {
  grid-area: visual;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: 0 18px 40px rgba(24, 88, 127, 0.16);
}

body.about-page .about-whoweare-img-inner {
  height: 330px;
  border: 4px solid #fff;
  border-radius: 19px;
  box-shadow: none;
}

body.about-page .about-whoweare-content .about-sec-heading {
  max-width: 500px;
  margin-bottom: 14px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.08;
}

body.about-page .about-whoweare-content .about-sec-text {
  max-width: 505px;
  margin-bottom: 22px;
  font-size: 0.82rem;
  line-height: 1.62;
}

body.about-page .about-whychoose-sec {
  padding: 74px 0 82px;
  background:
    radial-gradient(circle at 50% 0%, rgba(166, 221, 255, 0.15), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f7fcff 100%);
}

body.about-page .whychoose-card-box {
  min-height: 160px;
  padding: 8px 28px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 900px) {
  body.about-page .about-grid-2col {
    grid-template-columns: 1fr;
    grid-template-areas: 'copy' 'visual';
  }

  body.about-page .about-whoweare-img-inner {
    height: min(54vw, 360px);
  }
}

@media (max-width: 600px) {

  body.about-page .about-whoweare-sec,
  body.about-page .about-whychoose-sec {
    padding-top: 56px;
    padding-bottom: 60px;
  }

  body.about-page .about-whoweare-img-inner {
    height: 270px;
  }
}

/* Final About hero + first-section reference match. */
body.about-page .contact-hero-banner-sec {
  position: relative;
  min-height: 394px;
  padding: 0;
  overflow: hidden;
  background: #092c4c url('assect/image.png') center / cover no-repeat;
}

body.about-page .contact-hero-dark-overlay {
  background:
    linear-gradient(90deg, rgba(3, 25, 49, 0.96) 0%, rgba(4, 39, 67, 0.84) 43%, rgba(7, 68, 105, 0.38) 100%),
    linear-gradient(180deg, rgba(2, 28, 52, 0.35), rgba(5, 51, 82, 0.62));
}

body.about-page .contact-hero-inner {
  display: block;
  max-width: 1380px;
  min-height: 394px;
  padding: 46px 38px 26px;
}

body.about-page .about-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 615px;
}

body.about-page .about-page-breadcrumb {
  display: inline-flex;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.64rem;
  letter-spacing: 2px;
  font-weight: 800;
}

body.about-page .about-page-breadcrumb span {
  position: relative;
}

body.about-page .about-page-breadcrumb span::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-left: 9px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.72);
}

body.about-page .about-page-title {
  max-width: 615px;
  margin: 0 0 12px;
  font-size: clamp(2.8rem, 4vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -1.6px;
}

body.about-page .about-page-title .highlight-blue {
  color: #24cbf6;
}

body.about-page .about-page-desc {
  max-width: 525px;
  margin: 0 0 22px;
  color: rgba(239, 249, 255, 0.84);
  font-size: 0.78rem;
  line-height: 1.55;
}

body.about-page .about-page-subtitle {
  max-width: 500px;
  margin: 0 0 10px;
  color: rgba(245, 251, 255, 0.95);
  font-size: 1.08rem;
  line-height: 1.16;
}

body.about-page .about-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 530px;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.about-page .about-hero-stats .stat-item {
  min-width: 0;
  gap: 8px;
  padding: 0 13px;
  border-right: 1px solid rgba(188, 231, 255, 0.44);
}

body.about-page .about-hero-stats .stat-item:first-child {
  padding-left: 0;
}

body.about-page .about-hero-stats .stat-item:last-child {
  border-right: 0;
}

body.about-page .about-hero-stats .stat-icon-circle {
  width: 27px;
  height: 27px;
  border: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  font-size: 0.88rem;
}

body.about-page .about-hero-stats .stat-meta .num,
body.about-page .about-hero-stats .stat-meta .txt-bold {
  display: block;
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.1;
}

body.about-page .about-hero-stats .stat-meta .lbl {
  display: block;
  color: rgba(221, 242, 255, 0.82);
  font-size: 0.52rem;
  line-height: 1.3;
}

body.about-page .about-hero-journey-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #18bdf4, #087de8);
  box-shadow: 0 10px 20px rgba(0, 138, 223, 0.26);
  font-size: 0.72rem;
  font-weight: 800;
}

body.about-page .about-hero-journey-btn i {
  font-size: 0.67rem;
}

body.about-page .about-hero-visual {
  position: relative;
  align-self: stretch;
  min-height: 350px;
}

body.about-page .about-hero-visual-image {
  position: absolute;
  inset: -42px -38px -26px 0;
  background: url('assect/about-hero-dam.jpg') center / cover no-repeat;
  clip-path: ellipse(82% 78% at 62% 50%);
  opacity: 0.88;
  mix-blend-mode: screen;
}

body.about-page .about-hero-visual::after {
  content: '';
  position: absolute;
  inset: 0 -38px 0 -18px;
  border-left: 1px solid rgba(175, 239, 255, 0.52);
  border-radius: 50%;
  transform: rotate(18deg);
  opacity: 0.62;
}

body.about-page .about-hero-globe-frame {
  position: absolute;
  z-index: 3;
  left: 6%;
  bottom: -35px;
  width: 190px;
  height: 190px;
  overflow: hidden;
  border: 5px solid #f8fdff;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0, 25, 55, 0.34), 0 0 0 2px rgba(75, 210, 255, 0.4);
}

body.about-page .about-hero-globe-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.about-page .about-hero-solution-pill {
  position: absolute;
  z-index: 4;
  top: 34px;
  right: 2%;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 190px;
  padding: 12px 15px;
  border: 1px solid rgba(190, 237, 255, 0.72);
  border-radius: 15px;
  color: #123b60;
  background: rgba(245, 252, 255, 0.93);
  box-shadow: 0 12px 26px rgba(0, 25, 55, 0.2);
}

body.about-page .about-hero-leaf-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #33a952;
  background: #e1f7df;
  font-size: 0.95rem;
}

body.about-page .about-hero-solution-pill strong,
body.about-page .about-hero-solution-pill small {
  display: block;
}

body.about-page .about-hero-solution-pill strong {
  margin-bottom: 2px;
  font-size: 0.7rem;
}

body.about-page .about-hero-solution-pill small {
  color: #64809a;
  font-size: 0.58rem;
  line-height: 1.35;
}

body.about-page .about-whoweare-sec {
  padding: 72px 0 66px;
  background: #fff;
}

body.about-page .about-grid-2col {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  grid-template-areas: 'copy visual';
  gap: clamp(42px, 6vw, 84px);
  align-items: center;
}

body.about-page .about-whoweare-content {
  grid-area: copy;
}

body.about-page .about-whoweare-img-wrap {
  grid-area: visual;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: 0 18px 40px rgba(24, 88, 127, 0.16);
}

body.about-page .about-whoweare-img-inner {
  height: 330px;
  border: 4px solid #fff;
  border-radius: 19px;
  box-shadow: none;
}

body.about-page .about-whoweare-img-wrap img.main-whoweare-img {
  object-position: center;
}

body.about-page .about-whoweare-content .about-sec-badge {
  margin-bottom: 12px;
  color: #078be8;
}

body.about-page .about-whoweare-content .about-sec-heading {
  max-width: 500px;
  margin-bottom: 14px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.08;
}

body.about-page .about-whoweare-content .about-sec-text {
  max-width: 505px;
  margin-bottom: 22px;
  font-size: 0.82rem;
  line-height: 1.62;
}

body.about-page .about-whoweare-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #0e80dc, #0a4c93);
  box-shadow: 0 9px 18px rgba(22, 99, 170, 0.2);
  font-size: 0.72rem;
  font-weight: 800;
}

body.about-page .about-building-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: #1268ad;
  background: #fff;
  box-shadow: 0 6px 14px rgba(4, 45, 79, 0.2);
  transform: translate(-50%, -50%);
}

body.about-page .about-building-story {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  color: #fff;
  background: rgba(4, 55, 99, 0.82);
  backdrop-filter: blur(8px);
}

body.about-page .about-building-story-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #0b5c9e;
  background: #e6f5ff;
  font-size: 0.55rem;
}

body.about-page .about-building-story strong,
body.about-page .about-building-story small {
  display: block;
}

body.about-page .about-building-story strong {
  font-size: 0.65rem;
}

body.about-page .about-building-story small {
  color: #bee5fb;
  font-size: 0.58rem;
}

@media (max-width: 900px) {
  body.about-page .contact-hero-inner {
    grid-template-columns: 1fr;
    min-height: 580px;
    padding-top: 56px;
    padding-bottom: 44px;
  }

  body.about-page .about-hero-copy {
    max-width: 650px;
  }

  body.about-page .about-hero-visual {
    min-height: 250px;
  }

  body.about-page .about-hero-visual-image {
    inset: -30px -24px -20px -24px;
  }

  body.about-page .about-hero-globe-frame {
    left: 8%;
    bottom: -30px;
    width: 145px;
    height: 145px;
  }

  body.about-page .about-hero-solution-pill {
    top: 10px;
    right: 5%;
  }

  body.about-page .about-grid-2col {
    grid-template-columns: 1fr;
    grid-template-areas: 'copy' 'visual';
  }
}

@media (max-width: 600px) {
  body.about-page .contact-hero-inner {
    min-height: 600px;
    padding-right: 22px;
    padding-left: 22px;
  }

  body.about-page .about-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
    max-width: 330px;
  }

  body.about-page .about-hero-stats .stat-item:nth-child(2) {
    border-right: 0;
  }

  body.about-page .about-hero-stats .stat-item:nth-child(3) {
    padding-left: 0;
  }

  body.about-page .about-page-title {
    font-size: 2.55rem;
  }

  body.about-page .about-hero-solution-pill {
    right: -2%;
    transform: scale(0.88);
    transform-origin: right top;
  }

  body.about-page .about-whoweare-sec {
    padding-top: 58px;
  }

  body.about-page .about-whoweare-img-inner {
    height: 270px;
  }
}

/* Final About-page overrides for the reference-led approach layout. */
body.about-page .about-approach-sec {
  padding: 68px 0 72px;
  background:
    radial-gradient(circle at 5% 15%, rgba(79, 185, 255, 0.19), transparent 28%),
    radial-gradient(circle at 96% 78%, rgba(98, 207, 255, 0.12), transparent 31%),
    linear-gradient(180deg, #f4fbff 0%, #eaf7ff 100%);
}

body.about-page .about-whychoose-sec {
  padding: 74px 0 82px;
  background:
    radial-gradient(circle at 50% 0%, rgba(166, 221, 255, 0.15), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f7fcff 100%);
}

body.about-page .whychoose-card-box {
  min-height: 160px;
  padding: 8px 28px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 900px) {
  body.about-page .about-approach-sec {
    padding-top: 58px;
    padding-bottom: 64px;
  }

  body.about-page .about-whychoose-sec {
    padding-top: 64px;
    padding-bottom: 72px;
  }
}

@media (max-width: 600px) {

  body.about-page .about-approach-sec,
  body.about-page .about-whychoose-sec {
    padding-top: 52px;
    padding-bottom: 58px;
  }
}

/* Final About-page overrides for the reference-led approach layout. */
body.about-page .about-approach-sec {
  padding: 68px 0 72px;
  background:
    radial-gradient(circle at 5% 15%, rgba(79, 185, 255, 0.19), transparent 28%),
    radial-gradient(circle at 96% 78%, rgba(98, 207, 255, 0.12), transparent 31%),
    linear-gradient(180deg, #f4fbff 0%, #eaf7ff 100%);
}

body.about-page .about-whychoose-sec {
  padding: 74px 0 82px;
  background:
    radial-gradient(circle at 50% 0%, rgba(166, 221, 255, 0.15), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f7fcff 100%);
}

body.about-page .whychoose-card-box {
  min-height: 160px;
  padding: 8px 28px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 900px) {
  body.about-page .about-approach-sec {
    padding-top: 58px;
    padding-bottom: 64px;
  }

  body.about-page .about-whychoose-sec {
    padding-top: 64px;
    padding-bottom: 72px;
  }
}

@media (max-width: 600px) {

  body.about-page .about-approach-sec,
  body.about-page .about-whychoose-sec {
    padding-top: 52px;
    padding-bottom: 58px;
  }
}

/* ==========================================================================
   ABOUT PAGE - APPROACH + TRUSTED PARTNER REDESIGN
   ========================================================================== */
body.about-page .about-approach-sec {
  position: relative;
  overflow: hidden;
  padding: 68px 0 72px;
  background:
    radial-gradient(circle at 5% 15%, rgba(79, 185, 255, 0.19), transparent 28%),
    radial-gradient(circle at 96% 78%, rgba(98, 207, 255, 0.12), transparent 31%),
    linear-gradient(180deg, #f4fbff 0%, #eaf7ff 100%);
}

body.about-page .about-approach-sec::after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -155px;
  width: 410px;
  height: 250px;
  border: 1px solid rgba(61, 174, 239, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(61, 174, 239, 0.06), 0 0 0 60px rgba(61, 174, 239, 0.045);
  pointer-events: none;
}

body.about-page .about-approach-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
}

body.about-page .about-approach-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.55fr);
  align-items: center;
  gap: clamp(44px, 6vw, 92px);
}

body.about-page .about-approach-visual {
  position: relative;
  min-height: 350px;
}

body.about-page .about-approach-image-frame {
  position: relative;
  z-index: 2;
  width: min(275px, 78%);
  height: 345px;
  margin: 0 auto;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 34px 48px 30px 48px;
  box-shadow: 0 20px 34px rgba(22, 106, 156, 0.2);
  transform: rotate(-10deg);
}

body.about-page .about-approach-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: rotate(1deg) scale(1.06);
}

body.about-page .about-approach-blob {
  position: absolute;
  display: block;
  border-radius: 48% 52% 58% 42%;
  background: linear-gradient(145deg, #56bcf4 0%, #3aa0df 100%);
  transform: rotate(-20deg);
}

body.about-page .about-approach-blob-back {
  top: 2px;
  left: 11%;
  width: 185px;
  height: 105px;
  opacity: 0.88;
}

body.about-page .about-approach-blob-front {
  right: 4%;
  bottom: 8px;
  width: 168px;
  height: 112px;
  opacity: 0.28;
  background: #63c7f5;
  transform: rotate(22deg);
}

body.about-page .about-approach-content {
  min-width: 0;
}

body.about-page .about-approach-kicker {
  margin-bottom: 10px;
  color: #148de8;
}

body.about-page .about-approach-kicker .badge-dash {
  background: #148de8;
}

body.about-page .about-approach-content h2 {
  margin: 0;
  color: #082c58;
  font-size: clamp(2rem, 3.05vw, 3rem);
  line-height: 1.08;
  letter-spacing: -1px;
}

body.about-page .about-approach-content h2 span {
  color: #147ce5;
}

body.about-page .about-approach-intro {
  max-width: 600px;
  margin: 14px 0 32px;
  color: #4d6a86;
  font-size: 0.84rem;
  line-height: 1.55;
}

body.about-page .about-approach-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

body.about-page .about-approach-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 7%;
  left: 7%;
  height: 1px;
  background: repeating-linear-gradient(90deg, #74b8df 0 4px, transparent 4px 9px);
}

body.about-page .about-approach-step {
  position: relative;
  z-index: 1;
  min-width: 0;
}

body.about-page .about-approach-step-number {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  margin-bottom: 12px;
  border: 4px solid #f4fbff;
  border-radius: 50%;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(13, 105, 166, 0.18);
}

body.about-page .approach-step-blue .about-approach-step-number,
body.about-page .approach-step-blue-dark .about-approach-step-number {
  background: #137ee5;
}

body.about-page .approach-step-green .about-approach-step-number {
  background: #16ad78;
}

body.about-page .approach-step-purple .about-approach-step-number {
  background: #8042e6;
}

body.about-page .about-approach-step h3 {
  margin: 0 0 7px;
  color: #092c57;
  font-size: 0.86rem;
  line-height: 1.22;
}

body.about-page .about-approach-step p {
  max-width: 132px;
  margin: 0;
  color: #617b94;
  font-size: 0.68rem;
  line-height: 1.42;
}

body.about-page .about-whychoose-sec {
  padding: 74px 0 82px;
  background:
    radial-gradient(circle at 50% 0%, rgba(166, 221, 255, 0.15), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f7fcff 100%);
}

body.about-page .about-whychoose-sec .whoweare-container {
  max-width: 1220px;
}

body.about-page .whychoose-header-center {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

body.about-page .whychoose-header-center .about-sec-heading {
  margin-bottom: 12px;
  font-size: clamp(1.85rem, 3vw, 2.8rem) !important;
  line-height: 1.12;
}

body.about-page .whychoose-intro {
  max-width: 650px;
  margin: 0 auto;
  color: #58718c;
  font-size: 0.82rem;
  line-height: 1.55;
}

body.about-page .whychoose-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

body.about-page .whychoose-card-box {
  position: relative;
  min-height: 160px;
  padding: 8px 28px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.about-page .whychoose-card-box:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 0;
  width: 1px;
  height: 132px;
  background: linear-gradient(180deg, transparent, #d7eaf6 18%, #d7eaf6 82%, transparent);
}

body.about-page .whychoose-top-line {
  display: none;
}

body.about-page .whychoose-icon {
  display: grid;
  place-items: center;
  width: 53px;
  height: 53px;
  margin: 0 auto 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 18px rgba(36, 117, 173, 0.1);
  font-size: 1.15rem;
}

body.about-page .whychoose-card-box.card-theme-1 .whychoose-icon {
  color: #087fd5;
  background: #e8f6ff;
}

body.about-page .whychoose-card-box.card-theme-2 .whychoose-icon {
  color: #37a94d;
  background: #ecfaef;
}

body.about-page .whychoose-card-box.card-theme-3 .whychoose-icon {
  color: #de860c;
  background: #fff4e3;
}

body.about-page .whychoose-card-box.card-theme-4 .whychoose-icon {
  color: #7d42d9;
  background: #f4eaff;
}

body.about-page .whychoose-card-title {
  margin: 0 0 7px;
  color: #092c57;
  font-size: 0.95rem;
  line-height: 1.25;
  text-align: center;
}

body.about-page .whychoose-card-desc {
  max-width: 190px;
  margin: 0 auto;
  color: #637b93;
  font-size: 0.72rem;
  line-height: 1.42;
  text-align: center;
}

@media (max-width: 900px) {
  body.about-page .about-approach-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.about-page .about-approach-visual {
    min-height: 300px;
  }

  body.about-page .about-approach-image-frame {
    width: 260px;
    height: 310px;
  }

  body.about-page .about-approach-content {
    text-align: center;
  }

  body.about-page .about-approach-kicker,
  body.about-page .about-approach-intro {
    margin-right: auto;
    margin-left: auto;
  }

  body.about-page .about-approach-steps {
    text-align: left;
  }

  body.about-page .whychoose-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 0;
  }

  body.about-page .whychoose-card-box:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 600px) {
  body.about-page .about-approach-sec {
    padding: 52px 0 58px;
  }

  body.about-page .about-approach-steps,
  body.about-page .whychoose-cards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.about-page .about-approach-steps::before,
  body.about-page .whychoose-card-box::after {
    display: none !important;
  }

  body.about-page .about-approach-step p {
    max-width: none;
  }

  body.about-page .whychoose-card-box {
    min-height: 145px;
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* ==========================================================================
   ABOUT PAGE FINAL VISUAL POLISH
   ========================================================================== */
body.about-page {
  background: #f5fbff;
}

body.about-page .about-whoweare-sec {
  padding: 82px 0 58px;
  background:
    radial-gradient(circle at 7% 16%, rgba(89, 190, 255, 0.15), transparent 25%),
    radial-gradient(circle at 94% 82%, rgba(117, 225, 205, 0.12), transparent 24%),
    linear-gradient(180deg, #f8fcff 0%, #eef8fd 100%);
}

body.about-page .about-grid-2col {
  grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(42px, 5vw, 78px);
}

body.about-page .about-whoweare-img-wrap {
  padding: 10px;
  border-radius: 28px;
  box-shadow: 0 24px 52px rgba(18, 91, 135, 0.15), 0 0 34px rgba(56, 189, 248, 0.12);
}

body.about-page .about-whoweare-img-inner {
  height: 420px;
  border-radius: 20px;
}

body.about-page .about-whoweare-content .about-sec-heading {
  max-width: 620px;
  margin-bottom: 16px;
  font-size: clamp(2.2rem, 3.1vw, 3rem);
  line-height: 1.13;
  letter-spacing: -1px;
}

body.about-page .about-whoweare-content .about-sec-text {
  max-width: 680px;
  margin-bottom: 24px;
  color: #526b85;
  font-size: 0.94rem;
  line-height: 1.68;
}

body.about-page .whoweare-feature-cards {
  gap: 14px;
  margin-top: 22px;
}

body.about-page .whoweare-card-item {
  min-height: 196px;
  padding: 20px 18px 18px;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(28, 91, 132, 0.06);
}

body.about-page .whoweare-icon-box {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 13px;
  font-size: 1rem;
}

body.about-page .whoweare-card-title {
  margin-bottom: 8px;
  font-size: 0.98rem;
}

body.about-page .whoweare-card-desc {
  font-size: 0.78rem;
  line-height: 1.5;
}

body.about-page .about-impact-strip-section {
  padding: 0;
  background: #062f4b;
}

body.about-page .about-impact-strip {
  max-width: 1400px;
  padding: 24px 34px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.about-page .about-impact-stat {
  min-height: 74px;
  padding: 7px 38px;
}

body.about-page .about-impact-stat:not(:last-child)::after {
  background: rgba(39, 195, 241, 0.42);
}

body.about-page .about-impact-icon {
  width: 43px;
  height: 43px;
  color: #08baf2;
  background: transparent;
  font-size: 1.6rem;
}

body.about-page .about-impact-copy strong {
  color: #f3fbff;
  font-size: 1.02rem;
}

body.about-page .about-impact-copy small {
  color: rgba(211, 239, 251, 0.72);
  font-size: 0.62rem;
}

body.about-page .about-page-title {
  font-size: clamp(3.1rem, 5.1vw, 4.85rem);
}

body.about-page .about-page-subtitle {
  font-size: clamp(1.18rem, 1.7vw, 1.42rem);
}

body.about-page .about-page-desc {
  font-size: 0.92rem;
}

body.about-page .about-mission-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 52px 0 62px;
  color: #fff;
  background: #062e56 url('assect/about-hero-dam.jpg') center 44% / cover no-repeat;
}

body.about-page .about-mission-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 90% 18%, rgba(35, 168, 237, 0.2), transparent 29%),
    linear-gradient(90deg, rgba(3, 35, 70, 0.985) 0%, rgba(4, 56, 96, 0.96) 55%, rgba(5, 72, 112, 0.88) 100%),
    linear-gradient(180deg, rgba(3, 37, 74, 0.9) 0%, rgba(4, 54, 95, 0.96) 100%);
}

body.about-page .about-mission-overlay::after {
  content: '';
  position: absolute;
  width: 430px;
  height: 430px;
  right: -130px;
  bottom: -230px;
  border: 1px solid rgba(96, 205, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(96, 205, 255, 0.06), 0 0 0 76px rgba(96, 205, 255, 0.04);
}

body.about-page .about-mission-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  padding-right: 26px;
  padding-left: 26px;
}

body.about-page .about-mission-heading-row {
  display: block;
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
}

body.about-page .about-mission-kicker {
  margin-bottom: 14px;
  color: #37c9f6;
  justify-content: center;
}

body.about-page .about-mission-kicker .badge-dash {
  background: #43cdf5;
}

body.about-page .about-mission-heading-row h2 {
  max-width: 820px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.95rem, 3vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -1.05px;
}

body.about-page .about-mission-heading-row h2 span {
  color: #2eb5ff;
  background: linear-gradient(90deg, #3fc9ff 0%, #1689ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.about-page .about-mission-heading-row>p {
  max-width: 650px;
  margin: 17px auto 0;
  color: rgba(238, 249, 255, 0.84);
  font-size: 0.82rem;
  line-height: 1.58;
}

body.about-page .about-mission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

body.about-page .about-mission-card {
  position: relative;
  min-height: 196px;
  padding: 22px 23px 21px;
  overflow: hidden;
  border: 1px solid rgba(205, 229, 244, 0.96);
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 14px 30px rgba(1, 24, 50, 0.17);
  color: #0a2b50;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

body.about-page .about-mission-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px rgba(1, 24, 50, 0.25);
}

body.about-page .about-mission-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--mission-card-accent, #1189ee);
}

body.about-page .about-mission-card::after {
  content: '';
  position: absolute;
  right: -54px;
  bottom: -70px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--mission-card-wash, rgba(19, 141, 240, 0.06));
  pointer-events: none;
}

body.about-page .mission-card-blue {
  --mission-card-accent: #138df0;
  --mission-card-wash: rgba(19, 141, 240, 0.08);
}

body.about-page .mission-card-green {
  --mission-card-accent: #18b66e;
  --mission-card-wash: rgba(24, 182, 110, 0.08);
}

body.about-page .mission-card-purple {
  --mission-card-accent: #8448ef;
  --mission-card-wash: rgba(132, 72, 239, 0.08);
}

body.about-page .about-mission-card-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border: 3px solid rgba(255, 255, 255, 0.32);
  border-radius: 14px;
  color: #fff;
  font-size: 1rem;
  background: linear-gradient(145deg, #0e96f2, #0874cf);
  box-shadow: 0 8px 16px rgba(20, 141, 240, 0.22);
}

body.about-page .about-mission-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

body.about-page .mission-card-green .about-mission-card-icon {
  background: linear-gradient(145deg, #25c77e, #0e9b5b);
  box-shadow: 0 8px 16px rgba(24, 182, 110, 0.2);
}

body.about-page .mission-card-purple .about-mission-card-icon {
  background: linear-gradient(145deg, #a15df4, #7133d9);
  box-shadow: 0 8px 16px rgba(132, 72, 239, 0.2);
}

body.about-page .about-mission-card h3 {
  margin: 0;
  color: #0a2b50;
  font-size: 1.08rem;
  line-height: 1.25;
}

body.about-page .about-mission-card p {
  position: relative;
  z-index: 1;
  max-width: 37ch;
  margin: 0;
  color: #58718a;
  font-size: 0.8rem;
  line-height: 1.58;
}

body.about-page .about-mission-card ul {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.about-page .about-mission-card li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #4d6680;
  font-size: 0.75rem;
  line-height: 1.3;
}

body.about-page .about-mission-card li i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #168df0;
  font-size: 0.72rem;
}

@media (max-width: 900px) {
  body.about-page .about-mission-inner {
    max-width: 100%;
    padding-right: 24px;
    padding-left: 24px;
  }

  body.about-page .about-mission-heading-row {
    max-width: 680px;
  }

  body.about-page .about-mission-heading-row>p {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 700px) {
  body.about-page .about-mission-section {
    padding: 48px 0 56px;
  }

  body.about-page .about-mission-grid {
    grid-template-columns: 1fr;
  }

  body.about-page .about-mission-inner {
    padding-right: 18px;
    padding-left: 18px;
  }

  body.about-page .about-mission-card {
    min-height: 0;
  }
}

/* Foundation section reference styling. */
body.about-page .about-mission-section {
  padding: 70px 0 78px;
  color: #092d55;
  background: #f8fcff url('assect/about-hero-dam.jpg') center / cover no-repeat;
}

body.about-page .about-mission-overlay {
  background:
    radial-gradient(circle at 8% 88%, rgba(87, 183, 240, 0.18), transparent 25%),
    linear-gradient(90deg, rgba(250, 254, 255, 0.97) 0%, rgba(250, 254, 255, 0.92) 100%);
}

body.about-page .about-mission-overlay::after {
  display: none;
}

body.about-page .about-mission-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  align-items: end;
  max-width: 1120px;
  gap: 54px;
  margin: 0 auto 30px;
  text-align: left;
}

body.about-page .about-mission-kicker {
  justify-content: flex-start;
  margin-bottom: 10px;
  color: #1089e8;
  font-size: 0.68rem;
}

body.about-page .about-mission-kicker .badge-dash {
  background: #1089e8;
}

body.about-page .about-mission-heading-row h2 {
  max-width: none;
  color: #092d55;
  font-size: clamp(2rem, 3.25vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.9px;
}

body.about-page .about-mission-heading-row h2 span {
  color: #147de4;
  background: none;
  -webkit-text-fill-color: currentColor;
}

body.about-page .about-mission-heading-row>p {
  max-width: 410px;
  margin: 0 0 5px auto;
  color: #5b7187;
  font-size: 0.8rem;
  line-height: 1.55;
}

body.about-page .about-mission-grid {
  max-width: 1120px;
  margin: 0 auto;
  gap: 24px;
}

body.about-page .about-mission-card {
  min-height: 222px;
  padding: 25px 26px 23px;
  border: 0;
  border-radius: 13px;
  background: var(--mission-card-background, rgba(239, 248, 255, 0.92));
  box-shadow: none;
  color: #092d55;
}

body.about-page .about-mission-card::before,
body.about-page .about-mission-card::after {
  display: none;
}

body.about-page .mission-card-blue {
  --mission-card-background: rgba(237, 248, 255, 0.92);
  --mission-card-accent: #087fe2;
}

body.about-page .mission-card-green {
  --mission-card-background: rgba(239, 249, 243, 0.94);
  --mission-card-accent: #329a2f;
}

body.about-page .mission-card-purple {
  --mission-card-background: rgba(255, 249, 232, 0.96);
  --mission-card-accent: #f39a12;
}

body.about-page .about-mission-card-number {
  position: absolute;
  top: 13px;
  right: 20px;
  color: rgba(165, 218, 246, 0.2);
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1;
}

body.about-page .about-mission-card-head {
  display: block;
  margin-bottom: 14px;
}

body.about-page .about-mission-card-icon {
  width: 47px;
  height: 47px;
  margin-bottom: 8px;
  border: 0;
  border-radius: 0;
  color: var(--mission-card-accent, #087fe2);
  background: transparent;
  box-shadow: none;
  font-size: 2.4rem;
}

body.about-page .mission-card-green .about-mission-card-icon {
  color: #329a2f;
}

body.about-page .mission-card-purple .about-mission-card-icon {
  color: #f39a12;
}

body.about-page .about-mission-card h3 {
  color: #092d55;
  font-size: 1.08rem;
}

body.about-page .about-mission-card p,
body.about-page .about-mission-card li {
  color: #5e7286;
  font-size: 0.78rem;
  line-height: 1.52;
}

body.about-page .about-mission-card p {
  max-width: 32ch;
}

body.about-page .about-mission-card ul {
  gap: 5px;
}

body.about-page .about-mission-card li i {
  color: #f39a12;
}

@media (max-width: 900px) {
  body.about-page .about-mission-heading-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.about-page .about-mission-heading-row>p {
    margin: 0;
  }
}

body.about-page .about-expertise-sec {
  padding: 84px 0 122px;
  background:
    radial-gradient(circle at 8% 18%, rgba(63, 179, 255, 0.13), transparent 27%),
    radial-gradient(circle at 92% 78%, rgba(112, 201, 255, 0.14), transparent 25%),
    linear-gradient(180deg, #f4fbff 0%, #eaf7ff 100%);
}

body.about-page .about-expertise-grid {
  gap: clamp(46px, 6vw, 86px);
}

body.about-page .expertise-3d-img-inner {
  border-radius: 24px;
  box-shadow: 0 24px 48px rgba(19, 89, 132, 0.16);
}

body.about-page .about-journey-sec {
  padding-top: 86px;
  background-color: #eef8fd;
}

/* Reference-matched About journey: curved landscape image + four milestone timeline. */
body.about-page .about-journey-reference {
  position: relative;
  overflow: hidden;
  padding: 76px 0 84px;
  background:
    radial-gradient(circle at 10% 18%, rgba(83, 185, 244, 0.14), transparent 28%),
    linear-gradient(180deg, #f8fcff 0%, #edf8fd 100%);
}

body.about-page .about-journey-reference::after {
  content: '';
  position: absolute;
  right: -150px;
  bottom: -170px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(77, 177, 232, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(77, 177, 232, 0.06), 0 0 0 68px rgba(77, 177, 232, 0.035);
  pointer-events: none;
}

body.about-page .about-journey-reference-container {
  position: relative;
  z-index: 1;
  max-width: 1140px;
}

body.about-page .about-journey-reference-layout {
  display: grid;
  grid-template-columns: minmax(285px, 0.74fr) minmax(0, 1.46fr);
  align-items: center;
  gap: clamp(42px, 6vw, 84px);
}

body.about-page .about-journey-reference-visual {
  position: relative;
  min-height: 334px;
}

body.about-page .about-journey-reference-blob {
  position: absolute;
  inset: 8px 22px 18px -22px;
  border-radius: 45% 55% 52% 48%;
  background: linear-gradient(145deg, #65baf0 0%, #bfeafa 72%, rgba(222, 247, 255, 0.3) 100%);
  transform: rotate(-10deg);
  opacity: 0.86;
}

body.about-page .about-journey-reference-image {
  position: relative;
  z-index: 1;
  width: min(100%, 370px);
  height: 334px;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 22px 48% 48% 22px;
  box-shadow: 0 22px 42px rgba(29, 103, 145, 0.18);
  clip-path: ellipse(86% 86% at 39% 50%);
}

body.about-page .about-journey-reference-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.02);
}

body.about-page .about-journey-reference-content {
  position: relative;
}

body.about-page .about-journey-reference-kicker {
  justify-content: flex-start;
  margin-bottom: 12px;
}

body.about-page .about-journey-reference-content h2 {
  max-width: 620px;
  margin: 0;
  color: #0b2c53;
  font-size: clamp(2rem, 3.45vw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

body.about-page .about-journey-reference-content h2 span {
  background: linear-gradient(90deg, #0c72d5 0%, #16a8ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.about-page .about-journey-reference-intro {
  max-width: 610px;
  margin: 14px 0 0;
  color: #526f8c;
  font-size: 0.92rem;
  line-height: 1.55;
}

body.about-page .about-journey-reference-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

body.about-page .about-journey-reference-timeline::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 7%;
  right: 7%;
  border-top: 2px dotted #addbec;
}

body.about-page .about-journey-reference-step {
  position: relative;
  z-index: 1;
  min-width: 0;
}

body.about-page .about-journey-reference-step:not(:last-child)::after {
  content: '›';
  position: absolute;
  top: 13px;
  right: -11px;
  color: #2b9ce1;
  font-size: 1.25rem;
  font-weight: 800;
}

body.about-page .about-journey-reference-node {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 13px;
  border: 4px solid #f8fcff;
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 7px 15px rgba(38, 132, 181, 0.16);
}

body.about-page .about-journey-reference-step h3 {
  margin: 0 0 6px;
  color: #0d315a;
  font-size: 0.88rem;
  line-height: 1.2;
}

body.about-page .about-journey-reference-step p {
  max-width: 145px;
  margin: 0;
  color: #607a95;
  font-size: 0.68rem;
  line-height: 1.42;
}

body.about-page .journey-reference-cyan .about-journey-reference-node {
  background: #18b5c5;
}

body.about-page .journey-reference-blue .about-journey-reference-node {
  background: #1474d4;
}

body.about-page .journey-reference-purple .about-journey-reference-node {
  background: #8847df;
}

body.about-page .journey-reference-orange .about-journey-reference-node {
  background: #f49a12;
}

@media (max-width: 980px) {
  body.about-page .about-journey-reference-layout {
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
    gap: 34px;
  }

  body.about-page .about-journey-reference-image {
    height: 300px;
  }

  body.about-page .about-journey-reference-visual {
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  body.about-page .about-journey-reference {
    padding: 58px 0 64px;
  }

  body.about-page .about-journey-reference-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  body.about-page .about-journey-reference-visual {
    min-height: 260px;
  }

  body.about-page .about-journey-reference-image {
    width: min(100%, 420px);
    height: 270px;
    margin: 0 auto;
  }

  body.about-page .about-journey-reference-content {
    text-align: center;
  }

  body.about-page .about-journey-reference-kicker {
    justify-content: center;
  }

  body.about-page .about-journey-reference-content h2,
  body.about-page .about-journey-reference-intro {
    margin-left: auto;
    margin-right: auto;
  }

  body.about-page .about-journey-reference-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 26px;
    text-align: left;
  }

  body.about-page .about-journey-reference-timeline::before {
    display: none;
  }

  body.about-page .about-journey-reference-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 460px) {
  body.about-page .about-journey-reference-timeline {
    grid-template-columns: 1fr;
  }

  body.about-page .about-journey-reference-step p {
    max-width: 230px;
  }
}

/* Final screenshot match for the newly added journey section. */
body.about-page .about-journey-reference {
  padding: 28px 0 58px;
  background:
    radial-gradient(circle at 82% 10%, rgba(189, 228, 255, 0.25), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

body.about-page .about-journey-reference::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  opacity: 0.58;
  pointer-events: none;
  background-image: radial-gradient(rgba(71, 166, 231, 0.15) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 35%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 35%, #000 100%);
}

body.about-page .about-journey-reference-container {
  max-width: 1580px;
  padding: 0 28px;
}

body.about-page .about-journey-reference-layout {
  grid-template-columns: minmax(520px, 0.92fr) minmax(650px, 1.08fr);
  gap: clamp(38px, 4.5vw, 82px);
}

body.about-page .about-journey-reference-visual {
  min-height: 470px;
}

body.about-page .about-journey-reference-blob {
  inset: 16px 34px 20px -20px;
  border-radius: 48% 52% 50% 50%;
  background: linear-gradient(145deg, #a8e3ff 0%, #dff6ff 70%, rgba(235, 250, 255, 0.3) 100%);
  transform: rotate(-7deg);
  opacity: 0.78;
}

body.about-page .about-journey-reference-image {
  width: 100%;
  height: 470px;
  border-radius: 0 46% 46% 0;
  box-shadow: 0 22px 44px rgba(24, 99, 145, 0.18);
  clip-path: none;
}

body.about-page .about-journey-reference-content h2 {
  max-width: 720px;
  font-size: clamp(2.4rem, 4.15vw, 4.45rem);
  font-weight: 850;
  line-height: 0.99;
  letter-spacing: -0.065em;
}

body.about-page .about-journey-reference-content h2 span {
  background: linear-gradient(90deg, #087edc 0%, #22a9ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.about-page .about-journey-reference-intro {
  max-width: 720px;
  margin-top: 20px;
  font-size: clamp(0.9rem, 1.1vw, 1.08rem);
  line-height: 1.52;
}

body.about-page .about-journey-reference-timeline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 38px;
}

body.about-page .about-journey-reference-timeline::before {
  top: 39px;
  right: 6%;
  left: 6%;
  border-top: 2px dotted #b7dff3;
}

body.about-page .about-journey-reference-step {
  text-align: center;
}

body.about-page .about-journey-reference-step:not(:last-child)::after {
  content: '→';
  top: 22px;
  right: -17px;
  color: #499fe0;
  font-size: 1.5rem;
}

body.about-page .about-journey-reference-node {
  width: 78px;
  height: 78px;
  margin: 0 auto 17px;
  border: 5px solid rgba(255, 255, 255, 0.92);
  font-size: 1.45rem;
  box-shadow: 0 10px 22px rgba(36, 124, 181, 0.2);
}

body.about-page .about-journey-reference-step h3 {
  margin-bottom: 8px;
  font-size: clamp(0.9rem, 1.1vw, 1.12rem);
}

body.about-page .about-journey-reference-step p {
  max-width: 170px;
  font-size: 0.76rem;
  line-height: 1.48;
}

@media (max-width: 1180px) {
  body.about-page .about-journey-reference-layout {
    grid-template-columns: minmax(410px, 0.86fr) minmax(0, 1.14fr);
    gap: 40px;
  }

  body.about-page .about-journey-reference-visual,
  body.about-page .about-journey-reference-image {
    min-height: 390px;
    height: 390px;
  }
}

@media (max-width: 820px) {
  body.about-page .about-journey-reference {
    padding: 62px 0 70px;
  }

  body.about-page .about-journey-reference-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  body.about-page .about-journey-reference-visual {
    min-height: 310px;
  }

  body.about-page .about-journey-reference-image {
    width: min(100%, 620px);
    height: 310px;
    margin: 0 auto;
  }

  body.about-page .about-journey-reference-content {
    text-align: center;
  }

  body.about-page .about-journey-reference-kicker {
    justify-content: center;
  }

  body.about-page .about-journey-reference-content h2,
  body.about-page .about-journey-reference-intro {
    margin-right: auto;
    margin-left: auto;
  }

  body.about-page .about-journey-reference-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  body.about-page .about-journey-reference-timeline::before,
  body.about-page .about-journey-reference-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  body.about-page .about-journey-reference-container {
    padding: 0 18px;
  }

  body.about-page .about-journey-reference-content h2 {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }

  body.about-page .about-journey-reference-timeline {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.about-page .about-journey-reference-step p {
    max-width: 250px;
  }
}

body.about-page .about-whychoose-sec {
  padding: 88px 0 102px;
  background:
    radial-gradient(circle at 10% 10%, rgba(105, 192, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #f7fcff 0%, #eef8fd 100%);
}

body.about-page .whychoose-card-box {
  min-height: 214px;
  border-radius: 20px;
  box-shadow: 0 12px 26px rgba(26, 91, 132, 0.08);
}

/* Keep the new About reference layout ahead of legacy page polish rules. */
body.about-page .about-whoweare-sec {
  padding: 72px 0 66px;
  background: #fff;
}

body.about-page .about-grid-2col {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  grid-template-areas: 'copy visual';
  gap: clamp(42px, 6vw, 84px);
}

body.about-page .about-whoweare-content {
  grid-area: copy;
}

body.about-page .about-whoweare-img-wrap {
  grid-area: visual;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: 0 18px 40px rgba(24, 88, 127, 0.16);
}

body.about-page .about-whoweare-img-inner {
  height: 330px;
  border: 4px solid #fff;
  border-radius: 19px;
  box-shadow: none;
}

body.about-page .about-whoweare-content .about-sec-heading {
  max-width: 500px;
  margin-bottom: 14px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.08;
}

body.about-page .about-whoweare-content .about-sec-text {
  max-width: 505px;
  margin-bottom: 22px;
  font-size: 0.82rem;
  line-height: 1.62;
}

body.about-page .about-whychoose-sec {
  padding: 74px 0 82px;
  background:
    radial-gradient(circle at 50% 0%, rgba(166, 221, 255, 0.15), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f7fcff 100%);
}

body.about-page .whychoose-card-box {
  min-height: 160px;
  padding: 8px 28px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 900px) {
  body.about-page .about-grid-2col {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  body.about-page .about-whoweare-img-inner {
    height: min(54vw, 430px);
  }
}

@media (max-width: 520px) {
  body.about-page .about-whoweare-sec {
    padding: 58px 0 34px;
  }

  body.about-page .about-whoweare-img-inner {
    height: 290px;
  }

  body.about-page .whoweare-feature-cards {
    grid-template-columns: 1fr;
  }

  body.about-page .about-expertise-sec,
  body.about-page .about-whychoose-sec {
    padding-top: 62px;
    padding-bottom: 76px;
  }
}

/* Why Choose Us — exact connected-card reference treatment. */
body.about-page .about-whychoose-sec {
  position: relative;
  overflow: hidden;
  padding: 52px 0 34px;
  background:
    radial-gradient(circle at 4% 42%, rgba(79, 174, 238, 0.18), transparent 28%),
    radial-gradient(circle at 98% 58%, rgba(114, 215, 255, 0.2), transparent 25%),
    linear-gradient(180deg, #f8fdff 0%, #edf8ff 100%);
}

body.about-page .about-whychoose-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.48;
  pointer-events: none;
  background-image: radial-gradient(rgba(46, 145, 218, 0.16) 1px, transparent 1px);
  background-size: 19px 19px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
}

body.about-page .about-whychoose-sec .whoweare-container {
  position: relative;
  z-index: 1;
  max-width: 1540px;
  padding: 0 26px;
}

body.about-page .whychoose-header-center {
  display: none;
}

body.about-page .whychoose-connection-art {
  position: absolute;
  z-index: 0;
  top: -31px;
  right: 3%;
  left: 3%;
  height: 150px;
  pointer-events: none;
}

body.about-page .whychoose-connection-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body.about-page .whychoose-connection-path {
  fill: none;
  stroke: url(#whyChooseJourneyGradient);
  stroke-width: 3;
  stroke-linecap: round;
}

body.about-page .connection-node {
  fill: #ffffff;
  stroke-width: 4;
}

body.about-page .node-blue {
  stroke: #258bec;
}

body.about-page .node-green {
  stroke: #18a84b;
}

body.about-page .node-orange {
  stroke: #ee8c11;
}

body.about-page .whychoose-cards-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1540px;
  margin: 0 auto;
  padding-top: 42px;
}

body.about-page .whychoose-card-box {
  position: relative;
  min-height: 282px;
  padding: 73px 36px 34px;
  border: 1px solid rgba(104, 177, 226, 0.32);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 17px 30px rgba(37, 111, 161, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: visible;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

body.about-page .whychoose-card-box:hover {
  transform: translateY(-7px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 42px rgba(37, 111, 161, 0.17), 0 0 0 4px rgba(91, 188, 239, 0.08);
}

body.about-page .whychoose-card-box.card-theme-1 {
  border-color: rgba(76, 166, 237, 0.34);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(232, 247, 255, 0.76));
}

body.about-page .whychoose-card-box.card-theme-2 {
  border-color: rgba(75, 190, 112, 0.3);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(235, 255, 239, 0.76));
}

body.about-page .whychoose-card-box.card-theme-3 {
  border-color: rgba(242, 163, 48, 0.3);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 248, 232, 0.78));
}

body.about-page .whychoose-card-box.card-theme-4 {
  border-color: rgba(142, 105, 235, 0.3);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(245, 240, 255, 0.78));
}

body.about-page .whychoose-card-box::before,
body.about-page .whychoose-card-box::after {
  display: none !important;
}

body.about-page .whychoose-top-line {
  display: none;
}

body.about-page .whychoose-card-number {
  position: absolute;
  top: 11px;
  right: 32px;
  color: rgba(28, 126, 208, 0.27);
  font-size: 2.75rem;
  font-weight: 850;
  letter-spacing: -0.08em;
  line-height: 1;
}

body.about-page .card-theme-2 .whychoose-card-number {
  color: rgba(47, 182, 83, 0.27);
}

body.about-page .card-theme-3 .whychoose-card-number {
  color: rgba(237, 142, 15, 0.28);
}

body.about-page .card-theme-4 .whychoose-card-number {
  color: rgba(111, 65, 220, 0.26);
}

body.about-page .whychoose-icon {
  position: absolute;
  z-index: 2;
  top: -47px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  margin: 0;
  border: 7px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.78rem;
  transform: translateX(-50%);
  box-shadow: 0 10px 20px rgba(22, 99, 155, 0.2);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

body.about-page .whychoose-card-box:hover .whychoose-icon {
  transform: translateX(-50%) scale(1.06);
  box-shadow: 0 14px 25px rgba(22, 99, 155, 0.25);
}

body.about-page .whychoose-card-box.card-theme-1 .whychoose-icon {
  background: linear-gradient(145deg, #258bf0, #0863ce);
}

body.about-page .whychoose-card-box.card-theme-2 .whychoose-icon {
  background: linear-gradient(145deg, #20b957, #078332);
}

body.about-page .whychoose-card-box.card-theme-3 .whychoose-icon {
  background: linear-gradient(145deg, #f39a1b, #dc6f00);
}

body.about-page .whychoose-card-box.card-theme-4 .whychoose-icon {
  background: linear-gradient(145deg, #733de0, #4a16bf);
}

body.about-page .whychoose-card-title {
  margin: 0;
  color: #092b57;
  font-size: clamp(1.08rem, 1.45vw, 1.52rem);
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
}

body.about-page .whychoose-card-title span {
  color: #168df0;
}

body.about-page .card-theme-2 .whychoose-card-title span {
  color: #139a42;
}

body.about-page .card-theme-3 .whychoose-card-title span {
  color: #e87b08;
}

body.about-page .card-theme-4 .whychoose-card-title span {
  color: #6030d1;
}

body.about-page .whychoose-title-line {
  display: block;
  width: 34px;
  height: 3px;
  margin: 14px 0 15px;
  border-radius: 999px;
  background: #168df0;
}

body.about-page .card-theme-2 .whychoose-title-line {
  background: #16a84b;
}

body.about-page .card-theme-3 .whychoose-title-line {
  background: #ef8410;
}

body.about-page .card-theme-4 .whychoose-title-line {
  background: #6a35d8;
}

body.about-page .whychoose-card-desc {
  max-width: 285px;
  margin: 0;
  color: #637a94;
  font-size: clamp(0.78rem, 0.92vw, 0.98rem);
  line-height: 1.55;
  text-align: left;
}

body.about-page .whychoose-card-art {
  position: absolute;
  right: 26px;
  bottom: 15px;
  color: rgba(39, 139, 226, 0.2);
  font-size: 3.9rem;
  line-height: 1;
  pointer-events: none;
}

body.about-page .card-theme-2 .whychoose-card-art {
  color: rgba(27, 176, 82, 0.2);
}

body.about-page .card-theme-3 .whychoose-card-art {
  color: rgba(237, 148, 24, 0.2);
}

body.about-page .card-theme-4 .whychoose-card-art {
  color: rgba(115, 70, 221, 0.2);
}

@media (max-width: 1050px) {
  body.about-page .whychoose-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 68px;
  }
}

@media (max-width: 600px) {
  body.about-page .about-whychoose-sec {
    padding: 54px 0 64px;
  }

  body.about-page .about-whychoose-sec .whoweare-container {
    padding: 0 18px;
  }

  body.about-page .whychoose-connection-art {
    display: none;
  }

  body.about-page .whychoose-cards-grid {
    grid-template-columns: 1fr;
    gap: 62px;
    padding-top: 48px;
  }

  body.about-page .whychoose-card-box {
    min-height: 250px;
    padding-right: 28px;
    padding-left: 28px;
  }

  body.about-page .whychoose-card-title {
    font-size: 1.28rem;
  }
}

/* Final Why Choose Us composition — match the connected-card reference. */
/* Keep the About hero banner content as wide as the Contact page container. */
body.about-page .contact-hero-inner {
  max-width: 1720px;
  padding-right: 40px;
  padding-left: 40px;
}

@media (max-width: 1199px) {
  body.about-page .contact-hero-inner {
    max-width: 100%;
    padding-right: 28px;
    padding-left: 28px;
  }
}

@media (max-width: 700px) {
  body.about-page .contact-hero-inner {
    padding-right: 18px;
    padding-left: 18px;
  }
}

body.about-page .about-whychoose-sec {
  padding: 34px 0 76px;
  background:
    linear-gradient(90deg, rgba(242, 250, 255, 0.22) 0%, rgba(255, 255, 255, 0.76) 28%, rgba(255, 255, 255, 0.93) 61%, rgba(246, 252, 255, 0.48) 100%),
    url('assect/about-journey-backdrop-v2.png') center / cover no-repeat;
}

body.about-page .about-whychoose-sec::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -28%;
  width: 56%;
  height: 64%;
  border: 18px solid rgba(91, 183, 241, 0.12);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-18deg);
  pointer-events: none;
}

body.about-page .about-whychoose-sec .whoweare-container {
  position: relative;
  z-index: 1;
  max-width: 1640px;
  padding: 0 32px;
}

body.about-page .whychoose-header-center {
  display: block;
  max-width: 900px;
  margin: 0 auto 18px;
  text-align: center;
}

body.about-page .whychoose-header-center .about-sec-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  color: #087ddd;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 3px;
}

body.about-page .whychoose-header-center .badge-dash {
  width: 46px;
  height: 3px;
  background: #087ddd;
  border-radius: 99px;
}

body.about-page .whychoose-header-center .about-sec-heading {
  margin: 0 auto 14px;
  color: #091f49 !important;
  font-size: clamp(2.25rem, 4.4vw, 4.25rem) !important;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.055em;
}

body.about-page .whychoose-header-center .highlight-text {
  color: #1389ee !important;
  background: linear-gradient(100deg, #087ddd 0%, #197ef2 48%, #6655e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.about-page .whychoose-header-center .whychoose-intro {
  max-width: 820px;
  margin: 0 auto;
  color: #4e6786;
  font-size: clamp(0.95rem, 1.25vw, 1.18rem);
  line-height: 1.55;
}

body.about-page .whychoose-connection-art {
  top: 284px;
  right: 2%;
  left: 2%;
  height: 158px;
  z-index: 1;
  opacity: 0.95;
}

body.about-page .whychoose-connection-art svg {
  width: 100%;
  height: 100%;
}

body.about-page .whychoose-cards-grid {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  padding: 72px 0 0;
  gap: 22px;
}

body.about-page .whychoose-card-box {
  min-height: 286px;
  padding: 76px 40px 34px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(242, 249, 255, 0.57));
  box-shadow: 0 22px 38px rgba(26, 111, 180, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

body.about-page .whychoose-card-box::before {
  opacity: 0.92;
  border-radius: 26px;
}

body.about-page .whychoose-card-box.card-theme-1 {
  --why-color: #1687e8;
}

body.about-page .whychoose-card-box.card-theme-2 {
  --why-color: #159842;
}

body.about-page .whychoose-card-box.card-theme-3 {
  --why-color: #e77d0a;
}

body.about-page .whychoose-card-box.card-theme-4 {
  --why-color: #6232d7;
}

body.about-page .whychoose-icon {
  top: -52px;
  width: 104px;
  height: 104px;
  border-width: 7px;
  box-shadow: 0 12px 20px rgba(11, 101, 182, 0.23);
}

body.about-page .whychoose-card-number {
  top: 17px;
  right: 30px;
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.22;
}

body.about-page .whychoose-card-title {
  position: relative;
  z-index: 2;
  margin-bottom: 13px;
  color: #0b214d;
  font-size: clamp(1.35rem, 1.65vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

body.about-page .whychoose-card-title span {
  color: var(--why-color) !important;
}

body.about-page .whychoose-title-line {
  width: 38px;
  height: 3px;
  margin-bottom: 17px;
  border-radius: 99px;
  background: var(--why-color);
}

body.about-page .whychoose-card-desc {
  position: relative;
  z-index: 2;
  max-width: 310px;
  margin: 0;
  color: #59708d;
  font-size: 1.02rem;
  line-height: 1.58;
}

body.about-page .whychoose-card-art {
  right: 28px;
  bottom: 24px;
  font-size: 4.15rem;
  opacity: 0.16;
}

@media (max-width: 1200px) {
  body.about-page .whychoose-card-box {
    padding-right: 28px;
    padding-left: 28px;
  }

  body.about-page .whychoose-card-title {
    font-size: 1.34rem;
  }

  body.about-page .whychoose-card-desc {
    font-size: 0.95rem;
  }
}

@media (max-width: 1050px) {
  body.about-page .whychoose-connection-art {
    top: 296px;
  }

  body.about-page .whychoose-cards-grid {
    padding-top: 76px;
  }

  body.about-page .whychoose-card-title {
    white-space: normal;
  }
}

@media (max-width: 600px) {
  body.about-page .about-whychoose-sec {
    padding: 58px 0 68px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(245, 252, 255, 0.93)),
      url('assect/about-journey-backdrop-v2.png') center / cover no-repeat;
  }

  body.about-page .about-whychoose-sec .whoweare-container {
    padding: 0 18px;
  }

  body.about-page .whychoose-header-center {
    margin-bottom: 12px;
  }

  body.about-page .whychoose-header-center .about-sec-badge {
    gap: 9px;
    font-size: 0.68rem;
    letter-spacing: 2px;
  }

  body.about-page .whychoose-header-center .badge-dash {
    width: 28px;
    height: 2px;
  }

  body.about-page .whychoose-header-center .about-sec-heading {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
  }

  body.about-page .whychoose-header-center .whychoose-intro {
    font-size: 0.92rem;
  }

  body.about-page .whychoose-connection-art {
    display: none;
  }

  body.about-page .whychoose-cards-grid {
    grid-template-columns: 1fr;
    gap: 62px;
    padding-top: 68px;
  }

  body.about-page .whychoose-card-box {
    min-height: 266px;
    padding: 74px 28px 30px;
  }

  body.about-page .whychoose-card-title {
    font-size: 1.38rem;
  }
}

/* Final visual polish: keep the Why Choose heading consistent with Home. */
body.about-page .about-whychoose-sec {
  background:
    linear-gradient(90deg, rgba(235, 248, 255, 0.34) 0%, rgba(255, 255, 255, 0.82) 28%, rgba(255, 255, 255, 0.94) 62%, rgba(241, 250, 255, 0.56) 100%),
    url('assect/about-journey-backdrop-v2.png') center / cover no-repeat;
}

body.about-page .whychoose-header-center .about-sec-heading {
  max-width: 980px;
  font-size: clamp(2.2rem, 3.25vw, 3.5rem) !important;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

body.about-page .whychoose-header-center .whychoose-intro {
  max-width: 780px;
  font-size: 1rem;
  line-height: 1.55;
}

body.about-page .whychoose-card-box {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 34px rgba(21, 93, 151, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body.about-page .whychoose-card-box.card-theme-1 .whychoose-icon,
body.about-page .whychoose-card-box.card-theme-2 .whychoose-icon,
body.about-page .whychoose-card-box.card-theme-3 .whychoose-icon,
body.about-page .whychoose-card-box.card-theme-4 .whychoose-icon {
  color: #ffffff !important;
}

body.about-page .whychoose-card-box.card-theme-1 .whychoose-card-number {
  color: #1687e8;
}

body.about-page .whychoose-card-box.card-theme-2 .whychoose-card-number {
  color: #159842;
}

body.about-page .whychoose-card-box.card-theme-3 .whychoose-card-number {
  color: #e77d0a;
}

body.about-page .whychoose-card-box.card-theme-4 .whychoose-card-number {
  color: #6232d7;
}

@media (max-width: 600px) {
  body.about-page .whychoose-header-center .about-sec-heading {
    font-size: clamp(2rem, 9vw, 2.65rem) !important;
  }
}

/* Compact card row: remove the excess empty space inside each card. */
@media (min-width: 1051px) {
  body.about-page .whychoose-cards-grid {
    max-width: 1600px;
    gap: 14px;
    padding-top: 58px;
  }

  body.about-page .whychoose-card-box {
    min-height: 252px;
    padding: 64px 30px 26px;
    border-radius: 22px;
  }

  body.about-page .whychoose-card-box::before {
    border-radius: 22px;
  }

  body.about-page .whychoose-icon {
    top: -44px;
    width: 88px;
    height: 88px;
    border-width: 6px;
    font-size: 1.5rem;
  }

  body.about-page .whychoose-card-number {
    top: 15px;
    right: 24px;
    font-size: 2.65rem;
  }

  body.about-page .whychoose-card-title {
    margin-bottom: 10px;
    font-size: clamp(1.18rem, 1.35vw, 1.48rem);
  }

  body.about-page .whychoose-title-line {
    width: 34px;
    height: 3px;
    margin-bottom: 13px;
  }

  body.about-page .whychoose-card-desc {
    max-width: 285px;
    font-size: 0.92rem;
    line-height: 1.5;
  }

  body.about-page .whychoose-card-art {
    right: 22px;
    bottom: 17px;
    font-size: 3.4rem;
  }
}

/* Add comfortable space above the Why Choose Us section. */
body.about-page .about-whychoose-sec {
  padding-top: 78px;
}

@media (max-width: 600px) {
  body.about-page .about-whychoose-sec {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  body.about-page .whychoose-header-center {
    margin-bottom: 8px;
  }

  body.about-page .whychoose-header-center .about-sec-heading {
    font-size: clamp(1.8rem, 8.6vw, 2.35rem) !important;
    line-height: 1.1;
  }

  body.about-page .whychoose-header-center .whychoose-intro {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  body.about-page .whychoose-cards-grid {
    gap: 46px;
    padding-top: 42px;
  }

  body.about-page .whychoose-card-box {
    min-height: 0;
    padding: 50px 20px 20px;
    border-radius: 20px;
  }

  body.about-page .whychoose-icon {
    top: -34px;
    width: 68px;
    height: 68px;
    border-width: 5px;
    font-size: 1.45rem;
  }

  body.about-page .whychoose-card-number {
    top: 14px;
    right: 22px;
    font-size: 2.8rem;
  }

  body.about-page .whychoose-card-title {
    margin-bottom: 8px;
    font-size: 1.08rem;
    line-height: 1.2;
    white-space: normal;
  }

  body.about-page .whychoose-title-line {
    width: 34px;
    margin-bottom: 13px;
  }

  body.about-page .whychoose-card-desc {
    max-width: 100%;
    font-size: 0.82rem;
    line-height: 1.48;
  }
}

/* Final Our Journey polish — match the Why Choose typography and rhythm. */
body.about-page .about-journey-reference {
  padding: 64px 0 76px;
  background:
    radial-gradient(circle at 82% 10%, rgba(189, 228, 255, 0.25), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

body.about-page .about-journey-reference-content h2 {
  max-width: 760px;
  font-size: clamp(2.2rem, 3.25vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

body.about-page .about-journey-reference-intro {
  max-width: 760px;
  margin-top: 16px;
  color: #4e6786;
  font-size: 1rem;
  line-height: 1.55;
}

body.about-page .about-journey-reference-timeline {
  gap: 16px;
  margin-top: 34px;
}

body.about-page .about-journey-reference-timeline::before {
  top: 36px;
  right: 5%;
  left: 5%;
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, #18b5c5 0%, #1474d4 34%, #8847df 68%, #f49a12 100%);
  opacity: 0.46;
}

body.about-page .about-journey-reference-step:not(:last-child)::after {
  top: 21px;
  right: -13px;
  color: #2b9ce1;
  font-size: 1.25rem;
}

body.about-page .about-journey-reference-node {
  width: 74px;
  height: 74px;
  margin: 0 auto 15px;
  border: 6px solid rgba(255, 255, 255, 0.94);
  font-size: 1.35rem;
  box-shadow: 0 11px 22px rgba(36, 124, 181, 0.2);
}

body.about-page .about-journey-reference-step h3 {
  margin-bottom: 9px;
  color: #0b214d;
  font-size: clamp(1.18rem, 1.35vw, 1.48rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

body.about-page .about-journey-reference-step p {
  max-width: 180px;
  color: #59708d;
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (max-width: 820px) {
  body.about-page .about-journey-reference {
    padding: 58px 0 68px;
  }

  body.about-page .about-journey-reference-content h2 {
    font-size: clamp(2.2rem, 8vw, 3.1rem);
  }

  body.about-page .about-journey-reference-step h3 {
    font-size: 1.18rem;
  }
}

/* Final Our Journey milestone cards — a cleaner match for Why Choose Us. */
body.about-page .about-journey-reference-timeline {
  gap: 14px;
  margin-top: 62px;
  align-items: stretch;
}

body.about-page .about-journey-reference-timeline::before {
  top: 0;
  right: 5%;
  left: 5%;
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, #18b5c5 0%, #1474d4 34%, #8847df 68%, #f49a12 100%);
  opacity: 0.55;
}

body.about-page .about-journey-reference-step {
  min-height: 196px;
  padding: 48px 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 30px rgba(26, 111, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
}

body.about-page .journey-reference-cyan {
  border-color: rgba(24, 181, 197, 0.3);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(232, 251, 255, 0.76));
}

body.about-page .journey-reference-blue {
  border-color: rgba(20, 116, 212, 0.26);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(234, 245, 255, 0.78));
}

body.about-page .journey-reference-purple {
  border-color: rgba(136, 71, 223, 0.26);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(246, 239, 255, 0.8));
}

body.about-page .journey-reference-orange {
  border-color: rgba(244, 154, 18, 0.3);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 247, 229, 0.8));
}

body.about-page .about-journey-reference-node {
  position: absolute;
  top: -38px;
  left: 50%;
  width: 76px;
  height: 76px;
  margin: 0;
  border-width: 6px;
  transform: translateX(-50%);
  z-index: 2;
}

body.about-page .about-journey-reference-step:not(:last-child)::after {
  top: -15px;
  right: -14px;
  z-index: 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(170, 218, 244, 0.7);
  border-radius: 50%;
  color: #2b9ce1;
  background: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  box-shadow: 0 5px 12px rgba(55, 142, 194, 0.12);
}

body.about-page .about-journey-reference-step h3 {
  margin-bottom: 9px;
  color: #0b214d;
  font-size: clamp(1.18rem, 1.35vw, 1.48rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

body.about-page .about-journey-reference-step p {
  max-width: 190px;
  color: #59708d;
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (max-width: 820px) {
  body.about-page .about-journey-reference-step {
    min-height: 190px;
  }

  body.about-page .about-journey-reference-timeline::before,
  body.about-page .about-journey-reference-step:not(:last-child)::after {
    display: none;
  }
}

/* Extra refinement for the milestone cards. */
body.about-page .about-journey-reference-step {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

body.about-page .about-journey-reference-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 38px rgba(26, 111, 180, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body.about-page .about-journey-reference-step::before {
  position: absolute;
  top: 14px;
  right: 17px;
  color: rgba(12, 57, 103, 0.2);
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

body.about-page .about-journey-reference-step:nth-child(1)::before {
  content: '01';
  color: rgba(24, 181, 197, 0.42);
}

body.about-page .about-journey-reference-step:nth-child(2)::before {
  content: '02';
  color: rgba(20, 116, 212, 0.38);
}

body.about-page .about-journey-reference-step:nth-child(3)::before {
  content: '03';
  color: rgba(136, 71, 223, 0.38);
}

body.about-page .about-journey-reference-step:nth-child(4)::before {
  content: '04';
  color: rgba(244, 154, 18, 0.46);
}

body.about-page .journey-reference-cyan {
  box-shadow: inset 0 3px 0 #18b5c5, 0 16px 30px rgba(26, 111, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body.about-page .journey-reference-blue {
  box-shadow: inset 0 3px 0 #1474d4, 0 16px 30px rgba(26, 111, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body.about-page .journey-reference-purple {
  box-shadow: inset 0 3px 0 #8847df, 0 16px 30px rgba(26, 111, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body.about-page .journey-reference-orange {
  box-shadow: inset 0 3px 0 #f49a12, 0 16px 30px rgba(26, 111, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body.about-page .about-journey-reference-node {
  width: 70px;
  height: 70px;
  top: -35px;
  font-size: 1.22rem;
}

body.about-page .about-journey-reference-step:not(:last-child)::after {
  top: -13px;
  right: -14px;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: #2b9ce1;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  box-shadow: none;
}

body.about-page .about-journey-reference-step h3 {
  font-size: clamp(1.2rem, 1.38vw, 1.5rem);
}

/* Full-bleed Our Journey split layout: image flush to the left edge. */
body.about-page .about-journey-reference {
  padding: 0;
  background:
    radial-gradient(circle at 76% 14%, rgba(189, 228, 255, 0.26), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
}

body.about-page .about-journey-reference-container {
  width: 100%;
  max-width: none;
  padding: 0;
}

body.about-page .about-journey-reference-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

body.about-page .about-journey-reference-visual {
  min-height: 560px;
}

body.about-page .about-journey-reference-blob {
  inset: 30px 8% 30px -10%;
  opacity: 0.72;
}

body.about-page .about-journey-reference-image {
  width: 100%;
  height: 560px;
  border: 0;
  border-right: 5px solid rgba(255, 255, 255, 0.96);
  border-radius: 0 48% 48% 0;
  box-shadow: 18px 20px 42px rgba(24, 99, 145, 0.16);
  clip-path: none;
}

body.about-page .about-journey-reference-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 900px;
  padding: 66px clamp(32px, 5vw, 86px) 66px clamp(36px, 4vw, 72px);
}

body.about-page .about-journey-reference-content h2,
body.about-page .about-journey-reference-intro {
  max-width: 760px;
}

@media (max-width: 1100px) {
  body.about-page .about-journey-reference-content {
    padding-right: 34px;
    padding-left: 34px;
  }

  body.about-page .about-journey-reference-timeline {
    gap: 9px;
  }
}

@media (max-width: 820px) {
  body.about-page .about-journey-reference {
    padding: 0;
  }

  body.about-page .about-journey-reference-layout {
    grid-template-columns: 1fr;
  }

  body.about-page .about-journey-reference-visual {
    min-height: 360px;
  }

  body.about-page .about-journey-reference-image {
    height: 360px;
    border-right: 0;
    border-bottom: 5px solid rgba(255, 255, 255, 0.96);
    border-radius: 0 0 42% 42%;
  }

  body.about-page .about-journey-reference-content {
    max-width: none;
    padding: 58px 22px 70px;
  }
}

/* 2x2 compact milestone grid for the Our Journey section. */
body.about-page .about-journey-reference-timeline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px 14px;
  margin-top: 50px;
}

body.about-page .about-journey-reference-timeline::before,
body.about-page .about-journey-reference-step:not(:last-child)::after {
  display: none;
}

body.about-page .about-journey-reference-step {
  min-height: 168px;
  padding: 42px 16px 18px;
  border-radius: 18px;
}

body.about-page .about-journey-reference-node {
  top: -32px;
  width: 64px;
  height: 64px;
  border-width: 5px;
  font-size: 1.1rem;
}

body.about-page .about-journey-reference-step h3 {
  margin-bottom: 7px;
  font-size: clamp(1.12rem, 1.28vw, 1.36rem);
}

body.about-page .about-journey-reference-step p {
  max-width: 220px;
  font-size: 0.86rem;
  line-height: 1.42;
}

@media (max-width: 480px) {
  body.about-page .about-journey-reference-timeline {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

/* Alternative editorial milestone layout: compact horizontal tiles. */
body.about-page .about-journey-reference-timeline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  margin-top: 36px;
}

body.about-page .about-journey-reference-step {
  min-height: 148px;
  padding: 25px 18px 22px 92px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-left-width: 4px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 25px rgba(26, 111, 180, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  text-align: left;
}

body.about-page .about-journey-reference-step:hover {
  transform: translateX(4px);
  box-shadow: 0 17px 30px rgba(26, 111, 180, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body.about-page .journey-reference-cyan {
  border-left-color: #18b5c5;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(232, 251, 255, 0.8));
  box-shadow: -3px 0 0 #18b5c5, 0 12px 25px rgba(26, 111, 180, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body.about-page .journey-reference-blue {
  border-left-color: #1474d4;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(234, 245, 255, 0.82));
  box-shadow: -3px 0 0 #1474d4, 0 12px 25px rgba(26, 111, 180, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body.about-page .journey-reference-purple {
  border-left-color: #8847df;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(246, 239, 255, 0.82));
  box-shadow: -3px 0 0 #8847df, 0 12px 25px rgba(26, 111, 180, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body.about-page .journey-reference-orange {
  border-left-color: #f49a12;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 247, 229, 0.84));
  box-shadow: -3px 0 0 #f49a12, 0 12px 25px rgba(26, 111, 180, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body.about-page .about-journey-reference-node {
  top: 50%;
  left: 20px;
  width: 60px;
  height: 60px;
  margin: 0;
  border-width: 5px;
  transform: translateY(-50%);
  font-size: 1.08rem;
  box-shadow: 0 9px 18px rgba(36, 124, 181, 0.2);
}

body.about-page .about-journey-reference-step::before {
  top: 14px;
  right: 16px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

body.about-page .about-journey-reference-step h3 {
  margin: 0 0 7px;
  color: #0b214d;
  font-size: clamp(1.08rem, 1.25vw, 1.3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

body.about-page .about-journey-reference-step p {
  max-width: 230px;
  margin: 0;
  color: #59708d;
  font-size: 0.82rem;
  line-height: 1.42;
}

@media (max-width: 480px) {
  body.about-page .about-journey-reference-timeline {
    grid-template-columns: 1fr;
  }
}

/* Final compact text treatment: keep milestone copy to two lines. */
body.about-page .about-journey-reference-timeline {
  gap: 28px 14px;
  margin-top: 30px;
}

body.about-page .about-journey-reference-step {
  min-height: 126px;
  padding: 21px 14px 17px 82px;
  border-radius: 16px;
}

body.about-page .about-journey-reference-node {
  left: 17px;
  width: 54px;
  height: 54px;
  border-width: 4px;
  font-size: 0.98rem;
}

body.about-page .about-journey-reference-step h3 {
  margin-bottom: 5px;
  font-size: clamp(1.04rem, 1.18vw, 1.2rem);
  white-space: nowrap;
}

body.about-page .about-journey-reference-step p {
  max-width: 270px;
  min-height: 2.48em;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.24;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body.about-page .about-journey-reference-step::before {
  top: 10px;
  right: 13px;
  font-size: 0.7rem;
}

@media (max-width: 480px) {
  body.about-page .about-journey-reference-step {
    min-height: 122px;
    padding-right: 12px;
  }

  body.about-page .about-journey-reference-step p {
    max-width: 300px;
  }
}

/* Tighten the 2x2 milestone spacing. */
body.about-page .about-journey-reference-timeline {
  gap: 10px 8px;
}

body.about-page .about-journey-reference-step {
  padding-left: 76px;
}

body.about-page .about-journey-reference-node {
  left: 14px;
}

@media (max-width: 480px) {
  body.about-page .about-journey-reference-timeline {
    gap: 14px;
  }
}

/* Reduce the empty lower area inside each milestone tile. */
body.about-page .about-journey-reference-step {
  min-height: 104px;
  padding: 12px 12px 12px 76px;
  justify-content: center;
}

body.about-page .about-journey-reference-timeline {
  row-gap: 8px;
}

@media (max-width: 480px) {
  body.about-page .about-journey-reference-timeline {
    row-gap: 12px;
  }
}

/* Refined split image treatment for Our Journey. */
@media (min-width: 821px) {
  body.about-page .about-journey-reference-layout {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  }

  body.about-page .about-journey-reference-visual,
  body.about-page .about-journey-reference-image {
    min-height: 520px;
    height: 520px;
  }
}

body.about-page .about-journey-reference-visual {
  isolation: isolate;
}

body.about-page .about-journey-reference-image {
  border-right-width: 6px;
  border-radius: 0 44% 44% 0;
  box-shadow: 18px 18px 38px rgba(24, 99, 145, 0.16);
}

body.about-page .about-journey-reference-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(7, 38, 70, 0.02) 38%, rgba(7, 38, 70, 0.22) 100%);
}

body.about-page .about-journey-reference-image img {
  object-position: center center;
  filter: saturate(1.08) contrast(1.04) brightness(1.02);
}

@media (max-width: 820px) {

  body.about-page .about-journey-reference-visual,
  body.about-page .about-journey-reference-image {
    min-height: 340px;
    height: 340px;
  }
}

/* Add a clean breathing frame around the left journey image. */
@media (min-width: 821px) {
  body.about-page .about-journey-reference-visual {
    min-height: 576px;
    padding: 28px 0 28px 26px;
  }

  body.about-page .about-journey-reference-image {
    height: 520px;
  }
}

@media (max-width: 820px) {
  body.about-page .about-journey-reference-visual {
    padding: 0;
  }
}

/* Compact Our Journey on mobile: a shorter image keeps the story content in view. */
@media (max-width: 600px) {
  body.about-page .about-journey-reference {
    padding: 34px 0 48px;
  }

  body.about-page .about-journey-reference-container {
    padding-right: 18px;
    padding-left: 18px;
  }

  body.about-page .about-journey-reference-layout {
    gap: 26px;
  }

  body.about-page .about-journey-reference-visual,
  body.about-page .about-journey-reference-image {
    min-height: 0;
    height: min(62vw, 250px);
  }

  body.about-page .about-journey-reference-image {
    width: 100%;
  }

  body.about-page .about-journey-reference-content {
    padding-top: 0;
  }

  body.about-page .about-journey-reference-kicker {
    margin-bottom: 12px;
  }

  body.about-page .about-journey-reference-content h2 {
    font-size: clamp(2rem, 8.8vw, 2.65rem);
    line-height: 1.04;
  }

  body.about-page .about-journey-reference-intro {
    margin-top: 14px;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  body.about-page .about-journey-reference-timeline {
    margin-top: 24px;
  }
}

/* Keep the journey image flush with the left edge. */
body.about-page .about-journey-reference {
  overflow-x: hidden;
}

@media (min-width: 821px) {
  body.about-page .about-journey-reference-visual {
    padding-left: 0;
  }

  body.about-page .about-journey-reference-content,
  body.about-page .about-journey-reference-layout>* {
    min-width: 0;
  }
}

/* About hero matched to the Contact page banner treatment. */
body.about-page .contact-hero-banner-sec {
  min-height: 394px;
  padding: 0;
  background: url('assect/about-hero-dam.jpg') center 35% / cover no-repeat;
}

body.about-page .contact-hero-dark-overlay {
  background:
    linear-gradient(90deg, rgba(3, 25, 49, 0.96) 0%, rgba(4, 39, 67, 0.84) 43%, rgba(7, 68, 105, 0.38) 100%),
    linear-gradient(180deg, rgba(2, 28, 52, 0.35), rgba(5, 51, 82, 0.62));
}

body.about-page .contact-hero-inner {
  display: block;
  width: 100%;
  max-width: 1720px;
  min-height: 394px;
  padding: 46px 40px 26px;
}

body.about-page .about-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 630px;
}

body.about-page .about-page-breadcrumb {
  margin: 0 0 18px;
  font-size: 0.72rem;
  letter-spacing: 1.4px;
}

body.about-page .about-page-title {
  max-width: 720px;
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(2.8rem, 4vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -1.6px;
}

body.about-page .about-page-title .highlight-blue {
  color: #24cbf6;
}

body.about-page .about-page-subtitle {
  max-width: 620px;
  margin: 0 0 12px;
  color: rgba(245, 251, 255, 0.95);
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.2;
}

body.about-page .about-page-desc {
  max-width: 620px;
  margin: 0;
  color: rgba(239, 249, 255, 0.86);
  font-size: 0.92rem;
  line-height: 1.55;
}

body.about-page .about-hero-stats {
  max-width: 530px;
  margin: 21px 0 0;
}

/* Premium compact stats panel for the About hero. */
body.about-page .about-hero-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 610px);
  max-width: 610px;
  margin: 24px 0 0;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(127, 211, 252, 0.28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(3, 35, 61, 0.78), rgba(7, 77, 112, 0.52));
  box-shadow: 0 14px 30px rgba(1, 28, 51, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
}

body.about-page .about-hero-stats::before {
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.9), transparent);
}

body.about-page .about-hero-stats .stat-item,
body.about-page .about-hero-stats .stat-item:first-child,
body.about-page .about-hero-stats .stat-item:last-child {
  min-width: 0;
  padding: 8px 12px;
  gap: 9px;
  border-right: 1px solid rgba(152, 224, 255, 0.26);
}

body.about-page .about-hero-stats .stat-item:last-child {
  border-right: 0;
}

body.about-page .about-hero-stats .stat-icon-circle {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(186, 230, 253, 0.48);
  border-radius: 10px;
  background: linear-gradient(145deg, #19c5ef, #0877c8);
  color: #ffffff;
  font-size: 0.92rem;
  box-shadow: 0 7px 14px rgba(2, 132, 199, 0.28);
}

body.about-page .about-hero-stats .stat-meta {
  min-width: 0;
}

body.about-page .about-hero-stats .stat-meta .num,
body.about-page .about-hero-stats .stat-meta .txt-bold {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.94rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.about-page .about-hero-stats .stat-meta .lbl {
  display: block;
  margin-top: 3px;
  color: rgba(218, 243, 255, 0.82);
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: nowrap;
}

@media (max-width: 700px) {
  body.about-page .about-hero-stats {
    width: min(100%, 390px);
    max-width: 390px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 0;
    padding: 9px;
  }

  body.about-page .about-hero-stats .stat-item,
  body.about-page .about-hero-stats .stat-item:first-child,
  body.about-page .about-hero-stats .stat-item:last-child {
    padding: 7px 9px;
  }

  body.about-page .about-hero-stats .stat-item:nth-child(2) {
    border-right: 0;
  }

  body.about-page .about-hero-stats .stat-icon-circle {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  body.about-page .about-hero-stats .stat-meta .num,
  body.about-page .about-hero-stats .stat-meta .txt-bold {
    font-size: 0.82rem;
  }

  body.about-page .about-hero-stats .stat-meta .lbl {
    font-size: 0.5rem;
  }
}

@media (max-width: 700px) {
  body.about-page .contact-hero-inner {
    min-height: 520px;
    padding: 40px 22px 34px;
  }

  body.about-page .about-hero-copy {
    max-width: none;
  }
}

/* Match the Who We Are impact strip to the premium hero stats card. */
body.about-page .about-impact-strip-section {
  padding: 28px 0 38px;
  background:
    radial-gradient(circle at 8% 10%, rgba(105, 203, 255, 0.14), transparent 25%),
    linear-gradient(180deg, #f8fcff 0%, #edf8fd 100%);
}

body.about-page .about-impact-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(127, 211, 252, 0.3);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(3, 35, 61, 0.96), rgba(7, 77, 112, 0.9));
  box-shadow: 0 16px 34px rgba(1, 48, 79, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body.about-page .about-impact-strip::before {
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.95), transparent);
}

body.about-page .about-impact-stat {
  min-width: 0;
  min-height: 72px;
  padding: 8px 22px;
  gap: 12px;
  justify-content: flex-start;
}

body.about-page .about-impact-stat:not(:last-child)::after {
  top: 12px;
  height: calc(100% - 24px);
  background: rgba(152, 224, 255, 0.28);
}

body.about-page .about-impact-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(186, 230, 253, 0.48);
  border-radius: 11px;
  background: linear-gradient(145deg, #19c5ef, #0877c8);
  color: #ffffff;
  font-size: 1rem;
  box-shadow: 0 7px 14px rgba(2, 132, 199, 0.28);
}

body.about-page .about-impact-copy {
  min-width: 0;
  gap: 3px;
}

body.about-page .about-impact-copy strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.about-page .about-impact-copy small {
  overflow: hidden;
  color: rgba(218, 243, 255, 0.82);
  font-size: 0.62rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 800px) {
  body.about-page .about-impact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.about-page .about-impact-stat {
    padding: 8px 14px;
  }

  body.about-page .about-impact-stat:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 520px) {
  body.about-page .about-impact-strip-section {
    padding: 20px 0 28px;
  }

  body.about-page .about-impact-strip {
    width: min(calc(100% - 28px), 390px);
    grid-template-columns: 1fr;
    padding: 9px;
  }

  body.about-page .about-impact-stat,
  body.about-page .about-impact-stat:nth-child(2) {
    min-height: 58px;
    padding: 7px 9px;
  }

  body.about-page .about-impact-stat::after,
  body.about-page .about-impact-stat:nth-child(2)::after {
    top: auto;
    right: 9px;
    bottom: 0;
    display: block;
    width: calc(100% - 18px);
    height: 1px;
  }

  body.about-page .about-impact-stat:last-child::after {
    display: none;
  }
}

/* Centered foundation heading aligned to the Why Choose content width. */
body.about-page .about-mission-section {
  padding: 64px 0 72px;
}

body.about-page .about-mission-inner {
  max-width: 1120px;
  padding-right: 32px;
  padding-left: 32px;
}

body.about-page .about-mission-heading-row {
  display: block;
  max-width: 780px;
  margin: 0 auto 36px;
  text-align: center;
}

body.about-page .about-mission-heading-row>div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.about-page .about-mission-kicker {
  justify-content: center;
  margin-bottom: 13px;
}

body.about-page .about-mission-heading-row h2 {
  max-width: 100%;
  margin: 0 auto;
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  line-height: 1.08;
  text-align: center;
}

body.about-page .about-mission-heading-row>p {
  max-width: 680px;
  margin: 16px auto 0;
  font-size: 0.86rem;
  line-height: 1.6;
  text-align: center;
}

body.about-page .about-mission-grid {
  max-width: 100%;
  margin: 0;
  gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 700px) {
  body.about-page .about-mission-section {
    padding: 50px 0 58px;
  }

  body.about-page .about-mission-inner {
    padding-right: 18px;
    padding-left: 18px;
  }

  body.about-page .about-mission-heading-row {
    margin-bottom: 28px;
  }

  body.about-page .about-mission-heading-row h2 {
    font-size: clamp(1.9rem, 8vw, 2.45rem);
  }
}

/* High-contrast Mission, Vision & Values cards. */
body.about-page .about-mission-grid {
  align-items: stretch;
  gap: 22px;
}

body.about-page .about-mission-card {
  min-height: 238px;
  padding: 26px 27px 25px;
  border: 1px solid rgba(190, 219, 238, 0.95);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 15px 34px rgba(15, 67, 103, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: #092d55;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

body.about-page .about-mission-card:hover {
  transform: translateY(-6px);
  border-color: rgba(38, 157, 226, 0.55);
  box-shadow: 0 22px 42px rgba(15, 67, 103, 0.18);
}

body.about-page .about-mission-card::before {
  display: block;
  height: 4px;
  border-radius: 20px 20px 0 0;
}

body.about-page .about-mission-card::after {
  display: block;
  right: -64px;
  bottom: -76px;
  width: 190px;
  height: 190px;
  opacity: 0.7;
}

body.about-page .about-mission-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 19px;
}

body.about-page .about-mission-card-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin-bottom: 0;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, #159cf0, #086dc4);
  box-shadow: 0 8px 16px rgba(19, 141, 240, 0.22);
  font-size: 1.18rem;
}

body.about-page .mission-card-green .about-mission-card-icon {
  color: #ffffff;
  background: linear-gradient(145deg, #26c77e, #0b9959);
  box-shadow: 0 8px 16px rgba(24, 182, 110, 0.2);
}

body.about-page .mission-card-purple .about-mission-card-icon {
  color: #ffffff;
  background: linear-gradient(145deg, #a15df4, #7133d9);
  box-shadow: 0 8px 16px rgba(132, 72, 239, 0.2);
}

body.about-page .about-mission-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #082f5d;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.25;
}

body.about-page .about-mission-card p,
body.about-page .about-mission-card li {
  position: relative;
  z-index: 1;
  color: #4e6982;
  font-size: 0.84rem;
  line-height: 1.62;
}

body.about-page .about-mission-card p {
  max-width: 38ch;
  margin: 0;
}

body.about-page .about-mission-card ul {
  position: relative;
  z-index: 1;
  gap: 8px;
}

body.about-page .about-mission-card li {
  align-items: center;
  gap: 9px;
}

body.about-page .about-mission-card li i {
  margin-top: 0;
  color: #f39a12;
  font-size: 0.76rem;
}

body.about-page .about-mission-card-number {
  top: 17px;
  right: 22px;
  color: rgba(30, 143, 229, 0.12);
  font-size: 2.5rem;
  font-weight: 850;
}

@media (max-width: 700px) {
  body.about-page .about-mission-card {
    min-height: 0;
    padding: 23px 22px;
  }
}

/* Centered principle cards inspired by the supplied reference; section background stays unchanged. */
body.about-page .about-mission-card {
  min-height: 268px;
  padding: 31px 28px 28px;
  border: 1px solid rgba(189, 218, 237, 0.95);
  border-top: 4px solid var(--mission-card-accent, #138df0);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(28, 83, 119, 0.1);
  text-align: center;
}

body.about-page .about-mission-card:hover {
  transform: translateY(-7px);
  border-color: rgba(38, 157, 226, 0.48);
  box-shadow: 0 20px 36px rgba(28, 83, 119, 0.16);
}

body.about-page .about-mission-card::before {
  display: none;
}

body.about-page .about-mission-card::after {
  display: block;
  right: -72px;
  bottom: -82px;
  width: 190px;
  height: 190px;
  opacity: 0.32;
}

body.about-page .about-mission-card-number {
  top: 16px;
  right: 22px;
  color: rgba(30, 143, 229, 0.1);
  font-size: 2.4rem;
}

body.about-page .about-mission-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

body.about-page .about-mission-card-icon {
  width: 70px;
  height: 70px;
  flex-basis: 70px;
  border: 1px solid rgba(19, 141, 240, 0.26);
  border-radius: 50%;
  color: #087fe2;
  background: rgba(215, 239, 255, 0.72);
  box-shadow: 0 7px 0 rgba(19, 141, 240, 0.05), 0 10px 20px rgba(19, 141, 240, 0.12);
  font-size: 1.28rem;
}

body.about-page .mission-card-green .about-mission-card-icon {
  color: #079c67;
  border-color: rgba(24, 182, 110, 0.26);
  background: rgba(218, 247, 235, 0.78);
  box-shadow: 0 7px 0 rgba(24, 182, 110, 0.05), 0 10px 20px rgba(24, 182, 110, 0.12);
}

body.about-page .mission-card-purple .about-mission-card-icon {
  color: #8644e9;
  border-color: rgba(132, 72, 239, 0.25);
  background: rgba(239, 226, 255, 0.8);
  box-shadow: 0 7px 0 rgba(132, 72, 239, 0.05), 0 10px 20px rgba(132, 72, 239, 0.12);
}

body.about-page .mission-card-commitment {
  --mission-card-accent: #0eaaa8;
  --mission-card-wash: rgba(14, 170, 168, 0.08);
}

body.about-page .mission-card-commitment .about-mission-card-icon {
  color: #0b9795;
  border-color: rgba(14, 170, 168, 0.25);
  background: rgba(219, 249, 247, 0.82);
  box-shadow: 0 7px 0 rgba(14, 170, 168, 0.05), 0 10px 20px rgba(14, 170, 168, 0.12);
}

body.about-page .about-mission-card h3 {
  width: fit-content;
  margin: 0 auto;
  color: #092d55;
  font-size: 1.17rem;
  line-height: 1.25;
}

body.about-page .about-mission-card h3::after {
  display: block;
  width: 38px;
  height: 3px;
  margin: 11px auto 0;
  border-radius: 999px;
  content: '';
  background: var(--mission-card-accent, #138df0);
}

body.about-page .about-mission-card p,
body.about-page .about-mission-card li {
  color: #58718a;
  font-size: 0.83rem;
  line-height: 1.62;
}

body.about-page .about-mission-card p {
  max-width: 33ch;
  margin: 0 auto;
}

body.about-page .about-mission-card ul {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

body.about-page .about-mission-card li {
  gap: 8px;
}

@media (max-width: 700px) {
  body.about-page .about-mission-card {
    min-height: 0;
    padding: 27px 22px 25px;
  }
}

@media (max-width: 900px) {
  body.about-page .about-mission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body.about-page .about-mission-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep Foundation cards aligned with the Why Choose section's container and type scale. */
body.about-page .about-mission-inner {
  width: 100%;
  max-width: 1400px;
  padding-right: 32px;
  padding-left: 32px;
}

body.about-page .about-mission-grid {
  width: 100%;
  max-width: none;
  gap: 24px;
}

body.about-page .about-mission-card {
  min-height: 280px;
  padding: 24px 24px 22px;
  border-radius: 24px;
}

body.about-page .about-mission-card-head {
  gap: 12px;
  margin-bottom: 14px;
}

body.about-page .about-mission-card-icon {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
}

body.about-page .about-mission-card h3::after {
  margin-top: 8px;
}

body.about-page .about-mission-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
}

body.about-page .about-mission-card p,
body.about-page .about-mission-card li {
  font-size: 0.84rem;
  line-height: 1.5;
}

body.about-page .about-mission-card p {
  max-width: 31ch;
}

body.about-page .about-mission-card ul {
  gap: 5px;
}

@media (max-width: 900px) {
  body.about-page .about-mission-card {
    min-height: 265px;
  }
}

@media (max-width: 700px) {
  body.about-page .about-mission-inner {
    padding-right: 18px;
    padding-left: 18px;
  }

  body.about-page .about-mission-grid {
    width: calc(100% - 24px);
    margin-right: auto;
    margin-left: auto;
    row-gap: 12px;
  }

  body.about-page .about-mission-card {
    min-height: 0;
    padding: 30px 22px 27px;
  }
}

/* Wider, more balanced Who We Are layout with richer supporting copy. */
body.about-page .about-whoweare-sec {
  padding: 84px 0 78px;
}

body.about-page .about-whoweare-sec .whoweare-container {
  max-width: 1540px;
  padding-right: 32px;
  padding-left: 32px;
}

body.about-page .about-grid-2col {
  grid-template-columns: minmax(0, 0.86fr) minmax(560px, 1.14fr);
  grid-template-areas: 'copy visual';
  gap: clamp(52px, 5vw, 86px);
}

body.about-page .about-whoweare-content {
  max-width: 640px;
  align-self: center;
}

body.about-page .about-whoweare-content .about-sec-heading {
  max-width: 630px;
  margin: 0 0 19px;
  color: #0b1732;
  font-size: clamp(2.25rem, 3.45vw, 3.35rem);
  font-weight: 850;
  line-height: 1.04;
  letter-spacing: -1.8px;
  text-wrap: balance;
}

body.about-page .about-whoweare-content .about-sec-heading::after {
  display: block;
  width: 58px;
  height: 4px;
  margin-top: 17px;
  border-radius: 999px;
  content: '';
  background: linear-gradient(90deg, #118de8, #39c3f5);
}

body.about-page .about-heading-mobile {
  display: none;
}

body.about-page .about-whoweare-content .about-sec-text {
  max-width: 620px;
  margin-bottom: 27px;
  color: #4e6982;
  font-size: 0.94rem;
  line-height: 1.72;
}

body.about-page .about-whoweare-img-wrap {
  padding: 8px;
  border: 1px solid rgba(174, 216, 239, 0.8);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 48px rgba(24, 88, 127, 0.16);
}

body.about-page .about-whoweare-img-inner {
  height: 370px;
  border: 0;
  border-radius: 19px;
}

body.about-page .about-whoweare-button {
  padding: 13px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(17, 116, 194, 0.2);
}

@media (max-width: 900px) {
  body.about-page .about-grid-2col {
    grid-template-columns: 1fr;
    grid-template-areas: 'copy' 'visual';
  }

  body.about-page .about-whoweare-content {
    max-width: 760px;
  }

  body.about-page .about-whoweare-img-inner {
    height: min(54vw, 430px);
  }
}

@media (max-width: 520px) {
  body.about-page .about-whoweare-sec .whoweare-container {
    padding-right: 18px;
    padding-left: 18px;
  }

  body.about-page .about-whoweare-sec {
    padding: 58px 0 42px;
  }

  body.about-page .about-whoweare-content .about-sec-heading {
    max-width: 100%;
    min-width: 0;
    margin-bottom: 16px;
    font-size: clamp(1.6rem, 7vw, 1.85rem);
    line-height: 1.1;
    letter-spacing: -1px;
  }

  body.about-page .about-heading-desktop {
    display: none;
  }

  body.about-page .about-heading-mobile {
    display: inline;
  }

  body.about-page .about-whoweare-content .about-sec-text {
    max-width: 100%;
    min-width: 0;
    margin-bottom: 0;
    font-size: 0.88rem;
    line-height: 1.65;
  }

  body.about-page .about-whoweare-img-inner {
    height: 290px;
  }
}

/* Prevent the Who We Are mobile grid and media frame from creating horizontal overflow. */
@media (max-width: 900px) {

  body.about-page .about-grid-2col,
  body.about-page .about-whoweare-content,
  body.about-page .about-whoweare-img-wrap {
    width: 100%;
    min-width: 0;
  }

  body.about-page .about-whoweare-img-inner,
  body.about-page .about-whoweare-img-wrap video,
  body.about-page .about-whoweare-img-wrap img {
    max-width: 100%;
  }
}

/* Refined About impact ribbon: wider, brighter and easier to scan. */
body.about-page .about-impact-strip-section {
  padding: 30px 0 40px;
}

body.about-page .about-impact-strip {
  width: min(1400px, calc(100% - 64px));
  max-width: 1400px;
  padding: 12px 18px;
  border: 1px solid rgba(125, 211, 252, 0.42);
  border-radius: 22px;
  background: linear-gradient(115deg, #062d4b 0%, #0a4565 52%, #176882 100%);
  box-shadow: 0 18px 38px rgba(7, 60, 91, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.about-page .about-impact-strip::before {
  left: 10%;
  right: 10%;
  background: linear-gradient(90deg, transparent, rgba(92, 211, 255, 0.95), transparent);
}

body.about-page .about-impact-stat {
  min-height: 78px;
  padding: 9px 34px;
  gap: 14px;
  transition: transform 220ms ease;
}

body.about-page .about-impact-stat:hover {
  transform: translateY(-3px);
}

body.about-page .about-impact-stat:not(:last-child)::after {
  top: 13px;
  height: calc(100% - 26px);
  background: linear-gradient(180deg, transparent, rgba(128, 219, 255, 0.48), transparent);
}

body.about-page .about-impact-icon {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border: 1px solid rgba(196, 239, 255, 0.5);
  border-radius: 14px;
  background: linear-gradient(145deg, #25c8f2, #0878c9);
  color: #ffffff;
  font-size: 1.1rem;
  box-shadow: 0 8px 17px rgba(1, 143, 210, 0.28);
}

body.about-page .about-impact-stat:nth-child(2) .about-impact-icon {
  background: linear-gradient(145deg, #3bd38e, #07985c);
  box-shadow: 0 8px 17px rgba(9, 164, 98, 0.24);
}

body.about-page .about-impact-stat:nth-child(3) .about-impact-icon {
  background: linear-gradient(145deg, #ffb536, #ec7d08);
  box-shadow: 0 8px 17px rgba(238, 132, 14, 0.24);
}

body.about-page .about-impact-stat:nth-child(4) .about-impact-icon {
  background: linear-gradient(145deg, #a77cff, #6937d5);
  box-shadow: 0 8px 17px rgba(114, 63, 217, 0.24);
}

body.about-page .about-impact-copy {
  gap: 4px;
}

body.about-page .about-impact-copy strong {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

body.about-page .about-impact-copy small {
  color: rgba(221, 245, 255, 0.86);
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  body.about-page .about-impact-strip {
    width: min(100% - 36px, 620px);
    padding: 10px;
  }

  body.about-page .about-impact-stat {
    padding: 9px 18px;
  }
}

@media (max-width: 520px) {
  body.about-page .about-impact-strip-section {
    padding: 22px 0 30px;
  }

  body.about-page .about-impact-strip {
    width: min(100% - 28px, 390px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 9px;
  }

  body.about-page .about-impact-stat,
  body.about-page .about-impact-stat:nth-child(2) {
    min-height: 74px;
    padding: 10px 9px;
    gap: 9px;
  }

  body.about-page .about-impact-stat::after,
  body.about-page .about-impact-stat:nth-child(2)::after {
    display: none;
  }

  body.about-page .about-impact-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
    font-size: 0.95rem;
  }

  body.about-page .about-impact-copy strong {
    font-size: 0.98rem;
  }

  body.about-page .about-impact-copy small {
    font-size: 0.52rem;
  }
}

/* Match Foundation heading typography to the Why Choose section. */
body.about-page .about-mission-heading-row {
  max-width: 1040px;
  margin: 0 auto 40px;
}

body.about-page .about-mission-heading-row h2 {
  max-width: 980px;
  color: #092d55;
  font-size: clamp(2.2rem, 3.25vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

body.about-page .about-mission-heading-row h2 span {
  color: #147de4;
  background: linear-gradient(90deg, #168df0, #2d72df);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.about-page .about-mission-heading-row>p {
  max-width: 780px;
  margin: 16px auto 0;
  color: #4e6786;
  font-size: 1rem;
  line-height: 1.55;
}

@media (max-width: 600px) {
  body.about-page .about-mission-heading-row h2 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }

  body.about-page .about-mission-heading-row>p {
    font-size: 0.92rem;
  }
}

/* Wider, cleaner Approach section aligned with the Who We Are content width. */
body.about-page .about-approach-sec {
  padding: 84px 0 92px;
}

body.about-page .about-approach-container {
  width: 100%;
  max-width: 1540px;
  padding-right: 32px;
  padding-left: 32px;
}

body.about-page .about-approach-layout {
  grid-template-columns: minmax(360px, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(54px, 6vw, 96px);
}

body.about-page .about-approach-visual {
  min-height: 410px;
}

body.about-page .about-approach-image-frame {
  width: min(340px, 86%);
  height: 390px;
  border-width: 7px;
  border-radius: 38px 56px 34px 56px;
  transform: rotate(-7deg);
  box-shadow: 0 24px 42px rgba(22, 106, 156, 0.2);
}

body.about-page .about-approach-blob-back {
  left: 8%;
  width: 220px;
  height: 122px;
}

body.about-page .about-approach-blob-front {
  right: 5%;
  width: 200px;
  height: 128px;
}

body.about-page .about-approach-kicker {
  margin-bottom: 13px;
}

body.about-page .about-approach-content h2 {
  max-width: 760px;
  font-size: clamp(2.35rem, 3.55vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -1.5px;
}

body.about-page .about-approach-intro {
  max-width: 760px;
  margin: 16px 0 40px;
  color: #4e6982;
  font-size: 0.96rem;
  line-height: 1.65;
}

body.about-page .about-approach-steps {
  gap: 24px;
}

body.about-page .about-approach-steps::before {
  top: 24px;
  right: 5%;
  left: 5%;
  background: repeating-linear-gradient(90deg, #6cb9e6 0 5px, transparent 5px 10px);
}

body.about-page .about-approach-step-number {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
  border-width: 4px;
  font-size: 0.78rem;
}

body.about-page .about-approach-step h3 {
  margin-bottom: 8px;
  font-size: 0.98rem;
  line-height: 1.25;
}

body.about-page .about-approach-step p {
  max-width: 175px;
  font-size: 0.76rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  body.about-page .about-approach-container {
    padding-right: 24px;
    padding-left: 24px;
  }

  body.about-page .about-approach-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  body.about-page .about-approach-visual {
    min-height: 390px;
  }

  body.about-page .about-approach-image-frame {
    width: min(340px, 86%);
  }
}

@media (max-width: 600px) {
  body.about-page .about-approach-sec {
    padding: 58px 0 68px;
  }

  body.about-page .about-approach-container {
    padding-right: 18px;
    padding-left: 18px;
  }

  body.about-page .about-approach-content h2 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  body.about-page .about-approach-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }

  body.about-page .about-approach-steps::before {
    display: none;
  }
}

/* Balanced vertical breathing room around the About hero. */
body.about-page .contact-hero-banner-sec {
  min-height: 420px;
  margin-bottom: 36px;
}

body.about-page .contact-hero-inner {
  min-height: 420px;
  padding: 58px 40px 58px;
}

@media (max-width: 700px) {
  body.about-page .contact-hero-banner-sec {
    min-height: 0;
    margin-bottom: 18px;
  }

  body.about-page .contact-hero-inner {
    min-height: 0;
    padding: 42px 22px 40px;
  }
}

/* Premium step cards for the Approach timeline. */
body.about-page .about-approach-steps {
  gap: 20px;
  padding-top: 8px;
}

body.about-page .about-approach-steps::before {
  top: 33px;
  right: 8%;
  left: 8%;
  height: 2px;
  opacity: 0.75;
  background: repeating-linear-gradient(90deg, #69b8e4 0 6px, transparent 6px 12px);
}

body.about-page .about-approach-step {
  min-height: 186px;
  padding: 20px 18px 19px;
  border: 1px solid rgba(151, 205, 234, 0.56);
  border-top: 3px solid #1788e4;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 12px 24px rgba(35, 111, 157, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  text-align: center;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

body.about-page .about-approach-step:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 30px rgba(35, 111, 157, 0.15);
}

body.about-page .approach-step-green {
  border-top-color: #16ad78;
}

body.about-page .approach-step-blue-dark {
  border-top-color: #137ee5;
}

body.about-page .approach-step-purple {
  border-top-color: #8042e6;
}

body.about-page .about-approach-step-number {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin: 0 auto 15px;
  border-width: 4px;
  font-size: 0.8rem;
  box-shadow: 0 7px 15px rgba(13, 105, 166, 0.2);
}

body.about-page .about-approach-step h3 {
  margin-bottom: 8px;
  color: #092c57;
  font-size: 0.96rem;
  line-height: 1.24;
}

body.about-page .about-approach-step p {
  max-width: 190px;
  margin: 0 auto;
  color: #5d7892;
  font-size: 0.75rem;
  line-height: 1.48;
}

@media (max-width: 600px) {
  body.about-page .about-approach-steps {
    padding-top: 0;
  }

  body.about-page .about-approach-step {
    min-height: 0;
    padding: 18px 14px 17px;
  }
}

/* Reference-style four-card process timeline. */
body.about-page .about-approach-steps {
  gap: 20px;
  padding-top: 8px;
}

body.about-page .about-approach-steps::before {
  top: 46px;
  right: 8%;
  left: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #8ec9e9 0 6px, transparent 6px 12px);
}

body.about-page .about-approach-step {
  min-height: 204px;
  padding: 20px 18px 18px;
  border: 1px solid rgba(157, 205, 232, 0.68);
  border-top: 3px solid #148ae6;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 24px rgba(35, 111, 157, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body.about-page .about-approach-step:nth-child(2) {
  border-top-color: #12ad78;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(236, 252, 245, 0.72));
}

body.about-page .about-approach-step:nth-child(3) {
  border-top-color: #137ee5;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(235, 247, 255, 0.74));
}

body.about-page .about-approach-step:nth-child(4) {
  border-top-color: #8042e6;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(246, 240, 255, 0.72));
}

body.about-page .about-approach-step:not(:last-child)::after {
  top: 20px;
  right: -14px;
  color: #62b4e3;
  font-size: 1.15rem;
  line-height: 1;
}

body.about-page .about-approach-step-number {
  width: 52px;
  height: 52px;
  margin: 0 auto 15px;
  border: 5px solid rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  box-shadow: 0 7px 16px rgba(13, 105, 166, 0.2);
}

body.about-page .about-approach-step h3 {
  margin-bottom: 8px;
  font-size: 0.95rem;
  line-height: 1.22;
}

body.about-page .about-approach-step p {
  max-width: 180px;
  font-size: 0.74rem;
  line-height: 1.48;
}

@media (max-width: 600px) {
  body.about-page .about-approach-step {
    min-height: 0;
  }

  body.about-page .about-approach-step:not(:last-child)::after {
    display: none;
  }
}

/* Consistent breathing room between every top-level About page section. */
body.about-page>section+section {
  margin-top: 30px;
}

@media (max-width: 700px) {
  body.about-page>section+section {
    margin-top: 20px;
  }
}

/* Match the Approach heading with the About page's shared heading system. */
body.about-page .about-approach-kicker {
  gap: 10px;
  margin-bottom: 14px;
  color: #168ee4;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
}

body.about-page .about-approach-kicker .badge-dash {
  width: 28px;
  height: 2px;
  background: #168ee4;
}

body.about-page .about-approach-content h2 {
  max-width: 900px;
  color: #092d55;
  font-size: clamp(2.2rem, 3.25vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

body.about-page .about-approach-content h2 span {
  color: #147de4;
  background: linear-gradient(90deg, #168df0, #2d72df);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.about-page .about-approach-intro {
  max-width: 780px;
  margin: 16px 0 38px;
  color: #4e6786;
  font-size: 1rem;
  line-height: 1.55;
}

body.about-page .about-approach-content {
  padding: 4px 0;
}

@media (max-width: 600px) {
  body.about-page .about-approach-content h2 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }

  body.about-page .about-approach-intro {
    font-size: 0.92rem;
  }
}

/* Compact, richer Approach cards with less unused vertical space. */
body.about-page .about-approach-sec {
  padding: 58px 0 64px;
}

body.about-page .about-approach-layout {
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(42px, 5vw, 70px);
  align-items: center;
}

body.about-page .about-approach-visual {
  min-height: 300px;
}

body.about-page .about-approach-image-frame {
  width: min(294px, 86%);
  height: 300px;
}

body.about-page .about-approach-content h2 {
  font-size: clamp(2.05rem, 3.15vw, 3.15rem);
  line-height: 1.06;
}

body.about-page .about-approach-intro {
  max-width: 760px;
  margin: 14px 0 28px;
  font-size: 0.92rem;
  line-height: 1.58;
}

body.about-page .about-approach-steps {
  gap: 14px;
}

body.about-page .about-approach-step {
  min-height: 184px;
  padding: 18px 15px 16px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(239, 249, 255, 0.72));
  box-shadow: 0 14px 28px rgba(35, 111, 157, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body.about-page .about-approach-step:nth-child(2) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(235, 252, 246, 0.76));
}

body.about-page .about-approach-step:nth-child(3) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(235, 247, 255, 0.76));
}

body.about-page .about-approach-step:nth-child(4) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 240, 255, 0.76));
}

body.about-page .about-approach-step-number {
  width: 48px;
  height: 48px;
  margin-bottom: 13px;
  border-width: 4px;
  font-size: 0.75rem;
}

body.about-page .about-approach-step h3 {
  margin-bottom: 7px;
  font-size: 0.9rem;
  line-height: 1.2;
}

body.about-page .about-approach-step p {
  max-width: 205px;
  font-size: 0.7rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  body.about-page .about-approach-visual {
    min-height: 340px;
  }

  body.about-page .about-approach-image-frame {
    height: min(54vw, 340px);
  }
}

@media (max-width: 600px) {
  body.about-page .about-approach-sec {
    padding: 50px 0 58px;
  }

  body.about-page .about-approach-step {
    min-height: 0;
    padding: 18px 14px 17px;
  }
}

/* Mobile Approach layout: stack the visual and copy instead of squeezing two columns. */
@media (max-width: 700px) {
  body.about-page .about-approach-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'content'
      'visual';
    gap: 34px;
    min-width: 0;
  }

  body.about-page .about-approach-content {
    grid-area: content;
    width: 100%;
    min-width: 0;
  }

  body.about-page .about-approach-visual {
    grid-area: visual;
    min-width: 0;
    min-height: 0;
  }

  body.about-page .about-approach-content h2 {
    max-width: 100%;
    font-size: clamp(1.9rem, 8.4vw, 2.55rem);
    line-height: 1.08;
  }

  body.about-page .about-approach-intro {
    max-width: 100%;
    margin-bottom: 24px;
    font-size: 0.9rem;
    line-height: 1.55;
  }

  body.about-page .about-approach-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 0;
  }

  body.about-page .about-approach-steps::before,
  body.about-page .about-approach-step:not(:last-child)::after {
    display: none;
  }

  body.about-page .about-approach-step {
    min-width: 0;
    min-height: 176px;
    padding: 17px 11px 15px;
    border-radius: 16px;
  }

  body.about-page .about-approach-step-number {
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
  }

  body.about-page .about-approach-step h3,
  body.about-page .about-approach-step p {
    max-width: 100%;
  }

  body.about-page .about-approach-step h3 {
    font-size: 0.86rem;
  }

  body.about-page .about-approach-step p {
    font-size: 0.69rem;
    line-height: 1.42;
  }

  body.about-page .about-approach-image-frame {
    width: min(290px, 84vw);
    height: min(78vw, 310px);
    margin: 0 auto;
  }
}

/* Distinct section backgrounds for the shared service-detail experience. */
body[data-service] .reference-service-overview-combined,
body[data-service] .reference-process-reference,
body[data-service] .reference-technical-section,
body[data-service] .reference-applications-reference,
body[data-service] .reference-faq-reference,
body[data-service] .reference-service-cta-reference {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body[data-service] .reference-service-overview-combined>.reference-service-container,
body[data-service] .reference-process-reference>.reference-service-container,
body[data-service] .reference-technical-section>.reference-service-container,
body[data-service] .reference-applications-reference>.reference-service-container,
body[data-service] .reference-faq-reference>.reference-service-container,
body[data-service] .reference-service-cta-reference>.reference-service-container {
  position: relative;
  z-index: 1;
}

/* Clean white opening section. */
body[data-service] .reference-service-overview-combined {
  background:
    radial-gradient(circle at 3% 18%, rgba(99, 190, 255, 0.13), transparent 22%),
    radial-gradient(circle at 98% 84%, rgba(205, 239, 255, 0.72), transparent 26%),
    #ffffff;
  border-bottom: 1px solid #e5f1f8;
}

/* Soft blue process band to clearly separate the methodology. */
body[data-service] .reference-process-reference {
  background:
    radial-gradient(circle at -3% 45%, rgba(51, 153, 239, 0.2), transparent 28%),
    radial-gradient(circle at 103% 58%, rgba(124, 208, 255, 0.2), transparent 27%),
    linear-gradient(135deg, #eaf7ff 0%, #f5fbff 48%, #e6f5ff 100%);
  border-top: 1px solid #d9edf9;
  border-bottom: 1px solid #d9edf9;
}

body[data-service] .reference-process-reference::before {
  content: '';
  position: absolute;
  right: -150px;
  top: -180px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(30, 143, 229, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(30, 143, 229, 0.035), 0 0 0 45px rgba(30, 143, 229, 0.025);
  pointer-events: none;
}

/* Cooler, cleaner technical zone so the dark equipment panel stands out. */
body[data-service] .reference-technical-section {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.98), rgba(236, 248, 255, 0.96)),
    repeating-linear-gradient(135deg, transparent 0 34px, rgba(65, 170, 231, 0.035) 35px 36px);
  border-bottom: 1px solid #dceff8;
}

/* Slight mint tint gives the applications cards their own visual territory. */
body[data-service] .reference-applications-reference {
  background:
    radial-gradient(circle at 8% 12%, rgba(93, 208, 184, 0.12), transparent 23%),
    radial-gradient(circle at 92% 88%, rgba(105, 190, 255, 0.14), transparent 25%),
    linear-gradient(135deg, #effbf9 0%, #f8fdff 52%, #edf8ff 100%);
  border-bottom: 1px solid #deeff1;
}

/* Bright FAQ area keeps the question list readable and visually lighter. */
body[data-service] .reference-faq-reference {
  background:
    radial-gradient(circle at 4% 8%, rgba(89, 166, 255, 0.14), transparent 23%),
    radial-gradient(circle at 96% 92%, rgba(176, 139, 255, 0.1), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border-top: 1px solid #e6eff8;
}

/* Blue-tinted outer space makes the dark CTA shell feel intentional. */
body[data-service] .reference-service-cta-reference {
  background:
    radial-gradient(circle at 10% 50%, rgba(91, 192, 255, 0.16), transparent 24%),
    linear-gradient(180deg, #f1f9ff 0%, #e7f5ff 100%);
}

/* Compact Applications cards so the content feels intentional, not stretched. */
body[data-service] .reference-applications-reference .reference-applications-grid {
  gap: 16px 24px;
  margin-top: 34px;
  width: min(100%, 1450px);
  margin-right: auto;
  margin-left: auto;
}

body[data-service] .reference-applications-reference .reference-application-card {
  min-height: 188px;
  padding: 17px 30px 15px !important;
  border-radius: 17px;
  box-shadow: 0 12px 26px rgba(28, 92, 137, 0.08) !important;
}

body[data-service] .reference-applications-reference .reference-application-card::after {
  right: -28px;
  bottom: -52px;
  width: 170px;
  height: 132px;
}

body[data-service] .reference-applications-reference .reference-application-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
  font-size: 1.8rem !important;
}

body[data-service] .reference-applications-reference .reference-application-icon i {
  font-size: 1.8rem;
}

body[data-service] .reference-applications-reference .reference-application-number {
  top: 17px;
  right: 21px;
  font-size: 1.4rem !important;
}

body[data-service] .reference-applications-reference .reference-application-card h3 {
  margin-bottom: 6px !important;
  font-size: 0.96rem !important;
  line-height: 1.2;
}

body[data-service] .reference-applications-reference .reference-application-card p {
  font-size: 0.78rem !important;
  line-height: 1.42 !important;
}

body[data-service] .reference-applications-reference .reference-application-bottom-line {
  width: 50px;
  height: 3px;
}

@media (max-width: 520px) {
  body[data-service] .reference-applications-reference .reference-applications-grid {
    gap: 12px;
  }

  body[data-service] .reference-applications-reference .reference-application-card {
    min-height: 178px;
    padding: 15px 22px 14px !important;
  }
}

/* Compact Applications card finish — preserve the tighter rhythm on every service page. */
body[data-service] .reference-applications-reference .reference-applications-grid {
  row-gap: 18px;
}

/* Premium process-section finish: balanced heading and cleaner card hierarchy. */
body[data-service] .reference-process-reference {
  padding: 72px 0 82px;
  background:
    radial-gradient(circle at 4% 18%, rgba(36, 143, 239, 0.14), transparent 25%),
    radial-gradient(circle at 96% 82%, rgba(141, 205, 255, 0.18), transparent 27%),
    linear-gradient(180deg, #fbfdff 0%, #f2f9ff 100%);
}

body[data-service] .reference-process-reference-inner {
  text-align: center;
}

body[data-service] .reference-process-reference h2 {
  width: min(1080px, 100%);
  margin: 16px auto 12px;
  font-family: inherit;
  font-size: clamp(2.15rem, 3.1vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -1.2px;
  text-wrap: balance;
}

body[data-service] .reference-process-reference .reference-section-intro {
  max-width: 720px;
  margin: 0 auto;
  color: #536b87;
  font-size: 0.98rem;
  line-height: 1.55;
}

body[data-service] .reference-process-reference .reference-process-grid {
  gap: 44px;
  margin-top: 66px;
}

body[data-service] .reference-process-card {
  min-height: 258px;
  padding: 78px 24px 22px;
  border: 1px solid rgba(110, 183, 243, 0.44);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(34, 105, 157, 0.09);
}

body[data-service] .reference-process-card h3 {
  max-width: 240px;
  margin: 9px 0 11px;
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.22;
}

body[data-service] .reference-process-card p {
  max-width: 230px;
  color: #5a718c;
  font-size: 0.8rem;
  line-height: 1.5;
}

body[data-service] .reference-process-icon {
  width: 94px;
  height: 94px;
  border: 1px solid rgba(99, 174, 240, 0.5);
  box-shadow: 0 12px 24px rgba(30, 115, 188, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

body[data-service] .reference-process-arrow {
  right: -36px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(105, 145, 255, 0.52);
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(49, 112, 187, 0.12);
}

@media (max-width: 1100px) {
  body[data-service] .reference-process-reference .reference-process-grid {
    gap: 30px;
    margin-top: 58px;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-process-reference {
    padding: 58px 0 64px;
  }

  body[data-service] .reference-process-reference h2 {
    width: 100%;
    font-size: 2rem;
    letter-spacing: -0.6px;
  }

  body[data-service] .reference-process-reference .reference-process-grid {
    margin-top: 54px;
  }
}

/* Homepage hero: reference-inspired split layout with a curved video edge. */
.hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
  height: clamp(650px, calc(100vh - 82px), 760px);
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 8% 84%, rgba(217, 194, 157, 0.22), transparent 35%),
    linear-gradient(115deg, #fbf9f4 0%, #f7f4ec 100%);
}

.hero-banner::before,
.hero-banner::after {
  display: none;
}

.hero-banner .hero-container {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 64px), 1720px);
  max-width: 1720px;
  margin: 0 auto;
  padding: 0;
}

.hero-intro-layout {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 52px;
}

.hero-heading-content {
  width: min(100%, 800px);
}

.hero-banner .hero-badge-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
}

.hero-banner .hero-badge-pill::before {
  width: 28px;
  height: 1px;
  background: #c66b43;
  content: "";
}

.hero-banner .badge-title-txt {
  color: #ba623b;
  font-size: 0.75rem;
  letter-spacing: 2px;
}

.hero-banner .hero-main-title {
  max-width: 800px;
  color: #102c3d;
  font-size: clamp(3.45rem, 5vw, 5.2rem);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.055em;
}

.hero-italic-line {
  color: #102c3d;
  font-size: 0.84em;
}

.hero-side-copy {
  width: min(100%, 500px);
  margin: 23px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-side-eyebrow {
  display: none;
}

.hero-banner .hero-subtext-para {
  max-width: 510px;
  margin: 0 0 22px;
  color: #566773;
  font-size: 1.05rem;
  line-height: 1.6;
}

.hero-banner .hero-buttons-flex {
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto;
  margin: 0;
}

.hero-banner .btn-hero-explore {
  min-height: 50px;
  padding: 13px 27px;
  border: 0;
  background: #0879e8;
  box-shadow: 0 9px 23px rgba(0, 103, 213, 0.22);
}

.hero-banner .btn-hero-talk {
  min-height: 50px;
  padding: 12px 23px;
  border: 1px solid #71828c;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: none;
}

.hero-banner .hero-stats-bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  width: min(100%, 790px);
  max-width: 790px !important;
  gap: 0 !important;
  margin: 42px 0 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hero-banner .hero-stats-bar .stat-item {
  min-width: 0;
  gap: 10px;
  padding: 5px 14px;
  border-right: 1px solid rgba(191, 119, 75, 0.28);
}

.hero-banner .hero-stats-bar .stat-item:first-child {
  padding-left: 0;
}

.hero-banner .hero-stats-bar .stat-item:last-child {
  border-right: 0;
}

.hero-banner .hero-stats-bar .stat-item:not(:last-child)::after {
  display: none !important;
}

.hero-banner .hero-stats-bar .stat-icon-circle {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #102c3d;
  font-size: 1.35rem;
}

.hero-banner .hero-stats-bar .stat-meta .num,
.hero-banner .hero-stats-bar .stat-meta .txt-bold {
  color: #102c3d !important;
  font-size: 1.02rem;
  font-weight: 800;
}

.hero-banner .hero-stats-bar .stat-meta .lbl {
  color: #5d6c73 !important;
  font-size: 0.61rem;
  letter-spacing: 0.45px;
}

.hero-video-bg-wrap {
  position: absolute;
  inset: 0 0 0 auto;
  order: initial;
  width: 68%;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 0;
  clip-path: ellipse(80% 120% at 100% 50%);
  background: #0b3b55;
  box-shadow: none;
  z-index: 1;
}

.hero-banner .hero-video-bg {
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: none;
  z-index: 1;
}

.hero-banner .hero-video-overlay {
  background: linear-gradient(90deg, rgba(8, 37, 54, 0.16), transparent 23%) !important;
}

.hero-media-label,
.hero-media-caption,
.hero-media-side-note {
  display: none;
}

@media (max-width: 1100px) {
  .hero-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 0;
    padding: 46px 0 30px;
  }

  .hero-banner .hero-container {
    order: 1;
    width: 100%;
    max-width: 100%;
  }

  .hero-intro-layout {
    width: calc(100% - 56px);
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
  }

  .hero-heading-content {
    width: 100%;
  }

  .hero-banner .hero-main-title {
    max-width: 820px;
    font-size: clamp(3rem, 6.2vw, 4.5rem);
  }

  .hero-side-copy {
    width: 100%;
    max-width: 620px;
    margin-top: 18px;
  }

  .hero-banner .hero-stats-bar {
    width: 100%;
    max-width: 720px !important;
    margin-top: 30px;
  }

  .hero-video-bg-wrap {
    position: relative;
    inset: auto;
    order: 2;
    width: calc(100% - 48px);
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 32px auto 0;
    clip-path: none;
    border-radius: 22px;
    overflow: hidden;
  }

  .hero-banner .hero-video-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media (max-width: 700px) {
  .hero-banner {
    padding: 34px 0 22px;
  }

  .hero-intro-layout {
    width: calc(100% - 36px);
  }

  .hero-banner .hero-badge-pill {
    margin-bottom: 15px;
  }

  .hero-banner .badge-title-txt {
    font-size: 0.64rem;
    letter-spacing: 1.3px;
  }

  .hero-banner .hero-main-title {
    font-size: clamp(2.35rem, 9vw, 3.65rem);
    line-height: 1.03;
  }

  .hero-italic-line {
    font-size: 0.88em;
  }

  .hero-side-copy {
    margin-top: 16px;
  }

  .hero-banner .hero-subtext-para {
    margin-bottom: 16px;
    font-size: 0.9rem;
  }

  .hero-banner .hero-buttons-flex {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 9px;
  }

  .hero-banner .btn-hero-explore,
  .hero-banner .btn-hero-talk {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .hero-banner .hero-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 0 !important;
    margin-top: 24px;
  }

  .hero-banner .hero-stats-bar .stat-item {
    padding: 6px 8px;
    border-right: 0;
  }

  .hero-banner .hero-stats-bar .stat-item:first-child {
    padding-left: 8px;
  }

  .hero-banner .hero-stats-bar .stat-icon-circle {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 1.1rem;
  }

  .hero-video-bg-wrap {
    width: calc(100% - 28px);
    aspect-ratio: 16 / 9;
    margin-top: 24px;
    border-radius: 18px;
  }
}

@media (max-width: 390px) {
  .hero-banner .hero-buttons-flex {
    flex-direction: column;
  }

  .hero-banner .btn-hero-explore,
  .hero-banner .btn-hero-talk {
    width: 100%;
    justify-content: center;
  }
}

/* Center the full homepage video and softly blend both horizontal edges. */
@media (min-width: 701px) {
  .hero-banner .hero-video-bg {
    right: 0;
    left: auto;
    width: 62%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
  }

  .hero-banner .hero-video-overlay {
    background: transparent !important;
  }
}

@media (min-width: 1200px) {
  .hero-banner .hero-video-bg {
    width: 70.5%;
  }
}

@media (max-width: 700px) {
  .hero-banner .hero-video-bg {
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
  }
}

/* Editorial homepage hero inspired by the supplied reference layout. */
.hero-banner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  gap: 0;
  padding: 34px 0 28px;
  overflow: hidden;
  background: #f7f5ef;
}

.hero-banner::before,
.hero-banner::after {
  display: none;
}

.hero-banner .hero-container {
  position: relative;
  order: 1;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hero-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  align-items: end;
  gap: clamp(36px, 5.4vw, 104px);
  width: min(calc(100% - 64px), 1560px);
  margin: 0 auto;
  padding: 0 0 34px;
}

.hero-heading-content {
  min-width: 0;
}

.hero-banner .hero-badge-pill {
  display: block;
  width: fit-content;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero-banner .badge-title-txt {
  color: #b65b32;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.hero-banner .hero-main-title {
  margin: 0;
  color: #102e32;
  font-size: clamp(3.2rem, 5.15vw, 5.35rem);
  font-weight: 600;
  line-height: 0.99;
  letter-spacing: -0.055em;
  text-shadow: none;
}

.hero-banner .hero-main-title br {
  display: block;
}

.hero-italic-line {
  display: inline-block;
  color: #102e32;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 0.94em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.045em;
}

.hero-banner .text-water-gradient {
  color: #102e32;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
}

.hero-side-copy {
  align-self: end;
  margin-bottom: 2px;
  padding: 20px 22px 20px 24px;
  border: 1px solid rgba(12, 55, 58, 0.09);
  border-left: 3px solid #b65b32;
  border-radius: 3px 17px 17px 3px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 12px 28px rgba(29, 52, 48, 0.055);
}

.hero-side-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #a75531;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1.2;
}

.hero-banner .hero-subtext-para {
  max-width: 290px;
  margin: 0 0 15px;
  color: #45575a;
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.62;
}

.hero-editorial-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  border-radius: 5px;
  background: #0b3035;
  color: #ffffff;
  font-size: 0.83rem;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-editorial-cta:hover {
  transform: translateY(-2px);
  background: #16494b;
  color: #ffffff;
}

.hero-expert-link {
  display: block;
  margin-top: 12px;
  padding: 0;
  color: #496166;
  font-size: 0.8rem;
  font-weight: 600;
}

.hero-expert-link i {
  margin-left: 6px;
  font-size: 0.72rem;
}

.hero-video-bg-wrap {
  position: relative;
  inset: auto;
  order: 2;
  width: min(calc(100% - 64px), 1808px);
  max-width: 1808px;
  height: clamp(430px, 30vw, 580px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 8% 16%, rgba(98, 175, 156, 0.18), transparent 34%),
    radial-gradient(ellipse at 95% 88%, rgba(202, 117, 62, 0.12), transparent 30%),
    linear-gradient(115deg, #12383d 0%, #0a292f 52%, #123e42 100%);
  box-shadow: 0 16px 34px rgba(26, 40, 35, 0.18);
  z-index: 1;
}

.hero-banner .hero-video-bg {
  top: 50%;
  right: auto;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
  z-index: 1;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hero-banner .hero-video-backdrop {
  display: none;
}

.hero-banner .hero-video-overlay {
  background:
    linear-gradient(90deg, rgba(4, 20, 24, 0.62) 0%, rgba(4, 20, 24, 0.2) 26%, transparent 47%, transparent 85%, rgba(4, 20, 24, 0.12) 100%),
    linear-gradient(0deg, rgba(4, 20, 24, 0.62) 0%, transparent 43%) !important;
  z-index: 2;
}

.hero-media-label {
  position: absolute;
  top: 26px;
  left: 30px;
  z-index: 3;
  padding: 9px 17px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(8, 30, 33, 0.42);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
}

.hero-media-caption {
  position: absolute;
  bottom: 32px;
  left: 32px;
  z-index: 3;
  padding-left: 18px;
  border-left: 1px solid #d9854c;
  color: #ffffff;
}

.hero-media-caption p {
  margin: 0 0 12px;
  color: #ffffff;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  font-style: italic;
  line-height: 1.16;
}

.hero-media-caption a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  pointer-events: auto;
}

.hero-media-side-note {
  position: absolute;
  top: 50%;
  right: 34px;
  z-index: 3;
  width: 225px;
  padding-left: 16px;
  border-left: 1px solid rgba(217, 133, 76, 0.8);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%);
}

.hero-media-side-note > span {
  color: #e2a16f;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.hero-media-side-note p {
  margin: 11px 0 16px;
  color: #ffffff;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.2;
}

.hero-media-side-note small {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.hero-media-side-note small i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e2a16f;
}

.hero-banner .hero-stats-bar {
  display: none !important;
}

@media (max-width: 1050px) {
  .hero-intro-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 28px;
    width: calc(100% - 56px);
  }

  .hero-banner .hero-main-title {
    font-size: clamp(2.8rem, 5.1vw, 4.3rem);
  }

  .hero-video-bg-wrap {
    width: calc(100% - 48px);
    height: clamp(360px, 42vw, 480px);
  }

  .hero-media-side-note {
    display: none;
  }
}

@media (max-width: 760px) {
  .hero-banner {
    padding: 27px 0 20px;
  }

  .hero-intro-layout {
    display: block;
    width: calc(100% - 40px);
    padding-bottom: 23px;
  }

  .hero-banner .hero-badge-pill {
    margin-bottom: 13px;
  }

  .hero-banner .badge-title-txt {
    font-size: 0.66rem;
    letter-spacing: 1.5px;
  }

  .hero-banner .hero-main-title {
    font-size: clamp(2.45rem, 8.5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
  }

  .hero-italic-line {
    font-size: 0.9em;
  }

  .hero-side-copy {
    margin: 18px 0 0;
    padding: 16px 17px 16px 18px;
  }

  .hero-banner .hero-subtext-para {
    max-width: 460px;
    margin-bottom: 13px;
    font-size: 0.9rem;
  }

  .hero-expert-link {
    display: inline-block;
    margin: 0 0 0 12px;
  }

  .hero-video-bg-wrap {
    width: calc(100% - 28px);
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
  }

  .hero-banner .hero-video-bg {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-position: center;
    transform: none;
  }

  .hero-media-label {
    top: 13px;
    left: 13px;
    padding: 7px 11px;
    font-size: 0.58rem;
    letter-spacing: 1px;
  }

  .hero-media-caption {
    bottom: 15px;
    left: 15px;
    padding-left: 11px;
  }

  .hero-media-caption p {
    margin-bottom: 6px;
    font-size: clamp(1.05rem, 4.8vw, 1.45rem);
  }

  .hero-media-caption a {
    gap: 7px;
    font-size: 0.67rem;
  }
}

@media (max-width: 390px) {
  .hero-banner .hero-main-title {
    font-size: 2.3rem;
  }

  .hero-side-copy {
    margin-top: 15px;
    padding: 14px 15px 14px 16px;
  }

  .hero-editorial-cta {
    min-height: 41px;
    padding: 0 14px;
  }

  .hero-media-label {
    top: 10px;
    left: 10px;
    padding: 6px 9px;
  }
}

/* Services directory cards: stronger category borders and crisp, high-contrast copy. */
.services-directory-grid {
  gap: 26px;
}

.directory-service-card {
  border: 1px solid rgba(109, 169, 213, 0.48);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 65, 110, 0.09), 0 2px 6px rgba(23, 102, 164, 0.05);
}

.directory-service-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, #1687dc, #6dbdff);
}

.directory-card-purple::before {
  background: linear-gradient(90deg, #7048e8, #b18aff);
}

.directory-card-cyan::before {
  background: linear-gradient(90deg, #0795b2, #63d7e8);
}

.directory-card-sapphire::before {
  background: linear-gradient(90deg, #2563c7, #70a8ff);
}

.directory-card-emerald::before {
  background: linear-gradient(90deg, #059669, #72d6a9);
}

.directory-card-blue {
  border-color: rgba(53, 145, 220, 0.42);
}

.directory-card-purple {
  border-color: rgba(132, 92, 224, 0.42);
}

.directory-card-cyan {
  border-color: rgba(28, 169, 191, 0.42);
}

.directory-card-sapphire {
  border-color: rgba(62, 119, 215, 0.42);
}

.directory-card-emerald {
  border-color: rgba(49, 171, 124, 0.42);
}

.directory-service-card:hover {
  border-color: rgba(0, 128, 255, 0.68);
  box-shadow: 0 22px 42px rgba(15, 65, 110, 0.15), 0 4px 12px rgba(23, 121, 203, 0.08);
}

.directory-card-media {
  height: 192px;
  border-bottom: 1px solid rgba(126, 180, 224, 0.26);
}

.directory-card-body {
  padding: 22px 21px 21px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.directory-card-body h3 {
  min-height: 2.65em;
  color: #08284d;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.32;
  text-rendering: optimizeLegibility;
}

.directory-card-body p {
  color: #3f5870;
  font-size: 0.79rem;
  font-weight: 500;
  line-height: 1.58;
  opacity: 1;
  text-rendering: optimizeLegibility;
}

.directory-card-link {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .directory-card-media {
    height: 205px;
  }

  .directory-card-body {
    padding: 20px 19px 21px;
  }
}

/* Refined services dropdown: clear utility link, balanced service grid, and softer interaction states. */
.dropdown-list {
  width: min(560px, calc(100vw - 64px));
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  padding: 16px;
  border: 1px solid rgba(126, 180, 224, 0.42);
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 22px 52px rgba(10, 63, 111, 0.17), 0 4px 14px rgba(20, 105, 176, 0.08);
}

.dropdown-list li:first-child {
  grid-column: 1 / -1;
  margin-bottom: 5px;
  padding-bottom: 9px;
  border-bottom: 1px solid #e5f0f8;
}

.dropdown-list li:first-child a {
  background: #eef7ff;
  color: var(--primary-blue);
  font-weight: 700;
}

.dropdown-list li a {
  min-height: 48px;
  padding: 10px 12px;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 0.86rem;
  line-height: 1.35;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dropdown-list li a i {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #e8f4ff;
  color: var(--primary-blue);
  font-size: 0.62rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dropdown-list li a:hover {
  background: #f1f8ff;
  border-color: #cfe7f8;
  color: #075da9;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(23, 121, 203, 0.08);
}

.dropdown-list li a:hover i {
  background: var(--primary-blue);
  color: #ffffff;
  transform: translateX(1px);
}

@media (max-width: 1100px) {
  .main-header .dropdown-list {
    width: 100%;
  }

  .main-header .dropdown-list li:first-child {
    grid-column: auto;
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 0;
  }
}

/* Projects register: readable card rows on phones instead of a cropped wide table. */
@media (max-width: 640px) {
  body.projects-page-body .projects-table-scroll {
    overflow: visible;
    border-radius: 20px;
  }

  body.projects-page-body .projects-table-toolbar {
    padding: 20px 18px;
  }

  body.projects-page-body .projects-register-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  body.projects-page-body .projects-register-table thead {
    display: none;
  }

  body.projects-page-body .projects-register-table tbody {
    display: grid;
    gap: 12px;
    padding: 14px;
  }

  body.projects-page-body .projects-register-table tbody tr {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    border: 1px solid #dcecf5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(35, 104, 150, 0.07);
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(even) {
    background: #f8fcff;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(even) td,
  body.projects-page-body .projects-register-table tbody tr:hover td {
    background: transparent;
  }

  body.projects-page-body .projects-register-table tbody tr:last-child td {
    padding-bottom: 8px;
  }

  body.projects-page-body .projects-register-table td,
  body.projects-page-body .projects-register-table td:first-child,
  body.projects-page-body .projects-register-table td:last-child {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    color: #536f86;
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
  }

  body.projects-page-body .projects-register-table td::before {
    color: #6b879c;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.65px;
    text-transform: uppercase;
  }

  body.projects-page-body .projects-register-table td:first-child {
    position: absolute;
    top: 14px;
    right: 16px;
    display: block;
    width: auto;
    padding: 0;
    color: #0070f3;
    font-weight: 800;
    text-align: right;
  }

  body.projects-page-body .projects-register-table td:first-child::before {
    display: none;
  }

  body.projects-page-body .projects-register-table td:nth-child(2) {
    padding-right: 52px;
    color: #173b5c;
    font-weight: 750;
  }

  body.projects-page-body .projects-register-table td:nth-child(2)::before {
    content: "Client";
  }

  body.projects-page-body .projects-register-table td:nth-child(3)::before {
    content: "Address";
  }

  body.projects-page-body .projects-register-table td:nth-child(4)::before {
    content: "Project Type";
  }

  body.projects-page-body .projects-register-table td:nth-child(5)::before {
    content: "Project Cost";
  }

  body.projects-page-body .projects-register-table td:nth-child(5) {
    color: #075cae;
    font-weight: 800;
  }
}

@media (max-width: 640px) {
  body.projects-page-body .projects-register-table tbody tr {
    overflow: hidden;
    border-color: rgba(83, 177, 226, 0.34);
    background: linear-gradient(145deg, #ffffff 0%, #f5fbff 100%);
    box-shadow: 0 12px 24px rgba(25, 94, 137, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    animation-duration: 0.68s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1);
  }

  body.projects-page-body .projects-register-table tbody tr::before {
    display: none;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(odd) {
    animation-name: projectsCardFromLeft;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(even) {
    animation-name: projectsCardFromRight;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(2) {
    animation-delay: 0.06s;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(3) {
    animation-delay: 0.12s;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(4) {
    animation-delay: 0.18s;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(5) {
    animation-delay: 0.24s;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(6) {
    animation-delay: 0.3s;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(7) {
    animation-delay: 0.36s;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(8) {
    animation-delay: 0.42s;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(9) {
    animation-delay: 0.48s;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(10) {
    animation-delay: 0.54s;
  }

  body.projects-page-body .projects-register-table tbody tr:nth-child(n+11) {
    animation-delay: 0.58s;
  }

  body.projects-page-body .projects-register-table tbody tr td:nth-child(2) {
    padding-top: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2eef5;
  }

  body.projects-page-body .projects-register-table tbody tr td:nth-child(3),
  body.projects-page-body .projects-register-table tbody tr td:nth-child(4),
  body.projects-page-body .projects-register-table tbody tr td:nth-child(5) {
    padding-top: 9px;
    padding-bottom: 5px;
  }

  body.projects-page-body .projects-register-table tbody tr td::before {
    color: #24709a;
    font-size: 0.59rem;
    letter-spacing: 0.8px;
  }

  body.projects-page-body .projects-register-table tbody tr td:first-child {
    top: 15px;
    right: 16px;
    min-width: 28px;
    padding: 4px 8px;
    border: 1px solid #bfe5f6;
    border-radius: 999px;
    color: #0070f3;
    background: #eaf8ff;
    text-align: center;
  }
}

@keyframes projectsCardFromLeft {
  from {
    opacity: 0;
    transform: translateX(-28px) translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes projectsCardFromRight {
  from {
    opacity: 0;
    transform: translateX(28px) translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.projects-page-body .projects-register-table tbody tr {
    animation: none !important;
  }
}

/* Projects hero mobile refinement */
@media (max-width: 640px) {
  body.projects-page-body .contact-hero-banner-sec {
    min-height: 0;
    padding: 0;
    background-position: center center;
  }

  body.projects-page-body .contact-hero-inner {
    max-width: 100%;
    padding: 34px 18px 38px;
  }

  body.projects-page-body .about-page-breadcrumb {
    margin-bottom: 18px;
    padding: 7px 12px;
    font-size: 0.68rem;
  }

  body.projects-page-body .about-page-title {
    margin-bottom: 12px;
    font-size: clamp(2.25rem, 10vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -1.2px;
  }

  body.projects-page-body .about-page-subtitle {
    max-width: 100%;
    margin-bottom: 12px;
    font-size: 1.08rem;
    line-height: 1.32;
  }

  body.projects-page-body .about-page-desc {
    max-width: 100%;
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.52;
  }

  body.projects-page-body .hero-stats-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
    max-width: 100%;
    margin-top: 22px;
    padding: 10px !important;
    gap: 10px !important;
    border-radius: 20px;
  }

  body.projects-page-body .hero-stats-bar .stat-item {
    min-width: 0;
    min-height: 66px;
    padding: 9px 10px !important;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.075);
  }

  body.projects-page-body .hero-stats-bar .stat-item:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 5px);
  }

  body.projects-page-body .hero-stats-bar .stat-item:not(:last-child)::after {
    display: none;
  }

  body.projects-page-body .hero-stats-bar .stat-icon-circle {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    font-size: 1rem;
  }

  body.projects-page-body .hero-stats-bar .stat-meta {
    min-width: 0;
  }

  body.projects-page-body .hero-stats-bar .stat-meta .num,
  body.projects-page-body .hero-stats-bar .stat-meta .txt-bold {
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.projects-page-body .hero-stats-bar .stat-meta .lbl {
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Refined project register table */
.projects-page-body .projects-table-scroll {
  max-width: 1720px;
  overflow-x: auto;
  border: 1px solid #d9eaf5;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 22px 55px rgba(24, 84, 125, 0.12);
  scrollbar-color: #5bb8e8 #eaf6fc;
  scrollbar-width: thin;
}

.projects-page-body .projects-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px 22px;
  border-bottom: 1px solid #e2eef5;
  background: linear-gradient(135deg, #ffffff 0%, #f2faff 100%);
}

.projects-page-body .projects-table-toolbar-label {
  display: block;
  margin-bottom: 6px;
  color: #0070f3;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 2px;
}

.projects-page-body .projects-table-toolbar h3 {
  margin: 0;
  color: #10233f;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.25px;
}

.projects-page-body .projects-table-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid #cfe8f5;
  border-radius: 999px;
  color: #075cae;
  background: #eaf7ff;
  font-size: 0.76rem;
  font-weight: 800;
}

.projects-page-body .projects-table-count i {
  color: #0070f3;
}

.projects-page-body .projects-register-table {
  min-width: 1180px;
  color: #49657e;
  font-size: 0.88rem;
  line-height: 1.55;
}

.projects-page-body .projects-register-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 17px 19px;
  border-bottom: 0;
  color: #ffffff;
  background: linear-gradient(135deg, #0a4d80 0%, #087ca8 100%);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.projects-page-body .projects-register-table th:first-child {
  border-top-left-radius: 0;
}

.projects-page-body .projects-register-table th:last-child {
  border-top-right-radius: 0;
}

.projects-page-body .projects-register-table th:first-child,
.projects-page-body .projects-register-table th:last-child,
.projects-page-body .projects-register-table thead th {
  color: #ffffff !important;
}

.projects-page-body .projects-register-table td {
  padding: 17px 19px;
  border-bottom: 1px solid #e8f1f6;
  color: #536f86;
  vertical-align: middle;
}

.projects-page-body .projects-register-table tbody tr:nth-child(even) td {
  background: #f7fbfd;
}

.projects-page-body .projects-register-table tbody tr:hover td {
  background: #e7f6fd;
}

.projects-page-body .projects-register-table tbody tr:last-child td {
  padding-bottom: 42px;
  border-bottom: 0;
}

.projects-page-body .projects-register-table th:first-child,
.projects-page-body .projects-register-table td:first-child {
  width: 78px;
  color: #0070f3;
  font-weight: 800;
  text-align: center;
}

.projects-page-body .projects-register-table td:nth-child(2) {
  color: #173b5c;
  font-weight: 750;
}

.projects-page-body .projects-register-table td:nth-child(3) {
  color: #607b91;
}

.projects-page-body .projects-register-table td:nth-child(4) {
  color: #49657e;
}

/* Keep the long Vidya Dairy client name flowing naturally instead of using forced breaks. */
.projects-page-body .projects-register-table tbody tr:nth-child(32) td:nth-child(2) {
  font-size: 0;
}

.projects-page-body .projects-register-table tbody tr:nth-child(32) td:nth-child(2)::after {
  content: "VIDYA DAIRY, ANAND AGRICULTURAL UNIVERSITY CAMPUS, ANAND 388110";
  color: #173b5c;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .projects-page-body .projects-register-table tbody tr:nth-child(32) td:nth-child(2) {
    display: block !important;
    padding-right: 52px !important;
    font-size: 0 !important;
  }

  .projects-page-body .projects-register-table tbody tr:nth-child(32) td:nth-child(2)::before {
    display: block;
    margin-bottom: 8px;
    color: #24709a;
    content: "Client";
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }

  .projects-page-body .projects-register-table tbody tr:nth-child(32) td:nth-child(2)::after {
    display: block;
    color: #173b5c;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.45;
  }

}

.projects-page-body .projects-register-table th:last-child,
.projects-page-body .projects-register-table td:last-child {
  width: 190px;
  color: #075cae;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .projects-page-body .projects-table-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
  }

  .projects-page-body .projects-register-table {
    min-width: 1120px;
    font-size: 0.84rem;
  }

  .projects-page-body .projects-register-table th,
  .projects-page-body .projects-register-table td {
    padding: 15px 16px;
  }
}

/* ==========================================================================
   PROJECTS PAGE
   ========================================================================== */
.projects-page-body {
  background: #f5faff;
  color: #10233f;
}

.projects-page-body a {
  text-decoration: none;
}

.projects-hero {
  position: relative;
  overflow: hidden;
  padding: 62px 0 86px;
  background:
    radial-gradient(circle at 88% 16%, rgba(125, 211, 252, 0.36), transparent 30%),
    linear-gradient(135deg, #eaf7ff 0%, #f8fcff 52%, #dff2ff 100%);
}

.projects-hero::after {
  position: absolute;
  right: -8%;
  bottom: -120px;
  width: 54%;
  height: 260px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.16);
  content: '';
  filter: blur(2px);
}

.projects-hero-glow {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  filter: blur(1px);
}

.projects-hero-glow-one {
  top: 80px;
  left: 7%;
  width: 120px;
  height: 120px;
}

.projects-hero-glow-two {
  right: 44%;
  bottom: 0;
  width: 190px;
  height: 190px;
  opacity: 0.5;
}

.projects-hero-inner,
.projects-intro-section,
.projects-process-section,
.projects-contact-section {
  position: relative;
  z-index: 1;
}

.projects-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 44px;
  padding: 9px 15px;
  border: 1px solid rgba(0, 112, 243, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}

.projects-breadcrumb a {
  color: #0070f3;
}

.projects-breadcrumb i {
  color: #94a3b8;
  font-size: 0.65rem;
}

.projects-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}

.projects-hero-copy {
  max-width: 700px;
}

.projects-eyebrow,
.projects-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0070f3;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 2.4px;
}

.projects-eyebrow span {
  display: inline-block;
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: #38bdf8;
}

.projects-hero h1 {
  max-width: 720px;
  margin: 18px 0 20px;
  color: #10233f;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(2.55rem, 5vw, 5rem);
  font-weight: 800;
  letter-spacing: -2.2px;
  line-height: 1.04;
}

.projects-hero-copy>p {
  max-width: 630px;
  margin: 0;
  color: #506681;
  font-size: 1.08rem;
  line-height: 1.75;
}

.projects-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.projects-primary-btn,
.projects-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 50px;
  padding: 0 21px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.projects-primary-btn {
  color: #ffffff;
  background: linear-gradient(135deg, #0070f3, #0284c7);
  box-shadow: 0 14px 28px rgba(0, 112, 243, 0.22);
}

.projects-secondary-btn {
  border: 1px solid rgba(0, 112, 243, 0.18);
  color: #075cae;
  background: rgba(255, 255, 255, 0.82);
}

.projects-primary-btn:hover,
.projects-secondary-btn:hover {
  transform: translateY(-3px);
}

.projects-primary-btn:hover {
  box-shadow: 0 18px 32px rgba(0, 112, 243, 0.28);
}

.projects-hero-visual {
  position: relative;
  min-width: 0;
}

.projects-hero-image-wrap {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, 0.74);
  border-radius: 34px;
  box-shadow: 0 26px 60px rgba(32, 103, 157, 0.2);
  transform: rotate(1.2deg);
}

.projects-hero-image-wrap img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}

.projects-image-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 38, 72, 0.02) 20%, rgba(5, 31, 59, 0.72) 100%);
}

.projects-hero-caption {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  color: #ffffff;
  background: rgba(6, 38, 72, 0.58);
  backdrop-filter: blur(12px);
}

.projects-caption-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  color: #075cae;
  background: #dff5ff;
}

.projects-hero-caption strong,
.projects-hero-caption small {
  display: block;
}

.projects-hero-caption strong {
  font-size: 0.88rem;
}

.projects-hero-caption small {
  margin-top: 3px;
  color: #c8e8fb;
  font-size: 0.72rem;
}

.projects-floating-stat {
  position: absolute;
  top: 42px;
  right: -26px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 17px;
  border: 1px solid rgba(0, 112, 243, 0.15);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(38, 106, 154, 0.17);
  transform: rotate(3deg);
}

.projects-floating-stat strong {
  color: #0070f3;
  font-size: 1.6rem;
  line-height: 1;
}

.projects-floating-stat span {
  color: #55708b;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
}

.projects-intro-section {
  padding: 100px 0 112px;
  background: #f8fcff;
}

.projects-section-heading {
  max-width: 820px;
  margin: 0 auto 52px;
  text-align: center;
}

.projects-process-copy h2,
.projects-contact-card h2 {
  margin: 14px 0 14px;
  color: #10233f;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  letter-spacing: -1.3px;
  line-height: 1.12;
}

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

.project-showcase-card {
  overflow: hidden;
  border: 1px solid #deedf8;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(35, 104, 150, 0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.project-showcase-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 42px rgba(35, 104, 150, 0.14);
}

.project-card-media {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #d8effc;
}

.project-card-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(7, 37, 67, 0.68));
  content: '';
}

.project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-showcase-card:hover .project-card-media img {
  transform: scale(1.06);
}

.project-card-number {
  position: absolute;
  z-index: 1;
  top: 17px;
  left: 17px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: #075cae;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 800;
}

.project-card-tag {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 16px;
  color: #dff5ff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.project-card-content {
  padding: 24px 24px 25px;
}

.project-card-content h3 {
  min-height: 52px;
  margin: 0 0 10px;
  color: #12365b;
  font-size: 1.25rem;
  line-height: 1.25;
}

.project-card-content p {
  min-height: 78px;
  margin: 0 0 16px;
  color: #647b93;
  font-size: 0.87rem;
  line-height: 1.58;
}

.project-card-content ul {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.project-card-content li {
  position: relative;
  padding-left: 19px;
  color: #4b6885;
  font-size: 0.78rem;
  line-height: 1.35;
}

.project-card-content li::before {
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  content: '';
}

.project-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0070f3;
  font-size: 0.8rem;
  font-weight: 800;
}

.project-card-link i {
  transition: transform 0.25s ease;
}

.project-card-link:hover i {
  transform: translateX(4px);
}

.projects-register-section {
  padding: 100px 0 112px;
  background: #f8fcff;
}

.projects-register-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}

.projects-register-summary>div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 20px;
  border: 1px solid #d8edf9;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(35, 104, 150, 0.05);
}

.projects-register-summary strong {
  color: #0070f3;
  font-size: 1.35rem;
  line-height: 1;
}

.projects-register-summary span {
  color: #607994;
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Use the same glass-card treatment as the Contact page summary cards. */
.projects-register-summary .contact-info-card-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px;
}

.projects-register-summary .contact-card-val {
  color: #0f172a;
  font-size: 1.05rem;
}

.projects-register-summary .contact-card-sub {
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 400;
}

.projects-table-scroll {
  overflow-x: auto;
  border: 1px solid #d6eaf7;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(35, 104, 150, 0.08);
}

.projects-register-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
  color: #284762;
  font-size: 0.81rem;
  line-height: 1.45;
}

.projects-register-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.projects-register-table th {
  padding: 16px 15px;
  border-bottom: 1px solid #c9e4f3;
  color: #075cae;
  background: #eaf7ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.projects-register-table td {
  padding: 15px;
  border-bottom: 1px solid #edf4f8;
  vertical-align: top;
}

.projects-register-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.projects-register-table tbody tr:hover td {
  background: #f0f9ff;
}

.projects-register-table tbody tr:last-child td {
  border-bottom: 0;
}

.projects-register-table th:first-child,
.projects-register-table td:first-child {
  width: 72px;
  color: #0070f3;
  font-weight: 800;
  text-align: center;
}

.projects-register-table th:nth-child(2) {
  width: 28%;
}

.projects-register-table th:nth-child(3) {
  width: 19%;
}

.projects-register-table th:nth-child(4) {
  width: 31%;
}

.projects-register-table th:last-child,
.projects-register-table td:last-child {
  width: 170px;
  color: #12365b;
  font-weight: 800;
  white-space: nowrap;
}

.projects-process-section {
  padding: 92px 0;
  color: #ffffff;
  background: linear-gradient(135deg, #082c52 0%, #075d91 58%, #0a7ba8 100%);
}

.projects-process-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
  align-items: center;
}

.projects-section-kicker-light {
  color: #7dd3fc;
}

.projects-process-copy h2 {
  color: #ffffff;
}

.projects-process-copy p {
  max-width: 530px;
  color: #c5e5f5;
  line-height: 1.7;
}

.projects-process-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
}

.projects-process-steps {
  display: grid;
  gap: 14px;
}

.projects-process-step {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(186, 230, 253, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.09);
}

.projects-process-step>span {
  color: #7dd3fc;
  font-size: 1.45rem;
  font-weight: 800;
}

.projects-process-step h3 {
  margin: 0 0 5px;
  font-size: 1.05rem;
}

.projects-process-step p {
  margin: 0;
  color: #c5e5f5;
  font-size: 0.83rem;
  line-height: 1.5;
}

.projects-contact-section {
  padding: 86px 0;
  background: #eef8ff;
}

.projects-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 48px 58px;
  border: 1px solid #d1ebf9;
  border-radius: 28px;
  background: linear-gradient(110deg, #ffffff, #e8f7ff);
  box-shadow: 0 18px 42px rgba(44, 115, 163, 0.1);
}

.projects-contact-card h2 {
  max-width: 700px;
  margin-bottom: 10px;
}

.projects-contact-card p {
  margin: 0;
  color: #607994;
  line-height: 1.6;
}

.projects-site-footer {
  color: #c8e3f2;
  background: #062542;
}

.projects-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 0.9fr;
  gap: 70px;
  padding: 58px 0 48px;
}

.projects-footer-brand img {
  width: 190px;
  height: auto;
  filter: brightness(0) invert(1);
}

.projects-footer-brand p {
  max-width: 380px;
  margin: 20px 0 0;
  color: #a9c9dc;
  font-size: 0.86rem;
  line-height: 1.65;
}

.projects-footer-grid h3 {
  margin: 3px 0 17px;
  color: #ffffff;
  font-size: 0.95rem;
}

.projects-footer-grid>div:not(.projects-footer-brand)>a {
  display: block;
  margin: 0 0 11px;
  color: #a9c9dc;
  font-size: 0.82rem;
}

.projects-footer-grid>div:not(.projects-footer-brand)>a:hover {
  color: #7dd3fc;
}

.projects-footer-grid i {
  width: 18px;
  color: #38bdf8;
}

.projects-footer-grid .projects-footer-cta {
  margin-top: 20px !important;
  color: #ffffff !important;
  font-weight: 800;
}

.projects-footer-bottom {
  border-top: 1px solid rgba(186, 230, 253, 0.13);
}

.projects-footer-bottom .container {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  color: #83a9c0;
  font-size: 0.72rem;
}

@media (max-width: 1050px) {
  .projects-hero-grid {
    grid-template-columns: 1fr;
  }

  .projects-hero-copy {
    max-width: 800px;
  }

  .projects-hero-visual {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

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

  .projects-process-grid {
    gap: 45px;
  }
}

@media (max-width: 760px) {
  .projects-hero {
    padding: 42px 0 64px;
  }

  .projects-breadcrumb {
    margin-bottom: 30px;
  }

  .projects-hero h1 {
    letter-spacing: -1.2px;
  }

  .projects-hero-copy>p {
    font-size: 0.95rem;
  }

  .projects-hero-image-wrap {
    min-height: 310px;
    border-radius: 24px;
  }

  .projects-hero-image-wrap img {
    min-height: 310px;
  }

  .projects-floating-stat {
    top: 18px;
    right: -8px;
  }

  .projects-intro-section,
  .projects-register-section {
    padding: 70px 0 78px;
  }

  .projects-register-summary {
    grid-template-columns: 1fr;
  }

  .projects-register-table {
    min-width: 1040px;
    font-size: 0.78rem;
  }

  .projects-card-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .project-card-content h3,
  .project-card-content p {
    min-height: 0;
  }

  .projects-process-section {
    padding: 70px 0;
  }

  .projects-process-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .projects-contact-section {
    padding: 62px 0;
  }

  .projects-contact-card {
    align-items: flex-start;
    flex-direction: column;
    padding: 32px 24px;
  }

  .projects-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 44px 0 36px;
  }

  .projects-footer-bottom .container {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Keep every client card and its logo frame visually consistent. */
.client-marquee-wrap .client-logo-box {
  flex: 0 0 168px;
  width: 168px;
  min-width: 168px;
  max-width: 168px;
  height: 92px;
  padding: 10px 14px;
}

.client-marquee-wrap .client-logo-box .client-logo-image {
  width: 140px;
  height: 56px;
  max-width: 100%;
  max-height: 100%;
}

/* Some supplied logos use square canvases with large built-in whitespace. */
.client-marquee-wrap .client-logo-image--scale-125 {
  transform: scale(1.25);
}

.client-marquee-wrap .client-logo-image--scale-135 {
  transform: scale(1.35);
}

.client-marquee-wrap .client-logo-image--scale-155 {
  transform: scale(1.55);
}

.client-marquee-wrap .client-logo-image--scale-165 {
  transform: scale(1.65);
}

@media (max-width: 768px) {
  .client-marquee-wrap .client-logo-box {
    flex-basis: 142px;
    width: 142px;
    min-width: 142px;
    max-width: 142px;
    height: 74px;
    padding: 8px 10px;
  }

  .client-marquee-wrap .client-logo-box .client-logo-image {
    width: 118px;
    height: 42px;
  }
}

/* Knowledge impact banner: stack the bento layout cleanly on phones. */
@media (max-width: 700px) {
  .knowledge-impact-counter-sec {
    padding: 38px 0 52px;
  }

  .knowledge-impact-counter-sec>.container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .impact-bento-master-card {
    width: 100%;
    padding: 28px 18px 24px;
    border-radius: 24px;
  }

  .impact-bento-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .impact-left-brand-col {
    align-items: center;
    text-align: center;
  }

  .impact-badge-pill {
    max-width: 100%;
    justify-content: center;
    padding: 7px 12px;
    margin-bottom: 18px;
  }

  .impact-sub-label {
    font-size: 0.68rem;
    line-height: 1.35;
    letter-spacing: 1.15px;
  }

  .impact-main-heading {
    max-width: 330px;
    margin-bottom: 14px;
    font-size: clamp(2.15rem, 9vw, 2.7rem);
    line-height: 1.08;
  }

  .impact-main-desc {
    max-width: 330px;
    margin-bottom: 18px;
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .impact-trust-pills-group {
    justify-content: center;
    gap: 8px;
  }

  .impact-trust-item {
    gap: 6px;
    padding: 7px 10px;
    font-size: 0.7rem;
  }

  .impact-right-stats-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .impact-bento-stat-card {
    min-width: 0;
    padding: 16px 15px;
    border-radius: 18px;
  }

  .bento-card-top {
    margin-bottom: 10px;
  }

  .bento-icon-number-group {
    gap: 10px;
  }

  .bento-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .bento-card-number {
    font-size: 1.7rem;
  }

  .bento-card-trend {
    padding: 3px 8px;
    font-size: 0.6rem;
  }

  .bento-card-label {
    font-size: 0.92rem;
  }

  .bento-card-sub {
    font-size: 0.75rem;
    line-height: 1.4;
  }
}

/* Final mobile header alignment and logo guardrails. */
@media (max-width: 700px) {
  .main-header {
    overflow: visible;
  }

  .main-header .navbar-container {
    min-height: 72px;
    height: 72px;
    align-items: center;
  }

  .main-header .brand-logo {
    height: 100%;
    align-items: center;
    overflow: visible;
  }

  .main-header .site-main-logo {
    width: min(178px, 44vw);
    height: auto;
    max-height: 46px;
    object-fit: contain;
  }

  .main-header .nav-list {
    align-items: center;
    text-align: center;
  }

  .main-header .nav-item,
  .main-header .nav-link {
    width: 100%;
  }

  .main-header .nav-link {
    justify-content: center;
    outline: none;
  }

  .main-header .nav-link:focus-visible {
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(0, 128, 255, 0.28);
  }

  .main-header .dropdown-list {
    width: min(100%, 360px);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

/* Add breathing room between the hero banner and the overview section. */
body[data-service] .reference-service-overview-combined {
  padding-top: 82px;
}

@media (max-width: 520px) {
  body[data-service] .reference-service-overview-combined {
    padding-top: 64px;
  }
}

/* Responsive shared header: keep contact details and menu controls within the viewport. */
@media (max-width: 1100px) {
  .main-header {
    overflow: visible;
  }

  .main-header .navbar-container {
    position: relative;
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }

  .main-header .nav-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    max-height: calc(100dvh - 110px);
    padding: 12px 20px 20px;
    border-top: 1px solid #e8f0f7;
    border-radius: 0 0 18px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1100;
  }

  .main-header .nav-menu.active {
    display: block;
  }

  .main-header .nav-list {
    align-items: stretch;
    gap: 2px;
  }

  .main-header .nav-link {
    justify-content: space-between;
    min-height: 46px;
    padding: 11px 8px;
  }

  .main-header .nav-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .main-header .mobile-toggle {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border-radius: 10px;
  }

  .main-header .mobile-toggle:hover,
  .main-header .mobile-toggle:focus-visible {
    background: #eff7ff;
    outline: none;
  }
}

@media (max-width: 700px) {
  .top-bar {
    padding: 7px 0;
  }

  .top-bar-inner {
    display: block;
  }

  .top-bar-left {
    display: flex;
    justify-content: center;
    gap: 6px 18px;
    width: 100%;
  }

  .top-bar-left .top-info-item:first-child {
    display: none;
  }

  .top-info-item {
    min-width: 0;
    font-size: clamp(0.62rem, 2.6vw, 0.72rem);
    white-space: nowrap;
  }

  .main-header .navbar-container {
    height: 70px;
    min-height: 70px;
    gap: 8px;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .main-header .site-main-logo {
    width: min(178px, 46vw);
    height: auto;
    max-height: 44px;
  }

  .main-header .nav-menu {
    padding: 10px 16px 18px;
  }

  .main-header .btn-inquiry-pill {
    min-width: 42px;
    min-height: 42px;
    justify-content: center;
    gap: 0;
    padding: 9px 11px;
  }

  .main-header .btn-inquiry-pill span,
  .main-header .btn-inquiry-pill .arrow-icon {
    display: none;
  }
}

@media (max-width: 430px) {
  .top-bar-left {
    justify-content: space-between;
    gap: 6px;
  }

  .top-bar-left .top-info-item:nth-child(2) {
    display: inline-flex;
  }

  .top-info-item {
    gap: 5px;
    font-size: 0.62rem;
  }

  .main-header .navbar-container {
    padding-right: 10px !important;
    padding-left: 12px !important;
  }

  .main-header .site-main-logo {
    width: min(164px, 43vw);
  }

  .main-header .nav-right-actions {
    gap: 5px;
  }
}

/* Mobile homepage hero: show the full video above an uncluttered content area. */
@media (max-width: 700px) {
  .hero-banner {
    display: block;
    min-height: 0;
    padding: 0 0 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f2f8fd 100%);
  }

  .hero-banner::before,
  .hero-banner::after {
    display: none;
  }

  .hero-video-bg-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #0a2742;
    z-index: 1;
  }

  .hero-video-bg {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .hero-video-overlay {
    background: linear-gradient(180deg, transparent 72%, rgba(242, 248, 253, 0.45) 100%) !important;
  }

  .hero-banner .hero-container {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding-top: 22px;
  }

  .hero-left-content {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .hero-badge-pill {
    max-width: 100%;
    margin-bottom: 14px;
    padding: 6px 11px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .badge-title-txt {
    font-size: clamp(0.58rem, 2.5vw, 0.68rem);
    letter-spacing: 0.55px;
  }

  .hero-main-title {
    margin-bottom: 12px;
    font-size: clamp(1.82rem, 8vw, 2.18rem);
    line-height: 1.12;
    letter-spacing: -0.8px;
    overflow-wrap: normal;
  }

  .hero-main-title br {
    display: none;
  }

  .text-water-gradient {
    filter: none;
  }

  .hero-subtext-para {
    margin-bottom: 18px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #40536a;
  }

  .hero-buttons-flex {
    gap: 9px;
    margin-bottom: 18px;
  }

  .btn-hero-explore,
  .btn-hero-talk {
    min-height: 46px;
    padding: 11px 16px;
    font-size: 0.9rem;
  }

  .hero-banner .hero-stats-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100%;
    max-width: none !important;
    gap: 8px !important;
    margin-top: 0;
    padding: 11px !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 22px rgba(15, 45, 75, 0.08) !important;
  }

  .hero-banner .hero-stats-bar .stat-item {
    min-width: 0;
    gap: 8px;
    padding: 8px 5px;
    border: 0;
  }

  .hero-banner .hero-stats-bar .stat-item:not(:last-child)::after {
    display: none;
  }

  .hero-banner .hero-stats-bar .stat-icon-circle {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    font-size: 0.95rem;
  }

  .hero-banner .hero-stats-bar .stat-meta {
    min-width: 0;
  }

  .hero-banner .hero-stats-bar .stat-meta .num,
  .hero-banner .hero-stats-bar .stat-meta .txt-bold {
    font-size: 0.94rem;
    line-height: 1.15;
    white-space: normal;
  }

  .hero-banner .hero-stats-bar .stat-meta .lbl {
    font-size: 0.58rem;
    line-height: 1.2;
    letter-spacing: 0.35px;
  }
}

@media (max-width: 360px) {
  .hero-left-content {
    padding: 0 14px;
  }

  .hero-banner .hero-stats-bar {
    gap: 4px !important;
    padding: 8px !important;
  }

  .hero-banner .hero-stats-bar .stat-item {
    gap: 6px;
    padding: 7px 3px;
  }
}

/* Reference-style Applications / Industries grid shared by every service detail page. */
body[data-service] .reference-applications-reference {
  position: relative;
  overflow: hidden;
  padding: 80px 0 88px;
  background:
    radial-gradient(circle at 4% 9%, rgba(64, 164, 255, 0.13), transparent 23%),
    radial-gradient(circle at 96% 91%, rgba(64, 164, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
}

body[data-service] .reference-applications-reference-inner {
  text-align: center;
}

body[data-service] .reference-applications-reference .reference-service-kicker {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  font-size: 0.78rem;
  letter-spacing: 2.3px;
}

body[data-service] .reference-applications-reference .reference-service-kicker::before,
body[data-service] .reference-applications-reference .reference-service-kicker::after {
  content: '';
  width: 53px;
  height: 2px;
  background: #167dec;
}

body[data-service] .reference-applications-reference h2 {
  margin: 16px 0 10px;
  font-size: clamp(2.35rem, 4vw, 3.55rem);
  letter-spacing: -1.6px;
}

body[data-service] .reference-applications-reference h2 span {
  color: #147be4;
}

body[data-service] .reference-applications-reference .reference-section-intro {
  max-width: 860px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.55;
}

body[data-service] .reference-applications-reference .reference-applications-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: 42px;
}

body[data-service] .reference-application-card {
  position: relative;
  display: flex;
  min-height: 274px;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 38px 23px 40px;
  overflow: hidden;
  border: 1px solid #cfe4f6;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 15px 28px rgba(30, 100, 153, 0.08);
  text-align: left;
}

body[data-service] .reference-application-card::after {
  content: '';
  position: absolute;
  right: -34px;
  bottom: -66px;
  width: 210px;
  height: 170px;
  border-radius: 50%;
  background: rgba(208, 234, 255, 0.3);
  transform: rotate(-25deg);
  pointer-events: none;
}

body[data-service] .reference-application-card.tone-green {
  border-color: #c7efdf;
}

body[data-service] .reference-application-card.tone-purple {
  border-color: #dfd3ff;
}

body[data-service] .reference-application-card.tone-orange {
  border-color: #ffdcb8;
}

body[data-service] .reference-application-card.tone-pink {
  border-color: #ffd2e8;
}

body[data-service] .reference-application-number {
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 25px;
  color: #9bcdf6;
  font-size: 1.9rem;
  font-weight: 850;
  line-height: 1;
}

body[data-service] .reference-application-card.tone-green .reference-application-number {
  color: #a1e8d0;
}

body[data-service] .reference-application-card.tone-purple .reference-application-number {
  color: #c8b5ff;
}

body[data-service] .reference-application-card.tone-orange .reference-application-number {
  color: #ffd09f;
}

body[data-service] .reference-application-card.tone-pink .reference-application-number {
  color: #f7a7ca;
}

body[data-service] .reference-application-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 96px;
  height: 96px;
  margin: 0 0 18px;
  place-items: center;
  border-radius: 50%;
  color: #087be8;
  background: #e2f1ff;
  font-size: 2.45rem;
}

body[data-service] .reference-application-card.tone-green .reference-application-icon {
  color: #05b779;
  background: #ddfaee;
}

body[data-service] .reference-application-card.tone-purple .reference-application-icon {
  color: #7438ed;
  background: #f0e7ff;
}

body[data-service] .reference-application-card.tone-orange .reference-application-icon {
  color: #ff7b00;
  background: #fff0df;
}

body[data-service] .reference-application-card.tone-pink .reference-application-icon {
  color: #ef3f91;
  background: #ffe5f1;
}

body[data-service] .reference-application-card h3 {
  position: relative;
  z-index: 1;
  max-width: 340px;
  margin: 0 0 8px;
  color: #081f43;
  font-size: 1.13rem;
  font-weight: 850;
  line-height: 1.2;
}

body[data-service] .reference-application-card p {
  position: relative;
  z-index: 1;
  max-width: 370px;
  margin: 0;
  color: #687892;
  font-size: 0.95rem;
  line-height: 1.42;
}

body[data-service] .reference-application-bottom-line {
  position: relative;
  z-index: 1;
  width: 63px;
  height: 4px;
  margin-top: auto;
  border-radius: 999px;
  background: #087be8;
}

body[data-service] .reference-application-card.tone-green .reference-application-bottom-line {
  background: #05b779;
}

body[data-service] .reference-application-card.tone-purple .reference-application-bottom-line {
  background: #7438ed;
}

body[data-service] .reference-application-card.tone-orange .reference-application-bottom-line {
  background: #ff7b00;
}

body[data-service] .reference-application-card.tone-pink .reference-application-bottom-line {
  background: #ef3f91;
}

@media (max-width: 900px) {
  body[data-service] .reference-applications-reference .reference-applications-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-applications-reference {
    padding: 58px 0 66px;
  }

  body[data-service] .reference-applications-reference .reference-service-kicker {
    gap: 10px;
    font-size: 0.68rem;
  }

  body[data-service] .reference-applications-reference .reference-service-kicker::before,
  body[data-service] .reference-applications-reference .reference-service-kicker::after {
    width: 30px;
  }

  body[data-service] .reference-applications-reference h2 {
    font-size: 2rem;
  }

  body[data-service] .reference-applications-reference .reference-section-intro {
    font-size: 0.86rem;
  }

  body[data-service] .reference-applications-reference .reference-applications-grid {
    grid-template-columns: 1fr;
    margin-top: 29px;
  }
}

/* Reference-style five-step process cards shared by every service detail page. */
body[data-service] .reference-process-reference {
  position: relative;
  overflow: hidden;
  padding: 78px 0 84px;
  background:
    radial-gradient(circle at 4% 12%, rgba(52, 156, 255, 0.16), transparent 26%),
    radial-gradient(circle at 97% 92%, rgba(53, 157, 255, 0.14), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

body[data-service] .reference-process-reference-inner {
  text-align: center;
}

body[data-service] .reference-process-reference .reference-service-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 17px;
  font-size: 0.78rem;
  letter-spacing: 2.3px;
}

body[data-service] .reference-process-reference .reference-service-kicker::before,
body[data-service] .reference-process-reference .reference-service-kicker::after {
  content: '';
  width: 53px;
  height: 2px;
  background: #167dec;
}

body[data-service] .reference-process-reference h2 {
  margin: 16px 0 10px;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -1.5px;
}

body[data-service] .reference-process-reference h2 span {
  color: #147be4;
}

body[data-service] .reference-process-reference .reference-section-intro {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.5;
}

body[data-service] .reference-process-reference .reference-process-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 56px;
  margin-top: 36px;
}

body[data-service] .reference-process-card {
  position: relative;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  align-items: center;
  padding: 42px 24px 22px;
  border: 1px solid #cfe4f6;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 30px rgba(30, 100, 153, 0.08);
}

body[data-service] .reference-process-card.tone-green {
  border-color: #c7efdf;
}

body[data-service] .reference-process-card.tone-purple {
  border-color: #dfd3ff;
}

body[data-service] .reference-process-card.tone-orange {
  border-color: #ffdcb8;
}

body[data-service] .reference-process-number {
  position: absolute;
  top: -14px;
  left: 14px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #087be8;
  box-shadow: 0 8px 15px rgba(8, 123, 232, 0.24);
  font-size: 1.08rem;
  font-weight: 850;
}

body[data-service] .reference-process-card.tone-green .reference-process-number {
  background: #05b779;
  box-shadow: 0 8px 15px rgba(5, 183, 121, 0.22);
}

body[data-service] .reference-process-card.tone-purple .reference-process-number {
  background: #7438ed;
  box-shadow: 0 8px 15px rgba(116, 56, 237, 0.22);
}

body[data-service] .reference-process-card.tone-orange .reference-process-number {
  background: #ff7b00;
  box-shadow: 0 8px 15px rgba(255, 123, 0, 0.22);
}

body[data-service] .reference-process-icon {
  display: grid;
  width: 78px;
  height: 78px;
  margin: 0 0 17px;
  place-items: center;
  border-radius: 50%;
  color: #087be8;
  background: #e6f3ff;
  font-size: 2rem;
}

body[data-service] .reference-process-card.tone-green .reference-process-icon {
  color: #05b779;
  background: #e4fbf3;
}

body[data-service] .reference-process-card.tone-purple .reference-process-icon {
  color: #7438ed;
  background: #f0e9ff;
}

body[data-service] .reference-process-card.tone-orange .reference-process-icon {
  color: #ff7b00;
  background: #fff0df;
}

body[data-service] .reference-process-card h3 {
  max-width: 215px;
  margin: 0 0 13px;
  color: #071d3e;
  font-size: 1.03rem;
  font-weight: 850;
  line-height: 1.18;
}

body[data-service] .reference-process-card p {
  max-width: 215px;
  margin: 0;
  color: #687892;
  font-size: 0.86rem;
  line-height: 1.45;
}

body[data-service] .reference-process-bottom-line {
  width: 58px;
  height: 3px;
  margin-top: auto;
  border-radius: 999px;
  background: #087be8;
}

body[data-service] .reference-process-card.tone-green .reference-process-bottom-line {
  background: #05b779;
}

body[data-service] .reference-process-card.tone-purple .reference-process-bottom-line {
  background: #7438ed;
}

body[data-service] .reference-process-card.tone-orange .reference-process-bottom-line {
  background: #ff7b00;
}

body[data-service] .reference-process-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -46px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #087be8;
  background: #e8f4ff;
  box-shadow: 0 6px 14px rgba(20, 123, 228, 0.12);
  font-size: 0.95rem;
  transform: translateY(-50%);
}

@media (max-width: 1100px) {
  body[data-service] .reference-process-reference .reference-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  body[data-service] .reference-process-arrow {
    display: none;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-process-reference {
    padding: 58px 0 64px;
  }

  body[data-service] .reference-process-reference .reference-service-kicker {
    gap: 10px;
    font-size: 0.68rem;
  }

  body[data-service] .reference-process-reference .reference-service-kicker::before,
  body[data-service] .reference-process-reference .reference-service-kicker::after {
    width: 30px;
  }

  body[data-service] .reference-process-reference h2 {
    font-size: 2rem;
  }

  body[data-service] .reference-process-reference .reference-section-intro {
    font-size: 0.86rem;
  }

  body[data-service] .reference-process-reference .reference-process-grid {
    grid-template-columns: 1fr;
    margin-top: 29px;
  }
}

/* Final visual polish for the Applications cards after the legacy service rules. */
body[data-service] .reference-applications-reference .reference-applications-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 28px;
  margin-top: 38px;
}

body[data-service] .reference-applications-reference .reference-application-card {
  min-height: 264px;
  padding: 24px 40px 24px !important;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(249, 252, 255, 0.96)) !important;
  box-shadow: 0 13px 27px rgba(28, 92, 137, 0.1) !important;
}

body[data-service] .reference-applications-reference .reference-application-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 19px;
  font-size: 2.45rem !important;
}

body[data-service] .reference-applications-reference .reference-application-icon i {
  display: block;
  color: currentColor;
  font-size: 2.45rem;
  line-height: 1;
}

body[data-service] .reference-applications-reference .reference-application-number {
  top: 22px;
  right: 26px;
  font-size: 1.75rem !important;
  line-height: 1;
}

body[data-service] .reference-applications-reference .reference-application-card h3 {
  max-width: 390px;
  margin: 0 0 8px !important;
  color: #092347 !important;
  font-size: 1.12rem !important;
  font-weight: 850;
  line-height: 1.22;
}

body[data-service] .reference-applications-reference .reference-application-card p {
  max-width: 410px;
  margin: 0 !important;
  color: #5d718c !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

body[data-service] .reference-applications-reference .reference-application-bottom-line {
  width: 62px;
  height: 4px;
  margin-top: auto;
}

@media (max-width: 900px) {
  body[data-service] .reference-applications-reference .reference-applications-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-applications-reference .reference-applications-grid {
    grid-template-columns: 1fr;
  }

  body[data-service] .reference-applications-reference .reference-application-card {
    min-height: 250px;
    padding: 22px 28px 22px !important;
  }
}

/* Final spacing polish for the process cards. */
body[data-service] .reference-process-reference {
  padding: 68px 0 72px;
  background:
    radial-gradient(circle at 8% 16%, rgba(79, 160, 255, 0.18), transparent 24%),
    radial-gradient(circle at 92% 20%, rgba(255, 222, 137, 0.2), transparent 25%),
    linear-gradient(135deg, #f4f9ff 0%, #ffffff 48%, #fff9e9 100%);
}

body[data-service] .reference-process-reference .reference-process-grid {
  gap: 42px;
  margin-top: 70px;
}

body[data-service] .reference-process-card {
  min-height: 248px;
  padding: 77px 21px 20px;
  border-radius: 20px;
  box-shadow: 0 12px 25px rgba(30, 100, 153, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

body[data-service] .reference-process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 32px rgba(30, 100, 153, 0.13);
}

body[data-service] .reference-process-number {
  display: none;
}

body[data-service] .reference-process-number {
  top: 43px;
  left: calc(50% - 46px);
  width: 29px;
  height: 29px;
  border: 3px solid #fff;
  font-size: 0.68rem;
  z-index: 3;
}

body[data-service] .reference-process-icon {
  position: absolute;
  top: -45px;
  left: 50%;
  width: 92px;
  height: 92px;
  margin: 0;
  border: 1px solid rgba(110, 178, 244, 0.48);
  font-size: 2.1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transform: translateX(-50%);
}

body[data-service] .reference-process-card h3 {
  max-width: 230px;
  margin-top: 9px;
  margin-bottom: 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.02rem;
  line-height: 1.22;
}

body[data-service] .reference-process-card p {
  max-width: 225px;
  color: #5f7590;
  font-size: 0.78rem;
  line-height: 1.48;
}

body[data-service] .reference-process-bottom-line {
  width: 54px;
  height: 3px;
  margin-top: auto;
}

body[data-service] .reference-process-arrow {
  top: -27px;
  right: -39px;
  width: 25px;
  height: 25px;
  border: 1px dashed #8d74ff;
  color: #7438ed;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  transform: none;
}

body[data-service="cleaning-recharge-well"] .reference-process-reference h2 {
  width: min(850px, 100%);
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 520px) {
  body[data-service] .reference-process-reference {
    padding: 54px 0 60px;
  }

  body[data-service] .reference-process-reference .reference-process-grid {
    margin-top: 52px;
  }

  body[data-service] .reference-process-card {
    min-height: 245px;
  }

  body[data-service] .reference-process-icon {
    top: -42px;
    width: 84px;
    height: 84px;
  }

  body[data-service] .reference-process-number {
    top: 39px;
  }
}

/* Latest supplied overview composition: large visual on the left and overview cards on the right. */
body[data-service] .reference-service-overview-combined {
  padding: clamp(74px, 6.5vw, 96px) 0 clamp(82px, 6.8vw, 104px);
  background:
    radial-gradient(circle at 4% 16%, rgba(33, 140, 232, 0.16), transparent 23%),
    radial-gradient(circle at 92% 88%, rgba(82, 186, 244, 0.15), transparent 27%),
    #f9fcff;
}

body[data-service] .reference-service-overview-combined .reference-overview-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(42px, 5vw, 78px);
}

body[data-service] .reference-service-overview-combined .reference-overview-visual {
  order: 1;
  min-width: 0;
}

body[data-service] .reference-service-overview-combined .reference-overview-copy {
  order: 2;
  min-width: 0;
}

body[data-service] .reference-service-overview-combined .reference-overview-visual::before {
  inset: -18px 16px 18px -18px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(47, 145, 235, 0.42), rgba(128, 214, 255, 0.08));
}

body[data-service] .reference-service-overview-combined .reference-overview-visual img {
  height: clamp(410px, 29vw, 560px);
  aspect-ratio: auto;
  border-radius: 20px;
  box-shadow: 0 24px 42px rgba(24, 84, 127, 0.21);
}

body[data-service] .reference-service-overview-combined .reference-overview-copy h2 {
  max-width: 700px;
  margin: 17px 0 20px;
  font-size: clamp(2.05rem, 2.9vw, 3.15rem);
}

body[data-service] .reference-service-overview-combined .reference-overview-copy h2 span {
  color: #126fe8;
}

@media (max-width: 900px) {
  body[data-service] .reference-service-overview-combined {
    padding: 64px 0 76px;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-service-overview-combined {
    padding: 52px 0 62px;
  }
}

body[data-service] .reference-overview-description {
  max-width: 700px;
}

body[data-service] .reference-overview-description p {
  margin: 0 0 14px;
  color: #536a85;
  font-size: 0.86rem;
  line-height: 1.65;
}

body[data-service] .reference-overview-description p:first-child {
  padding: 14px 17px;
  border-left: 4px solid #1484ed;
  border-radius: 0 13px 13px 0;
  color: #314d70;
  background: linear-gradient(100deg, #f0f8ff, rgba(240, 248, 255, 0.2));
}

body[data-service] .reference-overview-description p:last-child {
  margin-bottom: 0;
  padding-left: 3px;
  color: #61758d;
}

body[data-service] .reference-overview-benefits-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 25px 0 11px;
}

body[data-service] .reference-overview-benefits-heading span {
  color: #087be6;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1.3px;
}

body[data-service] .reference-overview-benefits-heading span::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  margin: 0 8px 3px 0;
  border-radius: 99px;
  background: #087be6;
}

body[data-service] .reference-overview-benefits-heading small {
  color: #5c718b;
  font-size: 0.75rem;
}

body[data-service] .reference-overview-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 0;
  counter-reset: overview-benefit;
}

body[data-service] .reference-overview-benefits article {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 120px;
  padding: 17px 20px 16px 17px;
  border: 1px solid #cfe3f3;
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fcff 100%);
  box-shadow: 0 8px 18px rgba(31, 99, 143, 0.07);
  counter-increment: overview-benefit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body[data-service] .reference-overview-benefits article::before {
  content: '';
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: -1px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #1689ef, #55d3ed);
}

body[data-service] .reference-overview-benefits article::after {
  content: counter(overview-benefit, decimal-leading-zero);
  position: absolute;
  top: 10px;
  right: 13px;
  color: #c5d9eb;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

body[data-service] .reference-overview-benefits article:hover {
  border-color: #aad7f6;
  box-shadow: 0 14px 26px rgba(31, 99, 143, 0.13);
  transform: translateY(-2px);
}

body[data-service] .reference-overview-benefit-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 50%;
  font-size: 1rem;
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.34);
}

body[data-service] .reference-overview-benefit-icon.tone-blue {
  color: #0879ed;
  background: #e7f2ff;
}

body[data-service] .reference-overview-benefit-icon.tone-green {
  color: #0da779;
  background: #e3f8f1;
}

body[data-service] .reference-overview-benefit-icon.tone-orange {
  color: #e7891d;
  background: #fff0df;
}

body[data-service] .reference-overview-benefit-icon.tone-purple {
  color: #7650d8;
  background: #f0eaff;
}

body[data-service] .reference-overview-benefits article b,
body[data-service] .reference-overview-benefits article small {
  display: block;
}

body[data-service] .reference-overview-benefits article b {
  padding-right: 17px;
  color: #08294f;
  font-size: 0.91rem;
  font-weight: 850;
  line-height: 1.32;
}

body[data-service] .reference-overview-benefits article small {
  margin-top: 7px;
  color: #405b78;
  font-size: 0.78rem;
  line-height: 1.5;
}

body[data-service] .reference-overview-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(10, 54, 91, 0.22);
}

body[data-service] .reference-overview-float-top {
  top: 25px;
  left: 25px;
  padding: 17px 22px;
  color: #112b50;
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.85rem;
  line-height: 1.35;
}

body[data-service] .reference-overview-float-top i {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 50%;
  color: #087df1;
  background: #eef6ff;
  font-size: 1.1rem;
}

body[data-service] .reference-overview-float-top::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 101px;
  width: 34px;
  height: 3px;
  border-radius: 99px;
  background: #147cea;
}

body[data-service] .reference-overview-float-bottom {
  right: 27px;
  bottom: 23px;
  max-width: 390px;
  padding: 16px 18px;
  color: #fff;
  background: rgba(4, 36, 69, 0.94);
}

body[data-service] .reference-overview-float-bottom>i:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(40, 204, 239, 0.65);
  border-radius: 50%;
  color: #36d9ef;
}

body[data-service] .reference-overview-float-bottom span {
  min-width: 0;
}

body[data-service] .reference-overview-float-bottom b,
body[data-service] .reference-overview-float-bottom small {
  display: block;
}

body[data-service] .reference-overview-float-bottom b {
  font-size: 0.78rem;
}

body[data-service] .reference-overview-float-bottom small {
  margin-top: 4px;
  color: #b9d3e4;
  font-size: 0.64rem;
  line-height: 1.35;
}

body[data-service] .reference-overview-float-bottom>i:last-child {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #fff;
  font-size: 0.65rem;
}

@media (max-width: 1050px) {
  body[data-service] .reference-service-overview-combined .reference-overview-grid {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: 34px;
  }

  body[data-service] .reference-overview-float-bottom {
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

@media (max-width: 760px) {
  body[data-service] .reference-service-overview-combined .reference-overview-grid {
    grid-template-columns: 1fr;
  }

  body[data-service] .reference-service-overview-combined .reference-overview-visual {
    order: 1;
  }

  body[data-service] .reference-service-overview-combined .reference-overview-copy {
    order: 2;
  }

  body[data-service] .reference-service-overview-combined .reference-overview-visual img {
    height: min(500px, 72vw);
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-service-overview-combined {
    padding: 52px 0 60px;
  }

  body[data-service] .reference-service-overview-combined .reference-overview-copy h2 {
    font-size: 2rem;
  }

  body[data-service] .reference-service-overview-combined .reference-overview-visual img {
    height: 330px;
  }

  body[data-service] .reference-overview-benefits {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }

  body[data-service] .reference-overview-benefits-heading {
    align-items: baseline;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 22px;
    margin-bottom: 0;
  }

  body[data-service] .reference-overview-benefits-heading span {
    flex: 0 0 auto;
    font-size: 0.7rem;
    letter-spacing: 1.15px;
  }

  body[data-service] .reference-overview-benefits-heading span::before {
    width: 17px;
    margin-right: 6px;
  }

  body[data-service] .reference-overview-benefits-heading small {
    min-width: 0;
    font-size: 0.64rem;
    line-height: 1.25;
  }

  body[data-service] .reference-overview-benefits article {
    align-items: center;
    min-height: 0;
    padding: 14px 14px 14px 15px;
    border-radius: 16px;
    gap: 12px;
  }

  body[data-service] .reference-overview-benefits article::before {
    top: 13px;
    bottom: 13px;
    width: 3px;
  }

  body[data-service] .reference-overview-benefit-icon {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    font-size: 0.92rem;
  }

  body[data-service] .reference-overview-benefits article b {
    padding-right: 20px;
    font-size: 0.86rem;
    line-height: 1.25;
  }

  body[data-service] .reference-overview-benefits article small {
    margin-top: 5px;
    font-size: 0.7rem;
    line-height: 1.42;
  }

  body[data-service] .reference-overview-benefits article::after {
    top: 10px;
    right: 12px;
    font-size: 0.56rem;
  }

  body[data-service] .reference-overview-float-top {
    top: 15px;
    left: 15px;
    padding: 12px 14px;
    font-size: 0.7rem;
  }

  body[data-service] .reference-overview-float-top i {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  body[data-service] .reference-overview-float-top::after {
    left: 83px;
    bottom: 9px;
    width: 25px;
  }

  body[data-service] .reference-overview-float-bottom {
    right: 12px;
    bottom: 12px;
    gap: 8px;
    padding: 11px 12px;
  }

  body[data-service] .reference-overview-float-bottom>i:first-child {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  body[data-service] .reference-overview-float-bottom b {
    font-size: 0.67rem;
  }

  body[data-service] .reference-overview-float-bottom small {
    font-size: 0.56rem;
  }
}

/* Keep the shared overview background and rhythm above legacy page-specific rules. */
body[data-service] .premium-overview-section {
  padding: 62px 0 70px;
  background:
    radial-gradient(circle at 94% 42%, rgba(112, 201, 255, 0.18), transparent 31%),
    linear-gradient(180deg, #f4fbff 0%, #ffffff 100%);
}

body[data-service] .premium-overview-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #061d33 0%, #0a78be 48%, #1dd6a2 100%);
}

@media (max-width: 560px) {
  body[data-service] .premium-overview-section {
    padding: 52px 0 58px;
  }
}

/* Full service-detail format from the supplied reference page. */
body[data-service] .reference-service-container {
  max-width: 1720px;
}

body[data-service] .reference-service-hero {
  position: relative;
  min-height: 0;
  overflow: hidden;
  color: #fff;
  background-color: #031f3d;
  background-image: var(--reference-hero-image);
  background-position: center 35%;
  background-size: cover;
}

body[data-service] .reference-service-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7, 25, 48, 0.86) 0%, rgba(13, 59, 102, 0.78) 50%, rgba(37, 99, 235, 0.82) 100%), radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.35) 0%, transparent 60%);
}

body[data-service] .reference-service-hero-inner {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding-top: 95px;
  padding-bottom: 115px;
}

body[data-service] .reference-service-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 20px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 25, 47, 0.55);
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-size: 0.76rem;
  font-weight: 700;
}

body[data-service] .reference-service-breadcrumb a {
  color: #fff;
}

body[data-service] .reference-service-breadcrumb i {
  color: #42d5f4;
  font-size: 0.55rem;
}

body[data-service] .reference-service-hero-copy {
  max-width: 950px;
  padding-top: 0;
}

body[data-service] .reference-service-kicker {
  display: inline-flex;
  align-items: center;
  color: #19d0ec;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 1.35px;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-service] .reference-service-kicker-blue {
  color: #087fe7;
}

body[data-service] .reference-service-hero-copy h1 {
  margin: 16px 0 14px;
  color: #fff;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
}

body[data-service] .reference-service-hero-copy h1 span {
  color: #0cc5f2;
}

body[data-service] .reference-service-hero-copy>p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.93rem;
  line-height: 1.6;
}

body[data-service] .reference-service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 22px;
}

body[data-service] .reference-service-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-service] .reference-service-btn:hover {
  transform: translateY(-2px);
}

body[data-service] .reference-service-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #0788f4, #0b65e8);
  box-shadow: 0 10px 24px rgba(0, 104, 227, 0.3);
}

body[data-service] .reference-service-btn-outline {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(4, 36, 68, 0.3);
}

body[data-service] .reference-service-hero-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 900px;
  gap: 0;
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.68);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28), 0 0 25px rgba(56, 189, 248, 0.15);
  margin-top: 35px;
}

body[data-service] .reference-service-hero-features span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.25;
  text-align: left;
}

body[data-service] .reference-service-hero-features span:last-child {
  border-right: none;
}

body[data-service] .reference-service-hero-features i {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.45);
}

body[data-service] .reference-service-overview {
  position: relative;
  overflow: hidden;
  padding: 44px 0 56px;
  background: linear-gradient(180deg, #fff 0%, #f7fcff 100%);
}

body[data-service] .reference-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.96fr);
  align-items: center;
  gap: clamp(42px, 6vw, 88px);
}

body[data-service] .reference-overview-copy h2 {
  max-width: 620px;
  margin: 12px 0 22px;
  color: #07284e;
  font-size: clamp(2rem, 3.2vw, 3.05rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -1.35px;
}

body[data-service] .reference-overview-callout {
  max-width: 620px;
  padding-left: 18px;
  border-left: 3px solid #1687f0;
}

body[data-service] .reference-overview-callout p,
body[data-service] .reference-overview-secondary {
  margin: 0;
  color: #243d5d;
  font-size: 0.88rem;
  line-height: 1.72;
}

body[data-service] .reference-overview-secondary {
  max-width: 620px;
  margin-top: 22px;
  color: #516a84;
}

body[data-service] .reference-overview-visual {
  position: relative;
}

body[data-service] .reference-overview-visual::before {
  content: '';
  position: absolute;
  inset: 12px -10px -12px 12px;
  border-radius: 20px;
  background: #d8efff;
  filter: blur(2px);
}

body[data-service] .reference-overview-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1.47 / 1;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 16px;
  box-shadow: 0 20px 34px rgba(18, 78, 124, 0.2);
}

body[data-service] .reference-service-section {
  padding: 58px 0;
}

body[data-service] .reference-service-section h2 {
  margin: 10px 0 8px;
  color: #082950;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -1.15px;
}

body[data-service] .reference-service-section h2 span {
  color: #147be4;
}

body[data-service] .reference-section-intro {
  max-width: 680px;
  margin: 0 0 24px;
  color: #60758d;
  font-size: 0.82rem;
  line-height: 1.6;
}

body[data-service] .reference-benefits-section {
  background: #f1f9ff url('assect/faq-backround.png') center / cover;
}

body[data-service] .reference-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-service] .reference-benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 148px;
  padding: 18px 17px;
  border: 1px solid #dcebf6;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 9px 20px rgba(28, 89, 132, 0.08);
}

body[data-service] .reference-benefit-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 0.9rem;
}

body[data-service] .reference-benefit-icon.tone-blue {
  background: #168ee8;
}

body[data-service] .reference-benefit-icon.tone-green {
  background: #10b889;
}

body[data-service] .reference-benefit-icon.tone-purple {
  background: #7251eb;
}

body[data-service] .reference-benefit-icon.tone-orange {
  background: #ff971d;
}

body[data-service] .reference-benefit-icon.tone-cyan {
  background: #137bdc;
}

body[data-service] .reference-benefit-icon.tone-pink {
  background: #e857b2;
}

body[data-service] .reference-benefit-card h3 {
  margin: 1px 0 7px;
  color: #102f55;
  font-size: 0.85rem;
  line-height: 1.25;
}

body[data-service] .reference-benefit-card p {
  margin: 0;
  color: #5c728b;
  font-size: 0.72rem;
  line-height: 1.45;
}

body[data-service] .reference-process-section {
  background: linear-gradient(180deg, #f1fbff 0%, #eaf7fd 100%);
}

body[data-service] .reference-process-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 26px;
}

body[data-service] .reference-process-step {
  position: relative;
}

body[data-service] .reference-process-step:not(:last-child)::after {
  content: '\2192';
  position: absolute;
  top: 38px;
  right: -21px;
  color: #0969c8;
  font-size: 1.5rem;
  font-weight: 900;
}

body[data-service] .reference-process-image {
  position: relative;
  width: 92px;
  height: 92px;
  margin-bottom: 13px;
}

body[data-service] .reference-process-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(32, 102, 144, 0.2);
}

body[data-service] .reference-process-image b {
  position: absolute;
  top: -5px;
  left: -4px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0878df;
  font-size: 0.72rem;
}

body[data-service] .reference-process-step:nth-child(5) .reference-process-image b {
  background: #ff941b;
}

body[data-service] .reference-process-step h3 {
  max-width: 150px;
  margin: 0 0 6px;
  color: #10335a;
  font-size: 0.8rem;
  line-height: 1.25;
}

body[data-service] .reference-process-step p {
  max-width: 170px;
  margin: 0;
  color: #61778c;
  font-size: 0.68rem;
  line-height: 1.45;
}

body[data-service] .reference-technical-section {
  background: linear-gradient(100deg, #fff 0%, #f7fcff 52%, #e9f7ff 100%);
}

body[data-service] .reference-technical-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(440px, 1.12fr);
  align-items: center;
  gap: 40px;
}

body[data-service] .reference-technical-copy>p {
  max-width: 610px;
  margin: 0 0 20px;
  color: #5c7187;
  font-size: 0.8rem;
  line-height: 1.55;
}

body[data-service] .reference-technical-list {
  display: grid;
  gap: 8px;
}

body[data-service] .reference-technical-list>div {
  display: grid;
  grid-template-columns: 25px minmax(130px, 0.5fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: #173a60;
  font-size: 0.73rem;
}

body[data-service] .reference-technical-list i {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 6px;
  color: #087fdf;
  background: #dff3ff;
}

body[data-service] .reference-technical-list em {
  color: #087fdf;
  font-style: normal;
}

body[data-service] .reference-technical-list small {
  overflow: hidden;
  color: #70849b;
  font-size: 0.69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-service] .reference-technical-visual {
  position: relative;
  min-height: 355px;
}

body[data-service] .reference-technical-visual>img {
  display: block;
  width: calc(100% - 135px);
  height: 355px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 16px 30px rgba(33, 92, 126, 0.16);
}

body[data-service] .reference-technical-stats {
  position: absolute;
  top: 18px;
  right: 0;
  display: grid;
  width: 164px;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 10px;
  background: linear-gradient(160deg, #082f58, #061b35);
  box-shadow: 0 15px 28px rgba(4, 35, 65, 0.25);
}

body[data-service] .reference-technical-stats span {
  display: grid;
  grid-template-columns: 25px 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 7px 3px;
  color: #fff;
}

body[data-service] .reference-technical-stats i {
  grid-row: span 2;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(39, 214, 239, 0.5);
  border-radius: 6px;
  color: #32d8ed;
  font-size: 0.65rem;
}

body[data-service] .reference-technical-stats b {
  font-size: 0.7rem;
}

body[data-service] .reference-technical-stats small {
  color: #9db9d3;
  font-size: 0.57rem;
}

body[data-service] .reference-applications-section {
  background: #f4fbff;
}

body[data-service] .reference-applications-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px;
  margin-top: 23px;
}

body[data-service] .reference-applications-grid article {
  overflow: hidden;
  border: 1px solid #d9eaf5;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 9px 18px rgba(26, 90, 132, 0.08);
}

body[data-service] .reference-applications-grid img {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
}

body[data-service] .reference-applications-grid article>div {
  padding: 12px;
}

body[data-service] .reference-applications-grid h3 {
  margin: 0 0 5px;
  color: #12385f;
  font-size: 0.72rem;
  line-height: 1.25;
}

body[data-service] .reference-applications-grid p {
  margin: 0;
  color: #71849a;
  font-size: 0.62rem;
  line-height: 1.35;
}

body[data-service] .reference-faq-section {
  background: #f8fcff;
}

body[data-service] .reference-faq-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 18px;
}

body[data-service] .reference-faq-heading h2 {
  margin: 0;
}

body[data-service] .reference-faq-heading a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 17px;
  border-radius: 99px;
  color: #fff;
  background: #087bea;
  font-size: 0.7rem;
  font-weight: 800;
}

body[data-service] .reference-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}

body[data-service] .reference-faq-list details {
  overflow: hidden;
  border: 1px solid #dfedf7;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 5px 12px rgba(32, 92, 130, 0.06);
}

body[data-service] .reference-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  color: #183a5e;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 750;
  list-style: none;
}

body[data-service] .reference-faq-list summary::-webkit-details-marker {
  display: none;
}

body[data-service] .reference-faq-list summary i {
  color: #0d78df;
}

body[data-service] .reference-faq-list details p {
  margin: 0;
  padding: 0 13px 13px;
  color: #61768e;
  font-size: 0.69rem;
  line-height: 1.5;
}

body[data-service] .reference-service-cta {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, rgba(3, 38, 73, 0.98), rgba(7, 111, 155, 0.9)), url('assect/gpr-hero-engineer.jpg') right center / cover;
}

body[data-service] .reference-service-cta .reference-service-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 33px;
  padding-bottom: 33px;
}

body[data-service] .reference-service-cta h2 {
  margin: 8px 0 4px;
  color: #fff;
  font-size: clamp(1.65rem, 2.7vw, 2.45rem);
}

body[data-service] .reference-service-cta p {
  margin: 0;
  color: #cbe9f5;
  font-size: 0.78rem;
}

@media (max-width: 1050px) {

  body[data-service] .reference-overview-grid,
  body[data-service] .reference-technical-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
    gap: 34px;
  }

  body[data-service] .reference-process-grid,
  body[data-service] .reference-applications-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 30px;
  }

  body[data-service] .reference-process-step:nth-child(3)::after,
  body[data-service] .reference-process-step:nth-child(5)::after {
    display: none;
  }
}

@media (max-width: 760px) {

  body[data-service] .reference-service-hero,
  body[data-service] .reference-service-hero-inner {
    min-height: 0;
  }

  body[data-service] .reference-service-hero-inner {
    padding-top: 22px;
    padding-bottom: 35px;
  }

  body[data-service] .reference-service-hero-copy {
    padding-top: 45px;
  }

  body[data-service] .reference-service-hero-copy h1 {
    font-size: clamp(2.45rem, 10vw, 3.6rem);
  }

  body[data-service] .reference-service-hero-features {
    gap: 8px;
  }

  body[data-service] .reference-overview-grid,
  body[data-service] .reference-technical-grid {
    grid-template-columns: 1fr;
  }

  body[data-service] .reference-overview-visual {
    max-width: 720px;
  }

  body[data-service] .reference-benefits-grid,
  body[data-service] .reference-faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-service] .reference-technical-visual {
    min-height: 310px;
  }

  body[data-service] .reference-technical-visual>img {
    width: calc(100% - 112px);
    height: 310px;
  }

  body[data-service] .reference-technical-stats {
    width: 138px;
  }

  body[data-service] .reference-service-cta .reference-service-container {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-service-hero-copy h1 {
    font-size: 2.35rem;
    letter-spacing: -1px;
  }

  body[data-service] .reference-service-actions,
  body[data-service] .reference-service-btn {
    width: 100%;
  }

  body[data-service] .reference-service-actions {
    flex-direction: column;
  }

  body[data-service] .reference-service-hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 320px;
    margin-top: 28px;
  }

  body[data-service] .reference-overview-grid {
    gap: 26px;
  }

  body[data-service] .reference-service-section {
    padding: 46px 0;
  }

  body[data-service] .reference-benefits-grid,
  body[data-service] .reference-process-grid,
  body[data-service] .reference-applications-grid,
  body[data-service] .reference-faq-list {
    grid-template-columns: 1fr;
  }

  body[data-service] .reference-process-step:not(:last-child)::after {
    display: none;
  }

  body[data-service] .reference-process-step p {
    max-width: 250px;
  }

  body[data-service] .reference-technical-list>div {
    grid-template-columns: 25px minmax(0, 1fr);
  }

  body[data-service] .reference-technical-list em {
    display: none;
  }

  body[data-service] .reference-technical-list small {
    grid-column: 2;
    white-space: normal;
  }

  body[data-service] .reference-technical-visual>img {
    width: calc(100% - 76px);
    height: 260px;
  }

  body[data-service] .reference-technical-stats {
    width: 105px;
    padding: 8px 7px;
  }

  body[data-service] .reference-technical-stats b {
    font-size: 0.58rem;
  }

  body[data-service] .reference-technical-stats small {
    font-size: 0.48rem;
  }

  body[data-service] .reference-faq-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Refined technical capabilities layout shared by every service detail page. */
body[data-service] .reference-technical-section {
  position: relative;
  overflow: hidden;
  padding: 74px 0 84px;
  background:
    radial-gradient(circle at 7% 18%, rgba(41, 157, 235, 0.11), transparent 26%),
    radial-gradient(circle at 93% 80%, rgba(72, 186, 239, 0.14), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f7fcff 58%, #edf8ff 100%);
}

body[data-service] .reference-technical-section::after {
  content: '';
  position: absolute;
  right: -130px;
  bottom: -190px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(28, 139, 225, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(28, 139, 225, 0.035), 0 0 0 48px rgba(28, 139, 225, 0.025);
  pointer-events: none;
}

body[data-service] .reference-technical-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 0.96fr) minmax(500px, 1.04fr);
  gap: clamp(42px, 5vw, 76px);
}

body[data-service] .reference-technical-copy {
  min-width: 0;
}

body[data-service] .reference-technical-copy h2 {
  max-width: 650px;
  margin: 12px 0 14px;
  font-size: clamp(2.25rem, 3.2vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -1.45px;
}

body[data-service] .reference-technical-copy>p {
  max-width: 635px;
  margin: 0 0 25px;
  color: #526d87;
  font-size: 0.94rem;
  line-height: 1.65;
}

body[data-service] .reference-technical-list {
  gap: 10px;
}

body[data-service] .reference-technical-list>div {
  grid-template-columns: 38px minmax(150px, 0.62fr) 10px minmax(0, 1fr);
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid #dcecf7;
  border-radius: 13px;
  color: #173a60;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 7px 18px rgba(31, 101, 142, 0.07);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-service] .reference-technical-list>div:hover {
  border-color: #9dd8f6;
  box-shadow: 0 11px 24px rgba(31, 101, 142, 0.11);
  transform: translateY(-2px);
}

body[data-service] .reference-technical-list i {
  width: 36px;
  height: 36px;
  border: 1px solid #b9e4fa;
  border-radius: 10px;
  color: #067fe0;
  background: linear-gradient(145deg, #e8f8ff, #d5efff);
  font-size: 0.76rem;
}

body[data-service] .reference-technical-list strong {
  color: #0c3158;
  font-size: 0.84rem;
  line-height: 1.3;
}

body[data-service] .reference-technical-list em {
  color: #1392e5;
  font-size: 1rem;
  font-weight: 900;
}

body[data-service] .reference-technical-list small {
  overflow: visible;
  color: #617993;
  font-size: 0.76rem;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}

body[data-service] .reference-technical-visual {
  min-height: 410px;
  padding-right: 116px;
}

body[data-service] .reference-technical-visual::before {
  content: '';
  position: absolute;
  inset: 18px 84px -12px 0;
  border-radius: 26px;
  background: linear-gradient(145deg, #bfe7ff, #e9f8ff);
  filter: blur(1px);
}

body[data-service] .reference-technical-visual>img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 410px;
  border: 3px solid #fff;
  border-radius: 22px;
  box-shadow: 0 20px 36px rgba(18, 78, 124, 0.2);
}

body[data-service] .reference-technical-stats {
  z-index: 2;
  top: 30px;
  right: 0;
  width: 214px;
  gap: 5px;
  padding: 15px 14px;
  border: 1px solid rgba(83, 195, 239, 0.32);
  border-radius: 16px;
  background: linear-gradient(160deg, #0d3d6b, #06213f);
  box-shadow: 0 18px 32px rgba(4, 35, 65, 0.26);
}

body[data-service] .reference-technical-stats span {
  min-height: 55px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(154, 211, 239, 0.15);
}

body[data-service] .reference-technical-stats span:last-child {
  border-bottom: 0;
}

body[data-service] .reference-technical-stats i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.7rem;
}

body[data-service] .reference-technical-stats b {
  font-size: 0.76rem;
  line-height: 1.25;
}

body[data-service] .reference-technical-stats small {
  color: #acd0e7;
  font-size: 0.61rem;
  line-height: 1.25;
}

@media (max-width: 1050px) {
  body[data-service] .reference-technical-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
    gap: 34px;
  }

  body[data-service] .reference-technical-visual {
    min-height: 360px;
    padding-right: 92px;
  }

  body[data-service] .reference-technical-visual>img {
    height: 360px;
  }

  body[data-service] .reference-technical-stats {
    width: 180px;
  }
}

@media (max-width: 760px) {
  body[data-service] .reference-technical-section {
    padding: 46px 0 58px;
  }

  body[data-service] .reference-technical-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  body[data-service] .reference-technical-copy h2 {
    margin: 12px 0 13px;
    font-size: clamp(1.85rem, 8.2vw, 2.35rem);
    line-height: 1.06;
    letter-spacing: -0.9px;
  }

  body[data-service] .reference-technical-copy>p {
    max-width: 350px;
    margin-bottom: 22px;
    font-size: 0.84rem;
    line-height: 1.5;
  }

  body[data-service] .reference-technical-visual {
    min-height: 320px;
    padding-right: 82px;
  }

  body[data-service] .reference-technical-visual>img {
    height: 320px;
  }

  body[data-service] .reference-technical-stats {
    width: 160px;
    padding: 11px 10px;
  }

  body[data-service] .reference-technical-stats b {
    font-size: 0.67rem;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-technical-list>div {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 9px 11px;
    padding: 11px 12px;
  }

  body[data-service] .reference-technical-list em {
    display: none;
  }

  body[data-service] .reference-technical-list small {
    grid-column: 2;
  }

  body[data-service] .reference-technical-visual {
    min-height: 270px;
    padding-right: 58px;
  }

  body[data-service] .reference-technical-visual>img {
    height: 270px;
    border-radius: 17px;
  }

  body[data-service] .reference-technical-stats {
    top: 18px;
    width: 122px;
    padding: 8px 7px;
  }

  body[data-service] .reference-technical-stats span {
    min-height: 44px;
    grid-template-columns: 22px 1fr;
    column-gap: 6px;
    padding: 5px 2px;
  }

  body[data-service] .reference-technical-stats i {
    width: 22px;
    height: 22px;
    font-size: 0.57rem;
  }

  body[data-service] .reference-technical-stats b {
    font-size: 0.58rem;
  }

  body[data-service] .reference-technical-stats small {
    font-size: 0.48rem;
  }
}

/* Compact floating stats card so the technical image remains visible. */
body[data-service] .reference-technical-stats {
  top: auto;
  right: 18px;
  bottom: 18px;
  width: min(334px, calc(100% - 12px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 10px;
  border: 1px solid rgba(89, 200, 240, 0.4);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(8, 55, 95, 0.94), rgba(3, 27, 54, 0.96));
  box-shadow: 0 18px 34px rgba(3, 30, 57, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body[data-service] .reference-technical-stats span {
  min-height: 61px;
  padding: 9px 10px;
}

body[data-service] .reference-technical-stats span:nth-child(odd) {
  border-right: 1px solid rgba(154, 211, 239, 0.16);
}

body[data-service] .reference-technical-stats span:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(154, 211, 239, 0.16);
}

body[data-service] .reference-technical-stats i {
  width: 27px;
  height: 27px;
  border-radius: 8px;
}

body[data-service] .reference-technical-stats b {
  font-size: 0.68rem;
  line-height: 1.2;
}

body[data-service] .reference-technical-stats small {
  font-size: 0.54rem;
  line-height: 1.2;
}

@media (max-width: 760px) {
  body[data-service] .reference-technical-stats {
    right: 10px;
    bottom: 12px;
    width: min(300px, calc(100% - 12px));
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-technical-visual {
    min-height: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  body[data-service] .reference-technical-visual::before {
    inset: 8px 0 70px;
    border-radius: 20px;
  }

  body[data-service] .reference-technical-visual>img {
    width: 100%;
    height: 232px;
    border-radius: 18px;
    object-fit: cover;
  }

  body[data-service] .reference-technical-stats {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    box-sizing: border-box;
    margin-top: -28px;
    padding: 7px;
    border-radius: 14px;
  }

  body[data-service] .reference-technical-stats span {
    min-height: 50px;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 7px;
    min-width: 0;
    padding: 7px 6px;
  }

  body[data-service] .reference-technical-stats span>b,
  body[data-service] .reference-technical-stats span>small {
    min-width: 0;
  }

  body[data-service] .reference-technical-stats i {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(55, 210, 246, 0.62);
    border-radius: 10px;
    color: #59e2ff;
    background: linear-gradient(145deg, rgba(14, 117, 164, 0.58), rgba(4, 54, 96, 0.9));
    box-shadow: 0 5px 12px rgba(0, 146, 210, 0.22), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
    font-size: 0.7rem;
  }

  body[data-service] .reference-technical-stats b {
    font-size: 0.62rem;
  }

  body[data-service] .reference-technical-stats small {
    font-size: 0.48rem;
  }
}

/* Premium capability cards for the shared technical section. */
body[data-service] .reference-technical-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  counter-reset: technical-card;
}

body[data-service] .reference-technical-list>div {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    'icon title'
    'icon description';
  align-items: start;
  min-height: 126px;
  padding: 17px 20px;
  border: 1px solid #d7eaf7;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 250, 255, 0.94));
  box-shadow: 0 10px 22px rgba(31, 101, 142, 0.075);
  counter-increment: technical-card;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-service] .reference-technical-list>div::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(180deg, #1b9cf0, #65d4f4);
}

body[data-service] .reference-technical-list>div::after {
  content: counter(technical-card, decimal-leading-zero);
  position: absolute;
  top: 13px;
  right: 17px;
  color: #9acbed;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.8px;
}

body[data-service] .reference-technical-list>div:hover {
  border-color: #8dcef0;
  box-shadow: 0 14px 27px rgba(31, 101, 142, 0.13);
  transform: translateY(-3px);
}

body[data-service] .reference-technical-list>div:nth-child(2)::before {
  background: linear-gradient(180deg, #00b88a, #7bdfc0);
}

body[data-service] .reference-technical-list>div:nth-child(3)::before {
  background: linear-gradient(180deg, #7650eb, #b399ff);
}

body[data-service] .reference-technical-list>div:nth-child(4)::before {
  background: linear-gradient(180deg, #ff941b, #ffc878);
}

body[data-service] .reference-technical-list>div:nth-child(5)::before {
  background: linear-gradient(180deg, #ec4c9f, #f6a3cb);
}

body[data-service] .reference-technical-list i {
  grid-area: icon;
  width: 38px;
  height: 38px;
  margin-top: 1px;
  border: 1px solid #b9e3fa;
  border-radius: 12px;
  color: #087fe2;
  background: linear-gradient(145deg, #eaf8ff, #d6efff);
  font-size: 0.76rem;
}

body[data-service] .reference-technical-list strong {
  grid-area: title;
  padding-right: 28px;
  color: #0b3158;
  font-size: 0.88rem;
  line-height: 1.28;
}

body[data-service] .reference-technical-list em {
  display: none;
}

body[data-service] .reference-technical-list small {
  grid-area: description;
  overflow: visible;
  margin-top: 7px;
  color: #617991;
  font-size: 0.74rem;
  line-height: 1.45;
  white-space: normal;
}

body[data-service] .reference-technical-list>div:nth-child(2) i {
  color: #00a878;
  border-color: #b4ead9;
  background: #e4f9f2;
}

body[data-service] .reference-technical-list>div:nth-child(3) i {
  color: #7045e5;
  border-color: #d6c8ff;
  background: #f0eaff;
}

body[data-service] .reference-technical-list>div:nth-child(4) i {
  color: #ed8214;
  border-color: #ffdcb0;
  background: #fff1df;
}

body[data-service] .reference-technical-list>div:nth-child(5) i {
  color: #dc3f8d;
  border-color: #f6c5dd;
  background: #ffeaf4;
}

@media (max-width: 700px) {
  body[data-service] .reference-technical-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-technical-copy {
    text-align: center;
  }

  body[data-service] .reference-technical-copy .reference-service-kicker {
    justify-content: center;
  }

  body[data-service] .reference-technical-copy h2 {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.85rem !important;
    line-height: 1.06 !important;
    letter-spacing: -0.75px !important;
    text-wrap: balance;
  }

  body[data-service] .reference-technical-copy>p {
    max-width: 350px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  body[data-service] .reference-technical-list {
    gap: 12px;
    text-align: left;
  }

  body[data-service] .reference-technical-list>div {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 3px 12px;
    min-height: 118px;
    padding: 15px 15px 15px 14px;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(31, 101, 142, 0.08);
  }

  body[data-service] .reference-technical-list>div::before {
    top: 16px;
    bottom: 16px;
    width: 3px;
  }

  body[data-service] .reference-technical-list>div::after {
    top: 12px;
    right: 14px;
    font-size: 0.64rem;
  }

  body[data-service] .reference-technical-list i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 0.73rem;
  }

  body[data-service] .reference-technical-list strong {
    padding-right: 24px;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.25;
  }

  body[data-service] .reference-technical-list small {
    margin-top: 1px;
    font-size: 0.7rem;
    line-height: 1.42;
  }
}

/* Reference-style FAQ layout shared by every service detail page. */
body[data-service] .reference-faq-reference {
  padding: 86px 0 94px;
  background:
    radial-gradient(circle at 4% 8%, rgba(84, 177, 255, 0.18), transparent 24%),
    radial-gradient(circle at 96% 92%, rgba(110, 191, 255, 0.18), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
}

/* Reference-style sustainable CTA banner shared by every service detail page. */
body[data-service] .reference-service-cta-reference {
  padding: 38px 0 52px;
  background: #ffffff;
}

body[data-service] .reference-service-cta-reference .reference-cta-shell {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 30px;
  background:
    linear-gradient(110deg, rgba(3, 24, 45, 0.95), rgba(5, 43, 72, 0.9)),
    url('assect/contact-river-dam.jpg') center / cover;
  box-shadow: 0 22px 38px rgba(5, 31, 53, 0.2);
}

body[data-service] .reference-cta-panel {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 195px;
  padding: 42px 52px;
  border: 1px solid rgba(53, 154, 214, 0.55);
  border-radius: 24px;
  background: rgba(7, 36, 61, 0.88);
}

body[data-service] .reference-cta-panel>div {
  min-width: 0;
  flex: 1 1 auto;
}

body[data-service] .reference-cta-panel .reference-service-kicker {
  color: #31c7fa;
  font-size: 0.74rem;
  letter-spacing: 2px;
}

body[data-service] .reference-cta-panel h2 {
  max-width: 1100px;
  margin: 17px 0 10px;
  color: #ffffff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.5px;
}

body[data-service] .reference-cta-panel p {
  margin: 0;
  color: #c4d3df;
  font-size: 0.9rem;
  line-height: 1.5;
}

body[data-service] .reference-cta-contact-btn {
  display: inline-flex;
  min-width: 168px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  flex: 0 0 auto;
  padding: 0 24px;
  border-radius: 999px;
  color: #071d3e;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.9rem;
  font-weight: 700;
}

body[data-service] .reference-cta-contact-btn:hover {
  color: #0b65e8;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  body[data-service] .reference-cta-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-service-cta-reference {
    padding: 28px 12px 42px;
  }

  body[data-service] .reference-service-cta-reference>.reference-service-container {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  body[data-service] .reference-service-cta-reference .reference-cta-shell {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 22px;
  }

  body[data-service] .reference-cta-panel {
    min-height: 0;
    padding: 31px 24px;
    border-radius: 17px;
  }

  body[data-service] .reference-cta-panel h2 {
    margin-top: 13px;
    font-size: 2rem;
  }

  body[data-service] .reference-cta-panel p {
    font-size: 0.82rem;
  }

  body[data-service] .reference-cta-contact-btn {
    width: 100%;
  }
}

body[data-service] .reference-faq-reference-heading {
  text-align: center;
}

body[data-service] .reference-faq-reference-heading .reference-service-kicker {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 0.78rem;
  letter-spacing: 2.3px;
}

body[data-service] .reference-faq-reference-heading .reference-service-kicker::before,
body[data-service] .reference-faq-reference-heading .reference-service-kicker::after {
  content: '';
  width: 56px;
  height: 2px;
  background: #167dec;
}

body[data-service] .reference-faq-reference-heading h2 {
  margin: 16px 0 10px;
  color: #071d3e;
  font-size: clamp(2.35rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -1.5px;
  text-wrap: balance;
}

body[data-service="gpr-survey"] .reference-faq-reference-heading h2 {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}

body[data-service] .reference-faq-reference-heading h2 span,
body[data-service] .reference-faq-contact-panel h3 span {
  color: #147be4;
}

body[data-service] .reference-faq-reference-heading>p {
  max-width: 920px;
  margin: 0 auto;
  color: #647792;
  font-size: 1rem;
  line-height: 1.55;
}

/* Keep the process description on one clean line on desktop. */
body[data-service] .reference-process-reference .reference-section-intro {
  width: max-content;
  max-width: none !important;
  white-space: nowrap;
  margin-bottom: 16px !important;
}

body[data-service] .reference-process-reference .reference-process-grid {
  margin-top: 82px !important;
}

@media (max-width: 900px) {
  body[data-service] .reference-process-reference .reference-section-intro {
    width: 100%;
    white-space: normal;
  }

  body[data-service] .reference-process-reference .reference-process-grid {
    margin-top: 64px !important;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-process-reference .reference-process-grid {
    margin-top: 58px !important;
  }
}

body[data-service] .reference-faq-reference-grid {
  display: grid;
  grid-template-columns: minmax(350px, 0.76fr) minmax(0, 1.24fr);
  gap: 34px;
  align-items: stretch;
  margin-top: 38px;
}

body[data-service] .reference-faq-contact-panel {
  position: relative;
  min-height: 610px;
  padding: 46px 52px 34px;
  overflow: hidden;
  border: 1px solid #d7ebf8;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(193, 229, 255, 0.55), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(180, 222, 255, 0.4), transparent 34%),
    #f8fcff;
  box-shadow: 0 14px 30px rgba(29, 100, 151, 0.06);
}

body[data-service] .reference-faq-panel-orb {
  position: absolute;
  border: 1px solid rgba(122, 190, 245, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

body[data-service] .reference-faq-panel-orb-top {
  top: -126px;
  right: -70px;
  width: 270px;
  height: 270px;
  background: rgba(221, 241, 255, 0.45);
}

body[data-service] .reference-faq-panel-orb-bottom {
  right: -125px;
  bottom: -160px;
  width: 390px;
  height: 390px;
  background: rgba(215, 239, 255, 0.32);
}

body[data-service] .reference-faq-contact-panel h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  color: #071d3e;
  font-size: clamp(2.65rem, 4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -1.5px;
}

body[data-service] .reference-faq-contact-panel h3 span {
  color: #147be4;
}

body[data-service] .reference-faq-contact-panel>p {
  position: relative;
  z-index: 1;
  max-width: 390px;
  margin: 0;
  color: #5d708c;
  font-size: 1.02rem;
  line-height: 1.55;
}

body[data-service] .reference-faq-contact-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 285px;
  min-height: 56px;
  margin-top: 25px;
  padding: 0 25px 0 29px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #1178ed, #1d8cf7);
  box-shadow: 0 12px 22px rgba(19, 123, 235, 0.2);
  font-size: 1rem;
  font-weight: 800;
}

body[data-service] .reference-faq-contact-items {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 19px;
  margin-top: 35px;
}

body[data-service] .reference-faq-contact-items a {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #102b52;
}

body[data-service] .reference-faq-contact-items a>i {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border-radius: 50%;
  color: #087bea;
  background: #e5f2ff;
  font-size: 1.55rem;
}

body[data-service] .reference-faq-contact-items span {
  display: grid;
  gap: 4px;
}

body[data-service] .reference-faq-contact-items b {
  font-size: 0.98rem;
}

body[data-service] .reference-faq-contact-items small {
  color: #687b95;
  font-size: 0.82rem;
}

body[data-service] .reference-faq-reference-list {
  display: grid;
  align-content: start;
  gap: 10px;
}

body[data-service] .reference-faq-reference-list details {
  overflow: hidden;
  border: 1px solid #d8eafa;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 7px 18px rgba(30, 104, 158, 0.06);
}

body[data-service] .reference-faq-reference-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 10px 22px;
  color: #0b2348;
  cursor: pointer;
  list-style: none;
}

body[data-service] .reference-faq-reference-list summary::-webkit-details-marker {
  display: none;
}

body[data-service] .reference-faq-question {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

body[data-service] .reference-faq-question b {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  color: #087bea;
  background: #e3f1ff;
  font-size: 1.05rem;
}

body[data-service] .reference-faq-reference-list details:nth-child(2) .reference-faq-question b {
  color: #00a879;
  background: #e2f8f1;
}

body[data-service] .reference-faq-reference-list details:nth-child(3) .reference-faq-question b {
  color: #773ee9;
  background: #f0e6ff;
}

body[data-service] .reference-faq-reference-list details:nth-child(4) .reference-faq-question b {
  color: #f28216;
  background: #fff0df;
}

body[data-service] .reference-faq-reference-list details:nth-child(6) .reference-faq-question b {
  color: #ef4d99;
  background: #ffe7f2;
}

body[data-service] .reference-faq-reference-list details:nth-child(7) .reference-faq-question b {
  color: #00a879;
  background: #e2f8f1;
}

body[data-service] .reference-faq-question strong {
  overflow-wrap: anywhere;
  font-size: 1.02rem;
  line-height: 1.25;
}

body[data-service] .reference-faq-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 50%;
  color: #0b2348;
  background: #eef7ff;
}

body[data-service] .reference-faq-toggle i {
  transition: transform 180ms ease;
}

body[data-service] .reference-faq-reference-list details[open] .reference-faq-toggle i {
  transform: rotate(180deg);
}

body[data-service] .reference-faq-reference-list details>p {
  margin: 0 12px 12px;
  padding: 17px 22px;
  border-radius: 12px;
  color: #657895;
  background: #f4f9fd;
  font-size: 0.96rem;
  line-height: 1.55;
}

/* Refined FAQ accordion cards. */
body[data-service] .reference-faq-reference-list {
  gap: 13px;
}

body[data-service] .reference-faq-reference-list details {
  position: relative;
  border: 1px solid #d7e9f7;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 9px 22px rgba(30, 104, 158, 0.07);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body[data-service] .reference-faq-reference-list details::before {
  content: '';
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 0;
  width: 3px;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(180deg, #1b91ee, #66d6f4);
  opacity: 0.85;
}

body[data-service] .reference-faq-reference-list details:nth-child(2)::before {
  background: linear-gradient(180deg, #00ae87, #73dfbf);
}

body[data-service] .reference-faq-reference-list details:nth-child(3)::before {
  background: linear-gradient(180deg, #7650eb, #b296ff);
}

body[data-service] .reference-faq-reference-list details:nth-child(4)::before {
  background: linear-gradient(180deg, #ff941b, #ffc778);
}

body[data-service] .reference-faq-reference-list details:nth-child(5)::before {
  background: linear-gradient(180deg, #1696ed, #7acdf6);
}

body[data-service] .reference-faq-reference-list details:nth-child(6)::before {
  background: linear-gradient(180deg, #e94b99, #f6a3ca);
}

body[data-service] .reference-faq-reference-list details:nth-child(7)::before {
  background: linear-gradient(180deg, #00ae87, #73dfbf);
}

body[data-service] .reference-faq-reference-list details:hover,
body[data-service] .reference-faq-reference-list details[open] {
  border-color: #99cfee;
  box-shadow: 0 14px 28px rgba(30, 104, 158, 0.12);
  transform: translateY(-2px);
}

body[data-service] .reference-faq-reference-list summary {
  min-height: 74px;
  padding: 12px 18px 12px 24px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.82));
  transition: background 180ms ease;
}

body[data-service] .reference-faq-reference-list details[open] summary {
  background: linear-gradient(90deg, #f3faff, #ffffff);
}

body[data-service] .reference-faq-question {
  gap: 15px;
}

body[data-service] .reference-faq-question b {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  font-size: 0.92rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

body[data-service] .reference-faq-question strong {
  color: #0b2c55;
  font-size: 0.94rem;
  line-height: 1.35;
}

body[data-service] .reference-faq-toggle {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border: 1px solid #d3eafa;
  color: #0c68c8;
  background: linear-gradient(145deg, #eff8ff, #e3f2ff);
  box-shadow: 0 5px 12px rgba(49, 132, 196, 0.08);
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

body[data-service] .reference-faq-reference-list details[open] .reference-faq-toggle {
  color: #ffffff;
  background: linear-gradient(135deg, #1489ee, #0e66d2);
  transform: rotate(180deg);
}

body[data-service] .reference-faq-reference-list details[open] .reference-faq-toggle i {
  transform: none;
}

body[data-service] .reference-faq-reference-list details>p {
  margin: 0 13px 13px;
  padding: 16px 20px 17px;
  border: 1px solid #e1eff8;
  border-left: 3px solid #62b9ef;
  border-radius: 0 13px 13px 13px;
  color: #5c718b;
  background: #f4faff;
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  body[data-service] .reference-faq-reference-grid {
    grid-template-columns: 1fr;
  }

  body[data-service] .reference-faq-contact-panel {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-faq-reference {
    padding: 44px 0 56px;
  }

  body[data-service] .reference-faq-reference-heading .reference-service-kicker {
    gap: 8px;
    font-size: 0.62rem;
    letter-spacing: 1.8px;
  }

  body[data-service] .reference-faq-reference-heading .reference-service-kicker::before,
  body[data-service] .reference-faq-reference-heading .reference-service-kicker::after {
    width: 24px;
  }

  body[data-service] .reference-faq-reference-heading h2 {
    margin: 12px auto 9px;
    font-size: clamp(1.85rem, 8.4vw, 2.15rem);
    line-height: 1.04;
    letter-spacing: -0.9px;
  }

  body[data-service] .reference-faq-reference-heading>p {
    max-width: 350px;
    font-size: 0.8rem;
    line-height: 1.48;
  }

  body[data-service] .reference-faq-reference-grid {
    gap: 16px;
    margin-top: 22px;
  }

  body[data-service] .reference-faq-contact-panel {
    padding: 22px 16px 18px;
    border-radius: 18px;
  }

  body[data-service] .reference-faq-contact-panel h3 {
    margin-bottom: 13px;
    font-size: clamp(1.8rem, 8.4vw, 2rem);
    line-height: 1;
    letter-spacing: -1px;
    white-space: nowrap;
  }

  body[data-service] .reference-faq-contact-panel h3 br {
    display: none;
  }

  body[data-service] .reference-faq-contact-panel h3 span {
    margin-left: 0.24em;
  }
}

body[data-service] .reference-faq-contact-panel>p {
  max-width: 100%;
  font-size: 0.8rem;
  line-height: 1.46;
}

body[data-service] .reference-faq-contact-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 18px 0 22px;
  font-size: 0.88rem;
}

body[data-service] .reference-faq-contact-items {
  gap: 10px;
  margin-top: 18px;
}

body[data-service] .reference-faq-contact-items a {
  gap: 11px;
  padding: 8px 10px;
  border: 1px solid rgba(179, 218, 244, 0.58);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.48);
}

body[data-service] .reference-faq-contact-items a>i {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  font-size: 1.08rem;
}

body[data-service] .reference-faq-contact-items b {
  font-size: 0.83rem;
}

body[data-service] .reference-faq-contact-items small {
  font-size: 0.68rem;
}

body[data-service] .reference-faq-reference-list summary {
  min-height: 60px;
  padding: 8px 12px;
}

body[data-service] .reference-faq-question {
  gap: 10px;
}

body[data-service] .reference-faq-question b {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  font-size: 0.9rem;
}

body[data-service] .reference-faq-question strong {
  font-size: 0.82rem;
}

body[data-service] .reference-faq-toggle {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

body[data-service] .reference-faq-reference-list details>p {
  padding: 14px 15px;
  font-size: 0.83rem;
}
}

/* ======================================================================
   PREMIUM SHARED SERVICE-DETAIL SYSTEM
   One visual language for every service page; content remains data-driven.
   ====================================================================== */
body[data-service] .premium-service-hero {
  position: relative;
  min-height: 670px;
  overflow: hidden;
  color: #fff;
  background: #071f3b var(--premium-hero-image) center / cover no-repeat;
}

body[data-service] .premium-service-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 24, 51, 0.98) 0%, rgba(5, 39, 76, 0.92) 38%, rgba(3, 46, 78, 0.58) 68%, rgba(2, 22, 42, 0.38) 100%);
}

body[data-service] .premium-service-hero::after {
  content: '';
  position: absolute;
  right: -5%;
  bottom: -130px;
  width: 58%;
  height: 240px;
  border: 1px solid rgba(89, 214, 255, 0.3);
  border-radius: 50%;
  transform: rotate(-8deg);
  pointer-events: none;
}

body[data-service] .premium-service-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 29px;
  padding-bottom: 36px;
}

body[data-service] .premium-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px;
  border: 1px solid rgba(89, 199, 255, 0.35);
  border-radius: 999px;
  color: #c8efff;
  background: rgba(3, 26, 54, 0.62);
  font-size: 0.72rem;
}

body[data-service] .premium-breadcrumb a {
  color: #fff;
}

body[data-service] .premium-breadcrumb i {
  color: #42d5f7;
  font-size: 0.58rem;
}

body[data-service] .premium-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.78fr);
  align-items: center;
  gap: clamp(35px, 6vw, 100px);
  min-height: 485px;
  padding: 52px 0 31px;
}

body[data-service] .premium-hero-copy {
  max-width: 770px;
}

body[data-service] .premium-eyebrow,
body[data-service] .premium-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #087ce7;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 2.1px;
  text-transform: uppercase;
}

body[data-service] .premium-eyebrow::before {
  content: '';
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

body[data-service] .premium-eyebrow-light {
  color: #52ddf4;
}

body[data-service] .premium-hero-copy h1 {
  max-width: 820px;
  margin: 17px 0 18px;
  color: #fff;
  font-size: clamp(2.7rem, 5vw, 5.45rem);
  line-height: 1.01;
  letter-spacing: -2.3px;
}

body[data-service] .premium-hero-copy>p {
  max-width: 720px;
  margin: 0;
  color: #d8ecfa;
  font-size: clamp(0.98rem, 1.28vw, 1.14rem);
  line-height: 1.7;
}

body[data-service] .premium-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 30px;
}

body[data-service] .premium-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 49px;
  padding: 13px 21px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 850;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

body[data-service] .premium-btn:hover {
  color: inherit;
  transform: translateY(-2px);
}

body[data-service] .premium-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #1596f3, #174fe0);
  box-shadow: 0 13px 25px rgba(0, 111, 246, 0.28);
}

body[data-service] .premium-btn-primary:hover {
  color: #fff;
  box-shadow: 0 17px 29px rgba(0, 111, 246, 0.38);
}

body[data-service] .premium-btn-ghost {
  border: 1px solid rgba(209, 240, 255, 0.56);
  color: #fff;
  background: rgba(6, 47, 82, 0.36);
}

body[data-service] .premium-btn-ghost:hover {
  color: #fff;
  background: rgba(24, 126, 197, 0.45);
}

body[data-service] .premium-hero-visual {
  position: relative;
  min-height: 370px;
  padding: 9px;
  border: 1px solid rgba(154, 223, 255, 0.37);
  border-radius: 30px 70px 30px 30px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 50px rgba(0, 10, 30, 0.27);
  backdrop-filter: blur(5px);
}

body[data-service] .premium-hero-visual img {
  width: 100%;
  height: 350px;
  display: block;
  border-radius: 23px 59px 23px 23px;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.02);
}

body[data-service] .premium-hero-visual-caption {
  position: absolute;
  right: 26px;
  bottom: 26px;
  left: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid rgba(181, 232, 255, 0.35);
  border-radius: 15px;
  background: rgba(2, 31, 61, 0.83);
  box-shadow: 0 10px 23px rgba(0, 17, 39, 0.25);
  backdrop-filter: blur(10px);
}

body[data-service] .premium-hero-visual-caption>i {
  display: grid;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #16c7eb, #1676ed);
}

body[data-service] .premium-hero-visual-caption strong,
body[data-service] .premium-hero-visual-caption small {
  display: block;
}

body[data-service] .premium-hero-visual-caption strong {
  color: #fff;
  font-size: 0.78rem;
}

body[data-service] .premium-hero-visual-caption small {
  margin-top: 3px;
  color: #a9dbf4;
  font-size: 0.66rem;
}

body[data-service] .premium-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  padding-top: 19px;
  border-top: 1px solid rgba(165, 222, 249, 0.2);
  color: #bde5f7;
  font-size: 0.72rem;
  font-weight: 750;
}

body[data-service] .premium-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-service] .premium-hero-trust i {
  color: #36d8f1;
}

body[data-service] .premium-section {
  padding: 96px 0;
}

body[data-service] .premium-container {
  max-width: 1340px;
}

body[data-service] .premium-overview-section {
  background: linear-gradient(180deg, #f5fbff 0%, #fff 100%);
}

body[data-service] .premium-section-heading {
  max-width: 820px;
  margin-bottom: 38px;
}

body[data-service] .premium-section-heading h2 {
  margin: 14px 0 0;
  color: #092951;
  font-size: clamp(2.1rem, 3.3vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -1.4px;
}

body[data-service] .premium-section-heading h2 span,
body[data-service] .premium-overview-copy h3 span {
  color: #177ce6;
}

body[data-service] .premium-section-heading>p {
  max-width: 690px;
  margin: 16px 0 0;
  color: #657c96;
  font-size: 0.94rem;
  line-height: 1.7;
}

body[data-service] .premium-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr);
  align-items: end;
  gap: 40px;
  max-width: none;
}

body[data-service] .premium-heading-split>p {
  margin: 0 0 4px;
}

body[data-service] .premium-overview-card {
  display: grid;
  grid-template-columns: minmax(390px, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(35px, 5vw, 72px);
  padding: 30px;
  border: 1px solid #dcecf8;
  border-radius: 29px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(21, 82, 127, 0.1);
}

body[data-service] .premium-overview-media {
  position: relative;
  min-height: 410px;
}

body[data-service] .premium-overview-media::before {
  content: '';
  position: absolute;
  inset: 18px -16px -17px 17px;
  border-radius: 25px 70px 25px 25px;
  background: linear-gradient(135deg, rgba(34, 177, 239, 0.28), rgba(44, 99, 231, 0.08));
  transform: rotate(3deg);
}

body[data-service] .premium-overview-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 410px;
  display: block;
  border: 7px solid #fff;
  border-radius: 24px 65px 24px 24px;
  object-fit: cover;
  box-shadow: 0 17px 35px rgba(21, 78, 122, 0.18);
}

body[data-service] .premium-media-tag {
  position: absolute;
  z-index: 2;
  bottom: 27px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  background: rgba(4, 35, 69, 0.86);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.7px;
}

body[data-service] .premium-media-tag i {
  color: #47dbf2;
}

body[data-service] .premium-overview-copy {
  padding: 8px 10px 8px 0;
}

body[data-service] .premium-overline {
  color: #177ce6;
  font-size: 0.68rem;
}

body[data-service] .premium-overview-copy h3 {
  max-width: 700px;
  margin: 13px 0 17px;
  color: #0a2a52;
  font-size: clamp(1.9rem, 2.7vw, 3rem);
  line-height: 1.1;
  letter-spacing: -1px;
}

body[data-service] .premium-overview-copy>p {
  margin: 0;
  color: #627993;
  font-size: 0.93rem;
  line-height: 1.75;
}

body[data-service] .premium-overview-copy ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 25px;
}

body[data-service] .premium-overview-copy li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border: 1px solid #d9eefa;
  border-radius: 12px;
  color: #214767;
  background: #f7fcff;
  font-size: 0.73rem;
  line-height: 1.35;
}

body[data-service] .premium-overview-copy li i {
  margin-top: 2px;
  color: #0d9ddd;
}

body[data-service] .premium-capabilities-section {
  background: #f4faff;
}

body[data-service] .premium-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body[data-service] .premium-capability-card {
  position: relative;
  min-height: 234px;
  padding: 26px 24px 23px;
  overflow: hidden;
  border: 1px solid #dcecf8;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 12px 29px rgba(35, 96, 142, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body[data-service] .premium-capability-card:hover {
  box-shadow: 0 18px 37px rgba(35, 96, 142, 0.13);
  transform: translateY(-4px);
}

body[data-service] .premium-card-number {
  position: absolute;
  top: 21px;
  right: 22px;
  color: #dbeaf7;
  font-size: 1.8rem;
  font-weight: 900;
}

body[data-service] .premium-capability-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #13b6df, #1677e8);
  box-shadow: 0 8px 16px rgba(19, 151, 222, 0.22);
}

body[data-service] .premium-capability-card:nth-child(3n + 2) .premium-capability-icon {
  background: linear-gradient(135deg, #10b98c, #08745e);
}

body[data-service] .premium-capability-card:nth-child(3n) .premium-capability-icon {
  background: linear-gradient(135deg, #8860ee, #5f38c5);
}

body[data-service] .premium-capability-card h3 {
  max-width: 80%;
  margin: 21px 0 9px;
  color: #12365e;
  font-size: 1.04rem;
  line-height: 1.25;
}

body[data-service] .premium-capability-card p {
  margin: 0;
  color: #6e849b;
  font-size: 0.78rem;
  line-height: 1.6;
}

body[data-service] .premium-card-line {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, #20b6e7, transparent);
  opacity: 0.6;
}

body[data-service] .premium-process-section {
  background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}

body[data-service] .premium-process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 24px;
}

body[data-service] .premium-process-track::before {
  content: '';
  position: absolute;
  top: 24px;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, #b9e9f7, #a9ccf4, #b9e9f7);
}

body[data-service] .premium-process-step {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 15px;
  padding: 0 14px 17px 0;
}

body[data-service] .premium-step-dot {
  display: grid;
  width: 49px;
  height: 49px;
  flex: 0 0 49px;
  place-items: center;
  border: 7px solid #f4fbff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #11bce3, #146de4);
  box-shadow: 0 5px 13px rgba(22, 121, 224, 0.27);
  font-size: 0.73rem;
  font-weight: 900;
}

body[data-service] .premium-process-step:nth-child(3n + 2) .premium-step-dot {
  background: linear-gradient(135deg, #17bb8d, #0a8064);
}

body[data-service] .premium-process-step:nth-child(3n) .premium-step-dot {
  background: linear-gradient(135deg, #9270f5, #5e3fd1);
}

body[data-service] .premium-process-step h3 {
  margin: 5px 0 8px;
  color: #163c64;
  font-size: 0.92rem;
  line-height: 1.3;
}

body[data-service] .premium-process-step p {
  margin: 0;
  color: #71869c;
  font-size: 0.76rem;
  line-height: 1.55;
}

body[data-service] .premium-applications-section {
  background: #eef8ff;
}

body[data-service] .premium-application-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px;
}

body[data-service] .premium-application-item {
  position: relative;
  min-height: 126px;
  padding: 17px 15px;
  border: 1px solid #d4eaf8;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  transition: transform 0.22s ease, background 0.22s ease;
}

body[data-service] .premium-application-item:hover {
  background: #fff;
  transform: translateY(-3px);
}

body[data-service] .premium-application-item>span {
  color: #94c9ec;
  font-size: 0.65rem;
  font-weight: 900;
}

body[data-service] .premium-application-item>i {
  position: absolute;
  top: 18px;
  right: 16px;
  color: #0f9ed8;
  font-size: 0.72rem;
}

body[data-service] .premium-application-item strong {
  display: block;
  margin-top: 26px;
  color: #173e65;
  font-size: 0.78rem;
  line-height: 1.32;
}

body[data-service] .premium-strengths-section {
  background: #f8fcff;
}

body[data-service] .premium-strengths-panel {
  display: grid;
  grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr);
  gap: 48px;
  padding: 49px 52px;
  border-radius: 27px;
  background: linear-gradient(125deg, #062c58, #075d89 56%, #08749d);
  box-shadow: 0 22px 45px rgba(5, 56, 98, 0.22);
}

body[data-service] .premium-strengths-intro h2 {
  max-width: 380px;
  margin: 16px 0 14px;
  color: #fff;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -1px;
}

body[data-service] .premium-strengths-intro p {
  max-width: 420px;
  margin: 0;
  color: #c9e9f6;
  font-size: 0.84rem;
  line-height: 1.65;
}

body[data-service] .premium-btn-light {
  margin-top: 25px;
  color: #0c4c7b;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 25, 60, 0.14);
}

body[data-service] .premium-btn-light:hover {
  color: #0c4c7b;
  background: #e9f8ff;
}

body[data-service] .premium-strength-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 12px;
}

body[data-service] .premium-strength-grid div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 54px;
  padding: 13px 14px;
  border: 1px solid rgba(184, 237, 255, 0.18);
  border-radius: 12px;
  color: #e4f8ff;
  background: rgba(4, 28, 58, 0.23);
  font-size: 0.73rem;
  line-height: 1.4;
}

body[data-service] .premium-strength-grid i {
  margin-top: 2px;
  color: #58e2f4;
}

body[data-service] .premium-faq-section {
  background: #fff;
}

body[data-service] .premium-faq-layout {
  display: grid;
  grid-template-columns: minmax(270px, 0.78fr) minmax(0, 1.22fr);
  gap: 65px;
  align-items: start;
}

body[data-service] .premium-faq-layout .premium-section-heading {
  margin: 0;
}

body[data-service] .premium-faq-list {
  display: grid;
  gap: 11px;
}

body[data-service] .premium-faq-list details {
  overflow: hidden;
  border: 1px solid #dcecf7;
  border-radius: 14px;
  background: #fbfdff;
}

body[data-service] .premium-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  cursor: pointer;
  color: #173b62;
  font-size: 0.83rem;
  font-weight: 800;
  list-style: none;
}

body[data-service] .premium-faq-list summary::-webkit-details-marker {
  display: none;
}

body[data-service] .premium-faq-list summary i {
  color: #1387df;
  font-size: 0.73rem;
  transition: transform 0.2s ease;
}

body[data-service] .premium-faq-list details[open] summary i {
  transform: rotate(45deg);
}

body[data-service] .premium-faq-list details p {
  margin: 0;
  padding: 0 20px 19px;
  color: #71859a;
  font-size: 0.78rem;
  line-height: 1.65;
}

body[data-service] .premium-final-cta {
  padding: 67px 0;
  color: #fff;
  background: linear-gradient(120deg, #06284f, #075d88 60%, #0781a8);
}

body[data-service] .premium-final-cta .premium-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}

body[data-service] .premium-final-cta h2 {
  max-width: 700px;
  margin: 15px 0 10px;
  color: #fff;
  font-size: clamp(2rem, 3.2vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -1px;
}

body[data-service] .premium-final-cta p {
  max-width: 650px;
  margin: 0;
  color: #c7e9f6;
  font-size: 0.88rem;
  line-height: 1.6;
}

@media (max-width: 1050px) {

  body[data-service] .premium-hero-layout,
  body[data-service] .premium-overview-card {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  body[data-service] .premium-hero-copy h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
  }

  body[data-service] .premium-application-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  body[data-service] .premium-service-hero {
    min-height: 0;
  }

  body[data-service] .premium-hero-layout,
  body[data-service] .premium-overview-card,
  body[data-service] .premium-heading-split,
  body[data-service] .premium-faq-layout,
  body[data-service] .premium-strengths-panel {
    grid-template-columns: 1fr;
  }

  body[data-service] .premium-hero-layout {
    padding-top: 43px;
  }

  body[data-service] .premium-hero-visual {
    max-width: 670px;
  }

  body[data-service] .premium-overview-media,
  body[data-service] .premium-overview-media img {
    min-height: 330px;
    height: 330px;
  }

  body[data-service] .premium-capability-grid,
  body[data-service] .premium-process-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-service] .premium-process-track::before {
    display: none;
  }

  body[data-service] .premium-application-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body[data-service] .premium-section {
    padding: 66px 0;
  }

  body[data-service] .premium-service-hero-inner {
    padding-top: 22px;
  }

  body[data-service] .premium-breadcrumb {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.64rem;
  }

  body[data-service] .premium-hero-layout {
    gap: 25px;
    padding: 42px 0 28px;
  }

  body[data-service] .premium-hero-copy h1 {
    font-size: clamp(2.35rem, 11vw, 3.5rem);
    letter-spacing: -1px;
  }

  body[data-service] .premium-hero-copy>p {
    font-size: 0.88rem;
  }

  body[data-service] .premium-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-service] .premium-btn {
    width: 100%;
  }

  body[data-service] .premium-hero-visual {
    min-height: 280px;
  }

  body[data-service] .premium-hero-visual img {
    height: 260px;
  }

  body[data-service] .premium-hero-visual-caption {
    right: 17px;
    bottom: 18px;
    left: 17px;
  }

  body[data-service] .premium-hero-trust {
    display: grid;
    gap: 9px;
  }

  body[data-service] .premium-overview-card {
    padding: 16px;
    border-radius: 21px;
  }

  body[data-service] .premium-overview-media,
  body[data-service] .premium-overview-media img {
    min-height: 260px;
    height: 260px;
  }

  body[data-service] .premium-overview-copy {
    padding: 6px 2px;
  }

  body[data-service] .premium-overview-copy h3 {
    font-size: 1.85rem;
  }

  body[data-service] .premium-overview-copy ul,
  body[data-service] .premium-capability-grid,
  body[data-service] .premium-process-track,
  body[data-service] .premium-application-grid,
  body[data-service] .premium-strength-grid {
    grid-template-columns: 1fr;
  }

  body[data-service] .premium-strengths-panel {
    padding: 32px 22px;
    border-radius: 21px;
  }

  body[data-service] .premium-final-cta .premium-container {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Contact-page-inspired banner refinement for every service detail. */
body[data-service] .premium-service-hero {
  min-height: 610px;
  background-position: center 35%;
}

body[data-service] .premium-service-hero-overlay {
  background:
    linear-gradient(135deg, rgba(7, 25, 48, 0.92) 0%, rgba(13, 59, 102, 0.84) 50%, rgba(37, 99, 235, 0.68) 100%),
    radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.32) 0%, transparent 60%);
}

body[data-service] .premium-hero-layout {
  min-height: 430px;
  padding-top: 45px;
  padding-bottom: 24px;
}

body[data-service] .premium-hero-copy h1 {
  font-size: clamp(2.45rem, 3.8vw, 4.25rem);
  letter-spacing: -1.6px;
}

body[data-service] .premium-hero-trust {
  max-width: 850px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.52);
  box-shadow: 0 15px 32px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

body[data-service] .premium-hero-trust span {
  padding: 4px 10px;
}

@media (max-width: 820px) {
  body[data-service] .premium-service-hero {
    min-height: 0;
  }
}

/* Final precedence: compact the shared overview card across every service page. */
body[data-service] .shared-service-overview-section .dedicated-service-container {
  max-width: 1340px;
}

body[data-service] .shared-service-overview-section .dedicated-service-overview {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(34px, 4.2vw, 64px);
  margin-bottom: 68px;
  padding: 34px;
  border-radius: 30px;
  box-shadow: 0 18px 48px rgba(16, 65, 105, 0.09);
}

body[data-service] .shared-service-overview-section .dedicated-service-image-wrap {
  min-height: 410px;
  border-width: 7px;
  border-radius: 26px 64px 26px 26px;
}

body[data-service] .shared-service-overview-section .dedicated-service-copy h2 {
  max-width: 650px;
  margin-top: 10px;
  margin-bottom: 19px;
  font-size: clamp(1.95rem, 2.85vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.9px;
}

body[data-service] .shared-service-overview-section .dedicated-service-lead-card {
  padding: 14px 17px;
  margin-bottom: 15px;
}

body[data-service] .shared-service-overview-section .dedicated-service-copy .dedicated-service-lead {
  font-size: 0.94rem;
  line-height: 1.65;
}

body[data-service] .shared-service-overview-section .dedicated-service-copy .dedicated-service-detail {
  font-size: 0.91rem;
  line-height: 1.65;
}

body[data-service] .shared-service-overview-section .dedicated-service-checklist {
  gap: 10px 12px;
  margin-top: 20px;
}

body[data-service] .shared-service-overview-section .dedicated-service-checklist li {
  min-height: 50px;
  padding: 9px 12px;
  font-size: 0.76rem;
}

body[data-service] .shared-service-overview-section .dedicated-service-checklist li i {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
}

/* Technical capabilities section shared by the non-GPR service detail pages. */
.technical-capabilities-section {
  position: relative;
  overflow: hidden;
  padding: 86px 0 112px;
  background:
    radial-gradient(circle at 82% 24%, rgba(102, 202, 255, 0.2), transparent 31%),
    linear-gradient(112deg, #f9fcff 0%, #edf8ff 52%, #f8fcff 100%);
}

.technical-capabilities-section::after {
  content: '';
  position: absolute;
  right: -7%;
  bottom: -110px;
  width: 48%;
  height: 210px;
  border-top: 2px solid rgba(35, 169, 239, 0.17);
  border-radius: 50%;
  transform: rotate(-7deg);
  pointer-events: none;
}

.technical-capabilities-container {
  position: relative;
  z-index: 1;
  max-width: 1450px;
}

.technical-capabilities-grid {
  display: grid;
  grid-template-columns: minmax(390px, 0.91fr) minmax(0, 1.09fr);
  align-items: center;
  gap: clamp(42px, 5.5vw, 92px);
}

.technical-capabilities-copy {
  padding-left: clamp(0px, 1vw, 16px);
}

.technical-capabilities-kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
  color: #1679e9;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 2.2px;
}

.technical-capabilities-kicker::before {
  content: '';
  width: 29px;
  height: 3px;
  border-radius: 999px;
  background: #17a7ec;
}

.technical-capabilities-copy h2 {
  margin: 0 0 15px;
  color: #0a244a;
  font-size: clamp(2.2rem, 3.3vw, 4rem);
  line-height: 1.08;
  letter-spacing: -1.6px;
}

.technical-capabilities-copy>p {
  max-width: 650px;
  margin: 0 0 21px;
  color: #607894;
  font-size: clamp(0.98rem, 1.15vw, 1.2rem);
  line-height: 1.5;
}

.technical-capabilities-list {
  border-top: 1px solid rgba(156, 192, 216, 0.33);
}

.technical-capability-row {
  display: grid;
  grid-template-columns: 38px minmax(140px, 0.65fr) minmax(170px, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 56px;
  border-bottom: 1px solid rgba(156, 192, 216, 0.33);
  color: #7890aa;
  font-size: 0.83rem;
}

.technical-capability-row strong {
  color: #183c66;
  font-size: 0.88rem;
  font-weight: 850;
}

.technical-capability-icon,
.technical-stat-icon {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #18bedb, #137ae9);
  box-shadow: 0 5px 12px rgba(25, 143, 225, 0.25);
  font-size: 0.72rem;
}

.technical-capabilities-visual {
  position: relative;
  padding-bottom: 38px;
}

.technical-diagram-wrap {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border: 9px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  background: #c9edff;
  box-shadow: 0 24px 54px rgba(21, 93, 137, 0.19);
}

.technical-diagram-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 36, 73, 0.02) 40%, rgba(1, 40, 82, 0.24) 100%);
  pointer-events: none;
}

.technical-diagram-wrap img {
  width: 100%;
  height: 100%;
  min-height: 510px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.technical-diagram-labels {
  position: absolute;
  z-index: 1;
  top: 8%;
  right: 2.5%;
  display: grid;
  gap: 12px;
  width: min(180px, 31%);
}

.technical-diagram-labels span {
  display: block;
  padding: 11px 13px;
  border: 1px solid rgba(160, 220, 255, 0.18);
  border-radius: 9px;
  color: #fff;
  background: rgba(4, 43, 82, 0.9);
  box-shadow: 0 7px 15px rgba(2, 31, 61, 0.18);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}

.technical-capability-stats {
  position: absolute;
  z-index: 2;
  right: -2%;
  bottom: 0;
  left: -5%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.technical-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 15px 17px;
  border: 1px solid rgba(208, 229, 242, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 14px 28px rgba(32, 95, 133, 0.18);
}

.technical-stat-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border-radius: 12px;
  font-size: 0.9rem;
}

.technical-stat-card strong,
.technical-stat-card small {
  display: block;
}

.technical-stat-card strong {
  color: #102f5b;
  font-size: clamp(0.84rem, 1vw, 1rem);
  line-height: 1.2;
}

.technical-stat-card small {
  margin-top: 4px;
  color: #8295aa;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 1040px) {
  .technical-capabilities-grid {
    grid-template-columns: minmax(330px, 0.88fr) minmax(0, 1.12fr);
    gap: 34px;
  }

  .technical-capability-row {
    grid-template-columns: 34px minmax(120px, 0.75fr) minmax(135px, 1fr);
    gap: 9px;
    font-size: 0.75rem;
  }
}

@media (max-width: 780px) {
  .technical-capabilities-section {
    padding: 62px 0 86px;
  }

  .technical-capabilities-grid {
    grid-template-columns: 1fr;
  }

  .technical-capabilities-copy h2 {
    font-size: clamp(2.2rem, 8vw, 3.25rem);
  }

  .technical-diagram-wrap,
  .technical-diagram-wrap img {
    min-height: 430px;
  }

  .technical-capability-stats {
    right: 0;
    left: 0;
  }
}

/* Screenshot-matched GPR key benefits composition. */
body[data-service] .gpr-redesign-benefits {
  padding: 28px 0 82px;
  background: #ffffff;
}

body[data-service] .gpr-benefits-reference-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(365px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 4.5vw, 68px);
  min-height: 615px;
  padding: 39px 43px 0;
  overflow: hidden;
  border: 1px solid #deecfa;
  border-radius: 27px;
  background:
    radial-gradient(circle at 26% 48%, rgba(173, 222, 255, 0.24), transparent 28%),
    linear-gradient(115deg, #fbfdff 0%, #f4faff 58%, #eef8ff 100%);
  box-shadow: 0 20px 46px rgba(48, 112, 160, 0.1);
}

body[data-service] .gpr-benefits-reference-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.24;
  pointer-events: none;
  background-image: radial-gradient(rgba(68, 156, 220, 0.18) 0.7px, transparent 0.7px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 43%, transparent 100%);
}

body[data-service] .gpr-benefits-reference-intro,
body[data-service] .gpr-benefits-reference-list {
  position: relative;
  z-index: 1;
}

body[data-service] .gpr-benefits-reference-intro h2 {
  max-width: 540px;
  margin: 17px 0 17px;
  color: #092c56;
  font-size: clamp(2.55rem, 3.8vw, 4rem);
  line-height: 1.06;
  letter-spacing: -1.8px;
}

body[data-service] .gpr-benefits-reference-intro h2 span {
  color: #157bea;
}

body[data-service] .gpr-benefits-reference-intro>p {
  max-width: 620px;
  margin: 0;
  color: #637993;
  font-size: 0.98rem;
  line-height: 1.55;
}

body[data-service] .gpr-benefits-reference-visual {
  position: absolute;
  right: -58px;
  bottom: -4px;
  left: -68px;
  height: 300px;
  overflow: hidden;
  clip-path: ellipse(77% 74% at 43% 100%);
}

body[data-service] .gpr-benefits-reference-visual::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -66px;
  right: -15%;
  left: -15%;
  height: 148px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(249, 253, 255, 0.98), rgba(235, 247, 255, 0.74));
  transform: rotate(-7deg);
}

body[data-service] .gpr-benefits-reference-visual::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: -23px;
  right: -13%;
  left: -13%;
  height: 95px;
  border-top: 12px solid rgba(163, 215, 255, 0.47);
  border-radius: 50%;
  transform: rotate(-8deg);
}

body[data-service] .gpr-benefits-reference-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(0.92) contrast(0.98);
}

body[data-service] .gpr-benefits-reference-badge {
  position: absolute;
  z-index: 3;
  right: 13%;
  bottom: 38px;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 280px;
  padding: 13px 14px;
  border: 1px solid rgba(145, 196, 237, 0.46);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 11px 24px rgba(36, 111, 177, 0.16);
  color: #11345e;
}

body[data-service] .gpr-benefits-reference-badge>i:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #238ff5, #1764db);
  font-size: 0.95rem;
}

body[data-service] .gpr-benefits-reference-badge span {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.25;
}

body[data-service] .gpr-benefits-reference-badge>i:last-child {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #8dc7fa;
  border-radius: 50%;
  color: #117de8;
  font-size: 0.66rem;
}

body[data-service] .gpr-benefits-reference-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 20px 22px;
  padding-top: 21px;
}

body[data-service] .gpr-benefits-reference-card {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr) 48px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 15px;
  min-height: 159px;
  padding: 27px 18px 23px 25px;
  border: 1px solid #dbeafa;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 11px 24px rgba(45, 115, 166, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body[data-service] .gpr-benefits-reference-card:hover {
  border-color: #a7d5fa;
  box-shadow: 0 17px 30px rgba(45, 115, 166, 0.14);
  transform: translateY(-3px);
}

body[data-service] .gpr-benefits-reference-icon {
  display: grid;
  width: 65px;
  height: 65px;
  grid-row: span 2;
  place-items: center;
  border: 1px solid #a6ddfb;
  border-radius: 50%;
  color: #0877b9;
  background: linear-gradient(145deg, #e7faff, #d6f5ff);
  box-shadow: inset 0 0 0 9px rgba(255, 255, 255, 0.35);
  font-size: 1.36rem;
}

body[data-service] .gpr-benefits-reference-icon.green {
  border-color: #aae9d9;
  color: #078b70;
  background: linear-gradient(145deg, #e8fff8, #d6fbf1);
}

body[data-service] .gpr-benefits-reference-icon.purple {
  border-color: #d4c1ff;
  color: #754bd4;
  background: linear-gradient(145deg, #f4efff, #e9ddff);
}

body[data-service] .gpr-benefits-reference-copy {
  grid-column: 2;
  align-self: center;
}

body[data-service] .gpr-benefits-reference-copy strong,
body[data-service] .gpr-benefits-reference-copy small {
  display: block;
}

body[data-service] .gpr-benefits-reference-copy strong {
  color: #102f59;
  font-size: clamp(0.9rem, 1.05vw, 1.08rem);
  line-height: 1.18;
}

body[data-service] .gpr-benefits-reference-copy small {
  margin-top: 9px;
  color: #7187a0;
  font-size: 0.76rem;
  line-height: 1.35;
}

body[data-service] .gpr-benefits-reference-number {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  padding-left: 13px;
  border-left: 1px solid #e5edf7;
  color: #d9e6f4;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

body[data-service] .gpr-benefits-reference-arrow {
  display: grid;
  width: 34px;
  height: 34px;
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  place-items: center;
  border: 1px solid #c7e2fb;
  border-radius: 50%;
  color: #1684eb;
  background: #f5fbff;
  font-size: 0.68rem;
}

@media (max-width: 1120px) {
  body[data-service] .gpr-benefits-reference-panel {
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    gap: 28px;
    padding-right: 28px;
    padding-left: 28px;
  }

  body[data-service] .gpr-benefits-reference-card {
    grid-template-columns: 51px minmax(0, 1fr) 35px;
    column-gap: 10px;
    padding-right: 12px;
    padding-left: 15px;
  }

  body[data-service] .gpr-benefits-reference-icon {
    width: 51px;
    height: 51px;
    font-size: 1.05rem;
  }
}

@media (max-width: 820px) {
  body[data-service] .gpr-redesign-benefits {
    padding-top: 0;
  }

  body[data-service] .gpr-benefits-reference-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 32px 24px 28px;
  }

  body[data-service] .gpr-benefits-reference-intro {
    min-height: 535px;
  }

  body[data-service] .gpr-benefits-reference-list {
    padding-top: 0;
  }
}

@media (max-width: 560px) {
  body[data-service] .gpr-benefits-reference-panel {
    padding: 27px 16px 20px;
    border-radius: 22px;
  }

  body[data-service] .gpr-benefits-reference-intro {
    min-height: 470px;
  }

  body[data-service] .gpr-benefits-reference-intro h2 {
    font-size: 2.35rem;
    letter-spacing: -1px;
  }

  body[data-service] .gpr-benefits-reference-intro>p {
    font-size: 0.87rem;
  }

  body[data-service] .gpr-benefits-reference-visual {
    right: -35px;
    left: -35px;
    height: 250px;
  }

  body[data-service] .gpr-benefits-reference-badge {
    right: 5%;
    bottom: 27px;
    min-width: 232px;
    padding: 10px;
  }

  body[data-service] .gpr-benefits-reference-card {
    grid-template-columns: 52px minmax(0, 1fr) 34px;
    min-height: 136px;
    padding: 18px 10px 17px 12px;
    border-radius: 17px;
  }

  body[data-service] .gpr-benefits-reference-icon {
    width: 52px;
    height: 52px;
  }

  body[data-service] .gpr-benefits-reference-copy strong {
    font-size: 0.84rem;
  }

  body[data-service] .gpr-benefits-reference-copy small {
    font-size: 0.68rem;
  }
}

@media (max-width: 560px) {
  .technical-capability-row {
    grid-template-columns: 33px 1fr;
    min-height: 58px;
  }

  .technical-capability-row>span:last-child {
    grid-column: 2;
    margin-top: -12px;
    font-size: 0.72rem;
  }

  .technical-diagram-wrap,
  .technical-diagram-wrap img {
    min-height: 330px;
  }

  .technical-diagram-labels {
    top: 5%;
    gap: 6px;
    width: 39%;
  }

  .technical-diagram-labels span {
    padding: 7px 5px;
    font-size: 0.61rem;
  }

  .technical-capability-stats {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    grid-template-columns: 1fr;
    margin-top: 12px;
  }
}

@media (max-width: 900px) {
  body[data-service] .shared-service-overview-section .dedicated-service-overview {
    padding: 28px;
  }
}

@media (max-width: 640px) {
  body[data-service] .shared-service-overview-section .dedicated-service-overview {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 24px;
  }

  body[data-service] .shared-service-overview-section .dedicated-service-image-wrap {
    min-height: 290px;
    border-radius: 21px 46px 21px 21px;
  }

  body[data-service] .shared-service-overview-section .dedicated-service-copy h2 {
    font-size: 1.95rem;
  }
}

@media (max-width: 640px) {
  .gpr-redesign-section {
    padding: 50px 0;
  }

  .gpr-redesign-benefit-list,
  .gpr-redesign-case-facts,
  .gpr-redesign-mini-grid {
    grid-template-columns: 1fr;
  }

  .gpr-workflow-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .gpr-redesign-industry-grid,
  .gpr-redesign-related-grid {
    grid-template-columns: 1fr;
  }

  .gpr-redesign-tech-stats {
    flex-direction: column;
  }
}

/* GPR overview card: clean image-led reference layout. */
body[data-service="gpr-survey"] .gpr-redesign-overview {
  padding: 62px 0 70px;
  background: #f2f8fc;
}

body[data-service="gpr-survey"] .gpr-overview-reference-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 52px;
  overflow: hidden;
  padding: 58px 50px;
  border: 1px solid #d7e5ef;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(24, 74, 111, 0.08);
}

body[data-service="gpr-survey"] .gpr-overview-reference-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #049de6, #2b69ed);
}

body[data-service="gpr-survey"] .gpr-overview-reference-image {
  position: relative;
  min-width: 0;
}

body[data-service="gpr-survey"] .gpr-overview-reference-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1.42 / 1;
  object-fit: cover;
  border: 3px solid #ffffff;
  border-radius: 34px 72px 34px 34px;
  box-shadow: 0 18px 30px rgba(34, 85, 126, 0.2);
}

body[data-service="gpr-survey"] .gpr-overview-reference-image::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -14px -16px -18px 16px;
  border-radius: 40px 80px 40px 40px;
  background: radial-gradient(ellipse at center, rgba(64, 143, 235, 0.42), transparent 68%);
  filter: blur(4px);
}

body[data-service="gpr-survey"] .gpr-overview-reference-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 25px rgba(7, 49, 87, 0.2);
}

body[data-service="gpr-survey"] .gpr-overview-reference-badge>i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 13px;
  color: #ffffff;
  background: #087fc8;
  box-shadow: 0 7px 15px rgba(8, 127, 200, 0.3);
}

body[data-service="gpr-survey"] .gpr-overview-reference-badge b,
body[data-service="gpr-survey"] .gpr-overview-reference-badge small {
  display: block;
}

body[data-service="gpr-survey"] .gpr-overview-reference-badge b {
  color: #102744;
  font-size: 0.77rem;
}

body[data-service="gpr-survey"] .gpr-overview-reference-badge small {
  margin-top: 3px;
  color: #6d8297;
  font-size: 0.65rem;
}

body[data-service="gpr-survey"] .gpr-overview-reference-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid #acd8f7;
  border-radius: 999px;
  color: #087bc7;
  background: #edf7ff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1px;
}

body[data-service="gpr-survey"] .gpr-overview-reference-pill i {
  font-size: 0.48rem;
  color: #078bcf;
}

body[data-service="gpr-survey"] .gpr-overview-reference-copy h2 {
  margin: 24px 0 20px;
  color: #081e3b;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -1.2px;
}

body[data-service="gpr-survey"] .gpr-overview-reference-copy h2 span,
body[data-service="gpr-survey"] .gpr-overview-reference-copy h2 strong {
  display: block;
}

body[data-service="gpr-survey"] .gpr-overview-reference-copy h2 strong {
  color: #1768da;
  font-weight: 800;
}

body[data-service="gpr-survey"] .gpr-overview-reference-callout {
  padding: 14px 18px;
  border-left: 3px solid #0b8fd1;
  background: #f2f8fc;
}

body[data-service="gpr-survey"] .gpr-overview-reference-callout p,
body[data-service="gpr-survey"] .gpr-overview-reference-secondary {
  margin: 0;
  color: #293e58;
  font-size: 0.83rem;
  line-height: 1.7;
}

body[data-service="gpr-survey"] .gpr-overview-reference-secondary {
  margin-top: 18px;
  color: #5c7187;
}

body[data-service="gpr-survey"] .gpr-overview-reference-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 23px;
}

body[data-service="gpr-survey"] .gpr-overview-reference-checks>div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid #bde2ff;
  border-radius: 15px;
  background: linear-gradient(135deg, #f8fcff, #f0f8ff);
}

body[data-service="gpr-survey"] .gpr-overview-reference-checks i {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #147bdc;
  box-shadow: 0 6px 12px rgba(20, 123, 220, 0.25);
}

body[data-service="gpr-survey"] .gpr-overview-reference-checks b {
  color: #172c48;
  font-size: 0.72rem;
  line-height: 1.35;
}

body.service-icons-fallback .gpr-overview-reference-checks .fa-check::before {
  content: "\\2713" !important;
}

@media (max-width: 960px) {
  body[data-service="gpr-survey"] .gpr-overview-reference-card {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 48px 32px;
  }

  body[data-service="gpr-survey"] .gpr-overview-reference-image {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  body[data-service="gpr-survey"] .gpr-overview-reference-card {
    padding: 42px 18px 28px;
    border-radius: 22px;
  }

  body[data-service="gpr-survey"] .gpr-overview-reference-copy h2 {
    font-size: 2rem;
  }

  body[data-service="gpr-survey"] .gpr-overview-reference-checks {
    grid-template-columns: 1fr;
  }

  body[data-service="gpr-survey"] .gpr-overview-reference-badge {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
}

/* GPR overview: match the supplied image-led reference composition. */
body[data-service="gpr-survey"] .gpr-redesign-overview {
  padding: 68px 0 76px;
  background: #f3faff;
}

body[data-service="gpr-survey"] .gpr-redesign-overview-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 58px;
  align-items: center;
}

body[data-service="gpr-survey"] .gpr-redesign-image-frame {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 7px solid #ffffff;
  border-radius: 22px 45px 22px 22px;
  box-shadow: 0 18px 35px rgba(21, 91, 135, 0.2);
}

body[data-service="gpr-survey"] .gpr-redesign-image-frame::before,
body[data-service="gpr-survey"] .gpr-redesign-image-frame::after {
  display: none;
}

body[data-service="gpr-survey"] .gpr-redesign-image-frame img {
  min-height: 0;
  height: 100%;
  object-fit: cover;
}

body[data-service="gpr-survey"] .gpr-redesign-overview-copy h2 {
  max-width: 680px;
  margin-top: 8px;
  color: #082b52;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.08;
}

body[data-service="gpr-survey"] .gpr-redesign-overview-copy p {
  max-width: 680px;
  color: #5b7087;
  font-size: 0.9rem;
  line-height: 1.62;
}

body[data-service="gpr-survey"] .gpr-redesign-mini-grid>div {
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid #e0edf6;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(13, 84, 128, 0.08);
}

@media (max-width: 960px) {
  body[data-service="gpr-survey"] .gpr-redesign-overview-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  body[data-service="gpr-survey"] .gpr-redesign-image-frame {
    max-width: 760px;
    margin: 0 auto;
  }
}

/* Final precedence: keep the earlier two-column GPR overview design active. */
body[data-service="gpr-survey"] .gpr-redesign-overview {
  padding: 54px 0 74px;
  background: #f4faff;
}

body[data-service="gpr-survey"] .gpr-redesign-overview-grid {
  grid-template-columns: minmax(380px, 0.92fr) minmax(0, 1.08fr);
  gap: 62px;
  align-items: center;
}

body[data-service="gpr-survey"] .gpr-redesign-image-frame {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 8px solid #ffffff;
  border-radius: 22px 54px 22px 22px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(8, 69, 111, 0.18);
}

body[data-service="gpr-survey"] .gpr-redesign-image-frame::before,
body[data-service="gpr-survey"] .gpr-redesign-image-frame::after {
  display: none;
}

body[data-service="gpr-survey"] .gpr-redesign-image-frame img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

body[data-service="gpr-survey"] .gpr-redesign-overview-copy h2 {
  margin: 7px 0 13px;
  color: #082b52;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.8px;
}

body[data-service="gpr-survey"] .gpr-redesign-overview-copy p {
  max-width: 680px;
  margin-bottom: 12px;
  color: #5b7087;
  font-size: 0.86rem;
  line-height: 1.65;
}

body[data-service="gpr-survey"] .gpr-redesign-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 23px;
}

body[data-service="gpr-survey"] .gpr-redesign-mini-grid>div {
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid #e0edf6;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(13, 84, 128, 0.07);
}

@media (max-width: 960px) {
  body[data-service="gpr-survey"] .gpr-redesign-overview-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  body[data-service="gpr-survey"] .gpr-redesign-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* Final process-section polish — applied after all legacy service rules. */
/* Final Applications sizing override — kept at the end of the stylesheet. */
body[data-service] .reference-applications-reference .reference-applications-grid {
  gap: 20px 24px;
  margin-top: 34px;
  width: min(100%, 1450px);
  margin-right: auto;
  margin-left: auto;
}

body[data-service] .reference-applications-reference .reference-application-card {
  min-height: 188px;
  padding: 17px 30px 15px !important;
  border-radius: 17px;
  box-shadow: 0 12px 26px rgba(28, 92, 137, 0.08) !important;
}

body[data-service] .reference-applications-reference .reference-application-card::after {
  right: -28px;
  bottom: -52px;
  width: 170px;
  height: 132px;
}

body[data-service] .reference-applications-reference .reference-application-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
  font-size: 1.8rem !important;
}

body[data-service] .reference-applications-reference .reference-application-icon i {
  font-size: 1.8rem;
}

body[data-service] .reference-applications-reference .reference-application-number {
  top: 17px;
  right: 21px;
  font-size: 1.4rem !important;
}

body[data-service] .reference-applications-reference .reference-application-card h3 {
  margin-bottom: 6px !important;
  font-size: 0.96rem !important;
  line-height: 1.2;
}

body[data-service] .reference-applications-reference .reference-application-card p {
  font-size: 0.78rem !important;
  line-height: 1.42 !important;
}

body[data-service] .reference-applications-reference .reference-application-bottom-line {
  width: 50px;
  height: 3px;
}

@media (max-width: 520px) {
  body[data-service] .reference-applications-reference .reference-application-card {
    min-height: 178px;
    padding: 15px 22px 14px !important;
  }
}

/* Premium Applications card treatment. */
body[data-service] .reference-applications-reference .reference-application-card {
  min-height: 204px;
  padding: 22px 24px 18px !important;
  border: 1px solid #cfe5f4;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #f5fbff 100%);
  box-shadow: 0 13px 28px rgba(28, 92, 137, 0.1) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body[data-service] .reference-applications-reference .reference-application-card::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  right: 22px;
  left: 22px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #178ced, #74d6f7);
}

body[data-service] .reference-applications-reference .reference-application-card:hover {
  border-color: #8bc8ed;
  box-shadow: 0 18px 34px rgba(28, 92, 137, 0.15) !important;
  transform: translateY(-5px);
}

body[data-service] .reference-applications-reference .reference-application-card.tone-green::before {
  background: linear-gradient(90deg, #00aa7e, #72ddbd);
}

body[data-service] .reference-applications-reference .reference-application-card.tone-purple::before {
  background: linear-gradient(90deg, #7041e8, #b18fff);
}

body[data-service] .reference-applications-reference .reference-application-card.tone-orange::before {
  background: linear-gradient(90deg, #f5820b, #ffc16e);
}

body[data-service] .reference-applications-reference .reference-application-card.tone-pink::before {
  background: linear-gradient(90deg, #e8408d, #f49bc5);
}

body[data-service] .reference-applications-reference .reference-application-card::after {
  right: -34px;
  bottom: -60px;
  width: 190px;
  height: 148px;
  background: rgba(207, 235, 253, 0.48);
}

body[data-service] .reference-applications-reference .reference-application-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 11px;
  border: 1px solid rgba(117, 190, 239, 0.22);
  box-shadow: 0 8px 17px rgba(30, 125, 199, 0.1), inset 0 0 0 5px rgba(255, 255, 255, 0.35);
  font-size: 1.5rem !important;
}

body[data-service] .reference-applications-reference .reference-application-icon i {
  font-size: 1.5rem;
}

body[data-service] .reference-applications-reference .reference-application-number {
  top: 18px;
  right: 20px;
  display: grid;
  width: 35px;
  height: 25px;
  place-items: center;
  border: 1px solid #d7ebf8;
  border-radius: 999px;
  color: #79b8e6;
  background: rgba(238, 248, 255, 0.84);
  font-size: 0.72rem !important;
  letter-spacing: 0.4px;
}

body[data-service] .reference-applications-reference .reference-application-card h3 {
  width: 100%;
  max-width: none;
  min-height: 1.3em;
  margin-bottom: 5px !important;
  color: #0b2d54;
  font-size: 1.04rem !important;
  line-height: 1.25;
}

body[data-service] .reference-applications-reference .reference-application-card p {
  width: 100%;
  max-width: none;
  min-height: 2.8em;
  color: #5f7690;
  font-size: 0.79rem !important;
  line-height: 1.45 !important;
}

body[data-service] .reference-applications-reference .reference-application-bottom-line {
  width: 43px;
  height: 3px;
  margin-top: auto;
}

@media (max-width: 520px) {
  body[data-service] .reference-applications-reference .reference-application-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
      'icon title'
      'icon description'
      'line line';
    align-items: start;
    column-gap: 14px;
    row-gap: 5px;
    min-height: 132px;
    padding: 15px 16px 10px !important;
    border-radius: 18px;
  }

  body[data-service] .reference-applications-reference .reference-application-card::before {
    right: 18px;
    left: 18px;
    height: 3px;
  }

  body[data-service] .reference-applications-reference .reference-application-icon {
    grid-area: icon;
    width: 54px;
    height: 54px;
    margin: 2px 0 0;
    border: 1px solid #8dcaf7;
    border-radius: 15px;
    color: #087be8;
    background: linear-gradient(145deg, #f1f9ff 0%, #d9edff 100%);
    box-shadow: 0 8px 16px rgba(30, 125, 199, 0.14), inset 0 0 0 4px rgba(255, 255, 255, 0.58);
    font-size: 1.42rem !important;
  }

  body[data-service] .reference-applications-reference .reference-application-icon i {
    font-size: 1.42rem;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
  }

  body[data-service] .reference-applications-reference .reference-application-card.tone-green .reference-application-icon {
    border-color: #8bdcc6;
    color: #00a979;
    background: linear-gradient(145deg, #f0fff9 0%, #d8f8ee 100%);
    box-shadow: 0 8px 16px rgba(0, 168, 126, 0.13), inset 0 0 0 4px rgba(255, 255, 255, 0.58);
  }

  body[data-service] .reference-applications-reference .reference-application-card.tone-purple .reference-application-icon {
    border-color: #c2adff;
    color: #7041e8;
    background: linear-gradient(145deg, #faf7ff 0%, #ece3ff 100%);
    box-shadow: 0 8px 16px rgba(112, 65, 232, 0.13), inset 0 0 0 4px rgba(255, 255, 255, 0.58);
  }

  body[data-service] .reference-applications-reference .reference-application-card.tone-orange .reference-application-icon {
    border-color: #ffc887;
    color: #ef8612;
    background: linear-gradient(145deg, #fffaf2 0%, #ffedda 100%);
    box-shadow: 0 8px 16px rgba(239, 134, 18, 0.13), inset 0 0 0 4px rgba(255, 255, 255, 0.58);
  }

  body[data-service] .reference-applications-reference .reference-application-card.tone-pink .reference-application-icon {
    border-color: #f3b3d3;
    color: #db3e8c;
    background: linear-gradient(145deg, #fff7fb 0%, #ffe5f2 100%);
    box-shadow: 0 8px 16px rgba(219, 62, 140, 0.13), inset 0 0 0 4px rgba(255, 255, 255, 0.58);
  }

  body[data-service] .reference-applications-reference .reference-application-number {
    top: 15px;
    right: 15px;
    width: 33px;
    height: 23px;
    font-size: 0.65rem !important;
  }

  body[data-service] .reference-applications-reference .reference-application-card h3 {
    grid-area: title;
    width: auto;
    min-height: 0;
    margin: 4px 34px 0 0 !important;
    font-size: 0.93rem !important;
    line-height: 1.22;
  }

  body[data-service] .reference-applications-reference .reference-application-card p {
    grid-area: description;
    width: auto;
    min-height: 0;
    margin: 0;
    font-size: 0.71rem !important;
    line-height: 1.4 !important;
  }

  body[data-service] .reference-applications-reference .reference-application-bottom-line {
    grid-area: line;
    width: 42px;
    height: 3px;
    justify-self: center;
    margin: 5px auto 0;
  }
}

/* Premium timeline cards with the icon kept inside the card. */
body[data-service] .reference-process-reference.reference-process-reference .reference-process-grid {
  gap: 38px;
  margin-top: 58px !important;
}

body[data-service] .reference-process-card.reference-process-card {
  position: relative;
  min-height: 236px;
  padding: 22px 20px 20px;
  border: 1px solid #cfe5f5;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 12px 25px rgba(30, 100, 153, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body[data-service] .reference-process-card.reference-process-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #138ced, #72d4f5);
}

body[data-service] .reference-process-card.reference-process-card:hover {
  border-color: #8fc9ed;
  box-shadow: 0 18px 32px rgba(30, 100, 153, 0.14);
  transform: translateY(-5px);
}

body[data-service] .reference-process-card.tone-green.reference-process-card::before {
  background: linear-gradient(90deg, #00aa7e, #72ddbd);
}

body[data-service] .reference-process-card.tone-purple.reference-process-card::before {
  background: linear-gradient(90deg, #7041e8, #b18fff);
}

body[data-service] .reference-process-card.tone-orange.reference-process-card::before {
  background: linear-gradient(90deg, #f5820b, #ffc16e);
}

body[data-service] .reference-process-number.reference-process-number {
  display: none;
}

body[data-service] .reference-process-icon.reference-process-icon {
  position: relative;
  top: auto;
  left: auto;
  width: 68px;
  height: 68px;
  margin: 0 auto 15px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 20px;
  color: #087be8;
  background: linear-gradient(145deg, #f1f8ff 0%, #d7ebff 100%);
  box-shadow: 0 12px 22px rgba(30, 115, 188, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  font-size: 1.48rem;
  transform: none;
}

body[data-service] .reference-process-icon.reference-process-icon::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 14px;
  pointer-events: none;
}

body[data-service] .reference-process-icon.reference-process-icon i {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(30, 90, 150, 0.12);
}

body[data-service] .reference-process-card.tone-green .reference-process-icon.reference-process-icon {
  color: #008f6b;
  background: linear-gradient(145deg, #f0fcf7 0%, #d1f3e6 100%);
  border-color: #a9e4d0;
}

body[data-service] .reference-process-card.tone-purple .reference-process-icon.reference-process-icon {
  color: #7043d4;
  background: linear-gradient(145deg, #faf7ff 0%, #e8dcff 100%);
  border-color: #ccbaff;
}

body[data-service] .reference-process-card.tone-orange .reference-process-icon.reference-process-icon {
  color: #d56b08;
  background: linear-gradient(145deg, #fff9ef 0%, #ffe5c6 100%);
  border-color: #ffd29e;
}

/* Crisp fallback symbols keep workflow icons readable without an icon-font request. */
body[data-service].service-icons-fallback .reference-process-icon .fa-clipboard-check::before {
  content: "\2713" !important;
}

body[data-service].service-icons-fallback .reference-process-icon .fa-compass-drafting::before {
  content: "\2316" !important;
}

body[data-service].service-icons-fallback .reference-process-icon .fa-gears::before {
  content: "\2699" !important;
}

body[data-service].service-icons-fallback .reference-process-icon .fa-file-lines::before {
  content: "\25A4" !important;
}

body[data-service].service-icons-fallback .reference-process-icon .fa-lightbulb::before {
  content: "\2726" !important;
}

body[data-service] .reference-process-card.reference-process-card h3 {
  max-width: 230px;
  margin: 0 auto 10px;
  color: #071d3e;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.25;
}

body[data-service] .reference-process-card.reference-process-card p {
  max-width: 230px;
  margin: 0 auto;
  color: #5d7590;
  font-size: 0.76rem;
  line-height: 1.48;
}

body[data-service] .reference-process-card.reference-process-card .reference-process-bottom-line {
  width: 48px;
  height: 3px;
  margin: auto auto 0;
}

body[data-service] .reference-process-arrow.reference-process-arrow {
  top: 50%;
  right: -31px;
  width: 27px;
  height: 27px;
  border: 1px solid #b8d9f4;
  border-radius: 50%;
  color: #087be8;
  background: #ffffff;
  box-shadow: 0 7px 15px rgba(49, 112, 187, 0.14);
  font-size: 0.68rem;
  transform: translateY(-50%);
}

/* Field outcome icons: crisp, compact tiles that remain readable without icon-font loading. */
body[data-service] .reference-overview-benefit-icon {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58), 0 8px 16px rgba(20, 87, 135, 0.12);
}

body[data-service] .reference-overview-benefit-icon i {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
}

body[data-service] .reference-overview-benefit-icon.tone-blue {
  color: #1167d8;
  background: linear-gradient(145deg, #f0f7ff 0%, #d9ebff 100%);
  border-color: #a6ceff;
}

body[data-service] .reference-overview-benefit-icon.tone-green {
  color: #008f6b;
  background: linear-gradient(145deg, #effcf7 0%, #d0f3e6 100%);
  border-color: #9fdfca;
}

body[data-service] .reference-overview-benefit-icon.tone-orange {
  color: #d56b08;
  background: linear-gradient(145deg, #fff8ed 0%, #ffe5c5 100%);
  border-color: #ffd09a;
}

body[data-service] .reference-overview-benefit-icon.tone-purple {
  color: #7043d4;
  background: linear-gradient(145deg, #f8f3ff 0%, #e8dcff 100%);
  border-color: #c9b3ff;
}

/* Reliable fallback glyphs for the field-outcome icons when Font Awesome is unavailable. */
body[data-service].service-icons-fallback .reference-overview-benefit-icon .fa-crosshairs::before {
  content: "\25CE" !important;
}

body[data-service].service-icons-fallback .reference-overview-benefit-icon .fa-cube::before {
  content: "\2B22" !important;
}

body[data-service].service-icons-fallback .reference-overview-benefit-icon .fa-leaf::before {
  content: "\2747" !important;
}

body[data-service].service-icons-fallback .reference-overview-benefit-icon .fa-stopwatch::before {
  content: "\23F1" !important;
}

@media (max-width: 640px) {
  body[data-service] .reference-overview-benefit-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 1.08rem;
  }
}

@media (max-width: 900px) {
  body[data-service] .reference-process-card.reference-process-card {
    min-height: 222px;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-process-reference.reference-process-reference .reference-process-grid {
    margin-top: 52px !important;
  }

  body[data-service] .reference-process-card.reference-process-card {
    min-height: 210px;
    padding: 20px 18px 18px;
  }

  body[data-service] .reference-process-icon.reference-process-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
  }

  body[data-service] .reference-process-arrow.reference-process-arrow {
    display: none;
  }
}

body[data-service] .reference-process-reference {
  padding: 72px 0 82px;
  background:
    radial-gradient(circle at 4% 18%, rgba(36, 143, 239, 0.14), transparent 25%),
    radial-gradient(circle at 96% 82%, rgba(141, 205, 255, 0.18), transparent 27%),
    linear-gradient(180deg, #fbfdff 0%, #f2f9ff 100%);
}

body[data-service] .reference-process-reference h2 {
  width: min(1080px, 100%);
  margin: 16px auto 12px;
  font-family: inherit;
  font-size: clamp(2.15rem, 3.1vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -1.2px;
  text-wrap: balance;
}

body[data-service] .reference-process-reference .reference-section-intro {
  max-width: 720px;
  margin: 0 auto;
  color: #536b87;
  font-size: 0.98rem;
  line-height: 1.55;
}

body[data-service] .reference-process-reference .reference-process-grid {
  gap: 44px;
  margin-top: 66px;
}

body[data-service] .reference-process-card {
  min-height: 258px;
  padding: 78px 24px 22px;
  border: 1px solid rgba(110, 183, 243, 0.44);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(34, 105, 157, 0.09);
}

body[data-service] .reference-process-card h3 {
  max-width: 240px;
  margin: 9px 0 11px;
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.22;
}

body[data-service] .reference-process-card p {
  max-width: 230px;
  color: #5a718c;
  font-size: 0.8rem;
  line-height: 1.5;
}

body[data-service] .reference-process-icon {
  width: 94px;
  height: 94px;
  border: 1px solid rgba(99, 174, 240, 0.5);
  box-shadow: 0 12px 24px rgba(30, 115, 188, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

body[data-service] .reference-process-arrow {
  right: -36px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(105, 145, 255, 0.52);
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(49, 112, 187, 0.12);
}

@media (max-width: 1100px) {
  body[data-service] .reference-process-reference .reference-process-grid {
    gap: 30px;
    margin-top: 58px;
  }
}

@media (max-width: 520px) {
  body[data-service] .reference-process-reference {
    padding: 58px 0 64px;
  }

  body[data-service] .reference-process-reference h2 {
    width: 100%;
    font-size: 2rem;
    letter-spacing: -0.6px;
  }

  body[data-service] .reference-process-reference .reference-process-grid {
    margin-top: 54px;
  }
}

/* Final home hero overrides: keep the split reference design above legacy rules. */
body.home-page .hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
  height: clamp(650px, calc(100vh - 82px), 760px);
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 8% 84%, rgba(217, 194, 157, 0.22), transparent 35%),
    linear-gradient(115deg, #fbf9f4 0%, #f7f4ec 100%);
}

body.home-page .hero-banner::before,
body.home-page .hero-banner::after {
  display: none;
}

body.home-page .hero-banner .hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.home-page .hero-intro-layout {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 clamp(36px, 7.2vw, 148px);
}

body.home-page .hero-heading-content {
  width: min(100%, 700px);
}

body.home-page .hero-badge-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.home-page .hero-badge-pill::before {
  width: 28px;
  height: 1px;
  background: #c66b43;
  content: "";
}

body.home-page .badge-title-txt {
  color: #ba623b;
  font-size: 0.75rem;
  letter-spacing: 2px;
}

body.home-page .hero-main-title {
  max-width: 700px;
  margin: 0;
  color: #102c3d;
  font-size: clamp(3.3rem, 4.35vw, 4.6rem);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.055em;
  text-shadow: none;
}

body.home-page .hero-main-title br {
  display: block;
}

body.home-page .hero-italic-line {
  color: #102c3d;
  font-size: 0.84em;
}

body.home-page .hero-side-copy {
  width: min(100%, 500px);
  margin: 23px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.home-page .hero-side-eyebrow {
  display: none;
}

body.home-page .hero-subtext-para {
  max-width: 510px;
  margin: 0 0 22px;
  color: #566773;
  font-size: 1.05rem;
  line-height: 1.6;
}

body.home-page .hero-buttons-flex {
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto;
  margin: 0;
}

body.home-page .btn-hero-explore {
  min-height: 50px;
  padding: 13px 27px;
  border: 0;
  background: #0879e8;
  box-shadow: 0 9px 23px rgba(0, 103, 213, 0.22);
}

body.home-page .btn-hero-talk {
  min-height: 50px;
  padding: 12px 23px;
  border: 1px solid #71828c;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: none;
}

body.home-page .btn-hero-talk i {
  display: inline-grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.72rem;
}

body.home-page .hero-banner .hero-stats-bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  width: min(100%, 700px);
  max-width: 700px !important;
  gap: 0 !important;
  margin: 42px 0 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.home-page .hero-stats-bar .stat-item {
  min-width: 0;
  gap: 10px;
  padding: 5px 14px;
  border-right: 1px solid rgba(191, 119, 75, 0.28);
}

body.home-page .hero-stats-bar .stat-item:first-child {
  padding-left: 0;
}

body.home-page .hero-stats-bar .stat-item:last-child {
  border-right: 0;
}

body.home-page .hero-stats-bar .stat-item:not(:last-child)::after {
  display: none !important;
}

body.home-page .hero-stats-bar .stat-icon-circle {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #102c3d;
  font-size: 1.35rem;
}

body.home-page .hero-stats-bar .stat-meta .num,
body.home-page .hero-stats-bar .stat-meta .txt-bold {
  color: #102c3d !important;
  font-size: 1.02rem;
  font-weight: 800;
}

body.home-page .hero-stats-bar .stat-meta .lbl {
  color: #5d6c73 !important;
  font-size: 0.61rem;
  letter-spacing: 0.45px;
}

body.home-page .hero-video-bg-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  left: auto;
  order: initial;
  width: 55vw;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 0;
  clip-path: ellipse(104% 120% at 100% 50%);
  background: #0b3b55;
  box-shadow: none;
  transform: translateY(-50%);
  z-index: 1;
}

body.home-page .hero-video-bg {
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: none;
  z-index: 1;
}

body.home-page .hero-video-overlay {
  background: transparent !important;
}

body.home-page .hero-media-label,
body.home-page .hero-media-caption,
body.home-page .hero-media-side-note {
  display: none;
}

@media (min-width: 768px) and (max-width: 1800px) {
  body.home-page .hero-banner {
    height: clamp(620px, calc(100vh - 120px), 700px);
  }

  body.home-page .hero-intro-layout {
    padding-right: 35px;
    padding-left: 35px;
  }

  body.home-page .hero-heading-content {
    width: 40%;
  }

  body.home-page .hero-main-title {
    font-size: clamp(2.5rem, 4.4vw, 3.6rem);
  }

  body.home-page .hero-side-copy {
    width: 40%;
    margin-top: 18px;
  }

  body.home-page .hero-subtext-para {
    font-size: 0.95rem;
  }

  body.home-page .hero-buttons-flex {
    flex-wrap: wrap;
    gap: 10px;
  }

  body.home-page .hero-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 40%;
    margin-top: 24px;
    row-gap: 8px;
  }

  body.home-page .hero-stats-bar .stat-item {
    padding-left: 0;
    border-right: 0;
  }

  body.home-page .hero-video-bg-wrap {
    width: 52vw;
    clip-path: ellipse(104% 120% at 100% 50%);
  }
}

@media (max-width: 767px) {
  body.home-page .hero-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 0;
    padding: 46px 0 30px;
  }

  body.home-page .hero-banner .hero-container {
    order: 1;
    width: 100%;
    max-width: 100%;
    padding-top: 0;
  }

  body.home-page .hero-intro-layout {
    width: calc(100% - 56px);
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
  }

  body.home-page .hero-heading-content {
    width: 100%;
  }

  body.home-page .hero-main-title {
    max-width: 820px;
    font-size: clamp(3rem, 6.2vw, 4.5rem);
  }

  body.home-page .hero-side-copy {
    width: 100%;
    max-width: 620px;
    margin-top: 18px;
  }

  body.home-page .hero-banner .hero-stats-bar {
    width: 100%;
    max-width: 720px !important;
    margin-top: 30px;
  }

  body.home-page .hero-video-bg-wrap {
    position: relative;
    inset: auto;
    order: 2;
    width: calc(100% - 48px);
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 32px auto 0;
    clip-path: none;
    border-radius: 22px;
    overflow: hidden;
    transform: none;
  }

  body.home-page .hero-video-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 700px) {
  body.home-page .hero-banner {
    padding: 34px 0 22px;
  }

  body.home-page .hero-intro-layout {
    width: calc(100% - 36px);
  }

  body.home-page .hero-badge-pill {
    margin-bottom: 15px;
  }

  body.home-page .badge-title-txt {
    font-size: 0.64rem;
    letter-spacing: 1.3px;
  }

  body.home-page .hero-main-title {
    font-size: clamp(2.35rem, 9vw, 3.65rem);
    line-height: 1.03;
  }

  body.home-page .hero-italic-line {
    font-size: 0.88em;
  }

  body.home-page .hero-side-copy {
    margin-top: 16px;
  }

  body.home-page .hero-subtext-para {
    margin-bottom: 16px;
    font-size: 0.9rem;
  }

  body.home-page .hero-buttons-flex {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 9px;
  }

  body.home-page .btn-hero-explore,
  body.home-page .btn-hero-talk {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  body.home-page .hero-banner .hero-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 0 !important;
    margin-top: 24px;
  }

  body.home-page .hero-stats-bar .stat-item {
    padding: 6px 8px;
    border-right: 0;
  }

  body.home-page .hero-stats-bar .stat-item:first-child {
    padding-left: 8px;
  }

  body.home-page .hero-stats-bar .stat-icon-circle {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 1.1rem;
  }

  body.home-page .hero-video-bg-wrap {
    width: calc(100% - 28px);
    margin-top: 24px;
    border-radius: 18px;
  }
}

@media (max-width: 390px) {
  body.home-page .hero-buttons-flex {
    flex-direction: column;
  }

  body.home-page .btn-hero-explore,
  body.home-page .btn-hero-talk {
    width: 100%;
    justify-content: center;
  }
}

/* Final homepage hero cascade: the last rule wins over legacy iterations above. */
body.home-page .hero-banner {
  min-height: 680px !important;
  height: clamp(680px, calc(100svh - 138px), 790px) !important;
  background: radial-gradient(circle at 8% 16%, rgba(255, 255, 255, .9), transparent 29%), radial-gradient(circle at 18% 92%, rgba(198, 107, 67, .09), transparent 28%), #f7f3ec !important;
}

body.home-page .hero-banner .hero-container {
  width: min(calc(100% - 112px), 1480px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.home-page .hero-intro-layout {
  display: block !important;
  width: min(100%, 710px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home-page .hero-heading-content { width: 100% !important; }

body.home-page .hero-main-title {
  max-width: 710px !important;
  font-size: clamp(3.25rem, 4.5vw, 5.15rem) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
}

body.home-page .hero-italic-line { font-size: .84em !important; line-height: 1.05 !important; }

body.home-page .hero-side-copy {
  width: min(100%, 500px) !important;
  margin-top: 27px !important;
}

body.home-page .hero-subtext-para {
  max-width: 470px !important;
  margin-bottom: 24px !important;
  color: #53656b !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

body.home-page .hero-buttons-flex { gap: 12px !important; }

body.home-page .btn-hero-explore,
body.home-page .btn-hero-talk {
  min-height: 52px !important;
  border-radius: 10px !important;
  font-size: .88rem !important;
}

body.home-page .btn-hero-explore {
  padding: 13px 21px 13px 23px !important;
  background: #0b3035 !important;
  box-shadow: 0 13px 24px rgba(11, 48, 53, .16) !important;
}

body.home-page .btn-hero-talk {
  padding: 12px 19px !important;
  border-color: rgba(11, 48, 53, .34) !important;
  color: #0b3035 !important;
  background: rgba(255, 255, 255, .45) !important;
}

body.home-page .hero-banner .hero-stats-bar {
  width: min(100%, 700px) !important;
  max-width: 700px !important;
  margin-top: 48px !important;
}

body.home-page .hero-video-bg-wrap {
  top: 50% !important;
  right: clamp(24px, 4vw, 72px) !important;
  left: auto !important;
  width: min(51vw, 800px) !important;
  height: min(72vh, 610px) !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border: 8px solid rgba(255, 255, 255, .7) !important;
  border-radius: 34px !important;
  clip-path: none !important;
  overflow: hidden !important;
  box-shadow: 0 26px 65px rgba(22, 53, 52, .18), 0 3px 0 rgba(198, 107, 67, .25) !important;
  transform: translateY(-50%) !important;
}

body.home-page .hero-banner .hero-video-bg {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  filter: saturate(.96) contrast(1.03) !important;
}

body.home-page .hero-banner .hero-video-overlay {
  background: linear-gradient(90deg, rgba(4, 20, 24, .54), transparent 43%), linear-gradient(0deg, rgba(4, 20, 24, .67), transparent 38%, rgba(4, 20, 24, .08)) !important;
}

body.home-page .hero-media-label,
body.home-page .hero-media-caption,
body.home-page .hero-media-side-note {
  display: block !important;
  position: absolute !important;
  z-index: 3 !important;
}

body.home-page .hero-media-label {
  top: 24px !important;
  left: 24px !important;
  padding: 9px 13px !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 999px !important;
  background: rgba(8, 30, 33, .32) !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  backdrop-filter: blur(10px) !important;
}

body.home-page .hero-media-label i { margin-right: 7px; color: #e2a16f; }

body.home-page .hero-media-caption {
  bottom: 27px !important;
  left: 27px !important;
  padding-left: 16px !important;
  border-left: 1px solid #e2a16f !important;
}

body.home-page .hero-media-caption p {
  margin: 0 0 11px !important;
  color: #fff !important;
  font-family: Georgia, serif !important;
  font-size: clamp(1.45rem, 2.1vw, 2rem) !important;
  font-style: italic !important;
  line-height: 1.14 !important;
}

body.home-page .hero-media-caption a { color: #fff !important; font-size: .77rem !important; font-weight: 700 !important; }

body.home-page .hero-media-side-note {
  top: 50% !important;
  right: 26px !important;
  width: 190px !important;
  padding-left: 14px !important;
  border-left: 1px solid rgba(226, 161, 111, .8) !important;
  color: rgba(255, 255, 255, .9) !important;
  transform: translateY(-50%) !important;
}

body.home-page .hero-media-side-note span { color: #e2a16f; font-size: .57rem; font-weight: 800; letter-spacing: 1.3px; }
body.home-page .hero-media-side-note p { margin: 10px 0 15px; color: #fff; font-family: Georgia, serif; font-size: 1.2rem; font-style: italic; line-height: 1.22; }
body.home-page .hero-media-side-note small { display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .72); font-size: .52rem; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; }
body.home-page .hero-media-side-note small i { width: 4px; height: 4px; border-radius: 50%; background: #e2a16f; }

@media (max-width: 1120px) {
  body.home-page .hero-banner { height: auto !important; min-height: 0 !important; padding: 68px 0 48px !important; }
  body.home-page .hero-banner .hero-container { width: calc(100% - 64px) !important; }
  body.home-page .hero-intro-layout { width: 100% !important; }
  body.home-page .hero-video-bg-wrap { position: relative !important; top: auto !important; right: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; margin: 54px auto 0 !important; transform: none !important; }
}

@media (max-width: 700px) {
  body.home-page .hero-banner { padding: 44px 0 30px !important; }
  body.home-page .hero-banner .hero-container { width: calc(100% - 40px) !important; }
  body.home-page .hero-main-title { font-size: clamp(2.65rem, 11vw, 4rem) !important; }
  body.home-page .hero-side-copy { margin-top: 21px !important; }
  body.home-page .hero-subtext-para { font-size: .9rem !important; }
  body.home-page .hero-buttons-flex { align-items: stretch !important; flex-wrap: wrap !important; }
  body.home-page .btn-hero-explore, body.home-page .btn-hero-talk { min-height: 46px !important; padding: 10px 14px !important; font-size: .78rem !important; }
  body.home-page .hero-banner .hero-stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 15px 0 !important; margin-top: 32px !important; }
  body.home-page .hero-stats-bar .stat-item { padding: 5px 8px !important; border-right: 0 !important; }
  body.home-page .hero-video-bg-wrap { min-height: 300px !important; margin-top: 38px !important; border-width: 5px !important; border-radius: 22px !important; }
  body.home-page .hero-media-label { top: 15px !important; left: 15px !important; padding: 7px 10px !important; font-size: .5rem !important; }
  body.home-page .hero-media-caption { bottom: 17px !important; left: 17px !important; padding-left: 11px !important; }
  body.home-page .hero-media-caption p { margin-bottom: 6px !important; font-size: clamp(1.05rem, 5vw, 1.4rem) !important; }
  body.home-page .hero-media-caption a { font-size: .65rem !important; }
  body.home-page .hero-media-side-note { display: none !important; }
}

/* Reference-match hero: full-bleed groundwater visual with a blue content fade. */
body.home-page .hero-banner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 670px !important;
  height: clamp(670px, calc(100svh - 136px), 780px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #dff2ff !important;
}

body.home-page .hero-banner .hero-video-bg-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: hidden !important;
  background: #dff2ff !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 1 !important;
}

body.home-page .hero-banner .hero-video-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center right !important;
  transform: none !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

body.home-page .hero-banner .hero-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(232, 247, 255, .82) 0%, rgba(222, 243, 255, .76) 21%, rgba(210, 238, 255, .56) 30%, rgba(210, 238, 255, .2) 40%, rgba(210, 238, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .15), transparent 22%, transparent 82%, rgba(203, 233, 252, .46)) !important;
  z-index: 2 !important;
}

body.home-page .hero-banner .hero-container {
  position: relative !important;
  z-index: 5 !important;
  width: min(calc(100% - 152px), 1760px) !important;
  max-width: 1760px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.home-page .hero-intro-layout {
  width: min(100%, 760px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home-page .hero-heading-content { width: 100% !important; }

body.home-page .hero-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 0 25px !important;
  padding: 8px 15px !important;
  border: 1px solid rgba(83, 182, 237, .5) !important;
  border-radius: 999px !important;
  background: rgba(228, 246, 255, .72) !important;
  box-shadow: 0 8px 22px rgba(47, 143, 207, .08) !important;
  backdrop-filter: blur(8px) !important;
}

body.home-page .hero-badge-pill::before { display: none !important; }

body.home-page .badge-pulse-indicator {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 50% !important;
  background: #16b982 !important;
  box-shadow: 0 0 0 4px rgba(22, 185, 130, .11) !important;
}

body.home-page .badge-title-txt {
  color: #0085cb !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.15px !important;
}

body.home-page .hero-main-title {
  max-width: 720px !important;
  margin: 0 !important;
  color: #09294d !important;
  font-size: clamp(3.25rem, 4.25vw, 5rem) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -.058em !important;
  text-shadow: 0 2px 18px rgba(255, 255, 255, .25) !important;
}

body.home-page .hero-main-title br { display: block !important; }
body.home-page .hero-italic-line { font: inherit !important; color: inherit !important; }
body.home-page .text-water-gradient {
  display: inline !important;
  color: #087ddd !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}

body.home-page .hero-side-copy {
  width: 100% !important;
  max-width: 530px !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.home-page .hero-subtext-para {
  max-width: 500px !important;
  margin: 0 0 27px !important;
  color: #304c68 !important;
  font-size: 1.03rem !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
}

body.home-page .hero-buttons-flex { gap: 16px !important; margin: 0 !important; }

body.home-page .btn-hero-explore,
body.home-page .btn-hero-talk {
  min-height: 51px !important;
  border-radius: 999px !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
}

body.home-page .btn-hero-explore {
  padding: 13px 21px 13px 27px !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  background: linear-gradient(135deg, #108cf2, #006bd4) !important;
  box-shadow: 0 12px 25px rgba(0, 115, 221, .29) !important;
}

body.home-page .btn-hero-explore:hover {
  background: linear-gradient(135deg, #087ddd, #005dbd) !important;
  transform: translateY(-2px) !important;
}

body.home-page .btn-hero-talk {
  padding: 12px 22px !important;
  border: 1px solid rgba(43, 98, 139, .42) !important;
  color: #0b3154 !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 7px 18px rgba(49, 118, 165, .08) !important;
}

body.home-page .btn-hero-talk:hover {
  border-color: #087ddd !important;
  color: #087ddd !important;
  background: #fff !important;
  transform: translateY(-2px) !important;
}

body.home-page .hero-banner .hero-stats-bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  width: min(100%, 700px) !important;
  max-width: 700px !important;
  gap: 0 !important;
  margin: 44px 0 0 !important;
  padding: 15px 20px !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, .89) !important;
  box-shadow: 0 14px 32px rgba(42, 106, 159, .15) !important;
  backdrop-filter: blur(15px) !important;
}

body.home-page .hero-stats-bar .stat-item {
  min-width: 0 !important;
  gap: 10px !important;
  padding: 6px 14px !important;
  border-right: 1px solid rgba(156, 189, 215, .62) !important;
}

body.home-page .hero-stats-bar .stat-item:first-child { padding-left: 0 !important; }
body.home-page .hero-stats-bar .stat-item:last-child { border-right: 0 !important; padding-right: 0 !important; }
body.home-page .hero-stats-bar .stat-item:not(:last-child)::after { display: none !important; }

body.home-page .hero-stats-bar .stat-icon-circle {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #138cf1, #086bd4) !important;
  color: #fff !important;
  box-shadow: 0 7px 15px rgba(0, 115, 221, .24) !important;
  font-size: 1rem !important;
}

body.home-page .hero-stats-bar .stat-meta .num,
body.home-page .hero-stats-bar .stat-meta .txt-bold {
  color: #102f50 !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}

body.home-page .hero-stats-bar .stat-meta .lbl {
  color: #657d93 !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  letter-spacing: .42px !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

body.home-page .hero-media-label,
body.home-page .hero-media-caption,
body.home-page .hero-media-side-note { display: none !important; }

@media (max-width: 1120px) {
  body.home-page .hero-banner { min-height: 650px !important; height: auto !important; padding: 78px 0 56px !important; }
  body.home-page .hero-banner .hero-container { width: calc(100% - 72px) !important; }
  body.home-page .hero-intro-layout { width: min(100%, 720px) !important; }
  body.home-page .hero-banner .hero-video-bg-wrap { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  body.home-page .hero-banner .hero-video-overlay { background: linear-gradient(90deg, rgba(232, 247, 255, .82) 0%, rgba(222, 243, 255, .72) 34%, rgba(210, 238, 255, .16) 65%, transparent 100%) !important; }
}

@media (max-width: 700px) {
  body.home-page .hero-banner { min-height: 680px !important; padding: 55px 0 34px !important; }
  body.home-page .hero-banner .hero-container { width: calc(100% - 40px) !important; }
  body.home-page .hero-main-title { font-size: clamp(2.55rem, 10.5vw, 4rem) !important; line-height: 1.04 !important; }
  body.home-page .hero-badge-pill { margin-bottom: 19px !important; padding: 7px 12px !important; }
  body.home-page .badge-title-txt { font-size: .61rem !important; letter-spacing: .75px !important; }
  body.home-page .hero-subtext-para { max-width: 360px !important; font-size: .88rem !important; }
  body.home-page .hero-buttons-flex { gap: 9px !important; }
  body.home-page .btn-hero-explore, body.home-page .btn-hero-talk { min-height: 45px !important; padding: 10px 14px !important; font-size: .75rem !important; }
  body.home-page .hero-banner .hero-stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 0 !important; margin-top: 29px !important; padding: 13px !important; }
  body.home-page .hero-stats-bar .stat-item, body.home-page .hero-stats-bar .stat-item:first-child { padding: 5px 6px !important; border-right: 0 !important; }
  body.home-page .hero-stats-bar .stat-icon-circle { width: 31px !important; height: 31px !important; flex-basis: 31px !important; font-size: .85rem !important; }
  body.home-page .hero-stats-bar .stat-meta .num, body.home-page .hero-stats-bar .stat-meta .txt-bold { font-size: .91rem !important; }
  body.home-page .hero-stats-bar .stat-meta .lbl { font-size: .5rem !important; }
}

/* Video framing fix: preserve the complete illustration inside the hero. */
body.home-page .hero-banner .hero-video-bg-wrap {
  background: #dff2ff !important;
}

body.home-page .hero-banner .hero-video-bg {
  object-fit: contain !important;
  object-position: center center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body.home-page .hero-main-title {
  max-width: 820px !important;
  font-size: clamp(3rem, 3.25vw, 3.7rem) !important;
  white-space: nowrap !important;
}

body.home-page .hero-main-title br { display: block !important; }

@media (max-width: 700px) {
  body.home-page .hero-main-title {
    max-width: 100% !important;
    font-size: clamp(2.45rem, 10.5vw, 3.75rem) !important;
    white-space: normal !important;
  }
}

/* Final visual correction: remove letterboxing and restore balanced vertical rhythm. */
body.home-page .hero-banner {
  align-items: center !important;
}

body.home-page .hero-banner .hero-video-bg {
  object-fit: fill !important;
  object-position: center !important;
}

body.home-page .hero-banner .hero-container {
  align-self: center !important;
}

body.home-page .hero-intro-layout {
  position: relative !important;
  top: 0 !important;
  transform: translateY(160px) !important;
}

@media (max-width: 700px) {
  body.home-page .hero-intro-layout {
    transform: none !important;
  }
}

/* Technical capability icons: stronger visual hierarchy and dependable fallback glyphs. */
body[data-service] .reference-technical-list i {
  width: 42px;
  height: 42px;
  border: 1px solid #a9d9f7;
  border-radius: 14px;
  color: #087fe2;
  background: linear-gradient(145deg, #f1faff 0%, #d7efff 100%);
  box-shadow: 0 8px 16px rgba(25, 143, 225, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
  line-height: 1;
}

body[data-service] .reference-technical-list > div:nth-child(2) i {
  color: #008f6b;
  border-color: #a7e4d0;
  background: linear-gradient(145deg, #f0fcf7 0%, #d0f3e6 100%);
}

body[data-service] .reference-technical-list > div:nth-child(3) i {
  color: #7043d4;
  border-color: #cdbbff;
  background: linear-gradient(145deg, #faf7ff 0%, #e9ddff 100%);
}

body[data-service] .reference-technical-list > div:nth-child(4) i {
  color: #d56b08;
  border-color: #ffd29e;
  background: linear-gradient(145deg, #fff9ef 0%, #ffe5c6 100%);
}

body[data-service] .reference-technical-list > div:nth-child(5) i {
  color: #c33b82;
  border-color: #f3bfd9;
  background: linear-gradient(145deg, #fff5fa 0%, #ffe3f0 100%);
}

body[data-service] .reference-technical-stats i {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(91, 226, 255, 0.72);
  border-radius: 11px;
  color: #63e5ff;
  background: linear-gradient(145deg, rgba(14, 133, 177, 0.72), rgba(4, 52, 94, 0.96));
  box-shadow: 0 7px 14px rgba(0, 146, 210, 0.22), inset 0 0 0 2px rgba(255, 255, 255, 0.07);
  font-size: 0.76rem;
  line-height: 1;
}

body[data-service].service-icons-fallback .reference-technical-list .fa-flask::before {
  content: "\2697" !important;
}

body[data-service].service-icons-fallback .reference-technical-list .fa-chart-line::before {
  content: "\2197" !important;
}

body[data-service].service-icons-fallback .reference-technical-list .fa-microchip::before {
  content: "\25C8" !important;
}

body[data-service].service-icons-fallback .reference-technical-list .fa-ruler-vertical::before {
  content: "\2195" !important;
}

body[data-service].service-icons-fallback .reference-technical-list .fa-file-lines::before {
  content: "\25A4" !important;
}

body[data-service].service-icons-fallback .reference-technical-stats .fa-flask-vial::before {
  content: "\2697" !important;
}

body[data-service].service-icons-fallback .reference-technical-stats .fa-layer-group::before {
  content: "\25A6" !important;
}

body[data-service].service-icons-fallback .reference-technical-stats .fa-shield-halved::before {
  content: "\25C6" !important;
}

body[data-service].service-icons-fallback .reference-technical-stats .fa-file-lines::before {
  content: "\25A4" !important;
}

/* Keep the floating technical stats icon and copy in separate, non-overlapping columns. */
body[data-service] .reference-technical-stats span {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  overflow: hidden;
}

body[data-service] .reference-technical-stats span > i {
  grid-column: 1;
  grid-row: 1 / span 2;
  place-self: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
}

body[data-service] .reference-technical-stats span > b,
body[data-service] .reference-technical-stats span > small {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-service] .reference-technical-stats span > b {
  align-self: end;
}

body[data-service] .reference-technical-stats span > small {
  align-self: start;
  margin-top: 3px;
}

body[data-service] .reference-technical-stats span:nth-child(2) > i {
  color: #71f2c5;
  border-color: rgba(113, 242, 197, 0.72);
}

body[data-service] .reference-technical-stats span:nth-child(3) > i {
  color: #c7a8ff;
  border-color: rgba(199, 168, 255, 0.72);
}

body[data-service] .reference-technical-stats span:nth-child(4) > i {
  color: #ffd08a;
  border-color: rgba(255, 208, 138, 0.72);
}

@media (max-width: 520px) {
  body[data-service] .reference-technical-stats span {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    column-gap: 8px;
  }

  body[data-service] .reference-technical-stats span > i {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
}