/* ==========================================================================
   PIO-WiFi — one-page site styles
   --------------------------------------------------------------------------
   Loaded after css/custom.css. Almost every rule is scoped to #page because
   functions.php prints the ACF "Theme Settings" colour block on wp_head at
   priority 10 — i.e. AFTER this stylesheet is enqueued — so plain
   `.entry-content h2 {}` would lose the cascade tie to `.entry-content h1,
   h2, ...{color:<heading_color>}`. The #page prefix adds the id and wins.

   The page content itself is plain core Gutenberg blocks carrying only
   `className`/`anchor` attributes, so all design lives here: editors can
   rewrite every word without touching layout.
   ========================================================================== */

:root {
	--pio-navy-deep: #071b3a;
	--pio-navy: #0e2c5a;
	--pio-blue: #1c74c4;
	--pio-cyan: #2bc0e4;
	--pio-teal: #17a398;
	--pio-ink: #16263c;
	--pio-body: #4e6076;
	--pio-muted: #7d8ea3;
	--pio-line: #e3eaf2;
	--pio-tint: #f3f8fd;
	--pio-white: #fff;

	--pio-radius: 14px;
	--pio-radius-lg: 22px;
	--pio-shadow: 0 2px 4px rgba(14, 44, 90, .04), 0 12px 28px rgba(14, 44, 90, .07);
	--pio-shadow-hover: 0 4px 8px rgba(14, 44, 90, .06), 0 22px 46px rgba(14, 44, 90, .13);
	--pio-gutter: 25px;

	/* Inline SVG icons. Card icons are drawn white and used as a
	   background-image on the coloured tile (every tile they sit on is
	   dark or saturated), which keeps each icon on a single pseudo-element
	   instead of stacking an absolutely-positioned mask over a tile. */
	--pio-ic-wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'/%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'/%3E%3C/svg%3E");
	--pio-ic-hardware: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='7' rx='2'/%3E%3Crect x='2' y='13' width='20' height='7' rx='2'/%3E%3Cline x1='6' y1='7.5' x2='6.01' y2='7.5'/%3E%3Cline x1='6' y1='16.5' x2='6.01' y2='16.5'/%3E%3C/svg%3E");
	--pio-ic-portal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='18' rx='2'/%3E%3Cline x1='2' y1='8' x2='22' y2='8'/%3E%3Ccircle cx='12' cy='13' r='2.2'/%3E%3Cpath d='M8.2 18.4a4.3 4.3 0 0 1 7.6 0'/%3E%3C/svg%3E");
	--pio-ic-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6'/%3E%3Ccircle cx='16.5' cy='13' r='1.3'/%3E%3C/svg%3E");
	--pio-ic-vendo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Crect x='7' y='5' width='6' height='6' rx='1'/%3E%3Cline x1='16' y1='6' x2='17' y2='6'/%3E%3Cline x1='16' y1='9' x2='17' y2='9'/%3E%3Crect x='7' y='15' width='10' height='4' rx='1'/%3E%3C/svg%3E");
	--pio-ic-tool: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
	--pio-ic-network: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
	--pio-ic-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z'/%3E%3Cpath d='M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
	--pio-ic-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='4' width='20.4' height='16' rx='2'/%3E%3Cline x1='1.8' y1='10' x2='22.2' y2='10'/%3E%3Cline x1='5.5' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
	--pio-ic-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--pio-ic-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
	--pio-ic-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--pio-ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12,6 12,12 16,14'/%3E%3C/svg%3E");
	/* The checklist tick is a mask, so it takes its colour from CSS. */
	--pio-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

#masthead.no-scroll,
#masthead.is-sticky {
	box-shadow: 0 1px 0 var(--pio-line);
}

/* The logo is a tall lockup (wordmark + tagline + four pillar icons), so it
   needs more height than a plain wordmark before it becomes legible. */
#masthead .site-branding img {
	max-height: 78px;
	width: auto;
}

#masthead .onepress-menu > li > a {
	font-weight: 600;
	font-size: 15px;
	padding: 10px 15px;
	position: relative;
}

/* Scroll-spy: assets/theme.js walks every <section id> and puts
   .onepress-current-item on the <li> whose link ends in that hash. */
