/* ==========================================================================
   Daphne Maierna – Components (prefix dm-)
   Add these classes in Beaver Builder under Advanced > Class.
   ========================================================================== */

/* Section shells ---------------------------------------------------------- */
.dm-sec {
	padding: var(--dm-space-section) var(--dm-gutter);
}
.dm-sec--tight { padding-top: var(--dm-space-block); padding-bottom: var(--dm-space-block); }
.dm-wrap {
	max-width: var(--dm-content);
	margin: 0 auto;
}
.dm-wrap--text { max-width: var(--dm-text); }
.dm-band--navy {
	background: var(--dm-navy);
	color: var(--dm-cream);
}
.dm-band--navy :is(h1, h2, h3, h4, p, li, a:not(.dm-btn)) { color: var(--dm-cream); }
.dm-band--blush { background: var(--dm-blush); }
.dm-band--cream { background: var(--dm-cream); }

/* Text roles -------------------------------------------------------------- */
.dm-kicker {
	display: inline-flex;
	align-items: center;
	gap: .9em;
	margin: 0 0 1.25rem;
	font-family: var(--dm-sans);
	font-size: var(--dm-fs-label);
	font-weight: 400;
	letter-spacing: .2em;
	line-height: 1.4;
	text-transform: uppercase;
	color: inherit;
}
.dm-kicker::before {
	content: "";
	display: inline-block !important;
	width: 28px;
	height: 1px;
	background: var(--dm-orange);
	flex: 0 0 auto;
}
.dm-kicker::after { content: none !important; }
.dm-lead {
	font-size: var(--dm-fs-lead);
	line-height: 1.55;
	max-width: 34em;
}
.dm-body { max-width: var(--dm-text); }
.dm-body p + p { margin-top: 1.1em; }
.dm-statement {
	font-family: var(--dm-serif);
	font-weight: 700;
	font-size: var(--dm-fs-statement);
	line-height: 1.16;
	letter-spacing: -.01em;
	text-wrap: balance;
	max-width: 24ch;
}
.dm-statement--center { margin-left: auto; margin-right: auto; text-align: center; }
.dm-proof {
	font-size: .875rem;
	letter-spacing: .08em;
	color: var(--dm-ink-soft);
}
.dm-proof span + span::before { content: "\00B7"; margin: 0 .6em; color: var(--dm-orange); }
.dm-rule {
	border: 0;
	border-top: 1px solid var(--dm-line);
	margin: var(--dm-space-block) 0;
}
.dm-band--navy .dm-rule { border-top-color: var(--dm-line-light); }

/* Editorial quote -------------------------------------------------------- */
.dm-quote {
	max-width: 760px;
	margin: 0;
	padding: 0;
	border: 0;
}
.dm-quote::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	background: var(--dm-orange);
	margin-bottom: 1.75rem;
}
.dm-quote blockquote,
.dm-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--dm-serif);
	font-weight: 700;
	font-size: var(--dm-fs-quote);
	line-height: 1.3;
	letter-spacing: -.005em;
	font-style: normal;
	color: inherit;
}
.dm-quote blockquote p + p { margin-top: .8em; }
.dm-quote figcaption,
.dm-quote__cite {
	margin-top: 1.5rem;
	font-family: var(--dm-sans);
	font-size: .875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.dm-quote__role {
	display: block;
	margin-top: .3rem;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--dm-ink-soft);
}
.dm-band--navy .dm-quote__role { color: rgba(254, 242, 229, .78); }
.dm-quote--center { margin-left: auto; margin-right: auto; text-align: center; }
.dm-quote--center::before { margin-left: auto; margin-right: auto; }

/* Cards (only for steps, results, practical items) ----------------------- */
.dm-cards {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	grid-template-columns: repeat(var(--dm-cols, 3), minmax(0, 1fr));
}
.dm-cards--2 { --dm-cols: 2; }
.dm-cards--4 { --dm-cols: 4; }
.dm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding: clamp(28px, 3vw, 44px);
	background: var(--dm-card);
	border: 1px solid var(--dm-line);
	border-radius: 2px;
}
.dm-band--navy .dm-card {
	background: rgba(254, 242, 229, .05);
	border-color: var(--dm-line-light);
}
.dm-card__num {
	font-family: var(--dm-serif);
	font-weight: 700;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--dm-orange);
}
.dm-card__title {
	margin: 0;
	font-family: var(--dm-serif);
	font-weight: 700;
	font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
	line-height: 1.2;
}
.dm-card__text { margin: 0; }
.dm-card__text p + p { margin-top: .8em; }
@media (max-width: 1024px) { .dm-cards--4 { --dm-cols: 2; } }
@media (max-width: 767px) { .dm-cards, .dm-cards--2, .dm-cards--4 { --dm-cols: 1; } }

