/* Inter / Open Sans are loaded via <link> tags enqueued in functions.php
   (presentationgurus_assets), not an @import here — @import blocks the
   browser's preload scanner from discovering the font request until this
   whole file is fetched and parsed, which delays the swap and makes it more
   visually jarring on the hero's huge text. */

/* The :root custom-property block (--brand, --site-bg, --alt-bg-1/2/3,
   --button-bg/text, --body-*/--eyebrow-*/--h1..h4-* typography vars, plus
   backward-compat aliases --ink/--brand/--paper/--white/--mist/--brand-dark/
   --brand-dark/--ink-2) is generated by presentationgurus_design_tokens_css()
   in inc/design-tokens.php and injected via wp_add_inline_style() right
   after this file — see Settings > Design Tokens in wp-admin. Nothing here
   defines those values directly anymore. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--body-font);
	font-size: var(--body-size);
	font-weight: var(--body-weight);
	letter-spacing: var(--body-letter-spacing);
	word-spacing: var(--body-word-spacing);
	color: var(--body-color);
	background: var(--site-bg);
	line-height: var(--body-line-height);
	overflow-x: hidden;
}
/* Neutralize WordPress's default global-styles padding/margin on template parts
   and the root block container — our own patterns manage their own spacing. */
.wp-site-blocks, .wp-block-template-part, .wp-block-post-content, main.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
}
h1 { font-family: var(--h1-font); font-weight: var(--h1-weight); margin: 0; letter-spacing: var(--h1-letter-spacing); word-spacing: var(--h1-word-spacing); font-size: var(--h1-size); line-height: var(--h1-line-height); color: var(--h1-color); }
h2 { font-family: var(--h2-font); font-weight: var(--h2-weight); margin: 0; letter-spacing: var(--h2-letter-spacing); word-spacing: var(--h2-word-spacing); font-size: var(--h2-size); line-height: var(--h2-line-height); color: var(--h2-color); }
h3 { font-family: var(--h3-font); font-weight: var(--h3-weight); margin: 0; letter-spacing: var(--h3-letter-spacing); word-spacing: var(--h3-word-spacing); font-size: var(--h3-size); line-height: var(--h3-line-height); color: var(--h3-color); }
h4 { font-family: var(--h4-font); font-weight: var(--h4-weight); margin: 0; letter-spacing: var(--h4-letter-spacing); word-spacing: var(--h4-word-spacing); font-size: var(--h4-size); line-height: var(--h4-line-height); color: var(--h4-color); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 3rem; }
.section { padding: 8rem 0; }
@media (max-width: 860px) { .wrap { padding: 0 1.5rem; } .section { padding: 4.5rem 0; } }

/* Baseline styling for plain WordPress Pages/Posts (page.html) — content
   typed directly into the block editor with no custom shortcode/pattern.
   Everything above this point styles our hand-built sections, which manage
   their own width/spacing via .wrap and so are exempt from the
   main.wp-block-group reset a few lines up; this re-applies real padding
   and readable typography specifically for that plain-content case. */
