/* ==================================================================
   FAYAWO — main stylesheet

   Palette is taken from the logo: the wordmark's blue is the brand,
   and everything else is built around it. Status colours are kept
   separate and semantic — green means cleared, amber means moving,
   red means stopped — because a customer needs to read a shipment
   state at a glance without learning a colour system.
   ================================================================== */

:root {
	/* Brand — sampled from the wordmark (#0A4FC7 core, standardised) */
	--fy-blue:       #0B4FC8;
	--fy-blue-deep:  #083A96;
	--fy-blue-tint:  #E9F0FD;

	/* Neutrals, cooled toward the blue so nothing looks muddy beside it */
	--fy-ink:        #08132E;
	--fy-ink-2:      #101F42;
	--fy-muted:      #5B6B87;
	--fy-line:       #DDE3EE;
	--fy-bg:         #F4F6FA;
	--fy-white:      #FFFFFF;

	/* Status */
	--fy-ok:         #14804A;
	--fy-warn:       #B7791F;
	--fy-err:        #C0392B;

	/* Aliases the Fayawo Core plugin reads. Defined here so the theme is
	   the single place brand colour is set for the whole platform. */
	--fy-accent:     var(--fy-blue);
	--fy-accent-ink: #FFFFFF;
	--fy-radius:     6px;

	--fy-display: 'Archivo', system-ui, -apple-system, sans-serif;
	--fy-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
	--fy-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

	--fy-wrap: 1180px;
	--fy-gutter: 24px;
	--fy-header-h: 78px;
}

/* ---------------- reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The decorative wheels and aurora blooms sit outside their section's
   bounds by design. Without this they push the document wider than the
   viewport, which on a phone shows as a page that scrolls sideways and
   will not sit still. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
	margin: 0;
	background: var(--fy-bg);
	color: var(--fy-ink);
	font-family: var(--fy-body);
	font-size: 17px;
	line-height: 1.72;
	letter-spacing: -0.003em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
	font-feature-settings: "kern" 1, "liga" 1;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--fy-blue); }
.fy-prose a, .fy-footer__brand a:not(.fy-brand):not(.fy-warn) {
	text-decoration: underline; text-underline-offset: 3px;
	text-decoration-thickness: 1px; text-decoration-color: rgba(11,79,200,.4);
	transition: text-decoration-color .2s ease;
}
.fy-prose a:hover { text-decoration-color: currentColor; }
button { font: inherit; }

/* Weight 700 rather than 800. At display sizes the extra weight closes the
   counters and makes the whole page feel heavier than the business is;
   700 with tighter tracking reads sharper and more expensive. */
h1, h2, h3, h4 {
	font-family: var(--fy-display);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5.1vw, 3.85rem); letter-spacing: -0.035em; line-height: 1.04; }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem);   letter-spacing: -0.03em;  line-height: 1.08; }
h3 { font-size: 1.2rem;  letter-spacing: -0.018em; line-height: 1.32; }
h4 { font-size: 1.02rem; letter-spacing: -0.012em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 10px; left: 10px; z-index: 999;
	width: auto; height: auto; clip: auto;
	background: var(--fy-ink); color: #fff; padding: 12px 18px; border-radius: 4px;
}

