/* ═══════════════════════════════════════════════════════════════════
   Holistic Synergy OS — front-end design system. Vonca only. Dark.
   Pillars: SEO=blue, Advertising=teal, Websites=purple.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Vonca (the only typeface) ── */
@font-face { font-family:'Vonca'; src:url('../fonts/vonca-extralight-webfont.woff2') format('woff2'); font-weight:200; font-display:swap; }
@font-face { font-family:'Vonca'; src:url('../fonts/vonca-light-webfont.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Vonca'; src:url('../fonts/vonca-regular-webfont.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Vonca'; src:url('../fonts/vonca-medium-webfont.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Vonca'; src:url('../fonts/vonca-semibold-webfont.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Vonca'; src:url('../fonts/vonca-bold-webfont.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Vonca'; src:url('../fonts/vonca-extrabold-webfont.woff2') format('woff2'); font-weight:800; font-display:swap; }

:root {
	--hs-bg:        #08080c;
	--hs-bg-2:      #0c0c14;
	--hs-panel:     #101018;
	--hs-panel-2:   #14141f;
	--hs-soft:      rgba(255,255,255,.04);
	--hs-soft-2:    rgba(255,255,255,.07);
	--hs-line:      rgba(255,255,255,.10);
	--hs-line-2:    rgba(255,255,255,.06);
	--hs-text:      #f5f7fb;
	--hs-muted:     rgba(245,247,251,.66);
	--hs-dim:       rgba(245,247,251,.40);
	/* pillar fallbacks (plugin overrides via brand tokens) */
	--hs-seo:       #2f6bff;
	--hs-ads:       #15d6c6;
	--hs-web:       #a04bff;
	--hs-radius:    16px;
	--hs-radius-lg: 22px;
	--hs-radius-sm: 11px;
	--hs-header-h:  76px;
	--hs-header-hc: 60px; /* compact height once scrolled */
	--hs-max:       1200px;
	--hs-ease:      cubic-bezier(.2,.8,.2,1);
	--accent:       var(--hs-seo);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--hs-bg); }
/* Full-bleed sections use 50vw margins; clip the scrollbar-width overshoot. */
body { overflow-x:clip; }
body {
	font-family:'Vonca','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
	color:var(--hs-text);
	line-height:1.6;
	font-size:16px;
	-webkit-font-smoothing:antialiased;
	min-height:100vh;
	overflow-x:hidden;
}
/* While the loader is up there is no scrollbar at all (loader spans the full
   viewport); the reserved gutter keeps layout identical once it returns. */
html { scrollbar-gutter:stable; }
html:has(body.hs-preload) { overflow:hidden; }

/* ── Scrollbars: slim dark glass (site-wide + drawer/menu inner scroll) ── */
* { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:var(--hs-bg); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:999px; border:3px solid var(--hs-bg); background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.3); border:3px solid var(--hs-bg); background-clip:padding-box; }
::-webkit-scrollbar-corner { background:var(--hs-bg); }

a { color:var(--accent); text-decoration:none; }
button { font-family:inherit; color:inherit; cursor:pointer; }
img, svg { max-width:100%; }

/* Accent per service */
[data-accent="seo"] { --accent:var(--hs-seo); }
[data-accent="ads"] { --accent:var(--hs-ads); }
[data-accent="web"] { --accent:var(--hs-web); }

/* ── Loader (gates first paint → no layout shift) ── */
.hs-loader {
	position:fixed; inset:0; z-index:9999;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:52px;
	background:var(--hs-bg);
	/* Silver griffin by default; service routes recolor via JS. */
	--hs-loader-accent:#c9d1dc;
	transition:opacity .5s var(--hs-ease), visibility .5s;
}
.hs-loader-stage { position:relative; width:240px; height:240px; display:grid; place-items:center; }
.hs-loader-ring {
	position:absolute; inset:0; border-radius:50%;
	border:3px solid rgba(255,255,255,.08);
	border-top-color:var(--hs-loader-accent);
	animation:hs-spin 1s linear infinite;
	box-shadow:0 0 40px -8px var(--hs-loader-accent);
}
.hs-loader-griffin { width:128px; height:128px; color:var(--hs-loader-accent); animation:hs-pulse 1.6s var(--hs-ease) infinite; filter:drop-shadow(0 0 20px var(--hs-loader-accent)); }
.hs-loader-word { font-size:1.6rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--hs-muted); }
@keyframes hs-spin { to { transform:rotate(360deg); } }
@keyframes hs-pulse { 0%,100% { opacity:.85; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }
/* When the app is ready, JS removes .hs-preload; loader fades out. */
body:not(.hs-preload) .hs-loader { opacity:0; visibility:hidden; pointer-events:none; }
/* Route-change flashes: loader covers only below the sticky header (first paint stays full-screen).
   z-index sits under the header (60) but over the mega menu (50) and content. */
body.hs-flash .hs-loader { top:var(--hs-flash-top, var(--hs-header-h)); z-index:55; }
/* Hold the app hidden under the loader until ready (prevents flash/reflow). */
.hs-preload .hs-app { opacity:0; }
.hs-app { opacity:1; transition:opacity .4s var(--hs-ease); }

/* ── Header ── */
/* Transparent at rest (page shows through); glass only once scrolled. No border line. */
.hs-header {
	position:sticky; top:0; z-index:60;
	background:transparent;
	border-bottom:1px solid transparent;
	/* Pull the page up underneath: the header floats over the content,
	   so the hero (gradient and all) shows through at rest.
	   NOTE: never transition backdrop-filter — browsers paint seam artifacts. */
	margin-bottom:calc(-1 * var(--hs-header-h));
	transition:background .3s var(--hs-ease), border-color .3s var(--hs-ease);
}
/* 3-column grid: center nav stays truly centered regardless of side widths. */
.hs-header-inner { width:100%; height:var(--hs-header-h); padding:0 28px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; transition:height .35s var(--hs-ease); }
.hs-header.is-scrolled .hs-header-inner { height:var(--hs-header-hc); }
.hs-header-inner .hs-brand { justify-self:start; }
.hs-header-inner .hs-header-actions { justify-self:end; }
.hs-brand { display:flex; align-items:center; gap:11px; background:none; border:0; }
.hs-brand-logo { width:42px; height:42px; color:var(--hs-text); filter:drop-shadow(0 0 8px rgba(160,120,255,.25)); transition:width .35s var(--hs-ease), height .35s var(--hs-ease); }
/* Header labels sit at half strength; wordmark and icons full. */
.hs-header .hs-pillar-label { opacity:.5; }
/* max-height must collapse WITH max-width when scrolled: a 0-width element still
   has height, and 84px of hidden wordmark props the grid row open, sinking every
   icon 6px in the compact bar. */
.hs-brand-word { font-weight:800; font-size:1.72rem; line-height:1.05; letter-spacing:.06em; text-transform:uppercase; text-align:left; max-width:360px; max-height:90px; overflow:hidden; white-space:nowrap; transition:max-width .35s var(--hs-ease), max-height .35s var(--hs-ease), opacity .28s var(--hs-ease), transform .35s var(--hs-ease); }
/* Scrolled: wordmark slides away, griffin drops to pillar-icon size, glass kicks in. */
.hs-header.is-scrolled { background:rgba(8,8,12,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 12px 40px -18px rgba(0,0,0,.85); border-bottom-color:rgba(255,255,255,.1); }
/* Mega open: header goes solid to the panel's black — one continuous surface.
   .hs-menu-closing (JS) holds the solid through the close choreography so the
   header and panel fade back to normal together. */
.hs-header:has(+ .hs-mega.is-open), .hs-header.hs-menu-closing { background:var(--hs-bg); box-shadow:none; border-bottom-color:transparent; }
/* And the header holds its EXPANDED state for the menu's whole lifetime —
   overriding the compact scrolled metrics so nothing shifts while it's up. */
.hs-header:has(+ .hs-mega.is-open) .hs-header-inner,
.hs-header.hs-menu-closing .hs-header-inner { height:var(--hs-header-h); }
.hs-header:has(+ .hs-mega.is-open) .hs-brand-word,
.hs-header.hs-menu-closing .hs-brand-word { max-width:360px; max-height:90px; opacity:1; transform:none; }
.hs-header:has(+ .hs-mega.is-open) :is(.hs-pillar, .hs-buy-btn, .hs-burger) .hs-pillar-label,
.hs-header.hs-menu-closing :is(.hs-pillar, .hs-buy-btn, .hs-burger) .hs-pillar-label { max-height:33px; margin-top:3px; opacity:.5; transform:none; }
.hs-header.is-scrolled + .hs-mega.is-open,
.hs-header.hs-menu-closing + .hs-mega { top:var(--hs-header-h); }
.hs-header.is-scrolled .hs-brand-word { max-width:0; max-height:0; opacity:0; transform:translateX(-8px); }
.hs-header.is-scrolled .hs-brand-logo { width:42px; height:42px; }
.hs-pillars { display:flex; gap:8px; }
.hs-pillar { display:flex; flex-direction:column; align-items:center; background:none; border:0; padding:2px 14px; color:var(--hs-muted); transition:color .2s var(--hs-ease); }
/* Icons sized + glowed to match the griffin brand mark (42px, soft glow). */
/* White glyphs, no glow. */
.hs-pillar svg { width:42px; height:42px; color:var(--hs-text); }
/* Label metrics chosen so (bar 120 − icon 63 − gap 3 − label 33)/2 = (bar 84 − icon 63)/2:
   the icon's top offset is 10.5px in BOTH states — and constant mid-animation, since the
   label+gap collapse (36px) exactly matches the bar shrink (36px) on the same curve. */
.hs-pillar-label { font-size:1.32rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--hs-text); margin-top:3px; line-height:33px; max-height:33px; overflow:hidden; transition:max-height .35s var(--hs-ease), margin-top .35s var(--hs-ease), opacity .28s var(--hs-ease), transform .35s var(--hs-ease); }
.hs-header.is-scrolled :is(.hs-pillar, .hs-buy-btn, .hs-burger) .hs-pillar-label { max-height:0; margin-top:0; opacity:0; transform:translateY(-6px); }
.hs-pillar[data-accent="seo"] { --accent:var(--hs-seo); }
.hs-pillar[data-accent="ads"] { --accent:var(--hs-ads); }
.hs-pillar[data-accent="web"] { --accent:var(--hs-web); }
.hs-header-actions { display:flex; align-items:center; gap:12px; }
/* Desktop: double the header imagery (griffin + pillar icons) and grow the bar to fit. */
@media (min-width:861px) {
	/* Bar shrink (108→72 = 36px) exactly equals the label+gap collapse (33+3),
	   so the icons' vertical position is IDENTICAL in both states — no shift
	   mid-transition. Change one number and you must rebalance the other. */
	:root { --hs-header-h: 108px; --hs-header-hc: 72px; }
	.hs-header .hs-brand-logo { width:84px; height:84px; }
	/* Sticky: griffin drops to the pillar glyphs' 50px; the cart keeps its 63px
	   box (its glyph has canvas margins, so 63px IS the optical 50). */
	.hs-header.is-scrolled .hs-brand-logo { width:50px; height:50px; }
	/* Menu open (or closing): griffin holds full size with the expanded bar. */
	.hs-header:has(+ .hs-mega.is-open) .hs-brand-logo,
	.hs-header.hs-menu-closing .hs-brand-logo { width:84px; height:84px; }
	/* Wordmark matches the 84px griffin: 2 lines × 2.5rem × 1.05 ≈ 84px. */
	.hs-brand-word { font-size:2.5rem; }
	/* Pillar glyphs (edge-to-edge 20×20 viewBox) sized down to optically match
	   the cart (24×24 with built-in margins) and the 30px burger bars. */
	.hs-pillar svg { width:50px; height:50px; }
	/* (Cart svg and burger box intentionally keep their base 42px — the 63px
	   rules that used to sit here were dead, overridden by later base rules.) */
}
/* Buy button: same anatomy as a pillar — icon over label, no glow. */
.hs-buy-btn { display:flex; flex-direction:column; align-items:center; padding:2px 14px; border:0; background:none; color:var(--hs-text); transition:color .2s var(--hs-ease); }
.hs-buy-btn svg { width:42px; height:42px; }
/* Burger: same anatomy as a pillar — bars box over "Menu" label, moves with the bar. */
.hs-burger { display:flex; flex-direction:column; align-items:center; padding:2px 14px; background:none; border:0; }
.hs-burger-box { display:flex; flex-direction:column; justify-content:center; gap:7px; height:42px; }
.hs-burger-box span { width:30px; height:3px; background:var(--hs-text); border-radius:2px; transition:.3s var(--hs-ease); }
/* Burger morphs into an X while the mega menu is open. */
.hs-burger.is-active .hs-burger-box span:nth-child(1) { transform:translateY(10px) rotate(45deg); }
.hs-burger.is-active .hs-burger-box span:nth-child(2) { opacity:0; }
.hs-burger.is-active .hs-burger-box span:nth-child(3) { transform:translateY(-10px) rotate(-45deg); }

/* ── Mega menu: full-screen glass panel below the sticky header (z under its 60) ── */
.hs-mega { position:fixed; top:var(--hs-header-h); left:0; right:0; bottom:0; z-index:50;
	/* Plain site background — no glass, no color washes — so the menu reads clearly. */
	background:var(--hs-bg);
	padding:clamp(28px,5vh,56px) clamp(20px,5vw,64px); display:flex; flex-direction:column; gap:26px;
	opacity:0; visibility:hidden; transform:translateY(-16px);
	/* Closing holds the panel while the cards fly out (the .is-open rule zeroes
	   these delays so opening is immediate). */
	transition:opacity .3s var(--hs-ease) .42s, transform .35s var(--hs-ease) .42s, visibility .35s .42s, top .35s var(--hs-ease); overflow-y:auto; overflow-x:hidden; }
/* Mega menu's top edge follows the compact header. */
.hs-header.is-scrolled + .hs-mega { top:var(--hs-header-hc); }
/* Hovering the brand, the service nav, Buy, or the burger expands the compact header
   back to full. JS drives .is-peek (mouse devices only, min 500ms open so a graze
   can't flicker it). */
.hs-header.is-scrolled.is-peek .hs-header-inner { height:var(--hs-header-h); }
.hs-header.is-scrolled.is-peek .hs-brand-word { max-width:360px; max-height:90px; opacity:1; transform:none; }
.hs-header.is-scrolled.is-peek :is(.hs-pillar, .hs-buy-btn, .hs-burger) .hs-pillar-label { max-height:33px; margin-top:3px; opacity:.5; transform:none; }
.hs-header.is-scrolled.is-peek + .hs-mega { top:var(--hs-header-h); }
@media (min-width:861px) {
	.hs-header.is-scrolled.is-peek .hs-brand-logo { width:84px; height:84px; }
}
.hs-mega.is-open { opacity:1; visibility:visible; transform:translateY(0); transition:opacity .3s var(--hs-ease), transform .35s var(--hs-ease), visibility .35s, top .35s var(--hs-ease); }
/* JS snaps the menu shut under the loader after an in-menu navigation. */
.hs-mega.hs-no-anim, .hs-mega.hs-no-anim * { transition:none !important; }
/* ── Morphing menu: 4 closed tiles (icon + name) fill the panel; picking one
   grows its grid tracks to 1fr while the others collapse to 0fr, so the card
   itself morphs into the full category panel. X returns to the root tiles. ── */
.hs-mega-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:clamp(14px,2.5vw,26px); flex:1; min-height:0; max-width:var(--hs-max); margin:0 auto; width:100%; transition:grid-template-columns .55s var(--hs-ease), grid-template-rows .55s var(--hs-ease), gap .55s var(--hs-ease); }
.hs-mega-card { position:relative; overflow:hidden; min-width:0; min-height:0; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:var(--hs-radius); }

/* Closed face: the whole tile is one big button. */
.hs-mega-card-face { position:absolute; inset:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:none; border:0; color:var(--hs-text); cursor:pointer; transition:opacity .25s var(--hs-ease); }
.hs-mega-face-ic { width:clamp(56px,8vh,80px); height:clamp(56px,8vh,80px); color:var(--hs-text); transition:transform .3s var(--hs-ease); }
.hs-mega-face-ic svg { width:100%; height:100%; }
/* Same size as .hs-mega-opt labels so root and sub read as one system. */
.hs-mega-face-name { font-size:clamp(1.25rem,1.9vw,1.7rem); font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--hs-muted); transition:color .25s var(--hs-ease); }
.hs-mega-card-face:hover .hs-mega-face-ic { transform:scale(1.1); }
.hs-mega-card-face:hover .hs-mega-face-name { color:var(--hs-text); }
/* Root tiles get the same hover rim + tint as the sub option cards. */
.hs-mega-card:has(.hs-mega-card-face:hover) { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06); }

