/* =========================================================
   SixFifty FrontPage v2 (template-hp-v2.php) — Vanilla CSS
   Page styles only: header, mobile menu, search and footer are in global-v2.css (loaded on every page).
   Structure: 1. Design Tokens  2. Reset  3. Base/Utilities  4. Sections
   ========================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */

/* Color tokens */
:root {--clr-bg-dark-900: #120821; --clr-bg-dark-800: #1a0f2e; --clr-bg-darkest: #0a0512; --clr-bg-cream: #f7f4ed; --clr-bg-white: #ffffff; --clr-purple-700: #6d28d9; --clr-purple-600: #7c3aed; --clr-purple-500: #9333ea; --clr-purple-400: #a78bfa; --clr-purple-300: #c4b5fd; --clr-text-on-dark: #ffffff; --clr-text-on-dark-muted: #c3b8dc; --clr-text-on-light: #17111f; --clr-text-on-light-muted: #6b6478; --clr-border-light: #e7e2d8; --clr-border-dark: rgba(255,255,255,0.12); --clr-badge-bg: #efe8ff; --clr-badge-text: #7c3aed; --clr-input-bg: rgba(255,255,255,0.06); --clr-input-bg-light: #eeeae1; --crl-bg-accent:#925ad3}

/* Eyebrow tokens */
:root {--clr-eyebrow-bg: #eee7f8; --clr-eyebrow-text: #333133; --clr-eyebrow-dark-bg: #3f3256; --clr-eyebrow-dark-text: #c6b9d3; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace}

/* Icon accent tokens */
:root {--clr-icon-yellow-bg: #f9f3db; --clr-icon-teal-bg: #ccf5ed; --clr-icon-blue-bg: #b3dffa}

/* Spacing tokens - fluid */
:root {--space-3xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem); --space-2xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem); --space-xs: clamp(0.75rem, 0.68rem + 0.3vw, 1rem); --space-sm: clamp(1rem, 0.88rem + 0.5vw, 1.5rem); --space-md: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem); --space-lg: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); --space-xl: clamp(3rem, 2.3rem + 3vw, 5rem); --space-2xl: clamp(4rem, 2.9rem + 4.8vw, 6.5rem); --space-3xl: clamp(5rem, 3.4rem + 7vw, 9rem)}

/* Radius + shadow + motion tokens */
:root {--radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-full: 999px; --shadow-sm: 0 2px 10px rgba(20,10,40,0.07); --shadow-md: 0 10px 30px rgba(20,10,40,0.12); --shadow-lg: 0 25px 70px rgba(20,10,40,0.22); --shadow-glow: 0 0 140px rgba(139,92,246,0.4); --ease: cubic-bezier(.4,0,.2,1); --transition: 0.3s var(--ease)}

/* Typography tokens - fluid */
:root {--font-sans:"lato", "Arial", sans-serif; --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); --fs-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --fs-2xl: clamp(2rem, 1.6rem + 2vw, 2.75rem); --fs-3xl: clamp(2.5rem, 1.9rem + 3vw, 3.75rem); --fs-hero: clamp(2.75rem, 1.9rem + 4.2vw, 4.5rem); --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.6}

/* Layout tokens */
:root {--container-max: 1280px; --container-pad: clamp(1.25rem, 1rem + 2vw, 3rem); --header-h: 84px; --z-header: 100; --z-glow: 0; --z-content: 1}

/* ---------- 2. RESET ---------- */
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0}
html {scroll-behavior: smooth; -webkit-text-size-adjust: 100%}
body {font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--clr-text-on-light); background: var(--clr-bg-cream); -webkit-font-smoothing: antialiased; overflow-x: hidden}
img, picture, video, canvas, svg {display: block; max-width: 100%; height: auto}
input, button, textarea, select {font: inherit; color: inherit}
button {cursor: pointer; background: none; border: none}
a {color: inherit; text-decoration: none}
ul, ol {list-style: none}
h1, h2, h3, h4, h5, h6 {font-family:"alverata", "Arial", sans-serif; font-weight:500; line-height: var(--lh-tight); text-wrap: balance}
/* Alverata also on buttons (same as the main theme: headings and .btn) */
:root {--font-heading: "alverata", "Arial", sans-serif}
.btn {font-family: var(--font-heading)}
p {text-wrap: pretty}
table {border-collapse: collapse}
:focus-visible {outline: 2px solid var(--clr-purple-500); outline-offset: 3px}

