/*! v2-svc-enhance.css — premium-magazine visual overlay (Schibsted Grotesk + Figtree)
    REFACTORED 2026-05-27 for conservative cascade control.

    Strategy: trust Tailwind utility classes (text-white, text-secondary-900,
    text-gray-900, etc.) to do their job. ONLY override SPECIFIC known-broken
    patterns. NO `*` selectors with color:!important inside `[class*="bg-..."]`
    parents — those caused the cascading whack-a-mole.

    Scoped under body[data-svc-enhance]. Pure CSS — does not modify markup,
    content, SEO meta, or JSON-LD.
*/

/* ──────────────────────────────────────────────────────────────
   Fonts — Schibsted Grotesk (headings) + Figtree (body)
   Already preloaded in layouts/app.blade.php; this is a fallback @import.
   ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Schibsted+Grotesk:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ──────────────────────────────────────────────────────────────
   Tokens — scoped to enhanced pages only
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance]{
  --v2-ink:#0B1220;
  --v2-ink-2:#1F2937;
  --v2-ink-3:#374151;
  --v2-mute:#5B6573;
  --v2-mute-2:#8A93A1;
  --v2-rule:#E5EAF1;
  --v2-rule-2:rgba(11,18,32,.08);
  --v2-bg:#FFFFFF;
  --v2-bg-2:#F9FAFB;             /* SKYLINE Care page background */
  --v2-bg-3:#F3F4F6;
  --v2-blue:#0C6FB8;
  --v2-blue-2:#1E88E5;
  --v2-blue-dark:#0A5C9A;
  --v2-blue-light:#0F7BC7;
  --v2-teal:#14B8A6;
  --v2-gold:#C18A38;
  --v2-red:#B91C1C;
  --v2-sans:"Schibsted Grotesk", Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --v2-body:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --v2-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --v2-radius:22px;
  --v2-radius-sm:14px;
  --v2-radius-pill:9999px;
  --v2-shadow-sm:0 1px 2px rgba(11,18,32,.04), 0 4px 12px rgba(11,18,32,.04);
  --v2-shadow:0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.05);
  --v2-shadow-lg:0 1px 2px rgba(11,18,32,.04), 0 14px 36px rgba(11,18,32,.09);
  --v2-shadow-hover:0 12px 32px rgba(11,18,32,.10), 0 2px 6px rgba(11,18,32,.05);
  --v2-ease:cubic-bezier(.2,.8,.2,1);
}

/* ──────────────────────────────────────────────────────────────
   GLOBAL PAGE BACKGROUND — light off-white like SKYLINE Care
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance]{
  background:var(--v2-bg-2) !important;
}
body[data-svc-enhance] main{ background:transparent !important; }

/* ──────────────────────────────────────────────────────────────
   Typography — Schibsted Grotesk (headings) + Figtree (body) — EN only
   AR keeps its native Cairo/font-arabic stack
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance].font-sans,
body[data-svc-enhance].font-sans main,
body[data-svc-enhance].font-sans main p,
body[data-svc-enhance].font-sans main li,
body[data-svc-enhance].font-sans main a,
body[data-svc-enhance].font-sans main span,
body[data-svc-enhance].font-sans main button,
body[data-svc-enhance].font-sans main td,
body[data-svc-enhance].font-sans main th,
body[data-svc-enhance].font-sans .container-custom{
  font-family:var(--v2-body) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body[data-svc-enhance].font-sans main h1,
body[data-svc-enhance].font-sans main h2,
body[data-svc-enhance].font-sans main h3,
body[data-svc-enhance].font-sans main h4,
body[data-svc-enhance].font-sans main h5,
body[data-svc-enhance].font-sans main h6{
  font-family:var(--v2-sans) !important;
  -webkit-font-smoothing:antialiased;
}
body[data-svc-enhance].font-sans main h1{
  font-weight:600;
  letter-spacing:-0.035em;
  line-height:1.04;
  text-wrap:balance;
}
body[data-svc-enhance].font-sans main h2{
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.08;
  text-wrap:balance;
}
body[data-svc-enhance].font-sans main h3{
  font-weight:600;
  letter-spacing:-0.018em;
  line-height:1.18;
}
body[data-svc-enhance].font-sans main h4,
body[data-svc-enhance].font-sans main h5,
body[data-svc-enhance].font-sans main h6{
  font-weight:600;
  letter-spacing:-0.012em;
}
body[data-svc-enhance].font-arabic main h1,
body[data-svc-enhance].font-arabic main h2{
  -webkit-font-smoothing:antialiased;
  line-height:1.30;
}

/* H1 magazine size — 82px to match /about
   ONLY size & spacing, no color override (trust Tailwind utility classes) */
body[data-svc-enhance] .svc-hero h1,
body[data-svc-enhance] .mk-hero h1,
body[data-svc-enhance] .pj-hero h1,
body[data-svc-enhance] main h1{
  font-size:clamp(48px, 6vw, 82px) !important;
  font-weight:600 !important;
  letter-spacing:-0.035em !important;
  line-height:1.04 !important;
}

/* H2 / H3 / H4 body proportions (no color — trust Tailwind) */
body[data-svc-enhance] main h2:not([class*="text-"]){
  color:var(--v2-ink);
}
body[data-svc-enhance] main h2{
  font-family:var(--v2-sans) !important;
  font-size:clamp(28px, 3.6vw, 44px) !important;
  font-weight:600 !important;
  letter-spacing:-0.025em !important;
  line-height:1.08 !important;
  text-wrap:balance;
  margin-bottom:14px !important;
}
body[data-svc-enhance] main h3:not([class*="text-"]){
  color:var(--v2-ink);
}
body[data-svc-enhance] main h3{
  font-family:var(--v2-sans) !important;
  font-size:clamp(20px, 2.2vw, 26px) !important;
  font-weight:600 !important;
  letter-spacing:-0.018em !important;
  line-height:1.22 !important;
}
body[data-svc-enhance] main h4:not([class*="text-"]){
  color:var(--v2-ink);
}
body[data-svc-enhance] main h4{
  font-family:var(--v2-sans) !important;
  font-size:clamp(17px, 1.6vw, 20px) !important;
  font-weight:600 !important;
  letter-spacing:-0.012em !important;
}

/* SECTION spacing — generous like SACS-210.
   Exception list: editorial sections that ship their own padding
   (.ksk-hero needs ~200px top so the fixed nav doesn't cover the headline;
   the other .ksk-* sections need their own clamps for their unique layouts). */
body[data-svc-enhance] main section:not(.ksk-hero):not(.ksk-dc):not(.ksk-cy):not(.ksk-cyber):not(.ksk-wcu):not(.ksk-tl):not(.ksk-tw):not(.ksk-flag),
body[data-svc-enhance] main .py-16,
body[data-svc-enhance] main .py-20,
body[data-svc-enhance] main .section,
body[data-svc-enhance] main .py-12{
  padding-top:clamp(56px, 7vw, 96px) !important;
  padding-bottom:clamp(56px, 7vw, 96px) !important;
}

/* Body p lead — 20px / lh 1.55, only when no Tailwind size class is present */
body[data-svc-enhance] main h1 + p:not([class*="text-"]),
body[data-svc-enhance] main h2 + p:not([class*="text-"]){
  font-size:20px !important;
  line-height:1.55 !important;
  color:var(--v2-ink-3) !important;
}

