/**
 * Frederico Outdoor Living — Main Stylesheet
 *
 * Design direction: "The Gallery" — photography-first, minimal, premium.
 * Typography: Cormorant Garamond (headings) + Lato (UI/body).
 * Accent: Gold (#C6A843), Blue (#6099AF) available.
 *
 * Breakpoints (can't use custom properties in @media — reference only):
 *
 *   Desktop:  769px and up (default styles, no media query needed)
 *   Tablet:   max-width: 768px  — hamburger nav, 1-col layouts, smaller type
 *   Mobile:   max-width: 600px  — tighter spacing, stacked grids, smaller heroes
 *
 *   "on mobile"  = 600px and below
 *   "on tablet"  = 601px–768px
 *   "on desktop" = 769px and up
 *
 * @package Frederico
 */

/* ==========================================================================
   1. Design Tokens (Custom Properties)
   ========================================================================== */

:root {
	/* Colors */
	--color-bg:        #FAFAF8;
	--color-surface:   #F4F4F2;
	--color-ink:       #1A1A1A;
	--color-ink-muted: #666666;
	--color-ink-faint: #CCCCCC;
	--color-dark:      #111111;
	--color-overlay:   rgba(15, 15, 15, 0.6);
	--color-white:     #FFFFFF;
	--color-gold:      #C6A843;
	--color-blue:      #6099AF;
	--color-accent:    var(--color-gold);  /* swap to --color-blue to switch accent */

	/* Typography — Families */
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body:    'Lato', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Typography — Sizes */
	--text-hero:    clamp(3rem, 6vw, 5.5rem);
	--text-h2:      clamp(2rem, 4vw, 3.25rem);
	--text-h3:      clamp(1.5rem, 2.5vw, 2rem);
	--text-eyebrow: 0.8125rem;
	--text-body:    1.0625rem;
	--text-caption: 0.75rem;

	/* Spacing */
	--space-xs:  0.5rem;
	--space-sm:  1rem;
	--space-md:  2rem;
	--space-lg:  4rem;
	--space-xl:  6rem;
	--space-2xl: 8rem;

	/* Layout */
	--container-max: 1200px;
	--container-pad: var(--space-md);

	/* Transitions */
	--transition: 0.3s ease;
}


/* ==========================================================================
   2. Reset & Base
   ========================================================================== */

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

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: var(--text-body);
	line-height: 1.8;
	color: var(--color-ink);
	background-color: var(--color-bg);
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {
	list-style: none;
}

button {
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 300;
	line-height: 1.15;
}

h1 {
	font-size: var(--text-hero);
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--text-h2);
}

h3 {
	font-size: var(--text-h3);
}

.eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-eyebrow);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--color-accent);
}

blockquote {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-style: italic;
	font-weight: 300;
	line-height: 1.4;
}


/* ==========================================================================
   4. Layout Utilities
   ========================================================================== */

.container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

.section {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}


/* ==========================================================================
   5. Site Header
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: background-color var(--transition), box-shadow var(--transition);
}

.site-header--scrolled {
	background-color: var(--color-bg);
	box-shadow: 0 1px 0 var(--color-ink-faint);
}

.site-header--solid {
	box-shadow: none;
}

.site-header--solid.site-header--shadow {
	box-shadow: 0 1px 0 var(--color-ink-faint);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 1.05rem var(--container-pad);
}

.site-header__logo {
	display: flex;
	align-items: center;
}

.site-header__logo-img {
	height: 95px;
	width: auto;
	transition: opacity var(--transition);
}

@media (max-width: 600px) {
	.site-header__logo-img {
		height: 65px;
	}
}

/* Default: show white logo on transparent header over hero */
.site-header__logo-img--dark {
	display: none;
}

.site-header__logo-img--light {
	display: block;
}

/* Scrolled: switch to dark logo on white background */
.site-header--scrolled .site-header__logo-img--dark {
	display: block;
}

.site-header--scrolled .site-header__logo-img--light {
	display: none;
}

/* Fallback text site name (if logos ever removed) */
.site-header__site-name {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	color: var(--color-white);
	transition: color var(--transition);
}

.site-header--scrolled .site-header__site-name {
	color: var(--color-ink);
}

/* Navigation */
.site-nav__list {
	display: flex;
	gap: 2.75rem;
}

.site-nav__list li a {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--color-white);
	transition: color var(--transition), opacity var(--transition);
	opacity: 0.85;
}

.site-nav__list li a:hover {
	opacity: 1;
	color: var(--color-accent);
}

@media (min-width: 881px) {
	.site-header--scrolled .site-nav__list li a {
		color: var(--color-ink);
	}
}

/* Hamburger toggle — hidden on desktop */
.site-header__menu-toggle {
	display: none;
}

.site-header__hamburger {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-white);
	position: relative;
	transition: background-color var(--transition);
}

.site-header__hamburger::before,
.site-header__hamburger::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: inherit;
	transition: transform var(--transition);
}

.site-header__hamburger::before {
	top: -7px;
}

.site-header__hamburger::after {
	top: 7px;
}

.site-header--scrolled .site-header__hamburger {
	background-color: var(--color-ink);
}


