/* ==========================================================================
   NORA BRANDS INC. — agency site
   Palette, type and spacing per the NORA brand boards.
   ========================================================================== */

:root {
	/* Brand palette, as specified. */
	/* Nora Brands palette, as specified. */
	--ivory: #e7e2d9;
	--cream: #f5f2eb;
	--taupe: #74716b;
	--black: #000000;

	/* Working neutrals derived from the four above. */
	--paper: #faf8f4;
	--mist: #eeebe4;
	--sand: #ded8cd;
	--stone: #c3bdb3;

	/* Taupe at label sizes measures under 4.5:1 on ivory, so body and
	   label text use a darkened cut; --taupe itself stays for rules,
	   dividers and anything non-textual. */
	--charcoal: #46443f;
	--grey: #5e5b55;

	--rule: rgba(0, 0, 0, 0.16);
	--rule-soft: rgba(0, 0, 0, 0.09);

	--serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
	--sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* 12-column grid, 80px margins, 24px gutter. */
	--max: 1360px;
	--margin: clamp(1.25rem, 5vw, 5rem);
	--gutter: 1.5rem;

	/* Spacing principles: 8 / 16 / 24 / 40 / 80. */
	--s-tight: 0.5rem;
	--s-rel: 1rem;
	--s-sec: 1.5rem;
	--s-block: 2.5rem;
	--s-page: 5rem;
	--section-y: clamp(4rem, 8vw, 8.5rem);

	--hero: clamp(3rem, 1.2rem + 7.6vw, 6.5rem);
	--h1: clamp(2.25rem, 1.3rem + 4vw, 3.75rem);
	--h2: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
	--h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--body: 1rem;
	--small: 0.875rem;
	--label: 0.75rem;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--black);
	font-family: var(--sans);
	font-size: var(--body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 1.5px solid var(--black); outline-offset: 4px; }

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

.sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--black); color: var(--paper);
	padding: 0.75rem 1.25rem; text-decoration: none; font-size: var(--small);
}
.skip:focus { left: 0; }

/* --- Type ---------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.serif {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.06;
	text-wrap: balance;
}

.hero-type {
	font-size: var(--hero);
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1.04;
	max-width: 15ch;
}

.hero-type em { font-style: italic; }
.h1 { font-size: var(--h1); }
.h2 { font-family: var(--sans); font-size: var(--h2); font-weight: 600; letter-spacing: -0.01em; line-height: 1.28; }
.h3 { font-family: var(--serif); font-size: var(--h3); letter-spacing: -0.015em; line-height: 1.2; }

/* Labels: Manrope Medium, uppercase, +12% tracking — per the type spec. */
.label {
	font-size: var(--label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grey);
	line-height: 1.35;
}

.lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; color: var(--charcoal); margin: 0; max-width: 46ch; text-wrap: pretty; }
.body { margin: 0; color: var(--charcoal); line-height: 1.65; }
.small { font-size: var(--small); line-height: 1.6; color: var(--grey); }

em { font-style: italic; }

/* --- The running rule ---------------------------------------------------- */
/* The device from the brand boards: a label, a hairline that takes up the
   slack, and a section number. It is the site's main structural mark. */

.run {
	display: flex;
	align-items: center;
	gap: var(--s-rel);
	margin-bottom: var(--s-block);
}

