/* ═══════════════════════════════════════════════════════════════════
   Nadeem Digital — stylesheet
   ─────────────────────────────────────────────────────────────────
   Tokens · Base · Nav · Hero · Buttons · Trust strip · Problem ·
   Solution · Services · Results · Testimonials · Mid CTA · Who ·
   Not-For · How / Form · CTA banner · Sticky-CTA · About-page ·
   Footer · Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────────────
   Edit values here and the whole site updates. */
:root {
  /* Type system — Plus Jakarta Sans for display, Inter for body/UI */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Type scale — used by section headers + reusable for new components */
  --text-xs:   0.78rem;
  --text-sm:   0.88rem;
  --text-base: 1rem;
  --text-md:   1.1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.6rem;
  --text-4xl:  3.4rem;

  /* Weight tokens */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Letter-spacing tokens */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.14em;

  /* Color & elevation tokens */
  --pink:   #6366F1;
  --pink-2: #4f46e5;
  --red:    #e53935;
  --ink:    #0f172a;
  --ink-2:  #334155;
  --muted:  #64748b;
  --line:   #e2e8f0;
  --bg:     #ffffff;
  --bg-2:   #f8fafc;
  --bg-3:   #f5f5ff;
  --grad:     linear-gradient(90deg,  #6366F1 0%, #8B5CF6 100%);
  --grad-btn: linear-gradient(135deg, #4f46e5,    #6366F1);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow:    0 4px 14px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 36px rgba(15,23,42,.10);
  --radius:    14px;
  --container: 1180px;
}

/* ── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);     /* Inter */
  color: var(--ink-2);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* All display / headline / stat elements use Plus Jakarta Sans.
   Single rule = automatic consistency across every section. */
h1, h2, h3, h4, h5, h6,
.nav-logo,
.hero-headline,
.hero-badge,
.hero-stat-num,
.stat-num,
.solution-label,
.solution-tagline,
.dark-quote h2, .dark-quote h3,
.mid-cta h2,
.who-section h2,
.not-for h2, .not-for h3,
.bridge-section h2,
.cta-banner h2,
.step-num,
.form-title,
.footer-logo-name,
.about-stat-num,
.principle-num,
.section-header h2,
.problem-h2 {
  font-family: var(--font-display);
  font-feature-settings: 'ss01', 'ss02', 'ss03';  /* Plus Jakarta stylistic sets */
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Shared section helpers */
/* ── Section header system — ONE definition, used by every section ── */
.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;     /* more breathing room before content */
}
.section-header h2,
.problem-h2,
.who-section h2,
.not-for h2,
.mid-cta h2,
.bridge-section h2,
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);      /* ↑ more display presence */
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;                            /* ↓ tighter = more impact */
  letter-spacing: -0.032em;                     /* ↓ tighter optical = display feel */
  margin-bottom: 20px;
}
.section-header h2 .accent { color: var(--pink); }
.section-header h2 .grad-text,
.problem-h2 .grad-text,
.who-section h2 .grad-text,
.not-for h2 .grad-text,
.mid-cta h2 .grad-text,
.bridge-section h2 .grad-text,
.cta-banner h2 .grad-text { display: inline; }

.section-header > p,
.bridge-line {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Eyebrow — unified across all section variants ── */
.eyebrow,
.bridge-eyebrow,
.strip-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 14px;
  display: inline-block;
}
.strip-eyebrow { color: var(--muted); }   /* logo strip = quieter context */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══ NAV ════════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s, border-color 0.25s, background 0.25s;
}
.nav.scrolled {
  box-shadow: 0 2px 24px rgba(15,23,42,.08);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-logo {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.nav-logo .n-first { color: var(--ink); font-weight: 500; }
.nav-logo .n-last  { color: var(--pink); font-weight: 900; font-style: italic; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--pink); background: var(--bg-3); }
.nav-links a.active { color: var(--pink); font-weight: 600; background: var(--bg-3); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.nav-phone {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .2s;
}
.nav-phone:hover { color: var(--pink); }
.nav-phone svg { width: 14px; height: 14px; fill: var(--pink); }
.nav-cta {
  background: var(--grad-btn);
  color: #fff;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(99,102,241,.28);
  transition: transform .15s, box-shadow .2s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(99,102,241,.38); }
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-mobile {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 24px 20px;
}
.nav-mobile a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 14px 0;
  border-bottom: 1px solid var(--bg-2);
  display: block;
}
.nav-mobile a.active { color: var(--pink); font-weight: 600; }
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile .nav-cta {
  margin-top: 14px;
  text-align: center;
  display: block;
}

/* ═══ HERO — INDIGO EXPERIMENT (scoped overrides) ═════════════════
   The base hero rules below use pink. The block at the very END of
   this section overrides them with indigo. Delete the override block
   to revert to pink, or move it site-wide if you want to commit. */

.hero,
.e-con.hero,
.about-hero,
.e-con.about-hero {
  position: relative;
  padding: 70px 60px 90px;
  background: #f1f4ff !important;
  background-image: none !important;
  overflow: hidden;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
}

/* Dramatic radial gradient blobs — brand energy */
.hero-blob {
  position: absolute;
  right: -80px; top: -100px;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(79,70,229,.22) 0%,
    rgba(99,102,241,.18) 40%,
    rgba(139,92,246,.10) 70%,
    transparent 90%);
  pointer-events: none;
  z-index: 0;
}
.hero-blob2 {
  position: absolute;
  right: 180px; bottom: -120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(99,102,241,.14) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}

/* Left content */
.hero-content { max-width: 600px; }

/* Animated pulsing badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(99,102,241,.25);
  color: var(--pink);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 26px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(99,102,241,.12);
}
.hero-badge-dot {
  width: 8px; height: 8px;
  background: var(--pink);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
  50%      { opacity: .7; transform: scale(1.2); box-shadow: 0 0 0 8px rgba(99,102,241,0); }
}

.hero-headline {
  font-size: clamp(2.4rem, 5.4vw, 4rem);       /* ↑ display-scale, anchors the page */
  font-weight: 800;
  color: var(--ink);
  line-height: 1.05;                            /* ↓ tight, confident */
  margin-bottom: 26px;
  letter-spacing: -0.035em;                     /* ↓ aggressive tracking for big display */
}
.hero-headline .grad-text {
  display: inline;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 30px;
  max-width: 540px;
}
.hero-lede strong { color: var(--ink); font-weight: 700; }

/* Green-circle checklist */
.hero-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}
.hero-check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
}
.check-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(22,163,74,.3);
}
.check-icon svg { width: 12px; height: 12px; }

.hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

/* Clean credibility strip below CTAs — no floating boxes, no Instagram feel */
.hero-credstrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
}
.hero-credstrip strong {
  color: var(--ink);
  font-weight: 800;
  margin-right: 4px;
  font-family: var(--font-display);
}
.hero-credstrip .csep { color: var(--line); font-weight: 400; }

/* RIGHT: clean photo card — no floating stat badges anymore */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 30px 40px;
}
.hero-photo-card {
  position: relative;
  width: 380px;
  max-width: 100%;
}
/* Pink dot grid behind photo */
.hero-grid-bg {
  position: absolute;
  inset: -24px;
  background-image:
    linear-gradient(rgba(99,102,241,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.10) 1px, transparent 1px);
  background-size: 28px 28px;
  border-radius: 36px;
  z-index: 0;
  pointer-events: none;
}
/* Photo frame — flat #f1f4ff background, no gradient */
.hero-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 28px;
  overflow: hidden;
  background: #f1f4ff;
  box-shadow:
    0 0 0 8px rgba(99,102,241,.10),
    0 30px 70px rgba(99,102,241,.28);
  z-index: 1;
}
.hero-photo-frame::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(99,102,241,.10) 100%);
  z-index: 1;
}
.hero-photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Floating stat badges — the Instagram-style social-proof anchors */
.stat-badge {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 12px 36px rgba(15,23,42,.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  z-index: 3;
}
.stat-num {
  font-size: 1.35rem;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-label {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-1 { top: 30px;    left: -48px; }
.stat-2 { bottom: 90px; left: -56px; }
.stat-3 { top: 70px;    right: -48px; }

/* ── Hero-only refinements that aren't part of the global system ── */

/* Phase 1 #10: drop the attention-pulling pulse — keep dot static */
.hero-badge-dot { animation: none; }

/* Phase 1 #5: WhatsApp as quiet text link, not a competing button */
.hero .btn-wa-text {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--pink);                                  /* brand color (now indigo) */
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero .btn-wa-text:hover { border-bottom-color: var(--pink); }
.hero .btn-wa-text svg   { width: 16px; height: 16px; fill: var(--pink); }

/* ═══ BUTTONS ═══════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--grad-btn);
  color: #fff;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 700;
  box-shadow: 0 6px 22px rgba(99,102,241,.32);
  transition: box-shadow .2s, transform .15s;
}
.btn-primary:hover { box-shadow: 0 10px 30px rgba(99,102,241,.45); transform: translateY(-1px); }
.btn-primary svg { width: 16px; height: 16px; fill: #fff; flex-shrink: 0; }

.btn-wa-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 2px solid var(--pink);
  color: var(--pink);
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background .2s, transform .15s;
}
.btn-wa-outline:hover { background: var(--bg-3); transform: translateY(-1px); }
.btn-wa-outline svg { width: 18px; height: 18px; fill: var(--pink); }

.btn-ghost {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 6px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { color: var(--pink); border-bottom-color: var(--pink); }

.btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--grad-btn);
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(99,102,241,.3);
}
.btn-phone svg { width: 16px; height: 16px; fill: #fff; }
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: 2px solid var(--pink);
  border-radius: 50%;
  color: var(--pink);
  transition: background .2s;
}
.btn-wa:hover { background: var(--bg-3); }
.btn-wa svg { width: 26px; height: 26px; fill: var(--pink); }

/* ═══ LOGO STRIP ════════════════════════════════════════════════ */
.logo-strip-section {
  padding: 50px 40px 60px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.strip-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 24px;
}
.logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}
/* Logos vary slightly in height — matches their real proportions so the
   row looks naturally composed instead of rigidly aligned. */
.logo-strip img {
  object-fit: contain;
  opacity: 0.92;
  transition: transform .25s, opacity .25s;
}
.logo-strip img:nth-child(1) { height: 46px; }  /* Google Ads */
.logo-strip img:nth-child(2) { height: 40px; }  /* Merchant Center */
.logo-strip img:nth-child(3) { height: 34px; }  /* Analytics */
.logo-strip img:nth-child(4) { height: 42px; }  /* Google Business Profile */
.logo-strip img:hover { opacity: 1; transform: translateY(-2px); }

/* ═══ PROBLEM — simple, point-by-point ═══════════════════════════
   Two columns of checks/x's, breathing room, no cards. */
.problem-section {
  padding: 100px 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.problem-h2 {
  text-align: center;
  margin-bottom: 56px;
}
.problem-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 70px;
  max-width: 820px;
  margin: 0 auto 32px;
}
.prob-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.05rem;
  color: var(--ink);
  padding: 6px 0;
  font-weight: 500;
}
.prob-item .ic {
  font-size: 1.2rem;
  flex-shrink: 0;
  font-weight: 700;
}
.ic-check { color: #16a34a; }
.ic-x     { color: var(--red); }
.result-line {
  text-align: center;
  font-size: 1.1rem;
  color: var(--ink-2);
  margin: 20px 0 48px;
}
.result-line strong { color: var(--ink); font-weight: 700; }
.dark-quote {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  border-radius: 18px;
  padding: 56px 56px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(15,23,42,.18);
  max-width: 880px;
  margin: 0 auto;
}
.dark-quote p {
  font-size: 1.15rem;
  font-weight: 400;
  color: #cbd5e1;
  margin-bottom: 12px;
}
.dark-quote h3 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.9vw, 2.2rem);   /* scaled up to hold weight against bigger section H2s */
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.dark-quote h3 span { color: var(--pink); }

/* ═══ SOLUTION — centered, uppercase, breathing ══════════════════ */
.solution-section {
  padding: 90px 40px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.solution-label {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 36px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.solution-focus {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 22px;
}
.solution-list {
  display: inline-flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  margin-bottom: 40px;
}
.solution-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.solution-list li::before {
  content: '→';
  color: var(--pink);
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.solution-tagline {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  font-style: italic;
  letter-spacing: -0.01em;
}

/* ═══ MID CTA — centered question + Call/WhatsApp ════════════════ */
.mid-cta {
  padding: 100px 40px;
  text-align: center;
  background: #fff;
}
.mid-cta h2 {
  margin: 0 auto 36px;
  max-width: 760px;
}
.cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ═══ WHO FOR — pink-outlined industry cards ═════════════════════ */
.who-section {
  padding: 100px 40px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.who-section h2 {
  margin-bottom: 48px;
}
.who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.who-card {
  border: 1.5px solid var(--pink);
  border-radius: 12px;
  padding: 22px 24px;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  background: #fff;
  transition: background .2s, transform .2s, box-shadow .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  line-height: 1.4;
}
.who-card:hover {
  background: #fff0f7;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(99,102,241,.15);
}

/* ═══ NOT FOR — soft pink bg, editorial list ═════════════════════
   Energy from type hierarchy: bold condition + small verdict stamp.
   No icons in circles, no cards, no top-borders. Pure typography. */
.not-for {
  background: #eef0ff;
  padding: 100px 40px;
  text-align: center;
}
.not-for h2 { margin-bottom: 56px; }
.not-for h2 .strike {
  text-decoration: line-through;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--pink);
  color: var(--pink);
}

.not-list {
  max-width: 700px;
  margin: 0 auto 56px;
  text-align: left;       /* the list itself is left-aligned for editorial rhythm */
}
.not-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  border-bottom: 1px solid #d8dffe;   /* slightly more visible pink-tinted divider */
  line-height: 1.45;
}
.not-list li:last-child { border-bottom: none; }

/* The disqualifier — bold and present, the real content */
.not-cond {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}

/* The verdict stamp — small, uppercase, pink, letter-spaced.
   Reads like a judgment, not just a bullet. */
.not-verdict {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pink);
  white-space: nowrap;
  padding: 6px 12px;
  background: rgba(99,102,241,.10);
  border-radius: 100px;
}

/* Mic-drop closer — bigger, italic, with pink emphasis on the kill phrase */
.not-closer {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  max-width: 700px;
  margin: 0 auto;
  letter-spacing: -0.015em;
  line-height: 1.4;
}
.not-closer span {
  color: var(--pink);
  font-weight: 800;
}

/* Old h3 selector kept just in case anything else still uses it in this section */
.not-for h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--ink);
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}

