/* =========================================================================
   Purposeful Partner — theme stylesheet
   Theme by The Free Website Guys.
   ========================================================================= */

/* ---------------- Design tokens (fallback; live values injected inline) --------------- */
:root {
	--color-background: #fbf8f4;
	--color-foreground: #333333;
	--color-card: #ffffff;
	--color-primary: #5b3e74;
	--color-primary-foreground: #fbf8f4;
	--color-secondary: #f4ede1;
	--color-secondary-foreground: #412d53;
	--color-muted: #f1eef6;
	--color-muted-foreground: #675c70;
	--color-accent: #71569f;
	--color-accent-foreground: #ffffff;
	--color-border: #e0dcea;
	--color-lavender: #8c79b9;
	--color-lavender-light: #cfc4e9;
	--color-gold: #e8c9a1;

	--font-display: 'Cormorant Garamond', serif;
	--font-body: 'Montserrat', sans-serif;

	--shadow-soft: 0 4px 20px -4px rgb(91 62 116 / 0.08);
	--shadow-elevated: 0 8px 40px -8px rgb(91 62 116 / 0.18);
	--ease-smooth: cubic-bezier(0.25, 0.4, 0.25, 1);

	--radius: 6px;
	--logo-height: 64px;
	--header-height: 96px;
}

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; border-color: var(--color-border); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: inherit; font-size: inherit; margin: 0; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; padding: 0; color: inherit; }
input, textarea, select { font-family: inherit; }

/* Global cover-image exclusion list (Section 15.1 completeness rule) */
img:not(.hero-video):not(.about-image):not(.founder-image):not(.service-card-img) {
	max-width: 100%;
	height: auto;
	display: block;
}
.about-image, .founder-image, .service-card-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}
.hero-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
}

.container-wide { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .container-wide { padding: 0 3rem; } }

.text-accent-italic { color: var(--color-accent); font-style: italic; }
.text-gold-italic { color: var(--color-gold); font-style: italic; }

/* =========================================================================
   REVEAL-ON-SCROLL ANIMATION SYSTEM (Section 2.1)
   ========================================================================= */
.reveal-up, .reveal-up-fast, .reveal-left, .reveal-right {
	opacity: 1;
	transform: none;
}
body.js-reveal .reveal-up {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
	transition-delay: var(--reveal-delay, 0s);
}
body.js-reveal .reveal-up-fast {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
	transition-delay: var(--reveal-delay, 0s);
}
body.js-reveal .reveal-left {
	opacity: 0;
	transform: translateX(-60px);
	transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}
body.js-reveal .reveal-right {
	opacity: 0;
	transform: translateX(60px);
	transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}
