/* ==================================================================
   FAYAWO — light grading

   A lighter treatment of the same identity: soft tinted washes instead
   of dark fields, deep navy type, brand blue used as an accent rather
   than a background, and generous white cards.

   Loaded last, so it is a layer over the base rather than a rewrite of
   it. Removing this one file returns the site to the deeper palette.
   ================================================================== */

:root {
	/* Navy carries the type. It is the brand blue dropped in value and
	   pulled slightly toward black, so headings sit in the same family as
	   the logo without competing with it. */
	--fy-ink:        #14224C;
	--fy-ink-2:      #1D2E60;
	--fy-muted:      #5A6B8C;
	--fy-line:       #E3EAF6;

	--fy-blue:       #0B4FC8;
	--fy-blue-deep:  #0A3F9E;
	--fy-blue-tint:  #EAF0FE;

	/* Page is white; tinted bands do the separating. */
	--fy-bg:         #FFFFFF;
	--fy-soft:       #F5F8FF;
	--fy-wash-a:     #FFFFFF;
	--fy-wash-b:     #EDF3FE;
	--fy-wash-c:     #DDE9FD;

	--fy-radius:     12px;
	--fy-shadow:     0 2px 4px rgba(20,34,76,.03), 0 12px 32px rgba(20,34,76,.06);
	--fy-shadow-lg:  0 4px 10px rgba(20,34,76,.05), 0 28px 64px rgba(20,34,76,.12);
}

body { background: var(--fy-bg); }

/* ---------- utility bar ---------- */
.fy-utility {
	background: var(--fy-soft);
	color: var(--fy-muted);
	border-bottom: 1px solid var(--fy-line);
}
.fy-utility a { color: var(--fy-muted); }
.fy-utility a:hover { color: var(--fy-blue); }

/* ---------- header ----------
   White throughout now. The dark-bar variant existed to sit on a dark
   hero; the hero is light, so the bar simply stays light and gains a
   shadow on scroll. */
.fy-header { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--fy-line); }
.fy-header.is-stuck { background: rgba(255,255,255,.94); box-shadow: 0 1px 0 var(--fy-line), 0 12px 30px rgba(20,34,76,.07); }
.fy-header .fy-nav a:not(.fy-btn) { color: var(--fy-ink); }
.fy-header .fy-nav a:not(.fy-btn):hover,
.fy-header .fy-nav .current-menu-item > a:not(.fy-btn) { color: var(--fy-blue); }
.fy-header .fy-burger span { background: var(--fy-ink); }
.fy-header .fy-btn--small,
.fy-header.is-stuck .fy-btn--small {
	background: var(--fy-blue); border-color: var(--fy-blue); color: #fff;
}
.fy-header .fy-btn--small:hover,
.fy-header.is-stuck .fy-btn--small:hover {
	background: var(--fy-blue-deep); border-color: var(--fy-blue-deep); color: #fff;
}
/* One mark now, and it is the blue one. */
.fy-brand__light { display: none; }
.fy-brand__dark  { display: block; }
.fy-header.is-stuck .fy-brand__light { display: none; }
.fy-header.is-stuck .fy-brand__dark  { display: block; }

/* ---------- hero ----------
   A wash rather than a field: white at the top left where the copy sits,
   deepening toward the corner behind the quote. */
.fy-hero {
	background:
		radial-gradient(1100px 620px at 82% 18%, var(--fy-wash-c) 0%, rgba(221,233,253,0) 62%),
		linear-gradient(152deg, var(--fy-wash-a) 0%, var(--fy-wash-a) 34%, var(--fy-wash-b) 100%);
	color: var(--fy-ink);
	padding: 76px 0 96px;
}
.fy-hero h1 { color: var(--fy-ink); }
.fy-hero h1 em { color: var(--fy-blue); }
.fy-hero .fy-lede { color: var(--fy-muted); }
.fy-hero .fy-eyebrow { color: var(--fy-blue); }

/* Blooms become a faint lift in the corner rather than glowing light. */
.fy-hero__aurora { opacity: .3; filter: blur(96px); }
.fy-hero__aurora i:nth-child(1) { background: radial-gradient(circle, rgba(11,79,200,.34), transparent 68%); }
.fy-hero__aurora i:nth-child(2) { background: radial-gradient(circle, rgba(11,79,200,.22), transparent 70%); }

/* The wheel is a hairline drawing on light ground. */
.fy-wheel { border-color: rgba(11,79,200,.16); }
.fy-wheel::before { border-color: rgba(11,79,200,.2); }
.fy-wheel::after {
	background:
		linear-gradient(90deg, transparent calc(50% - .5px), rgba(11,79,200,.11) 50%, transparent calc(50% + .5px)),
		linear-gradient(0deg,  transparent calc(50% - .5px), rgba(11,79,200,.11) 50%, transparent calc(50% + .5px));
}
.fy-hero::after { border-color: rgba(11,79,200,.05); }

/* Grain and the blueprint grid were for dark ground. On light they only
   muddy it, so they come off here and stay on the two saturated bands. */
.fy-hero.fy-grain::before, .fy-hero.fy-blueprint::after { display: none; }

/* Buttons: the hero is light now, so the "on ink" pair becomes a solid
   primary and an outlined secondary. Inside the blue CTA band they revert. */
