/*
Theme Name: Konnekt IT
Theme URI: https://konnekt-it.ru/
Author: Konnekt IT
Description: Lightweight service landing and public editorial templates for Konnekt IT.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: konnekt-it
*/

:root {
	color-scheme: light;
	--ink: #15243a;
	--ink-soft: #3f526a;
	--muted: #52657b;
	--line: #dce4ed;
	--paper: #f5f8fc;
	--surface: #ffffff;
	--blue: #145ac5;
	--blue-deep: #0b438f;
	--cyan: #12a5cf;
	--purple: #7250b8;
	--green: #6ba82a;
	--lime: #79b929;
	--wrap: 78rem;
	--radius: 1.1rem;
	--shadow-soft: 0 20px 55px rgba(30, 58, 89, 0.08);
	--focus: 0 0 0 3px #ffffff, 0 0 0 6px #145ac5;
	font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
	color: var(--ink);
	background: var(--paper);
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	min-width: 20rem;
	background: var(--paper);
	font-size: 100%;
	line-height: 1.55;
	scroll-behavior: smooth;
	scroll-padding-top: 1rem;
}

body {
	min-width: 20rem;
	margin: 0;
	background: var(--paper);
}

img,
svg {
	max-width: 100%;
}

a {
	color: var(--blue-deep);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover {
	color: #092e65;
}

a:focus-visible,
button:focus-visible {
	border-radius: 0.35rem;
	box-shadow: var(--focus);
	outline: 0;
}

.wrap {
	width: min(calc(100% - 3rem), var(--wrap));
	margin-inline: auto;
}

.skip-link {
	position: absolute;
	z-index: 1000;
	top: 0.5rem;
	left: 0.5rem;
	padding: 0.7rem 1rem;
	transform: translateY(-150%);
	border-radius: 0.35rem;
	background: var(--ink);
	color: white;
}

.skip-link:focus {
	transform: translateY(0);
	color: white;
}

.concept-notice {
	min-height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem 1.5rem;
	padding: 0.35rem 1rem;
	background: var(--ink);
	color: #f2f6fb;
	font-size: 0.76rem;
	letter-spacing: 0.015em;
	text-align: center;
}

.concept-notice span:first-child {
	color: #a3dfff;
	font-weight: 750;
}

.site-header {
	position: relative;
	z-index: 20;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid #e6ebf1;
}

.header-inner {
	min-height: 7.3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 2.4vw, 2.5rem);
}

.brand,
.footer-brand {
	width: 7.5rem;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.brand img,
.footer-brand img {
	display: block;
	width: 100%;
	height: auto;
}

.primary-navigation {
	margin-left: auto;
}

.primary-navigation ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.1vw, 2rem);
	padding: 0;
	margin: 0;
	list-style: none;
}

.primary-navigation a,
.header-phone {
	color: #30435b;
	font-size: 0.91rem;
	font-weight: 690;
	text-decoration: none;
}

.utility-navigation { flex:0 1 auto; }
.utility-navigation ul,.footer-navigation ul { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem .8rem; padding:0; margin:0; list-style:none; }
.utility-navigation a,.footer-navigation a { color:var(--muted); font-size:.76rem; font-weight:650; text-decoration:none; }
.footer-navigation a { min-height:2.4rem; display:inline-flex; align-items:center; }

.primary-navigation a {
	position: relative;
	padding-block: 0.65rem;
}

.primary-navigation a::after {
	position: absolute;
	right: 0;
	bottom: 0.35rem;
	left: 0;
	height: 0.13rem;
	border-radius: 1rem;
	background: var(--blue);
	content: "";
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 150ms ease-out;
}

.primary-navigation a:hover::after,
.primary-navigation a:focus-visible::after {
	transform: scaleX(1);
}

.header-contact {
	min-width: 0;
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-phone {
	white-space: nowrap;
}

.header-contact .button { max-width: 14rem; }

.button {
	max-width: 100%;
	min-height: 3.2rem;
	min-width: 3.2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	padding: 0.8rem 1.25rem;
	border: 1px solid var(--blue);
	border-radius: 0.62rem;
	background: var(--blue);
	box-shadow: 0 9px 23px rgba(20, 90, 197, 0.18);
	color: #ffffff;
	font-size: 0.94rem;
	font-weight: 760;
	text-decoration: none;
	overflow-wrap: anywhere;
	white-space: normal;
	transition: background-color 140ms ease-out, transform 140ms ease-out, box-shadow 140ms ease-out;
}

.button:hover {
	transform: translateY(-1px);
	background: var(--blue-deep);
	border-color: var(--blue-deep);
	box-shadow: 0 12px 27px rgba(20, 90, 197, 0.24);
	color: #ffffff;
}

.button-small {
	min-height: 2.85rem;
	padding: 0.6rem 1rem;
	font-size: 0.84rem;
}

.menu-toggle {
	display: none;
	min-width: 2.85rem;
	min-height: 2.85rem;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 0.55rem;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 700;
}

.menu-toggle-icon {
	width: 1rem;
	display: grid;
	gap: 0.23rem;
}

.menu-toggle-icon span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.section-space {
	padding-block: clamp(4.4rem, 8vw, 7.5rem);
}

.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 4.5vw, 4rem);
	background:
		radial-gradient(ellipse at 83% 23%, rgba(81, 171, 220, 0.12), transparent 28rem),
		linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%);
	border-bottom: 1px solid var(--line);
}

