/* ============================================================
   Relay360 v2 — WordPress / Astra glue.
   Not design — gets the host theme out of the way and adds the
   mobile drawer + burger (which the static bundle doesn't include).
   ============================================================ */

/* --- Suppress the host theme's own header/footer; only v2 chrome renders --- */
#masthead, #colophon,
.ast-above-header-wrap, .ast-below-header-wrap,
.site-header, .site-footer { display: none !important; }

/* --- Astra: full-bleed, paper background --- */
.ast-container, .site-content > .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; }
#page .site-content { padding: 0; margin: 0; }
.ast-separate-container, .ast-separate-container #content .ast-container { background: transparent; padding: 0; }
body, .site, #page { background: var(--paper); }
.ast-separate-container .ast-article-single { padding: 0; border: 0; }
.site-content main { width: 100%; max-width: 100%; flex: 1 1 100%; }
.site-content #primary { width: 100%; max-width: 100%; }
#page { display: block; }

/* --- Elementor: full-bleed; the design's .wrap owns the 1320 measure --- */
.e-con, .e-con-inner { max-width: 100%; }
.elementor-widget-container { color: inherit; }
.e-con.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.elementor-element { --widgets-spacing: 0px; }

/* --- Admin bar offset for the fixed header --- */
.admin-bar .v2-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .v2-header { top: 46px; } }

/* --- Mobile burger (shown <900px) — not in the bundle --- */
.v2-burger { display: none; }
@media (max-width: 900px) {
	.v2-header .v2-nav { display: none; }
	.v2-burger {
		display: inline-flex; flex-direction: column; gap: 5px; width: 34px; padding: 8px 0;
		background: none; border: 0; cursor: pointer; margin-left: auto; color: inherit;
	}
	.v2-burger span { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .24s, opacity .2s; }
	.v2-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
	.v2-burger.is-open span:nth-child(2) { opacity: 0; }
	.v2-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* --- Mobile off-canvas drawer (obsidian) — not in the bundle --- */
.v2-drawer {
	position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px);
	background: var(--obsidian); color: var(--on-dark);
	transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
	z-index: 9990; display: flex; flex-direction: column; gap: 2px;
	padding: 104px 32px 40px; overflow-y: auto;
}
.v2-drawer.is-open { transform: translateX(0); }
.v2-drawer .lk {
	font-family: var(--sans); font-weight: 500; font-size: 24px; letter-spacing: -0.02em;
	text-transform: none; opacity: 1; color: var(--on-dark);
	padding: 15px 0; border-bottom: 1px solid var(--on-dark-hairline); display: block;
}
.v2-drawer .lk:hover, .v2-drawer .lk.is-active { color: var(--accent); }
.v2-drawer .v2-cta { margin-top: 26px; align-self: flex-start; }
.v2-drawer-backdrop {
	position: fixed; inset: 0; background: rgba(11,11,11,.55);
	opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 9989;
}
.v2-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
body.v2-drawer-open { overflow: hidden; }
@media (min-width: 901px) { .v2-drawer, .v2-drawer-backdrop { display: none; } }

/* Dark sections: headings must be light. The host theme (Astra/Elementor) forces
   a dark slate (#1E293B) onto all heading tags, overriding the section's on-dark
   colour — leaving dark-on-dark headings (e.g. the .cell h4s). Force on-dark. */
.sec.dark h1, .sec.dark h2, .sec.dark h3, .sec.dark h4, .sec.dark h5, .sec.dark h6 { color: var(--on-dark); }

/* The PHP-templated v2 pages — insights/blog index (home.php), single articles
   (single.php), taxonomy + CPT archives, search, 404 — echo raw v2 <section>s
   straight into Astra's content container, which is display:flex;flex-direction:row,
   so the sections render side-by-side. Force a full-width block so they stack.
   Elementor `page` contexts are full-width and untouched (not in this list). */