/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-color: var(--color-dark);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Video background — only renders when .hero--video is present */
.hero__video-wrap {
	display: none;
}

.hero--video .hero__video-wrap {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.hero__video-wrap iframe,
.hero__video {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: max(100vw, 189.72vh) !important; /* 1/0.5271 aspect ratio */
	height: max(100vh, 52.71vw) !important;
	min-width: 100% !important;
	min-height: 100% !important;
	transform: translate(-50%, -50%) !important;
	pointer-events: none !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* No overlay when video is playing */
.hero--video .hero__overlay {
	background-color: transparent;
}

/* TODO: Evaluate mobile video performance before launch — see todo list */

.hero__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-overlay);
}

.hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--color-white);
	padding: var(--space-md);
}

.hero__title {
	font-style: italic;
	margin-bottom: var(--space-sm);
}

.hero__tagline {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: var(--space-lg);
}

.hero__cta {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--text-eyebrow);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.4);
	padding: 0.875rem 2.5rem;
	transition: border-color var(--transition), background-color var(--transition);
}

.hero__cta:hover {
	border-color: var(--color-white);
	background-color: rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   7. Site Footer
   ========================================================================== */

.site-footer {
	background-color: var(--color-ink);
	color: var(--color-white);
	padding: var(--space-xl) 0 var(--space-md);
}

.site-footer__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	gap: var(--space-md);
}

/* Left column: brand, contact */
.site-footer__brand {
	grid-column: 1;
}

.site-footer__contact {
	grid-column: 1;
}

/* Right column: nav stacked vertically */
.site-footer__nav {
	grid-column: 2;
	grid-row: 1 / 3;
	text-align: right;
	padding-top: var(--space-sm);
}

/* Social icons: full width, centered at bottom */
.site-footer__social {
	grid-column: 1 / -1;
	justify-content: center;
}

/* Copyright: full width, centered */
.site-footer__copy {
	grid-column: 1 / -1;
	text-align: center;
}

.site-footer__logo {
	height: 80px;
	width: auto;
	display: block;
	margin-bottom: var(--space-xs);
}

.site-footer__name {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 300;
	display: block;
	margin-bottom: var(--space-xs);
}

.site-footer__address {
	font-style: normal;
	font-size: var(--text-caption);
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
}

.site-footer__contact a {
	display: block;
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(255, 255, 255, 0.75);
	transition: color var(--transition);
}

.site-footer__contact a:hover {
	color: var(--color-white);
}

.site-footer__nav-list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-xs);
}

.site-footer__nav-list li a {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.7);
	transition: color var(--transition);
}

.site-footer__nav-list li a:hover {
	color: var(--color-white);
}

.site-footer__social {
	display: flex;
	gap: var(--space-md);
}

.site-footer__social a {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.7);
	transition: color var(--transition);
}

.site-footer__social a:hover {
	color: var(--color-white);
}

.site-footer__copy {
	font-size: var(--text-caption);
	color: rgba(255, 255, 255, 0.5);
	margin-top: var(--space-sm);
}


/* ==========================================================================
   8. Responsive — Mobile
   ========================================================================== */

/* Close button — hidden on desktop */
.site-nav__close {
	display: none;
}

/* Overlay — hidden on desktop */
.site-nav-overlay {
	display: none;
}

/* Lock body scroll when nav is open */
body.nav-open {
	overflow: hidden;
}

@media (max-width: 880px) {
	.site-header__menu-toggle {
		display: block;
		padding: var(--space-xs);
	}

	/* Hamburger → X animation */
	.site-header__menu-toggle[aria-expanded="true"] .site-header__hamburger {
		background-color: transparent;
	}

	.site-header__menu-toggle[aria-expanded="true"] .site-header__hamburger::before {
		top: 0;
		transform: rotate(45deg);
		background-color: var(--color-white);
	}

	.site-header__menu-toggle[aria-expanded="true"] .site-header__hamburger::after {
		top: 0;
		transform: rotate(-45deg);
		background-color: var(--color-white);
	}

	.site-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 280px;
		background-color: var(--color-dark);
		transform: translateX(100%);
		transition: none;
		padding: var(--space-2xl) var(--space-md) var(--space-md);
		z-index: 1001;
		visibility: hidden;
	}

	.site-nav--ready {
		transition: transform var(--transition), visibility var(--transition);
	}

	.site-nav--open {
		transform: translateX(0);
		visibility: visible;
	}

	/* Close button inside slide-out */
	.site-nav__close {
		display: block;
		position: absolute;
		top: var(--space-md);
		right: var(--space-md);
		color: var(--color-white);
		font-size: 1.75rem;
		line-height: 1;
		padding: var(--space-xs);
		opacity: 0.6;
		transition: opacity var(--transition);
	}

	.site-nav__close:hover {
		opacity: 1;
	}

	/* Backdrop overlay */
	.site-nav-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	body.nav-open .site-nav-overlay {
		display: block;
	}

	.site-nav__list {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.site-nav__list li a {
		color: var(--color-white);
		font-size: 0.8125rem;
		padding: var(--space-xs) 0;
		display: block;
	}
}

