/* ==========================================================================
   Stonebridge Financial (stonebridge)

   Loaded AFTER /common/css/main.min.css (Bootstrap 5.3).

   The approach here is to RETHEME Bootstrap rather than replace it: Bootstrap
   5.3 drives everything off CSS variables, so re-pointing --bs-* below makes
   the stock utilities and components (.btn-primary, .text-primary, .shadow-lg,
   .rounded-4, .form-control, .modal, the grid, spacing…) render in the brand's
   colours, radii and shadows. Layout, spacing and typography live in Bootstrap
   utility classes in the .ejs files.

   What remains below is only what Bootstrap genuinely has no equivalent for:
   the overlapping hero composition, the fixed nav's scroll state, the sticky
   mobile bar, the brand gradients, the fluid display type, and the markup we
   don't own (the shared cookie-consent partial and the validation script's
   label.error-message).
   ========================================================================== */

body {
	/* ---------- Brand palette ---------- */
	--sb-blue: #1847ED;
	--sb-blue-hover: #1340D6;
	--sb-blue-deep: #0D36C5;
	--sb-blue-tint: #E9EDFF;
	--sb-sky-top: #06407A;
	--sb-sky-bottom: #094F87;
	--sb-ink: #0B0D12;
	--sb-star: #FFB800;

	/* Contract with the shared bundle: cookie-consent.scss styles the Accept
	   button as background-color: var(--primary-color). Every campaign defines
	   it; without it the button renders with no background at all. */
	--primary-color: var(--sb-blue);

	--sb-font-display: "Onest", "Inter", system-ui, sans-serif;
	--sb-nav-h: 76px;
	--sb-gutter: clamp(1rem, 4vw, 2.5rem);
	--sb-ease: cubic-bezier(.22, 1, .36, 1);

	/* ---------- Bootstrap retheme ----------
	   These re-point the stock Bootstrap utilities/components at the brand. */
	--bs-primary: var(--sb-blue);
	--bs-primary-rgb: 24, 71, 237;
	--bs-primary-text-emphasis: var(--sb-blue-deep);
	--bs-primary-bg-subtle: var(--sb-blue-tint);

	--bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-body-color: #1F1F1F;
	--bs-body-color-rgb: 31, 31, 31;
	--bs-body-bg: #fff;
	--bs-emphasis-color: var(--sb-ink);
	/* .bg-dark resolves through --bs-dark-rgb; Bootstrap's default #212529 reads grey */
	--bs-dark: var(--sb-ink);
	--bs-dark-rgb: 11, 13, 18;
	--bs-secondary-color: #5A6070;
	--bs-secondary-bg: #F4F5F7;
	--bs-tertiary-bg: #EDEFF3;
	--bs-border-color: #E4E7EC;

	--bs-link-color: var(--sb-blue-deep);
	--bs-link-color-rgb: 13, 54, 197;
	--bs-link-hover-color: var(--sb-blue);
	--bs-link-hover-color-rgb: 24, 71, 237;

	--bs-border-radius: 10px;
	--bs-border-radius-sm: 8px;
	--bs-border-radius-lg: 16px;
	--bs-border-radius-xl: 24px;
	--bs-border-radius-xxl: 32px;

	--bs-box-shadow-sm: 0 1px 2px rgba(11, 13, 18, .06), 0 1px 3px rgba(11, 13, 18, .04);
	--bs-box-shadow: 0 8px 24px rgba(11, 13, 18, .08);
	--bs-box-shadow-lg: 0 24px 60px rgba(11, 13, 18, .18);
}

/* ---------- Base ---------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--sb-nav-h) + 1rem);
}

:focus-visible {
	outline: 3px solid var(--sb-blue);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

/* Bootstrap's `images` module isn't compiled into the shared bundle */
.img-fluid {
	max-width: 100%;
	height: auto;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: .75rem 1rem;
	background: #fff;
	border-radius: 0 0 var(--bs-border-radius) 0;
}

.skip-link:focus {
	left: 0;
}

/* ---------- Measure helpers ----------
   .container is Bootstrap's, just retheme'd to the brand width; the two
   modifiers are the narrower measures the form and thank-you pages use.
   Bootstrap's spacer scale stops at 3rem, so section rhythm needs its own. */