body.blog .ast-container,
body.single .ast-container,
body.archive .ast-container,
body.search .ast-container,
body.error404 .ast-container { display: block !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.blog .site-content,
body.single .site-content,
body.archive .site-content,
body.search .site-content,
body.error404 .site-content { padding: 0 !important; }

/* ============================================================
   Reduced-motion safety net (v2 QA polish).
   home.js already guards reveals/parallax/cursor, and home.css forces
   reveals visible under reduced motion. This block is belt-and-suspenders:
   it guarantees content end-states are visible regardless of CSS load
   order, and stills the always-on ambient loops (marquee, hero word
   cycle) that home.js does not gate. Purely additive.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	/* Force every scroll-reveal to its visible end-state. */
	.reveal.will-reveal,
	.will-reveal.stagger > *,
	.reveal.will-reveal .kw > span,
	.clip-lines.will-reveal span > i {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	/* Stop the ambient marquee + hero word-cycle from animating. */
	.marquee .track { transform: none !important; }
	.hero--a .cycle > span { transition: none !important; }
}

/* ============================================================
   WPForms — restyle the plugin output to the v2 dark contact form
   (scoped to .contact-form-wrap on the dark #contact section).
   ============================================================ */
.contact-form-wrap .wpforms-container {
	margin: 0;
	/* Theme WPForms' modern markup via its own CSS variables (dark section). */
	--wpforms-label-color: var(--on-dark-mute);
	--wpforms-label-sublabel-color: var(--on-dark-mute);
	--wpforms-label-error-color: var(--accent);
	--wpforms-field-text-color: var(--on-dark);
	--wpforms-field-border-color: var(--on-dark-hairline);
	--wpforms-field-background-color: transparent;
	--wpforms-field-border-radius: 0px;
	--wpforms-button-background-color: var(--accent);
	--wpforms-button-text-color: #fff;
	--wpforms-button-border-radius: 0px;
}
.contact-form-wrap .wpforms-form { display: flex; flex-direction: column; }
.contact-form-wrap .wpforms-field { padding: 0; margin: 26px 0 0; }
.contact-form-wrap .wpforms-field:first-of-type { margin-top: 0; }
.contact-form-wrap .wpforms-field-label {
	font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--on-dark-mute) !important; font-weight: 400; margin: 0 0 10px; display: block; line-height: 1.4;
}
.contact-form-wrap .wpforms-required-label { color: var(--accent) !important; }
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap textarea {
	background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--on-dark-hairline) !important;
	color: var(--on-dark) !important; font-family: var(--sans); font-size: 17px; padding: 8px 0; width: 100%;
	border-radius: 0 !important; box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
.contact-form-wrap input::placeholder, .contact-form-wrap textarea::placeholder { color: var(--on-dark-mute); opacity: 1; }
.contact-form-wrap input:focus, .contact-form-wrap textarea:focus { outline: 0; border-bottom-color: var(--accent) !important; box-shadow: none !important; }
.contact-form-wrap textarea { min-height: 92px; resize: vertical; }