body.js-reveal .reveal-up.is-visible,
body.js-reveal .reveal-up-fast.is-visible,
body.js-reveal .reveal-left.is-visible,
body.js-reveal .reveal-right.is-visible {
	opacity: 1;
	transform: none;
}
/* Customizer preview fallback — never hide content in the editor (Section 2.1.5) */
body.is-customizer .reveal-up,
body.is-customizer .reveal-up-fast,
body.is-customizer .reveal-left,
body.is-customizer .reveal-right {
	opacity: 1 !important;
	transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
	body.js-reveal .reveal-up,
	body.js-reveal .reveal-up-fast,
	body.js-reveal .reveal-left,
	body.js-reveal .reveal-right {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* Hero load-time animation (initial/animate, not scroll-triggered) */
.hero-anim { opacity: 0; }
body.js-reveal .hero-anim-eyebrow { animation: pp-fade-up 0.8s var(--ease-smooth) 0.4s forwards; }
body.js-reveal .hero-anim-title { animation: pp-fade-up 0.9s var(--ease-smooth) 0.7s forwards; }
body.js-reveal .hero-anim-subtitle { animation: pp-fade-up-blur 0.8s var(--ease-smooth) 1s forwards; }
body.js-reveal .hero-anim-buttons { animation: pp-fade-up 0.7s var(--ease-smooth) 1.2s forwards; }
body.is-customizer .hero-anim,
body:not(.js-reveal) .hero-anim { opacity: 1; }

@keyframes pp-fade-up {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes pp-fade-up-blur {
	from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
	to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
	background-color: transparent;
	border-bottom: 1px solid transparent;
}
.site-header.is-solid,
.site-header.mobile-open {
	background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
	backdrop-filter: blur(6px);
	border-bottom-color: var(--color-border);
}
.site-nav { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; min-height: 4rem; }
@media (min-width: 1024px) { .site-nav { min-height: 4.5rem; } }

.site-brand { display: flex; align-items: center; padding: 0.25rem 0; flex-shrink: 0; max-width: 45%; }
.site-logo-img {
	height: calc(var(--logo-height) * 0.75);
	max-height: 3.5rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	transition: filter 0.3s ease;
}
@media (min-width: 768px) { .site-logo-img { height: calc(var(--logo-height) * 0.875); max-height: 4rem; } }
@media (min-width: 1024px) { .site-logo-img { height: var(--logo-height); max-height: 4.5rem; } }
.site-header:not(.is-solid):not(.mobile-open) .site-logo-img { filter: brightness(0) invert(1); }
.site-logo-text { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-primary); }
.site-header:not(.is-solid):not(.mobile-open) .site-logo-text { color: #fff; }

.site-nav-desktop { display: none; }
@media (min-width: 1024px) { .site-nav-desktop { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; margin-right: 1.5rem; } }
.theme-nav-list { display: flex; align-items: center; gap: 1.75rem; }
.theme-nav-list a {
	position: relative; display: inline-block;
	font-size: 0.875rem; font-family: var(--font-body); letter-spacing: 0.02em;
	cursor: pointer; transition: color 0.3s ease;
	color: var(--color-foreground);
}
.site-header:not(.is-solid):not(.mobile-open) .theme-nav-list a { color: rgb(255 255 255 / 0.9); }
.site-header:not(.is-solid):not(.mobile-open) .theme-nav-list a:hover { color: #fff; }
.theme-nav-list a::after {
	content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform 0.3s var(--ease-smooth);
}
.theme-nav-list a:hover::after { transform: scaleX(1); }

.site-nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.btn-header-cta {
	display: none;
	align-items: center; justify-content: center;
	border-radius: var(--radius);
	padding: 0.65rem 1.25rem;
	font-size: 0.875rem; font-family: var(--font-body); font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	background-color: var(--color-primary); color: var(--color-primary-foreground);
	border: 1px solid transparent;
}
@media (min-width: 640px) { .btn-header-cta { display: inline-flex; } }
.btn-header-cta:hover { opacity: 0.9; }
.site-header:not(.is-solid):not(.mobile-open) .btn-header-cta {
	background-color: rgb(255 255 255 / 0.1); color: #fff; border-color: rgb(255 255 255 / 0.3);
}
.site-header:not(.is-solid):not(.mobile-open) .btn-header-cta:hover { background-color: rgb(255 255 255 / 0.2); opacity: 1; }

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; color: var(--color-foreground); }
@media (min-width: 1024px) { .mobile-menu-toggle { display: none; } }
.site-header:not(.is-solid):not(.mobile-open) .mobile-menu-toggle { color: #fff; }
.mobile-menu-toggle svg { width: 1.25rem; height: 1.25rem; }
.mobile-menu-toggle .icon-close { display: none; }
.mobile-menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.mobile-menu-toggle[aria-expanded="true"] .icon-close { display: inline-flex; }

.mobile-menu-panel { display: none; border-top: 1px solid var(--color-border); padding: 1rem 0; }
.mobile-menu-panel.is-open { display: block; animation: pp-fade-in 0.4s var(--ease-smooth) forwards; }
@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.mobile-nav-list { display: flex; flex-direction: column; gap: 1rem; }
.mobile-nav-list a { font-size: 0.875rem; padding: 0.5rem 0; display: block; }
.mobile-nav-list a:hover { color: var(--color-accent); }
.mobile-nav-cta { display: block; margin-top: 0.5rem; font-size: 0.875rem; padding: 0.5rem 0; color: var(--color-accent); }

/* Home hero fills viewport under transparent fixed header (Section 22.7) */
body:not(.theme-no-hero) .hero-section { padding-top: 0; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn-hero-primary, .btn-hero-outline, .btn-primary, .btn-outline, .btn-contact-cta, .btn-contact-submit, .founder-linkedin-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	border-radius: var(--radius);
	padding: 0 2.5rem; height: 2.75rem;
	font-family: var(--font-body); font-size: 1rem; font-weight: 500;
	text-transform: none;
	transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
	white-space: nowrap;
	cursor: pointer;
}
.btn-hero-primary:hover, .btn-hero-outline:hover, .btn-primary:hover, .btn-outline:hover, .btn-contact-cta:hover, .founder-linkedin-btn:hover { transform: translateY(-1px); }
.btn-hero-primary:active, .btn-hero-outline:active, .btn-primary:active, .btn-outline:active { transform: scale(0.97); }

.btn-hero-primary { background-color: var(--color-gold); color: var(--color-primary); }
.btn-hero-primary:hover { background-color: color-mix(in srgb, var(--color-gold) 90%, transparent); }
.btn-hero-outline { background-color: rgb(255 255 255 / 0.1); color: #fff; border: 1px solid rgb(255 255 255 / 0.25); }
.btn-hero-outline:hover { background-color: rgb(255 255 255 / 0.2); }
.btn-hero-outline .btn-icon svg { width: 1rem; height: 1rem; margin-left: 0.25rem; }

.btn-primary { background-color: var(--color-primary); color: var(--color-primary-foreground); }
.btn-primary:hover { opacity: 0.9; }

.btn-outline { background-color: var(--color-background); border: 1px solid var(--color-border); color: var(--color-foreground); }
.btn-outline:hover { background-color: var(--color-accent); color: var(--color-accent-foreground); border-color: var(--color-accent); }

.btn-contact-cta { background-color: var(--color-gold); color: var(--color-primary); align-self: flex-start; }
.btn-contact-cta:hover { background-color: color-mix(in srgb, var(--color-gold) 90%, transparent); }
.btn-contact-cta .btn-icon svg { width: 1rem; height: 1rem; }

.founder-linkedin-btn {
	background-color: var(--color-primary); color: var(--color-primary-foreground);
	align-self: flex-start; margin-top: 2rem; padding: 0 1.5rem;
}
.founder-linkedin-btn:hover { opacity: 0.9; }
.founder-linkedin-btn .btn-icon svg { width: 1.25rem; height: 1.25rem; }

.btn-contact-submit {
	width: 100%; background-color: var(--color-gold); color: var(--color-primary);
}
.btn-contact-submit:hover { background-color: color-mix(in srgb, var(--color-gold) 90%, transparent); }
.btn-contact-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-contact-submit .btn-icon svg { width: 1rem; height: 1rem; }

/* =========================================================================
   SECTION HEADING SYSTEM (per-section scales — Section 2.2.5)
   ========================================================================= */
.section-eyebrow, .hero-eyebrow-text {
	font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase;
	font-family: var(--font-body); display: block; color: var(--color-accent);
}
.hero-eyebrow-text { color: #fff; font-size: 0.75rem; }
@media (min-width: 768px) { .hero-eyebrow-text { font-size: 0.875rem; } }
.section-eyebrow-light { color: var(--color-gold); }
.section-eyebrow-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.eyebrow-line { height: 1px; width: 2.5rem; background: var(--color-gold); display: block; }

.section-heading { line-height: 1.15; margin-top: 0.75rem; margin-bottom: 1.25rem; color: var(--color-foreground); }
.section-subtitle { color: var(--color-muted-foreground); line-height: 1.7; }
.section-subtitle-light { color: rgb(251 248 244 / 0.8); }
.section-head-center { max-width: 42rem; margin: 0 auto 3rem; text-align: center; }
@media (min-width: 768px) { .section-head-center { margin-bottom: 4rem; } }

.about-heading { font-size: 1.875rem; }
@media (min-width: 768px) { .about-heading { font-size: 2.25rem; } }
@media (min-width: 1024px) { .about-heading { font-size: 3rem; } }

.approach-heading, .services-heading, .pricing-heading { font-size: 1.875rem; color: #fff; }
.approach-heading { color: #fff; }
.services-heading, .pricing-heading { color: var(--color-foreground); }
@media (min-width: 768px) { .approach-heading, .services-heading, .pricing-heading { font-size: 3rem; } }

.founder-heading, .faq-heading, .contact-title { font-size: 1.875rem; }
@media (min-width: 768px) { .founder-heading, .faq-heading { font-size: 2.25rem; } }
@media (min-width: 1024px) { .founder-heading, .faq-heading { font-size: 3rem; } }

/* =========================================================================
   HERO
   ========================================================================= */
.hero-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--color-primary); }
.hero-video-wrap { position: absolute; inset: 0; transform: scale(var(--hero-scale, 1)); }
.hero-overlay { position: absolute; inset: 0; pointer-events: none; }
.hero-overlay-1 { background: linear-gradient(to bottom, rgb(91 62 116 / 0.8), rgb(91 62 116 / 0.7) 50%, rgb(91 62 116 / 0.92)); }
.hero-overlay-2 { background: linear-gradient(to top right, rgb(91 62 116 / 0.7), rgb(91 62 116 / 0.3) 50%, rgb(140 121 185 / 0.35)); mix-blend-mode: multiply; }
.hero-overlay-radial {
	background: radial-gradient(ellipse at center, rgb(91 62 116 / 0.1) 0%, rgb(91 62 116 / 0.8) 100%);
	opacity: var(--hero-overlay-opacity, 0.8);
}
.hero-content { position: relative; z-index: 10; text-align: center; padding: 6rem 0 7rem; opacity: var(--hero-text-opacity, 1); transform: translateY(var(--hero-text-y, 0px)); }
@media (min-width: 768px) { .hero-content { padding: 7rem 0 8rem; } }

.hero-eyebrow-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1rem; }
.hero-eyebrow-line { height: 1px; width: 2rem; background: var(--color-gold); display: block; }

.hero-title { font-size: 2.25rem; max-width: 56rem; margin: 0.5rem auto 1.5rem; line-height: 1.1; padding: 0 0.5rem; color: #fff; }
@media (min-width: 768px) { .hero-title { font-size: 3.75rem; } .hero-title-break { display: block; } }
@media (min-width: 1024px) { .hero-title { font-size: 4.5rem; } }
.hero-title-break { display: none; }
.hero-title-highlight { color: var(--color-gold); font-style: italic; }

.hero-subtitle { color: rgb(255 255 255 / 0.85); max-width: 42rem; margin: 0 auto 2.5rem; font-size: 1rem; line-height: 1.7; padding: 0 0.5rem; }
@media (min-width: 768px) { .hero-subtitle { font-size: 1.125rem; } }

.hero-buttons { display: flex; flex-direction: column; gap: 0.75rem; justify-content: center; padding: 0 1rem; }
@media (min-width: 640px) { .hero-buttons { flex-direction: row; } }

.hero-marquee { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; border-top: 1px solid rgb(232 201 161 / 0.3); background: rgb(91 62 116 / 0.7); backdrop-filter: blur(4px); overflow: hidden; padding: 0.75rem 0; }
.hero-marquee-track { display: flex; white-space: nowrap; gap: 2.5rem; width: max-content; animation: pp-marquee 30s linear infinite; }
@keyframes pp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero-marquee-group { display: flex; align-items: center; gap: 2.5rem; flex-shrink: 0; }
.hero-marquee-item { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.9); }
@media (min-width: 768px) { .hero-marquee-item { font-size: 0.875rem; } }
.hero-marquee-dot { color: var(--color-gold); font-size: 1rem; }

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-section { position: relative; overflow: hidden; background-color: var(--color-secondary); }
.about-blob { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(64px); }
.about-blob-1 { top: -6rem; left: -6rem; width: 24rem; height: 24rem; background: color-mix(in srgb, var(--color-lavender) 15%, transparent); }
.about-blob-2 { bottom: -6rem; right: -6rem; width: 24rem; height: 24rem; background: color-mix(in srgb, var(--color-gold) 20%, transparent); }
.about-inner { position: relative; padding: 4rem 0; }
@media (min-width: 768px) { .about-inner { padding: 6rem 0; } }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.about-image-col { position: relative; }
.about-image-frame { position: absolute; inset: -0.75rem; border: 1px solid color-mix(in srgb, var(--color-gold) 60%, transparent); border-radius: 8px; transform: translate(0.75rem, 0.75rem); }
@media (min-width: 768px) { .about-image-frame { inset: -1rem; transform: translate(1rem, 1rem); } }
.about-image-mask { position: relative; overflow: hidden; border-radius: 8px; box-shadow: var(--shadow-elevated); outline: 1px solid color-mix(in srgb, var(--color-lavender) 25%, transparent); aspect-ratio: 4 / 5; }
.about-image { transition: transform 0.6s var(--ease-smooth); }
.about-image-mask:hover .about-image { transform: scale(1.03); }

.about-text-col { display: flex; flex-direction: column; justify-content: center; }
.about-copy { display: flex; flex-direction: column; gap: 1rem; color: var(--color-muted-foreground); }
.about-copy p { line-height: 1.7; }
.about-copy-lead { font-size: 1rem; }
@media (min-width: 768px) { .about-copy-lead { font-size: 1.125rem; } }
.about-quote { font-weight: 500; color: var(--color-foreground); font-style: italic; border-left: 2px solid var(--color-gold); padding-left: 1rem; }
.about-cta { margin-top: 2rem; }

/* =========================================================================
   APPROACH
   ========================================================================= */
.approach-section { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(to bottom, var(--color-primary), var(--color-primary), color-mix(in srgb, var(--color-accent) 80%, transparent)); }
.approach-inner { position: relative; padding: 4rem 0; }
@media (min-width: 768px) { .approach-inner { padding: 6rem 0; } }
.approach-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .approach-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }

.approach-card {
	position: relative; overflow: hidden; border-radius: 12px; padding: 1.75rem;
	background-color: color-mix(in srgb, var(--color-card) 95%, transparent);
	backdrop-filter: blur(4px);
	border: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
	box-shadow: var(--shadow-soft);
	display: flex; flex-direction: column;
	transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.approach-card:hover { box-shadow: var(--shadow-elevated); border-color: color-mix(in srgb, var(--color-gold) 60%, transparent); transform: translateY(-6px); }
.approach-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.approach-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-foreground); box-shadow: var(--shadow-soft); outline: 2px solid color-mix(in srgb, var(--color-gold) 40%, transparent); transition: transform 0.5s ease; }
.approach-card:hover .approach-card-icon { transform: scale(1.1); }
.approach-card-icon svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; }
.approach-card-num { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: var(--color-lavender-light); user-select: none; }
.approach-card-title { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--color-foreground); }
@media (min-width: 768px) { .approach-card-title { font-size: 1.5rem; } }
.approach-card-rule { height: 1px; width: 2.5rem; background: var(--color-gold); margin-bottom: 0.75rem; transition: width 0.5s ease; }
.approach-card:hover .approach-card-rule { width: 4rem; }
.approach-card-desc { color: var(--color-muted-foreground); font-size: 0.875rem; line-height: 1.7; }

/* =========================================================================
   SERVICES
   ========================================================================= */
.services-section { background-color: var(--color-secondary); }
.services-inner { padding: 4rem 0; }
@media (min-width: 768px) { .services-inner { padding: 6rem 0; } }
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

.service-card {
	position: relative; overflow: hidden; border-radius: 12px;
	background-color: var(--color-card); border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
	box-shadow: var(--shadow-soft);
	display: flex; flex-direction: column; height: 100%;
	transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.service-card:hover { box-shadow: var(--shadow-elevated); border-color: color-mix(in srgb, var(--color-gold) 60%, transparent); transform: translateY(-6px); }
.service-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--color-primary); }
.service-card-img { transition: transform 0.7s ease; }
.service-card:hover .service-card-img { transform: scale(1.05); }
.service-card-media-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgb(91 62 116 / 0.55), rgb(91 62 116 / 0.1) 60%, transparent); }
.service-card-num { position: absolute; top: 1rem; right: 1.25rem; font-family: var(--font-display); font-size: 3rem; line-height: 1; color: rgb(255 255 255 / 0.85); user-select: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.3)); }
.service-card-icon { position: absolute; bottom: 1rem; left: 1.5rem; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-foreground); box-shadow: var(--shadow-elevated); outline: 2px solid color-mix(in srgb, var(--color-gold) 50%, transparent); transition: transform 0.5s ease; }
.service-card:hover .service-card-icon { transform: scale(1.1); }
.service-card-icon svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; }
.service-card-body { padding: 1.5rem; }
@media (min-width: 768px) { .service-card-body { padding: 1.75rem; } }
@media (min-width: 1024px) { .service-card-body { padding: 2.5rem; } }
.service-card-meta { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); font-family: var(--font-body); }
@media (min-width: 768px) { .service-card-meta { font-size: 0.75rem; } }
.service-card-title { font-size: 1.25rem; margin-top: 0.5rem; margin-bottom: 0.75rem; color: var(--color-foreground); }
@media (min-width: 768px) { .service-card-title { font-size: 1.5rem; } }
@media (min-width: 1024px) { .service-card-title { font-size: 1.875rem; } }
.service-card-rule { height: 1px; width: 2.5rem; background: var(--color-gold); margin-bottom: 1rem; transition: width 0.5s ease; }
.service-card:hover .service-card-rule { width: 4rem; }
.service-card-desc { color: var(--color-muted-foreground); font-size: 0.875rem; line-height: 1.7; }
@media (min-width: 1024px) { .service-card-desc { font-size: 1rem; } }

