/* ==========================================================================
   Vertwo Premium — Design System
   --------------------------------------------------------------------------
   Fonts, CSS variables, and base typography. Loaded on every page.
   --------------------------------------------------------------------------
   Brand colors and font choices come from the Vertwo build spec.
   Variable names match the prototype's conventions so prototype CSS
   can be ported verbatim with minimal changes.
   ========================================================================== */


/* ─────────────── Fonts ─────────────── */
/* Neue Haas Grotesk Display — Black (900), Bold (700), Roman (400)        */
/* Files live in /assets/fonts/. DM Sans + Inter come from Google Fonts    */
/* via wp_enqueue_style in functions.php.                                  */

@font-face {
	font-family: 'NHG';
	src: url('../fonts/NeueHaasDisplay-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'NHG';
	src: url('../fonts/NeueHaasDisplay-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'NHG';
	src: url('../fonts/NeueHaasDisplay-Roman.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Same files exposed under the longer name so either works */
@font-face {
	font-family: 'NeueHaasGrotesk';
	src: url('../fonts/NeueHaasDisplay-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'NeueHaasGrotesk';
	src: url('../fonts/NeueHaasDisplay-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'NeueHaasGrotesk';
	src: url('../fonts/NeueHaasDisplay-Roman.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


/* ─────────────── CSS Variables ─────────────── */
/* Two naming systems coexist:                                            */
/*  - Short names (--orange, --black) match the prototype's conventions    */
/*  - Prefixed names (--vertwo-orange) avoid collisions if needed          */

:root {
	/* Brand colors — short names (use these in components) */
	--orange:        #F27A0F;
	--gold:          #F5A623;
	--black:         #1A1A1A;
	--white:         #FFFFFF;
	--off:           #F5F5F7;
	--mid:           #697386;
	--line:          #D2D2D7;

	/* v0.32.126 — All eyebrow / kicker text site-wide reads this pink
	   (was var(--orange) previously). Single source of truth: when Vic
	   wants the eyebrow tone shifted, change this one value. The bar
	   under .pg-eyebrow uses a linear-gradient(pink → orange) which
	   the change leaves intact — the orange end of the bar still
	   matches the body accent. */
	--eyebrow:       #f73182;

	/* v0.32.163 — Section-padding rhythm tokens.
	   ──────────────────────────────────────────────
	   Vic flagged inconsistent gap sizing between sections on
	   mobile. These tokens establish a single canonical rhythm
	   for mid-page sections (i.e. not the hero, which has its
	   own navbar-clearance logic). Use them in any new mobile
	   section rules so the spacing stays in sync.

	   Pattern: `padding: var(--vw-section-pad-y-mobile) var(--vw-section-pad-x-mobile);`
	   Hero sections override the Y axis with their own larger
	   value to clear the fixed navbar. */
	--vw-section-pad-y-mobile: 56px;
	--vw-section-pad-x-mobile: 24px;

	/* Same colors with theme prefix (alternate naming) */
	--vertwo-orange:       #F27A0F;
	--vertwo-gold:         #F5A623;
	--vertwo-near-black:   #1A1A1A;
	--vertwo-white:        #FFFFFF;
	--vertwo-footer-dark:  #1d1d1f;

	/* Typography stacks — match prototype.
	   v0.14.0 — 'Noto Sans JP' inserted before generic fallbacks so
	   Japanese characters (kanji/kana) render identically across Mac
	   and Windows. Latin characters still render via NHG (title) or
	   DM Sans/Inter (body); browser only reaches Noto Sans JP when a
	   glyph isn't covered by the preceding fonts. */
	--font-title: 'NHG', 'NeueHaasGrotesk', 'Helvetica Neue', 'Arial Black', 'Arial', 'Noto Sans JP', sans-serif;
	--font-body:  'DM Sans', 'Inter', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
	--font-display: var(--font-title);

	/* Layout constants from prototype */
	--max:        980px;
	--slide-dur:  20s;

	/* Spacing scale */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 8rem;

	/* Breakpoints — for docs only; use same numbers in @media rules */
	--bp-mobile: 520px;
	--bp-tablet: 860px;
}


/* ─────────────── Base reset and typography ─────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* v0.3.1 (Vic feedback): match footer bg so iOS rubber-band overscroll
	   past bottom — and any "behind toolbar" pull-down — doesn't flash white.
	   Body keeps white for content areas; html only shows on overscroll.
	   v0.32.114 — removed from html; moved to body.vw-front so it doesn't
	   leak into the block editor iframe (recent WP auto-update started
	   pulling theme CSS into the editor canvas, turning it dark for Vic). */
	/* v0.4.1 (Vic feedback): lock html horizontal overflow too. body alone
	   isn't enough on iOS Safari — if any child breaks out of its content
	   box (e.g. a hot-reload glitch or wide canvas), the page-level scroller
	   still allows horizontal pan unless html itself is clamped.
	   v0.20.8 — reverted v0.20.7's `clip` experiment (at that point we still
	   thought Oppo was a single-vendor edge case + Lenis was still active
	   in some configs so the symptom didn't move enough to be conclusive).

	   v0.32.8 — re-instated `clip` with the right rationale. Vic's friends
	   reported 2026-05-12 that 4 of 6 Android handsets (Xiaomi, Oppo, 2x
	   Samsung, Galaxy Tab) could not scroll on any page EXCEPT
	   single-vertwo_work. Work Detail already overrides html/body to
	   `overflow-x: clip` (see work-detail.css v0.26.8 sticky-friendliness
	   block) — that override was originally added so position:sticky would
	   engage on .pd-right, but it ALSO silently fixed the Android touch-
	   scroll lock as a side effect.

	   Root cause (CSS-Containment spec): `overflow: hidden` on html/body
	   creates a new scroll context at the document root. Some Android
	   vendor browsers (Xiaomi MIUI, Oppo ColorOS WebView, Samsung Internet
	   on certain builds) route touch scroll inconsistently when the root
	   scroll-context is non-default — document-level touch swipes get
	   silently absorbed. Fixed-position UI (hamburger drawer, back-to-top)
	   still works because those have their own scroll/click contexts.
	   2-finger zoom partially scrolls because zoom changes the visual
	   viewport, bypassing the document-level scroll-context routing.
	   This is the long-running "Oppo scroll bug" parked since v0.19.x.

	   `overflow: clip` provides the same horizontal-overflow suppression
	   but does NOT create a scroll context — exactly the modern fix
	   Vic's v0.26.8 comment recommended. Browser support: Chrome 90+,
	   Safari 16+, Firefox 81+ — well within mobile-first audience.
	   @supports fallback below restores `hidden` for older browsers. */
	overflow-x: clip;
	/* v0.6.2 (Vic feedback): kill rubber-band overscroll on touch devices.
	   overscroll-behavior: none clamps both axes so the page can't be
	   dragged off its anchor point on tablet. */
	overscroll-behavior: none;
	/* v0.6.3 (Vic feedback): touch-action declares which gestures the
	   browser may even interpret. pan-y allows vertical scroll, pinch-zoom
	   keeps accessibility zoom — everything else (horizontal pan, two-finger
	   pan, rotate) is rejected at the gesture-recognizer level. */
	touch-action: pan-y pinch-zoom;
}

body {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--black);
	/* v0.32.114 — `background` moved from body to body.vw-front (rule
	   below). Reason: recent WP auto-update started loading the theme
	   stylesheet into the block editor canvas iframe, and our dark body
	   bg was turning the editor canvas black for Vic. Scoping to a
	   frontend-only class (added via body_class in functions.php) keeps
	   the editor canvas at WP's default white. */
}

/* v0.32.114 — frontend-only dark background.
   The `vw-front` class is added by the vertwo_body_class filter in
   functions.php on any non-admin page request. The block editor's
   canvas iframe body doesn't get this class, so the editor stays at
   WP's default white background even when this stylesheet leaks into
   the iframe. Original (pre-v0.32.114) rule was body { background:
   #1d1d1f } per v0.3.3 — matches footer to avoid the tonal seam at
   overscroll. */
body.vw-front,
html:has(body.vw-front) {
	background: #1d1d1f;
}

body.vw-front {
	line-height: 1.5;
	/* v0.32.8 — `clip` instead of `hidden`. See the html rule above for the
	   full Android-touch-scroll rationale (CSS Containment scroll-context).
	   Mirrored on body because some browsers route overflow off body rather
	   than html depending on quirks mode + CSS-in-frame edge cases. */
	overflow-x: clip;
	/* v0.6.2 — see html rule above. Mirrored on body because some browsers
	   (older WebKit) only honor overscroll-behavior when it's set on the
	   element that actually owns the overflow context, which can be either
	   depending on quirks mode and CSS-in-frame edge cases. Belt + braces. */
	overscroll-behavior: none;
	/* v0.6.3 — see html rule above. Same belt+braces logic for touch-action:
	   declaring it on both html and body ensures whichever element the
	   browser treats as the touch-gesture root respects the lock. */
	touch-action: pan-y pinch-zoom;
}

/* v0.32.8 — pre-2021 fallback. Any browser without `overflow: clip` support
   falls back to the previous `hidden` declaration. Functionally identical
   to pre-v0.32.8 behavior (same Android-touch bug present on those old
   browsers — but their share is microscopic in 2026). Audience is modern
   mobile, so this is a guarded fallback only. */
@supports not (overflow: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-title);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--black);
}

a {
	color: inherit;
	text-decoration: none;
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	font-family: inherit;
	border: none;
	background: none;
	cursor: pointer;
}

input,
textarea {
	font-family: inherit;
}


/* ─────────────── Accessibility helpers ─────────────── */
/* WordPress's standard skip-link in header.php uses .screen-reader-text.
   Without this rule, the link renders as visible inline text at the top
   of <body> and pushes everything below it (including #hero) down by
   ~24px, which on iPhone Safari shows as a black "gap" between the iOS
   status bar and the hero artwork. This pattern is the WP-recommended
   visually-hidden treatment: the link is fully accessible to screen
   readers and keyboard navigation but takes zero visual space. The
   `.skip-link:focus` rule reveals the link when keyboard-focused so
   sighted keyboard users can use it as intended. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background: #fff;
	clip: auto !important;
	clip-path: none;
	color: var(--black);
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 7px;
	width: auto;
	z-index: 100000;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}


/* ─────────────── Step 2 placeholder homepage + light/dark test sections ─────────────── */
/* Temporary styles — kept while we build the rest. Removed in Step 3.    */

/* ── Section 1: light placeholder (white background) ── */
.vertwo-step1-placeholder {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	padding-top: 140px; /* clear the floating nav */
	padding-bottom: var(--space-lg);
	text-align: center;
	background: #FFFFFF;
}

.vertwo-step1-placeholder .logo-mark {
	width: 80px;
	height: auto;
	margin-bottom: var(--space-md);
}

.vertwo-step1-placeholder h1 {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	margin-bottom: var(--space-sm);
}

.vertwo-step1-placeholder h1 em {
	color: var(--orange);
	font-style: normal;
}

.vertwo-step1-placeholder .tagline {
	font-size: 1.125rem;
	color: #666;
	max-width: 540px;
	margin: 0 auto var(--space-lg);
}

.vertwo-step1-placeholder .status-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-sm);
	max-width: 720px;
	width: 100%;
	margin-top: var(--space-md);
}


/* ═══════════════════════════════════════════════════════════════
   v0.32.127 — Site-wide eyebrow finalization
   ───────────────────────────────────────────────────────────────
   Three universal rules that win the cascade by being loaded late
   in design-system.css (which is included on every page).

   1. Remove the "em-dash" bar pseudo-element that several eyebrows
      attached as a typographic kicker. Vic asked for these gone
      site-wide.
   2. Force the eyebrow text color to var(--eyebrow) (pink) on every
      class that contains "eyebrow", catching any per-page rules we
      missed during the v0.32.126 / v0.32.127 sweep. Exception list:
      the hero eyebrow selectors that are deliberately white per the
      v0.32.111 design (vw-hero-eyebrow, pd-hero-eyebrow, nd-hero-
      eyebrow). Those are restored to #fff explicitly below.
   3. Bump eyebrow font-weight to 800 so the kicker text reads more
      prominently (Vic ask).
   ═══════════════════════════════════════════════════════════════ */

[class*="eyebrow"]::before,
.eyebrow::before {
	/* v0.32.127 — Vic ask: remove the leading em-dash bar from every
	   eyebrow. Some per-page eyebrows still draw their own ::before
	   via specific selectors; this !important catches them all in
	   one place. If a future eyebrow specifically wants its dash
	   back, it can override with `[class*="eyebrow"]::before { display:
	   inline-block !important }` on a more specific selector. */
	display: none !important;
}

[class*="eyebrow"]:not(.vw-hero-eyebrow):not(.pd-hero-eyebrow):not(.nd-hero-eyebrow):not(.nh-hero-eyebrow):not(.vb-panel__eyebrow):not(.hero-eyebrow),
.eyebrow {
	/* v0.32.127 — site-wide pink color for every eyebrow, regardless
	   of where its base rule lives or what var/hex token it used. Hero
	   eyebrows that were turned white in v0.32.111 are excluded so
	   they keep their solid-white treatment.
	   v0.32.133 — .vb-panel__eyebrow added to the exclusion list. The
	   brand-story chapter panels emit their eyebrow ("CHAPTER ONE ·
	   BACKGROUND") inside a colored card; pink was clashing with the
	   uploaded chapter images. The underlying page-about.css rule
	   styles it rgba(255,255,255,.85) which is the original v0.21.0
	   look Vic asked to restore.
	   v0.32.162 — `.hero-eyebrow` (the homepage hero slides' eyebrow
	   class) added to the exclusion list. Without this exclusion the
	   `!important` here was overriding every attempt to give the
	   homepage hero eyebrow a non-pink colour, including v0.32.161's
	   `#hero .hero-eyebrow { color: inherit }` and the per-slide ACF
	   `eyebrow_color` inline style. Pink is still the default token
	   site-wide, just not the forced override for the main hero. */
	color: var(--eyebrow) !important;
	/* v0.32.127 → v0.32.129 → v0.32.130 — weight history:
	   800 (v0.32.127, "thicker")
	   500 (v0.32.129, "not bold")
	   650 (v0.32.130, Vic's final spec). 650 is non-canonical — most
	   browsers round to the nearest defined weight in the variable font
	   (600 or 700). With NHG only loaded at 400/700/900, browsers will
	   either render 650 as 700 (which is the Bold cut Vic already
	   confirmed is too heavy) or synthesize an intermediate. Using the
	   value Vic asked for literally; if it still reads too heavy after
	   deploy, the next nudge is 580-600. */
	font-weight: 650 !important;
}

/* v0.32.127 — pin the hero eyebrows back to #fff (the v0.32.111 design),
   in case typography-system.css or any per-page CSS still tries to
   override them.
   v0.32.130 — weight settled at 650 (was 800 / 500 / 650 per Vic's
   tuning history; see history block above the universal rule). */
.vw-hero-eyebrow,
.pd-hero-eyebrow,
.nd-hero-eyebrow,
.nh-hero-eyebrow {
	color: #fff !important;
	font-weight: 650 !important;
}

/* v0.32.127 → v0.32.131 — removed the black-color override block.
   The accent color is now editor-configurable via the Hero Settings
   "Accent color" field; the renderer emits an inline style only when
   the editor picks a custom color. With no inline style, the orange
   default from page-hero.css's .vw-hero-accent rule paints through. */


/* ═══════════════════════════════════════════════════════════════
   v0.32.128 — last-mile eyebrow polish
   ───────────────────────────────────────────────────────────────
   Items v0.32.127's universal rules couldn't reach:
     - eyebrow bars implemented as real DOM children (not ::before
       pseudo-elements) — they slip past the global ::before:none rule.
     - section-title-style "kicker" titles that have ::before bars but
       don't carry "eyebrow" in their class name (e.g. .cr-sched-title).
     - eyebrows that need a COLOR OTHER than pink (e.g. the careers
       FROM-THE-TEAM eyebrow sitting on the orange quote card —
       should be white, not pink).
   ═══════════════════════════════════════════════════════════════ */

/* Testimonials section eyebrow — the bar is .vt-eyebrow__rule, a real
   <span> child rather than a ::before, so the global ::before:none
   rule above doesn't reach it. Hide explicitly. */
.vt-eyebrow__rule { display: none !important; }

/* Hiring schedule heading on the careers page — .cr-sched-title is
   styled as a title (not an "eyebrow"-named class) but visually it
   reads like an eyebrow with a small orange dash before. Vic flagged
   both the dash AND the still-orange tint, so kill the bar and pink
   the title text.
   v0.32.130 — also drop the font-weight from 700 → 650 since this
   reads as an eyebrow visually and Vic wants all eyebrows at 650. */
.cr-sched-title::before { display: none !important; }
.cr-sched-title        {
	color: var(--eyebrow) !important;
	font-weight: 650 !important;
}

/* FROM-THE-TEAM eyebrow on the careers page sits inside the orange
   testimonial quote card. Pink would clash against the orange bg;
   Vic asked for white. Override the universal pink rule and force
   solid white. (We also already hid its ::before via v0.32.127.)
   v0.32.133 — narrowed from `.cr-quote-eyebrow *` (everything inside)
   to `.cr-quote-eyebrow > span` (the text label only). The previous
   wildcard was also catching the .cr-quote-arrow buttons rendered
   inside the same eyebrow container (see page-careers.php line 403:
   <div class="cr-quote-eyebrow"><span>FROM THE TEAM</span><div
   class="cr-quote-controls"><button class="cr-quote-arrow">...).
   That broke the arrow's hover state: the button's :hover rule sets
   color:var(--orange) so the icon shows orange on the white bg, but
   the universal `color:#fff !important` was winning. With the narrow
   selector the arrows behave as designed again. */
.cr-quote-eyebrow,
.cr-quote-eyebrow > span {
	color: #fff !important;
}

/* Homepage clients sub-line — the word "vertwo" inside the body copy
   should render in orange. Editors may type it as plain text or wrap
   it in <em>; this rule colors the em-wrapped case and leaves plain
   text alone. The default content was also patched to wrap "vertwo"
   in <em>vertwo</em> at the markup level. */
.vt-clients__sub em {
	font-style: normal;
	color: var(--orange);
}

/* Increase the vertical gap around the inset section separators on
   the About page (the PATCH 11 hairlines between Programs / Key Persons
   and Key Persons / Team & Culture). Vic flagged on mobile screenshots
   that the gap above + below each line was too tight. Bumping the
   #about-programs bottom padding and the .kp-section top/bottom
   padding on small viewports. */
@media (max-width: 700px) {
	#about-programs { padding-bottom: clamp(80px, 12vw, 120px) !important; }
	#key-persons .kp-section {
		padding-top:    clamp(72px, 11vw, 96px) !important;
		padding-bottom: clamp(80px, 12vw, 112px) !important;
	}
}


/* v0.32.129 — VMV card eyebrows (.card__eyebrow on the three VMV cards)
   were getting painted pink by the universal eyebrow rule above (their
   class name "card__eyebrow" matches [class*="eyebrow"]). Vic wants
   them white on the dark VMV cards. Using #vmv ancestor for specificity
   so this only applies inside the VMV section — other .card__eyebrow
   usage (if any future component reuses the class) keeps the default
   pink eyebrow color. */
#vmv .card__eyebrow {
	color: rgba(255, 255, 255, 0.85) !important;
}
#vmv .card__eyebrow::before {
	/* The leading dash bar on VMV card eyebrows — match the new color
	   so it doesn't stay pink when the text is white. */
	background: rgba(255, 255, 255, 0.85) !important;
}

