/* =====================================================================
   DBY Theme — reusable design system
   Apply these classes to Elementor elements via Advanced > CSS Classes,
   or use them directly in HTML widgets. Global typography/colors come
   from the Elementor Kit; these classes add the DBY components.
   ===================================================================== */

:root {
	--navy: #004077;
	--navy-deep: #00305c;
	--terra: #E77241;
	--terra-deep: #c95c2c;
	--cream: #F4F0EB;
	--cream-deep: #ece5d9;
	--sky: #66D9E8;
	--sky-aa: #1B8FA6;
	--peach: #F0C6AB;
	--ink: #2C2C2C;
	--white: #ffffff;
	--lift: 0 24px 48px -12px rgba(15, 23, 42, .18);
	--dby-font: 'Nunito Sans', ui-sans-serif, -apple-system, "Segoe UI", Arial, sans-serif;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

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

body {
	text-rendering: optimizeLegibility;
}

/* ---- Section rhythm & measure helpers ---- */
.dby-section:not(.e-con) { padding: clamp(56px, 8vw, 92px) 0; }
.dby-section-flush { padding: 0; }
.measure { max-width: 70ch; margin-left: auto; margin-right: auto; }
.measure-text p, .measure p { max-width: 65ch; }
.center .measure p, .center p { margin-left: auto; margin-right: auto; }
.lead, .lead p { font-weight: 700; line-height: 1.5; }
.micro, .micro p { font-size: 16px; color: #5a5854; }
.on-navy .micro, .on-navy .micro p { color: rgba(255, 255, 255, .7); }

/* ---- Color bands (apply to top-level containers) ---- */
.band-cream { background-color: var(--cream); }
.band-white { background-color: var(--white); }
.band-navy { background-color: var(--navy); }
.band-navy-deep { background-color: var(--navy-deep); }
.band-hero { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }

.on-navy h1, .on-navy h2, .on-navy h3,
.on-navy .elementor-heading-title { color: #fff; }
.on-navy p, .on-navy li { color: rgba(255, 255, 255, .92); }
.on-navy a { color: #fff; }

/* ---- Dot texture (apply .dby-dots or .dby-dots-navy to a container) ---- */
.dby-dots, .dby-dots-navy { position: relative; overflow: hidden; }
.dby-dots::before, .dby-dots-navy::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .35) 1.4px, transparent 1.4px);
	background-size: 22px 22px;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: radial-gradient(ellipse 60% 90% at 100% 0%, black 30%, transparent 72%), radial-gradient(ellipse 60% 90% at 0% 100%, black 30%, transparent 72%);
	mask-image: radial-gradient(ellipse 60% 90% at 100% 0%, black 30%, transparent 72%), radial-gradient(ellipse 60% 90% at 0% 100%, black 30%, transparent 72%);
}
.dby-dots-navy::before {
	background-image: radial-gradient(rgba(0, 64, 119, .16) 1.4px, transparent 1.4px);
}
.dby-dots > *, .dby-dots-navy > * { position: relative; z-index: 1; }

/* ---- Rounded panel (inner card on a band) ---- */
.panel {
	border-radius: 36px;
	position: relative;
	overflow: hidden;
	padding: 72px 56px;
}
.panel.band-white, .panel-white { background: var(--white); }
@media (max-width: 900px) {
	.panel { padding: 44px 26px; border-radius: 26px; }
}

/* =====================================================================
   Eyebrow pill  (class: eyebrow-pill [+ on-navy inherited from band])
   Works on an Elementor Heading widget or a raw <span>/<div>.
   ===================================================================== */
.elementor-widget.eyebrow-pill .elementor-heading-title,
.eyebrow-pill:not(.elementor-widget) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--white);
	border: 1.5px solid var(--cream-deep);
	padding: 8px 18px;
	border-radius: 9999px;
	font-family: var(--dby-font);
	font-weight: 900;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--terra);
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .15);
}
.elementor-widget.eyebrow-pill { margin-bottom: 18px; }
.elementor-widget.eyebrow-pill .elementor-heading-title::before,
.eyebrow-pill:not(.elementor-widget)::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--terra);
	flex: none;
}
.on-navy .elementor-widget.eyebrow-pill .elementor-heading-title,
.on-navy .eyebrow-pill:not(.elementor-widget) {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .25);
	color: var(--sky);
	box-shadow: none;
}
.on-navy .elementor-widget.eyebrow-pill .elementor-heading-title::before,
.on-navy .eyebrow-pill:not(.elementor-widget)::before { background: var(--sky); }

/* =====================================================================
   Pill buttons (class: pill-btn + terracotta|navy|outline-navy|outline-white|white)
   Works on an Elementor Button widget (icon aligned right) or raw <a>/<button>.
   ===================================================================== */
.pill-btn a.elementor-button,
a.pill-btn, button.pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 12px 12px 30px;
	font-family: var(--dby-font);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.2;
	border-radius: 9999px;
	text-decoration: none;
	transition: transform .18s ease, background .18s ease;
	max-width: 100%;
	cursor: pointer;
	border: none;
}
.pill-btn a.elementor-button:hover,
a.pill-btn:hover, button.pill-btn:hover { transform: translateY(-2px); }

.pill-btn a.elementor-button .elementor-button-icon,
.pill-btn .ic {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
}
/* Raw-HTML pills keep the icon last regardless of markup order. */
.pill-btn .ic { order: 2; }
.pill-btn a.elementor-button .elementor-button-icon svg { width: 1em; height: 1em; fill: currentColor; }
/* Elementor renders the icon first in the DOM and relies on the wrapper's
   row-reverse (icon_align: right) to paint it after the text — don't add
   order rules here, they cancel the reversal and put the arrow first. */
.pill-btn a.elementor-button .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 14px; }

.pill-btn:focus-visible, .pill-btn a.elementor-button:focus-visible {
	outline: 3px solid var(--sky-aa);
	outline-offset: 3px;
}

/* Terracotta */
.pill-btn.terracotta a.elementor-button, a.pill-btn.terracotta, button.pill-btn.terracotta {
	background: var(--terra); color: var(--white);
	box-shadow: 0 16px 32px -12px rgba(231, 114, 65, .55);
}
.pill-btn.terracotta a.elementor-button .elementor-button-icon,
.pill-btn.terracotta .ic { background: var(--white); color: var(--terra); }
.pill-btn.terracotta a.elementor-button:hover, a.pill-btn.terracotta:hover, button.pill-btn.terracotta:hover { background: var(--terra-deep); color: var(--white); }

/* Navy */
.pill-btn.navy a.elementor-button, a.pill-btn.navy {
	background: var(--navy); color: var(--white);
}
.pill-btn.navy a.elementor-button .elementor-button-icon,
.pill-btn.navy .ic { background: var(--terra); color: var(--white); }
.pill-btn.navy a.elementor-button:hover, a.pill-btn.navy:hover { background: var(--navy-deep); color: var(--white); }

/* Outline navy */
.pill-btn.outline-navy a.elementor-button, a.pill-btn.outline-navy {
	background: transparent; color: var(--navy);
	border: 2px solid var(--navy);
	padding: 10px 10px 10px 28px;
}
.pill-btn.outline-navy a.elementor-button .elementor-button-icon,
.pill-btn.outline-navy .ic { background: var(--navy); color: var(--white); }

/* Outline white */
.pill-btn.outline-white a.elementor-button, a.pill-btn.outline-white {
	background: transparent; color: var(--white);
	border: 2px solid rgba(255, 255, 255, .6);
	padding: 10px 10px 10px 28px;
}
.pill-btn.outline-white a.elementor-button .elementor-button-icon,
.pill-btn.outline-white .ic { background: var(--white); color: var(--navy); }

/* White */
.pill-btn.white a.elementor-button, a.pill-btn.white {
	background: var(--white); color: var(--navy);
	box-shadow: 0 18px 36px -14px rgba(0, 10, 30, .5);
}
.pill-btn.white a.elementor-button .elementor-button-icon,
.pill-btn.white .ic { background: var(--terra); color: var(--white); }
.pill-btn.white a.elementor-button:hover, a.pill-btn.white:hover { background: var(--cream); color: var(--navy); }

/* Compact pill (cards, nav) */
.pill-sm a.elementor-button, a.pill-btn.pill-sm {
	font-size: 16px; padding: 9px 9px 9px 24px;
}
.pill-sm a.elementor-button .elementor-button-icon, .pill-btn.pill-sm .ic { width: 38px; height: 38px; }

/* Button rows */
.btn-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.e-con.e-con.btn-row { --gap: 18px; }
.center .btn-row, .btn-row.center { justify-content: center; }

