/* latin */
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	src: url(fonts/ubuntu-latin-700-normal.woff2) format('woff2'), url(fonts/ubuntu-latin-700-normal.woff) format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	font-display: swap;
}

:root {
	interpolate-size: allow-keywords;

	--clr-bg: white;
	--clr-text: #575757;
	--clr-accent-1: #8AB5B5; /* green */
	--clr-accent-2: #FCD69F; /* yellow */
	--clr-cta: #F3B2C2; /* pink */

	--border-radius: 0;
	--gap: 2rem;
	--gap-md: clamp(3rem, 5vw, 5rem);
	--gap-lg: clamp(5rem, 1rem + 7vw, 10rem);
	--gap-xl: clamp(7rem, 2rem + 7vw, 12rem);
	--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Helvetica Neue', sans-serif;
}

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

* {
	font: inherit;
	margin: 0;
}

::backdrop {
	background-color: var(--clr-accent-1);
	color: var(--clr-bg);
	opacity: 0.75;
}

html {
	font-size: 16px;
	font-family: var(--font-family);
	font-weight: 300;
	letter-spacing: 0.12ch;
	line-height: 1.8;
	color: var(--clr-text);
	background-color: var(--clr-bg);
	text-wrap-style: pretty;
	hyphens: auto;
	-webkit-hyphens: auto;
	word-break: break-word;
	overflow-wrap: break-word;
}

