/*
==================================================
MDHANI - services.css
Shared stylesheet for all service pages.

Layout classes remain section-specific.
Typography classes are reusable across all service pages.

Reusable:
.section-title
.section-description
.subsection-title
.card-title
.card-description
.small-heading
.small-description
==================================================
*/


/* ============ HERO ============ */
.hero{
  position:relative;
  background-color: var(--navy);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 140px var(--section-h) 150px var(--section-h) !important;
  overflow:hidden;
  min-height: 100vh;
  display:flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  text-align: left !important;
  margin-bottom: 0;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(
    to right,
    rgba(12, 27, 43, 0.40) 0%,
    rgba(12, 27, 43, 0.22) 45%,
    rgba(12, 27, 43, 0.06) 78%,
    rgba(12, 27, 43, 0.04) 100%
  );
  pointer-events:none;
  z-index: 2;
}
.hero.hero-tint::before{ background: linear-gradient(to right, rgba(12,27,43,0.50) 0%, rgba(12,27,43,0.30) 45%, rgba(12,27,43,0.10) 78%, rgba(12,27,43,0.04) 100%); }
.hero-no-overlay::before{
  display: none !important;
}
.hero-grid{
  position:relative; z-index:5;
  display:flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  text-align: left !important;
  max-width:920px !important;
  margin:0 !important;
  padding:0 !important;
  width:100%;
  flex: 1;
}
.hero-copy{
  max-width: 100% !important;
  margin:0 !important;
  padding:0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100%;
  flex: 1;
}
.hero-eyebrow{
  display:flex; align-items:center; gap:13px; margin-bottom:24px;
  opacity:0; animation: fadeUp .8s .3s var(--ease) forwards;
}
.eyebrow-line{ width:36px; height:1px; background:var(--gold-light); }
.eyebrow-text{ font-size:16px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-pale); font-weight:500; }
.hero h1,
.hero h1 .hl,
.hero h1 .hl:nth-child(1),
.hero h1 .hl:nth-child(2),
.hero h1 .hl:nth-child(3),
.hero h1 .hl-inner{
  font-family:var(--font-display) !important;
  font-weight:700 !important;
  font-size: clamp(44px, 5.5vw, 74px) !important;
  line-height:1.19 !important;
  color:#fff !important;
  letter-spacing:-0.01em !important;
  text-align: left !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55);
}
.hero h1{
  margin-top: auto !important;
  margin-bottom: auto !important;
  padding: 30px 0 !important;
  text-align: left !important;
  align-self: flex-start !important;
}
.hl{ display:block; overflow:hidden; text-align: left !important; }
.hl-inner{ display:block; transform:translateY(110%); animation: lineReveal .9s var(--ease) forwards; text-align: left !important; }
.hl:nth-child(1) .hl-inner{ animation-delay:.45s; }
.hl:nth-child(2) .hl-inner{ animation-delay:.60s; }

@keyframes lineReveal{ to{ transform:translateY(0); } }

.hero-sub{
  font-size:17.5px; line-height:1.85; color:rgba(247,242,231,0.72);
  max-width:600px; margin:0 0 38px 0; font-weight:300;
  opacity:0; animation: fadeUp .8s 0.85s var(--ease) forwards;
}
.hero-actions{
  display:flex !important;
  align-items:center !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  gap:26px !important;
  flex-wrap:wrap !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  opacity:0;
  animation: fadeUp .8s .65s var(--ease) forwards;
}

.hero-visual{
  display: none;
}
.hero-visual img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  transition: transform .6s var(--ease);
}
.hero-visual:hover img{
  transform: scale(1.03);
}

.btn-primary{
  display:inline-flex; align-items:center; gap:11px; padding:16px 34px;
  background:var(--gold); color:#fff; font-size:14.5px; letter-spacing:1.8px;
  text-transform:uppercase; font-weight:600; transition:background .25s, transform .2s, box-shadow .25s;
  box-shadow: 0 4px 20px rgba(193,138,53,0.25);
}
.btn-primary:hover{ background:var(--gold-light); transform:translateX(3px); box-shadow: 0 6px 24px rgba(193,138,53,0.4); }
.btn-primary svg{ transition:transform .2s; }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-ghost-dark{
  display:inline-flex; align-items:center; gap:10px; font-size:14.5px; letter-spacing:1.8px;
  text-transform:uppercase; color:#ffffff !important; font-weight:600; transition:color .25s, border-color .25s;
  border-bottom:1.5px solid rgba(255,255,255,0.7); padding-bottom:6px;
}
.btn-ghost-dark:hover{ color:var(--gold-light) !important; border-color:var(--gold-light); }

