/* City-page shortcode styles (pg_city_video, pg_city_faqs, pg_city_industries,
   pg_city_map, pg_city_hero, pg_city_intro, pg_top_agency, pg_city_pricing).
   Previously echoed as inline <style> blocks from each shortcode's PHP
   output in functions.php — moved here and enqueued as a single external
   stylesheet on city pages so the same CSS isn't repeated in the HTML of
   every one of the ~764 city pages. */

/* City Video styles moved to global.css (also used by pg_home_video). */

/* ---------------------------------------------------------------- City FAQs */
	/* Was var(--mist) (pale blue), briefly #EAEEF4, then #F5F7F9 ("mist"
	   gray) — removed entirely per explicit request so the page background
	   shows through instead. */
	.pg-faq { background: transparent; }
	.pg-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 2.5rem; margin-top: 3.5rem; }
	/* border-top can't take a gradient directly, so the flat var(--brand)
	   border is replaced with a ::before bar reusing the
	   .enable-divider__gradient-top gradient stretched to the card's full
	   width — same blue gradient concept as the hero's small accent bar. */
	.pg-faq-card {
		position: relative; overflow: hidden;
		background: var(--white);
		border-radius: 12px; padding: 1.75rem; box-shadow: 0 10px 30px -18px rgba(11,14,20,0.25);
	}
	.pg-faq-card::before {
		content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
		background: linear-gradient(252.85deg,
			var(--button-bg) 8.98%,
			var(--alt-bg-3) 47%,
			var(--brand-light) 86.39%
		);
	}
	.pg-faq-card h4 { font-family: 'Open Sans', sans-serif; font-size: 1.1rem; text-transform: none; color: var(--ink); margin-top: 0; }
	.pg-faq-card p { color: var(--graphite); margin-top: 0.6rem; line-height: 1.55; font-size: 0.95rem; }
	/* Matches the card's own border-top color (var(--brand), aliased to the
	   brand blue) instead of the sitewide default link color, which is
	   still the old green from theme.json's global link style and hasn't
	   been migrated to the design-token system. */
	.pg-faq-card p a { color: var(--brand-dark); }
	.pg-faq-card p a:hover { color: var(--brand); }
	@media (max-width: 860px) { .pg-faq-grid { grid-template-columns: minmax(0, 1fr); } }
	.pg-faq-meta-strip { background: transparent; height: 20px; display: flex; align-items: center; overflow: hidden; }
	.pg-faq-meta-inner { display: flex; gap: 1.5rem; align-items: center; flex-wrap: nowrap; overflow: hidden; }
	.pg-faq-meta-inner span { font-size: 0.68rem; color: var(--ink); opacity: 0.67; white-space: nowrap; }
	@media (max-width: 860px) { .pg-faq-meta-inner { gap: 1rem; } .pg-faq-meta-inner span { font-size: 0.62rem; } }

