/* Hallmark · macrostructure: Split Studio · H2 split-diptych hero
 * theme: custom · vibe: "trust + approval, navy + go-green" · paper: oklch(100% 0 0) · accent: oklch(86% 0.23 143)
 * display: Geist · body: Geist · axes: light / geometric-sans / chromatic-green ~143
 * genre: modern-minimal · nav: N1b · footer: Ft1 · studied: no · context: user-provided · v1.1.1
 * pre-emit critique: P5 H4 E4 S4 R5 V4
 */

:root {
	--cf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--cf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--cf-dur: 190ms;
	--cf-radius: 18px;
	--cf-radius-sm: 12px;
	--cf-shadow-card: 0 1px 2px rgba(0, 45, 95, 0.06), 0 18px 40px -20px rgba(0, 45, 95, 0.28);
	--cf-shadow-soft: 0 1px 2px rgba(0, 45, 95, 0.05), 0 10px 24px -16px rgba(0, 45, 95, 0.20);
	--cf-ring: var(--wp--preset--color--green-deep);
	--cf-check: var(--wp--preset--color--green-deep);
	--cf-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7 9.5 16.5l-5.8-5.8' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Page floor: no horizontal scroll (gate 34) */
html, body { overflow-x: clip; }

h1, h2, h3, .cf-hero h1, .wp-block-heading {
	overflow-wrap: anywhere;
	min-width: 0;
}

/* Focus: instant, visible ring */
a:focus-visible, button:focus-visible, .wp-element-button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
	outline: 3px solid var(--cf-ring);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Buttons — hover lift */
.wp-element-button, .wp-block-button__link {
	transition: transform var(--cf-dur) var(--cf-ease-out), background-color var(--cf-dur) var(--cf-ease-out), box-shadow var(--cf-dur) var(--cf-ease-out);
	box-shadow: var(--cf-shadow-soft);
	text-decoration: none;
	line-height: 1.1;
}
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-element-button:active, .wp-block-button__link:active { transform: translateY(0); }
.wp-block-button.is-style-fill .wp-block-button__link.has-green-background-color,
.wp-block-button__link.has-green-background-color { color: var(--wp--preset--color--navy); }

/* =====================================================================
   HEADER · N1b three-section, white, hide-on-scroll
   ===================================================================== */
.cf-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	transition: transform 0.38s var(--cf-ease-out), box-shadow 0.3s var(--cf-ease-out), background-color 0.3s var(--cf-ease-out);
	will-change: transform;
}
.cf-header--hidden { transform: translateY(-100%); }
.cf-header--scrolled { background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 30px -18px rgba(0, 45, 95, 0.45); }
.cf-header .wp-block-site-logo img, .cf-header img { max-height: 60px; width: auto; transition: opacity var(--cf-dur) var(--cf-ease-out); }
.cf-header .wp-block-site-logo a:hover img { opacity: 0.82; }
/* Center the nav links within the navbar, regardless of logo / right-group widths */
.cf-header__row { position: relative; }
@media (min-width: 782px) {
	.cf-nav {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}
.cf-nav a {
	position: relative;
	color: var(--wp--preset--color--navy);
	font-weight: 500; text-decoration: none;
}
.cf-nav a::after {
	content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px;
	background: var(--wp--preset--color--green); border-radius: 2px;
	transform: scaleX(0); transform-origin: left center; transition: transform 0.28s var(--cf-ease-out);
}
.cf-nav a:hover { color: var(--wp--preset--color--green-deep); }
.cf-nav a:hover::after { transform: scaleX(1); }
.cf-header__phone { font-weight: 600; color: var(--wp--preset--color--navy); text-decoration: none; white-space: nowrap; }

/* =====================================================================
   HERO · split diptych (text left, application card right)
   ===================================================================== */
.cf-hero {
	position: relative;
	background: #e6f0fb;
	background-image: radial-gradient(55% 70% at 78% 52%, rgba(0, 45, 95, 0.10) 0%, rgba(0, 45, 95, 0) 62%);
	color: var(--wp--preset--color--navy);
	padding-bottom: var(--wp--preset--spacing--40) !important;
	/* contained rounded panel with white space on the sides */
	margin-top: 1rem !important;
	margin-left: clamp(1rem, 4vw, 2.75rem) !important;
	margin-right: clamp(1rem, 4vw, 2.75rem) !important;
	border-radius: 32px;
	overflow: hidden;
}
.cf-hero h1 {
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.03em;
	font-weight: 800;
	font-size: clamp(2.4rem, 1.4rem + 3.4vw, 3.9rem);
}
.cf-hero .cf-lead { color: var(--wp--preset--color--ink); font-size: 1.1875rem; line-height: 1.55; max-width: 36ch; }
.cf-eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--wp--preset--color--green-deep);
	background: var(--wp--preset--color--paper-2);
	border: 1px solid var(--wp--preset--color--rule);
	padding: 0.4rem 0.85rem; border-radius: 999px;
}