.container {
	max-width: 1200px;
	padding-inline: var(--sb-gutter);
}

.container--narrow {
	max-width: calc(820px + var(--sb-gutter) * 2);
}

.container--tight {
	max-width: calc(640px + var(--sb-gutter) * 2);
}

.section-y {
	padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
}

.section-y-b {
	padding-bottom: clamp(4.5rem, 3rem + 6vw, 8rem);
}

.mw-prose {
	max-width: 90ch;
}

.mw-lead {
	max-width: 34ch;
}

.mw-form {
	max-width: 560px;
}

.footer-logo {
	width: 177px;
}

/* ---------- Fieldset dividers ----------
   The fieldset reset lives here rather than as `border-0 p-0 m-0` in the markup:
   those utilities are !important and would beat the divider and spacing below.
   A <legend> punches a gap in its fieldset's border-block-start, so it is floated
   out of the way and the divider runs unbroken above it. */
.form-section {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.form-section + .form-section {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--bs-border-color);
}

.form-section__title {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: 1rem;
}

.form-section__title + * {
	clear: both;
}

/* ---------- Display type (brand face + fluid scale) ---------- */
.display-4,
.display-5,
.display-6 {
	font-family: var(--sb-font-display);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.06;
	text-wrap: balance;
}

.display-4 {
	font-size: clamp(2.25rem, 1.35rem + 3.3vw, 3.75rem);
}

.display-5 {
	font-size: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
}

/* The benefits heading is measure-constrained so it stacks like the reference
   instead of running the full width of the wider Bootstrap column. */
.feature__copy .display-5 {
	max-width: 14ch;
}

.display-6 {
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
}

.lead {
	font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
	font-weight: 400;
	line-height: 1.55;
}

.eyebrow {
	letter-spacing: .04em;
}

/* Bootstrap ships .fs-1 … .fs-6 only (.fs-6 being 1rem). These continue the
   scale downwards the way adding `7: .9375rem, 8: .8125rem` to its $font-sizes
   map would: .fs-7 for secondary copy (modal bodies), .fs-8 for fine legal print. */
.fs-7 {
	font-size: .9375rem !important;
}

.fs-8 {
	font-size: .8125rem !important;
}

.sb-title-sm {
	font-family: var(--sb-font-display);
	font-weight: 600;
	letter-spacing: -.015em;
}

/* ---------- Buttons: retheme Bootstrap's variables, keep its classes ---------- */
.btn {
	--bs-btn-padding-y: .875rem;
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-font-size: 1rem;
	--bs-btn-font-weight: 500;
	--bs-btn-line-height: 1.2;
	--bs-btn-border-radius: var(--bs-border-radius-pill);
	--bs-btn-border-width: 1.5px;
	min-height: 52px;
	white-space: nowrap;
	transition: background-color .24s var(--sb-ease), color .24s var(--sb-ease),
		border-color .24s var(--sb-ease), box-shadow .24s var(--sb-ease), transform .16s var(--sb-ease);
}

.btn:active {
	transform: scale(.98);
}

.btn svg {
	width: 18px;
	height: 18px;
	flex: none;
	transition: transform .24s var(--sb-ease);
}

.btn:hover svg.arrow {
	transform: translateX(3px);
}

.btn-lg {
	--bs-btn-padding-y: 1.125rem;
	--bs-btn-padding-x: 2rem;
	--bs-btn-font-size: 1.0625rem;
	--bs-btn-border-radius: var(--bs-border-radius-pill);
	min-height: 60px;
}

.btn-sm {
	--bs-btn-padding-y: .625rem;
	--bs-btn-padding-x: 1.125rem;
	--bs-btn-font-size: .9375rem;
	--bs-btn-border-radius: var(--bs-border-radius-pill);
	min-height: 44px;
}

