@font-face {
	font-family: "stix-two-text";
	src: url("../fonts/stix-two-text-v18-latin-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	/* Divided by 1.1 to cancel the font-size: 1.1em on mark,
	   keeping line boxes equal height to Plus Jakarta Sans */
	ascent-override: 95%;
	descent-override: 27%;
	line-gap-override: 0%;
}

.heading-accent {
	font-family: "stix-two-text", Georgia, serif;
	font-style: italic;
	font-weight: 400;
}

html {
	width: 100%;
	height: 100%;
	font-size: 100%;
	scroll-behavior: smooth;
}

html:focus-within {
	scroll-behavior: smooth;
}

h1, h2 { text-wrap: balance; }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	padding: 0.75rem 1rem;
	background: var(--color-bg-dark-400, #111111);
	color: var(--color-text-pri-light, #ffffff);
	border-radius: 0.5rem;
	z-index: 10000;
	text-decoration: none;
}

button, input, select, textarea {
	font-family: inherit;
}

/* Collapse the last section's margin and extend its container downward
   so the container's border-inline gridlines cover the gap above the footer */
main > section:last-child {
	margin-bottom: 0;
}

main > section:last-child > .container {
	padding-block-end: var(--size-v-pad-sm);
}

body {
	background-color: var(--color-bg-light-50);
	font-family: "plus-jakarta-sans";
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-m);
	line-height: var(--lh-base);
	color: var(--color-text-pri-dark);
	overflow-x: hidden;
}

.container {
	width: 100%;
	max-width: var(--size-content-max-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: calc(0.5 * var(--size-global-padding-h));
	padding-left: calc(0.5 * var(--size-global-padding-h));
}

@media only screen and (max-width: 991.98px) {
	.container {
		max-width: 100%;
		padding-right: 1.5rem;
		padding-left: 1.5rem;
	}
}

.row {
	--bs-gutter-x: 3rem;
	--bs-gutter-m-x: 2rem;
	margin-right: calc(-0.5 * var(--bs-gutter-x));
	margin-left: calc(-0.5 * var(--bs-gutter-x));
}

@media only screen and (max-width: 991.98px) {
	.row {
		margin-right: calc(-0.5 * var(--bs-gutter-m-x));
		margin-left: calc(-0.5 * var(--bs-gutter-m-x));
	}
}

.row [class^="col-"],
.row [class*=" col-"] {
	padding-right: calc(0.5 * var(--bs-gutter-x));
	padding-left: calc(0.5 * var(--bs-gutter-x));
}

@media only screen and (max-width: 991.98px) {

	.row [class^="col-"],
	.row [class*=" col-"] {
		padding-right: calc(0.5 * var(--bs-gutter-m-x));
		padding-left: calc(0.5 * var(--bs-gutter-m-x));
	}
}

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

::placeholder {
	font-weight: var(--fw-medium);
	font-size: var(--fs-body-m);
	line-height: var(--lh-base);
	color: var(--color-text-pri-light);
}

a {
	color: inherit;
	text-decoration: underline;
	font-weight: var(--fw-medium);
	transition: var(--transition-fast);
}

@media (hover: hover) {
    a[href]:hover {
        opacity: 0.8;
    }
}

.header-menu a,
.header-menu-desktop a {
	text-decoration: none;
	font-weight: inherit;
}

.header-menu a {
	color: var(--color-text-pri-dark);
}

@media (hover: hover) {
    .header-menu a:hover,
    .header-menu-desktop a:hover {
        color: var(--color-text-pri-dark);
    }
}

label {
	display: inline-block;
	font-size: var(--fs-link);
	line-height: 1.4285714286;
	font-weight: var(--fw-medium);
	margin-bottom: 0.5rem;
}

input:is([type="text"], [type="email"], [type="tel"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 0;
}

input:is([type="text"], [type="email"], [type="tel"]),
textarea,
select {
	width: 100%;
	border: unset;
	border-radius: var(--radius-btn);
	background-color: var(--color-bg-light-200);
	padding: 2.3rem 3.5rem 1.8rem 3.5rem;
	font-family: "plus-jakarta-sans";
	font-weight: var(--fw-medium);
	font-size: var(--fs-body-m);
	line-height: var(--lh-base);
	color: var(--color-text-sec-dark);
}

select {
	appearance: none;
	background-image: url(../icons/dropdown.png);
	background-repeat: no-repeat;
	background-position: calc(100% - 3rem);
	background-size: 1rem;
}

option {
	color: var(--color-text-pri-dark);
}

iframe {
	width: 100%;
	height: 100%;
}

p+p {
	margin-top: 1.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "plus-jakarta-sans";
	font-weight: var(--fw-semibold);
}


/* ── Post meta pills (blog + case-study singles) ── */
.post-meta {
	display: flex;
	gap: 0.5rem;
}

.post-meta > * {
	color: var(--color-text-pri-dark);
	border: 0.0625rem solid var(--color-border-light-100);
	padding: 0.5rem 1rem;
	border-radius: var(--radius-btn);
}

/* ── Shared card description (blog + case-study archives) ── */
.card__desc {
	color: var(--color-text-sec-dark);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 992px) {
	.card__desc {
		padding-right: 3rem;
	}
}

h1,
.page-title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-xs);
}

h2 {
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-xs);
}