.run__line { flex: 1; height: 1px; background: var(--rule); min-width: 1.5rem; }
.run__n { font-family: var(--serif); font-size: 1.125rem; letter-spacing: 0; color: var(--black); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.75em;
	min-height: 3.25rem; padding: 0.9rem 1.75rem;
	border: 1px solid var(--black); border-radius: 0;
	background: var(--black); color: var(--paper);
	font: inherit; font-size: var(--label); font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
	cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.btn:hover { background: #000; }
.btn .ar { transition: transform 0.25s var(--ease); }
.btn:hover .ar { transform: translateX(4px); }

.btn--ghost { background: transparent; color: var(--black); }
.btn--ghost:hover { background: var(--black); color: var(--paper); }
.btn--sm { min-height: 2.75rem; padding: 0.6rem 1.15rem; }
.btn--block { width: 100%; }

/* Text link: underline plus arrow, per the elements sheet. */
.tlink {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-size: var(--small); font-weight: 600; color: var(--black);
	text-decoration: none; padding-bottom: 0.35rem;
	min-height: 44px;
	border-bottom: 1px solid var(--stone);
	transition: border-color 0.25s var(--ease);
}
.tlink:hover { border-bottom-color: var(--black); }
.tlink .ar { transition: transform 0.25s var(--ease); }
.tlink:hover .ar { transform: translateX(4px); }

/* --- Chrome -------------------------------------------------------------- */

.ticker {
	background: var(--black); color: var(--paper);
	font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em;
	text-transform: uppercase; text-align: center; padding-block: 0.65rem;
}

.hdr {
	position: sticky; top: 0; z-index: 50;
	background: rgba(251, 249, 245, 0.9);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease);
}

.hdr.stuck { border-bottom-color: var(--rule-soft); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 4.75rem; }

/* The wordmark is the supplied artwork: black ink on transparency, so the
   same file serves the ivory header and the black footer (inverted). */
.mark {
	display: inline-flex; align-items: center;
	text-decoration: none; color: var(--black);
	min-height: 48px;
}

.mark img {
	width: clamp(8.75rem, 13vw, 11.25rem);
	height: auto;
	display: block;
}

/* On black the ink is inverted rather than shipped twice. */
.foot .mark img { filter: invert(1); width: clamp(9.5rem, 15vw, 12rem); }

.nav { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav a {
	font-size: var(--label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--charcoal); text-decoration: none;
	display: inline-flex; align-items: center; min-height: 44px;
	transition: color 0.2s var(--ease);
}
.nav a:hover { color: var(--black); }

.hdr__act { display: flex; align-items: center; gap: 0.75rem; }

/* --- Hero ---------------------------------------------------------------- */

.hero { background: var(--ivory); padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5.5rem); }

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

.hero__aside { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.5vw, 2rem); }
.hero__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2rem, 4vw, 2.75rem); }

/* The capability strip under the hero. */
.strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	border-top: 1px solid var(--rule);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.strip div { padding: var(--s-sec) var(--s-rel) 0 0; }
.strip b { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; margin-bottom: 0.35rem; }

/* --- Sections ------------------------------------------------------------ */

.sec { padding-block: var(--section-y); }
.sec--cream { background: var(--cream); }
.sec--ivory { background: var(--ivory); }

/* Black sections. The descendant rules below assume this ground; without it
   their ivory text renders on paper and the section disappears. */
.sec--dark { background: var(--black); color: var(--ivory); }
.sec--mist { background: var(--mist); }

.head {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.head p { margin: 0; }

/* --- Services list ------------------------------------------------------- */
/* An editorial table of contents: number, name, and a summary that opens. */

.svc { border-top: 1px solid var(--rule); }
.svc__i { border-bottom: 1px solid var(--rule); }

.svc__q {
	width: 100%; display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr) auto;
	gap: clamp(0.75rem, 2vw, 2rem);
	align-items: baseline;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
	background: none; border: 0; font: inherit; color: var(--black);
	text-align: left; cursor: pointer;
	transition: opacity 0.2s var(--ease);
}

.svc__q:hover { opacity: 0.6; }
.svc__n { font-family: var(--serif); font-size: 1.125rem; color: var(--grey); }
.svc__t { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.1; }

.svc__s { position: relative; width: 0.9rem; height: 0.9rem; flex: none; align-self: center; }
.svc__s::before, .svc__s::after {
	content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px;
	background: var(--black); transition: transform 0.3s var(--ease);
}
.svc__s::after { transform: rotate(90deg); }
.svc__q[aria-expanded="true"] .svc__s::after { transform: rotate(0); }

.svc__a { overflow: hidden; height: 0; transition: height 0.35s var(--ease); }
.svc__inner { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: clamp(0.75rem, 2vw, 2rem); padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.svc__body { max-width: 62ch; }
.svc__body p { margin: 0 0 var(--s-rel); color: var(--charcoal); line-height: 1.65; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: var(--s-rel); }

/* --- Method -------------------------------------------------------------- */

.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0; border-top: 1px solid var(--rule); }

