/* SPARK Site Header — pixel-matched to Figma "SPARK Website 2025"
 * (nodes 6516-39572 navbar, 6586-3902 / 6563-23183 / 6563-23194 / 6563-23221 panels).
 * Reference frame 1440px; breakpoint 1025px. */
:root {
	--spark-true-black: #000000;
	--spark-black: #1f2026;          /* "Black" token: borders, topbar text   */
	--spark-white: #ffffff;
	--spark-green: #21d679;          /* SPARK Green                            */
	--spark-green-aa: #00ce7c;       /* on-white green: topbar bg, CS accent   */
	--spark-green-light: #bcf2d6;    /* Light SPARK Green: CS active label     */
	--spark-blue: #2e7df7;           /* HYPE Blue: CTA, GM accent              */
	--spark-blue-light: #c0d8fc;     /* Light HYPE Blue: GM active label       */
	--spark-gray: #99999c;
	--spark-gray-light: #d6d6d7;     /* Light Gray: Industries/Company accent  */
	--spark-outline: #2c2c2c;        /* card border                            */
	--spark-ad-border: #7ae6af;      /* Primary 60                             */
	--spark-font: "proxima-nova", "Proxima Nova Alt", sans-serif;
}
.spark-site-header { position: sticky; top: 0; z-index: 1000; font-family: var(--spark-font); }
body.admin-bar .spark-site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .spark-site-header { top: 46px; } }
.spark-site-header *, .spark-site-header *::before, .spark-site-header *::after { box-sizing: border-box; }
.spark-site-header ul { list-style: none; margin: 0; padding: 0; }
.spark-site-header a, .spark-site-header button { font: inherit; }
.spark-site-header button { background: none; border: 0; cursor: pointer; color: inherit; }

/* ---------- Top bar: 34px, green, 50px side padding ---------- */
.spark-topbar { background: var(--spark-green-aa); color: var(--spark-black); }
.spark-topbar-inner { height: 34px; padding: 0 50px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.spark-announcement { display: flex; align-items: center; gap: 12px; color: var(--spark-true-black); text-decoration: none; font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: 0.1px; white-space: nowrap; transition: .3s; }
.spark-site-header .spark-announcement:hover,
.spark-site-header .spark-announcement:focus { color: var(--spark-true-black); text-decoration: none; background: transparent; }
.spark-topbar-arrow { display: block; width: 16px; height: 16px; }
.spark-toplinks { display: flex; gap: 32px; align-items: center; }
.spark-site-header .spark-toplinks a,
.spark-site-header button.spark-search-toggle {
	position: relative; display: flex; align-items: center; gap: 12px;
	color: var(--spark-true-black); text-decoration: none;
	font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: 0.1px;
	border: 0; padding: 0; background: transparent; border-radius: 0; transition: .4s;
}
.spark-site-header .spark-toplinks a::after,
.spark-site-header button.spark-search-toggle::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
	background: var(--spark-true-black); opacity: 0; pointer-events: none;
	transition: opacity .3s cubic-bezier(.58, .3, .005, 1), transform .3s cubic-bezier(.58, .3, .005, 1);
}
.spark-site-header button.spark-search-toggle::after { left: 28px; width: calc(100% - 28px); }
.spark-site-header .spark-toplinks a:hover,
.spark-site-header .spark-toplinks a:focus,
.spark-site-header button.spark-search-toggle:hover,
.spark-site-header button.spark-search-toggle:focus { color: var(--spark-true-black); background: transparent; }
.spark-site-header .spark-toplinks a:hover::after,
.spark-site-header .spark-toplinks a:focus::after,
.spark-site-header button.spark-search-toggle:hover::after,
.spark-site-header button.spark-search-toggle:focus::after { opacity: 1; transform: scale(1); }
.spark-search-icon { display: block; width: 16px; height: 16px; }

