/* Root fix: wp:post-content renders as an is-layout-flow wrapper that WP's
   alignfull CSS does not know how to escape, so full-bleed sections were
   silently capped at the theme's contentSize on real desktop widths. */
.wp-block-post-content > .alignfull {
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
body {
	overflow-x: hidden;
}
@media (max-width: 780px) {
	/* Belt-and-suspenders: body's overflow-x doesn't stop a
	   position:fixed descendant (like .glass-bottom-nav) from
	   extending past the viewport and making the page horizontally
	   scrollable — only the root element's overflow actually governs
	   that. */
	html {
		overflow-x: hidden;
	}
}

/* Custom cursor — the salt-crystal icon. This is the fallback/base
   layer: static image cursor for touch, reduced-motion, and anything
   before crystal-cursor.js runs. Declared on links/buttons too since a
   bare `cursor` on body doesn't reliably win against interactive
   elements in every browser. Left off text inputs (native text cursor
   stays there, users expect it). */
html,
body,
a,
button,
.wp-element-button,
.service-card,
.service-cta-card,
[role="button"] {
	cursor: url('photos/cursor-salt-icon.svg?v=1') 12 6, pointer;
}
body {
	cursor: url('photos/cursor-salt-icon.svg?v=1') 12 6, auto;
}

/* Live crystal cursor (crystal-cursor.js) — once it initialises (fine
   pointer + no reduced motion) it takes over from the static image
   cursor above and hides the native one everywhere except real text
   fields, where people still expect the I-beam. */
html.has-crystal-cursor,
html.has-crystal-cursor body,
html.has-crystal-cursor a,
html.has-crystal-cursor button,
html.has-crystal-cursor .wp-element-button,
html.has-crystal-cursor .service-card,
html.has-crystal-cursor .service-cta-card,
html.has-crystal-cursor [role="button"] {
	cursor: none;
}
html.has-crystal-cursor input,
html.has-crystal-cursor textarea,
html.has-crystal-cursor select {
	cursor: auto;
}
.crystal-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 44px;
	height: 44px;
	z-index: 9999;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.2s ease;
	will-change: transform;
}
.crystal-cursor.is-hidden {
	opacity: 0;
}
.crystal-cursor svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.crystal-shard {
	transform-box: view-box;
	transform-origin: 18.4px 13.6px;
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.crystal-shard polygon {
	stroke: rgba(11, 11, 11, 0.25);
	stroke-width: 0.4;
}
.crystal-shard[data-shard="1"] polygon { fill: #F2C4B4; }
.crystal-shard[data-shard="2"] polygon { fill: #D98C7C; }
.crystal-shard[data-shard="3"] polygon { fill: #C97A68; }
.crystal-shard[data-shard="4"] polygon { fill: #9E5050; }
.crystal-shard[data-shard="5"] polygon { fill: #E8A895; }
.crystal-cursor.is-pressed {
	transform-origin: 18.4px 13.6px;
}
.crystal-cursor.is-pressed .crystal-shard {
	transition-duration: 0.15s;
	transform: scale(0.88);
}
/* Shatter — each shard flies outward from the shared centre point
   along its own facet's outward direction, plus a small independent
   spin, on hover of anything clickable. Reassembly (the default,
   un-shattered state above) gets the springy overshoot; the shatter
   itself is a quick, decisive ease-out — it should feel like it broke,
   not like it bounced. */
.crystal-cursor.is-shattered .crystal-shard {
	transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.crystal-cursor.is-shattered .crystal-shard[data-shard="1"] {
	transform: translate(5px, -10px) rotate(-18deg);
}
.crystal-cursor.is-shattered .crystal-shard[data-shard="2"] {
	transform: translate(11px, 2px) rotate(12deg);
}
.crystal-cursor.is-shattered .crystal-shard[data-shard="3"] {
	transform: translate(1px, 11px) rotate(-10deg);
}
.crystal-cursor.is-shattered .crystal-shard[data-shard="4"] {
	transform: translate(-10px, 5px) rotate(16deg);
}
.crystal-cursor.is-shattered .crystal-shard[data-shard="5"] {
	transform: translate(-7px, -9px) rotate(-14deg);
}

/* Lenis smooth-scroll companion rules */
html.lenis, html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
	overflow: hidden;
}

/* Browser surfaces, themed */
::selection {
	background-color: #9E5050;
	color: #F7F3EC;
}
:focus-visible {
	outline: 2px solid #9E5050;
	outline-offset: 3px;
}
html {
	scrollbar-color: #9E5050 #F7F3EC;
}

/* Nav links */
.wp-block-navigation-item .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
	transition: color 0.2s ease;
}
.wp-block-navigation-item .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1.5px;
	background: currentColor;
	transition: right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.wp-block-navigation-item:hover .wp-block-navigation-item__content::after {
	right: 0;
}

/* Contact nav item styled as a signature pill */
.is-style-nav-cta > .wp-block-navigation-item__content {
	background: #9E5050;
	color: #F7F3EC !important;
	padding: 0.5rem 1.1rem !important;
	border-radius: 100px;
}
.is-style-nav-cta > .wp-block-navigation-item__content::after {
	display: none;
}
.is-style-nav-cta:hover > .wp-block-navigation-item__content {
	background: #0B0B0B;
}

/* Buttons */
.wp-block-button__link,
a.wp-element-button {
	border-radius: 100px;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
}
.wp-block-button__link:hover,
a.wp-element-button:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 10px 24px -8px rgba(11, 11, 11, 0.3);
}
.wp-block-button__link:active,
a.wp-element-button:active {
	transform: translateY(0) scale(0.98);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #F7F3EC;
	color: #0B0B0B !important;
}

/* Floating glass pill nav — Apple-style material: real vibrancy blur,
   a bright top edge where light catches the surface, layered shadow. */
.site-header-glass.is-layout-constrained > * {
	/* WP's constrained layout caps direct children to the theme content width
	   and centers them — that's right for post content, wrong for a nav bar
	   that should reach the pill's own edges. Leave width on auto so the
	   row's own horizontal padding isn't added on top of a forced 100%. */
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.site-header-glass {
	position: fixed !important;
	top: 1.25rem;
	left: 1.25rem;
	right: 1.25rem;
	width: auto !important;
	max-width: 1400px;
	margin: 0 auto !important;
	z-index: 100;
	border-radius: 100px;
	overflow: hidden;
	background: rgba(247, 243, 236, 0.55);
	backdrop-filter: blur(28px) saturate(200%);
	-webkit-backdrop-filter: blur(28px) saturate(200%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		0 20px 50px -20px rgba(11, 11, 11, 0.4),
		0 4px 16px -8px rgba(11, 11, 11, 0.25);
	transition: background-color 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header-glass.is-scrolled {
	background: rgba(247, 243, 236, 0.82);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.8),
		0 12px 30px -12px rgba(11, 11, 11, 0.3);
}
.site-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem clamp(1.25rem, 4vw, 1.75rem);
}
.site-header-logo {
	display: inline-flex;
	line-height: 0;
}
.site-header-logo img {
	height: 34px;
	width: auto;
	display: block;
}
.site-nav-desktop {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}
.site-nav-desktop a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #0B0B0B;
	text-decoration: none;
	position: relative;
	padding-bottom: 2px;
	transition: color 0.2s ease;
}
.site-nav-desktop a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1.5px;
	background: currentColor;
	transition: right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav-desktop a:hover::after {
	right: 0;
}
.site-nav-desktop a.site-nav-cta {
	background: #9E5050;
	color: #F7F3EC;
	padding: 0.5rem 1.1rem;
	border-radius: 100px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.site-nav-desktop a.site-nav-cta::after {
	display: none;
}
.site-nav-desktop a.site-nav-cta:hover {
	background: #0B0B0B;
	transform: translateY(-1px);
}

/* Hamburger toggle — hidden on desktop */
.site-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}
.site-nav-toggle-bars {
	position: relative;
	width: 18px;
	height: 12px;
	display: block;
}
.site-nav-toggle-bars span {
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	background: #0B0B0B;
	border-radius: 2px;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav-toggle-bars span:first-child { top: 0; }
.site-nav-toggle-bars span:last-child { top: 10px; }
.site-header-glass.is-open .site-nav-toggle-bars span:first-child {
	top: 5px;
	transform: rotate(45deg);
}
.site-header-glass.is-open .site-nav-toggle-bars span:last-child {
	top: 5px;
	transform: rotate(-45deg);
}

/* Mobile menu expands the pill downward, in the same glass surface */
.site-nav-mobile {
	display: none;
	flex-direction: column;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
	padding: 0 clamp(1.25rem, 4vw, 1.75rem);
}
.site-nav-mobile a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	color: #0B0B0B;
	text-decoration: none;
	padding: 0.85rem 0;
	border-top: 1px solid rgba(11, 11, 11, 0.08);
}
.site-header-glass.is-open .site-nav-mobile {
	max-height: 320px;
	opacity: 1;
	padding-bottom: 0.75rem;
}
.site-header-glass.is-open {
	border-radius: 28px;
}

@media (max-width: 780px) {
	.site-nav-desktop {
		display: none;
	}
	.site-nav-toggle {
		display: flex;
	}
	.site-nav-mobile {
		display: flex;
	}
}
body {
	padding-top: 0 !important;
}
main {
	padding-top: clamp(5.5rem, 10vw, 7rem);
}
.wp-block-cover.alignfull:first-child,
.hero-photo-bg.alignfull:first-child,
.contact-hero-bg.alignfull:first-child,
.about-hero-bg.alignfull:first-child,
.reel-grain-bg.alignfull:first-child,
.grain-stage.alignfull:first-child,
main > .wp-block-post-content > .wp-block-cover.alignfull:first-child,
main > .wp-block-post-content > .hero-photo-bg.alignfull:first-child,
main > .wp-block-post-content > .contact-hero-bg.alignfull:first-child,
main > .wp-block-post-content > .about-hero-bg.alignfull:first-child,
main > .wp-block-post-content > .reel-grain-bg.alignfull:first-child,
main > .wp-block-post-content > .grain-stage.alignfull:first-child {
	margin-top: calc(-1 * clamp(5.5rem, 10vw, 7rem));
	padding-top: clamp(5.5rem, 10vw, 7rem);
}

/* Photo frame — Apple-style rounded card with soft shadow */
.photo-frame {
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(11, 11, 11, 0.35), 0 8px 20px -8px rgba(11, 11, 11, 0.2);
	position: relative;
}
.photo-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Floating glass card, overlapping a photo-frame corner */
.glass-card-float {
	position: absolute;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 20px;
	box-shadow: 0 20px 40px -15px rgba(11, 11, 11, 0.3);
	padding: 1.25rem 1.5rem;
}

/* Glass service card, sits over a photo/color background */
.glass-card {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 24px;
	padding: 2rem;
}

/* Full-bleed photo section background */
.photo-section {
	position: relative;
	background-size: cover;
	background-position: center;
}
.photo-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 11, 0.55);
}
.photo-section > * {
	position: relative;
	z-index: 1;
}

/* Split two-column layouts (hero, intros, team photos) — stack on mobile */
@media (max-width: 780px) {
	.split-2col {
		grid-template-columns: 1fr !important;
	}
	.glass-card-float {
		position: static !important;
		margin-top: 1rem;
		max-width: none !important;
	}
}

/* Scroll reveal */
.reveal-up {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.reveal-up {
		opacity: 1;
		transform: none;
	}
}

/* Team grid */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
}
.team-grid .photo-frame {
	aspect-ratio: 3/4;
	border-radius: 18px;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-grid .photo-frame:hover {
	transform: translateY(-6px);
}

/* Named team member cards — About page */
.team-named-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.team-member-card .photo-frame {
	aspect-ratio: 3/4;
	margin-bottom: 1.25rem;
	background: #FFFFFF;
	border: 1px solid rgba(247, 243, 236, 0.1);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
/* Full photo, never cropped — these are white-backdrop studio shots, so
   contain's letterboxing (when a photo's own ratio doesn't match the
   card) reads as more white, not a visible seam. */
.team-member-card .photo-frame img {
	object-fit: contain;
	filter: none;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-member-card:hover .photo-frame {
	transform: translateY(-8px);
	box-shadow: 0 40px 70px -24px rgba(11, 11, 11, 0.55), 0 0 0 1px rgba(158, 80, 80, 0.35);
	border-color: rgba(158, 80, 80, 0.4);
}
.team-member-card:hover .photo-frame img {
	transform: scale(1.04);
}
.team-member-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.15rem;
	color: #F7F3EC;
	margin: 0 0 0.2rem;
}
.team-member-role {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #C97B7B;
	margin: 0;
}
.team-rest-label {
	color: #B87274;
	font-size: 0.95rem;
	margin: 0 0 1.25rem;
}

/* Open-seat card — new hires without a photo yet. Grain-textured
   terracotta instead of a blank box or a broken image, dashed border so
   it reads as intentionally "in progress," not an error. */
.team-member-card.is-open .photo-frame {
	background-color: #9E5050;
	background-image:
		linear-gradient(160deg, rgba(158, 80, 80, 0.7) 0%, rgba(158, 80, 80, 0.88) 100%),
		url('photos/grain-footer.jpg');
	background-size: cover;
	background-position: center;
	background-blend-mode: overlay, normal;
	border: 2px dashed rgba(247, 243, 236, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}
.team-open-icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(247, 243, 236, 0.1);
	border: 1px solid rgba(247, 243, 236, 0.35);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
.team-open-icon svg {
	width: 26px;
	height: 26px;
	color: #F7F3EC;
}
.team-member-card.is-open:hover .photo-frame {
	transform: translateY(-8px);
	border-color: rgba(247, 243, 236, 0.65);
}
.team-member-card.is-open:hover .team-open-icon {
	transform: scale(1.1);
	background: rgba(247, 243, 236, 0.18);
}
.team-member-card.is-open .team-member-role {
	color: #F0D3D3;
}
@media (max-width: 900px) {
	.team-named-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.team-named-grid {
		grid-template-columns: 1fr;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* About page — "why work with us" editorial value list (no cards, no icons) */
.about-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	margin: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.about-value-word {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	color: #9E5050;
	margin: 0 0 0.6rem;
}
.about-value-desc {
	color: #5A5049;
	font-size: 0.98rem;
	line-height: 1.6;
	margin: 0;
	max-width: 32ch;
}
@media (max-width: 780px) {
	.about-values {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* Hero background photo — swaps to a portrait-oriented shot on narrow
   screens instead of force-cropping the wide team photo down to a sliver */
.hero-photo-bg {
	background-image: url('photos/team-formal.jpg');
	background-size: cover;
	background-position: center 35%;
}
.hero-photo-dim {
	position: absolute;
	inset: 0;
	/* Graded duotone, not a flat neutral scrim — warm terracotta bleeding
	   into ink at the edges reads as a color-graded frame rather than a
	   dimmed photo, the cinematic-agency treatment this redesign commits
	   to sitewide. */
	background:
		linear-gradient(165deg, rgba(84, 36, 30, 0.55) 0%, rgba(11, 11, 11, 0.45) 45%, rgba(11, 11, 11, 0.82) 100%);
}

/* Hero word-morph — cycles a few brand words then dissolves into the
   logo before looping back. Replaces the old static wordmark+caption.
   An SVG gooey filter (feColorMatrix alpha threshold + feComposite) on
   the shared stage merges each item's blur with the next's as they
   overlap, so it reads as one liquid material morphing rather than a
   plain crossfade. Pure CSS — animation-delay offsets on independent
   copies of the same keyframe do the whole loop, no JS. */
.morph-filter-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.hero-morph__stage {
	display: grid;
	place-items: center;
	filter: url(#heroGoo);
}
.hero-morph__item {
	grid-area: 1 / 1;
	color: #F7F3EC;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(2.5rem, 7.5vw, 5.5rem);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	opacity: 0;
	animation-name: heroMorphOnce;
	animation-duration: 1.8s;
	animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
	animation-iteration-count: 1;
	animation-fill-mode: both;
	will-change: opacity, filter, transform;
}
.hero-morph__logo {
	width: clamp(200px, 34vw, 560px);
	height: auto;
	/* Unlike the words, the logo doesn't fade back out — it's where the
	   sequence lands and stays, so the hero settles on the brand mark
	   instead of looping forever. */
	animation-name: heroMorphLogoOnce;
	animation-duration: 0.9s;
}
.hero-morph__item--1 { animation-delay: 0s; }
.hero-morph__item--2 { animation-delay: 1.2s; }
.hero-morph__item--3 { animation-delay: 2.4s; }
.hero-morph__item--4 { animation-delay: 3.6s; }

@keyframes heroMorphOnce {
	0% { opacity: 0; filter: blur(20px); transform: scale(0.8); }
	33.33% { opacity: 1; filter: blur(0); transform: scale(1); }
	66.66% { opacity: 1; filter: blur(0); transform: scale(1); }
	100% { opacity: 0; filter: blur(20px); transform: scale(1.2); }
}
@keyframes heroMorphLogoOnce {
	0% { opacity: 0; filter: blur(20px); transform: scale(0.8); }
	66.66% { opacity: 1; filter: blur(0); transform: scale(1); }
	100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* Sub-caption, back under the logo — settles in just after the logo
   itself has landed (3.6s delay + 0.9s morph + a small beat). */
.hero-mega {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.6;
	font-size: clamp(0.8rem, 1.1vw, 0.95rem);
	color: #E8D9D9;
	margin: 1.5rem auto 0;
	text-align: center;
	opacity: 0;
	transform: translateY(18px);
	animation: stagger-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: 4.6s;
}
.hero-mega span {
	display: block;
}
.hero-mega em {
	font-style: normal;
	color: #D98C7C;
}

@media (prefers-reduced-motion: reduce) {
	.hero-morph__stage {
		filter: none;
	}
	.hero-morph__item {
		animation-name: heroMorphFadeOnce;
		filter: none !important;
		transform: none !important;
	}
	.hero-morph__logo {
		animation-name: heroMorphLogoFadeOnce;
	}
	.hero-mega {
		opacity: 1;
		transform: none;
		animation: none;
	}
}
@keyframes heroMorphFadeOnce {
	0% { opacity: 0; }
	33.33% { opacity: 1; }
	66.66% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes heroMorphLogoFadeOnce {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@media (max-width: 700px) {
	/* Phone fit: give the hero room to grow instead of capping it on
	   small screens, matching the old wordmark hero's mobile fit fix. */
	.hero-photo-bg {
		min-height: 100svh !important;
		max-height: none !important;
		padding: 6.5rem 0 3rem;
	}
	.hero-morph__item {
		font-size: clamp(2rem, 11vw, 3rem);
	}
	.hero-morph__logo {
		width: clamp(160px, 60vw, 320px);
	}
}

/* Floating salt-stone parallax accents — the real SaltStone photos,
   drifting at their own scroll speed via .js-parallax (interactions.js).
   Purely decorative (aria-hidden), transform-only, capped to wider
   viewports so they never compete with content on a phone screen. */
.parallax-stone {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	filter: drop-shadow(0 30px 50px rgba(11, 11, 11, 0.5));
	will-change: transform;
}
.parallax-stone--1 {
	top: 8%;
	right: 4%;
	width: clamp(160px, 18vw, 320px);
}
.parallax-stone--2 {
	bottom: 6%;
	left: 3%;
	width: clamp(120px, 13vw, 230px);
}
.parallax-stone--3 {
	top: 6%;
	right: 6%;
	width: clamp(110px, 12vw, 200px);
}
@media (max-width: 900px) {
	.parallax-stone {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.parallax-stone {
		transform: none !important;
	}
}
.contact-hero-bg .hero-photo-dim {
	/* Grain background is dark on its own — no dimming scrim needed */
	display: none;
}

/* About page hero — the same grainy black material as the footer and
   contact page, not a photo. (An earlier version layered the grain onto
   a <span> overlay, which WP's constrained-layout rule silently capped to
   the theme's content width, showing the raw photo down both sides — the
   same bug the header nav hit. Painting the grain directly on the group's
   own background avoids that: the group element itself is never a "child"
   subject to that width cap.) */
.about-hero-bg {
	background-color: #0B0B0B;
	background-image: url('photos/grain-footer.jpg');
	background-size: cover;
	background-position: center;
	min-height: 78vh;
	display: flex;
	align-items: flex-end;
}
.about-hero-bg .hero-photo-dim {
	display: none;
}
.about-hero-content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4rem);
}
.about-hero-content h1 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	color: #F7F3EC;
	margin: 0 0 1.1rem;
}
.about-hero-content h1 em {
	font-style: italic;
	color: #C97B7B;
}
.about-hero-content p {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: #E8D9D9;
	max-width: 48ch;
	margin: 0;
}
@media (max-width: 700px) {
	.about-hero-bg {
		min-height: 68vh;
		background-position: center 18%;
	}
}
@media (max-width: 700px) {
	.hero-photo-bg {
		background-image: url('photos/hero-portrait.jpg');
		background-position: center 15%;
	}
}

/* Hero staggered entrance */
.hero-stagger .stagger-1,
.hero-stagger .stagger-2,
.hero-stagger .stagger-3 {
	opacity: 0;
	transform: translateY(18px);
	animation: stagger-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-stagger .stagger-1 { animation-delay: 0.35s; }
.hero-stagger .stagger-2 { animation-delay: 0.55s; }
.hero-stagger .stagger-3 { animation-delay: 0.75s; }
@keyframes stagger-in {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-stagger .stagger-1,
	.hero-stagger .stagger-2,
	.hero-stagger .stagger-3 {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* Editorial serif-italic accent, used sparingly on section headings
   for a more editorial/luxury feel (brand terracotta italic). */
.editorial-heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-style: italic;
	/* Match the accent already used for emphasis words on a dark ground
	   sitewide (the hero's "SEEN", etc.) instead of the unrelated tan
	   this had before. */
	color: #D98C7C;
}

/* Services grid, 6 cards + a tall image/CTA card */
.services-grid-6 {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 1.15fr;
	gap: 1.25rem;
}
.service-card {
	display: block;
	background: #F7F3EC;
	border: 1px solid rgba(11, 11, 11, 0.08);
	border-radius: 16px;
	padding: 1.75rem;
	text-decoration: none;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px -16px rgba(11, 11, 11, 0.45);
}
.service-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.35rem;
	color: #9E5050;
	margin: 0 0 0.85rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid rgba(158, 80, 80, 0.35);
}
.service-card p {
	color: #3A3532;
	font-size: 0.92rem;
	margin: 0;
	line-height: 1.55;
}
.service-cta-card {
	grid-column: 3;
	grid-row: 1 / -1;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	min-height: 260px;
	display: block;
	text-decoration: none;
	background-image: linear-gradient(rgba(11,11,11,0.05), rgba(11,11,11,0.65)), url('photos/duo-camera.jpg');
	background-size: cover;
	background-position: center;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-cta-card:hover {
	transform: translateY(-6px);
}
.service-cta-card-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.5rem;
	background: rgba(11, 11, 11, 0.35);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
}
/* :not(.service-cta-btn) matters here: the button is also a direct-child
   <span> of this label, and a bare "span" in the selector otherwise
   matches it too, silently overriding its own color/display rule below
   (this bit both of us once already — the earlier ">" fix alone doesn't
   exclude a direct-child span just for having an extra class). */
.service-cta-card-label > span:not(.service-cta-btn) {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	color: #F7F3EC;
	margin-bottom: 0.9rem;
}
.service-cta-card-label > span:not(.service-cta-btn) em {
	color: #C9A38C;
	font-style: italic;
}
.service-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #F7F3EC;
	color: #0B0B0B;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.6rem 1.1rem;
	border-radius: 100px;
}
@media (max-width: 900px) {
	.services-grid-6 { grid-template-columns: repeat(2, 1fr); }
	.service-cta-card { grid-column: 1 / -1; grid-row: auto; min-height: 200px; }
}
@media (max-width: 600px) {
	.services-grid-6 { grid-template-columns: 1fr; }
}

/* Footer */
.footer-grain {
	background-color: #0B0B0B;
	background-image: linear-gradient(rgba(11,11,11,0.55), rgba(11,11,11,0.82)), url('photos/grain-footer.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.3fr;
	gap: 2.5rem;
	max-width: 1100px;
	margin: 0 auto;
}
.footer-col h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #B87274;
	margin: 0 0 1.1rem;
}
.footer-col a {
	display: block;
	color: #F7F3EC;
	text-decoration: none;
	font-size: 0.95rem;
	margin-bottom: 0.65rem;
	transition: color 0.2s ease, transform 0.2s ease;
}
.footer-col a:hover {
	color: #E8709A;
	transform: translateX(3px);
}
.footer-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}
.footer-photo {
	aspect-ratio: 1/1;
	border-radius: 10px;
	overflow: hidden;
}
.footer-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.footer-photo:hover img {
	transform: scale(1.08);
}
.footer-social {
	display: flex;
	gap: 1rem;
}
.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(247, 243, 236, 0.3);
	color: #F7F3EC;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover {
	background-color: #9E5050;
	border-color: #9E5050;
	transform: translateY(-3px);
}
@media (max-width: 780px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	.footer-connect {
		grid-column: 1 / -1;
	}
}
@media (max-width: 480px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* Contact page — same grainy black material as the footer, not a photo */
.contact-hero-bg {
	background-color: #0B0B0B;
	background-image:
		linear-gradient(160deg, rgba(184, 114, 116, 0.24) 0%, rgba(158, 80, 80, 0.16) 100%),
		url('photos/grain-footer.jpg');
	background-size: cover;
	background-position: center;
	background-blend-mode: overlay, normal;
}
.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.contact-detail {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}
.contact-detail-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(247, 243, 236, 0.15);
	color: #F7F3EC;
	flex-shrink: 0;
}
.contact-detail a {
	color: #F7F3EC;
	text-decoration: none;
	font-size: 1rem;
}
.contact-detail a:hover {
	color: #C97B7B;
}

.contact-form-card {
	box-sizing: border-box;
	max-width: 100%;
	background: rgba(247, 243, 236, 0.38);
	backdrop-filter: blur(32px) saturate(180%);
	-webkit-backdrop-filter: blur(32px) saturate(180%);
	border-radius: 24px;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	box-shadow: 0 30px 60px -20px rgba(11, 11, 11, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-top-color: rgba(255, 255, 255, 0.85);
	overflow: hidden;
}
.contact-form label {
	text-shadow: 0 1px 2px rgba(247, 243, 236, 0.6);
}
.contact-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}
.contact-form label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 600;
	color: #0B0B0B;
}
.contact-form-full {
	display: block;
	margin-bottom: 1rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	border: 1.5px solid rgba(11, 11, 11, 0.15);
	background: #FFFFFF;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 400;
	color: #0B0B0B;
	transition: border-color 0.2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: #9E5050;
}
/* Visible keyboard focus ring: terracotta on the white field is ~5.5:1, above the 3:1 minimum. */
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
	outline: 3px solid #9E5050;
	outline-offset: 2px;
}
.contact-form textarea {
	resize: vertical;
	min-height: 100px;
}
.salty-website-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.contact-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #9E5050;
	color: #F7F3EC;
	border: none;
	padding: 0.9rem 1.75rem;
	border-radius: 100px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	margin-top: 0.5rem;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}
.contact-submit:hover {
	transform: translateY(-2px) scale(1.03);
	background: #0B0B0B;
}
.contact-form-message {
	display: none;
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 12px;
	font-size: 0.95rem;
}
.contact-form-message.is-visible {
	display: block;
}
.contact-form-success {
	background: rgba(158, 80, 80, 0.12);
	color: #0B0B0B;
	border: 1px solid rgba(158, 80, 80, 0.3);
}
.contact-form-error {
	background: rgba(11, 11, 11, 0.06);
	color: #0B0B0B;
	border: 1px solid rgba(11, 11, 11, 0.15);
}
.contact-form-error a {
	color: #9E5050;
}
@media (max-width: 780px) {
	.contact-layout {
		grid-template-columns: 1fr;
	}
	.contact-form-row {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}
	.contact-form-card {
		background: rgba(247, 243, 236, 0.72);
		padding: 1.5rem;
	}
}
@media (max-width: 420px) {
	.contact-form-card {
		padding: 1.25rem;
		border-radius: 18px;
	}
}

/* Services page — alternating photo card + detail panel per service */
.services-heading {
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	color: #F7F3EC;
	margin: 0 auto 1rem;
}
.services-heading em {
	font-style: italic;
	color: #C97B7B;
}
.services-subhead {
	text-align: center;
	font-size: 1.1rem;
	color: #E8D9D9;
	max-width: 46ch;
	margin: 0 auto;
}

/* Services directory — one open detail at a time instead of six long
   alternating photo+text blocks stacked down the page (the old layout
   read as the same card repeated six times). The first service starts
   open so the page still reads with real content on load — no click
   required to see what's actually included — the rest disclose on
   demand. Built on native <details>/<summary> (works with zero JS:
   keyboard, screen readers and no-JS visitors all get a working
   accordion for free) with service-accordion.js layered on top only to
   smooth the open/close height, never to gate the content itself. */
.services-directory {
	/* Same recurring WP bug as the homepage sections: a direct child of
	   .is-layout-constrained gets forced to max-width:760px, which is
	   why this read as a narrow forced column instead of using the
	   section's real width. */
	position: relative;
	max-width: 1200px !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	border-top: 1px solid rgba(11, 11, 11, 0.12);
}
.service-item {
	border-bottom: 1px solid rgba(11, 11, 11, 0.12);
}
.service-item-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.4rem, 2.8vw, 2rem) 0;
	cursor: url('photos/cursor-salt-icon.svg?v=1') 12 6, pointer;
	list-style: none;
}
.service-item-summary::-webkit-details-marker {
	display: none;
}
.service-item-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	letter-spacing: -0.01em;
	color: #0B0B0B;
	transition: color 0.4s ease;
}
.service-item-summary:hover .service-item-name {
	color: #9E5050;
}
.service-item-toggle {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid rgba(11, 11, 11, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0B0B0B;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
.service-item-toggle svg {
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.service-item[open] .service-item-toggle {
	background: #9E5050;
	border-color: #9E5050;
	color: #F7F3EC;
}
.service-item[open] .service-item-toggle svg {
	transform: rotate(180deg);
}
.service-item-body-outer {
	overflow: hidden;
}
.service-item-body {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: stretch;
	padding-bottom: clamp(2rem, 4vw, 3rem);
}
.service-item-media {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	min-height: 320px;
	box-shadow: 0 30px 60px -20px rgba(11, 11, 11, 0.3), 0 8px 20px -8px rgba(11, 11, 11, 0.18);
}
.service-item-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.service-panel-label,
.service-included-label {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 600;
	font-size: 1.1rem;
	color: #9E5050;
	margin: 0 0 0.85rem;
}
.service-item-detail > p:not(.service-panel-label):not(.service-included-label) {
	color: #4A423C;
	font-size: 1.02rem;
	line-height: 1.65;
	margin: 0 0 1.75rem;
}
.service-included-list {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.service-included-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: #0B0B0B;
	font-size: 0.96rem;
}
.service-included-list svg {
	flex-shrink: 0;
	margin-top: 0.2rem;
	color: #9E5050;
}
.service-item-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #9E5050;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.3s ease, gap 0.3s ease;
}
.service-item-cta:hover {
	gap: 0.8rem;
	color: #7A3E3E;
}
@media (prefers-reduced-motion: reduce) {
	.service-item-toggle svg {
		transition: none;
	}
}
@media (max-width: 780px) {
	.service-item-body {
		grid-template-columns: 1fr;
	}
	.service-item-media {
		min-height: 240px;
	}
}

/* Services pricing — the starting-from package cards; the price is the
   headline of each card, not a small eyebrow above one. */
.services-pricing {
	max-width: 1200px !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: clamp(3rem, 6vw, 5rem);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.5rem, 3vw, 2rem);
}
.pricing-card {
	background: #FFFFFF;
	border-radius: 28px;
	padding: clamp(2rem, 4vw, 2.75rem);
	box-shadow: 0 20px 50px -30px rgba(11, 11, 11, 0.25);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
}
.pricing-card-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	color: #0B0B0B;
	margin: 0;
}
.pricing-card-price {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #9E5050;
	margin: 0;
}
.pricing-card-price span {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0;
	color: #7A6F67;
	margin-bottom: 0.3rem;
}
.pricing-card-price em {
	font-style: normal;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.1rem;
	letter-spacing: 0;
	color: #7A6F67;
}
.pricing-card-note {
	color: #4A423C;
	font-size: 0.98rem;
	line-height: 1.55;
	margin: 0;
}
.pricing-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #9E5050;
	color: #F7F3EC;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0.75rem 1.4rem;
	border-radius: 100px;
	text-decoration: none;
	margin-top: 0.4rem;
	transition: background-color 0.3s ease, transform 0.3s ease;
}
.pricing-card-cta:hover {
	background: #7A3E3E;
	transform: translateY(-1px);
}
@media (max-width: 780px) {
	.services-pricing {
		grid-template-columns: 1fr;
	}
}

/* Services FAQ — plain question/answer blocks. Deliberately not an
   accordion: the answer text needs to sit in the DOM as visible,
   readable text (not hidden until a click), so it can be lifted as a
   direct answer by search and AI systems, matching the FAQPage schema
   emitted alongside it. */
.services-faq {
	margin-top: clamp(3rem, 6vw, 5rem);
	max-width: 760px;
}
.services-faq-item {
	padding: 1.75rem 0;
	border-top: 1px solid rgba(11, 11, 11, 0.1);
}
.services-faq-item:last-child {
	border-bottom: 1px solid rgba(11, 11, 11, 0.1);
}
.services-faq-question {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 0.6rem;
	color: #0B0B0B;
}
.services-faq-answer {
	color: #5A5049;
	margin: 0;
	max-width: 62ch;
}

.grain-stage {
	position: relative;
	background-color: #0B0B0B;
	background-image:
		linear-gradient(180deg, rgba(11, 11, 11, 0.55) 0%, rgba(11, 11, 11, 0.72) 100%),
		url('photos/grain-footer.jpg');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply, normal;
}
.grain-stage-content {
	position: relative;
	z-index: 1;
}

/* Work page — client logo wall. Plain white marks on dark, no captions;
   the logos speak for themselves, this isn't the icon+heading+text card
   pattern. */
.brand-logo-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	align-items: center;
	justify-items: center;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.brand-logo {
	/* Fixed slot, not just a height cap — capping only height let wide
	   wordmarks (Rossgro, Basix) balloon out far past square marks
	   (Sorbet, BTI) since width was free to scale. object-fit:contain
	   inside an equal box gives every logo the same visual weight. */
	width: 100%;
	max-width: 140px;
	height: 64px;
	object-fit: contain;
	opacity: 0.8;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.brand-logo:hover {
	opacity: 1;
	transform: scale(1.06);
}
@media (max-width: 900px) {
	.brand-logo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 560px) {
	.brand-logo-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Core block-library CSS isn't enqueued on this custom block theme, so
   WP's own alignment utility classes (used on the closing CTA button)
   were silently no-ops. Define the ones we actually use directly. */
.wp-block-buttons.is-content-justification-center {
	display: flex;
	justify-content: center;
}
.wp-block-buttons.is-layout-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
/* Same missing-core-CSS problem hit the closing CTA band: with no default
   flex centering, its content sat top-aligned in the 50vh box, dumping
   all the extra height as empty space below it. */
.wp-block-cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wp-block-cover__inner-container {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 3rem);
	text-align: center;
}

/* Home hero — video loop replacing the static photo. The photo stays as
   the div's own background-image underneath as a fallback (slow network,
   autoplay blocked, reduced motion). The clip fades to this grainy dark
   layer for the last beat before it loops (JS drops .is-active a moment
   before 'ended', re-adds it right after restarting) so the loop point
   reads as an intentional dissolve into a moody plate, not a hard cut
   back to frame one. */
.hero-video-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
/* Silk canvas — replaces the old static grain+glimmer plate. Sits behind
   the video at all times; only visible once the video fades out (near
   its end) and stays as the permanent resting background afterward.
   Rendered/animated by assets/silk-background.js (SaltySilk.init). */
.hero-silk-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: #0B0B0B;
}
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.hero-video.is-active {
	opacity: 1;
}
.hero-photo-dim {
	z-index: 1;
}
.hero-photo-bg .wp-block-cover__inner-container {
	z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
	.hero-video-bg {
		display: none;
	}
}

/* Reel marquee — actual muted looping video, full length, not a static
   thumbnail (a still frame with a play button that does nothing on click
   read as broken). The track renders the set twice back to back and
   scrolls by exactly half its width, so the loop point is invisible.
   Each card still opens the real reel on Instagram when clicked. */
.reel-grain-bg {
	background-color: #0B0B0B;
	background-image:
		linear-gradient(180deg, rgba(11, 11, 11, 0.55) 0%, rgba(11, 11, 11, 0.72) 100%),
		url('photos/grain-footer.jpg');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply, normal;
}
/* Subtle grain wash for cream sections that would otherwise sit flat
   next to the site's textured dark bands. Grain lives on a low-opacity
   ::before behind the content, so it never muddies white cards or text. */
.cream-grain-bg {
	position: relative;
	isolation: isolate;
}
.cream-grain-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
	background-repeat: repeat;
	opacity: 0.1;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}
