/* =========================================================================
   Clean Theory — main.css
   Quiet-luxury system: Alabaster ground, Ink text, Yew anchor, Bronze accent.
   Tokens live in theme.json; this file carries the crafted details.
   ========================================================================= */

:root {
	--ct-alabaster: #F1EEE6;
	--ct-limestone: #E7E2D4;
	--ct-ink: #1B1A15;
	--ct-yew: #23342C;
	--ct-bronze: #97794A;
	--ct-flint: #6B665A;
	--ct-hairline: rgba(27, 26, 21, 0.14);
	--ct-hairline-dark: rgba(241, 238, 230, 0.16);
	--ct-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ct-gutter: clamp(20px, 6vw, 32px);
}

/* ---------- Page canvas -------------------------------------------------
   Without this, the header/nav run full-bleed edge-to-edge while the text
   columns sit in a much narrower measure — on a wide monitor that mismatch
   is what makes the page feel unfinished rather than designed. Capping the
   whole site at a boxed canvas ties every section, including full-bleed
   color bands, to the same outer edge. */
.wp-site-blocks {
	max-width: 1680px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Base refinements ------------------------------------------ */

html, body {
	overflow-x: clip;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--ct-bronze);
	color: var(--ct-alabaster);
}

a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.3s var(--ct-ease);
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

:focus-visible {
	outline: 2px solid var(--ct-bronze);
	outline-offset: 3px;
	border-radius: 1px;
}

/* Skip link (output by WordPress core for block themes) */
.skip-link.screen-reader-text:focus {
	background: var(--ct-ink);
	color: var(--ct-alabaster);
	padding: 12px 20px;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	z-index: 100000;
}

/* ---------- Section rhythm --------------------------------------------- */

/* ---------- Layout frame ------------------------------------------------
   Deterministic content measure. Does not rely on core-generated layout CSS,
   which GoDaddy's optimizer can drop or cache stale. */

/* ---------- Content wrapper --------------------------------------------
   WordPress gives <main>/.entry-content no wideSize of its own, so both it
   AND every section inside it (ct-hero, ct-section, ct-band) silently fall
   back to the global 680px default with forced centering — nesting each
   section in an artificially narrow, offset box regardless of that
   section's own declared wideSize. The header sits outside this wrapper
   entirely, which is why it never shared the same left edge. Removing the
   cap on both the wrapper and its direct children lets each section's own
   layout settings (already correctly generated per-instance) finally
   govern actual rendered width, matching the header's math exactly. */
.entry-content.is-layout-constrained {
	max-width: none;
}

.entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Sections carry their own rhythm via padding; WordPress's default blockGap
   margins between top-level blocks stack on top of it and inflate the seams.
   Zero them out — padding alone governs vertical space. */
.entry-content.is-layout-constrained > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Within each section, non-heading text (eyebrow, lede, body paragraphs) was
   being force-centered by WordPress's own !important rule while headings
   default to flush-left — the same mismatch as above, one level deeper.
   Flush-left this text too so eyebrow/paragraphs share the heading's edge,
   with a max-width kept only for comfortable reading, not for centering. */
