/* ==========================================================================
   Forpseon — Main Stylesheet
   Palette: cream #F5F1EA · ink navy #1B2130 · gold-clay #A9825A · charcoal #2B2A28
   Type: Playfair Display (display serif) · Jost (sans, wide-tracked)
   ========================================================================== */

:root {
	--color-cream: #F7F2EB;       /* Beige */
	--color-cream-soft: #E8DDD2;  /* Dark Beige */
	--color-bronze: #6E4E37;      /* Bronze — logo, primary headings */
	--color-gold: #B88A55;        /* Luxury Gold — lines, icons, buttons, hover only */
	--color-gold-dim: #B88A55;
	--color-navy: #1E2A39;
	--color-navy-soft: #26334480;
	--color-charcoal: #2B2A28;
	--color-charcoal-soft: #5C584F;
	--color-line: rgba(43, 42, 40, 0.12);
	--color-line-light: rgba(247, 242, 235, 0.18);
	--color-white: #FFFFFF;

	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--container-width: 1180px;
	--radius-sm: 2px;
	--transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	color: var(--color-charcoal);
	background: var(--color-cream);
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.15; }
p { margin: 0 0 1em; color: var(--color-charcoal-soft); }
input, textarea { font-family: inherit; font-size: 1rem; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 32px;
}

/* ---------- Type helpers ---------- */
.eyebrow {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 14px;
}
.section-title {
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	color: var(--color-charcoal);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 34px;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 1px solid currentColor;
	border-radius: var(--radius-sm);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
	white-space: nowrap;
}
.btn--outline { color: var(--color-charcoal); border-color: var(--color-charcoal); }
.btn--outline:hover { background: var(--color-charcoal); color: var(--color-cream); }

.btn--ghost-light { color: var(--color-cream); border-color: var(--color-cream); }
.btn--ghost-light:hover { background: var(--color-cream); color: var(--color-navy); }

.btn--dark { color: var(--color-cream); background: var(--color-navy); border-color: var(--color-navy); }
.btn--dark:hover { background: var(--color-charcoal); border-color: var(--color-charcoal); }

.btn--nav { padding: 11px 22px; font-size: 0.66rem; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--color-line);
	transition: border-color var(--transition), box-shadow var(--transition);
}
/* The frosted background lives on a ::before layer rather than directly on
   .site-header. backdrop-filter (like transform/filter) creates a new
   containing block for any position:fixed descendant — and .primary-nav
   (the mobile slide-in panel) is a descendant of .site-header. Putting the
   filter here instead keeps the same frosted look without trapping the
   fixed nav panel inside the header's own height. */
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(247, 242, 235, 0.92);
	backdrop-filter: blur(8px);
	transition: background var(--transition), backdrop-filter var(--transition);
}
/* Completely transparent over the hero on Home — no overlay, no wash.
   Sticky still reserves its own box in the page flow (so "transparent"
   only ever revealed the plain page background, not the photo below it).
   Fixed removes it from flow entirely so it truly floats over the hero. */
body.has-transparent-header .site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	border-bottom-color: transparent;
}
body.has-transparent-header .site-header::before {
	background: transparent;
	backdrop-filter: none;
}
body.has-transparent-header .site-header .primary-nav__list a {
	color: var(--color-white);
}
body.has-transparent-header .site-header .menu-toggle:not(.is-active) span {
	background: var(--color-white);
}
body.has-transparent-header .site-header .site-logo__text { color: var(--color-white); }
/* The uploaded logo image is bronze/brown and nearly invisible over a dark
   photo — force it to a clean white silhouette while the header is
   transparent, then restore its natural color once the bar goes solid. */