/* Footer stacks at the standard tablet breakpoint (768px), separate
   from the nav hamburger breakpoint (880px) above. */
@media (max-width: 768px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.site-footer__brand,
	.site-footer__contact,
	.site-footer__copy,
	.site-footer__nav,
	.site-footer__social {
		grid-column: 1;
	}

	.site-footer__logo {
		margin: 0 auto var(--space-xs);
	}

	.site-footer__nav {
		text-align: center;
	}

	.site-footer__nav-list {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
	}

	.site-footer__social {
		justify-content: center;
		flex-wrap: wrap;
	}
}


/* ==========================================================================
   9. WordPress Core Overrides
   ========================================================================== */

/* Screen reader text — WordPress accessibility pattern. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal;
}

.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	padding: 0.75rem;
	z-index: 100000;
	position: fixed;
	top: 5px;
	left: 5px;
	background-color: var(--color-bg);
	color: var(--color-ink);
}

/* Alignment classes from the WP editor. */
.alignwide {
	max-width: calc(var(--container-max) + 200px);
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	width: 100%;
	max-width: 100vw;
	margin-left: 0;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Admin bar offset. */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}


/* ==========================================================================
   10. Page Hero (short variant for inner pages)
   ========================================================================== */

.page-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-color: var(--color-dark);
	overflow: hidden;
}

.page-hero--short {
	min-height: 50vh;
}

.page-hero--project {
	min-height: 70vh;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
}

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

.page-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-overlay);
}

.page-hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--color-white);
	padding: var(--space-2xl) var(--space-md) var(--space-lg);
}

.page-hero__title {
	font-style: italic;
	margin-bottom: var(--space-xs);
}

.page-hero__subtitle {
	font-family: var(--font-body);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: rgba(255, 255, 255, 0.6);
	margin-top: var(--space-sm);
}


/* ==========================================================================
   11. Projects Grid & Cards
   ========================================================================== */

.projects-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.project-card {
	display: block;
	position: relative;
	overflow: hidden;
}

.project-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--color-surface);
}

.project-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.project-card:hover .project-card__image img {
	transform: scale(1.025);
}

.project-card__placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--color-surface);
}

/* Hover overlay — matches mosaic pattern */
.project-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 12, 0.58);
	display: flex;
	align-items: flex-end;
	padding: 28px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.project-card:hover .project-card__overlay {
	opacity: 1;
}

.project-card__caption {
	width: 100%;
}

.project-card__title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 300;
	font-style: italic;
	color: #fff;
}

.project-card__location {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 0.25rem;
}

.project-card__year {
	font-size: var(--text-caption);
	color: rgba(255, 255, 255, 0.5);
	margin-top: 0.15rem;
}

.projects-archive__empty {
	text-align: center;
	color: var(--color-ink-muted);
	padding: var(--space-xl) 0;
}

/* Projects V2: editorial header */
.projects-v2-header {
	padding-top: calc(var(--space-2xl) * 1.5);
	padding-bottom: var(--space-lg);
	border-bottom: none;
}

.projects-v2-header__title {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 300;
	font-style: italic;
	line-height: 1.1;
	max-width: 700px;
}

.projects-v2-grid-section {
	padding-top: var(--space-lg);
}

@media (max-width: 600px) {
	.projects-grid {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   12. Single Project
   ========================================================================== */

.project-meta__grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.project-meta__item {
	margin-bottom: var(--space-md);
}

.project-meta__item .eyebrow {
	display: block;
	margin-bottom: 0.25rem;
}

.project-meta__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.project-meta__tags li {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-ink-muted);
	border: 1px solid var(--color-ink-faint);
	padding: 0.25rem 0.75rem;
	border-radius: 2px;
}

.project-meta__description {
	font-size: 1.0625rem;
	line-height: 1.85;
}

.project-gallery {
	padding-top: var(--space-sm);
}

.project-testimonial .container {
	max-width: min(800px, 100%);
	text-align: center;
}

/* Gallery grid — mosaic pattern matching homepage */
.project-gallery__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.project-gallery__col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.project-gallery__item {
	position: relative;
	overflow: hidden;
}

.project-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
	text-decoration: none;
}

/* Alternating tall/short pattern within each column */
.project-gallery__col:nth-child(odd) .project-gallery__item:nth-child(odd)  { height: 560px; }
.project-gallery__col:nth-child(odd) .project-gallery__item:nth-child(even) { height: 340px; }
.project-gallery__col:nth-child(even) .project-gallery__item:nth-child(odd)  { height: 340px; }
.project-gallery__col:nth-child(even) .project-gallery__item:nth-child(even) { height: 560px; }

.project-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s;
}

.project-gallery__item:hover .project-gallery__img {
	transform: scale(1.025);
}

/* If a column has fewer images, let the last one grow to fill remaining space */
.project-gallery__col .project-gallery__item:last-child {
	flex: 1;
	min-height: 340px;
}

@media (max-width: 768px) {
	.project-meta__grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

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

	.project-gallery__col .project-gallery__item {
		height: 300px;
	}
}

/* --- Single Project V2: Monograph style --- */