#masthead .onepress-menu > li > a::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--pio-cyan);
	transform: scaleX(0);
	transition: transform .25s ease;
}

#masthead .onepress-menu > li.onepress-current-item > a::after,
#masthead .onepress-menu > li:hover > a::after {
	transform: scaleX(1);
}

#masthead .onepress-menu > li.onepress-current-item > a {
	color: var(--pio-blue) !important;
}

/* "Contact Us" carries the menu CSS class pio-nav-cta and renders as a pill. */
#masthead .onepress-menu > li.pio-nav-cta {
	margin-left: 10px;
}

#masthead .onepress-menu > li.pio-nav-cta > a {
	background: var(--pio-blue);
	color: #fff !important;
	border-radius: 999px;
	padding: 11px 24px;
	transition: background .2s ease;
}

#masthead .onepress-menu > li.pio-nav-cta > a::after {
	display: none;
}

#masthead .onepress-menu > li.pio-nav-cta > a:hover {
	background: var(--pio-navy);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */

#page .pio-section {
	padding: 88px var(--pio-gutter);
	position: relative;
}

/* Belt-and-braces for the constrained layout: the blocks also declare
   layout.contentSize, but this guarantees the measure even if core's
   layout stylesheet is not emitted. */
#page .pio-section > * {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

#page .pio-section > *:first-child {
	margin-top: 0;
}

#page .pio-section > *:last-child {
	margin-bottom: 0;
}

#page .pio-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pio-blue);
	margin-bottom: 14px;
}

#page .pio-title {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.18;
	letter-spacing: -.01em;
	color: var(--pio-navy);
	margin: 0 0 18px;
}

#page .pio-lead {
	font-size: 17px;
	line-height: 1.72;
	color: var(--pio-body);
	max-width: 760px;
	margin: 0 auto 46px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

#page .pio-hero {
	background: linear-gradient(135deg, #071b3a 0%, #0e2c5a 42%, #1a5fa8 78%, #1c74c4 100%);
	color: #dce8f6;
	padding-top: 104px;
	padding-bottom: 104px;
	overflow: hidden;
	text-align: center;
}

#page .pio-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -12%;
	width: 720px;
	height: 720px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(43, 192, 228, .3), rgba(43, 192, 228, 0) 62%);
	pointer-events: none;
}

#page .pio-hero::after {
	content: "";
	position: absolute;
	bottom: -35%;
	left: -14%;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(28, 116, 196, .34), rgba(28, 116, 196, 0) 65%);
	pointer-events: none;
}

#page .pio-hero > * {
	position: relative;
	z-index: 2;
}

#page .pio-hero .pio-hero__badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #b7ecf9;
	background: rgba(43, 192, 228, .14);
	border: 1px solid rgba(43, 192, 228, .38);
	border-radius: 999px;
	padding: 8px 20px;
	margin-bottom: 26px;
}

#page .pio-hero h1 {
	color: #fff;
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 auto 22px;
	max-width: 900px;
}

#page .pio-hero .pio-hero__accent {
	background: linear-gradient(90deg, #35c8ea, #7fe3f7);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

#page .pio-hero .pio-hero__text {
	font-size: 18px;
	line-height: 1.7;
	color: #c2d6ec;
	max-width: 720px;
	margin: 0 auto 36px;
}

#page .pio-hero .wp-block-buttons {
	justify-content: center;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

#page .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

#page .pio-btn .wp-block-button__link {
	border-radius: 999px;
	padding: 16px 34px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

#page .pio-btn .wp-block-button__link:hover {
	transform: translateY(-2px);
}

#page .pio-btn--primary .wp-block-button__link {
	background: linear-gradient(90deg, var(--pio-cyan), #1fa9d6);
	color: #062038;
	box-shadow: 0 10px 26px rgba(43, 192, 228, .34);
}

#page .pio-btn--primary .wp-block-button__link:hover {
	background: linear-gradient(90deg, #55d3f2, var(--pio-cyan));
	color: #062038;
}

#page .pio-btn--ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}

#page .pio-btn--ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px #fff;
}

#page .pio-btn--solid .wp-block-button__link {
	background: var(--pio-blue);
	color: #fff;
	box-shadow: 0 10px 26px rgba(28, 116, 196, .28);
}

#page .pio-btn--solid .wp-block-button__link:hover {
	background: var(--pio-navy);
	color: #fff;
}

