@import "reset.css";
@import "splide-core.min.css";

/* @group FONTS */

@font-face {
  font-family: 'Assistent';
  src: url('../fonts/Assistant-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/Assistant-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}

/* @end */

/* @group ROOT */

:root {
	--body-min-width: 320px;
	
	--color-base: #000000;
	--color-primary: #112E4C;
	--color-primary-light: #DEE6E8;
	--color-secondary: #D0B882;
	--color-secondary-darker: #C8AC6E;
	--color-background: #FFFFFF;
	
	--font-family: 'Assistent', Helvetica, Arial, sans-serif;
	
	--font: 		450 19px/1.4em var(--font-family);
	--font-sm: 	500 .9rem/1.4em var(--font-family);
	--font-lg: 	400 1.2rem/1.4em var(--font-family);
	--font-h3: 	700 1.25rem/1.2em var(--font-family);
	--font-h2:	700 2rem/1.1em var(--font-family);
	--font-h1:	700 3.6rem/1em var(--font-family);
	
	--spacing-sm:	clamp(1rem, 3vw, 1.5rem);
	--spacing-md: clamp(1.5rem, 5vw, 3rem);
	--spacing-lg: clamp(3rem, 8vw, 4.5rem);
	--spacing-xl: clamp(4.5rem, 12vw, 7rem);
	
	--header-height: 3rem;
	
	--main-padding-inline: clamp(1rem, 5vw, 3.5rem);
	
}

@media (max-width: 799px) {
	
	:root {
		--font: 		400 18px/1.4em var(--font-family);
		--font-lg: 	var(--font);
		--font-h3: 	700 1.1rem/1.2em var(--font-family);
		--font-h2:	700 1.6rem/1.1em var(--font-family);
		--font-h1:	700 2.6rem/1em var(--font-family);
	}
	
}

/* @end */

/* @group BASE */

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

html,
body {
	min-width: 320px;
	color: var(--color-primary);
	font: var(--font);
	font-feature-settings: "lnum";
	line-height: 1.4em;
}

strong {
	font-weight: 700;
}

h1 {
	font: var(--font-h1);
}

h1:not(:last-child) {
	margin-bottom: var(--spacing-md);
}

h2 {
	font: var(--font-h2);
}

h2:not(:last-child) {
	margin-bottom: .9rem;
}

* + h2 {
	margin-top: var(--spacing-lg);
}

h3 {
	font: var(--font-h3);
}

h3:not(:first-child) {
	margin-top: 1.4em;
}

h3:not(:last-child) {
	margin-bottom: .9em;
}

p:not(:last-child),
blockquote:not(:last-child) {
	margin-bottom: .9em;
}

.main ul:not(:last-child) {
	margin-bottom: 1.5em;
}

	.main ul:not([class]) li,
	.hero ul li {
		display: flex;
	}
	
	.main ul:not([class]) li:not(:last-child),
	.hero ul li:not(:last-child) {
		margin-bottom: .3em;
	}
	
		.main ul:not([class]) li::before,
		.hero ul li::before {
			content: "";
			flex: 0 0 .5em;
			height: .5em;
			margin-top: .5em;
			margin-right: .5em;
			border-radius: 50%;
			background-color: var(--color-secondary);
		}
		
img {
	max-width: 100%;
	height: auto;
}

/* @end */

/* @group Main */

.main {
	padding-top: var(--header-height);
	padding-bottom: var(--spacing-xl);
}

/* @end */

/* @group Container */

.container {
	max-width: 1400px;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--main-padding-inline);
	padding-left: var(--main-padding-inline);
}

/* @end */

/* @group Links */

.main a:not(.button),
.main a.subpage-block__path:not(.button):hover {
	text-decoration: underline;
	text-decoration-color: var(--color-secondary-darker);
	text-decoration-thickness: .05em;
	text-underline-offset: .15em;
	transition: text-decoration .15s ease-in-out 0s;
}

.main a.subpage-block__path:not(.button) {
	text-decoration: unset;
}

.main a:not(.button):hover {
	text-decoration-color: currentColor;
}

a[href^="tel:"],
a[href^="mailto:"],
a[href*="tidycal"] {
	white-space: nowrap;
}

	a[href^="tel:"]::before,
	a[href^="mailto:"]::before,
	a[href*="tidycal"]::before {
	  content: "";
		display: inline-block;
	  -webkit-mask-size: cover;
	  mask-size: cover;
	  width: 1em;
	  height: 1em;
		margin-right: .4em;
		margin-top: -.2em;
	  background-color: currentColor;
	  vertical-align: middle;
		transition: transform .15s ease-in-out 0s;
	}

	a[href^="tel:"]::before {
		-webkit-mask-image: url(../images/icon-phone.svg);
		mask-image: url(../images/icon-phone.svg);
	}
	
	a[href^="mailto:"]::before {
		
		-webkit-mask-image: url(../images/icon-email.svg);
		mask-image: url(../images/icon-email.svg);
	}
	
	a[href*="tidycal"]::before {
		-webkit-mask-image: url(../images/icon-calendar.svg);
		mask-image: url(../images/icon-calendar.svg);
	}
	
	a[href^="tel:"]:hover::before,
	a[href^="mailto:"]:hover::before,
	a[href*="tidycal"]:hover::before {
		transform: scale(1.1);
	}

.footer *[class*="menu"] a::before {
	content: "›";
	display: inline-block;
	margin-right: .4em;
	transition: transform .15s ease-in-out 0s;
}

	.footer *[class*="menu"] a:hover::before {
		transform: scale(1.4);
	}

/* @end */

/* @group Button */

.button {
	display: inline-block;
	padding: .3em .9em;
	border: 1px solid currentColor;
	font: var(--font-sm);
}

.main .button {
	border-color: var(--color-secondary);
}

/* @end */

/* @group Header */

.header {
	position: fixed;
	z-index: 200;
	top: 0;
	left: 0;
	right: 0;
	background-color: var(--color-primary);
	color: var(--color-background);
}

	.header__container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--header-height);
	}

	.header__menu {
		display: flex;
		align-items: center;
		column-gap: 1.5em;
	}
	
	@media (max-width: 799px) {
		
		.header {
			font: var(--font-sm);
		}
		
			.header__menu {
				display: none;
			}
		
	}
	
	@media (min-width: 800px) {
		
			.header__offcanvas-toggle {
				display: none;
			}
		
	}