.cream-grain-bg > * {
	position: relative;
	z-index: 1;
}

/* Reel centerpiece — the Salty logo + handle, now a static row above the
   gallery (it used to sit absolutely centered *over* the scrolling
   marquee; with one large focused card in the coverflow now, that would
   sit awkwardly on top of it, so it moved up into its own row). */
.reel-orbit-centerpiece {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	text-decoration: none;
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.reel-orbit-centerpiece:hover {
	transform: translateY(-2px);
}
.reel-orbit-centerpiece-logo {
	width: clamp(40px, 5vw, 56px);
	height: auto;
	display: block;
}
.reel-orbit-centerpiece-handle {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #F7F3EC;
}

/* Reel coverflow — one portrait reel dead center, two neighbours curving
   away on each side in 3D. Only the centered card's video plays; the
   rest sit paused. Swipe, click a side card, the dots, or the arrow
   keys move the focus; clicking the already-active card opens it on
   Instagram (its natural link target) instead of advancing. */
.reel-orbit {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-top: clamp(1.5rem, 4vw, 2.5rem) !important;
	margin-right: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	outline: none;
}
.reel-orbit-scene {
	position: relative;
	width: 100%;
	height: 100%;
	perspective: 1500px;
	perspective-origin: 50% 48%;
	cursor: grab;
	touch-action: pan-y;
}
.reel-orbit-scene:active {
	cursor: grabbing;
}
.reel-orbit-track {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}
.reel-orbit-card {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(247, 243, 236, 0.14);
	transform-style: preserve-3d;
	transform-origin: center;
	backface-visibility: hidden;
	box-shadow: 0 32px 60px -24px rgba(11, 11, 11, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transition:
		transform 660ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 660ms cubic-bezier(0.22, 1, 0.36, 1),
		filter 660ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 660ms cubic-bezier(0.22, 1, 0.36, 1);
	-webkit-tap-highlight-color: transparent;
}
.reel-orbit-card:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 5px;
}
.reel-orbit-card--active {
	box-shadow: 0 46px 90px -20px rgba(11, 11, 11, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.reel-orbit-card video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	background: #0B0B0B;
}
.reel-orbit-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 11, 11, 0.45);
	backdrop-filter: blur(10px) saturate(180%);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	border: 1px solid rgba(247, 243, 236, 0.3);
}
.reel-orbit-badge svg {
	width: 15px;
	height: 15px;
	color: #F7F3EC;
}
.reel-orbit-progress {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 1.5rem;
}
.reel-orbit-dot-button {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.reel-orbit-dot {
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: rgba(247, 243, 236, 0.34);
	transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1), background 500ms ease;
}
.reel-orbit-dot-button[aria-current="true"] .reel-orbit-dot {
	width: 22px;
	background: #F7F3EC;
}
@media (prefers-reduced-motion: reduce) {
	.reel-orbit-card,
	.reel-orbit-dot {
		transition-duration: 1ms !important;
	}
}