.services-grid-secondary { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .services-grid-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.service-card-simple {
	display: flex; flex-direction: column; border-radius: 12px; padding: 1.75rem;
	background-color: var(--color-card); border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
	box-shadow: var(--shadow-soft);
	transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.3s ease;
}
.service-card-simple:hover { box-shadow: var(--shadow-elevated); border-color: color-mix(in srgb, var(--color-gold) 60%, transparent); transform: translateY(-4px); }
.service-simple-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--color-lavender-light); color: var(--color-primary); margin-bottom: 1rem; transition: transform 0.5s ease; }
.service-card-simple:hover .service-simple-icon { transform: scale(1.1); }
.service-simple-icon svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; }
.service-simple-title { font-size: 1.25rem; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .service-simple-title { font-size: 1.5rem; } }
.service-simple-desc { color: var(--color-muted-foreground); font-size: 0.875rem; line-height: 1.7; }

.services-cta { text-align: center; margin-top: 3rem; }
.services-cta-text { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .services-cta-text { font-size: 1.875rem; } }

/* =========================================================================
   FOUNDER
   ========================================================================= */
.founder-inner { padding: 4rem 0; }
@media (min-width: 768px) { .founder-inner { padding: 6rem 0; } }
.founder-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .founder-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.founder-text-col { display: flex; flex-direction: column; justify-content: center; order: 2; }
.founder-image-col { position: relative; order: 1; }
@media (min-width: 768px) { .founder-text-col { order: 1; } .founder-image-col { order: 2; } }