/* ---------- Main bar: 110px, true black, 2px #1f2026 bottom border ---------- */
.spark-mainbar { background: var(--spark-true-black); color: var(--spark-white); border-bottom: 2px solid var(--spark-black); }
.spark-mainbar-inner { height: 110px; padding: 0 50px; display: flex; align-items: center; }
.spark-logo { display: flex; align-items: center; flex: 0 0 auto; }
.spark-logo img { height: 61px; width: auto; }
.spark-nav { margin-left: auto; display: flex; }
.spark-nav-list { display: flex; gap: 35px; }
.spark-nav-item { position: relative; }
.spark-site-header .spark-nav-link, .spark-site-header a.spark-nav-link, .spark-site-header button.spark-nav-link {
	display: flex; align-items: center; gap: 12px; height: 110px; padding: 20px 0; margin: 0;
	color: var(--spark-white); font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: 0.1px;
	text-decoration: none; white-space: nowrap;
	border: 0; border-bottom: 4px solid transparent; background: transparent; border-radius: 0;
}
/* Chevron caret — Figma "next 2" glyph via mask so it tints with the label. */
.spark-caret {
	display: inline-block; width: 16px; height: 16px; flex: 0 0 16px;
	background-color: currentColor;
	-webkit-mask: url("figma/chevron.svg") no-repeat 50% 50% / 6px 10px;
	mask: url("figma/chevron.svg") no-repeat 50% 50% / 6px 10px;
	transform: rotate(90deg); transition: transform .2s ease;
}
/* Nav hover/open — measured from production: UNIFORM across every item
 * (mega and plain links alike): label #BCF2D6, 4px #00CE7C underline.
 * (The Figma per-menu nav accents were never implemented on production;
 * the per-panel accents live on in the CARD hover states below.) */
.spark-nav-item:hover > .spark-nav-link,
.spark-nav-item:focus-within > .spark-nav-link,
.spark-nav-item.is-open > .spark-nav-link {
	color: var(--spark-green-light);
	border-bottom-color: var(--spark-green-aa);
	background: transparent;
}
.spark-nav-item:hover > .spark-nav-link .spark-caret,
.spark-nav-item:focus-within > .spark-nav-link .spark-caret,
.spark-nav-item.is-open > .spark-nav-link .spark-caret { transform: rotate(-90deg); }
.spark-site-header button.spark-nav-link:hover, .spark-site-header button.spark-nav-link:focus { background: transparent; }

/* CTA — HYPE Blue pill, 24/12 padding, uppercase, 2px tracking. */
.spark-cta-btn {
	flex: 0 0 auto; margin-left: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--spark-blue); color: var(--spark-white);
	font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
	text-decoration: none; padding: 12px 24px; border-radius: 100px; white-space: nowrap;
}
.spark-cta-btn:hover { background: var(--spark-green-aa); color: var(--spark-true-black); }

/* ---------- Mega panel: full-bleed black sheet, 20px padding, glow backdrop ---------- */
.spark-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	visibility: hidden; opacity: 0; transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.spark-nav-item.has-mega { position: static; }
.spark-nav-item:hover > .spark-mega,
.spark-nav-item:focus-within > .spark-mega,
.spark-nav-item.is-open > .spark-mega { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }
.spark-mega-inner {
	position: relative; overflow: hidden;
	background: var(--spark-true-black); color: var(--spark-white);
	padding: 20px; box-shadow: 0 24px 40px rgba(0, 0, 0, .4);
}
/* Glow: Figma ellipse (292x427, 75° rotation, blur, .47 opacity) as CSS. */
.spark-mega-inner::before,
.spark-mega-inner::after {
	content: ""; position: absolute; width: 584px; height: 854px; border-radius: 50%;
	filter: blur(117px); opacity: .47; transform: rotate(75deg); pointer-events: none;
	background: radial-gradient(50% 50% at 50% 50%, var(--spark-glow, var(--spark-green)) 0%, transparent 72%);
}
.spark-mega-inner::after { right: -18%; top: 40px; left: auto; }
.spark-mega-inner::before { display: none; left: -600px; top: 20px; }
.spark-mega-inner.has-left-glow::before { display: block; --spark-glow: var(--spark-green); }
.spark-mega-inner.glow-gray::after { --spark-glow: var(--spark-gray); }
.spark-mega-cols { position: relative; z-index: 1; display: flex; gap: 20px; align-items: stretch; }
.spark-mega-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* Card grid rows */
.spark-card-grid { display: grid; gap: 20px; align-content: start; position: relative; z-index: 1; }
.spark-card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spark-card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spark-card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spark-card-grid.fixed-h .spark-card { min-height: 201px; }