h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-xs);
}

h4 {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	letter-spacing: var(--ls-xs);
}

h5 {
	font-size: var(--fs-h5);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-xs);
}

h6 {
	font-size: var(--fs-body-l);
	letter-spacing: var(--ls-xs);
}

img {
	width: auto;
	max-width: 100%;
	height: auto;
}

*+figure {
	margin-top: var(--size-pad-sm2);
}

figure+* {
	margin-top: var(--size-pad-sm2);
}

.img-cover {
	overflow: hidden;
	line-height: 0;
}

.img-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img-contain {
	line-height: 0;
}

.img-contain img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.swiper-slide {
	height: auto;
}

.swiper-button-prev,
.swiper-button-next {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background-color: var(--color-bg-light-50);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 3.2rem;
}

.swiper-button-prev::after,
.swiper-button-next::after {
	content: none;
}

.swiper-button-prev {
	background-image: url(../icons/icon-arrow-dark.webp);
	left: -6rem;
}

.swiper-button-next {
	background-image: url(../icons/icon-arrow-dark.webp);
	right: -6rem;
}

/* ── Button System (6 variants) ────────────────────────────
   Surface-agnostic:
     .btn-primary    — dark bg, light text
     .btn-secondary  — light bg, dark border, dark text

   Surface-specific:
     .btn-tertiary    — ghost on LIGHT: light bg, light border, dark text
     .btn-ghost-light — ghost on DARK:  transparent, dark border, light text

   Special:
     .btn-arrow       — text link with trailing arrow icon
   ──────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--size-icon-gap);
	border-radius: var(--radius-btn);
	padding-block: var(--btn-pad-v);
	padding-inline: var(--btn-pad-h);
	font-size: var(--fs-button);
	font-family: "plus-jakarta-sans";
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	letter-spacing: var(--ls-md);
	transition: var(--transition-fast);
}

.btn.btn-primary {
	border: var(--size-border-button-border) solid var(--color-border-button-pri);
	background-color: var(--color-bg-button-pri);
	color: var(--color-text-pri-light);
}

@media (hover: hover) {
.btn.btn-primary:hover {
	box-shadow: var(--color-overlay-dark-15) 0px 0px 0px 100px inset;
	color: var(--color-text-pri-light);
}
}

.btn.btn-secondary {
	border: var(--size-border-button-border) solid var(--color-border-button-sec);
	background-color: var(--color-bg-button-sec);
	color: var(--color-text-pri-dark);
}

.btn-secondary.active {
	border-color: var(--color-raw-pri-500);
	color: var(--color-raw-pri-500);
}

@media (hover: hover) {
.btn.btn-secondary:hover {
	box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 0px 100px inset;
}
}

.btn.btn-tertiary {
	border: var(--size-border-button-border) solid var(--color-border-button-ter);
	background-color: var(--color-bg-button-ter);
	color: var(--color-text-pri-dark);
}

@media (hover: hover) {
.btn.btn-tertiary:hover {
	box-shadow: var(--color-overlay-dark-15) 0px 0px 0px 100px inset;
}
}

.btn.btn-ghost-light {
	border: var(--size-border-button-border) solid var(--color-border-button-ghost-dark);
	background-color: transparent;
	color: var(--color-text-pri-light);
}

@media (hover: hover) {
.btn.btn-ghost-light:hover {
	background-color: var(--color-overlay-light-08);
	color: var(--color-text-pri-light);
}
}

.btn.btn-green {
	border: var(--size-border-button-border) solid var(--color-accent-green-dark);
	background-color: var(--color-accent-green-dark);
	color: var(--color-text-pri-light);
}

@media (hover: hover) {
.btn.btn-green:hover {
	box-shadow: var(--color-overlay-dark-15) 0px 0px 0px 100px inset;
	color: var(--color-text-pri-light);
}
}

.btn.btn-sm {
	padding-block: var(--btn-sm-pad-v);
	padding-inline: var(--btn-sm-pad-h);
}

.btn.btn-arrow {
	min-width: unset;
	padding: unset;
	padding-right: 4rem;
	font-family: "plus-jakarta-sans";
	font-weight: var(--fw-regular);
	color: var(--color-text-pri-dark);
	text-align: unset;
	position: relative;
}

.btn.btn-arrow::after {
	content: "";
	display: block;
	width: 3.2rem;
	height: 3.2rem;
	background: url(../icons/icon-arrow-dark.webp) no-repeat center center/cover;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	transition: var(--transition-fast);
}

@media (hover: hover) {
.btn.btn-arrow:hover {
	color: var(--color-text-pri-light);
}

.btn.btn-arrow:hover::after {
	right: -1rem;
}
}

.btn.btn-inline-link {
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 0;
	justify-content: flex-start;
	font-size: var(--fs-body-m);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-base);
	letter-spacing: var(--ls-md);
	text-decoration: underline !important;
	text-underline-offset: 0.3em;
	color: inherit;
}

/* ── Button icon (img inside any .btn) ──────────────────── */
.btn-icon {
	width: var(--size-icon-inline);
	height: var(--size-icon-inline);
	object-fit: contain;
	flex-shrink: 0;
}