/* Intent chips (radio field, .r360-chips) */
.contact-form-wrap .r360-chips .wpforms-field-label { margin-bottom: 14px; }
.contact-form-wrap .r360-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.contact-form-wrap .r360-chips li { margin: 0 !important; padding: 0; position: relative; }
.contact-form-wrap .r360-chips input { position: absolute; opacity: 0; pointer-events: none; }
.contact-form-wrap .r360-chips label.wpforms-field-label-inline {
	font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--on-dark); border: 1px solid var(--on-dark-hairline); border-radius: 999px;
	padding: 9px 16px; cursor: pointer; margin: 0; display: inline-block; font-weight: 400;
	transition: background .2s, border-color .2s, color .2s; color: var(--on-dark) !important;
}
.contact-form-wrap .r360-chips li:hover label.wpforms-field-label-inline { border-color: var(--on-dark-mute); }
.contact-form-wrap .r360-chips input:checked + label.wpforms-field-label-inline,
.contact-form-wrap .r360-chips li.wpforms-selected label.wpforms-field-label-inline { background: var(--accent); border-color: var(--accent); color: #fff !important; }

/* Submit → the v2 .magnet button: sharp rectangle, mono uppercase, accent. */
.contact-form-wrap .wpforms-submit-container { margin-top: 30px; }
.contact-form-wrap button.wpforms-submit {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 12px;
	width: auto !important; height: auto !important; min-height: 0 !important; line-height: 1 !important;
	background: var(--accent) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important;
	font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 17px 26px !important; cursor: pointer; transition: background .2s; box-shadow: none !important;
}
.contact-form-wrap button.wpforms-submit::after { content: "\2192"; display: inline-block; line-height: 1; transition: transform 0.3s var(--ease); }
.contact-form-wrap button.wpforms-submit:hover::after { transform: translateX(6px); }
.contact-form-wrap button.wpforms-submit:hover { background: #e6431f !important; }

/* Errors */
.contact-form-wrap .wpforms-error { color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; margin-top: 8px; }
.contact-form-wrap input.wpforms-error, .contact-form-wrap textarea.wpforms-error { border-bottom-color: var(--accent) !important; }

/* Confirmation message */
.wpforms-confirmation-container-full { background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--on-dark); margin: 0 !important; }
.wpforms-confirmation-container-full .r360-confirm-h { font-family: var(--sans); font-weight: 500; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.02em; color: var(--on-dark); margin: 0; max-width: 14ch; }
.wpforms-confirmation-container-full p { color: var(--on-dark); margin-top: 16px; max-width: 38ch; font-size: 17px; line-height: 1.5; }

/* ============================================================
   Talk-to-us modal — global obsidian card wrapping the contact form,
   rendered in the footer, opened from any contact CTA (v2-wp.js).
   ============================================================ */
.v2-modal-backdrop { position: fixed; inset: 0; background: rgba(11, 11, 11, 0.66); opacity: 0; visibility: hidden; transition: opacity 0.3s; z-index: 9995; }
.v2-modal-backdrop.is-open { opacity: 1; visibility: visible; }
.v2-modal {
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -47%);
	width: min(92vw, 560px); max-height: 90vh; overflow-y: auto;
	background: var(--obsidian); color: var(--on-dark); border: 1px solid var(--on-dark-hairline);
	z-index: 9996; padding: 46px 44px;
	opacity: 0; visibility: hidden; transition: opacity 0.32s, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.v2-modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.v2-modal h2.big { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.04; }
.v2-modal .wpforms-container { margin-top: 0; }
.v2-modal-close {
	position: absolute; top: 14px; right: 20px; background: none; border: 0; color: var(--on-dark);
	font-size: 30px; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, color 0.2s; z-index: 1;
}
.v2-modal-close:hover { opacity: 1; color: var(--accent); }
body.v2-modal-open { overflow: hidden; }
/* reCAPTCHA badge hidden site-wide — attribution shown inline in the modal */
.grecaptcha-badge { visibility: hidden; }
@media (max-width: 560px) {
	.v2-modal { width: 100vw; height: 100%; max-height: 100%; top: 0; left: 0; transform: none; border: 0; padding: 54px 20px 32px; }
	.v2-modal textarea { min-height: 72px; }
	.v2-modal h2.big { font-size: 26px; }
	.v2-modal.is-open { transform: none; }
}

/* ============================================================
   FAQ accordion ({{RELAY360_FAQ:*}} blocks) — editorial hairline rows,
   mono index, plus→minus mark. Native <details> so it needs no JS.
   ============================================================ */
.faq-list { border-top: 1px solid var(--hairline); max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
	display: flex; align-items: baseline; gap: 26px; cursor: pointer;
	padding: 26px 4px; list-style: none; -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .fq-idx { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); flex: 0 0 auto; }
.faq-item .fq-q { font-family: var(--sans); font-weight: 500; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -0.01em; flex: 1 1 auto; transition: color 0.2s; }
.faq-item summary:hover .fq-q { color: var(--accent); }
.faq-item .fq-mark { position: relative; width: 14px; height: 14px; flex: 0 0 auto; align-self: center; }
.faq-item .fq-mark::before, .faq-item .fq-mark::after {
	content: ""; position: absolute; inset: auto; left: 0; top: 50%; width: 14px; height: 1.5px;
	background: currentColor; transition: transform 0.25s;
}
.faq-item .fq-mark::after { transform: rotate(90deg); }
.faq-item[open] .fq-mark::after { transform: rotate(0deg); }
.faq-item .fq-a { padding: 0 4px 30px calc(26px + 18px); max-width: 72ch; }
.faq-item .fq-a p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--mute); }
@media (max-width: 640px) {
	.faq-item summary { gap: 14px; padding: 20px 0; }
	.faq-item .fq-a { padding-left: 0; }
}