/* (Removed: .compare-grid, .compare-col, .qualify-grid, .qualify-col,
   .results-section, .win-card — over-engineered patterns.) */

/* ═══ SERVICES ══════════════════════════════════════════════════ */
.services-section { padding: 100px 40px; background: var(--bg-2); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 6 cards in 2 rows × 3 cols */
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s, border-color .25s;
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  box-shadow: 0 18px 44px rgba(99,102,241,.18);
  transform: translateY(-4px);
  border-color: rgba(99,102,241,.45);
}
.svc-icon { width: 56px; height: 56px; margin-bottom: 20px; }
.service-card h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.service-card > p {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 16px;
}
.toggle-list { margin-top: auto; }
.toggle-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-2);
  margin-bottom: 8px;
  line-height: 1.55;
}
/* Phase 1 fix: replaced toggle-switch (looked like a SaaS feature flag)
   with a simple green check mark. Matches the rest of the page's
   visual language (problem section's plain ✔ characters). */
.tog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #16a34a;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
}
.tog::after { content: '✓'; }

/* ═══ BRIDGE — single thesis line between Not-For and How-It-Works
   Replaces the meaningless "Better/Bigger/Faster" word cycler.
   One eyebrow, one bold statement, one supporting line. Breathing. */
.bridge-section {
  padding: 100px 40px;
  text-align: center;
  background: #fff;
  max-width: 820px;
  margin: 0 auto;
}
.bridge-eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 18px;
}
.bridge-section h2 { margin-bottom: 22px; }
/* .bridge-line styled by the unified .section-header > p, .bridge-line rule above */

/* ═══ TESTIMONIALS ══════════════════════════════════════════════ */
.testimonials-section { padding: 100px 40px; background: var(--bg-2); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: var(--container);
  margin: 0 auto;
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s;
}
.testimonial-card:hover {
  box-shadow: 0 18px 44px rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.3);
  transform: translateY(-4px);
}
.quote-mark {
  width: 42px; height: 42px;
  color: var(--pink);
  opacity: .55;
  margin-bottom: 14px;
}
.test-quote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 24px;
  flex: 1;
  font-style: italic;
}
/* Phase 2 fix: dropped the fake initials-circle avatar. Author block is
   now clean typographic attribution — reads as honest, not templated. */