.founder-role { font-size: 0.875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 1.5rem; }
.founder-copy { display: flex; flex-direction: column; gap: 1rem; color: var(--color-muted-foreground); }
.founder-copy p { line-height: 1.7; }
.founder-copy-lead { font-size: 1rem; }
@media (min-width: 768px) { .founder-copy-lead { font-size: 1.125rem; } }
.founder-quote { font-weight: 500; color: var(--color-foreground); font-style: italic; border-left: 2px solid var(--color-gold); padding-left: 1rem; }

.founder-image-frame { position: absolute; inset: -0.75rem; border: 1px solid color-mix(in srgb, var(--color-lavender) 50%, transparent); border-radius: 8px; transform: translate(-0.75rem, 0.75rem); }
@media (min-width: 768px) { .founder-image-frame { inset: -1rem; transform: translate(-1rem, 1rem); } }
.founder-image-mask { position: relative; overflow: hidden; border-radius: 8px; box-shadow: var(--shadow-elevated); outline: 1px solid color-mix(in srgb, var(--color-gold) 30%, transparent); aspect-ratio: 4 / 5; }

/* =========================================================================
   PRICING
   ========================================================================= */
.pricing-section { position: relative; overflow: hidden; background-color: var(--color-secondary); }
.pricing-blob { position: absolute; top: -8rem; right: 0; width: 24rem; height: 24rem; border-radius: 50%; background: color-mix(in srgb, var(--color-lavender) 15%, transparent); filter: blur(64px); pointer-events: none; }
.pricing-inner { position: relative; padding: 4rem 0; }
@media (min-width: 768px) { .pricing-inner { padding: 6rem 0; } }