/* General prose body — only inside .prose (not arbitrary body p) */
body[data-svc-enhance] main .prose p,
body[data-svc-enhance] main .prose li{
  font-family:var(--v2-body) !important;
  font-size:17px !important;
  line-height:1.7 !important;
  color:var(--v2-ink-3) !important;
}
body[data-svc-enhance] main .prose strong{ color:var(--v2-ink) !important; }
body[data-svc-enhance] main .prose a{ color:var(--v2-blue) !important; }

/* ──────────────────────────────────────────────────────────────
   TAILWIND UTILITY-CLASS RE-ASSERTION
   Make sure the explicit color utilities ALWAYS win.
   These are the single source of truth for text contrast.
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] .text-white{ color:#fff !important; }
body[data-svc-enhance] .text-white\/90{ color:rgba(255,255,255,.9) !important; }
body[data-svc-enhance] .text-white\/80{ color:rgba(255,255,255,.8) !important; }
body[data-svc-enhance] .text-white\/70{ color:rgba(255,255,255,.7) !important; }
body[data-svc-enhance] .text-white\/60{ color:rgba(255,255,255,.6) !important; }
body[data-svc-enhance] .text-secondary-900,
body[data-svc-enhance] .text-gray-900{ color:#0B1220 !important; }
body[data-svc-enhance] .text-secondary-800,
body[data-svc-enhance] .text-gray-800{ color:#1F2937 !important; }
body[data-svc-enhance] .text-secondary-700,
body[data-svc-enhance] .text-gray-700{ color:#374151 !important; }
body[data-svc-enhance] .text-secondary-600,
body[data-svc-enhance] .text-gray-600{ color:#5B6573 !important; }
body[data-svc-enhance] .text-secondary-500,
body[data-svc-enhance] .text-gray-500{ color:#8A93A1 !important; }
body[data-svc-enhance] .text-secondary-400,
body[data-svc-enhance] .text-gray-400{ color:#9CA3AF !important; }
body[data-svc-enhance] .text-secondary-300,
body[data-svc-enhance] .text-gray-300{ color:#D1D5DB !important; }
body[data-svc-enhance] .text-primary-600,
body[data-svc-enhance] .text-primary-700{ color:var(--v2-blue) !important; }
body[data-svc-enhance] .text-primary-300,
body[data-svc-enhance] .text-primary-400{ color:#7BD0F5 !important; }

/* ──────────────────────────────────────────────────────────────
   HERO — when the body uses the LIGHT magazine hero only,
   recolor any leading .hero-gradient. Otherwise leave it alone.
   The magazine partials set body[data-magazine-hero] and hide the
   legacy section entirely (see rules further down). On pages WITHOUT
   the magazine hero, this rule keeps existing behavior of replacing
   the dark Tailwind gradient with the light off-white.
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient,
body[data-svc-enhance]:not([data-magazine-hero]) .bg-hero-gradient,
body[data-svc-enhance]:not([data-magazine-hero]) section[class*="hero"][class*="gradient"]:first-of-type,
body[data-svc-enhance]:not([data-magazine-hero]) section.pt-32.hero-gradient{
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(20,184,166,.08) 0%, transparent 60%),
    radial-gradient(50% 60% at 10% 30%, rgba(12,111,184,.08) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--v2-bg-2) 100%) !important;
  color:var(--v2-ink) !important;
  position:relative;
}
/* Kill the dark noise overlay only on the light hero */
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient > .absolute.inset-0.opacity-10,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient > div[style*="data:image/svg+xml"]{ opacity:0 !important; }

/* Hero text becomes dark only on the LIGHT hero (pages WITHOUT magazine hero) */
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient h1,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient h2,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient h3,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient > .container-custom p,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient > div > p{
  color:var(--v2-ink) !important;
}
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .text-white,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .text-gray-100,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .text-gray-200,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .text-gray-300{
  color:var(--v2-ink) !important;
}
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .text-white\/80,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .text-white\/70{
  color:var(--v2-mute) !important;
}
/* Tag pills on light hero — recolor */
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .bg-white\/20,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .bg-white\/10,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .bg-primary-500\/20{
  background:rgba(12,111,184,.10) !important;
  color:var(--v2-blue) !important;
  border:1px solid rgba(12,111,184,.18) !important;
  backdrop-filter:none !important;
}
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .bg-white\/10 svg,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .bg-white\/20 svg{ color:var(--v2-blue) !important; }
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .text-yellow-300,
body[data-svc-enhance]:not([data-magazine-hero]) .hero-gradient .text-yellow-400{ color:var(--v2-gold) !important; }

/* ──────────────────────────────────────────────────────────────
   COUNTRY EXPANSION BANNER + dark sticky CTAs — soften
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] [style*="linear-gradient(90deg, #0f1d3a"],
body[data-svc-enhance] .bg-slate-50.border-b{
  background:var(--v2-bg) !important;
  border-color:var(--v2-rule-2) !important;
  color:var(--v2-ink) !important;
}

/* ──────────────────────────────────────────────────────────────
   TRUST BADGES
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] section[aria-label*="Trust"],
body[data-svc-enhance] section[aria-label*="شارات"]{
  background:var(--v2-bg) !important;
  border-bottom:1px solid var(--v2-rule-2) !important;
}
body[data-svc-enhance] section[aria-label*="Trust"] .w-10.h-10,
body[data-svc-enhance] section[aria-label*="شارات"] .w-10.h-10{
  width:42px !important; height:42px !important;
  border:1px solid var(--v2-rule-2) !important;
  box-shadow:var(--v2-shadow-sm);
  transition:transform .25s var(--v2-ease), box-shadow .25s var(--v2-ease);
}
body[data-svc-enhance] section[aria-label*="Trust"] .flex.items-center.gap-2:hover .w-10,
body[data-svc-enhance] section[aria-label*="شارات"] .flex.items-center.gap-2:hover .w-10{
  transform:translateY(-2px);
  box-shadow:var(--v2-shadow);
}

/* ──────────────────────────────────────────────────────────────
   BUTTONS — solid blue pill primary + ghost outline
   Scoped to <a>/<button> only (not div/section). The earlier broad
   .bg-primary-600 rule turned card-shaped divs into pills.
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] a.bg-primary-600,
body[data-svc-enhance] a.bg-primary-500,
body[data-svc-enhance] a.bg-primary-700,
body[data-svc-enhance] button.bg-primary-600,
body[data-svc-enhance] button.bg-primary-500,
body[data-svc-enhance] button.bg-primary-700,
body[data-svc-enhance] .btn-primary{
  background:var(--v2-blue) !important;
  background-image:linear-gradient(135deg, var(--v2-blue-dark) 0%, var(--v2-blue) 55%, var(--v2-blue-light) 100%) !important;
  color:#fff !important;
  border-radius:var(--v2-radius-pill) !important;
  box-shadow:0 6px 18px rgba(10,92,154,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition:transform .22s var(--v2-ease), box-shadow .22s var(--v2-ease), filter .22s var(--v2-ease);
  border:none;
  font-weight:600;
  letter-spacing:-.005em;
}
body[data-svc-enhance] a.bg-primary-600:hover,
body[data-svc-enhance] a.bg-primary-500:hover,
body[data-svc-enhance] button.bg-primary-600:hover,
body[data-svc-enhance] button.bg-primary-500:hover,
body[data-svc-enhance] .btn-primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 14px 32px rgba(10,92,154,.40);
}

/* Ghost / outline buttons — also scoped to a/button only */
body[data-svc-enhance] a.border-2.border-white,
body[data-svc-enhance] a.border-primary-600,
body[data-svc-enhance] a.border-primary-500,
body[data-svc-enhance] button.border-2.border-white,
body[data-svc-enhance] button.border-primary-600,
body[data-svc-enhance] button.border-primary-500{
  border:1.5px solid var(--v2-ink) !important;
  color:var(--v2-ink) !important;
  background:#fff !important;
  border-radius:var(--v2-radius-pill) !important;
  font-weight:600;
  transition:transform .22s var(--v2-ease), background .22s var(--v2-ease), color .22s var(--v2-ease);
}
body[data-svc-enhance] a.border-2.border-white:hover,
body[data-svc-enhance] a.border-primary-600:hover,
body[data-svc-enhance] a.border-primary-500:hover,
body[data-svc-enhance] button.border-2.border-white:hover,
body[data-svc-enhance] button.border-primary-600:hover,
body[data-svc-enhance] button.border-primary-500:hover{
  transform:translateY(-2px);
  background:var(--v2-ink) !important;
  color:#fff !important;
}