/* ---------------- layout ---------------- */
.fy-wrap { max-width: var(--fy-wrap); margin: 0 auto; padding: 0 var(--fy-gutter); }
.fy-wrap--narrow { max-width: 800px; }
.fy-section { padding: 100px 0; }
.fy-section--tight { padding: 72px 0; }
.fy-section--white { background: var(--fy-white); border-block: 1px solid var(--fy-line); }
.fy-section--ink { background: var(--fy-ink); color: #fff; position: relative; overflow: hidden; }
.fy-section--ink h1, .fy-section--ink h2, .fy-section--ink h3 { color: #fff; }
.fy-split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }

/* No image beside the copy, so do not reserve half the section for one.
   A single measured column reads as a deliberate composition; half a
   section standing empty reads as a page that failed to load. */
.fy-split--solo { grid-template-columns: 1fr; max-width: 780px; }
.fy-split--solo .fy-lede { max-width: none; }
.fy-lede {
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.68;
	color: var(--fy-muted);
	max-width: 60ch;
	letter-spacing: -0.004em;
}
.fy-section--ink .fy-lede { color: rgba(255,255,255,.72); }

/* Field label, set like a line on a shipping document */
.fy-eyebrow {
	display: block; font-family: var(--fy-mono); font-size: 0.68rem;
	font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--fy-blue); margin: 0 0 20px;
}
.fy-section--ink .fy-eyebrow { color: #6E9BEF; }
.fy-eyebrow--dim { color: var(--fy-muted); }

/* ---------------- buttons ---------------- */
.fy-btn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 15px 26px; border-radius: var(--fy-radius);
	border: 1.5px solid var(--fy-blue); background: var(--fy-blue); color: #fff;
	font-family: var(--fy-body); font-size: 0.95rem; font-weight: 600;
	text-decoration: none; cursor: pointer;
	transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.fy-btn:hover { background: var(--fy-blue-deep); border-color: var(--fy-blue-deep); color: #fff; transform: translateY(-2px); }
.fy-btn--ghost { background: transparent; color: var(--fy-blue); }
.fy-btn--ghost:hover { background: var(--fy-blue); color: #fff; }
.fy-btn--dark { background: var(--fy-ink); border-color: var(--fy-ink); }
.fy-btn--dark:hover { background: var(--fy-ink-2); border-color: var(--fy-ink-2); }
.fy-btn--onInk { background: #fff; border-color: #fff; color: var(--fy-ink); }
.fy-btn--onInk:hover { background: #fff; color: var(--fy-ink); }
.fy-btn--onInkGhost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.fy-btn--onInkGhost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }
.fy-btn--small { padding: 9px 16px; font-size: 0.87rem; }
.fy-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------------- header ---------------- */
.fy-utility {
	background: var(--fy-ink); color: rgba(255,255,255,.55);
	font-family: var(--fy-mono); font-size: 0.74rem; letter-spacing: .04em;
}
.fy-utility .fy-wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 10px; }
.fy-utility a { color: rgba(255,255,255,.6); text-decoration: none; }
.fy-utility a:hover { color: #8FB3F2; }

/* At the top of the page the header sits on the dark hero, so it is dark
   too — the utility bar, header and hero read as one field instead of a
   white band cutting across them. It turns white once you scroll. */
.fy-header {
	background: var(--fy-ink); border-bottom: 1px solid transparent;
	position: sticky; top: 0; z-index: 100;
}
/* Sticky already establishes a containing block for the absolutely
   positioned mobile panel, but state it so a future change to the header's
   positioning does not quietly detach the menu. */
.fy-header > .fy-wrap { position: relative; }
/* The brand blue is unreadable against the dark bar, so dark contexts get
   the light blue and a rule under the link — an accent you can actually
   see is worth more than one that is technically on-brand. */
/* :not(.fy-btn) matters. Without it this rule outweighs the button rule
   below — three selectors to two — and paints the Sign in label white on a
   white button. */
.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; }

/* Logo swaps with the bar. */
.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; }

.fy-header.is-stuck {
	background: rgba(255,255,255,.94);
	border-bottom-color: var(--fy-line);
}
.fy-header.is-stuck .fy-nav a { color: var(--fy-ink); }
.fy-header.is-stuck .fy-nav a: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-header .fy-wrap {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; min-height: var(--fy-header-h);
}
.fy-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fy-nav { margin-left: auto; }
.fy-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.fy-brand img { height: 34px; width: auto; }
.fy-brand__text {
	font-family: var(--fy-display); font-weight: 800; font-size: 1.5rem;
	letter-spacing: -0.045em; color: var(--fy-blue); text-transform: uppercase;
	font-style: italic;
}

.fy-nav { display: flex; align-items: center; gap: 28px; }
.fy-nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.fy-nav ul a {
	position: relative; font-size: 0.95rem; font-weight: 500;
	color: var(--fy-ink); text-decoration: none; padding-bottom: 3px;
}
/* Underline grows from the left rather than appearing all at once. */
/* Buttons never grow the nav underline. */
.fy-btn::after { content: none; }
.fy-nav ul a::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
	background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
	transition: transform .26s cubic-bezier(.22,.68,.32,1);
}
.fy-nav ul a:hover::after,
.fy-nav ul .current-menu-item > a::after { transform: scaleX(1); }
.fy-nav a:hover, .fy-nav .current-menu-item > a { color: var(--fy-blue); }
.fy-prose a, .fy-footer__brand a:not(.fy-brand):not(.fy-warn) {
	text-decoration: underline; text-underline-offset: 3px;
	text-decoration-thickness: 1px; text-decoration-color: rgba(11,79,200,.4);
	transition: text-decoration-color .2s ease;
}
.fy-prose a:hover { text-decoration-color: currentColor; }

.fy-burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.fy-burger span { display: block; width: 22px; height: 2px; background: var(--fy-ink); margin: 4px 0; transition: transform .2s ease, opacity .2s ease; }
.fy-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.fy-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fy-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------- hero ---------------- */
.fy-hero { background: var(--fy-ink); color: #fff; padding: 84px 0 104px; position: relative; overflow: hidden; }
.fy-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 68px; align-items: center; position: relative; z-index: 1; }
.fy-hero h1 { margin-bottom: 22px; }
.fy-hero h1 em { font-style: normal; color: #6E9BEF; }

/* Ambient wheel — the logo's own mark, enlarged and set very low
   contrast. Present, not decorative noise. */
.fy-hero::after {
	content: ""; position: absolute; right: -140px; top: -90px;
	width: 520px; height: 520px; border-radius: 50%;
	border: 60px solid rgba(110,155,239,.055);
	pointer-events: none;
}

/* ---------------- signature: the landed-cost receipt ---------------- */
.fy-receipt {
	background: #fff; color: var(--fy-ink);
	border-radius: 8px; padding: 30px 30px 26px;
	box-shadow: 0 26px 64px rgba(8,19,46,.34);
}
.fy-receipt__head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 14px; padding-bottom: 16px; border-bottom: 1.5px solid var(--fy-ink);
}
.fy-receipt__car { font-family: var(--fy-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; }
.fy-receipt__meta { font-size: 0.79rem; color: var(--fy-muted); margin-top: 3px; }
.fy-receipt__ref { font-family: var(--fy-mono); font-size: 0.72rem; letter-spacing: .1em; color: var(--fy-muted); }
.fy-receipt__lines { list-style: none; margin: 0; padding: 0; }
.fy-receipt__lines li {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 11px 0; border-bottom: 1px solid var(--fy-line); font-size: 0.92rem;
}
.fy-receipt__lines li span:last-child { font-family: var(--fy-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.fy-receipt__total {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	margin-top: 18px; padding-top: 16px; border-top: 2.5px solid var(--fy-ink);
}
.fy-receipt__total b { font-family: var(--fy-display); font-weight: 700; font-size: 1.02rem; }
.fy-receipt__total strong { font-family: var(--fy-mono); font-weight: 500; font-size: 1.38rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--fy-blue); }
.fy-receipt__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 0.78rem; color: var(--fy-muted); }
.fy-stamp {
	font-family: var(--fy-mono); font-size: 0.67rem; font-weight: 500;
	letter-spacing: .12em; text-transform: uppercase; color: var(--fy-blue);
	border: 1.5px solid var(--fy-blue); border-radius: 3px; padding: 4px 9px;
}
.fy-receipt__note { margin-top: 14px; font-size: 0.72rem; color: var(--fy-muted); font-style: italic; }


/* ---------------- trust strip ---------------- */
.fy-strip { background: var(--fy-ink-2); color: rgba(255,255,255,.82); }
.fy-strip .fy-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding-block: 26px; }
.fy-strip b {
	display: block; font-family: var(--fy-mono); font-size: 0.69rem; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase; color: #6E9BEF; margin-bottom: 6px;
}
.fy-strip div { font-size: 0.87rem; }

/* ---------------- cards ---------------- */
.fy-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
.fy-card-plain { background: #fff; border: 1px solid var(--fy-line); border-radius: 8px; padding: 30px 28px; }
.fy-card-plain h3 { margin-bottom: 10px; }
.fy-card-plain p { font-size: 0.94rem; color: var(--fy-muted); }

/* ---------------- process ---------------- */
.fy-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fy-line); }
.fy-steps li {
	display: grid; grid-template-columns: 74px 1fr; gap: 4px 24px;
	padding: 30px 0; border-bottom: 1px solid var(--fy-line); align-items: baseline;
	padding-right: 92px; /* clears the oversized step numeral behind it */
}
.fy-steps li p { grid-column: 2; }
.fy-steps .fy-n { font-family: var(--fy-mono); font-size: 0.82rem; font-weight: 500; letter-spacing: .08em; color: var(--fy-blue); }
.fy-steps h3 { font-size: 1.3rem; margin: 0; }
.fy-steps p { font-size: 0.95rem; color: var(--fy-muted); margin: 0; }