/* ============ SECTION LABEL ============ */
.section-label{ display:flex; align-items:center; gap:13px; margin-bottom:24px; justify-content:flex-start; }
.section-label.center{ justify-content:center; }
.sl-line{ width:36px; height:1px; background:var(--gold); }
.sl-text{ font-size:16px; letter-spacing:3.5px; text-transform:uppercase; color:var(--gold); font-weight:600; }

/* ============ SECTION 1: SPLIT LAYOUT ============ */
.intro-split{
  padding: var(--section-v) var(--section-h);
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap:60px; align-items:center;
}
.intro-split-img{ 
  position:relative; 
  width: 100%;
  max-width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto; 
}
.intro-split-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.14);
}
.intro-split-img::before{
  content:''; position:absolute; top:-14px; left:-14px; right:14px; bottom:14px;
  border:1px solid var(--gold-line); z-index:-1;
}
.section-title{ font-family:var(--font-display); font-weight:300; font-size:clamp(38px, 4.5vw, 54px); line-height:1.18; margin-bottom:24px; color:var(--navy); }
.section-description{ font-size:16px; line-height:1.9; color:var(--ink-soft); margin-bottom:32px; }
.profile-metrics{ display:grid; grid-template-columns: 1fr 1fr; gap:20px 30px; margin-bottom:36px; }
.metric-tag{ display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--navy); font-weight:500; }
.metric-tag svg{ color:var(--gold); flex-shrink:0; }
.highlight-statement{
  border-left: 2px solid var(--gold); padding-left:20px; font-family:var(--font-display);
  font-size:24px; line-height:1.4; color:var(--navy); font-style:italic; margin-top:30px;
}

/* ============ SECTION 2: WHO WE SERVE ============ */
.premium-serve{ background: var(--cream-deep); padding: var(--section-v) var(--section-h); text-align:center; }
.premium-serve h2{ font-family:var(--font-display); font-weight:300; font-size:clamp(38px, 4.5vw, 54px); line-height:1.18; color:var(--navy); margin-bottom:56px; }
.serve-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:30px; max-width:1200px; margin:0 auto; }
.serve-card{
  background: var(--cream); padding: 40px 30px; text-align:left;
  border: 1px solid rgba(22,33,46,0.05); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.serve-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(12,27,43,0.06);
  border-color: var(--gold-line);
}
.serve-icon{ width:48px; height:48px; color:var(--gold); margin-bottom:24px; display:flex; align-items:center; }
.serve-icon img{ width:38px; height:38px; object-fit:contain; display:block; }
.card-title{ font-family:var(--font-display); font-size:25px; color:var(--navy); margin-bottom:14px; font-weight:400; }
.card-description{ font-size:14px; color:var(--ink-soft); line-height:1.75; }