.test-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.test-author strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.test-author span {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* (Removed: .mid-cta, .who-section, .not-for — sections consolidated
   into .compare-grid and .qualify-grid above.) */

/* ═══ HOW IT WORKS / FORM ══════════════════════════════════════ */
.how-section { padding: 100px 40px; background: var(--bg-2); }   /* slate-50 for visual breath after bridge's white */
.how-section .section-header { margin-bottom: 60px; }
.how-section .contact-form { background: #fff; }                   /* form pops out of the slate bg */
.how-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
.how-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.how-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.step-num {
  font-size: 2.6rem;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 70px;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 2px;
}
.step-body h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.step-body p { font-size: 0.95rem; color: var(--muted); line-height: 1.55; }

/* Form */
.contact-form {
  background: var(--bg-2);
  padding: 32px 30px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.form-sub {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 22px;
}

/* Success state shown after successful contact submission */
.form-success {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 16px;
  padding: 28px 26px;
  color: #064e3b;
}
.form-success svg {
  width: 26px; height: 26px;
  color: #059669;
  flex-shrink: 0;
  margin-top: 2px;
}
.form-success strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #064e3b;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.form-success span {
  display: block;
  font-size: 0.95rem;
  color: #065f46;
  line-height: 1.55;
}
.cf-row { margin-bottom: 14px; }
.cf-row input,
.cf-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.94rem;
  font-family: inherit;
  outline: none;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.cf-row input:focus,
.cf-row textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.cf-row textarea { resize: vertical; min-height: 88px; }
.cf-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.cf-row-2 input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.94rem;
  font-family: inherit;
  outline: none;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.cf-row-2 input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.cf-label {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-2);
  margin-bottom: 6px;
  font-weight: 600;
}
.cf-radios {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cf-radios label {
  flex: 1;
  min-width: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--ink-2);
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s, background .15s;
}
.cf-radios label:hover { border-color: var(--pink); background: var(--bg-3); }
.cf-radios input { accent-color: var(--pink); }
.btn-send-lg {
  width: 100%;
  background: var(--grad-btn);
  color: #fff;
  border: none;
  padding: 16px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  box-shadow: 0 4px 16px rgba(99,102,241,.32);
  transition: box-shadow .2s, transform .15s;
}
.btn-send-lg:hover { box-shadow: 0 6px 22px rgba(99,102,241,.42); transform: translateY(-1px); }
.form-fine {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}

/* ═══ CTA BANNER (dark) ═════════════════════════════════════════ */
.cta-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2d1b4e 100%);
  color: #fff;
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(99,102,241,.18), transparent 60%);
  pointer-events: none;
}
.cta-banner-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.cta-banner h2 {
  margin-bottom: 16px;
  color: #fff;
}
.cta-banner p {
  font-size: 1.08rem;
  color: #cbd5e1;
  margin-bottom: 32px;
}
.cta-banner-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-on-dark.btn-wa-outline { border-color: #fff; color: #fff; }
.btn-on-dark.btn-wa-outline svg { fill: #fff; }
.btn-on-dark.btn-wa-outline:hover { background: rgba(255,255,255,.1); }

/* ═══ STICKY MOBILE CTA ═════════════════════════════════════════ */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(15,23,42,.1);
  padding: 10px 12px;
  gap: 8px;
  z-index: 90;
  /* Respect iOS Safari home-indicator safe-area */
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 6px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  min-height: 44px;
  min-width: 0;                                 /* allow shrink */
  flex-basis: 0;                                /* honor flex ratios at any width */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Call is the most-converting action — dominant weight */
.sticky-cta-call { flex-grow: 1.5; background: var(--grad-btn); color: #fff; }
.sticky-cta-wa   { flex-grow: 1;   background: #25d366; color: #fff; }
.sticky-cta-form { flex-grow: 1;   background: var(--ink); color: #fff; }

/* On narrow phones (≤420px — covers iPhone 14 Pro at 393px) tighten so labels never overflow */
@media (max-width: 420px) {
  .sticky-cta { padding: 8px 8px; gap: 6px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .sticky-cta-btn { font-size: 0.82rem; padding: 12px 4px; gap: 5px; }
}

/* ═══ ABOUT PAGE ════════════════════════════════════════════════ */
.about-hero {
  padding: 70px 40px 80px;
  background: linear-gradient(180deg, #fff 0%, #f5f5ff 100%);
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  right: -100px; top: -150px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
  pointer-events: none;
}
.about-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
.about-hero-text h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);   /* matches new display scale on home */
  font-weight: 800;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.032em;
  margin-bottom: 24px;
}
.about-hero .lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 30px;
}
.about-hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.about-hero-img { display: flex; justify-content: center; }
.about-photo-frame {
  width: 320px;
  aspect-ratio: 3/4;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #e0e7ff, #c7d2fe);
  box-shadow: 0 0 0 6px rgba(99,102,241,.1), 0 28px 60px rgba(15,23,42,.18);
}
.about-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* About stats strip */
.about-stats {
  background: var(--ink);
  padding: 40px 40px;
}
.about-stats-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.about-stat { text-align: center; color: #fff; }
.about-stat-num {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  line-height: 1;
}
.about-stat-lbl {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* About story */
.about-story { padding: 100px 40px; background: #fff; }
.about-story-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 60px;
  align-items: start;
}
.story-col h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 26px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.story-col p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.story-pull {
  font-size: 1.25rem !important;
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  border-left: 4px solid var(--pink);
  padding-left: 20px;
  margin-top: 26px !important;
}
.story-aside {
  background: var(--bg-2);
  border-radius: 16px;
  padding: 28px 26px;
  border: 1px solid var(--line);
}
.story-aside h3 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pink);
  margin-bottom: 18px;
}
.story-aside ul li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.story-aside ul li:last-child { border-bottom: none; }
.story-aside ul li span {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.story-aside ul li strong { font-size: 0.95rem; color: var(--ink); }

/* About approach / principles */
.about-approach { padding: 100px 40px; background: var(--bg-2); }
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
.principle-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 30px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow .25s, transform .25s;
}
.principle-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.principle-num {
  font-size: 2.2rem;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 14px;
  display: inline-block;
}
.principle-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.principle-card p {
  font-size: 0.96rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Credentials */
.about-credentials { padding: 100px 40px; background: #fff; }
.creds-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.creds-col h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 26px;
  letter-spacing: -0.02em;
}
.cert-list { display: flex; flex-direction: column; gap: 12px; }
.cert-list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.98rem;
  color: var(--ink);
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.cert-list li:last-child { border-bottom: none; }
.cert-tick {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(22,163,74,.12);
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cert-tick svg { width: 12px; height: 12px; }
.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tool-chip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 100px;
}

/* ═══ FOOTER ════════════════════════════════════════════════════
   Phase 1 fix: calmed the saturated pink/red/purple gradient down to
   a quiet slate. Reads as senior consultant footer, not WP theme. */
.footer {
  background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%);
  padding: 70px 40px 28px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  max-width: var(--container);
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1.2fr;
  gap: 50px;
}
.foot-col h4 {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-bottom: 18px;
}
.footer-logo-name {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.footer-logo-name span { color: var(--pink); font-weight: 900; font-style: italic; }
.foot-bio {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 360px;
}
.footer-cert { width: 130px; opacity: .85; }
.foot-links li {
  font-size: 0.93rem;
  color: var(--ink-2);
  margin-bottom: 10px;
  line-height: 1.5;
}
/* 2-column treatment for the long Industries list */
.foot-industries-list {
  columns: 2;
  column-gap: 20px;
}
.foot-industries-list li { break-inside: avoid; }
.foot-links a {
  color: var(--ink-2);
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.foot-links a:hover { color: var(--pink); }
.foot-contact svg { width: 14px; height: 14px; fill: var(--pink); flex-shrink: 0; }
.footer-copy {
  max-width: var(--container);
  margin: 0 auto;
  border-top: 1px solid rgba(15,23,42,.1);
  padding-top: 22px;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copy strong { color: var(--ink); }
.foot-meta { color: var(--muted); }

/* ═══ RESPONSIVE ════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid       { grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; gap: 36px; }
}

@media (max-width: 960px) {
  .hero { padding: 50px 24px 80px; min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 60px; text-align: left; }
  .hero-visual { order: -1; padding: 20px; }
  .hero-photo-card { width: 280px; }
  .stat-1 { left: -20px; }
  .stat-2 { left: -28px; }
  .stat-3 { right: -20px; }
  .hero-headline { font-size: 2.1rem; }

  .about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .about-hero-img { order: -1; }
  .about-photo-frame { width: 240px; }

  .about-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .about-story-inner { grid-template-columns: 1fr; gap: 32px; }

  .principles-grid { grid-template-columns: 1fr; }
  .creds-inner { grid-template-columns: 1fr; gap: 40px; }

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

  .problem-section { padding: 60px 24px; }
  .problem-cols   { grid-template-columns: 1fr; gap: 0; max-width: 460px; }
  .solution-section { padding: 60px 24px; }
  .mid-cta { padding: 60px 24px; }
  .who-section, .not-for { padding: 60px 24px; }
  .who-grid { grid-template-columns: 1fr 1fr; }
  .how-section { padding: 60px 24px; }
  .how-layout { grid-template-columns: 1fr; gap: 40px; }
  .services-section, .testimonials-section,
  .about-story, .about-approach, .about-credentials { padding: 70px 24px; }
  .cta-banner { padding: 60px 24px; }

  .footer { padding: 50px 24px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .logo-strip { gap: 30px; }
  .logo-strip img { height: 30px; }
  .dark-quote { padding: 32px 24px; }

  /* Sticky mobile CTA appears */
  .sticky-cta { display: flex; }
  body { padding-bottom: 76px; }  /* prevent overlap */
}

@media (max-width: 840px) {
  .nav-links, .nav-phone { display: none; }
  .nav-hamburger { display: flex; }
  .nav-inner { padding: 0 20px; gap: 12px; }
  .nav-cta { padding: 9px 14px; font-size: 0.84rem; }
}
@media (max-width: 480px) {
  /* At very narrow widths the sticky CTA bar at the bottom covers contact —
     hide the header CTA to avoid the logo+CTA+hamburger overflowing. */
  .nav-cta { display: none; }
}

@media (max-width: 600px) {
  .services-grid     { grid-template-columns: 1fr; }
  .who-grid          { grid-template-columns: 1fr; }
  .cf-row-2          { grid-template-columns: 1fr; }
  .footer-grid       { grid-template-columns: 1fr; }
  .about-stats-inner { grid-template-columns: 1fr 1fr; }
  .footer-copy       { flex-direction: column; gap: 6px; text-align: center; }

  /* Not-For list: stack verdict below condition on narrow screens */
  .not-list li { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   ELEMENTOR COMPATIBILITY OVERRIDES
   ─────────────────────────────────────────────────────────────────
   Each section of the migrated page lives inside an Elementor Container
   (.e-con) which Elementor wraps in flex defaults + padding. These
   overrides cancel those defaults so our original CSS section styles
   (.hero, .problem-section, etc.) render edge-to-edge as in the source.
   ═══════════════════════════════════════════════════════════════════ */

/* Sections built from HTML widgets (the legacy approach) — these still
   need their parent Elementor container to be a transparent wrapper so
   the section <div> can use the original CSS layout. The pure-widget
   sections (e.g. the new hero) intentionally do NOT match here so
   Elementor's own padding/background settings drive them. */
body.elementor-page .elementor-widget-html:only-child {
  /* HTML-widget-only containers: cancel Elementor's container padding
     so the HTML's own section padding controls spacing. */
}
.elementor-element > .logo-strip-section,
.elementor-element > .problem-section,
.elementor-element > .solution-section,
.elementor-element > .services-section,
.elementor-element > .mid-cta,
.elementor-element > .testimonials-section,
.elementor-element > .who-section,
.elementor-element > .not-for,
.elementor-element > .bridge-section,
.elementor-element > .how-section,
.elementor-element > .cta-banner,
.elementor-element > .about-hero,
.elementor-element > .about-stats,
.elementor-element > .about-story,
.elementor-element > .about-approach,
.elementor-element > .about-credentials,
.elementor-element > .footer {
  width: 100%;
}
/* Containers that ONLY hold an HTML widget should be transparent
   (no padding) so the inner section's own CSS padding wins. */
.elementor-element.e-con:has(> .elementor-widget-html:only-child) {
  padding: 0 !important;
}

/* HTML widgets that contain entire sections fill their container fully. */
.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container {
  width: 100%;
}

/* Header/footer wraps shouldn't add their own layout. */
.site-header-wrap,
.site-header-wrap > .e-con-inner,
.site-footer-wrap,
.site-footer-wrap > .e-con-inner {
  display: block;
  width: 100%;
}

/* Center-aligned Elementor headings inside our centered sections. */
.mid-cta .elementor-widget-heading .elementor-heading-title,
.cta-banner .elementor-widget-heading .elementor-heading-title,
.bridge-section .elementor-widget-heading .elementor-heading-title {
  text-align: center;
}
.mid-cta .elementor-widget-heading .elementor-heading-title {
  margin: 0 auto 36px;
  max-width: 760px;
}
.cta-banner .elementor-widget-heading .elementor-heading-title { margin: 0 0 16px; color: #fff; }
.bridge-section .elementor-widget-heading .elementor-heading-title { margin: 0 0 22px; }

/* Solution section — every widget centered. */
.solution-section .elementor-widget { width: 100%; text-align: center; }

/* Text-editor widgets inside cta-banner and bridge. */
.bridge-section .elementor-widget-text-editor,
.cta-banner .elementor-widget-text-editor { text-align: center; }
.cta-banner .elementor-widget-text-editor p {
  font-size: 1.08rem;
  color: #cbd5e1;
  margin: 0 0 32px;
}

/* How-section 2-column desktop layout. !important needed because
   Elementor inlines flex styles on .e-con with high specificity. */
@media (min-width: 961px) {
  .how-section .how-layout-wrap.e-con,
  .how-section .e-con.how-layout-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1.1fr !important;
    gap: 70px !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    align-items: start !important;
  }
}
@media (max-width: 960px) {
  .how-section .how-layout-wrap.e-con,
  .how-section .e-con.how-layout-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
  }
}

/* Elementor Pro Form — restyle to match the original .contact-form. */
.contact-form-wrap .elementor-form {
  background: #fff;
  padding: 32px 30px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.contact-form-wrap .elementor-form .elementor-field-group { margin-bottom: 14px; }
.contact-form-wrap .elementor-form label {
  font-size: 0.82rem;
  color: var(--ink-2);
  margin-bottom: 6px;
  font-weight: 600;
}
.contact-form-wrap .elementor-form input[type="text"],
.contact-form-wrap .elementor-form input[type="tel"],
.contact-form-wrap .elementor-form input[type="email"],
.contact-form-wrap .elementor-form input[type="url"],
.contact-form-wrap .elementor-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.94rem;
  font-family: inherit;
  outline: none;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.contact-form-wrap .elementor-form input:focus,
.contact-form-wrap .elementor-form textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.contact-form-wrap .elementor-form textarea { resize: vertical; min-height: 88px; }
.contact-form-wrap .elementor-button {
  width: 100%;
  background: var(--grad-btn);
  color: #fff;
  border: none;
  padding: 16px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 8px;
  box-shadow: 0 4px 16px rgba(99,102,241,.32);
  transition: box-shadow .2s, transform .15s;
}
.contact-form-wrap .elementor-button:hover {
  box-shadow: 0 6px 22px rgba(99,102,241,.42);
  transform: translateY(-1px);
}
.contact-form-wrap .form-sub {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 22px;
}
.contact-form-wrap .form-fine {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}
.contact-form-wrap .elementor-field-type-radio .elementor-field-subgroup {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.contact-form-wrap .elementor-field-type-radio .elementor-field-option {
  flex: 1;
  min-width: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.contact-form-wrap .elementor-field-type-radio .elementor-field-option:hover {
  border-color: var(--pink);
  background: var(--bg-3);
}
.contact-form-wrap .elementor-field-type-radio input[type="radio"] { accent-color: var(--pink); }
.contact-form-wrap .elementor-field-type-radio label {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-2);
  cursor: pointer;
}

/* Sticky CTA: hidden by default, shown only ≤960px. */
.sticky-cta { display: none; }
@media (max-width: 960px) {
  .sticky-cta { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   The hero is built from real Elementor widgets (Heading, Text-Editor,
   Icon List, Button, Image) inside nested Containers. These rules
   translate the original .hero-* design onto Elementor's wrapper
   markup (.elementor-widget, .elementor-heading-title, etc.).
   ═══════════════════════════════════════════════════════════════════ */

/* Outer .hero container — keep min-height + decorative blobs. */
.elementor-element > .hero,
.e-con.hero {
  position: relative;
  min-height: calc(100vh - 72px);
  overflow: hidden;
}
.e-con.hero::before,
.e-con.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* Override Elementor's default inset:0 on container pseudo-elements
     so our explicit right/top/bottom positioning takes effect. */
  left: auto !important;
  top: auto;
  right: auto;
  bottom: auto;
}
.e-con.hero::before {
  right: -80px !important;
  top: -100px !important;
  width: 700px;
  height: 700px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(79,70,229,.22) 0%,
    rgba(99,102,241,.18) 40%,
    rgba(139,92,246,.10) 70%,
    transparent 90%);
}
.e-con.hero::after {
  right: 180px !important;
  bottom: -120px !important;
  width: 460px;
  height: 460px;
  background: radial-gradient(ellipse,
    rgba(99,102,241,.14) 0%,
    transparent 70%);
}

/* hero-grid (inner container) — content above the blobs. */
.e-con.hero-grid { position: relative; z-index: 1; }

/* hero-content (left column) — let widget vertical spacing use the
   original .hero-* margins (defined further down). */
.e-con.hero-content {
  max-width: 600px;
}

/* ── Badge ─────────────────────────────────────────────────────── */
.e-con.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(99,102,241,.25);
  color: var(--pink);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 26px;
  box-shadow: 0 4px 16px rgba(99,102,241,.12);
  width: auto !important;
}
.e-con.hero-badge .elementor-widget-heading {
  width: auto;
}
.e-con.hero-badge .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin: 0;
}

/* ── Headline ─────────────────────────────────────────────────── */
.elementor-widget-heading.hero-headline { margin-bottom: 26px; }
.elementor-widget-heading.hero-headline .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0;
}

/* ── Lede ─────────────────────────────────────────────────────── */
.elementor-widget-text-editor.hero-lede-wrap { margin-bottom: 30px; max-width: 540px; }
.elementor-widget-text-editor.hero-lede-wrap p {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0;
}
.elementor-widget-text-editor.hero-lede-wrap strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── Icon-list checks ─────────────────────────────────────────── */
.elementor-widget-icon-list.hero-checks-list { margin-bottom: 36px; }
.hero-checks-list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-checks-list .elementor-icon-list-item { padding: 0 !important; }
.hero-checks-list .elementor-icon-list-item:not(:last-child)::after { display: none; }
.hero-checks-list .elementor-icon-list-item a,
.hero-checks-list .elementor-icon-list-item > span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
}
.hero-checks-list .elementor-icon-list-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(22,163,74,.3);
}
.hero-checks-list .elementor-icon-list-icon i,
.hero-checks-list .elementor-icon-list-icon svg {
  color: #fff !important;
  fill: #fff !important;
  font-size: 10px !important;
  width: 12px;
  height: 12px;
}
.hero-checks-list .elementor-icon-list-text {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
  font-family: var(--font-body);
}

/* ── hero-cta row ─────────────────────────────────────────────── */
/* Hero CTA row — Elementor's `.elementor-element` reset zeros out margins
   at higher specificity than `.hero-cta` alone, so force the spacing here.
   Without this, the primary button sits flush against the check-list. */
.hero-content > .e-con.hero-cta,
.hero-content > .hero-cta {
  margin-top: 28px !important;
  margin-bottom: 36px !important;
}
/* And ensure the check-list ALSO contributes its bottom spacing, in case
   the parent flex-gap reset eats it. */
.hero-content > .hero-checks-list,
.hero-content > .elementor-widget-icon-list.hero-checks-list {
  margin-bottom: 8px !important;
}
/* Credstrip gets a clean separator above it */
.hero-content > .hero-credstrip,
.hero-content > .elementor-widget-heading.hero-credstrip {
  margin-top: 8px !important;
}

/* Restyle the Primary button to match .btn-primary. */
.elementor-widget-button.btn-primary .elementor-button {
  background: var(--grad-btn);
  color: #fff;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0;
  box-shadow: 0 6px 22px rgba(99,102,241,.32);
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: box-shadow .2s, transform .15s;
  line-height: 1.2;
}
.elementor-widget-button.btn-primary .elementor-button:hover {
  box-shadow: 0 10px 30px rgba(99,102,241,.45);
  transform: translateY(-1px);
  color: #fff;
}
.elementor-widget-button.btn-primary .elementor-button-icon i {
  color: #fff;
  font-size: 16px;
}

/* Restyle WhatsApp button as a text link. */
.elementor-widget-button.btn-wa-text .elementor-button {
  background: transparent;
  color: var(--pink);
  padding: 4px 2px;
  border: none;
  border-bottom: 1px solid transparent;
  font-size: 0.97rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0;
  box-shadow: none;
  border-radius: 0;
  transition: border-color .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.elementor-widget-button.btn-wa-text .elementor-button:hover {
  background: transparent;
  color: var(--pink);
  border-bottom-color: var(--pink);
}
.elementor-widget-button.btn-wa-text .elementor-button-icon i {
  color: var(--pink);
  font-size: 16px;
}

/* ── Credibility strip ────────────────────────────────────────── */
.elementor-widget-heading.hero-credstrip {
  padding-top: 28px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 540px;
}
.elementor-widget-heading.hero-credstrip .elementor-heading-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0;
}
.elementor-widget-heading.hero-credstrip strong {
  color: var(--ink);
  font-weight: 800;
  margin-right: 4px;
  font-family: var(--font-display);
}
.elementor-widget-heading.hero-credstrip .csep {
  color: var(--line);
  font-weight: 400;
}

/* ── Photo card / frame ───────────────────────────────────────── */
.e-con.hero-photo-card {
  position: relative;
  padding: 0;
}
/* Dot-grid background behind the photo (replaces .hero-grid-bg div). */
.e-con.hero-photo-card::before {
  content: '';
  position: absolute;
  inset: -24px;
  background-image:
    linear-gradient(rgba(99,102,241,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.10) 1px, transparent 1px);
  background-size: 28px 28px;
  border-radius: 36px;
  z-index: 0;
  pointer-events: none;
}
.e-con.hero-photo-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  overflow: hidden;
  background: #f1f4ff;
  box-shadow:
    0 0 0 8px rgba(99,102,241,.10),
    0 30px 70px rgba(99,102,241,.28);
  padding: 0;
}
.e-con.hero-photo-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(99,102,241,.10) 100%);
  z-index: 1;
}
.e-con.hero-photo-frame .elementor-widget-image {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;        /* sits above the ::before gradient overlay */
}
.e-con.hero-photo-frame .elementor-widget-container {
  width: 100%;
  height: 100%;
}
.e-con.hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Reset Elementor's widget vertical spacing inside the hero so our
   manual margins drive the rhythm. */
.e-con.hero-content > .elementor-widget:not(:last-child) {
  margin-bottom: 0;
}
.e-con.hero-content {
  --widgets-spacing: 0;
  --widgets-spacing-row: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   LOGO STRIP — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   Eyebrow is a Heading widget; logos are Image widgets in a flex row.
   Each image gets a specific height so the row reads as naturally
   composed rather than rigidly aligned.
   ═══════════════════════════════════════════════════════════════════ */

/* Outer section: keep Elementor's background/padding/border from settings,
   only override what's needed to match the source design. */
.e-con.logo-strip-section {
  text-align: center;
}

/* Eyebrow line (Heading widget rendered as <p>) */
.elementor-widget-heading.strip-eyebrow .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
  line-height: 1.4;
}

/* Logo row sizing — replicate the source's per-image heights so the row
   feels naturally composed. Elementor wraps each image in
   .elementor-widget-image > .elementor-widget-container > img */
.e-con.logo-strip {
  width: 100%;
}
.e-con.logo-strip .elementor-widget-image {
  flex: 0 0 auto;
  width: auto;
}
.e-con.logo-strip .elementor-widget-image img,
.e-con.logo-strip img.logo-strip-img {
  object-fit: contain;
  opacity: 0.92;
  transition: transform .25s, opacity .25s;
  width: auto;
  max-width: 100%;
}
.e-con.logo-strip > .elementor-widget-image:nth-child(1) img { height: 46px; }
.e-con.logo-strip > .elementor-widget-image:nth-child(2) img { height: 40px; }
.e-con.logo-strip > .elementor-widget-image:nth-child(3) img { height: 34px; }
.e-con.logo-strip > .elementor-widget-image:nth-child(4) img { height: 42px; }
.e-con.logo-strip .elementor-widget-image:hover img {
  opacity: 1;
  transform: translateY(-2px);
}

/* Mobile: smaller, tighter */
@media (max-width: 960px) {
  .e-con.logo-strip { gap: 30px !important; }
  .e-con.logo-strip > .elementor-widget-image img { height: 30px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROBLEM SECTION — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   Headline + 2 icon lists (✔ / ✘) + result line + dark-quote card.
   ═══════════════════════════════════════════════════════════════════ */

/* Outer section */
.e-con.problem-section { text-align: center; }

/* Headline — apply existing .problem-h2 typography to the
   Elementor heading's title element. */
.elementor-widget-heading.problem-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 0 56px;
}

/* ✔ / ✘ icon lists: tighter rhythm matching original .prob-item */
.elementor-widget-icon-list.prob-check-list .elementor-icon-list-text,
.elementor-widget-icon-list.prob-x-list .elementor-icon-list-text {
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 500;
  font-family: var(--font-body);
}
.elementor-widget-icon-list.prob-check-list .elementor-icon-list-item,
.elementor-widget-icon-list.prob-x-list .elementor-icon-list-item {
  padding: 6px 0 !important;
}
.elementor-widget-icon-list.prob-check-list .elementor-icon-list-item a,
.elementor-widget-icon-list.prob-x-list .elementor-icon-list-item a {
  display: flex;
  align-items: center;
  gap: 14px;
}
.elementor-widget-icon-list.prob-check-list .elementor-icon-list-icon i,
.elementor-widget-icon-list.prob-x-list     .elementor-icon-list-icon i,
.elementor-widget-icon-list.prob-check-list .elementor-icon-list-icon svg,
.elementor-widget-icon-list.prob-x-list     .elementor-icon-list-icon svg {
  font-size: 18px !important;
  width: 18px;
  height: 18px;
  font-weight: 700;
}

/* Two-column wrapper — natural alignment when both icon lists have
   the same number of items (4). */
.e-con.problem-cols {
  margin: 0 auto 32px;
}

/* Result line */
.elementor-widget-heading.result-line .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--ink-2);
  font-weight: 400;
  line-height: 1.6;
  margin: 20px 0 48px;
}
.elementor-widget-heading.result-line strong {
  color: var(--ink);
  font-weight: 700;
}

