/* ============================================================
   THE WEALTH FINDER — MAIN STYLESHEET
   Extracted from Figma design (Node: 9002:6419)
   ============================================================ */

/* ============================
   CSS VARIABLES / DESIGN TOKENS
   ============================ */
:root {
  /* Primary Colors */
  --primary-color: #020E6A;
  --primary-500: #435DFF;
  --primary-600: #1D30FF;
  --primary-200: #CFDBFF;
  --primary-gradient: linear-gradient(67deg, #03159D 10.59%, #4A63FD 93.98%);
  --primary-gradient-reverse: linear-gradient(62deg, #03159D 10.59%, #4A63FD 93.98%);

  /* Neutrals */
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-400: #A3A3A3;
  --neutral-900: #171717;

  /* Slate */
  --slate-200: #E2E8F0;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-950: #020617;

  /* Special */
  --white: #FFFFFF;
  --orange-500: #F97316;

  /* Typography */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Raleway', sans-serif;

  /* Heading 1 */
  --h1-size: 72px;
  --h1-weight: 600;
  --h1-lh: 90px;
  --h1-ls: -1.44px;

  /* Heading 2 */
  --h2-size: 60px;
  --h2-weight: 600;
  --h2-lh: 72px;
  --h2-ls: -1.2px;

  /* Heading 3 */
  --h3-size: 48px;
  --h3-weight: 600;
  --h3-lh: 60px;
  --h3-ls: -0.96px;

  /* Heading 5 */
  --h5-size: 30px;
  --h5-weight: 600;
  --h5-lh: 38px;

  /* Heading 6 */
  --h6-size: 24px;
  --h6-weight: 600;
  --h6-lh: 32px;

  /* Body XL */
  --body-xl-size: 20px;
  --body-xl-weight: 600;
  --body-xl-lh: 30px;

  /* Body LG */
  --body-lg-size: 18px;
  --body-lg-weight: 400;
  --body-lg-lh: 28px;

  /* Body MD */
  --body-md-size: 16px;
  --body-md-weight: 400;
  --body-md-lh: 24px;

  /* Body SM */
  --body-sm-size: 14px;
  --body-sm-weight: 500;
  --body-sm-lh: 20px;

  /* Spacing */
  --container-max: 1480px;
  --container-padding: 220px;
  --section-padding: 160px;
  --section-gap: 60px;

  /* Border Radius */
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --radius-full: 100px;

  /* Transitions */
  --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================
   RESET & BASE
   ============================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

}

body {
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: var(--body-md-weight);
  line-height: var(--body-md-lh);
  color: var(--neutral-900);
  background: var(--white);
  overflow-x: clip;
}

body.menu-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input {
  font-family: inherit;
  border: none;
  outline: none;
}

/* ============================
   CONTAINER
   ============================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  /* responsive horizontal padding: min 28px, up to 220px on large screens */
  padding: 0 clamp(28px, 6vw, 220px);
  width: 100%;
}

/* Override: container for very large screens */
.container {
  max-width: 1920px;
}

/* ============================
   SECTION BADGE (Decorative Label)
   ============================ */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.section-badge.center {
  justify-content: center;
  width: 100%;
}

.badge-arrow {
  display: inline-block;
  width: 25px;
  height: 10px;
}

.badge-arrow:last-child {
  transform: scaleX(1);
}

.badge-text {
  font-size: var(--body-sm-size);
  font-weight: 500;
  line-height: var(--body-sm-lh);
  color: var(--primary-color);
  white-space: nowrap;
}

/* ============================
   BUTTONS — All use ::after for hover
   ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  white-space: nowrap;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dual-arrow icon container */
.btn-icon {
  position: relative;
  width: 14px;
  height: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.btn-icon svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-icon svg:last-child {
  transform: translateX(-200%);
}

.btn:hover .btn-icon svg:first-child {
  transform: translateX(200%);
}

.btn:hover .btn-icon svg:last-child {
  transform: translateX(0);
}

/* Primary Button */
.btn-primary {
  background: var(--primary-gradient);
  color: var(--white);
  border: none;
}

.btn-primary::after {
  background: linear-gradient(67deg, #4A63FD 10.59%, #03159D 93.98%);
}

.btn-primary:hover::after {
  transform: scaleX(1);
}

/* Secondary Button */
.btn-secondary {
  background: transparent;
  border: 1px solid #03159D;
  color: transparent;
  background-image: var(--primary-gradient-reverse);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-secondary svg {
  color: #03159D;
}

.btn-secondary::after {
  background: var(--primary-gradient);
}

.btn-secondary:hover {
  border-color: transparent;
  -webkit-text-fill-color: var(--white);
}

.btn-secondary:hover svg {
  color: var(--white);
}

.btn-secondary:hover svg path {
  stroke: var(--white);
}

.btn-secondary:hover::after {
  transform: scaleX(1);
}

/* Small variant */
.btn-sm {
  padding: 8px 20px;
  font-size: var(--body-sm-size);
}

/* ============================
   HEADER / NAVIGATION
   ============================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 16px;
  transition: var(--transition);
}

.site-header.scrolled {
  background: rgba(245, 245, 245, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  padding: 8px 16px;
}

.header-container {
  max-width: 1888px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: var(--radius-lg);
}

.logo img {
  height: 48px;
  width: auto;
}

/* Nav Links */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius-full);
}

.nav-item>a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--neutral-900);
  transition: var(--transition-fast);
}

.nav-item>a:hover {
  background: rgba(67, 93, 255, 0.08);
  color: var(--primary-color);
}

/* ============================================================
   ABOUT PAGE — Pixel-perfect from Figma (node 8949:7571)
   ============================================================ */

/* Shared container for about sections */
.about-section-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(28px, 11.5vw, 200px);
  width: 100%;
}

/* ---- ABOUT HERO ---- */
.about-hero {
  padding: 16px;
}

.about-hero-wrapper {
  background: #F5F5F5 url(/wp-content/themes/the-wealth-finder/assets/images/faqBG.svg) center bottom;
  background-size: cover;
  border-radius: 30px;
  overflow: hidden;
}

.about-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0px 0px;
  gap: 32px;
}

.about-hero-content {
  text-align: center;
  max-width: 1520px;
  padding-top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.about-hero-content.small {
  max-width: 830px;
}

.about-hero-content.teamHead {
  padding-bottom: 80px;

}

.about-hero-content h1 {
  font-size: clamp(36px, 5vw, var(--h1-size));
  font-weight: var(--h1-weight);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
  color: var(--primary-color);
  max-width: 1320px;
}

.about-hero-subtitle {
  font-size: var(--body-lg-size);
  font-weight: var(--body-lg-weight);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
  max-width: 1050px;
}

.about-sm-title {
  font-size: 28px;
  font-weight: var(--h1-weight);
  line-height: var(--body-lg-lh);
  color: var(--primary-color);
  max-width: 1050px;
}

.about-hero-image {
  width: 100%;
}

.about-hero-image img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ---- ABOUT STATS ---- */
.about-stats {
  background: var(--neutral-100);
  padding: 80px 0;
}

/* Stats grid used inside about-stats (shared stat-card / stat-number) */
.about-stats .stats-grid {
  display: flex;
  gap: 40px;
  align-items: center;
}

.about-stats .stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 12px;
  border-radius: var(--radius-md);
  border-bottom: 2px solid var(--neutral-200);
  text-align: center;
  transition: border-bottom-color 0.35s ease, transform 0.35s ease;
  cursor: pointer;
}

.about-stats .stat-card:hover {
  border-bottom-color: #7084FF;
  transform: translateY(-4px);
}

.about-stats .stat-number {
  font-size: 60px;
  font-weight: 400;
  line-height: 72px;
  letter-spacing: -1.2px;
  color: var(--primary-color);
  white-space: nowrap;
  width: auto;
}

.about-stats .stat-label {
  font-size: var(--body-lg-size);
  font-weight: var(--body-lg-weight);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
}

.about-stats-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(28px, 11.5vw, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  text-align: center;
}

.about-stats-title {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
}

.about-stats-grid {
  display: flex;
  gap: 40px;
  width: 100%;
  white-space: nowrap;
}

.about-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 12px;
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--neutral-200);
  transition: border-bottom-color 0.35s ease, transform 0.35s ease;
  cursor: pointer;
}

.about-stat-item:hover,
.about-stat-item.highlighted {
  border-bottom: 2px solid #7084FF;
}

.about-stat-item:hover {
  transform: translateY(-4px);
}

.about-stat-number {
  font-size: 60px;
  font-weight: 400;
  line-height: 72px;
  letter-spacing: -1.2px;
  color: var(--primary-color);
}

.about-stat-label {
  font-size: var(--body-lg-size);
  font-weight: var(--body-lg-weight);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
}

/* ---- OUR MISSION ---- */
.about-mission {
  padding-top: 160px;
  overflow: hidden;
  position: relative;
  background-color: #FFFF;
  background-image: url(/wp-content/themes/the-wealth-finder/assets/images/about/mission.svg) no-repeat left bottom;
}

.about-mission-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.about-mission-text {
  max-width: 554px;
  flex-shrink: 0;
}

.about-mission-text h2,
.about-whoweare-text h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-bottom: 16px;
}

.about-mission-text p,
.about-whoweare-text p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-bottom: 16px;
}

.about-whoweare-text p:last-child,
.about-mission-text p:last-child {
  margin-bottom: 0;
}

.about-mission-image,
.about-whoweare-image {
  width: 760px;
  height: 600px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-mission-image img,
.about-whoweare-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ---- WHO WE ARE ---- */
.about-whoweare {
  padding: 160px 0;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  background-image: url(/wp-content/themes/the-wealth-finder/assets/images/about/vision.svg) no-repeat right bottom;
}

.about-whoweare-inner {
  display: flex;
  align-items: center;
  gap: 80px;
}

.about-whoweare-text {
  max-width: 554px;
  flex-shrink: 0;
}

.about-whoweare-text strong {
  color: var(--slate-950);
  font-weight: 600;
}

/* ---- WHAT WE DO ---- */
.about-whatwedo {
  background: var(--neutral-100);
  padding: 160px 0;
  overflow: hidden;
}

.about-whatwedo-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
}

.about-whatwedo-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-bottom: 16px;
}

.about-whatwedo-header p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.about-whatwedo-cards {
  display: flex;
  gap: 32px;
}

.about-wwd-card {
  flex: 1;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 32px 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-wwd-card-header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.about-wwd-icon-container {
  border-radius: 16px;
  background: linear-gradient(90deg, #7084FF 0%, #03159D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(207, 231, 255, 0.2);
}

.about-wwd-icon-container img {
  width: 64px;
  height: 64px;
}

.about-wwd-card-header h3 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-lh);
  color: var(--slate-950);
}

.about-wwd-card-intro {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-top: -16px;
}

.about-wwd-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-wwd-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.about-wwd-checklist li img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---- OUR STORY ---- */
.about-story {
  background: var(--white);
  padding: 160px 0;
  overflow: hidden;
}

.about-story-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(28px, 20.8vw, 400px);
}

.about-story-header {
  text-align: center;
  margin-bottom: 60px;
}

.about-story-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-top: 16px;
}

.about-story-card {
  background: var(--white);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-story-card h3 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-lh);
  color: var(--slate-950);
}

.about-story-card>p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.about-story-quote {
  color: var(--slate-950) !important;
  font-weight: 700;
  font-style: italic;
}

.about-story-stat-box {
  background: var(--primary-color);
  border-radius: var(--radius-md);
  padding: 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.about-story-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.about-story-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.about-story-stat-label {
  font-size: var(--body-lg-size);
  font-weight: 500;
  line-height: var(--body-lg-lh);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}

.about-story-stat-value {
  font-size: 60px;
  font-weight: 500;
  line-height: 72px;
  letter-spacing: -1.2px;
  color: var(--white);
}

.about-story-stat-divider {
  width: 1px;
  height: 110px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.about-story-stat-line {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.about-story-stat-note {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--white);
  text-align: center;
}

/* ---- WHY PEOPLE TRUST TWF ---- */
.about-trust {
  background: var(--white);
  padding-bottom: 160px;
  overflow: hidden;
}

.about-trust-header {
  text-align: center;
  max-width: 526px;
  margin: 0 auto 60px;
}

.about-trust-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-bottom: 16px;
}

.about-trust-header p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.about-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-trust-card {
  background: linear-gradient(to bottom, var(--neutral-100), rgba(255, 255, 255, 0));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
}

.about-trust-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(207, 231, 255, 0.2);
}

.about-trust-icon img {
  width: 52px;
  height: 52px;
}

.about-trust-card h3 {
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
  line-height: var(--h6-lh);
  color: var(--slate-950);
}

.about-trust-card p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-top: -20px;
}

/* ---- HOW WE WORK ---- */
.about-howwework {
  padding: 160px 0;
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/how-we-work-bg.svg) no-repeat center top;
  overflow: hidden;
}

.about-hww-header {
  text-align: center;
  max-width: 644px;
  margin: 0 auto 100px;
}

.about-hww-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-bottom: 16px;
}

.about-hww-header p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.stepSpace {
  padding-bottom: 60px;
}

.about-hww-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;

}

.about-hww-line {
  position: absolute;
  top: 70px;
  left: 100px;
  right: 100px;
  height: 2px;
  z-index: 0;
  background-image: repeating-linear-gradient(90deg,
      var(--primary-200) 0,
      var(--primary-200) 8px,
      transparent 8px,
      transparent 16px);
  background-size: 200% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-hww-line.animate {
  clip-path: inset(0 0 0 0);
  animation: dashMove 12s linear infinite;
}

.about-hww-step {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-hww-step.animate {
  opacity: 1;
  transform: translateY(0);
}

.about-hww-icon-box {
  width: 140px;
  height: 140px;
  background: var(--neutral-100);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Default SVG icon */
.about-hww-icon-box>img:first-child {
  position: relative;
  z-index: 1;
  transition: opacity 0.4s ease;
}

/* Hover PNG image — hidden by default */
.about-hww-icon-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.4s ease;
}

#AboutContact {
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/how-we-work-bg.svg) no-repeat center top;
}

/* On hover: show PNG, hide SVG */
.about-hww-step:hover .about-hww-icon-image {
  opacity: 1;
}

.about-hww-step:hover .about-hww-icon-box>img:first-child {
  opacity: 0;
}

.about-hww-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 3px 8px;
  background: linear-gradient(56deg, #03159D 15%, #7084FF 83%);
  border: 1px solid var(--primary-200);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--white);
  margin-top: -35px;
  position: relative;
  z-index: 1;
}

.about-hww-step h3 {
  font-size: var(--body-xl-size);
  font-weight: var(--body-xl-weight);
  line-height: var(--body-xl-lh);
  color: var(--slate-950);
  max-width: 325px;
}

.about-hww-step p {
  font-size: var(--body-sm-size);
  font-weight: 400;
  line-height: var(--body-sm-lh);
  color: var(--slate-600);
  max-width: 325px;
}

.about-hww-dot {
  width: 12px;
  height: 12px;
  background: var(--primary-500);
  border-radius: 50%;
  margin-top: 64px;
  flex-shrink: 0;
  z-index: 2;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-hww-dot.animate {
  opacity: 1;
  transform: scale(1);
}

/* ---- OUR TEAM ---- */
.about-team {
  background: var(--neutral-100);
  padding: 160px 0;
}

.about-team-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
}

.about-team-heading {
  max-width: 934px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-team-heading h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
}

.about-team-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-team-arrow {
  display: flex;
  align-items: center;
  padding: 8px 24px;
  border: 1px solid #03159D;
  border-radius: var(--radius-full);
  color: #03159D;
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
}

.about-team-arrow:hover {
  background: var(--primary-color);
  color: var(--white);
}

.about-team-arrow:hover svg path {
  stroke: var(--white);
}

.about-team-card {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scroll-snap-align: start;
}

.about-team-card-info h3 {
  font-size: var(--h6-size);
  font-weight: 500;
  line-height: var(--h6-lh);
  color: var(--slate-950);
}

.about-team-card-info span {
  font-size: var(--body-sm-size);
  line-height: 20px;
  color: var(--slate-600);
}

.about-team-card-photo {
  width: 340px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.about-team-card-photo>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Share button & social links */
/* .about-team-share {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
}
.about-team-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 48px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  background: transparent;
  transition: var(--transition);
} */

/* .about-team-share {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 100;
}

.about-team-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0077b5;
  text-decoration: none;
}
.about-team-share-btn svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: white;
} */

.about-team-share {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 100;
}

.about-team-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  gap: 10px;
  background: var(--primary-gradient);
  border: none;
  position: relative;
  z-index: 1;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}

.about-team-share-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

.about-team-share-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary-gradient);
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.about-team-share-btn:hover::before {
  opacity: 0.7;
}

.about-team-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3, 21, 157, 0.3);
}