.method__c { padding: var(--s-block) var(--s-sec) var(--s-block) 0; border-right: 1px solid var(--rule); }
.method__c:last-child { border-right: 0; }
.method__c + .method__c { padding-left: var(--s-sec); }
.method__n { font-family: var(--serif); font-size: 2.5rem; line-height: 1; color: var(--taupe); display: block; margin-bottom: var(--s-rel); }
.method__c h3 { font-size: var(--label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.65rem; }
.method__c p { margin: 0; font-size: var(--small); color: var(--charcoal); line-height: 1.6; }

/* --- Work ---------------------------------------------------------------- */

.work { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }

.case { display: flex; flex-direction: column; }
.case__img {
	aspect-ratio: 4 / 3;
	background: linear-gradient(150deg, var(--mist), var(--sand));
	border: 1px solid var(--rule-soft);
	display: grid; place-items: center;
	margin-bottom: var(--s-sec);
	position: relative;
	overflow: hidden;
}

.case__img span {
	font-family: var(--serif); font-size: 2.75rem; color: rgba(17, 17, 17, 0.16);
	letter-spacing: 0.02em;
}

.case__meta { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--rule); margin-bottom: var(--s-rel); }
.case h3 { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; line-height: 1.15; }
.case p { margin: 0; font-size: var(--small); color: var(--charcoal); line-height: 1.6; }
.case__res { margin-top: var(--s-rel); font-family: var(--serif); font-size: 1.125rem; color: var(--black); }

/* --- Engagements --------------------------------------------------------- */

.eng { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }

.tier {
	background: var(--paper);
	border: 1px solid var(--rule);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: flex; flex-direction: column; gap: var(--s-rel);
}

.tier--feat { background: var(--black); color: var(--paper); border-color: var(--black); }
.tier--feat .label, .tier--feat .small { color: rgba(251, 249, 245, 0.72); }
.tier--feat .tier__p { color: var(--paper); }
.tier--feat li { color: rgba(251, 249, 245, 0.82); }
.tier--feat li::before { background: rgba(251, 249, 245, 0.5); }
.tier--feat .btn { background: var(--paper); color: var(--black); border-color: var(--paper); }
.tier--feat .btn:hover { background: #fff; }

.tier h3 { font-family: var(--serif); font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.1; }
.tier__p { font-family: var(--serif); font-size: 1.375rem; color: var(--black); }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; flex: 1; }
.tier li { position: relative; padding-left: 1.25rem; font-size: var(--small); line-height: 1.55; color: var(--charcoal); }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 1px; background: var(--stone); }

/* --- Society ------------------------------------------------------------- */

.soc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.soc__mark { text-align: center; padding: clamp(2rem, 5vw, 3.5rem); background: var(--paper); border: 1px solid var(--rule); }
.soc__n { font-family: var(--serif); font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); line-height: 0.95; letter-spacing: 0.01em; }
.soc__s { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.44em; text-transform: uppercase; color: var(--charcoal); margin-top: 0.5rem; }
.soc__rule { height: 1px; background: var(--rule); margin: var(--s-sec) 0; }

.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sec) clamp(1.5rem, 3vw, 2.5rem); margin-top: var(--s-block); }
.pillars div { border-top: 1px solid var(--rule); padding-top: 0.75rem; }
.pillars b { display: block; font-size: var(--label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.35rem; }
.pillars span { font-size: var(--small); color: var(--grey); line-height: 1.5; }

/* --- Quotes -------------------------------------------------------------- */

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.quote { border-top: 2px solid var(--black); padding-top: var(--s-sec); }
.quote blockquote { margin: 0 0 var(--s-sec); font-family: var(--serif); font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.32; letter-spacing: -0.015em; }
.quote figcaption { font-size: var(--small); color: var(--grey); }
.quote figcaption b { display: block; color: var(--black); font-weight: 600; }

/* --- Contact ------------------------------------------------------------- */

.cta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }

.form { display: grid; gap: var(--s-rel); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--s-rel); }

.field { display: grid; gap: 0.4rem; }
.field > span { font-size: var(--label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }

.field input, .field select, .field textarea {
	width: 100%; min-height: 3rem; padding: 0.75rem 0;
	border: 0; border-bottom: 1px solid var(--stone);
	background: transparent; color: var(--black);
	font: inherit; font-size: var(--body); border-radius: 0;
}

.field textarea { min-height: 5.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--black); border-bottom-width: 2px; }
.field input::placeholder, .field textarea::placeholder { color: var(--stone); }

.said { padding: 0.85rem 1rem; background: var(--mist); font-size: var(--small); display: none; }
.said.on { display: block; }

/* --- Footer -------------------------------------------------------------- */

