/*
 * Tema Francesca – stili principali.
 * Struttura: 1 font · 2 variabili · 3 base · 4 griglia · 5 componenti · 6 header e menu · 7 home
 *            8 portfolio · 9 progetto · 10 pagine · 11 footer · 12 animazioni · 13 responsive
 */

/* 1. Font (Unbounded variabile, ospitato nel tema) ---------------------------------------- */
@font-face {
	font-family: "Unbounded";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/unbounded-latin-ext-wght-normal.woff2") format("woff2-variations");
	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: "Unbounded";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations");
	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;
}

/* 2. Variabili ------------------------------------------------------------------------------ */
:root {
	/* Palette: rosa e giallo dal logo, neutri dal layout di riferimento */
	--pink: #e7297c;
	--pink-dark: #c81f69;
	--yellow: #fdcb5d;
	--white: #fff;
	--grey-100: #f5f5f5;
	--grey-200: #efefef;
	--grey-300: #ddd;
	--grey-500: #6d6d6d;
	--grey-700: #444;
	--grey-900: #111;
	--black: #000;

	--font: "Unbounded", Arial, Helvetica, sans-serif;

	/* Scala titoli fluida (360px → 1200px) */
	--fs-140: clamp(64px, 51.43px + 7.381vw, 140px);
	--fs-68: clamp(40px, 30.86px + 3.095vw, 68px);
	--fs-54: clamp(32px, 26.86px + 2.262vw, 54px);
	--fs-50: clamp(31px, 25.71px + 2.024vw, 50px);
	--fs-44: clamp(28px, 24px + 1.667vw, 44px);
	--fs-38: clamp(26px, 22.29px + 1.31vw, 38px);
	--fs-34: clamp(24px, 21.14px + 1.071vw, 34px);
	--fs-28: clamp(21px, 19.43px + .714vw, 28px);
	--fs-26: clamp(20px, 18.86px + .595vw, 26px);

	--pad-x: 80px;
	--fluid-pad: max(var(--pad-x), calc((100vw - 1760px) / 2));
	--boxed: 1280px;
	--gap: 4%;
	--ease-nav: cubic-bezier(.42, .01, .58, 1);
	--ease-slide: cubic-bezier(.21, .6, .35, 1);
}

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

html {
	scrollbar-width: thin;
	scrollbar-color: var(--grey-700) var(--white);
	-webkit-text-size-adjust: 100%;
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-thumb { background: var(--grey-700); }
html::-webkit-scrollbar-track { background: var(--white); }

body {
	margin: 0;
	background: var(--white);
	color: var(--grey-700);
	font-family: var(--font);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.85;
	letter-spacing: .02em;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--grey-900);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}
p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
::selection { background: var(--yellow); color: var(--grey-900); }

a { color: var(--grey-900); }
.prose a,
.link {
	color: var(--grey-900);
	text-decoration: underline dotted 1px;
	text-underline-offset: 2px;
	transition: text-decoration .2s linear, color .2s linear, text-underline-offset .2s linear;
}
.prose a:hover, .prose a:focus-visible,
.link:hover, .link:focus-visible {
	color: var(--pink);
	text-decoration-style: solid;
	text-underline-offset: 4px;
}

:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed; top: 10px; left: 10px; z-index: 100000;
	width: auto; height: auto; padding: 12px 18px;
	clip: auto;
	background: var(--grey-900); color: var(--white);
	font-size: 14px; text-decoration: none;
}

/* 4. Contenitori e griglia ------------------------------------------------------------------- */
.container-fluid { padding-inline: var(--fluid-pad); }
.container-boxed {
	width: 100%;
	max-width: calc(var(--boxed) + 60px);
	margin-inline: auto;
	padding-inline: 30px;
}

/* Colonne in percentuale con gap del 4%: larghezza = P% − gap × (1 − P/100) */
.row {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--gap);
}
.col {
	--w-now: var(--w, 100);
	flex: 0 0 auto;
	width: calc(var(--w-now) * 1% - var(--gap) * (1 - var(--w-now) / 100));
	min-width: 0;
}

/* 5. Componenti ------------------------------------------------------------------------------ */
.eyebrow {
	margin: 0 0 24px;
	color: var(--pink);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.section-title {
	margin: 10px 0 64px;
	font-size: var(--fs-54);
	line-height: 1.2;
}
.section-title--static { color: var(--grey-900); }

.lead { font-size: 22px; font-weight: 400; line-height: 1.6; color: var(--grey-700); letter-spacing: 0; }
.small { font-size: 14px; line-height: 1.72; }

.deco-arrow {
	display: inline-block;
	width: 62px;
	color: var(--grey-900);
	opacity: .1;
	transition: opacity .6s ease, color .6s ease;
}
.deco-arrow:hover { opacity: 1; color: var(--pink); }
.deco-arrow svg { width: 62px; height: 62px; }

.hairline { margin: 80px 0; border: 0; border-top: 1px solid var(--grey-300); }
.hairline--tight { margin: 40px 0; }

/* Pulsanti */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 22px 32px;
	border: 1px solid var(--grey-500);
	border-radius: 0;
	background: var(--white);
	color: var(--grey-900);
	font-family: var(--font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 14px; height: 14px; flex: none; }
.btn:hover, .btn:focus-visible { background: var(--pink); border-color: var(--pink); color: var(--white); }
.btn:hover svg, .btn:focus-visible svg { animation: slide-icon .4s var(--ease-slide); }
.btn--primary { background: var(--pink); border-color: var(--pink); color: var(--white); padding: 24px 32px; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--white); border-color: var(--grey-700); color: var(--grey-900); }
.btn--text { padding: 22px 0; border: 0; background: none; }
.btn--text:hover, .btn--text:focus-visible { background: none; color: var(--pink); }
.btn--small {
	padding: 8px 8px 6px;
	border: 0;
	background: var(--grey-200);
	color: var(--grey-500);
	font-size: 12px;
}
.btn--small:hover, .btn--small:focus-visible { background: var(--grey-900); color: var(--white); }

