/* =====================================================================
   SVCP 2027 - modern design layer
   Loaded after the legacy stylesheet; restyles the site into a dark,
   cinematic, authoritative financial-analyst aesthetic while keeping the
   urban feel + animated hero. Scoped mostly to new .svcp-* markup on the
   home page, plus targeted modernizing of the shared nav / footer / forms.
   ===================================================================== */

:root {
	--svcp-display:   'Roboto', Arial, Helvetica, sans-serif;   /* legacy prod heading face */
	--svcp-ink:       #080b12;   /* deep midnight base */
	--svcp-ink-1:     #0b1019;   /* section base */
	--svcp-ink-2:     #0f1626;   /* panel */
	--svcp-ink-3:     #131c2f;   /* card */
	--svcp-line:      rgba(255,255,255,.09);
	--svcp-line-2:    rgba(255,255,255,.16);
	--svcp-text:      #e9edf5;   /* primary text */
	--svcp-muted:     #bcc4d4;   /* secondary text (lightened for readability) */
	--svcp-faint:     #7d8aa2;   /* tertiary */
	--svcp-accent:    #d9b02e;   /* SVCP mustard - THE brand yellow, used everywhere */
	--svcp-accent-2:  #f3d47b;   /* lighter cyan */
	--svcp-glow:      rgba(226,182,74,.35);
	--svcp-gold:      #f2ce6b;   /* refined signal accent (sparingly) */
	--svcp-maxw:      1200px;
	--svcp-gutter:    clamp(20px, 5vw, 64px);
	--svcp-sans:      'PT Sans', Arial, Helvetica, sans-serif;   /* legacy prod body face */
	--svcp-mono:      ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace;
	--svcp-radius:    14px;
	--svcp-ease:      cubic-bezier(.2,.7,.2,1);
}

/* ---- base ---------------------------------------------------------- */
body.svcp27 {
	background: var(--svcp-ink);
	color: var(--svcp-text);
	font-family: var(--svcp-sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.svcp27 ::selection { background: var(--svcp-accent); color: #001018; }
.svcp27 a { color: var(--svcp-accent-2); }

/* display face on headlines + big statements */
.svcp-h2, .svcp-thesis-statement, .svcp-cta h2, .svcp-stat .n, .svcp-card h3, .svcp-insight h3,
body.svcp27 .slider-item-title, body.svcp27 .page-heading .page-title, .svcp-quote blockquote {
	font-family: var(--svcp-display); font-weight: 700; letter-spacing: -.02em;
}
.svcp-quote blockquote { font-weight: 600; letter-spacing: -.015em; font-style: normal; }

.svcp-container { max-width: var(--svcp-maxw); margin: 0 auto; padding-inline: var(--svcp-gutter); }
.svcp-section { position: relative; padding-block: clamp(64px, 9vw, 128px); }
.svcp-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--svcp-mono); font-size: 12.5px; letter-spacing: .22em;
	text-transform: uppercase; color: var(--svcp-accent-2); margin: 0 0 22px;
}
.svcp-h2 {
	font-size: clamp(28px, 4vw, 46px); line-height: 1.08; letter-spacing: -.02em;
	font-weight: 800; color: #fff; margin: 0 0 20px; text-wrap: balance;
}
.svcp-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--svcp-muted); max-width: 62ch; margin: 0; }

/* ---- buttons (also restyles legacy .btn) -------------------------- */
.svcp27 .btn,
.svcp-btn {
	--bg: var(--svcp-accent);
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--svcp-sans); font-weight: 700; font-size: 13px;
	letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
	color: #1f3157 !important; background: var(--bg);
	padding: 12px 28px; border-radius: 0; border: 0; cursor: pointer;
	transition: transform .25s var(--svcp-ease), box-shadow .25s var(--svcp-ease), background .25s;
	box-shadow: 0 8px 30px -10px var(--svcp-glow);
}
.svcp27 .btn:hover,
.svcp-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--svcp-glow); }
.svcp-btn--ghost {
	background: transparent; color: var(--svcp-text) !important;
	border: 1px solid var(--svcp-line-2); box-shadow: none;
}
.svcp-btn--ghost:hover { border-color: var(--svcp-accent); color: #fff !important; background: rgba(226,182,74,.08); transform: translateY(-2px); }

/* =====================================================================
   NAV - modern sticky header (shared across pages)
   ===================================================================== */
body.svcp27 #header.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(8,11,18,.30); backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--svcp-line);
	transition: background .3s var(--svcp-ease), border-color .3s;
}
body.svcp27.svcp-scrolled #header.site-header,
body.svcp27:not(.page-template-template-home) #header.site-header {
	background: rgba(8,11,18,.30);
}
body.svcp27 #header .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 10px; }
/* tighten nav item spacing */
body.svcp27 #navigation .menu > li { margin: 0 !important; padding: 0 !important; }
body.svcp27 #navigation ul { gap: 2px; }
body.svcp27 #header #logo { margin: 0; padding: 0; line-height: 0; }
body.svcp27 #header #logo img { filter: brightness(0) invert(1); height: 43px; max-height: 43px; width: auto; max-width: 100%; margin: 0; display: block; }
body.svcp27 #header .site-title, body.svcp27 #header .site-description { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.svcp27 #navigation ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
body.svcp27 #navigation a {
	display: block; padding: 9px 11px; color: var(--svcp-text); text-decoration: none;
	font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: 0;
	transition: color .2s, background .2s;
}
body.svcp27 #navigation a:hover,
body.svcp27 #navigation .current-menu-item > a { color: #fff; background: rgba(255,255,255,.06); }
body.svcp27 #navigation .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--svcp-accent); }
/* neutralize legacy cyan on active/hovered nav items -> gold */
body.svcp27 #navigation .menu > li.current-menu-item > a,
body.svcp27 #navigation .menu > li.current-menu-ancestor > a,
body.svcp27 #navigation .menu > li > a:hover { border-color: transparent !important; color: var(--svcp-accent) !important; }
/* KEEP THE HEADER 100% CONSTANT ON SCROLL. The legacy JS adds a 'header-sticky'
   body class that bloats nav padding to 20px 0 (taller bar + collapsed word
   spacing) and switches to position:fixed. Our header is already position:sticky,
   so neutralize all of that. */
/* The legacy main.js adds body{padding-top:111px} on scroll to make room for a
   position:fixed header. Our header is position:sticky (stays in flow), so that
   padding double-offsets and shoves the page down on first scroll (the nav
   "floats down then back up"). Kill it - !important beats the JS inline style. */
body.svcp27.header-sticky, body.svcp27.header-sticky.admin-bar { padding-top: 0 !important; }
body.svcp27.header-sticky #header.site-header { position: sticky !important; top: 0 !important; box-shadow: none !important; }
body.svcp27.header-sticky #header .header-inner { padding-block: 10px !important; }
body.svcp27.header-sticky #navigation .menu > li > a,
body.svcp27.header-sticky #navigation a { padding: 9px 11px !important; }
body.svcp27.header-sticky #header #logo img { height: 43px !important; }

/* nav CTA - last menu item becomes a button (optional, via .menu-item CTA) */
body.svcp27 #navigation .svcp-nav-cta > a,
body.svcp27 #navigation li.contact-menu-item > a { color: #1f3157; background: var(--svcp-accent); }

/* dropdown submenus - clean dark panel (replaces the legacy white/blue cards) */
body.svcp27 #navigation .menu-item-has-children { position: relative; }
body.svcp27 #navigation .sub-menu {
	background: rgba(9,13,21,.97) !important; backdrop-filter: saturate(150%) blur(16px);
	border: none !important; border-radius: 0 !important;
	padding: 0 !important; min-width: 170px; width: max-content; max-width: 210px;
	box-shadow: 0 26px 60px -22px rgba(0,0,0,.75) !important;
	top: 100% !important; left: 0 !important; margin: 0 !important; overflow: hidden;
}
body.svcp27 #navigation .sub-menu { display: block !important; }
body.svcp27 #navigation .sub-menu li { display: block !important; width: 100% !important; float: none !important; margin: 0 !important; border: 0 !important; background: none !important; }
body.svcp27 #navigation .sub-menu a {
	display: block !important; padding: 7px 14px !important; color: var(--svcp-muted) !important;
	font-size: 12px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important;
	border-radius: 8px !important; background: none !important; border: 0 !important; line-height: 1.2 !important;
}
body.svcp27 #navigation .sub-menu a:hover { color: #fff !important; background: rgba(226,182,74,.12) !important; }
body.svcp27 #navigation .sub-menu .current-menu-item > a { color: #fff !important; box-shadow: none !important; }
/* remove the legacy blue "Learn more" pseudo-button injected on every submenu link */
body.svcp27 #navigation .sub-menu a::after,
body.svcp27 #navigation .sub-menu a::before,
body.svcp27 #navigation .menu ul li > a::after { content: none !important; display: none !important; }
/* current-page item in the dropdown gets a small navy chevron on its right
   (same size as the active-page caret under the top-nav item) */
body.svcp27 #navigation .sub-menu .current-menu-item > a,
body.svcp27 #navigation .sub-menu .current_page_item > a { position: relative; }
body.svcp27 #navigation .sub-menu .current-menu-item > a::after,
body.svcp27 #navigation .sub-menu .current_page_item > a::after {
	content: "" !important; display: inline-block !important;
	width: 6px !important; height: 6px !important;
	/* reset the base "Learn more" pseudo's box so it can't inflate the chevron */
	padding: 0 !important; min-width: 0 !important; min-height: 0 !important;
	font-size: 0 !important; line-height: 0 !important; margin: 0 0 0 9px !important;
	vertical-align: middle; background: none !important; box-shadow: none !important;
	/* border-bottom + border-left rotated 45deg -> chevron points LEFT, toward the
	   active item (indicating the current page) */
	border: 0 !important; border-bottom: 2px solid #1f3157 !important; border-left: 2px solid #1f3157 !important;
	box-sizing: border-box !important; transform: rotate(45deg);
}
/* hide any legacy per-item image/button/"learn more" treatment inside the dropdown */
body.svcp27 #navigation .sub-menu .btn,
body.svcp27 #navigation .sub-menu img,
body.svcp27 #navigation .sub-menu br { display: none !important; }
/* nested submenu (3rd level) opens to the right */
body.svcp27 #navigation .sub-menu .sub-menu { top: -9px !important; left: 100% !important; }

/* =====================================================================
   HERO - keep the animated slider, refine the type + overlay
   ===================================================================== */
