/* ==========================================================================
   IDEA — "Monograph" concept (light)
   --------------------------------------------------------------------------
   A standalone alternative direction. This file shares NOTHING with the dark
   system: style.css, main.min.css and the GeneratePress cascade are not loaded
   on this page. Everything below is self-contained.

   Where the dark site is cinematic — full-bleed photography, pinned scroll,
   condensed grotesque on black — this is editorial: warm paper, high-contrast
   serif, framed images with air around them, hairline rules, numbered indexes,
   and motion that stays out of the way.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Reset
   -------------------------------------------------------------------------- */

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

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

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

ul, ol { list-style: none; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Paper, not white. Pure #fff reads as "unfinished" next to warm interior
	   photography; a slightly warm ground makes the images sit in the page. */
	--paper:        #F5F2EC;
	--paper-raised: #FAF8F4;
	--paper-deep:   #EAE5DC;

	--ink:          #17140F;
	--ink-soft:     #4A443A;
	--ink-muted:    #857C6E;
	--ink-faint:    #A79E90;

	--rule:         rgba(23, 20, 15, .16);
	--rule-soft:    rgba(23, 20, 15, .08);

	/* One accent, used sparingly: rules under interactive text, the index
	   marker, the submit button. Everything else is ink on paper. */
	--clay:         #8A5A3B;

	--display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--ease:   cubic-bezier(.22, 1, .36, 1);
	--gutter: clamp(1.25rem, 5vw, 5.5rem);
	--measure: 68ch;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--text);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1;
}

::selection { background: var(--ink); color: var(--paper); }

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

.rule { height: 1px; background: var(--rule); border: 0; }

/* Small caps label — the connective tissue of the whole concept */
.label {
	font-family: var(--text);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-muted);
	line-height: 1;
}

.label--ink { color: var(--ink); }

/* Numbered section marker: 01 — Услуги */
.marker {
	display: flex;
	align-items: baseline;
	gap: .85rem;
}

.marker__num {
	font-family: var(--text);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--clay);
}

.marker__rule {
	flex: 1;
	height: 1px;
	background: var(--rule);
	transform: translateY(-.25em);
}

.serif {
	font-family: var(--display);
	font-weight: 300;
	letter-spacing: -.005em;
	line-height: 1.04;
}

.lede {
	font-family: var(--display);
	font-size: clamp(1.35rem, 2vw, 1.85rem);
	font-weight: 300;
	line-height: 1.42;
	color: var(--ink-soft);
}

.body-copy {
	font-size: 1.0625rem;
	line-height: 1.68;
	color: var(--ink-soft);
}

.body-copy + .body-copy { margin-top: 1.1em; }

/* Skip link — off-canvas until focused, then a real, visible control. */
.skip {
	position: fixed;
	top: .75rem;
	left: .75rem;
	z-index: 200;
	padding: .8rem 1.15rem;
	background: var(--ink);
	color: var(--paper);
	transform: translateY(calc(-100% - 1.5rem));
	transition: transform .3s var(--ease);
}

.skip:focus { transform: none; }

/* --------------------------------------------------------------------------
   3. Masthead
   -------------------------------------------------------------------------- */

.masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(245, 242, 236, .82);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--rule-soft);
	transition: border-color .4s var(--ease);
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: 72px;
}

.masthead__mark {
	font-family: var(--display);
	font-size: 1.55rem;
	font-weight: 500;
	letter-spacing: .3em;
	text-indent: .3em;
	line-height: 1;
}

.masthead__mark sup {
	font-family: var(--text);
	font-size: .5rem;
	font-weight: 500;
	letter-spacing: .1em;
	vertical-align: super;
	color: var(--ink-muted);
	margin-left: -.15em;
}

.masthead__nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.4rem);
}

.masthead__link {
	position: relative;
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: .02em;
	color: var(--ink-soft);
	padding-block: .35rem;
	transition: color .3s var(--ease);
}

.masthead__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--clay);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--ease);
}

