/* Marketing Doctor — design-system overlay v2. Bold structural transformation via CSS.
   Restyles existing Elementor output only; touches no content, no _elementor_data. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  /* Round (this file's biggest single round to date): the agency has
     explicitly asked for a deliberate 3-color orange+blue+white system,
     visible everywhere, not navy-dominant with orange in one corner (see
     the sitewide "Item 8" block near the end of this file for the full
     rollout + a written summary comment of every place orange was added).
     Blue stays PRIMARY (headings, primary buttons/links); orange is the
     confident SECONDARY/accent (badges, secondary CTAs, eyebrow rhythm,
     hover states); white/off-white stays the dominant background. WhatsApp
     keeps its own real brand green, only ever used for WhatsApp. */
  --md-navy:#0E1F3D;
  --md-navy-2:#152A52;
  --md-accent:#2F5FD6;      /* primary brand blue */
  --md-accent-ink:#24469E;
  --md-orange:#F5820A;      /* secondary brand accent — same real orange already
                                used on the floating CTA bar's "Free Listing"
                                button (kept as-is per project rule), now
                                promoted to a proper token and used deliberately
                                sitewide as the 3rd color */
  --md-orange-ink:#C4650A;  /* darker orange for hover/pressed states */
  --md-orange-tint:#FFF4E8; /* pale orange wash for badges/backgrounds */
  --md-whatsapp:#25D366;    /* WhatsApp's own real brand green — nowhere else */
  --md-paper:#FFFFFF;
  --md-neutral:#F4F6F9;     /* very light cool neutral, not cream/amber-adjacent */
  --md-ink:#16212F;
  --md-ink-muted:#5C6674;
  --md-line:#E1E6ED;
  --md-radius:10px;
  --md-shadow-lg:0 20px 50px -20px rgba(14,31,61,0.28);
  --md-shadow:0 8px 22px -12px rgba(14,31,61,0.16);
  --md-success:#16A34A;
  --md-error:#DC2626;
}

/* ================= CF7 lead form: shared submit-button states =================
   Applies to every embed of the one real lead form (CF7 #1670 / unit-tag
   ea3bba5) site-wide — Home/About/Services/Consultancy heroes and the
   floating "Book Appointment" modal — via the stable .wpcf7-submit class,
   so this one block covers all of them instead of duplicating per page-id.

   Root cause of the "small black circle under the button" bug: CF7 core's
   own JS (wp-content/plugins/contact-form-7/includes/js/index.js) inserts a
   `.wpcf7-spinner` element as a DOM SIBLING immediately after the submit
   <input> ( `.has-spinner` -> insertAdjacentHTML('afterend', ...) ), and
   CF7's own stylesheet makes that spinner `display:inline-block;
   width:24px; height:24px; border-radius:100%; background:#23282d` (dark
   gray, reads as near-black), toggled visible only while the form carries
   CF7's own `submitting` status class. Every submit button on this site is
   styled `width:100%` (a full-width block button — see the page-scoped
   input[type=submit] rules elsewhere in this file) with no matching rule
   for the spinner, so the inline-block spinner has no room left on that
   line and wraps onto its own line directly underneath the button.
   Confirmed live: inspecting a submission mid-flight shows the spinner
   exactly there, only while submitting — matches every report of "a
   strange small black circle below the button" exactly.

   Fix: hide CF7's own spinner everywhere and drive an in-button "Sending…"
   state from JS instead (spark_mdd_cf7_ux_script() in
   spark-mdd-toolkit.php — a plain `.value` swap on the existing <input>,
   NOT a ::before/::after overlay: <input type=submit> is a replaced form
   control and does not render CSS generated content in any browser, so a
   pseudo-element approach would silently never appear). That script is
   itself driven entirely by CF7's own DOM events (wpcf7beforesubmit /
   wpcf7submit / wpcf7mailsent / wpcf7mailfailed / wpcf7invalid / wpcf7spam
   / wpcf7aborted — confirmed these are the actual events this CF7 version
   dispatches by reading its source), never a competing AJAX
   implementation. Net effect: no layout shift, no stray element outside
   the button, button keeps its own size throughout. */
.wpcf7-spinner{ display:none !important; }
.wpcf7-submit.spark-cf7-sending{ opacity:.85; cursor:progress !important; }
.wpcf7-submit.spark-cf7-success{ background:var(--md-success) !important; }
.wpcf7-submit.spark-cf7-error{ background:var(--md-error) !important; }
.wpcf7-submit:disabled{ cursor:not-allowed; }
/* Every page-scoped submit-button block below is written as
   `body.page-id-XX .some-card input[type=submit]{ background:var(--md-accent)
   !important; ... }` — 3 classes/attributes of specificity. The plain
   2-class rules just above lose that specificity fight and would silently
   never paint (confirmed live: the class was applied correctly but the
   background stayed the default blue). `.wpcf7-form-control`/`.has-spinner`
   are CF7's own default classes already present on every real submit button
   on this site (confirmed: `class="wpcf7-form-control wpcf7-submit
   has-spinner"`) — stacking them gives 4 classes of specificity, safely
   ahead of every page-scoped rule regardless of page. */
.wpcf7-form-control.wpcf7-submit.has-spinner.spark-cf7-success{ background:var(--md-success) !important; }
.wpcf7-form-control.wpcf7-submit.has-spinner.spark-cf7-error{ background:var(--md-error) !important; }

/* Slightly stronger native invalid-field indicator: CF7 already prints a
   red inline tip below an invalid field (`.wpcf7-not-valid-tip`, styled
   per-page below) — this adds a matching red border on the field itself so
   the error is obvious even before reading the tip text. */
.wpcf7-form-control.wpcf7-not-valid{ border-color:var(--md-error) !important; }

/* Cloudflare Turnstile widget spacing — inert/unused whenever the site key
   isn't configured (see spark-mdd-toolkit.php: the widget <div> is only
   ever printed once real keys are set in Settings -> Contact & CTAs). */
.cf-turnstile{ margin:4px 0 14px; }

/* ================= BASE TYPE =================
   Fraunces reserved for true editorial moments (hero, major section titles marked
   .md-display) — NOT every heading. Routine section titles use weighted IBM Plex Sans,
   which reads as premium without the "decorative serif everywhere" problem. */
body{ font-family:'IBM Plex Sans', -apple-system, Segoe UI, Roboto, sans-serif !important; color: var(--md-ink); }
h1.elementor-heading-title, .elementor-widget-heading h1{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:700 !important;
  letter-spacing:-0.015em;
  line-height:1.08 !important;
  text-wrap: balance;
}
h2.elementor-heading-title, .elementor-widget-heading h2{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
  line-height:1.15 !important;
  text-wrap: balance;
}
h3.elementor-heading-title, .elementor-widget-heading h3{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:600 !important;
  letter-spacing: 0.02em;
}

/* ================= BUTTONS =================
   Restrained: shape/hover polish for every button, but NOT a single forced color.
   Buttons keep whatever color Elementor already gave them (already differentiated
   by the original build) rather than making every button on the site identical. */
.elementor-button{
  border-radius: 10px !important;
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:600 !important;
  letter-spacing:0.01em;
  transition: transform .15s ease, box-shadow .15s ease;
}
.elementor-button:hover{ transform: translateY(-1px); box-shadow: var(--md-shadow); }

/* ================= HERO: full-bleed dark editorial treatment =================
   Structural selector, not a guessed ID: the top-level container that
   directly contains the booking form IS the hero, on any page that has one.
   Homepage rebuild round: this was originally written as
   `.elementor-widget-n-carousel .swiper-slide-active` -- a WIDGET-TYPE
   selector, not scoped to this specific hero widget. The homepage has THREE
   separate n-carousel widgets (hero, Pricing, and the Services teaser grid),
   all sharing that same widget-type class, so this block's dark-overlay/
   white-heading/white-card rules were silently bleeding into whichever
   Pricing/Services slide currently carried Swiper's own `.swiper-slide-active`
   class too -- confirmed live as the real cause of the Silver Pack card's
   "Chat on WhatsApp" button rendering with a huge white ~5rem heading
   (this block's hero heading-size rule winning the specificity fight against
   the Pricing section's own, lower-specificity button-text rule). Rescoped to
   the hero's own element id below so it can only ever match the hero. */
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active{
  position: relative !important;
  isolation: isolate;
  padding-top: clamp(48px, 8vw, 96px) !important;
  padding-bottom: clamp(56px, 9vw, 120px) !important;
}
/* Round 3 client feedback: "hero background images look dull/blurred, want
   100% crystal clear". Investigated both possible causes live rather than
   guessing which one it was:
   1) Overlay tint -- this ::after darkening gradient was the strongest
      contributor to a "dull" read; lightened below (0.42/0.28/0.08 ->
      0.30/0.18/0.04, radial 0.35 -> 0.25) while compensating with a
      slightly stronger headline text-shadow so white text stays legible on
      the now-lighter photo (explicit client requirement, not traded away).
   2) Source-image resolution -- checked naturalWidth/naturalHeight vs the
      real rendered box (1440x666 at desktop) for all 3 real slide photos.
      image-13-scaled.png (slide 2) is 2560x960, downscaled to fit -- genuinely
      sharp, not the cause. Frame-48097400.png and Frame-48097401-1.png
      (slides 1 and 3) are each only 1440x540 natively, being stretched by
      background-size:cover to a taller box -- confirmed a real ~1.23x
      (more at wider viewports) upscale, which is genuine softness no CSS
      change can fix. Flagged in the round-3 report as a real asset
      limitation (would need higher-resolution source photos from the
      client for those 2 specific images) rather than silently worked
      around or faked with a sharpening filter. */
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active::after{
  content:"";
  position:absolute; inset:0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(10,23,48,0.30) 0%, rgba(14,31,61,0.18) 45%, rgba(14,31,61,0.04) 100%),
    radial-gradient(circle at 85% 15%, rgba(18,160,172,0.25) 0%, transparent 45%);
  pointer-events:none;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active > *{
  position: relative;
  z-index: 2;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active h1.elementor-heading-title,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active h2.elementor-heading-title{
  /* px bounds, not rem: this theme's html root font-size drops to ~14.6px
     below 1024px (confirmed repeatedly on this project), so the original
     rem-bounded clamp here was quietly under-sizing this headline on mobile
     even though it measured correctly at desktop. */
  font-size: clamp(34px, 5.5vw, 67px) !important;
  color: #FFFFFF !important;
  position: relative; z-index: 2;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-shortcode{
  background: #FFFFFF;
  border-radius: 20px;
  padding: 28px 26px !important;
  box-shadow: var(--md-shadow-lg);
  position: relative;
  z-index: 2;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-shortcode h2.elementor-heading-title{
  color: var(--md-navy) !important;
  font-size: 1.5rem !important;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active input,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active textarea{
  border-radius: 10px !important;
  border: 1.5px solid var(--md-line) !important;
}

/* ================= STATS: bold badge presentation ================= */
.elementor-widget-counter{ text-align:center; }
.elementor-counter-number-wrapper{
  font-family:'Fraunces', serif !important;
  font-weight:800 !important;
  font-size: 1.4em !important;
  color: var(--md-accent) !important;
}

/* ================= CLIENT LOGOS: contained tile treatment ================= */
.elementor-widget-image-carousel .swiper-slide,
.elementor-image-carousel-wrapper .swiper-slide{
  background:#fff;
  border:1px solid var(--md-line);
  border-radius: var(--md-radius);
  padding: 18px 22px !important;
  box-shadow: var(--md-shadow);
  display:flex; align-items:center; justify-content:center;
}

/* ================= CARDS: give repeated widget-wraps real card presence ================= */
.e-loop-item, .elementor-widget-image-box .elementor-widget-container{
  background:#fff;
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  overflow:hidden;
}

/* ================= MOBILE: dense, intelligent, bold ================= */
@media (max-width: 767px){
  body .elementor-location-header .elementor-widget-social-icons{ display:none !important; }

  .elementor-section{ padding-top:26px !important; padding-bottom:26px !important; }

  h1.elementor-heading-title, .elementor-widget-heading h1{ font-size: clamp(1.9rem, 8vw, 2.4rem) !important; }
  h2.elementor-heading-title, .elementor-widget-heading h2{ font-size: clamp(1.4rem, 6vw, 1.8rem) !important; }

  .elementor-widget-counter{ display:inline-block; width:48%; }

  .elementor-element-6077b71.e-con{ flex-direction:row !important; flex-wrap:wrap !important; gap:10px !important; }
  .elementor-element-6077b71.e-con > .e-child{ flex:0 0 48% !important; max-width:48% !important; }

  .elementor-column.elementor-col-33, .elementor-column.elementor-col-25{ width:50% !important; }

  /* auto-fit + minmax self-corrects to 1 column if 2 would be too narrow for the
     title text — this is what prevents the "one word per line" title-wrap failure. */
  .elementor-grid-mobile-1 .elementor-loop-container{
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap:12px !important;
  }
  .elementor-grid-mobile-1 .e-loop-item{ font-size:0.92em; }
  .elementor-grid-mobile-1 .e-loop-item h1,
  .elementor-grid-mobile-1 .e-loop-item h2,
  .elementor-grid-mobile-1 .e-loop-item h3{
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .elementor-grid-mobile-1 .e-loop-item img{ aspect-ratio: 4/3; object-fit:cover; }
}

/* ================= HERO PHOTO: direct filter, sidesteps stacking-context fights ================= */
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active img{
  filter: brightness(0.94) contrast(1.02) !important;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active h1.elementor-heading-title,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active h2.elementor-heading-title{
  /* Round 3: strengthened slightly (was a single 0 2px 16px 0.45 shadow) to
     compensate for the lighter overlay above -- keeps the explicit
     legibility requirement intact even though the photo itself now reads
     brighter through it. */
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 2px 20px rgba(0,0,0,0.5);
}

/* ================= LEGIBILITY SAFETY NET =================
   Some widgets have their own inline white text color, originally meant to sit on a
   dark background image. Our new light section bands can make that text disappear.
   Force a legible dark default everywhere except the explicitly-dark hero slide. */
body:not(.single) h1.elementor-heading-title,
body:not(.single) h2.elementor-heading-title,
body:not(.single) h3.elementor-heading-title{
  color: var(--md-navy) !important;
  /* defensive halo: keeps navy text readable even on the rare dark-background
     card (e.g. pricing plan cards) without needing to hunt down every instance */
  text-shadow: 0 0 1px rgba(255,255,255,0.4), 0 0 12px rgba(255,255,255,0.15);
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active h1.elementor-heading-title,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active h2.elementor-heading-title{
  color: #FFFFFF !important;
}

/* Ensure page content can always scroll clear of the fixed bottom CTA bar.
   Client-reported "extra space below the footer, even after scrolling all
   the way down" -- confirmed real via a simulated real-user scroll-to-
   bottom + a fresh screenshot (not just a computed-style check): a visible
   plain-navy gap sits between the footer's copyright line and the top of
   the fixed CTA bar. Root cause: this padding (74px) was larger than the
   bar's own real rendered height (measured live at 61.19px across
   320-414px, and 49.09px at 430-639px -- the labels wrap to 2 lines on
   narrower phones, 1 line once there's more width). 74px was covering the
   worst case with room to spare; 68px still safely clears the tallest
   real measured bar height (61.19px) with a small buffer, while trimming
   the unnecessary visible gap on every page. */
body{ padding-bottom: 68px; }
@media (min-width: 640px){ body{ padding-bottom: 0; } }

/* ============================================================
   BLOG PAGE — full visual rebuild (page-id-22 + shared header/footer)
   Structural work happens in JS (spark-mdd-toolkit.php wp_footer): hero
   intro block, featured-article wrap, card eyebrow/read-more, mobile
   header logo. This block is the corresponding visual layer — no
   content, URLs, or _elementor_data touched anywhere below.
   ============================================================ */

/* ---------- Header brand color (shared header #75, all pages) ----------
   Generic pure black -> the site's actual deep-navy brand tone. */
.elementor-location-header,
.elementor-element-d227424,
.elementor-element-42b3c6e{
  background-color: #101C3A !important;
}

/* ---------- Mobile header logo (shared header #75, all pages) ---------- */
@media (max-width: 1024px){
  .elementor-element-42b3c6e .elementor-element-30c983b{
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 16px !important;
  }
  .spark-mdd-mobile-logo{ display:flex; align-items:center; height:34px; flex:0 0 auto; }
  .spark-mdd-mobile-logo img{ height:100% !important; width:auto !important; max-width:150px; object-fit:contain; display:block; }
}

/* ---------- Footer rebuild (shared footer #1198, all pages) ---------- */
.elementor-location-footer{ background: var(--md-navy) !important; }
.elementor-location-footer .e-con.e-parent{ background: transparent !important; }
.elementor-location-footer,
.elementor-location-footer p,
.elementor-location-footer a,
.elementor-location-footer span,
.elementor-location-footer li{ color: rgba(255,255,255,0.80) !important; }
.elementor-location-footer h2.elementor-heading-title{
  color:#fff !important;
  text-shadow:none !important;
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size:0.95rem !important;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin: 0 0 16px !important;
}
.elementor-location-footer .elementor-icon-list-item{ margin-bottom:11px; min-width:0; }
.elementor-location-footer .elementor-icon-list-icon svg{ opacity:0.75; }
/* Long unbroken strings (email addresses) have no space to wrap on and were
   overflowing the narrow ~960-1024px 4-col footer track by ~16px */
.elementor-location-footer .elementor-icon-list-text{
  min-width:0; overflow-wrap:anywhere; word-break:break-word;
}
.elementor-location-footer a:hover{ color:#fff !important; text-decoration:underline; }
.elementor-element-dc7f18b.e-con.e-parent{
  max-width:1200px; margin:0 auto; padding: 56px 24px 40px !important;
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px 24px !important;
}
/* Elementor's own per-element responsive width (sized for its original 4-across
   desktop layout) otherwise still constrains these to a fraction of the grid
   track at mobile widths, e.g. Services collapsing to ~76px instead of filling
   its ~169px column — force each column to take its full grid track. */
.elementor-element-dc7f18b.e-con.e-parent > .e-con.e-child{
  width:100% !important; max-width:100% !important; min-width:0 !important;
}
.elementor-element-326dcd2{ grid-column: 1 / -1 !important; }
.elementor-element-f057952{ grid-column: 1 / -1 !important; }
.elementor-element-1b5503b img{ max-width:170px; height:auto; }
.elementor-element-744c628{ max-width:42ch; margin-top:10px; }
@media (min-width: 960px){
  .elementor-element-dc7f18b.e-con.e-parent{
    grid-template-columns: 1.2fr 0.9fr 1fr 1.3fr !important;
    gap: 32px !important;
    align-items:start;
  }
  .elementor-element-326dcd2,
  .elementor-element-f057952{ grid-column:auto !important; }
}
/* Investigated on the Homepage rebuild round: this is NOT the copyright bar
   (that's a separate real element, elementor-element-91ab220 inside
   elementor-element-23ba2ee, confirmed live via its actual text content
   "Copyright (c) 2025 Digital Marketing Doctors"). elementor-element-be283a0
   is a leftover section from the original theme with the literal HTML id
   "calling_btns" -- it holds the theme's OWN original inline "Call now" /
   "WhatsApp" buttons, the exact pair the site-wide JS below already hides
   via `a.elementor-button` display:none (now fully redundant with the
   floating spark-mdd-bar). Hiding the <a> tags emptied them visually but
   left this wrapping section's own real height (~86px, confirmed live) and
   its own rgba(0,0,0,0.18) background rendering as a plain, unexplained
   translucent band sitting directly above the fixed CTA bar at the very
   bottom of every page -- this is the real, reproducible cause of the
   "grey/transparent strip above the CTA bar" the client flagged. Fix: hide
   the whole section, not just the buttons inside it, since nothing in it
   is real, needed content once the floating bar covers the same two
   actions. Shared footer template (#1198), so this fixes it site-wide, not
   just on the page it was caught on. */
.elementor-element-be283a0{ display:none !important; }

/* ---------- Blog hero (page-id-22 only) ----------
   Restores the page's own real background image (Frame-42-2.png, a genuine
   photo of the client's medical team) rather than a flat gradient — with a
   restrained navy overlay for text contrast instead of the original's heavier
   brownish one (#24141494). The form now lives outside this container as its
   own section (moved via JS), so this band only ever holds the compact intro. */
body.page-id-22 .elementor-element-ef06b5c{
  background:
    linear-gradient(100deg, rgba(16,28,58,0.66) 0%, rgba(16,28,58,0.52) 55%, rgba(16,28,58,0.42) 100%),
    url('/wp-content/uploads/2025/05/Frame-42-2-1536x480.png') center center / cover no-repeat !important;
  padding: 48px 20px 52px !important;
  flex-direction: column !important;
  min-height: 260px;
}
/* Intro stacks full-width; the form section (moved out) is styled separately. */
body.page-id-22 .elementor-element-504fdf9{
  width:100% !important; max-width:100% !important; flex:1 1 100% !important;
}
body.page-id-22 .elementor-element-ef06b5c{ gap:0 !important; display:flex !important; justify-content:center; }
/* Elementor's own background-overlay pseudo-element used a heavier, off-brand
   brownish tint (#24141494) — replaced by the tuned navy gradient above, layered
   directly into the background shorthand for full control over the result. */
body.page-id-22 .elementor-element-ef06b5c::before{
  content: none !important;
  display: none !important;
}
body.page-id-22 .elementor-element-504fdf9,
body.page-id-22 .spark-blog-hero-intro{ max-width:760px; margin:0 auto; width:100%; text-align:center; }
body.page-id-22 .elementor-element-aabb880 h2.elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:700 !important;
  font-size: clamp(2.2rem, 7vw, 3.6rem) !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45) !important;
  margin:0 0 6px !important;
  line-height:1.1 !important;
}
/* ---------- Inline consultation form (permanently visible, not modal-gated) ---------- */
body.page-id-22 .spark-blog-form-section{
  max-width: 720px;
  margin: 18px auto 0;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--md-shadow-lg);
  padding: 20px 18px 22px;
}
body.page-id-22 .spark-blog-form-section h2.elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size: clamp(1.25rem, 3.5vw, 1.5rem) !important;
  color: var(--md-navy) !important;
  text-shadow:none !important;
  margin:0 0 4px !important;
}
.spark-blog-form-subhead{
  font-family:'IBM Plex Sans', sans-serif; font-size:0.9rem;
  color: var(--md-ink-muted); margin:0 0 16px; line-height:1.45;
}
.spark-form-row{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
@media (min-width:640px){ .spark-form-row{ flex-direction:row; gap:16px; } }
.spark-form-field{ flex:1 1 0; min-width:0; display:block; }
.spark-form-field-full{ flex:1 1 100%; }
.spark-form-label{
  display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:600;
  font-size:0.8rem; color: var(--md-navy); margin-bottom:5px;
}
.spark-blog-form-section .wpcf7-form-control-wrap{ display:block; width:100%; }
.spark-blog-form-section input[type=text],
.spark-blog-form-section input[type=email],
.spark-blog-form-section input[type=tel],
.spark-blog-form-section select,
.spark-blog-form-section textarea{
  width:100% !important; box-sizing:border-box !important;
  padding:13px 14px !important; border:1.5px solid var(--md-line) !important;
  border-radius:9px !important; font-family:'IBM Plex Sans', sans-serif !important;
  font-size:0.95rem !important; color: var(--md-ink) !important; background:#fff !important;
  min-height:46px;
}
.spark-blog-form-section textarea{ resize:vertical; min-height:94px; }
.spark-blog-form-section input:focus,
.spark-blog-form-section select:focus,
.spark-blog-form-section textarea:focus{
  outline:none !important; border-color: var(--md-accent) !important;
  box-shadow:0 0 0 3px rgba(47,95,214,0.15) !important;
}
[data-spark-other-row][hidden]{ display:none !important; }
.spark-form-row-acceptance{
  display:flex !important; align-items:flex-start; gap:8px;
  font-size:0.85rem; color: var(--md-ink-muted); margin:2px 0 14px;
}
.spark-blog-form-section input[type=submit]{
  width:100%; height:48px; padding:0 22px !important; border:none !important;
  border-radius:10px !important; background: var(--md-accent) !important; color:#fff !important;
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:1rem !important; cursor:pointer; transition: background .15s ease;
}
@media (min-width:640px){ .spark-blog-form-section input[type=submit]{ width:auto; } }
.spark-blog-form-section input[type=submit]:hover{ background: var(--md-accent-ink) !important; }
.spark-blog-form-section .wpcf7-not-valid-tip{ font-size:0.78rem; margin-top:4px; }

body.page-id-22 .spark-blog-hero-intro{ margin-top:10px !important; }
.spark-blog-hero-kicker{
  font-family:'IBM Plex Sans', sans-serif; font-weight:700;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  color: #FFFFFF; text-shadow: 0 1px 10px rgba(0,0,0,0.4);
  margin:0 0 10px;
}
.spark-blog-hero-sub{
  font-family:'IBM Plex Sans', sans-serif; font-weight:400;
  font-size:1rem; line-height:1.55; color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  max-width:56ch; margin:0 auto;
}
.spark-blog-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.spark-blog-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 24px; border-radius:10px;
  font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:0.95rem;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.spark-blog-btn:hover{ transform: translateY(-1px); }
.spark-blog-btn-primary{ background: var(--md-accent); color:#fff; box-shadow: var(--md-shadow); }
.spark-blog-btn-primary:hover{ background: var(--md-accent-ink); }
.spark-blog-btn-ghost{ background:#fff; color: var(--md-navy); border-color: var(--md-line); }
.spark-blog-btn-ghost:hover{ background: var(--md-neutral); }

/* ---------- Blog grid container (page-id-22 only) ---------- */
body.page-id-22 .elementor-element-4dd027c{
  max-width:1200px; margin:0 auto; padding: 48px 20px 64px !important;
}

/* ---------- Article grid (applies wherever the post loop exists) ----------
   Single column below 640px: at 2-up mobile widths the images shrank to ~150px
   and read as thumbnails, not the "large, clearly visible" images required —
   full-width images in one column resolve that directly. */
.elementor-loop-container.elementor-grid{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap:22px !important;
  align-items:start;
}
@media (min-width:640px){
  .elementor-loop-container.elementor-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:24px !important; }
}
@media (min-width:900px){
  .elementor-loop-container.elementor-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap:28px !important; }
}

.e-loop-item{ min-width:0; display:flex; flex-direction:column; }
.e-loop-item .e-con-inner{ display:flex; flex-direction:column; flex:1; min-width:0; }
.e-loop-item .elementor-widget-theme-post-featured-image{ overflow:hidden; border-radius: var(--md-radius) var(--md-radius) 0 0; }
.e-loop-item .elementor-widget-theme-post-featured-image img{
  width:100% !important; height:auto !important;
  aspect-ratio:16/9 !important; object-fit:cover !important;
  display:block; transition: transform .3s ease;
}
.e-loop-item:hover .elementor-widget-theme-post-featured-image img{ transform: scale(1.03); }

.spark-blog-eyebrow{
  display:block; max-width:calc(100% - 32px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:'IBM Plex Sans', sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color: var(--md-accent-ink);
  margin: 16px 16px 0;
}
.e-loop-item .elementor-widget-post-info .elementor-post-info{
  display:flex !important; flex-wrap:wrap !important;
  padding: 10px 16px 0 !important; margin:0 !important; gap:6px 14px !important;
  font-family:'IBM Plex Sans', sans-serif; font-size:12px; color: var(--md-ink-muted);
}
/* Elementor's icon-list defaults to a vertical list (block text, break-word) — wrong
   for this inline meta row, and the cause of author/date text breaking mid-word. */
.e-loop-item .elementor-widget-post-info .elementor-icon-list-item{
  flex:0 0 auto !important;
  display:inline-flex !important; align-items:center !important; gap:5px !important;
  white-space:nowrap !important;
}
.e-loop-item .elementor-widget-post-info .elementor-icon-list-text{
  display:inline !important; white-space:nowrap !important; width:auto !important;
  font-size:12px; color: var(--md-ink-muted);
}
.e-loop-item .elementor-widget-post-info .elementor-icon-list-icon svg{ width:12px; height:12px; }
.e-loop-item .elementor-widget-theme-post-title{ padding: 8px 16px 4px !important; }
.e-loop-item .elementor-widget-theme-post-title h1.elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:600 !important;
  font-size: clamp(1.15rem, 3.4vw, 1.3rem) !important;
  line-height:1.3 !important;
  color: var(--md-navy) !important;
  text-shadow:none !important;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.e-loop-item .elementor-widget-theme-post-title a{ text-decoration:none; color:inherit; }
.spark-blog-readmore{
  display:inline-flex; align-items:center; gap:6px;
  margin: 12px 16px 20px; padding-top:2px;
  font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:0.92rem;
  color: var(--md-accent); text-decoration:none;
}
.spark-blog-readmore span{ transition: transform .15s ease; }
.spark-blog-readmore:hover span{ transform: translateX(3px); }
.spark-blog-readmore:hover{ color: var(--md-accent-ink); }

@media (min-width:900px){
  .e-loop-item .elementor-widget-theme-post-title h1.elementor-heading-title{ font-size:1.35rem !important; }
}

/* ---------- Featured first article ----------
   Marked via JS as .spark-blog-featured — Elementor injects a per-instance <style>
   tag as the loop container's literal first child, so a plain :first-child selector
   never matches a real card here. */
.e-loop-item.spark-blog-featured{ grid-column: 1 / -1; }
.spark-blog-featured-content{ display:flex; flex-direction:column; }
.e-loop-item.spark-blog-featured .elementor-widget-theme-post-title h1.elementor-heading-title{
  font-size: clamp(1.3rem, 3vw, 1.7rem) !important;
  display: block !important;
  -webkit-line-clamp: initial !important;
  overflow: visible !important;
}
@media (min-width:640px){
  .e-loop-item.spark-blog-featured .e-con-inner{ display:flex !important; flex-direction:row; align-items:stretch; }
  .e-loop-item.spark-blog-featured .elementor-element-546ab7d{ flex:0 0 52%; max-width:52%; }
  .e-loop-item.spark-blog-featured .elementor-widget-theme-post-featured-image{ height:100%; border-radius: var(--md-radius) 0 0 var(--md-radius); }
  .e-loop-item.spark-blog-featured .elementor-widget-theme-post-featured-image img{
    height:100% !important; aspect-ratio:auto !important; object-fit:cover !important;
    border-radius: var(--md-radius) 0 0 var(--md-radius);
  }
  .spark-blog-featured-content{ flex:1; justify-content:center; padding: 28px 32px; }
}

/* ---------- Pagination ---------- */
.elementor-pagination{ display:flex !important; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px !important; }
.elementor-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px;
  border-radius:8px; border:1.5px solid var(--md-line);
  font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:0.9rem;
  color: var(--md-navy); text-decoration:none; background:#fff;
}
a.page-numbers:hover{ background: var(--md-neutral); }
.elementor-pagination .page-numbers.current{ background: var(--md-accent); border-color: var(--md-accent); color:#fff; }
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next{ color: var(--md-ink-muted); border-color:transparent; background:transparent; }
.elementor-pagination .spark-pag-ellipsis{
  border:none !important; background:transparent !important; color: var(--md-ink-muted) !important;
  min-width:auto !important; width:20px; padding:0 !important;
}

/* ============================================================
   CONSULTANCY PAGE — full visual rebuild (page-id-20 + shared header/footer)
   Three real sections, no invented content: Pricing (3 plan cards in an
   n-carousel), Contact (heading + phone/email/address), FAQ (n-accordion,
   5 real Q&A pairs). Structural work happens in JS (spark-mdd-toolkit.php
   wp_footer, page-id-20 block): pricing-section anchor id for the existing
   "More Plans" self-link, tel:/mailto:/maps links derived from the existing
   phone/email/address text, and relocating a server-rendered CF7 #1670 form
   into the Contact section (same technique as the Blog page's inline form).
   ============================================================ */

/* ---------- Pricing: section band ----------
   Elementor's own _elementor_data has a background_image setting on this
   container (an attachment on the *live* production domain), but the site's
   compiled Elementor CSS does not actually output it (stale/never-generated
   cache) — so today this section renders with no image at all. Rather than
   hotlink the live domain, this uses a real, unused photo already in this
   install's own media library for the same "photographic band" role the
   original design intended, with a navy gradient for text contrast (same
   overlay technique as the Blog page hero). */
body.page-id-20 .elementor-element-b0b6a9a{
  background:
    linear-gradient(165deg, rgba(14,31,61,0.90) 0%, rgba(21,42,82,0.80) 45%, rgba(14,31,61,0.92) 100%),
    url('/wp-content/uploads/2025/05/DSC09111-scaled-1-1536x1236.jpg') center 18% / cover no-repeat !important;
  padding: clamp(48px,8vw,96px) 20px clamp(56px,9vw,104px) !important;
  flex-direction: column !important;
}
body.page-id-20 .elementor-element-efa5250{ max-width:720px; margin:0 auto; }
body.page-id-20 .elementor-element-efa5250 h2.elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:700 !important;
  font-size: clamp(2rem, 5vw, 2.75rem) !important;
  line-height:1.15 !important;
  color:#FFFFFF !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45) !important;
  margin:0 0 14px !important;
}
body.page-id-20 .elementor-element-ad2aa1e{ max-width:640px; margin:0 auto 40px; text-align:center; }
body.page-id-20 .elementor-element-ad2aa1e p{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-size: clamp(1rem,2vw,1.1rem) !important;
  color: rgba(255,255,255,0.86) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  line-height:1.6; margin:0;
}
body.page-id-20 .elementor-element-f7b2e36{
  max-width:1180px !important; margin:0 auto !important;
  padding-left: clamp(0px,4vw,40px) !important;
  padding-right: clamp(0px,4vw,40px) !important;
}

/* ---------- Pricing: carousel frame ----------
   Small padding inside the swiper track so card shadows/hover-lift have
   room instead of being clipped by the swiper's own overflow:hidden. */
body.page-id-20 .elementor-element-629ac87 .swiper-wrapper{ padding: 14px 6px 30px !important; }
body.page-id-20 .elementor-element-629ac87 .swiper-pagination{ margin-top:20px !important; }
body.page-id-20 .elementor-element-629ac87 .swiper-pagination-bullet{
  background: rgba(255,255,255,0.45) !important; opacity:1 !important;
  width:8px !important; height:8px !important; transition: width .2s ease, background .2s ease;
}
body.page-id-20 .elementor-element-629ac87 .swiper-pagination-bullet-active{
  background:#FFFFFF !important; width:22px !important; border-radius:4px !important;
}
body.page-id-20 .elementor-element-629ac87 .e-con-boxed{
  width:100% !important; max-width:400px !important; height:100% !important; margin:0 auto !important;
}
@media (max-width:639px){
  body.page-id-20 .elementor-element-629ac87 .e-con-boxed{ max-width:100% !important; }
}
body.page-id-20 .elementor-element-629ac87 .e-con-boxed > .e-con-inner{ height:100%; display:flex !important; }

/* ---------- Pricing: the actual card ----------
   Structural selector, not per-plan IDs: every slide is
   .e-con-boxed > .e-con-inner > .e-con (exactly one such element per slide,
   confirmed via the rendered markup) — one rule styles all three plans
   identically, away from the original solid-black rectangle. */
body.page-id-20 .elementor-element-629ac87 .e-con-boxed > .e-con-inner > .e-con{
  background:#FFFFFF !important;
  border:1px solid var(--md-line) !important;
  border-radius:16px !important;
  box-shadow: var(--md-shadow) !important;
  display:flex !important; flex-direction:column !important; justify-content:space-between !important;
  width:100%; min-width:0;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.page-id-20 .elementor-element-629ac87 .e-con-boxed > .e-con-inner > .e-con:hover{
  transform: translateY(-4px);
  box-shadow: var(--md-shadow-lg) !important;
}
/* Gold Pack (middle tier) gets the one defensible visual emphasis the brief
   allows — elevation only, no added "Most Popular" copy (nothing in the
   source content marks it as such, so nothing is invented). */
@media (min-width:768px){
  body.page-id-20 .elementor-element-310aeb8{
    transform: scale(1.045) !important;
    box-shadow: var(--md-shadow-lg) !important;
    border-color: var(--md-accent) !important;
    position:relative; z-index:2;
  }
  body.page-id-20 .elementor-element-310aeb8:hover{ transform: scale(1.045) translateY(-4px) !important; }
}

/* ---------- Pricing: card content ----------
   Both scoped to the info sub-container (:first-child of the card) so they
   can never collide with the "Get Now" button in the card's other child
   (:last-child) — both are otherwise plain .elementor-widget-heading h2s. */
body.page-id-20 .elementor-element-629ac87 .e-con-boxed > .e-con-inner > .e-con > .e-con:first-child{
  padding: 30px 26px 18px !important; min-height:auto !important;
}
body.page-id-20 .elementor-element-629ac87 .e-con-boxed > .e-con-inner > .e-con > .e-con:first-child .elementor-widget-heading:first-child h2.elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size:0.85rem !important;
  text-transform:uppercase; letter-spacing:0.07em;
  color: var(--md-ink-muted) !important;
  text-shadow:none !important;
  margin:0 0 6px !important;
}
body.page-id-20 .elementor-element-629ac87 .e-con-boxed > .e-con-inner > .e-con > .e-con:first-child .elementor-widget-heading:first-child + .elementor-widget-heading h2.elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:700 !important;
  font-size: clamp(1.7rem, 3.4vw, 2.1rem) !important;
  color: var(--md-navy) !important;
  text-shadow:none !important;
  margin:0 !important;
}
body.page-id-20 .elementor-element-629ac87 .elementor-divider-separator{ border-color: var(--md-line) !important; }
body.page-id-20 .elementor-element-629ac87 .elementor-divider{ padding-block:2px 12px !important; }
body.page-id-20 .elementor-element-629ac87 .elementor-icon-list-item{ align-items:flex-start !important; }
body.page-id-20 .elementor-element-629ac87 .elementor-icon-list-icon{ margin-top:3px; }
body.page-id-20 .elementor-element-629ac87 .elementor-icon-list-icon svg{ fill: var(--md-accent) !important; }
body.page-id-20 .elementor-element-629ac87 .elementor-icon-list-text{
  color: var(--md-ink) !important; text-shadow:none !important;
  font-family:'IBM Plex Sans', sans-serif !important; font-size:0.92rem !important; line-height:1.5 !important;
}
body.page-id-20 .elementor-element-629ac87 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){ padding-block-end:9px !important; }
body.page-id-20 .elementor-element-629ac87 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){ margin-block-start:9px !important; }
body.page-id-20 .elementor-element-629ac87 .e-con-boxed > .e-con-inner > .e-con > .e-con:last-child{ padding: 4px 22px 22px !important; }

/* ---------- Pricing: "Get Now" -> WhatsApp CTA ----------
   Text is already rewritten to "Chat on WhatsApp" and made clickable by the
   existing site-wide JS (matches on heading text, not page-specific) — this
   is only the visual layer, three explicit IDs because these three plan
   buttons are genuinely one-off elements, not a repeating loop. WhatsApp
   green reserved for WhatsApp actions only, per the design system rule. */
body.page-id-20 .elementor-element-ac2bb78,
body.page-id-20 .elementor-element-509b126,
body.page-id-20 .elementor-element-9adfe18{ margin-top:4px; }
body.page-id-20 .elementor-element-ac2bb78 .elementor-widget-container,
body.page-id-20 .elementor-element-509b126 .elementor-widget-container,
body.page-id-20 .elementor-element-9adfe18 .elementor-widget-container{
  background: var(--md-whatsapp) !important;
  border-radius:10px !important;
  padding:13px 18px !important;
  transition: background .15s ease, transform .15s ease;
}
body.page-id-20 .elementor-element-ac2bb78:hover .elementor-widget-container,
body.page-id-20 .elementor-element-509b126:hover .elementor-widget-container,
body.page-id-20 .elementor-element-9adfe18:hover .elementor-widget-container{
  background:#1EBE59 !important; transform: translateY(-1px);
}
body.page-id-20 .elementor-element-ac2bb78 .elementor-heading-title,
body.page-id-20 .elementor-element-509b126 .elementor-heading-title,
body.page-id-20 .elementor-element-9adfe18 .elementor-heading-title{
  color:#FFFFFF !important;
  text-shadow:none !important;
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size:0.95rem !important;
}

/* ---------- Pricing: "More Plans" ----------
   Pre-existing content issue (flagged, not invented around): this button
   already links to https://digitalmarketingdoctors.in/consultancy/ — i.e.
   itself. The JS below points it at an in-page anchor instead so it does
   something harmless rather than nothing; styled here as a secondary/ghost
   action so it doesn't visually compete with the real WhatsApp CTAs. */
body.page-id-20 .elementor-element-617dcde{ margin-top: clamp(28px,4vw,40px) !important; text-align:center; }
body.page-id-20 .elementor-element-617dcde .elementor-button{
  background: rgba(255,255,255,0.08) !important;
  border:1.5px solid rgba(255,255,255,0.5) !important;
  color:#FFFFFF !important;
}
body.page-id-20 .elementor-element-617dcde .elementor-button:hover{ background: rgba(255,255,255,0.18) !important; }

/* ---------- Contact: section + heading ----------
   Eyebrow/subhead paragraphs are added by JS (spark-consult-eyebrow /
   spark-consult-sub) — short connective UI copy in the same restrained,
   non-factual register as the Blog page's existing hero kicker/subhead,
   not a business claim. */
body.page-id-20 .elementor-element-32fa033{
  display:block !important;
  max-width:1180px !important; margin:0 auto !important;
  padding: clamp(48px,8vw,88px) clamp(16px,4vw,40px) !important;
  background:#FFFFFF;
}
body.page-id-20 .elementor-element-d9ba6c6{ width:100% !important; justify-content:flex-start !important; margin-bottom:6px !important; }
body.page-id-20 .elementor-element-0fce97d{ text-align:left !important; padding:0 !important; }
body.page-id-20 .elementor-element-0fce97d .elementor-heading-title{
  font-size: clamp(1.75rem,4vw,2.25rem) !important;
  line-height:1.2 !important;
  text-align:left !important;
}
body.page-id-20 .spark-consult-eyebrow{
  font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size:0.78rem;
  letter-spacing:0.08em; text-transform:uppercase; color: var(--md-accent-ink);
  margin:0 0 8px;
}
body.page-id-20 .spark-consult-sub{
  font-family:'IBM Plex Sans', sans-serif; font-size:1rem; color: var(--md-ink-muted);
  line-height:1.6; max-width:48ch; margin:10px 0 0;
}
@media (min-width:900px){
  body.page-id-20 .elementor-element-32fa033{
    display:grid !important; grid-template-columns: 1fr 1fr !important;
    column-gap:56px; align-items:start;
  }
  body.page-id-20 .elementor-element-d9ba6c6{ grid-column:1; grid-row:1; margin-bottom:0 !important; }
  body.page-id-20 .elementor-element-39c25e0{ grid-column:1; grid-row:2; }
  body.page-id-20 .spark-consult-form-card{ grid-column:2; grid-row:1 / span 2; }
}

/* ---------- Contact: info rows ----------
   Away from three tall isolated cards (each originally 40px vertical padding
   plus its own box-shadow) into compact rows with real icons — generic
   ">.e-con" selector because the three items already share no unique class,
   only per-item IDs, and all three need identical treatment. */
body.page-id-20 .elementor-element-39c25e0{
  display:flex !important; flex-direction:column !important; gap:0 !important; margin-top:20px;
}
body.page-id-20 .elementor-element-39c25e0 > .e-con{
  flex-direction:row !important; align-items:center !important; gap:16px !important;
  padding:16px 4px !important; border-bottom:1px solid var(--md-line) !important;
  box-shadow:none !important; border-radius:0 !important; background:transparent !important;
}
body.page-id-20 .elementor-element-39c25e0 > .e-con:last-child{ border-bottom:none !important; }
body.page-id-20 .elementor-element-39c25e0 > .e-con:hover{ background: var(--md-neutral) !important; transform:none !important; }
body.page-id-20 .elementor-element-39c25e0 .elementor-widget-icon{ flex:0 0 auto; }
body.page-id-20 .elementor-element-39c25e0 .elementor-icon{
  width:44px !important; height:44px !important;
  background: var(--md-neutral) !important; border-color: transparent !important;
  color: var(--md-accent) !important;
}
body.page-id-20 .elementor-element-39c25e0 .elementor-icon svg{ fill: var(--md-accent) !important; }
body.page-id-20 .elementor-element-39c25e0 .elementor-icon i{ color: var(--md-accent) !important; font-size:18px !important; }
body.page-id-20 .elementor-element-39c25e0 .elementor-widget-heading{ flex:1 1 auto; min-width:0; text-align:left !important; padding:0 !important; }
body.page-id-20 .elementor-element-39c25e0 h2.elementor-heading-title{
  text-align:left !important;
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:600 !important;
  font-size: clamp(0.95rem,2vw,1.05rem) !important;
  color: var(--md-ink) !important;
  text-shadow:none !important;
  overflow-wrap:anywhere;
}
body.page-id-20 .elementor-element-39c25e0 h2.elementor-heading-title a{ color:inherit; text-decoration:none; }
body.page-id-20 .elementor-element-39c25e0 h2.elementor-heading-title a:hover{ color: var(--md-accent) !important; text-decoration:underline; }

/* ---------- Contact: embedded lead form ----------
   Server-rendered CF7 #1670 (the site's one real form, same one used by the
   floating Book Appointment modal) is relocated here by JS so a real form is
   reachable on the page itself, per the standing brief — same technique as
   the Blog page's inline form. Written as its own selectors rather than
   extending the page-22 form rules, so that block is left untouched. */
body.page-id-20 .spark-consult-form-card{
  background:#FFFFFF; border:1px solid var(--md-line); border-radius:16px;
  box-shadow: var(--md-shadow-lg); padding:26px 24px; margin-top:32px;
}
@media (min-width:900px){ body.page-id-20 .spark-consult-form-card{ margin-top:0; } }
body.page-id-20 .spark-consult-form-title{
  font-family:'IBM Plex Sans', sans-serif; font-weight:700;
  font-size: clamp(1.2rem,2.4vw,1.4rem); color: var(--md-navy); margin:0 0 6px;
}
body.page-id-20 .spark-consult-form-sub{
  font-family:'IBM Plex Sans', sans-serif; font-size:0.9rem; color: var(--md-ink-muted);
  margin:0 0 18px; line-height:1.5;
}
body.page-id-20 .spark-consult-form-card .spark-form-row{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
@media (min-width:520px){ body.page-id-20 .spark-consult-form-card .spark-form-row{ flex-direction:row; gap:14px; } }
body.page-id-20 .spark-consult-form-card .spark-form-field{ flex:1 1 0; min-width:0; display:block; }
body.page-id-20 .spark-consult-form-card .spark-form-field-full{ flex:1 1 100%; }
body.page-id-20 .spark-consult-form-card .spark-form-label{
  display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:600;
  font-size:0.78rem; color: var(--md-navy); margin-bottom:5px;
}
body.page-id-20 .spark-consult-form-card .wpcf7-form-control-wrap{ display:block; width:100%; }
body.page-id-20 .spark-consult-form-card input[type=text],
body.page-id-20 .spark-consult-form-card input[type=email],
body.page-id-20 .spark-consult-form-card input[type=tel],
body.page-id-20 .spark-consult-form-card select,
body.page-id-20 .spark-consult-form-card textarea{
  width:100% !important; box-sizing:border-box !important;
  padding:12px 13px !important; border:1.5px solid var(--md-line) !important;
  border-radius:9px !important; font-family:'IBM Plex Sans', sans-serif !important;
  font-size:0.92rem !important; color: var(--md-ink) !important; background:#FFFFFF !important;
  min-height:44px;
}
body.page-id-20 .spark-consult-form-card textarea{ resize:vertical; min-height:80px; }
body.page-id-20 .spark-consult-form-card input:focus,
body.page-id-20 .spark-consult-form-card select:focus,
body.page-id-20 .spark-consult-form-card textarea:focus{
  outline:none !important; border-color: var(--md-accent) !important;
  box-shadow:0 0 0 3px rgba(47,95,214,0.15) !important;
}
body.page-id-20 .spark-consult-form-card [data-spark-other-row][hidden]{ display:none !important; }
body.page-id-20 .spark-consult-form-card .spark-form-row-acceptance{
  display:flex !important; align-items:flex-start; gap:8px;
  font-size:0.82rem; color: var(--md-ink-muted); margin:2px 0 14px;
}
body.page-id-20 .spark-consult-form-card input[type=submit]{
  width:100%; height:46px; padding:0 22px !important; border:none !important;
  border-radius:10px !important; background: var(--md-accent) !important; color:#FFFFFF !important;
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:0.98rem !important; cursor:pointer; transition: background .15s ease;
}
body.page-id-20 .spark-consult-form-card input[type=submit]:hover{ background: var(--md-accent-ink) !important; }
body.page-id-20 .spark-consult-form-card .wpcf7-not-valid-tip{ font-size:0.76rem; margin-top:4px; }

/* ---------- FAQ ---------- */
body.page-id-20 .elementor-element-a7b06f5{
  background: var(--md-neutral) !important;
  padding: clamp(48px,8vw,88px) clamp(16px,4vw,40px) !important;
  flex-direction:column !important;
}
body.page-id-20 .elementor-element-f1972b5{ width:100% !important; margin-bottom:8px; }
body.page-id-20 .elementor-element-582191b .elementor-heading-title{
  font-size: clamp(1.6rem,3.6vw,2rem) !important;
  letter-spacing:0.02em;
  margin:0 !important;
}
body.page-id-20 .elementor-element-60bba44{ width:100% !important; max-width:820px !important; margin:0 auto !important; }
body.page-id-20 .elementor-element-bc2004b .e-n-accordion-item{ background:transparent !important; }
body.page-id-20 .elementor-element-bc2004b .e-n-accordion-item-title{ padding:18px 4px !important; cursor:pointer; }
body.page-id-20 .elementor-element-bc2004b .e-n-accordion-item-title-text{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:600 !important;
  font-size: clamp(1.05rem,2.4vw,1.3rem) !important;
  line-height:1.4 !important;
  color: var(--md-navy) !important;
}
body.page-id-20 .elementor-element-bc2004b .e-n-accordion-item-title-icon{ color: var(--md-accent) !important; flex:0 0 auto; }
body.page-id-20 .elementor-element-bc2004b .e-n-accordion-item-title-icon i{ font-size:16px !important; }
body.page-id-20 .elementor-element-bc2004b [role="region"]{ padding:0 4px 20px !important; }
body.page-id-20 .elementor-element-bc2004b .elementor-widget-text-editor p{
  font-family:'IBM Plex Sans', sans-serif;
  font-size: clamp(0.92rem,2vw,1rem);
  color: var(--md-ink-muted);
  line-height:1.65;
  margin:0 0 10px;
}
body.page-id-20 .elementor-element-bc2004b .elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* ============================================================
   SERVICES PAGE — full visual rebuild (page-id-18 + shared header/footer)
   Five real sections, no invented content: CTA/booking band (real bg photo +
   embedded CF7 #1670 form, same form as Consultancy/modal), intro (eyebrow +
   heading; a Lorem Ipsum paragraph removed from display via JS — pre-approved
   placeholder-text cleanup, not a content edit), services teaser grid (a
   4-slide n-carousel converted here to a static editorial grid so all 4 cards
   are visible at once instead of hidden behind slider navigation), the
   "We create business plans" image+copy section (second Lorem Ipsum instance
   also removed), and a closing metrics band (real numbers: 200/20/10/2).
   Dead "Click here" buttons get real hrefs via JS (spark-mdd-toolkit.php,
   page-id-18 block) — filling in existing published destinations, not new
   content.
   ============================================================ */

/* ---------- CTA/booking band (hero) — round 2: genuine two-column editorial split ----------
   Round 1 shipped a single centered column with the real photo demoted to a
   background wash behind a navy gradient — exactly the "generic template"
   complaint. Round 2 promotes the real photo to a full-bleed foreground
   image in its own column: JS below wraps the two existing direct children
   of this container (95328ae eyebrow, b551c84 heading+form) into
   .spark-hero-left, and injects a real <img> into a sibling .spark-hero-visual
   — same inject-real-markup-via-JS technique already used elsewhere in this
   file, nothing added to _elementor_data. Mobile/tablet: single column,
   image first (a real photo up top, not a caption-less wash) then the
   text+form. Desktop (≥1024px): true split-screen, image right, stretched
   to match the form column's height. "Services" (03a40bf) is semantically
   an eyebrow here (the real heading is "Book Appointment, How We Can Help
   You?") but shipped styled backwards — at 60px it was rendering larger
   than the 28px real heading — so sizes are swapped to the correct
   hierarchy below. */
body.page-id-18 .elementor-element-6cb1261{
  background: linear-gradient(135deg, var(--md-navy) 0%, var(--md-navy-2) 100%) !important;
  display:grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  min-height:auto !important;
  padding:0 !important;
  align-items:stretch !important;
}
body.page-id-18 .elementor-element-6cb1261::before{ content:none !important; display:none !important; }

/* ---------- Round 3: <img> -> background-image conversion (circle-artifact fix) ----------
   Two full rounds of exhaustive investigation (canvas pixel-readback of the actual
   image bitmap, computed-style sweeps for filter/mask/clip-path/blend-mode/background
   across every element and ancestor, elementFromPoint paint-order sampling) never
   found a CSS/DOM cause for a dark circular shape appearing over certain <img>
   renders on this page -- but a consistent pattern held across all of it: plain CSS
   background-image elements never showed the artifact, only <img> tags did. Acting
   on that now instead of re-investigating: the hero photo, all 4 service-card
   photos, and the "We create business plans" photo are repainted as a
   background-image on their sizing host. The real <img> stays in the DOM (JS below)
   for alt text / SEO / Elementor-editability, just visually hidden here. */
body.page-id-18 .spark-bg-img{
  position:relative !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center !important;
  /* Read through a custom property (set via JS, see sparkImgToBg) rather than
     depending on plain inline background-image: several of these hosts are
     real Elementor/Royal-Addons containers whose own framework CSS applies a
     conditional background-image rule gated on an in-viewport/lazy-reveal
     toggle, and that rule is !important -- it silently beat a plain inline
     style before the element had scrolled into view at least once (confirmed
     live: background rendered blank pre-scroll, correct post-scroll). This
     !important declaration, sourced after Elementor/Royal-Addons' own CSS,
     wins regardless of that toggle state. */
  background-image: var(--spark-bg-url) !important;
}
body.page-id-18 .spark-bg-img > img,
body.page-id-18 .spark-bg-img .elementor-widget-container > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:0 !important;
  pointer-events:none !important;
  margin:0 !important;
  border-radius:inherit !important;
}

body.page-id-18 .spark-hero-left{
  order:2;
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  width:100% !important; max-width:100% !important;
  padding: clamp(40px,7vw,56px) clamp(20px,5vw,56px) clamp(48px,8vw,64px) !important;
}
body.page-id-18 .spark-hero-visual{
  order:1;
  position:relative; overflow:hidden;
  min-height: clamp(220px,54vw,340px);
  background-size:cover !important;
  background-position:center !important;
}
body.page-id-18 .spark-hero-visual::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(14,31,61,0.32) 0%, rgba(14,31,61,0) 26%);
  pointer-events:none;
}
@media (min-width:1024px){
  body.page-id-18 .elementor-element-6cb1261{
    grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) !important;
  }
  body.page-id-18 .spark-hero-left{ order:1; justify-content:center; padding: clamp(56px,6vw,80px) clamp(40px,4.5vw,72px) !important; }
  body.page-id-18 .spark-hero-visual{ order:2; min-height:auto; }
  body.page-id-18 .spark-hero-visual::after{
    background: linear-gradient(90deg, rgba(14,31,61,0.38) 0%, rgba(14,31,61,0) 20%);
  }
}
body.page-id-18 .elementor-element-95328ae{
  display:flex !important; justify-content:flex-start !important; margin-bottom:18px !important;
}
body.page-id-18 .elementor-element-03a40bf .elementor-widget-container{
  display:inline-flex; align-items:center;
  /* Bug 9 (round 2, conservative pass): swapped the plain translucent-white
     pill for the design system's own accent blue, tinted — a small, purely
     cosmetic color change (no size/position touched) that puts the site's
     real accent color somewhere visible on this page's hero instead of a
     generic white-on-dark badge, without touching the already-approved
     navy/blue/orange CTA palette. */
  background: rgba(47,95,214,0.28); border:1px solid rgba(120,160,255,0.55);
  border-radius:999px; padding:8px 22px;
}
body.page-id-18 .elementor-element-03a40bf .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size: clamp(12px, 1.6vw, 14px) !important;
  letter-spacing:0.14em !important;
  text-transform:uppercase !important;
  color:#FFFFFF !important;
  text-shadow:none !important;
}
body.page-id-18 .elementor-element-b551c84{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  width:100% !important; max-width:100% !important;
}
body.page-id-18 .elementor-element-3444010{ width:100%; max-width:520px; margin:0; }
body.page-id-18 .elementor-element-3444010 .elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:700 !important;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem) !important;
  line-height:1.16 !important;
  color:#FFFFFF !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45) !important;
  text-align:left !important;
  margin:0 !important;
}
/* ---------- CTA/booking band: form as a premium white card ----------
   The CF7 markup itself (.spark-form-row / .spark-form-field / .spark-form-label)
   already comes from the shared CF7 template used everywhere else on the site
   (same #1670 form as the Consultancy page and the floating "Book Appointment"
   modal) — only the card chrome and field styling are page-scoped here. */