.ct-section > :where(:not(.alignwide):not(.alignfull)),
.ct-band > .wp-block-group > :where(:not(.alignwide):not(.alignfull)) {
	max-width: min(680px, 100%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* The band's inner wrapper carries its own core-generated contentSize cap;
   lift it so the 800px text measure above actually governs. */
.ct-band > .wp-block-group {
	max-width: none !important;
}

/* Wide multi-column sections (the theory steps, project metrics, the current-
   work nod, capabilities grid, project gallery) and any wide heading: forced
   to the 1080 measure and centered, using a descendant selector so nesting
   depth can't break it and so it holds even if WordPress's per-instance layout
   CSS is stripped by the host optimizer. This is what keeps these blocks
   centered on the page rather than drifting to the left edge. */
.ct-section .alignwide,
.ct-band .alignwide {
	max-width: min(1080px, 100%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Header/nav row centers itself by default (WordPress core) — matching the
   centered body content restored above, no override needed here. */

/* WordPress inserts a root blockGap margin between the header template part
   and the page content — the mystery gap under the nav on every page. The
   hero's own padding governs that space instead. */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.ct-section {
	padding-top: clamp(36px, 5vw, 52px);
	padding-bottom: clamp(36px, 5vw, 52px);
	padding-left: var(--ct-gutter);
	padding-right: var(--ct-gutter);
}

/* Two sections back-to-back would otherwise stack full bottom + full top
   padding. Collapse the seam: the second section keeps only a short lead-in. */
.ct-section + .ct-section {
	padding-top: clamp(16px, 2.5vw, 24px);
}

.ct-hero {
	padding-top: clamp(40px, 5vw, 64px);
	padding-bottom: clamp(20px, 3vw, 36px);
	padding-left: var(--ct-gutter);
	padding-right: var(--ct-gutter);
}

.ct-band {
	padding-top: clamp(44px, 6vw, 68px);
	padding-bottom: clamp(44px, 6vw, 68px);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Bands are alignfull (edge-to-edge background); their inner content
   wrapper still needs the standard gutter so text doesn't run flush. */
.ct-band > .wp-block-group {
	padding-left: var(--ct-gutter);
	padding-right: var(--ct-gutter);
}

.ct-hairline-top {
	border-top: 1px solid var(--ct-hairline);
}

/* Faint drafting lattice on limestone bands */
.ct-lattice {
	background-image: url('../img/lattice.svg');
	background-size: 160px 160px;
	background-repeat: repeat;
}

/* ---------- Recurring type devices ------------------------------------- */

.ct-eyebrow {
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.38em;
	text-transform: uppercase;
	color: var(--ct-bronze);
	margin-bottom: 1.4rem;
}

.ct-eyebrow-dark {
	color: var(--ct-bronze);
}

.ct-lede {
	line-height: 1.6;
}

/* Bronze rule — the wordmark's horizon line, reused as a section device.
   Finished with a surveyor's tick at each end. */
.wp-block-separator.ct-rule {
	position: relative;
	width: 56px;
	max-width: 56px;
	border: none;
	border-bottom: 1.5px solid var(--ct-bronze);
	background: none;
	margin-left: 0;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	opacity: 1;
	overflow: visible;
}

.wp-block-separator.ct-rule::before,
.wp-block-separator.ct-rule::after {
	content: '';
	position: absolute;
	bottom: -4.5px;
	width: 1.5px;
	height: 8px;
	background: var(--ct-bronze);
}

.wp-block-separator.ct-rule::before {
	left: 0;
}

.wp-block-separator.ct-rule::after {
	right: 0;
}

/* Spaced-caps text link with a quiet arrow — set in bronze so the
   corridors read as actionable while staying a rank below the button. */
.ct-textlink a {
	display: inline-block;
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ct-bronze);
	padding: 10px 0;
}

.ct-textlink a::after {
	content: '\2192';
	display: inline-block;
	margin-left: 10px;
	color: var(--ct-bronze);
	transition: transform 0.35s var(--ct-ease);
}

.ct-textlink a:hover,
.ct-textlink a:focus-visible {
	color: var(--ct-ink);
}

/* On limestone bands bronze recedes into the warm ground — flip to ink
   there, hover to bronze. Each ground gets the color that carries. */
.ct-band.ct-lattice .ct-textlink a {
	color: var(--ct-ink);
}

.ct-band.ct-lattice .ct-textlink a:hover,
.ct-band.ct-lattice .ct-textlink a:focus-visible {
	color: var(--ct-bronze);
}

.ct-textlink a:hover::after,
.ct-textlink a:focus-visible::after {
	transform: translateX(6px);
}

/* Numbered steps */
.ct-num {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--ct-bronze);
	line-height: 1;
	margin-bottom: 0.35rem;
}

.ct-steps {
	gap: clamp(28px, 4vw, 56px);
	margin-top: clamp(16px, 2.5vw, 28px);
}

/* Bind each step tightly: kill the inherited block gap inside step
   columns and rely on the small margins below. */
.ct-steps .wp-block-column > * {
	margin-block-start: 0;
}

/* Number and title share a line: "01 Select". */
.ct-steps .ct-num {
	display: inline-block;
	font-size: 24px;
	margin: 0 0.5rem 0 0;
}

.ct-steps h3 {
	display: inline;
	margin: 0;
}

.ct-steps p:not(.ct-num) {
	font-size: 15.5px;
	line-height: 1.75;
	margin-top: 0.55rem;
}

/* Founder quote */
.ct-founder-quote {
	margin: 0 0 1.6rem;
}

.ct-founder-quote p {
	margin-bottom: 1rem;
}

.ct-founder-quote cite {
	display: block;
	margin-top: 1.4rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 20px;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--ct-ink);
}

/* Signature rule above the name — reads like a signed letter */
.ct-founder-quote cite::before {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	background: var(--ct-bronze);
	margin-bottom: 10px;
}

/* The Illinois line — one paragraph, kept or removed cleanly */
.ct-denominator {
	border-left: 1.5px solid var(--ct-bronze);
	padding-left: 20px;
	max-width: 56ch;
}

/* Serif standalone line */
.ct-serif-line {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
	font-size: clamp(21px, 2.6vw, 26px);
	line-height: 1.45;
	color: var(--ct-ink);
}

/* ---------- Imagery ----------------------------------------------------- */

.ct-frame {
	position: relative;
	margin: 0;
}

.ct-frame img {
	display: block;
	width: 100%;
	height: auto;
	/* Inset bronze border drawn on the image itself, so it can never
	   spill over a caption below the photo. */
	outline: 1px solid rgba(151, 121, 74, 0.55);
	outline-offset: -12px;
}

.ct-frame figcaption {
	font-size: 12.5px;
	letter-spacing: 0.06em;
	color: var(--ct-flint);
	margin-top: 12px;
	text-align: left;
}

.ct-frame figcaption::after {
	content: none;
}

/* Principal portrait — Approach page */
.ct-principal {
	margin-top: 1.8rem;
	gap: clamp(28px, 4vw, 48px);
}

.ct-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top;
}

.ct-portrait figcaption {
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ct-flint);
	margin-top: 14px;
}

