/* ==========================================================================
   GREENWOOD SMC — Design System
   Quiet-luxury editorial style. Navy / gold / deep green on warm cream.
   Headers: Georgia (serif). Body: Inter (sans).
   ========================================================================== */

:root {
	/* Brand colors — from client-supplied color codes */
	--gsmc-cream:      #F7F2EC;
	--gsmc-white:      #FFFFFF;
	--gsmc-navy:       #1F4A2C; /* rebranded: primary is now forest green, not navy */
	--gsmc-navy-dark:  #16351F;
	--gsmc-gold:       #C4A35A;
	--gsmc-gold-light: #D9C08C;
	--gsmc-gold-deep:  #7A5F28; /* WCAG-AA-safe gold for text/icons on light backgrounds */
	--gsmc-green:      #1F4A2C;
	--gsmc-green-dark: #16351F;
	--gsmc-gray:       #6F6C67;
	--gsmc-black:      #000000;

	/* Semantic tokens */
	--color-bg:          var(--gsmc-cream);
	--color-bg-alt:      var(--gsmc-white);
	--color-bg-dark:      var(--gsmc-navy);
	--color-text:        #1C2B36;
	--color-text-muted:  var(--gsmc-gray);
	--color-text-on-dark: var(--gsmc-cream);
	--color-accent:      var(--gsmc-gold);
	--color-accent-2:    var(--gsmc-green);
	--color-border:      rgba(18, 58, 90, 0.12);
	--color-border-dark: rgba(247, 242, 236, 0.18);

	/* Type */
	--font-serif: Georgia, 'Times New Roman', Times, serif;
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Spacing scale */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.75rem;
	--space-lg: 3rem;
	--space-xl: 5rem;
	--space-2xl: 7.5rem;

	/* Layout */
	--container-max: 1180px;
	--container-pad: 1.5rem;
	--radius-sm: 4px;
	--radius-md: 8px;

	/* Motion */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	width: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 var(--space-sm);
	color: var(--gsmc-navy-dark);
	letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

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

.container--narrow { max-width: 860px; }

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

/* ==========================================================================
   Section rhythm
   ========================================================================== */

.section {
	padding-block: var(--space-2xl);
}

.section--tight { padding-block: var(--space-xl); }
.section--compact { padding-block: 3.25rem; }

.section--alt   { background: var(--color-bg-alt); }
.section--dark  {
	background: var(--gsmc-navy);
	color: var(--color-text-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--gsmc-cream); }
.section--dark p { color: rgba(247, 242, 236, 0.82); }

.section-eyebrow {
	display: block;
	font-family: var(--font-sans);
	font-size: 1.17rem; /* +50% from the original 0.78rem, per client request */
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gsmc-gold-deep);
	margin-bottom: var(--space-sm);
}
.section--dark .section-eyebrow,
.cta-band .section-eyebrow { color: var(--gsmc-gold-light); }

.section-header {
	max-width: 680px;
	margin: 0 auto var(--space-lg);
	text-align: center;
}

.section-header h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); }
.section-header p { color: var(--color-text-muted); font-size: clamp(1.2rem, 2vw, 1.5rem); } /* ~half the heading size, per client request */

.rule {
	width: 56px;
	height: 2px;
	background: var(--gsmc-gold);
	border: none;
	margin: var(--space-sm) auto;
}
.rule--left { margin-inline: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.9rem;
	font-family: var(--font-sans);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	border-radius: var(--radius-sm);
	border: 1.5px solid transparent;
	transition: all 0.25s var(--ease);
	white-space: nowrap;
}

.btn--primary {
	background: var(--gsmc-gold);
	color: var(--gsmc-navy-dark);
	border-color: var(--gsmc-gold);
}
.btn--primary:hover { background: var(--gsmc-gold-light); border-color: var(--gsmc-gold-light); transform: translateY(-1px); }

.btn--fill-green {
	background: var(--gsmc-green);
	color: var(--gsmc-white);
	border-color: var(--gsmc-green);
}
.btn--fill-green:hover { background: var(--gsmc-gold); color: var(--gsmc-green-dark); border-color: var(--gsmc-gold); }

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

.btn--outline-light {
	background: transparent;
	color: var(--gsmc-cream);
	border-color: rgba(247,242,236,0.55);
}
.btn--outline-light:hover { background: rgba(247,242,236,0.1); border-color: var(--gsmc-gold-light); }

.btn--header {
	background: var(--gsmc-green);
	color: var(--gsmc-gold-light);
	border-color: var(--gsmc-green);
}
.btn--header:hover {
	background: var(--gsmc-gold);
	color: var(--gsmc-green-dark);
	border-color: var(--gsmc-gold);
}

.btn--text {
	background: none;
	border: none;
	padding: 0;
	color: var(--gsmc-navy);
	font-weight: 600;
	border-bottom: 1.5px solid var(--gsmc-gold);
	border-radius: 0;
}
.btn--text:hover { color: var(--gsmc-gold-deep); }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--pill { border-radius: 50px; padding: 0.95rem 2.1rem; }
.btn--lg-text { font-size: 1.05rem; padding: 1rem 2.2rem; }
.btn--cta-lg { font-size: 1.2rem; padding: 1.2rem 2.7rem; } /* per client request: larger gold CTA button on select sections */