body.svcp27.page-template-template-home { background: #05070c; }

/* animated hero background: drifting cyan aurora + faint urban grid */
.svcp-hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #05070c; }
.svcp-hero-fx::before {
	content: ""; position: absolute; inset: -25%;
	background:
		radial-gradient(38% 48% at 22% 32%, rgba(226,182,74,.22), transparent 60%),
		radial-gradient(34% 44% at 80% 22%, rgba(243,212,123,.14), transparent 62%),
		radial-gradient(52% 60% at 62% 92%, rgba(180,140,40,.18), transparent 60%);
	filter: blur(24px); animation: svcp-aurora 26s ease-in-out infinite alternate;
}
.svcp-hero-fx::after {
	content: ""; position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 66px 66px;
	-webkit-mask-image: radial-gradient(120% 80% at 50% 28%, #000, transparent 74%);
	mask-image: radial-gradient(120% 80% at 50% 28%, #000, transparent 74%);
	animation: svcp-grid 44s linear infinite;
}
@keyframes svcp-aurora { 0% { transform: translate3d(-4%,-3%,0) scale(1); } 100% { transform: translate3d(5%,4%,0) scale(1.15); } }
@keyframes svcp-grid { 0% { background-position: 0 0, 0 0; } 100% { background-position: 66px 132px, 66px 132px; } }

/* let the animated fx show through the carousel on the home hero */
body.svcp27.page-template-template-home .slider,
body.svcp27.page-template-template-home .carousel,
body.svcp27.page-template-template-home .carousel > div,
body.svcp27.page-template-template-home .slider-item-wrap { background-color: transparent !important; }

body.svcp27 .slider { position: relative; z-index: 1; }
body.svcp27 .slider::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
	background:
		radial-gradient(120% 90% at 15% 40%, rgba(226,182,74,.10), transparent 55%),
		linear-gradient(90deg, rgba(4,6,11,.52) 0%, rgba(4,6,11,.24) 38%, transparent 64%),
		linear-gradient(180deg, rgba(5,7,12,.12) 0%, rgba(5,7,12,.04) 45%, rgba(5,7,12,.74) 100%);
}
body.svcp27 .slider-item-wrap { position: relative; z-index: 1; }
body.svcp27 .slider-item-main { position: relative; z-index: 3; }
body.svcp27 .slider-item-title {
	font-size: clamp(40px, 7vw, 82px) !important; line-height: .98 !important;
	letter-spacing: -.03em; font-weight: 800 !important; color: #fff !important;
	text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
body.svcp27 .slider-item-subtitle {
	font-size: clamp(17px, 2vw, 22px) !important; line-height: 1.5 !important;
	color: #eef2f8 !important; font-weight: 500 !important; max-width: 48ch;
	text-shadow: 0 1px 6px rgba(0,0,0,.75);
}
body.svcp27 .slider-item-logo img { filter: brightness(0) invert(1); opacity: .9; }

/* shorter hero so the scroll cue + a hint of the next section are visible */
body.svcp27.page-template-template-home .slider-item { height: clamp(470px, 60vh, 600px) !important; min-height: 470px; }
body.svcp27.page-template-template-home #main { position: relative; }

/* scroll cue: down-arrows flanking the label */
.svcp-scrollcue {
	position: absolute; left: 50%; top: calc(84vh - 46px); transform: translateX(-50%); z-index: 5;
	display: flex; flex-direction: row; align-items: center; gap: 14px;
	font-family: var(--svcp-mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
	color: var(--svcp-muted); pointer-events: none; white-space: nowrap;
}
.svcp-scrollcue .svcp-arrow { font-size: 15px; line-height: 1; color: var(--svcp-accent); animation: svcp-bounce 1.8s var(--svcp-ease) infinite; }
@keyframes svcp-bounce { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }

/* =====================================================================
   HOMEPAGE authority sections (new .svcp-* markup)
   ===================================================================== */
.svcp-band { background:
	linear-gradient(180deg, var(--svcp-ink) 0%, var(--svcp-ink-1) 100%); }

/* thesis / positioning */
.svcp-thesis { border-top: 1px solid var(--svcp-line); }
.svcp-thesis .svcp-thesis-statement {
	font-size: clamp(24px, 3.4vw, 40px); line-height: 1.25; letter-spacing: -.015em;
	font-weight: 700; color: #fff; max-width: 20ch; margin: 0 0 0 auto; text-wrap: balance;
}
.svcp-thesis .svcp-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px,5vw,72px); align-items: start; }
.svcp-thesis-statement b { color: var(--svcp-accent-2); font-weight: 700; }

/* expertise cards */
.svcp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 18px; margin-top: 42px; }
.svcp-card {
	position: relative; background: var(--svcp-ink-3); border: 1px solid var(--svcp-line);
	border-radius: var(--svcp-radius); padding: 30px 28px 34px; overflow: hidden;
	transition: transform .3s var(--svcp-ease), border-color .3s, background .3s;
}
.svcp-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--svcp-accent), transparent); opacity: .0; transition: opacity .3s; }
.svcp-card:hover { transform: translateY(-4px); border-color: var(--svcp-line-2); background: #162034; }
.svcp-card:hover::before { opacity: 1; }
.svcp-card-num { font-family: var(--svcp-mono); font-size: 12px; color: var(--svcp-accent); letter-spacing: .15em; }
.svcp-card h3 { font-size: 20px; font-weight: 700; color: #fff; margin: 16px 0 10px; letter-spacing: -.01em; }
.svcp-card p { font-size: 15px; line-height: 1.6; color: var(--svcp-muted); margin: 0; }

/* stats / proof */
.svcp-stats { border-block: 1px solid var(--svcp-line); background: var(--svcp-ink-1); }
.svcp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 24px; }
.svcp-stat { text-align: left; }
.svcp-stat .n { font-size: clamp(36px, 5vw, 60px); font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.svcp-stat .n em { color: var(--svcp-accent); font-style: normal; }
.svcp-stat .l { display: block; margin-top: 12px; font-size: 14px; color: var(--svcp-muted); line-height: 1.4; }

/* pull-quote / analyst authority */
.svcp-quote { background:
	radial-gradient(90% 120% at 100% 0%, rgba(226,182,74,.10), transparent 60%), var(--svcp-ink); }
.svcp-quote blockquote {
	font-size: clamp(22px, 3vw, 34px); line-height: 1.35; font-weight: 600; color: #fff;
	letter-spacing: -.015em; max-width: 24ch; margin: 0; border: 0; padding: 0; text-wrap: balance;
}
.svcp-quote blockquote::before { content: "\201C"; display: block; font-size: 3em; line-height: 0; color: var(--svcp-accent); margin: .5em 0 .2em; }
.svcp-quote .cite { margin-top: 26px; font-family: var(--svcp-mono); font-size: 13px; letter-spacing: .1em; color: var(--svcp-muted); text-transform: uppercase; }

/* insights teaser */
.svcp-insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; margin-top: 42px; }
.svcp-insight {
	display: block; text-decoration: none; color: inherit; background: var(--svcp-ink-2);
	border: 1px solid var(--svcp-line); border-radius: var(--svcp-radius); padding: 26px 26px 30px;
	transition: transform .3s var(--svcp-ease), border-color .3s;
}
.svcp-insight:hover { transform: translateY(-4px); border-color: var(--svcp-accent); }
.svcp-insight .k { font-family: var(--svcp-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--svcp-accent-2); }
.svcp-insight h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 14px 0 8px; line-height: 1.3; }
.svcp-insight p { font-size: 14.5px; line-height: 1.55; color: var(--svcp-muted); margin: 0; }

/* CTA band */
.svcp-cta { position: relative; overflow: hidden; background: linear-gradient(120deg, #241a06 0%, #18120a 60%, var(--svcp-ink) 100%); border-top: 1px solid var(--svcp-line); }
.svcp-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 80% 0%, var(--svcp-glow), transparent 60%); opacity: .5; pointer-events: none; }
.svcp-cta-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.svcp-cta h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0; max-width: 18ch; }
.svcp-cta .svcp-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* =====================================================================
   FORMS - modernize Contact Form 7 for the dark theme
   ===================================================================== */