/* About page — name-origin band. Terracotta stays the dominant color
   (per the committed palette, terracotta carries full-bleed bands, not
   a flat accent) with the grain texture worked in underneath at high
   opacity, a literal nod to "salt" rather than decoration for its own
   sake. */
.faith-band {
	position: relative;
	background-color: #9E5050;
	background-image:
		linear-gradient(165deg, rgba(158, 80, 80, 0.94) 0%, rgba(158, 80, 80, 0.97) 100%),
		url('photos/grain-footer.jpg');
	background-size: cover;
	background-position: center;
	background-blend-mode: overlay, normal;
}
.faith-verse {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.85rem, 4.2vw, 2.85rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0;
	color: #F7F3EC;
}
.faith-citation {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #F0D3D3;
	margin: 1rem 0 0;
}
.faith-band-divider {
	width: 44px;
	height: 2px;
	background: rgba(247, 243, 236, 0.4);
	border: none;
	margin: 2rem auto;
}
.faith-body {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: 1.65;
	color: #F7F3EC;
	max-width: 56ch;
	margin: 0 auto;
}

/* Home page — animated brand logo strip, left to right (opposite the
   reel marquee's direction, so the two moments on this page don't feel
   identical). Same doubled-track loop technique the reels used to use
   before they became the .reel-orbit coverflow. */
