/**
 * O365 site customisations.
 *
 * Scoped to this project's own widgets so nothing here can affect the stock
 * Itecho templates still used by the other pages.
 */

/* ---------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------
   The theme's h1 is clamp(2.375rem … 6.375rem), which suits the stock headline
   of one or two words per line but is far too large for a full sentence, so the
   hero sets its own scale.
   --------------------------------------------------------------------------- */

.o365-hero__content {
	max-width: 640px;
}

.o365-hero__title {
	font-size: clamp(1.875rem, 1.05rem + 2.6vw, 3.25rem); /* 30px → 52px */
	line-height: 1.16;
	margin-bottom: 0;
	text-wrap: balance; /* avoids a short orphan line; ignored where unsupported */
}

.o365-hero__title-lead {
	margin-bottom: 0.15em;
}

/* Keeps the two halves of the sentence distinct without a second colour. */
.o365-hero__title-rest {
	opacity: 0.92;
}

.o365-hero__desc {
	max-width: 33em;
}

.o365-hero__list {
	margin-bottom: 2rem;
	padding-left: 0;
}

/* --- Supporting statement (replaces the stock rating card) -----------------
   Rendered as chips, one per phrase. On desktop each is placed individually
   around the hero image - two down the left, two down the right - keeping the
   subject's face, the laptop and the notch cut-out at the image's top-right
   clear. Placements are percentages of the image wrapper so they hold as the
   column resizes. Under 992px they collapse to a normal wrapped row below the
   image, where there is no room to orbit it.
   --------------------------------------------------------------------------- */

.o365-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding-left: 0;
}

.o365-hero__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.9375rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* Accent dot, echoing the check marks in the list above. */
.o365-hero__chip::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: var(--main-600, #4f46e5);
}

@media (min-width: 992px) {

	/* The wrapper stops being a flow row and becomes an overlay on the image;
	   each chip is then placed against the image edges. */
	.o365-hero__chips {
		position: absolute;
		inset: 0;
		display: block;
		margin: 0;
		pointer-events: none; /* the image keeps its own hover/animation behaviour */
	}

	/* Offsets use margins, not transform: AOS animates transform and resets it
	   to identity on entry, which would discard any translate set here. */
	.o365-hero__chip {
		position: absolute;
		pointer-events: auto;
		box-shadow: 0 8px 24px rgba(2, 6, 23, 0.28);
	}

	/* Left column - above and below the laptop, over the empty gradient. */
	.o365-hero__chip--1 {
		top: 16%;
		left: 0;
		margin-left: -2.5rem;
	}

	.o365-hero__chip--3 {
		top: 76%;
		left: 0;
		margin-left: -1.75rem;
	}

	/* Right column - the first sits below the notch cut-out, not across it. */
	.o365-hero__chip--2 {
		top: 34%;
		right: 0;
		margin-right: -2.5rem;
	}

	.o365-hero__chip--4 {
		bottom: 12%;
		right: 0;
		margin-right: -1.75rem;
	}
}

/* Narrower columns: pull the chips back in so they stay over the image. */
@media (min-width: 992px) and (max-width: 1399.98px) {

	.o365-hero__chip--1,
	.o365-hero__chip--3 {
		margin-left: -1rem;
	}

	.o365-hero__chip--2,
	.o365-hero__chip--4 {
		margin-right: -1rem;
	}

	.o365-hero__chip {
		font-size: 0.875rem;
		padding: 0.4375rem 0.8125rem;
	}
}

@media (max-width: 575.98px) {
	.o365-hero__chip {
		padding: 0.4375rem 0.75rem;
		font-size: 0.875rem;
	}
}

/* ---------------------------------------------------------------------------
   About / "How It Works" section
   ---------------------------------------------------------------------------
   Colours, typography, spacing, padding, background, radius, shadow and
   position are Elementor settings on the widgets, so they stay editable in the
   panel. Only what Elementor has no control for lives here: the icon badges,
   the step numbers and the accent rules.
   --------------------------------------------------------------------------- */

/* --- Symptom rows ------------------------------------------------------------
   The icon-list's own icon carries the glyph and its colour; the rounded badge
   behind it has no Elementor control, so it is drawn here.
   --------------------------------------------------------------------------- */

.o365-symptoms .elementor-icon-list-item {
	align-items: center;
}

.o365-symptoms .elementor-icon-list-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 0.5rem;
	background: #EEF2F7;
}

