/*
 * hs-theme-11 — tasliik.com, built from the "Cleanzone" kit.
 *
 * Design system from the kit's global styles (templates/global.json):
 *   colours  primary navy #00084d (headings, the floating header bar, the
 *            footer card, «What makes us different» cards), accent royal
 *            blue #3040b6 (buttons; white on it is 8.6:1), deep navy #000533
 *            and indigo #435292 (footer and booking-card gradients), sky cyan
 *            #6ae2ff (hero and 404 gradients, the side form card), light blue
 *            #edf5ff (bands), peach #ffecd7 (chips), orange #f58004 (ticks,
 *            icons and the rule under card photos — decoration only, never a
 *            call button: owner rule), body grey #717b9d darkened to #5b6488
 *            (4.2:1 → 5.9:1 on white)
 *   buttons  white words (owner): call = royal blue #4356dc→#2433a6, with a
 *            light ring on navy; WhatsApp = deep green #0f8446→#0a5e32
 *   type     Heebo 800/700 headings, Inter 400 text; Cairo stands in
 *   shape    10px radius, rounded navy header bar floating over the page,
 *            orange rule under card photos, a navy title bar on checklist
 *            cards, the footer as a rounded card with a faint grid, white
 *            line swirls on the sky gradients
 *
 * RTL first: logical properties only.
 */

/* stylelint-disable no-descending-specificity -- every selector is scoped to its own component class, so source order never decides a conflict. */

:root {
	/* Article body colours, read by hs-base assets/css/article.css. */
	--hsb-a1: #00084d;
	--hsb-a2: #3040b6;
	--hsb-a-soft: #edf5ff;
	--z-navy: #00084d;
	--z-deep: #000533;
	--z-royal: #3040b6;
	--z-indigo: #435292;
	--z-cyan: #6ae2ff;
	--z-sky: #edf5ff;
	--z-peach: #ffecd7;
	--z-orange: #f58004;
	--z-text: #5b6488;
	--z-line: #dfe6f3;
	--z-grey: #f2f3f5;
	--z-radius: 10px;
	--z-shadow: 0 12px 32px rgb(0 8 77 / 10%);
	--z-call: linear-gradient(135deg, #4356dc 0%, #2433a6 100%);
	--z-wa: linear-gradient(135deg, #0f8446 0%, #0a5e32 100%);
	--z-navy-grad: linear-gradient(160deg, var(--z-deep) 0%, var(--z-navy) 45%, var(--z-indigo) 100%);
	--z-sky-grad: linear-gradient(180deg, var(--z-cyan) 0%, #b4f0ff 55%, var(--z-sky) 100%);
	--z-swirl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='1.5'%3E%3Cpath d='M-20 220c60-40 90 30 60 60s-80-10-40-60 120-90 170-60'/%3E%3Cpath d='M300 40c50-30 110 10 80 60s-90 20-60-20 90-40 110 10'/%3E%3C/svg%3E");
	--z-grid: linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
	--z-word-shadow: 0 1px 2px rgb(0 0 0 / 25%);
	--z-wrap: 1170px;
	--z-gutter: clamp(1rem, 4vw, 1.5rem);
	--z-band: clamp(4rem, 8vw, 6.5rem);
	--z-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.45rem);

	/* hs-core's floating call button: the kit's royal blue. */
	--hsc-main: #3040b6;
	--hsc-main-ink: #fff;
}

/* ------------------------------------------------------------- base */

body {
	background: #fff;
	color: var(--z-text);
	font-size: 1rem;
	line-height: 1.9;
}

h1,
h2,
h3 {
	color: var(--z-navy);
	line-height: 1.35;
}

a {
	color: var(--z-royal);
}

img {
	display: block;
}

.hst11-icon {
	flex: none;
	inline-size: 1.2em;
	block-size: 1.2em;
}

.hst11-wrap {
	inline-size: 100%;
	max-inline-size: calc(var(--z-wrap) + 2 * var(--z-gutter));
	margin-inline: auto;
	padding-inline: var(--z-gutter);
}

.hst11-narrow {
	max-inline-size: calc(50rem + 2 * var(--z-gutter));
}

.hst11-band {
	padding-block: var(--z-band);
}

.hst11-band--flush {
	padding-block-start: 0;
}

.hst11-band--sky {
	background: var(--z-sky);
}

.hst11-text {
	margin: 0 0 1rem;
	font-size: 0.9688rem;
}

.hst11-lead {
	max-inline-size: 40rem;
	margin-inline: auto;
	margin-block-end: 2.5rem;
	text-align: center;
}

/* ---------------------------------------------------------- headings */

.hst11-head {
	margin-block-end: 1.5rem;
}

.hst11-head--center {
	max-inline-size: 46rem;
	margin-inline: auto;
	text-align: center;
}

/* The kit's small peach chip with navy words. */
.hst11-chip {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.15rem 0.85rem;
	border: 1px solid #f7cfa5;
	border-radius: 5px;
	background: var(--z-peach);
	color: var(--z-navy);
	font-size: 0.8125rem;
	font-weight: 700;
}

.hst11-h2 {
	margin: 0;
	font-size: var(--z-h2);
	font-weight: 800;
	line-height: 1.35;
}

/* ----------------------------------------------------------- buttons */

.hst11-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: var(--z-radius);
	background: var(--z-call);
	box-shadow: 0 8px 18px rgb(36 51 166 / 28%);
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	text-shadow: var(--z-word-shadow);
	transition: filter 0.2s, transform 0.2s;
}

.hst11-btn:hover,
.hst11-btn:focus-visible {
	color: #fff;
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.hst11-btn--wa {
	background: var(--z-wa);
	box-shadow: 0 8px 18px rgb(10 94 50 / 25%);
}

/* On navy the call button gets a light ring so it keeps its own colour. */
.hst11-btn--ring,
.hst11-pair--dark .hst11-btn--call {
	box-shadow: 0 0 0 2px rgb(255 255 255 / 55%), 0 10px 24px rgb(0 0 0 / 30%);
}

.hst11-pair--dark .hst11-btn--wa {
	box-shadow: 0 0 0 2px rgb(255 255 255 / 40%), 0 10px 24px rgb(0 0 0 / 25%);
}

.hst11-btn--line {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--z-royal);
	color: var(--z-royal);
	text-shadow: none;
}

.hst11-btn--line:hover,
.hst11-btn--line:focus-visible {
	background: var(--z-royal);
	color: #fff;
	filter: none;
}

.hst11-btn--home {
	border-radius: 999px;
}

.hst11-btn--sm {
	padding: 0.6rem 1.15rem;
	font-size: 0.9375rem;
}

.hst11-btn .hst11-icon {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.hst11-pair {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* The kit's white pill (email field + «Book call»): the number and the call button. */
.hst11-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	max-inline-size: 27rem;
	padding: 0.35rem;
	padding-inline-start: 1.1rem;
	border: 2px solid #fff;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 30px rgb(0 8 77 / 12%);
}

.hst11-pill__number {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--z-navy);
	font-size: 1.0625rem;
	font-weight: 800;
	text-decoration: none;
}

.hst11-pill__number .hst11-icon {
	color: var(--z-orange);
}

/* A disc with an orange line icon, as the kit's feature icons. */
.hst11-disc {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	background: var(--z-peach);
	color: var(--z-orange);
}

.hst11-disc .hst11-icon {
	inline-size: 1.7rem;
	block-size: 1.7rem;
}

.hst11-checks {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst11-checks li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding-block: 0.45rem;
	border-block-end: 1px solid var(--z-line);
	color: var(--z-navy);
	font-size: 0.9063rem;
	line-height: 1.5;
}

.hst11-checks li:last-child {
	border-block-end: 0;
}

.hst11-checks .hst11-icon {
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--z-orange);
	stroke-width: 3;
}