body.has-transparent-header .site-header .custom-logo {
	filter: brightness(0) invert(1);
	transition: filter var(--transition);
}
body.has-transparent-header .site-header.is-scrolled .custom-logo {
	filter: none;
}
body.has-transparent-header .site-header .btn--nav { color: var(--color-white); border-color: var(--color-white); }
body.has-transparent-header .site-header.is-scrolled {
	box-shadow: 0 2px 20px rgba(30, 42, 57, 0.08);
	border-bottom-color: var(--color-line);
}
body.has-transparent-header .site-header.is-scrolled::before {
	background: rgba(255, 255, 255, 0.96);
}
body.has-transparent-header .site-header.is-scrolled .primary-nav__list a,
body.has-transparent-header .site-header.is-scrolled .site-logo__text,
body.has-transparent-header .site-header.is-scrolled .btn--nav {
	color: var(--color-charcoal-soft);
}
body.has-transparent-header .site-header.is-scrolled .menu-toggle:not(.is-active) span {
	background: var(--color-charcoal);
}
body.has-transparent-header .site-header.is-scrolled .btn--nav { border-color: var(--color-charcoal); color: var(--color-charcoal); }
.site-header.is-scrolled { box-shadow: 0 2px 20px rgba(30, 42, 57, 0.06); }
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 32px;
}
.site-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-logo__mark {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--color-bronze);
	border: 1px solid var(--color-bronze);
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
}
/* Footer logo lockup: same full logo file as the header, sized to sit
   comfortably next to the copyright line */
.site-logo--footer {
	display: inline-flex;
	align-items: center;
}
.site-logo--footer .logo-mark {
	height: 40px;
	width: auto;
	object-fit: contain;
}
.site-logo--footer .site-logo__mark {
	border: 1px solid var(--color-gold-dim);
	color: var(--color-gold-dim);
}
.site-logo__text {
	font-family: var(--font-sans);
	letter-spacing: 0.25em;
	font-size: 0.85rem;
	text-transform: uppercase;
	color: var(--color-charcoal);
}
.site-logo .custom-logo { max-height: 44px; width: auto; }

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}
.primary-nav__list a {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-charcoal-soft);
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: color var(--transition), border-color var(--transition);
}
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a {
	color: var(--color-gold);
	border-color: var(--color-gold);
}

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
	position: relative;
	z-index: 210;
	transition: opacity var(--transition), visibility var(--transition);
}
.menu-toggle span {
	width: 22px; height: 1px;
	background: var(--color-charcoal);
	transition: background var(--transition);
}
/* Only ONE close control should ever be visible at a time: while the panel
   is open, the dedicated ✕ button inside it is the close action, so the
   hamburger itself is hidden instead of also morphing into an X. */
.menu-toggle.is-active {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Mobile-only nav chrome — hidden on desktop, styled inside the 782px breakpoint */
.primary-nav__close, .primary-nav__backdrop { display: none; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--color-white);
}
.hero__media { position: absolute; inset: 0; }
.hero__img,
.hero__video,
.hero__media .img-placeholder {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero__scrim {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, 0.35); /* exact "Black 35%" overlay for contrast */
}
.hero__content {
	position: relative;
	z-index: 2;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 24px;
}
.hero__mark {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 2.2rem;
	color: var(--color-gold-dim);
	margin-bottom: 6px;
}
img.hero__mark {
	width: 96px;
	height: auto;
	object-fit: contain;
	margin-bottom: 14px;
}
.hero__title {
	font-size: clamp(2.8rem, 8vw, 5.5rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.hero__tagline {
	font-size: 0.8rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-cream);
	margin-bottom: 34px;
}
.hero__scroll {
	position: absolute;
	bottom: 28px; left: 50%;
	transform: translateX(-50%);
	width: 1px; height: 40px;
	background: linear-gradient(180deg, transparent, var(--color-cream));
}

/* ---------- Icon strip ---------- */
.icon-strip { padding: 72px 0; border-bottom: 1px solid var(--color-line); }
.icon-strip__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 28px;
}
.icon-card { text-align: left; }
.icon-card__icon { display: block; width: 30px; height: 30px; color: var(--color-gold); margin-bottom: 16px; }
.icon-card__icon svg { width: 100%; height: 100%; }
.icon-card__title {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-family: var(--font-sans);
	font-weight: 500;
	margin-bottom: 8px;
}
.icon-card__desc { font-size: 0.82rem; margin: 0; }