main.wp-block-group.pg-page-content {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 5rem 3rem !important;
}
main.wp-block-group.pg-page-content > .wp-block-post-title {
	font-family: 'Open Sans', sans-serif;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	text-transform: none;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 1.75rem;
}
.pg-has-custom-hero main.wp-block-group.pg-page-content > .wp-block-post-title { display: none; }
.single-white_paper main.wp-block-group.pg-page-content > .wp-block-post-title { color: #2195D0; } /* darkened from var(--brand)/#249EDC — was 2.72:1 on #f4f4f4, needed 3:1 for this large-text size */
/* Green only near the top (roughly the first viewport), fading to the
   normal paper background beyond that — not a solid green page. Applied to
   body so it spans the full document height in one continuous gradient;
   .pg-page-content must stay transparent or its own background would mask
   the fade underneath it. */
/* Fixed px stops, not vh — vh is relative to the *viewport*, not the hero's
   actual (now 966px) height, so a vh-based stop cut the fade off partway
   through the hero itself rather than after it, producing a visible seam
   partway down. The green must stay solid through the hero's full height
   before fading. */
.pg-has-custom-hero { background: linear-gradient(to bottom, var(--mist) 0, var(--mist) 966px, var(--paper) 1400px); }
/* No z-index here (deliberately) — background:transparent already lets the
   body gradient above show through regardless of stacking order, and a
   negative z-index sinks this entire element behind its own ancestor's
   paint layer for the WHOLE page (not just the strip overlapping the hero),
   which silently swallows clicks on every interactive element on the page. */
.pg-has-custom-hero main.wp-block-group.pg-page-content { background: transparent; margin-top: -600px !important; }
/* Direct-child combinators (>) everywhere below, not descendant selectors —
   this block styles plain hand-typed prose (each typed paragraph/heading is
   a direct child of .wp-block-post-content), but a descendant selector also
   reaches into embedded patterns/components (e.g. the CTA block's own
   nested <h2>/<p>) with HIGHER specificity than that component's own
   styling, silently overriding it. Direct-child scoping only matches real
   top-level prose blocks and leaves nested component markup alone. */
.pg-page-content .wp-block-post-content { color: var(--ink); }
.pg-page-content .wp-block-post-content > * + * { margin-top: 1.25rem; }
.pg-page-content .wp-block-post-content > p { line-height: 1.7; color: var(--ink); opacity: 0.85; }
/* Industry pages (e.g. Hotel Presentations) use --body-color for plain body
   text instead of --ink, per explicit request — scoped here rather than
   changed above so other page types (white papers, etc.) sharing
   .pg-page-content are unaffected. */
.single-industry .pg-page-content .wp-block-post-content { color: var(--body-color); }
.single-industry .pg-page-content .wp-block-post-content > p { color: var(--body-color); }
/* Content section below the hero uses the page's light-gray background
   (--site-bg) instead of inheriting the white body background, per
   explicit request. */
.single-industry main.wp-block-group.pg-page-content { background: var(--site-bg); }
/* The generic main.wp-block-group.pg-page-content rule above (max-width:
   1200px) is sized for plain text pages — it left the intro/showcase-grid
   text narrower than the Engagement Steps/FAQ/CTA sections below it. Those
   sections use .wrap (declared max-width: 1320px), but .wrap's box-sizing
   computes as content-box in the browser (a WP core stylesheet loads after
   ours and wins on that property, despite this theme's own universal
   `* { box-sizing: border-box }` reset) — so .wrap's TRUE rendered width is
   1320px + its own 2x3rem padding = 1416px, confirmed via computed styles.
   main.wp-block-group.pg-page-content is border-box (padding included in
   max-width), so matching that same 1416px true width here means setting
   max-width to 1416px directly, not 1320px — don't "fix" this back to
   1320px without re-checking .wrap's computed box-sizing first, or the two
   will visibly mismatch again. Not editing .wrap itself: it's used
   sitewide (homepage, city pages), and forcing its box-sizing would
   resize every page that uses it, not just this one. */
.single-industry main.wp-block-group.pg-page-content { max-width: 1416px !important; padding: 8rem 3rem !important; }
/* .wp-block-post-content itself was still capped at WordPress's own
   contentSize (1180px, theme.json) and left-flush rather than centered —
   this theme's own `.wp-block-post-content { margin: 0 !important }` reset
   (a few lines up, needed sitewide) also cancels the `margin: 0 auto` WP
   core would otherwise use to center that cap, so the intro/showcase text
   sat flush against the left edge with dead space on the right, not
   matching the Engagement Steps/FAQ/CTA sections' width or center line.
   Let it fill 100% of the (now 1416px) main container's content box
   instead, so every section's content shares one true left/right edge. */
.single-industry .wp-block-post-content { max-width: none !important; }
.pg-page-content .wp-block-post-content > h1,
.pg-page-content .wp-block-post-content > h2,
.pg-page-content .wp-block-post-content > h3,
.pg-page-content .wp-block-post-content > h4,
.pg-page-content .wp-block-post-content > h5,
.pg-page-content .wp-block-post-content > h6 {
	text-transform: none;
	letter-spacing: normal;
	color: var(--ink);
	margin-top: 2.5rem;
}
.pg-page-content .wp-block-post-content > h2 { font-size: 1.75rem; }
.pg-page-content .wp-block-post-content > h3 { font-size: 1.4rem; }
.pg-page-content .wp-block-post-content > h4 { font-size: 1.15rem; }
.pg-page-content .wp-block-post-content > ul,
.pg-page-content .wp-block-post-content > ol { padding-left: 1.4rem; }
.pg-page-content .wp-block-post-content > ul li,
.pg-page-content .wp-block-post-content > ol li { margin-top: 0.5rem; line-height: 1.6; }
.pg-page-content .wp-block-post-content > blockquote {
	margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 3px solid var(--brand); color: var(--graphite); font-style: italic;
}
.pg-page-content .wp-block-post-content > p a { color: var(--link-color); text-decoration: underline; }
.pg-page-content .wp-block-post-content > p a:hover { color: var(--link-hover); }
.pg-page-content .wp-block-post-content > figure img,
.pg-page-content .wp-block-post-content > p img { max-width: 100%; height: auto; border-radius: 12px; }
.pg-page-content .wp-block-post-content > figure figcaption { font-size: 0.8rem; color: var(--graphite); margin-top: 0.5rem; }
.pg-page-content .wp-block-post-content > hr { border: none; border-top: 1px solid rgba(11,14,20,0.12); margin: 2.5rem 0; }
/* The CTA pattern is normally full-bleed on the homepage/city pages, which
   sit outside any padded/width-constrained wrapper. Embedded here inside
   .pg-page-content (max-width + horizontal padding), it would otherwise be
   squeezed into the narrow text column — break it out to the full viewport
   width; the pattern's own .wrap re-centers its actual content afterward. */
/* !important because .wp-block-post-content carries WordPress core's
   "constrained layout" support, which generates its own inline global-styles
   rule (`.is-layout-constrained > *`) that force-caps every direct child to
   the content max-width unless it's marked alignfull. That core rule loads
   after this stylesheet and otherwise wins, silently re-narrowing the CTA
   block back down to the text column width. */
/* `margin-left/right: calc(50% - 50vw)` resolves its "50%" against this
   element's own containing block width, NOT the viewport — so the moment
   any ancestor's width changes (e.g. .single-industry's own max-width
   fix a few lines up), this breakout silently goes off-center again
   (confirmed: a real, measured -70px offset appeared here after that
   width change). `position: relative; left: 50%; margin-left: -50vw`
   instead resolves `left`'s percentage against the initial containing
   block (the viewport itself, since no ancestor here is positioned) —
   width-of-ancestor-independent, so this can't silently drift again the
   same way. Verified via Playwright: outer edges of the main content
   container and all three full-bleed sections align exactly. */
.pg-page-content .wp-block-post-content .pg-cta-block,
.pg-page-content .wp-block-post-content #engagement-steps,
.pg-page-content .wp-block-post-content .pg-faq,
.pg-page-content .wp-block-post-content .pg-faq-meta-strip {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}
/* The gray gap between each white section (Engagement Steps, CTA) and the
   surrounding gray content was coming from incidental heading/paragraph
   margins (a mix of the generic `> * + *` 1.25rem rule, the h2-specific
   margin-top, and the browser's own default <p> margin-bottom — none of
   them a deliberate value), so it varied per transition (measured: 93px
   above the showcase grid, 211px above the CTA block). These margins don't
   collapse with position:relative + negative-margin breakout elements
   (confirmed empirically — they add instead), so simply adding an 8rem
   margin here stacked ON TOP of that incidental spacing instead of
   replacing it (made it worse: 181px/319px). The only way to make the
   gap deterministic is to zero out the contributing margins on the
   specific siblings immediately touching each breakout section, so this
   rule's 8rem is the sole source of the gap. */
.pg-page-content .wp-block-post-content #engagement-steps,
.pg-page-content .wp-block-post-content .pg-cta-block {
	margin-top: 8rem !important;
	margin-bottom: 8rem !important;
}
.pg-page-content .wp-block-post-content #engagement-steps + *,
.pg-page-content .wp-block-post-content .pg-cta-block + * {
	margin-top: 0 !important;
}
.pg-page-content .wp-block-post-content > *:has(+ #engagement-steps),
.pg-page-content .wp-block-post-content > *:has(+ .pg-cta-block) {
	margin-bottom: 0 !important;
}
/* White background, distinct from the surrounding .site-bg light-gray page
   background it would otherwise inherit — per explicit request. */
.pg-page-content .wp-block-post-content #engagement-steps { background: var(--alt-bg-1); }
@media (max-width: 860px) { main.wp-block-group.pg-page-content { padding: 3.5rem 1.5rem !important; } }

/* Shared buttons, reused across header/hero/cta patterns */
.btn {
	display: inline-flex; align-items: center; gap: 0.6rem;
	padding: 0.95rem 1.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	font-size: 0.8rem; text-decoration: none; border: 1.5px solid var(--ink); border-radius: 999px;
	transition: all 0.2s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--button-bg); color: var(--button-text); border-color: var(--button-bg); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-on-dark { border-color: var(--paper); color: var(--paper); }
.btn-on-dark:hover { background: var(--button-bg); color: var(--button-text); border-color: var(--button-bg); }
/* Brand green (--button-bg, #b4d334) at rest, paired with navy text
   (--ink, #07364e -- same dark blue-green as the footer/section
   backgrounds) instead of the original forced-white text, per explicit
   request for better contrast against this specific green. Hover inverts
   to navy background / brand-green text. */
.btn-header { background: var(--button-bg); color: var(--ink); border-color: var(--button-bg); }
.btn-header:hover { background: var(--ink); color: var(--button-bg); border-color: var(--ink); }

/* "Get Started" buttons always keep navy text, regardless of hover/focus
   color-swap that other shared .btn-header/.btn-primary instances use --
   updated from forced-white alongside the navy-text contrast fix above. */
.pg-btn-get-started,
.pg-btn-get-started:focus,
.pg-btn-get-started:active,
.pg-btn-get-started:visited { color: var(--ink) !important; }
.pg-btn-get-started:hover { color: var(--button-bg) !important; }

/* Shared wandering-orb keyframes — used by the homepage hero and the city-page hero alike,
   defined once here so neither pattern has to duplicate them. */
@keyframes pgWanderA {
	0%   { transform: translate(0, 0) scale(1); }
	12%  { transform: translate(14vw, -4vh) scale(1.08); }
	27%  { transform: translate(28vw, 10vh) scale(0.92); }
	41%  { transform: translate(18vw, 26vh) scale(1.15); }
	56%  { transform: translate(-6vw, 20vh) scale(0.95); }
	68%  { transform: translate(-16vw, 4vh) scale(1.1); }
	79%  { transform: translate(-9vw, -12vh) scale(0.9); }
	90%  { transform: translate(6vw, -8vh) scale(1.05); }
	100% { transform: translate(0, 0) scale(1); }
}
@keyframes pgWanderB {
	0%   { transform: translate(0, 0) scale(1); }
	15%  { transform: translate(-6vw, -14vh) scale(0.9); }
	30%  { transform: translate(-14vw, 8vh) scale(1.12); }
	44%  { transform: translate(-22vw, -6vh) scale(0.95); }
	58%  { transform: translate(-12vw, 20vh) scale(1.08); }
	71%  { transform: translate(-20vw, 2vh) scale(0.92); }
	85%  { transform: translate(-8vw, -16vh) scale(1.1); }
	100% { transform: translate(0, 0) scale(1); }
}
.hero-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-orbs .orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.hero-orbs .orb-lime { width: 480px; height: 480px; background: radial-gradient(circle, #FFFFFF 0%, transparent 70%); top: 10%; left: 5%; opacity: 0.5; animation: pgWanderA 18s ease-in-out infinite; mix-blend-mode: screen; }
.hero-orbs .orb-olive { width: 440px; height: 440px; background: radial-gradient(circle, var(--brand) 0%, transparent 70%); top: 12%; right: 5%; opacity: 0.4; animation: pgWanderB 21s ease-in-out infinite; mix-blend-mode: screen; }
/* Motion-sensitive visitors get static orbs instead of the wandering
   animation — the homepage/city-page hero never guarded this, so add it
   here rather than carry the gap into every hero that reuses this code. */
@media (prefers-reduced-motion: reduce) {
	.hero-orbs .orb-lime, .hero-orbs .orb-olive { animation: none; }
}

/* Industry/slide-deck hero ([pg_industry_hero], e.g. Hotel Presentations) —
   wandering-orb background like the homepage/city-page hero, but on
   Background Alt 1 instead of dark ink, per explicit request. Height is
   sized to its content (eyebrow/h1/sub/image), not a viewport fraction —
   overrides the base .pg-hero rule's min-height:92vh — with exactly 4rem
   of space below the image as the section's bottom edge, per explicit
   request. Content sits at the TOP of the section, not vertically centered
   — overrides the base rule's justify-content:center too. No visual column
   beyond the featured image, no CTAs. Orbs recolored to brand blue + green
   (scoped here, not the shared .orb-lime/.orb-olive rule, so the dark
   homepage/city hero orbs are untouched). */
.pg-hero.pg-industry-hero-v2 { min-height: 0; padding: 5rem 0 4rem; background: var(--alt-bg-1); justify-content: flex-start; }
.pg-hero.pg-industry-hero-v2 .orb-lime { background: radial-gradient(circle, #8FAE22 0%, transparent 70%); }
.pg-hero.pg-industry-hero-v2 .orb-olive { background: radial-gradient(circle, var(--brand) 0%, transparent 70%); }
.pg-industry-hero-v2 .wrap { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 0 2rem; text-align: center; }
.pg-industry-hero-v2 .eyebrow { font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); text-transform: uppercase; letter-spacing: var(--eyebrow-letter-spacing); word-spacing: var(--eyebrow-word-spacing); font-weight: var(--eyebrow-weight); color: rgba(11,14,20,0.65); margin: 0; }
/* Green-to-blue gradient text, same treatment as .section-title elsewhere
   on the site, per explicit request. */
.pg-industry-hero-v2 h1 {
	font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.1; margin: 0.75rem 0 1.5rem;
	background: linear-gradient(252.85deg, var(--button-bg) 8.98%, var(--alt-bg-3) 47%, var(--brand-light) 86.39%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.pg-industry-hero-v2 .sub { max-width: 560px; margin: 1.25rem auto 0; font-size: 1.1rem; line-height: 1.6; color: rgba(11,14,20,0.65); }

/* Featured hero image (e.g. the "Hotel Presentations" title card) — sits
   inside the hero itself, in normal document flow directly below the
   H1/sub, per explicit request (no straddle/overlay into the content
   section below). */
.pg-industry-hero-image-wrap {
	width: min(900px, 100%);
	margin: 2rem auto 0;
}
.pg-industry-hero-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 5px solid var(--site-bg);
	box-shadow: 0 20px 50px -20px rgba(11,14,20,0.35);
	object-fit: contain;
}

/* Industry page "15 Essential Presentation Types" showcase — alternating
   text/image rows (text-left/image-right, then flipped on the next row),
   per explicit request. .pg-industry-row-reverse is applied to every other
   row (odd index) to flip the order. */
.pg-industry-showcase { display: flex; flex-direction: column; gap: 3rem; margin-top: 2rem; }
.pg-industry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.pg-industry-row-reverse .pg-industry-row-text { order: 2; }
.pg-industry-row-reverse .pg-industry-row-image { order: 1; }
.pg-industry-row-text h3 { margin: 0 0 0.75rem; }
.pg-industry-row-text p { margin: 0; line-height: 1.7; color: var(--body-color); opacity: 0.85; }
.pg-industry-row-image img { width: 100%; height: auto; display: block; border-radius: 12px; border: 3px solid var(--site-bg); box-shadow: 0 12px 32px -12px rgba(11,14,20,0.25); }
@media (max-width: 760px) {
	.pg-industry-row { grid-template-columns: 1fr; }
	.pg-industry-row-reverse .pg-industry-row-text,
	.pg-industry-row-reverse .pg-industry-row-image { order: initial; }
}

/* Shared editorial section header, reused by most sections */
.kicker { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
/* Divider line beside the kicker text, removed everywhere per explicit
   request. !important because several sections (video, gallery, process,
   testimonials, etc.) set their own more-specific .kicker .line background
   color override, which would otherwise still render the line. */
.kicker .line { display: none !important; }
/* Small gradient bar between the kicker and the h3.section-title that
   follows it (video, gallery, FAQs, industries, pricing, comparison,
   how-it-works, testimonials) — same 3-color gradient as
   .enable-divider__gradient-top (hero), just 2px tall and 30% of the
   section's width instead of a fixed 64x6. Kicker's usual 2.5rem
   margin-bottom is split evenly (1.25rem/1.25rem) around the bar so it
   sits centered in the gap instead of tight against either heading. */
.kicker:has(+ h3.section-title) { margin-bottom: 1.25rem; }
.kicker + h3.section-title::before {
	content: '';
	display: block;
	width: 30%;
	height: 2px;
	margin-bottom: 1.25rem;
	background: linear-gradient(252.85deg,
		var(--button-bg) 8.98%,
		var(--alt-bg-3) 47%,
		var(--brand-light) 86.39%
	);
}
.kicker h2 { font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); text-transform: uppercase; letter-spacing: var(--eyebrow-letter-spacing); word-spacing: var(--eyebrow-word-spacing); font-weight: var(--eyebrow-weight); color: var(--eyebrow-color); white-space: nowrap; margin: 0; }
/* Same 3-color gradient as .enable-divider__gradient-top (action green ->
   dark teal -> light blue), applied as gradient text instead of a solid
   color. Sections styled for dark backgrounds (e.g. .pg-team-section
   .section-title, .pg-video-section .section-title) set a later, more
   specific plain `color` — that simply overrides color back to solid on
   those, which is fine: background-clip:text only shows the gradient when
   color is transparent, so it degrades safely to a flat readable color. */
.section-title {
	font-size: clamp(2rem, 4vw, 3.25rem); text-transform: capitalize; line-height: 1;
	background: linear-gradient(252.85deg, var(--button-bg) 8.98%, var(--alt-bg-3) 47%, var(--brand-light) 86.39%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Per explicit request: h3.section-title (every .section-title in the theme
   is an h3 — see grep audit) no longer uses the gradient-text treatment
   above; it falls back to the plain H3 color from Settings > Design
   Tokens instead. */
h3.section-title {
	background: none; -webkit-background-clip: initial; background-clip: initial;
	color: var(--h3-color);
}
/* "Sample Of {City}'s Presentations And Pitch Decks" heading now sits
   directly above the card grid (no more intro paragraph between them) —
   match the gap below it to the same 2.5rem the kicker uses above it, so
   the spacing reads consistently on both sides of the heading. */
.pg-city-industries .section-title { margin-bottom: 2.5rem; }

/* ---------------------------------------------------------------- Header */
.pg-site-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.75rem 3rem; background: var(--white); position: sticky; top: 0; z-index: 50; }
/* 5px full-width gradient bar separating the header from whatever's below
   it. Re-sequenced again per explicit request: green (--button-bg) holds
   through ~40%, dark teal (--alt-bg-3) takes the next ~20% (40-60%), then
   the remaining ~40% goes to brand blue (--brand), lightening to
   --brand-light right at the very end. 90deg (straight left-to-right) —
   the diagonal 252.85deg used elsewhere wrapped oddly on an element this
   wide/thin (5px tall, full-width). */
.pg-site-header::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px;
	background: linear-gradient(90deg,
		var(--button-bg) 0%, var(--button-bg) 40%,
		var(--alt-bg-3) 60%,
		var(--brand) 80%,
		var(--brand-light) 100%
	);
}
@media (max-width: 860px) { .pg-site-header { padding: 1.25rem 1.5rem; } }
.pg-site-header .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.pg-logo-img { height: 56px; width: auto; display: block; }
.pg-nav-desktop ul { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0; }
.pg-nav-desktop a { color: var(--ink); text-decoration: none; font-size: 0.88rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.pg-nav-desktop a:hover { color: var(--brand-dark); }
/* Dropdowns for child menu items — WordPress's default menu walker already
   nests a "sub-menu" <ul> inside a parent <li> (marked
   "menu-item-has-children") when depth allows more than 1 level; this is
   just the hover-to-reveal presentation for that existing markup. */
.pg-nav-desktop > ul > li { position: relative; }
.pg-nav-desktop .sub-menu {
	/* right-aligned (not left:0) — the nav sits at the right side of the
	   header, so a dropdown growing rightward from a near-edge item overflows
	   the viewport (it's invisible at rest via visibility:hidden, but
	   visibility:hidden still occupies layout geometry and counts toward
	   the page's scrollWidth, causing a real horizontal-scroll bug even
	   though nothing appeared visually wrong). Growing leftward from the
	   item's right edge stays within the header's existing horizontal
	   space instead. */
	position: absolute; top: 100%; left: auto; right: 0; z-index: 60; min-width: 220px;
	background: var(--paper); border-radius: 10px; padding: 0.5rem 0;
	box-shadow: 0 16px 40px -16px rgba(11,14,20,0.35);
	display: flex; flex-direction: column; list-style: none; margin: 0; gap: 0;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.pg-nav-desktop li:hover > .sub-menu,
.pg-nav-desktop li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pg-nav-desktop .sub-menu li { width: 100%; }
.pg-nav-desktop .sub-menu a { display: block; padding: 0.65rem 1.25rem; white-space: nowrap; }
.pg-nav-desktop .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.pg-nav-desktop .menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; }

/* Tier 1: past this width the logo + full text nav + "Get Started" button no
   longer fit on one row together at their full desktop size. Per explicit
   request, the button now stays visible at this size instead of being
   dropped -- shrink the logo and nav text/spacing instead so all three
   keep fitting on one row. */
@media (max-width: 1100px) {
	.pg-logo-img { height: 44px; }
	.pg-nav-desktop ul { gap: 1.4rem; }
	.pg-nav-desktop a { font-size: 0.78rem; }
}

/* Tier 1b: logo + nav + button alone still get tight around 768px and start
   wrapping/overlapping. Tighten further (and now let it fall back to the
   860px tier's smaller size below) instead of dropping to the hamburger
   yet, so all 5 links and the button keep showing on tablets. */
@media (max-width: 860px) {
	.pg-logo-img { height: 38px; }
	.pg-nav-desktop ul { gap: 1rem; }
	.pg-nav-desktop a { font-size: 0.72rem; }
	.btn-header { padding: 0.7rem 1.3rem; font-size: 0.72rem; }
}

/* Tier 2: past this width even logo + text nav alone don't fit. Swap to a
   hamburger button that expands a full mobile menu (with the CTA restored
   inside it), instead of just silently hiding navigation with nothing to
   replace it. */
.pg-menu-toggle {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 40px; height: 40px; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0;
}
.pg-menu-toggle span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.pg-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pg-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pg-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.pg-mobile-menu { display: flex; flex-direction: column; background: var(--paper); border-bottom: 1px solid rgba(11,14,20,0.08); position: sticky; top: 0; z-index: 49; overflow: hidden; max-height: 0; transition: max-height 0.25s ease; }
.pg-mobile-menu.pg-open { max-height: 400px; }
.pg-mobile-menu nav { display: flex; flex-direction: column; padding: 0.5rem 1.5rem 1.5rem; }
.pg-mobile-menu nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pg-mobile-menu nav a { color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.85rem 0; border-bottom: 1px solid rgba(11,14,20,0.08); display: block; }
.pg-mobile-menu nav li:last-child a { border-bottom: none; }
/* No hover on touch devices, so child items are simply always shown,
   indented and slightly smaller, directly under their parent link. */
.pg-mobile-menu nav .sub-menu { list-style: none; margin: 0; padding: 0 0 0.5rem 1.25rem; }
.pg-mobile-menu nav .sub-menu a { font-size: 0.85rem; padding: 0.6rem 0; }
.pg-mobile-menu .btn { margin-top: 1rem; align-self: flex-start; }

@media (max-width: 700px) {
	.pg-nav-desktop { display: none; }
	.pg-menu-toggle { display: flex; }
	/* Now that Tier 1/1b keep it visible instead of hiding it at 1100px,
	   it needs to be hidden explicitly here -- the hamburger's mobile menu
	   already has its own "Get Started" button (.pg-mobile-menu .btn),
	   showing both would be redundant. */
	.pg-cta-desktop { display: none; }
}

/* ---------------------------------------------------------------- Footer */
.ticker-wrap { background: var(--ink); color: var(--paper); overflow: hidden; padding: 0.85rem 0; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ticker { display: inline-block; animation: pg-ticker-scroll 26s linear infinite; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.ticker span { margin-right: 3rem; }
.ticker span.acc { color: var(--brand); }
@keyframes pg-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

footer.pg-footer { background: var(--ink); color: var(--paper); padding: 0 0 2rem; border-top: 1px solid rgba(247,247,242,0.1); }
footer.pg-footer > .wrap { padding-top: 4rem; }
/* Top row: white logo (left, fixed 300x56, never resizes) + phone numbers
   (right). Separate from .footer-grid so it always stays its own row
   regardless of how bio/mid reflow underneath it. */
.footer-top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: 2.5rem; }
.footer-top-logo { display: block; width: 300px; height: 56px; object-fit: contain; object-position: left; flex-shrink: 0; }
.footer-phone { display: flex; flex-wrap: wrap; gap: 1rem 2rem; text-align: right; }
.footer-phone > div + div { margin-top: 0; }
.footer-phone > div { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.footer-phone h4 { color: var(--multi-card-4); font-size: 0.8rem; margin: 0; text-transform: uppercase; letter-spacing: 0.08em; }
.footer-phone p { color: var(--alt-bg-1); font-size: 0.9rem; line-height: 2; margin: 0; }
.footer-phone a { color: var(--alt-bg-1); display: inline-block; padding: 0.35rem 0.9rem; border-radius: 999px; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
.footer-phone a:hover, .footer-phone a:active { background: var(--white); color: var(--ink); }
/* Bio (fixed 320px, never shrinks) + Company/Presentation Types/Services
   (grouped into .footer-mid so they wrap as a unit). At the medium tier
   .footer-mid drops to a full-width row below bio (equal thirds). At the
   narrow/phone tier everything stacks in a single column. */
.footer-grid { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 2.5rem; }
.footer-bio { flex: 0 0 320px; min-width: 0; }
.footer-mid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 2.5rem; flex: 1 1 auto; min-width: 0; }
.footer-mid > div { flex: 0 1 auto; min-width: 140px; }
.footer-grid h4 { color: var(--multi-card-4); font-size: 0.8rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.footer-grid h4 + p + h4 { margin-top: 1.25rem; }
.footer-grid p, .footer-grid a { color: var(--alt-bg-1); font-size: 0.9rem; text-decoration: none; line-height: 2; }
.footer-grid a:hover { color: var(--brand); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid ul a { display: inline-block; }
.footer-grid .logo { color: var(--multi-card-4); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.footer-bio-rule { width: 40%; height: 2px; margin: 1.5rem auto 0; background: rgba(247,247,242,0.15); }
/* Tablet tier: bio takes the full row on its own, Company/Presentation
   Types/Services drop to a full-width row underneath it. */
@media (max-width: 1460px) {
	.footer-grid { flex-wrap: wrap; gap: 1.5rem 2.5rem; }
	.footer-bio { flex: 0 0 100%; }
	.footer-mid { flex: 0 0 100%; }
}
/* Full-size tier: top row and grid row share one 4-column grid so content
   lines up vertically between them — Presentation Types (col 3) sits
   directly under USA, and Company (col 4) sits directly under the start
   of the UK & Europe phone number (not its label — the label is
   absolutely positioned to hang to the left of the number so the number
   itself, not the label, anchors to the column). Bio is widened to
   400px. .footer-phone/.footer-mid become display:contents so their
   child divs become direct grid items sharing the same column tracks. */
@media (min-width: 1461px) {
	.footer-top-row, .footer-grid { display: grid; grid-template-columns: 400px repeat(2, minmax(140px, 1fr)) minmax(220px, 1fr); gap: 2.5rem; }
	.footer-top-logo { grid-column: 1; }
	.footer-phone { display: contents; }
	.footer-phone > div:nth-child(1) { grid-column: 3; text-align: left; justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; }
	.footer-phone > div:nth-child(2) { grid-column: 4; text-align: left; justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; position: relative; }
	.footer-phone > div:nth-child(2) h4 { position: absolute; right: calc(100% + 0.5rem); top: 0.35rem; white-space: nowrap; margin: 0; }
	.footer-bio { grid-column: 1; flex-basis: auto; }
	.footer-bio-rule { display: none; }
	.footer-mid { display: contents; }
	.footer-col-services { grid-column: 2; }
	.footer-col-types { grid-column: 3; }
	.footer-col-company { grid-column: 4; }
}
.copyright { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 4rem; font-size: 0.78rem; color: var(--site-bg); border-top: 1px solid rgba(247,247,242,0.08); padding-top: 1.75rem; }
.copyright a { color: inherit; text-decoration: none; }
.copyright a:hover { color: inherit; }
.legal-links { font-size: 0.78rem; color: var(--site-bg); }
.legal-links ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.legal-links a { color: var(--site-bg); text-decoration: none; font-size: 0.78rem; }
.legal-links a:hover { color: var(--brand); }
/* Phone tier (e.g. iPhone 14 Pro Max, 430px wide): logo/phone row wraps if
   needed, bio/mid stack in a single column. */
@media (max-width: 640px) {
	.footer-top-row { flex-wrap: wrap; }
	.footer-phone { flex-wrap: wrap; justify-content: flex-start; text-align: left; }
	.footer-phone > div { white-space: normal; }
	.footer-grid { flex-direction: column; gap: 2rem; }
	.footer-bio { flex: 0 0 auto; }
	.footer-mid > div { flex: 1 1 45%; min-width: 0; }
	/* Row 1: Services (left) / Presentation Types (right). Row 2: Company,
	   full width, with its own links laid out in two columns under the
	   title. */
	.footer-col-services { order: 1; }
	.footer-col-types { order: 2; }
	.footer-col-company { order: 3; flex-basis: 100%; }
	.footer-col-company ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
}
@media (max-width: 860px) {
	.copyright { flex-direction: column-reverse; align-items: center; text-align: center; gap: 0.75rem; }
	.legal-links ul { justify-content: center; }
}

/* ---------------------------------------------------------------- Homepage Hero */
.pg-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: 7rem 0 5rem; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; }
.pg-hero .hero-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pg-hero .orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.pg-hero .orb-lime { width: 480px; height: 480px; background: radial-gradient(circle, #FFFFFF 0%, transparent 70%); top: 10%; left: 5%; opacity: 0.5; animation: pgWanderA 18s ease-in-out infinite; mix-blend-mode: screen; }
.pg-hero .orb-olive { width: 440px; height: 440px; background: radial-gradient(circle, var(--brand) 0%, transparent 70%); top: 12%; right: 5%; opacity: 0.4; animation: pgWanderB 21s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes pgWanderA {
	0%   { transform: translate(0, 0) scale(1); }
	12%  { transform: translate(14vw, -4vh) scale(1.08); }
	27%  { transform: translate(28vw, 10vh) scale(0.92); }
	41%  { transform: translate(18vw, 26vh) scale(1.15); }
	56%  { transform: translate(-6vw, 20vh) scale(0.95); }
	68%  { transform: translate(-16vw, 4vh) scale(1.1); }
	79%  { transform: translate(-9vw, -12vh) scale(0.9); }
	90%  { transform: translate(6vw, -8vh) scale(1.05); }
	100% { transform: translate(0, 0) scale(1); }
}
@keyframes pgWanderB {
	0%   { transform: translate(0, 0) scale(1); }
	15%  { transform: translate(-6vw, -14vh) scale(0.9); }
	30%  { transform: translate(-14vw, 8vh) scale(1.12); }
	44%  { transform: translate(-22vw, -6vh) scale(0.95); }
	58%  { transform: translate(-12vw, 20vh) scale(1.08); }
	71%  { transform: translate(-20vw, 2vh) scale(0.92); }
	85%  { transform: translate(-8vw, -16vh) scale(1.1); }
	100% { transform: translate(0, 0) scale(1); }
}
.pg-hero .ribbon {
	position: absolute; top: 4.25rem; right: -4.5rem; transform: rotate(45deg);
	background: var(--brand); color: var(--button-text); font-weight: 800; font-size: 0.7rem; white-space: nowrap;
	text-transform: uppercase; letter-spacing: 0.08em; padding: 0.5rem 4.5rem; z-index: 3;
	box-shadow: 0 8px 20px -6px rgba(0,0,0,0.4);
}
.pg-hero .hero-bleed { position: relative; z-index: 1; }
.pg-hero .hero-bleed h1 {
	font-size: clamp(4.5rem, 13vw, 12.5rem); line-height: 0.82; text-transform: uppercase;
	margin: 0; white-space: nowrap; width: 100vw; margin-left: calc(-50vw + 50%);
	text-align: center; letter-spacing: -0.03em;
}
.pg-hero .hero-bleed h1 .line1 { color: var(--paper); }
.pg-hero .hero-bleed h1 .line2 { color: transparent; -webkit-text-stroke: 2px var(--brand); }
.pg-hero .hero-bleed h1 .line3 { color: var(--brand); }
/* "PRESENTATIONS" (13 characters) is much longer than "PITCH"/"PERFECT" —
   the shared clamp above (up to 12.5rem) overflowed the viewport at
   several widths since it was tuned for the shorter words. This line gets
   its own smaller clamp so it always fits at 100vw regardless of screen
   size, instead of relying on one clamp sized for the shortest word. */
.pg-hero .hero-bleed h1.hero-line3-h1 { font-size: clamp(1.5rem, 7vw, 8rem); }

/* Presentation Design page hero: "PRESENTATION" ~30% smaller than the
   shared default size and outlined (transparent fill + lime stroke,
   matching the same outline treatment already used elsewhere in this
   hero for the middle word); "DESIGN" ~30% larger than its default. */
.pg-hero .hero-bleed h1.pd-hero-presentation { font-size: clamp(3.15rem, 9.1vw, 8.75rem); }
.pg-hero .hero-bleed h1.pd-hero-presentation .line1 { color: transparent; -webkit-text-stroke: 2px var(--brand); }
.pg-hero .hero-bleed h1.pd-hero-design { font-size: clamp(1.95rem, 9.1vw, 10.4rem); }
.pg-hero .hero-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-top: 3.5rem; flex-wrap: wrap; gap: 2rem; }
.pg-hero .hero-foot p { max-width: 380px; font-size: 1.05rem; color: rgba(247,247,242,0.65); }
.pg-hero .hero-foot .ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.pg-hero .spin-badge { position: absolute; z-index: 2; width: 130px; height: 130px; bottom: -2rem; left: 2rem; }
.pg-hero .spin-badge svg { animation: pgSpin 12s linear infinite; width: 100%; height: 100%; }
.pg-hero .spin-badge .core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
@keyframes pgSpin { to { transform: rotate(360deg); } }
.pg-hero .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(247,247,242,0.15); margin-top: 4rem; position: relative; z-index: 1; text-align: center; }
.pg-hero .stat { padding: 2rem 2rem 0 2rem; border-right: 1px solid rgba(247,247,242,0.15); }
.pg-hero .stat:last-child { border-right: none; }
.pg-hero .stat .n { font-family: 'Open Sans', sans-serif; font-size: clamp(1.6rem, 2.6vw, 2.75rem); font-weight: 700; line-height: 1; color: var(--paper); white-space: nowrap; }
.pg-hero .stat .l { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(247,247,242,0.55); margin-top: 0.6rem; font-weight: 600; }
@media (max-width: 860px) { .pg-hero .stat-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pg-hero .stat { padding: 1.5rem 1rem 0 0; } .pg-hero .spin-badge { display: none; } }

/* ---------------------------------------------------------------- Comparison ("We're The Solution") */
.pg-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3rem; width: 100%; }
.pg-compare-col { padding: 2.5rem; border: 1px solid rgba(11,14,20,0.12); border-left: none; }
.pg-compare-col:first-child { border-left: 1px solid rgba(11,14,20,0.12); }
.pg-compare-col.featured { background: var(--ink); color: var(--paper); position: relative; }
.pg-compare-col.featured h3 { color: var(--white); }
.pg-compare-col.featured p { color: var(--white); }
.pg-compare-col .eyebrow-tag { font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); text-transform: uppercase; letter-spacing: var(--eyebrow-letter-spacing); word-spacing: var(--eyebrow-word-spacing); font-weight: var(--eyebrow-weight); color: var(--brand-dark); }
.pg-compare-col.featured .eyebrow-tag { color: var(--white); }
.pg-compare-col h3 { font-size: 1.4rem; margin-top: 0.75rem; }
.pg-compare-col p { color: var(--graphite); margin-top: 0.75rem; }
/* box-sizing: border-box set explicitly — same recurring cascade issue as
   .pg-video-desc-card/.pg-wp-synopsis elsewhere in this codebase, where the
   page's global `* { box-sizing: border-box; }` reset doesn't reliably
   reach every element. Fixed 120x120px (was a responsive clamp() size),
   per explicit request. */
.pg-compare-icon-badge { box-sizing: border-box; width: 120px; height: 120px; border-radius: 12px; background: var(--paper); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; padding: 8px; }
.pg-compare-icon-badge img { width: 100%; height: 100%; object-fit: contain; }
.pg-compare-icon-badge.lime { background: var(--brand); padding: 12px; }
.pg-compare-icon-badge.lime svg { width: 100%; height: 100%; display: block; color: var(--white); }
@media (max-width: 860px) {
	.pg-compare-grid { grid-template-columns: minmax(0, 1fr); }
	.pg-compare-col, .pg-compare-col:first-child { border: 1px solid rgba(11,14,20,0.12); border-top: none; }
	.pg-compare-col:first-child { border-top: 1px solid rgba(11,14,20,0.12); }
	/* Icon moves to the left of the text instead of stacking above it, and
	   grows to a fixed 100px now that it's not sharing a column with 2
	   siblings. Vertically centered to align icon and text properly. */
	.pg-compare-col { display: flex; align-items: center; gap: 1.5rem; }
	.pg-compare-icon-badge { width: 100px; height: 100px; flex-shrink: 0; margin-bottom: 0; }
}

/* ---------------------------------------------------------------- Engagement Steps ("Company | Service | Cost | Get Started") */
.pg-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem; }
.pg-process-col { display: flex; flex-direction: column; padding: 2.5rem 1.25rem; border: 1px solid rgba(11,14,20,0.12); border-left: none; }
.pg-process-col:first-child { border-left: 1px solid rgba(11,14,20,0.12); }
.pg-process-col .eyebrow-tag { font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); text-transform: uppercase; letter-spacing: var(--eyebrow-letter-spacing); word-spacing: var(--eyebrow-word-spacing); font-weight: var(--eyebrow-weight); color: var(--brand-dark); }
.pg-process-col h3 { font-size: 1.4rem; margin-top: 0.75rem; }
.pg-process-col h3 a { color: inherit; text-decoration: none; }
.pg-process-col h3 a:hover { color: var(--brand); }
/* "Call 480-386-6000" is longer than the other three headings and wraps
   to two lines at the card's default heading size/padding — smaller size
   plus nowrap keeps it on one line without touching the shared heading
   style used by Company/Service/Cost. */
.pg-process-phone-heading { font-size: 1.15rem; white-space: nowrap; }
.pg-process-col p { color: var(--graphite); margin-top: 0.75rem; }
/* .pg-process-text grows to fill the column so .pg-process-cta lands in
   the same row across all four cards regardless of copy length — the
   grid stretches columns to equal height, and margin-top:auto pins the
   button to the bottom of whichever column ends up tallest. */
.pg-process-text { flex: 1; }
.pg-process-cta { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; white-space: nowrap; }
/* Company/Service/Cost buttons keep the sitewide .btn-primary look but
   swap their hover state to brand blue instead of the default dark hover. */
.pg-process-cta:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
/* Get Started is the odd one out — green by default, dark (--ink) on hover. */
.pg-process-cta-green { background: var(--brand-green); border-color: var(--brand-green); color: var(--button-text); }
.pg-process-cta-green:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pg-process-icon-badge { box-sizing: border-box; width: 100px; height: 100px; border-radius: 12px; background: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; padding: 10px; }
/* Icon files ship with their own baked-in stroke/fill colors (not
   currentColor). Using the SVG as a CSS mask (rather than an <img>) turns
   it into a flat silhouette we can paint with anything — here an animated
   gradient sweeps through the icon shape for a subtle motion effect. */
.pg-process-icon-mask {
	display: block; width: 100%; height: 100%;
	-webkit-mask-image: var(--pg-icon); mask-image: var(--pg-icon);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
	background: linear-gradient(120deg, var(--alt-bg-1) 0%, var(--alt-bg-2) 50%, var(--alt-bg-1) 100%);
	background-size: 300% 300%;
	animation: pg-process-icon-gradient 6s ease-in-out infinite;
}
@keyframes pg-process-icon-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	.pg-process-icon-mask { animation: none; }
}
/* Column width shrinks fastest in the 4-up grid, so the 4-to-2 switch
   happens earlier (1180px, not 960px) — otherwise button text like "Meet
   The Team" wraps to a second line before the column is narrow enough to
   trigger a layout change. */
@media (max-width: 1180px) {
	.pg-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pg-process-col:nth-child(3) { border-left: 1px solid rgba(11,14,20,0.12); }
}
@media (max-width: 640px) {
	.pg-process-grid { grid-template-columns: minmax(0, 1fr); }
	.pg-process-col, .pg-process-col:first-child, .pg-process-col:nth-child(3) { border: 1px solid rgba(11,14,20,0.12); border-top: none; }
	.pg-process-col:first-child { border-top: 1px solid rgba(11,14,20,0.12); }
	/* Icon + copy sit side by side; the button drops to its own full-width
	   row underneath and centers, instead of trailing the copy column. */
	.pg-process-col { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; }
	.pg-process-icon-badge { width: 80px; height: 80px; flex-shrink: 0; margin-bottom: 0; }
	.pg-process-text { flex: 1; min-width: 0; }
	.pg-process-cta { flex-basis: 100%; display: flex; justify-content: center; align-self: auto; margin-top: 1.25rem; padding-top: 0; }
	/* .btn's sitewide vertical padding (0.95rem) reads as too tall once the
	   button is on its own centered row in the single-column stack. */
	.pg-process-cta.btn { padding-top: 0.65rem; padding-bottom: 0.65rem; }
}

/* ---------------------------------------------------------------- CTA Block ("Ready To Get Started") */
/* Was a full-bleed CSS gradient on the section itself; now a real image
   (assets/img/prez-guru-blue-green-grad-bkg.png), moved onto .pg-cta-grid
   (the content-width .wrap div) instead of .pg-cta-block (the full section)
   — per explicit request, the section shows the page's normal background
   around a content-width colored card, rather than the color running edge
   to edge. */
.pg-cta-block {
	background: var(--site-bg);
	color: var(--paper); text-align: left;
	/* Horizontal 3rem matches .wrap's own gutter. This is the section
	   (full-bleed, no max-width), so it's the only thing giving the green
	   .pg-cta-grid card any outer gutter from the viewport edge — .pg-cta-grid
	   overrides .wrap's padding for its own internal card padding, so without
	   this the card touched the viewport edges directly at any width below
	   its 1320px max-width (i.e. most viewports), since width:100% on the
	   grid then equals the section's own full-bleed width. Found by measuring
	   computed styles directly — the grid's own padding was never the gutter,
	   it only inset the text from the green edge. */
	padding: 5.5rem 3rem; /* 3rem + 40px top/bottom, per explicit request */
}
/* Industry pages only (not city pages, which also use this pattern) —
   white background instead of --site-bg, and top/bottom padding matching
   the sitewide .section default (8rem) that Engagement Steps/FAQ already
   use, per explicit request that every section share the same padding. */
.single-industry .pg-cta-block { background: var(--alt-bg-1); padding: 8rem 3rem; }
@media (max-width: 860px) {
	/* Matches .wrap's own 860px horizontal reduction (3rem -> 1.5rem) and
	   .section's own vertical reduction on the industry variant (8rem -> 4.5rem). */
	.pg-cta-block { padding: 3rem 1.5rem; }
	.single-industry .pg-cta-block { padding: 4.5rem 1.5rem; }
}
/* Fixed 1100px, per explicit request — overrides .wrap's own 1320px
   max-width since this element carries both classes. */
/* align-items: flex-start (not center) — with the open-hours state's taller
   form column (phone button + note + CTA button), centering left extra
   space above the copy column that read as oversized top padding even
   though the box's own padding is uniform (see .pg-cta-grid-closed below
   for the one case that still wants centering). */
/* Columns rebalanced 1.5fr/1fr (was even 1fr/1fr) to give the copy column
   enough width for "Get Started?" to stay on one line at the larger 5.4rem
   heading size below — verified via direct DOM measurement, not eyeballed.
   Form column still comfortably fits both buttons (~330px each) at its
   narrower ~421px width. */
/* Background image removed — replaced with a simple 45deg 2-color gradient
   (#9AB545 -> #3E5330, smooth crossfade, no hard stops), per explicit
   request. */
/* box-sizing: border-box set explicitly — same recurring cascade issue as
   .pg-compare-icon-badge/.pg-video-desc-card elsewhere in this codebase.
   Without it, the 3rem padding was adding on top of the 90% width instead
   of being absorbed into it, making the real box wider than the viewport
   at narrow widths and collapsing the centering margin to 0. */
.pg-cta-grid {
	box-sizing: border-box;
	/* Right column has a 350px floor (was minmax(0, 3fr)) — below that width
	   the phone button's text/icon didn't fit inside its own 280px max-width
	   with white-space:nowrap, so it overflowed past the rounded edges and
	   visually read as a rectangle instead of a pill despite border-radius:
	   999px being correctly applied — per explicit request/diagnosis. */
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(350px, 3fr); gap: 3rem; align-items: flex-start;
	/* Starts at the Brand Green token, fading to a darker green — per
	   explicit request — instead of the old unrelated #9AB545/#3E5330 pair. */
	background: linear-gradient(45deg, var(--brand-green), #8FAE22);
	border-radius: 20px;
	padding: 5.5rem clamp(1.5rem, 3vw, 3rem); /* 3rem + 40px top/bottom, per explicit request */
	max-width: 1320px;
	width: 100%;
	margin: 0 auto;
}
/* Closed state drops the open-hours note + call button, so the copy column
   is noticeably shorter than the form card — center it vertically against
   the card's height instead of leaving it stranded at the top. */
.pg-cta-grid-closed { align-items: center; }
/* Base color is Alt Background 3 — covers "Ready To" and the closing
   "?" (plain text, unstyled/inherited) — per explicit request. "Get Started"
   stays white via .accent's own explicit color below. */
/* Base weight 900 — Inter Black for maximum visual impact. "Get Started"
   stays 900 via .accent's own explicit weight, and "?" also 900 via
   .pg-cta-mark — all text rendered at full weight. */
/* Font-size in cqw (container query width units, relative to .pg-cta-copy's
   own inline size — see container-type below) instead of vw. vw sizing was
   calibrated once against the old 3-line "Ready"/"To Get"/"Started?" text;
   after merging to 2 lines ("Ready To"/"Get Started?"), "Get Started?" is
   the new longest line and overflowed its column at every width below the
   860px breakpoint (up to 146% of column width at 390px, measured via
   Playwright — text was visibly bleeding past the green card on mobile).
   vw sizing also can't track the actual column width anyway: the grid's
   right column has a 350px floor (see .pg-cta-grid above), so the copy
   column's share of the viewport isn't linear — e.g. it measured narrower
   at 1280px (709px) than at 1920px (823px) despite the wider viewport,
   once the floor started eating into its share. cqw sizes directly off
   the column's real rendered width, so it tracks correctly through that
   floor and through the 860px stacking breakpoint with one formula, no
   separate media-query override needed.
   13.4cqw is calibrated to "Get Started?" (the longest line, Inter 900):
   measured 734.89px wide at a 100px font-size in a 1440px-viewport column
   (100/734.89 = 0.1361 px of font-size per px of text width, i.e. 13.61cqw
   would exactly fill 100% of the column). 13.4cqw keeps a ~1.5% safety
   margin below that exact maximum, for subpixel/font-hinting variance
   across browsers, while still being the largest size that reliably never
   wraps or overflows — re-verify against .pg-cta-line's actual text width
   (not its own scrollWidth, which reports the stretched block width, not
   the text run — see the line below) if the copy text ever changes. */
.pg-cta-copy h2 { font-size: clamp(1.5rem, 13.4cqw, 10rem); font-weight: 900; text-transform: uppercase; line-height: 1.05; overflow-wrap: break-word; color: var(--alt-bg-3); }
/* Each line forced onto its own row via display:block, and forbidden from
   wrapping internally via white-space:nowrap — guarantees exactly the 2
   intended lines ("Ready To" / "Get Started?") at every viewport width
   (the h2's own font-size scales to fit instead of any line ever
   reflowing), per explicit request. */
.pg-cta-line { display: block; white-space: nowrap; }
/* Inter Black (900) — stays in the Inter family (not Open Sans) per
   explicit request; now a real loaded weight (see functions.php), so this
   renders genuinely heavier than the 700 base instead of falling back. */
.pg-cta-copy .accent { color: var(--paper); font-weight: 900; }
/* The "?" — split from .accent into its own span so it can independently
   carry Inter 900 (matching "Started") while keeping the base h2 color
   (Alt Background 3) rather than inheriting .accent's white, per explicit
   request ("the question mark, take that to Inter 900" — weight only). */
.pg-cta-copy .pg-cta-mark { font-weight: 900; }
/* container-type: inline-size turns this element into the reference box for
   the h2's cqw font-size above — cqw is a % of THIS element's own content
   width, not the viewport. Safe here because .pg-cta-copy's width is fully
   determined by the CSS Grid track (see .pg-cta-grid), never by its own
   content, so there's no circular sizing dependency. */
.pg-cta-copy { align-self: center; container-type: inline-size; }
@media (max-width: 860px) {
	.pg-cta-grid { grid-template-columns: minmax(0, 1fr); padding: 2rem clamp(1.5rem, 3vw, 3rem); }
}

/* min-width: 0 — without it, this grid item's default auto min-width was
   forced up to its content's min-content size (the 280px-wide buttons
   below), which could exceed the column's actual available track width at
   narrower viewports and push the whole card past .pg-cta-grid's own
   right edge instead of shrinking to fit. */
.pg-cta-form-card { background: transparent; color: var(--ink); border-radius: 16px; padding: 2.5rem; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
/* Wraps the phone button + open-hours note now that both live in the
   form-card column (moved here, above "Request a Quote", per explicit
   request) instead of the copy column. Only rendered when the business is
   open, so the closed state's single centered button is unaffected. */
.pg-cta-call-group { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
/* Same fixed width/padding/font-size as .pg-call-number below so the two
   buttons are literally the same size and visually align with each other —
   white-space: nowrap on both keeps "Request a Quote" and the phone number
   from ever wrapping to a second line. */
.pg-cta-form-cta {
	display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; white-space: nowrap;
	/* text-transform/letter-spacing reset from .btn's uppercase+tracked
	   default — that was making this text visually read larger than
	   .pg-call-number's plain-case text even at the same 1.35rem font-size. */
	text-transform: none; letter-spacing: normal;
	font-size: 1.35rem; padding: 0.9rem 1.5rem; text-align: center; background: var(--alt-bg-1); color: var(--alt-bg-3); border-color: var(--alt-bg-1);
}
/* transform: scale matches .pg-call-number:hover's zoom effect right next
   to it, per explicit request — .btn's base transition: all already covers
   animating this smoothly, no extra transition property needed.
   Was white(default)/teal-on-white(hover) reversed from the action-green
   default this button had before — now white by default, teal on hover,
   per explicit request. */
.pg-cta-form-cta:hover { background: var(--brand); color: var(--paper); border-color: var(--brand); transform: scale(1.03); }
.pg-cta-form-steps { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.pg-cta-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(11,14,20,0.15); transition: background 0.2s ease, width 0.2s ease; }
.pg-cta-step-dot.pg-active { background: var(--brand-dark); width: 20px; border-radius: 4px; }
.pg-cta-form-viewport { overflow: hidden; }
.pg-cta-form-track { display: flex; width: 200%; transition: transform 0.4s ease; }
.pg-cta-form-card.pg-step-2 .pg-cta-form-track { transform: translateX(-50%); }
.pg-cta-form-step { width: 50%; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.1rem; padding-right: 0.25rem; }
.pg-cta-form-step label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--graphite); }
.pg-cta-form-step input, .pg-cta-form-step select, .pg-cta-form-step textarea {
	font-family: inherit; font-size: 1rem; font-weight: 400; text-transform: none; letter-spacing: normal;
	padding: 0.8rem 1rem; border-radius: 8px; border: 1.5px solid rgba(11,14,20,0.15); color: var(--ink); background: var(--white);
	width: 100%; max-width: 100%; min-width: 0;
}
.pg-cta-form-step input:focus, .pg-cta-form-step select:focus, .pg-cta-form-step textarea:focus { outline: none; border-color: var(--brand-dark); }
.pg-cta-form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.pg-cta-form-actions .btn { flex: none; }
.pg-cta-form-step .btn-primary.pg-cta-next { align-self: flex-start; margin-top: 0.5rem; }

/* Shared "call us" pill — used by the city-page map card AND the sitewide
   CTA block's open-hours note, so it lives here in global.css (loaded
   everywhere) rather than in cities.css (city pages only). */
/* width: 100%/max-width (was fixed 280px) — lets this shrink to fit
   narrower containers (e.g. the CTA block's form column at small
   viewports) instead of forcing an overflow. */
.pg-call-number {
	margin-top: 1.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
	width: 100%; max-width: 280px; white-space: nowrap; font-family: 'Open Sans', sans-serif; font-size: 1.35rem; font-weight: 700;
	/* Background is Alt Background 3 with white text (was --brand/blue), and
	   vertical padding tightened from 0.9rem back to 0.6rem — the 0.9rem had
	   made the pill noticeably taller/boxier than "Request a Quote" right
	   below it, per explicit request. Pill shape (border-radius: 999px) was
	   already correct here, just needed the sizing/color to match. */
	color: var(--alt-bg-1); text-decoration: none; padding: 0.6rem 1.5rem; border-radius: 999px;
	background: var(--alt-bg-3); transition: transform 0.15s ease;
}
/* Overrides the align-self:flex-start above specifically inside the CTA
   block's centered call-group column (the map card's own layout still gets
   the base rule's default alignment) — without this the button ignored
   .pg-cta-call-group's align-items:center and sat left-aligned instead of
   lining up with "Request a Quote" below it. */
.pg-cta-call-group .pg-call-number { align-self: center; }
/* Matches "Request a Quote" (.pg-cta-form-cta) exactly — same font-size
   (the larger of the two candidates) and same top/bottom padding, per
   explicit request. Now that the column has a 350px floor (see .pg-cta-grid
   above), the shared 1.35rem font-size fits without overflowing past the
   pill's rounded edges — the earlier 1.05rem shrink is no longer needed.
   Scoped here (not the shared .pg-call-number rule) so the city-page map
   card's button is unaffected. */
.pg-cta-call-group .pg-call-number { font-size: 1.35rem; padding: 0.9rem 1.5rem; }
/* Matches .pg-cta-form-cta:hover's treatment (white bg, dark-navy text) per
   explicit request, instead of just a scale-up with no color change. */
.pg-call-number:hover { transform: scale(1.03); background: var(--alt-bg-1); color: var(--alt-bg-3); }
/* Symmetric 3rem above AND below — the note sits centered in the gap
   between the phone button and "Request a Quote" below it, rather than
   sitting tight against one and far from the other. */
/* font-weight normal (was 700) — stays white, just no longer bold, per
   explicit request. */
/* text-shadow in Alt Background 3 — the white text was blending into the
   card's transparent/light background with no definition, per explicit
   request. */
.pg-cta-open-note { margin: 3rem 0; color: var(--alt-bg-1); font-weight: 400; font-size: 1rem; text-align: center; text-shadow: 0 2px 3px var(--alt-bg-3); }

/* ---------------------------------------------------------------- CTA 2 (Orbs) — [presentationgurus/cta-block-2] */
.pg-cta2-block { position: relative; overflow: hidden; background: var(--alt-bg-3); padding: 5rem 0; }
/* 3-class selector (beats the shared 2-class .hero-orbs .orb-lime/.orb-olive
   base rule regardless of source order — see the earlier industry-hero
   cascade mistake this avoids) — blue + green orbs, per explicit request,
   instead of the shared default white/blue pair. */
.pg-cta2-block .hero-orbs .orb-lime { background: radial-gradient(circle, var(--brand) 0%, transparent 70%); }
.pg-cta2-block .hero-orbs .orb-olive { background: radial-gradient(circle, var(--brand-green) 0%, transparent 70%); }
.pg-cta2-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 0 2rem; text-align: center; }
.pg-cta2-heading {
	color: var(--paper); font-size: clamp(2rem, 5vw, 4rem); font-weight: 900;
	text-transform: uppercase; line-height: 1.1; margin: 0;
}
.pg-cta2-ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem; }
.pg-cta2-call, .pg-cta2-quote { white-space: nowrap; }
@media (max-width: 480px) {
	.pg-cta2-ctas { flex-direction: column; }
	.pg-cta2-call, .pg-cta2-quote { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- Built Different */
.pg-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 3rem; border: 1px solid rgba(11,14,20,0.12); }
.pg-grid-3 .card { padding: 3rem 2.5rem; border-right: 1px solid rgba(11,14,20,0.12); }
.pg-grid-3 .card:last-child { border-right: none; }
.pg-grid-3 .card .tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--brand-dark); }
.pg-grid-3 .card h3 { font-size: 1.35rem; margin-top: 0.9rem; }
.pg-grid-3 .card p { color: var(--graphite); margin-top: 0.75rem; }
.pg-grid-3 .card-icon { width: clamp(40px, 6.5vw, 100px); height: clamp(40px, 6.5vw, 100px); color: var(--ink); margin-bottom: 1.25rem; }
.pg-grid-3 .card-icon svg { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) { .pg-grid-3 { grid-template-columns: minmax(0, 1fr); } .pg-grid-3 .card { border-right: none; border-bottom: 1px solid rgba(11,14,20,0.12); } .pg-grid-3 .card:last-child { border-bottom: none; } }

/* ---------------------------------------------------------------- Playbook */
.pg-num-list { margin-top: 3rem; border-top: 1px solid rgba(11,14,20,0.12); }
.pg-num-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem; padding: 2.25rem 0; border-bottom: 1px solid rgba(11,14,20,0.12); align-items: start; }
.pg-num-row .idx { font-family: 'Open Sans', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--brand-dark); }
.pg-num-row h3 { font-size: 1.4rem; text-transform: none; }
.pg-num-row p { color: var(--graphite); margin: 0; }
@media (max-width: 860px) { .pg-num-row { grid-template-columns: 50px minmax(0, 1fr); } .pg-num-row p { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- Team */
.pg-team-section { background: var(--ink); color: var(--paper); }
.pg-team-kicker h2 { color: rgba(247,247,242,0.55); }
.pg-team-kicker .line { background: rgba(247,247,242,0.15); }
.pg-team-section .section-title { color: var(--paper); }
.pg-team-intro { max-width: 1100px; margin-top: 1.5rem; line-height: 1.6; color: rgba(247,247,242,0.7); }
/* Right column is a fixed pixel width, not a fraction — that's what keeps
   the nine thumbnails at their original size no matter how wide the left
   spotlight card grows; the left column just absorbs all the extra space. */
.pg-team-layout { display: grid; grid-template-columns: minmax(0, 1fr) 381px; gap: 3rem; margin-top: 3rem; align-items: start; }
/* Below this width the left card's fixed-width text column gets squeezed
   too narrow and its bio copy overflows past the card's fixed height —
   stack to single-column before that point, rather than the site's usual
   860px breakpoint. */
.pg-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
/* Once stacked, the nine thumbnails switch to a single row spanning the
   full width (rather than staying 3x3 and blowing up to 250px+ each on
   wider stacked/tablet widths) — a deliberate aesthetic choice for the
   stacked layout, not a leftover default. Below ~600px a single row of nine
   gets too thin to read, so it switches back to 3x3, capped to its
   original 381px width and centered. These overrides must stay AFTER the
   base .pg-team-grid rule above — equal specificity means source order
   decides the winner, and a later unconditional rule silently cancels an
   earlier media-query override at any matching width. */
@media (max-width: 1126px) {
	.pg-team-layout { grid-template-columns: minmax(0, 1fr); }
	.pg-team-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); margin-top: 2.5rem; }
}
@media (max-width: 600px) {
	.pg-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 381px; margin: 2.5rem auto 0; }
}

.pg-team-left { display: flex; flex-direction: column; }
.pg-team-cta { align-self: flex-start; display: inline-block; padding: 0.85rem 1.75rem; border-radius: 999px; background: var(--ink); color: var(--paper); border: 1px solid var(--paper); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }
.pg-team-cta:hover { border-color: var(--brand); color: var(--brand); }
/* min-height (not height) matches .pg-team-grid's rendered height so the
   two columns line up evenly at desktop widths — but stays a MINIMUM, not a
   cap, so the bio text can push the card taller instead of overflowing past
   a fixed height once the card gets narrow (stacked layouts, or any width
   where the copy needs more vertical room than 381px allows). */
.pg-team-spotlight { background: rgba(247,247,242,0.04); border: 1px solid rgba(247,247,242,0.1); border-radius: 20px; padding: 2rem; display: flex; gap: 1.75rem; align-items: flex-start; min-height: 381px; }
.pg-team-spotlight-photo-col { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; flex-shrink: 0; }
.pg-team-spotlight-photo { width: 220px; height: 220px; border-radius: 14px; overflow: hidden; background: rgba(247,247,242,0.08); }
.pg-team-spotlight-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-team-spotlight-name { font-family: 'Open Sans', sans-serif; font-size: 1.5rem; }
.pg-team-spotlight-title { color: #45ADE1; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-top: 0.35rem; } /* lightened from var(--brand)/#249EDC — was 3.79:1 on this dark card, now 4.51:1 */
.pg-team-spotlight-bio { margin-top: 0.85rem; line-height: 1.6; color: rgba(247,247,242,0.75); font-size: 0.92rem; }
@media (max-width: 500px) { .pg-team-spotlight { flex-direction: column; align-items: flex-start; height: auto; min-height: 620px; } .pg-team-spotlight-photo { width: 160px; height: 160px; } .pg-team-spotlight-photo-col { width: 100%; } }

.pg-team-thumb { border: none; background: none; padding: 0; cursor: pointer; border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 1 / 1; }
.pg-team-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; transition: opacity 0.2s ease, outline-color 0.2s ease; outline: 2px solid transparent; outline-offset: -2px; }
.pg-team-thumb:hover img { opacity: 0.85; }
.pg-team-thumb.pg-active img { opacity: 1; outline-color: var(--brand); }
.pg-team-thumb::after { content: ''; position: absolute; inset: 0; background: var(--brand); opacity: 0; transition: opacity 0.2s ease; mix-blend-mode: multiply; }
.pg-team-thumb.pg-active::after { opacity: 1; }
.pg-team-thumb-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.4rem 0.5rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: linear-gradient(to top, rgba(11,14,20,0.85), transparent); color: var(--paper); text-align: left; z-index: 1; }

/* ---------------------------------------------------------------- Design Process */
/* Mint section background (same var(--mist) as the intro/overview section)
   with dark ink text/icons instead of the old dark-ink-background/white-text
   treatment, and individual gapped rounded cards matching the pricing
   section's box layout instead of a single bordered 3-cell strip. */
.pg-process { background: var(--mist); color: var(--ink); }
.pg-process .kicker h2 { color: rgba(11,14,20,0.55); }
.pg-process .kicker .line { background: rgba(11,14,20,0.15); }
.pg-process .section-title { color: var(--ink); }
.pg-proc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.pg-proc-cell { background: var(--white); border-radius: 16px; padding: 2.5rem; }
.pg-proc-icon { width: clamp(44px, 7vw, 100px); height: clamp(44px, 7vw, 100px); color: var(--ink); margin-bottom: 1.5rem; }
.pg-proc-icon svg { width: 100%; height: 100%; display: block; }
.pg-proc-cell .n { font-family: 'Open Sans', sans-serif; color: var(--brand-dark); font-size: 1rem; font-weight: 700; }
.pg-proc-cell h3 { color: var(--ink); font-size: 1.35rem; margin-top: 1rem; }
.pg-proc-cell p { color: var(--graphite); margin-top: 0.75rem; }
@media (max-width: 860px) { .pg-proc-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Our Presentation Design Process (pg_city_process) */
/* The site's one "Four Steps" section — a 4-card-in-a-row timeline that
   replaced the old detailed alternating-row .pg-phases walkthrough
   (how-it-works.php, no longer referenced anywhere). Background matches
   that old section's (it never set its own background, so it inherited
   body's var(--site-bg)/--paper) so the swap doesn't change the page's
   color rhythm. */
.pg-quick-process { background: var(--paper); color: var(--ink); }
.pg-quick-process .kicker h2 { color: rgba(11,14,20,0.55); }
.pg-quick-process .kicker .line { background: rgba(11,14,20,0.15); }
.pg-quick-process .section-title { color: var(--ink); }
.pg-quick-process-intro { max-width: 760px; margin-top: 1.5rem; }
.pg-quick-process-intro p { color: var(--graphite); margin-top: 1rem; line-height: 1.7; }
.pg-quick-process-intro p:first-child { margin-top: 0; }
.pg-quick-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.5rem; margin-top: 3rem; position: relative; }
/* Connecting line between the cards, horizontal counterpart to
   .pg-phases-track above (the old timeline). Unlike that vertical version
   (a static dotted border with a separate animated beam layered on top),
   here the dotted line ITSELF is the animation — it's a background (dots
   drawn via repeating-linear-gradient, not a border, since border-image
   can't be animated with background-position) whose position is
   continuously shifted, so the dashes read as marching/flowing rather than
   a static line with a highlight passing over it. Vertically centered on
   the row itself (top:50% + translateY, not a fixed px tied to the circle)
   so it's equally balanced between the top and bottom of the cards
   regardless of card height, and z-index:0 so the opaque cards (z-index:1)
   occlude it everywhere except the gaps between them. */
.pg-quick-process-grid::before {
	content: ''; position: absolute; top: 50%; left: 3%; right: 3%; height: 3px; transform: translateY(-50%);
	background-image: repeating-linear-gradient(90deg, var(--brand) 0, var(--brand) 10px, transparent 10px, transparent 22px);
	opacity: 0.7; z-index: 0;
	animation: pgQuickProcessDashFlow 1s linear infinite;
}
@keyframes pgQuickProcessDashFlow {
	from { background-position-x: 0; }
	to   { background-position-x: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.pg-quick-process-grid::before { animation: none; }
}
/* Border added now that the card sits on --paper (near-white) instead of
   the darker --neutral-20 test background — same subtle definition as the
   old .pg-phase-card used against this same background. */
.pg-quick-process-card { background: var(--white); border: 1px solid rgba(11,14,20,0.1); border-radius: 16px; padding: 2rem; position: relative; z-index: 1; }
/* Number is large (4.375rem, 2.5x the original 1.75rem) with a fixed white
   color regardless of the Buttons token's text color (which is often
   dark) — but the circle itself is tight around it (minimal padding), per
   explicit request to shrink the circle back down instead of growing it
   to match the number. */
.pg-quick-process-num {
	width: 60px; height: 60px; border-radius: 50%; background: var(--brand); color: #FFFFFF;
	display: flex; align-items: center; justify-content: center; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 3.2rem;
	margin-bottom: 1.25rem;
}
.pg-quick-process-card h4 { color: var(--ink); font-size: 1.15rem; margin: 0; }
.pg-quick-process-card p { color: var(--graphite); margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 860px) {
	.pg-quick-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3.5rem; }
	.pg-quick-process-grid::before { display: none; }
}
@media (max-width: 560px) { .pg-quick-process-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Video Section (pg_city_video, pg_home_video) */
/* This is the CITY video section's styling (moved here from cities.css),
   not the old two-column "Corporate Video" pattern's — that pattern
   (pg-video-card/pg-video-layout) has been retired from the homepage in
   favor of pg_home_video, which reuses this exact markup/CSS instead of
   duplicating a second visual treatment. */
/* background-image (when set inline, per-instance — see
   presentationgurus_city_video_shortcode()) sits on top of the --ink
   background-color; only pg_city_video sets the inline image, pg_home_video
   still gets the plain --ink fallback since it shares this same ruleset. */
.pg-video-section { position: relative; overflow: hidden; background-color: var(--ink); background-repeat: no-repeat; background-position: center; background-size: cover; color: var(--paper); }
.pg-video-section .kicker h2 { color: rgba(247,247,242,0.55); white-space: normal; }
.pg-video-section .kicker .line { background: rgba(247,247,242,0.15); flex: 0 0 2rem; }
/* Was flat white (var(--paper)); now a 4-stop gradient brand blue -> light
   blue -> a lighter blue still -> white, per explicit request. Overrides
   the base .section-title gradient (which this selector already loses to
   on source order) with a different color sequence rather than just
   falling back to plain white. */
.pg-video-section .section-title {
	background: none; -webkit-background-clip: initial; background-clip: initial;
	color: var(--h3-color);
}
/* Two-thirds video / one-third description-card layout. .pg-video-frame's
   old standalone width:80%+margin:auto centering is replaced by the grid
   column below; the 16:9 aspect-ratio/frame styling itself is unchanged. */
/* Full width of .wrap (not a narrower centered sub-width) so the right
   column's right edge lines up with other sections' content edge — e.g.
   the J.R. card in the intro sidebar above, which is also laid out
   directly within .wrap's own padding. */
.pg-video-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: stretch; margin: 3rem 0 0; width: 100%; }
/* Card's height is set inline by JS to exactly match .pg-video-frame's
   rendered height (see the shortcode's own <script>) — overflow:hidden
   here is the safety net while that height is being applied/recalculated. */
/* box-sizing:border-box set explicitly (not just relying on the global
   * { box-sizing: border-box; } reset) — something in the cascade computes
   content-box for this element despite that reset (confirmed via
   getComputedStyle; not traced to a specific rule, but this fixes it
   regardless), which was making the JS-applied inline height 64px taller
   than the video frame it's meant to match (2rem padding x2, added on top
   of the set height instead of being included within it). */
.pg-video-desc-card { background: var(--white); border: 1px solid var(--neutral-20); color: var(--ink); border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.pg-video-desc-text { overflow: hidden; transition: max-height 0.3s ease; }
.pg-video-desc-card p { margin: 0; font-size: 1rem; line-height: 1.6; }
.pg-video-desc-more { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.75rem; background: none; border: none; padding: 0; color: var(--eyebrow-color); font-weight: 400; font-size: 0.9rem; cursor: pointer; flex-shrink: 0; }
.pg-video-desc-more:hover { text-decoration: underline; }
.pg-video-desc-more-arrow { display: inline-block; transition: transform 0.2s ease; }
.pg-video-desc-more[aria-expanded="true"] .pg-video-desc-more-arrow { transform: rotate(180deg); }
.pg-video-desc-cta-zone { margin-top: auto; display: flex; align-items: center; justify-content: center; }
.pg-video-desc-cta { width: 50%; text-align: center; justify-content: center; }
@media (max-width: 860px) { .pg-video-grid { grid-template-columns: 1fr; width: 100%; } }
/* align-self:start is required here: the grid's align-items:stretch (kept
   so .pg-video-desc-card fills the row height nicely) would otherwise
   stretch this element's height to match the row, and aspect-ratio:16/9
   would then compute WIDTH from that stretched height instead of from the
   grid column's own width — overflowing into the description card's
   column. Confirmed via computed getBoundingClientRect(): without this,
   frame width came out to 1023px against a 770px column. */
.pg-video-frame { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink-2); align-self: start; }
.pg-video-caption { max-width: 80%; margin: 1.25rem auto 0; text-align: center; color: rgba(247,247,242,0.6); font-size: 0.9rem; line-height: 1.6; }
@media (max-width: 860px) { .pg-video-caption { max-width: 100%; } }
.pg-video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-video-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-size: cover; background-position: center; cursor: pointer; }
.pg-video-poster.pg-hidden { display: none; }
.pg-video-play { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--brand); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 12px 32px -8px rgba(36,158,220,0.6); transition: transform 0.2s ease; animation: pgPlayThrob 2.2s ease-in-out infinite; }
.pg-video-play::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--brand); z-index: -1; animation: pgPlayHaze 2.2s ease-out infinite; }
.pg-video-poster:hover .pg-video-play { transform: scale(1.08); }
@keyframes pgPlayThrob { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes pgPlayHaze { 0% { opacity: 0.45; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.pg-video-play-icon { display: inline-block; color: var(--paper); font-size: 2rem; margin-left: 6px; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 0 1px var(--ink), 0 0 2px var(--ink); }
.pg-video-start-btn { display: block; margin: 1rem 0 0; background: none; border: none; padding: 0; color: var(--brand); font-size: 0.9rem; font-weight: 600; cursor: pointer; text-align: center; }
.pg-video-start-btn:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Photo Gallery (pg_city_gallery) */
.gallery { background: var(--neutral-10); color: var(--paper); }
.gallery .kicker span { color: var(--paper); }
.gallery .section-title { color: var(--h3-color); }
.gallery .kicker .line { background: rgba(247,247,242,0.15); }
.gallery-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 2rem; margin-top: 3rem; align-items: start; }
.gallery-right { min-height: 100%; }
.gallery-card { background: var(--neutral-70); border-radius: 16px; min-height: 100%; padding: 2rem; box-sizing: border-box; }
.gallery-stage {
	position: relative; border-radius: 16px; overflow: hidden;
	aspect-ratio: 16 / 9; background: var(--ink-2);
}
.gallery-slide {
	position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease;
	display: flex; align-items: center; justify-content: center;
}
.gallery-slide.active { opacity: 1; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 48px; height: 48px; border-radius: 50%; background: rgba(247,247,242,0.12);
	border: 1px solid rgba(247,247,242,0.25); color: var(--paper); font-size: 1.1rem;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	backdrop-filter: blur(6px); transition: background 0.2s ease;
}
.gallery-arrow:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.gallery-arrow.prev { left: 1.25rem; }
.gallery-arrow.next { right: 1.25rem; }
.gallery-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.gallery-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(247,247,242,0.25); cursor: pointer; border: none; padding: 0; }
.gallery-dot.active { background: var(--brand); }
@media (max-width: 860px) { .gallery-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Testimonials Waterfall */
.pg-testimonial { background: var(--white); color: var(--ink); overflow: hidden; }
.pg-testimonial .kicker h2, .pg-testimonial .kicker .line { color: var(--ink); }
.pg-testimonial .kicker .line { background: rgba(11,14,20,0.12); }
/* No .section-title color override here (unlike most other sections
   before this) — this is a light-background section, so the base
   .section-title gradient-text treatment already reads fine without a
   flat-color fallback. */
.pg-waterfall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 3.5rem; height: 520px; position: relative; }
.pg-waterfall::before, .pg-waterfall::after { content: ''; position: absolute; left: 0; right: 0; height: 30px; z-index: 2; pointer-events: none; }
.pg-waterfall::before { top: 0; background: linear-gradient(180deg, var(--white) 0%, transparent 100%); }
.pg-waterfall::after { bottom: 0; background: linear-gradient(0deg, var(--white) 0%, transparent 100%); }
.pg-wf-col { overflow: hidden; }
.pg-wf-track { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; }
.pg-wf-col.pg-up .pg-wf-track { animation: pgWfUp 26s linear infinite; }
.pg-wf-col.pg-down .pg-wf-track { animation: pgWfDown 32s linear infinite; }
@keyframes pgWfUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes pgWfDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.pg-wf-card {
	background: var(--paper); border: 1px solid rgba(11,14,20,0.08); border-top: 3px solid var(--brand); border-radius: 12px; padding: 1.5rem;
	display: grid; grid-template-columns: 1fr auto; column-gap: 1rem;
	grid-template-areas: "stars stars" "quote quote" "who logo" "role logo";
}
.pg-wf-card .stars { grid-area: stars; color: var(--brand-dark); font-size: 0.75rem; letter-spacing: 0.1em; }
.pg-wf-card p { grid-area: quote; margin: 0.6rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.pg-wf-card .who { grid-area: who; align-self: end; margin-top: 0.75rem; font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.pg-wf-card .role { grid-area: role; font-size: 0.72rem; color: var(--graphite); }
.pg-wf-logo { grid-area: logo; align-self: end; justify-self: end; box-sizing: content-box; width: 140px; height: 70px; object-fit: contain; object-position: center; border: 1px solid var(--white); background: var(--white); }
@media (prefers-reduced-motion: reduce) { .pg-wf-col.pg-up .pg-wf-track, .pg-wf-col.pg-down .pg-wf-track { animation: none; } }
@media (max-width: 860px) { .pg-waterfall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 460px; } .pg-wf-col:nth-child(3) { display: none; } }
@media (max-width: 560px) { .pg-waterfall { grid-template-columns: minmax(0, 1fr); } .pg-wf-col:nth-child(2) { display: none; } }

/* ---------------------------------------------------------------- Behind The Scenes */
.pg-showcase { margin-top: 5rem; background: var(--ink); position: relative; }
.pg-showcase-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pg-showcase-copy { padding: 5rem; background: var(--brand); color: var(--ink); display: flex; flex-direction: column; justify-content: center; }
.pg-showcase-copy .hero-tag { color: var(--ink); opacity: 0.7; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.pg-showcase-copy h2 { color: var(--ink); font-size: 2.5rem; margin-top: 1rem; text-transform: uppercase; }
.pg-showcase-copy p { color: rgba(11,14,20,0.75); margin-top: 1rem; font-size: 1.05rem; max-width: 420px; }
.pg-showcase-icon { width: clamp(48px, 7vw, 100px); height: clamp(48px, 7vw, 100px); margin-bottom: 1rem; }
.pg-showcase-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pg-showcase-visual { background: var(--ink); padding: 3rem; display: flex; align-items: center; }
.pg-term { font-family: 'SF Mono','Fira Code',monospace; font-size: 0.9rem; color: var(--brand); width: 100%; }
.pg-term .muted { color: rgba(247,247,242,0.35); }
.pg-term .line { margin-top: 0.85rem; }
@media (max-width: 980px) { .pg-showcase-inner { grid-template-columns: minmax(0, 1fr); } .pg-showcase-copy { padding: 3rem 1.5rem; } .pg-showcase-visual { padding: 2rem 1.5rem; } }

/* ---------------------------------------------------------------- Author Archive (templates/author.html) */
.pg-author-profile-hero { background: var(--mist); padding: 5rem 0; }
.pg-author-profile-hero-inner { display: flex; align-items: center; gap: 2.5rem; }
.pg-author-profile-photo { width: 140px; height: 140px; border-radius: 16px; overflow: hidden; flex-shrink: 0; background: var(--white); }
.pg-author-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-author-profile-copy .eyebrow { font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); text-transform: uppercase; letter-spacing: var(--eyebrow-letter-spacing); word-spacing: var(--eyebrow-word-spacing); font-weight: var(--eyebrow-weight); color: var(--brand-dark); margin: 0; }
.pg-author-profile-copy h1 { font-size: clamp(2rem, 4vw, 3rem); text-transform: none; margin-top: 0.5rem; color: var(--ink); }
.pg-author-profile-title { font-size: 0.95rem; font-weight: 700; color: var(--graphite); margin-top: 0.35rem; }
.pg-author-profile-bio { max-width: 640px; color: var(--graphite); line-height: 1.7; margin-top: 1rem; }
.pg-author-profile-work .pg-wp-index-grid { margin-top: 3rem; }
@media (max-width: 700px) { .pg-author-profile-hero-inner { flex-direction: column; align-items: flex-start; text-align: left; } .pg-author-profile-photo { width: 100px; height: 100px; } }

/* ---------------------------------------------------------------- City/Global Pricing (pg_city_pricing) */
/* Moved here from cities.css — this shortcode is now city-agnostic (renders
   with or without city context, see presentationgurus_city_pricing_shortcode())
   and gets inserted on non-city pages too (e.g. the homepage), which never
   load cities.css. */
.pg-city-pricing { background: var(--ink); color: var(--paper); }
.pg-pricing-kicker h2 { color: var(--alt-bg-1); white-space: normal; }
.pg-pricing-kicker .line { background: rgba(247,247,242,0.15); flex: 0 0 2rem; }
/* H2 kicker, H3 title, and intro paragraph above the pricing cards all set
   to the Alt Background 1 token, per explicit request. */
.pg-city-pricing .section-title {
	background: none; -webkit-background-clip: initial; background-clip: initial;
	color: var(--alt-bg-1);
}
.pg-pricing-intro { max-width: 1100px; margin-top: 1.5rem; }
.pg-pricing-intro h4 { font-family: 'Open Sans', sans-serif; font-size: 1.1rem; text-transform: uppercase; color: #31A4DE; } /* lightened from var(--brand)/#249EDC for WCAG AA on the dark card (was 4.25:1, now 4.55:1) */
.pg-pricing-intro p { margin-top: 0.5rem; line-height: 1.6; color: var(--alt-bg-1); }
.pg-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; align-items: stretch; }
@media (max-width: 860px) { .pg-pricing-grid { grid-template-columns: minmax(0, 1fr); } }
.pg-pricing-box { border-radius: 16px; padding: 2.5rem; display: flex; flex-direction: column; position: relative; }
.pg-pricing-popular-tag { position: absolute; top: -0.7rem; left: 2.5rem; background: var(--ink); color: var(--paper); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.35rem 0.9rem; border-radius: 999px; }
.pg-pricing-tier { font-size: 1.1rem; font-family: 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; }
.pg-pricing-price { margin-top: 0.75rem; font-family: 'Open Sans', sans-serif; font-size: 2rem; font-weight: 700; }
.pg-pricing-from { display: block; font-family: inherit; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin-bottom: 0.15rem; }
/* Inline right after the price above 1170px (where all three cards still
   have room for it). Below 1170px — the exact point the 3-column pricing
   grid gets too narrow for that — it drops to its own line directly under
   the price, but stays ONE continuous line (not three stacked lines); the
   font-size step-down is what keeps that single line from overflowing the
   narrower card. */
.pg-pricing-unit { font-size: 0.83rem; font-weight: 600; opacity: 0.7; text-transform: none; }
.pg-pricing-unit span { display: inline; white-space: nowrap; }
.pg-pricing-unit span + span { margin-left: 0.35em; }
@media (max-width: 1170px) {
	.pg-pricing-unit { display: block; margin-top: 0.35rem; font-size: 0.72rem; }
	.pg-pricing-unit span { display: inline; white-space: nowrap; }
	.pg-pricing-unit span + span { margin-left: 0.35em; }
}
.pg-pricing-box p { margin-top: 0.75rem; line-height: 1.6; font-size: 0.95rem; flex-grow: 1; }
.pg-pricing-disclaimer { margin-top: 1.5rem; font-size: 0.78rem; color: rgba(247,247,242,0.5); }
.pg-pricing-cta { margin-top: 1.5rem; display: inline-block; align-self: flex-start; padding: 0.75rem 1.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; }
/* Was var(--multi-card-1/2/3) (cyan-tinted) — recolored to the same 3
   pale-gray tones used for the portfolio/sample-decks cards, per explicit
   request. The 4th tone (#F6F8FA) and the hover tone (#E9EDF2) from that
   section are deliberately not used here. */
.pg-pricing-white { background: #FAFCFE; color: var(--ink); }
.pg-pricing-white .pg-pricing-tier { color: var(--ink); }
.pg-pricing-white p { color: var(--graphite); }
.pg-pricing-white .pg-pricing-cta { background: var(--ink); color: var(--paper); }
.pg-pricing-mist { background: #F5F7F9; color: var(--ink); }
.pg-pricing-mist .pg-pricing-tier { color: var(--ink); }
.pg-pricing-mist p { color: var(--ink); opacity: 0.7; }
.pg-pricing-mist .pg-pricing-cta { background: var(--ink); color: var(--paper); }
.pg-pricing-lime { background: #EAEEF4; color: var(--ink); }
.pg-pricing-lime .pg-pricing-tier { color: var(--ink); }
.pg-pricing-lime .pg-pricing-from, .pg-pricing-lime .pg-pricing-unit { opacity: 0.72; } /* this card's paler bg needs a touch more than the shared 0.7 default to clear 4.5:1 */
.pg-pricing-lime p { color: var(--ink); opacity: 0.85; }
.pg-pricing-lime .pg-pricing-cta { background: var(--ink); color: var(--paper); }
.pg-pricing-lime-dark { background: var(--brand-dark); color: var(--paper); }
.pg-pricing-lime-dark .pg-pricing-tier { color: var(--paper); }
.pg-pricing-lime-dark p { color: var(--paper); opacity: 0.85; }
.pg-pricing-lime-dark .pg-pricing-cta { background: var(--paper); color: var(--ink); }
.pg-pricing-black { background: var(--ink); color: var(--paper); }
.pg-pricing-black .pg-pricing-tier { color: var(--paper); }
.pg-pricing-black p { color: var(--paper); opacity: 0.75; }
.pg-pricing-black .pg-pricing-cta { background: var(--brand); color: var(--button-text); }
.pg-pricing-tier-sub { display: block; font-size: 0.95rem; font-weight: 700; text-transform: none; letter-spacing: normal; opacity: 0.8; margin-top: 0.3rem; }
.pg-pricing-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pg-pricing-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pg-pricing-grid-4 { grid-template-columns: minmax(0, 1fr); } }
.pg-pricing-cta:hover { opacity: 0.85; }

/* ---------------------------------------------------------------- City/Home Intro (pg_city_intro, pg_home_intro) */
/* Moved here from cities.css — pg_home_intro reuses these exact same
   classes on the homepage, which never loads cities.css. */
/* ---------------------------------------------------------------- HTML Sitemap */
.page-id-1444 .wp-block-post-title { display: none; }
.pg-sitemap-index-heading { font-family: 'Open Sans', sans-serif; text-transform: uppercase; font-size: 1.4rem; }
.pg-sitemap-states-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem 2rem; margin-top: 2rem; }
@media (max-width: 860px) { .pg-sitemap-states-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pg-sitemap-states-grid { grid-template-columns: minmax(0, 1fr); } }
.pg-sitemap-state-link { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.9rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(11,14,20,0.08); }
.pg-sitemap-state-link:hover { color: var(--brand-dark); text-decoration: underline; }
.pg-sitemap-state-page { padding: 6rem 3rem; max-width: 1000px; margin: 0 auto; }
.pg-sitemap-breadcrumb a { color: var(--graphite); text-decoration: underline; font-size: 0.9rem; }
.pg-sitemap-state-page h1 { font-family: 'Open Sans', sans-serif; text-transform: uppercase; margin-top: 1.5rem; font-size: 1.4rem; }
.pg-sitemap-county { font-family: 'Open Sans', sans-serif; font-size: 1.15rem; text-transform: uppercase; color: var(--brand-dark); margin-top: 2.5rem; border-bottom: 1px solid rgba(11,14,20,0.1); padding-bottom: 0.5rem; }
.pg-sitemap-county a { color: inherit; text-decoration: none; }
.pg-sitemap-county a:hover { color: var(--eyebrow-color); }
.pg-sitemap-city-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 2rem; }
@media (max-width: 860px) { .pg-sitemap-city-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pg-sitemap-city-list { grid-template-columns: minmax(0, 1fr); } }
.pg-sitemap-city-list a { color: var(--ink); text-decoration: none; }
.pg-sitemap-city-list a:hover { color: var(--brand-dark); text-decoration: underline; }
/* State page's county/city link listing, moved to just above the footer
   per explicit request — tightened padding/spacing versus the standard
   .section 8rem top/bottom and .pg-sitemap-county's 2.5rem margin-top. */
.pg-sitemap-county-links-section { padding: 8rem 0; }
.pg-sitemap-county-links-section .pg-sitemap-county { margin-top: 1rem; }
.pg-sitemap-county-links-section .pg-sitemap-county:first-child { margin-top: 0; }
.pg-sitemap-county-links-section .pg-sitemap-city-list { margin-top: 0.5rem; gap: 0.35rem 1.5rem; }

.pg-presdesign-sitemap { background: var(--paper); }
.pg-presdesign-sitemap-inner { max-width: 1100px; margin: 0 auto; padding: 0 3rem; }

.pg-accordion-section { background: var(--white); }
.pg-accordion-section .pg-industries-intro { margin-bottom: 2rem; }
.pg-accordion { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.pg-accordion-item { background: var(--paper, #fff); border: 1px solid rgba(11,14,20,0.08); border-radius: 0.5rem; padding: 1.1rem 1.5rem; }
.pg-accordion-item summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; }
.pg-accordion-item summary::-webkit-details-marker { display: none; }
.pg-accordion-item summary::after { content: '+'; float: right; font-weight: 400; }
.pg-accordion-item[open] summary::after { content: '\2212'; }
.pg-accordion-body { margin-top: 0.85rem; }
.pg-accordion-body p { margin: 0; color: var(--graphite); }
.pg-accordion-closing { margin-top: 3rem; }
.pg-accordion-closing h4 { margin-bottom: 0.75rem; }

/* WPForms ships blue as its default button/progress-bar color (--wpforms-button-background-color, --wpforms-page-break-color) — override sitewide to match the brand's lime-dark button color used everywhere else. */
.wpforms-container {
	--wpforms-button-background-color: #687F19 !important;
	--wpforms-button-border-color: #687F19 !important;
	--wpforms-page-break-color: #687F19 !important;
}

/* Gravity Forms ships its own stock gray (#767676) for the multi-page progress
   bar title — fails WCAG AA on our #f4f4f4 page background (4.12:1). */
.gf_progressbar_title { color: #565F6C !important; }

/* ---------------------------------------------------------------- Custom Slide Makeovers page */
.pg-makeover-pricing { background: var(--alt-bg-2); }
.pg-makeover-pricing .section-title { color: var(--ink); }
.pg-makeover-pricing .pg-pricing-kicker h2 { color: var(--graphite); }
.pg-makeover-hero .pg-makeover-lede { margin-top: 1.25rem; font-size: 1.05rem; color: var(--graphite); }
.pg-makeover-badges { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.pg-makeover-badge { background: var(--mist); color: var(--ink); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.6rem 1.25rem; border-radius: 999px; }
.pg-makeover-copy { margin-top: 2.5rem; }
.pg-makeover-copy p { margin-top: 1rem; line-height: 1.7; color: var(--graphite); }
.pg-makeover-copy p:first-child { margin-top: 0; }
.pg-makeover-feature-block { margin-top: 3rem; background: var(--mist); border-radius: 16px; padding: 2.5rem; }
.pg-makeover-feature-block h3 { margin: 0; }
.pg-makeover-feature-block > p { margin-top: 0.5rem; color: var(--graphite); }
.pg-check-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.pg-check-list li { position: relative; padding-left: 1.75rem; font-weight: 600; }
.pg-check-list li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--brand-dark); font-weight: 800; }

/* ---------------------------------------------------------------- Client Logos (right-to-left marquee) */
.pg-client-logos-marquee { position: relative; overflow: hidden; margin-top: 3.5rem; }
.pg-client-logos-marquee::before, .pg-client-logos-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.pg-client-logos-marquee::before { left: 0; background: linear-gradient(90deg, var(--paper) 0%, transparent 100%); }
.pg-client-logos-marquee::after { right: 0; background: linear-gradient(270deg, var(--paper) 0%, transparent 100%); }
.pg-client-logos-track { display: flex; align-items: center; gap: 3.5rem; width: max-content; animation: pgClientLogosScroll 70s linear infinite; will-change: transform; }
@keyframes pgClientLogosScroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .pg-client-logos-track { animation: none; } }
.pg-client-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; filter: grayscale(100%); opacity: 0.55; transition: opacity 0.2s ease, filter 0.2s ease; }
.pg-client-logo:hover { filter: grayscale(0%); opacity: 1; }
.pg-client-logo img { height: 84px; width: auto; max-width: 260px; }

/* Was var(--mist) (pale blue, alt-bg-2) — swapped for the same pale gray
   used in the portfolio/sample-decks cards section, per explicit request. */
.pg-city-intro { background: #F5F7F9; }
.pg-intro-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.pg-intro-visual { margin-bottom: 0; overflow: hidden; border-radius: 8px; }
.pg-intro-visual img, .pg-intro-visual picture { display: block !important; width: 100% !important; height: auto !important; max-width: none !important; }
.pg-intro-copy { display: block; }
@media (max-width: 860px) {
	.pg-intro-layout { grid-template-columns: 1fr; }
	.pg-intro-visual { margin-bottom: 2rem; }
}
/* Was Open Sans + all-caps + var(--ink) (navy-tinted), then briefly a
   solid dark-black color — now matches the same gradient-text treatment as
   every other .section-title on the page, per explicit request. */
.pg-intro-copy .section-title {
	font-family: var(--h3-font); font-size: clamp(1.75rem, 3vw, 2.5rem); text-transform: capitalize; line-height: 1.05;
	background: none; -webkit-background-clip: initial; background-clip: initial;
	color: var(--h3-color);
}
.pg-intro-copy p { color: var(--body-color); opacity: 0.75; margin-top: 1.25rem; line-height: 1.7; }
/* This kicker's text is long (and on city pages includes the dynamic city
   name), unlike the site's short static eyebrows — let it wrap instead of
   overflowing past the section's padding on narrow screens (same fix as
   the map section's per-city kicker). */
.pg-intro-kicker h2 { white-space: normal; line-height: 1.4; }
.pg-intro-kicker .line { flex: 0 0 2rem; }
.pg-intro-body h4 { font-family: 'Open Sans', sans-serif; font-size: 1.15rem; text-transform: uppercase; color: var(--body-color); opacity: 1; margin-top: 2rem; }
.pg-intro-body h4:first-child { margin-top: 1.5rem; }
/* City-name hyperlink inside the generated overview paragraph: reads as
   plain body text (no distinct link color, no underline, no hover change)
   even though it's still a real rel="nofollow" target="_blank" link under
   the hood. */
.pg-intro-body p a,
.pg-intro-body p a:hover,
.pg-intro-body p a:focus,
.pg-intro-body p a:visited { color: inherit; text-decoration: none; font-weight: 700; }
/* Accordion "MORE" toggle: gray (same as the section eyebrow/kicker color),
   underlined, no hover state change, with a downward arrow that flips when
   expanded. Compound selector (both classes together) deliberately used so
   this beats cities.css's .pg-ctx-toggle rule (which sets --brand-dark green for
   its own, different inline-arrow UI) on specificity rather than relying on
   stylesheet load order. */
.pg-intro-more-toggle.pg-ctx-toggle,
.pg-intro-more-toggle.pg-ctx-toggle:hover,
.pg-intro-more-toggle.pg-ctx-toggle:focus { background: none; border: none; padding: 0; margin: 1rem 0 0; font: inherit; font-size: 11px; color: var(--graphite) !important; text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.pg-intro-more-arrow { display: inline-block; transition: transform 0.2s ease; text-decoration: none; color: inherit; }
.pg-intro-more-toggle.pg-ctx-toggle[aria-expanded="true"] { transform: none; }
.pg-intro-more-toggle[aria-expanded="true"] .pg-intro-more-arrow { transform: rotate(180deg); }
.pg-intro-more { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.pg-intro-more.is-open { max-height: 2000px; }
.pg-read-more { background: none; border: none; padding: 0; margin: 1rem 0 0; font: inherit; font-size: 11px; color: var(--graphite); text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.pg-read-more-label::before { content: "MORE"; }
.pg-read-more svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s ease; }
.pg-read-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.pg-intro-toc { border-left: 2px solid rgba(11,14,20,0.15); padding-left: 1.75rem; }
.pg-intro-toc-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--ink); }
.pg-intro-toc ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.pg-intro-toc a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; line-height: 1.4; }
.pg-intro-toc a:hover { color: var(--brand-dark); text-decoration: underline; }
@media (max-width: 860px) { .pg-intro-toc { border-left: none; border-top: 2px solid rgba(11,14,20,0.15); padding-left: 0; padding-top: 1.5rem; } }
.pg-intro-sidebar { display: flex; flex-direction: column; gap: 2rem; height: 100%; }
.pg-intro-jr-card { margin-top: auto; background: var(--alt-bg-3); border: 1px solid rgba(11,14,20,0.1); border-radius: 16px; padding: 1.75rem; }
.pg-intro-jr-card h4 { font-family: 'Open Sans', sans-serif; font-size: 1.05rem; text-transform: none; color: var(--white); margin-top: 0; line-height: 1.4; }
.pg-intro-jr-header { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.25rem; }
.pg-intro-jr-photo { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--mist); }
.pg-intro-jr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-intro-jr-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--brand-dark); line-height: 1.6; }
.pg-intro-jr-card p { margin-top: 0.65rem; font-size: 0.92rem; line-height: 1.6; color: var(--white); }
.pg-intro-jr-link { color: var(--white); text-decoration: underline; white-space: nowrap; }
.pg-intro-jr-link:hover { color: var(--brand-dark); }