.ct-gallery .wp-block-column {
	overflow: hidden;
}

/* Gallery frames: bronze line runs at the outer edge of each picture (these
   slots hold labeled site graphics), drawn on the figure so image scaling
   below can't shift it. */
.ct-gallery .ct-frame {
	position: relative;
	overflow: hidden;
}

.ct-gallery .ct-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid rgba(151, 121, 74, 0.55);
	pointer-events: none;
}

.ct-gallery .ct-frame img {
	outline: none;
}

/* First two gallery images carry a thin black border baked into the file —
   scale them slightly so the clip crops it out. The concept plan (third)
   stays uncropped. */
.ct-gallery .wp-block-column:nth-child(-n+2) .ct-frame img {
	transform: scale(1.03);
}

.ct-gallery .ct-frame img {
	transition: transform 1.1s var(--ct-ease);
}

.ct-gallery .ct-frame:hover img {
	transform: scale(1.02);
}

.ct-gallery .wp-block-column:nth-child(-n+2) .ct-frame:hover img {
	transform: scale(1.05);
}

/* Home project card — linked image gets the same quiet hover as the gallery */
.ct-project-nod .ct-frame {
	overflow: hidden;
}

.ct-project-nod .ct-frame img {
	transition: transform 1.1s var(--ct-ease);
	/* This slot holds a labeled site graphic — run the bronze line at the
	   picture's outer edge so it never crosses the annotations. */
	outline-offset: -1px;
}