/* ---------- Story split / page intro (shared 2-col layout) ---------- */
.story-split, .page-intro { padding: 100px 0; }
.story-split__inner, .page-intro__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.story-split__text p, .page-intro__text p { max-width: 420px; }
.story-split__media img, .page-intro__media img,
.story-split__media .img-placeholder, .page-intro__media .img-placeholder {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: var(--radius-sm);
}
.page-intro--center { text-align: center; padding-bottom: 40px; }
.page-intro--center .container { max-width: 720px; }
.page-intro--center .eyebrow { display: block; }

/* ---------- Process band (home, dark) ---------- */
.process-band {
	background: var(--color-navy);
	color: var(--color-cream);
	padding: 90px 0;
}
.process-band__title {
	text-align: center;
	color: var(--color-cream);
	text-transform: uppercase;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: 56px;
}
.process-band__steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 32px;
}
.process-step { text-align: left; border-left: 1px solid var(--color-line-light); padding-left: 20px; }
.process-step__num {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--color-gold-dim);
	margin-bottom: 10px;
}
.process-step__title {
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 8px;
	font-family: var(--font-sans);
	font-weight: 500;
}
.process-step__desc { font-size: 0.8rem; color: rgba(245,241,233,0.65); margin: 0; }

/* ---------- Featured work ---------- */
.featured-work { padding: 100px 0; text-align: center; }
.featured-work .section-title { margin: 18px 0 32px; }
.featured-work__grid {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.featured-work__item, .portfolio-item {
	position: relative;
	display: block;
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: var(--radius-sm);
}
.featured-work__item img, .portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.featured-work__item:hover img, .portfolio-item:hover img { transform: scale(1.06); }

.play-icon {
	position: absolute; top: 50%; left: 50%;
	width: 46px; height: 46px;
	transform: translate(-50%, -50%);
	border: 1px solid var(--color-cream);
	border-radius: 50%;
	background: rgba(27,33,48,0.35);
}
.play-icon::before {
	content: '';
	position: absolute; top: 50%; left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent var(--color-cream);
}

/* ---------- Feature band (about, dark 4-up) ---------- */
.feature-band { background: var(--color-navy); color: var(--color-cream); padding: 64px 0; }
.feature-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.feature-card__icon { display: block; width: 28px; height: 28px; color: var(--color-gold-dim); margin: 0 auto 16px; }
.feature-card__icon svg { width: 100%; height: 100%; }
.feature-card--dark { text-align: center; }
.feature-card__title {
	font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
	font-family: var(--font-sans); font-weight: 500; margin-bottom: 8px;
}
.feature-card__desc { font-size: 0.8rem; color: rgba(245,241,233,0.6); margin: 0; }

/* ---------- Wide media ---------- */
.wide-media img, .wide-media .img-placeholder { width: 100%; height: 420px; object-fit: cover; }

/* ---------- Stats row ---------- */
.stats-row { padding: 72px 0; }
.stats-row__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	text-align: center;
}
.stat { border-left: 1px solid var(--color-line); padding: 0 16px; }
.stat:first-child { border-left: none; }
.stat__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.8rem);
	color: var(--color-charcoal);
	margin-bottom: 8px;
}
.stat__label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-charcoal-soft); }

