/* Reset */
@layer reset {
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font-size: inherit;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

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

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
}

a {
    text-decoration-skip-ink: auto;
}

img,
picture {
    max-width: 100%;
    display: block;
}

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

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

}

/* Base - tokens + global document styles */
@layer base {
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter/InterVariable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Libre Baskerville";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/libre-baskerville/LibreBaskerville.woff2")
        format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

}
@layer base {
:root {
	/* -------------------------------------------------------------------------
     Colors - Brand
     ------------------------------------------------------------------------- */
	--color-blue-dark: hsl(204, 84%, 19%);
	--color-blue-light: hsl(204, 84%, 83%);
	--color-blue-faint: hsl(204 84% 90%);

	--color-cyan: hsl(193 100% 41%);
	--color-cyan-dark: hsl(193 100% 30%);

	/* -------------------------------------------------------------------------
     Colors - Neutrals
     ------------------------------------------------------------------------- */
	--color-white: #fff;
	--color-black: rgb(0 0 0 / 0.87);
	--color-black-deep: hsl(204 1% 5%);
	--color-gray: hsl(204 1% 43%);
	--color-gray-light: hsl(0, 0%, 87%);
	--color-gray-faint: hsl(0 0% 94%);

	/* -------------------------------------------------------------------------
     Typography - Families
     ------------------------------------------------------------------------- */
	--font-family-headline: "Inter", sans-serif;
	--font-family-body: "Inter", sans-serif;
	--font-family-serif: "Libre Baskerville", serif;

	/* -------------------------------------------------------------------------
     Typography - Weights (numeric)
     ------------------------------------------------------------------------- */
	--weight-300: 300;
	--weight-400: 400;
	--weight-500: 500;
	--weight-600: 600;
	--weight-700: 700;
	--weight-800: 800;
	--weight-900: 900;

	/* -------------------------------------------------------------------------
     Typography - Weights (named aliases)
     ------------------------------------------------------------------------- */
	--weight-light: var(--weight-300);
	--weight-regular: var(--weight-400);
	--weight-medium: var(--weight-500);
	--weight-bold: var(--weight-600);
	--weight-black: var(--weight-700);

	/* -------------------------------------------------------------------------
     Typography - Font Size Correction
     Multipliers that normalize visual size across font families.
     Inter is the baseline (1.0).
     ------------------------------------------------------------------------- */
	--font-adjust-headline: 1; /* Inter — baseline, no correction */
	--font-adjust-serif: 1.08; /* Libre Baskerville — runs visually small */

	/* -------------------------------------------------------------------------
     Typography - Fluid Scale (Utopia)
     https://utopia.fyi/type/calculator
     ------------------------------------------------------------------------- */
	--step--2: clamp(0.56rem, calc(0.71rem + -0.09vw), 0.69rem);
	--step--1: clamp(0.8rem, calc(0.84rem + -0.03vw), 0.83rem);
	--step-0: clamp(1rem, calc(0.98rem + 0.09vw), 1.13rem);
	--step-1: clamp(1.2rem, calc(1.14rem + 0.28vw), 1.59rem);
	--step-2: clamp(1.44rem, calc(1.32rem + 0.58vw), 2.25rem);
	--step-3: clamp(1.73rem, calc(1.52rem + 1.04vw), 3.18rem);
	--step-4: clamp(2.07rem, calc(1.73rem + 1.73vw), 4.5rem);
	--step-5: clamp(2.49rem, calc(1.94rem + 2.77vw), 6.36rem);
	--step-6: clamp(2.99rem, calc(2.13rem + 4.29vw), 8.99rem);

	/* -------------------------------------------------------------------------
     Borders & Radius
     ------------------------------------------------------------------------- */
	--radius-1: 0.25rem;
	--radius-card: 0.35rem;
	--radius-2: 0.5rem;
	--radius-3: 0.75rem;
	--radius-4: 1rem;
	--radius-round: 1e5px;

	/* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
	--ease-out: ease-out;
	--duration-fast: 100ms;
	--duration-normal: 200ms;
}

}
@layer base {
:root {
	/* -------------------------------------------------------------------------
     Unified Fluid Scale (type + spacing)
     Bakes in --font-adjust for font-size; works as-is for spacing.
     ------------------------------------------------------------------------- */
	--font-adjust: 1; /* default: body/Inter, no correction */
	--padding-inline: 2rem;

	--xs: calc(var(--step--2) * var(--font-adjust));
	--sm: calc(var(--step--1) * var(--font-adjust));
	--base: calc(var(--step-0) * var(--font-adjust));
	--md: calc(var(--step-1) * var(--font-adjust));
	--lg: calc(var(--step-2) * var(--font-adjust));
	--xl: calc(var(--step-3) * var(--font-adjust));
	--xxl: calc(var(--step-4) * var(--font-adjust));
	--xxxl: calc(var(--step-5) * var(--font-adjust));

	/* -------------------------------------------------------------------------
     Overlays & Shadows
     ------------------------------------------------------------------------- */
	--overlay-light: rgb(255 255 255 / 0.5);
	--overlay-light-strong: rgb(255 255 255 / 0.7);

	/* -------------------------------------------------------------------------
     Short Font-Family Aliases
     ------------------------------------------------------------------------- */
	--headline: var(--font-family-headline);
	--body: var(--font-family-body);
	--serif: var(--font-family-serif);

	/* -------------------------------------------------------------------------
     Body Text
     ------------------------------------------------------------------------- */
	--body-weight: var(--weight-regular);
	--body-line-height: 1.75;
	--body-color: rgb(0 0 0 / 0.67);

	/* -------------------------------------------------------------------------
     Heading Text
     ------------------------------------------------------------------------- */
	--heading-weight: var(--weight-bold);
	--heading-line-height: 1.2;
	--heading-color: var(--color-black);

	/* -------------------------------------------------------------------------
     Caption Text
     ------------------------------------------------------------------------- */
	--caption-weight: var(--weight-regular);
	--caption-color: var(--color-black);

	/* -------------------------------------------------------------------------
     Links
     ------------------------------------------------------------------------- */
	--link-color: var(--color-cyan-dark);
	--link-color-hover: var(--color-blue-dark);
	--link-color-active: var(--color-black);
	--link-bg-hover: var(--color-blue-faint);
	--link-underline-width: 1px;
	--link-underline-color: var(--color-blue-light);
	--link-transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

/* Mobile overrides */
@media (max-width: 767px) {
	:root {
		--padding-inline: 1rem;
		--xs: calc(((var(--step--2) + var(--step--1)) / 2) * var(--font-adjust));
		--sm: calc(((var(--step--1) + var(--step-0)) / 2) * var(--font-adjust));
		--base: calc(((var(--step-0) + var(--step-1)) / 2) * var(--font-adjust));
		--md: calc(((var(--step-1) + var(--step-2)) / 2) * var(--font-adjust));
		--lg: calc(((var(--step-2) + var(--step-3)) / 2) * var(--font-adjust));
		--xl: calc(((var(--step-3) + var(--step-4)) / 2) * var(--font-adjust));
		--xxl: calc(((var(--step-4) + var(--step-5)) / 2) * var(--font-adjust));
		--xxxl: calc(((var(--step-5) + var(--step-6)) / 2) * var(--font-adjust));
	}
}

}
@layer base {
:root {
	font-size: 16px;
}

body {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100dvh;
	font-size: var(--base);
	font-family: var(--body);
	font-weight: var(--body-weight);
	line-height: var(--body-line-height);
	color: var(--body-color);
	background-color: hsl(210, 20%, 96%);
}

/* List defaults */
ol,
ul {
	padding: 0 1rem;
}

li {
	line-height: 1.5;
	padding: 0.25rem 0.5rem;
}

}

/* Layout - structural patterns */
/*@import "/assets/css/layout.css" layer(layout);*/

/* Site-wide components */
@layer components {
[s-logo="masthead"] {
	width: 160px;
	color: var(--color-blue-dark);
	border-radius: var(--radius-2);

	[s-logo-img] {
		color: var(--color-blue-dark);
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

[s-logo-mark] {
	margin-inline: auto;
	width: 40px;
	margin-top: 2rem;
	margin-bottom: 1rem;
	justify-self: center;
}

}
@layer components {
/* ── Masthead pill nav ── */
[s-site-links] {
	--_speed: 300ms;
	--_ease: ease;

	width: fit-content;
	justify-self: center;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	column-gap: var(--xs);
	font-family: var(--body);
	font-weight: var(--weight-400);
	font-size: var(--sm);
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 0 0.9em;
	view-transition-name: nav-site;

	@media (max-width: 767px) {
		display: none;
	}

	[s-site-link] {
		display: block;
		position: relative;
		color: var(--color-white);
		text-decoration: none;
		padding: 0.65em 1.35em;
		margin-block: var(--xs);
		border-radius: 10rem;
		transition: color var(--_speed) var(--_ease);

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: rgb(255 255 255 / 0.15);
			border: 1.5px solid rgb(255 255 255 / 0.5);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			scale: 0.7 1;
			opacity: 0;
			transition:
				scale var(--_speed) var(--_ease),
				opacity var(--_speed) var(--_ease);
			z-index: -1;
		}

		&:hover {
			color: var(--color-white);
		}

		&:hover::before {
			scale: 1 1;
			opacity: 1;
		}

		&[data-active] {
			color: var(--color-white);
		}

		&[data-active]::before {
			scale: 1 1;
			opacity: 1;
			background: rgb(0 200 255 / 0.12);
			border-color: rgb(0 200 255 / 0.4);
		}
	}
}

}
@layer components {
/* ── Mobile Nav Toggle (hamburger) ── */

[mobile-nav-toggle] {
    display: none;
}

@media (max-width: 767px) {
    [mobile-nav-toggle] {
        all: unset;
        display: grid;
        place-items: center;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 11;
        width: 48px;
        height: 48px;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        border-bottom-left-radius: var(--radius-2);
        cursor: pointer;
    }

    [mobile-nav-toggle][data-scrolled] {
        background-color: var(--color-blue-dark);
        border-top-left-radius: var(--radius-2);
    }

    dialog[mobile-nav] {
        position: fixed;
        top: 0;
        right: 0;
        width: 90vw;
        max-width: 90vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        margin-left: auto;
        padding: 0;
        border: none;
        background-color: var(--color-white);
        color: var(--color-black);
        display: none;
        grid-template-rows: auto 1fr auto;
        transform: translateX(100%);
        transition:
            transform 300ms ease-out,
            display 300ms ease-out allow-discrete;
    }

    dialog[mobile-nav][open] {
        display: grid;
    }

    dialog[mobile-nav][open] {
        transform: translateX(0);
    }

    @starting-style {
        dialog[mobile-nav][open] {
            transform: translateX(100%);
        }
    }

    /* ── Backdrop ── */

    dialog[mobile-nav]::backdrop {
        background-color: rgba(0, 0, 0, 0);
        transition:
            background-color 300ms ease-out,
            display 300ms ease-out allow-discrete;
    }

    dialog[mobile-nav][open]::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }

    @starting-style {
        dialog[mobile-nav][open]::backdrop {
            background-color: rgba(0, 0, 0, 0);
        }
    }

    /* ── Close button (X, top-right inside dialog) ── */

    [mobile-nav-close] {
        all: unset;
        display: grid;
        place-items: center;
        justify-self: end;
        width: 48px;
        height: 48px;
        color: var(--color-black);
        cursor: pointer;
    }

    /* ── Nav links ── */

    [mobile-nav-links] {
        display: grid;
        align-content: start;
        overflow: auto;
        overscroll-behavior: contain;
    }

    /* ── Nav tree ── */

    [js-nav-tree] {
        padding: 0.25rem 0;
    }

    /* (no depth-0 separators — guides provide visual structure) */

    /* Row */
    .row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        min-height: 44px;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    /* Label area: guides + indicator + text */
    .label-area {
        display: flex;
        align-items: center;
        align-self: stretch;
        min-height: 44px;
        min-width: 0;
        cursor: default;
    }

    .label-area[data-expandable] {
        cursor: pointer;
    }

    .label-area[data-expandable]:hover .label {
        color: var(--color-black-deep);
    }

    /* Guide pipes (vertical connectors for ancestor levels) */
    .guide-pipe {
        position: relative;
        width: 20px;
        flex-shrink: 0;
        align-self: stretch;
    }

    .guide-pipe.active::before {
        content: "";
        position: absolute;
        left: 9px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--color-gray-light);
    }

    /* Guide branch (horizontal + vertical connector) */
    .guide-branch {
        position: relative;
        width: 20px;
        flex-shrink: 0;
        align-self: stretch;
    }

    .guide-branch::before {
        content: "";
        position: absolute;
        left: 9px;
        top: 50%;
        right: 0;
        height: 1px;
        background: var(--color-gray-light);
    }

    .guide-branch::after {
        content: "";
        position: absolute;
        left: 9px;
        top: 0;
        height: 50%;
        width: 1px;
        background: var(--color-gray-light);
    }

    .guide-branch.continues::after {
        height: 100%;
    }

    /* +/− indicator ON the guideline (replaces branch for parent items) */
    .indicator {
        position: relative;
        width: 20px;
        flex-shrink: 0;
        align-self: stretch;
        display: grid;
        place-items: center;
        user-select: none;
        pointer-events: none;
        color: var(--color-gray);
    }

    .indicator svg {
        position: relative;
        z-index: 1;
        display: block;
        width: 12px;
        height: 12px;
    }

    /* Vertical connector above the indicator */
    .indicator::after {
        content: "";
        position: absolute;
        left: 9px;
        top: 0;
        height: calc(50% - 7px);
        width: 1px;
        background: var(--color-gray-light);
    }

    /* Horizontal arm from indicator to label */
    .indicator::before {
        content: "";
        position: absolute;
        left: 16px;
        top: 50%;
        right: 0;
        height: 1px;
        background: var(--color-gray-light);
    }

    /* Not last sibling: vertical line continues below */
    .indicator.continues::after {
        height: 100%;
    }

    /* Depth-0 parents: no connectors */
    .indicator.root::after,
    .indicator.root::before {
        display: none;
    }

    .indicator .icon-plus,
    .indicator .icon-minus { display: none; }

    [data-expanded="false"] .icon-plus  { display: block; }
    [data-expanded="true"]  .icon-minus { display: block; }

    /* Label text */
    .label {
        font-family: var(--body);
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-blue-dark);
        text-decoration: none;
        padding: 0.5rem 0.25rem;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 150ms;
    }

    .label[data-active] {
        font-weight: 700;
        background-color: var(--link-bg-hover);
        border-radius: var(--radius-1);
    }

    /* View link (a.view-link beats [mobile-nav-links] a specificity) */
    a.view-link {
        font-size: 0.75rem;
        color: var(--color-gray);
        text-decoration: none;
        padding: 0.375rem 0.5rem;
        border-radius: var(--radius-1);
        letter-spacing: 0.02em;
        transition: color 150ms, background 150ms;
        white-space: nowrap;
    }

    a.view-link:hover {
        color: var(--color-black);
        background: var(--color-gray-faint);
    }

    /* Children container (animated expand/collapse) */
    .children {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 250ms ease;
    }

    [js-children][data-open] {
        grid-template-rows: 1fr;
    }

    .children-inner {
        overflow: hidden;
    }

    /* ── Contact details (anchored to bottom) ── */

    [contact-details] {
        display: grid;
        gap: 0.5rem;
        justify-items: center;
        padding-block: 2rem;
        padding-inline: 1rem;
        line-height: 1;
        font-size: var(--sm);
        border-top: 1px solid var(--color-gray-light);
    }

    [contact-details-phone] {
        font-size: var(--sm);
        color: var(--link-color);
        text-decoration-thickness: var(--link-underline-width);
        text-decoration-style: solid;
        text-decoration-color: var(--link-underline-color);
    }
}

}
@layer components {
[s-cta-button] {
	all: unset;
	position: relative;
	width: max-content;
	font-family: var(--body);
	font-weight: var(--weight-regular);
	font-size: var(--sm);
	text-transform: uppercase;
	color: var(--color-white);
	text-align: center;
	padding: 0.75em 1.25em;
	border-radius: 10rem;
	letter-spacing: 1px;
	cursor: pointer;
	z-index: 1;
	transition: color ease-in-out 300ms;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background-color: var(--color-white);
		scale: 0.7 1;
		opacity: 0;
		transition:
			scale 300ms ease,
			opacity 300ms ease;
		z-index: -1;
	}

	&:hover {
		color: var(--color-blue-dark);
	}

	&:hover::before {
		scale: 1 1;
		opacity: 1;
	}
}