/* ---------------- milestone chips ---------------- */
.fy-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.fy-chip { font-family: var(--fy-mono); font-size: 0.76rem; padding: 8px 14px; border-radius: 999px; background: var(--fy-blue-tint); color: var(--fy-blue-deep); }
.fy-disclosure {
	margin-top: 26px; padding: 20px 22px; background: #fff;
	border-left: 3px solid var(--fy-muted); border-radius: 0 6px 6px 0;
	font-size: 0.9rem; color: var(--fy-muted);
}

/* ---------------- tracking form ---------------- */
.fy-track-form { display: flex; gap: 10px; margin-top: 28px; max-width: 460px; }
.fy-track-form input {
	flex: 1; padding: 15px 17px; border-radius: var(--fy-radius);
	border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07);
	color: #fff; font-family: var(--fy-mono); font-size: 0.92rem; letter-spacing: .06em;
}
.fy-track-form input::placeholder { color: rgba(255,255,255,.4); }

/* Timeline dots echo the wheel in the wordmark. */
.fy-tl { list-style: none; margin: 0; padding: 0 0 0 30px; border-left: 2px solid rgba(255,255,255,.16); }
.fy-tl li { position: relative; padding: 0 0 24px 22px; }
.fy-tl li::before {
	content: ""; position: absolute; left: -37px; top: 4px;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--fy-ink); border: 2px solid rgba(255,255,255,.28);
}
.fy-tl li.is-done::before { background: #6E9BEF; border-color: #6E9BEF; }
.fy-tl li.is-now::before { background: #fff; border-color: #fff; box-shadow: 0 0 0 5px rgba(110,155,239,.28); }
.fy-tl .t { display: block; font-weight: 600; font-size: 0.97rem; }
.fy-tl li:not(.is-done):not(.is-now) .t { color: rgba(255,255,255,.42); font-weight: 400; }
.fy-tl .m { display: block; font-family: var(--fy-mono); font-size: 0.76rem; color: rgba(255,255,255,.5); margin-top: 2px; }

/* ---------------- faq ---------------- */
.fy-faq { margin-top: 42px; border-top: 1px solid var(--fy-line); }
.fy-faq details { border-bottom: 1px solid var(--fy-line); }
.fy-faq summary {
	padding: 21px 0; cursor: pointer; list-style: none;
	font-family: var(--fy-display); font-weight: 700; font-size: 1.09rem; letter-spacing: -0.015em;
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.fy-faq summary::-webkit-details-marker { display: none; }
.fy-faq summary::after { content: "+"; font-family: var(--fy-mono); font-size: 1.3rem; font-weight: 400; color: var(--fy-blue); }
.fy-faq details[open] summary::after { content: "\2013"; }
.fy-faq details > p { padding: 0 0 21px; color: var(--fy-muted); font-size: 0.96rem; max-width: 72ch; }

/* ---------------- cta band ---------------- */
.fy-cta { background: var(--fy-blue); color: #fff; text-align: center; overflow: hidden; }
.fy-cta h2 { color: #fff; max-width: 20ch; margin: 0 auto 16px; }
.fy-cta p { color: rgba(255,255,255,.88); max-width: 52ch; margin: 0 auto; }
.fy-cta .fy-btn-row { justify-content: center; }

/* ---------------- entry / blog ---------------- */
.fy-entry { background: #fff; padding: 60px 0 80px; }
.fy-entry__header { max-width: 780px; margin-bottom: 34px; }
.fy-entry__meta { font-family: var(--fy-mono); font-size: 0.78rem; color: var(--fy-muted); letter-spacing: .06em; }
.fy-prose { max-width: 72ch; }
.fy-prose h2 { margin-top: 1.8em; }
.fy-prose h3 { margin-top: 1.6em; }
.fy-prose img, .fy-prose figure { border-radius: 8px; margin: 2em 0; }
.fy-prose blockquote {
	margin: 2em 0; padding: 4px 0 4px 24px;
	border-left: 3px solid var(--fy-blue); color: var(--fy-muted); font-size: 1.06rem;
}
.fy-prose code { font-family: var(--fy-mono); font-size: .9em; background: var(--fy-bg); padding: 2px 6px; border-radius: 4px; }
.fy-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem; }
.fy-prose th, .fy-prose td { padding: 11px 12px; border-bottom: 1px solid var(--fy-line); text-align: left; }
.fy-prose th { font-family: var(--fy-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fy-muted); }

.fy-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.fy-post { background: #fff; border: 1px solid var(--fy-line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.fy-post img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.fy-post__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fy-post__body h2 { font-size: 1.15rem; margin: 0; }
.fy-post__body h2 a { color: inherit; text-decoration: none; }
.fy-post__body h2 a:hover { color: var(--fy-blue); }
.fy-post__excerpt { font-size: .93rem; color: var(--fy-muted); }

.fy-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 46px; flex-wrap: wrap; }
.fy-pagination .page-numbers {
	padding: 9px 15px; border: 1px solid var(--fy-line); border-radius: 6px;
	text-decoration: none; color: var(--fy-ink); background: #fff;
}
.fy-pagination .page-numbers.current { background: var(--fy-blue); border-color: var(--fy-blue); color: #fff; }

/* ---------------- footer ---------------- */
.fy-footer { background: var(--fy-ink); color: rgba(255,255,255,.62); font-size: .9rem; padding: 74px 0 0; }
.fy-footer a { color: rgba(255,255,255,.62); text-decoration: none; }
.fy-footer a:hover { color: #8FB3F2; }
.fy-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 42px; padding-bottom: 54px; }
.fy-footer h4 {
	font-family: var(--fy-mono); font-size: .69rem; font-weight: 500;
	letter-spacing: .16em; text-transform: uppercase;
	color: rgba(255,255,255,.42); margin: 0 0 16px;
}
.fy-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fy-footer__brand img { height: 32px; margin-bottom: 14px; }
.fy-warn {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
	padding: 11px 15px; border: 1px solid rgba(183,121,31,.55); border-radius: 6px;
	color: #E0A44F; font-size: .82rem;
}
.fy-warn:hover { background: rgba(183,121,31,.12); color: #E0A44F; }
.fy-footer__base {
	border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0;
	display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	font-family: var(--fy-mono); font-size: .75rem;
}

/* ---------------- responsive ---------------- */
@media (max-width: 1000px) {
	.fy-hero__grid, .fy-split { grid-template-columns: 1fr; gap: 44px; }
	.fy-cards, .fy-posts { grid-template-columns: 1fr; }
	.fy-strip .fy-wrap { grid-template-columns: 1fr 1fr; }
	.fy-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.fy-steps li { grid-template-columns: 56px 1fr; row-gap: 8px; }
	.fy-steps li p { grid-column: 2; }
	.fy-section { padding: 70px 0; }

	.fy-burger { display: block; }
	/* Anchored to the header itself rather than a fixed 78px from the top
	   of the window. The utility bar sits above the header, so a fixed
	   offset opened the panel underneath the bar it belongs to. */
	.fy-nav {
		position: absolute; top: 100%; z-index: 10;
		left: calc(var(--fy-gutter) * -1); right: calc(var(--fy-gutter) * -1);
		background: #fff; border-bottom: 1px solid var(--fy-line);
		box-shadow: 0 18px 34px rgba(8,19,46,.13);
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 8px var(--fy-gutter) 20px;
		/* Hidden with visibility, not by transform. translateY(-120%) is
		   relative to the panel's OWN height, so a short menu only lifted
		   itself clear of the header and sat visibly above it. visibility
		   also takes the closed menu out of the tab order. */
		opacity: 0; visibility: hidden; pointer-events: none;
		transform: translateY(-10px);
		transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
		max-height: calc(100vh - 120px); overflow-y: auto;
	}
	.fy-nav.is-open {
		opacity: 1; visibility: visible; pointer-events: auto;
		transform: none; transition-delay: 0s;
	}
	.fy-nav ul { flex-direction: column; gap: 0; }
	.fy-nav ul a { display: block; padding: 15px 0; border-bottom: 1px solid var(--fy-line); }

	/* The panel is white whatever the bar above it is doing, so its links
	   must be dark. Without this the header's own rule paints them white
	   for the dark bar and the open menu is white text on white. */
	.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); }

	/* Compact in the bar, and blue so it reads on the dark header and the
	   white one alike without needing a state for each. */
	.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;
	}
	.fy-nav { margin-left: 0; }
}

@media (max-width: 760px) {
	.fy-flow { grid-template-columns: 1fr; }
	.fy-costs { grid-template-columns: 1fr; }
	.fy-section { padding: 56px 0; }
	.fy-wrap { padding: 0 18px; }
}

@media (max-width: 560px) {
	body { font-size: 16px; }
	.fy-strip .fy-wrap { grid-template-columns: 1fr; gap: 20px; }
	.fy-footer__grid { grid-template-columns: 1fr; }
	.fy-receipt { padding: 24px 22px; }
	.fy-hero { padding: 64px 0 72px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
}


/* ------------------------------------------------------------------
   IMAGE SLOTS
   Every photographic area on the homepage. Before an image is uploaded
   the slot draws itself with its own name and required size, so an
   unfinished page reads as deliberate rather than broken — and whoever
   is filling it in knows exactly what to supply.
   ------------------------------------------------------------------ */
.fy-img {
	position: relative; overflow: hidden;
	border-radius: 8px; background: var(--fy-blue-tint);
	width: 100%;
}
.fy-img__real { width: 100%; height: 100%; object-fit: cover; display: block; }

.fy-img__slot {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 7px; padding: 22px; text-align: center;
	border: 2px dashed rgba(11,79,200,.28); border-radius: 8px;
	background:
		repeating-linear-gradient(45deg,
			rgba(11,79,200,.03) 0 12px,
			transparent 12px 24px);
}
.fy-img__label {
	font-family: var(--fy-mono); font-size: .74rem; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase; color: var(--fy-blue);
}
.fy-img__hint { font-size: .78rem; color: var(--fy-muted); max-width: 30ch; line-height: 1.5; }

/* Hero photograph sits behind the copy, dark enough to keep text legible
   at AA on any image the client uploads. */
.fy-hero--photo::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: var(--fy-hero-img);
	background-size: cover; background-position: center;
	opacity: .3;
}
.fy-hero--photo::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(100deg, var(--fy-ink) 12%, rgba(8,19,46,.72) 60%, rgba(8,19,46,.42) 100%);
	border: 0; width: auto; height: auto; border-radius: 0; right: auto; top: auto;
}

/* Showcase cards */
.fy-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 42px; }
.fy-show {
	background: #fff; border: 1px solid var(--fy-line); border-radius: 8px;
	overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.fy-show:hover { border-color: var(--fy-blue); }
.fy-show .fy-img { border-radius: 0; }
.fy-show__body { padding: 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fy-show__body h3 { margin: 0; font-size: 1.06rem; }
.fy-show__spec { font-family: var(--fy-mono); font-size: .78rem; color: var(--fy-muted); }
.fy-show__price {
	font-family: var(--fy-mono); font-size: 1.16rem; font-weight: 500;
	color: var(--fy-blue); margin-top: 4px; font-variant-numeric: tabular-nums;
}
.fy-show__price small { font-family: var(--fy-body); font-size: .7rem; color: var(--fy-muted); font-weight: 400; }

/* Delivery gallery — social proof, so square and dense */
.fy-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 40px; }
.fy-gallery .fy-img { border-radius: 6px; }

@media (max-width: 1000px) {
	.fy-showcase { grid-template-columns: 1fr; }
	.fy-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.fy-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ==================================================================
   ESCROW
   Drawn as a flow, because the reassuring part is not the word
   "escrow" — it is seeing that the money does not touch Fayawo until
   the car is in your hands.
   ================================================================== */
.fy-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 48px 0 0; }
.fy-flow__node {
	position: relative; padding: 26px 22px 26px 0;
	border-top: 2px solid var(--fy-line);
}
.fy-flow__node::before {
	content: ""; position: absolute; top: -7px; left: 0;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--fy-bg); border: 2px solid var(--fy-line);
}
.fy-flow__node--held { border-top-color: var(--fy-blue); }
.fy-flow__node--held::before { background: var(--fy-blue); border-color: var(--fy-blue); }
.fy-flow__step {
	display: block; font-family: var(--fy-mono); font-size: .69rem; font-weight: 500;
	letter-spacing: .16em; text-transform: uppercase; color: var(--fy-muted); margin-bottom: 9px;
}
.fy-flow__node--held .fy-flow__step { color: var(--fy-blue); }
.fy-flow h3 { font-size: 1.06rem; margin: 0 0 7px; }
.fy-flow p { font-size: .9rem; color: var(--fy-muted); margin: 0; }

.fy-escrow-note {
	margin-top: 34px; padding: 22px 24px; background: var(--fy-blue-tint);
	border-radius: 8px; font-size: .93rem; color: var(--fy-blue-deep);
}
.fy-escrow-note strong { font-weight: 600; }

/* ==================================================================
   DOORSTEP DELIVERY
   ================================================================== */
.fy-cities { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.fy-city {
	font-family: var(--fy-mono); font-size: .78rem; padding: 8px 14px;
	border-radius: 999px; border: 1px solid var(--fy-line); background: #fff;
	color: var(--fy-ink); transition: border-color .2s ease, color .2s ease;
}
.fy-city:hover { border-color: var(--fy-blue); color: var(--fy-blue); }
.fy-city--all { background: var(--fy-blue); border-color: var(--fy-blue); color: #fff; }

.fy-checklist { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 2px; }
.fy-checklist li {
	display: grid; grid-template-columns: 26px 1fr; gap: 14px;
	padding: 15px 0; border-bottom: 1px solid var(--fy-line); align-items: start;
}
.fy-checklist li::before {
	content: "✓"; display: grid; place-items: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--fy-blue-tint); color: var(--fy-blue);
	font-size: .74rem; font-weight: 700; margin-top: 2px;
}
.fy-checklist b { display: block; font-weight: 600; margin-bottom: 2px; }
.fy-checklist span { font-size: .91rem; color: var(--fy-muted); }

/* ==================================================================
   COMPARISON
   The market's actual alternative, stated plainly. This is the most
   persuasive block on the page for a buyer who has been burned before.
   ================================================================== */
.fy-compare { width: 100%; border-collapse: collapse; margin-top: 44px; }
.fy-compare th, .fy-compare td { padding: 18px 20px; text-align: left; vertical-align: top; }
.fy-compare thead th {
	font-family: var(--fy-mono); font-size: .7rem; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase; color: var(--fy-muted);
	border-bottom: 1px solid var(--fy-line);
}
.fy-compare thead th:nth-child(2) { color: var(--fy-blue); }
.fy-compare tbody th {
	font-family: var(--fy-body); font-size: .95rem; font-weight: 600;
	width: 30%; border-bottom: 1px solid var(--fy-line);
}
.fy-compare tbody td { font-size: .93rem; border-bottom: 1px solid var(--fy-line); color: var(--fy-muted); }
.fy-compare tbody td:nth-child(2) {
	background: var(--fy-blue-tint); color: var(--fy-blue-deep); font-weight: 500;
}
.fy-compare tbody tr:last-child td:nth-child(2) { border-radius: 0 0 8px 8px; }
.fy-compare thead th:nth-child(2) { background: var(--fy-blue-tint); border-radius: 8px 8px 0 0; }

/* ==================================================================
   TESTIMONIALS
   ================================================================== */
.fy-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px; }
.fy-quote {
	background: #fff; border: 1px solid var(--fy-line); border-radius: 8px;
	padding: 30px 28px; display: flex; flex-direction: column; gap: 18px;
}
.fy-quote__mark {
	font-family: var(--fy-display); font-size: 2.6rem; line-height: .6;
	color: var(--fy-blue); opacity: .3;
}
.fy-quote p { font-size: .98rem; margin: 0; flex: 1; }
.fy-quote__who { display: flex; align-items: center; gap: 12px; }
.fy-quote__who .fy-img { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
.fy-quote__who .fy-img__slot { border-radius: 50%; padding: 0; }
.fy-quote__who .fy-img__label { font-size: .5rem; letter-spacing: .05em; }
.fy-quote__who .fy-img__hint { display: none; }
.fy-quote__name { display: block; font-weight: 600; font-size: .92rem; }
.fy-quote__place { display: block; font-family: var(--fy-mono); font-size: .74rem; color: var(--fy-muted); }

/* ==================================================================
   JOURNAL
   ================================================================== */
.fy-journal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }

@media (max-width: 1000px) {
	.fy-flow { grid-template-columns: 1fr 1fr; }
	.fy-quotes, .fy-journal { grid-template-columns: 1fr; }
	.fy-compare thead { display: none; }
	.fy-compare tbody th, .fy-compare tbody td { display: block; width: auto; padding: 12px 16px; }
	.fy-compare tbody th { border-bottom: 0; padding-bottom: 4px; }
	.fy-compare tbody td::before {
		content: attr(data-label); display: block;
		font-family: var(--fy-mono); font-size: .66rem; letter-spacing: .12em;
		text-transform: uppercase; color: var(--fy-muted); margin-bottom: 4px;
	}
	.fy-compare tbody td:nth-child(2) { border-radius: 6px; margin-bottom: 6px; }
}
@media (max-width: 560px) {
	.fy-flow { grid-template-columns: 1fr; }
}

/* ==================================================================
   WHATSAPP
   Bottom-right, above everything, and it expands to a label on hover so
   it reads as an invitation rather than an unexplained green blob.
   ================================================================== */
.fy-whatsapp {
	position: fixed; right: 20px; bottom: 20px; z-index: 150;
	display: inline-flex; align-items: center; gap: 0;
	height: 56px; padding: 0 16px; border-radius: 28px;
	background: #25D366; color: #fff; text-decoration: none;
	box-shadow: 0 8px 26px rgba(8,19,46,.24);
	transition: gap .3s cubic-bezier(.22,.68,.32,1),
	            padding .3s cubic-bezier(.22,.68,.32,1),
	            transform .22s ease, box-shadow .22s ease;
}
.fy-whatsapp svg { width: 26px; height: 26px; fill: currentColor; flex-shrink: 0; }
.fy-whatsapp__label {
	max-width: 0; overflow: hidden; white-space: nowrap;
	font-size: .92rem; font-weight: 600;
	transition: max-width .3s cubic-bezier(.22,.68,.32,1);
}
.fy-whatsapp:hover, .fy-whatsapp:focus-visible {
	color: #fff; gap: 10px; padding-right: 22px;
	transform: translateY(-2px); box-shadow: 0 12px 32px rgba(8,19,46,.3);
}
.fy-whatsapp:hover .fy-whatsapp__label,
.fy-whatsapp:focus-visible .fy-whatsapp__label { max-width: 160px; }

/* On a phone the label would cover the page, so it stays a circle — and
   it sits a little higher to clear browser chrome. */
@media (max-width: 760px) {
	.fy-whatsapp { right: 16px; bottom: 22px; height: 52px; padding: 0 13px; }
	.fy-whatsapp:hover { gap: 0; padding-right: 13px; }
	.fy-whatsapp:hover .fy-whatsapp__label { max-width: 0; }
}

@media print { .fy-whatsapp, .fy-progressbar { display: none; } }

/* ==================================================================
   ORIGIN MARKETS
   ================================================================== */
.fy-origins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px; }
.fy-origin {
	border: 1px solid var(--fy-line); border-radius: 8px; padding: 30px 28px;
	background: var(--fy-bg); display: flex; flex-direction: column; gap: 8px;
	transition: border-color .3s ease, transform .3s cubic-bezier(.22,.68,.32,1);
}
.fy-origin:hover { border-color: var(--fy-blue); transform: translateY(-3px); }
.fy-origin__tag {
	align-self: flex-start; font-family: var(--fy-mono); font-size: .66rem;
	letter-spacing: .14em; text-transform: uppercase;
	background: var(--fy-blue-tint); color: var(--fy-blue-deep);
	padding: 6px 11px; border-radius: 999px; margin-bottom: 4px;
}
.fy-origin h3 { margin: 0; font-size: 1.24rem; }
.fy-origin__ports {
	font-family: var(--fy-mono); font-size: .76rem; color: var(--fy-muted);
	letter-spacing: .02em;
}
.fy-origin p { font-size: .93rem; color: var(--fy-muted); margin: 6px 0 0; }

/* ==================================================================
   INSPECTION CHECKLIST
   Two columns of numbered checks. The numbers are real sequence — this is
   the order it is done in — so they carry information.
   ================================================================== */
.fy-checks {
	list-style: none; margin: 44px 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
}
.fy-checks li {
	display: grid; grid-template-columns: 46px 1fr; gap: 18px;
	padding: 26px 0; border-top: 1px solid var(--fy-line); align-items: start;
}
.fy-checks__n {
	font-family: var(--fy-mono); font-size: .8rem; font-weight: 500;
	color: var(--fy-blue); letter-spacing: .06em; padding-top: 3px;
}
.fy-checks h3 { margin: 0 0 6px; font-size: 1.06rem; }
.fy-checks p { margin: 0; font-size: .92rem; color: var(--fy-muted); }

@media (max-width: 1000px) {
	.fy-origins { grid-template-columns: 1fr; }
	.fy-checks { grid-template-columns: 1fr; gap: 0; }
}