/* Client logo row (white logos on navy) ----------------------------------- */
.dm-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px 48px;
}
.dm-logos__label {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--dm-fs-label);
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	max-width: none;
}
.dm-logos__list {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 28px 56px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dm-logos__list img {
	display: block;
	width: auto;
	height: 40px;
	max-width: 180px;
	object-fit: contain;
	opacity: .92;
}
.dm-logos__list img.dm-logo--tall { height: 64px; }
@media (max-width: 767px) {
	.dm-logos { justify-content: flex-start; }
	.dm-logos__list { justify-content: flex-start; gap: 28px 40px; }
	.dm-logos__list img { height: 32px; }
	.dm-logos__list img.dm-logo--tall { height: 52px; }
}

/* Photos ------------------------------------------------------------------ */
.dm-photo { margin: 0; }
.dm-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dm-photo--portrait img { aspect-ratio: 4 / 5; }
.dm-photo--landscape img { aspect-ratio: 3 / 2; }
.dm-photo--small { max-width: 380px; }
.dm-photo figcaption { margin-top: .75rem; font-size: .875rem; color: var(--dm-ink-soft); }

/* Two-column split (text + photo) ---------------------------------------- */
.dm-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.dm-split--reverse > :first-child { order: 2; }
.dm-split--top { align-items: start; }
@media (max-width: 900px) {
	.dm-split { grid-template-columns: 1fr; }
	.dm-split--reverse > :first-child { order: 0; }
}

/* Testimonial carousel --------------------------------------------------- */
.dm-carousel { position: relative; }
.dm-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dm-carousel__track::-webkit-scrollbar { display: none; }
.dm-carousel__slide { scroll-snap-align: start; padding: 0 2px; }
.dm-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 2.5rem;
}
.dm-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--dm-line);
	border-radius: 50%;
	color: var(--dm-navy);
	font-size: 1.125rem;
	cursor: pointer;
	transition: border-color .35s var(--dm-ease), background-color .35s var(--dm-ease);
}
.dm-carousel__btn:hover { border-color: var(--dm-navy); background: rgba(27, 52, 89, .05); }
.dm-carousel__dots { display: flex; gap: 10px; }
.dm-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dm-line);
	cursor: pointer;
}
.dm-carousel__dot[aria-current="true"] { background: var(--dm-orange); }

/* FAQ (details/summary) -------------------------------------------------- */
.dm-faq { max-width: 860px; border-bottom: 1px solid var(--dm-line); }
.dm-faq details { border-top: 1px solid var(--dm-line); }
.dm-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 1.5rem 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--dm-serif);
	font-weight: 700;
	font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
	line-height: 1.3;
}
.dm-faq summary::-webkit-details-marker { display: none; }
.dm-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--dm-sans);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--dm-orange);
	transition: transform .35s var(--dm-ease);
}
.dm-faq details[open] summary::after { transform: rotate(45deg); }
.dm-faq__answer { padding: 0 0 1.75rem; max-width: var(--dm-text); }
.dm-faq__answer p + p { margin-top: .9em; }

/* Price ------------------------------------------------------------------- */
.dm-price {
	font-family: var(--dm-serif);
	font-weight: 700;
	font-size: clamp(2.75rem, 2rem + 2.6vw, 4.25rem);
	line-height: 1;
}

/* Reveal (very subtle; off for reduced motion and in the editor) ----------- */
@media (prefers-reduced-motion: no-preference) {
	.dm-js .dm-reveal {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .8s var(--dm-ease), transform .8s var(--dm-ease);
	}
	.dm-js .dm-reveal.is-in { opacity: 1; transform: none; }
}
.fl-builder-edit .dm-reveal { opacity: 1 !important; transform: none !important; }

/* Screen-reader only ------------------------------------------------------ */
.dm-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
/* --------------------------------------------------------------------------
   Round 1 refinements (style guide review, 14 Oct)
   -------------------------------------------------------------------------- */
/* Centred quotes: beat the design-system reset on figure/blockquote */
.dm-quote.dm-quote--center { margin-left: auto !important; margin-right: auto !important; }
/* Card numbers in the sans: the serif's old-style figures read "01" as "OI" */
.dm-card__num {
	font-family: var(--dm-sans);
	font-weight: 400;
	font-size: .875rem;
	letter-spacing: .2em;
	line-height: 1.4;
}
.dm-card__num::after {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	margin-top: .9rem;
	background: var(--dm-orange);
}
/* Logo sizing per shape (add the class to the logo image or its list item) */
.dm-logos__list img { max-height: 48px; max-width: 160px; height: auto; width: auto; }
.dm-logos__list .logo-tall img, .dm-logos__list img.logo-tall { max-height: 72px; }
.dm-logos__list .logo-wide img, .dm-logos__list img.logo-wide { max-width: 210px; max-height: 32px; }
@media (max-width: 767px) {
	.dm-logos__list img { max-height: 40px; max-width: 130px; }
	.dm-logos__list .logo-tall img { max-height: 60px; }
	.dm-logos__list .logo-wide img { max-width: 170px; max-height: 26px; }
}