[s-cta-button="cta-masthead"] {
	justify-self: end;
	font-weight: var(--weight-medium);
	padding: 0.6em 1.5em;
	background: rgb(255 255 255 / 0.1);
	border: 1.5px solid rgb(255 255 255 / 0.3);
	backdrop-filter: blur(12px);
	box-shadow: 0 0 0 0 rgb(255 255 255 / 0);
	transition:
		color ease-in-out 150ms,
		background ease-in-out 150ms,
		border-color ease-in-out 150ms,
		box-shadow ease-in-out 150ms;

	&::before {
		display: none;
	}

	&:hover {
		color: var(--color-white);
		background: rgb(255 255 255 / 0.2);
		border-color: rgb(255 255 255 / 0.5);
		box-shadow:
			0 0 8px rgb(255 255 255 / 0.2),
			0 0 20px rgb(255 255 255 / 0.1);
	}

	@media (max-width: 960px) {
		display: none;
	}
}

[s-cta-button="footer"] {
	margin: var(--sm);
	font-weight: var(--weight-medium);
	padding: 0.6em 1.5em;
	background-color: var(--color-blue-dark);
	color: var(--color-white);
	border: 1.5px solid rgb(255 255 255 / 0.15);
	transition: filter ease-in-out 200ms;

	&:hover {
		color: var(--color-white);
		filter: brightness(1.3) saturate(1.5);
	}

	&::before {
		display: none;
	}
}

