/* ==========================================================================
   SriDigitals Prime AI — design system
   Light canvas. Colour arrives in gradient panels, never in a dark page.
   Works on Astra, inside Elementor, and in the standalone preview.
   ========================================================================== */

:root {
	/* Surfaces */
	--sd-canvas:  #FFFFFF;
	--sd-mist:    #F4F6FC;
	--sd-cloud:   #EDF0FA;
	--sd-line:    #E3E8F5;
	--sd-line-2:  #D6DCEF;

	/* Type */
	--sd-ink:     #171B2E;
	--sd-slate:   #5B6480;
	--sd-faint:   #8A93AC;

	/* Accents */
	--sd-indigo:  #4338CA;
	--sd-violet:  #7C3AED;
	--sd-fuchsia: #C026D3;
	--sd-link:    #4F46E5;
	--sd-teal:    #0E7490;

	--sd-grad:      linear-gradient(115deg, #4338CA 0%, #7C3AED 55%, #C026D3 100%);
	--sd-grad-soft: linear-gradient(115deg, #EEF0FE 0%, #F5EEFE 55%, #FDEEFB 100%);

	/* Fonts */
	--sd-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sd-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sd-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* Shape */
	--sd-r-sm: 12px;
	--sd-r-md: 18px;
	--sd-r-lg: 28px;
	--sd-r-xl: 36px;
	--sd-r-pill: 999px;

	--sd-shadow-sm: 0 2px 8px rgba(23, 27, 46, .05), 0 12px 28px rgba(23, 27, 46, .05);
	--sd-shadow-md: 0 4px 12px rgba(23, 27, 46, .06), 0 22px 50px rgba(23, 27, 46, .09);
	--sd-shadow-accent: 0 12px 30px rgba(67, 56, 202, .28);

	--sd-max: 1200px;
	--sd-gutter: clamp(20px, 4.5vw, 40px);
	--sd-section: clamp(72px, 9vw, 128px);

	--sd-ease: cubic-bezier(.2, .7, .3, 1);
	--sd-speed: .4s;
}

/* --- 1. Reset and base ---------------------------------------------- */

.sd *, .sd *::before, .sd *::after { box-sizing: border-box; }

body.sd,
.sd {
	margin: 0;
	background: var(--sd-canvas);
	color: var(--sd-slate);
	font-family: var(--sd-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.sd img, .sd svg, .sd video { max-width: 100%; height: auto; display: block; }

.sd h1, .sd h2, .sd h3, .sd h4 {
	font-family: var(--sd-display);
	color: var(--sd-ink);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.12;
	margin: 0 0 .5em;
}

.sd h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); font-weight: 700; }
.sd h2 { font-size: clamp(1.95rem, 3.6vw, 2.85rem); }
.sd h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; }
.sd h4 { font-size: 1rem; }

.sd p { margin: 0 0 1.1rem; }
.sd a { color: var(--sd-link); text-decoration: none; }
.sd a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sd :focus-visible {
	outline: 3px solid var(--sd-violet);
	outline-offset: 3px;
	border-radius: 4px;
}

.sd-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--sd-indigo); color: #fff; padding: .7rem 1.2rem;
	border-radius: 0 0 var(--sd-r-sm) 0;
}
.sd-skip:focus { left: 0; }