/* ---------- 3. BASE LAYOUT & SHARED UTILITIES ---------- */
/* NOTE on shared utility classes: these carry MOTION/TIMING only, never a hardcoded
   color. Any hover COLOR is defined on the component's own selector so different
   buttons/pills/cards can each keep their own identity color. */
.container {width: min(100% - (var(--container-pad) * 2), var(--container-max)); margin-inline: auto}
/* Customizer "Additional CSS" (#wp-custom-css) adds .container {padding: 0 2.1875rem} below 768px for the legacy theme; cancel it here */
@media (max-width: 767px) {.sixfifty-landing .container {max-width: none; padding-inline: 0} .sixfifty-landing .contact-cta__grid {padding: clamp(2rem, 1.2rem + 3vw, 4rem)} }
section {margin-block: 0; padding-block: 5rem}
.section {padding-block: var(--space-2xl); position: relative}
.section--dark {background: var(--clr-bg-dark-900); color: var(--clr-text-on-dark)}
.section--darkest {background: var(--clr-bg-darkest); color: var(--clr-text-on-dark)}
.section--light {background: var(--clr-bg-cream); color: var(--clr-text-on-light)}
.section--overflow-hidden {overflow: hidden}
.eyebrow {display: inline-flex; align-items: center; gap: var(--space-3xs); padding: 0.225rem 0.65rem; border-radius: var(--radius-full); background: var(--clr-eyebrow-bg); color: var(--clr-eyebrow-text); font-family: var(--font-sans); font-size: clamp(0.625rem, 0.6rem + 0.1vw, 0.6875rem); font-weight: 500; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase}
.eyebrow--on-dark {background: var(--clr-eyebrow-dark-bg); color: var(--clr-eyebrow-dark-text)}
.section-heading {font-size: var(--fs-2xl); letter-spacing: -0.02em; text-align: center; margin-block-start: var(--space-xs); margin-inline: auto}
.btn {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3xs); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 400; transition: var(--transition); white-space: nowrap}
.btn-primary {background: linear-gradient(135deg, var(--clr-purple-500), var(--clr-purple-600)); color: #fff; box-shadow: var(--shadow-sm)}
.btn-primary:hover {transform: translateY(-2px); box-shadow: var(--shadow-md)}
.btn-outline {border: 1px solid var(--clr-border-dark); color: var(--clr-text-on-dark)}
.visually-hidden {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap}

/* Shared: card lift on hover (motion only) */
.u-card {transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition)}
.u-card:hover {transform: translateY(-6px); box-shadow: var(--shadow-lg)}

/* Shared: round icon chip base (color set per component) */
.u-icon-chip {display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.12); color: inherit; transition: var(--transition); flex-shrink: 0}
.u-icon-chip svg {width: 16px; height: 16px}

/* Shared: pill/badge timing (color set per component) */
.u-pill {transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition)}