.masthead__link:hover { color: var(--ink); }
.masthead__link:hover::after { transform: scaleX(1); transform-origin: left; }
.masthead__link[aria-current] { color: var(--ink); }
.masthead__link[aria-current]::after { transform: scaleX(1); }

.masthead__cta {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .7rem 1.15rem;
	border: 1px solid var(--ink);
	transition: background-color .35s var(--ease), color .35s var(--ease);
}

.masthead__cta:hover { background: var(--ink); color: var(--paper); }

.masthead__toggle { display: none; }

/* --------------------------------------------------------------------------
   4. Opening
   The dark hero is a full-bleed video. This one is a title page: type first,
   a single framed portrait image, and a lot of paper.
   -------------------------------------------------------------------------- */

.opening {
	position: relative;
	padding-block: clamp(3rem, 9vh, 7rem) clamp(3rem, 8vh, 6rem);
	overflow: hidden;
}

.opening__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
}

.opening__eyebrow { margin-bottom: clamp(2rem, 6vh, 3.5rem); }

.opening__title {
	font-family: var(--display);
	font-weight: 300;
	/* Capped at 7.5rem: at 9.5rem the three-line headline pushed the CTA below
	   a 1000px fold. */
	font-size: clamp(3rem, 7.5vw, 7.5rem);
	line-height: .92;
	letter-spacing: -.02em;
	margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.opening__title em {
	font-style: italic;
	font-weight: 400;
}

.opening__sub {
	max-width: 34ch;
	margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}

.opening__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

.opening__figure {
	position: relative;
	margin: 0;
}

.opening__figure img {
	width: 100%;
	/* Height-capped rather than ratio-driven — a 4:5 box at this column width
	   is ~875px tall and drags the whole opening row past the fold. */
	height: clamp(320px, 56vh, 660px);
	object-fit: cover;
}

.opening__caption {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: .85rem;
	margin-top: .85rem;
	border-top: 1px solid var(--rule);
}

/* Link with an animated hairline — used instead of buttons throughout */
.link-rule {
	position: relative;
	display: inline-block;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding-bottom: .45rem;
	color: var(--ink);
}

.link-rule::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--ink);
	transform-origin: left;
	transition: transform .5s var(--ease), background-color .3s;
}

.link-rule:hover::after { transform: scaleX(.35); background: var(--clay); }

.btn-solid {
	display: inline-block;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .95rem 1.9rem;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	cursor: pointer;
	transition: background-color .35s var(--ease), color .35s var(--ease);
}

.btn-solid:hover { background: transparent; color: var(--ink); }

/* --------------------------------------------------------------------------
   5. Facts strip
   -------------------------------------------------------------------------- */

.facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.facts__item {
	padding: clamp(1.5rem, 3.5vw, 2.4rem) 0;
	padding-right: 1.5rem;
}

.facts__item + .facts__item {
	border-left: 1px solid var(--rule-soft);
	padding-left: clamp(1rem, 2.5vw, 2rem);
}

.facts__num {
	font-family: var(--display);
	font-size: clamp(2.6rem, 5vw, 4.2rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   6. Generic section
   -------------------------------------------------------------------------- */

/* Clear the sticky masthead when an in-page anchor lands on a section. */
section[id] { scroll-margin-top: 84px; }

.section { padding-block: clamp(4rem, 12vh, 9rem); }
.section--tight { padding-block: clamp(3rem, 8vh, 5.5rem); }

.section__head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.section__title {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.02;
	letter-spacing: -.015em;
	margin-top: 1.5rem;
	max-width: 22ch;
}

.section__title em { font-style: italic; font-weight: 400; }

/* Two-column editorial text */
.columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.75rem, 4vw, 4rem);
	max-width: 96ch;
}

/* --------------------------------------------------------------------------
   7. Capability index — numbered list with hover preview
   -------------------------------------------------------------------------- */

.index { position: relative; }

.index__list { border-top: 1px solid var(--rule); }

.index__row {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr) 8rem;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: baseline;
	padding-block: clamp(1.5rem, 3.2vw, 2.35rem);
	border-bottom: 1px solid var(--rule);
	transition: opacity .4s var(--ease);
}

