/**
 * Ozyzor custom Elementor widgets.
 * All layout lives here, never in Elementor control selectors, so no
 * breakpoint-name lookups can ever fatal the CSS generator.
 */

.ozw-abouthero,
.ozw-apart,
.ozw-ctaband,
.ozw-quotes,
.ozw-benefits {
	--ozw-navy:  #1B2A5E;
	--ozw-ink:   #111111;
	--ozw-muted: #6E6E6E;
	--ozw-dark:  #0D0D0D;
	--ozw-font:  "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-family: var(--ozw-font);
	box-sizing: border-box;
}
.ozw-abouthero *, .ozw-apart *, .ozw-ctaband *, .ozw-quotes *, .ozw-benefits * { box-sizing: border-box; }

/* Shared button ------------------------------------------------------- */
.ozw-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--ozw-ink); color: #fff;
	font-size: 15px; font-weight: 600; line-height: 1;
	padding: 16px 40px; border-radius: 999px;
	text-decoration: none; border: 0; cursor: pointer;
	transition: transform .12s ease, background-color .18s ease;
}
.ozw-btn:hover { background: #262626; color: #fff; }
.ozw-btn:active { transform: translateY(1px); }
.ozw-btn--light { background: #fff; color: var(--ozw-ink); }
.ozw-btn--light:hover { background: #efefef; color: var(--ozw-ink); }

/* 1. About hero -------------------------------------------------------- */
.ozw-abouthero {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 60px;
	align-items: center;
}
.ozw-abouthero__title {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.5px;
	color: var(--ozw-ink);
}
.ozw-abouthero__lead {
	margin: 20px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ozw-muted);
	max-width: 46ch;
}
.ozw-abouthero .ozw-btn { margin-top: 30px; min-width: 200px; }

.ozw-abouthero__bento {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 18px;
	min-height: 340px;
}
.ozw-abouthero__cell {
	background: #E9E9E9 center/cover no-repeat;
	border-radius: 4px;
	min-height: 150px;
}
.ozw-abouthero__cell--a { grid-column: 1; grid-row: 1; }
.ozw-abouthero__cell--b { grid-column: 1; grid-row: 2; }
.ozw-abouthero__cell--c { grid-column: 2; grid-row: 1 / span 2; }

/* 2. What sets us apart ------------------------------------------------ */
.ozw-apart { text-align: center; }
.ozw-apart__eyebrow {
	margin: 0 0 14px;
	font-size: 12px; font-weight: 500;
	letter-spacing: 3px; text-transform: uppercase;
	color: var(--ozw-muted);
}
.ozw-apart__title {
	margin: 0;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700; color: var(--ozw-ink);
}
.ozw-apart__intro {
	margin: 18px auto 0;
	max-width: 60ch;
	font-size: 15px; line-height: 1.7; color: var(--ozw-muted);
}
.ozw-apart__intro strong { color: var(--ozw-ink); font-weight: 700; }

.ozw-apart__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin-top: 46px;
	text-align: left;
}
.ozw-apart__card {
	background: #fff;
	border-radius: 4px;
	padding: 30px 28px 34px;
	box-shadow: 0 10px 30px rgba(17, 22, 45, .07);
	display: flex; flex-direction: column;
}
.ozw-apart__num {
	position: relative;
	display: inline-flex; align-items: center;
	font-size: 30px; font-weight: 800; color: var(--ozw-navy);
	line-height: 1; margin-bottom: 26px;
	align-self: flex-start;
}
/* The blob sits behind the numeral but must stay in front of the card's own
   white background, so it uses z-index 0 and the digits are lifted above it.
   A negative z-index here would drop it behind the card entirely. */
.ozw-apart__blob {
	position: absolute;
	left: 14px; top: -12px;
	width: 42px; height: 42px;
	border-radius: 50%;
	z-index: 0;
}
.ozw-apart__digits { position: relative; z-index: 1; }
.ozw-apart__cardtitle {
	margin: 0 0 14px;
	font-size: 17px; font-weight: 700; color: var(--ozw-navy);
}
.ozw-apart__text {
	margin: 0 0 22px;
	font-size: 13.5px; line-height: 1.75; color: var(--ozw-muted);
	flex: 1 1 auto;
}
.ozw-apart__more {
	font-size: 13px; font-weight: 600; color: var(--ozw-navy);
	text-decoration: none; align-self: flex-start;
}
.ozw-apart__more:hover { color: var(--ozw-ink); }
.ozw-apart__more span { display: inline-block; transition: transform .18s ease; }
.ozw-apart__more:hover span { transform: translateX(3px); }

/* 3. CTA band ---------------------------------------------------------- */
.ozw-ctaband {
	background: var(--ozw-dark);
	border-radius: 16px;
	padding: 66px 40px 70px;
	text-align: center;
	color: #fff;
}
.ozw-ctaband__title {
	margin: 0;
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700; line-height: 1.28; color: #fff;
}
.ozw-ctaband__text {
	margin: 20px auto 0;
	max-width: 58ch;
	font-size: 14.5px; line-height: 1.7;
	color: rgba(255, 255, 255, .78);
}
.ozw-ctaband .ozw-btn { margin-top: 30px; }

/* 4. Quote row --------------------------------------------------------- */
.ozw-quotes { text-align: center; }
.ozw-quotes__title {
	margin: 0;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700; color: var(--ozw-ink);
}
.ozw-quotes__intro {
	margin: 14px auto 0;
	max-width: 54ch;
	font-size: 14px; line-height: 1.7; color: var(--ozw-muted);
}
.ozw-quotes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px;
	margin-top: 46px;
	text-align: left;
}
.ozw-quote { margin: 0; }
.ozw-quote__mark {
	display: block;
	font-size: 52px; line-height: .8;
	color: #C9C9C9; font-weight: 700;
	margin-bottom: 14px;
}
.ozw-quote__text {
	margin: 0;
	font-size: 13.5px; line-height: 1.8; color: var(--ozw-ink);
	quotes: none;
}
.ozw-quote__author {
	margin-top: 20px;
	font-size: 13px; font-weight: 600; color: var(--ozw-ink);
}