/* The final row: the escalation stops here. */
.o365-symptoms .elementor-icon-list-item:last-child .elementor-icon-list-icon {
	background: #041325;
}

.o365-symptoms .elementor-icon-list-item:last-child .elementor-icon-list-icon i {
	color: #fff !important;
}

.o365-symptoms .elementor-icon-list-item:last-child .elementor-icon-list-text {
	color: #041325;
	font-weight: 600;
}

/* --- Numbered steps ----------------------------------------------------------
   The stock icon-list has no numbering, so each item carries its own number
   span and the list's icon slot is hidden rather than left showing.
   --------------------------------------------------------------------------- */

.o365-steps .elementor-icon-list-icon {
	display: none !important;
}

.o365-steps .elementor-icon-list-text {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding-inline-start: 0 !important;
}

.o365-step__n {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	background: #EAF1FE;
	color: #0661E9;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
}

/* --- Closing statement card --------------------------------------------------
   Background, padding, radius, shadow and position are Elementor settings on
   the widget. Only the accent rule, which has no control, is styled here.
   --------------------------------------------------------------------------- */

.o365-about__badge .elementor-heading-title {
	position: relative;
	display: block;
	padding-top: 1rem;
	white-space: nowrap;
}

.o365-about__badge .elementor-heading-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 3px;
	border-radius: 3px;
	background: #0661E9;
}

@media (max-width: 767.98px) {
	.o365-about__badge .elementor-heading-title {
		white-space: normal;
	}
}

/* The image column anchors the card, whose offsets are Elementor settings. */
.elementor-element-9e60033 {
	position: relative;
}

/* The theme's button widget sizes its label from markup Elementor exposes no
   control for, so a longer label than the stock one wraps. Keyed to a CSS class
   set on the widget rather than an element id, so it survives being imported
   into another site, where Elementor assigns new ids. */
.o365-btn-nowrap .link-group h2 {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   What We Do / "Who does what" tabs
   ---------------------------------------------------------------------------
   Built on Elementor's free Tabs widget, whose controls stop at title colour,
   typography and one shared border/background for the active title and the
   panel. The design needs each title as its own card (blue when active), a
   numbered badge, a description revealed under the active title, the panel as
   a separate card and a two-column checklist, none of which have controls.

   Each tab title carries the number, title and description as spans; each
   panel carries a label paragraph and a plain list. Colours and typography of
   the titles and panel text remain Elementor settings on the widget.

   Selectors carry .elementor-widget-tabs because Elementor's own tabs
   stylesheet loads after this one and would otherwise win on equal weight.
   --------------------------------------------------------------------------- */

.elementor-widget-tabs.o365-wwd-tabs .elementor-tab-title::before,
.elementor-widget-tabs.o365-wwd-tabs .elementor-tab-title::after {
	display: none !important;
}

/* Desktop titles and, under 768px, the accordion titles Elementor renders in
   their place; each set stays hidden where Elementor hides it. */
.elementor-widget-tabs.o365-wwd-tabs .elementor-tab-title {
	align-items: flex-start;
	gap: 16px;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 16px;
	background: transparent;
	transition: background-color 0.2s, border-color 0.2s;
}

.elementor-widget-tabs.o365-wwd-tabs .elementor-tab-title.elementor-active {
	background: #0D55EE;
	border-color: #0D55EE !important;
}

.elementor-widget-tabs.o365-wwd-tabs .elementor-tab-title:not(.elementor-active):hover {
	border-color: rgba(255, 255, 255, 0.36) !important;
}

.o365-wwd-tab__n {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	font-family: "Rajdhani", sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
}

.elementor-active .o365-wwd-tab__n {
	background: #fff;
	border-color: #fff;
	color: #0D55EE;
}

.o365-wwd-tab__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

/* Centres a one-line title against the 42px badge. */
.o365-wwd-tab__title {
	display: flex;
	align-items: center;
	min-height: 42px;
}

.o365-wwd-tab__desc {
	display: none;
	font-family: "Nunito", sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	text-wrap: pretty;
}

.elementor-active .o365-wwd-tab__desc {
	display: block;
}

/* Panel: label above a checklist that fills row by row, two columns when
   there is room. */
.elementor-widget-tabs.o365-wwd-tabs .elementor-tab-content > :last-child {
	margin-bottom: 0;
}

.o365-wwd-panel__label {
	margin: 0 0 13px;
	font-family: "Rajdhani", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #7FA6FF;
}

.o365-wwd-checks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	column-gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o365-wwd-checks li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	line-height: 1.35;
}