/* @end */

/* @group Offcanvas toggle */

.offcanvas-toggle {
	position: relative;
	width: 1.4rem;
	height: 1.4rem;
	padding: .1em;
	vertical-align: top;
}

	.offcanvas-toggle__label {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		text-indent: -999px;
	}

/* @end */

/* @group Offcanvas */

.offcanvas {
	position: fixed;
	z-index: 100;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	min-width: var(--body-min-width);
	display: flex;
	flex-direction: column;
	
	background-color: rgba(0,0,0,.7);
	transform: translateY(-110vh); /* with -100vh there’s a bug on iOS 16.2 */
  transition: transform 0.3s ease;
}
		
.offcanvas.isOpen {
	transform: translateY(0);
}

	.offcanvas__inner {
		padding: calc(var(--header-height) + 1rem) 1rem 1.5rem;
		background-color: var(--color-secondary);
		color: var(--color-base);
	}

	.offcanvas__links {
		margin-bottom: .9em;
	}

		.offcanvas__links a {
			display: block;
			padding-top: .45em;
			padding-bottom: .45em;
		}

	.offcanvas__menu {
		display: flex;
		flex-direction: column;
	}
	
		.offcanvas__menu > * {
			padding-top: .5em;
			padding-bottom: .5em;
		}
	
		.offcanvas__menu > *:not(:last-child) {
			border-bottom: 1px solid currentColor;
		}

	@media (min-width: 800px) {
		
		.offcanvas {
			display: none;
		}
		
	}

/* @end */

/* @group Hamburger */

