/*------------------------------------------------------------------
Editorial Dark Theme
Version: 0.1.0
Author: Bob Werner (generated)

Inspired by The Intercept's editorial design system.
One accent color controlled via --accent cascades everywhere.

To switch accent color, change the single --accent value on :root.

-------------------------------------------------------------------*/

/* ═══════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — Change --accent to re-theme everything
   ═══════════════════════════════════════════════════════════════════ */
:root {
	--accent: #0891B2;           /* reactor cyan — luminous, AA on both black & white */
	--accent-hover: #077F9C;     /* slightly darker for hover states */
	--accent-deep: #011F27;      /* very dark accent — stipple/hero backgrounds */
	--bg-primary: #FFFFFF;       /* white page background (light default) */
	--bg-secondary: #F5F5F5;     /* slightly darker for cards/sections */
	--bg-tertiary: #EBEBEB;      /* footer, alt sections */
	--text-primary: #1A1A1A;     /* near-black body text */
	--text-secondary: #666666;   /* muted text, captions */
	--text-heading: #111111;     /* headlines */
	--border-color: #DDDDDD;     /* dividers, rules */
}

/* ═══════════════════════════════════════════════════════════════════
   1. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&display=swap');

body {
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.85;
	color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6,
input, button, .button, select, textarea,
.project-title, .product-title, .project-description,
.font-alt-1,
.header .navigation > ul > li > a,
.side-navigation > ul > li > a,
.overlay-navigation > ul > li > a,
.grid-filter-menu a {
	font-family: 'Barlow Condensed', 'Impact', 'Arial Narrow', sans-serif;
}

/* Links */
a, p a, .box a:not(.button) {
	color: var(--accent);
}
a:hover, p a:hover, .box a:not(.button):hover,
.social-list li a:hover, .post-info a:hover,
.widget a:hover, .team-1 .social-list a:hover,
.team-2 .social-list a:hover,
.side-navigation-footer .social-list a:hover,
.accordion li a:hover, .accordion li.active a,
.tabs li a:hover, .tabs li.active a, .tabs li.active a:hover,
.blog-masonry .with-background .post-read-more a:hover,
.overlay-navigation-wrapper .navigation-hide a,
.post-info-over a:hover, .post-info-over a:hover span,
.post-author-aside a:hover, .post-love a:hover,
.post-love a:hover span, .navigation-hide a,
.footer .social-list a:hover,
.scroll-to-top a:hover,
.footer .list-group a:hover + .post-info .post-date,
#tml-exit, .scroll-down a:hover,
.footer .navigation a:hover,
.footer .footer-top a:hover {
	color: var(--accent-hover);
}
a:hover .text-line,
a.animated-link:hover .text-line,
.accordion li a:hover .text-line,
.tabs li a:hover .text-line,
.blog-masonry .with-background .post-read-more a:hover .text-line {
	background-color: var(--accent);
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--text-heading);
}
h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover {
	color: var(--accent);
}
.footer h1, .footer h1 a,
.footer h2, .footer h2 a,
.footer h3, .footer h3 a,
.footer h4, .footer h4 a,
.footer h5, .footer h5 a,
.footer h6, .footer h6 a {
	color: var(--text-secondary);
}
h1  { font-size: 4.5rem; }
h2  { font-size: 3.3rem; }
h3  { font-size: 2.3rem; }
h4  { font-size: 1.8rem; }
h5  { font-size: 1.6rem; }
h6  { font-size: 1.2rem; }