.hero-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	align-items: center;
	gap: clamp(2rem, 3.6vw, 3.5rem);
}

.hero-copy {
	min-width: 0;
	max-width: 43rem;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	color: var(--blue-deep);
	font-size: 0.73rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.eyebrow-dot {
	width: 0.55rem;
	height: 0.55rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 62%, var(--green) 100%);
}

h1,
h2,
h3,
h4,
p {
	margin-top: 0;
}

h1,
h2,
h3 {
	color: var(--ink);
	font-weight: 770;
	letter-spacing: -0.045em;
}

h1 {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	margin-bottom: 1.35rem;
	font-size: clamp(3rem, 4.1vw, 3.75rem);
	line-height: 1.04;
}

@media (min-width: 58rem) {
	.hero-nobreak {
		white-space: nowrap;
	}
}

.hero-lead {
	max-width: 39rem;
	margin-bottom: 1.75rem;
	color: var(--ink-soft);
	font-size: clamp(1.05rem, 1.4vw, 1.21rem);
	line-height: 1.63;
}

.hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1.45rem;
}

.text-link {
	color: #344b68;
	font-size: 0.94rem;
	font-weight: 730;
	text-decoration: none;
}

.text-link span {
	margin-left: 0.3rem;
	color: var(--blue);
}

.text-link:hover {
	text-decoration: underline;
}

.hero-note {
	margin: 1.5rem 0 0;
	color: var(--muted);
	font-size: 0.83rem;
}

.integration-map {
	position: relative;
	min-width: 0;
	padding: 1.55rem;
	margin: 0;
	border: 1px solid #d9e4ef;
	border-radius: 1.1rem;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: var(--shadow-soft);
}

.map-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin-bottom: 1.35rem;
}

.map-kicker {
	color: var(--ink);
	font-size: 0.95rem;
	font-weight: 760;
}

.map-caption {
	color: var(--muted);
	font-size: 0.74rem;
}

.flow-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.7rem minmax(0, 1fr) 1.7rem minmax(0, 1fr);
	align-items: center;
}

.flow-node {
	min-height: 8.8rem;
	display: grid;
	grid-template-rows: 1rem 2.6em 2.7em;
	align-content: center;
	row-gap: 0.35rem;
	padding: 0.9rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: 0.7rem;
	background: #ffffff;
	color: var(--ink);
	text-decoration: none;
	transition: transform 170ms ease-out, border-color 170ms ease-out, box-shadow 170ms ease-out;
}

.flow-node:hover,
.flow-node:focus-visible {
	border-color: var(--node-color, var(--blue));
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(21, 36, 58, 0.1);
	color: var(--ink);
}

.node-web { --node-color: var(--blue); }
.node-crm { --node-color: var(--purple); }
.node-ops { --node-color: var(--cyan); }

.node-ops .node-index {
	color: #087394;
}

