/*
 * Essex — chrome & section CSS.
 * Tokens come from theme.json (var(--wp--preset--*) / var(--wp--custom--*)).
 * This file styles header, footer, page-hero, and effects with no block equivalent.
 * Backgrounds use relative url(./img/...) so they resolve on any domain/subdir.
 */

/* ---------- shared ---------- */
:root {
	--essex-topbar-bg: #f5f2f0;
	--essex-topbar-ink: #696969;
	--essex-shell-x: clamp(1rem, 4vw, 70px);
}

/* =====================================================================
   HEADER
   ===================================================================== */

/* Top utility bar — live sets an explicit 36px line-height on the link
   text itself (not a ratio off font-size), at 15px font-size; that's what
   actually drives the 50px total bar height (7 + 36 + 7), not 16px/1.4. */
.essex-topbar {
	background-color: var(--essex-topbar-bg);
	font-size: 15px;
	color: var(--essex-topbar-ink);
}
.essex-topbar .wp-block-group { color: var(--essex-topbar-ink); }
.essex-topbar a { color: var(--essex-topbar-ink); text-decoration: none; }
.essex-topbar a:hover { color: var(--wp--preset--color--primary); }
.essex-topbar__inner {
	max-width: none;
	padding-inline: var(--essex-shell-x);
	padding-block: 7px;
}
.essex-topbar p { margin: 0; line-height: 36px; }

/* Top-bar items separated by a small bullet (matches live: 5px #696969 dot
   between the two items on each side — no icons). */
.essex-topbar__side { align-items: center; }
.essex-topbar__side > * + *::before {
	content: "";
	display: inline-block;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--essex-topbar-ink);
	margin: 0 0.7rem;
	vertical-align: middle;
}

/* Main header bar — live has no extra vertical padding here; the row's
   height (91px at desktop) comes from the nav links' own padding, with the
   logo (200x64.5) vertically centered against it. */
.essex-header-main__inner {
	max-width: none;
	padding-inline: var(--essex-shell-x);
	padding-block: 0;
}
.essex-header-main .wp-block-site-logo img { width: 200px; height: auto; }
.essex-header-main .wp-block-site-logo { flex-shrink: 0; }
.essex-header-main .essex-main-nav { flex-shrink: 1; }

/* Push Client Portal + search flush to the right edge; nav hugs the logo. */
/* !important: a core block-library flex-layout rule sets margin on flex
   children with equal-or-higher specificity than a single class, silently
   zeroing this out and leaving the actions group stranded next to the nav
   instead of flush right. */
.essex-header-main__inner .essex-header-actions { margin-left: auto !important; flex-shrink: 0; }

/* Navigation — resting color is the same muted ink as the top bar; only
   hovered/current items turn navy (not the light-blue accent). */
.essex-header-main .wp-block-navigation {
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 500;
	font-size: 1.0625rem;
}
.essex-header-main .wp-block-navigation-item > a,
.essex-header-main .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	color: var(--essex-topbar-ink);
	padding-block: 2rem;
	white-space: nowrap;
}
.essex-header-main .wp-block-navigation a:hover,
.essex-header-main .wp-block-navigation .current-menu-item > a,
.essex-header-main .wp-block-navigation-submenu.current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); }

/* Dropdown panel — core WP snaps this open (width/height jump 0->auto,
   opacity only, 0.1s linear). Live eases it in with a slide+fade
   (translateY(30px)->0, opacity 0->1, 0.3s ease-in-out); match that. */
.essex-header-main .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 260px;
	width: auto;
	height: auto;
	overflow: visible;
	background: #fff;
	border: 1px solid rgba(11, 61, 46, 0.1);
	border-radius: 7px;
	box-shadow: none;
	padding-block: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.essex-header-main .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.essex-header-main .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	transform: translateY(0);
}
.essex-header-main .wp-block-navigation__submenu-container .wp-block-navigation-item {
	padding-inline: 30px;
	position: relative;
}
.essex-header-main .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
	display: block;
	width: 100%;
	/* !important: WP core's own Navigation block CSS targets this same element
	   (.wp-block-navigation .has-child ... > .wp-block-navigation-item__content)
	   at higher specificity (5 classes vs ours) and sets padding: 0.5em 1em,
	   silently winning the cascade and making every item sit at a fixed ~17px
	   regardless of hover. Force our padding so the hover shift actually applies. */
	padding: 15px 0 !important;
	color: var(--essex-topbar-ink);
	font-weight: 500;
	white-space: nowrap;
	border-bottom: 1px solid rgba(11, 61, 46, 0.1);
	transition: color 0.2s, padding-left 0.2s;
}
.essex-header-main .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child > a {
	border-bottom: none;
}
.essex-header-main .wp-block-navigation__submenu-container .current-menu-item > a { color: var(--essex-topbar-ink); }

/* Hover marker — small navy diamond that scales in, matching the live
   theme's icomoon glyph (\e911) used the same way. */
.essex-header-main .wp-block-navigation__submenu-container .wp-block-navigation-item > a::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--primary);
	transform: translateY(-50%) rotate(45deg) scale(0);
	transition: transform 0.2s;
}
.essex-header-main .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
	color: var(--wp--preset--color--primary);
	padding-left: 8px !important;
}
.essex-header-main .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover::before {
	transform: translateY(-50%) rotate(45deg) scale(1);
}