/* Pulsante con testo che scorre (scheda rapida) */
.btn--slide {
	position: relative;
	overflow: hidden;
	padding: 10px 10px 8px;
	border: 0;
	background: var(--pink);
	color: var(--white);
	font-size: 12px;
}
.btn--slide .btn__label { display: block; transition: transform .4s var(--ease-slide), opacity .4s var(--ease-slide); }
.btn--slide .btn__label--clone { position: absolute; inset: 10px 10px 8px; transform: translateY(-90%); opacity: 0; }
.btn--slide:hover, .btn--slide:focus-visible { background: var(--grey-900); color: var(--white); }
.btn--slide:hover .btn__label:not(.btn__label--clone),
.btn--slide:focus-visible .btn__label:not(.btn__label--clone) { transform: translateY(90%); opacity: 0; }
.btn--slide:hover .btn__label--clone,
.btn--slide:focus-visible .btn__label--clone { transform: translateY(0); opacity: 1; }

/* Etichetta categoria */
.tag {
	display: inline-block;
	padding: 8px;
	background: var(--grey-200);
	color: var(--grey-900);
	font-size: 13px;
	font-weight: 300;
	line-height: 16px;
	letter-spacing: .32px;
	text-decoration: underline dotted 1px;
	text-underline-offset: 2px;
	transition: color .2s linear, background-color .2s linear;
}
.tag:hover, .tag:focus-visible { color: var(--pink); text-decoration-style: solid; }

/* Icone social quadrate */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--grey-200);
	color: var(--grey-500);
	transition: background-color .2s linear, color .2s linear;
}
.socials svg { width: 14px; height: 14px; }
.socials a:hover, .socials a:focus-visible { background: var(--pink); color: var(--white); }

/* Segnaposto immagini */
.placeholder { width: 100%; height: auto; background: #d9d9d9; }

/* Media con ritaglio (cover) */
.media-cover { position: relative; overflow: hidden; background: var(--grey-200); }
.media-cover > img,
.media-cover > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 6. Header e menu --------------------------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 126px;
	padding-block: 40px;
	background: var(--white);
}
.site-logo { display: block; width: 200px; line-height: 0; }
.site-logo img { width: 100%; }

.menu-toggle {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-right: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--grey-900);
	cursor: pointer;
	transition: color .2s linear;
}
.menu-toggle svg { width: 26px; height: 32px; }
.menu-toggle:hover, .menu-toggle:focus-visible { color: var(--pink); }
.menu-toggle .bar { transform-origin: center; transition: transform .3s var(--ease-nav); }
.menu-toggle:hover .bar:nth-child(1) { transform: scaleY(1.4); }
.menu-toggle:hover .bar:nth-child(2) { transform: scaleY(.7); }
.menu-toggle:hover .bar:nth-child(3) { transform: scaleY(1.2); }
.menu-toggle:hover .bar:nth-child(4) { transform: scaleY(.6); }

/* Header delle pagine interne (progetto): logo | menu orizzontale | burger */
.site-header--inner .header-nav { flex: 1; display: flex; justify-content: center; }
.header-nav ul { display: flex; gap: 30px; min-height: 48px; align-items: center; }
.header-nav a {
	color: var(--grey-700);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.85;
	text-decoration: none;
	transition: color .6s var(--ease-nav);
}
.header-nav a:hover, .header-nav a:focus-visible, .header-nav .is-current a { color: var(--pink); }
.site-header--inner .site-logo,
.site-header--inner .header-end { width: 20%; }
.site-header--inner .header-end { display: flex; justify-content: flex-end; }

/* Menu a tutto schermo */
.menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 99990;
	visibility: hidden;
	background: rgba(17, 17, 17, .5);
	opacity: 0;
	transition: opacity .25s, visibility 0s linear 1.2s;
}
.menu-overlay.is-open { visibility: visible; opacity: 1; transition: opacity .25s, visibility 0s; }
.menu-panel {
	display: flex;
	height: 100dvh;
	overflow-y: auto;
	background: var(--grey-900);
	transform: translateY(-100%);
	transition: transform 1.2s cubic-bezier(.25, .1, .25, 1);
	scrollbar-width: none;
}
.menu-panel::-webkit-scrollbar { display: none; }
.menu-overlay.is-open .menu-panel { transform: translateY(0); }
.menu-close {
	position: absolute;
	top: 56px;
	right: var(--pad-x);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--grey-500);
	cursor: pointer;
	transition: color .3s;
}
.menu-close svg { width: 24px; height: 24px; }
.menu-close:hover, .menu-close:focus-visible { color: var(--pink); }
.menu-panel__nav,
.menu-panel__info { width: 50%; padding: 64px var(--pad-x); }
.menu-panel__nav { display: flex; align-items: center; }
.menu-panel__nav ul { display: grid; gap: 24px; }
.menu-panel__nav a {
	color: var(--grey-500);
	font-size: 48px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	transition: color .6s var(--ease-nav);
}
.menu-panel__nav a:hover, .menu-panel__nav a:focus-visible, .menu-panel__nav .is-current a { color: var(--white); }
.menu-panel__nav .is-current a { color: var(--white); }
.menu-panel__nav .is-current a::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 16px; border-radius: 50%; background: var(--yellow); vertical-align: middle; }
.menu-panel__info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	background: #171717;
	color: var(--white);
	text-align: right;
}
.menu-panel__info .site-logo { width: 160px; margin-bottom: 32px; }
.menu-panel__info p { margin: 0; font-size: 16px; line-height: 1.6; }
.menu-panel__info a { color: var(--white); }
.menu-panel__info a:hover { color: var(--yellow); }
.menu-panel__info .copyright { margin-top: 32px; color: var(--grey-500); font-size: 12px; }

/* Torna su */
.to-top {
	position: fixed;
	right: var(--pad-x);
	bottom: 0;
	z-index: 50;
	display: grid;
	place-items: center;
	width: 48px;
	height: 35px;
	padding: 0;
	border: 0;
	background: var(--pink);
	color: var(--white);
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	transition: opacity .4s ease-in-out, background-color .2s;
}
.to-top svg { width: 18px; height: 18px; }
.to-top.is-visible { opacity: .9; pointer-events: auto; }
.to-top:hover, .to-top:focus-visible { background: var(--yellow); color: var(--grey-900); }