.node-index {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: var(--node-color, #087394);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.node-index::before {
	width: 0.52rem;
	height: 0.52rem;
	flex: 0 0 auto;
	border: 2px solid var(--node-color, var(--blue));
	border-radius: 50%;
	background: #ffffff;
	content: "";
}

.flow-node.is-current .node-index::before {
	background: var(--node-color, var(--blue));
	box-shadow: 0 0 0 4px rgba(20, 90, 197, 0.16);
}

.flow-node.is-visited .node-index::before {
	background: var(--node-color, var(--blue));
}

.flow-node.is-current {
	border-color: var(--node-color, var(--blue));
	box-shadow: 0 6px 18px rgba(21, 36, 58, 0.12);
}

.flow-node.is-visited {
	border-color: #b3c8dd;
}

.node-title {
	font-size: 0.88rem;
	font-weight: 760;
	line-height: 1.3;
}

.node-meta {
	align-self: start;
	margin: 0;
	color: var(--muted);
	font-size: 0.75rem;
	line-height: 1.35;
}

.flow-link {
	position: relative;
	height: 2px;
	background: var(--line);
	transition: background-color 180ms ease-out, box-shadow 180ms ease-out;
}

.flow-link::after {
	position: absolute;
	top: -0.24rem;
	right: 0;
	width: 0.55rem;
	height: 0.55rem;
	border-top: 2px solid #8b9bad;
	border-right: 2px solid #8b9bad;
	content: "";
	transform: rotate(45deg);
	transition: border-color 180ms ease-out;
}

.flow-link.is-current,
.flow-link.is-visited {
	background: var(--blue);
	box-shadow: 0 0 0 2px rgba(20, 90, 197, 0.12);
}

.flow-link.is-current::after,
.flow-link.is-visited::after {
	border-color: var(--blue);
}

.map-demo-control {
	min-height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.8rem;
}

.map-demo-status {
	margin: 0;
	color: var(--muted);
	font-size: 0.75rem;
}

.map-replay {
	min-height: 2.5rem;
	flex: 0 0 auto;
	padding: 0.48rem 0.75rem;
	border: 1px solid #b7cce3;
	border-radius: 0.5rem;
	background: #ffffff;
	color: var(--blue-deep);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 720;
	cursor: pointer;
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.map-replay:hover:not(:disabled),
.map-replay:focus-visible {
	border-color: var(--blue);
	background: #eef5fc;
}

.map-replay:disabled {
	cursor: progress;
}

.infrastructure-rail {
	margin-top: 1.15rem;
	padding: 0.8rem 0.9rem;
	border-radius: 0.65rem;
	background: #f0f5f9;
}

.rail-label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.rail-tags a,
.scenario-tags span {
	display: inline-flex;
	align-items: center;
	min-height: 1.8rem;
	padding: 0.28rem 0.55rem;
	border: 1px solid #d8e2ec;
	border-radius: 99px;
	background: #ffffff;
	color: #40556e;
	font-size: 0.69rem;
	font-weight: 680;
	text-decoration: none;
}

.rail-tags a:hover,
.rail-tags a:focus-visible {
	border-color: #9abce5;
	color: var(--blue-deep);
	transform: translateY(-1px);
}

.service-section {
	background: var(--paper);
}

.section-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.63fr);
	align-items: end;
	gap: 2rem;
	margin-bottom: 2.6rem;
}

.section-intro .eyebrow {
	margin-bottom: 1rem;
}

h2 {
	margin-bottom: 0;
	font-size: clamp(2.15rem, 4vw, 3.45rem);
	line-height: 1.08;
}

h2 span {
	color: var(--blue);
}

.section-lead {
	max-width: 34rem;
	margin: 0 0 0.25rem;
	color: var(--ink-soft);
	font-size: 1rem;
	line-height: 1.65;
}

.examples-copy p { margin:0; }
.examples-copy .scenario-disclosure { margin-top:.35rem; color:var(--muted); font-size:.82rem; }

.service-groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.service-group {
	min-width: 0;
	display: grid;
	grid-template-rows: 7.4rem repeat(2, minmax(8.8rem, auto));
	padding: 0.8rem 1.25rem 0.6rem;
	background: transparent;
}

.service-group + .service-group {
	border-left: 1px solid var(--line);
}

.group-heading {
	min-height: 7.4rem;
	display: grid;
	grid-template-rows: auto minmax(3.2rem, max-content);
	align-content: start;
	row-gap: 0.55rem;
	padding-bottom: 1.15rem;
	border-bottom: 1px solid #e6ebf1;
}

.group-number {
	display: inline-block;
	margin: 0;
	color: var(--blue);
	font-size: 0.69rem;
	font-weight: 820;
	letter-spacing: 0.13em;
}

.group-operations .group-number { color: #087c9f; }
.group-continuity .group-number { color: #63429c; }

.group-heading h3 {
	margin: 0;
	font-size: 1.28rem;
	line-height: 1.25;
}

.service-item {
	min-height: 8.8rem;
	display: grid;
	grid-template-columns: 2.35rem minmax(0, 1fr);
	align-items: start;
	gap: 0.75rem;
	padding-block: 1.15rem;
}

.service-item + .service-item {
	border-top: 1px solid #edf0f4;
}

.service-mark {
	width: 2.1rem;
	height: 2.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--blue);
}

.service-mark svg,
.office-core-icon svg,
.office-icon svg,
.doc-glyph svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.65;
}

.service-mark svg {
	display: block;
}

