/* =========================================================================
   Anchor v2 — Visual-first layer
   Image-led storytelling. Photos do the talking. Sophisticated, not loud.
   Brand colors only.
   ========================================================================= */


/* ============================================================
   VISUAL STATEMENT — magazine collage with depth + motion
   Overlapping photos at different sizes, rotated cards, caption chips.
   ============================================================ */

.vstatement {
	position: relative;
	padding-block: clamp(56px, 7vw, 96px);
	background: #fff;
	overflow: hidden;
}

.vstatement::before {
	/* Subtle decorative tint behind the collage */
	content: "";
	position: absolute;
	right: -5%;
	top: -10%;
	width: 60%;
	height: 80%;
	background: radial-gradient(circle at center, var(--brand-secondary-08) 0%, transparent 60%);
	z-index: 0;
	pointer-events: none;
}

.vstatement__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

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

.vstatement__copy {
	max-width: 480px;
	position: relative;
}

.vstatement__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--brand-secondary);
	margin-bottom: 24px;
}

.vstatement__eyebrow::before {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--brand-secondary);
}

.vstatement__headline {
	font-family: var(--font-display);
	font-size: clamp(34px, 5.2vw, 68px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--brand-primary);
	margin: 0 0 24px;
	text-wrap: balance;
}

.vstatement__headline em {
	font-style: italic;
	color: var(--brand-secondary);
	font-weight: 400;
}

.vstatement__body {
	font-size: 17px;
	line-height: 1.7;
	color: var(--brand-text);
	margin: 0 0 32px;
	font-weight: 300;
	max-width: 44ch;
}

.vstatement__inline-stats {
	display: flex;
	gap: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--line-soft);
	flex-wrap: wrap;
}

.vstatement__inline-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vstatement__inline-stat-num {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 500;
	color: var(--brand-primary);
	line-height: 1;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
}

.vstatement__inline-stat-num::after {
	content: attr(data-suffix);
	color: var(--brand-secondary);
	font-size: 0.5em;
	vertical-align: super;
	font-weight: 400;
}

.vstatement__inline-stat-label {
	font-size: 10px;
	color: var(--brand-text);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}


/* ---------- The collage on the right ---------- */

.vstatement__collage {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 640px;
	margin-left: auto;
	width: 100%;
}

@media (max-width: 860px) { .vstatement__collage { margin: 0 auto; max-width: 480px; } }
@media (max-width: 480px) { .vstatement__collage { max-width: 100%; } }

.vstatement__photo {
	position: absolute;
	overflow: hidden;
	box-shadow: 0 24px 48px rgba(27, 19, 32, 0.18);
	transition: transform 700ms var(--ease), box-shadow 700ms var(--ease);
}

.vstatement__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--ease);
}

.vstatement__photo:hover {
	box-shadow: 0 30px 60px rgba(27, 19, 32, 0.28);
	transform: translateY(-4px);
	z-index: 5 !important;
}

.vstatement__photo:hover img { transform: scale(1.05); }

/* Caption chips on each photo */
.vstatement__photo-chip {
	position: absolute;
	bottom: 12px;
	left: 12px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--brand-primary);
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 6px 12px;
	z-index: 2;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Asymmetric positions with subtle rotation for depth */

.vstatement__photo--main {
	top: 0;
	left: 0;
	width: 62%;
	height: 70%;
	transform: rotate(-1.5deg);
	z-index: 2;
}

.vstatement__photo--top {
	top: 4%;
	right: 0;
	width: 42%;
	height: 38%;
	transform: rotate(2deg);
	z-index: 3;
}

.vstatement__photo--bottom {
	bottom: 0;
	right: 6%;
	width: 52%;
	height: 42%;
	transform: rotate(-2deg);
	z-index: 4;
}

.vstatement__photo--accent {
	bottom: 8%;
	left: 8%;
	width: 30%;
	height: 26%;
	transform: rotate(3deg);
	z-index: 4;
	border: 6px solid #fff;
}