/* .about-team-share-btn:hover {
  opacity: 0;
  background: #0077b5;
} */
.about-team-social-links {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 72px;
  height: 66px;
  border-radius: 8px;
  background: linear-gradient(55.56deg, rgba(3, 21, 157, 0.1) 15.23%, rgba(112, 132, 255, 0.1) 83.37%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 15px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* .about-team-share:hover .about-team-share-btn {
  opacity: 0;
} */
.about-team-share:hover .about-team-social-links {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.about-team-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.about-team-social-links a:hover {
  transform: scale(1.2);
}

/* Carousel wrapper with left fade */
.about-team-carousel-wrapper {
  position: relative;
}

.about-team-carousel {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
}

.about-team-carousel::-webkit-scrollbar {
  display: none;
}

.about-team-carousel-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 100%;
  background: linear-gradient(to right, #f5f5f5, rgba(245, 245, 245, 0));
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.about-team-carousel-fade.visible {
  opacity: 1;
}

/* ---- STRATEGIC PARTNER ---- */
.about-partner {
  background: var(--white);
  padding: 160px 0;
  overflow: hidden;
}

.about-partner-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(28px, 20.8vw, 400px);
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}

.about-partner-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.about-partner-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.about-partner-logo {
  height: 50px;
  width: auto;
}

.about-partner-title-row h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  white-space: nowrap;
}

.about-partner-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.about-partner-card>p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.about-partner-card strong {
  color: var(--slate-950);
  font-weight: 600;
}

.about-partner-blockquote {
  background: #F1F5FF;
  border-left: 6px solid var(--primary-color);
  border-radius: var(--radius-md);
  padding: 24px 32px;
}

.about-partner-blockquote p {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
}

/* ---- ABOUT PAGE RESPONSIVE ---- */

/* -- 1440px: Reduce generous spacing -- */
@media (max-width: 1440px) {

  .about-mission,
  .about-whoweare,
  .about-whatwedo,
  .about-trust,
  .about-howwework,
  .about-team,
  .about-partner,
  .about-story {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .about-stats {
    padding: 60px 0;
  }
}

/* -- 1200px: Tablet landscape -- */
@media (max-width: 1200px) {
  .about-section-container {
    padding: 0 clamp(24px, 6vw, 120px);
  }

  .about-story-container {
    padding: 0 clamp(24px, 8vw, 200px);
  }

  .about-partner-container {
    padding: 0 clamp(24px, 8vw, 200px);
  }

  .about-mission,
  .about-whoweare,
  .about-whatwedo,
  .about-trust,
  .about-howwework,
  .about-team,
  .about-partner,
  .about-story {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .about-stats {
    padding: 50px 0;
  }

  .about-mission-image,
  .about-whoweare-image {
    width: 50%;
    height: auto;
    aspect-ratio: 760 / 600;
  }

  .about-hww-header {
    margin-bottom: 60px;
  }
}

/* -- 980px: Tablet portrait -- */
@media (max-width: 980px) {

  /* Hero */
  .about-hero-content.teamHead {
    padding-bottom: 40px;
  }

  .about-hero-content {
    padding-top: 80px;
    gap: 24px;
  }

  .about-hero-content h1 {
    font-size: 42px;
    line-height: 52px;
  }

  .about-hero-image img {
    height: 360px;
  }

  /* Stats */
  .about-stats {
    padding: 40px 0;
  }

  .about-stats-title {
    font-size: 36px;
    line-height: 44px;
  }

  .about-stats-grid {
    flex-wrap: wrap;
    gap: 20px;
  }

  .about-stat-item {
    flex: 1 1 45%;
    min-width: 140px;
  }

  .about-stat-number {
    font-size: 40px;
    line-height: 52px;
  }

  /* Mission & Who We Are */
  .about-mission,
  .about-whoweare {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-mission-inner,
  .about-whoweare-inner {
    flex-direction: column;
    gap: 40px;
  }

  .about-mission-image,
  .about-whoweare-image {
    width: 100%;
    height: auto;
    aspect-ratio: 760 / 400;
  }

  .about-mission-text,
  .about-whoweare-text {
    max-width: 100%;
  }

  .about-mission-text h2,
  .about-whoweare-text h2 {
    font-size: 36px;
    line-height: 44px;
  }

  /* What We Do */
  .about-whatwedo {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-whatwedo-header h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .about-whatwedo-header {
    margin-bottom: 40px;
  }

  .about-whatwedo-cards {
    flex-direction: column;
  }

  .about-wwd-card {
    padding: 28px 32px;
  }

  /* Our Story */
  .about-story {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-story-header h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .about-story-stat-value {
    font-size: 44px;
    line-height: 56px;
  }

  .about-story-stat-box {
    padding: 20px 28px;
  }

  .about-story-card {
    padding: 28px 32px;
  }

  /* Trust */
  .about-trust {
    padding-bottom: 80px;
  }

  .about-trust-header h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .about-trust-header {
    margin-bottom: 40px;
  }

  .about-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-trust-card {
    padding: 24px 28px;
    gap: 24px;
  }

  /* How We Work */
  .about-howwework {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-hww-header h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .about-hww-header {
    margin-bottom: 60px;
  }

  .about-hww-steps {
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
  }

  .about-hww-line {
    display: none;
  }

  .about-hww-dot {
    display: none;
  }

  .about-hww-step {
    flex: 1 1 40%;
    min-width: 200px;
    opacity: 1;
    transform: none;
  }

  .about-hww-icon-box {
    width: 120px;
    height: 120px;
  }

  /* Team */
  .about-team {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-team-heading h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .about-team-top {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }

  .about-team-top .about-team-controls {
    width: 100%;
    justify-content: flex-start;
  }

  /* Partner */
  .about-partner {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-partner-title-row {
    flex-wrap: wrap;
  }

  .about-partner-title-row h2 {
    white-space: normal;
    font-size: 36px;
    line-height: 44px;
  }

  .about-partner-card {
    padding: 28px 32px;
  }

  .about-partner-blockquote {
    padding: 20px 24px;
  }
}

/* -- 768px: Large phone / small tablet -- */
@media (max-width: 768px) {
  .about-section-container {
    padding: 0 clamp(20px, 5vw, 60px);
  }

  .about-story-container {
    padding: 0 clamp(20px, 5vw, 60px);
  }

  .about-partner-container {
    padding: 0 clamp(20px, 5vw, 60px);
  }

  .about-hero-content {
    padding-top: 60px;
  }

  .about-hero-content h1 {
    font-size: 36px;
    line-height: 44px;
  }

  .about-hero-image img {
    height: 280px;
  }

  .about-stat-number {
    font-size: 36px;
    line-height: 48px;
  }

  .about-stats-title {
    font-size: 30px;
    line-height: 38px;
  }

  .about-story-stat-row {
    flex-direction: column;
    gap: 16px;
  }

  .about-story-stat-divider {
    width: 100%;
    height: 1px;
  }

  .about-story-stat-value {
    font-size: 40px;
    line-height: 50px;
  }

  .about-hww-step {
    flex: 1 1 100%;
  }

  .about-hww-icon-box {
    width: 100px;
    height: 100px;
    border-radius: 16px;
  }

  .about-hww-number {
    margin-top: -28px;
  }

  .about-team-card {
    width: 300px;
  }

  .about-team-card-photo {
    width: 300px;
    height: 360px;
  }

  .about-partner-logo {
    height: 36px;
  }
}

/* -- 560px: Mobile -- */
@media (max-width: 560px) {
  .about-hero {
    padding: 8px;
  }

  .about-hero-inner {
    padding: 20px 16px 0;
    gap: 24px;
  }

  .about-hero-content {
    padding-top: 40px;
    gap: 20px;
    padding-bottom: 20px;
  }

  .about-hero-content h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .about-hero-subtitle {
    font-size: 15px;
  }

  .about-hero-subtitle br {
    display: none;
  }

  .about-hero-image {
    padding-bottom: 20px;
  }

  .about-hero-image img {
    height: 200px;
    border-radius: 16px;
  }

  /* Stats */
  .about-stats {
    padding: 32px 0;
  }

  .about-stats-inner {
    padding: 0 20px;
  }

  .about-stats-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 24px;
  }

  .about-stats-grid {
    flex-direction: column;
    gap: 16px;
  }

  .about-stat-item {
    flex: 1 1 100%;
    padding: 16px 20px;
  }

  .about-stat-number {
    font-size: 32px;
    line-height: 40px;
  }

  .about-stat-label {
    font-size: 13px;
  }

  /* Mission & Who We Are */
  .about-mission,
  .about-whoweare {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-mission-text h2,
  .about-whoweare-text h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .about-mission-image,
  .about-whoweare-image {
    border-radius: 20px;
  }

  .about-mission-image img,
  .about-whoweare-image img {
    border-radius: 20px;
  }

  /* What We Do */
  .about-whatwedo {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-whatwedo-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .about-whatwedo-header {
    margin-bottom: 32px;
  }

  .about-wwd-card {
    padding: 24px 20px;
    gap: 24px;
  }

  .about-wwd-card-header {
    gap: 16px;
  }

  .about-wwd-card-header h3 {
    font-size: 18px;
    line-height: 26px;
  }

  .about-wwd-icon-container img {
    width: 48px;
    height: 48px;
  }

  /* Story */
  .about-story {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-story-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .about-story-header {
    margin-bottom: 32px;
  }

  .about-story-card {
    padding: 20px 16px;
    gap: 20px;
  }

  .about-story-card h3 {
    font-size: 18px;
    line-height: 26px;
  }

  .about-story-stat-box {
    padding: 16px 20px;
    gap: 16px;
  }

  .about-story-stat-value {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.6px;
  }

  .about-story-stat-label {
    font-size: 13px;
  }

  .about-story-stat-divider {
    width: 80%;
    height: 1px;
  }

  /* Trust */
  .about-trust {
    padding-bottom: 60px;
  }

  .about-trust-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .about-trust-header {
    margin-bottom: 32px;
  }

  .about-trust-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .about-trust-card {
    padding: 20px 24px;
    gap: 20px;
  }

  .about-trust-card h3 {
    font-size: 18px;
  }

  /* How We Work */
  .about-howwework {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-hww-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .about-hww-header {
    margin-bottom: 40px;
  }

  .about-hww-steps {
    gap: 32px;
  }

  .about-hww-step {
    flex: 1 1 100%;
  }

  .about-hww-icon-box {
    width: 90px;
    height: 90px;
    border-radius: 14px;
  }

  .about-hww-icon-box>img:first-child {
    width: 40px;
    height: 40px;
  }

  .about-hww-number {
    margin-top: -24px;
    font-size: 14px;
    width: 28px;
    padding: 2px 6px;
  }

  .about-hww-step h3 {
    font-size: 16px;
    line-height: 24px;
  }

  .about-hww-step p {
    font-size: 13px;
    line-height: 20px;
  }

  /* Team */
  .about-team {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-team-heading h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .about-team-top {
    margin-bottom: 32px;
  }

  .about-team-controls {
    flex-wrap: wrap;
    gap: 10px;
  }

  .about-team-card {
    width: 260px;
    gap: 16px;
  }

  .about-team-card-photo {
    width: 260px;
    height: 320px;
  }

  .about-team-card-info h3 {
    font-size: 18px;
  }

  .about-team-carousel {
    gap: 20px;
  }

  .about-team-carousel-fade {
    width: 160px;
  }

  .about-team-share-btn {
    width: 56px;
    height: 40px;
  }

  .about-team-share-btn img {
    width: 56px;
    height: 40px;
  }

  /* Partner */
  .about-partner {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-partner-title-row h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .about-partner-logo {
    height: 30px;
  }

  .about-partner-card {
    padding: 20px 16px;
    gap: 20px;
  }

  .about-partner-blockquote {
    padding: 16px 20px;
  }

  .about-partner-blockquote p {
    font-size: 15px;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* -- 400px: Very small phones -- */
@media (max-width: 400px) {
  .about-section-container {
    padding: 0 16px;
  }

  .about-story-container {
    padding: 0 16px;
  }

  .about-partner-container {
    padding: 0 16px;
  }

  .about-hero-content h1 {
    font-size: 24px;
    line-height: 32px;
  }

  .about-hero-image img {
    height: 160px;
  }

  .about-stats-title {
    font-size: 20px;
    line-height: 28px;
  }

  .about-stat-number {
    font-size: 28px;
    line-height: 36px;
  }

  .about-mission-text h2,
  .about-whoweare-text h2,
  .about-whatwedo-header h2,
  .about-story-header h2,
  .about-trust-header h2,
  .about-hww-header h2,
  .about-team-heading h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .about-partner-title-row h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .about-team-card {
    width: 240px;
  }

  .about-team-card-photo {
    width: 240px;
    height: 300px;
  }

  .about-story-stat-value {
    font-size: 28px;
    line-height: 36px;
  }
}

.nav-item .chevron {
  width: 12px;
  height: 8px;
  transition: transform 0.3s ease;
}

/* Dropdown */
.nav-item.has-dropdown {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-100px) translateY(8px);
  min-width: 240px;
  background: var(--white);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 12px 48px rgba(2, 14, 106, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 100;
  pointer-events: none;
}

/* Mega menu (two-column) */
.nav-mega {
  display: flex;
  gap: 32px;
  min-width: 580px;
  padding: 28px 32px;
}

.mega-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Vertical divider between mega columns */
.nav-mega .mega-col+.mega-col {
  border-left: 1px solid var(--neutral-200);
  padding-left: 32px;
}

.mega-heading {
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 12px;
  padding: 0;
}

/* Bridge element for hover gap */
.nav-item.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
  background: transparent;
}

/* Wider bridge for mega dropdown to prevent jerk on left side */
.nav-item.has-mega::after {
  left: -150px;
  width: calc(100% + 300px);
}

.nav-item.has-dropdown:hover>.nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-100px) translateY(0);
  pointer-events: auto;
}

.nav-item.has-dropdown:hover .chevron {
  transform: rotate(180deg);
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: var(--body-sm-size);
  font-weight: 500;
  color: #020E6A;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.nav-dropdown a::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
  flex-shrink: 0;
}

.nav-dropdown a:hover {
  color: var(--primary-500);
}

/* Header CTA */
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--neutral-900);
  border-radius: 2px;
  transition: var(--transition);
  transform-origin: center;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 80px 24px 40px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mobile-nav-item {
  border-bottom: 1px solid var(--neutral-200);
}

.mobile-nav-item>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  padding: 16px 0;
  color: var(--neutral-900);
}

.mobile-dropdown {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0 0 16px;
}

.mobile-dropdown.open {
  display: flex;
}

.mobile-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--body-md-size);
  color: var(--primary-color);
  padding: 10px 0;
}

.mobile-dropdown a::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
  flex-shrink: 0;
}

.mobile-mega-heading {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--body-sm-size);
  font-weight: 700;
  color: var(--primary-color);
  padding: 12px 0 4px;
}

.mobile-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 0px;
  width: 100%;
}

.mobile-cta .btn {
  flex: 1;
  justify-content: center;
}

/* ============================
   HERO SECTION
   ============================ */
.hero {
  padding: 16px;
  min-height: 100vh;
}

.hero-inner {
  background: var(--neutral-100);
  border-radius: var(--radius-lg);
  padding: 32px 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 32px);
  position: relative;
  overflow: hidden;
  background: url(/wp-content/themes/the-wealth-finder/assets/images/heroBg.webp) no-repeat center bottom;
  background-size: cover;
}

.hero-content {
  text-align: center;
  max-width: 1520px;
  padding-top: 120px;
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
  color: var(--primary-color);
  max-width: 1458px;
  margin: 0 auto 12px;
}

/* Typewriter effect */
.typewriter-wrap {
  display: inline-block;
  width: 396px;
  text-align: left;
}

.typewriter-text {
  color: #7084FF;
  padding-bottom: 2px;
}

.typewriter-cursor {
  display: inline-block;
  color: #7084FF;
  font-weight: 300;
  animation: typewriterBlink 0.7s step-end infinite;
  margin-left: 1px;
}

@keyframes typewriterBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.hero-subtitle {
  font-size: var(--body-lg-size);
  font-weight: var(--body-lg-weight);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
  max-width: 776px;
  margin: 0 auto 32px;
}

.hero-subtitle strong {
  color: #1E293B;
  font-weight: 600;
}

.hero-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hero-bg-elements {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-watermark {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 890px;
  max-width: 100%;
  opacity: 0.15;
}

.hero-wave {
  position: absolute;
  bottom: -200px;
  left: 0;
  width: 100%;
  opacity: 0.5;
}

/* ============================
   STATS SECTION
   ============================ */
.stats {
  background: #f5f5f5;
  padding: 80px 0;


}

.stats-temp {
  position: sticky;
  top: -11rem;
  z-index: -1;
}

.stats .container {
  max-width: 1920px;
  padding: 0 220px;
}

.stats-layout {
  display: flex;
  gap: 100px;
  align-items: flex-start;
}

.stats-left {
  flex-shrink: 0;
  position: sticky;
  top: 160px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-title {
  font-size: 48px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: -0.96px;
  color: var(--primary-color);
  margin: 0;
  max-width: 362px;
}

.stats-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 120px;
  padding-bottom: 30px;
  border-bottom: 1.5px solid #d4d4d4;
  transition: border-bottom-color 0.35s ease;
}

.stat-row:hover {
  border-bottom-color: #7084FF;
}

.stat-number {
  font-family: var(--font-primary);
  font-size: 80px;
  font-weight: 400;
  line-height: 80px;
  letter-spacing: -3.2px;
  color: var(--primary-color);
  white-space: nowrap;
  width: 330px;
  flex-shrink: 0;
}

.stat-plus {
  font-size: 52px;
  letter-spacing: -3.2px;
  line-height: 80px;
}

.stat-label {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: #475569;
  flex: 1;
}

/* ============================
   SECTION STACKING (Qapita-style, Home only)
   ============================ */
.home-page .section-stack {
  position: relative;
}

/* Sticky (bottom) sections — stay pinned while next section scrolls over */
.home-page .section-stack .stats,
.home-page .section-stack .blogs {
  position: sticky;
  top: 80px;
  /* below fixed header, JS will sync */
  z-index: 1;
}

/* Overlay (top) sections — scroll up and cover the sticky one */
.home-page .section-stack .start-here,
.home-page .section-stack .faq {
  position: relative;
  z-index: 2;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {

  .home-page .section-stack .start-here,
  .home-page .section-stack .faq {
    border-radius: 20px 20px 0 0;
  }
}

/* ============================
   START HERE SECTION
   ============================ */
.start-here {
  padding: 160px 0;
  background: var(--white);
}

.start-here .container {
  max-width: 1920px;
  padding: 0 220px;
}

.start-here-grid {
  display: flex;
  align-items: center;
  gap: 60px;
}

.start-here-content {
  max-width: 678px;
}

.start-here-content h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-top: 16px;
  margin-bottom: 16px;
}

.start-here-content p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-bottom: 24px;
}

.start-here-visual {
  flex: 1;
  display: flex;
  justify-content: center;
}

.visual-shapes {
  display: flex;
  align-items: center;
  gap: 0;
  height: 476px;
}

.shape {
  border-radius: 50%;
  overflow: hidden;
}

.shape-1 {
  width: 180px;
  height: 300px;
  background: var(--primary-500);
  border-radius: 0 150px 150px 0;
}

.shape-2 {
  width: 300px;
  height: 449px;
  background: var(--primary-color);
  border-radius: 0 224px 224px 0;
  margin-left: -10px;
}

.shape-3 {
  width: 449px;
  height: 449px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: -10px;
  background: url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=500&h=500&fit=crop') center/cover;
}

/* ============================
   SERVICES SECTION
   ============================ */
.services {
  padding: 160px 0;
  background: var(--white);
}

.services .container {
  max-width: 1920px;
  padding: 0 120px;
}

.services-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.services-header {
  max-width: 500px;
  flex-shrink: 0;
}

.services-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin: 16px 0;
}

.services-header p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-bottom: 24px;
}

.services-tabs-area {
  flex: 1;
}

.services-tabs {
  display: flex;
  border-bottom: 2px solid var(--neutral-200);
  margin-bottom: 40px;
}

.tab-btn {
  flex: 1;
  padding: 16px 24px;
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 500;
  color: var(--slate-400);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition-fast);
}

.tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-500);
}

.tab-btn:hover {
  color: var(--primary-color);
}

.services-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
}

.tab-panel.services-cards {
  display: grid;
}

#companies .service-card:last-child:nth-child(odd) {
  grid-column: span 2;
}

@media (max-width: 1024px) {
  #companies .service-card:last-child:nth-child(odd) {
    grid-column: span 1;
  }
}

.service-card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  border-radius: 0;
  margin-top: -1px;
  margin-left: -1px;
}

.service-card:first-child {
  border-top-left-radius: var(--radius-md);
}

.service-card:nth-child(2) {
  border-top-right-radius: var(--radius-md);
}

.service-card:nth-last-child(2) {
  border-bottom-left-radius: var(--radius-md);
}

.service-card:last-child {
  border-bottom-right-radius: var(--radius-md);
}

.service-card.last-card-not-last {
  border-radius: 0;
}

.service-card.last-card {
  border-bottom-left-radius: var(--radius-md);

}

.service-card:hover {
  border-color: var(--primary-200);
  box-shadow: 0 8px 32px rgba(67, 93, 255, 0.08);
  z-index: 1;
}

.service-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.service-info h3 {
  font-size: var(--body-xl-size);
  font-weight: var(--body-xl-weight);
  line-height: var(--body-xl-lh);
  color: var(--slate-950);
  margin-bottom: 12px;
}

.service-info p {
  font-size: var(--body-sm-size);
  font-weight: 400;
  line-height: var(--body-sm-lh);
  color: var(--slate-600);
  margin-bottom: 20px;
}

.service-number {
  position: absolute;
  bottom: -50px;
  right: 16px;
  font-size: 130px;
  font-weight: 700;
  color: transparent;
  opacity: .5;
  -webkit-text-stroke: 2px var(--primary-200);
  background: linear-gradient(135deg, #fff, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: var(--transition);
}

.service-card:hover .service-number {
  opacity: 1;
  -webkit-text-stroke: 0px transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  -webkit-background-clip: text;
  background-clip: text;
}

.service-card:hover {
  background: url(/wp-content/themes/the-wealth-finder/assets/images/serviceBGHover.svg) no-repeat right top;
}

/* ============================
   YOUR SITUATION SECTION
   ============================ */
.situation {
  padding: 0;
  background: var(--white);
  position: relative;
}

.situation-sticky-wrapper {
  position: relative;

}

.situation-sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 160px;
  padding-bottom: 40px;

  pointer-events: auto;
  width: 100%;
}

.situation-sticky.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}

.situation-sticky.is-bottom {
  position: absolute;
  left: 0;
  right: 0;
}

.situation-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 120px;
  white-space: nowrap;
  will-change: gap;
  transition: none;
}

.situation-title .title-left {
  text-align: right;
  display: inline-block;
  width: 234px;
}

.situation-title .title-right {
  text-align: left;
  display: inline-block;
  width: 234px;

}

.situation .container {
  max-width: 1920px;
  padding: 0 220px;
  position: relative;
  z-index: 5;


}

.section-title-center {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
  color: var(--primary-color);
  text-align: center;
  margin: 16px 0 60px;
}

.section-subtitle-center {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  text-align: center;
  margin-top: -40px;
  margin-bottom: 60px;
}

.situation-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 999;
  background: #fff;
}

.situation-card {
  background: var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: 50px 60px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.situation-card:hover {
  box-shadow: 0 12px 48px rgba(67, 93, 255, 0.1);
}

.situation-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.situation-card-content h3 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-lh);
  color: var(--slate-950);
}

.situation-card-content p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.situation-card .btn {
  max-width: 180px;
  justify-content: center;
}

.situation-card-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(/wp-content/themes/the-wealth-finder/assets/images/findRightPath.svg) no-repeat center center;
  background-size: cover;
  z-index: 1;
}

/* ============================
   HOW WE WORK SECTION
   ============================ */
.how-we-work {
  padding: 160px 0;
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/how-we-work-bg.svg) no-repeat center top;
  position: relative;
}

.how-we-work .container {
  max-width: 1920px;
  padding: 0 220px;
  position: relative;
}

.process-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  margin-top: 60px;
}

.process-step {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.process-icon {
  width: 140px;
  height: 140px;
  background: var(--neutral-100);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Default SVG icon */
.process-icon>img:first-child {
  position: relative;
  z-index: 1;
  transition: opacity 0.4s ease;
}

/* Hover PNG image — hidden by default */
.process-icon-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.4s ease;
}

/* On hover: show PNG, hide SVG */
.process-step:hover .process-icon-image {
  opacity: 1;
}

.process-step:hover .process-icon>img:first-child {
  opacity: 0;
}

.process-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 3px 8px;
  background: linear-gradient(56deg, rgb(3, 21, 157) 15%, rgb(112, 132, 255) 83%);
  color: var(--white);
  border-radius: 8px;
  border: 1px solid var(--primary-200);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin-top: -35px;
  position: relative;
  z-index: 1;
}

.process-step h3 {
  font-size: var(--body-xl-size);
  font-weight: var(--body-xl-weight);
  line-height: var(--body-xl-lh);
  color: var(--slate-950);
  max-width: 325px;
}

.process-step p {
  font-size: var(--body-sm-size);
  font-weight: 400;
  line-height: var(--body-sm-lh);
  color: var(--slate-600);
  max-width: 325px;
}

.process-dot {
  width: 12px;
  height: 12px;
  background: var(--primary-500);
  border-radius: 50%;
  margin-top: 64px;
  flex-shrink: 0;
  z-index: 2;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animated dashed line connecting process steps */
.process-line {
  position: absolute;
  top: 70px;
  left: 100px;
  right: 100px;
  height: 2px;
  z-index: 0;
  background-image: repeating-linear-gradient(90deg,
      var(--primary-200) 0,
      var(--primary-200) 8px,
      transparent 8px,
      transparent 16px);
  background-size: 200% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.srv-twf-card1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;

  border-radius: 16px;
  font-family: var(--font-primary);
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
  color: var(--white);
  box-shadow: inset 0 1px 1px rgba(207, 231, 255, 0.2);
}

.process-line.animate {
  clip-path: inset(0 0 0 0);
  animation: dashMove 12s linear infinite;
}

@keyframes dashMove {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.process-step.animate {
  opacity: 1;
  transform: translateY(0);
}

.process-dot.animate {
  opacity: 1;
  transform: scale(1);
}

/* ============================
   TESTIMONIALS SECTION
   ============================ */
.testimonials {
  padding: 0 0 160px;
  background: var(--white);
}

.testimonials .container {
  max-width: 1920px;
  padding: 0 220px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 60px;
}

.testimonial-card {
  border-radius: var(--radius-md);
  min-height: 364px;
}

.testimonial-text {
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-quote {
  font-size: var(--body-sm-size);
  font-weight: 500;
  line-height: var(--body-sm-lh);
  color: var(--slate-950);
  margin-bottom: 16px;
}

.testimonial-quote .text-muted {
  color: var(--slate-600);
  font-weight: 400;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-200);
  flex-shrink: 0;
}

.testimonial-info {
  display: flex;
  flex-direction: column;
}

.testimonial-info strong {
  font-size: var(--body-sm-size);
  font-weight: 600;
  color: var(--slate-950);
  line-height: 1.4;
}

.testimonial-info span {
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.4;
}

.testimonial-rating {
  margin-left: auto;
  font-size: var(--body-sm-size);
  color: var(--primary-color);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.testimonial-image {
  background: var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Testimonials read more toggle */
.testimonial-hidden {
  display: none;
}

.testimonials-grid.show-all .testimonial-hidden.testimonial-text {
  display: flex;
}

.testimonials-grid.show-all .testimonial-hidden.testimonial-image {
  display: block;
}

.testimonials-readmore-wrap {
  text-align: center;
  margin-top: 40px;
}

/* ============================
   BLOGS SECTION
   ============================ */
.blogs {
  padding: 80px 0;
  background: var(--neutral-100);
  position: sticky;
  top: -25rem;
  /* z-index: -1; */
}

.blogs .container {
  max-width: 1920px;
  padding: 0 220px;
}

.blogs-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  gap: 60px;
}

.blogs-header-left h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-top: 16px;
  max-width: 934px;
}

.blogs-header-right {
  max-width: 380px;
  flex-shrink: 0;
}

.blogs-header-right p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-bottom: 16px;
}

.blogs-grid {
  display: flex;
  gap: 20px;
  height: 580px;
}

.blog-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 16.66%;
  min-width: 0;
  flex-shrink: 0;
  transition: width 1s ease-in-out;
  cursor: pointer;
}

.blog-card.active {
  width: 50%;
}

.blog-card-image {
  height: 100%;
  position: relative;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-arrow-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 2;
}

.blog-arrow-badge svg {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-arrow-badge {
  background: var(--primary-500);
}

.blog-card:hover .blog-arrow-badge svg {
  transform: rotate(45deg);
}

.blog-card:hover .blog-arrow-badge svg path {
  stroke: var(--white);
}

.blog-card.active .blog-arrow-badge {
  background: var(--primary-500);
}

.blog-card.active .blog-arrow-badge svg {
  transform: rotate(45deg);
}

.blog-card.active .blog-arrow-badge svg path {
  stroke: var(--white);
}

.blog-card--featured .blog-card-overlay {
  position: absolute;
  inset: 0;
  padding: 24px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 48.56%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}

.blog-card.active .blog-card-overlay {
  opacity: 1;
  pointer-events: auto;
}

.blog-card-overlay h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--white);
  margin-bottom: 8px;
}

.blog-date {
  font-size: 14px;
  line-height: 20px;
  color: #A3A3A3;
  display: block;
  margin-bottom: 16px;
}

.blog-read-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 24px;
  border: 1px solid var(--white);
  border-radius: 100px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  backdrop-filter: blur(21px);
  transition: var(--transition-fast);
  text-decoration: none;
}

.blog-read-more:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ============================
   FAQ SECTION
   ============================ */
.faq {
  padding: 160px 0;
  background: var(--white);
}

.faq .container {
  max-width: 1920px;
  padding: 0 220px;
}

.faq-layout {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.faq-header {
  max-width: 474px;
  flex-shrink: 0;
}

.faq-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin: 16px 0;
}

.faq-header p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.faq-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1000px;
}

.faq-item {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  font-family: var(--font-primary);
  font-size: var(--body-lg-size);
  font-weight: 500;
  line-height: var(--body-lg-lh);
  color: var(--slate-950);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
}

.faq-icon {
  font-size: 24px;
  color: var(--slate-950);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 24px 20px;
}

.faq-answer p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

/* ============================
   ASSOCIATE MODEL SECTION
   ============================ */
.associate {
  padding: 160px 0 0;
  background: var(--white);
  position: relative;
  overflow: hidden;
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/how-we-work-bg.svg) no-repeat center top;
  z-index: 1;
}

.associate .container {
  max-width: 1920px;
  padding: 0 220px;
}

.associate-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

.associate-header-left h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-top: 12px;
}

.associate-header-right {
  max-width: 380px;
}

.associate-header-right p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-bottom: 12px;
}

.associate-banner {
  position: relative;
  width: 100%;
  height: 808px;
  overflow: hidden;
}

.associate-banner>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.associate-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0px 20px;
  background: rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--white-white-40, rgba(255, 255, 255, 0.30));
}

.associate-cards {
  display: flex;
  gap: 40px;

}

.associate-card {
  flex: 1;
  text-align: center;
  color: var(--white);
  padding: 80px 40px;
  border-right: 1px solid var(--white-white-40, rgba(255, 255, 255, 0.30));
}

.associate-card:last-child {
  border-right: none;
}

.associate-card h3 {
  font-size: var(--h2-size);
  font-weight: 400;
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
  margin-bottom: 12px;
}

.associate-card p {
  font-size: var(--body-lg-size);
  font-weight: 500;
  line-height: var(--body-lg-lh);
  opacity: 0.8;
}

/* ============================
   CTA SECTION
   ============================ */