/* ---------------------------------------------------------------- How It Works: Four Phases */
.pg-phases-intro { max-width: 720px; margin-top: 1.5rem; }
.pg-phases-intro p { color: var(--graphite); line-height: 1.7; margin-top: 1rem; }
.pg-phases-intro p:first-child { margin-top: 0; }

/* The dashed vertical "path" connecting all four phases — one continuous
   line behind the numbered markers, which is what turns four otherwise
   disconnected rows into a visible journey. */
.pg-phases-track { position: relative; margin-top: 4rem; }
/* Back to a dotted line in solid brand blue (::before). A separate small
   "laser" streak (::after) — brand blue -> light blue -> white -> back —
   runs on top of it, animating fast and continuously top-to-bottom, per
   explicit request ("kind of like a laser beam going through"). The beam
   is a short bright segment inside a mostly-transparent repeating
   gradient, so most of the line just shows the dotted blue underneath. */
.pg-phases-track::before {
	content: ''; position: absolute; top: 28px; bottom: 28px; left: 50%;
	border-left: 3px dotted var(--brand); opacity: 0.55; z-index: 0;
}
.pg-phases-track::after {
	content: ''; position: absolute; top: 28px; bottom: 28px; left: 50%; width: 3px;
	background: repeating-linear-gradient(180deg,
		transparent 0px, transparent 187px,
		var(--brand-light) 194px,
		#FFFFFF 200px,
		var(--brand-light) 206px,
		transparent 213px, transparent 240px
	);
	z-index: 0;
	animation: pgTimelineBeam 2s linear infinite;
}
@keyframes pgTimelineBeam {
	from { background-position-y: 0; }
	to   { background-position-y: 240px; }
}
@media (prefers-reduced-motion: reduce) {
	.pg-phases-track::after { animation: none; }
}
.pg-phase-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 2.25rem; align-items: center; margin-top: 3.5rem; position: relative; z-index: 1; }
.pg-phase-row:first-child { margin-top: 0; }
.pg-phase-copy { order: 1; }
.pg-phase-marker { order: 2; justify-self: center; }
.pg-phase-card { order: 3; }
.pg-phase-row-reverse .pg-phase-copy { order: 3; }
.pg-phase-row-reverse .pg-phase-card { order: 1; }
/* Step badges (numbered circle marker + "STEP N" pill) — solid var(--ink)
   swapped for a green-to-teal gradient, per explicit request. */