@media (max-width: 480px) {
	.vstatement__photo--main { width: 65%; height: 60%; }
	.vstatement__photo--top { width: 50%; height: 36%; }
	.vstatement__photo--bottom { width: 55%; height: 40%; }
	.vstatement__photo--accent { width: 36%; height: 24%; }
}

/* Decorative accent — a thin orange line + small mark */
.vstatement__mark {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 1px;
	background: var(--brand-secondary);
	z-index: 1;
}

.vstatement__mark::before,
.vstatement__mark::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand-secondary);
	transform: translateY(-50%);
}
.vstatement__mark::before { left: -4px; }
.vstatement__mark::after  { right: -4px; }


/* ============================================================
   SERVICE GRID — clean 3-col equal grid, photo-first cards
   ============================================================ */

.svc-mosaic {
	padding-block: clamp(56px, 7vw, 88px);
	background: #fff;
}

.svc-mosaic__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	margin-bottom: 36px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line-soft);
}

@media (max-width: 700px) { .svc-mosaic__head { flex-direction: column; align-items: stretch; gap: 16px; } }

.svc-mosaic__head .eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--brand-secondary);
	margin-bottom: 12px;
}

.svc-mosaic__head h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 4.4vw, 52px);
	font-weight: 500;
	line-height: 1.05;
	color: var(--brand-primary);
	margin: 0;
	letter-spacing: -0.015em;
}

.svc-mosaic__head h2 em { font-style: italic; color: var(--brand-secondary); font-weight: 400; }

.svc-mosaic__head-cta {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 500;
	color: var(--brand-primary);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--brand-secondary);
	padding-bottom: 6px;
	margin-bottom: 6px;
	transition: color var(--dur-base) var(--ease);
}

.svc-mosaic__head-cta:hover { color: var(--brand-secondary); }

/* Equal 3-col grid (2 on tablet, 1 on phone). No mixed sizes. */
.svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

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

/* Span classes left as no-ops so existing markup works */
.svc-tile--lg, .svc-tile--md, .svc-tile--sm, .svc-tile--tall {
	grid-column: auto;
	grid-row: auto;
}

.svc-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
	background: var(--brand-primary);
	transition: transform 500ms var(--ease);
}

.svc-tile:hover { transform: translateY(-4px); }

.svc-tile img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--ease), filter 500ms var(--ease);
	filter: saturate(0.95) brightness(0.96);
}

.svc-tile:hover img {
	transform: scale(1.08);
	filter: saturate(1.05) brightness(1);
}

/* Subtle bottom gradient ONLY — photos remain fully visible */
.svc-tile::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 55%;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(15, 8, 22, 0.75) 100%);
	z-index: 1;
	transition: height 400ms var(--ease);
}

.svc-tile:hover::after {
	height: 75%;
}

/* Number chip top-left */
.svc-tile__num {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 500;
	color: var(--brand-primary);
	background: rgba(255, 255, 255, 0.95);
	padding: 4px 10px;
	letter-spacing: 0.18em;
}

/* Tag pill top-right */
.svc-tile__tag-pill {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	font-size: 10px;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 4px 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Content at the bottom */
.svc-tile__content {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.svc-tile__title {
	font-family: var(--font-display);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 500;
	color: #fff;
	margin: 0 0 4px;
	line-height: 1.15;
	letter-spacing: -0.005em;
	transition: transform 400ms var(--ease);
}

.svc-tile:hover .svc-tile__title { transform: translateY(-4px); }

/* The original tag */
.svc-tile__tag {
	font-size: 10px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	transition: transform 400ms var(--ease), opacity 400ms var(--ease);
}

.svc-tile:hover .svc-tile__tag { transform: translateY(-4px); }

/* "Learn more →" appears on hover */
.svc-tile__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 600;
	color: var(--brand-secondary);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 350ms var(--ease), transform 400ms var(--ease);
}

.svc-tile__cta::after {
	content: "→";
	transition: transform 300ms var(--ease);
}

.svc-tile:hover .svc-tile__cta {
	opacity: 1;
	transform: translateY(0);
}

.svc-tile:hover .svc-tile__cta::after { transform: translateX(4px); }


/* ============================================================
   FOUNDER (v2) — split: photo beside text, faded image collage bg
   ============================================================ */

.founder-v2 {
	position: relative;
	padding-block: clamp(64px, 8vw, 110px);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	background: var(--brand-primary);
}

/* Faded image collage background */
.founder-v2__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}