.cta {
  padding: 160px 0;
  background: var(--white);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.cta .container {
  max-width: 1920px;
  padding: 0 220px;
}

.cta-content {
  max-width: 624px;
  margin: 0 auto;
  text-align: center;
}

.cta-content h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-bottom: 16px;
}

.cta-content p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-bottom: 40px;
}

.cta-glow {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.cta-glow-left {
  bottom: -200px;
  left: -150px;
  background: var(--orange-500);
  opacity: 0.7;
}

.cta-glow-right {
  bottom: -200px;
  right: -150px;
  background: var(--primary-500);
  opacity: 0.7;
}

/* ============================
   FOOTER
   ============================ */
.site-footer {
  background: #07000E url(/wp-content/themes/the-wealth-finder/assets/images/footerBG.webp) center bottom no-repeat;
  background-size: 100%;
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding-bottom: 440px;
  z-index: 1;
}

.footer-top {
  padding: 100px 0 60px;
}

.footer-top .container {
  max-width: 1920px;
  padding: 0 120px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.6fr;
  gap: 80px;
}

.footer-about p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-400);
  margin-top: 32px;
}

.footer-logo {
  height: 64px;
  width: auto;
}

.footer-links h4,
.footer-contact h4 {
  font-size: var(--h6-size);
  font-weight: 500;
  line-height: var(--h6-lh);
  color: var(--white);
  margin-bottom: 24px;
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-400);
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--white);
}

.footer-contact ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact a,
.footer-contact span {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-400);
  transition: var(--transition-fast);
}

.footer-contact a:hover {
  color: var(--white);
}

.footer-contact svg {
  flex-shrink: 0;
}


.faq.faq-position {
  position: relative;
  z-index: 1;
}

.footer-bottom {
  padding: 30px 0;
}

.footer-bottom .container {
  max-width: 1920px;
  padding: 0 120px;
}

.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-newsletter {
  display: flex;
  align-items: center;
  gap: 22px;
  border: none;
  border-bottom: 1px solid var(--slate-200);
  border-radius: 0;
  padding: 12px 0 12px 12px;
  min-width: 380px;
}

.footer-newsletter input {
  background: none;
  color: var(--white);
  font-size: var(--body-md-size);
  flex: 1;
  min-width: 180px;
}

.footer-newsletter input::placeholder {
  color: var(--slate-500);
}

.newsletter-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-primary);
  font-size: var(--body-xl-size);
  font-weight: 400;
  line-height: var(--body-xl-lh);
  white-space: nowrap;
  transition: var(--transition-fast);
}

.newsletter-btn:hover {
  opacity: 0.8;
}

.footer-socials {
  display: flex;
  gap: 12px;
}

.footer-socials a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  border-radius: 50%;
  transition: var(--transition-fast);
}

.footer-socials a:hover {
  opacity: 1;
}

.footer-divider {
  position: relative;
  height: 1px;
  margin: 34px 0 14px 0;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.footer-divider-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(112, 132, 255, 0.8), transparent);
  animation: footerGlowSlide 4s linear infinite;
}

@keyframes footerGlowSlide {
  0% {
    transform: translateX(-120px);
  }

  100% {
    transform: translateX(calc(100vw + 120px));
  }
}

.footer-copyright {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-500);
  text-align: center;
}

.footer-copyright a {
  color: var(--slate-400);
  transition: var(--transition-fast);
}

.footer-copyright a:hover {
  color: var(--white);
}

.footer-watermark {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1680px;
  max-width: 100%;
  opacity: 0.05;
  pointer-events: none;
}

.footer-watermark img {
  width: 100%;
}

/* ─────────────────────────────────────────────
   GRADIENT WAVE ANIMATED BACKGROUND
   ───────────────────────────────────────────── */
.gradient-wave-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(220, 227, 255, 0.4) 40%,
      rgba(112, 132, 255, 0.55) 65%,
      rgba(67, 93, 255, 0.7) 80%,
      rgba(3, 21, 157, 0.85) 100%);
}

.gradient-wave-bg .gw-waves {
  position: absolute;
  width: 100%;
  height: 35vh;
  min-height: 150px;
  max-height: 400px;
  bottom: 0;
  left: 0;
  opacity: 0.6;
}

/* Gradient fade so wave tops merge smoothly */
.gradient-wave-bg .gw-waves::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(112, 132, 255, 0.55) 0%,
      rgba(67, 93, 255, 0.25) 40%,
      transparent 100%);
}

.gradient-wave-bg .gw-parallax>use {
  animation: gwMoveForever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.gradient-wave-bg .gw-parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.gradient-wave-bg .gw-parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.gradient-wave-bg .gw-parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.gradient-wave-bg .gw-parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes gwMoveForever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ≤1439px — Laptop */
@media (max-width: 1439px) {

  .container,
  .stats .container,
  .start-here .container,
  .situation .container,
  .how-we-work .container,
  .testimonials .container,
  .blogs .container,
  .faq .container,
  .associate .container,
  .cta .container {
    padding: 0 80px;
  }

  .services .container {
    padding: 0 60px;
  }

  .footer-top .container,
  .footer-bottom .container {
    padding: 0 60px;
  }

  /* Hero */
  .hero h1 {
    font-size: 60px;
    line-height: 75px;
  }

  .typewriter-wrap {
    width: 340px;
  }

  .hero-subtitle {
    max-width: 700px;
  }

  .heroSvg {
    margin-top: 60px;
  }

  .header-container {
    padding: 8px 12px;
  }

  /* ---- Header / Nav scaling at laptop ---- */
  .logo img {
    height: 42px;
  }

  .nav-links {
    gap: 0;
    padding: 8px;
  }

  .nav-item>a {
    padding: 6px 10px;
    font-size: 14px;
    gap: 4px;
  }

  .header-cta {
    gap: 8px;
  }

  .header-cta .btn {
    padding: 10px 18px;
    font-size: 13px;
  }

  .nav-mega {
    min-width: 500px;
    gap: 24px;
    padding: 20px 24px;
  }

  .nav-dropdown a {
    font-size: 13px;
    padding: 8px 0;
  }

  .mega-heading {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .associate-overlay {
    padding: 60px 80px;
  }

  .associate-card h3 {
    font-size: 48px;
    line-height: 56px;
  }

  .process-line {
    left: 50px;
    right: 50px;
  }

  .footer-grid {
    gap: 40px;
  }
}

/* ≤1280px — Small Laptop / Large Tablet */
@media (max-width: 1280px) {
  .logo img {
    height: 36px;
  }

  .nav-links {
    gap: 0;
    padding: 6px;
  }

  .nav-item>a {
    padding: 6px 8px;
    font-size: 13px;
    gap: 3px;
  }

  .nav-item .chevron {
    width: 10px;
    height: 7px;
  }

  .header-cta {
    gap: 6px;
  }

  .header-cta .btn {
    padding: 8px 14px;
    font-size: 12px;
    gap: 6px;
  }

  .header-cta .btn-icon {
    width: 12px;
    height: 12px;
  }

  .header-cta .btn-icon svg {
    width: 12px;
    height: 12px;
  }

  .nav-mega {
    min-width: 440px;
    gap: 20px;
    padding: 16px 20px;
  }

  .nav-dropdown {
    padding: 16px 20px;
    min-width: 210px;
  }

  .nav-dropdown a {
    font-size: 12px;
    padding: 7px 0;
  }

  .mega-heading {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .nav-mega .mega-col+.mega-col {
    padding-left: 20px;
  }

  /* Hero */
  .hero h1 {
    font-size: 52px;
    line-height: 65px;
  }

  .typewriter-wrap {
    width: 300px;
  }

  .hero-content {
    padding-top: 100px;
  }

  .heroSvg {
    margin-top: 60px;
  }
}

/* ≤1024px — Tablet */
@media (max-width: 1024px) {
  :root {
    --section-padding: 80px;
  }

  .container,
  .stats .container,
  .start-here .container,
  .situation .container,
  .how-we-work .container,
  .testimonials .container,
  .blogs .container,
  .faq .container,
  .associate .container,
  .cta .container,
  .services .container,
  .footer-top .container,
  .footer-bottom .container {
    padding: 0 40px;
  }

  /* Header */
  .main-nav,
  .header-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Hero */
  .hero {
    padding: 10px;
  }

  .typewriter-wrap {
    width: 240px;
  }

  .hero-inner {
    padding: 24px 24px 0;
    border-radius: 24px;
  }

  .hero-content {
    padding-top: 80px;
  }

  .heroSvg {
    margin-top: 60px;
  }

  .hero h1 {
    font-size: 44px;
    line-height: 55px;
    letter-spacing: -0.88px;
  }

  .typewriter-wrap {
    width: 260px;
  }

  .hero-subtitle {
    font-size: 16px;
    max-width: 100%;
    margin-bottom: 24px;
  }

  .hero-badge {
    font-size: 13px;
    padding: 7px 16px;
  }

  .hero-badge-anim {
    margin-bottom: 16px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-watermark {
    width: 600px;
  }

  .gradient-wave-bg .gw-waves {
    height: 30vh;
    min-height: 150px;
    max-height: 350px;
  }

  /* Stats */
  .stats {
    padding: 60px 0;
  }

  .stats-title {
    font-size: 36px;
    line-height: 46px;
    letter-spacing: -0.72px;
  }

  .stats-layout {
    gap: 60px;
  }

  .stat-row {
    gap: 80px;
    padding-bottom: 40px;
  }

  .stat-number {
    font-size: 60px;
    line-height: 60px;
    width: 250px;
  }

  .stat-plus {
    font-size: 40px;
  }

  .stats-right {
    gap: 40px;
  }

  /* Start Here */
  .start-here {
    padding: 80px 0;
  }

  .start-here-grid {
    flex-direction: column;
  }

  .start-here-content h2 {
    font-size: 32px;
    line-height: 40px;
  }



  /* Services */
  .services {
    padding: 80px 0;
  }

  .services-layout {
    flex-direction: column;
  }

  .services-header {
    max-width: 100%;
  }

  .services-header h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .services-cards {
    grid-template-columns: 1fr;
  }

  /* Situation */
  .situation {
    padding: 80px 0;
    min-height: auto;
  }

  .situation-sticky-wrapper {
    position: relative;
  }

  .situation-sticky {
    padding-top: 0;
    padding-bottom: 20px;
  }

  .situation-title {
    gap: 12px !important;
    flex-wrap: wrap;
  }

  .situation-title .title-left,
  .situation-title .title-right {
    text-align: center;
  }

  .section-title-center {
    font-size: 36px;
    line-height: 44px;
  }

  .situation-card {
    padding: 32px 24px;
    border-radius: 24px;
  }

  .situation-card-content h3 {
    font-size: 22px;
    line-height: 28px;
  }

  /* How We Work */
  #process .how-we-work {
    padding: 80px 0;
  }

  .section-subtitle-center {
    margin-top: 0;
  }

  .process-steps {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .process-dot {
    display: none;
  }

  .process-line {
    display: none;
  }

  .process-step {
    opacity: 1;
    transform: none;
  }

  /* Testimonials */
  .testimonials {
    padding: 0 0 80px;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Blogs */
  .blogs {
    padding: 80px 0;
  }

  .blogs-header {
    flex-direction: column;
    gap: 20px;
  }

  .blogs-header-left h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .blogs-grid {
    flex-wrap: wrap;
    height: auto;
  }

  .blog-card {
    width: calc(50% - 10px);
    min-height: 400px;
    flex-shrink: 0;
    transition: none;
  }

  .blog-card.active {
    width: calc(50% - 10px);
  }

  .blog-card {
    height: 400px;
  }

  /* FAQ */
  .faq {
    padding: 80px 0;
  }

  .faq-layout {
    flex-direction: column;
  }

  .faq-header {
    max-width: 100%;
    text-align: center;
  }

  .faq-header .section-badge {
    justify-content: center;
  }

  .faq-header h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .faq-question {
    font-size: 16px;
  }

  /* Associate */
  .associate {
    padding: 80px 0 0;
  }

  .associate-header {
    flex-direction: column;
    gap: 16px;
  }

  .associate-header-left h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .associate-banner {
    height: 500px;
  }

  .associate-overlay {
    padding: 40px;
  }

  .associate-cards {
    flex-direction: column;
    gap: 24px;
  }

  .associate-card h3 {
    font-size: 32px;
    line-height: 40px;
  }

  /* CTA */
  .cta {
    padding: 80px 0;
  }

  .cta-content h2 {
    font-size: 32px;
    line-height: 40px;
  }

  /* Footer */
  .footer-top {
    padding: 60px 0 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-bottom-row {
    flex-direction: column;
    gap: 24px;
  }

  .footer-newsletter {
    min-width: auto;
    width: 100%;
    max-width: 380px;
  }

  /* Headings nowrap fix */
  h1,
  h2,
  h3 {
    white-space: normal !important;
  }
}

@media (max-width: 991px) {
  .blogs {
    position: sticky;
    top: -50rem;
    z-index: 1;
  }
}

/* ≤767px — Mobile */
@media (max-width: 767px) {

  .blogs {
    position: sticky;
    top: -80rem;
    z-index: 1;
  }

  .container,
  .stats .container,
  .start-here .container,
  .situation .container,
  .how-we-work .container,
  .testimonials .container,
  .blogs .container,
  .faq .container,
  .associate .container,
  .cta .container,
  .services .container,
  .footer-top .container,
  .footer-bottom .container {
    padding: 0 20px;
  }

  /* Header */
  .site-header {
    padding: 8px;
  }

  .site-header.scrolled {
    padding: 4px 8px;
  }

  .header-container {
    padding: 8px;
    border-radius: 16px;
  }

  .logo img {
    height: 36px;
  }

  /* Hero */
  .hero {
    padding: 8px;
  }

  .hero-inner {
    padding: 16px 16px 0;
    border-radius: 20px;
    background-size: 300%;
    min-height: auto;
    display: flex;
    justify-content: center;
  }

  .hero-content {
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .heroSvg {
    margin-top: 40px;
  }

  .hero h1 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
  }

  .typewriter-wrap {
    width: 200px;
  }

  .hero-badge {
    font-size: 12px;
    padding: 6px 14px;
    gap: 6px;
  }

  .hero-badge-anim {
    margin-bottom: 14px;
  }

  .hero-subtitle {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
  }

  .hero-buttons {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .gradient-wave-bg {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(220, 227, 255, 0.35) 35%,
        rgba(112, 132, 255, 0.5) 60%,
        rgba(67, 93, 255, 0.65) 80%,
        rgba(3, 21, 157, 0.8) 100%);
  }

  .gradient-wave-bg .gw-waves {
    height: 20vh;
    min-height: 80px;
    max-height: 200px;
  }

  /* Stats */
  .stats {
    padding: 40px 0;
  }

  .stats-layout {
    flex-direction: column;
    gap: 32px;
  }

  .stats-left {
    position: relative;
    top: auto;
  }

  .stats-title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.56px;
    max-width: 100%;
  }

  .stats-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .stat-row {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding-bottom: 24px;
  }

  .stat-number {
    font-size: 40px;
    line-height: 48px;
    width: auto;
  }

  .stat-plus {
    font-size: 28px;
  }

  .stat-label {
    font-size: 16px;
    line-height: 24px;
  }

  /* Start Here */
  .start-here {
    padding: 60px 0;
  }

  .start-here-content {
    text-align: center;
    align-items: center;
  }

  .start-here-content h2 {
    font-size: 28px;
    line-height: 36px;
  }

  /* Services */
  .services {
    padding: 60px 0;
  }

  .services-header {
    text-align: center;
    align-items: center;
  }

  .services-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .service-card {
    padding: 24px;
  }

  .services-cards {
    gap: 25px;
  }

  .service-number {
    font-size: 70px;
    bottom: -20px;
  }

  /* Situation */
  .situation {
    padding: 60px 0;
    min-height: auto;
  }

  .situation-sticky-wrapper {
    position: relative;
  }

  .situation-sticky {
    padding-top: 0;
  }

  .situation-title {
    gap: 8px !important;
  }

  .section-title-center {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 40px;
  }

  .situation-card {
    padding: 24px 20px;
    border-radius: 20px;
  }

  /* How We Work */
  .how-we-work {
    padding: 60px 0;
  }

  .process-icon {
    width: 100px;
    height: 100px;
    border-radius: 16px;
  }

  .process-icon::before {
    border-radius: 16px;
  }

  .process-step {
    opacity: 1;
    transform: none;
  }

  .process-step h3 {
    font-size: 18px;
    line-height: 24px;
  }

  /* Testimonials */
  .testimonials {
    padding: 0 0 60px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card {
    min-height: auto;
  }

  .associate-header {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /* Swap text/image pairs so image shows first on mobile */
  .testimonials-grid .testimonial-card:nth-child(1) {
    order: 2;
  }

  .testimonials-grid .testimonial-card:nth-child(2) {
    order: 1;
  }

  .testimonials-grid .testimonial-card:nth-child(3) {
    order: 4;
  }

  .testimonials-grid .testimonial-card:nth-child(4) {
    order: 3;
  }

  .testimonials-grid .testimonial-card:nth-child(5) {
    order: 6;
  }

  .testimonials-grid .testimonial-card:nth-child(6) {
    order: 5;
  }

  .testimonials-grid .testimonial-card:nth-child(11) {
    order: 12;
  }

  .testimonials-grid .testimonial-card:nth-child(12) {
    order: 11;
  }

  .testimonial-image {
    height: 300px;
  }

  /* Blogs */
  .blogs {
    padding: 60px 0;
  }

  .blogs-header-left h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .blogs-grid {
    flex-direction: column;
    height: auto;
  }

  .blog-card {
    width: 100%;
    min-height: 350px;
    flex-shrink: 0;
    transition: none;
  }

  .blog-card.active {
    width: 100%;
  }

  /* FAQ */
  .faq {
    padding: 60px 0;
  }



  .faq-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .faq-question {
    padding: 16px;
    font-size: 15px;
  }

  .faq-item.active .faq-answer {
    padding: 0 16px 16px;
  }

  /* Associate */
  .associate-header-left h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .associate-banner {
    height: 500px;
  }

  .associate-card {

    color: var(--white);
    padding: 14px 21px;
    border-right: none;
    border-bottom: 1px solid var(--white-white-40, rgba(255, 255, 255, 0.30));
  }

  .associate-card:last-child {
    border-bottom: none;
  }

  .associate-overlay {
    padding: 20px;
    top: 0;
  }

  .associate-overlay {
    justify-content: center;
    display: flex;
    flex-direction: column;
  }

  .associate-card h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .associate-card p {
    font-size: 14px;
  }

  /* CTA */
  .cta {
    padding: 60px 0;
  }

  .cta-content h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .cta-content p {
    font-size: 14px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-newsletter {
    max-width: 100%;
  }

  .footer-socials {
    justify-content: center;
  }

  .mobile-menu-overlay.active {
    overflow-y: auto;
    height: 100vh;
    bottom: 0;
    right: 0;
  }

  .site-footer {
    padding-bottom: 120px;
  }
}

/* ≤480px — Small Mobile */
@media (max-width: 480px) {

  .container,
  .stats .container,
  .start-here .container,
  .situation .container,
  .how-we-work .container,
  .testimonials .container,
  .blogs .container,
  .faq .container,
  .associate .container,
  .cta .container,
  .services .container,
  .footer-top .container,
  .footer-bottom .container {
    padding: 0 16px;
  }

  /* Header */
  .site-header {
    padding: 6px;
  }

  .header-container {
    padding: 6px;
    min-height: 56px;
  }

  .logo img {
    height: 32px;
  }

  /* Hero */
  .hero {
    padding: 6px;
  }

  .hero-inner {
    padding: 12px 12px 0;
    border-radius: 16px;
  }

  .hero h1 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.48px;
  }

  .typewriter-wrap {
    width: 130px;
  }

  .hero-badge {
    font-size: 11px;
    padding: 5px 12px;
    gap: 5px;
  }

  .gradient-wave-bg .gw-waves {
    height: 25vh;
    opacity: 0.6;
  }

  .hero-badge-anim {
    margin-bottom: 12px;
  }

  .hero-badge-dot {
    width: 6px;
    height: 6px;
  }

  .hero-subtitle {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 16px;
  }

  .hero-content {
    padding-top: 70px;
    padding-bottom: 32px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .heroSvg {
    margin-top: 24px;
  }

  .gradient-wave-bg .gw-waves {
    height: 15vh;
    min-height: 60px;
    max-height: 120px;
  }

  .footer-newsletter {
    padding: 10px 0px;
    gap: 15px;
  }

  .cta-glow {
    width: 300px;
    height: 300px;
    filter: blur(80px);
  }

  .newsletter-btn {
    font-size: 16px;
    gap: 4px;
  }

  /* Stats */
  .stats-title {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.44px;
  }

  .stats-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .stat-row {
    gap: 6px;
    padding-bottom: 16px;
  }

  .stat-number {
    font-size: 30px;
    line-height: 38px;
  }

  .stat-plus {
    font-size: 20px;
  }

  .stat-label {
    font-size: 13px;
    line-height: 20px;
  }

  /* General headings */
  .start-here-content h2,
  .services-header h2,
  .blogs-header-left h2,
  .faq-header h2,
  .associate-header-left h2,
  .cta-content h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .section-title-center {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 24px;
  }

  /* Cards */
  .service-card {
    padding: 16px;
    border-radius: 16px;
  }

  .situation-card {
    padding: 16px;
    border-radius: 16px;
  }

  .testimonial-text {
    padding: 12px;
  }

  /* FAQ */
  .faq-question {
    padding: 14px;
    font-size: 14px;
    line-height: 22px;
  }

  /* Footer */
  .footer-top {
    padding: 40px 0 24px;
  }

  .footer-links h4,
  .footer-contact h4 {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .footer-copyright {
    font-size: 13px;
  }

  /* Associate */


  .associate-card h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .associate-card p {
    font-size: 12px;
  }

  /* Blog */
  .blog-card {
    height: 280px;
  }

  /* Button full width on small mobile */
  .btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* ============================================================
   SERVICE PAGE — Recovery of Unclaimed Shares & Dividends
   ============================================================ */

/* ---- SHARED SERVICE STYLES ---- */
.srv-section-title {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 60px;
}

.srv-section-title:has(+ .srv-section-subtitle) {
  margin-bottom: 16px;
}

.srv-section-subtitle {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  text-align: center;
}

.srv-blockquote {
  background: #F1F5FF;
  border-left: 6px solid var(--primary-color);
  border-radius: 24px;
  padding: 24px 32px;
  margin-top: 24px;
}

.srv-blockquote p {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--slate-950);
  margin: 0;
}

/* ---- WHAT THIS MEANS ---- */
.srv-meaning {
  padding: 160px 0;
  background: var(--white);
}

.srv-meaning-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
}

.srv-meaning-card>p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-bottom: 0;
}

/* ---- COMMON REASONS ---- */
.srv-reasons {
  padding: 0 0 160px;
  background: var(--white);
}

.srv-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.srv-reason-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srv-reason-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(3, 21, 157, 0.08), rgba(74, 99, 253, 0.08));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.srv-reason-card p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin: 0;
}

/* ---- WHAT YOU MAY BE FACING ---- */
.srv-facing {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-facing-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 48px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
}

.srv-facing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.srv-facing-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.srv-facing-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.srv-facing-item span {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

/* ---- SOLUTIONS AVAILABLE (reuses about-howwework) ---- */
.srv-solutions.bgNew {
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/how-we-work-bg.svg) no-repeat center top;
}

/* ---- HOW TWF HELPS (reuses about-trust) ---- */
.srv-helps {
  padding-top: 160px;
}

/* ---- WHAT WE NEED FROM YOU ---- */
.srv-need {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-need-header {
  text-align: center;
  max-width: 644px;
  margin: 0 auto 40px;
}

.srv-need-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 48px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
}

.srv-need-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srv-need-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.srv-need-item svg {
  flex-shrink: 0;
}

.srv-need-item span {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

/* ---- TIMELINES ---- */
.srv-timelines {
  padding: 160px 0;
  background: var(--white);
}

.srv-timelines-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 48px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
}

.srv-timelines-card h3 {
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
  line-height: var(--h6-lh);
  color: var(--slate-950);
  margin-bottom: 20px;
}

.srv-timelines-list {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.srv-timelines-list li {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

/* ---- COMMON MISTAKES ---- */
.srv-mistakes {
  padding: 0 0 160px;
  background: var(--white);
}

.srv-mistakes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.srv-mistake-card {
  background: #FEF2F2;
  border-left: 4px solid #DC2626;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.srv-mistake-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.srv-mistake-card p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: #991B1B;
  margin: 0;
}

/* ---- FAQ (centered layout variant) ---- */
.srv-faq {
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/how-we-work-bg.svg) no-repeat center top;
}

.srv-faq .container {
  max-width: 1920px;
  padding: 0 220px;
}

.srv-faq-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.srv-faq-header {
  text-align: center;
  max-width: 474px;
}

.srv-faq-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin: 16px 0;
}

.srv-faq-header p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.srv-faq-list {
  width: 100%;
  max-width: 1000px;
}

/* ---- CTA WITH FORM ---- */
.srv-cta {
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/how-we-work-bg.svg) no-repeat center top;
}

.srv-cta-inner {
  max-width: 1086px;
  margin: 0 auto;
  text-align: center;
}

.recovery-cta-width {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.glowBG {
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/how-we-work-bg.svg) no-repeat center top;

}

.srv-cta-inner h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  text-transform: capitalize;
  margin-bottom: 16px;
}

.srv-cta-card {
  background: var(--white);
  border-radius: 32px;
  padding: 32px 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
}

.srv-cta-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: left;
}

.srv-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.srv-form-full {
  grid-template-columns: 1fr;
}

.srv-form-group {
  position: relative;
}

.srv-form-group label {
  position: absolute;
  top: -12px;
  left: 11px;
  background: var(--white);
  padding: 0 6px;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--slate-950);
  z-index: 1;
  pointer-events: none;
}

.srv-form-group input,
.srv-form-group textarea {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-950);
  background: transparent;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  padding: 12px 16px;
  width: 100%;
  height: 48px;
  outline: none;
  opacity: 0.78;
  backdrop-filter: blur(21px);
  transition: border-color 0.2s ease, opacity 0.2s ease;
  box-sizing: border-box;
}

