/*
 * Petersen Onsite — The7 "Consulting" style skin
 * Loaded AFTER uploads/rftr-style-custom.css (see functions.php, priority 20)
 *
 * Design tokens adapted from the7.io/consulting with Petersen brand blue accent.
 */

:root {
	--po-navy: #0f1b2d;
	--po-accent: #025296;
	--po-accent-hover: #1a6cb5;
	--po-accent-soft: #5379b1;
	--po-green: #8aa447;
	--po-heading: #11181c;
	--po-text: #5f676d;
	--po-muted: #8d959b;
	--po-light: #f1f3f5;
	--po-white: #ffffff;
	--po-font: 'Poppins', Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------
 * 1. TYPOGRAPHY — Poppins everywhere, The7 sizes/weights
 * ------------------------------------------------------------------ */

body,
.realfactory-body,
.realfactory-content-font,
.gdlr-core-title-font,
.gdlr-core-info-font,
.gdlr-core-blog-info-font,
.gdlr-core-quote-font,
.realfactory-title-font,
.realfactory-info-font,
.realfactory-navigation-font,
input, textarea, select, button {
	font-family: var(--po-font) !important;
}

body, .realfactory-body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--po-text);
	-webkit-font-smoothing: antialiased;
}

.realfactory-body h1, .realfactory-body h2, .realfactory-body h3,
.realfactory-body h4, .realfactory-body h5, .realfactory-body h6 {
	font-family: var(--po-font) !important;
	font-weight: 500 !important;
	color: var(--po-heading);
	line-height: 1.25;
}

.realfactory-body h1 { font-size: 47px; }
.realfactory-body h2 { font-size: 35px; }
.realfactory-body h3 { font-size: 27px; }
.realfactory-body h4 { font-size: 20px; }
.realfactory-body h5 { font-size: 18px; }
.realfactory-body h6 { font-size: 16px; }

/* Page-builder title elements */
.gdlr-core-title-item .gdlr-core-title-item-title,
.gdlr-core-block-item-title-wrap .gdlr-core-block-item-title {
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none;
	color: var(--po-heading);
}
.gdlr-core-title-item .gdlr-core-title-item-caption {
	color: var(--po-muted);
}

a { color: var(--po-accent); }
a:hover { color: var(--po-accent-hover); }

/* ------------------------------------------------------------------
 * 2. BUTTONS — square, solid brand blue, weight 500
 * ------------------------------------------------------------------ */

.gdlr-core-button,
.realfactory-button,
body .realfactory-body input[type="submit"],
body .realfactory-body input[type="button"],
body .realfactory-body button[type="submit"],
.wp-block-button__link {
	font-family: var(--po-font) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border-radius: 0 !important;
	padding: 15px 32px !important;
	background-color: var(--po-accent) !important;
	color: var(--po-white) !important;
	border: none;
	transition: background-color .25s ease, color .25s ease;
}

.gdlr-core-button:hover,
.realfactory-button:hover,
body .realfactory-body input[type="submit"]:hover,
body .realfactory-body input[type="button"]:hover,
.wp-block-button__link:hover {
	background-color: var(--po-accent-hover) !important;
	color: var(--po-white) !important;
}

/* Bordered/outline button variant */
.gdlr-core-button.gdlr-core-button-with-border {
	background-color: transparent !important;
	border: 2px solid var(--po-accent) !important;
	color: var(--po-accent) !important;
}
.gdlr-core-button.gdlr-core-button-with-border:hover {
	background-color: var(--po-accent) !important;
	color: var(--po-white) !important;
}

/* ------------------------------------------------------------------
 * 3. HEADER & NAVIGATION — dark navy, The7-style
 * ------------------------------------------------------------------ */

.realfactory-header-background,
.realfactory-sticky-menu-placeholder,
.realfactory-header-style-boxed.realfactory-fixed-navigation,
.realfactory-header-background-transparent,
.realfactory-mobile-header {
	background-color: var(--po-navy) !important;
}

.realfactory-navigation .sf-menu > li > a,
.realfactory-navigation-font {
	font-family: var(--po-font) !important;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--po-white);
}

.realfactory-navigation .sf-menu > li > a:hover {
	color: var(--po-accent-soft) !important;
}

/* Sub-menus */
.realfactory-navigation .sf-menu > li li a {
	font-family: var(--po-font) !important;
	font-size: 14px;
	background-color: var(--po-navy);
	color: rgba(255, 255, 255, .75);
}
.realfactory-navigation .sf-menu > li li a:hover {
	color: var(--po-white);
	background-color: var(--po-accent);
}

