/*
Theme Name: Opus Agentic
Theme URI: https://opusagentic.com
Author: Opus Agentic
Description: A custom block theme for Opus Agentic — autonomous AI agents for small ops teams. Built on the Aura Navy / Nebula Cyan / Cosmic Copper brand system.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: opusagentic
Tags: full-site-editing, block-styles, block-patterns, editor-style
*/

/* Minor polish that theme.json can't express cleanly */

html { scroll-behavior: smooth; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Subtle ambient noise on navy backgrounds */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
	opacity: 0.03;
	pointer-events: none;
	z-index: 0;
	mix-blend-mode: overlay;
}

.wp-site-blocks { position: relative; z-index: 1; overflow-x: clip; }

/* Live-dot animation reused across patterns */
.opus-live-dot {
	display: inline-block;
	width: 6px; height: 6px;
	background: var(--wp--preset--color--nebula-cyan);
	border-radius: 50%;
	box-shadow: 0 0 12px var(--wp--preset--color--nebula-cyan);
	animation: opus-pulse 2s infinite;
	margin-right: 8px;
	vertical-align: middle;
}

@keyframes opus-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

/* Marquee animation */
.opus-marquee {
	overflow: hidden;
	white-space: nowrap;
	padding: 28px 0;
	border-top: 1px solid var(--wp--preset--color--navy-line);
	border-bottom: 1px solid var(--wp--preset--color--navy-line);
	background: var(--wp--preset--color--navy-deep);
}
.opus-marquee-track {
	display: inline-flex;
	gap: 64px;
	animation: opus-scroll 45s linear infinite;
	font-family: var(--wp--preset--font-family--display);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
@keyframes opus-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Allow tilt to overflow the column grid boundary */
.wp-block-columns:has(.opus-service-card) { overflow: visible !important; }

/* Service card — JS drives all transform animation; CSS only handles background */
.opus-service-card {
	cursor: pointer;
	will-change: transform;
	transition: background 0.3s;
}
.opus-service-card:hover { background: var(--wp--preset--color--navy-elev) !important; }
/* While tilting: kill any CSS transition-delay that would fight the RAF loop */
.opus-service-card.is-tilting {
	transition: background 0.3s !important;
	transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
	.opus-service-card { transform: none !important; }
}

/* Button hover lift */
.wp-block-button__link { transition: transform 0.2s, background 0.2s; }
.wp-block-button__link:hover { transform: translateY(-1px); }

/* Underline-on-hover for nav */
.opus-nav a {
	position: relative;
	transition: color 0.2s;
}
.opus-nav a::after {
	content: '';
	position: absolute;
	bottom: -4px; left: 0;
	width: 0; height: 1px;
	background: var(--wp--preset--color--nebula-cyan);
	transition: width 0.2s;
}
.opus-nav a:hover { color: var(--wp--preset--color--stardust-white); }
.opus-nav a:hover::after { width: 100%; }

/* ====================================================
   FOOTER — custom grid, avoids WP flex-collapse issues
   ==================================================== */
.opus-footer-grid {
	display: grid;
	grid-template-columns: 2.5fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 80px;
}

.opus-footer-brand {
	max-width: 320px;
}

.opus-footer-logo {
	display: block;
	height: 44px;
	width: auto;
	margin-bottom: 20px;
}

.opus-footer-brand p {
	color: var(--wp--preset--color--lunar-gray);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

.opus-footer-col h5 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--nebula-cyan);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 20px 0;
	font-weight: 500;
}

.opus-footer-col a {
	display: block;
	color: var(--wp--preset--color--lunar-gray);
	text-decoration: none;
	font-size: 14px;
	margin-bottom: 12px;
	transition: color 0.2s;
}

.opus-footer-col a:hover {
	color: var(--wp--preset--color--stardust-white);
}

.opus-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 40px;
	border-top: 1px solid var(--wp--preset--color--navy-line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--preset--color--gray-dim);
}

.opus-footer-legal a {
	color: var(--wp--preset--color--gray-dim);
	text-decoration: none;
	margin-left: 24px;
	transition: color 0.2s;
}

.opus-footer-legal a:first-child {
	margin-left: 0;
}

.opus-footer-legal a:hover {
	color: var(--wp--preset--color--stardust-white);
}