.pg-phase-marker span {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%; color: var(--alt-bg-1);
	background: linear-gradient(135deg, var(--button-bg), var(--alt-bg-3));
	font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 1.15rem;
	box-shadow: 0 0 0 6px var(--paper);
}
.pg-phase-num {
	display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 0.95rem;
	text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--alt-bg-1);
	background: linear-gradient(135deg, var(--button-bg), var(--alt-bg-3));
	padding: 0.55rem 1.75rem; border-radius: 999px;
}
.pg-phase-copy h4 { font-family: 'Open Sans', sans-serif; font-size: 1.5rem; text-transform: none; color: var(--ink); margin-top: 0.6rem; line-height: 1.25; }
.pg-phase-copy p { color: var(--graphite); line-height: 1.7; margin-top: 1rem; }
/* Tighter than the first pass — less padding/gap, smaller item text, so the
   cards read as compact reference boxes rather than another full copy block.
   Same mint-to-white fade as the site's custom-hero pages, plus a soft gray
   border and a small blurred orb wandering behind the content — the same
   technique as the hero orbs, just scaled down to card size (px-based
   wander distances instead of vw/vh, which would send it flying off a box
   this small almost immediately). */
.pg-phase-card {
	position: relative; overflow: hidden; isolation: isolate;
	/* Plain white — was a mint-to-white gradient, replaced per explicit
	   request now that the card carries its own moving-color orb instead. */
	background: var(--white);
	border: 1px solid rgba(11,14,20,0.1);
	border-radius: 14px; padding: 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem;
}
.pg-phase-card-orb {
	position: absolute; top: -20px; left: -20px; width: 120px; height: 120px; border-radius: 60px;
	background: radial-gradient(circle, var(--button-bg) 0%, transparent 80%);
	filter: blur(50px) saturate(1.6); opacity: 0.85; z-index: 0; pointer-events: none;
	animation: pgCardOrbWander 6s ease-in-out infinite;
}
/* All four start at animation-delay:0 so every orb visually begins at its
   assigned corner (see below) the moment the page loads — a negative delay
   would start the animation already partway through its wander path,
   skipping past the corner entirely. Differing durations alone are enough
   to drift the four out of phase with each other over time, without any
   of them skipping their starting position. */
