/* ==========================================================================
   Vesta Custom — site-wide styles
   Loaded after elementor-frontend (see includes/enqueue.php).

   Rule of thumb: substantial CSS lives here; <50 lines of small global
   overrides may live in Elementor Site Settings → Custom CSS; per-widget
   Custom CSS only for true one-offs.

   Timeline component styles do NOT go here — they live in
   assets/components/timeline/ and load only where the shortcode renders.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base / utilities
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   2. Header & footer — global templates (Phase 3)
   -------------------------------------------------------------------------- */

/* Secondary (teal) button — set "vesta-btn-teal" in the Button widget's
   Advanced → CSS Classes. The .elementor-widget compound keeps specificity
   above the kit's global button styles without !important. */
.elementor-widget.vesta-btn-teal .elementor-button {
	background-color: var(--vesta-btn-secondary-bg);
	color: var(--vesta-btn-secondary-text);
}

.elementor-widget.vesta-btn-teal .elementor-button:hover,
.elementor-widget.vesta-btn-teal .elementor-button:focus {
	background-color: var(--vesta-btn-secondary-bg-hover);
	color: var(--vesta-btn-secondary-text);
}

/* Floating pill header (mockup treatment). The header container
   ("vesta-header" class, set in the header template) floats over the page
   so the Home hero image can run to the viewport top behind it. Inner
   pages must clear ~90px of header height with top padding.
   Elementor Pro's sticky takes over on scroll (position:fixed via
   .elementor-sticky--active) and adds .elementor-sticky--effects past the
   80px offset, which deepens the shadow. */
.vesta-header {
	position: absolute;
	top: var(--vesta-header-offset);
	left: 0;
	right: 0;
	margin: 0 auto;
	/* Elementor sizes containers via width: var(--width); setting the
	   variable avoids a specificity fight with its own width rules. */
	--width: min(var(--vesta-header-max), calc(100% - 2 * var(--vesta-container-pad-x)));
	z-index: 100;
	border-radius: var(--vesta-radius-md);
	box-shadow: var(--vesta-header-shadow-scroll);
	/* Translucent bg is set in the template (Elementor's per-element CSS
	   outranks this file). No backdrop blur — the mockup shows the hero
	   image crisp through the pill. */
	transition: box-shadow 0.3s ease;
}


.vesta-header.elementor-sticky--active {
	/* Pro's sticky JS pins with inline position:fixed + inset-inline-start
	   computed from the resting rect. Our auto margin and right:0 must not
	   re-center on top of that or the pill double-shifts. */
	margin: 0;
	right: auto;
	border-radius: 0 0 var(--vesta-radius-md) var(--vesta-radius-md);
}

.vesta-header.elementor-sticky--effects {
	box-shadow: var(--vesta-shadow-card-hover);
}

/* TEMPORARY: white footer logo via CSS filter until the designer delivers
   the real white asset. Set "vesta-logo--placeholder-white" on the footer
   logo Image widget. Removal = delete this rule + the class. */
.vesta-logo--placeholder-white img {
	filter: brightness(0) invert(1);
}


/* --------------------------------------------------------------------------
   3. Home page sections (Phase 5a)
   -------------------------------------------------------------------------- */

/* Whole-card clickable: a full-bleed overlay anchor covers the card. The
   card needs position:relative; the overlay sits above the content. Set
   "vesta-clickcard" on the card container + a .vesta-clickcard-link anchor. */
.vesta-clickcard { position: relative; }
/* The overlay anchor lives inside an HTML widget, which Elementor sets to
   position:relative — so the anchor's inset:0 would collapse to that widget's
   (zero) height. Make the HTML WIDGET itself the full-card overlay; the
   anchor then fills it. */
.elementor-widget-html.vesta-clickcard-ovl {
	position: absolute;
	inset: 0;
	z-index: 3;
	margin: 0;
}
.elementor-widget-html.vesta-clickcard-ovl .elementor-widget-container { height: 100%; }
.vesta-clickcard a.vesta-clickcard-link {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: block;
	font-size: 0;
	text-indent: -9999px;
	pointer-events: auto;
}
/* keep the icon-box visuals below the click overlay */
.vesta-clickcard > .elementor-widget:not(.vesta-clickcard-ovl) { position: relative; z-index: 1; }

/* Culture Matters photo grid — large image left, 2x2 right, perfectly even
   bottoms and uniform 16px gutters everywhere, regardless of source ratios.
   The right column is a real CSS grid (so horizontal + vertical gaps match);
   both columns stretch to the same height and images cover-fill their cells. */
.vesta-culture-grid { align-items: stretch; }                 /* left col == right col height */
.vesta-culture-left { display: flex; }
.vesta-culture-left .elementor-widget,
.vesta-culture-left .elementor-widget-container,
.vesta-culture-left figure { height: 100%; width: 100%; margin: 0; }
.vesta-culture-lg img {
	width: 100%;
	height: 100%;
	min-height: 408px;          /* drives the row height; right column matches via its cells */
	object-fit: cover;
	border-radius: var(--vesta-radius-md);
	display: block;
}
/* right column: 2x2 grid, uniform 16px gap both directions, rows split evenly */
.vesta-culture-right {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 16px;
	align-content: stretch;
}
.vesta-culture-right .elementor-widget-image,
.vesta-culture-right .elementor-widget-container,
.vesta-culture-right figure { width: 100%; height: 100%; margin: 0; }
.vesta-culture-sm img {
	width: 100%;
	height: 100%;
	min-height: 196px;          /* 2 rows (196) + 16 gap = 408 == large image */
	object-fit: cover;
	border-radius: var(--vesta-radius-md);
	display: block;
}
@media ( max-width: 767px ) {
	.vesta-culture-grid { flex-direction: column; }
	.vesta-culture-lg img { min-height: 240px; }
	.vesta-culture-sm img { min-height: 150px; }
}

/* Card rows as CSS grid — equal columns + even 24px gaps, flush to the
   content edges (fixes the uneven outer-margin vs inner-gap look that
   justify:center + %-widths produced). Children clear their %-widths (done in
   the page data) so the grid tracks size them. The compound selector beats
   Elementor's `.e-con { display:flex }`. */