/* Social icons at the end of the main menu (added via wp_nav_menu_items
   in functions.php) — round accent-blue chips matching the new scheme */
.realfactory-navigation .sf-menu > li.po-menu-social {
	padding-left: 5px !important;
	padding-right: 5px !important;
}
.realfactory-navigation .sf-menu > li.po-menu-social--first {
	margin-left: 14px;
}
.realfactory-navigation .sf-menu > li.po-menu-social > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	margin-top: -8px; /* optically center the 36px chip against the text line */
	border-radius: 50%;
	background-color: var(--po-accent);
	color: var(--po-white);
	transition: background-color .25s ease;
}
.realfactory-navigation .sf-menu > li.po-menu-social > a:hover {
	background-color: var(--po-accent-hover);
	color: var(--po-white) !important;
}
.po-social-svg {
	width: 17px;
	height: 17px;
	display: block;
}

/* Same chips inside the mobile menu */
ul.m-menu li.po-menu-social {
	display: inline-block;
	margin: 12px 10px 0 0;
}
ul.m-menu li.po-menu-social > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	border-radius: 50%;
	background-color: var(--po-accent);
	color: var(--po-white) !important;
}
ul.m-menu li.po-menu-social > a:hover {
	background-color: var(--po-accent-hover);
}

/* Mobile hamburger — white bars on the navy mobile header (generated
   options CSS paints them #383838) */
.realfactory-mobile-header .realfactory-mobile-button-hamburger:before,
.realfactory-mobile-header .realfactory-mobile-button-hamburger:after,
.realfactory-mobile-header .realfactory-mobile-button-hamburger span {
	background: var(--po-white) !important;
}
.realfactory-mobile-header .realfactory-mobile-menu-button i {
	color: var(--po-white) !important;
}
.realfactory-mobile-menu .realfactory-mobile-menu-button {
	border-color: rgba(255, 255, 255, .35) !important;
}

/* Slide-in mobile menu (mmenu) — navy panel, scheme colors
   (generated options CSS uses #1f1f1f / #979797 grays) */
.mm-menu {
	background-color: var(--po-navy) !important;
}
ul.mm-listview li {
	border-color: rgba(255, 255, 255, .08) !important;
}
.mm-navbar .mm-title,
.mm-navbar .mm-btn,
ul.mm-listview li > a,
ul.mm-listview li > span {
	font-family: var(--po-font) !important;
	color: rgba(255, 255, 255, .75) !important;
}
ul.mm-listview li a {
	border-color: rgba(255, 255, 255, .08) !important;
}
.mm-navbar .mm-title:hover,
.mm-navbar .mm-btn:hover,
ul.mm-listview li a:hover,
ul.mm-listview li > span:hover,
ul.mm-listview li.current-menu-item > a,
ul.mm-listview li.current-menu-ancestor > a,
ul.mm-listview li.current-menu-ancestor > span {
	color: var(--po-white) !important;
}
.mm-arrow:after,
.mm-next:after,
.mm-prev:before {
	border-color: rgba(255, 255, 255, .55) !important;
}

/* Hide the slide-in menu's own close "X" (.mmenu-custom-close) — the
   overlay menu close on the main site is untouched */
.mm-navbar .mmenu-custom-close {
	display: none !important;
}

/* Pull the slide-in menu items up: collapse the root panel's navbar
   (its only content was the close X, now hidden) and its 40px top
   padding. Sub-panels keep their navbar for the back arrow. */
.mm-panels > .mm-panel .mm-navbar:not(:has(.mm-btn)) {
	display: none !important;
}
.mm-panels > .mm-panel.mm-hasnavbar:not(:has(.mm-navbar .mm-btn)) {
	padding-top: 25px;
}

/* Social chips inside the slide-in menu (mmenu rewrites ul.m-menu
   into ul.mm-listview but keeps our li classes) — a row below the
   menu items, left-aligned with the item text (20px) */
ul.mm-listview li.po-menu-social {
	display: inline-block;
	border: none !important;
	margin: 22px 10px 0 0;
}
ul.mm-listview li.po-menu-social--first {
	margin-left: 20px;
}
ul.mm-listview li.po-menu-social:after { display: none; }
ul.mm-listview li.po-menu-social > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	border-radius: 50%;
	background-color: var(--po-accent);
	color: var(--po-white) !important;
}
ul.mm-listview li.po-menu-social > a:hover {
	background-color: var(--po-accent-hover);
}