.vertwo-step1-placeholder .status-card {
	background: #f7f7f7;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	padding: var(--space-sm);
	text-align: left;
}

.vertwo-step1-placeholder .status-card .label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #888;
	margin-bottom: 4px;
}

.vertwo-step1-placeholder .status-card .value {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: 1rem;
	color: var(--black);
}

.vertwo-step1-placeholder .status-card.ok .value {
	color: #1f9d55;
}

.vw-scroll-hint {
	margin-top: var(--space-lg);
	font-size: 0.85rem;
	color: #999;
	letter-spacing: 0.04em;
	animation: vw-bob 2.4s ease-in-out infinite;
}

@keyframes vw-bob {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50%      { transform: translateY(6px); opacity: 1; }
}


/* ── Section 2: dark mode test (data-bg="dark") ── */
.vw-test-dark {
	min-height: 100vh;
	background: #0a0a0a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg) var(--space-md);
}

.vw-test-inner {
	max-width: 680px;
	text-align: center;
}

.vw-test-dark h2 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin-bottom: var(--space-md);
	color: #fff;
}

.vw-test-light h2 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin-bottom: var(--space-md);
	color: var(--black);
}

.vw-eyebrow {
	font-size: 0.72rem;
	font-weight:800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: var(--space-sm);
}