.ct-project-nod .ct-frame a:hover img,
.ct-project-nod .ct-frame a:focus-visible img {
	transform: scale(1.02);
}

.ct-aerial {
	padding-top: clamp(8px, 2vw, 24px);
	padding-bottom: clamp(8px, 2vw, 24px);
}

/* ---------- Metrics ----------------------------------------------------- */

.ct-metrics {
	gap: 0;
}

/* Bind each label tightly to its own value: kill the inherited block gap
   inside metric columns and keep only a small label margin. */
.ct-metrics .wp-block-column > * {
	margin-block-start: 0;
}

/* When the columns stack on mobile, separate the pairs clearly. */
@media (max-width: 781px) {
	.ct-metrics {
		gap: 30px;
	}
}

.ct-metric-label {
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--ct-flint);
	margin-bottom: 0.4rem;
}

.ct-metric-value {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(24px, 2.8vw, 32px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--ct-ink);
}

@media (min-width: 782px) {
	.ct-metrics .wp-block-column {
		border-left: 1px solid var(--ct-hairline);
		padding-left: 28px;
	}
	.ct-metrics .wp-block-column:first-child {
		border-left: none;
		padding-left: 0;
	}
}

/* ---------- Standards list ---------------------------------------------- */

.ct-standards {
	list-style: none;
	padding-left: 0;
	margin-top: 1.8rem;
	counter-reset: standard;
}

.ct-standards li {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(21px, 2.6vw, 27px);
	font-weight: 500;
	line-height: 1.3;
	padding: 18px 0;
	border-top: 1px solid var(--ct-hairline);
	counter-increment: standard;
}

/* Spec-book numerals — 1.1, 1.2, 1.3 — set off each standard */
.ct-standards li::before {
	content: '1.' counter(standard);
	display: inline-block;
	min-width: 44px;
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--ct-bronze);
}

.ct-standards li:last-child {
	border-bottom: 1px solid var(--ct-hairline);
}

/* ---------- Capabilities grid ------------------------------------------- */

.ct-caps {
	gap: clamp(28px, 4vw, 56px);
	margin-bottom: clamp(24px, 3vw, 40px);
}

.ct-caps h3 {
	font-size: 21px;
	margin-bottom: 0.6rem;
}

.ct-caps p {
	font-size: 15.5px;
	line-height: 1.75;
}

.ct-native-line {
	border-top: 1px solid var(--ct-hairline);
	padding-top: 26px;
	margin-top: clamp(12px, 2vw, 24px);
}

.ct-native-line p {
	font-size: 14.5px;
	letter-spacing: 0.01em;
	max-width: none;
}

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

.ct-bigmail {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1;
}

/* Contact page: pull the phone number up tight under the hero lede.
   Scoped via :has so no other page's hero/section seam moves. */
.ct-section:has(> .ct-bigmail) {
	padding-top: 4px;
}

.ct-hero:has(+ .ct-section > .ct-bigmail) {
	padding-bottom: 10px;
}

.ct-bigmail a {
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(28px, 5.4vw, 52px);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-decoration: none;
	color: var(--ct-ink);
	overflow-wrap: anywhere;
}

.ct-bigmail a:hover,
.ct-bigmail a:focus-visible {
	color: var(--ct-bronze);
}

.ct-phone {
	color: var(--ct-flint);
	margin-top: 0.4rem;
}

.ct-form-slot {
	margin-top: clamp(16px, 2.5vw, 24px);
	padding-top: clamp(16px, 2.5vw, 24px);
}

/* Form styling — applies to WPForms Lite and generic form fields */
.ct-form-slot input[type='text'],
.ct-form-slot input[type='email'],
.ct-form-slot input[type='tel'],
.ct-form-slot textarea,
.ct-form-slot select,
.wpforms-container input[type='text'],
.wpforms-container input[type='email'],
.wpforms-container input[type='tel'],
.wpforms-container textarea,
.wpforms-container select {
	width: 100%;
	background: transparent;
	border: 1px solid var(--ct-hairline) !important;
	border-radius: 2px !important;
	padding: 14px 16px !important;
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
	font-size: 15px !important;
	color: var(--ct-ink) !important;
	transition: border-color 0.3s var(--ct-ease);
}