.brand-marquee {
	position: relative;
	overflow: hidden;
	/* Same !important fix as .reel-orbit — direct child of an
	   .is-layout-constrained group here, so WP's core CSS was capping it
	   to content width. See .reel-orbit's comment for the full story. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-top: clamp(2rem, 5vw, 3rem);
	margin-right: 0 !important;
	margin-bottom: 0;
	margin-left: calc(50% - 50vw) !important;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brand-marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: clamp(0.9rem, 2vw, 1.5rem);
	padding: 0.5rem clamp(1.5rem, 5vw, 3rem);
	animation: brand-marquee-scroll 34s linear infinite;
}
.brand-marquee:hover .brand-marquee-track {
	animation-play-state: paused;
}
.brand-marquee .brand-logo {
	flex: 0 0 auto;
	max-width: 280px;
	height: 132px;
}
@media (max-width: 640px) {
	.brand-marquee-track {
		gap: 0.75rem;
	}
	.brand-marquee .brand-logo {
		max-width: 130px;
		height: 62px;
	}
}
@keyframes brand-marquee-scroll {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.brand-marquee-track {
		animation: none;
		overflow-x: auto;
	}
}

.review-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #9E5050;
	color: #F7F3EC;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
	font-family: var(--wp--preset--font-family--display);
	flex: 0 0 auto;
}

/* ============================================================
   Text reveal on scroll — each word slides up from behind a
   mask as its line enters the viewport. JS (interactions.js)
   wraps each word in .word > span at load; this file only
   handles the transform/opacity transition. Transform+opacity
   only, staggered via --i, reduced-motion shows plain text. */
.text-reveal .word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}
.text-reveal .word > span {
	display: inline-block;
	transform: translateY(115%);
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * 55ms);
}
/* Standout word accent for text-reveal copy — terracotta on a light
   ground (pair with .tr-accent-dark for a dark-ground instance). */