/* ==========================================================================
   Site Header / Navigation
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(247, 242, 236, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.1rem;
}

.site-logo img { height: 60px; width: auto; }
.site-logo { display: inline-flex; align-items: center; }

.nav-menu {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.nav-menu a {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--gsmc-navy-dark);
	position: relative;
	padding-bottom: 4px;
}

.nav-menu a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--gsmc-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--ease);
}
.nav-menu a:hover::after,
.nav-menu li.current-menu-item a::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }

.nav-menu-cta { display: none; }

.btn-label-short { display: none; }

.nav-toggle {
	display: none;
	background: none;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	width: 42px; height: 40px;
	flex-shrink: 0;
	position: relative;
	z-index: 201;
}
.nav-toggle span {
	content: '';
	position: absolute;
	left: 10px; right: 10px;
	height: 2px;
	background: var(--gsmc-navy-dark);
	transition: all 0.25s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 25px; }

body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

body.nav-open { overflow: hidden; }

@media (max-width: 860px) {
	.nav-toggle { display: block; }

	/* Logo: +15% from the original 46px base = ~53px (desktop is +30% = 60px, set in the base rule) */
	.site-logo img { height: 53px; }

	/* Contact button removed from the mobile top bar — it's already offered inside the dropdown menu */
	.header-actions .btn--header {
		display: none;
	}
	.header-actions { justify-content: flex-end; }

	/* Bug fix: .site-header has backdrop-filter (for the frosted-glass scroll
	   effect), and any ancestor with backdrop-filter/filter/transform creates
	   a new containing block for position:fixed descendants. Since .main-nav
	   is fixed and lives inside .site-header, it was being confined to the
	   header's own small box instead of covering the full screen. Dropping
	   backdrop-filter only while the mobile menu is open (mobile-only, via
	   this same media query) fixes it without touching the desktop header
	   at all. */
	body.nav-open .site-header { backdrop-filter: none; }

	.main-nav {
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 200;
		background: var(--gsmc-cream);
		visibility: hidden;
		opacity: 0;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 6.5rem var(--container-pad) var(--space-xl);
		box-sizing: border-box;
		transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
	}
	body.nav-open .main-nav { visibility: visible; opacity: 1; }

	.nav-menu {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0;
	}
	.nav-menu li { width: 100%; border-bottom: 1px solid var(--color-border); }
	.nav-menu a {
		display: block;
		padding: 1.15rem 0.1rem;
		font-family: var(--font-serif);
		font-size: 1.5rem;
		width: 100%;
	}
	.nav-menu a::after { display: none; }

	.nav-menu-cta {
		display: block;
		margin-top: var(--space-lg);
		width: 100%;
		flex-shrink: 0;
	}
	.nav-menu-cta .btn { width: 100%; justify-content: center; padding: 1rem; font-size: 1rem; }
}

@media (max-width: 400px) {
	.btn-label-full { display: none; }
	.btn-label-short { display: inline; }
}

/* ==========================================================================
   Hero — full-bleed photo background, cream overlay + gold wave texture
   ========================================================================== */

.hero {
	position: relative;
	background: var(--gsmc-cream);
	overflow: hidden;
}

.desktop-only { display: block; }
.mobile-only { display: none; }

.hero__bg-photo {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Cream overlay: opaque on the left where the text sits, fading out to the right
   so the venue photo shows through — waves.png layers on top of this. */
.hero__cream-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(
		92deg,
		rgba(247, 242, 236, 0.97) 0%,
		rgba(247, 242, 236, 0.94) 32%,
		rgba(247, 242, 236, 0.75) 52%,
		rgba(247, 242, 236, 0.35) 72%,
		rgba(247, 242, 236, 0.05) 88%
	);
	z-index: 1;
}

.hero__bgwave {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.9;
	z-index: 2;
	pointer-events: none;
}
/* The new mobile background graphic has its gold swoosh positioned in a way
   that otherwise lands right across the CTA buttons — nudging it up-weighted
   keeps the swoosh higher and clear of the button row. Mobile-only, targets
   only the mobile background element, doesn't touch the desktop one. */
.hero__bgwave.mobile-only {
	background-size: contain;
	background-position: center top;
	background-repeat: no-repeat;
}

.hero__mobile-banner { display: none; }

.hero__grid {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 640px;
}

.hero__grid--solo { justify-content: flex-start; }

.hero__content {
	flex: 1 1 480px;
	max-width: 640px;
	padding: var(--space-lg) 0;
	box-sizing: border-box;
}

.hero__eyebrow {
	font-size: 1.17rem; /* matches .section-eyebrow, per client request */
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gsmc-gold-deep);
	margin-bottom: var(--space-md);
}