/* Nav slide indicator bar (if enabled) */
.realfactory-navigation-slide-bar {
	border-color: var(--po-accent-soft) !important;
}

/* Header CTA button */
.realfactory-header-right-button {
	font-family: var(--po-font) !important;
	font-weight: 500;
	text-transform: none;
	border-radius: 0 !important;
	background-color: var(--po-accent) !important;
	border-color: var(--po-accent) !important;
}
.realfactory-header-right-button:hover {
	background-color: var(--po-accent-hover) !important;
	border-color: var(--po-accent-hover) !important;
}

/* Top bar (if enabled) */
.realfactory-top-bar-background { background-color: var(--po-navy); }
.realfactory-top-bar {
	font-family: var(--po-font);
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ------------------------------------------------------------------
 * 4. PAGE TITLE BAR (inner pages) — flat navy band
 * ------------------------------------------------------------------ */

body:not(.home) .realfactory-page-title-wrap {
	background-color: var(--po-navy) !important;
}

.realfactory-page-title-wrap .realfactory-page-title {
	font-family: var(--po-font) !important;
	font-size: 35px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--po-white) !important;
}

.realfactory-page-title-wrap .realfactory-page-caption {
	font-family: var(--po-font) !important;
	color: var(--po-muted) !important;
}

/* Post/archive title band (.realfactory-blog-title-wrap) — same flat navy
   as the page title bar. Kills the parent theme's grey texture image and
   the grey/black overlay layer. */
.realfactory-blog-title-wrap {
	background-color: var(--po-navy) !important;
	background-image: none !important;
}
.realfactory-blog-title-wrap .realfactory-blog-title-overlay {
	display: none !important;
}

/* Front page never shows the theme title bar (custom hero instead) */
.home.page .realfactory-page-title-wrap { display: none; }

/* ------------------------------------------------------------------
 * 4b. CONTENT WIDTH — interior pages & posts read at 750px.
 * Excluded: front page (custom hero/sections) and the portfolio
 * pages Projects (5173) / Works (4614), which need full width.
 * Section backgrounds stay full-bleed; only the inner container narrows.
 * ------------------------------------------------------------------ */

body.page:not(.home):not(.page-id-5173):not(.page-id-4614) .realfactory-content-container.realfactory-container,
body.page:not(.home):not(.page-id-5173):not(.page-id-4614) .gdlr-core-pbf-wrapper-container.gdlr-core-container,
body.single-post .realfactory-content-container.realfactory-container {
	max-width: 850px !important;
}

/* ------------------------------------------------------------------
 * 5. FOOTER & COPYRIGHT — navy, muted text
 * ------------------------------------------------------------------ */

.realfactory-footer-wrapper {
	background-color: var(--po-navy) !important;
	color: var(--po-muted);
	font-family: var(--po-font);
	padding-top: 70px;
	padding-bottom: 50px;
	border-top: none;
}

/* Flex layout: empty widget columns disappear, filled ones spread evenly.
   Single row on desktop — columns shrink (min-width: 0) instead of
   wrapping; wrapping is re-enabled at the mobile breakpoint below. */
.realfactory-footer-container {
	display: flex;
	flex-wrap: nowrap;
	gap: 40px;
}
.realfactory-footer-column {
	float: none !important;
	width: auto !important;
	flex: 1 1 240px;
	min-width: 0; /* override min-width:auto so fixed-width content (FB iframe) can't force a wrap */
	border: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.realfactory-footer-column:empty { display: none; }

.realfactory-footer-wrapper .realfactory-widget-title {
	font-family: var(--po-font) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--po-white);
	margin-bottom: 24px;
}
/* The7-style short accent line under widget titles */
.realfactory-footer-wrapper .realfactory-widget-title::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin-top: 12px;
	background: var(--po-accent-soft);
}

.realfactory-footer-wrapper,
.realfactory-footer-wrapper p,
.realfactory-footer-wrapper .textwidget {
	font-size: 15px;
	line-height: 1.8;
	color: var(--po-muted);
}

.realfactory-body .realfactory-footer-wrapper a { color: var(--po-muted); }
.realfactory-body .realfactory-footer-wrapper a:hover { color: var(--po-white); }

