/*
 * Intento: warm, quiet, editorial. Very large type next to very small type, full-bleed
 * images that move slower than the page (assets/site.js), lots of space.
 */

@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/inter-tight-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;
}
@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/inter-tight-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;
}

:root {
	--bg: #efebe4;
	--bg-alt: #e5dfd5;
	--ink: #1f1d1a;
	--muted: #77716a;
	--line: rgba(31, 29, 26, .16);
	--stone: #a8a294;
	--on-dark: #efebe4;
	--on-dark-muted: rgba(239, 235, 228, .58);

	--gutter: clamp(1rem, 3.2vw, 3rem);
	--wide: 1600px;
	--text: 44rem;
	--header: 5rem;
	--ease: cubic-bezier(.2, .7, .2, 1);

	--fs-small: .75rem;
	--fs-body: clamp(1rem, .95rem + .2vw, 1.0625rem);
	--fs-lead: clamp(1.3rem, 1rem + 1.2vw, 1.85rem);
	--fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	--fs-big: clamp(2.4rem, 1rem + 5.6vw, 6.75rem);
	--fs-huge: clamp(3rem, 1rem + 9vw, 10.5rem);

	font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 100%;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: var(--fs-body); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem 1rem; z-index: 100; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Small type: labels, captions, menus. */
.eyebrow, .section-label, .site-nav a, .nav-toggle, .hero__caption, .project-card__meta,
.project__facts dt, .project__subtitle, .project__nav span, .float span, .lang-switch {
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* ---------- Header ---------- */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	color: var(--ink);
	transition: background-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
.site-header__inner {
	max-width: var(--wide);
	margin: 0 auto;
	height: var(--header);
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.has-hero .site-header:not(.is-scrolled) { color: #fff; }
.site-header.is-scrolled { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-title { display: block; flex: none; text-decoration: none; }
.site-title img { max-height: 3rem; width: auto; }
.site-logo {
	display: block;
	width: 6.75rem;
	aspect-ratio: 640 / 256;
	background: currentColor;
	-webkit-mask: url("logo.png") no-repeat center / contain;
	mask: url("logo.png") no-repeat center / contain;
}

.site-nav { display: flex; align-items: center; gap: 2.5rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav .menu { display: flex; gap: 1.75rem; }
.site-nav .menu > li { position: relative; }
.site-nav a { text-decoration: none; display: inline-block; padding: .35rem 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.site-nav a:hover, .site-nav [aria-current="page"], .site-nav .current-menu-item > a { background-size: 100% 1px; }
.site-nav .sub-menu {
	position: absolute; top: 100%; left: -1rem; min-width: 15rem;
	padding: .75rem 1rem; background: var(--bg); color: var(--ink);
	box-shadow: 0 10px 30px rgba(31, 29, 26, .08);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .25s, transform .25s var(--ease), visibility .25s;
}
.site-nav li:hover > .sub-menu, .site-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.lang-switch { display: flex; gap: .75rem; }
.lang-switch a { opacity: .5; }
.lang-switch [aria-current] { opacity: 1; }

.nav-toggle { display: none; }

@media (max-width: 899px) {
	.nav-open .site-title { position: relative; z-index: 2; }
	.js .nav-toggle {
		display: block; position: relative; z-index: 2;
		background: none; border: 0; padding: .5rem 0; color: inherit; font-family: inherit; cursor: pointer;
	}
	.nav-toggle__close, .nav-open .nav-toggle__open { display: none; }
	.nav-open .nav-toggle__close { display: inline; }
	.js .site-nav {
		position: fixed; inset: 0; z-index: 1;
		flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2.5rem;
		padding: calc(var(--header) + 2rem) var(--gutter) 2.5rem;
		background: var(--ink); color: var(--on-dark);
		opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
		overflow-y: auto;
	}
	.nav-open .site-nav { opacity: 1; visibility: visible; }
	.nav-open .site-header { color: var(--on-dark); background: transparent; box-shadow: none; }
	.nav-open { overflow: hidden; }
	.js .site-nav .menu { flex-direction: column; gap: .25rem; }
	.js .site-nav .menu > li > a {
		font-size: clamp(2.25rem, 10vw, 3.5rem); text-transform: none; letter-spacing: -.03em; line-height: 1.1; font-weight: 400;
	}
	.js .site-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		background: none; color: var(--on-dark-muted); box-shadow: none; padding: 0 0 .5rem; min-width: 0;
		display: flex; flex-wrap: wrap; gap: 0 1.25rem;
	}
	/* Without JavaScript the menu simply wraps under the logo. */
	html:not(.js) .site-header__inner { height: auto; flex-wrap: wrap; padding-block: 1rem; }
	html:not(.js) .site-nav, html:not(.js) .site-nav .menu { flex-wrap: wrap; gap: .75rem 1.25rem; }
	html:not(.js) .site-header { position: absolute; }
}

/* ---------- Layout ---------- */
.site-main { min-height: 60vh; }
body:not(.has-hero) .site-main { padding-top: var(--header); }
.page-header, .entry-content, .portfolio, .home-section, .home-work, .project__body, .project__nav {
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Parallax image: the picture is taller than its frame and slides inside it. */
.parallax { position: relative; overflow: hidden; background: var(--bg-alt); }
.parallax img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }

/* ---------- Home ---------- */
.hero { position: relative; z-index: 3; height: 100vh; height: 100svh; min-height: 34rem; color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(20, 18, 15, .35), rgba(20, 18, 15, 0) 28%, rgba(20, 18, 15, .05) 55%, rgba(20, 18, 15, .5));
}
.hero__content {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: flex-end;
	max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) var(--gutter);
}
.hero__caption {
	order: 2;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
	margin: 0; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .45);
}
.hero__caption span:nth-child(2) { text-align: center; }
.hero__caption span:last-child { text-align: right; }
.hero__wordmark {
	order: 1;
	margin: 0 0 .04em -.04em;
	font-size: clamp(5rem, 35.5vw, 48rem);
	font-weight: 500;
	line-height: .78;
	letter-spacing: -.065em;
	white-space: nowrap;
}

.statement {
	position: relative;
	max-width: var(--wide);
	margin: 0 auto;
	padding: clamp(7rem, 16vw, 14rem) var(--gutter);
	min-height: 165vh;
	display: flex; align-items: center; justify-content: center;
}
.statement__text { position: relative; z-index: 2; max-width: min(8.5em, 62vw); font-size: var(--fs-big); text-align: center; }
.statement__title { font-size: 1em; line-height: .98; letter-spacing: -.045em; margin: 0; }
.statement__lede { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .09em; font-weight: 500; max-width: 26rem; margin: 2.5rem auto 0; line-height: 1.6; }
.statement__images { position: absolute; inset: 0; pointer-events: none; }
.float { position: absolute; display: block; text-decoration: none; pointer-events: auto; }
.float img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.float span { display: block; margin-top: .6rem; }
.float--1 { width: clamp(9rem, 26vw, 28rem); top: 2%; left: var(--gutter); }
.float--2 { width: clamp(8rem, 20vw, 22rem); top: 6%; right: 14%; }
.float--3 { width: clamp(8rem, 22vw, 24rem); bottom: 6%; left: 9%; }
.float--4 { width: clamp(9rem, 27vw, 29rem); bottom: 2%; right: var(--gutter); }
.float--5 { width: clamp(7rem, 15vw, 17rem); bottom: 12%; left: 43%; }

.home-section, .home-work { padding-block: clamp(4rem, 9vw, 8rem); }
.section-label {
	display: flex; gap: 2rem;
	margin: 0 0 clamp(2.5rem, 6vw, 5rem); padding-top: 1rem;
	border-top: 1px solid var(--line);
}
.section-label span { color: var(--muted); min-width: 2rem; }
.home-section__intro { max-width: var(--text); margin-bottom: 3rem; }

.big-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.big-list li {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: start;
	padding: clamp(1.5rem, 3vw, 2.75rem) 0; border-bottom: 1px solid var(--line);
}
.big-list h3 { margin: 0; font-size: var(--fs-big); line-height: .95; letter-spacing: -.045em; }
.item-text { color: var(--muted); max-width: 30rem; }
.big-list .item-text { padding-top: .45em; } /* Level with the top of the large letters. */
.item-text p { margin: 0; }
.item-text p + p { margin-top: 1em; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem clamp(1.25rem, 3vw, 3rem); }
.steps li { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.steps .item-number { display: block; font-size: var(--fs-huge); font-weight: 300; line-height: .85; letter-spacing: -.06em; color: var(--stone); margin-bottom: 1.5rem; }
.steps h3 { font-size: 1.3rem; margin: 0 0 .6rem; letter-spacing: -.01em; }

.image-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 3rem); margin-top: clamp(7rem, 16vw, 14rem); align-items: start; }
.image-strip__item { margin: 0; }
.image-strip__item:nth-child(3n+2) { margin-top: clamp(3rem, 10vw, 9rem); }
.image-strip__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.home-work .wp-block-paragraph, .home-work > p { margin: clamp(3rem, 6vw, 5rem) 0 0; text-align: center; }
.home-work a[href]:not(.project-card a), .link-arrow {
	font-size: var(--fs-lead); text-decoration: none; letter-spacing: -.02em;
	border-bottom: 1px solid currentColor; padding-bottom: .15em;
}
.home-work a[href]:not(.project-card a)::after, .link-arrow::after { content: " →"; }

/* ---------- Pages ---------- */
.page-header { padding-top: clamp(3.5rem, 10vw, 9rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.eyebrow { margin: 0 0 1.5rem; color: var(--muted); }
.page-title {
	margin: 0; font-size: var(--fs-huge); line-height: .9; letter-spacing: -.055em;
	overflow-wrap: break-word; hyphens: auto;
}
.page-title sup { font-size: .16em; font-weight: 400; letter-spacing: .02em; vertical-align: top; margin-left: .4em; position: relative; top: .55em; }

.page-banner { height: clamp(18rem, 72vh, 52rem); margin-bottom: clamp(3rem, 8vw, 7rem); }

.entry-content { padding-bottom: clamp(4rem, 9vw, 8rem); }
.entry-content > * { max-width: var(--text); }
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 { font-size: var(--fs-h2); letter-spacing: -.03em; margin: 2.2em 0 .7em; }
.entry-content h3 { font-size: 1.25rem; letter-spacing: -.01em; margin: 2em 0 .5em; }
.entry-content > h2:first-child { font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -.02em; }
.entry-content ul, .entry-content ol { padding-left: 1.2em; }
.entry-content li + li { margin-top: .35em; }
.entry-content em:only-child { color: var(--muted); font-size: .9em; }
.entry-content > .wp-block-gallery, .entry-content > .project-grid { max-width: none; }
.wp-block-image { margin: 2.5rem 0; }
.wp-block-image img { width: 100%; }
.entry-content .wp-block-image img[src*=".png"] { width: 4.5rem; } /* Line icons on the services page. */
.wp-block-image figcaption { font-size: var(--fs-small); color: var(--muted); margin-top: .6rem; }

/* Wider screens: the text sits to the right of a margin, like a printed page. */
@media (min-width: 1000px) {
	.entry .entry-content > *, .project__body .entry-content > * { margin-left: 30%; }
	.entry .entry-content > .wp-block-gallery, .project__body .entry-content > .wp-block-gallery { margin-left: 0; }
}

/* Galleries: a full-width picture, then two offset ones, and again. */
.wp-block-gallery {
	display: grid; grid-template-columns: repeat(12, 1fr);
	gap: clamp(1.5rem, 5vw, 5rem) clamp(.75rem, 2vw, 2rem);
	margin: clamp(3rem, 8vw, 6rem) 0; padding: 0;
}
.wp-block-gallery > figure { margin: 0; grid-column: 1 / -1; }
.wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-gallery > figure:nth-child(3n+1) img { max-height: 92vh; }
@media (min-width: 700px) {
	.wp-block-gallery > figure:nth-child(3n+2) { grid-column: 1 / span 6; }
	.wp-block-gallery > figure:nth-child(3n+3) { grid-column: 8 / span 5; margin-top: clamp(4rem, 12vw, 12rem); }
	.wp-block-gallery > figure:nth-child(3n+2) img, .wp-block-gallery > figure:nth-child(3n+3) img { aspect-ratio: 4 / 5; }
	/* A last picture alone on its row takes the full width. */
	.wp-block-gallery > figure:nth-child(3n+2):last-child { grid-column: 1 / -1; }
	.wp-block-gallery > figure:nth-child(3n+2):last-child img { aspect-ratio: auto; max-height: 92vh; }
}

/* ---------- Projects ---------- */
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(3rem, 7vw, 7rem) clamp(1rem, 4vw, 4rem); margin: 0; }
/*
 * Selected work (home): full screen panels; each sticks to the top and the next one slides over
 * it, while its name rises faster than the page (assets/site.js).
 */
.work-stack { margin-inline: calc(50% - 50vw); }
.work-stack .project-card { position: sticky; top: 0; height: 100vh; height: 100svh; }
.js .work-stack .project-card.will-reveal { opacity: 1; transform: none; }
.work-stack .project-card a { aspect-ratio: auto; height: 100%; padding: var(--gutter) var(--gutter) 0; }
.work-stack .project-card__title { font-size: clamp(3.5rem, 1rem + 10vw, 13rem); letter-spacing: -.055em; }
.work-stack .project-card__meta { margin-bottom: 1rem; }
.work-stack .project-card__title, .work-stack .project-card__meta { will-change: transform; }
.portfolio { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(5rem, 10vw, 9rem); }
/*
 * Two columns, the left one half a card higher: each left card starts level with the middle of
 * the card to its right. The grid's rows stay aligned and the left cards are moved with the
 * `translate` property: its percentages are of the card itself in every browser (a `top`
 * percentage is not, in Safari), and it leaves `transform` to the reveal animation. The title
 * fills the space above the first left card, centred in it.
 */
.project-grid--portfolio { gap: clamp(1rem, 2.5vw, 2.5rem); }
.project-grid--portfolio > .project-card:nth-child(odd) { translate: 0 -50%; }
.portfolio__intro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 0; translate: 0 -25%; }
.portfolio__intro .page-title { font-size: clamp(3rem, 1rem + 5.5vw, 7.5rem); }
.portfolio__note { max-width: 22rem; margin: 2rem auto 0; color: var(--muted); }

/* Card: the picture fills the frame and slides inside it; city and year, then the name, at the bottom. */
.project-card a {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	aspect-ratio: 4 / 5; padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1.25rem, 2.5vw, 2.25rem) 0;
	color: #fff; text-decoration: none; background: var(--bg-alt);
}
.project-card img {
	position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover;
	transition: scale 1.2s var(--ease); will-change: transform;
}
.project-card a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 18, 15, 0) 50%, rgba(20, 18, 15, .55)); transition: opacity .6s; }
.project-card a:hover img, .project-card a:focus-visible img { scale: 1.04; }
.project-card__title, .project-card__meta { position: relative; z-index: 1; }
.project-card__meta { order: -1; margin: 0 0 .6rem; opacity: .85; }
.project-card__title { margin: 0; font-size: clamp(1.9rem, 1rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.045em; } /* Flush with the bottom edge; the line box keeps the descenders. */

.project__hero { position: relative; height: 100vh; height: 100svh; min-height: 32rem; color: #fff; }
.project__cover { position: absolute; inset: 0; }
.project__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 18, 15, .35), rgba(20, 18, 15, 0) 30%, rgba(20, 18, 15, 0) 50%, rgba(20, 18, 15, .55)); }
.project__heading { position: absolute; inset: auto 0 0; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) var(--gutter); }
.project__title { margin: 0; font-size: var(--fs-huge); line-height: .88; letter-spacing: -.055em; overflow-wrap: break-word; }
.project__subtitle { margin: 0 0 1.25rem; }
.project__hero--plain { height: auto; min-height: 0; color: var(--ink); padding-top: calc(var(--header) + 4rem); }
.project__hero--plain .project__heading { position: static; }