/* Open body: browser-window layout — title bar pinned top, options fill the rest. */
.hs-mega-card-body { position:absolute; inset:0; display:flex; flex-direction:column; padding:clamp(18px,2.5vw,30px) clamp(22px,3vw,44px) clamp(22px,3vw,40px); overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .3s var(--hs-ease), transform .3s var(--hs-ease), visibility .3s; }

/* Morph states — the picked card's row+column grow, the other tracks vanish. */
.hs-mega[data-open] .hs-mega-grid { gap:0; }
.hs-mega[data-open="services"] .hs-mega-grid { grid-template-columns:1fr 0fr; grid-template-rows:1fr 0fr; }
.hs-mega[data-open="company"]  .hs-mega-grid { grid-template-columns:0fr 1fr; grid-template-rows:1fr 0fr; }
.hs-mega[data-open="tools"]    .hs-mega-grid { grid-template-columns:1fr 0fr; grid-template-rows:0fr 1fr; }
.hs-mega[data-open="clients"]  .hs-mega-grid { grid-template-columns:0fr 1fr; grid-template-rows:0fr 1fr; }
.hs-mega.is-open[data-open] .hs-mega-card:not(.is-open) { opacity:0; border-color:transparent; pointer-events:none; transform:scale(.9); }
.hs-mega-card.is-open .hs-mega-card-face { opacity:0; pointer-events:none; }
.hs-mega-card.is-open .hs-mega-card-body { opacity:1; visibility:visible; transform:none; transition-delay:.3s; }