.srv-form-group input::placeholder,
.srv-form-group textarea::placeholder {
  color: var(--slate-400);
}

.srv-form-group input:focus,
.srv-form-group textarea:focus {
  border-color: var(--primary-500);
  opacity: 1;
}

.srv-form-group textarea {
  resize: vertical;
  height: 120px;
  min-height: 120px;
}

.srv-form-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.srv-form-buttons .btn {
  width: 100%;
  justify-content: center;
}

.srv-form-group select {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-950);
  background: transparent;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 12px 16px;
  width: 100%;
  height: 48px;
  outline: none;
  opacity: 0.78;
  backdrop-filter: blur(21px);
  transition: border-color 0.2s ease, opacity 0.2s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23334155' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  padding-right: 44px;
  cursor: pointer;
}

.srv-form-group select:focus {
  border-color: var(--primary-500);
  opacity: 1;
}

/* ---- HERO DISCLAIMER ---- */
.srv-hero-disclaimer {
  font-size: 14px;
  line-height: 20px;
  color: var(--slate-400);
  margin-top: 16px;
}

/* ---- WHO THIS SERVICE IS FOR ---- */
.srv-service-for {
  padding: 0 0 160px;
  background: var(--white);
}

.srv-service-for.topPaddneded {
  padding-top: 160px;
}

.srv-service-for-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.srv-service-for-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 32px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srv-service-for-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 0 1px 1px rgba(207, 231, 255, 0.2);
}

.srv-service-for-icon svg {
  width: 48px;
  height: 48px;
}

.srv-service-for-card h3 {
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
  line-height: var(--h6-lh);
  color: var(--slate-950);
  margin: 0;
}

.srv-service-for-card p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin: 0;
}

/* ---- TOP PADDING VARIANT (no preceding meaning section) ---- */
.srv-service-for-top {
  padding-top: 160px;
}

/* ---- ALTERNATE BACKGROUND FOR SERVICE-FOR ---- */
.srv-service-for-alt {
  padding-top: 160px;
  background: var(--neutral-100);
}

.srv-service-for-alt .srv-service-for-card {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  border: none;
  border-radius: 32px 32px 0 0;
}

/* ---- COMMON CHALLENGES ---- */
.srv-challenges {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-challenges-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.srv-challenge-card {
  background: var(--white);
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.srv-challenge-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.srv-challenge-card p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin: 0;
}

/* ---- WHAT YOU GET ---- */
.srv-get {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-get-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.02);
}

.srv-get-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.srv-get-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.srv-get-item img {
  flex-shrink: 0;
  margin-top: 2px;
}

.srv-get-item span {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

/* ---- CLIENT HANDLES VS WE HANDLE ---- */
.srv-handles {
  padding: 160px 0;
  background: var(--white);
}

.srv-handles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.srv-handles-card {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
}

.srv-handles-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.srv-handles-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(207, 231, 255, 0.2);
}

.srv-handles-icon img {
  width: 48px;
  height: 48px;
}

.srv-handles-card-header h3 {
  font-size: var(--body-lg-size);
  font-weight: 600;
  line-height: var(--body-lg-lh);
  color: var(--slate-950);
  margin: 0;
}

.srv-handles-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.srv-handles-item {
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 12px;
  padding: 16px 20px;
  border-left: 6px solid;
}

.srv-handles-red {
  background: #FEF2F2;
  border-left-color: #DC2626;
}

.srv-handles-green {
  background: #F0FDF4;
  border-left-color: #16A34A;
}

.srv-handles-item p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-700);
  margin: 0;
}

/* ---- DOCUMENTS REQUIRED ---- */
.srv-documents {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-documents-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.srv-documents-header .srv-section-title {
  margin-bottom: 16px;
}

.srv-documents-header .srv-section-subtitle {
  margin-bottom: 60px;
}

.srv-documents-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 32px;
  padding: 32px 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.02);
}

.srv-documents-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.srv-documents-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 16px;
  padding: 16px 24px;
}

.srv-documents-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(207, 231, 255, 0.2);
}

.srv-documents-icon svg {
  width: 48px;
  height: 48px;
}

.srv-documents-item span {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: var(--slate-700);
}

/* ---- SERVICE PAGE RESPONSIVE ---- */