.hero__title {
	font-size: clamp(2.2rem, 4vw, 3.15rem);
	color: var(--gsmc-navy-dark);
	max-width: 14ch;
	margin-bottom: 0;
}
.hero__title em { color: var(--gsmc-gold-deep); font-style: italic; }

.hero__rule {
	width: 60px;
	height: 2px;
	background: var(--gsmc-gold);
	border: none;
	margin: 1.4rem 0 1.5rem;
}

.hero__lede {
	font-size: clamp(1.03rem, 1.8vw, 1.31rem); /* reduced ~18% per client request */
	line-height: 1.55;
	color: #3B4640;
	max-width: 46ch;
	margin-bottom: var(--space-lg);
}

.hero__actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

@media (max-width: 960px) {
	.desktop-only { display: none !important; }
	.mobile-only { display: block; }

	.hero__grid { flex-direction: column; align-items: stretch; min-height: auto; }
	.hero__content { padding: var(--space-lg) var(--container-pad) var(--space-sm); text-align: left; max-width: none; }

	.hero__title { max-width: none; }

	/* Mobile banner: photo full-bleed on top, with a cream gradient fading up from
	   the bottom (covering roughly the bottom half) and waves.png layered above that,
	   stacking bottom-to-top: photo > cream overlay > waves. */
	.hero__mobile-banner {
		display: block;
		position: relative;
		width: 100vw;
		left: 50%;
		transform: translateX(-50%);
		padding-top: 100%;
		height: 0;
		overflow: hidden;
	}
	.hero__mobile-banner-photo {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background-size: cover;
		background-position: center;
		z-index: 1;
	}
	.hero__mobile-banner-cream {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 52%;
		background: linear-gradient(180deg, rgba(247,242,236,0) 0%, rgba(247,242,236,0.85) 45%, rgba(247,242,236,1) 100%);
		z-index: 2;
	}
	.hero__mobile-banner-waves {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 52%;
		background-size: cover;
		background-position: bottom center;
		opacity: 0.55;
		z-index: 3;
	}

	.hero__actions { flex-wrap: nowrap; gap: 0.6rem; margin-top: 26px; }
	.hero__actions .btn {
		flex: 1 1 0;
		justify-content: center;
		padding: 0.75rem 0.5rem;
		font-size: 0.82rem;
		white-space: normal;
		text-align: center;
	}

	.hero-label-full { display: none; }
	.hero-label-short { display: inline; }
	.hero-arrow-desktop { display: none; }
}

@media (min-width: 961px) {
	.hero-label-short { display: none; }
}

/* ==========================================================================
   Stat bar
   ========================================================================== */

.stat-bar {
	background: var(--gsmc-white);
	border-bottom: 1px solid var(--color-border);
}
.stat-bar__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-block: var(--space-lg);
}
.stat-item {
	text-align: center;
	padding-inline: var(--space-sm);
	border-left: 1px solid var(--color-border);
}
.stat-item:first-child { border-left: none; }
.icon-badge {
	width: 60px;
	height: 60px;
	margin: 0 auto var(--space-sm);
	flex-shrink: 0;
}
.icon-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.icon-badge--lg { width: 72px; height: 72px; }
.icon-badge--sm { width: 48px; height: 48px; }
.icon-badge--step { width: 56px; height: 56px; margin: 0 0 var(--space-sm) 0; }
.stat-item__number {
	font-family: var(--font-serif);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	color: var(--gsmc-navy-dark);
	line-height: 1;
	margin-bottom: 0.4rem;
}
.stat-item__label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

@media (max-width: 760px) {
	.stat-bar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md) 0; }
	.stat-item { border-left: none; }
	.stat-item:nth-child(odd) { border-right: 1px solid var(--color-border); }
}

/* ==========================================================================
   Listens First / two-column feature
   ========================================================================== */

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl);
	align-items: center;
}

.split h2 { font-size: clamp(1.75rem, 3vw, 2.3rem); }
.split h2 em { color: var(--gsmc-gold-deep); font-style: italic; }
.split p { color: var(--color-text-muted); font-size: 1rem; } /* matches the About Malcolm teaser paragraph size, per client request */