.foot { background: var(--black); color: rgba(251, 249, 245, 0.72); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot__g { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); padding-bottom: var(--s-block); border-bottom: 1px solid rgba(251, 249, 245, 0.18); }
.foot .mark { color: var(--paper); }
.foot h4 { font-size: var(--label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(251, 249, 245, 0.5); margin-bottom: var(--s-rel); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.foot a { color: rgba(251, 249, 245, 0.72); text-decoration: none; font-size: var(--small); display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover { color: var(--paper); }
.foot__b { padding-top: var(--s-sec); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; font-size: 0.75rem; color: rgba(251, 249, 245, 0.5); }

/* --- Reveal -------------------------------------------------------------- */

.rev { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rev.in { opacity: 1; transform: none; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 64rem) {
	.nav { display: none; }
	.hero__grid, .head, .soc, .cta { grid-template-columns: minmax(0, 1fr); }
	.hero__aside { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: var(--s-sec); }
	.method__c { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0 !important; padding-right: 0; }
	.method__c:last-child { border-bottom: 0; }
	.foot__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
	.svc__q { grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.75rem; }
	.svc__inner { grid-template-columns: minmax(0, 1fr); }
	.btn { width: 100%; }
	.hdr__act .btn { width: auto; }
	.strip div { padding-right: 0; }
	.foot__g { grid-template-columns: minmax(0, 1fr); }
	.pillars { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.rev { opacity: 1; transform: none; }
}

/* --- Intro statement ----------------------------------------------------- */

.intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.intro h2 { max-width: 14ch; }

/* --- Service categories -------------------------------------------------- */

.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0; border-top: 1px solid var(--rule); }

.cat { padding: var(--s-block) var(--s-sec) var(--s-block) 0; border-right: 1px solid var(--rule); }
.cat:last-child { border-right: 0; }
.cat + .cat { padding-left: var(--s-sec); }
.cat__n { font-family: var(--serif); font-size: 2.25rem; line-height: 1; color: var(--taupe); display: block; margin-bottom: 0.65rem; }
.cat h3 { font-size: var(--label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--s-rel); }
.cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.cat li { font-size: var(--small); color: var(--charcoal); line-height: 1.45; }

/* --- Approach (black) ---------------------------------------------------- */

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

.approach__h {
	font-family: var(--serif); font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.5rem);
	line-height: 1.02; letter-spacing: -0.025em; text-transform: uppercase; margin: 0;
}

.approach__h span { color: var(--stone); }
.sec--dark .run__line { background: rgba(231, 226, 217, 0.28); }
.sec--dark .label { color: rgba(231, 226, 217, 0.66); }
.sec--dark .run__n { color: var(--ivory); }
.sec--dark .body, .sec--dark .lede { color: rgba(231, 226, 217, 0.76); }
.sec--dark .tlink { color: var(--ivory); border-bottom-color: rgba(231, 226, 217, 0.4); }
.sec--dark .tlink:hover { border-bottom-color: var(--ivory); }
.sec--dark .btn { background: var(--ivory); color: var(--black); border-color: var(--ivory); }
.sec--dark .btn:hover { background: #fff; }
.sec--dark .btn--ghost { background: transparent; color: var(--ivory); border-color: rgba(231, 226, 217, 0.5); }
.sec--dark .btn--ghost:hover { background: var(--ivory); color: var(--black); }

/* --- Signature offer ----------------------------------------------------- */

.sig { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sig__price { font-family: var(--serif); font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); line-height: 1; margin: var(--s-sec) 0; }
.sig__price small { display: block; font-family: var(--sans); font-size: var(--label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.5rem; }

.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 0; border-top: 1px solid var(--rule); margin-top: var(--s-block); }
.stages div { padding: var(--s-sec) var(--s-rel) 0 0; }
.stages b { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--taupe); margin-bottom: 0.4rem; }
.stages span { font-size: var(--label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

/* --- Price list ---------------------------------------------------------- */

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

.pitem {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--s-rel) clamp(1.5rem, 4vw, 4rem); align-items: baseline;
	padding: clamp(1.5rem, 3vw, 2rem) 0; border-bottom: 1px solid var(--rule-soft);
}

.pitem h3 { font-family: var(--serif); font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); letter-spacing: -0.02em; line-height: 1.1; }
.pitem__p { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pitem__p small { display: block; font-family: var(--sans); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.3rem; text-align: right; }
.pitem__d { grid-column: 1 / -1; max-width: 62ch; margin: 0; color: var(--charcoal); font-size: var(--small); line-height: 1.6; }
.pitem__inc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 0.35rem; }
.pitem__inc span { font-size: var(--label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }

.catblock + .catblock { margin-top: clamp(3rem, 6vw, 5rem); }
.catblock__h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding-bottom: var(--s-rel); }
.catblock__h h2 { font-family: var(--serif); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: -0.02em; }
.catblock__h p { margin: 0; font-size: var(--small); color: var(--grey); }

/* --- Phases -------------------------------------------------------------- */

.phases { display: grid; gap: 0; border-top: 1px solid var(--rule); }

.phase {
	display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1rem, 3vw, 2.5rem); align-items: start;
	padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; border-bottom: 1px solid var(--rule-soft);
}

.phase__n { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--taupe); }
.phase h3 { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
.phase ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.phase li { font-size: var(--label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }

/* --- Case card ----------------------------------------------------------- */

.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.case__img { aspect-ratio: 4 / 3; background: linear-gradient(150deg, var(--mist), var(--sand)); display: grid; place-items: center; margin-bottom: var(--s-sec); }
.case__img span { font-family: var(--serif); font-size: 2.5rem; color: rgba(0, 0, 0, 0.14); letter-spacing: 0.04em; }
.case__meta { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); margin-bottom: var(--s-rel); }
.case h3 { font-family: var(--serif); font-size: 1.75rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }

@media (max-width: 64rem) {
	.intro, .approach, .sig { grid-template-columns: minmax(0, 1fr); }
	.cat { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0 !important; padding-right: 0; }
	.cat:last-child { border-bottom: 0; }
	.phase { grid-template-columns: 3rem minmax(0, 1fr); }
	.phase ul { grid-column: 2; }
}

@media (max-width: 40rem) {
	.pitem { grid-template-columns: minmax(0, 1fr); }
	.pitem__p { text-align: left; }
	.pitem__p small { text-align: left; }
	.catblock__h { grid-template-columns: minmax(0, 1fr); }
	.stages div { padding-right: 0; }
}

/* --- Forms on black ------------------------------------------------------ */
/* The final CTA sits on black, so every form colour has to be restated:
   the defaults are tuned for the light ground and render black on black. */

.sec--dark .field > span { color: rgba(231, 226, 217, 0.72); }

.sec--dark .field input,
.sec--dark .field select,
.sec--dark .field textarea {
	color: var(--ivory);
	background: transparent;
	border-bottom-color: rgba(231, 226, 217, 0.34);
}

.sec--dark .field input::placeholder,
.sec--dark .field textarea::placeholder { color: rgba(231, 226, 217, 0.42); }

.sec--dark .field input:focus,
.sec--dark .field select:focus,
.sec--dark .field textarea:focus { border-bottom-color: var(--ivory); }

/* The dropdown list itself is drawn by the OS, so the option colours are
   set explicitly rather than inherited from the transparent control. */
.sec--dark .field select option { color: var(--black); background: var(--cream); }

.sec--dark :focus-visible { outline-color: var(--ivory); }
.sec--dark .said { background: rgba(231, 226, 217, 0.12); color: var(--ivory); }
.sec--dark .said a { color: var(--ivory); }

/* ==========================================================================
   Personality pass
   The page had one rhythm — rule, heading, grid — repeated seven times.
   These are the treatments that break it.
   ========================================================================== */

/* --- A statement that behaves like an image ------------------------------ */
/* Their own principle is large editorial typography at maximum impact, so
   type carries the weight an art-directed photograph normally would. */

.slab { background: var(--black); color: var(--ivory); padding-block: clamp(3.5rem, 8vw, 7rem); overflow: hidden; }

.slab__type {
	font-family: var(--serif);
	font-size: clamp(3rem, 1rem + 11vw, 11rem);
	line-height: 0.86;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	margin: 0;
}

/* Staggered indents so the block reads as a composition, not a centred
   heading. The offsets are deliberate and asymmetric. */
.slab__l { display: block; }
.slab__l:nth-child(2) { padding-left: 8%; }
.slab__l:nth-child(3) { padding-left: 3%; }
.slab__l:nth-child(4) { padding-left: 14%; }
.slab__x { color: var(--taupe); font-style: italic; }

.slab__foot { display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; align-items: baseline; margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: var(--s-sec); border-top: 1px solid rgba(231, 226, 217, 0.22); }
.slab__foot p { margin: 0; max-width: 46ch; color: rgba(231, 226, 217, 0.78); }

/* --- Oversized pull quote ------------------------------------------------ */

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

.pull__q {
	font-family: var(--serif);
	font-size: clamp(1.875rem, 1.1rem + 3.4vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	margin: 0;
	grid-column: 1 / -1;
	max-width: 20ch;
}

.pull__q em { font-style: italic; color: var(--taupe); }
.pull__a { font-size: var(--small); color: var(--charcoal); max-width: 42ch; }

/* --- Beliefs ------------------------------------------------------------- */
/* Deliberately uneven: the first entry runs wide, the rest sit in two
   columns, so the block does not read as another tidy grid. */

/* Five items in two columns leave the last row half empty, so the closing
   rule belongs to the block rather than to the final cell. */
.beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-soft); }
.belief:last-child { border-bottom: 0; }

.belief { padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.5rem) 0; border-bottom: 1px solid var(--rule-soft); }
.belief:nth-child(odd) { border-right: 1px solid var(--rule-soft); }
.belief h3 { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 0.65rem; }
.belief p { margin: 0; font-size: var(--small); color: var(--charcoal); line-height: 1.6; max-width: 54ch; }
.belief__n { font-family: var(--serif); font-size: 0.9375rem; color: var(--grey); display: block; margin-bottom: 0.75rem; }