/* ── Card: dark background ──────────────────────────────── */

.card-dark {
	background-color: var(--color-bg-dark-300);
	background-image: url(../images/texture-card-dark.webp);
	background-size: 25rem;
	border: var(--size-border-card-border) solid var(--color-border-dark-100);
	border-radius: var(--radius-card);
	overflow: hidden;
}

strong,
b {
	font-weight: var(--fw-semibold);
}

mark {
	background: none;
	color: inherit;
	font-family: "stix-two-text", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.15em;
	line-height: 0.9em;
	letter-spacing: -0.05em;
}


/* ── Font Presets (.fp-*) ─────────────────────────────── */

.fp-body-lg strong {
	font-size: var(--fs-body-l);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-base);
	letter-spacing: var(--ls-xs);
}

.fp-quote {
	font-size: var(--fs-quote-m);
	font-weight: var(--fw-medium);
	line-height: var(--lh-quote);
	letter-spacing: var(--ls-xs);
}

.fp-heading-hero-lg {
	font-size: var(--fs-display);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-xs);
}

.fp-heading-hero-md {
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-xs);
}

.fp-heading-hero-article {
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-xs);
}

.fp-heading-section-lg {
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-xs);
}

.fp-heading-section-md {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-xs);
}

.fp-heading-card-lg {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-sm);
}

.fp-heading-card-md {
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-h4);
	letter-spacing: var(--ls-sm);
}

.fp-body-lg {
	font-size: var(--fs-body-l);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	letter-spacing: var(--ls-md);
}

.fp-body-md {
	font-size: var(--fs-body-m);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	letter-spacing: var(--ls-md);
}

.fp-body-sm {
	font-size: var(--fs-body-s);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	letter-spacing: var(--ls-md);
}

.fp-tab {
	font-size: var(--fs-h5);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-xs);
}

.fp-btn {
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-md);
}

.fp-nav-link {
	font-size: var(--fs-link);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-md);
}