/* ---------------------------------------------------------------- City Industries */
	.pg-city-industries { background: var(--white); }
	.pg-industries-kicker h2 { color: var(--brand-dark); }
	.pg-industries-intro { max-width: 760px; margin-top: 1.5rem; color: var(--graphite); line-height: 1.7; }
	.pg-industries-more { max-width: none; overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
	.pg-industries-more-static { max-height: none; overflow: visible; }
	.pg-industries-more > *:first-child { margin-top: 0; }
	.pg-industries-more p { margin-top: 1.1rem; line-height: 1.7; color: var(--ink); opacity: 0.8; }
	.pg-industries-more h2, .pg-industries-more h3, .pg-industries-more h4 { font-family: 'Open Sans', sans-serif; color: var(--ink); margin-top: 2rem; }
	.pg-industries-more h4 { font-size: 1.15rem; text-transform: none; }
	.pg-industries-more strong { color: var(--ink); }
	.pg-industries-more ul { margin-top: 1rem; padding-left: 1.25rem; }
	.pg-industries-more li { margin-top: 0.6rem; line-height: 1.6; color: var(--ink); opacity: 0.8; }
	.pg-industries-more a { color: var(--brand-dark); }

	/* Each "type of presentation" item is its own card, 2 per row, cycling
	   through the same three tones used by the pricing cards for visual
	   consistency between the two sections. */
	.pg-industries-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1rem; align-items: start; }
	@media (max-width: 860px) { .pg-industries-grid { grid-template-columns: minmax(0, 1fr); } }
	.pg-industry-card {
		border-radius: 16px; padding: 2.25rem;
		box-shadow: 0 10px 30px -18px rgba(11,14,20,0.2);
		transition: background-color 0.2s ease;
	}
	.pg-industry-card h4 { margin-top: 0 !important; }
	/* Section bg is now plain white (var(--white)) — these four tones are
	   barely-there off-whites instead of white/light-gray/medium-gray, per
	   explicit request ("the white becomes ever so slightly gray"). Exact
	   hex values as given, not token vars. 4 colors (not 3) means the cycle
	   no longer lines up 2-per-row/1-color-per-column on the 2-col grid —
	   deliberate, per explicit request to go from 3 to 4. */
	.pg-industry-white { background: #FAFCFE; }
	.pg-industry-mist { background: #F5F7F9; }
	.pg-industry-lime { background: #EAEEF4; }
	.pg-industry-frost { background: #F6F8FA; }
	/* Hover: single shared tone across all 4 (also an explicit hex, not a
	   token var), replacing the previous var(--mist) hover. */
	.pg-industry-white:hover,
	.pg-industry-mist:hover,
	.pg-industry-lime:hover,
	.pg-industry-frost:hover { background: #E9EDF2; }
	/* Card text forced to the plain/neutral default dark text color
	   (var(--body-color)) instead of var(--ink) (brand-navy-tinted) — per
	   explicit request. Scoped to .pg-industry-card specifically so the
	   section's intro copy above the grid (.pg-industries-more p/h2/h3,
	   still var(--ink)) is untouched. */
	.pg-industry-card,
	.pg-industry-card h4,
	.pg-industry-card p,
	.pg-industry-card strong { color: var(--body-color); }
	/* Same "bullet is the actual link" treatment as the top-agencies section,
	   but a green dot here instead of black — the bare URL text beside it
	   stays plain, unlinked text. */
	.pg-industries-website-list { list-style: none; margin-top: 0.75rem; padding: 0; }
	.pg-industries-website-list li { display: flex; align-items: center; }
	.pg-industries-bullet { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-dark); margin-right: 0.65rem; vertical-align: middle; flex-shrink: 0; }
	.pg-industries-bullet:hover { background: var(--ink); }
	.pg-industries-url { color: var(--ink); opacity: 0.8; font-size: 0.92rem; }
	.pg-industries-toggle {
		display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;
		background: none; border: none; padding: 0; cursor: pointer;
		font-family: 'Open Sans', sans-serif; font-size: 0.85rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em;
		color: var(--graphite); border-bottom: 1px solid var(--graphite);
		padding-bottom: 0.15rem;
	}
	.pg-industries-toggle svg { transition: transform 0.25s ease; }
	.pg-industries-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

	.pg-ctx-toggle {
		display: inline; background: none; border: none; padding: 0; margin-left: 0.35rem;
		cursor: pointer; color: var(--brand-dark); font-size: 0.85em; line-height: 1;
		vertical-align: middle; transition: transform 0.25s ease;
	}
	.pg-ctx-toggle[aria-expanded="true"] { transform: rotate(180deg); }
	.pg-ctx-panel { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
	.pg-ctx-panel p { margin-top: 0.6rem !important; }

/* ---------------------------------------------------------------- City Map */
	/* Was var(--paper) — swapped for the same hover gray used on the
	   portfolio cards, per explicit request. */
	.pg-city-map-section { background: #E9EDF2; }
	.pg-city-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 3rem; align-items: stretch; }
	.pg-city-map-frame, .pg-city-map-card { min-width: 0; }
	@media (max-width: 860px) { .pg-city-map-layout { grid-template-columns: minmax(0, 1fr); } }
	.pg-city-map-card {
		background: var(--white); color: var(--ink); border-radius: 16px; padding: 2.5rem;
		display: flex; flex-direction: column; justify-content: center;
	}
	.pg-city-map-card h3 { font-family: 'Open Sans', sans-serif; font-size: 1.4rem; margin-top: 0; text-transform: uppercase; }
	.pg-map-card-heading { color: var(--brand-dark); }
	.pg-city-map-card p { color: var(--graphite); margin-top: 0.75rem; line-height: 1.6; font-size: 0.95rem; }
	.pg-city-map-card p a { color: var(--ink); font-weight: 600; text-decoration: underline; }
	.pg-city-map-card .btn { margin-top: 1.5rem; align-self: flex-start; }
	/* Just this one button (the map card's phone-number pill, in its
	   open-hours state): .pg-call-number's sitewide hover (white bg, dark
	   text) disappears into this card's own var(--white) background with
	   no border to separate them. A 2px var(--alt-bg-3) outline on hover
	   fixes it, reserved at 0-opacity by default so it doesn't shift layout
	   on hover-in. Scoped to .pg-city-map-card specifically — the CTA
	   block's identical button (on a transparent card) keeps its plain
	   sitewide hover, unchanged. */
	.pg-city-map-card .pg-call-number { border: 2px solid transparent; }
	.pg-city-map-card .pg-call-number:hover { border-color: var(--alt-bg-3); }
	/* Was var(--ink) (dark navy, inherited from .btn-primary's sitewide
	   default) — set to action green explicitly, per explicit request. */
	/* Text set to white per explicit request — note white-on-#9AB545 is
	   only ~2.3:1 contrast, under WCAG AA's 3:1 floor even for large/bold
	   button text; flagging since it wasn't asked to be re-checked. */
	.pg-map-card-cta { border-radius: 999px; background: var(--button-bg); color: #FFFFFF; border-color: var(--button-bg); }
	/* Overrides .btn-primary's default green hover with the site's dark
	   navy (var(--alt-bg-3)) instead, per explicit request — :active covers
	   the "or click" part on touch devices, where :hover never fires. */
	.pg-map-card-cta:hover, .pg-map-card-cta:active { background: var(--alt-bg-3); color: var(--white); border-color: var(--alt-bg-3); }
	.pg-map-card-links { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(11,14,20,0.1); }
	.pg-map-card-links-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--graphite); opacity: 0.8; }
	.pg-map-card-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 1rem; margin-top: 0.9rem; }
	.pg-map-card-links-grid span { font-size: 0.82rem; line-height: 1.4; display: block; }
	.pg-map-card-links-grid span:not(:has(a)) { color: var(--graphite); }
	.pg-map-card-links-grid a { color: var(--ink); text-decoration: none; }
	.pg-map-card-links-grid a:hover { color: var(--brand-dark); text-decoration: underline; }
	@media (max-width: 600px) { .pg-map-card-links-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
	/* This kicker's text is dynamic (city name interpolated) and can run much
	   longer than the site's short static eyebrows, so — unlike the global
	   .kicker h2 nowrap default — let it wrap on narrow screens instead of
	   overflowing past the section's padding. */
	.pg-city-map-section .kicker h2 { color: var(--graphite); white-space: normal; }
	.pg-city-map-section .kicker .line { flex: 0 0 2rem; }
	.pg-city-map-section .kicker .line { background: rgba(11,14,20,0.12); }
	.pg-city-map-section .section-title { color: var(--ink); }
	.pg-city-map-frame {
		position: relative; margin-top: 0; border-radius: 16px; overflow: hidden;
		border: 1px solid rgba(11,14,20,0.1);
		height: 420px;
	}
	/* On desktop the frame and card sit side-by-side and should match heights
	   exactly. The frame's own children (iframe/pin/zoom controls) are all
	   position:absolute, so they don't contribute to its intrinsic height —
	   switching to height:auto here lets align-items:stretch on the grid
	   size it to match whichever of the two is naturally taller (usually the
	   card, since its copy length varies). The 420px fixed height above is
	   kept as the mobile fallback, where the two stack into separate rows and
	   stretch no longer applies. */
	@media (min-width: 861px) {
		.pg-city-map-frame { height: auto; }
	}
	/* No extra requests beyond the map itself — OSM's tiles are just desaturated and
	   brightened to light gray via a CSS filter; our own SVG pin sits on top, dead-center,
	   in the brand's lime color.
	   The iframe is drawn taller than the visible frame and shifted up so OSM's own
	   attribution strip (baked into their cross-origin page, unreachable by our CSS/JS)
	   lands below the clipped edge — visually gone, while our own attribution line
	   below the map remains the one visitors actually see and click. */
	.pg-city-map-frame iframe {
		position: absolute; top: 0; left: 0;
		width: 100%; height: calc(100% + 34px); display: block; border: 0;
		filter: grayscale(1) brightness(1.25) contrast(0.95);
	}
	.pg-city-map-pin {
		position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%);
		pointer-events: none; filter: drop-shadow(0 6px 10px rgba(11,14,20,0.35));
	}
	.pg-city-map-pins { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
	/* Was var(--ink) (dark navy) — set to action green, per explicit
	   request. Hover darkened to keep a visible state change instead of
	   the previous var(--brand-dark) (a blue), which would have clashed with
	   a green base. */
	.pg-city-map-pin-small {
		position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
		background: var(--button-bg); border: 2px solid var(--white); border-radius: 50%;
		box-shadow: 0 2px 6px rgba(11,14,20,0.4); pointer-events: auto; cursor: pointer;
		transition: transform 0.15s ease;
	}
	.pg-city-map-pin-small:hover { transform: scale(1.35); background: #7E9A2F; }
	.pg-city-map-pin-small.pg-pin-no-link { cursor: default; }
	.pg-city-map-pin-small.pg-pin-no-link:hover { transform: none; background: var(--button-bg); }
	/* Our own zoom controls — large and easy to hit on a phone, since OSM's native +/- buttons
	   are baked into cross-origin iframe content we cannot resize or restyle at all.
	   Positioned exactly over OSM's own control (their top-right corner) with an opaque
	   background sized to fully cover it, so only one set of buttons is ever visible —
	   rather than two competing sets in different corners. */
	.pg-city-map-zoom {
		position: absolute; top: 0.5rem; right: 0.5rem; z-index: 5;
		display: flex; flex-direction: column; gap: 4px;
		background: var(--white); border-radius: 10px; padding: 4px; box-shadow: 0 4px 12px -4px rgba(11,14,20,0.3);
	}
	.pg-map-zoom-btn {
		width: 48px; height: 48px; border-radius: 8px; border: 1px solid rgba(11,14,20,0.12);
		background: var(--white); color: var(--ink); font-size: 1.5rem; font-weight: 700; line-height: 1;
		cursor: pointer;
	}
	.pg-map-zoom-btn:hover { background: var(--brand); border-color: var(--brand); }
	@media (max-width: 600px) {
		.pg-map-zoom-btn { width: 56px; height: 56px; font-size: 1.75rem; }
	}
	/* Silent scroll-guard: sits over the iframe only (not our zoom buttons, which are a sibling
	   with higher z-index so they always work) and swallows the first scroll/drag/click so the
	   map can't "hijack" page-scroll on hover. One interaction anywhere on the map disables it
	   permanently for that page view — no visible label, just prevents the accidental jump. */
	.pg-city-map-guard { position: absolute; inset: 0; z-index: 3; cursor: pointer; }
	.pg-city-map-guard.pg-map-active { display: none; }

/* ---------------------------------------------------------------- County Breadcrumb */
	/* Pulled up out of .pg-city-intro's inherited .section 8rem top padding
	   so it sits ~15px from the section's actual top edge, instead of
	   appearing 8rem down inside the padding like the rest of the section's
	   content. margin-bottom was also 8rem, which (since this nav sits
	   directly inside that same section, right before the kicker/heading --
	   confirmed live) inserted a second, separate ~128px gap of its own
	   before the heading -- reduced to a small deliberate gap instead. */
	.pg-county-breadcrumb { margin-top: calc(-8rem + 15px); margin-bottom: 1.5rem; padding: 0; font-size: 0.9rem; color: var(--graphite); }
	.pg-county-breadcrumb a { color: var(--graphite); text-decoration: underline; }
	.pg-county-breadcrumb .sep { margin: 0 0.5rem; opacity: 0.5; }
	.pg-county-breadcrumb .current { opacity: 0.82; }

	/* .pg-city-breadcrumb overrides the -8rem pull-up above: that offset
	   assumes a hero with ~8rem of empty bottom padding for the breadcrumb
	   to slide up into (true for the county hero), but the shared v2 hero's
	   city instance (two-column layout with a video) has no such gap --
	   pulling up by 8rem there dragged the breadcrumb up over the hero's own
	   CTA buttons instead of sitting below it. Padding on the full-width
	   band below instead of margin on the nav itself, so the spacing never
	   exposes the page's raw --site-bg (#f4f4f4, neutral gray) against the
	   #F5F7F9 "mist" tint every surrounding section actually uses -- a
	   plain margin-created gap here read as a visible off-gray strip. */
	/* .pg-city-intro (the section right after this band) uses the shared
	   .section class (padding: 8rem 0) -- since this band no longer uses
	   the original -8rem pull-up trick (that overlapped the hero's own
	   content, see above), the full ~128px of section top padding was
	   showing as a large dead-space gap between the breadcrumb and the
	   intro heading. Pulling the following section up with a negative
	   margin here is safe: .pg-city-intro's own background is the exact
	   same #F5F7F9, so there's no seam/color-mismatch risk the way a
	   margin-created gap over the page's raw background would have. */
	.pg-city-breadcrumb-band { background: #F5F7F9; margin-bottom: calc(-8rem + 20px); }
	/* Longhand padding-top/bottom only -- .wrap's own shorthand margin
	   (0 auto, horizontal centering) and padding (0 3rem, side gutter) must
	   stay untouched; overriding either with a shorthand here (margin: 0,
	   padding: 1.25rem 0) previously clobbered both and left the breadcrumb
	   flush against the left edge instead of centered/guttered like the
	   rest of the page. */
	.pg-city-breadcrumb.pg-county-breadcrumb { margin-top: 0; margin-bottom: 0; padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* ---------------------------------------------------------------- City Hero */
	.pg-city-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: 6rem 0 4rem; text-align: center; }
	.pg-city-hero .eyebrow { position: relative; z-index: 1; 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(--white); margin: 0; }
	.pg-city-hero h1 { font-family: 'Open Sans', sans-serif; text-transform: uppercase; line-height: 0.92; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0; }
	/* line1 outlined (transparent fill + white stroke), line2 solid filled
	   brand blue, line3 (place name) solid white.
	   Gaps between lines use fixed rem margins (not em) so the spacing stays
	   visibly consistent regardless of each line's own huge, variable
	   font-size — an em-based margin here shrinks to almost nothing at
	   smaller font sizes/viewports, which is why the previous attempt at
	   this didn't visibly change anything. */
	.pg-city-hero .line1 {
		/* max ceiling raised from 3.5rem to 4.65rem (9.75rem line2 ceiling x
		   the same 5vw:10.5vw = 0.476 ratio already used below) so this line
		   keeps growing in step with .line2 all the way up to desktop
		   widths instead of hitting its own ceiling first — see the PHP
		   $max_rem comment for the matching city-line fix and the full
		   explanation of why independent ceilings broke the alignment. */
		font-size: clamp(1.5rem, 5vw, 4rem); line-height: 0.95; overflow-wrap: break-word;
		letter-spacing: 0.08em; /* +15% row fill per explicit request */
		color: transparent; -webkit-text-stroke: 1.5px var(--paper); text-stroke: 1.5px var(--paper);
	}
	.pg-city-hero .line2 {
		font-size: clamp(2.1rem, 10.5vw, 9.75rem); line-height: 0.88; overflow-wrap: break-word; letter-spacing: -0.01em;
		color: var(--brand);
		margin-top: 1.25rem;
	}
	.pg-city-hero .city-line { color: var(--white); line-height: 0.92; word-break: break-word; margin-top: 1rem; }
	/* County hero only — overrides .city-line's white with brand blue
	   (var(--brand)) fill plus a 2px white letter outline, per explicit
	   request, since the county hero drops the line1/line2 headline lines
	   and needs this single line to carry the brand color instead.
	   paint-order draws the stroke behind the fill so the blue shows on top
	   of the white outline rather than being covered by it. */
	.pg-city-hero .county-line {
		color: var(--brand);
		-webkit-text-stroke: 2px var(--white);
		text-stroke: 2px var(--white);
		paint-order: stroke fill;
	}
	/* Line 1 (county name) — no letter outline, solid brand-blue fill only. */
	.pg-city-hero .county-line-1 {
		-webkit-text-stroke: 0;
		text-stroke: 0;
		font-weight: 900;
	}
	/* Line 2 ("Presentation") — hollow/outlined instead of solid brand-blue:
	   transparent fill so only the 4px white stroke is visible. */
	.pg-city-hero .county-line-2 {
		color: transparent;
		-webkit-text-stroke: 4px var(--white);
		text-stroke: 4px var(--white);
	}
	/* Line 3 ("Design Agency") — solid var(--alt-bg-1) (white) fill instead
	   of brand-blue, keeping the same 2px white stroke from .county-line
	   above (invisible against the matching white fill, harmless). */
	.pg-city-hero .county-line-3 { color: var(--alt-bg-1); }
	/* 2x the vertical spacing on desktop specifically, where there's ample
	   room for it — mobile keeps the tighter base values above. */
	@media (min-width: 861px) {
		.pg-city-hero .line2 { margin-top: 2.5rem; }
		.pg-city-hero .city-line { margin-top: 2rem; }
	}
	.pg-city-hero p.sub { position: relative; z-index: 1; max-width: 640px; margin: 1.25rem auto 0; font-size: 1.1rem; color: rgba(247,247,242,0.7); }
	.pg-city-hero .ctas { position: relative; z-index: 1; margin-top: 1.75rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
	/* Scoped to the city hero specifically — .btn-primary is used site-wide,
	   so this doesn't touch it anywhere else. Default: brand blue bg, dark
	   navy text (--button-text, WCAG AA 4.55:1 — white only hit 3:1). Hover:
	   white bg with Alt Background 3 (--alt-bg-3, #07364e — also the --ink
	   page-background color) as the dark-blue text. */
	.pg-city-hero .ctas .btn-primary { background: var(--brand); color: var(--button-text); border-color: var(--brand); }
	.pg-city-hero .ctas .btn-primary:hover { background: var(--white); color: var(--alt-bg-3); border-color: var(--white); }
	/* "See Our Portfolio" (.btn-on-dark) — same scoping rationale as
	   .btn-primary above. Default: blue outline instead of the original
	   white one, everything else (transparent bg, white text) unchanged.
	   Hover: fills with brand blue — the same color .btn-primary uses in
	   its own default (non-hover) state. */
	.pg-city-hero .ctas .btn-on-dark { border-color: var(--brand); }
	.pg-city-hero .ctas .btn-on-dark:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }

/* ------------------------------------------------------- City Hero v2 (prototype) */
	/* Splunk-Enterprise-page-inspired hero: real background image supplied
	   by the user (assets/img/hero-bkgd-observability-product-desktop.webp,
	   Splunk's own asset — light diamond pattern + pink/orange diagonal
	   shard), two-column content layout on top. background-image itself is
	   set inline via style="" in the shortcode markup. */
	/* Height matches the background image's own aspect ratio (1920x693,
	   693/1920 = 0.3609) instead of being padding/content-driven, per
	   explicit request — same technique as the .pg-video-frame's 16:9,
	   just this section's actual asset ratio. */
	.pg-city-hero-v2 {
		position: relative;
		aspect-ratio: 1920 / 693;
		background-color: var(--site-bg);
		background-repeat: no-repeat;
		background-position: top right;
		background-size: cover;
		display: flex; align-items: center;
	}
	.pg-city-hero-v2 .wrap {
		position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 2rem;
		display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center;
		width: 100%;
	}
	/* Visual (video/placeholder) stacks BELOW the text column when the
	   columns can't fit side by side, per explicit request — no order
	   override needed, source order already puts col-text first. */
	@media (max-width: 1024px) {
		.pg-city-hero-v2 .wrap { grid-template-columns: 1fr; text-align: center; }
		/* Background shard was anchored top-right (fine for the side-by-side
		   layout); once the columns stack, that crops the shard out of view
		   almost entirely — reanchored to bottom-left, per explicit request. */
		.pg-city-hero-v2 { background-position: bottom left; }
	}
	.pg-city-hero-v2 .col-text .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(--eyebrow-color); margin: 0; }
	/* Same gradient-text treatment as .section-title elsewhere on the page
	   (action green -> dark teal -> light blue, capitalize case) instead of
	   a flat solid color, per explicit request to match. */
	.pg-city-hero-v2 .col-text h1 {
		font-family: var(--h1-font); font-size: clamp(2.2rem, 4vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; margin: 0.75rem 0 0;
		text-transform: capitalize;
		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-city-hero-v2 .col-text p.sub { max-width: 520px; margin: 1.25rem 0 0; font-size: 1.1rem; line-height: 1.6; color: var(--body-color); }
	.pg-city-hero-v2 .col-text .ctas { margin-top: 1.75rem; margin-bottom: 40px; display: flex; gap: 1rem; flex-wrap: wrap; }
	@media (max-width: 860px) { .pg-city-hero-v2 .col-text .ctas { justify-content: center; margin-left: auto; margin-right: auto; } }
	/* Brand green (--button-bg, #b4d334) at rest with navy text (--ink,
	   #07364e) instead of the original forced-white text -- same fix as
	   .btn-header in global.css. Hover inverts to navy background / brand-
	   green text. */
	.pg-city-hero-v2 .ctas .btn-primary { background: var(--button-bg); color: var(--ink); border-color: var(--button-bg); }
	.pg-city-hero-v2 .ctas .btn-primary:hover { background: var(--ink); color: var(--button-bg); border-color: var(--ink); }
	.pg-city-hero-v2 .ctas .btn-secondary { background: transparent; color: var(--brand); border: 2px solid var(--brand); }
	.pg-city-hero-v2 .ctas .btn-secondary:hover { background: var(--brand); color: var(--button-text); }
	/* No visual column at all (see presentationgurus_hero_v2_markup()'s
	   $visual_html === false case, used by [pg_process_hero]) — collapse
	   back to a single centered text column instead of leaving an empty
	   1fr grid track. */
	.pg-city-hero-v2.pg-hero-v2-no-visual .wrap { grid-template-columns: 1fr; max-width: 800px; text-align: center; }
	.pg-city-hero-v2.pg-hero-v2-no-visual .col-text .ctas { justify-content: center; }
	.pg-city-hero-v2.pg-hero-v2-no-visual .col-text p.sub { margin-left: auto; margin-right: auto; }
	.pg-city-hero-v2 .col-visual { position: relative; z-index: 1; }
	.pg-city-hero-v2 .col-visual img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 50px rgba(11,14,20,0.15); display: block; }
	/* Real per-city video (presentationgurus_city_hero_video_markup()) swapped
	   in for the placeholder image — same drop shadow, .pg-video-frame
	   already brings its own 16:9 aspect-ratio/border-radius/overflow. */
	.pg-city-hero-v2 .col-visual .pg-video-frame { box-shadow: 0 20px 50px rgba(11,14,20,0.15); }


/* ---------------------------------------------------------------- Top Agency */
	.pg-top-agency { background: var(--mist); }
	.pg-top-agency-kicker h2 { white-space: normal; }
	.pg-top-agency-kicker .line { flex: 0 0 2rem; }
	.pg-top-agency-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
	@media (max-width: 860px) { .pg-top-agency-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
	.pg-top-agency-copy h3 { 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-top-agency-copy p { color: var(--ink); opacity: 0.75; margin-top: 1.25rem; line-height: 1.7; }
	.pg-top-agency-side {
		border: 2px dashed rgba(11,14,20,0.25); border-radius: 16px; padding: 2.5rem;
		display: flex; align-items: center; justify-content: center; text-align: center;
		min-height: 220px; color: var(--graphite); font-size: 0.9rem;
	}
	.pg-top-agency-side:has(.pg-agency-teaser) { border-style: solid; background: var(--paper); text-align: left; align-items: flex-start; display: block; }
	.pg-agency-teaser-label { font-family: 'Open Sans', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--brand-dark); }
	.pg-agency-teaser p { margin-top: 0.75rem; color: var(--ink); opacity: 0.75; line-height: 1.6; font-size: 0.92rem; }
	.pg-agency-toggle {
		display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;
		background: none; border: none; padding: 0; cursor: pointer;
		font-family: 'Open Sans', sans-serif; font-size: 0.85rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em;
		color: var(--graphite); border-bottom: 1px solid var(--graphite); padding-bottom: 0.15rem;
	}
	.pg-agency-toggle svg { transition: transform 0.25s ease; }
	.pg-agency-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
	.pg-agency-more { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; margin-top: 3rem; max-width: 900px; }
	.pg-agency-more > *:first-child { margin-top: 0; }
	.pg-agency-more p { margin-top: 1rem; line-height: 1.7; color: var(--ink); opacity: 0.8; }
	.pg-agency-more h4 { font-family: 'Open Sans', sans-serif; font-size: 1.15rem; text-transform: none; color: var(--ink); margin-top: 2rem; }
	.pg-agency-disclosure { margin-top: 2rem !important; padding-top: 1.5rem; border-top: 1px solid rgba(11,14,20,0.12); font-size: 0.8rem; }
	.pg-agency-disclosure a { color: var(--graphite); text-decoration: underline; }
	.pg-agency-disclosure a:hover { color: var(--brand-dark); }
	/* The website "bullet" is itself the clickable (nofollow, new-tab) link —
	   a small filled dot standing in for a normal <li> marker — while the
	   URL text beside it stays plain, unlinked text, per explicit request. */
	.pg-agency-website-list { list-style: none; margin-top: 0.75rem; padding: 0; }
	.pg-agency-bullet { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin-right: 0.65rem; vertical-align: middle; flex-shrink: 0; }
	.pg-agency-bullet:hover { background: var(--brand-dark); }
	.pg-agency-website-list li { display: flex; align-items: center; }
	.pg-agency-url { color: var(--ink); opacity: 0.8; font-size: 0.92rem; }