/* -- 1440px -- */
@media (max-width: 1440px) {

  .srv-meaning,
  .srv-facing,
  .srv-need,
  .srv-timelines {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .srv-reasons {
    padding-bottom: 120px;
  }

  .srv-mistakes {
    padding-bottom: 120px;
  }

  .srv-helps {
    padding-top: 120px;
  }

  .srv-service-for {
    padding-bottom: 120px;
  }

  .srv-service-for-top,
  .srv-service-for-alt {
    padding-top: 120px;
  }

  .srv-challenges {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .srv-get {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .srv-handles {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .srv-documents {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* -- 1200px -- */
@media (max-width: 1200px) {
  .srv-faq .container {
    padding: 0 clamp(24px, 6vw, 120px);
  }

  .srv-meaning,
  .srv-facing,
  .srv-need,
  .srv-timelines {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .srv-reasons {
    padding-bottom: 100px;
  }

  .srv-mistakes {
    padding-bottom: 100px;
  }

  .srv-helps {
    padding-top: 100px;
  }

  .srv-service-for {
    padding-bottom: 100px;
  }

  .srv-service-for-top,
  .srv-service-for-alt {
    padding-top: 100px;
  }

  .srv-challenges {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .srv-get {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .srv-handles {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .srv-documents {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/* -- 980px -- */
@media (max-width: 980px) {
  .srv-section-title {
    font-size: 36px;
    line-height: 44px;
  }

  .srv-reasons-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .srv-mistakes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .srv-meaning,
  .srv-facing,
  .srv-need,
  .srv-timelines {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .srv-reasons {
    padding-bottom: 80px;
  }

  .srv-mistakes {
    padding-bottom: 80px;
  }

  .srv-helps {
    padding-top: 80px;
  }

  .srv-meaning-card,
  .srv-facing-card,
  .srv-need-card,
  .srv-timelines-card {
    padding: 36px;
  }

  .srv-faq .container {
    padding: 0 clamp(20px, 5vw, 60px);
  }

  .srv-cta-inner {
    max-width: 100%;
  }

  .srv-faq-header h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .srv-cta-inner h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .srv-service-for {
    padding-bottom: 80px;
  }

  .srv-service-for-top,
  .srv-service-for-alt {
    padding-top: 80px;
  }

  .srv-challenges {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .srv-get {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .srv-handles {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .srv-documents {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .srv-service-for-card {
    padding: 32px 24px;
    border-radius: 24px;
  }

  .srv-handles-card {
    padding: 32px 24px;
    border-radius: 32px;
  }

  .srv-get-card {
    padding: 32px;
  }

  .srv-documents-card {
    padding: 24px 32px;
  }
}

/* -- 768px -- */
@media (max-width: 768px) {
  .srv-facing-grid {
    grid-template-columns: 1fr;
  }

  .srv-form-row {
    grid-template-columns: 1fr;
  }

  .srv-form-tags {
    grid-template-columns: repeat(2, 1fr);
  }

  .srv-service-for-grid {
    grid-template-columns: 1fr;
  }

  .srv-handles-grid {
    grid-template-columns: 1fr;
  }

  .srv-get-grid {
    grid-template-columns: 1fr;
  }

  .srv-problems-grid {
    grid-template-columns: 1fr;
  }
}

/* -- 560px -- */
@media (max-width: 560px) {
  .srv-section-title {
    font-size: 28px;
    line-height: 36px;
  }

  .srv-reasons-grid {
    grid-template-columns: 1fr;
  }

  .srv-mistakes-grid {
    grid-template-columns: 1fr;
  }

  .srv-meaning,
  .srv-facing,
  .srv-need,
  .srv-timelines {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .srv-reasons {
    padding-bottom: 60px;
  }

  .srv-mistakes {
    padding-bottom: 60px;
  }

  .srv-helps {
    padding-top: 60px;
  }

  .srv-meaning-card,
  .srv-facing-card,
  .srv-need-card,
  .srv-timelines-card {
    padding: 24px;
    border-radius: 24px;
  }

  .srv-reason-card {
    padding: 24px;
  }

  .srv-mistake-card {
    padding: 20px;
  }

  .srv-blockquote {
    padding: 16px 20px;
    border-radius: 16px;
  }

  .srv-faq .container {
    padding: 0 20px;
  }

  .srv-faq-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .srv-cta-inner h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .srv-form-buttons {
    grid-template-columns: 1fr;
  }

  .srv-cta-card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .srv-service-for {
    padding-bottom: 60px;
  }

  .srv-service-for-top,
  .srv-service-for-alt {
    padding-top: 60px;
  }

  .srv-challenges {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .srv-challenges-grid {
    grid-template-columns: 1fr;
  }

  .srv-get {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .srv-handles {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .srv-documents {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .srv-service-for-card {
    padding: 24px;
    border-radius: 20px;
  }

  .srv-service-for-card h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .srv-problems-card {
    padding: 20px 24px;
    border-radius: 12px;
  }

  .srv-problems-card p {
    font-size: 16px;
    line-height: 24px;
  }

  .srv-handles-card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .srv-get-card {
    padding: 24px;
    border-radius: 24px;
  }

  .srv-documents-card {
    padding: 20px 24px;
    border-radius: 24px;
  }

  .srv-documents-item {
    padding: 12px 16px;
    border-radius: 12px;
  }

  .srv-documents-item span {
    font-size: 16px;
    line-height: 24px;
  }
}

/* -- 400px -- */
@media (max-width: 400px) {
  .srv-section-title {
    font-size: 24px;
    line-height: 32px;
  }

  .srv-meaning-card,
  .srv-facing-card,
  .srv-need-card,
  .srv-timelines-card {
    padding: 20px;
  }

  .srv-faq-header h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .srv-cta-inner h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .srv-service-for-card {
    padding: 20px;
  }

  .srv-handles-card {
    padding: 20px 16px;
  }

  .srv-get-card {
    padding: 20px;
  }

  .srv-documents-card {
    padding: 16px 20px;
  }
}

/* ============================
   LOST SHARES TRACING PAGE
   ============================ */

/* ---- 3-COLUMN SERVICE-FOR GRID ---- */
.srv-service-for-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ---- BLOCKQUOTE ROW (side by side) ---- */
.srv-blockquote-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.srv-blockquote-row .srv-blockquote {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.srv-blockquote-row .srv-blockquote svg {
  flex-shrink: 0;
}

/* ---- WHAT YOU NEED TO SHARE ---- */
.srv-needs-share {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-needs-card {
  background: var(--white);
  border-radius: 32px;
  padding: 40px 32px;
  box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.02);
}

.srv-needs-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.srv-needs-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 16px;
}

.srv-needs-item span {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: #334155;
}

/* ---- OUTCOMES ---- */
.srv-outcomes {
  padding: 160px 0;
  background: var(--white);
}

.srv-outcomes-header {
  text-align: center;
  margin-bottom: 60px;
}

.srv-outcomes-header .srv-section-title {
  text-align: center;
}

.srv-outcomes-header .srv-section-subtitle {
  margin-top: 16px;
}

.srv-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.srv-outcomes-card {
  background: linear-gradient(to bottom, #f5f5f5, rgba(255, 255, 255, 0));
  border-radius: 32px 32px 0 0;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.srv-outcomes-icon {
  width: 52px;
  height: 52px;
}

.srv-outcomes-card h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #020617;
  margin: 0;
}

/* ---- RESPONSIVE: LOST SHARES ---- */
@media (max-width: 1440px) {
  .srv-needs-share {
    padding: 120px 0;
  }

  .srv-outcomes {
    padding: 120px 0;
  }
}

@media (max-width: 1200px) {
  .srv-needs-share {
    padding: 100px 0;
  }

  .srv-outcomes {
    padding: 100px 0;
  }
}

@media (max-width: 980px) {
  .srv-service-for-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .srv-needs-share {
    padding: 80px 0;
  }

  .srv-needs-card {
    padding: 32px;
  }

  .srv-outcomes {
    padding: 80px 0;
  }

  .srv-outcomes-card h3 {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 768px) {
  .srv-blockquote-row {
    flex-direction: column;
  }

  .srv-service-for-grid-3 {
    grid-template-columns: 1fr;
  }

  .srv-outcomes-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .srv-needs-share {
    padding: 60px 0;
  }

  .srv-needs-card {
    padding: 24px;
    border-radius: 24px;
  }

  .srv-needs-item {
    padding: 12px 16px;
    border-radius: 12px;
  }

  .srv-needs-item span {
    font-size: 16px;
    line-height: 24px;
  }

  .srv-outcomes {
    padding: 60px 0;
  }

  .srv-outcomes-card {
    padding: 24px;
    border-radius: 24px 24px 0 0;
  }

  .srv-outcomes-card h3 {
    font-size: 18px;
    line-height: 26px;
  }
}

@media (max-width: 400px) {
  .srv-needs-card {
    padding: 20px;
  }

  .srv-needs-item {
    padding: 10px 12px;
  }

  .srv-outcomes-card {
    padding: 20px;
  }
}

/* ============================
   SCROLL REVEAL ANIMATIONS
   ============================ */

/* Base hidden state */
[data-reveal] {
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Direction variants */
[data-reveal="up"] {
  transform: translateY(40px);
}

[data-reveal="down"] {
  transform: translateY(-40px);
}

[data-reveal="left"] {
  transform: translateX(-40px);
}

[data-reveal="right"] {
  transform: translateX(40px);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="zoom"] {
  transform: scale(0.92);
}

/* Revealed state */
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger children */
[data-reveal-stagger]>* {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal-stagger].revealed>* {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
[data-reveal-stagger].revealed>*:nth-child(1) {
  transition-delay: 0ms;
}

[data-reveal-stagger].revealed>*:nth-child(2) {
  transition-delay: 120ms;
}

[data-reveal-stagger].revealed>*:nth-child(3) {
  transition-delay: 240ms;
}

[data-reveal-stagger].revealed>*:nth-child(4) {
  transition-delay: 360ms;
}

[data-reveal-stagger].revealed>*:nth-child(5) {
  transition-delay: 480ms;
}

[data-reveal-stagger].revealed>*:nth-child(6) {
  transition-delay: 600ms;
}

[data-reveal-stagger].revealed>*:nth-child(7) {
  transition-delay: 720ms;
}

[data-reveal-stagger].revealed>*:nth-child(8) {
  transition-delay: 840ms;
}

[data-reveal-stagger].revealed>*:nth-child(9) {
  transition-delay: 960ms;
}

[data-reveal-stagger].revealed>*:nth-child(10) {
  transition-delay: 1080ms;
}

[data-reveal-stagger].revealed>*:nth-child(11) {
  transition-delay: 1200ms;
}

[data-reveal-stagger].revealed>*:nth-child(12) {
  transition-delay: 1320ms;
}

/* Custom delay attribute */
[data-reveal-delay="100"] {
  transition-delay: 100ms;
}

[data-reveal-delay="200"] {
  transition-delay: 200ms;
}

[data-reveal-delay="300"] {
  transition-delay: 300ms;
}

[data-reveal-delay="400"] {
  transition-delay: 400ms;
}

[data-reveal-delay="500"] {
  transition-delay: 500ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  [data-reveal],
  [data-reveal-stagger]>* {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   GLOSSARY PAGE
   ============================================================ */

/* ---- GLOSSARY HERO ---- */
.glossary-hero .about-hero-inner {
  padding-bottom: 0;
}

.glossary-hero .about-hero-content {
  padding-bottom: 80px;
}

.about-hero.partnerPadd {
  padding-bottom: 60px;
}

.glossary-hero-search-gradient {
  background-color: #F5F5F5;
  background-image: url(/wp-content/themes/the-wealth-finder/assets/images/glossaryBG.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.glossary-hero-hint {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-500);
}

/* ---- GLOSSARY SEARCH BAR ---- */
.glossary-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 700px;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-full);
  padding: 12px 12px 12px 24px;
}

.glossary-search-icon {
  flex-shrink: 0;
}

.glossary-search-bar input {
  flex: 1;
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--neutral-900);
  background: transparent;
}

.glossary-search-bar input::placeholder {
  color: var(--slate-400);
}

.glossary-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-gradient);
  flex-shrink: 0;
  transition: var(--transition);
}

.glossary-search-btn:hover {
  opacity: 0.9;
}

/* ---- GLOSSARY CONTENT SECTION ---- */
.glossary-content {
  padding: 100px 0 0;
}

/* ---- QUICK JUMP WRAPPER ---- */
.glossary-quickjump {
  max-width: 1000px;
  margin: 0 auto 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid var(--neutral-200);
  padding-bottom: 24px;
}

.glossary-quickjump-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--primary-color);
  font-family: var(--font-primary);
  font-size: var(--body-lg-size);
  font-weight: var(--body-lg-weight);
  line-height: var(--body-lg-lh);
}

.glossary-quickjump-label svg {
  flex-shrink: 0;
}


#menu-desktop-menu>.nav-item:first-child>.nav-dropdown>ul {
  display: flex;
  flex-direction: row;
  gap: 34px;
}

#menu-desktop-menu>.nav-item:first-child>.nav-dropdown>ul>li:first-child {
  position: relative;
}

#menu-desktop-menu>.nav-item:first-child>.nav-dropdown>ul>li:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  right: -17px;
  width: 2px;
  height: 100%;
  background-color: #E5E5E5;
}

#menu-desktop-menu>.nav-item:first-child>.nav-dropdown>ul>li>a:first-child {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #171717;
}

#menu-desktop-menu>.nav-item:first-child>.nav-dropdown>ul>li>a:first-child .chevron {
  display: none;
}

#menu-desktop-menu>.nav-item:first-child>.nav-dropdown>ul>li>a:first-child::before {
  all: unset;
}

/* ---- ALPHABET NAVIGATION ---- */
.glossary-alpha-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.glossary-letter-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 12px;
  font-family: var(--font-primary);
  font-size: var(--body-lg-size);
  font-weight: 500;
  line-height: var(--body-lg-lh);
  color: var(--primary-color);
  background: var(--white);
  border: 1px solid var(--primary-200);
  transition: var(--transition);
  cursor: pointer;
  min-width: 50px;
}

.glossary-letter-btn:hover {
  border-color: var(--primary-color);
  background: rgba(2, 14, 106, 0.04);
}

.glossary-letter-btn.active {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}

/* ---- GLOSSARY HEADING ---- */
.glossary-heading {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  text-align: left;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

/* ---- TERMS LIST ---- */
.glossary-terms-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 100px;
}

/* ---- TERM GROUP (Accordion) ---- */
.glossary-terms-group {
  background: var(--white);
  border: 1px solid #E4E4E7;
  border-radius: 20px;
  overflow: hidden;
}

.glossary-terms-group.hidden {
  display: none;
}

.glossary-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  background: var(--white);
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.glossary-group-header:hover {
  background: var(--neutral-50);
}

.glossary-group-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.glossary-chevron {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.glossary-terms-group.active .glossary-chevron {
  transform: rotate(180deg);
}

.glossary-letter-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 5px 12px;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: var(--body-xl-size);
  font-weight: 600;
  line-height: 30px;
  color: var(--white);
}

.glossary-term-count {
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: #1E293B;
  white-space: nowrap;
}

/* ---- GROUP BODY (collapsible) ---- */
.glossary-group-body {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--neutral-50);
  border-top: 1px solid #E4E4E7;
}

.glossary-terms-group.active .glossary-group-body {
  display: flex;
}

/* ---- TERM CARD ---- */
.glossary-term-card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 16px;
  padding: 16px 20px;
  overflow: hidden;
}

.glossary-term-card.hidden {
  display: none;
}

.glossary-term-card h3 {
  font-family: var(--font-primary);
  font-size: var(--body-xl-size);
  font-weight: 600;
  line-height: 30px;
  color: var(--slate-950);
  margin-bottom: 8px;
}

.glossary-term-card p {
  font-size: var(--body-md-size);
  font-weight: var(--body-md-weight);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

/* ---- GLOSSARY CTA ---- */
.glossary-cta .srv-cta-inner {
  max-width: 900px;
}

.glossary-cta-subtitle {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
  margin-bottom: 40px;
}

.glossary-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- NO RESULTS MESSAGE ---- */
.glossary-no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--slate-500);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  display: none;
}

.glossary-no-results.visible {
  display: block;
}

/* ---- RESPONSIVE: GLOSSARY ---- */
@media (max-width: 1440px) {
  .glossary-content {
    padding: 80px 0 0;
  }
}

@media (max-width: 1200px) {
  .glossary-content {
    padding: 60px 0 0;
  }

  .glossary-hero .about-hero-content {
    padding-bottom: 60px;
  }
}

@media (max-width: 980px) {
  .glossary-heading {
    font-size: 36px;
    line-height: 44px;
  }

  .glossary-alpha-nav {
    gap: 10px;
  }

  .glossary-letter-btn {
    padding: 10px 8px;
    font-size: 15px;
    min-width: 42px;
  }

  .glossary-quickjump {
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .glossary-content {
    padding: 40px 0 0;
  }

  .glossary-hero .about-hero-content {
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .glossary-alpha-nav {
    gap: 8px;
  }

  .glossary-letter-btn {
    flex: 0 0 auto;
    min-width: 40px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .glossary-quickjump {
    margin-bottom: 32px;
    padding-bottom: 20px;
  }

  .glossary-heading {
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 24px;
  }

  .glossary-terms-list {
    padding-bottom: 60px;
  }

  .glossary-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .glossary-cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .glossary-content {
    padding: 32px 0 0;
  }

  .glossary-hero .about-hero-content {
    padding-top: 60px;
    padding-bottom: 32px;
  }

  .glossary-search-bar {
    padding: 8px 8px 8px 16px;
  }

  .glossary-search-btn {
    width: 38px;
    height: 38px;
  }

  .glossary-alpha-nav {
    gap: 6px;
  }

  .glossary-letter-btn {
    min-width: 36px;
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 8px;
  }

  .glossary-quickjump {
    margin-bottom: 24px;
    padding-bottom: 16px;
  }

  .glossary-heading {
    font-size: 28px;
    line-height: 36px;
  }

  .glossary-group-header {
    padding: 16px;
  }

  .glossary-group-body {
    padding: 16px;
  }

  .glossary-term-card {
    padding: 14px 16px;
  }

  .glossary-term-card h3 {
    font-size: 18px;
    line-height: 26px;
  }

  .glossary-terms-list {
    padding-bottom: 40px;
  }
}

@media (max-width: 400px) {
  .glossary-letter-btn {
    min-width: 32px;
    padding: 6px;
    font-size: 12px;
    border-radius: 8px;
  }

  .glossary-group-header {
    padding: 12px;
  }

  .glossary-group-body {
    padding: 12px;
    gap: 12px;
  }

  .glossary-term-card {
    padding: 12px 14px;
  }

  .glossary-term-card h3 {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ============================================================
   SUSPENDED COMPANY ADVISORY PAGE
   ============================================================ */

/* ---- MEDIA CARDS SECTION ---- */
.srv-media-cards {
  padding: 0 0 160px;
  background: var(--white);
}

.srv-media-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.srv-media-card {
  background: var(--white);
  border-radius: 20px;
  padding: 24px 32px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.06), 0px 0px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.srv-media-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.srv-media-icon img {
  width: 64px;
  height: 64px;
}

.srv-media-icon--red {
  background: #FEF2F2;
}

.srv-media-icon--blue {
  background: #EFF6FF;
}

.srv-media-icon--purple {
  background: #FAF5FF;
}

.srv-media-icon--primary {
  background: #F1F5FF;
}

.srv-media-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.srv-media-card h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--slate-950);
  margin: 0;
}

.srv-media-subtitle {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #334155;
  margin: 0;
}

.srv-media-card p {
  font-size: 14px;
  line-height: 20px;
  color: var(--slate-600);
  margin: 0;
}

.srv-media-download-btn {
  margin-top: 0;
  width: 100%;
  justify-content: center;
}

/* ---- SECTION SUBTITLE SPACING ---- */
.srv-section-subtitle {
  margin-bottom: 60px;
}

/* ---- STEP-BY-STEP CARD VARIANT ---- */
.srv-solutions {
  background-image: none;
}

.srv-solutions .about-hww-header {
  margin-bottom: 100px;
}

.srv-hww-step-card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 24px;
  padding: 20px;
  text-align: left;
  align-items: center;
  flex-direction: row;
  display: flex;
  gap: 36px;
  flex: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  cursor: default;
}

.srv-hww-step-card .about-hww-number {
  margin-top: 0;
  width: 80px;
  height: 80px;
  min-width: 80px;
  border-radius: 20px;
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: linear-gradient(84.54deg, #03159D 10.59%, #4A63FD 93.98%);
}

.srv-step-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.srv-step-subtitle {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-top: 16px;
}

.srv-hww-step-card h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--slate-950);
  max-width: 100%;
  margin: 0;
}

.srv-hww-step-card p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  max-width: 100%;
  margin: 0;
}

.srv-hww-step-card p strong {
  font-weight: 600;
  color: var(--slate-900);
}

.srv-step-text ul {
  list-style: disc;
  padding-left: 24px;
  margin: 0;
}

.srv-step-text ul li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--slate-600);
}

/* ---- Vertical layout override for step cards ---- */
.srv-solutions .about-hww-steps:has(.srv-hww-step-card) {
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
  margin-top: 0;
}

.srv-solutions .about-hww-steps:has(.srv-hww-step-card) .about-hww-line {
  top: 28px;
  bottom: 28px;
  left: 60px;
  right: auto;
  width: 2px;
  height: auto;
  background-image: repeating-linear-gradient(180deg,
      var(--primary-200) 0,
      var(--primary-200) 8px,
      transparent 8px,
      transparent 16px);
}

.srv-solutions .about-hww-steps:has(.srv-hww-step-card) .about-hww-dot {
  margin-top: 0;
  margin-left: 54px;
  width: 12px;
  height: 12px;
}

/* ---- HOW TWF HELPS CARDS ---- */
.srv-twf-helps {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-twf-helps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.srv-twf-card {
  background: var(--white);
  border-radius: 40px;
  padding: 32px 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
}

.srv-twf-card-header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.srv-twf-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #7084FF 0%, #03159D 100%);
  border-radius: 16px;
  font-family: var(--font-primary);
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
  color: var(--white);
  box-shadow: inset 0 1px 1px rgba(207, 231, 255, 0.2);
}

.srv-twf-card h3 {
  font-family: var(--font-primary);
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
  color: var(--slate-950);
  margin: 0;
}

.srv-twf-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srv-twf-card-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.srv-twf-check {
  flex-shrink: 0;
}

.srv-twf-card-list li span {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--slate-600);
}

/* ---- SUSPENDED ADVISORY RESPONSIVE ---- */

@media (max-width: 1440px) {
  .srv-media-cards {
    padding-bottom: 120px;
  }

  .srv-twf-helps {
    padding: 120px 0;
  }
}

@media (max-width: 1200px) {
  .srv-media-cards {
    padding-bottom: 100px;
  }

  .srv-media-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .srv-twf-helps {
    padding: 100px 0;
  }
}

@media (max-width: 980px) {
  .srv-media-cards {
    padding-bottom: 80px;
  }

  .srv-twf-helps {
    padding: 80px 0;
  }

  .srv-twf-card {
    padding: 24px 28px;
  }

  .srv-twf-card h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .srv-twf-card-number {
    width: 52px;
    height: 52px;
    font-size: 24px;
    line-height: 32px;
    border-radius: 14px;
  }

  .srv-hww-step-card {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .srv-media-cards-grid {
    grid-template-columns: 1fr;
  }

  .srv-twf-helps-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .srv-media-cards {
    padding-bottom: 60px;
  }

  .srv-media-card {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .srv-twf-helps {
    padding: 60px 0;
  }

  .srv-twf-card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .srv-twf-card-header {
    gap: 16px;
  }

  .srv-twf-card-number {
    width: 44px;
    height: 44px;
    font-size: 20px;
    line-height: 28px;
    border-radius: 12px;
  }

  .srv-twf-card h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .srv-hww-step-card {
    padding: 16px;
    border-radius: 20px;
    gap: 20px;
  }

  .srv-hww-step-card .about-hww-number {
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 24px;
    border-radius: 14px;
    line-height: 32px;
  }

  .srv-hww-step-card h3 {
    font-size: 18px;
    line-height: 26px;
  }

  .srv-solutions .about-hww-steps:has(.srv-hww-step-card) {
    gap: 20px;
  }

  .srv-solutions .about-hww-steps:has(.srv-hww-step-card) .about-hww-line {
    left: 44px;
  }

  .srv-solutions .about-hww-steps:has(.srv-hww-step-card) .about-hww-dot {
    margin-left: 38px;
  }
}

@media (max-width: 400px) {
  .srv-media-card {
    padding: 20px 16px;
  }

  .srv-twf-card {
    padding: 20px 16px;
  }

  .srv-twf-card-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .srv-hww-step-card {
    padding: 16px;
  }
}

/* ---- CENTERED HERO VARIANT (no image) ---- */
.srv-hero--centered {
  background: #fff url(/wp-content/themes/the-wealth-finder/assets/images/faqBG.svg) center bottom;
  background-size: cover;
}

.srv-hero-inner--centered {
  justify-content: center;
  text-align: center;
  padding-bottom: 80px;
}

.srv-hero-content--centered {
  max-width: 900px;
  margin: 0 auto;
  align-items: center;
}

.srv-hero-content--centered .hero-buttons {
  justify-content: center;
}

/* ---- CALLOUT BOXES ---- */
.srv-callout {
  border-left: 6px solid;
  border-radius: 24px;
  padding: 24px 32px;
}

.srv-callout h4 {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--slate-950);
  margin: 0 0 8px;
}

.srv-callout p {
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin: 0;
}

.srv-callout--primary {
  background: var(--white);
  border-color: var(--primary-color);
  margin-top: 0;
  box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.02);
}

.srv-callout--danger {
  background: #FEF2F2;
  border-color: #DC2626;
}

.srv-callout--danger h4 {
  color: #DC2626;
}

/* ---- DELISTING RISK SECTION ---- */
.srv-delisting-risk {
  padding: 160px 0;
  background: var(--white);
}

.srv-delisting-card {
  background: var(--white);
  border: 1px solid #FECACA;
  border-radius: 24px;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.04);
}

.srv-delisting-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #FEF2F2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.srv-delisting-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.srv-delisting-content>p {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
  margin: 0;
}

/* ---- REVOCATION BENEFITS SECTION ---- */
.srv-revocation-benefits {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-benefits-card {
  background: var(--white);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.04);
}

.srv-benefits-card h4 {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--slate-950);
  margin: 0 0 24px;
}

.srv-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.srv-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.srv-benefit-item svg {
  flex-shrink: 0;
}

.srv-benefit-item span {
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

/* ---- TWF CARD BODY (sublabels inside cards) ---- */
.srv-twf-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srv-twf-card-body h4 {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--slate-600);
  margin: 0;
}

.srv-twf-card-body>p {
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin: 0;
}

/* ---- SIMPLE CTA VARIANT (no form) ---- */
.srv-cta--simple .srv-cta-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.srv-cta-subtitle {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
  margin: 0 0 40px 0;
}

.srv-cta-subtitle-d {
  color: var(--slate-600);
  margin: 0 0 40px 0;
}

.mt-24 {
  margin-top: 24px;
}

.mb-24 {
  margin-bottom: 24px;
}

/* ---- HERO DISCLAIMER ---- */
.srv-hero-disclaimer {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--slate-600);
  margin-top: -8px;
}

/* ---- NEW SECTIONS RESPONSIVE ---- */
@media (max-width: 1440px) {
  .srv-delisting-risk {
    padding: 120px 0;
  }

  .srv-revocation-benefits {
    padding: 120px 0;
  }
}

@media (max-width: 1200px) {
  .srv-delisting-risk {
    padding: 100px 0;
  }

  .srv-revocation-benefits {
    padding: 100px 0;
  }
}

@media (max-width: 980px) {
  .srv-delisting-risk {
    padding: 80px 0;
  }

  .srv-delisting-card {
    padding: 32px;
    flex-direction: column;
  }

  .srv-revocation-benefits {
    padding: 80px 0;
  }

  .srv-benefits-card {
    padding: 32px;
  }

  .srv-callout {
    padding: 20px 24px;
    border-radius: 20px;
  }

  .srv-cta--simple .srv-cta-buttons {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .srv-benefits-grid {
    grid-template-columns: 1fr;
  }

  .srv-hero-inner--centered {
    padding-bottom: 60px;
  }
}

@media (max-width: 560px) {
  .srv-delisting-risk {
    padding: 60px 0;
  }

  .srv-delisting-card {
    padding: 24px;
    border-radius: 20px;
  }

  .srv-delisting-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .srv-revocation-benefits {
    padding: 60px 0;
  }

  .srv-benefits-card {
    padding: 24px;
    border-radius: 20px;
  }

  .srv-callout {
    padding: 16px 20px;
    border-radius: 16px;
  }
}

/* ---- RETAINERSHIP APPROACH ---- */
.srv-retainership {
  padding: 160px 0;
  background: var(--white);
}

.srv-retainership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.srv-retainership-card {
  background: var(--white);
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 0 0 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.srv-retainership-card-header h3 {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--slate-950);
  margin: 0;
}

.srv-retainership-divider {
  width: 100%;
  height: 1px;
  background: var(--neutral-200);
  margin: 20px 0;
}

.srv-retainership-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srv-retainership-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.srv-retainership-list li svg {
  flex-shrink: 0;
}

.srv-retainership-list li span {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--slate-600);
}

.srv-retainership-note {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--slate-600);
  margin: 16px 0 0;
}

/* ---- NBFC COMPLIANCE – PAGE-SPECIFIC OVERRIDES ---- */
.srv-hero-disclaimer strong {
  color: #1E293B;
}

.srv-meaning-nopad {
  padding-bottom: 0;
}

.srv-docs-grid.srv-docs-grid-2col {
  grid-template-columns: repeat(2, 1fr);
}

.srv-docs-card-center {
  text-align: center;
}

.srv-docs-card-header-col {
  flex-direction: column;
  align-items: center;
}

.srv-docs-icon--red {
  background: #FEF2F2;
}

.srv-docs-subtitle {
  font-weight: 500;
  color: #334155;
}

.srv-docs-actions {
  margin-top: 16px;
  justify-content: center;
}

.srv-service-for-card-nbfc {
  gap: 32px;
  padding: 32px;
}

.srv-solutions .about-hww-header h2 {
  color: var(--primary-color);
}

.topPadd0 {
  padding-top: 0;
}

.srv-cta-simple h2 {
  margin-bottom: 16px;
}

.srv-cta-text {
  color: var(--slate-600);
  font-size: 16px;
  line-height: 24px;
  max-width: 624px;
  margin: 0 auto;
}

@media (max-width: 980px) {
  .srv-docs-grid-2col {
    grid-template-columns: 1fr;
  }

  .srv-service-for-card-nbfc {
    gap: 24px;
    padding: 24px;
  }

  .srv-service-for.topPaddneded {
    padding-top: 80px;
  }

  .topPaddneded .srv-problems-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .srv-service-for-card-nbfc {
    gap: 20px;
    padding: 20px;
  }

  .srv-service-for-card-nbfc h3 {
    font-size: 18px;
    line-height: 26px;
  }

  .srv-service-for.topPaddneded {
    padding-top: 60px;
  }

  .srv-docs-card-center {
    padding: 20px;
  }

  .srv-docs-card-header-col {
    gap: 12px;
  }

  .srv-docs-card-center .srv-docs-subtitle {
    font-size: 14px;
  }

  .srv-meaning-bullet-list li {
    font-size: 15px;
    line-height: 24px;
  }

  .srv-retainership-list li span {
    font-size: 15px;
  }

  .srv-retainership-note {
    font-size: 13px;
  }

  .srv-cta-text {
    font-size: 15px;
  }
}

@media (max-width: 400px) {
  .srv-service-for-card-nbfc {
    gap: 16px;
    padding: 16px;
  }

  .srv-service-for-card-nbfc h3 {
    font-size: 16px;
    line-height: 24px;
  }

  .srv-docs-card-center {
    padding: 16px;
  }

  .srv-retainership-card {
    padding: 20px 16px;
  }
}

/* ================================================================
   NBFC REGISTRATION PAGE – UNIQUE SECTIONS
   ================================================================ */

/* ---- Info Callout (blue left-border box) ---- */
.srv-info-callout {
  background: #f1f5ff;
  border-left: 6px solid var(--primary-color);
  border-radius: 24px;
  padding: 24px 32px;
  width: 100%;
}

.srv-info-callout p {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
  margin: 0;
}

.srv-info-callout p strong {
  color: var(--slate-900);
}

.srv-callout-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.srv-callout-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.srv-callout-list li svg {
  flex-shrink: 0;
}

.srv-callout-standalone {
  margin-top: 60px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.whiteBg {
  background: #fff;
}

.srv-callout-standalone .srv-callout-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.srv-callout-standalone p {
  margin: 0;
}

/* ---- Meaning Alt (grey bg) ---- */
.srv-meaning-alt {
  background: var(--neutral-100);
}

.srv-meaning-alt .srv-meaning-card {
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.02);
}

/* ---- Problems grid cards ---- */
.srv-problems-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.srv-problems-card {
  background: var(--white);
  border-radius: 16px;
  padding: 24px 32px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 16px;
}

.srv-problems-card svg {
  flex-shrink: 0;
}

.srv-problems-card p {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
  margin: 0;
}

/* ---- Meaning Card Extensions ---- */
.srv-meaning-card-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
  color: var(--slate-950);
  margin: 0 0 8px;
}

.srv-meaning-bullet-list {
  list-style: disc;
  padding-left: 24px;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.srv-meaning-bullet-list li {
  font-size: var(--body-md-size);
  line-height: 32px;
  color: var(--slate-600);
}

/* ---- Documents Required Section ---- */
.srv-docs {
  padding: 160px 0;
  background: var(--white);
}

.srv-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.srv-docs-card {
  background: var(--white);
  border-radius: 20px;
  padding: 24px 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 0 0 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.srv-docs-card-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.srv-docs-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.srv-docs-icon--blue {
  background: #eff6ff;
}

.srv-docs-icon--green {
  background: #f0fdf4;
}

.srv-docs-card-header h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--slate-950);
  margin: 0;
}

.srv-docs-divider {
  height: 1px;
  background: var(--neutral-200);
  width: 100%;
}

.srv-docs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srv-docs-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.srv-docs-list li svg {
  flex-shrink: 0;
}

.btn.btn-primary {
  transform: unset !important;
}

/* ---- Common Challenges / Solutions Section ---- */
.srv-challenges-solutions {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-cs-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 60px;
}

.srv-cs-row {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.02);
}

.srv-cs-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.srv-cs-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.srv-cs-badge--red {
  background: #fef2f2;
}

.srv-cs-badge--green {
  background: #f0fdf4;
}

.srv-cs-label {
  font-size: var(--body-lg-size);
  font-weight: 600;
  line-height: var(--body-lg-lh);
  color: var(--slate-900);
  margin: 0;
}

.srv-cs-text {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin: 4px 0 0;
}

.srv-cs-divider {
  width: 1px;
  min-height: 60px;
  background: var(--neutral-200);
  align-self: center;
  flex-shrink: 0;
}

/* ---- Why Choose TWF Section ---- */
.srv-why-twf {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-why-twf-card {
  background: var(--white);
  border-radius: 40px;
  padding: 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.02);
  margin-top: 60px;
}

.srv-why-twf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.srv-why-twf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.srv-why-twf-item svg {
  flex-shrink: 0;
}

/* ---- CTA Buttons Row (no form variant) ---- */
.srv-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

/* ================================================================
   NBFC PAGE – RESPONSIVE
   ================================================================ */
@media (max-width: 980px) {
  .srv-docs {
    padding: 120px 0;
  }

  .srv-docs-grid {
    grid-template-columns: 1fr;
  }

  .srv-challenges-solutions {
    padding: 120px 0;
  }

  .srv-cs-row {
    flex-direction: column;
    gap: 20px;
    padding: 24px;
  }

  .srv-cs-divider {
    width: 100%;
    min-height: 0;
    height: 1px;
  }

  .srv-why-twf {
    padding: 120px 0;
  }

  .srv-why-twf-grid {
    grid-template-columns: 1fr;
  }

  .srv-why-twf-card {
    padding: 32px 24px;
    border-radius: 32px;
  }

  .srv-meaning-card-title {
    font-size: 24px;
    line-height: 32px;
  }

  .srv-cta-buttons {
    flex-direction: column;
  }

  .srv-retainership {
    padding: 120px 0;
  }
}

@media (max-width: 768px) {
  .srv-retainership-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .srv-docs {
    padding: 100px 0;
  }

  .srv-docs-card {
    padding: 20px 24px;
  }

  .srv-docs-card-header {
    gap: 12px;
  }

  .srv-docs-icon {
    width: 48px;
    height: 48px;
  }

  .srv-docs-card-header h3 {
    font-size: 18px;
    line-height: 26px;
  }

  .srv-challenges-solutions {
    padding: 100px 0;
  }

  .srv-cs-row {
    padding: 20px;
    border-radius: 16px;
  }

  .srv-why-twf {
    padding: 100px 0;
  }

  .srv-why-twf-card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .srv-info-callout {
    padding: 20px 24px;
    border-radius: 16px;
  }

  .srv-callout-standalone {
    flex-direction: column;
    gap: 8px;
  }

  .srv-meaning-card-title {
    font-size: 20px;
    line-height: 28px;
  }

  .srv-retainership {
    padding: 80px 0;
  }

  .srv-retainership-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .srv-retainership-card-header h3 {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 400px) {
  .srv-docs-card {
    padding: 16px;
  }

  .srv-cs-row {
    padding: 16px;
  }

  .srv-why-twf-card {
    padding: 20px 16px;
  }

  .srv-info-callout {
    padding: 16px 20px;
    border-radius: 12px;
  }

  .srv-retainership-card {
    padding: 20px 16px;
  }
}

/* ================================================================
   FAQ PAGE
   ================================================================ */

/* ---- FAQ Hero (no image variant) ---- */
.faq-content-card {
  padding: 60px 0 180px 0;
}

.faq-hero-wrapper {
  background: #fff url(/wp-content/themes/the-wealth-finder/assets/images/faqBG.svg) center bottom;
  background-size: cover;
  border-radius: 30px;
}

.faq-hero .about-hero-inner {
  padding-bottom: 60px;
}

.faq-hero .about-hero-content {
  max-width: 1200px;
}

/* ---- FAQ Page Tabs ---- */
.faq-page-section {
  padding: 80px 0 160px;
  background: var(--white);
}

.faq-tab-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 1000px;
  padding: 8px;
  max-width: 1200px;
  margin: 0 auto 60px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.12);
}

.faq-tab-bar::-webkit-scrollbar {
  display: none;
}

.faq-tab-btn {
  flex: 0 0 auto;
  padding: 12px 24px;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--primary-color);
  background: var(--white);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-tab-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: var(--primary-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-tab-btn.active {
  color: var(--white);
}

.faq-tab-btn.active::after {
  transform: scaleX(1);
}

.faq-tab-btn:hover:not(.active) {
  color: var(--primary-color);
  background: rgba(67, 93, 255, 0.08);
}

/* ---- FAQ Tab Panels ---- */
.faq-tab-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.faq-tab-panel.active {
  display: flex;
}

/* ---- FAQ Page Item Overrides (match Figma card style) ---- */
.faq-content-card .faq-item {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  overflow: hidden;
}

.faq-content-card .faq-question {
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: var(--slate-950);
}

.faq-content-card .faq-item.active .faq-answer {
  padding: 0 24px 20px;
}

.faq-content-card .faq-answer p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--slate-600);
}

.faq-content-card .faq-icon {
  color: var(--primary-color);
}

/* ---- FAQ CTA ---- */
.faq-cta .srv-cta-inner {
  max-width: 800px;
}

.faq-cta-subtitle {
  font-size: var(--body-xl-size);
  line-height: var(--body-xl-lh);
  color: var(--slate-600);
  margin-top: -28px;
  margin-bottom: 32px;
}

.faq-cta-disclaimer {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--slate-950);
  margin-top: 32px;
}

/* ---- FAQ PAGE RESPONSIVE ---- */
@media (max-width: 980px) {
  .faq-page-section {
    padding: 60px 0 120px;
  }

  .faq-content-card {
    padding: 40px 0 120px 0;
  }

  .faq-tab-bar {
    margin-bottom: 40px;
    max-width: 100%;
  }

  .faq-tab-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .faq-page-section {
    padding: 40px 0 80px;
  }

  .faq-content-card {
    padding: 30px 0 80px 0;
  }

  .faq-tab-bar {
    gap: 4px;
    padding: 6px;
    margin-bottom: 32px;
  }

  .faq-tab-btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .faq-content-card .faq-question {
    padding: 16px 20px;
    font-size: 16px;
    line-height: 24px;
  }

  .faq-content-card .faq-item.active .faq-answer {
    padding: 0 20px 16px;
  }

  .faq-content-card .faq-answer p {
    font-size: 14px;
    line-height: 22px;
  }

  .faq-cta .srv-cta-buttons {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .faq-content-card {
    padding: 20px 0 60px 0;
  }

  .faq-tab-bar {
    gap: 4px;
    padding: 4px;
    margin-bottom: 24px;
  }

  .faq-tab-btn {
    padding: 8px 14px;
    font-size: 12px;
  }

  .faq-content-card .faq-question {
    padding: 14px 16px;
    font-size: 15px;
  }

  .faq-content-card .faq-item.active .faq-answer {
    padding: 0 16px 14px;
  }
}

/* ================================================================
   CONTACT US PAGE
   ================================================================ */

/* ---- Contact Hero ---- */
.contact-hero .about-hero-wrapper {
  background: #fff url(/wp-content/themes/the-wealth-finder/assets/images/faqBG.svg) center bottom;
  background-size: cover;
}

.contact-hero .about-hero-content {
  max-width: 850px;
}

.contact-hero .about-hero-inner {
  padding-bottom: 60px;
}

/* ---- Info Card Section ---- */
.contact-info-card-section {
  padding: 160px 0;
  background: var(--white);
}

.contact-info-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.06);
  max-width: 1086px;
  margin: 0 auto;
}

.contact-info-card p {
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 400;
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

/* ---- Contact Form Section ---- */
.contact-form-section {
  padding: 0 0 160px;
  background: var(--white);
}

.contact-form-header {
  text-align: center;
  max-width: 554px;
  margin: 0 auto 40px;
}

.contact-form-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-bottom: 16px;
}

.contact-form-header p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.contact-form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.06);
  max-width: 1086px;
  margin: 0 auto;
}

.contact-submit-btn {
  width: 100%;
  justify-content: center;
}

/* ---- Offices Section ---- */
.contact-offices {
  padding: 160px 0 0;
  background: var(--neutral-100);
}