.quote-card {
	background: var(--gsmc-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	position: relative;
}
.quote-card__mark {
	font-family: var(--font-serif);
	font-size: 3.5rem;
	color: var(--gsmc-gold-deep);
	line-height: 1;
	margin-bottom: var(--space-xs);
	display: block;
}
.quote-card blockquote {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--gsmc-navy-dark);
	margin: 0 0 var(--space-md);
	line-height: 1.5;
}
.quote-card cite {
	font-style: normal;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

@media (max-width: 860px) {
	.split { grid-template-columns: 1fr; gap: var(--space-sm); }
	.btn--meet { display: table; margin-left: auto; margin-right: auto; }
	.quote-card { padding: var(--space-xs); }
	.btn--mailto { display: table; margin-left: auto; margin-right: auto; }
	.client-note-section { padding-top: var(--space-xs); }
	.split--client-note { gap: 0; }
	.split--client-note__text { margin-top: var(--space-sm); text-align: center; }
}

/* ==========================================================================
   Service cards
   ========================================================================== */

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.service-card {
	background: var(--gsmc-white);
	padding: var(--space-lg) var(--space-md);
	text-align: center;
	transition: background 0.25s var(--ease);
}
.service-card:hover { background: #FCFAF6; }

.service-card__icon {
	width: 44px; height: 44px;
	margin: 0 auto var(--space-sm);
	color: var(--gsmc-navy);
}
.service-card__icon svg { width: 100%; height: 100%; }
.service-card .icon-badge { margin: 0 auto var(--space-sm); }

.service-card h3 {
	font-size: 1.2rem;
	margin-bottom: 0.6rem;
}

.service-card p {
	color: var(--color-text-muted);
	font-size: 0.97rem;
}

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

/* Full services page — larger cards with extended copy */
.service-detail-grid {
	display: grid;
	gap: var(--space-lg);
}
.service-detail {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: var(--space-md);
	padding-block: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}
.service-detail:last-child { border-bottom: none; }
.service-detail__icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--gsmc-navy);
	display: flex; align-items: center; justify-content: center;
	color: var(--gsmc-gold-light);
}
.service-detail__icon svg { width: 30px; height: 30px; }
.service-detail h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.service-detail p { color: var(--color-text-muted); font-size: 1.02rem; max-width: 62ch; }

@media (max-width: 640px) {
	.service-detail { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Approach steps (dark band)
   ========================================================================== */

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	position: relative;
}
.step { text-align: center; position: relative; }
.step .icon-badge--step { margin: 0 auto var(--space-sm); }
.step h3 { color: var(--gsmc-cream); font-size: 1.25rem; }
.step p { color: rgba(247,242,236,0.75); font-size: 0.97rem; }

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

/* ==========================================================================
   Client logos strip
   ========================================================================== */

.clients-band { text-align: center; }
.clients-band__label {
	font-size: 1.17rem; /* +50% from the original 0.78rem, per client request */
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-lg);
	display: block;
}
.clients-band__note {
	margin-top: var(--space-lg);
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.clients-pyramid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}
/* Explicit override: .clients-pyramid's own display:flex would otherwise beat
   the .mobile-only utility class since it's declared later with equal specificity. */
.clients-pyramid.mobile-only { display: none; }
@media (max-width: 960px) {
	.clients-pyramid.mobile-only { display: flex; }
}
.clients-pyramid__row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-xl);
	flex-wrap: wrap;
}
.clients-pyramid__logo {
	width: 210px;
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.clients-pyramid__logo--cmt,
.clients-pyramid__logo--dunb {
	width: 250px;
	height: 124px;
}
.clients-pyramid__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	opacity: 0.88;
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.clients-pyramid__logo img:hover { opacity: 1; transform: translateY(-1px); }

@media (max-width: 700px) {
	.clients-pyramid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md) var(--space-lg);
		justify-items: center;
		align-items: center;
	}
	/* collapse the 5/4/3 row groupings so all 12 logos flow into one clean 2-column grid */
	.clients-pyramid__row { display: contents; }
	.clients-pyramid__logo,
	.clients-pyramid__logo--cmt,
	.clients-pyramid__logo--dunb { width: 182px; height: 87px; }
}

/* ==========================================================================
   About teaser (home) / bio blocks (about page)
   ========================================================================== */

.about-teaser {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--space-2xl);
	align-items: center;
}
.about-teaser__media { position: relative; }
.about-teaser__media img { border-radius: var(--radius-md); }
.about-teaser__media--half { max-width: 44%; align-self: start; margin-right: auto; }
.about-teaser__media--half img { width: 100%; display: block; }
.about-teaser--small-photo { grid-template-columns: 0.55fr 1.45fr; }
.about-teaser__media--small img { max-height: 340px; width: auto; max-width: 100%; object-fit: contain; margin-inline: auto; display: block; }
.about-teaser--no-photo { grid-template-columns: 1fr; }
.about-teaser__text-solo { max-width: 760px; margin-inline: auto; text-align: center; }
.about-teaser__text-solo .credential-list { justify-items: center; text-align: left; max-width: 520px; margin-inline: auto; }
.about-teaser__text-solo .btn--meet { display: table; margin-inline: auto; }
.about-teaser__badge {
	position: absolute;
	bottom: -20px; left: -20px;
	background: var(--gsmc-navy);
	color: var(--gsmc-cream);
	padding: 1.1rem 1.4rem;
	border-radius: var(--radius-sm);
	font-family: var(--font-serif);
}
.about-teaser__badge strong { display: block; font-size: 1.5rem; color: var(--gsmc-gold-light); }
.about-teaser__badge span { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }

.credential-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm) var(--space-lg); margin: var(--space-md) 0; }
.credential-item { display: flex; gap: 0.7rem; align-items: flex-start; }
.credential-item .icon-badge { margin: 0; }
.credential-item svg { width: 22px; height: 22px; color: var(--gsmc-gold-deep); flex-shrink: 0; margin-top: 2px; }
.credential-item strong { display: block; font-size: 0.95rem; color: var(--gsmc-navy-dark); }
.credential-item span { font-size: 0.85rem; color: var(--color-text-muted); }

@media (max-width: 860px) {
	.about-teaser { grid-template-columns: 1fr; gap: var(--space-sm); }
	.about-teaser__badge { position: static; margin-top: var(--space-sm); display: inline-block; }
	/* Foundation/Producer's Discipline photo: was left-aligned (margin-inline: 0 auto),
	   client asked for it centered instead. */
	.about-teaser__media--half { max-width: 55%; margin-left: auto; margin-right: auto; }
	.about-teaser__media--small img { max-height: 220px; margin-bottom: var(--space-sm); }
	/* Pull the "About Malcolm Greenwood" text up close under the photo —
	   the base --space-2xl grid gap (120px) is far too much once this
	   section stacks to one column on mobile. The "Meet Malcolm" button
	   stays exactly where it already sits in the text flow, unmoved. */
	.about-teaser--small-photo { gap: var(--space-sm); }
	.credential-list { grid-template-columns: 1fr; }
	.credential-item { flex-direction: column; align-items: center; text-align: center; }
}

.about-teaser-section { position: relative; overflow: hidden; }
.about-teaser-section__bg {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.7;
	z-index: 0;
	pointer-events: none;
}
.about-teaser-section .container { position: relative; z-index: 1; }

@media (max-width: 860px) {
	/* Note: no separate mobile-specific background image was supplied for this section —
	   reusing the same about-bg-waves.jpg, just made a bit more present on the smaller viewport. */
	.about-teaser-section__bg { opacity: 0.85; background-size: cover; background-position: center top; }
}

/* Full bio sections on About page */
.bio-block-cols { display: flex; gap: var(--space-2xl); align-items: flex-start; }
.bio-block-cols .bio-block { flex: 1 1 0; margin-bottom: 0; }
@media (max-width: 860px) {
	.bio-block-cols { flex-direction: column; gap: var(--space-lg); }
	.bio-cols-section .bio-block { text-align: center; }
	.bio-cols-section .bio-block__icon { margin: 0 auto var(--space-xs); }
}
.bio-block { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.bio-block:last-child { margin-bottom: 0; }
.bio-block h3 {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gsmc-gold-deep);
	font-family: var(--font-sans);
	margin-bottom: 0.6rem;
}
.bio-block h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.bio-block p { color: var(--color-text); font-size: 1.05rem; max-width: 72ch; }

.expertise-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.expertise-tags span {
	font-size: 0.85rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: 30px;
	color: var(--gsmc-navy-dark);
	background: var(--gsmc-white);
}

/* ==========================================================================
   CTA band (image background)
   ========================================================================== */

.cta-band {
	position: relative;
	overflow: hidden;
	background: var(--gsmc-navy);
}
.cta-band__img {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0.32;
}
.cta-band::after {
	content: '';
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(180deg, rgba(12,39,64,0.55) 0%, rgba(12,39,64,0.92) 100%);
}
.cta-band__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	flex-wrap: wrap;
}
.cta-band h2 { color: var(--gsmc-white); font-size: clamp(1.6rem, 3vw, 2.1rem); max-width: 20ch; margin-bottom: 0.5rem; }
.cta-band p { color: rgba(247,242,236,0.8); }
.cta-band__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

@media (max-width: 760px) {
	.cta-band__inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ==========================================================================
   Page header (Services / About / Contact interior banner)
   ========================================================================== */

.page-header {
	background: var(--gsmc-navy);
	padding-block: var(--space-xl) var(--space-lg);
	text-align: center;
}
.page-header .section-eyebrow { color: var(--gsmc-gold-light); }
.page-header h1 { color: var(--gsmc-white); font-size: clamp(2rem, 3.6vw, 2.75rem); margin-bottom: var(--space-xs); }
.page-header p { color: rgba(247,242,236,0.78); max-width: 640px; margin-inline: auto; font-size: 1.05rem; }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-layout {
	display: grid;
	grid-template-columns: 0.8fr 1.6fr;
	gap: var(--space-md);
	align-items: start;
}

.contact-info-card {
	background: var(--gsmc-navy);
	color: var(--gsmc-cream);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}
.contact-info-card h3 { color: var(--gsmc-white); font-size: 1.3rem; }
.contact-info-card p { color: rgba(247,242,236,0.78); }

/* Card now ends after the two info items (the closing quote block was
   removed per client request) — extra breathing room top and bottom keeps
   the shorter card from feeling cramped next to the taller form card. */
.contact-info-card--roomy { display: flex; flex-direction: column; padding-block: var(--space-2xl) var(--space-xl); }
.contact-info-item--roomy { margin-top: var(--space-lg); }
.contact-info-item--roomy:first-of-type { margin-top: var(--space-xl); }

.contact-info-item { display: flex; gap: 0.9rem; margin-top: var(--space-md); align-items: flex-start; }
.contact-info-item svg { width: 22px; height: 22px; color: var(--gsmc-gold-light); flex-shrink: 0; margin-top: 3px; }
.contact-info-item strong { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gsmc-gold-light); margin-bottom: 0.2rem; }
.contact-info-item span, .contact-info-item a { font-size: 0.98rem; color: var(--gsmc-cream); }