.index__name {
	font-family: var(--display);
	font-size: clamp(1.6rem, 3.2vw, 2.6rem);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: -.01em;
	transition: color .35s var(--ease), transform .5s var(--ease);
}

.index__desc {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ink-muted);
	max-width: 46ch;
}

.index__go {
	justify-self: end;
	align-self: center;
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	white-space: nowrap;
	transition: color .35s var(--ease), transform .5s var(--ease);
}

/* Dim the siblings of whichever row is being read */
.index__list:has(.index__row:hover) .index__row:not(:hover) { opacity: .38; }

.index__row:hover .index__name { transform: translateX(.55rem); color: var(--clay); }
.index__row:hover .index__go   { transform: translateX(.35rem); color: var(--ink); }

/* Cursor-following preview, positioned by JS */
.index__preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	width: 19rem;
	aspect-ratio: 4 / 5;
	pointer-events: none;
	opacity: 0;
	overflow: hidden;
	will-change: transform, opacity;
	box-shadow: 0 24px 60px rgba(23, 20, 15, .18);
}

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

@media (hover: none) { .index__preview { display: none; } }

/* --------------------------------------------------------------------------
   8. Plates — framed work, deliberately not full-bleed
   -------------------------------------------------------------------------- */

.plates {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem) clamp(1.25rem, 3vw, 3rem);
	align-items: start;
}

.plate { margin: 0; }

/* display:block is load-bearing: .plate__frame is an <a>, and aspect-ratio
   does not apply to non-replaced inline boxes — without it every plate
   silently falls back to its image's natural ratio. */
.plate__frame {
	display: block;
	overflow: hidden;
	background: var(--paper-deep);
}

.plate__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

.plate:hover .plate__frame img { transform: scale(1.035); }

.plate__cap {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: .8rem;
	margin-top: .8rem;
	border-top: 1px solid var(--rule);
}

.plate__title {
	font-family: var(--display);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.15;
}

/* Deliberately uneven rhythm — a monograph never grids everything equally */
.plate--a { grid-column: 1 / span 7; }
.plate--a .plate__frame { aspect-ratio: 3 / 2; }

.plate--b { grid-column: 9 / span 4; align-self: end; }
.plate--b .plate__frame { aspect-ratio: 4 / 5; }

.plate--c { grid-column: 2 / span 4; }
.plate--c .plate__frame { aspect-ratio: 4 / 5; }

.plate--d { grid-column: 7 / span 6; margin-top: clamp(2rem, 8vw, 6rem); }
.plate--d .plate__frame { aspect-ratio: 3 / 2; }

/* --------------------------------------------------------------------------
   9. Pull quote
   -------------------------------------------------------------------------- */

.quote {
	padding-block: clamp(4rem, 12vh, 8rem);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	text-align: center;
}

.quote__text {
	font-family: var(--display);
	font-size: clamp(1.9rem, 4.4vw, 3.6rem);
	font-weight: 300;
	font-style: italic;
	line-height: 1.16;
	letter-spacing: -.015em;
	max-width: 20ch;
	margin-inline: auto;
}

.quote__by { margin-top: clamp(1.5rem, 4vh, 2.25rem); }

/* --------------------------------------------------------------------------
   10. Process — a specification table, not an accordion
   -------------------------------------------------------------------------- */

.spec { border-top: 1px solid var(--ink); }

.spec__row {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr) 8rem;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: baseline;
	padding-block: clamp(1.35rem, 2.8vw, 2rem);
	border-bottom: 1px solid var(--rule);
}

.spec__phase {
	font-family: var(--display);
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	font-weight: 400;
	line-height: 1.15;
}

.spec__detail {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ink-muted);
}

.spec__time {
	justify-self: end;
	text-align: right;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. Recognition — typographic award index
   -------------------------------------------------------------------------- */

.awards__list { border-top: 1px solid var(--rule); }

.awards__row {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr) minmax(0, .8fr);
	gap: clamp(.75rem, 2.5vw, 2rem);
	align-items: baseline;
	padding-block: 1.05rem;
	border-bottom: 1px solid var(--rule-soft);
	transition: background-color .3s var(--ease), padding-inline .4s var(--ease);
}