.btn-primary {
	--bs-btn-bg: var(--sb-blue);
	--bs-btn-border-color: var(--sb-blue);
	--bs-btn-hover-bg: var(--sb-blue-hover);
	--bs-btn-hover-border-color: var(--sb-blue-hover);
	--bs-btn-active-bg: var(--sb-blue-deep);
	--bs-btn-active-border-color: var(--sb-blue-deep);
	--bs-btn-disabled-bg: var(--sb-blue);
	--bs-btn-disabled-border-color: var(--sb-blue);
	--bs-btn-focus-shadow-rgb: 24, 71, 237;
	box-shadow: 0 8px 24px rgba(24, 71, 237, .22);
}

.btn-primary:hover {
	box-shadow: 0 16px 40px rgba(24, 71, 237, .28);
}

.btn-light {
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #fff;
	--bs-btn-color: var(--sb-ink);
	--bs-btn-hover-bg: var(--bs-tertiary-bg);
	--bs-btn-hover-border-color: var(--bs-tertiary-bg);
	--bs-btn-hover-color: var(--sb-ink);
}

/* The mobile bar's "Call" button: white with a visible edge */
.btn-outline-dark {
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #D3D7DE;
	--bs-btn-color: var(--sb-ink);
	--bs-btn-hover-bg: var(--bs-secondary-bg);
	--bs-btn-hover-border-color: #D3D7DE;
	--bs-btn-hover-color: var(--sb-ink);
}

.btn-link {
	--bs-btn-padding-y: 0;
	--bs-btn-padding-x: 0;
	--bs-btn-font-weight: 600;
	/* .btn hard-codes --bs-btn-font-size: 1rem; inline text links must take the
	   size of the copy they sit in instead (e.g. the 13px consent paragraph). */
	--bs-btn-font-size: inherit;
	min-height: 0;
	vertical-align: baseline;
}

/* ---------- Forms: retheme, keep Bootstrap's markup + behaviour ---------- */
.form-control,
.form-select {
	min-height: 52px;
	border-width: 1.5px;
	border-color: #878E9B;
	border-radius: var(--bs-border-radius-lg);
	color: var(--sb-ink);
}

.form-control:hover,
.form-select:hover {
	border-color: var(--bs-secondary-color);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--sb-blue);
	box-shadow: 0 0 0 4px rgba(24, 71, 237, .18);
}

.form-select:has(option:disabled:checked) {
	color: #6B7280;
}

.form-select option {
	color: var(--sb-ink);
}

input[type="date"].form-control {
	display: flex;
	align-items: center;
}

input[type="date"].form-control::-webkit-date-and-time-value {
	text-align: left;
}

.input-group-text {
	border-width: 1.5px;
	border-color: #878E9B;
	font-weight: 600;
}

/* The hero / CTA offer-code field: leading icon needs the extra padding */
.offer-field {
	padding-left: 3.25rem;
	min-height: 60px;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: .04em;
	background-color: var(--bs-secondary-bg);
}

.offer-field:focus {
	background-color: #fff;
}

.offer-field-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: #6B7280;
	pointer-events: none;
	z-index: 2;
}

/* On the blue CTA panel the field sits on white with no visible border */
.on-blue .offer-field {
	background-color: #fff;
	border-color: transparent;
}

.on-blue .offer-field:focus {
	border-color: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .45);
}

/* ---------- Validation output (markup is created by the shared script) ---------- */
label.error-message {
	display: block;
	margin-top: 6px;
	font-size: .875rem;
	font-weight: 500;
	color: var(--bs-danger);
}

.form-group:has(label.error-message) .form-control,
.form-group:has(label.error-message) .form-select,
.form-group:has(label.error-message) .input-group-text {
	border-color: var(--bs-danger);
}

.server-error,
.server-error-reason {
	margin-top: 1rem;
	padding: .75rem 1rem;
	border-radius: var(--bs-border-radius-lg);
	background: #FDECEC;
	color: #991B1B;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.5;
}

.server-error-reason {
	margin-top: .5rem;
}

/* ==========================================================================
   Components Bootstrap has no equivalent for
   ========================================================================== */

/* ---------- Fixed nav + its transparent-over-hero state ---------- */
.site-nav {
	height: var(--sb-nav-h);
	z-index: 100;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 1px 0 var(--bs-border-color), var(--bs-box-shadow-sm);
	transition: background-color .24s var(--sb-ease), box-shadow .24s var(--sb-ease), color .24s var(--sb-ease);
}