.project-hero-v2 {
	padding-top: calc(var(--header-height, 100px) + var(--space-sm));
}

.project-hero-v2__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 8;
	overflow: hidden;
}

.project-hero-v2__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-hero-v2__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.1) 50%,
		transparent 100%
	);
}

.project-hero-v2__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: var(--space-xl);
	z-index: 1;
}

.project-hero-v2__location {
	font-family: var(--font-body);
	font-size: var(--text-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: var(--space-xs);
}

.project-hero-v2__title {
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 300;
	font-style: italic;
	color: var(--color-white);
	line-height: 1.1;
}

/* V2 meta + description layout */
.project-detail-v2__grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.project-detail-v2__meta-item {
	margin-bottom: var(--space-lg);
}

.project-detail-v2__meta-item .eyebrow {
	display: block;
	margin-bottom: 0.25rem;
}

.project-detail-v2__meta-value {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.4;
}

.project-detail-v2__description {
	font-size: 1.0625rem;
	line-height: 1.85;
}

.project-detail-v2__description p:first-child {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-ink);
	margin-bottom: var(--space-md);
}

@media (max-width: 768px) {
	.project-hero-v2__frame {
		aspect-ratio: 4 / 3;
	}

	.project-hero-v2__caption {
		padding: var(--space-md);
	}

	.project-hero-v2__title {
		font-size: 2rem;
	}

	.project-detail-v2__grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.project-detail-v2__meta-item {
		margin-bottom: var(--space-sm);
	}

	.project-detail-v2 {
		padding-bottom: calc(var(--space-xl) / 2);
	}

	.project-testimonial {
		padding-top: calc(var(--space-xl) / 2);
		padding-bottom: calc(var(--space-xl) / 2);
	}
}


/* ==========================================================================
   13. Testimonials
   ========================================================================== */

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-md);
}

.testimonial-quote {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
}

.testimonial-quote__cite {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-ink-muted);
	margin-top: var(--space-sm);
}

.testimonial-quote__location {
	display: block;
	color: var(--color-ink-faint);
	margin-top: 0.15rem;
}


/* ==========================================================================
   14. Awards Section
   ========================================================================== */

.section--dark {
	background-color: var(--color-dark);
	color: var(--color-white);
}

/* ==========================================================================
   15. About Page
   ========================================================================== */

.about-story__grid {
	max-width: 780px;
}

.about-story__content {
	font-size: 1.0625rem;
	line-height: 1.85;
}

/* Values grid (reused on Careers page) */
.values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	margin-top: var(--space-md);
}

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

@media (max-width: 500px) {
	.values-grid {
		grid-template-columns: 1fr;
	}
}

.value-card__title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 300;
	margin-bottom: var(--space-xs);
}

.value-card__text {
	color: var(--color-ink-muted);
	line-height: 1.7;
}

/* Team grid */
.team-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-lg);
	margin-top: var(--space-md);
}

.team-card {
	width: calc(25% - var(--space-lg) * 3 / 4);
}

.team-card__photo {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: var(--color-surface);
	margin-bottom: var(--space-sm);
}

.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.team-card__placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--color-surface);
}

.team-card__name {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 300;
}

.team-card__role {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-ink-muted);
	margin-top: 0.15rem;
}

.team-card__bio {
	font-size: 0.9375rem;
	color: var(--color-ink-muted);
	margin-top: var(--space-xs);
	line-height: 1.6;
}

@media (max-width: 900px) {
	.team-card {
		width: calc(50% - var(--space-lg) / 2);
	}
}

@media (max-width: 500px) {
	.team-card {
		width: 100%;
	}
}

.about-team__empty {
	text-align: center;
	color: var(--color-ink-muted);
}

.about-team__full-photo {
	margin-top: var(--space-xl);
	max-width: 70%;
	margin-left: auto;
	margin-right: auto;
}

.about-team__full-photo img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 768px) {
	.about-team__full-photo {
		max-width: 100%;
	}
}

/* About: Awards section */
.about-awards {
	text-align: center;
}

.section-heading--light {
	color: var(--color-white);
}

.eyebrow--light {
	color: rgba(255, 255, 255, 0.5);
}

/*
 * Awards grid — "Excellence in Craft" section, reused across Home + About.
 *
 * Responsive strategy:
 *   >900px (desktop)         5 cards in a single row   (CSS grid, 5 columns)
 *   601–900px (tablet)       3 + 2 layout              (flex wrap, cards at ~33% width, bottom row centers)
 *   ≤600px (mobile)          2-per-row                 (flex wrap, cards at ~50% width, 5th card centers alone)
 *
 * Note: we intentionally DO NOT drop to a single column at mobile — 2-per-row
 * looks better with these logo-based cards, and the flex container's
 * `justify-content: center` handles the 5th odd card by centering it on its
 * own row automatically. No nth-child hacks needed.
 *
 * The tablet (900px) and mobile (600px) breakpoints both use display:flex; the
 * only thing that changes between them is the per-card width (33% → 50%).
 */
.awards-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.award-card {
	border: 1px solid rgba(255, 255, 255, 0.15);
	padding: var(--space-lg) var(--space-md);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
}