.awards__row:hover {
	background: var(--paper-raised);
	padding-inline: .85rem;
}

.awards__year {
	font-family: var(--text);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--ink-faint);
}

.awards__name {
	font-family: var(--display);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	font-weight: 400;
	line-height: 1.25;
}

.awards__project {
	font-size: .8125rem;
	color: var(--ink-muted);
	text-align: right;
}

/* --------------------------------------------------------------------------
   12. Enquiry — underline fields, no boxes
   -------------------------------------------------------------------------- */

.enquiry {
	background: var(--paper-raised);
	border-top: 1px solid var(--rule);
	padding-block: clamp(4rem, 12vh, 8rem);
}

.enquiry__grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.enquiry__aside .section__title { max-width: 16ch; }

.enquiry__note {
	margin-top: 1.75rem;
	max-width: 40ch;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ink-muted);
}

.form { display: grid; gap: clamp(1.5rem, 3vw, 2.1rem); }

.form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 2.1rem);
}

.field { position: relative; display: grid; gap: .5rem; }

.field__label {
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.field input,
.field select,
.field textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
	padding: .55rem 0;
	font-family: var(--text);
	font-size: 1.0625rem;
	color: var(--ink);
	transition: border-color .35s var(--ease);
}

.field textarea { min-height: 5.5rem; resize: vertical; }

.field select {
	appearance: none;
	padding-right: 1.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2317140F' stroke-width='1.2' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .15rem center;
	background-size: .7rem;
	cursor: pointer;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-bottom-color: var(--clay);
	border-bottom-width: 1px;
}

.consent {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--ink-muted);
}

.consent input {
	margin-top: .25em;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	accent-color: var(--clay);
}

.consent a { border-bottom: 1px solid var(--rule); }
.consent a:hover { border-bottom-color: var(--clay); }

.form__submit { justify-self: start; }

.form__note {
	display: none;
	padding: .9rem 1.1rem;
	border-left: 2px solid var(--clay);
	background: var(--paper);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--ink-soft);
}

.form__note.is-visible { display: block; }

/* --------------------------------------------------------------------------
   13. Colophon
   -------------------------------------------------------------------------- */

.colophon {
	background: var(--paper);
	border-top: 1px solid var(--ink);
	padding-block: clamp(3rem, 8vh, 5rem) 2rem;
}

.colophon__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 4vw, 3rem);
	padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.colophon__mark {
	font-family: var(--display);
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: .3em;
	text-indent: .3em;
	line-height: 1;
	margin-bottom: 1rem;
}

.colophon__blurb {
	max-width: 30ch;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ink-muted);
}

.colophon__col h3 { margin-bottom: 1.1rem; }

.colophon__col li + li { margin-top: .6rem; }

.colophon__col a {
	font-size: .9375rem;
	color: var(--ink-soft);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ease), color .3s var(--ease);
}

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

.colophon__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   14. Motion
   Reveal is opt-in per element via [data-reveal]; JS adds .is-in. The CSS
   defines the resting state so nothing is invisible if JS never runs.
   -------------------------------------------------------------------------- */

[data-reveal] { opacity: 1; }

.js [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-reveal-mask] .plate__frame img,
.js [data-reveal-mask].opening__figure img {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.15s var(--ease);
}

.js [data-reveal-mask].is-in .plate__frame img,
.js [data-reveal-mask].is-in.opening__figure img {
	clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.index__row { grid-template-columns: 3.5rem minmax(0, 1fr) 6rem; }
	.index__desc { grid-column: 2 / span 2; margin-top: .6rem; }
	.spec__row  { grid-template-columns: 3.5rem minmax(0, 12rem) minmax(0, 1fr) 6rem; }
}

