/* =============================================================================
   Salient Child — Modern Corporate
   A calm, editorial redesign layered on top of Salient. No heavy drop shadows,
   no "card-in-a-card" boxing — depth comes from typography, whitespace, and
   hairline cool-gray borders. Monochromatic palette built around pure white
   surfaces, slate-navy #2b445b as the brand color, and a neutral gray scale
   for supporting rhythm. Content is capped at 1440px across all containers.

   Table of contents
   -----------------
   1.  Design tokens (CSS custom properties)
   2.  Webfonts
   3.  Base typography + body reset
   4.  Links, selection, horizontal rule
   5.  Layout — #boxed, .container-wrap, sections (1440px cap)
   6.  Cards / columns — .col.boxed, .wpb_column.boxed, .sticky
   7.  Buttons — .nectar-button + native button / input[type=submit]
   8.  Forms — input, textarea, select, focus treatment
   9.  Header + primary navigation
   10. Page header / hero / page-title
   11. Blog, recent posts, pagination
   12. Nectar shortcodes — testimonials, feature boxes, fancy headings, tabs
   13. Footer + copyright
   14. Woo + utility polish (tables, blockquotes, images)
   15. Accessibility + motion preferences
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. Design tokens
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	/* Brand — Slate navy (primary). #2b445b anchors the palette. */
	--scl-navy-950: #08121c;
	--scl-navy-900: #132231;
	--scl-navy-800: #1d3043;
	--scl-navy-700: #2b445b;      /* PRIMARY — user spec */
	--scl-navy-600: #3d5770;
	--scl-navy-500: #536c85;
	--scl-navy-400: #7a91a7;
	--scl-navy-300: #a5b5c6;
	--scl-navy-200: #c4d0dd;
	--scl-navy-100: #e1e8ef;

	/* Neutral gray scale — cool, silver-leaning.
	   Used for borders, dividers, muted text, secondary surfaces. */
	--scl-gray-900: #1a2028;
	--scl-gray-800: #2a323c;
	--scl-gray-700: #454d59;
	--scl-gray-600: #5d6773;
	--scl-gray-500: #818a96;
	--scl-gray-400: #a8afb9;
	--scl-gray-300: #c9cfd6;
	--scl-gray-200: #e3e6ea;
	--scl-gray-100: #eef0f3;
	--scl-gray-50:  #f7f8fa;

	/* Pure neutrals */
	--scl-white:     #ffffff;
	--scl-off-white: #fafbfc;
	--scl-ink:       #111821;

	/* Typography colors */
	--scl-text:        var(--scl-gray-700);
	--scl-text-strong: var(--scl-ink);
	--scl-text-muted:  var(--scl-gray-600);
	--scl-text-subtle: var(--scl-gray-500);

	/* Semantic */
	--scl-bg:          var(--scl-white);
	--scl-bg-page:     var(--scl-white);
	--scl-surface:     var(--scl-white);
	--scl-surface-alt: var(--scl-gray-50);
	--scl-surface-deep:var(--scl-navy-700);
	--scl-border:        var(--scl-gray-200);
	--scl-border-strong: var(--scl-gray-300);
	--scl-border-ink:    rgba(43, 68, 91, 0.12);
	--scl-heading:    var(--scl-navy-700);
	--scl-link:       var(--scl-navy-700);
	--scl-link-hover: var(--scl-navy-900);
	--scl-accent:       var(--scl-navy-700);
	--scl-accent-hover: var(--scl-navy-800);
	--scl-rule:       var(--scl-gray-300);

	/* Fluid type scale */
	--scl-text-xs:   0.75rem;
	--scl-text-sm:   0.875rem;
	--scl-text-base: 1rem;
	--scl-text-lg:   1.0625rem;
	--scl-text-xl:   1.1875rem;
	--scl-text-2xl:  clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);
	--scl-text-3xl:  clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
	--scl-text-4xl:  clamp(2rem,     1.5rem + 2.4vw, 3rem);
	--scl-text-display: clamp(2.5rem, 1.7rem + 4vw, 4.25rem);

	/* Spacing (4px base) */
	--scl-space-1:  0.25rem;
	--scl-space-2:  0.5rem;
	--scl-space-3:  0.75rem;
	--scl-space-4:  1rem;
	--scl-space-5:  1.5rem;
	--scl-space-6:  2rem;
	--scl-space-7:  3rem;
	--scl-space-8:  4rem;
	--scl-space-9:  6rem;
	--scl-space-10: 8rem;

	/* Radii — intentionally small. Modern corporate lives on sharp geometry. */
	--scl-radius-none: 0px;
	--scl-radius-xs:   2px;
	--scl-radius-sm:   3px;
	--scl-radius-md:   6px;
	--scl-radius-lg:   10px;
	--scl-radius-pill: 9999px;

	/* Shadow scale — extremely restrained. Mostly hairlines, not drop shadows. */
	--scl-shadow-none: 0 0 0 rgba(0,0,0,0);
	--scl-shadow-xs:   0 1px 0  rgba(43, 68, 91, 0.04);
	--scl-shadow-sm:   0 1px 2px rgba(43, 68, 91, 0.05), 0 2px 8px rgba(43, 68, 91, 0.04);
	--scl-shadow-md:   0 2px 4px rgba(43, 68, 91, 0.06), 0 14px 32px rgba(43, 68, 91, 0.07);
	--scl-shadow-lift: 0 1px 0  rgba(43, 68, 91, 0.03), 0 24px 48px -24px rgba(43, 68, 91, 0.20);
	--scl-shadow-focus: 0 0 0 3px rgba(43, 68, 91, 0.24);

	/* Motion */
	--scl-ease:       cubic-bezier(0.22, 1, 0.36, 1);
	--scl-ease-fast:  cubic-bezier(0.4, 0, 0.2, 1);
	--scl-duration-short: 180ms;
	--scl-duration:       320ms;
	--scl-duration-long:  520ms;

	/* Typography stacks */
	--scl-font-sans: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--scl-font-serif: 'Cormorant Garamond', 'Libre Caslon Text', Garamond, Georgia, 'Times New Roman', serif;
	--scl-font-display: var(--scl-font-serif);
	--scl-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace;

	/* Layout scaffolding — 1440px content cap per user spec */
	--scl-container-max:    1440px;
	--scl-container-narrow: 1040px;
	--scl-gutter:  clamp(20px, 4vw, 64px);
	--scl-section-y: clamp(56px, 8vw, 128px);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. Webfonts — Cormorant Garamond for headings, Inter for body.
   ───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');


/* ─────────────────────────────────────────────────────────────────────────────
   3. Base typography + body
   ───────────────────────────────────────────────────────────────────────────── */
html {
	scroll-behavior: smooth;
	background-color: var(--scl-white);
}

body,
body.ascend,
body.material {
	font-family: var(--scl-font-sans) !important;
	font-weight: 400;
	font-size: 16.5px;
	line-height: 1.7;
	letter-spacing: 0;
	color: var(--scl-text) !important;
	background-color: var(--scl-white) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body p,
.container-wrap p {
	color: var(--scl-text);
	font-size: var(--scl-text-lg);
	line-height: 1.75;
	margin-bottom: var(--scl-space-5);
}

body p strong,
body strong,
body b {
	color: var(--scl-text-strong);
	font-weight: 600;
}

.container-wrap h1,
.container-wrap h2,
.container-wrap h3,
.container-wrap h4,
.container-wrap h5,
.container-wrap h6,
#page-header-bg h1,
#page-header-bg h2,
#page-header-bg .subheader,
.nectar-fancy-title,
body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--scl-font-display);
	color: var(--scl-heading);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin-bottom: var(--scl-space-5);
}

.container-wrap h1,
body h1 {
	font-size: var(--scl-text-display);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.05;
}

.container-wrap h2,
body h2 {
	font-size: var(--scl-text-4xl);
	letter-spacing: -0.02em;
}

.container-wrap h3,
body h3 {
	font-size: var(--scl-text-3xl);
}

.container-wrap h4,
body h4 {
	font-size: var(--scl-text-2xl);
}

.container-wrap h5,
body h5 {
	font-size: var(--scl-text-xl);
	font-family: var(--scl-font-sans);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--scl-text-strong);
}

.container-wrap h6,
body h6 {
	font-size: var(--scl-text-sm);
	font-family: var(--scl-font-sans);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scl-gray-600);
}

/* Drop-cap on first blog paragraph — small editorial flourish */
.single-post .post-area .post .entry-content > p:first-of-type::first-letter {
	font-family: var(--scl-font-serif);
	float: left;
	font-size: 4.25rem;
	line-height: 0.85;
	padding: 8px 14px 0 0;
	color: var(--scl-navy-700);
	font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. Links, selection, horizontal rule, lists
   ───────────────────────────────────────────────────────────────────────────── */
/* Generic link color, no underline animation here — the animation is scoped
   strictly to editorial content blocks below so it doesn't attach to
   wrappers, icons, nectar-love, pagination numbers, etc. */
body a {
	color: var(--scl-link);
	text-decoration: none;
	transition: color var(--scl-duration-short) var(--scl-ease);
}

body a:hover {
	color: var(--scl-link-hover);
}

/* Editorial underline animation — only inside PROSE content (post bodies,
   page content, widget text). Scoped tightly to prevent bleeding into UI
   links, buttons, icons, pagination, nectar-love, etc. */
.entry-content p a,
.entry-content li a,
.entry-content blockquote a,
.entry-content address a,
.single-post .post-area .post-content p a,
.single-post .post-area .post-content li a,
#sidebar .widget p a,
#sidebar .widget li a {
	background-image: linear-gradient(to right, var(--scl-navy-700), var(--scl-navy-700));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--scl-duration) var(--scl-ease),
	            color var(--scl-duration-short) var(--scl-ease);
}

.entry-content p a:hover,
.entry-content li a:hover,
.entry-content blockquote a:hover,
.entry-content address a:hover,
.single-post .post-area .post-content p a:hover,
.single-post .post-area .post-content li a:hover,
#sidebar .widget p a:hover,
#sidebar .widget li a:hover {
	background-size: 100% 1px;
}

::selection {
	background: var(--scl-navy-700);
	color: var(--scl-white);
}

hr,
.container-wrap hr {
	border: 0;
	height: 1px;
	background: var(--scl-border);
	margin: var(--scl-space-7) 0;
}

.container-wrap ul:not([class]),
.container-wrap ol:not([class]) {
	padding-left: 1.25em;
	margin-bottom: var(--scl-space-5);
}
.container-wrap ul:not([class]) { list-style: disc; }
.container-wrap ol:not([class]) { list-style: decimal; }
.container-wrap ul:not([class]) li,
.container-wrap ol:not([class]) li {
	margin-bottom: var(--scl-space-2);
	line-height: 1.7;
}
.container-wrap ul:not([class]) li::marker {
	color: var(--scl-navy-500);
}

blockquote,
.container-wrap blockquote {
	border-left: 3px solid var(--scl-navy-700);
	padding: var(--scl-space-3) 0 var(--scl-space-3) var(--scl-space-6);
	margin: var(--scl-space-7) 0;
	font-family: var(--scl-font-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	line-height: 1.5;
	color: var(--scl-navy-700);
	background: transparent;
}

blockquote cite {
	display: block;
	font-size: var(--scl-text-sm);
	font-style: normal;
	font-family: var(--scl-font-sans);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--scl-gray-600);
	margin-top: var(--scl-space-4);
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. Layout — white canvas, 1440px content cap.
      #boxed stays because Salient's JS references it, but loses its 1200px
      hard width + drop shadow. Content rows inside cap at --scl-container-max.
   ───────────────────────────────────────────────────────────────────────────── */
html,
body {
	background-color: var(--scl-white) !important;
}

#boxed {
	box-shadow: none !important;
	background-color: var(--scl-white) !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

#boxed #header-outer,
#boxed #header-secondary-outer,
#boxed #page-header-bg,
#boxed #featured,
#boxed .orbit > div,
#boxed #featured article {
	min-width: 0 !important;
}

/* .container-wrap — the page's main content surface. White, with a fluid
   section rhythm. */
.container-wrap,
.project-title {
	background-color: var(--scl-white) !important;
	margin-top: 0 !important;
	padding-top: var(--scl-section-y) !important;
	padding-bottom: var(--scl-section-y) !important;
	box-shadow: none !important;
}

body.page-template-template-home-1 .container-wrap,
body.page-template-template-home-2 .container-wrap,
body.page-template-template-home-3 .container-wrap,
body.page-template-template-home-4 .container-wrap,
body.home .container-wrap {
	padding-top: 0 !important;
}

/* ==========================================================================
   First-section sizing + grid alignment.

   Approach: row + its .row-bg-wrap bleed full viewport width (so the light
   gray / navy section colour keeps spanning edge-to-edge) while the
   content .col.span_12 inside gets capped to the 1440 grid with ZERO
   horizontal padding — so the intro text and portrait align exactly with
   every column below them on the page.
   ========================================================================== */