.pricing-table { max-width: 48rem; margin: 0 auto; border-radius: 12px; background-color: var(--color-card); border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); box-shadow: var(--shadow-soft); overflow: hidden; }
.pricing-table-head { display: none; align-items: center; justify-content: space-between; padding: 1rem 1.75rem; background-color: var(--color-primary); color: var(--color-primary-foreground); }
@media (min-width: 640px) { .pricing-table-head { display: flex; } }
.pricing-table-head span { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.pricing-table-row { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--color-border); transition: background-color 0.2s ease; }
.pricing-table-row:last-child { border-bottom: none; }
.pricing-table-row:hover { background-color: color-mix(in srgb, var(--color-muted) 60%, transparent); }
@media (min-width: 640px) { .pricing-table-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; } }
.pricing-row-service { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-foreground); }
@media (min-width: 768px) { .pricing-row-service { font-size: 1.25rem; } }
.pricing-row-rate { font-size: 0.875rem; color: var(--color-accent); font-weight: 500; white-space: nowrap; }
@media (min-width: 768px) { .pricing-row-rate { font-size: 1rem; } }

.pricing-cta { text-align: center; margin-top: 2.5rem; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-inner { padding: 4rem 0; }
@media (min-width: 768px) { .faq-inner { padding: 6rem 0; } }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .faq-grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; } }
.faq-intro { grid-column: span 4; }
@media (min-width: 768px) { .faq-intro { position: sticky; top: 6rem; align-self: flex-start; } }
.faq-list { grid-column: span 8; }