.award-card__logo {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.award-card__logo img {
	max-height: 80px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
}

.award-card__title {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.4;
}

/* Tablet: switch from 5-col grid to flex-wrap so the bottom row centers.
   ~3 cards per row at ~33% width, with `justify-content: center` handling the 4th/5th. */
@media (max-width: 900px) {
	.awards-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-sm);
	}

	.award-card {
		width: calc(33.333% - var(--space-sm));
		padding: var(--space-md) var(--space-sm);
	}
}

/* Mobile + small tablet: tighten to 2-per-row.
   Flex layout inherits from the 900px breakpoint; we only override card width. */
@media (max-width: 768px) {
	.award-card {
		width: calc(50% - var(--space-sm));
	}
}

/* Mobile fine-tuning: symmetric card padding + smaller logo/title sizes.
   Layout is still 2-per-row flex; we are NOT switching to single-column here. */
@media (max-width: 600px) {
	.award-card {
		padding: var(--space-md);
		gap: var(--space-sm);
	}

	.award-card__logo {
		height: 60px;
	}

	.award-card__logo img {
		max-height: 60px;
	}

	.award-card__title {
		font-size: 1rem;
	}
}

/* About: Community & Culture sections */
.about-community__layout,
.about-culture__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.about-community__content p:not(.eyebrow),
.about-culture__content p:not(.eyebrow) {
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--color-ink-muted);
	margin-top: var(--space-sm);
}

.about-community__image img,
.about-culture__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-community__placeholder,
.about-culture__placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: var(--color-surface);
}

@media (max-width: 768px) {
	.about-community__layout,
	.about-culture__layout {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.about-culture__image {
		order: -1;
	}
}


/* ==========================================================================
   16. Process Page
   ========================================================================== */

.process-content__narrow {
	max-width: 680px;
	font-size: 1.0625rem;
	line-height: 1.85;
}

/* Process steps — alternating photo/text layout */
.process-step__layout {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.process-step--reverse .process-step__layout {
	direction: rtl;
}

.process-step--reverse .process-step__layout > * {
	direction: ltr;
}

/* Lock every step's image to a 3:4 portrait shape so the four photos
   render at the same height regardless of source aspect ratio.
   Source files have wildly different ratios (3:4, 9:16, ~6:7, 16:9) —
   `object-fit: cover` crops each photo to fit this container. If any
   single image crops badly, override `object-position` per image. */
.process-step__image {
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

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

.process-step__placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;
	background-color: var(--color-surface);
}

.process-step--reverse .process-step__placeholder {
	background-color: var(--color-ink-faint);
}

.process-step__number {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-weight: 300;
	font-style: italic;
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: var(--space-xs);
}

.process-step__title {
	font-style: italic;
	margin-bottom: var(--space-sm);
}

.process-step__text {
	font-size: 1.0625rem;
	color: var(--color-ink-muted);
	line-height: 1.85;
}

/* Process steps — full-bleed variant */
.process-step--bleed {
	padding: 0;
}

.process-step--bleed .process-step__layout {
	gap: 0;
	min-height: 500px;
}

.process-step--bleed .process-step__image {
	height: 100%;
}

.process-step--bleed .process-step__image img,
.process-step--bleed .process-step__placeholder {
	height: 100%;
	min-height: 500px;
	aspect-ratio: auto;
}

.process-step--bleed .process-step__content {
	padding: var(--space-xl) var(--space-2xl);
}

@media (max-width: 768px) {
	.process-step__layout {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.process-step--reverse .process-step__layout {
		direction: ltr;
	}

	.process-step__image {
		order: -1;
	}

	.process-step--bleed .process-step__layout {
		min-height: auto;
	}

	.process-step--bleed .process-step__image img,
	.process-step--bleed .process-step__placeholder {
		min-height: 300px;
	}

	.process-step--bleed .process-step__content {
		padding: var(--space-lg) var(--space-md);
	}
}


/* ==========================================================================
   17. Careers Page
   ========================================================================== */

.careers-content__narrow {
	max-width: 680px;
	font-size: 1.0625rem;
	line-height: 1.85;
}

/* Careers form: Pipedrive embed — add spacing and left-align inside centered container */
.careers-form .pipedriveWebForms {
	margin-top: var(--space-lg);
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}

.careers-form .pipedriveWebForms iframe {
	margin-left: 0 !important;
}


/* ==========================================================================
   18. Contact Page
   ========================================================================== */

.contact-main__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.contact-main__details {
	margin-top: var(--space-lg);
}

.contact-main__detail {
	margin-bottom: var(--space-md);
}

.contact-main__detail .eyebrow {
	display: block;
	margin-bottom: 0.25rem;
}

.contact-main__detail a {
	transition: opacity var(--transition);
}

.contact-main__detail a:hover {
	opacity: 0.6;
}

.contact-main__form h2 {
	margin-bottom: var(--space-xs);
}

.contact-main__form-note {
	color: var(--color-ink-muted);
	margin-bottom: var(--space-md);
}

.contact-form-placeholder {
	background-color: var(--color-surface);
	border: 1px dashed var(--color-ink-faint);
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	color: var(--color-ink-muted);
}

@media (max-width: 768px) {
	.contact-main__grid {
		grid-template-columns: 1fr;
	}
}



/* ==========================================================================
   20. Homepage
   ========================================================================== */

/* --- Homepage Philosophy --- */

.hp-philosophy {
	padding-top: calc(var(--space-2xl) * 1.5);
	padding-bottom: var(--space-2xl);
}

.hp-philosophy__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.hp-philosophy__heading {
	font-style: italic;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 300;
	line-height: 1.2;
	margin-top: var(--space-sm);
}

.hp-philosophy__body p {
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--color-ink-muted);
}

.hp-philosophy__body p + p {
	margin-top: var(--space-sm);
}

@media (max-width: 768px) {
	.hp-philosophy {
		padding-top: var(--space-xl);
		padding-bottom: var(--space-xl);
	}

	.hp-philosophy__grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

/* --- Featured Projects Mosaic --- */

.hp-projects__heading {
	text-align: center;
	margin-bottom: var(--space-lg);
}

/*
 * Shared caption/overlay classes for homepage project cards.
 * The container itself lives in `.hp-grid-asym` (3-col asymmetric flex-wrap
 * layout defined further down). These `.hp-mosaic__*` rules style the inner
 * overlay + caption shown on hover (desktop) or as a gradient (tablet/mobile).
 */
.hp-mosaic__placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--color-surface);
}

.hp-mosaic__overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 12, 0.58);
	display: flex;
	align-items: flex-end;
	padding: 28px;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.hp-mosaic__caption {
	color: var(--color-white);
}