.founder-v2__bg-img {
	position: absolute;
	object-fit: cover;
	opacity: 0.30;
	filter: saturate(0.7) blur(1px);
}

.founder-v2__bg-img--1 { top: 0; left: 0; width: 55%; height: 60%; }
.founder-v2__bg-img--2 { top: 35%; right: 0; width: 50%; height: 65%; }
.founder-v2__bg-img--3 { bottom: -10%; left: 30%; width: 40%; height: 55%; opacity: 0.18; }

/* Purple wash on top of the faded images */
.founder-v2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(900px 400px at 20% 30%, rgba(201, 86, 28, 0.18), transparent 60%),
		linear-gradient(135deg, rgba(66, 27, 73, 0.92) 0%, rgba(66, 27, 73, 0.85) 60%, rgba(66, 27, 73, 0.95) 100%);
}

.founder-v2__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: clamp(28px, 4vw, 48px);
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.founder-v2__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.founder-v2__eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--brand-secondary);
}

.founder-v2__signature {
	font-family: var(--font-script);
	font-size: 26px;
	color: var(--brand-secondary);
	line-height: 1;
}

@media (max-width: 600px) {
	.founder-v2__signature { font-size: 22px; }
}

.founder-v2__split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}

@media (max-width: 860px) {
	.founder-v2__split { grid-template-columns: 1fr; gap: 32px; }
}

/* Photo (Jennifer full-body cutout — floats against purple) */
.founder-v2__photo {
	position: relative;
	max-width: 340px;
	margin: 0 auto;
	filter: drop-shadow(0 32px 24px rgba(0, 0, 0, 0.45));
	align-self: end; /* she stands at the bottom of the grid cell */
}

@media (max-width: 860px) {
	.founder-v2__photo { max-width: 240px; }
}
@media (max-width: 480px) {
	.founder-v2__photo { max-width: 200px; }
}

.founder-v2__photo img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 1.2s var(--ease);
}

.founder-v2__photo:hover img { transform: translateY(-6px); }

/* Editorial badge anchored at the bottom-right beside her */
.founder-v2__photo-tag {
	position: absolute;
	bottom: 14%;
	right: -32px;
	background: var(--brand-secondary);
	color: #fff;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 500;
	padding: 7px 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 860px) {
	.founder-v2__photo-tag { right: -10px; bottom: 18%; }
}

@media (max-width: 480px) {
	.founder-v2__photo-tag { font-size: 9px; padding: 6px 10px; letter-spacing: 0.16em; }
}

/* Adjust the founder section grid so the photo column aligns the image to the bottom */
.founder-v2__split {
	align-items: stretch !important;
}

.founder-v2__split > .founder-v2__photo {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Text column */
.founder-v2__text { position: relative; }

.founder-v2__name {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 84px);
	font-weight: 500;
	line-height: 0.96;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 0 0 8px;
}

.founder-v2__name em {
	font-style: italic;
	color: var(--brand-secondary);
	font-weight: 400;
}

.founder-v2__role {
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 24px;
}

.founder-v2__rule {
	width: 80px;
	height: 1px;
	background: var(--brand-secondary);
	margin-bottom: 28px;
}

.founder-v2__quote {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.4;
	color: #fff;
	font-style: italic;
	font-weight: 400;
	margin: 0 0 20px;
	max-width: 50ch;
}

.founder-v2__quote em {
	color: var(--brand-secondary);
	font-weight: 500;
}

.founder-v2__body {
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 28px;
	font-weight: 300;
	max-width: 52ch;
}

.founder-v2__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #fff;
	border-bottom: 1px solid var(--brand-secondary);
	padding-bottom: 8px;
	transition: color var(--dur-base) var(--ease);
}

.founder-v2__cta:hover { color: var(--brand-secondary); }


/* ============================================================
   TQUOTE — editorial testimonial with overlapping card + chips
   ============================================================ */