[s-cta-button="cta-sidebar"] {
	font-weight: var(--weight-medium);
	padding: 0.6em 1.5em;
	background-color: var(--color-blue-dark);
	color: var(--color-white);
	border: 1.5px solid rgb(255 255 255 / 0.15);
	transition: filter ease-in-out 200ms;

	&:hover {
		color: var(--color-white);
		filter: brightness(1.3) saturate(1.5);
	}

	&::before {
		display: none;
	}
}

[s-cta-button="bar"] {
	max-width: 120px;
	font-weight: var(--weight-medium);
	font-size: var(--base);
	text-transform: none;
	color: var(--color-blue-dark);
	background-color: var(--color-white);
	transition: all 200ms ease-out;

	&:hover {
		color: var(--color-white);
		background-color: var(--color-cyan);
		filter: brightness(1.1) saturate(1.5);
	}
}

}
@layer components {
[s-footer] {
	--min-gutter: 2rem;
	container-type: inline-size;
	container-name: footer;
	display: grid;
	justify-self: center;
	justify-items: center;
	width: 100%;
	padding-inline: 2rem;
	margin-block-start: var(--xxl);
	font-family: var(--body);
	font-weight: var(--weight-regular);
	font-size: var(--base);
	line-height: 1.75;

	[s-cta] {
		padding: 0 0 var(--xl) 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--sm);
		align-items: center;
		justify-items: center;

		[s-logo="footer"] {
			grid-column: 1 / -1;
			max-width: 200px;
		}

		[s-cta-button] {
			justify-self: end;
			margin: 0;
		}

		[s-cta-phone] {
			justify-self: start;
			color: var(--color-black);
			font-family: var(--body);
			font-size: var(--md);
			text-decoration: none;
		}
	}

	[s-stage] {
		--min: 500px;
		--gap-col: min(4rem, 5vw);
		--gap-row: 1rem;
		display: grid;
		grid-template-columns: auto 1.5fr 30ch;

		column-gap: var(--gap-col);
		row-gap: var(--gap-row);
		justify-items: start;

		max-width: min(1500px, 100dvw);
		margin-block: var(--xxl);
		padding-inline: var(--gutter);

		[s-column] {
			width: 100%;
			align-self: start;
			display: grid;
			row-gap: var(--gap-row);
			align-content: start;

			[s-links] {
				display: grid;
				grid-template-columns: 1fr;
				row-gap: 1rem;
			}

			a {
				color: var(--link-color);
				text-decoration-thickness: var(--link-underline-width);
				text-decoration-style: solid;
				text-decoration-color: var(--link-underline-color);
				transition: var(--link-transition);

				&:hover {
					color: var(--link-color-hover);
					background-color: var(--link-bg-hover);
					text-decoration: none;
				}
			}

			[s-column-text] a {
				line-height: 2.5;
			}

			[s-heading] {
				justify-self: start;
				font-family: var(--serif);
				font-weight: var(--weight-bold);
				font-size: var(--base);

				&[s-heading~="last"] {
					margin-top: var(--sm);
				}
			}

			[s-site-link] {
				margin-bottom: var(--sm);
			}
		}

		@container footer (max-inline-size: 960px) {
			grid-template-columns: auto 1fr 20ch;
		}

		@container footer (max-inline-size: 800px) {
			grid-template-columns: auto 1fr;
			[s-column="3"] {
				grid-row: 2;
				grid-column: 1 / -1;
			}
		}

		@media (max-width: 767px) {
			grid-template-columns: 1fr;
			justify-items: center;
			[s-column="1"],
			[s-column="2"] {
				display: none;
			}
			[s-column] [s-heading] {
				justify-self: center;
				text-align: center;
			}
		}
	}
}