/* The price the site states: a peach tag with navy words (not a button). */
.hst11-price {
	display: inline-block;
	margin: 0;
	padding: 0.15rem 0.75rem;
	border-radius: 999px;
	background: var(--z-peach);
	color: var(--z-navy);
	font-size: 0.875rem;
	font-weight: 800;
}

/* ------------------------------------------------------------ header */

/* The kit's navy bar floats over the top of every page. */
.hsb-header {
	position: absolute;
	z-index: 30;
	inset-block-start: 0;
	inset-inline: 0;
	padding-block-start: 0.9rem;
	background: transparent;
}

.hst11-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-block-size: 74px;
	padding-inline: 1.25rem;
	border-radius: var(--z-radius);
	background: var(--z-navy);
	box-shadow: 0 14px 34px rgb(0 5 51 / 28%);
}

.hst11-header__logo .hsb-logo img,
.hst11-header__logo .custom-logo {
	block-size: 50px;
	inline-size: auto;
}

.hst11-header__nav {
	flex: 1;
	min-inline-size: 0;
}

.hst11-menu {
	display: flex;
	justify-content: center;
	gap: 0 1.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst11-menu a {
	display: block;
	padding-block: 1.3rem;
	color: #fff;
	font-size: 0.9688rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.hst11-menu a:hover,
.hst11-menu .current-menu-item > a {
	color: var(--z-cyan);
}

.hst11-menu .sub-menu {
	display: none;
}

.hst11-header__end {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.hst11-navsearch {
	position: relative;
}

.hst11-navsearch__toggle {
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: var(--z-radius);
	background: rgb(255 255 255 / 10%);
	color: #fff;
	cursor: pointer;
	list-style: none;
}

.hst11-navsearch__toggle::-webkit-details-marker {
	display: none;
}

.hst11-navsearch[open] .hst11-navsearch__toggle {
	background: #fff;
	color: var(--z-navy);
}

.hst11-navsearch__panel {
	position: absolute;
	z-index: 40;
	inset-block-start: calc(100% + 1.1rem);
	inset-inline-end: 0;
	inline-size: min(24rem, 86vw);
	padding: 0.8rem;
	border-radius: var(--z-radius);
	background: #fff;
	box-shadow: var(--z-shadow);
}

.hst11-toggle {
	display: none;
	inline-size: 42px;
	block-size: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--z-radius);
	background: rgb(255 255 255 / 12%);
}

.hst11-toggle__bars,
.hst11-toggle__bars::before,
.hst11-toggle__bars::after {
	display: block;
	inline-size: 20px;
	block-size: 2px;
	margin-inline: auto;
	background: #fff;
	transition: transform 0.2s;
}

.hst11-toggle__bars {
	position: relative;
}

.hst11-toggle__bars::before,
.hst11-toggle__bars::after {
	position: absolute;
	inset-inline-start: 0;
	content: "";
}

.hst11-toggle__bars::before {
	inset-block-start: -6px;
}

.hst11-toggle__bars::after {
	inset-block-start: 6px;
}

.hst11-toggle[aria-expanded="true"] .hst11-toggle__bars {
	background: transparent;
}

.hst11-toggle[aria-expanded="true"] .hst11-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.hst11-toggle[aria-expanded="true"] .hst11-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ------------------------------------------------------------ banner */

.hst11-banner {
	position: relative;
	display: grid;
	overflow: hidden;
	background: var(--z-sky);
}

.hst11-banner__photo {
	position: absolute;
	inset: 0;
}

.hst11-banner__photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hst11-banner__inner {
	position: relative;
	display: grid;
	place-items: center;
	min-block-size: 27rem;
	padding-block: 8.5rem 3.5rem;
}

/* Only the words sit on a soft frosted panel; the photo stays clear around it. */
.hst11-banner__panel {
	max-inline-size: 44rem;
	padding: 1.4rem 2rem 1.1rem;
	border-radius: 16px;
	background: rgb(255 255 255 / 84%);
	box-shadow: 0 18px 40px rgb(0 8 77 / 16%);
	text-align: center;
	backdrop-filter: blur(6px);
}

.hst11-banner__title {
	margin: 0 0 0.4rem;
	color: var(--z-navy);
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
	font-weight: 800;
}

.hst11-banner__text {
	margin: 0 0 0.5rem;
	color: var(--z-text);
	font-size: 1.0313rem;
}

.hst11-banner .hsb-breadcrumbs,
.hst11-posthead .hsb-breadcrumbs {
	max-inline-size: none;
	margin: 0;
	padding: 0;
	color: var(--z-text);
	font-size: 0.875rem;
}

.hst11-banner .hsb-breadcrumbs a,
.hst11-posthead .hsb-breadcrumbs a {
	color: var(--z-royal);
	font-weight: 700;
	text-decoration: none;
}

/* -------------------------------------------------------------- hero */

.hst11-hero {
	position: relative;
	overflow: hidden;
	background: var(--z-sky-grad);
}

.hst11-hero::before,
.hst11-404::before {
	position: absolute;
	inset: 0;
	background: var(--z-swirl) no-repeat;
	background-position: 0 100%;
	background-size: min(70rem, 140%) auto;
	content: "";
	pointer-events: none;
}

.hst11-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: 3rem;
	padding-block: 9.5rem 4.5rem;
}

.hst11-hero__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.6rem;
	color: var(--z-navy);
	font-size: 0.875rem;
	font-weight: 700;
}

.hst11-hero__line .hst11-icon {
	color: var(--z-orange);
}

.hst11-hero__dot {
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--z-orange);
}

.hst11-hero__eyebrow {
	margin: 0 0 0.4rem;
	color: var(--z-royal);
	font-size: 1rem;
	font-weight: 800;
}