#page .pio-btn--outline .wp-block-button__link {
	background: #fff;
	color: var(--pio-navy);
	box-shadow: inset 0 0 0 1.5px var(--pio-line);
}

#page .pio-btn--outline .wp-block-button__link:hover {
	background: var(--pio-tint);
	color: var(--pio-blue);
	box-shadow: inset 0 0 0 1.5px var(--pio-blue);
}

/* --------------------------------------------------------------------------
   Cards (shared by the pillars, services and contact grids)
   -------------------------------------------------------------------------- */

#page .pio-card {
	--pio-card-icon: var(--pio-ic-wifi);
	--pio-card-tile: var(--pio-blue);
	position: relative;
	background: #fff;
	border: 1px solid var(--pio-line);
	border-radius: var(--pio-radius);
	padding: 34px 28px;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#page .pio-card:hover {
	transform: translateY(-4px);
	border-color: rgba(28, 116, 196, .32);
	box-shadow: var(--pio-shadow-hover);
}

/* One pseudo-element carries both the tile and the glyph: the icon SVG is
   the first background layer, a soft sheen the second, the tile colour the
   background-color underneath. */
#page .pio-card::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
	border-radius: 13px;
	background-color: var(--pio-card-tile);
	background-image: var(--pio-card-icon), linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
	background-repeat: no-repeat, no-repeat;
	background-position: center center, center center;
	background-size: 27px 27px, 100% 100%;
}

#page .pio-card__title {
	font-size: 19px;
	line-height: 1.32;
	color: var(--pio-navy);
	margin: 0 0 10px;
}

#page .pio-card__text {
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--pio-body);
	margin: 0;
}

#page .pio-card__meta {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pio-blue);
	margin: 0 0 10px;
}

/* Per-card icon. */
#page .pio-card--omada { --pio-card-icon: var(--pio-ic-hardware); }
#page .pio-card--portal { --pio-card-icon: var(--pio-ic-portal); }
#page .pio-card--wallet { --pio-card-icon: var(--pio-ic-wallet); }
#page .pio-card--vendo { --pio-card-icon: var(--pio-ic-vendo); }
#page .pio-card--install { --pio-card-icon: var(--pio-ic-tool); }
#page .pio-card--hotspot { --pio-card-icon: var(--pio-ic-wifi); }
#page .pio-card--network { --pio-card-icon: var(--pio-ic-network); }
#page .pio-card--payments { --pio-card-icon: var(--pio-ic-card); }
#page .pio-card--support { --pio-card-icon: var(--pio-ic-support); }
#page .pio-card--phone { --pio-card-icon: var(--pio-ic-phone); }
#page .pio-card--mail { --pio-card-icon: var(--pio-ic-mail); }
#page .pio-card--area { --pio-card-icon: var(--pio-ic-pin); }
#page .pio-card--hours { --pio-card-icon: var(--pio-ic-clock); }

/* Per-card tile colour, rotating through the logo's four brand colours. */
#page .pio-card--portal,
#page .pio-card--hotspot { --pio-card-tile: var(--pio-cyan); }
#page .pio-card--wallet,
#page .pio-card--payments { --pio-card-tile: var(--pio-teal); }
#page .pio-card--vendo,
#page .pio-card--support { --pio-card-tile: var(--pio-navy); }

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

#page .pio-grid {
	gap: 24px;
	margin-bottom: 24px;
}

#page .pio-grid:last-child {
	margin-bottom: 0;
}

#page .pio-grid .wp-block-column {
	display: flex;
}

#page .pio-grid .wp-block-column > .wp-block-group {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Pillars — the four capabilities shown along the bottom of the logo
   -------------------------------------------------------------------------- */

#page .pio-pillars {
	background: var(--pio-tint);
	padding-top: 72px;
	padding-bottom: 72px;
	border-bottom: 1px solid var(--pio-line);
}

#page .pio-pillars .pio-card {
	padding: 30px 24px;
	text-align: left;
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

#page .pio-services {
	background: #fff;
	text-align: center;
}

#page .pio-services .pio-card {
	text-align: left;
}