.tquote {
	position: relative;
	padding-block: clamp(64px, 8vw, 110px);
	background: var(--surface-soft);
	overflow: hidden;
}

.tquote::before {
	content: "";
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 100%;
	background: radial-gradient(circle at 70% 30%, var(--brand-secondary-08), transparent 60%);
	pointer-events: none;
}

.tquote__layout {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	min-height: 480px;
}

@media (max-width: 760px) {
	.tquote__layout { grid-template-columns: 1fr; min-height: 0; }
}

/* Large editorial photo on the left */
.tquote__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	box-shadow: 0 28px 56px rgba(27, 19, 32, 0.18);
}

.tquote__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--ease);
}

.tquote__photo:hover img { transform: scale(1.04); }

/* Tag inside photo (top-left, like a movie poster banner) */
.tquote__photo-tag {
	position: absolute;
	top: 18px;
	left: 18px;
	background: rgba(255, 255, 255, 0.95);
	padding: 10px 14px;
	z-index: 2;
}

.tquote__photo-tag-eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brand-secondary);
	margin-bottom: 2px;
}

.tquote__photo-tag-title {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	color: var(--brand-primary);
}

/* The quote card — overlaps the photo on desktop */
.tquote__card {
	position: relative;
	background: #fff;
	padding: clamp(28px, 4vw, 48px);
	box-shadow: 0 28px 56px rgba(27, 19, 32, 0.10);
	z-index: 3;
}

@media (min-width: 760px) {
	.tquote__card {
		margin-left: -8%;
	}
}

/* Big decorative quote mark */
.tquote__big-quote {
	position: absolute;
	top: 12px;
	right: 20px;
	font-family: var(--font-display);
	font-size: 160px;
	line-height: 0.7;
	color: var(--brand-secondary-15);
	z-index: 0;
	font-style: italic;
	pointer-events: none;
}

.tquote__eyebrow {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--brand-secondary);
	margin-bottom: 20px;
	z-index: 1;
}

.tquote__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--brand-secondary);
}

.tquote__text {
	position: relative;
	font-family: var(--font-display);
	font-size: clamp(20px, 2.4vw, 30px);
	line-height: 1.35;
	color: var(--brand-primary);
	font-weight: 400;
	margin: 0 0 30px;
	z-index: 1;
	letter-spacing: -0.005em;
}

.tquote__text em {
	font-style: italic;
	color: var(--brand-secondary);
	font-weight: 500;
}

.tquote__byline {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: end;
	padding-top: 20px;
	border-top: 1px solid var(--line-soft);
	z-index: 1;
	gap: 16px;
	flex-wrap: wrap;
}

.tquote__name {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--brand-primary);
	margin: 0 0 2px;
}

.tquote__role {
	font-size: 11px;
	color: var(--brand-text);
	margin: 0;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tquote__stars {
	font-size: 14px;
	color: var(--brand-secondary);
	letter-spacing: 0.15em;
	white-space: nowrap;
}

/* Floating stat chips — pinned at angles for editorial energy */
.tquote__chip {
	position: absolute;
	background: var(--brand-primary);
	color: #fff;
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-shadow: 0 16px 32px rgba(66, 27, 73, 0.32);
	z-index: 4;
	max-width: 200px;
}

.tquote__chip strong {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--brand-secondary);
	line-height: 1;
}

.tquote__chip span {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.06em;
	line-height: 1.35;
}

.tquote__chip--1 {
	top: 20px;
	left: 38%;
	transform: rotate(-3deg);
}

.tquote__chip--2 {
	bottom: 24px;
	right: 4%;
	transform: rotate(2deg);
}

@media (max-width: 760px) {
	.tquote__chip { display: none; }
}


/* ============================================================
   BILLBOARD-WITH-PHOTO — quote + portrait
   ============================================================ */

.bbq {
	background: #fff;
	padding-block: clamp(48px, 6vw, 76px);
	overflow: hidden;
}

.bbq__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

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

.bbq__copy { max-width: 620px; }

.bbq__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--brand-secondary);
	margin-bottom: 24px;
}

.bbq__eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--brand-secondary);
	display: inline-block;
	vertical-align: middle;
	margin-right: 14px;
}