/* Card — Figma "Cards": vertical gradient, 1px outline, 8px radius, 20px pad. */
.spark-card {
	display: flex; flex-direction: column; align-items: flex-start;
	background: linear-gradient(180deg, #060606 0%, #1b1919 100%);
	border: 1px solid var(--spark-outline); border-radius: 8px; padding: 20px;
	color: var(--spark-white); text-decoration: none;
	transition: border-color .3s;
}
/* Card hover — measured from production (per-panel accent):
 * green panels: solid #023019 + #21D679 border; blue: #03193A + #2E7DF7;
 * unoverridden gray panels: gradient drops to flat black, border unchanged. */
.spark-card:hover { transition: none; background: #000; border-color: var(--spark-outline); }
.spark-accent-green .spark-card:hover { background: #023019; border-color: var(--spark-green); }
.spark-accent-blue .spark-card:hover { background: #03193a; border-color: var(--spark-blue); }
/* Production Industries tiles transition to solid #1F2026 with a #5C5C61 border. */
.spark-nav-item[data-panel="industries"] .spark-card {
	transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.spark-nav-item[data-panel="industries"] .spark-card:hover {
	background: #1f2026;
	border-color: #5c5c61;
}
.spark-card-icon { display: block; width: 24px; height: 24px; margin-bottom: 8px; }
.spark-card-title { display: block; font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: 0.1px; margin-bottom: 8px; }
.spark-card-desc { display: block; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.25px; margin-bottom: 12px; }

/* Shared bottom link row: "LEARN MORE →" (14px bold, .85px tracking, upcase). */
.spark-link-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; margin-top: auto; }
.spark-link-label { flex: 1 1 auto; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 0.85px; text-transform: uppercase; color: var(--spark-white); }
.spark-link-arrow { display: block; width: 16px; height: 16px; flex: 0 0 16px; }

/* Featured row (GM article / Company award): full-width card, link bottom-right. */
.spark-featured-row {
	display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; width: 100%;
	background: linear-gradient(180deg, #060606 0%, #1b1919 100%);
	border: 1px solid var(--spark-outline); border-radius: 8px; padding: 20px;
	color: var(--spark-white); text-decoration: none; position: relative; z-index: 1;
	flex: 1 1 auto;
}
.spark-featured-row { transition: border-color .3s; }
.spark-featured-row:hover { transition: none; background: #000; border-color: var(--spark-outline); }
.spark-accent-green .spark-featured-row:hover { background: #023019; border-color: var(--spark-green); }
.spark-accent-blue .spark-featured-row:hover { background: #03193a; border-color: var(--spark-blue); }
.spark-featured-body { display: flex; gap: 20px; align-items: flex-start; align-self: stretch; flex: 1 1 auto; min-width: 0; }
.spark-featured-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.spark-featured-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.spark-featured-title { font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: 0.1px; }
.spark-featured-desc { font-size: 18px; line-height: 26px; font-weight: 400; letter-spacing: 0.5px; }
.spark-featured-row .spark-link-row { width: auto; margin: 0; flex: 0 0 auto; white-space: nowrap; }

/* Company panel: production column inset, row proportions and card interactions. */
@media (min-width: 1025px) {
	.spark-nav-item[data-panel="company"] .spark-mega-main { padding-left: 10px; }
	.spark-nav-item[data-panel="company"] .spark-card-grid { flex: 0 0 248px; grid-auto-rows: 248px; }
}
.spark-nav-item[data-panel="company"] .spark-card,
.spark-nav-item[data-panel="company"] .spark-featured-row {
	transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.spark-nav-item[data-panel="company"] .spark-card:hover,
.spark-nav-item[data-panel="company"] .spark-featured-row:hover {
	background: #1f2026; border-color: #5c5c61;
	transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.spark-nav-item[data-panel="company"] .spark-card-icon { width: 32px; height: 32px; margin-bottom: 16px; }
.spark-nav-item[data-panel="company"] .spark-featured-text { padding-top: 8px; }
.spark-nav-item[data-panel="company"] .spark-card .spark-link-row,
.spark-nav-item[data-panel="company"] .spark-featured-row .spark-link-row { height: 24px; align-items: center; }
.spark-nav-item[data-panel="company"] .spark-card .spark-link-label,
.spark-nav-item[data-panel="company"] .spark-featured-row .spark-link-label {
	font-size: 14px; line-height: 14px; font-weight: 400; letter-spacing: normal; text-transform: none;
}
.spark-nav-item[data-panel="company"] .spark-card .spark-link-arrow,
.spark-nav-item[data-panel="company"] .spark-featured-row .spark-link-arrow { width: 24px; height: 24px; flex: 0 0 24px; }

/* Growth Marketing panel: production two-column proportions and blue hover state. */
@media (min-width: 1025px) {
	.spark-nav-item[data-panel="growth-marketing"] .spark-mega-main { padding-left: 10px; }
	.spark-nav-item[data-panel="growth-marketing"] .spark-card-grid { flex: 0 0 472px; grid-auto-rows: 226px; }
}
.spark-nav-item[data-panel="growth-marketing"] .spark-card {
	transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.spark-nav-item[data-panel="growth-marketing"] .spark-card:hover {
	background: #03193a; border-color: #2e7df7;
	transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.spark-nav-item[data-panel="growth-marketing"] .spark-card-icon { width: 32px; height: 32px; margin-bottom: 16px; }
.spark-nav-item[data-panel="growth-marketing"] .spark-card-title,
.spark-nav-item[data-panel="growth-marketing"] .spark-card-desc { width: 100%; }
.spark-nav-item[data-panel="growth-marketing"] .spark-card-desc { margin-bottom: 0; letter-spacing: normal; }
.spark-nav-item[data-panel="growth-marketing"] .spark-card .spark-link-row { height: 26px; margin-top: 40px; align-items: center; }
.spark-nav-item[data-panel="growth-marketing"] .spark-card .spark-link-label { flex: 0 0 80%; }
.spark-nav-item[data-panel="growth-marketing"] .spark-card .spark-link-arrow { width: 24px; height: 24px; flex: 0 0 24px; margin-left: auto; }

/* Contact CTA (Growth Marketing / Company): production photo, overlay and type. */
.spark-ad-card {
	position: relative; overflow: hidden; flex: 0 0 280px; width: 280px; height: 469px;
	border: 1px solid var(--spark-ad-border); border-radius: 8px;
	background: transparent; color: var(--spark-white); text-decoration: none; z-index: 1; display: block;
	transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.spark-nav-item[data-panel="growth-marketing"] .spark-ad-card { height: 492px; }
.spark-ad-card:hover { border-color: var(--spark-white); }
.spark-ad-photo { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; object-fit: contain; object-position: bottom center; z-index: 0; }
.spark-ad-card::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(26, 77, 56, .4) 40%, #1a4d38 100%); opacity: .5;
}
.spark-ad-title { position: absolute; top: 20px; right: 20px; width: 52%; padding: 0; margin: 0; text-align: right; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: .17px; z-index: 2; }
.spark-ad-card .spark-link-row { position: absolute; left: 20px; right: 20px; bottom: 20px; width: auto; height: 24px; padding: 0; margin: 0; align-items: flex-end; justify-content: space-between; z-index: 2; }
.spark-ad-card .spark-link-label { flex: 0 0 auto; font-size: 14px; line-height: 16.8px; font-weight: 400; letter-spacing: .85px; text-transform: none; }
.spark-ad-card .spark-link-arrow { width: 24px; height: 24px; flex: 0 0 24px; }

/* Case-study slider (AI & Custom Software aside): production 280x440 card. */
.spark-cs-slider {
	position: relative; overflow: hidden; flex: 0 0 280px; width: 280px; height: 440px;
	border: 1px solid var(--spark-ad-border); border-radius: 8px;
	background: linear-gradient(180deg, rgba(26, 77, 56, .4) 40%, #1a4d38 100%); z-index: 1;
	transition: background .3s, border .3s, box-shadow .3s, transform .4s;
}
.spark-cs-slider:has(.spark-cs-slide.is-active:hover) { background: linear-gradient(270deg, #1f2026 43.74%, #000 100%); border-color: var(--spark-white); }
.spark-cs-slide { position: absolute; inset: 0; color: var(--spark-white); text-decoration: none; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.spark-cs-slide.is-active { opacity: 1; pointer-events: auto; }
.spark-cs-title { position: absolute; left: 20px; top: 48px; width: 238px; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: normal; z-index: 2; }
.spark-cs-slide--oliver .spark-cs-title { top: 60px; width: 218px; }
.spark-cs-slide--hounds-and-co .spark-cs-title { top: 60px; }
.spark-cs-image { position: absolute; display: block; max-width: none; border: 0; border-radius: 0; object-position: center; z-index: 0; }
.spark-cs-slide--vollemans-family-farm .spark-cs-image { left: 38px; top: 177px; width: 240px; height: 184px; object-fit: fill; }
.spark-cs-slide--oliver .spark-cs-image { left: 20px; top: 164px; width: 220px; height: 275px; object-fit: cover; object-position: center top; }
.spark-cs-slide--mall-city-mechanical .spark-cs-image { left: 20px; top: 172px; width: 258px; height: 179px; object-fit: fill; }
.spark-cs-slide--hounds-and-co .spark-cs-image { left: 29px; top: 164px; width: 220px; height: 270px; object-fit: cover; }
.spark-cs-slide::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; border-radius: 8px;
	background: linear-gradient(180deg, rgba(0, 153, 92, 0) 0%, rgba(28, 136, 93, .4) 33.17%, rgba(12, 116, 74, .8) 65.38%, #214329 100%);
}
.spark-cs-slide .spark-link-row { position: absolute; left: 20px; right: 20px; bottom: 26px; width: auto; height: 24px; padding: 0; margin: 0; align-items: center; z-index: 2; }
.spark-cs-slide .spark-link-label { font-size: 14px; line-height: 16.8px; letter-spacing: .25px; }
.spark-cs-slide .spark-link-arrow { position: static; display: block; width: 24px; height: 24px; flex: 0 0 24px; border: 0; border-radius: 0; object-fit: contain; }
.spark-cs-dots { position: absolute; top: 20px; left: 20px; display: flex; gap: 20px; z-index: 3; padding: 0; }
.spark-site-header button.spark-cs-dot { display: block; flex: 0 0 12px; width: 12px; min-width: 12px; height: 12px; min-height: 12px; border-radius: 50%; background: var(--spark-green); padding: 0; }
.spark-site-header button.spark-cs-dot:hover, .spark-site-header button.spark-cs-dot:focus { background: var(--spark-green); }
.spark-site-header button.spark-cs-dot.is-active { background: var(--spark-white); }

/* Keep every clickable mega-panel surface white when global theme link states apply. */
.spark-site-header .spark-card:hover,
.spark-site-header .spark-card:focus,
.spark-site-header .spark-featured-row:hover,
.spark-site-header .spark-featured-row:focus,
.spark-site-header .spark-ad-card:hover,
.spark-site-header .spark-ad-card:focus,
.spark-site-header .spark-cs-slide:hover,
.spark-site-header .spark-cs-slide:focus { color: var(--spark-white); }

/* ---------- Burger / offcanvas / search (mobile & overlay chrome) ---------- */
/* Scoped: hello-elementor reset.css loads after this sheet and its
 * `button { display: inline-block }` outranks a bare `.spark-burger` in the cascade. */
.spark-site-header .spark-burger { display: none; }
.spark-offcanvas { display: none; }
.spark-search-overlay {
	position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .8); padding: 0 15vw; transition: .3s;
}
.spark-search-overlay[hidden] { display: none; }
.spark-search-box, .spark-search-form { width: 100%; margin: 0; padding: 0; background: transparent; border: 0; }
#spark-search-overlay input.spark-search-field,
#spark-search-overlay input.spark-search-field:focus {
	display: block; width: 100%; height: 56px; min-height: 56px; margin: 0; padding: 13px 20px;
	appearance: none; background: transparent; color: var(--spark-white); caret-color: var(--spark-white);
	border: 1px solid var(--spark-white); border-radius: 0; box-shadow: none; outline: 0;
	font-family: Roboto, sans-serif; font-size: 20px; line-height: 28px; letter-spacing: normal; text-align: center;
	transition: .3s;
}
#spark-search-overlay input.spark-search-field::placeholder { color: var(--spark-white); opacity: .6; text-align: center; }

/* Mobile header bar — Figma 6563-24393 "NavTab / Variant2": 88px black bar,
 * full reversed logo 45px tall at left 24px, white 30x30 hamburger at right 24px. */
@media (max-width: 1024.98px) {
	.spark-nav, .spark-cta-btn, .spark-topbar { display: none; }
	.spark-mainbar-inner { height: 88px; padding: 0 24px; }
	.spark-logo img { height: 45px; }
	.spark-site-header .spark-burger { display: inline-flex; margin-left: auto; padding: 0; }
	.spark-burger img { display: block; width: 30px; height: 30px; }
}

/* Offcanvas menu (mobile) — Figma 6563-24112 open / 6563-24135 expanded:
 * full-screen black sheet; 88px head (bulb logo + X); 65px tabs (24/34 bold,
 * 0.192px tracking, 24px chevron); expanded section on #1F2026 with icon rows;
 * blue pill CTA in a 20px inset; 70px gray copyright footer. */
@media (max-width: 1024.98px) {
	.spark-offcanvas { display: block; position: fixed; inset: 0; z-index: 1200; }
	.spark-offcanvas[hidden] { display: none; }
	body.admin-bar .spark-offcanvas { top: 32px; }
}
@media (max-width: 782px) {
	body.admin-bar .spark-offcanvas { top: 46px; }
}
@media (max-width: 1024.98px) {
	.spark-offcanvas-drawer { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--spark-true-black); color: var(--spark-white); overflow-y: auto; font-family: var(--spark-font); }
	.spark-offcanvas-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 88px; height: 88px; padding: 0 24px; }
	.spark-offcanvas-logo { display: flex; align-items: center; }
	.spark-offcanvas-logo img { display: block; width: 45px; height: 45px; }
	.spark-site-header button.spark-offcanvas-close { display: flex; align-items: center; justify-content: center; padding: 6px; margin-right: -6px; background: transparent; }
	.spark-offcanvas-close img { display: block; width: 18px; height: 18px; }
	.spark-offcanvas-list { display: flex; flex-direction: column; flex: 1 0 auto; }
	/* .spark-site-header scope: hello-elementor reset.css loads later and its
	 * [type="button"] rules tie a bare class selector, so buttons need the extra weight. */
	.spark-site-header .spark-offcanvas-item > a,
	.spark-site-header button.spark-offcanvas-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 65px; padding: 15px 24px 16px; margin: 0; text-align: left; color: var(--spark-white); font-size: 24px; line-height: 34px; font-weight: 700; letter-spacing: 0.192px; text-decoration: none; background: transparent; border: 0; border-radius: 0; }
	.spark-offcanvas-caret { display: block; flex: 0 0 24px; width: 24px; height: 24px; transition: transform .2s ease; }
	.spark-offcanvas-item.is-open { background: var(--spark-black); }
	.spark-offcanvas-item.is-open .spark-offcanvas-caret { transform: rotate(180deg); }
	/* Panel content: reuse the desktop mega markup, restyled to Figma's mobile
	 * rows (24px icon + title/desc column). Asides and link rows are desktop-only. */
	.spark-offcanvas-panel { padding: 0 0 10px; }
	.spark-offcanvas-panel .spark-mega-inner { padding: 0; box-shadow: none; background: transparent; overflow: visible; }
	.spark-offcanvas-panel .spark-mega-inner::before, .spark-offcanvas-panel .spark-mega-inner::after { display: none; }
	.spark-offcanvas-panel .spark-mega-cols, .spark-offcanvas-panel .spark-mega-main, .spark-offcanvas-panel .spark-card-grid { display: block; }
	.spark-offcanvas-panel .spark-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 8px 24px; min-height: 0; background: none; border: 0; border-radius: 0; }
	.spark-offcanvas-panel .spark-card:hover, .spark-offcanvas-panel .spark-card:focus { background: none; border: 0; }
	.spark-offcanvas-panel .spark-card-grid.fixed-h .spark-card { min-height: 0; }
	.spark-offcanvas-panel .spark-card-icon { grid-row: 1 / span 2; align-self: start; width: 24px; height: 24px; margin: 0; }
	.spark-offcanvas-panel .spark-card-title { grid-column: 2; margin: 0; font-size: 16px; line-height: 22px; letter-spacing: 0.1px; }
	.spark-offcanvas-panel .spark-card-desc { grid-column: 2; margin: 0; font-size: 14px; line-height: 20px; letter-spacing: 0.25px; }
	.spark-offcanvas-panel .spark-link-row,
	.spark-offcanvas-panel .spark-cs-slider,
	.spark-offcanvas-panel .spark-ad-card,
	.spark-offcanvas-panel .spark-featured-row { display: none; }
	/* Contact pill — fills the gap between the tabs and the footer (Figma 6564-1273). */
	.spark-offcanvas-item.is-button { flex: 1 0 auto; padding: 20px; }
	.spark-site-header .spark-offcanvas-item.is-button > a { min-height: 0; justify-content: center; padding: 12px 24px; background: var(--spark-blue); border-radius: 100px; font-size: 16px; line-height: 22px; letter-spacing: 2px; text-transform: uppercase; }
	/* Footer — Figma "Nav Footer": 70px, centered 14/16 gray bold. */
	.spark-offcanvas-copyright { display: flex; align-items: center; justify-content: center; height: 70px; padding: 0 24px; color: var(--spark-gray); font-size: 14px; line-height: 16px; font-weight: 700; letter-spacing: 0.25px; text-align: center; }
	.spark-offcanvas-copyright p { margin: 0; }
	body.spark-menu-open { overflow: hidden; }
}
.spark-nav-link:focus-visible, .spark-card:focus-visible, .spark-burger:focus-visible, .spark-featured-row:focus-visible,
.spark-search-toggle:focus-visible, .spark-offcanvas-toggle:focus-visible, .spark-ad-card:focus-visible { outline: 2px solid var(--spark-green); outline-offset: 2px; }