.sd-sr {
	position: absolute; width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- 2. Layout ------------------------------------------------------ */

.sd-wrap {
	width: 100%;
	max-width: var(--sd-max);
	margin-inline: auto;
	padding-inline: var(--sd-gutter);
}
.sd-wrap--narrow { max-width: 820px; }

.sd-section { padding-block: var(--sd-section); }
.sd-section--mist { background: var(--sd-mist); }
.sd-section--tight { padding-block: clamp(48px, 6vw, 76px); }

.sd-grid { display: grid; gap: 20px; }
@media (min-width: 720px) {
	.sd-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.sd-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.sd-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.sd-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.sd-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- 3. Type utilities ---------------------------------------------- */

.sd-eyebrow {
	font-family: var(--sd-mono);
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sd-indigo);
	display: block;
	margin-bottom: .9rem;
}

.sd-lead {
	font-size: clamp(1.02rem, 1.5vw, 1.16rem);
	color: var(--sd-slate);
	max-width: 62ch;
}

.sd-grad-text {
	background: var(--sd-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sd-head { max-width: 660px; margin-bottom: clamp(36px, 5vw, 60px); }
.sd-head--center { margin-inline: auto; text-align: center; }
.sd-head--center .sd-lead { margin-inline: auto; }

.sd-note {
	font-family: var(--sd-mono);
	font-size: .74rem;
	line-height: 1.6;
	color: var(--sd-faint);
	letter-spacing: .01em;
}

/* --- 4. Buttons ------------------------------------------------------ */

.sd-btn {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--sd-display); font-weight: 600; font-size: .95rem;
	padding: .92rem 1.6rem;
	border-radius: var(--sd-r-pill);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--sd-speed) var(--sd-ease),
	            box-shadow var(--sd-speed) var(--sd-ease),
	            background-color var(--sd-speed) var(--sd-ease);
}
.sd-btn:hover { text-decoration: none; transform: translateY(-2px); }

.sd-btn--primary { background: var(--sd-indigo); color: #fff; box-shadow: var(--sd-shadow-accent); }
.sd-btn--primary:hover { background: #3730A3; color: #fff; }

.sd-btn--ghost { background: #fff; color: var(--sd-ink); border-color: var(--sd-line-2); box-shadow: var(--sd-shadow-sm); }
.sd-btn--ghost:hover { border-color: var(--sd-violet); color: var(--sd-indigo); }

.sd-btn--onpanel { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(8px); }
.sd-btn--onpanel:hover { background: rgba(255,255,255,.24); color: #fff; }

.sd-btn--sm { padding: .62rem 1.15rem; font-size: .88rem; }

.sd-textlink {
	font-family: var(--sd-display); font-weight: 600; font-size: .92rem;
	color: var(--sd-indigo); display: inline-flex; align-items: center; gap: .4rem;
}
.sd-textlink svg { transition: transform var(--sd-speed) var(--sd-ease); }
.sd-textlink:hover { text-decoration: none; }
.sd-textlink:hover svg { transform: translateX(4px); }

/* --- 5. Header: a floating pill that rides over the hero panel -------- */

.sd-header {
	position: sticky; top: 14px; z-index: 700;
	padding-inline: var(--sd-gutter);
	margin-bottom: -78px;
}
.sd-header__inner {
	max-width: var(--sd-max); margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: var(--sd-r-pill);
	padding: .7rem .8rem .7rem 1.5rem;
	box-shadow: 0 10px 30px rgba(23, 27, 46, .10);
	transition: box-shadow var(--sd-speed) var(--sd-ease), background var(--sd-speed) var(--sd-ease);
}
.sd-header.is-stuck .sd-header__inner {
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 14px 38px rgba(23, 27, 46, .16);
}

.sd-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.sd-brand:hover { text-decoration: none; }
.sd-brand__mark { width: 38px; height: 38px; border-radius: 11px; flex: none; }
.sd-brand__name { font-family: var(--sd-display); font-weight: 700; font-size: 1.08rem; color: var(--sd-ink); line-height: 1.1; display: block; }
.sd-brand__tag { font-family: var(--sd-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sd-indigo); }

.sd-nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.sd-nav a {
	display: block; padding: .5rem .85rem; border-radius: var(--sd-r-pill);
	font-family: var(--sd-display); font-weight: 500; font-size: .93rem; color: var(--sd-ink);
	transition: background var(--sd-speed) var(--sd-ease), color var(--sd-speed) var(--sd-ease);
}
.sd-nav a:hover, .sd-nav .current-menu-item > a { background: var(--sd-cloud); color: var(--sd-indigo); text-decoration: none; }

.sd-header__actions { display: flex; align-items: center; gap: .6rem; }

.sd-burger {
	display: none; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--sd-line-2); background: #fff; cursor: pointer;
	align-items: center; justify-content: center;
}
.sd-burger span, .sd-burger span::before, .sd-burger span::after {
	display: block; width: 18px; height: 2px; background: var(--sd-ink); border-radius: 2px;
	transition: transform var(--sd-speed) var(--sd-ease), opacity var(--sd-speed) var(--sd-ease);
}
.sd-burger span::before, .sd-burger span::after { content: ""; position: absolute; }
.sd-burger span::before { transform: translateY(-6px); }
.sd-burger span::after { transform: translateY(6px); }
.sd-burger[aria-expanded="true"] span { background: transparent; }
.sd-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.sd-burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

@media (max-width: 1023px) {
	.sd-burger { display: inline-flex; }
	.sd-header__inner { padding-left: 1.1rem; }
	.sd-nav {
		position: absolute; left: var(--sd-gutter); right: var(--sd-gutter); top: calc(100% + 10px);
		background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-r-lg);
		box-shadow: var(--sd-shadow-md); padding: .7rem;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: all var(--sd-speed) var(--sd-ease);
	}
	.sd-nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.sd-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.sd-nav a { padding: .8rem 1rem; border-radius: var(--sd-r-sm); }
	.sd-header__actions .sd-btn { display: none; }
}

/* --- 6. Hero: an inset gradient panel, not a full-bleed dark slab ----- */

.sd-hero { padding: 14px var(--sd-gutter) 0; }

.sd-hero__panel {
	position: relative;
	max-width: calc(var(--sd-max) + 2 * var(--sd-gutter));
	margin-inline: auto;
	border-radius: var(--sd-r-xl);
	background: var(--sd-grad);
	overflow: hidden;
	padding: clamp(110px, 12vw, 150px) clamp(24px, 5vw, 68px) clamp(60px, 7vw, 90px);
	isolation: isolate;
}

/* grid + light bloom, drawn in CSS so there is no image to load */
.sd-hero__panel::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(120% 80% at 20% 0%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(120% 80% at 20% 0%, #000 20%, transparent 75%);
}
.sd-hero__panel::after {
	content: ""; position: absolute; z-index: -1;
	width: 60%; aspect-ratio: 1; right: -8%; top: -22%;
	background: radial-gradient(circle, rgba(255,255,255,.30), transparent 62%);
}

.sd-hero__grid { display: grid; gap: clamp(40px, 5vw, 56px); align-items: center; }
@media (min-width: 1024px) { .sd-hero__grid { grid-template-columns: 1.05fr .95fr; } }

.sd-hero h1 { color: #fff; margin-bottom: .35em; }
.sd-hero .sd-lead { color: rgba(255, 255, 255, .88); font-size: clamp(1.05rem, 1.6vw, 1.2rem); }

.sd-badge {
	display: inline-flex; align-items: center; gap: .6rem;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .38);
	backdrop-filter: blur(10px);
	color: #fff;
	font-family: var(--sd-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
	padding: .5rem 1.05rem; border-radius: var(--sd-r-pill);
	margin-bottom: 1.6rem;
}
.sd-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; }

.sd-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.sd-hero__proof {
	display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem;
	margin-top: 2.6rem; padding-top: 1.8rem;
	border-top: 1px solid rgba(255, 255, 255, .24);
}
.sd-hero__proof li { list-style: none; color: rgba(255,255,255,.9); font-size: .9rem; display: flex; gap: .5rem; align-items: center; }
.sd-hero__proof ul { display: contents; }
.sd-hero__proof svg { flex: none; }

/* SIGNATURE — the deliverable deck.
   Three cards fanned like handed-over work. They straighten on hover,
   which is the whole promise of the agency in one gesture. */

/* --- 7. Technology strip -------------------------------------------- */

.sd-strip__label { text-align: center; margin-bottom: 1.6rem; }
.sd-strip {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
	list-style: none; margin: 0; padding: 0;
}
.sd-strip li {
	font-family: var(--sd-display); font-weight: 500; font-size: .9rem; color: var(--sd-ink);
	background: #fff; border: 1px solid var(--sd-line);
	padding: .55rem 1.1rem; border-radius: var(--sd-r-pill);
	box-shadow: var(--sd-shadow-sm);
}

/* --- 8. Cards -------------------------------------------------------- */

.sd-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r-lg);
	padding: 1.7rem;
	box-shadow: var(--sd-shadow-sm);
	transition: transform var(--sd-speed) var(--sd-ease),
	            box-shadow var(--sd-speed) var(--sd-ease),
	            border-color var(--sd-speed) var(--sd-ease);
	display: flex; flex-direction: column;
}
.sd-card:hover { transform: translateY(-4px); box-shadow: var(--sd-shadow-md); border-color: var(--sd-line-2); }
.sd-card h3 { margin-bottom: .5rem; }
.sd-card p { color: var(--sd-slate); font-size: .96rem; margin-bottom: 1rem; }
.sd-card > :last-child { margin-bottom: 0; margin-top: auto; }

.sd-icon {
	width: 46px; height: 46px; border-radius: 14px; flex: none;
	display: grid; place-items: center; margin-bottom: 1.1rem;
	background: var(--sd-grad-soft);
	border: 1px solid var(--sd-line);
	color: var(--sd-indigo);
}

.sd-card--flat { box-shadow: none; background: transparent; border-color: transparent; padding: 0; }
.sd-card--flat:hover { transform: none; box-shadow: none; }

/* --- 9. Placeholder media ------------------------------------------- */

.sd-ph {
	position: relative;
	border-radius: var(--sd-r-md);
	background:
		repeating-linear-gradient(135deg, rgba(124, 58, 237, .045) 0 12px, transparent 12px 24px),
		var(--sd-cloud);
	border: 1px dashed var(--sd-line-2);
	display: grid; place-items: center; gap: .4rem;
	padding: 1.2rem; text-align: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.sd-ph__tag {
	position: absolute; top: .7rem; left: .7rem;
	font-family: var(--sd-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
	background: var(--sd-indigo); color: #fff; padding: .22rem .6rem; border-radius: var(--sd-r-pill);
}
.sd-ph__name { font-family: var(--sd-display); font-weight: 500; font-size: .92rem; color: var(--sd-ink); }
.sd-ph__hint { font-family: var(--sd-mono); font-size: .68rem; color: var(--sd-faint); }
.sd-ph__play { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--sd-indigo); box-shadow: var(--sd-shadow-sm); }

/* --- 10. Work / portfolio ------------------------------------------- */

.sd-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.4rem; }
.sd-filter {
	font-family: var(--sd-display); font-weight: 500; font-size: .88rem;
	padding: .55rem 1.1rem; border-radius: var(--sd-r-pill);
	background: #fff; border: 1px solid var(--sd-line); color: var(--sd-slate); cursor: pointer;
	transition: all var(--sd-speed) var(--sd-ease);
}
.sd-filter:hover { border-color: var(--sd-violet); color: var(--sd-indigo); }
.sd-filter[aria-pressed="true"] { background: var(--sd-indigo); border-color: var(--sd-indigo); color: #fff; }

.sd-work { border-radius: var(--sd-r-lg); overflow: hidden; border: 1px solid var(--sd-line); background: #fff; box-shadow: var(--sd-shadow-sm); transition: transform var(--sd-speed) var(--sd-ease), box-shadow var(--sd-speed) var(--sd-ease); }
.sd-work:hover { transform: translateY(-4px); box-shadow: var(--sd-shadow-md); }
.sd-work__trigger { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.sd-work .sd-ph { border-radius: 0; border-width: 0 0 1px 0; }
.sd-work__body { padding: 1.1rem 1.3rem 1.4rem; text-align: left; }
.sd-work__cat { font-family: var(--sd-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sd-violet); }
.sd-work__body h3 { font-size: 1.05rem; margin: .3rem 0 0; }

/* --- 11. Timeline: numbering earns its place, the order is real ------ */

.sd-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sd-step {
	display: grid; gap: 1.2rem; padding: 1.7rem 0;
	border-top: 1px solid var(--sd-line);
	grid-template-columns: auto 1fr;
	align-items: start;
}
.sd-step:last-child { border-bottom: 1px solid var(--sd-line); }
.sd-step__num {
	font-family: var(--sd-mono); font-size: .8rem; font-weight: 500;
	color: #fff; background: var(--sd-grad);
	width: 46px; height: 46px; border-radius: 14px;
	display: grid; place-items: center; flex: none;
}
.sd-step h3 { margin-bottom: .3rem; }
.sd-step p { margin: 0; font-size: .96rem; }
.sd-step__when { font-family: var(--sd-mono); font-size: .72rem; color: var(--sd-faint); letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: .35rem; }
@media (min-width: 860px) { .sd-step { grid-template-columns: auto 220px 1fr; gap: 2rem; align-items: center; } .sd-step__when { margin: 0; } }

/* --- 12. Counters ---------------------------------------------------- */

.sd-stat { text-align: center; padding: 1.4rem .6rem; }
.sd-stat__value { font-family: var(--sd-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; display: block; background: var(--sd-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-stat__label { font-family: var(--sd-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sd-faint); display: block; margin-top: .7rem; }

/* --- 13. Pricing ----------------------------------------------------- */

.sd-price { display: flex; flex-direction: column; height: 100%; }
.sd-price--featured { border-color: transparent; background: var(--sd-grad); color: #fff; box-shadow: var(--sd-shadow-accent); }
.sd-price--featured h3, .sd-price--featured .sd-price__amount { color: #fff; }
.sd-price--featured p, .sd-price--featured li { color: rgba(255,255,255,.9); }
.sd-price--featured li::before { color: #fff; }
.sd-price__badge {
	position: absolute; top: 1.2rem; right: 1.2rem;
	font-family: var(--sd-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
	background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.45); color: #fff;
	padding: .24rem .65rem; border-radius: var(--sd-r-pill);
}
.sd-price__amount { font-family: var(--sd-display); font-weight: 700; font-size: 2rem; color: var(--sd-ink); line-height: 1; margin: .5rem 0 .2rem; }
.sd-price__period { font-family: var(--sd-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sd-faint); }
.sd-price--featured .sd-price__period { color: rgba(255,255,255,.75); }
.sd-price ul { list-style: none; padding: 0; margin: 1.3rem 0; display: grid; gap: .55rem; }
.sd-price li { position: relative; padding-left: 1.6rem; font-size: .93rem; }
.sd-price li::before { content: "✓"; position: absolute; left: 0; color: var(--sd-indigo); font-weight: 700; }

/* --- 14. FAQ --------------------------------------------------------- */

.sd-faq { border-top: 1px solid var(--sd-line); }
.sd-faq__item { border-bottom: 1px solid var(--sd-line); }
.sd-faq__q {
	width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	font-family: var(--sd-display); font-weight: 500; font-size: 1.03rem; color: var(--sd-ink);
	padding: 1.35rem 2.6rem 1.35rem 0; position: relative;
}
.sd-faq__q::after {
	content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; font-weight: 300; color: var(--sd-indigo);
	transition: transform var(--sd-speed) var(--sd-ease);
}
.sd-faq__q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.sd-faq__a { display: none; padding: 0 2.6rem 1.5rem 0; }
.sd-faq__a[data-open="true"] { display: block; }
.sd-faq__a p { margin: 0; }

/* --- 15. Forms ------------------------------------------------------- */

.sd-form { display: grid; gap: 1rem; }
.sd-form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sd-form__row { grid-template-columns: 1fr 1fr; } }

.sd-field label {
	display: block; font-family: var(--sd-display); font-weight: 500;
	font-size: .86rem; color: var(--sd-ink); margin-bottom: .4rem;
}
.sd-field input, .sd-field select, .sd-field textarea {
	width: 100%; font-family: var(--sd-body); font-size: .96rem; color: var(--sd-ink);
	background: var(--sd-mist); border: 1px solid var(--sd-line-2);
	border-radius: var(--sd-r-sm); padding: .8rem 1rem;
	transition: border-color var(--sd-speed) var(--sd-ease), background var(--sd-speed) var(--sd-ease);
}
.sd-field input:focus, .sd-field select:focus, .sd-field textarea:focus {
	background: #fff; border-color: var(--sd-violet); outline-offset: 1px;
}
.sd-field textarea { resize: vertical; min-height: 130px; }

.sd-form__status { font-size: .9rem; margin: 0; }
.sd-form__status.is-error { color: #B91C1C; }
.sd-form__status.is-success { color: #047857; }
.sd-honeypot { position: absolute; left: -9999px; }

/* --- 16. Footer ------------------------------------------------------ */

.sd-footer { background: var(--sd-mist); border-top: 1px solid var(--sd-line); padding-block: clamp(56px, 7vw, 84px) 2rem; }
.sd-footer__grid { display: grid; gap: 2.4rem; }
@media (min-width: 760px) { .sd-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.sd-footer h4 { font-family: var(--sd-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sd-faint); margin-bottom: 1rem; }
.sd-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sd-footer a { color: var(--sd-slate); font-size: .93rem; }
.sd-footer a:hover { color: var(--sd-indigo); }
.sd-footer__bottom {
	margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--sd-line);
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
	font-size: .86rem; color: var(--sd-faint);
}

/* --- 17. CTA band ---------------------------------------------------- */

.sd-cta { padding-inline: var(--sd-gutter); }
.sd-cta__panel {
	max-width: var(--sd-max); margin-inline: auto;
	background: var(--sd-grad); border-radius: var(--sd-r-xl);
	padding: clamp(48px, 6vw, 76px) clamp(24px, 5vw, 64px);
	text-align: center; color: #fff;
	position: relative; overflow: hidden;
}
.sd-cta__panel h2 { color: #fff; }
.sd-cta__panel p { color: rgba(255,255,255,.88); max-width: 54ch; margin-inline: auto; }
.sd-cta__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
.sd-cta__panel .sd-btn--primary { background: #fff; color: var(--sd-indigo); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.sd-cta__panel .sd-btn--primary:hover { background: #F5F3FF; color: var(--sd-indigo); }

/* --- 18. Floating actions -------------------------------------------- */

.sd-whatsapp {
	position: fixed; right: 20px; bottom: 20px; z-index: 800;
	display: inline-flex; align-items: center; gap: .55rem;
	background: #25D366; color: #08331A;
	font-family: var(--sd-display); font-weight: 600; font-size: .9rem;
	padding: .8rem 1.15rem; border-radius: var(--sd-r-pill);
	box-shadow: 0 12px 30px rgba(37, 211, 102, .4);
	transition: transform var(--sd-speed) var(--sd-ease);
}
.sd-whatsapp:hover { transform: translateY(-3px); text-decoration: none; color: #08331A; }
@media (max-width: 600px) { .sd-whatsapp__label { display: none; } .sd-whatsapp { padding: .95rem; } }

.sd-totop {
	position: fixed; right: 20px; bottom: 88px; z-index: 799;
	width: 42px; height: 42px; border-radius: 50%;
	background: #fff; border: 1px solid var(--sd-line-2); color: var(--sd-ink);
	display: grid; place-items: center; cursor: pointer;
	box-shadow: var(--sd-shadow-sm);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: all var(--sd-speed) var(--sd-ease);
}
.sd-totop.is-visible { opacity: 1; visibility: visible; transform: none; }

/* --- 19. Lightbox ---------------------------------------------------- */

.sd-lightbox {
	position: fixed; inset: 0; z-index: 900;
	background: rgba(23, 27, 46, .78);
	backdrop-filter: blur(6px);
	display: grid; place-items: center; padding: 5vw;
}
.sd-lightbox[hidden] { display: none; }
.sd-lightbox__panel { width: min(1000px, 100%); background: #fff; border-radius: var(--sd-r-lg); overflow: hidden; box-shadow: var(--sd-shadow-md); }
.sd-lightbox__panel iframe, .sd-lightbox__panel video, .sd-lightbox__panel img { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.sd-lightbox__close {
	position: absolute; top: 20px; right: 20px;
	width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: #fff; color: var(--sd-ink); font-size: 1.5rem; line-height: 1;
}

/* --- 20. Motion ------------------------------------------------------ */

.sd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--sd-ease), transform .6s var(--sd-ease); }
.sd-reveal.is-visible { opacity: 1; transform: none; }
.sd-reveal:nth-child(2) { transition-delay: .06s; }
.sd-reveal:nth-child(3) { transition-delay: .12s; }
.sd-reveal:nth-child(4) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
	.sd *, .sd *::before, .sd *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.sd-reveal { opacity: 1; transform: none; }
}

/* --- 21. Astra + Elementor bridges ----------------------------------- */

.ast-container, .site-content .ast-container { max-width: var(--sd-max); }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--sd-max); }
.elementor-widget-container > .sd-section:first-child { padding-top: 0; }

/* Astra's default page title band is redundant once the kit hero is in use. */
body.sd .ast-single-entry-banner { display: none; }

/* ==========================================================================
   Multipage additions — logo lockup, dropdown nav, inner page hero
   ========================================================================== */

/* --- Brand lockup ---------------------------------------------------- */

.sd-brand__mark { width: 42px; height: 42px; flex: none; border-radius: 13px; }
.sd-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.sd-brand__name {
	font-family: var(--sd-display); font-weight: 700; font-size: 1.15rem;
	color: var(--sd-ink); letter-spacing: -.02em;
}
.sd-brand__tag {
	font-family: var(--sd-mono); font-size: .58rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--sd-faint); margin-top: 2px;
}
.sd-header .custom-logo { max-height: 46px; width: auto; }

@media (max-width: 400px) { .sd-brand__text { display: none; } }

/* Footer lockup sits on mist, so soften the tag */
.sd-footer .sd-brand__tag { color: var(--sd-slate); }

/* --- Primary nav with dropdown --------------------------------------- */

.sd-menu { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.sd-menu li { position: relative; }
.sd-menu > li > a { display: flex; align-items: center; gap: .3rem; }

.sd-menu .menu-item-has-children > a::after {
	content: ""; width: 6px; height: 6px; flex: none;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--sd-speed) var(--sd-ease);
}
.sd-menu .menu-item-has-children:hover > a::after,
.sd-menu .menu-item-has-children:focus-within > a::after { transform: rotate(225deg) translateY(-2px); }

.sd-subnav {
	position: absolute; top: calc(100% + 10px); left: 0;
	min-width: 250px; list-style: none; margin: 0; padding: .5rem;
	background: #fff; border: 1px solid var(--sd-line);
	border-radius: var(--sd-r-md); box-shadow: var(--sd-shadow-md);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: all var(--sd-speed) var(--sd-ease); z-index: 20;
}
.sd-menu li:hover > .sd-subnav,
.sd-menu li:focus-within > .sd-subnav { opacity: 1; visibility: visible; transform: none; }
.sd-subnav a { display: block; padding: .6rem .85rem; border-radius: var(--sd-r-sm); font-size: .9rem; white-space: nowrap; }

/* Keep a hover bridge so the menu does not close in the 10px gap */
.sd-menu .menu-item-has-children::after {
	content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
}

@media (max-width: 1023px) {
	.sd-menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.sd-menu > li > a { padding: .8rem 1rem; border-radius: var(--sd-r-sm); justify-content: space-between; }
	/* Submenus stay closed until the toggle is pressed */
	.sd-subnav {
		position: static; transform: none;
		box-shadow: none; border: 0; border-left: 2px solid var(--sd-line);
		border-radius: 0; margin: 0 0 .3rem .9rem; padding: 0 0 0 .4rem; min-width: 0;
		display: none; opacity: 1; visibility: visible;
	}
	.sd-menu li.is-open > .sd-subnav { display: block; }
	.sd-menu li:hover > .sd-subnav,
	.sd-menu li:focus-within > .sd-subnav { display: none; }
	.sd-menu li.is-open:hover > .sd-subnav,
	.sd-menu li.is-open:focus-within > .sd-subnav { display: block; }

	.sd-menu .menu-item-has-children::after { display: none; }
	.sd-menu .menu-item-has-children > a::after { display: none; }
	.sd-nav { max-height: 78vh; overflow-y: auto; }

	/* Toggle button injected next to parent items */
	.sd-menu > li.menu-item-has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; }
	.sd-menu > li.menu-item-has-children > .sd-subnav { grid-column: 1 / -1; }
	.sd-subtoggle {
		width: 40px; height: 40px; flex: none;
		display: grid; place-items: center;
		background: none; border: 0; cursor: pointer; color: var(--sd-ink);
		border-radius: var(--sd-r-sm);
	}
	.sd-subtoggle:hover { background: var(--sd-cloud); color: var(--sd-indigo); }
	.sd-subtoggle svg { transition: transform var(--sd-speed) var(--sd-ease); }
	.sd-subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
}

/* --- Inner page hero: shorter gradient panel ------------------------- */

.sd-phero { padding: 14px var(--sd-gutter) 0; }
.sd-phero__panel {
	position: relative;
	max-width: calc(var(--sd-max) + 2 * var(--sd-gutter));
	margin-inline: auto;
	border-radius: var(--sd-r-xl);
	background: var(--sd-grad);
	overflow: hidden;
	padding: clamp(104px, 11vw, 132px) 0 clamp(48px, 6vw, 70px);
	isolation: isolate;
}
.sd-phero__panel::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(120% 90% at 15% 0%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 90% at 15% 0%, #000 20%, transparent 78%);
}
.sd-phero__panel::after {
	content: ""; position: absolute; z-index: -1;
	width: 55%; aspect-ratio: 1; right: -6%; top: -40%;
	background: radial-gradient(circle, rgba(255,255,255,.26), transparent 62%);
}
.sd-phero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.5rem); margin-bottom: .4em; }
.sd-phero .sd-lead { color: rgba(255,255,255,.9); max-width: 60ch; }
.sd-phero .sd-hero__cta { margin-top: 1.8rem; }

/* Plain inner hero used by 404 and fallback pages */
.sd-phero > .sd-wrap > h1 { margin-top: clamp(90px, 11vw, 130px); }

/* --- Small corrections ------------------------------------------------ */

.sd-footer__brand .sd-brand { margin-bottom: .2rem; }
.sd-price { position: relative; }
.sd-work__body h3 a { color: inherit; }
.sd-card h3 a { color: var(--sd-ink); }
.sd-card h3 a:hover { color: var(--sd-indigo); text-decoration: none; }

/* ==========================================================================
   Corrections
   ========================================================================== */

/* --- Button labels were losing to `.sd a` on specificity ---------------
   `.sd a` is (0,1,1) and beat `.sd-btn--primary` at (0,1,0), so button text
   inherited the link colour and vanished against the filled background until
   hover raised specificity. These rules restate the colours at (0,2,0). */

.sd a.sd-btn--primary,
.sd .sd-btn--primary { background: var(--sd-indigo); color: #FFFFFF; }
.sd a.sd-btn--primary:hover,
.sd .sd-btn--primary:hover { background: #3730A3; color: #FFFFFF; }

.sd a.sd-btn--ghost,
.sd .sd-btn--ghost { background: #FFFFFF; color: var(--sd-ink); border-color: var(--sd-line-2); }
.sd a.sd-btn--ghost:hover,
.sd .sd-btn--ghost:hover { color: var(--sd-indigo); border-color: var(--sd-violet); }

.sd a.sd-btn--onpanel,
.sd .sd-btn--onpanel { background: rgba(255,255,255,.14); color: #FFFFFF; border-color: rgba(255,255,255,.5); }
.sd a.sd-btn--onpanel:hover,
.sd .sd-btn--onpanel:hover { background: rgba(255,255,255,.26); color: #FFFFFF; }

/* CTA panel inverts: white button, indigo label */
.sd .sd-cta__panel a.sd-btn--primary,
.sd .sd-cta__panel .sd-btn--primary { background: #FFFFFF; color: var(--sd-indigo); }
.sd .sd-cta__panel a.sd-btn--primary:hover,
.sd .sd-cta__panel .sd-btn--primary:hover { background: #F5F3FF; color: #3730A3; }

/* Featured pricing card keeps a white button too */
.sd .sd-price--featured a.sd-btn--primary,
.sd .sd-price--featured .sd-btn--primary { background: #FFFFFF; color: var(--sd-indigo); }
.sd .sd-price--featured a.sd-btn--primary:hover,
.sd .sd-price--featured .sd-btn--primary:hover { background: #F5F3FF; color: #3730A3; }

.sd .sd-textlink { color: var(--sd-indigo); }
.sd .sd-textlink:hover { color: #3730A3; }

/* --- Pricing: highlight follows the cursor ------------------------------
   Previously only the middle card carried the gradient. Now any card the
   visitor is actually considering lights up, and the "most chosen" card
   drops back to plain when a sibling is hovered so only one leads at a time. */

.sd-price {
	transition: background var(--sd-speed) var(--sd-ease),
	            color var(--sd-speed) var(--sd-ease),
	            transform var(--sd-speed) var(--sd-ease),
	            box-shadow var(--sd-speed) var(--sd-ease),
	            border-color var(--sd-speed) var(--sd-ease);
}

.sd-grid:hover .sd-price--featured:not(:hover) {
	background: #FFFFFF;
	border-color: var(--sd-line);
	box-shadow: var(--sd-shadow-sm);
}
.sd-grid:hover .sd-price--featured:not(:hover) h3,
.sd-grid:hover .sd-price--featured:not(:hover) .sd-price__amount { color: var(--sd-ink); }
.sd-grid:hover .sd-price--featured:not(:hover) p,
.sd-grid:hover .sd-price--featured:not(:hover) li { color: var(--sd-slate); }
.sd-grid:hover .sd-price--featured:not(:hover) li::before { color: var(--sd-indigo); }
.sd-grid:hover .sd-price--featured:not(:hover) .sd-price__period { color: var(--sd-faint); }
.sd-grid:hover .sd-price--featured:not(:hover) .sd-price__badge {
	background: var(--sd-cloud); border-color: var(--sd-line-2); color: var(--sd-indigo);
}
.sd-grid:hover .sd-price--featured:not(:hover) .sd-btn--primary {
	background: var(--sd-indigo); color: #FFFFFF;
}

.sd-price:hover {
	background: var(--sd-grad);
	border-color: transparent;
	box-shadow: var(--sd-shadow-accent);
	transform: translateY(-6px);
}
.sd-price:hover h3,
.sd-price:hover .sd-price__amount { color: #FFFFFF; }
.sd-price:hover p,
.sd-price:hover li { color: rgba(255,255,255,.92); }
.sd-price:hover li::before { color: #FFFFFF; }
.sd-price:hover .sd-price__period { color: rgba(255,255,255,.78); }
.sd-price:hover .sd-price__badge {
	background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); color: #FFFFFF;
}
.sd-price:hover .sd-btn--ghost,
.sd-price:hover .sd-btn--primary {
	background: #FFFFFF; color: var(--sd-indigo); border-color: transparent;
}
.sd-price:hover .sd-btn--ghost:hover,
.sd-price:hover .sd-btn--primary:hover { background: #F5F3FF; color: #3730A3; }

/* Keyboard users get the same treatment */
.sd-price:focus-within { background: var(--sd-grad); border-color: transparent; }
.sd-price:focus-within h3, .sd-price:focus-within .sd-price__amount { color: #FFFFFF; }
.sd-price:focus-within p, .sd-price:focus-within li { color: rgba(255,255,255,.92); }

@media (hover: none) {
	.sd-price:hover { background: #FFFFFF; transform: none; }
	.sd-price:hover h3, .sd-price:hover .sd-price__amount { color: var(--sd-ink); }
	.sd-price:hover p, .sd-price:hover li { color: var(--sd-slate); }
	.sd-price--featured { background: var(--sd-grad); }
	.sd-price--featured h3, .sd-price--featured .sd-price__amount { color: #FFFFFF; }
	.sd-price--featured p, .sd-price--featured li { color: rgba(255,255,255,.92); }
}

/* --- Grouped service sections (Digital Marketing) ---------------------- */

.sd-group { padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--sd-line); }
.sd-group:first-of-type { border-top: 0; padding-top: 0; }
.sd-group__head { margin-bottom: 1.8rem; }
.sd-group__head h3 {
	font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; margin-bottom: .4rem;
}
.sd-group__head p { max-width: 62ch; margin: 0; }

/* ==========================================================================
   Hero deck v2 — rotating, tappable, mobile-correct
   The card in front changes on a timer so all three deliverables get seen,
   and each carries its own call to action rather than sitting there as decor.
   ========================================================================== */

.sd-deck {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	width: 100%;
}

.sd-deck__stack {
	position: relative;
	width: 100%;
	max-width: 400px;
	height: 430px;
	perspective: 1400px;
}

.sd-deck__card {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--sd-r-lg);
	padding: 1.5rem;
	transform-origin: 50% 100%;
	transition: transform .62s var(--sd-ease), opacity .62s var(--sd-ease), box-shadow .62s var(--sd-ease);
	will-change: transform;
}

/* front */
.sd-deck__card[data-depth="0"] {
	transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
	opacity: 1;
	z-index: 3;
	box-shadow: 0 24px 60px rgba(23, 27, 46, .30);
	cursor: default;
}
/* middle */
.sd-deck__card[data-depth="1"] {
	transform: translate3d(26px, 22px, -60px) rotate(4.5deg) scale(.94);
	opacity: .82;
	z-index: 2;
	box-shadow: 0 16px 40px rgba(23, 27, 46, .20);
	cursor: pointer;
}
/* back */
.sd-deck__card[data-depth="2"] {
	transform: translate3d(-24px, 40px, -120px) rotate(-5deg) scale(.89);
	opacity: .62;
	z-index: 1;
	box-shadow: 0 12px 30px rgba(23, 27, 46, .16);
	cursor: pointer;
}

/* Before JS runs, stack them so nothing looks broken */
.sd-deck__card:not([data-depth]) { z-index: 1; transform: rotate(-2deg) scale(.94); opacity: .7; }
.sd-deck__card:not([data-depth]):first-child { z-index: 3; transform: none; opacity: 1; }

.sd-deck__label {
	font-family: var(--sd-mono); font-size: .66rem; letter-spacing: .16em;
	text-transform: uppercase; color: var(--sd-indigo);
}
.sd-deck__title {
	font-family: var(--sd-display); font-weight: 600; font-size: 1.08rem;
	color: var(--sd-ink); margin: .35rem 0 .9rem; line-height: 1.25;
}
.sd-deck__body {
	flex: 1;
	min-height: 0;
	border-radius: var(--sd-r-md);
	background: var(--sd-mist);
	border: 1px solid var(--sd-line);
	display: grid;
	place-items: center;
	padding: .9rem;
	overflow: hidden;
}
.sd-deck__body svg { max-height: 100%; }
.sd-deck__copy {
	margin: .9rem 0 .75rem;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--sd-slate);
}
.sd-deck__cta {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--sd-display); font-weight: 600; font-size: .88rem;
	color: var(--sd-indigo); margin-top: auto;
}
.sd-deck__cta svg { transition: transform var(--sd-speed) var(--sd-ease); }
.sd-deck__cta:hover { text-decoration: none; }
.sd-deck__cta:hover svg { transform: translateX(4px); }

/* Cards behind should not steal the pointer from the front card's link */
.sd-deck__card[data-depth="1"] .sd-deck__cta,
.sd-deck__card[data-depth="2"] .sd-deck__cta { pointer-events: none; }

.sd-deck__dots { display: flex; gap: .5rem; }
.sd-deck__dot {
	width: 30px; height: 4px; padding: 0; border: 0; border-radius: 99px;
	background: rgba(255, 255, 255, .38); cursor: pointer;
	transition: background var(--sd-speed) var(--sd-ease), width var(--sd-speed) var(--sd-ease);
}
.sd-deck__dot[aria-selected="true"] { background: #fff; width: 42px; }
.sd-deck__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Mobile: the deck was cramped, this gives it room ----------------- */

@media (max-width: 1023px) {
	.sd-deck { margin-top: .5rem; }
	.sd-deck__stack { max-width: 380px; height: 400px; }
}

@media (max-width: 600px) {
	.sd-deck__stack { max-width: 100%; height: 372px; }
	.sd-deck__card { padding: 1.15rem; border-radius: var(--sd-r-md); }
	.sd-deck__card[data-depth="1"] { transform: translate3d(16px, 16px, -60px) rotate(3.5deg) scale(.95); }
	.sd-deck__card[data-depth="2"] { transform: translate3d(-14px, 30px, -120px) rotate(-4deg) scale(.91); }
	.sd-deck__title { font-size: 1rem; margin-bottom: .7rem; }
	.sd-deck__body { padding: .7rem; }
	.sd-deck__copy { font-size: .84rem; margin: .75rem 0 .6rem; }
	.sd-deck__cta { font-size: .85rem; }
}

@media (max-width: 380px) {
	.sd-deck__stack { height: 356px; }
	.sd-deck__copy { display: none; }
}

/* Hero panel needs breathing room on small screens or the deck collides */
@media (max-width: 1023px) {
	.sd-hero__panel { padding-bottom: clamp(44px, 8vw, 70px); }
	.sd-hero__grid { gap: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.sd-deck__card { transition: none; }
}

/* ==========================================================================
   Social icons
   ========================================================================== */

.sd-contact-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.sd-contact-list li { display: flex; gap: .8rem; align-items: center; }
.sd-contact-list a { color: var(--sd-ink); font-weight: 500; }
.sd-contact-list a:hover { color: var(--sd-indigo); }

/* Elementor-authored pages sit flush; the theme hero is skipped there */
.sd-elementor { padding-top: 96px; }

/* Whole front card is clickable, not just the link text */
.sd-deck__card[data-depth="0"] { cursor: pointer; }
.sd-deck__hit { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.sd-deck__card[data-depth="0"] .sd-deck__cta { position: static; }
.sd-deck__card[data-depth="0"]:hover { box-shadow: 0 30px 70px rgba(23,27,46,.34); transform: translate3d(0,-4px,0); }
.sd-deck__card[data-depth="0"]:hover .sd-deck__cta svg { transform: translateX(4px); }
.sd-deck__card[data-depth="1"] .sd-deck__hit,
.sd-deck__card[data-depth="2"] .sd-deck__hit { display: none; }
.sd-deck__cta:focus-visible { outline: 3px solid var(--sd-violet); outline-offset: 3px; border-radius: 6px; }

/* Footer contact rows: icon plus the actual address, not a bare glyph */
.sd-footer__contact { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.sd-footer__contact a {
	display: inline-flex; align-items: center; gap: .55rem;
	color: var(--sd-slate); font-size: .92rem; line-height: 1.45;
}
.sd-footer__contact a:hover { color: var(--sd-indigo); text-decoration: none; }
.sd-footer__contact svg { flex: none; opacity: .85; }
.sd-footer__contact a:hover svg { opacity: 1; }

/* ==========================================================================
   Social row — symbol on top, address underneath
   ========================================================================== */

.sd-footer__social {
	margin-top: 2.8rem;
	padding-top: 2.1rem;
	border-top: 1px solid var(--sd-line);
}

.sd-social__label {
	font-family: var(--sd-mono); font-size: .68rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--sd-faint);
	margin: 0 0 1.4rem;
}

/* `.sd-footer ul` sets display:grid at (0,1,1) and was beating this rule,
   collapsing the row into one column. Matching that specificity fixes it.
   Four equal tracks so the row fills the footer width with no dead space. */
.sd-footer .sd-social,
.sd-social {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-footer .sd-social li,
.sd-social li { margin: 0; min-width: 0; }

/* Column layout: mark centred over its address */
.sd-social__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7rem;
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	border: 0;
	text-align: center;
	transition: transform var(--sd-speed) var(--sd-ease);
}
.sd-social__link:hover { text-decoration: none; transform: translateY(-3px); }

.sd-social__icon {
	width: 46px; height: 46px; flex: none;
	border-radius: 13px;
	display: grid; place-items: center;
	color: #fff;
	box-shadow: var(--sd-shadow-sm);
	transition: box-shadow var(--sd-speed) var(--sd-ease);
}
.sd-social__link:hover .sd-social__icon { box-shadow: var(--sd-shadow-md); }

.sd-social__link--whatsapp .sd-social__icon { background: #25D366; }
.sd-social__link--instagram .sd-social__icon {
	background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}
.sd-social__link--gmail .sd-social__icon { background: #FFFFFF; border: 1px solid var(--sd-line); }
.sd-social__link--youtube .sd-social__icon { background: #FF0000; }

.sd-social__handle {
	display: block;
	font-size: .85rem;
	line-height: 1.4;
	color: var(--sd-slate);
	max-width: 100%;
	overflow-wrap: anywhere;
}
.sd-social__link:hover .sd-social__handle { color: var(--sd-indigo); }

/* Two across on tablets, one column on phones */
@media (max-width: 900px) {
	.sd-footer .sd-social,
	.sd-social { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
}

@media (max-width: 560px) {
	.sd-footer .sd-social,
	.sd-social { grid-template-columns: 1fr; gap: 1.3rem; }
	.sd-social__link { flex-direction: row; align-items: center; gap: .9rem; text-align: left; }
	.sd-social__handle { font-size: .86rem; }
}


/* The mobile submenu toggle has no job on desktop */
@media (min-width: 1024px) {
	.sd-subtoggle { display: none; }
}

/* Floating WhatsApp: symbol only, so it reads as an icon button */
.sd-whatsapp {
	width: 58px; height: 58px; padding: 0;
	justify-content: center;
	color: #FFFFFF;
}
.sd-whatsapp:hover { color: #FFFFFF; }
.sd-whatsapp__label { display: none; }
@media (max-width: 600px) { .sd-whatsapp { width: 54px; height: 54px; padding: 0; } }

/* ---- Portfolio: real items, video tiles, lightbox ---- */
.sd-ph--real{background-size:cover;background-position:center;min-height:230px;position:relative;display:flex;align-items:center;justify-content:center}
.sd-work--video{cursor:pointer}
.sd-work__link{display:block;color:inherit;text-decoration:none}
.sd-play{width:58px;height:58px;border-radius:50%;background:rgba(10,14,25,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;padding-left:5px;box-shadow:0 8px 26px rgba(0,0,0,.35);transition:transform .2s ease}
.sd-work--video:hover .sd-play{transform:scale(1.1)}
.sd-elementor-below{padding-top:0}
.sd-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,10,18,.86);display:flex;align-items:center;justify-content:center;padding:24px}
.sd-lightbox[hidden]{display:none}
.sd-lightbox__panel{position:relative;width:min(960px,100%)}
.sd-lightbox__stage{aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.sd-lightbox__stage iframe,.sd-lightbox__stage video{width:100%;height:100%;border:0;display:block}
.sd-lightbox__close{position:absolute;top:-44px;right:0;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1}

/* Video tile without artwork: branded gradient stage */
.sd-ph--vid{background:linear-gradient(135deg,#141a33 0%,#3b2d6e 55%,#5a3fa0 100%)}
.sd-ph--vid .sd-play{background:rgba(255,255,255,.16);backdrop-filter:blur(4px)}