/* =====================================================================
   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.
   ===================================================================== */

/* self-hosted display face (headlines) - editorial authority serif (Newsreader) */
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/self/newsreader-var.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* self-hosted body/UI face - clean modern grotesk with tabular numerals (Inter) */
@font-face {
	font-family: 'InterVar';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/self/inter-var.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo kept as a fallback/utility face (still used by the font-preview page) */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(fonts/self/archivo-var.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--svcp-accent); opacity: .8; }
.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; }
	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; }
	.svcp-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* 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: 860px) {
	.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(255,255,255,.99) !important; box-shadow: 0 26px 60px -22px rgba(16,26,48,.22) !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; }

/* 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) { font-family: var(--svcp-sans); }

/* =====================================================================
   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, body.svcp27 #navigation .sub-menu a { border-radius: 0 !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); }

/* 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(/wp-content/themes/svcp27/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; } }
body.svcp27 .infinite-loading { text-align: center; margin-top: 50px; padding: 20px 0 40px; color: rgba(255,255,255,.6) !important; font-family: var(--svcp-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
body.svcp27 .infinite-dots { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
body.svcp27 .infinite-dots span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: svcp-dot 1.2s infinite ease-in-out both; }
body.svcp27 .infinite-dots span:nth-child(1) { animation-delay: -.32s; }
body.svcp27 .infinite-dots span:nth-child(2) { animation-delay: -.16s; }
@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 .infinite-loading,
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: 11px; 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;
}
body.svcp27 .blog-posts-listing .post-meta-date::before { content: ""; width: 18px; height: 2px; background: #1a1a1a; }
/* 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-meta-date::before { background: #d9b02e !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;
}

/* 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(/wp-content/themes/svcp27/images/footer-hero.jpg?v=3.3.17) 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; }
}