.pg-phase-row:nth-child(1) .pg-phase-card-orb { animation-duration: 6s; animation-delay: 0s; }
.pg-phase-row:nth-child(2) .pg-phase-card-orb { animation-duration: 7.3s; animation-delay: 0s; }
.pg-phase-row:nth-child(3) .pg-phase-card-orb { animation-duration: 5.6s; animation-delay: 0s; }
.pg-phase-row:nth-child(4) .pg-phase-card-orb { animation-duration: 8.1s; animation-delay: 0s; }
/* Stagger each box's orb to a different corner (1: upper-left, 2: upper-
   right, 3: bottom-right, 4: bottom-left) instead of all four starting from
   the same corner — reads as more varied/organic across the section. */
.pg-phase-row:nth-child(1) .pg-phase-card-orb { top: -20px; left: -20px; right: auto; bottom: auto; }
.pg-phase-row:nth-child(2) .pg-phase-card-orb { top: -20px; right: -20px; left: auto; bottom: auto; }
.pg-phase-row:nth-child(3) .pg-phase-card-orb { bottom: -20px; right: -20px; top: auto; left: auto; animation-name: pgCardOrbWanderUpLeft; }
.pg-phase-row:nth-child(4) .pg-phase-card-orb { bottom: -20px; left: -20px; top: auto; right: auto; animation-name: pgCardOrbWanderUpRight; }
/* Faster (16s -> 6s) and covers much more of the card's area — larger
   translate distances plus an extra midpoint so it doesn't just retrace a
   straight line back and forth. */