/* Hero car image — bleeds off the right edge (page-level overflow-x:clip contains it) */
.cf-hero__car { position: relative; }
.cf-hero__car img {
	width: 100%;
	height: auto;
	display: block;
	transform: scale(1.06) translateX(4%);
	transform-origin: center right;
	filter: drop-shadow(0 26px 30px rgba(0, 45, 95, 0.30));
}
@media (prefers-reduced-motion: no-preference) {
	html.cf-js .cf-hero__car { opacity: 0; }
	html.cf-js .cf-hero__car img { transition: opacity 0.7s var(--cf-ease-out), transform 0.7s var(--cf-ease-out); }
	html.cf-js .cf-hero__car.is-visible { opacity: 1; }
}

/* Decorative sparkle cluster */
.cf-spark { position: absolute; pointer-events: none; z-index: 1; }
.cf-spark svg { display: block; width: 100%; height: auto; }

/* Floating quick-request bar (CF7 styled horizontally), overlaps hero bottom */
.cf-herobar {
	position: relative;
	z-index: 4;
	background: #fff;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 18px;
	box-shadow: var(--cf-shadow-card);
	padding: 1.25rem 1.4rem;
	margin-top: 0;
	margin-bottom: 0;
}
.cf-herobar .wpcf7 { margin: 0; }
.cf-herobar .wpcf7-form { display: flex; flex-wrap: wrap; align-items: flex-end; row-gap: 1rem; column-gap: 2.5rem; }
.cf-herobar .wpcf7-form > p { margin: 0; flex: 1 1 160px; min-width: 160px; }
.cf-herobar .wpcf7-form label {
	display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.04em; color: var(--wp--preset--color--muted); margin-bottom: 0.25rem;
}
.cf-herobar .wpcf7-form input[type="text"],
.cf-herobar .wpcf7-form input[type="tel"],
.cf-herobar .wpcf7-form input[type="email"] {
	width: 100%; font: inherit; font-size: 0.98rem; color: var(--wp--preset--color--ink);
	background: #fff; border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px; padding: 0.72rem 0.85rem;
	transition: border-color var(--cf-dur) var(--cf-ease-out), box-shadow var(--cf-dur) var(--cf-ease-out);
}
.cf-herobar .wpcf7-form input:focus { border-color: var(--wp--preset--color--green-deep); box-shadow: 0 0 0 3px rgba(15, 138, 54, 0.16); outline: none; }
.cf-herobar .wpcf7-form p:has(input[type="submit"]) { flex: 0 0 auto; }
.cf-herobar .wpcf7-form input[type="submit"] {
	font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
	color: var(--wp--preset--color--navy); background: var(--wp--preset--color--green);
	border: 0; border-radius: 999px; padding: 0.82rem 1.6rem; box-shadow: var(--cf-shadow-soft);
	transition: transform var(--cf-dur) var(--cf-ease-out), filter var(--cf-dur) var(--cf-ease-out);
}
.cf-herobar .wpcf7-form input[type="submit"]:hover { transform: translateY(-2px); filter: brightness(0.97); }
.cf-herobar .cf-card__note { flex-basis: 100%; margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--wp--preset--color--muted); }
.cf-herobar .wpcf7-spinner { margin: 0 0 0 0.4rem; }
.cf-herobar .wpcf7 form .wpcf7-response-output { flex-basis: 100%; margin: 0.6rem 0 0; border-radius: 10px; font-size: 0.88rem; }

/* (form bar now sits inside the rounded hero panel — no overlap clearance needed) */