.contact-offices-header {
  text-align: center;
  max-width: 526px;
  margin: 0 auto 60px;
}

.contact-offices-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin-bottom: 16px;
}

.contact-offices-header p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.contact-offices-card {
  border-top: 2px solid var(--primary-color);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(to bottom, var(--white), rgba(255, 255, 255, 0));
  overflow: hidden;
  max-width: 1086px;
  margin: 0 auto;
}

.contact-office-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.contact-office-tabs::-webkit-scrollbar {
  display: none;
}

.contact-office-tab {
  flex: 1;
  padding: 12px 24px;
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--primary-color);
  background: #F1F5FF;
  border: none;
  border-right: 1px solid var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
  text-align: center;
}

.contact-office-tab:last-child {
  border-right: none;
}

.contact-office-tab.active {
  background: var(--white);
  border-bottom: none;
}

.contact-office-tab:hover:not(.active) {
  background: rgba(241, 245, 255, 0.7);
}

.contact-office-panel {
  display: none;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
}

.contact-office-panel.active {
  display: flex;
}

.contact-office-detail {
  display: flex;
  align-items: center;
  gap: 32px;
}

.contact-office-label {
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  width: 90px;
  flex-shrink: 0;
}

.contact-office-dash {
  width: 200px;
  height: 1px;
  background: var(--neutral-200);
  flex-shrink: 0;
}

.contact-office-value {
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 600;
  line-height: var(--body-md-lh);
  color: #0F172A;
}

.contact-map {
  margin-top: 0;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
}

/* ---- Associate Network Section ---- */
.contact-associate {
  padding: 160px 0;
  background: var(--white);
}

.contact-associate-card {
  background: var(--white);
  border-left: 6px solid var(--primary-color);
  border-radius: var(--radius-lg);
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.06), 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
  padding: 32px 40px;
  max-width: 1086px;
  margin: 0 auto;
}

.contact-associate-card h3 {
  font-family: var(--font-primary);
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-lh);
  color: var(--slate-950);
  margin-bottom: 24px;
}

.contact-associate-card>p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-bottom: 24px;
}

.contact-associate-card h4 {
  font-family: var(--font-primary);
  font-size: var(--body-lg-size);
  font-weight: 600;
  line-height: var(--body-lg-lh);
  color: #0F172A;
  margin-bottom: 16px;
}

.contact-associate-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-associate-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.contact-check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.contact-associate-note {
  font-family: var(--font-primary);
  font-size: var(--body-md-size);
  font-weight: 700;
  line-height: var(--body-md-lh);
  color: #0F172A;
  font-style: italic;
}

/* ---- Contact FAQ ---- */
.contact-faq {
  padding: 160px 0;
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/how-we-work-bg.svg) no-repeat center top;
  position: relative;
  overflow: hidden;
}

.contact-faq-header {
  text-align: center;
  max-width: 474px;
  margin: 0 auto 60px;
}

.contact-faq-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  margin: 16px 0;
}

.contact-faq-header p {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.contact-faq-list {
  max-width: 1000px;
  margin: 0 auto;
}

/* ---- Contact Partner CTA ---- */
.contact-partner-cta {
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/how-we-work-bg.svg) no-repeat center top;
}

.contact-partner-cta .cta-content {
  max-width: 560px;
  margin: 0 auto;
}

.contact-partner-cta .cta-content h2 {
  text-transform: capitalize;
}

.contact-partner-cta .cta-content p {
  max-width: 560px;
}

/* ---- CONTACT PAGE RESPONSIVE ---- */
@media (max-width: 980px) {
  .contact-info-card-section {
    padding: 100px 0;
  }

  .contact-info-card {
    padding: 24px 28px;
  }

  .contact-form-header h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .contact-form-card {
    padding: 24px 28px;
  }

  .contact-offices-header h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .contact-office-tab {
    padding: 10px 16px;
    font-size: 14px;
  }

  .contact-office-panel {
    padding: 28px;
  }

  .contact-office-dash {
    width: 100px;
  }

  .contact-associate-card {
    padding: 24px 28px;
  }

  .contact-associate-card h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .contact-faq-header h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .contact-partner-cta .cta-content h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .contact-map iframe {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .contact-info-card-section {
    padding: 80px 0;
  }

  .contact-form-section {
    padding: 0 0 80px;
  }

  .contact-form-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .contact-form-card {
    padding: 20px;
    border-radius: 24px;
  }

  .contact-offices {
    padding: 80px 0 0;
  }

  .contact-offices-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .contact-office-tabs {
    overflow-x: auto;
  }

  .contact-office-tab {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 13px;
  }

  .contact-office-panel {
    padding: 20px;
    gap: 16px;
  }

  .contact-office-detail {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .contact-office-dash {
    display: none;
  }

  .contact-office-label {
    width: auto;
  }

  .contact-associate {
    padding: 80px 0;
  }

  .contact-associate-card {
    padding: 20px;
    border-radius: 24px;
  }

  .contact-associate-card h3 {
    font-size: 22px;
    line-height: 28px;
  }

  .contact-faq {
    padding: 80px 0;
  }

  .contact-faq-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .contact-partner-cta .cta-content h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .contact-map iframe {
    height: 350px;
  }
}

@media (max-width: 480px) {
  .contact-info-card-section {
    padding: 60px 0;
  }

  .contact-info-card {
    padding: 16px;
    border-radius: 20px;
  }

  .contact-form-section {
    padding: 0 0 60px;
  }

  .contact-form-header h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .contact-form-card {
    padding: 16px;
    border-radius: 20px;
  }

  .contact-offices {
    padding: 60px 0 0;
  }

  .contact-offices-header h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .contact-office-tab {
    font-size: 12px;
    padding: 8px 12px;
  }

  .contact-office-panel {
    padding: 16px;
  }

  .contact-associate {
    padding: 60px 0;
  }

  .contact-associate-card {
    padding: 16px;
    border-radius: 20px;
  }

  .contact-associate-card h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .contact-faq {
    padding: 60px 0;
  }

  .contact-faq-header h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .contact-map iframe {
    height: 280px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* ============================================================
   CAREERS PAGE — Pixel-perfect from Figma (node 9437:7796)
   ============================================================ */

/* ---- CAREERS HERO ---- */
.careers-hero .about-hero-inner {
  padding-bottom: 0;
}

/* ---- QUOTE CARD ---- */
.careers-quote {
  padding: var(--section-padding) 0;
  background: var(--white);
}

.careers-quote-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.06);
  padding: 60px 80px;
  text-align: center;
}

.careers-quote-card p {
  font-size: var(--body-lg-size);
  font-weight: var(--body-lg-weight);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
  font-style: italic;
}

/* ---- WORKSTREAMS ---- */
.careers-workstreams {
  padding: var(--section-padding) 0;
  background: var(--white);
}

.careers-workstreams-header {
  text-align: center;
  margin-bottom: var(--section-gap);
}

.careers-workstreams-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
}

.careers-workstreams-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.careers-ws-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.careers-ws-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .careers-ws-icon img {
  filter: brightness(0) invert(1);
} */

.careers-ws-card h3 {
  font-size: var(--body-xl-size);
  font-weight: var(--body-xl-weight);
  line-height: var(--body-xl-lh);
  color: var(--slate-950);
}

.careers-ws-card p {
  font-size: var(--body-md-size);
  font-weight: var(--body-md-weight);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

/* ---- CAREERS STATS ---- */
.careers-stats {
  background: var(--neutral-100);
  padding: 80px 0;
}

.careers-stats-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(28px, 11.5vw, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.careers-stats-inner h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
  text-align: center;
}

.careers-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: 100%;
}

.careers-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px;
  border-bottom: 3px solid transparent;
}

.careers-stat-item.highlighted {
  border-bottom-color: #7084FF;
}

.careers-stat-number {
  font-size: 60px;
  font-weight: 600;
  line-height: 72px;
  letter-spacing: -1.2px;
  color: var(--primary-color);
}

.careers-stat-label {
  font-size: var(--body-md-size);
  font-weight: var(--body-md-weight);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  text-align: center;
}

/* ---- PERKS ---- */
.careers-perks {
  padding: var(--section-padding) 0;
  background: var(--white);
}

.careers-perks-header {
  text-align: center;
  margin-bottom: var(--section-gap);
}

.careers-perks-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
}

.careers-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.careers-perk-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.careers-perk-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--neutral-100) 0%, transparent 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
}

.careers-perk-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.careers-perk-card h3 {
  font-size: var(--body-xl-size);
  font-weight: var(--body-xl-weight);
  line-height: var(--body-xl-lh);
  color: var(--slate-950);
  position: relative;
  z-index: 1;
}

.careers-perk-card p {
  font-size: var(--body-md-size);
  font-weight: var(--body-md-weight);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  position: relative;
  z-index: 1;
}

/* ---- MEET OUR FOUNDER ---- */
.careers-founder {
  padding: var(--section-padding) 0;
  background: var(--neutral-100);
}

.careers-founder-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-left: 6px solid var(--primary-color);
}

.careers-founder-image {
  width: 320px;
  flex-shrink: 0;
}

.careers-founder-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.careers-founder-text {
  padding: 48px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.careers-founder-text h3 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-lh);
  color: var(--primary-color);
}

.careers-founder-role {
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--slate-500);
}

.careers-founder-text blockquote {
  margin-top: 8px;
}

.careers-founder-text blockquote p {
  font-size: var(--body-lg-size);
  font-weight: var(--body-lg-weight);
  line-height: var(--body-lg-lh);
  color: var(--slate-600);
  font-style: italic;
}

/* ---- LIFE AT TWF ---- */
.careers-life {
  padding-top: var(--section-padding);
  background: var(--white);
  overflow: hidden;
}

.careers-life-header {
  text-align: center;
  margin-bottom: var(--section-gap);
}

.careers-life-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
}

.careers-life-gallery {
  position: relative;
}

.careers-life-main-image {
  position: relative;
  width: 100%;
  height: 960px;
  overflow: hidden;
}

.careers-life-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.careers-life-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 63%, rgba(0, 0, 0, 0.85) 85%);
  pointer-events: none;
}

.careers-life-thumbstrip {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 2;
  padding: 0 40px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.careers-life-thumbstrip:active {
  cursor: grabbing;
}

.careers-life-thumbstrip::-webkit-scrollbar {
  display: none;
}

.careers-life-thumbtrack {
  display: flex;
  gap: 32px;
  width: max-content;
}

.careers-thumb {
  width: 300px;
  height: 180px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
  border: 4px solid transparent;
}

.careers-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.careers-thumb.active {
  border: 4px solid #03159D;
  padding: 6px;
  border-radius: 24px;
}

.careers-thumb.active img {
  border-radius: 20px;
  border: 1px solid #6474e3;
}

/* ---- SPLIT SECTIONS (Learn / Work With / Achieve) ---- */
/* ---- LEARN / WORKWITH / ACHIEVE (about-mission style) ---- */
.careers-learn {
  background: url(/wp-content/themes/the-wealth-finder/assets/images/about/mission.svg) no-repeat left bottom;
}

.careers-workwith {
  background: url(/wp-content/themes/the-wealth-finder/assets/images/about/vision.svg) no-repeat right bottom;
}

.careers-achieve {
  background: url(/wp-content/themes/the-wealth-finder/assets/images/about/mission.svg) no-repeat left bottom;
}

/* ---- OPEN ROLES ---- */
.careers-open-roles {
  padding: var(--section-padding) 0;
  background: var(--white);
}

.careers-roles-header {
  text-align: center;
  margin-bottom: var(--section-gap);
}

.careers-roles-header h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--primary-color);
}

.careers-roles-header p {
  font-size: var(--body-md-size);
  font-weight: var(--body-md-weight);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  margin-top: 16px;
}

.careers-roles-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 32px;
}

.careers-role-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.careers-role-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.careers-role-card h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--slate-950);
}

.careers-role-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.careers-role-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.careers-role-card .btn {
  flex-shrink: 0;
}

.careers-roles-footer {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ---- INTERNSHIP CTA ---- */
.careers-internship-cta {
  padding: var(--section-padding) 0;
  background: var(--neutral-100);
}

.careers-internship-card {
  background: var(--white);
  border: 1px solid #03159D;
  border-radius: var(--radius-xl);
  box-shadow: 0px 10px 30px -3px rgba(0, 0, 0, 0.06), 0px 0px 6px -4px rgba(0, 0, 0, 0.08);
  padding: 40px 200px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
}

.careers-internship-bg {
  position: absolute;
  inset: 0;

  background-size: cover;
  opacity: 0.4;
  mix-blend-mode: exclusion;
  pointer-events: none;
}

.careers-internship-card h3 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-lh);
  color: var(--slate-950);
  position: relative;
  z-index: 1;
}

.careers-internship-card p {
  font-size: var(--body-md-size);
  font-weight: var(--body-md-weight);
  line-height: var(--body-md-lh);
  color: var(--slate-600);
  position: relative;
  z-index: 1;
}

.careers-internship-card .btn {
  position: relative;
  z-index: 1;
}

.careers-internship-card .cta-glow {
  width: 240px;
  height: 240px;
}

.careers-internship-card .cta-glow-left {
  top: -182px;
  left: -165px;
  bottom: auto;
}

.careers-internship-card .cta-glow-right {
  bottom: -184px;
  right: -178px;
  top: auto;
  left: auto;
}

/* ---- CAREERS CTA (bottom) ---- */
.careers-cta.cta {
  padding: var(--section-padding) 0;
}

/* ============================================================
   CAREERS PAGE — RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {

  .careers-workstreams-grid,
  .careers-perks-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .careers-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .careers-stat-number {
    font-size: 48px;
    line-height: 60px;
  }

  .careers-internship-card {
    padding: 40px 80px;
  }

  .careers-life-main-image {
    height: 700px;
  }

  .careers-thumb {
    width: 200px;
    height: 120px;
  }

  .careers-life-thumbtrack {
    gap: 16px;
  }
}

@media (max-width: 960px) {
  .careers-quote-card {
    padding: 40px;
  }

  .careers-workstreams-header h2,
  .careers-perks-header h2,
  .careers-roles-header h2,
  .careers-life-header h2,
  .careers-stats-inner h2 {
    font-size: 36px;
    line-height: 44px;
  }

  .careers-founder-card {
    flex-direction: column;
    border-left: none;
    border-top: 6px solid var(--primary-color);
  }

  .careers-founder-image {
    width: 100%;
    height: 300px;
  }

  .careers-founder-text {
    padding: 32px;
  }

  .careers-life-main-image {
    height: 500px;
  }

  .careers-thumb {
    width: 160px;
    height: 100px;
  }

  .careers-life-thumbtrack {
    gap: 12px;
  }

  .careers-life-thumbstrip {
    padding: 0 24px;
  }

  .careers-internship-card {
    padding: 32px 40px;
  }
}

@media (max-width: 768px) {

  .careers-workstreams-grid,
  .careers-perks-grid {
    grid-template-columns: 1fr;
  }

  .careers-role-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .careers-role-card .btn {
    align-self: flex-start;
  }

  .careers-role-card h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .careers-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .careers-stat-number {
    font-size: 36px;
    line-height: 44px;
  }

  .careers-stat-item {
    padding: 20px 16px;
  }

  .careers-life-main-image {
    height: 400px;
  }

  .careers-thumb {
    width: 140px;
    height: 90px;
  }

  .careers-life-thumbtrack {
    gap: 10px;
  }

  .careers-life-thumbstrip {
    padding: 0 16px;
  }

  .careers-internship-card {
    padding: 24px 20px;
  }

  .careers-internship-card h3 {
    font-size: 24px;
    line-height: 32px;
  }
}

@media (max-width: 480px) {
  .careers-quote-card {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .careers-quote-card p {
    font-size: 15px;
  }

  .careers-workstreams-header h2,
  .careers-perks-header h2,
  .careers-roles-header h2,
  .careers-life-header h2,
  .careers-stats-inner h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .careers-stat-number {
    font-size: 28px;
    line-height: 36px;
  }

  .careers-life-main-image {
    height: 300px;
  }

  .careers-thumb {
    width: 120px;
    height: 75px;
    border-radius: 12px;
  }

  .careers-thumb.active {
    border-radius: 16px;
  }

  .careers-life-thumbtrack {
    gap: 8px;
  }

  .careers-life-thumbstrip {
    padding: 0 12px;
    bottom: 12px;
  }

  .careers-founder-image {
    height: 200px;
  }

  .careers-founder-text {
    padding: 20px;
  }

  .careers-founder-text h3 {
    font-size: 22px;
  }

  .careers-ws-card,
  .careers-role-card,
  .careers-perk-card {
    padding: 24px;
    border-radius: 20px;
  }

  .careers-role-meta {
    gap: 16px;
  }
}

/* ============================================================
   OPEN ROLES PAGE — Pixel-perfect from Figma (node 9457:9908)
   ============================================================ */

.openroles-hero .about-hero-inner {
  padding-bottom: 120px;
}

.openroles-listings {
  background: var(--white);
  padding: 60px 0 var(--section-padding);
}

.openroles-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 300px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.openroles-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
}

.openroles-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
}

.openroles-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.openroles-card-info h2 {
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
  line-height: var(--h6-lh);
  color: var(--slate-950);
}

.openroles-meta {
  display: flex;
  gap: 32px;
  align-items: center;
}

.openroles-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--body-md-size);
  font-weight: 500;
  line-height: var(--body-md-lh);
  color: var(--slate-600);
}

.openroles-card-body {
  display: flex;
  gap: 32px;
}

.openroles-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.openroles-col h3 {
  font-size: var(--body-lg-size);
  font-weight: 600;
  line-height: var(--body-lg-lh);
  color: var(--slate-950);
}

.openroles-col hr {
  border: none;
  border-top: 1px solid var(--neutral-200);
  margin: 0;
}

.openroles-col ul {
  list-style: disc;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.openroles-col ul li {
  font-size: var(--body-md-size);
  font-weight: var(--body-md-weight);
  line-height: 30px;
  color: var(--slate-600);
}

/* ---- OPEN ROLES RESPONSIVE ---- */
@media (max-width: 1200px) {
  .openroles-container {
    padding: 0 clamp(28px, 11.5vw, 220px);
  }
}

@media (max-width: 960px) {
  .openroles-container {
    padding: 0 clamp(20px, 5vw, 60px);
  }

  .openroles-card-header {
    flex-direction: column;
    gap: 16px;
  }

  .openroles-card-info h2 {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 768px) {
  .openroles-card-body {
    flex-direction: column;
    gap: 24px;
  }

  .openroles-meta {
    gap: 16px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .openroles-container {
    padding: 0 16px;
  }

  .openroles-card {
    padding: 20px;
    border-radius: 20px;
  }

  .openroles-hero .about-hero-inner {
    padding-bottom: 60px;
  }
}



/* ==========================================================================
   INTERNSHIP PAGE
   ========================================================================== */

/* ---------- Quote Card ---------- */
.internship-quote-card {
  background: var(--neutral-50);
  border-radius: var(--radius-lg);
  padding: 48px 60px;
  text-align: center;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
  margin-bottom: 80px;
}

.internship-quote-card p {
  font-size: 20px;
  line-height: 1.7;
  color: var(--slate-600);
  font-style: italic;
  max-width: 900px;
  margin: 0 auto;
}

/* ---------- Two Column Section ---------- */
.internship-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 0;
}

.internship-col h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--slate-950);
  margin-bottom: 16px;
}

.internship-col hr {
  border: none;
  height: 2px;
  background: var(--primary-gradient);
  margin-bottom: 24px;
  width: 60px;
}

.internship-col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.internship-col ul li {
  font-size: 18px;
  line-height: 1.6;
  color: var(--slate-600);
  padding-left: 28px;
  position: relative;
}

.internship-col ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-500);
}

.internship-col>p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--slate-600);
}

/* ---------- Apply Section ---------- */
.internship-apply {
  padding: var(--section-padding) 0;
  background: var(--neutral-50);
}

.internship-apply-header {
  text-align: center;
  margin-bottom: 48px;
}

.internship-apply-header h2 {
  font-size: 48px;
  font-weight: 700;
  color: var(--slate-950);
  margin-bottom: 12px;
}

.internship-apply-header p {
  font-size: 18px;
  color: var(--slate-600);
}

/* ---------- Form Card ---------- */
.internship-form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
  max-width: 900px;
  margin: 0 auto;
}

.internship-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.internship-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.internship-field.full {
  margin-bottom: 24px;
}

.internship-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-950);
}

.internship-field input,
.internship-field select,
.internship-field textarea {
  padding: 14px 18px;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  color: var(--slate-950);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.internship-field input:focus,
.internship-field select:focus,
.internship-field textarea:focus {
  border-color: var(--primary-500);
}

.internship-field input::placeholder,
.internship-field textarea::placeholder {
  color: #94A3B8;
}

.internship-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  cursor: pointer;
}

.internship-field textarea {
  resize: vertical;
  min-height: 120px;
}

/* ---------- Upload Zone ---------- */
.internship-upload {
  border: 2px dashed #1D30FF;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
}

.internship-upload:hover {
  background: rgba(29, 48, 255, 0.04);
}

.internship-upload.drag-over {
  background: rgba(29, 48, 255, 0.08);
  border-color: var(--primary-500);
}

.internship-upload svg {
  display: block;
  margin: 0 auto 12px;
}

.internship-upload p {
  font-size: 16px;
  color: var(--slate-600);
}

.internship-upload .upload-browse {
  color: var(--primary-500);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.internship-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ---------- Submit Button ---------- */
.internship-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .internship-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .internship-quote-card {
    padding: 36px 32px;
  }

  .internship-apply-header h2 {
    font-size: 36px;
  }

  .internship-form-card {
    padding: 32px 24px;
  }
}

@media (max-width: 768px) {
  .internship-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .internship-quote-card p {
    font-size: 17px;
  }

  .internship-col h2 {
    font-size: 26px;
  }

  .internship-apply-header h2 {
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .internship-quote-card {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .internship-quote-card p {
    font-size: 15px;
  }

  .internship-form-card {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .internship-upload {
    padding: 24px 16px;
  }

  .internship-apply-header h2 {
    font-size: 26px;
  }

  .srv-docs-grid.srv-docs-grid-2col {
    grid-template-columns: 1fr;
  }

}



/* ==========================================================================
   APPLY TO TWF PAGE
   ========================================================================== */

/* ---------- Info Section ---------- */
.apply-info {
  padding: var(--section-padding) 0;
}

.apply-quote-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
  margin-bottom: 60px;
}

.apply-quote-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-600);
}

.apply-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.apply-col {
  background: linear-gradient(to bottom, #f5f5f5, rgba(255, 255, 255, 0));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 32px;
}

.apply-col h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--slate-950);
  margin-bottom: 16px;
}

.apply-col hr {
  border: none;
  height: 1px;
  background: var(--neutral-200);
  margin-bottom: 16px;
}

.apply-col ul {
  list-style: disc;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.apply-col ul li {
  font-size: 16px;
  line-height: 1.9;
  color: var(--slate-600);
}

.apply-col>p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--slate-600);
}

/* ---------- How Hiring Works ---------- */
.apply-hiring {
  padding: var(--section-padding) 0;
  background: var(--neutral-100);
}

.apply-hiring-header {
  text-align: center;
  margin-bottom: 100px;
}

.apply-hiring-header h2 {
  font-size: 48px;
  font-weight: 600;
  color: var(--primary-color);
  letter-spacing: -0.96px;
}

.apply-hiring-timeline {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
}

.apply-timeline-line {
  position: absolute;
  left: 40px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(to bottom, var(--primary-500) 0%, var(--neutral-200) 100%);
}

.apply-step {
  display: flex;
  align-items: center;
  gap: 36px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 24px;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.apply-step-number {
  width: 80px;
  height: 80px;
  min-width: 80px;
  border-radius: 20px;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.72px;
}

.apply-step-content h4 {
  font-size: 24px;
  font-weight: 600;
  color: var(--slate-950);
  margin-bottom: 12px;
}

.apply-step-content p {
  font-size: 16px;
  color: var(--slate-600);
  line-height: 1.5;
}

/* ---------- Application Form ---------- */
.apply-form-section {
  padding: var(--section-padding) 0;
}

.apply-form-header {
  text-align: center;
  margin-bottom: 40px;
}

.apply-form-header h2 {
  font-size: 48px;
  font-weight: 600;
  color: var(--primary-color);
  letter-spacing: -0.96px;
  margin-bottom: 16px;
  text-transform: capitalize;
}

.apply-form-header p {
  font-size: 16px;
  color: var(--slate-600);
}

.apply-form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
  max-width: 1086px;
  margin: 0 auto;
}