/* 7. Homepage -------------------------------------------------------------------------------- */
/* Apertura */
.hero { padding-block: 24px; }
.hero .row { align-items: flex-start; }
.hero__media { --w: 40; align-self: stretch; min-height: 28vw; }
.hero__text { --w: 48; align-self: flex-end; margin-top: 40px; }
.hero__title {
	margin: 10px 0 40px;
	font-size: var(--fs-68);
	line-height: 1.2;
	white-space: pre-line;
}
.hero__text .lead { margin: 0 0 16px 4px; max-width: 30ch; }
.hero__nav { --w: 12; margin-top: 40px; }
.hero__nav ul { display: grid; justify-items: end; gap: 4px; }
.hero__nav a {
	position: relative;
	display: inline-block;
	padding: 4px 4px 4px 0;
	color: var(--grey-700);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	isolation: isolate;
	transition: color .3s var(--ease-nav), padding .3s var(--ease-nav);
}
.hero__nav a::before {
	content: "";
	position: absolute;
	inset: 100% 0 0 -4px;
	z-index: -1;
	background: var(--pink);
	opacity: 0;
	transition: top .3s var(--ease-nav), opacity .3s var(--ease-nav);
}
.hero__nav a:hover, .hero__nav a:focus-visible { color: var(--white); }
.hero__nav a:hover::before, .hero__nav a:focus-visible::before { top: 0; opacity: 1; }

/* Competenze */
.capabilities { padding-block: 64px; }
.section-head { --w: 50; }
.section-head + .col-spacer { --w: 50; }
.col-spacer--30 { --w: 30; }
.col-70 { --w: 70; }

.services { border-top: 0; }
.service {
	display: flex;
	align-items: center;
	min-height: 184px;
	padding: 24px 0;
	border-bottom: 1px solid var(--grey-300);
}
.service:last-child { border-bottom: 0; }
.service__title { width: 50%; padding-left: 16px; transition: transform .3s ease; }
.service__title h3 { margin-top: 20px; font-size: var(--fs-34); }
.service__tags { margin: 18px 8px 8px 2px; color: var(--grey-500); font-size: 14px; line-height: 1.72; }
.service__tags span + span::before { content: "\00a0\00a0\00a0●\00a0\00a0\00a0"; font-size: 10px; vertical-align: 2px; }
.service__media { width: 33.333%; opacity: 0; transition: opacity .6s ease; }
.service__media .media-cover { aspect-ratio: 2 / 1; }
.service__icon { width: 16.667%; display: flex; justify-content: flex-end; padding-right: 16px; transition: opacity .3s ease; }
.service__icon svg { width: 64px; height: 64px; color: var(--grey-500); transition: color .3s ease; }
.service__icon .dot { fill: var(--yellow); }
.service:hover .service__title { transform: translateX(10px); }
.service:hover .service__media { opacity: 1; }
.service:hover .service__icon { opacity: .4; }
.service__icon svg:hover { color: var(--pink); }
.service a { color: inherit; text-decoration: none; }
.service a:hover h3 { color: var(--pink); }

/* Fascia scura */
.statement { background: var(--grey-900); color: var(--white); }
.statement .row { justify-content: center; align-items: center; padding-block: 120px; }
.statement__text { --w: 35; padding: 0 40px; text-align: center; }
.statement__text p {
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.72;
	letter-spacing: .55em;
	text-transform: uppercase;
	white-space: pre-line;
}
.statement__image { --w: 25; position: relative; }
.statement__image .hex {
	aspect-ratio: 480 / 540;
	-webkit-mask: url("../img/hexagon.svg") center / 100% 100% no-repeat;
	mask: url("../img/hexagon.svg") center / 100% 100% no-repeat;
}
.statement__arc { --w: 25; display: flex; justify-content: center; }
.statement__arc svg { width: 125px; height: 250px; overflow: visible; }
.statement__arc text {
	fill: var(--white);
	font-family: var(--font);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .55em;
	text-transform: uppercase;
}

/* Lavori selezionati */
.works-home { padding-top: 120px; }
.works-col { --w: 32; display: grid; gap: 100px; align-content: start; }
.works-col--left { margin-top: 48px; }
.works-col--right { margin-top: 120px; }
.col-spacer--6 { --w: 6; }
.works-more { --w: 70; margin-top: 100px; }

.card { transition: transform .3s ease; }
.card:hover { transform: translateY(-10px); }
.card__media { display: block; aspect-ratio: 870 / 945; cursor: zoom-in; }
.card__head { display: flex; gap: 10px; padding: 24px 8px 0; }
.card__title { font-size: var(--fs-28); line-height: 1.2; }
.card__title a {
	color: var(--grey-900);
	text-decoration: underline dotted 1px;
	text-underline-offset: 2px;
	transition: color .2s linear, text-underline-offset .2s linear;
}
.card__title a:hover, .card__title a:focus-visible { color: var(--pink); text-decoration-style: solid; text-underline-offset: 4px; }
.card__arrow {
	flex: none;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pink);
	cursor: pointer;
	transition: color .2s linear;
}
.card__arrow svg { width: 28px; height: 28px; }
.card__arrow:hover, .card__arrow:focus-visible { color: var(--grey-700); }
.card__meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 8px 24px; }

/* Chi sono (anteprima) */
.studio { padding-block: 80px; }
.studio__badge { --w: 50; display: flex; justify-content: center; padding-top: 64px; }
.badge { position: relative; width: 287px; height: 287px; }
.badge__ring { width: 100%; height: 100%; animation: spin 12s linear infinite; }
.badge__ring text {
	fill: var(--grey-700);
	font-family: var(--font);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1.15em;
	text-transform: uppercase;
}
.badge__mark { position: absolute; top: 50%; left: 50%; width: 80px; transform: translate(-50%, -50%); }
.col-spacer--20 { --w: 20; }
.studio__image { --w: 45; margin-top: 24px; }
.studio__image .media-cover { height: 100%; min-height: 20vw; }
.studio__text { --w: 35; align-self: center; padding: 24px 32px; }
.studio__text p { margin-bottom: 48px; }
.stat { --w: 20; padding: 96px 0 40px; }
.stat__label { min-height: calc(14px * 1.72 * 2 + 24px); margin: 0; padding-bottom: 24px; border-bottom: 1px solid var(--grey-300); font-size: 14px; line-height: 1.72; }
.stat__value { margin-top: 24px; font-size: var(--fs-68); line-height: 1.2; color: var(--grey-900); }