#page .pio-services-cta {
	margin-top: 46px;
	background: linear-gradient(120deg, var(--pio-navy) 0%, #17538f 60%, var(--pio-blue) 100%);
	border-radius: var(--pio-radius-lg);
	padding: 42px 36px;
	color: #d8e6f5;
}

#page .pio-services-cta h3 {
	color: #fff;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	margin: 0 0 10px;
}

#page .pio-services-cta p {
	font-size: 16px;
	color: #bed4ea;
	margin: 0 0 24px;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

#page .pio-about {
	background: var(--pio-tint);
}

#page .pio-about .pio-title,
#page .pio-about .pio-eyebrow {
	text-align: left;
}

#page .pio-about .pio-about__text {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--pio-body);
	margin: 0 0 18px;
}

#page .pio-about__cols {
	gap: 56px;
	align-items: flex-start;
}

#page .pio-checklist {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

#page .pio-checklist li {
	position: relative;
	padding: 0 0 0 34px;
	margin: 0 0 13px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pio-ink);
	font-weight: 500;
}

#page .pio-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: rgba(23, 163, 152, .13);
}

#page .pio-checklist li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 7px;
	width: 11px;
	height: 11px;
	background-color: var(--pio-teal);
	-webkit-mask-image: var(--pio-ic-check);
	mask-image: var(--pio-ic-check);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* Stats panel */
#page .pio-statspanel {
	background: linear-gradient(150deg, var(--pio-navy-deep) 0%, var(--pio-navy) 55%, #17538f 100%);
	border-radius: var(--pio-radius-lg);
	padding: 44px 38px;
	box-shadow: var(--pio-shadow);
	position: relative;
	overflow: hidden;
}

#page .pio-statspanel::before {
	content: "";
	position: absolute;
	top: -80px;
	right: -80px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(43, 192, 228, .3), rgba(43, 192, 228, 0) 65%);
}

#page .pio-statspanel > * {
	position: relative;
	z-index: 2;
}

#page .pio-statspanel h3 {
	color: #fff;
	font-size: 20px;
	margin: 0 0 6px;
}

#page .pio-statspanel .pio-statspanel__sub {
	color: #a9c2dc;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 30px;
}

/* Two-up grid inside the panel. Core forces `flex-wrap:nowrap!important` on
   .wp-block-columns above 782px, so the override needs !important too. */
#page .pio-stats {
	gap: 18px;
	flex-wrap: wrap !important;
}

#page .pio-stats .wp-block-column {
	flex-basis: calc(50% - 9px);
	flex-grow: 0;
	min-width: 0;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--pio-radius);
	padding: 20px 18px;
	/* Core sets word-break:break-word on columns, which hyphenates the short
	   stat labels mid-word ("INSTALLATION / S COMPLETED"). */
	word-break: normal;
	overflow-wrap: normal;
}

#page .pio-stat__num {
	color: #fff;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0 0 4px;
}

#page .pio-stat__label {
	color: #9fbbd8;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */

#page .pio-process {
	background: #fff;
	text-align: center;
	counter-reset: pio-step;
}

#page .pio-steps {
	gap: 24px;
	text-align: left;
}

#page .pio-step {
	position: relative;
	padding: 32px 26px 28px;
	border-radius: var(--pio-radius);
	background: var(--pio-tint);
	border: 1px solid var(--pio-line);
	height: 100%;
}

#page .pio-step::before {
	counter-increment: pio-step;
	content: counter(pio-step, decimal-leading-zero);
	display: block;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .04em;
	color: #fff;
	background: linear-gradient(135deg, var(--pio-blue), var(--pio-cyan));
	width: 42px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	border-radius: 12px;
	margin-bottom: 18px;
}

#page .pio-step h3 {
	font-size: 17.5px;
	color: var(--pio-navy);
	margin: 0 0 8px;
}

#page .pio-step p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--pio-body);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

#page .pio-contact {
	background: linear-gradient(160deg, var(--pio-navy-deep) 0%, var(--pio-navy) 60%, #123d75 100%);
	text-align: center;
	color: #c8dcef;
	overflow: hidden;
}

#page .pio-contact::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 900px;
	height: 900px;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle at center, rgba(43, 192, 228, .16), rgba(43, 192, 228, 0) 60%);
	pointer-events: none;
}

#page .pio-contact > * {
	position: relative;
	z-index: 2;
}

