/* =========================================================
   CYFIRMA Homepage — main stylesheet
   ========================================================= */

:root {
	--color-bg: #ffffff;
	--color-cream: #faf3ec;
	--color-muted: #f5f5f7;
	--color-ink: #1f2a44;
	--color-text: #384259;
	--color-text-light: #6b7280;
	--color-accent: #d6284a;        /* red — headline highlight, buttons */
	--color-accent-2: #7c3aed;      /* purple — pill badges, pillar icons */
	--color-maroon: #38070f;        /* dark CTA banner + quadrant bg */
	--color-border: #e7e2da;

	/* Century Gothic isn't a Google Font (Monotype-licensed, not
	   redistributable) — this renders it if installed locally (common on
	   Windows/Office), falling back to similar geometric sans-serifs
	   otherwise. For guaranteed rendering on every device regardless of
	   what's installed, swap in a free lookalike like Google Fonts'
	   "League Spartan" instead. */
	--font-display: 'Century Gothic', CenturyGothic, 'Apple Gothic', 'URW Gothic', 'Poppins', sans-serif;
	--font-body: 'Century Gothic', CenturyGothic, 'Apple Gothic', 'URW Gothic', 'Poppins', sans-serif;

	--container-width: 1180px;
	--radius-md: 14px;
	--radius-lg: 24px;
	--transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);

	/* Read/written by the 9-pillars scroll interaction (main.js) — keeps the
	   JS scroll math and the CSS row/viewport sizing from ever disagreeing. */
	--site-header-h: 84px;
	--pillar-row-h: 220px;
}

[data-theme="dark"] {
	--color-bg: #12141c;
	--color-cream: #191b24;
	--color-muted: #15171f;
	--color-ink: #f3f4f8;
	--color-text: #cbd2e1;
	--color-text-light: #8890a3;
	--color-border: #2a2d3a;
}

/* Circular wipe on the light/dark theme toggle (see assets/js/main.js).
   Disables the browser's default cross-fade so only the clip-path circle
   animation plays; harmless no-op in browsers without View Transitions. */
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background var(--transition), color var(--transition);
	overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); margin: 0 0 0.5em; font-weight: 600; line-height: 1.2; }
p { margin: 0 0 1em; max-width: 68ch; }
button { font-family: inherit; cursor: pointer; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }
.accent { color: var(--color-accent); }

.screen-reader-text, .skip-link {
	position: absolute; left: -9999px; top: auto;
}
.skip-link:focus {
	left: 16px; top: 16px; z-index: 9999;
	background: var(--color-ink); color: #fff; padding: 10px 16px; border-radius: 8px;
}