.bbq__quote {
	font-family: var(--font-display);
	font-size: clamp(24px, 3.6vw, 42px);
	line-height: 1.2;
	font-weight: 400;
	font-style: italic;
	color: var(--brand-primary);
	margin: 0 0 28px;
	letter-spacing: -0.005em;
}

.bbq__quote em { color: var(--brand-secondary); font-weight: 500; }

.bbq__author { display: flex; align-items: baseline; gap: 14px; }
.bbq__author-line { width: 28px; height: 1px; background: var(--brand-secondary); margin-top: -4px; }
.bbq__author-name { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--brand-primary); margin: 0; }
.bbq__author-role { font-size: 11px; color: var(--brand-text); margin: 0; letter-spacing: 0.18em; text-transform: uppercase; }

.bbq__photo {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 2px;
}

.bbq__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

.bbq__photo:hover img { transform: scale(1.04); }


/* ============================================================
   GALLERY CAROUSEL — scrolling, draggable, clickable cards
   ============================================================ */

.gcarousel {
	padding-block: clamp(56px, 7vw, 88px);
	background: #fff;
	overflow: hidden;
	position: relative;
}

.gcarousel__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 32px;
	margin-bottom: 28px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--line-soft);
}

@media (max-width: 700px) { .gcarousel__head { flex-direction: column; align-items: stretch; gap: 14px; } }

.gcarousel__head .eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--brand-secondary);
	margin-bottom: 12px;
}

.gcarousel__head h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 500;
	color: var(--brand-primary);
	margin: 0;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.gcarousel__head h2 em { font-style: italic; color: var(--brand-secondary); font-weight: 400; }

.gcarousel__head p {
	font-size: 14px;
	color: var(--brand-text);
	margin: 0;
	line-height: 1.55;
	font-weight: 300;
}

/* Viewport masks the overflow */
.gcarousel__viewport {
	position: relative;
	overflow: hidden;
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter);
}

/* The draggable track */
.gcarousel__track {
	display: flex;
	gap: 16px;
	cursor: grab;
	transition: transform 600ms var(--ease);
	will-change: transform;
}

.gcarousel__track.is-dragging {
	cursor: grabbing;
	transition: none;
	user-select: none;
}

.gcarousel__track.is-dragging .gcard { pointer-events: none; }

/* Individual card */
.gcard {
	flex: 0 0 auto;
	width: clamp(280px, 28vw, 380px);
	aspect-ratio: 4 / 5;
	position: relative;
	overflow: hidden;
	color: #fff;
	display: block;
	background: var(--brand-primary);
	isolation: isolate;
	transition: transform 500ms var(--ease);
	text-decoration: none;
}

.gcard:hover { transform: translateY(-6px); }

.gcard img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease), filter 600ms var(--ease);
	filter: saturate(0.95);
}

.gcard:hover img {
	transform: scale(1.08);
	filter: saturate(1.05);
}

.gcard::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(15, 8, 22, 0.85) 100%);
	z-index: 1;
	transition: height 500ms var(--ease), background 500ms var(--ease);
}

.gcard:hover::after {
	height: 75%;
	background: linear-gradient(180deg, rgba(66, 27, 73, 0.15) 0%, rgba(66, 27, 73, 0.95) 100%);
}

.gcard__tag {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 3;
	font-size: 10px;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.32);
	padding: 5px 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.gcard__body {
	position: absolute;
	left: 20px; right: 20px;
	bottom: 20px;
	z-index: 2;
}

.gcard__title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 500;
	color: #fff;
	margin: 0 0 6px;
	line-height: 1.2;
	letter-spacing: -0.005em;
	transition: transform 400ms var(--ease);
}

.gcard:hover .gcard__title { transform: translateY(-4px); }

.gcard__desc {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.86);
	margin: 0 0 12px;
	font-weight: 300;
	line-height: 1.55;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 400ms var(--ease), opacity 400ms var(--ease) 80ms, margin 400ms var(--ease);
}

.gcard:hover .gcard__desc {
	max-height: 90px;
	opacity: 1;
	margin: 0 0 14px;
}