.tr-accent {
	font-style: italic;
	color: #9E5050;
}
.tr-accent-dark {
	font-style: italic;
	color: #D98C7C;
}
.text-reveal.is-in-view .word > span {
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.text-reveal .word > span {
		transform: none;
		transition: none;
	}
}

/* ============================================================
   Reviews — a scattered stack of paper review cards, like index
   cards fanned across a desk. Each card sits at a slight tilt in
   its own grid slot; hovering (desktop) or tapping/focusing
   (touch + keyboard) lifts that card to the front, straightens
   it, and expands it to reveal the full quote while its
   neighbours dip back. Only one card open at a time. Salt-rock
   icons stand in for star ratings, matching the rest of the
   site's on-brand swap for the usual gold stars. */
.review-stack {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	align-items: start;
	gap: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.75rem);
	max-width: 1120px;
	margin: 3.5rem auto 0;
}
.review-card {
	--rot: 0deg;
	--tx: 0px;
	--ty: 0px;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 246px;
	background: #FFFFFF;
	border: 1px solid rgba(11, 11, 11, 0.07);
	border-radius: 14px;
	padding: clamp(1.35rem, 2.6vw, 1.75rem);
	box-shadow: 0 18px 34px -22px rgba(11, 11, 11, 0.28);
	cursor: pointer;
	z-index: 1;
	transform: rotate(var(--rot)) translate(var(--tx), var(--ty));
	transition: transform 1000ms cubic-bezier(0.23, 1, 0.32, 1),
		opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1),
		box-shadow 1000ms cubic-bezier(0.23, 1, 0.32, 1),
		z-index 0s 1000ms;
}
.review-card:focus-visible {
	outline: 2px solid #9E5050;
	outline-offset: 3px;
}
.review-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}
.review-rocks {
	display: flex;
	gap: 0.25rem;
}
.review-rocks img {
	width: 15px;
	height: auto;
	display: block;
}
.review-card-platform {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.review-card-quote {
	flex: 1 1 auto;
}
.review-card-snippet,
.review-card-full {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: #201C19;
}
.review-card-snippet {
	overflow: hidden;
	max-height: 4.7em;
	opacity: 1;
	transition: max-height 950ms cubic-bezier(0.23, 1, 0.32, 1), opacity 600ms ease;
}
.review-card-full {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 1000ms cubic-bezier(0.23, 1, 0.32, 1), opacity 750ms ease 200ms;
}
.review-card-source {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: #9E5050;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 1000ms cubic-bezier(0.23, 1, 0.32, 1), opacity 750ms ease 200ms;
}
.review-card-person {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-top: 0.9rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(11, 11, 11, 0.08);
}
.review-card .review-avatar {
	width: 34px;
	height: 34px;
	font-size: 0.82rem;
}
.review-card-name {
	font-weight: 700;
	font-size: 0.85rem;
	color: #0B0B0B;
}
.review-card-business {
	display: block;
	font-size: 0.75rem;
	color: #7A7069;
}

/* Lift-and-expand — the shared "open" visual result for hover
   (desktop), tap, and keyboard. .is-open is JS-managed so touch
   and keyboard get an identical result to :hover. */
.review-card.is-open {
	--rot: 0deg;
	transform: scale(1.06) translateY(-10px);
	z-index: 30;
	box-shadow: 0 34px 60px -24px rgba(11, 11, 11, 0.4);
	transition: transform 1000ms cubic-bezier(0.23, 1, 0.32, 1),
		opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1),
		box-shadow 1000ms cubic-bezier(0.23, 1, 0.32, 1),
		z-index 0s;
}
.review-card.is-open .review-card-snippet {
	max-height: 0;
	opacity: 0;
}
.review-card.is-open .review-card-full {
	max-height: 320px;
	opacity: 1;
}
.review-card.is-open .review-card-source {
	max-height: 40px;
	opacity: 1;
}
.review-stack.has-open .review-card:not(.is-open) {
	transform: rotate(var(--rot)) translate(var(--tx), var(--ty)) scale(0.96);
	opacity: 0.65;
}
.review-stack.has-open .review-card:not(.is-open):nth-child(2n) {
	transition-delay: 50ms;
}
.review-stack.has-open .review-card:not(.is-open):nth-child(3n) {
	transition-delay: 100ms;
}