/* Dark quote card */
.e-con.dark-quote {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15,23,42,.18);
  text-align: center;
  margin: 0 auto;
}
.elementor-widget-heading.dark-quote-intro .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  color: #cbd5e1;
  margin: 0;
}
.elementor-widget-heading.dark-quote-thesis .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.9vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0;
}
.elementor-widget-heading.dark-quote-thesis .elementor-heading-title span {
  color: var(--pink);
}

/* ═══════════════════════════════════════════════════════════════════
   SOLUTION SECTION — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   Centered narrow column: label + sub-heading + 3-arrow list + tagline.
   ═══════════════════════════════════════════════════════════════════ */

/* Outer section keeps padding via Elementor container settings. */
.e-con.solution-section { text-align: center; }

/* Label — rendered as a centered <p>, styled to read as uppercase block. */
.elementor-widget-heading.solution-label .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 36px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

/* "I focus on:" sub-heading */
.elementor-widget-heading.solution-focus .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 22px;
}

/* 3-arrow list — render with left-aligned text inside a width-fit widget,
   icon coloured pink with the arrow character. */
.elementor-widget-icon-list.solution-list {
  margin: 0 auto 40px;
  width: auto;
  display: inline-block;
}
/* Suppress the original .solution-list li::before "→" character —
   Elementor's icon-list provides its own Font Awesome arrow icon. */
.elementor-widget-icon-list.solution-list .elementor-icon-list-item::before,
.elementor-widget-icon-list.solution-list li::before {
  content: none !important;
  display: none !important;
}
.elementor-widget-icon-list.solution-list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.elementor-widget-icon-list.solution-list .elementor-icon-list-item { padding: 0 !important; }
.elementor-widget-icon-list.solution-list .elementor-icon-list-item a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.elementor-widget-icon-list.solution-list .elementor-icon-list-icon i,
.elementor-widget-icon-list.solution-list .elementor-icon-list-icon svg {
  color: var(--pink) !important;
  fill: var(--pink) !important;
  font-size: 16px !important;
  font-weight: 700;
  width: 16px;
  height: 16px;
  margin-top: 4px;
}
.elementor-widget-icon-list.solution-list .elementor-icon-list-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Tagline — italic, weight 800 */
.elementor-widget-heading.solution-tagline { margin-top: 20px; }
.elementor-widget-heading.solution-tagline .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  font-style: italic;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICES SECTION — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   Section header (eyebrow + h2 + lede) + 6 cards in a 3×2 grid.
   Each card is an Elementor Container with Image + Heading + Text +
   Icon List inside.
   ═══════════════════════════════════════════════════════════════════ */

/* Section header — eyebrow, h2 with .accent span, lede */
.e-con.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.elementor-widget-heading.services-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 14px 0 20px;
}
.elementor-widget-heading.services-h2 .accent { color: var(--pink); }

.elementor-widget-text-editor.services-lede p {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto;
}

/* Eyebrow (reused styling for any Heading widget with .eyebrow class) */
.elementor-widget-heading.eyebrow .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0;
  line-height: 1.4;
}

/* Services 3×2 grid — direct grid on the container (no .e-con-inner) */
.e-con.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 960px) {
  .e-con.services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .e-con.services-grid { grid-template-columns: 1fr !important; }
}

/* Service card — fill the grid cell. */
.e-con.service-card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s, border-color .25s;
  text-align: left;
  width: 100% !important;
  align-self: stretch;
  justify-self: stretch;
}
.e-con.service-card > * { width: 100%; }
.e-con.service-card:hover {
  box-shadow: 0 18px 44px rgba(99,102,241,.18);
  transform: translateY(-4px);
  border-color: rgba(99,102,241,.45) !important;
}

/* Icon image inside card */
.e-con.service-card .elementor-widget-image.svc-icon-wrap {
  margin-bottom: 20px;
  width: auto;
}
.e-con.service-card .elementor-widget-image.svc-icon-wrap img {
  width: 56px;
  height: 56px;
}

/* Title */
.elementor-widget-heading.svc-title .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

/* Description */
.elementor-widget-text-editor.svc-desc p {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* Bullet list */
.elementor-widget-icon-list.svc-toggle-list {
  margin-top: auto;
  width: 100%;
}
.elementor-widget-icon-list.svc-toggle-list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.elementor-widget-icon-list.svc-toggle-list .elementor-icon-list-item { padding: 0 !important; }
.elementor-widget-icon-list.svc-toggle-list .elementor-icon-list-item::before,
.elementor-widget-icon-list.svc-toggle-list li::before {
  content: none !important;
  display: none !important;
}
.elementor-widget-icon-list.svc-toggle-list .elementor-icon-list-item a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.elementor-widget-icon-list.svc-toggle-list .elementor-icon-list-icon i,
.elementor-widget-icon-list.svc-toggle-list .elementor-icon-list-icon svg {
  color: #16a34a !important;
  fill: #16a34a !important;
  font-size: 14px !important;
  width: 14px;
  height: 14px;
  margin-top: 4px;
}
.elementor-widget-icon-list.svc-toggle-list .elementor-icon-list-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════
   MID-CTA SECTION — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   H2 with gradient highlight + phone pill button + WhatsApp circle.
   ═══════════════════════════════════════════════════════════════════ */

.e-con.mid-cta { text-align: center; }

.elementor-widget-heading.mid-cta-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 auto 36px;
  max-width: 760px;
}

/* Phone button — gradient pill, white text */
.elementor-widget-button.btn-phone .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--grad-btn);
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0;
  box-shadow: 0 4px 16px rgba(99,102,241,.3);
  border: none;
  line-height: 1.2;
  transition: box-shadow .2s, transform .15s;
}
.elementor-widget-button.btn-phone .elementor-button:hover {
  box-shadow: 0 10px 30px rgba(99,102,241,.45);
  transform: translateY(-1px);
  color: #fff;
}
.elementor-widget-button.btn-phone .elementor-button-icon i {
  color: #fff;
  font-size: 16px;
}

/* WhatsApp circle button — 52×52, pink border, pink icon, no label */
.elementor-widget-button.btn-wa .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--pink);
  border-radius: 50%;
  background: transparent;
  color: var(--pink);
  transition: background .2s;
  box-shadow: none;
}
.elementor-widget-button.btn-wa .elementor-button:hover {
  background: var(--bg-3);
}
.elementor-widget-button.btn-wa .elementor-button-icon {
  margin: 0;
}
.elementor-widget-button.btn-wa .elementor-button-icon i {
  color: var(--pink);
  font-size: 26px;
}
.elementor-widget-button.btn-wa .elementor-button-text {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   TESTIMONIALS SECTION — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   Section header + 3-card grid; each card has quote icon + body +
   author block with top border.
   ═══════════════════════════════════════════════════════════════════ */

/* H2 + lede (reuse the section-header structure styles above) */
.elementor-widget-heading.testimonials-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 14px 0 20px;
}
.elementor-widget-text-editor.testimonials-lede p {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto;
}

/* 3-column grid */
.e-con.testimonials-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 1100px) {
  .e-con.testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 960px) {
  .e-con.testimonials-grid { grid-template-columns: 1fr !important; }
}

/* Testimonial card — fill the grid cell, hover-lift */
.e-con.testimonial-card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s, border-color .25s;
  text-align: left;
  width: 100% !important;
  place-self: stretch;
}
.e-con.testimonial-card:hover {
  box-shadow: 0 18px 44px rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.3) !important;
  transform: translateY(-4px);
}

/* Quote icon — pink at 55% opacity, left-aligned */
.elementor-widget-icon.quote-mark {
  width: 100%;
  margin-bottom: 14px;
}
.elementor-widget-icon.quote-mark,
.elementor-widget-icon.quote-mark .elementor-widget-container {
  text-align: left !important;
}
.elementor-widget-icon.quote-mark .elementor-icon {
  color: var(--pink);
  opacity: 0.55;
  font-size: 42px;
  display: inline-block;
}
.elementor-widget-icon.quote-mark .elementor-icon i,
.elementor-widget-icon.quote-mark .elementor-icon svg {
  width: 42px;
  height: 42px;
}

/* Quote body */
.elementor-widget-text-editor.test-quote-wrap {
  width: 100%;
  margin-bottom: 24px;
  flex: 1;
}
.elementor-widget-text-editor.test-quote-wrap blockquote {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  font-style: italic;
  margin: 0;
  padding: 0;
  border: none;
  quotes: none;
}

/* Author block (border-top, padded) */
.e-con.test-author {
  border-top: 1px solid var(--line);
  width: 100%;
}
.elementor-widget-heading.test-name .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.4;
}
.elementor-widget-heading.test-role .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
  font-weight: 400;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   WHO-FOR SECTION — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   H2 + 6 industry cards in a 3-column grid; each card is a Button
   widget styled as a pink-bordered pill.
   ═══════════════════════════════════════════════════════════════════ */

.e-con.who-section { text-align: center; }

.elementor-widget-heading.who-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 0 48px;
}

/* 3-column grid */
.e-con.who-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 960px) {
  .e-con.who-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .e-con.who-grid { grid-template-columns: 1fr !important; }
}

/* Each card is a Button widget — restyle as a pink-bordered card.
   First, null the source .who-card border/padding rules that would
   otherwise double up on the Elementor widget wrapper. */
.elementor-widget-button.who-card {
  width: 100%;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.elementor-widget-button.who-card .elementor-button-wrapper {
  width: 100%;
}
.elementor-widget-button.who-card .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 70px;
  padding: 22px 24px;
  border: 1.5px solid var(--pink);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0;
  box-shadow: none;
  white-space: normal;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.elementor-widget-button.who-card .elementor-button:hover {
  background: #fff0f7;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(99,102,241,.15);
}

/* ═══════════════════════════════════════════════════════════════════
   NOT-FOR SECTION — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   H2 with strikethrough NOT + 3 list-item rows + italic closer.
   ═══════════════════════════════════════════════════════════════════ */

.e-con.not-for { text-align: center; }

/* H2 — same display-font system, with .strike span pink line-through */
.elementor-widget-heading.not-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 0 56px;
}
.elementor-widget-heading.not-h2 .strike {
  text-decoration: line-through;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--pink);
  color: var(--pink);
}

/* List wrapper */
.e-con.not-list {
  max-width: 700px;
  margin: 0 auto 56px;
  width: 100%;
}

/* Each list-item row — bordered between items */
.e-con.not-list-item {
  border-bottom: 1px solid #d8dffe;
  text-align: left;
}
.e-con.not-list-item.is-last { border-bottom: none; }

/* Condition (left) — bold disqualifier */
.elementor-widget-heading.not-cond .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  margin: 0;
  flex: 1;
}
.elementor-widget-heading.not-cond {
  flex: 1;
  text-align: left;
}

/* Verdict (right) — small pink pill */
.elementor-widget-heading.not-verdict { flex: 0 0 auto; }
.elementor-widget-heading.not-verdict .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pink);
  white-space: nowrap;
  padding: 6px 12px;
  background: rgba(99,102,241,.10);
  border-radius: 100px;
  display: inline-block;
  margin: 0;
}

/* Closer — italic, display font, with pink emphasis on the closing phrase */
.elementor-widget-heading.not-closer .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  max-width: 700px;
  margin: 0 auto;
  letter-spacing: -0.015em;
  line-height: 1.4;
}
.elementor-widget-heading.not-closer .elementor-heading-title span {
  color: var(--pink);
  font-weight: 800;
}

/* Mobile: stack condition + verdict */
@media (max-width: 600px) {
  .e-con.not-list-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BRIDGE SECTION — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   Eyebrow + H2 + lede in a centered narrow column.
   ═══════════════════════════════════════════════════════════════════ */

.e-con.bridge-section { text-align: center; }

/* Eyebrow */
.elementor-widget-heading.bridge-eyebrow .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 18px;
  line-height: 1.4;
}

/* H2 */
.elementor-widget-heading.bridge-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 auto 22px;
  max-width: 820px;
}

/* Lede — center widget and constrain max-width. Needs !important
   because Elementor's container CSS sets --container-widget-width on
   widgets which can win specificity. */
.elementor-widget-text-editor.bridge-line {
  max-width: 640px !important;
  width: 100%;
  align-self: center !important;
}
.elementor-widget-text-editor.bridge-line p {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   PROCESS STEPS SECTION — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   Section header + 4 numbered steps in a horizontal row.
   ═══════════════════════════════════════════════════════════════════ */

.e-con.process-section { text-align: center; }

.elementor-widget-heading.process-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 14px 0 20px;
}
.elementor-widget-text-editor.process-lede {
  max-width: 640px !important;
  width: 100%;
  align-self: center !important;
}
.elementor-widget-text-editor.process-lede p {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0;
  text-align: center;
}

/* 4-column horizontal grid */
.e-con.process-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 960px) {
  .e-con.process-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 40px !important; }
}
@media (max-width: 560px) {
  .e-con.process-grid { grid-template-columns: 1fr !important; }
}

/* Each step column */
.e-con.process-step {
  text-align: left;
  width: 100% !important;
  place-self: stretch;
}

/* Big gradient number */
.elementor-widget-heading.step-num .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 16px;
  display: inline-block;
}

/* Step title */
.elementor-widget-heading.step-title .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  line-height: 1.3;
}

/* Step description */
.elementor-widget-text-editor.step-desc { width: 100%; }
.elementor-widget-text-editor.step-desc p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   MULTI-STEP CONTACT FORM
   ─────────────────────────────────────────────────────────────────
   Calendly-style wizard: one question per step, big choice buttons,
   smooth slide transitions, progress bar.
   ═══════════════════════════════════════════════════════════════════ */

.nd-form-wrap {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 30px 70px rgba(15,23,42,.08);
  position: relative;
}
.nd-noscript { color: var(--ink-2); }