/* CTA cell completing a 3-step .steps-v grid (AISA pilot section) — turns the
   empty 4th grid track into the next step. Opens the Talk-to-us modal. */
.steps-v .step-go { background: var(--accent); color: #fff; display: block; text-decoration: none; transition: opacity 0.2s; }
.steps-v .step-go .sn, .steps-v .step-go h4 { color: #fff; }
.steps-v .step-go p { color: rgba(255, 255, 255, 0.85); }
.steps-v .step-go:hover { opacity: 0.92; }

/* Mobile: breadcrumb links are 17px tall — pad the hit area without moving
   the layout (negative margins cancel the padding visually). */
@media (max-width: 760px) {
	.crumb a { display: inline-block; padding: 10px 7px; margin: -10px -7px; }
}

/* Astra's blue scroll-to-top bubble is off-brand — v2 has no floating chrome. */
#ast-scroll-top { display: none !important; }

/* ============================================================
   Consent banner — obsidian card, bottom-left, v2 voice.
   ============================================================ */
#r360-consent { position: fixed; left: 18px; bottom: 18px; right: 18px; z-index: 9997; }
#r360-consent .r360-consent-card {
	max-width: 420px; background: var(--obsidian); color: var(--on-dark);
	border: 1px solid var(--on-dark-hairline); padding: 22px 24px;
}
#r360-consent p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
#r360-consent .r360-consent-actions { display: flex; align-items: center; gap: 12px; }
#r360-consent button {
	font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 11px 18px; cursor: pointer; border: 0;
}
#r360-consent .rc-accept { background: var(--accent); color: #fff; }
#r360-consent .rc-decline { background: transparent; color: var(--on-dark); border: 1px solid var(--on-dark-hairline); }
#r360-consent a { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--on-dark-mute); margin-left: auto; }
/* Don't compete with the Talk-to-us modal — one obsidian surface at a time. */
body.v2-modal-open #r360-consent { display: none; }

/* ============ 404 (.err) — styles for 404.php, house dark surface ============ */
.err { background: var(--obsidian); color: var(--paper); min-height: 82vh; display: flex; align-items: center; padding: 140px 0 90px; }
.err .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.err .code { font-weight: 700; font-size: clamp(110px, 20vw, 260px); line-height: 0.95; letter-spacing: -0.04em; }
.err .code .deg { color: var(--accent); }
.err .links { display: flex; flex-direction: column; margin-top: 10px; }
.err .links a { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 16px 2px; border-top: 1px solid var(--on-dark-hairline); color: var(--on-dark); font-size: 17px; text-decoration: none; transition: color 0.2s ease; }
.err .links a:last-child { border-bottom: 1px solid var(--on-dark-hairline); }
.err .links a .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--on-dark-mute); white-space: nowrap; }
.err .links a:hover { color: var(--accent); }
.err .links a:hover .k { color: var(--accent); }
@media (max-width: 760px) {
  .err { padding: 120px 0 70px; min-height: 70vh; }
  .err .grid { grid-template-columns: 1fr !important; gap: 40px; }
}

/* Team page founder grid: stack on phones/tablets (inline grid-template needs !important to beat it) */
@media (max-width: 820px) {
  .team-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .team-grid .fcell { max-width: 380px; }
}