body.page-id-18 .elementor-element-2af3e35{
  width:100%; max-width:560px; margin: 26px 0 0 !important;
}
body.page-id-18 .elementor-element-2af3e35 .elementor-widget-container{
  background:#FFFFFF; border-radius:18px; box-shadow: var(--md-shadow-lg);
  padding: clamp(22px,4vw,32px) clamp(20px,4vw,30px) clamp(24px,4vw,30px);
}
body.page-id-18 .elementor-element-2af3e35 .spark-form-row{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
@media (min-width:560px){ body.page-id-18 .elementor-element-2af3e35 .spark-form-row{ flex-direction:row; gap:16px; } }
body.page-id-18 .elementor-element-2af3e35 .spark-form-field{ flex:1 1 0; min-width:0; display:block; }
body.page-id-18 .elementor-element-2af3e35 .spark-form-field-full{ flex:1 1 100%; }
body.page-id-18 .elementor-element-2af3e35 .spark-form-label{
  display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:600;
  font-size:0.8rem; color: var(--md-navy); margin-bottom:5px;
}
body.page-id-18 .elementor-element-2af3e35 .wpcf7-form-control-wrap{ display:block; width:100%; }
body.page-id-18 .elementor-element-2af3e35 input[type=text],
body.page-id-18 .elementor-element-2af3e35 input[type=email],
body.page-id-18 .elementor-element-2af3e35 input[type=tel],
body.page-id-18 .elementor-element-2af3e35 select,
body.page-id-18 .elementor-element-2af3e35 textarea{
  width:100% !important; box-sizing:border-box !important;
  padding:13px 14px !important; border:1.5px solid var(--md-line) !important;
  border-radius:9px !important; font-family:'IBM Plex Sans', sans-serif !important;
  font-size:0.95rem !important; color: var(--md-ink) !important; background:#FFFFFF !important;
  min-height:46px;
}
body.page-id-18 .elementor-element-2af3e35 textarea{ resize:vertical; min-height:88px; }
body.page-id-18 .elementor-element-2af3e35 input:focus,
body.page-id-18 .elementor-element-2af3e35 select:focus,
body.page-id-18 .elementor-element-2af3e35 textarea:focus{
  outline:none !important; border-color: var(--md-accent) !important;
  box-shadow:0 0 0 3px rgba(47,95,214,0.15) !important;
}
body.page-id-18 .elementor-element-2af3e35 [data-spark-other-row][hidden]{ display:none !important; }
body.page-id-18 .elementor-element-2af3e35 .spark-form-row-acceptance{
  display:flex !important; align-items:flex-start; gap:8px;
  font-size:0.85rem; color: var(--md-ink-muted); margin:2px 0 14px;
}
body.page-id-18 .elementor-element-2af3e35 input[type=submit]{
  width:100%; height:48px; padding:0 22px !important; border:none !important;
  border-radius:10px !important; background: var(--md-accent) !important; color:#FFFFFF !important;
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:1rem !important; cursor:pointer; transition: background .15s ease;
}
body.page-id-18 .elementor-element-2af3e35 input[type=submit]:hover{ background: var(--md-accent-ink) !important; }
body.page-id-18 .elementor-element-2af3e35 .wpcf7-not-valid-tip{ font-size:0.78rem; margin-top:4px; }

/* ---------- Intro: eyebrow + heading (Lorem Ipsum paragraph removed by JS) ----------
   With the placeholder paragraph gone, the section becomes a single centered
   column instead of the original two-column eyebrow/heading + paragraph split. */
body.page-id-18 .elementor-element-faeee2d{
  background: var(--md-neutral) !important;
  flex-direction:column !important;
  padding: clamp(48px,7vw,72px) clamp(20px,5vw,60px) clamp(24px,4vw,32px) !important;
}
body.page-id-18 .elementor-element-c192c0f{
  width:100% !important; max-width:680px !important; margin:0 auto !important;
  text-align:center !important;
}
body.page-id-18 .elementor-element-9618b55 p{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important; font-size:13px !important;
  letter-spacing:0.1em !important; text-transform:uppercase !important;
  color: var(--md-accent-ink) !important; margin:0 0 10px !important;
}
body.page-id-18 .elementor-element-b4019dc{ text-align:center !important; }
body.page-id-18 .elementor-element-b4019dc .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem) !important;
  line-height:1.2 !important;
  margin:0 !important;
}
/* JS empties this column when it removes the Lorem Ipsum paragraph; hidden here
   too as a CSS-side safety net in case JS runs late. */
body.page-id-18 .elementor-element-136a6c6:empty{ display:none !important; }

/* ---------- Services teaser grid — round 2: asymmetric featured + list ----------
   Round 1 made all 4 real cards visible (good) but as 4 identical boxes in a
   uniform 2x2 grid — the single biggest driver of the "generic template"
   complaint. Round 2 keeps the same underlying fix (n-carousel's Swiper
   engine autoplays/reorders slide nodes forever in loop mode, wrong for an
   "all 4 visible" layout, so the JS below still clones the 4 real cards into
   a plain `.spark-services-grid` div Swiper never touches and hides the
   original widget — presentation-only, real widgets stay in _elementor_data
   and stay editable from Elementor) but now gives the cards two genuinely
   different shapes instead of one repeated shape:
     - ONE featured module (Search Engine Optimization — cleanest image/copy,
       no known issues): full-bleed image, Fraunces heading, full
       description, solid CTA button, spans the full height of the column.
     - THREE supporting cards (Google My Business, Social Media Marketing x2)
       as compact horizontal list rows: small fixed image + text beside it,
       plain sans-serif heading, clamped description, text-arrow link — a
       visually distinct "list" register instead of a shrunk card.
   The JS also reorders the 4 cards (featured first, then the two identical
   "Social Media Marketing" cards separated by Google My Business rather than
   sitting side by side — see duplicate-card note in the JS) and wraps each
   support card's heading/description/button into one `.spark-card-body` so
   they can sit beside the image instead of stacked under it — same
   wrap-not-rebuild DOM technique already used for the hero above.
   "01–04" index numbers use a pure-CSS counter (no invented copy) that now
   follows the new visual order automatically. */
body.page-id-18 .elementor-element-b2530c4{
  background: var(--md-neutral) !important;
  padding: clamp(24px,4vw,32px) clamp(20px,5vw,60px) clamp(48px,7vw,80px) !important;
}
body.page-id-18 .elementor-element-02e94ee{
  max-width:1200px !important; margin:0 auto !important; width:100% !important;
}
body.page-id-18 .spark-services-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  counter-reset: svc-count;
  max-width:1200px; margin:0 auto;
}
body.page-id-18 .spark-services-grid .swiper-slide{
  width:auto !important; height:auto !important; margin:0 !important;
  max-width:none !important; max-height:none !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  position:static !important;
  transform:none !important; opacity:1 !important; display:block !important;
}
body.page-id-18 .spark-services-grid .e-con-boxed{
  max-width:100% !important; width:100% !important; height:100% !important; margin:0 !important;
}
body.page-id-18 .spark-services-grid .e-con-boxed > .e-con-inner{ height:100%; display:flex !important; }

/* Round 4: support-card images were losing real content (client-reported,
   confirmed in an actual browser, not a headless artifact this time) --
   Google My Business's wordmark/logo and part of the SMM icon collage were
   getting cropped off both edges. Cause: cover-crop fitting genuinely wide
   source photos (Google My Business 768x461 = 1.67:1, SMM.png 3320x1864 =
   1.78:1) into a materially narrower ~1.3:1 image box -- no single
   background-position nudge (round 3 tried 78%/55% and 62%/48%) can show
   100% of an image that wide in a box that narrow via cover, only shift
   which edge gets cut. Switched these 3 cards specifically to
   background-size:contain, which can never crop, over the featured/hero/
   business-plans cover treatment (those boxes are a closer aspect-ratio
   match to their own source photos and were not reported as cropped).
   !important here beats the JS-set inline background-position from round 3
   (a stylesheet !important rule always wins over a non-important inline
   style, regardless of specificity) without needing to touch that JS.

   Round 6: contain avoided cropping, but forcing all 4 source images (whose
   real native ratios range from ~1.67:1 down to Frame-38-2.png's ~1.12:1,
   near-square) into one fixed 16:9 box meant the near-square one now
   letterboxed with an obvious empty margin instead -- confirmed in the
   client's own browser. Reverted the whole background-image conversion for
   these 4 card images (see spark-mdd-toolkit.php, the sparkImgToBg call for
   card images is removed) in favor of a plain <img width:100% height:auto>,
   which sizes the box to each image's own real ratio instead of forcing one
   ratio onto all four -- structurally can't crop OR letterbox, for any
   image shape. */
body.page-id-18 .spark-card--support .elementor-widget-image img,
body.page-id-18 .spark-card--featured .elementor-widget-image img{
  width:100% !important; height:auto !important;
  display:block !important; margin:0 !important;
  object-fit:contain !important;
}

body.page-id-18 .spark-card--featured,
body.page-id-18 .spark-card--support{
  counter-increment: svc-count;
  background:#FFFFFF !important;
  overflow:hidden !important;
  position:relative !important;
  min-height:0 !important;
}

/* Featured module */
body.page-id-18 .spark-card--featured{
  display:flex !important; flex-direction:column !important;
  /* Its immediate Elementor-generated parent (.e-con-inner) is itself a
     column-direction flex box that IS correctly stretched to match the
     support-stack's height by the grid above -- but a column flex parent's
     own children only fill that available height via flex-grow, not
     align-items/height:100% (those govern the cross axis, not the main
     axis of a column flow). flex-grow:1 is what actually closes the gap. */
  flex:1 1 auto !important;
  border-radius:20px !important;
  box-shadow: var(--md-shadow-lg) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.page-id-18 .spark-card--featured:hover{ transform: translateY(-3px) !important; }
/* Round 3: ROOT CAUSE OF THE "DARK CIRCLE" FOUND AND FIXED. This ::before (the
   "01" index badge) never had an explicit width/height/right/bottom, so on
   this specific element -- a real Elementor container (elementor-element-9ed6199),
   which ships its own generated ::before rule reserved for its native
   background-overlay feature, sized to cover the full element -- this badge
   was silently inheriting that full-card sizing (confirmed via computed style:
   width/height came back as the exact 616x892px card dimensions, not the
   intended ~13x13px pill) for any box properties this rule left unset. With
   border-radius:999px, a box that large renders as a giant rounded oval
   spanning nearly the whole card -- the "dark circle." (The 3 support cards
   never showed it because their own "0X" index badges live on a plain,
   non-Elementor-managed div -- .spark-card-body::before -- with no such
   inherited rule to collide with.) This was NOT the <img> render bug the
   earlier rounds' investigation went looking for; it was a completely
   separate, ordinary CSS box-sizing bug in our own badge rule, confirmed by
   disabling every other candidate (background-image, box-shadow, filter,
   border-radius, backdrop-filter, sitewide, headed and headless) one at a
   time and finding this was the only one that mattered. Fix: explicitly pin
   width/height back to auto and right/bottom back to unset, all !important
   since Elementor's own rule for this element uses !important too. */
body.page-id-18 .spark-card--featured::before{
  content: "0" counter(svc-count);
  position:absolute !important;
  top:18px !important; left:18px !important;
  right:auto !important; bottom:auto !important;
  width:auto !important; height:auto !important;
  z-index:3;
  font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.04em; color:#FFFFFF;
  background: rgba(14,31,61,0.82) !important;
  border-radius:999px !important; padding:6px 13px;
  display:inline-block !important;
  line-height:1.1 !important;
}
/* Round 6: was a fixed aspect-ratio/min-height box with the image painted as
   a background (see the round-6 note above the support-card image rule for
   why that was reverted). The image widget now just wraps its own <img> at
   that image's real natural size -- no forced ratio, so grid-driven height
   changes elsewhere on the row can no longer stretch this box into a shape
   the photo doesn't actually have. */
body.page-id-18 .spark-card--featured .elementor-widget-image{
  margin:0 !important;
  width:100% !important;
}
body.page-id-18 .spark-card--featured h2.elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:700 !important;
  /* px bounds, not rem: this theme drops the html root font-size to
     14.592px below 1024px (confirmed live), so rem-based clamp bounds here
     were quietly rendering under the client's specified pixel ranges on
     mobile even though they measured correctly at desktop. px bounds are
     immune to that. */
  font-size: clamp(24px, 2.6vw, 30px) !important;
  line-height:1.22 !important;
  color: var(--md-navy) !important;
  text-shadow:none !important;
  text-align:left !important;
  margin: clamp(20px,3vw,28px) clamp(24px,3vw,32px) 10px !important;
  padding:0 !important;
}
body.page-id-18 .spark-card--featured .elementor-widget-text-editor p{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-size: clamp(15px, 2.6vw, 17px) !important; line-height:1.6 !important;
  color: var(--md-ink-muted) !important;
  margin:0 clamp(24px,3vw,32px) 20px !important; padding:0 !important;
}
@media (min-width:1024px){
  body.page-id-18 .spark-card--featured h2.elementor-heading-title{
    font-size: clamp(32px, 2.4vw, 42px) !important;
  }
  body.page-id-18 .spark-card--featured .elementor-widget-text-editor p{
    font-size: clamp(16px, 0.9vw, 18px) !important;
  }
}
body.page-id-18 .spark-card--featured .elementor-widget-button{
  margin-top:auto !important;
  padding: 4px clamp(24px,3vw,32px) clamp(24px,3vw,32px) !important;
}
body.page-id-18 .spark-card--featured .elementor-button{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  background: var(--md-accent) !important; color:#FFFFFF !important;
  border:none !important; border-radius:10px !important;
  padding:13px 24px !important; font-weight:700 !important; font-size:15px !important;
  box-shadow:none !important; transition: background .15s ease;
}
body.page-id-18 .spark-card--featured .elementor-button:hover{ background: var(--md-accent-ink) !important; transform:none !important; }
body.page-id-18 .spark-card--featured .elementor-button .elementor-button-text::after{
  content:'\2192'; margin-left:2px; display:inline-block;
}

/* The 3 real slides these cards are cloned from each carry their own
   original per-widget margin/padding from whenever the source carousel was
   built in Elementor (confirmed via computed style: one slide has 30px
   bottom margin AND 30px bottom padding on its e-con-inner, another has 50px
   top padding on its e-con-inner, the third has neither) -- harmless inside
   a horizontal carousel, but inside this vertical list it's what was making
   the gap between rows 1 and 2 visibly larger than the gap between rows 2
   and 3. Zeroed out at the wrapper level (not touching .spark-card-body,
   which is our own child element with its own deliberate padding). */
body.page-id-18 .spark-support-stack .swiper-slide,
body.page-id-18 .spark-support-stack .e-con-boxed,
body.page-id-18 .spark-support-stack .e-con-inner{
  margin:0 !important;
  padding:0 !important;
}
body.page-id-18 .spark-card--support{
  /* Round 5: was flex-direction:row (image as a ~45% side column, text
     beside it) -- client compared directly against the live site and the
     image read as too small there, and the narrow text column was also
     the same class of squeeze that caused the round-3 mid-word-wrap bug.
     Column layout (image full-width on top, text below) matches how the
     live site itself presents every service card, gives the image its
     whole real width instead of competing with the text column for it,
     and mirrors .spark-card--featured's own layout (see above) so all 4
     cards now share one consistent composition instead of two different
     ones. */
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  margin:0 !important;
  border:1px solid var(--md-line) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
  /* Height to fill its ancestor chain is set as an explicit inline px value
     by syncSupportCardHeights() in spark-mdd-toolkit.php, not by CSS: this
     card sits inside swiper-slide > e-con-boxed > e-con-inner (column-flex,
     one child each) and, despite genuinely being the winning declaration
     (confirmed via CDP matched-styles, not a specificity/cascade miss),
     neither height:100% nor flex-grow ever actually resolved past this
     specific link in the chain -- a real nested-flex percentage-resolution
     limit, not a bug in this rule. Measuring the parent's rendered height in
     JS and writing it back as a literal px value sidesteps that entirely.
     The .swiper-slide wrapper one level up (below) does correctly absorb the
     grid's stretch via flex-grow -- that link works fine on its own. */
}
/* The element .spark-support-stack actually lays out as a flex item is the
   cloned .swiper-slide wrapper (each support card's real markup lives several
   levels deeper inside it: swiper-slide > e-con-boxed > e-con-inner > the
   elementor-element carrying .spark-card--support) -- flex-grow on
   .spark-card--support itself, several levels too deep, had no effect on the
   stack's own layout. This is the fix that actually closes the gap: grows
   the 3 slide wrappers evenly to absorb the extra height the grid's
   align-items:stretch gives .spark-support-stack to match the (taller,
   image-dominant) featured card, so that extra height becomes more breathing
   room inside each row instead of the growing gaps between rows that
   justify-content:space-between produced before. */
body.page-id-18 .spark-support-stack > .swiper-slide{
  display:flex !important; flex-direction:column !important;
  flex:1 1 auto !important;
}
body.page-id-18 .spark-card--support:hover{
  border-color: var(--md-accent) !important;
  box-shadow: var(--md-shadow) !important;
}
/* Round 6: was a forced aspect-ratio:16/9 box (see the round-6 note further
   up, above the image-sizing rule that replaced background-size:contain) --
   removed in favor of the image widget just wrapping its own <img> at that
   image's real natural size. */