.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: none; }
.faq-question { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; text-align: left; }
.faq-question-text { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-foreground); transition: color 0.3s ease; }
@media (min-width: 768px) { .faq-question-text { font-size: 1.25rem; } }
.faq-question:hover .faq-question-text { color: var(--color-accent); }
.faq-icon { flex-shrink: 0; margin-top: 0.25rem; color: var(--color-accent); position: relative; width: 1.25rem; height: 1.25rem; }
.faq-icon span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease, transform 0.2s ease; }
.faq-icon svg { width: 1.25rem; height: 1.25rem; }
.faq-icon-minus { opacity: 0; transform: rotate(-90deg); }
.faq-item.is-open .faq-icon-plus { opacity: 0; transform: rotate(90deg); }
.faq-item.is-open .faq-icon-minus { opacity: 1; transform: rotate(0); }
.faq-answer-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s var(--ease-smooth), opacity 0.3s var(--ease-smooth); }
.faq-item.is-open .faq-answer-wrap { opacity: 1; }
.faq-answer { padding-bottom: 1.5rem; color: var(--color-muted-foreground); line-height: 1.7; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-section { position: relative; overflow: hidden; background-color: var(--color-primary); }
.contact-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contact-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(91 62 116 / 0.9), rgb(91 62 116 / 0.85) 50%, rgb(91 62 116 / 0.95)); }
.contact-blob { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(64px); }
.contact-blob-1 { top: -8rem; left: -8rem; width: 24rem; height: 24rem; background: color-mix(in srgb, var(--color-lavender) 25%, transparent); }
.contact-blob-2 { bottom: -8rem; right: -8rem; width: 24rem; height: 24rem; background: color-mix(in srgb, var(--color-gold) 20%, transparent); }
.contact-inner { position: relative; z-index: 10; padding: 4rem 0 5rem; }
@media (min-width: 768px) { .contact-inner { padding: 5rem 0; } }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: stretch; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.contact-cta-card, .contact-form-card {
	border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.15);
	background: rgb(255 255 255 / 0.06);
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
	box-shadow: 0 8px 32px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.08);
	padding: 2rem;
	display: flex; flex-direction: column; height: 100%;
}
.contact-form-card { background: rgb(255 255 255 / 0.08); }
@media (min-width: 768px) { .contact-cta-card { padding: 3rem; } .contact-form-card { padding: 2.5rem; } }
.contact-cta-card { justify-content: center; }