.hst11-hero__title {
	margin: 0 0 1rem;
	color: var(--z-navy);
	font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem);
	font-weight: 900;
	line-height: 1.25;
}

.hst11-hero__text {
	max-inline-size: 34rem;
	margin: 0 0 1.6rem;
	color: #3d4670;
	font-size: 1.0938rem;
}

.hst11-hero__wa {
	margin: 0.8rem 0 0;
	color: var(--z-navy);
	font-size: 0.9375rem;
}

.hst11-hero__wa a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: #0a6b39;
	font-weight: 800;
}

.hst11-hero__media {
	position: relative;
	justify-self: end;
	inline-size: min(100%, 31rem);
}

.hst11-hero__photo {
	margin: 0;
	overflow: hidden;
	border: 8px solid #fff;
	border-radius: 180px 180px 18px 18px;
	box-shadow: 0 24px 50px rgb(0 8 77 / 20%);
	aspect-ratio: 4 / 4.6;
}

.hst11-hero__photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hst11-hero__badge {
	position: absolute;
	inset-block-end: 1.5rem;
	inset-inline-start: -1.75rem;
	display: grid;
	margin: 0;
	padding: 0.8rem 1.2rem;
	border-block-end: 4px solid var(--z-orange);
	border-radius: var(--z-radius);
	background: var(--z-navy-grad);
	box-shadow: 0 16px 30px rgb(0 5 51 / 30%);
	color: #cfd6ff;
	font-size: 0.875rem;
	line-height: 1.4;
}

.hst11-hero__badge strong {
	color: #fff;
	font-size: 1.9rem;
	font-weight: 900;
}

.hst11-hero__tag {
	position: absolute;
	inset-block-start: 2.5rem;
	inset-inline-end: -1rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.55rem 0.9rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--z-shadow);
	color: var(--z-navy);
	font-size: 0.875rem;
	font-weight: 800;
}

.hst11-hero__tag .hst11-icon {
	color: var(--z-royal);
}

/* ------------------------------------------------------ trust cards */

.hst11-trustband {
	position: relative;
	z-index: 1;
	margin-block-start: -2.25rem;
}

.hst11-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
}

.hst11-trust__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.9rem;
	align-items: center;
	padding: 1.1rem 1.2rem;
	border: 1px solid #fff;
	border-radius: 14px;
	background: linear-gradient(145deg, #fff 0%, #e4f7ff 100%);
	box-shadow: var(--z-shadow);
}

.hst11-trust__icon {
	display: grid;
	grid-row: span 2;
	place-items: center;
	inline-size: 3.3rem;
	block-size: 3.3rem;
	border-radius: 50%;
	background: var(--z-navy-grad);
	box-shadow: 0 0 0 4px var(--z-peach), 0 0 0 5px #f7cfa5;
	color: #fff;

	/* A <dd> after the words (valid <dl>), shown first. */
	order: -1;
	margin-inline: 0;
}

.hst11-trust__icon .hst11-icon {
	inline-size: 1.55rem;
	block-size: 1.55rem;
}

.hst11-trust dt {
	color: var(--z-navy);
	font-size: 1.3rem;
	font-weight: 900;
	line-height: 1.3;
}

.hst11-trust dd:not([aria-hidden]) {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ------------------------------------------------- service cards */

.hst11-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}

.hst11-card {
	display: flex;
	flex: 0 1 calc((100% - 2 * 1.25rem) / 3);
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--z-line);
	border-radius: var(--z-radius);
	background: #fff;
	box-shadow: 0 8px 22px rgb(0 8 77 / 7%);
	transition: transform 0.2s, box-shadow 0.2s;
}

.hst11-card:hover {
	box-shadow: var(--z-shadow);
	transform: translateY(-4px);
}

.hst11-card__media {
	border-block-end: 4px solid var(--z-orange);
	background: var(--z-sky);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.hst11-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hst11-card__none {
	display: grid;
	place-items: center;
	block-size: 100%;
	color: var(--z-royal);
}

.hst11-card__none .hst11-icon {
	inline-size: 3rem;
	block-size: 3rem;
}

.hst11-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	padding: 1.1rem 1.1rem 1.25rem;
	text-align: center;
}

.hst11-card__title {
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 800;
}

.hst11-card__text {
	margin: 0;
	font-size: 0.9063rem;
	line-height: 1.75;
}

.hst11-card__link {
	margin-block-start: auto;
	padding-block-end: 0.1rem;
	border-block-end: 1.5px solid currentcolor;
	color: var(--z-navy);
	font-size: 0.875rem;
	font-weight: 800;
	text-decoration: none;
}

.hst11-card__link:hover {
	color: var(--z-royal);
}

/* ---------------------------------------------- why cards + booking */

.hst11-whywrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	align-items: start;
	gap: 2.5rem;
}

.hst11-why {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 2rem;
	padding: 0;
	list-style: none;
}

.hst11-why__item {
	display: grid;
	align-content: start;
	gap: 0.7rem;
	padding: 1.35rem;
	border: 1px solid transparent;
	border-radius: 12px;
	transition: background 0.2s, box-shadow 0.2s;
}

.hst11-why__item:first-child,
.hst11-why__item:hover {
	background: #fff;
	box-shadow: var(--z-shadow);
}

.hst11-why__item strong {
	color: var(--z-navy);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.5;
}

.hst11-why__item span:not(.hst11-disc) {
	font-size: 0.9375rem;
	line-height: 1.7;
}

.hst11-band:not(.hst11-band--sky) .hst11-why__item {
	border-color: var(--z-line);
}

/* The kit's «Book your cleaning today!» card. */
.hst11-book {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 1.75rem 1.5rem 0;
	border-radius: 14px;
	background: var(--z-navy-grad);
	box-shadow: 0 20px 44px rgb(0 5 51 / 25%);
	color: #fff;
}