#page .pio-contact .pio-eyebrow {
	color: var(--pio-cyan);
}

#page .pio-contact .pio-title {
	color: #fff;
}

#page .pio-contact .pio-lead {
	color: #b6cee6;
}

#page .pio-contact .pio-card {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .13);
	text-align: left;
	padding: 30px 26px;
}

#page .pio-contact .pio-card:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(43, 192, 228, .45);
	box-shadow: none;
}

/* Translucent tile with the same white glyph — the panel behind it is navy,
   so the icon still reads. */
#page .pio-contact .pio-card {
	--pio-card-tile: rgba(43, 192, 228, .2);
}

#page .pio-contact .pio-card::before {
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	background-image: var(--pio-card-icon);
	background-size: 24px 24px;
	box-shadow: inset 0 0 0 1px rgba(43, 192, 228, .4);
}

#page .pio-contact .pio-card__title {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

#page .pio-contact .pio-card__text {
	color: #cfe1f2;
	font-size: 16px;
}

#page .pio-contact .pio-card__text a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(43, 192, 228, .55);
}

#page .pio-contact .pio-card__text a:hover {
	color: var(--pio-cyan);
}

#page .pio-contact-note {
	margin-top: 44px;
}

#page .pio-contact-note p {
	color: #9fbbd8;
	font-size: 15px;
	margin: 20px auto 0;
	max-width: 620px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

#colophon .site-info {
	padding: 0;
}

/* The widget renders inside #colophon .site-info > .container, which already
   supplies the horizontal gutter, so only vertical padding here. */
#page .pio-footer {
	padding: 62px 0 0;
	text-align: left;
}

#page .pio-footer__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 42px;
}

#page .pio-footer__col {
	flex: 1 1 220px;
	min-width: 0;
}

#page .pio-footer__col--wide {
	flex: 1.5 1 300px;
}

#page .pio-footer h4 {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

#page .pio-footer p {
	font-size: 15px;
	line-height: 1.72;
	margin: 0 0 12px;
}

#page .pio-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#page .pio-footer ul li {
	margin-bottom: 11px;
	font-size: 15px;
}

#page .pio-footer a {
	text-decoration: none;
}

#page .pio-footer a:hover {
	text-decoration: underline;
}

/* Text lockup rather than the logo image: the logo PNG has a white ground,
   which would sit as a bright rectangle on the navy footer.
   These carry the `p` tag in the selector so they outrank the generic
   `#page .pio-footer p` sizing above. */
#page .pio-footer p.pio-footer__brand {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 3px;
	line-height: 1.1;
}

#page .pio-footer p.pio-footer__brand-sub {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pio-cyan);
	margin: 0 0 18px;
	line-height: 1.5;
}

#page .pio-footer p.pio-footer__tagline {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.7;
	text-transform: uppercase;
	color: var(--pio-cyan);
	margin: 18px 0 0;
}

#page .pio-footer__bar {
	max-width: 1180px;
	margin: 48px auto 0;
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}

#page .pio-footer__bar p {
	margin: 0;
	font-size: 14px;
}

/* Back to top */
#back-to-top {
	background: var(--pio-blue);
	border-radius: 10px 10px 0 0;
	padding: 9px 14px;
	right: 18px;
	box-shadow: 0 -4px 14px rgba(7, 27, 58, .22);
	transition: background .2s ease;
}