:is(#boxed, body) .wpb_row.first-section,
:is(#boxed, body) .wpb_row.first-section.standard_section {
	padding-top: clamp(32px, 4vw, 64px) !important;
	padding-bottom: clamp(24px, 3vw, 48px) !important;
	max-height: clamp(480px, 58vh, 620px) !important;
	min-height: 0 !important;
	overflow: hidden;
	/* Row itself stays full width (VC's default) so bg can bleed. */
}

/* Pin the inner content wrapper to the 1440 grid. This is the .col.span_12
   that directly contains the .vc_col-sm-8 text column + .vc_col-sm-4
   image column. Uses a RESPONSIVE horizontal gutter so the text doesn't
   touch the viewport edge on narrow laptops (1000-1440) or phones. */
:is(#boxed, body) .wpb_row.first-section > .col.span_12,
:is(#boxed, body) .wpb_row.first-section > .span_12 {
	max-width: var(--scl-container-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(20px, 3vw, 48px) !important;
	padding-right: clamp(20px, 3vw, 48px) !important;
	box-sizing: border-box;
	float: none !important;
}

/* Kill the .padding-6-percent horizontal inset — it was offsetting the
   text from the 1440 grid edge. Keep a small vertical rhythm. */
:is(#boxed, body) .wpb_row.first-section .col.padding-6-percent,
:is(#boxed, body) .wpb_row.first-section .column-inner.padding-6-percent,
:is(#boxed, body) .wpb_row.first-section .vc_column-inner.padding-6-percent {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: clamp(16px, 2vw, 32px) !important;
	padding-bottom: clamp(16px, 2vw, 32px) !important;
}

/* Also strip any stray padding from nested .vc_column-inner in this row */
:is(#boxed, body) .wpb_row.first-section .vc_col-sm-8 > .vc_column-inner,
:is(#boxed, body) .wpb_row.first-section .vc_col-sm-4 > .vc_column-inner {
	padding: 0 !important;
}

/* Keep the equal-height flex layout working but remove min-height floor. */
:is(#boxed, body) .wpb_row.first-section.vc_row-o-equal-height,
:is(#boxed, body) .wpb_row.first-section.vc_row-flex {
	min-height: 0 !important;
}

/* Cap the portrait image so the equal-height row doesn't inherit the raw
   932×1024 image height. Lands around 440-560px — proportioned hero. */
:is(#boxed, body) .wpb_row.first-section .img-with-animation-wrap,
:is(#boxed, body) .wpb_row.first-section .img-with-aniamtion-wrap,
:is(#boxed, body) .wpb_row.first-section .img-with-animation-wrap img,
:is(#boxed, body) .wpb_row.first-section .img-with-aniamtion-wrap img,
:is(#boxed, body) .wpb_row.first-section .img-with-animation {
	max-height: clamp(440px, 54vh, 560px) !important;
	width: auto !important;
	height: auto !important;
	object-fit: cover;
	object-position: center top;
}

/* Image column follows the cap with vertical centering. */
:is(#boxed, body) .wpb_row.first-section.vc_row-flex > .vc_col-sm-4,
:is(#boxed, body) .wpb_row.first-section.vc_row-flex > .vc_col-sm-4 > .vc_column-inner {
	max-height: clamp(440px, 54vh, 560px) !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The row-bg-wrap stays at its VC default (full viewport width) so the
   section colour band continues to bleed edge-to-edge. */

body.single-post .container-wrap {
	padding-top: clamp(32px, 4vw, 72px) !important;
}

/* Content rows — DO NOT add padding/max-width here. Salient places .row
   inside .container.main-content, and .container already caps at 1440.
   Adding padding to .row pushes VC (Visual Composer) content off-center. */

/* Salient caps .container at 880px (rgs.css) and 1100px ≥1300px
   (responsive.css). That collapses header nav and body content to a narrow
   column on wide monitors. Expand max-width to our 1440 target WITHOUT
   adding padding or changing width — Salient's .col percentage grid
   (rgs.css: .span_3=23.5%, .span_9=74.5%, .col margin-right:2%) computes
   against the container's inner width, and any padding we add shrinks that
   inner width and throws off the float math, causing the logo and menu to
   wrap onto separate rows. */
@media (min-width: 1000px) {
	.container {
		max-width: var(--scl-container-max);
	}
}

@media (min-width: 1300px) {
	.container {
		max-width: var(--scl-container-max);
	}
}

/* Leave VC (Visual Composer) row classes alone — Salient's built-in
   full-width-content / full-width-section handling already places content
   correctly against our expanded 1440 .container cap. */

/* Alternating section background — subtle gray for rhythm */
.container-wrap .wpb_row[data-bg="alt"],
.wpb_row.alt-surface {
	background-color: var(--scl-surface-alt);
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. Cards / columns — neutralize .col.boxed, .wpb_column.boxed, .sticky.
      1px hairline border + generous padding replaces the stamped 2015 shadow.
   ───────────────────────────────────────────────────────────────────────────── */
.col.boxed,
.wpb_column.boxed {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	-o-box-shadow: none !important;
	background-color: var(--scl-white);
	border: 1px solid var(--scl-border);
	border-radius: var(--scl-radius-xs);
	padding: clamp(24px, 3vw, 44px) !important;
	position: relative;
	transition: border-color var(--scl-duration) var(--scl-ease),
	            transform var(--scl-duration) var(--scl-ease),
	            background-color var(--scl-duration) var(--scl-ease);
}

.col.boxed:hover,
.wpb_column.boxed:hover {
	top: 0 !important;
	box-shadow: none !important;
	border-color: var(--scl-navy-500);
	transform: translateY(-2px);
}

/* Decorative bottom line Salient paints on boxed columns — drop it. */
.col.boxed span.bottom-line,
.wpb_column.boxed span.bottom-line {
	display: none;
}

/* Legacy .sticky blog-card treatment */
.sticky .content-inner {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	background-color: var(--scl-white);
	border: 1px solid var(--scl-border-strong);
	border-left: 3px solid var(--scl-navy-700);
	padding: clamp(24px, 3vw, 40px) !important;
	border-radius: var(--scl-radius-xs);
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. Buttons — .nectar-button and native submit buttons
      Sharp, confident, no etched inner shadow. Primary = navy solid,
      hover darkens. Ghost variant = navy 1.5px outline.
   ───────────────────────────────────────────────────────────────────────────── */
body .nectar-button,
body .nectar-button.small,
body .nectar-button.medium,
body .nectar-button.large,
body .nectar-button.jumbo {
	border-radius: var(--scl-radius-xs) !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	background-color: var(--scl-navy-700) !important;
	color: var(--scl-white) !important;
	font-family: var(--scl-font-sans) !important;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 16px 32px;
	top: 0 !important;
	margin-bottom: var(--scl-space-3);
	line-height: 1.2;
	border: 1px solid transparent;
	transition: background-color var(--scl-duration) var(--scl-ease),
	            color         var(--scl-duration) var(--scl-ease),
	            border-color  var(--scl-duration) var(--scl-ease),
	            transform     var(--scl-duration) var(--scl-ease);
	position: relative;
	display: inline-block;
	overflow: hidden;
}

body .nectar-button.small  { font-size: 0.75rem;   padding: 10px 20px; letter-spacing: 0.14em; }
body .nectar-button.medium { font-size: 0.8125rem; padding: 13px 26px; letter-spacing: 0.14em; }
body .nectar-button.large  { font-size: 0.875rem;  padding: 18px 36px; }
body .nectar-button.jumbo  { font-size: 1rem;      padding: 24px 48px; }

body .nectar-button:hover {
	background-color: var(--scl-navy-900) !important;
	color: var(--scl-white) !important;
	transform: translateY(-1px);
}

/* See-through (outline) variants — navy ghost on light bgs */
body .nectar-button.see-through,
body .nectar-button.see-through-2,
body .nectar-button.see-through-3 {
	background-color: transparent !important;
	box-shadow: none !important;
	border: 1.5px solid var(--scl-navy-700) !important;
	color: var(--scl-navy-700) !important;
	border-radius: var(--scl-radius-xs) !important;
}

body .nectar-button.see-through:hover,
body .nectar-button.see-through-2:hover,
body .nectar-button.see-through-3:hover {
	background-color: var(--scl-navy-700) !important;
	color: var(--scl-white) !important;
	border-color: var(--scl-navy-700) !important;
}

/* On dark backgrounds (transparent header, dark sections) white ghost */
[data-color-scheme="dark"] .nectar-button.see-through,
[data-header-color="light"] .nectar-button.see-through {
	border-color: rgba(255, 255, 255, 0.72) !important;
	color: var(--scl-white) !important;
}

body .nectar-button.extra-color-gradient-1,
body .nectar-button.extra-color-gradient-2 {
	background-image: linear-gradient(135deg, var(--scl-navy-700), var(--scl-navy-500)) !important;
	background-color: var(--scl-navy-700) !important;
	color: var(--scl-white) !important;
}

/* Native buttons / submit buttons — same language regardless of Salient's
   data-button-style attribute */
body[data-button-style] input[type="submit"],
body[data-button-style] button[type="submit"],
body[data-button-style] button.submit,
body[data-button-style] .container-wrap button:not(.nectar-button),
body[data-button-style] .container-wrap input[type="button"] {
	background-color: var(--scl-navy-700) !important;
	color: var(--scl-white) !important;
	border: 1px solid var(--scl-navy-700) !important;
	border-radius: var(--scl-radius-xs) !important;
	box-shadow: none !important;
	font-family: var(--scl-font-sans) !important;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 14px 28px !important;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--scl-duration) var(--scl-ease),
	            color var(--scl-duration) var(--scl-ease),
	            border-color var(--scl-duration) var(--scl-ease);
}

body[data-button-style] input[type="submit"]:hover,
body[data-button-style] button[type="submit"]:hover,
body[data-button-style] button.submit:hover,
body[data-button-style] .container-wrap button:not(.nectar-button):hover,
body[data-button-style] .container-wrap input[type="button"]:hover {
	background-color: var(--scl-navy-900) !important;
	color: var(--scl-white) !important;
	border-color: var(--scl-navy-900) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. Forms — inputs, textarea, select
      Flat, 1px cool-gray border, navy focus ring with soft halo.
   ───────────────────────────────────────────────────────────────────────────── */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body input[type="search"],
body input[type="password"],
body input[type="number"],
body input[type="date"],
body textarea,
body select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form textarea {
	background-color: var(--scl-white) !important;
	color: var(--scl-text-strong) !important;
	border: 1px solid var(--scl-border-strong) !important;
	border-radius: var(--scl-radius-xs) !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	padding: 14px 16px !important;
	font-family: var(--scl-font-sans) !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	transition: border-color var(--scl-duration-short) var(--scl-ease),
	            box-shadow   var(--scl-duration-short) var(--scl-ease),
	            background-color var(--scl-duration-short) var(--scl-ease);
}

body textarea { min-height: 150px; }

body input::placeholder,
body textarea::placeholder {
	color: var(--scl-text-subtle) !important;
	opacity: 1;
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body input[type="search"]:focus,
body input[type="password"]:focus,
body input[type="number"]:focus,
body textarea:focus,
body select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: 0 !important;
	border-color: var(--scl-navy-700) !important;
	box-shadow: var(--scl-shadow-focus) !important;
	background-color: var(--scl-white) !important;
}

/* Labels */
body label,
.wpcf7 label {
	display: inline-block;
	font-family: var(--scl-font-sans);
	font-size: var(--scl-text-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--scl-navy-700);
	margin-bottom: var(--scl-space-2);
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. Header + primary navigation
      White top bar with a hairline gray bottom border. On scroll it stays
      flat — depth from type contrast, not elevation. Dark text on white.
   ───────────────────────────────────────────────────────────────────────────── */
#header-outer {
	background-color: var(--scl-white) !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	border-bottom: 1px solid var(--scl-border) !important;
	padding-top: 24px !important;
	transition: background-color var(--scl-duration) var(--scl-ease),
	            padding var(--scl-duration) var(--scl-ease);
}

#header-outer[data-box-shadow="small"],
#header-outer[data-box-shadow="large"],
#header-outer[data-box-shadow="none"] {
	box-shadow: none !important;
}

/* Compact (post-scroll) state */
body.scrolled-down #header-outer,
#header-outer.small-nav {
	padding-top: 10px !important;
}

/* Transparent header on hero sections — keep transparent, keep a soft border */
#header-outer[data-transparent-header="true"].transparent {
	background-color: transparent !important;
	border-bottom-color: rgba(255, 255, 255, 0.20) !important;
	box-shadow: none !important;
}

/* ==========================================================================
   Header row — single-row flex layout: logo LEFT, menu RIGHT.

   Salient markup:
     header#top > .container > .row
       > .col.span_3                (logo)
       > .col.span_9.col_last       (nav column: mobile toggles + <nav>)
           > nav
               > ul.buttons         (search icon + side-widget toggle)
               > ul.sf-menu         (primary menu)

   Rules below:
   - Cap the header's .container at 1440 even when Salient outputs
     data-full-width="true" (which removes the cap by default).
   - Convert the .row to flex with space-between so logo + nav sit on one row.
   - Push <nav> to the right edge with margin-left:auto.
   - Disable Salient's data-lhe="animated_underline" fill effect (the giant
     blue box behind the current menu item) — replace with a subtle gold-free
     underline from our own rule further down.
   ========================================================================== */

/* ==========================================================================
   BOXED-MODE NOTE: this site is in #boxed mode. Salient wraps everything
   in <div id="boxed"> and applies rules like:
       #boxed #header-outer { width: auto!important; min-width: 1200px; ... }
   with 2-id specificity that our #header-outer rules (1 id) cannot win.
   Every header rule below uses :is(#boxed, body) as a prefix — that borrows
   #boxed's specificity so we tie-and-win (loaded later) whether the site is
   in boxed mode or not.
   ========================================================================== */

/* Repair #boxed itself: our earlier rule set it full-width already, but
   re-assert to beat possible cascade quirks on dynamic CSS. */
body #boxed,
#boxed {
	box-shadow: none !important;
	background-color: var(--scl-white) !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* #header-outer: override #boxed #header-outer (2 IDs) with our own
   2-ID-equivalent selector. */
:is(#boxed, body) #header-outer {
	width: 100% !important;
	min-width: 0 !important;
	left: auto !important;
	right: auto !important;
	background-color: var(--scl-white) !important;
	box-shadow: none !important;
	border-bottom: 1px solid var(--scl-border) !important;
}

/* Cap the header's inner .container at 1440 — matches #boxed #header-outer
   header > .container plus non-boxed variants.

   NOTE: no padding-left/right here. The body's content .container
   (inside .container-wrap > .container.main-content) does not add gutter
   padding either — Salient handles internal column breathing via
   .col margin-right:2%. Matching that means header and body columns
   align to the same vertical grid on every viewport. */
:is(#boxed, body) #header-outer header > .container,
:is(#boxed, body) #header-outer[data-full-width="true"] header > .container,
:is(#boxed, body) .ascend[data-slide-out-widget-area="true"] #header-outer[data-full-width="true"] header > .container {
	max-width: var(--scl-container-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box;
	width: 100%;
}

:is(#boxed, body) header#top > .container,
:is(#boxed, body) header#top > .container > .row {
	padding-bottom: 0 !important;
}

/* ─── Desktop flex header (≥1000px = Salient's data-header-breakpoint)
   Below 1000px Salient switches to its mobile hamburger UX, so we scope
   the flex layout to the desktop breakpoint only. */
@media (min-width: 1000px) {

	:is(#boxed, body) header#top > .container > .row {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	:is(#boxed, body) header#top > .container > .row > .col.span_3,
	:is(#boxed, body) header#top > .container > .row > .col.span_9 {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		min-height: 0 !important;
	}

	:is(#boxed, body) header#top > .container > .row > .col.span_3 {
		flex: 0 0 auto !important;     /* logo natural width */
		max-width: 40% !important;
	}

	:is(#boxed, body) header#top > .container > .row > .col.span_9 {
		flex: 1 1 auto !important;     /* nav column fills remainder */
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		text-align: right !important;
	}

	/* <nav> pinned to the right edge. */
	:is(#boxed, body) header#top > .container > .row > .col.span_9 > nav {
		margin-left: auto !important;
		display: flex !important;
		align-items: center !important;
		gap: var(--scl-space-4) !important;
	}

	/* Two nav uls become horizontal flex rows. Flip DOM order so the main
	   menu is on the left of the nav block and ul.buttons (search icon)
	   is on the right. */
	:is(#boxed, body) header#top nav > ul.sf-menu,
	:is(#boxed, body) header#top nav > ul.buttons {
		float: none !important;
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		padding: 0 !important;
		margin: 0 !important;
		line-height: 1 !important;
	}

	:is(#boxed, body) header#top nav > ul.sf-menu { order: 1 !important; }
	:is(#boxed, body) header#top nav > ul.buttons {
		order: 2 !important;
		margin-left: var(--scl-space-4) !important;
		margin-right: 0 !important;
	}

	:is(#boxed, body) header#top nav > ul.sf-menu > li,
	:is(#boxed, body) header#top nav > ul.buttons > li {
		float: none !important;
		display: flex !important;
		align-items: center !important;
	}

	/* Remove default padding from menu-item anchors */
	:is(#boxed, body) header#top nav > ul.sf-menu > li.menu-item > a,
	:is(#boxed, body) header#top nav > ul > li.menu-item > a {
		padding: 0 !important;
	}

	/* Hide Salient's mobile-only icons and the side-widget hamburger at
	   desktop — the full flex menu is visible so these are redundant. */
	:is(#boxed, body) header#top > .container > .row > .col.span_9 > .slide-out-widget-area-toggle,
	:is(#boxed, body) header#top > .container > .row > .col.span_9 > .mobile-search,
	:is(#boxed, body) header#top > .container > .row > .col.span_9 > #mobile-cart-link,
	:is(#boxed, body) header#top nav > ul.buttons > li.slide-out-widget-area-toggle {
		display: none !important;
	}

} /* /@media (min-width: 1000px) */

/* ==========================================================================
   Neutralize Salient's data-lhe="animated_underline" indicator completely.

   Parent (style.css:921-931) paints:
       a::after {
         position:absolute; bottom:-6px; left:0; width:100%;
         border-top:2px solid #000; padding-bottom:inherit;
         transform:scaleX(0);
       }
       a:hover::after, a.current::after { transform:scaleX(1); }

   The `padding-bottom:inherit` pulls the link's own padding-bottom (often
   15-25px) into the pseudo-element — that's what reads as a "giant box"
   under the active item, not a thin underline. We kill all of it below and
   replace with a clean hairline.
   ========================================================================== */

/* 1. Wipe Salient's a::after on every top-level menu link, in every state */
:is(#boxed, body) #header-outer[data-lhe="animated_underline"] header#top nav > ul > li:not([class*="button_"]) > a::after,
:is(#boxed, body) #header-outer[data-lhe="animated_underline"] header#top nav > ul > li > a:hover::after,
:is(#boxed, body) #header-outer[data-lhe="animated_underline"] header#top nav > ul > li.sfHover > a::after,
:is(#boxed, body) #header-outer[data-lhe="animated_underline"] header#top nav .sf-menu li.current_page_ancestor > a::after,
:is(#boxed, body) #header-outer[data-lhe="animated_underline"] header#top nav .sf-menu li.current-menu-item > a::after,
:is(#boxed, body) #header-outer[data-lhe="animated_underline"] header#top nav .sf-menu li.current-menu-ancestor > a::after,
:is(#boxed, body) #header-outer[data-lhe="animated_underline"] header#top nav .sf-menu li.current_page_item > a::after,
:is(#boxed, body) #header-secondary-outer[data-lhe="animated_underline"] nav > ul.sf-menu > li > a::after,
:is(#boxed, body) #header-secondary-outer[data-lhe="animated_underline"] nav > ul.sf-menu > li > a:hover::after {
	border-top: 0 !important;
	border: 0 !important;
	padding-bottom: 0 !important;
	transform: none !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	content: none !important;
	display: none !important;
}

/* 2. Wipe Salient's span::after fill effect (the "slides-in background" used
      in left-header format, applied to > a > span::after). */
:is(#boxed, body) #header-outer[data-lhe="animated_underline"] header#top nav > ul > li:not([class*="button_"]) > a > span::after,
:is(#boxed, body) #header-outer header#top nav > ul > li:not([class*="button_"]) > a > span::after {
	display: none !important;
	background: transparent !important;
	background-color: transparent !important;
	transform: none !important;
	width: 0 !important;
	height: 0 !important;
	content: none !important;
}

/* 3. Clean inner span: no padding, no background */
:is(#boxed, body) #header-outer header#top nav > ul > li:not([class*="button_"]) > a > span {
	padding: 0 !important;
	background: transparent !important;
}

/* 4. Active/hover color stays our navy (parent otherwise sets white/accent) */
:is(#boxed, body) #header-outer header#top nav > ul > li:not([class*="button_"]) > a:hover,
:is(#boxed, body) #header-outer header#top nav > ul > li:not([class*="button_"]).open-submenu > a,
:is(#boxed, body) #header-outer header#top nav > ul > li:not([class*="button_"]).current_page_item > a,
:is(#boxed, body) #header-outer header#top nav > ul > li:not([class*="button_"]).current-menu-item > a,
:is(#boxed, body) #header-outer header#top nav > ul > li:not([class*="button_"]).current-menu-ancestor > a,
:is(#boxed, body) #header-outer header#top nav > ul > li:not([class*="button_"]).sfHover > a {
	color: var(--scl-navy-900) !important;
	background: transparent !important;
}

/* 5. Our own clean hairline indicator — attached to the <a> itself using
      ::before to avoid any collision with the wiped ::after above. 1.5px
      navy line anchored at the bottom of the link, animating from center. */
:is(#boxed, body) #header-outer header#top nav > ul.sf-menu > li:not([class*="button_"]) > a {
	position: relative;
	padding-bottom: 2px;
}

:is(#boxed, body) #header-outer header#top nav > ul.sf-menu > li:not([class*="button_"]) > a::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 1.5px;
	width: 0;
	background-color: var(--scl-navy-700);
	transform: translateX(-50%);
	transition: width var(--scl-duration) var(--scl-ease);
	pointer-events: none;
}

:is(#boxed, body) #header-outer header#top nav > ul.sf-menu > li:not([class*="button_"]) > a:hover::before,
:is(#boxed, body) #header-outer header#top nav > ul.sf-menu > li.sfHover:not([class*="button_"]) > a::before,
:is(#boxed, body) #header-outer header#top nav > ul.sf-menu > li.current-menu-item:not([class*="button_"]) > a::before,
:is(#boxed, body) #header-outer header#top nav > ul.sf-menu > li.current_page_item:not([class*="button_"]) > a::before,
:is(#boxed, body) #header-outer header#top nav > ul.sf-menu > li.current-menu-ancestor:not([class*="button_"]) > a::before,
:is(#boxed, body) #header-outer header#top nav > ul.sf-menu > li.current_page_ancestor:not([class*="button_"]) > a::before {
	width: calc(100% - 24px);
}

/* Logo typography, when logo is text */
header#top #logo {
	font-family: var(--scl-font-display) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	color: var(--scl-navy-700) !important;
	font-size: 1.625rem !important;
	line-height: 1.1 !important;
}

header#top #logo:hover {
	color: var(--scl-navy-900) !important;
}

/* Primary menu */
header#top nav > ul.sf-menu > li > a,
header#top nav > ul > li > a {
	font-family: var(--scl-font-sans) !important;
	font-weight: 500 !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--scl-navy-700) !important;
	transition: color var(--scl-duration-short) var(--scl-ease) !important;
	position: relative;
}

header#top nav > ul.sf-menu > li > a:hover,
header#top nav > ul > li.current-menu-item > a,
header#top nav > ul > li.current_page_item > a,
header#top nav > ul > li.current-menu-ancestor > a {
	color: var(--scl-navy-900) !important;
}

/* (Earlier ::after underline removed — the higher-specificity ::before rule
   above handles hover / active indication. Having both caused a duplicate
   line that rendered as a thicker bar on some pages.) */

/* Dropdowns */
body header#top nav ul.sf-menu li ul,
body[data-dropdown-style="minimal"] .sf-menu > li > ul {
	background-color: var(--scl-white) !important;
	border: 1px solid var(--scl-border) !important;
	border-radius: var(--scl-radius-xs) !important;
	box-shadow: var(--scl-shadow-md) !important;
	padding: 6px !important;
}

body header#top nav ul.sf-menu li ul li a {
	font-family: var(--scl-font-sans) !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.04em !important;
	text-transform: none !important;
	color: var(--scl-navy-700) !important;
	padding: 10px 14px !important;
	border-radius: var(--scl-radius-xs);
	transition: background-color var(--scl-duration-short) var(--scl-ease),
	            color var(--scl-duration-short) var(--scl-ease);
}

body header#top nav ul.sf-menu li ul li a:hover {
	background-color: var(--scl-gray-50) !important;
	color: var(--scl-navy-900) !important;
}

/* Cart icon in nav */
#header-outer .cart-menu-wrap .cart-menu {
	box-shadow: none !important;
	border-radius: var(--scl-radius-xs) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. Page header / hero / .page-title
   ───────────────────────────────────────────────────────────────────────────── */
#page-header-bg,
.page-header-no-bg {
	background-color: var(--scl-navy-700) !important;
}

/* Page hero height — honour per-page admin settings.
   Salient's Redux per-page "Header Height" option writes inline
   style="height: 550px" + data-height="550" on #page-header-bg /
   #page-header-wrap. We:
     - Use a non-!important height clamp as a FALLBACK for pages with
       no admin-set height (category / search / default pages).
     - Let inline per-page heights win automatically (inline without
       !important loses to external !important — we keep !important
       only on min/max bounds, not on height itself).
     - Cap with max-height to prevent runaway 900-1200px Salient defaults,
       but set the cap generous enough that typical 550-700px admin
       settings render at their intended height. */
:is(#boxed, body) #page-header-bg,
:is(#boxed, body) #page-header-wrap,
:is(#boxed, body) #page-header-bg.fullscreen-header,
:is(#boxed, body) #page-header-wrap.fullscreen-header {
	height: clamp(840px, 92vh, 1080px) !important;
	min-height: 0 !important;
}

/* Single post — slightly shorter so post title doesn't swim in a wall of navy */
:is(#boxed, body) .single-post #page-header-bg,
:is(#boxed, body) .single-post #page-header-wrap,
:is(#boxed, body) .single-post #page-header-bg.fullscreen-header,
:is(#boxed, body) .single-post #page-header-wrap.fullscreen-header {
	height: clamp(680px, 75vh, 920px) !important;
}

/* Inner title wrap — center content vertically in the shorter band. */
:is(#boxed, body) #page-header-bg .inner-wrap,
:is(#boxed, body) #page-header-bg > .container {
	padding-top: var(--scl-space-6) !important;
	padding-bottom: var(--scl-space-6) !important;
}

#page-header-bg h1,
#page-header-bg .page-header-title {
	font-family: var(--scl-font-display) !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em !important;
	color: var(--scl-white) !important;
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem) !important;
	line-height: 1.1 !important;
	margin-bottom: var(--scl-space-3) !important;
}

#page-header-bg .subheader,
#page-header-bg span.subheader {
	font-family: var(--scl-font-sans) !important;
	font-size: var(--scl-text-sm) !important;
	font-weight: 500 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.72) !important;
	margin-bottom: var(--scl-space-3);
}

/* Breadcrumbs */
#breadcrumbs,
.breadcrumbs {
	font-size: var(--scl-text-xs) !important;
	font-family: var(--scl-font-sans) !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--scl-text-subtle) !important;
}

#breadcrumbs a,
.breadcrumbs a {
	color: var(--scl-text-muted) !important;
}

#breadcrumbs a:hover,
.breadcrumbs a:hover {
	color: var(--scl-navy-700) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   11. Blog index, recent posts, article cards, pagination
   ───────────────────────────────────────────────────────────────────────────── */
.post-area .post,
.post-area article.post,
article.post {
	background: var(--scl-white) !important;
	box-shadow: none !important;
	border: 0 !important;
	border-bottom: 1px solid var(--scl-border) !important;
	border-radius: 0 !important;
	padding-bottom: var(--scl-space-8) !important;
	margin-bottom: var(--scl-space-8) !important;
}

.post-area .post:last-child {
	border-bottom: 0 !important;
}

.post-area .post .post-header h2,
.post-area .post h2.title {
	font-size: var(--scl-text-3xl) !important;
	margin-bottom: var(--scl-space-3) !important;
}

/* Single post — add breathing room between the H1 title and the byline
   (author/date/category) + meta row beneath it. */
.single-post .section-title.blog-title .entry-title,
.blog-title h1.entry-title {
	margin-bottom: var(--scl-space-5) !important;  /* 24px below title */
}

.single-post #single-below-header,
.blog-title #single-below-header {
	margin-top: var(--scl-space-4) !important;     /* 16px above byline row */
	margin-bottom: var(--scl-space-6) !important;  /* space to the content */
	padding-top: var(--scl-space-3);
	border-top: 1px solid var(--scl-border);
}

.single-post #single-meta {
	margin-top: var(--scl-space-4) !important;
}

.post-area .post .post-header h2 a {
	color: var(--scl-navy-700) !important;
	background-image: none !important;
}

.post-area .post .post-header h2 a:hover {
	color: var(--scl-navy-900) !important;
}

/* Post meta — refined, uppercase, tracked.
   Handles both blog LIST cards (where .meta-category contains consecutive
   <a> tags with no separator text) and SINGLE post byline (where WP emits
   comma-separated <a>, <a>). A pseudo-element dot is added between
   sibling anchors for blog list so items visually separate cleanly. */
.post-header .meta-author,
.post-header .meta-date,
.post-header .meta-category,
.post-header .date,
.meta-category,
span.meta-category {
	font-family: var(--scl-font-sans) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--scl-text-subtle) !important;
	line-height: 1.5 !important;
}

/* Each category anchor — small chip sized in-place with parent's
   featured_img_left styling neutralized. */
:is(#boxed, body) .meta-category a,
:is(#boxed, body) span.meta-category a,
:is(#boxed, body) .post-header .meta-category a,
:is(#boxed, body) .post-area.featured_img_left article .meta-category a,
:is(#boxed, body) .masonry .meta-category a {
	color: var(--scl-navy-600) !important;
	font-size: 0.75rem !important;
	font-family: var(--scl-font-sans) !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	background-image: none !important;
	position: relative;
	line-height: 1.5 !important;
}

:is(#boxed, body) .meta-category a:hover {
	color: var(--scl-navy-900) !important;
}

/* Neutralize parent Salient's animated 2px underline before/after on
   category anchors — it creates a scaleX(0→1) background rectangle that
   reads as a weird bar. Replaced with a plain text-colour hover. */
:is(#boxed, body) .post-area.featured_img_left .meta-category a::before,
:is(#boxed, body) .post-area.featured_img_left .meta-category a::after,
:is(#boxed, body) .masonry .meta-category a::before,
:is(#boxed, body) .masonry .meta-category a::after,
:is(#boxed, body) .related-posts[data-style="material"] .meta-category a::before,
:is(#boxed, body) [data-style="list_featured_first_row"] .meta-category a::before {
	display: none !important;
	content: none !important;
	background: transparent !important;
	transform: none !important;
}

/* Dot separator between consecutive category anchors within the same span
   (for blog-list markup that emits <a><a><a> with no text separator). */
:is(#boxed, body) span.meta-category > a + a::before,
:is(#boxed, body) .meta-category > a + a::before {
	content: "·";
	display: inline-block;
	margin: 0 0.45em;
	color: var(--scl-gray-400);
	font-weight: 400;
}

/* Featured media */
.post-area .post .post-featured-img,
.post-area .post .post-featured-img img {
	border-radius: var(--scl-radius-xs) !important;
	overflow: hidden;
}

/* Pagination */
.pagination,
.nav-previous a,
.nav-next a,
.page-numbers,
.woocommerce-pagination .page-numbers {
	font-family: var(--scl-font-sans) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
}

:is(#boxed, body) .pagination a,
:is(#boxed, body) .pagination span,
:is(#boxed, body) a.page-numbers,
:is(#boxed, body) span.page-numbers,
:is(#boxed, body) .woocommerce nav.woocommerce-pagination ul li a,
:is(#boxed, body) .woocommerce .container-wrap nav.woocommerce-pagination ul li span,
:is(#boxed, body) #pagination a.page-numbers,
:is(#boxed, body) #pagination span.page-numbers {
	border-radius: var(--scl-radius-xs) !important;
	box-shadow: none !important;
	color: var(--scl-navy-700) !important;
	border: 1px solid var(--scl-border) !important;
	background: var(--scl-white) !important;
	transition: border-color var(--scl-duration-short) var(--scl-ease),
	            color var(--scl-duration-short) var(--scl-ease),
	            background-color var(--scl-duration-short) var(--scl-ease) !important;
}

/* Hover state — navy text on a soft cream bg, kept on white overall */
:is(#boxed, body) .pagination a:hover,
:is(#boxed, body) a.page-numbers:hover,
:is(#boxed, body) #pagination a.page-numbers:hover,
:is(#boxed, body) #pagination .next a:hover,
:is(#boxed, body) #pagination .prev a:hover,
:is(#boxed, body) .woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--scl-navy-700) !important;
	color: var(--scl-navy-900) !important;
	background: var(--scl-gray-50) !important;
}

/* Current page — solid navy pill with white text for clear "you are here"
   signal. Raised specificity to beat parent's color:#FFF !important at
   style.css:10842 for woocommerce pagination. */
:is(#boxed, body) span.page-numbers.current,
:is(#boxed, body) #pagination span.page-numbers.current,
:is(#boxed, body) html body #pagination > span.page-numbers.current,
:is(#boxed, body) .woocommerce nav.woocommerce-pagination span.page-numbers.current,
:is(#boxed, body) html body nav.woocommerce-pagination span.page-numbers.current,
:is(#boxed, body) .woocommerce .container-wrap nav.woocommerce-pagination ul li:hover span,
:is(#boxed, body) .woocommerce nav.woocommerce-pagination ul li a:active {
	border-color: var(--scl-navy-700) !important;
	color: var(--scl-white) !important;
	background: var(--scl-navy-700) !important;
	background-color: var(--scl-navy-700) !important;
}

/* Prev/next arrows — keep them transparent-feeling, no filled pill */
:is(#boxed, body) #pagination .page-numbers.prev,
:is(#boxed, body) #pagination .page-numbers.next,
:is(#boxed, body) .woocommerce nav.woocommerce-pagination ul li .page-numbers.prev,
:is(#boxed, body) .woocommerce nav.woocommerce-pagination ul li .page-numbers.next {
	background-color: transparent !important;
	color: var(--scl-navy-700) !important;
	border: 1px solid var(--scl-border) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. Nectar shortcodes — testimonials, feature boxes, fancy headings, tabs
   ───────────────────────────────────────────────────────────────────────────── */
.testimonial_slider,
.testimonial_slider[data-style] li blockquote,
.nectar-testimonial-slider blockquote {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-left: 3px solid var(--scl-navy-700) !important;
	border-radius: 0 !important;
	padding: var(--scl-space-4) 0 var(--scl-space-4) var(--scl-space-6) !important;
	font-family: var(--scl-font-serif) !important;
	font-style: italic;
	font-size: clamp(1.125rem, 1.6vw, 1.5rem) !important;
	line-height: 1.5 !important;
	color: var(--scl-navy-700) !important;
}

/* Feature boxes / icon boxes */
.feature-box,
.nectar-feature-box,
.nectar_icon_wrap {
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
}

.feature-box .feature-box-inner,
.nectar-feature-box > .feature-box-inner {
	border-radius: var(--scl-radius-xs) !important;
	box-shadow: none !important;
}

/* Nectar fancy heading ("line") */
.nectar-fancy-title[data-style="underline"] span::after,
.nectar-fancy-title .line {
	background-color: var(--scl-navy-700) !important;
}

/* Tabs */
.wpb_tabs .wpb_tabs_nav a,
.vc_tta-tabs .vc_tta-tab a {
	font-family: var(--scl-font-sans) !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	border-radius: var(--scl-radius-xs) !important;
	box-shadow: none !important;
}

/* Accordions */
.wpb_accordion .wpb_accordion_wrapper .wpb_accordion_header,
.vc_tta-accordion .vc_tta-panel-heading {
	border-radius: var(--scl-radius-xs) !important;
	box-shadow: none !important;
	border: 1px solid var(--scl-border) !important;
	background: var(--scl-white) !important;
}

.wpb_accordion .wpb_accordion_wrapper .wpb_accordion_header a,
.vc_tta-accordion .vc_tta-panel-heading a {
	color: var(--scl-navy-700) !important;
	font-family: var(--scl-font-sans) !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	background-image: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. Footer + copyright
      Deep-slate footer so it reads as a distinct section on the white page.
   ───────────────────────────────────────────────────────────────────────────── */
#footer-outer {
	background-color: var(--scl-navy-900) !important;
	color: rgba(255, 255, 255, 0.70);
	box-shadow: none !important;
}

#footer-outer #footer-widgets {
	padding: var(--scl-space-9) var(--scl-gutter) !important;
	max-width: var(--scl-container-max);
	margin: 0 auto;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#footer-outer #footer-widgets .widget h4,
#footer-outer #footer-widgets .widget-title,
#footer-outer #footer-widgets .widget h3 {
	color: var(--scl-white) !important;
	font-family: var(--scl-font-sans) !important;
	font-size: var(--scl-text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	margin-bottom: var(--scl-space-5) !important;
}

#footer-outer #footer-widgets .widget a {
	color: rgba(255, 255, 255, 0.70) !important;
	background-image: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.9)) !important;
	background-size: 0% 1px !important;
	background-repeat: no-repeat !important;
	background-position: 0 100% !important;
	transition: color var(--scl-duration-short) var(--scl-ease),
	            background-size var(--scl-duration) var(--scl-ease) !important;
}

#footer-outer #footer-widgets .widget a:hover {
	color: var(--scl-white) !important;
	background-size: 100% 1px !important;
}

#footer-outer #copyright {
	padding: var(--scl-space-5) var(--scl-gutter) !important;
	max-width: var(--scl-container-max);
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.48);
	font-size: var(--scl-text-xs);
	letter-spacing: 0.08em;
}

#footer-outer #copyright li a {
	color: rgba(255, 255, 255, 0.66) !important;
}

#footer-outer #copyright li a:hover {
	color: var(--scl-white) !important;
}


/* ─── Footer 4-column layout polish ─────────────────────────────────────── */

/* Footer row — CSS Grid with auto-fit so it always packs as many 4 columns
   as the width allows and reflows gracefully on narrower viewports. Each
   column has a min 220px; below that it drops to a stacked single column.
   Salient's JS (init.js:4971) adds .one-fourths .clear-both .right-edge to
   these .col elements for its legacy 2×2 iPad helper — those classes are
   neutralized here so grid owns the layout at every viewport. */
#footer-outer #footer-widgets .row {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	gap: clamp(24px, 3vw, 64px) !important;
	float: none !important;
}

/* Kill the .row clearfix pseudo that would become a grid item. */
#footer-outer #footer-widgets .row::after,
#footer-outer #footer-widgets .row::before {
	display: none !important;
	content: none !important;
}

#footer-outer #footer-widgets .row > .col {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;          /* defeat Salient's JS-added .clear-both */
}

/* Explicitly strip the tablet-width 48% float that Salient applies at
   690-1000px via .one-fourths.span_3 — at THAT viewport we still want
   grid, not a 2x2 float grid. */
@media (min-width: 690px) and (max-width: 1000px) {
	#footer-outer #footer-widgets .row > .col.one-fourths.span_3,
	#footer-outer #footer-widgets .row > .col.span_3 {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		clear: none !important;
	}
}

/* Reset default widget spacing — we control each block below */
#footer-outer #footer-widgets .widget {
	padding: 0;
	background: transparent;
	border: 0;
	margin: 0 0 var(--scl-space-5);
}

/* Brand column */
#footer-outer .scl-footer-brand .widgettitle,
#footer-outer .scl-footer-brand h4 {
	font-family: var(--scl-font-display) !important;
	font-size: clamp(1.5rem, 2vw, 2rem) !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	color: var(--scl-white) !important;
	margin-bottom: var(--scl-space-3) !important;
	line-height: 1.1;
}

#footer-outer .scl-footer-tagline {
	font-family: var(--scl-font-sans) !important;
	font-size: var(--scl-text-xs) !important;
	font-weight: 500 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--scl-navy-300) !important;
	margin-bottom: var(--scl-space-5) !important;
	padding-bottom: var(--scl-space-4) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	display: inline-block;
}

#footer-outer .scl-footer-lede {
	font-family: var(--scl-font-sans) !important;
	font-size: var(--scl-text-sm) !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, 0.68) !important;
	margin-bottom: 0 !important;
	max-width: 34ch;
}

/* Links columns (Practice Areas, Explore) */
#footer-outer .scl-footer-links ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

#footer-outer .scl-footer-links ul li {
	margin: 0 0 var(--scl-space-3) !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	font-size: var(--scl-text-sm) !important;
}

#footer-outer .scl-footer-links ul li a {
	display: inline-block !important;
	position: relative;
	padding-left: 14px !important;
	background-size: 0 1px !important;  /* disable the underline-grow from footer a defaults */
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: var(--scl-text-sm) !important;
	line-height: 1.4 !important;
	transition: color var(--scl-duration-short) var(--scl-ease),
	            padding-left var(--scl-duration-short) var(--scl-ease) !important;
}

#footer-outer .scl-footer-links ul li a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 1px;
	background-color: var(--scl-navy-400);
	transform: translateY(-50%);
	transition: width var(--scl-duration) var(--scl-ease),
	            background-color var(--scl-duration) var(--scl-ease);
}

#footer-outer .scl-footer-links ul li a:hover {
	color: var(--scl-white) !important;
	padding-left: 20px !important;
}

#footer-outer .scl-footer-links ul li a:hover::before {
	width: 14px;
	background-color: var(--scl-white);
}

/* Contact column */
#footer-outer .scl-footer-contact .scl-address {
	font-style: normal !important;
	font-family: var(--scl-font-sans);
	font-size: var(--scl-text-sm);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: var(--scl-space-5);
	padding-bottom: var(--scl-space-4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#footer-outer .scl-footer-contact .scl-address strong {
	color: var(--scl-white);
	font-weight: 600;
	display: block;
	margin-bottom: var(--scl-space-1);
}

#footer-outer .scl-contact-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

#footer-outer .scl-contact-list li {
	margin-bottom: var(--scl-space-3) !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}

#footer-outer .scl-contact-list li a {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: var(--scl-text-sm) !important;
	font-weight: 500;
	background-size: 0 1px !important;
	transition: color var(--scl-duration-short) var(--scl-ease) !important;
}

#footer-outer .scl-contact-list li a:hover {
	color: var(--scl-white) !important;
}

#footer-outer .scl-contact-list .scl-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--scl-white);
	font-size: 0.875rem;
	line-height: 1;
	transition: background-color var(--scl-duration-short) var(--scl-ease);
}

#footer-outer .scl-contact-list li a:hover .scl-icon {
	background-color: var(--scl-navy-600);
}

/* Widget titles across all footer columns (except brand which has its own) */
#footer-outer #footer-widgets .widget > .widgettitle:not([class*="scl-footer-brand"]),
#footer-outer #footer-widgets .widget:not(.scl-footer-brand) > .widgettitle,
#footer-outer #footer-widgets .widget:not(.scl-footer-brand) > h4 {
	font-family: var(--scl-font-sans) !important;
	font-size: var(--scl-text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: var(--scl-white) !important;
	margin-bottom: var(--scl-space-5) !important;
	padding-bottom: var(--scl-space-3) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	position: relative;
}

#footer-outer #footer-widgets .widget:not(.scl-footer-brand) > .widgettitle::after,
#footer-outer #footer-widgets .widget:not(.scl-footer-brand) > h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 32px;
	height: 1px;
	background-color: var(--scl-navy-300);
}

/* Footer padding tighter on narrow phones (grid auto-fit handles column
   reflow intrinsically — no column-count @media needed). */
@media (max-width: 640px) {
	#footer-outer #footer-widgets {
		padding: var(--scl-space-8) var(--scl-gutter) !important;
	}
	#footer-outer #footer-widgets .row {
		gap: var(--scl-space-7) !important;
	}
}

/* Copyright bar refinement — border + layout */
#footer-outer #copyright {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin-top: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--scl-space-4);
}

#footer-outer #copyright > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--scl-space-4);
	width: 100%;
	max-width: var(--scl-container-max);
}

#footer-outer #copyright .col.span_5,
#footer-outer #copyright .col.span_7 {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

#footer-outer #copyright p {
	margin: 0 !important;
	font-size: var(--scl-text-xs) !important;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.48) !important;
}

#footer-outer #copyright #social {
	display: flex;
	gap: var(--scl-space-3);
	list-style: none;
	padding: 0;
	margin: 0;
}

#footer-outer #copyright #social li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.72) !important;
	transition: background-color var(--scl-duration-short) var(--scl-ease),
	            color var(--scl-duration-short) var(--scl-ease);
	background-image: none !important;
}

#footer-outer #copyright #social li a:hover {
	background-color: var(--scl-navy-600);
	color: var(--scl-white) !important;
}

#footer-outer #copyright #social li a i {
	font-size: 0.875rem;
	line-height: 1;
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. WooCommerce + utility polish (tables, images, figcaption)
   ───────────────────────────────────────────────────────────────────────────── */
img,
.wp-caption img,
.attachment-post-thumbnail,
.container-wrap img {
	border-radius: var(--scl-radius-xs);
}

/* Captions */
.wp-caption .wp-caption-text,
figcaption {
	font-family: var(--scl-font-sans);
	font-size: var(--scl-text-xs);
	font-weight: 500;
	color: var(--scl-text-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: var(--scl-space-3);
	padding-left: var(--scl-space-3);
	border-left: 2px solid var(--scl-gray-400);
}

/* Tables */
.container-wrap table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--scl-space-6) 0;
	font-size: var(--scl-text-base);
}

.container-wrap table th,
.container-wrap table td {
	padding: var(--scl-space-4) var(--scl-space-4);
	border-bottom: 1px solid var(--scl-border);
	text-align: left;
}

.container-wrap table th {
	font-family: var(--scl-font-sans);
	font-weight: 600;
	font-size: var(--scl-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scl-navy-700);
	background: var(--scl-gray-50);
	border-bottom: 1px solid var(--scl-border-strong);
}

/* WooCommerce product grid */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	box-shadow: none !important;
	background: transparent !important;
	padding: var(--scl-space-4) !important;
	border: 1px solid transparent;
	border-radius: var(--scl-radius-xs);
	transition: border-color var(--scl-duration) var(--scl-ease),
	            background-color var(--scl-duration) var(--scl-ease);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	border-color: var(--scl-border-strong);
	background: var(--scl-white);
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	font-family: var(--scl-font-serif) !important;
	color: var(--scl-navy-700) !important;
	font-size: var(--scl-text-xl) !important;
}

/* Cart notification */
.cart-notification {
	box-shadow: var(--scl-shadow-md) !important;
	border-radius: var(--scl-radius-xs) !important;
}

/* Sidebar widgets */
#sidebar .widget {
	padding: var(--scl-space-6);
	background: var(--scl-white);
	border: 1px solid var(--scl-border);
	border-radius: var(--scl-radius-xs);
	box-shadow: none;
	margin-bottom: var(--scl-space-5);
}

#sidebar .widget h4,
#sidebar .widget-title {
	font-family: var(--scl-font-sans);
	font-size: var(--scl-text-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--scl-navy-700);
	margin-bottom: var(--scl-space-4);
	padding-bottom: var(--scl-space-3);
	border-bottom: 1px solid var(--scl-border);
}


/* ─────────────────────────────────────────────────────────────────────────────
   14b. Kill Salient's default teal (#27CFC3 / #27CCC0) wherever it hardcodes
        through the parent stylesheet — dropdowns, search icons, sub-indicators,
        social hovers, mobile menu icons, nectar-button default, borders, etc.
        Every one of these maps to our navy brand token instead.
   ───────────────────────────────────────────────────────────────────────────── */

/* Generic link + logo hover (parent style.css:331, 561) */
:is(#boxed, body) a { color: var(--scl-navy-700); }
:is(#boxed, body) header#top #logo:hover { color: var(--scl-navy-900) !important; }

/* Minimal-dropdown current-menu-ancestor pill (parent style.css:1102) */
body[data-dropdown-style="minimal"] #header-outer:not([data-format="left-header"]) header#top nav > ul > li:not(.megamenu) ul li.current-menu-ancestor > a {
	color: var(--scl-white) !important;
	background-color: var(--scl-navy-700) !important;
}

/* Header search icon hover (parent style.css:1169) */
:is(#boxed, body) header#top nav ul #search-btn a span:hover {
	color: var(--scl-navy-900) !important;
}

/* Secondary header social icon hovers (parent style.css:1247, 1271) */
:is(#boxed, body) #header-secondary-outer #social a:hover i {
	color: var(--scl-navy-700) !important;
}
:is(#boxed, body) #header-secondary-outer #social li a.behance:hover,
:is(#boxed, body) #header-secondary-outer #social li a.vimeo:hover {
	background-color: var(--scl-navy-700) !important;
}

/* Search overlay close hover, mobile menu icon (parent 1508, 1546) */
:is(#boxed, body) #search-outer > #search #close a:hover span,
:is(#boxed, body) #mobile-menu li.open > a [class^="icon-"] {
	color: var(--scl-navy-700) !important;
}

/* Sub-indicator (arrow) colors on current/ancestor menu items
   (parent 938, 942, 944) */
:is(#boxed, body) header#top nav .sf-menu li.current_page_item > a .sf-sub-indicator [class^="icon-"],
:is(#boxed, body) header#top nav .sf-menu li.current_page_ancestor > a .sf-sub-indicator [class^="icon-"],
:is(#boxed, body) .sf-menu > li.current_page_ancestor > a > .sf-sub-indicator [class^="icon-"],
:is(#boxed, body) .sf-menu > li.current-menu-ancestor > a > .sf-sub-indicator [class^="icon-"],
:is(#boxed, body) .sf-menu > li.current_page_item > a > .sf-sub-indicator [class^="icon-"],
:is(#boxed, body) .sf-menu ul li.current_page_item > a,
:is(#boxed, body) .sf-menu ul li.current-menu-ancestor > a,
:is(#boxed, body) .sf-menu ul li.current_page_ancestor > a {
	color: var(--scl-navy-700) !important;
}

/* Non-animated_underline hover color fallback (parent 919) */
:is(#boxed, body) #header-outer:not([data-lhe="animated_underline"]) header#top nav ul li a:hover,
:is(#boxed, body) #header-outer:not([data-lhe="animated_underline"]) header#top nav .sf-menu li.sfHover > a,
:is(#boxed, body) #header-outer:not([data-lhe="animated_underline"]) header#top nav .sf-menu li.current_page_ancestor > a,
:is(#boxed, body) #header-outer:not([data-lhe="animated_underline"]) header#top nav .sf-menu li.current-menu-item > a,
:is(#boxed, body) #header-outer:not([data-lhe="animated_underline"]) header#top nav .sf-menu li.current-menu-ancestor > a,
:is(#boxed, body) #header-outer:not([data-lhe="animated_underline"]) header#top nav .sf-menu li.current_page_item > a {
	color: var(--scl-navy-900) !important;
}

/* Transparent header button-solid pre-fill (parent 885) */
:is(#boxed, body) #header-outer.transparent header#top nav > ul > li[class*="button_solid_color"] > a::before {
	background-color: var(--scl-navy-700) !important;
}

/* .nectar-button stock default background (parent 1922) and other places
   that set border-color: #27CFC3 (parent 2277 and similar). nectar-button
   is already fully restyled in §7; this is a belt-and-braces sweep. */
:is(#boxed, body) .nectar-button[style*="#27CFC3"],
:is(#boxed, body) .nectar-button[style*="#27cfc3"] {
	background-color: var(--scl-navy-700) !important;
}

/* Any element the parent sets to the teal via inline or cascade */
:is(#boxed, body) [style*="color: #27CFC3"],
:is(#boxed, body) [style*="color:#27CFC3"] {
	color: var(--scl-navy-700) !important;
}
:is(#boxed, body) [style*="background-color: #27CFC3"],
:is(#boxed, body) [style*="background-color:#27CFC3"] {
	background-color: var(--scl-navy-700) !important;
}
:is(#boxed, body) [style*="border-color: #27CFC3"],
:is(#boxed, body) [style*="border-color:#27CFC3"] {
	border-color: var(--scl-navy-700) !important;
}

/* ==========================================================================
   Full teal sweep — every parent #27CFC3 / #27CCC0 rule in salient/style.css
   (71 refs, lines referenced as comments). Every surface is mapped to
   var(--scl-navy-700) = #2b445b.
   ========================================================================== */

/* Submenu teal (lines 2333, 2356, 2358) */
:is(#boxed, body) .sf-menu ul li.sfHover > a,
:is(#boxed, body) .sf-menu li ul li a:hover,
:is(#boxed, body) .sf-menu li ul li.sfHover > a {
	color: var(--scl-navy-700) !important;
	background-color: transparent !important;
}
:is(#boxed, body) .sf-menu li ul li.sfHover > a .sf-sub-indicator [class^="icon-"] {
	color: var(--scl-navy-700) !important;
}

/* see-through nectar-button hover teal (line 2277-78) */
:is(#boxed, body) .nectar-button.see-through-2:hover,
:is(#boxed, body) .col.dark .nectar-button.see-through-2:hover,
:is(#boxed, body) .nectar-button.see-through-3:hover,
:is(#boxed, body) .col.dark .nectar-button.see-through-3:hover {
	border-color: var(--scl-navy-700) !important;
	background-color: var(--scl-navy-700) !important;
	color: #fff !important;
}

/* Image hotspots (3782), carousel arrows (4129), flex-direction-nav (3887) */
:is(#boxed, body) .nectar_image_with_hotspots[data-stlye="color_pulse"] .nectar_hotspot,
:is(#boxed, body) .flex-direction-nav a,
:is(#boxed, body) .carousel-prev:hover,
:is(#boxed, body) .carousel-next:hover {
	background-color: var(--scl-navy-700) !important;
}

/* Home blog-recent (4143, 4148, 4177, 4192) */
:is(#boxed, body) .home .blog-recent .col .post-header h3 a,
:is(#boxed, body) .home .blog-recent .col .post-header a:hover,
:is(#boxed, body) .blog-recent[data-style="minimal"] .col > span,
:is(#boxed, body) .blog-recent[data-style="title_only"] .col:hover .post-header .title {
	color: var(--scl-navy-700) !important;
}

/* Back-to-top (5941), gallery hover (5949) */
:is(#boxed, body) #to-top:hover,
:is(#boxed, body) #to-top.dark:hover {
	background-color: var(--scl-navy-700) !important;
}
:is(#boxed, body) .gallery a:hover img {
	border-color: var(--scl-navy-700) !important;
}

/* CF7 marker (6805), search results title (7472) */
:is(#boxed, body) .wpcf7-form p span,
:is(#boxed, body) article.result .title a {
	color: var(--scl-navy-700) !important;
}

/* Icon defaults — ALL Salient icons render with a teal-chip background by
   default (7823, 7827, 7843). Kill at the source. */
:is(#boxed, body) [class^="icon-"],
:is(#boxed, body) i[class*=" icon-"] {
	background-color: var(--scl-navy-700);
}
:is(#boxed, body) [class^="icon-"].icon-3x.alt-style,
:is(#boxed, body) [class*=" icon-"].icon-3x.alt-style {
	background-color: var(--scl-navy-700) !important;
	color: #fff !important;
}
:is(#boxed, body) [class^="icon-"].icon-3x,
:is(#boxed, body) [class*=" icon-"].icon-3x,
:is(#boxed, body) .circle-border {
	color: var(--scl-navy-700);
}
:is(#boxed, body) [class^="icon-"].icon-default-style {
	color: var(--scl-navy-700) !important;
	background-color: transparent !important;
}
:is(#boxed, body) .col:not(.post-area):not(.span_12):not(#sidebar):hover .hovered .circle-border,
:is(#boxed, body) #sidebar .widget:hover .circle-border {
	border-color: var(--scl-navy-700) !important;
}
:is(#boxed, body) .col:not(.post-area):not(.span_12):not(#sidebar):hover [class^="icon-"].icon-3x.hovered,
:is(#boxed, body) .col:not(.post-area):not(.span_12):not(#sidebar):hover [class*=" icon-"].icon-3x.hovered,
:is(#boxed, body) #sidebar .widget:hover [class^="icon-"].icon-3x {
	background-color: var(--scl-navy-700) !important;
	color: #fff !important;
}

/* Animated title bg (7999), morphing-outline (8299, 8303), progress bar (8331) */
:is(#boxed, body) .nectar-animated-title .nectar-animated-title-inner:after,
:is(#boxed, body) .nectar-progress-bar span {
	background-color: var(--scl-navy-700) !important;
}
:is(#boxed, body) .morphing-outline .inner > * {
	color: var(--scl-navy-700) !important;
}
:is(#boxed, body) .morphing-outline .inner:after {
	border-color: var(--scl-navy-700) !important;
}

/* Tabs (8608), toggle open (9054), pricing highlight (9440, 9444) */
:is(#boxed, body) .tabbed > ul li a.active-tab {
	border-color: var(--scl-navy-700) !important;
	background-color: var(--scl-navy-700) !important;
	color: #fff !important;
}
:is(#boxed, body) .toggle.open h3 a {
	background-color: var(--scl-navy-700) !important;
	color: #fff !important;
}
:is(#boxed, body) .pricing-table[data-style="default"] .pricing-column.highlight h3 {
	background-color: var(--scl-navy-700) !important;
	color: #fff !important;
}
:is(#boxed, body) .pricing-column h3 {
	color: var(--scl-navy-700);
}

/* Footer link hover (9547), copyright social hovers (9570, 9574) */
:is(#boxed, body) #footer-outer a:hover {
	color: var(--scl-white) !important;
}
:is(#boxed, body) #footer-outer #copyright li a i:hover {
	color: var(--scl-white) !important;
}
:is(#boxed, body) #footer-outer #copyright li a.vimeo:hover,
:is(#boxed, body) #footer-outer #copyright li a.behance:hover,
:is(#boxed, body) #header-secondary-outer #social li a.behance:hover,
:is(#boxed, body) #header-secondary-outer #social li a.vimeo:hover {
	background-color: var(--scl-navy-600) !important;
}

/* Slide-out widget area (hamburger panel) — was a teal-filled panel.
   Lines 9677, 9679. Deep navy for a restrained, lawyer-feeling drawer. */
:is(#boxed, body) #slide-out-widget-area.slide-out-from-right,
:is(#boxed, body) #slide-out-widget-area.slide-out-from-right-hover {
	background-color: var(--scl-navy-900) !important;
}

/* Footer tagcloud hover (10447), footer submit (10461), CTA button (10485) */
:is(#boxed, body) #footer-outer #footer-widgets .col .tagcloud a:hover,
:is(#boxed, body) #footer-outer #footer-widgets .col input[type="submit"] {
	background-color: var(--scl-navy-700) !important;
}
:is(#boxed, body) #call-to-action .container a {
	background: var(--scl-navy-700) !important;
}

/* Sidebar widgets (10509, 10529) + post-tags base state override.
   colors.php applies the accent-color to BOTH .post-tags a (text color) and
   .post-tags a:before (navy chip background). With accent=navy, that's
   navy text on a navy chip → invisible. Force white text at higher
   specificity than the dynamic rules. */
:is(#boxed, body) .post-tags a,
:is(#boxed, body) .single .post-area .content-inner > .post-tags a,
:is(#boxed, body) .single.material .post-area .content-inner > .post-tags a,
:is(#boxed, body) #sidebar .widget .tagcloud a,
:is(#boxed, body) .material #sidebar .widget .tagcloud a,
:is(#boxed, body) .material .widget .tagcloud a {
	color: var(--scl-white) !important;
	background-color: var(--scl-navy-700) !important;
	border: 0 !important;
	border-radius: var(--scl-radius-xs) !important;
	padding: 6px 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
}

/* Hover: darker navy for pressed affordance, still white text */
:is(#boxed, body) .post-tags a:hover,
:is(#boxed, body) .single .post-area .content-inner > .post-tags a:hover,
:is(#boxed, body) #sidebar .widget .tagcloud a:hover,
:is(#boxed, body) .material .widget .tagcloud a:hover {
	background-color: var(--scl-navy-900) !important;
	color: var(--scl-white) !important;
}

/* The ::before pseudo that parent uses as the chip backdrop on Material
   skin — hide it; the `a` itself carries the chip bg now. */
:is(#boxed, body) .single .post-area .content-inner > .post-tags a:before,
:is(#boxed, body) .material #sidebar .widget .tagcloud a:before,
:is(#boxed, body) .material .widget .tagcloud a:before {
	display: none !important;
	background: transparent !important;
	content: none !important;
}

/* Footer tagcloud variant — parent paints dark gray (#1B1B1B), which looks
   ok against our navy footer but subtle; lift contrast. */
:is(#boxed, body) #footer-outer #footer-widgets .col .tagcloud a {
	color: var(--scl-white) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border-radius: var(--scl-radius-xs) !important;
	font-weight: 500 !important;
}
:is(#boxed, body) .recent_projects_widget a:hover img,
:is(#boxed, body) #sidebar #flickr a:hover img,
:is(#boxed, body) #footer-outer #flickr a:hover img {
	border-color: var(--scl-navy-700) !important;
}

/* Blog variants (10571, 10585, 10589, 10595, 10601, 10653, 10672, 10717) */
:is(#boxed, body) article.post .more-link span:hover,
:is(#boxed, body) .blog-recent .more-link span:hover {
	background-color: var(--scl-navy-700) !important;
}
:is(#boxed, body) .recent-posts .post-header a:hover,
:is(#boxed, body) .recent-posts .post-header .title a,
:is(#boxed, body) article.post .post-header h2 a,
:is(#boxed, body) #single-below-header a:hover,
:is(#boxed, body) article.post .post-meta a:hover {
	color: var(--scl-navy-700) !important;
}
:is(#boxed, body) article.post.quote .post-content .quote-inner,
:is(#boxed, body) article.post.link .post-content .link-inner,
:is(#boxed, body) article.format-status .post-content .status-inner,
:is(#boxed, body) article.post.format-aside .aside-inner,
:is(#boxed, body) article.post.quote .content-inner .whole-link {
	background-color: var(--scl-navy-700) !important;
}

/* WooCommerce pagination (10872), nectar love heart (10920) */
:is(#boxed, body) .woocommerce nav.woocommerce-pagination ul li a:active {
	background-color: var(--scl-navy-700) !important;
}
:is(#boxed, body) .nectar-love:hover i,
:is(#boxed, body) .nectar-love.loved i {
	color: var(--scl-navy-700) !important;
}

/* Comments (10953, 10955) */
:is(#boxed, body) .comment-list .comment-meta a:hover {
	color: var(--scl-navy-700) !important;
}
:is(#boxed, body) .comment-list .reply a:hover {
	background-color: var(--scl-navy-700) !important;
}

/* Form submits native (10974), label span (10987), minimal-form underline (11009) */
:is(#boxed, body) input[type="submit"]:hover,
:is(#boxed, body) button[type="submit"]:hover,
:is(#boxed, body) input[type="button"]:hover {
	background-color: var(--scl-navy-900) !important;
}
:is(#boxed, body) label span {
	color: var(--scl-navy-700) !important;
}
body[data-form-style="minimal"] .minimal-form-input label:after {
	border-bottom-color: var(--scl-navy-700) !important;
}

/* Fancy radio / checkbox (11097, 11099, 11115) */
body[data-fancy-form-rcs="1"] [type="radio"]:checked + label:before,
body[data-fancy-form-rcs="1"] [type="radio"]:checked + label:after {
	border-color: var(--scl-navy-700) !important;
}
body[data-fancy-form-rcs="1"] [type="radio"]:checked + label:after {
	background-color: var(--scl-navy-700) !important;
}
body[data-fancy-form-rcs="1"] input[type="checkbox"]:checked + label > span {
	border-color: var(--scl-navy-700) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. Accessibility + motion preferences
   ───────────────────────────────────────────────────────────────────────────── */
*:focus-visible {
	outline: 2px solid var(--scl-navy-700);
	outline-offset: 2px;
	border-radius: var(--scl-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}
}


/* ─────────────────────────────────────────────────────────────────────────────
   Responsive — tighten section rhythm on small screens
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 690px) {
	.container-wrap,
	.project-title {
		padding-top: clamp(40px, 10vw, 72px) !important;
		padding-bottom: clamp(40px, 10vw, 72px) !important;
	}

	.col.boxed,
	.wpb_column.boxed {
		padding: var(--scl-space-5) !important;
	}

	body .nectar-button {
		font-size: 0.75rem;
		padding: 14px 24px;
	}

	#footer-outer #footer-widgets {
		padding-top: var(--scl-space-7) !important;
		padding-bottom: var(--scl-space-7) !important;
	}
}


/* =============================================================================
   17. Mobile responsive fixes
   ============================================================================= */

/* ─── 17.1 Horizontal padding on mobile — content shouldn't touch viewport
            edges. Applied to the main content wrapper and header row. */
@media (max-width: 999px) {
	:is(#boxed, body) .container-wrap,
	:is(#boxed, body) .container-wrap > .main-content,
	:is(#boxed, body) .main-content {
		padding-left: 20px !important;
		padding-right: 20px !important;
		box-sizing: border-box;
	}

	:is(#boxed, body) header#top > .container,
	:is(#boxed, body) #header-outer header > .container,
	:is(#boxed, body) #search-outer > .container,
	:is(#boxed, body) #search-outer .container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	:is(#boxed, body) .post-area.col.span_9,
	:is(#boxed, body) #sidebar.col.span_3 {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 480px) {
	:is(#boxed, body) .container-wrap,
	:is(#boxed, body) .container-wrap > .main-content,
	:is(#boxed, body) .main-content,
	:is(#boxed, body) header#top > .container,
	:is(#boxed, body) #header-outer header > .container,
	:is(#boxed, body) #search-outer > .container,
	:is(#boxed, body) #search-outer .container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}


/* ─── 17.2 Page hero height — on mobile, cap at viewport proportions so
            a 840px floor doesn't produce a hero taller than the phone. */
@media (max-width: 999px) {
	:is(#boxed, body) #page-header-bg,
	:is(#boxed, body) #page-header-wrap,
	:is(#boxed, body) #page-header-bg.fullscreen-header,
	:is(#boxed, body) #page-header-wrap.fullscreen-header {
		height: clamp(320px, 50vh, 500px) !important;
	}

	:is(#boxed, body) .single-post #page-header-bg,
	:is(#boxed, body) .single-post #page-header-wrap {
		height: clamp(280px, 44vh, 440px) !important;
	}
}

@media (max-width: 480px) {
	:is(#boxed, body) #page-header-bg,
	:is(#boxed, body) #page-header-wrap {
		height: clamp(240px, 42vh, 360px) !important;
	}

	:is(#boxed, body) .single-post #page-header-bg,
	:is(#boxed, body) .single-post #page-header-wrap {
		height: clamp(220px, 38vh, 320px) !important;
	}
}


/* ─── 17.3 Slide-out widget area (hamburger panel) — menu items.
            Parent style.css:9822 sets font-size:36px, font-weight:700,
            letter-spacing:-1px. Without an explicit colour, they inherit
            our body-a navy, which on a navy panel = near-invisible.
            Force white text at a sane size. */
:is(#boxed, body) #slide-out-widget-area,
:is(#boxed, body) #slide-out-widget-area .inner,
:is(#boxed, body) #slide-out-widget-area .off-canvas-menu-container {
	color: rgba(255, 255, 255, 0.82) !important;
}

:is(#boxed, body) #slide-out-widget-area .inner .off-canvas-menu-container li a,
:is(#boxed, body) #slide-out-widget-area .inner .widget.widget_nav_menu li a,
:is(#boxed, body) #slide-out-widget-area.slide-out-from-right .inner .off-canvas-menu-container li a,
:is(#boxed, body) #slide-out-widget-area.slide-out-from-right-hover .inner .off-canvas-menu-container li a,
:is(#boxed, body) #slide-out-widget-area.fullscreen .inner .off-canvas-menu-container li a,
:is(#boxed, body) #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container li a {
	color: rgba(255, 255, 255, 0.82) !important;
	font-family: var(--scl-font-sans) !important;
	font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem) !important;
	line-height: 1.5 !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	padding: 10px 0 !important;
	opacity: 1 !important;
	background-image: none !important;
}

:is(#boxed, body) #slide-out-widget-area .inner .off-canvas-menu-container li a:hover,
:is(#boxed, body) #slide-out-widget-area .inner li.current_page_item > a,
:is(#boxed, body) #slide-out-widget-area .inner li.current-menu-item > a,
:is(#boxed, body) #slide-out-widget-area .inner li.current-menu-ancestor > a,
:is(#boxed, body) #slide-out-widget-area .inner li.current_page_ancestor > a {
	color: #ffffff !important;
}

/* Submenu items — slightly smaller, indented, muted */
:is(#boxed, body) #slide-out-widget-area .inner .off-canvas-menu-container li ul.sub-menu li a {
	font-size: 0.9375rem !important;
	color: rgba(255, 255, 255, 0.68) !important;
	padding-left: 16px !important;
}

/* Menuwrapper — generous vertical rhythm but not 36px line-height weirdness */
:is(#boxed, body) #slide-out-widget-area .inner .off-canvas-menu-container .menu > li {
	margin: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

:is(#boxed, body) #slide-out-widget-area .inner .off-canvas-menu-container .menu > li:last-child {
	border-bottom: 0;
}

/* The "Back" affordance in sub-menus — keep minimal */
:is(#boxed, body) #slide-out-widget-area .inner .off-canvas-menu-container li.back > a {
	font-size: 0.8125rem !important;
	color: rgba(255, 255, 255, 0.55) !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Close button on the drawer */
:is(#boxed, body) #slide-out-widget-area .slide_out_area_close {
	top: 24px !important;
	right: 24px !important;
	color: rgba(255, 255, 255, 0.7);
}

:is(#boxed, body) #slide-out-widget-area .slide_out_area_close:hover {
	color: #fff;
}


/* ─── 17.4 Mobile header — hamburger icon colour and spacing,
            header-outer padding, typography scaling for title/tagline. */
@media (max-width: 999px) {
	:is(#boxed, body) #header-outer {
		padding-top: 16px !important;
	}

	:is(#boxed, body) header#top #logo {
		font-size: 1.375rem !important;
	}

	/* Hamburger toggle icon */
	:is(#boxed, body) #header-outer .slide-out-widget-area-toggle .lines,
	:is(#boxed, body) #header-outer .slide-out-widget-area-toggle .lines::before,
	:is(#boxed, body) #header-outer .slide-out-widget-area-toggle .lines::after {
		background-color: var(--scl-navy-700) !important;
	}
}


/* ─── 17.5 Blog cards & first section — mobile tuning */
@media (max-width: 690px) {
	/* Blog list cards: image full width, content stacked, smaller meta */
	:is(#boxed, body) .post-area .post .post-featured-img,
	:is(#boxed, body) .post-area .post .post-featured-img a {
		aspect-ratio: 16 / 10;
	}

	:is(#boxed, body) .post-area .post .post-header h2,
	:is(#boxed, body) .post-area .post .post-header h3 {
		font-size: 1.25rem !important;
	}

	/* Homepage first section: remove forced heights on mobile, let
	   content drive the height naturally (portrait might stack below text) */
	:is(#boxed, body) .wpb_row.first-section {
		max-height: none !important;
		padding-top: clamp(24px, 6vw, 40px) !important;
		padding-bottom: clamp(24px, 6vw, 40px) !important;
	}

	:is(#boxed, body) .wpb_row.first-section .img-with-animation-wrap,
	:is(#boxed, body) .wpb_row.first-section .img-with-aniamtion-wrap,
	:is(#boxed, body) .wpb_row.first-section .img-with-animation-wrap img,
	:is(#boxed, body) .wpb_row.first-section .img-with-aniamtion-wrap img,
	:is(#boxed, body) .wpb_row.first-section .img-with-animation {
		max-height: clamp(280px, 40vh, 360px) !important;
		margin: 0 auto;
	}

	:is(#boxed, body) .wpb_row.first-section.vc_row-flex > .vc_col-sm-4,
	:is(#boxed, body) .wpb_row.first-section.vc_row-flex > .vc_col-sm-4 > .vc_column-inner {
		max-height: clamp(280px, 40vh, 360px) !important;
	}

	/* Heading sizes — scale down on phones */
	:is(#boxed, body) body.home .wpb_row.first-section h1,
	:is(#boxed, body) body.home .wpb_row.first-section h2,
	:is(#boxed, body) body.home .wpb_row.first-section h3 {
		font-size: clamp(1.5rem, 1.25rem + 1.5vw, 1.875rem) !important;
	}

	:is(#boxed, body) .single-post .section-title.blog-title .entry-title,
	:is(#boxed, body) #page-header-bg h1 {
		font-size: clamp(1.5rem, 1.3rem + 1.4vw, 2rem) !important;
	}
}


/* ─── 17.6 Sidebar on mobile — collapse margin, full width, less padding */
@media (max-width: 999px) {
	:is(#boxed, body) #sidebar {
		margin-top: var(--scl-space-7) !important;
	}

	:is(#boxed, body) #sidebar .widget {
		padding: var(--scl-space-5) !important;
	}
}


/* ─── 17.7 Tags / filed-under row — wrap gracefully on narrow widths */
@media (max-width: 480px) {
	:is(#boxed, body) .post-tags,
	:is(#boxed, body) .scl-post-categories {
		flex-wrap: wrap;
		gap: 0.375rem 0.5rem;
	}

	:is(#boxed, body) .post-tags a,
	:is(#boxed, body) .scl-post-categories .meta-category a {
		font-size: 0.6875rem !important;
	}
}


/* =============================================================================
   18. Narrow-desktop band (1000-1440px) — 13" MacBook Pro, smaller laptops,
       browser-window thirds on a bigger screen. At this range the container
       fills the viewport edge-to-edge (since 1440 cap isn't reached), the
       hero clamp floors at ~840px which is taller than the viewport itself,
       and the first-section feels overstuffed.
   ============================================================================= */

@media (min-width: 1000px) and (max-width: 1440px) {

	/* Add a responsive gutter on all primary content wrappers so content
	   doesn't touch the viewport edge. Scale 24-48px fluidly with viewport.
	   Leaves the header row's natural flex width intact. */
	:is(#boxed, body) .container-wrap > .main-content,
	:is(#boxed, body) .container-wrap > .container,
	:is(#boxed, body) #header-outer header > .container,
	:is(#boxed, body) #search-outer > .container,
	:is(#boxed, body) #search-outer .container {
		padding-left: clamp(24px, 3vw, 48px) !important;
		padding-right: clamp(24px, 3vw, 48px) !important;
		box-sizing: border-box;
	}

	/* Footer widgets + copyright — same gutter for visual alignment */
	:is(#boxed, body) #footer-outer #footer-widgets,
	:is(#boxed, body) #footer-outer #copyright {
		padding-left: clamp(24px, 3vw, 48px) !important;
		padding-right: clamp(24px, 3vw, 48px) !important;
	}

	/* Page hero — scale down proportionally so it doesn't exceed viewport */
	:is(#boxed, body) #page-header-bg,
	:is(#boxed, body) #page-header-wrap,
	:is(#boxed, body) #page-header-bg.fullscreen-header,
	:is(#boxed, body) #page-header-wrap.fullscreen-header {
		height: clamp(500px, 68vh, 720px) !important;
	}

	:is(#boxed, body) .single-post #page-header-bg,
	:is(#boxed, body) .single-post #page-header-wrap {
		height: clamp(440px, 55vh, 600px) !important;
	}

	/* Homepage first section — was maxing to clamp(480,58vh,620)+ the
	   portrait cap pushed 840px. Bring to a 13"-friendly 420-540px. */
	:is(#boxed, body) .wpb_row.first-section {
		max-height: clamp(420px, 58vh, 560px) !important;
	}

	:is(#boxed, body) .wpb_row.first-section .img-with-animation-wrap,
	:is(#boxed, body) .wpb_row.first-section .img-with-aniamtion-wrap,
	:is(#boxed, body) .wpb_row.first-section .img-with-animation-wrap img,
	:is(#boxed, body) .wpb_row.first-section .img-with-aniamtion-wrap img,
	:is(#boxed, body) .wpb_row.first-section .img-with-animation {
		max-height: clamp(380px, 52vh, 500px) !important;
	}

	:is(#boxed, body) .wpb_row.first-section.vc_row-flex > .vc_col-sm-4,
	:is(#boxed, body) .wpb_row.first-section.vc_row-flex > .vc_col-sm-4 > .vc_column-inner {
		max-height: clamp(380px, 52vh, 500px) !important;
	}

	/* Typography — tighten the huge serif display so the H1 doesn't
	   dominate the viewport on these smaller laptop screens. */
	:is(#boxed, body) #page-header-bg h1,
	:is(#boxed, body) #page-header-bg .page-header-title {
		font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem) !important;
	}

	:is(#boxed, body) .single-post .section-title.blog-title .entry-title {
		font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) !important;
	}

	/* Container-wrap top/bottom rhythm — tighten section pad */
	:is(#boxed, body) .container-wrap,
	:is(#boxed, body) .project-title {
		padding-top: clamp(40px, 5vw, 80px) !important;
		padding-bottom: clamp(40px, 5vw, 80px) !important;
	}

	/* Sidebar widgets — slightly less padding to fit the narrower grid */
	:is(#boxed, body) #sidebar .widget {
		padding: clamp(16px, 1.5vw, 24px) !important;
	}
}

/* Just the narrow band 1000-1200 needs an extra nudge — tighter paddings,
   smaller headings, more compact category widget. */
@media (min-width: 1000px) and (max-width: 1200px) {
	:is(#boxed, body) .container-wrap > .main-content,
	:is(#boxed, body) .container-wrap > .container,
	:is(#boxed, body) #header-outer header > .container,
	:is(#boxed, body) #search-outer > .container,
	:is(#boxed, body) #search-outer .container,
	:is(#boxed, body) #footer-outer #footer-widgets,
	:is(#boxed, body) #footer-outer #copyright {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	:is(#boxed, body) #page-header-bg,
	:is(#boxed, body) #page-header-wrap {
		height: clamp(440px, 58vh, 600px) !important;
	}

	:is(#boxed, body) .single-post #page-header-bg,
	:is(#boxed, body) .single-post #page-header-wrap {
		height: clamp(380px, 48vh, 520px) !important;
	}

	:is(#boxed, body) .wpb_row.first-section {
		max-height: clamp(380px, 52vh, 500px) !important;
	}

	/* Sidebar category list tighter per row on narrow laptops */
	:is(#boxed, body) #sidebar .widget_categories ul li,
	:is(#boxed, body) #sidebar .widget_links ul li {
		padding: 5px 0 !important;
		font-size: 0.75rem !important;
	}

	/* Blog list card — avoid running into sidebar */
	:is(#boxed, body) .post-area.col.span_9 {
		padding-right: var(--scl-space-5);
	}
}


/* =============================================================================
   16. Comprehensive polish (PDF review pass)
   ============================================================================= */

/* ─── 16.1  Homepage hero — bump the "Experts on Anglo-German Law" heading
             and tighten the phone/email icon row. */
:is(#boxed, body) body.home .wpb_row.first-section h1,
:is(#boxed, body) body.home .wpb_row.first-section h2,
:is(#boxed, body) body.home .wpb_row.first-section h3 {
	font-family: var(--scl-font-display) !important;
	font-weight: 500 !important;
	letter-spacing: -0.015em !important;
	color: var(--scl-navy-700) !important;
	font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem) !important;
	line-height: 1.1 !important;
	margin-bottom: var(--scl-space-4) !important;
}

:is(#boxed, body) body.home .wpb_row.first-section p {
	font-size: 1rem !important;
	line-height: 1.7 !important;
}

:is(#boxed, body) body.home .wpb_row.first-section .divider-wrap {
	margin: var(--scl-space-2) 0 var(--scl-space-3);
}

/* Phone / email icon+text row — align icon with text, tighter */
:is(#boxed, body) body.home .iwithtext {
	display: flex !important;
	align-items: center !important;
	gap: 12px;
	margin: 0 !important;
}
:is(#boxed, body) body.home .iwithtext .iwt-icon {
	flex: 0 0 auto;
	margin: 0 !important;
}
:is(#boxed, body) body.home .iwithtext .iwt-text {
	flex: 1;
	margin: 0 !important;
}
:is(#boxed, body) body.home .iwithtext .iwt-text h5 {
	font-family: var(--scl-font-sans) !important;
	font-size: 0.9375rem !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin: 0 !important;
	color: var(--scl-navy-700) !important;
	font-weight: 600 !important;
}
:is(#boxed, body) body.home .iwithtext .iwt-text h5 a {
	color: inherit !important;
}

/* Clear legacy Salient `.iwithtext .clear` that adds a float clear */
:is(#boxed, body) body.home .iwithtext .clear {
	display: none;
}


/* ─── 16.2  Single post — generous editorial reading rhythm.
             Raise H2/H3 margin-top, consistent paragraph spacing,
             larger body copy, blockquote polish. */
.single-post .post-area,
.single-post .post-area .post,
.single-post .post-area .post .post-content,
.single-post .entry-content {
	font-size: 1.0625rem !important;   /* 17px */
	line-height: 1.75 !important;
	color: var(--scl-text) !important;
}

.single-post .post-content p,
.single-post .entry-content p {
	margin-bottom: 1.5rem !important;
}

.single-post .post-content h2,
.single-post .entry-content h2,
.single-post .post-area h2 {
	margin-top: clamp(2.25rem, 3.5vw, 3.25rem) !important;
	margin-bottom: 1.125rem !important;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) !important;
	letter-spacing: -0.015em !important;
	line-height: 1.2 !important;
}

.single-post .post-content h3,
.single-post .entry-content h3,
.single-post .post-area h3 {
	margin-top: clamp(1.75rem, 2.5vw, 2.5rem) !important;
	margin-bottom: 0.875rem !important;
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem) !important;
	letter-spacing: -0.01em !important;
	line-height: 1.25 !important;
}

.single-post .post-content h4,
.single-post .entry-content h4 {
	margin-top: 1.75rem !important;
	margin-bottom: 0.625rem !important;
	font-size: 1.0625rem !important;
	font-family: var(--scl-font-sans) !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--scl-navy-700) !important;
}

/* Heading immediately after a heading — tighten so H2 -> H3 doesn't yawn */
.single-post .post-content h2 + h3,
.single-post .post-content h2 + h4,
.single-post .post-content h3 + h4,
.single-post .entry-content h2 + h3,
.single-post .entry-content h2 + h4,
.single-post .entry-content h3 + h4 {
	margin-top: 0.5rem !important;
}

/* Lists inside post content */
.single-post .post-content ul:not([class]),
.single-post .post-content ol:not([class]),
.single-post .entry-content ul:not([class]),
.single-post .entry-content ol:not([class]) {
	margin-bottom: 1.5rem !important;
	padding-left: 1.5em !important;
}

.single-post .post-content ul:not([class]) li,
.single-post .post-content ol:not([class]) li,
.single-post .entry-content ul:not([class]) li,
.single-post .entry-content ol:not([class]) li {
	margin-bottom: 0.5rem !important;
	line-height: 1.7 !important;
}

/* Blockquote inside post content — pull left a bit more, bigger type */
.single-post .post-content blockquote,
.single-post .entry-content blockquote {
	margin: 2rem 0 !important;
	padding: 0.5rem 0 0.5rem 1.75rem !important;
	border-left: 3px solid var(--scl-navy-700);
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem) !important;
	line-height: 1.55 !important;
	color: var(--scl-navy-700) !important;
	font-family: var(--scl-font-serif) !important;
	font-style: italic;
}

/* Featured image inline in post — subtle frame + vertical rhythm */
.single-post .post-content img,
.single-post .entry-content img,
.single-post .post-featured-img img {
	border-radius: var(--scl-radius-xs);
	margin: 0.75rem 0 2rem;
	max-width: 100%;
	height: auto;
}


/* ─── 16.3  Single post byline row — remove the heavy border-top I added
             earlier, replace with a subtle gray divider and better spacing. */
.single-post #single-below-header,
.blog-title #single-below-header {
	border-top: 0 !important;
	padding-top: 0 !important;
	margin-top: 0.5rem !important;
	margin-bottom: 2rem !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--scl-space-4);
	padding-bottom: var(--scl-space-3);
	border-bottom: 1px solid var(--scl-border);
	font-size: 0.75rem !important;
}

.single-post #single-below-header > span {
	display: inline-flex;
	align-items: center;
}

.single-post #single-below-header .meta-author,
.single-post #single-below-header .meta-date,
.single-post #single-below-header .meta-category {
	font-size: 0.75rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--scl-text-subtle) !important;
	margin: 0 !important;
}

.single-post #single-below-header .meta-author .fn a {
	color: var(--scl-navy-700) !important;
	font-weight: 600;
	background-image: none !important;
}

.single-post #single-below-header .meta-category a {
	color: var(--scl-navy-600) !important;
	background-image: none !important;
}

.single-post #single-below-header .meta-category a:hover {
	color: var(--scl-navy-900) !important;
}

/* Separator dots between meta items */
.single-post #single-below-header > span + span::before {
	content: "·";
	margin-right: var(--scl-space-3);
	color: var(--scl-gray-400);
}

.single-post #single-meta {
	margin-top: 0 !important;
}


/* ─── 16.4  Blog list cards (homepage + archive pages) — clean,
             uniform aspect ratios, tighter meta, clearer author byline. */
.post-area .post .post-featured-img,
.post-area .post .post-featured-img a {
	display: block;
	overflow: hidden;
	border-radius: var(--scl-radius-xs);
	aspect-ratio: 4 / 3;
	background-color: var(--scl-gray-100);
}

.post-area .post .post-featured-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--scl-duration-long) var(--scl-ease);
}

.post-area .post:hover .post-featured-img img {
	transform: scale(1.03);
}

/* Blog list card — move meta-category to the BOTTOM of each card.
   HTML order: .entire-meta-link (absolute), .meta-category, .post-header,
   .excerpt, .grav-wrap. We flex-column the wrap and assign order values
   so meta-category renders last (below the author/date byline), with a
   subtle top divider for visual separation. */
.post-area .post .post-content-wrap {
	display: flex;
	flex-direction: column;
}

.post-area .post .post-content-wrap > .post-header     { order: 1; }
.post-area .post .post-content-wrap > .excerpt         { order: 2; }
.post-area .post .post-content-wrap > .grav-wrap       { order: 3; }
.post-area .post .post-content-wrap > span.meta-category,
.post-area.featured_img_left article .post-content-wrap > .meta-category {
	order: 4;
	display: block !important;
	margin-top: var(--scl-space-4) !important;
	margin-bottom: 0 !important;
	padding-top: var(--scl-space-3) !important;
	border-top: 1px solid var(--scl-border);
	color: var(--scl-text-subtle) !important;
	font-size: 0.75rem !important;
}

/* .entire-meta-link stays position:absolute — unaffected by flex order. */

.post-area .post .post-header h2 {
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem) !important;
	line-height: 1.2 !important;
	margin-bottom: var(--scl-space-3) !important;
	margin-top: 0 !important;
}

.post-area .post .post-content p,
.post-area .post .excerpt {
	font-size: 0.9375rem !important;
	line-height: 1.65 !important;
	color: var(--scl-text) !important;
	margin-bottom: var(--scl-space-4) !important;
}

/* Author byline at bottom of card */
.post-area .post .post-author,
.post-area .post .author-section,
.post-area .post .post-meta {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	margin-top: var(--scl-space-3) !important;
	font-size: 0.75rem !important;
	color: var(--scl-text-muted) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.post-area .post .post-author img,
.post-area .post .author-section img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.post-area .post .post-author a,
.post-area .post .author-section a {
	color: var(--scl-navy-700) !important;
	font-weight: 600;
	background-image: none !important;
}

/* Posts separated by generous hairline, no heavy borders */
.post-area .post,
.post-area article.post {
	padding-bottom: clamp(40px, 5vw, 64px) !important;
	margin-bottom: clamp(40px, 5vw, 64px) !important;
	border-bottom: 1px solid var(--scl-border) !important;
}


/* ─── 16.5  Sidebar widget polish — bigger gaps, simpler category list. */
#sidebar,
.sidebar {
	padding-top: 0;
}

#sidebar .widget {
	margin-bottom: clamp(24px, 3vw, 40px) !important;
	padding: clamp(20px, 2vw, 28px) !important;
	background: var(--scl-white);
	border: 1px solid var(--scl-border);
	border-radius: var(--scl-radius-xs);
}

#sidebar .widget h4,
#sidebar .widget .widgettitle,
#sidebar .widget .widget-title {
	font-family: var(--scl-font-sans) !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--scl-navy-700) !important;
	margin-bottom: var(--scl-space-4) !important;
	padding-bottom: var(--scl-space-3) !important;
	border-bottom: 1px solid var(--scl-border) !important;
	position: relative;
}

#sidebar .widget h4::after,
#sidebar .widget .widgettitle::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 1px;
	width: 28px;
	background-color: var(--scl-navy-500);
}

/* Category list — clean rows, no individual borders per item */
#sidebar .widget_categories ul,
#sidebar .widget_links ul,
#sidebar .widget_nav_menu ul,
#sidebar .widget ul.nectar_widget {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

#sidebar .widget_categories ul li,
#sidebar .widget_links ul li,
#sidebar .widget_nav_menu ul li,
#sidebar .widget ul.nectar_widget > li {
	display: block;
	padding: 7px 0 !important;
	border-bottom: 1px solid var(--scl-gray-100) !important;
	font-size: 0.8125rem !important;
	line-height: 1.4 !important;
	background: transparent !important;
}

#sidebar .widget_categories ul li:last-child,
#sidebar .widget_links ul li:last-child {
	border-bottom: 0 !important;
}

#sidebar .widget_categories ul li a,
#sidebar .widget_links ul li a,
#sidebar .widget_nav_menu ul li a {
	color: var(--scl-text) !important;
	background-image: none !important;
	display: inline-block;
	transition: color var(--scl-duration-short) var(--scl-ease),
	            padding-left var(--scl-duration-short) var(--scl-ease) !important;
}

#sidebar .widget_categories ul li a:hover,
#sidebar .widget_links ul li a:hover,
#sidebar .widget_nav_menu ul li a:hover {
	color: var(--scl-navy-700) !important;
	padding-left: 4px;
}

/* ──── Contact widget — phone / email rows aligned on a single baseline.
   Parent Salient CSS uses absolute-positioning for the icon (left:0; top:0)
   and padding-left:55px on the text — we need to unwind BOTH to make the
   flex row work and keep icon + text vertically centred as a unit. Also
   overrides broken inline styles in the widget markup
   (style="text-align: left  color:#203b59;" and style="margin-top:20px"). */
#sidebar .widget .iwithtext,
#sidebar .widget_text .iwithtext,
#sidebar .widget_custom_html .iwithtext {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 0 var(--scl-space-3) 0 !important;
	padding: 0 !important;
	position: static !important;       /* defeats parent position:relative */
}

#sidebar .widget .iwithtext:last-child,
#sidebar .widget_text .iwithtext:last-child,
#sidebar .widget_custom_html .iwithtext:last-child {
	margin-bottom: 0 !important;
}

/* Icon: undo parent's position:absolute / left:0 / top:0 so it stays in
   flex flow next to the text, not overlapping it. */
#sidebar .widget .iwithtext .iwt-icon {
	position: static !important;
	left: auto !important;
	top: auto !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Text: undo parent's padding-left:55px — the flex `gap` handles spacing. */
#sidebar .widget .iwithtext .iwt-text {
	flex: 1 1 auto !important;
	margin: 0 !important;             /* defeats inline style="margin-top:20px" */
	padding: 0 !important;             /* defeats parent padding-left:55px */
	min-width: 0;                      /* allow flex child to shrink */
}

#sidebar .widget .iwithtext .iwt-text h5 {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--scl-font-sans) !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.35 !important;
	color: var(--scl-navy-700) !important;  /* beats inline style="...color:#203b59;" */
	text-align: left !important;
}

#sidebar .widget .iwithtext .iwt-text h5 a {
	color: inherit !important;
	background-image: none !important;
}

/* The stray .clear div Salient appends at the end of iwithtext — not
   needed when we're in flex layout. */
#sidebar .widget .iwithtext .clear {
	display: none !important;
}


/* ──── Our Offices widget — tighten vertical rhythm between city blocks.
   Two offices share one widget; between them sits a literal <p>&nbsp;</p>
   which JS strips at runtime (see functions.php), and we also tighten p
   and h6 margins so the widget reads as two neat city cards. */
#sidebar .widget_text .textwidget {
	font-size: 0.875rem;
	line-height: 1.55;
}

#sidebar .widget_text .textwidget > * + * {
	margin-top: 0.25rem;
}

#sidebar .widget_text .textwidget h6 {
	margin-top: var(--scl-space-4) !important;
	margin-bottom: var(--scl-space-2) !important;
	font-family: var(--scl-font-sans) !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--scl-navy-700) !important;
	line-height: 1.2 !important;
	padding-bottom: 0 !important;
	border-bottom: 0 !important;
}

#sidebar .widget_text .textwidget h6:first-child,
#sidebar .widget_text .textwidget > h6:first-of-type {
	margin-top: 0 !important;
}

#sidebar .widget_text .textwidget p {
	margin: 0 0 0.25rem 0 !important;
	padding: 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.55 !important;
	color: var(--scl-text) !important;
}

#sidebar .widget_text .textwidget p:last-child {
	margin-bottom: 0 !important;
}


/* ─── 16.6  Quiz / CTA form on single post (Step 1 of 8 progress). */
.single-post .entry-content .nectar-progress-bar,
.single-post .entry-content .nectar_progress_bar {
	background-color: var(--scl-gray-200) !important;
	border-radius: var(--scl-radius-pill) !important;
	overflow: hidden;
	height: 6px;
}

.single-post .entry-content .nectar-progress-bar span,
.single-post .entry-content .nectar_progress_bar span {
	background-color: var(--scl-navy-700) !important;
	border-radius: var(--scl-radius-pill) !important;
	height: 100% !important;
}

/* Any embedded inline form blocks should have subtle frame */
.single-post .entry-content form,
.single-post .post-content form {
	padding: clamp(16px, 2vw, 24px);
	background: var(--scl-gray-50);
	border-radius: var(--scl-radius-md);
	margin: 1.5rem 0;
}

/* In-content emphasis: italic contributor line at bottom */
.single-post .entry-content p em,
.single-post .post-content p em,
.single-post .entry-content p i,
.single-post .post-content p i {
	color: var(--scl-text-muted);
}


/* ─── 16.7  Comments area (if present) */
#respond,
#comments {
	margin-top: clamp(2rem, 4vw, 3.5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--scl-border);
}

#respond h3,
#comments h3 {
	margin-bottom: 1rem;
}

#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
	width: 100%;
	max-width: 640px;
}


/* ─── 16.8  Pagination — center, generous vertical rhythm. */
.pagination,
#pagination,
.woocommerce-pagination,
.post-area .pagination {
	text-align: center;
	padding: clamp(2rem, 4vw, 3.5rem) 0 !important;
	margin-top: clamp(1rem, 2vw, 2rem);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}


/* ─── 16.9  Featured image / page-header-bg — never crop faces.
             object-position was "center top" which is good for portraits
             but risks clipping in landscape shots. Bias the post-area
             images toward center-center, hero image toward top. */
.post-area .post .post-featured-img img,
.post-area article.post .post-featured-img img {
	object-position: center center;
}


/* ─── 16.10  Divider under widget titles (.nectar-fancy-title) — align
              with our brand palette. */
.nectar-fancy-title[data-style="underline"] span::after,
.nectar-fancy-title .line {
	background-color: var(--scl-navy-700) !important;
	height: 2px !important;
}

/* ─── 16.11  Relocated single-post categories (moved by JS in functions.php
              from the top header block to the bottom of the article). Reads
              as a "Filed under" footer next to the tags. */
.single-post .scl-post-categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	margin-bottom: var(--scl-space-5);
	padding-top: var(--scl-space-5);
	border-top: 1px solid var(--scl-border);
}

.single-post .scl-post-categories-label {
	font-family: var(--scl-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scl-text-subtle);
	margin-right: var(--scl-space-3);
	flex-shrink: 0;
}

/* The relocated .meta-category span displays inline with the label.
   Individual <a> anchors inside still pick up their styling from the
   generic meta-category rule (uppercase, navy-600, dotted separators). */
.single-post .scl-post-categories .meta-category {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Hide the now-empty meta-category placeholder that might remain in
   #single-below-header after we've moved the node. No-op if the JS
   successfully removed it; guard against race conditions. */
.single-post #single-below-header .meta-category:empty {
	display: none !important;
}

/* Tidy the top byline after removing categories — if only author+date
   remain, the flex row needs no adjustment but the separator dot logic
   might leave a trailing "·" from my earlier rule. Re-scope: */
.single-post #single-below-header > span.meta-category {
	display: none !important;   /* hide the original even if JS hasn't moved it yet, to avoid a flash */
}