.o365-wwd-checks li::before {
	content: "\2713";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(127, 166, 255, 0.18);
	color: #7FA6FF;
	font-size: 11px;
	font-weight: 800;
}

/* Desktop: titles stacked on the left, panel as its own card on the right. */
@media (min-width: 768px) {

	.elementor-widget-tabs.o365-wwd-tabs .elementor-tabs {
		gap: 24px;
	}

	.elementor-widget-tabs.o365-wwd-tabs .elementor-tabs-wrapper {
		display: flex;
		flex-direction: column;
		gap: 10px;
		overflow: visible;
	}

	.elementor-widget-tabs.o365-wwd-tabs .elementor-tab-desktop-title {
		display: flex;
		padding: 24px 26px;
	}

	.elementor-widget-tabs.o365-wwd-tabs .elementor-tabs-content-wrapper {
		padding: 44px clamp(24px, 4vw, 52px);
		border: 1px solid rgba(255, 255, 255, 0.14) !important;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.05);
	}

	.elementor-widget-tabs.o365-wwd-tabs .elementor-tab-content {
		padding: 0;
		border: 0 !important;
	}
}

/* Mobile: Elementor switches to an accordion. Each title stays a card and the
   open panel becomes a card directly beneath it. */
@media (max-width: 767.98px) {

	.elementor-widget-tabs.o365-wwd-tabs .elementor-tabs-content-wrapper {
		display: flex;
		flex-direction: column;
		gap: 10px;
		border: 0 !important;
	}

	.elementor-widget-tabs.o365-wwd-tabs .elementor-tab-mobile-title {
		display: flex;
		padding: 18px 20px;
	}

	.elementor-widget-tabs.o365-wwd-tabs .elementor-tab-content {
		padding: 20px 22px;
		border: 1px solid rgba(255, 255, 255, 0.14) !important;
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.05);
	}
}

/* ------------------------------------------------------------------------
 * Design Your Pilot — three-step CF7 form (form 6307, markup in CF7).
 * Selectors are prefixed with .wpcf7 so they beat CF7's and the theme's
 * input styles, which load separately.
 * ---------------------------------------------------------------------- */
