/* ============================================================
   Shared SERVICE-page stylesheet
   Loaded on every service detail page (budgeting, retirement-
   planning, tax-planning, mutual-funds-sips, …20 total). All
   service pages share the same template / class names; this is
   the one stylesheet that drives them.

   Page is built up from these sections:
     1. NAV tweaks         (logo, slightly larger links)
     2. BREADCRUMB         (with top offset for fixed nav)
     3. BUTTONS            (.btn-wa adds a WhatsApp variant)
     4. SECTIONS           (.section + .si 1100 container)
     5. HERO + .hpanel     (right-side stat panel)
     6. PROBLEM/SOLUTION   (.psc drain vs well — service variant)
     7. CONTEXT GRAPH      (.ctx-graph cards)
     8. PERSONAS           (.pc cards)
     9. PROCESS            (.proc-grid 5-step)
    10. SERVICE OPTIONS    (.opt-tabs + .oc cards)
    11. TEAM (advisor)     (.team-wrap split)
    12. TESTIMONIALS       (.tc dark variant)
    13. WHY-US             (.diff-grid)
    14. FAQ                (.faq-2col)
    15. LEAD FORM          (.lead-grid + .fcard)
    16. POPUP              (.popup-overlay)
    18. WA FLOAT           (.wa-float)
   ============================================================ */

/* Base font sizing on service pages is slightly larger */
body{font-size:17px;line-height:1.7}

/* Nav rendering is fully owned by global.css now — page-level overrides
   were causing the service-page nav to look different (smaller, no
   underline) from every other page. The drawer link/CTA sizing also
   belongs in global.css so it's consistent. */

/* ── BREADCRUMB ── */
.breadcrumb{padding:14px 48px;font-size:15px;}

