/* 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/--lime/--paper/--white/--mist/--lime-2/
   --lime-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: var(--brand); }
/* 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; }
.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(--lime); 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. */
.pg-page-content .wp-block-post-content .pg-cta-block { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
@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); }
.btn-header { background: var(--button-bg); color: var(--white); border-color: var(--button-bg); }
.btn-header:hover { background: var(--ink); color: var(--button-bg); border-color: var(--ink); }

/* 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(--lime) 0%, transparent 70%); top: 12%; right: 5%; opacity: 0.4; animation: pgWanderB 21s ease-in-out infinite; mix-blend-mode: screen; }

/* Shared editorial section header, reused by most sections */
.kicker { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.kicker .line { flex: 1; height: 1px; background: rgba(11,14,20,0.15); }
.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; }
.section-title { font-size: clamp(2rem, 4vw, 3.25rem); text-transform: uppercase; line-height: 1; }
/* "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(--paper); position: sticky; top: 0; z-index: 50; }
@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: 28px; 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(--lime-2); }
/* 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. Drop the button first (nav stays visible)
   since the nav links matter more than the CTA at this size. */
@media (max-width: 1100px) { .pg-cta-desktop { display: none; } }

/* Tier 1b: with the button already gone, logo + nav alone still get tight
   around 768px and start wrapping/overlapping. Tighten the link spacing
   (and font-size slightly) instead of dropping to the hamburger yet, so all
   5 links keep showing as text on tablets. */
@media (max-width: 860px) {
	.pg-nav-desktop ul { gap: 1.1rem; }
	.pg-nav-desktop a { font-size: 0.78rem; }
}

/* 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; }
}

/* ---------------------------------------------------------------- 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(--lime); }
@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; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.footer-grid h4 { color: var(--lime); 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: rgba(247,247,242,0.6); font-size: 0.9rem; text-decoration: none; line-height: 2; }
.footer-grid a:hover { color: var(--lime); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid ul a { display: inline-block; }
.footer-grid .logo { color: var(--paper); margin-bottom: 1rem; }
.copyright { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 4rem; font-size: 0.78rem; color: rgba(247,247,242,0.35); 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: rgba(247,247,242,0.35); }
.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: rgba(247,247,242,0.35); text-decoration: none; font-size: 0.78rem; }
.legal-links a:hover { color: var(--lime); }
@media (max-width: 860px) {
	.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.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(--lime) 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(--lime); color: var(--ink); 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(--lime); }
.pg-hero .hero-bleed h1 .line3 { color: var(--lime); }
/* "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(--lime); }
.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; }
.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(--lime-2); }
.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; }
.pg-compare-icon-badge { width: clamp(56px, 8vw, 130px); height: clamp(56px, 8vw, 130px); 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(--lime); 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. */
	.pg-compare-col { display: flex; align-items: flex-start; gap: 1.5rem; }
	.pg-compare-icon-badge { width: 100px; height: 100px; flex-shrink: 0; margin-bottom: 0; }
}

/* ---------------------------------------------------------------- CTA Block ("Ready To Get Started") */
.pg-cta-block { background: var(--ink); color: var(--paper); text-align: left; }
.pg-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
/* 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; }
/* 5.45rem is the largest size "GET STARTED?" fits on one line within the
   copy column's width before wrapping to a third line (which would blow
   past the form card's height) — the practical ceiling for "bigger" here. */
/* color explicit here (not just inherited from .pg-cta-block) because the
   design-token system's blanket `h2 { color: var(--h2-color) }` rule
   (line 35) otherwise wins the cascade for the color property specifically
   — inheritance only fills in properties nothing else declares, and that
   rule declares color directly on every h2 regardless of ancestor. Without
   this, "Ready To" / the closing "?" render in near-black on the block's
   dark background and disappear. */
.pg-cta-copy h2 { font-size: clamp(2rem, 6.4vw, 5.45rem); font-weight: 900; text-transform: uppercase; line-height: 0.95; overflow-wrap: break-word; color: var(--paper); }
.pg-cta-copy .accent { color: var(--lime); font-weight: 900; }
.pg-cta-copy p { margin-top: 1.25rem; max-width: 480px; color: rgba(247,247,242,0.7); font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 860px) {
	.pg-cta-grid { grid-template-columns: minmax(0, 1fr); }
	/* Below the stacking breakpoint the copy column jumps from half-width to
	   full-width, so the same vw ratio used above (calibrated for the
	   half-width desktop column) renders proportionally too small here —
	   scale up to actually fill the newly-available horizontal space. */
	.pg-cta-copy h2 { font-size: clamp(2.5rem, 15vw, 6rem); }
}