.gcard__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--brand-secondary);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 350ms var(--ease) 150ms, transform 400ms var(--ease) 150ms;
}

.gcard__link::after {
	content: "→";
	display: inline-block;
	transition: transform 250ms var(--ease);
}

.gcard:hover .gcard__link {
	opacity: 1;
	transform: translateY(0);
}

.gcard:hover .gcard__link::after { transform: translateX(4px); }

/* Controls — arrows + progress strip */
.gcarousel__controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	gap: 24px;
}

.gcarousel__progress {
	flex: 1;
	height: 1px;
	background: var(--line-soft);
	position: relative;
	overflow: hidden;
}

.gcarousel__progress-bar {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 30%;
	background: var(--brand-secondary);
	transition: width 500ms var(--ease), transform 500ms var(--ease);
}

.gcarousel__arrows {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}

.gcarousel__arrow {
	width: 44px; height: 44px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--brand-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

.gcarousel__arrow:hover:not(:disabled) {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	color: #fff;
}

.gcarousel__arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.gcarousel__arrow svg { width: 16px; height: 16px; }

.gcarousel__count {
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--brand-text);
	letter-spacing: 0.18em;
	min-width: 60px;
	text-align: center;
}

.gcarousel__count strong { color: var(--brand-primary); font-weight: 500; }


/* ============================================================
   VISUAL EVENTS — cards with photos (replaces text calendar)
   ============================================================ */

.vcal {
	padding-block: clamp(48px, 6vw, 76px);
	background: #fff;
}

.vcal__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	margin-bottom: 32px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--brand-primary);
}

@media (max-width: 700px) { .vcal__head { flex-direction: column; align-items: stretch; } }

.vcal__head .eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--brand-secondary);
	margin-bottom: 12px;
}

.vcal__head h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--brand-primary);
	margin: 0;
}

.vcal__head h2 em { font-style: italic; color: var(--brand-secondary); font-weight: 400; }

.vcal__head-cta {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 500;
	color: var(--brand-primary);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--brand-secondary);
	padding-bottom: 6px;
	margin-bottom: 6px;
}

.vcal__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

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

.vcal-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	transition: transform 500ms var(--ease);
}

.vcal-card:hover { transform: translateY(-4px); }

.vcal-card img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease);
}

.vcal-card:hover img { transform: scale(1.05); }

.vcal-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(66, 27, 73, 0.92) 100%);
}

.vcal-card__top {
	position: absolute;
	top: 16px;
	left: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.vcal-card__date {
	background: #fff;
	color: var(--brand-primary);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px;
	letter-spacing: 0.06em;
}

.vcal-card__tag {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
	padding: 5px 10px;
}

.vcal-card__bottom {
	position: absolute;
	bottom: 16px;
	left: 16px;
	right: 16px;
	z-index: 2;
}

.vcal-card__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	margin: 0 0 6px;
	line-height: 1.25;
}

.vcal-card__loc {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
}


/* ============================================================
   BIG NUMBER STATEMENT — visual stats with photo backdrop
   ============================================================ */

.bignum {
	position: relative;
	padding-block: clamp(80px, 10vw, 130px);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.bignum__bg { position: absolute; inset: 0; z-index: -2; }
.bignum__bg img { width: 100%; height: 100%; object-fit: cover; }

.bignum::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(66,27,73,0.78) 0%, rgba(66,27,73,0.88) 100%);
}

.bignum__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

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

.bignum__main {
	font-family: var(--font-display);
	font-size: clamp(60px, 12vw, 180px);
	font-weight: 500;
	color: #fff;
	line-height: 0.9;
	letter-spacing: -0.04em;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.bignum__main::after {
	content: attr(data-suffix);
	color: var(--brand-secondary);
	font-size: 0.5em;
	vertical-align: super;
	font-weight: 400;
}

.bignum__side {
	max-width: 360px;
}

.bignum__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 20px;
}

.bignum__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--brand-secondary);
	display: inline-block;
	vertical-align: middle;
	margin-right: 12px;
}

.bignum__side h3 {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
	margin: 0 0 12px;
}