.hst11-book::after {
	position: absolute;
	inset-block-start: -3rem;
	inset-inline-end: -4rem;
	inline-size: 14rem;
	block-size: 14rem;
	border: 1.5px solid rgb(255 255 255 / 18%);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.hst11-book__label {
	margin: 0 0 0.3rem;
	color: #ffb566;
	font-size: 0.875rem;
	font-weight: 700;
}

.hst11-book__title {
	margin: 0 0 1.25rem;
	color: #fff;
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 900;
	line-height: 1.3;
}

.hst11-book .hst11-pair {
	position: relative;
	z-index: 1;
	margin-block-end: 1.5rem;
}

.hst11-book__photo {
	margin: 0 -1.5rem;
	mask-image: linear-gradient(transparent 0%, #000 35%);
}

.hst11-book__photo img {
	inline-size: 100%;
	block-size: 13rem;
	object-fit: cover;
}

.hst11-book--wide {
	margin-block-start: 3rem;
	padding-block-end: 1.75rem;
}

.hst11-book--wide .hst11-pair {
	margin: 0;
}

/* ---------------------------------------------------------- steps */

.hst11-steps {
	position: relative;
}

.hst11-steps__photo {
	margin: 0;
	overflow: hidden;
	border-block-start: 4px solid var(--z-orange);
	border-radius: 12px;
}

.hst11-steps__photo img {
	inline-size: 100%;
	block-size: clamp(16rem, 30vw, 22rem);
	object-fit: cover;
}

.hst11-steps__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: -5.5rem 2.5rem 0;
	padding: 0;
	list-style: none;
}

.hst11-step {
	position: relative;
	display: flex;
	gap: 0.9rem;
	padding: 1.9rem 1.25rem 1.3rem;
	border: 1px solid var(--z-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--z-shadow);
}

.hst11-step__tab {
	position: absolute;
	inset-block-start: -0.9rem;
	inset-inline-end: 1rem;
	padding: 0.15rem 0.9rem;
	border-radius: 6px;
	background: var(--z-navy);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 800;
}

.hst11-step__icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border: 1px solid var(--z-line);
	border-radius: 10px;
	background: var(--z-sky);
	color: var(--z-royal);
}

.hst11-step__icon .hst11-icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.hst11-step__title {
	margin: 0 0 0.25rem;
	font-size: 1.0938rem;
	font-weight: 800;
}

.hst11-step__text {
	margin: 0;
	font-size: 0.9063rem;
	line-height: 1.7;
}

/* ---------------------------------------------------------- prices */

.hst11-table {
	overflow-x: auto;
	border: 1px solid var(--z-line);
	border-radius: 12px;
}

.hst11-table table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.9688rem;
}

.hst11-table th,
.hst11-table td {
	padding: 0.95rem 1.1rem;
	border-block-end: 1px solid var(--z-line);
	text-align: center;
}

.hst11-table thead th {
	background: var(--z-sky);
	color: var(--z-navy);
	font-weight: 800;
}

.hst11-table tbody tr:nth-child(even) {
	background: #f7f9fc;
}

.hst11-table tbody tr:last-child th,
.hst11-table tbody tr:last-child td {
	border-block-end: 0;
}

.hst11-table tbody th {
	color: var(--z-navy);
	font-weight: 800;
	text-align: start;
}

.hst11-table tbody th .hst11-icon {
	margin-inline-end: 0.5rem;
	color: var(--z-orange);
	vertical-align: -0.2em;
}

.hst11-table td {
	color: var(--z-navy);
	font-weight: 700;
}

.hst11-table td .hst11-icon {
	margin-inline-end: 0.3rem;
	color: #0f8446;
	vertical-align: -0.2em;
	stroke-width: 3;
}

.hst11-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
	color: var(--z-navy);
	font-weight: 700;
}

/* ------------------------------------------------ navy places band */

.hst11-navyband {
	position: relative;
	overflow: hidden;
	background: var(--z-navy);
	color: #d7dcf5;
}

.hst11-navyband::before {
	position: absolute;
	inset: 0;
	background: var(--z-swirl) no-repeat;
	background-position: 100% 100%;
	background-size: 60rem auto;
	content: "";
	opacity: 0.35;
	pointer-events: none;
}

.hst11-navyband__inner {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1.75rem;
	padding-block: var(--z-band);
	text-align: center;
}

.hst11-navyband__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 800;
}

.hst11-navyband__text {
	max-inline-size: 42rem;
	margin: 0;
}

.hst11-places {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst11-places li {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	color: #fff;
	font-weight: 700;
}

.hst11-places .hst11-icon {
	inline-size: 3rem;
	block-size: 3rem;
	stroke-width: 1.3;
}

/* The same places as the kit's light tiles on the Services page. */
.hst11-places__lead {
	margin: 3.5rem 0 1.25rem;
	color: var(--z-navy);
	font-weight: 800;
	text-align: center;
}

.hst11-places--tiles {
	gap: 0.9rem;
}

.hst11-places--tiles li {
	inline-size: 7.5rem;
	padding: 1.1rem 0.5rem;
	border-radius: var(--z-radius);
	background: var(--z-sky);
	color: var(--z-navy);
	font-size: 0.9375rem;
}

.hst11-places--tiles .hst11-icon {
	inline-size: 2.4rem;
	block-size: 2.4rem;
	color: var(--z-navy);
}

/* -------------------------------------------------- the form band */

.hst11-bookband {
	position: relative;
	overflow: hidden;
	padding-block: var(--z-band);
	background: var(--z-grey);
}

.hst11-bookband__photo {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: 48%;
	mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}

.hst11-bookband__photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hst11-bookband__card {
	position: relative;
	max-inline-size: 38rem;
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: 14px;
	background: rgb(255 255 255 / 92%);
	box-shadow: var(--z-shadow);
}

.hst11-bookband__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
	font-weight: 800;
}

.hst11-ticks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.4rem;
	margin: 1.1rem 0 0;
	padding: 0;
	color: var(--z-navy);
	font-size: 0.875rem;
	font-weight: 700;
	list-style: none;
}

.hst11-ticks li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.hst11-ticks .hst11-icon {
	color: var(--z-orange);
	stroke-width: 3;
}

/* ------------------------------------------------------------ blog */

.hst11-news {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem 3rem;
}

.hst11-news__head {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 1rem;
}

.hst11-news__head .hst11-head {
	margin: 0;
}

/* The big card joins the heading's column, the list fills the other. */
.hst11-feature {
	display: contents;
}

.hst11-feature__big {
	grid-column: 1;
}

.hst11-feature__list {
	display: grid;
	grid-column: 2;
	grid-row: 1 / span 2;
	align-content: center;
	gap: 1.25rem;
}

.hst11-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.hst11-post {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.hst11-post__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: var(--z-sky);
	aspect-ratio: 16 / 10;
}

.hst11-post__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.35s;
}

.hst11-post:hover .hst11-post__media img {
	transform: scale(1.04);
}

.hst11-post__none {
	display: grid;
	place-items: center;
	block-size: 100%;
	color: var(--z-royal);
}

.hst11-post__none .hst11-icon {
	inline-size: 3rem;
	block-size: 3rem;
}

.hst11-post__cat {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	padding: 0.1rem 0.7rem;
	border-radius: 5px;
	background: var(--z-peach);
	color: var(--z-navy);
	font-size: 0.8125rem;
	font-weight: 800;
}

.hst11-post__title {
	margin: 0;
	font-size: 1.1563rem;
	font-weight: 800;
	line-height: 1.55;
}

.hst11-post__title a {
	color: var(--z-navy);
	text-decoration: none;
}

.hst11-post__title a:hover {
	color: var(--z-royal);
}

