/* 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 */
	.pg-faq { background: var(--mist); }
	.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; }
	.pg-faq-card {
		background: var(--white); border-top: 6px solid var(--lime);
		border-radius: 12px; padding: 1.75rem; box-shadow: 0 10px 30px -18px rgba(11,14,20,0.25);
	}
	.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(--lime), 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(--lime); }
	.pg-faq-card p a:hover { color: var(--lime-2); }
	@media (max-width: 860px) { .pg-faq-grid { grid-template-columns: minmax(0, 1fr); } }
	.pg-faq-meta-strip { background: var(--mist); 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.55; 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(--paper); }
	.pg-industries-kicker h2 { color: var(--lime-2); }
	.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(--lime-2); }

	/* 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);
	}
	.pg-industry-card h4 { margin-top: 0 !important; }
	.pg-industry-white { background: var(--white); }
	/* Multi-Card 1/2 fully desaturated (0% saturation) to plain grays for
	   this section specifically — tinted mint/blue versions (even blended
	   down to ~20% strength) still read as "minty," not neutral. Scoped
	   override, not a change to the shared --multi-card-1/2 tokens
	   themselves, which stay full-strength/color for the pricing cards. */
	.pg-industry-mist { background: #ECECEC; }
	.pg-industry-lime { background: #E0E0E0; }
	/* 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(--lime-2); 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(--lime-2); 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 */
	.pg-city-map-section { background: var(--paper); }
	.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(--lime-2); }
	.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); }
	.pg-map-card-cta { border-radius: 999px; }
	/* 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.7; }
	.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(--lime-2); 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; }
	.pg-city-map-pin-small {
		position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
		background: var(--ink); 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: var(--lime-2); }
	.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(--ink); }
	/* 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(--lime); border-color: var(--lime); }
	@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. */
	.pg-county-breadcrumb { margin-top: calc(-8rem + 15px); margin-bottom: 8rem; 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.7; }

/* ---------------------------------------------------------------- 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, white
	   text. 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(--white); 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); }


/* ---------------------------------------------------------------- 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(--lime-2); }
	.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(--lime-2); }
	/* 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(--lime-2); }
	.pg-agency-website-list li { display: flex; align-items: center; }
	.pg-agency-url { color: var(--ink); opacity: 0.8; font-size: 0.92rem; }