.vw-eyebrow-orange {
	color: var(--eyebrow);
}

.vw-body {
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: var(--space-sm);
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}

.vw-body-dark {
	color: #444;
}

.vw-body strong {
	color: var(--orange);
	font-weight: 700;
}

.vw-body code {
	background: rgba(255, 255, 255, 0.08);
	padding: 2px 8px;
	border-radius: 5px;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.9em;
	color: var(--gold);
}

.vw-body-dark code {
	background: #f0f0f0;
	color: var(--orange);
}

.vw-dim {
	opacity: 0.55;
	font-style: italic;
	margin-top: var(--space-md);
}

/* ── Section 3: light mode test (back to white) ── */
.vw-test-light {
	min-height: 100vh;
	background: #FFFFFF;
	color: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg) var(--space-md);
}


/* ==========================================================================
   v0.32.41 — <em> brand convention (universal)
   --------------------------------------------------------------------------
   Editors mark accent words with <em> across every CMS / CPT text field.
   By default browsers render <em> italic, which Vic doesn't want — he
   wants <em> to mean "color this word in the brand orange":

     • Default everywhere: upright, orange. NOT italic.
     • In body / prose / caption / sub / blockquote / list contexts,
       <em> renders BOLD (700) on top of the default upright orange.
       The boost in weight is what makes the accent visible against
       body text where the base weight is 300–400.
     • Title contexts (h1–h4 + title-class scoped rules) inherit from
       the universal default — they get upright orange, then the
       parent heading's own font-weight (typically 900) propagates
       into the <em> automatically. No per-title override needed
       anymore (existing per-title `em { font-style:normal; color:
       var(--orange) }` rules in typography-system.css / page-about.css
       / works-archive.css continue to work and now act as
       belt-and-braces).

   Any caller that explicitly wants italic <em> (e.g. .cr-quote-body em
   on careers, which is also white + underlined as a quote treatment)
   already overrides with higher specificity. The cascade resolves
   correctly without needing changes elsewhere.
   ========================================================================== */