.hst11-post__title a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.hst11-post__excerpt {
	margin: 0.4rem 0 0;
	font-size: 0.9063rem;
	line-height: 1.75;
}

/* The kit's big blog card: the title over the photo on a dark fade. */
.hst11-post--over .hst11-post__media {
	aspect-ratio: 4 / 3.1;
}

.hst11-post--over .hst11-post__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 35%, rgb(0 5 51 / 88%) 100%);
	content: "";
}

.hst11-post--over .hst11-post__body {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding: 1.4rem;
}

.hst11-post--over .hst11-post__title {
	font-size: 1.3rem;
}

.hst11-post--over .hst11-post__title a,
.hst11-post--over .hst11-post__excerpt {
	color: #fff;
}

.hst11-post--over .hst11-post__excerpt {
	opacity: 0.85;
}

/* The kit's list card: a small photo beside the title. */
.hst11-post--row {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	align-items: center;
	gap: 1.1rem;
}

.hst11-post--row .hst11-post__cat {
	display: none;
}

.hst11-post--row .hst11-post__title {
	font-size: 1.0625rem;
}

/* ------------------------------------------------------ about pieces */

.hst11-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 3.5rem;
}

/* The kit's staggered four-photo collage. */
.hst11-collage {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.hst11-collage figure {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: var(--z-shadow);
	aspect-ratio: 4 / 3;
}

.hst11-collage figure:nth-child(2) {
	margin-block-start: 1.5rem;
	margin-inline-end: 1.5rem;
}

.hst11-collage figure:nth-child(3) {
	margin-inline-start: 1.5rem;
}

.hst11-collage img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hst11-diff {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: 3rem;
}

/* «What makes us different»: navy cards, staggered in two columns. */
.hst11-navycards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst11-navycards li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 1.25rem 1.1rem;
	border-radius: var(--z-radius);
	background: var(--z-navy);
	box-shadow: 0 14px 30px rgb(0 5 51 / 20%);
}

.hst11-navycards li:nth-child(odd) {
	transform: translateY(1.5rem);
}

.hst11-navycards strong {
	color: #fff;
	font-size: 1.0313rem;
	font-weight: 800;
	line-height: 1.5;
}

.hst11-navycards__tick {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 6px;
	background: var(--z-peach);
	color: var(--z-navy);
}

.hst11-navycards__tick .hst11-icon {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	stroke-width: 3;
}

/* The kit's team row: tall photo cards, here the site's services. */
.hst11-tall {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 17rem));
	justify-content: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst11-tall li {
	display: grid;
	justify-items: center;
	gap: 0.2rem;
	text-align: center;
}

.hst11-tall figure {
	margin: 0 0 0.8rem;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: var(--z-shadow);
	aspect-ratio: 5 / 6;
	inline-size: 100%;
}

.hst11-tall img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hst11-tall strong {
	color: var(--z-navy);
	font-size: 1.125rem;
	font-weight: 800;
}

.hst11-tall span {
	font-size: 0.875rem;
}

/* The kit's quote strip. */
.hst11-strip {
	background: linear-gradient(90deg, var(--z-indigo) 0%, var(--z-navy) 70%, var(--z-deep) 100%);
}

.hst11-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	padding-block: 2.5rem;
}

.hst11-strip__title {
	max-inline-size: 38rem;
	margin: 0;
	color: #fff;
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
	font-weight: 800;
	line-height: 1.5;
}

.hst11-strip__text {
	margin: 0.3rem 0 0;
	color: #d7dcf5;
}

/* ------------------------------------------------------- questions */

.hst11-faq {
	display: grid;
}

.hst11-faq__item {
	border-block-end: 1px solid var(--z-line);
}

.hst11-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 0.5rem;
	color: var(--z-navy);
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}

.hst11-faq__q::-webkit-details-marker {
	display: none;
}

.hst11-faq__sign {
	position: relative;
	flex: none;
	inline-size: 14px;
	block-size: 14px;
}

.hst11-faq__sign::before,
.hst11-faq__sign::after {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-start: 0;
	inline-size: 14px;
	block-size: 2px;
	background: var(--z-orange);
	content: "";
	transition: transform 0.2s;
}

.hst11-faq__sign::after {
	transform: rotate(90deg);
}

.hst11-faq__item[open] .hst11-faq__sign::after {
	transform: rotate(0);
}

.hst11-faq__a {
	margin: 0;
	padding: 0 0.5rem 1.2rem;
	font-size: 0.9688rem;
}

/* -------------------------------------------------- services page */

.hst11-lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.1rem;
}

.hst11-listcard {
	display: flex;
	flex: 0 1 calc((100% - 3 * 1.1rem) / 4);
	flex-direction: column;
	gap: 0.6rem;
	overflow: hidden;
	padding-block-end: 1.1rem;
	border: 1px solid var(--z-line);
	border-radius: var(--z-radius);
	background: #fff;
	box-shadow: 0 8px 22px rgb(0 8 77 / 7%);
	text-decoration: none;
	transition: transform 0.2s;
}

.hst11-listcard:hover {
	transform: translateY(-4px);
}

.hst11-listcard__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.hst11-listcard__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hst11-listcard__title {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding: 0.55rem 0.8rem;
	background: linear-gradient(90deg, var(--z-navy) 0%, var(--z-indigo) 100%);
	color: #fff;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
}

.hst11-listcard .hst11-checks {
	padding-inline: 1rem;
}

.hst11-listcard .hst11-price {
	align-self: center;
	margin-block-start: auto;
}

.hst11-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	align-items: start;
	gap: 3rem;
}

.hst11-detail {
	margin-block-end: 2rem;
	padding-block-end: 2rem;
	border-block-end: 1px solid var(--z-line);
	scroll-margin-block-start: 2rem;
}

.hst11-detail__title {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 0.9rem;
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
	font-weight: 800;
}

.hst11-detail__title .hst11-disc {
	background: #fff;
}

.hst11-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.8rem;
}

.hst11-gallery figure {
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 4 / 3;
}

.hst11-gallery img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hst11-details__side {
	position: sticky;
	inset-block-start: 1.5rem;
}