/* Application card */
.cf-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--cf-radius);
	box-shadow: var(--cf-shadow-card);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	overflow: hidden;
}
.cf-card::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--green) 0%, var(--wp--preset--color--green-deep) 100%);
}
.cf-card__title { font-weight: 700; color: var(--wp--preset--color--navy); font-size: 1.3rem; line-height: 1.2; }
.cf-card__note { color: var(--wp--preset--color--muted); font-size: 0.9rem; }
.cf-card .wpcf7-form p { margin: 0 0 0.85rem; }
.cf-card .wpcf7-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--navy); margin-bottom: 0.3rem; }
.cf-card .wpcf7-form input[type="text"],
.cf-card .wpcf7-form input[type="tel"],
.cf-card .wpcf7-form input[type="email"] {
	width: 100%; font: inherit; font-size: 1rem; color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--cf-radius-sm); padding: 0.8rem 0.95rem;
	transition: border-color var(--cf-dur) var(--cf-ease-out), box-shadow var(--cf-dur) var(--cf-ease-out);
}
.cf-card .wpcf7-form input::placeholder { color: var(--wp--preset--color--muted); }
.cf-card .wpcf7-form input:focus { border-color: var(--wp--preset--color--green-deep); box-shadow: 0 0 0 3px rgba(15, 138, 54, 0.16); outline: none; }
.cf-card .wpcf7-form input[type="submit"] {
	width: 100%; font: inherit; font-weight: 600; font-size: 1.05rem; cursor: pointer;
	color: var(--wp--preset--color--navy); background: var(--wp--preset--color--green);
	border: 0; border-radius: 999px; padding: 0.95rem 1.5rem; box-shadow: var(--cf-shadow-soft);
	transition: transform var(--cf-dur) var(--cf-ease-out), filter var(--cf-dur) var(--cf-ease-out);
}
.cf-card .wpcf7-form input[type="submit"]:hover { transform: translateY(-2px); filter: brightness(0.97); }
.cf-card .wpcf7-spinner { margin: 0.5rem auto 0; display: block; }
.cf-card .wpcf7 form .wpcf7-response-output { border-radius: var(--cf-radius-sm); font-size: 0.9rem; margin: 0.75rem 0 0; }

/* =====================================================================
   TRUST CHIPS
   ===================================================================== */
.cf-chips { gap: 0.65rem; }
.cf-chip {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: var(--wp--preset--color--paper-2);
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--navy);
	font-weight: 500; font-size: 0.95rem;
	padding: 0.55rem 1rem 0.55rem 0.85rem; border-radius: 999px;
	transition: transform var(--cf-dur) var(--cf-ease-out), box-shadow var(--cf-dur) var(--cf-ease-out), background-color var(--cf-dur) var(--cf-ease-out), border-color var(--cf-dur) var(--cf-ease-out);
}
.cf-chip::before {
	content: ""; width: 1.05rem; height: 1.05rem; flex: 0 0 auto;
	background-color: var(--cf-check);
	-webkit-mask: var(--cf-check-mask) center / contain no-repeat;
	mask: var(--cf-check-mask) center / contain no-repeat;
}
.cf-chip:hover { background: #fff; box-shadow: var(--cf-shadow-soft); transform: translateY(-3px); }

/* =====================================================================
   STEPS · comment ça marche (numbered circles)
   ===================================================================== */
.cf-steps { gap: 1.5rem; }
.cf-step {
	position: relative; height: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--cf-radius);
	padding: 1.75rem 1.5rem 1.5rem;
	transition: transform var(--cf-dur) var(--cf-ease-out), box-shadow var(--cf-dur) var(--cf-ease-out), border-color var(--cf-dur) var(--cf-ease-out);
}
.cf-step:hover { transform: translateY(-6px); box-shadow: var(--cf-shadow-card); }
.cf-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.6rem; height: 2.6rem; border-radius: 50%;
	background: var(--wp--preset--color--navy); color: #fff;
	font-weight: 700; font-size: 1.15rem; margin-bottom: 0.9rem;
}
.cf-step h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }

/* =====================================================================
   BENEFITS · pourquoi (check-list cards)
   ===================================================================== */