/* X: lives inside the expanded card (the open card fills the grid, gap 0, so the
   grid's corner IS the card's corner); spins in, takes you back to the root tiles. */
.hs-mega-back { position:absolute; top:clamp(16px,2.5vh,26px); right:clamp(16px,2vw,26px); z-index:5; width:64px; height:64px; display:grid; place-items:center; border:0; background:none; color:var(--hs-text); opacity:0; visibility:hidden; transform:rotate(-90deg) scale(.7); transition:opacity .3s var(--hs-ease), transform .35s var(--hs-ease), visibility .3s; }
.hs-mega-back svg { width:44px; height:44px; }
.hs-mega[data-open] .hs-mega-back { opacity:1; visibility:visible; transform:none; transition-delay:.25s; }
.hs-mega-back:hover { transform:rotate(90deg); transition-delay:0s; }
/* Panel title bar: icon + name left, clears the X on the right. */
.hs-mega-h { display:flex; align-items:center; gap:16px; font-size:.98rem; letter-spacing:.2em; text-transform:uppercase; color:var(--hs-dim); margin-bottom:clamp(18px,3vh,28px); padding:8px 84px 8px 0; }
.hs-mega-h svg { width:1.6em; height:1.6em; flex:0 0 auto; }
@media (min-width:861px) {
	/* Title matches the 44px X glyph. */
	.hs-mega-h { font-size:2.4rem; }
}
/* Option cards: 3 per row, leftovers centered in the bottom row, and EVERY card
   is half the panel height — so 1-row and 2-row panels share one card scale and
   Services' two rows split the space evenly. */