/* ── BUTTONS (service-specific sizes + WhatsApp variant) ── */
.btn-primary{font-size:16px;padding:16px 30px}
.btn-wa{display:inline-flex;align-items:center;gap:8px;background:rgba(37,211,102,0.1);color:#4CAF50;font-size:16px;font-weight:600;padding:15px 24px;border-radius:8px;border:1px solid rgba(37,211,102,0.3);cursor:pointer;text-decoration:none;transition:background .2s}
.btn-wa:hover{background:rgba(37,211,102,0.18)}
.btn-wa .wd{width:9px;height:9px;border-radius:50%;background:#4CAF50;flex-shrink:0}

/* ── SECTIONS (override global widths for service pages) ── */
.si{max-width:1100px}
/* Full-width container — section content stretches to the viewport edges.
   The heading block is centred, but the H2 shrinks to its text and the
   gold bar (rendered as ::after) sits flush with the first character —
   not centred under the middle of the line. */
.si--full{max-width:none;width:100%;margin:0;text-align:center}
.si--full > .sec-title{display:inline-block;text-align:left;margin-bottom:30px}
.si--full > .sec-title::after{
  content:'';display:block;width:40px;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  border-radius:2px;margin-top:10px;
}
.si--full > .sec-sub{margin-left:auto;margin-right:auto}
/* The standalone .gbar div isn't needed any more — the ::after replaces it. */
.si--full > .gbar{display:none}
.sec-title{font-size:clamp(30px,3.2vw,42px);line-height:1.15;margin-bottom:12px}
/* Inline <span> inside a section title gets the gold accent (white-bg sections).
   On dark/navy backgrounds, .sec-title.light shifts to the lighter gold for contrast. */
.sec-title span{color:var(--gold)}
.sec-title.light span{color:var(--gold-light)}
.sec-sub{font-size:17px;color:#555}

/* ── HERO ── */
/* Top padding = fluid nav height + 40px breathing. Was hard-coded 84px,
   which now equals the maximum nav height on widescreens — the hpanel
   content was touching the nav with zero gap. */
.hero{background:linear-gradient(135deg,#09152A 0%,var(--navy) 50%,#0E2444 100%);padding:calc(var(--nav-h) + 40px) 48px 76px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 80% 40%,rgba(201,151,58,.08) 0%,transparent 68%),radial-gradient(ellipse 30% 40% at 5% 90%,rgba(59,140,90,.07) 0%,transparent 60%);pointer-events:none}
.hero-inner{max-width:none;width:100%;margin:0;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:80px;align-items:center}
.htag{display:inline-flex;align-items:center;gap:8px;background:rgba(201,151,58,.12);border:1px solid rgba(201,151,58,.35);border-radius:100px;padding:8px 20px;margin-bottom:24px}
.htag-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;animation:pulse 2s infinite}
.htag span{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.hero-h1{font-family:'Playfair Display',serif;font-size:clamp(38px,4.8vw,58px);font-weight:800;color:#fff;line-height:1.08;margin-bottom:20px}
.hero-h1 .ul{position:relative;display:inline-block}
.hero-h1 .ul::after{content:'';position:absolute;bottom:-6px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--green-light));border-radius:2px}
.hero-h1 span {
    color: var(--gold);
}
.hero-sub{font-size:18px;line-height:1.78;color:var(--muted);max-width:720px;margin-bottom:36px}
.hero-sub strong{color:rgba(255,255,255,.92);font-weight:500}
.cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* ── HERO RIGHT-PANEL ── */
.hpanel{background:rgba(255,255,255,.04);border:1px solid rgba(201,151,58,.2);border-radius:20px;padding:28px 24px;backdrop-filter:blur(12px);position:relative}
.hpanel::before{content:'';position:absolute;top:0;left:24px;right:24px;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--green-light));border-radius:0 0 4px 4px}
.hpanel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.hpanel-title{font-family:'Playfair Display',serif;font-size:16px;color:#fff;font-weight:700}
.hpanel-sub{font-size:13px;color:rgba(255,255,255,.5);margin-top:4px;line-height:1.4}
.hpanel-badge{font-size:13px;font-weight:800;background:rgba(79,173,112,.15);color:#4FAD70;border:1px solid rgba(79,173,112,.3);border-radius:100px;padding:6px 14px;white-space:nowrap;flex-shrink:0}
.hpanel-badge--gold{background:rgba(201,151,58,.15);color:var(--gold-light);border-color:rgba(201,151,58,.35)}
.hpanel-badge--red{background:rgba(220,38,38,.12);color:#F87171;border-color:rgba(220,38,38,.32)}
/* Optional chart image inside the right panel */
.hpanel-chart{margin-bottom:14px;border-radius:10px;overflow:hidden}
.hpanel-chart img{display:block;width:100%;height:auto}
.hstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.hs{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 12px;text-align:center}
.hs .n{font-family:'Playfair Display',serif;font-size:24px;font-weight:800;background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;background-clip:text;color:transparent}
.hs .l{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px;line-height:1.3}
.hreg{background:rgba(201,151,58,.08);border:1px solid rgba(201,151,58,.2);border-radius:10px;padding:13px 15px;margin-bottom:10px}
.hreg .rl{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4)}
.hreg .rn{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--gold);letter-spacing:.8px;margin-top:3px}
.hgreen{background:rgba(59,140,90,.1);border:1px solid rgba(59,140,90,.25);border-radius:10px;padding:13px 15px;display:flex;align-items:flex-start;gap:9px}
.hgreen-dot{width:8px;height:8px;border-radius:50%;background:var(--green-light);flex-shrink:0;margin-top:4px}
.hgreen-text{font-size:14px;color:rgba(255,255,255,.72);line-height:1.55}
.hgreen-text strong{color:#4FAD70}

/* Hero Nifty chart animation */
.hc-line{stroke-dasharray:700;stroke-dashoffset:700;animation:hcDraw 2s cubic-bezier(.4,0,.2,1) .4s forwards}
.hc-area{opacity:0;animation:hcFade 1s ease .8s forwards}
.hc-dot{r:0;animation:hcDotAnim .3s ease 2.2s forwards}
@keyframes hcDraw{to{stroke-dashoffset:0}}
@keyframes hcFade{to{opacity:1}}
@keyframes hcDotAnim{to{r:5px}}

/* ── PROBLEM / SOLUTION (service variant — uses .psc, not home's .ps-card) ── */
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:0}
.psc{border-radius:16px;padding:32px 28px}
.psc.drain{background:linear-gradient(145deg,#18182B,#14203A);border:1px solid rgba(220,80,80,.22)}
.psc.well{background:linear-gradient(145deg,#0D2618,#122E1F);border:1px solid rgba(75,175,100,.28)}
.psc-hd{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.psc-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.drain .psc-icon{background:rgba(220,80,80,.13)}
.well .psc-icon{background:rgba(75,175,100,.13)}
.psc-name{font-family:'Playfair Display',serif;font-size:20px;font-weight:700}
.drain .psc-name{color:#F87171}
.well .psc-name{color:#4FAD70}
.psc-sub{font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:18px}
.psc-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.psc-list li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}
.pdot{width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:11px}
.drain .pdot{background:rgba(220,80,80,.18);color:#F87171}
.well .pdot{background:rgba(75,175,100,.18);color:#4FAD70}

/* ── CONTEXTUAL GRAPH CARDS ── */
.ctx-graph{border-radius:18px;padding:32px 36px;margin-top:32px}
/* Image inside a contextual graph card (used when the editor uploads a chart). */
.ctxg-chart{margin:18px 0 0}
.ctxg-chart img{display:block;width:100%;height:auto;border-radius:8px}

/* WhatsApp CTA row below the contextual graph. */
.ctxg-wa-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.ctxg-wa-meta{font-size:14px;color:#888}
.btn-wa--sm{font-size:15px;padding:12px 20px}
.ctx-graph-light{background:rgba(13,27,62,.04);border:1px solid rgba(201,151,58,.2)}
.ctx-graph-dark{background:var(--navy);border:1px solid rgba(201,151,58,.2)}
.ctxg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.ctxg-eyebrow{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.ctxg-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;line-height:1.25;margin-bottom:6px}
.ctx-graph-light .ctxg-title{color:var(--navy)}
.ctx-graph-dark .ctxg-title{color:#fff}
.ctxg-sub{font-size:15px;line-height:1.6}
.ctx-graph-light .ctxg-sub{color:#555}
.ctx-graph-dark .ctxg-sub{color:rgba(255,255,255,.55)}
.ctxg-pill{font-size:13px;font-weight:700;padding:7px 18px;border-radius:100px;white-space:nowrap;flex-shrink:0;align-self:flex-start;margin-top:2px}
.ctxg-pill-red{background:rgba(220,38,38,.08);color:#DC2626;border:1px solid rgba(220,38,38,.25)}
.ctxg-pill-gold{background:rgba(201,151,58,.12);color:var(--gold);border:1px solid rgba(201,151,58,.3)}
.ctxg-pill-green{background:rgba(59,140,90,.1);color:#4FAD70;border:1px solid rgba(59,140,90,.28)}
.ctxg-stats{display:flex;align-items:center;gap:0;padding-top:20px;border-top:1px solid rgba(13,27,62,.09);margin-top:18px;flex-wrap:wrap}
.ctx-graph-dark .ctxg-stats{border-top:1px solid rgba(255,255,255,.08)}
.ctxg-stat{text-align:center;flex:1;padding:6px 12px}
.ctxg-stat .n{font-family:'Playfair Display',serif;font-size:24px;font-weight:800;display:block;margin-bottom:3px}
.ctx-graph-light .ctxg-stat .n{color:var(--navy)}
.ctx-graph-dark .ctxg-stat .n{background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;background-clip:text;color:transparent}
.ctxg-stat .l{font-size:13px;color:#777}
.ctx-graph-dark .ctxg-stat .l{color:rgba(255,255,255,.45)}
.ctxg-sep{width:1px;height:38px;background:rgba(13,27,62,.1);flex-shrink:0;align-self:center}
.ctx-graph-dark .ctxg-sep{background:rgba(255,255,255,.1)}
.ctxg-note{font-size:13px;color:#999;font-style:italic;margin-top:16px;line-height:1.5}
.ctx-graph-dark .ctxg-note{color:rgba(255,255,255,.3)}

/* ── PERSONAS ── */
.persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}
.pc{background:#fff;border:1px solid rgba(13,27,62,.08);border-radius:16px;padding:30px 24px;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.pc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.pc:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(13,27,62,.1);border-color:rgba(201,151,58,.3)}
.pc-icon{width:54px;height:54px;border-radius:14px;background:rgba(201,151,58,.1);border:1px solid rgba(201,151,58,.2);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px}
.pc-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--navy);margin-bottom:5px}
.pc-age{font-size:12px;font-weight:600;letter-spacing:.6px;color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.pc-desc{font-size:15px;color:#444;line-height:1.65}
.persona-cta-row{display:flex;align-items:center;justify-content:center;gap:16px;padding-top:10px;flex-wrap:wrap}

/* ── PROCESS (5-step horizontal) ── */
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:12px}
.proc-grid::before{content:'';position:absolute;top:28px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));z-index:0;border-radius:2px}
.proc-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px;position:relative;z-index:1}
.proc-num{width:58px;height:58px;border-radius:50%;background:var(--navy);border:3px solid var(--gold);color:var(--gold);font-family:'Playfair Display',serif;font-size:21px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0;position:relative;z-index:2;transition:all .2s}
.proc-item:hover .proc-num{background:var(--gold);color:var(--navy)}
.proc-badge-sm{display:inline-block;font-size:11px;font-weight:700;background:rgba(201,151,58,.12);color:var(--gold);border:1px solid rgba(201,151,58,.25);border-radius:100px;padding:3px 10px;margin-bottom:8px}
.proc-title{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:7px;line-height:1.3}
.proc-desc{font-size:14px;color:#555;line-height:1.6}

/* ── SERVICE OPTIONS (tabs + cards) ── */
.opt-tabs{display:flex;gap:8px;margin:0 auto 26px;flex-wrap:wrap;justify-content:center}
.opt-tab{font-size:15px;font-weight:600;padding:10px 24px;border-radius:100px;border:1px solid rgba(13,27,62,.18);color:#555;background:#fff;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif}
.opt-tab.active{background:var(--navy);color:var(--gold);border-color:var(--navy)}
.opt-tab:hover:not(.active){border-color:var(--navy);color:var(--navy)}
.opt-panel{display:none}
.opt-panel.active{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.oc{background:#fff;border:1px solid rgba(13,27,62,.08);border-radius:16px;padding:26px 22px;position:relative;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden}
.oc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.oc:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(13,27,62,.1);border-color:rgba(201,151,58,.3)}
.oc.pop{border:2px solid var(--gold);box-shadow:0 8px 28px rgba(201,151,58,.15)}
.pop-tag{position:absolute;top:-1px;right:14px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 12px;border-radius:0 0 8px 8px}
.oc-icon{width:50px;height:50px;border-radius:12px;background:rgba(201,151,58,.1);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px}
.oc-name{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--navy);margin-bottom:7px;text-align:center}
.oc-desc{font-size:14px;color:#444;line-height:1.65;margin-bottom:14px;text-align:center}
.oc-tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.oct{font-size:11px;font-weight:600;background:rgba(13,27,62,.07);color:var(--navy);border-radius:100px;padding:3px 10px}
.svc-nudge{margin-top:22px;background:#fff;border:1px solid rgba(13,27,62,.09);border-radius:12px;padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sn-title{font-size:17px;font-weight:600;color:var(--navy);margin-bottom:4px}
.sn-sub{font-size:15px;color:#666}
.sn-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ── TEAM / ADVISOR SPLIT ── */
.team-wrap{display:grid;grid-template-columns:280px 1fr;border-radius:22px;overflow:hidden;box-shadow:0 20px 60px rgba(13,27,62,.28);border:1px solid rgba(201,151,58,.18);position:relative}
.team-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--green-light));z-index:1}
/* Avatar vertically centred in the left column; plate pinned to the bottom. */
.team-left{position:relative;background:linear-gradient(170deg,#0B1830,#142850);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px 100px}
.t-avatar{width:140px;height:140px;border-radius:50%;border:3px solid var(--gold);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:0}
/* When a real photo is uploaded → square frame, no gold ring, no circular
   crop. The image is shown in full at its natural aspect ratio. */
.t-avatar--photo{width:100%;height:auto;max-width:240px;border:none;border-radius:14px;background:transparent;box-shadow:0 12px 36px rgba(0,0,0,.35);display:block}
.t-avatar--photo img{width:100%;height:auto;border-radius:14px;display:block;object-fit:contain}
/* Default (initials) variant still uses the circular ring. */
.t-avatar:not(.t-avatar--photo) img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.t-plate{position:absolute;left:0;right:0;bottom:0}
.t-initials{font-family:'Playfair Display',serif;font-size:50px;font-weight:800;color:var(--gold)}
.t-plate{background:linear-gradient(135deg,var(--gold),var(--gold-light));width:100%;padding:18px 20px;text-align:center}
.t-name{font-family:'Playfair Display',serif;font-size:21px;font-weight:800;color:var(--navy);display:block}
.t-role{font-size:11px;font-weight:700;color:rgba(13,27,62,.6);text-transform:uppercase;letter-spacing:1px;margin-top:4px;display:block}
.team-right{background:var(--navy);padding:36px 40px;display:flex;flex-direction:column;gap:18px}
.t-certs{display:flex;gap:8px;flex-wrap:wrap}
.tcert{font-size:12px;font-weight:700;background:rgba(201,151,58,.12);color:var(--gold);border:1px solid rgba(201,151,58,.25);border-radius:100px;padding:5px 14px}
.t-bio{font-size:16px;color:var(--muted);line-height:1.8}
.t-bio strong{color:#fff;font-weight:500}
.t-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tstat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:14px 12px;text-align:center}
.tstat .n{font-family:'Playfair Display',serif;font-size:22px;font-weight:800;background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.tstat .l{font-size:12px;color:rgba(255,255,255,.5);margin-top:3px;display:block}
.t-quote{background:rgba(201,151,58,.07);border-left:3px solid var(--gold);padding:18px 22px;border-radius:0 10px 10px 0}
.t-quote-text{font-family:'Playfair Display',serif;font-size:18px;font-style:italic;color:#fff;line-height:1.65;margin-bottom:8px}
.t-quote-attr{font-size:12px;color:rgba(255,255,255,.45)}
.t-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.tbadge{font-size:12px;font-weight:700;background:rgba(201,151,58,.15);color:var(--gold);border:1px solid rgba(201,151,58,.3);border-radius:6px;padding:5px 11px}
.tnote{font-size:12px;color:rgba(255,255,255,.4)}

/* ── TESTIMONIALS (service variant — dark glass) ──
   - With ≤3 stories: pure 3-column grid (no slider markup added).
   - With >3 stories: horizontal scroll-snap carousel + arrows + dots.
   - On mobile: always one card at a time (scroll-snap). */
.testi-slider{position:relative}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* When the section has the slider, swap the grid for a horizontal flex track */
.has-slider .testi-grid{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  padding-bottom:14px;          /* room for the iOS scroll-shadow */
  scrollbar-width:none;
}
.has-slider .testi-grid::-webkit-scrollbar{display:none}
.has-slider .testi-grid > .tc{
  flex:0 0 calc((100% - 44px) / 3);    /* 3 cards visible, 22px gaps */
  scroll-snap-align:start;
}

/* When the testimonials section is .si--full, the cards otherwise get
   uncomfortably wide on big monitors — cap them so the typography stays
   readable. Centre the row inside the viewport. */
.si--full .testi-grid{justify-content:center}
.si--full .testi-grid > .tc{max-width:100%}
/* Why-Us 4-card grid: same cap-and-centre treatment as the testimonials
   so the cards don't drift apart on wide monitors. */
.si--full .diff-grid{max-width:1340px;margin-left:auto;margin-right:auto}

/* Slider controls */
.testi-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px}
.ts-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(201,151,58,.45);background:rgba(201,151,58,.08);color:var(--gold);font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s,transform .15s}
.ts-arrow:hover:not(:disabled){background:var(--gold);color:var(--navy);transform:scale(1.05)}
.ts-arrow:disabled{opacity:.35;cursor:not-allowed}
.ts-dots{display:inline-flex;align-items:center;gap:8px}
.ts-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.2);padding:0;cursor:pointer;transition:background .15s,transform .15s}
.ts-dot:hover{background:rgba(255,255,255,.4)}
.ts-dot.active{background:var(--gold);transform:scale(1.4)}

/* Note: mobile carousel + testi-nav layout fixes are in the
   consolidated `@media(max-width:900px)` block near the bottom of
   this file (shared with .persona-grid, .opt-panel, .diff-grid). */
.tc{background:rgba(255,255,255,.04);border:1px solid rgba(201,151,58,.15);border-radius:18px;padding:30px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.tc:hover{transform:translateY(-3px);border-color:rgba(201,151,58,.35)}
.tc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.t-stars{display:flex;gap:4px;margin-bottom:14px; justify-content: center;}
.t-result{display:inline-block;font-size:13px;font-weight:700;background:rgba(201,151,58,.12);color:var(--gold);border:1px solid rgba(201,151,58,.25);border-radius:100px;padding:5px 14px;margin-bottom:16px}
.t-quote-card{font-family:'Playfair Display',serif;font-size:18px;font-style:italic;color:#fff;line-height:1.6;margin-bottom:20px}
.t-person{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.07);padding-top:16px}
.t-av{width:42px;height:42px;border-radius:50%;background:rgba(201,151,58,.12);border:1px solid rgba(201,151,58,.3);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:14px;font-weight:800;color:var(--gold);flex-shrink:0}
.t-pname{font-size:15px;font-weight:600;color:#fff;text-align:left;}
.t-pmeta{font-size:13px;color:rgba(255,255,255,.45);margin-top:3px}

/* ── WHY-US (differentiators grid) ── */
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dc{background:#fff;border:1px solid rgba(13,27,62,.08);border-radius:16px;padding:30px 24px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.dc:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(13,27,62,.1)}
.dc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.dc:nth-child(odd)::before{background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.dc:nth-child(even)::before{background:linear-gradient(90deg,var(--green),var(--green-light))}
.dc-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px}
.dc:nth-child(odd) .dc-icon{background:rgba(201,151,58,.1)}
.dc:nth-child(even) .dc-icon{background:rgba(59,140,90,.1)}
.dc-title{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--navy);margin-bottom:8px}
.dc-desc{font-size:15px;color:#444;line-height:1.7}

/* ── FAQ ── */
.faq-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.fi{border-top:1px solid rgba(13,27,62,.09);padding:20px 0;cursor:pointer}
.fq{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600;color:var(--navy);user-select:none;gap:12px}
.fi-icon{font-size:22px;color:var(--gold);transition:transform .2s;flex-shrink:0;width:28px;text-align:center;font-weight:300}
.fi.open .fi-icon{transform:rotate(45deg)}
.fa{font-size:15px;color:#444;line-height:1.8;margin-top:12px;display:none}
.fi.open .fa{display:block}

/* ── LEAD FORM ── */
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.wa-title{font-family:'Playfair Display',serif;font-size:30px;font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:12px}
.wa-body{font-size:16px;color:#444;line-height:1.8;margin-bottom:24px}
.wa-btn-big{display:flex;align-items:center;justify-content:center;gap:10px;background:#25D366;color:#fff;font-size:16px;font-weight:700;padding:17px 24px;border-radius:10px;border:none;cursor:pointer;width:100%;margin-bottom:12px;transition:background .2s;font-family:'DM Sans',sans-serif; text-decoration: none;}
.wa-btn-big:hover{background:#1ebe5a}
.wa-or{font-size:13px;color:#aaa;text-align:center;margin:10px 0}
.wa-phone{background:rgba(13,27,62,.06);border-radius:8px;padding:14px;text-align:center;font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--navy)}
.wa-phone a{ color:var(--navy);    text-decoration: none;}
.amfi-pill{display:flex;align-items:center;gap:7px;font-size:13px;color:#666;margin-top:14px;background:rgba(13,27,62,.05);border-radius:100px;padding:8px 16px;width:fit-content}
.amfi-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.fcard{background:#fff;border:1px solid rgba(13,27,62,.09);border-radius:20px;overflow:hidden;box-shadow:0 8px 32px rgba(13,27,62,.07)}
.fcard-top{background:linear-gradient(135deg,var(--gold),var(--gold-light));padding:20px 28px}
.fcard-top-title{font-family:'Playfair Display',serif;font-size:19px;font-weight:800;color:var(--navy)}
.fcard-body{padding:28px}
.flabel{font-size:12px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.8px;display:block;margin-bottom:7px}
.finput{width:100%;border:1px solid rgba(13,27,62,.14);border-radius:8px;padding:13px 15px;font-size:16px;color:var(--navy);font-family:'DM Sans',sans-serif;margin-bottom:16px;background:#fff;transition:border-color .2s}
.finput:focus{outline:none;border-color:var(--gold)}
.fselect{width:100%;border:1px solid rgba(13,27,62,.14);border-radius:8px;padding:13px 15px;font-size:16px;color:var(--navy);font-family:'DM Sans',sans-serif;margin-bottom:22px;background:#fff}
.fsubmit{width:100%;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);font-size:16px;font-weight:700;padding:16px;border:none;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;box-shadow:0 6px 20px rgba(201,151,58,.28);transition:transform .2s}
.fsubmit:hover{transform:translateY(-2px)}
.fnote{font-size:13px;color:#888;text-align:center;margin-top:10px;font-style:italic}

/* Bottom CTA section removed — markup, ACF fields, and CSS all dropped. */

/* Footer styling is fully owned by global.css now — service pages share
   the same 3-column footer as every other template. */

/* ── POPUP ── */
.popup-overlay{display:none;position:fixed;inset:0;background:rgba(9,21,42,.78);backdrop-filter:blur(6px);z-index:300;align-items:center;justify-content:center;padding:20px}
.popup-overlay.open{display:flex}
.popup-box{background:#fff;border-radius:20px;padding:0;max-width:480px;width:100%;overflow:hidden;box-shadow:0 40px 80px rgba(9,21,42,.4)}
.popup-top{background:linear-gradient(135deg,var(--gold),var(--gold-light));padding:22px 28px;display:flex;align-items:center;justify-content:space-between}
.popup-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:800;color:var(--navy)}
.popup-close{background:rgba(13,27,62,.12);border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:17px;color:var(--navy);display:flex;align-items:center;justify-content:center}
.popup-body{padding:26px 30px}
.popup-sub{font-size:16px;color:#444;line-height:1.75;margin-bottom:10px}
.popup-label{font-size:12px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.8px;display:block;margin-bottom:7px}
.popup-input{width:100%;border:1px solid rgba(13,27,62,.15);border-radius:8px;padding:13px 15px;font-size:16px;color:var(--navy);font-family:'DM Sans',sans-serif;margin-bottom:16px;background:#fff}
.popup-select{width:100%;border:1px solid rgba(13,27,62,.15);border-radius:8px;padding:13px 15px;font-size:16px;color:var(--navy);font-family:'DM Sans',sans-serif;margin-bottom:22px;background:#fff}
.popup-submit{width:100%;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);font-size:16px;font-weight:700;padding:16px;border:none;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;box-shadow:0 6px 20px rgba(201,151,58,.28)}
.popup-note{font-size:13px;color:#aaa;text-align:center;margin-top:10px;font-style:italic}
.popup-wa-alt{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(37,211,102,.08);color:#3C9A5A;font-size:14px;font-weight:600;padding:12px;border-radius:8px;border:1px solid rgba(37,211,102,.25);cursor:pointer;margin-top:12px;text-decoration:none;font-family:'DM Sans',sans-serif}

/* CF7 form inside the popup — match the .popup-input / .popup-submit look so
   editors get the same gold-bar design with whatever CF7 form they paste in. */
.popup-body .wpcf7 label{font-size:12px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.8px;display:block;margin-bottom:7px}
.popup-body .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance){width:100%;border:1px solid rgba(13,27,62,.15);border-radius:8px;padding:13px 15px;font-size:16px;color:var(--navy);font-family:'DM Sans',sans-serif;margin-bottom:16px;background:#fff;box-sizing:border-box}
.popup-body .wpcf7-submit{width:100%;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);font-size:16px;font-weight:700;padding:16px;border:none;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;box-shadow:0 6px 20px rgba(201,151,58,.28);margin-top:6px}
.popup-body .wpcf7-response-output{margin:14px 0 0;border-radius:8px;font-size:13.5px}

/* ── WhatsApp FLOAT ── */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:200;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:transform .2s}
.wa-float:hover{transform:scale(1.1)}

/* ── RESPONSIVE ──
   Nav-specific mobile rules (.site-nav padding, hide .nav-links, show
   .nav-hamburger) live in global.css. Don't duplicate them here. */
@media(max-width:900px){
  .breadcrumb{padding:12px 20px}
  /* Top padding clears the fluid fixed .site-nav (var(--nav-h) = 76–84px)
     plus breathing room, otherwise the hero tag/badge sits under the nav. */
  .hero{padding:calc(var(--nav-h) + 28px) 20px 44px}
  .hero-inner{grid-template-columns:1fr;gap:30px}
  .section,.sec{padding:52px 20px}
  .ps-grid,.lead-grid{grid-template-columns:1fr}

  /* ── Persona / Service Options / Why Us — simple vertical stack ──
     Each card on its own row, all visible at once. No carousel, no
     swipe — just plain scrollable column.                          */
  .persona-grid,
  .opt-panel.active,
  .diff-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px;
    margin:0;padding:0
  }
  .persona-grid > .pc,
  .opt-panel.active > .oc,
  .diff-grid > .dc{
    width:100%;max-width:none;margin:0;
    box-sizing:border-box;
    text-align:center                   /* centred copy on mobile */
  }
  /* Centre the icon tile too — flex children don't inherit text-align. */
  .pc-icon,
  .oc-icon,
  .dc-icon{margin-left:auto;margin-right:auto}
  .pc-desc,.oc-desc,.dc-desc{text-align:center}

  /* ── Process (5 steps) — clean card-per-step design ──
     Grid: number (left, spans all rows) + content column.
     row-gap:0 means missing badge doesn't reserve an empty row;
     vertical spacing comes from per-element margin-bottom.       */
  .proc-grid{
    grid-template-columns:1fr;gap:12px;
    display:grid;position:static;margin-top:8px
  }
  .proc-grid::before{display:none}
  .proc-item{
    display:grid;
    grid-template-columns:42px 1fr;
    column-gap:14px;row-gap:0;
    align-items:start;text-align:left;
    background:#fff;
    border:1px solid rgba(13,27,62,.08);
    border-left:4px solid var(--gold);
    border-radius:12px;
    padding:14px 16px 14px 12px;
    box-shadow:0 2px 8px rgba(13,27,62,.04)
  }
  .proc-num{
    grid-row:1 / -1;grid-column:1;
    width:42px;height:42px;font-size:17px;
    margin:0;flex-shrink:0;align-self:start
  }
  /* All content items live in column 2. With row-gap:0 they auto-place
     into rows 1, 2 (or 1, 2, 3 if badge exists) with no gaps reserved. */
  .proc-badge-sm,.proc-title,.proc-desc{
    grid-column:2;text-align:left;align-self:start;justify-self:start
  }
  .proc-badge-sm{margin:0 0 6px}
  .proc-title{font-size:17px;font-weight:700;color:var(--navy);line-height:1.3;margin:0 0 4px}
  .proc-desc{font-size:14px;line-height:1.5;color:#555;margin:0}

  /* ── Testimonials — keep the carousel, one full card per swipe ── */
  .testi-grid,
  .si--full .testi-grid{
    display:flex !important;
    grid-template-columns:none !important;
    /* MUST be flex-start on mobile. The desktop rule (.si--full .testi-grid)
       sets justify-content:center; on an overflowing horizontal flex
       container that makes the first AND last card unreachable by scroll
       — the carousel gets stuck on the middle card. */
    justify-content:flex-start !important;
    gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
    /* Compensates for each card's 20px left margin so scroll-snap-align:start
       lands the card's content edge flush with the viewport edge. */
    scroll-padding-left:20px;
    scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
    margin:0 -20px;padding:6px 0 16px;
    scrollbar-width:none
  }
  .testi-grid::-webkit-scrollbar{display:none}
  .testi-grid > .tc{
    flex:0 0 calc(100% - 40px) !important;
    width:calc(100% - 40px);max-width:none;
    /* `start` instead of `center`: on an overflowing horizontal flex track,
       `center` requires negative scroll headroom for the first card and
       extra positive headroom for the last card. The browser refuses, so
       card 1 and card 3 become unreachable. `start` aligns each card's left
       edge to the snapport's start — always satisfiable. The matching
       scroll-padding-left:20px on the grid (above) compensates for the
       card's own 20px left margin so it lands flush. */
    scroll-snap-align:start;
    margin:0 20px;
    padding:24px 22px;
    box-sizing:border-box
  }

  /* Testi nav — block parent + inline-block children. This avoids
     ALL flex cascade conflicts: inline-block children naturally
     render on one line, regardless of any parent flex rule. */
  .testi-slider .testi-nav,
  .testi-nav{
    display:block !important;
    text-align:center !important;
    width:100% !important;
    margin:18px 0 0 !important;padding:0 !important;
    font-size:0 !important;       /* strips whitespace between inline children */
    line-height:0 !important
  }

  .testi-nav .ts-arrow{
    display:inline-block !important;
    vertical-align:middle !important;
    width:42px !important;height:42px !important;
    margin:0 8px !important;
    border-radius:50% !important;
    border:1px solid rgba(201,151,58,.45) !important;
    background:rgba(201,151,58,.1) !important;
    color:var(--gold) !important;
    font-size:22px !important;line-height:40px !important;
    text-align:center !important;
    padding:0 !important;cursor:pointer
  }
  .testi-nav .ts-arrow:disabled{opacity:.35;cursor:not-allowed}

  .testi-nav .ts-dots{
    display:inline-block !important;
    vertical-align:middle !important;
    margin:0 4px !important;
    line-height:0 !important;
    font-size:0 !important
  }
  .testi-nav .ts-dot{
    display:inline-block !important;
    vertical-align:middle !important;
    width:8px !important;height:8px !important;
    margin:0 4px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.25) !important;
    border:none !important;padding:0 !important;cursor:pointer
  }
  .testi-nav .ts-dot.active{
    width:20px !important;
    border-radius:4px !important;
    background:var(--gold) !important
  }

  .team-wrap{grid-template-columns:1fr}
  .t-stats{grid-template-columns:repeat(2,1fr)}
  .faq-2col{grid-template-columns:1fr}
  /* Footer responsive sizing handled in global.css. */
  .ctx-graph{padding:20px 18px}
  .ctxg-head{flex-direction:column;gap:12px}
}
@media(min-width:901px) and (max-width:1100px){
  .persona-grid{grid-template-columns:repeat(2,1fr)}
  .opt-panel.active{grid-template-columns:repeat(2,1fr)}
  .t-stats{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   SERVICES ARCHIVE — /services/ listing page (archive-service.php)
   3-column grid of service cards.
   ============================================================ */
.svc-archive-banner .banner-title span{color:var(--gold-light)}
.svc-archive{background:var(--bg);padding:64px clamp(20px,4vw,48px) 96px}
.svc-archive-inner{max-width:1280px;margin:0 auto}
.svc-archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.svc-archive-card{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 6px 24px rgba(13,27,62,.06);border:1px solid rgba(13,27,62,.06);transition:transform .25s,box-shadow .25s,border-color .25s;min-width:0;position:relative}
.svc-archive-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--green-light));opacity:0;transition:opacity .25s;z-index:2}
.svc-archive-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(13,27,62,.14);border-color:rgba(201,151,58,.32)}
.svc-archive-card:hover::before{opacity:1}

.svc-archive-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#09152A,var(--navy),#0E2444);overflow:hidden;position:relative}
.svc-archive-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s,filter .25s}
.svc-archive-card:hover .svc-archive-thumb img{transform:scale(1.05)}
.svc-archive-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#09152A,var(--navy) 55%,#0E2444);position:relative}
.svc-archive-thumb-fallback::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;opacity:.5}
.svc-archive-thumb-fallback::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(201,151,58,.18) 0%,transparent 65%)}
.svc-archive-thumb-mono{font-family:'Playfair Display',serif;font-size:64px;font-weight:800;color:var(--gold-light);position:relative;z-index:1;line-height:1;text-shadow:0 4px 18px rgba(0,0,0,.4)}

.svc-archive-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;gap:10px}
.svc-archive-title{font-family:'Playfair Display',serif;font-size:21px;font-weight:800;color:var(--navy);line-height:1.3;margin:0;transition:color .15s}
.svc-archive-card:hover .svc-archive-title{color:var(--gold)}
.svc-archive-desc{font-size:14.5px;color:#5b5b5b;line-height:1.65;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc-archive-cta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--gold);margin-top:8px;letter-spacing:.2px}
.svc-archive-arrow{transition:transform .2s}
.svc-archive-card:hover .svc-archive-arrow{transform:translateX(4px)}

/* Empty state. */
.svc-archive-empty{max-width:600px;margin:64px auto;text-align:center;padding:48px 32px;background:#fff;border-radius:18px;border:1px dashed rgba(13,27,62,.18)}
.svc-archive-empty h2{font-family:'Playfair Display',serif;font-size:22px;color:var(--navy);margin:0 0 10px}
.svc-archive-empty p{font-size:14.5px;color:#666;line-height:1.65;margin:0}

/* WP-default pagination — match theme buttons. */
.svc-archive .pagination,
.svc-archive .nav-links{display:flex;gap:8px;justify-content:center;margin-top:48px;flex-wrap:wrap}
.svc-archive .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 14px;background:#fff;border:1px solid rgba(13,27,62,.12);border-radius:8px;font-weight:600;font-size:13.5px;color:var(--navy);text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.svc-archive .page-numbers:hover{background:rgba(201,151,58,.08);border-color:var(--gold);color:var(--gold)}
.svc-archive .page-numbers.current{background:var(--gold);border-color:var(--gold);color:var(--navy)}

@media(max-width:1100px){
  .svc-archive-grid{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media(max-width:680px){
  .svc-archive{padding:48px 16px 72px}
  .svc-archive-grid{grid-template-columns:1fr;gap:18px}
  .svc-archive-title{font-size:19px}
  .svc-archive-thumb-mono{font-size:54px}
}