/* 5. Benefit panel ----------------------------------------------------- */
.ozw-benefits {
	position: relative;
	display: flex; align-items: center; gap: 14px;
}
.ozw-benefits__panel {
	flex: 1 1 auto;
	background: var(--ozw-dark);
	border-radius: 12px;
	padding: 40px 46px 44px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	color: #fff;
}
.ozw-benefits__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	background: #fff; color: var(--ozw-dark);
	border-radius: 6px;
	margin-bottom: 16px;
}
.ozw-benefits__icon svg { width: 15px; height: 15px; fill: currentColor; }
.ozw-benefits__icon i { font-size: 14px; }
.ozw-benefits__title {
	margin: 0 0 16px;
	font-size: 16px; font-weight: 700; color: #fff;
}
.ozw-benefits__list { list-style: none; margin: 0; padding: 0; }
.ozw-benefits__list li {
	position: relative;
	padding-left: 16px;
	font-size: 13px; line-height: 1.5;
	color: rgba(255, 255, 255, .84);
	margin-bottom: 10px;
}
.ozw-benefits__list li::before {
	content: "+";
	position: absolute; left: 0; top: 0;
	color: rgba(255, 255, 255, .84);
}
.ozw-benefits__arrow {
	flex: none;
	width: 34px; height: 34px;
	background: transparent; border: 0; cursor: pointer;
	font-size: 30px; line-height: 1;
	color: #8A8A8A;
}
.ozw-benefits__arrow:hover { color: var(--ozw-ink); }

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.ozw-abouthero { grid-template-columns: 1fr; gap: 40px; }
	.ozw-apart__grid { grid-template-columns: 1fr; }
	.ozw-quotes__grid { grid-template-columns: 1fr; gap: 34px; }
	.ozw-benefits__panel { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 700px) {
	.ozw-abouthero__bento { min-height: 260px; gap: 12px; }
	.ozw-ctaband { padding: 48px 24px 52px; border-radius: 12px; }
	.ozw-benefits__panel { padding: 32px 26px 36px; }
	.ozw-benefits__arrow { display: none; }
}