.hs-mega-opts { --opt-gap:clamp(14px,2vw,24px); display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:var(--opt-gap); flex:1; min-height:0; }
/* Text muted like the root tile names (icons stay white); hover wakes it. */
.hs-mega-opt { flex:0 0 calc((100% - 2*var(--opt-gap)) / 3); height:calc((100% - var(--opt-gap)) / 2); min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:var(--hs-radius); color:var(--hs-muted); font-size:clamp(1.25rem,1.9vw,1.7rem); font-weight:700; text-align:center; transition:color .25s var(--hs-ease), border-color .2s var(--hs-ease), background .2s var(--hs-ease), transform .2s var(--hs-ease); }
.hs-mega-opt svg { width:clamp(56px,8vh,80px); height:clamp(56px,8vh,80px); flex:0 0 auto; color:var(--hs-text); }
.hs-mega-opt:hover { color:var(--hs-text); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06); transform:translateY(-3px); }
/* Staged entrance: cards fly in from the right.
   (Griffin flypast removed for now — saved in saved-snippets/griffin-flypast.md.) */
.hs-mega .hs-mega-card { opacity:0; transform:translateX(48px); transition:opacity .45s var(--hs-ease), transform .45s var(--hs-ease), border-color .25s var(--hs-ease), background .2s var(--hs-ease); }
/* Closing (burger X): cards fly back out to the right — bottom card leads, top
   card trails — a brisk reverse of the entrance, before the panel fades. */
.hs-mega:not(.is-open) .hs-mega-card { transition-duration:.3s; }
.hs-mega:not(.is-open) .hs-mega-card:nth-child(2) { transition-delay:.15s; }
.hs-mega:not(.is-open) .hs-mega-card:nth-child(3) { transition-delay:.10s; }
.hs-mega:not(.is-open) .hs-mega-card:nth-child(4) { transition-delay:.05s; }
.hs-mega.is-open .hs-mega-card { opacity:1; transform:none; }
/* Delays are per-property (opacity, transform, border-color, background):
   only the entrance fade/slide staggers — hover border/tint stay instant. */
.hs-mega.is-open .hs-mega-card:nth-child(2) { transition-delay:.16s,.16s,0s,0s; }
.hs-mega.is-open .hs-mega-card:nth-child(3) { transition-delay:.24s,.24s,0s,0s; }
.hs-mega.is-open .hs-mega-card:nth-child(4) { transition-delay:.32s,.32s,0s,0s; }
.hs-mega.is-open .hs-mega-card:nth-child(5) { transition-delay:.40s,.40s,0s,0s; }

/* Return from a panel: tiles cascade back radially from the quadrant the X was
   hit in — the closing card leads, its grid-neighbors follow, diagonal lands last,
   all while the tracks unfold from that corner. */
.hs-mega.is-open[data-from] .hs-mega-card { transition-delay:0s; }
.hs-mega.is-open[data-from="services"] .hs-mega-card[data-panel="company"],
.hs-mega.is-open[data-from="services"] .hs-mega-card[data-panel="tools"]    { transition-delay:.14s,.14s,0s,0s; }
.hs-mega.is-open[data-from="services"] .hs-mega-card[data-panel="clients"]  { transition-delay:.3s,.3s,0s,0s; }
.hs-mega.is-open[data-from="company"]  .hs-mega-card[data-panel="services"],
.hs-mega.is-open[data-from="company"]  .hs-mega-card[data-panel="clients"]  { transition-delay:.14s,.14s,0s,0s; }
.hs-mega.is-open[data-from="company"]  .hs-mega-card[data-panel="tools"]    { transition-delay:.3s,.3s,0s,0s; }
.hs-mega.is-open[data-from="tools"]    .hs-mega-card[data-panel="services"],
.hs-mega.is-open[data-from="tools"]    .hs-mega-card[data-panel="clients"]  { transition-delay:.14s,.14s,0s,0s; }
.hs-mega.is-open[data-from="tools"]    .hs-mega-card[data-panel="company"]  { transition-delay:.3s,.3s,0s,0s; }
.hs-mega.is-open[data-from="clients"]  .hs-mega-card[data-panel="company"],
.hs-mega.is-open[data-from="clients"]  .hs-mega-card[data-panel="tools"]    { transition-delay:.14s,.14s,0s,0s; }
.hs-mega.is-open[data-from="clients"]  .hs-mega-card[data-panel="services"] { transition-delay:.3s,.3s,0s,0s; }
@media (prefers-reduced-motion:reduce) {
	.hs-mega .hs-mega-card, .hs-mega-grid, .hs-mega-card-face, .hs-mega-card-body, .hs-mega-back { transition:none; }
}

/* ── App / views ── */
.hs-app { max-width:var(--hs-max); margin:0 auto; padding:calc(var(--hs-header-h) + clamp(28px,5vw,56px)) 24px 80px; }
.hs-view { display:none; animation:hs-fade .4s var(--hs-ease); }
.hs-view.is-active { display:block; }
@keyframes hs-fade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ── Buttons ── */
.hs-cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px; border:0; border-radius:var(--hs-radius-sm); background:var(--accent); color:#fff; font-weight:800; font-size:.95rem; letter-spacing:.02em; box-shadow:0 8px 30px -10px var(--accent); transition:all .2s var(--hs-ease); }
.hs-cta:hover { filter:brightness(1.1); transform:translateY(-1px); }
.hs-cta--full { display:flex; width:100%; margin-top:8px; }
.hs-cta--sm { padding:9px 16px; font-size:.82rem; }
.hs-outline-btn { padding:12px 20px; background:var(--hs-soft); border:1px solid var(--hs-line); border-radius:var(--hs-radius-sm); color:var(--hs-text); font-weight:700; font-size:.86rem; transition:all .2s var(--hs-ease); }
.hs-outline-btn:hover { border-color:var(--accent); color:var(--accent); }
.hs-ghost-btn { padding:10px 18px; background:none; border:1px solid var(--hs-line); border-radius:999px; color:var(--hs-text); font-weight:700; font-size:.82rem; transition:all .2s var(--hs-ease); }
.hs-ghost-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── Home hero + cards ── */
/* Full-screen full-bleed hero band (matches .hs-svc-hero); content stays in the container. */
.hs-hero {
	text-align:center;
	/* Reach the true top of the page so the backdrop runs behind the transparent header. */
	margin:calc((var(--hs-header-h) + clamp(28px,5vw,56px)) * -1) calc(50% - 50vw) 0;
	padding:calc(var(--hs-header-h) + clamp(24px,4vw,48px)) 24px clamp(24px,4vw,48px);
	display:flex;
	min-height:100vh;
	min-height:100svh;
}
.hs-hero-inner { width:100%; max-width:var(--hs-max); margin:0 auto; display:flex; flex-direction:column; position:relative; z-index:1; }

/* ── Hero entrance: staged reveal once the loader lifts (body drops .hs-preload).
     Opacity/transform/filter only — nothing reflows. Replays on route flashes. ── */