.fs-20 {
	font-size: var(--fs-body-l);
}

.fs-28 {
	font-size: var(--fs-h3);
}

.color-white {
	color: var(--color-text-pri-light);
}

.header {
	--gridline-color: var(--color-border-light-100);
	background-color: var(--color-bg-light-50);
	border-bottom: 1px solid var(--color-border-light-100);
	padding-left: 1rem;
	padding-right: 1rem;
}

.header > .container {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	border-left: 1px solid var(--gridline-color);
	border-right: 1px solid var(--gridline-color);
}

@media only screen and (max-width: 991.98px) {
	.header > .container {
		padding-block: 0.75rem;
	}
}

.admin-bar .header.sticky-top {
	top: 32px;
}

.header-logo {
	height: 2.125rem;
	width: 4rem;
	max-width: none;
}

.header-menu {
	font-family: "plus-jakarta-sans";
	font-weight: var(--fw-semibold);
	font-size: var(--fs-link);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-md);
	color: var(--color-text-pri-dark);
}

.header-menu .menu-item a {
	text-decoration: unset;
}


/* ── Desktop inline nav ─────────────────────────────────── */
.header-nav-desktop {
	display: flex;
	align-items: center;
	margin-left: 1rem;
}

@media only screen and (max-width: 991.98px) {
	.header-nav-desktop {
		display: none;
	}
}

.header-menu-desktop {
	font-family: "plus-jakarta-sans";
	font-weight: var(--fw-semibold);
	font-size: var(--fs-link);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-md);
	color: var(--color-text-pri-dark);
	gap: 0.4rem;
}

.header-menu-desktop .menu-item a {
	text-decoration: unset;
	padding: 0.3rem 0.5rem;
	border-radius: 0.5rem;
	transition: background-color 0.2s ease;
}

@media (hover: hover) {
    .header-menu-desktop .menu-item a:hover {
        background-color: rgba(0, 0, 0, 0.07);
        color: var(--color-text-pri-dark);
    }
}


/* ── Desktop right: phones + contact button ─────────────── */
.header-right-desktop {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

@media only screen and (max-width: 991.98px) {
	.header-right-desktop {
		display: none;
	}
}

.header-phone {
	display: flex;
	align-items: center;
	gap: 0;
	font-size: var(--fs-link);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-md);
	color: var(--color-text-pri-dark);
	text-decoration: none;
	white-space: nowrap;
	padding: 0.3rem 0.5rem;
	border-radius: 0.5rem;
	transition: background-color 0.2s ease;
}

@media (hover: hover) {
    .header-phone:hover {
        background-color: rgba(0, 0, 0, 0.07);
        opacity: 1;
    }
}

.header-phone::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: var(--size-icon-inline);
	height: var(--size-icon-inline);
	margin-right: 0.5rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.65 3.4 2 2 0 0 1 3.62 1.22h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.83a16 16 0 0 0 6.29 6.29l.95-.97a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain;
}

.header-phone-label {
	color: var(--color-text-pri-dark);
	text-decoration: none;
	margin-right: 0.2rem;
}

.header-phone-number {
	text-decoration: none;
}

.header-contact-btn {
	white-space: nowrap;
	padding: 0.5rem 0.75rem;
	margin-left: 0.5rem;
	font-size: var(--fs-link);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	min-height: unset;
}

/* ── Mobile right: phone links + hamburger ───────────────── */
.header-mobile-right {
	display: none;
}

.btn-email-link {
	display: none;
}

.btn-phone-popup {
	display: none;
}

@media only screen and (max-width: 991.98px) {
	.header-mobile-right {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		margin-left: auto;
	}

	.btn-phone-popup,
	.header-mobile-right .btn-offcanvas {
		height: auto;
		border: none;
		box-sizing: border-box;
	}

	.btn-email-link {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.btn-email-link img {
		width: var(--size-icon-nav);
		height: var(--size-icon-nav);
	}

	.btn-phone-popup {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		padding: 0;
		background: transparent;
		cursor: pointer;
	}

	.btn-phone-popup::before {
		display: none;
	}

	.btn-phone-popup img {
		width: var(--size-icon-nav);
		height: var(--size-icon-nav);
	}

	.header-mobile-right .btn-offcanvas {
		width: auto;
		padding: 0;
		margin-right: 0;
	}

}

/* ── Phone popup (offcanvas) ─────────────────────────────── */
.btn-phone-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	border-radius: var(--radius-btn);
	background: transparent;
	cursor: pointer;
	margin-left: auto;
	position: relative;
}

