/*
Theme Name: Valor
Theme URI: https://valorconsulting.example/
Author: Valor Consulting
Author URI: https://valorconsulting.example/
Description: Block theme carrying the Valor design system (navy / mint / paper, Sora / Public Sans / IBM Plex Mono). Presentation only - the 2-minute check funnel and lead capture live in the Valor Azure Funnel plugin, so functionality survives theme changes. Content is built from editable block patterns, not hardcoded.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valor
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, one-column, business
*/

/* Block themes are styled through theme.json + block markup. This file carries the
   theme header (required) plus a few escape-hatch rules for things theme.json does not
   yet cover. Keep additions here minimal - prefer theme.json. */

/* ── Hero "Azure" aurora ─────────────────────────────────────────────────────────────────────
   Two layers (ported from the compiled bundle v2.1): a blurred radial GLOW behind a clipped
   drifting GRADIENT. valor-hero.js wanders auroraX (glow background + text background-position move
   together, long eased transitions) and breathes the glow opacity. JS off → centered static gradient. */
.valor-aurora {
	position: relative;
	display: inline-block;
}

.valor-aurora__glow {
	position: absolute;
	inset: -14px -22px;
	border-radius: 50%;
	background: radial-gradient(65% 95% at 50% 50%, rgba(56, 182, 255, 0.34), rgba(45, 127, 249, 0.15) 45%, rgba(123, 200, 174, 0) 75%);
	opacity: 0.5;
	filter: blur(20px);
	pointer-events: none;
	transition: background 3000ms ease, opacity 2400ms ease;
}