.apply-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.apply-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apply-field.full {
  margin-bottom: 32px;
}

.apply-field label {
  font-size: 16px;
  font-weight: 500;
  color: #0F172A;
}

.apply-field input,
.apply-field select,
.apply-field textarea {
  padding: 12px 16px;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  color: var(--slate-950);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  height: 48px;
}

.apply-field textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus {
  border-color: var(--primary-500);
}

.apply-field input::placeholder,
.apply-field textarea::placeholder {
  color: #94A3B8;
}

.apply-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

/* ---------- Upload Zone ---------- */
.apply-upload {
  border: 2px dashed #1D30FF;
  border-radius: 20px;
  padding: 20px 24px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.apply-upload:hover {
  background: rgba(29, 48, 255, 0.04);
}

.apply-upload svg {
  display: block;
  margin: 0 auto 12px;
}

.apply-upload p {
  font-size: 16px;
  color: #000;
}

.apply-upload .upload-browse {
  color: #1D30FF;
  font-weight: 600;
}

.apply-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ---------- Submit ---------- */
.apply-submit-btn {
  width: 100%;
  justify-content: center;
  height: 48px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .apply-hiring-header {
    margin-bottom: 60px;
  }
}

@media (max-width: 960px) {
  .apply-columns {
    grid-template-columns: 1fr;
  }

  .apply-quote-card {
    padding: 32px;
  }

  .apply-hiring-header h2 {
    font-size: 36px;
  }

  .apply-hiring-header {
    margin-bottom: 48px;
  }

  .apply-form-header h2 {
    font-size: 36px;
  }

  .apply-form-card {
    padding: 32px 24px;
  }

  .apply-step-number {
    width: 60px;
    height: 60px;
    min-width: 60px;
    font-size: 28px;
    border-radius: 16px;
  }

  .apply-step {
    gap: 24px;
  }

  .apply-timeline-line {
    left: 30px;
  }
}

@media (max-width: 768px) {
  .apply-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .apply-hiring-header h2 {
    font-size: 30px;
  }

  .apply-form-header h2 {
    font-size: 30px;
  }

  .apply-step-content h4 {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .apply-step-content p {
    font-size: 14px;
  }

  .apply-col h3 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .apply-quote-card {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .apply-form-card {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .apply-upload {
    padding: 16px;
    border-radius: 16px;
  }

  .apply-hiring-header h2 {
    font-size: 26px;
  }

  .apply-form-header h2 {
    font-size: 26px;
  }

  .apply-step {
    padding: 16px;
    border-radius: 16px;
    gap: 16px;
  }

  .apply-step-number {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 20px;
    border-radius: 12px;
  }

  .apply-timeline-line {
    left: 24px;
  }
}



/* ==========================================================================
   BLOG LISTING PAGE
   ========================================================================== */

/* ---------- Blog Grid ---------- */
.blog-listing {
  padding: 60px 0 var(--section-padding);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.blog-page .blog-card {
  padding: 24px;
}

.blog-page .blog-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: #fff;
  width: 100%;
}

.blog-page .blog-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  transition: transform 0.55s ease;
}

.blog-page .blog-card:hover img {
  transform: scale(1.05);
}

.blog-page .blog-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.85) 100%);
  border-radius: 24px;
  z-index: 1;
}

.blog-page .blog-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-page .blog-card-info h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 8px;
}

.blog-page .blog-card-info .blog-card-date {
  font-size: 14px;
  color: #A3A3A3;
}

.blog-page .blog-card-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #fff;
  border-radius: 100px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  transition: background 0.3s;
}

.blog-page .blog-card:hover .blog-card-btn {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- Load More ---------- */
.blog-load-more {
  display: flex;
  justify-content: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .blog-page .blog-card {
    height: 480px;
  }
}

@media (max-width: 960px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-page .blog-card {
    height: 420px;
  }
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-page .blog-card {
    height: 400px;
  }
}

@media (max-width: 480px) {
  .blog-page .blog-card {
    height: 360px;
    padding: 16px;
    border-radius: 20px;
  }

  .blog-page .blog-card img {
    border-radius: 20px;
  }

  .blog-page .blog-card-overlay {
    border-radius: 20px;
  }

  .blog-page .blog-card-info h3 {
    font-size: 17px;
  }

  .blog-page .blog-card-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}



/* ==========================================================================
   BLOG DETAILS PAGE
   ========================================================================== */

/* ---------- Hero Extras ---------- */
.blogdetail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--primary-color);
  margin-bottom: 16px;
}

.blogdetail-breadcrumb a {
  color: #A3A3A3;
  text-decoration: none;
}

.blogdetail-breadcrumb a:hover {
  text-decoration: underline;
}

.blogdetail-meta {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 16px;
}

.blogdetail-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-color);
}

.blogdetail-hero-image {
  max-width: 1480px;
  margin: -40px auto 0;
  padding: 0 var(--container-padding);
  position: relative;
  z-index: 1;
}

.blogdetail-hero-image img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: 24px;
}

/* ---------- Layout ---------- */
.blogdetail-content {
  padding: 60px 0 var(--section-padding);
}

.blogdetail-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.blogdetail-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- Article Sections ---------- */
.blogdetail-section h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--slate-950);
  margin-bottom: 12px;
  line-height: 1.5;
}

.blogdetail-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-950);
  margin-top: 16px;
  margin-bottom: 12px;
}

.blogdetail-section p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-600);
  margin-bottom: 16px;
}

.blogdetail-section p:last-child {
  margin-bottom: 0;
}

.blogdetail-section ul,
.blogdetail-section ol {
  padding-left: 24px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blogdetail-section ul {
  list-style: disc;
}

.blogdetail-section ol {
  list-style: decimal;
}

.blogdetail-section li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-600);
}

/* ---------- Callouts ---------- */
.blogdetail-callout {
  border-left: 4px solid;
  border-radius: 24px;
  padding: 24px 32px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.02);
}

.blogdetail-callout h4 {
  font-size: 20px;
  font-weight: 600;
  color: var(--slate-950);
  margin-bottom: 12px;
}

.blogdetail-callout p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-600);
}

.blogdetail-callout-blue {
  background: #F1F5FF;
  border-color: var(--primary-color);
}

.blogdetail-callout-orange {
  background: #FFF7ED;
  border-color: #EA580C;
}

.blogdetail-callout-yellow {
  background: #FEFCE8;
  border-color: #CA8A04;
  margin-bottom: 16px;
}

.blogdetail-banner img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
}

/* ---------- Sidebar ---------- */
.blogdetail-sidebar {
  width: 460px;
  min-width: 460px;
  border-left: 1px solid var(--neutral-200);
  padding-left: 24px;
}

.blogdetail-sidebar-inner {
  position: sticky;
  top: 100px;
}

.blogdetail-sidebar-inner>h3 {
  font-size: 18px;
  font-weight: 600;
  color: #171717;
  margin-bottom: 16px;
}

.blogdetail-related {
  display: block;
  flex-direction: column;
}

.blogdetail-related a {
  display: block;
  height: 500px;
  padding: 24px;
  margin-bottom: 24px;

}

.blogdetail-related .blog-card-content {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
}

.blog-card-sm {
  height: 500px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .blogdetail-sidebar {
    width: 360px;
    min-width: 360px;
  }

  .blog-card-sm {
    height: 420px;
  }

  .blogdetail-hero-image img {
    height: 440px;
  }
}

@media (max-width: 960px) {
  .blogdetail-layout {
    flex-direction: column;
  }

  .blogdetail-sidebar {
    width: 100%;
    min-width: 0;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--neutral-200);
    padding-top: 40px;
  }

  .blogdetail-related {
    flex-direction: row;
  }

  .blog-card-sm {
    height: 380px;
  }

  .blogdetail-hero-image img {
    height: 360px;
  }
}

@media (max-width: 768px) {
  .blogdetail-meta {
    gap: 20px;
    flex-wrap: wrap;
  }

  .blogdetail-related {
    flex-direction: column;
  }

  .blog-card-sm {
    height: 360px;
  }

  .blogdetail-hero-image img {
    height: 280px;
    border-radius: 20px;
  }

  .blogdetail-callout {
    padding: 20px 24px;
    border-radius: 20px;
  }
}

@media (max-width: 480px) {
  .blogdetail-hero-image img {
    height: 200px;
    border-radius: 16px;
  }

  .blogdetail-section h2 {
    font-size: 18px;
  }

  .blogdetail-callout {
    padding: 16px 20px;
    border-radius: 16px;
  }

  .blogdetail-callout h4 {
    font-size: 17px;
  }
}


/* ========== REVIEW PAGE (scoped) ========== */
.review-page .review-page-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--section-gap);
}


/* ========== OUR TEAM PAGE ========== */

/* --- Section Header (shared) --- */
.team-section-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--section-gap);
}

.team-section-header h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.96px;
  color: var(--primary-color);
}

.team-section-header p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
  max-width: 434px;
}

/* --- Founders Section --- */
.team-founders {
  padding: var(--section-padding) 20px;
  background: #fff;
}

.team-founders-grid {
  display: flex;
  gap: 32px;
  width: 100%;
  flex-wrap: wrap;
}

.team-founder-card {
  flex: 1;
  background: #fff;
  border: 0.69px solid var(--neutral-200);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);

}

.team-founder-photo {
  width: 100%;
  height: 400px;
  background: #f6f6f6;
  overflow: hidden;
}

.team-founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-founder-info {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team-founder-name-block h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--slate-950);
}

.team-founder-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
}

.team-founder-bio {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
  display: block;
  margin-bottom: 16px;
}

.team-mentor-bio {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
  display: block;
  margin-bottom: 16px;

}

.read-more-btn {
  background: none;
  border: none;
  color: #2d3dbf;
  cursor: pointer;
  font-size: 14px;
  display: inline;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
}




/* Tags */
.team-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.team-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--slate-600);
}

/* Divider */
.team-divider {
  width: 100%;
  height: 1px;
  background: var(--neutral-200);
}

/* Social Row */
.team-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.team-email-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px;
  border: 1px solid #03159d;
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  background: transparent;
  background-image: linear-gradient(80deg, #03159D 10.59%, #4A63FD 93.98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  transition: all 0.3s ease;
}

.team-email-btn svg {

  flex-shrink: 0;
}

.team-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  border: 1px solid #03159d;
  background: #F1F5FF;
  color: #03159d;
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.team-social-link:hover {
  background: #dfe3ff;
  color: #fff;
}

.team-social-link svg {
  width: 24px;
  height: 24px;

}

/* --- Mentors Section --- */
.team-mentors {
  padding: var(--section-padding) 20px;
  background: var(--neutral-100);
}

.team-mentors-grid {
  display: flex;
  gap: 32px;
  width: 100%;
}

.team-mentor-card {
  flex: 1;
  background: #fff;
  border: 0.69px solid var(--neutral-200);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
}

.team-mentor-photo {
  width: 100%;
  height: 400px;
  background: #f6f6f6;
  overflow: hidden;
}

.team-mentor-photo img {
  width: 100%;
  height: fit-content;
  object-fit: cover;
}

.team-mentor-info {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team-mentor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.team-mentor-name-block h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--slate-950);
}

.team-mentor-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
}

/* .team-mentor-bio {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
  display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}
.team-mentor-bio.expanded {
    -webkit-line-clamp: unset;
    display: block;
} */



.team-mentor-bio {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
  display: block;
  margin-bottom: 16px;

}

.team-social-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* --- Team Members Section --- */
.team-members {
  padding: var(--section-padding) 20px;
  background: #fff;
}

.team-members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}

.team-member-card {
  background: #fff;
  border: 0.69px solid var(--neutral-200);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
}

.team-member-photo {
  width: 100%;
  height: 300px;
  background: #f6f6f6;
  overflow: hidden;
}

.team-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member-info {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team-member-name-block h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--slate-950);
}

.team-member-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
}

.team-member-bio {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
}

/* --- Team Responsive --- */
@media (max-width: 1200px) {
  .team-founders {
    padding: 100px 60px;
  }

  .team-mentors {
    padding: 100px 60px;
  }

  .team-members {
    padding: 100px 60px;
  }

  .team-founder-photo,
  .team-mentor-photo {
    height: 320px;
  }

  .team-section-header h2 {
    font-size: 36px;
    line-height: 44px;
  }
}

@media (max-width: 960px) {
  .team-founders {
    padding: 80px 40px;
  }

  .team-mentors {
    padding: 80px 40px;
  }

  .team-members {
    padding: 80px 40px;
  }

  .team-founders-grid,
  .team-mentors-grid {
    flex-direction: column;
  }

  .team-members-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-founder-photo,
  .team-mentor-photo {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .team-founders {
    padding: 60px 24px;
  }

  .team-mentors {
    padding: 60px 24px;
  }

  .team-members {
    padding: 60px 24px;
  }

  .team-members-grid {
    grid-template-columns: 1fr;
  }

  .team-section-header h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .team-founder-photo,
  .team-mentor-photo {
    height: 260px;
  }

  .team-member-photo {
    height: 260px;
  }

  .team-mentor-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .team-founders {
    padding: 48px 16px;
  }

  .team-mentors {
    padding: 48px 16px;
  }

  .team-members {
    padding: 48px 16px;
  }

  .team-section-header h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .team-founder-photo,
  .team-mentor-photo {
    height: 220px;
  }

  .team-member-photo {
    height: 200px;
  }

  .team-founder-info,
  .team-mentor-info,
  .team-member-info {
    padding: 24px 16px;
  }

  .team-tags {
    gap: 8px;
  }
}

/* =========================================================
   PARTNER WITH US PAGE
   ========================================================= */
.srv-partner-who-grid {
  grid-template-columns: repeat(3, 1fr);
}

.srv-partner-options {
  background: var(--neutral-100);
}

.srv-partner-options-grid {
  grid-template-columns: repeat(3, 1fr);
}

.srv-partner-option-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  border-radius: 32px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 0 0 6px rgba(0, 0, 0, 0.08);
}

.srv-partner-option-card .srv-twf-card-body h3 {
  font-size: 20px;
  line-height: 30px;
}

.srv-partner-option-card .srv-twf-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex: 1;
  width: 100%;
}

.srv-partner-option-card .srv-twf-card-body p {
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
  margin: 0;
}

.srv-partner-bestfor {
  background: #f1f5ff;
  border-left: 3px solid var(--primary-color);
  border-radius: 24px;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  margin-top: auto;
}

.srv-partner-bestfor strong {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--slate-900);
}

.srv-partner-bestfor span {
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
}

/* ---- Partner Get/Expect ---- */
.srv-partner-getexpect {
  padding: 160px 0;
}

.srv-partner-getexpect-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.srv-partner-getexpect-col {
  background: var(--white) url(/wp-content/themes/the-wealth-finder/assets/images/PartnerBg.svg) no-repeat top right;
  border: 1px solid var(--neutral-200);
  border-radius: 24px;
  padding: 25px 33px;
  box-shadow: 0 10px 30px -3px rgba(0, 0, 0, 0.06), 0 0 6px -4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.srv-partner-getexpect-col h2 {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--slate-950);
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--neutral-200);
}

.srv-partner-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srv-partner-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.srv-partner-checklist li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.srv-partner-checklist li span {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--slate-600);
}

.srv-partner-note {
  margin-top: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-style: italic;
  color: var(--slate-900);
}

/* ---- Partner Typical Cases ---- */
.srv-partner-cases {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-partner-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.srv-partner-cases-card {
  background: var(--white);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.srv-partner-cases-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: #E5E5E5 1px solid;
  padding-bottom: 16px;
}

.srv-partner-cases-card-header h3 {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--slate-950);
  margin: 0;
}

.srv-partner-cases-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.srv-partner-cases-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.srv-partner-cases-list li svg {
  flex-shrink: 0;
}

.srv-partner-cases-list li span {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--slate-600);
}

/* ---- Partner How Partnership Works ---- */
.srv-partner-howworks .about-hww-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  min-width: 80px;
  border-radius: 20px;
  font-family: var(--font-primary);
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  color: var(--white);
  background: linear-gradient(84.54deg, #03159D 10.59%, #4A63FD 93.98%);
  box-shadow: inset 0 1px 1px rgba(207, 231, 255, 0.2);
}

.srv-partner-howworks .about-hww-step-text h3 {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--slate-950);
  margin: 0;
}

/* ---- Partner Form ---- */
.srv-partner-form-wrapper {
  max-width: 1086px;
}

.srv-partner-form-wrapper h2 {
  margin-bottom: 16px !important;
}

.srv-partner-form-wrapper .srv-cta-text {
  margin-bottom: 40px;
}

.srv-partner-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--white);
  border-radius: 32px;
  padding: 32px 40px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.srv-partner-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
}

.srv-partner-form-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-top: 12px;
}

.srv-partner-form-field label {
  position: absolute;
  top: 0;
  left: 17px;
  padding: 0 6px;
  background: var(--white);
  z-index: 1;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--slate-900);
}

.srv-partner-form-field input,
.srv-partner-form-field textarea,
.srv-partner-form-field select {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  background: var(--white);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-950);
  box-sizing: border-box;
  transition: border-color 0.2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.srv-partner-form-field input::placeholder,
.srv-partner-form-field textarea::placeholder {
  color: #94A3B8;
}

.srv-partner-form-field input:focus,
.srv-partner-form-field textarea:focus,
.srv-partner-form-field select:focus {
  border-color: var(--primary-500);
}

.srv-partner-form-field select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.srv-partner-form-field textarea {
  resize: vertical;
  height: 120px;
  min-height: 120px;
}

.srv-partner-form-field--full {
  grid-column: 1 / -1;
}

.srv-partner-form-actions {
  display: flex;
  gap: 16px;
}

.srv-partner-form-actions .btn {
  flex: 1;
  justify-content: center;
}

/* ---- Partner Responsive ---- */
@media (max-width: 1200px) {
  .srv-partner-getexpect {
    padding: 120px 0;
  }

  .srv-partner-cases {
    padding: 120px 0;
  }
}

@media (max-width: 980px) {
  .srv-partner-who-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .srv-partner-options-grid {
    grid-template-columns: 1fr;
  }

  .srv-partner-getexpect {
    padding: 100px 0;
  }

  .srv-partner-getexpect-col {
    padding: 20px 24px;
  }

  .srv-partner-getexpect-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .srv-partner-cases {
    padding: 100px 0;
  }

  .srv-partner-cases-grid {
    grid-template-columns: 1fr;
  }

  .srv-partner-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .srv-partner-who-grid {
    grid-template-columns: 1fr;
  }

  .srv-partner-getexpect {
    padding: 80px 0;
  }

  .srv-partner-getexpect-col h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .srv-partner-cases {
    padding: 80px 0;
  }

  .srv-partner-cases-card {
    padding: 24px;
  }

  .srv-partner-cases-card-header h3 {
    font-size: 18px;
    line-height: 26px;
  }

  .srv-partner-howworks .about-hww-step-number {
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 24px;
    border-radius: 14px;
  }
}

@media (max-width: 560px) {
  .srv-partner-getexpect {
    padding: 60px 0;
  }

  .srv-partner-cases {
    padding: 60px 0;
  }

  .srv-partner-cases-card {
    padding: 20px;
    border-radius: 20px;
  }

  .srv-partner-form {
    padding: 24px 20px;
  }

  .srv-partner-form-actions .btn {
    flex: auto;
    width: 100%;
  }
}

/* =========================================================
   NBFC CONSULTING PAGE — UNIQUE SECTIONS
   ========================================================= */

/* ---- Hero full-width image variant ---- */
.about-hero-image--full {
  width: 100%;
  max-width: 100%;
  border-radius: 24px;
  overflow: hidden;
}

.about-hero-image--full img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- What We Help You Achieve ---- */
.srv-achieve {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-achieve-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.srv-achieve-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 20px;
  padding: 24px 28px;
}

.srv-achieve-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.srv-achieve-item p {
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
  margin: 0;
}

/* ---- Services Grid (3-col variant) ---- */
.srv-services-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ---- Services We Offer (NBFC) ---- */
.srv-services-offer {
  padding: 160px 0;
  border-radius: 32px 32px 0 0;
}

.srv-services-offer .srv-services-grid {
  justify-content: center;
}

.srv-services-offer .srv-service-for-card {
  background: linear-gradient(180deg, #F5F5F5 0%, rgba(255, 255, 255, 0.00) 100%);
  border: none;
}

.srv-services-offer .srv-service-for-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.srv-services-offer .srv-service-for-grid>.srv-service-for-card {
  width: calc((100% - 48px) / 3);
}

/* ---- Conditions / Readiness ---- */
.srv-conditions {
  padding: 160px 0;
  background: var(--neutral-100);
}

/* ---- Types of NBFCs ---- */
.srv-nbfc-types {
  padding: 160px 0;
}

.srv-nbfc-types .srv-service-for-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.srv-nbfc-types .srv-service-for-grid>.srv-service-for-card {
  width: calc((100% - 48px) / 3);
}

.srv-nbfc-types .srv-service-for-card {
  background: linear-gradient(180deg, #F5F5F5 0%, rgba(255, 255, 255, 0.00) 100%);
  border: none;
}

.srv-conditions-card {
  background: var(--white);
  border-radius: 40px;
  padding: 40px;
  box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.02);
  margin-bottom: 40px;
}

.srv-conditions-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.srv-conditions-row {
  display: flex;
  gap: 40px;
}

.srv-condition-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.srv-condition-item svg {
  flex-shrink: 0;
}

.srv-condition-item p {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--slate-600);
  margin: 0;
}

/* ---- Why Choose TWF ---- */
.srv-why-choose {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-why-choose-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.srv-why-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border-radius: 16px;
  padding: 20px 24px;
}

.srv-why-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.srv-why-item p {
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
  margin: 0;
}

/* ---- Form Tags (Multi-select) ---- */
.srv-form-tags {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.srv-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  background: var(--white);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--slate-950);
  cursor: pointer;
  transition: all 0.2s;
}

.srv-tag:hover {
  border-color: var(--primary-500);
  color: var(--primary-500);
}

.srv-tag.active {
  background: var(--primary-gradient);
  border-color: transparent;
  color: var(--white);
}

/* ---- NBFC Consulting Responsive ---- */
@media (max-width: 1200px) {
  .srv-achieve {
    padding: 120px 0;
  }

  .srv-conditions {
    padding: 120px 0;
  }

  .srv-why-choose {
    padding: 120px 0;
  }

  .srv-services-offer {
    padding: 120px 0;
  }

  .srv-nbfc-types {
    padding: 120px 0;
  }
}

@media (max-width: 980px) {
  .srv-achieve {
    padding: 100px 0;
  }

  .srv-achieve-grid {
    grid-template-columns: 1fr;
  }

  .srv-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .srv-conditions {
    padding: 100px 0;
  }

  .srv-conditions-row {
    flex-direction: column;
    gap: 24px;
  }

  .srv-why-choose {
    padding: 100px 0;
  }

  .srv-why-choose-grid {
    grid-template-columns: 1fr;
  }

  .srv-services-offer {
    padding: 100px 0;
  }

  .srv-services-offer .srv-service-for-grid>.srv-service-for-card {
    width: calc((100% - 24px) / 2);
  }

  .srv-nbfc-types {
    padding: 100px 0;
  }

  .srv-nbfc-types .srv-service-for-grid>.srv-service-for-card {
    width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 768px) {
  .srv-services-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .srv-achieve {
    padding: 60px 0;
  }

  .srv-achieve-item {
    padding: 20px;
    border-radius: 16px;
  }

  .srv-conditions {
    padding: 60px 0;
  }

  .srv-conditions-card {
    padding: 24px;
    border-radius: 24px;
  }

  .srv-why-choose {
    padding: 60px 0;
  }

  .srv-why-item {
    padding: 16px 20px;
    border-radius: 12px;
  }

  .srv-services-offer {
    padding: 60px 0;
  }

  .srv-services-offer .srv-service-for-grid>.srv-service-for-card {
    width: 100%;
  }

  .srv-nbfc-types {
    padding: 60px 0;
  }

  .srv-nbfc-types .srv-service-for-grid>.srv-service-for-card {
    width: 100%;
  }
}

/* =========================================================
   PERSONA PAGES — ICON-BASED TWF HELPS
   ========================================================= */
.srv-twf-helps--icons {
  padding: 160px 0;
  background: var(--neutral-100);
}

.srv-twf-icon-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.srv-twf-icon-card {
  border-radius: 32px 32px 0 0;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.02);
  width: calc((100% - 48px) / 3);
}