/* Targeted by element ID rather than a custom class: Elementor's renderer
   drops the _css_classes on these two specific containers (cause unclear; the
   class is present in the saved data). The element-ID class is always emitted,
   and the IDs are deterministic (md5-derived in home-sections.php), so this is
   stable. The 4 call-out cards / 3 news cards have their %-widths cleared in
   the page data, so the grid tracks size them; align-items default (stretch)
   keeps cards equal height. */
/* The call-out row is a BOXED container (Elementor wraps its children in
   .e-con-inner), so the grid goes on the inner wrapper.
   The home news 3-card row (#1b19734) used to be gridded here too; it was
   replaced by the [vesta_news] shortcode, which carries its own grid in
   assets/components/news/news.css. */
.elementor-element-5f7c94e > .e-con-inner {     /* home: 4 top call-outs */
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.elementor-element-5f7c94e > .e-con-inner > .elementor-element { width: auto; max-width: none; }
@media ( max-width: 1024px ) {
	.elementor-element-5f7c94e > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 767px ) {
	.elementor-element-5f7c94e > .e-con-inner { grid-template-columns: 1fr; }
}

/* Rent an Apartment photo — landscape rectangle (client: shorter than the
   near-square crop, so it takes less vertical space). */
.vesta-rent-img img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
	border-radius: var(--vesta-radius-md);
}
@media ( max-width: 767px ) {
	.vesta-rent-img img { height: 260px; }
}

/* "Focus on Fundamentals" pillars (Property Management) — open 3-column
   layout that replaced the accordion. Full container, so the grid applies
   directly to the element. Targeted by element ID (deterministic md5 from
   pm-pillars.php) because Elementor doesn't reliably render the _css_classes
   on this container; icon-box children stretch to equal height. */
.elementor-element.elementor-element-e8d03ae,   /* Property Management pillars */
.elementor-element.elementor-element-25379e2 {  /* Resident Services pillars  */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.elementor-element-e8d03ae > .elementor-element,
.elementor-element-25379e2 > .elementor-element { width: auto; max-width: none; }
@media ( max-width: 1024px ) {
	.elementor-element.elementor-element-e8d03ae,
	.elementor-element.elementor-element-25379e2 { grid-template-columns: 1fr; gap: 32px; max-width: 620px; margin-inline: auto; }
}

/* Who We Are — stat band, core-values, and leadership grids. Targeted by
   element ID (deterministic md5 from build-who-we-are.php) since Elementor
   doesn't reliably render container _css_classes. Even columns + gaps, flush
   to content edges. stats=e7d8cc2 values=bd9b857 leaders=576d162 */
.elementor-element.elementor-element-e7d8cc2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.elementor-element.elementor-element-bd9b857 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.elementor-element.elementor-element-576d162 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.elementor-element-e7d8cc2 > .elementor-element,
.elementor-element-bd9b857 > .elementor-element,
.elementor-element-576d162 > .elementor-element { width: auto; max-width: none; }
@media ( max-width: 1024px ) {
	.elementor-element.elementor-element-bd9b857 { grid-template-columns: repeat(3, 1fr); }
	.elementor-element.elementor-element-e7d8cc2 { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}
@media ( max-width: 767px ) {
	.elementor-element.elementor-element-bd9b857 { grid-template-columns: repeat(2, 1fr); }
	.elementor-element.elementor-element-576d162 { grid-template-columns: 1fr; }
}

/* Careers — Benefits 3-card grid + Learning 2-column list (ID-targeted;
   Elementor doesn't reliably render container _css_classes). benefits=51bde39 */
.elementor-element.elementor-element-51bde39 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.elementor-element-51bde39 > .elementor-element { width: auto; max-width: none; }
.elementor-element-2398037 .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
@media ( max-width: 767px ) {
	.elementor-element.elementor-element-51bde39 { grid-template-columns: 1fr; }
	.elementor-element-2398037 .elementor-icon-list-items { grid-template-columns: 1fr; }
}

/* Rent an Apartment — photo overlaps down into the next section for visual
   interest (per mockup). */
.vesta-rent-overlap {
	margin-bottom: -72px;
	position: relative;
	z-index: 2;
}
@media ( max-width: 767px ) {
	.vesta-rent-overlap { margin-bottom: 0; }
}


/* --------------------------------------------------------------------------
   4. Service pages — shared template styles (Phases 5b–6)
   -------------------------------------------------------------------------- */

/* Acq & Dev capability cards (news-feed style): full-width photo flush to the
   card's top/left/right edges, uniform height, text underneath. */
.vesta-acq-cardimg { width: 100%; }
.vesta-acq-cardimg img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Team-member avatar — uniform circular headshot regardless of source
   aspect ratio. Set "vesta-avatar" on the Image widget. object-position
   keeps faces (upper portion of a headshot) in frame when cover-cropping. */
/* Avatar = perfect circle at ANY viewport/card width. Force the WIDGET
   WRAPPER to a fixed square (high specificity to beat Elementor's per-element
   width rules) and clip with overflow; the image just fills it. This is
   layout-proof: the box is always square so border-radius:50% is always a
   circle. */
.elementor-widget-image.vesta-avatar {
	width: 150px;
	height: 150px;
	flex: 0 0 150px;        /* never grow/shrink in the flex card */
	border-radius: 50%;
	overflow: hidden;
}
.elementor-widget-image.vesta-avatar .elementor-widget-container,
.elementor-widget-image.vesta-avatar figure,
.elementor-widget-image.vesta-avatar a {
	width: 100%;
	height: 100%;
	margin: 0;
	display: block;
}
.elementor-widget-image.vesta-avatar img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
	border-radius: 0;
	display: block;
}
@media ( max-width: 480px ) {
	.elementor-widget-image.vesta-avatar { width: 120px; height: 120px; flex-basis: 120px; }
}

/* Community-life gallery — uniform square cover-cropped cells. Set
   "vesta-gallery-img" on the Image widget. */
.vesta-gallery-img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--vesta-radius-md);
	display: block;
}

/* Resident Services bento grid (1 large, 1 medium, 2 small) — cover-crop to
   uniform heights so the grid stays clean regardless of source ratios. */
