/* ==================================================================
   FAYAWO — blended grading

   Loads on top of the light grading and puts the depth back where it
   earns its keep, so the page is graded rather than uniform:

     dark hero  ->  light body  ->  dark tracking  ->  light  ->  blue
     call to action  ->  dark footer

   The hero is dark because the quote card is the argument of the whole
   page and it holds far better on dark ground. The body is light because
   nine sections of navy is oppressive. Tracking goes dark again as a
   mid-page anchor, and because a vessel at sea is the one part of this
   business that genuinely happens in the dark.

   The hero does not stop being dark so much as run out of it: the last
   fifth fades into the light wash, so the handover to the promises bar
   is a transition rather than an edge.
   ================================================================== */

/* ---------- utility bar returns to ink ---------- */
.fy-utility {
	background: var(--fy-ink); color: rgba(255,255,255,.6); border-bottom: 0;
}
.fy-utility a { color: rgba(255,255,255,.6); }
.fy-utility a:hover { color: #8FB3F2; }

/* ---------- header: dark over the hero, white once you leave it ---------- */
.fy-header { background: var(--fy-ink); border-bottom-color: transparent; }
.fy-header .fy-nav a:not(.fy-btn) { color: rgba(255,255,255,.86); }
.fy-header .fy-nav a:not(.fy-btn):hover,
.fy-header .fy-nav .current-menu-item > a:not(.fy-btn) { color: #8FB3F2; }
.fy-header .fy-burger span { background: #fff; }
.fy-header .fy-btn--small { background: #fff; border-color: #fff; color: var(--fy-ink); }
.fy-header .fy-btn--small:hover { background: var(--fy-blue); border-color: var(--fy-blue); color: #fff; }

.fy-header.is-stuck { background: rgba(255,255,255,.94); border-bottom-color: var(--fy-line); }
.fy-header.is-stuck .fy-nav a:not(.fy-btn) { color: var(--fy-ink); }
.fy-header.is-stuck .fy-nav a:not(.fy-btn):hover { color: var(--fy-blue); }
.fy-header.is-stuck .fy-burger span { background: var(--fy-ink); }
.fy-header.is-stuck .fy-btn--small { background: var(--fy-blue); border-color: var(--fy-blue); color: #fff; }
.fy-header.is-stuck .fy-btn--small:hover { background: var(--fy-blue-deep); border-color: var(--fy-blue-deep); }

.fy-brand__light { display: block; }
.fy-brand__dark  { display: none; }
.fy-header.is-stuck .fy-brand__light { display: none; }
.fy-header.is-stuck .fy-brand__dark  { display: block; }

/* ---------- hero: deep, then running out into the light ---------- */
.fy-hero {
	background:
		radial-gradient(900px 560px at 78% 24%, rgba(11,79,200,.34) 0%, rgba(11,79,200,0) 66%),
		linear-gradient(178deg,
			#0B1733 0%,
			#0E1F45 46%,
			#16305F 74%,
			#31548F 88%,
			var(--fy-soft) 100%);
	color: #fff;
	padding: 84px 0 118px;
}
.fy-hero h1 { color: #fff; }
.fy-hero h1 em { color: #8FB3F2; }
.fy-hero .fy-lede { color: rgba(255,255,255,.74); }
.fy-hero .fy-eyebrow { color: #8FB3F2; }

/* Texture belongs on dark ground, so it comes back here. */
.fy-hero.fy-grain::before { display: block; }
.fy-hero.fy-blueprint::after { display: block; }

.fy-hero__aurora { opacity: .5; filter: blur(90px); }
.fy-hero__aurora i:nth-child(1) { background: radial-gradient(circle, rgba(11,79,200,.8), transparent 68%); }
.fy-hero__aurora i:nth-child(2) { background: radial-gradient(circle, rgba(46,120,255,.55), transparent 70%); }

.fy-wheel { border-color: rgba(143,179,242,.2); }
.fy-wheel::before { border-color: rgba(143,179,242,.26); }
.fy-wheel::after {
	background:
		linear-gradient(90deg, transparent calc(50% - .5px), rgba(143,179,242,.14) 50%, transparent calc(50% + .5px)),
		linear-gradient(0deg,  transparent calc(50% - .5px), rgba(143,179,242,.14) 50%, transparent calc(50% + .5px));
}
.fy-hero::after { border-color: rgba(143,179,242,.05); }

.fy-hero .fy-btn--onInk { background: #fff; border-color: #fff; color: var(--fy-ink); }
.fy-hero .fy-btn--onInk:hover { background: var(--fy-blue); border-color: var(--fy-blue); color: #fff; }
.fy-hero .fy-btn--onInkGhost { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.fy-hero .fy-btn--onInkGhost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* The quote card lifts off the dark rather than sitting on it. */
.fy-receipt { box-shadow: 0 30px 70px rgba(4,10,26,.46); border-color: transparent; }

/* ---------- promises bar: the first light thing you meet ---------- */
.fy-strip { background: var(--fy-soft); border-top: 0; }

/* ---------- tracking: the mid-page anchor ---------- */
#fy-tracking.fy-section--ink {
	background:
		radial-gradient(720px 460px at 12% 88%, rgba(11,79,200,.3) 0%, rgba(11,79,200,0) 68%),
		linear-gradient(168deg, #0E1F45 0%, #0B1733 100%);
	color: #fff;
	border-block-color: transparent;
}
#fy-tracking h2 { color: #fff; }
#fy-tracking .fy-lede { color: rgba(255,255,255,.74); }
#fy-tracking .fy-eyebrow { color: #8FB3F2; }
#fy-tracking.fy-grain::before { display: block; }
#fy-tracking.fy-blueprint::after { display: block; }

#fy-tracking .fy-track-form input {
	background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.24); color: #fff;
}
#fy-tracking .fy-track-form input::placeholder { color: rgba(255,255,255,.42); }
#fy-tracking .fy-btn--onInk { background: #fff; border-color: #fff; color: var(--fy-ink); }
#fy-tracking .fy-btn--onInk:hover { background: #8FB3F2; border-color: #8FB3F2; color: var(--fy-ink); }

/* Timeline goes back to sitting directly on the dark, no card. */
#fy-tracking .fy-tl {
	background: transparent; border: 0; border-left: 2px solid rgba(255,255,255,.16);
	border-radius: 0; padding: 0 0 0 30px; box-shadow: none;
}
#fy-tracking .fy-tl li::before { background: #0B1733; border-color: rgba(255,255,255,.28); }
#fy-tracking .fy-tl li.is-done::before { background: #8FB3F2; border-color: #8FB3F2; }
#fy-tracking .fy-tl li.is-now::before { background: #fff; border-color: #fff; box-shadow: 0 0 0 5px rgba(143,179,242,.28); }
#fy-tracking .fy-tl .t { color: #fff; }
#fy-tracking .fy-tl li:not(.is-done):not(.is-now) .t { color: rgba(255,255,255,.44); }
#fy-tracking .fy-tl .m { color: rgba(255,255,255,.52); }
#fy-tracking .fy-tl::after { background: #8FB3F2; }
#fy-tracking .fy-img { border-radius: var(--fy-radius); }

/* The figures band stays light — two dark anchors is the limit before
   the page starts to feel like it is flickering. */

@media (max-width: 760px) {
	.fy-hero { padding: 64px 0 92px; }
}


/* ------------------------------------------------------------------
   Mobile menu panel.
   The rules above paint the nav white for the dark bar. Below 1000px the
   nav is not in the bar at all — it is a white panel underneath it — so
   those colours have to be undone, and this file loads last.
   ------------------------------------------------------------------ */
@media (max-width: 1000px) {
	.fy-header .fy-nav a:not(.fy-btn),
	.fy-header.is-stuck .fy-nav a:not(.fy-btn) { color: var(--fy-ink); }

	.fy-header .fy-nav a:not(.fy-btn):hover,
	.fy-header.is-stuck .fy-nav a:not(.fy-btn):hover { color: var(--fy-blue); }

	.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;
	}
}