.hp-mosaic__title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 300;
	font-style: italic;
}

.hp-mosaic__location {
	font-family: var(--font-body);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 0.2rem;
}

.hp-projects__cta {
	text-align: center;
	margin-top: var(--space-xl);
}

/* Wider container variant for 3-col grid */
.container--wide {
	max-width: 1400px;
}

/* 3-column asymmetric project grid — homepage "Selected Work".
   Uses flex-flow: column wrap with a fixed-height container so 6 items
   flow into 3 visual columns with alternating heights, creating a
   magazine-style masonry without JavaScript.
   Pattern for 6 items:
   Col 1: short (25%) + tall (75%)
   Col 2: half (50%) + half (50%)
   Col 3: tall (66%) + short (33%)
*/
.hp-grid-asym {
	display: flex;
	flex-flow: column wrap;
	gap: 4px;
	height: 900px;
	margin-top: var(--space-md);
}

.hp-grid-asym__item {
	position: relative;
	overflow: hidden;
	display: block;
	background-color: var(--color-surface);
	box-sizing: border-box;
	/* Each item takes ~33% width minus gap */
	width: calc(33.333% - 3px);
}

.hp-grid-asym__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s;
}

.hp-grid-asym__item:hover img {
	transform: scale(1.025);
}

.hp-grid-asym__item .hp-mosaic__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(12, 12, 12, 0.58);
	opacity: 0;
	transition: opacity var(--transition);
	display: flex;
	align-items: flex-end;
	padding: var(--space-md);
	pointer-events: none;
}

.hp-grid-asym__item:hover .hp-mosaic__overlay {
	opacity: 1;
}

/* Varied heights for masonry pattern */
.hp-grid-asym__item--1 { height: calc(25% - 2px); }
.hp-grid-asym__item--2 { height: calc(75% - 2px); }
.hp-grid-asym__item--3 { height: calc(50% - 2px); }
.hp-grid-asym__item--4 { height: calc(50% - 2px); }
.hp-grid-asym__item--5 { height: calc(66.666% - 2px); }
.hp-grid-asym__item--6 { height: calc(33.333% - 2px); }

@media (max-width: 768px) {
	.hp-grid-asym {
		height: auto;
		flex-flow: row wrap;
		display: flex;
	}

	.hp-grid-asym__item {
		width: calc(50% - 2px);
		height: 300px !important;
	}

	.hp-grid-asym__item .hp-mosaic__overlay {
		opacity: 1;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%);
	}
}

@media (max-width: 600px) {
	.hp-grid-asym__item {
		width: 100% !important;
		height: 280px !important;
	}
}

/* Tablet and down: always show caption with subtle gradient overlay */
@media (max-width: 768px) {
	.hp-mosaic__overlay,
	.project-card__overlay {
		opacity: 1;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%);
	}

	.project-card:hover .project-card__overlay {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%);
	}
}

/* --- Brand Statement --- */

.hp-statement {
	text-align: center;
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}

.hp-statement__heading {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-md);
	font-style: italic;
}

.hp-statement__text {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	color: var(--color-ink-muted);
	line-height: 1.9;
}

/* --- Homepage Awards (uses shared .awards-grid) --- */

.hp-awards {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}

/* --- Homepage Testimonials Slider --- */

.hp-testimonials__slider {
	max-width: 805px;
	margin: var(--space-lg) auto 0;
	position: relative;
	overflow: hidden;
}