.mark-purple { color: #66449f; }
.mark-cyan { color: #087c9f; }
.mark-green { color: #507d20; }
.mark-lime { color: #527c20; }
.mark-navy { color: var(--ink); }

.service-item:target {
	border-radius: 0.45rem;
	background: #eef5fc;
	box-shadow: 0 0 0 0.55rem #eef5fc;
	scroll-margin-block: 1rem;
}

.service-item:focus {
	outline: 2px solid var(--blue);
	outline-offset: 0.2rem;
}

.service-item h4 {
	min-width: 0;
	margin: 0 0 0.35rem;
	color: var(--ink);
	font-size: 0.96rem;
	font-weight: 760;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.service-item > div { min-width:0; }

.service-item p {
	min-width: 0;
	margin: 0;
	color: var(--muted);
	font-size: 0.8rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.examples-section {
	background: #eaf0f7;
	border-block: 1px solid #dbe4ee;
}

.examples-intro {
	margin-bottom: 2.4rem;
}

.scenario-list {
	display: grid;
	gap: 1rem;
}

.scenario {
	min-width: 0;
	min-height: 19.5rem;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(22rem, 1.15fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 6rem);
	padding: clamp(1.5rem, 4vw, 3.25rem);
	border: 1px solid #d7e1ec;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: 0 9px 27px rgba(33, 60, 89, 0.045);
}

.scenario:nth-child(even) {
	grid-template-columns: minmax(22rem, 1.15fr) minmax(0, 0.85fr);
}

.scenario:nth-child(even) .scenario-copy {
	grid-column: 2;
	grid-row: 1;
}

.scenario:nth-child(even) .scenario-visual {
	grid-column: 1;
	grid-row: 1;
}

.scenario-copy {
	max-width: 34rem;
}

.scenario-label {
	display: flex;
	justify-content: space-between;
	gap: 0.8rem;
	margin: 0 0 0.8rem;
	color: var(--blue-deep);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.scenario-label span:last-child {
	color: #586d86;
	white-space: nowrap;
}

.scenario h3 {
	max-width: 21ch;
	min-width: 0;
	margin: 0 0 0.8rem;
	font-size: clamp(1.55rem, 2.6vw, 2.15rem);
	line-height: 1.14;
	overflow-wrap: anywhere;
}

.scenario-copy > p:not(.scenario-label) {
	min-width: 0;
	margin-bottom: 1rem;
	color: var(--ink-soft);
	font-size: 0.94rem;
	line-height: 1.62;
	overflow-wrap: anywhere;
}

.scenario-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.scenario-visual {
	min-width: 0;
	min-height: 13.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.5rem;
	border: 1px solid #e4ebf2;
	border-radius: 0.9rem;
	background: linear-gradient(145deg, #f8fbfe, #eff5fb);
}

.request-flow {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.request-step {
	min-width: 0;
	position: relative;
	display: grid;
	grid-template-rows: 2rem auto minmax(2.6em, auto);
	align-content: center;
	justify-items: center;
	gap: 0.5rem;
	padding: 1rem 0.5rem;
	border: 1px solid #d5e2ee;
	border-radius: 0.65rem;
	background: #fff;
	text-align: center;
}

.request-step-icon {
	width: 2rem;
	height: 2rem;
	color: var(--blue);
}

.request-step-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.request-step:nth-child(2) .request-step-icon { color: var(--purple); }
.request-step:nth-child(3) .request-step-icon { color: #477c27; }

.request-step-title {
	color: var(--ink);
	font-size: 0.85rem;
	font-weight: 760;
	line-height: 1.3;
}

.request-step-note {
	max-width: 100%;
	color: var(--muted);
	font-size: 0.75rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.request-step:not(:last-child)::after {
	position: absolute;
	top: 50%;
	left: calc(100% + 0.4rem);
	width: 0.95rem;
	height: 2px;
	background: #5389cf;
	content: "";
}

.request-step:not(:last-child)::before {
	position: absolute;
	top: calc(50% - 0.2rem);
	left: calc(100% + 0.9rem);
	width: 0.5rem;
	height: 0.5rem;
	border-top: 2px solid #5389cf;
	border-right: 2px solid #5389cf;
	content: "";
	transform: rotate(45deg);
}

.doc-link {
	position: relative;
	width: 2rem;
	height: 2px;
	flex: 0 0 auto;
	background: #5389cf;
}

.doc-link::after {
	position: absolute;
	top: -0.23rem;
	right: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-top: 2px solid #5389cf;
	border-right: 2px solid #5389cf;
	content: "";
	transform: rotate(45deg);
}

.docs-flow {
	gap: clamp(0.35rem, 1.3vw, 1rem);
}

.doc-node {
	width: 6.1rem;
	min-height: 7.2rem;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	border: 1px solid #d8e2ec;
	border-radius: 0.7rem;
	background: #ffffff;
	box-shadow: 0 7px 18px rgba(28, 58, 91, 0.06);
	color: var(--ink);
	font-size: 0.8rem;
	font-weight: 760;
}

.doc-node-main {
	border-color: #d5caea;
	box-shadow: 0 8px 20px rgba(114, 80, 184, 0.11);
}

.doc-node small {
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 600;
}

.doc-glyph {
	width: 2.15rem;
	height: 2.15rem;
	display: grid;
	place-items: center;
	color: var(--blue);
}

.doc-glyph-paper { color: var(--purple); }
.doc-glyph-cyan { color: #087c9f; }
.doc-link { width: clamp(0.7rem, 2vw, 1.4rem); }
.doc-link-purple { background: #8b6bc1; }
.doc-link-purple::after { border-color: #8b6bc1; }

.office-map {
	position: relative;
	min-height: 15rem;
	justify-content: center;
	background-color: #f8fbfe;
	background-image: radial-gradient(#d5e0ed 1px, transparent 1px);
	background-size: 1rem 1rem;
}

.office-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: #6d96c9;
	stroke-dasharray: 4 4;
	stroke-width: 1.5;
}

.office-core,
.office-node {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid #d5e0ec;
	border-radius: 0.55rem;
	background: #ffffff;
	box-shadow: 0 5px 14px rgba(26, 57, 90, 0.08);
	color: #354a63;
	font-size: 0.75rem;
	font-weight: 730;
}

.office-core {
	top: 50%;
	left: 50%;
	min-width: 8.2rem;
	min-height: 3.1rem;
	border-color: #acc9e7;
	transform: translate(-50%, -50%);
}

.office-core-icon,
.office-icon {
	width: 1.2rem;
	height: 1.2rem;
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--blue);
}

.office-core-icon { width: 1.35rem; height: 1.35rem; }

.office-node {
	min-width: 5.8rem;
}

.office-wifi { top: 8%; left: 8%; }
.office-server { top: 8%; right: 8%; }
.office-access { bottom: 8%; left: 8%; }
.office-backup { right: 8%; bottom: 8%; }
.office-access .office-icon { color: var(--purple); }
.office-backup .office-icon { color: #587f2a; }

.contact-section {
	background: var(--paper);
}

.contact-panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2rem;
	padding: clamp(2rem, 5vw, 4rem);
	overflow: hidden;
	border-radius: 1.25rem;
	background:
		radial-gradient(circle at 96% 0%, rgba(33, 165, 207, 0.22), transparent 18rem),
		linear-gradient(115deg, #162942, #17385d);
	color: #ffffff;
}

.contact-panel::after {
	position: absolute;
	right: -2rem;
	bottom: -7rem;
	width: 18rem;
	height: 18rem;
	border: 1px solid rgba(211, 228, 248, 0.18);
	border-radius: 50%;
	content: "";
}

.contact-copy,
.contact-actions {
	position: relative;
	z-index: 1;
}

.contact-copy .eyebrow {
	color: #bbdbff;
}

.contact-copy h2 {
	max-width: 17ch;
	min-width: 0;
	color: #ffffff;
	font-size: clamp(2rem, 3.8vw, 3.25rem);
}

.contact-copy p:last-child {
	margin: 0.85rem 0 0;
	color: #d9e6f6;
}

.contact-actions {
	min-width: 14rem;
	display: grid;
	justify-items: start;
	gap: 0.7rem;
}

.button-light {
	border-color: #ffffff;
	background: #ffffff;
	box-shadow: none;
	color: #153253;
}

.button-light:hover {
	border-color: #eaf2fb;
	background: #eaf2fb;
	color: #153253;
}

.contact-email {
	padding: 0.3rem 0.15rem;
	min-width: 0;
	max-width: 100%;
	color: #ffffff;
	font-size: 0.92rem;
	font-weight: 680;
	overflow-wrap: anywhere;
}

.contact-email:hover {
	color: #d5e9ff;
}

.site-footer {
	background: #ffffff;
	border-top: 1px solid var(--line);
}

.footer-inner {
	min-height: 6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.75rem;
}

.footer-brand {
	width: 5.5rem;
}

.footer-inner p {
	margin: 0;
	color: var(--muted);
	font-size: 0.76rem;
}

.footer-top-link {
	color: #405673;
	font-size: 0.82rem;
	font-weight: 720;
	text-decoration: none;
}

@media (max-width: 72rem) {
	.wrap {
		width: min(calc(100% - 2.5rem), var(--wrap));
	}

	.header-inner {
		gap: 1.2rem;
		flex-wrap: wrap;
	}

	.brand {
		width: 6.75rem;
	}

	.header-contact {
		gap: 0.75rem;
	}

	.header-phone {
		font-size: 0.83rem;
	}

	.scenario {
		gap: 2rem;
	}
}

@media (max-width: 58rem) {
	.hero-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.header-inner {
		min-height: 6.6rem;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-block: 0.45rem;
	}

	.brand {
		width: 6.5rem;
	}

	.primary-navigation {
		order: 3;
		width: 100%;
		margin: 0;
	}

	.primary-navigation ul {
		justify-content: center;
		gap: 2rem;
		padding-bottom: 0.4rem;
	}

	.header-contact {
		margin-left: auto;
		gap: .65rem;
	}
	.utility-navigation { order:4; width:100%; }
	.utility-navigation ul { justify-content:center; }

	.service-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.service-group + .service-group {
		padding-left: 1.5rem;
	}

	.service-group:last-child {
		grid-column: 1 / -1;
		border-top: 1px solid var(--line);
		border-left: 0;
		padding-top: 1.2rem;
	}

	.service-group:last-child .group-heading {
		min-height: 0;
	}

	.service-group:last-child {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.25rem;
	}

	.service-group:last-child .group-heading {
		grid-column: 1 / -1;
	}

	.scenario,
	.scenario:nth-child(even) {
		grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1.15fr);
		gap: 1.5rem;
		padding: 1.6rem;
	}

	.scenario:nth-child(even) .scenario-copy {
		grid-column: 1;
	}

	.scenario:nth-child(even) .scenario-visual {
		grid-column: 2;
	}
}

@media (max-width: 44rem) {
	.wrap {
		width: min(calc(100% - 2rem), var(--wrap));
	}

	.concept-notice {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.1rem;
		padding: 0.42rem 1rem;
		font-size: 0.68rem;
		text-align: left;
	}

	.header-inner {
		min-height: 0;
		position: relative;
		gap: 0.7rem;
		padding-block: 0.5rem 0.7rem;
	}

	.brand {
		width: 6.25rem;
	}

	.menu-toggle {
		order: 2;
		display: inline-flex;
		margin-left: auto;
	}

	.header-contact {
		order: 3;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0.5rem;
		padding-top: 0.55rem;
		border-top: 1px solid #edf0f4;
	}
	.utility-navigation { order:5; width:100%; }
	.utility-navigation ul { justify-content:flex-start; }

	.header-phone {
		font-size: 0.86rem;
	}

	.header-contact .button {
		min-height: 2.65rem;
		padding: 0.55rem 0.8rem;
		font-size: 0.78rem;
	}

	.primary-navigation {
		order: 4;
		width: 100%;
	}

	.primary-navigation ul {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
		padding: 0.3rem 0 0;
	}

	.primary-navigation li + li {
		border-top: 1px solid #e7edf3;
	}

	.primary-navigation a {
		min-height: 2.75rem;
		display: flex;
		align-items: center;
	}

	.primary-navigation a::after {
		bottom: 0.2rem;
		width: 2rem;
	}

	.js .primary-navigation[hidden] {
		display: none;
	}

	.hero {
		padding-block: 3.3rem 3.6rem;
	}

	.hero-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	h1 {
		font-size: clamp(2.55rem, 9.8vw, 3.8rem);
	}

	.integration-map {
		padding: 1rem;
	}

	.flow-grid {
		grid-template-columns: minmax(0, 1fr) 1.15rem minmax(0, 1fr) 1.15rem minmax(0, 1fr);
	}

	.flow-node {
		min-height: 7.7rem;
		padding: 0.65rem 0.55rem;
	}

	.node-title {
		font-size: 0.76rem;
	}

	.node-meta {
		font-size: 0.75rem;
	}

	.section-intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		margin-bottom: 1.8rem;
	}

	.service-groups {
		grid-template-columns: minmax(0, 1fr);
	}

	.service-group,
	.service-group + .service-group {
		grid-template-rows: auto;
		padding: 1rem 0;
		border-right: 0;
		border-bottom: 1px solid var(--line);
		border-left: 0;
	}

	.service-group:last-child {
		grid-column: auto;
		display: block;
		border-top: 0;
	}

	.service-group:last-child .group-heading {
		min-height: 0;
	}

	.group-heading {
		min-height: 0;
	}

	.scenario,
	.scenario:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.3rem;
		padding: 1.25rem;
	}

	.scenario:nth-child(even) .scenario-copy,
	.scenario:nth-child(even) .scenario-visual {
		grid-column: 1;
		grid-row: auto;
	}

	.scenario-visual {
		min-height: 12rem;
		padding: 1rem 0.7rem;
	}

	.docs-flow {
		gap: 0.5rem;
	}

	.doc-node {
		width: 5.2rem;
		min-height: 6.7rem;
	}

	.doc-link {
		width: 0.7rem;
	}

	.office-map {
		min-height: 13.5rem;
	}

	.office-node {
		min-width: 5.1rem;
		gap: 0.25rem;
		padding: 0.45rem 0.5rem;
		font-size: 0.75rem;
	}

	.contact-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
		padding: 1.6rem;
	}

	.contact-actions {
		min-width: 0;
		justify-items: stretch;
	}

	.contact-actions .button {
		width: 100%;
	}

	.contact-email {
		text-align: center;
	}

	.footer-inner {
		min-height: 0;
		flex-wrap: wrap;
		gap: 0.65rem 1rem;
		padding-block: 1rem;
	}

	.footer-inner p {
		flex: 1 1 65%;
	}

	.footer-top-link {
		margin-left: auto;
	}
}

@media (max-width: 23rem) {
	.wrap {
		width: calc(100% - 1.5rem);
	}

	.hero-actions {
		align-items: flex-start;
		flex-direction: column;
	}

	.flow-grid {
		grid-template-columns: minmax(0, 1fr) 0.7rem minmax(0, 1fr) 0.7rem minmax(0, 1fr);
	}

	.flow-node {
		min-height: 7.2rem;
		padding-inline: 0.4rem;
	}

	.map-demo-control {
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-block: 0.3rem;
	}

	.node-title {
		font-size: 0.75rem;
	}

	.node-meta {
		font-size: 0.75rem;
	}

	.infrastructure-rail {
		padding: 0.7rem;
	}

	.office-node {
		min-width: 4.6rem;
		font-size: 0.75rem;
	}
}

@media (max-width: 26rem) {
	.docs-flow {
		flex-direction: column;
		gap: 0.25rem;
	}

	.doc-node {
		width: min(100%, 4.7rem);
		min-height: 5.6rem;
	}

	.doc-link {
		width: 2px;
		height: 0.6rem;
	}

	.doc-link::after {
		top: auto;
		right: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%) rotate(135deg);
	}
}

@media (max-width: 30rem) {
	.request-flow { grid-template-columns: minmax(0, 1fr); }
	.request-step {
		grid-template-columns: 2rem minmax(0, 1fr);
		grid-template-rows: auto auto;
		justify-items: start;
		gap: 0.25rem 0.8rem;
		padding: 0.85rem 1rem;
		text-align: left;
	}
	.request-step-icon { grid-row: 1 / 3; align-self: center; }
	.request-step:not(:last-child)::after {
		top: calc(100% + 0.4rem);
		left: 50%;
		width: 2px;
		height: 0.95rem;
	}
	.request-step:not(:last-child)::before {
		top: calc(100% + 0.85rem);
		left: calc(50% - 0.18rem);
		transform: rotate(135deg);
	}
}

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

	.flow-node:hover,
	.flow-node:focus-visible,
	.rail-tags a:hover,
	.rail-tags a:focus-visible {
		transform: none;
	}
}
/* WordPress content templates share the concept palette and remain readable. */
.screen-reader-text:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-shell { width:min(calc(100% - 3rem), var(--wrap)); margin-inline:auto; }
.main-content:not(.home-landing) { min-height:55vh; padding-block:clamp(3rem,7vw,6rem); }
.main-content:not(.home-landing) .site-shell { min-width:0; }
.archive-intro { padding-block:0 2rem; border-bottom:1px solid var(--line); }
.archive-intro .entry-title, .entry-title { max-width:24ch; min-width:0; margin:0; font-size:clamp(2.25rem,5vw,4rem); line-height:1.1; overflow-wrap:anywhere; }
.entry-header { margin-bottom:2rem; }
.entry-content { max-width:54rem; color:var(--ink-soft); font-size:1.05rem; line-height:1.78; overflow-wrap:anywhere; }
.entry-content h2,.entry-content h3,.entry-content h4 { color:var(--ink); line-height:1.2; }
.entry-content h2 { margin-top:2em; font-size:clamp(1.6rem,3vw,2.3rem); }
.entry-content h3 { margin-top:1.7em; font-size:1.5rem; }
.entry-content blockquote { margin:2rem 0; padding:.35rem 0 .35rem 1.2rem; border-left:3px solid var(--blue); color:var(--ink-soft); }
.entry-content pre { max-width:100%; padding:1rem; overflow:auto; background:#eaf0f7; }
.entry-content table { max-width:100%; border-collapse:collapse; }
.entry-content td,.entry-content th { padding:.6rem; border:1px solid var(--line); text-align:left; vertical-align:top; }
.entry-content img,.entry-featured-image { max-width:100%; height:auto; border-radius:.5rem; }
.entry-featured-image { display:block; margin-bottom:2rem; }
.content-section { padding-block:2.5rem; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; margin-top:2rem; }
.post-card { min-width:0; padding:1.25rem; border:1px solid var(--line); border-radius:.75rem; background:var(--surface); }
.post-card h3 { margin-bottom:.55rem; font-size:1.25rem; line-height:1.28; overflow-wrap:anywhere; }
.post-card h3 a { color:var(--ink); text-decoration:none; }
.post-card h3 a:hover { color:var(--blue-deep); text-decoration:underline; }
.post-card-excerpt,.post-meta,.archive-description { color:var(--muted); overflow-wrap:anywhere; }
.empty-state { padding:1.5rem; border:1px dashed #aab9c9; border-radius:.75rem; background:var(--surface); color:var(--ink-soft); }
.pagination .nav-links { display:flex; justify-content:center; gap:.5rem; margin-top:2rem; }
.pagination .page-numbers { min-width:2.75rem; min-height:2.75rem; display:inline-grid; place-items:center; padding:.4rem .7rem; border:1px solid var(--line); border-radius:.45rem; background:#fff; text-decoration:none; }
.pagination .current { background:var(--blue-deep); color:#fff; }
.search-tools,.recovery-search { width:min(100%,32rem); margin-top:1.25rem; }
.search-form { display:flex; align-items:stretch; gap:.35rem; min-width:0; width:100%; }
.search-form label { flex:1 1 auto; min-width:0; }
.search-field { width:100%; min-width:0; max-width:100%; min-height:2.8rem; padding:.55rem .8rem; border:1px solid #aab9c9; border-radius:.45rem; background:#fff; color:var(--ink); }
.search-submit,.button-link { min-height:2.8rem; padding:.55rem 1rem; border:1px solid var(--blue); border-radius:.45rem; background:var(--blue); color:#fff; font-weight:700; cursor:pointer; text-decoration:none; }
.not-found { padding-block:1rem; }
.not-found-copy { max-width:38rem; margin-block:1rem 1.5rem; color:var(--muted); font-size:1.1rem; }
.comments-area { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); }
.primary-menu .sub-menu { position:absolute; z-index:30; top:100%; left:0; min-width:15rem; display:none; padding:.35rem; border:1px solid var(--line); border-radius:.5rem; background:#fff; box-shadow:var(--shadow-soft); }
.primary-menu li { position:relative; }
.primary-menu li:hover > .sub-menu,.primary-menu li:focus-within > .sub-menu { display:block; }
.primary-menu .sub-menu a { display:flex; min-height:2.5rem; padding:.45rem .65rem; }
.footer-inner { min-height:6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem; }
.footer-brand { width:5.5rem; flex:0 0 auto; }
.footer-brand img { display:block; width:100%; height:auto; }
.footer-inner p { flex:1 1 auto; min-width:0; margin:0; color:var(--muted); font-size:.76rem; overflow-wrap:anywhere; }
.footer-navigation ul { justify-content:flex-end; }
.footer-top-link { color:var(--ink-soft); font-weight:700; text-decoration:none; }
@media(max-width:58rem) { .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:44rem) {
 .site-shell { width:min(calc(100% - 2rem),var(--wrap)); }
 .main-content:not(.home-landing) { padding-block:2.5rem; }
 .post-grid { grid-template-columns:1fr; }
 .primary-menu .sub-menu { position:static; display:block; padding:0 0 .4rem 1rem; border:0; box-shadow:none; }
 .primary-menu .sub-menu a { min-height:2.4rem; }
 .footer-inner { min-height:0; flex-wrap:wrap; padding-block:1rem; }
 .footer-inner p { flex:1 1 65%; }
 .footer-navigation { order:3; width:100%; }
 .footer-navigation ul { justify-content:flex-start; }
 .footer-top-link { margin-left:auto; }
}


/* Native service pages: editorial sections, no decorative side rails. */
.service-detail-link { display:inline-flex; align-items:center; gap:.25em; min-height:44px; margin-top:.45rem; font-size:.9rem; font-weight:700; color:var(--blue); text-underline-offset:.25em; }
.service-detail-link:hover { text-decoration:underline; }
.service-page-intro { margin-block:0 2rem; font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.55; color:var(--ink); }
.service-page-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); padding-block:1.5rem 2rem; border-block:1px solid var(--line); }
.service-page-grid > section { min-width:0; }
.entry-content .service-page-grid h2 { margin-top:0; }
.entry-content .service-page-grid ul { padding-inline-start:1.2rem; }
.service-page-steps { padding-inline-start:1.4rem; }
.service-page-steps li { padding-inline-start:.4rem; margin-block:.8rem; }
.service-page-boundary { margin-block:2rem; font-size:.95rem; }
.service-page-next { margin-top:2.5rem; padding-block:1.5rem; border-top:1px solid var(--line); }
.service-page-next .button { max-width:100%; white-space:normal; text-align:center; }
.service-page-related { display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; padding:0; list-style:none; }
@media (max-width:640px) { .service-page-grid { grid-template-columns:1fr; } }