.cf-benefits { gap: 1.5rem; align-items: start; }
.cf-benefit {
	background: var(--wp--preset--color--paper-2);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--cf-radius);
	padding: 1.6rem 1.5rem;
	transition: transform var(--cf-dur) var(--cf-ease-out), box-shadow var(--cf-dur) var(--cf-ease-out), background-color var(--cf-dur) var(--cf-ease-out), border-color var(--cf-dur) var(--cf-ease-out);
}
.cf-benefit:hover { background: #fff; transform: translateY(-6px); box-shadow: var(--cf-shadow-card); }
.cf-benefit h3 { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 1.15rem; margin: 0 0 0.5rem; }
.cf-benefit h3::before {
	content: ""; margin-top: 0.15em; width: 1.25rem; height: 1.25rem; flex: 0 0 auto;
	background-color: var(--wp--preset--color--muted);
	-webkit-mask: var(--cf-check-mask) center / contain no-repeat;
	mask: var(--cf-check-mask) center / contain no-repeat;
	transition: background-color var(--cf-dur) var(--cf-ease-out);
}
.cf-benefit:hover h3::before { background-color: var(--wp--preset--color--green-deep); }
.cf-benefit p { color: var(--wp--preset--color--ink); margin: 0; }

/* =====================================================================
   PARTNERS · placeholder lender logo wall
   ===================================================================== */
.cf-partners { background: var(--wp--preset--color--paper-2); }
.cf-logos { gap: 1rem; }
.cf-logo {
	display: flex; align-items: center; justify-content: center; height: 64px;
	background: #fff; border: 1px dashed var(--wp--preset--color--rule);
	border-radius: var(--cf-radius-sm); color: var(--wp--preset--color--muted);
	font-size: 0.85rem; font-weight: 500;
	transition: border-color var(--cf-dur) var(--cf-ease-out), color var(--cf-dur) var(--cf-ease-out);
}
.cf-logo:hover { border-color: var(--wp--preset--color--green); color: var(--wp--preset--color--navy); }

/* =====================================================================
   FAQ · accordion
   ===================================================================== */
.cf-faq .wp-block-details {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--cf-radius-sm);
	padding: 0.25rem 1.25rem; margin-bottom: 0.85rem; background: var(--wp--preset--color--base);
	transition: border-color var(--cf-dur) var(--cf-ease-out);
}
.cf-faq .wp-block-details summary {
	cursor: pointer; font-weight: 600; color: var(--wp--preset--color--navy);
	padding: 1rem 0; list-style: none; font-size: 1.05rem;
	transition: color var(--cf-dur) var(--cf-ease-out);
}
.cf-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.cf-faq .wp-block-details summary::after { content: "+"; float: right; font-weight: 600; color: var(--wp--preset--color--green-deep); }
.cf-faq .wp-block-details[open] summary::after { content: "\2013"; }
.cf-faq .wp-block-details:hover summary { color: var(--wp--preset--color--green-deep); }
.cf-faq .wp-block-details p { margin: 0 0 1rem; color: var(--wp--preset--color--ink); }

/* No focus rectangle on mouse click — keep the ring for keyboard users only */
.cf-faq .wp-block-details summary:focus:not(:focus-visible) { outline: none; }

/* Smooth open/close (progressive enhancement; instant on unsupported browsers) */
@supports (interpolate-size: allow-keywords) {
	:root { interpolate-size: allow-keywords; }
	.cf-faq .wp-block-details::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: block-size 0.34s var(--cf-ease-out), opacity 0.34s var(--cf-ease-out), content-visibility 0.34s allow-discrete;
	}
	.cf-faq .wp-block-details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* =====================================================================
   CTA STRIP · navy band
   ===================================================================== */