@media (max-width: 900px) {
	.masthead__nav { display: none; }
	.masthead__toggle {
		display: inline-flex;
		align-items: center;
		gap: .6rem;
		background: none;
		border: 0;
		padding: .5rem 0;
		cursor: pointer;
		font-size: .6875rem;
		font-weight: 500;
		letter-spacing: .16em;
		text-transform: uppercase;
	}

	.masthead__toggle svg { width: 18px; height: 12px; }

	.masthead__nav.is-open {
		display: flex;
		position: fixed;
		inset: 72px 0 auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 1rem var(--gutter) 2rem;
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
	}

	.masthead__nav.is-open .masthead__link {
		width: 100%;
		padding-block: .9rem;
		border-bottom: 1px solid var(--rule-soft);
		font-size: 1.05rem;
	}

	.masthead__nav.is-open .masthead__cta { margin-top: 1.25rem; }

	.opening__grid  { grid-template-columns: 1fr; }
	.opening__figure { order: -1; }
	.opening__figure img { height: auto; aspect-ratio: 3 / 2; }

	.facts { grid-template-columns: repeat(2, 1fr); }
	.facts__item:nth-child(3) { border-left: 0; padding-left: 0; }
	.facts__item:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }

	.columns { grid-template-columns: 1fr; }

	.plates { grid-template-columns: 1fr; }
	.plate--a, .plate--b, .plate--c, .plate--d { grid-column: 1 / -1; margin-top: 0; }
	.plate--b .plate__frame,
	.plate--c .plate__frame { aspect-ratio: 3 / 2; }

	.spec__row {
		grid-template-columns: 3rem minmax(0, 1fr) 5.5rem;
	}
	.spec__detail { grid-column: 2 / span 2; margin-top: .5rem; }

	.awards__row { grid-template-columns: 4rem minmax(0, 1fr); }
	.awards__project { grid-column: 2; text-align: left; margin-top: .25rem; }

	.enquiry__grid { grid-template-columns: 1fr; }
	.colophon__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.form__row { grid-template-columns: 1fr; }
	.index__row { grid-template-columns: 2.75rem minmax(0, 1fr); }
	.index__desc { grid-column: 2; }
	.index__go { grid-column: 2; justify-self: start; margin-top: .75rem; }
	.colophon__grid { grid-template-columns: 1fr; }
	.quote__text { max-width: none; }
}

/* --------------------------------------------------------------------------
   15b. Touch targets
   Several controls are visually small by design (hairline links, the wordmark).
   On coarse pointers their hit area is expanded with a transparent overlay
   pseudo-element so nothing moves visually but everything clears 44px.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {

	.masthead__toggle { min-height: 44px; }

	.masthead__mark,
	.link-rule,
	.colophon__col a,
	.consent a {
		position: relative;
	}

	.masthead__mark::before,
	.link-rule::before,
	.colophon__col a::before,
	.consent a::before {
		content: "";
		position: absolute;
		top: 50%;
		left: -8px;
		right: -8px;
		height: 44px;
		transform: translateY(-50%);
	}

	/* The index rows are large already; keep their hit area to the row itself. */
	.index__row::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	.js [data-reveal] { opacity: 1; transform: none; }
	.js [data-reveal-mask] .plate__frame img,
	.js [data-reveal-mask].opening__figure img { clip-path: none; }
}

/* --------------------------------------------------------------------------
   16. Focus
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 3px;
}

/* ==========================================================================
   17. Architecture page components
   Added for architecture-design.html. Everything here follows the tokens
   above — no new colours, no new type families.
   ========================================================================== */

/* --- 17.1 Full-bleed hero ------------------------------------------------ */

.hero-arch {
	position: relative;
	min-height: clamp(520px, 82vh, 860px);
	display: grid;
	align-items: end;
	overflow: hidden;
	background: var(--paper-deep);
}

.hero-arch__media { position: absolute; inset: 0; }

.hero-arch__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	animation: heroSettle 2.4s var(--ease) forwards;
}

@keyframes heroSettle { to { transform: scale(1); } }