body.svcp27 .wpcf7 label { color: var(--svcp-text); font-size: 14px; font-weight: 500; }
body.svcp27 .wpcf7 input[type=text],
body.svcp27 .wpcf7 input[type=email],
body.svcp27 .wpcf7 input[type=tel],
body.svcp27 .wpcf7 input[type=number],
body.svcp27 .wpcf7 textarea,
body.svcp27 .wpcf7 select {
	width: 100%; background: var(--svcp-ink-2); color: var(--svcp-text);
	border: 1px solid var(--svcp-line-2); border-radius: 0; padding: 13px 15px;
	font-size: 15px; transition: border-color .2s, box-shadow .2s; margin-top: 6px;
}
body.svcp27 .wpcf7 input:focus,
body.svcp27 .wpcf7 textarea:focus,
body.svcp27 .wpcf7 select:focus { outline: 0; border-color: var(--svcp-accent); box-shadow: 0 0 0 3px rgba(226,182,74,.18); }
body.svcp27 .wpcf7 select option { color: #111; }
body.svcp27 .wpcf7 .wpcf7-submit,
body.svcp27 input.wpcf7-submit {
	width: auto; background: #1f3157 !important; color: var(--svcp-accent) !important; border: 0 !important;
	border-radius: 0 !important; padding: 12px 30px !important; font-weight: 700; font-size: 13px;
	letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 30px -10px var(--svcp-glow);
	transition: transform .2s var(--svcp-ease), background .2s, color .2s;
}
body.svcp27 .wpcf7 .wpcf7-submit:hover,
body.svcp27 input.wpcf7-submit:hover { transform: translateY(-2px); background: var(--svcp-accent) !important; color: #1f3157 !important; }
body.svcp27 .svcp-hp { display: none !important; }

/* =====================================================================
   FOOTER - modernize the shared dark footer
   ===================================================================== */
body.svcp27 #footer.site-footer { background: var(--svcp-ink-1); border-top: 1px solid var(--svcp-line); color: var(--svcp-muted); }
body.svcp27 #footer .widget-title, body.svcp27 #footer h4 { color: #fff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
body.svcp27 #footer a { color: var(--svcp-accent-2); }
body.svcp27 #footer a:hover { color: #fff; }

/* =====================================================================
   INNER PAGES - dark page banner + readable content
   ===================================================================== */
body.svcp27:not(.page-template-template-home) #main { background: var(--svcp-ink); }
body.svcp27 .page-heading { background: linear-gradient(180deg, var(--svcp-ink-2), var(--svcp-ink)); border-bottom: 1px solid var(--svcp-line); padding-block: clamp(90px, 12vw, 150px) clamp(28px,4vw,48px); }
body.svcp27 .page-heading .page-title { color: #fff; font-size: clamp(30px,4.5vw,52px); font-weight: 800; letter-spacing: -.02em; }
body.svcp27 .contact-title, body.svcp27 .contact-subtitle { color: #fff; }
body.svcp27 .contact-secondary { color: var(--svcp-muted); }
body.svcp27 .contact-secondary a { color: var(--svcp-accent-2); }

/* =====================================================================
   INNER CONTENT SECTIONS (legacy section system, modernized)
   ===================================================================== */
body.svcp27 .section { position: relative; padding-block: clamp(56px, 8vw, 112px); }
body.svcp27 .section > .wrapper { position: relative; z-index: 2; }

/* dark, cinematic overlay on any image-background section (readability + depth) */
body.svcp27 .section[style*="background-image"]::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(6,9,15,.72) 0%, rgba(6,9,15,.80) 55%, rgba(6,9,15,.92) 100%);
}
/* map legacy bg-color variants onto the dark palette */
body.svcp27 .section-bg-white, body.svcp27 .section-bg-light,
body.svcp27 .section-bg-gray, body.svcp27 .section-bg-grey { background-color: var(--svcp-ink) !important; }
body.svcp27 .section-bg-dark, body.svcp27 .section-bg-black,
body.svcp27 .section-bg-primary, body.svcp27 .section-bg-accent { background-color: var(--svcp-ink-1) !important; }
/* legacy colored video/image overlays (painted via ::after) -> no darkening at
   all; the animated video shows at full brightness (text stays legible via a
   text-shadow on the media-section text, defined further down). */
body.svcp27 [class*="section-bg-overlay"]::after {
	background: none !important;
}
/* keep the CTA section on its signature cyan-dark gradient */
body.svcp27 .section.cta { background: linear-gradient(120deg, #241a06 0%, #18120a 55%, var(--svcp-ink) 100%) !important; }

/* section titles + body text */
body.svcp27 .section-title,
body.svcp27 .tagline-title {
	font-family: var(--svcp-display); font-weight: 700; letter-spacing: -.02em; color: #fff;
	font-size: clamp(26px, 3.8vw, 44px); line-height: 1.1; margin: 0 0 10px; text-wrap: balance;
}
body.svcp27 .section p,
body.svcp27 .section li,
body.svcp27 .info-box-content,
body.svcp27 .cta-primary,
body.svcp27 .content-columns-item-content { color: var(--svcp-muted); line-height: 1.68; }
body.svcp27 .section a:not(.btn) { color: var(--svcp-accent-2); }
body.svcp27 .section strong, body.svcp27 .section b { color: var(--svcp-text); }

/* info-columns (e.g. Risk / Education / Advice) */
body.svcp27 .info-columns-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: clamp(20px,3vw,36px); }
body.svcp27 .info-columns-item { text-align: center; }
body.svcp27 .info-columns-item-image img { max-height: 140px; width: auto; }
body.svcp27 .info-columns-item-title { font-family: var(--svcp-display); font-weight: 700; color: #fff; font-size: 22px; letter-spacing: -.01em; margin-bottom: 8px; }
body.svcp27 .info-columns-item-content { color: var(--svcp-muted); }

/* info-box (media + text) */
body.svcp27 .info-box-title { font-family: var(--svcp-display); font-weight: 700; color: #fff; letter-spacing: -.02em; }
body.svcp27 .info-box-image img, body.svcp27 .info-box-extra-image img,
body.svcp27 .contact-secondary img { border-radius: 12px; }
body.svcp27 .info-box li { position: relative; }

/* CTA section */
body.svcp27 .cta { background: linear-gradient(120deg, #241a06 0%, #18120a 55%, var(--svcp-ink) 100%); border-block: 1px solid var(--svcp-line); }
body.svcp27 .cta-title { font-family: var(--svcp-display); font-weight: 800; color: #fff; letter-spacing: -.02em; }

/* team (authority) */
body.svcp27 .team-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 22px; }
body.svcp27 .team-item { background: var(--svcp-ink-3); border: 1px solid var(--svcp-line); border-radius: var(--svcp-radius); padding: 22px; transition: transform .3s var(--svcp-ease), border-color .3s; }
body.svcp27 .team-item:hover { transform: translateY(-4px); border-color: var(--svcp-line-2); }
body.svcp27 .team-item-image img { border-radius: 10px; width: 100%; }
body.svcp27 .team-item-title { font-family: var(--svcp-display); font-weight: 700; color: #fff; margin-top: 14px; }
body.svcp27 .team-item-excerpt { color: var(--svcp-muted); }

/* page banner - cinematic */
body.svcp27 .page-heading { position: relative; overflow: hidden; background: linear-gradient(180deg, #0c1424 0%, var(--svcp-ink) 100%) !important; border-bottom: 1px solid var(--svcp-line); }
body.svcp27 .page-heading::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 120% at 50% -10%, rgba(226,182,74,.16), transparent 62%); }
body.svcp27 .page-heading .wrapper { position: relative; z-index: 1; }
body.svcp27 .page-heading .page-title { font-family: var(--svcp-display); font-weight: 800; color: #fff; letter-spacing: -.02em; }

/* checklist ticks -> cyan */
body.svcp27 .fa-check-circle, body.svcp27 .fa-check, body.svcp27 [class*="fa-check"] { color: var(--svcp-accent); }

/* =====================================================================
   BLOG / UPDATES - editorial "analyst commentary" treatment
   ===================================================================== */
body.svcp27 .blog-posts-listing { padding-block: clamp(40px,6vw,72px); }
/* .post-s1 is the card wrapper; .post-s1-main is its inner content */
body.svcp27 .post-s1 {
	background: var(--svcp-ink-2); border: 1px solid var(--svcp-line); border-radius: var(--svcp-radius);
	overflow: hidden; transition: transform .3s var(--svcp-ease), border-color .3s;
}
body.svcp27 .post-s1:hover { transform: translateY(-4px); border-color: var(--svcp-accent); }
body.svcp27 .post-s1-thumb img { width: 100%; display: block; }
body.svcp27 .post-s1-main { padding: 22px 24px 6px; }
body.svcp27 .post-s1-meta-bottom { padding: 0 24px 20px; display: flex; gap: 16px; }
body.svcp27 .post-s1-title { margin: 0 0 12px; }
body.svcp27 .post-s1-title, body.svcp27 .post-s1-title a { font-family: var(--svcp-display); color: #fff; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
body.svcp27 .post-s1-title a:hover { color: var(--svcp-accent-2); }
body.svcp27 .post-s1-excerpt { color: var(--svcp-muted); }
body.svcp27 .post-meta-date, body.svcp27 .post-meta-comments,
body.svcp27 .post-meta-comments a { font-family: var(--svcp-mono); font-size: 12px; color: var(--svcp-accent-2); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
body.svcp27 .post-s1-read-more a { color: var(--svcp-accent); font-weight: 600; text-decoration: none; }
body.svcp27 .post-s1-read-more a:hover { color: var(--svcp-accent-2); }

/* single post - long-form editorial */
body.svcp27 .blog-post-single-title { font-family: var(--svcp-display); font-size: clamp(30px,4.6vw,54px); color: #fff; font-weight: 800; letter-spacing: -.025em; line-height: 1.06; margin: 0 0 18px; text-wrap: balance; }
body.svcp27 .blog-post-single-meta { font-family: var(--svcp-mono); font-size: 13px; color: var(--svcp-muted); letter-spacing: .06em; margin-bottom: 30px; }
body.svcp27 .blog-post-single-content { font-size: 18px; line-height: 1.8; color: #d7deeb; max-width: 72ch; }
body.svcp27 .blog-post-single-content p { margin: 0 0 1.45em; }
body.svcp27 .blog-post-single-content h2, body.svcp27 .blog-post-single-content h3, body.svcp27 .blog-post-single-content h4 { font-family: var(--svcp-display); color: #fff; letter-spacing: -.01em; margin: 1.6em 0 .5em; }
body.svcp27 .blog-post-single-content a { color: var(--svcp-accent-2); }
body.svcp27 .blog-post-single-content blockquote { border-left: 3px solid var(--svcp-accent); padding-left: 22px; margin: 1.6em 0; color: #fff; font-style: italic; }
body.svcp27 .blog-post-single-tags a { display: inline-block; font-family: var(--svcp-mono); font-size: 12px; color: var(--svcp-muted); border: 1px solid var(--svcp-line-2); border-radius: 999px; padding: 5px 12px; margin: 4px 6px 0 0; text-decoration: none; }
body.svcp27 .blog-post-single-tags a:hover { border-color: var(--svcp-accent); color: #fff; }
body.svcp27 .share-box {
	background: var(--svcp-ink-2) !important; border: 1px solid var(--svcp-line); border-radius: var(--svcp-radius);
	margin-top: 44px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
body.svcp27 .share-box-title { font-family: var(--svcp-display); color: #fff; margin: 0; font-size: 16px; }
body.svcp27 .share-box-secondary a { color: var(--svcp-muted); margin-left: 6px; font-size: 16px; }
body.svcp27 .share-box-secondary a:hover { color: var(--svcp-accent); }

/* 404 / page-single */
body.svcp27 .page-single-main { color: var(--svcp-muted); }
body.svcp27 .page-single .page-title { font-family: var(--svcp-display); color: #fff; font-weight: 800; letter-spacing: -.02em; }

/* =====================================================================
   CONTACT polish + map empty state
   ===================================================================== */
body.svcp27 .contact-secondary h4 { color: #fff; font-family: var(--svcp-display); font-weight: 700; font-size: 20px; margin-bottom: 10px; }
body.svcp27 .contact-subtitle { color: var(--svcp-muted); font-weight: 400; }
body.svcp27 .map, body.svcp27 .section.map, body.svcp27 [id^="map"], body.svcp27 .acf-map { background: var(--svcp-ink-2) !important; }

/* =====================================================================
   FOOTER polish
   ===================================================================== */
body.svcp27 .footer-copyright { color: var(--svcp-faint); font-size: 13px; }
body.svcp27 .footer-copyright a { color: var(--svcp-muted); }
body.svcp27 .footer-copyright a:hover { color: #fff; }
body.svcp27 #footer .btn { margin: 4px 0; }

/* =====================================================================
   A11y - visible focus + skip link
   ===================================================================== */
body.svcp27 a:focus-visible, body.svcp27 button:focus-visible,
body.svcp27 input:focus-visible, body.svcp27 select:focus-visible,
body.svcp27 textarea:focus-visible, body.svcp27 [tabindex]:focus-visible {
	outline: 2px solid var(--svcp-accent); outline-offset: 3px; border-radius: 4px;
}
.svcp-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--svcp-accent); color: #1f3157; padding: 12px 20px; font-weight: 700; border-radius: 0 0 8px 0; }
.svcp-skip-link:focus { left: 0; }

/* =====================================================================
   reveal-on-scroll
   ===================================================================== */
.svcp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--svcp-ease), transform .7s var(--svcp-ease); }
.svcp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.svcp-reveal { opacity: 1 !important; transform: none !important; }
	.svcp-scrollcue .svcp-arrow,
	.svcp-hero-fx::before, .svcp-hero-fx::after { animation: none !important; }
}

/* =====================================================================
   responsive
   ===================================================================== */
@media (max-width: 860px) {
	.svcp-thesis .svcp-grid { grid-template-columns: 1fr; }
	.svcp-thesis .svcp-thesis-statement { margin: 0; max-width: none; }
	.svcp-cta-inner { flex-direction: column; align-items: flex-start; }
}
/* Phone and tablet menu. The base theme hides #navigation below 1024px, so the burger and panel
   must cover everything up to 1023px (they used to stop at 860px, leaving 861-1023px with no menu). */
@media (max-width: 1023px) {
	body.svcp27 #navigation { display: none; }
	body.svcp27.svcp-menu-open #navigation {
		display: block; position: fixed; inset: 64px 0 0; background: rgba(8,11,18,.98);
		backdrop-filter: blur(14px); padding: 24px var(--svcp-gutter); z-index: 99;
	}
	body.svcp27.svcp-menu-open #navigation ul { flex-direction: column; align-items: stretch; gap: 4px; }
	body.svcp27.svcp-menu-open #navigation a { padding: 16px; font-size: 18px; }

	/* Open menu panel. The header's backdrop-filter makes it the containing block for position:fixed,
	   which shrank the panel to the header box and let the links spill over the page on a
	   transparent background. Drop the filter while open, start the panel below the header
	   (svcp27.js sets --svcp-nav-top), and make it solid brand navy. */
	body.svcp27.svcp-menu-open { overflow: hidden; }
	body.svcp27.svcp-menu-open #header.site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	body.svcp27.svcp-menu-open #navigation {
		top: var(--svcp-nav-top, 100px) !important; background: #1f3157 !important;
		-webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto;
	}
	body.svcp27.svcp-menu-open #navigation .menu > li { width: 100%; }
	body.svcp27.svcp-menu-open #navigation .menu > li.svcp-nav-cta { margin: 12px 0 0 !important; }
	body.svcp27.svcp-menu-open #navigation .menu > li.svcp-nav-cta > a { display: block; text-align: center; margin-left: 0 !important; }
	/* keep the logo (which overhangs the header box by a few px) above the panel */
	body.svcp27.svcp-menu-open #header #logo { position: relative; z-index: 102; }

	/* Centre the logo and burger in the bar. style.css pads the header 30px top and bottom on
	   phones while the inner row is locked to the full 98px, so the row started 30px low. */
	body.svcp27 #header.site-header { padding-top: 0 !important; padding-bottom: 0 !important; }

	/* Larger burger: wider bars, 3px thick, and a 48px-plus tap target */
	body.svcp27 .svcp-burger { padding: 14px 12px; gap: 6px; }
	body.svcp27 .svcp-burger span { width: 30px; height: 3px; border-radius: 2px; }
	body.svcp27.svcp-menu-open .svcp-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
	body.svcp27.svcp-menu-open .svcp-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

	/* Submenus in the open panel: a chevron button beside the parent link (added by svcp27.js)
	   opens the list in place. The desktop hover dropdown is hidden here. */
	body.svcp27.svcp-menu-open #navigation .menu > li.menu-item-has-children { display: flex; flex-wrap: wrap; align-items: stretch; }
	body.svcp27.svcp-menu-open #navigation .menu > li.menu-item-has-children > a { flex: 1 1 0; min-width: 0; }
	body.svcp27.svcp-menu-open #navigation .menu > li.menu-item-has-children > a .fa { display: none; }
	body.svcp27.svcp-menu-open #navigation .menu > li > a::after { display: none !important; content: none !important; }
	body.svcp27.svcp-menu-open #navigation .menu > li.current-menu-item > a,
	body.svcp27.svcp-menu-open #navigation .menu > li.current-menu-ancestor > a { color: #d9b02e !important; box-shadow: none; }
	body.svcp27 .svcp-sub-toggle {
		display: flex; flex: 0 0 56px; align-items: center; justify-content: center;
		background: none; border: 0; color: #d9b02e; cursor: pointer; padding: 0;
	}
	body.svcp27 .svcp-sub-toggle span {
		width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s;
	}
	body.svcp27 .menu-item-has-children.svcp-sub-open > .svcp-sub-toggle span { transform: rotate(-135deg) translate(-2px, -2px); }
	body.svcp27.svcp-menu-open #navigation .sub-menu {
		display: none !important; position: static !important; visibility: visible !important; opacity: 1 !important;
		flex: 0 0 100%; width: 100% !important; min-width: 0 !important; max-width: none !important;
		background: rgba(0,0,0,.2) !important; box-shadow: none !important; border-radius: 4px !important;
		margin: 0 0 8px !important; padding: 4px 0 !important; backdrop-filter: none !important;
	}
	body.svcp27.svcp-menu-open #navigation .menu-item-has-children.svcp-sub-open > .sub-menu { display: block !important; }
	body.svcp27.svcp-menu-open #navigation .sub-menu a {
		display: block !important; padding: 13px 16px 13px 28px !important; font-size: 16px !important;
		letter-spacing: .06em !important; color: rgba(255,255,255,.88) !important; background: none !important;
	}
	body.svcp27.svcp-menu-open #navigation .sub-menu .current-menu-item > a { color: #d9b02e !important; }
	body.svcp27.svcp-menu-open #navigation .sub-menu .current-menu-item > a::after,
	body.svcp27.svcp-menu-open #navigation .sub-menu .current_page_item > a::after { display: none !important; content: none !important; }
}
/* the submenu chevron is for the phone panel only */
@media (min-width: 1024px) { .svcp-sub-toggle { display: none !important; } }

/* Hide the legacy base-theme mobile hamburger (+ its unstyled dark dropdown
   panel) entirely. svcp27.js injects its own branded .svcp-burger below,
   which toggles #navigation directly - the two systems were rendering side by
   side on mobile (a boxed hamburger + a plain one). Keep only the custom one. */
body.svcp27 #mobile-navigation,
body.svcp27 .mobile-navigation-menu { display: none !important; }

/* mobile menu toggle button (injected by svcp27.js) */
.svcp-burger { display: none; }
@media (max-width: 1023px) {
	.svcp-burger {
		display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0;
		cursor: pointer; padding: 10px; z-index: 101; position: relative;
	}
	.svcp-burger span { width: 24px; height: 2px; background: #fff; transition: transform .3s var(--svcp-ease), opacity .2s; }
	body.svcp-menu-open .svcp-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.svcp-menu-open .svcp-burger span:nth-child(2) { opacity: 0; }
	body.svcp-menu-open .svcp-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* =====================================================================
   LIGHT / "CORPORATE TRUST" THEME  (override layer - redefines the palette
   light and flips the hardcoded dark surfaces; media/hero bands stay dark
   with white text). Toggle: this whole block.
   ===================================================================== */
:root {
	--svcp-ink:       #ffffff;   /* page base */
	--svcp-ink-1:     #f6f8fa;   /* section tint */
	--svcp-ink-2:     #eef1f6;
	--svcp-ink-3:     #ffffff;
	--svcp-line:      rgba(14,27,42,.10);
	--svcp-line-2:    rgba(14,27,42,.16);
	--svcp-text:      #0e1b2a;   /* ink navy - headlines/text */
	--svcp-muted:     #334155;   /* slate body */
	--svcp-faint:     #64748b;
	--svcp-accent:    #d9b02e;   /* SVCP mustard - THE brand yellow, used everywhere */
	--svcp-accent-2:  #1f3157;   /* dark navy - accents on LIGHT bg (never yellow on white) */
	--svcp-glow:      rgba(254,242,0,.22);
}

body.svcp27 { background: #fff; color: var(--svcp-text); }
body.svcp27.page-template-template-home { background: #fff; }
body.svcp27 ::selection { background: var(--svcp-accent); color: #fff; }
body.svcp27:not(.page-template-template-home) #main { background: #fff; }

/* headings that were hardcoded #fff -> dark on the light UI */
body.svcp27 .svcp-h2, body.svcp27 .section-title, body.svcp27 .tagline-title,
body.svcp27 .svcp-card h3, body.svcp27 .svcp-stat .n, body.svcp27 .svcp-cta h2,
body.svcp27 .cta-title, body.svcp27 .svcp-thesis-statement, body.svcp27 .info-box-title,
body.svcp27 .info-columns-item-title, body.svcp27 .team-item-title, body.svcp27 .post-s1-title,
body.svcp27 .post-s1-title a, body.svcp27 .blog-post-single-title, body.svcp27 .svcp-insight h3,
body.svcp27 .contact-title,
body.svcp27 .contact-secondary h4, body.svcp27 .share-box-title, body.svcp27 .page-heading .page-title,
body.svcp27 .page-single .page-title { color: var(--svcp-text) !important; }
body.svcp27 .svcp-thesis-statement b { color: var(--svcp-accent-2) !important; }
body.svcp27 .svcp-stat .n em { color: var(--svcp-accent) !important; }

/* NAV -> navy bar on EVERY page (home + subpages), white text + white logo.
   These high-specificity rules (incl. the :not(home) subpage selector) must stay
   navy or they white-out the bar on interior pages. */
body.svcp27 #header.site-header { background: #1f3157 !important; }
body.svcp27.svcp-scrolled #header.site-header,
body.svcp27:not(.page-template-template-home) #header.site-header { background: #1f3157 !important; }
body.svcp27 #header #logo img { filter: brightness(0) invert(1) !important; }
body.svcp27 #navigation a { color: var(--svcp-text); }
/* no filled pill on nav - clean text + a gold underline marks the active item */
body.svcp27 #navigation a:hover, body.svcp27 #navigation .current-menu-item > a { background: transparent; }
body.svcp27 #navigation .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--svcp-accent); }
body.svcp27 #navigation .menu > li.current-menu-item > a,
body.svcp27 #navigation .menu > li.current-menu-ancestor > a,
body.svcp27 #navigation .menu > li > a:hover { color: var(--svcp-accent-2) !important; }
body.svcp27 #navigation .sub-menu { background: rgba(217,225,240,.9) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 26px 60px -22px rgba(16,26,48,.28) !important; border-radius: 5px !important; }
body.svcp27 #navigation .sub-menu a { color: var(--svcp-muted) !important; }
body.svcp27 #navigation .sub-menu a:hover { color: var(--svcp-text) !important; background: rgba(193,150,44,.13) !important; }
body.svcp27 .svcp-burger span { background: var(--svcp-text); }
/* mobile burger -> mustard (wins over the stray light-theme override above,
   which was leaving it an inconsistent color depending on cascade order) */
body.svcp27 .svcp-burger span { background: #d9b02e !important; }

/* HERO -> full-strength city video with NO overlay, matching legacy prod brightness.
   White text stays legible via a soft text-shadow instead of darkening the video. */
body.svcp27 .svcp-hero-fx { background: #1f3157; }
body.svcp27 .slider::after { background: none; }
body.svcp27 .slider { border-bottom: 1px solid var(--svcp-line); }
body.svcp27 .slider-item-title { color: var(--svcp-accent) !important; text-shadow: 0 2px 26px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); }
body.svcp27 .slider-item-subtitle { text-shadow: 0 1px 14px rgba(0,0,0,.5); }
body.svcp27 .slider-item-logo img { filter: none !important; opacity: .95; }
/* Phones: the text covers most of the slide, so lay a darker tint over the animation and use a
   slightly heavier title. Gold on the bright concourse clip (Education slide) was unreadable. */
@media (max-width: 860px) {
	body.svcp27 .slider-item-bg-video::after { background: rgba(21,32,58,.74) !important; }
	body.svcp27 .slider .slider-item-title { font-weight: 300 !important; }
	body.svcp27 .slider .slider-item-subtitle { text-shadow: 0 1px 10px rgba(0,0,0,.65); }
}

/* cards / panels -> white with border + soft shadow */
body.svcp27 .svcp-card, body.svcp27 .team-item, body.svcp27 .post-s1, body.svcp27 .svcp-insight,
body.svcp27 .share-box { background: #fff !important; border: 1px solid var(--svcp-line) !important; box-shadow: 0 12px 34px -20px rgba(16,26,48,.20); }
body.svcp27 .svcp-card:hover, body.svcp27 .team-item:hover, body.svcp27 .post-s1:hover, body.svcp27 .svcp-insight:hover { background: #fff !important; border-color: var(--svcp-accent) !important; }
body.svcp27 .blog-post-single-tags a { border-color: var(--svcp-line-2) !important; }

/* bands / stats / quote / cta -> light */
body.svcp27 .svcp-band { background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%) !important; }
body.svcp27 .svcp-stats { background: #f5f7fa !important; }
body.svcp27 .svcp-quote { background: radial-gradient(90% 120% at 100% 0%, rgba(193,150,44,.10), transparent 60%), #ffffff !important; }
body.svcp27 .svcp-quote blockquote { color: var(--svcp-text) !important; }
body.svcp27 .section.cta, body.svcp27 .svcp-cta { background: linear-gradient(120deg, #faf4e3 0%, #f5f7fa 60%, #ffffff 100%) !important; border-block-color: var(--svcp-line) !important; }
body.svcp27 .svcp-cta::after { opacity: .35; }

/* legacy solid-color sections -> light */
body.svcp27 .section-bg-white, body.svcp27 .section-bg-light, body.svcp27 .section-bg-gray,
body.svcp27 .section-bg-grey, body.svcp27 .section-bg-dark, body.svcp27 .section-bg-black,
body.svcp27 .section-bg-primary, body.svcp27 .section-bg-accent { background-color: #fff !important; }
body.svcp27 .section:nth-of-type(even) { background-color: #f5f7fa !important; }

/* PAGE banner -> light */
body.svcp27 .page-heading { background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%) !important; border-bottom: 1px solid var(--svcp-line); }
body.svcp27 .page-heading::after { background: radial-gradient(70% 120% at 50% -10%, rgba(193,150,44,.14), transparent 62%); }

/* FOOTER -> deep-navy anchor under the light site (intentional contrast block).
   NB: the real markup uses IDs (#footer-widgets / #footer-bottom), not classes -
   target those so every band is the same navy and the footer reads seamless. */
body.svcp27 #footer, body.svcp27 #footer.site-footer,
body.svcp27 #footer-brand, body.svcp27 #footer-widgets, body.svcp27 #footer-bottom { background-color: #1f3157 !important; color: rgba(255,255,255,.72); }
body.svcp27 #footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }
body.svcp27 #footer .widget-title, body.svcp27 #footer h4 { color: #fff !important; }
body.svcp27 #footer p, body.svcp27 #footer li, body.svcp27 #footer span,
body.svcp27 #footer .footer-copyright, body.svcp27 #footer .textwidget { color: rgba(255,255,255,.68) !important; }
body.svcp27 #footer a { color: var(--svcp-accent) !important; }
body.svcp27 #footer a:hover { color: #fff !important; }
/* footer login buttons: keep the gold pill/rect readable on navy */
body.svcp27 #footer .btn, body.svcp27 #footer .button { color: #1f3157 !important; }

/* ghost button on light */
body.svcp27 .svcp-btn--ghost { color: var(--svcp-text) !important; border-color: var(--svcp-line-2); }
body.svcp27 .svcp-btn--ghost:hover { color: var(--svcp-text) !important; background: rgba(193,150,44,.10); border-color: var(--svcp-accent); }

/* forms: light inputs (vars already flip); keep placeholder readable */
body.svcp27 .wpcf7 input::placeholder, body.svcp27 .wpcf7 textarea::placeholder { color: var(--svcp-faint); }

/* MEDIA/IMAGE/VIDEO sections keep white text (a dark video/image + overlay sits
   behind them even though the light theme flips the section's own bg to white).
   Match any section that actually contains a media/overlay layer, and force ALL
   its text white - headings (incl. .info-box-title), body, list items. */
body.svcp27 .section:has(.section-bg-video) :is(.section-title, .tagline-title, .info-box-title, .info-columns-item-title, .cta-title, .contact-title, .team-item-title, p, li, .info-columns-item-content, .info-box-content),
body.svcp27 .section:has(.section-video) :is(.section-title, .tagline-title, .info-box-title, .info-columns-item-title, .cta-title, .contact-title, .team-item-title, p, li, .info-columns-item-content, .info-box-content),
body.svcp27 .section:has([class*="section-bg-overlay"]) :is(.section-title, .tagline-title, .info-box-title, .info-columns-item-title, .cta-title, .contact-title, .team-item-title, p, li, .info-columns-item-content, .info-box-content),
body.svcp27 .section[style*="background-image"] :is(.section-title, .tagline-title, .info-box-title, .info-columns-item-title, .cta-title, .contact-title, .team-item-title, p, li, .info-columns-item-content, .info-box-content) { color: #fff !important; }
/* since the overlay no longer darkens the video, give the white text a shadow so
   it stays legible on the full-brightness footage */
body.svcp27 .section:has(.section-bg-video) :is(.section-title, .tagline-title, .info-box-title, .info-columns-item-title, .cta-title, .contact-title, p, li, .info-columns-item-content, .info-box-content),
body.svcp27 .section:has([class*="section-bg-overlay"]) :is(.section-title, .tagline-title, .info-box-title, .info-columns-item-title, .cta-title, .contact-title, p, li, .info-columns-item-content, .info-box-content) { text-shadow: 0 2px 16px rgba(0,0,0,.72), 0 1px 3px rgba(0,0,0,.55); }

/* =====================================================================
   TYPE MATCHED TO LEGACY PROD (www.svcp.com):
   headings = Roboto LIGHT (300) with normal tracking; the hero + page-banner
   titles = Roboto THIN (100), big and airy exactly like svcp.com's 82px hero.
   Body = PT Sans. (Accent stays gold, not the legacy yellow, per direction.)
   ===================================================================== */
body.svcp27 :is(
	.svcp-h2, .svcp-thesis-statement, .svcp-cta h2, .cta-title, .svcp-stat .n,
	.svcp-card h3, .svcp-insight h3, .section-title, .tagline-title, .info-box-title,
	.info-columns-item-title, .team-item-title, .post-s1-title, .post-s1-title a,
	.blog-post-single-title, .page-single .page-title, .share-box-title,
	.contact-secondary h4, .svcp-quote blockquote
) { font-weight: 300 !important; letter-spacing: normal !important; }
/* hero + page banner titles = Roboto Thin, matching the legacy 82px/weight-100 hero */
body.svcp27 :is(.slider-item-title, .page-heading .page-title) { font-weight: 100 !important; letter-spacing: normal !important; }
/* small labels stay in the mono/sans system, never the display face */
body.svcp27 :is(.svcp-eyebrow, .svcp-card-num, .svcp-insight .k, .svcp-quote .cite, .blog-post-single-meta) { font-family: var(--svcp-mono); }
body.svcp27 :is(.btn, .svcp-btn, .wpcf7-submit, input[type="submit"], button[type="submit"], #navigation .svcp-nav-cta > a),
body.svcp27 #navigation .menu > li.svcp-nav-cta > a { font-family: Roboto, Arial, Helvetica, sans-serif !important; }

/* =====================================================================
   FOOTER BRAND BAND  (svcp27) - identity + tagline + contact + quick links,
   sits atop the client-editable widget columns on the deep-navy footer.
   ===================================================================== */
body.svcp27 #footer-brand {
	background: #1f3157;
	color: rgba(255,255,255,.72);
	padding: clamp(28px,3vw,40px) 0 clamp(24px,2.6vw,32px);
	border-top: 1px solid rgba(255,255,255,.12);   /* HR between the widgets band and the brand band */
}
body.svcp27 #footer-brand .wrapper { max-width: var(--svcp-maxw); margin: 0 auto; padding-inline: var(--svcp-gutter); }
body.svcp27 .svcp-fbrand-grid {
	display: grid; grid-template-columns: 2fr 1fr 1fr;
	gap: clamp(30px,4vw,60px); align-items: start;
}
body.svcp27 .svcp-fbrand-logo { height: 43px; width: auto; max-width: 100%; margin: 0 0 16px; display: block; opacity: .96; filter: brightness(0) invert(1); }
body.svcp27 .svcp-fbrand-tag {
	font-family: var(--svcp-display); font-weight: 400;
	font-size: clamp(14px,1.1vw,16px); line-height: 1.5; letter-spacing: 0;
	color: rgba(255,255,255,.85); max-width: 38ch; margin: 0;
}
body.svcp27 .svcp-fbrand-h {
	font-family: var(--svcp-mono); font-size: 12px; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase; color: var(--svcp-accent);
	margin: 0 0 12px;
}
body.svcp27 .svcp-fbrand-address { font-style: normal; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
body.svcp27 .svcp-fbrand-links { list-style: none; margin: 0; padding: 0; }
body.svcp27 .svcp-fbrand-links li { margin: 0; line-height: 1.7; }
body.svcp27 #footer-brand a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 14.5px; transition: color .2s var(--svcp-ease); }
body.svcp27 #footer-brand a:hover { color: var(--svcp-accent); }
/* seam between the brand band and the widget columns */
body.svcp27 #footer-widgets { border-top: none; }
/* HR above the footer to mark the bottom of the page */
body.svcp27 #footer.site-footer { border-top: 2px solid rgba(255,255,255,.14) !important; }
/* single blog-post page date -> navy (was mustard/yellow) */
body.svcp27.single .post-meta-date,
body.svcp27.single .blog-post-single-meta { color: #1f3157 !important; }
/* Investment-Updates list: drop the divider after the LAST item */
body.svcp27 #footer-widgets ul li:last-child { border-bottom: 0 !important; }
/* legal bar: give it room to breathe (was cramped) */
body.svcp27 #footer-bottom { padding: 26px 24px 28px !important; text-align: center; }
body.svcp27 #footer-bottom .footer-copyright,
body.svcp27 #footer-bottom p { font-size: 12.5px !important; line-height: 2.1 !important; letter-spacing: .01em; margin: 0; }
body.svcp27 #footer-bottom .footer-copyright a { white-space: nowrap; }
@media (max-width: 860px) {
	body.svcp27 .svcp-fbrand-grid { grid-template-columns: 1fr 1fr; }
	body.svcp27 .svcp-fbrand-lead { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	body.svcp27 .svcp-fbrand-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   POLISH FIXES
   ===================================================================== */
/* kill the vestigial legacy blue CSS-triangle arrow under CTA sections */
body.svcp27 .cta::after { display: none !important; }
/* CTA band -> compact contact strip, not a giant empty block */
body.svcp27 .section.cta { padding-top: 56px !important; padding-bottom: 56px !important; }
body.svcp27 .section.cta .cta-secondary:first-child:last-child { margin: 0 auto; }

/* remap leftover legacy cyan (#00aeef) to the navy/gold system ----------- */
/* the "content-columns" component (e.g. "Let Us Simplify Your Life") */
body.svcp27 .content-columns-item-title {
	color: var(--svcp-text) !important; font-family: var(--svcp-display) !important;
	font-weight: 300 !important; letter-spacing: normal !important; border-color: var(--svcp-line) !important;
}
body.svcp27 .content-columns-item-content { color: var(--svcp-muted) !important; }
/* blue check-circle list bullets -> gold */
body.svcp27 .fa-check { background-color: var(--svcp-accent) !important; color: #1f3157 !important; }
/* generic legacy cyan links inside content -> dark navy (but NOT buttons) */
body.svcp27 .content-columns a:not(.btn), body.svcp27 .info-box a:not(.btn), body.svcp27 .info-columns a:not(.btn) { color: var(--svcp-accent-2) !important; }
/* legacy blue icon-circles (fa-money, fa-line-chart, etc.) -> yellow with dark glyph */
body.svcp27 [class*="item-icons"] .fa, body.svcp27 .fa-check { background-color: var(--svcp-accent) !important; color: #1f3157 !important; }
/* diagram slideshow (content-columns-item-gallery) -> palette, no cyan */
body.svcp27 .content-columns-item-gallery-note { border-color: var(--svcp-line-2) !important; color: var(--svcp-text) !important; }
body.svcp27 .content-columns-item-gallery-note .fa, body.svcp27 .fa-arrow-circle-down { color: var(--svcp-accent-2) !important; border-color: transparent !important; }
body.svcp27 .content-columns-item-gallery.lightbox-gallery { border-color: var(--svcp-accent) !important; }
body.svcp27 .content-columns-item-gallery button { background-color: var(--svcp-accent) !important; }
/* nav active underline: amber reads on the white header (bright yellow would vanish) */
body.svcp27 #navigation .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--svcp-accent-2) !important; }
/* input focus ring -> yellow */
body.svcp27 .wpcf7 input:focus, body.svcp27 .wpcf7 textarea:focus, body.svcp27 .wpcf7 select:focus { box-shadow: 0 0 0 3px rgba(254,242,0,.28) !important; }

/* drop the pointless scroll cue */
body.svcp27 .svcp-scrollcue { display: none !important; }

/* square content photos (e.g. the contact building) - no cartoon corners */
body.svcp27 .site-content img { border-radius: 0 !important; }

/* OUTLINED buttons (legacy style) with a YELLOW outline instead of white --------- */
body.svcp27 .btn, body.svcp27 .svcp-btn {
	background: transparent !important; color: var(--svcp-accent) !important;
	border: 1px solid var(--svcp-accent) !important; box-shadow: none !important;
	font-size: 14px; padding: 13px 34px; transform: none !important;
}
body.svcp27 .btn:hover, body.svcp27 .svcp-btn:hover {
	background: var(--svcp-accent) !important; color: #1f3157 !important; border-color: var(--svcp-accent) !important;
}
/* hero CTA: larger, legacy proportions (18px / 13px 40px) */
body.svcp27 .slider-item-buttons .btn { font-size: 17px; padding: 14px 42px; letter-spacing: .02em; }
/* buttons on LIGHT bands stay FILLED (yellow text/outline would vanish on light) */
body.svcp27 .section.cta .btn { background: #1f3157 !important; color: var(--svcp-accent) !important; border-color: #1f3157 !important; }
body.svcp27 .section.cta .btn:hover { background: var(--svcp-accent) !important; color: #1f3157 !important; border-color: var(--svcp-accent) !important; }

/* hero SUBTITLE matched to legacy: Roboto Light 300, up to 36px, airy, white */
body.svcp27 .slider-item-subtitle {
	font-family: var(--svcp-display) !important; font-weight: 300 !important;
	font-size: clamp(20px, 2.9vw, 36px) !important; line-height: 1.2 !important;
	color: #fff !important; letter-spacing: normal !important; margin-top: 14px !important;
	text-shadow: 0 1px 14px rgba(0,0,0,.5);
}

/* ===== "never yellow on white" + polish (batch 3) ===================== */
/* check-list bullets on light sections -> dark circle + white check (no yellow) */
body.svcp27 .content-columns-item-icons .fa-check, body.svcp27 .fa-check { background-color: #1f3157 !important; color: #fff !important; }
/* Updates card "Read More" -> dark, not yellow */
body.svcp27 .post-s1-read-more a { color: #1f3157 !important; }

/* square every card + the submenu + its item highlights - no cartoon corners */
body.svcp27 .post-s1, body.svcp27 .svcp-card, body.svcp27 .svcp-insight, body.svcp27 .team-item, body.svcp27 .share-box { border-radius: 0 !important; }
body.svcp27 #navigation .sub-menu { border-radius: 5px !important; }
body.svcp27 #navigation .sub-menu a { border-radius: 0 !important; color: #1f3157 !important; }
/* current sub-item was white (invisible on the white dropdown) -> dark navy */
body.svcp27 #navigation .sub-menu .current-menu-item > a { color: var(--svcp-accent-2) !important; }

/* service cards: the grid (.info-columns-items) already makes 3 equal-height
   columns; make each card a flex column so its LEARN MORE button drops to the
   bottom and the buttons line up across the row regardless of text length. */
/* PER REQUEST: remove the redundant Risk/Education/Advice cards section from all
   service pages - those pages are already in the CLIENT SERVICES nav dropdown. */
body.svcp27 .section.info-columns { display: none !important; }

body.svcp27 .info-columns-item { display: flex !important; flex-direction: column !important; align-items: center !important; }
body.svcp27 .info-columns-item-buttons { margin-top: auto !important; display: flex !important; justify-content: center !important; padding-top: 14px; }
body.svcp27 .info-columns-items { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
/* the illustration: legacy used a negative right margin that shoved it right of
   center. Size it by height and center it on the card's center via transform
   (works regardless of the narrow content-width card box). */
body.svcp27 .info-columns-item-image { text-align: center !important; overflow: visible !important; }
body.svcp27 .info-columns-item-image img {
	height: 125px !important; width: auto !important; max-width: none !important;
	margin: 0 !important; display: block !important; float: none !important;
	position: relative !important; left: 50% !important; transform: translateX(-50%) !important;
}
body.svcp27 .content-columns-item-buttons { display: flex !important; justify-content: center !important; }
/* CTA buttons size to their text on one line (legacy fixed a small width -> wrap) */
body.svcp27 .btn, body.svcp27 .svcp-btn { white-space: nowrap !important; }
body.svcp27 .info-columns-item .btn, body.svcp27 .info-columns-item .btn.btn-s-m { width: auto !important; flex: 0 0 auto !important; }

/* search-form submit (legacy blue) -> filled yellow, dark text, square */
body.svcp27 input[type="submit"]:not(.wpcf7-submit) { background: #1f3157 !important; color: var(--svcp-accent) !important; border: 0 !important; border-radius: 0 !important; text-transform: uppercase; }
/* footer login buttons -> FILLED yellow (outlined-yellow text would be invisible here) */
body.svcp27 #footer .btn { background: var(--svcp-accent) !important; color: #1f3157 !important; border-color: var(--svcp-accent) !important; }
body.svcp27 #footer .btn:hover { background: #e7dc00 !important; color: #1f3157 !important; }

/* ===== tighter leading site-wide (less space between lines) ===== */
body.svcp27 :is(h1,h2,h3,h4,h5,h6,.section-title,.tagline-title,.content-columns-item-title,
	.info-box-title,.info-columns-item-title,.cta-title,.page-title,.svcp-h2,
	.blog-post-single-title,.post-s1-title,.svcp-card h3,.svcp-insight h3) { line-height: 1.05 !important; }
body.svcp27 :is(p,li,.info-box-content,.info-columns-item-content,.content-columns-item-content,
	.slider-item-subtitle,.svcp-fbrand-tag,.svcp-fbrand-address,.footer-copyright,
	.blog-post-single-content,.wpcf7 label) { line-height: 1.3 !important; }

/* OpenStreetMap embed sizing */
body.svcp27 .map { position: relative; line-height: 0; }
body.svcp27 .map .map-embed { width: 100%; height: 380px; border: 0; display: block; }
body.svcp27 .map .map-link { position: absolute; bottom: 12px; right: 12px; background: #1f3157; color: #fff; font-size: 12px; line-height: 1; padding: 7px 12px; text-decoration: none; }
body.svcp27 .map .map-link:hover { color: var(--svcp-accent); }

/* Contact page: building photo banner on top, small map box in the right-hand column (owner 2026-10-28) */
body.svcp27 .contact-banner { position: relative; line-height: 0; background: var(--svcp-ink-2); }
body.svcp27 .contact-banner img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: 50% 100%; }
body.svcp27 .contact-secondary .contact-map { position: relative; line-height: 0; margin: 0 0 20px; }
body.svcp27 .contact-secondary .contact-map-embed { display: block; width: 100%; height: 200px; border: 0; border-radius: 5px; }
body.svcp27 .contact-secondary .contact-map .map-link { position: absolute; bottom: 8px; right: 8px; background: #1f3157; color: #fff !important; font-size: 12px; line-height: 1; padding: 7px 10px; text-decoration: none; border-radius: 3px; }
body.svcp27 .contact-secondary .contact-map .map-link:hover { color: var(--svcp-accent) !important; }
/* Business name and address read as one block: name on one line, no gap before the address */
body.svcp27 .section.contact .contact-secondary h4 { white-space: nowrap; font-size: 18px; line-height: 1.3; margin: 0 !important; padding: 0; }
body.svcp27 .section.contact .contact-secondary h4 + .contact-content > p:first-child { margin-top: 0 !important; }
@media (max-width: 767px) {
	body.svcp27 .contact-banner img { height: 240px; }
	body.svcp27 .contact-secondary .contact-map-embed { height: 240px; }
}

/* tame oversized headings / spacing */
body.svcp27 .content-columns-item-title { font-size: clamp(23px, 2.7vw, 32px) !important; margin-bottom: 16px; line-height: 1.2; }

/* ===== content-columns band: balanced, less sparse (e.g. Client Services
   "Let Us Simplify Your Life" + investor feature list) ===== */
/* trim the heavy 111px legacy padding so the band isn't so empty */
body.svcp27 .section.content-columns { padding-top: clamp(48px, 6vw, 80px) !important; padding-bottom: clamp(48px, 6vw, 80px) !important; }
/* vertically center the short intro against the tall checklist + give the two
   columns real breathing room instead of butting against the center line */
body.svcp27 .content-columns-items { align-items: center !important; gap: clamp(32px, 5vw, 76px) !important; }
/* intro paragraph -> comfortable lead */
body.svcp27 .content-columns-item .content-columns-item-content { font-size: clamp(15px, 1.1vw, 17px) !important; line-height: 1.72 !important; }

/* Client Services "Let Us Simplify" - fill the empty intro column with the
   dashboard/charts illustration (same flat style as the Advice-page graphics)
   so the section isn't half-empty white. Scoped to this page only. */
body.svcp27.page-id-11327 .section.content-columns .content-columns-item.ta-right {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
}
body.svcp27.page-id-11327 .section.content-columns .content-columns-item.ta-right::before {
	content: ""; display: block; width: clamp(230px, 25vw, 340px); max-width: 100%;
	aspect-ratio: 400 / 340; margin: 0 0 22px;
	background: url(../images/zen-security.svg?v=3) no-repeat center; background-size: contain;
}
/* feature checklist -> even rows with hairline dividers + aligned check chips */
body.svcp27 .content-columns-item-icons { margin: 4px 0 0 !important; padding: 0 !important; list-style: none !important; }
body.svcp27 .content-columns-item-icons li {
	display: flex !important; align-items: flex-start; gap: 13px;
	margin: 0 !important; padding: 12px 2px !important; line-height: 1.5;
	font-size: clamp(15px, 1.1vw, 17px) !important; color: var(--svcp-muted); border: 0;
}
body.svcp27 .content-columns-item-icons li + li { border-top: 1px solid var(--svcp-line) !important; }
body.svcp27 .content-columns-item-icons .fa-check {
	position: static !important;   /* legacy absolutely-positions it -> overlaps text */
	flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
	display: inline-flex !important; align-items: center; justify-content: center;
	font-size: 11px; margin: 1px 0 0 !important; left: auto !important; top: auto !important;
}

/* legacy "reasons we're different" step numbers (1/2/3.gif) are recolored to
   brand navy at the source image (blue->navy, white->transparent); no filter. */
body.svcp27 .page-heading .page-title { font-size: clamp(30px, 3.6vw, 44px) !important; }
body.svcp27 .page-heading { padding-top: 72px !important; padding-bottom: 40px !important; }
body.svcp27 .info-box-title, body.svcp27 .section-title { font-size: clamp(24px, 3vw, 38px) !important; }

/* =====================================================================
   UPDATES / ARCHIVE + BLOG: hero-image banner + navy cards, white text
   ===================================================================== */
body.svcp27 .page-heading {
	position: relative; overflow: hidden;
	background: #101a30 !important;   /* fallback under the video */
	padding: 94px 0 76px !important;
	border-bottom: 0 !important;
}
/* B/W animated hero video behind the banner title */
body.svcp27 .page-heading-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(1) contrast(1.04); }
body.svcp27 .page-heading::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,26,48,.48) 0%, rgba(14,22,42,.72) 100%); }
body.svcp27 .page-heading::after { display: none !important; }
body.svcp27 .page-heading .wrapper { position: relative; z-index: 2; }
body.svcp27 .page-heading .page-title { color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,.5); }

/* single post: readable BLACK body text (was light-on-white) + smaller title */
body.svcp27 .blog-post-single-title { font-size: clamp(24px, 3vw, 40px) !important; }
body.svcp27 .blog-post-single-content, body.svcp27 .blog-post-single-content p,
body.svcp27 .blog-post-single-content li, body.svcp27 .blog-post-single-meta,
body.svcp27 .blog-post-single .entry-content, body.svcp27 .blog-post-single .entry-content p,
body.svcp27 .blog-post-single strong, body.svcp27 .blog-post-single b { color: #17202e !important; }

/* footer client-login buttons -> mustard yellow */
body.svcp27 #footer .btn { background: #d9b02e !important; color: #1f3157 !important; border-color: #d9b02e !important; }
body.svcp27 #footer .btn:hover { background: #c79f22 !important; border-color: #c79f22 !important; color: #1f3157 !important; }

/* header: switch the black nav + logo to the brand navy */
body.svcp27 #navigation a { color: #1f3157 !important; }
body.svcp27 #navigation .menu > li > a:hover { color: #4a628f !important; }
body.svcp27 #header #logo img { filter: brightness(0) saturate(100%) invert(15%) sepia(42%) saturate(1100%) hue-rotate(188deg) brightness(0.92) contrast(0.92) !important; }

/* Updates: masonry mosaic grid (CSS columns). Neutralize the legacy JS masonry
   that absolutely-positions the cards (!important beats its inline styles). */
body.svcp27 .blog-posts-listing-inner { column-count: 3; column-gap: clamp(20px, 2.4vw, 34px); height: auto !important; position: static !important; }
body.svcp27 .blog-posts-listing-inner .post-s1 {
	break-inside: avoid; -webkit-column-break-inside: avoid;
	position: static !important; top: auto !important; left: auto !important; right: auto !important;
	float: none !important; width: auto !important; display: block; height: auto !important;
	margin: 0 0 clamp(20px, 2.4vw, 34px) !important;
}
@media (max-width: 900px) { body.svcp27 .blog-posts-listing-inner { column-count: 2; } }
@media (max-width: 600px) { body.svcp27 .blog-posts-listing-inner { column-count: 1; } }
/* "Load more" link under the Updates tiles (no auto-load on scroll) */
body.svcp27 .svcp-load-more-wrap { text-align: center; margin-top: 40px; padding: 10px 0 40px; position: relative; z-index: 2; }
body.svcp27 .svcp-load-more { color: var(--svcp-accent) !important; font-family: var(--svcp-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
body.svcp27 .svcp-load-more::after { content: '\203A'; margin-left: 8px; font-size: 14px; }
body.svcp27 .svcp-load-more:hover, body.svcp27 .svcp-load-more:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@keyframes svcp-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.7); } 40% { opacity: 1; transform: scale(1); } }

/* active page indicator: a small caret pointing up under the first letter,
   instead of the full underline */
body.svcp27 #navigation .menu > li.current-menu-item > a,
body.svcp27 #navigation .menu > li.current-menu-ancestor > a { box-shadow: none !important; position: relative; }
body.svcp27 #navigation .menu > li.current-menu-item > a::after,
body.svcp27 #navigation .menu > li.current-menu-ancestor > a::after {
	content: ""; position: absolute; bottom: 5px; left: 13px;
	width: 6px; height: 6px;
	border-top: 2px solid #1f3157; border-left: 2px solid #1f3157;
	transform: rotate(45deg);
}

/* 'Simplify' / tagline banner headings -> big, matching legacy prod (70px) */
body.svcp27 .tagline-title { font-size: clamp(38px, 6vw, 70px) !important; }

/* CTA band -> navy bg, white text, YELLOW button, 5px yellow rule below it */
body.svcp27 .section.cta { background: #1f3157 !important; border-top: 0 !important; border-bottom: 5px solid var(--svcp-accent) !important; }
body.svcp27 .section.cta .cta-title, body.svcp27 .section.cta .cta-primary,
body.svcp27 .section.cta p, body.svcp27 .section.cta b, body.svcp27 .section.cta strong { color: #fff !important; }
body.svcp27 .section.cta .btn { background: var(--svcp-accent) !important; color: #1f3157 !important; border-color: var(--svcp-accent) !important; }
body.svcp27 .section.cta .btn:hover { background: #fff !important; color: #1f3157 !important; border-color: #fff !important; }

/* ===== NAVY top nav bar with white text + white logo ===== */
body.svcp27 #header.site-header, body.svcp27.header-sticky #header.site-header { background: #1f3157 !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; }
body.svcp27 #navigation a { color: #fff !important; }
body.svcp27 #navigation .menu > li > a:hover { color: rgba(255,255,255,.62) !important; }
body.svcp27 #navigation .menu > li.current-menu-item > a,
body.svcp27 #navigation .menu > li.current-menu-ancestor > a { color: #fff !important; }
/* nav wordmark -> WHITE (the mustard PNG is flattened to white: brightness(0)
   makes it black keeping its alpha, invert(1) makes it white). Reserve the
   mustard for buttons / CTAs / active indicators. */
body.svcp27 #header #logo img { filter: brightness(0) invert(1) !important; }
/* active-page caret -> yellow so it reads on the navy bar */
body.svcp27 #navigation .menu > li.current-menu-item > a::after,
body.svcp27 #navigation .menu > li.current-menu-ancestor > a::after { border-top-color: var(--svcp-accent) !important; border-left-color: var(--svcp-accent) !important; }
/* nav dropdown stays a light panel with dark text (unchanged) */
body.svcp27 #navigation .sub-menu a { color: var(--svcp-muted) !important; }

/* top-nav CONTACT -> yellow "Contact Us" CTA button */
body.svcp27 #navigation .menu > li.svcp-nav-cta > a {
	background: var(--svcp-accent) !important; color: #1f3157 !important;
	border-radius: 0; padding: 11px 20px !important; font-weight: 700 !important;
	margin-left: 75px; line-height: 1; transition: background .2s var(--svcp-ease), color .2s;
}
body.svcp27 #navigation .menu > li.svcp-nav-cta > a:hover { background: #fff !important; color: #1f3157 !important; }
/* no active-page caret on the CTA button */
body.svcp27 #navigation .menu > li.svcp-nav-cta > a::after,
body.svcp27 #navigation .menu > li.svcp-nav-cta.current-menu-item > a::after,
body.svcp27 #navigation .menu > li.svcp-nav-cta.current-menu-ancestor > a::after { display: none !important; content: none !important; }

/* mid-page CTA band removed - the persistent nav "Contact Us" button replaces it */
body.svcp27 .section.cta { display: none !important; }

/* ===== INVERSE the blog/updates listing: navy page, soft-GREY cards, dark text
   (grey instead of white so the contrast against the navy isn't so stark) ===== */
body.svcp27 .blog-posts-listing { background: #1f3157 !important; position: relative; }
/* tiles and listing controls sit on the solid navy background */
body.svcp27 .blog-posts-listing-inner,
body.svcp27 .blog-posts-listing .pagination { position: relative !important; z-index: 2 !important; }
body.svcp27 .blog-posts-listing .post-s1 { position: relative !important; z-index: 2 !important; }
body.svcp27 .blog-posts-listing .post-s1 { background: #d9dee7 !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 18px 44px -22px rgba(6,12,26,.5) !important; }
body.svcp27 .blog-posts-listing .post-s1:hover { background: #e6eaf1 !important; border-color: var(--svcp-accent) !important; }
body.svcp27 .blog-posts-listing .post-s1-title, body.svcp27 .blog-posts-listing .post-s1-title a { color: #14213c !important; }
body.svcp27 .blog-posts-listing .post-s1-excerpt, body.svcp27 .blog-posts-listing .post-s1-excerpt p, body.svcp27 .blog-posts-listing .post-s1-main p { color: #4f5d78 !important; }
/* "nothing found" content (archive/category/tag/search with no posts) sits on
   the navy #main -> make its dark text legible (was dark-on-dark) */
body.svcp27.archive #content > p, body.svcp27.category #content > p, body.svcp27.tag #content > p,
body.svcp27.date #content > p, body.svcp27.author #content > p, body.svcp27.search #content > p,
body.svcp27.blog #content > p, body.svcp27.paged #content > p,
body.svcp27.search #content .page-single-title, body.svcp27.archive #content .page-single-title,
body.svcp27.search #content h2, body.svcp27.archive #content h2 { color: rgba(255,255,255,.85) !important; }
body.svcp27 .blog-posts-listing .post-meta-date, body.svcp27 .blog-posts-listing .post-s1-meta { color: #1f3157 !important; }
body.svcp27 .blog-posts-listing .post-s1-read-more a { color: #1f3157 !important; }
body.svcp27 .blog-posts-listing .post-s1-read-more a:hover { color: var(--svcp-accent-2) !important; }
body.svcp27 .blog-posts-listing .post-s1 hr, body.svcp27 .blog-posts-listing .post-s1-meta,
body.svcp27 .blog-posts-listing .post-s1-read-more, body.svcp27 .blog-posts-listing .post-s1-excerpt { border-color: rgba(16,26,48,.12) !important; }

/* ===== UPDATES tiles: high-end editorial treatment ===== */
body.svcp27 .blog-posts-listing .post-s1 {
	position: relative; background: #d9dee7 !important; border: 0 !important;
	border-radius: 5px; overflow: hidden;
	box-shadow: 0 14px 38px -24px rgba(6,12,26,.5) !important;
	transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s, background .38s !important;
}
body.svcp27 .blog-posts-listing .post-s1::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--svcp-accent); transform: scaleX(0); transform-origin: left;
	transition: transform .45s cubic-bezier(.2,.7,.2,1); z-index: 3;
}
body.svcp27 .blog-posts-listing .post-s1:hover { transform: translateY(-6px); background: #e7ebf2 !important; box-shadow: 0 30px 66px -28px rgba(6,12,26,.72) !important; }
body.svcp27 .blog-posts-listing .post-s1:hover::before { transform: scaleX(1); }
body.svcp27 .blog-posts-listing .post-s1-main { padding: 30px !important; }
/* legacy masonry helper divs would sit at the top of the first column and push
   it down - hide them so every column (incl. the left one) is top-aligned */
body.svcp27 .blog-posts-listing-inner .grid-sizer,
body.svcp27 .blog-posts-listing-inner .gutter-sizer { display: none !important; }
/* category eyebrow (darker mustard for contrast on the grey tile) */
body.svcp27 .blog-posts-listing .post-s1-cat {
	display: block; font-family: var(--svcp-mono); font-size: 13px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: #1f3157; margin: 0 0 12px;
	line-height: 1 !important;   /* block + tight line-height so it sits at the 20px padding edge, not in a tall line-box */
}
/* title: smaller + tighter editorial */
body.svcp27 .blog-posts-listing .post-s1-title, body.svcp27 .blog-posts-listing .post-s1-title a {
	font-size: clamp(15px, 1.2vw, 19px) !important; line-height: 1.25 !important;
	color: #1a1a1a !important; letter-spacing: -.015em !important; font-weight: 700 !important;
}
body.svcp27 .blog-posts-listing .post-s1-title { margin: 0 0 16px !important; }
body.svcp27 .blog-posts-listing .post-s1-title a:hover { color: #1f3157 !important; }
/* meta date with a mustard tick */
body.svcp27 .blog-posts-listing .post-s1-meta { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.svcp27 .blog-posts-listing .post-meta-date {
	font-family: var(--svcp-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: #1a1a1a !important; display: inline-flex; align-items: center; gap: 10px;
}
/* read-more row, divided from the meta, arrow slides on hover */
body.svcp27 .blog-posts-listing .post-s1-read-more { margin: 22px 0 0 !important; padding: 18px 0 0 !important; border-top: 1px solid rgba(16,26,48,.13) !important; }
body.svcp27 .blog-posts-listing .post-s1-read-more a {
	font-family: var(--svcp-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #1a1a1a !important; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
body.svcp27 .blog-posts-listing .post-s1-read-more a .fa { transition: transform .25s; }
body.svcp27 .blog-posts-listing .post-s1-read-more a:hover { color: #1f3157 !important; }
body.svcp27 .blog-posts-listing .post-s1-read-more a:hover .fa { transform: translateX(5px); }
/* featured image (when a post has one) sits flush at the top with a subtle zoom */
body.svcp27 .blog-posts-listing .post-s1-thumb { margin: 0; overflow: hidden; }
body.svcp27 .blog-posts-listing .post-s1-thumb img { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
body.svcp27 .blog-posts-listing .post-s1:hover .post-s1-thumb img { transform: scale(1.04); }

/* ===== NAVY block variant: navy card + 1px border (5px radius) + white title,
   yellow eyebrow / accents ===== */
body.svcp27 .blog-posts-listing .post-s1 {
	background: #1f3157 !important;
	border: 1px solid rgba(255,255,255,.16) !important;
	border-radius: 8px !important; overflow: hidden !important; cursor: pointer;
	padding: 0 !important;   /* zero the card's own padding; the inner .post-s1-main sets a clean 20px */
	box-shadow: 0 16px 40px -24px rgba(0,0,0,.55) !important;
}
body.svcp27 .blog-posts-listing .post-s1:hover { background: #253a61 !important; border-color: var(--svcp-accent) !important; }
body.svcp27 .blog-posts-listing .post-s1-cat { color: #d9b02e !important; }
body.svcp27 .blog-posts-listing .post-s1-title,
body.svcp27 .blog-posts-listing .post-s1-title a { color: #ffffff !important; font-weight: 300 !important; }
body.svcp27 .blog-posts-listing .post-s1-title a:hover { color: #d9b02e !important; }
body.svcp27 .blog-posts-listing .post-meta-date { color: rgba(255,255,255,.78) !important; }
body.svcp27 .blog-posts-listing .post-s1-read-more a { color: #d9b02e !important; }
body.svcp27 .blog-posts-listing .post-s1-read-more a:hover { color: #ffffff !important; }
body.svcp27 .blog-posts-listing .post-s1-read-more { border-top-color: rgba(255,255,255,.14) !important; }

/* Contact page content follows the solid navy inner-page design. */
body.svcp27.page-id-86 .section.contact { background: #1f3157 !important; }
body.svcp27.page-id-86 .section.contact :is(
	.contact-title, .contact-subtitle, .contact-content, .contact-content p,
	.contact-secondary, .contact-secondary h4, .contact-secondary a,
	.wpcf7 label
) { color: #ffffff !important; }
body.svcp27.page-id-86 .section.contact .contact-subtitle,
body.svcp27.page-id-86 .section.contact .contact-secondary .contact-content { color: rgba(255,255,255,.78) !important; }
body.svcp27.page-id-86 .section.contact .wpcf7 :is(input[type=text], input[type=email], input[type=tel], input[type=number], textarea, select) {
	background: #ffffff !important;
	color: #1f3157 !important;
	border-color: rgba(255,255,255,.65) !important;
}
body.svcp27.page-id-86 .section.contact .wpcf7-submit {
	background: #d9b02e !important;
	color: #1f3157 !important;
}
/* Form submit button: same height as the form fields (49px), width as before, 13px text (owner 2026-10-28). */
body.svcp27 .section.contact input.wpcf7-submit {
	box-sizing: border-box; width: 210px !important; height: 49px !important; min-height: 0 !important;
	padding: 0 12px !important; font-size: 13px !important; line-height: 1.2 !important;
}

/* Consistent softened corners for form controls and CTA-style buttons. */
body.svcp27 :is(
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="number"], input[type="search"], input[type="url"],
	input[type="password"], textarea, select
),
body.svcp27 :is(
	.btn, .svcp-btn, .wpcf7-submit, input[type="submit"],
	button[type="submit"], #navigation .svcp-nav-cta > a
) { border-radius: 5px !important; }
/* the empty excerpt + hr rendered a tight "double line" between the date and
   Read More - remove them; keep only the single read-more divider */
body.svcp27 .blog-posts-listing .post-s1-excerpt,
body.svcp27 .blog-posts-listing .post-s1 hr { display: none !important; }
body.svcp27 .blog-posts-listing .post-s1-meta { border: 0 !important; }
/* the legacy .post-s1-meta::after is a 6px box with top+bottom borders = the
   "double line" under the date. Kill it (and the ::before). */
body.svcp27 .blog-posts-listing .post-s1-meta::after,
body.svcp27 .blog-posts-listing .post-s1-meta::before { display: none !important; content: none !important; border: 0 !important; }
/* Updates / archive banner title -> mustard (was white) */
body.svcp27.archive .page-heading .page-title, body.svcp27.blog .page-heading .page-title,
body.svcp27.category .page-heading .page-title, body.svcp27.tag .page-heading .page-title,
body.svcp27.search .page-heading .page-title, body.svcp27.paged .page-heading .page-title,
body.svcp27.archive .page-heading .page-title a, body.svcp27.category .page-heading .page-title a { color: var(--svcp-accent) !important; }

/* LOCK the header to a constant height so it never resizes on scroll (+50px) */
body.svcp27 #header.site-header, body.svcp27.header-sticky #header.site-header { height: 98px !important; min-height: 98px !important; }
body.svcp27 #header .header-inner, body.svcp27.header-sticky #header .header-inner {
	height: 98px !important; padding-top: 0 !important; padding-bottom: 0 !important;
	display: flex !important; align-items: center !important;
}

/* navy post cards with white text */
body.svcp27 .post-s1 { background: #1f3157 !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 16px 40px -22px rgba(6,12,26,.75) !important; transition: border-color .2s, transform .2s; }
body.svcp27 .post-s1:hover { background: #1f3157 !important; border-color: var(--svcp-accent) !important; transform: translateY(-3px); }
/* reduce the big gap between the banner and the cards */
body.svcp27 .blog-posts-listing { padding-top: 34px !important; }
/* FULL-WIDTH navy: the listing sits in a centered 1100px wrapper, so make the
   whole content area (#main) navy on the Updates/archive/category listing pages.
   This closes the white sides + the white strip under the banner. Single posts
   are excluded (they keep white, readable article backgrounds). */
body.svcp27.blog #main, body.svcp27.archive #main, body.svcp27.category #main,
body.svcp27.tag #main, body.svcp27.date #main, body.svcp27.author #main,
body.svcp27.search #main, body.svcp27.paged #main { background: #1f3157 !important; }
body.svcp27 .post-s1-title, body.svcp27 .post-s1-title a { color: #fff !important; }
body.svcp27 .post-s1-excerpt, body.svcp27 .post-s1-excerpt p, body.svcp27 .post-s1-main p { color: rgba(255,255,255,.78) !important; }
body.svcp27 .post-meta-date, body.svcp27 .post-s1-meta { color: var(--svcp-accent) !important; }
body.svcp27 .post-s1-read-more a { color: var(--svcp-accent) !important; }
body.svcp27 .post-s1-read-more a:hover { color: #fff !important; }
/* the thin dividers inside the card -> subtle light lines on navy */
body.svcp27 .post-s1 hr, body.svcp27 .post-s1-meta, body.svcp27 .post-s1-read-more,
body.svcp27 .post-s1-excerpt { border-color: rgba(255,255,255,.16) !important; }

/* ===== Breadcrumb (rendered in the page-heading hero, above the title) ===== */
body.svcp27 .page-heading .svcp-breadcrumb { margin: 0 0 14px; }
body.svcp27 .page-heading .svcp-breadcrumb ol {
	list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center;
	font-family: var(--svcp-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
body.svcp27 .page-heading .svcp-breadcrumb li { display: inline-flex; align-items: center; color: rgba(255,255,255,.72); }
body.svcp27 .page-heading .svcp-breadcrumb li + li::before { content: "\203A"; margin: 0 10px; color: rgba(255,255,255,.45); }
body.svcp27 .page-heading .svcp-breadcrumb a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s var(--svcp-ease); }
body.svcp27 .page-heading .svcp-breadcrumb a:hover { color: var(--svcp-accent) !important; }
body.svcp27 .page-heading .svcp-breadcrumb li[aria-current="page"] { color: var(--svcp-accent); }

/* clickable category eyebrow on the tiles (keeps the eyebrow look, adds hover) */
body.svcp27 .blog-posts-listing a.post-s1-cat { text-decoration: none; transition: color .2s var(--svcp-ease); }
body.svcp27 .blog-posts-listing a.post-s1-cat:hover { color: #ffffff !important; }

/* single blog-post hero title -> mustard (caret-separated category trail) */
body.svcp27.single .page-heading .page-title,
body.svcp27.single .page-heading .page-title a { color: var(--svcp-accent) !important; }

/* ===== Footer background hero: city photo confined to the brand band (logo/
   tagline/contact/explore) only; widgets + legal bar keep their solid navy fill ===== */
body.svcp27 #footer-brand { position: relative; overflow: hidden; background-color: transparent !important; }
body.svcp27 #footer-brand::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		linear-gradient(rgba(31,49,87,.9), rgba(31,49,87,.9)),
		url(../images/footer-hero.jpg) center center / cover no-repeat;
}
body.svcp27 #footer-brand > * { position: relative; z-index: 1; }

/* ===== Page-heading hero: fixed-height box, title vertically centered,
   breadcrumb pinned to the bottom edge of the hero ===== */
body.svcp27 .page-heading {
	display: flex !important; min-height: clamp(240px, 24vw, 320px) !important;
	padding-top: 0 !important; padding-bottom: 0 !important;
}
body.svcp27 .page-heading .wrapper {
	width: 100%; display: flex !important; flex-direction: column !important; justify-content: center !important;
}
body.svcp27 .page-heading .svcp-breadcrumb {
	position: absolute; left: 0; right: 0; bottom: 20px; margin: 0 !important;
}

/* ===== 404 page ===== */
body.svcp27.error404 #main {
	background:
		radial-gradient(circle at 18% 22%, rgba(217,176,46,.12), transparent 28%),
		radial-gradient(circle at 84% 74%, rgba(111,154,214,.12), transparent 30%),
		#1f3157;
}
body.svcp27 .svcp-404-wrap {
	width: 100%; max-width: 100%; padding: clamp(52px,7vw,88px) 24px clamp(72px,9vw,118px);
	overflow: hidden; position: relative;
}
body.svcp27 .svcp-404 { max-width: 820px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
body.svcp27 .svcp-404-market { position: relative; height: clamp(150px,23vw,220px); margin: 0 auto 18px; }
body.svcp27 .svcp-404-code {
	position: absolute; inset: 50% 0 auto; transform: translateY(-53%); z-index: 0;
	font-family: var(--svcp-display); font-size: clamp(120px,22vw,220px); font-weight: 700;
	line-height: .8; letter-spacing: -.08em; color: rgba(255,255,255,.055); user-select: none;
}
body.svcp27 .svcp-404-market svg { width: 100%; height: 100%; position: relative; z-index: 1; overflow: visible; }
body.svcp27 .svcp-404-grid path { fill: none; stroke: rgba(255,255,255,.075); stroke-width: 1; }
body.svcp27 .svcp-404-chart-shadow { fill: none; stroke: rgba(0,0,0,.28); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
body.svcp27 .svcp-404-chart {
	fill: none; stroke: #d9b02e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 940; stroke-dashoffset: 940; animation: svcp-404-draw 1.7s .15s ease-out forwards;
}
body.svcp27 .svcp-404-points circle { fill: #1f3157; stroke: #fff; stroke-width: 3; opacity: 0; animation: svcp-404-point .45s 1.25s ease-out forwards; }
body.svcp27 .svcp-404-points circle:last-child { fill: #d9b02e; stroke: #d9b02e; animation: svcp-404-point .45s 1.6s ease-out forwards; }
@keyframes svcp-404-draw { to { stroke-dashoffset: 0; } }
@keyframes svcp-404-point { from { opacity: 0; transform: scale(.3); transform-origin: center; } to { opacity: 1; transform: scale(1); transform-origin: center; } }
body.svcp27 .svcp-404-eyebrow {
	font-family: var(--svcp-mono); font-size: 12px; font-weight: 700; letter-spacing: .22em;
	text-transform: uppercase; color: #d9b02e; margin: 0 0 14px;
}
body.svcp27 .svcp-404-title {
	color: #fff; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08;
	letter-spacing: -.025em; margin: 0 0 18px; font-weight: 300;
}
body.svcp27 .svcp-404-lead { color: rgba(255,255,255,.76); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.45; margin: 0 auto 30px; max-width: 590px; }
body.svcp27 .svcp-404-search { max-width: 460px; margin: 0 auto 34px; }
body.svcp27 .svcp-404-search form { display: flex; gap: 10px; }
body.svcp27 .svcp-404-search input[type="search"], body.svcp27 .svcp-404-search input.search-field {
	flex: 1; padding: 13px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 5px; font-size: 15px; color: #1f3157; background: #fff;
}
body.svcp27 .svcp-404-search input[type="search"]:focus { outline: none; border-color: var(--svcp-accent); }
body.svcp27 .svcp-404-search input[type="submit"], body.svcp27 .svcp-404-search button[type="submit"] {
	padding: 13px 22px !important; border: 0 !important; border-radius: 5px !important;
	background: var(--svcp-accent) !important; color: #1f3157 !important; height: 50px !important; min-height: 50px;
	font-family: var(--svcp-mono); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s;
}
body.svcp27 .svcp-404-search input[type="submit"]:hover, body.svcp27 .svcp-404-search button[type="submit"]:hover { background: #c49e28 !important; }
body.svcp27 .svcp-404-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
body.svcp27 .svcp-404-links a {
	display: inline-block; padding: 11px 22px; border: 1px solid rgba(255,255,255,.38); border-radius: 5px;
	color: #fff; text-decoration: none; font-family: var(--svcp-mono); font-size: 12px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; transition: border-color .2s, background .2s, color .2s;
}
body.svcp27 .svcp-404-links a:hover { border-color: #fff; background: #fff; color: #1f3157; }
body.svcp27 .svcp-404-links a.svcp-404-home { border-color: #d9b02e; background: #d9b02e; color: #1f3157; }
body.svcp27 .svcp-404-links a.svcp-404-home:hover { border-color: #c49e28; background: #c49e28; }
@media (max-width: 560px) {
	body.svcp27 .svcp-404-wrap { padding-inline: 18px; }
	body.svcp27 .svcp-404-search form { flex-direction: column; }
	body.svcp27 .svcp-404-search input[type="submit"], body.svcp27 .svcp-404-search button[type="submit"] { width: 100%; }
	body.svcp27 .svcp-404-links { display: grid; grid-template-columns: 1fr 1fr; }
	body.svcp27 .svcp-404-links a { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	body.svcp27 .svcp-404-chart { stroke-dashoffset: 0; animation: none; }
	body.svcp27 .svcp-404-points circle, body.svcp27 .svcp-404-points circle:last-child { opacity: 1; animation: none; }
}

/* The downward notch under the LAST section would sit on the footer's top border and cut a gap
   in the line (the notch is the same navy as the footer). Only sections that are followed by
   another section keep their notch. */
body.svcp27 #main > .section:not(:has(~ .section))::after { display: none !important; content: none !important; }

/* Branding statement panel in the home footer's third column (template-parts/footer/brand-statement.php):
   a framed panel (gold outline, thin inner keyline) over faint topographic contour lines. */
body.svcp27 #footer-widgets .svcp-brand-panel {
	position: relative; overflow: hidden; isolation: isolate;
	padding: 30px 32px 26px; border: 1px solid rgba(217,176,46,.65); border-radius: 5px;
	background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%);
	box-shadow: 0 22px 50px -26px rgba(6,12,26,.7);
}
body.svcp27 #footer-widgets .svcp-brand-panel::before {
	content: ""; position: absolute; inset: 7px; z-index: 0; pointer-events: none;
	border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
}
body.svcp27 #footer-widgets .svcp-brand-panel::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: url(../images/footer-contours.svg) right bottom / cover no-repeat; opacity: .95;
}
body.svcp27 #footer-widgets .svcp-brand-panel > * { position: relative; z-index: 1; }
body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-text {
	font-family: var(--svcp-display); font-weight: 400; font-size: clamp(22px, 6.8vw, 28px);
	line-height: 1.02; letter-spacing: -.015em; color: #ffffff !important; margin: 0 0 24px; text-wrap: balance;
}
body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-key { color: #d9b02e !important; }
body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-sub {
	font-size: 17px; line-height: 1.38; color: rgba(255,255,255,.86) !important; margin: 0 0 18px; max-width: 32ch; text-wrap: balance;
}
body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-link {
	display: inline-block; font-family: var(--svcp-mono); font-size: 12.5px; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: #d9b02e !important; text-decoration: none;
	padding-bottom: 4px; border-bottom: 1px solid rgba(217,176,46,.55); transition: color .2s, border-color .2s;
}
body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-link:hover,
body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-link:focus { color: #ffffff !important; border-bottom-color: #ffffff; }
@media (max-width: 860px) {
	body.svcp27 #footer-widgets .svcp-brand-panel { padding: 30px 24px 28px; }
}
/* narrow tablets: the footer columns are only about 232px wide, so set the headline a size smaller there */
@media (min-width: 701px) and (max-width: 1023px) {
	body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-text { font-size: 21px; }
	/* too narrow for the forced break, so the headline wraps by itself here */
	body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-br { display: none; }
}
/* desktop: the headline is two lines, "Portfolios customized" over "to fit your lifestyle." (top white, bottom gold),
   so the side padding is trimmed to give the longer top line room at a larger size */
@media (min-width: 1024px) {
	body.svcp27 #footer-widgets .svcp-brand-panel { padding-left: 21px; padding-right: 21px; }
	body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-text { font-size: 26px; letter-spacing: -.02em; }
}
/* "A portfolio customized" is one character longer than the old top line, so the laptop sizes drop a notch to keep it on one line */
@media (min-width: 1024px) and (max-width: 1424px) {
	body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-text { font-size: 24px; }
}
@media (min-width: 1425px) {
	body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-text { font-size: 30px; }
}
/* Supporting line two pixels bigger, as the owner asked, so the panel fills more of the column. */
body.svcp27 #footer-widgets .svcp-brand-statement .svcp-brand-statement-sub { font-size: 19px; }
/* Home footer, columns side by side: the branding panel and the disclaimer box are always the same height.
   The wrapper becomes a flex row so both columns stretch to the taller one; the panel pushes its link to the bottom. */
@media (min-width: 861px) {
	body.svcp27.home #footer-widgets .wrapper { display: flex; align-items: stretch; }
	body.svcp27.home #footer-widgets .wrapper::before,
	body.svcp27.home #footer-widgets .wrapper::after { display: none; }
	body.svcp27.home #footer-widgets .wrapper > .widget { flex-shrink: 0; }
	body.svcp27.home #footer-widgets .svcp-brand-statement,
	body.svcp27.home #footer-widgets .svcp-disclaimer { display: flex; }
	body.svcp27.home #footer-widgets .svcp-brand-statement .widget-main,
	body.svcp27.home #footer-widgets .svcp-disclaimer .widget-main { flex: 1 1 auto; }
	body.svcp27.home #footer-widgets .svcp-brand-statement .widget-main { display: flex; flex-direction: column; }
	body.svcp27.home #footer-widgets .svcp-brand-panel { flex: 1 1 auto; display: flex; flex-direction: column; box-sizing: border-box; }
	body.svcp27.home #footer-widgets .svcp-brand-statement .svcp-brand-statement-link { margin-top: auto; align-self: flex-start; }
	body.svcp27.home #footer-widgets .svcp-brand-statement .svcp-brand-statement-sub { margin-bottom: 22px; }
}