/* ──────────────────────────────────────────────────────────────
   CARDS — unify radii, soft shadows, lift on hover, accent slide
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] main .bg-white.rounded-xl,
body[data-svc-enhance] main .bg-white.rounded-2xl,
body[data-svc-enhance] main .bg-white.rounded-3xl,
body[data-svc-enhance] main .bg-white[class*="shadow"],
body[data-svc-enhance] main .bg-gray-50.rounded-xl,
body[data-svc-enhance] main .bg-gray-50.rounded-2xl{
  border-radius:var(--v2-radius) !important;
  border:1px solid var(--v2-rule-2);
  box-shadow:var(--v2-shadow);
  transition:transform .28s var(--v2-ease), box-shadow .28s var(--v2-ease), border-color .28s var(--v2-ease);
  position:relative;
  overflow:hidden;
}
body[data-svc-enhance] main .bg-white.rounded-xl:hover,
body[data-svc-enhance] main .bg-white.rounded-2xl:hover,
body[data-svc-enhance] main .bg-white.rounded-3xl:hover{
  transform:translateY(-4px);
  box-shadow:var(--v2-shadow-hover);
  border-color:transparent;
}
body[data-svc-enhance] main .bg-white.rounded-xl::before,
body[data-svc-enhance] main .bg-white.rounded-2xl::before,
body[data-svc-enhance] main .bg-white.rounded-3xl::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--v2-blue) 0%, var(--v2-teal) 100%);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--v2-ease);
  pointer-events:none;
  z-index:2;
}
body[data-svc-enhance] main .bg-white.rounded-xl:hover::before,
body[data-svc-enhance] main .bg-white.rounded-2xl:hover::before,
body[data-svc-enhance] main .bg-white.rounded-3xl:hover::before{ transform:scaleX(1); }
[dir="rtl"] body[data-svc-enhance] main .bg-white.rounded-xl::before,
[dir="rtl"] body[data-svc-enhance] main .bg-white.rounded-2xl::before,
[dir="rtl"] body[data-svc-enhance] main .bg-white.rounded-3xl::before{ transform-origin:right; }

/* Card padding + restore border-radius */
body[data-svc-enhance] main .bg-white.rounded-xl,
body[data-svc-enhance] main .bg-white.rounded-2xl,
body[data-svc-enhance] main .bg-white.rounded-3xl{
  padding:clamp(28px, 3vw, 44px) !important;
  border-radius:22px !important;
  box-shadow:0 1px 2px rgba(11,18,32,.03), 0 6px 18px rgba(11,18,32,.04) !important;
}
body[data-svc-enhance] main .bg-gray-50.rounded-xl,
body[data-svc-enhance] main .bg-gray-50.rounded-2xl{
  background:var(--v2-bg) !important;
  border:1px solid var(--v2-rule-2) !important;
  border-radius:18px !important;
}
/* Small icon-pill above h2 */
body[data-svc-enhance] main .bg-white.rounded-2xl > div:first-child > .w-10.h-10.rounded-xl,
body[data-svc-enhance] main .bg-white.rounded-3xl > div:first-child > .w-10.h-10.rounded-xl{
  width:44px !important;
  height:44px !important;
  border-radius:12px !important;
  box-shadow:none !important;
  border:1px solid var(--v2-rule-2) !important;
}

/* Grid gap — more breathing room */
body[data-svc-enhance] main .gap-6{ gap:1.5rem !important; }
body[data-svc-enhance] main .gap-8{ gap:2rem !important; }
body[data-svc-enhance] main .gap-10,
body[data-svc-enhance] main .gap-12{ gap:2.5rem !important; }

/* ──────────────────────────────────────────────────────────────
   IMAGES — premium framing
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] main .container-custom img:not([alt*="logo" i]):not([alt*="badge" i]):not([alt*="icon" i]):not(.h-8):not(.h-10):not(.h-12):not(.w-8):not(.w-10):not(.w-12),
body[data-svc-enhance] main .prose img{
  border-radius:var(--v2-radius-sm);
  box-shadow:var(--v2-shadow);
  transition:transform .35s var(--v2-ease), box-shadow .35s var(--v2-ease), opacity .5s ease;
}
body[data-svc-enhance] main img[data-v2-faded]{ opacity:0; }
body[data-svc-enhance] main img[data-v2-faded="in"]{ opacity:1; }
body[data-svc-enhance] main .container-custom a img:hover{
  transform:scale(1.015);
  box-shadow:var(--v2-shadow-lg);
}
body[data-svc-enhance] main img[data-v2-lightbox]{ cursor:zoom-in; }

/* ──────────────────────────────────────────────────────────────
   FAQ accordion
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] details summary,
body[data-svc-enhance] [class*="faq"] button[aria-expanded],
body[data-svc-enhance] [x-data*="open"] > div > button{
  font-family:var(--v2-sans) !important;
  font-weight:600;
  letter-spacing:-.010em;
  padding-block:18px;
  transition:color .2s var(--v2-ease);
}
body[data-svc-enhance] details summary:hover,
body[data-svc-enhance] [class*="faq"] button[aria-expanded]:hover{ color:var(--v2-blue) !important; }

/* ──────────────────────────────────────────────────────────────
   PROCESS / STEP numbered badges
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] [class*="step"][class*="number"],
body[data-svc-enhance] [data-step-number],
body[data-svc-enhance] .step-number,
body[data-svc-enhance] [class*="process"] [class*="number"]{
  font-family:var(--v2-mono);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--v2-blue);
}

/* ──────────────────────────────────────────────────────────────
   SHARE / CTA / sticky bars — translucent + blur
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] #share-bar,
body[data-svc-enhance] #mobile-share-bar{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:saturate(150%) blur(10px);
  border:1px solid var(--v2-rule-2);
  border-radius:var(--v2-radius);
  box-shadow:var(--v2-shadow);
}
body[data-svc-enhance] #share-bar{ opacity:.85; }
body[data-svc-enhance] #share-bar a,
body[data-svc-enhance] #share-bar button{ border-radius:12px !important; box-shadow:var(--v2-shadow-sm) !important; }

/* ──────────────────────────────────────────────────────────────
   BREADCRUMB
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] nav[aria-label*="Breadcrumb"],
body[data-svc-enhance] nav[aria-label*="مسار"]{
  background:var(--v2-bg) !important;
  border-bottom:1px solid var(--v2-rule-2) !important;
}

/* ──────────────────────────────────────────────────────────────
   SCROLL PROGRESS sliver (drawn by JS)
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] #v2-scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--v2-blue) 0%, var(--v2-teal) 100%);
  z-index:99999;
  transition:width .12s linear;
  pointer-events:none;
}

/* ──────────────────────────────────────────────────────────────
   LIGHTBOX (drawn by JS)
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] #v2-lightbox{
  position:fixed; inset:0; z-index:99998;
  background:rgba(11,18,32,.92);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center; justify-content:center;
  padding:5vh 5vw;
  cursor:zoom-out;
  animation:v2lbIn .25s var(--v2-ease);
}
body[data-svc-enhance] #v2-lightbox.is-open{ display:flex; }
body[data-svc-enhance] #v2-lightbox img{
  max-width:100%; max-height:100%;
  border-radius:var(--v2-radius);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
body[data-svc-enhance] #v2-lightbox button.close{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s var(--v2-ease), transform .2s var(--v2-ease);
}
body[data-svc-enhance] #v2-lightbox button.close:hover{ background:rgba(255,255,255,.18); transform:scale(1.06); }
@keyframes v2lbIn{ from{opacity:0} to{opacity:1} }

/* STAT counters pre-animation */
body[data-svc-enhance] [data-v2-counter]:not([data-v2-counter-done]){
  font-variant-numeric:tabular-nums;
}