.hp-testimonials__track {
	display: flex;
	align-items: flex-start;
	transition: transform 0.5s ease, height 0.4s ease;
}

.hp-testimonials__slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	text-align: center;
	padding: 0 var(--space-md);
	box-sizing: border-box;
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
}

.hp-testimonials__slide p {
	margin: 0 0 var(--space-md);
}

.hp-testimonials__slide .testimonial-quote__cite {
	margin-top: var(--space-sm);
}

/* Controls: arrows + dots */
.hp-testimonials__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.hp-testimonials__arrow {
	background: none;
	border: 1px solid var(--color-ink-faint);
	color: var(--color-ink-muted);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 1rem;
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hp-testimonials__arrow:hover {
	color: var(--color-ink);
	border-color: var(--color-ink);
}

.hp-testimonials__dots {
	display: flex;
	gap: 8px;
}

.hp-testimonials__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background-color: var(--color-ink-faint);
	cursor: pointer;
	padding: 0;
	transition: background-color var(--transition);
}

.hp-testimonials__dot--active {
	background-color: var(--color-ink);
}

.hp-testimonials__dot:hover {
	background-color: var(--color-ink-muted);
}

@media (max-width: 600px) {
	.hp-testimonials {
		padding-top: var(--space-lg);
		padding-bottom: var(--space-lg);
	}

	.hp-testimonials__slider {
		margin-top: var(--space-md);
	}

	.hp-testimonials__slide {
		font-size: 1.25rem;
		padding: 0 var(--space-sm);
	}

	.hp-testimonials__controls {
		margin-top: var(--space-md);
	}
}

/* --- Consultation CTA --- */

.hp-cta {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}

.hp-cta__inner {
	text-align: center;
}

.hp-cta__heading {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-sm);
	font-style: italic;
}

.hp-cta__text {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	color: var(--color-ink-muted);
	margin-bottom: var(--space-lg);
	line-height: 1.8;
}

/* CTA variant: full-bleed photo background */
.hp-cta--photo {
	position: relative;
	overflow: hidden;
}

.hp-cta__bg {
	position: absolute;
	inset: 0;
}

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

.hp-cta__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 15, 15, 0.7);
}

/* CTA split variant: photo left, text right */
.hp-cta--split {
	padding: 0;
}

.hp-cta__split-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 500px;
}

.hp-cta__split-image {
	overflow: hidden;
}

.hp-cta__split-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-cta__split-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: var(--space-2xl);
}

.hp-cta__split-content .hp-cta__heading {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

.hp-cta__split-content .hp-cta__text {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 768px) {
	.hp-cta__split-grid {
		grid-template-columns: 1fr;
	}

	.hp-cta__split-image {
		height: 300px;
	}

	.hp-cta__split-content {
		padding: var(--space-xl) var(--space-md);
	}
}

.hp-cta--photo .hp-cta__inner {
	position: relative;
	z-index: 1;
}

.hp-cta--photo .hp-cta__heading {
	color: var(--color-white);
}

.hp-cta--photo .hp-cta__text {
	color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
   21. Shared Components
   ========================================================================== */

/* Surface variant for alternating sections */
.section--surface {
	background-color: var(--color-surface);
}

/* CTA sections */
.section--cta {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}

.section--cta h2 {
	margin-bottom: var(--space-md);
}

/* Button */
.btn {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--text-eyebrow);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-ink);
	border: 1px solid var(--color-ink);
	padding: 0.875rem 2.5rem;
	transition: background-color var(--transition), color var(--transition);
}

.btn:hover {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-white);
}

/* Light button variant — for use on dark backgrounds */
.btn--light {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.btn--light:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--color-white);
	color: var(--color-white);
}

/* Button outline variant */
.btn--outline {
	background: none;
	color: var(--color-ink);
	border: 1px solid var(--color-ink-faint);
}

.btn--outline:hover {
	border-color: var(--color-ink);
	background: none;
	color: var(--color-ink);
}

/* Thank You page */
.thank-you {
	padding-top: calc(var(--space-2xl) + 100px);
	padding-bottom: var(--space-2xl);
}

.thank-you__container {
	max-width: 620px;
	text-align: center;
}

.thank-you__title {
	font-style: italic;
	margin-bottom: var(--space-md);
}

.thank-you__text {
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--color-ink-muted);
	margin-bottom: var(--space-sm);
}

.thank-you__text a {
	color: var(--color-ink);
	text-decoration: underline;
}

.thank-you__actions {
	margin-top: var(--space-lg);
	display: flex;
	gap: var(--space-sm);
	justify-content: center;
	flex-wrap: wrap;
}