/* Desktop hover — gated so touch never fakes a hover state.
   Touch and keyboard get the identical result via .is-open. */
@media (hover: hover) and (pointer: fine) {
	.review-stack:has(.review-card:hover) .review-card:not(:hover):not(.is-open) {
		transform: rotate(var(--rot)) translate(var(--tx), var(--ty)) scale(0.96);
		opacity: 0.65;
	}
	.review-card:hover {
		--rot: 0deg;
		transform: scale(1.06) translateY(-10px);
		z-index: 30;
		box-shadow: 0 34px 60px -24px rgba(11, 11, 11, 0.4);
		transition: transform 1000ms cubic-bezier(0.23, 1, 0.32, 1),
			opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1),
			box-shadow 1000ms cubic-bezier(0.23, 1, 0.32, 1),
			z-index 0s;
	}
	.review-card:hover .review-card-snippet {
		max-height: 0;
		opacity: 0;
	}
	.review-card:hover .review-card-full {
		max-height: 320px;
		opacity: 1;
	}
	.review-card:hover .review-card-source {
		max-height: 40px;
		opacity: 1;
	}
}

@media (max-width: 640px) {
	.review-card {
		min-height: 220px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.review-card {
		transition: opacity 200ms ease;
		transform: none !important;
	}
	.review-card.is-open,
	.review-stack.has-open .review-card:not(.is-open) {
		transform: none !important;
	}
}

/* ============================================================
   "What we do" — editorial masthead. Full-width stacked rows (not
   the old sticky-left/list-right split — that read as a static
   spec sheet). Each row is a single line of large cursor-reactive
   type; the description stays out of sight until the row is
   actually the one being read, revealed via a 0fr->1fr grid-row
   (cheap, GPU-friendly, no layout thrash) rather than height. A
   terracotta wash and a widening left mark carry the hover state;
   the arrow is the only "go to /services/" affordance, so the row
   doesn't need an icon or a card shell. Touch devices (no real
   hover) get the description shown at rest instead of gated. */
.approach-split {
	/* Same recurring bug as the marquees: a direct child of WP's
	   .is-layout-constrained group gets forced to max-width:760px and
	   margin:auto by core styles, which is why this read as squeezed
	   into a narrow forced column instead of using the section's real
	   width. */
	position: relative;
	z-index: 2;
	max-width: 1200px !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}
.approach-split-heading {
	max-width: 42ch;
	margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.approach-split-heading h2 {
	font-size: clamp(2.2rem, 5.2vw, 3.6rem);
}
.approach-list {
	border-top: 1px solid rgba(247, 243, 236, 0.16);
}
.approach-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	padding: clamp(1.5rem, 3.2vw, 2.4rem) 0;
	border-bottom: 1px solid rgba(247, 243, 236, 0.16);
	cursor: url('photos/cursor-salt-icon.svg?v=1') 12 6, pointer;
	text-decoration: none;
	overflow: hidden;
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.approach-row.is-in-view {
	opacity: 1;
	transform: none;
}
.approach-row::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(158, 80, 80, 0.16), rgba(158, 80, 80, 0) 70%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	pointer-events: none;
}
.approach-row-mark {
	flex: none;
	align-self: stretch;
	width: 3px;
	background: rgba(247, 243, 236, 0.18);
	transition: background-color 0.4s ease;
}
.approach-row-main {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-rows: auto 0fr;
	transition: grid-template-rows 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.approach-row-arrow {
	flex: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	color: #C9BEB8;
	transform: translateX(-8px);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease, color 0.4s ease;
}
@media (hover: hover) and (pointer: fine) {
	.approach-row:hover::before,
	.approach-row:focus-visible::before {
		transform: scaleX(1);
	}
	.approach-row:hover .approach-row-mark,
	.approach-row:focus-visible .approach-row-mark {
		background: #9E5050;
	}
	.approach-row:hover .approach-row-main,
	.approach-row:focus-visible .approach-row-main {
		grid-template-rows: auto 1fr;
	}
	.approach-row:hover .approach-row-arrow,
	.approach-row:focus-visible .approach-row-arrow {
		transform: translateX(0);
		opacity: 1;
		color: #D98C7C;
	}
}
.approach-name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.8rem, 4.4vw, 3.2rem);
	letter-spacing: -0.02em;
	color: #F7F3EC;
	transition: color 0.5s ease;
}
.approach-row:hover .approach-name {
	color: #D98C7C;
}
/* Cursor-proximity reactive characters — driven per-frame by
   assets/approach-weight.js (color/transform set inline there); this
   just establishes the inline-block box each char animates within. */