[class*="intro-title-"] h1,
.featured-media h1,
[class*="intro-title-"] h2,
.featured-media h2 {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Lead */
.lead, blockquote.large {
	font-size: 2rem;
	font-weight: 300;
	color: var(--text-primary);
}

/* Widget Text */
.widget-title  { font-size: 2rem; }
.widget a      { font-size: 1.3rem; color: var(--text-secondary); }

/* Blog Titles */
h2.post-title {
	margin-bottom: 3rem;
	font-weight: 800;
}
.blog-masonry h2.post-title {
	margin-bottom: 0;
	font-size: 3rem;
	text-transform: none;
	display: block;
}
.blog-masonry.masonry-set-dimensions h2 { font-size: 1.8rem; }
.blog-masonry.masonry-set-dimensions h2 a,
.blog-masonry.masonry-set-dimensions .post-read-more a { color: var(--text-heading); }
.blog-regular .post-title,
.blog-wide .post-title { font-size: 4rem; }
.single-post-tags .tags-title { font-size: 1.3rem; }
h3.widget-title { font-size: 1.6rem; }

/* Team */
.team-1 h3, .team-2 h3 { margin-top: 0.5rem; }
.team-1 h6.occupation, .team-2 h6.occupation { margin-bottom: 0.3rem; }

/* Project Title */
h4.project-title { font-size: 1.4rem; }
.overlay-info .project-description { font-size: 1.2rem; opacity: 0.7; }

/* Rollover */
.overlay-info > span > span {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: var(--text-heading);
}

/* Footer Text */
.footer h4   { font-size: 1.5rem; color: var(--text-secondary); }
.footer .copyright { font-size: 1.1rem; }
.footer p    { font-size: 1.2rem; color: var(--text-secondary); }
.footer a    { color: var(--text-secondary); }

/* Lead */
.lead { font-size: 2rem; }

/* Title Classes */
.title-xlarge { font-size: 8rem; }
.tms-caption.scale.title-xlarge, .tmp-content .title-xlarge {
	font-size: 8rem; line-height: 7.5rem;
}
.title-large { font-size: 6.2rem; }
.tms-caption.scale.title-large, .tmp-content .title-large {
	font-size: 6.2rem; line-height: 5.7rem;
}
.title-medium { font-size: 3rem; }
.title-small  { font-size: 1.1rem; }

/* Text Classes */
.text-xlarge { font-size: 4.6rem; line-height: 1.4; }
.text-large  { font-size: 4rem;   line-height: 1.4; }
.text-medium { font-size: 2.4rem; line-height: 1.4; }
.text-small  { font-size: 1.6rem; line-height: 1.4; }

.weight-light { font-weight: 300; }
.weight-bold  { font-weight: 800; }

@media only screen and (max-width: 768px) {
	h1, .title-xlarge { font-size: 4rem; }
	h2, .title-large  { font-size: 2.8rem; }
	h3  { font-size: 1.8rem; }
	h4  { font-size: 1.5rem; }
	h5  { font-size: 1.3rem; }
	h6  { font-size: 1.1rem; }
	.blog-regular .post-title,
	.blog-wide .post-title { font-size: 3rem; }
	.lead { font-size: 1.7rem; }
	.text-xlarge { font-size: 3.1rem; }
	.text-large  { font-size: 2.5rem; }
	.text-medium { font-size: 1.9rem; }
	.text-small  { font-size: 1.1rem; }
	.fullscreen-section .background-on-mobile {
		background: var(--bg-secondary);
	}
	.fullscreen-section .background-on-mobile * {
		color: var(--text-primary) !important;
	}
	.fullscreen-section .background-on-mobile h1,
	.fullscreen-section .background-on-mobile h2,
	.fullscreen-section .background-on-mobile h3,
	.fullscreen-section .background-on-mobile h4,
	.fullscreen-section .background-on-mobile h5,
	.fullscreen-section .background-on-mobile h6 {
		color: var(--text-heading) !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   2. BACKGROUND COLOR & COLOR CLASSES — Dark Mode Overrides
   ═══════════════════════════════════════════════════════════════════ */

body,
.content,
.section-block:not([class*="bkg-"]),
.fullscreen-sections-wrapper {
	background-color: var(--bg-primary);
}
/* Hero: prevent white flash before slider image loads */
.featured-media,
.tm-slider-parallax-container {
	background-color: #111111 !important;
}
/* Hero parallax bottom edge — match next section to prevent peekaboo.
   core.min.css has no content/position for .featured-media:after,
   so we must define the full pseudo-element here. */
.featured-media::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80px;
	background-color: #232323;
	z-index: 0;
}
[class*="intro-title-"] + .section-block,
.featured-media + .section-block {
	border-top-color: var(--bg-primary);
}
@media only screen and (min-width: 960px) {
	.header {
		border-top-color: var(--accent);
	}
}

/* Override light backgrounds to dark equivalents */
.bkg-grey-ultralight {
	background-color: var(--bg-secondary) !important;
}
.bkg-white {
	background-color: var(--bg-secondary) !important;
}
.bkg-grey {
	background-color: var(--bg-tertiary);
	border-color: var(--bg-tertiary);
}
.bkg-charcoal {
	background-color: var(--bg-primary);
	border-color: var(--bg-primary);
}
.color-charcoal, .color-hover-charcoal:hover {
	color: var(--text-primary);
}

/* Accent color classes — all mapped to --accent */
.bkg-pink { background-color: var(--accent); border-color: var(--accent); }
.bkg-hover-pink:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.border-pink, .border-hover-pink:hover { border-color: var(--accent); }
.color-pink, .color-hover-pink:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════
   3. SECTION PADDING (same as default — structural, not visual)
   ═══════════════════════════════════════════════════════════════════ */

/* Restore skin.css base padding — 3rem all around, then zero top */
.wrapper-inner {
	padding: 3rem;
	padding-top: 0;
}
.header .header-inner {
	padding-left: 3rem;
	padding-right: 3rem;
}
[class*="intro-title-"] + .section-block,
.featured-media + .section-block {
	padding-top: 8rem;
	border-top-width: 0;
	border-top-style: none;
}
@media only screen and (min-width: 960px) {
	.header {
		border-top-width: 3px;
		border-top-style: solid;
		border-top-color: var(--accent);
	}
	.header:not(.header-absolute):not(.header-fixed) {
		margin-top: 0;
		border-top-width: 0;
	}
}
.section-block,
.fullscreen-section .fullscreen-inner,
.pagination-2 .pagination-next,
.row.xlarge {
	padding-top: 11rem;
	padding-bottom: 11rem;
}
.section-block.replicable-content,
.row.xlarge.replicable-content {
	padding-top: 11rem;
	padding-bottom: 8rem;
}
.footer-1 .footer-top {
	padding-top: 2rem;
	padding-bottom: 1.25rem;
}
.grid-filter-menu {
	padding-top: 3rem !important;
	padding-bottom: 5rem;
}
.home-page .grid-filter-menu { padding-bottom: 4rem; }
.section-block.feature-2 { padding-bottom: 12rem; }
.divider { margin-top: 6rem; margin-bottom: 9rem; }
.separator { width: 5rem; margin-top: 1.5rem; margin-bottom: 3rem; }
.text-line { width: 2rem; height: 0.1rem; display: inline-block; }
.text-line[class*="bkg-"] { padding: 0; }
.text-line-vertical { display: inline-block; position: relative; }
.text-line-vertical:after {
	width: 1px; height: 8rem; margin-top: 3rem;
	border-right: 1px solid var(--border-color);
}

/* ═══════════════════════════════════════════════════════════════════
   4. HEADER — Dark editorial nav
   ═══════════════════════════════════════════════════════════════════ */

.header,
.header .header-inner {
	background-color: var(--bg-primary) !important;
}
.header-transparent .header-inner {
	background-color: transparent !important;
}
.header .navigation > ul > li > a {
	color: var(--text-primary);
}
.header .navigation > ul > li > a:hover {
	color: var(--accent);
}
.header .navigation > ul > li.current > a {
	color: var(--accent);
}

/* Mobile header */
@media only screen and (max-width: 960px) {
	.header .header-inner {
		background: var(--bg-primary) !important;
		border-bottom: 1px solid var(--border-color);
	}
}
.mobile .header,
.mobile .header .header-inner {
	background: var(--bg-primary) !important;
}
.mobile .header .header-inner {
	border-bottom: 1px solid var(--border-color);
}

/* ═══════════════════════════════════════════════════════════════════
   5. HEADER LOGO
   ═══════════════════════════════════════════════════════════════════ */

.header .logo { width: auto; }

/* Make logo background transparent on dark theme */
.header .logo a,
.header .logo a:first-child,
.header .logo a:last-child {
	background-color: transparent !important;
}

/* Tint logo white on dark bg, accent on hover */
.header .logo-inner img {
	filter: brightness(0) invert(1);
	opacity: 0.9;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
/* Logo hover tint is injected dynamically by accent-picker.js
   to match the current accent color */
.header .logo-inner a:hover img {
	opacity: 1;
	transition: filter 0.3s ease, opacity 0.2s ease;
}

/* Ensure logo visible at all sizes — always show first logo */
.header .logo a:first-child {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	width: 12rem !important;
	transform: translateX(0) !important;
}
.header .logo a:first-child img {
	max-width: 100%;
	height: auto;
	max-height: 3.5rem;
	display: block;
}
/* Hide second logo entirely in editorial theme */
.header .logo a:last-child {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}
/* On scroll (header-background), keep same logo visible */
.header-background .logo a:first-child {
	opacity: 1 !important;
	display: block !important;
	visibility: visible !important;
	width: 12rem !important;
	transform: translateX(0) !important;
}
.header-background .logo a:last-child {
	display: none !important;
	opacity: 0 !important;
}
/* Mobile logo */
@media only screen and (max-width: 960px) {
	.header .logo a:first-child {
		width: 10rem !important;
	}
	.header .logo a:first-child img {
		max-height: 3rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   6-8. NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */

/* Hamburger icon — always visible on dark bg */
.header .navigation-show a,
.header .navigation .navigation-show.nav-icon,
.header-transparent .navigation .navigation-show.nav-icon {
	color: var(--text-primary);
	background-color: transparent;
	border-color: var(--border-color);
}
.header .navigation-show a:hover,
.header-transparent .navigation .navigation-show.nav-icon:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.navigation-show .icon-menu { color: var(--text-primary); }
.navigation-show .icon-menu:hover { color: var(--accent); }

/* Nav icon buttons */
.header .navigation .nav-icon,
.header .header-inner .dropdown > .nav-icon {
	color: var(--text-primary);
	background-color: transparent;
}
.header .navigation .nav-icon:hover,
.header .navigation .nav-icon.active {
	color: var(--accent);
	background-color: transparent;
}

/* Mobile nav icon overrides */
.mobile .navigation .nav-icon { color: var(--text-primary); }
.mobile .navigation .nav-icon:hover { color: var(--accent); }
.mobile .v-align-middle > .button:not(.nav-icon),
.mobile .dropdown > .button:not(.nav-icon) {
	background: var(--bg-secondary);
	border-color: transparent;
	color: var(--text-primary);
}
.mobile .v-align-middle > .button:not(.nav-icon):hover,
.mobile .dropdown > .button:not(.nav-icon):hover {
	background-color: var(--accent);
	color: #fff;
}
@media only screen and (max-width: 960px) {
	.header .navigation .nav-icon { color: var(--text-primary); }
	.header .navigation .nav-icon:hover { color: var(--accent); }
	.header .v-align-middle > .button:not(.nav-icon),
	.header .dropdown > .button:not(.nav-icon) {
		background: var(--bg-secondary);
		color: var(--text-primary);
	}
}

/* Overlay nav — editorial treatment */
.overlay-navigation-wrapper {
	background-color: var(--bg-primary);
}
.overlay-navigation-inner {
	text-align: left;
}
.overlay-navigation-inner > .v-align-middle > .row > .column {
	display: flex;
	gap: 8rem;
	padding-left: 6rem;
	padding-right: 6rem;
}
.overlay-navigation {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-top: 6rem;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}
.overlay-navigation-wrapper .menu-title {
	color: var(--accent);
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 2.5rem;
	display: block;
}
.overlay-navigation > ul > li {
	margin-bottom: 0.8rem;
}
.overlay-navigation > ul > li > a {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 3.6rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--text-heading);
	line-height: 1.15;
	transition: color 0.2s ease;
}
.overlay-navigation > ul > li > a:hover,
.overlay-navigation ul li.current > a:hover {
	color: var(--accent);
}
.overlay-navigation ul li.current > a {
	color: var(--accent);
	font-weight: 800;
}

/* Overlay sub-menu (Case Studies links) */
.overlay-navigation .sub-menu a {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text-secondary);
	transition: color 0.2s ease;
}
.overlay-navigation .sub-menu a:hover,
.overlay-navigation .sub-menu .current a {
	color: var(--text-heading);
}

/* Close button */
.overlay-navigation-wrapper .navigation-hide a {
	color: var(--text-secondary);
	font-size: 2.4rem;
}
.overlay-navigation-wrapper .navigation-hide a:hover {
	color: var(--accent);
}

/* Overlay footer */
.overlay-navigation-footer .copyright {
	color: var(--text-secondary);
}

@media only screen and (max-width: 768px) {
	.overlay-navigation-inner > .v-align-middle > .row > .column {
		flex-direction: column;
		gap: 4rem;
		padding-left: 3rem;
		padding-right: 3rem;
	}
	.overlay-navigation {
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: left !important;
	}
	.overlay-navigation > ul > li > a {
		font-size: 2.8rem;
	}
}

/* Side nav */
.side-navigation-wrapper {
	background-color: var(--bg-secondary);
}
.side-navigation > ul > li > a {
	color: var(--text-primary);
}
.side-navigation > ul > li > a:hover {
	color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   9. TITLE AREAS — intro sections
   ═══════════════════════════════════════════════════════════════════ */

/* Intro title sections keep bkg-stipple behavior but can also use
   solid dark with accent bar */
.intro-title-1 {
	border-bottom: 4px solid var(--accent);
}

/* Home hero subtitle — always white (Tier 1: pinned dark) */
.featured-media .tms-caption.font-alt-1,
.featured-media h3.tms-caption {
	color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   14. HOMEPAGE — Portfolio grid
   ═══════════════════════════════════════════════════════════════════ */

/* Project cards on dark background */
.overlay-info {
	background-color: rgba(0, 0, 0, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════
   20. BLOG — Dark editorial cards
   ═══════════════════════════════════════════════════════════════════ */

.blog-masonry .post-content:not(.post-content.width-background) {
	padding: 0 2rem;
}
.blog-masonry .post-info .post-date {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--border-color);
	color: var(--text-secondary);
}
.post-info, .post-info a, .post-info span {
	color: var(--text-secondary);
}
.post-info a:hover {
	color: var(--accent);
}

/* Category label accent bar — Intercept-style */
.post-cat-card__label {
	color: var(--text-heading);
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

/* Accent bar above category label — animates width on scroll-in, opacity on hover */
.post-cat-card {
	position: relative;
}
.post-cat-card::after {
	content: '';
	position: absolute;
	bottom: 4.5rem;
	left: 2rem;
	width: 0;
	height: 4px;
	background-color: var(--accent);
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
	            opacity 0.3s ease,
	            background-color 0.3s ease;
}
.post-cat-card.bw-bar-in::after {
	width: 3.5rem;
}

/* Post icons — inline SVGs injected by micro-animations.js
   (CSS ::before background-images replaced by animated draw-on) */
.post-cat-card__label {
	position: relative;
	z-index: 2;
}
.post-cat-card::before {
	/* Hidden — replaced by inline SVG with draw-on animation */
	display: none;
}

/* Category-specific icons (same SVGs as default theme) */
.cat-collaboration::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cline x1='48' y1='18' x2='20' y2='78' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='48' y1='18' x2='76' y2='78' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='20' y1='78' x2='76' y2='78' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='18' r='7' fill='white'/%3E%3Ccircle cx='20' cy='78' r='7' fill='white'/%3E%3Ccircle cx='76' cy='78' r='7' fill='white'/%3E%3C/svg%3E");
}
.cat-leadership::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cpolygon points='48,8 88,48 48,88 8,48' stroke='white' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cline x1='48' y1='28' x2='48' y2='68' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='28' y1='48' x2='68' y2='48' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='48' r='5' fill='white'/%3E%3C/svg%3E");
}
.cat-product-design::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cline x1='32' y1='16' x2='32' y2='80' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='64' y1='16' x2='64' y2='80' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='16' y1='38' x2='80' y2='38' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='16' y1='58' x2='80' y2='58' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M16,28 L16,16 L28,16' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M68,16 L80,16 L80,28' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M80,68 L80,80 L68,80' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28,80 L16,80 L16,68' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Blog category colour map — all accent-family in editorial theme.
   Slight warmth variation per category but all derived from accent. */
.cat-collaboration  { background-color: var(--accent-deep); }
.cat-product-design { background-color: var(--accent-deep); }
.cat-leadership     { background-color: var(--accent-deep); }
.cat-mentorship     { background-color: var(--accent-deep); }
.cat-de-siloing     { background-color: var(--accent-deep); }
.cat-ux-practice    { background-color: var(--accent-deep); }
.cat-default        { background-color: var(--accent-deep); }

/* Stipple texture — accent-colored for editorial theme.
   Base color is --accent-deep (dark terra cotta), with the stipple
   grain pattern overlaid. Category classes no longer override
   to separate colors — everything is accent-family. */
.bkg-stipple {
	background-color: var(--accent-deep);
	background-image:
		linear-gradient(135deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.04) 45%, rgba(255,255,255,0.11) 100%),
		radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px),
		radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
	background-size: 100% 100%, 5px 5px, 5px 5px;
	background-position: 0 0, 0 0, 2.5px 2.5px;
	border-color: var(--accent-deep);
}

/* ══════════════════════════════════════════════════════════
   TEXTURE FRAMEWORK A — Wireframe Schematics
   Cycling UX schematic illustrations (SVG draw-on).
   Applied via .wire-layer + .wire-layer-fade inside any
   .intro-title-1 or .featured-media container.
   ══════════════════════════════════════════════════════════ */
.wire-layer {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
}
/* Edge fade vignette — starts hidden, JS reveals after init */
.wire-layer-fade {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: radial-gradient(ellipse 80% 90% at 50% 50%, transparent 40%, var(--accent-deep) 80%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.wire-layer-fade.active {
	opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   TEXTURE FRAMEWORK B — Dot Grid + Sparkle Wave
   Canvas-based dot grid with diagonal brightness sweep.
   Applied via canvas.dot-canvas inside any container.
   Can be used independently or alongside wireframes.
   ══════════════════════════════════════════════════════════ */
canvas.dot-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

/* ── Shared layout: ensure containers hold absolute layers ── */
.intro-title-1 {
	position: relative;
	overflow: hidden;
}
/* Content rows sit above all texture layers */
.intro-title-1 > .row {
	position: relative;
	z-index: 5;
}
/* Hero: slider content above texture layers */
.featured-media .tm-slider-container {
	position: relative;
	z-index: 1;
}
.featured-media .tms-content,
.featured-media .scroll-down {
	position: relative;
	z-index: 5;
}

/* Post card structure (from skin.css) */
.post-cat-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	height: 190px;
	padding: 1.4rem 1.8rem;
	text-decoration: none;
	overflow: hidden;
	transition: opacity 0.25s ease;
}
.post-cat-card:hover { opacity: 0.82; }
.post-cat-card:hover::after {
	opacity: 0.35;
	background-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   21. FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════ */

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="search"], textarea, select {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	border-color: var(--border-color);
}
input[type="text"]:focus, input[type="email"]:focus,
textarea:focus {
	border-color: var(--accent);
}
.button,
.button.bkg-charcoal,
.button.bkg-white,
.button[class*="bkg-"] {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
}
.button:hover,
.button.bkg-charcoal:hover,
.button.bkg-white:hover,
.button[class*="bkg-"]:hover {
	background-color: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
	color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   23. FOOTER — Light footer (Intercept-style contrast)
   ═══════════════════════════════════════════════════════════════════ */

.footer {
	background-color: var(--bg-tertiary);
}
/* Pin footer-top dark regardless of theme — content is designed for dark bg */
.footer-top {
	background-color: #232323 !important;
	border-top: 3px solid var(--accent);
	padding-top: 3.5rem;
	padding-bottom: 1.25rem;
}
.footer-top h5,
.footer-top h5 a {
	color: #FFFFFF !important;
}
/* Accent underline beneath "Bob Werner" — visual feedback when accent changes */
.footer-top h5.color-white {
	display: inline-block;
	position: relative;
}
.footer-top h5.color-white::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: var(--accent);
	transition: background-color 0.4s ease;
}
.footer-top p,
.footer-top a {
	color: #BBBBBB;
}
.footer-top .navigation a {
	color: #BBBBBB;
}
.footer-top .navigation a:hover,
.footer-top a:hover {
	color: var(--accent);
}
.footer .navigation a {
	color: var(--text-secondary);
}
.footer .navigation a:hover {
	color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   ACCENT COLOR RULES SYSTEM
   ─────────────────────────────────────────────────────────────────
   Consistent rules for how --accent is used across the site.
   Modeled on The Intercept's editorial color system.

   RULE 1 — ALWAYS ACCENT (permanent, no transition):
     • Author names (.post-autor, .post-autor a)
     • Category links in post info (.post-categories a)
     • h5/h6 subtitles in content sections
     • Blockquote text + left border
     • Buttons
     • Accent bars (footer-top, intro-title, category cards)
     • Nav underline on hover/current

   RULE 2 — ACCENT → WHITE (scroll transition, JS-driven):
     • h1, h2, h3 inside .section-block
     • NOT hero slider titles (stay white)
     • NOT hero subtitles (stay white)

   RULE 3 — ACCENT ON HOVER ONLY:
     • All text links: white/secondary at rest → accent on hover
     • Blog post titles on index: white → accent on hover
     • Nav links: white → accent on hover
     • Image/card overlays: transparent → accent wash on hover
     • Skill tags: border gets accent on hover

   RULE 4 — NEVER ACCENT:
     • Dates (always --text-secondary)
     • Body paragraph text (always --text-primary)
     • Footer body text (always --text-secondary)
     • Hero slider title and subtitle (always white)
   ═══════════════════════════════════════════════════════════════════ */

/* ── RULE 1: Always accent ─────────────────────────────────────── */

/* Author names — always accent */
.post-autor,
.post-autor a,
.post-autor a:visited,
.post-author-aside a {
	color: var(--accent) !important;
}

/* Category links in post info — always accent */
.post-categories a,
.post-categories a:visited {
	color: var(--accent);
}
.post-categories a:hover {
	color: var(--accent-hover);
}

/* h5/h6 subtitles in content sections — always accent */
.section-block h5,
.section-block h6,
.bkg-white h5,
.bkg-grey-ultralight h5 {
	color: var(--accent);
}

/* Blockquotes — accent text + border */
blockquote {
	border-left: 4px solid var(--accent);
	padding-left: 2rem;
	color: var(--accent);
	font-style: italic;
}
blockquote p {
	color: var(--accent);
}
blockquote.large,
blockquote.large p {
	color: var(--accent);
	font-weight: 400;
}
blockquote cite,
blockquote footer {
	color: var(--text-secondary);
	font-style: normal;
}

/* Blog callout boxes — inline-styled with light bg, needs dark override.
   Targets divs with background:#f7f7f5 and border-left inline styles. */
[style*="background:#f7f7f5"],
[style*="background:#f5f5f0"],
[style*="background: #f7f7f5"] {
	background: var(--bg-secondary) !important;
	border-left-color: var(--accent) !important;
}
[style*="background:#f7f7f5"] p,
[style*="background:#f5f5f0"] p,
[style*="background: #f7f7f5"] p {
	color: var(--text-primary) !important;
}
[style*="background:#f7f7f5"] .color-charcoal,
[style*="background:#f7f7f5"] .small.color-charcoal {
	color: var(--accent) !important;
}
[style*="border-left:4px solid"] {
	border-left-color: var(--accent) !important;
}
[style*="border-left: 4px solid"] {
	border-left-color: var(--accent) !important;
}

/* Inline HR separators in blog posts — visible on dark bg */
hr[style*="border-top:1px solid #eee"],
hr[style*="border-top: 1px solid #eee"] {
	border-top-color: var(--border-color) !important;
}

/* Blog post footer bylines — accent treatment */
.post-content > p.small.color-grey em {
	color: var(--text-secondary);
}

/* ── RULE 3: Accent on hover ──────────────────────────────────── */

/* Blog post titles on index — white at rest, accent on hover */
.blog-masonry h2.post-title a {
	color: var(--text-heading);
	transition: color 0.2s ease;
}
.blog-masonry h2.post-title a:hover {
	color: var(--accent);
}

/* Blog post titles on single post pages — white */
.blog-regular h2.post-title,
.blog-wide h2.post-title,
.single-post h2.post-title {
	color: var(--text-heading);
}

/* Image/card hover overlays — transparent accent wash */
.thumbnail {
	position: relative;
	overflow: hidden;
}
.thumbnail::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--accent);
	opacity: 0;
	pointer-events: none;
	z-index: 3;
	mix-blend-mode: multiply;
	transition: opacity 0.3s ease;
}
.thumbnail:hover::after {
	opacity: 0.2;
}

/* Previously At logos — force white on any dark background */
.bkg-charcoal .logo-cell img,
.bkg-grey .logo-cell img,
.bkg-stipple .logo-cell img,
.bkg-grey-ultralight .logo-cell img {
	filter: brightness(0) invert(1) !important;
	opacity: 0.85 !important;
}

/* Skill tag pills on about page */
.label.bkg-grey-ultralight.color-charcoal {
	background-color: transparent !important;
	border: 1px solid var(--border-color);
	color: var(--text-primary) !important;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.label.bkg-grey-ultralight.color-charcoal:hover {
	border-color: var(--accent);
	color: var(--accent) !important;
}

/* ── RULE 4: Never accent ─────────────────────────────────────── */

/* Dates — always muted */
.post-date,
.post-info .post-date {
	color: var(--text-secondary);
}

/* Post love/like — ALWAYS accent (Tier 1 accent rule: hearts) */
.post-love, .post-love span, .post-love [class*="icon-"],
.post-like, .post-like span, .post-like [class*="icon-"] {
	color: var(--accent) !important;
}
.post-love:hover, .post-love:hover span,
.post-like:hover, .post-like:hover span {
	color: var(--accent-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   EDITORIAL-SPECIFIC — Accent bar, dividers, visual rhythm
   ═══════════════════════════════════════════════════════════════════ */

/* Section dividers — accent-colored top border */
.section-block + .section-block {
	border-top: 1px solid var(--border-color);
}

/* Horizontal rules and separators */
hr, .divider {
	border-color: var(--border-color);
}
.separator {
	background-color: var(--accent);
}

/* Back to Top & Scroll Down — structural positioning (from skin.css) */
.scroll-down {
	float: right;
	text-align: left;
	position: fixed;
	bottom: 6rem;
	right: 3.2rem;
	z-index: 20;
}
.scroll-to-top {
	display: none;
	float: right;
	text-align: left;
	position: fixed;
	bottom: 6rem;
	right: 3.2rem;
	z-index: 20;
}
.scroll-down .text-line,
.scroll-to-top .text-line {
	width: 4.5rem;
	margin-bottom: 0.3rem;
	background-color: var(--text-secondary);
}
.scroll-down a,
.scroll-to-top a {
	width: 10rem;
	margin-top: -5rem;
	display: block;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.1rem;
	font-weight: normal;
	float: right;
	-webkit-transform: rotate(270deg);
	   -moz-transform: rotate(270deg);
	    -ms-transform: rotate(270deg);
	     -o-transform: rotate(270deg);
	        transform: rotate(270deg);
	color: var(--text-secondary);
}
.scroll-down a {
	color: var(--text-heading);
}
.scroll-to-top a:hover,
.scroll-down a:hover {
	color: var(--accent);
}
.scroll-to-top a:hover .text-line,
.scroll-down a:hover .text-line {
	background-color: var(--accent);
}
/* Scroll Links */
.scroll-link.icon-circled,
.scroll-to-top.icon-circled {
	width: 5rem;
	height: 5rem;
}
.scroll-link.icon-circled {
	line-height: 5rem;
}
.scroll-to-top.icon-circled {
	line-height: 4.8rem;
}

/* Breadcrumb */
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — same structural fixes as default theme
   ═══════════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 960px) {
	.wrapper-inner {
		padding-top: 0;
	}
}

@media only screen and (max-width: 768px) {

	/* Case study tile columns */
	.bw-tile-row > .column {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
		margin-bottom: 1.5rem;
	}
	.bw-tile-row > .column:last-child {
		margin-bottom: 0;
	}

	/* Footer columns */
	.footer-top .row.flex {
		flex-direction: column;
	}
	.footer-top .row.flex > .column {
		width: 100% !important;
		text-align: left !important;
		padding-bottom: 0;
	}
	.footer-top .row.flex > .column.right,
	.footer-top .row.flex > .column.center {
		text-align: left !important;
	}
	.footer-top .row.flex > .column.right p,
	.footer-top .row.flex > .column.right a {
		float: none !important;
		display: block;
	}

	/* Section padding */
	.section-block.replicable-content {
		padding-top: 4rem;
		padding-bottom: 3rem;
	}

	/* Blog grid — full-width on mobile */
	.blog-masonry .content-grid-3 .grid-item,
	.blog-masonry [class*="content-grid-"] .grid-item {
		width: 100%;
		float: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   ACCENT COLOR IMAGE OVERLAY — Intercept-style tinted images
   ═══════════════════════════════════════════════════════════════════ */

/* Hero slider images — subtle accent wash */
.featured-media .tms-slide::after,
.featured-media .tms-slides li::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--accent);
	opacity: 0.12;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: multiply;
}

/* Blog post thumbnail images */
.blog-masonry .post-media {
	position: relative;
	overflow: hidden;
}
.blog-masonry .post-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--accent);
	opacity: 0.15;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: multiply;
	transition: opacity 0.3s ease;
}
.blog-masonry .post-media:hover::after {
	opacity: 0.25;
}

/* About page hero photo — accent overlay */
.intro-title-1 + .section-block.no-padding {
	position: relative;
	overflow: hidden;
}
.intro-title-1 + .section-block.no-padding::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	max-height: 520px;
	background-color: var(--accent);
	opacity: 0.12;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: multiply;
}

/* Portfolio/case study hero images */
.intro-title-1 .background-image::after,
[class*="intro-title-"] .background-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--accent);
	opacity: 0.10;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: multiply;
}

/* Portfolio grid thumbnails */
.portfolio .thumbnail .overlay-info {
	background-color: rgba(0, 0, 0, 0.5);
	mix-blend-mode: normal;
}

/* ═══════════════════════════════════════════════════════════════════
   COLOR HELPER OVERRIDES — ensure text is readable on dark bg
   ═══════════════════════════════════════════════════════════════════ */

/* Body text on sections without explicit bkg class */
.color-charcoal { color: var(--text-primary); }
.color-white    { color: #fff; }

/* ── THREE-TIER BACKGROUND TEXT SYSTEM ──────────────────────────
   TIER 1 — PINNED DARK: image heroes, charcoal, grey, stipple
            → text ALWAYS white, never adapts
   TIER 2 — PINNED LIGHT: bkg-white, bkg-grey-ultralight
            → text ALWAYS dark, never adapts
   TIER 3 — ADAPTIVE: sections with no bkg-* class
            → text follows --text-primary / --text-heading vars
   ────────────────────────────────────────────────────────────── */

/* TIER 1 — Pinned dark: force white text on image/dark sections */
.featured-media h1,
.featured-media h2,
.featured-media h3,
.featured-media h4,
.featured-media p,
.featured-media li,
.featured-media span,
.featured-media .tms-caption {
	color: #fff !important;
}

/* TIER 3 — Adaptive sections (no explicit bkg class, not featured-media) */
.section-block:not([class*="bkg-"]):not(.featured-media) p,
.section-block:not([class*="bkg-"]):not(.featured-media) li,
.section-block:not([class*="bkg-"]):not(.featured-media) span {
	color: var(--text-primary);
}
.section-block:not([class*="bkg-"]):not(.featured-media) h1,
.section-block:not([class*="bkg-"]):not(.featured-media) h2,
.section-block:not([class*="bkg-"]):not(.featured-media) h3,
.section-block:not([class*="bkg-"]):not(.featured-media) h4,
.section-block:not([class*="bkg-"]):not(.featured-media) h5,
.section-block:not([class*="bkg-"]):not(.featured-media) h6 {
	color: var(--text-heading);
}

/* Remove visual separator line between adjacent section-blocks (subpixel artifact) */
.section-block + .section-block.no-padding-top {
	margin-top: -1px;
	border-top: none !important;
}

/* About page, contact, etc. — text on previously-white sections */
.bkg-white p, .bkg-white li, .bkg-white span { color: var(--text-primary); }
.bkg-white h1, .bkg-white h2, .bkg-white h3,
.bkg-white h4 { color: var(--text-heading); }
/* h5/h6 stay accent (Rule 1) — not overridden by adaptive tier */
.bkg-white h5, .bkg-white h6,
.bkg-grey-ultralight h5, .bkg-grey-ultralight h6 { color: var(--accent) !important; }
.bkg-grey-ultralight p, .bkg-grey-ultralight li { color: var(--text-primary); }
.bkg-grey-ultralight h1, .bkg-grey-ultralight h2,
.bkg-grey-ultralight h3, .bkg-grey-ultralight h4 { color: var(--text-heading); }

/* ═══════════════════════════════════════════════════════════════════
   STRUCTURAL RULES — carried from skin.css (layout, sizing, position)
   These are NOT visual overrides — they define component structure.
   ═══════════════════════════════════════════════════════════════════ */

/* --- Header structure --- */
.header .header-inner > .row {
	max-width: 100%;
	padding: 0 3rem;
}
.header .logo,
.header .header-inner .navigation > ul > li {
	height: 8rem;
	line-height: 8rem;
}
.header-compact .logo,
.header-compact .header-inner .navigation > ul > li {
	height: 6rem;
	line-height: 6rem;
}
.header .logo a {
	padding: 0 1.4rem;
	line-height: 4.4rem;
	display: block !important;
	background-color: transparent;
	float: left;
	position: relative;
}
.header-in .logo a,
.header-out .logo a {
	-webkit-transition-duration: 0ms;
	transition-duration: 0ms;
}

/* --- Logo sizing & swap logic --- */
.header .logo a:first-child {
	width: 12rem;
}
.header .logo a:last-child {
	opacity: 0;
	width: 4.4rem;
	visibility: hidden;
}
.header-background .logo a:first-child,
.header-background .logo a:last-child {
	-webkit-transform: translateX(-12rem);
	-ms-transform: translateX(-12rem);
	transform: translateX(-12rem);
}
.header-compact .logo { width: 12rem; }
.side-navigation-wrapper .logo { width: 12rem; }

/* Mobile logo structure */
@media only screen and (max-width: 960px) {
	.header .logo-inner {
		display: table-cell;
		vertical-align: middle;
	}
	.header .logo a {
		position: relative;
	}
	.header .logo a:first-child {
		opacity: 1;
		top: 0;
		-webkit-transform: translateX(0) !important;
		transform: translateX(0) !important;
	}
	.header .logo a:last-child {
		display: none !important;
	}
}

/* --- Navigation buttons & icons --- */
.header .navigation .navigation-show.nav-icon {
	font-size: 2rem;
	line-height: 4.4rem;
}
.header .v-align-middle > .button:not(.nav-icon),
.header .dropdown > .button:not(.nav-icon) {
	height: 4.4rem;
	padding: 0 1.5rem;
	line-height: 4.4rem;
	background: var(--bg-secondary);
	border-color: transparent;
	color: var(--text-primary);
}
.navigation-hide {
	width: 4.4rem;
	height: 4.4rem;
	margin-top: 1.9rem;
	margin-right: 0;
}
.navigation-hide a span {
	width: 4.4rem;
	font-size: 2rem;
}
.header .navigation-show {
	width: 4.4rem;
	height: 4.4rem;
	margin-left: 0;
}

/* Navigation hover underline */
.header .navigation > ul > li > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--accent);
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header .navigation > ul > li > a:hover::after,
.header .navigation > ul > li.current > a::after {
	width: 100%;
}

/* Sub-menu navigation */
.navigation .sub-menu li a,
.navigation .mega-sub-menu ul li a,
.navigation .dropdown-list li a {
	line-height: 1.6;
	font-weight: 400;
	font-size: 1.2rem;
	color: var(--text-secondary);
}

/* --- Featured media & slider structure --- */
.featured-media,
.full-width-slider,
.parallax {
	height: 50rem;
}
.featured-media .tms-arrow-nav {
	display: none !important;
}
.featured-media .tms-pagination {
	width: auto;
	bottom: 2rem;
	left: 4.4rem;
}
.featured-media .tms-pagination a {
	display: block;
	margin-bottom: 1rem;
}
.mobile .full-width-slider,
.mobile .parallax.fixed-height {
	height: 50rem;
}
.tm-slider-parallax-container .full-width-slider {
	height: 56rem;
}
.tm-slider-container.full-width-slider {
	width: initial;
}
.tm-slider-container.fullscreen {
	width: auto;
	height: 100vh;
}
.window-height .full-width-slider {
	height: inherit;
}
.tm-slider-container .scroll-link:not(.button),
.tmp-content-inner .scroll-link:not(.button) {
	margin-left: -2.5rem;
	position: absolute;
	bottom: 6rem;
	left: 50%;
}

/* --- Blog grid structure --- */
.blog-masonry .caption-over-outer .post-info .post-date {
	padding: 0;
	margin: 0;
	border: none;
	display: inline-block;
}
.blog-regular .post-info .post-date {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--border-color);
	display: block;
}
.post-info-aside {
	width: auto;
}
.post-info-aside,
.post-author-aside,
.post-comments-aside {
	min-width: 12rem;
	margin-left: 0;
	text-align: left;
}
.post-info-aside .post-love [class*="icon-"] {
	width: 1.3rem;
	margin-right: 0.6rem;
}
.post-info-aside .post-love,
.post-author-aside span,
.post-author-aside a,
.post-comments-aside span,
.post-comments-aside a {
	display: block;
}