/* Footer menu widget */
.realfactory-footer-wrapper .widget_nav_menu ul.menu { list-style: none; margin: 0; padding: 0; }
.realfactory-footer-wrapper .widget_nav_menu ul.menu li {
	margin: 0 0 10px;
	padding: 0;
	border: none;
}
.realfactory-body .realfactory-footer-wrapper .widget_nav_menu ul.menu li a {
	color: var(--po-muted);
	text-decoration: none;
	transition: color .2s ease;
}
.realfactory-body .realfactory-footer-wrapper .widget_nav_menu ul.menu li a:hover,
.realfactory-body .realfactory-footer-wrapper .widget_nav_menu ul.menu li.current-menu-item a {
	color: var(--po-white) !important;
}

/* Facebook page widget (footer col 3) — the FB iframe renders at a
   fixed 340px, so clamp it to the column so it never overflows */
.realfactory-footer-wrapper .widget_custom_html { overflow: hidden; }
.realfactory-footer-wrapper .fb-page,
.realfactory-footer-wrapper .fb-page span,
.realfactory-footer-wrapper .fb-page iframe {
	max-width: 100% !important;
}

.realfactory-copyright-wrapper {
	background-color: #0a1421 !important;
	color: var(--po-muted);
	font-family: var(--po-font);
	font-size: 13px;
	border-top: 1px solid rgba(255, 255, 255, .06);
}
.realfactory-copyright-text {
	text-align: center;
	padding-top: 28px !important;
	padding-bottom: 28px !important;
}

/* ------------------------------------------------------------------
 * 6. CARDS / CONTENT ELEMENTS
 * ------------------------------------------------------------------ */

/* News grid (shortcode [latest_news_grid]) */
.petersen-news-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
}
.petersen-news-card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	flex: 0 0 calc((100% - 48px) / 3);
	max-width: calc((100% - 48px) / 3);
	margin: 0;
	background: var(--po-light);
}
.petersen-news-card-link {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
}
.petersen-news-card-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	background: var(--po-light);
	transition: transform .4s ease;
}
.petersen-news-card:hover .petersen-news-card-image { transform: scale(1.05); }
.petersen-news-card-overlay {
	position: absolute;
	inset: 0;
	background: rgba(2, 82, 150, .88);
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	transition: opacity .3s ease;
}
.petersen-news-card:hover .petersen-news-card-overlay,
.petersen-news-card-link:focus .petersen-news-card-overlay { opacity: 1; }
.petersen-news-card-title {
	margin: 0;
	color: var(--po-white) !important;
	font-family: var(--po-font);
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
}

/* News index (page 4913) blog grid — card style matching .po-card */
.page-id-4913 .gdlr-core-blog-grid {
	background: var(--po-white);
	border: 1px solid #e4e8eb;
	margin-bottom: 30px;
	transition: box-shadow .3s ease, transform .3s ease;
}
.page-id-4913 .gdlr-core-blog-grid:hover {
	box-shadow: 0 18px 40px rgba(15, 27, 45, .1);
	transform: translateY(-4px);
}
.page-id-4913 .gdlr-core-blog-thumbnail {
	margin: 0;
	overflow: hidden;
}
.page-id-4913 .gdlr-core-blog-thumbnail img {
	display: block;
	width: 100%;
	transition: transform .4s ease;
}
.page-id-4913 .gdlr-core-blog-grid:hover .gdlr-core-blog-thumbnail img {
	transform: scale(1.05);
}
.page-id-4913 .gdlr-core-blog-grid-content-wrap {
	padding: 26px 28px 28px;
}
.page-id-4913 .gdlr-core-blog-title {
	font-size: 19px;
	font-weight: 500 !important;
	line-height: 1.4;
	margin: 0 0 10px;
}
.page-id-4913 .realfactory-body .gdlr-core-blog-title a,
.page-id-4913 .gdlr-core-blog-title a {
	color: var(--po-heading);
}
.page-id-4913 .gdlr-core-blog-title a:hover { color: var(--po-accent); }
.page-id-4913 .gdlr-core-blog-content {
	font-size: 15px;
	line-height: 1.7;
	color: var(--po-text);
}
/* Read More → quiet accent text link instead of a chunky button */
.page-id-4913 .gdlr-core-excerpt-read-more.gdlr-core-button {
	background: none !important;
	color: var(--po-accent) !important;
	padding: 0 !important;
	margin-top: 14px;
	display: inline-block;
}
.page-id-4913 .gdlr-core-excerpt-read-more.gdlr-core-button:hover {
	color: var(--po-accent-hover) !important;
}
.page-id-4913 .gdlr-core-excerpt-read-more.gdlr-core-button::after {
	content: " →";
}