.bignum__side h3 em { font-style: italic; color: var(--brand-secondary); font-weight: 400; }

.bignum__side p {
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 22px;
	font-weight: 300;
}

.bignum__substats {
	display: flex;
	gap: 28px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.bignum__substat-num {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 500;
	color: #fff;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.bignum__substat-num::after {
	content: attr(data-suffix);
	color: var(--brand-secondary);
	font-size: 0.55em;
	vertical-align: super;
}

.bignum__substat-label {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.75);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-top: 4px;
	display: block;
}

/* =========================================================================
   VOICES — unified testimonials band
   ========================================================================= */
.voices {
	padding: clamp(64px, 9vw, 110px) 0;
	background: var(--surface-cream, #f5f1ec);
}
.voices .s-head { margin-bottom: 36px; text-align: center; }

/* Edge-to-edge marquee with soft fade masks at the sides so cards drift
   in/out instead of hard-clipping at the viewport edge. */
.voices__marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 8px 0 16px;
	/* Soft fade at left/right edges */
	-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%);
}

.voices__lane {
	display: flex;
	gap: 18px;
	width: max-content;
	animation: voices-scroll 48s linear infinite;
	will-change: transform;
}
.voices__marquee:hover .voices__lane,
.voices__lane:focus-within {
	animation-play-state: paused;
}

@keyframes voices-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.voices__lane {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		padding-inline: var(--gutter);
	}
}

.voices__card {
	flex: 0 0 auto;
	width: clamp(260px, 70vw, 360px);
	background: #fff;
	padding: 28px 26px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line-soft);
	box-shadow: var(--shadow-sm);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.voices__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
.voices__stars {
	color: var(--brand-secondary);
	letter-spacing: 2px;
	font-size: 14px;
}
.voices__quote {
	font-family: var(--font-display);
	font-size: 17px;
	line-height: 1.55;
	color: var(--brand-primary);
	margin: 0;
	font-weight: 400;
}
.voices__quote::before { content: "" attr(data-q); }
.voices__by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.voices__name {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-primary);
	margin: 0;
}
.voices__role {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--brand-text);
	margin: 0;
	letter-spacing: 0.02em;
}

/* =========================================================================
   WELLNESS CHECK home CTA tile
   ========================================================================= */
.wcheck-cta {
	padding: clamp(64px, 9vw, 110px) 0;
	background: linear-gradient(135deg, rgba(82, 48, 88, 0.04) 0%, rgba(201, 86, 28, 0.05) 100%);
}
.wcheck-cta__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
	background: #fff;
	padding: clamp(32px, 5vw, 56px);
	border-radius: var(--radius-xl);
	border: 1px solid rgba(82, 48, 88, 0.08);
	box-shadow: 0 14px 40px rgba(82, 48, 88, 0.08);
}
@media (min-width: 840px) {
	.wcheck-cta__inner { grid-template-columns: 1.4fr 1fr; }
}
.wcheck-cta__eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--brand-secondary);
	margin: 0 0 14px;
}
.wcheck-cta__title {
	font-family: var(--font-display);
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1.1;
	font-weight: 500;
	color: var(--brand-primary);
	margin: 0 0 14px;
}
.wcheck-cta__title em { font-style: italic; color: var(--brand-secondary); font-family: var(--font-script); font-weight: 400; font-size: 1.05em; }
.wcheck-cta__body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--brand-text);
	font-weight: 300;
	margin: 0 0 24px;
	max-width: 540px;
}
.wcheck-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--brand-secondary);
	color: #fff;
	border: 1.5px solid var(--brand-secondary);
	text-decoration: none;
	transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.wcheck-cta__btn svg { width: 16px; height: 16px; }
.wcheck-cta__btn:hover {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	transform: translateY(-1px);
}

.wcheck-cta__viz {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
.wcheck-cta__viz-ring {
	width: 180px;
	height: 180px;
}
.wcheck-cta__viz-ring svg {
	width: 100%; height: 100%;
}
.wcheck-cta__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.wcheck-cta__chips span {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-primary);
	background: rgba(82, 48, 88, 0.06);
	border-radius: 999px;
	padding: 6px 12px;
}