.site-nav__logo img {
	width: 150px;
	height: auto;
}

.site-nav .logo-light {
	display: none;
}

/* Only once the enhancement script has run and we're still at the top */
.js .site-nav:not(.is-scrolled) {
	color: #fff;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.js .site-nav:not(.is-scrolled) .logo-light {
	display: block;
}

.js .site-nav:not(.is-scrolled) .logo-dark {
	display: none;
}

.js .site-nav:not(.is-scrolled) .btn-primary {
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #fff;
	--bs-btn-color: var(--sb-ink);
	--bs-btn-hover-bg: var(--bs-tertiary-bg);
	--bs-btn-hover-border-color: var(--bs-tertiary-bg);
	--bs-btn-hover-color: var(--sb-ink);
	box-shadow: none;
}

.js .site-nav:not(.is-scrolled) :focus-visible {
	outline-color: #fff;
}

/* ---------- Hero: photo bleed + card overlap (CSS grid, no BS equivalent) ---------- */
.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: var(--sb-gutter, 1rem) minmax(0, 1fr) var(--sb-gutter, 1rem);
	grid-template-rows: auto min(66.6vw, 440px) auto;
	background: #fff;
}

.hero__media {
	--photo-lift: calc(min(10.8vw, 71.5px) - 30px);
	grid-column: 1 / -1;
	grid-row: 1 / 3;
	position: relative;
	overflow: hidden;
	z-index: -1;
	background: linear-gradient(180deg, var(--sb-sky-top) 0%, var(--sb-sky-bottom) 50%, #5A93BE 88%);
}

.hero__img {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--photo-lift);
	width: 100%;
	height: calc(min(66.6vw, 440px) + 48px);
	object-fit: cover;
	object-position: 50% 12%;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

.hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 13, 18, .35) 0%, rgba(11, 13, 18, .08) 180px, rgba(11, 13, 18, 0) 320px);
}

.hero__copy {
	grid-column: 2;
	grid-row: 1;
	padding: calc(var(--sb-nav-h) + 1.5rem) 0 1.5rem;
}

.hero__copy .display-4 {
	text-shadow: 0 2px 24px rgba(11, 13, 18, .18);
}

.hero__copy .lead {
	text-shadow: 0 1px 14px rgba(11, 13, 18, .35);
}

.hero__card-wrap {
	grid-column: 2;
	grid-row: 3;
	margin-top: calc(17.7px - min(28.1vw, 186px));
	padding-bottom: 1rem;
}

.offer-card {
	box-shadow: 0 30px 80px rgba(11, 13, 18, .28);
}

/* ---------- Sky gradient band (survey / thank-you / policy) ---------- */
.sky-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(60% 90% at 92% 0%, rgba(24, 71, 237, .55) 0%, rgba(24, 71, 237, 0) 60%),
		linear-gradient(180deg, var(--sb-sky-top) 0%, var(--sb-sky-bottom) 100%);
	padding-top: calc(var(--sb-nav-h) + 2rem);
	padding-bottom: clamp(7rem, 5.5rem + 5vw, 9.5rem);
}

.sky-band--short {
	padding-bottom: clamp(8rem, 6rem + 6vw, 11rem);
}

.sky-band__deco {
	position: absolute;
	z-index: -1;
	right: -3%;
	top: 12%;
	width: clamp(220px, 34vw, 460px);
	opacity: .08;
	pointer-events: none;
}

/* Cards that ride up over the band */
.pull-up {
	margin-top: calc(-1 * clamp(5rem, 3.75rem + 4vw, 7rem));
}

.pull-up--lg {
	margin-top: calc(-1 * clamp(6rem, 4.5rem + 5vw, 8.5rem));
}

/* ---------- Blue CTA panel ---------- */
.cta-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: radial-gradient(80% 100% at 90% 0%, #3F63FF 0%, var(--sb-blue) 50%, var(--sb-blue-deep) 100%);
}

.cta-panel__deco {
	position: absolute;
	z-index: -1;
	right: -6%;
	bottom: -30%;
	width: 46%;
	max-width: 520px;
	opacity: .12;
	pointer-events: none;
}