/* ============ SECTION 3: TIMELINE VOYAGE ============ */
.voyage{ padding:var(--section-v) var(--section-h); text-align:center; overflow:hidden; }
.voyage h2{ font-family:var(--font-display); font-weight:300; font-size:clamp(38px, 4.5vw, 54px); line-height:1.18; color:var(--navy); margin-bottom:64px; }
.voyage-track{
  position:relative; max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:repeat(6,1fr); gap:0;
}
.voyage-line{
  position:absolute; top:46px; left:8%; right:8%; height:1px;
  background-image: linear-gradient(to right, var(--gold-line) 0, var(--gold-line) 6px, transparent 6px, transparent 13px);
  background-size: 13px 1px; background-repeat:repeat-x;
  z-index:0;
}
.v-stop{ position:relative; z-index:1; padding:0 10px; }
.v-icon{
  width:92px; height:92px; border-radius:50%; background:var(--cream);
  border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px; color:var(--navy); transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.v-icon img{
  width:56px; height:56px; object-fit:contain; display:block;
}
.v-stop:hover .v-icon{ transform:translateY(-5px); border-color:var(--gold); background:#fff; }
.v-title{ font-family:var(--font-display); font-size:24px; color:var(--navy); margin-bottom:8px; font-weight:600; }
.v-desc{ font-size:17px; color:var(--ink-soft); line-height:1.6; max-width:190px; margin:0 auto; }

/* ============ SECTION 4: HOW WE SELECT FUNDS ============ */
.fund-selection{ padding: var(--section-v) var(--section-h); background: var(--cream); }
.fund-selection h2{ font-family:var(--font-display); font-weight:300; font-size:clamp(38px, 4.5vw, 54px); line-height:1.18; color:var(--navy); text-align:center; margin-bottom:64px; }
.selection-row{ display:grid; grid-template-columns: 1fr 1fr; gap:54px; align-items:center; margin-bottom:96px; }
.selection-row:last-child{ margin-bottom:0; }
.selection-row.reverse .selection-img-wrap{ order: 2; }
.selection-img-wrap{ 
  position:relative; 
  width: 100%;
  max-width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto; 
}
.selection-img-wrap img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  border-radius:4px; 
  box-shadow:0 20px 48px rgba(0,0,0,0.14); 
}
.selection-img-wrap::before{
  content:''; position:absolute; top:-12px; left:-12px; right:12px; bottom:12px;
  border: 1px solid var(--gold-line); z-index:-1;
}
.subsection-title{ font-family:var(--font-display); font-size:clamp(44px, 3.5vw, 48px); line-height:1.2; color:var(--navy); margin-bottom:24px; font-weight:400; }
.selection-blocks{ display:grid; grid-template-columns: 1fr; gap:28px; }
.selection-block{ border-left:2px solid var(--paper-line); padding-left:24px; }
.small-heading{ font-size:25px; text-transform:uppercase; letter-spacing:2.2px; color:var(--gold); margin-bottom:8px; font-weight:700; }
.small-description{ font-size:19px; color:var(--ink-soft); line-height:1.9; }

/* ============ SECTION 5: MONITORING (DARK) ============ */
.monitoring-dark{ background: var(--navy); padding: var(--section-v) var(--section-h); color: #fff; position:relative; }
.monitoring-dark::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle at 15% 75%, rgba(193,138,53,0.08) 0%, transparent 60%);
  pointer-events:none;
}
.monitoring-dark h2{ font-family:var(--font-display); font-weight:300; font-size:clamp(38px, 4.5vw, 54px); line-height:1.18; color:#fff; margin-bottom:20px; }
.monitoring-dark .section-sub{ font-size:17px; color: rgba(247,242,231,0.65); max-width:600px; margin-bottom:64px; font-weight:300; }
.monitoring-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:40px; }
.monitor-item{ background: var(--navy-mid); padding: 40px; border-top: 2px solid transparent; transition: border-color 0.3s, background 0.3s; }
.monitor-item:hover{ border-color: var(--gold); background: var(--navy-soft); }
.card-title-dark{ font-family:var(--font-display); font-size:24px; color:#fff; margin-bottom:12px; font-weight:400; }
.card-description-dark{ font-size:13.5px; color: rgba(247,242,231,0.55); line-height:1.8; }
.monitor-graphic{ margin-top:24px; height:1px; background: rgba(255,255,255,0.08); position:relative; }
.monitor-graphic::after{ content:''; position:absolute; top:0; left:0; width:30%; height:1px; background: var(--gold-light); }

/* ============ SECTION 6: COMPLIANCE ============ */
.compliance-section{ padding: var(--section-v) var(--section-h); background: var(--cream); text-align:center; }
.compliance-section h2{ font-family:var(--font-display); font-weight:300; font-size:clamp(38px, 4.5vw, 54px); line-height:1.18; color:var(--navy); margin-bottom:54px; }
.compliance-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:30px; max-width:1100px; margin:0 auto 48px; }
.compliance-card{
  background: #fff; padding: 40px 32px; text-align:left; border: 1px solid var(--paper-line);
}
.compliance-title{ font-family:var(--font-display); font-size:24px; color:var(--navy); margin-bottom:12px; font-weight:500; }
.compliance-description{ font-size:14px; color:var(--ink-soft); line-height:1.8; }
.disclaimer-box{
  max-width:1100px; margin:0 auto; padding:24px 32px; border: 1px solid rgba(22,33,46,0.08);
  background: rgba(22,33,46,0.02); text-align:left; font-size:12.5px; color:var(--ink-faint); line-height:1.7;
}