@keyframes pgCardOrbWander {
	0%   { transform: translate(0, 0) scale(1); }
	20%  { transform: translate(160px, 60px) scale(1.2); }
	40%  { transform: translate(90px, 220px) scale(0.85); }
	60%  { transform: translate(-60px, 150px) scale(1.1); }
	80%  { transform: translate(-80px, 20px) scale(0.95); }
	100% { transform: translate(0, 0) scale(1); }
}
/* Mirrored Y (and, for the bottom-right orb, mirrored X too) so orbs
   anchored to the BOTTOM of their card wander UP and INWARD instead of
   further down/out — with .pg-phase-card's overflow:hidden, the original
   down-drifting keyframes pushed a bottom-anchored orb straight out of the
   clipped area almost immediately, leaving the card looking unlit for most
   of the cycle. */
@keyframes pgCardOrbWanderUpLeft {
	0%   { transform: translate(0, 0) scale(1); }
	20%  { transform: translate(-160px, -60px) scale(1.2); }
	40%  { transform: translate(-90px, -220px) scale(0.85); }
	60%  { transform: translate(60px, -150px) scale(1.1); }
	80%  { transform: translate(80px, -20px) scale(0.95); }
	100% { transform: translate(0, 0) scale(1); }
}
@keyframes pgCardOrbWanderUpRight {
	0%   { transform: translate(0, 0) scale(1); }
	20%  { transform: translate(160px, -60px) scale(1.2); }
	40%  { transform: translate(90px, -220px) scale(0.85); }
	60%  { transform: translate(-60px, -150px) scale(1.1); }
	80%  { transform: translate(-80px, -20px) scale(0.95); }
	100% { transform: translate(0, 0) scale(1); }
}
.pg-phase-item { position: relative; z-index: 1; }
.pg-phase-item h5 { font-family: 'Open Sans', sans-serif; font-size: 0.92rem; text-transform: none; color: var(--ink); font-weight: 700; }
.pg-phase-item p { color: var(--graphite); line-height: 1.5; margin-top: 0.25rem; font-size: 0.82rem; }
@media (max-width: 860px) {
	.pg-phases-track::before, .pg-phases-track::after { display: none; }
	.pg-phase-row, .pg-phase-row-reverse { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
	.pg-phase-marker { display: none; }
	.pg-phase-row-reverse .pg-phase-copy, .pg-phase-row-reverse .pg-phase-card { order: initial; }
}

/* ---------------------------------------------------------------- Enable Divider Gradient */
/* Small accent bar (32x4) used above a heading/kicker, borrowed concept
   from an "EnableDividerGradientTop" element seen elsewhere — same shape
   and angle, recolored to our own blues instead of their orange/pink so it
   stays keyed to the brand tokens (--brand-light/--brand/--brand-dark/
   --alt-bg-3) and updates automatically if the brand color changes. */
.enable-divider__gradient-top {
	/* Action green (--button-bg) -> dark teal bg (--alt-bg-3) -> light blue
	   (--brand-light), per explicit request. */
	background: linear-gradient(252.85deg,
		var(--button-bg) 8.98%,
		var(--alt-bg-3) 47%,
		var(--brand-light) 86.39%
	);
	width: 64px;
	height: 6px;
	line-height: 6px;
	margin-bottom: 12px;
	display: inline-block;
}

/* ============================================
   Slide Makeover v2 Page Styles
   ============================================ */

.pg-makeover-hero {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
	padding: 4rem 2rem;
	text-align: center;
	margin-bottom: 3rem;
}

.pg-makeover-hero .kicker {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--eyebrow-color);
	margin-bottom: 1rem;
}