.ct-form-slot input:focus,
.ct-form-slot textarea:focus,
.wpforms-container input:focus,
.wpforms-container textarea:focus {
	border-color: var(--ct-ink) !important;
	outline: 2px solid var(--ct-bronze);
	outline-offset: 2px;
}

.wpforms-container .wpforms-field-label,
.ct-form-slot label {
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3em !important;
	text-transform: uppercase !important;
	color: var(--ct-flint) !important;
	margin-bottom: 8px !important;
}

.wpforms-container .wpforms-field {
	padding: 12px 0 !important;
}

.wpforms-container button[type='submit'],
.ct-form-slot button[type='submit'] {
	background: transparent !important;
	color: var(--ct-ink) !important;
	border: 1px solid var(--ct-ink) !important;
	border-radius: 2px !important;
	padding: 16px 26px 15px 30px !important;
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.34em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background 0.35s var(--ct-ease), color 0.35s var(--ct-ease);
}

.wpforms-container button[type='submit']:hover,
.ct-form-slot button[type='submit']:hover {
	background: var(--ct-ink) !important;
	color: var(--ct-alabaster) !important;
}

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

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.35s var(--ct-ease), color 0.35s var(--ct-ease), border-color 0.35s var(--ct-ease);
}

/* Light variant for the Yew band */
.ct-btn-light .wp-block-button__link {
	color: var(--ct-alabaster);
	border-color: rgba(241, 238, 230, 0.65);
	background: transparent;
}

.ct-btn-light .wp-block-button__link:hover,
.ct-btn-light .wp-block-button__link:focus {
	background: var(--ct-alabaster);
	color: var(--ct-yew);
	border-color: var(--ct-alabaster);
}

/* ---------- Header ------------------------------------------------------- */

.ct-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(241, 238, 230, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ct-hairline);
	padding: 16px clamp(18px, 3vw, 32px);
}

.ct-brand {
	gap: 14px;
}

/* The wordmark is the mark: CLEAN roman, THEORY italic, bronze full stop,
   the division in spaced caps beneath. */
.ct-wm-link {
	display: block;
	text-decoration: none;
	color: var(--ct-ink);
	line-height: 1;
}

.ct-wm-line {
	display: block;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.06em;
}

.ct-wm-line em {
	font-style: italic;
	font-size: 21px;
	letter-spacing: 0.02em;
}

.ct-dot {
	color: var(--ct-bronze);
}

/* Inline wordmark — the brand name set as the logo wherever it appears
   in running text. */
.ct-wm-inline {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.ct-wm-inline em {
	font-style: italic;
	letter-spacing: 0.02em;
}

/* Embedded location map — framed like the site's graphics, toned to the
   palette until hovered. */
.ct-map iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 42vw, 460px);
	border: 0;
	outline: 1px solid var(--ct-bronze);
	outline-offset: -1px;
	filter: grayscale(0.85);
	transition: filter 0.5s var(--ct-ease);
}

.ct-map:hover iframe {
	filter: none;
}

.ct-wm-div {
	display: block;
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.42em;
	color: var(--ct-bronze);
	margin-top: 2px;
}

.ct-brand .wp-block-site-logo img {
	display: block;
}

.ct-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 14px 2px;
	position: relative;
	text-decoration: none;
}

.ct-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 8px;
	height: 1px;
	background: var(--ct-bronze);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s var(--ct-ease);
}

.ct-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.ct-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.ct-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Home page: no persistent underline in the nav — the wordmark is the marker.
   Hover/focus underlines still work. */
.home .ct-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content:not(:hover):not(:focus-visible)::after {
	transform: scaleX(0);
}