/* ---------- Services grid ---------- */
.services-grid { padding: 40px 0 100px; }
.services-grid__row { display: grid; gap: 20px; margin-bottom: 20px; }
.services-grid__row--four { grid-template-columns: repeat(4, 1fr); }
.services-grid__row--two { grid-template-columns: repeat(2, 1fr); }
.service-card {
	background: var(--color-cream-soft);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	padding: 32px 26px;
}
.service-card__icon { display: block; width: 26px; height: 26px; color: var(--color-gold); margin-bottom: 18px; }
.service-card__icon svg { width: 100%; height: 100%; }
.service-card__title { font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; font-family: var(--font-sans); font-weight: 500; }
.service-card__desc { font-size: 0.82rem; margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-navy); color: var(--color-cream); padding: 80px 0; text-align: center; }
.cta-band__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-band__title { color: var(--color-cream); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-band__sub { color: rgba(245,241,233,0.7); margin-bottom: 8px; }
.cta-band--split .cta-band__inner--split {
	max-width: var(--container-width);
	flex-direction: row;
	justify-content: space-between;
	text-align: left;
}
.cta-band__title--small { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: 4px; }
.cta-band__note { color: rgba(245,241,233,0.6); margin: 0; }

/* ---------- Portfolio filters / grid ---------- */
.portfolio-gallery { padding: 32px 0 100px; }
.portfolio-filters {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 44px;
}
.portfolio-filter {
	padding: 10px 20px;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	color: var(--color-charcoal-soft);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.portfolio-filter.is-active,
.portfolio-filter:hover { background: var(--color-navy); color: var(--color-cream); border-color: var(--color-navy); }
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.portfolio-item.is-hidden { display: none; }

/* ---------- Process cards page ---------- */
.process-cards { padding: 20px 0 100px; }
.process-cards__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.process-card {
	text-align: center;
	background: var(--color-cream-soft);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	padding: 30px 20px;
}
.process-card__icon { display: block; width: 26px; height: 26px; color: var(--color-gold); margin: 0 auto 16px; }
.process-card__icon svg { width: 100%; height: 100%; }
.process-card__title { font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; font-family: var(--font-sans); font-weight: 500; }
.process-card__desc { font-size: 0.78rem; margin: 0; }

/* ---------- Contact ---------- */
.contact-section { padding: 90px 0 110px; }
.contact-section__inner {
	display: grid;
	grid-template-columns: 1fr 1fr 0.7fr;
	gap: 48px;
	align-items: start;
}
.contact-section__intro p { max-width: 380px; }
.contact-details { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.contact-details li { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; }
.contact-details__icon { width: 20px; height: 20px; color: var(--color-gold); flex-shrink: 0; }
.contact-details__icon svg { width: 100%; height: 100%; }

.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form input, .contact-form textarea {
	background: var(--color-cream-soft);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	color: var(--color-charcoal);
}
.contact-form input:focus, .contact-form textarea:focus {
	outline: 2px solid var(--color-gold);
	outline-offset: 1px;
}
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form .btn { align-self: flex-start; margin-top: 6px; }

.contact-section__media img, .contact-section__media .img-placeholder {
	width: 100%; height: 100%; min-height: 420px; object-fit: cover; border-radius: var(--radius-sm);
}

.form-notice {
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	font-size: 0.85rem;
	margin-bottom: 18px;
}
.form-notice--success { background: rgba(169,130,90,0.15); color: var(--color-gold); border: 1px solid var(--color-gold); }
.form-notice--error { background: rgba(180,60,60,0.12); color: #A33; border: 1px solid #A33; }

/* ---------- Single portfolio ---------- */
.single-portfolio__media { margin-bottom: 40px; }
.single-portfolio__media img, .single-portfolio__media .img-placeholder { width: 100%; max-height: 640px; object-fit: cover; border-radius: var(--radius-sm); }
.single-portfolio__content { max-width: 720px; margin: 0 auto 40px; }
.single-portfolio__embed { position: relative; padding-bottom: 56.25%; height: 0; }
.single-portfolio__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-sm); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-navy); color: var(--color-cream); padding: 48px 0; }
.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.site-footer__copy { margin: 0; font-size: 0.78rem; color: rgba(245,241,233,0.65); }
.social-links { display: flex; gap: 22px; }
.social-links a { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,241,233,0.75); }
.social-links a:hover { color: var(--color-gold-dim); }