.wpcf7 .o365-pilot {
	display: flex;
	flex-direction: column;
	gap: 28px;
	font-family: 'Nunito', sans-serif;
	color: #0A1629;
}
.wpcf7 .o365-pilot__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.wpcf7 .o365-pilot__label {
	font-family: 'Rajdhani', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #0D55EE;
}
.wpcf7 .o365-pilot__label b { font-weight: 700; }
.wpcf7 .o365-pilot__name { font-size: 14px; font-weight: 600; color: #8A93A3; }
.wpcf7 .o365-pilot__bars { display: flex; gap: 6px; margin-top: -16px; }
.wpcf7 .o365-pilot__bars span {
	flex: 1;
	height: 4px;
	border-radius: 4px;
	background: #E3E8F1;
	transition: background-color 0.3s ease;
}
.wpcf7 .o365-pilot__bars span.is-on { background: #0D55EE; }

/* Steps */
.wpcf7 .o365-pilot__step {
	display: none;
	flex-direction: column;
	gap: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.wpcf7 .o365-pilot__step.is-active { display: flex; animation: o365-pilot-in 0.35s ease; }
@keyframes o365-pilot-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
.wpcf7 .o365-pilot__q { display: flex; flex-direction: column; gap: 12px; }
.wpcf7 .o365-pilot__qlabel {
	margin: 0;
	font-family: 'Rajdhani', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: #0A1629;
}
.wpcf7 .o365-pilot__qlabel span {
	margin-left: 8px;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #8A93A3;
}

/* Text inputs */
.wpcf7 .o365-pilot input[type="text"],
.wpcf7 .o365-pilot input[type="email"],
.wpcf7 .o365-pilot input[type="tel"],
.wpcf7 .o365-pilot textarea {
	width: 100%;
	height: 54px;
	padding: 0 20px;
	border: 1px solid #E3E7EE;
	border-radius: 8px;
	background: #FFFFFF;
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	color: #0A1629;
	box-shadow: none;
	transition: border-color 0.2s ease;
}
.wpcf7 .o365-pilot textarea { height: auto; min-height: 110px; padding: 16px 20px; line-height: 1.6; resize: vertical; }
.wpcf7 .o365-pilot input::placeholder,
.wpcf7 .o365-pilot textarea::placeholder { color: #7A8394; opacity: 1; }
.wpcf7 .o365-pilot input:focus,
.wpcf7 .o365-pilot textarea:focus { outline: none; border-color: #0D55EE; }
.wpcf7 .o365-pilot .wpcf7-form-control-wrap { display: block; }
.wpcf7 .o365-pilot__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}
.wpcf7 .o365-pilot__other { display: none; }
.wpcf7 .o365-pilot__other.is-open { display: block; }
.wpcf7 .o365-pilot__other input { border-color: #0D55EE; }

/* Checkbox / radio groups as chips */
.wpcf7 .o365-pilot .wpcf7-checkbox,
.wpcf7 .o365-pilot .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.wpcf7 .o365-pilot .wpcf7-list-item { margin: 0; }
.wpcf7 .o365-pilot .wpcf7-list-item label {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid #E3E7EE;
	border-radius: 8px;
	background: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #2A3446;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.wpcf7 .o365-pilot .wpcf7-list-item label:hover { border-color: #0D55EE; }
.wpcf7 .o365-pilot .wpcf7-list-item input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.wpcf7 .o365-pilot .wpcf7-list-item-label::before { content: none; }
.wpcf7 .o365-pilot .wpcf7-list-item label:has(input:checked) {
	border-color: #0D55EE;
	background: #EAF0FE;
	color: #0D55EE;
}
.wpcf7 .o365-pilot .wpcf7-list-item label:has(input:checked) .wpcf7-list-item-label::before {
	content: "\2713\00a0";
}
.wpcf7 .o365-pilot .wpcf7-list-item label:has(input:focus-visible) { outline: 2px solid #0D55EE; outline-offset: 2px; }

/* Missing answer on Next, and CF7's own errors */
.wpcf7 .o365-pilot__q.is-missing .o365-pilot__qlabel { color: #D93025; }
.wpcf7 .o365-pilot__q.is-missing textarea,
.wpcf7 .o365-pilot__q.is-missing .wpcf7-list-item label { border-color: #F2B8B5; }
.wpcf7 .o365-pilot .wpcf7-not-valid-tip { margin-top: 6px; font-size: 14px; }

/* Reserved space for the CAPTCHA widget (Turnstile / reCAPTCHA) */
.wpcf7 .o365-pilot__captcha { min-height: 65px; }
.wpcf7 .o365-pilot__captcha:empty { min-height: 0; }

/* Navigation */
.wpcf7 .o365-pilot__nav { display: flex; align-items: center; gap: 16px; padding-top: 4px; }
.wpcf7 .o365-pilot__spacer { flex: 1; }
.wpcf7 .o365-pilot__back {
	height: 54px;
	padding: 0 26px;
	border: 1.5px solid #0D55EE;
	border-radius: 12px;
	background: #FFFFFF;
	font-family: 'Rajdhani', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: #0D55EE;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.wpcf7 .o365-pilot__back:hover { background: #EAF0FE; }
.wpcf7 .o365-pilot__back { display: inline-flex; align-items: center; gap: 8px; }
.wpcf7 .o365-pilot__back i { font-size: 20px; line-height: 1; }
/* Next and submit reuse the theme's button-style3 markup (link-group,
 * button-icon-one/two); only the <button> element itself needs resetting. */
.wpcf7 .o365-pilot__next,
.wpcf7 .o365-pilot__submit {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.wpcf7 .o365-pilot__btn-label {
	display: block;
	margin: 0;
	font-family: 'Rajdhani', sans-serif;
	font-size: 18px;
	line-height: 1.2;
	white-space: nowrap;
}
.wpcf7 .o365-pilot.is-first .o365-pilot__back { display: none; }
.wpcf7 .o365-pilot .o365-pilot__submit,
.wpcf7 .o365-pilot.is-last .o365-pilot__next { display: none !important; }
.wpcf7 .o365-pilot.is-last .o365-pilot__submit { display: inline-flex !important; }
.wpcf7 .o365-pilot .wpcf7-spinner { margin: 0 0 0 12px; }

/* Thank-you state after CF7 reports mail sent */
.wpcf7 .o365-pilot__done { display: none; flex-direction: column; gap: 12px; padding: 40px 0; }
.wpcf7 .o365-pilot__tick {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #0D55EE;
	font-size: 24px;
	font-weight: 800;
	color: #FFFFFF;
}
.wpcf7 .o365-pilot__done h3 { margin: 0; font-family: 'Rajdhani', sans-serif; font-size: 32px; font-weight: 700; color: #0A1629; }
.wpcf7 .o365-pilot__done p { margin: 0; font-size: 17px; line-height: 1.6; color: #555E6E; }
.wpcf7 .o365-pilot.is-done .o365-pilot__step,
.wpcf7 .o365-pilot.is-done .o365-pilot__nav { display: none; }
.wpcf7 .o365-pilot.is-done .o365-pilot__done { display: flex; }
.wpcf7 form:has(.o365-pilot) .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 1px solid #E3E7EE;
	border-radius: 8px;
	font-size: 15px;
	color: #2A3446;
}
.wpcf7 form:has(.o365-pilot) .wpcf7-response-output:empty,
.wpcf7 form.sent:has(.o365-pilot) .wpcf7-response-output { display: none; }
.wpcf7 form.invalid:has(.o365-pilot) .wpcf7-response-output,
.wpcf7 form.failed:has(.o365-pilot) .wpcf7-response-output { border-color: #F2B8B5; background: #FDF1F0; }

@media (max-width: 767.98px) {
	.wpcf7 .o365-pilot__fields { grid-template-columns: minmax(0, 1fr); }
	.wpcf7 .o365-pilot__btn-label.tw-px-10 { padding-left: 24px; padding-right: 24px; }
}

/* FAQ — Elementor Toggle (.o365-faq). Each question is a rounded card; the
   open one turns dark. Colours, type and padding stay in the widget settings;
   Elementor has no controls for the card border/radius, the active
   background or the icon size. */
.elementor-widget-toggle.o365-faq .elementor-tab-title { display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid #E3E7EE; border-radius:12px; background-color:#FFFFFF; transition:background-color .3s ease, border-color .3s ease; }
.elementor-widget-toggle.o365-faq .elementor-tab-title.elementor-active { background-color:#1E1E24; border-color:#1E1E24; }
.elementor-widget-toggle.o365-faq .elementor-tab-title .elementor-toggle-title { flex:1 1 auto; min-width:0; }
.elementor-widget-toggle.o365-faq .elementor-toggle-icon.elementor-toggle-icon-right { order:2; flex:none; float:none; width:52px; height:52px; margin:0; }
.elementor-widget-toggle.o365-faq .elementor-tab-title .elementor-toggle-icon span svg { display:block; width:100%; height:100%; margin:0; }
.elementor-widget-toggle.o365-faq .elementor-tab-title .elementor-toggle-icon span { height:100%; }
.elementor-widget-toggle.o365-faq .elementor-tab-content { border:0; }
@media (max-width: 767px) {
	.elementor-widget-toggle.o365-faq .elementor-toggle-icon.elementor-toggle-icon-right { width:42px; height:42px; }
}

/* Sticky header. Itecho's main.js adds .fixed-header (sticky + shadow +
   slide-in) after 260px, but the Hugebinary template wrapper around the header
   is only as tall as the header, so sticky had no room to work. Making the
   wrapper itself sticky lets it follow the whole page. */
.elementor:has(> .e-con .o365-header) { position:sticky; top:0; z-index:999; }
.admin-bar .elementor:has(> .e-con .o365-header) { top:32px; }
@media (max-width: 782px) { .admin-bar .elementor:has(> .e-con .o365-header) { top:46px; } }
@media (max-width: 600px) { .admin-bar .elementor:has(> .e-con .o365-header) { top:0; } }

/* Legal pages (Privacy Policy, Terms, Cookie Policy and any other page written
   in the plain WordPress editor). The theme resets list-style and sizes
   headings for marketing sections, so long-form text had no bullets, oversized
   thin headings and full-width lines. Scoped to the theme's page wrapper and to
   pages Elementor does not render (their body lacks .elementor-page), and
   prefixed with body because this sheet loads before the theme's.

   The pages don't share one heading scheme: Privacy is h2 title > h3 section >
   h4 sub-section, Terms and Cookie are h1 > h2 > h3. Section and sub-section
   styles key off whether the content opens with an h1. */
body:not(.elementor-page) .itecho-page-content-area .entry-content { max-width:820px; margin:0 auto; color:#4A5363; font-size:16px; line-height:1.75; }
body:not(.elementor-page) .itecho-page-content-area .entry-content > :is(h1,h2):first-child { margin:0 0 14px; font-family:Rajdhani,sans-serif; font-size:clamp(38px,5vw,56px); font-weight:700; line-height:1.05; color:#0A1629; }
body:not(.elementor-page) .itecho-page-content-area .entry-content > :is(h1,h2):first-child + p { display:inline-block; margin:0 0 40px; padding:6px 14px; border-radius:999px; background:rgba(13,85,238,0.08); font-size:14px; line-height:1.4; }
body:not(.elementor-page) .itecho-page-content-area .entry-content > :is(h1,h2):first-child + p strong { color:#0D55EE; font-weight:600; }

/* Section headings */
body:not(.elementor-page) .itecho-page-content-area .entry-content:not(:has(> h1:first-child)) h3,
body:not(.elementor-page) .itecho-page-content-area .entry-content:has(> h1:first-child) h2 { margin:56px 0 16px; padding-top:40px; border-top:1px solid #E3E7EE; font-family:Rajdhani,sans-serif; font-size:30px; font-weight:700; line-height:1.2; color:#0A1629; }
body:not(.elementor-page) .itecho-page-content-area .entry-content > h2:first-child + p + h3 { margin-top:0; }
/* Sub-section headings */
body:not(.elementor-page) .itecho-page-content-area .entry-content:not(:has(> h1:first-child)) h4,
body:not(.elementor-page) .itecho-page-content-area .entry-content:has(> h1:first-child) h3 { margin:32px 0 10px; padding:0; border:0; font-family:Rajdhani,sans-serif; font-size:21px; font-weight:700; line-height:1.3; color:#0A1629; }
/* A sub-section directly under its section heading needs no extra gap */
body:not(.elementor-page) .itecho-page-content-area .entry-content:has(> h1:first-child) h2 + h3,
body:not(.elementor-page) .itecho-page-content-area .entry-content:not(:has(> h1:first-child)) h3 + h4 { margin-top:8px; }

body:not(.elementor-page) .itecho-page-content-area .entry-content p { margin:0 0 16px; }
body:not(.elementor-page) .itecho-page-content-area .entry-content strong { color:#0A1629; font-weight:600; }
body:not(.elementor-page) .itecho-page-content-area .entry-content a { color:#0D55EE; text-decoration:underline; text-underline-offset:3px; }
body:not(.elementor-page) .itecho-page-content-area .entry-content a:hover { text-decoration:none; }
body:not(.elementor-page) .itecho-page-content-area .entry-content ul { margin:4px 0 24px; padding:0; list-style:none; }
body:not(.elementor-page) .itecho-page-content-area .entry-content ul li { position:relative; margin:0 0 8px; padding-left:26px; line-height:1.65; }
body:not(.elementor-page) .itecho-page-content-area .entry-content ul li::before { content:""; position:absolute; left:4px; top:0.62em; width:7px; height:7px; border-radius:50%; background:#0D55EE; }

/* Tables (Cookie Policy's cookie list). The wrapper scrolls sideways on
   phones instead of squeezing the columns. */
body:not(.elementor-page) .itecho-page-content-area .entry-content table { display:block; width:100%; max-width:100%; margin:8px 0 28px; overflow-x:auto; border-collapse:separate; border-spacing:0; border:1px solid #E3E7EE; border-radius:12px; font-size:14px; line-height:1.55; }
body:not(.elementor-page) .itecho-page-content-area .entry-content table th,
body:not(.elementor-page) .itecho-page-content-area .entry-content table td { padding:12px 16px; border:0; border-bottom:1px solid #E3E7EE; text-align:left; vertical-align:top; min-width:140px; }
body:not(.elementor-page) .itecho-page-content-area .entry-content table th { background:#F7F8FA; font-family:Rajdhani,sans-serif; font-size:16px; font-weight:700; color:#0A1629; white-space:nowrap; }
body:not(.elementor-page) .itecho-page-content-area .entry-content table tr:last-child td { border-bottom:0; }

@media (max-width: 767px) {
	body:not(.elementor-page) .itecho-page-content-area .entry-content { font-size:15px; }
	body:not(.elementor-page) .itecho-page-content-area .entry-content:not(:has(> h1:first-child)) h3,
	body:not(.elementor-page) .itecho-page-content-area .entry-content:has(> h1:first-child) h2 { margin-top:40px; padding-top:28px; font-size:25px; }
	body:not(.elementor-page) .itecho-page-content-area .entry-content:not(:has(> h1:first-child)) h4,
	body:not(.elementor-page) .itecho-page-content-area .entry-content:has(> h1:first-child) h3 { font-size:19px; }
}