body.page-id-18 .spark-card--support .elementor-widget-image{
  width:100% !important; margin:0 !important;
}
body.page-id-18 .spark-card-body{
  flex:1 1 auto !important; min-width:0 !important;
  display:flex !important; flex-direction:column !important;
  padding: clamp(16px,3vw,24px) !important;
}
body.page-id-18 .spark-card-body::before{
  content: "0" counter(svc-count);
  display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:700;
  /* px bounds, not rem -- see the note on .spark-card--featured h2 above:
     this theme's html root font-size drops to 14.592px below 1024px, which
     was quietly undersizing every rem-bounded clamp() on this page at mobile
     even though desktop measured correctly. */
  font-size: clamp(12px, 1.6vw, 14px); letter-spacing:0.06em; color: var(--md-accent-ink);
  margin-bottom:4px;
}
body.page-id-18 .spark-card-body h2.elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size: clamp(18px, 4vw, 22px) !important;
  line-height:1.3 !important;
  color: var(--md-navy) !important;
  text-shadow:none !important;
  text-align:left !important;
  margin:0 0 4px !important; padding:0 !important;
}
body.page-id-18 .spark-card-body .elementor-widget-text-editor p{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-size: clamp(14.5px, 2.8vw, 16px) !important; line-height:1.5 !important;
  color: var(--md-ink-muted) !important;
  margin:0 0 8px !important; padding:0 !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.page-id-18 .spark-card-body .elementor-widget-button{ margin-top:auto !important; padding:0 !important; }
/* Round 6: was a plain text link (transparent background, no padding) --
   client compared it against the featured card's solid button and flagged
   the inconsistency directly ("explore button ... alg hai"). Same solid
   button treatment as .spark-card--featured .elementor-button now, just at
   a slightly smaller size to match this card's more compact scale -- all 4
   "Explore Service" CTAs read as the same button now, not two different
   styles. */
body.page-id-18 .spark-card-body .elementor-button{
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  background: var(--md-accent) !important; color:#FFFFFF !important;
  border:none !important; border-radius:9px !important;
  padding:11px 20px !important; font-weight:700 !important;
  font-size: clamp(14px, 1.8vw, 15px) !important;
  box-shadow:none !important; transition: background .15s ease;
}
@media (min-width:1024px){
  body.page-id-18 .spark-card-body h2.elementor-heading-title{
    font-size: clamp(22px, 1.6vw, 28px) !important;
  }
  body.page-id-18 .spark-card-body .elementor-widget-text-editor p{
    font-size: clamp(16px, 0.8vw, 18px) !important;
  }
}
body.page-id-18 .spark-card-body .elementor-button:hover{ background: var(--md-accent-ink) !important; transform:none !important; box-shadow:none !important; }
body.page-id-18 .spark-card-body .elementor-button .elementor-button-text::after{
  content:'\2192'; margin-left:2px; display:inline-block;
}
/* Round 5: the mirror transform previously here (scaleX(-1), to make the two
   identical Social Media Marketing cards look less like exact twins) was
   removed. Client wants every image shown exactly as it is on the live site,
   with nothing altered -- a mirrored/backwards version of a real image isn't
   that, even though it never touched the underlying file. Both cards now
   show the same real image plainly, unaltered; the duplication itself
   remains a genuine, already-flagged content issue for the client to
   resolve, not something to visually paper over. */

body.page-id-18 .spark-support-stack{
  display:flex !important; flex-direction:column !important;
  gap:16px !important;
}
/* The 2-column featured+list split starts at 1120px, not 768px (and not
   1024px either): the same "whole tablet range" squeeze already documented
   on the corporate section below (its own comment explains the same class
   of bug) hits here too. First confirmed live at 768px ("Social Media
   Marketing" / "Google My Business" wrapping mid-word, "Market/ing",
   "Busine/ss"); moving the split to 1024px fixed that but "Marketing" was
   still breaking right at 1024px itself once the support image's own share
   was widened for the "image should dominate the card" requirement below --
   at exactly 1024px, 22px bold "Marketing" (9 characters) and the actual
   available text column width came out to a near-exact tie, so the split
   needed a bigger margin, not just a one-off nudge. Below 1120px,
   .spark-services-grid stays the single stacked column from its base rule
   above (full viewport width per card, comfortably more room than any card
   heading needs), matching how mobile already looks. */
@media (min-width:1120px){
  body.page-id-18 .spark-services-grid{
    display:grid !important;
    grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) !important;
    /* Round 5: was align-items:stretch, matched by syncSupportCardHeights()
       (removed below) forcing all 3 support cards to an explicit px height.
       That machinery existed to close a gap when the support stack was
       shorter than the featured column -- but now that support images are
       real full-width photos instead of a cramped side column, the support
       stack is naturally the TALLER side, and stretch was instead forcing
       the *featured* image to grow into a box far more portrait than its
       own 1024x614 photo, which either cropped it savagely (cover) or
       surrounded it with a large empty margin (contain, the interim fix
       tried above). align-items:start lets each column size to its own
       real content -- two independently-bordered cards ending at different
       natural heights is a normal, intentional asymmetric-grid look, not a
       defect, and it's what actually stops the SEO photo from being
       stretched into a shape it was never meant to fill. */
    align-items:start !important;
    gap:28px !important;
  }
  body.page-id-18 .spark-support-stack{ gap:20px !important; }
  /* Round 5: the image widget's width:100%/aspect-ratio:16/9 base rule above
     already scales correctly with the card's own column width at every
     breakpoint (column layout, not the old row/flex-basis split), so no
     override is needed here any more -- removed the old flex:0 0 46%
     side-column rule rather than leaving it to fight the new layout. */
}
/* ---------- "We create business plans" ----------
   The dark overlapping caption card (a06b352) already gets its negative-margin
   overlap from Elementor's own responsive settings across breakpoints — that
   mechanism is left alone; only its color/type are brought onto the design
   system (was an off-token #1F1F1F, now the real navy). Second Lorem Ipsum
   instance (e65ae9a) is removed by JS the same way as the intro section's. */
body.page-id-18 .elementor-element-dd5b91a{
  padding: clamp(56px,8vw,88px) clamp(20px,5vw,60px) !important;
  background:#FFFFFF !important;
}
/* Real photo enlarged to visually dominate the section (was a cramped ~506px
   image inside a ~635px column, on a near-50/50 split -- neither the column
   share nor the image's own fill matched the column). Converted to
   background-image (see .spark-bg-img note above) so it can genuinely fill
   its box edge-to-edge with cover-crop instead of rendering at intrinsic
   size with dead space beside it. */
body.page-id-18 .elementor-element-d946a8e{
  border-radius:16px !important;
  box-shadow: var(--md-shadow) !important;
  width:100% !important;
  height:100% !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
}
body.page-id-18 .elementor-element-d946a8e .elementor-widget-container{
  width:100% !important; height:100% !important;
}
@media (max-width:1023px){
  body.page-id-18 .elementor-element-d946a8e{ aspect-ratio:4/5 !important; height:auto !important; flex:none !important; }
}
@media (min-width:1024px){
  body.page-id-18 .elementor-element-2cc89c7{ flex:0 1 58% !important; width:58% !important; max-width:58% !important; }
  body.page-id-18 .elementor-element-b922b6b{ flex:0 1 42% !important; width:42% !important; max-width:42% !important; }
}
body.page-id-18 .elementor-element-a06b352{
  background: var(--md-navy) !important;
  box-shadow: var(--md-shadow-lg) !important;
  border-radius:16px !important;
}
body.page-id-18 .elementor-element-a06b352 h2.elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:700 !important;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important;
  line-height:1.2 !important;
  color:#FFFFFF !important;
  text-shadow:none !important;
  margin:0 !important;
}
body.page-id-18 .elementor-element-b922b6b{ padding-top: clamp(24px,4vw,40px) !important; }
body.page-id-18 .elementor-element-4c6bdf7 p{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:13px !important; letter-spacing:0.1em !important; text-transform:uppercase !important;
  color: var(--md-accent-ink) !important; margin:0 0 10px !important;
}
body.page-id-18 .elementor-element-b160ce6 .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size: clamp(1.7rem, 3.2vw, 2.2rem) !important;
  line-height:1.2 !important;
  margin:0 0 6px !important;
}
body.page-id-18 .elementor-element-e65ae9a{ display:none !important; }
/* Numbered premium layout: the only real copy here is the two heading
   strings themselves ("01./02." prefix + label) — no description exists in
   _elementor_data for either, confirmed, so nothing is invented below. The
   numerals are enlarged into a real editorial index (big Fraunces numeral,
   baseline-aligned to the label) instead of a small inline gray prefix. */
body.page-id-18 .elementor-element-ec6f373,
body.page-id-18 .elementor-element-48c64ff{
  padding: 18px 0 !important;
  border-top: 1px solid var(--md-line) !important;
}
body.page-id-18 .elementor-element-ec6f373{ margin-top: 26px !important; }
body.page-id-18 .elementor-element-ec6f373 .elementor-heading-title,
body.page-id-18 .elementor-element-48c64ff .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:600 !important;
  font-size: clamp(1rem, 1.6vw, 1.1rem) !important;
  color: var(--md-ink) !important;
  margin:0 !important;
  display:flex !important;
  align-items:baseline !important;
  gap:16px !important;
}
body.page-id-18 .elementor-element-ec6f373 .elementor-heading-title span,
body.page-id-18 .elementor-element-48c64ff .elementor-heading-title span{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:700 !important;
  font-size: clamp(1.9rem, 3.2vw, 2.4rem) !important;
  color: var(--md-accent) !important;
  flex-shrink:0;
}
body.page-id-18 .elementor-element-08b95f4{ margin-top: 26px !important; }
body.page-id-18 .elementor-element-08b95f4 .elementor-button{
  background: var(--md-accent) !important;
  border-radius:10px !important;
  padding: 14px 26px !important;
}
body.page-id-18 .elementor-element-08b95f4 .elementor-button:hover{ background: var(--md-accent-ink) !important; }
/* Elementor only stacks this image+content pair to a column below 767px; between
   768-1023px (tablet) it stays row with the caption card's own responsive width
   (53-70%) squeezed into a much narrower column than it was designed for, which
   breaks words mid-letter. Forcing a single column through the whole tablet range
   sidesteps that squeeze entirely and matches how it already looks under 767px. */
@media (max-width:1023px){
  body.page-id-18 .elementor-element-dd5b91a{ flex-direction:column !important; }
  body.page-id-18 .elementor-element-2cc89c7,
  body.page-id-18 .elementor-element-b922b6b{ width:100% !important; max-width:100% !important; }
  body.page-id-18 .elementor-element-a06b352{ width:78% !important; margin-top:-56px !important; }
}

/* ---------- Metrics band (real numbers: 200 / 20 / 10 / 2) ----------
   Divider elements (ea47c0a/d62d0b2/a412a57) carry Elementor's own
   elementor-hidden-mobile class, which only hides them under ~767px — the flex
   row of 4 counters + 3 dividers has no room in the 768-1023px tablet range
   either (labels visibly clipped at the section edges), so the same 2x2 grid
   used at mobile is extended through the whole tablet range, hiding the
   dividers explicitly rather than depending on Elementor's own breakpoint. */
/* Client-reported "extra unwanted whitespace below the stats/metrics
   band" -- confirmed real via getBoundingClientRect at every breakpoint:
   0px gap at 768px+ (desktop/tablet), but a consistent 30px plain-
   background gap both ABOVE and BELOW this navy band at every width
   below 768px. Root cause: this element carries its own Elementor
   "margin: 30px 0" (an authored responsive-only setting, present at
   mobile/tablet-portrait breakpoints, 0 at desktop) -- since the band's
   own navy background is a `padding`-box fill, the outside `margin`
   exposes the page's plain background on both sides, reading as two
   unexplained pale gaps sandwiching an otherwise-solid navy section.
   Zeroing it removes both gaps without touching the (already correct)
   internal padding that gives the numbers their breathing room. */
body.page-id-18 .elementor-element-0c838c8{
  background: var(--md-navy) !important;
  padding: clamp(48px,7vw,80px) clamp(20px,5vw,40px) !important;
  margin: 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.page-id-18 .elementor-element-0c838c8 > .e-con{ flex:1 1 0; min-width:110px; }
body.page-id-18 .elementor-element-0c838c8 .elementor-counter-number-wrapper{
  font-size: clamp(2.1rem, 3.6vw, 2.9rem) !important;
  color:#FFFFFF !important;
}
body.page-id-18 .elementor-element-0c838c8 h2.elementor-heading-title{
  color: rgba(255,255,255,0.72) !important;
  text-shadow:none !important;
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:600 !important;
  font-size:13px !important;
  text-transform:uppercase !important;
  letter-spacing:0.07em !important;
  margin-top:2px !important;
}
body.page-id-18 .elementor-element-0c838c8 .elementor-divider-separator{
  border-color: rgba(255,255,255,0.18) !important;
}
@media (max-width:1023px){
  body.page-id-18 .elementor-element-0c838c8{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:28px 16px !important;
    text-align:center;
  }
  body.page-id-18 .elementor-element-ea47c0a,
  body.page-id-18 .elementor-element-d62d0b2,
  body.page-id-18 .elementor-element-a412a57{ display:none !important; }
}

/* ============================================================
   ABOUT US PAGE — full visual rebuild (page-id-14 + shared header/footer)
   Seven real sections, no invented content: hero/booking band (real bg photo of
   5 doctors, art-directed with a deliberate blank-blue negative-space column on
   the right for text — preserved, not force-cropped — + embedded CF7 #1670 form,
   same real form used everywhere else on the site), Introduction (a real,
   substantive but off-voice first-person freelancer bio — flagged in delivery
   notes, not rewritten), Clients/partners intro (one Lorem Ipsum paragraph
   removed from display via JS — pre-approved placeholder cleanup), an 8-logo
   client/partner showcase (n-carousel converted to a static grid, same
   clone-not-rebuild technique as the Services page's teaser grid, for the same
   reason: a live looping Swiper instance is the wrong fit for "show everything
   at once"), Meet Our Team header (second Lorem Ipsum instance removed), the
   6-real-member team grid (2 nearly-empty extra slots in the source data hidden,
   not filled with invented people; the 2 real cards from row 2 are flattened
   into row 1's grid via JS so all 6 sit in one continuous CSS grid), and a
   closing "Choose plans" CTA whose image is a confirmed mismatched stock asset
   (a carbon-offset/ESG report photo) swapped for a real, already-uploaded,
   topically-appropriate photo already used elsewhere on this site (Services
   page's "We create business plans" photo, attachment 3207) — flagged in
   delivery notes as a client-overridable choice, not fabricated content.
   Structural work (Lorem Ipsum removal, logo-grid/team-grid DOM flattening, the
   CTA image src swap) happens in JS (spark-mdd-toolkit.php wp_footer,
   page-id-14 block) — nothing here touches _elementor_data.
   ============================================================ */

/* Introduction section (1231322/696b018) ships with Elementor's own native
   fadeInLeft/fadeInRight entrance-animation setting (elementor-invisible +
   opacity:0 until Elementor's own scroll-triggered JS removes it) — confirmed
   live to be unreliable on this install (the section could render fully
   blank/invisible depending on scroll/intersection timing, a real defect no
   visitor should ever see). Neutralized here rather than depending on
   Elementor's own animation JS: content is always visible immediately,
   trading a native fade-in for guaranteed correctness.
   The opacity-only override above was incomplete: Elementor's animation.min.css
   sets visibility:hidden on .elementor-invisible too (confirmed live via
   computed style — opacity read back as 1 after the fix above, but
   visibility still read "hidden", so the whole Introduction section rendered
   as a blank gap regardless). Both properties need forcing together.
   Still not the full picture: once Elementor's own animation JS actually
   fires (on scroll/intersection), it SWAPS .elementor-invisible for
   .animated.fadeInRight (or fadeInLeft) and runs its own @keyframes
   animation on opacity AND transform — caught live mid-flight via
   elementFromPoint at opacity:0.5 and transform:translateX(180px), which is
   exactly why the intro photo and some team photos still rendered
   effectively blank/displaced in a real screenshot even after the fix
   above: that fix only covers the PRE-animation class, not the DURING/
   POST one Elementor swaps in once it actually triggers. Covering both
   classes and force-clearing transform/animation is what actually
   guarantees the content is always fully visible in place, regardless of
   scroll timing -- the same "don't depend on Elementor's own animation
   JS" reasoning as before, just applied completely instead of partially. */
body.page-id-14 .elementor-invisible,
body.page-id-14 .animated{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  animation:none !important;
}

/* ---------- Hero/booking band ----------
   Round 2 rebuild. Frame-81-1.png is a real ~1597x500 banner (5 real doctors,
   roughly 3.2:1 wide/short). The first version kept it as this container's own
   CSS background-image sized to its real ratio (never cropped, by design) --
   correct in isolation, but the CONTAINER's height is driven by its tallest
   real content, the heading+form column (700px+), so the ~360-450px-tall
   photo band ended well under halfway down a much taller container, leaving
   a large plain-navy void with no photo in it at all below/beside the actual
   image. Confirmed via the client's own screenshots: reads as "half the hero
   is just missing," not a subtle spacing issue -- the same class of "image
   and its box disagree on shape" problem that hit the Services page multiple
   times, just inverted (there the box was too small for the image; here the
   box the image sits in is too *big* for it). Same fix, applied at the
   structural level this time: the photo is now a real <img> in its own band
   (spark-about-hero-photo, injected in spark-mdd-toolkit.php's page-id-14
   block), sized to its own natural width:100%/height:auto so it can
   structurally never be cropped, distorted, OR leave a mismatched void --
   its band is always exactly as tall as the photo actually is. The eyebrow/
   heading/form (spark-about-hero-content, the container's other real
   children, simply moved by the same script) form a second band directly
   below it, sized purely by its own content, on a solid navy fill. Two
   independently-sized stacked bands instead of one image forced to share a
   box with unrelated content is what makes a mismatch impossible by
   construction, not just unlikely -- deliberately simpler than the original
   photo-overlaps-into-navy-column composition (that overlap is exactly what
   created the coupling that broke), consistent with this project's standing
   lesson that a reliably-correct simple layout beats a clever one that keeps
   finding new ways to break. */
body.page-id-14 .elementor-element-fa4ee6a{
  background: var(--md-navy) !important;
  display:flex !important; flex-direction:column !important;
  align-items:stretch !important; justify-content:flex-start !important;
  min-height:unset !important;
  padding:0 !important;
}
body.page-id-14 .elementor-element-fa4ee6a::before{ content:none !important; display:none !important; }
/* Client round-2 feedback: this natural-ratio band "looks smaller than the
   other pages" next to Services/Consultancy's much taller hero photos.
   Confirmed by measurement: at 1440px this band rendered only 450px tall
   (Frame-81-1.png's own true ratio, 1597x500 = 3.19:1) vs Services' 935px
   hero photo column. Reconciled without reintroducing the cropping bug
   this band was built to fix: measured the source file directly (canvas
   pixel-scan across 6 rows) and confirmed all 5 real doctors end by
   x=895 of 1597 -- the entire right ~44% of the frame is empty
   decorative gradient, not people. A fixed aspect-ratio box down to
   ~1.8:1 (900/500) would still keep every person fully in frame; 2.2:1
   is used here, well short of that limit, so there's a safe buffer past
   the last person before any real crop line. Cropping only ever removes
   part of that empty right-hand gradient, never a person -- confirmed
   below with a fresh screenshot, not just this calculation. */
body.page-id-14 .spark-about-hero-photo{ width:100%; line-height:0; aspect-ratio:2.2/1; overflow:hidden; }
body.page-id-14 .spark-about-hero-photo img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  object-position: left center !important; display:block !important; margin:0 !important;
}
@media (max-width:639px){
  /* A touch shorter relative to width on small phones -- 2.2:1 at 320-430px
     width (145-195px tall) reads thin as a hero band; 1.9:1 is still
     comfortably inside the 1.8:1 no-crop limit measured above. */
  body.page-id-14 .spark-about-hero-photo{ aspect-ratio:1.9/1; }
}
body.page-id-14 .spark-about-hero-content{
  width:100%;
  padding: clamp(32px,6vw,56px) clamp(20px,5vw,40px) clamp(40px,7vw,64px) !important;
}

body.page-id-14 .elementor-element-a11696d,
body.page-id-14 .elementor-element-51e95a7{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  width:100% !important; max-width:480px !important; margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
}
body.page-id-14 .elementor-element-a11696d{ margin-bottom:16px !important; }

body.page-id-14 .elementor-element-c95ec32 .elementor-widget-container{
  display:inline-flex; align-items:center;
  /* Bug 9 (round 2, conservative pass): same accent-blue swap as the
     Services page's matching hero badge above, for a consistent look
     across both pages that share this exact pill component. */
  background: rgba(47,95,214,0.28); border:1px solid rgba(120,160,255,0.55);
  border-radius:999px; padding:8px 22px;
}
body.page-id-14 .elementor-element-c95ec32 .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size: clamp(12px,1.6vw,14px) !important;
  letter-spacing:0.14em !important; text-transform:uppercase !important;
  color:#FFFFFF !important; text-shadow:none !important;
}
body.page-id-14 .elementor-element-0a5d9d2 .elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:700 !important;
  font-size: clamp(26px,4.4vw,40px) !important;
  line-height:1.18 !important;
  color:#FFFFFF !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45) !important;
  text-align:center !important;
  margin: 16px 0 22px !important;
}

/* ---------- Hero: form as a premium white card ----------
   The CF7 markup (.spark-form-row / .spark-form-field / .spark-form-label)
   already comes from the shared CF7 template used everywhere else on the site
   (real form #1670, confirmed via `wp post list --post_type=wpcf7_contact_form`
   — the "ea3bba5" shortcode id is CF7's own hash-based unit tag for that same
   numeric form, verified live: data-wpcf7-id="1670") — only the card chrome
   and field styling are page-scoped here. */
body.page-id-14 .elementor-element-d044c91{ width:100% !important; max-width:480px !important; margin:0 auto !important; }
body.page-id-14 .elementor-element-d044c91 .elementor-widget-container{
  background:#FFFFFF; border-radius:18px; box-shadow: var(--md-shadow-lg);
  padding: clamp(22px,4vw,28px) clamp(20px,4vw,26px) clamp(24px,4vw,26px);
  text-align:left;
}
body.page-id-14 .elementor-element-d044c91 .spark-form-row{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
@media (min-width:520px){ body.page-id-14 .elementor-element-d044c91 .spark-form-row{ flex-direction:row; gap:14px; } }
body.page-id-14 .elementor-element-d044c91 .spark-form-field{ flex:1 1 0; min-width:0; display:block; }
body.page-id-14 .elementor-element-d044c91 .spark-form-field-full{ flex:1 1 100%; }
body.page-id-14 .elementor-element-d044c91 .spark-form-label{
  display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:600;
  font-size:0.78rem; color: var(--md-navy); margin-bottom:5px;
}
body.page-id-14 .elementor-element-d044c91 .wpcf7-form-control-wrap{ display:block; width:100%; }
body.page-id-14 .elementor-element-d044c91 input[type=text],
body.page-id-14 .elementor-element-d044c91 input[type=email],
body.page-id-14 .elementor-element-d044c91 input[type=tel],
body.page-id-14 .elementor-element-d044c91 select,
body.page-id-14 .elementor-element-d044c91 textarea{
  width:100% !important; box-sizing:border-box !important;
  padding:12px 13px !important; border:1.5px solid var(--md-line) !important;
  border-radius:9px !important; font-family:'IBM Plex Sans', sans-serif !important;
  font-size:0.92rem !important; color: var(--md-ink) !important; background:#FFFFFF !important;
  min-height:44px;
}
body.page-id-14 .elementor-element-d044c91 textarea{ resize:vertical; min-height:76px; }
body.page-id-14 .elementor-element-d044c91 input:focus,
body.page-id-14 .elementor-element-d044c91 select:focus,
body.page-id-14 .elementor-element-d044c91 textarea:focus{
  outline:none !important; border-color: var(--md-accent) !important;
  box-shadow:0 0 0 3px rgba(47,95,214,0.15) !important;
}
body.page-id-14 .elementor-element-d044c91 [data-spark-other-row][hidden]{ display:none !important; }
body.page-id-14 .elementor-element-d044c91 .spark-form-row-acceptance{
  display:flex !important; align-items:flex-start; gap:8px;
  font-size:0.82rem; color: var(--md-ink-muted); margin:2px 0 14px;
}
body.page-id-14 .elementor-element-d044c91 input[type=submit]{
  width:100%; height:46px; padding:0 22px !important; border:none !important;
  border-radius:10px !important; background: var(--md-accent) !important; color:#FFFFFF !important;
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:0.98rem !important; cursor:pointer; transition: background .15s ease;
}
body.page-id-14 .elementor-element-d044c91 input[type=submit]:hover{ background: var(--md-accent-ink) !important; }
body.page-id-14 .elementor-element-d044c91 .wpcf7-not-valid-tip{ font-size:0.76rem; margin-top:4px; }

@media (min-width:1024px){
  /* A row layout here (eyebrow beside the heading+form block, or eyebrow
     beside a heading/form split) needs the eyebrow to actually sit inside
     the same visual column as the heading -- it doesn't in the real DOM
     (a11696d and 51e95a7, which itself holds heading+form together, are
     separate siblings), and two rounds of trying to fake that with flex
     alignment (center = eyebrow floats mid-height, flex-start = eyebrow
     strands far left with a huge gap before the heading) both produced a
     visibly broken result. Staying with the same stacked-column composition
     as mobile -- just wider and roomier -- is what actually stays correct;
     matches this project's standing lesson that a reliably-correct simple
     layout beats a clever one that keeps finding new ways to break. */
  body.page-id-14 .spark-about-hero-content{ max-width:640px; margin:0 auto !important; }
  body.page-id-14 .elementor-element-a11696d,
  body.page-id-14 .elementor-element-51e95a7{ max-width:560px !important; }
  body.page-id-14 .elementor-element-0a5d9d2 .elementor-heading-title{ font-size: clamp(30px,2.6vw,42px) !important; }
}

/* ---------- Introduction ----------
   Real, substantive first-person bio (Santosh Solanki) — a known pre-existing
   content issue (freelancer voice, not "Marketing Doctor" company voice,
   flagged in the original site audit) but genuine, non-placeholder content:
   displayed in full, unrewritten, unshortened, with generous line-height and a
   controlled measure for readability. Photo reuses the same real image used
   again on his own team-grid card below (intentional — he is both the bio
   subject and a team member). Per the site's hard-won image rule, the photo is
   a plain <img> at width:100%/height:auto (its own real ~1:1 ratio), never a
   background-image forced into a mismatched box. */
body.page-id-14 .elementor-element-b19995f{
  background: var(--md-paper) !important;
  flex-direction:column !important;
  padding: clamp(48px,8vw,64px) clamp(20px,5vw,60px) !important;
  gap: 32px !important;
}
body.page-id-14 .elementor-element-1231322{ width:100% !important; max-width:100% !important; order:2; }
body.page-id-14 .elementor-element-696b018{ width:100% !important; max-width:320px !important; margin:0 auto !important; order:1; }
body.page-id-14 .elementor-element-46a6378 p{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:13px !important; letter-spacing:0.1em !important; text-transform:uppercase !important;
  color: var(--md-accent-ink) !important; margin:0 0 10px !important;
}
body.page-id-14 .elementor-element-ff41fdf .elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important;
  font-size: clamp(28px,4vw,40px) !important; line-height:1.15 !important;
  margin:0 0 20px !important;
}
body.page-id-14 .elementor-element-bbc466b p{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-size: clamp(16px,2vw,17px) !important;
  line-height:1.8 !important;
  color: var(--md-ink-muted) !important;
  max-width:66ch;
  margin:0 0 18px !important;
}
body.page-id-14 .elementor-element-bbc466b p:last-child{ margin-bottom:0 !important; }
body.page-id-14 .elementor-element-f3765ca img{
  width:100% !important; height:auto !important; display:block !important;
  border-radius:16px !important; box-shadow: var(--md-shadow-lg) !important;
}
@media (min-width:1024px){
  body.page-id-14 .elementor-element-b19995f{
    flex-direction:row !important; align-items:center !important;
    gap: clamp(40px,6vw,80px) !important;
    padding: clamp(64px,8vw,96px) clamp(40px,5vw,64px) !important;
  }
  body.page-id-14 .elementor-element-1231322{ order:1; flex:1 1 56% !important; max-width:56% !important; }
  body.page-id-14 .elementor-element-696b018{ order:2; flex:0 0 38% !important; max-width:360px !important; margin:0 !important; }
}

/* ---------- Clients/partners intro + logo showcase ----------
   Combined into one continuous neutral band (small shared seam padding, full
   padding on the outer top/bottom edges — same rhythm technique used
   throughout this file for adjacent same-color sections). Lorem Ipsum
   paragraph (2dd8442) removed by JS; its now-empty wrapper column hidden here
   as a CSS-side safety net in case JS runs late. */
body.page-id-14 .elementor-element-a47d6b7{
  background: var(--md-neutral) !important;
  flex-direction:column !important;
  padding: clamp(48px,7vw,80px) clamp(20px,5vw,60px) clamp(16px,3vw,24px) !important;
}
body.page-id-14 .elementor-element-ef51398{ width:100% !important; max-width:680px !important; margin:0 auto !important; text-align:center !important; }
body.page-id-14 .elementor-element-acad6d7 p{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:13px !important; letter-spacing:0.1em !important; text-transform:uppercase !important;
  color: var(--md-accent-ink) !important; margin:0 0 10px !important; text-align:center;
}
body.page-id-14 .elementor-element-958869b .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size: clamp(26px,3.6vw,36px) !important; line-height:1.2 !important;
  text-align:center !important; margin:0 !important;
}
body.page-id-14 .elementor-element-daed89c:empty{ display:none !important; }

body.page-id-14 .elementor-element-e6b01d2{
  background: var(--md-neutral) !important;
  padding: clamp(8px,2vw,16px) clamp(20px,5vw,60px) clamp(48px,7vw,72px) !important;
}
/* Real widget hidden (not removed) — a static grid clone (JS) replaces it on
   screen; _elementor_data and the Elementor editor view stay untouched. */
body.page-id-14 .elementor-element-bbe1347{ display:none !important; }

body.page-id-14 .spark-logo-grid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap:16px !important;
  max-width:1100px; margin:0 auto;
}
body.page-id-14 .spark-logo-tile{
  background:#FFFFFF; border:1px solid var(--md-line); border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  aspect-ratio: 800/280;
  display:flex; align-items:center; justify-content:center;
  padding: 16px 20px;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.page-id-14 .spark-logo-tile:hover{ transform: translateY(-3px); box-shadow: var(--md-shadow-lg); }
body.page-id-14 .spark-logo-tile img{
  width:100% !important; height:100% !important; object-fit:contain !important;
  display:block; margin:0 !important;
}
@media (min-width:640px){
  body.page-id-14 .spark-logo-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap:20px !important; }
}
@media (min-width:1024px){
  body.page-id-14 .spark-logo-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap:24px !important; }
  body.page-id-14 .spark-logo-tile{ padding: 20px 26px; }
}

/* ---------- Meet Our Team: header ----------
   Lorem Ipsum text-editor (28df7f9) removed by JS; CSS safety net below. */
body.page-id-14 .elementor-element-533359d{
  background: var(--md-paper) !important;
  flex-direction:column !important;
  padding: clamp(48px,7vw,80px) clamp(20px,5vw,60px) clamp(8px,2vw,16px) !important;
  text-align:center;
}
body.page-id-14 .elementor-element-2be7874 .elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important;
  font-size: clamp(28px,4vw,40px) !important; text-align:center !important; margin:0 !important;
}
body.page-id-14 .elementor-element-28df7f9:empty{ display:none !important; }

/* ---------- Team grid ----------
   6 real members (2 fully empty slots hidden, not invented into). JS flattens
   the 2 real cards from row 2 into row 1's container (see spark-mdd-toolkit.php)
   so all 6 sit in ONE continuous CSS grid: 4 columns desktop, 2 tablet, exactly
   1 (one full card per row) on mobile — explicitly required, not masonry.
   Card height is governed by the grid's own row-stretch (align-items:stretch,
   the CSS Grid default) rather than any fixed pixel height, so a longer
   designation like "SEO And Social Media Specialist" can wrap to 2 lines
   without ever clipping. */
body.page-id-14 .elementor-element-6077b71{
  background: var(--md-paper) !important;
  flex-direction:column !important;
  padding: clamp(16px,3vw,24px) clamp(20px,5vw,60px) clamp(56px,8vw,96px) !important;
}
body.page-id-14 .elementor-element-12bf01c{ display:none !important; }
body.page-id-14 .elementor-element-55a911c,
body.page-id-14 .elementor-element-0087322{ display:none !important; }

/* Higher-specificity selector (body.page-id-14 .elementor-element-6077b71
   .elementor-element-f92e4fd, not just body.page-id-14 .elementor-element-f92e4fd)
   is required here, not stylistic: a pre-existing generic sitewide mobile rule,
   ".elementor-element-6077b71.e-con > .e-child{ flex:0 0 48% !important;
   max-width:48% !important; }" (written earlier for a different, 2-up mobile
   team layout this page no longer uses), matches this exact element with 3
   classes of specificity -- one class more than a plain page+element selector,
   so it was silently winning over max-width/width here despite !important on
   both sides (confirmed live via computed style: max-width was landing at 48%
   instead of the 100% below, collapsing the grid to a ~168px sliver). The
   extra ancestor qualifier below adds the specificity needed to win instead of
   trying to out-rank or remove that older rule (still relied on by nothing on
   this page, but it's shared/generic, so left alone rather than edited). */
body.page-id-14 .elementor-element-6077b71 .elementor-element-f92e4fd{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  max-width:1200px !important; margin:0 auto !important; width:100% !important;
  flex:none !important;
}
@media (min-width:640px){
  body.page-id-14 .elementor-element-6077b71 .elementor-element-f92e4fd{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:24px !important; }
}
@media (min-width:1024px){
  body.page-id-14 .elementor-element-6077b71 .elementor-element-f92e4fd{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap:28px !important; }
}

body.page-id-14 .spark-team-card{
  display:flex !important; flex-direction:column !important;
  width:100% !important; max-width:100% !important; flex:none !important;
  background:#FFFFFF !important; border:1px solid var(--md-line) !important;
  border-radius:16px !important; box-shadow: var(--md-shadow) !important;
  overflow:hidden !important;
  transition: transform .2s ease, box-shadow .2s ease;
  min-height:0 !important; height:auto !important;
}
body.page-id-14 .spark-team-card:hover{ transform: translateY(-4px) !important; box-shadow: var(--md-shadow-lg) !important; }
body.page-id-14 .spark-team-card .elementor-widget-image{ width:100% !important; margin:0 !important; line-height:0; }
body.page-id-14 .spark-team-card .elementor-widget-image img{
  width:100% !important; height:auto !important; display:block !important; margin:0 !important;
  border-radius:0 !important;
}
body.page-id-14 .spark-team-card .elementor-widget-heading{ padding: 20px 20px 2px !important; margin:0 !important; }
body.page-id-14 .spark-team-card h2.elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size: clamp(19px,2.6vw,23px) !important; line-height:1.3 !important;
  color: var(--md-navy) !important; text-shadow:none !important; text-align:left !important;
  margin:0 !important;
}
body.page-id-14 .spark-team-card h2.elementor-heading-title a{ color:inherit; text-decoration:none; }
body.page-id-14 .spark-team-card h2.elementor-heading-title a:hover{ text-decoration:underline; }
body.page-id-14 .spark-team-card .elementor-widget-text-editor{ padding: 4px 20px 22px !important; margin:0 !important; }
body.page-id-14 .spark-team-card .elementor-widget-text-editor p{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:500 !important;
  font-size: clamp(13.5px,1.8vw,14.5px) !important; line-height:1.5 !important;
  color: var(--md-accent-ink) !important; margin:0 !important;
  text-transform:uppercase; letter-spacing:0.02em;
}

/* Subtle staggered entrance, once, on scroll into view (JS adds .spark-in-view
   to the grid via IntersectionObserver — see spark-mdd-toolkit.php). Entirely
   scoped inside prefers-reduced-motion:no-preference so under reduced motion
   cards simply never receive an opacity:0 starting state — always visible,
   no JS dependency for that case either. */
@media (prefers-reduced-motion: no-preference){
  body.page-id-14 .elementor-element-f92e4fd .spark-team-card{
    opacity:0; transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
  }
  body.page-id-14 .elementor-element-f92e4fd.spark-in-view .spark-team-card{ opacity:1; transform:translateY(0); }
  body.page-id-14 .elementor-element-f92e4fd.spark-in-view .spark-team-card:nth-child(1){ transition-delay:0ms; }
  body.page-id-14 .elementor-element-f92e4fd.spark-in-view .spark-team-card:nth-child(2){ transition-delay:70ms; }
  body.page-id-14 .elementor-element-f92e4fd.spark-in-view .spark-team-card:nth-child(3){ transition-delay:140ms; }
  body.page-id-14 .elementor-element-f92e4fd.spark-in-view .spark-team-card:nth-child(4){ transition-delay:210ms; }
  body.page-id-14 .elementor-element-f92e4fd.spark-in-view .spark-team-card:nth-child(5){ transition-delay:280ms; }
  body.page-id-14 .elementor-element-f92e4fd.spark-in-view .spark-team-card:nth-child(6){ transition-delay:350ms; }
}

/* ---------- "Choose plans" CTA ----------
   Image (aa14314) src is swapped by JS to a real, already-uploaded,
   topically-appropriate photo (see spark-mdd-toolkit.php for which one and
   why) — styled here the same way as every other real content photo on this
   site: plain <img>, width:100%/height:auto, its own natural ratio, never
   cropped or distorted. */