/* ---------- 4.2 HERO ---------- */
.hero {position: relative; text-align: center; padding-block: var(--space-3xl) var(--space-2xl); margin-top:0}
.hero__glow {position: absolute; inset: 0; z-index: 0; pointer-events: none}
.hero__glow::before {content: ''; position: absolute; top: -8%; left: 50%; transform: translateX(-50%); width: min(70vw, 780px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,0.55) 0%, rgba(88,28,135,0.25) 40%, transparent 70%); filter: blur(80px)}
.hero__glow::after {content: ''; position: absolute; top: 6%; left: 50%; transform: translateX(-50%); width: min(46vw, 460px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 32%, rgba(196,181,253,0.85) 40%, rgba(139,92,246,0.35) 50%, transparent 65%); filter: blur(18px); mix-blend-mode: screen}
.hero__content {position: relative; z-index: 1; max-width:800px; margin-inline: auto}
.hero__title {font-size: var(--fs-hero); font-weight:500; color: var(--clr-text-on-dark); letter-spacing: -0.02em}
.hero__subtitle {margin-block-start: var(--space-sm); font-size: var(--fs-md); color: var(--clr-text-on-dark-muted); max-width: 52ch; margin-inline: auto}
.hero__search {margin-block-start: var(--space-xl)}
.hero__search-form {display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); max-width: 560px; margin-inline: auto; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md); border-radius: var(--radius-full); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-lg)}
.hero__search-input {flex: 1; min-width: 0; background: transparent; border: none; color: var(--clr-text-on-dark); font-size: var(--fs-body); text-align: left}
.hero__search-input::placeholder {color: var(--clr-text-on-dark-muted)}
.hero__search-input:focus-visible {outline: none}
.hero__search-form:focus-within {outline: 2px solid var(--clr-purple-400); outline-offset: 3px}
.hero__title .u-nowrap {white-space: nowrap}
.hero__search-btn {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--clr-purple-500), var(--clr-purple-600)); color: #fff; transition: var(--transition)}
.hero__search-btn:hover {transform: scale(1.06)}
.hero__search-btn svg {width: 18px; height: 18px}
.hero__trust {margin-block-start: var(--space-2xl)}
.hero__trust-label {font-size: var(--fs-xs); color: var(--clr-text-on-dark-muted); letter-spacing: 0.04em}
/* Logo strip: mockup proportions, about 1.75x the search box (560px), i.e. ~210px wider on each side; the edge fades sit outside the search box */
.hero__logos {max-width: min(100%, 980px); margin-inline: auto; margin-block-start: var(--space-sm); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)}
.hero__logos-track {display: flex; width: max-content; animation: marquee-scroll 38s linear infinite reverse; will-change: transform; backface-visibility: hidden}
.hero__logos-group {display: flex; align-items: center; flex-shrink: 0; gap: var(--space-xl); padding-inline-end: var(--space-xl)}
.hero__logos img {height: auto; width: auto; max-height: 36px; max-width: 160px; flex: none; object-fit: contain; opacity: 0.7; filter: grayscale(1) brightness(2); transition: var(--transition)}
.hero__logos img:hover {opacity: 1}
@media (max-width: 560px) {.hero__search-form {padding-inline-start: var(--space-sm)} }
.hero__media {position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #110228}
/* Orb/scene: anchored at a fixed distance from the hero top (about where the search bar sits: padding + 18-24rem at all widths), not at 50%:
   the hero grows while the page is still loading (logo row), and a %-based position would move the orb = layout shift (CLS).
   hp-v2.js then puts the centre exactly on the search bar with --orb-dy, via transform (transform changes do not count as CLS). */
.hero__media {--orb-top: calc(var(--space-3xl) + 21rem)}
.hero__scene {position: absolute; left: 50%; top: var(--orb-top); width: 1440px; height: 900px; transform: translate(-50%, calc(-50% + var(--orb-dy, 0px))) scale(var(--scene-scale, 1)); transform-origin: center}
.hero__orb {position: absolute; left: 50%; top: var(--orb-top); width: 900px; height: 900px; max-width: none; transform: translate(-50%, calc(-50% + var(--orb-dy, 0px))) scale(var(--scene-scale, 1)); transform-origin: center; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); transition: opacity 0.6s var(--ease)}
.hero__media.is-ready .hero__orb {opacity: 0}


/* ---------- 4.3 FEATURE GRID ----------
   Tiles: 1 Research (.feature-card--photo: one image with the photo, gradient and answer card built in), 2 Documents + 3 Compliance
   (.feature-card--panel: card image flush with the bottom edge, cut off by it), 4 Legal Updates (.feature-card--wide: card on the right).
   Rows are --fg-row high and the Research column width is derived from them, so the Research tile always has the exact ratio of its
   image (564:650 wide image on phones and >=1280px, 294:560 narrow image in between, see the <picture> in the template) and the
   answer card is never cropped. Card images carry 40px (at 1x) of transparent padding for the shadow, so they are sized by the
   card width (= the tile content box) and pulled out by that padding: Documents/Compliance card 342 of 422 (no bottom padding),
   Legal Updates card 430 of 510. */
