/*
Theme Name: Marion Balinoff
Theme URI: https://marionbalinoff.com
Author: Marion Balinoff Consulting SL
Description: Custom block theme for marionbalinoff.com. Navy + brand gradients, Mulish. Content is edited in the pages; styles live here.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: marionbalinoff
*/

/* ==========================================================================
   Tokens (same values as the report page)
   ========================================================================== */
:root {
	--navy: #03051F;
	--navy-2: #0A0D2E;
	--line: rgba(255, 255, 255, .12);
	--line-dark: rgba(3, 5, 31, .10);
	--text: #FFFFFF;
	--ink: #1A1C33;
	--ink-muted: #5A5D78;
	--muted: #B7BAD3;
	--blue: #4A8DF0;
	--purple: #8E3CE0;
	--orange: #EE8B5E;
	--pink: #E95A92;
	--cyan: #62E0EA;
	--green: #66E08E;
	--grad-warm: linear-gradient(90deg, var(--orange), var(--pink));
	--grad-cool: linear-gradient(135deg, var(--blue), var(--purple));
	--grad-mint: linear-gradient(135deg, var(--cyan), var(--green));
	--shape: polygon(0 0, 62% 0, 100% 38%, 100% 100%, 38% 100%, 0 62%);
	--max: 1180px;
	--header-h: 84px;
	--sec-pad: clamp(64px, 9vw, 110px);
	--radius: 22px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
:where(a, button, input, textarea):focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.site-main--landing > * { margin-block: 0; }

/* Typographic helpers ---------------------------------------------------- */
.eyebrow {
	font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
	width: fit-content; margin-bottom: 18px !important;
}
.sec-title { font-size: clamp(34px, 4.4vw, 52px); font-weight: 300; line-height: 1.08; max-width: 22ch; margin-bottom: 28px !important; }
.sec-intro { font-size: clamp(19px, 2vw, 22px); font-weight: 300; max-width: 56ch; color: var(--muted); }
.sec--white .sec-intro { color: var(--ink-muted); }
.grad-text, .wp-block-heading strong { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: inherit; }
.small-print { font-size: 14px; color: var(--muted); }
.sec--white .small-print { color: var(--ink-muted); }

/* Sections --------------------------------------------------------------- */
.sec { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); position: relative; }
.sec--navy { background: var(--navy); color: var(--text); }
.sec--navy-2 { background: var(--navy-2); color: var(--text); }
.sec--white { background: #fff; color: var(--ink); }
.sec--white a:not(.wp-element-button) { color: var(--ink); }
.sec--tight { padding-top: 48px; padding-bottom: 48px; }
.sec--line { border-top: 1px solid var(--line); }

/* Buttons ---------------------------------------------------------------- */
.wp-element-button, .wp-block-button__link { transition: filter .15s, background-color .15s, border-color .15s; }
.wp-element-button:hover { filter: brightness(1.08); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; padding: 13.5px 28.5px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: #fff; filter: none; }
.sec--white .wp-block-button.is-style-outline > .wp-block-button__link { border-color: rgba(3, 5, 31, .3); color: var(--ink); }
.sec--white .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--ink); }

/* ==========================================================================
   Header (sticky, "Let's talk" always visible)
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(3, 5, 31, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	transition: box-shadow .2s, border-color .2s; border-bottom: 1px solid transparent;
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.site-header__inner { max-width: var(--max); margin: 0 auto; min-height: var(--header-h); padding: 0 clamp(20px, 4vw, 28px); gap: 24px; }
.site-header__right { gap: 28px; }
.site-nav { font-size: 15px; letter-spacing: .02em; gap: 26px; }
.site-nav .wp-block-navigation-item__content { text-decoration: none; opacity: .88; }
.site-nav .wp-block-navigation-item__content:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.site-header__cta .wp-block-button__link { padding: 11px 22px; font-size: 14px; white-space: nowrap; }

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; }
.brand svg { width: 92px; height: auto; flex: none; }
.brand__word { font-weight: 800; font-size: 14px; line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; }

/* Mobile menu overlay */
.site-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 28px 24px; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { gap: 22px; padding-top: 48px; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 24px; font-weight: 300; }

@media (max-width: 1100px) {
	.site-nav { gap: 18px; font-size: 14px; }
	.site-header__right { gap: 18px; }
}
@media (max-width: 599px) {
	:root { --header-h: 68px; }
	.brand svg { width: 70px; }
	.brand__word { font-size: 11.5px; }
	.site-header__right { gap: 10px; }
	.site-header__cta .wp-block-button__link { padding: 9px 16px; font-size: 13px; }
}

/* ==========================================================================
   Home: hero
   ========================================================================== */