.btn-phone-close::before,
.btn-phone-close::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 2px;
	background-color: var(--color-text-pri-dark);
	border-radius: 2px;
}

.btn-phone-close::before {
	transform: rotate(45deg);
}

.btn-phone-close::after {
	transform: rotate(-45deg);
}

#offcanvas-phone .offcanvas-header {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.75rem var(--size-global-padding-h);
	z-index: 1061;
}

.phone-open .header-mobile-right {
	visibility: hidden;
}

.phone-popup-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.phone-popup-item {
	font-size: var(--fs-link);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-md);
}

/* ── Offcanvas contact link ──────────────────────────────── */
.offcanvas-contact-link {
	display: block;
	margin-top: 0.6rem;
	font-family: "plus-jakarta-sans";
	font-weight: var(--fw-semibold);
	font-size: var(--fs-link);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-md);
	color: var(--color-text-pri-dark);
	text-decoration: none;
	padding-block: 0.75rem;
}

/* ── Hamburger: div lines ─────────────────────────────────── */
.btn-offcanvas {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 5px;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.7rem;
	margin-right: -0.7rem;
	border: none;
	background-color: transparent;
	cursor: pointer;
	position: relative;
	z-index: 1060;
}

@media only screen and (max-width: 991.98px) {
	.btn-offcanvas {
		display: flex;
	}

	.offcanvas .menu-item a {
		display: block;
		padding-block: 0.75rem;
		min-height: 2.75rem;
	}

	.btn.btn-arrow {
		padding-right: 3rem;
	}

	.btn.btn-arrow::after {
		width: 2.4rem;
		height: 2.4rem;
	}
}

.hamburger-line {
	display: block;
	height: 2px;
	background-color: var(--color-text-pri-dark);
	border-radius: 2px;
	transform-origin: center;
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity   0.2s ease,
		width     0.3s ease;
}

.hamburger-line:nth-child(1) { width: 20px; }
.hamburger-line:nth-child(2) { width: 14px; }
.hamburger-line:nth-child(3) { width: 20px; }

/* X state */
.btn-offcanvas.is-open .hamburger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
	width: 20px;
}

.btn-offcanvas.is-open .hamburger-line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.btn-offcanvas.is-open .hamburger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
	width: 20px;
}

/* ── Header above offcanvas overlay ──────────────────────── */
/* Bootstrap sticky-top = z-index 1020; offcanvas = 1045.
   Raise header so the hamburger/X button stays clickable on top. */
.header.sticky-top {
	z-index: 1050;
}

/* ── Full-width fade overlay ──────────────────────────────── */
.offcanvas.offcanvas-end {
	/* overrides Bootstrap offcanvas defaults */
	top: 0;
	right: 0;
	left: 0;
	width: 100% !important;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-light-50);
	transform: none !important;
	opacity: 0;
	transition: opacity 0.35s ease !important;
}

.offcanvas.showing,
.offcanvas.show:not(.hiding) {
	opacity: 1;
}

.offcanvas.hiding {
	opacity: 0;
}

/* Pad top so menu content clears the sticky header */
.offcanvas .offcanvas-body {
	padding-top: 0;
}

.offcanvas .header-menu {
	gap: 0.6rem;
}

.footer-logo {
	max-width: 20rem;
}

.footer-menu {
	font-family: "plus-jakarta-sans";
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-l);
	line-height: normal;
}

.social-media .item-icon {
	width: 2.4rem;
	height: 2.4rem;
}

.copyright {
	border-top: 1px solid var(--color-border-light-100);
	color: var(--color-text-pri-dark);
}

/* Tiled texture on dark bg — add this class to any section */
.bg-texture-dark {
	background-color: var(--color-bg-dark-200);
	position: relative;
}