.valor-aurora-text {
	position: relative;
	background: linear-gradient(100deg, #38b6ff, #2d7ff9, #4fc3f7, #7bc8ae, #38b6ff);
	background-size: 300% 100%;
	background-position: 50% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transition: background-position 3200ms ease;
}

/* Cycling headline word — holds, dips out (translateY up + fade), the next phrase rises in. Driven
   by valor-hero.js; static styles + transition here. JS off → server-rendered final phrase shows. */
.valor-cycling-word {
	display: inline-block;
	white-space: nowrap;
	color: #ffffff;
	transition: opacity 550ms ease, transform 550ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.valor-aurora__glow,
	.valor-aurora-text,
	.valor-cycling-word {
		transition: none;
	}
}

/* Eyebrow pill — slate chip with the signature mint 3px hard offset-shadow (design census). */
.valor-eyebrow {
	display: inline-block;
	width: fit-content;
	line-height: normal; /* prod parity: chip box is font-normal, not body 1.6 */
	margin: 0 0 24px;
	padding: 7px 14px;
	background: #233d6e;
	color: #ffffff;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 6px;
	box-shadow: 3px 3px 0 #7bc8ae;
}

/* The eyebrow declares its own 24px bottom gap; the constrained-layout blockGap was ADDING to it,
   so the badge sat too far from the headline. Zero the heading's auto top-margin so the gap equals
   the eyebrow's 24px — matching prod (whose eyebrow is margin-bottom:24px, headline margin-top:0). */
.valor-hero .valor-eyebrow + .wp-block-heading {
	margin-top: 0;
}

/* Long-hero badge variant — navy (#1C2C44), per prod (the short hero uses slate #233D6E). */
.valor-eyebrow--navy {
	margin: 0 0 22px;
	padding: 8px 15px;
	background: #1c2c44;
	border-radius: 7px;
}

/* Hero two-column grid — auto-fit so it stacks on phones (matches the bundle's minmax grid). */
/* The chart column centres its card to match the reference (display:flex; justify-content:center). */
.valor-hero__chartcol {
	justify-content: center;
}
.valor-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

/* The hero CTA is a self-contained wp:html block (.valor-cta-hero <a> with its own scoped <style>
   in front-page.html); no theme rule is needed here. */

/* The front-page header + hero are both dark; remove the root-layout top gap on <main> so the
   light body background doesn't show as a cream seam between them. Likewise zero the gap before the
   footer (the long page's last section → footer) so the body bg never shows as a seam. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Full-bleed sections (e.g. #stamps at 100vw) must not cause horizontal scroll. overflow:clip
   prevents it WITHOUT breaking the sticky header — clip is not a scroll container (unlike hidden). */
.wp-site-blocks {
	overflow-x: clip;
}

/* The header template-part wrapper (<header class="wp-block-template-part">) is the direct child of
   .wp-site-blocks. position:sticky must live HERE — the inner .valor-nav-* sits in a wrapper only as
   tall as the bar, so sticky on the inner has no room and scrolls away. The inner keeps the bg/blur. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 50;
	margin-block-start: 0;
}

/* Smooth in-page navigation for the CTA anchor jumps (#check etc.) — prod glides rather than snapping.
   Disabled under reduced-motion. The 84px scroll-margin below keeps targets clear of the sticky nav. */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Anchor-scroll targets clear the sticky header so the landing top isn't tucked underneath it
   (the "Start the 2-minute check" / hero / footer CTAs jump to #check — a dedicated anchor sitting
   directly above the #valor-funnel section, so they land on the actual 2-minute check). */
#check,
#valor-funnel,
#scenario,
#book {
	scroll-margin-top: 84px;
}

/* ── Long-version hero CTAs — prod parity (decoded long bundle) ───────────────────────────────
   These are WP core buttons on the long page (.valor-cta-hero / .valor-cta-text wrappers around
   a.wp-element-button). Styled at the TYPE level so theme.json's generic button :hover no longer
   governs them. !important guards against WP's has-*-color utility classes (which are !important). */
.valor-cta-hero .wp-element-button {
	background: #233d6e !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(35, 61, 110, 0.25);
	transition: all 150ms;
}
.valor-cta-hero .wp-element-button:hover,
.valor-cta-hero .wp-element-button:focus-visible {
	background: #edeae2 !important;
	color: #233d6e !important;
	box-shadow: inset 0 0 0 2px #233d6e;
	transform: translateY(-2px);
}
/* "How our share works" — a borderless underline TEXT link in prod, not a filled button. */
.valor-cta-text .wp-element-button {
	background: transparent !important;
	color: #1c2c44 !important;
	border: 0 !important;
	border-bottom: 2px solid #7bc8ae !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: all 150ms;
}
.valor-cta-text .wp-element-button:hover {
	color: #7bc8ae !important;
	border-bottom-width: 3px !important;
	background: rgba(123, 200, 174, 0.18) !important;
	transform: none;
}
/* Prod gives keyboard focus the colour + thicker underline but NOT the bg tint (unesc-long.html line 666). */
.valor-cta-text .wp-element-button:focus-visible {
	color: #7bc8ae !important;
	border-bottom-width: 3px !important;
	transform: none;
}

/* "Punch" offset shadow utility for tiles/cards placed via patterns. */
.valor-punch {
	box-shadow: 6px 6px 0 #7BC8AE;
}

/* Scroll narrative — sections rise + fade as they enter view. Default = revealed (no-JS / old
   browser safe). Primary: CSS scroll-driven; fallback: IntersectionObserver (valor-reveal.js). */
@supports (animation-timeline: view()) {
	.valor-has-scroll-timeline .valor-reveal {
		animation: valor-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 28%;
	}
}

html.valor-reveal-js .valor-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.valor-reveal-js .valor-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@keyframes valor-rise {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.valor-has-scroll-timeline .valor-reveal,
	html.valor-reveal-js .valor-reveal,
	html.valor-reveal-js .valor-reveal.is-revealed {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Hero copy measure — moved out of inline styles: core/paragraph cannot round-trip a max-width
   through the editor (it was silently dropped on re-save), so the width lives here instead. */
.valor-hero-lede { max-width: 500px; }
.valor-hero-note { max-width: 480px; }

/* --------------------------------------------------------------------------
   Deal in 12 seconds (pattern valor/deal — native core blocks).
   The styling that used to live in the pattern's scoped <style>; classes carry
   the exact look so the copy itself is plain, editor-editable rich text.
   line-height/letter-spacing are pinned because the elements are now h3/p and
   would otherwise inherit theme.json heading styles (0.8/-0.02em) instead of
   the body flow the original divs inherited.
   -------------------------------------------------------------------------- */
.valor-deal { box-sizing: content-box; max-width: 1140px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) clamp(16px, 4vw, 32px) clamp(20px, 3vw, 28px); }
.valor-deal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(20px, 3vw, 36px); }
/* WP flow layout injects margin-block-start:24px on non-first group children; grid items
   don't margin-collapse, so cells 2/3 sat 24px low (measured on staging vs prod). */
.valor-deal .valor-deal-grid > * { margin: 0; }
.valor-deal-num { font-family: var(--wp--preset--font-family--sora), 'Sora', sans-serif; font-size: clamp(40px, 5vw, 56px); font-weight: 800; color: rgba(237, 234, 226, 0.18); line-height: 1; margin: 0; }
.valor-deal-title { font-family: var(--wp--preset--font-family--sora), 'Sora', sans-serif; font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: #FFFFFF; margin: 10px 0 4px; display: inline-block; padding-bottom: 4px; line-height: normal; letter-spacing: normal; }
.valor-deal-title--1 { border-bottom: 4px solid #4470C4; }
.valor-deal-title--2 { border-bottom: 4px solid #EDEAE2; }
/* Mint under "You keep" — the mark's own grammar: mint is what the client keeps. */
.valor-deal-title--3 { border-bottom: 4px solid #7BC8AE; }
.valor-deal-desc { font-size: 15px; line-height: 1.6; color: rgba(237, 234, 226, 0.65); margin: 12px 0 0; }

/* --------------------------------------------------------------------------
   Long-version FAQ (pattern valor/long-faq — native core blocks).
   Moved from the pattern's scoped <style>; the accordion chevron moved from a
   child span onto summary::after because core/details summaries hold plain
   rich text. line-heights are pinned to the values the old divs inherited
   (icon 1.6 keeps the 69px row height; title 1.6 vs theme.json heading 1.12).
   -------------------------------------------------------------------------- */
.vl-longfaq__section { background: #FFFFFF; border-top: 1px solid #E3E1D8; border-bottom: 1px solid #E3E1D8; }
.vl-longfaq__inner { box-sizing: content-box; max-width: 860px; margin: 0 auto; padding: clamp(52px, 7vw, 84px) clamp(16px, 4vw, 32px); }
.vl-longfaq__label { display: table; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; background: #233D6E; padding: 7px 14px; border-radius: 6px; box-shadow: 3px 3px 0 #7BC8AE; margin: 0 auto 20px; }
.vl-longfaq__title { font-family: 'Sora', sans-serif; font-size: clamp(26px, 4vw, 36px); font-weight: 700; color: #1C2C44; margin: 0 0 36px; text-align: center; letter-spacing: -0.015em; line-height: 1.6; }
.vl-longfaq__list { border-top: 1px solid #E3E1D8; margin: 0; }
/* margin: 0 also kills WP's injected flow-gap margin between rows (measured 24px on staging). */
details.vl-longfaq__item { border-bottom: 1px solid #E3E1D8; margin: 0; }
details.vl-longfaq__item > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 4px; cursor: pointer; font-size: 16px; font-weight: 700; color: #1C2C44; line-height: 1.4; }
details.vl-longfaq__item > summary::-webkit-details-marker { display: none; }
details.vl-longfaq__item > summary:hover { background: #FAFAF7; }
details.vl-longfaq__item > summary::after { content: '+'; font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 800; color: #233D6E; flex-shrink: 0; line-height: 1.6; }
details.vl-longfaq__item[open] > summary::after { content: '\2212'; }
.vl-longfaq__a { font-size: 14.5px; line-height: 1.7; color: #4D586B; padding: 0 40px 22px 4px; margin: 0; }

/* Prod parity: stamps are font-normal line boxes (16px at 12px mono), not body 1.6. */
.valor-stamp { line-height: normal; }

/* ==========================================================================
   P12 native-block conversions — section CSS moved verbatim from each
   pattern's scoped <style>, followed by parity pins (box-sizing, flow-gap
   margin kills, div->p margin resets). One block per section, page order.
   ========================================================================== */

/* ---- P12: whobehind ---- */
/* --------------------------------------------------------------------------
   Who's behind Valor (pattern valor/who-behind — native core blocks, P12).
   Verbatim carry-over of the pattern's former scoped <style>, followed by the
   inline styles that lived on the converted div/span elements (declarations
   verbatim, now on .valor-whobehind__* classes), then the parity pins.
   -------------------------------------------------------------------------- */

/* Former <style> block — every selector/declaration verbatim, order kept. */
.valor-whobehind__pill { display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:rgba(237,234,226,0.85);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.16);border-radius:999px;padding:8px 14px;white-space:nowrap; }
.valor-whobehind__link { transition:text-decoration 150ms; }
.valor-whobehind__link:hover { text-decoration:underline;text-underline-offset:3px; }

/* Inline styles moved off the converted elements (declarations verbatim). */
.valor-whobehind { border-top:1px solid rgba(237,234,226,0.08);background:#0E1B30; }
.valor-whobehind__inner { max-width:1140px;margin:0 auto;padding:clamp(36px,5vw,52px) clamp(16px,4vw,32px);display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap; }
.valor-whobehind__copy { max-width:540px; }
.valor-whobehind__label { font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:#7BC8AE;line-height:normal;margin-bottom:10px; }
.valor-whobehind__title { font-family:'Sora',sans-serif;font-size:clamp(20px,3vw,26px);font-weight:700;color:#FFFFFF;line-height:1.2;margin-bottom:8px; }
.valor-whobehind__body { font-size:13.5px;line-height:1.6;color:rgba(237,234,226,0.62); }
.valor-whobehind__pills { display:flex;flex-direction:column;gap:9px; }

/* pinned for native-block parity (P12) */
.valor-whobehind { box-sizing: content-box; } /* old root div computed content-box; wp-block-group is border-box */
.valor-whobehind .valor-whobehind__inner { box-sizing: content-box; } /* max-width:1140px + clamp() padding must add outside the width, as the old div did */
.valor-whobehind .valor-whobehind__label { margin: 0 0 10px; } /* div -> p: zero UA paragraph margins, keep the original 10px bottom */
.valor-whobehind .valor-whobehind__title { margin: 0 0 8px; } /* div -> p: zero UA paragraph margins, keep the original 8px bottom */
.valor-whobehind .valor-whobehind__body { margin: 0; } /* div -> p: old div had no margins */
.valor-whobehind .valor-whobehind__pill { margin: 0; } /* span -> p: the pills column's flex gap (9px) is the only spacing */

/* ---- P12: howitworks ---- */
/* --------------------------------------------------------------------------
   Long — How it works (pattern valor/long-how-it-works — native core blocks).
   Moved verbatim from the pattern's scoped <style>; selectors, declarations
   and order unchanged.
   -------------------------------------------------------------------------- */
.vl-howitworks {
	background: #FFFFFF;
	border-bottom: 1px solid #E3E1D8;
}
.vl-howitworks__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(52px, 7vw, 84px) clamp(16px, 4vw, 32px);
}
.vl-howitworks__eyebrow {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-bottom: 20px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: #1C2C44;
	padding: 7px 14px;
	border-radius: 6px;
	box-shadow: 3px 3px 0 #7BC8AE;
}
.vl-howitworks__title {
	font-family: 'Sora', sans-serif;
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 700;
	color: #1C2C44;
	margin: 0 0 14px;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-align: right;
}
.vl-howitworks__intro {
	font-size: clamp(14.5px, 2vw, 16.5px);
	line-height: 1.65;
	color: #4D586B;
	max-width: 660px;
	margin: 0 0 40px auto;
	text-align: right;
}
.vl-howitworks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}
.vl-howitworks__card {
	border-top: 4px solid #233D6E;
	padding-top: 20px;
	transition: all 200ms;
}
.vl-howitworks__card:hover {
	transform: translateY(-3px);
}
.vl-howitworks__step {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	font-weight: 800;
	color: #233D6E;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.vl-howitworks__heading {
	font-family: 'Sora', sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: #1C2C44;
	margin-bottom: 8px;
}
.vl-howitworks__body {
	font-size: 14px;
	line-height: 1.6;
	color: #4D586B;
}

/* pinned for native-block parity (P12) */
/* Old divs computed content-box; wp-block-group computes border-box, which would shave the
   inner's horizontal padding (up to 64px) out of the 1200px content width. */
.vl-howitworks { box-sizing: content-box; }
.vl-howitworks .vl-howitworks__inner { box-sizing: content-box; }
/* Converted div -> p/group leaves had computed margin 0 on every side the class doesn't set.
   Pin explicitly (double-class beats UA <p> margins and Gutenberg's zero-specificity
   :where(.is-layout-flow) first/last + block-gap rules) so nothing leaks in. The title/intro
   classes already declare full margin shorthands and need no pin; the h2 was a real h2 before
   and its class sets all of font-family/size/weight/line-height/letter-spacing, so theme.json
   heading element styles never win. Card heading/step stayed paragraphs (not headings) so they
   keep inheriting body Public Sans line-height 1.6 exactly as the old divs did. */
.vl-howitworks__inner .vl-howitworks__eyebrow { margin-top: 0; margin-right: 0; }
.vl-howitworks__inner .vl-howitworks__grid { margin: 0; }
.vl-howitworks__grid .vl-howitworks__card { margin: 0; }
.vl-howitworks__card .vl-howitworks__step { margin: 0 0 8px; }
.vl-howitworks__card .vl-howitworks__heading { margin: 0 0 8px; }
.vl-howitworks__card .vl-howitworks__body { margin: 0; }

/* ---- P12: whynotdiy ---- */
    .vl-whynotdiy {
      background: #1C2C44;
    }
    .vl-whynotdiy__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: clamp(52px, 7vw, 84px) clamp(16px, 4vw, 32px);
    }
    .vl-whynotdiy__badge {
      display: inline-block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #1C2C44;
      background: #EDEAE2;
      padding: 7px 14px;
      border-radius: 6px;
      box-shadow: 3px 3px 0 #7BC8AE;
      margin-bottom: 20px;
    }
    .vl-whynotdiy__title {
      font-family: 'Sora', sans-serif;
      font-size: clamp(26px, 4vw, 38px);
      font-weight: 700;
      color: #FFFFFF;
      margin: 0 0 14px;
      line-height: 1.15;
      letter-spacing: -0.015em;
      max-width: 760px;
    }
    .vl-whynotdiy__lede {
      font-size: clamp(14.5px, 2vw, 16.5px);
      line-height: 1.65;
      color: rgba(255,255,255,0.7);
      max-width: 680px;
      margin: 0 0 40px;
    }
    .vl-whynotdiy__lede strong {
      color: #7BC8AE;
    }
    .vl-whynotdiy__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
    }
    .vl-whynotdiy__card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 16px;
      padding: 26px 28px;
      transition: all 200ms;
    }
    .vl-whynotdiy__card:hover {
      background: rgba(255,255,255,0.1);
      transform: translateY(-3px);
    }
    .vl-whynotdiy__num {
      font-family: 'Sora', sans-serif;
      font-size: 22px;
      font-weight: 800;
      color: #7BC8AE;
      margin-bottom: 10px;
      line-height: 1;
    }
    .vl-whynotdiy__cardhead {
      font-family: 'Sora', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 8px;
    }
    .vl-whynotdiy__cardbody {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255,255,255,0.7);
    }
    .vl-whynotdiy__note {
      margin-top: 22px;
      background: rgba(123,200,174,0.1);
      border: 1px solid rgba(123,200,174,0.35);
      border-radius: 12px;
      padding: 16px 22px;
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255,255,255,0.85);
    }
    .vl-whynotdiy__note strong {
      color: #7BC8AE;
    }

    /* pinned for native-block parity (P12) */
    /* wp-block-group computes border-box; the original divs computed content-box
       (the __inner max-width + padding geometry depends on it). */
    .vl-whynotdiy { box-sizing: content-box; }
    .vl-whynotdiy .vl-whynotdiy__inner { box-sizing: content-box; }
    /* div -> p conversions: pin margins to what the old divs computed (0 unless the
       class set one) so theme/browser paragraph margins can't leak in, and pin the
       body-inherited line-height 1.6 where the class sets none (badge chip, cardhead). */
    .vl-whynotdiy .vl-whynotdiy__badge { margin: 0 0 20px; line-height: 1.6; }
    .vl-whynotdiy .vl-whynotdiy__num { margin: 0 0 10px; }
    .vl-whynotdiy .vl-whynotdiy__cardhead { margin: 0 0 8px; line-height: 1.6; }
    .vl-whynotdiy .vl-whynotdiy__cardbody { margin: 0; }
    .vl-whynotdiy .vl-whynotdiy__note { margin: 22px 0 0; }

/* ---- P12: fineprint ---- */
/* ── Long — Fine print / Methodology (valor/long-fine-print) ──────────────────────────────────
   Moved verbatim from the pattern's former inline <style> (P12 native-block conversion). */
.vl-fineprint{max-width:1200px;margin:0 auto;padding:clamp(52px,7vw,84px) clamp(16px,4vw,32px);}
.vl-fineprint *{box-sizing:border-box;}
.vl-fineprint__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,5vw,56px);align-items:start;}
.vl-fineprint__eyebrow{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:#FFFFFF;background:#233D6E;padding:7px 14px;border-radius:6px;box-shadow:3px 3px 0 #7BC8AE;margin-bottom:20px;}
.vl-fineprint__h2{font-family:'Sora',sans-serif;font-size:clamp(26px,4vw,36px);font-weight:700;color:#1C2C44;margin:0 0 14px;line-height:1.15;letter-spacing:-0.015em;}
.vl-fineprint__lead{font-size:clamp(14.5px,2vw,16px);line-height:1.65;color:#4D586B;margin:0 0 18px;}
.vl-fineprint__note{font-size:14px;line-height:1.6;color:#878D99;margin:0;}
.vl-fineprint__steps{display:flex;flex-direction:column;gap:13px;}
.vl-fineprint__step{background:#FFFFFF;border:1px solid #E3E1D8;border-radius:14px;padding:20px 24px;display:flex;gap:16px;transition:all 200ms;}
.vl-fineprint__step:hover{transform:translateX(4px);border-color:#233D6E;}
.vl-fineprint__num{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:800;color:#FFFFFF;background:#233D6E;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.vl-fineprint__step-title{font-size:15.5px;font-weight:700;color:#1C2C44;margin-bottom:4px;}
.vl-fineprint__step-body{font-size:14px;line-height:1.6;color:#4D586B;}
/* pinned for native-block parity (P12) */
.vl-fineprint { box-sizing: content-box; } /* old root div computed content-box; wp-block-group is border-box — keeps the 1200px + padding geometry */
.vl-fineprint .vl-fineprint__eyebrow { margin: 0 0 20px; } /* div -> p: kill UA paragraph margins, keep the class's 20px gap */
.vl-fineprint .vl-fineprint__num { margin: 0; } /* span -> p: UA paragraph margins would shift the flex row (class declares none) */
.vl-fineprint .vl-fineprint__step-title { margin: 0 0 4px; } /* div -> p: pin UA margins away, keep the 4px gap to the body */
.vl-fineprint .vl-fineprint__step-body { margin: 0; } /* div -> p: UA top margin would open a gap under the title */
/* flow-gap kills: grid columns + flex step rows carry no declared margins */
.vl-fineprint .vl-fineprint__grid { margin-top: 0; }
.vl-fineprint .vl-fineprint__grid > .wp-block-group { margin: 0; }
.vl-fineprint .vl-fineprint__steps { margin: 0; }
.vl-fineprint .vl-fineprint__step { margin: 0; }

/* ---- P12: budgetflip ---- */
.vl-budgetflip {
	background: #7BC8AE;
}
.vl-budgetflip * {
	box-sizing: border-box;
}
.vl-budgetflip__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(44px, 6vw, 64px) clamp(16px, 4vw, 32px);
}
.vl-budgetflip__eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: #1C2C44;
	padding: 7px 14px;
	border-radius: 6px;
	box-shadow: 3px 3px 0 #233D6E;
	margin-bottom: 20px;
	display: block;
	width: fit-content;
	margin-left: auto;
}
.vl-budgetflip__title {
	font-family: 'Sora', sans-serif;
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 700;
	color: #142E27;
	margin: 0 0 14px auto;
	line-height: 1.15;
	max-width: 760px;
	letter-spacing: -0.015em;
	text-align: right;
}
.vl-budgetflip__lede {
	font-size: clamp(14.5px, 2vw, 16.5px);
	line-height: 1.65;
	color: #1F4438;
	max-width: 660px;
	margin: 0 0 36px auto;
	text-align: right;
}
.vl-budgetflip__lede strong {
	color: #142E27;
}
.vl-budgetflip__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
.vl-budgetflip__card {
	background: rgba(255,255,255,0.55);
	border: 1px solid rgba(28,44,68,0.16);
	border-radius: 14px;
	padding: 24px 26px;
	transition: all 200ms;
}
.vl-budgetflip__card:hover {
	background: rgba(255,255,255,0.82);
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(20,46,39,0.18);
}
.vl-budgetflip__num {
	font-family: 'Sora', sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #142E27;
}
.vl-budgetflip__cardtitle {
	font-size: 14.5px;
	font-weight: 700;
	color: #142E27;
	margin: 4px 0 6px;
}
.vl-budgetflip__cardtext {
	font-size: 13.5px;
	line-height: 1.55;
	color: #2E5246;
}
.vl-budgetflip__note {
	font-size: 12.5px;
	color: #1F4438;
	margin-top: 16px;
	text-align: right;
}

/* pinned for native-block parity (P12) */
.vl-budgetflip { box-sizing: content-box; }
.vl-budgetflip .vl-budgetflip__eyebrow { margin: 0 0 20px auto; }
.vl-budgetflip__card .vl-budgetflip__num { margin: 0; }
.vl-budgetflip__card .vl-budgetflip__cardtext { margin: 0; }
.vl-budgetflip__inner .vl-budgetflip__note { margin: 16px 0 0; }

/* ---- P12: casestudy ---- */
    .vl-casestudy {
      background: #FFFFFF;
      border-top: 1px solid #E3E1D8;
      border-bottom: 1px solid #E3E1D8;
    }
    .vl-casestudy__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: clamp(52px, 7vw, 84px) clamp(16px, 4vw, 32px);
    }
    .vl-casestudy__eyebrow {
      display: inline-block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #FFFFFF;
      background: #233D6E;
      padding: 7px 14px;
      border-radius: 6px;
      box-shadow: 3px 3px 0 #7BC8AE;
      margin-bottom: 20px;
    }
    .vl-casestudy__h2 {
      font-family: 'Sora', sans-serif;
      font-size: clamp(26px, 4vw, 38px);
      font-weight: 700;
      color: #1C2C44;
      margin: 0 0 14px;
      line-height: 1.15;
      letter-spacing: -0.015em;
    }
    .vl-casestudy__lead {
      font-size: clamp(14.5px, 2vw, 16px);
      line-height: 1.65;
      color: #4D586B;
      max-width: 700px;
      margin: 0 0 36px;
    }
    .vl-casestudy__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 28px;
      align-items: stretch;
    }
    .vl-casestudy__chartcard {
      background: #FAFAF7;
      border: 1px solid #EEECE4;
      border-radius: 16px;
      padding: clamp(18px, 3vw, 28px);
    }
    .vl-casestudy__charthead {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 18px;
      gap: 10px;
      flex-wrap: wrap;
    }
    .vl-casestudy__charttitle {
      font-size: 14px;
      font-weight: 700;
      color: #1C2C44;
    }
    .vl-casestudy__chartrange {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11.5px;
      font-weight: 700;
      color: #878D99;
    }
    .vl-casestudy__bars {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 190px;
    }
    .vl-casestudy__bar {
      flex: 1;
      background: #233D6E;
      border-radius: 2px 2px 0 0;
      min-height: 3px;
    }
    .vl-casestudy__axis {
      display: grid;
      grid-template-columns: 12fr 12fr 6fr;
      margin-top: 8px;
      border-top: 1px solid #EEECE4;
      padding-top: 8px;
    }
    .vl-casestudy__axislabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      color: #878D99;
    }
    .vl-casestudy__col {
      display: flex;
      flex-direction: column;
      gap: 13px;
    }
    .vl-casestudy__statrow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 13px;
    }
    /* Result STAT tiles are read-only metric displays (number + label, no link/handler). They keep
       the signature mint hard-offset "punch" shadow as a static stamp, but must NOT lift/grow on
       hover — that button affordance made them read as clickable. cursor stays default (affordance audit). */
    .vl-casestudy__stat {
      background: #1C2C44;
      border-radius: 14px;
      padding: 18px 20px;
      box-shadow: 4px 4px 0 #7BC8AE;
    }
    .vl-casestudy__stat--blue {
      box-shadow: 4px 4px 0 #5B86D8;
    }
    .vl-casestudy__statnum {
      font-family: 'Sora', sans-serif;
      font-size: 30px;
      font-weight: 800;
      color: #7BC8AE;
    }
    .vl-casestudy__statnum--blue {
      color: #9FBCEC;
    }
    .vl-casestudy__statlabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.7);
      margin-top: 3px;
    }
    .vl-casestudy__done {
      background: #FAFAF7;
      border: 1px solid #EEECE4;
      border-radius: 14px;
      padding: 18px 22px;
      flex: 1;
    }
    .vl-casestudy__donetitle {
      font-size: 13px;
      font-weight: 700;
      color: #1C2C44;
      margin-bottom: 8px;
    }
    .vl-casestudy__donetext {
      font-size: 13.5px;
      line-height: 1.7;
      color: #4D586B;
    }
    .vl-casestudy__note {
      font-size: 12.5px;
      color: #878D99;
      line-height: 1.6;
    }
/* pinned for native-block parity (P12) */
/* old divs computed content-box; wp-block-group computes border-box — pin the wrapper geometry
   (max-width + horizontal padding must add, as before) */
.vl-casestudy { box-sizing: content-box; }
.vl-casestudy__inner { box-sizing: content-box; }
/* div -> wp:paragraph conversions: kill the UA <p> margins the old divs never had; keep the
   class-declared offsets. Double-class for specificity over element/layout defaults. */
.vl-casestudy .vl-casestudy__eyebrow { margin: 0 0 20px; }
.vl-casestudy .vl-casestudy__charttitle { margin: 0; }
.vl-casestudy .vl-casestudy__chartrange { margin: 0; }
.vl-casestudy .vl-casestudy__axislabel { margin: 0; }
.vl-casestudy .vl-casestudy__statnum { margin: 0; }
.vl-casestudy .vl-casestudy__statlabel { margin: 3px 0 0; }
.vl-casestudy .vl-casestudy__donetitle { margin: 0 0 8px; }
.vl-casestudy .vl-casestudy__donetext { margin: 0; }
.vl-casestudy .vl-casestudy__note { margin: 0; }

/* ---- P12: whoweare ---- */
/* --------------------------------------------------------------------------
   Long — Who we are (pattern valor/long-who-we-are — native core blocks).
   Moved verbatim from the pattern's scoped <style>.
   -------------------------------------------------------------------------- */
.vl-whoweare {
	background: #FFFFFF;
	border-top: 1px solid #E3E1D8;
	border-bottom: 1px solid #E3E1D8;
}
.vl-whoweare * {
	box-sizing: border-box;
}
.vl-whoweare__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(52px, 7vw, 84px) clamp(16px, 4vw, 32px);
}
.vl-whoweare__eyebrow {
	display: inline-block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: #233D6E;
	padding: 7px 14px;
	border-radius: 6px;
	box-shadow: 3px 3px 0 #7BC8AE;
	margin-bottom: 20px;
}
.vl-whoweare__title {
	font-family: 'Sora', sans-serif;
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 700;
	color: #1C2C44;
	margin: 0 0 14px;
	line-height: 1.15;
	letter-spacing: -0.015em;
	max-width: 760px;
}
.vl-whoweare__lede {
	font-size: clamp(14.5px, 2vw, 16.5px);
	line-height: 1.65;
	color: #4D586B;
	max-width: 680px;
	margin: 0 0 40px;
}
.vl-whoweare__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
	margin-bottom: 28px;
}
.vl-whoweare__card {
	background: #FAFAF7;
	border: 1px solid #EEECE4;
	border-radius: 16px;
	padding: 26px 28px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
}
.vl-whoweare__avatar {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #1C2C44;
	color: #7BC8AE;
	font-family: 'Sora', sans-serif;
	font-size: 21px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 3px 3px 0 #7BC8AE;
}
.vl-whoweare__name {
	font-family: 'Sora', sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: #1C2C44;
	min-height: 2.6em;
	min-height: 2lh;
}
.vl-whoweare__role {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #2E9B78;
	margin: 3px 0 10px;
	/* Reserve two lines so the cred copy below starts at the same height on every card,
	   whether the role line wraps (SE card) or not (AZ card). Same for the name above. */
	min-height: 2.9em;
	min-height: 2lh;
}
.vl-whoweare__cred {
	font-size: 13.5px;
	line-height: 1.6;
	color: #4D586B;
	margin-bottom: 12px;
}
.vl-whoweare__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 700;
	color: #233D6E;
	text-decoration: none;
}
.vl-whoweare__link:hover {
	color: #2E9B78;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.vl-whoweare__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.vl-whoweare__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #233D6E;
	background: #FFFFFF;
	border: 1.5px solid #C9D4E8;
	border-radius: 999px;
	padding: 8px 14px;
}
.vl-whoweare__check {
	color: #2E9B78;
}
.vl-whoweare__note {
	font-size: 12.5px;
	color: #878D99;
	margin-top: 16px;
}

/* pinned for native-block parity (P12) */
/* Old root div computed box-sizing: content-box (.vl-whoweare * only hits descendants);
   .wp-block-group is border-box via block-library. No width/padding on the root today,
   but pinned so the geometry contract matches the original exactly. */
.vl-whoweare { box-sizing: content-box; }
/* div/span → wp:paragraph conversions: the old leaf divs/spans had margin 0 unless the
   class declared one; as <p> they'd pick up UA paragraph margins (and flow-layout
   :where() first/last zeroing only covers the edges). Double-class rules pin each
   converted leaf's full margin box to the original computed values. Elements whose
   class already declares a full margin shorthand (title, lede, role) need no pin;
   line-heights are untouched — p inherits body 1.6 exactly as the old divs/spans did. */
.vl-whoweare .vl-whoweare__eyebrow { margin: 0 0 20px; }
.vl-whoweare .vl-whoweare__avatar { margin: 0; }
.vl-whoweare .vl-whoweare__name { margin: 0; }
.vl-whoweare .vl-whoweare__cred { margin: 0 0 12px; }
.vl-whoweare .vl-whoweare__chip { margin: 0; }
.vl-whoweare .vl-whoweare__note { margin: 16px 0 0; }
/* measured on staging: WP flow-layout injects margin-block-start on non-first group children */
.vl-whoweare .vl-whoweare__card { margin: 0; }
.vl-whoweare .vl-whoweare__card > .wp-block-group { margin: 0; }
.vl-whoweare .vl-whoweare__link { margin: 0; }
.vl-whoweare .vl-whoweare__grid { margin-top: 0; }
.vl-whoweare .vl-whoweare__chips { margin-top: 0; }

/* ---- P12 round-2 pins: remaining flow-gap carriers measured on staging ---- */
.vl-fineprint .vl-fineprint__step > .wp-block-group { margin: 0; }
.vl-whynotdiy .vl-whynotdiy__grid { margin-top: 0; }
.vl-whynotdiy .vl-whynotdiy__card { margin-top: 0; }
.vl-casestudy .vl-casestudy__grid { margin-top: 0; }
.vl-casestudy .vl-casestudy__bars { margin-top: 0; }
.vl-casestudy .vl-casestudy__col { margin-top: 0; }
.vl-casestudy .vl-casestudy__stat { margin-top: 0; }
.vl-casestudy .vl-casestudy__done { margin-top: 0; }
.vl-budgetflip .vl-budgetflip__grid { margin-top: 0; }
.vl-budgetflip .vl-budgetflip__card { margin-top: 0; }
/* whobehind: the inner flexbox's children (text column + pills) carry no margins by design. */
.valor-whobehind .valor-whobehind__inner > * { margin-top: 0; }

/* --------------------------------------------------------------------------
   Gated islands (booking picker, secure upload) render display:none children
   inside their valor-reveal wrapper groups. The wrappers themselves stay in
   flow at height 0, and their injected flow margins (blockGap) paint a bare
   24px page-background strip — visible as a cream band above the long-page
   footer. Collapse the wrapper while its island is gated; the selector stops
   matching the moment view.js lifts is-gated, so the reveal flow is unchanged.
   -------------------------------------------------------------------------- */
.wp-block-group:has(> .valor-booking.is-gated),
.wp-block-group:has(> .valor-upload.is-gated) {
	display: none;
}

/* --------------------------------------------------------------------------
   Hero CTA hover annotation — the hand-drawn mint arrow that points onto
   "Azure savings" (restored; the gold "potential" word it once accompanied
   stays removed). Shared by both hero CTAs: the anchor carries an empty
   .valor-cta-pot span between "your" and "Azure", and the arrow is drawn by
   the tip's ::after (a data-URI SVG — survives core/button validation).
   -------------------------------------------------------------------------- */
.valor-cta-pot { position: relative; }
.valor-cta-pot__tip { position: absolute; bottom: calc(100% + 19px); left: 50%; transform: translateX(-86%); display: flex; align-items: flex-end; opacity: 0; transition: opacity 400ms ease; pointer-events: none; }
.valor-cta-hero:hover .valor-cta-pot__tip, .valor-cta-hero:focus-within .valor-cta-pot__tip { opacity: 1; }
.valor-cta-pot__tip--css-arrow::after { content: ''; width: 38px; height: 38px; margin-bottom: -27px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cpath d='M2 5 C 15 1, 29 9, 32 27' fill='none' stroke='%237BC8AE' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M26.8 24 L32.6 28.8 L34.4 21.6' fill='none' stroke='%237BC8AE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }