/*!
Theme Name:  Kodora
Theme URI:   https://kodorahomes.ee/
Author:      Evaken OÜ
Description: Kodora Homesi kohandatud teema. Üks stiilifail, PHP-mallid, vanilla JS — ilma lehekoostaja, raamistiku ja jQueryta.
Version:     0.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kodora
Tags:        custom-menu, translation-ready, portfolio
*/

/* ==========================================================================
   Sisukord
   1.  Disainitokenid
   2.  Fondid
   3.  Reset ja põhistiilid
   4.  Paigutuse alusklassid
   5.  Nupud ja lingid
   6.  Päis
   7.  Mobiilimenüü
   8.  Hero
   9.  Sektsioonid ja tüpograafia
   10. Tsitaat ja numbrid
   11. Teenused
   12. Tehtud tööd — marquee ja slaider
   13. Galerii lightbox ja plaadiruudustik
   14. Meist
   15. Meie lugu
   16. Kontakt ja vorm
   17. Jalus
   18. Projektileht, arhiiv, 404
   19. Ligipääsetavus ja vähendatud liikumine
   ========================================================================== */


/* ==========================================================================
   1. Disainitokenid
   Väärtused tulevad muutmata kujul failist design_handoff/README.md.
   Ühtki värvi, vahet ega ajastust ei kirjutata mujal käsitsi — kõik viitab siia.
   ========================================================================== */

:root {
	/* Värvid — tumedad taustad */
	--forest-900: #06231A;  /* sügavaim: tumedad sektsioonid, jalus, mobiilimenüü */
	--forest-700: #0A3A28;  /* "Meie lugu" taust, tume teenusekaart, pildi laadimistaust */

	/* Värvid — heledad taustad */
	--bone:       #F5F2EC;  /* lehe taust; tumedal taustal tekst */
	--bone-card:  #FFFDF8;  /* hele kaart, vormi taust */
	--bone-image: #E7E2D8;  /* pildiraami taust laadimise ajal */

	/* Värvid — aktsent */
	--copper:       #C08457; /* peamine aktsent, nupud, jooned, fookus */
	--copper-light: #D9A57C; /* aktsent tumedal taustal */
	--copper-dark:  #9E633F; /* aktsent heledal taustal */

	/* Värvid — tekst heledal taustal */
	--ink:    #16201B; /* põhitekst */
	--ink-80: #2C3A33; /* teisene tekst */
	--ink-60: #4A5851; /* lõigutekst */
	--ink-40: #6B7A72; /* vormisildid */
	--ink-30: #8A968F; /* peenkiri, meta */

	/* Läbipaistvused. Need EI OLE asendatavad ühevärviliste vastetega —
	   iga väärtus on valitud konkreetse foto või tausta peale. */
	--on-dark-82: rgba(245, 242, 236, .82); /* hero lõik */
	--on-dark-78: rgba(245, 242, 236, .78); /* tume kaart */
	--on-dark-74: rgba(245, 242, 236, .74); /* ajajoon */
	--on-dark-72: rgba(245, 242, 236, .72); /* jaluse lingid */
	--on-dark-60: rgba(245, 242, 236, .60); /* jaluse tekst, numbrite sildid */
	--on-dark-52: rgba(245, 242, 236, .52); /* lightboxi meta */
	--on-dark-50: rgba(245, 242, 236, .50); /* kaardi meta */
	--on-dark-40: rgba(245, 242, 236, .40); /* varinupu ääris */
	--on-dark-28: rgba(245, 242, 236, .28); /* marquee tekst */
	--on-dark-26: rgba(245, 242, 236, .26); /* noolenupu ääris */
	--on-dark-16: rgba(245, 242, 236, .16);
	--on-dark-14: rgba(245, 242, 236, .14);
	--on-dark-12: rgba(245, 242, 236, .12);
	--on-dark-10: rgba(245, 242, 236, .10);

	--rule-light: rgba(22, 32, 27, .14); /* sektsioonijoon heledal */
	--rule-card:  rgba(22, 32, 27, .10); /* kaardi ääris heledal */
	--rule-input: rgba(22, 32, 27, .24); /* sisendi allkriips */

	--copper-42: rgba(192, 132, 87, .42); /* burgeri ääris */
	--copper-50: rgba(192, 132, 87, .50); /* päise juuksekarvjoon */

	/* Paigutus */
	--container:       1360px;
	--gutter:          clamp(20px, 4vw, 56px);
	--gutter-header:   clamp(18px, 4vw, 56px);
	--section-y:       clamp(72px, 9vw, 140px);
	--section-y-dense: clamp(56px, 7vw, 96px);
	--section-y-dark:  clamp(72px, 9vw, 130px);
	--card-pad:        clamp(26px, 3.2vw, 42px);

	/* Vahed */
	--gap-cards:  clamp(20px, 2.6vw, 34px);
	--gap-prose:  clamp(32px, 5vw, 80px);
	--gap-slider: clamp(16px, 2vw, 26px);

	/* Liikumine */
	--ease-menu: cubic-bezier(.6, 0, .2, 1);
	--ease-zoom: cubic-bezier(.2, .7, .2, 1);

	/* Varjud — kogu kujunduses on neid täpselt kaks */
	--shadow-card:        0 24px 54px -30px rgba(6, 35, 26, .38);
	--shadow-card-dark:   0 24px 54px -30px rgba(6, 35, 26, .50);
	--shadow-header:      0 14px 40px -26px rgba(0, 0, 0, .70);
}


/* ==========================================================================
   2. Fondid
   Montserrati muutuvfont, ise majutatud (GDPR — Google Fontsi ei päritud).
   Kaks faili tähestiku kohta: latin katab õäöü, latin-ext katab š ja ž.
   Brauser laeb latin-ext'i ainult siis, kui lehel neid tähti esineb.
   ========================================================================== */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/montserrat-latin.woff2') format('woff2');
	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-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/montserrat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 300 500;
	font-display: swap;
	src: url('assets/fonts/montserrat-italic-latin.woff2') format('woff2');
	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-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 300 500;
	font-display: swap;
	src: url('assets/fonts/montserrat-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   3. Reset ja põhistiilid
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--bone);
	color: var(--ink);
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Marquee ja slaider ulatuvad vaateava servani; see hoiab ära
	   horisontaalse kerimisriba. `clip` ei mõjuta fikseeritud päist. */
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

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

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

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

em {
	font-style: italic;
}

strong {
	font-weight: 600;
}

/* Kogu kujunduses ei ole ühtegi ümardatud nurka. See reegel on siin
   meeldetuletuseks: kui kuskil tekib raadius, on see viga. */
* {
	border-radius: 0;
}


/* ==========================================================================
   4. Paigutuse alusklassid
   ========================================================================== */

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

/* Fikseeritud päis katab ankrusse hüppamisel pealkirja — see hoiab selle nähtaval. */
[id] {
	scroll-margin-top: 100px;
}

#tehtud-tood {
	scroll-margin-top: 80px;
}

.page-shell {
	padding-block: calc(clamp(68px, 8vw, 92px) + var(--section-y)) var(--section-y);
}


/* ==========================================================================
   5. Nupud ja lingid
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 17px 30px;
	border: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	transition:
		background-color 260ms ease,
		border-color 260ms ease,
		color 260ms ease,
		transform 260ms ease;
}

/* Täidetud vaskne nupp — hero peamine tegevus */
.btn--solid {
	background: var(--copper);
	color: var(--forest-900);
}

.btn--solid:hover,
.btn--solid:focus-visible {
	background: var(--copper-light);
	transform: translateY(-2px);
}

/* Varinupp tumedal taustal */
.btn--ghost {
	border: 1px solid var(--on-dark-40);
	color: var(--bone);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	border-color: var(--copper-light);
	background: rgba(217, 165, 124, .12);
}

/* Päise CTA — väiksem polster ja kitsam tähevahe kui hero nuppudel */
.btn--outline {
	gap: 10px;
	padding: 13px 24px;
	border: 1px solid var(--copper);
	color: var(--copper);
	letter-spacing: .1em;
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--copper);
	color: var(--forest-900);
}


/* ==========================================================================
   6. Päis
   Kaks olekut, mille vahetab assets/js/header.js klassiga `is-scrolled`
   kehal: A — läbipaistev hero peal, B — tume ja hägustatud.
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 80;
	background: transparent;
	transition:
		background-color 420ms ease,
		box-shadow 420ms ease,
		backdrop-filter 420ms ease;
}

/*
 * State B. Also the permanent state on any view that does not open with a dark
 * photo behind the header — see kodora_body_classes() in inc/setup.php.
 */
.is-scrolled .site-header,
body:not(.has-dark-hero) .site-header {
	background: rgba(6, 35, 26, .92);
	box-shadow: var(--shadow-header);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.site-header__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter-header);
	height: clamp(68px, 8vw, 92px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/*
 * Kliendi soov, teadlik kõrvalekalle kujundusest: algne spetsiväärtus oli
 * clamp(34px, 4.2vw, 46px). Logo on püstlogo — ikoon sõnamärgi kohal — nii et
 * 46px juures jäi alumine rida „HOMES" loetamatult väikeseks.
 * Päise kõrgus on clamp(68px, 8vw, 92px); 62px jätab ülal-all ~15px õhku.
 */
.site-header__logo img {
	height: clamp(44px, 5.6vw, 62px);
	width: auto;
}

/* Vaskne juuksekarvjoon päise all — nähtav ainult keritud olekus */
.site-header__rule {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--copper-50), transparent);
	opacity: 0;
	transition: opacity 420ms ease;
}

.is-scrolled .site-header__rule,
body:not(.has-dark-hero) .site-header__rule {
	opacity: 1;
}

/* --- Töölaua navigatsioon ------------------------------------------------ */

/* Ainus päris murdepunkt kogu kujunduses. Kõik muu on sujuv clamp(). */
.nav-desktop {
	display: none;
	align-items: center;
	gap: clamp(18px, 2.4vw, 38px);
}

.nav-desktop__list {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 38px);
}

.nav-desktop__list a {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bone);
	transition: color 240ms ease;
}

.nav-desktop__list a:hover,
.nav-desktop__list a:focus-visible {
	color: var(--copper);
}

/* --- Burger -------------------------------------------------------------- */

.nav-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 46px;   /* ühtlasi miinimum puuteala */
	height: 46px;
	padding: 0 9px;
	border: 1px solid var(--copper-42);
}

.nav-burger span {
	display: block;
	width: 100%;
	height: 1.5px;
	background: var(--bone);
	transition: transform 320ms var(--ease-menu), opacity 200ms ease;
}

/* Kolmest kriipsust saab rist. 7.5px = kriipsu kõrgus (1.5) + vahe (6). */
.menu-open .nav-burger span:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}

.menu-open .nav-burger span:nth-child(2) {
	opacity: 0;
}

.menu-open .nav-burger span:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

@media (min-width: 1000px) {
	.nav-desktop {
		display: flex;
	}

	.nav-burger {
		display: none;
	}
}


/* ==========================================================================
   7. Mobiilimenüü
   ========================================================================== */

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 75;
	background: var(--forest-900);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(88px, 14vw, 140px) clamp(24px, 7vw, 64px) clamp(32px, 6vw, 64px);

	/* Suletud olek. `visibility: hidden` võtab lingid ka tabulaatori
	   järjekorrast välja, nii et eraldi `inert` pole vaja. */
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, -16px, 0);
	transition:
		opacity 420ms ease,
		transform 520ms var(--ease-menu),
		visibility 420ms;
}

.menu-open .mobile-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mobile-menu__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 100% 0%, rgba(192, 132, 87, .16), transparent 60%);
	pointer-events: none;
}

.mobile-menu__nav {
	position: relative;
}

.mobile-menu__list {
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 1.4vw, 14px);
}

.mobile-menu__list a {
	font-weight: 300;
	font-size: clamp(34px, 9vw, 58px);
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--bone);
	transition: color 240ms ease, padding-left 300ms ease;
}

.mobile-menu__list a:hover,
.mobile-menu__list a:focus-visible {
	color: var(--copper-light);
	padding-left: 10px;
}

/* `margin-top: auto` surub kontaktid alla, olenemata sellest,
   mitu menüüpunkti klient lisab. */
.mobile-menu__footer {
	position: relative;
	margin-top: auto;
	padding-top: clamp(32px, 7vw, 56px);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 40px;
	border-top: 1px solid var(--on-dark-14);
}

.mobile-menu__footer a {
	color: var(--copper-light);
	font-size: 15px;
	letter-spacing: .04em;
}


/* ==========================================================================
   8. Hero
   Neli kihti: foto, vertikaalne varjund, horisontaalne varjund, tekst.
   Mõlemat varjundit on vaja — klient vahetab foto ja pealkiri peab jääma
   loetavaks ka päevavalguses pildi peal.
   ========================================================================== */

.hero {
	position: relative;
	min-height: min(100svh, 900px);
	display: flex;
	align-items: flex-end;
	background: var(--forest-900);
	overflow: hidden;
}

.hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--forest-700);
}

.hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero__scrim--vertical {
	background: linear-gradient(
		180deg,
		rgba(6, 35, 26, .70) 0%,
		rgba(6, 35, 26, .42) 42%,
		rgba(6, 35, 26, .88) 100%
	);
}

.hero__scrim--horizontal {
	background: linear-gradient(
		90deg,
		rgba(6, 35, 26, .72) 0%,
		rgba(6, 35, 26, .34) 46%,
		rgba(6, 35, 26, 0) 78%
	);
}

.hero__inner {
	position: relative;
	width: 100%;
}

/* Tekstiplokk ei püüa klikke kinni — varjundid kataksid muidu terve ekraani. */
.hero__content {
	padding-block: clamp(120px, 18vw, 200px) clamp(48px, 7vw, 88px);
	pointer-events: none;
}

.hero__title {
	max-width: 17ch;
	font-weight: 300;
	font-size: clamp(38px, 7.2vw, 92px);
	line-height: 1.04;
	letter-spacing: -.03em;
	color: var(--bone);
	text-wrap: balance;
}

/* Kaldkiri on siin tähenduslik, mitte kaunistus: teine rida on lause pööre. */
.hero__title em {
	color: var(--copper-light);
}

.hero__lead {
	max-width: 52ch;
	margin-top: clamp(22px, 3vw, 34px);
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.62;
	color: var(--on-dark-82);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(30px, 4vw, 46px);
	pointer-events: auto; /* taastab klikid, mille .hero__content ära võttis */
}


/* ==========================================================================
   9. Sektsioonid ja tüpograafia
   Ühised ehituskivid, mida kõik allpool olevad sektsioonid kasutavad.
   ========================================================================== */

.section {
	padding-block: var(--section-y);
}

.section--light {
	background: var(--bone);
}

.section--forest {
	background: var(--forest-700);
	color: var(--bone);
	padding-block: var(--section-y-dark);
}

/*
 * Esimene sektsioon lehel, mis ei alga heroga: jätab fikseeritud päisele ruumi.
 * Peab olema pärast kõiki `padding-block`-iga variante, sest lühivorm
 * kirjutaks padding-top'i muidu üle.
 */
.section--below-header {
	padding-top: calc(clamp(68px, 8vw, 92px) + var(--section-y));
}

/* Pealkiri vasakul, saatetekst või nooled paremal — kordub neljas sektsioonis. */
.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: clamp(30px, 4vw, 52px);
	border-bottom: 1px solid var(--rule-light);
}

.section__head--dark {
	border-bottom-color: var(--on-dark-14);
}

.section__head-lead {
	max-width: 34ch;
	font-size: 16px;
	line-height: 1.62;
	color: var(--ink-60);
}

.eyebrow {
	display: block;
	margin-bottom: 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.eyebrow--light {
	color: var(--copper-dark);
}

.eyebrow--dark {
	color: var(--copper-light);
}

.h2 {
	max-width: 22ch;
	font-weight: 300;
	font-size: clamp(30px, 4.4vw, 56px);
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--ink);
	text-wrap: balance;
}

.h2--dark {
	color: var(--bone);
}

.h2--narrow {
	max-width: 18ch;
}

.h2--contact {
	max-width: 16ch;
	font-size: clamp(30px, 4.8vw, 60px);
	line-height: 1.08;
	letter-spacing: -.03em;
}

.h2 em {
	color: var(--copper-dark);
}

.h2--dark em {
	color: var(--copper-light);
}

.prose-para {
	font-size: clamp(16px, 1.3vw, 17px);
	line-height: 1.72;
	color: var(--ink-80);
}

.prose-para + .prose-para {
	margin-top: 20px;
}

/* Sisu, mille klient kirjutab plokiredaktoris. */
.prose {
	max-width: 68ch;
	font-size: clamp(16px, 1.3vw, 17px);
	line-height: 1.74;
	color: var(--ink-80);
}

.prose > * + * {
	margin-top: 20px;
}

.prose a {
	color: var(--copper-dark);
	border-bottom: 1px solid rgba(158, 99, 63, .4);
	transition: color 240ms ease, border-color 240ms ease;
}

.prose a:hover {
	color: var(--ink);
	border-bottom-color: var(--ink);
}


/* ==========================================================================
   10. Tsitaat ja numbrid
   ========================================================================== */

.stats {
	background: var(--forest-900);
	color: var(--bone);
	border-top: 1px solid var(--on-dark-10);
}

.stats__inner {
	padding-block: var(--section-y-dense);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(36px, 5vw, 72px);
	align-items: start;
}

.stats__quote {
	max-width: 30ch;
	font-weight: 300;
	font-style: italic;
	font-size: clamp(22px, 2.6vw, 34px);
	line-height: 1.34;
	letter-spacing: -.01em;
	color: var(--bone);
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 3vw, 34px);
}

.stats__number {
	font-weight: 300;
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--copper-light);
}

.stats__label {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.45;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--on-dark-60);
}


/* ==========================================================================
   11. Teenused
   ========================================================================== */

.services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(20px, 2.6vw, 32px);
	margin-top: clamp(32px, 4vw, 56px);
}

.service-card {
	display: flex;
	flex-direction: column;
	transition: border-color 320ms ease, transform 320ms ease, box-shadow 320ms ease;
}

.service-card--light {
	background: var(--bone-card);
	border: 1px solid var(--rule-card);
}

.service-card--light:hover {
	border-color: rgba(192, 132, 87, .55);
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.service-card--dark {
	background: var(--forest-700);
	border: 1px solid rgba(192, 132, 87, .28);
	color: var(--bone);
}

.service-card--dark:hover {
	border-color: rgba(192, 132, 87, .7);
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-dark);
}

.service-card__image {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--bone-image);
	overflow: hidden;
}

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

.service-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: var(--card-pad);
}

.service-card__title-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

/* Number on sama suur kui pealkiri, aga õhem — see on paar, mitte silt. */
.service-card__number {
	font-weight: 300;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.16;
	color: var(--copper);
}

.service-card--dark .service-card__number {
	color: var(--copper-light);
}

.service-card__title {
	font-weight: 500;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.16;
	letter-spacing: -.02em;
	color: var(--ink);
}

.service-card--dark .service-card__title {
	color: var(--bone);
}

.service-card__lead {
	font-size: 16px;
	line-height: 1.66;
	color: var(--ink-60);
}

.service-card--dark .service-card__lead {
	color: var(--on-dark-78);
}

/* Loetelu ilma täppideta: markeriks on 18px vaskne kriips. */
.bullets {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 22px;
	border-top: 1px solid var(--rule-card);
}

.service-card--dark .bullets {
	border-top-color: var(--on-dark-14);
}

.bullets__item {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 14px;
	font-size: 15px;
	line-height: 1.58;
	color: var(--ink-80);
}

.service-card--dark .bullets__item {
	color: var(--on-dark-78);
}

/* `margin-top` asetab kriipsu esimese tekstirea optilisele keskjoonele. */
.bullets__rule {
	align-self: start;
	margin-top: 11px;
	height: 1px;
	background: var(--copper);
}

.bullets__item strong {
	color: var(--ink);
}

.service-card--dark .bullets__item strong {
	color: var(--bone);
}

/* `margin-top: auto` hoiab lingi kaardi põhjas, ka siis kui kaartide
   tekstipikkus erineb. */
.text-link {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color 240ms ease, border-color 240ms ease;
}

.text-link--light {
	color: var(--copper-dark);
	border-bottom: 1px solid rgba(158, 99, 63, .4);
}

.text-link--light:hover,
.text-link--light:focus-visible {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.text-link--dark {
	color: var(--copper-light);
	border-bottom: 1px solid rgba(217, 165, 124, .4);
}

.text-link--dark:hover,
.text-link--dark:focus-visible {
	color: var(--bone);
	border-bottom-color: var(--bone);
}

.services__note {
	margin-top: clamp(28px, 3.5vw, 44px);
	max-width: 76ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-60);
}


/* ==========================================================================
   12. Tehtud tööd — marquee ja slaider
   Sektsioonil ei ole horisontaalset polstrit: slaider ulatub vaateava
   servani ja võtab oma ääre ise.
   ========================================================================== */

.projects {
	background: var(--forest-900);
	color: var(--bone);
	overflow: hidden;
	padding: clamp(72px, 9vw, 130px) 0 clamp(64px, 8vw, 120px);
}

.marquee {
	padding-bottom: clamp(44px, 5vw, 72px);
	user-select: none;
}

/* Nimed on lehel kaks korda, seega -50% juures algab kordus täpselt sealt,
   kus esimene komplekt lõppes, ja silmus on nähtamatu. */
.marquee__track {
	display: flex;
	width: max-content;
	animation: kodora-marquee 38s linear infinite;
}

.marquee:hover .marquee__track {
	animation-play-state: paused;
}

@keyframes kodora-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.marquee__item {
	display: inline-flex;
	align-items: center;
	gap: clamp(24px, 3vw, 48px);
	padding-right: clamp(24px, 3vw, 48px);
	font-weight: 300;
	font-size: clamp(30px, 4.6vw, 62px);
	line-height: 1;
	letter-spacing: -.02em;
	white-space: nowrap;
	color: var(--on-dark-28);
}

.marquee__diamond {
	width: 7px;
	height: 7px;
	background: var(--copper);
	transform: rotate(45deg);
}

.slider__arrows {
	display: flex;
	gap: 12px;
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid var(--on-dark-26);
	color: var(--bone);
	transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease;
}

.icon-button:hover,
.icon-button:focus-visible {
	background: var(--copper);
	border-color: var(--copper);
	color: var(--forest-900);
}

.icon-button--large {
	width: 50px;
	height: 50px;
}

.slider {
	margin-top: clamp(32px, 4vw, 56px);
}

/* Päris kerija: natiivne pühkimine ja puuteplaat töötavad ilma JS-ita. */
.slider__track {
	display: flex;
	gap: var(--gap-slider);
	padding: 0 var(--gutter) 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.slider__track::-webkit-scrollbar {
	display: none;
}

.project-card {
	flex: 0 0 auto;
	width: clamp(268px, 76vw, 430px);
	scroll-snap-align: start;
}

.project-card__cover {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--bone-image);
	text-align: left;
}

.project-card__cover--empty {
	cursor: default;
}

.project-card__zoom {
	position: absolute;
	inset: 0;
	transition: transform 2600ms var(--ease-zoom);
	will-change: transform;
}

.project-card:hover .project-card__zoom {
	transform: scale(1.06);
}

/* Kolm esimest fotot on virnas; nähtav on ainult `.is-active`. */
.project-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 900ms ease;
}

.project-card__photo.is-active {
	opacity: 1;
}

.project-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 35, 26, 0) 45%, rgba(6, 35, 26, .78) 100%);
	pointer-events: none;
}

.project-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 7px 13px;
	background: rgba(6, 35, 26, .62);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--copper-light);
}

.project-card__chip {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	background: rgba(245, 242, 236, .94);
	color: var(--forest-900);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.project-card__caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding: 20px 2px 0;
	border-top: 1px solid var(--on-dark-14);
}

.project-card__name {
	font-weight: 500;
	font-size: clamp(20px, 2vw, 26px);
	letter-spacing: -.015em;
	color: var(--bone);
}

.project-card__name a {
	transition: color 240ms ease;
}

.project-card__name a:hover,
.project-card__name a:focus-visible {
	color: var(--copper-light);
}

.project-card__meta {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--on-dark-50);
	white-space: nowrap;
}

/* Ühik jääb väiketähte: suur M tähendaks SI-s mega-. */
.project-card__meta .unit {
	text-transform: none;
}

/* Kaks arvu ruutmeetritega muutuvad kitsal ekraanil pikaks — seal tohib murduda. */
@media (max-width: 420px) {
	.project-card__meta {
		white-space: normal;
		text-align: right;
	}
}


/* ==========================================================================
   13. Galerii lightbox ja plaadiruudustik
   ========================================================================== */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: flex;
	flex-direction: column;
	background: rgba(4, 22, 16, .96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 340ms ease, visibility 340ms;
}

.lightbox-open .lightbox {
	opacity: 1;
	visibility: visible;
}

.lightbox__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(16px, 2.4vw, 26px) clamp(16px, 4vw, 48px);
	border-bottom: 1px solid var(--on-dark-12);
}

.lightbox__title {
	font-weight: 500;
	font-size: clamp(20px, 2.6vw, 30px);
	color: var(--bone);
}

.lightbox__meta {
	margin-top: 6px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--on-dark-52);
}

.lightbox__scroll {
	overflow-y: auto;
	padding: clamp(16px, 3vw, 40px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 72px);
	scrollbar-width: none;
}

.lightbox__scroll::-webkit-scrollbar {
	display: none;
}

.lightbox__grid,
.tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(10px, 1.4vw, 18px);
}

.lightbox__grid {
	max-width: 1400px;
	margin-inline: auto;
}

.tile-grid {
	margin-top: clamp(32px, 4vw, 56px);
}

.tile {
	aspect-ratio: 3 / 2;
	background: var(--bone-image);
	overflow: hidden;
}

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

/* Iga 5. plaat katab kaks veergu — see rütm ongi ruudustik. Alla 720px on
   veerge ainult üks, kus `span 2` tekitaks tühja teise veeru. */
@media (min-width: 720px) {
	.tile--wide {
		grid-column: span 2;
	}
}


/* ==========================================================================
   14. Meist
   ========================================================================== */

.about {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.about__portrait {
	aspect-ratio: 3 / 4;
	max-height: 860px;
	background: var(--bone-image);
	overflow: hidden;
}

.about__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.about__text .h2 {
	margin-bottom: 26px;
}

.founders {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: var(--gap-cards);
	margin-top: clamp(44px, 6vw, 90px);
}

/* Foto on oma veerus absoluutselt paigutatud, nii et see täidab kaardi kogu
   kõrguse, olenemata sellest, kui pikk kõrvalolev tekst on. */
.founder {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	align-items: stretch;
	background: var(--bone-card);
}

.founder__photo {
	position: relative;
	min-height: 100%;
	overflow: hidden;
	background: var(--bone-image);
}

.founder__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

.founder__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 35, 26, 0) 52%, rgba(6, 35, 26, .72) 100%);
	pointer-events: none;
}

.founder__name {
	position: absolute;
	left: 18px;
	bottom: 16px;
	font-weight: 300;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--bone);
}

.founder__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 34px) clamp(28px, 3.2vw, 40px);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-60);
}

/* Alla 520px jääks 200px portreeveerg liiga kitsaks — foto läheb ribana peale. */
@media (max-width: 520px) {
	.founder {
		grid-template-columns: 1fr;
	}

	.founder__photo {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
}


/* ==========================================================================
   15. Meie lugu
   ========================================================================== */

.story {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: var(--gap-prose);
	align-items: start;
}

.story__image {
	margin-top: clamp(26px, 3vw, 38px);
	aspect-ratio: 3 / 2;
	background: var(--bone-image);
	overflow: hidden;
}

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

.story__right {
	display: flex;
	flex-direction: column;
	gap: clamp(22px, 2.6vw, 30px);
}

.story__lead {
	font-weight: 300;
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.42;
	letter-spacing: -.015em;
}

.story__para {
	font-size: clamp(16px, 1.3vw, 17px);
	line-height: 1.74;
	color: var(--on-dark-78);
}

.timeline {
	margin-top: 6px;
	border-top: 1px solid var(--on-dark-16);
}

.timeline__row {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--on-dark-10);
}

.timeline__year {
	font-size: 22px;
	color: var(--copper-light);
}

.timeline__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--on-dark-74);
}


/* ==========================================================================
   16. Kontakt ja vorm
   ========================================================================== */

.contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	gap: clamp(36px, 5vw, 80px);
	align-items: start;
}

.contact__lead {
	max-width: 44ch;
	margin-top: 26px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-60);
}

.contact__rows {
	margin-top: clamp(30px, 4vw, 46px);
	border-top: 1px solid var(--rule-light);
}

.contact__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 0;
	border-bottom: 1px solid var(--rule-card);
	transition: padding-left 260ms ease, color 260ms ease;
}

.contact__row:hover,
.contact__row:focus-visible {
	padding-left: 8px;
	color: var(--copper-dark);
}

.contact__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-30);
}

.contact__value {
	font-size: clamp(19px, 2vw, 24px);
	color: inherit;
}

.contact__row:not(:hover) .contact__value {
	color: var(--ink);
}

/* --- Vorm ---------------------------------------------------------------- */

.form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(26px, 3.4vw, 44px);
	background: var(--bone-card);
	border: 1px solid var(--rule-card);
}

/* Meepott: peidetud nii, et brauser seda ei näitaks, aga robot selle täidaks. */
.form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 20px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.field__label {
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-40);
}

/* 16px hoiab ära iOS-i automaatse suumi fookuse peale. */
.field__input {
	width: 100%;
	padding: 14px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--rule-input);
	font-size: 16px;
	outline: none;
	transition: border-color 240ms ease;
}

.field__input:focus {
	border-color: var(--copper);
}

.field__input--area {
	resize: vertical;
}

.chips {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	border: 0;
}

.chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Päris märkeruut, visuaalselt peidetud — nii jõuavad väärtused e-kirja
   ja klaviatuur töötab ilma ühegi JS-reata. */
.chips__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.chips__chip {
	display: inline-flex;
	align-items: center;
	padding: 11px 18px;
	border: 1px solid var(--rule-input);
	font-size: 13px;
	letter-spacing: .03em;
	color: var(--ink-60);
	cursor: pointer;
	transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease;
}

.chips__input:checked + .chips__chip {
	background: var(--forest-900);
	border-color: var(--forest-900);
	color: var(--bone);
}

.chips__input:focus-visible + .chips__chip {
	outline: 2px solid var(--copper);
	outline-offset: 3px;
}

.btn--dark {
	align-self: flex-start;
	padding: 17px 32px;
	background: var(--forest-900);
	color: var(--bone);
}

.btn--dark:hover:not(:disabled),
.btn--dark:focus-visible:not(:disabled) {
	background: var(--copper);
	color: var(--forest-900);
}

.btn--dark:disabled {
	background: var(--copper);
	color: var(--forest-900);
	cursor: default;
}

.form__fine {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-30);
}

.form__error {
	padding: 14px 16px;
	border: 1px solid rgba(192, 57, 43, .4);
	font-size: 15px;
	line-height: 1.6;
	color: #8c2a20;
}


/* ==========================================================================
   17. Jalus
   ========================================================================== */

.site-footer {
	background: var(--forest-900);
	color: var(--on-dark-60);
}

.site-footer__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(32px, 4vw, 64px);
	padding-block: clamp(52px, 6vw, 88px) clamp(28px, 3vw, 40px);
}

.site-footer__logo {
	height: 56px;
	width: auto;
}

.site-footer__blurb {
	max-width: 32ch;
	margin-top: 22px;
	font-size: 15px;
	line-height: 1.66;
}

.site-footer__heading {
	margin-bottom: 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--copper-light);
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 15px;
}

.site-footer__list a {
	color: var(--on-dark-72);
	transition: color 240ms ease;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
	color: var(--copper-light);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 22px clamp(30px, 4vw, 48px);
	border-top: 1px solid var(--on-dark-12);
	font-size: 13px;
}


/* ==========================================================================
   18. Projektileht, arhiiv, 404
   Kõik kolm on olemasolevate mustrite kombinatsioonid — uusi värve ega
   kirjasuurusi siin ei ole.
   ========================================================================== */

.projekt__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(72svh, 720px);
	background: var(--forest-900);
	overflow: hidden;
}

.projekt__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.projekt__hero-inner {
	position: relative;
	padding-block: clamp(120px, 18vw, 200px) clamp(40px, 6vw, 72px);
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--on-dark-52);
}

.breadcrumbs a {
	transition: color 240ms ease;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
	color: var(--copper-light);
}

.projekt__title {
	max-width: 17ch;
	font-weight: 300;
	font-size: clamp(34px, 6vw, 72px);
	line-height: 1.06;
	letter-spacing: -.03em;
	color: var(--bone);
	text-wrap: balance;
}

.facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 56px);
	margin-top: clamp(26px, 3vw, 38px);
	padding-top: clamp(22px, 2.6vw, 30px);
	border-top: 1px solid var(--on-dark-16);
}

.facts__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--on-dark-52);
}

.facts__value {
	margin: 8px 0 0;
	font-weight: 300;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--copper-light);
}

.archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(24px, 3vw, 40px);
	margin-top: clamp(32px, 4vw, 56px);
}

/* Arhiivi kaardid ei ole slaideris, seega fikseeritud laius ei kehti. */
.archive__grid .project-card {
	width: auto;
}

.cta {
	background: var(--forest-900);
	color: var(--bone);
	padding-block: var(--section-y-dense);
}

.cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
}

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.error-page__lead {
	max-width: 46ch;
	margin-top: 22px;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.66;
	color: var(--on-dark-78);
}


/* ==========================================================================
   19. Ligipääsetavus ja vähendatud liikumine
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 14px 22px;
	background: var(--forest-900);
	color: var(--bone);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.skip-link:focus {
	left: 0;
}

/* Nähtav fookusrõngas kõigile klaviatuuriga liikujatele. Vaskne, sest
   see on kujunduse aktsentvärv — mitte brauseri vaikimisi sinine. */
:focus-visible {
	outline: 2px solid var(--copper);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

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

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