/* ============ SECTION 7: WHY CHOOSE (TRUSTBLOCK) ============ */
.trustblock{ padding:var(--section-v) var(--section-h); background: var(--cream-deep); }
.trustblock h2{ font-family:var(--font-display); font-weight:300; font-size:clamp(36px, 4.2vw, 50px); line-height:1.18; color:var(--navy); text-align:center; margin-bottom:54px; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
.trust-card{ text-align:left; background: var(--cream); padding: 30px 24px; border-bottom: 2px solid transparent; transition: border-color 0.3s; }
.trust-card:hover { border-color: var(--gold); }
.trust-title{ font-family:var(--font-display); font-size:21px; color:var(--navy); margin-bottom:12px; font-weight:500; }
.trust-description{ font-size:13px; color:var(--ink-soft); line-height:1.8; }

/* ============ CTA BAND ============ */
.cta-band{
  position:relative; background:var(--navy); padding:0; overflow:hidden;
  display:grid; grid-template-columns:1.1fr 0.9fr; min-height:420px; align-items:stretch;
}
.cta-text{ padding: 90px var(--section-h); display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }
.cta-text h2{ font-family:var(--font-display); font-weight:300; font-size:clamp(26px,3vw,52px); color:#fff; line-height:1.15; margin-bottom:18px; }
@media (max-width:768px){ .cta-text h2, .cta-text h2.section-title{ font-size:clamp(20px,6.2vw,40px) !important; } }
.cta-text h2 em{ color:var(--gold-light); font-style:italic; }
.cta-text p{ color:rgba(247,242,231,0.62); font-size:17px; line-height:1.8; max-width:520px; margin-bottom:30px; }
.cta-photo{ position:relative; overflow:hidden; background: var(--navy-mid); display:flex; align-items:center; justify-content:center; }
.cta-photo img,
.cta-photo video{ width:100%; height:100%; object-fit:cover; filter:brightness(.99) saturate(1); display:block; }
.cta-photo::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, var(--navy) 0%, transparent 35%); z-index:1;
  pointer-events:none;
}
.cta-photo svg{ width:160px; height:160px; color: rgba(193,138,53,0.15); }

/* ============ STAGE 2: RESPONSIVE DEFECT FIXES ============ */
/* 769-900px: 4-col trust grid and 6-col timeline overflowed the viewport (tracks could not shrink below
   their longest word). Reflow to 2 and 3 columns in that range only; mobile (<=768) and >=901 unchanged. */