/* Invito al contatto */
.cta { display: flex; background: var(--black); }
.cta__media { width: 45%; display: flex; align-items: flex-end; }
.cta__media > * { width: 100%; }
.cta__media img { width: 100%; height: auto; }
.cta__box-wrap { width: 55%; display: flex; align-items: center; border-left: 16px solid var(--white); }
.cta__box { width: 66.667%; padding: 64px; background: var(--white); }
.cta__box h3 { margin-bottom: 40px; font-size: var(--fs-38); white-space: pre-line; }

/* Articoli */
.news { padding-block: 120px 80px; }
.news-list { --w: 70; margin-top: 24px; display: grid; gap: 100px; }
.news-row { display: flex; align-items: center; }
.news-row__content { width: 55%; padding-right: 64px; }
.news-row__cats { min-height: 30px; color: var(--grey-500); font-size: 13px; }
.news-row__cats a { color: var(--grey-500); }
.news-row__cats a:hover { color: var(--pink); }
.news-row h3 { margin: 8px 0 40px; font-size: var(--fs-26); line-height: 1.4; }
.news-row h3 a { text-decoration: none; }
.news-row h3 a:hover { color: var(--pink); }
.news-row__media { width: 30%; }
.news-row__media .media-cover { display: block; aspect-ratio: 1092 / 1008; }
.news-row__arrow { width: 15%; display: flex; justify-content: center; opacity: .2; transition: opacity .6s ease, transform .6s ease; }
.news-row__arrow svg { width: 50px; height: 50px; color: var(--grey-900); transition: color .2s linear; }
.news-row:hover .news-row__arrow { opacity: 1; transform: scale(1.2); }
.news-row__arrow:hover svg { color: var(--pink); }

/* 8. Portfolio (pagina e filtri) ----------------------------------------------------------- */
.page-head { padding-block: 40px 120px; }
.page-head__title { --w: 65; }
.page-head__title .section-title { margin-bottom: 40px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 80px; }
.filters a {
	padding: 8px 12px;
	background: var(--grey-200);
	color: var(--grey-900);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: .32px;
	text-decoration: none;
	transition: color .2s, background-color .2s;
}
.filters a:hover, .filters a:focus-visible { color: var(--pink); }
.filters a.is-active { background: var(--grey-900); color: var(--white); }
.filters a.is-active::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--yellow); vertical-align: 1px; }

.works-grid { padding-bottom: 56px; }
.works-grid .works-col { --w: 45; }
.works-grid .works-col--left { margin-top: 0; }
.works-grid .works-col--right { margin-top: 80px; }
.col-spacer--10 { --w: 10; }
.card.is-hiding { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.card.is-showing { animation: card-in .45s ease both; }
.works-empty { padding: 40px 0 80px; }

/* Scheda rapida (popup) */
.quickview {
	width: min(800px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	padding: 30px;
	border: 0;
	background: var(--white);
	color: var(--grey-700);
	overflow-y: auto;
}
.quickview::backdrop { background: rgba(0, 0, 0, .8); animation: fade-in .25s ease both; }
.quickview[open] { animation: quickview-in 1s ease both; }
.quickview.is-closing { animation: fade-out .5s ease both; }
.quickview.is-closing::backdrop { animation: fade-out .5s ease both; }
.quickview__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: var(--white);
	color: var(--grey-500);
	cursor: pointer;
}
.quickview__close svg { width: 16px; height: 16px; }
.quickview__close:hover { color: var(--grey-900); }
.quickview__media { aspect-ratio: 1713 / 870; margin-bottom: 24px; }
.quickview h2 { margin-bottom: 16px; font-size: var(--fs-44); }
.quickview h2 a { text-decoration: none; }
.quickview h2 a:hover { color: var(--pink); }
.quickview h6 { margin-bottom: 4px; font-size: 14px; }
.quickview__intro { margin-bottom: 24px; font-size: 14px; }
.quickview__meta { display: flex; margin-bottom: 24px; }
.quickview__meta > div { flex: 1; padding: 0 16px; border-right: 1px solid var(--grey-200); }
.quickview__meta > div:first-child { padding-left: 0; }
.quickview__meta > div:last-child { border-right: 0; }
.quickview__meta h6 { text-transform: capitalize; }
.quickview__meta p { margin: 0; color: var(--grey-900); font-size: 14px; }

/* 9. Progetto -------------------------------------------------------------------------------- */
.project-titlebar { padding-block: 80px; text-align: center; }
.project-titlebar h1 { margin-bottom: 4px; font-size: var(--fs-68); }
.project-titlebar .project-cats { font-size: 18px; line-height: 1.85; }
.project-titlebar .project-cats a { color: var(--pink); text-decoration: underline dotted 1px; text-underline-offset: 2px; transition: color .2s linear; }
.project-titlebar .project-cats a:hover { color: var(--grey-900); text-decoration-style: solid; text-underline-offset: 4px; }

.project-hero { padding-inline: 60px; }
/* La fascia segue le proporzioni dell'immagine (nessun ritaglio dei lavori), entro l'80% dell'altezza della finestra */
.project-hero .media-cover { background: none; }
.project-hero .media-cover > img,
.project-hero .media-cover > svg { position: static; width: 100%; height: auto; max-height: 80vh; object-fit: cover; }

.project-meta .row { justify-content: center; padding-block: 80px; }
.project-meta__item { --w: 25; margin-bottom: 24px; }
.project-meta__item h6 { color: var(--grey-500); font-size: 14px; line-height: 1.5; }
.project-meta__item p {
	margin: 0;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--grey-300);
	color: var(--grey-900);
	font-size: 18px;
	letter-spacing: .32px;
}
.project-meta__item a { color: var(--grey-900); }
.project-meta__item a:hover { color: var(--pink); }