/* The kit's cyan «Get in touch» card. */
.hst11-sideform {
	padding: 1.6rem 1.4rem;
	border-radius: 14px;
	background: linear-gradient(170deg, var(--z-cyan) 0%, #9deaff 100%);
	box-shadow: var(--z-shadow);
}

.hst11-sideform__title {
	margin: 0 0 0.4rem;
	color: var(--z-navy);
	font-size: 1.6rem;
	font-weight: 800;
	text-align: center;
}

.hst11-sideform__text {
	margin: 0 0 1.2rem;
	color: var(--z-navy);
	font-size: 0.9375rem;
	text-align: center;
}

/* ----------------------------------------------------- contact page */

.hst11-contact {
	display: grid;
	grid-template-columns: 19rem minmax(0, 1fr);
	align-items: start;
	gap: 2.5rem;
}

.hst11-contact__label {
	margin: 0 0 1rem;
	color: var(--z-navy);
	font-size: 1.25rem;
	font-weight: 800;
}

.hst11-infos {
	display: grid;
	gap: 0.9rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.hst11-infos li {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1rem;
	border-radius: var(--z-radius);
	background: var(--z-sky);
	line-height: 1.6;
}

.hst11-infos strong {
	display: block;
	color: var(--z-navy);
	font-weight: 800;
}

.hst11-infos a {
	color: var(--z-text);
	text-decoration: none;
}

.hst11-infos a:hover {
	color: var(--z-royal);
}

.hst11-infos__icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 8px;
	background: #fff;
	color: var(--z-orange);
}

.hst11-contact__card {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: 14px;
	background: var(--z-sky);
}

.hst11-contact__title {
	margin-block-end: 0.5rem;
	text-align: center;
}

.hst11-contact__card .hst11-lead {
	margin-block-end: 1.5rem;
}

.hst11-mapbox iframe {
	display: block;
	block-size: 380px;
	border-radius: 14px;
}

/* WPForms: the kit's fields and the full-width royal button. */
.hst11-form .wpforms-container {
	margin: 0;
}

.hst11-form .wpforms-field-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 0.9rem;
}

/* The grid places the fields; WPForms' own half-width columns would halve them again. */
.hst11-form .wpforms-form .wpforms-field-container .wpforms-field {
	inline-size: auto;
	margin-inline: 0;
	padding-block: 0 0.9rem;
	float: none;
	clear: none;
}

.hst11-form .wpforms-field-textarea,
.hst11-form .wpforms-field-name,
.hst11-form .wpforms-field-select,
.hst11-form .wpforms-field-checkbox,
.hst11-form .wpforms-field-radio {
	grid-column: 1 / -1;
}

.hst11-details__side .hst11-form .wpforms-field-container {
	grid-template-columns: minmax(0, 1fr);
}

.hst11-form .wpforms-field-label,
.hst11-form .wpforms-field-sublabel {
	color: var(--z-navy);
	font-size: 0.875rem;
	font-weight: 700;
}

.hst11-form input[type="text"],
.hst11-form input[type="email"],
.hst11-form input[type="tel"],
.hst11-form input[type="number"],
.hst11-form select,
.hst11-form textarea {
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 3rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--z-line);
	border-radius: 8px;
	background: #fff;
	color: var(--z-navy);
	font: inherit;
	font-size: 0.9375rem;
}

.hst11-form .wpforms-form .wpforms-field input,
.hst11-form .wpforms-form .wpforms-field select,
.hst11-form .wpforms-form .wpforms-field textarea {
	max-inline-size: 100%;
}

.hst11-form textarea {
	min-block-size: 7rem;
}

.hst11-form input:focus,
.hst11-form select:focus,
.hst11-form textarea:focus {
	border-color: var(--z-royal);
	outline: 3px solid rgb(48 64 182 / 25%);
	outline-offset: 0;
}

.hst11-form .wpforms-submit-container {
	padding: 0;
}

.hst11-form button[type="submit"] {
	inline-size: 100%;
	padding: 0.85rem 2rem;
	border: 0;
	border-radius: var(--z-radius);
	background: var(--z-call);
	color: #fff;
	font: inherit;
	font-weight: 800;
	text-shadow: var(--z-word-shadow);
	cursor: pointer;
}

.hst11-form button[type="submit"]:hover {
	filter: brightness(1.12);
}

.hst11-form .wpforms-error,
.hst11-form label.wpforms-error {
	color: #a4161a;
	font-size: 0.8125rem;
}

/* ========================================================= listings */

.hst11-blog {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	align-items: start;
	gap: 2.5rem;
}

.hst11-posts--list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1.5rem;
}

/* The kit's first blog card: full width, the title over the photo. */
.hst11-posts--list > .hst11-post:first-child {
	grid-column: 1 / -1;
}

.hst11-posts--list > .hst11-post:first-child .hst11-post__media {
	aspect-ratio: 16 / 8;
}

.hst11-posts--list > .hst11-post:first-child .hst11-post__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 40%, rgb(0 5 51 / 88%) 100%);
	content: "";
}

.hst11-posts--list > .hst11-post:first-child .hst11-post__body {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding: 1.5rem;
}

.hst11-posts--list > .hst11-post:first-child .hst11-post__title {
	font-size: 1.4rem;
}

.hst11-posts--list > .hst11-post:first-child .hst11-post__title a,
.hst11-posts--list > .hst11-post:first-child .hst11-post__excerpt {
	color: #fff;
}

.hst11-blog__side {
	position: sticky;
	inset-block-start: 1.5rem;
	display: grid;
	gap: 1.5rem;
}

.hst11-sidelist {
	padding: 1.4rem;
	border: 1px solid var(--z-line);
	border-radius: 12px;
}

.hst11-sidelist__title {
	margin: 0 0 0.8rem;
	color: var(--z-navy);
	font-size: 1.375rem;
	font-weight: 800;
}

.hst11-sidelist ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst11-sidelist li {
	position: relative;
	padding-inline-start: 1.1rem;
}

.hst11-sidelist li::before {
	position: absolute;
	inset-block-start: 0.85rem;
	inset-inline-start: 0;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--z-navy);
	content: "";
}

.hst11-sidelist a {
	display: block;
	padding-block: 0.3rem;
	color: var(--z-navy);
	font-size: 0.9375rem;
	text-decoration: none;
}

.hst11-sidelist a:hover,
.hst11-sidelist a.is-current {
	color: var(--z-royal);
	font-weight: 800;
}

.hst11-empty {
	padding: 2rem;
	border-radius: 12px;
	background: var(--z-sky);
	text-align: center;
}

.hsb-infinite__more {
	margin-block-start: 2.5rem;
	text-align: center;
}

.hsb-infinite__link {
	display: inline-flex;
	padding: 0.8rem 2rem;
	border-radius: var(--z-radius);
	background: var(--z-call);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	text-shadow: var(--z-word-shadow);
}

.hst11-searchbar {
	padding-block: 1.5rem;
	background: var(--z-sky);
}

.hst11-searchbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.hst11-searchbar__inner .search-form {
	flex: 0 1 30rem;
}

.hst11-searchbar__count {
	margin: 0;
	color: var(--z-navy);
	font-weight: 800;
}

.search-form {
	display: flex;
	gap: 0.5rem;
}

.search-form label {
	flex: 1;
}

.search-form .search-field {
	inline-size: 100%;
	min-block-size: 3rem;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--z-line);
	border-radius: var(--z-radius);
	background: #fff;
	color: var(--z-navy);
	font: inherit;
}