:focus-visible {
	outline: 3px solid var(--color-accent-2);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Site loader ----------
   Always white/black regardless of light/dark theme — it's shown before
   the theme preference (localStorage, read in main.js) has even had a
   chance to apply. main.js adds .is-hidden on window "load"; see the
   <noscript> next to the markup in header.php for the no-JS fallback. */
.site-loader {
	position: fixed; inset: 0; z-index: 9999;
	background: #fff; color: #12131a;
	display: flex; align-items: center; justify-content: center;
	opacity: 1; visibility: visible;
	transition: opacity 0.4s ease, visibility 0.4s;
}
.site-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loader__mark { position: relative; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }
.site-loader__ring { position: absolute; inset: 0; animation: site-loader-spin 1.4s linear infinite; }
.site-loader__icon { position: relative; }
@keyframes site-loader-spin { to { transform: rotate(360deg); } }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
	border: 1.5px solid transparent; white-space: nowrap; transition: transform var(--transition), background var(--transition), color var(--transition);
}
.btn--outline {
	position: relative;
	isolation: isolate;
	border-color: transparent;
	color: var(--color-accent);
	background: transparent;
}
.btn--outline::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(120deg, var(--color-accent), var(--color-accent-2), var(--color-accent));
	background-size: 220% 220%;
	background-position: 0% 50%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	transition: background-position 0.5s ease;
	pointer-events: none;
	z-index: -1;
}
.btn--outline:hover { transform: translateY(-2px); }
.btn--outline:hover::before { background-position: 100% 50%; }
.btn--outline-light { border-color: rgba(255,255,255,0.5); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.btn--lg { padding: 14px 30px; font-size: 1rem; }

.text-link { color: var(--color-accent); font-weight: 600; font-size: 0.95rem; }
.text-link--sm { font-size: 0.85rem; }
.text-link:hover { text-decoration: underline; }

.pill-label {
	display: inline-block; padding: 6px 16px; border-radius: 999px;
	border: 1px solid var(--color-accent-2); color: var(--color-accent-2);
	font-size: 0.75rem; letter-spacing: 0.02em; margin-bottom: 16px;
}

/* ---------- Reveal-on-scroll animation ---------- */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
/* Variants used on the hero: text slides in from the left, the product
   screenshot fades in with a slight scale-up. Both still driven by the
   same .is-visible toggle from the IntersectionObserver in main.js. */
.reveal--left { transform: translateX(-32px); }
.reveal--left.is-visible { transform: translateX(0); }
.reveal--scale { transform: scale(0.94); transition-delay: 0.15s; }
.reveal--scale.is-visible { transform: scale(1.4); transform-origin: left center; }

/* ---------- Header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--color-bg);
	padding: 16px 0;
}
/* This theme's own .container (max-width: var(--container-width)) loads
   after Bootstrap's and overrides it here, so the header lines up with the
   rest of the site's content width. .row/.col-auto/.col/.d-flex/etc. below
   are genuine Bootstrap 5 grid/utility classes (see header.php). */
.site-logo { display: flex; align-items: center; gap: 10px; }
.site-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.site-logo__text strong { font-family: var(--font-display); letter-spacing: 0.08em; font-size: 1.05rem; color: var(--color-ink); }
.site-logo__text small { font-size: 0.6rem; letter-spacing: 0.15em; color: var(--color-text-light); text-transform: uppercase; }

/* ACF-managed logo images (logo / logo_dark options fields) */
.site-logo__img { display: block; height: 34px; width: auto; }
.site-logo__img--dark { display: none; }
[data-theme="dark"] .site-logo__img--light { display: none; }
[data-theme="dark"] .site-logo__img--dark { display: block; }

/* Nav column: Bootstrap's .col makes this fill the space between the logo
   and the actions column, and the nav links center within it. */
.site-header__nav-col { display: flex; justify-content: center; min-width: 0; }
.site-nav { display: flex; align-items: center; }

.nav-menu { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-menu a, .nav-menu .nav-link { font-weight: 500; color: var(--color-text); }
.nav-menu a:hover, .nav-menu .nav-link:hover { color: var(--color-accent); }

.nav-link { display: inline-block; }
.nav-link--toggle {
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: none; padding: 8px 0; margin: 0;
	font: inherit; color: var(--color-text); cursor: pointer;
}
.nav-link--toggle .chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.menu-item-has-children.is-open > .nav-link--toggle .chevron { transform: rotate(180deg); }
.menu-item-has-children.is-open > .nav-link--toggle { color: var(--color-accent); }

/* ---------- Dropdown panels (desktop: floating; see 720px breakpoint for mobile accordion) ---------- */
.dropdown {
	position: absolute; top: 100%; left: 0; margin-top: 14px;
	background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
	padding: 20px; z-index: 200;
	opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.menu-item-has-children.is-open > .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.dropdown--simple { min-width: 260px; }
.dropdown--simple ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dropdown--simple a { display: block; padding: 10px 14px; border-radius: 10px; }
.dropdown--simple a:hover, .dropdown--simple a:focus-visible { background: var(--color-muted); }

.dropdown--mega { left: 50%; transform: translate(-50%, 6px); width: 900px; max-width: 90vw; }
.menu-item-has-children.is-open > .dropdown--mega { transform: translate(-50%, 0); }
.dropdown__columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.dropdown__col h4 {
	font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.08em; color: var(--color-text-light); margin: 0 0 10px;
}
.dropdown__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dropdown__col a { display: block; padding: 8px 12px; border-radius: 10px; }
.dropdown__col a:hover, .dropdown__col a:focus-visible { background: var(--color-muted); }

.dropdown__label { display: block; font-weight: 600; color: var(--color-ink); font-size: 0.92rem; }
.dropdown__desc { display: block; font-size: 0.78rem; color: var(--color-text-light); margin-top: 2px; font-weight: 400; }

.dropdown__promo {
	margin-top: 20px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--color-cream);
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.dropdown__promo strong { display: block; font-family: var(--font-display); color: var(--color-ink); font-size: 0.98rem; }
.dropdown__promo p { margin: 4px 0 0; font-size: 0.82rem; color: var(--color-text-light); }
.dropdown__promo .btn { white-space: nowrap; padding: 9px 18px; font-size: 0.85rem; }

/* ---------- Get Started button dropdown (header) ----------
   Reuses the same [data-dropdown]/.nav-link--toggle/.is-open JS wiring as
   the Company/Products/Resources dropdowns (see main.js), but with its own
   panel markup/classes rather than .dropdown/.dropdown--simple — it needs
   to stay a right-anchored floating panel at every breakpoint instead of
   collapsing into the mobile inline-accordion those use. The two-class
   overrides below win on specificity over the plain .nav-link--toggle
   rules regardless of source order or the 720px breakpoint, so the button
   keeps its pill shape instead of the nav link's flat/full-width one. */
.cta-dropdown { position: relative; }
.cta-dropdown .nav-link--toggle { width: auto; padding: 12px 24px; gap: 8px; color: var(--color-accent); }
.cta-dropdown.is-open .nav-link--toggle { color: var(--color-accent); }
.cta-dropdown.is-open .chevron { transform: rotate(180deg); }

.cta-dropdown__panel {
	position: absolute; top: 100%; right: 0; left: auto; margin-top: 14px;
	min-width: 220px; background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
	padding: 10px; z-index: 200;
	opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.cta-dropdown.is-open .cta-dropdown__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.cta-dropdown__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cta-dropdown__panel a { display: block; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; color: var(--color-text); white-space: nowrap; }
.cta-dropdown__panel a:hover, .cta-dropdown__panel a:focus-visible { background: var(--color-muted); color: var(--color-accent); }

/* Right-hand actions: language switcher, theme toggle, Get Started (last).
   Plain Bootstrap .d-flex/.gap-3/.align-items-center classes handle the
   layout in the markup -- nothing extra needed here. */
.lang-switcher {
	border-radius: 50%;
	background: #fff; color: var(--color-text);
	border: 1px solid var(--color-border); padding: 0px;
	/*display: flex;*/
	align-items: center; justify-content: center;
	overflow: hidden; flex-shrink: 0; height: 38px; width: 38px;
}
.lang-switcher a { display: flex; color: var(--color-text); font-size: 0.75rem; font-weight: 700; }
.lang-switcher img {width: 34px; height: 34px; border-radius: 50%; display: block; margin: 0 !important; padding-left: 0 !important;}
.wpml-ls-legacy-list-horizontal, .wpml-ls-legacy-list-horizontal a{padding:0 !important;}

.theme-toggle {
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--color-border); background: var(--color-muted);
	display: flex; align-items: center; justify-content: center; color: var(--color-text);
	flex-shrink: 0;
}
/* Sun shows in light mode (click it to go dark); moon shows in dark mode
   (click it to go back to light) — same show/hide-by-[data-theme] pattern
   as the light/dark logo swap above. */
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Mobile hamburger -- hidden on desktop, shown at the 720px breakpoint
   below alongside the collapsing nav-menu drawer. */
.site-header__toggle { display: none; }
.nav-toggle {
	display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--color-ink); border-radius: 2px; }

/* ---------- Hero ---------- */
.hero { padding: 96px 0 32px; }
.hero__heading { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.1; color: var(--color-ink); }
.hero__heading .text-accent { color: var(--color-accent); }
.hero__subtext { color: var(--color-text-light); font-size: 1.15rem; margin: 24px 0 32px; max-width: 46ch; }

/* Product screenshot — soft glow frame behind a rounded, shadowed image,
   matching the elevated-card look in the reference design. Swap the
   placehold.co <img src> in front-page.php for the real product
   screenshot whenever it's ready. */
.hero__visual { position: relative; }
.hero__image {
	display: block; width: 100%; height: auto;
	border-radius: var(--radius-lg);
	border: 4px solid var(--color-border);
	box-shadow: 0px 32px 64px -12px #10182824;
}

.hero__proof { margin-top: 100px; padding-top: 32px; }
.hero__rating { display: flex; align-items: center; gap: 8px; color: var(--color-text-light); white-space: nowrap; }
.hero__rating strong { font-size: 20px; }
.stars { color: #f5b400; letter-spacing: 2px; }

/* ---------- Marquee ---------- */
.marquee-section { padding: 20px 0 48px; overflow: hidden; }
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee--muted { padding: 24px 0; background: var(--color-muted); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.marquee__track {
	display: flex; width: max-content; gap: 48px; padding: 8px 24px;
	animation: marquee-scroll 40s linear infinite;
}
.marquee__track--reverse { animation-direction: reverse; animation-duration: 32s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-weight: 600; color: var(--color-text-light); white-space: nowrap; font-size: 0.95rem; }
.marquee__item--icon {
	padding: 10px 18px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg);
}

/* Hero "trusted by" logo marquee — image chips instead of text, reusing
   .marquee's edge-fade mask and hover-to-pause behavior above. Swap each
   placehold.co <img src> in front-page.php for the real client logo PNG/
   SVG whenever they're ready. */
.logo-marquee .marquee__track { gap: 10px; padding: 4px 0; animation-duration: 28s; }
.hero__proof .col { min-width: 0; }
.logo-marquee__item {
	display: flex; align-items: center; justify-content: center;
}
.logo-marquee__item img { display: block; height: 80px; width: auto; border-radius: 6px; }

@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---------- Announcements ---------- */
/* ---------- Scroll statement (word-by-word highlight, pinned) ---------- */
/* Sticky-pinning works with plain CSS regardless of JS. The muted → dark
   per-word highlight is a progressive enhancement: words render fully
   dark (readable, no JS needed) until main.js adds
   .scroll-statement--enhanced, at which point they start muted and light
   up as the section scrolls past. */
.scroll-statement { position: relative; min-height: 220vh; }
.scroll-statement__pin {
	position: sticky; top: 0;
	min-height: 100vh;
	display: flex; align-items: center;
	padding: 64px 0;
}
.scroll-statement__text {
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	line-height: 1.55;
	font-weight: 300;
	margin: 0;
}
.scroll-word { color: var(--color-ink); transition: color 0.25s ease; }
.scroll-statement--enhanced .scroll-word { color: var(--color-text-light); }
.scroll-statement--enhanced .scroll-word.is-active { color: var(--color-ink); }
.scroll-statement__highlight {
	margin: 28px 0 0;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-weight: 700;
	color: var(--color-accent);
}

.announcements { padding: 8px 0 64px; }
.announcements__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; border-top: 1px solid var(--color-border); padding-top: 40px; }
.announcement .eyebrow { color: var(--color-accent); font-style: italic; font-size: 0.85rem; margin-bottom: 6px; }
.announcement h3 { margin-bottom: 6px; }

/* ---------- Section shell ---------- */
.section { padding: 80px 0; }
.section--cream { background: var(--color-cream); }
.section--muted { background: var(--color-muted); }
.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.section-lede { color: var(--color-text-light); }
.section-head .section-lede { margin: 0 auto; }

/* ---------- Announcements carousel (2-up desktop / 1-up mobile; see main.js) ---------- */
.carousel-announce { position: relative; }
.carousel-announce__viewport {
	overflow: hidden;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.carousel-announce__track {
	display: flex;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.carousel-announce__item {
	flex: 0 0 50%;
	max-width: 50%;
	padding: 40px;
}
.carousel-announce__item:nth-child(odd) { border-right: 1px solid var(--color-border); }

.announce-card { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center; }
.announce-card--no-media { grid-template-columns: 1fr; }
.announce-card__media { display: flex; flex-direction: column; gap: 10px; }
.announce-card__eyebrow { display: block; font-style: italic; color: var(--color-accent); font-size: 0.9rem; margin-bottom: 8px; }
.announce-card__body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.announce-card__body p { color: var(--color-text-light); margin-bottom: 16px; }
.announce-card__link { display: inline-flex; align-items: center; gap: 6px; }

.carousel-announce__control {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-ink);
	display: flex; align-items: center; justify-content: center;
	transition: background var(--transition), border-color var(--transition);
}
.carousel-announce__control:hover { border-color: var(--color-accent); color: var(--color-accent); }
.carousel-announce__control:disabled { opacity: 0.35; cursor: default; }
.carousel-announce__control:disabled:hover { border-color: var(--color-border); color: var(--color-ink); }
.carousel-announce__control--prev { left: -22px; }
.carousel-announce__control--next { right: -22px; }

/* ---------- Product stack (3 product-showcase cards, overlap on scroll) ---------- */
.stack-wrap { display: flex; flex-direction: column; gap: 40px; }
.stack-holder {
	position: sticky;
	top: calc(96px + var(--stack-i, 0) * 28px);
	z-index: calc(var(--stack-i, 0) + 1);
}
.stack-holder .product-showcase { box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12); }

/* ---------- Product showcase ---------- */
.product-showcase {
	display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 32px; align-items: center;
	background: var(--color-bg); border-radius: var(--radius-lg); padding: 40px; border: 1px solid var(--color-border);
}
.product-badge { display: inline-block; font-weight: 700; color: var(--color-accent); margin-bottom: 12px; }
.mock-panel { background: var(--color-cream); border-radius: var(--radius-md); padding: 20px; border: 1px solid var(--color-border); }
.mock-panel__toolbar { display: flex; gap: 6px; margin-bottom: 16px; }
.mock-panel__toolbar span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); }
.mock-panel__body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mock-panel__stat {
	background: var(--color-bg); border-radius: 10px; padding: 16px 8px; text-align: center;
	font-weight: 700; color: var(--color-accent-2); border: 1px solid var(--color-border);
}