.contact-eyebrow { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-gold); display: block; margin-bottom: 0.75rem; }
.contact-title { color: #fff; margin-bottom: 1rem; line-height: 1.15; }
@media (min-width: 768px) { .contact-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .contact-title { font-size: 3rem; } }
.contact-paragraph { color: rgb(255 255 255 / 0.8); margin-bottom: 2rem; font-size: 1rem; line-height: 1.7; }
@media (min-width: 768px) { .contact-paragraph { font-size: 1.125rem; } }

.contact-details { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / 0.15); }
.contact-detail-item { display: flex; align-items: center; gap: 0.5rem; color: rgb(255 255 255 / 0.8); font-size: 0.875rem; }
.contact-detail-item a:hover { color: #fff; }
.contact-detail-icon svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.contact-form-eyebrow { display: block; font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.7); margin-bottom: 0.25rem; }
.contact-form-title { color: #fff; font-size: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .contact-form-title { font-size: 1.875rem; } }

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; }
.contact-form-row-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .contact-form-row-2 { grid-template-columns: 1fr 1fr; } }
.contact-form-field { display: flex; flex-direction: column; }
.contact-form-field-grow { flex: 1; display: flex; flex-direction: column; }
.contact-form-field label { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: rgb(255 255 255 / 0.8); }
.contact-form-field input, .contact-form-field textarea {
	width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius);
	background-color: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.2);
	color: #fff; font-size: 0.875rem; transition: box-shadow 0.3s ease;
}
.contact-form-field input::placeholder, .contact-form-field textarea::placeholder { color: rgb(255 255 255 / 0.4); }
.contact-form-field input:focus, .contact-form-field textarea:focus { outline: none; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.3); }
.contact-form-field-grow textarea { flex: 1; min-height: 140px; resize: none; }