.search-form .search-submit {
	padding-inline: 1.3rem;
	border: 0;
	border-radius: var(--z-radius);
	background: var(--z-call);
	color: #fff;
	font: inherit;
	font-weight: 800;
	text-shadow: var(--z-word-shadow);
	cursor: pointer;
}

/* ========================================================== article */

.hst11-posthead {
	background: var(--z-grey);
}

.hst11-posthead__inner {
	padding-block: 8.5rem 7rem;
	text-align: center;
}

.hst11-posthead__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
	font-weight: 800;
}

.hst11-band--post {
	padding-block-start: 0;
}

.hst11-article__thumb {
	margin: 2.5rem 0 2rem;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: var(--z-shadow);
}

.hst11-article__thumb img {
	inline-size: 100%;
	block-size: auto;
	max-block-size: 30rem;
	object-fit: cover;
}

.hst11-band--post .hst11-narrow > .hst11-article:first-child:not(:has(.hst11-article__thumb)) {
	padding-block-start: 3rem;
}

.hst11-article__cat {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 2rem 0 0;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--z-line);
	font-size: 0.9375rem;
}

.hst11-article__cat a {
	color: var(--z-navy);
	font-weight: 800;
	text-decoration: none;
}

.hst11-prose {
	max-inline-size: none;
	color: #454d6e;
	font-size: 1.0625rem;
	line-height: 2;
	overflow-wrap: break-word;
}

.hst11-prose h2 {
	margin: 2.25rem 0 0.75rem;
	font-size: 1.55rem;
	font-weight: 800;
}

.hst11-prose h3 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 800;
}

.hst11-prose img {
	block-size: auto;
	margin-block: 1.5rem;
	border-radius: var(--z-radius);
}

.hst11-prose figure,
.hst11-prose .wp-caption {
	max-inline-size: 100%;
	margin-inline: 0;
}

.hst11-prose .wp-caption-text {
	margin-block-start: -0.75rem;
	font-size: 0.8125rem;
	text-align: center;
}

.hst11-prose table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.hst11-prose th,
.hst11-prose td {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--z-line);
	text-align: start;
}

.hst11-prose th {
	background: var(--z-navy);
	color: #fff;
}

.hst11-prose ul li::marker {
	color: var(--z-orange);
}

/* The kit's quote box, without decorative quote marks (owner rule). */
.hst11-prose blockquote {
	margin: 1.5rem 0;
	padding: 1.1rem 1.5rem;
	border-inline-start: 4px solid var(--z-orange);
	border-radius: var(--z-radius);
	background: var(--z-sky);
	font-size: 1.125rem;
}

/* ------------------------------------------------------------- 404 */

.hst11-404 {
	position: relative;
	overflow: hidden;
	background: var(--z-sky-grad);

	/* The site's photo under the sky veil, lighter at the edges. */
	--hsb-backdrop-veil: radial-gradient(ellipse 65% 80% at 50% 50%, rgb(220 247 255 / 94%) 0%, rgb(220 247 255 / 86%) 55%, rgb(180 240 255 / 45%) 100%);
}

.hst11-404__inner {
	position: relative;
	display: grid;
	justify-items: center;
	padding-block: 9rem 5rem;
	text-align: center;
}

.hst11-404__kicker {
	margin: 0;
	color: var(--z-navy);
	font-size: 1.125rem;
	font-weight: 800;
}

.hst11-404__code {
	margin: 0;
	color: var(--z-navy);
	font-size: clamp(7rem, 5rem + 12vw, 13rem);
	font-weight: 900;
	line-height: 1;
}

.hst11-404__title {
	margin: 0.5rem 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 800;
}

.hst11-404__text {
	max-inline-size: 30rem;
	margin: 0 0 1.5rem;
	color: #3d4670;
}

.hst11-404__search {
	inline-size: min(100%, 28rem);
	margin-block-end: 1.25rem;
}

.hst11-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

/* ============================================================ footer */

.hsb-footer {
	padding: 0 0.5rem 0.5rem;
	background: #fff;
}

.hst11-foot {
	overflow: hidden;
	border-radius: 12px;
	background: var(--z-grid), var(--z-navy-grad);
	background-size: 54px 54px, 54px 54px, auto;
	color: #d7dcf5;
}

.hst11-foot__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 0.7fr)) minmax(0, 1.4fr);
	gap: 2rem;
	padding-block: 4rem 2.5rem;
}

.hst11-foot__label {
	margin: 0 0 1rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
}

.hst11-foot__links {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	list-style: none;
}

.hst11-foot a:not(.hst11-btn) {
	color: #d7dcf5;
	text-decoration: none;
}

.hst11-foot a:not(.hst11-btn):hover {
	color: #fff;
}

.hst11-foot__info strong {
	color: #fff;
}

.hst11-foot__big {
	margin: 0 0 1.1rem;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.55;
}

.hst11-foot__small {
	margin: 0.8rem 0 0;
	font-size: 0.875rem;
}

.hst11-foot a.hst11-pill__number {
	color: var(--z-navy);
}

.hst11-foot__base {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.8fr);
	align-items: center;
	gap: 2rem;
	padding-block: 2rem 2.5rem;
	border-block-start: 1px solid rgb(255 255 255 / 14%);
}

.hst11-foot__brand .hsb-logo img {
	block-size: 56px;
	inline-size: auto;
}

.hst11-foot__brand p {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
}

.hst11-foot__map iframe {
	block-size: 170px;
	border-radius: 10px;
}

.hst11-foot__follow {
	justify-self: end;
	text-align: end;
}

/* ======================================================== tablet */

@media (width <= 1100px) {
	.hst11-menu {
		gap: 0 1.1rem;
	}

	.hst11-header {
		gap: 1rem;
	}

	.hst11-header__end .hst11-btn span {
		white-space: nowrap;
	}
}

@media (width <= 1024px) {
	.hst11-listcard {
		flex-basis: calc((100% - 2 * 1.25rem) / 3);
	}

	.hst11-card {
		flex-basis: calc((100% - 1.25rem) / 2);
	}

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

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

	.hst11-foot__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hst11-foot__promise {
		grid-column: 1 / -1;
	}

	.hst11-details,
	.hst11-blog {
		grid-template-columns: minmax(0, 1fr) 18rem;
		gap: 2rem;
	}
}