/* Progress */
.nd-progress {
  height: 4px;
  background: var(--line);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 8px;
}
.nd-progress-bar {
  height: 100%;
  width: 14%;
  background: var(--grad-btn);
  border-radius: 100px;
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.nd-step-count {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}

/* Step container — only the active one is shown, with a slide-in animation */
.nd-step {
  display: none;
  animation: ndStepIn .32s cubic-bezier(.2,.8,.2,1);
}
.nd-step.is-active { display: block; }
@keyframes ndStepIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Question + help text */
.nd-q {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.nd-q-help {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Choice options (big tap targets, Calendly-style) */
.nd-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.nd-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .nd-options-grid { grid-template-columns: 1fr; }
}

.nd-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  font-weight: 500;
  user-select: none;
}
.nd-option:hover {
  border-color: var(--pink);
  background: var(--bg-3);
}
.nd-option:has(input:checked) {
  border-color: var(--pink);
  background: var(--bg-3);
  box-shadow: 0 0 0 4px rgba(99,102,241,.10);
  font-weight: 600;
}
.nd-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
  position: relative;
  cursor: pointer;
}
.nd-option input[type="radio"]:checked {
  border-color: var(--pink);
  background: var(--pink);
  box-shadow: inset 0 0 0 3px #fff;
}

/* Single-input steps (URL, textarea, contact info) */
.nd-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.nd-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.nd-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.nd-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nd-field { display: flex; flex-direction: column; gap: 6px; }
.nd-field > span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
}

/* Skip-link */
.nd-skip {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.nd-skip-btn {
  background: none;
  border: none;
  color: var(--pink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nd-skip-btn:hover { color: var(--pink-2); }

/* Hidden honeypot */
.nd-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Navigation row */
.nd-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.nd-back {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  padding: 12px 4px;
}
.nd-back:hover { color: var(--ink); }
.nd-next,
.nd-submit {
  background: var(--grad-btn);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: auto;
  box-shadow: 0 6px 22px rgba(99,102,241,.32);
  transition: box-shadow .2s, transform .15s;
}
/* Browser default [hidden] {display:none} isn't winning against the .nd-*
   class rules above on some setups. Make it explicit. */
.nd-next[hidden],
.nd-submit[hidden],
.nd-back[hidden],
.nd-step[hidden] { display: none !important; }
.nd-next:hover,
.nd-submit:hover {
  box-shadow: 0 10px 30px rgba(99,102,241,.45);
  transform: translateY(-1px);
}
.nd-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Inline error */
.nd-error {
  margin: 16px 0 0;
  font-size: 0.88rem;
  color: #b91c1c;
  min-height: 1.2em;
  opacity: 0;
  transition: opacity .15s;
}
.nd-error.is-visible { opacity: 1; }

/* Success block */
.nd-success {
  text-align: center;
  padding: 16px 0;
}
.nd-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.nd-success-icon svg { width: 32px; height: 32px; }
.nd-success h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.nd-success p {
  font-size: 0.98rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 10px;
}
.nd-success .nd-fine { font-size: 0.85rem; color: var(--muted); margin-top: 16px; }
.nd-success a { color: var(--pink); font-weight: 600; }

@media (max-width: 560px) {
  .nd-form-wrap { padding: 28px 22px; border-radius: 16px; }
  .nd-q { font-size: 1.25rem; }
}

/* Form section header (reuses the .form-h2 / .form-lede classes set in builder) */
.e-con.contact-form-section { text-align: center; }
.elementor-widget-heading.form-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 14px 0 20px;
}
.elementor-widget-text-editor.form-lede {
  max-width: 580px !important;
  width: 100%;
  align-self: center !important;
}
.elementor-widget-text-editor.form-lede p {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0;
  text-align: center;
}
.elementor-widget.nd-form-shortcode { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   CTA BANNER — Elementor-widget adaptations
   ─────────────────────────────────────────────────────────────────
   Dark gradient closer with two CTA buttons.
   ═══════════════════════════════════════════════════════════════════ */

.e-con.cta-banner {
  position: relative;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2d1b4e 100%) !important;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.e-con.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(99,102,241,.18), transparent 60%);
  pointer-events: none;
  left: 0 !important;
  top: 0 !important;
  right: auto;
  bottom: auto;
}
.e-con.cta-banner > * { position: relative; z-index: 1; }

/* Headline (white) with gradient on the span */
.elementor-widget-heading.cta-banner-h2 {
  max-width: 760px;
}
.elementor-widget-heading.cta-banner-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 0 16px;
}

/* Lede in light slate */
.elementor-widget-text-editor.cta-banner-lede {
  max-width: 760px !important;
  width: 100%;
  align-self: center !important;
}
.elementor-widget-text-editor.cta-banner-lede p {
  font-size: 1.08rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0 0 32px;
  text-align: center;
}

/* Primary button on dark — same gradient pill we use elsewhere */
.elementor-widget-button.btn-primary.btn-on-dark .elementor-button {
  background: var(--grad-btn);
  color: #fff;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 700;
  font-family: var(--font-body);
  border: none;
  box-shadow: 0 6px 22px rgba(99,102,241,.32);
  letter-spacing: 0;
  line-height: 1.2;
  transition: box-shadow .2s, transform .15s;
}
.elementor-widget-button.btn-primary.btn-on-dark .elementor-button:hover {
  box-shadow: 0 10px 30px rgba(99,102,241,.45);
  transform: translateY(-1px);
  color: #fff;
}

/* WhatsApp outline button on dark — white border + white text/icon */
.elementor-widget-button.btn-wa-outline.btn-on-dark .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: #fff;
  padding: 13px 22px;
  border: 2px solid #fff;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0;
  line-height: 1.2;
  box-shadow: none;
  transition: background .2s, transform .15s;
}
.elementor-widget-button.btn-wa-outline.btn-on-dark .elementor-button:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  transform: translateY(-1px);
}
.elementor-widget-button.btn-wa-outline.btn-on-dark .elementor-button-icon i {
  color: #fff;
  font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT PAGE — Elementor-widget adaptations
   ═══════════════════════════════════════════════════════════════════ */

/* ── About hero: blob, layout, H1, lede, CTAs ─────────────────────── */
.e-con.about-hero {
  position: relative;
  overflow: hidden;
}
.e-con.about-hero::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  right: -100px !important;
  top: -150px !important;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
}
.e-con.about-hero > * { position: relative; z-index: 1; }

.e-con.about-hero-inner {
  max-width: 1180px;
  width: 100%;
}

.elementor-widget-heading.about-hero-h1 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.032em;
  margin: 14px 0 24px;
}

.elementor-widget-text-editor.about-hero-lede { max-width: 560px; }
.elementor-widget-text-editor.about-hero-lede p {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0 0 30px;
}

/* "Ghost" / text-link CTA */
.elementor-widget-button.btn-ghost .elementor-button {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 6px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  transition: border-color .2s, color .2s;
  letter-spacing: 0;
}
.elementor-widget-button.btn-ghost .elementor-button:hover {
  color: var(--pink);
  border-bottom-color: var(--pink);
  background: transparent;
}

/* Photo frame on the about hero */
.e-con.about-photo-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #e0e7ff, #c7d2fe);
  box-shadow: 0 0 0 6px rgba(99,102,241,.1), 0 28px 60px rgba(15,23,42,.18);
  padding: 0;
}
.e-con.about-photo-frame .elementor-widget-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.e-con.about-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 960px) {
  .e-con.about-hero-inner .e-con.about-hero-img { order: -1; }
}

/* ── About stats: dark band with 4-col grid ──────────────────────── */
.e-con.about-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 960px) { .e-con.about-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }

.e-con.about-stat { width: 100% !important; place-self: stretch; }

.elementor-widget-heading.about-stat-num .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}

.elementor-widget-heading.about-stat-lbl .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

/* ── About story: 2-col with paragraphs + Quick facts aside ──────── */
.e-con.about-story-inner {
  max-width: 1180px;
  width: 100%;
}

.elementor-widget-heading.story-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  font-weight: 800;
  color: var(--ink);
  margin: 14px 0 26px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.elementor-widget-text-editor.story-p p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.elementor-widget-heading.story-pull .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  border-left: 4px solid var(--pink);
  padding-left: 20px;
  margin: 26px 0 0;
  line-height: 1.5;
}

/* Quick facts aside */
.elementor-widget-heading.qf-title .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pink);
  margin: 0 0 18px;
}
.e-con.qf-row {
  border-bottom: 1px solid var(--line);
  width: 100% !important;
}
.e-con.qf-row.is-last { border-bottom: none; }
.elementor-widget-heading.qf-label .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
  font-weight: 500;
}
.elementor-widget-heading.qf-value .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

/* ── About approach: 2×2 grid of principle cards ─────────────────── */
.e-con.principles-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 22px !important;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 800px) { .e-con.principles-grid { grid-template-columns: 1fr !important; } }

.e-con.principle-card {
  width: 100% !important;
  place-self: stretch;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s;
}
.e-con.principle-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.elementor-widget-heading.principle-num .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 14px;
  display: inline-block;
}
.elementor-widget-heading.principle-title .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.elementor-widget-text-editor.principle-desc p {
  font-size: 0.96rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.elementor-widget-heading.approach-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 14px 0 20px;
}

/* ── About credentials: certs list + tool chips ──────────────────── */
.e-con.creds-inner {
  max-width: 1180px;
  width: 100%;
}
.elementor-widget-heading.creds-h2 .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  margin: 14px 0 26px;
  letter-spacing: -0.02em;
}

/* Cert list — green circles + ticks, bordered rows */
.elementor-widget-icon-list.cert-list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.elementor-widget-icon-list.cert-list .elementor-icon-list-item {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--line);
}
.elementor-widget-icon-list.cert-list .elementor-icon-list-item:last-child { border-bottom: none; }
.elementor-widget-icon-list.cert-list .elementor-icon-list-item::before,
.elementor-widget-icon-list.cert-list li::before { content: none !important; display: none !important; }
.elementor-widget-icon-list.cert-list .elementor-icon-list-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
}
.elementor-widget-icon-list.cert-list .elementor-icon-list-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(22,163,74,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.elementor-widget-icon-list.cert-list .elementor-icon-list-icon i,
.elementor-widget-icon-list.cert-list .elementor-icon-list-icon svg {
  color: #16a34a !important;
  fill: #16a34a !important;
  font-size: 12px !important;
  width: 12px;
  height: 12px;
}
.elementor-widget-icon-list.cert-list .elementor-icon-list-text {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  font-weight: 500;
}

/* Tool chips */
.e-con.tool-chip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 14px !important;
  width: auto !important;
}
.elementor-widget-heading.tool-chip-label .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOM ELEMENTOR WIDGET — Proof Stack
   ─────────────────────────────────────────────────────────────────
   Two-column section. Left content is sticky; right cards "stack" via
   `position: sticky` with a progressive top offset per card (set via
   the inline `--i` index variable from the widget's render method).
   Pure CSS, no JS needed.
   ═══════════════════════════════════════════════════════════════════ */

.nd-proof-stack {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  /* 60px vertical matches the standardized 60/60 section rhythm. */
  padding: 60px 40px;
}
.nd-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* LEFT — sticky inside the section, releases when section ends */
.nd-proof-left {
  position: sticky;
  top: var(--nd-sticky-offset, 100px);
  align-self: start;
}

.nd-proof-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 14px;
}
.nd-proof-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 0 22px;
}
.nd-proof-desc p {
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 0 14px;
}
.nd-proof-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--grad-btn);
  color: #fff;
  padding: 15px 28px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  box-shadow: 0 6px 22px rgba(99,102,241,.32);
  text-decoration: none;
  margin-top: 12px;
  transition: box-shadow .2s, transform .15s;
}
.nd-proof-cta:hover {
  box-shadow: 0 10px 30px rgba(99,102,241,.45);
  transform: translateY(-1px);
  color: #fff;
}

/* RIGHT — each card is sticky with a progressive top offset
   so cards stack visually as the user scrolls. The --i index is set
   inline by the widget render (0, 1, 2, ...). */
.nd-proof-right {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.nd-proof-card {
  position: sticky;
  top: calc(var(--nd-sticky-offset, 100px) + (var(--i, 0) * var(--nd-card-offset, 28px)));
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15,23,42,.10);
  margin: 0;
  transition: box-shadow .25s, transform .25s;
}
.nd-proof-card:hover {
  box-shadow: 0 30px 80px rgba(99,102,241,.18);
}
.nd-proof-card img {
  width: 100%;
  height: auto;
  display: block;
}
.nd-proof-card-caption {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  margin: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
}

/* Mobile: collapse to single column, no sticky behavior */
@media (max-width: 960px) {
  .nd-proof-stack { padding: 50px 24px; }
  .nd-proof-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .nd-proof-left,
  .nd-proof-card {
    position: static;
    top: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOM ELEMENTOR WIDGET — Photo Intro
   ─────────────────────────────────────────────────────────────────
   Two-column "who you're hiring" / founder spotlight layout.
   Portrait photo on one side (with optional floating brand icons),
   eyebrow + headline + body + CTA button on the other.
   ═══════════════════════════════════════════════════════════════════ */

.nd-photo-intro {
  width: 100%;
  padding: 100px 40px;
  position: relative;
  overflow: hidden;
}
.nd-photo-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

/* Flip the column order when the photo should be on the right */
.nd-photo-intro--right .nd-photo-intro-grid {
  grid-template-columns: 1fr 1fr;
}
.nd-photo-intro--right .nd-photo-intro-photo { order: 2; }
.nd-photo-intro--right .nd-photo-intro-text  { order: 1; }

/* ── Photo column ─────────────────────────────────────────────── */
.nd-photo-intro-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nd-photo-intro-photo-inner {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fce7e7 0%, #ffffff 70%);
  /* Custom property the orbiting icons read for their orbit radius.
     Default = 220px (good for a 460px-wide photo container). */
  --nd-orbit-radius: 220px;
}
/* Rounded-square variant — used when the photo is a transparent-bg infographic
   whose corner content would be clipped by the circular crop. The orbital
   icons keep their circular path; only the central photo frame becomes
   rounded-square with no fill (so transparency shows through). */
.nd-photo-intro--shape-rounded .nd-photo-intro-photo-inner {
  border-radius: 24px;
  background: transparent;
}
.nd-photo-intro--shape-rounded .nd-photo-intro-img {
  /* Re-center the image (circular variant uses `object-position: center bottom`
     to anchor a portrait's face — for an infographic we want true center). */
  object-position: center center;
}
.nd-photo-intro-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 2;  /* between "behind" icons (z:1) and "in-front" icons (z:3) */
}

/* Floating decorative brand icons — all share the same orbital animation
   with staggered `animation-delay` so they're evenly distributed around
   the photo (every 90° = -25% of duration). Each icon's transform follows
   a circular path, and `z-index` switches mid-orbit so the icon dips
   behind the photo on the back half and comes back in front on the front
   half — creating a true 3D-feel orbit with pure CSS, no JS. */
.nd-photo-intro-decor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;  /* recenter the box on its own midpoint */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
  animation: nd-orbit 18s linear infinite;
  will-change: transform;
}
/* Each icon offsets the same animation by -25% so they spread 90° apart
   around the orbit and stay 90° apart at every moment. */