.project-intro .row { padding-bottom: 40px; }
.project-intro h6 { --w: 33.333; margin-top: 4px; color: var(--pink); font-size: 14px; }
.project-intro .lead { --w: 66.667; }

.project-pair { padding: 64px 60px; }
.project-pair .row { align-items: flex-start; }
.project-pair figure { --w: 50; }
.project-pair img { width: auto; max-width: 100%; margin-inline: auto; }
.project-pair .placeholder { width: 100%; }

.project-section { padding-block: 24px; }
.project-section__head { display: flex; align-items: center; gap: 24px; }
.project-section__head h3 { font-size: var(--fs-50); }
.project-section__head h3::first-letter { text-transform: uppercase; }
.project-section__head svg { width: 32px; height: 32px; color: var(--grey-700); }
.project-section__body { --w: 50; margin-top: 40px; padding-top: 16px; }
.col-spacer--40 { --w: 40; }
.project-separator { margin: 56px 0 64px; border: 0; border-top: 1px solid var(--grey-300); }
.project-wide { padding-block: 40px 72px; }
.project-wide img { width: 100%; }
.project-wide--portrait img { width: auto; max-height: 90vh; margin-inline: auto; }

.project-gallery { padding: 40px 60px 80px; }
.project-gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.project-gallery__grid img { width: auto; max-width: 100%; margin-inline: auto; }
.project-gallery__grid .is-wide { grid-column: 1 / -1; }

.project-back { display: none; padding-bottom: 40px; }

/* Navigazione precedente / successivo fissa ai lati */
.sticky-nav {
	position: fixed;
	top: 50%;
	z-index: 40;
	display: flex;
	align-items: center;
	width: 200px;
	height: 80px;
	border: 1px solid var(--grey-300);
	background: var(--grey-100);
	color: var(--grey-900);
	text-decoration: none;
	transition: transform .3s ease-in;
}
.sticky-nav:hover, .sticky-nav:focus-visible { transition-timing-function: ease-out; }
.sticky-nav--prev { left: 0; border-left: 0; transform: translate(-150px, -50%); }
.sticky-nav--next { right: 0; flex-direction: row-reverse; border-right: 0; transform: translate(150px, -50%); }
.sticky-nav:hover, .sticky-nav:focus-visible { transform: translate(0, -50%); }
.sticky-nav__text {
	flex: 1;
	padding: 0 12px;
	font-size: 12px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-decoration: underline dotted 1px;
	text-underline-offset: 2px;
}
.sticky-nav__text svg { display: inline-block; width: 1em; height: 1em; vertical-align: -2px; }
.sticky-nav__thumb { flex: none; width: 50px; height: 100%; }
.sticky-nav__thumb > * { width: 100%; height: 100%; object-fit: cover; }

/* 10. Pagine (chi sono, contatti, testi) -------------------------------------------------- */
.band-fixed { height: 700px; background-color: var(--grey-200); background-position: center; background-size: cover; background-attachment: fixed; }
.band-fixed .placeholder,
.band-fixed .media-cover { height: 100%; }

.features .row { padding-block: 96px; }
.feature { --w: 33.333; }
.feature svg { width: 40px; height: 40px; margin-bottom: 24px; color: var(--pink); }
.feature svg .dot { fill: var(--yellow); }
.feature h4 { margin-bottom: 16px; font-size: 18px; text-transform: uppercase; }