/* ---------- Back to top (scroll-up) button with progress ring ---------- */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--color-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 150;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--transition), visibility var(--transition), transform var(--transition), background var(--transition);
	box-shadow: 0 6px 20px rgba(30, 42, 57, 0.25);
}
.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.back-to-top:hover { background: var(--color-charcoal); }
.back-to-top__ring {
	position: absolute;
	inset: 0;
	width: 48px; height: 48px;
	transform: rotate(-90deg);
}
.back-to-top__ring-track {
	fill: none;
	stroke: rgba(247, 242, 235, 0.18);
	stroke-width: 2;
}
.back-to-top__ring-fill {
	fill: none;
	stroke: var(--color-gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 119.4; /* 2 * PI * r(19) */
	stroke-dashoffset: 119.4;
	transition: stroke-dashoffset 120ms linear;
}
.back-to-top__icon {
	position: relative;
	width: 18px; height: 18px;
	color: var(--color-cream);
}
.back-to-top__icon svg { width: 100%; height: 100%; }

@media (max-width: 782px) {
	.back-to-top { right: 16px; bottom: 16px; }
}

/* ---------- Generic page / freeform content ---------- */
.generic-page { padding: 90px 0; }
.page-freeform { padding: 40px 0; }
.page-intro__content, .generic-article__content { max-width: 720px; margin: 0 auto; }
.generic-article__media { margin: 32px 0; }

/* ---------- Placeholder blocks (shown until real photos are uploaded) ---------- */
.img-placeholder {
	width: 100%;
	height: 100%;
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, var(--color-cream-soft), var(--color-cream-soft) 12px, #E7DFCF 12px, #E7DFCF 24px);
	border: 1px dashed var(--color-line);
	border-radius: var(--radius-sm);
	color: var(--color-charcoal-soft);
	text-align: center;
	padding: 20px;
}
.img-placeholder span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.img-placeholder--tall { min-height: 420px; }
.hero .img-placeholder { border: none; border-radius: 0; }


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.icon-strip__grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
	.process-band__steps { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
	.feature-band__grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
	.services-grid__row--four { grid-template-columns: repeat(2, 1fr); }
	.process-cards__grid { grid-template-columns: repeat(3, 1fr); }
	.portfolio-grid { grid-template-columns: repeat(3, 1fr); }
	.testimonials__grid { grid-template-columns: repeat(2, 1fr); }
	.contact-section__inner { grid-template-columns: 1fr 1fr; }
	.contact-section__media { display: none; }
}

@media (max-width: 782px) {
	.site-header__inner { padding: 14px 20px; }
	.primary-nav {
		position: fixed; inset: 0 0 0 auto;
		width: min(82vw, 340px);
		background: var(--color-cream);
		padding: 90px 32px 32px;
		transform: translateX(100%);
		transition: transform var(--transition);
		z-index: 200;
		box-shadow: -8px 0 30px rgba(0,0,0,0.15);
	}
	.primary-nav.is-open { transform: translateX(0); }
	.primary-nav__list { flex-direction: column; align-items: flex-start; gap: 24px; }
	.primary-nav__list a { color: var(--color-charcoal) !important; font-size: 0.9rem; }
	.btn--nav { display: none; }
	.menu-toggle { display: flex; }

	.primary-nav__close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 24px; right: 24px;
		width: 38px; height: 38px;
		border-radius: 50%;
		background: rgba(255,255,255,0.6);
	}
	.primary-nav__close span {
		position: absolute;
		width: 16px; height: 1px;
		background: var(--color-charcoal);
	}
	.primary-nav__close span:first-child { transform: rotate(45deg); }
	.primary-nav__close span:last-child { transform: rotate(-45deg); }

	.primary-nav__backdrop {
		display: block;
		position: fixed; inset: 0;
		background: rgba(20, 24, 32, 0.45);
		z-index: 190;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition), visibility var(--transition);
	}
	.primary-nav__backdrop.is-visible { opacity: 1; visibility: visible; }

	.icon-strip__grid { grid-template-columns: repeat(2, 1fr); }
	.story-split__inner, .page-intro__inner { grid-template-columns: 1fr; }
	.story-split__media { order: -1; }
	.process-band__steps { grid-template-columns: repeat(2, 1fr); }
	.featured-work__grid { grid-template-columns: 1fr; }
	.feature-band__grid { grid-template-columns: 1fr; }
	.stats-row__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
	.stat:nth-child(3) { border-left: none; }
	.services-grid__row--four,
	.services-grid__row--two { grid-template-columns: 1fr; }
	.process-cards__grid { grid-template-columns: 1fr 1fr; }
	.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
	.testimonials__grid { grid-template-columns: 1fr; }
	.contact-form__row { grid-template-columns: 1fr; }
	.cta-band__inner--split { flex-direction: column; text-align: center; gap: 24px; }
	.contact-section__inner { grid-template-columns: 1fr; }
	.container { padding: 0 20px; }
	.hero__title { letter-spacing: 0.03em; }
}