.pg-makeover-hero h1 {
	margin: 1.5rem 0;
	font-size: 2.5rem;
}

.pg-makeover-hero .hero-answer-block {
	background: rgba(255,255,255,0.5);
	padding: 1.5rem;
	border-radius: 0.5rem;
	margin: 2rem auto;
	max-width: 600px;
	font-size: 1.05rem;
	line-height: 1.7;
}

.pg-makeover-hero .hero-image {
	max-width: 800px;
	width: 100%;
	height: auto;
	margin: 2rem 0;
	border-radius: 0.5rem;
}

.pg-makeover-hero .hero-cta {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.pg-makeover-hero .btn {
	display: inline-block;
	padding: 0.875rem 1.5rem;
	border-radius: 0.375rem;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
}

.pg-makeover-hero .btn-primary {
	background: var(--brand);
	color: white;
}

.pg-makeover-hero .btn-primary:hover {
	opacity: 0.9;
}

.pg-makeover-hero .btn-secondary {
	background: transparent;
	color: var(--brand);
	border: 2px solid var(--brand);
}

.pg-makeover-hero .btn-secondary:hover {
	background: var(--brand);
	color: white;
}

.pg-breadcrumb {
	padding: 1.5rem 2rem;
	font-size: 0.9rem;
}

.pg-breadcrumb ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pg-breadcrumb li {
	display: flex;
	align-items: center;
}

.pg-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 0.5rem;
}

