/*
Theme Name: 5th Element Wellness
Template: twentytwentyfive
Description: Child theme for 5th Element Wellness.
Version: 1.1.0
*/

/* Variables */
:root {
	--black: #0a0a0a;
	--ink: #141414;
	--char: #1a1a1a;
	--char-2: #232323;
	--line: #2a2a2a;
	--mute: #8a8a8a;
	--paper: #fafafa;
	--paper-2: #f2efea; /* warm off-white accent, used intentionally */
	--yellow: #ffc216;
	--red: #ff1616;
	--nav-h: 72px;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--black); color: var(--paper); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Utilities */
.display { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -0.025em; line-height: 0.95; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; }
/* Accessible page heading for pages whose hero carries no visible headline
   (fivew/hero-b has no headline attribute). Read by screen readers and search
   engines, invisible on screen — see fivew_prepend_hidden_h1() in functions.php. */
.fivew-a11y-h1 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.container { width: min(1400px, 100% - 48px); margin-inline: auto; }
.wide { width: min(1600px, 100% - 40px); margin-inline: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 999px; font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; transition: transform 0.15s ease, background 0.15s ease; }
.btn .arr { width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.12); transition: transform 0.2s ease; }
.btn:hover .arr { transform: translateX(3px); }
.btn-yellow { background: var(--yellow); color: #0a0a0a; }
.btn-yellow:hover { background: #ffcb3b; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }
.btn-ink { background: #0a0a0a; color: #fff; }
.btn-ink:hover { background: #1a1a1a; }
.btn-ink-ghost { border: 1px solid #0a0a0a; color: #0a0a0a; }
.btn-ink-ghost:hover { background: #0a0a0a; color: #fff; }

/* Image system */
.ph { position: relative; overflow: hidden; background: #1a1a1a; color: #6a6a6a; display: flex; align-items: flex-end; isolation: isolate; }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; inset: 0; z-index: 0; }
.ph-tag { display: none; }
.ph.light { background: #e8e5de; }

/* ─────────────────────────────────────────────────────────
   Cross-link cluster (recovery, studio, etc.)
   Used by wp:group with className="fivew-related-cluster"
   ───────────────────────────────────────────────────────── */
.fivew-related-cluster { background: var(--paper-2); color: var(--ink); padding: 80px 0; }
.fivew-related-cluster .container { width: min(1200px, 100% - 48px); margin-inline: auto; }
.fivew-related-cluster .eyebrow { display: inline-block; margin-bottom: 14px; }
.fivew-related-cluster h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 14px; font-weight: 700; }
.fivew-related-cluster h2 em { color: var(--yellow); font-style: normal; }
.fivew-related-cluster .lead { font-size: 16px; line-height: 1.55; color: #4a4a4a; max-width: 640px; margin: 0 0 36px; }
.fivew-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.fivew-related-card { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: #fff; border: 1px solid #e8e5de; border-radius: 8px; color: var(--ink); transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; position: relative; }
.fivew-related-card:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.fivew-related-card .t { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.fivew-related-card .s { font-size: 14px; line-height: 1.5; color: #5a5a5a; }
.fivew-related-card:hover .s { color: #c8c8c8; }
.fivew-related-card .arr { position: absolute; top: 22px; right: 22px; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: inline-grid; place-items: center; font-weight: 700; transition: transform 0.2s ease; }
.fivew-related-card:hover .arr { transform: translateX(3px); }

/* ─────────────────────────────────────────────────────────
   Blog — shared layout (hub, archives, single post)
   Cream background, narrower container, sidebar on right.
   ───────────────────────────────────────────────────────── */
.fivew-post-main, .fivew-blog-main { background: var(--paper-2); color: var(--ink); padding: calc(var(--nav-h) + 40px) 0 96px; min-height: 60vh; }
.fivew-post-container { width: min(1180px, 100% - 48px); margin-inline: auto; }

.fivew-post-breadcrumb { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 24px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fivew-post-breadcrumb a { color: var(--mute); border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; }
.fivew-post-breadcrumb a:hover { color: var(--ink); border-bottom-color: currentColor; }
.fivew-post-breadcrumb .sep { color: #c4bfb1; }
.fivew-post-breadcrumb .current { color: var(--ink); }

/* Article / blog header (lives in same cream container) */
.fivew-post-header { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; max-width: 820px; }
.fivew-post-header-cats { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.fivew-post-header-cats a { color: var(--ink); padding-bottom: 2px; border-bottom: 2px solid var(--yellow); transition: color 0.15s ease; }
.fivew-post-header-cats a:hover { color: var(--mute); }
.fivew-post-header-cats .wp-block-post-terms__separator { color: var(--mute); margin: 0 6px; }
.fivew-post-header-title { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0; font-weight: 700; }
.fivew-post-header-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
.fivew-post-header-author { color: var(--ink); font-weight: 600; }
.fivew-post-header-author::after { content: '·'; margin-left: 12px; color: #c4bfb1; }
.fivew-post-header-date { color: var(--mute); }

/* Blog hub / archive header */
.fivew-blog-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; max-width: 760px; }
.fivew-blog-header-title { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin: 0; font-weight: 700; }
.fivew-blog-header-title em { color: var(--yellow); font-style: normal; }
.fivew-blog-header-lead { font-size: 16px; line-height: 1.6; color: #4a4a4a; max-width: 600px; margin: 0; }

/* Featured image — article-width, NOT full-bleed */
.fivew-post-featured { margin: 0 0 40px; max-width: 820px; width: 100%; overflow: hidden; border-radius: 6px; background: #e8e5de; aspect-ratio: 16 / 9; display: block; }
.fivew-post-featured img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fivew-post-featured a { display: block; height: 100%; }

/* Two-column layout: main article + sidebar */
.fivew-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: flex-start; }
@media (max-width: 900px) { .fivew-post-layout { grid-template-columns: 1fr; gap: 40px; } }

.fivew-post-article { max-width: 720px; min-width: 0; }
.fivew-post-article > * { margin-top: 0; }

/* Article footer (tags + prev/next) */
.fivew-post-author-bottom { margin-top: 48px; padding: 24px; border: 1px solid #d6d2c4; border-radius: 10px; background: var(--paper-2); display: flex; gap: 20px; align-items: flex-start; }
.fivew-post-author-bottom-avatar { flex-shrink: 0; line-height: 0; margin: 0; }
.fivew-post-author-bottom-avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.fivew-post-author-bottom-text { flex: 1; min-width: 0; }
@media (max-width: 600px) { .fivew-post-author-bottom { flex-direction: column; gap: 14px; } }
.fivew-post-author-bottom-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: 8px; }
.fivew-post-author-bottom .fivew-post-author-bottom-name, .fivew-post-author-bottom .wp-block-post-author-name { font-weight: 700; font-size: 16px; color: var(--ink); display: inline; padding-bottom: 2px; border-bottom: 2px solid var(--yellow); }
.fivew-post-author-bottom .fivew-post-author-bottom-bio, .fivew-post-author-bottom .wp-block-post-author-biography { font-size: 14px; line-height: 1.55; color: #4a4a4a; margin: 10px 0 0; }
.fivew-post-author-bottom .fivew-post-author-bottom-bio:empty, .fivew-post-author-bottom .wp-block-post-author-biography:empty { display: none; }

.fivew-post-tags { margin-top: 28px; padding-top: 22px; border-top: 1px solid #d6d2c4; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.fivew-post-tags-label { color: var(--mute); }
.fivew-post-tags .wp-block-post-terms a { color: var(--ink); padding: 3px 10px; background: rgba(255, 194, 22, 0.18); border-radius: 999px; border: 1px solid transparent; transition: background 0.15s ease, color 0.15s ease; }
.fivew-post-tags .wp-block-post-terms a:hover { background: var(--yellow); color: var(--ink); }
.fivew-post-tags .wp-block-post-terms__separator { display: none; }

.fivew-post-nav { margin-top: 32px; padding-top: 24px; border-top: 1px solid #d6d2c4; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fivew-post-nav-prev, .fivew-post-nav-next { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); max-width: 48%; transition: color 0.15s ease; }
.fivew-post-nav-prev:hover, .fivew-post-nav-next:hover { color: var(--mute); }
.fivew-post-nav-next { text-align: right; margin-left: auto; }
@media (max-width: 600px) { .fivew-post-nav { flex-direction: column; } .fivew-post-nav-next { text-align: left; margin-left: 0; } }

/* Sidebar */
.fivew-post-sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
@media (max-width: 900px) { .fivew-post-sidebar { position: static; } }
.fivew-sb-block { padding: 0; background: transparent; border: 0; border-top: 1px solid #d6d2c4; padding-top: 18px; }
.fivew-sb-block:first-child { border-top: 0; padding-top: 0; }
.fivew-sb-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin: 0 0 14px; font-weight: 600; }
.fivew-sb-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fivew-sb-block ul li { font-size: 14px; line-height: 1.4; }
.fivew-sb-block ul li a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; }
.fivew-sb-block ul li a:hover { color: var(--ink); border-bottom-color: var(--yellow); border-bottom-width: 2px; }
.fivew-sb-block .wp-block-categories li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fivew-sb-block .wp-block-categories .cat-count { color: var(--mute); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
.fivew-sb-cta { padding: 18px 20px; background: var(--ink); border: 0; color: var(--paper); border-radius: 6px; }
.fivew-sb-cta .fivew-sb-title { color: var(--yellow); margin-bottom: 10px; }
.fivew-sb-cta p { font-size: 14px; line-height: 1.5; color: #d6d6d6; margin: 0 0 14px; }
.fivew-sb-cta .btn { padding: 8px 14px; font-size: 12.5px; }
.fivew-sb-cta .btn-ink { background: var(--yellow); color: var(--ink); border: 0; }
.fivew-sb-cta .btn-ink:hover { background: #ffd040; color: var(--ink); }
.fivew-sb-author .wp-block-post-author { display: flex; gap: 12px; align-items: flex-start; }
.fivew-sb-author .wp-block-post-author__avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.fivew-sb-author .wp-block-post-author__name { font-weight: 700; font-size: 14px; color: var(--ink); display: block; margin-bottom: 2px; }
.fivew-sb-author .wp-block-post-author__bio { font-size: 13px; line-height: 1.5; color: #4a4a4a; margin: 2px 0 0; }
.fivew-sb-recent .wp-block-latest-posts { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.fivew-sb-recent .wp-block-latest-posts li { font-size: 14px; line-height: 1.35; }
.fivew-sb-recent .wp-block-latest-posts a { color: var(--ink); font-weight: 500; border-bottom: 1px solid transparent; }
.fivew-sb-recent .wp-block-latest-posts a:hover { border-bottom-color: var(--yellow); border-bottom-width: 2px; }

/* Blog hub — vertical article list */
.fivew-blog-articles { min-width: 0; }
.fivew-blog-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 32px; }
.fivew-blog-row { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid #d6d2c4; align-items: start; }
.fivew-blog-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 700px) { .fivew-blog-row { grid-template-columns: 1fr; gap: 14px; } }
.fivew-blog-row-img { margin: 0; overflow: hidden; border-radius: 6px; background: #e8e5de; aspect-ratio: 16 / 9; }
.fivew-blog-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.fivew-blog-row-img:hover img { transform: scale(1.03); }
.fivew-blog-row-img a { display: block; height: 100%; }
.fivew-blog-row-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fivew-blog-row-cats { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.fivew-blog-row-cats a { color: var(--ink); padding-bottom: 1px; border-bottom: 2px solid var(--yellow); }
.fivew-blog-row-cats .wp-block-post-terms__separator { color: var(--mute); margin: 0 5px; }
.fivew-blog-row-title { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.25; letter-spacing: -0.012em; color: var(--ink); margin: 2px 0 0; font-weight: 700; }
.fivew-blog-row-title a { color: inherit; transition: color 0.15s ease; }
.fivew-blog-row-title a:hover { color: var(--mute); }
.fivew-blog-row-excerpt { font-size: 14.5px; line-height: 1.55; color: #4a4a4a; margin: 0; }
.fivew-blog-row-excerpt p { margin: 0; }
.fivew-blog-row-meta { display: flex; gap: 10px; flex-wrap: wrap; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
.fivew-blog-row-author { color: var(--ink); font-weight: 600; }
.fivew-blog-row-author::after { content: '·'; margin-left: 10px; color: #c4bfb1; }

.fivew-blog-pagination { margin-top: 48px; display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.fivew-blog-pagination .page-numbers { padding: 6px 12px; border-radius: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--ink); border: 1px solid transparent; }
.fivew-blog-pagination .page-numbers.current { background: var(--yellow); color: var(--ink); }
.fivew-blog-pagination .page-numbers:hover:not(.current) { background: rgba(255, 194, 22, 0.18); }
.fivew-blog-empty { padding: 40px 0; font-size: 15px; color: var(--mute); text-align: center; }

/* ─────────────────────────────────────────────────────────
   Prose (article body — also reusable on long-form pages)
   ───────────────────────────────────────────────────────── */
.fivew-prose { font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.fivew-prose > * + * { margin-top: 0.9em; }
.fivew-prose h2 { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 700; margin-top: 1.8em; margin-bottom: 0.4em; color: var(--ink); }
.fivew-prose h3 { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 700; margin-top: 1.6em; margin-bottom: 0.3em; color: var(--ink); }
.fivew-prose h4 { font-size: 16px; font-weight: 700; margin-top: 1.4em; margin-bottom: 0.2em; }
.fivew-prose p { margin: 0; }
.fivew-prose a { color: var(--ink); background-image: linear-gradient(var(--yellow), var(--yellow)); background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 2px; padding-bottom: 1px; transition: background-size 0.15s ease; }
.fivew-prose a:hover { background-size: 100% 100%; }
.fivew-prose ul, .fivew-prose ol { padding-left: 1.3em; margin: 0; }
.fivew-prose li { margin-bottom: 0.35em; }
.fivew-prose li > p { display: inline; }
.fivew-prose blockquote { border-left: 3px solid var(--yellow); padding: 4px 0 4px 20px; margin: 1.4em 0; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--ink); }
.fivew-prose blockquote p { margin: 0; }
.fivew-prose blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: var(--mute); font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.06em; }
.fivew-prose img { border-radius: 6px; margin: 1.4em 0; }
.fivew-prose figure { margin: 1.4em 0; }

/* Reusable "document" treatment: a centered paper panel for standalone prose
   sitting on the theme's dark body (suspension/cancellation/policy pages).
   Same effect the Privacy Policy page achieved with page-scoped CSS. */
.wp-block-group.fivew-prose.is-doc {
	max-width: 820px;
	margin: 56px auto 88px;
	padding: 48px clamp(24px, 5vw, 56px);
	background: var(--paper-2, #f2efea);
	border-radius: 14px;
	overflow-wrap: anywhere;
}
.wp-block-group.fivew-prose.is-doc > * { max-width: none; }
.wp-block-group.fivew-prose.is-doc > :first-child { margin-top: 0; }
@media (max-width: 600px) {
	.wp-block-group.fivew-prose.is-doc { margin: 28px 16px 56px; padding: 30px 22px; border-radius: 10px; }
}
.fivew-prose figure img { margin: 0; }
.fivew-prose figcaption { font-size: 12.5px; color: var(--mute); margin-top: 8px; text-align: center; }
.fivew-prose hr { border: 0; border-top: 1px solid #d6d2c4; margin: 2em 0; }
.fivew-prose strong { font-weight: 700; }
.fivew-prose code { background: #e8e5de; padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }
.fivew-prose pre { background: var(--ink); color: var(--paper); padding: 16px 20px; border-radius: 6px; overflow-x: auto; font-size: 13px; }
.fivew-prose pre code { background: transparent; padding: 0; color: inherit; }

/* Post nav (prev / next) */
.fivew-post-nav-section { background: var(--paper); padding: 0 0 80px; }
.fivew-post-nav-section .container { max-width: 760px; margin-inline: auto; width: min(760px, 100% - 48px); display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid #e8e5de; padding-top: 32px; }
.fivew-post-nav-prev, .fivew-post-nav-next { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); max-width: 45%; }
.fivew-post-nav-prev:hover, .fivew-post-nav-next:hover { color: var(--red); }
.fivew-post-nav-next { text-align: right; margin-left: auto; }
@media (max-width: 600px) { .fivew-post-nav-section .container { flex-direction: column; } .fivew-post-nav-next { text-align: left; } }

/* ------------------------------------------------------------------ */
/* Page-scoped QA patches                                              */
/* ------------------------------------------------------------------ */

/* Memberships (page-id-5536) "What's included" related cluster now has 7
   cards (Semi-Private PT added). The shared auto-fit grid renders these
   4-up at the 1200px container (a balanced 4 + 3), so the earlier 3-col
   override — scoped for the old 6-card 3 x 2 layout — is no longer needed
   and would leave a single orphan on a third row. Left to the default. */

/* Make a Booking (page-id-5617): the "Book online via MINDBODY" CTA sits in a
   center-pinned inner div (inline max-width:1280px;margin:0 auto), so on wide
   viewports its left edge is indented and no longer lines up with the hero-e
   "Prefer to call" label (hero-wrap is full width with 40px side padding).
   Left-align the inner div, and match the hero's responsive side padding
   (40px -> 24px at <=960px) so the button's left edge tracks the label at
   every breakpoint. Scoped to this page only. */
.page-id-5617 .fivew-booking-cta > div { margin-left: 0 !important; }
@media (max-width: 960px) {
	.page-id-5617 .fivew-booking-cta { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ===== Video testimonial affordances (fivew/members cards) =====
   (a) CSS-only play overlay on each card image link (.mb-phone is
       position:relative;overflow:hidden in the block stylesheet), and
   (b) styling for the "Watch full video →" CTA (.mb-watch) added in save.js.
   Mirrors the retired .mb-play disc (58px yellow circle + triangle) and the
   JetBrains Mono .eyebrow register. */
.wp-block-fivew-members .mb-phone::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: rgba(10, 10, 10, 0); transition: background 0.2s ease; pointer-events: none;
}
.wp-block-fivew-members .mb-phone:hover::before { background: rgba(10, 10, 10, 0.28); }
.wp-block-fivew-members .mb-phone::after {
	content: ""; position: absolute; z-index: 2; top: 50%; left: 50%;
	transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%;
	background-color: var(--yellow, #ffc216);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%230a0a0a'%3E%3Cpolygon points='9 6 19 12 9 18'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: 54% center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease; pointer-events: none;
}
.wp-block-fivew-members .mb-phone:hover::after { transform: translate(-50%, -50%) scale(1.06); }
.wp-block-fivew-members .mb-phone.missing::before,
.wp-block-fivew-members .mb-phone.missing::after { display: none; }

.wp-block-fivew-members .mb-watch {
	margin-top: 16px; align-self: start; display: inline-flex; align-items: center;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
	color: var(--ink, #141414); border-bottom: 1px solid var(--yellow, #ffc216);
	padding-bottom: 3px; transition: transform 0.15s ease, opacity 0.15s ease;
}
.wp-block-fivew-members .mb-watch:hover { transform: translateX(2px); opacity: 0.8; }

/* ===== Privacy Policy (page-id 4367) =====
   The default page template renders post-content full-width on the dark body.
   Present the fivew-prose group as a centered light "document" panel — matching
   the site's editorial reading surface (--paper-2) and prose typography.
   Scoped to this page only so other .fivew-prose pages (e.g. recipes) are untouched. */
.page-id-4367 .wp-block-group.fivew-prose {
	max-width: 860px;
	margin: 56px auto 96px;
	padding: 56px clamp(24px, 5vw, 64px);
	background: var(--paper-2, #f2efea);
	border-radius: 14px;
	overflow-wrap: anywhere; /* break the long literal URLs in the copy so narrow viewports don't overflow */
}
.page-id-4367 .wp-block-group.fivew-prose > * { max-width: none; }
.page-id-4367 .wp-block-group.fivew-prose > :first-child { margin-top: 0; }
.page-id-4367 .wp-block-group.fivew-prose h1 {
	font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
	font-size: clamp(30px, 4vw, 42px); font-weight: 700;
	letter-spacing: -0.025em; line-height: 1.08; color: var(--ink); margin: 0 0 6px;
}
.page-id-4367 .privacy-policy-tutorial { color: var(--mute, #8a8a8a); }

@media (max-width: 600px) {
	.page-id-4367 .wp-block-group.fivew-prose {
		margin: 28px 16px 56px;
		padding: 32px 22px;
		border-radius: 10px;
	}
}

/* Promo popup must not stack on top of an open gallery lightbox.
   The popup fires on a 10s timer regardless of what the visitor is doing, so
   browsing /our-space/ images produced two overlapping backdrops. Z-order was
   already correct (lightbox 9999 over popup 200) — this suppresses the popup
   entirely while a lightbox is open, and lets it reappear once the visitor
   closes the image. Done in CSS rather than the block's view.js so no plugin
   rebuild is needed; the popup's localStorage snooze is set on dismiss, not on
   open, so nothing is consumed while it is hidden.
   :has() is Baseline-supported; on an older engine the popup simply behaves as
   it did before, which is a safe degradation. */
body:has(.fivew-gallery-lightbox.is-open) .wp-block-fivew-promo-popup {
	display: none !important;
}