.about-band { padding-block: 120px; background: var(--grey-100); }
.about-band .row { align-items: center; }
.about-band__text { --w: 55; }
.about-band__quote { margin-bottom: 48px; font-size: var(--fs-38); }
.about-band__stat { display: flex; gap: 40px; align-items: flex-start; }
.about-band__stat strong { color: var(--grey-900); font-size: 60px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.about-band__stat h5 { margin-bottom: 12px; font-size: 20px; line-height: 1.5; }
.about-band__image { --w: 41; }
.about-band__image figcaption { margin-top: 12px; color: var(--grey-900); font-size: 16px; text-align: right; }

.five-w { padding-block: 120px 80px; }
.five-w .service__title { width: 25%; }
.five-w .service__title h3 { margin-top: 0; }
.five-w .service__text { width: 75%; padding-right: 16px; }
.five-w .service { min-height: 0; padding-block: 32px; }
.five-w__cta { margin-top: 48px; }
.col-spacer--4 { --w: 4; }

.marquee { overflow: hidden; margin-bottom: 120px; padding-block: 40px; border-block: 1px solid var(--grey-300); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee__track span { padding-inline: 32px; color: var(--grey-900); font-size: var(--fs-34); white-space: nowrap; }
.marquee__track span::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 64px; border-radius: 50%; background: var(--yellow); vertical-align: middle; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.contact-section { margin-bottom: 120px; background: #0d0d0d; color: var(--white); }
.contact-section .row { padding-block: 88px 120px; }
.contact-section__info { --w: 30; }
.contact-section__info h4 { margin-bottom: 24px; color: var(--white); font-size: var(--fs-26); }
.contact-section__info p { margin-bottom: 8px; }
.contact-section__info a { color: var(--white); }
.contact-section__info a:hover { color: var(--yellow); }
.contact-section__social { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 32px; }
.contact-section__social a { color: rgba(222, 222, 222, .5); font-size: 14px; font-weight: 500; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.contact-section__social a:hover { color: var(--white); }
.contact-section__form { --w: 56; margin-left: auto; }

/* Modulo HappyForms con lo stile del tema (solo bordo inferiore, sfondo scuro).
   Il prefisso #contenuto serve a vincere sulle variabili che HappyForms imposta sull'ID del modulo. */
#contenuto .contact-section .happyforms-styles {
	--happyforms-part-title-font-size: 13px;
	--happyforms-part-description-font-size: 13px;
	--happyforms-part-value-font-size: 14px;
	--happyforms-submit-button-font-size: 14px;
	--happyforms-color-primary: var(--pink);
	--happyforms-color-part-title: rgba(255, 255, 255, .7);
	--happyforms-color-part-value: var(--white);
	--happyforms-color-part-placeholder: rgba(255, 255, 255, .5);
	--happyforms-color-part-description: rgba(255, 255, 255, .6);
	--happyforms-color-part-border: var(--grey-500);
	--happyforms-color-part-border-focus: var(--white);
	--happyforms-color-part-background: transparent;
	--happyforms-color-part-background-focus: transparent;
	--happyforms-color-submit-background: var(--pink);
	--happyforms-color-submit-background-hover: var(--white);
	--happyforms-color-submit-border: var(--pink);
	--happyforms-color-submit-text: var(--white);
	--happyforms-color-submit-text-hover: var(--grey-900);
	--happyforms-color-error: var(--yellow);
	--happyforms-color-error-notice: rgba(253, 203, 93, .12);
	--happyforms-color-error-notice-text: var(--yellow);
	--happyforms-color-success-notice: rgba(253, 203, 93, .12);
	--happyforms-color-success-notice-text: var(--white);
	--happyforms-color-choice-checkmark-bg: transparent;
	--happyforms-color-choice-checkmark-bg-focus: var(--pink);
	--happyforms-color-choice-checkmark-color: var(--white);
	margin: 0;
	font-family: var(--font);
}
#contenuto .contact-section .happyforms-flex { row-gap: 32px; }
#contenuto .contact-section .happyforms-part { margin-bottom: 0; }
#contenuto .contact-section .happyforms-part--submit { display: flex; flex-direction: column; align-items: flex-start; }
#contenuto .contact-section .fb-turnstile { min-height: 65px; margin-bottom: 16px; }
#contenuto .contact-section .fb-turnstile__error { margin: 0 0 16px; color: var(--yellow); font-size: 13px; }
#contenuto .contact-section .happyforms-part__label { font-family: var(--font); font-weight: 300; letter-spacing: .02em; }
#contenuto .contact-section .happyforms-part input[type=text],
#contenuto .contact-section .happyforms-part input[type=email],
#contenuto .contact-section .happyforms-part textarea {
	height: 56px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--happyforms-color-part-border);
	border-radius: 0;
	background: transparent;
	color: var(--white);
	font-family: var(--font);
	font-weight: 300;
	box-shadow: none;
	transition: border-color .2s;
}
#contenuto .contact-section .happyforms-part textarea { height: 165px; padding-top: 16px; resize: vertical; }
#contenuto .contact-section .happyforms-part input:focus,
#contenuto .contact-section .happyforms-part textarea:focus { border-bottom-color: var(--white); outline: 0; }
#contenuto .contact-section .happyforms-part a { color: var(--white); }
#contenuto .contact-section .happyforms-part--legal,
#contenuto .contact-section .happyforms-part--checkbox,
#contenuto .contact-section .happyforms-part--legal label { color: rgba(255, 255, 255, .7); font-size: 13px; }
#contenuto .contact-section .happyforms-form .happyforms-button--submit,
#contenuto .contact-section .happyforms-form button[type=submit] {
	margin-top: 8px;
	padding: 24px 32px;
	border: 1px solid var(--pink);
	border-radius: 0;
	font-family: var(--font);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color .2s, color .2s, border-color .2s;
}
#contenuto .contact-section .happyforms-form .happyforms-button--submit:hover,
#contenuto .contact-section .happyforms-form button[type=submit]:hover { border-color: var(--white); }

.prose-page { padding-bottom: 120px; }
.prose { max-width: 820px; }
.prose h2 { margin: 48px 0 20px; font-size: var(--fs-34); }
.prose h3 { margin: 40px 0 16px; font-size: var(--fs-26); }
.prose h4 { margin: 32px 0 12px; font-size: 18px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 1.2em; }
.prose ul { list-style: disc; }
.prose li::marker { color: var(--pink); }
.prose img { margin-block: 32px; }
.prose blockquote { margin: 32px 0; padding-left: 24px; border-left: 3px solid var(--yellow); color: var(--grey-900); font-size: 20px; line-height: 1.6; }

/* 11. Footer --------------------------------------------------------------------------------- */
.site-footer { padding-top: 0; }
.footer-cta { margin-bottom: 88px; }
.footer-cta__title { color: var(--grey-900); font-size: var(--fs-140); font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: uppercase; }
/* Una parola sola non può andare a capo: su schermi stretti il titolo si rimpicciolisce per stare nella riga
   (il JavaScript lo adatta con precisione anche a testi diversi da "Parliamone"). */
@media (max-width: 820px) {
	.footer-cta__title { font-size: min(var(--fs-140), calc((100vw - 2 * var(--pad-x)) / 8.4)); }
}
.footer-cta__subtitle { margin: 0 0 0 10px; color: var(--grey-700); font-size: var(--fs-26); font-weight: 300; line-height: 1.6; letter-spacing: .02em; }

.footer-brand { --w: 28; }
.footer-brand .site-logo { width: 180px; margin-bottom: 16px; }
.col-spacer--22 { --w: 22; }
.footer-menu { --w: 16; }
.footer-contact { --w: 34; color: var(--grey-700); font-size: 20px; font-weight: 400; line-height: 1.6; letter-spacing: 0; }
.footer-contact p { margin: 0; }
.footer-contact a { color: var(--grey-900); text-decoration: underline dotted 1px; text-underline-offset: 2px; }
.footer-contact a:hover { color: var(--pink); text-decoration-style: solid; }

.footer-menu ul { display: grid; gap: 18px; justify-items: start; }
.footer-menu a {
	display: inline-block;
	padding: 4px 0 5px;
	border-bottom: 1px solid transparent;
	color: var(--grey-700);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .6s var(--ease-nav), border-color .6s var(--ease-nav);
}
.footer-menu a:hover, .footer-menu a:focus-visible, .footer-menu .is-current a { border-color: var(--grey-500); color: var(--pink); }