/* Client Portal pill — live: 15px/30px padding, 30px radius, 48px tall */
.essex-portal-btn .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 30px;
	font-size: 16px;
	font-weight: 600;
	line-height: 18px;
	padding: 15px 30px;
}
.essex-portal-btn .wp-block-button__link:hover { background-color: var(--wp--preset--color--primary-dark); }
/* Advyzon logo inside the pill (client request 2026-09-21): 30px tall, padding trimmed so the pill stays 48px */
.essex-portal-btn .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; padding: 9px 26px 9px 16px; }
.essex-portal-btn__logo { height: 30px; width: auto; display: block; }
/* Schwab pill (2026-09-23, Chris): identical shape/setup to the Advyzon pill, Schwab blue */
.essex-portal-btn { gap: 10px; flex-wrap: nowrap; }
.essex-portal-btn--schwab .wp-block-button__link { background-color: #009ddb; }
.essex-portal-btn--schwab .wp-block-button__link:hover { background-color: #0084b8; }
.essex-portal-btn--schwab .essex-portal-btn__logo { height: 30px; width: 30px; border-radius: 5px; }

/* Search (2026-09-23, Chris): icon only in the header; core's button-only mode
   toggles the field on click. The open field drops below the icon, right-aligned,
   so the header row never shifts. Core hides the input (width 0) while collapsed. */
.essex-header-main .wp-block-search { --c: var(--wp--preset--color--primary); position: relative; width: auto; }
.essex-header-main .wp-block-search__inside-wrapper { border: none; border-radius: 0; background: transparent; }
.essex-header-main .wp-block-search button {
	background: transparent; color: var(--wp--preset--color--primary);
	padding: 10px; border: none; border-radius: 50%; cursor: pointer;
}
.essex-header-main .wp-block-search button:hover { background: #eef1f6; }
.essex-header-main .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
	width: 260px; max-width: calc(100vw - 2 * var(--essex-shell-x));
	padding: 10px 14px; font-size: 15px;
	background: #fff; border: 1px solid #d9dde3; border-radius: 6px;
	box-shadow: 0 10px 28px rgba(18, 40, 84, 0.14);
}

/* Header rows (2026-09-23, Chris): at 1500px and below the two portal pills do not
   fit beside the nav (the single row needs ~1400px of content width), so the header
   becomes two rows: logo + nav + search icon, then the pills right-aligned on their
   own row. The actions group dissolves (display: contents) so its children join the
   header's own flex row. */
@media (max-width: 1500px) {
	.essex-header-main__inner { flex-wrap: wrap; row-gap: 0; }
	.essex-header-main__inner .essex-header-actions { display: contents; }
	.essex-header-main .wp-block-search { margin-left: auto; order: 3; }
	.essex-header-main .essex-portal-btn { order: 4; flex-basis: 100%; justify-content: flex-end; padding: 0 0 14px; }
}
/* Tablet: tighten the first row so logo + nav + search icon share one line */
@media (max-width: 1100px) {
	.essex-header-main__inner { column-gap: 1.25rem; }
	.essex-header-main .wp-block-site-logo img { width: 170px; }
	.essex-header-main .essex-main-nav.wp-block-navigation { gap: 1.2rem !important; }
}

/* =====================================================================
   PAGE HERO  (navy title banner)
   ===================================================================== */
.essex-page-hero {
	background-color: var(--wp--preset--color--primary);
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.essex-page-hero .wp-block-post-title,
.essex-page-hero h1 {
	color: #fff;
	font-weight: 600; /* live: 600, 80px, lh 85px */
	font-size: clamp(2.5rem, 6vw, 80px);
	line-height: 1.0625;
	margin: 0;
	padding-inline: var(--essex-shell-x);
}

/* =====================================================================
   SERVICE PAGE (two-column + sticky sidebar + green CTA card)
   ===================================================================== */
/* !important: core columns CSS sets align-items: initial !important on
   .wp-block-columns, defeating even its own are-vertically-aligned-top
   class — without this the sidebar column stretches to full content
   height and position:sticky has no room to travel. */
.wp-block-columns.essex-service-layout { align-items: flex-start !important; }
.essex-service-aside { position: sticky; top: 1.5rem; }

/* Main content typography — every value measured off live (audit 2026-07-02):
   intro h2 55px/600 #6ec1e4, intro p 22/32, section h3 35px/600 #6ec1e4,
   sub-head (p>strong block) 30px/600 navy, body p+li 16/28 #696969. */
.essex-service-main > *:first-child { margin-top: 0; }
.essex-service-main h2 {
	font-size: 35px;
	line-height: 1.28;
	font-weight: 600;
	color: #6ec1e4;
	margin: 30px 0 28px;
}
/* Only the page-intro heading (first block of the content) is the big 55px;
   later h2s (e.g. the closing section) render at section size on live. */
.essex-service-main > h2:first-child {
	font-size: 55px;
	line-height: 1.13;
	margin: 0 0 40px;
}
.essex-service-main > h2:first-child + p,
.essex-service-main > h2:first-child + p + p {
	font-size: 22px;
	line-height: 32px;
}
.essex-service-main h3 {
	font-size: 35px;
	line-height: 1.28;
	font-weight: 600;
	color: #6ec1e4;
	margin: 30px 0 28px;
}
.essex-service-main :is(h2, h3) + p strong:first-child {
	display: block;
	font-size: 30px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0;
}
.essex-service-main p {
	font-size: 16px;
	line-height: 28px;
	color: #696969;
	margin: 0 0 20px;
}
/* H4 = the navy sub-head, so editors get it from Heading > H4 instead of the
   bold-paragraph trick above (kept as a fallback for any untouched content). */
.wp-block-post-content h4 {
	font-size: 30px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin: 0 0 20px;
}
.essex-service-main figure.wp-block-image img { border-radius: 0; }
.essex-service-main figure.wp-block-image { margin: 40px 0; }
/* Closing section — full-width row below the two-column layout on live:
   55px heading left (~41%), 22px/32 paragraphs right. */
.essex-closing-cols { margin-top: 100px !important; }
.essex-closing-cols h2 {
	font-size: 55px;
	line-height: 1.13;
	font-weight: 600;
	color: #6ec1e4;
	margin: 0;
}
.essex-closing-cols p {
	font-size: 22px;
	line-height: 32px;
	color: #696969;
	margin: 0 0 20px;
}
.essex-service-main ul { padding-left: 18px; margin: 0 0 20px; }
.essex-service-main li { font-size: 16px; line-height: 28px; color: #696969; margin: 0; }

/* Service nav — live: bordered 14px-radius card (40px padding), each item a
   20px/500 gray link with a 36px rounded-square arrow chip (#f5f2f0) at the
   right, hairline separators, 77px row pitch. Live does NOT highlight the
   current page here. */
.essex-service-nav {
	font-weight: 500;
	width: 100%;
	box-sizing: border-box; /* keep the 40px padding inside the 33% column */
	border: 1px solid rgba(11, 61, 46, 0.1);
	border-radius: 14px;
	padding: 40px;
}
/* WP copies the nav's className onto the inner <ul> too, which duplicated the
   card border/padding as a second inner keyline — reset the ul explicitly. */
ul.essex-service-nav,
.essex-service-nav .wp-block-navigation__container {
	border: none;
	border-radius: 0;
	padding: 0;
	width: 100%;
	gap: 0 !important;
}
.essex-service-nav .wp-block-navigation-item { width: 100%; }
.essex-service-nav .wp-block-navigation-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	font-size: 20px;
	font-weight: 500;
	/* !important: theme.json's global nav link color wins the cascade here otherwise */
	color: var(--essex-topbar-ink) !important;
	padding: 20px 0;
	border-bottom: 1px solid rgba(11, 61, 46, 0.1);
}
.essex-service-nav .wp-block-navigation-item a::after {
	content: "";
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background-color: #f5f2f0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23696969' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8h13'/%3E%3Cpath d='M9 3l5 5-5 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: background-color 0.2s;
}
.essex-service-nav .wp-block-navigation-item:first-child a { padding-top: 0; }
.essex-service-nav .wp-block-navigation-item:last-child a { padding-bottom: 0; border-bottom: none; }
.essex-service-nav .wp-block-navigation-item a:hover { color: var(--wp--preset--color--primary) !important; }
/* Hover: chip flips to solid navy with a white arrow (matches live). */
.essex-service-nav .wp-block-navigation-item a:hover::after {
	background-color: var(--wp--preset--color--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8h13'/%3E%3Cpath d='M9 3l5 5-5 5'/%3E%3C/svg%3E");
}

/* green CTA card — measured live: 10px radius, 40px padding, 173px logo,
   h3 26px/500 lh36 ls-1.3, white pill button with NAVY text (15/30, r30). */
.essx-sidecta {
	position: relative;
	background: #0B3D2E url("./img/essex_sidebar.png") no-repeat bottom right;
	background-size: auto 58%;
	border-radius: 10px;
	padding: 40px;
	color: #fff;
	overflow: hidden;
	margin-top: 30px;
	min-height: 456px; /* live: extra space below the button where the globe shows */
}
.essx-sidecta__logo img { width: 173px; height: auto; display: block; margin: 0 0 20px; }
.essx-sidecta h3 {
	color: #fff;
	font-size: 26px;
	line-height: 36px;
	font-weight: 500;
	letter-spacing: -1.3px;
	margin: 0 0 30px;
	max-width: 252px; /* live wraps this heading to 3 lines */
}
.essx-sidecta__btn .wp-block-button__link {
	background: #fff; color: var(--wp--preset--color--primary);
	font-size: 16px; font-weight: 600; line-height: 18px;
	padding: 15px 30px; border-radius: 30px;
}
.essx-sidecta__btn .wp-block-button__link:hover { background: var(--wp--preset--color--primary); color: #fff; }

@media (max-width: 781px) {
	.essex-service-aside { position: static; margin-top: 2.5rem; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */

/* Every stacked full-width section (header chrome, CTA band, footer,
   disclaimer, copyright) needs to sit flush against its neighbor with no
   default WP block-gap margin showing the body background between them.
   NOTE: the header/footer template-parts auto-wrap in .wp-block-template-part,
   which is the actual top-level sibling that receives the gap margin. */
.wp-block-template-part,
.essex-topbar,
.essex-header-main,
.essex-page-hero,
.essex-cta-band,
.essex-footer,
.essex-footer-main,
.essex-disclaimer,
.essex-copyright { margin-block: 0 !important; }

/* CTA band */
.essex-cta-band {
	position: relative;
	background: linear-gradient(rgba(18, 40, 84, 0.55), rgba(18, 40, 84, 0.55)), url("./img/essex-cta-bottom.webp");
	background-size: cover;
	background-position: center;
	color: #fff;
	display: flex;
	align-items: center;
	min-height: 430px; /* matches live CTA band height */
}
.essex-cta-band__inner { width: 100%; padding-block: 2.5rem; padding-inline: var(--essex-shell-x); max-width: 1430px; margin-inline: auto; }
/* Live: h2 55px/600 lh62 wrapping to two lines (~560px column). */
.essex-cta-band h2 { color: #fff; font-weight: 600; font-size: clamp(2rem, 3.8vw, 55px); line-height: 1.13; margin: 0; max-width: 560px; }
.essex-cta-band .essex-consult-btn .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 30px;
	font-size: 16px;
	font-weight: 600;
	line-height: 18px;
	padding: 15px 30px;
}
/* Newsletter — live: translucent rounded input (white 5% bg, white 10%
   border, 55px tall) with a WHITE pill Subscribe button inset at the right;
   NOT a white form wrapper. */
.essex-newsletter h3 { color: #fff; font-weight: 500; font-size: 20px; margin: 0 0 20px; }
.essex-newsletter form { position: relative; max-width: 374px; background: transparent; border-radius: 0; padding: 0; }
.essex-newsletter input[type="email"] {
	width: 100%;
	height: 55px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font: inherit;
	font-size: 16px;
	box-sizing: border-box;
	padding: 0 150px 0 25px;
}
.essex-newsletter input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.65); }
.essex-newsletter input[type="email"]:focus { outline: none; }
.essex-newsletter button,
.essex-newsletter input[type="submit"] {
	width: auto; font: inherit;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	border: 0; cursor: pointer;
	background: #fff;
	color: var(--wp--preset--color--primary);
	font-size: 16px; font-weight: 600; line-height: 18px;
	border-radius: 30px;
	padding: 15px 30px;
}
.essex-newsletter .essex-hp { position: absolute; left: -9999px; }

/* Footer wrapper carries the blue + texture so every sub-section (main,
   disclaimer, copyright) is one uniform color down to the very bottom. */
.essex-footer {
	background-color: var(--wp--preset--color--primary);
	background-image: url("./img/bg-footer.webp");
	background-size: cover;
	background-position: center;
	color: #dfe7f3;
}

/* Footer main */
.essex-footer-main {
	color: #dfe7f3;
}
/* Live footer text: 16px at 51% white; headings 20px/500; li pitch 20px;
   bullet dot = 5px at rgba(248,248,248,.32). */
.essex-footer-main__inner { padding-block: 3.5rem; padding-inline: var(--essex-shell-x); max-width: 1430px; margin-inline: auto; }
.essex-footer-main img { width: 140px; height: auto; }
.essex-footer-main figure.wp-block-image { margin: 0 0 16px; }
.essex-footer-main p { color: rgba(255, 255, 255, 0.51); font-size: 16px; line-height: 24px; margin: 0; }
.essex-footer-main h2,
.essex-footer-main h3,
.essex-footer-main h4 { color: #fff; font-size: 20px; font-weight: 500; margin: 0 0 30px; }
.essex-footer-main ul { list-style: none; padding: 0; margin: 0; }
.essex-footer-main li { margin-bottom: 20px; line-height: 21px; }
.essex-footer-main li a {
	color: rgba(255, 255, 255, 0.51); text-decoration: none;
	position: relative; padding-left: 1rem;
	font-size: 16px; line-height: 21px;
}
.essex-footer-main li a::before {
	content: ""; position: absolute; left: 0; top: 0.6em;
	width: 5px; height: 5px; border-radius: 50%;
	background: rgba(248, 248, 248, 0.32);
}
.essex-footer-main li a:hover { color: #fff; }

/* Disclaimer (inherits the footer-wrapper blue) */
.essex-disclaimer { background: transparent; }
.essex-disclaimer__inner { padding-block: 2rem 1rem; padding-inline: var(--essex-shell-x); max-width: 1430px; margin-inline: auto; }
.essex-disclaimer p { color: rgba(255, 255, 255, 0.51); font-size: 16px; line-height: 24px; margin: 0 0 20px; }

/* Copyright bar — same blue as the footer floor (no darker strip) */
.essex-copyright { background: transparent; }
.essex-copyright__inner {
	padding-block: 1.1rem; padding-inline: var(--essex-shell-x);
	max-width: 1430px; margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.essex-copyright p { color: rgba(255, 255, 255, 0.65); font-size: 16px; line-height: 24px; margin: 0; }

/* Social icons: 40px circles — live bg is white at 10% over the footer navy
   (reads as a slightly lighter navy), white glyphs. */
.essex-copyright .wp-block-social-links { gap: 0.6rem; }
.essex-copyright .wp-social-link {
	width: 40px; height: 40px;
	background-color: rgba(255, 255, 255, 0.1) !important;
	border-radius: 50%;
}
/* Center the glyph via the anchor — core's social-links CSS overrides
   display on the li itself, leaving the icon stuck top-left otherwise. */
.essex-copyright .wp-social-link a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	color: #fff;
}
.essex-copyright .wp-social-link svg { width: 20px; height: 20px; fill: #fff; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 767px) {
	.essex-topbar { display: none; }
	.essex-page-hero { min-height: 200px; }
}

/* =====================================================================
   HOME  (front-page.html) — every value measured off live at 1920.
   ===================================================================== */
.essx-home-hero,
.essx-home-discover,
.essx-home-approach,
.essx-home-models,
.essx-home-team,
.essx-home-flow,
.essx-home-blog { margin-block: 0 !important; }

/* pill buttons are anchors — kill the global link underline in one sweep */
.essx-home-hero .btn, .essx-home-models .btn, .essx-home-blog .btn,
.essx-home-team .teambtn, .essx-read-more, .essx-contact-form button,
.essx-contact-cards .socials a { text-decoration: none !important; }

/* shared eyebrow pill (home sections only — team/case-study pages have their own PLAIN eyebrows) */
.essx-eyebrow {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	color: var(--essex-topbar-ink);
	border: 1px solid rgba(11, 61, 46, 0.1);
	border-radius: 999px;
	padding: 7px 20px;
	margin-bottom: 10px;
}
.essx-eyebrow--light { color: #fff; border-color: rgba(255, 255, 255, 0.2); }

/* hero — 849px, white 100px/90px heading over the forest photo */
.essx-home-hero {
	min-height: 849px;
	background: url("./img/home-hero.jpg") center / cover no-repeat;
}
.essx-home-hero__inner { padding: 269px var(--essex-shell-x) 0; } /* live hero content is NOT boxed: x70 at 1920 */
.essx-home-hero h1 {
	color: #fff;
	font-size: clamp(3rem, 5.2vw, 100px);
	line-height: 0.9;
	font-weight: 600;
	max-width: 625px;
	margin: 0 0 30px;
}
.essx-home-hero .sub { color: #fff; font-size: 22px; font-weight: 500; margin: 0 0 40px; max-width: 625px; }
.essx-home-hero .btn,
.essx-home-models .btn {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 16px; font-weight: 600; line-height: 18px;
	padding: 15px 30px;
	border-radius: 30px;
}
.essx-home-hero .btn:hover, .essx-home-models .btn:hover { background: var(--wp--preset--color--primary-dark); }

/* shared shell for the boxed sections */
.essx-home-discover, .essx-home-approach, .essx-home-models, .essx-home-flow, .essx-home-blog {
	box-sizing: border-box; /* content-box would add the 70px padding OUTSIDE the 1430 cap */
	max-width: 1430px;
	margin-inline: auto !important;
	padding-inline: var(--essex-shell-x);
}
.essx-home-discover h2, .essx-home-approach h2, .essx-home-flow h2, .essx-home-blog h2 {
	font-size: 55px;
	line-height: 62px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

/* discover — centered intro */
.essx-home-discover { padding-top: 125px; text-align: center; }
.essx-home-discover p { font-size: 16px; line-height: 26px; color: #696969; max-width: 800px; margin: 25px auto 0; }

/* approach — text left, photo card + stat right */
.essx-home-approach { display: flex; gap: 90px; padding-top: 116px; }
/* stat card footnote (client-supplied stat + source, 2026-09-18) */
.essx-home-approach .stat sup { font-size: 60%; line-height: 0; }
.essx-home-approach .stat sup a { color: inherit; text-decoration: none; }
.essx-stat-footnote { max-width: 1430px; margin: 16px auto 0; padding-inline: var(--essex-shell-x); box-sizing: border-box; font-size: 13px; line-height: 20px; color: #696969; }
.essx-stat-footnote a { color: var(--wp--preset--color--primary); }
.essx-home-approach .txt { flex: 0 0 44%; }
.essx-home-approach h2 { margin-bottom: 30px; }
.essx-home-approach p { font-size: 16px; line-height: 26px; color: #696969; margin: 0 0 15px; }
.essx-home-approach .media { flex: 1; position: relative; align-self: flex-start; }
.essx-home-approach .photo {
	width: 100%;
	height: 556px;
	border-radius: 14px;
	background: url("./img/home1-image2.png") center / cover no-repeat;
}
.essx-home-approach .stat {
	position: absolute;
	left: 10px; bottom: 10px;
	width: 307px; height: 206px;
	box-sizing: border-box;
	background: var(--wp--preset--color--primary);
	border-radius: 14px;
	padding: 30px 35px;
	color: #fff;
}
.essx-home-approach .stat p { color: #fff; font-size: 16px; line-height: 24px; margin: 0; }
.essx-home-approach .stat .num { font-size: 75px; line-height: 1; font-weight: 600; margin: 4px 0; }

/* three cream model cards */

/* team band — full width photo, content right, button bottom-left */
.essx-home-team {
	/* Full team photo, anchored near the top: the old home-team_02.jpg crop had the two
	   tallest heads on its top edge, so any viewport wider than 1920 sliced them. The
	   band also grows with very wide screens so the front row stays in frame. */
	min-height: max(630px, 33vw);
	background:
		linear-gradient(28deg, rgba(28, 74, 138, 0.92) 0%, rgba(28, 74, 138, 0.55) 30%, rgba(28, 74, 138, 0) 60%),
		url("./img/essex-team-full.jpg") center 8% / cover no-repeat;
	margin-top: 135px !important;
	display: flex;
}
.essx-home-team__inner {
	flex: 1;
	box-sizing: border-box;
	max-width: 1430px;
	margin-inline: auto;
	padding: 70px var(--essex-shell-x);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}
/* Wide screens: the photo is centred, so a 1430px centred text column lands on the
   faces. Let the row use the band's full width there so the copy sits clear on the right. */
@media (min-width: 1921px) {
	.essx-home-team__inner { max-width: none; }
}
.essx-home-team .teambtn {
	display: inline-block;
	background: #fff;
	color: var(--wp--preset--color--primary);
	font-size: 16px; font-weight: 600; line-height: 18px;
	padding: 15px 30px;
	border-radius: 30px;
	white-space: nowrap;
}
.essx-home-team .txt { max-width: 449px; text-align: right; align-self: center; margin-top: 141px; }
.essx-home-team .txt .essx-eyebrow--light { background: #fff; color: var(--wp--preset--color--primary); border-color: #fff; font-weight: 500; margin-bottom: 0; }
.essx-home-team .txt h2 { color: #fff; font-size: 55px; line-height: 62px; font-weight: 600; margin: 10px 0 20px; }
.essx-home-team .txt p { color: #fff; font-size: 16px; line-height: 26px; margin: 0; }

/* ---- Planning-Based Approach rings (Essex home) ----
   Replaces the placeholder flowchart (2026-09-14). Four ring stages 01→04 spiral
   inward to a Financial Independence core; legend cards on the left highlight the
   matching ring on hover; rings reveal outer→inner on scroll. Markup + the SVG
   builder live in templates/front-page.html (wp:html block). */
.essx-home-flow { padding-top: 125px; }
.essx-home-flow .head { margin-bottom: 24px; text-align: center; } /* the SVG carries ~36px of empty canvas above the outer ring */
.essx-home-flow .head h2 { max-width: none; } /* the <br> in the markup keeps "to Financial Independence" together on line two */

.essx-rings {
	display: grid;
	grid-template-columns: minmax(300px, 460px) minmax(420px, 1fr);
	gap: 40px 60px;
	align-items: center;
}
.essx-rings__legend { display: flex; flex-direction: column; gap: 20px; }
.essx-rings .ring-callout {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 0 18px;
	align-items: start;
	padding: 22px 26px 22px 22px;
	border: 1.5px solid rgba(34, 75, 138, .16);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(22, 38, 74, .06);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	cursor: default;
}
.essx-rings .ring-callout__num {
	grid-row: span 3;
	width: 56px; height: 56px;
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; font-weight: 700; color: #fff;
	background: var(--c);
	letter-spacing: .02em;
}
.essx-rings .ring-callout__title { font-size: 18px; font-weight: 600; color: var(--wp--preset--color--primary); line-height: 1.25; }
.essx-rings .ring-callout__sub { font-size: 15px; line-height: 22px; color: #696969; margin-top: 4px; }
.essx-rings .ring-callout__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.essx-rings .ring-callout__chips span {
	font-size: 12.5px; font-weight: 500; color: var(--wp--preset--color--primary);
	background: rgba(34, 75, 138, .07); border-radius: 999px; padding: 4px 10px;
}
.essx-rings .ring-callout.is-hot, .essx-rings .ring-callout:hover {
	transform: translateY(-3px);
	border-color: var(--c);
	box-shadow: 0 18px 38px rgba(22, 38, 74, .18);
}
.essx-rings .ring-callout--goal { border-color: var(--wp--preset--color--primary-dark); background: var(--wp--preset--color--primary-dark); }
.essx-rings .ring-callout--goal .ring-callout__num { background: #fff; color: var(--wp--preset--color--primary-dark); }
.essx-rings .ring-callout--goal .ring-callout__title { color: #fff; }
.essx-rings .ring-callout--goal .ring-callout__sub { color: rgba(255, 255, 255, .75); }

.essx-rings__art { position: relative; }
.essx-rings__art svg { width: 100%; height: auto; display: block; overflow: visible; }
/* client's sentence from the sketch, centred under the rings, same style as the card titles */
.essx-rings__note { font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--wp--preset--color--primary); text-align: center; max-width: 560px; margin: 16px auto 0; }
.essx-rings .ring { fill: none; stroke: var(--c); stroke-width: var(--w); transition: opacity .25s ease, stroke-width .25s ease; opacity: 0; }
.essx-rings .ring.is-in { opacity: 1; }
.essx-rings .ring.is-hot { stroke-width: calc(var(--w) + 6px); }
.essx-rings .ring-hit { fill: none; stroke: transparent; stroke-width: var(--w); cursor: default; pointer-events: stroke; }
.essx-rings .ring-label { font-size: 15.5px; font-weight: 700; letter-spacing: .14em; fill: #fff; text-transform: uppercase; pointer-events: none; }
.essx-rings .ring-label--sub { font-weight: 500; letter-spacing: .12em; fill: rgba(255, 255, 255, .92); }
.essx-rings .ring-num { font-size: 22px; font-weight: 700; fill: #fff; pointer-events: none; letter-spacing: .02em; }
.essx-rings .core { fill: var(--wp--preset--color--primary-dark); }
.essx-rings .core-ring { fill: none; stroke: rgba(34, 75, 138, .18); stroke-width: 1.5; }
.essx-rings .core-t1 { font-size: 24px; font-weight: 700; fill: #fff; text-anchor: middle; letter-spacing: .01em; }
.essx-rings .core-t2 { font-size: 11px; font-weight: 500; fill: rgba(255, 255, 255, .8); text-anchor: middle; letter-spacing: .16em; text-transform: uppercase; }
.essx-rings .core-arrow { fill: none; stroke: var(--wp--preset--color--primary); stroke-width: 1.5; opacity: .5; }

@media (max-width: 1100px) {
	.essx-rings { grid-template-columns: 1fr; }
	.essx-rings__art { max-width: 640px; margin: 0 auto; order: -1; }
}
@media (max-width: 640px) {
	.essx-home-flow .head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
	/* phone: the cards carry the words; the rings keep only their numbers */
	.essx-rings .ring-label { display: none; }
	.essx-rings .ring-num { font-size: 30px; }
	.essx-rings .core-t2 { font-size: 11.5px; letter-spacing: .1em; }
	.essx-rings .core-t1 { font-size: 27px; }
	.essx-rings .core-arrow { display: none; }
}

/* blog demo cards (static on live too) */
.essx-home-blog { padding-top: 125px; text-align: center; }
.essx-home-blog .center { text-align: center; }
.essx-home-blog > h2 { margin-bottom: 55px; }
.essx-home-blog .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: left; padding-bottom: 125px; }
.essx-home-blog .card {
	border: 1px solid rgba(11, 61, 46, 0.1);
	border-radius: 14px;
	padding: 10px;
}
.essx-home-blog .card img { width: 100%; height: 249px; object-fit: cover; border-radius: 8px; display: block; }
.essx-home-blog .card.is-portrait img { object-position: center bottom; } /* portrait covers: show the title area, not the middle */
.essx-home-blog .body { padding: 20px 20px 25px; }
.essx-home-blog .meta { display: flex; flex-wrap: wrap; gap: 6px 30px; font-size: 16px; color: #696969; margin: 0 0 20px; }
.essx-home-blog .meta span { white-space: nowrap; }
.essx-home-blog h5 { font-size: 22px; font-weight: 600; color: var(--wp--preset--color--primary); margin: 0 0 15px; }
.essx-home-blog h5 a { color: inherit; text-decoration: none; }
.essx-home-blog .thumb-link { display: block; }
.essx-home-blog .body > p:not(.meta) { font-size: 16px; line-height: 26px; color: #696969; margin: 0 0 20px; }
.essx-home-blog .btn {
	display: inline-block;
	background: var(--essex-topbar-bg);
	color: var(--wp--preset--color--primary);
	font-size: 14px; font-weight: 600; line-height: 14px;
	padding: 12px 24px;
	border-radius: 30px;
}
.essx-home-blog .btn:hover { background: var(--wp--preset--color--primary); color: #fff; }

/* =====================================================================
   RESPONSIVE — live breakpoints: tablet <=1024, mobile <=767, small <=480.
   Type scale measured off live at 1024/767/375.
   ===================================================================== */
@media (max-width: 1024px) {
	.essx-home-hero { min-height: 45vw; }
	.essx-home-hero__inner { padding-top: 60px; }
	.essx-home-hero h1 { font-size: 70px; line-height: 65px; }
	.essex-service-main > h2:first-child,
	.essex-closing-cols h2 { font-size: 46px; line-height: 52px; }
	.essex-service-main h3 { font-size: 30px; line-height: 38.4px; }
	.essx-home-hero__inner { padding-bottom: 60px; } /* keep the CTA off the hero's bottom edge when content is taller than min-height */
}
@media (max-width: 767px) {
	.essx-home-hero { min-height: 120vw; }
	.essx-home-hero__inner { padding-top: 33vw; }
	.essx-home-hero h1 { font-size: 50px; line-height: 51.5px; max-width: 500px; }
	.essx-home-discover h2, .essx-home-approach h2, .essx-home-flow h2,
	.essx-home-blog h2, .essx-home-team .txt h2 { font-size: 36px; line-height: 43.2px; }
	.essex-cta-band h2 { font-size: 36px; }
	.essx-home-approach { flex-direction: column; gap: 40px; }
	.essx-home-approach .media { align-self: stretch; width: 100%; }
	.essx-home-models, .essx-home-blog .grid { grid-template-columns: 1fr; }
	.essx-home-team__inner { flex-direction: column-reverse; align-items: flex-start; }
	.essx-home-team .txt { text-align: left; margin-top: 40px; align-self: flex-start; }
	.essx-home-flow .head { flex-direction: column; align-items: flex-start; gap: 20px; }
	/* Phone: the two portal pills share the row edge to edge */
	.essex-header-main .essex-portal-btn { justify-content: stretch; }
	.essex-header-main .essex-portal-btn .wp-block-button { flex: 1 1 0; }
	.essex-header-main .essex-portal-btn .wp-block-button__link { width: 100%; justify-content: center; padding: 9px 14px; }
	/* hero: CTA sits off the bottom edge; Discover heading gap matches its heading-to-copy gap */
	.essx-home-hero__inner { padding-bottom: 56px; }
	.essx-home-discover { padding-top: 24px; }
}
/* Hamburger header (2026-09-23, Chris). Live collapsed the nav at 767 and WP core
   only collapses at 600; between 768 and 900 the full nav no longer fits beside the
   logo once the search icon is there, so the hamburger now takes over at <=900.
   Row 1 = logo left, search icon + hamburger right with breathing room;
   row 2 = the two portal pills (right-aligned on tablets, edge to edge on phones). */
@media (max-width: 900px) {
	.essex-header-main .essex-main-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
	.essex-header-main .essex-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	.essex-header-main__inner { column-gap: 12px; padding-top: 8px; }
	.essex-header-main .wp-block-site-logo img { width: 170px; }
	.essex-header-main .wp-block-search { order: 2; margin-left: auto; }
	.essex-header-main .essex-main-nav { order: 3; flex-shrink: 0; padding-right: 6px; }
	.essex-header-main .essex-portal-btn { order: 4; gap: 12px; padding: 12px 0 18px; }
}
@media (max-width: 480px) {
	.essx-home-hero h1 { font-size: 45px; line-height: 46.35px; }
	.essx-home-discover h2, .essx-home-approach h2, .essx-home-flow h2,
	.essx-home-blog h2, .essx-home-team .txt h2 { font-size: 32px; line-height: 38.4px; }
	.essex-cta-band h2 { font-size: 32px; }
	.essx-home-approach .stat { width: auto; right: 10px; height: auto; }
	/* portal pills side by side on a phone: smaller type/logo so "Client Portal" stays on one line */
	.essex-portal-btn .wp-block-button__link { font-size: 14px; padding: 9px 10px; gap: 8px; white-space: nowrap; }
	.essex-portal-btn__logo, .essex-portal-btn--schwab .essex-portal-btn__logo { height: 26px; }
	.essex-portal-btn--schwab .essex-portal-btn__logo { width: 26px; }
}

/* =====================================================================
   BLOG  (/insights/ archive + single) — values measured off live:
   post title 30px/600 navy (40px on single), meta 16px #696969,
   Read-more 14px navy pill, sidebar 370px with 55px widget headings,
   tag pills 14px bordered r5.
   ===================================================================== */
.essex-blog-main .wp-block-post-featured-image img { border-radius: 0; }
.essx-post-list > li { margin-bottom: 50px; }
.essx-post-list .wp-block-post-featured-image { margin-bottom: 25px; }
.essx-entry-meta { gap: 14px; margin-bottom: 10px; }
/* live blog links are not underlined anywhere */
.essx-entry-meta a, .essex-blog-sidebar a, .essex-blog-main .wp-block-post-title a,
.essx-post-nav a, .essx-comment a, .essx-post-tags a { text-decoration: none; }
.essx-entry-meta,
.essx-entry-meta a,
.essx-entry-meta .wp-block-post-date,
.essx-entry-meta .wp-block-post-terms { font-size: 16px; line-height: 24px; color: var(--essex-topbar-ink); text-transform: capitalize; }
.essx-entry-meta .wp-block-post-author-name::before { content: "By "; }
.essx-entry-meta .wp-block-post-author-name a { color: var(--wp--preset--color--primary); }
.essx-entry-meta a:hover { color: var(--wp--preset--color--primary); }
.essx-comments-count::after { content: " Comments"; }
.essex-blog-main .wp-block-post-title {
	font-size: 30px;
	line-height: 1.3;
	font-weight: 600;
	margin: 0 0 25px;
}
.essex-blog-main .wp-block-post-title a { color: var(--wp--preset--color--primary); }
.essx-read-more {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	padding: 12px 24px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 30px;
}
.essx-read-more:hover { background: var(--wp--preset--color--primary-dark); }

/* single */
.essx-single-title { font-size: 40px !important; line-height: 50px !important; font-weight: 600 !important; color: var(--wp--preset--color--primary) !important; margin: 0 0 10px !important; }
.essx-post-tags { gap: 12px; align-items: center; margin-top: 40px; }
.essx-post-tags p { margin: 0; font-size: 16px; color: var(--wp--preset--color--ink); }
.essx-post-tags .wp-block-post-terms__prefix { font-weight: 700; font-size: 16px; color: var(--wp--preset--color--ink); margin-right: 12px; }
.essx-post-tags .essx-tags { align-items: center; }
.essx-author-box {
	background: #f5f2f0;
	border-radius: 14px;
	padding: 40px;
	gap: 30px;
	margin-top: 40px;
}
.essx-author-box .wp-block-post-author-name { font-size: 20px; font-weight: 600; color: var(--wp--preset--color--primary); }
.essx-post-nav {
	border-top: 1px solid rgba(11, 61, 46, 0.1);
	border-bottom: 1px solid rgba(11, 61, 46, 0.1);
	padding: 30px 0;
	margin: 50px 0;
}
.essx-post-nav a { color: var(--wp--preset--color--primary); font-weight: 600; }
.essx-post-nav .wp-block-post-navigation-link { display: flex; flex-direction: column-reverse; gap: 4px; }
.essx-post-nav .post-navigation-link__label { color: var(--essex-topbar-ink); font-weight: 400; font-size: 14px; }
.essx-comments .wp-block-comments-title { font-size: 26px; font-weight: 600; color: var(--wp--preset--color--primary); margin: 0 0 30px; }
.essx-comment { gap: 20px; padding: 25px 0; border-bottom: 1px solid rgba(11, 61, 46, 0.1); }
.essx-comment-head { width: 100%; }
.essx-comment .wp-block-comment-author-name { font-size: 18px; font-weight: 600; }
.essx-comment .wp-block-comment-author-name a { color: var(--wp--preset--color--primary); }
.essx-comment .wp-block-comment-date { font-size: 14px; color: var(--essex-topbar-ink); }
.essx-comment .wp-block-comment-content { font-size: 16px; line-height: 28px; color: #696969; }
.essx-comment .wp-block-comment-reply-link a { color: var(--essex-topbar-ink); font-size: 15px; }
.essx-comments .comment-respond { margin-top: 50px; }
.essx-comments .comment-reply-title { font-size: 26px; font-weight: 600; color: var(--wp--preset--color--primary); }
.essx-comments input[type="text"],
.essx-comments input[type="email"],
.essx-comments textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(11, 61, 46, 0.1);
	border-radius: 7px;
	padding: 14px 18px;
	font: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
}
.essx-comments input:focus, .essx-comments textarea:focus { outline: none; border-color: var(--wp--preset--color--primary); }
.essx-comments .comment-form-author, .essx-comments .comment-form-email { display: inline-block; width: calc(50% - 12px); }
.essx-comments .comment-form-author { margin-right: 20px; }
.essx-comments .form-submit input {
	width: auto;
	border: 0; cursor: pointer;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 16px; font-weight: 600;
	padding: 15px 30px;
	border-radius: 30px;
}
.essx-comments .form-submit input:hover { background: var(--wp--preset--color--primary-dark); }

/* sidebar */
.essex-blog-sidebar .essx-widget { margin-bottom: 60px; }
.essex-blog-sidebar .essx-widget h2 {
	font-size: 32px;
	line-height: 40px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin: 0 0 20px;
}
.essex-blog-sidebar .wp-block-search__inside-wrapper {
	border: 1px solid rgba(11, 61, 46, 0.1);
	border-radius: 7px;
	padding: 4px 4px 4px 14px;
}
.essex-blog-sidebar .wp-block-search__input { border: none; background: transparent; font-size: 16px; }
.essex-blog-sidebar .wp-block-search__input:focus { outline: none; }
.essex-blog-sidebar .wp-block-search button { background: transparent; color: var(--wp--preset--color--primary); border: none; }
.essx-recent-posts, .essx-recent-comments { list-style: none; padding: 0; margin: 0; }
.essx-recent-posts li { margin-bottom: 24px; }
.essx-recent-posts a, .essx-recent-comments a, .essx-recent-comments li { font-size: 16px; line-height: 24px; color: var(--essex-topbar-ink); }
.essx-recent-posts a:hover, .essx-recent-comments a:hover { color: var(--wp--preset--color--primary); }
.essx-recent-comments li { margin-bottom: 24px; }
.essx-cats { padding-left: 18px; margin: 0; color: var(--essex-topbar-ink); }
.essx-cats li { margin-bottom: 12px; }
.essx-cats a { font-size: 16px; font-weight: 500; color: var(--essex-topbar-ink); }
.essx-cats a:hover { color: var(--wp--preset--color--primary); }
.essx-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.essx-tags a, .essx-tags .tag-cloud-link {
	display: inline-block;
	font-size: 14px !important;
	color: var(--essex-topbar-ink);
	border: 1px solid rgba(11, 61, 46, 0.1);
	border-radius: 5px;
	padding: 8px 15px;
	text-decoration: none;
}
.essx-tags a:hover { color: #fff; background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }
/* compact green CTA (blog sidebar variant) */
.essx-sidecta--compact { padding: 30px; min-height: 0; margin-top: 0; }
.essx-sidecta--compact h3 { font-size: 20px; line-height: 28px; letter-spacing: 0; margin: 0 0 20px; max-width: none; }
.essx-sidecta--compact .essx-sidecta__btn .wp-block-button__link { font-size: 14px; padding: 12px 24px; }

@media (max-width: 900px) {
	.essex-blog-layout { flex-wrap: wrap !important; }
	.essex-blog-aside { margin-top: 3rem; }
}

/* =====================================================================
   CONTACT PAGE — layout from the Advisora contact template (page 45 on
   live, still draft/demo there): title + 4 bordered info cards + form
   row. Card tokens match the service sidebar (1px rgba(11,61,46,.1),
   14px radius). Real Essex details; demo-only sections dropped.
   ===================================================================== */
.essx-contact-title { margin-bottom: 70px !important; }
.essx-contact-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin-bottom: 90px;
}
.essx-contact-cards .card {
	border: 1px solid rgba(11, 61, 46, 0.1);
	border-radius: 14px;
	padding: 30px 40px 25px;
}
.essx-contact-cards .lbl { font-weight: 500; color: var(--wp--preset--color--ink); margin: 0 0 15px; }
.essx-contact-cards .val { font-weight: 500; line-height: 28px; color: #0B3D2E; margin: 0; }
.essx-contact-cards .val a { color: #0B3D2E; text-decoration: underline; }
.essx-contact-cards .val a:hover { color: var(--wp--preset--color--primary); }
.essx-contact-cards .socials { display: flex; gap: 10px; }
.essx-contact-cards .socials a {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border-radius: 10px;
	background: #f5f2f0;
	color: var(--essex-topbar-ink);
	transition: background 0.2s, color 0.2s;
}
.essx-contact-cards .socials a:hover { background: var(--wp--preset--color--primary); color: #fff; }
.essx-contact-form-row figure.wp-block-image img { border-radius: 14px; }
/* Two-column contact layout: image + form left, the four info cards stacked right. */
.essx-contact-two .wp-block-column { align-self: flex-start; }
.essx-contact-two figure.wp-block-image { margin: 0 0 30px; }
.essx-contact-cards.essx-contact-cards--stack { grid-template-columns: 1fr; gap: 20px; margin-bottom: 0; }
.essx-contact-form .row { display: flex; gap: 20px; margin-bottom: 20px; }
.essx-contact-form .row.two > * { flex: 1; }
.essx-contact-form input,
.essx-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(11, 61, 46, 0.1);
	border-radius: 7px;
	padding: 14px 18px;
	font: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	background: #fff;
}
.essx-contact-form input:focus,
.essx-contact-form textarea:focus { outline: none; border-color: var(--wp--preset--color--primary); }
.essx-contact-form button {
	border: 0; cursor: pointer;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 16px; font-weight: 600; line-height: 18px;
	padding: 15px 30px;
	border-radius: 30px;
	transition: background 0.2s;
}
.essx-contact-form button:hover { background: var(--wp--preset--color--primary-dark); }
/* Contact Form 7 rendering of the same form (2026-09-29): CF7 wraps each field in a span and
   renders the submit as <input type="submit">; keep the original look. */
.essx-contact-form .wpcf7-form-control-wrap { display: block; flex: 1; }
.essx-contact-form p { margin: 0; }
.essx-contact-form input[type="submit"] {
	border: 0; cursor: pointer; background: var(--wp--preset--color--primary); color: #fff;
	font: inherit; font-size: 16px; font-weight: 600; line-height: 18px; padding: 15px 30px; border-radius: 30px; width: auto;
	transition: background 0.2s;
}
.essx-contact-form input[type="submit"]:hover { background: var(--wp--preset--color--primary-dark); }
.essx-contact-form .wpcf7-spinner { margin-left: 12px; }
.essx-contact-form .wpcf7-not-valid-tip { display: block; font-size: 13px; color: #b3261e; margin-top: 6px; }
.essx-contact-form .wpcf7-response-output { margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--wp--preset--color--primary); border-radius: 7px; font-size: 15px; }
.essx-contact-form form.sent .wpcf7-response-output { border-color: #2f9e6f; background: #f1faf6; }
.essx-contact-form form.invalid .wpcf7-response-output, .essx-contact-form form.failed .wpcf7-response-output { border-color: #b3261e; background: #fdf3f2; }
/* Footer newsletter as a CF7 form: same translucent input + white pill button */
.essex-newsletter .wpcf7 form { position: relative; max-width: 374px; }
.essex-newsletter .wpcf7 p { margin: 0; }
.essex-newsletter .wpcf7-form-control-wrap { display: block; }
.essex-newsletter .wpcf7-spinner { position: absolute; right: -32px; top: 50%; transform: translateY(-50%); }
.essex-newsletter .wpcf7-not-valid-tip { display: block; font-size: 13px; color: #ffd6d2; margin-top: 6px; }
.essex-newsletter .wpcf7-response-output { margin: 12px 0 0; padding: 0; border: 0; font-size: 14px; color: #fff; }
@media (max-width: 1100px) { .essx-contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .essx-contact-cards { grid-template-columns: 1fr; } .essx-contact-form .row.two { flex-direction: column; } }

/* =====================================================================
   TEAM PAGE  (/team/)
   ===================================================================== */
.essx-team { font-family: inherit; color: var(--wp--preset--color--ink); max-width: 1160px; margin: 0 auto; line-height: 1.7; }
.essx-team * { box-sizing: border-box; }
.essx-team .tophero { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin: 18px 0 90px; }
.essx-team .tophero .txt { padding: 8px 0; }
.essx-team .eyebrow { letter-spacing: .22em; font-size: 13px; font-weight: 800; color: var(--wp--preset--color--accent); margin: 0 0 22px; }
.essx-team .tophero h2 { color: var(--wp--preset--color--primary-dark); font-size: 47px; line-height: 1.06; font-weight: 800; margin: 0 0 26px; letter-spacing: -.024em; }
.essx-team .tophero p { font-size: 18.5px; line-height: 1.85; color: var(--wp--preset--color--muted); margin: 0; max-width: 92%; }
.essx-team .tophero .img { display: block; }
.essx-team .tophero .img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center; border-radius: 22px; display: block; box-shadow: 0 28px 56px rgba(22,38,74,.22); }
.essx-team .sectitle { text-align: center; margin: 0 0 38px; }
.essx-team .sectitle h3 { color: var(--wp--preset--color--primary-dark); font-size: 32px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.essx-team .sectitle .rule { width: 62px; height: 4px; background: var(--wp--preset--color--accent); border-radius: 3px; margin: 16px auto 0; }
.essx-team .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.essx-team .member { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(22,38,74,.09); transition: transform .22s, box-shadow .22s; }
.essx-team .member:hover { transform: translateY(-7px); box-shadow: 0 22px 46px rgba(22,38,74,.18); }
.essx-team .photo { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.essx-team .photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; background: #e9eef5; transition: transform .45s ease; }
.essx-team .member:hover .photo img { transform: scale(1.06); }
.essx-team .photo .grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,26,52,.94) 0%, rgba(14,26,52,.5) 32%, rgba(14,26,52,0) 62%); }
.essx-team .photo .creds { position: absolute; top: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 78%; }
.essx-team .photo .pill { background: rgba(255,255,255,.95); color: var(--wp--preset--color--primary); font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 30px; letter-spacing: .05em; white-space: nowrap; }
.essx-team .photo .pill.star { background: #1c6e8c; color: #fff; }
.essx-team .photo .pill.star .st { font-size: 15px; line-height: 0; vertical-align: -2px; margin-right: 1px; }
.essx-team .disclaimer, .essx-fsp-disclaimer { font-size: 11.5px; line-height: 1.62; color: #9aa3af; margin: 46px 0 0; padding-top: 22px; border-top: 1px solid #eef1f5; }
.essx-team .disclaimer strong, .essx-fsp-disclaimer strong { color: #7a828f; letter-spacing: .04em; }
.essx-team-disclaimer { margin: 0 auto; }
.essx-team .photo .who { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px; color: #fff; }
.essx-team .photo .who h4 { margin: 0 0 4px; font-size: 21px; font-weight: 800; color: #fff; line-height: 1.18; }
.essx-team .photo .who .role { margin: 0; font-size: 13px; font-weight: 600; color: #bfd8f2; }
.essx-team .photo .who .more { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #fff; opacity: .85; transition: opacity .2s, transform .2s; }
.essx-team a.member { text-decoration: none; color: inherit; }
.essx-team a.member:hover .who .more { opacity: 1; transform: translateX(3px); }
.essx-team .body { padding: 22px 22px 24px; }
.essx-team .body .bio { font-size: 14px; color: var(--wp--preset--color--ink); line-height: 1.66; margin: 0; }

/* =====================================================================
   TEAM BIO PAGES  (/team/<first-last>/, template "Team Bio")
   ===================================================================== */
.essex-bio .essx-bio-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; border-radius: 18px; box-shadow: 0 22px 46px rgba(22,38,74,.16); display: block; }
.essex-bio .essx-bio-role { margin-top: 0 !important; }
.essex-bio .essx-bio-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px !important; }
.essex-bio .essx-bio-pills .pill { background: rgba(34,75,138,.08); color: var(--wp--preset--color--primary); font-size: 12px; font-weight: 800; padding: 6px 13px; border-radius: 30px; letter-spacing: .05em; white-space: nowrap; }
.essex-bio .essx-bio-pills .pill.star { background: #1c6e8c; color: #fff; }
.essex-bio .essx-bio-cfp { font-size: 13px !important; line-height: 1.6; color: #7a828f !important; font-style: italic; margin-top: 26px !important; }
.essex-bio .essx-fsp-disclaimer { margin-top: 40px; }
@media (max-width: 781px) { .essex-bio .essx-bio-photo { max-width: 360px; } }
.essx-team .teamcta { position: relative; border-radius: 22px; overflow: hidden; margin: 70px 0 0; text-align: center; }
.essx-team .teamcta .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.essx-team .teamcta .ov { position: absolute; inset: 0; background: linear-gradient(rgba(20,40,82,.88), rgba(20,40,82,.9)); }
.essx-team .teamcta .inner { position: relative; padding: 64px 28px; }
.essx-team .teamcta h3 { color: #fff; font-size: 32px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.01em; }
.essx-team .teamcta p { color: #cfe0f3; margin: 0 0 26px; font-size: 17px; }
.essx-team .teamcta a { display: inline-block; background: #fff; color: var(--wp--preset--color--primary); font-weight: 800; padding: 16px 42px; border-radius: 34px; text-decoration: none; font-size: 16px; transition: background .2s, color .2s, transform .2s; }
.essx-team .teamcta a:hover { background: var(--wp--preset--color--accent); color: #fff; transform: translateY(-2px); }
@media (max-width: 1100px) { .essx-team .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .essx-team .tophero { grid-template-columns: 1fr; gap: 32px; margin: 10px 0 60px; } .essx-team .tophero h2 { font-size: 34px; } }
@media (max-width: 620px) { .essx-team .grid { grid-template-columns: 1fr; } }

/* =====================================================================
   CASE STUDY + CASE STUDIES LISTING  (/case-studies/, single case study)
   ===================================================================== */
.essx-cs, .essx-csl { font-family: inherit; color: var(--wp--preset--color--ink); max-width: 1080px; margin: 0 auto; line-height: 1.7; }
.essx-cs *, .essx-csl * { box-sizing: border-box; }
.essx-cs .eyebrow { letter-spacing: .14em; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--accent); margin: 0 0 10px; }
.essx-cs .lead { font-size: 34px; line-height: 1.2; color: var(--wp--preset--color--primary-dark); font-weight: 700; margin: 0 0 18px; }
.essx-cs .intro { font-size: 18px; color: var(--wp--preset--color--muted); margin: 0 0 30px; }
.essx-cs .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 36px; }
.essx-cs .stat { background: #f4f7fb; border: 1px solid #e6ecf4; border-radius: 14px; padding: 22px 16px; text-align: center; }
.essx-cs .stat .num { display: block; font-size: 30px; font-weight: 800; color: var(--wp--preset--color--primary); }
.essx-cs .stat .lbl { display: block; font-size: 13px; color: var(--wp--preset--color--muted); margin-top: 6px; }
.essx-cs .hero-img { width: 100%; height: auto; border-radius: 16px; margin: 0 0 40px; }
.essx-cs .sec, .essx-cs .narrative h3 { color: var(--wp--preset--color--primary-dark); font-weight: 700; }
.essx-cs .sec { font-size: 26px; text-align: center; margin: 0 0 26px; }
.essx-cs .charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 0 44px; }
.essx-cs .chart-card { background: #fff; border: 1px solid #e6ecf4; border-radius: 16px; padding: 22px; box-shadow: 0 8px 24px rgba(30,55,100,.06); text-align: center; }
.essx-cs .chart-card h4 { margin: 0 0 14px; font-size: 16px; color: var(--wp--preset--color--primary); }
.essx-cs .chart { width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; }
.essx-cs .chart-card .cap { font-size: 13px; color: var(--wp--preset--color--muted); margin: 12px 0 0; }
.essx-cs .legend { list-style: none; padding: 0; margin: 14px 0 0; font-size: 13px; text-align: left; display: inline-block; }
.essx-cs .legend li { margin: 5px 0; color: var(--wp--preset--color--ink); }
.essx-cs .legend span { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.essx-cs .bval { font-size: 11px; font-weight: 700; fill: var(--wp--preset--color--primary); text-anchor: middle; }
.essx-cs .bx { font-size: 11px; fill: var(--wp--preset--color--muted); text-anchor: middle; }
.essx-cs .narrative { margin: 0 0 36px; }
.essx-cs .narrative h3 { font-size: 22px; margin: 30px 0 10px; }
.essx-cs .narrative ul { color: var(--wp--preset--color--ink); padding-left: 20px; }
.essx-cs .narrative li { margin: 6px 0; }
.essx-cs .cta { background: var(--wp--preset--color--primary); border-radius: 18px; padding: 36px; text-align: center; color: #fff; margin: 0 0 26px; }
.essx-cs .cta h3 { color: #fff; font-size: 24px; margin: 0 0 18px; }
.essx-cs .cta .btn, .essx-csl .more { display: inline-block; }
.essx-cs .cta .btn { background: #fff; color: var(--wp--preset--color--primary); font-weight: 700; padding: 13px 30px; border-radius: 30px; text-decoration: none; }
.essx-cs .disclaimer, .essx-csl .disclaimer { font-size: 12px; color: #9aa3af; font-style: italic; border-top: 1px solid #eef1f5; padding-top: 18px; margin-top: 24px; }
.essx-csl .intro { font-size: 18px; color: var(--wp--preset--color--muted); margin: 0 0 34px; }
.essx-csl .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 0 30px; }
.essx-csl .card { display: block; background: #fff; border: 1px solid #e6ecf4; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 8px 24px rgba(30,55,100,.06); transition: transform .15s, box-shadow .15s; }
.essx-csl .card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(30,55,100,.12); }
.essx-csl .thumb { height: 160px; background-size: cover; background-position: center; }
.essx-csl .body { padding: 22px; }
.essx-csl .tag { display: inline-block; background: #eaf2fb; color: var(--wp--preset--color--primary); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin: 0 0 12px; }
.essx-csl .card h3 { color: var(--wp--preset--color--primary-dark); font-size: 20px; margin: 0 0 10px; }
.essx-csl .card p { color: var(--wp--preset--color--muted); font-size: 15px; margin: 0 0 16px; }
.essx-csl .more { color: var(--wp--preset--color--accent); font-weight: 700; font-size: 15px; }
@media (max-width: 900px) { .essx-cs .charts, .essx-csl .grid { grid-template-columns: 1fr; } .essx-cs .stats { grid-template-columns: repeat(2, 1fr); } .essx-cs .lead { font-size: 28px; } }