.hamburger {
	position: relative;
}

	.hamburger > * {
		display: block;
		position: absolute;
		height: .09rem;
		width: 100%;
		background-color: currentColor;
		border-radius: .045rem;
		transition: all 300ms ease-in-out 0s;
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(0.35em);
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(-0.35em);
	}
	
	/* isNavOpen */
	
	.hamburger.isOpen > *:nth-child(1) {
		width: 80%;
		margin-left: 10%;
		transform: rotate(45deg);
	}
	
	.hamburger.isOpen > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger.isOpen > *:nth-child(3) {
		width: 80%;
		margin-left: 10%;
		transform: rotate(-45deg);
	}

/* @end */

/* @group Logo */

.logo > * {
	display: flex;
	column-gap: .4em;
}

/* @end */

/* @group Hero */

.hero {
	position: relative;
	background-color: var(--color-primary);
	color: var(--color-background);
	font: var(--font-lg);
}

	.hero img {
		z-index: 1;
		width: 100%;
		max-height: 700px;
		object-fit: cover;
	}
	
	.hero__caption {
		padding: var(--spacing-sm) var(--main-padding-inline) var(--spacing-md);
	}
	
	.hero h1 {
		margin-bottom: 1rem;
		text-shadow: 0 0 .3em rgba(0,0,0,.5);
	}
	
	.hero blockquote {
		line-height: 1.5em;
	}
	
		.hero blockquote u {
			padding-inline: .6em;
			background-color: var(--color-secondary);
			box-shadow: 0 .05em var(--color-secondary);
			color: var(--color-primary);
			-webkit-box-decoration-break: clone;
	    box-decoration-break: clone;
			font-weight: 700;
		}
		
	@media (min-width: 1000px) {
	
			.hero img {
				height: 70vh;
				max-height: 700px;
			}
		
			.hero__caption {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 50%;
				right: 0;
				display: flex;
				align-items: center;
				max-width: 30rem;
			}
	}

/* @end */

/* @group Section */

.section {
	padding-top: var(--spacing-md);
}

/* @end */

/* @group Cards-block */

.cards-blog {
	
}

/* @end */

/* @group Logos-block */

.logos-block {
	padding-top: var(--spacing-md);
	font: var(--font-lg);
}

	.logos-block__logos {
		margin-top: var(--spacing-md);
	}
	
	@media (min-width: 1200px) {
		
		.logos-block__text {
			width: 66.666666666%;
		}
		
	}

/* @end */

/* @group Voices-block */

.voices-block {
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	padding-top: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	background-color: var(--color-primary-light);
	font: var(--font-lg);
}

	.voices-block__voices {
		margin-top: var(--spacing-md);
	}

	@media (min-width: 1200px) {
		
		.voices-block__text {
			width: 66.666666666%;
		}
		
	}

/* @end */

/* @group Text-block */

.text-block {
	font: var(--font-lg);
}

	.text-block .container {
		display: grid;
		column-gap: var(--spacing-md);
		row-gap: var(--spacing-sm);
	}
	
	.text-block__logo {
		margin-top: .5rem;
		max-width: 200px;
	}
	
	@media (min-width: 500px) and (max-width: 999px) {
		
			.text-block__figure {
				width: 50%;
			}
		
	}
	
	@media (min-width: 1000px) {
		
		.text-block .container {
			grid-template-columns: 1fr 2fr;
		}
		
			.text-block__text {
				grid-column: 2;
			}
		
			.text-block__logo {
				grid-column: 2;
			}
		
	}

/* @end */

/* @group Subpage-block */

.subpage-block {
	max-width: 54rem;
	margin-right: auto;
	margin-left: auto;
	font: var(--font-lg);
}

	.subpage-block__path {
		display: inline-block;
		margin-bottom: .5em;
		color: var(--color-secondary-darker);
	}
	
		.subpage-block__path::after {
			content: "›";
			display: inline-block;
			margin-left: 0.4em;
		}
	
	.subpage-block__cards {
		margin-top: var(--spacing-xl);
	}
	
/* @end */



/* @group Cards / Card */

