/* Gracia Service Pages 1.0.0 – loaded only on the five new pages and where [gracia_funnel_services] is used.
   Uses the Gracia Pro design tokens (--gd-*) with literal fallbacks. Mobile-first, 360px+. */

.gsp-c-blue   { --gsp-c: var(--gd-blue, #004aad);       --gsp-c-bg: var(--gd-blue-50, #eef4ff); --gsp-c-ink: #fff; }
.gsp-c-green  { --gsp-c: var(--gd-green-700, #2b7a35);  --gsp-c-bg: #eaf7ec; --gsp-c-ink: #fff; }
.gsp-c-yellow { --gsp-c: var(--gd-yellow, #fec105);     --gsp-c-bg: #fff6d6; --gsp-c-ink: var(--gd-ink, #0a1630); }
.gsp-c-red    { --gsp-c: var(--gd-red-700, #b81a35);    --gsp-c-bg: #fdecef; --gsp-c-ink: #fff; }

/* Elementor HTML widgets used by this plugin always span their container. */
.e-con > .elementor-widget.gsp-html, .elementor-widget.gsp-html { width: 100%; max-width: 100%; }

/* ---------- Leak / fix tags ---------- */
.gsp-tag {
	display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px;
	font: 700 .72rem/1 var(--gd-font-body, Inter, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase;
	padding: 5px 9px; border-radius: 999px; margin-right: 6px; white-space: nowrap;
}
.gsp-tag svg { flex: 0 0 auto; }
.gsp-tag--leak { background: #fdecef; color: var(--gd-red-700, #b81a35); }
.gsp-tag--fix  { background: #eaf7ec; color: var(--gd-green-700, #2b7a35); }

/* ---------- Stage bar (hero card, dark background) ---------- */
.gsp-stagebar { margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
.gsp-stagebar__label { margin: 0 0 10px; font: 700 .75rem/1.3 var(--gd-font-body, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--gd-muted-dark, #b9c3d6); }
.gsp-stagebar__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: gsp; }
@media (min-width: 480px) { .gsp-stagebar__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gsp-stagebar__item {
	display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 10px; border-radius: 10px;
	font: 600 .85rem/1.2 var(--gd-font-body, Inter, sans-serif); color: #cfd8e8;
	border: 1px dashed rgba(255, 255, 255, .2);
}
.gsp-stagebar__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); flex: 0 0 8px; }
.gsp-stagebar__item.is-on { color: #fff; border: 1px solid var(--gsp-c); background: rgba(255, 255, 255, .06); }
.gsp-stagebar__item.is-on .gsp-stagebar__dot { background: var(--gsp-c); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.gsp-stagebar__item.gsp-c-green.is-on .gsp-stagebar__dot, .gsp-stagebar__item.gsp-c-green.is-on { --gsp-c: var(--gd-green, #48af54); }
.gsp-stagebar__item.gsp-c-red.is-on .gsp-stagebar__dot, .gsp-stagebar__item.gsp-c-red.is-on { --gsp-c: var(--gd-red, #e62b4a); }
.gd-theme .gsp-stagebar__link { display: inline-block; margin-top: 12px; color: #9cc3ff !important; font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
.gd-theme .gsp-stagebar__link:hover { color: #fff !important; }

/* ---------- Placeholders (editor-only; see class-gsp-frontend.php) ---------- */
.gsp-proof-placeholder {
	margin-top: 8px; padding: 18px 20px; border-radius: 14px;
	background: repeating-linear-gradient(-45deg, #fff8e1, #fff8e1 10px, #fff3cc 10px, #fff3cc 20px);
	border: 2px dashed var(--gd-yellow-600, #e5ad00); color: #5c4300; font-size: 1rem; line-height: 1.6;
}
.gsp-proof-placeholder p { margin: 0; }
.gsp-proof-placeholder strong { color: #3d2c00; }
.gsp-proof-placeholder__tag { display: inline-block; margin-bottom: 6px !important; font: 800 .72rem/1 var(--gd-font-body, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; background: var(--gd-yellow, #fec105); color: var(--gd-ink, #0a1630); padding: 5px 9px; border-radius: 6px; }

/* ---------- Funnel video slot (16:9) ---------- */
.gsp-funnel-video-wrap {
	position: relative; margin: 0 auto; width: 100%; max-width: 960px; aspect-ratio: 16 / 9;
	border-radius: 22px; overflow: hidden; background: var(--gd-ink, #0a1630); isolation: isolate;
	box-shadow: 0 30px 60px -28px rgba(10, 22, 48, .45);
}
/* Beat generic figure resets (Elementor / theme). */
.gsp-html figure.gsp-funnel-video-wrap, .elementor .elementor-widget.gsp-html.gsp-video-widget figure.gsp-funnel-video-wrap { margin: 0 auto; }
@supports not (aspect-ratio: 16 / 9) { .gsp-funnel-video-wrap { height: 0; padding-top: 56.25%; } }
.gsp-funnel-video, .gsp-funnel-video-wrap > video, .gsp-funnel-video-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gsp-funnel-video-placeholder {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	padding: 24px 20px 64px; text-align: center; color: #fff;
	background:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px,
		radial-gradient(600px 300px at 80% 0%, rgba(31, 99, 198, .5), transparent 60%),
		var(--gd-ink, #0a1630);
	outline: 3px dashed var(--gd-yellow, #fec105); outline-offset: -12px; border-radius: 22px;
}
.gsp-funnel-video-placeholder__tag { position: absolute; top: 22px; left: 22px; font: 800 .7rem/1 var(--gd-font-body, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; background: var(--gd-yellow, #fec105); color: var(--gd-ink, #0a1630); padding: 6px 9px; border-radius: 6px; }
.gsp-funnel-video-placeholder__icon { width: clamp(56px, 12vw, 110px); height: auto; color: #9cc3ff; }
.gd-theme .gsp-funnel-video-placeholder__label { margin: 0; font: 700 clamp(1.15rem, .9rem + 1.4vw, 2rem)/1.2 var(--gd-font-head, "Plus Jakarta Sans", sans-serif); color: #fff; letter-spacing: -.01em; }
.gd-theme .gsp-funnel-video-placeholder__meta { margin: 0; font-size: clamp(.75rem, .7rem + .3vw, .9rem); color: var(--gd-muted-dark, #b9c3d6); max-width: 36em; }
.gsp-video-labels {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 10px 12px; list-style: none;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
	background: linear-gradient(transparent, rgba(10, 22, 48, .85));
}
.gsp-video-labels li {
	display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 6px 4px; border-radius: 8px;
	font: 700 clamp(.62rem, .5rem + .5vw, .9rem)/1.1 var(--gd-font-body, Inter, sans-serif); color: #fff;
	background: rgba(255, 255, 255, .08); border-top: 3px solid var(--gsp-c);
}
.gsp-video-labels li.gsp-c-green { --gsp-c: var(--gd-green, #48af54); }
.gsp-video-labels li.gsp-c-red { --gsp-c: var(--gd-red, #e62b4a); }
.gsp-video-labels span { opacity: .7; font-weight: 600; }
@media (max-width: 420px) { .gsp-video-labels span { display: none; } .gsp-funnel-video-placeholder__meta { display: none; } }

/* ---------- CSS-only funnel workflow ---------- */
.gsp-flow-wrap { max-width: 1040px; margin: 40px auto 0; }
.gsp-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gsp-flow__stage { display: grid; gap: 10px; }
.gsp-flow__bar {
	position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num name" "num q"; column-gap: 14px; align-items: center;
	padding: 16px 22px; border-radius: 16px; background: var(--gsp-c); color: var(--gsp-c-ink);
	width: calc(100% - var(--gsp-i, 0) * 4%); margin-inline: auto;
}
.gsp-flow__num { grid-area: num; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .18); font: 700 .95rem/1 var(--gd-font-head, "Plus Jakarta Sans", sans-serif); }
.gsp-c-yellow .gsp-flow__num { background: rgba(10, 22, 48, .1); }
.gsp-flow__name { grid-area: name; font: 700 1.2rem/1.2 var(--gd-font-head, "Plus Jakarta Sans", sans-serif); letter-spacing: -.01em; }
.gsp-flow__q { grid-area: q; font-size: .92rem; line-height: 1.4; opacity: .92; }
.gsp-flow__lf { display: grid; gap: 8px; padding: 0 4px; }
.gd-theme .gsp-flow__lf p { margin: 0; color: var(--gd-text, #1f2937); font-size: .98rem; line-height: 1.55; }
.gsp-flow__loop { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 0; font-weight: 600; color: var(--gd-blue, #004aad); }

@media (min-width: 900px) {
	.gsp-flow { gap: 12px; }
	.gsp-flow__stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 28px; }
	/* Funnel silhouette: each bar is narrower and tapered. */
	.gsp-flow__bar {
		width: calc(100% - var(--gsp-i, 0) * 12%); min-height: 84px;
		clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%); border-radius: 6px; padding-inline: 40px;
	}
	.gsp-flow__lf { position: relative; padding: 6px 0 6px 22px; border-left: 2px dashed var(--gd-border, #e2e8f2); }
}

/* Subtle "drip" on the leak icon (off for reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	.gsp-flow .gsp-tag--leak svg { animation: gsp-drip 2.4s ease-in-out infinite; animation-delay: calc(var(--gsp-i, 0) * .3s); }
	@keyframes gsp-drip { 0%, 60%, 100% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(3px); opacity: .55; } }
}

/* ---------- Stage → services cards ---------- */
.gsp-stages { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .gsp-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gsp-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gd-theme .gsp-stage { padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.gd-theme .gsp-stage.gd-c-yellow { --gd-c: var(--gd-yellow, #fec105); }
.gd-theme .gsp-stage p { margin: 0; }
.gd-theme .gsp-stage__num { font: 700 .75rem/1 var(--gd-font-body, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gd-muted, #4b5567); }
.gd-theme .gsp-stage__title { margin: 0; font: 700 var(--gd-fs-h3, 1.5rem)/1.2 var(--gd-font-head, "Plus Jakarta Sans", sans-serif); color: var(--gd-ink, #0a1630); }
.gd-theme .gsp-stage__q { font-weight: 600; color: var(--gd-ink, #0a1630); }
.gd-theme .gsp-stage__row { color: var(--gd-muted, #4b5567); line-height: 1.55; font-size: .98rem; }
.gd-theme .gsp-stage__svc-h { margin-top: 6px !important; padding-top: 12px; border-top: 1px solid var(--gd-border, #e2e8f2); font: 700 .78rem/1 var(--gd-font-body, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--gd-ink, #0a1630); }
.gsp-stage__svc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gd-theme .gsp-stage__svc a {
	display: inline-flex; align-items: center; min-height: 36px; padding: 7px 12px; border-radius: 999px;
	background: var(--gd-blue-50, #eef4ff); border: 1px solid var(--gd-blue-100, #dce8fb); color: var(--gd-blue-700, #003680);
	font-size: .9rem; font-weight: 600; text-decoration: none; line-height: 1.2;
}
.gd-theme .gsp-stage__svc a:hover { background: var(--gd-blue, #004aad); border-color: var(--gd-blue, #004aad); color: #fff; }

/* ---------- Homepage section [gracia_funnel_services] ---------- */
.gsp-home { background: #fff; padding: 64px 20px; }
@media (min-width: 768px) { .gsp-home { padding: 104px 24px; } }
.gsp-home__inner { max-width: 1200px; margin: 0 auto; }
.gsp-home__note { margin: 0 auto 20px; max-width: 760px; text-align: center; padding: 8px 12px; border: 2px dashed var(--gd-yellow-600, #e5ad00); background: #fff8e1; color: #5c4300; border-radius: 10px; font-size: .9rem; font-weight: 600; }
.gsp-home__head { text-align: center; max-width: 760px; margin: 0 auto 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gd-theme .gsp-home__eyebrow {
	display: inline-flex; align-items: center; gap: 8px; margin: 0;
	font: 700 .8rem/1.2 var(--gd-font-body, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gd-blue, #004aad);
	background: var(--gd-blue-50, #eef4ff); border: 1px solid var(--gd-blue-100, #dce8fb); padding: 7px 14px; border-radius: 999px;
}
.gsp-home__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gd-green, #48af54); box-shadow: 0 0 0 4px rgba(72, 175, 84, .2); }
.gd-theme .gsp-home__title { margin: 0; font: 700 var(--gd-fs-h2, 2.4rem)/1.12 var(--gd-font-head, "Plus Jakarta Sans", sans-serif); letter-spacing: -.025em; color: var(--gd-ink, #0a1630); text-wrap: balance; }
.gd-theme .gsp-home__lead { margin: 0; font-size: var(--gd-fs-lg, 1.1875rem); line-height: 1.7; color: var(--gd-muted, #4b5567); }
.gsp-home__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .gsp-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gsp-home__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gsp-home__card {
	position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 26px 26px; overflow: hidden;
	background: #fff; border: 1px solid var(--gd-border, #e2e8f2); border-radius: var(--gd-radius-lg, 22px); box-shadow: var(--gd-shadow-sm, 0 1px 3px rgba(10, 22, 48, .08));
	transition: transform .25s var(--gd-ease, ease), box-shadow .25s var(--gd-ease, ease);
}
.gsp-home__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--gsp-c); }
.gsp-home__card:hover, .gsp-home__card:focus-within { transform: translateY(-4px); box-shadow: var(--gd-shadow, 0 10px 30px -12px rgba(10, 22, 48, .18)); }
.gsp-home__stage { align-self: flex-start; font: 700 .72rem/1 var(--gd-font-body, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--gsp-c-bg); color: var(--gd-ink, #0a1630); }
.gd-theme .gsp-home__card-title { margin: 0; font: 700 var(--gd-fs-h4, 1.25rem)/1.25 var(--gd-font-head, "Plus Jakarta Sans", sans-serif); letter-spacing: -.01em; }
.gd-theme .gsp-home__card-title a { color: var(--gd-ink, #0a1630); text-decoration: none; }
.gsp-home__card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gd-theme .gsp-home__card-title a:focus-visible { outline: none; box-shadow: none; }
.gsp-home__card:focus-within { outline: 3px solid var(--gd-yellow, #fec105); outline-offset: 3px; }
.gd-theme .gsp-home__card-text { margin: 0; color: var(--gd-muted, #4b5567); font-size: 1rem; line-height: 1.65; flex: 1; }
.gsp-home__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--gd-blue, #004aad); font-size: .95rem; }
.gsp-home__foot { text-align: center; margin: 36px 0 0; }
.gd-theme .gsp-home__hub {
	display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 24px; border-radius: 999px;
	border: 2px solid var(--gd-blue-100, #dce8fb); color: var(--gd-blue, #004aad); font-weight: 650; text-decoration: none;
}
.gd-theme .gsp-home__hub:hover { border-color: var(--gd-blue, #004aad); background: var(--gd-blue-50, #eef4ff); color: var(--gd-blue-700, #003680); }
.gsp-home__hub::after { content: "\2192"; margin-left: 8px; }

@media (prefers-reduced-motion: reduce) { .gsp-home__card { transition: none; } .gsp-home__card:hover { transform: none; } }

/* Visitors: the video slot is removed until the MP4 is added, so collapse its empty widget. */
.elementor-widget.gsp-video-widget:not(:has(figure, video)) { display: none; }

/* ---------- 1.0.1: links added to existing pages (Lead Generation, Our Services) ---------- */
.gd-theme a.gsp-link { color: inherit; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--gd-blue, #004aad); }
.gd-theme a.gsp-link:hover, .gd-theme a.gsp-link:focus-visible { color: var(--gd-blue, #004aad); text-decoration-thickness: 2px; }
.gd-theme .gd-sec--dark a.gsp-link, .gd-theme .gd-hero a.gsp-link { text-decoration-color: var(--gd-yellow, #fec105); }
.gd-theme .gd-sec--dark a.gsp-link:hover, .gd-theme .gd-hero a.gsp-link:hover { color: var(--gd-yellow, #fec105); }

/* ---------- 1.0.1: Pricing block "Paid ads, LinkedIn & email" ---------- */
.gsp-price { padding: 8px 20px 64px; scroll-margin-top: 96px; }
@media (min-width: 768px) { .gsp-price { padding: 8px 24px 96px; } }
.gsp-price__inner { max-width: 1200px; margin: 0 auto; }
.gsp-price__card {
	display: grid; gap: 28px; grid-template-columns: 1fr; padding: 32px 24px;
	background: var(--gd-blue-50, #eef4ff); border: 1px solid var(--gd-blue-100, #dce8fb); border-radius: var(--gd-radius-lg, 22px);
}
@media (min-width: 900px) { .gsp-price__card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; padding: 48px; align-items: center; } }
.gsp-price__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.gd-theme .gsp-price__title { margin: 0; font: 700 var(--gd-fs-h3, 1.75rem)/1.2 var(--gd-font-head, "Plus Jakarta Sans", sans-serif); letter-spacing: -.02em; color: var(--gd-ink, #0a1630); text-wrap: balance; }
.gd-theme .gsp-price__lead { margin: 0; color: var(--gd-muted, #4b5567); font-size: 1.0625rem; line-height: 1.7; }
.gd-theme .gsp-price__cta { margin: 6px 0 0; }
.gd-theme .gsp-price__hub { margin: 0; font-size: .95rem; }
.gd-theme .gsp-price__hub a { color: var(--gd-blue, #004aad); font-weight: 650; }
.gsp-price__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gsp-price__item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 44px 16px 18px; background: #fff; border: 1px solid var(--gd-border, #e2e8f2); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.gsp-price__item::after { content: "\2192"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--gd-blue, #004aad); font-weight: 700; }
.gsp-price__item:hover, .gsp-price__item:focus-within { border-color: var(--gd-blue, #004aad); box-shadow: var(--gd-shadow-sm, 0 1px 3px rgba(10, 22, 48, .08)); }
.gd-theme .gsp-price__link { color: var(--gd-ink, #0a1630); font-weight: 700; text-decoration: none; }
.gsp-price__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gsp-price__item:focus-within { outline: 3px solid var(--gd-yellow, #fec105); outline-offset: 2px; }
.gd-theme .gsp-price__link:focus-visible { outline: none; box-shadow: none; }
.gsp-price__desc { color: var(--gd-muted, #4b5567); font-size: .95rem; line-height: 1.5; }