/* Portfolio / blog hover overlays → blue instead of black */
.gdlr-core-image-overlay {
	background-color: rgba(2, 82, 150, .85) !important;
}

/* Square corners on common rounded elements */
.gdlr-core-blog-grid,
.gdlr-core-portfolio-thumbnail,
.gdlr-core-image-item img,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], textarea {
	border-radius: 0 !important;
}

/* Form fields */
body .realfactory-body input[type="text"],
body .realfactory-body input[type="email"],
body .realfactory-body input[type="tel"],
body .realfactory-body textarea {
	font-family: var(--po-font);
	border: 1px solid #d5dade;
	background: var(--po-white);
	color: var(--po-heading);
}
body .realfactory-body input:focus,
body .realfactory-body textarea:focus {
	border-color: var(--po-accent);
	outline: none;
}

/* ------------------------------------------------------------------
 * 7. FRONT PAGE SECTIONS (.po-*) — markup in front-page.php
 * ------------------------------------------------------------------ */

.po-front { font-family: var(--po-font); }

.po-front .po-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}

.po-front section { padding: 72px 0; }

/* Section headings */
.po-kicker {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--po-accent);
	margin: 0 0 14px;
}
.po-front .po-section-title {
	font-size: 35px;
	font-weight: 500;
	color: var(--po-heading);
	margin: 0 0 18px;
	line-height: 1.25;
}
.po-section-head { max-width: 640px; margin-bottom: 38px; }
.po-section-head p { margin: 0; color: var(--po-text); }

/* --- Hero --- */
.po-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 190px 0 120px !important;
}
.po-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1; /* gradient above the rotating slides, below the text */
	background: linear-gradient(90deg, rgba(15, 27, 45, .92) 0%, rgba(15, 27, 45, .72) 45%, rgba(15, 27, 45, .35) 100%);
}
.po-hero .po-container { position: relative; z-index: 2; }

/* Rotating hero background (same slides as the About-page poslider).
   Layers crossfade behind the stationary gradient + text; timing
   mirrors the poslider (6s per slide, 800ms fade — js/po-hero-slider.js). */
.po-hero-slides {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.po-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .8s ease;
}
.po-hero-slide.is-active { opacity: 1; }
.po-hero-inner { max-width: 640px; }
.po-hero .po-kicker { color: var(--po-accent-soft); }
.po-front .po-hero-title {
	font-size: 47px;
	font-weight: 500;
	color: var(--po-white);
	line-height: 1.2;
	margin: 0 0 22px;
}
.po-hero-text {
	font-size: 18px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .75);
	margin: 0 0 34px;
}
.po-btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* Buttons (front page) */
.po-btn {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	padding: 15px 32px;
	background: var(--po-accent);
	color: var(--po-white) !important;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}
.po-btn:hover { background: var(--po-accent-hover); }
.po-btn--ghost {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .5);
	padding: 13px 30px;
}
.po-btn--ghost:hover { background: var(--po-white); border-color: var(--po-white); color: var(--po-navy) !important; }

/* --- Feature cards --- */
.po-features { padding-top: 62px; }
.po-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.po-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }

.po-card {
	background: var(--po-white);
	border: 1px solid #e4e8eb;
	padding: 42px 34px;
	transition: box-shadow .3s ease, transform .3s ease;
}
.po-card:hover {
	box-shadow: 0 18px 40px rgba(15, 27, 45, .1);
	transform: translateY(-4px);
}
.po-card-num {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--po-accent);
	margin-bottom: 16px;
}
.po-card h3 {
	font-size: 20px;
	font-weight: 500;
	color: var(--po-heading);
	margin: 0 0 12px;
}
.po-card p { font-size: 15px; line-height: 1.7; color: var(--po-text); margin: 0; }

/* --- About / principles --- */
.po-about { background: var(--po-white); }
.po-about-cols { display: grid; grid-template-columns: 5fr 6fr; gap: 70px; align-items: start; }
.po-about-intro p { color: var(--po-text); margin: 0 0 26px; }
.po-principle {
	display: flex;
	gap: 24px;
	padding: 26px 0;
	border-bottom: 1px solid #e4e8eb;
}
.po-principle:first-child { padding-top: 0; }
.po-principle-num {
	flex: 0 0 auto;
	font-size: 27px;
	font-weight: 500;
	color: var(--po-accent);
	line-height: 1.2;
}
.po-principle h3 { font-size: 18px; font-weight: 500; color: var(--po-heading); margin: 0 0 8px; }
.po-principle p { font-size: 15px; line-height: 1.7; color: var(--po-text); margin: 0; }