/* Responsive — collapse to single column on small screens */
@media (max-width: 900px) {
	.opus-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
	.opus-footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.opus-footer-grid {
		grid-template-columns: 1fr;
	}
	.opus-footer-bottom {
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
	}
	.opus-footer-legal a:first-child {
		margin-left: 0;
	}
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.reveal.in-view {
	opacity: 1;
	transform: translateY(0);
}

.reveal-up-strong {
	opacity: 0;
	transform: translateY(80px);
	transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up-strong.in-view {
	opacity: 1;
	transform: translateY(0);
}

.reveal-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.in-view {
	opacity: 1;
	transform: translateX(0);
}

.reveal-right {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.in-view {
	opacity: 1;
	transform: translateX(0);
}

.reveal-stagger > * {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.in-view > * {
	opacity: 1;
	transform: translateY(0);
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 500ms; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 600ms; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 700ms; }

.reveal-scale {
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.in-view {
	opacity: 1;
	transform: scale(1);
}

[data-counter] { display: inline-block; }

/* Lenis required CSS */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Hero parallax containers */
[data-scroll-zoom] {
	will-change: transform, opacity;
}
[data-scroll-parallax] {
	will-change: transform;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal-up-strong, .reveal-left, .reveal-right, .reveal-scale, .reveal-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	[data-scroll-zoom], [data-scroll-parallax] {
		transform: none !important;
	}
}

/* ============================================================
   HERO FULL-BLEED BACKGROUND FIX
   The hero <section> is layout:constrained (1280px). The bg SVG
   needs to escape that constraint and stretch to the section's
   actual viewport width. Position it against .opus-hero directly.
   ============================================================ */
.opus-hero {
	position: relative;
	overflow: hidden;
}

.opus-hero .hero-bg,
.opus-hero .hero-vignette,
.opus-hero .hero-accent-float,
.opus-about-hero .hero-bg,
.opus-about-hero .hero-vignette {
	position: absolute;
	pointer-events: none;
	margin: 0 !important;
}

.opus-about-hero .wp-block-html {
	margin: 0 !important;
	padding: 0;
	line-height: 0;
}

.opus-hero .hero-bg {
	top: -10%;
	left: -10%;
	right: -10%;
	bottom: -10%;
	width: auto;
	height: auto;
	z-index: 0;
}

.opus-hero .hero-bg svg {
	width: 100%;
	height: 100%;
	display: block;
}

.opus-hero .hero-vignette {
	inset: 0;
	z-index: 1;
	background: linear-gradient(to right, rgba(18,26,49,0.88) 0%, rgba(18,26,49,0.55) 38%, transparent 68%);
}

.opus-hero .hero-accent-float {
	top: 100px;
	right: 5%;
	width: 380px;
	height: auto;
	z-index: 1;
	opacity: 0.7;
}

@media (max-width: 1024px) {
	.opus-hero .hero-accent-float {
		width: 280px;
		opacity: 0.4;
	}
}

@media (max-width: 640px) {
	.opus-hero .hero-accent-float {
		width: 200px;
		right: -40px;
		opacity: 0.3;
	}
}

/* Hero content needs to sit above the background layers */
.opus-hero > *:not(.hero-bg):not(.hero-vignette):not(.hero-accent-float),
.opus-hero .wp-block-group,
.opus-hero .wp-block-buttons,
.opus-hero .wp-block-heading,
.opus-hero .opus-hero-ticker {
	position: relative;
	z-index: 2;
}

/* Lift the WordPress inner constrained container above the bg too */
.opus-hero > .wp-block-group__inner-container,
.opus-hero > .is-layout-constrained {
	position: relative;
	z-index: 2;
}

/* ============================================================
   CURSOR — custom branded cursor
   ============================================================ */
body { cursor: none; }

#opus-cursor {
	position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
	width: 8px; height: 8px;
	background: var(--wp--preset--color--nebula-cyan);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	mix-blend-mode: difference;
}
#opus-cursor-ring {
	position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
	width: 32px; height: 32px;
	border: 1px solid rgba(0, 212, 255, 0.4);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.3s, height 0.3s, border-color 0.3s;
}
body:has(a:hover) #opus-cursor-ring,
body:has(button:hover) #opus-cursor-ring {
	width: 48px; height: 48px;
	border-color: var(--wp--preset--color--nebula-cyan);
}

/* ============================================================
   HEADER — logo 3D tilt
   ============================================================ */
.opus-header .wp-block-site-logo {
	flex-shrink: 0;
	will-change: filter;
}
.opus-header .wp-block-site-logo a {
	will-change: transform;
}
#opus-logo-shine {
	position: absolute;
	inset: -4px;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: overlay;
}

/* ============================================================
   NAV — scrolled state
   ============================================================ */
header.is-scrolled {
	background: rgba(8, 15, 30, 0.95) !important;
	backdrop-filter: blur(24px) !important;
}

/* ============================================================
   HERO — video background
   ============================================================ */
#opus-hero-video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: 0.28; z-index: 0;
	pointer-events: none;
}