/* ---------- 9 Pillars: scroll-driven sticky stack ----------
   Structure: .pillars-scroll (tall spacer, provides the scroll distance)
     > .pillars-sticky (position: sticky; pins under the header)
       > .pillars-viewport (fixed height = 3 rows; overflow hidden)
         > .pillars-rail (decorative center line + 3 static dots: prev/active/next)
         > .pillars-track (absolutely positioned; JS translates this vertically
           and toggles .is-active / fade state per row — see main.js)
   JS drives everything off scroll progress through .pillars-scroll; this
   file only defines the visual states it toggles. */
.pillars-section { overflow: visible; }
.pillars-scroll { position: relative; }
.pillars-sticky {
	position: sticky;
	top: var(--site-header-h, 84px);
}
.pillars-viewport {
	position: relative;
	height: calc(var(--pillar-row-h, 220px) * 3);
	overflow: hidden;
}
.pillars-rail {
	position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
	background: var(--color-border); z-index: 1; pointer-events: none;
}
.pillars-rail__dot {
	position: absolute; left: 50%; transform: translate(-50%, -50%);
	width: 14px; height: 14px; border-radius: 50%; background: var(--color-border);
}
.pillars-rail__dot--prev { top: calc(var(--pillar-row-h, 220px) * 0.5); opacity: 0.5; }
.pillars-rail__dot--active {
	top: 50%; width: 22px; height: 22px;
	background: var(--color-accent); box-shadow: 0 0 0 6px var(--color-bg), 0 0 24px rgba(214, 40, 74, 0.45);
}
.pillars-rail__dot--next { top: calc(var(--pillar-row-h, 220px) * 2.5); opacity: 0.3; background: var(--color-accent); }