.contact-info-card blockquote {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(247,242,236,0.18);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1rem;
	color: rgba(247,242,236,0.88);
}

.form-card {
	background: var(--gsmc-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg) var(--space-md);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-md); }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-sm); }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 0.82rem; font-weight: 600; color: var(--gsmc-navy-dark); }
.form-field input,
.form-field select,
.form-field textarea {
	padding: 1.15rem 1.4rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--gsmc-cream);
	color: var(--color-text);
	font-size: 1rem;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.2s var(--ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--gsmc-gold);
	background: var(--gsmc-white);
}
/* Message box: tall enough that a real, detailed message is visible while
   typing, not just a couple of lines before it starts scrolling. */
.form-field textarea { min-height: 220px; resize: vertical; line-height: 1.5; }

/* Hidden spam-trap field for bots. Uses a standard "visually hidden"
   technique (tiny clipped box) instead of a large negative left offset —
   the old -9999px approach is a known cause of phantom horizontal
   scroll/pan on mobile browsers, since the off-screen box still gets
   counted in the page's scrollable width on some devices. */
.form-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

.form-note { font-size: 0.85rem; color: var(--color-text-muted); margin-top: var(--space-sm); }

.form-status {
	padding: 0.9rem 1.1rem;
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-md);
	font-size: 0.95rem;
	font-weight: 500;
}
.form-status--success { background: rgba(31,74,44,0.1); color: var(--gsmc-green); border: 1px solid rgba(31,74,44,0.25); }
.form-status--error { background: rgba(178,34,34,0.08); color: #8a2020; border: 1px solid rgba(178,34,34,0.25); }

@media (max-width: 900px) {
	.contact-layout { grid-template-columns: 1fr; }
	.form-card { order: 1; }
	.contact-info-card { order: 2; }
}
@media (max-width: 560px) {
	.form-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--gsmc-navy-dark);
	color: rgba(247,242,236,0.72);
	padding-block: var(--space-xl) var(--space-md);
}
.footer-top {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: var(--space-lg);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid rgba(247,242,236,0.12);
}
.footer-logo img { height: 196px; width: auto; margin-bottom: var(--space-sm); }
.footer-top p { font-size: 0.92rem; max-width: 34ch; }
.footer-widget-title, .footer-col h4 {
	font-family: var(--font-sans);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gsmc-gold-light);
	margin-bottom: var(--space-sm);
}
.footer-col ul li { margin-bottom: 0.55rem; }
.footer-col a { font-size: 0.95rem; }
.footer-col a:hover { color: var(--gsmc-gold-light); }

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-md);
	font-size: 0.85rem;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.footer-bottom a:hover { color: var(--gsmc-gold-light); }

@media (max-width: 760px) {
	.footer-top { grid-template-columns: 1fr; gap: var(--space-lg); text-align: center; }
	.footer-logo { display: inline-block; }
	.footer-logo img { margin-left: auto; margin-right: auto; }
	.footer-top p { margin-inline: auto; }
	.footer-col ul { display: inline-block; text-align: center; }
	.footer-bottom { flex-direction: column; text-align: center; gap: 0.6rem; }
}

/* ==========================================================================
   Misc utility
   ========================================================================== */

.text-center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
	body { font-size: 16px; }
	.section { padding-block: var(--space-xl); }
	:root { --container-pad: 1.25rem; }
}

/* ==========================================================================
   Luxe CTA — home page closing band (full-bleed photo, green scrim, centered)
   ========================================================================== */

.luxe-cta {
	position: relative;
	overflow: hidden;
	background: var(--gsmc-green-dark);
}

.luxe-cta__bg {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.luxe-cta__scrim {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(
		92deg,
		rgba(81, 142, 90, 0.95) 0%,
		rgba(81, 142, 90, 0.9) 40%,
		rgba(81, 142, 90, 0.78) 65%,
		rgba(81, 142, 90, 0.62) 100%
	);
}

.luxe-cta__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin-inline: auto;
	padding: var(--space-2xl) var(--container-pad);
	text-align: center;
}
.luxe-cta__content .section-eyebrow { color: var(--gsmc-gold-light); margin-bottom: 0.6rem; }
.luxe-cta__content .hero__rule { background: var(--gsmc-gold); }

.luxe-cta__content h2 {
	color: var(--gsmc-white);
	font-size: clamp(2rem, 3.6vw, 2.75rem);
	margin: 0.6rem 0 0;
	line-height: 1.2;
}