/* ============================================================
   HERO — particle canvas
   ============================================================ */
#opus-hero-canvas {
	position: absolute; inset: 0; width: 100%; height: 100%;
	z-index: 2; pointer-events: none; opacity: 0.6;
	display: block; margin: 0;
}

/* Strip margins from the wp-block-html wrapper inside the hero
   so the canvas/video sit flush with no top gap */
.opus-hero .wp-block-html {
	margin: 0 !important;
	padding: 0;
	line-height: 0;
}

/* ============================================================
   HERO — staggered title line reveal
   ============================================================ */
.opus-hero h1 .opus-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.55em;
	margin-bottom: -0.55em;
}
.opus-hero h1 .opus-line-inner {
	display: block;
	opacity: 0;
	transform: translateY(100%);
	animation: opus-word-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.opus-hero h1 .opus-line:nth-child(1) .opus-line-inner { animation-delay: 0.4s; }
.opus-hero h1 .opus-line:nth-child(2) .opus-line-inner { animation-delay: 0.55s; }
.opus-hero h1 .opus-line:nth-child(3) .opus-line-inner { animation-delay: 0.7s; }

@keyframes opus-word-reveal {
	from { opacity: 0; transform: translateY(100%); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SERVICE CARDS — cyan top-border sweep on hover
   ============================================================ */
.opus-service-card::after {
	content: '';
	position: absolute; top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--wp--preset--color--nebula-cyan);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.opus-service-card:hover::after { transform: scaleX(1); }

/* ============================================================
   APPROACH CARDS — hover elevation
   ============================================================ */
.opus-approach-card { transition: background 0.3s; }
.opus-approach-card:hover { background: var(--wp--preset--color--navy-elev) !important; }

/* ============================================================
   BOOK A CALL MODAL
   ============================================================ */
#opus-modal {
	position: fixed; inset: 0; z-index: 2000;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none;
	transition: opacity 0.4s;
}
#opus-modal.is-open { opacity: 1; pointer-events: all; }
#opus-modal-bg {
	position: absolute; inset: 0;
	background: rgba(8, 15, 30, 0.88);
	backdrop-filter: blur(16px);
}
#opus-modal-box {
	position: relative; z-index: 1;
	width: 100%; max-width: 560px;
	background: #f4f5f7;
	border: 1px solid #d8dae0;
	padding: 56px 48px;
	transform: translateY(24px) scale(0.97);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#opus-modal.is-open #opus-modal-box { transform: none; }
#opus-modal-close {
	position: absolute; top: 20px; right: 20px;
	background: none; border: none; cursor: none;
	color: var(--wp--preset--color--gray-dim);
	font-size: 22px; line-height: 1;
	transition: color 0.2s;
}
#opus-modal-close:hover { color: var(--wp--preset--color--nebula-cyan); }