.pg-breadcrumb a {
	color: var(--brand);
	text-decoration: none;
}

.pg-breadcrumb a:hover {
	text-decoration: underline;
}

.pg-makeover-section {
	max-width: 1000px;
	margin: 3rem auto;
	padding: 0 2rem;
}

.pg-makeover-section h2 {
	margin: 2rem 0 1rem;
	font-size: 1.8rem;
}

.pg-makeover-section p {
	line-height: 1.8;
	margin-bottom: 1.25rem;
	font-size: 1rem;
}

.pg-makeover-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin: 2rem 0;
}

.feature-card {
	padding: 1.5rem;
	border: 1px solid #e0e0e0;
	border-radius: 0.5rem;
	background: #fafafa;
}

.feature-card h3 {
	font-size: 1.1rem;
	margin-bottom: 0.75rem;
	color: var(--h3-color);
}

.feature-card p {
	font-size: 0.95rem;
	margin: 0;
}

.pg-makeover-pricing-table,
.pg-makeover-comparison {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
	background: white;
}

.pg-makeover-pricing-table thead,
.pg-makeover-comparison thead {
	background: #f5f5f5;
}

.pg-makeover-pricing-table th,
.pg-makeover-comparison th {
	padding: 1rem;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid #ddd;
}

.pg-makeover-pricing-table td,
.pg-makeover-comparison td {
	padding: 1rem;
	border-bottom: 1px solid #e0e0e0;
}

.pg-makeover-pricing-table tbody tr:hover,
.pg-makeover-comparison tbody tr:hover {
	background: #f9f9f9;
}

.pg-makeover-process {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.step {
	padding: 1.5rem;
	background: #f9f9f9;
	border-left: 4px solid var(--brand);
	border-radius: 0.375rem;
}

.step h3 {
	font-size: 1.1rem;
	margin-bottom: 0.75rem;
}

.step p {
	margin: 0;
	font-size: 0.95rem;
}

.pg-makeover-portfolio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin: 2rem 0;
}

.portfolio-item {
	padding: 1.5rem;
	border: 1px solid #e0e0e0;
	border-radius: 0.5rem;
	background: #fafafa;
	text-align: center;
}

.portfolio-item p {
	margin: 0.5rem 0;
}

.portfolio-item .placeholder {
	color: #999;
	font-style: italic;
	padding: 2rem 0;
	font-size: 0.9rem;
}

.faq-item {
	margin: 1.5rem 0;
	padding: 1.25rem;
	background: #f9f9f9;
	border-left: 4px solid var(--brand);
	border-radius: 0.375rem;
}

.faq-item strong {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 1.05rem;
	color: var(--h4-color);
}

.faq-item p {
	margin: 0;
	font-size: 0.95rem;
}

.pg-makeover-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.review-item {
	padding: 1.5rem;
	background: white;
	border: 1px solid #e0e0e0;
	border-radius: 0.5rem;
	border-left: 4px solid var(--brand);
}

.review-item p {
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 1rem 0;
	font-style: italic;
}

.review-item .placeholder {
	color: #999;
}

.review-author {
	font-weight: 600;
	font-size: 0.95rem;
}

.pg-makeover-cta {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
	padding: 3rem 2rem;
	text-align: center;
	border-radius: 0.5rem;
	margin: 3rem auto;
	max-width: 700px;
}

.pg-makeover-cta h2 {
	margin-top: 0;
}

.cta-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.cta-buttons .btn {
	display: inline-block;
	padding: 0.875rem 1.5rem;
	border-radius: 0.375rem;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	background: var(--brand);
	color: white;
}

.cta-buttons .btn:hover {
	opacity: 0.9;
}

.cta-buttons .btn-secondary {
	background: white;
	color: var(--brand);
	border: 2px solid var(--brand);
}

.cta-buttons .btn-secondary:hover {
	background: var(--brand);
	color: white;
}

@media (max-width: 768px) {
	.pg-makeover-hero h1 {
		font-size: 1.8rem;
	}

	.pg-makeover-section {
		padding: 0 1rem;
	}

	.pg-makeover-hero .hero-cta,
	.cta-buttons {
		flex-direction: column;
	}

	.pg-makeover-hero .btn,
	.cta-buttons .btn {
		width: 100%;
		text-align: center;
	}

	.pg-makeover-pricing-table,
	.pg-makeover-comparison {
		font-size: 0.85rem;
	}

	.pg-makeover-pricing-table th,
	.pg-makeover-comparison th,
	.pg-makeover-pricing-table td,
	.pg-makeover-comparison td {
		padding: 0.75rem 0.5rem;
	}
}

/* ---------------------------------------------------------------- Service Hub Pages (24-hour, PowerPoint Agency, etc.) */
.pg-service-hero {
	background: linear-gradient(135deg, var(--forest-fade-gradient-background, #0D1323 0%, #171E30 100%));
	color: white;
	padding: 6rem 3rem;
	text-align: center;
	margin-bottom: 3rem;
}
.pg-service-hero-title {
	font-size: clamp(2.5rem, 8vw, 3.5rem);
	color: white;
	margin-bottom: 1.5rem;
}
.pg-service-hero-subtitle {
	font-size: 1.3rem;
	color: #B4D334;
	margin: 0 0 2rem 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.pg-service-content {
	padding: 4rem 0;
	max-width: 900px;
}
.pg-service-content h2 {
	font-size: 1.75rem;
	margin-top: 2.5rem;
	margin-bottom: 1.5rem;
	color: #11567f;
}
.pg-service-content h2:first-of-type {
	margin-top: 0;
}
.pg-service-content p {
	font-size: 1rem;
	line-height: 1.8;
	color: #383838;
	margin-bottom: 1.5rem;
}

.pg-cta-section {
	background: #F4F7E9;
	padding: 3rem;
	border-radius: 12px;
	text-align: center;
	margin: 4rem 0;
	max-width: 900px;
}
.pg-cta-section h2 {
	color: #11567f;
	margin-bottom: 1rem;
	font-size: 2rem;
}
.pg-cta-section p {
	font-size: 1.1rem;
	color: #383838;
	margin-bottom: 2rem;
}
.pg-cta-primary {
	font-size: 1rem;
	padding: 0.75rem 2.5rem !important;
}

.pg-service-additional {
	padding: 4rem 0 2rem;
	max-width: 900px;
}
.pg-service-additional h2 {
	font-size: 1.5rem;
	color: #11567f;
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}
.pg-service-additional a {
	color: #1B76A5;
	text-decoration: none;
	font-weight: 600;
}
.pg-service-additional a:hover {
	color: #249edc;
	text-decoration: underline;
}

/* Hub page FAQ — 2-column grid layout */
.pg-faq-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 3rem;
	margin-top: 2rem;
}
.pg-faq-card {
	padding: 1.5rem;
	background: var(--paper);
	border-radius: 8px;
}
.pg-faq-card h4 {
	font-size: 1.1rem;
	color: var(--ink);
	margin: 0 0 1rem 0;
	line-height: 1.4;
}
.pg-faq-card p {
	font-size: 0.95rem;
	color: var(--body-color);
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.pg-faq-list {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.pg-service-hero {
		padding: 3rem 1.5rem;
	}
	.pg-service-hero-title {
		font-size: 2rem;
	}
	.pg-service-hero-subtitle {
		font-size: 1rem;
	}
	.pg-cta-section {
		padding: 2rem 1.5rem;
		margin: 2rem 0;
	}
	.pg-cta-section h2 {
		font-size: 1.5rem;
	}
}