body:not(.hs-preload) .hs-hero .hs-eyebrow { animation:hs-hero-eyebrow .8s var(--hs-ease) .1s both; }
body:not(.hs-preload) .hs-hero .hs-hero-title { animation:hs-hero-title .9s var(--hs-ease) .25s both; }
body:not(.hs-preload) .hs-hero .hs-card { animation:hs-card-in .65s var(--hs-ease) both; }
body:not(.hs-preload) .hs-hero .hs-card:nth-child(1) { animation-delay:.55s; }
body:not(.hs-preload) .hs-hero .hs-card:nth-child(2) { animation-delay:.7s; }
body:not(.hs-preload) .hs-hero .hs-card:nth-child(3) { animation-delay:.85s; }
@keyframes hs-hero-eyebrow { from { opacity:0; transform:translateY(12px); letter-spacing:.55em; } }
@keyframes hs-hero-title { from { opacity:0; transform:translateY(26px); filter:blur(12px); } }
@keyframes hs-card-in { from { opacity:0; transform:translateY(30px) scale(.96); } }

/* Light sweep across the headline right after it lands. */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
	body:not(.hs-preload) .hs-hero .hs-hero-title {
		background:linear-gradient(105deg,#fff 42%,#bcc9ff 50%,#fff 58%);
		background-size:230% 100%;
		-webkit-background-clip:text; background-clip:text;
		color:transparent; -webkit-text-fill-color:transparent;
		animation:hs-hero-title .9s var(--hs-ease) .25s both, hs-hero-sheen 1.5s ease 1.15s 1 both;
	}
}
@keyframes hs-hero-sheen { from { background-position:115% 0; } to { background-position:-15% 0; } }

/* Ambient float: icons drift gently, out of phase. */
.hs-hero .hs-card-ic { animation:hs-float 5.5s ease-in-out 1.6s infinite alternate; }
.hs-hero .hs-card:nth-child(2) .hs-card-ic { animation-delay:2.5s; }
.hs-hero .hs-card:nth-child(3) .hs-card-ic { animation-delay:3.4s; }
@keyframes hs-float { from { transform:translateY(0); } to { transform:translateY(-7px); } }