#back-to-top:hover {
	background: var(--pio-navy);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Mobile drawer
   --------------------------------------------------------------------------
   css/custom.css ships this drawer in a previous project's grey/brown palette
   with hard divider lines and a flat panel. Everything below re-skins it to
   the PIO-WiFi brand. Several of the rules being overridden are !important in
   custom.css (the panel background and the hover/active link colour), so those
   overrides have to carry !important too.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {

	/* ---- Burger / close button ---------------------------------------- */

	#nav-toggle {
		width: 44px;
		height: 44px;
		line-height: 44px;
		border-radius: 12px;
		transition: background .2s ease, box-shadow .2s ease;
	}

	/* The burger bars are right-anchored and sized inconsistently across the
	   parent theme and custom.css (35px box, 36px middle bar, 30px outer
	   bars). Centre all three on the 44px button and give them one width. */
	#nav-toggle span,
	#nav-toggle span:before,
	#nav-toggle span:after {
		right: auto;
		left: 50%;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		transform: translateX(-50%);
	}

	#nav-toggle span {
		margin-top: -1px;
	}

	#nav-toggle:hover {
		background: rgba(28, 116, 196, .08);
	}

	/* Open state: a circular control sitting on the drawer itself. */
	#nav-toggle.nav-is-visible {
		top: 16px;
		right: 16px;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .1);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
	}

	#nav-toggle.nav-is-visible:hover {
		background: rgba(43, 192, 228, .22);
		box-shadow: inset 0 0 0 1px rgba(43, 192, 228, .55);
	}

	/* The parent theme forms its X by rotating the two burger bars around
	   their LEFT ends (transform-origin: 0% 50%), so the resulting glyph is
	   not centred on the element -- fine for a bare icon, visibly off-centre
	   inside a round button. Hide those bars and draw a symmetric X on the
	   toggle's own pseudo-elements, which the theme does not use. */
	#nav-toggle.nav-is-visible span {
		display: none;
	}

	#nav-toggle.nav-is-visible::before,
	#nav-toggle.nav-is-visible::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: #fff;
	}

	#nav-toggle.nav-is-visible::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	#nav-toggle.nav-is-visible::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* Clear the admin bar, which is 46px tall and not fixed at this width. */
	body.admin-bar #nav-toggle.nav-is-visible {
		top: 62px;
	}

	/* ---- Panel --------------------------------------------------------- */

	#masthead .onepress-menu {
		width: min(88vw, 340px);
		max-width: 340px;
		padding: 84px 20px calc(28px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		border-left: 1px solid rgba(43, 192, 228, .18);
		transition: right .32s cubic-bezier(.4, 0, .2, 1);
		background:
			radial-gradient(120% 55% at 100% 0%, rgba(43, 192, 228, .2), rgba(43, 192, 228, 0) 62%),
			linear-gradient(180deg, #0b2450 0%, #071b3a 100%) !important;
	}

	body.admin-bar #masthead .onepress-menu {
		padding-top: 122px;
	}

	#masthead .onepress-menu.onepress-menu-mobile {
		box-shadow: -18px 0 48px rgba(3, 12, 28, .45);
	}

	/* ---- Items --------------------------------------------------------- */

	#masthead .onepress-menu.onepress-menu-mobile li {
		background: transparent !important;
		border-top: 0;
	}

	#masthead .onepress-menu.onepress-menu-mobile > li + li {
		margin-top: 4px;
	}

	#masthead .onepress-menu.onepress-menu-mobile > li > a {
		position: relative;
		display: block;
		padding: 14px 16px;
		border-radius: 12px;
		font-size: 17px;
		font-weight: 600;
		letter-spacing: .01em;
		color: #dce8f6;
		transition: background .2s ease, color .2s ease, padding-left .2s ease;
	}

	/* Left accent bar that slides in on hover / for the current section. */
	#masthead .onepress-menu.onepress-menu-mobile > li > a::before {
		content: "";
		position: absolute;
		left: 6px;
		top: 50%;
		width: 3px;
		height: 0;
		border-radius: 3px;
		background: var(--pio-cyan);
		transform: translateY(-50%);
		transition: height .22s ease;
	}

	#masthead .onepress-menu.onepress-menu-mobile > li > a:hover,
	#masthead .onepress-menu.onepress-menu-mobile > li.current-menu-item > a,
	#masthead .onepress-menu.onepress-menu-mobile > li.onepress-current-item > a {
		background: rgba(255, 255, 255, .07);
		padding-left: 22px;
		color: #fff !important;
	}

	#masthead .onepress-menu.onepress-menu-mobile > li > a:hover::before,
	#masthead .onepress-menu.onepress-menu-mobile > li.current-menu-item > a::before,
	#masthead .onepress-menu.onepress-menu-mobile > li.onepress-current-item > a::before {
		height: 20px;
	}

	/* The desktop underline indicator has no place in the drawer. */
	#masthead .onepress-menu > li > a::after {
		display: none;
	}

	/* Sub-menus, if any are ever added. */
	#masthead .onepress-menu.onepress-menu-mobile ul li a {
		padding: 10px 16px 10px 28px;
		font-size: 15px;
		color: #a9c2dc;
	}

	/* ---- Contact CTA --------------------------------------------------- */

	#masthead .onepress-menu > li.pio-nav-cta {
		margin: 22px 0 0;
		padding-top: 22px;
		border-top: 1px solid rgba(255, 255, 255, .13);
	}

	#masthead .onepress-menu.onepress-menu-mobile > li.pio-nav-cta > a {
		background: linear-gradient(90deg, var(--pio-cyan), #1fa9d6);
		color: #062038 !important;
		text-align: center;
		border-radius: 999px;
		padding: 15px 20px;
		font-weight: 700;
		box-shadow: 0 10px 24px rgba(43, 192, 228, .26);
	}

	#masthead .onepress-menu.onepress-menu-mobile > li.pio-nav-cta > a::before {
		display: none;
	}

	#masthead .onepress-menu.onepress-menu-mobile > li.pio-nav-cta > a:hover {
		background: linear-gradient(90deg, #55d3f2, var(--pio-cyan));
		color: #062038 !important;
	}

	/* ---- Overlay ------------------------------------------------------- */

	#masthead .nav-is-visible + .overlay {
		background: #04122a;
		opacity: .62;
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}

	/* ---- Entrance ------------------------------------------------------ */

	@keyframes pio-menu-item-in {
		from { opacity: 0; transform: translateX(16px); }
		to   { opacity: 1; transform: none; }
	}

	#masthead .onepress-menu.onepress-menu-mobile > li {
		animation: pio-menu-item-in .34s cubic-bezier(.4, 0, .2, 1) both;
	}

	#masthead .onepress-menu.onepress-menu-mobile > li:nth-child(1) { animation-delay: .08s; }
	#masthead .onepress-menu.onepress-menu-mobile > li:nth-child(2) { animation-delay: .13s; }
	#masthead .onepress-menu.onepress-menu-mobile > li:nth-child(3) { animation-delay: .18s; }
	#masthead .onepress-menu.onepress-menu-mobile > li:nth-child(4) { animation-delay: .23s; }
	#masthead .onepress-menu.onepress-menu-mobile > li:nth-child(5) { animation-delay: .28s; }
	#masthead .onepress-menu.onepress-menu-mobile > li:nth-child(6) { animation-delay: .33s; }
}