.opus-modal-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--wp--preset--color--cyan-dim);
	margin-bottom: 16px;
	display: flex; align-items: center; gap: 10px;
}
.opus-modal-tag::after {
	content: ''; width: 24px; height: 1px;
	background: var(--wp--preset--color--cyan-dim); opacity: 0.6;
	display: block;
}
.opus-modal-h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 36px; font-weight: 500; letter-spacing: -0.03em;
	line-height: 1.05; margin-bottom: 8px;
	color: var(--wp--preset--color--aura-navy);
}
.opus-modal-sub {
	font-size: 14px; color: var(--wp--preset--color--gray-dim);
	line-height: 1.6; margin-bottom: 36px;
}
.opus-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.opus-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.opus-field label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--wp--preset--color--gray-dim);
}
.opus-field input,
.opus-field select,
.opus-field textarea {
	background: #fff;
	border: 1px solid #d8dae0;
	color: var(--wp--preset--color--aura-navy);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px; padding: 12px 16px; outline: none; appearance: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	border-radius: 0;
}
.opus-field input:focus,
.opus-field select:focus,
.opus-field textarea:focus {
	border-color: var(--wp--preset--color--cyan-dim);
	box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.12);
}
.opus-field textarea { resize: none; height: 88px; }
.opus-field select option { background: #fff; color: var(--wp--preset--color--aura-navy); }
.opus-modal-submit {
	width: 100%; margin-top: 8px; padding: 16px;
	background: var(--wp--preset--color--nebula-cyan);
	color: var(--wp--preset--color--aura-navy);
	border: none; cursor: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
	transition: box-shadow 0.3s, transform 0.2s;
	border-radius: 0;
}
.opus-modal-submit:hover {
	box-shadow: 0 0 28px rgba(0, 212, 255, 0.4);
	transform: translateY(-1px);
}
#opus-modal-box.is-wide { max-width: 780px; }

#opus-modal-sent,
#opus-modal-calendar {
	display: none; flex-direction: column; align-items: center;
	gap: 20px; text-align: center; padding: 24px 0;
}
#opus-modal-calendar { text-align: left; align-items: stretch; padding: 8px 0; }
.opus-success-icon {
	width: 52px; height: 52px;
	border: 1px solid var(--wp--preset--color--cyan-dim);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; color: var(--wp--preset--color--cyan-dim);
	animation: opus-scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes opus-scale-in {
	from { transform: scale(0.6); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

/* ============================================================
   BOOK A CALL PAGE
   ============================================================ */
.opus-book-page { min-height: 100vh; }
.opus-book-page-hero {
	padding: 160px 48px 72px;
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.opus-book-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--wp--preset--color--nebula-cyan);
	margin: 0 0 28px; display: flex; align-items: center; gap: 10px;
}
.opus-book-heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(40px, 5.5vw, 80px); font-weight: 500;
	line-height: 0.96; letter-spacing: -0.035em;
	margin: 0 0 28px; color: var(--wp--preset--color--stardust-white);
}
.opus-book-sub {
	font-size: 17px; line-height: 1.6;
	color: var(--wp--preset--color--lunar-gray);
	max-width: 520px; margin: 0;
}
.opus-book-page-body {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	border-top: 1px solid var(--wp--preset--color--navy-line);
	max-width: 1280px; margin: 0 auto; padding: 0 48px 120px;
}
.opus-book-form-col {
	padding: 56px 56px 56px 0;
	border-right: 1px solid var(--wp--preset--color--navy-line);
}
.opus-book-cal-col { padding: 56px 0 56px 56px; }
.opus-book-form-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--wp--preset--color--nebula-cyan);
	margin-bottom: 32px; display: flex; align-items: center; gap: 10px;
}
.opus-book-form-tag::after {
	content: ''; display: block; width: 24px; height: 1px;
	background: var(--wp--preset--color--nebula-cyan); opacity: 0.4;
}
.opus-book-page-submit {
	width: 100%; margin-top: 8px; padding: 16px;
	background: var(--wp--preset--color--nebula-cyan);
	color: var(--wp--preset--color--aura-navy);
	border: none; cursor: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
	transition: box-shadow 0.3s, transform 0.2s; border-radius: 0;
}
.opus-book-page-submit:hover {
	box-shadow: 0 0 28px rgba(0, 212, 255, 0.4); transform: translateY(-1px);
}
.opus-book-form-note {
	font-size: 12px; color: var(--wp--preset--color--gray-dim);
	margin: 12px 0 0; line-height: 1.6;
}
.opus-book-page-sent {
	display: none; flex-direction: column; gap: 16px; padding: 32px;
	border: 1px solid var(--wp--preset--color--navy-line);
	background: rgba(0, 212, 255, 0.04);
}
.opus-book-page-sent.is-visible {
	display: flex;
	animation: opus-scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 900px) {
	.opus-book-page-body { grid-template-columns: 1fr; padding: 0 24px 80px; }
	.opus-book-form-col { padding: 48px 0; border-right: none; border-bottom: 1px solid var(--wp--preset--color--navy-line); }
	.opus-book-cal-col { padding: 48px 0; }
	.opus-book-page-hero { padding: 120px 24px 56px; }
}