.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; }
/* 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: 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(--brand); color: var(--white); border-color: var(--brand);
}
/* 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. */
.pg-cta-form-cta:hover { background: var(--alt-bg-1); color: var(--alt-bg-3); border-color: var(--alt-bg-1); 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(--lime-2); 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(--lime-2); }
.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). */
.pg-call-number {
	margin-top: 1.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
	width: 280px; white-space: nowrap; font-family: 'Open Sans', sans-serif; font-size: 1.35rem; font-weight: 700;
	color: var(--alt-bg-1); text-decoration: none; padding: 0.9rem 1.5rem; border-radius: 999px;
	background: var(--lime); 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 .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. */
.pg-cta-open-note { margin: 3rem 0; color: var(--alt-bg-1); font-weight: 700; font-size: 1rem; text-align: 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(--lime-2); }
.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(--lime-2); }
.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(--lime); color: var(--lime); }
/* 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: var(--lime); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-top: 0.35rem; }
.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(--lime); }
.pg-team-thumb::after { content: ''; position: absolute; inset: 0; background: var(--lime); 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(--lime-2); 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); } }

/* ---------------------------------------------------------------- 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. */
.pg-video-section { background: var(--ink); 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; }
.pg-video-section .section-title { color: var(--paper); }
/* 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(--alt-bg-2); 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(--lime); 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(--lime); 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(--lime); font-size: 0.9rem; font-weight: 600; cursor: pointer; text-align: center; }
.pg-video-start-btn:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 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); }
.pg-testimonial .section-title { color: var(--ink); }
.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(--lime); 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(--lime-2); 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(--lime); 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(--lime); 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(--lime-2); 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: rgba(247,247,242,0.55); white-space: normal; }
.pg-pricing-kicker .line { background: rgba(247,247,242,0.15); flex: 0 0 2rem; }
.pg-city-pricing .section-title { color: var(--paper); }
.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: var(--lime); }
.pg-pricing-intro p { margin-top: 0.5rem; line-height: 1.6; color: rgba(247,247,242,0.7); }
.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.6; 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.6; 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; }
.pg-pricing-white { background: var(--multi-card-1); 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: var(--multi-card-2); 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: var(--multi-card-3); color: var(--ink); }
.pg-pricing-lime .pg-pricing-tier { color: var(--ink); }
.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(--lime-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(--lime); color: var(--ink); }
.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(--lime-2); 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(--lime-2); 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(--lime-2); 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(--mist); }
.pg-presdesign-sitemap-inner { max-width: 1100px; margin: 0 auto; padding: 0 3rem; }

.pg-accordion-section { background: var(--mist); }
.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: #8FAE22 !important;
	--wpforms-button-border-color: #8FAE22 !important;
	--wpforms-page-break-color: #8FAE22 !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(--lime-2); 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; }

.pg-city-intro { background: var(--mist); }
.pg-intro-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; align-items: stretch; }
@media (max-width: 860px) { .pg-intro-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.pg-intro-copy .section-title { font-family: 'Open Sans', sans-serif; font-size: clamp(1.75rem, 3vw, 2.5rem); text-transform: uppercase; color: var(--ink); line-height: 1.05; }
.pg-intro-copy p { color: var(--ink); 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(--ink); 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 --lime-2 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: 1em; 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-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); opacity: 0.55; }
.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(--lime-2); 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(--lime-2); 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(--lime-2); }

/* ---------------------------------------------------------------- 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; }
.pg-phases-track::before {
	content: ''; position: absolute; top: 28px; bottom: 28px; left: 50%;
	border-left: 3px dashed var(--lime-2); opacity: 0.55; z-index: 0;
}
.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; }
.pg-phase-marker span {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--alt-bg-1);
	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: var(--ink); 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;
	/* Mint solid only for the top third, then a long, slow fade spanning
	   roughly the middle 60% of the card's height, settling to solid white
	   only right at the very bottom. */
	background: linear-gradient(to bottom, var(--mist) 0%, var(--mist) 30%, var(--white) 95%, var(--white) 100%);
	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(--multi-card-4) 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 { 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; }
}