.cf-cta {
	max-width: 1000px;
	margin-inline: auto;
	border-radius: var(--cf-radius);
	background: var(--wp--preset--color--navy);
	background-image: radial-gradient(90% 140% at 100% 0%, rgba(99, 243, 80, 0.18) 0%, rgba(99, 243, 80, 0) 50%);
}
.cf-cta :where(h2, p) { color: #fff; }
.cf-cta p { color: rgba(255, 255, 255, 0.82); }

/* =====================================================================
   PARTNER BANK LOGOS · real logos, greyscale → colour on hover
   ===================================================================== */
.cf-banks {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: clamp(1.75rem, 5vw, 3.5rem);
}
.cf-banks .wp-block-image { margin: 0; }
.cf-banks img {
	max-height: 46px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter var(--cf-dur) var(--cf-ease-out), opacity var(--cf-dur) var(--cf-ease-out);
}
.cf-banks .wp-block-image:hover img { filter: grayscale(0); opacity: 1; }

/* =====================================================================
   FOOTER · Ft1 mast-headed, navy band
   ===================================================================== */
.cf-footer { background: var(--wp--preset--color--navy-deep); color: rgba(255, 255, 255, 0.78); }
.cf-footer :where(h2, h3, h4, strong, .wp-block-site-title a) { color: #fff; }
.cf-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.cf-footer a:hover { color: var(--wp--preset--color--green); }
/* Footer link lists: align with their heading (no bullet/indent), one line per item */
.cf-footer .wp-block-list { list-style: none; margin: 0.9rem 0 0; padding-left: 0; line-height: 1.35; }
.cf-footer .wp-block-list li { white-space: nowrap; }
.cf-footer .cf-legal { border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; }
.cf-legal-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; }
.cf-legal-btn {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: color var(--cf-dur) var(--cf-ease-out);
}
.cf-legal-btn:hover { color: rgba(255, 255, 255, 0.92); text-decoration: underline; }

/* (section-heading underline accent removed per request) */

/* =====================================================================
   BLOCK REVEAL · Gutenberg-safe (gated by html.cf-js)
   ===================================================================== */
html.cf-js :is(
	.cf-hero .cf-eyebrow, .cf-hero h1, .cf-hero .cf-lead, .cf-hero__assurance, .cf-card,
	.cf-chips-section > h2, .cf-chip,
	.cf-steps-section > h2, .cf-steps-section > p, .cf-step,
	.cf-why > h2, .cf-benefit,
	.cf-partners > p, .cf-logo,
	.cf-faq > h2, .cf-faq .wp-block-details,
	.cf-cta > h2, .cf-cta > p, .cf-cta .wp-block-buttons
) {
	opacity: 0; transform: translateY(22px);
	transition: opacity 0.6s var(--cf-ease-out), transform 0.6s var(--cf-ease-out);
	will-change: opacity, transform;
}
html.cf-js :is(
	.cf-hero .cf-eyebrow, .cf-hero h1, .cf-hero .cf-lead, .cf-hero__assurance, .cf-card,
	.cf-chips-section > h2, .cf-chip,
	.cf-steps-section > h2, .cf-steps-section > p, .cf-step,
	.cf-why > h2, .cf-benefit,
	.cf-partners > p, .cf-logo,
	.cf-faq > h2, .cf-faq .wp-block-details,
	.cf-cta > h2, .cf-cta > p, .cf-cta .wp-block-buttons
).is-visible { opacity: 1; transform: none; }

/* Hover lift must win over the reveal's `.is-visible { transform: none }` */
html.cf-js .cf-step.is-visible:hover,
html.cf-js .cf-benefit.is-visible:hover { transform: translateY(-6px); }
html.cf-js .cf-chip.is-visible:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
	*, .cf-header, .wp-element-button, .wp-block-button__link {
		transition-duration: 0.01ms !important; animation-duration: 0.01ms !important;
	}
	html.cf-js :is(.cf-step, .cf-benefit, .cf-chip, .cf-card, .cf-logo, .cf-hero h1, .cf-hero .cf-lead) {
		opacity: 1 !important; transform: none !important;
	}
}

/* =====================================================================
   RESPONSIVE · full-width + verified at 320 / 375 / 414 / 768
   ===================================================================== */
@media (max-width: 781px) {
	.cf-hero__grid.wp-block-columns, .cf-split.wp-block-columns { flex-direction: column; }
	.cf-hero .cf-lead { max-width: none; }
	.cf-header__row { flex-wrap: wrap; row-gap: 0.5rem; }
	.cf-nav { display: none; }
	.cf-header .wp-block-site-logo img, .cf-header img { max-height: 46px; }
}
@media (max-width: 600px) {
	.cf-step__num { width: 2.3rem; height: 2.3rem; }
}