.feature-grid {background: #ffffff}
.feature-grid__intro {text-align: center; margin-inline: auto}
.feature-grid__list {--fg-gap: 1rem; --fg-pad: clamp(1.25rem, 1rem + 0.5vw, 1.5rem); --fg-row: 300px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fg-gap); margin-block-start: var(--space-xl)}
.feature-card {position: relative; isolation: isolate; border-radius: var(--radius-lg); overflow: hidden; padding: var(--fg-pad); display: flex; flex-direction: column; color: var(--clr-text-on-dark)}
.feature-card__body {position: relative; z-index: 2; display: flex; flex-direction: column}
.feature-card__head {display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm)}
.feature-card__title {font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); font-weight: 400; letter-spacing: -0.01em}
.feature-card__desc {margin-block-start: var(--space-xs); font-size: var(--fs-body); line-height: 1.35; max-width: 46ch}
.feature-card__arrow {background: rgba(255,255,255,0.3); color: #fff}
.feature-card:hover .feature-card__arrow {background: var(--clr-purple-600); color: #fff; transform: scale(1.08)}
.feature-card__shot {position: relative; pointer-events: none}
.feature-card__shot img {position: absolute; inset-block-start: 0; max-width: none; height: auto}
/* Research */
.feature-card--photo {aspect-ratio: 564 / 650; background: #24143d}
.feature-card__bg {position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%}
.feature-card__overlay {position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,8,33,0.35) 0%, rgba(18,8,33,0) 35%)}
/* Documents / Compliance Tracking */
.feature-card--documents {background: linear-gradient(180deg, #382555 0%, #8a5dca 100%)}
.feature-card--compliance {background: linear-gradient(180deg, #391e61 0%, #20163b 100%)}
.feature-card--panel .feature-card__shot {aspect-ratio: 2 / 1; margin-block: clamp(1.25rem, 1rem + 0.6vw, 1.875rem) calc(var(--fg-pad) * -1)}
.feature-card--panel .feature-card__shot img {inset-inline-start: -11.696%; width: 123.392%; margin-block-start: -11.696%}
/* Legal Updates */
.feature-card--wide {background: radial-gradient(ellipse 60% 62% at -3% 8%, rgb(153,123,189) 42%, rgba(153,123,189,0)), radial-gradient(ellipse 35% 61% at 8% 52%, rgb(168,156,166) 22%, rgba(168,156,166,0)), radial-gradient(ellipse 37.5% 28% at 52% 56%, rgb(185,228,229) 25%, rgba(185,228,229,0)), radial-gradient(ellipse 32% 38% at 0% 100%, rgb(162,116,197) 22%, rgba(162,116,197,0)), radial-gradient(ellipse 35% 31% at 33% 8%, rgb(229,186,255) 18%, rgba(229,186,255,0)), radial-gradient(ellipse 52.5% 28% at 78% -8%, rgb(255,254,255) 0%, rgba(255,254,255,0)), radial-gradient(ellipse 17% 55% at 96% 35%, rgb(252,241,165) 28%, rgba(252,241,165,0)), radial-gradient(ellipse 24.5% 77% at 104% 80%, rgb(247,234,255) 0%, rgba(247,234,255,0)), radial-gradient(ellipse 20% 66% at 56% 106%, rgb(229,211,242) 38%, rgba(229,211,242,0)), radial-gradient(ellipse 60% 52% at 44% 39%, rgb(204,240,255) 20%, rgba(204,240,255,0)), rgb(204,195,241)}
.feature-card--wide .feature-card__desc {max-width: 34ch}
.feature-card--wide .feature-card__shot {aspect-ratio: 430 / 269; margin-block-start: var(--space-md)}
.feature-card--wide .feature-card__shot img {inset-inline-start: -9.302%; width: 118.605%; margin-block-start: -9.302%}
/* Tablet: Research left over two rows, Documents / Compliance stacked right, Legal Updates full width below */
@media (min-width: 760px) {
  .feature-grid__list {grid-template-columns: calc((var(--fg-row) * 2 + var(--fg-gap)) * 294 / 560) minmax(0, 1fr); grid-template-rows: var(--fg-row) var(--fg-row) auto}
  .feature-card--photo {grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto}
  .feature-card--panel .feature-card__shot {aspect-ratio: auto; flex-grow: 1; flex-shrink: 1; flex-basis: 0; min-height: 4rem}
  .feature-card--wide {grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-lg)}
  .feature-card--wide .feature-card__body {align-self: stretch; flex: 1 1 auto; padding-block-end: 3rem}
  .feature-card--wide .feature-card__arrow {position: absolute; inset-inline-start: 0; inset-block-end: 0}
  .feature-card--wide .feature-card__shot {flex: none; width: min(58%, 430px, (var(--fg-row) - var(--fg-pad) * 2) * 1.6); margin-block-start: 0}
}
/* Laptop: Research | Documents | Compliance, Legal Updates under the two panels (narrow Research image) */
@media (min-width: 1024px) {
  .feature-grid__list {grid-template-columns: calc((var(--fg-row) * 2 + var(--fg-gap)) * 294 / 560) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: var(--fg-row) var(--fg-row)}
  .feature-card--wide {grid-column: 2 / 4; grid-row: 2}
}
/* Desktop: the mockup's proportions (columns 564:390:390, Research tile 564x650) scaled to the container width, wide Research image */
@media (min-width: 1280px) {
  .feature-grid .container {container-type: inline-size}
  .feature-grid__list {--fg-row: calc(((100cqi - var(--fg-gap) * 2) * 650 / 1344 - var(--fg-gap)) / 2); grid-template-columns: minmax(0, 564fr) minmax(0, 390fr) minmax(0, 390fr)}
}

/* ---------- 4.4 LOGO / PILL MARQUEE ---------- */
.marquee-section {overflow: hidden; background: #ffffff}
.marquee-section__intro {text-align: center; margin-inline: auto}
.marquee-section__desc {margin-block-start: var(--space-xs); color: var(--clr-text-on-light-muted)}
.marquee-stack {margin-block-start: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee-track {display: flex; width: max-content; will-change: transform; backface-visibility: hidden}
.marquee-track--forward {animation: marquee-scroll 38s linear infinite}
.marquee-track--reverse {animation: marquee-scroll 38s linear infinite reverse}
.marquee-track:hover, .marquee-track:focus-within {animation-play-state: paused}
.marquee-track__group {display: flex; gap: var(--space-sm); flex-shrink: 0; padding-inline-end: var(--space-sm)}
.marquee-pill {flex-shrink: 0; padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-full); background: var(--clr-bg-white); border: 1px solid var(--clr-border-light); font-size: var(--fs-body); font-weight: 500; color: var(--clr-text-on-light-muted); white-space: nowrap}
.marquee-pill:hover {background: linear-gradient(135deg, var(--clr-purple-500), var(--clr-purple-600)); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: var(--shadow-sm)}
@keyframes marquee-scroll {from {transform: translateX(0)} to {transform: translateX(-50%)} }
@media (prefers-reduced-motion: reduce) {.marquee-track--forward, .marquee-track--reverse, .hero__logos-track {animation: none} }
@media (prefers-reduced-motion: reduce) {.hero__logos {mask-image: none; -webkit-mask-image: none} .hero__logos-track {width: auto; justify-content: center} .hero__logos-group[aria-hidden] {display: none} }

/* ---------- 4.5 PROCESS STEPS ----------
   Media: four product states (680x720 slot, white background with a watercolor that fades to white, so no frame) stacked and
   crossfaded by hp-v2.js; the matching step gets .is-active (very light cream highlight). An ACF process_image replaces them with
   a single static framed image. */
.process, .icon-columns {background: #ffffff}
.process__grid {display: grid; grid-template-columns: minmax(0, 680fr) minmax(0, 564fr); gap: clamp(2rem, 1rem + 4vw, 8.25rem); align-items: center}
.process__media {border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg)}
.process__media img {width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5}
.process__media--states {position: relative; display: grid; border-radius: 0; overflow: visible; box-shadow: none}
.process__media--states .process__state {grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 680 / 720; object-fit: contain; opacity: 0; transition: opacity 0.8s var(--ease)}
.process__media--states .process__state.is-active {opacity: 1}
.process__list {margin-block-start: var(--space-lg); border-block: 1px solid var(--clr-border-light)}
.process__step {position: relative; display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-md) 0; border-block-start: 1px solid var(--clr-border-light)}
.process__step:first-child {border-block-start: none}
.process__step::before {content: ''; position: absolute; inset: 4px calc(var(--space-sm) * -1); z-index: 0; border-radius: var(--radius-md); background: var(--clr-bg-cream); opacity: 0; transition: opacity 0.8s var(--ease); pointer-events: none}
.process__step.is-active::before {opacity: 1}
.process__step > * {position: relative; z-index: 1}
.process__step-title {font-size: var(--fs-base); font-weight: 400}
.process__step-label {display: block; margin-block-end: var(--space-3xs); font-family: var(--font-sans); font-size: clamp(0.625rem, 0.6rem + 0.1vw, 0.6875rem); font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-on-light-muted)}
.process__step-desc {font-size: var(--fs-body); color: var(--clr-text-on-light-muted)}
@media (max-width: 900px) {.process__grid {grid-template-columns: 1fr} .process__media img {aspect-ratio: 16/10} .process__media--states {width: min(100%, 560px); margin-inline: auto} .process__media--states .process__state {aspect-ratio: 680 / 720} .process__step {grid-template-columns: 1fr; gap: var(--space-2xs)} }
/* Phones: crop the faded side margins (box = image area 40..1320 at 2x, full height so the watercolor keeps its soft top/bottom) and run to the screen edges, so the card reads larger */
@media (max-width: 600px) {
  .process__media--states {width: auto; margin-inline: calc(var(--container-pad) * -1); aspect-ratio: 1280 / 1440; overflow: hidden}
  .process__media--states .process__state {width: 106.25%; max-width: none; margin-inline-start: -3.125%}
}
@media (prefers-reduced-motion: reduce) {.process__media--states .process__state, .process__step::before {transition: none} }

/* ---------- 4.6 CTA BANNER (dark) ---------- */
.cta-banner__card {position: relative; overflow: hidden; border-radius: var(--radius-2xl); background: #0f0026; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: var(--space-lg); padding: var(--space-2xl)}
.cta-banner__visual {position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: clamp(240px, 26vw, 380px)}
.cta-banner__orb {position: absolute; top: 50%; left: 50%; z-index: 0; width: clamp(1000px, 390%, 1900px); max-width: none; height: auto; transform: translate(-50%, -50%); pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%)}
.cta-banner__logo {position: relative; z-index: 1; width: min(70%, 340px); height: auto}
.cta-banner__glow {position: absolute; inset: 0; z-index: 0; pointer-events: none}
.cta-banner__glow::before {content: ''; position: absolute; top: 50%; left: 26%; transform: translate(-50%,-50%); width: min(34vw, 420px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,0.65) 0%, rgba(88,28,135,0.3) 45%, transparent 72%); filter: blur(60px)}
.cta-banner__glow::after {content: ''; position: absolute; top: 50%; left: 26%; transform: translate(-50%,-50%); width: min(22vw, 260px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 30%, rgba(196,181,253,0.8) 38%, rgba(139,92,246,0.3) 48%, transparent 62%); filter: blur(14px); mix-blend-mode: screen}
.cta-banner__content {position: relative; z-index: 1}
.cta-banner__title {margin-block-start: var(--space-xs); font-size: var(--fs-xl); color: var(--clr-text-on-dark); max-width: 20ch}
.cta-banner__desc {margin-block-start: var(--space-sm); font-size: var(--fs-body); color: var(--clr-text-on-dark-muted); max-width: 42ch}
.cta-banner__btn {margin-block-start: var(--space-lg)}
@media (max-width: 860px) {.cta-banner__card {grid-template-columns: 1fr; text-align: center; padding: var(--space-xl) var(--space-lg)} .cta-banner__title, .cta-banner__desc {margin-inline: auto} .cta-banner__visual {min-height: 300px} }


/* ---------- 4.7 ICON COLUMNS ---------- */
.icon-columns__intro {text-align: center; margin-inline: auto}
.icon-columns__grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 1144px; margin-inline: auto; margin-block-start: var(--space-xl); align-items: stretch; --p: 0}
.icon-card {--off: 0px; transform: translateY(calc(var(--off) * (1 - var(--p)))); will-change: transform}
.icon-card.u-card:hover {transform: translateY(calc(var(--off) * (1 - var(--p)) - 6px))}
.icon-columns__grid .icon-card:nth-child(2) {--off: clamp(2rem, 1rem + 3vw, 4rem)}
.icon-columns__grid .icon-card:nth-child(3) {--off: clamp(4rem, 2rem + 6vw, 7.5rem)}
.icon-card {display: flex; flex-direction: column; min-height: 442px; border-radius: var(--radius-lg); padding: clamp(1.5rem, 0.75rem + 1.5vw, 2rem); overflow: hidden}
.icon-card--yellow {background: var(--clr-icon-yellow-bg)}
.icon-card--teal {background: var(--clr-icon-teal-bg)}
.icon-card--blue {background: var(--clr-icon-blue-bg)}
.icon-card__title {font-size: var(--fs-md); font-weight: 400}
.icon-card__desc {margin-block-start: var(--space-xs); font-size: var(--fs-body); line-height: 1.5; color: #5c5669} /* darker than --clr-text-on-light-muted: keeps 4.5:1+ (WCAG AA) on all three card colors */
/* Product-UI graphic, anchored to the bottom. The files have 40px (at 1x) transparent padding around a 307px white card
   (card 1 is 397 wide: its badge overhangs 10px more on the right), so the box is the white card's width and the image is
   pulled out by that padding on every side - the shadow overhangs the content area instead of insetting the card. */
.icon-card__media {--gw: 387; width: min(100%, 340px); margin-block-start: auto; margin-inline: auto; padding-block-start: var(--space-lg); pointer-events: none}
.icon-columns__grid .icon-card:nth-child(1) .icon-card__media {--gw: 397}
.icon-card__media img {width: calc(var(--gw) / 307 * 100%); max-width: none; height: auto; margin: calc(-40 / 307 * 100%) 0 calc(-40 / 307 * 100%) calc(-40 / 307 * 100%)}
@media (min-width: 900px) {.icon-card__media {width: 100%} }
/* Tablet: one card per row, text left and graphic bottom-right */
@media (max-width: 899px) {.icon-columns__grid {grid-template-columns: 1fr} .icon-card {--off: 0px !important; min-height: 0} }
@media (min-width: 600px) and (max-width: 899px) {
  .icon-card {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-rows: auto 1fr; column-gap: var(--space-lg)}
  .icon-card__title, .icon-card__desc {grid-column: 1}
  .icon-card__desc {align-self: start}
  .icon-card__media {grid-column: 2; grid-row: 1 / 3; align-self: end; width: 100%; padding-block-start: 0}
}
@media (prefers-reduced-motion: reduce) {.icon-card {transform: none} }

/* ---------- 4.8 TESTIMONIALS ---------- */
section.testimonials {padding-top:3rem; padding-bottom:3rem}
.testimonials__header {display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-block-end: var(--space-xl)}
.testimonials__heading-group {max-width: 620px}
.testimonials__heading {margin-block-start: var(--space-xs); font-size: var(--fs-xl); color: var(--clr-text-on-dark)}
.testimonials__nav {display: flex; gap: var(--space-2xs); flex-shrink: 0}
.testimonials__arrow {width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--clr-border-dark); display: flex; align-items: center; justify-content: center; color: var(--clr-text-on-dark); transition: var(--transition)}
.testimonials__arrow svg {width: 18px; height: 18px}
.testimonials__arrow:hover:not(:disabled) {background: var(--clr-purple-600); border-color: var(--clr-purple-600); color: #fff; transform: translateY(-2px)}
.testimonials__arrow:disabled {opacity: 0.3; cursor: not-allowed}
.testimonials {background: radial-gradient(ellipse 45% 12% at 50% 100%, rgba(148,91,214,0.5), rgba(148,91,214,0) 100%), linear-gradient(180deg, #12032a 0%, #12032a 70%, #271350 100%)}
.testimonials__viewport {overflow: hidden; touch-action: pan-y; cursor: grab; padding-top:1rem; padding-bottom:1rem}
.testimonials__viewport:active {cursor: grabbing}
.testimonials__track {display: flex; gap: var(--space-md)}
.testimonial-card {flex: 0 0 clamp(240px, 22vw, 300px); display: flex; flex-direction: column; gap: var(--space-md); background: var(--clr-bg-dark-800); border: 1px solid var(--clr-border-dark); border-radius: var(--radius-lg); padding: var(--space-lg); color: var(--clr-text-on-dark); position: relative; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none}
.testimonial-card::before {content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(ellipse 70% 23.2% at 44.2% 48%, rgb(198,246,249) 21%, rgba(198,246,249,0)), radial-gradient(ellipse 49% 23.2% at -2.2% 60.2%, rgb(192,242,255) 26%, rgba(192,242,255,0)), radial-gradient(ellipse 44% 12.8% at 106.8% 47.5%, rgb(229,246,219) 25%, rgba(229,246,219,0)), radial-gradient(ellipse 61% 24% at -0.8% 36%, rgb(211,174,237) 29%, rgba(211,174,237,0)), radial-gradient(ellipse 33% 12.2% at -3% 12.2%, rgb(225,200,245) 0%, rgba(225,200,245,0)), radial-gradient(ellipse 23% 9.8% at 100% 5.2%, rgb(221,199,240) 0%, rgba(221,199,240,0)), radial-gradient(ellipse 26% 19.5% at 96.2% 64.5%, rgb(200,167,230) 28%, rgba(200,167,230,0)), radial-gradient(ellipse 47% 31.8% at 97.2% 89.2%, rgb(207,175,235) 16%, rgba(207,175,235,0)), radial-gradient(ellipse 48% 25% at 57% 76.2%, rgb(226,203,249) 2%, rgba(226,203,249,0)), radial-gradient(ellipse 34% 16.2% at 81% 97%, rgb(174,127,209) 24%, rgba(174,127,209,0)), rgb(241,235,252); opacity: 0; transition: opacity var(--transition)}
.testimonial-card > * {position: relative; z-index: 1}
.testimonial-card:hover {border-color: transparent; color: var(--clr-text-on-light)}
.testimonial-card:hover::before {opacity: 1}
.testimonial-card__tag {font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 400; line-height: var(--lh-tight); color: var(--clr-text-on-dark); transition: var(--transition)}
.testimonial-card:hover .testimonial-card__tag {color: var(--clr-text-on-light)}
.testimonial-card__quote {font-size: var(--fs-body); line-height: var(--lh-normal); flex: 1; opacity: 0.9}
.testimonial-card__name {font-weight: 600; font-size: var(--fs-body)}
.testimonial-card__role {font-size: var(--fs-xs); opacity: 0.65; margin-block-start: 2px}

/* ---------- 4.9 VIDEO SHOWCASE ---------- */
.video-showcase {background: #110329; color: #ffffff}
.video-showcase__intro {text-align: center; margin-inline: auto}
.video-showcase__desc {margin-block-start: var(--space-sm); color: #ffffff}
.video-showcase__player {position: relative; max-width: 1080px; margin-inline: auto; margin-block-start: var(--space-xl); border-radius: clamp(var(--radius-md), 2.5vw, var(--radius-xl)); overflow: hidden; aspect-ratio: 16/9; box-shadow: var(--shadow-lg); background: var(--clr-bg-dark-900)}
.video-showcase__poster {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover}
/* Thumbnail already has its tint, badges and step cards baked in: no scrim; the play control is a plain white outline triangle (mockup) */
.video-showcase__play {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: clamp(56px, 4rem + 1.5vw, 84px); aspect-ratio: 1; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 2px 10px rgba(10,5,20,0.35)); transition: var(--transition)}
.video-showcase__play svg {width: 66%; height: 66%; margin-inline-start: 6%}
.video-showcase__play:hover {background: rgba(255,255,255,0.14); transform: translate(-50%,-50%) scale(1.08)}
.video-showcase__player:has(.video-showcase__play:hover) .video-showcase__poster {transform: scale(1.015)}
.video-showcase__poster {transition: transform 0.6s var(--ease)}
.video-showcase__player iframe, .video-showcase__player video {position: absolute; inset: 0; width: 100%; height: 100%; border: 0}

/* ---------- 4.10 CONTACT CTA ---------- */
.contact-cta {position: relative; margin-bottom: 0; padding-block: var(--space-2xl); background: #ece4fb}
.contact-cta__glow {position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 20% 30% at 17% 12%, #d2b5ed, transparent), radial-gradient(ellipse 18% 32% at 35% 0%, #bd8fe2, transparent), radial-gradient(ellipse 14% 26% at 46% 4%, #d0aeeb, transparent), radial-gradient(ellipse 22% 28% at 78% 8%, #e6ebfd, transparent), radial-gradient(ellipse 12% 24% at 100% 0%, #f2e6e0, transparent), radial-gradient(ellipse 16% 28% at 0% 70%, #f6f0be, transparent), radial-gradient(ellipse 16% 24% at 0% 92%, #fbe9c1, transparent), radial-gradient(ellipse 14% 26% at 100% 24%, #f9edc3, transparent), radial-gradient(ellipse 14% 26% at 100% 52%, #e6f0b4, transparent), radial-gradient(ellipse 20% 24% at 80% 100%, #d4b5f0, transparent), radial-gradient(ellipse 20% 22% at 14% 100%, #e1c4f0, transparent), radial-gradient(ellipse 8% 14% at 0% 100%, #ecd4ca, transparent), #ece4fb}
.contact-cta__grid {position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-2xl); align-items: stretch; background: #ffffff; border-radius: var(--radius-lg); padding: clamp(2rem, 1.2rem + 3vw, 4rem)}
.contact-cta__info {display: flex; flex-direction: column}
.contact-cta__heading {font-size: var(--fs-2xl)}
.contact-cta__desc {margin-block-start: var(--space-sm); color: var(--clr-text-on-light-muted); max-width: 60ch}
/* G2 badges: a fixed gap under the intro, left-aligned. The logos block takes the leftover height (margin-top: auto). */
.contact-cta__badges {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: var(--space-sm); margin-block: var(--space-md) var(--space-lg); list-style: none}
.contact-cta__badges img {width: auto; height: clamp(76px, 40px + 5.6vw, 120px)}
.contact-cta__logos-block {margin-block-start: auto; padding-block-start: var(--space-md); border-block-start: 1px solid var(--clr-border-light)}
.contact-cta__logos {margin-block-start: var(--space-sm); display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--space-md)}
.contact-cta__logos img {flex: 0 1 auto; min-width: 0; width: auto; height: auto; max-width: 100%; max-height: 44px; object-fit: contain; opacity: 0.6; filter: brightness(0.5)}
.contact-cta__card {position: relative}
.contact-cta__embed {min-height: 360px}
.contact-cta__embed iframe {width: 100%; border: 0; min-height: 360px}
@media (max-width: 900px) {.contact-cta__grid {grid-template-columns: 1fr; gap: var(--space-lg)} }
@media (max-width: 560px) {.sixfifty-landing .contact-cta__grid {padding: var(--space-sm)} .contact-cta__logos {flex-wrap: wrap; gap: var(--space-sm) var(--space-md)} .contact-cta__logos img {flex: none; max-width: 42%; max-height: 28px} }