/* ============================================================
   ABOUT PAGE — team cards + bio reveal
   ============================================================ */
.opus-about-hero { position: relative; overflow: hidden; }

.opus-team-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

/* Person cards */
.opus-team-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.opus-person-card {
	background: none;
	border: 1px solid var(--wp--preset--color--navy-line);
	padding: 0;
	cursor: none;
	text-align: left;
	position: relative;
	transition: border-color 0.3s;
	will-change: transform;
}
.opus-person-card:hover,
.opus-person-card.is-active {
	border-color: var(--wp--preset--color--nebula-cyan);
}
.opus-person-card.is-active {
	box-shadow: 0 0 32px rgba(0, 212, 255, 0.18);
}

.opus-person-photo-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wp--preset--color--navy-elev);
}
.opus-person-img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.opus-person-card:hover .opus-person-img { transform: scale(1.04); }

/* Fallback placeholder shown when photo not yet uploaded */
.opus-person-photo-placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 48px; font-weight: 500; letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy-line);
}
/* Hide placeholder once real image loads */
.opus-person-img[src*=".jpg"] ~ .opus-person-photo-placeholder,
.opus-person-img[src*=".png"] ~ .opus-person-photo-placeholder,
.opus-person-img[src*=".webp"] ~ .opus-person-photo-placeholder { display: none; }

.opus-person-card-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(12,18,36,0.85) 0%, transparent 55%);
}
.opus-person-info {
	position: absolute; bottom: 0; left: 0; right: 0;
	padding: 20px;
	display: flex; flex-direction: column; gap: 4px;
}
.opus-person-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px; font-weight: 500;
	color: var(--wp--preset--color--stardust-white);
	letter-spacing: -0.02em;
}
.opus-person-role {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--wp--preset--color--gray-dim);
}
.opus-person-cue {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px; letter-spacing: 0.06em;
	color: var(--wp--preset--color--nebula-cyan);
	margin-top: 8px;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s, transform 0.2s;
}
.opus-person-card:hover .opus-person-cue,
.opus-person-card.is-active .opus-person-cue { opacity: 1; transform: translateY(0); }
.opus-person-card.is-active .opus-person-arrow { display: inline-block; transform: rotate(90deg); }
.opus-person-arrow { display: inline-block; transition: transform 0.2s; }

/* Bio area */
.opus-bio-area { position: relative; min-height: 260px; }

.opus-bio {
	display: none;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.opus-bio.is-active {
	display: block;
	opacity: 1;
	transform: translateY(0);
}
.opus-bio-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--wp--preset--color--nebula-cyan);
	margin: 0 0 24px;
	display: flex; align-items: center; gap: 10px;
}
.opus-bio-label::after {
	content: ''; display: block;
	width: 32px; height: 1px;
	background: var(--wp--preset--color--nebula-cyan); opacity: 0.4;
}
.opus-bio-text {
	font-size: 16px; line-height: 1.75;
	color: var(--wp--preset--color--lunar-gray);
	margin: 0 0 20px;
}
.opus-bio-hint {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px; letter-spacing: 0.06em;
	color: var(--wp--preset--color--gray-dim);
	margin: 32px 0 0;
}
.opus-bio-back {
	background: none; border: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px; letter-spacing: 0.06em;
	color: var(--wp--preset--color--gray-dim);
	cursor: none; padding: 0; margin-top: 32px;
	transition: color 0.2s;
}
.opus-bio-back:hover { color: var(--wp--preset--color--nebula-cyan); }

/* Responsive */
@media (max-width: 960px) {
	.opus-team-wrap { grid-template-columns: 1fr; gap: 56px; }
	.opus-bio-area { min-height: auto; }
}
@media (max-width: 600px) {
	.opus-team-cards { grid-template-columns: 1fr 1fr; gap: 16px; }
	.opus-person-name { font-size: 14px; }
}

/* ============================================================
   FAQ PAGE — full animated accordion
   ============================================================ */

/* Hero */
.opus-faq-page-hero {
	position: relative;
	overflow: hidden;
	padding: 160px 48px 100px;
	border-bottom: 1px solid var(--wp--preset--color--navy-line);
}
.opus-faq-page-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto;
}
.opus-faq-page-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.opus-faq-page-bg svg { width: 100%; height: 100%; display: block; }

