/* ==========================================================================
   HQDM — case studies (local SEO, web design, PPC, e-commerce):
   hero card with meta row + stats bento (Overtake / Clout), sticky-label rows
   (Veltirx), before/after sliders, speed comparisons, video pair, showcase
   ========================================================================== */
.hq-case-hero { padding-top: clamp(8rem, 14vw, 10.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; isolation: isolate; }
.hq-case-hero::before { content: ""; position: absolute; inset: 0 -10% auto; height: 70%; background: radial-gradient(40% 60% at 50% 0%, rgba(151, 71, 255, .45), transparent 70%); z-index: -1; pointer-events: none; }
.hq-case-hero > * + * { margin-top: 1.5rem; }
.hq-case-title { font-size: var(--wp--preset--font-size--display); line-height: .95; letter-spacing: -.045em; max-width: 16ch; margin-inline: auto !important; }
.hq-case-logo { display: flex; justify-content: center; }
.hq-case-logo img { height: 48px; width: auto; border-radius: 0; }
.hq-case-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hq-case-meta__item { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(221, 218, 231, .05); box-shadow: inset 0 0 0 1px var(--hq-line); }
.hq-case-meta__item > * { margin: 0 !important; }
.hq-case-meta__icon img { width: 18px; height: 18px; border-radius: 0; filter: brightness(0) invert(1); opacity: .8; }
.hq-case-meta__label { color: var(--hq-muted); font-size: .875rem; }
.hq-case-meta__value { color: var(--hq-white); font-weight: 600; font-size: .9375rem; }
.hq-case-hero .wp-block-buttons { justify-content: center; }
.hq-case-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(2.5rem, 5vw, 4rem) !important; }
.hq-case-stats__item { margin: 0; border-radius: var(--hq-r-lg); overflow: hidden; background: var(--hq-glass); box-shadow: inset 0 0 0 1px var(--hq-line), 0 30px 60px -40px #000; transition: transform .5s var(--hq-ease), box-shadow .5s var(--hq-ease); }
.hq-case-stats__item:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(151, 71, 255, .55), 0 40px 80px -40px rgba(113, 61, 223, .9); }
.hq-case-stats__item img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 781px) { .hq-case-stats { grid-template-columns: 1fr; } }
.hq-case-cover { margin-top: clamp(2.5rem, 5vw, 4rem) !important; }
.hq-case-cover img { border-radius: var(--hq-r-lg); box-shadow: 0 0 0 1px var(--hq-line), 0 60px 120px -50px rgba(113, 61, 223, .8); width: 100%; }

/* Content rows: sticky section label left, body right */
.hq-case-body { padding-top: clamp(3rem, 6vw, 5rem); }
.hq-case-row { display: grid; grid-template-columns: minmax(200px, .38fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--hq-line); }
.hq-case-row__label { position: relative; }
.hq-case-row__label h2 { position: sticky; top: 120px; font-size: var(--wp--preset--font-size--heading-md); display: flex; gap: .75rem; align-items: baseline; }
.hq-case-row__label h2::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--hq-p3); box-shadow: 0 0 0 6px rgba(151, 71, 255, .2), 0 0 24px var(--hq-p3); translate: 0 -2px; }
.hq-case-row__body { max-width: var(--hq-read); color: var(--hq-text); min-width: 0; }
.hq-case-row__body :is(li, p) { overflow-wrap: anywhere; }
.hq-case-row__body > * + * { margin-top: 1rem; }
.hq-case-row__body h2, .hq-case-row__body h3, .hq-case-row__body h4 { margin-top: 2rem; font-size: 1.375rem; }
.hq-case-row__body ul { padding-left: 0; list-style: none; display: grid; gap: .55rem; }
.hq-case-row__body ul li { margin: 0; padding: .85rem 1rem .85rem 2.75rem; border-radius: var(--hq-r-sm); background: rgba(221, 218, 231, .035); box-shadow: inset 0 0 0 1px var(--hq-line); position: relative; }
.hq-case-row__body ul li::before { content: ""; position: absolute; left: 1rem; top: 1.25rem; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, var(--hq-p3), var(--hq-p1)); rotate: 45deg; }
.hq-case-row__body .wp-block-image img { border-radius: var(--hq-r); box-shadow: 0 0 0 1px var(--hq-line); }
.hq-case-figure img { border-radius: var(--hq-r-lg); box-shadow: 0 0 0 1px var(--hq-line), 0 50px 100px -50px rgba(113, 61, 223, .8); width: 100%; }
@media (max-width: 900px) { .hq-case-row { grid-template-columns: 1fr; } .hq-case-row__label h2 { position: static; } }