body {
	font-size: clamp(1rem, 0.8rem + 0.5vw, 1.8rem);
	min-height: 100%;
	overscroll-behavior: contain;
	position: relative;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

img,
picture,
svg {
	display: block;
	max-inline-size: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
	line-height: 1.2;
	hyphens: none;
}

h1, h2 {
	--headline-length: 32ch; 

	font-size: clamp(1.85rem, -1.2rem + 6vw, 3rem);
	max-inline-size: var(--headline-length);
	animation: fade-in ease-out 0.3s;
}
h2 {
	font-size: clamp(1.75rem, -1rem + 4.2vw, 2.3rem);
}
small { font-size: 0.8em; opacity: 0.8; }

a {
	color: var(--clr-text);
	text-decoration: none;
}

a:not([class]) {
	display: inline-block;
	font-weight: 500;
	border-block-end: 2px solid rgba(0,0,0,0.2);
	transition: font-weight 0.25s, border-block-end 0.25s;
	padding-block-end: 3px;
}

a:not([class]):hover {
	border-block-end: 2px solid rgba(0, 0, 0, 0.4);
	font-weight: 600;
}

a:not([class])::after {
	display: inline-block;
	content: " \2192";
	padding-inline-start: 0.5rem;
	transition: all 0.25s;
	scale: 1;
	font-weight: 300;
}

a:not([class]):hover::after {
	padding-inline-start: 1.2rem;
	scale: 1.25 1;
	margin-inline-start: -0.5em;
	font-weight: 700;
}

strong {
	font-weight: 600;
}

ul:not([class]) {
	margin-inline: 0;
	padding-inline-start: 1rem;
}

ul:not([class])>li+li {
	margin-block-start: 1rem;
}

/*
******** ------------------------------ **** FORM ****
*/
form
{
	--form-gap: var(--gap);
}

input,
textarea,
select {
	padding: 0.5em 0;
	border: none;
	border-bottom: 2px solid white;
	inline-size: 100%;
	background-color: transparent;
	accent-color: var(--clr-cta);
	color: white;
	font-size: calc(var(--gap) * 0.5);

	@media screen and (min-width: 1025px) {
		font-size: calc(var(--gap) * 0.75);
	}

	&:focus {
		outline: none;
	}

	&:focus ~ label,
	&:not(:placeholder-shown) ~ label {
		top: -14px;
		font-size: 14px;
	}

	&::placeholder {
		color: transparent;
	}
}

input {
	margin-block-end: var(--form-gap);
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
	transition: background-color 600000s 0s, color 600000s 0s;
	background-color: transparent;
}

input[data-autocompleted] {
	background-color: transparent !important;
}

button {
	outline: 0;
}

button:hover {
	cursor: pointer;
}

button:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

label {
	font-size: calc(var(--gap) * 0.5);
	margin-bottom: 0.5em;
	position: absolute;
	pointer-events: none;
	inset-inline-start: 0;
	inset-block-start: 10px;
	transition: 0.5s ease all;

	@media screen and (min-width: 1025px) {
		font-size: calc(var(--gap) * 0.75);
	}
}

.form__group {
	position: relative;
}

/*
******** ------------------------------ **** GRID ****
*/

.grid {
	--grid-columns: 1;
	--grid-columns-md: 2;
	--grid-columns-lg: var(--grid-columns-md);
	--grid-gap: 0;
	--grid-gap-md: var(--gap);
	--grid-gap-lg: var(--grid-gap-md);

	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	gap: var(--grid-gap);

	@media screen and (min-width: 769px) {
		--grid-columns: var(--grid-columns-md);
		--grid-gap: var(--grid-gap-md);
	}

	@media screen and (min-width: 1025px) {
		--grid-columns: var(--grid-columns-lg);
		--grid-gap: var(--grid-gap-lg);
	}
}

.grid-full-width {
	display: grid;
	grid-template-columns:
		[full-width-start] minmax(calc(1rem + 2vw), 1fr) [content-start] minmax(50vw, 1100px) [content-end] minmax(calc(1rem + 2vw), 1fr) [full-width-end];
	grid-column: full-width;
}

.grid-full-width>* {
	grid-column: content;
}

.grid-content {
	grid-column: content;
}

.grid-breakout {
	grid-column: breakout;
}

/*
******** ------------------------------ **** STACK ****
*/
.stack {
	--stack-gap: var(--gap);
}

.stack>*+* {
	margin-block-start: var(--stack-gap);
}

/*
******** ------------------------------ **** SECTION ****
*/
.section {
	--section-gap: var(--gap-xl);
	--section-gap-md: var(--gap-lg);
	--section-gap-lg: var(--gap-xl);

	padding-block: var(--section-gap);
	position: relative;

	@media screen and (min-width: 481px) {
		padding-block: var(--section-gap-md);
	}

	@media screen and (min-width: 769px) {
		padding-block: var(--section-gap-lg);
	}

	@media screen and (min-width: 1025px) {
		padding-block: var(--section-gap-lg);
	}
}

.button {
	display: inline-block;
	background-color: var(--clr-cta);
	color: white;
	text-transform: uppercase;
	border-radius: 2em;
	padding: 0.75em 1.5em;
	font-weight: 600;
	scale: 1;
	text-shadow: 0 0 3px rgba(182, 0, 67, 0.3);
	transition: scale 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

@media screen and (min-width: 769px) {
	.button:hover {
		scale: 0.975;
		box-shadow: inset 5px 5px 5px rgba(182, 0, 67, 0.15);
	}
}

.icon-phone {
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	position: relative;
	left: -0.25em;
	top: 0.1em;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMi4zNzkiIGhlaWdodD0iMzIuMzc5IiB2aWV3Qm94PSIwIDAgMzIuMzc5IDMyLjM3OSI+CiAgPHBhdGggaWQ9IlBmYWRfMjIxIiBkYXRhLW5hbWU9IlBmYWQgMjIxIiBkPSJNMTYwLjQ4My03OTcuNjIxYTI2LjcsMjYuNywwLDAsMS0xMS4wMzItMi40NjMsMzMuMjk0LDMzLjI5NCwwLDAsMS05Ljk5MS03LDMzLjI5MywzMy4yOTMsMCwwLDEtNy05Ljk5MUEyNi43MiwyNi43MiwwLDAsMSwxMzAtODI4LjExMmExLjgyOSwxLjgyOSwwLDAsMSwuNTQyLTEuMzQ0QTEuODM2LDEuODM2LDAsMCwxLDEzMS45LTgzMGg3LjE3YTEuNjcyLDEuNjcyLDAsMCwxLDEuMTIyLjQsMS43MjcsMS43MjcsMCwwLDEsLjU5LDEuMDI5bDEuMiw2LjI5MWEyLjU1NywyLjU1NywwLDAsMS0uMDU4LDEuMTIyLDIuMTY3LDIuMTY3LDAsMCwxLS41Ljg2N2wtNC4zNzEsNC40NDFhMjQuNiwyNC42LDAsMCwwLDIuMTg0LDMuMjg0LDMxLjg4NywzMS44ODcsMCwwLDAsMi43MTksMy4wMywzMi44ODksMzIuODg5LDAsMCwwLDIuOTQ5LDIuNjEzLDMwLjY1MywzMC42NTMsMCwwLDAsMy4zMTksMi4yNjdMMTUyLjYxOS04MDlhMi4xOTIsMi4xOTIsMCwwLDEsLjkyNS0uNTU1LDIuNjc4LDIuNjc4LDAsMCwxLDEuMTEtLjA5M0wxNjAuOS04MDguNGExLjk4NywxLjk4NywwLDAsMSwxLjA2NC42NTUsMS42NjcsMS42NjcsMCwwLDEsLjQxNiwxLjF2Ny4xMjNhMS44MzksMS44MzksMCwwLDEtLjU0MiwxLjM1NUExLjgzOSwxLjgzOSwwLDAsMSwxNjAuNDgzLTc5Ny42MjFaTTEzNS4zODktODE5LjEzbDMuMDUzLTMuMDUzLS44MDktNC4zNDhoLTQuMDk0YTI4Ljg3NywyOC44NzcsMCwwLDAsLjYyNCwzLjcyNEEyMS40NDQsMjEuNDQ0LDAsMCwwLDEzNS4zODktODE5LjEzWm0xNi4xLDE2LjFhMjIuMjE4LDIyLjIxOCwwLDAsMCwzLjY1NCwxLjI0OSwyMi41ODMsMjIuNTgzLDAsMCwwLDMuNzcuNnYtNC4wNzFsLTQuMjU2LS45Wk0xMzUuMzg5LTgxOS4xM1pNMTUxLjQ4Ni04MDMuMDMzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzMCA4MzApIiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=");
}

.arrow {
	--arrow-block-end: -5rem;
	--arrow-inline-end: 0rem;
	--arrow-inline-size: 150px;
	--arrow-rotation: 0deg;

	position: absolute;
	z-index: 98;
	max-inline-size: var(--arrow-inline-size);
	inset-block-end: var(--arrow-block-end);
	inset-inline-end: var(--arrow-inline-end);
	transform: rotate(var(--arrow-rotation));

	@media screen and (min-width: 769px) {
		--arrow-inline-size: 200px;
	}
}

@media (prefers-reduced-motion: no-preference) and (min-device-width: 800px) {
	:has(:target) {
		scroll-behavior: smooth;
		scroll-padding-top: 3rem;
	}
}