.opus-faq-page-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--nebula-cyan);
	margin: 0 0 28px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.opus-faq-page-heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(56px, 8vw, 120px);
	font-weight: 500;
	line-height: 0.96;
	letter-spacing: -0.035em;
	margin: 0 0 36px;
	color: var(--wp--preset--color--stardust-white);
}
.opus-faq-page-heading em {
	color: var(--wp--preset--color--nebula-cyan);
	font-style: normal;
}
.opus-faq-page-sub {
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--lunar-gray);
	max-width: 520px;
	margin: 0 0 48px;
}
.opus-faq-page-counter {
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
	border: 1px solid var(--wp--preset--color--navy-line);
	padding: 12px 20px;
}
.opus-faq-count-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 28px;
	font-weight: 500;
	color: var(--wp--preset--color--cosmic-copper);
	letter-spacing: -0.02em;
}
.opus-faq-count-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-dim);
}

/* FAQ list */
.opus-faq-list-section {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 48px 140px;
}

.opus-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--navy-line);
	position: relative;
}
/* Animated left accent line */
.opus-faq-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--nebula-cyan);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.opus-faq-item.is-open::before { transform: scaleY(1); }

.opus-faq-trigger {
	width: 100%;
	background: none;
	border: none;
	padding: 36px 0 36px 24px;
	display: grid;
	grid-template-columns: 64px 1fr 40px;
	align-items: center;
	gap: 24px;
	cursor: none;
	text-align: left;
	transition: background 0.3s;
}
.opus-faq-item.is-open .opus-faq-trigger,
.opus-faq-trigger:hover {
	background: rgba(255,255,255,0.02);
}

.opus-faq-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--cosmic-copper);
	transition: color 0.3s;
	flex-shrink: 0;
}
.opus-faq-item.is-open .opus-faq-num {
	color: var(--wp--preset--color--nebula-cyan);
}

.opus-faq-q {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(17px, 2vw, 22px);
	font-weight: 500;
	color: var(--wp--preset--color--stardust-white);
	letter-spacing: -0.02em;
	line-height: 1.2;
	transition: color 0.3s;
}
.opus-faq-item.is-open .opus-faq-q { color: var(--wp--preset--color--stardust-white); }

/* Plus/minus icon — CSS drawn */
.opus-faq-icon {
	width: 32px;
	height: 32px;
	position: relative;
	flex-shrink: 0;
	justify-self: end;
}
.opus-faq-icon::before,
.opus-faq-icon::after {
	content: '';
	position: absolute;
	background: var(--wp--preset--color--nebula-cyan);
	border-radius: 1px;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}