/* Scrim. These renders are bright skies and pale stone, so white type needs a
   real floor — a bottom fade alone left the first headline line sitting on sky.
   The dominant layer is directional (left-to-right) because the type is
   left-aligned: it protects the text column and leaves the right side of the
   render clean. */
.hero-arch__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right,  rgba(23,20,15,.80) 0%, rgba(23,20,15,.52) 34%, rgba(23,20,15,.10) 66%, rgba(23,20,15,0) 100%),
		linear-gradient(to top,    rgba(23,20,15,.60) 0%, rgba(23,20,15,0) 46%),
		linear-gradient(to bottom, rgba(23,20,15,.30) 0%, rgba(23,20,15,0) 22%);
}

@media (max-width: 900px) {
	/* No room for a text column on phones — fall back to a full vertical scrim. */
	.hero-arch__media::after {
		background:
			linear-gradient(to top,    rgba(23,20,15,.74) 0%, rgba(23,20,15,.15) 60%),
			linear-gradient(to bottom, rgba(23,20,15,.35) 0%, rgba(23,20,15,0) 30%);
	}
}

.hero-arch__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: clamp(2.5rem, 7vh, 5rem);
	color: #fff;
}

.hero-arch__eyebrow { color: rgba(255,255,255,.86); margin-bottom: 1.25rem; }

.hero-arch__title {
	font-family: var(--display);
	font-weight: 400;
	text-shadow: 0 2px 30px rgba(23, 20, 15, .35);
	font-size: clamp(2.5rem, 7vw, 6.5rem);
	line-height: .96;
	letter-spacing: -.015em;
	max-width: 16ch;
	color: #fff;
}

.hero-arch__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: clamp(1.75rem, 5vh, 3rem);
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255,255,255,.28);
}

.hero-arch__foot .label { color: rgba(255,255,255,.72); }

.btn-light {
	display: inline-block;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .95rem 1.9rem;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--paper);
	transition: background-color .35s var(--ease), color .35s var(--ease);
}

.btn-light:hover { background: transparent; color: var(--paper); }

/* --- 17.2 Gallery: scroll-snap strip ------------------------------------- */

.gallery { padding-block: clamp(3rem, 8vh, 5.5rem); }

.gallery__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(260px, 40vw, 620px);
	gap: clamp(1rem, 2vw, 1.75rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--gutter);
	padding-inline: var(--gutter);
	padding-bottom: 1.25rem;
	scrollbar-width: thin;
	scrollbar-color: var(--rule) transparent;
	overscroll-behavior-x: contain;
}

.gallery__track::-webkit-scrollbar { height: 3px; }
.gallery__track::-webkit-scrollbar-track { background: var(--rule-soft); }
.gallery__track::-webkit-scrollbar-thumb { background: var(--ink-faint); }

.gallery__item { scroll-snap-align: start; margin: 0; }

.gallery__item img {
	width: 100%;
	/* height:auto is required. The <img width>/<height> attributes are UA
	   presentational hints that map to the CSS height property, so with both
	   dimensions resolved the aspect-ratio below is ignored and the image
	   renders at its full intrinsic height. */
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--paper-deep);
}

.gallery__cap {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: .75rem;
	margin-top: .75rem;
	border-top: 1px solid var(--rule);
}

.gallery__hint {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-top: .5rem;
}

/* --- 17.3 Awards wall ---------------------------------------------------- */
/* The source page shows six logos at wildly different scales. Equal cells with
   a shared cap-height and multiply blending make them read as one set. */

.awards-wall {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}

.awards-wall__cell {
	display: grid;
	place-items: center;
	padding: clamp(1.25rem, 2.6vw, 2.25rem);
	min-height: clamp(160px, 17vw, 240px);
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
	transition: background-color .4s var(--ease);
}

.awards-wall__cell:hover { background: var(--paper-raised); }