.srv-twf-icon-badge {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.srv-twf-icon-card h3 {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--slate-950);
  margin: 0;
}

.srv-twf-icon-card p {
  font-size: 16px;
  line-height: 24px;
  color: var(--slate-600);
  margin: 0;
}

/* ---- Persona Pages Responsive ---- */
@media (max-width: 1200px) {
  .srv-twf-helps--icons {
    padding: 120px 0;
  }
}

@media (max-width: 980px) {
  .srv-twf-helps--icons {
    padding: 100px 0;
  }

  .srv-twf-icon-card {
    width: calc((100% - 24px) / 2);
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .srv-twf-icon-card {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .srv-twf-helps--icons {
    padding: 60px 0;
  }

  .srv-twf-icon-card {
    padding: 20px;
    border-radius: 20px;
  }

  .srv-twf-icon-card h3 {
    font-size: 18px;
    line-height: 26px;
  }
}

/* ========== SERVICE MARQUEE ========== */
.srv-marquee {
  background: var(--white);
  padding: 40px 0 0;
  max-width: 1420px;
  margin: 0 auto;
}

.srv-marquee-wrapper {
  position: relative;
  overflow: hidden;
}

.srv-marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  animation: srv-marquee-scroll 30s linear infinite;
}

.srv-marquee-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 100px;
  background: var(--primary-gradient);
  color: var(--white);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

.srv-marquee-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 40px;
}

.srv-marquee-logo svg {
  display: block;
  width: 36px;
  height: 40px;
}

.srv-marquee-fade {
  position: absolute;
  top: 0;
  width: 260px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.srv-marquee-fade--left {
  left: 0;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.srv-marquee-fade--right {
  right: 0;
  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}

@keyframes srv-marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .srv-marquee {
    padding: 24px 0 0;
  }

  .srv-marquee-fade {
    width: 80px;
  }

  .srv-marquee-pill {
    padding: 10px 18px;
    font-size: 14px;
  }

  .srv-marquee-logo,
  .srv-marquee-logo svg {
    width: 28px;
    height: 32px;
  }
}

/* ============================
   HERO RICH ANIMATIONS
   ============================ */

/* --- Floating orbs --- */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
  will-change: transform, opacity;
}

.hero.hero-animated .hero-orb {
  animation: heroOrbIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-orb--1 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.10) 0%, transparent 70%);
  top: 8%;
  left: -5%;
  animation-delay: 0.3s !important;
}

.hero.hero-animated .hero-orb--1 {
  animation: heroOrbIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards,
    heroFloat1 8s ease-in-out 1.3s infinite;
}

.hero-orb--2 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.10) 0%, transparent 70%);
  top: 15%;
  right: 5%;
}

.hero.hero-animated .hero-orb--2 {
  animation: heroOrbIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards,
    heroFloat2 10s ease-in-out 1.5s infinite;
}

.hero-orb--3 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  bottom: 25%;
  left: 10%;
}

.hero.hero-animated .hero-orb--3 {
  animation: heroOrbIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards,
    heroFloat3 12s ease-in-out 1.7s infinite;
}

.hero-orb--4 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
  bottom: 35%;
  right: 12%;
}

.hero.hero-animated .hero-orb--4 {
  animation: heroOrbIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards,
    heroFloat1 9s ease-in-out 1.9s infinite;
}

.hero-orb--5 {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero.hero-animated .hero-orb--5 {
  animation: heroOrbIn 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards,
    heroFloat2 7s ease-in-out 2.1s infinite;
}

/* Grid lines background effect */
.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 20%, transparent 70%);
}

.hero.hero-animated .hero-grid-lines {
  animation: heroGridIn 2s ease 0.5s forwards;
}

/* --- Badge animation --- */
.hero-badge-anim {
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  margin-bottom: 20px;
}

.hero.hero-animated .hero-badge-anim {
  animation: heroBadgeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-color);
  box-shadow: 0 2px 16px rgba(59, 130, 246, 0.08);
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
  position: relative;
}

.hero-badge-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.3);
  animation: heroPulse 2s ease-in-out infinite;
}

/* --- Title word-by-word animation --- */
.hero-title-anim {
  opacity: 0;
}

.hero-title-anim .hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px) rotateX(40deg);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center bottom;
}

.hero.hero-animated .hero-title-anim {
  opacity: 1;
}

.hero.hero-animated .hero-title-anim .hero-word.visible {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

/* --- Subtitle slide-up --- */
.hero-subtitle-anim {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
}

.hero.hero-animated .hero-subtitle-anim {
  animation: heroSubtitleIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 0.6s);
}

/* --- Buttons stagger --- */
.hero-buttons-anim {
  opacity: 0;
  transform: translateY(16px);
}

.hero.hero-animated .hero-buttons-anim {
  animation: heroButtonsIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 0.9s);
}

.hero-btn-anim {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
}

.hero.hero-animated .hero-btn-anim:nth-child(1) {
  animation: heroBtnIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 1s);
}

.hero.hero-animated .hero-btn-anim:nth-child(2) {
  animation: heroBtnIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 1.15s);
}

/* Subtle glow ring on primary button after entrance */
.hero-btn-anim.btn-primary {
  position: relative;
}

.hero.hero-animated .hero-btn-anim.btn-primary {
  box-shadow: 0 0 0 0 rgba(74, 99, 253, 0);
  animation: heroBtnIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    heroBtnGlow 3.5s ease-in-out 2.8s infinite;
}

.hero.hero-animated .hero-btn-anim.btn-secondary {
  animation: heroBtnIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* === KEYFRAMES === */

@keyframes heroOrbIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

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

@keyframes heroFloat1 {

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

  25% {
    transform: translate(12px, -18px);
  }

  50% {
    transform: translate(-8px, -30px);
  }

  75% {
    transform: translate(16px, -12px);
  }
}

@keyframes heroFloat2 {

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

  33% {
    transform: translate(-16px, 14px);
  }

  66% {
    transform: translate(10px, -20px);
  }
}

@keyframes heroFloat3 {

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

  25% {
    transform: translate(20px, 10px);
  }

  50% {
    transform: translate(-10px, 25px);
  }

  75% {
    transform: translate(-20px, -8px);
  }
}

@keyframes heroGridIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes heroBadgeIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }

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

@keyframes heroPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes heroSubtitleIn {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
  }

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

@keyframes heroButtonsIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

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

@keyframes heroBtnIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }

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

@keyframes heroBtnGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(74, 99, 253, 0);
  }

  50% {
    box-shadow: 0 0 20px 4px rgba(74, 99, 253, 0.25);
  }
}

/* Hero SVG illustration */
.heroSvg {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 10;
  opacity: 0;
  transform: translateY(40px);
}

/* Inline animated SVG */
.hero-logo-svg {
  width: 100%;
  max-width: 890px;
  height: auto;
}

/* Stroke draw-on */
.hero-logo-stroke {
  fill: none;
  stroke: url(#heroStrokeGrad);
  stroke-width: 2;
  stroke-dasharray: 4500;
  stroke-dashoffset: 4500;
}

/* Fill fade-in */
.hero-logo-fill {
  fill: url(#heroFillGrad);
  opacity: 0;
}

/* Glow behind logo */
.hero-logo-glow {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 99, 253, 0.3) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: -1;
}

/* Floating particles */
.hero-logo-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 11;
}

.hero-logo-particle--1 {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  top: 15%;
  left: 10%;
}

.hero-logo-particle--2 {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  top: 25%;
  right: 15%;
}

.hero-logo-particle--3 {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.25);
  bottom: 30%;
  left: 20%;
}

.hero-logo-particle--4 {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.35);
  bottom: 20%;
  right: 25%;
}

.hero-logo-particle--5 {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.2);
  top: 50%;
  left: 5%;
}

/* Triggered animations (tied to hero-animated) */
.hero.hero-animated .heroSvg {
  animation: heroSvgIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 1.3s);
}

.hero.hero-animated .hero-logo-stroke {
  animation: heroLogoDrawPath 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 1.5s);
}

.hero.hero-animated .hero-logo-fill {
  animation: heroLogoFillIn 1.2s ease forwards;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 2.2s);
}

.hero.hero-animated .hero-logo-glow {
  animation: heroLogoGlowPulse 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    heroLogoGlowBreathe 4s ease-in-out infinite;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 2.2s),
    calc(var(--hero-word-count, 10) * 0.04s + 3.7s);
}

.hero.hero-animated .hero-logo-particle--1 {
  animation: heroLogoParticleIn 0.6s ease forwards, heroLogoFloat1 6s ease-in-out infinite;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 2.8s), calc(var(--hero-word-count, 10) * 0.04s + 3.4s);
}

.hero.hero-animated .hero-logo-particle--2 {
  animation: heroLogoParticleIn 0.6s ease forwards, heroLogoFloat2 8s ease-in-out infinite;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 3s), calc(var(--hero-word-count, 10) * 0.04s + 3.6s);
}

.hero.hero-animated .hero-logo-particle--3 {
  animation: heroLogoParticleIn 0.6s ease forwards, heroLogoFloat3 7s ease-in-out infinite;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 3.2s), calc(var(--hero-word-count, 10) * 0.04s + 3.8s);
}

.hero.hero-animated .hero-logo-particle--4 {
  animation: heroLogoParticleIn 0.6s ease forwards, heroLogoFloat1 9s ease-in-out infinite;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 3.4s), calc(var(--hero-word-count, 10) * 0.04s + 4s);
}

.hero.hero-animated .hero-logo-particle--5 {
  animation: heroLogoParticleIn 0.6s ease forwards, heroLogoFloat2 5s ease-in-out infinite;
  animation-delay: calc(var(--hero-word-count, 10) * 0.04s + 3.6s), calc(var(--hero-word-count, 10) * 0.04s + 4.2s);
}

/* Logo animation keyframes */
@keyframes heroSvgIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

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

@keyframes heroLogoDrawPath {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes heroLogoFillIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes heroLogoGlowPulse {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes heroLogoGlowBreathe {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
}

@keyframes heroLogoParticleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }

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

@keyframes heroLogoFloat1 {

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

  25% {
    transform: translate(12px, -18px);
  }

  50% {
    transform: translate(-8px, -30px);
  }

  75% {
    transform: translate(16px, -12px);
  }
}

@keyframes heroLogoFloat2 {

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

  33% {
    transform: translate(-16px, 14px);
  }

  66% {
    transform: translate(10px, -20px);
  }
}

@keyframes heroLogoFloat3 {

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

  25% {
    transform: translate(20px, 10px);
  }

  50% {
    transform: translate(-10px, 25px);
  }

  75% {
    transform: translate(-20px, -8px);
  }
}

/* Mouse-follow glow (positioned by JS) */
.hero-mouse-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

.hero.hero-animated .hero-mouse-glow {
  opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .hero-orb,
  .hero-grid-lines,
  .hero-badge-anim,
  .hero-title-anim .hero-word,
  .hero-subtitle-anim,
  .hero-buttons-anim,
  .hero-btn-anim,
  .heroSvg,
  .hero-mouse-glow,
  .hero-badge-dot::after,
  .hero-logo-stroke,
  .hero-logo-fill,
  .hero-logo-glow,
  .hero-logo-particle {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .hero-logo-stroke {
    stroke-dashoffset: 0 !important;
  }

  .hero-title-anim {
    opacity: 1 !important;
  }
}

/* Responsive adjustments for hero animations */
@media (max-width: 1024px) {
  .hero-orb--1 {
    width: 220px;
    height: 220px;
  }

  .hero-orb--2 {
    width: 140px;
    height: 140px;
  }

  .hero-orb--3 {
    width: 100px;
    height: 100px;
  }

  .hero-orb--4 {
    width: 70px;
    height: 70px;
  }

  .hero-orb--5 {
    width: 50px;
    height: 50px;
  }

  .hero-mouse-glow {
    width: 280px;
    height: 280px;
  }
}

@media (max-width: 767px) {
  .hero-orb--1 {
    width: 160px;
    height: 160px;
  }

  .hero-orb--2 {
    width: 100px;
    height: 100px;
  }

  .hero-orb--3 {
    width: 80px;
    height: 80px;
  }

  .hero-orb--4,
  .hero-orb--5 {
    display: none;
  }

  .hero-mouse-glow {
    display: none;
  }

  .hero-badge {
    font-size: 13px;
    padding: 6px 16px;
  }

  .hero-badge-anim {
    margin-bottom: 16px;
  }

  .hero-logo-particle--4,
  .hero-logo-particle--5 {
    display: none;
  }

  .hero-logo-glow {
    width: 80%;
    height: 80%;
  }
}

/* ============================
   GLOBAL PAGE ANIMATIONS
   ============================ */

/* --- Header entrance: slide down + fade in on load --- */
.site-header {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    padding 0.3s ease,
    box-shadow 0.3s ease;
}

.site-header.header-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Header nav link hover: subtle lift */
.nav-item>a {
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.nav-item>a:hover {
  transform: translateY(-1px);
}

/* Header CTA buttons: micro-interaction on hover */
.header-cta .btn {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.header-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(3, 21, 157, 0.15);
}

/* --- Section badges: subtle bounce-in --- */
.section-badge {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
}

[data-reveal].revealed .section-badge,
.section-badge.badge-animated {
  animation: badgePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes badgePop {
  0% {
    transform: scale(0.85) translateY(8px);
    opacity: 0;
  }

  60% {
    transform: scale(1.04) translateY(-2px);
    opacity: 1;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* --- Stat rows: count-up glow on reveal --- */
.stat-row {
  transition: border-bottom-color 0.35s ease;
}

.stat-number {
  transition: color 0.4s ease;
}

.stat-row.counted .stat-number {
  background: linear-gradient(135deg, var(--primary-color), #4A63FD);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Service cards: smooth inner glow on hover (no translate to avoid grid clipping) --- */
.service-card {
  transition: border-color 0.4s ease,
    box-shadow 0.4s ease,
    background 0.4s ease;
}

.service-card:hover {
  box-shadow: inset 0 0 40px rgba(67, 93, 255, 0.04), 0 8px 32px rgba(67, 93, 255, 0.08);
}

.service-card .service-icon {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .service-icon {
  transform: scale(1.1) translateY(-2px);
}

.service-card .service-info h3 {
  transition: color 0.35s ease;
}

.service-card:hover .service-info h3 {
  color: #2D3FE0;
}

/* --- Situation cards: tilt on hover --- */
.situation-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.situation-card:hover {
  transform: translateY(-8px) rotate(-0.5deg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}

/* --- Process steps: draw-in animation --- */
.process-step {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.process-step:hover {
  transform: translateY(-4px);
}

.process-step:hover .process-icon {
  animation: processIconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes processIconBounce {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.12);
  }

  70% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

/* --- Testimonial cards: hover lift + shadow --- */
.testimonial-card {
  transition-delay: 0s !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.testimonial-image img {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-image:hover img {
  transform: scale(1.05) translateY(-4px);
}

/* --- Blog cards: zoom image on hover --- */
.blog-card-image {
  overflow: hidden;
}

.blog-card-image img {
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

/* Blog arrow badge spin on hover */
.blog-arrow-badge {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
}

.blog-card:hover .blog-arrow-badge {
  transform: rotate(-45deg) scale(1.1);
}

/* --- FAQ: smooth open/close + icon rotation --- */
.faq-answer {
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease,
    padding 0.4s ease;
}

.faq-question {
  transition: color 0.3s ease;
}

.faq-item.active .faq-question {
  color: #020617;
}

.faq-icon {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* --- Associate cards: stagger hover glow --- */
.associate-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.associate-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.08);
}

/* --- CTA section: breathing glow --- */
.cta-glow {
  transition: opacity 0.6s ease;
}

.cta.revealed .cta-glow {
  animation: ctaBreathe 4s ease-in-out infinite;
}

@keyframes ctaBreathe {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* --- Footer: stagger link reveals --- */
.footer-links a,
.footer-contact li {
  transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.footer-links a:hover {
  transform: translateX(4px);
}

.footer-contact li:hover {
  transform: translateX(4px);
}

/* Footer socials: bounce on hover */
.footer-socials a {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.footer-socials a:hover {
  transform: scale(1.15) translateY(-3px);
}

/* Footer newsletter: focus glow */
.footer-newsletter {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.footer-newsletter:focus-within {
  border-bottom-color: rgba(74, 99, 253, 0.6);
  box-shadow: 0 4px 12px rgba(74, 99, 253, 0.10);
}

/* Footer bottom entrance */
.footer-bottom-row {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-bottom-row.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Global: smooth scroll & anchor highlighting --- */
html {
  scroll-behavior: smooth;
}

/* --- Buttons everywhere: micro feedback --- */
.btn {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease,
    background 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* --- Section title text reveal effect --- */
.text-reveal-line {
  display: inline-block;
  overflow: hidden;
}

.text-reveal-line>span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-reveal-line.revealed>span {
  transform: translateY(0);
}

/* --- Scroll progress bar at top --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--primary-gradient);
  z-index: 10001;
  transform-origin: left;
  transform: scaleX(0);
  transition: none;
  pointer-events: none;
}

/* Reduced motion — kill it all */
@media (prefers-reduced-motion: reduce) {

  .site-header,
  .stat-row,
  .service-card,
  .situation-card,
  .testimonial-card,
  .associate-card,
  .footer-bottom-row,
  .section-badge,
  .process-step,
  .blog-card-image img,
  .blog-arrow-badge,
  .faq-answer,
  .faq-icon,
  .cta-glow,
  .footer-socials a,
  .footer-links a,
  .footer-contact li,
  .btn,
  .text-reveal-line>span {
    animation: none !important;
    transition: none !important;
  }

  .site-header {
    opacity: 1;
    transform: none;
  }

  .footer-bottom-row {
    opacity: 1;
    transform: none;
  }

  .scroll-progress {
    display: none;
  }
}



/* / Hide after 12 cards = 6 clients / */
.testimonials-grid .testimonial-card:nth-child(n+9) {
  display: none;
}

/* / Show all cards / */
.testimonials-grid.show-all .testimonial-card {
  display: flex;
}

@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* / Mobile */
@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

.ns-message.ns-success {
  color: #4ade80;
  font-size: 13px;
}

.ns-message.ns-error {
  color: #f87171;
  font-size: 13px;
}

/* New Css 10 July */
.internship-page-bottom-margin {
  margin-bottom: 32px;
}

.not-find-role-top-padding {
  padding-top: 80px !important;
}

.top-bottom-padding-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}


/* Success message css 13/07/2026 */
.submission-success {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 40px;
  background: #FFFFFF;
  border-radius: 32px;
  text-align: center;
  box-sizing: border-box;
}

.submission-success__icon {
  margin-bottom: 24px;
}

.submission-success__icon svg {
  display: block;
  width: 124px;
  height: 124px;
  margin: 0 auto;
}

.submission-success__title {
  margin: 0;
  color: #020E6A;
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
}

.submission-success__description {
  margin: 24px auto 40px;
  max-width: 560px;
  color: #475569;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}

.submission-success__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 611px;
  height: 48px;
  padding: 12px 24px;
  box-sizing: border-box;

  border-radius: 100px;
  background: linear-gradient(84.54deg, #03159D 10.59%, #4A63FD 93.98%);

  color: #FFFFFF;
  text-decoration: none;

  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;

  cursor: pointer;
  transition: all .2s ease;
}

.submission-success__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(3, 21, 157, 0.2);
  color: #FFFFFF;
  text-decoration: none;
}

.submission-success__button:visited {
  color: #FFFFFF;
  text-decoration: none;
}

.submission-success__button:focus {
  color: #FFFFFF;
  text-decoration: none;
}

.submission-success__button:active {
  transform: translateY(0);
  color: #FFFFFF;
  text-decoration: none;
}

.submission-success__button:focus-visible {
  outline: 3px solid rgba(74, 99, 253, 0.3);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .submission-success {
    padding: 40px 24px;
    border-radius: 24px;
  }

  .submission-success__icon svg {
    width: 96px;
    height: 96px;
  }

  .submission-success__title {
    font-size: 28px;
    line-height: 36px;
  }

  .submission-success__description {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 32px;
  }
}

@media (max-width: 480px) {
  .submission-success {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .submission-success__icon svg {
    width: 80px;
    height: 80px;
  }

  .submission-success__title {
    font-size: 24px;
    line-height: 32px;
  }

  .submission-success__description {
    font-size: 15px;
    line-height: 24px;
  }

  .submission-success__button {
    width: 100%;
  }
}

/* =========== 29/07/2027 ========= */
.reduced-height-image {
  height: 80vh;
}

/* --- Testimonial video button & modal popup --- */
.testimonial-card.has-video {
  position: relative;
}

.testimonial-video-play-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 50%;
  outline: none;
  z-index: 5;
}

.testimonial-video-play-btn:hover {
  transform: scale(1.08);
}

.testimonial-video-play-btn svg {
  display: block;
  width: 64px;
  height: 64px;
}

.testimonial-footer .testimonial-video-play-btn {
  position: relative;
  top: auto;
  right: auto;
  margin-left: auto;
}

.testimonial-footer .testimonial-video-play-btn svg {
  width: 40px;
  height: 40px;
}

@media (max-width: 480px) {
  .testimonial-video-play-btn svg {
    width: 48px;
    height: 48px;
  }

  .testimonial-footer .testimonial-video-play-btn svg {
    width: 32px;
    height: 32px;
  }
}

.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal.active {
  opacity: 1;
  pointer-events: all;
}

.video-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.75);
  /* Modern slate overlay */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 960px;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: scale(0.85);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100000;
}

.video-modal.active .video-modal-content {
  transform: scale(1);
}

.video-modal-video-wrapper {
  position: relative;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  height: 0;
}

.video-modal-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: contain;
}

.video-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #fff;
  z-index: 100001;
}

.video-modal-close:hover {
  background: #E7000B;
  border-color: #E7000B;
  transform: scale(1.1) rotate(90deg);
}

.video-modal-close svg {
  width: 18px;
  height: 18px;
  display: block;
}

.mobile-cta-header-unset {
  padding-top: unset;
  margin-top: 20px;
}

@media (max-width: 560px) {
  .reduced-height-image {
    height: unset;
  }
}



.about-hero-image img {
  height: 80vh;
}

@media (max-width: 560px) {
  .about-hero-image img {
    height: unset;
  }
}

/* Header icon */
.header-call-button span {
  display: flex;
  gap: 5px;
  align-items: center;
}

.header-call-button span svg {
  width: 20px;
  height: 20px;
}

.header-call-button span svg path {
  fill: #03159D;
  transition: fill 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-call-button:hover span svg path {
  fill: var(--white);
}

/* Phone call button specific styles */
.header-call-button:not(.whatsapp-us-btn) {
  background: #03159D !important;
  color: #FFFFFF !important;
  border: 1px solid #03159D !important;
  -webkit-text-fill-color: #FFFFFF !important;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-call-button:not(.whatsapp-us-btn)::after {
  background: #020E6A !important;
  /* Slightly darker main blue for hover */
  display: block !important;
}

.header-call-button:not(.whatsapp-us-btn):hover {
  color: #FFFFFF !important;
  border-color: #020E6A !important;
}

/* Ensure phone button SVG path is white */
.header-call-button:not(.whatsapp-us-btn) span svg path {
  fill: #FFFFFF !important;
  transition: fill 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Whatsapp button css */
.whatsapp-us-btn {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: #4CAF50 !important;
  border: 1px solid #4CAF50 !important;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.whatsapp-us-btn::after {
  background: #3E8E41 !important;
  /* Darker green for hover */
  display: block !important;
}

.whatsapp-us-btn:hover {
  color: #FFFFFF !important;
  border-color: #3E8E41 !important;
}

/* Ensure the SVG icon paths transition smoothly */
.whatsapp-us-btn svg path {
  transition: fill 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Normal state: White circle with green phone inside */
.whatsapp-us-btn svg path:first-of-type {
  fill: #FFFFFF !important;
}

.whatsapp-us-btn svg path:nth-of-type(2) {
  fill: #4CAF50 !important;
}

/* Hover state: Keep white circle, phone transitions to match darker hover bg */
.whatsapp-us-btn:hover svg path:nth-of-type(2) {
  fill: #3E8E41 !important;
}

@media (max-width: 480px) {
  .team-founder-photo {
    height: 100%;
  }
}