/* --- Footer structure --- */
.footer .navigation li,
.footer .navigation ul li a {
	padding: 0;
	display: inline-block;
	float: none;
}
.footer-1 .footer-bottom .navigation,
.footer-1 .footer-bottom .social-list {
	float: none;
}
.footer .social-list {
	line-height: 1;
}
.footer-bottom .footer-logo {
	width: 6.5rem;
	margin-bottom: 1rem;
	margin-right: 1.4rem;
	line-height: 1.7;
}
.footer-top .footer-logo {
	width: 9rem;
	margin-bottom: 3rem !important;
}
.footer address {
	font-size: 1.2rem;
	line-height: 1.4;
	text-transform: uppercase;
	font-style: normal;
	color: var(--text-secondary);
}

/* --- Side navigation structure --- */
.side-navigation > ul > li > a:after {
	width: 0;
	height: 0.1rem;
	margin-left: 0;
	content: "";
	background-color: var(--text-primary);
	opacity: 0;
	position: absolute;
	left: 0;
	bottom: 1rem;
	transition-property: width, opacity;
	transition-duration: 500ms;
}
.side-navigation > ul > li.current > a:after {
	width: 2rem;
	opacity: 1;
}

/* --- Overlay navigation structure --- */
.overlay-navigation .sub-menu a {
	letter-spacing: 0.1rem;
	text-transform: normal;
	font-weight: normal;
	line-height: 1.2;
}