/* ──────────────────────────────────────────────────────────────
   BESPOKE PAGE NAMESPACES (sacs / ksa / about / skyline-care / v2d/mk/pj)
   These have their OWN scoped CSS in /css. Don't touch their colours,
   only align font-family.
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] .v2d-page,
body[data-svc-enhance] .mkv2d-page,
body[data-svc-enhance] .pjv2d-page,
body[data-svc-enhance] .sacs-page,
body[data-svc-enhance] .ksa-page,
body[data-svc-enhance] .mk-page{
  font-family:var(--v2-body) !important;
}
body[data-svc-enhance] .v2d-page h1,
body[data-svc-enhance] .v2d-page h2,
body[data-svc-enhance] .v2d-page h3,
body[data-svc-enhance] .mkv2d-page h1,
body[data-svc-enhance] .mkv2d-page h2,
body[data-svc-enhance] .mkv2d-page h3,
body[data-svc-enhance] .pjv2d-page h1,
body[data-svc-enhance] .pjv2d-page h2,
body[data-svc-enhance] .pjv2d-page h3,
body[data-svc-enhance] .sacs-page h1,
body[data-svc-enhance] .sacs-page h2,
body[data-svc-enhance] .sacs-page h3,
body[data-svc-enhance] .ksa-page h1,
body[data-svc-enhance] .ksa-page h2,
body[data-svc-enhance] .ksa-page h3,
body[data-svc-enhance] .mk-page h1,
body[data-svc-enhance] .mk-page h2,
body[data-svc-enhance] .mk-page h3{
  font-family:var(--v2-sans) !important;
  letter-spacing:-.030em;
}

/* Re-assert background-clip:text on bespoke gradient titles so
   our global h2 ink color doesn't kill them.
   IMPORTANT: .ksa-h2 only gets the white→blue gradient when it sits
   inside a dark .ksa-section--ink (or the dark CTA band). On light
   sections (offers, cities) the same gradient was rendering as
   white-on-white = invisible, which is what made the headings look
   "faded". */