.quick-contact { display: flex; align-items: center; margin-top: 16px; padding-left: 16px; background: var(--grey-200); }
.quick-contact input {
	flex: 1;
	min-width: 0;
	height: 54px;
	padding: 0 14px 0 0;
	border: 0;
	background: transparent;
	color: var(--grey-900);
	font-family: var(--font);
	font-size: 14px;
	outline: 0;
}
.quick-contact input::placeholder { color: rgba(109, 109, 109, .7); }
.quick-contact button {
	display: grid;
	place-items: center;
	width: 64px;
	height: 54px;
	margin: 16px 16px 16px 0;
	padding: 0;
	border: 0;
	background: var(--grey-700);
	color: var(--white);
	cursor: pointer;
	transition: background-color .2s;
}
.quick-contact button svg { width: 14px; height: 14px; }
.quick-contact button:hover, .quick-contact button:focus-visible { background: var(--pink); }
.quick-contact__caption { margin: 16px 0 0; font-size: 12px; line-height: 1.85; }

.footer-sep { margin: 40px 0; border: 0; border-top: 1px solid var(--grey-300); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.footer-bottom .copyright { max-width: 650px; margin: 0; font-size: 14px; line-height: 2; }
.footer-bottom .copyright a { color: var(--grey-900); text-decoration: underline dotted 1px; }
.footer-bottom .copyright a:hover { color: var(--pink); }

/* Variante scura (pagine progetto) */
.site-footer--dark { margin-top: 0; background: var(--grey-900); color: var(--grey-300); }
.site-footer--dark .container-boxed { padding-block: 112px 40px; }
.site-footer--dark .footer-cta { margin-bottom: 120px; text-align: center; }
.site-footer--dark .footer-cta__title { color: var(--white); }
.site-footer--dark .footer-cta__subtitle { margin-left: 0; color: var(--grey-300); }
.site-footer--dark .footer-contact { --w: 30; color: var(--grey-300); }
.site-footer--dark .footer-contact a { color: var(--grey-300); }
.site-footer--dark .footer-contact a:hover { color: var(--pink); }
.site-footer--dark .footer-contact .socials { margin-top: 16px; }
.site-footer--dark .socials a { background: rgba(68, 68, 68, .3); color: var(--grey-500); }
.site-footer--dark .socials a:hover { background: var(--pink); color: var(--white); }
.site-footer--dark .col-spacer--16 { --w: 16; }
.site-footer--dark .footer-menu { --w: 18; }
.site-footer--dark .footer-menu ul { gap: 22px; }
.site-footer--dark .footer-menu a { color: var(--grey-300); border-color: var(--grey-900); }
.site-footer--dark .footer-menu a:hover { color: var(--pink); border-color: var(--grey-500); }
.site-footer--dark .footer-brand { --w: 36; }
.site-footer--dark .quick-contact__caption { color: var(--grey-300); }
.site-footer--dark .footer-sep { border-color: var(--grey-700); }
.site-footer--dark .footer-bottom { justify-content: center; margin-bottom: 0; text-align: center; }
.site-footer--dark .copyright { color: var(--grey-500); }
.site-footer--dark .copyright a { color: var(--grey-300); }
.site-footer--dark .footer-contact .site-logo { display: none; }

/* 12. Animazioni ----------------------------------------------------------------------------- */
@keyframes slide-icon {
	0% { transform: translateX(0); }
	25% { opacity: 0; }
	26% { transform: translateX(1.25em); }
	27% { transform: translateX(-1.25em); }
	75% { opacity: 1; }
	100% { transform: translateX(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes quickview-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes reveal-block {
	0% { top: 0; bottom: auto; height: 0; }
	45% { top: 0; bottom: auto; height: 100%; }
	55% { top: auto; bottom: 0; height: 100%; }
	100% { top: auto; bottom: 0; height: 0; }
}
@keyframes reveal-content { 0%, 49% { visibility: hidden; } 50%, 100% { visibility: visible; } }

/* Le animazioni d'ingresso partono solo se il JavaScript è attivo */
.js [data-animate] { visibility: hidden; }
.js [data-animate].is-in { visibility: visible; }
.js [data-animate="fade-left"].is-in { animation: fade-in-left 2s ease .5s both; }
.js [data-animate="reveal-down"] { visibility: visible; }
.js [data-animate="reveal-down"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 0;
	z-index: 2;
	background: #1f1f1f;
}
.js [data-animate="reveal-down"] > * { visibility: hidden; }
.js [data-animate="reveal-down"].is-in::after { animation: reveal-block 2s cubic-bezier(.1, .5, .5, .9) .5s both; }
.js [data-animate="reveal-down"].is-in > * { animation: reveal-content 2s cubic-bezier(.1, .5, .5, .9) .5s both; }

/* Titoli che si colorano lettera per lettera durante lo scorrimento */
.reveal .w { display: inline-block; white-space: nowrap; }
.js .reveal .ch {
	/* margine interno compensato: lo sfondo copre anche le parti di lettera che sporgono dal proprio spazio */
	padding-inline: .2em;
	margin-inline: -.2em;
	color: transparent;
	background-image: linear-gradient(to right, var(--reveal-to, var(--grey-900)) 50%, var(--reveal-from, var(--grey-300)) 50%);
	background-size: 200% 100%;
	background-position-x: 100%;
	-webkit-background-clip: text;
	background-clip: text;
}
.js .reveal .ch.is-done { background: none; color: var(--reveal-to, var(--grey-900)); }
.site-footer--dark .reveal { --reveal-from: var(--grey-700); --reveal-to: var(--white); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.js [data-animate], .js [data-animate] > * { visibility: visible !important; }
	.js .reveal .ch { background-position-x: 0 !important; }
}

/* 13. Responsive ----------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	:root { --pad-x: 30px; }
	.site-header--inner .site-logo { width: 200px; }
	.section-head { --w: 80; margin-bottom: 56px; }
	.section-head + .col-spacer,
	.col-spacer--30,
	.col-spacer--6,
	.col-spacer--22 { display: none; }
	.col-70, .news-list, .works-more { --w: 100; }
	.hero__media { --w: 50; }
	.hero__text { --w: 46; }
	.hero__nav { --w: 100; }
	.hero__nav ul { justify-items: start; display: flex; flex-wrap: wrap; gap: 4px 16px; }
	.works-col { --w: 48; }
	.works-grid .works-col { --w: 48; }
	.col-spacer--10 { display: none; }
	.studio__image { --w: 55; }
	.studio__text { --w: 41; }
	.col-spacer--20 { display: none; }
	.stat { --w: 30.666; text-align: center; }
	.statement__text { --w: 40; padding: 0 16px; }
	.statement__image { --w: 28; }
	.statement__arc { --w: 20; }
	.project-hero, .project-pair, .project-gallery { padding-inline: 30px; }
	.project-titlebar { padding-block: 56px; }
	.project-meta__item { --w: 33.333; }
	.project-pair figure { --w: 100; margin-bottom: 64px; }
	.project-pair figure:last-child { margin-bottom: 0; }
	.col-spacer--40 { display: none; }
	.project-section__body { --w: 100; }
	.cta__media { width: 50%; }
	.cta__box-wrap { width: 50%; }
	.cta__box { width: 85%; padding: 48px; }
	.footer-brand { --w: 100; margin-bottom: 64px; }
	.footer-menu { --w: 48; padding-left: 0; }
	.footer-contact { --w: 48; }
	.site-footer--dark .footer-contact { --w: 48; }
	.site-footer--dark .col-spacer--16 { display: none; }
	.site-footer--dark .footer-menu { --w: 48; }
	.site-footer--dark .footer-brand { --w: 100; order: -1; }
	.about-band__text, .about-band__image { --w: 100; }
	.about-band__image { margin-top: 64px; max-width: 480px; }
	.contact-section__info { --w: 100; margin-bottom: 64px; }
	.contact-section__form { --w: 100; }
	.five-w .service__title { width: 30%; }
	.five-w .service__text { width: 70%; }
	.menu-panel__nav, .menu-panel__info { padding: 72px 24px; }
}

@media (max-width: 820px) {
	.col { --w-now: 100; }
	.site-header { min-height: 0; padding-block: 30px; }
	.site-logo { width: 170px; }
	.site-header--inner .header-nav { display: none; }
	.site-header--inner .site-logo, .site-header--inner .header-end { width: 50%; }
	.site-header--inner .site-logo { width: 170px; }

	.hero { padding-top: 0; text-align: center; }
	.hero__media { aspect-ratio: 800 / 750; min-height: 0; margin-bottom: 64px; }
	.hero__text { margin-top: 0; }
	.hero__text .lead { margin-inline: auto; }
	.hero__nav { display: none; }

	.section-head { margin-bottom: 0; }
	.service { flex-wrap: wrap; margin-bottom: 0; }
	.service__title { width: 100%; padding-left: 0; }
	.service__media { display: none; }
	.service__icon { order: -1; width: 100%; justify-content: flex-start; padding: 0; }
	.service__icon svg { width: 48px; height: 48px; }
	.five-w .service__title, .five-w .service__text { width: 100%; padding-right: 0; }
	.five-w .service__text { margin-top: 16px; }

	.statement .row { padding-block: 96px; row-gap: 80px; }
	.statement__image { max-width: 330px; margin-inline: auto; }
	.statement__arc { display: none; }

	.works-home { padding-top: 96px; }
	.works-col--left, .works-col--right { margin-top: 0; }
	.works-col--right { margin-top: 100px; }
	.works-grid .works-col--right { margin-top: 100px; }
	.works-more { margin-top: 80px; }
	.card:hover { transform: none; }

	.studio__badge { padding-top: 0; margin-bottom: 40px; }
	.badge { width: 220px; height: 220px; }
	.studio__image .media-cover { min-height: 60vw; }
	.studio__text { padding: 40px 0 0; }
	.stat { text-align: left; padding: 64px 0 0; }

	.cta { flex-direction: column; }
	.cta__media, .cta__box-wrap { width: 100%; }
	.cta__box-wrap { border-left: 0; }
	.cta__box { width: 100%; padding: 48px 30px; }

	.news-row { flex-direction: column; align-items: stretch; }
	.news-row__content { width: 100%; padding-right: 0; }
	.news-row h3 { margin-bottom: 24px; }
	.news-row__media { width: 100%; margin-top: 32px; }
	.news-row__arrow { display: none; }
	.news-list { gap: 80px; }

	.page-head { padding-bottom: 64px; }
	.filters { margin-bottom: 56px; }

	.project-pair { padding-block: 40px; }
	.project-pair figure { margin-bottom: 40px; }
	.project-meta .row { padding-block: 48px; }
	.project-section__head h3 { font-size: var(--fs-50); }
	.project-gallery__grid { grid-template-columns: 1fr; gap: 40px; }
	.sticky-nav { display: none; }
	.project-back { display: block; }

	.quickview { padding: 20px; }
	.quickview__meta { flex-direction: column; gap: 16px; }
	.quickview__meta > div { padding: 0; border-right: 0; }

	.band-fixed { height: 420px; background-attachment: scroll; }
	.features .row { padding-block: 64px; row-gap: 48px; }

	.footer-cta { margin-bottom: 64px; }
	.footer-menu { margin-bottom: 64px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.site-footer--dark .footer-cta { text-align: left; margin-bottom: 96px; }
	.site-footer--dark .footer-brand { order: 0; }
	.site-footer--dark .footer-brand .site-logo { display: none; }
	.site-footer--dark .footer-contact { margin-bottom: 64px; }
	.site-footer--dark .footer-contact .site-logo { display: block; margin-bottom: 24px; }
	.site-footer--dark .footer-bottom { align-items: center; }

	.menu-panel { flex-direction: column; }
	.menu-panel__nav, .menu-panel__info { width: 100%; padding: 96px 24px 48px; }
	.menu-panel__info { flex: 1; align-items: flex-start; text-align: left; background: #0d0d0d; padding-top: 48px; }
	.menu-panel__nav a { font-size: 36px; }
	.menu-close { top: 24px; right: 24px; }
	.menu-panel { transition-duration: .9s; }
	.to-top { display: none; }

	.contact-section .happyforms-part--width-half { width: 100%; }
}

@media (hover: none) {
	.service__media { display: none; }
	.card:hover { transform: none; }
}