@media (prefers-reduced-motion:reduce) {
	body:not(.hs-preload) .hs-hero .hs-eyebrow,
	body:not(.hs-preload) .hs-hero .hs-hero-title,
	body:not(.hs-preload) .hs-hero .hs-card,
	.hs-hero .hs-card-ic { animation:none; }
}
/* Auto margins center the eyebrow+headline block in the space above the cards. */
.hs-hero-head { margin:auto 0; }
.hs-eyebrow { font-size:1.08rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--hs-muted); margin-bottom:14px; }
.hs-hero-title { font-size:clamp(2.76rem,8vw,5.75rem); font-weight:800; line-height:1.02; letter-spacing:-.02em; }
.hs-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:clamp(28px,4vw,44px); margin-bottom:clamp(32px,7vh,80px); }
/* Simple card: icon + button label, centered. Accent border + glow always on; hover lifts. */
.hs-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:34px 26px; background:linear-gradient(180deg,var(--hs-panel),var(--hs-bg-2)); border:1.5px solid var(--accent); border-radius:var(--hs-radius-lg); color:var(--hs-text); box-shadow:0 0 0 1px var(--accent),0 20px 50px -18px color-mix(in srgb, var(--accent) 75%, transparent); transition:all .28s var(--hs-ease); }
.hs-card[data-accent="seo"] { --accent:var(--hs-seo); }
.hs-card[data-accent="ads"] { --accent:var(--hs-ads); }
.hs-card[data-accent="web"] { --accent:var(--hs-web); }
.hs-card-ic { color:var(--hs-text); }
.hs-card-ic svg { width:112px; height:112px; filter:drop-shadow(0 0 12px var(--accent)); }
.hs-card-btn { display:inline-flex; align-items:center; justify-content:center; min-width:min(100%,270px); padding:15px 36px; border:1.5px solid var(--accent); border-radius:var(--hs-radius-sm); background:color-mix(in srgb, var(--accent) 18%, transparent); color:#fff; font-weight:800; font-size:1.5rem; letter-spacing:.02em; box-shadow:0 0 0 1px var(--accent); transition:all .2s var(--hs-ease); }
.hs-card:hover .hs-card-btn { background:color-mix(in srgb, var(--accent) 32%, transparent); }
/* ── Service pages ── */
.hs-svc-head { display:flex; align-items:center; gap:20px; margin-bottom:32px; }
.hs-svc-ic { display:grid; place-items:center; width:72px; height:72px; flex:0 0 72px; border-radius:20px; background:var(--hs-soft); border:1px solid var(--hs-line); color:var(--accent); }
.hs-svc-ic svg { width:38px; height:38px; filter:drop-shadow(0 0 10px var(--accent)); }
.hs-svc-title { font-size:clamp(2rem,5vw,3rem); font-weight:800; line-height:1; }
.hs-svc-tag { color:var(--hs-muted); margin-top:8px; max-width:640px; }

/* ── Full-screen service hero: full-bleed background band, contained 9/3 grid inside ── */
.hs-svc-hero {
	/* Reach the true top of the page so the bloom runs behind the transparent header. */
	margin:calc((var(--hs-header-h) + clamp(28px,5vw,56px)) * -1) calc(50% - 50vw) 40px;
	padding:var(--hs-header-h) 24px 0;
	display:flex; align-items:center;
	min-height:100vh;
	min-height:100svh;
	position:relative; isolation:isolate;
}
/* Accent bloom lives on a pseudo so the entrance can animate it. */
.hs-svc-hero::before {
	content:''; position:absolute; inset:0; z-index:-1;
	background:radial-gradient(circle at 72% 46%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
}
.hs-svc-hero-inner {
	width:100%; max-width:var(--hs-max); margin:0 auto;
	display:grid; grid-template-columns:minmax(0,9fr) minmax(0,3fr); align-items:center;
	gap:clamp(24px,4vw,56px);
}
.hs-svc-hero .hs-eyebrow { color:var(--accent); }
.hs-svc-hero .hs-svc-title { font-size:clamp(2.8rem,7vw,5rem); line-height:1.04; letter-spacing:-.02em; }
.hs-svc-hero-sub { margin-top:20px; max-width:640px; font-size:clamp(1.05rem,2vw,1.3rem); color:var(--hs-muted); }
/* White icon, accent-colored glow (matches the home card icons). */
.hs-svc-hero-ic { display:grid; place-items:center; color:var(--hs-text); animation:hs-float 6s ease-in-out 1.6s infinite alternate; }
.hs-svc-hero-ic svg { width:clamp(170px,21vw,270px); height:clamp(170px,21vw,270px); filter:drop-shadow(0 0 36px color-mix(in srgb, var(--accent) 60%, transparent)); }

/* ── Service hero entrance: bloom breathes in, copy slides from the left,
     icon springs in with overshoot. Replays per visit (loader flash re-arms it). ── */
body:not(.hs-preload) .hs-svc-hero::before { animation:hs-svc-bloom 1.3s var(--hs-ease) both; }
body:not(.hs-preload) .hs-svc-hero .hs-eyebrow { animation:hs-hero-eyebrow .8s var(--hs-ease) .1s both; }
body:not(.hs-preload) .hs-svc-hero .hs-svc-title { animation:hs-svc-title .9s var(--hs-ease) .22s both; }
body:not(.hs-preload) .hs-svc-hero .hs-svc-hero-sub { animation:hs-fade-up .7s var(--hs-ease) .48s both; }
body:not(.hs-preload) .hs-svc-hero .hs-svc-hero-ic svg { animation:hs-svc-ic .95s cubic-bezier(.34,1.56,.64,1) .35s both; }
@keyframes hs-svc-bloom { from { opacity:0; transform:scale(1.12); } }
@keyframes hs-svc-title { from { opacity:0; transform:translateX(-30px); filter:blur(10px); } }
@keyframes hs-fade-up { from { opacity:0; transform:translateY(18px); } }
@keyframes hs-svc-ic { from { opacity:0; transform:scale(.7) rotate(-6deg); } }

@media (prefers-reduced-motion:reduce) {
	.hs-svc-hero-ic,
	body:not(.hs-preload) .hs-svc-hero::before,
	body:not(.hs-preload) .hs-svc-hero .hs-eyebrow,
	body:not(.hs-preload) .hs-svc-hero .hs-svc-title,
	body:not(.hs-preload) .hs-svc-hero .hs-svc-hero-sub,
	body:not(.hs-preload) .hs-svc-hero .hs-svc-hero-ic svg { animation:none; }
}
@media (max-width:860px) {
	.hs-svc-hero-inner { grid-template-columns:1fr; text-align:center; }
	.hs-svc-hero-ic { order:-1; }
	.hs-svc-hero-ic svg { width:130px; height:130px; }
	.hs-svc-hero-sub { margin-left:auto; margin-right:auto; }
}
.hs-frame { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:36px; }
.hs-frame-block { padding:24px; background:linear-gradient(180deg,var(--hs-panel),var(--hs-bg-2)); border:1px solid var(--hs-line); border-radius:var(--hs-radius); }
.hs-frame-block h3 { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:12px; }
.hs-frame-block p { color:var(--hs-muted); font-size:.92rem; }
.hs-h2 { font-size:1.5rem; font-weight:800; margin:36px 0 16px; }
.hs-prose { max-width:660px; }
.hs-prose p { color:var(--hs-muted); font-size:1.05rem; margin-bottom:22px; }

/* includes grid */
.hs-includes { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.hs-include { padding:18px; background:var(--hs-soft); border:1px solid var(--hs-line); border-radius:var(--hs-radius-sm); }
.hs-include b { display:block; font-size:.98rem; }
.hs-include span { color:var(--hs-muted); font-size:.82rem; }

/* tiers */
.hs-tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.hs-tier { display:flex; flex-direction:column; gap:8px; padding:22px; background:linear-gradient(180deg,var(--hs-panel),var(--hs-bg-2)); border:1px solid var(--hs-line); border-radius:var(--hs-radius); }
.hs-tier--feature { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 16px 40px -18px var(--accent); }
.hs-tier-name { font-weight:800; font-size:1.1rem; }
.hs-tier-price { color:var(--accent); font-weight:800; font-size:1.3rem; }
.hs-tier-price small { font-size:.7rem; color:var(--hs-muted); }
.hs-tier-detail { color:var(--hs-muted); font-size:.85rem; flex:1; }

/* buybar */
.hs-buybar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 28px; background:linear-gradient(180deg,var(--hs-panel),var(--hs-bg-2)); border:1px solid var(--accent); border-radius:var(--hs-radius); box-shadow:0 0 0 1px var(--accent),0 16px 40px -20px var(--accent); flex-wrap:wrap; }
.hs-buybar-label { display:block; font-weight:700; }
.hs-buybar-price { font-size:1.8rem; font-weight:900; color:var(--accent); }
.hs-buybar-price small { font-size:.9rem; color:var(--hs-muted); }

/* ── Tools (ROI + assessment) ── */
.hs-tool { padding:clamp(22px,3vw,34px); margin:36px 0; background:linear-gradient(180deg,var(--hs-panel-2),var(--hs-bg-2)); border:1px solid var(--hs-line); border-radius:var(--hs-radius-lg); }
.hs-tool-title { font-size:1.6rem; font-weight:800; }
.hs-tool-sub { color:var(--hs-muted); margin:6px 0 20px; }
.hs-roi-label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hs-muted); margin-bottom:10px; }
.hs-chips { display:flex; flex-wrap:wrap; gap:8px; }
.hs-chip { width:46px; height:46px; border-radius:12px; background:var(--hs-soft); border:1px solid var(--hs-line); color:var(--hs-text); font-weight:800; transition:all .18s var(--hs-ease); }
.hs-chip:hover { border-color:var(--accent); }
.hs-chip.is-selected { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 16px -4px var(--accent); }
.hs-roi-note { margin-top:12px; color:var(--hs-muted); font-size:.9rem; }
.hs-roi-note span { color:var(--hs-text); font-weight:700; }
.hs-roi-toggles { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:22px 0; }
.hs-seg { display:inline-flex; background:var(--hs-soft); border:1px solid var(--hs-line); border-radius:999px; padding:4px; }
.hs-seg button { padding:8px 16px; border:0; background:none; color:var(--hs-muted); font-weight:700; font-size:.82rem; border-radius:999px; transition:all .18s var(--hs-ease); }
.hs-seg button.is-selected { background:var(--accent); color:#fff; }
.hs-check { display:inline-flex; align-items:center; gap:8px; color:var(--hs-muted); font-weight:600; font-size:.9rem; }
.hs-check input, .hs-addon input { width:18px; height:18px; accent-color:var(--accent); }
.hs-roi-addons { display:grid; gap:8px; margin-bottom:22px; }
.hs-addon { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--hs-soft); border:1px solid var(--hs-line); border-radius:var(--hs-radius-sm); }
.hs-addon span { flex:1; }
.hs-addon b { color:var(--accent); }
.hs-roi-total { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid var(--accent); border-radius:var(--hs-radius); margin-bottom:14px; }
.hs-roi-total strong { font-size:1.7rem; font-weight:900; color:var(--accent); }
.hs-roi-total small { font-size:.8rem; color:var(--hs-muted); }
.hs-roi-simhead { margin-top:26px; font-size:1.2rem; font-weight:800; }
.hs-sim-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0; }
.hs-sim-field { display:flex; flex-direction:column; gap:6px; }
.hs-sim-field span { font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hs-muted); }
.hs-sim-field input { padding:11px 13px; background:var(--hs-soft); border:1px solid var(--hs-line); border-radius:var(--hs-radius-sm); color:var(--hs-text); font-family:inherit; font-size:1rem; font-weight:700; outline:none; }
.hs-sim-field input:focus { border-color:var(--accent); }
.hs-sim-out { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:20px; }
.hs-sim-stat { padding:16px; background:var(--hs-soft); border:1px solid var(--hs-line); border-radius:var(--hs-radius-sm); text-align:center; }
.hs-sim-stat b { display:block; font-size:1.5rem; font-weight:900; }
.hs-sim-stat span { font-size:.68rem; color:var(--hs-muted); text-transform:uppercase; letter-spacing:.06em; }
.hs-sim-stat--hi { background:color-mix(in srgb,var(--accent) 12%,transparent); border-color:var(--accent); }
.hs-sim-stat--hi b { color:var(--accent); }