.pillars-track { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.pillar-row {
	position: relative;
	height: var(--pillar-row-h, 220px);
	display: flex; align-items: center; justify-content: space-between; gap: 40px;
	opacity: 0.3; transform: scale(0.94);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.pillar-row.is-active { opacity: 1; transform: scale(1); }
.pillar-row:nth-child(even) { flex-direction: row-reverse; }

.pillar-row__marker { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; width: 38%; }
.pillar-row:nth-child(even) .pillar-row__marker { flex-direction: row-reverse; text-align: right; }
.pillar-row__icon {
	flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, var(--color-accent-2), var(--color-maroon));
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 1.1rem; box-shadow: 0 0 0 6px var(--color-bg);
	transition: box-shadow 0.25s ease;
}
.pillar-row.is-active .pillar-row__icon { box-shadow: 0 0 0 6px var(--color-bg), 0 0 24px rgba(124, 58, 237, 0.5); }
.pillar-row__label { font-family: var(--font-display); color: var(--color-text-light); font-size: 1.05rem; line-height: 1.3; }
.pillar-row.is-active .pillar-row__label { color: var(--color-ink); }

.pillar-row__detail {
	flex: 1 1 auto; max-width: 520px; background: var(--color-bg);
	border-radius: var(--radius-md); padding: 24px 28px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}
.pillar-row__detail h3 { font-size: 1.1rem; }
.pillar-row__detail p { color: var(--color-text-light); margin-bottom: 12px; }

/* ---------- CTA banner ---------- */
.cta-banner {
	background: var(--color-maroon); color: #fff; border-radius: var(--radius-lg);
	padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	margin: 24px 0;
}
.cta-banner h2 { color: #fff; margin: 0; font-size: 1.4rem; }
.cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Gartner quadrant ---------- */
.quadrant-section { background: #0d0a12; color: #f1eef7; padding: 80px 0; }
.quadrant-section h2 { color: #f1eef7; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.quadrant-section .accent { color: #ff5c7a; }
.quadrant-section__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; perspective: 1200px; }
.quadrant-graphic {
	background: radial-gradient(circle at 70% 30%, #2b1a45, #0d0a12 70%);
	border: 1px solid #33283f; border-radius: var(--radius-lg); padding: 24px; position: relative;
	transform-style: preserve-3d;
	transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
	will-change: transform;
}
/* Tilt angles are set inline by main.js as --tilt-x / --tilt-y on
   mousemove (mapped from cursor position within the card); this rule just
   reads them, so JS never has to touch box-shadow/scale directly. */
.quadrant-graphic.is-tilting {
	transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale3d(1.02, 1.02, 1.02);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
	transition: box-shadow 0.15s ease-out;
}
.quadrant-graphic__grid { position: relative; height: 200px; border-left: 1px solid #4b3d5c; border-bottom: 1px solid #4b3d5c; margin: 8px 30px; }
.quadrant-graphic__grid::before, .quadrant-graphic__grid::after { content: ""; position: absolute; background: #4b3d5c; }
.quadrant-graphic__grid::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.quadrant-graphic__grid::after { top: 50%; left: 0; right: 0; height: 1px; }
.quadrant-graphic__label { position: absolute; font-size: 0.65rem; letter-spacing: 0.08em; color: #b8aecb; text-transform: uppercase; }
.quadrant-graphic__label--tl { top: -18px; left: 4px; }
.quadrant-graphic__label--tr { top: -18px; right: 4px; }
.quadrant-graphic__label--bl { bottom: -18px; left: 4px; }
.quadrant-graphic__label--br { bottom: -18px; right: 4px; }
.quadrant-graphic__dot {
	position: absolute; top: 22%; right: 18%; width: 10px; height: 10px; border-radius: 50%; background: #fff;
	font-size: 0.7rem; padding-left: 16px; white-space: nowrap; color: #fff; font-weight: 600;
}
.quadrant-graphic__axis-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.65rem; color: #b8aecb; position: absolute; left: 6px; top: 50%; transform: translateY(-50%) rotate(180deg); text-transform: uppercase; letter-spacing: 0.08em; }
.quadrant-graphic__axis-x { text-align: center; font-size: 0.65rem; color: #b8aecb; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat-card {
	background: var(--color-cream); border-radius: var(--radius-lg); padding: 32px; text-align: center;
	display: flex; flex-direction: column; gap: 6px;
}
.stat-card strong { font-family: var(--font-display); font-size: 2.2rem; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.stat-card span { color: var(--color-text-light); font-size: 0.9rem; }

/* ---------- Framework cards ---------- */
.framework-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.framework-card { background: var(--color-bg); border-radius: var(--radius-md); padding: 28px; border: 1px solid var(--color-border); }

/* ---------- Recognition ---------- */
.recognition-head { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; margin-bottom: 48px; }
.gartner-card {
	background: #0e2a52; color: #fff; border-radius: var(--radius-lg); padding: 28px;
}
.gartner-card__brand { font-weight: 700; margin-bottom: 4px; }
.gartner-card h3 { color: #fff; margin-bottom: 4px; }
.gartner-card__rating { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 1.4rem; font-weight: 700; }
.gartner-card__meta { color: #b9c8e6; font-size: 0.85rem; margin: 4px 0 0; }

.testimonial-card {
	background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: 24px; width: 320px; flex-shrink: 0; margin: 0;
}
.testimonial-card p { font-style: italic; }
.testimonial-card cite { display: block; margin-top: 12px; font-style: normal; font-weight: 600; font-size: 0.85rem; color: var(--color-text-light); }

/* ---------- Resources ---------- */
.resources-head { margin-bottom: 40px; }

/* "Book cover" thumbnail mock (no real report-cover art on hand) — a
   cream backdrop with a tilted gradient cover card and a sliver of white
   "pages" peeking out behind it, echoing the mock-panel treatment used
   for product screenshots elsewhere on this page. */
.resource-book {
	position: relative; aspect-ratio: 1 / 1;
	background: var(--color-cream); border-radius: var(--radius-md);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.resource-book::before {
	content: ""; position: absolute; width: 62%; aspect-ratio: 4 / 3.1;
	background: #fff; border-radius: 8px; transform: rotate(-8deg) translate(10px, 14px);
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}
.resource-book__cover {
	position: relative; width: 62%; aspect-ratio: 4 / 3.1; border-radius: 8px;
	background: linear-gradient(135deg, var(--color-accent-2), var(--color-maroon));
	transform: rotate(-8deg);
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22);
}
.resource-book--lg { aspect-ratio: 16 / 11; }

.resource-feature {
	display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;
	margin-bottom: 48px;
}
.resource-feature__date {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--color-accent); font-weight: 600; font-size: 0.95rem; margin-bottom: 16px;
}
.resource-feature__copy h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 24px; }

.resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.resource-card { display: block; }
.resource-card__meta { display: block; margin-top: 20px; }
.resource-card time { display: block; font-size: 0.8rem; color: var(--color-accent); font-weight: 600; margin-bottom: 6px; }
.resource-card h3 {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
	font-size: 1.05rem;
}
.resource-card h3 svg { flex-shrink: 0; margin-top: 4px; }
.resource-card p { color: var(--color-text-light); font-size: 0.9rem; margin-top: 12px; }

/* ---------- Integrations ---------- */
.integrations-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.quick-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.quick-action {
	display: flex; flex-direction: column; gap: 2px; background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); padding: 16px 20px; transition: transform var(--transition), box-shadow var(--transition);
}
.quick-action:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(31,42,68,0.25); }
.quick-action span { font-weight: 600; color: var(--color-ink); }
.quick-action small { color: var(--color-text-light); }

.contact-form-wrap { background: var(--color-bg); border-radius: var(--radius-lg); padding: 32px; border: 1px solid var(--color-border); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.contact-form input, .contact-form textarea {
	width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--color-border);
	background: var(--color-muted); font-family: inherit; font-size: 0.95rem; color: var(--color-text);
}
.contact-form textarea { margin-bottom: 14px; resize: vertical; }
.form-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 20px; }
.form-agree a { text-decoration: underline; }
.form-notice { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 0.9rem; }
.form-notice--success { background: #e6f6ec; color: #1a7a44; }
.form-notice--error { background: #fbe9ea; color: #b3261e; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-muted); padding: 64px 0 24px; border-top: 1px solid var(--color-border); }
.footer-top { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-brand p { color: var(--color-text-light); font-size: 0.9rem; margin-top: 16px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
	width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border);
	display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--color-accent);
}
.footer-eyebrow { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--color-accent); text-transform: uppercase; margin-bottom: 16px; }
.footer-menu li { margin-bottom: 10px; }
.footer-menu a:hover, .footer-links a:hover { color: var(--color-accent); }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.badge-circle {
	width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg);
	display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.55rem; font-weight: 700; padding: 4px;
}
.badge-circle--dark { background: var(--color-ink); color: #fff; }

.footer-offices { border-top: 1px solid var(--color-border); padding-top: 32px; margin-bottom: 32px; }
.offices-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 20px; }
.office h4 { font-size: 0.95rem; margin-bottom: 6px; }
.office p { font-size: 0.8rem; color: var(--color-text-light); }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--color-border); padding-top: 24px; font-size: 0.85rem; color: var(--color-text-light); }
.footer-bottom-links { display: flex; gap: 20px; }

/* ---------- Generic page content ---------- */
.generic-content { padding: 64px 24px; max-width: 800px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
	.stack-holder { position: static; z-index: auto; }
	.product-showcase, .quadrant-section__grid, .recognition-head, .contact-grid { grid-template-columns: 1fr; }
	.announcements__grid, .stats-grid, .framework-grid, .resources-grid, .resource-feature { grid-template-columns: 1fr; }
	.resource-feature__visual { order: -1; max-width: 360px; }
	.footer-top { grid-template-columns: 1fr; }
	.offices-grid { grid-template-columns: repeat(2, 1fr); }

	.pillar-row__detail { max-width: 420px; }
}

@media (max-width: 768px) {
	.carousel-announce__item { flex-basis: 100%; max-width: 100%; padding: 28px 8px; border-right: none !important; }
	.announce-card { grid-template-columns: 1fr; text-align: left; }
	.announce-card__media { flex-direction: row; flex-wrap: wrap; }
	.carousel-announce__control--prev { left: -6px; }
	.carousel-announce__control--next { right: -6px; }

	/* Pillar rows stack (marker over detail) instead of splitting the row in
	   two — main.js measures this taller row height itself, so the sticky
	   math and .pillars-viewport height stay in sync automatically. */
	.pillar-row, .pillar-row:nth-child(even) {
		flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px;
	}
	.pillar-row__marker, .pillar-row:nth-child(even) .pillar-row__marker {
		width: 100%; flex-direction: row; text-align: left;
	}
	.pillar-row__detail { max-width: none; width: 100%; padding: 18px 20px; }
	.pillars-rail { left: 20px; }
	.pillars-rail__dot { left: 20px; }

	/* Stacked marker+detail need more vertical room than the single-line
	   desktop row — main.js reads this same custom property for its scroll
	   math, so the two never disagree. */
	.pillars-section { --pillar-row-h: 320px; }
}

@media (max-width: 720px) {
	.nav-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); flex-direction: column; align-items: stretch; padding: 8px 24px 16px; gap: 4px; border-bottom: 1px solid var(--color-border); display: none; max-height: calc(100vh - 64px); overflow-y: auto; }
	.nav-menu.is-open { display: flex; }
	.nav-menu > li { padding: 4px 0; border-bottom: 1px solid var(--color-border); }
	.nav-menu > li:last-child { border-bottom: none; }
	.site-header__toggle { display: block; }

	/* Company / Products become inline accordions, not floating panels */
	.nav-link--toggle { width: 100%; justify-content: space-between; padding: 12px 0; }
	.dropdown {
		position: static; left: auto; top: auto; margin: 0 0 10px; transform: none;
		width: auto; max-width: none; box-shadow: none; border: none; border-radius: 0;
		background: transparent; padding: 4px 0 8px 4px;
		opacity: 1; visibility: visible; pointer-events: auto;
		max-height: 0; overflow: hidden; transition: max-height 0.22s ease;
	}
	.menu-item-has-children.is-open > .dropdown { max-height: 600px; }
	.dropdown--mega { left: auto; }
	.dropdown__columns { grid-template-columns: 1fr; gap: 18px; }
	.dropdown__promo { flex-direction: column; align-items: flex-start; }
	.dropdown__promo .btn { width: 100%; text-align: center; }

	.form-row { grid-template-columns: 1fr; }
	.offices-grid { grid-template-columns: 1fr; }
	.cta-banner { flex-direction: column; align-items: flex-start; }
}