/* --- Grid filter menu structure --- */
.grid-filter-menu a {
	padding: 0.8rem;
	font-weight: 700;
	color: var(--text-secondary);
	display: block;
	position: relative;
	transition: color 0.2s ease;
}
.grid-filter-menu a:hover {
	color: var(--accent) !important;
}
.grid-filter-menu a.active {
	color: var(--text-heading) !important;
	border-bottom-color: var(--accent) !important;
}

/* --- Slider variants structure --- */
.logo-slider { height: 14rem; }
.team-slider { background: none; height: 42rem; }
.team-slider p { line-height: 1.8; }
.team-slider-1 .tms-pagination { display: none !important; }
.testimonial-slider { height: 14rem; }
.testimonial-slider blockquote { width: 100%; }
.portfolio-7 .portfolio-recent-slider { max-height: 35rem; }
.project-1-slider .tms-arrow-nav { display: none !important; }

/* --- Form fields structure --- */
.field-wrapper { position: relative; overflow: hidden; }

/* --- Caption sizing structure --- */
.tms-caption.title-xlarge,
.tmp-content .title-xlarge {
	font-size: 4.5rem;
	line-height: 4.5rem;
}
.tms-caption.scale.title-medium,
.tmp-content .title-medium {
	font-size: 3rem;
	line-height: 2.5rem;
}
.tms-caption.scale.title-small,
.tmp-content .title-small {
	font-size: 1.1rem;
	line-height: 0.6rem;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT BACKGROUND MODE — activated via .bw-bg-light on <html>
   JS sets CSS variables; these handle elements that need
   structural CSS changes beyond variable swaps.
   ═══════════════════════════════════════════════════════════════════ */

/* Logo: remove white inversion on light bg */
.bw-bg-light .header .logo-inner img {
	filter: none;
	opacity: 1;
}
/* Logo hover on light bg — go to accent color from dark source */
.bw-bg-light .header .logo-inner a:hover img {
	filter: brightness(0) saturate(100%) !important;
	opacity: 0.6 !important;
}

/* Nav icon (hamburger): dark on light bg */
.bw-bg-light .header .navigation .nav-icon {
	color: var(--text-primary);
}

/* Overlay nav close button */
.bw-bg-light .overlay-navigation-wrapper .navigation-hide a {
	color: var(--text-primary);
}

/* Background class overrides for light mode.
   Sections with explicit dark bg classes must STAY dark.
   Only the default page bg and "white" sections adapt. */
.bw-bg-light .bkg-white {
	background-color: #FFFFFF !important;
}
.bw-bg-light .bkg-grey-ultralight {
	background-color: #F5F5F5 !important;
}

/* Force dark sections to stay dark in light mode */
.bw-bg-light .bkg-charcoal {
	background-color: #1A1A1A !important;
	border-color: #1A1A1A !important;
}
.bw-bg-light .bkg-grey {
	background-color: #222222 !important;
	border-color: #222222 !important;
}
.bw-bg-light .bkg-stipple {
	background-color: var(--accent-deep) !important;
}

/* TIER 1 (light mode) — Keep text white inside pinned-dark sections */
.bw-bg-light .featured-media h1,
.bw-bg-light .featured-media h2,
.bw-bg-light .featured-media h3,
.bw-bg-light .featured-media h4,
.bw-bg-light .featured-media p,
.bw-bg-light .featured-media li,
.bw-bg-light .featured-media span,
.bw-bg-light .featured-media .tms-caption,
.bw-bg-light .bkg-charcoal h1,
.bw-bg-light .bkg-charcoal h2,
.bw-bg-light .bkg-charcoal h3,
.bw-bg-light .bkg-charcoal h4,
.bw-bg-light .bkg-charcoal h5,
.bw-bg-light .bkg-charcoal h6,
.bw-bg-light .bkg-charcoal p,
.bw-bg-light .bkg-charcoal li,
.bw-bg-light .bkg-charcoal span,
.bw-bg-light .bkg-grey h1,
.bw-bg-light .bkg-grey h2,
.bw-bg-light .bkg-grey h3,
.bw-bg-light .bkg-grey h4,
.bw-bg-light .bkg-grey h5,
.bw-bg-light .bkg-grey h6,
.bw-bg-light .bkg-grey p,
.bw-bg-light .bkg-grey li,
.bw-bg-light .bkg-grey span,
.bw-bg-light .bkg-stipple h1,
.bw-bg-light .bkg-stipple h2,
.bw-bg-light .bkg-stipple h3,
.bw-bg-light .bkg-stipple h4,
.bw-bg-light .bkg-stipple h5,
.bw-bg-light .bkg-stipple h6,
.bw-bg-light .bkg-stipple p,
.bw-bg-light .bkg-stipple li,
.bw-bg-light .bkg-stipple span {
	color: #fff !important;
}

/* Previously At logos — revert to natural on light bg */
.bw-bg-light .bkg-grey-ultralight .logo-cell img {
	filter: none !important;
	opacity: 0.7 !important;
}

/* .color-white inside light-bg sections should flip to dark */
.bw-bg-light .bkg-white .color-white,
.bw-bg-light .bkg-grey-ultralight .color-white {
	color: #111 !important;
}

/* Blog callout boxes on light bg */
.bw-bg-light [style*="background:#f7f7f5"],
.bw-bg-light [style*="background: #f7f7f5"] {
	background: #F5F5F5 !important;
	color: var(--text-primary) !important;
	border-left-color: var(--accent) !important;
}
.bw-bg-light [style*="background:#f7f7f5"] p,
.bw-bg-light [style*="background: #f7f7f5"] p {
	color: var(--text-primary) !important;
}

/* Image overlays: reduce opacity on light bg */
.bw-bg-light .thumbnail::after {
	opacity: 0.08;
}
.bw-bg-light .thumbnail:hover::after {
	opacity: 0.15;
}

/* Portfolio overlay info */
.bw-bg-light .portfolio .thumbnail .overlay-info {
	background-color: rgba(0, 0, 0, 0.4);
}

/* Scroll title transition: accent → dark instead of accent → white */
.bw-bg-light [data-scroll-title="revealed"] {
	color: var(--text-heading) !important;
}

/* Footer — slightly different background in light mode */
.bw-bg-light .footer {
	background-color: var(--bg-tertiary);
}

/* Header background state on light */
.bw-bg-light .header-background {
	background-color: rgba(255, 255, 255, 0.95);
}
.bw-bg-light .header-transparent:not(.header-background) {
	background-color: transparent;
}

/* White square needs visible border on light bg */
.bw-bg-light .bw-sq[data-bg="light"] {
	box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.3) !important;
}
.bw-bg-light .bw-sq[data-bg="dark"] {
	box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5) !important;
}