.bg-texture-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../images/texture-dark.webp);
	background-repeat: repeat;
	background-size: 300px 300px;
	opacity: 0.08;
	pointer-events: none;
	z-index: 0;
}

/* ── Sections: full viewport width (horizontal lines live here) ── */
[class^="section-"],
[class*=" section-"],
.footer {
	position: relative;
	overflow-x: clip;
	padding-inline: 1rem;
	--gridline-color: var(--color-border-light-100);
	/* Light texture tiling — sections set background-image; repeat+size live here */
	background-repeat: repeat;
	background-size: 400px;
}

@media only screen and (max-width: 991.98px) {
	[class^="section-"],
	[class*=" section-"],
	.footer {
		padding-inline: 0.75rem;
	}

	.header {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.header .section-content {
		padding-left: var(--size-global-padding-h);
		padding-right: var(--size-global-padding-h);
	}

	.container {
		padding-right: 1rem;
		padding-left: 1rem;
	}

	.offcanvas .offcanvas-body {
		padding-inline: 2rem;
	}
}

/* Dark sections — redefine gridline color */
.bg-texture-dark {
	--gridline-color: var(--color-border-dark-50);
}

/* ── Wrap: gridline borders + clip ─────────────────────── */
[class^="section-"] > .container,
[class*=" section-"] > .container,
.footer > .container {
	position: relative;
	padding-inline: 0;
	padding-top: var(--size-v-pad-md);
	padding-bottom: var(--size-v-pad-sm);
	overflow-x: clip;
	border-inline: 1px solid var(--gridline-color);
}

/* ── Content: inset padding ────────────────────────────── */
.section-content {
	padding-inline: var(--size-global-padding-h);
}

#back-to-top {
	width: 2.8rem;
	height: 2.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	/* Stacked above #whatsapp-sticky: 2rem (WA bottom) + 2.5rem (WA height) + 1rem (gap) = 5.5rem */
	bottom: 5rem;
	right: max(1rem, calc(50vw - var(--size-content-max-width) / 2 + 1rem));
	z-index: 11;
	border-radius: 50%;
	background-color: var(--color-bg-dark-200);
	color: var(--color-text-pri-light);
	opacity: 0;
	pointer-events: none;
	transition: var(--transition-fast);
	cursor: pointer;
}

@media (hover: hover) {
#back-to-top:hover {
	background-color: var(--color-accent-green);
}
}

#back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ── Global sticky WhatsApp button ────────────────────────
   Persistent (no fade). Same size + right alignment as #back-to-top.
   #back-to-top sits 1rem above it (see bottom: 5.5rem calculation above). */
.whatsapp-sticky {
	width: 2.8rem;
	height: 2.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 1.5rem;
	right: max(1rem, calc(50vw - var(--size-content-max-width) / 2 + 1rem));
	z-index: 11;
	border-radius: 50%;
	background-color: var(--color-accent-green);
	transition: var(--transition-fast);
	cursor: pointer;
}

.whatsapp-sticky img {
	width: 1.3rem;
	height: 1.3rem;
	display: block;
}

@media (hover: hover) {
.whatsapp-sticky:hover {
	background-color: var(--color-accent-green-dark);
}
}

.dropdown {
	width: fit-content;
}

.dropdown-toggle {
	min-width: 30rem;
	border: unset;
	border-radius: var(--radius-media);
	background: var(--color-bg-dark-50);
	padding: 2rem 4rem;
	font-size: var(--fs-body-m);
	color: var(--color-text-pri-light);
}

.dropdown-menu {
	width: fit-content;
	min-width: 100%;
	border-radius: 0.6rem;
	background: var(--color-bg-light-50);
	backdrop-filter: blur(10rem);
}

.dropdown-item {
	display: block;
	width: 100%;
	padding: 1rem 4rem;
}

/* ── Section separation — full-viewport horizontal lines ── */
[class^="section-"] + [class^="section-"] {
	border-top: 1px solid var(--color-border-section);
}

/* Skip border when section has a distinct background or visual contrast */
.section-service,
.section-faq,
.section-booking-cta,
.section-home-banner + [class^="section-"] {
	border-top: none;
}