[s-footer-photo] {
	margin-block-start: var(--xxl);
	width: 100%;
	overflow: hidden;
	aspect-ratio: 2.75/1;

	@media (max-width: 767px) {
		aspect-ratio: 1/1;
	}

	[s-img] {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

}

/* Utilities - always wins */
@layer utilities {
/* Read-more / expand-collapse utility
   Targets [js-expand-collapse] — deliberate exception to the
   js-* / CSS separation convention. Behavioral CSS and JS are
   inherently coupled here. */

[js-expand-collapse] {
	max-height: var(--_clamp-height, 15em);
	overflow: clip;
	transition: max-height 0.3s ease;

	&.is-clamped {
		align-content: start;
		mask-image: linear-gradient(to bottom, black 75%, transparent);
	}

	&.is-expanded {
		mask-image: none;
	}
}

[s-read-more] {
	all: unset;
	color: inherit;
	font-family: var(--body);
	font-size: var(--base);
	cursor: pointer;
	justify-self: center;
	margin-inline: auto;
	display: block;
	width: max-content;
	margin-block-start: 0.75rem;
	text-decoration: underline;
	text-decoration-thickness: var(--link-underline-width);
	text-decoration-color: var(--link-underline-color);
	opacity: 0.7;
	transition: opacity var(--duration-normal) var(--ease-out);

	&:hover {
		opacity: 1;
	}

	&[hidden] {
		display: none;
	}
}

}
@layer utilities {
/* [utility-seperator-top] {
    border-top: 1px solid var(--color-gray-light);
} */

/* UTILITY STYLE */
/* Inline Links */
[u-link] a {
	cursor: pointer;
	color: currentColor;
	text-decoration-thickness: var(--link-underline-width);
	text-decoration-style: solid;
	text-decoration-color: var(--link-underline-color);
	transition: var(--link-transition);

	&:hover {
		color: var(--link-color-hover);
		background-color: var(--link-bg-hover);
		text-decoration: none;
	}

	&:active,
	&.active {
		color: var(--link-color-active);
	}
}

/* Hide Elements for various breakpoints */
@media (max-width: 767px) {
	[u-hide~="sm"] {
		display: none;
	}
}

[u-hide~="sm+"] {
	display: none;
}

@media (min-width: 768px) {
	[u-hide~="md+"] {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	[u-hide~="md"] {
		display: none;
	}
}

@media (min-width: 1025px) {
	[u-hide~="lg"] {
		display: none;
	}
}

hidden {
	display: none !important;
}

/* Image Position */
[u-position="top left"] {
	object-position: top left;
}
[u-position="top center"] {
	object-position: top center;
}
[u-position="top right"] {
	object-position: top right;
}
[u-position="center left"] {
	object-position: center left;
}
[u-position="center center"] {
	object-position: center center;
}
[u-position="center right"] {
	object-position: center right;
}
[u-position="bottom left"] {
	object-position: bottom left;
}
[u-position="bottom center"] {
	object-position: bottom center;
}
[u-position="bottom right"] {
	object-position: bottom right;
}

/* [js-show-hide~="hide"]:not([enso*="ensoAction"]) {
    display: none;
    background-color: rgba(255, 255, 255, 0.8);
}

[js-show-hide~="hide"][enso]::before {
    content: "";
    display: flex;
    place-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
} */
[u-test] {
	background-color: hsl(from red h s l / 0.2);
}

}