body.page-id-14 .elementor-element-9433c77{
  background: var(--md-neutral) !important;
  flex-direction:column !important;
  padding: clamp(48px,7vw,88px) clamp(20px,5vw,60px) !important;
  gap: 44px !important;
}
body.page-id-14 .elementor-element-caf3923{
  width:100% !important; max-width:640px !important; margin:0 auto !important;
  text-align:center !important; order:2;
}
body.page-id-14 .elementor-element-11dcdbf{ width:100% !important; max-width:420px !important; margin:0 auto !important; order:1; }
body.page-id-14 .elementor-element-4848c54 p{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:13px !important; letter-spacing:0.1em !important; text-transform:uppercase !important;
  color: var(--md-accent-ink) !important; margin:0 0 10px !important; text-align:center;
}
body.page-id-14 .elementor-element-b12e582 .elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important;
  font-size: clamp(28px,4vw,42px) !important; line-height:1.18 !important;
  text-align:center !important; margin:0 auto 24px !important; max-width:20ch;
}
body.page-id-14 .elementor-element-fbaba5c{ display:flex; justify-content:center; }
body.page-id-14 .elementor-element-fbaba5c .elementor-button{
  background: var(--md-accent) !important; color:#FFFFFF !important;
  border-radius:10px !important; padding:14px 28px !important;
  font-weight:700 !important; font-size:15px !important; box-shadow:none !important;
}
body.page-id-14 .elementor-element-fbaba5c .elementor-button:hover{ background: var(--md-accent-ink) !important; }
body.page-id-14 .elementor-element-aa14314 img{
  width:100% !important; height:auto !important; display:block !important;
  border-radius:16px !important; box-shadow: var(--md-shadow-lg) !important;
}
@media (min-width:1024px){
  body.page-id-14 .elementor-element-9433c77{
    flex-direction:row !important; align-items:center !important; justify-content:center !important;
    gap: clamp(48px,6vw,88px) !important;
  }
  body.page-id-14 .elementor-element-caf3923{ order:1; flex:1 1 46% !important; max-width:480px !important; text-align:left !important; }
  body.page-id-14 .elementor-element-11dcdbf{ order:2; flex:0 0 40% !important; max-width:420px !important; margin:0 !important; }
  body.page-id-14 .elementor-element-4848c54 p,
  body.page-id-14 .elementor-element-b12e582 .elementor-heading-title{ text-align:left !important; margin-left:0 !important; margin-right:0 !important; }
  body.page-id-14 .elementor-element-fbaba5c{ justify-content:flex-start !important; }
}

/* ============================================================
   HOMEPAGE — full visual rebuild (page-id-32 + shared header/footer)
   The site root. Much longer than every other rebuilt page: hero (a real
   3-slide rotating carousel, not a single static band — 3 real bg photos,
   2 real headline variants, real counters, all still reachable via new
   pagination dots/arrows added below), a client-logo showcase + "Our
   Clients" heading (reordered via JS so the heading introduces the logos
   instead of following them), 9 real named-doctor testimonials (cloned into
   a plain grid so all 9 are always visible + a real Wiz91->Marketing Doctor
   text correction applied via JS, see below), an About block (fixes a real
   Elementor entrance-animation bug that was rendering the whole "Patient
   Lead Generation Plan Services" column permanently invisible), a combined
   Introduction+Team section (same real 6-person roster already verified on
   the About Us page), Pricing (same real 3 plans as Consultancy, same
   missing-bg-image fix reusing the same local photo), a Services intro
   (Lorem Ipsum removed) + the same 4 real service cards/duplicate-content
   bug already solved on the Services page (same asymmetric featured+support
   composition reused directly), a metrics band (same real 200/20/10/2 as
   the Services page), a Blog section (Lorem Ipsum removed + the same
   loop-grid narrow-card defect already solved on the Blog page, root-caused
   here to two unevenly-split flex columns rather than the card CSS itself),
   and a closing social icon-box row (real personal-account links, styled
   only, not re-pointed — flagged in delivery notes). Structural work
   (Lorem Ipsum removal, Wiz91 text correction, carousel->grid cloning,
   dead-link wiring, the About-section visibility fix) happens in JS
   (spark-mdd-toolkit.php wp_footer, page-id-32 block) — nothing here
   touches _elementor_data, so every real piece of content on this page
   stays fully editable from Elementor.
   ============================================================ */

/* Same real Elementor entrance-animation bug already found and fixed on the
   About Us page (page-id-14): a section using Elementor's native
   fadeInLeft/fadeInRight setting can get stuck in its own pre-animation
   `.elementor-invisible` (opacity:0 + visibility:hidden) or mid-animation
   `.animated.fadeInRight/fadeInLeft` state depending on scroll/intersection
   timing, rendering real content permanently blank. Confirmed live on this
   page: the entire About section's left column (elementor-element-4921dc1 —
   "About Us" eyebrow, "Patient Lead Generation Plan Services" heading, the
   real paragraph, both counters, the Read More button) computed
   `visibility:hidden` at rest, which is exactly what was reading as a large
   unexplained blank gap between Testimonials and the Introduction section
   in every screenshot. Same fix as About Us: stop depending on Elementor's
   own animation JS, force content always visible in place. */
body.page-id-32 .elementor-invisible,
body.page-id-32 .animated{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  animation:none !important;
}

/* ---------- Hero carousel: pagination dots + prev/next arrows ----------
   The n-carousel/Swiper widget here shipped with autoplay+infinite loop but
   NO pagination and NO nav arrows configured at all (confirmed via the
   widget's own data-settings — no "pagination" key, unlike the Pricing
   carousel below which does have one) — the only way to ever see slides 2
   and 3 was to wait for autoplay, with zero manual control. Real content
   (2 different bg photos + headline beyond slide 1) must stay reachable on
   demand, not just eventually — JS below reads the widget's own live Swiper
   instance (already exposed on the .swiper element, confirmed live) and
   drives real slideToLoop()/slidePrev()/slideNext() calls from these dots/
   arrows, so this rides the carousel's own real engine rather than faking
   navigation. */
body.page-id-32 .spark-hero-nav{
  position:absolute; left:0; right:0; bottom: clamp(14px,3vw,26px);
  z-index:5; display:flex; align-items:center; justify-content:center; gap:10px;
  pointer-events:none;
}
body.page-id-32 .spark-hero-dots{ display:flex; gap:8px; pointer-events:auto; }
/* Same low-contrast failure mode as the arrows below, found while
   verifying this fix: the previous 25%-opacity white fill on a
   70%-opacity white border was invisible against the lighter parts of
   the photo (confirmed via a real close-up screenshot -- 2 of 3 dots
   disappeared entirely over a light-grey coat). A near-opaque fill plus
   a real shadow (same technique as the arrows) keeps every dot visible
   against any part of any of the 3 slide photos. */