/* Skip border AFTER sections with strong visual contrast */
.section-service + [class^="section-"],
.section-booking-cta + [class^="section-"],
.section-about + .section-logo-marquee {
	border-top: none;
}


/* Logo marquee: marquee rows live outside .container so they
   naturally escape the gridline borders — no overrides needed. */

/* ── Layout grids ───────────────────────────────────────── */
.g-13-11,
.g-11-13,
.g-10-14,
.g-12-12 {
	display: grid;
	align-items: center;
	gap: var(--size-gap-cards);
}

.g-8-8-8 {
	display: grid;
	gap: var(--size-gap-cards);
}

.g-13-11 { grid-template-columns: 1fr 1fr; }
.g-11-13 { grid-template-columns: 1fr 1fr; }
.g-10-14 { grid-template-columns: 10fr 14fr; }
.g-12-12 { grid-template-columns: 1fr 1fr; }
.g-8-8-8 { grid-template-columns: 1fr 1fr 1fr; }

@media only screen and (max-width: 991.98px) {
	.g-13-11,
	.g-11-13,
	.g-10-14,
	.g-12-12 {
		grid-template-columns: 1fr;
	}

	.g-13-11 > .col-text,
	.g-11-13 > .col-text,
	.g-10-14 > .col-text,
	.g-12-12 > .col-text  { order: 1; }

	.g-13-11 > .col-visual,
	.g-11-13 > .col-visual,
	.g-10-14 > .col-visual,
	.g-12-12 > .col-visual { order: 2; }

	/* Mobile: WA at 1rem, back-to-top 1rem above it → 1rem + 2.5rem + 1rem = 4.5rem */
	#back-to-top { bottom: 4.5rem; }
	.whatsapp-sticky { bottom: 1rem; }

	.g-8-8-8 { grid-template-columns: 1fr; }

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	textarea,
	select {
		padding: 1.5rem 2rem;
	}

	.dropdown-toggle {
		min-width: 0;
		width: 100%;
	}

	.dropdown-item {
		padding: 1rem 2rem;
	}
}

/* ── Shared Single Article Shell ──────────────────────────
   Shared by blog posts and single case studies; unique card/meta
   differences stay in their section files.
   ──────────────────────────────────────────────────────── */

.section-single-post > .container,
.section-single-case-study > .container {
	padding-block: var(--size-v-pad-md) var(--size-v-pad-sm);
}

.section-single-post .breadcrumb,
.section-single-case-study .breadcrumb {
	margin-bottom: var(--size-pad-xs);
}

.section-single-post .row,
.section-single-case-study .row {
	margin-inline: 0;
}

.section-single-post .article-col,
.section-single-case-study .article-col {
	width: 100%;
	max-width: var(--size-article-reading-width);
	padding-inline: var(--size-global-padding-h);
}

.section-single-post .post-title,
.section-single-case-study .post-title {
	color: var(--color-text-pri-dark);
	margin: 0 0 var(--size-pad-sm);
	text-wrap: pretty;
}

.section-single-post .post-feature-image,
.section-single-case-study .post-feature-image {
	margin-bottom: var(--size-pad-xs);
}

.section-single-post .post-feature-image img,
.section-single-case-study .post-feature-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-media);
}

.section-single-post .post-meta,
.section-single-case-study .post-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	margin-bottom: 2.5rem;
	color: var(--color-text-ter-dark);
	letter-spacing: var(--ls-md);
}

.section-single-post .post-meta > *,
.section-single-case-study .post-meta > * {
	border: none;
	padding: 0;
	border-radius: 0;
	color: var(--color-text-ter-dark);
}

.section-single-post .post-author,
.section-single-post .post-date,
.section-single-case-study .post-author,
.section-single-case-study .post-date {
	font-weight: var(--fw-semibold);
}

.section-single-post .post-meta__sep,
.section-single-case-study .post-meta__sep {
	transform: translateY(0.1rem);
}

.section-single-post .post-summary,
.section-single-case-study .post-summary {
	border: 0.0625rem solid var(--color-border-light-100);
	border-radius: var(--radius-media);
	padding: var(--size-pad-sm);
	margin-bottom: var(--size-pad-sm);
}