/* assessment */
.hs-assess-qs { display:grid; gap:10px; margin-bottom:20px; }
.hs-assess-q { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; background:var(--hs-soft); border:1px solid var(--hs-line); border-radius:var(--hs-radius-sm); }
.hs-assess-q span { font-size:.95rem; }
.hs-assess-yn { display:flex; gap:6px; flex:0 0 auto; }
.hs-assess-yn button { width:44px; padding:6px 0; border:1px solid var(--hs-line); background:none; color:var(--hs-muted); border-radius:8px; font-weight:700; font-size:.78rem; }
.hs-assess-yn button.is-on { background:var(--accent); border-color:var(--accent); color:#fff; }
.hs-assess-result { margin-top:20px; padding:24px; background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid var(--accent); border-radius:var(--hs-radius); }
.hs-assess-result b { font-size:2rem; color:var(--accent); }

/* ── Cart drawer ── */
/* ── Cart drawer: black glass ── */
.hs-drawer-backdrop { position:fixed; inset:0; z-index:90; background:rgba(3,3,6,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hs-drawer { position:fixed; top:0; right:0; bottom:0; z-index:95; width:min(400px,92vw);
	background:linear-gradient(180deg,rgba(14,14,20,.88),rgba(8,8,12,.94));
	backdrop-filter:blur(28px) saturate(140%); -webkit-backdrop-filter:blur(28px) saturate(140%);
	border-left:1px solid rgba(255,255,255,.08);
	box-shadow:-40px 0 80px -30px rgba(0,0,0,.85), inset 1px 0 0 rgba(255,255,255,.04);
	display:flex; flex-direction:column; transform:translateX(103%); transition:transform .45s cubic-bezier(.22,1,.36,1); }
.hs-drawer.is-open { transform:translateX(0); }
.hs-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:26px 28px; border-bottom:1px solid rgba(255,255,255,.06); }
.hs-drawer-head h3 { font-size:.82rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--hs-muted); }
.hs-drawer-close { display:grid; place-items:center; width:38px; height:38px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:999px; color:var(--hs-muted); font-size:1.4rem; line-height:1; transition:all .2s var(--hs-ease); }
.hs-drawer-close:hover { color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); }
.hs-drawer-body { flex:1; overflow-y:auto; padding:20px 28px; display:grid; gap:10px; align-content:start; }
.hs-line { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.hs-line-name { font-weight:600; font-size:.9rem; }
.hs-line-price { color:var(--hs-web); font-weight:800; white-space:nowrap; }
.hs-line-x { background:none; border:0; color:var(--hs-dim); font-size:.72rem; margin-top:3px; }
.hs-line-x:hover { color:#ff5a7a; }
.hs-empty { color:var(--hs-dim); font-style:italic; font-size:.9rem; }
.hs-drawer-foot { padding:24px 28px 28px; border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,transparent,rgba(255,255,255,.025)); }
.hs-drawer-total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; font-size:1.05rem; color:var(--hs-muted); }
/* Glass button: frosted white-on-black, lit from the top edge. */
.hs-glass-btn { display:flex; width:100%; align-items:center; justify-content:center; gap:8px; padding:16px 24px;
	background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
	border:1px solid rgba(255,255,255,.18); border-radius:var(--hs-radius-sm);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px -12px rgba(0,0,0,.85);
	color:#fff; font-weight:800; font-size:1rem; letter-spacing:.04em;
	backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
	transition:all .22s var(--hs-ease); }