/* --- Discipline cards: reward the cursor --------------------------------- */

.cat { transition: background-color 0.35s var(--ease); }
.cat:hover { background: rgba(0, 0, 0, 0.025); }
.cat__n { transition: color 0.35s var(--ease); }
.cat:hover .cat__n { color: var(--black); }

/* --- Work placeholder ---------------------------------------------------- */
/* Honest about being empty rather than dressed up as a case study. */

.awaiting {
	border: 1px dashed var(--stone);
	padding: clamp(2rem, 5vw, 4rem);
	text-align: center;
	color: var(--charcoal);
	max-width: 60ch;
	margin-inline: auto;
}

.awaiting p { margin: 0 auto; max-width: 46ch; font-size: var(--small); line-height: 1.65; }
.awaiting__k { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -0.02em; display: block; margin-bottom: var(--s-rel); color: var(--black); }

@media (max-width: 52rem) {
	.beliefs { grid-template-columns: minmax(0, 1fr); }
	.belief:nth-child(odd) { border-right: 0; }
	.belief { padding-right: 0; }
	.slab__l:nth-child(2), .slab__l:nth-child(3), .slab__l:nth-child(4) { padding-left: 0; }
	.pull { grid-template-columns: minmax(0, 1fr); }
}

/* --- Photography slots --------------------------------------------------- */
/* Each figure holds a real <img>. If the file is not there yet the image
   removes itself and the styled placeholder behind it shows through, so
   adding a photograph is a file upload with no code change. */