.nd-photo-intro-decor--1 {
  background-image: url('../../../../uploads/2026/05/google-ads-logo-v2.webp');
  animation-delay: 0s;
}
.nd-photo-intro-decor--2 {
  background-image: url('../../../../uploads/2026/05/Logo_Google_Analytics.svg.webp');
  animation-delay: -4.5s;
}
.nd-photo-intro-decor--3 {
  background-image: url('../../../../uploads/2026/05/Gogole-Business-profile-Logo.webp');
  animation-delay: -9s;
}
.nd-photo-intro-decor--4 {
  background-image: url('../../../../uploads/2026/05/merchant-center.png');
  animation-delay: -13.5s;
}

/* The orbit. Double-rotate trick: outer rotate moves the box around the
   center, translateX pushes it outward by the orbit radius, inner
   counter-rotate keeps the icon visually upright (no spinning).
   z-index switches at the 50% mark so the icon passes BEHIND the photo
   on the "far" half of the orbit and IN FRONT on the "near" half. */
@keyframes nd-orbit {
  0% {
    transform: rotate(0deg) translateX(var(--nd-orbit-radius, 220px)) rotate(0deg);
    z-index: 3;
  }
  49.99% {
    z-index: 3;
  }
  50% {
    z-index: 1;  /* drop behind the photo */
  }
  99.99% {
    z-index: 1;
  }
  100% {
    transform: rotate(360deg) translateX(var(--nd-orbit-radius, 220px)) rotate(-360deg);
    z-index: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Park icons at fixed positions around the photo for users who prefer
     no animation, instead of leaving them in random orbit phases. */
  .nd-photo-intro-decor {
    animation: none;
    transform: none;
  }
  .nd-photo-intro-decor--1 { top: 12%; left: 4%;  margin: 0; }
  .nd-photo-intro-decor--2 { top: 12%; right: 4%; left: auto; margin: 0; }
  .nd-photo-intro-decor--3 { bottom: 14%; left: 4%; top: auto; margin: 0; }
  .nd-photo-intro-decor--4 { bottom: 14%; right: 4%; top: auto; left: auto; margin: 0; }
}

/* ── Text column ─────────────────────────────────────────────── */
.nd-photo-intro-text { max-width: 540px; }
.nd-photo-intro-eyebrow {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 18px;
}
.nd-photo-intro-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 0 22px;
}
.nd-photo-intro-desc p {
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0 0 16px;
}
.nd-photo-intro-desc p:last-child { margin-bottom: 0; }
.nd-photo-intro-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--grad-btn);
  color: #fff;
  padding: 15px 28px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  box-shadow: 0 6px 22px rgba(99,102,241,.32);
  text-decoration: none;
  margin-top: 28px;
  transition: box-shadow .2s, transform .15s;
}
.nd-photo-intro-cta:hover {
  box-shadow: 0 10px 30px rgba(99,102,241,.45);
  transform: translateY(-1px);
  color: #fff;
}

/* ── Mobile: stack to single column, shrink the orbit ────────── */
@media (max-width: 960px) {
  .nd-photo-intro { padding: 70px 24px; }
  .nd-photo-intro-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .nd-photo-intro--right .nd-photo-intro-photo { order: -1; }
  .nd-photo-intro--right .nd-photo-intro-text  { order: 0; }
  .nd-photo-intro-photo-inner {
    max-width: 320px;
    --nd-orbit-radius: 150px;  /* shrink orbit to match smaller photo */
  }
  .nd-photo-intro-decor {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;  /* keep recentered for the smaller size */
  }
}

/* ════════════════════════════════════════════════════════════════════
   SEO services page — section-specific overrides
   ════════════════════════════════════════════════════════════════════ */

/* Text-based tool strip (replaces the homepage logo image row).
   Each tool is its own span; the separator is a CSS ::after on every
   span except the last, so it can never land at the start of a wrapped line. */
.seo-tool-strip .elementor-heading-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
  line-height: 1.8;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 0;
}
.seo-tool-strip .elementor-heading-title span {
  white-space: nowrap;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
}
.seo-tool-strip .elementor-heading-title span:not(:last-child)::after {
  content: '·';
  margin: 0 14px;
  color: #94a3b8;
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1;
}
@media (max-width: 600px) {
  .seo-tool-strip .elementor-heading-title { font-size: 14px; line-height: 2; }
  .seo-tool-strip .elementor-heading-title span:not(:last-child)::after { margin: 0 10px; }
}

/* SEO problem section — two columns each with a sub-headline */
.seo-problem-section .eyebrow,
.seo-problem-section .eyebrow .elementor-heading-title {
  margin-bottom: 14px;
}
.seo-problem-cols { padding-top: 30px; }
.seo-problem-cols .prob-col-h .elementor-heading-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}
@media (max-width: 840px) {
  .seo-problem-cols { padding-top: 10px; }
  .seo-problem-cols .prob-col-h .elementor-heading-title { margin-bottom: 16px; }
}

/* SEO solution section — 3-column findings grid */
.seo-solution-section .seo-solution-h2 .elementor-heading-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.18;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
  max-width: 900px;
  margin: 0 auto 16px;
}
.seo-solution-section .seo-solution-h2 em {
  font-style: italic;
  color: #475569;
  font-weight: 700;
}
.seo-solution-section .seo-solution-lede .elementor-widget-container p {
  font-size: 18px;
  line-height: 1.65;
  color: #475569;
  max-width: 760px;
  margin: 0 auto;
}
.seo-findings-grid.e-con,
.seo-findings-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
/* Stack to single column at ≤960px — at the 2-col intermediate the 3rd card
   becomes an awkward orphan on its own row. */
@media (max-width: 960px) {
  .seo-findings-grid.e-con,
  .seo-findings-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}
.seo-finding-card { transition: transform .18s ease, box-shadow .18s ease; }
.seo-finding-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15,23,42,.08);
}
.seo-finding-title .elementor-heading-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.seo-finding-desc .elementor-widget-container p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

/* SEO service card — pain quote sits between title and description */
.seo-svc-pain .elementor-heading-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-style: italic;
  color: #e53935;
  font-weight: 500;
  margin: 4px 0 10px;
  line-height: 1.5;
}

/* SEO mid-CTA lede — small body under the headline */
.mid-cta .mid-cta-lede .elementor-widget-container p {
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
  max-width: 640px;
  margin: 12px auto 28px;
  text-align: center;
}

/* Hero anchor scroll-offset (when navigating from menu) */
#seo-top, #seo-services, #seo-proof, #seo-how,
#geo-top, #geo-services, #geo-proof, #geo-how,
#services-overview { scroll-margin-top: 80px; }

/* Who-for clickable card variant — arrow chevron on right, slight hover lift
   that makes the affordance obvious. */
