/* ------------------------------------------------------------------
		   Tokens
		------------------------------------------------------------------ */
		:root {
			--navy: #002d53;
			--white: #ffffff;
			--rule: #5e6b7f;
			--icon: #000000;

			--container: 1540px;
			--gutter: clamp(1rem, 4vw, 2.5rem);

			/* IMAGE: hero background. Replace the path with your own image. */
			--hero-image: url("images/hero.jpg");
			--hero-overlay: rgba(0, 45, 83, 0.74);
		}

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

		html {
			-webkit-text-size-adjust: 100%;
			text-size-adjust: 100%;
		}

		body {
			margin: 0;
			font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			color: var(--navy);
			background: var(--white);
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

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

		h1,
		h2,
		p,
		ol {
			margin: 0;
		}

		.container {
			width: 100%;
			max-width: calc(var(--container) + (var(--gutter) * 2));
			margin-inline: auto;
			padding-inline: var(--gutter);
		}

		.skip-link {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			padding: 0.75rem 1rem;
			background: var(--white);
			color: var(--navy);
			font-weight: 600;
			transform: translateY(-120%);
		}

		.skip-link:focus {
			transform: none;
		}

		/* ------------------------------------------------------------------
		   Header
		------------------------------------------------------------------ */
		.site-header {
			background: var(--navy);
			color: var(--white);
		}

		.site-header__inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem 2rem;
			min-height: 113px;
			padding-block: 1.25rem;
		}

		.site-header__logo {
			flex: none;
			display: block;
		}

		.site-header__logo img {
			width: 278px;
			height: auto;
		}

		.site-header__trust {
			flex: 0 1 404px;
			min-width: 240px;
		}

		.site-header__trust a {
			color: var(--white);
		}

		/* ------------------------------------------------------------------
		   Hero
		------------------------------------------------------------------ */
		.hero {
			display: flex;
			align-items: center;
			min-height: clamp(320px, 25.6vw, 487px);
			padding-block: clamp(3.5rem, 6vw, 5rem);
			color: var(--white);
			text-align: center;
			background-color: #f1f3f5; /* shows through the overlay until the hero image is added */
			background-image:
				linear-gradient(var(--hero-overlay), var(--hero-overlay)),
				var(--hero-image);
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}

		.hero__title {
			font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.54375rem);
			font-weight: 700;
			line-height: 1.15;
		}

		.hero__text {
			max-width: 26em;
			margin: clamp(1rem, 2vw, 1.75rem) auto 1rem;
			font-size: clamp(1.125rem, 0.8rem + 1.3vw, 2.03125rem);
			line-height: 1.54;
		}

		.hero__text strong {
			font-weight: 700;
			white-space: nowrap;
		}

        .hero {
            position: relative;
            display: flex;
            align-items: center;
            min-height: clamp(320px, 25.6vw, 487px);
            padding-block: clamp(3.5rem, 6vw, 5rem);
            color: var(--white);
            text-align: center;
            background: #f1f3f5 var(--hero-image) center / cover no-repeat;
        }

        /* Navy overlay, same technique as the Elementor page */
        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background-color: var(--navy);
            opacity: 0.74;
        }

        /* Keeps the heading and text above the overlay */
        .hero > .container {
            position: relative;
        }

		/* ------------------------------------------------------------------
		   Common questions
		------------------------------------------------------------------ */
		.faq {
			padding-block: clamp(3rem, 5vw, 4.675rem) clamp(4rem, 7vw, 7.625rem);
		}

		.faq__title {
			font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.875rem);
			font-weight: 700;
			line-height: 1.2;
			text-align: center;
		}

		.faq__intro {
			max-width: 24em;
			margin: 0.23em auto 0;
			font-size: clamp(1.0625rem, 0.85rem + 0.9vw, 1.6875rem);
			line-height: 1.26;
			text-align: center;
		}

		.faq__list {
			margin-top: clamp(2rem, 4vw, 3.3875rem);
			border-top: 1px solid var(--rule);
		}

		.faq__item {
			border-bottom: 1px solid var(--rule);
		}

		.faq__question {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1.5rem;
			padding-block: clamp(1.25rem, 2.4vw, 2.4375rem);
			font-size: clamp(1.125rem, 0.85rem + 1vw, 1.85625rem);
			font-weight: 600;
			line-height: 1.3;
			cursor: pointer;
			list-style: none;
		}

		.faq__question::-webkit-details-marker {
			display: none;
		}

		.faq__question:focus-visible {
			outline: 3px solid #2f9bc1;
			outline-offset: 4px;
		}

		/* Plus / minus square, drawn in CSS */
		.faq__icon {
			position: relative;
			flex: none;
			width: clamp(1.625rem, 1.3rem + 0.9vw, 2.3125rem);
			aspect-ratio: 1;
			border-radius: 11%;
			background: var(--icon);
		}

		.faq__icon::before,
		.faq__icon::after {
			content: "";
			position: absolute;
			inset: 0;
			margin: auto;
			background: var(--white);
			transition: transform 0.2s ease;
		}

		.faq__icon::before {
			width: 64%;
			height: 18%;
		}

		.faq__icon::after {
			width: 18%;
			height: 64%;
		}

		.faq__item[open] .faq__icon::after {
			transform: scaleY(0);
		}

		.faq__answer {
			max-width: 70rem;
			padding-bottom: clamp(1.25rem, 2.4vw, 2.4375rem);
			font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
			line-height: 1.65;
		}

		.faq__answer > * + * {
			margin-top: 1em;
		}

		.faq__answer ol {
			padding-left: 1.4em;
		}

		.faq__answer li + li {
			margin-top: 0.75em;
		}

		.faq__answer li strong {
			display: block;
			font-weight: 600;
		}

		/* Smooth open/close where the browser supports it; instant elsewhere */
		@supports (interpolate-size: allow-keywords) {
			:root {
				interpolate-size: allow-keywords;
			}

			.faq__item::details-content {
				block-size: 0;
				overflow: clip;
				transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
			}

			.faq__item[open]::details-content {
				block-size: auto;
			}
		}

		/* ------------------------------------------------------------------
		   Footer
		------------------------------------------------------------------ */
		.site-footer {
			padding-block: clamp(3rem, 5vw, 4.625rem) clamp(3rem, 5vw, 5.5625rem);
			background: var(--navy);
			color: var(--white);
			font-size: 1.0125rem;
			line-height: 1.5;
			text-align: center;
		}

		.site-footer p + p {
			margin-top: 1.8em;
		}

		.site-footer strong {
			font-weight: 700;
		}

		.site-footer a {
			color: inherit;
			text-decoration: underline;
			text-underline-offset: 0.15em;
		}

		.site-footer a:hover,
		.site-footer a:focus-visible {
			text-decoration-thickness: 2px;
		}

		/* ------------------------------------------------------------------
		   Smaller screens
		------------------------------------------------------------------ */
		@media (max-width: 767px) {
			.site-header__inner {
				flex-direction: column;
				justify-content: center;
				min-height: 0;
			}

			.site-header__logo img {
				width: 214px;
			}

			.site-header__trust {
				flex: none;
				width: 100%;
				max-width: 320px;
				text-align: center;
			}

			.site-footer {
				font-size: 0.875rem;
			}

			.site-footer p + p {
				margin-top: 1.4em;
			}
		}

		@media (prefers-reduced-motion: reduce) {
			*,
			*::before,
			*::after {
				transition: none !important;
			}
		}