/* Geo grids: key/value chips + before/after slider */
.hq-geo > .hq-split-title { text-align: center; margin-inline: auto; }
.hq-geo__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hq-geo__item { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--hq-r-lg); background: var(--hq-glass); box-shadow: inset 0 0 0 1px var(--hq-line); }
.hq-geo__item:first-child { grid-column: 1 / -1; }
.hq-ba__kv { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 0 6px; }
.hq-ba__kv > * { margin: 0 !important; }
.hq-ba__key { color: var(--hq-muted); font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; }
.hq-ba__val { color: var(--hq-white); font-weight: 600; }
@media (max-width: 781px) { .hq-geo__list { grid-template-columns: 1fr; } }

/* Before / after slider: the "after" image is clipped by --pos (site.js adds a range input) */
.hq-ba { display: grid; gap: 10px; }
.hq-ba__stage { --pos: 50%; position: relative; overflow: hidden; border-radius: var(--hq-r); background: #000; touch-action: pan-y; }
.hq-ba__stage .wp-block-image { margin: 0; }
.hq-ba__stage img { display: block; width: 100%; height: auto; border-radius: 0; user-select: none; -webkit-user-drag: none; }
.hq-ba__after { position: absolute !important; inset: 0; }
.hq-ba__after img { height: 100%; object-fit: cover; }
.hq-ba.is-ready .hq-ba__after { clip-path: inset(0 0 0 var(--pos)); }
.hq-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 20px rgba(151, 71, 255, .9); pointer-events: none; z-index: 2; }
.hq-ba__handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--hq-p1); color: #fff; font-size: 1.2rem; box-shadow: 0 0 0 6px rgba(151, 71, 255, .3); }
.hq-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.hq-ba__range:focus-visible + .hq-ba__handle::after { outline: 2px solid var(--hq-gold); outline-offset: 3px; }
.hq-ba__legend { display: flex; justify-content: space-between; padding: 0 6px; }
.hq-ba__legend > * { margin: 0 !important; }
.hq-ba__label { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--hq-muted); }
.hq-ba__legend .hq-ba__label:last-child { color: var(--hq-gold); }
.hq-ba__title { margin: 0 0 6px !important; font-weight: 650; color: var(--hq-white); font-size: 1.25rem; letter-spacing: -.02em; }

/* Web design: PageSpeed before -> after */
.hq-speed { display: grid; gap: 14px; }
.hq-speed__item { padding: 16px; border-radius: var(--hq-r); background: rgba(221, 218, 231, .035); box-shadow: inset 0 0 0 1px var(--hq-line); }
.hq-speed__label { font-weight: 600; color: var(--hq-white); margin-bottom: 10px !important; }
.hq-speed__pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.hq-speed__pair::before { content: "→"; grid-column: 2; grid-row: 1; color: var(--hq-gold); font-size: 1.5rem; }
.hq-speed__pair > :first-child { grid-column: 1; grid-row: 1; }
.hq-speed__pair > :last-child { grid-column: 3; grid-row: 1; }
.hq-speed__pair img { border-radius: var(--hq-r-sm); }

/* Video pair + showcase */
.hq-video-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hq-showcase > .hq-split-title { text-align: center; margin-inline: auto; }
.hq-showcase { }
.hq-showcase .hq-showcase { display: grid; gap: 22px; }
.hq-showcase__item { padding: 18px; border-radius: var(--hq-r-lg); background: var(--hq-glass); box-shadow: inset 0 0 0 1px var(--hq-line); }
@media (max-width: 781px) { .hq-video-pair { grid-template-columns: 1fr; } }