/* --- Services --- */
.po-services { background: var(--po-light); }
.po-services .po-card { border: none; }

/* --- Stats band --- */
.po-stats { background: var(--po-navy); }
.po-stats .po-section-title, .po-stats .po-stat-num { color: var(--po-white); }
.po-stat { text-align: left; }
.po-stat-num {
	display: block;
	font-size: 47px;
	font-weight: 500;
	line-height: 1.1;
	margin-bottom: 10px;
}
.po-stat-label { font-size: 15px; color: #eee; }

/* --- News --- */
.po-news .po-section-head {
	display: flex;
	max-width: none;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
}
.realfactory-body .po-front .po-link-arrow {
	font-size: 15px;
	font-weight: 500;
	color: var(--po-accent);
	text-decoration: none;
	white-space: nowrap;
}
.realfactory-body .po-front .po-link-arrow:hover { color: var(--po-accent-hover); }

/* --- CTA band --- */
.po-cta { background: linear-gradient(115deg, var(--po-navy) 0%, #073e6e 45%, var(--po-accent) 100%); }
.po-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.po-cta .po-section-title { color: var(--po-white); margin: 0 0 10px; }
.po-cta p { color: rgba(255, 255, 255, .8); margin: 0; font-size: 17px; }
.realfactory-body .po-front .po-cta-phone {
	display: block;
	font-size: 27px;
	font-weight: 500;
	color: var(--po-white);
	text-decoration: none;
	margin-bottom: 18px;
}
.realfactory-body .po-front .po-cta-phone:hover { color: rgba(255, 255, 255, .8); }
.po-cta .po-btn { background: var(--po-white); color: var(--po-accent) !important; }
.po-cta .po-btn:hover { background: var(--po-navy); color: var(--po-white) !important; }
.po-cta-right { text-align: right; }

/* ------------------------------------------------------------------
 * 8. RESPONSIVE
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * Contact page — the icon-list email row is rendered as a button.
 * (Builder item title "Contact Us Today" links to mailto:sales@…;
 * previously the raw email address wrapped to a second line.)
 * ------------------------------------------------------------------ */
.gdlr-core-icon-list-item a[href^="mailto:"] {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--po-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	padding: 15px 32px;
	background: var(--po-accent);
	color: var(--po-white) !important;
	text-decoration: none;
	transition: background-color .25s ease;
}
.gdlr-core-icon-list-item a[href^="mailto:"]:hover { background: var(--po-accent-hover); }
.gdlr-core-icon-list-item a[href^="mailto:"] .gdlr-core-icon-list-icon-wrap { margin: 0 !important; }
.gdlr-core-icon-list-item a[href^="mailto:"] i { color: var(--po-white) !important; }
.gdlr-core-icon-list-item a[href^="mailto:"] .gdlr-core-icon-list-content-wrap { display: inline; }
.gdlr-core-icon-list-item a[href^="mailto:"] .gdlr-core-icon-list-content {
	color: var(--po-white) !important;
	white-space: nowrap;
}

@media (max-width: 999px) {
	.realfactory-body h1, .po-front .po-hero-title { font-size: 35px; }
	.realfactory-body h2, .po-front .po-section-title { font-size: 25px; }
	.realfactory-body h3 { font-size: 23px; }

	.po-front section { padding: 52px 0; }
	.po-hero { padding: 140px 0 80px !important; }

	.po-grid-3, .po-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	/* When the 2-col grid leaves the last feature card alone on its
	   own row, stretch it full width */
	.po-features .po-grid-3 > .po-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.po-about-cols { grid-template-columns: 1fr; gap: 45px; }
	.po-cta-right { text-align: left; }

	.petersen-news-card {
		flex-basis: calc((100% - 24px) / 2);
		max-width: calc((100% - 24px) / 2);
	}
	/* Odd post count (e.g. 3): stretch the orphaned last card full
	   width — wide banner ratio instead of a giant square */
	.petersen-news-card:last-child:nth-child(odd) {
		flex-basis: 100%;
		max-width: 100%;
		aspect-ratio: 2 / 1;
	}

	/* Footer: allow widget columns to wrap/stack on mobile */
	.realfactory-footer-container { flex-wrap: wrap; }
}

@media (max-width: 640px) {
	.po-grid-3, .po-grid-4 { grid-template-columns: 1fr; }
	.petersen-news-card { flex-basis: 100%; max-width: 100%; }
	.po-hero { padding: 120px 0 60px !important; }
}