.vesta-bento-lg img { width: 100%; height: 340px; object-fit: cover; border-radius: var(--vesta-radius-md); display: block; }
.vesta-bento-md img { width: 100%; height: 196px; object-fit: cover; border-radius: var(--vesta-radius-md); display: block; }
.vesta-bento-sm img { width: 100%; height: 130px; object-fit: cover; border-radius: var(--vesta-radius-md); display: block; }
@media ( max-width: 767px ) {
	.vesta-bento-lg img, .vesta-bento-md img, .vesta-bento-sm img { height: 200px; }
}

/* Resident Services partner logos — uniform contained tiles. Set
   "vesta-partner-logo" on the Image widget. */
.vesta-partner-logo img {
	width: 120px;
	height: 110px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	padding: 6px;
	background: transparent;   /* client: no borders around the logos */
	border: 0;
}


/* --------------------------------------------------------------------------
   5. Communities page — grid, filter UI, Leaflet map (Phase 7)
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6. News — archive + single post (Phase 8)
   -------------------------------------------------------------------------- */

/* Category badge on the news cards — brand teal instead of the default grey.
   Compound selectors beat Elementor's own .elementor-post__badge rule
   regardless of stylesheet load order. Swap the var to change the color. */
.elementor-widget-posts .elementor-post__badge,
.elementor-posts-container .elementor-post__badge,
.elementor-post__badge {
	background-color: var(--vesta-color-teal);
	color: var(--vesta-color-white);
	font-family: var(--vesta-font-heading);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}


/* --------------------------------------------------------------------------
   7. Search results + 404 (Hello-theme bare templates)
   -------------------------------------------------------------------------- */

/* These pages aren't built in Elementor, so they get the theme's unstyled
   <main class="site-main"> with no container/padding (content slides under the
   floating header). Give them the site's spacing + typography. */
body.search .site-main,
body.error404 .site-main {
	max-width: 880px;
	margin: 0 auto;
	padding: 160px var(--vesta-container-pad-x) 96px;
	min-height: 60vh;
}
/* page heading */
body.search .site-main::before {
	content: "Search Results";
	display: block;
	font-family: var(--vesta-font-heading);
	font-weight: 800;
	font-size: 32px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vesta-color-navy);
	margin-bottom: 6px;
}
body.search .page-content > p:first-child {       /* "no results" intro / search summary */
	color: var(--vesta-color-text-muted);
	margin: 0 0 24px;
}

/* each result */
body.search .page-content > article.post {
	padding: 22px 0;
	margin: 0;
	border-bottom: 1px solid var(--vesta-color-border-subtle);
}
body.search .page-content > article.post:last-of-type { border-bottom: 0; }

body.search .entry-title {
	font-size: 21px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	margin: 0 0 6px;
}
body.search .entry-title a { color: var(--vesta-color-navy); text-decoration: none; }
body.search .entry-title a:hover { color: var(--vesta-color-coral); }

body.search .page-content,
body.search .entry-summary,
body.search .entry-content {
	font-size: 15px;
	line-height: 1.7;
	color: var(--vesta-color-text-muted);
}

@media ( max-width: 767px ) {
	body.search .site-main,
	body.error404 .site-main { padding: 120px 16px 64px; }
	body.search .site-main::before { font-size: 26px; }
}

/* branded 404 */
.vesta-404 { text-align: center; display: flex; align-items: center; justify-content: center; }
.vesta-404 .vesta-404-inner { max-width: 600px; }
.vesta-404 .vesta-404-code {
	font-family: var(--vesta-font-heading);
	font-weight: 800;
	font-size: 96px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--vesta-color-teal);
	margin: 0;
}
.vesta-404 .vesta-404-title {
	font-family: var(--vesta-font-heading);
	font-weight: 800;
	font-size: 30px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vesta-color-navy);
	margin: 8px 0 14px;
}
.vesta-404 .vesta-404-text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--vesta-color-text-muted);
	margin: 0 0 28px;
}
.vesta-404 .vesta-404-btn {
	display: inline-block;
	background-color: var(--vesta-color-coral);
	color: var(--vesta-color-white);
	font-family: var(--vesta-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 34px;
	border-radius: var(--vesta-radius-button);
	transition: background-color 0.2s ease;
}
.vesta-404 .vesta-404-btn:hover { background-color: var(--vesta-color-coral-hover); }
@media ( max-width: 767px ) {
	.vesta-404 .vesta-404-code { font-size: 70px; }
	.vesta-404 .vesta-404-title { font-size: 24px; }
}


/* --------------------------------------------------------------------------
   8. Misc one-offs
   -------------------------------------------------------------------------- */

/* Story pages — Park Yellowstone (#66), 800 Southern Avenue (#69), The
   Longfellow (#72). Three fixes, same on each page: an even Before/After grid,
   project stats given real weight, and readable body copy. Targeted by
   element-ID class (Elementor drops container _css_classes here); IDs differ
   per page, hence the grouped selectors.
     grids: 66=8660249/b47f6c0  69=03ab58f/f47a39a  72=56d8293/c3f8a6d/080f13f
     stats: 66=d9e6a00  69=3ce5796  72=51f41e2
     copy:  66=c38eb88  69=3fc67fa  72=e07fafa
   c3f8a6d is the During grid (72 only) — the old site told the story in three
   acts and we shipped two; the construction shots are the middle one. */

/* Before/During/After. Source photos are mixed aspect ratios (1419x734,
   2000x1333, 1400x1050 …), so uncropped thumbs rendered at ragged heights
   (146-212px) and the rows didn't line up. Even 4-up grid + uniform cover crop. */
.elementor-element.elementor-element-8660249,
.elementor-element.elementor-element-b47f6c0,
.elementor-element.elementor-element-03ab58f,
.elementor-element.elementor-element-f47a39a,
.elementor-element.elementor-element-56d8293,
.elementor-element.elementor-element-c3f8a6d,
.elementor-element.elementor-element-080f13f {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	align-items: start;
}
/* Elementor sets an explicit per-widget width (its own ID rule outranks a plain
   descendant selector), which kept the cells at ~67px instead of filling the
   grid column — hence the matched specificity + !important here. */
.elementor-element.elementor-element-8660249 > .elementor-element,
.elementor-element.elementor-element-b47f6c0 > .elementor-element,
.elementor-element.elementor-element-03ab58f > .elementor-element,
.elementor-element.elementor-element-f47a39a > .elementor-element,
.elementor-element.elementor-element-56d8293 > .elementor-element,
.elementor-element.elementor-element-c3f8a6d > .elementor-element,
.elementor-element.elementor-element-080f13f > .elementor-element {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-element-8660249 img,
.elementor-element-b47f6c0 img,
.elementor-element-03ab58f img,
.elementor-element-f47a39a img,
.elementor-element-56d8293 img,
.elementor-element-c3f8a6d img,
.elementor-element-080f13f img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--vesta-radius-md);
	display: block;
}