.luxe-cta__content p {
	color: rgba(247, 242, 236, 0.85);
	font-size: clamp(1.25rem, 2.1vw, 1.55rem); /* ~half the heading size, per client request */
	line-height: 1.5;
	margin: 1.4rem 0 var(--space-lg);
}

@media (max-width: 700px) {
	.luxe-cta__content { padding: var(--space-xl) var(--container-pad); }
}
@media (max-width: 480px) {
	/* The button's long label plus "white-space: nowrap" made it wider
	   than the screen, so it overflowed to one side instead of sitting
	   centered like the text above it. Letting it fill the row and
	   centering its own contents keeps it centered on any phone width. */
	.luxe-cta__content .btn--cta-lg {
		width: 100%;
		justify-content: center;
		white-space: normal;
	}
}

/* Section title labels: +25% from the original 0.78rem base on mobile
   (desktop is set to +50% = 1.17rem in the base rule above) */
@media (max-width: 640px) {
	.section-eyebrow,
	.hero__eyebrow,
	.clients-band__label {
		font-size: 0.975rem;
	}
}

/* ==========================================================================
   How It Works — background photo + brand-requested #518E5A overlay
   ========================================================================== */

.how-it-works-section {
	position: relative;
	overflow: hidden;
	color: var(--gsmc-cream);
}
.how-it-works-section__bg {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.how-it-works-section__overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(81, 142, 90, 0.88);
	z-index: 1;
}
.how-it-works-section .section-eyebrow { color: var(--gsmc-gold-light); }
.how-it-works-section h2 { color: var(--gsmc-white); }

/* ==========================================================================
   Page Hero — reusable photo-background header for interior pages
   (Services / About / Contact) — mirrors the home hero treatment.
   ========================================================================== */

.page-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-2xl);
	text-align: center;
}
.page-hero__bg {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.page-hero__cream-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(247, 242, 236, 0.9);
	z-index: 1;
}
.page-hero__cream-overlay--mobile { background: rgba(247, 242, 236, 0.93); }
.page-hero__wave {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.85;
	z-index: 2;
}
.page-hero .container { position: relative; z-index: 3; max-width: 720px; }
.page-hero h1 { font-size: clamp(2.1rem, 3.8vw, 2.85rem); color: var(--gsmc-navy-dark); margin-bottom: var(--space-xs); }
.page-hero p { color: #3B4640; font-size: clamp(1.07rem, 1.9vw, 1.4rem); } /* reduced ~18% per client request */

.page-hero--large { padding-block: calc(var(--space-2xl) * 1.5); }

@media (max-width: 700px) {
	.page-hero { padding-block: var(--space-xl); }
	.page-hero--large { padding-block: var(--space-2xl); }
}

/* ==========================================================================
   About page hero — matches the original home-hero layout (cream + waves +
   side photo), with the portrait sized 30% smaller than the original 620px.
   ========================================================================== */

.about-hero {
	position: relative;
	background: var(--gsmc-cream);
	overflow: hidden;
}
.about-hero__wave {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.9;
	z-index: 0;
	pointer-events: none;
}
.about-hero__grid {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 420px;
}
.about-hero__content {
	flex: 1 1 420px;
	padding: var(--space-xl) 0;
}
.about-hero__content h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); color: var(--gsmc-navy-dark); margin-bottom: var(--space-xs); }
.about-hero__content p { color: #3B4640; font-size: 1.08rem; }
.about-hero__photo {
	flex: 1 1 300px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.about-hero__photo img {
	max-height: 434px; /* 620px original hero size, reduced 30% */
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

@media (max-width: 860px) {
	.about-hero__grid { flex-direction: column; text-align: center; min-height: auto; }
	.about-hero__content { padding: var(--space-lg) 0 var(--space-sm); }
	.about-hero__photo { order: -1; }
	.about-hero__photo img { max-height: 260px; }
}

/* ==========================================================================
   Services page — alternating photo/text feature blocks
   ========================================================================== */

.svc-feature {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
	padding-block: var(--space-2xl);
}

.svc-feature__media {
	flex: 1 1 440px;
}
.svc-feature__media img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	border-radius: var(--radius-md);
	display: block;
}
.svc-feature__media-fallback {
	width: 100%;
	height: 320px;
	border-radius: var(--radius-md);
	background: var(--gsmc-cream);
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
}
.svc-feature__media-fallback .icon-badge { width: 96px; height: 96px; margin: 0; }

.svc-feature__text { flex: 1 1 440px; }
.svc-feature__icon { margin: 0 0 var(--space-sm) 0; }
.svc-feature__text h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.svc-feature__text p { color: var(--color-text-muted); font-size: 1.03rem; }

/* Reverse alternates: media on the right instead of left */
.svc-feature--reverse { flex-direction: row-reverse; }

@media (max-width: 860px) {
	.svc-feature,
	.svc-feature--reverse {
		flex-direction: column;
		gap: 0;
		padding-block: 0;
	}
	.svc-feature__media img,
	.svc-feature__media-fallback { height: 220px; }
	.svc-feature__text { text-align: center; margin-top: -70px; }
	.svc-feature__icon { margin: 0 auto var(--space-xs); }
}

/* Services page — per-section background variants (white + wave texture) */
.svc-section { position: relative; overflow: hidden; }
.svc-section--wave { background: var(--gsmc-white); }
.svc-section__wave {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.7;
	z-index: 0;
	pointer-events: none;
}
.svc-section--wave .container { position: relative; z-index: 1; }

/* About page hero — large portrait opposite the text, split two-column layout */
.hero__grid--split { justify-content: space-between; gap: var(--space-2xl); }
.about-hero-photo-col {
	flex: 1 1 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.about-hero-photo {
	width: 100%;
	max-width: 460px;
	height: auto;
	position: relative;
	z-index: 4;
}
@media (max-width: 960px) {
	.hero__grid--split { flex-direction: column; }
	.about-hero-photo-col { order: -1; margin-bottom: var(--space-sm); }
	.about-hero-photo { max-width: 260px; }
}

/* About page — Track Record / Background section: icons + wave texture */
.bio-cols-section { position: relative; overflow: hidden; }
.bio-cols-section__wave {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.7;
	z-index: 0;
	pointer-events: none;
}
.bio-cols-section .container { position: relative; z-index: 1; }
.bio-block__icon { margin: 0 0 var(--space-sm) 0; }

/* Home hero — no-photo variant: cream + waves only, large vertical logo on the right */
.hero--nophoto { background: var(--gsmc-cream); }
.hero__logo-col {
	flex: 1 1 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero__logo-large {
	width: 100%;
	max-width: 432px; /* +20% from 360px per client request */
	height: auto;
	transform: translateY(-20%); /* move up ~20% per client request */
}
@media (max-width: 960px) {
	.hero--nophoto .hero__content { padding-top: var(--space-xl); }
	.hero--nophoto .hero__lede { margin-top: 2rem; } /* per client request: home page only, mobile only */
}

/* Home page — full-width photo strips (2-up rows) */
.photo-strip__row {
	display: flex;
	gap: var(--space-md);
}
.photo-strip__item {
	flex: 1 1 0;
	border-radius: var(--radius-md);
	overflow: hidden;
}
.photo-strip__item img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--ease);
}
.photo-strip__item:hover img { transform: scale(1.03); }

@media (max-width: 700px) {
	.photo-strip__row { flex-direction: column; gap: var(--space-sm); }
	.photo-strip__item img { height: 200px; }
}

/* About page — 2x2 photo grid with wave texture wrapping above and below */
.photo-grid-wrap {
	position: relative;
	padding-block: var(--space-2xl);
}
.photo-grid-wrap__wave {
	position: absolute;
	left: 0; right: 0;
	height: 140px;
	background-size: cover;
	background-position: center;
	opacity: 0.85;
	z-index: 0;
	pointer-events: none;
}
.photo-grid-wrap__wave--top { top: -30px; }
.photo-grid-wrap__wave--bottom { bottom: -30px; transform: scaleY(-1); }

.photo-grid-wrap__grid {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}
.photo-grid-wrap__item {
	flex: 1 1 calc(50% - var(--space-md) / 2);
	min-width: 260px;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(12,39,64,0.12);
}
.photo-grid-wrap__item img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--ease);
}
.photo-grid-wrap__item:hover img { transform: scale(1.03); }