.who-card--clickable .elementor-button {
  justify-content: space-between !important;
  text-align: left;
}
.who-card--clickable .elementor-button-icon { color: #6366F1 !important; opacity: 0.55; transition: opacity .15s ease, transform .15s ease; }
.who-card--clickable:hover .elementor-button-icon { opacity: 1; transform: translateX(4px); }

/* Process exit CTA — sits centered below the 4-step grid */
.process-cta-btn .elementor-button { min-width: 220px; justify-content: center; }

/* Contact form trust signal — sits between lede and form */
.form-trust .elementor-widget-container p {
  font-size: 14.5px;
  line-height: 1.5;
  color: #475569;
  max-width: 580px;
  margin: 14px auto 0;
  text-align: center;
}
.form-trust strong { color: #0f172a; font-weight: 700; }

/* Contact form email-direct fallback — small line below the form.
   40px top margin separates it cleanly from the form box without
   feeling glued to it. */
.form-alt .elementor-widget-container p {
  font-size: 14px;
  color: #64748b;
  text-align: center;
  margin: 40px auto 0;
}
.form-alt a {
  color: #6366F1;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-alt a:hover { color: #4f46e5; }

/* Mobile: SEO services overview card button "See SEO services" wraps to 2
   lines at narrow widths — tighten font and padding so it stays single-line. */
@media (max-width: 600px) {
  .home-svc-btn .elementor-button { font-size: 0.95rem; padding-left: 16px; padding-right: 16px; }
}

/* Testimonial service-channel tag chip — small uppercase label at the top
   of each testimonial card identifying which surface the proof relates to. */
.test-tag .elementor-heading-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6366F1;
  background: #eef0ff;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  margin: 0 0 16px;
}

/* Elementor's "boxed" content_width wraps section children in a
   .e-con-inner div that ships with its own vertical padding. Combined
   with the section's own padding that doubles every gap. Zero out the
   inner vertical padding so the section's own padding is the sole
   source of vertical rhythm. */
.problem-section > .e-con-inner,
.seo-problem-section > .e-con-inner,
.solution-section > .e-con-inner,
.seo-solution-section > .e-con-inner,
.logo-strip-section > .e-con-inner,
.seo-tools-section > .e-con-inner,
.see-also-section > .e-con-inner,
.wd-process-section > .e-con-inner,
.wd-sup-section > .e-con-inner,
.wd-faq-section > .e-con-inner,
.wd-services-section > .e-con-inner,
.wd-why-section > .e-con-inner,
.wd-showcase-section > .e-con-inner,
.testimonials-section > .e-con-inner,
.contact-form-section > .e-con-inner,
.wd-mid-cta > .e-con-inner,
.wd-stats > .e-con-inner,
.cta-banner > .e-con-inner,
/* ─── main pages (home, google-ads, seo, ai-seo, about) ───── */
.home-photo-intro-section > .e-con-inner,
.photo-intro-section > .e-con-inner,
.home-services-overview-section > .e-con-inner,
.services-section > .e-con-inner,
.bridge-section > .e-con-inner,
.proof-stack-section > .e-con-inner,
.process-section > .e-con-inner,
.who-section > .e-con-inner,
.not-for > .e-con-inner,
.mid-cta > .e-con-inner,
.about-stats > .e-con-inner,
.about-story > .e-con-inner,
.about-approach > .e-con-inner,
.about-credentials > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   GLOBAL SECTION PADDING RHYTHM
   Sections were originally padded 100/100 in the Elementor builders,
   which made adjacent sections sit 200px apart on desktop — disjointed,
   exhausting to scroll, and visually broken when the user reaches the
   end of one section's content but the next H2 is still half a screen
   away. Standardizing at 60/60 yields a 120px inter-section gap which
   feels like one continuous flow without crowding the headings.

   Hero is excluded — it has its own responsive padding tuned for the
   gradient transition. Proof stack widget is also excluded (the widget
   handles padding internally).
   ════════════════════════════════════════════════════════════════════ */
.home-photo-intro-section,
.home-services-overview-section,
.problem-section,
.seo-problem-section,
.solution-section,
.seo-solution-section,
.services-section,
.mid-cta,
.testimonials-section,
.who-section,
.not-for,
.bridge-section,
.process-section,
.photo-intro-section,
.see-also-section,
.contact-form-section,
.cta-banner,
.about-story,
.about-approach,
.about-credentials,
.wd-services-section,
.wd-why-section,
.wd-process-section,
.wd-sup-section,
.wd-faq-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

@media (max-width: 600px) {
  .home-photo-intro-section,
  .home-services-overview-section,
  .problem-section,
  .seo-problem-section,
  .solution-section,
  .seo-solution-section,
  .services-section,
  .mid-cta,
  .testimonials-section,
  .who-section,
  .not-for,
  .bridge-section,
  .process-section,
  .photo-intro-section,
  .see-also-section,
  .contact-form-section,
  .cta-banner,
  .about-story,
  .about-approach,
  .about-credentials,
  .wd-services-section,
  .wd-why-section,
  .wd-process-section,
  .wd-sup-section,
  .wd-faq-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HOME PHOTO-INTRO — 2-column workspace image + copy.
   Replaces the orbital portrait widget on the home page only; service
   pages still use the `nd-photo-intro` widget with the portrait.
   ════════════════════════════════════════════════════════════════════ */
.home-photo-intro-section { /* outer container */ }
.home-photo-intro-image .elementor-widget-container,
.home-photo-intro-image img {
  border-radius: 18px;
  overflow: hidden;
}
.home-photo-intro-image img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 28px 60px rgba(15, 23, 42, .14);
}
.home-photo-intro-right .eyebrow .elementor-heading-title { margin-bottom: 14px; }
.home-photo-intro-h2 .elementor-heading-title {
  /* Match the other section H2s (services, problem, bridge, process, cta-banner)
     at 45.6px peak so the typography hierarchy reads as consistent. */
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(28px, 3.6vw, 45.6px);
  line-height: 1.08;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.032em;
  margin: 0 0 18px;
}
.home-photo-intro-body .elementor-widget-container p {
  font-size: 17px;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 14px;
}
.home-photo-intro-body .elementor-widget-container p:last-child { margin-bottom: 0; }
.home-photo-intro-btn { margin-top: 26px; }
@media (max-width: 960px) {
  .home-photo-intro-section .e-con.home-photo-intro-grid { flex-direction: column !important; }
  .home-photo-intro-image img { border-radius: 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   COMPREHENSIVE HOME — services overview section
   3 service-hub cards (Google Ads / SEO / AI SEO) routing to each page.
   ════════════════════════════════════════════════════════════════════ */
.home-services-grid.e-con,
.home-services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 960px) {
  .home-services-grid.e-con,
  .home-services-grid { grid-template-columns: 1fr; max-width: 560px; }
}

.home-services-lede .elementor-widget-container p {
  font-size: 17px;
  line-height: 1.6;
  color: #475569;
  max-width: 680px;
  margin: 14px auto 0;
  text-align: center;
}

.home-svc-card {
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex !important;
}
.home-svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(15, 23, 42, .1);
  border-color: #c7d2fe !important;
}

/* Color-stripe accent at the top of each card per service */
.home-svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  border-radius: 20px 20px 0 0;
}
.home-svc-card--ppc::before { background: linear-gradient(90deg, #4285F4, #34A853); }
.home-svc-card--seo::before { background: linear-gradient(90deg, #EA4335, #FBBC05); }
.home-svc-card--geo::before { background: linear-gradient(90deg, #6366F1, #4285F4); }

.home-svc-icon {
  margin-bottom: 18px;
}
.home-svc-icon img {
  width: 56px !important;
  height: 56px !important;
  display: block;
}

.home-svc-title .elementor-heading-title {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.home-svc-tagline .elementor-heading-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: #475569;
  margin: 0 0 18px;
}

.home-svc-list .elementor-icon-list-items {
  margin: 0 0 22px;
}
.home-svc-list .elementor-icon-list-item {
  font-size: 14.5px;
  line-height: 1.5;
  color: #334155;
}
.home-svc-list .elementor-icon-list-text { font-weight: 500; }

.home-svc-btn {
  align-self: stretch;
  margin-top: auto;
}
.home-svc-btn .elementor-button {
  width: 100%;
  justify-content: center;
}

@media (max-width: 600px) {
  .home-svc-card { padding: 28px 22px !important; }
  .home-svc-title .elementor-heading-title { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════════
   "See also" cross-link callout — sits between Process and Contact form
   on both SEO and GEO pages, points at the sibling service.
   ════════════════════════════════════════════════════════════════════ */
.see-also-section { /* outer container — uses standard padding */ }
.see-also-card {
  box-shadow: 0 18px 40px rgba(99, 102, 241, .08);
}
.see-also-card .eyebrow .elementor-heading-title {
  margin-bottom: 6px !important;
}
.see-also-h2 .elementor-heading-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
  text-align: center;
}
.see-also-desc .elementor-widget-container p {
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
  max-width: 620px;
  margin: 0 auto 6px;
  text-align: center;
}
.see-also-card .elementor-widget-button { margin-top: 6px; }
@media (max-width: 600px) {
  .see-also-card {
    padding: 36px 22px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   WEB-DESIGN LANDING PAGE (standalone, unlinked)
   Reuses most service-page primitives. Custom blocks below are only
   the parts that are unique to this page: text-only hero, why-me grid,
   support grid, and FAQ accordion.
   ════════════════════════════════════════════════════════════════════ */

/* Hero — text-only, centered. Tightens lede + cred strip alignment. */
.wd-hero .hero-headline {
  text-align: center;
}
.wd-hero .hero-headline .elementor-widget-container h1 {
  font-size: 56px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 18px 0 14px;
}
.wd-hero .hero-lede-wrap .elementor-widget-container p {
  font-size: 19px;
  line-height: 1.6;
  color: #475569;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
}
.wd-hero .hero-credstrip { margin-top: 18px; }
.wd-hero .hero-credstrip .elementor-widget-container > div {
  text-align: center;
  font-size: 14px;
  color: #64748b;
  letter-spacing: 0.02em;
}
.wd-hero .hero-credstrip strong { color: #0f172a; }
.wd-hero .hero-credstrip .csep { margin: 0 10px; color: #94a3b8; font-weight: 600; }
.wd-hero .hero-cta { margin-top: 6px; }

@media (max-width: 720px) {
  .wd-hero .hero-headline .elementor-widget-container h1 {
    font-size: 38px;
    line-height: 1.15;
  }
  .wd-hero .hero-lede-wrap .elementor-widget-container p {
    font-size: 17px;
  }
  .wd-hero .hero-credstrip .elementor-widget-container > div {
    font-size: 13px;
  }
  .wd-hero .hero-credstrip .csep { margin: 0 5px; }
}

/* Teardown explainer callout in hero — soft indigo card under the lede. */
.wd-hero-teardown {
  margin: 4px auto 24px;
  max-width: 700px;
}
.wd-hero-teardown .elementor-widget-container {
  background: rgba(79, 70, 229, 0.06);
  border: 1px solid rgba(79, 70, 229, 0.18);
  border-left: 3px solid #4f46e5;
  border-radius: 10px;
  padding: 14px 18px;
}
.wd-hero-teardown .elementor-widget-container p {
  font-size: 15px;
  line-height: 1.6;
  color: #1e293b;
  margin: 0;
  text-align: left;
}
.wd-hero-teardown strong { color: #4f46e5; }

@media (max-width: 600px) {
  .wd-hero-teardown .elementor-widget-container { padding: 12px 14px; }
  .wd-hero-teardown .elementor-widget-container p { font-size: 14px; }
}

/* Stats band — reuses .about-stats CSS already defined upstream. */
.wd-stats { /* hook only — about-stats handles layout */ }

/* Showcase section — Higgsfield device-mockup composition. Soft drop
   shadow under the image so it floats against the section background
   instead of looking pasted on. */
.wd-showcase-section { padding-top: 60px !important; padding-bottom: 60px !important; }
.wd-showcase-image .elementor-widget-container img {
  border-radius: 16px;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.08));
}
.wd-showcase-h2 .elementor-widget-container h2 {
  font-size: 36px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.wd-showcase-lede .elementor-widget-container p {
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
  margin: 0 auto;
  max-width: 640px;
  text-align: center;
}
@media (max-width: 720px) {
  .wd-showcase-h2 .elementor-widget-container h2 { font-size: 26px; }
  .wd-showcase-image .elementor-widget-container img { border-radius: 12px; }
}
@media (max-width: 600px) {
  .wd-showcase-section { padding-top: 50px !important; padding-bottom: 50px !important; }
}

/* Mid-page CTA — dark, tight, single sentence + button. */
.wd-mid-cta {
  width: 100%;
}
.wd-mid-cta-h .elementor-widget-container h3 {
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
  text-align: center;
}
.wd-mid-cta-lede .elementor-widget-container p {
  font-size: 16px;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 auto 22px;
  text-align: center;
  max-width: 640px;
}
.wd-mid-cta .btn-wa-text a {
  color: #94a3b8 !important;
  background: transparent !important;
}
.wd-mid-cta .btn-wa-text a:hover {
  color: #ffffff !important;
}
@media (max-width: 600px) {
  .wd-mid-cta-h .elementor-widget-container h3 { font-size: 22px; }
  .wd-mid-cta-lede .elementor-widget-container p { font-size: 15px; }
}

/* Services grid — 3 cols desktop, 2 cols tablet, 1 col mobile (overrides
   global .e-con.services-grid which would max-width:1100 + force 3-col). */
.wd-services-section .e-con.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
.wd-service-card { height: 100%; }
.wd-svc-icon .elementor-icon {
  background: #eef0ff;
  border-radius: 12px;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
@media (max-width: 960px) {
  .wd-services-section .e-con.services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .wd-services-section .e-con.services-grid { grid-template-columns: 1fr !important; }
}

/* Why-me — 2x2 grid. Force grid layout against Elementor's flex default. */
.e-con.wd-why-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.wd-why-card { height: 100%; }
.wd-why-icon .elementor-icon {
  background: #eef0ff;
  border-radius: 12px;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.wd-why-title .elementor-widget-container h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
}
.wd-why-desc .elementor-widget-container p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}
@media (max-width: 720px) {
  .e-con.wd-why-grid { grid-template-columns: 1fr !important; }
}

/* Process steps — 4-up row on desktop, 2x2 tablet, 1-col mobile. */
.wd-process-section .e-con.process-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100%;
}
@media (max-width: 960px) {
  .wd-process-section .e-con.process-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.process-step-num {
  color: #4f46e5;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.process-step-title .elementor-widget-container h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
}
.process-step-desc .elementor-widget-container p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}
@media (max-width: 600px) {
  .wd-process-section .e-con.process-grid { grid-template-columns: 1fr !important; }
}

/* Support promises — 3x2 grid (forced against Elementor flex default). */
.e-con.wd-sup-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  width: 100%;
}
.wd-sup-card { height: 100%; }
.wd-sup-icon .elementor-icon {
  background: #eef0ff;
  border-radius: 10px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.wd-sup-title .elementor-widget-container h3 {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}
.wd-sup-desc .elementor-widget-container p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}
@media (max-width: 960px) {
  .e-con.wd-sup-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .e-con.wd-sup-grid { grid-template-columns: 1fr !important; }
}

/* FAQ accordion — native <details> styled to feel modern. */
.wd-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wd-faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wd-faq-item[open] {
  border-color: #c7d2fe;
  box-shadow: 0 1px 0 rgba(79, 70, 229, 0.06), 0 4px 14px rgba(15, 23, 42, 0.04);
}
.wd-faq-q {
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
  padding: 18px 50px 18px 22px;
  cursor: pointer;
  list-style: none;
  position: relative;
  line-height: 1.4;
}
.wd-faq-q::-webkit-details-marker { display: none; }
.wd-faq-q::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  color: #4f46e5;
  line-height: 1;
  transition: transform 0.2s ease;
}
.wd-faq-item[open] .wd-faq-q::after {
  transform: translateY(-50%) rotate(45deg);
}
.wd-faq-a {
  padding: 0 22px 20px;
}
.wd-faq-a p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}
@media (max-width: 600px) {
  .wd-faq-q { font-size: 16px; padding: 16px 44px 16px 18px; }
  .wd-faq-q::after { right: 18px; }
  .wd-faq-a { padding: 0 18px 18px; }
  .wd-faq-a p { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════
   WEB-DESIGN LANDING PAGE — FULL DESIGN OVERHAUL
   Scoped to .landing-page so it only touches the landing page, not the
   main site. Below targets the design issues raised in the critical
   review:
   - Excessive 120-300px section gaps → tightened to 40/40 desktop,
     dark-band transitions get negative-margin overlap so they read as
     part of the adjacent section instead of free-floating islands.
   - Visually identical white cards everywhere → service / why-me /
     process / support cards now each get their own treatment (numbered
     prefix, color stripe, gradient badge, timeline dots).
   - Hover micro-interactions added so cards feel responsive.
   - Stats band gains height + slim divider lines so the dark band has
     real visual weight instead of feeling squat.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Section padding: tight on the landing page ─────────────────── */
.landing-page .wd-hero { padding-top: 70px !important; padding-bottom: 60px !important; }
.landing-page .problem-section,
.landing-page .wd-services-section,
.landing-page .wd-why-section,
.landing-page .testimonials-section,
.landing-page .wd-showcase-section,
.landing-page .wd-process-section,
.landing-page .wd-sup-section,
.landing-page .wd-faq-section,
.landing-page .contact-form-section {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
.landing-page .wd-stats { padding-top: 38px !important; padding-bottom: 38px !important; }
.landing-page .wd-mid-cta { padding-top: 36px !important; padding-bottom: 36px !important; }
.landing-page .cta-banner { padding-top: 55px !important; padding-bottom: 60px !important; }
.landing-page .section-header { padding-bottom: 30px !important; }
@media (max-width: 600px) {
  .landing-page .problem-section,
  .landing-page .wd-services-section,
  .landing-page .wd-why-section,
  .landing-page .testimonials-section,
  .landing-page .wd-showcase-section,
  .landing-page .wd-process-section,
  .landing-page .wd-sup-section,
  .landing-page .wd-faq-section,
  .landing-page .contact-form-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

/* ─── Stats band — give it visual weight ─────────────────────────── */
.landing-page .wd-stats {
  background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%) !important;
  position: relative;
  overflow: hidden;
}
.landing-page .wd-stats::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 200px;
  background: radial-gradient(ellipse, rgba(99, 102, 241, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.landing-page .wd-stats .about-stats-grid { position: relative; z-index: 1; }
.landing-page .wd-stats .about-stat {
  position: relative;
  padding: 0 12px;
}
.landing-page .wd-stats .about-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -14px; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12), transparent);
}
.landing-page .wd-stats .about-stat-num .elementor-widget-container {
  font-size: 44px !important;
  font-weight: 800 !important;
}
@media (max-width: 600px) {
  .landing-page .wd-stats .about-stat:not(:last-child)::after { display: none; }
}

/* ─── Problem section — pain/gain cards instead of bullets ─────── */
.landing-page .problem-cols { gap: 36px !important; }
.landing-page .prob-col-h .elementor-widget-container h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid;
}
.landing-page .prob-x-list .elementor-widget-container .prob-col-h,
.landing-page .problem-cols .e-con:first-child .prob-col-h .elementor-widget-container h3 {
  color: #b91c1c;
  border-bottom-color: rgba(220, 38, 38, 0.2);
}
.landing-page .problem-cols .e-con:last-child .prob-col-h .elementor-widget-container h3 {
  color: #15803d;
  border-bottom-color: rgba(34, 197, 94, 0.25);
}
.landing-page .prob-x-list .elementor-icon-list-item,
.landing-page .prob-check-list .elementor-icon-list-item {
  padding: 10px 14px 10px 12px !important;
  border-radius: 8px;
  margin-bottom: 6px !important;
  transition: background 0.15s ease;
}
.landing-page .prob-x-list .elementor-icon-list-item:hover {
  background: rgba(220, 38, 38, 0.04);
}
.landing-page .prob-check-list .elementor-icon-list-item:hover {
  background: rgba(34, 197, 94, 0.04);
}
.landing-page .prob-x-list .elementor-icon-list-icon,
.landing-page .prob-check-list .elementor-icon-list-icon {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 12px !important;
  flex-shrink: 0;
}
.landing-page .prob-x-list .elementor-icon-list-icon { background: rgba(220, 38, 38, 0.1); }
.landing-page .prob-check-list .elementor-icon-list-icon { background: rgba(34, 197, 94, 0.1); }
.landing-page .prob-x-list .elementor-icon-list-icon svg,
.landing-page .prob-check-list .elementor-icon-list-icon svg {
  width: 11px !important;
  height: 11px !important;
}

/* ─── Service cards — numbered + brand-color stripe + hover ────── */
.landing-page .wd-service-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  counter-increment: wd-svc;
}
.landing-page .wd-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4f46e5, #818cf8);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.landing-page .wd-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
  border-color: #c7d2fe !important;
}
.landing-page .wd-service-card:hover::before { opacity: 1; }
.landing-page .wd-services-section { counter-reset: wd-svc; }
.landing-page .wd-service-card .svc-title h3::before {
  content: counter(wd-svc, decimal-leading-zero);
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #6366f1;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  opacity: 0.85;
}
.landing-page .wd-svc-icon .elementor-icon {
  width: 64px !important;
  height: 64px !important;
  background: linear-gradient(135deg, #eef0ff 0%, #ddd6fe 100%) !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
}

/* ─── Why-me cards — large 01-04 indicator + gradient sweep ──── */
.landing-page .wd-why-card {
  position: relative;
  overflow: hidden;
  counter-increment: wd-why;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding-top: 50px !important;
}
.landing-page .wd-why-section { counter-reset: wd-why; }
.landing-page .wd-why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.landing-page .wd-why-card::after {
  content: counter(wd-why, decimal-leading-zero);
  position: absolute;
  top: 18px; right: 22px;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #4f46e5, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.18;
  letter-spacing: -0.02em;
}
.landing-page .wd-why-icon .elementor-icon {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  color: #ffffff !important;
}
.landing-page .wd-why-icon .elementor-icon svg path { fill: #ffffff !important; }

/* ─── Testimonial cards — pop the quote mark, subtle hover ───── */
.landing-page .testimonials-section .testimonial-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landing-page .testimonials-section .testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.landing-page .testimonials-section .quote-mark { opacity: 0.25; }

/* ─── Showcase — pull image up so it bleeds, drop shadow ──────── */
.landing-page .wd-showcase-section { padding-top: 60px !important; padding-bottom: 60px !important; }
.landing-page .wd-showcase-image .elementor-widget-container img {
  filter: drop-shadow(0 28px 50px rgba(15, 23, 42, 0.16));
}

/* ─── Process — connected timeline (horizontal line desktop) ──── */
.landing-page .wd-process-section .e-con.process-grid {
  position: relative;
}
.landing-page .wd-process-section .e-con.process-grid::before {
  content: '';
  position: absolute;
  top: 60px; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    #c7d2fe 10%, #c7d2fe 90%,
    transparent 100%);
  z-index: 0;
  pointer-events: none;
}
.landing-page .process-step {
  position: relative;
  z-index: 1;
  background: #ffffff !important;
  counter-increment: wd-proc;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding-top: 32px !important;
}
.landing-page .wd-process-section .e-con.process-grid { counter-reset: wd-proc; }
.landing-page .process-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.landing-page .process-step .process-step-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #ffffff !important;
  border-radius: 50%;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin: 0 0 16px !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.32);
}
@media (max-width: 960px) {
  .landing-page .wd-process-section .e-con.process-grid::before { display: none; }
}

/* ─── Support cards — icon badge in indigo, subtle gradient hover */
.landing-page .wd-sup-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.landing-page .wd-sup-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  border-color: #c7d2fe !important;
}
.landing-page .wd-sup-icon .elementor-icon {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
}
.landing-page .wd-sup-icon .elementor-icon svg path { fill: #ffffff !important; }

/* ─── Mid-CTA — give it depth so it's more than a dark stripe ──── */
.landing-page .wd-mid-cta {
  background: radial-gradient(ellipse at center top,
    #1e1b4b 0%, #0f172a 70%) !important;
  position: relative;
  overflow: hidden;
}
.landing-page .wd-mid-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 30%, rgba(99, 102, 241, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 90% 70%, rgba(167, 139, 250, 0.15) 0%, transparent 45%);
  pointer-events: none;
}
.landing-page .wd-mid-cta > * { position: relative; z-index: 1; }

/* ─── Hero teardown callout — tighter, more visual weight ──────── */
.landing-page .wd-hero-teardown {
  margin: 14px auto 24px;
}
.landing-page .wd-hero-teardown .elementor-widget-container {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.07), rgba(99, 102, 241, 0.04)) !important;
  border-left-width: 4px !important;
  position: relative;
}

/* ─── FAQ — tighter, gradient accent on open items ────────────── */
.landing-page .wd-faq-item[open] {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
}

/* ─── Section eyebrows: more prominent, color-coded ───────────── */
.landing-page .eyebrow .elementor-widget-container p,
.landing-page .eyebrow .elementor-widget-container .elementor-heading-title {
  color: #4f46e5 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  margin-bottom: 10px !important;
}

/* ─── FAQ section background, problem section subtle bg gradient */
.landing-page .problem-section {
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}
.landing-page .wd-faq-section {
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}

/* Kill phantom horizontal overflow on landing pages.
   Hero section's e-con-boxed wrapper + pseudo-elements contribute
   40-80px of phantom scrollWidth on desktop even though no DOM rect
   actually overflows. Clamping at html + body level removes any scroll
   bar and doesn't affect intended layout (landing pages have no
   horizontal-scroll content). */
html:has(body.landing-page),
body.landing-page,
body.landing-page .page-content,
body.landing-page .elementor {
  overflow-x: hidden;
  max-width: 100%;
}
/* Specifically clamp the hero section width too — it's where 80px of
   the phantom overflow comes from. */
body.landing-page .wd-hero {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   LANDING-PAGE POLISH PASS — typography fix + button refinement
   Fixes the visual issues caught in the second audit:
   1. Card titles (why-me, support, process) were rendering at 28px /
      font-weight 500 because the previous selectors used
      `.elementor-widget-container h3` and Elementor heading widgets
      DON'T have that wrapper — the h3 is the direct child of the
      .elementor-widget-heading. Targeting the h3 directly fixes it.
   2. Buttons were bulky at 15px 28px padding. Refined to 12px 24px
      with tighter font-size for a less-bulky, more conversion-focused
      feel. Secondary button radius unified with primary (10px).
   3. Card title → description spacing was tight (no margin between).
      Added 10-12px to create the right visual breathing room.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Button refinement (tight, clean, less bulky shadow) ─────────
   Total button heights: primary/secondary → 37px (was 67px visually).
   The Elementor button widget WRAPPER (.elementor-widget-button) had
   inherited padding of 15px 28px from the theme defaults — this padding
   was OUTSIDE the actual <a> button, making the visual click-area look
   67px tall even though the button itself was 37px. Zeroing the wrapper
   padding fixes the perceived bulk. Modern SaaS landing-page buttons
   (Stripe, Linear, Vercel) sit at 36-40px with subtle 4-12px shadows. */

/* Zero out the widget WRAPPER padding — design-system rules, apply site-wide */
.elementor-widget-button.btn-primary,
.elementor-widget-button.btn-secondary,
.elementor-widget-button.btn-wa-text,
.elementor-widget-button.btn-wa-outline,
.elementor-widget-button.home-svc-btn,
.elementor-widget-button.process-cta-btn {
  padding: 0 !important;
}
.elementor-widget-button.btn-primary .elementor-button,
.elementor-widget-button.home-svc-btn .elementor-button {
  padding: 13px 22px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  line-height: 1.2;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.22) !important;
}
.elementor-widget-button.btn-primary .elementor-button:hover,
.elementor-widget-button.home-svc-btn .elementor-button:hover {
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32) !important;
  transform: translateY(-1px);
}
.elementor-widget-button.btn-secondary .elementor-button {
  padding: 13px 22px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  line-height: 1.2;
  border-width: 1px !important;
  box-shadow: none !important;
}
.elementor-widget-button.btn-wa-text .elementor-button {
  padding: 6px 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
/* CTA banner buttons slightly tighter horizontal padding */
.cta-banner .elementor-widget-button.btn-primary .elementor-button,
.cta-banner .elementor-widget-button.btn-secondary .elementor-button {
  padding: 13px 20px !important;
}

/* ─── btn-wa-outline (WhatsApp button on dark CTA banner) ───────
   White 1px border, transparent bg, clean. No shadow, no glow. */
.elementor-widget-button.btn-wa-outline .elementor-button {
  padding: 13px 22px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.elementor-widget-button.btn-wa-outline .elementor-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #fff !important;
}

/* On the dark CTA banner, the btn-primary already has the indigo gradient
   + the shadow which looks like a "glow" against the dark bg. That's fine.
   Just make sure we don't have a stray 2px border or padding mismatch. */
.cta-banner .elementor-widget-button.btn-primary .elementor-button {
  border: none !important;
}

/* ─── Custom widget button (nd-proof-cta) inside Proof Stack widget ──
   This is rendered by inc/widget-proof-stack.php as a plain <a> with
   custom class. Match the global design-system primary button. */
a.nd-proof-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 13px 22px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.22) !important;
  text-decoration: none !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
a.nd-proof-cta:hover {
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32) !important;
  transform: translateY(-1px);
}

/* ─── Service-card buttons (home page) — breathing room above ──
   Two of the three cards rendered with margin: 0 on the button widget,
   so the button glued to the last list item. Force margin-top so all
   three cards have consistent vertical rhythm. */
.home-svc-card .elementor-widget-button.home-svc-btn {
  margin-top: 20px !important;
}
/* Push the button to the bottom of the card so the three cards have
   their buttons aligned regardless of list-item count. */
.home-svc-card {
  display: flex !important;
  flex-direction: column !important;
}
.home-svc-card .elementor-widget-button.home-svc-btn {
  margin-top: auto !important;
  padding-top: 20px !important;
}

/* Multi-step form buttons (.nd-next, .nd-submit) — global design-system rule.
   Default was 14px 28px / 16px font / heavy shadow which felt 30% bulkier
   than the hero CTA. Apply site-wide. */
.contact-form-section .nd-next,
.contact-form-section .nd-submit {
  padding: 13px 22px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.22) !important;
  line-height: 1.2 !important;
}
.contact-form-section .nd-next:hover,
.contact-form-section .nd-submit:hover {
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32) !important;
}