.fig { position: relative; margin: 0; overflow: hidden; background: var(--mist); }
/* Hidden until it has actually decoded, so a missing or slow file never
   flashes a broken-image icon over the placeholder. */
.fig img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	position: relative; z-index: 1;
	opacity: 0; transition: opacity 0.5s var(--ease);
}

.fig img.ready { opacity: 1; }

.fig__ph {
	position: absolute; inset: 0; display: grid; place-content: center; gap: 0.5rem;
	text-align: center; padding: 1.5rem;
	background: linear-gradient(150deg, var(--mist), var(--sand));
}

.fig__ph b { font-family: var(--serif); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); letter-spacing: -0.01em; color: var(--black); }
.fig__ph span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }

.fig--wide { aspect-ratio: 21 / 9; }
.fig--band { aspect-ratio: 16 / 9; }
.fig--portrait { aspect-ratio: 4 / 5; }
.fig--square { aspect-ratio: 1; }
.fig--case { aspect-ratio: 4 / 3; }
/* The Brand Build showcase is a wide layout board; cropping it to 16:9
   would cut the outer panels off, so it keeps its own ratio. */
.fig--pano { aspect-ratio: 1916 / 715; }

/* Full-bleed band: escapes the wrap without a horizontal scrollbar. */
.bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.fig__cap {
	display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
	margin-top: 0.75rem; font-size: var(--label); font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey);
}

/* Intro pairs a portrait with the pull quote. */
.pull--img { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
.pull--img .pull__q { grid-column: 1; }
.pull--img .pull__side { grid-row: 1 / span 3; grid-column: 2; }

@media (max-width: 64rem) {
	.pull--img { grid-template-columns: minmax(0, 1fr); }
	.pull--img .pull__q, .pull--img .pull__side { grid-column: 1; grid-row: auto; }
	.fig--wide { aspect-ratio: 16 / 10; }
}