body[data-svc-enhance] main .v2d-ctabar__h,
body[data-svc-enhance] main .pjv2d-ctabar__h,
body[data-svc-enhance] main .mkv2d-ctabar__h,
body[data-svc-enhance] main .sacs-h2,
body[data-svc-enhance] main .sacs-cases h2,
body[data-svc-enhance] main .sacs-cta-band__h,
body[data-svc-enhance] main .ksa-section--ink .ksa-h2,
body[data-svc-enhance] main .ksa-cta-band__h,
body[data-svc-enhance] main .ab-cta__h,
body[data-svc-enhance] main .skc-section--dark .skc-h2{
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
body[data-svc-enhance] main .v2d-ctabar__h,
body[data-svc-enhance] main .pjv2d-ctabar__h,
body[data-svc-enhance] main .mkv2d-ctabar__h,
body[data-svc-enhance] main .ksa-section--ink .ksa-h2,
body[data-svc-enhance] main .ksa-cta-band__h,
body[data-svc-enhance] main .skc-section--dark .skc-h2{
  background:linear-gradient(180deg,#fff 0%,#A8C5E3 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
/* Force solid ink color for .ksa-h2 on light sections (offers, cities)
   so it isn't accidentally affected by other gradient-text cascades. */
body[data-svc-enhance] main .ksa-section:not(.ksa-section--ink):not(.ksa-cta-band) .ksa-h2{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:#0B1220 !important;
  -webkit-text-fill-color:#0B1220 !important;
}
body[data-svc-enhance] main .sacs-h2,
body[data-svc-enhance] main .sacs-cases h2,
body[data-svc-enhance] main .sacs-cta-band__h{
  background:linear-gradient(180deg,#fff 0%,#FCA5A5 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
body[data-svc-enhance] main .ab-cta__h .grad-text{
  background:linear-gradient(135deg,#7BD0F5 0%,#14B8A6 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
body[data-svc-enhance] main section.ab-cta .ab-cta__h{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
body[data-svc-enhance] main .ab-cta__btn{
  background:#fff !important;
  color:var(--v2-ink) !important;
  -webkit-text-fill-color:var(--v2-ink) !important;
  font-weight:600 !important;
  border-radius:9999px !important;
  padding:15px 28px !important;
  box-shadow:0 8px 22px rgba(255,255,255,.16) !important;
  transition:transform .2s var(--v2-ease), background .2s var(--v2-ease), color .2s var(--v2-ease);
}
body[data-svc-enhance] main .ab-cta__btn:hover{
  background:var(--v2-teal) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  transform:translateY(-2px);
}
body[data-svc-enhance] main .ab-cta__btn[href^="tel:"]{
  background:rgba(255,255,255,.08) !important;
  background-image:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:none !important;
  backdrop-filter:blur(8px);
}
body[data-svc-enhance] main .ab-cta__btn[href^="tel:"]:hover{
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  transform:translateY(-2px);
}

/* SKYLINE Care signup form */
body[data-svc-enhance] main .skc-signup-wrap,
body[data-svc-enhance] main .skc-signup-wrap *{
  color:var(--v2-ink) !important;
  -webkit-text-fill-color:var(--v2-ink) !important;
}
body[data-svc-enhance] main .skc-signup-wrap .signup-privacy,
body[data-svc-enhance] main .skc-signup-wrap .signup-field label{
  color:var(--v2-ink-3) !important;
  -webkit-text-fill-color:var(--v2-ink-3) !important;
}
body[data-svc-enhance] main .signup-submit-btn{
  background:var(--v2-blue) !important;
  background-image:linear-gradient(135deg, var(--v2-blue-dark) 0%, var(--v2-blue) 55%, var(--v2-blue-light) 100%) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:none !important;
  border-radius:var(--v2-radius-pill) !important;
  font-family:var(--v2-sans) !important;
  font-weight:600 !important;
  font-size:15px !important;
  letter-spacing:-.005em !important;
  padding:14px 32px !important;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(10,92,154,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition:transform .22s var(--v2-ease), box-shadow .22s var(--v2-ease), filter .22s var(--v2-ease);
}
body[data-svc-enhance] main .signup-submit-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 14px 32px rgba(10,92,154,.40) !important;
}
body[data-svc-enhance] main .signup-submit-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

/* ──────────────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-svc-enhance] *,
  body[data-svc-enhance] *::before,
  body[data-svc-enhance] *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   PRINT
   ────────────────────────────────────────────────────────────── */
@media print {
  body[data-svc-enhance]{ background:#fff !important; color:#000 !important; }
  body[data-svc-enhance] .hero-gradient{ background:#fff !important; }
  body[data-svc-enhance] *{ box-shadow:none !important; }
}

/* ──────────────────────────────────────────────────────────────
   MAGAZINE HERO — hide the legacy hero on pages where the
   magazine partial set body[data-magazine-hero="1"]
   ────────────────────────────────────────────────────────────── */
body[data-magazine-hero] .svc-hero ~ section.hero-gradient,
body[data-magazine-hero] section.svc-hero + section.hero-gradient{
  display:none !important;
}
body[data-magazine-hero] .mk-hero ~ section.hero-gradient,
body[data-magazine-hero] section.mk-hero + section.hero-gradient{
  display:none !important;
}
body[data-magazine-hero] .pj-hero ~ section.hero-gradient,
body[data-magazine-hero] section.pj-hero + section.hero-gradient{
  display:none !important;
}
body[data-magazine-hero] section.pj-hero + section.relative.min-h-\[420px\],
body[data-magazine-hero] section.pj-hero + section.relative{
  display:none !important;
}
html[data-magazine-hero] body .pt-32.pb-20.hero-gradient{
  display:none !important;
}

/* Smooth introduction for the new hero */
@media (prefers-reduced-motion: no-preference){
  .svc-hero, .mk-hero, .pj-hero{
    animation: v2-magfade .4s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes v2-magfade{
    from{ opacity:0; transform: translateY(8px); }
    to  { opacity:1; transform: none; }
  }
}

/* When a magazine hero is present, trailing .hero-gradient CTA bands
   become DARK ink so the second-half conversion CTA is visible. */
body[data-svc-enhance][data-magazine-hero] .svc-hero ~ * section.hero-gradient,
body[data-svc-enhance][data-magazine-hero] .mk-hero ~ * section.hero-gradient,
body[data-svc-enhance][data-magazine-hero] .pj-hero ~ * section.hero-gradient,
body[data-svc-enhance][data-magazine-hero] main .hero-gradient{
  background:var(--v2-ink) !important;
  background-color:var(--v2-ink) !important;
  background-image:
    radial-gradient(60% 60% at 50% 0%, rgba(12,111,184,.18) 0%, transparent 60%),
    radial-gradient(40% 60% at 50% 100%, rgba(20,184,166,.14) 0%, transparent 60%),
    linear-gradient(135deg, var(--v2-ink) 0%, var(--v2-ink-2) 100%) !important;
  color:#fff !important;
}

/* ──────────────────────────────────────────────────────────────
   ARTICLE-FEEL ELEMENTS — hide so service pages look like premium
   pages, not WordPress posts.
   ────────────────────────────────────────────────────────────── */

/* (1) Table of Contents pill bar */
body[data-svc-enhance] nav[aria-label="Table of Contents"],
body[data-svc-enhance] nav[aria-label="جدول المحتويات"]{
  display:none !important;
}

/* (2) Article byline */
body[data-svc-enhance] .bg-gray-50.border-b.border-gray-100 > .container-custom.py-2,
body[data-svc-enhance] main time[datetime^="2026"]{
  display:none !important;
}
body[data-svc-enhance] main .bg-gray-50.border-b.border-gray-100:has(time[datetime^="2026"]){
  display:none !important;
}

/* (3) Sticky red 24/7 emergency banner — restyle to magazine ink */
body[data-svc-enhance] .sticky.top-0.z-50.bg-red-600{
  position:relative !important;
  top:auto !important;
  background:var(--v2-ink) !important;
  background-image:linear-gradient(135deg, var(--v2-ink) 0%, var(--v2-ink-2) 100%) !important;
  box-shadow:none !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
body[data-svc-enhance] .sticky.top-0.z-50.bg-red-600 .container-custom{
  padding-top:14px !important;
  padding-bottom:14px !important;
}
body[data-svc-enhance] .sticky.top-0.z-50.bg-red-600 svg.text-yellow-300.animate-pulse{
  display:none !important;
}
body[data-svc-enhance] .sticky.top-0.z-50.bg-red-600 .flex.items-center.gap-2 > span.font-bold::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#EF4444;
  box-shadow:0 0 0 0 rgba(239,68,68,.55);
  animation:v2-emergency-pulse 2s var(--v2-ease) infinite;
  margin-inline-end:10px;
  vertical-align:middle;
  flex-shrink:0;
  position:relative;
  top:-1px;
}
@keyframes v2-emergency-pulse{
  0%   { box-shadow:0 0 0 0 rgba(239,68,68,.55); }
  70%  { box-shadow:0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow:0 0 0 0 rgba(239,68,68,0); }
}
body[data-svc-enhance] .sticky.top-0.z-50.bg-red-600 a,
body[data-svc-enhance] .sticky.top-0.z-50.bg-red-600 button{
  background:rgba(255,255,255,.10) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:var(--v2-radius-pill) !important;
  padding:6px 14px !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:#fff !important;
  backdrop-filter:saturate(140%) blur(6px);
  transition:background .2s var(--v2-ease);
  box-shadow:none !important;
}
body[data-svc-enhance] .sticky.top-0.z-50.bg-red-600 a:hover,
body[data-svc-enhance] .sticky.top-0.z-50.bg-red-600 button:hover{
  background:rgba(239,68,68,.45) !important;
  border-color:rgba(239,68,68,.55) !important;
}

/* (4) Inline lead form (the floating "Need This Service" pill) */
body[data-svc-enhance] section[class*="service-lead"],
body[data-svc-enhance] .service-lead-form,
body[data-svc-enhance] [class*="inline-lead"]{
  background:var(--v2-bg) !important;
  border-radius:var(--v2-radius) !important;
  border:1px solid var(--v2-rule-2);
}

/* (5) Country expansion banner — hide on enhanced pages */
body[data-svc-enhance] section[class*="country-expansion"],
body[data-svc-enhance] .country-expansion-banner{
  display:none !important;
}

/* ──────────────────────────────────────────────────────────────
   PAGE (not POST) — hide WordPress-style sidebar on service pages.
   The conversion path is the hero CTA + bottom dark CTA band.
   ────────────────────────────────────────────────────────────── */

body[data-svc-enhance] main section.bg-white .grid.lg\:grid-cols-3 > .lg\:col-span-1{
  display:none !important;
}
body[data-svc-enhance] main section.bg-white .grid.lg\:grid-cols-3{
  grid-template-columns:1fr !important;
}
body[data-svc-enhance] main section.bg-white .grid.lg\:grid-cols-3 > .lg\:col-span-2{
  max-width:min(900px, 100%);
  margin:0 auto;
}
body[data-svc-enhance] main .grid.grid-cols-1.lg\:grid-cols-3 > .lg\:col-span-1{
  display:none !important;
}
body[data-svc-enhance] main .grid.grid-cols-1.lg\:grid-cols-3{
  grid-template-columns:1fr !important;
}
body[data-svc-enhance] main .grid.grid-cols-1.lg\:grid-cols-3 > .lg\:col-span-2{
  max-width:min(960px, 100%);
  margin:0 auto;
}

/* SERVICE IMAGE — full-width hero-like inside the article column */
body[data-svc-enhance] main section.bg-white .lg\:col-span-2 > .rounded-2xl.overflow-hidden:first-child,
body[data-svc-enhance] main section.bg-white .lg\:col-span-2 > .rounded-2xl.overflow-hidden.shadow-lg{
  border-radius:var(--v2-radius) !important;
  box-shadow:var(--v2-shadow-lg) !important;
  margin-bottom:clamp(40px, 5vw, 64px) !important;
}
body[data-svc-enhance] main section.bg-white .lg\:col-span-2 > .rounded-2xl.overflow-hidden img{
  width:100%;
  height:auto;
  display:block;
}

/* ──────────────────────────────────────────────────────────────
   HERO → next-section gap kill (eliminate the 96px wasted gap)
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] .svc-hero + section,
body[data-svc-enhance] .mk-hero + section,
body[data-svc-enhance] .pj-hero + section,
body[data-svc-enhance] section.hero-gradient + section,
body[data-svc-enhance] section.hero-gradient + div + section,
body[data-svc-enhance] section.hero-gradient + nav,
body[data-svc-enhance] section.hero-gradient + div{
  padding-top:0 !important;
}
body[data-svc-enhance] .svc-hero + section[aria-label*="Trust"],
body[data-svc-enhance] .svc-hero + section[aria-label*="شارات"],
body[data-svc-enhance] .mk-hero + section[aria-label*="Trust"],
body[data-svc-enhance] .pj-hero + section[aria-label*="Trust"]{
  padding-top:18px !important;
  padding-bottom:18px !important;
}
body[data-svc-enhance] .sticky.bg-red-600,
body[data-svc-enhance] .sticky.top-0.z-50.bg-red-600{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* ──────────────────────────────────────────────────────────────
   HEADER — solid white chrome over the new light hero
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] header.fixed{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:saturate(140%) blur(10px);
  isolation:isolate;
}

/* Header nav text — force ink (Alpine swaps text-white on scroll, we override) */
body[data-svc-enhance] header.fixed a,
body[data-svc-enhance] header.fixed > div a,
body[data-svc-enhance] header.fixed nav a,
body[data-svc-enhance] header.fixed nav button,
body[data-svc-enhance] header.fixed nav span,
body[data-svc-enhance] header.fixed nav div:not([class*="bg-"]):not([class*="rounded-full"]){
  color:var(--v2-ink) !important;
}
body[data-svc-enhance] header.fixed .text-white,
body[data-svc-enhance] header.fixed .text-white\/90,
body[data-svc-enhance] header.fixed .text-white\/80,
body[data-svc-enhance] header.fixed .text-white\/70,
body[data-svc-enhance] header.fixed [class*="text-white"]{
  color:var(--v2-ink) !important;
}
body[data-svc-enhance] header.fixed a:hover{
  color:var(--v2-blue) !important;
}

/* Top utility bar (24/7 Available, info@, +966...) — ensure ink-colored */
body[data-svc-enhance] header .bg-gray-50,
body[data-svc-enhance] header .bg-secondary-50,
body[data-svc-enhance] header .bg-secondary-900{
  background:var(--v2-bg-2) !important;
}
body[data-svc-enhance] header .bg-gray-50 a,
body[data-svc-enhance] header .bg-gray-50 span,
body[data-svc-enhance] header .bg-secondary-50 a,
body[data-svc-enhance] header .bg-secondary-50 span,
body[data-svc-enhance] header .bg-secondary-900 a,
body[data-svc-enhance] header .bg-secondary-900 span{
  color:var(--v2-ink) !important;
}

/* Header CTA pill — always blue gradient with white text */
body[data-svc-enhance] header a[href*="contact"],
body[data-svc-enhance] header a[href*="contact"] *,
body[data-svc-enhance] header a[href*="contact"][class*="rounded-full"],
body[data-svc-enhance] header .bg-gradient-to-r.from-primary-600,
body[data-svc-enhance] header .bg-gradient-to-r.from-primary-500,
body[data-svc-enhance] header a[href*="contact"][class*="bg-white"]{
  background:var(--v2-blue) !important;
  background-image:linear-gradient(135deg, var(--v2-blue-dark) 0%, var(--v2-blue) 55%, var(--v2-blue-light) 100%) !important;
  color:#fff !important;
  border-radius:var(--v2-radius-pill) !important;
  box-shadow:0 6px 18px rgba(10,92,154,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  border:none !important;
  padding:10px 22px !important;
  font-weight:600;
}
body[data-svc-enhance] header.fixed a[href*="contact"],
body[data-svc-enhance] header.fixed a[href*="contact"] *,
body[data-svc-enhance] header.fixed .btn-primary,
body[data-svc-enhance] header.fixed .btn-primary *,
body[data-svc-enhance] header.fixed a.bg-primary-600,
body[data-svc-enhance] header.fixed a.bg-primary-600 *,
body[data-svc-enhance] header.fixed button.bg-primary-600,
body[data-svc-enhance] header.fixed button.bg-primary-600 *{
  color:#fff !important;
}

/* Header nav top-level gaps */
body[data-svc-enhance] header nav .flex.items-center.gap-2,
body[data-svc-enhance] header nav .flex.items-center.gap-1{
  gap:.4rem !important;
}
body[data-svc-enhance] header nav > .flex > a,
body[data-svc-enhance] header nav > .flex > div > a,
body[data-svc-enhance] header nav > .flex > div > button{
  padding-left:.85rem !important;
  padding-right:.85rem !important;
}
body[data-svc-enhance] header > div > div{ gap:.25rem !important; }

body[data-svc-enhance] header img{ opacity:1 !important; }
body[data-svc-enhance] header svg{ color:inherit !important; }

/* ──────────────────────────────────────────────────────────────
   MOBILE DRAWER
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] header > div[x-show="mobileMenuOpen"],
body[data-svc-enhance] header > .lg\:hidden[x-show="mobileMenuOpen"]{
  position:fixed !important;
  top:64px !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  background:#fff !important;
  z-index:55 !important;
  overflow-y:auto !important;
  padding:1.25rem;
}
body[data-svc-enhance] header [x-show="mobileMenuOpen"].fixed.inset-0,
body[data-svc-enhance] header [x-show="mobileMenuOpen"][class*="inset-0"]{
  top:64px !important;
}
body[data-svc-enhance] header [x-show="mobileMenuOpen"] a,
body[data-svc-enhance] header [x-show="mobileMenuOpen"] button,
body[data-svc-enhance] header [x-show="mobileMenuOpen"] span:not([class*="bg-"]):not([class*="rounded-full"]),
body[data-svc-enhance] header [x-show="mobileMenuOpen"] div:not([class*="bg-"]):not([class*="rounded-"]){
  color:var(--v2-ink) !important;
}
body[data-svc-enhance] header [x-show="mobileMenuOpen"] .bg-primary-50,
body[data-svc-enhance] header [x-show="mobileMenuOpen"] .bg-primary-100{
  background:rgba(12,111,184,.10) !important;
}
body[data-svc-enhance] header [x-show="mobileMenuOpen"] .text-primary-600,
body[data-svc-enhance] header [x-show="mobileMenuOpen"] .text-primary-700{
  color:var(--v2-blue) !important;
}
body[data-svc-enhance] header [x-show="mobileMenuOpen"] .bg-primary-500,
body[data-svc-enhance] header [x-show="mobileMenuOpen"] .bg-primary-600,
body[data-svc-enhance] header [x-show="mobileMenuOpen"] a[href*="contact"]{
  background-image:linear-gradient(135deg, var(--v2-blue-dark) 0%, var(--v2-blue) 55%, var(--v2-blue-light) 100%) !important;
  color:#fff !important;
}
body[data-svc-enhance] header [x-show="mobileMenuOpen"] a[href*="contact"] *{
  color:#fff !important;
}
body[data-svc-enhance] header button.lg\:hidden{
  z-index:61 !important;
  position:relative;
}

/* ──────────────────────────────────────────────────────────────
   SK-LEAD-PANEL (dark blue lead panel that appears in service pages)
   Title gradient + body/muted force white on the dark blue bg.
   The page sets `background: linear-gradient(...)` inline; we add a
   solid `background-color` so contrast audits / dark-mode-aware
   tools can see the panel as dark. Gradient still paints over.
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] main .sk-lead-panel{
  background-color:#08306b !important;
  color:#fff !important;
}
body[data-svc-enhance] main .sk-lead-panel h2,
body[data-svc-enhance] main .sk-lead-panel h3,
body[data-svc-enhance] main .sk-lead-panel h4,
body[data-svc-enhance] main .sk-lead-panel li,
body[data-svc-enhance] main .sk-lead-panel a{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
body[data-svc-enhance] main .sk-lead-panel .sk-lead-body,
body[data-svc-enhance] main .sk-lead-panel p.sk-lead-body{
  color:rgba(255,255,255,.88) !important;
  -webkit-text-fill-color:rgba(255,255,255,.88) !important;
}
body[data-svc-enhance] main .sk-lead-panel .sk-lead-muted,
body[data-svc-enhance] main .sk-lead-panel span.sk-lead-muted{
  color:rgba(255,255,255,.65) !important;
  -webkit-text-fill-color:rgba(255,255,255,.65) !important;
}
body[data-svc-enhance] main .sk-lead-panel .sk-lead-title{
  background:linear-gradient(180deg,#fff 0%,#A8C5E3 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
}
body[data-svc-enhance] main .sk-lead-panel .sk-lead-check{
  color:#34d399 !important;
  -webkit-text-fill-color:#34d399 !important;
}
/* Eyebrow pill inside lead panel — make it readable on dark */
body[data-svc-enhance] main .sk-lead-panel .bg-primary-500\/20,
body[data-svc-enhance] main .sk-lead-panel span[class*="bg-primary"],
body[data-svc-enhance] main .sk-lead-panel .inline-block.bg-primary-500\/20{
  background:rgba(123,208,245,.20) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

/* ──────────────────────────────────────────────────────────────
   SIDEBAR (Project Details / Quick Stats) — dark stat-card feel
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] main aside .bg-white.rounded-2xl,
body[data-svc-enhance] main .lg\:col-span-1 .bg-white.rounded-2xl{
  background:var(--v2-ink) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
body[data-svc-enhance] main aside .bg-white.rounded-2xl h2,
body[data-svc-enhance] main aside .bg-white.rounded-2xl h3,
body[data-svc-enhance] main aside .bg-white.rounded-2xl p,
body[data-svc-enhance] main aside .bg-white.rounded-2xl span,
body[data-svc-enhance] main aside .bg-white.rounded-2xl div{
  color:#fff !important;
}
body[data-svc-enhance] main aside .bg-white.rounded-2xl .text-gray-500,
body[data-svc-enhance] main aside .bg-white.rounded-2xl .text-gray-600,
body[data-svc-enhance] main aside .bg-white.rounded-2xl .text-secondary-500,
body[data-svc-enhance] main aside .bg-white.rounded-2xl .text-secondary-600{
  color:rgba(255,255,255,.72) !important;
}

/* ──────────────────────────────────────────────────────────────
   "Need This Service?" / inline gradient CTA cards
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] aside .bg-primary-600.rounded-2xl,
body[data-svc-enhance] main .bg-primary-600.rounded-2xl,
body[data-svc-enhance] main div.bg-primary-600.sticky{
  background:var(--v2-ink) !important;
  background-image:linear-gradient(135deg, var(--v2-ink) 0%, var(--v2-ink-2) 100%) !important;
  border-radius:var(--v2-radius) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  padding:clamp(28px, 3vw, 40px) !important;
  color:#fff !important;
}
body[data-svc-enhance] main .bg-primary-600.rounded-2xl h2,
body[data-svc-enhance] main .bg-primary-600.rounded-2xl h3,
body[data-svc-enhance] main .bg-primary-600.rounded-2xl p,
body[data-svc-enhance] main .bg-primary-600.rounded-2xl a,
body[data-svc-enhance] main .bg-primary-600.rounded-2xl span,
body[data-svc-enhance] main .bg-primary-600.rounded-2xl div{
  color:#fff !important;
}
body[data-svc-enhance] main .bg-primary-600.rounded-2xl h3{
  background:linear-gradient(180deg,#fff 0%,#A8C5E3 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  font-size:clamp(22px, 2.4vw, 28px) !important;
  letter-spacing:-.020em;
}
body[data-svc-enhance] main .bg-primary-600.rounded-2xl a.btn-white,
body[data-svc-enhance] main .bg-primary-600.rounded-2xl a[class*="bg-white"]{
  background:#fff !important;
  background-image:none !important;
  color:var(--v2-ink) !important;
  border-radius:var(--v2-radius-pill) !important;
  font-weight:600;
  padding:13px 22px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  box-shadow:0 6px 18px rgba(255,255,255,.20);
}

/* Lead-form gradient card (cta.blade.php "Together / Get a Free Quote") */
body[data-svc-enhance] section[class*="from-primary"][class*="to-"]{
  background:var(--v2-ink) !important;
  background-color:var(--v2-ink) !important;
  background-image:linear-gradient(135deg, var(--v2-ink) 0%, var(--v2-ink-2) 100%) !important;
  border-radius:0 !important;
  color:#fff !important;
}
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] h1,
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] h2,
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] h3,
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] h4,
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] p,
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] li{
  color:#fff !important;
}
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] h2 .text-primary-300{
  background:linear-gradient(135deg,#7BD0F5 0%,#14B8A6 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-weight:700 !important;
}
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] a[class*="bg-white"]{
  background:#fff !important;
  background-image:none !important;
  color:var(--v2-ink) !important;
  border-radius:var(--v2-radius-pill) !important;
  box-shadow:0 8px 24px rgba(255,255,255,.20), 0 2px 6px rgba(11,18,32,.18) !important;
  font-weight:600 !important;
  padding:14px 28px !important;
}
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] a[class*="bg-white"]:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(255,255,255,.28), 0 4px 10px rgba(11,18,32,.22) !important;
}
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] a[class*="bg-white"],
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] a[class*="bg-white"] *{
  color:var(--v2-ink) !important;
}
body[data-svc-enhance] section[class*="from-primary"][class*="to-"] a[class*="bg-white"] svg{
  color:var(--v2-ink) !important;
  stroke:var(--v2-ink) !important;
}

/* Pricing tier cards (Small/Medium/Large) — magazine v2 ink wrap */
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50{
  background:var(--v2-ink) !important;
  background-color:var(--v2-ink) !important;
  background-image:
    radial-gradient(60% 60% at 0% 0%, rgba(12,111,184,.18) 0%, transparent 60%),
    radial-gradient(50% 60% at 100% 100%, rgba(20,184,166,.14) 0%, transparent 60%),
    linear-gradient(135deg, var(--v2-ink) 0%, var(--v2-ink-2) 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:var(--v2-radius) !important;
  color:#fff !important;
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 h2,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 h3,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 h4,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 p,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 li,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 span,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 strong{
  color:#fff !important;
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 h2{
  background:linear-gradient(180deg,#fff 0%,#A8C5E3 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-xl{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.30), 0 12px 32px rgba(0,0,0,.20) !important;
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-xl:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(20,184,166,.40) !important;
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .text-3xl.font-bold.text-primary-600{
  background:linear-gradient(135deg,#7BD0F5 0%,#14B8A6 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-primary-600.text-white.px-4.py-1.rounded-full{
  background:linear-gradient(135deg,var(--v2-blue) 0%,var(--v2-teal) 100%) !important;
  background-image:linear-gradient(135deg,var(--v2-blue) 0%,var(--v2-teal) 100%) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(20,184,166,.32) !important;
  font-weight:700 !important;
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-xl.border-primary-500{
  border:1px solid rgba(20,184,166,.55) !important;
  background:rgba(20,184,166,.06) !important;
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 a.bg-primary-600{
  background:#fff !important;
  background-image:none !important;
  color:var(--v2-ink) !important;
  border-radius:var(--v2-radius-pill) !important;
  padding:13px 22px !important;
  font-weight:600 !important;
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 a.bg-primary-600:hover{
  background:linear-gradient(135deg,#7BD0F5 0%,#14B8A6 100%) !important;
  color:#fff !important;
  transform:translateY(-2px);
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-blue-50{
  background:rgba(123,208,245,.08) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:12px !important;
}

/* "What Affects Pricing?" sub-card (.bg-white.rounded-lg.border-l-4)
   sits INSIDE the pricing wrap — recolor as a translucent dark card. */
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-lg.border-l-4,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-lg{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-left:3px solid var(--v2-teal) !important;
  border-radius:14px !important;
}
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-lg h3,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-lg h4,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-lg span,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-lg strong,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-lg p,
body[data-svc-enhance] main .bg-gradient-to-br.from-blue-50.to-indigo-50 .bg-white.rounded-lg li{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* ──────────────────────────────────────────────────────────────
   EYEBROW / STEP utility classes for JS-injected accents
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] main .v2-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(12,111,184,.10);
  color:var(--v2-blue);
  font-family:var(--v2-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:14px;
}
body[data-svc-enhance] main .v2-stepnum{
  font-family:var(--v2-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--v2-blue);
  background:rgba(12,111,184,.10);
  padding:4px 10px;
  border-radius:6px;
  display:inline-block;
  margin-bottom:14px;
}

/* ──────────────────────────────────────────────────────────────
   FINAL: surgical contrast fixes for known-broken pill spans
   The /offers/web-design "NEXT STEP" pill and similar small accent
   chips on light bgs sometimes have weak text-primary-700/primary-600
   contrast against light-tinted pill backgrounds. Re-assert deep blue.
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] main span.inline-block.bg-primary-100,
body[data-svc-enhance] main span.inline-block.bg-primary-50,
body[data-svc-enhance] main .bg-primary-100.text-primary-700,
body[data-svc-enhance] main .bg-primary-50.text-primary-700,
body[data-svc-enhance] main .bg-primary-100.text-primary-600{
  background:rgba(12,111,184,.10) !important;
  color:var(--v2-blue-dark) !important;
}

/* /offers/web-design — page sets `.sk-compare-section { background:#0b1220 }`
   and `.sk-offer-grad { background:linear-gradient(...) }` via inline <style>.
   Add solid background-color fallback so audit tools can detect the dark bg
   (gradient still paints over). */
body[data-svc-enhance] section.sk-offer-grad{
  background-color:#08306b !important;
  color:#fff !important;
}
body[data-svc-enhance] section.sk-compare-section{
  background-color:#0b1220 !important;
  color:#fff !important;
}
body[data-svc-enhance] section.sk-offer-grad .text-white\/85,
body[data-svc-enhance] section.sk-offer-grad .text-white\/80,
body[data-svc-enhance] section.sk-compare-section .text-white\/85{
  color:rgba(255,255,255,.85) !important;
}
/* Headings inside the offer/compare bands always white when no explicit Tailwind class */
body[data-svc-enhance] section.sk-offer-grad h1,
body[data-svc-enhance] section.sk-offer-grad h2,
body[data-svc-enhance] section.sk-offer-grad h3,
body[data-svc-enhance] section.sk-offer-grad h4,
body[data-svc-enhance] section.sk-compare-section h1,
body[data-svc-enhance] section.sk-compare-section h2,
body[data-svc-enhance] section.sk-compare-section h3{
  color:#fff !important;
}
body[data-svc-enhance] section.sk-offer-grad h2 span[class*="text-amber"],
body[data-svc-enhance] section.sk-offer-grad span[class*="text-amber"]{
  color:#FDE68A !important;
}

/* Lead submit button (service-lead-form) — already a blue gradient,
   add solid background-color fallback so audit/dark-mode tools see
   the deep blue surface (gradient still paints over). */
body[data-svc-enhance] button#lead-submit-btn,
body[data-svc-enhance] #lead-submit-btn{
  background-color:var(--v2-blue-dark) !important;
}

/* End of file */

/* ──────────────────────────────────────────────────────────────
   HEADER CTA NO-WRAP — German "Angebot anfordern", French "Demander
   un devis" etc are longer than English "Get a Quote" and were
   wrapping to 2 lines, making the button look broken (60px tall).
   ────────────────────────────────────────────────────────────── */
body[data-svc-enhance] header.fixed a[href*="contact"]{
  white-space:nowrap !important;
  padding:10px 22px !important;
  line-height:1.2 !important;
  min-height:auto !important;
  height:auto !important;
}
body[data-svc-enhance] header.fixed a[href*="contact"] span,
body[data-svc-enhance] header.fixed a[href*="contact"] > *{
  white-space:nowrap !important;
}