/* Story narrative. The copy is ~700 words in 6 unbroken paragraphs, which read as
   a wall. Images are now spliced in after the paragraph each one illustrates
   (new wing, corridors, gym, apartment interior), so the reader gets a beat
   between blocks. Widget classes render reliably; container ones don't. */
.vesta-story-inline { margin: 28px 0 32px; }
.vesta-story-inline img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--vesta-radius-md);
	display: block;
}
.vesta-story-inline figcaption,
.vesta-story-inline .widget-image-caption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: #5d6b7a;
	text-align: left;
	font-style: italic;
}
/* Copy column (72=e07fafa, 69=3fc67fa, 66=c38eb88): give the prose air. */
.elementor-element-e07fafa p,
.elementor-element-3fc67fa p,
.elementor-element-c38eb88 p {
	line-height: 1.75;
	margin-bottom: 18px;
}
.elementor-element-e07fafa .elementor-widget-text-editor,
.elementor-element-3fc67fa .elementor-widget-text-editor,
.elementor-element-c38eb88 .elementor-widget-text-editor {
	margin-bottom: 4px;
}

/* CoStar Impact Award band (Longfellow #72, container f2b6e11). Sits between the
   AFTER gallery and the video: the award photo is the team on the restored
   auditorium stage, i.e. the same room shown mid-renovation in the DURING row.
   The source graphic is 3951x1726, so it needs an explicit cap or it blows out
   the boxed container. */
.elementor-element-f2b6e11 { text-align: center; }
.elementor-element-f2b6e11 .elementor-element-a8c04d3 .elementor-heading-title {
	font-size: 14px;
	letter-spacing: .14em;
	color: var(--vesta-teal, #3aa6a0);
	margin-bottom: 4px;
}
.elementor-element-f2b6e11 .elementor-element-e91b7c5 .elementor-heading-title {
	margin-bottom: 22px;
}
.elementor-element-f2b6e11 .elementor-element-d47f0b8 img {
	width: 100%;
	max-width: 860px;
	height: auto;
	aspect-ratio: auto;          /* not a 4:3 gallery thumb */
	object-fit: contain;
	border-radius: var(--vesta-radius-md);
	margin: 0 auto 24px;
	display: block;
}

/* Project stats. The figures are the most compelling detail on the page, so
   labels shrink to eyebrows and the values carry the weight. Child order is
   identical on all three pages: 1/2 type, 3/4 date, 5/6 units, 7/8 cost,
   9/10 funding list. */
.elementor-element.elementor-element-d9e6a00,
.elementor-element.elementor-element-3ce5796,
.elementor-element.elementor-element-51f41e2 { padding: 30px 28px; }

.elementor-element-d9e6a00 .elementor-heading-title,
.elementor-element-3ce5796 .elementor-heading-title,
.elementor-element-51f41e2 .elementor-heading-title {
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 3px;
}
/* separate each stat group from the label that follows it */
.elementor-element-d9e6a00 > .elementor-element:nth-child(odd),
.elementor-element-3ce5796 > .elementor-element:nth-child(odd),
.elementor-element-51f41e2 > .elementor-element:nth-child(odd) { margin-top: 6px; }
.elementor-element-d9e6a00 .elementor-widget-text-editor,
.elementor-element-3ce5796 .elementor-widget-text-editor,
.elementor-element-51f41e2 .elementor-widget-text-editor { margin-bottom: 18px; }
.elementor-element-d9e6a00 .elementor-widget-text-editor p,
.elementor-element-3ce5796 .elementor-widget-text-editor p,
.elementor-element-51f41e2 .elementor-widget-text-editor p {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}
/* residential units (6) + development cost (8) read as headline figures */
.elementor-element-d9e6a00 > .elementor-element:nth-child(6) p,
.elementor-element-d9e6a00 > .elementor-element:nth-child(8) p,
.elementor-element-3ce5796 > .elementor-element:nth-child(6) p,
.elementor-element-3ce5796 > .elementor-element:nth-child(8) p,
.elementor-element-51f41e2 > .elementor-element:nth-child(6) p,
.elementor-element-51f41e2 > .elementor-element:nth-child(8) p {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.05;
}
/* funding sources is a list — keep it quiet */
.elementor-element-d9e6a00 > .elementor-element:nth-child(10) p,
.elementor-element-3ce5796 > .elementor-element:nth-child(10) p,
.elementor-element-51f41e2 > .elementor-element:nth-child(10) p {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
}

/* Body copy was a dense wall of small text. Larger type, more leading, real
   space between paragraphs so Vision/Result are scannable. */
.elementor-element-c38eb88 .elementor-widget-text-editor p,
.elementor-element-3fc67fa .elementor-widget-text-editor p,
.elementor-element-e07fafa .elementor-widget-text-editor p {
	font-size: 16.5px;
	line-height: 1.8;
	margin-bottom: 1.2em;
}
/* accent rule under THE VISION: / THE RESULT: */
.elementor-element-c38eb88 .elementor-widget-heading .elementor-heading-title,
.elementor-element-3fc67fa .elementor-widget-heading .elementor-heading-title,
.elementor-element-e07fafa .elementor-widget-heading .elementor-heading-title {
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 20px;
}
.elementor-element-c38eb88 .elementor-widget-heading .elementor-heading-title::after,
.elementor-element-3fc67fa .elementor-widget-heading .elementor-heading-title::after,
.elementor-element-e07fafa .elementor-widget-heading .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--vesta-color-teal);
}