/* Form-alt fallback text ("Prefer to just message? WhatsApp / email…")
   needs breathing room above + side padding. Global rule. */
.contact-form-section .form-alt {
  margin-top: 24px !important;
  padding: 0 16px !important;
}
.contact-form-section .form-alt p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #64748b !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.contact-form-section .form-alt a {
  color: #4f46e5 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.contact-form-section .form-alt a:hover {
  text-decoration: underline !important;
}

/* ─── Why-me card titles — fix the 28px / weight 500 problem ──── */
body.landing-page .wd-why-card .wd-why-title h3,
body.landing-page .wd-why-title h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em;
}
body.landing-page .wd-why-card .wd-why-desc p,
body.landing-page .wd-why-desc p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 !important;
}

/* ─── Support card titles — same fix ──────────────────────────── */
body.landing-page .wd-sup-card .wd-sup-title h3,
body.landing-page .wd-sup-title h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em;
}
body.landing-page .wd-sup-card .wd-sup-desc p,
body.landing-page .wd-sup-desc p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 !important;
}

/* ─── Process card titles — same fix ──────────────────────────── */
body.landing-page .process-step .process-step-title h3,
body.landing-page .process-step-title h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em;
}
body.landing-page .process-step .process-step-desc p,
body.landing-page .process-step-desc p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 !important;
}

/* ─── Service card titles (already correct but enforce + spacing) */
body.landing-page .wd-service-card .svc-title h3,
body.landing-page .svc-title h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em;
}
body.landing-page .wd-service-card .seo-svc-pain,
body.landing-page .seo-svc-pain {
  font-size: 14px !important;
  font-style: italic;
  color: #ec4899 !important;
  margin: 0 0 10px !important;
  line-height: 1.5;
}
body.landing-page .wd-service-card .svc-desc p,
body.landing-page .svc-desc p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 0 14px !important;
}

/* ─── Testimonial cards: clean text hierarchy ─────────────────── */
body.landing-page .testimonials-section .testimonial-card .test-quote-wrap blockquote {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #1e293b !important;
  font-style: italic;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
body.landing-page .testimonials-section .test-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
body.landing-page .testimonials-section .test-role {
  font-size: 13.5px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
body.landing-page .testimonials-section .test-tag {
  display: inline-block !important;
  background: #eef0ff !important;
  color: #4f46e5 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  margin: 0 0 14px !important;
}

/* ─── Section H2 sizes — slightly less aggressive on landing pages */
body.landing-page .problem-h2 h2,
body.landing-page .services-h2 h2,
body.landing-page .wd-why-h2 h2,
body.landing-page .testimonials-h2 h2,
body.landing-page .process-h2 h2,
body.landing-page .wd-sup-h2 h2,
body.landing-page .wd-faq-h2 h2,
body.landing-page .cta-banner-h2 h2 {
  font-size: 38px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 12px !important;
}
@media (max-width: 720px) {
  body.landing-page .problem-h2 h2,
  body.landing-page .services-h2 h2,
  body.landing-page .wd-why-h2 h2,
  body.landing-page .testimonials-h2 h2,
  body.landing-page .process-h2 h2,
  body.landing-page .wd-sup-h2 h2,
  body.landing-page .wd-faq-h2 h2,
  body.landing-page .cta-banner-h2 h2 {
    font-size: 28px !important;
  }
}

/* ─── Hero H1 — slightly tighter than the default 64px ────────── */
body.landing-page .wd-hero .hero-headline h1 {
  font-size: 52px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
@media (max-width: 720px) {
  body.landing-page .wd-hero .hero-headline h1 {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }
}

/* Cred-strip in hero — center on all viewports + tighten separator
   color so the wrap looks clean on mobile (was wrapping unevenly with
   1/2/1 chip pattern because flex had no justify-content). */
body.landing-page .wd-hero .hero-credstrip .elementor-heading-title {
  justify-content: center !important;
  row-gap: 10px !important;
  column-gap: 14px !important;
}
@media (max-width: 600px) {
  body.landing-page .wd-hero .hero-credstrip .elementor-heading-title {
    column-gap: 10px !important;
    font-size: 13px !important;
  }
  body.landing-page .wd-hero .hero-credstrip .csep {
    margin: 0 4px !important;
  }
}

/* ─── Lede / section descriptions — consistent across all sections */
body.landing-page .services-lede p,
body.landing-page .process-lede p,
body.landing-page .wd-sup-lede p,
body.landing-page .testimonials-lede p,
body.landing-page .form-lede p {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

/* ─── Eyebrow consistency (slight bump for hierarchy) ─────────── */
body.landing-page .eyebrow p,
body.landing-page .eyebrow .elementor-heading-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #4f46e5 !important;
  margin: 0 0 10px !important;
}

/* ─── Why-me number badge (subtle but readable) ───────────────── */
body.landing-page .wd-why-card::after {
  opacity: 0.28 !important;
  font-size: 48px !important;
}

/* ─── Process step number (tighter type) ──────────────────────── */
body.landing-page .process-step .process-step-num,
body.landing-page .process-step-num {
  font-size: 15px !important;
  font-weight: 700 !important;
  width: 42px !important;
  height: 42px !important;
}

/* ─── Stats band numbers (already at 44px from earlier — keep) ── */
body.landing-page .wd-stats .about-stat-num .elementor-heading-title {
  font-size: 44px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
body.landing-page .wd-stats .about-stat-lbl .elementor-heading-title {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  margin: 6px 0 0 !important;
}

/* ─── Mid-CTA: title size + button reset ──────────────────────── */
body.landing-page .wd-mid-cta-h h3 {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em !important;
}
body.landing-page .wd-mid-cta-lede p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #cbd5e1 !important;
  margin: 0 auto 18px !important;
  max-width: 620px !important;
}

/* ─── Problem-section column headers (color-coded already) ──── */
body.landing-page .prob-col-h h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 16px !important;
  padding-bottom: 10px !important;
}
body.landing-page .prob-x-list .elementor-icon-list-text,
body.landing-page .prob-check-list .elementor-icon-list-text {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #334155 !important;
}

/* ─── CTA banner lede tighter ─────────────────────────────────── */
body.landing-page .cta-banner-lede p {
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  margin: 0 auto 22px !important;
  max-width: 620px !important;
}