.project__body { padding-top: clamp(2.5rem, 6vw, 5rem); }
.project__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; margin: 0 0 clamp(3rem, 8vw, 7rem); padding-top: 1rem; border-top: 1px solid var(--line); }
.project__facts dt { color: var(--muted); margin-bottom: .3rem; }
.project__facts dd { margin: 0; }
.project .entry-content { padding-inline: 0; }
.project .entry-content > p:first-of-type { font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -.02em; }

.project__nav {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1.5rem;
	padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--line);
}
.project__nav a { text-decoration: none; }
.project__nav span { display: block; color: var(--muted); margin-bottom: .5rem; }
.project__prev, .project__next { font-size: var(--fs-h2); letter-spacing: -.03em; line-height: 1.05; }
.project__next { grid-column: 3; text-align: right; }
.project__all { grid-column: 2; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .09em; font-weight: 500; }

/* ---------- Contact form ---------- */
.contact-form { max-width: var(--text); margin-block: 2rem 4rem; }
.contact-form p { margin: 0 0 1.75rem; }
.contact-form label { display: block; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .09em; font-weight: 500; margin-bottom: .35rem; color: var(--muted); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea {
	width: 100%; padding: .6rem 0; border: 0; border-bottom: 1px solid rgba(31, 29, 26, .35); border-radius: 0;
	background: transparent; color: inherit; font: inherit; font-size: 1.15rem;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--ink); }