@media (min-width: 769px) and (max-width: 900px) {
  .trust-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voyage-track{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
  .voyage-line{ display: none; }
}

/* >=1800px: the five service pages' sections spanned the full viewport. Keep section content within ~1600px, centred.
   Section backgrounds stay full-bleed; the header and footer are untouched. */
@media (min-width: 1800px) {
  body.service-page main > section{ --section-h: max(96px, calc((100vw - 1600px) / 2)); }
}

/* ============ WIDE SCREENS: fuller layout for Who We Serve, process steps and compliance (1200px and up) ============ */
@media (min-width:1200px){
  .serve-grid{ max-width:min(1500px,100%); gap:44px; }
  .serve-card{ padding:48px 40px; }
  .serve-icon{ width:56px; height:56px; margin-bottom:28px; }
  .serve-icon img{ width:44px; height:44px; }
  .card-title{ font-size:29px; margin-bottom:16px; }
  .card-description{ font-size:16px; line-height:1.8; }
  .voyage-track{ max-width:min(1600px,100%); }
  .v-stop{ padding:0 16px; }
  .v-icon{ width:108px; height:108px; margin-bottom:28px; }
  .v-icon img{ width:64px; height:64px; }
  .voyage-line{ top:54px; }
  .v-title{ font-size:27px; margin-bottom:12px; }
  .v-desc{ font-size:18px; max-width:250px; }
  .compliance-grid{ max-width:min(1440px,100%); gap:44px; margin-bottom:56px; }
  .compliance-card{ padding:52px 44px; }
  .compliance-title{ font-size:28px; margin-bottom:16px; }
  .compliance-description{ font-size:16px; line-height:1.85; }
  .disclaimer-box{ max-width:min(1440px,100%); padding:28px 40px; font-size:14px; }
}

/* ============ ELEVATED SECTIONS (all service pages) ============ */
/* Who We Serve: white cards, gold top line, round icon badges */
.premium-serve{ background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(193,138,53,.10), transparent 70%), var(--cream-deep); }
.premium-serve h2::after,
.voyage h2::after{ content:""; display:block; width:64px; height:2px; background:linear-gradient(90deg,transparent,#C18A35,transparent); margin:22px auto 0; }
.serve-card{ background:#fff; border:1px solid rgba(193,138,53,.18); border-top:3px solid #C18A35; box-shadow:0 14px 40px rgba(12,27,43,.07); border-radius:4px; }
.serve-card:hover{ box-shadow:0 22px 54px rgba(12,27,43,.12); }
.serve-icon{ width:72px; height:72px; border-radius:50%; background:linear-gradient(145deg,#FBF4E4,#F3E6C9); border:1px solid rgba(193,138,53,.35); justify-content:center; }
.serve-icon img{ width:42px; height:42px; }
.card-title{ position:relative; padding-bottom:16px; margin-bottom:18px; }
.card-title::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:#C18A35; }

/* How We Build Portfolios: framed band, glowing gold rings, stronger dashed line */
.voyage{ background:#fff; border-top:1px solid rgba(193,138,53,.18); border-bottom:1px solid rgba(193,138,53,.18); }
.v-icon{ background:linear-gradient(145deg,#FFFFFF,#F7EFDD); border:1.5px solid #C18A35; box-shadow:0 12px 30px rgba(193,138,53,.22), 0 0 0 8px rgba(193,138,53,.07); }
.voyage-line{ height:2px; background-image:linear-gradient(to right,#C18A35 0,#C18A35 8px,transparent 8px,transparent 16px); background-size:16px 2px; opacity:.55; }

/* Transparency and Compliance: dark band. It follows the navy Monitoring section, so it uses a deeper navy
   and starts with a gold hairline to keep the two bands visibly separate. */
.compliance-section{ background:linear-gradient(180deg,#060F1B,#0A1726); border-top:1px solid rgba(217,168,86,.45); }
.compliance-section .sl-text{ color:#E7C27A; }
.compliance-section .sl-line{ background:#E7C27A; }
.compliance-section h2{ color:#fff; }
.compliance-card{ background:rgba(255,255,255,.04); border:1px solid rgba(217,168,86,.28); border-top:3px solid #C18A35; }
.compliance-card::before{ content:""; display:block; width:56px; height:56px; border-radius:50%; margin-bottom:22px; background:rgba(193,138,53,.14) center/26px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E7C27A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3.2v6.1c0 5-3.4 8.4-8 9.7-4.6-1.3-8-4.7-8-9.7V5.2L12 2z'/%3E%3Cpath d='M8.3 12.2l2.6 2.6 4.8-5'/%3E%3C/svg%3E"); border:1px solid rgba(217,168,86,.4); }
.compliance-title{ color:#fff; }
.compliance-description{ color:rgba(247,242,231,.78); }
.disclaimer-box{ background:rgba(255,255,255,.04); border:1px solid rgba(217,168,86,.2); border-left:3px solid #C18A35; color:rgba(247,242,231,.6); }
.disclaimer-box strong, .disclaimer-box b{ color:#E7C27A; }

/* Why Clients Choose Our Approach: same elevated style as the other sections */
.trustblock{ background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(193,138,53,.10), transparent 70%), var(--cream-deep); }
.trustblock h2::after{ content:""; display:block; width:64px; height:2px; background:linear-gradient(90deg,transparent,#C18A35,transparent); margin:22px auto 0; }
.trust-grid{ counter-reset:tc; }
.trust-card{ counter-increment:tc; background:#fff; border:1px solid rgba(193,138,53,.18); border-top:3px solid #C18A35; border-bottom:1px solid rgba(193,138,53,.18); box-shadow:0 14px 40px rgba(12,27,43,.07); border-radius:4px; }
.trust-card:hover{ border-color:rgba(193,138,53,.45); border-top-color:#C18A35; box-shadow:0 22px 54px rgba(12,27,43,.12); }
.trust-card::before{ content:"0" counter(tc); display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin-bottom:20px; border-radius:50%; background:linear-gradient(145deg,#FBF4E4,#F3E6C9); border:1px solid rgba(193,138,53,.35); font:600 14px/1 "Inter",Arial,sans-serif; letter-spacing:.06em; color:#B8872F; }
.trust-title{ position:relative; padding-bottom:14px; margin-bottom:16px; }
.trust-title::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:#C18A35; }
@media (min-width:1200px){
  .trust-grid{ max-width:min(1500px,100%); margin:0 auto; gap:40px; }
  .trust-card{ padding:40px 28px; }
  .trust-title{ font-size:23px; }
  .trust-description{ font-size:15.5px; line-height:1.8; }
}

/* The Facilitation Focus icon is a wide strip (three small figures in a row), so it looks smaller than the squarer icons
   in a round ring. It is drawn tighter and heavier now, and enlarged a little here to carry the same weight. */
.v-icon img[src*="Facilitation-Focus"] { transform: scale(1.3); }