@media (max-width: 700px) {
	.photo-grid-wrap__item { flex: 1 1 100%; }
	.photo-grid-wrap__item img { height: 200px; }
	.photo-grid-wrap__wave { height: 80px; }
}

/* Clients section — desktop uses one combined logo image, mobile keeps individual logos */
.clients-single { text-align: center; }
.clients-single img {
	max-width: 900px;
	width: 100%;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 960px) {
	.clients-section { padding-bottom: var(--space-sm); }
}

/* ==========================================================================
   Work & Experience page — 2x2 photo grid sections
   ========================================================================== */

.work-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}
.work-grid__item {
	flex: 1 1 calc(50% - var(--space-md) / 2);
	min-width: 260px;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(12,39,64,0.10);
}
.work-grid__item img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--ease);
}
.work-grid__item:hover img { transform: scale(1.03); }

/* Sections with 3 photos (instead of the default 4): even 3-up row on
   desktop instead of a lone half-width item wrapping onto its own line. */
.work-grid--3 .work-grid__item { flex: 1 1 calc(33.333% - var(--space-md) * 2 / 3); }

@media (max-width: 700px) {
	.work-grid__item { flex: 1 1 100%; }
	.work-grid__item img { height: 220px; }
}

.work-experience-section { padding-block: var(--space-2xl); }
.work-experience-section .section-header { text-align: left; margin-bottom: 0; max-width: 680px; margin-inline: 0; }

.work-experience-final { text-align: center; }
.work-experience-final .section-eyebrow { display: block; font-size: 1.4rem; } /* per client request */
.work-experience-final h2 { font-size: 2rem; } /* per client request */
.work-experience-final p { font-size: 1.35rem; } /* per client request */