/* Text link */
.textlink a, a.textlink {
	display: inline-block;
	font-weight: 800;
	font-size: 18px;
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* =====================================================================
   Floating pill navigation (header template)
   ===================================================================== */
.dby-nav-shell {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 999;
	padding: 18px 20px;
	transition: padding .25s ease;
}
body.admin-bar .dby-nav-shell { top: 32px; }
@media (max-width: 782px) { body.admin-bar .dby-nav-shell { top: 46px; } }

.dby-nav-shell .e-con.e-con.nav-pill {
	max-width: 1180px;
	margin: 0 auto;
	background: var(--white);
	border-radius: 9999px;
	box-shadow: 0 14px 34px -18px rgba(0, 30, 60, .35);
	padding: 10px 10px 10px 22px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 16px;
	position: relative;
	transition: max-width .25s ease, border-radius .25s ease, padding .25s ease;
}
.dby-nav-shell.stuck { padding: 0; }
.dby-nav-shell.stuck .e-con.e-con.nav-pill {
	max-width: 100%;
	border-radius: 0;
	padding: 10px 24px;
	box-shadow: 0 10px 26px -14px rgba(0, 30, 60, .35);
}
.nav-pill .nav-logo { width: auto; flex: none; }
.nav-pill .nav-logo img { height: 36px; width: auto; }
.nav-pill .nav-logo .elementor-widget-container { line-height: 0; }

/* Menu widget inside the pill */
.nav-pill .nav-links { width: auto; flex: 1 1 auto; min-width: 0; }
.nav-links ul.menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-links ul.menu li { position: relative; margin: 0; }
.nav-links ul.menu > li > a {
	color: var(--ink);
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.nav-links ul.menu > li > a:hover { color: var(--terra); }
.nav-links ul.menu > li.current-menu-item > a { color: var(--terra); }

/* Dropdown (submenu) */
.nav-links li.menu-item-has-children > a::after {
	content: "";
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
}
.nav-links ul.sub-menu {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--white);
	border: 1px solid var(--cream-deep);
	border-radius: 18px;
	box-shadow: var(--lift);
	padding: 10px;
	min-width: 170px;
	display: none;
	list-style: none;
	margin: 0;
	z-index: 10;
}
.nav-links li.menu-item-has-children:hover > ul.sub-menu,
.nav-links li.menu-item-has-children:focus-within > ul.sub-menu { display: block; }
.nav-links ul.sub-menu::before {
	content: "";
	position: absolute;
	top: -16px; left: 0; right: 0; height: 16px;
}
.nav-links ul.sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 12px;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	color: var(--navy);
	white-space: nowrap;
}
.nav-links ul.sub-menu a:hover { background: var(--cream); color: var(--navy); }

/* Nav CTA button */
.nav-pill .nav-cta { width: auto; flex: none; }
.nav-pill .nav-cta a.elementor-button { font-size: 15px; padding: 8px 8px 8px 22px; white-space: nowrap; }
.nav-pill .nav-cta a.elementor-button .elementor-button-icon { width: 36px; height: 36px; font-size: 17px; }

/* Mobile nav (toggle + panel are injected by dby.js) */
.nav-toggle {
	display: none;
	background: transparent;
	border: none;
	color: var(--navy);
	font-family: var(--dby-font);
	font-weight: 900;
	font-size: 13px;
	letter-spacing: .14em;
	cursor: pointer;
	flex-direction: row;
	align-items: center;
	gap: 9px;
	padding: 4px 6px;
}
.nav-toggle .bars { display: flex; flex-direction: column; gap: 4px; }
.nav-toggle .bars span { display: block; width: 26px; height: 3px; background: var(--navy); border-radius: 2px; }
.dby-mobile-menu { display: none; }
@media (max-width: 1020px) {
	.nav-pill .nav-links { display: none; }
	/* The bar's CTA moves into the dropdown (dby.js clones it there) */
	.nav-pill .nav-cta { display: none; }
	.nav-toggle { display: flex; margin-left: auto; }
	.dby-nav-shell .e-con.e-con.nav-pill { justify-content: space-between; gap: 12px; }
	.dby-mobile-menu.open {
		display: block;
		position: absolute;
		top: calc(100% + 10px);
		left: 0; right: 0;
		background: var(--white);
		border-radius: 26px;
		box-shadow: 0 24px 48px -18px rgba(0, 30, 60, .4);
		padding: 18px 24px;
		z-index: 20;
	}
	.dby-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
	.dby-mobile-menu li { position: relative; }
	.dby-mobile-menu a {
		display: block;
		padding: 12px 4px;
		font-weight: 800;
		font-size: 18px;
		color: var(--navy);
		text-decoration: none;
		border-bottom: 1px solid var(--cream);
	}
	.dby-mobile-menu > ul > li:last-child > a { border-bottom: none; }
	/* Parent items: sub-menu collapsed behind a chevron (dby.js adds the
	   button and toggles li.open) */
	.dby-mobile-menu li.menu-item-has-children > a { padding-right: 52px; }
	.dby-mobile-menu ul.sub-menu { display: none; }
	.dby-mobile-menu li.open > ul.sub-menu { display: block; }
	.dby-mobile-menu ul.sub-menu a { padding-left: 26px; font-size: 16px; color: var(--sky-aa); }
	.dby-mobile-menu ul.sub-menu li:last-child > a { border-bottom: 1px solid var(--cream); }
	.dby-mobile-menu > ul > li:last-child.open > ul.sub-menu li:last-child > a { border-bottom: none; }
	/* CTA at the foot of the dropdown, aligned with the menu items */
	.dby-mobile-menu .mobile-cta { width: auto; margin-top: 16px; }
	.dby-mobile-menu .mobile-cta .elementor-widget-container { display: flex; justify-content: flex-start; }
	.dby-mobile-menu .mobile-cta a.elementor-button {
		display: inline-flex;
		padding: 8px 8px 8px 22px;
		font-size: 15px;
		border-bottom: none;
		white-space: nowrap;
	}
	.dby-mobile-menu .mobile-cta a.elementor-button .elementor-button-icon { width: 36px; height: 36px; font-size: 17px; }
}
@media (max-width: 460px) {
	.nav-pill .nav-logo img { height: 28px; }
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero:not(.e-con) { padding-top: 150px; }
.hero .sub p, .hero .sub {
	font-size: clamp(21px, 2.2vw, 24px);
	font-weight: 700;
	color: var(--ink);
	max-width: 54ch;
}
.hero-img { position: relative; max-width: 430px; margin: 0 auto; }
.hero-img::before {
	content: "";
	position: absolute;
	width: 230px; height: 230px;
	border-radius: 50%;
	background: var(--terra);
	opacity: .18;
	top: -42px; right: -42px;
	z-index: 0;
}
.hero-img img {
	position: relative;
	z-index: 1;
	border-radius: 26px;
	box-shadow: 0 34px 64px -18px rgba(0, 10, 30, .35);
	width: 100%;
}

/* =====================================================================
   Media band ("As Featured In")
   ===================================================================== */
.media-band:not(.e-con) { padding: 34px 0; }
.media-band .e-con-inner, .e-con.e-con.media-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 14px 30px;
}
.media-label .elementor-heading-title, .media-label {
	color: var(--terra);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
}
.media-row .elementor-widget-image { width: auto; min-width: 0; }
.media-row img { height: 25px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 900px) {
	.e-con.e-con.media-row { flex-wrap: wrap; }
	.media-row img { height: auto; }
}

/* =====================================================================
   Imagery helpers
   ===================================================================== */
.photo img, img.photo {
	border-radius: 26px;
	box-shadow: 0 26px 52px -18px rgba(15, 23, 42, .22);
	width: 100%;
	object-fit: cover;
}
.book-shot img { filter: drop-shadow(0 30px 40px rgba(15, 23, 42, .28)); }
/* Softer drop shadow for transparent product mockups on pedestal tiles (Freebies guide cards). */
.dby-drop img { filter: drop-shadow(0 14px 22px rgba(15, 23, 42, .18)); }
.sticky-col { position: sticky; top: 120px; }
@media (max-width: 880px) { .sticky-col { position: static; } }

/* Stacked image pair */
.e-con.e-con.stack2 { display: flex; flex-direction: column; gap: 22px; }
.stack2 img { border-radius: 22px; box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .3); }
.stack2 > .elementor-widget-image:first-child { width: 86%; align-self: flex-end; }
.stack2 > .elementor-widget-image:last-child { width: 92%; align-self: flex-start; }

/* =====================================================================
   Checklist (Elementor Icon List widget, class: checklist)
   ===================================================================== */
.checklist ul.elementor-icon-list-items { display: flex; flex-direction: column; gap: 16px; max-width: 62ch; }
.checklist .elementor-icon-list-item { display: flex; align-items: flex-start; gap: 14px; }
.checklist .elementor-icon-list-icon {
	flex: none;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--terra);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
}
.checklist .elementor-icon-list-icon i,
.checklist .elementor-icon-list-icon svg {
	font-size: 13px;
	width: 14px; height: 14px;
	color: #fff;
	fill: #fff;
}
.on-navy .checklist .elementor-icon-list-icon { background: var(--sky); }
.on-navy .checklist .elementor-icon-list-icon i,
.on-navy .checklist .elementor-icon-list-icon svg { color: var(--navy-deep); fill: var(--navy-deep); }
.checklist .elementor-icon-list-text { font-weight: 600; font-size: 21px; line-height: 1.6; }

/* =====================================================================
   Testimonial cards & slider
   ===================================================================== */
.e-con.e-con.slider-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 26px;
	transition: transform .55s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .e-con.e-con.slider-track { transition: none; } }