@media ( max-width: 767px ) {
	.elementor-element.elementor-element-8660249,
	.elementor-element.elementor-element-b47f6c0,
	.elementor-element.elementor-element-03ab58f,
	.elementor-element.elementor-element-f47a39a,
	.elementor-element.elementor-element-56d8293,
	.elementor-element.elementor-element-c3f8a6d,
	.elementor-element.elementor-element-080f13f { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.elementor-element-d9e6a00 > .elementor-element:nth-child(6) p,
	.elementor-element-d9e6a00 > .elementor-element:nth-child(8) p,
	.elementor-element-3ce5796 > .elementor-element:nth-child(6) p,
	.elementor-element-3ce5796 > .elementor-element:nth-child(8) p,
	.elementor-element-51f41e2 > .elementor-element:nth-child(6) p,
	.elementor-element-51f41e2 > .elementor-element:nth-child(8) p { font-size: 28px; }
}

/* Home hero headline sits on live video, so parts of any frame go near-white
   (bright building facades, sky). Measured: contrast vs the MEAN background is
   fine (4.68:1) but vs the BRIGHTEST pixels it collapses to 1.15:1 — white text
   on a white building. Pushing the container overlay darker would fix it but
   mute the footage, so give the glyphs their own shadow instead: legible over
   any frame, video stays bright. Applies to the client's real footage too. */
.elementor-element-696ab35 .elementor-heading-title {
	text-shadow: 0 2px 18px rgba(6, 20, 36, 0.55), 0 1px 4px rgba(6, 20, 36, 0.45);
}

/* --------------------------------------------------------------------------
   Who We Are — stats band ($1B+ / 20,000+ / 13 + D.C. / 1998)
   -------------------------------------------------------------------------- */

/* The stats live in their own off-white full-width container (built in the
   Elementor data) so they read as a band between HOW IT STARTED and CORE
   VALUES instead of floating in the whitespace below the intro copy.
   Targeted by element-ID: this container's `_css_classes` (vesta-stats-row)
   is one of the ones Elementor silently drops — see elementor-render-gotchas. */
.elementor-element-e7d8cc2 {
	/* Spread across the full 1200px container the four stats read as a loose
	   row rather than one group; capping the width pulls them together and
	   centres the cluster in the band. */
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

/* At 2-up on mobile the 44px figures overflow their 167px column — "20,000+"
   needs 185px and was clipped mid-glyph, and "13 + D.C." broke onto two lines.
   Scale the figures (not the labels) down just for the stacked layout. */
@media (max-width: 767px) {
	.elementor-element-e7d8cc2 > .e-con > .elementor-widget-heading:first-child .elementor-heading-title {
		font-size: 34px;
	}
}

/* --------------------------------------------------------------------------
   Careers — recovered visuals (photo grid, Pride bar, Passion stats)
   -------------------------------------------------------------------------- */

/* Employee photo grid under CULTURE MATTERS. Sources are a mix of 800x800 and
   800x400, so a fixed aspect + cover keeps the row even instead of letting the
   wide one collapse the others. Element-ID targeting: container _css_classes
   are unreliable here — see elementor-render-gotchas. */
.elementor-element-da8dcac {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.elementor-element-da8dcac .elementor-widget-image,
.elementor-element-da8dcac .elementor-widget-image .elementor-widget-container,
.elementor-element-da8dcac figure,
.elementor-element-da8dcac figure > a { height: 100%; }
.elementor-element-da8dcac img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* Standing rule: never crop faces. These are group shots with people
	   across the full frame, so hold the centre rather than the top. */
	object-position: center;
	border-radius: var(--vesta-radius-md);
}

/* The Pride bar is a 2560x70 rule — let it span the text column, not blow up. */
.elementor-element-2be2bc2 img {
	width: 100%;
	max-width: 680px;
	height: auto;
}

/* Passion for Housing figures, same 2-up mobile treatment as the Who We Are
   band: 44px overflows a half-width column on a phone. */
@media (max-width: 767px) {
	.elementor-element-94e693b > .e-con > .elementor-widget-heading:first-child .elementor-heading-title {
		font-size: 34px;
	}
}

/* Four across drops to 78px thumbnails on a phone — too small to read a face.
   Go 2x2 so they stay legible. */
@media (max-width: 767px) {
	.elementor-element-da8dcac { grid-template-columns: repeat(2, 1fr); }
}

/* The logo is a flex item in the header pill, so when the nav ran out of room
   the logo was what gave — 150px down to 12px by 1100px wide. The nav now hands
   over to the hamburger at <=1279 (Elementor tablet_extra), but pin the logo
   anyway so adding a menu item can never crush it again. */
.vesta-header .elementor-widget-image { flex-shrink: 0; }
.vesta-header .elementor-widget-image img { min-width: 150px; }
@media (max-width: 767px) {
	.vesta-header .elementor-widget-image img { min-width: 0; }
}

/* ==========================================================================
   Section photo bands (replaces the brick texture — client, 2026-09-15)
   The plain-white bands carry a faded property photo under a white gradient,
   per Jaime's suggestion of "a property with a gradient over it". The top of
   each band is solid white so it runs straight on from the section above;
   the photo surfaces toward the bottom, easing into the next section. Text
   always sits on at least an 82% white wash (navy body copy stays well past
   AA; checked on rendered pixels).

   Same targeting as before: element-ID classes (container _css_classes are
   unreliable here), and the selector is over-qualified on purpose to beat
   Elementor's inline !important lazy-background rule at (0,5,0) — its JS never
   marks these plain containers as loaded, so without this the photo would stay
   suppressed on every band past the third.
   ========================================================================== */
.elementor-element-5f7c94e { --vesta-band-photo: url("/wp-content/uploads/2026/06/Building-6-4-1536x864.jpg"); }    /* Home — what we do cards */
.elementor-element-94a4c1c { --vesta-band-photo: url("/wp-content/uploads/2026/06/Building-4-1536x1152.jpg"); }    /* Who We Are — core values */
.elementor-element-d99c4e8 { --vesta-band-photo: url("/wp-content/uploads/2026/06/Bennet-photo-1-Web-1536x1152.jpg"); }    /* Who We Are — how it started */
.elementor-element-9b74268 { --vesta-band-photo: url("/wp-content/uploads/2026/06/Exterior-1-1-1536x1024.jpg"); }    /* Careers — intro copy */
.elementor-element-d9d0baa { --vesta-band-photo: url("/wp-content/uploads/2026/06/DSC_0163-3.jpg"); }    /* Careers — benefits */
.elementor-element-56743de { --vesta-band-photo: url("/wp-content/uploads/2026/06/800-Souther-Front-Entrance.jpg"); }    /* Acq & Dev — developing */
.elementor-element-25fd9df { --vesta-band-photo: url("/wp-content/uploads/2026/06/Monarch-Exterior-2-1536x1152.jpg"); }    /* Acq & Dev — our team */
.elementor-element-c845003 { --vesta-band-photo: url("/wp-content/uploads/2026/06/29-web-or-mls-1470-s-county-trl-1536x1024.jpg"); }    /* Property Mgmt — facilities */
.elementor-element-924c745 { --vesta-band-photo: url("/wp-content/uploads/2026/06/Pool-1-1-1536x1024.jpg"); }    /* Resident Svcs — working with */
.elementor-element-nrgrid001 { --vesta-band-photo: url("/wp-content/uploads/2026/06/Highland-Terrace-11-Web-1536x862.jpg"); }  /* News Room — article grid */
.elementor-element-9cf9a8b { --vesta-band-photo: url("/wp-content/uploads/2026/06/Oak-Tree-exterior-Web.jpg"); }    /* Stay Connected — form */

.e-con.e-parent.e-flex.elementor-element:is(
	.elementor-element-5f7c94e,
	.elementor-element-94a4c1c,
	.elementor-element-d99c4e8,
	.elementor-element-9b74268,
	.elementor-element-d9d0baa,
	.elementor-element-56743de,
	.elementor-element-25fd9df,
	.elementor-element-c845003,
	.elementor-element-924c745,
	.elementor-element-nrgrid001,
	.elementor-element-9cf9a8b
):not(.e-no-lazyload) {
	background-image:
		linear-gradient(
			to bottom,
			#ffffff 0%,
			rgba(255, 255, 255, 0.94) 38%,
			rgba(255, 255, 255, 0.82) 100%
		),
		var(--vesta-band-photo) !important;
	background-size: cover !important;
	background-position: center 70% !important;
	background-repeat: no-repeat !important;
}

/* Decorative only; drop it when printing. */
@media print {
	.e-con.e-parent.e-flex.elementor-element:is(
	.elementor-element-5f7c94e,
	.elementor-element-94a4c1c,
	.elementor-element-d99c4e8,
	.elementor-element-9b74268,
	.elementor-element-d9d0baa,
	.elementor-element-56743de,
	.elementor-element-25fd9df,
	.elementor-element-c845003,
	.elementor-element-924c745,
	.elementor-element-nrgrid001,
	.elementor-element-9cf9a8b
	):not(.e-no-lazyload) { background-image: none !important; }
}

/* --------------------------------------------------------------------------
   Header nav — fit the links on scaled-down desktops
   --------------------------------------------------------------------------
   Reported as "nav bar is blank on Edge". It was not a browser bug and not
   blank: the menu had collapsed to the hamburger. Windows at 150% display
   scaling turns a 1920px monitor into a 1280px CSS viewport, which fell under
   the old <=1279 hamburger breakpoint, leaving a wide pill with two small
   icons in it. (Confirmed by measuring the 150px-pinned logo in the reporter's
   screenshot: 225px in a 1876px image = DPR 1.50 = a 1251px viewport.)

   The seven top-level items need 949px at the default 20px item padding, and
   280px of that is padding alone. Stepping the padding down keeps the full nav
   through the scaled-desktop range instead of hiding it. */
/* Selector note: the list is nav > ul.elementor-nav-menu > li > a, so `nav > li`
   matches nothing. !important because Elementor emits the 20px item padding
   from the widget's own settings at a higher specificity than a stylesheet
   rule can reasonably reach. */
@media (min-width: 1200px) and (max-width: 1365px) {
	.vesta-header .elementor-nav-menu--main ul.elementor-nav-menu > li > a.elementor-item {
		padding-left: 12px !important;
		padding-right: 12px !important;
		font-size: 15px !important;
	}
}
@media (min-width: 1025px) and (max-width: 1199px) {
	.vesta-header .elementor-nav-menu--main ul.elementor-nav-menu > li > a.elementor-item {
		padding-left: 7px !important;
		padding-right: 7px !important;
		font-size: 14px !important;
	}
}

/* --------------------------------------------------------------------------
   Header pill — keep the side gap consistent down to mobile
   --------------------------------------------------------------------------
   Elementor resets the container width to 100% at its mobile breakpoint, so
   below 768 the floating pill ran edge to edge while every larger size sat in
   24px from each side. Reinstate the same inset so the pill reads as the same
   floating element at every width. Both custom property and max-width are set
   because Elementor sizes containers off --width but its own max-width rule is
   what actually wins at this breakpoint. */
@media (max-width: 767px) {
	.vesta-header.e-con,
	.vesta-header {
		--width: calc(100% - 48px);
		max-width: calc(100% - 48px);
		margin-left: auto;
		margin-right: auto;
	}
}

/* --------------------------------------------------------------------------
   Acquisitions & Development — the four business areas as a card set
   --------------------------------------------------------------------------
   Client feedback: "looks too much like a story or news article". It was
   rendering as a 2x2 of 576px-wide blocks, each ~691px tall with a full-width
   image on top, 1591px of page in total. Read top to bottom that is an
   article; the four areas never look like four parallel options.

   This makes them one row of equal cards with a uniform image crop, so the eye
   compares them instead of reading them. The copy is untouched (77-101 words
   each, which fits a card at this width).

   Boxed container, so the grid goes on > .e-con-inner, not the element itself
   (see elementor-render-gotchas). Targeted by element ID because container
   _css_classes are unreliable on this build. */
.elementor-element-c9b9725 > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* Elementor gives each child container a width, which fights the grid track. */
.elementor-element-c9b9725 > .e-con-inner > .e-con {
	width: auto;
	max-width: none;
	padding: 0;
	gap: 0;
	background: var(--vesta-color-white);
	border: 1px solid var(--vesta-color-border-subtle);
	border-radius: var(--vesta-radius-md);
	box-shadow: var(--vesta-shadow-card);
	overflow: hidden;   /* clips the photo to the card's rounded corners */
}

/* One crop for all four, so differing source ratios (400x284 through
   2560x1674) stop making the row look ragged. */
.elementor-element-c9b9725 .elementor-widget-image img {
	display: block;
	width: 100%;
	/* height:auto is required — aspect-ratio is ignored while an explicit
	   height is set, and something upstream was pinning these to 240px. */
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;   /* standing rule: never crop faces out of frame */
}

/* 77-101 words in a 240px column runs ~19 lines at the 16px body size. Step it
   down inside these cards only, so four of them stay a comparable set rather
   than four tall columns. The copy itself is untouched. */
.elementor-element-c9b9725 .elementor-widget-text-editor,
.elementor-element-c9b9725 .elementor-widget-text-editor p {
	font-size: 15px;
	line-height: 1.55;
}

/* The text half of each card is its own nested container. */
.elementor-element-c9b9725 > .e-con-inner > .e-con > .e-con {
	width: auto;
	max-width: none;
	padding: 18px 20px 20px;
}

/* The area name is what people scan, so give it the same weight as the other
   card titles on the site (17px, as the timeline cards use) instead of the
   14-15px generic card-title step. */
.elementor-element-c9b9725 > .e-con-inner > .e-con > .e-con > .elementor-widget-heading:first-child .elementor-heading-title {
	font-size: 17px;
	line-height: 1.25;
}

/* "STORIES" / "LEARN MORE" become a quiet card footer rather than a heading. */
.elementor-element-c9b9725 .elementor-widget-heading:not(:first-child) .elementor-heading-title {
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--vesta-color-text-muted);
	margin-top: 14px;
}

@media ( max-width: 1024px ) {
	.elementor-element-c9b9725 > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 767px ) {
	.elementor-element-c9b9725 > .e-con-inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Workforce donut charts ([vesta_pies], Careers)
   Thin annulus marks with a 2px surface-coloured gap between slices; the
   legend is a real table carrying every count and share, so colour is never
   the only way to read a value.
   -------------------------------------------------------------------------- */
.vesta-pies {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	width: 100%;
	max-width: 1080px;
	margin: 12px auto 0;
}
.vesta-pies .vpie { margin: 0; }
.vesta-pies .vpie-title {
	margin: 0 0 12px;
	text-align: center;
	font-family: var(--vesta-font-heading);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vesta-color-navy);
}
.vesta-pies .vpie-svg {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	margin: 0 auto 16px;
	overflow: visible;
}
.vesta-pies .vpie-slice {
	stroke: #F5F7F8;          /* the band colour: reads as a gap between slices */
	stroke-width: 2;
	stroke-linejoin: round;
	transition: opacity 0.15s ease;
	cursor: default;
}
.vesta-pies .vpie.is-hovering .vpie-slice:not(.is-active) { opacity: 0.35; }

.vesta-pies .vpie-legend {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--vesta-font-body);
	font-size: 14px;
	color: var(--vesta-color-navy);
}
.vesta-pies .vpie-legend th,
.vesta-pies .vpie-legend td {
	padding: 5px 4px;
	border-bottom: 1px solid var(--vesta-color-border-subtle);
	text-align: left;
	font-weight: 400;
	vertical-align: middle;
}
.vesta-pies .vpie-legend td { text-align: right; white-space: nowrap; }
.vesta-pies .vpie-legend .vpie-pct { color: var(--vesta-color-text-muted); width: 3.6em; }
.vesta-pies .vpie-legend .vpie-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.vesta-pies .vpie-legend tr.is-active th,
.vesta-pies .vpie-legend tr.is-active td { background: rgba(31, 58, 95, 0.05); }
.vesta-pies .vpie-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	border-radius: 3px;
	vertical-align: -1px;
}
.vesta-pies .vpie-tip {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--vesta-color-navy);
	color: #fff;
	font-family: var(--vesta-font-body);
	font-size: 13px;
	white-space: nowrap;
	box-shadow: var(--vesta-shadow-card);
}
@media (max-width: 1024px) {
	.vesta-pies { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.vesta-pies { grid-template-columns: 1fr; max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
	.vesta-pies .vpie-slice { transition: none; }
}
/* The theme stripes odd table rows and boxes every cell. Legends want neither:
   one hairline under each row, nothing else. Specificity matches the theme's
   tbody > tr:nth-child(odd) > td rule so this wins without !important. */
.vesta-pies .vpie-legend,
.vesta-pies .vpie-legend tbody > tr > th,
.vesta-pies .vpie-legend tbody > tr > td,
.vesta-pies .vpie-legend tbody > tr:nth-child(odd) > th,
.vesta-pies .vpie-legend tbody > tr:nth-child(odd) > td {
	background: transparent;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}
.vesta-pies .vpie-legend { border: 0; margin: 0; }
.vesta-pies .vpie-legend tbody > tr.is-active > th,
.vesta-pies .vpie-legend tbody > tr.is-active > td { background: rgba(31, 58, 95, 0.06); }

/* --------------------------------------------------------------------------
   Our Pledge ([vesta_pledge], Property Management)
   -------------------------------------------------------------------------- */
.vesta-pledge { text-align: center; }
.vesta-pledge-open {
	font-family: var(--vesta-font-heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--vesta-color-white);
	background: var(--vesta-color-coral);
	border: 0;
	border-radius: 4px;
	padding: 14px 32px;
	cursor: pointer;
	transition: background 0.2s ease;
}
.vesta-pledge-open:hover { background: var(--vesta-color-coral-hover, #D13B5F); }
.vesta-pledge-open:focus-visible { outline: 2px solid var(--vesta-color-navy); outline-offset: 3px; }

.vesta-pledge-dialog {
	width: min(620px, calc(100% - 32px));
	max-height: calc(100% - 48px);
	padding: 0;
	border: 0;
	border-radius: var(--vesta-radius-md);
	box-shadow: 0 20px 60px rgba(15, 33, 55, 0.35);
}
.vesta-pledge-dialog::backdrop { background: rgba(15, 33, 55, 0.6); }
.vesta-pledge-panel { position: relative; padding: 40px 40px 36px; text-align: center; }
.vesta-pledge-title {
	margin: 0 0 16px;
	font-family: var(--vesta-font-heading);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--vesta-color-navy);
}
.vesta-pledge-body p {
	margin: 0;
	font-family: var(--vesta-font-body);
	font-size: 18px;
	line-height: 1.65;
	color: var(--vesta-color-navy);
}
.vesta-pledge-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 36px;
	height: 36px;
	font-size: 26px;
	line-height: 1;
	color: var(--vesta-color-navy);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.vesta-pledge-close:hover { background: var(--vesta-color-off-white); }
.vesta-pledge-close:focus-visible { outline: 2px solid var(--vesta-color-teal); }
@media (max-width: 767px) {
	.vesta-pledge-panel { padding: 36px 22px 28px; }
	.vesta-pledge-title { font-size: 22px; }
	.vesta-pledge-body p { font-size: 17px; }
}
/* The kit's global button style (`.elementor-kit-N button`, 0,1,1) outranked
   the single-class rules above and painted the close button as a coral block.
   Element-qualified selectors put these at 0,2,1. */
.vesta-pledge-dialog button.vesta-pledge-close,
.vesta-pledge-dialog button.vesta-pledge-close:hover,
.vesta-pledge-dialog button.vesta-pledge-close:focus {
	padding: 0;
	font-size: 28px;
	color: var(--vesta-color-navy);
	background: transparent;
	border: 0;
	box-shadow: none;
}
.vesta-pledge-dialog button.vesta-pledge-close:hover { background: var(--vesta-color-off-white); }
.vesta-pledge button.vesta-pledge-open { padding: 14px 32px; border-radius: 4px; }

/* ==========================================================================
   Type-treatment preview (?type=a|b|c — see includes/type-preview.php)
   Each option re-points the Elementor kit's global typography variables.
   Selector is .elementor-kit-5.vesta-type-x (0,2,0) so it outranks the kit's
   own .elementor-kit-5 (0,1,0) declarations at every breakpoint.
   Current scale for reference: H1 48/32, section H2 42/28, sub 24/20,
   lead 26/20, body 16, card title 14/13, news title 15/14, hero 44/26.
   ========================================================================== */

/* A · Balanced — same look, headings ~20% smaller, body a step up. */
.elementor-kit-5.vesta-type-a {
	--e-global-typography-primary-font-size: 40px;
	--e-global-typography-vesta_section-font-size: 34px;
	--e-global-typography-secondary-font-size: 22px;
	--e-global-typography-vesta_lead-font-size: 22px;
	--e-global-typography-vesta_hero-font-size: 40px;
	--e-global-typography-text-font-size: 17px;
	--e-global-typography-vesta_card_title-font-size: 15px;
	--e-global-typography-vesta_news_title-font-size: 16px;
}
/* B · Readable — smallest headings, largest body, more line spacing. */
.elementor-kit-5.vesta-type-b {
	--e-global-typography-primary-font-size: 36px;
	--e-global-typography-vesta_section-font-size: 30px;
	--e-global-typography-secondary-font-size: 21px;
	--e-global-typography-vesta_lead-font-size: 21px;
	--e-global-typography-vesta_hero-font-size: 38px;
	--e-global-typography-text-font-size: 18px;
	--e-global-typography-text-line-height: 1.7em;
	--e-global-typography-vesta_card_title-font-size: 16px;
	--e-global-typography-vesta_news_title-font-size: 17px;
}
/* C · Refined — mid sizes, but lighter, less tracked headings so they stop
   shouting without shrinking as far. */
.elementor-kit-5.vesta-type-c {
	--e-global-typography-primary-font-size: 38px;
	--e-global-typography-primary-font-weight: 700;
	--e-global-typography-primary-letter-spacing: 0.02em;
	--e-global-typography-vesta_section-font-size: 32px;
	--e-global-typography-vesta_section-font-weight: 700;
	--e-global-typography-vesta_section-letter-spacing: 0.02em;
	--e-global-typography-secondary-font-size: 22px;
	--e-global-typography-vesta_lead-font-size: 22px;
	--e-global-typography-vesta_hero-font-size: 40px;
	--e-global-typography-text-font-size: 17px;
	--e-global-typography-vesta_card_title-font-size: 15px;
	--e-global-typography-vesta_news_title-font-size: 16px;
}
/* Phones: all three converge on a calmer mobile scale than today's. */
@media (max-width: 767px) {
	.elementor-kit-5.vesta-type-a,
	.elementor-kit-5.vesta-type-b,
	.elementor-kit-5.vesta-type-c {
		--e-global-typography-primary-font-size: 28px;
		--e-global-typography-vesta_section-font-size: 24px;
		--e-global-typography-secondary-font-size: 19px;
		--e-global-typography-vesta_lead-font-size: 19px;
		--e-global-typography-vesta_hero-font-size: 26px;
		--e-global-typography-vesta_card_title-font-size: 14px;
		--e-global-typography-vesta_news_title-font-size: 15px;
	}
	.elementor-kit-5.vesta-type-b { --e-global-typography-text-font-size: 17px; }
}

/* The preview switcher itself (only rendered when ?type= is present). */
.vesta-type-switch {
	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 9999;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	max-width: calc(100% - 32px);
	padding: 6px;
	border-radius: 999px;
	background: #1F3A5F;
	box-shadow: 0 8px 28px rgba(15, 33, 55, 0.35);
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
}
.vesta-type-switch .vts-label {
	padding: 0 10px 0 12px;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 600;
}
.vesta-type-switch a {
	padding: 8px 14px;
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.vesta-type-switch a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.vesta-type-switch a[aria-current="true"] { background: #E84A6F; color: #fff; }
.vesta-type-switch a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 520px) { .vesta-type-switch .vts-label { display: none; } }
@media print { .vesta-type-switch { display: none; } }
/* Most copy on this site is centred, so a centred switcher sat on top of it.
   Park it bottom-right on desktop; keep it centred on phones. */
@media (min-width: 768px) {
	.vesta-type-switch { left: auto; right: 16px; transform: none; }
}