/* ---------- Google rating pill / badge ---------- */
.rating-pill {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	transition: background-color .16s var(--sb-ease), border-color .16s var(--sb-ease);
}

.rating-pill:hover {
	background: rgba(255, 255, 255, .24);
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.rating-pill--light {
	background: var(--bs-secondary-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

.rating-pill--light:hover {
	background: var(--bs-tertiary-bg);
	border-color: #D3D7DE;
	color: var(--bs-body-color);
}

.stars {
	color: var(--sb-star);
}

.stars svg {
	width: 14px;
	height: 14px;
}

.stars--lg svg {
	width: 18px;
	height: 18px;
}

.google-g {
	width: 16px;
	height: 16px;
	flex: none;
}

.google-g--sm {
	width: 12px;
	height: 12px;
}

/* ---------- Small round icon tiles (goal icons, call icon, avatars) ---------- */
.icon-tile {
	width: 40px;
	height: 40px;
	flex: none;
	background: var(--sb-blue-tint);
	color: var(--sb-blue-deep);
}

.icon-tile svg {
	width: 20px;
	height: 20px;
}

.icon-tile--lg {
	width: 44px;
	height: 44px;
}

.icon-tile--success {
	width: 72px;
	height: 72px;
	background: #EAF7EE;
	color: #16A34A;
	box-shadow: 0 0 0 8px rgba(22, 163, 74, .08);
}

.icon-tile--success svg {
	width: 34px;
	height: 34px;
}

/* ---------- Testimonials ---------- */
.quote__text::before {
	content: "\201C";
}

.quote__text::after {
	content: "\201D";
}

/* ---------- Legal pop-ups ----------
   Bootstrap's modal is variable-driven, so matching the reference dialog only
   needs its width token: the default 500px wraps the credit-authorisation copy
   into enough extra lines to force a scrollbar. */
.legal-modal {
	--bs-modal-width: 640px;
}

/* ---------- Mobile sticky action bar ---------- */
.action-bar {
	z-index: 90;
	padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 -1px 0 var(--bs-border-color), 0 -8px 24px rgba(11, 13, 18, .06);
	transform: translateY(110%);
	visibility: hidden;
	transition: transform .24s var(--sb-ease), visibility 0s linear .24s;
}

.action-bar.is-visible {
	transform: none;
	visibility: visible;
	transition: transform .24s var(--sb-ease), visibility 0s;
}

.action-bar .btn {
	min-height: 48px;
}

/* ---------- Cookie consent ----------
   The banner is deliberately NOT restyled here: its design is shared across
   every campaign via src/styles/cookie-consent.scss (full-bleed bottom bar),
   and that is what stonebridgefi.com renders in production. The only change is
   the typeface — the shared rule hard-codes "Poppins", which this campaign does
   not load, so it would otherwise fall back to the system font mid-page. */
.cookie-consent-banner,
.cookie-consent-btn {
	font-family: var(--bs-body-font-family);
}

/* ==========================================================================
   Motion — progressive enhancement; content stays visible without JS
   ========================================================================== */
.reveal-on .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--sb-ease), transform .6s var(--sb-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.reveal-on .reveal[data-delay="1"] {
	transition-delay: 100ms;
}

.reveal-on .reveal.is-visible {
	opacity: 1;
	transform: none;
}

.js .offer-card,
.js .lift-in {
	animation: sb-card-in .8s var(--sb-ease) .15s both;
}

@keyframes sb-card-in {
	from {
		opacity: 0;
		transform: translateY(24px) scale(.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.offer-card.is-attention {
	animation: sb-attention .9s var(--sb-ease) both;
}

@keyframes sb-attention {
	0% {
		box-shadow: 0 30px 80px rgba(11, 13, 18, .28), 0 0 0 0 rgba(24, 71, 237, .55);
	}

	100% {
		box-shadow: 0 30px 80px rgba(11, 13, 18, .28), 0 0 0 18px rgba(24, 71, 237, 0);
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0ms !important;
	}

	.reveal-on .reveal {
		opacity: 1;
		transform: none;
	}
}