@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
	#masthead .onepress-menu.onepress-menu-mobile > li {
		animation: none;
	}

	#masthead .onepress-menu {
		transition: none;
	}
}

@media (max-width: 1024px) {
	#page .pio-section {
		padding: 68px var(--pio-gutter);
	}

	#page .pio-hero {
		padding-top: 84px;
		padding-bottom: 84px;
	}

	#page .pio-about__cols {
		gap: 40px;
	}
}

/* Core stacks columns below 782px; make the card grids two-up on tablets
   before that so the 3-column service rows do not look sparse. */
@media (min-width: 782px) and (max-width: 980px) {
	#page .pio-grid,
	#page .pio-steps {
		flex-wrap: wrap !important;
	}

	#page .pio-grid .wp-block-column,
	#page .pio-steps .wp-block-column {
		flex-basis: calc(50% - 12px) !important;
		flex-grow: 0;
	}
}

@media (max-width: 781px) {
	#page .pio-section {
		padding: 56px 20px;
	}

	#page .pio-hero {
		padding-top: 66px;
		padding-bottom: 66px;
	}

	#page .pio-grid,
	#page .pio-steps,
	#page .pio-about__cols {
		gap: 18px;
	}

	#page .pio-statspanel,
	#page .pio-services-cta {
		padding: 32px 24px;
	}

	#page .pio-stats {
		gap: 14px;
	}

	#page .pio-stats .wp-block-column {
		flex-basis: calc(50% - 7px);
	}

	#page .pio-lead {
		margin-bottom: 34px;
	}

	#page .pio-footer {
		padding-top: 48px;
	}

	#page .pio-footer__inner {
		gap: 30px;
	}

	#page .pio-footer__bar {
		justify-content: flex-start;
	}
}

@media (max-width: 520px) {
	/* Once the buttons stack, letting them size to their labels leaves a
	   ragged column; match their widths instead. */
	#page .wp-block-buttons .wp-block-button {
		width: 100%;
	}

	#page .pio-btn .wp-block-button__link {
		display: block;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
}