.hs-glass-btn:hover { background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08)); border-color:rgba(255,255,255,.3); transform:translateY(-1px); }
.hs-drawer-total strong { color:var(--hs-web); font-size:1.3rem; font-weight:900; }
.hs-drawer-reset { display:block; width:100%; margin-top:10px; background:none; border:0; color:var(--hs-dim); font-size:.76rem; }
.hs-drawer-reset:hover { color:#ff5a7a; }

/* ── Checkout ── */
.hs-checkout { display:grid; grid-template-columns:1fr 1.3fr; gap:22px; align-items:start; }
.hs-checkout-cart { padding:22px; background:var(--hs-soft); border:1px solid var(--hs-line); border-radius:var(--hs-radius); }
.hs-checkout-cart h3 { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--hs-muted); margin-bottom:14px; }
.hs-checkout-lines .hs-line { border-color:var(--hs-line-2); }
.hs-checkout-total { display:flex; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--hs-line); font-weight:700; }
.hs-checkout-total strong { color:var(--hs-web); font-size:1.2rem; }
.hs-checkout-form { padding:26px; background:linear-gradient(180deg,var(--hs-panel),var(--hs-bg-2)); border:1px solid var(--hs-line); border-radius:var(--hs-radius-lg); display:grid; gap:16px; }
.hs-field { display:grid; gap:6px; }
.hs-field label { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hs-muted); }
.hs-field input, .hs-field textarea { padding:12px 14px; background:var(--hs-soft); border:1px solid var(--hs-line); border-radius:var(--hs-radius-sm); color:var(--hs-text); font-family:inherit; font-size:1rem; outline:none; transition:border-color .18s var(--hs-ease); }
.hs-field input:focus, .hs-field textarea:focus { border-color:var(--hs-web); }
.hs-field-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hs-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.hs-slot { padding:10px 8px; background:var(--hs-soft); border:1px solid var(--hs-line); border-radius:10px; color:var(--hs-text); font-weight:700; font-size:.8rem; }
.hs-slot.is-selected { background:var(--hs-web); border-color:var(--hs-web); color:#fff; }
.hs-form-msg { font-size:.9rem; text-align:center; min-height:1.2em; }
.hs-form-msg.is-ok { color:var(--hs-ads); }
.hs-form-msg.is-err { color:#ff5a7a; }
.hs-checkout-done { padding:40px 24px; text-align:center; }
.hs-checkout-done h2 { color:var(--hs-ads); margin-bottom:10px; }

/* ── Footer ── */
.hs-footer { border-top:1px solid var(--hs-line); background:rgba(6,6,10,.6); padding:32px 24px; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; text-align:center; }
.hs-footer-logo { width:34px; height:34px; color:var(--hs-text); opacity:.5; transform:scaleX(-1); }
.hs-footer-text { color:var(--hs-muted); font-size:.85rem; }
.hs-footer-text strong { color:var(--hs-text); }
.hs-footer-copy { color:var(--hs-dim); font-size:.75rem; }

/* ── Responsive ── */
@media (max-width:860px) {
	/* Mobile header lives at the compact size full-time: no shrink on scroll,
	   no peek-expand on hover — the "scrolled" height IS the height. */
	:root { --hs-header-h:var(--hs-header-hc); }
	.hs-pillars { display:none; }
	/* Wordmark matches the 42px griffin: 2 lines × 1.25rem × 1.05 ≈ 42px. */
	.hs-brand-word { font-size:1.25rem; }
	/* Icon-only Buy + Menu, hugging the right edge (shed the desktop padding).
	   With the pillars hidden, the 3-col grid auto-places the actions in the
	   CENTER column — collapse to 2 cols so they land in the right one.
	   Left gutter 24px = the app's content padding, so the brand lines up
	   with the page text below it. */
	.hs-header-inner { padding:0 16px 0 24px; grid-template-columns:1fr auto; }
	/* Sticky: keep the wordmark up on mobile (desktop collapses it). */
	.hs-header.is-scrolled .hs-brand-word { max-width:360px; max-height:90px; opacity:1; transform:none; }
	.hs-header-actions { justify-self:end; gap:4px; }
	.hs-buy-btn .hs-pillar-label, .hs-burger .hs-pillar-label { display:none; }
	.hs-buy-btn, .hs-burger { padding:2px 8px; }
	.hs-burger { padding-right:2px; }
	/* Phone: the menu is an accordion. Tiles are compact rows (icon left of name);
	   tapping one expands it in place with a plain list underneath; the other
	   tiles stay visible. Tapping the open row (or the small X) collapses it. */
	.hs-mega-grid { display:block; }
	.hs-mega-card { margin-bottom:14px; transition:opacity .45s var(--hs-ease), transform .45s var(--hs-ease), border-color .3s var(--hs-ease); }
	.hs-mega-card.is-open { border-color:rgba(255,255,255,.2); }
	.hs-mega-card-face { position:static; flex-direction:row; justify-content:flex-start; gap:16px; padding:16px 20px; }
	.hs-mega-face-ic { width:38px; height:38px; }
	.hs-mega-face-name { font-size:1.1rem; letter-spacing:.18em; }
	/* Inline ×: lives in the open row itself, right-aligned with the title, spins in.
	   The whole row is the close button, so it can never go missing. */
	.hs-mega-card-face::after { content:'\00D7'; margin-left:auto; font-size:2.4rem; font-weight:400; line-height:1; color:var(--hs-text); opacity:0; transform:rotate(-90deg) scale(.5); transition:opacity .3s var(--hs-ease), transform .35s var(--hs-ease); }
	.hs-mega-card.is-open .hs-mega-card-face::after { opacity:1; transform:none; }
	.hs-mega-back { display:none; } /* shared corner X retired on mobile */
	/* Accordion body: animated height + slide, no display snapping. */
	.hs-mega-card-body { position:static; display:block; max-height:0; overflow:hidden; opacity:0; visibility:visible; transform:translateY(-10px); max-width:none; padding:0 20px; transition:max-height .45s var(--hs-ease), opacity .3s var(--hs-ease), transform .4s var(--hs-ease), padding .4s var(--hs-ease); }
	.hs-mega-card-body .hs-mega-h { display:none; } /* face row already shows icon + name */
	.hs-mega-card.is-open .hs-mega-card-body { max-height:440px; opacity:1; transform:none; padding:0 20px 14px; transition-delay:0s; }
	.hs-mega-card.is-open .hs-mega-card-face { opacity:1; pointer-events:auto; }
	.hs-mega.is-open[data-open] .hs-mega-card:not(.is-open) { opacity:1; transform:none; pointer-events:auto; border-color:rgba(255,255,255,.08); }
	/* Options fall back to a plain list, items cascading in as the card opens. */
	.hs-mega-opts { display:block; }
	.hs-mega-opt { flex-direction:row; justify-content:flex-start; gap:14px; height:auto; min-height:0; padding:14px 0; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.06); border-radius:0; text-align:left; font-size:1.15rem; opacity:0; transform:translateX(16px); transition:opacity .3s var(--hs-ease), transform .3s var(--hs-ease); }
	.hs-mega-opt svg { width:33px; height:33px; }
	.hs-mega-opt:last-child { border-bottom:0; }
	.hs-mega-opt:hover { transform:none; background:none; }
	.hs-mega-card.is-open .hs-mega-opt { opacity:1; transform:none; }
	.hs-mega-card.is-open .hs-mega-opt:nth-child(1) { transition-delay:.12s; }
	.hs-mega-card.is-open .hs-mega-opt:nth-child(2) { transition-delay:.2s; }
	.hs-mega-card.is-open .hs-mega-opt:nth-child(3) { transition-delay:.28s; }
	.hs-mega-card.is-open .hs-mega-opt:nth-child(4) { transition-delay:.36s; }
	.hs-mega-card.is-open .hs-mega-opt:nth-child(5) { transition-delay:.44s; }
	.hs-checkout { grid-template-columns:1fr; }
	.hs-field-pair { grid-template-columns:1fr; }
	/* Home service cards: on mobile each card IS the button — one pill, icon +
	   text sitting together dead-center, single accent border, no ring or glow.
	   Column is sized by the widest pill; the rest stretch to match it. */
	.hs-cards { grid-template-columns:minmax(0,max-content); justify-content:center; }
	.hs-card { flex-direction:row; justify-content:center; gap:16px; padding:16px 32px; background:color-mix(in srgb, var(--accent) 18%, transparent); border:1.5px solid var(--accent); border-radius:var(--hs-radius-sm); box-shadow:0 0 18px -2px color-mix(in srgb, var(--accent) 65%, transparent); }
	.hs-card:hover { transform:none; }
	.hs-card-ic { display:flex; align-items:center; transform:translateY(-1px); }
	.hs-hero .hs-card-ic { animation:none; } /* desktop float reads as drift in the tight pills */
	.hs-card-ic svg { width:34px; height:34px; filter:none; }
	.hs-card-btn { flex:0 0 auto; min-width:0; padding:0; border:0; background:none; box-shadow:none; font-size:1.6rem; line-height:1; opacity:1; }
	.hs-card:hover .hs-card-btn { background:none; }
}
@media (prefers-reduced-motion:reduce) {
	*, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}