.opus-faq-icon::before { width: 14px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.opus-faq-icon::after  { width: 1.5px; height: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.opus-faq-item.is-open .opus-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* Answer — CSS grid-template-rows technique (smoothest known method) */
.opus-faq-body-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.opus-faq-item.is-open .opus-faq-body-wrap {
	grid-template-rows: 1fr;
}
.opus-faq-body-inner {
	overflow: hidden;
	padding-left: 112px; /* aligns with question text (64px num + 24px gap + 24px trigger-pad) */
	padding-bottom: 0;
	transition: padding-bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.opus-faq-item.is-open .opus-faq-body-inner {
	padding-bottom: 40px;
}
.opus-faq-body-inner p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--wp--preset--color--lunar-gray);
	margin: 0 0 16px;
	max-width: 680px;
}
.opus-faq-body-inner p:last-child { margin-bottom: 0; }

/* Bottom CTA */
.opus-faq-cta {
	display: flex;
	align-items: center;
	gap: 32px;
	padding-top: 72px;
	flex-wrap: wrap;
}
.opus-faq-cta-text {
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 500;
	color: var(--wp--preset--color--stardust-white);
	margin: 0;
	letter-spacing: -0.02em;
}
.opus-faq-cta-btn {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--aura-navy);
	background: var(--wp--preset--color--nebula-cyan);
	padding: 14px 24px;
	text-decoration: none;
	transition: box-shadow 0.3s, transform 0.2s;
}
.opus-faq-cta-btn:hover {
	box-shadow: 0 0 28px rgba(0, 212, 255, 0.4);
	transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
	.opus-faq-page-hero { padding: 120px 24px 72px; }
	.opus-faq-list-section { padding: 0 24px 100px; }
	.opus-faq-trigger {
		grid-template-columns: 40px 1fr 32px;
		gap: 16px;
		padding: 28px 0 28px 16px;
	}
	.opus-faq-body-inner { padding-left: 72px; }
	.opus-faq-cta { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 480px) {
	.opus-faq-trigger { grid-template-columns: 32px 1fr 28px; gap: 12px; }
	.opus-faq-body-inner { padding-left: 0; padding-right: 0; }
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.opus-faq-item summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	color: var(--wp--preset--color--stardust-white);
	transition: color 0.2s;
}
.opus-faq-item summary::-webkit-details-marker { display: none; }
.opus-faq-item summary::after {
	content: '+';
	font-family: var(--wp--preset--font-family--mono);
	font-size: 20px;
	font-weight: 300;
	color: var(--wp--preset--color--nebula-cyan);
	flex-shrink: 0;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.opus-faq-item[open] summary::after {
	transform: rotate(45deg);
}
.opus-faq-item summary:hover { color: var(--wp--preset--color--nebula-cyan); }
.opus-faq-item[open] summary { color: var(--wp--preset--color--nebula-cyan); }

/* Reduced motion overrides for new effects */
@media (prefers-reduced-motion: reduce) {
	.opus-hero h1 .opus-line-inner {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	#opus-hero-canvas,
	#opus-hero-video { display: none; }
	#opus-cursor, #opus-cursor-ring { display: none; }
	body { cursor: auto; }
}

/* ============================================================
   RESPONSIVE — TABLET & MOBILE
   ============================================================ */

/* Horizontal translateX reveals cause viewport overflow before IntersectionObserver fires.
   Use vertical-only on mobile to prevent horizontal scroll. */
@media (max-width: 768px) {
	.reveal-left  { transform: translateY(30px) !important; }
	.reveal-right { transform: translateY(30px) !important; }
	.reveal-left.in-view,
	.reveal-right.in-view { transform: translateY(0) !important; }
}

/* Touch devices: hide custom cursor */
@media (pointer: coarse) {
	#opus-cursor, #opus-cursor-ring { display: none !important; }
	body { cursor: auto !important; }
	#opus-modal-close,
	.opus-modal-submit,
	#opus-modal-box button { cursor: pointer !important; }
}

/* ── Tablet (≤ 1024px) ───────────────────────────────────── */
@media (max-width: 1024px) {
	header.opus-header {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
	.opus-hero {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
	section.wp-block-group {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
	/* Approach: 4-col → 2×2 */
	#approach .wp-block-columns {
		flex-wrap: wrap !important;
	}
	#approach .wp-block-column {
		flex-basis: calc(50% - 1px) !important;
		min-width: calc(50% - 1px) !important;
	}
}

/* ── Mobile nav toggle + overlay (all breakpoints) ─────── */
#opus-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--wp--preset--color--navy-line);
	padding: 0;
	width: 40px; height: 40px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	flex-shrink: 0;
	z-index: 200;
}
#opus-nav-toggle span {
	display: block;
	width: 18px; height: 1.5px;
	background: var(--wp--preset--color--lunar-gray);
	transition: transform 0.3s, opacity 0.2s;
}
#opus-nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#opus-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
#opus-nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#opus-mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--wp--preset--color--aura-navy);
	z-index: 150;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 40px;
}
#opus-mobile-menu.is-open { display: flex; }
#opus-mobile-menu ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
#opus-mobile-menu a {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(28px, 8vw, 48px);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--stardust-white);
	text-decoration: none;
	transition: color 0.2s;
}
#opus-mobile-menu a:hover { color: var(--wp--preset--color--nebula-cyan); }

#opus-mobile-close {
	position: absolute;
	top: 20px; right: 20px;
	background: none;
	border: 1px solid var(--wp--preset--color--navy-line);
	color: var(--wp--preset--color--lunar-gray);
	width: 40px; height: 40px;
	font-size: 16px;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}