/* Mobile overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(24px, 6vw, 48px);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 15px;
	letter-spacing: 0.3em;
	padding: 14px 0;
}

/* In the overlay the desktop underline lands mid-text (different layout box).
   Drop it there; the current page is marked in bronze instead. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
	color: var(--ct-bronze);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: currentColor;
}

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

.ct-footer {
	padding: clamp(56px, 8vw, 88px) clamp(20px, 4vw, 40px) 32px;
}

.ct-footer-cols {
	gap: clamp(32px, 5vw, 64px);
}

.ct-wordmark .ct-wm-top {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: none;
	line-height: 1.2;
	margin-bottom: 0;
}

.ct-wordmark .ct-wm-top em {
	font-style: italic;
	font-size: 25px;
	letter-spacing: 0.02em;
}

.ct-wordmark .ct-wm-top::after {
	content: none;
}

.ct-wordmark .ct-wm-sub {
	font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.44em;
	text-transform: uppercase;
	color: var(--ct-bronze);
	margin-top: 2px;
}

.ct-footer-note {
	color: rgba(241, 238, 230, 0.72);
	max-width: 36ch;
	margin-top: 1.4rem;
}

.ct-footer .ct-eyebrow {
	margin-bottom: 1.1rem;
}

.ct-footer-nav {
	list-style: none;
	padding-left: 0;
}

.ct-footer-nav .wp-block-pages-list__item {
	margin: 9px 0;
}

.ct-footer-nav .wp-block-pages-list__item a {
	color: var(--ct-alabaster);
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.04em;
}

.ct-footer-nav .wp-block-pages-list__item a:hover,
.ct-footer-nav .wp-block-pages-list__item a:focus-visible {
	color: var(--ct-bronze);
}

.ct-footer-contact a {
	color: var(--ct-alabaster);
	text-decoration: underline;
	text-decoration-color: rgba(241, 238, 230, 0.4);
}

.ct-footer-contact a:hover {
	color: var(--ct-bronze);
}

/* Closing line — the firm gets the last word on every page */
.ct-footer-line {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 19px;
	letter-spacing: 0.02em;
	color: rgba(241, 238, 230, 0.85);
	margin-top: clamp(40px, 6vw, 64px);
	margin-bottom: 0;
}

.ct-footer-legal {
	border-top: 1px solid var(--ct-hairline-dark);
	margin-top: 18px;
	padding-top: 22px;
}

.ct-footer-legal p {
	color: rgba(241, 238, 230, 0.6);
	font-size: 12.5px;
	letter-spacing: 0.04em;
}

/* ---------- Yew band content -------------------------------------------- */

/* Faint topographic contours on the deep-green band — the land itself,
   said quietly. Inlined as a data URI (SVG file writes are restricted). */
.ct-band-yew {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520' width='520' height='520' fill='none' stroke='%23F1EEE6' stroke-opacity='0.045' stroke-width='1'%3E%3Cpath d='M60,180 C90,90 230,60 300,110 C370,160 350,260 270,290 C190,320 40,270 60,180 Z'/%3E%3Cpath d='M95,185 C120,115 225,95 285,135 C345,175 325,245 260,268 C195,291 75,255 95,185 Z'/%3E%3Cpath d='M130,190 C150,140 220,128 268,158 C316,188 300,232 252,248 C204,264 112,240 130,190 Z'/%3E%3Cpath d='M160,193 C173,163 216,155 249,175 C282,195 272,222 242,232 C212,242 147,223 160,193 Z'/%3E%3Cpath d='M330,430 C300,350 380,290 450,320 C520,350 520,440 460,470 C400,500 360,510 330,430 Z'/%3E%3Cpath d='M355,420 C335,360 395,318 448,342 C501,366 498,432 452,452 C406,472 375,480 355,420 Z'/%3E%3Cpath d='M378,412 C365,372 405,344 442,360 C479,376 477,420 445,434 C413,448 391,452 378,412 Z'/%3E%3Cpath d='M0,60 C120,40 260,90 380,70 C440,60 490,40 520,50'/%3E%3Cpath d='M0,92 C120,74 255,120 375,100 C438,90 492,72 520,82'/%3E%3Cpath d='M0,480 C90,460 200,500 310,482 C400,468 470,478 520,464'/%3E%3C/svg%3E");
	background-size: 520px 520px;
	background-repeat: repeat;
}