.section-single-post .post-summary-heading,
.section-single-case-study .post-summary-heading {
	color: var(--color-text-pri-dark);
	margin-bottom: 1.6rem;
}

.section-single-post .post-summary-body,
.section-single-case-study .post-summary-body {
	color: var(--color-text-pri-dark);
}

@media only screen and (max-width: 991.98px) {
	.section-single-post > .container,
	.section-single-case-study > .container {
		padding-block: var(--size-v-pad-sm) var(--size-v-pad-xl);
	}

	.section-single-post .post-summary,
	.section-single-case-study .post-summary {
		padding: var(--size-pad-2xs);
		margin-bottom: 2rem;
	}

	.section-single-post .article-col,
	.section-single-case-study .article-col {
		overflow: hidden;
		max-width: 100%;
	}
}


/* ── Article Prose Content (.prose-content) ──────────────
   Single source of truth for blog post and static page typography
   (privacy policy, terms, etc.). Apply to the content wrapper div.
   ──────────────────────────────────────────────────────── */

.prose-content {
	color: var(--color-text-pri-dark);
}

.prose-content h2,
.prose-content h3,
.prose-content h4,
.prose-content h5,
.prose-content h6 {
	text-wrap: pretty;
}

.prose-content h2 b,
.prose-content h2 strong,
.prose-content h3 b,
.prose-content h3 strong,
.prose-content h4 b,
.prose-content h4 strong,
.prose-content h5 b,
.prose-content h5 strong,
.prose-content h6 b,
.prose-content h6 strong {
	font-weight: inherit;
}

.prose-content h2 {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	letter-spacing: var(--ls-xs);
	margin-top: var(--size-blog-h2-padding-top);
	margin-bottom: var(--size-blog-h2-padding-bottom);
}

.prose-content h3 {
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	letter-spacing: var(--ls-xs);
	margin-top: var(--size-blog-h3-padding-top);
	margin-bottom: var(--size-blog-h3-padding-bottom);
}

.prose-content h4,
.prose-content h5,
.prose-content h6 {
	font-size: var(--fs-h5);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	letter-spacing: var(--ls-xs);
	margin-top: var(--size-blog-h3-padding-top);
	margin-bottom: var(--size-blog-h3-padding-bottom);
}

.prose-content p,
.prose-content li {
	font-size: var(--fs-body-m);
	line-height: var(--lh-base);
	margin-top: var(--size-blog-body-padding-top);
}

.prose-content li + li,
.post-summary-body li + li {
	margin-top: 0.75rem;
}

.prose-content ul,
.prose-content ol {
	margin: 0;
	padding-left: 1.8rem;
}

.section-single-post .post-summary-body ul,
.section-single-post .post-summary-body ol,
.section-single-case-study .post-summary-body ul,
.section-single-case-study .post-summary-body ol {
	margin: 0;
	padding-left: 0;
	list-style-position: inside;
}

.section-single-post .post-summary-body li,
.section-single-case-study .post-summary-body li {
	padding-left: 1.2em;
	text-indent: -1.2em;
}

.prose-content img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-media);
	margin-top: var(--size-blog-img-padding-top);
}

.prose-content a {
	color: var(--color-accent-green);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (hover: hover) {
    .prose-content a:hover {
        text-decoration: none;
    }
}

.prose-content blockquote {
	border-left: 0.1875rem solid var(--color-accent-gold);
	padding-left: 1.5rem;
	margin: var(--size-blog-h3-padding-top) 0 0;
	font-style: italic;
}

.prose-content table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--size-blog-body-padding-top);
}

.prose-content th,
.prose-content td {
	border: 0.0625rem solid var(--color-border-light-100);
	padding: 0.75rem 1rem;
	font-size: var(--fs-body-m);
	line-height: var(--lh-base);
	text-align: left;
}

.prose-content th {
	font-weight: var(--fw-medium);
	background: var(--color-bg-light-50);
}

@media only screen and (max-width: 991.98px) {
	.prose-content ul,
	.prose-content ol {
		padding-left: 0;
		list-style-position: inside;
	}

	.prose-content li {
		padding-left: 1.2em;
		text-indent: -1.2em;
	}
}