.slider-viewport { overflow: hidden; border-radius: 24px; }
.e-con.e-con.t-card {
	flex: 0 0 calc(50% - 13px);
	background: var(--navy);
	color: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: var(--lift);
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
}
@media (max-width: 640px) { .e-con.e-con.t-card { flex: 0 0 100%; } }
.t-card .elementor-widget-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.e-con.e-con.t-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.stars .elementor-heading-title, .stars { color: var(--sky); font-size: 17px; letter-spacing: 3px; }
.t-body .t-quote p { font-size: 17.5px; line-height: 1.5; font-weight: 700; color: #fff; margin: 0; }
.t-quote { flex: 1; }
.t-body .t-cite { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 12px; }
.t-body .t-cite .elementor-heading-title, .t-body .t-cite { font-style: normal; font-weight: 800; color: #fff; font-size: 16px; }
.cred-quote .stars { color: var(--navy); }

/* Slider nav (injected by dby.js on .dby-slider) */
.slider-nav { display: flex; gap: 12px; margin-top: 24px; align-items: center; }
.slider-nav button {
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 2px solid var(--navy);
	background: transparent;
	color: var(--navy);
	font-size: 19px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.slider-nav button:hover { background: var(--navy); color: #fff; }
.slider-dots { display: flex; gap: 8px; align-items: center; margin-left: 10px; }
.slider-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 64, 119, .25); transition: background .2s ease; }
.slider-dots span.on { background: var(--terra); }

/* =====================================================================
   Testimonial marquee
   Add `dby-marquee` to an Elementor Loop Grid (Advanced → CSS Classes) to
   turn its grid into a single continuously scrolling row; add
   `dby-marquee-reverse` as well to run it right-to-left. dby.js clones the
   cards and sets --dby-marquee-shift / the duration from the real track
   width, so the pace stays the same as testimonials are added.
   ===================================================================== */
@keyframes dby-marquee { to { transform: translateX(var(--dby-marquee-shift, -50%)); } }
@keyframes dby-marquee-reverse {
	from { transform: translateX(var(--dby-marquee-shift, -50%)); }
	to { transform: translateX(0); }
}

.dby-marquee > .elementor-widget-container {
	overflow: hidden;
	/* Fade both ends so cards enter and leave instead of being cut off. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.dby-marquee .elementor-loop-container {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content;
	align-items: stretch;
	animation: dby-marquee 90s linear infinite;
}
.dby-marquee-reverse .elementor-loop-container { animation-name: dby-marquee-reverse; }
.dby-marquee .elementor-loop-container > .e-loop-item { flex: 0 0 auto; }

/* Pause on hover, on keyboard focus, and via the button dby.js injects. */
.dby-marquee:hover .elementor-loop-container,
.dby-marquee:focus-within .elementor-loop-container,
.dby-marquee.is-paused .elementor-loop-container { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.dby-marquee .elementor-loop-container { animation: none; }
}

/* Quotes clip at four lines so one long testimonial can't set the row height. */
.dby-marquee .t-quote,
.dby-marquee .t-quote p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.marquee-pause {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 18px auto 0;
	padding: 9px 18px;
	border: 2px solid var(--navy);
	border-radius: 999px;
	background: transparent;
	color: var(--navy);
	font-family: var(--dby-font);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.marquee-pause:hover { background: var(--navy); color: #fff; }
.on-navy .marquee-pause { border-color: #fff; color: #fff; }
.on-navy .marquee-pause:hover { background: #fff; color: var(--navy); }
.dby-marquee-group { display: flex; flex-direction: column; align-items: center; }

/* In the editor the cloning and width maths don't run (dby.js bails there),
   so show the cards as a plain wrapped grid instead of one clipped row. */
.elementor-editor-active .dby-marquee > .elementor-widget-container {
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}
.elementor-editor-active .dby-marquee .elementor-loop-container {
	flex-wrap: wrap !important;
	width: auto;
	animation: none;
}

/* =====================================================================
   Step cards (5 Steps)
   ===================================================================== */
.e-con.e-con.steps {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}
@media (max-width: 860px) { .e-con.e-con.steps { grid-template-columns: 1fr; } }
.e-con.e-con.step-card {
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: var(--lift);
	padding: 0;
	gap: 0;
	display: flex;
	flex-direction: column;
}
.step-card > .elementor-widget-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.e-con.e-con.step-body { padding: 26px 28px 30px; display: flex; flex-direction: column; }
.step-num .elementor-heading-title, .step-num {
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .16em;
	color: var(--terra);
}
.step-body h3 { margin: .35em 0 .4em; color: var(--navy); }
.step-body p { font-size: 19px; margin-bottom: 0; }
.e-con.e-con.step-card.step-wide {
	grid-column: 1 / -1;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
}
.step-wide > .elementor-widget-image, .step-wide > .elementor-widget-image .elementor-widget-container { height: 100%; }
.step-wide > .elementor-widget-image img { height: 100%; aspect-ratio: auto; min-height: 240px; object-fit: cover; }
@media (max-width: 860px) {
	.e-con.e-con.step-card.step-wide { display: flex !important; grid-template-columns: 1fr; }
	.step-wide > .elementor-widget-image img { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
}

/* =====================================================================
   Offer / resource / learn cards
   ===================================================================== */
.e-con.e-con.cards-3 {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	align-items: stretch;
}
@media (max-width: 960px) { .e-con.e-con.cards-3 { grid-template-columns: 1fr; } }
.e-con.e-con.cards-4 {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 1000px) { .e-con.e-con.cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .e-con.e-con.cards-4 { grid-template-columns: 1fr; } }

.e-con.e-con.offer-card, .e-con.e-con.res-card {
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: var(--lift);
	display: flex;
	flex-direction: column;
	padding: 0;
	gap: 0;
}
.offer-card > .elementor-widget-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.e-con.e-con.offer-body, .e-con.e-con.res-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.kicker .elementor-heading-title, .kicker {
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--terra);
}
.offer-body h3, .res-body h3 { color: var(--navy); margin: 10px 0 .4em; }
.res-body h3 { font-size: 22px; margin-top: 0; }
.offer-body p, .res-body p { font-size: 18.5px; }
.offer-body .card-btn, .res-body .card-btn { margin-top: auto; padding-top: 10px; }
.card-btn .elementor-button-wrapper { display: inline-block; }

/* Resource image wells */
.e-con.e-con.res-img {
	background: var(--cream-deep);
	padding: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 250px;
}
.res-img img { max-height: 198px; width: auto; max-width: 100%; object-fit: contain; }
.res-img.res-page img { border-radius: 8px; box-shadow: 0 14px 28px -10px rgba(15, 23, 42, .3); }
@media (max-width: 960px) {
	.e-con.e-con.res-card, .e-con.e-con.res-card .e-con.e-con.res-body { text-align: center; }
	.res-body .card-btn { align-self: center; }
}

/* Learn cards */
.e-con.e-con.learn-card {
	background: #fff;
	border-radius: 22px;
	padding: 30px 26px;
	box-shadow: var(--lift);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.learn-card .learn-icon .elementor-icon {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--terra);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 24px;
}
.learn-card .learn-icon .elementor-icon svg { width: 26px; height: 26px; fill: #fff; }
.learn-tag .elementor-heading-title, .learn-tag {
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--terra);
}
.learn-card p { font-size: 18px; margin-bottom: 6px; }
.learn-card .learn-body { flex: 1; }
.learn-card a {
	font-weight: 800;
	font-size: 17px;
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}
@media (max-width: 600px) {
	.e-con.e-con.learn-card { align-items: center; text-align: center; }
}

/* =====================================================================
   Credentials features (Elementor Icon Box widget, class: feat)
   ===================================================================== */
.e-con.e-con.feat-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 30px 34px;
}
@media (max-width: 640px) { .e-con.e-con.feat-grid { grid-template-columns: 1fr; } }
.feat .elementor-icon-box-wrapper { display: flex; gap: 16px; align-items: flex-start; text-align: left; }
.feat .elementor-icon-box-icon { margin: 0; }
.feat .elementor-icon {
	flex: none;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sky);
	font-size: 22px;
}
.feat .elementor-icon svg { width: 24px; height: 24px; fill: var(--sky); }
.feat .elementor-icon-box-title { color: #fff; font-size: 21px; margin: 2px 0 6px; }
.feat .elementor-icon-box-description { font-size: 17.5px; color: rgba(255, 255, 255, .85); margin: 0; }
.cred-divider { border: none; border-top: 1px solid rgba(255, 255, 255, .18); margin: 34px 0 30px; }
.on-navy .elementor-widget-divider .elementor-divider-separator { border-color: rgba(255, 255, 255, .18); }

/* Final CTA photo + floating quote */
.e-con.e-con.cred-photo { position: relative; max-width: 460px; padding: 0; }
.cred-photo .elementor-widget-image img {
	border-radius: 26px;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	box-shadow: 0 30px 60px -18px rgba(0, 10, 30, .5);
}
.e-con.e-con.cred-quote {
	position: absolute;
	left: -18px;
	bottom: -24px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 48px -14px rgba(0, 10, 30, .45);
	padding: 18px 22px;
	max-width: 320px;
	gap: 0;
	z-index: 2;
}
.on-navy .e-con.e-con.cred-quote p { color: var(--ink); }
.e-con.e-con.cred-quote p { font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px; line-height: 1.45; }
.cred-quote .cred-cite, .on-navy .cred-quote .cred-cite { font-style: normal; font-weight: 800; color: var(--terra); font-size: 13.5px; }
.cred-quote .stars .elementor-heading-title { color: var(--navy); font-size: 16px; letter-spacing: 2px; margin-bottom: 6px; }
@media (max-width: 920px) {
	.e-con.e-con.cred-photo { margin: 0 auto; position: static; }
	.e-con.e-con.cred-quote { position: static; margin: -28px 14px 0; max-width: none; }
}

/* =====================================================================
   Newsletter form (HTML widget, class: news-form on the <form>)
   ===================================================================== */
.news-form { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.news-form input {
	font-family: var(--dby-font);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	background: #fff;
	border: 2px solid var(--cream-deep);
	border-radius: 9999px;
	padding: 16px 26px;
	min-width: 230px;
	flex: 1 1 230px;
	max-width: 300px;
}
.news-form input::placeholder { color: #8a867f; font-weight: 600; }
.news-form input:focus { outline: 3px solid var(--sky-aa); outline-offset: 2px; border-color: var(--navy); }
.news-form button { border: none; }
@media (max-width: 640px) { .news-form input { max-width: 100%; } }

/* =====================================================================
   Footer (rendered by the child theme around the DBY Footer template)
   ===================================================================== */
.dby-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .92); position: relative; overflow: hidden; }
.dby-footer p { color: rgba(255, 255, 255, .85); font-size: 18px; }
.foot-name .elementor-heading-title { font-size: 26px; font-weight: 800; color: #fff; }
.foot-role .elementor-heading-title {
	color: var(--sky);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.foot-heading .elementor-heading-title, .foot-nav h4, .foot-nav .widgettitle, .foot-nav h5 {
	color: var(--sky);
	font-weight: 900;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.foot-menu ul.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-menu ul.menu a { color: #fff; font-weight: 700; font-size: 16.5px; text-decoration: none; }
.foot-menu ul.menu a:hover { text-decoration: underline; }
.foot-menu ul.sub-menu { list-style: none; margin: 4px 0 0; padding-left: 14px; display: grid; gap: 9px; }

/* Legal strip */
.foot-legal-menu ul.menu { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; }
.foot-legal-menu ul.menu a { color: rgba(255, 255, 255, .75); font-weight: 700; font-size: 15px; text-decoration: none; }
.foot-legal-menu ul.menu a:hover { color: #fff; text-decoration: underline; }
.e-con.e-con.foot-legal {
	border-top: 1px solid rgba(255, 255, 255, .18);
	margin-top: 26px;
	padding-top: 22px;
}
.foot-copy, .foot-copy p { font-size: 15px; color: rgba(255, 255, 255, .6); margin: 0; }

/* Socials (HTML widget) */
.socials { display: flex; gap: 20px; }
.socials a { display: block; opacity: .92; transition: opacity .15s ease, transform .15s ease; }
.socials a:hover { opacity: 1; transform: translateY(-2px); }
.socials svg { width: 30px; height: 30px; display: block; }

/* =====================================================================
   Layout grids (apply to Elementor containers)
   ===================================================================== */
.e-con.e-con.split {
	display: grid !important;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.e-con.e-con.split.rev { grid-template-columns: .9fr 1.1fr; }
.e-con.e-con.book-split {
	display: grid !important;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
.e-con.e-con.about-split {
	display: grid !important;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
.about-photo { max-width: 460px; margin: 0 auto; width: 100%; }
.e-con.e-con.success-grid {
	display: grid !important;
	grid-template-columns: .42fr .58fr;
	gap: clamp(32px, 4.5vw, 64px);
	align-items: start;
}
.success-grid > * { min-width: 0; }
.e-con.e-con.cred-grid {
	display: grid !important;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(32px, 4.5vw, 64px);
	align-items: center;
}
@media (max-width: 920px) {
	.e-con.e-con.success-grid, .e-con.e-con.cred-grid { grid-template-columns: 1fr; }
	.e-con.e-con.cred-grid { align-items: stretch; }
}
@media (max-width: 880px) {
	.e-con.e-con.split, .e-con.e-con.split.rev, .e-con.e-con.book-split, .e-con.e-con.about-split { grid-template-columns: 1fr; }
	.e-con.e-con.about-split > .sticky-col { order: -1; }
}

/* Book cover sticky column */
.book-cover { max-width: 400px; margin: 0 auto; }

/* =====================================================================
   Footer layout grids
   ===================================================================== */
/* foot-wrap padding now set via container vars (see below) */
.e-con.e-con.foot-grid {
	display: grid !important;
	grid-template-columns: 1.2fr .8fr;
	gap: 48px;
	align-items: start;
}
@media (max-width: 860px) { .e-con.e-con.foot-grid { grid-template-columns: 1fr; gap: 36px; } }
.e-con.e-con.foot-nav {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 12px 40px;
	align-items: start;
}
@media (max-width: 460px) { .e-con.e-con.foot-nav { grid-template-columns: 1fr; } }
.e-con.e-con.foot-legal {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px 32px;
	justify-content: space-between;
	align-items: center;
}

/* =====================================================================
   Utility helpers
   ===================================================================== */
.center { text-align: center; }
.wrap-n { max-width: 844px; margin-left: auto; margin-right: auto; width: 100%; }
.e-con.e-con.btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; }
.e-con.e-con.btn-row > .elementor-widget-button { width: auto; }
.e-con.e-con.media-row { flex-direction: row; }
.e-con.e-con.center > .e-con.e-con.btn-row { justify-content: center; }

/* =====================================================================
   Elementor specificity overrides (frontend.min.css loads after this
   sheet, so these need to outrank .e-con-boxed / .e-con.e-con.e-flex rules)
   ===================================================================== */
.e-con.e-con.center { text-align: center; }
.e-con.e-con.e-flex.btn-row,
.e-con.e-con.e-flex.media-row,
.e-con.e-con.e-flex.slider-track,
.e-con.e-con.e-flex.foot-legal {
	--flex-direction: row;
	flex-direction: row;
}
.e-con.e-con.e-flex.btn-row { flex-wrap: wrap; justify-content: flex-start; }
.e-con.e-con.center > .btn-row,
.e-con.e-con.e-flex.btn-row.center { justify-content: center; }
.e-con.e-con.e-flex.slider-track { flex-wrap: nowrap; }
.e-con.e-con.e-flex.media-row { flex-wrap: nowrap; }
@media (max-width: 900px) { .e-con.e-con.e-flex.media-row { flex-wrap: wrap; } }

/* On-navy checklist text (icon-list defaults to the Secondary global color) */
.on-navy .checklist .elementor-icon-list-text { color: rgba(255, 255, 255, .92); }
.checklist ul.elementor-icon-list-items { gap: 16px; }

/* Slider card sizing must beat Elementor's flex vars */
.e-con.e-con.t-card { --flex-grow: 0; --flex-shrink: 0; }
.e-con.e-con.slider-viewport { --overflow: hidden; overflow: hidden; }
.e-con.e-con.slider-track { --gap: 26px; gap: 26px; }

/* =====================================================================
   Heading-color overrides. Elementor's generated post CSS paints every
   heading widget with the global primary color at (0,2,0) and loads
   after this sheet, so these need three-class specificity.
   ===================================================================== */
.on-navy .elementor-widget-heading .elementor-heading-title { color: #fff; }
.on-navy .elementor-widget-icon-box .elementor-icon-box-title { color: #fff; }

.elementor-widget.stars .elementor-heading-title { color: var(--sky); font-size: 17px; letter-spacing: 3px; }
.cred-quote .elementor-widget.stars .elementor-heading-title { color: var(--navy); font-size: 16px; letter-spacing: 2px; }

.elementor-widget.step-num .elementor-heading-title,
.elementor-widget.kicker .elementor-heading-title,
.elementor-widget.learn-tag .elementor-heading-title,
.elementor-widget.media-label .elementor-heading-title { color: var(--terra); }

.on-navy .elementor-widget.t-cite .elementor-heading-title { color: #fff; font-size: 16px; }
.elementor-widget.cred-cite .elementor-heading-title { color: var(--terra); font-size: 13.5px; }

.dby-footer .elementor-widget-heading .elementor-heading-title { color: #fff; }
.dby-footer .elementor-widget.foot-role .elementor-heading-title,
.dby-footer .elementor-widget.foot-heading .elementor-heading-title { color: var(--sky); }
.on-navy .elementor-widget-icon-box .elementor-icon-box-description { color: rgba(255, 255, 255, .85); }
.learn-card .elementor-widget.learn-icon .elementor-icon,
.learn-card .elementor-widget.learn-icon .elementor-icon i { color: #fff; }
.learn-card .elementor-widget.learn-icon .elementor-icon svg { fill: #fff; }

/* Inner pages (default template): clear the fixed pill nav */
.site-main { padding-top: 120px; }

/* The Elementor Kit styles bare <button> elements (`.elementor-kit-<id> button`,
   plus :hover/:focus) and its stylesheet loads after ours; keep utility
   buttons neutral with kit-agnostic, higher-specificity selectors — the
   kit ID differs per environment (local 5, staging 180). */
.dby-nav-shell button.nav-toggle,
.dby-nav-shell button.nav-toggle:hover,
.dby-nav-shell button.nav-toggle:focus {
	background: transparent;
	color: var(--navy);
	border: none;
	border-radius: 0;
	padding: 4px 6px;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .14em;
}
/* Sub-menu chevron in the mobile panel */
.dby-nav-shell button.sub-toggle,
.dby-nav-shell button.sub-toggle:hover,
.dby-nav-shell button.sub-toggle:focus {
	position: absolute;
	top: 0; right: 0;
	width: 48px;
	height: 51px;
	padding: 0;
	background: transparent;
	color: var(--navy);
	border: none;
	border-radius: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dby-nav-shell button.sub-toggle::before {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 3px solid currentColor;
	border-bottom: 3px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .2s ease;
}
.dby-nav-shell li.open > button.sub-toggle::before { transform: translateY(3px) rotate(225deg); }
.dby-nav-shell button.sub-toggle:focus-visible { outline: 3px solid var(--sky-aa); outline-offset: -3px; }
.dby-slider .slider-nav button,
.dby-slider .slider-nav button:focus {
	background: transparent;
	color: var(--navy);
	border: 2px solid var(--navy);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 19px;
}
.dby-slider .slider-nav button:hover {
	background: var(--navy);
	color: #fff;
}

/* =====================================================================
   Round 2 overrides — each of these outranks a specific Elementor rule
   that loads after this sheet.
   ===================================================================== */

/* Rounded images. `.elementor img { border-radius: 0 }` wins specificity
   ties, so image radius rules carry an .elementor prefix. .dby-round is
   the reusable class for any image site-wide (22px, like the cards). */
.elementor .dby-round img,
.dby-round img,
img.dby-round { border-radius: 22px; }
.elementor .photo img,
.elementor .elementor-widget-image.photo img { border-radius: 26px; }
.elementor .stack2 img { border-radius: 22px; }
.elementor .hero-img img { border-radius: 26px; }
.elementor .cred-photo .elementor-widget-image img { border-radius: 26px; }
.elementor .book-cover img { border-radius: 8px; }
.elementor .mason img { border-radius: 18px; }
.elementor .res-img img.page, .elementor .res-img.res-page img { border-radius: 8px; }

/* Dot texture + hero accent circle: Elementor's container-overlay rules
   set `content: none` and their own size vars on .e-con::before, so the
   pseudo-elements must re-assert everything at higher specificity. */
.e-con.e-con.dby-dots::before,
.e-con.e-con.dby-dots-navy::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	opacity: 1;
	background-image: radial-gradient(rgba(255, 255, 255, .35) 1.4px, transparent 1.4px);
	background-size: 22px 22px;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: radial-gradient(ellipse 60% 90% at 100% 0%, black 30%, transparent 72%), radial-gradient(ellipse 60% 90% at 0% 100%, black 30%, transparent 72%);
	mask-image: radial-gradient(ellipse 60% 90% at 100% 0%, black 30%, transparent 72%), radial-gradient(ellipse 60% 90% at 0% 100%, black 30%, transparent 72%);
}
.e-con.e-con.dby-dots-navy::before {
	background-image: radial-gradient(rgba(0, 64, 119, .16) 1.4px, transparent 1.4px);
}
.e-con.e-con.hero-img::before {
	content: "";
	position: absolute;
	width: 230px;
	height: 230px;
	top: -42px;
	right: -42px;
	left: auto;
	bottom: auto;
	inset: auto -42px auto auto;
	top: -42px;
	border-radius: 50%;
	background: var(--terra);
	background-image: none;
	opacity: .18;
	z-index: 0;
	-webkit-mask-image: none;
	mask-image: none;
	pointer-events: none;
}
.e-con.e-con.hero-img { position: relative; max-width: 430px; margin-left: auto; margin-right: auto; }
.e-con.e-con.hero-img > * { position: relative; z-index: 1; }

/* Sticky columns: Elementor pins containers back to position: relative. */
.e-con.e-con.sticky-col {
	--position: sticky;
	position: sticky;
	top: 120px;
}
@media (max-width: 880px) {
	.e-con.e-con.sticky-col {
		--position: static;
		position: static;
	}
}

/* Narrow centered blocks: Elementor's width/margin vars zero out the
   auto margins, leaving the block hugging the left edge. */
.e-con.e-con.wrap-n {
	--width: 100%;
	width: 100%;
	max-width: 844px;
	margin-left: auto;
	margin-right: auto;
}

/* Media band sizing: `.elementor img { height: auto }` and the container
   width vars beat the earlier rules, so the logo strips rendered at full
   size and overlapped the label. */
.elementor .media-row img {
	height: 25px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.e-con.e-con.media-row > .elementor-widget-image {
	--width: auto;
	width: auto;
	min-width: 0;
	flex: 0 1 auto;
}
.e-con.e-con.media-row > .elementor-widget-heading {
	--width: auto;
	width: auto;
	flex: none;
}
.e-con.e-con.media-row { --gap: 30px; gap: 14px 30px; }
@media (max-width: 900px) {
	.elementor .media-row img { height: auto; }
	.e-con.e-con.media-row > .elementor-widget-image { flex: 1 1 100%; }
}

/* Video play button: Elementor's default is 100px — scale it down. */
.t-video .elementor-custom-embed-play i,
.t-video .elementor-custom-embed-play svg,
.t-card .elementor-custom-embed-play i,
.t-card .elementor-custom-embed-play svg {
	font-size: 50px;
	width: 50px;
	height: 50px;
}

/* =====================================================================
   Elementor editor compatibility. The front end runs dby.js (slider
   transform, injected arrows/dots); the editor must not — instead lay
   the testimonial cards out in a wrapped grid so they're editable.
   ===================================================================== */
.elementor-editor-active .e-con.e-con.slider-track {
	flex-wrap: wrap;
	transform: none !important;
}
.elementor-editor-active .e-con.e-con.slider-viewport { overflow: visible; }

/* Panel (white rounded card): Elementor's .e-con var rules zero out the
   padding and border-radius, so set both the vars and the properties. */
.e-con.e-con.panel {
	--border-radius: 36px;
	--padding-block-start: 72px;
	--padding-block-end: 72px;
	--padding-inline-start: 56px;
	--padding-inline-end: 56px;
	padding: 72px 56px;
	border-radius: 36px;
	position: relative;
	overflow: hidden;
}
@media (max-width: 900px) {
	.e-con.e-con.panel {
		--border-radius: 26px;
		--padding-block-start: 44px;
		--padding-block-end: 44px;
		--padding-inline-start: 26px;
		--padding-inline-end: 26px;
		padding: 44px 26px;
		border-radius: 26px;
	}
}

/* =====================================================================
   Mobile header: always the full-width "stuck" bar — the floating pill
   (outer padding + rounded capsule) is desktop-only.
   ===================================================================== */
@media (max-width: 1020px) {
	.dby-nav-shell,
	.dby-nav-shell.stuck { padding: 0; }
	.dby-nav-shell .e-con.e-con.nav-pill,
	.dby-nav-shell.stuck .e-con.e-con.nav-pill {
		max-width: 100%;
		border-radius: 0;
		padding: 10px 20px;
		box-shadow: 0 10px 26px -14px rgba(0, 30, 60, .35);
	}
	/* Menu panel hangs flush under the full-width bar */
	.dby-mobile-menu.open {
		top: 100%;
		border-radius: 0 0 26px 26px;
	}
}

/* =====================================================================
   Section side padding. The Kit's container padding is 0, and sections
   only carried vertical padding — on small screens content ran
   edge-to-edge. Match the design's 28px gutters (var-level so
   Elementor's container padding rules can't zero them).
   ===================================================================== */
.e-con.e-con.dby-section {
	--padding-block-start: clamp(56px, 8vw, 92px);
	--padding-block-end: clamp(56px, 8vw, 92px);
	--padding-inline-start: 28px;
	--padding-inline-end: 28px;
}
.e-con.e-con.hero {
	--padding-block-start: 150px;
}
.e-con.e-con.media-band {
	--padding-block-start: 34px;
	--padding-block-end: 34px;
	--padding-inline-start: 28px;
	--padding-inline-end: 28px;
}
.e-con.e-con.foot-wrap {
	--padding-block-start: 64px;
	--padding-block-end: 44px;
	--padding-inline-start: 28px;
	--padding-inline-end: 28px;
}
/* Vars only — boxed containers hand them to their .e-con-inner, so a
   direct padding here as well would double the spacing. The plain
   .dby-section rule below keeps non-boxed/raw usage working. */
.dby-section:not(.e-con) { padding: clamp(56px, 8vw, 92px) 28px; }
/* The panel band hugs closer to the screen edge on small screens,
   like the design (panel keeps its own inner padding). */
@media (max-width: 900px) {
	.e-con.e-con.dby-section:has(> .e-con.panel) {
		--padding-inline-start: 14px;
		--padding-inline-end: 14px;
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* Checklist ticks align to the first line of multi-line items */
.elementor-widget.checklist .elementor-icon-list-item { align-items: flex-start; }
.elementor-widget.checklist .elementor-icon-list-icon { margin-top: 4px; }

/* Logged-in phones: WP's admin bar scrolls away below 600px — once the
   nav is stuck, pin it to the very top instead of leaving a 46px gap. */
@media (max-width: 600px) {
	body.admin-bar .dby-nav-shell.stuck { top: 0; }
}

/* Step 05 (wide card) on mobile: the desktop height:100% on the image
   wrapper collapsed the stacked card and overflow:hidden swallowed the
   text body. Let everything size naturally when stacked. */
@media (max-width: 860px) {
	.e-con.e-con.step-card.step-wide > .elementor-widget-image,
	.e-con.e-con.step-card.step-wide > .elementor-widget-image .elementor-widget-container {
		height: auto;
		width: 100%;
	}
	.e-con.e-con.step-card.step-wide > .elementor-widget-image img {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
}

/* "Why Dr. Yates" credentials on mobile: center the icon above the text */
@media (max-width: 640px) {
	.feat .elementor-icon-box-wrapper {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 12px;
	}
	.feat .elementor-icon-box-icon { margin: 0 auto; }
}

/* "Why Dr. Yates" hover: Elementor's icon-box hover paints the title
   with the global primary (navy) — invisible on the navy band — and
   grays out the icon. Keep them white/sky on hover. */
.on-navy .feat.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
.on-navy .feat.elementor-widget-icon-box:has(:focus) .elementor-icon-box-title,
.on-navy .feat.elementor-widget-icon-box:hover .elementor-icon-box-title {
	color: #fff;
}
.on-navy .feat .elementor-icon:hover,
.on-navy .feat.elementor-widget-icon-box:has(:hover) .elementor-icon,
.on-navy .feat.elementor-widget-icon-box:has(:focus) .elementor-icon {
	color: var(--sky);
}
.on-navy .feat .elementor-icon:hover svg { fill: var(--sky); }

/* =====================================================================
   Hero templates (DBY Hero V1–V6): decorative-only helpers.
   Everything else — backgrounds, padding, layout, widths, colors,
   typography, radius, shadows — lives in Elementor element settings so
   it stays editable from the editor. These classes only paint the
   terracotta accent circle behind an image container; the doubled
   selector re-asserts ::before against Elementor's container-overlay
   reset (content: none).
   ===================================================================== */
.e-con.e-con.dby-accent { position: relative; }
.e-con.e-con.dby-accent > * { position: relative; z-index: 1; }
.e-con.e-con.dby-accent::before {
	content: "";
	position: absolute;
	width: 230px;
	height: 230px;
	inset: -42px -42px auto auto;
	border-radius: 50%;
	background: var(--terra);
	background-image: none;
	opacity: .18;
	z-index: 0;
	-webkit-mask-image: none;
	mask-image: none;
	pointer-events: none;
}
.e-con.e-con.dby-accent.dby-accent-left::before { inset: -42px auto auto -42px; }


/* =====================================================================
   Blog page (2026-09): decorative-only helpers for the Elementor Pro
   Loop Grid / Loop Carousel / Taxonomy Filter widgets. Colors, spacing,
   typography and layout live in the widget settings; these only add the
   hover lift and the pill shape of the pagination numbers, which the
   widgets have no native control for.
   ===================================================================== */
.dby-post-card { transition: transform .15s ease; }
.dby-post-card:hover { transform: translateY(-4px); }
.dby-topic-filter .e-filter-item { transition: transform .13s ease, color .13s ease, border-color .13s ease, background-color .13s ease; }
.dby-topic-filter .e-filter-item:hover { transform: translateY(-2px); }
.dby-post-grid .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 10px;
	border-radius: 9999px;
	border: 2px solid var(--cream-deep);
	background: var(--white);
	text-decoration: none;
	transition: border-color .13s ease, color .13s ease, background-color .13s ease;
}
.dby-post-grid .elementor-pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); }
.dby-post-grid .elementor-pagination .page-numbers.prev,
.dby-post-grid .elementor-pagination .page-numbers.next { border-color: var(--navy); }
.dby-post-grid .elementor-pagination a.page-numbers:hover { border-color: var(--terra); }
.dby-post-grid .elementor-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* =====================================================================
   Blog single post (2026-09). Post BODY markup helpers only — these style
   HTML written inside the post editor (callout / numbered trap / offer
   box), which no Elementor widget setting can reach. The template itself
   (hero, columns, sidebar cards, related grid) is native Elementor.
   ===================================================================== */
.dby-article h2 { margin-top: 1.8em; }
.dby-article h3 { color: var(--navy); margin-bottom: .4em; }
.dby-article .callout { background: var(--cream); border-left: 5px solid var(--terra); border-radius: 0 16px 16px 0; padding: 22px 26px; margin: 28px 0; }
.dby-article .callout p { margin: 0; }
.dby-article .trap { display: flex; gap: 18px; align-items: flex-start; margin: 26px 0; }
.dby-article .trap-num { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--terra); color: #fff; font-weight: 900; font-size: 19px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.dby-article .trap h3 { margin-top: 0; font-size: 21px; }
.dby-article .trap p { margin: 0; font-size: 18.5px; }
.dby-article .offer-box { background: var(--navy); color: #fff; border-radius: 20px; padding: 32px 34px; margin: 40px 0; }
.dby-article .offer-box h3 { color: var(--sky); font-size: 22px; margin: 0 0 .5em; }
.dby-article .offer-box p { color: rgba(255, 255, 255, .93); font-size: 18px; }
.dby-article .offer-box p:last-child { margin-bottom: 0; }
/* Blog Sidebar widget area: spacing between the cards (the Sidebar widget has no gap control). */
.dby-blog-sidebar .dby-side-widget + .dby-side-widget { margin-top: 22px; }
.dby-blog-sidebar .widget-title { display: none; }
/* Post navigation (Pro widget) forces one-line titles with an ellipsis; allow two lines instead. */
.dby-post-nav .post-navigation__prev--title,
.dby-post-nav .post-navigation__next--title {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Category chips (heading widget fed by the post-terms tag): the links it prints inherit the chip colour; pin line height so the text centres in the pill. */
.dby-cat-chip .elementor-widget-container { display: flex; align-items: center; justify-content: center; }
.dby-cat-chip .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.dby-cat-chip .elementor-heading-title * { display: block; line-height: 1; }
/* Uppercase text in a small pill: trim the font's ascender/descender allowance so the caps are centred exactly (Chrome/Safari); older engines get a tiny nudge instead. */
.dby-cat-chip .elementor-heading-title a { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
	.dby-cat-chip .elementor-heading-title a { padding-top: 0.14em; }
}
.dby-cat-chip .elementor-heading-title a { color: inherit; text-decoration: none; }
.dby-cat-chip .elementor-heading-title a:hover { text-decoration: underline; }
.dby-crumbs .elementor-heading-title a { color: inherit; text-decoration: none; }
.dby-crumbs .elementor-heading-title a:hover { text-decoration: underline; }
/* Single post: when a post has no featured image the Image widget renders nothing; hide the empty wrapper so it leaves no gap. */
.dby-post-featured:not(:has(img)) { display: none; }

/* =====================================================================
   Podcast page (2026-09): decorative-only hover lifts for the episode
   cards, the hero player card and the topic tiles. Colours, radius,
   shadows, padding and layout live in the Elementor container settings.
   ===================================================================== */
.e-con.dby-ep-card,
.e-con.dby-latest-player,
.e-con.dby-topic-tile { transition: transform .22s ease; }
.e-con.dby-ep-card:hover,
.e-con.dby-topic-tile:hover { transform: translateY(-4px); }
.e-con.dby-latest-player:hover { transform: translateY(-3px); }
.e-con.dby-topic-tile .elementor-heading-title,
.e-con.dby-topic-tile .elementor-widget-text-editor { text-decoration: none; }

/* =====================================================================
   Fluent Forms (2026-09): decorative arrow after the submit label, the
   same cue the pill buttons carry. Colours, radius, padding, typography
   and hover live in the Fluent Forms widget's Elementor settings; remove
   the `dby-ff-arrow` class on the widget to drop the arrow.
   ===================================================================== */
.dby-ff-arrow .ff-btn-submit::after { content: "\2192"; margin-left: 12px; font-weight: 800; }

/* =====================================================================
   Blood Sugar Clarity Quiz (2026-09) - Smart Quiz Builder markup lives
   outside Elementor, so its look is set here, scoped to the `.dby-quiz`
   container that wraps the [SmartQuizBuilder] shortcode on /quiz/.
   Palette/typography mirror the DBY design system (navy, terracotta,
   cream, Nunito Sans). Every rule is scoped; nothing leaks elsewhere.
   ===================================================================== */
.dby-quiz { --q-navy:#004077; --q-terra:#E77241; --q-terra-deep:#c95c2c; --q-cream:#F4F0EB; --q-cream-deep:#ece5d9; --q-sky-aa:#1B8FA6; --q-ink:#2C2C2C; --q-grey:#8a867e; }
.dby-quiz .sqb_quiz_container_outer,
.dby-quiz .sqb_quiz_container,
.dby-quiz .quiz_outer_fe { background: transparent !important; padding: 0 !important; max-width: 100% !important; }
.dby-quiz .quiz_outer_fe { text-align: left; }
.dby-quiz .sqb_quiz_container_outer *,
.dby-quiz .sqb_quiz_container_outer .sqb_tiny_mce_editor,
.dby-quiz .sqb_quiz_container_outer .sqb_tiny_mce_editor * { font-family: 'Nunito Sans', ui-sans-serif, -apple-system, "Segoe UI", Arial, sans-serif !important; }

/* the white card every screen sits in */
.dby-quiz .quiz_comon_template,
.dby-quiz .quiz_quesans_template_outer .Quiz-Template { background: #fff !important; border: 0 !important; border-radius: 28px !important; box-shadow: 0 24px 48px -12px rgba(15,23,42,.18) !important; padding: clamp(30px, 5vw, 54px) !important; margin: 0 auto !important; max-width: 820px !important; width: 100%; text-align: left !important; color: var(--q-ink); font-size: 19px; line-height: 1.6; font-weight: 600; }
.dby-quiz .quiz_quesans_template_outer .Quiz-Template .Quiz-Template-overflow,
.dby-quiz .quiz_quesans_template_outer .Quiz-Template .question_container { padding: 0 !important; background: transparent !important; }

/* shared pieces */
.dby-quiz .dby-q-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--q-cream); border: 1.5px solid var(--q-cream-deep); padding: 7px 16px; border-radius: 9999px; font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--q-terra); margin-bottom: 18px; }
.dby-quiz .dby-q-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--q-terra); }
.dby-quiz .dby-q-h1, .dby-quiz .dby-q-h1 *,
.dby-quiz .dby-q-h2, .dby-quiz .dby-q-h2 * { color: var(--q-navy) !important; font-weight: 800 !important; line-height: 1.2 !important; text-align: left !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.dby-quiz .dby-q-h1, .dby-quiz .dby-q-h1 * { font-size: clamp(28px, 4vw, 40px) !important; }
.dby-quiz .dby-q-h2, .dby-quiz .dby-q-h2 * { font-size: clamp(24px, 3.2vw, 32px) !important; }
.dby-quiz .dby-q-h1 { margin-bottom: 14px !important; }
.dby-quiz .dby-q-sub, .dby-quiz .dby-q-sub * { font-size: clamp(18px, 2vw, 20.5px) !important; font-weight: 600 !important; color: var(--q-ink) !important; text-align: left !important; line-height: 1.6 !important; }
.dby-quiz .dby-q-meta { font-size: 15px; color: var(--q-grey); font-weight: 700; margin-top: 16px; }
.dby-quiz .dby-q-kicker, .dby-quiz .sqb_tiny_mce_editor h3.dby-q-kicker { font-size: 14px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--q-terra) !important; margin: 0 0 10px !important; font-weight: 800; line-height: 1.3; }
.dby-quiz .dby-q-tiny { font-size: 13.5px; color: var(--q-grey); font-weight: 600; }

/* pill buttons (SQB renders buttons as divs; the arrow is part of the label) */
.dby-quiz .dby-pill,
.dby-quiz .take-quiz-btn,
.dby-quiz .continue_btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 12px; width: auto !important; min-width: 0 !important; max-width: 100% !important; padding: 15px 28px !important; margin: 6px 0 0 !important; border-radius: 9999px !important; background: var(--q-terra) !important; color: #fff !important; font-weight: 800 !important; font-size: 17px !important; line-height: 1.2 !important; border: 0 !important; box-shadow: 0 16px 32px -12px rgba(231,114,65,.5) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; transition: transform .15s ease, background .15s ease; float: none !important; }
.dby-quiz .dby-pill *, .dby-quiz .take-quiz-btn *, .dby-quiz .continue_btn * { color: #fff !important; font-size: inherit !important; font-weight: inherit !important; margin: 0 !important; }
.dby-quiz .dby-pill:hover, .dby-quiz .take-quiz-btn:hover, .dby-quiz .continue_btn:hover { transform: translateY(-2px); background: var(--q-terra-deep) !important; }
.dby-quiz .dby-pill-outline { background: transparent !important; color: var(--q-navy) !important; border: 2px solid var(--q-navy) !important; box-shadow: none !important; }
.dby-quiz .dby-pill-outline * { color: var(--q-navy) !important; }
.dby-quiz .dby-pill-outline:hover { background: var(--q-navy) !important; color: #fff !important; }
.dby-quiz .dby-pill-outline:hover * { color: #fff !important; }

/* intro promise list */
.dby-quiz .dby-q-promise { background: var(--q-cream); border-radius: 18px; padding: 22px 26px; margin: 24px 0 28px; }
.dby-quiz .dby-q-promise ul { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 9px; }
.dby-quiz .dby-q-promise li { display: flex; gap: 11px; align-items: flex-start; font-size: 17.5px; margin: 0 !important; padding: 0 !important; line-height: 1.5; }
.dby-quiz .dby-q-promise li::before { content: "\2713"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--q-terra); color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin-top: 3px; }

/* progress + question counter (counter text is written by dby.js) */
.dby-quiz .dby-q-count { display: flex; justify-content: space-between; font-weight: 900; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--q-sky-aa); margin: 0 0 9px; }
.dby-quiz .quiz_quesans_template_outer .progress { display: block !important; height: 8px !important; background: var(--q-cream-deep) !important; border-radius: 9999px !important; overflow: hidden; margin: 0 0 26px !important; max-width: 100% !important; box-shadow: none !important; }
.dby-quiz .quiz_quesans_template_outer .progress .progress-bar { height: 100%; background: linear-gradient(90deg, var(--q-terra), var(--q-terra-deep)) !important; border-radius: 9999px; transition: width .3s ease; box-shadow: none !important; }
.dby-quiz .quiz_quesans_template_outer .progress .progress_percent { display: none !important; }

/* question */
.dby-quiz .question_details .question_title,
.dby-quiz .question_details .question_title * { font-size: clamp(21px, 2.6vw, 26px) !important; font-weight: 800 !important; color: var(--q-navy) !important; line-height: 1.3 !important; text-align: left !important; margin: 0 !important; padding: 0 !important; }
.dby-quiz .question_details .question_title { margin-bottom: 24px !important; }
.dby-quiz .question_details .question_description { display: none !important; }
.dby-quiz .answer_container,
.dby-quiz .question_add_answer_outer_div { display: grid !important; gap: 13px !important; padding: 0 !important; margin: 0 !important; width: 100% !important; counter-reset: dbyq; }
.dby-quiz .answer_container .sqb_ans_item_outer { counter-increment: dbyq; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; float: none !important; }
.dby-quiz .answer_container .sqb_ans_item { display: flex !important; align-items: flex-start !important; gap: 14px !important; width: 100% !important; margin: 0 !important; background: var(--q-cream) !important; border: 2px solid var(--q-cream-deep) !important; border-radius: 16px !important; padding: 16px 20px !important; text-align: left !important; cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .12s ease; box-shadow: none !important; }
.dby-quiz .answer_container .sqb_ans_item::before { content: counter(dbyq, upper-alpha); flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--q-cream-deep); color: var(--q-navy); font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: border-color .12s ease, color .12s ease; }
.dby-quiz .answer_container .sqb_ans_item_outer:hover .sqb_ans_item,
.dby-quiz .answer_container .sqb_ans_item_outer.sqb_ans_selected .sqb_ans_item { border-color: var(--q-terra) !important; background: #fdf7f2 !important; transform: translateY(-1px); }
.dby-quiz .answer_container .sqb_ans_item_outer:hover .sqb_ans_item::before,
.dby-quiz .answer_container .sqb_ans_item_outer.sqb_ans_selected .sqb_ans_item::before { border-color: var(--q-terra); color: var(--q-terra); }
.dby-quiz .answer_container .sqb_ans_item_inner { display: block !important; flex: 1 1 auto; min-width: 0; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.dby-quiz .answer_container .sqb_ans_item_img,
.dby-quiz .answer_container .answer-options,
.dby-quiz .answer_container .sqb_ans_delete_btn,
.dby-quiz .answer_container .custom-radio-style,
.dby-quiz .answer_container input[type="radio"] { display: none !important; }
.dby-quiz .answer_container .sql_ans_text,
.dby-quiz .answer_container .sql_ans_text * { font-size: 17.5px !important; font-weight: 700 !important; color: var(--q-ink) !important; line-height: 1.45 !important; text-align: left !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
.dby-quiz .back-next-btn { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.dby-quiz .back-next-btn::after { content: "Choose the answer closest to you"; order: 2; font-size: 13.5px; color: var(--q-grey); font-weight: 600; margin-left: auto; }
.dby-quiz .back-next-btn .sqb_back_btn { order: 1; background: none !important; border: 0 !important; box-shadow: none !important; padding: 8px 12px 8px 0 !important; min-width: 0 !important; width: auto !important; font-weight: 800 !important; font-size: 15px !important; color: var(--q-grey) !important; border-radius: 0 !important; }
.dby-quiz .back-next-btn .sqb_back_btn:hover { color: var(--q-navy) !important; }
.dby-quiz .back-next-btn .sqb_back_btn::before { content: "\2190\00a0"; }

/* opt-in */
.dby-quiz .Quiz-Optin-Template .sqb_opt_in_h4, .dby-quiz .Quiz-Optin-Template .sqb_opt_in_h4 * { font-size: clamp(24px, 3vw, 30px) !important; font-weight: 800 !important; color: var(--q-navy) !important; line-height: 1.2 !important; text-align: left !important; margin: 0 0 12px !important; padding: 0 !important; }
.dby-quiz .Quiz-Optin-Template .sqb_opt_in_h6, .dby-quiz .Quiz-Optin-Template .sqb_opt_in_h6 * { font-size: 19px !important; font-weight: 600 !important; color: var(--q-ink) !important; text-align: left !important; line-height: 1.6 !important; margin: 0 !important; }
.dby-quiz .Quiz-Optin-Template .Quiz-Template-content { padding: 0 !important; margin: 0 !important; }
.dby-quiz .Quiz-Optin-Template .form_cls { display: grid !important; gap: 16px 0 !important; position: relative; margin: 26px 0 18px !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
.dby-quiz .Quiz-Optin-Template .dby-q-label { font-weight: 800; font-size: 15px; color: var(--q-navy); margin: 0; }
.dby-quiz .dby-q-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; padding: 0 !important; }
.dby-quiz .Quiz-Optin-Template .form_cls input::placeholder { color: #6f6b64 !important; opacity: 1; font-weight: 600 !important; }
.dby-quiz .Quiz-Optin-Template .form_cls input[type="text"],
.dby-quiz .Quiz-Optin-Template .form_cls input[type="email"] { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; font-size: 17.5px !important; font-weight: 600 !important; color: var(--q-ink) !important; background: var(--q-cream) !important; border: 1.5px solid var(--q-cream-deep) !important; border-radius: 14px !important; padding: 13px 16px !important; margin: 0 !important; outline: none !important; box-shadow: none !important; line-height: 1.4 !important; }
.dby-quiz .Quiz-Optin-Template .form_cls input:focus { border-color: var(--q-sky-aa) !important; background: #fff !important; }
.dby-quiz .Quiz-Optin-Template .text_privacy_policy, .dby-quiz .Quiz-Optin-Template .text_privacy_policy * { font-size: 13.5px !important; color: var(--q-grey) !important; font-weight: 600 !important; text-align: left !important; margin: 16px 0 0 !important; }
.dby-quiz .Quiz-Optin-Template .sqb_optin_error, .dby-quiz .Quiz-Optin-Template .error_msg { color: #b3261e; font-weight: 700; font-size: 15px; margin-top: 10px; }

/* result */
.dby-quiz .result_temp_outer .Quiz-Template-content,
.dby-quiz .result_temp_outer .Quiz-Template-content-inn { padding: 0 !important; margin: 0 !important; text-align: left !important; }
.dby-quiz .result_temp_outer p { font-size: 17.5px !important; line-height: 1.6 !important; color: var(--q-ink) !important; margin: 0 0 1em !important; font-weight: 600 !important; text-align: left !important; }
.dby-quiz .dby-q-stage { color: var(--q-terra) !important; }
.dby-quiz .dby-q-journey { display: flex; align-items: center; flex-wrap: wrap; margin: 16px 0 30px; }
.dby-quiz .dby-q-jdot { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 86px; }
.dby-quiz .dby-q-jdot i { width: 16px; height: 16px; border-radius: 50%; background: var(--q-cream-deep); border: 3px solid var(--q-cream-deep); display: block; }
.dby-quiz .dby-q-jdot.on i { background: var(--q-terra); border-color: #f6d4c2; width: 20px; height: 20px; }
.dby-quiz .dby-q-jdot span { font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #a09b91; text-align: center; line-height: 1.3; }
.dby-quiz .dby-q-jdot.on span { color: var(--q-terra); }
.dby-quiz .dby-q-jline { width: 34px; height: 3px; background: var(--q-cream-deep); margin: 0 2px 26px; }
@media (max-width: 560px) { .dby-quiz .dby-q-jdot { min-width: 64px; } .dby-quiz .dby-q-jline { width: 14px; } }
.dby-quiz .dby-q-sec { margin: 26px 0; }
.dby-quiz .dby-q-big { font-size: clamp(19px, 2.2vw, 22px) !important; font-weight: 800 !important; color: var(--q-navy) !important; line-height: 1.4 !important; }
.dby-quiz .dby-q-three { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 12px; counter-reset: dbyt; }
.dby-quiz .dby-q-three li { counter-increment: dbyt; display: flex; gap: 13px; align-items: flex-start; background: var(--q-cream); border-radius: 14px; padding: 14px 18px; font-size: 17.5px; margin: 0 !important; line-height: 1.5; }
.dby-quiz .dby-q-three li::before { content: "0" counter(dbyt); flex: none; font-weight: 900; font-size: 13px; color: var(--q-terra); margin-top: 4px; letter-spacing: .08em; }
.dby-quiz .dby-q-relief { background: #eef6f7; border: 1.5px solid #d3e9ec; border-radius: 18px; padding: 20px 24px; }
.dby-quiz .dby-q-relief .dby-q-kicker { color: var(--q-sky-aa) !important; }
.dby-quiz .dby-q-relief p { margin: 0 !important; }
.dby-quiz .dby-q-drnote { display: flex; gap: 20px; align-items: flex-start; background: var(--q-navy); border-radius: 20px; padding: 26px 28px; margin: 30px 0; }
.dby-quiz .dby-q-drnote img { width: 74px !important; height: 74px !important; border-radius: 50% !important; object-fit: cover; flex: none; border: 3px solid rgba(255,255,255,.25); margin: 0 !important; max-width: none !important; }
.dby-quiz .dby-q-drnote .dby-q-kicker { color: #66D9E8 !important; font-size: 13px !important; margin-bottom: 8px !important; }
.dby-quiz .dby-q-drnote p { color: rgba(255,255,255,.94) !important; font-size: 17px !important; margin: 0 0 .8em !important; }
.dby-quiz .dby-q-drnote cite { font-style: normal; font-weight: 800; color: #fff; font-size: 15.5px; display: block; }
@media (max-width: 520px) { .dby-quiz .dby-q-drnote { flex-direction: column; } }
.dby-quiz .dby-q-next { background: var(--q-cream); border-radius: 20px; padding: 26px 28px; margin: 26px 0 6px; }
.dby-quiz .dby-q-alt { border-top: 1.5px solid var(--q-cream-deep); margin-top: 20px; padding-top: 18px; }
.dby-quiz .dby-q-alt p { font-size: 16.5px !important; margin-bottom: 12px !important; }
.dby-quiz .reake_data_outer { text-align: center; margin-top: 22px; }
.dby-quiz .retake_button { display: inline-block !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 8px 12px !important; min-width: 0 !important; width: auto !important; font-weight: 800 !important; font-size: 15px !important; color: var(--q-grey) !important; cursor: pointer; border-radius: 0 !important; }
.dby-quiz .retake_button * { color: inherit !important; font-size: inherit !important; }
.dby-quiz .retake_button:hover { color: var(--q-navy) !important; }
/* overrides for SQB rules that stretch children of the screen wrappers */
.dby-quiz .quiz_comon_template .dby-q-eyebrow { display: inline-flex !important; width: auto !important; max-width: 100%; margin: 0 0 18px !important; padding: 7px 16px !important; }
.dby-quiz .quiz_comon_template .dby-q-eyebrow::before { display: block; }
.dby-quiz .Quiz-Template2 .Quiz-Template-content,
.dby-quiz .Quiz-Template2 .Quiz-Template-content *,
.dby-quiz .Quiz-Template2 .Quiz-Template-title { text-align: left !important; }
.dby-quiz .Quiz-Template2 .Quiz-Template-content { padding: 0 !important; margin: 0 !important; width: 100% !important; }
.dby-quiz .Quiz-Template2 .Quiz-Template-content .take-quiz-btn,
.dby-quiz .Quiz-Optin-Template .Quiz-Template-content .continue_btn,
.dby-quiz .Quiz-Optin-Template .Quiz-Template-content form .continue_btn { display: inline-flex !important; width: auto !important; min-width: 0 !important; margin: 6px 0 0 !important; }
.dby-quiz .Quiz-Optin-Template .sqb_opt_in_h4,
.dby-quiz .Quiz-Optin-Template .sqb_opt_in_h6,
.dby-quiz .Quiz-Optin-Template .Quiz-Template-content,
.dby-quiz .Quiz-Optin-Template .sqbform { padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; text-align: left !important; }
.dby-quiz .Quiz-Optin-Template .sqb_opt_in_h6 { margin-top: 0 !important; }
.dby-quiz .Quiz-Optin-Template label.dby-q-label { display: block !important; font-weight: 800 !important; font-size: 15px !important; color: var(--q-navy) !important; margin: 0 0 7px !important; padding: 0 !important; line-height: 1.3; }
.dby-quiz .retake_button > div::after { content: " the quiz"; }
/* high-specificity overrides (SQB's own screen-wrapper rules are !important) */
.dby-quiz .sqb_quiz_container_outer .sqb_quiz_container .quiz_outer_fe .quiz_comon_template .dby-q-eyebrow,
.dby-quiz .sqb_quiz_container_outer .sqb_quiz_container .quiz_outer_fe .outcome_div .quiz_comon_template .dby-q-eyebrow { display: inline-flex !important; width: fit-content !important; max-width: 100% !important; flex: none !important; }
.dby-quiz .sqb_quiz_container_outer .sqb_quiz_container .quiz_outer_fe .Quiz-Optin-Template .continue_btn,
.dby-quiz .sqb_quiz_container_outer .sqb_quiz_container .quiz_outer_fe .Quiz-Template2 .take-quiz-btn,
.dby-quiz .sqb_quiz_container_outer .sqb_quiz_container .quiz_outer_fe .outcome_div .dby-pill { display: inline-flex !important; width: fit-content !important; min-width: 0 !important; max-width: 100% !important; flex: none !important; }
.dby-quiz .back-next-btn .sqb_back_btn { display: inline-flex !important; align-items: center; white-space: nowrap; max-width: none !important; }
/* Fluent Forms radios / checkboxes: brand accent + a slightly larger control; option labels weight-matched to the site's copy. The widget has no control for either. */
.dby-ff-form input[type="radio"],
.dby-ff-form input[type="checkbox"] { accent-color: #E77241; width: 18px; height: 18px; }
.dby-ff-form .ff-el-form-check { margin-bottom: 8px; }
.dby-ff-form .ff-el-form-check-label { font-weight: 600; }
.dby-ff-form .ff-el-tc .ff-el-form-check-input { margin-right: 10px; }
/* Wrapped option labels hang under their own text, not under the control; helper lines are readable (Fluent's default is 12px italic). */
/* Option text (radio/checkbox choices) is 16px site-wide - the widget has no control for it; question labels are 18px via the widget's Label typography. */
.dby-ff-form .fluentform .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; }
.dby-ff-form .fluentform .ff-el-form-check-label > input { flex: none; margin-top: 3px; }
/* (`.fluentform .ff-el-help-message` in the plugin sheet loads after dby.css, so these carry the same prefix.) */
.dby-ff-form .fluentform .ff-el-help-message { font-size: 15px; font-style: normal; color: #5A5854; line-height: 1.5; }
.dby-ff-form .fluentform .ff-el-help-message.ff_ahm { margin: 0 0 8px; }
/* In-form section heading (Custom HTML element) + the on-screen confirmation heading. */
.dby-ff-form .fluentform .dby-ff-section-title { margin: 8px 0 4px; font-size: 22px; }
.dby-ff-form .fluentform .dby-ff-section-text { margin: 0 0 4px; font-size: 16px; color: #5A5854; }
.dby-ff-form .fluentform .ff-message-success { padding: 28px 30px; }
.dby-ff-form .fluentform .ff-message-success h3 { margin: 0 0 14px; color: #004077; }
.dby-ff-form .fluentform .ff-message-success p { margin: 0 0 12px; }
.dby-ff-form .fluentform .ff-message-success p:last-child { margin-bottom: 0; }

/* =====================================================================
   Quiz result pages (2026-09): the white "next step" offer card sits inside
   an .on-navy band whose `p`/`li` rules would otherwise paint its copy
   white. Scoped reset only - colours/spacing live in Elementor settings.
   ===================================================================== */
.on-navy .e-con.dby-offer-card p,
.on-navy .e-con.dby-offer-card li,
.on-navy .e-con.dby-offer-card .elementor-icon-list-text { color: #2C2C2C; }

/* =====================================================================
   Newsletter opt-in inside the exit-intent popup (2026-09): the shared
   opt-in template is built as a wide horizontal row for a full-width band,
   so inside a ~680px popup it is stacked instead. Layout only - the form's
   colours, radius and typography stay in the template's own styles.
   ===================================================================== */
.dby-news-popup-form .dby-newsletter .dby-newsletter__row { flex-direction: column; gap: 14px; max-width: 100%; }
.dby-news-popup-form .dby-newsletter .dby-newsletter__field,
.dby-news-popup-form .dby-newsletter .dby-newsletter__button { width: 100%; max-width: 100%; flex: 0 0 auto; }
.dby-news-popup-form .dby-newsletter .dby-newsletter__button { justify-content: center; padding: 0 28px; }
.dby-news-popup-form .dby-newsletter .dby-newsletter__consent { margin-top: 14px; }