.approach-word {
	display: inline-block;
	white-space: nowrap;
}
.approach-char {
	display: inline-block;
	will-change: transform, color;
}
@media (prefers-reduced-motion: reduce) {
	.approach-char {
		transform: none !important;
	}
}
.approach-desc {
	display: block;
	overflow: hidden;
	min-height: 0;
}
.approach-desc > span {
	display: block;
	padding-top: 0.7rem;
	font-size: 0.95rem;
	color: #C9BEB8;
	max-width: 56ch;
}
@media (max-width: 900px) {
	.approach-row {
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.approach-row-main {
		grid-template-rows: auto auto !important;
	}
	.approach-row-arrow {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.approach-row {
		opacity: 1;
		transform: none;
		transition: color 0.5s ease;
	}
	.approach-row::before {
		transition: none;
	}
	.approach-row-main {
		transition: none;
		grid-template-rows: auto auto !important;
	}
}

/* ============================================================
   CTA word-cycle — "Ready to grow your ___?" rotates through a
   few real service words instead of sitting static. Same masked
   slide-up reveal as .text-reveal, timed by JS. */
.cta-cycle {
	display: inline-block;
	position: relative;
	overflow: hidden;
	vertical-align: bottom;
	height: 1.15em;
}
.cta-cycle-word {
	display: block;
	position: absolute;
	inset: 0;
	transform: translateY(105%);
	opacity: 0;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
.cta-cycle-word.is-active {
	transform: translateY(0);
	opacity: 1;
	position: relative;
}
.cta-cycle-word.is-leaving {
	transform: translateY(-105%);
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.cta-cycle-word {
		transition: opacity 0.3s ease;
	}
}

/* ============================================================
   Camera showcase — real product photography (the tools behind
   the content), drifting at their own parallax speed. Static
   corner accents, no hover behavior. */
.camera-showcase {
	/* Full section width, not the 760px WP forces on a direct child of
	   .is-layout-constrained — otherwise "right:4%" below lands nowhere
	   near the section's real edge and the photo collides with the list
	   text in the middle instead of sitting in the corner. */
	position: absolute !important;
	inset: 0;
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	pointer-events: none;
	z-index: 5;
}
.camera-showcase img {
	position: absolute;
	width: clamp(120px, 12vw, 200px);
	height: auto;
	filter: drop-shadow(0 30px 50px rgba(11, 11, 11, 0.4));
	pointer-events: none;
}
.camera-showcase img:first-child {
	/* Positive offset, not negative — the section this lives in has
	   overflow:hidden (for the parallax background and salt-stone
	   accents elsewhere), and a negative top pushed this past that
	   boundary, clipping it in half instead of reading as a front
	   layer. Staying inside the box and raising z-index is what
	   actually puts it "in front of everything" without cropping it. */
	top: 12px;
	right: 2%;
}
.camera-showcase img:nth-child(2) {
	bottom: 12px;
	left: 2%;
}
@media (max-width: 900px) {
	.camera-showcase img {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.camera-showcase .js-parallax {
		transform: none !important;
	}
}

/* Scroll reveal, slide in from the left — same IntersectionObserver
   trigger as .reveal-up (reveal.js adds .is-visible), different axis. */
.reveal-left {
	opacity: 0;
	transform: translateX(-48px);
	transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.reveal-left {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   Glass bottom nav — mobile-only, scroll-aware liquid-glass nav bar.
   Absent entirely (display:none) above the mobile breakpoint so it
   costs nothing on tablet/desktop. Visual layers are split in two:
   .glass-bottom-nav-surface is the clipped, blurred/distorted glass
   pane; .glass-bottom-nav-items sits above it with overflow visible,
   so the elastic hover/press animation on an icon is never cropped
   by the pane's rounded corners. Shown/hidden by assets/glass-bottom-nav.js
   toggling .is-visible based on scroll direction + footer proximity. */
.glass-bottom-nav {
	display: none;
}
@media (max-width: 780px) {
	.glass-bottom-nav {
		display: block;
		position: fixed;
		left: 0.75rem;
		right: 0.75rem;
		bottom: 0.75rem;
		bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		z-index: 200;
		border-radius: 26px;
		opacity: 0;
		transform: translateY(28px);
		pointer-events: none;
		transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.glass-bottom-nav.is-visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.site-header-glass {
		transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.site-header-glass.is-hidden-scroll {
		opacity: 0;
		transform: translateY(-140%);
		pointer-events: none;
	}
}
.glass-bottom-nav-surface {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}
.glass-bottom-nav-blur {
	position: absolute;
	inset: 0;
	/* No SVG feDisplacementMap warp here — combining an SVG filter with
	   backdrop-filter on the same layer is unreliable on iOS Safari and
	   can make the whole element render invisible there if it fails,
	   which isn't worth it for a functional nav bar. Plain blur is
	   universally supported and still reads as frosted glass. */
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	isolation: isolate;
}
.glass-bottom-nav-tint {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(11, 11, 11, 0.6), rgba(11, 11, 11, 0.42));
}
.glass-bottom-nav-highlight {
	position: absolute;
	inset: 0;
	box-shadow:
		inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.4),
		inset -1px -1px 1px rgba(255, 255, 255, 0.14),
		inset 0 0 22px rgba(255, 255, 255, 0.06);
}
.glass-bottom-nav-shine {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
}
.glass-bottom-nav-items {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 0.15rem;
	padding: 0.5rem 0.4rem;
}
.glass-bottom-nav-item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 0.35rem 0.15rem;
	border-radius: 16px;
	text-decoration: none;
	color: rgba(247, 243, 236, 0.62);
	transition: color 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.glass-bottom-nav-item:active {
	transform: scale(0.92);
}
@media (hover: hover) and (pointer: fine) {
	.glass-bottom-nav-item:hover {
		color: #F7F3EC;
	}
	.glass-bottom-nav-item:hover .glass-bottom-nav-icon {
		transform: translateY(-3px) scale(1.08);
	}
}
.glass-bottom-nav-item:focus-visible {
	outline: 2px solid #F7F3EC;
	outline-offset: 2px;
}
.glass-bottom-nav-item.is-active {
	color: #9E5050;
}
.glass-bottom-nav-icon {
	display: flex;
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.glass-bottom-nav-icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
}
.glass-bottom-nav-label {
	max-width: 100%;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-overflow: ellipsis;
}
@media (max-width: 380px) {
	.glass-bottom-nav-items {
		padding: 0.4rem 0.2rem;
	}
	.glass-bottom-nav-icon svg {
		width: 19px;
		height: 19px;
	}
	.glass-bottom-nav-label {
		font-size: 0.56rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.glass-bottom-nav,
	.site-header-glass {
		transition: opacity 0.15s ease !important;
		transform: none !important;
	}
	.glass-bottom-nav-item,
	.glass-bottom-nav-icon {
		transition: color 0.15s ease !important;
		transform: none !important;
	}
}

/* ============================================================
   Brand wheel — a 3D rotating word carousel of real clients. A
   clean white break in the page, deliberately distinct in tone
   from the dark reels/logo-marquee section. Words are positioned
   and colored per-frame by assets/brand-wheel.js; this file only
   carries the static look (stage, typography, edge fades, glow). */
.brand-wheel {
	position: relative;
	background: radial-gradient(ellipse at center, #F3F1EE 0%, #FFFFFF 68%);
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: 0 !important;
	padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
	overflow: hidden;
}
.brand-wheel-caption {
	position: relative;
	z-index: 3;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9E5050;
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
.brand-wheel-stage {
	position: relative;
	height: 380px;
	perspective: 1500px;
	perspective-origin: 50% 50%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.brand-wheel-stage::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(260px, 30vw, 460px);
	height: clamp(260px, 30vw, 460px);
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(158, 80, 80, 0.08) 0%, transparent 70%);
	pointer-events: none;
	z-index: 1;
}
.brand-wheel-track {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}
.brand-wheel-word {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: clamp(170px, 19vw, 320px);
	height: clamp(90px, 10vw, 165px);
	object-fit: contain;
	pointer-events: none;
	will-change: transform, opacity, filter;
}
@media (max-width: 900px) {
	.brand-wheel-stage {
		height: 320px;
	}
}
@media (max-width: 560px) {
	.brand-wheel-stage {
		height: 260px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.brand-wheel-word {
		transition: none;
	}
}

/* ============================================================
   Team filmstrip — a horizontal hover/tap accordion introducing
   the real, current team, meant as a teaser for the About page's
   full bios (kept intentionally brief here — see .team-filmstrip-cta).
   Ported from a 15-photo gallery reference down to 4 real people;
   geometry (left/width per frame) is computed and eased by
   assets/team-filmstrip.js, this file only carries the static look. */
.team-filmstrip-section {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: 0 !important;
	background: #0B0B0B;
	background-image: linear-gradient(165deg, rgba(84, 36, 30, 0.4) 0%, rgba(11, 11, 11, 0.5) 45%, rgba(11, 11, 11, 0.9) 100%);
	padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2rem);
	overflow: hidden;
}
.team-filmstrip-heading {
	text-align: center;
	color: #F7F3EC;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	margin: 0 0 0.6rem;
}
.team-filmstrip-intro {
	text-align: center;
	color: #C9BEB8;
	max-width: 52ch;
	margin: 0 auto clamp(2rem, 5vw, 3rem);
}
.team-filmstrip {
	position: relative;
}
.team-filmstrip-track {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.team-filmstrip-reel {
	position: relative;
	width: 100%;
	height: 420px;
}
.team-filmstrip-frame {
	position: absolute;
	top: 0;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
	border-radius: 10px;
	background: #17130F;
	box-shadow: 0 18px 44px -22px rgba(11, 11, 11, 0.85);
	will-change: left, width;
	transition: left 0.9s cubic-bezier(0.16, 0.84, 0.3, 1), width 0.9s cubic-bezier(0.16, 0.84, 0.3, 1);
	outline: none;
}
.team-filmstrip-frame.is-open {
	box-shadow: 0 30px 60px -24px rgba(11, 11, 11, 0.9);
}
.team-filmstrip-frame:focus-visible {
	box-shadow: 0 0 0 2px #D98C7C;
}
.team-filmstrip-photo {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	object-fit: cover;
	object-position: top center;
	filter: grayscale(0.65) brightness(0.72);
	transition: filter 0.9s ease, width 0.9s cubic-bezier(0.16, 0.84, 0.3, 1);
	pointer-events: none;
}
.team-filmstrip-frame.is-open .team-filmstrip-photo {
	filter: grayscale(0) brightness(1);
}
.team-filmstrip-label {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%) rotate(-90deg);
	transform-origin: center;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(247, 243, 236, 0.75);
	opacity: 1;
	transition: opacity 0.4s ease;
}
.team-filmstrip-frame.is-open .team-filmstrip-label {
	opacity: 0;
}
.team-filmstrip-info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25rem 1.4rem;
	background: linear-gradient(180deg, transparent, rgba(11, 11, 11, 0.88) 70%);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.team-filmstrip-frame.is-open .team-filmstrip-info {
	opacity: 1;
	transform: translateY(0);
}
.team-filmstrip-name {
	margin: 0;
	color: #F7F3EC;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.05rem;
	white-space: nowrap;
}
.team-filmstrip-role {
	margin: 0.15rem 0 0;
	color: #D98C7C;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}
.team-filmstrip-bracket {
	position: absolute;
	top: 0;
	height: 100%;
	pointer-events: none;
	z-index: 5;
	border: 2px solid #9E5050;
	border-radius: 10px;
	box-shadow: 0 0 24px -6px rgba(158, 80, 80, 0.5);
	will-change: left, width;
	transition: left 0.9s cubic-bezier(0.16, 0.84, 0.3, 1), width 0.9s cubic-bezier(0.16, 0.84, 0.3, 1);
}
.team-filmstrip-cta {
	text-align: center;
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
}
.team-filmstrip-cta a {
	color: #D98C7C;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid #9E5050;
	padding-bottom: 2px;
}
@media (max-width: 700px) {
	.team-filmstrip-reel {
		height: 320px;
	}
	.team-filmstrip-name {
		font-size: 0.92rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.team-filmstrip-frame,
	.team-filmstrip-photo,
	.team-filmstrip-bracket,
	.team-filmstrip-info,
	.team-filmstrip-label {
		transition: none !important;
	}
}

/* Official company values — full list on the About page, a compact
   names-only strip on the home page that links through to it. Plain
   type on cream: the words are the content, so no icons or cards. */
.our-values {
	max-width: 1200px !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	display: grid;
	grid-template-columns: 0.8fr 1.4fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}
.our-values-intro h2 {
	margin: 0 0 1rem;
}
.our-values-intro p {
	color: #4A423C;
	font-size: 1.05rem;
	line-height: 1.65;
	max-width: 38ch;
	margin: 0;
}
.our-values-list {
	border-top: 1px solid rgba(11, 11, 11, 0.12);
}
.our-value {
	display: grid;
	grid-template-columns: minmax(9rem, 0.5fr) 1fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.4rem, 2.6vw, 2rem) 0;
	border-bottom: 1px solid rgba(11, 11, 11, 0.12);
}
.our-value-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: #9E5050;
	margin: 0;
}
.our-value-desc {
	color: #2B2521;
	font-size: 1.02rem;
	line-height: 1.65;
	margin: 0;
	max-width: 52ch;
}
@media (max-width: 900px) {
	.our-values {
		grid-template-columns: 1fr;
	}
	.our-value {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
}

.values-strip {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}
.values-strip h2 {
	margin: 0 0 1.5rem;
}
.values-strip-names {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem clamp(1.25rem, 3vw, 2.5rem);
}
.values-strip-names li {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	letter-spacing: -0.01em;
	color: #0B0B0B;
}
.values-strip-link {
	color: #9E5050;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
}