/* 404 */
.error-404__message {
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 300;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: var(--space-lg);
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

/* Entry content — basic prose styling for WP editor output */
.entry-content p {
	margin-bottom: 1.5em;
}

.entry-content h2 {
	margin-top: 2em;
	margin-bottom: 0.75em;
}

.entry-content h3 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.entry-content ul,
.entry-content ol {
	margin-bottom: 1.5em;
	padding-left: 1.5em;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-bottom: 0.5em;
}

.entry-content a {
	border-bottom: 1px solid var(--color-ink-faint);
	transition: border-color var(--transition);
}

.entry-content a:hover {
	border-color: var(--color-ink);
}

/* WP Pagination */
.nav-links {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
	font-family: var(--font-body);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.nav-links a,
.nav-links span {
	padding: var(--space-xs) var(--space-sm);
}

.nav-links .current {
	border-bottom: 1px solid var(--color-ink);
}


/* ==========================================================================
   PhotoSwipe overrides — subtle, brand-aligned lightbox chrome.
   Only loaded on single project pages via conditional enqueue.
   ========================================================================== */

/* Darker, more opaque backdrop so photos pop */
.pswp__bg {
	background: #0a0a0a;
}

/* Icon buttons — thinner strokes, gentler hover */
.pswp__icn {
	fill: rgba(255, 255, 255, 0.85);
}

.pswp__button {
	opacity: 0.7;
	transition: opacity 0.25s ease;
}

.pswp__button:hover,
.pswp__button:focus {
	opacity: 1;
}

/* Counter — smaller, more restrained */
.pswp__counter {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.15em;
	color: rgba(255, 255, 255, 0.65);
	opacity: 1;
}


/* ==========================================================================
   Landing Pages (CPT) — Google Ads / campaign landing templates.
   Mirrors project page hero + mosaic, but WITHOUT hover overlay or zoom.
   ========================================================================== */

/* Craftsmanship two-column section (mirrors .hp-philosophy pattern).
   Left: eyebrow + heading. Right: WordPress editor content. */
.landing-craft__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.landing-craft__heading {
	font-style: italic;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 300;
	line-height: 1.2;
	margin-top: var(--space-sm);
}

.landing-craft__body {
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--color-ink-muted);
}

.landing-craft__body p {
	margin-bottom: var(--space-sm);
}

.landing-craft__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.landing-craft__grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

/* Signature Creations — 3-card grid built from value props */
.landing-services__heading {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.landing-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-md);
}

.landing-services__card {
	background-color: var(--color-white);
	padding: var(--space-lg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: box-shadow var(--transition);
}

.landing-services__card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.landing-services__card-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-ink);
	margin: 0 0 var(--space-sm);
}

.landing-services__card-desc {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--color-ink-muted);
	margin: 0;
}

/* Gallery section heading */
.landing-gallery__heading {
	text-align: center;
	margin-bottom: var(--space-lg);
}

/* Gallery mosaic — same pattern as .project-gallery__grid but static (no overlay) */
.landing-gallery__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.landing-gallery__col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.landing-gallery__item {
	position: relative;
	overflow: hidden;
	margin: 0;
}

/* Alternating mirrored heights — matches project gallery rhythm */
.landing-gallery__col:nth-child(odd)  .landing-gallery__item:nth-child(odd)  { height: 560px; }
.landing-gallery__col:nth-child(odd)  .landing-gallery__item:nth-child(even) { height: 340px; }
.landing-gallery__col:nth-child(even) .landing-gallery__item:nth-child(odd)  { height: 340px; }
.landing-gallery__col:nth-child(even) .landing-gallery__item:nth-child(even) { height: 560px; }

.landing-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Orphan last item fills remaining column space */
.landing-gallery__col .landing-gallery__item:last-child {
	flex: 1;
	min-height: 340px;
}

@media (max-width: 768px) {
	.landing-gallery__grid {
		grid-template-columns: 1fr;
	}

	.landing-gallery__col .landing-gallery__item {
		height: 300px;
	}
}

/* Hero subtitle — shown under the h1 if set */
.landing-hero__subtitle {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	max-width: 640px;
	margin: var(--space-sm) auto 0;
}

/* Hero CTA button — extra top margin so it sits nicely below the title */
.landing-hero__cta {
	margin-top: var(--space-md);
}

/* Get Started: two-column CTA section — copy on the left, form card on the right */
.landing-cta__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl);
	align-items: start;
}

.landing-cta__heading {
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	line-height: 1.15;
	margin-bottom: var(--space-sm);
}

.landing-cta__intro {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--color-ink-muted);
	margin-bottom: var(--space-lg);
}

/* Value props list */
.landing-cta__props {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-lg);
}

.landing-cta__prop {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.landing-cta__prop-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-accent);
	margin-top: 2px;
}

.landing-cta__prop-title {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-eyebrow);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-ink);
	margin-bottom: 0.25rem;
}

.landing-cta__prop-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-ink-muted);
}

/* Optional testimonial under the value props */
.landing-cta__testimonial {
	margin: var(--space-lg) 0 0;
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-ink-faint);
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--color-ink);
}

.landing-cta__testimonial cite {
	display: block;
	margin-top: var(--space-xs);
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-ink-muted);
}

/* Form card — white card on the tan surface background */
.landing-cta__form {
	background-color: var(--color-white);
	padding: var(--space-xl);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.landing-cta__form-placeholder {
	color: var(--color-ink-muted);
	font-size: 0.9375rem;
	text-align: center;
	padding: var(--space-lg) 0;
}

@media (max-width: 900px) {
	.landing-cta__grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	.landing-cta__form {
		padding: var(--space-lg) var(--space-md);
	}
}