.contact-form-success { text-align: center; padding: 2.5rem 0; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.contact-success-icon { width: 4rem; height: 4rem; background: rgb(255 255 255 / 0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; border-radius: 50%; }
.contact-success-icon svg { width: 2rem; height: 2rem; color: #fff; }
.contact-form-success h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: #fff; }
.contact-form-success p { color: rgb(255 255 255 / 0.7); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { border-top: 1px solid var(--color-border); background-color: color-mix(in srgb, var(--color-secondary) 70%, transparent); }
.footer-top { padding-top: 3rem; }
@media (min-width: 1024px) { .footer-top { padding-top: 4rem; } }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; } }
.footer-logo-img { height: calc(var(--logo-height) * 0.5); width: auto; }
.footer-tagline { margin-top: 1rem; font-size: 0.875rem; color: var(--color-muted-foreground); max-width: 24rem; line-height: 1.7; }
.footer-col-heading { font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; }
.footer-link-list { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-link-list a { font-size: 0.875rem; color: var(--color-muted-foreground); transition: color 0.2s ease; }
.footer-link-list a:hover { color: var(--color-foreground); }
.footer-contact-list { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-contact-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-muted-foreground); }
.footer-contact-item a:hover { color: var(--color-foreground); }
.footer-contact-icon svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.footer-social { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--color-border); color: var(--color-muted-foreground); transition: color 0.2s ease, border-color 0.2s ease; }
.footer-social-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.footer-social-link svg { width: 1rem; height: 1rem; }

.footer-bottom { margin-top: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-copyright, .footer-tagline-bottom, .footer-credit { font-size: 0.75rem; color: var(--color-muted-foreground); }
.footer-tagline-bottom { order: -1; }
@media (min-width: 768px) { .footer-tagline-bottom { order: 0; } .footer-copyright { text-align: left; } .footer-credit { text-align: right; } }
.footer-credit a { text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--color-accent); }

/* =========================================================================
   GENERIC PAGES (page.php / index.php / 404.php)
   ========================================================================= */
.generic-page, .error-404-page { padding-top: calc(var(--header-height) + 3rem); padding-bottom: 4rem; min-height: 60vh; }
.generic-page-inner .page-title { font-size: 2.25rem; margin-bottom: 1.5rem; }
.error-404-inner { text-align: center; }
.error-404-title { font-size: 3rem; margin-bottom: 1rem; }
.error-404-text { margin-bottom: 1.5rem; color: var(--color-muted-foreground); font-size: 1.25rem; }
body.theme-no-hero .hero-section { display: none; }

/* =========================================================================
   RESPONSIVE SAFETY (Section 15.1 / 31.9)
   ========================================================================= */
.approach-card, .service-card, .service-card-simple { min-width: 0; }
.about-grid, .founder-grid, .contact-grid { min-width: 0; }