.awards-wall__cell img {
	/* The source PNGs are square canvases with a lot of built-in transparent
	   padding, so max-height binds first and the visible mark ends up far
	   smaller than the box. Generous caps compensate. */
	max-width: min(100%, 320px);
	max-height: clamp(112px, 11vw, 172px);
	width: auto;
	height: auto;
	object-fit: contain;
	/* Knocks the white plates out of the logo PNGs against warm paper. */
	mix-blend-mode: multiply;
	filter: saturate(.9);
	transition: filter .4s var(--ease), transform .5s var(--ease);
}

.awards-wall__cell:hover img { filter: saturate(1); transform: scale(1.03); }

@media (max-width: 900px) { .awards-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .awards-wall { grid-template-columns: 1fr; } }

/* --- 17.4 FAQ (native details/summary) ----------------------------------- */

.faq-list { border-top: 1px solid var(--ink); }

.faq-item { border-bottom: 1px solid var(--rule); }

.faq-item > summary {
	display: grid;
	grid-template-columns: 3rem 1fr 2rem;
	gap: 1rem;
	align-items: baseline;
	padding-block: clamp(1.15rem, 2.4vw, 1.6rem);
	cursor: pointer;
	list-style: none;
	transition: color .3s var(--ease);
}

.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--clay); }

.faq-item__q {
	font-family: var(--display);
	font-size: clamp(1.15rem, 2.1vw, 1.6rem);
	font-weight: 400;
	line-height: 1.25;
}

.faq-item__sign {
	position: relative;
	justify-self: end;
	align-self: center;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.faq-item__sign::before,
.faq-item__sign::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: currentColor;
	transition: transform .4s var(--ease);
}

.faq-item__sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__sign::after { transform: rotate(0deg); }

.faq-item__a {
	padding: 0 2rem clamp(1.35rem, 3vw, 2rem) 4rem;
	max-width: 76ch;
	color: var(--ink-soft);
	line-height: 1.65;
}

.faq-item[open] .faq-item__a { animation: faqOpen .45s var(--ease); }

@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 620px) {
	.faq-item > summary { grid-template-columns: 2rem 1fr 1.5rem; gap: .75rem; }
	.faq-item__a { padding-left: 2.75rem; padding-right: 0; }
}

/* --- 17.5 Radio groups in the enquiry form ------------------------------- */

.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding-top: .25rem;
}

.radio-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem 1.1rem;
	border: 1px solid var(--rule);
	font-size: .9375rem;
	cursor: pointer;
	transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.radio-chip input {
	appearance: none;
	width: 12px;
	height: 12px;
	margin: 0;
	/* `.field input` (section 12) also matches these and applies padding:.55rem 0,
	   which stretches the dot into an ellipse. Reset it explicitly. */
	padding: 0;
	flex-shrink: 0;
	border: 1px solid var(--ink-faint);
	border-radius: 50%;
	flex: 0 0 auto;
	transition: border-color .3s, box-shadow .3s;
}

.radio-chip input:checked {
	border-color: var(--clay);
	box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px var(--clay);
}

.radio-chip:hover { border-color: var(--ink-faint); }
.radio-chip:has(input:checked) { border-color: var(--ink); background: var(--paper); }

.field--req .field__label::after {
	content: " *";
	color: var(--clay);
}

/* --- 17.6 Closing CTA band ----------------------------------------------- */

.cta-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding-block: clamp(3.5rem, 10vh, 7rem);
	border-top: 1px solid var(--rule);
}

.cta-band__copy { max-width: 40ch; }

.cta-band__title {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(2rem, 4.4vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -.015em;
	margin: 1.5rem 0 1.25rem;
}

.cta-band__text { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; margin-bottom: 2rem; }

.cta-band__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 900px) {
	.cta-band { grid-template-columns: 1fr; }
	.cta-band__media { order: -1; }
}

/* --- 17.7 Text-major split --------------------------------------------------
   .enquiry__grid is image-major (.85fr 1fr). The "GET STARTED WITH US!" block
   reuses that grid but its portrait source is only 600px wide, so the image
   column has to stay under 600 CSS px or the photo is upscaled and goes soft.
   -------------------------------------------------------------------------- */

.split--text-major { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }

@media (max-width: 900px) {
	.split--text-major { grid-template-columns: 1fr; }
}