/* ── Mobile (≤ 768px) ────────────────────────────────────── */
@media (max-width: 768px) {

	/* Header */
	header.opus-header {
		padding: 14px 20px !important;
		flex-wrap: nowrap !important;
		gap: 12px !important;
	}
	.opus-nav { display: none !important; }
	#opus-nav-toggle { display: flex; }

	/* Hero */
	.opus-hero {
		padding-top: 110px !important;
		padding-bottom: 72px !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		min-height: auto !important;
	}
	.opus-hero h1 {
		font-size: clamp(42px, 10vw, 80px) !important;
		margin-bottom: 28px !important;
	}
	.opus-hero p[style*="font-size:19px"] {
		font-size: 16px !important;
		margin-bottom: 36px !important;
	}
	/* Stats ticker: 4-col → 2×2 */
	.opus-hero-ticker {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	/* Hero buttons: stack */
	.opus-hero .wp-block-buttons {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	/* All content sections: reduce padding */
	section.wp-block-group {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	section.wp-block-group[style*="padding-top:140px"] {
		padding-top: 72px !important;
	}
	section.wp-block-group[style*="padding-bottom:140px"] {
		padding-bottom: 72px !important;
	}
	section.wp-block-group[style*="padding-top:180px"] {
		padding-top: 80px !important;
	}
	section.wp-block-group[style*="padding-bottom:180px"] {
		padding-bottom: 80px !important;
	}
	section.wp-block-group[style*="padding-bottom:120px"] {
		padding-bottom: 64px !important;
	}

	/* Section headings: allow wrapping, no overflow */
	.wp-block-heading {
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* WP Columns: always stack on mobile */
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-direction: column !important;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column {
		flex-basis: 100% !important;
		min-width: 100% !important;
	}

	/* Service cards: tighten padding, remove fixed height */
	.opus-service-card {
		min-height: auto !important;
		padding-top: 32px !important;
		padding-bottom: 32px !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	/* Approach cards: remove fixed height, fix padding */
	.opus-approach-card { min-height: auto !important; }
	/* Approach: force single column and constrain padding */
	#approach .wp-block-column {
		flex-basis: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}
	#approach .wp-block-columns {
		overflow: hidden !important;
	}

	/* Marquee: smaller text */
	.opus-marquee-track {
		font-size: 18px !important;
		gap: 36px !important;
	}
	.opus-marquee { padding: 20px 0 !important; }

	/* Modal */
	#opus-modal-box {
		box-sizing: border-box !important;
		width: calc(100% - 32px) !important;
		max-width: calc(100% - 32px) !important;
		margin: 0 !important;
		padding: 32px 20px !important;
		max-height: 88vh;
		overflow-y: auto;
	}
	.opus-form-row { grid-template-columns: 1fr !important; }
	.opus-modal-h2 { font-size: 24px !important; }
	#opus-modal-calendar iframe { height: 420px !important; }
}

/* Approach section: clip any inner overflow */
#approach {
	overflow: hidden;
}
/* All columns: never exceed their container */
.wp-block-column {
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
/* Approach inner header row (number + week badge) — wrap on narrow screens */
#approach .wp-block-group[style*="justify-content:space-between"],
#approach .wp-block-group[style*="justify-content: space-between"] {
	flex-wrap: wrap !important;
	gap: 8px !important;
}
/* Global: ensure all paragraphs wrap and don't overflow */
p, li, td {
	overflow-wrap: break-word;
	word-break: break-word;
	max-width: 100%;
}

/* Modal form inputs: prevent them from setting their own width */
.opus-field input,
.opus-field select,
.opus-field textarea {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* ── Small mobile (≤ 480px) ──────────────────────────────── */
@media (max-width: 480px) {

	/* Hide header CTA button — logo + hamburger is enough */
	header.opus-header .wp-block-buttons { display: none !important; }

	/* Hero h1: go smaller still */
	.opus-hero h1 {
		font-size: clamp(38px, 11vw, 60px) !important;
	}

	/* Stats ticker: single column */
	.opus-hero-ticker {
		grid-template-columns: 1fr 1fr !important;
	}

	/* Approach: big step numbers smaller */
	.opus-approach-card p[style*="font-size:56px"] {
		font-size: 40px !important;
	}

	/* Big CTA heading */
	section#contact h2 {
		font-size: clamp(40px, 12vw, 80px) !important;
	}

	/* Footer stack already handled; ensure bottom row stacks */
	.opus-footer-bottom {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}
}