body.page-id-32 .spark-hero-dot{
  width:9px; height:9px; border-radius:999px; padding:0; border:1.5px solid rgba(14,31,61,0.45);
  background: rgba(255,255,255,0.9); box-shadow:0 1px 4px rgba(0,0,0,0.3);
  cursor:pointer; transition: all .2s ease;
}
body.page-id-32 .spark-hero-dot:hover{ background:#FFFFFF; border-color: var(--md-navy); }
body.page-id-32 .spark-hero-dot.is-active{ width:24px; border-radius:5px; background:#FFFFFF; border-color:#FFFFFF; }
/* Contrast fix (client-reported, confirmed live): the previous
   rgba(14,31,61,0.35) navy-tint background + faint white border read as
   a barely-visible grey smudge against the photo, at both its lighter
   and darker areas -- confirmed via a real screenshot before this fix
   (button rendered, but effectively invisible). Solid near-opaque white
   plus a real drop shadow guarantees contrast against ANY photo content
   underneath (light or dark), the way a floating icon-button sits on a
   photo elsewhere in this design system; navy icon on white reads
   clearly, and the hover state inverts to solid navy/white for a clear,
   consistent interactive state. */
/* Round 14 fix (real, reproducible bug found live, independent of the
   headline top-padding fix above): top:50% centered these arrows on the
   exact same 666px box that the text-content column ALSO vertically
   centers itself in (justify-content:center) -- so on every one of the
   3 real slides the arrow's fixed y=442-486 band landed squarely on top
   of that slide's own stats row (confirmed via getBoundingClientRect on
   all 3 slides: stats rows cluster ~y360-530, i.e. exactly where a
   centered arrow also lands), visibly cutting through real client stat
   text ("10+ Years", "30+ Expert Team"). Moved the arrows down to a
   fixed distance from the column's BOTTOM instead of dead-center: every
   slide's own real content (headline + stats + CTA button/logos) ends
   by y~610 at the latest (confirmed live across all 3 slides) and the
   dot pagination sits within ~14-26px of the very bottom -- bottom:90px
   lands in the one band clear on all 3 slides regardless of which
   phrase/slide is showing. */
body.page-id-32 .spark-hero-arrow{
  position:absolute; top:auto; bottom:90px; z-index:5;
  width:44px; height:44px; border-radius:999px; border:1.5px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.96); color: var(--md-navy);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
body.page-id-32 .spark-hero-arrow:hover{
  background: var(--md-navy); border-color: var(--md-navy); color:#FFFFFF;
  transform: scale(1.06);
}
/* flex-shrink:0 is load-bearing, not decoration: confirmed via a live
   getBoundingClientRect test that this SVG (a flex item of the button,
   which has no width/height XML attribute -- only viewBox) was rendering
   at 0px actual width despite this same rule's own explicit width:20px
   winning the cascade (checked directly via CSS.getMatchedStylesForNode)
   -- Chromium's flex "automatic minimum size" for a replaced element with
   no intrinsic width collapses it to 0 under the default flex-shrink:1,
   even with plenty of room in a 44px button and no other content
   competing for space. The chevron was therefore invisible on every
   arrow button using this icon markup (confirmed this predates this
   round -- same root cause on both the hero and testimonial arrows).
   flex-shrink:0 stops the shrink and the explicit 20px renders correctly. */
body.page-id-32 .spark-hero-arrow svg{ width:20px; height:20px; stroke-width:2.5; flex-shrink:0; }
body.page-id-32 .spark-hero-arrow--prev{ left: clamp(10px,2.5vw,28px); }
body.page-id-32 .spark-hero-arrow--next{ right: clamp(10px,2.5vw,28px); }
/* Round 2 client feedback (Bug 3): client explicitly wants left/right arrows
   usable at every breakpoint including mobile, not dots alone — reverses the
   earlier "arrows crowd the small viewport" call above. Kept as a real
   button at a shrunk-but-still-touch-friendly 38px (above the ~36-40px
   minimum tap-target guidance) instead of the previous display:none, and
   pulled closer to the edge so it doesn't crowd the centered headline/form
   card at narrow widths. */
@media (max-width:639px){
  body.page-id-32 .spark-hero-arrow{
    width:38px !important; height:38px !important;
    min-width:38px !important; max-width:38px !important;
    min-height:38px !important; max-height:38px !important;
    padding:0 !important;
  }
  body.page-id-32 .spark-hero-arrow svg{ width:17px !important; height:17px !important; }
  body.page-id-32 .spark-hero-arrow--prev{ left: 6px !important; }
  body.page-id-32 .spark-hero-arrow--next{ right: 6px !important; }
}

/* ---------- Hero: spacing/typography polish on the existing base treatment ----------
   (the dark full-bleed overlay/card treatment above this block is left as-is —
   already reasonably close to the rest of the site's editorial hero language,
   this only tightens rhythm and fixes the one rem-bounded clamp found above) */
/* Applied to EVERY slide, not just .swiper-slide-active: scoping the sizing
   rule to only the active slide let each slide's own natural content height
   win independently, and slide 3 (headline + inline logo carousel + button,
   more content than slides 1-2) rendered visibly taller -- confirmed live,
   the whole hero's height jumped by ~280px switching from slide 1/2 to
   slide 3, shifting every section below it on every autoplay tick or dot
   click. A single shared min-height across all 3 slides keeps the hero (and
   everything below it) a stable height regardless of which slide is
   showing. */
body.page-id-32 .elementor-element-45373b1 .swiper-slide{
  min-height: clamp(480px, 74vh, 760px) !important;
  display:flex !important; align-items:stretch !important;
}
/* ---------- Hero: fix the grey/gradient gap above the photo ----------
   Client-reported and confirmed live via getBoundingClientRect/computed-
   style: a solid light-grey band (the slide's own background,
   rgb(248,248,248)) was visible between the header and the top of the
   hero photo, on some/all slides depending on viewport height. Root
   cause (confirmed, not guessed): each slide's photo-bearing container
   has its own authored "Min Height" (600px, an Elementor container
   setting from whoever built the slide) which is SHORTER than the
   shared min-height clamp above (added earlier to stop slide 3 from
   rendering taller than slides 1-2) at most viewport heights. With
   align-items:center (the previous value), the shorter photo container
   centered inside the taller slide box, exposing the slide's own plain
   background above AND below the photo. Switching the slide to
   align-items:stretch, plus forcing the single-child wrapper chain down
   to the photo container itself to fill 100% of that stretched height,
   makes the photo's own background-size:cover simply cover more area
   instead -- structurally impossible for the grey background to show
   through, regardless of how tall the shared min-height clamp computes
   at any given viewport height. Scoped to the hero's own direct-child
   chain only (.e-con.e-child), so it can't reach into unrelated nested
   widgets (e.g. slide 3's inline logo carousel, which keeps its own
   separate reset below). */
/* height:100% alone does NOT work here (tested and confirmed via Chrome
   DevTools Protocol matched-styles + a forced-inline-!important test):
   this rule genuinely wins the cascade, yet the rendered height never
   moves, because .swiper-slide's own height -- though it renders at a
   real pixel value -- is an intrinsically-stretched flex cross-size, not
   a CSS-definite height, so percentages against it don't resolve (a
   known CSS Flexbox spec edge case, not a specificity problem). Absolute
   positioning against the slide (already position:relative) sidesteps
   percentage resolution entirely -- inset:0 always fills the parent's
   real box regardless of how that box's own height was established. */
body.page-id-32 .elementor-element-45373b1 .swiper-slide > .e-con.e-child{
  position:absolute !important; inset:0 !important; height:auto !important;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide > .e-con.e-child > .e-con.e-child{
  flex:1 1 auto !important; height:100% !important; min-height:100% !important;
}
/* ---------- Hero photo: crop-safety at mobile widths (client-reported:
   "hero background images are getting cropped/cut off on mobile") ----------
   Confirmed real via the actual source files: both hero photos are wide
   editorial banners (2560x960 / 1440x540, ~2.67:1) with all real people
   concentrated in roughly the LEFT 40% of the frame and a plain
   decorative-pattern void filling the rest. Elementor's own default
   background-size for this widget is `cover` (verified live -- there is
   no `100% auto` rule actually in force despite that being the earlier
   intended treatment) -- on the tall/narrow mobile hero box (~390x592,
   0.66:1), `cover`'s crop window is mathematically too narrow to contain
   all 3 people at any background-position: even shifted hard to one
   edge, at most 1 of the 3 people stays in frame and even that person's
   head is often clipped (confirmed via a real mobile screenshot before
   this fix -- 2 of 3 people fully gone, the 3rd's head cut off). No
   background-position value fixes this, because the box is simply
   narrower (in the image's own scale) than the space the people occupy
   -- only a non-cropping size does. `100% auto` -- the treatment this
   hero was originally documented as using -- pins the image to its own
   true aspect ratio (full width, proportional height) so nobody can
   ever be cropped, matching this project's standing rule that any photo
   with real faces must never use cover on a mismatched box. The image
   then naturally sits as a banner near the top of the dark hero card;
   the navy fallback fill (matching the existing dark-overlay treatment)
   covers the remaining height below it. */
@media (max-width:767px){
  body.page-id-32 .elementor-element-45373b1 .swiper-slide > .e-con.e-child > .e-con.e-child{
    background-color: var(--md-navy) !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-widget-animated-headline{
  margin-bottom:6px;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-headline-text{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size: clamp(13px,1.8vw,15px) !important;
  letter-spacing:0.08em; text-transform:uppercase;
  color: rgba(255,255,255,0.85) !important;
}
/* Working Experience / Healthcare Clients counters
   Bug 2 (round 2 client feedback): stat numbers/labels were wrapping and
   spilling past the hero photo/card bounds on narrow mobile widths.
   Contributing cause found live: this font-size clamp used REM bounds,
   which this project has repeatedly confirmed is unsafe (this theme's own
   html root font-size drops to ~14.6px below 1024px, so a rem-bounded
   clamp silently renders smaller/larger than its authored px intent
   depending on viewport — see the standing project note). Switched to px
   bounds, plus an explicit safe max-width/padding on the counter widget
   itself and a tighter clamp on the counter title, so the whole stat block
   can never grow wide/tall enough to spill outside the hero band down to
   320px width. */
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-counter-number-wrapper{
  color:#FFFFFF !important;
  font-size: clamp(22px, 5.5vw, 34px) !important;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-widget-counter{
  max-width: 100%;
  padding: 0 6px;
  box-sizing: border-box;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-counter-title{
  color: rgba(255,255,255,0.82) !important;
  font-size: clamp(11px, 3vw, 14px) !important;
  line-height:1.3 !important;
}
@media (max-width:359px){
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-counter-number-wrapper{
    font-size: clamp(19px, 5.5vw, 24px) !important;
  }
}

/* Hero rotating headline ("Digital Agancy For Doctors" etc.) clips off the
   right edge of the viewport at 320-375px widths. Root cause found live:
   Elementor's own animated-headline.js sets an inline pixel `width` on
   .elementor-headline-dynamic-wrapper via canvas text measurement at its
   OWN default font-size -- that measurement doesn't get redone against our
   CSS clamp() override above, so the stale inline width (~310px) doesn't
   shrink to fit narrow viewports and the text runs past the screen edge
   instead of wrapping. Force it to size from content instead. */
@media (max-width:480px){
  body.page-id-32 .elementor-element-630bec9 .elementor-headline-dynamic-wrapper{
    width:auto !important; max-width:100% !important;
  }
  body.page-id-32 .elementor-element-630bec9 .elementor-headline{
    max-width:100% !important;
  }
  /* The wrapper above isn't actually what paints the text -- its child
     .elementor-headline-dynamic-text carries its OWN separate inline
     width (~310px, also JS-measured) plus white-space:nowrap, so it was
     still overflowing the now-narrower wrapper and running off the
     viewport edge regardless of the wrapper fix. */
  body.page-id-32 .elementor-element-630bec9 .elementor-headline-dynamic-text{
    white-space:normal !important; width:auto !important; max-width:100% !important;
  }
}

/* ---------- Hero: duplicate/leftover static headings (Bug 1, round 2) ----------
   Round 2 client feedback flagged garbled overlapping hero text at mobile
   widths (478/585px screenshots: "Free"/"Consultancy" overlapping
   "Healthcare For Internet Marketing / Healthcare For Social Media
   Agency" stacked on top of it). Investigated live via the carousel's own
   slide inventory (not just a static DOM check — confirmed by forcing a
   real slideNext() transition and reading each slide's actual settled
   position): this hero is a real 3-slide carousel, and each of the 3 real
   slides carries its OWN distinct real animated-headline widget —
   630bec9 ("Best..."), 84419e7 ("Free [rotating: Consultancy]"), and
   8776ed9 ("Our Clients...") — all three are genuine, distinct per-slide
   content and are kept.
   The actual bug: slide 2 (84419e7's slide) and slide 3 (8776ed9's slide)
   EACH also contain one extra, separate STATIC (non-animated) heading
   widget — f6830da and 0ec4077 respectively — both carrying the exact
   same leftover text ("Healthcare For Internet Marketing / Healthcare For
   Social Media Agency", a duplicate of content already inside slide 1's
   own rotating headline). These two render directly beneath that slide's
   real headline, confirmed via getBoundingClientRect() once each slide
   was the active/settled one — real, structural, always-on overlap, not
   an animation-timing illusion. Hiding only these two (not 84419e7, which
   is real per-slide content, not a duplicate) resolves the overlap while
   keeping every slide's real intended headline intact. */
body.page-id-32 .elementor-element-f6830da,
body.page-id-32 .elementor-element-0ec4077{
  display:none !important;
}
/* "Our Services" hero CTA — same solid-accent button treatment used for
   every primary CTA on this page, so hero/about/pricing/services buttons
   all read as one consistent system (the exact inconsistency the client
   caught on the Services page in an earlier round). */
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-button{
  background: var(--md-accent) !important; color:#FFFFFF !important;
  border-radius:10px !important; border:none !important;
  padding:14px 28px !important; font-weight:700 !important; box-shadow:none !important;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-button:hover{ background: var(--md-accent-ink) !important; }
/* Slide 3's small image-carousel (real client-logo strip inline in the
   hero) — contained tile treatment consistent with the sitewide client-logo
   rule above, just brought onto a translucent card so it reads on the dark
   photo background instead of the plain white tiles looking stranded. */
body.page-id-32 .elementor-element-0d903e1{ margin-top:14px; }
body.page-id-32 .elementor-element-0d903e1 .swiper-slide{
  background: rgba(255,255,255,0.92) !important;
}
/* The shared hero slide-height rule above (`.elementor-element-45373b1
   .swiper-slide`) is a descendant selector, so it also matches THIS nested
   image-carousel's own individual logo tiles -- they are, structurally,
   .swiper-slide elements too, several levels deeper inside slide 3's DOM.
   That forced every small logo tile to the hero's own ~480-760px slide
   min-height, which is what was actually behind slide 3 measuring ~565px
   taller than slides 1-2 (confirmed live: this widget's own height read
   back as 666px before this fix, for what should be a compact ~70px-tall
   row of logo tiles). Reset back to normal sizing for this nested carousel
   specifically. */
body.page-id-32 .elementor-element-0d903e1 .swiper-slide{
  min-height:0 !important; display:block !important; align-items:unset !important;
}
/* Mobile: this nested carousel shows 1 slide at a time (vs 3-up on desktop),
   which exposes two real bugs confirmed live at 478/585px — (1) the previous
   slide's edge peeks in as a stray white sliver on the left because the
   wrapper has no clipping of its own (only relies on the slide track math,
   which is fine on desktop's multi-slide view but not here), and (2) the
   active slide's card (image + padding from the sitewide client-logo-tile
   rule) renders taller than the hero photo has room for at this slide,
   spilling into the navy background below. Clip + cap for mobile only. */
@media (max-width:767px){
  body.page-id-32 .elementor-element-0d903e1 .elementor-image-carousel-wrapper{
    overflow:hidden !important;
  }
  body.page-id-32 .elementor-element-0d903e1 .elementor-widget-container{
    overflow:hidden !important;
    max-height:120px !important;
  }
  body.page-id-32 .elementor-element-0d903e1 .swiper-slide{
    padding:10px 18px !important;
  }
  body.page-id-32 .elementor-element-0d903e1 .swiper-slide img{
    max-height:60px !important; width:auto !important; object-fit:contain !important;
  }
  body.page-id-32 .elementor-element-8bac9e9{
    max-height:none !important;
  }
  /* The inactive neighbor slide's own box-shadow (from the sitewide
     client-logo-tile rule) paints past its own box edge as a stray white
     sliver even with the wrapper clipped to overflow:hidden -- box-shadow
     isn't blocked by an ancestor's clip in every compositing path here, so
     kill it directly on anything that isn't the active slide. */
  body.page-id-32 .elementor-element-0d903e1 .swiper-slide:not(.swiper-slide-active){
    box-shadow:none !important; border:none !important; visibility:hidden !important;
  }
}

/* ---------- Hero: booking-form card (reuses the shared CF7 field markup —
   .spark-form-row/.spark-form-field/.spark-form-label are already present
   in the form's own rendered HTML on every embed of shortcode ea3bba5,
   confirmed live, same as every other page's copy of this exact form) ---------- */
body.page-id-32 .elementor-element-b1489cd,
body.page-id-32 .elementor-element-58294bc,
body.page-id-32 .elementor-element-ba14703{
  background:#FFFFFF !important; border-radius:18px !important; box-shadow: var(--md-shadow-lg) !important;
  padding: clamp(20px,4vw,28px) clamp(18px,4vw,26px) clamp(22px,4vw,26px) !important;
}
/* Ancestor-qualified (.elementor-element-45373b1 ... .elementor-element-b1489cd),
   not just the card id alone: these 3 form-card headings sit INSIDE the
   hero's own active slide, so they also match the hero's blanket "every
   heading in the active slide is white, clamp(34-67px)" rule above (that
   rule is a generic h2.elementor-heading-title selector, not scoped to only
   the main headline) -- and that rule's selector chain carries one more
   class than a plain .elementor-element-XXXX + h2 selector, so it was
   winning the specificity fight and rendering "Book Appointment, How We Can
   Help You?" as invisible white-on-white text at up to 67px, which is what
   was actually behind the large blank gap above the form fields (confirmed
   live). Adding the same ancestor qualifier here ties the specificity, and
   source order (this block runs later in the file) settles the tie in this
   rule's favor -- same fix technique already used on the About Us page for
   an analogous specificity collision. */
body.page-id-32 .elementor-element-45373b1 .elementor-element-b1489cd h2.elementor-heading-title,
body.page-id-32 .elementor-element-45373b1 .elementor-element-58294bc h2.elementor-heading-title,
body.page-id-32 .elementor-element-45373b1 .elementor-element-ba14703 h2.elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important;
  font-size: clamp(19px,3.4vw,24px) !important;
  color: var(--md-navy) !important;
  text-shadow:none !important;
  margin:0 0 4px !important;
}
body.page-id-32 .spark-hero-form-card .spark-form-row,
body.page-id-32 .elementor-element-b1489cd .spark-form-row,
body.page-id-32 .elementor-element-58294bc .spark-form-row,
body.page-id-32 .elementor-element-ba14703 .spark-form-row{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
@media (min-width:520px){
  body.page-id-32 .elementor-element-b1489cd .spark-form-row,
  body.page-id-32 .elementor-element-58294bc .spark-form-row,
  body.page-id-32 .elementor-element-ba14703 .spark-form-row{ flex-direction:row; gap:14px; }
}
body.page-id-32 .elementor-element-b1489cd .spark-form-field,
body.page-id-32 .elementor-element-58294bc .spark-form-field,
body.page-id-32 .elementor-element-ba14703 .spark-form-field{ flex:1 1 0; min-width:0; display:block; }
body.page-id-32 .elementor-element-b1489cd .spark-form-label,
body.page-id-32 .elementor-element-58294bc .spark-form-label,
body.page-id-32 .elementor-element-ba14703 .spark-form-label{
  display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:600;
  font-size:0.78rem; color: var(--md-navy); margin-bottom:5px;
}
body.page-id-32 .elementor-element-b1489cd .wpcf7-form-control-wrap,
body.page-id-32 .elementor-element-58294bc .wpcf7-form-control-wrap,
body.page-id-32 .elementor-element-ba14703 .wpcf7-form-control-wrap{ display:block; width:100%; }
body.page-id-32 .elementor-element-b1489cd input[type=text], body.page-id-32 .elementor-element-b1489cd input[type=email],
body.page-id-32 .elementor-element-b1489cd input[type=tel], body.page-id-32 .elementor-element-b1489cd select, body.page-id-32 .elementor-element-b1489cd textarea,
body.page-id-32 .elementor-element-58294bc input[type=text], body.page-id-32 .elementor-element-58294bc input[type=email],
body.page-id-32 .elementor-element-58294bc input[type=tel], body.page-id-32 .elementor-element-58294bc select, body.page-id-32 .elementor-element-58294bc textarea,
body.page-id-32 .elementor-element-ba14703 input[type=text], body.page-id-32 .elementor-element-ba14703 input[type=email],
body.page-id-32 .elementor-element-ba14703 input[type=tel], body.page-id-32 .elementor-element-ba14703 select, body.page-id-32 .elementor-element-ba14703 textarea{
  width:100% !important; box-sizing:border-box !important;
  padding:12px 13px !important; border:1.5px solid var(--md-line) !important;
  border-radius:9px !important; font-family:'IBM Plex Sans', sans-serif !important;
  font-size:0.92rem !important; color: var(--md-ink) !important; background:#FFFFFF !important;
  min-height:44px;
}
body.page-id-32 .elementor-element-b1489cd textarea, body.page-id-32 .elementor-element-58294bc textarea, body.page-id-32 .elementor-element-ba14703 textarea{ resize:vertical; min-height:76px; }
body.page-id-32 .elementor-element-b1489cd input:focus, body.page-id-32 .elementor-element-b1489cd select:focus, body.page-id-32 .elementor-element-b1489cd textarea:focus,
body.page-id-32 .elementor-element-58294bc input:focus, body.page-id-32 .elementor-element-58294bc select:focus, body.page-id-32 .elementor-element-58294bc textarea:focus,
body.page-id-32 .elementor-element-ba14703 input:focus, body.page-id-32 .elementor-element-ba14703 select:focus, body.page-id-32 .elementor-element-ba14703 textarea:focus{
  outline:none !important; border-color: var(--md-accent) !important;
  box-shadow:0 0 0 3px rgba(47,95,214,0.15) !important;
}
body.page-id-32 [data-spark-other-row][hidden]{ display:none !important; }
body.page-id-32 .spark-form-row-acceptance{
  display:flex !important; align-items:flex-start; gap:8px;
  font-size:0.82rem; color: var(--md-ink-muted); margin:2px 0 14px;
}
body.page-id-32 .elementor-element-b1489cd input[type=submit], body.page-id-32 .elementor-element-58294bc input[type=submit], body.page-id-32 .elementor-element-ba14703 input[type=submit]{
  width:100%; height:46px; padding:0 22px !important; border:none !important;
  border-radius:10px !important; background: var(--md-accent) !important; color:#FFFFFF !important;
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:0.98rem !important; cursor:pointer; transition: background .15s ease;
}
body.page-id-32 .elementor-element-b1489cd input[type=submit]:hover, body.page-id-32 .elementor-element-58294bc input[type=submit]:hover, body.page-id-32 .elementor-element-ba14703 input[type=submit]:hover{ background: var(--md-accent-ink) !important; }

/* Round 3 client feedback: the "Book Appointment" form on mobile showed
   only its first few fields (Name/Email/Phone/City) then cut straight to
   the "OUR CLIENTS" section below -- Service Required/Business
   Type/Message/checkbox/submit button were completely gone. Root cause
   found live via computed-style + scrollHeight inspection: on mobile the
   photo and form stack vertically inside one slide (desktop has them
   side-by-side), so the slide's real content need jumps to ~1108-1174px
   (measured directly, slide 3 being tallest with its inline logo
   carousel) -- but the outer .swiper carousel element (Elementor's
   e-n-carousel, a DIFFERENT element from .swiper-slide) was still capped
   at the desktop-tuned `74vh` min-height (624px at a 844px-tall viewport)
   with its own overflow:hidden, silently slicing off everything past
   that point. min-height on .swiper-slide alone can't fix this -- the
   clip happens one level up, on .swiper itself. */
@media (max-width:767px){
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active{ padding-bottom: clamp(72px,14vw,96px) !important; }
  body.page-id-32 .elementor-element-45373b1 .swiper-slide{
    min-height: 1250px !important;
  }
  body.page-id-32 .elementor-element-45373b1 > .elementor-widget-container > .swiper{
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

/* ---------- Clients: "Our Clients" heading + logo showcase ----------
   Real DOM/data order has the logo carousel (5e51fe5) BEFORE the "Our
   Clients / Check our top clients & partners" heading (ad46c15) — backwards
   for a normal eyebrow-then-content reading flow, confirmed in the live
   rendered order (not just the JSON). JS below moves the heading section to
   sit before the logos. The logo carousel itself is an n-carousel/Swiper
   instance — same "keeps autoplaying/reordering slide nodes forever, wrong
   for a show-everything showcase" issue already solved on the About Us
   page — same fix reused directly: clone the real (non-duplicate) logo
   slides into a plain grid, hide the original widget. */
body.page-id-32 .elementor-element-ad46c15,
body.page-id-32 .elementor-element-5e51fe5{
  background: var(--md-neutral) !important;
  flex-direction:column !important;
}
body.page-id-32 .elementor-element-ad46c15{
  padding: clamp(56px,8vw,88px) clamp(20px,5vw,60px) clamp(16px,3vw,24px) !important;
  text-align:center;
}
body.page-id-32 .elementor-element-96f27b6 .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:13px !important; letter-spacing:0.1em !important; text-transform:uppercase !important;
  color: var(--md-accent-ink) !important; margin:0 0 10px !important;
}
body.page-id-32 .elementor-element-3762d0a .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size: clamp(26px,3.6vw,36px) !important; line-height:1.2 !important; margin:0 !important;
}
body.page-id-32 .elementor-element-5e51fe5{
  padding: clamp(8px,2vw,16px) clamp(20px,5vw,60px) clamp(56px,8vw,72px) !important;
}
body.page-id-32 .elementor-element-b98c108{ display:none !important; }
body.page-id-32 .spark-logo-grid{
  display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap:16px !important; max-width:1100px; margin:0 auto;
}
body.page-id-32 .spark-logo-tile{
  background:#FFFFFF; border:1px solid var(--md-line); border-radius: var(--md-radius);
  box-shadow: var(--md-shadow); aspect-ratio: 800/280;
  display:flex; align-items:center; justify-content:center; padding: 16px 20px;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.page-id-32 .spark-logo-tile:hover{ transform: translateY(-3px); box-shadow: var(--md-shadow-lg); }
body.page-id-32 .spark-logo-tile img{ width:100% !important; height:100% !important; object-fit:contain !important; display:block; margin:0 !important; }
@media (min-width:640px){ body.page-id-32 .spark-logo-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap:20px !important; } }
@media (min-width:1024px){
  body.page-id-32 .spark-logo-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap:24px !important; }
  body.page-id-32 .spark-logo-tile{ padding: 20px 26px; }
}

/* ---------- Testimonials ----------
   9 real named-doctor reviews. Round 1 hid the ElementsKit widget's own
   Swiper (arrows/dots wired to nothing, loop:false) behind a static
   always-visible grid so every review was at least reachable. Round 2:
   client explicitly rejected the static grid -- they want a real slider
   back (manual arrows AND autoplay, together), so the grid approach is
   reverted here. Investigated the widget's own engine first, as asked,
   rather than assuming a custom rebuild was needed: its real Swiper
   instance already runs autoplay (confirmed live) and already has the
   navigation + pagination MODULES active, just never wired to any actual
   button -- so this re-enables the widget's own real slider (JS below:
   builds real prev/next buttons, points them at the live instance's own
   slidePrev()/slideNext(), keeps autoplay running and resuming after a
   quiet period) instead of building a parallel carousel from scratch.
   loop:false + slidesPerGroup:1 at slidesPerView:3 across 9 real slides
   still reaches every review (7 valid stop positions, 0..6, together
   covering all 9). Wiz91->Marketing Doctor text correction (JS) is
   untouched -- still applied to this same real widget. */
body.page-id-32 .elementor-element-b5c1311{
  background:#FFFFFF !important; flex-direction:column !important;
  padding: clamp(56px,8vw,88px) clamp(20px,5vw,60px) !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled{
  width:100% !important; max-width:1240px; margin:0 auto !important; position:relative;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .ekit-testimonial-layout1{
  padding: 4px 6px !important;
}
/* Each real review card -- ElementsKit's own markup/classes, just given
   this design system's card treatment (border/shadow/radius) so it reads
   as one family with every other card on the site, same as the client
   logo tiles and stats cards above. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-single-testimonial-slider{
  background:#FFFFFF !important; border:1px solid var(--md-line) !important;
  border-radius:16px !important; box-shadow: var(--md-shadow) !important;
  padding: 26px 24px 24px !important; height:auto !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-author-name{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  color: var(--md-navy) !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-author-des{
  font-family:'IBM Plex Sans', sans-serif !important; color: var(--md-ink-muted) !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-content p{
  font-family:'IBM Plex Sans', sans-serif !important; color: var(--md-ink) !important; line-height:1.65 !important;
}
/* Real prev/next controls for the widget's own live Swiper (built in JS,
   same visible-on-any-background treatment already proven on the
   homepage hero arrows -- solid near-opaque card + real shadow, not a
   low-contrast tint, plus a disabled state at either end since
   loop:false means the ends are real boundaries, not a wrap-around). */
/* Below 1024px (1-2 cards visible) the nav stays a simple centered row
   under the cards -- the reference's "arrows at the row's outer edges" only
   reads correctly once there's an actual 3-up row with real edges to sit
   at. At 1024px+ it switches to absolutely overlaying the widget
   (position:relative set in JS) so the two buttons can sit right at the
   row's own left/right edge, vertically centered on it. */
body.page-id-32 .spark-testi-nav{
  display:flex; justify-content:center; gap:14px;
  margin: clamp(20px,3vw,28px) auto 0; max-width:1240px;
}
@media (min-width:1024px){
  body.page-id-32 .spark-testi-nav{
    position:absolute; inset:0; margin:0; max-width:none;
    display:block; pointer-events:none; z-index:5;
  }
  body.page-id-32 .spark-testi-nav .spark-testi-arrow{
    position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto;
  }
  body.page-id-32 .spark-testi-nav .spark-testi-arrow--prev{ left:-22px; }
  body.page-id-32 .spark-testi-nav .spark-testi-arrow--next{ right:-22px; }
}
body.page-id-32 .spark-testi-arrow{
  width:44px; height:44px; border-radius:999px; border:1.5px solid var(--md-line);
  background:#FFFFFF; color: var(--md-navy); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow: var(--md-shadow); transition: all .2s ease;
}
body.page-id-32 .spark-testi-arrow:hover:not(:disabled){ background: var(--md-navy); border-color: var(--md-navy); color:#FFFFFF; }
body.page-id-32 .spark-testi-arrow:disabled{ opacity:0.35; cursor:not-allowed; }
/* flex-shrink:0 required -- see the identical fix + explanation on
   .spark-hero-arrow svg above, same root cause, same icon markup. */
body.page-id-32 .spark-testi-arrow svg{ width:20px; height:20px; stroke-width:2.5; flex-shrink:0; }

/* ---------- About ---------- */
body.page-id-32 .elementor-element-13e741f{
  background: var(--md-neutral) !important; flex-direction:column !important;
  padding: clamp(56px,8vw,96px) clamp(20px,5vw,60px) !important;
  gap: clamp(32px,5vw,56px) !important;
}
body.page-id-32 .elementor-element-4921dc1{ width:100% !important; max-width:100% !important; }
body.page-id-32 .elementor-element-3b66d16 p{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:13px !important; letter-spacing:0.1em !important; text-transform:uppercase !important;
  color: var(--md-accent-ink) !important; margin:0 0 10px !important;
}
body.page-id-32 .elementor-element-c3b76bc .elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important;
  font-size: clamp(28px,4vw,42px) !important; line-height:1.16 !important; margin:0 0 18px !important;
}
body.page-id-32 .elementor-element-44c6725 p{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-size: clamp(16px,2vw,17px) !important; line-height:1.75 !important;
  color: var(--md-ink-muted) !important; max-width:64ch; margin:0 0 22px !important;
}
body.page-id-32 .elementor-element-5d33d04{ display:flex; gap: clamp(28px,5vw,56px); margin-bottom:26px; }
body.page-id-32 .elementor-element-5d33d04 .elementor-counter-number-wrapper{
  font-size: clamp(2rem, 3vw, 2.5rem) !important; color: var(--md-accent) !important;
}
body.page-id-32 .elementor-element-a039b70 .elementor-button{
  background: var(--md-accent) !important; color:#FFFFFF !important;
  border-radius:10px !important; padding:14px 28px !important; font-weight:700 !important; box-shadow:none !important;
}
body.page-id-32 .elementor-element-a039b70 .elementor-button:hover{ background: var(--md-accent-ink) !important; }
body.page-id-32 .elementor-element-af1dbf0{ width:100% !important; max-width:560px !important; margin:0 auto !important; }
@media (min-width:1024px){
  /* Real bug the client caught on real screenshots at 1920px: the text
     column's flex-grow:1 (the "1" in "flex:1 1 54%") claims the leftover
     container width, but its own max-width:640px !important caps how much
     of that it can actually use -- so on any viewport wider than roughly
     640px(text) + 40%(form) + gaps, the space the flex algorithm allocated
     to the text column goes unused and unclaimed by anything else,
     rendering as a large dead gap after the form card instead of the form
     sitting flush against the section's right edge. justify-content on the
     row (not flex-grow on a capped child) is what actually needs to own
     distributing genuinely leftover space -- confirmed live at 1920px,
     the form now sits flush right with the gap absorbed between the two
     columns instead of stranded past the form. */
  body.page-id-32 .elementor-element-13e741f{ flex-direction:row !important; align-items:center !important; justify-content:space-between !important; }
  body.page-id-32 .elementor-element-4921dc1{ flex:0 1 54% !important; max-width:640px !important; }
  body.page-id-32 .elementor-element-af1dbf0{ flex:0 0 40% !important; margin:0 0 0 auto !important; }
}
/* Reuses the shared CF7 card chrome pattern (form markup already present) */
body.page-id-32 .elementor-element-af1dbf0{
  background:#FFFFFF !important; border-radius:18px !important; box-shadow: var(--md-shadow-lg) !important;
  padding: clamp(22px,4vw,28px) clamp(20px,4vw,26px) clamp(24px,4vw,26px) !important;
}
body.page-id-32 .elementor-element-6ce605f .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size: clamp(19px,3.4vw,24px) !important; color: var(--md-navy) !important; text-shadow:none !important; margin:0 0 4px !important;
}
body.page-id-32 .elementor-element-af1dbf0 .spark-form-row{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
@media (min-width:520px){ body.page-id-32 .elementor-element-af1dbf0 .spark-form-row{ flex-direction:row; gap:14px; } }
body.page-id-32 .elementor-element-af1dbf0 .spark-form-field{ flex:1 1 0; min-width:0; display:block; }
body.page-id-32 .elementor-element-af1dbf0 .spark-form-label{
  display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:0.78rem; color: var(--md-navy); margin-bottom:5px;
}
body.page-id-32 .elementor-element-af1dbf0 .wpcf7-form-control-wrap{ display:block; width:100%; }
body.page-id-32 .elementor-element-af1dbf0 input[type=text], body.page-id-32 .elementor-element-af1dbf0 input[type=email],
body.page-id-32 .elementor-element-af1dbf0 input[type=tel], body.page-id-32 .elementor-element-af1dbf0 select, body.page-id-32 .elementor-element-af1dbf0 textarea{
  width:100% !important; box-sizing:border-box !important; padding:12px 13px !important; border:1.5px solid var(--md-line) !important;
  border-radius:9px !important; font-family:'IBM Plex Sans', sans-serif !important; font-size:0.92rem !important;
  color: var(--md-ink) !important; background:#FFFFFF !important; min-height:44px;
}
body.page-id-32 .elementor-element-af1dbf0 textarea{ resize:vertical; min-height:76px; }
body.page-id-32 .elementor-element-af1dbf0 input:focus, body.page-id-32 .elementor-element-af1dbf0 select:focus, body.page-id-32 .elementor-element-af1dbf0 textarea:focus{
  outline:none !important; border-color: var(--md-accent) !important; box-shadow:0 0 0 3px rgba(47,95,214,0.15) !important;
}
body.page-id-32 .elementor-element-af1dbf0 input[type=submit]{
  width:100%; height:46px; padding:0 22px !important; border:none !important; border-radius:10px !important;
  background: var(--md-accent) !important; color:#FFFFFF !important; font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important; font-size:0.98rem !important; cursor:pointer; transition: background .15s ease;
}
body.page-id-32 .elementor-element-af1dbf0 input[type=submit]:hover{ background: var(--md-accent-ink) !important; }

/* ---------- Introduction + Team ----------
   Left: Introduction (real Santosh Solanki bio, same text already verified
   on the About Us page) + 2 of the 6 real team cards. Right: "Our Team"
   heading + the other 4 cards. Same real 6-person roster as About Us
   (photos/names/designations already confirmed there) — team-card visual
   treatment reused directly, composition adapted to this page's own
   grouping (intro text paired with 2 cards, not a separate section). */
body.page-id-32 .elementor-element-6cdb054{
  background:#FFFFFF !important; flex-direction:column !important;
  padding: clamp(56px,8vw,96px) clamp(20px,5vw,60px) !important;
  gap: clamp(40px,6vw,64px) !important;
}
body.page-id-32 .elementor-element-c993676,
body.page-id-32 .elementor-element-834b643{ width:100% !important; max-width:100% !important; }
body.page-id-32 .elementor-element-b442b16 .elementor-heading-title,
body.page-id-32 .elementor-element-a6132c1 .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size: clamp(13px,1.8vw,14px) !important; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--md-accent-ink) !important; margin:0 0 16px !important;
}
body.page-id-32 .elementor-element-003cbf0 p{
  font-family:'IBM Plex Sans', sans-serif !important; font-size: clamp(15px,1.9vw,16px) !important;
  line-height:1.75 !important; color: var(--md-ink-muted) !important; margin:0 0 16px !important;
}
body.page-id-32 .elementor-element-ff47f5b .elementor-icon-list-icon{ color: var(--md-accent) !important; }
body.page-id-32 .elementor-element-ff47f5b .elementor-icon-list-icon svg{ fill: var(--md-accent) !important; }
body.page-id-32 .elementor-element-ff47f5b .elementor-icon-list-text{
  font-family:'IBM Plex Sans', sans-serif !important; color: var(--md-ink) !important; font-weight:600 !important;
}
body.page-id-32 .elementor-element-05ac5d8{ margin: 18px 0 20px !important; }
body.page-id-32 .elementor-element-05ac5d8 .elementor-button{
  background: var(--md-accent) !important; color:#FFFFFF !important; border-radius:10px !important;
  padding:13px 26px !important; font-weight:700 !important; box-shadow:none !important;
}
body.page-id-32 .elementor-element-05ac5d8 .elementor-button:hover{ background: var(--md-accent-ink) !important; }
/* Bug 6 (round 2): this instance's own uniform-navy treatment is superseded
   by the new sitewide real-brand-color fix below (.elementor-icon.elementor-
   social-icon, global block near the end of this file) — removed here so it
   doesn't fight that rule's specificity for this one instance. */
body.page-id-32 .elementor-element-6dcf960{
  display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap:20px !important; margin-top: 28px !important; width:100%;
}
body.page-id-32 .elementor-element-74d6d6d,
body.page-id-32 .elementor-element-0b50250{
  display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap:20px !important; width:100%;
}
body.page-id-32 .elementor-element-0b50250{ margin-top:20px !important; }
body.page-id-32 .spark-team-card{
  display:flex !important; flex-direction:column !important; width:100% !important;
  background:#FFFFFF !important; border:1px solid var(--md-line) !important; border-radius:16px !important;
  box-shadow: var(--md-shadow) !important; overflow:hidden !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.page-id-32 .spark-team-card:hover{ transform: translateY(-4px) !important; box-shadow: var(--md-shadow-lg) !important; }
body.page-id-32 .spark-team-card .elementor-widget-image{ width:100% !important; margin:0 !important; line-height:0; }
body.page-id-32 .spark-team-card .elementor-widget-image img{
  width:100% !important; height:auto !important; display:block !important; margin:0 !important; border-radius:0 !important;
}
body.page-id-32 .spark-team-card .elementor-widget-heading{ padding: 14px 14px 2px !important; margin:0 !important; }
body.page-id-32 .spark-team-card h2.elementor-heading-title, body.page-id-32 .spark-team-card h3.elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size: clamp(15px,1.8vw,17px) !important; line-height:1.3 !important;
  color: var(--md-navy) !important; text-shadow:none !important; text-align:left !important; margin:0 !important;
}
body.page-id-32 .spark-team-card h2.elementor-heading-title a, body.page-id-32 .spark-team-card h3.elementor-heading-title a{ color:inherit; text-decoration:none; }
body.page-id-32 .spark-team-card h2.elementor-heading-title a:hover, body.page-id-32 .spark-team-card h3.elementor-heading-title a:hover{ text-decoration:underline; }
body.page-id-32 .spark-team-card .elementor-widget-text-editor{ padding: 4px 14px 16px !important; margin:0 !important; }
body.page-id-32 .spark-team-card .elementor-widget-text-editor p{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:500 !important;
  font-size: clamp(12px,1.6vw,13px) !important; line-height:1.5 !important;
  color: var(--md-accent-ink) !important; margin:0 !important; text-transform:uppercase; letter-spacing:0.02em;
}
@media (min-width:1024px){
  body.page-id-32 .elementor-element-6cdb054{ flex-direction:row !important; align-items:flex-start !important; }
  body.page-id-32 .elementor-element-c993676{ flex:1 1 46% !important; max-width:520px !important; }
  body.page-id-32 .elementor-element-834b643{ flex:1 1 50% !important; }
}

/* ---------- Pricing ----------
   Same real 3 plans as Consultancy (Silver/Gold/Platinum). Elementor's own
   _elementor_data has a background_image on this section pointing at a
   live-production-only URL (ai-price-section-back-new-2.jpg) that does not
   exist in this install's media library — same already-confirmed issue as
   the Consultancy page rebuild, fixed the same way: reuse the identical
   real local photo Consultancy substituted, for visual consistency between
   the two pages rather than introducing a third look. Card treatment reuses
   Consultancy's proven structural selector (.e-con-boxed > .e-con-inner >
   .e-con matches all 3 plan cards identically, away from the original
   inconsistent per-card styling — Silver was rendering with a stray
   uncovered gradient background and Gold/Platinum's WhatsApp CTAs were
   inconsistently styled, confirmed live). */
body.page-id-32 .elementor-element-8732e90{
  background:
    linear-gradient(165deg, rgba(14,31,61,0.90) 0%, rgba(21,42,82,0.80) 45%, rgba(14,31,61,0.92) 100%),
    url('/wp-content/uploads/2025/05/DSC09111-scaled-1-1536x1236.jpg') center 18% / cover no-repeat !important;
  padding: clamp(56px,8vw,96px) clamp(20px,5vw,40px) clamp(64px,9vw,104px) !important;
  flex-direction:column !important;
}
body.page-id-32 .elementor-element-578592a .elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important;
  font-size: clamp(30px,5vw,44px) !important; line-height:1.15 !important;
  color:#FFFFFF !important; text-shadow: 0 2px 18px rgba(0,0,0,0.45) !important;
  text-align:center; margin:0 0 12px !important;
}
body.page-id-32 .elementor-element-3410960{ max-width:640px; margin:0 auto 40px; text-align:center; }
body.page-id-32 .elementor-element-3410960 p{
  font-family:'IBM Plex Sans', sans-serif !important; font-size: clamp(1rem,2vw,1.1rem) !important;
  color: rgba(255,255,255,0.86) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.35); line-height:1.6; margin:0;
}
body.page-id-32 .elementor-element-c78d67d{ max-width:1180px !important; margin:0 auto !important; }
body.page-id-32 .elementor-element-e46c114 .swiper-wrapper{ padding: 14px 6px 30px !important; }
body.page-id-32 .elementor-element-e46c114 .swiper-pagination{ margin-top:20px !important; position:static !important; }
body.page-id-32 .elementor-element-e46c114 .swiper-pagination-bullet{
  background: rgba(255,255,255,0.45) !important; opacity:1 !important;
  width:8px !important; height:8px !important; transition: width .2s ease, background .2s ease;
}
body.page-id-32 .elementor-element-e46c114 .swiper-pagination-bullet-active{
  background:#FFFFFF !important; width:22px !important; border-radius:4px !important;
}
body.page-id-32 .elementor-element-e46c114 .e-con-boxed{ width:100% !important; max-width:400px !important; height:100% !important; margin:0 auto !important; }
@media (max-width:639px){ body.page-id-32 .elementor-element-e46c114 .e-con-boxed{ max-width:100% !important; } }
body.page-id-32 .elementor-element-e46c114 .e-con-boxed > .e-con-inner{ height:100%; display:flex !important; }
body.page-id-32 .elementor-element-e46c114 .e-con-boxed > .e-con-inner > .e-con{
  background:#FFFFFF !important; border:1px solid var(--md-line) !important; border-radius:16px !important;
  box-shadow: var(--md-shadow) !important; display:flex !important; flex-direction:column !important;
  justify-content:space-between !important; width:100%; min-width:0;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.page-id-32 .elementor-element-e46c114 .e-con-boxed > .e-con-inner > .e-con:hover{ transform: translateY(-4px); box-shadow: var(--md-shadow-lg) !important; }
/* Gold Pack (middle tier) — the one defensible visual emphasis, elevation
   only, no invented "Most Popular" label (same restrained rule already
   applied on Consultancy's identical middle tier). */
@media (min-width:768px){
  body.page-id-32 .elementor-element-b23cc37{
    transform: scale(1.045) !important; box-shadow: var(--md-shadow-lg) !important;
    border-color: var(--md-accent) !important; position:relative; z-index:2;
  }
  body.page-id-32 .elementor-element-b23cc37:hover{ transform: scale(1.045) translateY(-4px) !important; }
}
body.page-id-32 .elementor-element-e46c114 .e-con-boxed > .e-con-inner > .e-con > .e-con:first-child{ padding: 30px 26px 18px !important; min-height:auto !important; }
body.page-id-32 .elementor-element-e46c114 .e-con-boxed > .e-con-inner > .e-con > .e-con:first-child .elementor-widget-heading:first-child h2.elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important; font-size:0.85rem !important;
  text-transform:uppercase; letter-spacing:0.07em; color: var(--md-ink-muted) !important; text-shadow:none !important; margin:0 0 6px !important;
}
body.page-id-32 .elementor-element-e46c114 .e-con-boxed > .e-con-inner > .e-con > .e-con:first-child .elementor-widget-heading:first-child + .elementor-widget-heading h2.elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important; font-size: clamp(1.7rem, 3.4vw, 2.1rem) !important;
  color: var(--md-navy) !important; text-shadow:none !important; margin:0 !important;
}
body.page-id-32 .elementor-element-e46c114 .elementor-divider-separator{ border-color: var(--md-line) !important; }
body.page-id-32 .elementor-element-e46c114 .elementor-divider{ padding-block:2px 12px !important; }
body.page-id-32 .elementor-element-e46c114 .elementor-icon-list-item{ align-items:flex-start !important; }
body.page-id-32 .elementor-element-e46c114 .elementor-icon-list-icon{ margin-top:3px; }
body.page-id-32 .elementor-element-e46c114 .elementor-icon-list-icon svg{ fill: var(--md-accent) !important; }
body.page-id-32 .elementor-element-e46c114 .elementor-icon-list-text{
  color: var(--md-ink) !important; text-shadow:none !important; font-family:'IBM Plex Sans', sans-serif !important;
  font-size:0.92rem !important; line-height:1.5 !important;
}
body.page-id-32 .elementor-element-e46c114 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){ padding-block-end:9px !important; }
body.page-id-32 .elementor-element-e46c114 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){ margin-block-start:9px !important; }
body.page-id-32 .elementor-element-e46c114 .e-con-boxed > .e-con-inner > .e-con > .e-con:last-child{ padding: 4px 22px 22px !important; }
/* "Get Now"->WhatsApp CTA — text swap + click-to-WhatsApp already handled
   by the site-wide JS (matches on heading text, not page-scoped); this is
   only the visual layer, consistent WhatsApp green across all 3 plans
   (Silver's own "Chat on WhatsApp" button was rendering with no visible
   fill at all, just bare drop-shadowed text — confirmed live). */
body.page-id-32 .elementor-element-0ce5ecd, body.page-id-32 .elementor-element-41e6395, body.page-id-32 .elementor-element-ec53759{ margin-top:4px; }
body.page-id-32 .elementor-element-0ce5ecd .elementor-widget-container,
body.page-id-32 .elementor-element-41e6395 .elementor-widget-container,
body.page-id-32 .elementor-element-ec53759 .elementor-widget-container{
  background: var(--md-whatsapp) !important; border-radius:10px !important; padding:13px 18px !important;
  transition: background .15s ease, transform .15s ease;
}
body.page-id-32 .elementor-element-0ce5ecd:hover .elementor-widget-container,
body.page-id-32 .elementor-element-41e6395:hover .elementor-widget-container,
body.page-id-32 .elementor-element-ec53759:hover .elementor-widget-container{ background:#1EBE59 !important; transform: translateY(-1px); }
body.page-id-32 .elementor-element-0ce5ecd .elementor-heading-title,
body.page-id-32 .elementor-element-41e6395 .elementor-heading-title,
body.page-id-32 .elementor-element-ec53759 .elementor-heading-title{
  color:#FFFFFF !important; text-shadow:none !important; font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:700 !important; font-size:0.95rem !important;
}
/* "More Plans" — real, already-working /consultancy/ link (verified live,
   unlike the Consultancy page's own copy of this button, which is a dead
   self-link) — left as a ghost/secondary action, not restyled as primary. */
body.page-id-32 .elementor-element-453ac20{ margin-top: clamp(28px,4vw,40px) !important; text-align:center; }
body.page-id-32 .elementor-element-453ac20 .elementor-button{
  background: rgba(255,255,255,0.08) !important; border:1.5px solid rgba(255,255,255,0.5) !important; color:#FFFFFF !important;
}
body.page-id-32 .elementor-element-453ac20 .elementor-button:hover{ background: rgba(255,255,255,0.18) !important; }

/* ---------- Services intro (Lorem Ipsum removed via JS) ---------- */
body.page-id-32 .elementor-element-3cb17ed{
  background:#FFFFFF !important; flex-direction:column !important;
  padding: clamp(56px,8vw,88px) clamp(20px,5vw,60px) clamp(24px,4vw,32px) !important;
}
body.page-id-32 .elementor-element-9cc87bc{ width:100% !important; max-width:680px !important; margin:0 auto !important; text-align:center !important; }
body.page-id-32 .elementor-element-13176f7 p{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important; font-size:13px !important;
  letter-spacing:0.1em !important; text-transform:uppercase !important; color: var(--md-accent-ink) !important; margin:0 0 10px !important;
}
body.page-id-32 .elementor-element-afac805 .elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size: clamp(28px,3.6vw,38px) !important; line-height:1.2 !important; margin:0 !important;
}
body.page-id-32 .elementor-element-dad6121{ width:100% !important; max-width:680px !important; margin: 20px auto 0 !important; text-align:center !important; }
body.page-id-32 .elementor-element-a1c1e35:empty{ display:none !important; } /* JS safety net, see comment above */
body.page-id-32 .elementor-element-e5c68ae .elementor-button{
  background: var(--md-accent) !important; color:#FFFFFF !important; border-radius:10px !important;
  padding:13px 26px !important; font-weight:700 !important; box-shadow:none !important;
}
body.page-id-32 .elementor-element-e5c68ae .elementor-button:hover{ background: var(--md-accent-ink) !important; }

/* ---------- Services grid ----------
   Same real 4 cards / same known duplicate-content bug already solved on
   the Services page (Google My Business, Social Media Marketing x2 —
   confirmed byte-identical content between the two SMM cards again here,
   same as that page's finding) — same asymmetric featured (Search Engine
   Optimization) + support-list (the other 3) composition reused directly,
   same clone-real-slides-into-a-plain-grid fix for the n-carousel's
   autoplay/loop engine being the wrong fit for an all-4-visible layout. */
body.page-id-32 .elementor-element-3369532{
  background: var(--md-neutral) !important;
  padding: clamp(24px,4vw,32px) clamp(20px,5vw,60px) clamp(56px,8vw,88px) !important;
}
body.page-id-32 .elementor-element-2c2a5c5{ max-width:1200px !important; margin:0 auto !important; width:100% !important; }
body.page-id-32 .elementor-element-c836ed1{ display:none !important; }
body.page-id-32 .spark-services-grid{
  display:flex !important; flex-direction:column !important; gap:16px !important;
  counter-reset: svc-count; max-width:1200px; margin:0 auto;
}
body.page-id-32 .spark-services-grid .swiper-slide{
  width:auto !important; height:auto !important; margin:0 !important; max-width:none !important; max-height:none !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  position:static !important; transform:none !important; opacity:1 !important; display:block !important;
}
body.page-id-32 .spark-services-grid .e-con-boxed{ max-width:100% !important; width:100% !important; height:100% !important; margin:0 !important; }
body.page-id-32 .spark-services-grid .e-con-boxed > .e-con-inner{ height:100%; display:flex !important; }
body.page-id-32 .spark-card--support .elementor-widget-image img,
body.page-id-32 .spark-card--featured .elementor-widget-image img{
  width:100% !important; height:auto !important; display:block !important; margin:0 !important; object-fit:contain !important;
}
body.page-id-32 .spark-card--featured, body.page-id-32 .spark-card--support{
  counter-increment: svc-count; background:#FFFFFF !important; overflow:hidden !important; position:relative !important; min-height:0 !important;
}
body.page-id-32 .spark-card--featured{
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important;
  border-radius:20px !important; box-shadow: var(--md-shadow-lg) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.page-id-32 .spark-card--featured:hover{ transform: translateY(-3px) !important; }
body.page-id-32 .spark-card--featured::before{
  content: "0" counter(svc-count); position:absolute !important; top:18px !important; left:18px !important;
  right:auto !important; bottom:auto !important; width:auto !important; height:auto !important; z-index:3;
  font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.04em; color:#FFFFFF;
  background: rgba(14,31,61,0.82) !important; border-radius:999px !important; padding:6px 13px; display:inline-block !important; line-height:1.1 !important;
}
body.page-id-32 .spark-card--featured .elementor-widget-image{ margin:0 !important; width:100% !important; }
body.page-id-32 .spark-card--featured h2.elementor-heading-title, body.page-id-32 .spark-card--featured h3.elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important; font-size: clamp(24px, 2.6vw, 30px) !important;
  line-height:1.22 !important; color: var(--md-navy) !important; text-shadow:none !important; text-align:left !important;
  margin: clamp(20px,3vw,28px) clamp(24px,3vw,32px) 10px !important; padding:0 !important;
}
body.page-id-32 .spark-card--featured .elementor-widget-text-editor p{
  font-family:'IBM Plex Sans', sans-serif !important; font-size: clamp(15px, 2.6vw, 17px) !important; line-height:1.6 !important;
  color: var(--md-ink-muted) !important; margin:0 clamp(24px,3vw,32px) 20px !important; padding:0 !important;
}
@media (min-width:1024px){
  body.page-id-32 .spark-card--featured h2.elementor-heading-title, body.page-id-32 .spark-card--featured h3.elementor-heading-title{ font-size: clamp(32px, 2.4vw, 42px) !important; }
  body.page-id-32 .spark-card--featured .elementor-widget-text-editor p{ font-size: clamp(16px, 0.9vw, 18px) !important; }
}
body.page-id-32 .spark-card--featured .elementor-widget-button{ margin-top:auto !important; padding: 4px clamp(24px,3vw,32px) clamp(24px,3vw,32px) !important; }
body.page-id-32 .spark-card--featured .elementor-button{
  display:inline-flex !important; align-items:center !important; gap:8px !important; background: var(--md-accent) !important;
  color:#FFFFFF !important; border:none !important; border-radius:10px !important; padding:13px 24px !important;
  font-weight:700 !important; font-size:15px !important; box-shadow:none !important; transition: background .15s ease;
}
body.page-id-32 .spark-card--featured .elementor-button:hover{ background: var(--md-accent-ink) !important; transform:none !important; }
body.page-id-32 .spark-card--featured .elementor-button .elementor-button-text::after{ content:'\2192'; margin-left:2px; display:inline-block; }
body.page-id-32 .spark-support-stack .swiper-slide, body.page-id-32 .spark-support-stack .e-con-boxed, body.page-id-32 .spark-support-stack .e-con-inner{ margin:0 !important; padding:0 !important; }
body.page-id-32 .spark-card--support{
  display:flex !important; flex-direction:column !important; align-items:stretch !important; margin:0 !important;
  border:1px solid var(--md-line) !important; border-radius:12px !important; box-shadow:none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.page-id-32 .spark-support-stack > .swiper-slide{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; }
body.page-id-32 .spark-card--support:hover{ border-color: var(--md-accent) !important; box-shadow: var(--md-shadow) !important; }
body.page-id-32 .spark-card--support .elementor-widget-image{ width:100% !important; margin:0 !important; }
body.page-id-32 .spark-card-body{ flex:1 1 auto !important; min-width:0 !important; display:flex !important; flex-direction:column !important; padding: clamp(16px,3vw,24px) !important; }
body.page-id-32 .spark-card-body::before{
  content: "0" counter(svc-count); display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:700;
  font-size: clamp(12px, 1.6vw, 14px); letter-spacing:0.06em; color: var(--md-accent-ink); margin-bottom:4px;
}
body.page-id-32 .spark-card-body h2.elementor-heading-title, body.page-id-32 .spark-card-body h3.elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important; font-size: clamp(18px, 4vw, 22px) !important;
  line-height:1.3 !important; color: var(--md-navy) !important; text-shadow:none !important; text-align:left !important; margin:0 0 4px !important;
}
body.page-id-32 .spark-card-body .elementor-widget-text-editor p{
  font-family:'IBM Plex Sans', sans-serif !important; font-size: clamp(14.5px, 2.8vw, 16px) !important; line-height:1.5 !important;
  color: var(--md-ink-muted) !important; margin:0 0 8px !important; padding:0 !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.page-id-32 .spark-card-body .elementor-widget-button{ margin-top:auto !important; padding:0 !important; }
body.page-id-32 .spark-card-body .elementor-button{
  display:inline-flex !important; align-items:center !important; gap:6px !important; background: var(--md-accent) !important;
  color:#FFFFFF !important; border:none !important; border-radius:9px !important; padding:11px 20px !important;
  font-weight:700 !important; font-size: clamp(14px, 1.8vw, 15px) !important; box-shadow:none !important; transition: background .15s ease;
}
body.page-id-32 .spark-card-body .elementor-button:hover{ background: var(--md-accent-ink) !important; transform:none !important; box-shadow:none !important; }
body.page-id-32 .spark-card-body .elementor-button .elementor-button-text::after{ content:'\2192'; margin-left:2px; display:inline-block; }
body.page-id-32 .spark-support-stack{ display:flex !important; flex-direction:column !important; gap:16px !important; }
@media (min-width:1120px){
  body.page-id-32 .spark-services-grid{ display:grid !important; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) !important; align-items:start !important; gap:28px !important; }
  body.page-id-32 .spark-support-stack{ gap:20px !important; }
  body.page-id-32 .spark-card-body h2.elementor-heading-title, body.page-id-32 .spark-card-body h3.elementor-heading-title{ font-size: clamp(22px, 1.6vw, 28px) !important; }
  body.page-id-32 .spark-card-body .elementor-widget-text-editor p{ font-size: clamp(16px, 0.8vw, 18px) !important; }
}

/* ---------- Metrics band (real numbers: 200 / 20 / 10 / 2, same as Services page) ----------
   Each counter here ships with Elementor's own "ghost numeral" styling (a
   large pale 132px background number with the real label heading pulled
   -105px/-80px up to overlap it, via inline margin) — confirmed live this
   renders as illegibly faint (#EDEDED number on a light section). Reset to
   the same clean, legible stacked presentation already proven on the
   Services page's identical 4-stat band, just with the real numbers this
   page actually has. */
body.page-id-32 .elementor-element-719aded{
  background: var(--md-navy) !important;
  padding: clamp(48px,7vw,80px) clamp(20px,5vw,40px) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
body.page-id-32 .elementor-element-719aded > .e-con{ flex:1 1 0; min-width:110px; }
body.page-id-32 .elementor-element-719aded .elementor-counter-number-wrapper{
  font-family:'Fraunces', serif !important; font-weight:800 !important;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem) !important; color:#FFFFFF !important;
  text-align:center; justify-content:center; margin:0 !important;
}
body.page-id-32 .elementor-element-719aded h2.elementor-heading-title{
  color: rgba(255,255,255,0.72) !important; text-shadow:none !important; font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:600 !important; font-size:13px !important; text-transform:uppercase !important; letter-spacing:0.07em !important;
  text-align:center !important; margin:2px 0 0 !important;
}
body.page-id-32 .elementor-element-719aded .elementor-divider-separator{ border-color: rgba(255,255,255,0.18) !important; }
@media (max-width:1023px){
  body.page-id-32 .elementor-element-719aded{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:28px 16px !important; text-align:center; }
  body.page-id-32 .elementor-element-b682470, body.page-id-32 .elementor-element-f85462b, body.page-id-32 .elementor-element-b39623f{ display:none !important; }
}

/* ---------- Blog ----------
   Lorem Ipsum removed via JS (same established technique). Two loop-grid
   widgets sit in the SAME "extremely narrow vertical cards, letter-by-
   letter wrapping" defect already fully solved on the Blog page — root
   cause here confirmed via computed style to be structural, not the card
   CSS itself (that global .elementor-loop-container.elementor-grid rule
   already applies here too, unchanged): the two loop-grid widgets sit in
   two UNEVEN flex columns (measured live at 416px / 824px inside a
   1440px-wide, non-max-widthed band) rather than each getting the page's
   normal centered content width, so even a correct 3-column grid computes
   ~113px-wide columns inside the narrower one. Fix: give the band the same
   max-width/centering treatment as every other content section on this
   site, and stack the two loop-grids full width (one above the other)
   instead of an uneven side-by-side split, so each one gets the SAME
   proven responsive column treatment the Blog page already uses. */
body.page-id-32 .elementor-element-f67666a{
  background:#FFFFFF !important; flex-direction:column !important;
  padding: clamp(56px,8vw,88px) clamp(20px,5vw,60px) clamp(8px,2vw,16px) !important; text-align:center;
}
body.page-id-32 .elementor-element-5c99d89 .elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important;
  font-size: clamp(28px,4vw,40px) !important; text-align:center !important; margin:0 !important;
}
body.page-id-32 .elementor-element-02da855:empty{ display:none !important; } /* JS safety net */
body.page-id-32 .elementor-element-83312ac{
  max-width:1200px !important; margin:0 auto !important;
  padding: clamp(16px,3vw,24px) clamp(20px,5vw,60px) clamp(56px,8vw,80px) !important;
  flex-direction:column !important; gap: clamp(28px,4vw,40px) !important;
}
body.page-id-32 .elementor-element-2931b5a, body.page-id-32 .elementor-element-2e7d64c{
  width:100% !important; max-width:100% !important; flex:none !important;
}
/* Adaptive column count (rather than the Blog page's fixed repeat(2)/repeat(3)):
   these two grids hold different real item counts (3 posts / 1 post,
   confirmed live) so a fixed 3-column track would leave the sparser grid
   with large empty tracks next to its lone real card. auto-fit sizes each
   grid to however many real cards it actually has. */
body.page-id-32 .elementor-element-2931b5a .elementor-loop-container,
body.page-id-32 .elementor-element-2e7d64c .elementor-loop-container{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

/* ---------- Icon-box social row ----------
   5 real icons/links (Facebook/Instagram/Twitter/WhatsApp/LinkedIn). URLs
   are real and functional but point at a personal account, not a
   "Marketing Doctor" brand page — same class of issue already flagged
   elsewhere on this site; left as-is (not invented around) and called out
   in delivery notes as a client decision. Styled only: clean bordered
   tiles instead of bare inline icon+label pairs, real platform-colored
   icons on hover, WhatsApp's own green reserved for WhatsApp only. */
body.page-id-32 .elementor-element-7649064{
  background: var(--md-neutral) !important;
  padding: clamp(40px,6vw,64px) clamp(20px,5vw,60px) !important;
  display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:14px !important;
}
/* Elementor's own responsive column-width setting on each of these 5
   columns (sized for their original 20%-each side-by-side layout) outputs
   as an explicit width, which otherwise still forces each pill to the full
   1320px row width regardless of flex-basis -- width and max-width both
   need the override, not just flex, for the wrap-into-a-row layout below
   to actually take effect (confirmed live: computed width read back as the
   full container width until both were added). */
body.page-id-32 .elementor-element-7649064 > .e-con{
  flex: 0 1 auto !important; width:auto !important; max-width:none !important; min-width:0 !important;
}
body.page-id-32 .elementor-element-7649064 .elementor-widget-icon-box .elementor-widget-container{
  display:flex !important; align-items:center !important; gap:10px !important;
  background:#FFFFFF; border:1px solid var(--md-line); border-radius:999px;
  padding:12px 22px; box-shadow: var(--md-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
body.page-id-32 .elementor-element-7649064 .elementor-widget-icon-box .elementor-widget-container:hover{ transform: translateY(-2px); box-shadow: var(--md-shadow-lg); }
body.page-id-32 .elementor-element-7649064 .elementor-icon-box-icon{ margin:0 !important; }
body.page-id-32 .elementor-element-7649064 .elementor-icon{
  width:30px !important; height:30px !important; color: var(--md-navy) !important;
}
body.page-id-32 .elementor-element-7649064 .elementor-icon i,
body.page-id-32 .elementor-element-7649064 .elementor-icon svg{ font-size:16px !important; width:16px !important; height:16px !important; fill: currentColor; }
body.page-id-32 .elementor-element-095593f .elementor-icon:hover{ color:#1877F2 !important; } /* Facebook brand blue */
body.page-id-32 .elementor-element-0d27d57 .elementor-icon:hover{ color:#E1306C !important; } /* Instagram brand pink */
body.page-id-32 .elementor-element-36649f3 .elementor-icon:hover{ color:#000000 !important; } /* X/Twitter brand black */
body.page-id-32 .elementor-element-a58247d .elementor-icon:hover{ color: var(--md-whatsapp) !important; } /* WhatsApp's own real green, WhatsApp only */
body.page-id-32 .elementor-element-79441bb .elementor-icon:hover{ color:#0A66C2 !important; } /* LinkedIn brand blue */
body.page-id-32 .elementor-element-7649064 .elementor-icon-box-title,
body.page-id-32 .elementor-element-7649064 .elementor-icon-box-content{ margin:0 !important; }
body.page-id-32 .elementor-element-7649064 .elementor-icon-box-title .elementor-icon-box-title-text,
body.page-id-32 .elementor-element-7649064 h2.elementor-heading-title, body.page-id-32 .elementor-element-7649064 h3.elementor-heading-title{
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:600 !important; font-size:0.92rem !important;
  color: var(--md-ink) !important; text-shadow:none !important; margin:0 !important;
}

@media (max-width:767px){
  body.page-id-32 .elementor-element-5d33d04{ flex-wrap:wrap; }
  body.page-id-32 .elementor-element-6dcf960,
  body.page-id-32 .elementor-element-74d6d6d,
  body.page-id-32 .elementor-element-0b50250{ grid-template-columns: 1fr !important; }
}

/* ============================================================
   ROUND 2 CLIENT FEEDBACK BLOCK — appended after everything above so its
   equal-specificity selectors win the cascade by source order against the
   earlier per-page rules they intentionally override. Covers Bugs 4, 5, 6.
   ============================================================ */

/* ---------- Bug 4: uniform "Our Services" card grid (Home + Services) ----------
   The "Services teaser grid" block built earlier (search this file for
   "asymmetric featured + list") deliberately composed 1 large featured
   card (SEO) + 3 stacked "list" cards (Google My Business, Social Media
   Marketing x2) in a 1.15fr/1fr two-column split. Client's round-2
   feedback explicitly rejects this as a broken-looking layout ("baki ke 3
   cards ek ke neche ek a rahe hai") and wants a clean, even grid instead.
   Confirmed live via DOM inspection that the exact same component (same
   .spark-services-grid / .spark-card--featured / .spark-card--support /
   .spark-support-stack classes, same JS in spark-mdd-toolkit.php) is used
   on BOTH the Services page (page-id-18) and the Home page (page-id-32).
   The About Us page (page-id-14) does NOT contain this component at all
   (confirmed live — no .spark-services-grid/.spark-card--featured present
   anywhere in its DOM), so no override is added for it.
   Technique: .spark-support-stack (a flex column wrapping the 3 support
   cards as ONE grid cell) is switched to display:contents, which removes
   its own box from layout entirely and promotes its 3 children to be
   direct grid items of .spark-services-grid, sitting as equal siblings
   next to the featured card's own slide-wrapper — this is what actually
   turns "1 big + 3 stacked" into 4 even cells, without touching any real
   card content/markup. Only layout/sizing rules are touched below; every
   real image/heading/description/button stays exactly as already built. */
body.page-id-18 .spark-services-grid,
body.page-id-32 .spark-services-grid{
  display:grid !important;
  grid-template-columns: 1fr !important;
  align-items:stretch !important;
  gap:20px !important;
}
body.page-id-18 .spark-support-stack,
body.page-id-32 .spark-support-stack{
  display:contents !important;
}
@media (min-width:640px){
  body.page-id-18 .spark-services-grid,
  body.page-id-32 .spark-services-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap:24px !important;
  }
}
@media (min-width:1024px){
  body.page-id-18 .spark-services-grid,
  body.page-id-32 .spark-services-grid{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:24px !important;
  }
}
/* Both card types already share the same image-top/content-below
   composition (see the round-5 note on .spark-card--support above) — this
   just evens out sizing so the featured card no longer reads as visually
   "bigger" once all 4 sit in equal-width grid cells, and stretches every
   card to the tallest one in its row for a clean uniform grid line. */
body.page-id-18 .spark-services-grid .swiper-slide,
body.page-id-32 .spark-services-grid .swiper-slide{
  height:100% !important;
}
body.page-id-18 .spark-card--featured,
body.page-id-32 .spark-card--featured,
body.page-id-18 .spark-card--support,
body.page-id-32 .spark-card--support{
  height:100% !important;
}
body.page-id-18 .spark-card--featured h2.elementor-heading-title,
body.page-id-32 .spark-card--featured h2.elementor-heading-title,
body.page-id-32 .spark-card--featured h3.elementor-heading-title{
  font-size: clamp(18px, 2.4vw, 22px) !important;
  margin: 16px 20px 4px !important;
}
body.page-id-18 .spark-card--featured .elementor-widget-text-editor p,
body.page-id-32 .spark-card--featured .elementor-widget-text-editor p{
  font-size: clamp(14.5px, 1.6vw, 16px) !important;
  margin: 0 20px 8px !important;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
body.page-id-18 .spark-card--featured .elementor-widget-image,
body.page-id-32 .spark-card--featured .elementor-widget-image{
  margin:0 !important;
}
body.page-id-18 .spark-card--featured .elementor-widget-button,
body.page-id-32 .spark-card--featured .elementor-widget-button{
  padding: 4px 20px 20px !important;
}
body.page-id-18 .spark-card--featured::before,
body.page-id-32 .spark-card--featured::before{
  top:14px !important; left:14px !important;
}

/* ---------- Bug 5: homepage "OUR BLOG" duplicate widgets ----------
   Confirmed live (not guessed): the homepage's blog band contains TWO real
   elementor-widget-loop-grid instances, not one — elementor-element-2931b5a
   (the widget inside it is f9c625a, 3 real distinct posts: Gurugram/UK/USA)
   and elementor-element-2e7d64c (widget 2c382d5, only 1 real result — the
   SAME Gurugram post again, in a different image-left/content-right
   template with its own excerpt). The visually "3rd card" the client saw
   was actually this second widget's one real item rendered in its own
   different per-item template, not a 3rd separate widget. Root cause of
   the ugly oversized-empty-space first card in the first widget: a global
   (not page-scoped) JS block elsewhere in this project applies a
   "featured first card" treatment (full-width span + flex-row layout) to
   literally the FIRST .e-loop-item found ANYWHERE on the page via an
   unscoped querySelector — correct for the Blog page (page-id-22, where
   that treatment was designed and tested) but wrong here, where this
   homepage section wants a plain uniform grid. That JS is now scoped to
   page-id-22 only (see spark-mdd-toolkit.php) so it no longer reaches this
   section. Fix here: hide the redundant second widget (2e7d64c) entirely
   — its only content already appears, correctly, as the featured module in
   the first widget's own 3-post grid — and let the first widget's 3 real
   posts render through the site's existing plain loop-grid card styling
   (already proven on the dedicated Blog page) for a single, clean,
   consistent 3-up grid at every breakpoint. Every real post title/image/
   date is untouched. */
body.page-id-32 .elementor-element-2e7d64c{
  display:none !important;
}

/* ---------- Bug 6: social icons — real brand colors, visible everywhere ----------
   `.elementor-social-icon` instances sitewide (confirmed live: a
   testimonial-author bio block, this page's own dedicated social-icons
   row) render via Elementor's own default styling as a dull grey glyph
   (rgb(105,114,125)) with the actual icon SVG's fill hardcoded to white by
   Elementor's core CSS — fine against Elementor's own default dark/black
   circle background, but several real instances on this site have a
   transparent background behind that white-filled glyph, which is white-
   on-white/transparent and effectively invisible against a light page
   background (confirmed live). Client wants these visible everywhere they
   already appear (no instance hidden/removed) with real per-platform brand
   colors, inside a white circular badge matching the same tile style
   already used for the "OUR CLIENTS" logo cards. Global, not page-scoped,
   so this reaches every instance on every page in one place — including
   the one on page-id-32 whose own previous uniform-navy override was
   removed above so it now gets the same real-brand-color treatment as
   every other instance. svg fill is set directly (not relying on
   currentColor) because Elementor's own core CSS sets fill on the svg
   itself, not element color inherited via currentColor. */
.elementor-icon.elementor-social-icon{
  background:#FFFFFF !important;
  border:1px solid var(--md-line) !important;
  box-shadow: var(--md-shadow) !important;
  width:40px !important; height:40px !important;
  border-radius:50% !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.elementor-icon.elementor-social-icon:hover{
  transform: translateY(-2px);
  box-shadow: var(--md-shadow-lg) !important;
}
.elementor-icon.elementor-social-icon svg{
  width:18px !important; height:18px !important;
}
.elementor-icon.elementor-social-icon[class*="facebook"] svg{ fill:#1877F2 !important; }
.elementor-icon.elementor-social-icon[class*="instagram"] svg{ fill:#C13584 !important; }
.elementor-icon.elementor-social-icon[class*="x-twitter"] svg,
.elementor-icon.elementor-social-icon[class*="-twitter"] svg{ fill:#000000 !important; }
.elementor-icon.elementor-social-icon[class*="whatsapp"] svg{ fill: var(--md-whatsapp) !important; }
.elementor-icon.elementor-social-icon[class*="linkedin"] svg{ fill:#0A66C2 !important; }

/* ============================================================
   ROUND 3 CLIENT FEEDBACK BLOCK — appended after everything above so its
   equal-specificity selectors win the cascade by source order against the
   earlier per-page rules they intentionally override. Covers Bugs 1, 2, 5
   (Bug 3's overlay/text-shadow change was made in place, at the original
   hero rule above, and is documented with its own comment there; Bug 4 —
   social icons — was investigated live and found NOT to be a reproducible
   persistent bug, see the full write-up in the final report; no code
   change was made for it).
   ============================================================ */

/* ---------- Bug 2: featured "01/SEO" services card ~50px shorter than its
   3 siblings (Home page-id-32 AND Services page-id-18) ----------
   Root cause, confirmed live via computed-style + box-model inspection (not
   a guess, and not the same dead end hit twice earlier this round): the
   featured card's direct parent, Elementor's own `.e-con-inner`, carries a
   real 50px top padding — sourced from Elementor's own frontend CSS
   (`.e-con > .e-con-inner{ padding-block-start: var(--padding-block-start);
   ... }`), which reads a CSS custom property Elementor itself sets per
   container from that specific container's own real settings. The support
   cards' equivalent `.e-con-inner` already gets zeroed by the existing
   `.spark-support-stack .e-con-inner{ padding:0 !important; }` rule above —
   that's why only the featured card ever showed the gap. This 50px eats
   directly into the card's content-box height: `.e-con-inner` itself
   already correctly stretches to the grid row's full 559.5px (confirmed
   live — CSS Grid's own align-items:stretch on the direct .swiper-slide
   grid item works fine and was never the problem), so the featured card's
   own `height:100%` (already present, unchanged) was resolving completely
   correctly the whole time — against a containing block that was itself
   50px short. Neither earlier attempt this round (adding height/flex to
   every *intermediate wrapper*, and later trying position:absolute/inset:0
   as an escape hatch) touched this specific padding source, which is why
   both had zero effect or made things worse. Fix: zero out this one real
   padding source directly. Generic class selector (not the featured card's
   own per-page Elementor element ID, which differs between the two pages)
   so it self-heals on both pages in one rule; harmless on the support
   cards' own e-con-inner too since it's already 0 there. */
body.page-id-18 .spark-services-grid .swiper-slide .e-con-inner,
body.page-id-32 .spark-services-grid .swiper-slide .e-con-inner{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* ---------- Bug 1: homepage "OUR BLOG" section has no way to see more than
   3 posts ---------- */
body.page-id-32 .spark-home-blog-more{
  text-align:center;
  margin: 4px 0 0;
}
/* Reuses .spark-blog-btn / .spark-blog-btn-primary — already-defined global
   button classes from the Blog page rebuild (not page-scoped there), so no
   new button styling needed, just the wrapper's own spacing above. Element
   itself is inserted by JS (spark-mdd-toolkit.php, page-id-32 block),
   linking to the real Blog page (/blog/, confirmed via wp-cli as page-id-22's
   actual live permalink — 80 real published posts exist, confirmed via
   `wp post list --post_type=post`, so this is a real destination with real
   additional content, not a dead end). */

/* ---------- Bug 5: search bar works on desktop, invisible on mobile ----------
   Root cause confirmed live: the search widget (`.elementor-element-c04ee64`,
   a jkit_search widget) lives inside `.elementor-element-d227424`, the
   entire desktop-only portion of the shared header — hidden via Elementor's
   own `elementor-hidden-mobile` utility class. IMPORTANT correction to this
   round's initial working theory: that utility class's real breakpoint,
   confirmed by reading Elementor's own compiled frontend CSS rules directly
   (not assumed), is `@media(max-width:767px)` — NOT 1024px. Elementor's kit
   actually defines 3 tiers here: mobile (<=767, .elementor-hidden-mobile),
   tablet (768-1024, .elementor-hidden-tablet — this is what the mobile
   hamburger header, .elementor-element-42b3c6e, is hidden by, alongside its
   own .elementor-hidden-desktop for >=1025), desktop (>=1025). Verified live
   at 767/768/1024/1025px: d227424 is display:none ONLY at <=767px and the
   hamburger header (42b3c6e) is already the ONLY thing shown there; at
   768-1024 (tablet) the desktop header (with its full nav+search) is
   already visible on its own, correctly, with no bug to fix. Using 1024px
   here (matching a different, unrelated rule's breakpoint elsewhere in this
   file) would have incorrectly hidden the real, working tablet nav menu at
   768-1024px — scoped to the verified real 767px breakpoint instead.

   Technique: reveal d227424 but collapse its own box to zero height
   (position:fixed, height:0, overflow:visible, pointer-events:none) so it
   never occupies space or blocks taps anywhere else in the page — only the
   one real child we want (the search widget) opts back into pointer-events
   and is positioned to sit at top-right, just left of the real hamburger
   toggle (.elementor-element-3de57db, confirmed live at ~45px wide, flush
   right edge of the header). d227424's other 2 sibling containers (a
   duplicate full nav menu, a duplicate centered logo) and the search
   widget's own 2 sibling widgets inside .elementor-element-d313ccb (an
   off-canvas-panel trigger and its own separate menu icon — unrelated to
   search, out of this bug's scope) are explicitly hidden so nothing
   duplicate becomes visible. z-index set one above the mobile header's own
   (99, confirmed live) so the icon renders on top of it, not underneath. */
@media (max-width:767px){
  body .elementor-element-d227424{
    display:flex !important;
    position:fixed !important;
    top:0 !important; left:0 !important;
    width:100% !important; height:0 !important; min-height:0 !important;
    padding:0 !important; margin:0 !important;
    overflow:visible !important;
    background:transparent !important;
    pointer-events:none !important;
    z-index:100 !important;
  }
  body .elementor-element-42a159e,   /* duplicate full nav menu */
  body .elementor-element-84c4ff2,   /* duplicate centered logo */
  body .elementor-element-c55c986,   /* off-canvas trigger, unrelated to search */
  body .elementor-element-2814b31{   /* its own separate menu icon, unrelated to search */
    display:none !important;
  }
  body .elementor-element-d313ccb{
    display:block !important;
    position:absolute !important;
    top:10px !important; right:58px !important;
    width:auto !important; height:auto !important;
    pointer-events:auto !important;
  }
  body .elementor-element-c04ee64{
    display:block !important;
    width:36px !important; height:36px !important;
  }
  body .elementor-element-c04ee64 .elementor-widget-container{
    width:36px !important; height:36px !important;
  }
  body .elementor-element-c04ee64 .jeg-elementor-kit.jkit-search{
    width:36px !important; height:36px !important;
  }
  body .elementor-element-c04ee64 .jkit-search-modal{
    width:36px !important; height:36px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius:50% !important;
    border:none !important;
  }
  body .elementor-element-c04ee64 .jki-search11-light{
    color:#FFFFFF !important; font-size:17px !important;
  }
}

/* =====================================================================
   6 SERVICE-DETAIL PAGES -- final handover round
   Search Engine Optimization (3374), Social Media Marketing (3376),
   Lead Generation (3372), Video Marketing (3378), Email Marketing (4238),
   PPC Management Services (4242). These were never touched by any earlier
   round. All 6 are direct children of the Services page (id 18), so
   WordPress already stamps every one of them with the shared body class
   "parent-pageid-18" (confirmed live: no other published page carries it),
   used below as the single scope instead of 6 repeated page-id selectors --
   each page's own widget/element ids differ per page (not built from one
   literal duplicated template), so id-based scoping the way page-id-32/20/14
   fixes elsewhere in this file do would need 6x the selectors for no benefit.
   ===================================================================== */

/* ---------- Bug 1: sidebar "Recent Posts" loop-grid squeezed to 3 columns ----------
   Root cause (confirmed live via computed style): each page's sidebar
   "Recent Posts" widget already carries Elementor's own correct responsive
   intent in its own classes (elementor-grid-1 desktop / elementor-grid-
   tablet-2 / elementor-grid-mobile-1 -- i.e. Elementor's own setting for
   this widget is "1 column"), but the generic, unscoped
   ".elementor-loop-container.elementor-grid" rule above (originally written
   only for the wide, full-width Blog-page/Homepage article grids) forces a
   fixed 2-up @640px / 3-up @900px layout with zero awareness of how wide
   the widget's actual container is. Inside this ~380-420px-wide sidebar
   column that forced 3-up layout computed to ~120px-wide cards, wrapping
   post titles (and even "Read Article") one letter per line. Only one
   loop-grid widget exists per page (confirmed live), so this selector is
   safe without needing each page's own widget id. Unconditional (no media
   query) because the sidebar stays this narrow at every breakpoint where a
   2-column page layout exists in the first place -- "desktop" here never
   means "wide enough for multiple columns". */
body.parent-pageid-18 .elementor-widget-loop-grid .elementor-loop-container.elementor-grid{
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
/* The loop-item's own template (Elementor Pro template #2938, shared,
   confirmed identical id on all 6 pages) switches each card from a stacked
   layout to a 42%/60% image+content ROW via CSS custom properties at
   `@media(min-width:768px)` -- again keyed to viewport width, not this
   widget's own container width, so at any desktop viewport every card was
   already being forced into that horizontal split regardless of how narrow
   the sidebar itself is. Force it back to a full-width vertical stack
   (image on top, content below) at every breakpoint so it actually fits
   the sidebar cleanly, matching the "stacked list" layout the client asked
   for. Scoped through the loop-grid widget so this can't leak onto any
   other ".e-con-inner" elsewhere on these pages. */
body.parent-pageid-18 .elementor-widget-loop-grid .e-con-inner{
  flex-direction: column !important;
}
body.parent-pageid-18 .elementor-widget-loop-grid .e-con-inner > .e-con{
  width: 100% !important;
}
/* Card image: the template's own (unscoped) rule sets a fixed height:130px
   with object-fit:fill, which stretch-distorts the real ~3:2 photos once
   the column is widened to the sidebar's full ~380-420px (previously this
   was masked because the squeezed ~120px-wide column made the distortion
   less visible). Swap to a proper aspect-ratio + object-fit:cover, matching
   the image-quality bar already established for the Blog/Homepage article
   grids elsewhere in this file. */
body.parent-pageid-18 .elementor-widget-loop-grid .elementor-loop-container img{
  height: auto !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
}

/* ---------- Round 8: the exact same "Recent Post" squeeze bug, found live
   on the actual Blog single-post template (body.single-post -- a shared
   Elementor template applied to every real blog post, confirmed via the
   body class list on a live post, so one fix here covers all of them, not
   just the one post checked). Never covered by the Bug-1 fix above, which
   was scoped only to the 6 service-detail pages (parent-pageid-18) --
   this is a genuinely different template. Identical root cause, identical
   fix, just rescoped. ---------- */
body.single-post .elementor-widget-loop-grid .elementor-loop-container.elementor-grid{
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
body.single-post .elementor-widget-loop-grid .e-con-inner{
  flex-direction: column !important;
}
body.single-post .elementor-widget-loop-grid .e-con-inner > .e-con{
  width: 100% !important;
}
body.single-post .elementor-widget-loop-grid .elementor-loop-container img{
  height: auto !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
}

/* ---------- Bug 2: 2nd "Get in touch" form had no card chrome ----------
   Each page embeds the SAME CF7 form (#1670) twice: once in the hero "Book
   Appointment" card (which already has its own card background from the
   page's original design) and again lower down under a "Get in touch"
   heading with no distinguishing visual treatment -- flat background,
   no card boundary, reading as an afterthought next to the polished hero
   version. Rather than removing a genuine second lead-capture opportunity
   (a real, valid pattern for a long service page -- gives anyone who
   scrolled past the hero a second chance to convert without scrolling back
   up), it gets the same "premium white card" treatment already established
   for hero forms elsewhere on this site (see body.page-id-14
   .elementor-element-d044c91 above). The .spark-svc-form-card class is
   added by JS (spark-mdd-toolkit.php, wp_footer, parent-pageid-18 block) to
   the shortcode widget wrapping specifically the "-o2" (2nd) form instance,
   so this can't accidentally also re-style the hero form. */
body.parent-pageid-18 .spark-svc-form-card .elementor-widget-container{
  background:#FFFFFF; border:1px solid var(--md-line); border-radius:16px;
  box-shadow: var(--md-shadow);
  padding: clamp(20px,4vw,28px) clamp(18px,4vw,26px);
}
body.parent-pageid-18 .spark-svc-form-subhead{
  font-family:'IBM Plex Sans', sans-serif; font-size:0.92rem;
  color: var(--md-ink-muted); margin:2px 0 16px; line-height:1.5;
}
body.parent-pageid-18 .spark-svc-form-card .spark-form-row{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
@media (min-width:520px){ body.parent-pageid-18 .spark-svc-form-card .spark-form-row{ flex-direction:row; gap:14px; } }
body.parent-pageid-18 .spark-svc-form-card .spark-form-field{ flex:1 1 0; min-width:0; display:block; }
body.parent-pageid-18 .spark-svc-form-card .spark-form-field-full{ flex:1 1 100%; }
body.parent-pageid-18 .spark-svc-form-card .spark-form-label{
  display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:600;
  font-size:0.8rem; color: var(--md-navy); margin-bottom:5px;
}
body.parent-pageid-18 .spark-svc-form-card .wpcf7-form-control-wrap{ display:block; width:100%; }
body.parent-pageid-18 .spark-svc-form-card input[type=text],
body.parent-pageid-18 .spark-svc-form-card input[type=email],
body.parent-pageid-18 .spark-svc-form-card input[type=tel],
body.parent-pageid-18 .spark-svc-form-card select,
body.parent-pageid-18 .spark-svc-form-card textarea{
  width:100% !important; box-sizing:border-box !important;
  padding:13px 14px !important; border:1.5px solid var(--md-line) !important;
  border-radius:9px !important; font-family:'IBM Plex Sans', sans-serif !important;
  font-size:0.95rem !important; color: var(--md-ink) !important; background:#FFFFFF !important;
  min-height:46px;
}
body.parent-pageid-18 .spark-svc-form-card textarea{ resize:vertical; min-height:86px; }
body.parent-pageid-18 .spark-svc-form-card input:focus,
body.parent-pageid-18 .spark-svc-form-card select:focus,
body.parent-pageid-18 .spark-svc-form-card textarea:focus{
  outline:none !important; border-color: var(--md-accent) !important;
  box-shadow:0 0 0 3px rgba(47,95,214,0.15) !important;
}
body.parent-pageid-18 .spark-svc-form-card [data-spark-other-row][hidden]{ display:none !important; }
body.parent-pageid-18 .spark-svc-form-card .spark-form-row-acceptance{
  display:flex !important; align-items:flex-start; gap:8px;
  font-size:0.85rem; color: var(--md-ink-muted); margin:2px 0 14px;
}
body.parent-pageid-18 .spark-svc-form-card input[type=submit]{
  width:100%; height:48px; padding:0 22px !important; border:none !important;
  border-radius:10px !important; background: var(--md-accent) !important; color:#FFFFFF !important;
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:1rem !important; cursor:pointer; transition: background .15s ease;
}
body.parent-pageid-18 .spark-svc-form-card input[type=submit]:hover{ background: var(--md-accent-ink) !important; }
body.parent-pageid-18 .spark-svc-form-card .wpcf7-not-valid-tip{ font-size:0.78rem; margin-top:4px; }

/* ---------- Bug 3 (audit): sidebar column stretched with a large blank gap ----------
   Confirmed live on all 6 pages: the sidebar column (Get in touch / Our
   Services / Recent Posts) is a flex/grid row-sibling of the much longer
   main-content column and defaults to align-items:stretch, so its box
   matches the main column's full height even though its real content ends
   far short of that -- 1000-1500px of blank white space below "Recent
   Posts" on every page. .spark-svc-sidebar-col is added by the same JS
   block (by walking up from the loop-grid widget to its 2-child row
   ancestor, since each page's own column id differs). */
body.parent-pageid-18 .spark-svc-sidebar-col{
  height: auto !important;
  align-self: flex-start !important;
}

/* ---------- Bug 4 (audit): hero photo/heading legibility, guaranteed regardless of background image ----------
   Confirmed live: the hero's background photo is one of only 2 generic
   stock images reused across all 6 pages -- SEO/SMM/Lead Generation all
   share "lead-generation.png"; Video/Email/PPC all share
   "tips-to-boost-your-video-marketing.jpg" (the literal video-marketing
   blog photo, reused even on the unrelated Email and PPC pages) -- i.e.
   none of these 6 pages was ever individually art-directed. The sitewide
   "legibility safety net" rule earlier in this file (body:not(.single)
   h1/h2/h3 -> navy text + a faint 12px white halo) happens to read fine
   over the darker lead-generation.png, but the video-marketing photo has
   a large bright/white graphic (a translucent play-button + light monitor
   screens) baked into it that lands under different text at different
   viewport widths (confirmed live: the "Book Appointment..." heading
   washes out at 1440px, the page's own service-name heading washes out at
   320-390px -- no single fixed crop avoids both). Rather than chase the
   bright spot per breakpoint, this applies the exact dark-scrim-behind-
   white-text treatment already established and approved for the
   Home/About/Services photo heroes elsewhere in this file, which
   guarantees contrast no matter what's behind it. Applied to all 6 pages
   (not just the 3 visibly broken ones) so every service-detail hero reads
   as one deliberate "photo hero" treatment instead of half looking
   accidentally fine and half looking broken. Each page's own top-level
   hero container needs its own id (same one identified by walking up from
   its "Book Appointment" heading) since these 6 pages weren't built from
   one literal duplicated template. */
body.parent-pageid-18 .elementor-element-cbb732b,
body.parent-pageid-18 .elementor-element-765988d,
body.parent-pageid-18 .elementor-element-32f4009,
body.parent-pageid-18 .elementor-element-eae96b4,
body.parent-pageid-18 .elementor-element-7f090b0,
body.parent-pageid-18 .elementor-element-bac0d44{
  position: relative !important;
}
body.parent-pageid-18 .elementor-element-cbb732b::after,
body.parent-pageid-18 .elementor-element-765988d::after,
body.parent-pageid-18 .elementor-element-32f4009::after,
body.parent-pageid-18 .elementor-element-eae96b4::after,
body.parent-pageid-18 .elementor-element-7f090b0::after,
body.parent-pageid-18 .elementor-element-bac0d44::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background: linear-gradient(160deg, rgba(10,23,48,0.50) 0%, rgba(14,31,61,0.34) 45%, rgba(14,31,61,0.22) 100%);
  pointer-events:none;
}
body.parent-pageid-18 .elementor-element-cbb732b > *,
body.parent-pageid-18 .elementor-element-765988d > *,
body.parent-pageid-18 .elementor-element-32f4009 > *,
body.parent-pageid-18 .elementor-element-eae96b4 > *,
body.parent-pageid-18 .elementor-element-7f090b0 > *,
body.parent-pageid-18 .elementor-element-bac0d44 > *{
  position: relative;
  z-index: 2;
}
/* Both real headings inside the hero (the page's own service-name heading,
   and "Book Appointment, How We Can Help You?") switch from the sitewide
   navy-safety-net color to white + a strong shadow -- same values already
   used for the Home/Services hero headings above. */
body.parent-pageid-18 .elementor-element-cbb732b h2.elementor-heading-title,
body.parent-pageid-18 .elementor-element-765988d h2.elementor-heading-title,
body.parent-pageid-18 .elementor-element-32f4009 h2.elementor-heading-title,
body.parent-pageid-18 .elementor-element-eae96b4 h2.elementor-heading-title,
body.parent-pageid-18 .elementor-element-7f090b0 h2.elementor-heading-title,
body.parent-pageid-18 .elementor-element-bac0d44 h2.elementor-heading-title{
  color:#FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 2px 20px rgba(0,0,0,0.5) !important;
}

/* ---------- Bug 4 continued: hero "-o1" form as the same premium white card as "-o2" ----------
   .spark-svc-form-card is now added by JS to BOTH the hero form's widget
   and the 2nd "Get in touch" form's widget (spark-mdd-toolkit.php,
   wp_footer), so every rule in the Bug 2 block above already applies to
   the hero form too -- this eliminates the label-on-bare-photo contrast
   problem completely (labels now sit on solid white) and brings the hero
   form's input/submit styling up to the same design-system polish as
   every other hero form on the site, with no new CSS needed beyond a
   couple of hero-specific layout tweaks below. */
body.parent-pageid-18 .elementor-element-cbb732b .spark-svc-form-card .elementor-widget-container,
body.parent-pageid-18 .elementor-element-765988d .spark-svc-form-card .elementor-widget-container,
body.parent-pageid-18 .elementor-element-32f4009 .spark-svc-form-card .elementor-widget-container,
body.parent-pageid-18 .elementor-element-eae96b4 .spark-svc-form-card .elementor-widget-container,
body.parent-pageid-18 .elementor-element-7f090b0 .spark-svc-form-card .elementor-widget-container,
body.parent-pageid-18 .elementor-element-bac0d44 .spark-svc-form-card .elementor-widget-container{
  margin-top: 4px;
}

/* ============================================================
   BIG DESIGN-ELEVATION ROUND — Items 1-9 (agency-requested,
   this same day). Every rule below is CSS-only, restyling real
   existing markup or markup injected by spark-mdd-toolkit.php's
   wp_footer action; nothing here touches _elementor_data. Each
   numbered block below corresponds 1:1 to the agency's numbered
   brief so it's easy to cross-check what changed where.
   ============================================================ */

/* ---------- ITEM 1: Hero — 3rd stat ("30+ Expert Team") on every slide ----------
   Real _elementor_data only has 2 counter widgets (11368ba "10+ Working
   Experience", 7af52d9 "200+ Healthcare Clients"), and only on slide 1 —
   slides 2 and 3 have ZERO stat widgets at all (confirmed live: 0
   .elementor-widget-counter instances on either before this fix).
   Two different DOM shapes share these rules (spark-mdd-toolkit.php,
   buildHeroStats()): on slide 1, the real 2-counter row (.spark-hero-
   stats-row) is left COMPLETELY unmutated (a real regression was found
   live appending into it directly — see the JS comment — Elementor's own
   counter widget got stuck mid-animation), with the 3rd stat
   (.spark-hero-stat-experts) inserted as its own SIBLING instead; on
   slides 2/3 (no real widgets to protect) a fresh, fully static 3-item
   .spark-hero-stats-row is built with the 3rd stat as an ordinary nested
   child. `display:inline-flex` on both the row and the standalone sibling
   lets them sit on one visual line together on slide 1 without any shared
   flex-parent wrapper (which would have required changing the hero
   column's own flex-direction and disturbing the headline/button stack
   above and below it). */
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stats-row,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-b8e6774,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stat-experts{
  display:inline-flex !important; vertical-align:top !important; flex-wrap:wrap !important;
  gap: clamp(8px,1.6vw,14px) !important;
  margin: 10px 6px 16px 0 !important;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stats-row > *,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-b8e6774 > *,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stat-experts{
  width:auto !important; flex:1 1 0 !important; min-width:96px !important;
  max-width:none !important;
}
/* The real stat-item chrome (background/radius/padding) comes from
   Elementor's own generated per-id CSS (still present since the cloned
   nodes keep the real elementor-element-XXXXXXX classes) — this only
   tightens padding so 3 items breathe as well as the original 2 did. */
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stats-row > *,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-b8e6774 > *,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stat-experts{
  padding: 14px 8px !important;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stats-row .elementor-counter-number-wrapper,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-b8e6774 .elementor-counter-number-wrapper,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stat-experts .elementor-counter-number-wrapper{
  color:#FFFFFF !important;
  font-size: clamp(20px, 4.4vw, 32px) !important;
  font-weight:800 !important;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stats-row .elementor-counter-title,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-b8e6774 .elementor-counter-title,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stat-experts .elementor-counter-title{
  color: rgba(255,255,255,0.85) !important;
  font-size: clamp(10px, 2.4vw, 13px) !important;
  line-height:1.25 !important;
}
/* Round 9 client feedback: the orange top-rule tried here (and on the
   stats band below) read as messy/confusing rather than "well-highlighted"
   -- removed. The 3 stats stay well-separated via their own gap/spacing
   alone. */
@media (max-width:359px){
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stats-row,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-b8e6774,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stat-experts{ gap:6px !important; }
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stats-row .elementor-counter-number-wrapper,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-b8e6774 .elementor-counter-number-wrapper,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stat-experts .elementor-counter-number-wrapper{
    font-size: clamp(17px, 4.4vw, 22px) !important;
  }
}
/* Round 16 (client-reported, root-cause fix): the rules above only ever
   applied via the .spark-hero-stats-row CLASS, which spark-mdd-
   toolkit.php's buildHeroStats() only adds ~2.6s after page load (a
   deliberate delay, to avoid disrupting Elementor's own real counter
   widgets -- see the JS's own comment). Before that class exists, slide
   1's REAL, pre-existing 2-counter row (elementor-element-b8e6774, in the
   DOM from first paint, unlike the class) rendered with Elementor's own
   default row spacing instead of this custom spacing -- confirmed live
   via timed measurement: the row's own top position measured 201px at
   2.4s and 169px at 2.8s, a real 32px snap upward at almost exactly the
   2.6s mark, on every single load. Adding elementor-element-b8e6774
   alongside .spark-hero-stats-row in every rule above (not replacing it
   -- both keep working, and slides 2/3's JS-built rows still rely on the
   class alone since they don't exist this early) means the row already
   has its final spacing from first paint, so nothing visibly moves when
   the class and 3rd stat get added later -- the 3rd stat simply appears
   in the space beside the other two instead of the whole row relocating. */

/* ---------- ITEM 2: Hero slide 3 — inline client-logo mini-carousel sizing ----------
   Mobile (<=767px) already has a dedicated fix elsewhere in this file
   (search "0d903e1" above) — do not touch that. This is the DESKTOP/TABLET
   companion: the widget's own Swiper config crams too many logos into too
   little width at wide viewports (confirmed live: ~207px/slide with the
   edge of a 4th logo visibly bleeding in, arrow buttons overlapping the
   first tile). Fixed at a clean 3-up on desktop / 2-up on tablet.
   IMPORTANT: slide WIDTH itself is deliberately NOT set here (no `width`
   property on .swiper-slide) — a real bug was found live doing exactly
   that: this widget uses Swiper's numeric slidesPerView mode, which
   calculates and re-applies each slide's own inline width via JS on every
   update() cycle, so a CSS width override (even !important) visually
   wins but Swiper's internal translateX position math still uses ITS OWN
   calculated width, and the two drift apart (slides overlapping/showing
   as slivers). The actual fix is JS (spark-mdd-toolkit.php, page-id-32
   block, applyLogoCarouselPerView()) setting the instance's own
   slidesPerView to 2/3 directly, so Swiper computes a width that matches
   what actually renders, by construction. This CSS only handles spacing/
   padding/image sizing, which don't have that conflict. */
@media (min-width:768px){
  body.page-id-32 .elementor-element-0d903e1 .elementor-image-carousel-wrapper{
    overflow:hidden !important;
    padding: 0 48px !important; /* keeps the prev/next arrows clear of the first/last tile */
    box-sizing:border-box !important;
  }
  body.page-id-32 .elementor-element-0d903e1 .swiper-wrapper{
    align-items:center !important;
  }
  body.page-id-32 .elementor-element-0d903e1 .swiper-slide{
    padding: 16px 22px !important;
    box-sizing:border-box !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  body.page-id-32 .elementor-element-0d903e1 .swiper-slide img{
    max-height:56px !important; width:auto !important; max-width:100% !important; object-fit:contain !important;
  }
}
@media (min-width:1024px){
  body.page-id-32 .elementor-element-0d903e1 .swiper-slide{
    padding: 18px 24px !important;
  }
  body.page-id-32 .elementor-element-0d903e1 .swiper-slide img{ max-height:60px !important; }
}

/* ---------- ITEM 3: Testimonials — premium redesign (same real 9-doctor
   data/markup, CSS-only) ----------
   New heading+subtitle are JS-inserted (spark-mdd-toolkit.php, page-id-32
   block) right before this real widget since no heading widget existed in
   _elementor_data for this section. Card anatomy below reuses ElementsKit's
   own real per-item markup untouched: .elementskit-commentor-bio (photo),
   .elementskit-profile-info (name/specialty), ul.elementskit-stars (rating),
   the first inline-styled <span> inside .elementskit-commentor-content p
   (the real "X+ Years Of Working With Us" text, same structural position in
   every one of the 9 real repeater items) becomes the pill badge, and
   .elementskit-watermark-icon.commentor-badge (the quote glyph) is enlarged
   and recolored. The visually-centered card of the 3 on screen gets
   .spark-testi-center (JS, tracks Swiper's own slideChange event) for the
   gradient "special emphasis" card the brief asks for. */
body.page-id-32 .spark-testi-heading-wrap{
  text-align:center; max-width:720px; margin:0 auto clamp(32px,5vw,44px);
}
/* Round 6: client sent an exact reference image to clone -- pill eyebrow
   with a people-icon + "Trusted By Doctors" (white pill, thin border, navy
   text/icon), not the plain orange text-only tag this had before. */
body.page-id-32 .spark-testi-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Sans', sans-serif; font-weight:700;
  font-size:13px; color: var(--md-navy);
  background:#FFFFFF; border:1px solid var(--md-line); box-shadow: var(--md-shadow);
  padding:7px 16px 7px 12px; border-radius:999px; margin-bottom:16px;
}
body.page-id-32 .spark-testi-eyebrow svg{ width:15px; height:15px; stroke: var(--md-accent); flex-shrink:0; }
body.page-id-32 .spark-testi-heading-wrap h2{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important;
  font-size: clamp(28px,4vw,40px) !important; line-height:1.18 !important;
  color: var(--md-navy) !important; margin:0 0 12px !important;
}
body.page-id-32 .spark-testi-heading-wrap p{
  font-family:'IBM Plex Sans', sans-serif; font-size: clamp(15px,1.8vw,17px);
  line-height:1.6; color: var(--md-ink-muted); margin:0;
}
/* Short rule+dot flourish under the subtitle, matching the reference. */
body.page-id-32 .spark-testi-divider{
  display:block; width:44px; height:2px; background: var(--md-line);
  margin:20px auto 0; position:relative;
}
body.page-id-32 .spark-testi-divider::after{
  content:""; position:absolute; top:50%; left:50%; width:6px; height:6px;
  background: var(--md-accent); border-radius:50%; transform:translate(-50%,-50%);
}

/* Card shell — overflow:hidden (not visible) so the decorative corner
   shapes below clip cleanly to the card's own rounded corners, matching
   the reference. The quote glyph and "years" pill both sit safely inside
   the padding box so clipping them isn't a risk. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-single-testimonial-slider{
  background:#FFFFFF !important; border:1px solid var(--md-line) !important;
  border-radius:20px !important; box-shadow: var(--md-shadow) !important;
  padding: 34px 26px 30px !important; height:auto !important;
  position:relative !important; overflow:hidden !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Quote glyph — round badge, TOP-LEFT (reference), light-tinted per card
   position; default/fallback (perView<3, no position class yet) stays the
   original brand-blue treatment. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .commentor-badge{
  position:relative !important; display:flex !important; align-items:center !important;
  justify-content:center !important; width:44px !important; height:44px !important;
  border-radius:50% !important; margin:0 0 14px !important; top:auto !important; right:auto !important;
  background: var(--md-accent-tint2, #E8EEFC) !important; color: var(--md-accent) !important;
  font-size:18px !important; z-index:2;
}
/* Same bug class as this project's own documented "01 badge" fix: this
   element's own real ::before has empty content ("") yet renders a
   160x160px box (confirmed live via getComputedStyle(el,'::before')) --
   ElementsKit's stock "watermark" shape, painted as a big background blob
   behind the small quote icon. No visible content to preserve; kill it. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .commentor-badge::before{
  width:0 !important; height:0 !important; display:none !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .commentor-badge .icon-quote{
  font-size:18px !important; line-height:1 !important;
}
/* Left card (blue theme) */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-left .commentor-badge{
  background:#E5EEFF !important; color:#2F5FD6 !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-left .elementskit-commentor-content p > span:first-child{
  background:#E5EEFF !important; color:#2A56C6 !important;
}
/* Decorative wave, bottom-left, clipped to the card's own rounded corner. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-left .elementskit-single-testimonial-slider::before{
  content:""; position:absolute; left:-10%; bottom:-18%; width:70%; height:60%;
  background: radial-gradient(ellipse at 30% 70%, rgba(47,95,214,0.14) 0%, rgba(47,95,214,0.14) 55%, transparent 70%);
  border-radius:50%; pointer-events:none; z-index:0;
}
/* Right card (green theme) */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-right .commentor-badge{
  background:#E3F7EA !important; color:#1E9E52 !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-right .elementskit-commentor-content p > span:first-child{
  background:#E3F7EA !important; color:#177A40 !important;
}
/* Decorative dot grid, bottom-right, clipped. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-right .elementskit-single-testimonial-slider::before{
  content:""; position:absolute; right:14px; bottom:14px; width:64px; height:44px;
  background-image: radial-gradient(rgba(30,158,82,0.35) 1.4px, transparent 1.4px);
  background-size:9px 9px; pointer-events:none; z-index:0;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide .elementskit-commentor-bio,
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide .elementskit-commentor-content{
  position:relative; z-index:1;
}
/* Photo — round, top-left, sitting beside the name/specialty. `float:left`
   +"clearfix via overflow:hidden on the next sibling" was tried first (the
   standard technique) but broke live: `.elementskit-profile-info` is a
   `display:flex` element, and a flex container's own "shrink to avoid an
   earlier float" width computation collapsed to 0 for some (not all) of
   the 9 real repeater items (confirmed live via getBoundingClientRect —
   width:0, name/specialty rendered but fully invisible). inline-block on
   BOTH real sibling elements sidesteps that shrink-to-fit computation
   entirely — each simply sizes to its own content and they sit side by
   side on one line box, which is a simpler, more robust way to get the
   same "photo beside name" layout. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-bio{
  display:inline-block !important; vertical-align:middle !important; margin:0 14px 0 0 !important; float:none !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .ekit-testimonial--avatar{
  width:64px !important; height:64px !important; border-radius:50% !important;
  overflow:hidden !important; border:3px solid var(--md-orange-tint) !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .ekit-testimonial--avatar img{
  width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important; margin:0 !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-profile-info{
  display:inline-block !important; vertical-align:middle !important; min-height:64px !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-author-name{
  display:block !important; font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important;
  font-size:16px !important; color: var(--md-navy) !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-author-des{
  display:block !important; font-family:'IBM Plex Sans', sans-serif !important; font-weight:500 !important;
  font-size:13px !important; color: var(--md-ink-muted) !important; margin-top:2px !important;
}
/* Stars — real 5-icon rating markup, just given the expected gold fill */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-content{
  clear:both !important; padding-top:16px !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-stars{
  display:flex !important; gap:3px !important; padding:0 !important; margin:0 0 12px !important; list-style:none !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-stars svg{
  width:16px !important; height:16px !important; fill:#F5B301 !important;
}
/* The real "X+ Years Of Working With Us" span — same structural position
   (first child of the review <p>) in every one of the 9 real repeater
   items — becomes a colored pill badge. Its own inline font-size/weight
   style attribute is beaten with !important, per-doctor number/text is
   untouched. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-content p > span:first-child{
  display:inline-flex !important; align-items:center !important; gap:5px !important;
  background: var(--md-orange-tint) !important; color: var(--md-orange-ink) !important;
  font-family:'IBM Plex Sans', sans-serif !important; font-size:12.5px !important; font-weight:700 !important;
  padding:6px 14px !important; border-radius:999px !important; margin-bottom:14px !important;
  letter-spacing:0.01em;
}
/* Small ribbon icon in front of the badge text, matching the reference —
   an inline SVG data-URI so it needs no extra HTTP request and can be
   recolored per card via `currentColor`-style masking isn't available for
   background-image, so each card's variant below just swaps the encoded
   stroke color to match. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-content p > span:first-child::before{
  content:""; display:inline-block; width:13px; height:13px; flex-shrink:0;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4650A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/%3E%3Cline x1='16' y1='8' x2='2' y2='22'/%3E%3Cline x1='17.5' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-left .elementskit-commentor-content p > span:first-child::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A56C6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/%3E%3Cline x1='16' y1='8' x2='2' y2='22'/%3E%3Cline x1='17.5' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-right .elementskit-commentor-content p > span:first-child::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23177A40' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/%3E%3Cline x1='16' y1='8' x2='2' y2='22'/%3E%3Cline x1='17.5' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-commentor-content p > span:first-child::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/%3E%3Cline x1='16' y1='8' x2='2' y2='22'/%3E%3Cline x1='17.5' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-content p > span:first-child > span{
  font-size:14px !important; font-weight:800 !important;
}
/* The two literal <br> tags right after that span (real markup) only exist
   to push the quote paragraph onto its own line under the old plain-text
   treatment — collapse them now that the pill is a proper block-level
   rhythm break instead, so there's no extra blank gap under the badge. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-content p > span:first-child + br,
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-content p > span:first-child ~ br{
  display:none;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-content p{
  display:block !important;
  font-family:'IBM Plex Sans', sans-serif !important; color: var(--md-ink) !important;
  font-size:14.5px !important; line-height:1.7 !important; margin:0 !important;
}

/* Center-of-3 card: round 6 client feedback supplies an exact reference
   image to clone — the emphasis card there is a PURPLE/indigo gradient
   (not blue-to-navy), with a light-purple quote glyph/pill, a dotted
   texture bottom-right, and a large white circular quote-mark badge
   straddling the card's own bottom edge, center-aligned. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-single-testimonial-slider{
  background: linear-gradient(155deg, #6C5CE7 0%, #4B3A9E 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 26px 54px -18px rgba(75,58,158,0.45) !important;
  transform: translateY(-6px) scale(1.03);
  padding-bottom:46px !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .commentor-badge{
  background: rgba(255,255,255,0.16) !important; color:#FFFFFF !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .ekit-testimonial--avatar{
  border-color: rgba(255,255,255,0.5) !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-author-name{
  color:#FFFFFF !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-author-des{
  color: rgba(255,255,255,0.75) !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-commentor-content p{
  color: rgba(255,255,255,0.92) !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-commentor-content p > span:first-child{
  background: rgba(255,255,255,0.18) !important; color:#FFFFFF !important;
}
/* Dot texture, bottom-right */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-single-testimonial-slider::before{
  content:""; position:absolute; right:16px; bottom:52px; width:64px; height:44px;
  background-image: radial-gradient(rgba(255,255,255,0.28) 1.4px, transparent 1.4px);
  background-size:9px 9px; pointer-events:none; z-index:0;
}
/* Large white circular quote-mark straddling the bottom edge, matching the
   reference exactly. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-single-testimonial-slider::after{
  content:"\201D"; position:absolute; left:50%; bottom:-22px; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%; background:#FFFFFF; color:#6C5CE7;
  display:flex; align-items:center; justify-content:center; font-family:Georgia, serif;
  font-size:30px; line-height:1; box-shadow: 0 8px 18px -6px rgba(0,0,0,0.35); z-index:2;
}
/* Round 9 client feedback: below 3-up (mobile/tablet), this used to reset
   .spark-testi-center back to plain white on the theory that "center" has
   no meaning with only 1 card visible -- but that made the whole color
   effect vanish on mobile entirely, which the client explicitly flagged.
   The JS now rotates the single visible slide through the same 3 real
   color classes by slide index instead of always tagging it "center", so
   this reset is no longer correct at any width -- removed. Adjust padding
   only, at narrower widths, purely for spacing (all 3 color treatments
   keep their real colors now). */
@media (max-width:1023px){
  body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-single-testimonial-slider{
    padding-bottom:30px !important;
  }
  body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-single-testimonial-slider::before,
  body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .swiper-slide.spark-testi-center .elementskit-single-testimonial-slider::after{
    display:none;
  }
}

/* ---------- ITEM 4a: About-mini — defensive tablet hardening ----------
   Live-tested extensively (fresh load AND in-place resize, both the
   "ABOUT US / Patient Lead Generation Plan Services" text column and the
   "Book Appointment" form card) at 768/820/850/900/1024px: could not
   reproduce a "sliding left" layout break at any point in that range —
   the existing sitewide `.elementor-invisible`/`.animated` neutralization
   (body.page-id-32 rule above, added for this exact class of Elementor
   entrance-animation bug — this section's 2 columns do carry real
   fadeInLeft/fadeInRight settings, confirmed via _elementor_data) already
   keeps both columns at transform:none/opacity:1/visibility:visible in
   every test. Hardened anyway, defensively, in case the report describes a
   transient condition (slow font/image load, a specific device) this
   round's own testing didn't happen to catch: explicit flex-shrink/min-
   width safety so neither column can ever be squeezed narrower than its
   content, and the row/column breakpoint switch is nudged slightly earlier
   (992px instead of 1024px) so there's no narrow dead-zone right at the
   old boundary. */
body.page-id-32 .elementor-element-4921dc1,
body.page-id-32 .elementor-element-af1dbf0{
  min-width:0 !important; flex-shrink:1 !important;
}
@media (min-width:992px) and (max-width:1023px){
  body.page-id-32 .elementor-element-13e741f{ flex-direction:row !important; align-items:center !important; justify-content:space-between !important; }
  body.page-id-32 .elementor-element-4921dc1{ flex:0 1 54% !important; max-width:640px !important; }
  body.page-id-32 .elementor-element-af1dbf0{ flex:0 0 40% !important; margin:0 0 0 auto !important; }
}

/* ---------- ITEM 4b: sitewide typography pass — body/heading sizes that
   read noticeably smaller than the rest of the site's already-large-type
   sections (hero headlines, service card titles). Every bound below is px,
   never rem, per this project's standing clamp() rule. ---------- */
body.page-id-14 .elementor-element-bbc466b p,
body.page-id-32 .elementor-element-003cbf0 p{
  font-size: clamp(17px,2.1vw,18.5px) !important;
  line-height:1.85 !important;
}
body.page-id-20 .elementor-element-ad2aa1e p,
body.page-id-32 .elementor-element-3410960 p{
  font-size: clamp(17px,2.2vw,19px) !important;
}
/* Icon-list rows (service checklists, contact-detail rows) read small next
   to the section titles beside them almost everywhere they're used. */
.elementor-icon-list-text{
  font-size: clamp(14px,1.7vw,15.5px) !important;
}
body.page-id-32 .elementor-element-ff47f5b .elementor-icon-list-text{
  font-size: clamp(15px,1.8vw,16.5px) !important;
}
/* Team-card role labels (e.g. "Digital Marketing & SEO Specialist") —
   small on purpose as an eyebrow-style label, but was clamped down to
   12-13px, tighter than every other eyebrow on the site (13-14px). */
body.page-id-32 .spark-team-card .elementor-widget-text-editor p,
body.page-id-14 .spark-team-card .elementor-widget-text-editor p{
  font-size: clamp(13px,1.7vw,14px) !important;
}

/* ---------- ITEM 5: Introduction/Team — hero photo + auto-sliding carousel ----------
   Same restructure on both page-id-32 (Home) and page-id-14 (About Us) —
   both share the identical real 6-person roster. JS
   (spark-mdd-toolkit.php, shared spark_mdd_build_team_carousel() helper,
   called from both page blocks) moves Santosh's real photo/bio into a
   standalone hero block, inserts the new (explicitly authorized) caption
   line, and moves the other 5 real cards (unchanged photos/names/roles)
   into a scroll-snap track with JS-driven auto-advance + these prev/next
   buttons. No card is cloned/duplicated — only reordered/rewrapped, so
   Elementor's own real widgets stay exactly as they are. */
/* Hides the now-empty leftover card-grid containers (real bug found live:
   a plain inline `style.display:none` from the JS lost to each of these
   containers' own pre-existing `display:grid !important` rule above,
   leaving the About page's original Santosh Solanki source card still
   fully visible below the new hero+carousel). Specificity is bumped just
   enough (one extra class) to beat each one. */
body.page-id-14 .elementor-element-6077b71 .elementor-element-f92e4fd.spark-team-source-hidden,
body.page-id-32 .elementor-element-6dcf960.spark-team-source-hidden,
body.page-id-32 .elementor-element-74d6d6d.spark-team-source-hidden,
body.page-id-32 .elementor-element-0b50250.spark-team-source-hidden{
  display:none !important;
}
/* Real mobile bug found live: at 375px this whole block measured
   ~722px wide (confirmed via getBoundingClientRect), causing horizontal
   page overflow — the block's ancestor chain includes flex containers
   (Elementor's own e-flex columns), and a flex/grid item's default
   min-width is `auto` (its content's own intrinsic/preferred width), not
   0 — the carousel track's un-scrolled full content width (5 cards *
   ~200px + gaps) was winning that computation and forcing every ancestor
   up the chain to stretch to fit it instead of the track scrolling
   internally as intended. width:100%+min-width:0+overflow guards at
   every level of this component break that chain. */
.spark-team-hero{
  text-align:center; margin-bottom: clamp(28px,4vw,40px);
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.spark-team-hero-photo{
  width: clamp(160px,22vw,220px); height: clamp(160px,22vw,220px);
  border-radius:50%; overflow:hidden; margin:0 auto 18px;
  border:5px solid var(--md-orange-tint); box-shadow: var(--md-shadow-lg);
}
.spark-team-hero-photo img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; margin:0 !important; }
.spark-team-hero-name{
  font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size:19px;
  color: var(--md-navy); margin:0 0 4px;
}
.spark-team-hero-role{
  font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:13px;
  text-transform:uppercase; letter-spacing:0.05em; color: var(--md-accent-ink); margin:0 0 14px;
}
/* The new, explicitly agency-authorized caption line under Santosh's photo. */
.spark-team-hero-caption{
  display:inline-block; font-family:'IBM Plex Sans', sans-serif; font-weight:700;
  font-size: clamp(15px,2vw,17px); color:#FFFFFF; background: var(--md-navy);
  padding:10px 22px; border-radius:999px; box-shadow: var(--md-shadow);
  border-bottom:3px solid var(--md-orange);
}
.spark-team-carousel-wrap{
  position:relative; padding:0 clamp(0px,4vw,52px);
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.spark-team-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px 2px 14px; -ms-overflow-style:none; scrollbar-width:none;
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.spark-team-track::-webkit-scrollbar{ display:none; }
/* Round 7 client feedback: only ONE giant full-width card was rendering in
   this "carousel" instead of several ~200px cards side by side. Root cause
   found live: the OLDER static-grid card rule (`body.page-id-14
   .spark-team-card{ width:100% !important; flex:none !important; }` and
   the page-32 twin, both written for the pre-carousel grid layout and
   still applied to these same real elements) has `!important` and this
   rule didn't -- so on plain specificity/important terms the OLD 100%-
   width rule was winning regardless of cascade order. Page-scoped +
   !important here so it actually wins. */
body.page-id-14 .spark-team-track > .spark-team-card,
body.page-id-32 .spark-team-track > .spark-team-card{
  flex:0 0 auto !important; width:200px !important; max-width:200px !important;
  scroll-snap-align:start;
}
@media (max-width:479px){
  body.page-id-14 .spark-team-track > .spark-team-card,
  body.page-id-32 .spark-team-track > .spark-team-card{ width:76vw !important; max-width:76vw !important; }
}
.spark-team-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:999px; border:1.5px solid var(--md-line);
  background:#FFFFFF; color: var(--md-navy); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow: var(--md-shadow); transition: all .2s ease;
}
.spark-team-arrow--prev{ left:0; }
.spark-team-arrow--next{ right:0; }
.spark-team-arrow:hover{ background: var(--md-navy); border-color: var(--md-navy); color:#FFFFFF; }
.spark-team-arrow svg{ width:20px; height:20px; stroke-width:2.5; flex-shrink:0; }
@media (max-width:639px){
  .spark-team-carousel-wrap{ padding:0; }
  .spark-team-arrow{ width:38px; height:38px; }
  .spark-team-arrow--prev{ left:2px; }
  .spark-team-arrow--next{ right:2px; }
}

/* ---------- ITEM 6: Pricing — distinct premium tiers + new prices ----------
   Prices themselves (Rs.10,000->12,000 / Rs.12,000->25,000 / Rs.15,000-
   >50,000, EXPLICITLY agency-authorized) are a JS text-content swap
   (spark-mdd-toolkit.php, shared section — matches on the literal real
   price text so it applies identically on both Consultancy's own pricing
   section and the homepage's mini version). This block is only the visual
   tier differentiation.
   Card ids below are the REAL `.e-con` box that actually carries the
   white background (confirmed live via computed-style inspection, not
   guessed from _elementor_data alone — Elementor injects an unauthored
   ".e-con-inner" wrapper div per boxed carousel slide that never appears
   in the JSON, so counting nesting levels from the authored ancestor
   chain alone was off: 2 earlier passes in this same round each landed
   one level shallow/deep — one used the outer ".e-con-boxed" wrapper
   (background invisible, painted over by the real inner card's own white
   background) and the JSON-implied "middle" id (also transparent, an
   inner padded content wrapper, not the card). The real white-background
   card, verified via `getComputedStyle().backgroundColor`, is:
   Consultancy (page-id-20): Silver=5e3bc31, Gold=310aeb8, Platinum=4b9cd9f
   Home (page-id-32): Silver=061dec9, Gold=53d432f, Platinum=46aec6d
   (Home's pricing section has one extra real nesting level compared to
   Consultancy's, confirmed live — the two sections were built
   independently, not from one shared template.) */
body.page-id-20 .elementor-element-629ac87 .e-con-boxed > .e-con-inner > .elementor-element-5e3bc31,
body.page-id-32 .elementor-element-e46c114 .e-con-boxed > .e-con-inner > .elementor-element-061dec9{
  border-top: 5px solid #94A3B8 !important;
}
body.page-id-20 .elementor-element-629ac87 .e-con-boxed > .e-con-inner > .elementor-element-5e3bc31 .elementor-icon-list-icon svg,
body.page-id-32 .elementor-element-e46c114 .e-con-boxed > .e-con-inner > .elementor-element-061dec9 .elementor-icon-list-icon svg{
  fill:#64748B !important;
}
/* Gold — amber/orange accent border + "Most Popular" ribbon. The
   pre-existing scale(1.045) elevation (rule above, kept as-is, still
   targets the outer boxed wrapper — transform doesn't have the paint-
   over problem background-color does, so that one is left alone) already
   marks this as the emphasized middle tier; this adds the actual color
   identity so it doesn't just look "slightly bigger". */
body.page-id-20 .elementor-element-310aeb8,
body.page-id-32 .elementor-element-53d432f{
  border: 2px solid var(--md-orange) !important;
  border-top: 5px solid var(--md-orange) !important;
  position:relative !important;
}
body.page-id-20 .elementor-element-310aeb8::before,
body.page-id-32 .elementor-element-53d432f::before{
  /* The card is display:flex (Elementor's own .e-flex class), and an
     absolutely-positioned pseudo-element with only ONE inset per axis set
     (top/left here, no bottom/right) gets stretch-sized by the flex
     container's default cross/main-axis "stretch" alignment in every
     tested browser (confirmed live: this rendered as a ~320x460px oval
     covering nearly the whole card, not a small pill) — width/height:
     max-content plus align-self/justify-self:start override that stretch
     and force real shrink-to-fit sizing around the short "Most Popular"
     text, which is what actually renders a pill. */
  content:'Most Popular'; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  width:max-content !important; height:max-content !important;
  align-self:flex-start !important; justify-self:flex-start !important;
  background: var(--md-orange); color:#FFFFFF; font-family:'IBM Plex Sans', sans-serif;
  font-weight:700; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 16px; border-radius:999px; box-shadow:0 4px 12px rgba(245,130,10,0.4); z-index:3;
  white-space:nowrap; line-height:1.4;
}
/* Platinum — the richest treatment: dark gradient card, metallic-gold
   ribbon, deepest elevation. Text colors inside are re-pointed for
   legibility on the new dark background (the base white-card rule set
   navy headings / grey body text, both invisible on navy-on-navy). */
body.page-id-20 .elementor-element-629ac87 .e-con-boxed > .e-con-inner > .elementor-element-4b9cd9f,
body.page-id-32 .elementor-element-e46c114 .e-con-boxed > .e-con-inner > .elementor-element-46aec6d{
  background: linear-gradient(165deg, #16233F 0%, #0E1F3D 55%, #0A1730 100%) !important;
  border: 2px solid #2F5FD6 !important;
  box-shadow: 0 26px 58px -20px rgba(0,0,0,0.55) !important;
  position:relative !important;
}
body.page-id-20 .elementor-element-4b9cd9f:hover,
body.page-id-32 .elementor-element-46aec6d:hover{
  transform: translateY(-6px) !important; box-shadow: 0 32px 66px -18px rgba(0,0,0,0.6) !important;
}
body.page-id-20 .elementor-element-4b9cd9f::before,
body.page-id-32 .elementor-element-46aec6d::before{
  /* Same flex-stretch fix as the Gold ribbon above — see that comment. */
  content:'Best Value'; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  width:max-content !important; height:max-content !important;
  align-self:flex-start !important; justify-self:flex-start !important;
  background: linear-gradient(135deg, #F5820A, #FFC372); color:#0E1F3D; font-family:'IBM Plex Sans', sans-serif;
  font-weight:800; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 16px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,0.35); z-index:3;
  white-space:nowrap; line-height:1.4;
}
/* Targets the real eyebrow/price heading widgets DIRECTLY by their own
   unique real ids. 2 earlier attempts at this rule both lost the cascade
   to the base card rule above (`.e-con-boxed > .e-con-inner > .e-con >
   .e-con:first-child .elementor-widget-heading:first-child + ...`),
   which carries a longer selector chain (counted live: 11 class/pseudo-
   class selectors) than a same-length id-based rule can match without
   repeating that entire fragile chain. The class is deliberately repeated
   several times below (a valid, standard CSS technique — repeated simple
   selectors each still count toward specificity even though functionally
   redundant) to push past that count with a single robust, readable-
   enough rule instead of reconstructing/out-guessing the exact ancestor
   chain again. Consultancy (page-id-20) Platinum: eyebrow=baa0e55,
   price=8bfb20d. Home (page-id-32) Platinum: eyebrow=68d9066,
   price=fa1f1d1. */
body.page-id-20 .elementor-element-baa0e55.elementor-element-baa0e55.elementor-element-baa0e55.elementor-element-baa0e55.elementor-element-baa0e55.elementor-element-baa0e55.elementor-element-baa0e55.elementor-element-baa0e55.elementor-element-baa0e55.elementor-element-baa0e55 h2.elementor-heading-title,
body.page-id-32 .elementor-element-68d9066.elementor-element-68d9066.elementor-element-68d9066.elementor-element-68d9066.elementor-element-68d9066.elementor-element-68d9066.elementor-element-68d9066.elementor-element-68d9066.elementor-element-68d9066.elementor-element-68d9066 h2.elementor-heading-title{
  color: rgba(255,255,255,0.62) !important;
}
body.page-id-20 .elementor-element-8bfb20d.elementor-element-8bfb20d.elementor-element-8bfb20d.elementor-element-8bfb20d.elementor-element-8bfb20d.elementor-element-8bfb20d.elementor-element-8bfb20d.elementor-element-8bfb20d.elementor-element-8bfb20d.elementor-element-8bfb20d h2.elementor-heading-title,
body.page-id-32 .elementor-element-fa1f1d1.elementor-element-fa1f1d1.elementor-element-fa1f1d1.elementor-element-fa1f1d1.elementor-element-fa1f1d1.elementor-element-fa1f1d1.elementor-element-fa1f1d1.elementor-element-fa1f1d1.elementor-element-fa1f1d1.elementor-element-fa1f1d1 h2.elementor-heading-title{
  color:#FFFFFF !important;
}
body.page-id-20 .elementor-element-629ac87 .elementor-element-4b9cd9f .elementor-icon-list-text,
body.page-id-32 .elementor-element-e46c114 .elementor-element-46aec6d .elementor-icon-list-text{
  color: rgba(255,255,255,0.86) !important;
}
body.page-id-20 .elementor-element-629ac87 .elementor-element-4b9cd9f .elementor-icon-list-icon svg,
body.page-id-32 .elementor-element-e46c114 .elementor-element-46aec6d .elementor-icon-list-icon svg{
  fill: var(--md-orange) !important;
}
body.page-id-20 .elementor-element-629ac87 .elementor-element-4b9cd9f .elementor-divider-separator,
body.page-id-32 .elementor-element-e46c114 .elementor-element-46aec6d .elementor-divider-separator{
  border-color: rgba(255,255,255,0.2) !important;
}

/* ---------- ITEM 7: Stats band — "+" suffix, Offices 2->4, premium styling ----------
   "+" append + the 2->4 office-count correction (EXPLICITLY agency-
   authorized data change) are JS (spark-mdd-toolkit.php, shared section —
   spark_mdd_fix_counter_suffix(), applied to both Home's 719aded band and
   Services' 0c838c8 band, the only 2 real instances of this widget).
   Visual elevation below: subtle navy gradient (was flat solid navy), a
   thin orange top-rule per stat (Item 8's 3rd color, used as rhythm), and
   tighter number/label pairing. */
body.page-id-32 .elementor-element-719aded,
body.page-id-18 .elementor-element-0c838c8{
  background: linear-gradient(155deg, #0E1F3D 0%, #17294f 55%, #0A1730 100%) !important;
}
/* Round 9 client feedback: the orange top-rule here (and the matching one
   on the hero stats above) read as messy/confusing, combined with the
   pre-existing white divider lines between stats -- removed both the
   border and its extra padding-top, keeping just the hover lift. */
body.page-id-32 .elementor-element-719aded > .e-con,
body.page-id-18 .elementor-element-0c838c8 > .e-con{
  transition: transform .2s ease;
}
body.page-id-32 .elementor-element-719aded > .e-con:hover,
body.page-id-18 .elementor-element-0c838c8 > .e-con:hover{
  transform: translateY(-4px);
}
body.page-id-32 .elementor-element-719aded .elementor-counter-number-wrapper,
body.page-id-18 .elementor-element-0c838c8 .elementor-counter-number-wrapper{
  color:#FFFFFF !important; font-size: clamp(34px,4.4vw,54px) !important; font-weight:800 !important;
}
body.page-id-32 .elementor-element-719aded .elementor-counter-title,
body.page-id-18 .elementor-element-0c838c8 .elementor-counter-title{
  color: rgba(255,255,255,0.72) !important; font-size: clamp(13px,1.6vw,15px) !important;
  letter-spacing:0.04em; text-transform:uppercase; font-weight:600 !important;
}

/* ============================================================
   ITEM 8: sitewide orange+blue+white color system — additional
   deliberate placements beyond the ones already woven into Items
   1/3/6/7 above (hero stat top-rules, testimonial eyebrow/pill/
   center-card, pricing Gold/Platinum accents, stats-band top-rules).
   Blue stays primary (headings/primary CTAs); orange is the
   confident secondary accent used here for: secondary/ghost button
   hover states (so "secondary action = orange" reads as a rule, not
   an accident), a couple of sitewide eyebrow labels switched to
   orange to create alternating rhythm against the many that stay
   blue, icon-list accents on the About page, and card corner
   accents on the client-logo tiles. See the FAQ block further below
   for its own orange underline treatment (Item 9). Full written
   summary of every placement is in the final delivery notes.
   ============================================================ */

/* Secondary/ghost buttons -> orange hover (was white/navy-tint hover,
   indistinguishable from a disabled state on a dark background). */
body.page-id-32 .elementor-element-453ac20 .elementor-button:hover{
  background: var(--md-orange) !important; border-color: var(--md-orange) !important; color:#FFFFFF !important;
}
.spark-blog-btn-ghost:hover{
  background: var(--md-orange-tint) !important; border-color: var(--md-orange) !important; color: var(--md-orange-ink) !important;
}
/* Pagination "current page" — was solid blue; alternated to orange so
   pagination reads as its own distinct UI accent from primary CTAs. */
.elementor-pagination .page-numbers.current{
  background: var(--md-orange) !important; border-color: var(--md-orange) !important;
}
/* About Us page icon-list (contact/quick-fact rows) — alternated to
   orange, Home's equivalent icon-list stays blue, so the two pages read
   as one deliberate blue/orange rhythm rather than "blue everywhere". */
body.page-id-14 .elementor-icon-list-icon{ color: var(--md-orange) !important; }
body.page-id-14 .elementor-icon-list-icon svg{ fill: var(--md-orange) !important; }
/* Client-logo tiles: a soft orange corner accent on hover (was a plain
   elevation-only hover) so the "Our Clients" grid picks up the 3rd color
   too, not just blue-toned shadow. */
.spark-logo-tile{ position:relative; }
.spark-logo-tile:hover{ border-color: var(--md-orange) !important; }
/* Section eyebrow labels — About Us + Blog switched to the orange pill
   treatment already established for Testimonials/FAQ, so eyebrows
   alternate blue/orange across the page instead of being uniformly blue. */
body.page-id-14 .elementor-element-b442b16 .elementor-heading-title,
body.page-id-14 .elementor-element-a6132c1 .elementor-heading-title{
  color: var(--md-orange-ink) !important;
}
/* Blog article-card eyebrow (category label) — orange pill instead of
   plain uppercase blue text, gives every blog card a small deliberate
   3rd-color touch. */
.spark-blog-eyebrow{
  display:inline-block; background: var(--md-orange-tint); color: var(--md-orange-ink) !important;
  padding:3px 10px; border-radius:999px; font-weight:700;
}
/* Form focus rings sitewide stay blue (primary) by design — orange is
   deliberately kept OUT of form fields so it never reads as an error
   state; this comment documents that as a conscious choice, not an
   oversight, for the agency's review. */

/* ============================================================
   ITEM 9: FAQ — one global, JS-injected 10-question component,
   identical on every page (spark-mdd-toolkit.php, shared wp_footer
   section, inserted right before .elementor-location-footer on every
   page). GLOBAL, not page-scoped — one ruleset, looks identical
   everywhere by design. Numbered questions, orange underline under
   the "FAQ" eyebrow, generous spacing, accordion (click-to-expand)
   so 10 real Q&As don't make any page unreasonably long. The
   native Consultancy accordion widget (5 real Q&As, can't be
   expanded past 5 since it's real _elementor_data) is hidden via
   the .spark-faq-native-hide rule below and fully superseded by
   this component everywhere, including on Consultancy itself. */
body.page-id-20 .elementor-element-bc2004b,
body.page-id-20 .elementor-element-582191b{
  display:none !important;
}
.spark-faq-section{
  background: var(--md-neutral);
  padding: clamp(56px,8vw,96px) clamp(20px,5vw,60px);
}
.spark-faq-inner{ max-width:880px; margin:0 auto; }
.spark-faq-head{ text-align:center; margin-bottom: clamp(36px,5vw,52px); }
.spark-faq-eyebrow{
  display:inline-block; font-family:'IBM Plex Sans', sans-serif; font-weight:800;
  font-size:14px; letter-spacing:0.14em; text-transform:uppercase; color: var(--md-accent-ink);
  padding-bottom:8px; margin-bottom:10px;
  border-bottom: 4px solid var(--md-orange); /* the deliberate orange underline the brief asks for */
}
.spark-faq-head h2{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important;
  font-size: clamp(28px,4vw,40px) !important; line-height:1.2 !important;
  color: var(--md-navy) !important; margin:0 0 10px !important;
}
.spark-faq-head p{
  font-family:'IBM Plex Sans', sans-serif; font-size: clamp(15px,1.8vw,17px);
  color: var(--md-ink-muted); line-height:1.6; margin:0; max-width:620px; margin:0 auto;
}
.spark-faq-list{ display:flex; flex-direction:column; gap:14px; margin-top: clamp(32px,4vw,44px); }
.spark-faq-item{
  background:#FFFFFF; border:1px solid var(--md-line); border-radius:14px;
  box-shadow: var(--md-shadow); overflow:hidden; transition: box-shadow .2s ease;
}
.spark-faq-item.is-open{ box-shadow: var(--md-shadow-lg); border-color: var(--md-accent); }
.spark-faq-q{
  width:100%; display:flex; align-items:center; gap:16px; text-align:left;
  background:none; border:none; cursor:pointer; padding: 18px 22px;
  font-family:'IBM Plex Sans', sans-serif; font-weight:700; color: var(--md-navy);
  font-size: clamp(15.5px,1.9vw,17.5px); line-height:1.4;
}
.spark-faq-num{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  background: var(--md-orange-tint); color: var(--md-orange-ink); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.spark-faq-item.is-open .spark-faq-num{ background: var(--md-accent); color:#FFFFFF; }
.spark-faq-q-text{ flex:1 1 auto; }
.spark-faq-icon{
  flex:0 0 auto; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  color: var(--md-accent); transition: transform .2s ease;
}
.spark-faq-item.is-open .spark-faq-icon{ transform: rotate(45deg); }
.spark-faq-a{
  max-height:0; overflow:hidden; transition: max-height .3s ease;
}
.spark-faq-item.is-open .spark-faq-a{ max-height:600px; }
.spark-faq-a-inner{
  padding: 0 22px 22px 72px;
  font-family:'IBM Plex Sans', sans-serif; font-size: clamp(14.5px,1.7vw,16px);
  line-height:1.75; color: var(--md-ink-muted);
}
@media (max-width:479px){
  .spark-faq-q{ padding:15px 16px; gap:12px; }
  .spark-faq-a-inner{ padding:0 16px 18px 62px; }
  .spark-faq-num{ width:28px; height:28px; font-size:13px; border-radius:8px; }
}

/* ============================================================
   ROUND 7: sitewide font-size + weight boost. Client feedback (verbatim,
   repeated across multiple rounds, this time in caps): the whole site's
   text reads too small AND too light/thin, on every page, every section --
   not one specific spot. Two real, distinct root causes found:
   (1) this plugin's CSS never sets a base body font-size or weight
       anywhere -- confirmed via a full grep of this file -- so any text
       not already covered by one of this file's own specific
       clamp()+!important rules falls back to the THEME's own default,
       which this project has already documented drops to ~14.6px below
       1024px (the standing "no rem in clamp bounds" rule exists BECAUSE of
       this). A global, px-based, !important body rule is the actual fix
       for that gap, not another one-off per-element rule.
   (2) About Us (page-id-14) specifically has almost NO explicit font-size
       rules of its own anywhere in this file (confirmed: 2 matches total,
       neither a real body-paragraph rule) while every other main page has
       dozens -- this page was never actually covered by ANY prior
       typography pass, which is exactly what the client called out
       ("About Us wala bhi nahi hua hai"). Fixed with real coverage below,
       not just relying on the global fallback.
   Every bound is px, never rem, per this project's standing rule. ============ */

/* ---- (1) Global fallback: raises the floor for any text not already
   covered by a more specific rule elsewhere in this file. Deliberately a
   plain body-level rule (no page-id scoping) so it reaches every page,
   including ones this project's rounds haven't touched yet. */
body{
  font-size:17px !important; font-weight:450 !important; line-height:1.7 !important;
}
p{ font-size:17px; line-height:1.7; font-weight:450; }
/* Elementor's own default heading widget already sets real weight/size
   per h-level via the theme, but reinforce the common body-copy target
   (widget default paragraph text + icon-list rows) wherever no more
   specific override already wins. */
.elementor-widget-text-editor p{ font-size:17px; font-weight:450; line-height:1.75; }
.elementor-icon-list-text{ font-weight:500 !important; }

/* ---- (2) Explicit re-declarations of every body-paragraph rule this
   audit found still sized in the 13-16px range, on Home/Services/
   Consultancy. Same real selectors as the original rules elsewhere in
   this file -- appearing later here is what lets these win (same
   specificity + !important, later wins), without having to hunt down and
   edit a dozen scattered originals in place. */
body.page-id-20 .elementor-element-bc2004b .elementor-widget-text-editor p{
  font-size: clamp(17px,2.1vw,18.5px) !important; font-weight:450 !important;
}
body.page-id-18 .spark-card--featured .elementor-widget-text-editor p{
  font-size: clamp(17px, 2.6vw, 19px) !important; font-weight:450 !important;
}
body.page-id-18 .spark-card-body .elementor-widget-text-editor p{
  font-size: clamp(16.5px, 2.8vw, 18px) !important; font-weight:450 !important;
}
body.page-id-32 .spark-card--featured .elementor-widget-text-editor p{
  font-size: clamp(17px, 2.6vw, 19px) !important; font-weight:450 !important;
}
body.page-id-32 .spark-card-body .elementor-widget-text-editor p{
  font-size: clamp(16.5px, 2.8vw, 18px) !important; font-weight:450 !important;
}
/* Team-card role labels (e.g. "Digital Marketing & SEO Specialist") are a
   deliberate small-caps eyebrow style, not body copy -- bumped modestly
   (not to full paragraph size, which would fight the label's own visual
   role) but still up from the original 12-14.5px range. */
body.page-id-14 .spark-team-card .elementor-widget-text-editor p{
  font-size: clamp(14px,1.8vw,15px) !important;
}
body.page-id-32 .spark-team-card .elementor-widget-text-editor p{
  font-size: clamp(13px,1.7vw,14px) !important;
}
/* FAQ answers */
.spark-faq-a-inner p{
  font-size: clamp(16px,1.8vw,17px) !important; font-weight:450 !important;
}

/* ---- (3) About Us (page-id-14): real, page-wide coverage since this page
   had essentially none before. Catch-all for every real text-editor
   paragraph on the page (Introduction bio, any other body copy) rather
   than hunting individual element ids one at a time -- safe here
   specifically because, unlike Home/Services, this page doesn't have
   competing compact-card contexts that would need to stay smaller. */
body.page-id-14 .elementor-widget-text-editor p{
  font-size: clamp(17px,2.1vw,18.5px) !important; font-weight:450 !important; line-height:1.8 !important;
}
body.page-id-14 .elementor-icon-list-text{
  font-size: clamp(15px,1.8vw,16.5px) !important; font-weight:500 !important;
}
body.page-id-14 h1.elementor-heading-title,
body.page-id-14 h2.elementor-heading-title{
  font-weight:700 !important;
}
body.page-id-14 h3.elementor-heading-title,
body.page-id-14 h4.elementor-heading-title{
  font-size: clamp(19px,2.2vw,22px) !important; font-weight:700 !important;
}

/* ============================================================
   Round 8: Blog single-post header — "premium/luxury card" treatment.
   Scoped to body.single-post, the shared Elementor template applied to
   every real blog post (element ids below confirmed live on this template,
   not per-post), so one pass here covers every article. Real structure
   already had decent bones (a light title/meta card + a shadowed rounded
   featured image directly below it) -- this pass unifies the two into one
   cohesive premium unit and brings in the site's own established orange/
   blue accent system, rather than building a new card from scratch. No
   real content moved/altered, presentation only. ============ */
body.single-post .elementor-element-2015fac{
  background: linear-gradient(155deg, #F0F5FA 0%, #E7EEF7 100%) !important;
  border-radius: 20px 20px 0 0 !important;
  padding: clamp(28px,4vw,44px) clamp(24px,4vw,44px) clamp(20px,3vw,28px) !important;
  border-bottom: 3px solid var(--md-orange) !important;
}
body.single-post .elementor-element-3a9cf9a h1.elementor-heading-title{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important;
  color: var(--md-navy) !important; line-height:1.2 !important;
}
/* Date/comments meta row — small accent-colored icons instead of plain
   grey, tying it into the same eyebrow/badge language used everywhere
   else on the site. */
body.single-post .elementor-element-2015fac .elementor-icon-list-text{
  color: var(--md-accent-ink) !important; font-weight:600 !important;
}
body.single-post .elementor-element-2015fac .elementor-icon-list-icon svg,
body.single-post .elementor-element-2015fac .elementor-icon-list-icon i{
  color: var(--md-accent) !important;
}
/* Featured image block: pull it visually INTO the same card as the title
   (matching border-radius, removing the gap between them) instead of two
   separate floating pieces, and deepen the shadow slightly for real
   "premium" depth. */
body.single-post .elementor-element-98a0374{
  margin-top:0 !important; padding: 0 clamp(24px,4vw,44px) clamp(28px,4vw,40px) !important;
  background: #E7EEF7 !important; border-radius: 0 0 20px 20px !important;
  box-shadow: var(--md-shadow-lg) !important;
}
body.single-post .elementor-element-270269c img{
  border-radius:16px !important;
  box-shadow: 0 20px 45px -15px rgba(14,31,61,0.35) !important;
  width:100% !important; height:auto !important; display:block !important;
}
/* Article body: comfortable reading width + the same font boost already
   applied sitewide, reinforced here since this template previously had no
   explicit paragraph sizing of its own (same gap class as About Us, round
   7). */
body.single-post .entry-content p,
body.single-post article .elementor-widget-theme-post-content p{
  font-size: clamp(16.5px,1.8vw,18px) !important; line-height:1.85 !important;
  color: var(--md-ink) !important; font-weight:450 !important;
  max-width:74ch;
}
body.single-post .entry-content h2,
body.single-post article .elementor-widget-theme-post-content h2{
  font-family:'Fraunces', Georgia, serif !important; font-weight:700 !important;
  color: var(--md-navy) !important; margin-top:1.4em !important;
}
@media (max-width:767px){
  body.single-post .elementor-element-2015fac,
  body.single-post .elementor-element-98a0374{
    border-radius:16px !important;
  }
  body.single-post .elementor-element-2015fac{ border-radius:16px 16px 0 0 !important; }
  body.single-post .elementor-element-98a0374{ border-radius:0 0 16px 16px !important; }
}

/* ============================================================
   Round 9: Homepage "OUR BLOG" section — same circle+text-beside bug,
   a THIRD real instance (after the service-pages sidebar and the blog
   single-post sidebar). Root cause here is slightly different: this
   widget's own real Elementor grid setting is already correct (1 column,
   3 real posts stacked as siblings via the outer grid), but each
   individual card's shared loop-item TEMPLATE (elementor-2303, confirmed
   live) lays itself out as a horizontal row with a small 107x130px fully-
   circular (border-radius:360px) thumbnail beside the text, instead of a
   full-width image on top. Scoped to the specific real widget id
   (elementor-element-f9c625a) confirmed live as the actual visible "OUR
   BLOG" widget -- a second, already-hidden duplicate loop-grid exists on
   this page from an earlier round's fix and is untouched by this
   selector. ---------- */
body.page-id-32 .elementor-element-f9c625a .e-con-inner{
  flex-direction: column !important;
}
/* Round 10 client feedback: the image was correctly stacked on top after
   the earlier fix, but still rendered small and LEFT-aligned instead of
   covering the card's full width. Root cause found live via computed-
   style chain inspection: the image's own width:100% rule was only ever
   100% of its DIRECT parent -- and that whole wrapping chain (an
   Elementor "width: initial" column + its flex parent, both real classes
   confirmed live: elementor-widget__width-initial + a plain e-flex
   container) shrinks to the image's own natural/scaled size instead of
   stretching to the card's real ~334px width, since nothing forces THOSE
   wrapper levels to be full-width -- only the innermost <img> was fixed
   before. Forcing every level of the chain, not just the image itself. */
body.page-id-32 .elementor-element-f9c625a .e-con-inner > *{
  width:100% !important; max-width:100% !important;
}
body.page-id-32 .elementor-element-f9c625a .elementor-widget__width-initial{
  width:100% !important; max-width:100% !important;
}
body.page-id-32 .elementor-element-f9c625a .e-con-inner a,
body.page-id-32 .elementor-element-f9c625a .elementor-widget-container{
  width:100% !important; display:block !important;
}
body.page-id-32 .elementor-element-f9c625a .e-con-inner > img,
body.page-id-32 .elementor-element-f9c625a img.attachment-large{
  width:100% !important; height:auto !important;
  aspect-ratio: 16/9 !important; object-fit: cover !important;
  border-radius: 10px 10px 0 0 !important;
  display:block !important;
}
body.page-id-32 .elementor-element-f9c625a .e-loop-item{
  height:auto !important;
}

/* ============================================================
   Round 10 client feedback: hero headline text clipping off the right
   edge and the form's own "Book Appointment" heading overlapping the
   header nav bar, both reproduced live specifically in the ~768-1023px
   tablet range (tested at 850px). Root cause: the hero's real 2-column
   row (headline+photo column .elementor-element-5b5c98f, ~346px, beside
   the form column .elementor-element-b1489cd, ~364px, both direct
   children of the row container .elementor-element-53fbb09) is controlled
   entirely by ELEMENTOR'S OWN native responsive container setting, which
   switches to row starting around Elementor's default 768px "Tablet"
   breakpoint -- this plugin's CSS never had an override for it at all
   (confirmed via a full grep of this file). At 850px the 2 real columns
   genuinely don't have enough combined width for the headline text and
   the multi-field form side by side without overlapping/clipping. Same
   fix already proven correct elsewhere on this exact page (the "About-
   mini" section, ITEM 4a above): force the stacked single-column layout
   further, up through the whole cramped tablet range, rather than trying
   to squeeze 2 real columns into a width that can't hold them. Widened to
   1060px (from 1023) after a follow-up check found 1024px itself still
   rendered tight/near-touching, not clean. ---------- */
@media (max-width:1060px){
  /* All 3 real slides, each with its own distinct real element ids for
     the same row/2-column structure (confirmed live per-slide, not a
     shared template): slide 1 = 53fbb09 row (5b5c98f + b1489cd), slide 2
     = 27a0762 row (5f61b71 + 58294bc), slide 3 = a8546ab row (8bac9e9 +
     ba14703). All 3 needed the identical fix -- slide 1 alone measurably
     fixed slide 1 but slides 2/3 were still broken until these were added.
     Round 19 attempted a fix here by dropping the .swiper-slide-active
     scope (theorizing a duplicate-slide mismatch, the same class of bug
     already found once this round for the stats row) -- confirmed live
     that attempt was WRONG and broke all 3 slides' forms simultaneously,
     worse than the original single-slide issue it was trying to fix.
     Reverted back to this scoped version, which is the last confirmed-
     working state for slides 1 and 2. Slide 3's own mobile form-position
     issue is still open and needs a different, more careful fix -- not
     this same blanket unscoping again. */
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-53fbb09,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-27a0762,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-a8546ab{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5b5c98f,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-b1489cd,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5f61b71,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-58294bc,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-8bac9e9,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-ba14703{
    width:100% !important; max-width:100% !important; flex:0 0 auto !important;
  }
  /* Slide 3's inline client-logo carousel sat directly under the stats row
     when this range was still 2-column (no gap needed there) -- now that
     this range stacks to 1 column too, it lands overlapping the stats
     numbers above it instead of the form below. Give it real clearance. */
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-0d903e1{
    margin-top:28px !important;
  }
}

/* Round 9 client feedback: the theme's native "PREVIOUS / NEXT" post
   navigation block (Astra's own .post-navigation, real class confirmed
   live: .post-navigation__prev--label etc.) reads as confusing on this
   site -- two bare post titles with no context read as an unexplained UI
   element, not a clear "read the next article" control. Client explicitly
   doesn't want it; removed rather than trying to relabel it, since a real
   design fix here would need real breadcrumb/context copy this template
   doesn't have. */
body.single-post .post-navigation{
  display:none !important;
}

/* ============================================================
   Round 11 client feedback: the hero's rotating headline ("Digital Agancy
   For Doctors" / "Healthcare For Internet Marketing" / "Healthcare For
   Social Media Agency" -- real client content, 3 genuine phrases the
   widget cycles through automatically, `rotate_iteration_delay:2500`) was
   showing garbled combinations of two phrases at once (e.g. "Healthcare
   For For Doctors" -- the tail of one phrase and the head of another
   overlapping), and the client reported it as unpredictable/confusing.

   Root cause confirmed live via computed-style inspection of all 3 real
   phrase elements simultaneously: Elementor renders each rotating phrase
   as its own `.elementor-headline-dynamic-text` element (3 real elements
   in the DOM at once, one per phrase, positioned on top of each other via
   `position:absolute` for the 2 inactive ones vs `position:relative` for
   the currently-`.elementor-headline-text-active` one) -- but on this
   install NONE of the 3 actually differ in opacity or visibility (all
   measured `opacity:1; visibility:visible` regardless of active state).
   Whatever CSS is normally responsible for hiding the inactive phrases
   (either Elementor Pro's own dynamic stylesheet, or a timing-dependent
   inline style its JS sets mid-transition) isn't reliably doing so here --
   so all 3 real phrases paint fully opaque, stacked in the same
   absolutely-positioned spot, and whichever words happen to align
   pixel-for-pixel between phrases is what reads as garbled duplicate text.
   This is the same category of bug as this project's own standing
   ".elementor-invisible"/".animated" neutralization pattern used
   elsewhere -- force the real visibility state via CSS instead of relying
   on Elementor's own JS/CSS timing to get it right. A short opacity
   transition keeps a clean crossfade between real phrases rather than an
   abrupt cut, close to the original "swirl" animation's spirit without
   depending on its own letter-level timing. ============================================================ */
body.page-id-32 .elementor-element-630bec9 .elementor-headline-dynamic-text{
  opacity:0 !important; visibility:hidden !important;
  transition: opacity .35s ease !important;
}
body.page-id-32 .elementor-element-630bec9 .elementor-headline-dynamic-text.elementor-headline-text-active{
  opacity:1 !important; visibility:visible !important;
}
/* Round 12 client feedback: even with the overlap bug above fixed, the
   headline still visibly "moves upward" during every phrase change.
   Root cause found live via computed-style inspection of the individual
   letter spans: each real letter (`.elementor-headline-dynamic-letter`,
   the widget's own per-character animation unit) carries a persistent
   `matrix3d(...)` 3D transform with a non-zero Z-translation from
   Elementor's own "swirl" animation keyframes (`animation: 0.4s forwards
   elementor-headline-swirl-in`) -- under this hero's perspective/
   transform-origin setup, that Z-depth shift renders as a visible
   vertical/scale shift per letter every single time a phrase becomes
   active, independent of the phrase-level opacity fix above. Neutralizing
   it at the letter level (transform:none, animation:none) removes that
   motion entirely -- the phrase now simply crossfades in flat, with zero
   per-letter movement, which is what actually resolves "why does it keep
   moving up" rather than merely fixing the overlap. */
body.page-id-32 .elementor-element-630bec9 .elementor-headline-dynamic-letter{
  transform:none !important; animation:none !important; opacity:1 !important;
}

/* ============================================================
   Round 13 client feedback: "the headline still sits up at the top" --
   this was NOT the animation motion fixed above (confirmed clean via
   burst-capture); it's a real, separate, static layout issue: the
   headline column's own container only carries 10px of top padding
   (confirmed live via computed style: widget top y=131, heading top
   y=141 -- exactly the 10px gap and nothing more), so the headline sits
   almost flush against the header nav with no breathing room, on every
   one of the 3 real slides (each has its own distinct element id for
   this same column, confirmed live, not a shared template -- same
   pattern as the row/column ids fixed in Round 10 above).
   `justify-content:center` IS set on this container (Elementor's own
   real setting) but the actual real content (headline + stats row + a
   tall inner block + button) already fills nearly the whole 666px column
   height (measured content span 141px-787px of a 131px-797px box), so
   centering has almost no free space to redistribute regardless -- not
   a centering bug, just not enough top padding to begin with. Fixed
   directly and unconditionally (not just in the Round 10 tablet media
   query) since this is a real bug at every width, not only the tablet
   range. Applied identically to all 3 real slides' headline columns. */
/* Two more real findings from live testing, both corrections to the
   original version of this fix:
   (1) A first attempt at clamp(48px,8vw,90px) pushed slide 1's own total
       content past its column's fixed 666px box (real content already
       used 646px of it before any fix), colliding "30+ Expert Team" with
       the prev/next arrow -- reduced to a smaller, safer value.
   (2) Applying that same padding to ALL 3 slides via one shared selector
       was itself wrong: slides 2 and 3 are genuinely different real
       content (confirmed live -- slide 2's own headline already starts
       at y=338 vs slide 1's y=141, i.e. slide 2 already had ~165px more
       natural top space before any fix), so the same addition that fixed
       slide 1 pushed slide 2's stats row straight into the fixed-position
       arrow button instead ("10+ Years" measured overlapping the arrow's
       own 442-486px band). Scoped to slide 1 ONLY -- slides 2/3 were
       already acceptable and don't need (and can't safely take) the same
       change. */
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5b5c98f{
  padding-top: clamp(20px, 3vw, 32px) !important;
}

/* Round 15: new client-supplied hero background photos (hero1/2/3, set as
   real Elementor background_image on the 3 slide rows via _elementor_data
   so they stay editable from wp-admin) are bright, light-coloured group
   photos -- unlike the old backgrounds, they don't reliably leave a dark
   patch exactly where the headline/stats text sits, since text position
   is fixed but a photo's own light/dark areas move every time the
   background image is swapped from the dashboard. Confirmed live: "30+
   Expert Team" over slide 2's new photo landed on a white coat sleeve
   (near-invisible), and slide 3's "200+" landed across a person's hair.
   A permanent left-side gradient scrim behind the text column, rather
   than hand-tuning position per photo, guarantees contrast no matter
   which image is in there next -- this keeps working even after a future
   dashboard image swap, which per-image position tweaks would not. Left-
   anchored and faded out by ~65% width so it stays clear of the photo's
   own right-hand portion and never touches the white form card. */
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5b5c98f,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5f61b71,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-8bac9e9{
  position: relative;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5b5c98f::before,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5f61b71::before,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-8bac9e9::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(14,31,61,0.68) 0%, rgba(14,31,61,0.5) 45%, rgba(14,31,61,0.3) 68%, rgba(14,31,61,0.1) 85%, rgba(14,31,61,0) 100%);
  z-index:0; pointer-events:none;
}
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5b5c98f > *,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5f61b71 > *,
body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-8bac9e9 > *{
  position: relative;
  z-index: 1;
}
/* Mobile stacks the photo full-width above the form (confirmed live at
   390px), so a left-fade would leave the right half of the text column
   unprotected -- a flatter top-to-bottom scrim covers the whole width
   there instead, still fading out before the button/logos near the
   bottom so the photo itself stays visible, not just a dark slab. */
@media (max-width:1060px){
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5b5c98f::before,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5f61b71::before,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-8bac9e9::before{
    background: linear-gradient(180deg, rgba(14,31,61,0.66) 0%, rgba(14,31,61,0.48) 45%, rgba(14,31,61,0.15) 68%, rgba(14,31,61,0) 82%);
  }
}

/* Round 15: header search icon sits visibly lower than the hamburger menu
   icon next to it on mobile (client-reported, confirmed live via direct
   measurement). Root cause: this is the shared sitewide header template
   (.elementor-location-header, present on every page, NOT just the
   homepage -- deliberately unscoped from body.page-id-32 here) -- the
   hamburger lives in the mobile nav-menu widget's own row, which is a
   normal in-flow flex row with align-items:center that re-centers itself
   against the header's real height on every breakpoint (measured
   spanning y=8-38 in a 65px-tall mobile header). The search icon widget
   is a separate element carrying its own Elementor "Absolute" position
   setting -- confirmed live this is MOBILE-ONLY: at desktop/tablet widths
   it computes to position:relative/top:0px (already correctly aligned,
   left untouched), and only below the mobile breakpoint does Elementor's
   own responsive CSS switch it to position:absolute/top:10px, which
   lands about 20px lower than the hamburger. Scoped to the same
   max-width:767px mobile breakpoint Elementor itself uses for this
   widget's own Absolute-position switch, so desktop/tablet (already
   correct) are never touched. */
@media (max-width:767px){
  .elementor-location-header .elementor-element-d313ccb{
    top: -9px !important;
  }
}

/* Round 15: "Our Services" grid (Home page-id-32 AND Services page-id-18,
   same .spark-services-grid/.spark-card--featured/.spark-card--support
   component) — 2 client-reported issues, both confirmed live via computed
   style before fixing.
   (1) "Explore Service" buttons sit at a different height on every card.
   The 4 cards ARE already equal height (confirmed: grid's align-items:
   stretch + each card's own height:100% already work, all 4 measured at
   the same 574px) -- the button itself just has no margin-top, so it sits
   directly under wherever that card's own description text happens to
   end, 1-3 lines depending on the real copy length. margin-top:auto on a
   flex-column card (already flex-direction:column, confirmed live) pushes
   it down to the actual bottom of the now-equal card regardless of how
   many lines the text above it takes.
   (2) Card images render at different heights per card because the
   existing rule uses height:auto (each image keeps its own natural
   aspect ratio) -- correct for avoiding cropping/letterboxing when this
   was written, but means any two source photos of different shapes will
   never match, including after a future image swap from wp-admin. A
   fixed aspect-ratio box with object-fit:cover fixes the box size
   permanently regardless of what photo is dropped in from the dashboard
   next, at the cost of cropping non-matching aspect ratios slightly --
   an intentional tradeoff per this round's explicit client request for
   guaranteed equal sizing over letting every image keep its own shape. */
body.page-id-18 .spark-services-grid .elementor-widget-button,
body.page-id-32 .spark-services-grid .elementor-widget-button{
  margin-top: auto !important;
}
body.page-id-18 .spark-card--support .elementor-widget-image,
body.page-id-32 .spark-card--support .elementor-widget-image,
body.page-id-18 .spark-card--featured .elementor-widget-image,
body.page-id-32 .spark-card--featured .elementor-widget-image{
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
}
body.page-id-18 .spark-card--support .elementor-widget-image img,
body.page-id-32 .spark-card--support .elementor-widget-image img,
body.page-id-18 .spark-card--featured .elementor-widget-image img,
body.page-id-32 .spark-card--featured .elementor-widget-image img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; margin:0 !important;
}

/* Round 15 (client-reported): card 01's number sits as a dark floating
   badge on top of its image (from the older .spark-card--featured::before
   rule, still active), but cards 02/03/04 render their number as a small
   plain text line ABOVE the heading instead (from a completely different,
   older selector, .spark-card-body::before) -- confirmed live via the
   actual CSS source, not a guess: two unrelated rules were never
   reconciled when this grid was unified into 4 equal cards. Client wants
   every card visually consistent. Fix: kill the old plain-text counter on
   support cards entirely, and give them the exact same floating badge as
   the featured card (.spark-card--support::before, identical
   position/colors/shape to .spark-card--featured::before above), so all 4
   numbers read as one consistent design regardless of which card. */
body.page-id-18 .spark-card-body::before,
body.page-id-32 .spark-card-body::before{
  content: none !important;
  display: none !important;
}
body.page-id-18 .spark-card--support::before,
body.page-id-32 .spark-card--support::before{
  content: "0" counter(svc-count) !important;
  position:absolute !important; top:14px !important; left:14px !important;
  right:auto !important; bottom:auto !important; width:auto !important; height:auto !important; z-index:3;
  font-family:'IBM Plex Sans', sans-serif !important; font-weight:700 !important; font-size:13px !important;
  letter-spacing:0.04em !important; color:#FFFFFF !important;
  background: rgba(14,31,61,0.82) !important; border-radius:999px !important; padding:6px 13px !important;
  display:inline-block !important; line-height:1.1 !important;
}

/* Round 16 (client-reported): testimonial card photo was small (64px) and
   sat to the LEFT beside the name/specialty (ITEM 3's original
   inline-block "photo beside text" layout, chosen at the time to dodge a
   real flex-shrink-to-zero bug on .elementskit-profile-info). Client wants
   the photo bigger and centered, with every other real element (name,
   specialty, stars, years pill, quote) centered under it too -- a
   different reference layout, not what ITEM 3 built. Re-stacks the same
   real markup (.elementskit-commentor-bio, .elementskit-profile-info,
   .elementskit-stars, the years-pill span, the quote <p>) into a centered
   column instead of the old two-up inline row; the earlier flex-shrink
   bug that ruled out flex here was specific to .elementskit-profile-info
   sitting INSIDE a row with the photo -- now that the photo is its own
   full-width centered block above it, profile-info is never squeezed by a
   sibling and can safely go back to being simply centered text, no flex
   needed. Placed after ITEM 3 so these overrides win the cascade by
   source order. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-single-testimonial-slider{
  text-align:center !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .commentor-badge{
  margin-left:auto !important; margin-right:auto !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-bio{
  display:block !important; vertical-align:top !important; margin:0 auto 14px !important; text-align:center !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .ekit-testimonial--avatar{
  width:104px !important; height:104px !important; margin:0 auto !important;
  border-width:4px !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-profile-info{
  display:block !important; vertical-align:top !important; min-height:0 !important; text-align:center !important;
  margin-bottom:6px !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-content{
  text-align:center !important;
}
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-stars{
  justify-content:center !important;
}
@media (max-width:479px){
  body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .ekit-testimonial--avatar{
    width:88px !important; height:88px !important;
  }
}
/* Round 17 (client-reported, still off after round 15): the years-pill
   badge (span:first-child inside the quote <p>) sits INLINE with the
   quote text right after it -- confirmed live, no line break forces it
   onto its own row -- so text-align:center on the paragraph centers the
   badge+first-line-of-quote as ONE line together, not the badge on its
   own. The client wants the badge itself centered above the quote.
   display:block (was inline-flex) takes it out of the text flow entirely
   so it becomes its own centered row, same as photo/name above it. */
body.page-id-32 .elementor-element-526a46a.spark-testi-enabled .elementskit-commentor-content p > span:first-child{
  display:block !important;
  width:max-content !important;
  margin-left:auto !important; margin-right:auto !important;
}

/* Round 17 (client-reported, still off after round 15 -- and after a
   first Round 17 attempt at matching padding-bottom, which also didn't
   land): "Explore Service" on card 01 (.spark-card--featured) sits
   56-84px lower than the other 3 cards. Confirmed live via
   getComputedStyle that margin-top:auto (the mechanism both this and the
   earlier round relied on to push the button to each card's bottom) was
   NOT actually resolving to any real pushed distance on either card type
   (computed marginTop: 0px on both, despite the parent being a real
   flex-column) -- so every earlier attempt to fix this by tuning
   padding/margin around that mechanism could never have worked, no
   matter the values, because the push itself wasn't happening. Replacing
   the whole margin-auto approach with direct position:absolute pins the
   button a fixed, identical distance from each card's own bottom edge
   (both .spark-card--featured and .spark-card--support already have
   position:relative from the existing base rules, so this needs no new
   positioning context) -- geometrically guaranteed equal regardless of
   how much text sits above it or why the flex push wasn't engaging. The
   extra bottom padding on the card/card-body below reserves room so the
   now out-of-flow button never overlaps the real quote text above it. */
body.page-id-18 .spark-card--featured,
body.page-id-32 .spark-card--featured{
  padding-bottom: 90px !important;
}
body.page-id-18 .spark-card-body,
body.page-id-32 .spark-card-body{
  padding-bottom: 90px !important;
}
/* getComputedStyle's offsetParent confirmed live: the button's real
   Elementor container div (its own original wrapper from _elementor_data,
   e.g. elementor-element-78781e7 / -900a6e9 -- different real IDs per
   card, all Elementor's own containers, which carry their own
   position:relative from Elementor's base CSS) was the ACTUAL containing
   block for the position:absolute button below, not the outer card --
   so "bottom:28px" was measured from THAT wrapper's own bottom edge,
   which itself still sits wherever the original per-card content flow
   left it, not the card's true bottom. Neutralizing position on every
   Elementor container between the button and the outer card removes
   those as competing containing blocks, so the absolute button correctly
   bubbles up to .spark-card--featured/.spark-card--support (both already
   position:relative from the existing base rules) instead. */
body.page-id-18 .spark-card--featured .e-con,
body.page-id-32 .spark-card--featured .e-con,
body.page-id-18 .spark-card-body .e-con,
body.page-id-32 .spark-card-body .e-con{
  position: static !important;
}
body.page-id-18 .spark-card--featured .elementor-widget-button,
body.page-id-32 .spark-card--featured .elementor-widget-button,
body.page-id-18 .spark-card-body .elementor-widget-button,
body.page-id-32 .spark-card-body .elementor-widget-button{
  position:absolute !important;
  top:auto !important;
  left: clamp(20px,3vw,28px) !important;
  right: clamp(20px,3vw,28px) !important;
  bottom: clamp(20px,3vw,28px) !important;
  margin:0 !important;
  width:auto !important;
}

/* Round 18 (client-reported): About Us "Meet Our Team" row (Amit Batham,
   Deepak Kumar, Naveen Kumawat, Dinesh Solanki, Abhinandan Dixit -- 5 real
   cards, JS-built .spark-team-track) left-aligns by default (plain flex
   row, no justify-content set), leaving a large empty gap on the right
   whenever the 5 real 200px cards don't fill the row's own width --
   confirmed live at 1620px (1396px track, only ~1072px of real card
   content). This track has no CSS transform / scroll-based sliding
   (confirmed live: computed transform is "none", real width comfortably
   exceeds all 5 cards combined), so centering is safe here and won't
   fight any slide-position math the way it would on an actual
   transform-driven carousel. */
body.page-id-14 .spark-team-track{
  justify-content: center !important;
}

/* Round 19 (client-reported): mobile hero -- (1) slide 3's lead form
   wasn't visible at all, page appeared to auto-scroll to a wrong offset
   with the slide's own row measuring ~1250px tall instead of its
   min-height-mobile:900px setting; (2) the headline ("Best Digital
   Agancy For Doctors") now sits in a separate plain-navy band ABOVE the
   photo instead of overlaid on it. Both trace back to the same source:
   min-height-mobile:900px (real Elementor setting, on the row, from
   before Round 18/19's background_size:contain change) was tuned for the
   OLD design where the row's shared background image sat behind BOTH the
   text column and the form column combined -- now that the image lives
   only on the (much narrower, real 1672x941 photo) column and the form
   is a fully separate stacked block below it, the row's REAL required
   height at mobile is photo (~220px at 390px width) + headline/stats/
   button (~300px) + form (~700px+) stacked -- comfortably OVER 900px,
   so the row grows past its own old min-height instead of being
   constrained by it, and something in that overflow triggered the
   scroll-to-wrong-offset. Reducing the PHOTO section's own min-height
   (not the whole row, which still needs to grow to fit the real, taller
   stacked form beneath it) closes most of that oversized empty gap
   between the image and the headline/stats sitting above it, without
   forcing an exact aspect-ratio box that could clip the real headline/
   stats/button text living inside this same column -- 620px comfortably
   fits the real photo (1672x941 natural size) plus headline/stats/button
   at mobile widths without the excess reserved space the old 900px value
   left once the form stopped needing to share this same height budget. */
@media (max-width:767px){
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5b5c98f,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5f61b71,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-8bac9e9{
    min-height: 330px !important;
  }
}

/* ============================================================
   Round 20/21/22/23 (client-reported, desktop-only history -- mobile
   was confirmed correct by round 21 and is deliberately left
   untouched, see the unchanged max-width:1060px block below):
   Round 20 found the column's real Elementor setting was
   `justify-content:center` inside a fixed-height box, but each slide
   carries a different amount of real content (slide 3 alone also has
   the real client-logo carousel, elementor-element-0d903e1) so
   centering started the headline at a different top offset per slide.
   Round 20 switched to top-alignment so every slide starts from the
   same padding -- fixed the cross-slide inconsistency, but Round 21
   found it left the headline sitting at the top of a box being
   STRETCHED to match the tall lead-form column beside it (real
   Elementor row `min_height:600`, sized for the form, not the photo),
   leaving a dead gap of plain photo before the button. Round 21 gave
   the column `align-self:flex-start` + a fixed 480px height so it
   stopped stretching. Round 22 centered the headline on the photo by
   taking the button out of flow with `position:absolute; bottom:20px`
   -- but this still measured the button's position AGAINST THE FIXED
   480px BOX, which does not actually track the real photo's own
   rendered size.
   Round 23 root cause (found live via direct measurement of the real
   background image, hero1/2/3.png, all 1672x941 natural size, at
   several real desktop widths): with `background-size:contain`, the
   image's own rendered height is `columnWidth * 941/1672` -- NOT a
   fixed number. Measured live: 316px at a 1280px-wide screen, 361px
   at 1440px, but 496px at 1920px and 676px at 2560px -- all comfortably
   TALLER than the fixed 480px box used since Round 21. At any screen
   1920px or wider (confirmed live, this is the client's own tested
   width), the real photo is already taller than that fixed box, so it
   fills the box completely with zero letterbox room left at all --
   putting the button at "bottom:20px of the box" necessarily lands it
   ON the photo itself, every time, at exactly the widths that matter
   most. No single fixed box height can ever fix this: a box tall
   enough to clear the photo at 1920px+ leaves a huge dead gap at
   1280-1440px, and a box sized for 1280-1440px gets its photo cropped
   or covered by the button at 1920px+ -- the box height and the real
   photo height simply scale differently (one fixed, one proportional
   to width), so they were guaranteed to drift apart at some width.
   Fix: stop using a fixed pixel height at all. `aspect-ratio:1672/941`
   makes the column's own height a true function of its width, the
   exact same function the browser already uses internally for
   `background-size:contain` -- so the box and the real rendered photo
   are now IDENTICAL at every single width, by construction, with zero
   crop and zero letterbox ever (the two historic, opposite complaints
   this hero has had -- "image hidden/cropped" and "big dead gap" --
   both come from exactly this same box-vs-real-image mismatch, now
   removed at the root). Headline+stats (the only remaining in-flow
   children, button/carousel still taken out below) get
   `justify-content:center`, which now centers them against the real
   photo's own true height, not a guessed box. The button (and, slide 3
   only, the carousel) is positioned `top:100%` -- the exact bottom
   edge of this now-always-accurate box -- pushed down a further fixed
   amount with `transform:translateY()`, landing in the real navy
   background of the surrounding row (which is taller than the photo
   column at every width tested, driven by the lead-form's own real
   content) every single time, never on the photo, at any screen
   width. */
@media (min-width:1061px){
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5b5c98f,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5f61b71,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-8bac9e9{
    align-self: flex-start !important;
    aspect-ratio: 1672 / 941 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    padding-top: 140px !important;
    padding-bottom: 16px !important;
    padding-left: 60px !important;
  }
  /* Button: pinned to the exact bottom edge of the real, always-
     accurate photo box (top:100%), then nudged further down into the
     row's own navy space -- identical on every slide, at every width. */
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-70ac192,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-e08bbba,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-7366ff4{
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    top: 100% !important; bottom: auto !important;
    transform: translateY(110px) !important;
    margin: 0 !important; width: auto !important;
  }
  /* Slide 3's client-logo carousel: same technique, its own fixed slot
     directly below the photo, ABOVE the shared button position (the
     button's own translateY above already clears this carousel's
     height) -- unique to slide 3 only, slides 1/2 never have it. */
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-0d903e1{
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    top: 100% !important; bottom: auto !important;
    transform: translateY(16px) !important;
    margin: 0 !important;
  }
}
/* Round 17 (client-reported, root-cause fix): on slide 1, the real
   2-counter row (elementor-element-b8e6774) and the JS-appended 3rd
   stat (.spark-hero-stat-experts, its own SIBLING -- see ITEM 1 above
   for why it isn't nested inside the row) are both direct children of
   the photo column, which is `display:flex; flex-direction:column`
   with the browser's default (stretch) align-items on its children --
   confirmed live via computed-style inspection: both the row AND the
   lone 3rd stat were being stretched to the column's FULL width (e.g.
   862px at a 1920px viewport) even though the 3rd stat's own actual
   content ("30+ Expert Team") only needs a small fraction of that --
   the empty space filling the rest of that stretched box is exactly
   what read as the stat being randomly "stuck"/glued at the left edge
   rather than deliberately placed, per the client's own screenshot.
   `align-self:flex-start` on both makes each shrink-wrap to its own
   real content width instead, so slide 1's 3rd stat now sits as a
   proper compact item directly under the first stat, matching the
   same left edge -- exactly like slides 2/3's own already-correct
   single-row build. The added margin-top on both also answers the
   client's separate request to push the whole stats block further
   down from the headline (headline itself is untouched -- still
   anchored solely by the column's own padding-top:140px above). */
@media (min-width:1061px){
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-b8e6774,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stat-experts{
    align-self: flex-start !important;
  }
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-b8e6774{
    margin-top: 46px !important;
  }
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .spark-hero-stat-experts{
    margin-top: 18px !important;
  }
}
/* Same fix, mobile/tablet stacked range (matches the Round 10 breakpoint
   where the row itself switches to single-column) -- keeps the photo's
   own sizing (min-height:330px, Round 19, untouched) but applies the
   identical top-align + bottom-anchor treatment to the text/button
   inside it, so mobile gets the same consistent behavior as desktop. */
@media (max-width:1060px){
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5b5c98f,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-5f61b71,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-8bac9e9{
    justify-content: flex-start !important;
    padding-top: 28px !important;
    padding-bottom: 20px !important;
  }
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-70ac192,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-e08bbba,
  body.page-id-32 .elementor-element-45373b1 .swiper-slide-active .elementor-element-0d903e1{
    margin-top: auto !important;
  }
}