.fy-hero .fy-btn--onInk {
	background: var(--fy-blue); border-color: var(--fy-blue); color: #fff;
}
.fy-hero .fy-btn--onInk:hover { background: var(--fy-blue-deep); border-color: var(--fy-blue-deep); }
.fy-hero .fy-btn--onInkGhost {
	background: #fff; border-color: var(--fy-line); color: var(--fy-ink);
}
.fy-hero .fy-btn--onInkGhost:hover { border-color: var(--fy-blue); color: var(--fy-blue); background: #fff; }

/* ---------- the quote card ---------- */
.fy-receipt { border-radius: 16px; box-shadow: var(--fy-shadow-lg); border: 1px solid rgba(255,255,255,.7); }

/* ---------- promises bar ----------
   A tinted band carrying white cards, rather than a dark strip. */
.fy-strip { background: var(--fy-soft); border-block: 1px solid var(--fy-line); color: var(--fy-ink); }
.fy-strip .fy-wrap { padding-block: 34px; gap: 20px; }
.fy-strip div {
	background: #fff; border: 1px solid var(--fy-line); border-radius: var(--fy-radius);
	padding: 22px 22px 24px; box-shadow: var(--fy-shadow); color: var(--fy-muted);
}
.fy-strip b { color: var(--fy-blue); }

/* ---------- sections ---------- */
.fy-section--white { background: var(--fy-soft); border-block: 1px solid var(--fy-line); }

/* The two formerly dark sections join the light scheme. Keeping only the
   closing band and the footer saturated gives the page two moments of
   colour instead of five, which is what makes the light version read as
   composed rather than merely pale. */
.fy-section--ink {
	background: linear-gradient(168deg, var(--fy-wash-a) 0%, var(--fy-wash-b) 100%);
	color: var(--fy-ink);
	border-block: 1px solid var(--fy-line);
}
.fy-section--ink h1, .fy-section--ink h2, .fy-section--ink h3 { color: var(--fy-ink); }
.fy-section--ink .fy-lede { color: var(--fy-muted); }
.fy-section--ink .fy-eyebrow { color: var(--fy-blue); }
.fy-section--ink.fy-grain::before, .fy-section--ink.fy-blueprint::after { display: none; }

/* ---------- tracking on light ---------- */
.fy-track-form input {
	background: #fff; border-color: var(--fy-line); color: var(--fy-ink);
	border-radius: var(--fy-radius);
}
.fy-track-form input::placeholder { color: var(--fy-muted); }
.fy-section--ink .fy-btn--onInk { background: var(--fy-blue); border-color: var(--fy-blue); color: #fff; }
.fy-section--ink .fy-btn--onInk:hover { background: var(--fy-blue-deep); border-color: var(--fy-blue-deep); }

.fy-tl {
	border-left-color: var(--fy-line);
	background: #fff; border: 1px solid var(--fy-line); border-left: 2px solid var(--fy-line);
	border-radius: var(--fy-radius); padding: 28px 28px 4px 30px;
	box-shadow: var(--fy-shadow);
}
.fy-tl li::before { background: #fff; border-color: var(--fy-line); }
.fy-tl li.is-done::before { background: var(--fy-blue); border-color: var(--fy-blue); }
.fy-tl li.is-now::before { background: #fff; border-color: var(--fy-blue); box-shadow: 0 0 0 5px rgba(11,79,200,.14); }
.fy-tl .t { color: var(--fy-ink); }
.fy-tl li:not(.is-done):not(.is-now) .t { color: var(--fy-muted); }
.fy-tl .m { color: var(--fy-muted); }
.fy-tl::after { background: var(--fy-blue); }
.fy-js .fy-tl li { transform: translateX(-6px); }

/* ---------- stats on light ---------- */
.fy-section--ink .fy-stat__value { color: var(--fy-blue); }
.fy-section--ink .fy-stat__label { color: var(--fy-muted); }
.fy-stats > div {
	background: #fff; border: 1px solid var(--fy-line); border-radius: var(--fy-radius);
	padding: 30px 28px; box-shadow: var(--fy-shadow);
}

/* ---------- cards, softened and rounder ---------- */
.fy-card-plain, .fy-show, .fy-origin, .fy-quote, .fy-post, .fy-img, .fy-table--lines {
	border-radius: var(--fy-radius);
}
.fy-card-plain, .fy-quote, .fy-post { box-shadow: var(--fy-shadow); background: #fff; }
.fy-card-plain:hover, .fy-show:hover, .fy-origin:hover { box-shadow: var(--fy-shadow-lg); }
.fy-origin { background: #fff; }
.fy-disclosure, .fy-escrow-note { border-radius: var(--fy-radius); }
.fy-escrow-note { background: var(--fy-blue-tint); }

/* ---------- the one saturated band ---------- */
.fy-cta {
	background: linear-gradient(135deg, var(--fy-blue) 0%, var(--fy-blue-deep) 100%);
}
.fy-cta .fy-btn--onInk { background: #fff; border-color: #fff; color: var(--fy-blue); }
.fy-cta .fy-btn--onInk:hover { background: #fff; color: var(--fy-blue-deep); border-color: #fff; }
.fy-cta .fy-btn--onInkGhost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.fy-cta .fy-btn--onInkGhost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

/* ---------- footer keeps the depth ---------- */
.fy-footer { background: var(--fy-ink); }

/* ---------- comparison ---------- */
.fy-compare tbody td:nth-child(2) { background: var(--fy-blue-tint); }
.fy-compare thead th:nth-child(2) { background: var(--fy-blue-tint); }

/* ---------- forms ---------- */
.fy-form input, .fy-form textarea { border-radius: var(--fy-radius); }

@media (max-width: 1000px) {
	.fy-strip .fy-wrap { gap: 14px; }
}


@media (max-width: 1000px) {
	/* Panel button must read against the white panel. */
	.fy-header .fy-btn--small,
	.fy-header.is-stuck .fy-btn--small {
		background: var(--fy-blue); border-color: var(--fy-blue); color: #fff;
		padding: 9px 16px; font-size: .86rem;
	}
}