em {
	font-style: normal;
	color: var(--orange);
}

p em,
li em,
dd em,
blockquote em,
.ai-prose em,
.vmv-caption em,
.tc-caption em,
.kp-caption em,
.ms-caption em,
.pm-body em,
.pmo-body em,
.wg-body em,
.vt-header__sub em,
.vt-clients__sub em,
.wwu-sub em,
.faq-a em,
.fc-caption em,
[class*="-body"] em,
[class*="-sub"] em,
[class*="-caption"] em,
[class*="-prose"] em,
[class*="-desc"] em,
[class*="-lede"] em {
	font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════
   v0.32.159 — Hairline separator block style
   ───────────────────────────────────────────────────────────────
   New variant for `core/separator`. Registered via
   register_block_style() in functions.php (init hook). Renders a
   single 1px line at the brand --hairline colour, full-width by
   default but capped at 720px to match the typographic content
   column. Pair this with the "Hairline" option in the block-style
   picker inside the editor.
   ═══════════════════════════════════════════════════════════════ */
.wp-block-separator.is-style-vw-hairline {
	/* Reset WP's default thick-line / dotted styling. */
	border: 0;
	height: 1px;
	background: var(--hairline, rgba(0,0,0,0.08));
	max-width: 720px;
	width: 100%;
	margin: 32px auto;
	opacity: 1;
	/* Override WP's default opacity on separators which makes the
	   line read fainter than our other hairline borders. */
}

/* On dark backgrounds (e.g. inside .pd-hero or any data-bg="dark"
   parent), use a light-on-dark hairline. */
[data-bg="dark"] .wp-block-separator.is-style-vw-hairline,
.is-dark-bg .wp-block-separator.is-style-vw-hairline {
	background: rgba(255,255,255,0.14);
}

/* ═══════════════════════════════════════════════════════════════
   v0.32.215 — GLOBAL mobile compositor-memory guard (Vic: pinch-zoom
   crashes the page on about / careers / works / home / contact, but
   NOT services / news / work-details — which tracked exactly with how
   many persistent `will-change` / forced-layer rules each page carries).

   Root cause: `will-change:transform` (and bare `translateZ(0)` /
   `backface-visibility:hidden`) used as PERMANENT properties pin a GPU
   compositor layer for the life of the element. That's fine for a few
   animating things, but the theme uses them decoratively on dozens of
   static elements per page. When the user pinch-zooms, Safari must
   re-rasterize EVERY pinned layer at the higher scale at once → blows
   the renderer memory budget → "a problem repeatedly occurred".

   `will-change` is only a HINT; resetting it to `auto` removes the
   permanent pin with ZERO visual change — the browser still promotes an
   element automatically for the duration of a real transition/animation
   (that's what will-change was trying to pre-empt). So on touch devices
   we globally release these hints. Desktop keeps the full treatment.

   Scoped to touch via (hover:none),(pointer:coarse) so desktop hover/
   parallax animations that genuinely benefit from pre-promotion are
   unaffected. Uses a broad selector but only touches the will-change
   PROPERTY — layout, paint, and animations are all unchanged. */
@media (hover: none), (pointer: coarse) {
  /* will-change is the big one. backface-visibility:hidden is the other
     standalone layer-forcer the theme uses decoratively; resetting it to
     the default `visible` is layout-safe (nothing here depends on hiding a
     3D backface) and releases those layers too. We deliberately do NOT
     touch `transform` globally — many elements use it for positioning. */
  *, *::before, *::after {
    will-change: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  /* v0.32.216 — THE actual zoom-crash cause. Every page that crashed on
     pinch-zoom (about / careers / works / home / contact) carries huge
     decorative blurred "blob" background layers — filter:blur(70px) up to
     blur(140px) on viewport-sized colored shapes. Pinch-zoom forces Safari
     to re-rasterize each of these enormous blurred surfaces at the zoomed
     scale, which detonates the renderer memory budget. The survivor pages
     (services* / news / work-details) have far fewer/smaller ones.
     *services-hero shares .ah-bg, hence it's listed but was lighter overall.

     Fix: on touch, drop the blur entirely on these ambience layers. They're
     soft background color washes — without the heavy blur they read as
     slightly crisper color blobs, which on a phone is essentially invisible,
     and the GPU cost falls by orders of magnitude. (Removing the blur also
     un-promotes the layer, compounding the win.) Desktop keeps full blur. */
  .ah-bg, .nh-bg, .vw-hero-bg,
  .pf-bg-blob, .bk-blob,
  #cr-hero, #cr-hero::before, #cr-hero::after,
  #vmv::after, #brand-story::before,
  #milestones::after, #milestones::before,
  #work-with-us .wwu-bg, .wwu-blob,
  .ah-blob, .ah-blob--a, .ah-blob--b, .ah-blob--c {
    filter: none !important;
    -webkit-filter: none !important;
  }
}