.hero { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 80px); overflow: hidden; }
.hero__grid { gap: clamp(32px, 5vw, 64px) !important; align-items: center !important; }
.hero__title { font-size: clamp(40px, 5.6vw, 72px); font-weight: 300; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 26px !important; }
.hero__sub { font-size: clamp(19px, 1.9vw, 22px); font-weight: 300; color: #E6E7F2; max-width: 40ch; }
.hero .wp-block-buttons { margin-top: 34px !important; gap: 14px; }
.hero__photo { position: relative; margin: 0 !important; }
.hero__photo img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; width: 100%; }
.hero__photo::before, .hero__photo::after { content: ""; position: absolute; clip-path: var(--shape); border-radius: 10px; z-index: 1; }
.hero__photo::before { width: 92px; height: 92px; left: -34px; bottom: 54px; background: var(--grad-warm); }
.hero__photo::after { width: 58px; height: 58px; right: -18px; top: 38px; background: var(--grad-cool); }
.hero__photo figcaption { position: absolute; left: 16px; bottom: 14px; margin: 0; z-index: 2; font-size: 13px; background: rgba(3, 5, 31, .72); padding: 4px 12px; border-radius: 999px; color: #fff; }

/* Client logos ----------------------------------------------------------- */
.clients { padding-top: 34px; padding-bottom: 64px; border-top: 1px solid var(--line); }
.clients .eyebrow { margin-left: auto; margin-right: auto; }
.logo-strip { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 34px clamp(32px, 4.6vw, 60px) !important; margin-top: 26px !important; }
.logo-strip > .wp-block-image { margin: 0 !important; flex: none; }
.logo-strip img { height: 40px; width: auto !important; opacity: .82; transition: opacity .2s; }
.logo-strip img:hover { opacity: 1; }
.logo-strip .logo--supercell img { height: 37px; }
.logo-strip .logo--superplay img { height: 44px; }
.logo-strip .logo--zynga img { height: 35px; }
.logo-strip .logo--jam-city img { height: 40px; }
.logo-strip .logo--wooga img { height: 40px; }
.logo-strip .logo--stillfront img { height: 24px; }
.logo-strip .logo--huuuge img { height: 26px; }
.logo-strip .logo--snowprint img { height: 32px; }
.logo-strip .logo--goat-games img { height: 37px; }
.logo-strip .logo--madbox img { height: 22px; }
@media (max-width: 599px) {
	.logo-strip { gap: 26px 30px !important; }
	.logo-strip img { transform: scale(.82); }
}

/* Numbers ---------------------------------------------------------------- */
.stats { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0 !important; border-top: 1px solid var(--line-dark); }
.stat { padding: 30px 24px 6px 0; margin: 0 !important; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.stat__num { font-size: clamp(48px, 5.6vw, 76px); font-weight: 300; line-height: 1; letter-spacing: -.02em; margin-bottom: 10px !important; width: fit-content; background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat:nth-child(2) .stat__num { background-image: var(--grad-cool); }
.stat:nth-child(3) .stat__num { background-image: linear-gradient(90deg, var(--pink), var(--purple)); }
.stat:nth-child(4) .stat__num { background-image: linear-gradient(135deg, #22C4F2, var(--purple)); }
.stat__label { color: var(--ink-muted); font-size: 17px; margin-top: 0 !important; }
@media (max-width: 900px) {
	.stats { grid-template-columns: 1fr 1fr; }
	.stat:nth-child(3) { padding-left: 0; border-left: 0; }
	.stat:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}

/* Why it works (beliefs) ------------------------------------------------- */
.why__grid { gap: clamp(32px, 5vw, 64px) !important; }
.beliefs { display: grid !important; gap: 0 !important; margin-top: 8px !important; }
.belief { padding: 24px 0; margin: 0 !important; border-top: 1px solid var(--line); display: grid !important; grid-template-columns: 1fr 1.25fr; gap: 28px !important; align-items: baseline; }
.belief:last-child { border-bottom: 1px solid var(--line); }
.belief__q { margin: 0 !important; font-size: 20px; font-weight: 300; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.belief__a { margin: 0 !important; font-size: 19px; font-weight: 600; position: relative; padding-left: 30px; }
.belief__a::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; clip-path: var(--shape); background: var(--grad-warm); }
.belief:nth-child(2) .belief__a::before { background: var(--grad-cool); }
.belief:nth-child(3) .belief__a::before { background: var(--grad-mint); }
.belief:nth-child(4) .belief__a::before { background: linear-gradient(135deg, #22C4F2, var(--purple)); }
.why__closing { margin-top: 36px !important; font-size: clamp(20px, 2.2vw, 26px); font-weight: 300; max-width: 46ch; }
.why__photo { margin: 0 !important; }
.why__photo img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 50%; width: 100%; }
.why__photo figcaption, .stage-grid figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
@media (max-width: 700px) {
	.belief { grid-template-columns: 1fr; gap: 8px !important; }
}

/* What you get ----------------------------------------------------------- */
.benefits { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 20px !important; margin-top: 12px !important; }
.benefit { margin: 0 !important; padding: 30px 30px 26px; border-radius: 18px; background: #F5F6FB; position: relative; overflow: hidden; }
.benefit::before { content: ""; display: block; width: 26px; height: 26px; margin-bottom: 18px; clip-path: var(--shape); background: var(--grad-warm); }
.benefit:nth-child(2)::before { background: var(--grad-cool); }
.benefit:nth-child(3)::before { background: var(--grad-mint); }
.benefit:nth-child(4)::before { background: linear-gradient(135deg, #22C4F2, var(--purple)); }
.benefit h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px !important; letter-spacing: 0; }
.benefit p { margin: 0; color: var(--ink-muted); font-size: 17px; }
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; } }

/* How I work ------------------------------------------------------------- */
.offers { gap: 20px !important; margin-top: 36px !important; }
.offer { background: var(--navy-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px 30px !important; position: relative; }
.offer::before { content: ""; position: absolute; left: 32px; right: 32px; top: -1px; height: 3px; border-radius: 3px; background: var(--grad-warm); }
.offer + .offer::before, .wp-block-column:nth-child(2) > .offer::before, .offer:nth-child(2)::before { background: var(--grad-cool); }
.offer h3 { font-size: 26px; font-weight: 600; margin-bottom: 12px !important; letter-spacing: 0; }
.offer p { color: #E6E7F2; }
.offer__fit { margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted) !important; font-size: 16px; }
.offer__fit strong { color: #fff; }
.how__after { margin-top: 36px !important; align-items: center; gap: 22px !important; }
.how__after p { margin: 0; font-size: 19px; font-weight: 300; }

/* Testimonials ----------------------------------------------------------- */
.quotes { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px !important; margin-top: 12px !important; }
.quotes .wp-block-quote {
	margin: 0 !important; padding: 30px 28px 26px; border: 1px solid var(--line-dark); border-radius: 18px; border-left-width: 1px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: #fff;
}
.quotes .wp-block-quote::before { content: "“"; font-size: 64px; line-height: .6; height: 26px; font-weight: 800; background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quotes .wp-block-quote p { font-size: 17.5px; line-height: 1.55; margin: 0; flex: 1; }
.quotes .wp-block-quote cite { font-style: normal; font-size: 14px; color: var(--ink-muted); line-height: 1.4; }
.quotes .wp-block-quote cite strong { display: block; color: var(--ink); font-size: 15.5px; }
@media (max-width: 980px) { .quotes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .quotes { grid-template-columns: 1fr; } }

/* Report teaser ---------------------------------------------------------- */
.teaser { padding: 0 !important; }
.teaser__card {
	background: radial-gradient(120% 140% at 100% 0%, rgba(142, 60, 224, .45), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(238, 139, 94, .30), transparent 60%), var(--navy-2);
	border: 1px solid var(--line); border-radius: 28px; padding: clamp(36px, 6vw, 72px) !important; position: relative; overflow: hidden;
}
.teaser__card .sec-title { font-size: clamp(38px, 5vw, 64px); margin-bottom: 18px !important; }
.teaser__card p:not(.eyebrow) { max-width: 52ch; font-size: 19px; font-weight: 300; color: #E6E7F2; }
.teaser__card .wp-block-buttons { margin-top: 28px !important; }
.teaser-wrap { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }

/* Speaking --------------------------------------------------------------- */
.sub-title { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 44px 0 18px !important; color: var(--ink-muted); }
.sec--navy .sub-title { color: var(--muted); }
.stage-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 18px !important; }
.stage-grid > .wp-block-image { margin: 0 !important; }
.stage-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.stage-grid figcaption { color: var(--ink-muted) !important; font-weight: 600; }
.stage-grid .wp-block-image:first-child img { object-position: 50% 25%; }
@media (max-width: 860px) { .stage-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stage-grid { grid-template-columns: 1fr; } }
.speaking__cta { margin-top: 26px !important; font-size: 18px; }
.speaking__cta a { font-weight: 700; }

.podcast__grid { gap: clamp(28px, 5vw, 60px) !important; align-items: center !important; }
.podcast .sec-title { margin-bottom: 14px !important; }
.podcast p { color: #E6E7F2; font-weight: 300; font-size: 19px; }
.podcast__videos { display: grid !important; gap: 16px !important; }
.podcast__placeholder { border: 1.5px dashed var(--line); border-radius: 16px; padding: 30px; color: var(--muted) !important; font-size: 15px !important; text-align: center; }

.guests { padding-top: 54px; padding-bottom: 60px; }
.guests .sub-title { margin-top: 0 !important; text-align: center; }
.guest-strip { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px !important; }
.guest-strip > .wp-block-image { margin: 0 !important; }
.guest-strip img { height: 64px; width: auto !important; transition: transform .2s; }
.guest-strip a:hover img { transform: translateY(-2px); }
.guest-strip .guest--square img { height: 92px; }
.guest-strip .guest--business-of-apps img { border-radius: 8px; }

/* About ------------------------------------------------------------------ */
.about__grid { gap: clamp(28px, 5vw, 64px) !important; align-items: center !important; }
.about__photo { margin: 0 !important; position: relative; }
.about__photo img { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px var(--navy), 0 0 0 6px var(--purple); }
.about__text p { font-size: 19px; font-weight: 300; color: #E6E7F2; max-width: 60ch; }

/* Contact ---------------------------------------------------------------- */
.contact__grid { gap: clamp(32px, 5vw, 72px) !important; }
.contact .sec-title { font-size: clamp(42px, 6vw, 76px); }
.contact__alt { margin-top: 30px !important; font-size: 18px; }
.contact__alt a { font-weight: 700; }

/* ==========================================================================
   Forms (contact + report) — markup from the mb-leads plugin
   ========================================================================== */
.panel { background: var(--navy-2); color: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px 30px; position: relative; }
.panel::before { content: ""; position: absolute; left: 32px; right: 32px; top: -1px; height: 3px; border-radius: 3px; background: var(--grad-warm); }
.panel h2 { font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0 0 6px; letter-spacing: 0; }
.panel p.sub { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.mb-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mb-form .field { margin-bottom: 12px; }
.mb-form .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mb-form input[type=text], .mb-form input[type=email], .mb-form textarea {
	width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 2px solid #fff; border-radius: 10px; padding: 14px 18px; box-sizing: border-box;
}
.mb-form textarea { min-height: 130px; resize: vertical; }
.mb-form ::placeholder { color: #7A7D93; }
.mb-form input:focus, .mb-form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(238, 139, 94, .25); }
.mb-form [aria-invalid="true"] { border-color: #FF6B6B !important; }
.mb-form .err { display: none; color: #FF9A9A; font-size: 13px; margin-top: 6px; }
.mb-form [aria-invalid="true"] + .err { display: block; }
.mb-form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 8px 0 20px; cursor: pointer; }
.mb-form .consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--orange); flex: none; }
.mb-form .consent a { color: #fff; }
.mb-form .consent.is-invalid { color: #FF9A9A; }
.mb-form .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; color: #fff !important; text-decoration: none; background: var(--grad-warm); border: 0; border-radius: 999px; padding: 16px 34px; cursor: pointer; transition: filter .15s; }
.btn:hover { filter: brightness(1.07); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn.full { width: 100%; }
.btn-ghost { display: block; text-align: center; margin-top: 14px; font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 14px 30px; }
.btn-ghost:hover { border-color: #fff; }
.micro { font-size: 13px; color: var(--muted); text-align: center; margin: 12px 0 0; }
.form-error { display: none; background: rgba(255, 107, 107, .12); border: 1px solid rgba(255, 107, 107, .5); color: #FFC2C2; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.form-error.is-visible { display: block; }
.mb-thanks { display: none; }
.panel.done .mb-form { display: none; }
.panel.done .mb-thanks { display: block; }
.mb-thanks h2 { font-size: 28px; margin-bottom: 10px; }
.mb-thanks p { color: #E6E7F2; font-size: 16px; margin: 0 0 24px; }
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note { font-size: 11.5px; color: var(--muted); margin: 12px 0 0; text-align: center; }
.recaptcha-note a { color: var(--muted); }
@media (max-width: 640px) {
	.mb-form .row { grid-template-columns: 1fr; gap: 0; }
	.panel { padding: 28px 22px 24px; }
}

/* ==========================================================================
   Report page (/the-undercounted-channel)
   ========================================================================== */
.r-hero { padding-top: clamp(40px, 6vw, 56px); padding-bottom: clamp(64px, 9vw, 110px); }
.r-hero__grid { gap: clamp(40px, 6vw, 64px) !important; align-items: flex-start !important; }
.r-kicker { color: var(--muted); font-size: 16px; margin-bottom: 22px !important; }
.r-kicker strong { color: #fff; font-weight: 600; }
.r-title { font-weight: 300; font-size: clamp(52px, 7.2vw, 96px); line-height: .98; letter-spacing: -.02em; margin-bottom: 30px !important; }
.r-title strong { display: block; font-weight: 400; }
.r-lede { font-size: 21px; font-weight: 300; max-width: 30ch; color: #E6E7F2; }
.stairs { display: flex; align-items: flex-end; gap: 12px; margin-top: 56px; height: 150px; }
.step { border-radius: 10px; clip-path: var(--shape); }
.s1 { width: 28px; height: 28px; background: var(--grad-warm); clip-path: none; border-radius: 6px; }
.s2 { width: 52px; height: 52px; background: var(--grad-cool); }
.s3 { width: 74px; height: 74px; background: var(--grad-mint); }
.s4 { width: 98px; height: 98px; background: var(--grad-warm); }
.s5 { width: 124px; height: 124px; background: linear-gradient(135deg, #22C4F2, var(--purple)); }
.s6 { width: 150px; height: 150px; background: var(--grad-mint); }
@media (prefers-reduced-motion: no-preference) {
	.step { animation: mb-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
	.s2 { animation-delay: .08s } .s3 { animation-delay: .16s } .s4 { animation-delay: .24s } .s5 { animation-delay: .32s } .s6 { animation-delay: .4s }
	@keyframes mb-rise { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
}
.r-sec { padding-top: 90px; padding-bottom: 90px; border-top: 1px solid var(--line); }
.r-sec .sec-title { font-size: clamp(32px, 4vw, 46px); margin-bottom: 40px !important; }
.r-stats { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 !important; border-top: 1px solid var(--line); }
.r-stat { padding: 30px 28px 10px 0; margin: 0 !important; }
.r-stat + .r-stat { padding-left: 28px; border-left: 1px solid var(--line); }
.r-stat__num { display: block; font-weight: 300; font-size: clamp(54px, 6vw, 80px); line-height: 1; letter-spacing: -.02em; margin-bottom: 12px !important; }
.r-stat:nth-child(1) .r-stat__num { color: var(--orange); }
.r-stat:nth-child(2) .r-stat__num { color: var(--cyan); }
.r-stat:nth-child(3) .r-stat__num { color: var(--pink); }
.r-stat__label { color: var(--muted); font-size: 17px; max-width: 24ch; margin-top: 0 !important; }
.r-source { color: var(--muted); font-size: 13px; margin-top: 34px !important; }
.learn { list-style: none; max-width: 820px; padding: 0; margin: 0; }
.learn li { display: grid; grid-template-columns: 22px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 300; }
.learn li::before { content: ""; width: 16px; height: 16px; margin-top: 8px; border-radius: 4px; clip-path: var(--shape); background: var(--grad-warm); }
.learn li:nth-child(2)::before { background: var(--grad-cool); }
.learn li:nth-child(3)::before { background: var(--grad-mint); }
.learn li:nth-child(4)::before { background: linear-gradient(135deg, #22C4F2, var(--purple)); }
.who-sub { color: var(--muted); font-size: 19px; font-weight: 300; max-width: 52ch; margin-top: -26px !important; margin-bottom: 36px !important; }
.name-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px 40px; }
.name-list li { font-size: 24px; font-weight: 700; letter-spacing: -.01em; opacity: .72; }
.r-about { gap: 48px !important; align-items: center !important; }
.r-about .wp-block-image img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--purple); }
.r-about h3 { font-size: 28px; font-weight: 600; margin-bottom: 4px !important; letter-spacing: 0; }
.r-about .role { color: var(--muted); font-size: 15px; margin: 0 0 16px !important; }
.r-closing { text-align: center; }
.r-closing .sec-title { margin-left: auto; margin-right: auto; margin-bottom: 28px !important; }
.r-closing .wp-block-buttons { justify-content: center; }
@media (max-width: 960px) {
	.stairs { display: none; }
}
@media (max-width: 640px) {
	.r-stats { grid-template-columns: 1fr; }
	.r-stat, .r-stat + .r-stat { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   YouTube facade
   ========================================================================== */
.yt-facade-wrap { margin: 0; }
.yt-facade, .yt-facade__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.yt-facade:hover img { opacity: 1; }
.yt-facade__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 14px; background: var(--grad-warm); }
.yt-facade__play::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.yt-facade-wrap figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy); border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; padding-top: 56px; padding-bottom: 30px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .brand { margin-bottom: 18px; }
.site-footer__cols { gap: 32px !important; }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer__copy { margin-top: 40px !important; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; }

/* ==========================================================================
   Plain pages (legal)
   ========================================================================== */
.page-plain { padding-top: 64px; padding-bottom: 96px; }
.page-plain h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 32px; }
.page-plain h2 { font-size: 26px; font-weight: 600; margin-top: 40px; }
.page-plain h3 { font-size: 20px; font-weight: 700; }
.page-plain p, .page-plain li { color: #E6E7F2; }
.page-plain a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Beliefs header row + number size tweak */
.belief--head { border-top: 0 !important; padding: 0 0 12px !important; }
.belief--head p { margin: 0 !important; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .belief--head { display: none !important; } }
.stat__num { font-size: clamp(42px, 4.8vw, 66px); }

/* Constrained layout centres narrow children: keep titles/intros left-aligned on the content grid */
.is-layout-constrained > :is(.sec-title, .sec-intro, .eyebrow, .who-sub) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1180px)) / 2)) !important;
	margin-right: auto !important;
}
.clients.is-layout-constrained > .eyebrow, .r-closing.is-layout-constrained > .sec-title { margin-left: auto !important; margin-right: auto !important; }
.sec-title { text-wrap: balance; }

/* Logo strip: one row on desktop */
.logo-strip { gap: 30px clamp(24px, 2.8vw, 38px) !important; }
.is-layout-constrained > .sub-title { margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1180px)) / 2)) !important; margin-right: auto !important; }
.guests.is-layout-constrained > .sub-title { margin-left: auto !important; text-align: center; }
.btn, .btn-ghost, .panel, .panel * { box-sizing: border-box; }
@media (max-width: 520px) { .stat__num { font-size: 34px; } .stat { padding-right: 12px; } .stat + .stat { padding-left: 14px; } }
/* reCAPTCHA v2 invisible: badge hidden, disclosure text shown instead (allowed by Google) */
.mb-recaptcha { height: 0; overflow: hidden; }

/* Brand logo (image files supplied by Marion) */
.brand__logo { height: 40px; width: auto; display: block; }
@media (max-width: 599px) { .brand__logo { height: 30px; } }
.site-footer .brand__logo { height: 44px; }

/* Podcast */
.podcast__cover { margin: 0 0 26px !important; }
.podcast__cover img { width: 132px; height: 132px; object-fit: cover; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.podcast__videos { grid-template-columns: 1fr 1fr; gap: 18px !important; }
.podcast__videos > * { margin: 0 !important; }
.podcast__grid { align-items: center !important; }
@media (max-width: 600px) { .podcast__videos { grid-template-columns: 1fr; } }

/* Report: AppsFlyer logo in kicker + company logos */
.r-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.r-kicker img, .r-kicker__logo { height: 22px !important; width: auto !important; display: inline-block; vertical-align: middle; position: relative; top: 1px; }
.report-logos { justify-content: flex-start; gap: 30px 46px !important; margin-top: 0 !important; }
.report-logos img { height: 30px; }
.report-logos .rlogo--trailmix img { height: 46px; }
.report-logos .rlogo--ten-square-games img { height: 40px; }
.report-logos .rlogo--candivore img { height: 38px; }
.report-logos .rlogo--ag1 img { height: 30px; }
.report-logos .rlogo--innogames img { height: 26px; }
.report-logos .rlogo--axlebolt img { height: 22px; }
.rlogo-text { margin: 0 !important; font-size: 22px; font-weight: 800; letter-spacing: -.01em; opacity: .82; line-height: 1; }

/* Complianz consent banner in brand colours. Accept and Deny get equal weight (AEPD guidance). */
.cmplz-cookiebanner {
	--cmplz_banner_background_color: #0A0D2E;
	--cmplz_banner_border_color: rgba(255, 255, 255, .14);
	--cmplz_text_color: #E6E7F2;
	--cmplz_hyperlink_color: #FFFFFF;
	--cmplz_category_body_font_color: #E6E7F2;
	--cmplz_category_header_always_active_color: #62E0EA;
	--cmplz_category_header_title_font_color: #FFFFFF;
	--cmplz_category_header_active_font_color: #FFFFFF;
	--cmplz_category_open_icon_color: #FFFFFF;
	--cmplz_slider_active_color: #EE8B5E;
	--cmplz_button_accept_background_color: #FFFFFF;
	--cmplz_button_accept_border_color: #FFFFFF;
	--cmplz_button_accept_text_color: #03051F;
	--cmplz_button_deny_background_color: #FFFFFF;
	--cmplz_button_deny_border_color: #FFFFFF;
	--cmplz_button_deny_text_color: #03051F;
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: rgba(255, 255, 255, .45);
	--cmplz_button_settings_text_color: #FFFFFF;
	--cmplz_button_border_radius: 999px;
	--cmplz_banner_border_radius: 18px;
	font-family: var(--wp--preset--font-family--mulish) !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .45) !important;
}
.cmplz-cookiebanner .cmplz-title { color: #fff !important; font-weight: 700; }
.cmplz-cookiebanner .cmplz-close { color: #fff !important; }
.cmplz-cookiebanner .cmplz-btn { font-weight: 700 !important; text-transform: uppercase; letter-spacing: .02em; }
.cmplz-cookiebanner .cmplz-links a { color: var(--muted) !important; }
.report-logos .rlogo--trailmix img { height: 58px; }
.report-logos .rlogo--ten-square-games img { height: 62px; }
.report-logos .rlogo--candivore img { height: 52px; }
.r-kicker img, .r-kicker__logo { height: 26px !important; }
.report-logos .rlogo--bolt img { height: 42px; }
.report-logos .rlogo--gear-games img { height: 40px; }
.report-logos .rlogo--bytro img { height: 30px; }
.report-logos .rlogo--bolt img { height: 36px; }

/* ==========================================================================
   Round 3 feedback (4 Nov 2026)
   ========================================================================== */

/* Brand arrows (Marion's "Diagonal Arrow" files) */
:root {
	--arrow-orange: url(assets/img/arrow-orange.png);
	--arrow-blue: url(assets/img/arrow-blue.png);
	--arrow-green: url(assets/img/arrow-green.png);
	--arrow-purple: url(assets/img/arrow-purple.png);
}

/* Trusted by: sliding logo carousel (built by site.js; static wrap if reduced motion) */
.logo-strip.is-marquee {
	display: block !important; overflow: hidden; margin-top: 30px !important;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: mb-marquee var(--marquee-duration, 60s) linear infinite; }
.logo-strip.is-marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.marquee__set > .wp-block-image { margin: 0 !important; flex: none; }
@keyframes mb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-strip .logo--pixel-federation img { height: 46px; }
.logo-strip .logo--socialpoint img { height: 28px; }
.logo-strip .logo--99-games img { height: 25px; }
.logo-strip .logo--murka img { height: 38px; }
.logo-strip .logo--gold-town-games img { height: 44px; }
.logo-strip .logo--soba img { height: 28px; }
.logo-strip .logo--pocketworlds img { height: 24px; }
@media (max-width: 599px) {
	.marquee__set { gap: 40px; padding-right: 40px; }
	.logo-strip.is-marquee img { transform: none; }
}

/* Numbers: centred, bold, no dividers, caps labels */
.stats { border-top: 0 !important; }
.stat, .stat + .stat { border: 0 !important; padding: 18px 12px 6px !important; text-align: center; }
.stat:nth-child(n+3) { border-top: 0 !important; }
.stat__num { font-weight: 800; margin-left: auto !important; margin-right: auto !important; letter-spacing: -.03em; }
.stat__label { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 700; }

/* Why it works: no strikethrough, arrow markers, photo aligned with the table */
.belief__q { text-decoration: none; color: var(--muted); font-style: italic; }
.belief__a::before { clip-path: none; background: var(--arrow-orange) center / contain no-repeat !important; width: 16px; height: 16px; top: 6px; }
.belief:nth-child(2) .belief__a::before { background-image: var(--arrow-blue) !important; }
.belief:nth-child(3) .belief__a::before { background-image: var(--arrow-green) !important; }
.belief:nth-child(4) .belief__a::before { background-image: var(--arrow-purple) !important; }
.why__grid { align-items: flex-start !important; margin-top: 6px !important; }

/* What you get: arrow icons + hover */
.benefit::before { clip-path: none; width: 34px; height: 34px; background: var(--arrow-orange) center / contain no-repeat !important; }
.benefit:nth-child(2)::before { background-image: var(--arrow-blue) !important; }
.benefit:nth-child(3)::before { background-image: var(--arrow-green) !important; }
.benefit:nth-child(4)::before { background-image: var(--arrow-purple) !important; }
.benefit, .offer, .quotes .wp-block-quote { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s, background-color .25s; }
.benefit:hover, .quotes .wp-block-quote:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 18px 40px rgba(3, 5, 31, .12), 0 0 0 1px rgba(3, 5, 31, .06); }
.offer:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .32); box-shadow: 0 22px 50px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .benefit:hover, .offer:hover, .quotes .wp-block-quote:hover { transform: none; } }

/* Report page list bullets use the arrows too */
.learn li::before { clip-path: none; border-radius: 0; background: var(--arrow-orange) center / contain no-repeat !important; }
.learn li:nth-child(2)::before { background-image: var(--arrow-blue) !important; }
.learn li:nth-child(3)::before { background-image: var(--arrow-green) !important; }
.learn li:nth-child(4)::before { background-image: var(--arrow-purple) !important; }
.learn li:nth-child(5)::before { background-image: var(--arrow-orange) !important; }

/* How I work: centred line + CTA below */
.how__after { display: block !important; text-align: center; margin-top: 44px !important; }
.how__after p { margin: 0 0 18px !important; }
.how__after .wp-block-buttons { justify-content: center; }

/* Bold "Let's talk" buttons */
.wp-block-button.is-bold > .wp-block-button__link { font-weight: 800; }

/* Testimonials: round B&W portraits next to name + role */
.quotes .wp-block-quote cite { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; }
.quotes .wp-block-quote cite .quote__avatar, .quotes .wp-block-quote cite img { grid-row: 1 / span 2; width: 52px !important; height: 52px !important; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.quotes .wp-block-quote cite strong { align-self: end; }

/* Podcast: big cover, "Podcast" label under it, no title */
.podcast__cover { margin: 0 0 22px !important; }
.podcast__cover img { width: 100%; max-width: 340px; height: auto; aspect-ratio: 1; border-radius: 20px; }
.podcast .eyebrow { margin-bottom: 12px !important; }

/* Form fine print links: same grey as the sentence */
.panel .recaptcha-note a, .sec--white .panel .recaptcha-note a { color: var(--muted) !important; }
.sec--white .panel .consent a { color: #fff !important; }
.stat__num { white-space: nowrap; font-size: clamp(34px, 4.2vw, 58px) !important; }
.logo-strip .logo--truplay img { height: 30px; }

/* ==========================================================================
   Round 4 feedback
   ========================================================================== */

/* Carousel waits for the first scroll (site.js adds .is-running) */
.marquee__track { animation-play-state: paused; }
.logo-strip.is-marquee.is-running .marquee__track { animation-play-state: running; }
.logo-strip.is-marquee.is-running:hover .marquee__track { animation-play-state: paused; }

/* Numbers: lighter than 800, heavier than the original 300 */
.stat__num { font-weight: 600 !important; }

/* Single-line section title */
.sec-title--wide { max-width: none !important; }

/* Testimonials: tighter cards, less space around the section */
.quotes .wp-block-quote { gap: 14px; padding: 26px 26px 22px; }
.quotes .wp-block-quote p { flex: 0 1 auto; }
.quotes .wp-block-quote cite { margin-top: auto !important; padding-top: 6px; }
#testimonials { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); }
#how { padding-bottom: clamp(56px, 7vw, 84px); }
.teaser-wrap { padding-top: clamp(48px, 6vw, 72px); }

/* Footer: compact, four columns */
.site-footer { padding-top: 36px; padding-bottom: 20px; font-size: 14px; }
.site-footer .brand { margin-bottom: 12px; }
.site-footer .brand__logo { height: 36px; }
.site-footer__cols { gap: 24px !important; }
.site-footer__links { gap: 4px; }
.site-footer__contact { margin-top: 0 !important; line-height: 1.6; }
.site-footer__copy { margin-top: 22px !important; padding-top: 14px; }
@media (max-width: 781px) {
	.site-footer__cols { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px 24px !important; }
	.site-footer__cols > .wp-block-column:first-child { grid-column: 1 / -1; }
}

/* Round 5: hero CTAs above the fold on desktop, slimmer numbers band */
.hero { padding-top: clamp(24px, 3vw, 36px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero__title { font-size: clamp(40px, 5vw, 64px); margin-bottom: 22px !important; }
.hero .wp-block-buttons { margin-top: 26px !important; }
@media (min-width: 782px) {
	.hero__photo img { aspect-ratio: auto; height: min(560px, calc(100vh - var(--header-h) - 90px)); min-height: 380px; }
}
.sec--numbers { padding-top: clamp(32px, 4vw, 54px); padding-bottom: clamp(32px, 4vw, 54px); }
@media (min-width: 782px) and (max-height: 720px) { .hero__title { font-size: clamp(40px, 4.3vw, 58px); margin-bottom: 18px !important; } .hero .eyebrow { margin-bottom: 12px !important; } .hero .wp-block-buttons { margin-top: 22px !important; } }

/* ==========================================================================
   Why it works v2: stat-led answers + interactive CPI chart
   ========================================================================== */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

#why .belief { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: start; padding: 26px 0; }
#why .belief--head { padding: 0 0 12px !important; }
#why .belief__q { font-size: 19px; padding-top: 6px; }
.belief__answer { margin: 0 !important; display: grid !important; gap: 8px !important; }
.belief__answer > * { margin: 0 !important; }
.why-stats { display: flex !important; flex-wrap: wrap; gap: 6px 34px !important; margin-bottom: 4px !important; }
.why-stat { margin: 0 !important; }
.why-stat > * { margin: 0 !important; }
.why-stat__num {
	font-size: clamp(38px, 4vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -.03em; width: fit-content;
	background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.belief:nth-child(2) .why-stat__num { background-image: var(--grad-cool); }
.belief:nth-child(3) .why-stat__num { background-image: var(--grad-mint); }
.why-stat__label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 6px !important; max-width: 30ch; }
#why .belief__a { font-size: 17px; font-weight: 400; color: #E6E7F2; padding-left: 0; line-height: 1.55; }
#why .belief__a::before { display: none; }
.belief__source { font-size: 12.5px; color: var(--muted); line-height: 1.45; opacity: .85; }
#why .why__grid { gap: clamp(32px, 4vw, 56px) !important; }
@media (min-width: 782px) {
	#why .why__chart { position: sticky; top: calc(var(--header-h) + 20px); }
}
@media (max-width: 700px) {
	#why .belief { grid-template-columns: 1fr; gap: 10px !important; }
}

/* CPI chart */
.cpi-chart { margin: 0; background: var(--navy-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 18px; position: relative; font-family: var(--wp--preset--font-family--mulish); }
.cpi-chart::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 3px; background: var(--grad-warm); }
.cpi-chart__title { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0 0 16px; color: #fff; }
.cpi-chart__legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cpi-chart__key, .cpi-chart__reset {
	font: inherit; font-size: 13px; font-weight: 600; color: #E6E7F2; background: transparent; cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px; line-height: 1.2;
	transition: border-color .15s, background-color .15s, opacity .15s;
}
.cpi-chart__key:hover { border-color: rgba(255, 255, 255, .5); }
.cpi-chart__swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.cpi-chart__key[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); color: #fff; }
.cpi-chart[data-active]:not([data-active=""]) .cpi-chart__key[aria-pressed="false"] { opacity: .55; }
.cpi-chart__reset { border-style: dashed; color: var(--muted); }
.cpi-chart__key:focus-visible, .cpi-chart__reset:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.cpi-chart__plot { position: relative; }
.cpi-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.cpi-chart__grid { stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.cpi-chart__tick { fill: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 600; }
.cpi-chart__axis { fill: rgba(255, 255, 255, .6); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cpi-chart__line { fill: none; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; transition: stroke .2s, opacity .2s, stroke-width .2s; }
.cpi-chart__hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }
.cpi-chart__pt { fill: var(--c); stroke: var(--navy-2); stroke-width: 2; cursor: pointer; transition: fill .2s, opacity .2s, r .15s; }
.cpi-chart__pt.is-hover { r: 7; }
.cpi-chart__series.is-dim .cpi-chart__line { stroke: #6B6E8A; opacity: .4; }
.cpi-chart__series.is-dim .cpi-chart__pt { fill: #6B6E8A; opacity: .4; }
.cpi-chart__series.is-active .cpi-chart__line { stroke-width: 4; }
.cpi-chart__tip {
	position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; white-space: nowrap;
	background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; padding: 7px 11px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); z-index: 2;
}
.cpi-chart__source { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .cpi-chart__line, .cpi-chart__pt { transition: none; } }
.cpi-chart__reset[hidden], .cpi-chart__tip[hidden] { display: none !important; }
.cpi-chart__tick { font-size: 14px; }
.cpi-chart__axis { font-size: 12.5px; }
.why-stat__label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
@media (min-width: 782px) { #why .why__grid { align-items: stretch !important; } #why .why__grid > .wp-block-column:last-child { align-self: stretch; } }
@media (max-width: 600px) {
	.cpi-chart { padding: 20px 14px 14px; }
	.cpi-chart::before { left: 14px; right: 14px; }
	.cpi-chart__title { font-size: 17px; }
	.cpi-chart__tick { font-size: 21px; }
	.cpi-chart__axis { font-size: 17px; }
	.cpi-chart__key, .cpi-chart__reset { font-size: 12.5px; padding: 5px 10px; }
}
@media (max-width: 600px) { .cpi-chart__axis--y { display: none; } }
.cpi-chart__tip { white-space: pre-line; text-align: center; line-height: 1.35; max-width: 100%; }
.cpi-chart__tip { width: max-content; max-width: min(280px, 100%); }

/* Why it works: numbers inline, same size as the sentence, just coloured */
#why .belief__a strong {
	font-weight: 700; font-size: inherit;
	background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
#why .belief:nth-child(2) .belief__a strong { background-image: var(--grad-cool); }
#why .belief:nth-child(3) .belief__a strong { background-image: var(--grad-mint); }
#why .belief__answer { gap: 6px !important; }

/* Count-up numbers: fixed-width digits so the row doesn't wobble while counting */
.stat__num { font-variant-numeric: tabular-nums; }

/* Why it works: title on a single line on desktop */
@media (min-width: 900px) {
	.sec-title--oneline { max-width: none !important; white-space: nowrap; font-size: min(38px, 3.05vw) !important; }
}
@media (min-width: 900px) { .sec-title--oneline { max-width: var(--wp--style--global--content-size, 1180px) !important; } }

/* Why it works: the table stretches to the height of the chart (desktop) */
@media (min-width: 782px) {
	#why .why__grid > .wp-block-column:first-child { display: flex; flex-direction: column; }
	#why .beliefs { flex: 1; display: grid !important; grid-template-rows: repeat(3, 1fr); }
	#why .beliefs > .belief { align-content: center; }
}

/* Why work with me: tighter top/bottom spacing */
.sec--why-me { padding-top: clamp(48px, 5vw, 68px); padding-bottom: clamp(48px, 5vw, 68px); }

/* How I work: timeline line (same style as "Best for", above the divider) + closing CTA */
.offer__meta { margin-top: 14px !important; color: var(--muted) !important; font-size: 16px; }
.offer__meta strong { color: #fff; }
.offer__meta + .offer__fit { margin-top: 16px !important; }
#how .how__after { margin-top: clamp(40px, 5vw, 56px) !important; padding-bottom: 8px; position: relative; z-index: 1; }
#how .how__after p { font-size: 19px; margin: 0 auto 20px !important; max-width: 40ch; }
#how .how__after .wp-block-buttons { display: flex; justify-content: center; margin: 0 !important; }

/* Hero photo shapes: orange top-left (at the blue one's height), blue bottom-right (at the orange one's old height) */
.hero__photo::before { top: 38px; bottom: auto; }
.hero__photo::after { top: auto; bottom: 54px; }

/* How I work: tighter top so the closing CTA is above the fold when landing on #how */
#how { padding-top: clamp(36px, 3.5vw, 44px); }
#how .sec-title { margin-bottom: 16px !important; }
#how .offers { margin-top: 26px !important; }
#how .how__after { margin-top: clamp(28px, 3vw, 36px) !important; }
#how .how__after p { margin-bottom: 16px !important; }
html { scroll-padding-top: calc(var(--header-h) - 1px); }

/* Testimonials: key phrase bold by default, brand gradient on card hover.
   Same card hover as "Why work with me?" (shared rules above). */
.quotes .wp-block-quote p strong {
	font-weight: 700; color: var(--ink);
	background: var(--grad-warm); -webkit-background-clip: text; background-clip: text;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
	transition: color .3s ease;
}
.quotes .wp-block-quote:hover p strong, .quotes .wp-block-quote:focus-within p strong { color: transparent; }
@media (hover: none) { .quotes .wp-block-quote p strong { color: transparent; } }
@media (prefers-reduced-motion: reduce) { .quotes .wp-block-quote p strong { transition: none; } }
/* Equal-height cards per row, author block pinned to the bottom */
.quotes { align-items: stretch; }
.quotes .wp-block-quote { height: 100%; }

/* Report teaser: report cover as a tilted document mockup on the right */
.teaser__card { overflow: visible; }
.teaser__grid { align-items: center !important; gap: clamp(28px, 4vw, 56px) !important; margin: 0 !important; }
.teaser__cover { margin: 0 !important; }
.teaser__cover img {
	display: block; width: 100%; height: auto; border-radius: 12px;
	box-shadow: 0 28px 60px rgba(0, 0, 0, .55), 0 8px 18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .16);
	transform: rotate(-4deg);
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.teaser__card:hover .teaser__cover img {
	transform: rotate(-1.5deg) translateY(-8px);
	box-shadow: 0 38px 70px rgba(0, 0, 0, .6), 0 10px 22px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .2);
}
@media (min-width: 782px) {
	/* overlap past the card's right edge for depth */
	.teaser__cover { margin-right: calc(-1 * clamp(36px, 6vw, 72px) - 28px) !important; }
}
@media (max-width: 781px) {
	.teaser__grid > .wp-block-column:last-child { order: -1; }
	.teaser__cover { max-width: 320px; margin: 0 auto !important; }
	.teaser__cover img, .teaser__card:hover .teaser__cover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.teaser__cover img { transition: none; }
	.teaser__card:hover .teaser__cover img { transform: rotate(-4deg); }
}

/* Gradient button (blue -> purple) with hover animation */
.wp-block-button.btn-cool > .wp-block-button__link {
	background: linear-gradient(110deg, var(--blue) 0%, var(--purple) 50%, var(--blue) 100%);
	background-size: 200% 100%; background-position: 0% 50%;
	color: #fff; border: 0; font-weight: 700;
	transition: background-position .5s ease, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.wp-block-button.btn-cool > .wp-block-button__link:hover,
.wp-block-button.btn-cool > .wp-block-button__link:focus-visible {
	background-position: 100% 50%; transform: translateY(-2px); filter: none;
	box-shadow: 0 10px 26px rgba(142, 60, 224, .45);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button.btn-cool > .wp-block-button__link { transition: none; }
	.wp-block-button.btn-cool > .wp-block-button__link:hover { transform: none; }
}

/* Podcast: left block (cover -> CTA) matches the height of the episodes grid */
@media (min-width: 782px) {
	.podcast__grid { align-items: stretch !important; }
	.podcast__grid > .wp-block-column:first-child { display: flex; flex-direction: column; justify-content: space-between; }
	.podcast__grid > .wp-block-column:first-child > * { margin-top: 0 !important; margin-bottom: 0 !important; }
	.podcast__cover img { max-width: var(--podcast-cover, 210px); }
	.podcast__grid > .wp-block-column:first-child p { margin: 14px 0 !important; font-size: 17px; }
}

/* Contact: "Book a call" as a secondary (outline) button */
.contact__alt { margin-top: 30px !important; margin-bottom: 10px !important; font-weight: 600; }
.contact__book { margin-top: 0 !important; margin-bottom: 18px !important; }
@media (min-width: 782px) {
	.podcast__grid > .wp-block-column:first-child { justify-content: flex-start; }
	.podcast__grid > .wp-block-column:first-child > .podcast__cover { flex: 1 1 0; min-height: 0; display: flex; }
	.podcast__cover img { height: 100% !important; width: auto !important; max-width: 100% !important; aspect-ratio: 1; object-fit: cover; }
	.podcast__grid > .wp-block-column:first-child > .wp-block-buttons { margin-top: auto !important; }
}
/* Guest strip: 7 logos on one line on desktop */
@media (min-width: 1000px) {
	.guest-strip { flex-wrap: nowrap !important; gap: 0 clamp(18px, 2.4vw, 34px) !important; }
	.guest-strip img { height: 50px; }
	.guest-strip .guest--square img { height: 74px; }
	.guest-strip .guest--ua-legends img { height: 58px; }
	.guest-strip .guest--appsflyer img { height: 34px; }
}

/* "Let's talk" buttons (.is-bold): same animated gradient as "Watch all episodes", in orange -> pink */
.wp-block-button.is-bold > .wp-block-button__link {
	background: linear-gradient(110deg, var(--orange) 0%, var(--pink) 50%, var(--orange) 100%);
	background-size: 200% 100%; background-position: 0% 50%;
	color: #fff; border: 0;
	transition: background-position .5s ease, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.wp-block-button.is-bold > .wp-block-button__link:hover,
.wp-block-button.is-bold > .wp-block-button__link:focus-visible {
	background-position: 100% 50%; transform: translateY(-2px); filter: none;
	box-shadow: 0 10px 26px rgba(233, 90, 146, .45);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-bold > .wp-block-button__link { transition: none; }
	.wp-block-button.is-bold > .wp-block-button__link:hover { transform: none; }
}

/* Tighter vertical rhythm: every homepage section uses the same top/bottom space as "How I work" above its title */
:root { --sec-pad-tight: clamp(36px, 3.5vw, 44px); }
.site-main--landing > section.wp-block-group:not(.hero) {
	padding-top: var(--sec-pad-tight) !important;
	padding-bottom: var(--sec-pad-tight) !important;
}
.site-main--landing > section.hero { padding-bottom: var(--sec-pad-tight) !important; }
.sec-title { margin-bottom: 22px !important; }

/* Report teaser: more compact card so it fits on screen */
.teaser__card { padding: clamp(28px, 3vw, 40px) clamp(28px, 4vw, 52px) !important; }
.teaser__card .sec-title { font-size: clamp(34px, 3.6vw, 48px); margin-bottom: 14px !important; }
.teaser__card p:not(.eyebrow) { font-size: 17.5px; }
.teaser__card .wp-block-buttons { margin-top: 22px !important; }
@media (min-width: 782px) {
	.teaser__cover { margin-right: calc(-1 * clamp(28px, 4vw, 52px) - 28px) !important; }
}

/* Form buttons ("Send", "Get the report", "Download") + "Get the free report": same animated gradient as "Let's talk" */
.btn, .btn.full {
	background: linear-gradient(110deg, var(--orange) 0%, var(--pink) 50%, var(--orange) 100%);
	background-size: 200% 100%; background-position: 0% 50%; font-weight: 800;
	transition: background-position .5s ease, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.btn:hover, .btn:focus-visible { background-position: 100% 50%; transform: translateY(-2px); filter: none; box-shadow: 0 10px 26px rgba(233, 90, 146, .45); }
.btn[disabled]:hover { transform: none; box-shadow: none; }
.wp-block-button.is-bold > .wp-block-button__link { font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
	.btn { transition: none; }
	.btn:hover { transform: none; }
}

/* Report page: numbers in the landing-page style, on navy, 3 columns */
.stats--dark { margin-top: 8px !important; }
.stats--3 { grid-template-columns: repeat(3, 1fr) !important; }
.stats--dark .stat__label { color: var(--muted); max-width: 28ch; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 700px) { .stats--3 { grid-template-columns: 1fr !important; } .stats--3 .stat { padding: 14px 0 !important; } }
.r-source { text-align: center; margin-top: 22px !important; }
.r-sec .sec-title--wide { max-width: none !important; }

/* Report page: "Who's in it" subtitle on one line, logos in a 5 x 3 grid (no orphan) */
.who-sub { max-width: none !important; }
.report-logos { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 34px 28px !important; align-items: center; justify-items: center; }
.report-logos > * { margin: 0 !important; }
@media (max-width: 781px) { .report-logos { grid-template-columns: repeat(3, 1fr); gap: 26px 18px !important; } .report-logos img { max-width: 100%; height: auto; max-height: 30px; } }
.stats--3 .stat__label { max-width: 36ch; }
@media (max-width: 781px) { .teaser__cover { max-width: 230px; } .teaser__card { padding: 24px 22px !important; } .teaser__card .sec-title { font-size: 32px; } .teaser__card p:not(.eyebrow) { font-size: 16px; } }

/* Report hero: subtitle no wider than the "The Undercounted" line (desktop) */
.r-titleblock { margin: 0 !important; }
.r-titleblock > * { margin-top: 0 !important; }
@media (min-width: 782px) {
	.r-titleblock { width: fit-content; max-width: 100%; }
	.r-titleblock .r-lede { width: 0; min-width: 100%; max-width: none; }
}

/* "Inside the report": bold title + one line, brand-arrow icons, dividers, 2 columns on desktop */
.learn--cards { max-width: none; display: grid; grid-template-columns: 1fr; column-gap: 48px; }
.learn--cards li { display: block; position: relative; padding: 20px 0 20px 34px; font-size: 17px; line-height: 1.5; color: var(--muted); }
.learn--cards li::before { position: absolute; left: 0; top: 25px; margin: 0; }
.learn--cards li strong { display: inline-block; color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 2px; }
.learn--cards li:nth-child(6)::before { background-image: var(--arrow-blue) !important; }
.learn--cards li:nth-child(7)::before { background-image: var(--arrow-green) !important; }
@media (min-width: 782px) {
	.learn--cards { grid-template-columns: 1fr 1fr; }
	.learn--cards li:last-child { grid-column: 1 / -1; }
}

/* Bio link */
.r-about__cta { margin-top: 14px !important; font-weight: 700; }
.r-about__cta a { color: #fff; text-decoration: none; background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r-about__cta a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 4px; }
.learn--cards { max-width: var(--wp--style--global--content-size, 1180px) !important; margin-left: auto !important; margin-right: auto !important; }

/* Report numbers: comparison on its own line, regular weight */
.stat__label + .stat__sub { margin-top: 4px !important; }
.stat__sub { color: var(--muted); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; margin-bottom: 0 !important; }

/* "Inside the report": same cards as "Why work with me?" (white section, .benefits/.benefit) */
.r-inside { border-top: 0; }
.benefit:nth-child(5)::before { background-image: var(--arrow-orange) !important; }
.benefit:nth-child(6)::before { background-image: var(--arrow-blue) !important; }


/* Report page alternation: hero navy · data white · inside navy · who white · bio navy · closing white */
.r-sec.sec--white { border-top: 0; }
.r-data .stat__sub, .r-data .r-source { color: var(--ink-muted); }
.r-data .stat__label { color: var(--ink-muted); }

/* "Inside the report" cards on navy: same card layout, dark variant */
.sec--navy .benefit { background: var(--navy-2); border: 1px solid var(--line); }
.sec--navy .benefit h3 { color: #fff; }
.sec--navy .benefit p { color: var(--muted); }
.sec--navy .benefit:hover { background: var(--navy-2); border-color: rgba(255, 255, 255, .3); box-shadow: 0 22px 50px rgba(0, 0, 0, .45); }

/* "Who's in it" on white: logos shown in navy */
.r-who .report-logos img { filter: brightness(0) saturate(100%) invert(6%) sepia(30%) saturate(3000%) hue-rotate(225deg); opacity: .85; }
.r-who .who-sub { color: var(--ink-muted); }

/* Closing on white */
.r-closing.sec--white .sec-title { color: var(--ink); }

/* Numbers: keep every line under the figure centred (labels have a max width) */
.stat > .stat__label, .stat > .stat__sub { margin-left: auto !important; margin-right: auto !important; }

/* Mobile menu: the header blur would trap the full-screen menu inside the header strip */
html.has-modal-open .site-header,
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--navy); }

/* Why it works: more room between the title and the table/chart */
#why .sec-title { margin-bottom: clamp(32px, 3.4vw, 48px) !important; }

/* About removed: guest logos and Contact are both white, separate them with a thin line */
.guests + .contact { border-top: 1px solid var(--line-light, #e4e5ee); }