/* Replaces the 4px spacer block that used to sit above the button */
.ct-band-yew .wp-block-buttons {
	margin-top: 10px;
}

.ct-band-yew .ct-band-contactline {
	color: rgba(241, 238, 230, 0.75);
	letter-spacing: 0.08em;
	margin-bottom: 1.6rem;
}

/* ---------- Motion: scroll reveals -------------------------------------- */

html.js .ct-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.9s var(--ct-ease), transform 0.9s var(--ct-ease);
	will-change: opacity, transform;
}

html.js .ct-reveal.in {
	opacity: 1;
	transform: none;
}

/* Hero stagger — eyebrow, headline, rule, lede, actions arrive in sequence.
   The parent still gates on .in; children carry their own delayed rise. */
html.js .ct-hero.ct-reveal {
	transform: none;
}

html.js .ct-hero.ct-reveal > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.8s var(--ct-ease), transform 0.8s var(--ct-ease);
}

html.js .ct-hero.ct-reveal.in > * {
	opacity: 1;
	transform: none;
}

html.js .ct-hero.ct-reveal.in > :nth-child(2) { transition-delay: 0.09s; }
html.js .ct-hero.ct-reveal.in > :nth-child(3) { transition-delay: 0.18s; }
html.js .ct-hero.ct-reveal.in > :nth-child(4) { transition-delay: 0.27s; }
html.js .ct-hero.ct-reveal.in > :nth-child(5) { transition-delay: 0.36s; }

/* The bronze rule draws itself left-to-right as the hero arrives —
   a pen stroke on the drawing set. */
html.js .ct-hero.ct-reveal > .wp-block-separator.ct-rule {
	transform: translateY(14px) scaleX(0);
	transform-origin: left center;
	transition: opacity 0.8s var(--ct-ease), transform 1s var(--ct-ease);
}

html.js .ct-hero.ct-reveal.in > .wp-block-separator.ct-rule {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.js .ct-reveal,
	html.js .ct-hero.ct-reveal > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.ct-gallery .ct-frame img,
	.ct-project-nod .ct-frame img,
	.ct-textlink a::after,
	.wp-element-button {
		transition: none !important;
	}
	.ct-gallery .ct-frame:hover img,
	.ct-project-nod .ct-frame a:hover img {
		transform: none;
	}
	/* Reduced motion: keep the black-edge crop, just without movement */
	.ct-gallery .wp-block-column:nth-child(-n+2) .ct-frame img,
	.ct-gallery .wp-block-column:nth-child(-n+2) .ct-frame:hover img {
		transform: scale(1.03) !important;
	}
}

/* ---------- Small screens ------------------------------------------------ */

@media (max-width: 781px) {
	/* Tighter vertical rhythm on phones — desktop keeps the airier scale */
	.ct-section {
		padding-top: 32px;
		padding-bottom: 32px;
	}
	.ct-section + .ct-section {
		padding-top: 14px;
	}
	.ct-hero {
		padding-top: 44px;
		padding-bottom: 18px;
	}
	.ct-band {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.wp-block-separator.ct-rule {
		margin-top: 1.4rem;
		margin-bottom: 1.4rem;
	}
	.ct-eyebrow {
		margin-bottom: 1rem;
	}
	h1.wp-block-heading {
		margin-bottom: 0.4rem;
	}
	.ct-metric-value {
		margin-bottom: 0;
	}
	.ct-portrait {
		max-width: 300px;
	}
	.ct-footer {
		text-align: left;
	}
	.ct-footer-legal {
		gap: 6px;
	}
}