.contact-form input[type="file"] { font: inherit; font-size: .9rem; }
.contact-form .form-consent label { position: relative; padding-left: 1.75rem; text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 400; color: var(--ink); }
.contact-form .form-consent input { position: absolute; left: 0; top: .2em; margin: 0; }
.contact-form button {
	background: var(--ink); color: var(--bg); border: 0; border-radius: 0; padding: 1.1rem 2.25rem; cursor: pointer;
	font: inherit; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .09em; font-weight: 500;
	transition: background-color .3s;
}
.contact-form button::after { content: "  →"; }
.contact-form button:hover { background: #45413b; }
.form-required { color: var(--muted); font-size: .8rem; }
.form-hp { position: absolute; left: -9999px; }
.form-notice { padding: 1rem 1.25rem; border-left: 2px solid; }
.form-notice--ok { border-color: #4b6b3c; background: #e3e4d6; }
.form-notice--error { border-color: #9b3b2c; background: #eedbd3; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark); font-size: .875rem; }
.site-footer__inner {
	max-width: var(--wide); margin: 0 auto; padding: clamp(5rem, 11vw, 10rem) var(--gutter) 2rem;
	display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem var(--gutter);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-cta { grid-column: 1 / -1; margin: 0 0 clamp(3rem, 8vw, 7rem); font-size: var(--fs-huge); line-height: .9; letter-spacing: -.055em; font-weight: 500; }
.footer-cta a:hover { text-decoration: none; }
.footer-cta span { display: inline-block; font-weight: 300; transition: transform .5s var(--ease); }
.footer-cta a:hover span { transform: translateX(.15em); }
.footer-contact { grid-column: 1 / span 7; }
.footer-emails { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem var(--gutter); }
.footer-emails dt { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .09em; font-weight: 500; color: var(--on-dark-muted); margin-bottom: .6rem; }
.footer-emails dd { margin: 0; font-size: clamp(1rem, .9rem + .3vw, 1.15rem); line-height: 1.5; letter-spacing: -.01em; }
.footer-follow { grid-column: 9 / -1; display: flex; flex-direction: column; gap: 1.75rem; }
.footer-phone { display: inline-flex; align-items: center; gap: .75rem; font-size: clamp(1.5rem, 1rem + 1.5vw, 2.4rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.footer-phone .icon { width: .8em; height: .8em; flex: none; }
.footer-social { display: flex; gap: .75rem; }
.footer-social a { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem .55rem .75rem; border: 1px solid rgba(239, 235, 228, .25); border-radius: 999px; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .09em; font-weight: 500; transition: background-color .3s, color .3s; }
.footer-social a:hover { background: var(--on-dark); color: var(--ink); text-decoration: none; }
.footer-social .icon { width: 1.15rem; height: 1.15rem; }
.site-footer .footer-phone:hover { text-decoration: none; opacity: .8; }
.footer-legal { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem var(--gutter); padding-top: 1.5rem; border-top: 1px solid rgba(239, 235, 228, .18); color: var(--on-dark-muted); font-size: .8rem; }
.footer-legal > * { margin: 0; }
.footer-company { grid-column: 1 / span 6; }
.footer-legal .menu { grid-column: 7 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: flex-end; }
.footer-anpc { grid-column: 1 / span 9; display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-anpc img { width: 200px; max-width: 100%; height: auto; display: block; }
.footer-legal > p:last-child { grid-column: 10 / -1; align-self: end; text-align: right; }

/* ---------- Reveal on scroll (only once the script has run) ---------- */
.js .will-reveal { opacity: 0; transform: translateY(1.75rem); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .will-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Small screens ---------- */
@media (max-width: 899px) {
	.big-list li { grid-template-columns: 1fr; }
	.big-list .item-text { padding-top: 0; }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.footer-contact, .footer-follow { grid-column: 1 / -1; }
	.footer-company, .footer-legal .menu, .footer-anpc, .footer-legal > p:last-child { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
}
@media (max-width: 699px) {
	:root { --header: 4rem; }
	.site-logo { width: 5.5rem; }
	.hero__caption { grid-template-columns: 1fr 1fr; }
	.hero__caption span:nth-child(2) { text-align: right; }
	.hero__caption span:last-child { display: none; }
	.statement { min-height: 0; flex-direction: column; padding-block: 5rem 4rem; }
	.statement__text { max-width: none; }
	.statement__images { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem .75rem; margin-top: 3.5rem; width: 100%; }
	.float { position: static; width: auto; transform: none !important; } /* No parallax in the small grid. */
	.float:nth-child(even) { margin-top: 3rem; }
	.float--5 { grid-column: 1 / -1; width: 60%; justify-self: center; }
	.steps { grid-template-columns: 1fr; }
	.project-grid { grid-template-columns: 1fr; }
	.portfolio__intro { padding: 1rem 0 2rem; translate: none; }
	.project-grid--portfolio > .project-card:nth-child(odd) { translate: none; }
	.project__nav { grid-template-columns: 1fr 1fr; }
	.project__all { grid-column: 1 / -1; grid-row: 2; }
	.project__next { grid-column: 2; }
	.project__prev, .project__next { font-size: 1.25rem; }
	.footer-contact, .footer-follow { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}