.cards {
	container-type: inline-size;
	display: flex;
	flex-wrap: wrap;
	font: var(--font);
}
	
	@container (max-width: 599px) {
			
			.cards > *:not(:last-child) {
				padding-bottom: 1.5rem;
				border-bottom: 1px solid var(--color-secondary);
			}
			
			.cards > *:not(:first-child) {
				padding-top: 1.5rem;
			}
			
	}
	
	@container (min-width: 600px) {
		
			.cards > * {
				padding-right: 1.5rem;
				padding-left: 1.5rem;
			}
		
	}

	@container (min-width: 600px) and (max-width: 999px) {
		
			.cards > * {
				flex-basis: calc(50% + 1.5rem);
			}
			
			.cards > *:nth-child(odd) {
				margin-left: -1.5rem;
			}
			
			.cards > *:nth-child(even) {
				margin-right: -1.5rem;
			}
			
			.cards > *:nth-child(1),
			.cards > *:nth-child(2) {
				margin-bottom: 1.5rem;
			}
			
			.cards > *:not(:nth-child(1)):not(:nth-child(2)) {
				margin-top: 1.5rem;
			}
			
			.cards > *:not(:nth-child(even)) {
				border-right: 1px solid var(--color-secondary);
			}
		
	}
	
	@container (min-width: 1000px) {
		
			.cards > * {
				flex-basis: 33.333333333%;
				
			}
			
			.cards > *:not(:last-child) {
				padding-bottom: 1.5rem;
				border-right: 1px solid var(--color-secondary);
			}
		
	}

/* @end */

/* @group Logos / Logo */

.logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	column-gap: var(--spacing-md);
	row-gap: var(--spacing-md);
}

	.logo img {
		width: 100%;
	}
	
	@media (max-width: 599px) {
		
		.logos {
			grid-template-columns: repeat(2, 1fr);
		}
		
	}

/* @end */

/* @group Voices / Voice */

.voices {
	max-width: 46rem;
	margin-right: auto;
	margin-left: auto;
}

.voice {
	
}

	.voice__text {
		margin-bottom: .9em;
	}

	.voice__source {
		font: var(--font);
	}

/* @end */

/* @group Splide */

.splide {
	
}
	
	.splide__pagination {
		margin-top: var(--spacing-lg);
		line-height: 1rem;
	}
	
		.splide__pagination > * {
			display: unset;
		}
		
			.splide__pagination > *::before {
				content: "";
				display: none;
				width: unset;
			}
			
			.splide__pagination__page {
				width: 2rem;
				height: 2rem;
				transition: all .15s ease-in-out 0s;
			}
			
				.splide__pagination__page::before {
					content: "";
					display: block;
					width: .9em;
					height: .9em;
					margin-left: .25em;
					margin-right: .25em;
					border: 1px solid currentColor;
					border-radius: 50%;
				}
				
				.splide__pagination__page:not(.is-active)::before {
					
				}
				
				.splide__pagination__page.is-active::before {
					background-color: currentColor;
				}
			
				.splide__pagination__page:hover {
					cursor: pointer;
				}
				
					.splide__pagination__page:hover::before {
						background-color: currentColor;
					}

/* @end */

/* @group Footer */

.footer {
	padding-top: clamp(1.5rem, 5vw, 3rem);
	padding-bottom: clamp(2.5rem, 8vw, 5rem);
	background-color: var(--color-secondary);
	color: var(--color-base);
}

	.footer__container {
		display: grid;
		row-gap: 3rem;
	}

/* @end */

/* @group Colophon */

.colophon {
	display: grid;
	column-gap: 2.5rem;
	row-gap: 2rem;
}

	.colophon > *:first-child {
		font: var(--font-lg);
	}
	
	.colophon li:not(:last-child) {
		margin-bottom: .5em;
	}
	
	.colophon__menu {
		display: grid;
		row-gap: .3em;
	}

	@media (min-width: 900px) {
		
		.colophon {
			grid-template-columns: 2fr 1fr;
		}
		
			.colophon > *:first-child {
				grid-row: span 2;
			}
		
	}
	
	@media (min-width: 1200px) {
		
		.colophon {
			grid-template-columns: 3fr 1fr 1fr;
		}
		
			
		
	}

/* @end */

/* @group Bottombar */

.bottombar {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 1em;
}

	.bottombar__menu {
		display: flex;
		column-gap: 1em;
	}
	

/* @end */