@media (width <= 900px) {
	.hst11-hero__inner,
	.hst11-whywrap,
	.hst11-split,
	.hst11-diff,
	.hst11-news,
	.hst11-contact,
	.hst11-details,
	.hst11-blog {
		grid-template-columns: minmax(0, 1fr);
	}

	.hst11-hero__media {
		justify-self: center;
		inline-size: min(100%, 26rem);
	}

	.hst11-feature__big,
	.hst11-feature__list {
		grid-column: auto;
		grid-row: auto;
	}

	.hst11-whywrap .hst11-book,
	.hst11-blog__side .hst11-book {
		max-inline-size: 26rem;
	}

	.hst11-details__side,
	.hst11-blog__side {
		position: static;
	}

	.hst11-steps__list {
		grid-template-columns: minmax(0, 1fr);
		margin: -3rem 1rem 0;
	}

	.hst11-bookband__photo {
		display: none;
	}

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

	.hst11-foot__follow {
		justify-self: start;
		text-align: start;
	}

	.hst11-collage {
		max-inline-size: 32rem;
	}
}

/* ========================================================= phone */

@media (width <= 767px) {
	.hsb-header {
		padding-block-start: 0.6rem;
	}

	.hst11-header {
		flex-wrap: wrap;
		gap: 0.5rem;
		min-block-size: 64px;
		padding-inline: 0.9rem;
	}

	.hst11-header__logo .hsb-logo img,
	.hst11-header__logo .custom-logo {
		block-size: 40px;
	}

	.hst11-header__end {
		margin-inline-start: auto;
	}

	.hst11-header__end .hst11-btn {
		display: none;
	}

	.hst11-toggle {
		display: block;
	}

	.hst11-header__nav {
		order: 3;
		flex-basis: 100%;
		border-block-start: 1px solid rgb(255 255 255 / 15%);
	}

	.hst11-menu {
		flex-direction: column;
		gap: 0;
	}

	.hst11-menu a {
		padding-block: 0.7rem;
		border-block-end: 1px solid rgb(255 255 255 / 10%);
	}

	.hst11-banner__inner {
		min-block-size: 22rem;
		padding-block: 7rem 2rem;
	}

	.hst11-banner__panel {
		padding: 1.1rem 1.1rem 0.9rem;
	}

	.hst11-hero__inner {
		padding-block: 7.5rem 4rem;
	}

	.hst11-hero__badge {
		inset-inline-start: -0.4rem;
	}

	.hst11-hero__tag {
		inset-inline-end: -0.4rem;
	}

	.hst11-pill {
		flex-wrap: wrap;
		padding-inline-start: 0.35rem;
	}

	.hst11-pill__number {
		flex: 1 1 100%;
		justify-content: center;
		padding-block: 0.4rem;
	}

	.hst11-pill .hst11-btn {
		flex: 1 1 100%;
	}

	.hst11-pair .hst11-btn {
		flex: 1 1 100%;
	}

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

	.hst11-card,
	.hst11-listcard {
		flex-basis: 100%;
	}

	.hst11-why,
	.hst11-posts,
	.hst11-posts--list,
	.hst11-navycards,
	.hst11-tall,
	.hst11-form .wpforms-field-container,
	.hst11-foot__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hst11-navycards li:nth-child(odd) {
		transform: none;
	}

	.hst11-posts--list > .hst11-post:first-child .hst11-post__media {
		aspect-ratio: 4 / 3.4;
	}

	.hst11-post--row {
		grid-template-columns: 7.5rem minmax(0, 1fr);
	}

	.hst11-post--row .hst11-post__excerpt {
		display: none;
	}

	.hst11-steps__list {
		margin: -2rem 0.5rem 0;
	}

	.hst11-places {
		gap: 1.25rem 1.5rem;
	}

	.hst11-places li {
		inline-size: 6rem;
	}

	.hst11-places--tiles li {
		inline-size: calc(50% - 0.5rem);
	}

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

	.hst11-table th,
	.hst11-table td {
		padding: 0.75rem 0.6rem;
		font-size: 0.875rem;
	}

	.hst11-strip__inner {
		padding-block: 2rem;
	}

	.hst11-posthead__inner {
		padding-block: 7rem 6rem;
	}

	.hst11-article__thumb {
		margin-block-start: 1.5rem;
	}

	.hst11-mapbox iframe {
		block-size: 300px;
	}

	/* On a phone the search icon sits mid-row, and a panel pinned to it ran
	   past the screen edge (enjz.net 115 px, Tasliik 31, Raash/Khazanat 20).
	   Pin it to the full-width header instead. */
	.hst11-navsearch {
		position: static;
	}

	.hst11-navsearch__panel {
		inset-inline: 1rem;
		inline-size: auto;
	}
}

/* The designer credit: its own row under the three columns, on the left. */
.hst11-foot__base > .hsb-credit {
	grid-column: 1 / -1;
	justify-self: end;
	color: #d7dbf2;
	font-size: 0.875rem;
}

/*
 * A list of plain links (the cities a service covers) as a grid of chips, not
 * one tall bullet column (owner, 2026-10-24; same as site 12). The class (hst11-linkgrid; .hst12-chips is the blog filter) comes from
 * hst11_link_lists() (inc/content.php); the content itself carries no styles.
 */
:is(body.single, body.hsb-text-page) .hsb-content ul.hst11-linkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 0.625rem;
	padding: 1rem;
}

:is(body.single, body.hsb-text-page) .hsb-content ul.hst11-linkgrid > li {
	margin: 0;
	padding: 0;
}

:is(body.single, body.hsb-text-page) .hsb-content ul.hst11-linkgrid > li::before {
	content: none;
}

:is(body.single, body.hsb-text-page) .hsb-content ul.hst11-linkgrid > li > a {
	display: flex;
	align-items: center;
	block-size: 100%;
	min-block-size: 2.75rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid #dbe3f7;
	border-radius: 0.75rem;
	background: #fff;
	color: var(--z-royal);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

:is(body.single, body.hsb-text-page) .hsb-content ul.hst11-linkgrid > li > a:hover,
:is(body.single, body.hsb-text-page) .hsb-content ul.hst11-linkgrid > li > a:focus-visible {
	border-color: var(--z-royal);
	background: var(--z-royal);
	color: #fff;
}

@media (width <= 480px) {
	:is(body.single, body.hsb-text-page) .hsb-content ul.hst11-linkgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
		padding: 0.75rem;
	}

	:is(body.single, body.hsb-text-page) .hsb-content ul.hst11-linkgrid > li > a {
		padding: 0.45rem 0.7rem;
		font-size: 0.875rem;
	}
}

/*
 * Phones: the short summary tables wrap inside the column instead of hs-base's
 * one-line sideways scroll (owner checks every page at 375 px; same as site 12).
 */
@media (width <= 700px) {
	:is(body.single, body.hsb-text-page) .hsb-content.hst11-prose table {
		display: table;
		overflow-x: visible;
		inline-size: 100%;
		white-space: normal;
		font-size: 0.875rem;
	}

	:is(body.single, body.hsb-text-page) .hsb-content.hst11-prose :is(th, td) {
		padding: 0.5rem 0.6rem;
		line-height: 1.7;
		white-space: normal;
	}
}