/* Display face: Archivo variable (weight range 500-800), self-hosted latin
subset. Headings only, body copy stays on the system stack for speed. */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url('../fonts/archivo-latin.woff2') format('woff2');
}
:root {
--c-dark: #0B1F14;
--c-dark-2: #143726;
--c-gold: #C9A227;
--c-gold-light: #E4C05C;
/* Darkened gold for small text on the paper/white surfaces, where
--c-gold only reaches ~2.2:1. This clears 4.5:1 on both. */
--c-gold-deep: #8A6A15;
--c-paper: #F5F3EE;
--c-white: #FFFFFF;
--c-ink: #17211C;
--c-ink-muted: #56635C;
--c-border: #C7C0AC;
--radius: 10px;
--max-w: 1140px;
--font-display: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -64px;
left: 8px;
z-index: 100;
background: var(--c-gold);
color: var(--c-dark);
padding: 10px 16px;
border-radius: var(--radius);
font-weight: 700;
text-decoration: none;
}
.skip-link:focus {
top: 8px;
}
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--c-ink);
background: var(--c-white);
line-height: 1.55;
/* Defensive guard: nothing on this site is meant to scroll sideways;
this catches any off-viewport animation start/end state (entrances,
the pinned steps sweep) without clipping normal vertical layout. */
overflow-x: clip;
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 {
font-family: var(--font-display);
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.015em;
margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 4.5vw + 1rem, 4rem); }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; color: var(--c-ink); }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
/* Buttons */
.btn {
display: inline-block;
padding: 0.85em 1.6em;
border-radius: var(--radius);
font-weight: 700;
text-decoration: none;
border: 2px solid transparent;
cursor: pointer;
font-size: 1rem;
}
.btn-gold { background: var(--c-gold); color: var(--c-dark); }
.btn-gold:hover { background: var(--c-gold-light); }
.btn-outline { background: transparent; border-color: var(--c-white); color: var(--c-white); }
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-outline-dark { background: transparent; border-color: var(--c-dark); color: var(--c-dark); }
.btn-outline-dark:hover { background: rgba(11,31,20,0.06); }
@media (prefers-reduced-motion: no-preference) {
.btn { transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; }
.btn-gold:hover, .btn-outline:hover, .btn-outline-dark:hover { transform: translateY(-1px); }
}
/* Header */
.site-header {
background: var(--c-dark);
border-bottom: 1px solid var(--c-dark-2);
position: sticky;
top: 0;
z-index: 50;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; gap: 12px; transition: padding 0.35s cubic-bezier(0.22,0.61,0.36,1); }
/* Wordmark: header opens at full size at the top of the page, and shrinks
once scrolled (nav.js toggles .is-scrolled past 60px). */
.logo img { height: 56px; width: auto; transition: height 0.35s cubic-bezier(0.22,0.61,0.36,1); }
.site-header.is-scrolled .header-inner { padding-top: 10px; padding-bottom: 10px; }
.site-header.is-scrolled .logo img { height: 42px; }
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
@media (max-width: 760px) {
.logo img { height: 44px; }
.site-header.is-scrolled .logo img { height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .header-inner, .logo img { transition: none; } }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { text-decoration: none; font-weight: 600; color: var(--c-white); }
.site-nav a:hover { color: var(--c-gold); }
.site-nav a.active { color: var(--c-gold); }
@media (prefers-reduced-motion: no-preference) {
.site-nav a { transition: color 0.2s ease; }
}
.nav-cta { margin-left: 8px; }
/* .site-nav a sets white text for plain nav links; the gold CTA button needs
dark text to stay readable (WCAG-failing 2.41:1 otherwise), so it's pinned
here with higher specificity rather than relying on source order. */
.site-nav a.nav-cta, .site-nav a.nav-cta:hover { color: var(--c-dark); }
.nav-toggle {
display: none;
background: none;
border: none;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
color: var(--c-white);
padding: 10px;
margin: -10px;
min-width: 44px;
min-height: 44px;
}
/* Mobile-only persistent call button. The main conversion path shouldn't
disappear inside the hamburger menu. Sits next to the toggle, always
visible, independent of nav open/closed state. */
.mobile-call-btn {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--c-gold);
color: var(--c-dark);
flex-shrink: 0;
}
.mobile-call-btn svg { width: 20px; height: 20px; }
@media (max-width: 1000px) {
.mobile-call-btn { display: inline-flex; }
}
@media (max-width: 1000px) {
.nav-toggle { display: block; }
.site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--c-dark);
border-bottom: 1px solid var(--c-dark-2);
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 8px 20px 16px;
display: none;
}
.site-nav.open { display: flex; max-height: calc(100vh - var(--header-h, 85px)); overflow-y: auto; }
.site-nav a { padding: 10px 0; width: 100%; }
.nav-cta { margin-left: 0; margin-top: 8px; }
}
/* Services jump-nav: a second sticky bar (services.html only), pinned
directly below the site header rather than at the very top of the
viewport. --header-h is set at runtime by nav.js from the header's real
offsetHeight (it isn't constant: mobile-collapsed nav, desktop nav, and
the narrow band where the gold CTA button wraps are all different
heights), so the jump-nav lands flush beneath the header instead of
overlapping it at any breakpoint. The value below is only the pre-JS
fallback. It sits one z-index layer below the header's 50 so the
header's mobile menu always wins. */
:root { --header-h: 85px; }
.jump-nav {
position: sticky;
top: var(--header-h);
z-index: 40;
background: var(--c-paper);
border-bottom: 1px solid var(--c-border);
}
.jump-nav-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 12px 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.jump-nav-scroll::-webkit-scrollbar { display: none; }
.jump-nav-scroll a {
flex-shrink: 0;
display: inline-block;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--c-border);
background: var(--c-white);
font-size: 0.85rem;
font-weight: 600;
color: var(--c-ink);
text-decoration: none;
white-space: nowrap;
}
.jump-nav-scroll a:hover, .jump-nav-scroll a:focus-visible {
background: var(--c-gold);
border-color: var(--c-gold);
color: var(--c-dark);
}
@media (prefers-reduced-motion: no-preference) {
.jump-nav-scroll a { transition: background-color 0.2s ease, color 0.2s ease; }
}
/* Anchor targets need headroom for BOTH sticky bars (header + jump-nav),
not just the header, so a pill click or deep link lands with the
section heading clear of both instead of hidden underneath them. */
.jump-target { scroll-margin-top: calc(var(--header-h) + 66px); }
/* Sections */
.section { padding: 64px 0; }
.section-alt { background: var(--c-paper); }
.section-dark {
/* Layered depth instead of a flat fill: a soft glow from the top-left
(where the logo's swoosh sweeps from) over the base green. */
background:
radial-gradient(1100px 480px at 18% -10%, rgba(20, 55, 38, 0.9), rgba(20, 55, 38, 0) 65%),
var(--c-dark);
color: var(--c-white);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--c-white); }
.section-dark p { color: #DCE4DF; }
/* Hero */
.hero { padding: 96px 0 72px; position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
/* The brand swoosh, oversized and ghosted behind the hero headline,
the logo's signature arc doing structural work instead of sitting unused. */
.hero-swoosh {
position: absolute;
top: -8%;
right: -12%;
width: 68%;
min-width: 480px;
height: auto;
opacity: 0.14;
pointer-events: none;
}
.eyebrow {
font-family: var(--font-display);
color: var(--c-gold);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.8rem;
}
/* Eyebrow on a light section: brand gold is a contrast failure at this
size on paper/white, so these use the deepened token instead. */
.eyebrow-ink { color: var(--c-gold-deep); }
/* "Most businesses stop there" band: on a light section, brand gold and the
usual muted ink both fail contrast, so this pair gets deepened tokens. */
.intent-lede { color: var(--c-ink-muted); }
.intent-hero-line { color: var(--c-gold-deep); }
.hero .actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
/* Section headings: a short gold swoosh underline replaces the bare-heading
treatment, tying every section back to the brand mark. */
.section-heading { margin-bottom: 8px; }
.swoosh-rule {
display: block;
width: 72px;
height: 12px;
margin: 0 0 28px;
color: var(--c-gold);
}
/* Trust bar: only used on index.html's hero (no other page references
.trust-bar), so this is edited directly rather than adding a variant
class. A 4-column grid, not flex-wrap, because flex-wrap with 4 roughly
equal-width items reliably breaks 3+1 at desktop widths (the 4th item
wraps alone onto its own centered row, reading as broken). Grid gives an
even 4-across at desktop and a clean 2x2 below 720px with no wrap
guesswork. Left-aligned per the source mockup, a deliberate change from
the old 3-stat version's centered text. */
.trust-bar { padding: 28px 0; border-top: 1px solid rgba(255,255,255,0.15); margin-top: 40px; }
.trust-bar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 32px; text-align: left; }
@media (max-width: 720px) { .trust-bar-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-bar strong { display: block; color: var(--c-gold); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.trust-bar span { color: #DCE4DF; font-size: 0.9rem; }
.trust-bar-fineprint {
margin: 20px auto 0; max-width: 780px; text-align: center;
font-size: 0.78rem; color: #A9B6AF; line-height: 1.5;
}
/* Hero entrance (staged reveal) and hero scroll-out scrub are both driven
by motion.js/GSAP now, scoped to .hero-animate (index.html only). Every
element GSAP animates is hidden via gsap.set() at runtime, never in CSS,
so no-JS, reduced-motion, and old browsers just see the finished hero
with no staging at all. */
/* Stat band, "Did you know" style callout. Distinct semantic colour
(not the brand gold) so the number reads as a fact being reported,
not a brand accent. */
.stat-band { text-align: center; }
.stat-band .rate-chip {
display: inline-flex; align-items: baseline; gap: 10px; margin: 18px 0 26px;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px; padding: 8px 18px 8px 8px;
}
.stat-band .rate-num {
font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
color: #1B2A20; background: var(--c-gold-light); border-radius: 999px; padding: 5px 14px;
}
.stat-band .rate-label { font-size: 0.88rem; color: #C7D1CB; }
/* ---------------------------------------------------------------------
ATO compare cards (index.html, "Did you know" / merged ATO section).
Static, side-by-side comparison of a standard ATO payment plan against
an OzCap restructure. Previously a drag-to-reveal curtain widget; owner
feedback was that dragging revealed nothing new since both figures were
already on screen, so this is now two plain cards using the existing
.compare-grid layout (side-by-side desktop, stacked below 700px, shared
with "Why a panel beats a single bank"). The two dollar figures count up
from $0 on scroll via motion.js (data-countup-target), landing on the
value already present in the markup for no-JS/reduced-motion.
Colours mirror the semantic cost/relief pair used on
ato-debt-calculator.html so the ATO story reads as one system across
the two pages.
--------------------------------------------------------------------- */
.compare-card-cost, .compare-card-relief { text-align: left; }
.compare-card-cost { background: #FBEAE1; border-color: rgba(163, 67, 31, 0.3); }
.compare-card-relief { background: #E4F2EE; border-color: rgba(31, 110, 92, 0.3); }
.compare-card-label {
font-family: var(--font-display); font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
font-size: 0.74rem; margin-bottom: 10px;
}
.compare-card-cost .compare-card-label { color: #A3431F; }
.compare-card-relief .compare-card-label { color: #1F6E5C; }
.compare-card-cost h3, .compare-card-relief h3 { margin-bottom: 16px; color: var(--c-ink); }
.compare-card-figure {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(2.2rem, 3.4vw + 0.6rem, 3.1rem);
line-height: 1; letter-spacing: -0.02em;
}
.compare-card-figure .unit { font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.compare-card-cost .compare-card-figure { color: #A3431F; }
.compare-card-relief .compare-card-figure { color: #1F6E5C; }
.compare-card-cost p, .compare-card-relief p { margin: 16px 0 0; }
/* Intro line sits between the "Did you know" copy and the cards: a small,
eyebrow-adjacent caption rather than a second section heading. */
.stat-band .compare-intro {
max-width: 640px; margin: 28px auto 0;
font-family: var(--font-display); font-weight: 700;
font-size: 1.05rem; color: var(--c-gold-light);
}
.stat-band .compare-disclaimer {
margin-top: 20px; max-width: 640px; margin-left: auto; margin-right: auto;
font-size: 0.85rem; color: #A9B6AF;
}
/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }
/* Feature card: the flagship service breaks the uniform grid and spans two
columns, dark surface, display-face heading at larger scale.
Doubled .card.card-feature specificity so these deliberately beat the
base .card shorthand rules regardless of source order. */
.card.card-feature {
grid-column: span 2;
background:
radial-gradient(700px 320px at 15% -10%, rgba(20, 55, 38, 0.9), rgba(20, 55, 38, 0) 65%),
var(--c-dark);
border: 1px solid var(--c-dark);
color: var(--c-white);
}
.card.card-feature h3 {
font-family: var(--font-display);
font-size: clamp(1.4rem, 1.4vw + 0.8rem, 1.9rem);
font-weight: 800;
color: var(--c-white);
}
.card.card-feature p { color: #DCE4DF; }
.card.card-feature .icon { color: var(--c-gold); }
.card.card-feature a { color: var(--c-gold); }
@media (max-width: 600px) { .card.card-feature { grid-column: span 1; } }
/* Wide card: full-width horizontal bookend closing the services grid. */
.card-wide {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 20px;
}
.card-wide .icon { margin-bottom: 0; flex-shrink: 0; }
.card-wide h3 { margin-bottom: 4px; }
@media (max-width: 600px) { .card-wide { flex-direction: column; align-items: flex-start; gap: 12px; } }
.card {
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: 28px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--c-ink-muted); margin-bottom: 0; }
.card .icon { width: 44px; height: 44px; margin-bottom: 14px; color: var(--c-gold); }
.card:hover { box-shadow: 0 8px 24px rgba(11,31,20,0.12); }
@media (prefers-reduced-motion: no-preference) {
.card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover { transform: translateY(-4px); }
}
/* Quick-apply tiles: homepage "Know what you need? Jump straight there."
replaces the old three-cluster grouping with one product per tile, so a
visitor who already knows what they want can go straight to a prefilled
enquiry instead of reading a grouping first. Built on the base .card
look (border/radius/padding/hover-lift already defined above), with a
flex column so the CTA row always sits at the bottom regardless of how
long the tile's line of copy runs. */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tile-grid { grid-template-columns: 1fr; } }
.tile { position: relative; display: flex; flex-direction: column; }
.tile .icon { width: 40px; height: 40px; margin-bottom: 14px; color: var(--c-gold); }
.tile p { color: var(--c-ink-muted); }
.tile-tag {
position: absolute; top: 24px; right: 24px;
background: rgba(201, 162, 39, 0.14); color: var(--c-gold-deep);
font-family: var(--font-display); font-weight: 700; font-size: 0.68rem;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 4px 10px; border-radius: 999px;
}
.tile-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; }
.tile-cta { font-weight: 700; color: var(--c-gold-deep); text-decoration: none; }
.tile-cta:hover { color: var(--c-dark); }
.tile-learn { font-size: 0.85rem; color: var(--c-ink-muted); text-decoration: none; }
.tile-learn:hover { color: var(--c-ink); text-decoration: underline; }
.tile-footnote { margin: 16px 0 0; font-size: 0.8rem; color: var(--c-ink-muted); }
@media (prefers-reduced-motion: no-preference) {
.tile-cta, .tile-learn { transition: color 0.2s ease; }
}
/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step { text-align: left; }
.step .num {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: var(--c-gold); color: var(--c-dark);
font-family: var(--font-display); font-weight: 800; margin-bottom: 12px;
}
@media (min-width: 761px) {
.step { position: relative; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: 52px; right: -8px; height: 2px; background: var(--c-border); }
.step .num { position: relative; z-index: 1; }
}
/* How-it-works reveal: motion.js adds .steps-live once the section enters
view. Everything below is scoped to that class, so with no JS or with
reduced motion the line and circles just render in their normal static
state as they always have; nothing is hidden by default. */
@media (prefers-reduced-motion: no-preference) {
.steps-live .step .num {
animation: step-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.steps-live .step:nth-child(2) .num { animation-delay: 0.15s; }
.steps-live .step:nth-child(3) .num { animation-delay: 0.3s; }
.steps-live .step:nth-child(4) .num { animation-delay: 0.45s; }
@keyframes step-pop {
from { transform: scale(0.6); }
60% { transform: scale(1.08); }
to { transform: scale(1); }
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
.steps-live .step:not(:last-child)::after {
transform-origin: left;
animation: step-line-draw 0.4s ease-out both;
}
.steps-live .step:nth-child(2):not(:last-child)::after { animation-delay: 0.15s; }
.steps-live .step:nth-child(3):not(:last-child)::after { animation-delay: 0.3s; }
@keyframes step-line-draw {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
}
/* FAQ */
.faq-item { border-bottom: 1px solid var(--c-border); padding: 20px 0; }
.faq-item h3 { margin-bottom: 8px; }
.faq-item p { color: var(--c-ink-muted); margin-bottom: 0; }
details.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; font-size: 1.4rem; font-weight: 700; color: var(--c-gold); flex-shrink: 0; }
details.faq-item[open] summary::after { content: "\2212"; }
details.faq-item summary h3 { margin-bottom: 0; }
details.faq-item p { margin-top: 12px; }
/* Comparison block */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-list { margin: 0; padding-left: 20px; color: var(--c-ink-muted); }
.compare-list li { margin-bottom: 10px; }
.compare-highlight { border-color: var(--c-gold); border-width: 2px; }
.compare-highlight .compare-list { color: var(--c-ink); }
/* Forms */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 700; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
width: 100%; padding: 12px 14px; border: 1px solid var(--c-border);
border-radius: 8px; font: inherit; background: var(--c-white);
}
.form-field textarea { min-height: 120px; resize: vertical; }
/* Contact Grid */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
/* WhatsApp card: an alternative contact channel sat under phone/email in
the contact-details column. Dark surface with a gold icon/CTA, matching
the site's existing dark-card treatment (card-feature, hero, footer)
rather than WhatsApp's own brand green. */
.whatsapp-card {
margin-top: 24px;
padding: 24px;
border-radius: var(--radius);
background: var(--c-dark);
}
.whatsapp-card .icon { width: 32px; height: 32px; color: var(--c-gold); margin-bottom: 12px; }
.whatsapp-card h3 { color: var(--c-white); margin-bottom: 8px; }
.whatsapp-card p { color: #DCE4DF; margin-bottom: 18px; }
/* Repayment calculator */
.loan-calc { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 32px; background: var(--c-white); margin-top: 32px; }
.loan-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 760px) { .loan-calc-grid { grid-template-columns: 1fr; gap: 28px; } .loan-calc { padding: 24px; } }
.loan-calc-toggle { display: flex; gap: 8px; margin-bottom: 24px; }
.loan-calc-toggle button {
flex: 1; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: 999px;
background: transparent; font: inherit; font-weight: 700; cursor: pointer; color: var(--c-ink-muted);
}
.loan-calc-toggle button.active { background: var(--c-dark); color: var(--c-white); border-color: var(--c-dark); }
.loan-calc-toggle button:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.loan-calc-field { margin-bottom: 22px; }
.loan-calc-field label { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; margin-bottom: 8px; }
.loan-calc-field .loan-calc-value { color: var(--c-ink); font-family: var(--font-display); }
.loan-calc-field input[type="range"] { width: 100%; accent-color: var(--c-gold); }
.loan-calc-result { background: var(--c-paper); border-radius: var(--radius); padding: 24px; }
.loan-calc-result .big-figure-label { color: var(--c-ink-muted); font-size: 0.9rem; margin-bottom: 4px; }
.loan-calc-result .big-figure { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: var(--c-dark); line-height: 1.1; }
.loan-calc-stats { display: flex; gap: 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.loan-calc-stats div strong { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.loan-calc-stats div span { color: var(--c-ink-muted); font-size: 0.85rem; }
.loan-calc-disclaimer { font-size: 0.78rem; color: var(--c-ink-muted); margin-top: 16px; margin-bottom: 0; }
/* Footer */
.site-footer { background: var(--c-dark); color: #DCE4DF; padding: 56px 0 28px; border-top: 1px solid var(--c-dark-2); }
.site-footer p { color: inherit; }
.footer-inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 32px; }
@media (max-width: 1000px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-logo { height: 48px; width: auto; margin-bottom: 16px; }
.footer-location { font-size: 0.85rem; color: #A9B6AF; }
.fh { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold); margin: 0 0 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; color: #DCE4DF; }
.footer-col a { text-decoration: none; color: #DCE4DF; }
.footer-col a:hover { color: var(--c-gold); }
.footer-tagline { font-family: var(--font-display); font-weight: 700; margin: 0 0 6px; }
@media (prefers-reduced-motion: no-preference) {
.footer-col a { transition: color 0.2s ease; }
}
.footer-legal { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 36px; padding-top: 20px; font-size: 0.8rem; color: #A9B6AF; grid-column: 1 / -1; }
.footer-accreditation { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.footer-accreditation .badge-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%; background: var(--c-gold);
color: var(--c-dark); font-family: var(--font-display); font-weight: 800; font-size: 0.68rem; flex-shrink: 0;
}
.footer-accreditation span { font-size: 0.8rem; color: #A9B6AF; }
.footer-accreditation .mfaa-logo { height: 38px; width: auto; display: block; border-radius: 3px; }
/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 700px) { .post-grid { grid-template-columns: 1fr; } }
.post-body { margin: 0 auto; }
.post-body p, .post-body li { font-size: 1.05rem; line-height: 1.7; }
.post-body h2 { margin-top: 1.4em; }
.post-meta { color: var(--c-ink-muted); font-size: 0.9rem; margin-bottom: 24px; }
/* Draft-status flags on privacy.html: an inline marker for clauses still
pending confirmation from Optimise Finance or a decision from Marco/Sean,
in the same "flag it, don't hide it" spirit as the page's existing
draft-warning intro paragraph. */
.privacy-flag {
display: inline-block;
background: rgba(201, 162, 39, 0.16);
color: var(--c-gold-deep);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.02em;
padding: 2px 8px;
border-radius: 6px;
}
/* Masked heading line-reveals: motion.js wraps each line of a
h2.section-heading (and blog post h1) in .line-mask > .line-inner and
animates .line-inner up into view. The mask itself must clip by default
so lines never show mid-stack for a beat before JS positions them; the
inner span only ever gets moved via gsap.set/gsap.to, never by CSS, so
without JS these elements are never split and just render as plain text. */
.line-mask { display: block; overflow: hidden; }
.line-inner { display: block; }
/* Lender logo strip */
.lenders { background: var(--c-paper); padding: 34px 0 28px; border-bottom: 1px solid var(--c-border); overflow: hidden; }
.lenders .lenders-title { margin: 0 0 22px; line-height: 1.2; text-align: center; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-muted); }
.lenders-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lenders-track { display: flex; width: max-content; animation: lenders-scroll 55s linear infinite; }
.lenders-set { display: flex; align-items: center; gap: 64px; padding: 0 32px; margin: 0; list-style: none; }
.lenders-set li { flex: none; display: flex; align-items: center; }
.lenders-set img { display: block; height: var(--h, 32px); width: auto; filter: grayscale(1); opacity: 0.72; mix-blend-mode: multiply; transition: filter 0.2s, opacity 0.2s; }
.lenders-set img:hover { filter: none; opacity: 1; }
/* Pale marks (e.g. a yellow diamond) need extra contrast to survive greyscale. */
.lenders-set li.strong img { filter: grayscale(1) brightness(0.55) contrast(1.3); opacity: 0.85; }
.lenders-set li.strong img:hover { filter: none; opacity: 1; }
/* Lenders that only publish a white logo sit on a dark tile (tile and logo greyed together). */
.lenders-set li.on-dark { background: #2b3a32; border-radius: 6px; padding: 10px 14px; filter: grayscale(1); opacity: 0.72; transition: opacity 0.2s; }
.lenders-set li.on-dark img { filter: none; opacity: 1; mix-blend-mode: normal; }
.lenders-set li.on-dark:hover { opacity: 1; }
.lenders-marquee:hover .lenders-track { animation-play-state: paused; }
.lenders-note { margin: 20px auto 0; max-width: 62ch; text-align: center; font-size: 0.75rem; color: var(--c-ink-muted); }
@keyframes lenders-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.lenders-marquee { -webkit-mask-image: none; mask-image: none; }
.lenders-track { animation: none; width: auto; justify-content: center; }
.lenders-set { flex-wrap: wrap; justify-content: center; gap: 28px 44px; padding: 0 16px; }
.lenders-set[aria-hidden="true"] { display: none; }
}
/* Form submit feedback */
.btn-spinner { display: none; width: 1em; height: 1em; margin-right: 0.6em; vertical-align: -0.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 0.7s linear infinite; }
.btn.is-loading .btn-spinner { display: inline-block; }
.btn.is-loading { cursor: progress; opacity: 0.9; }
.btn:disabled { cursor: progress; }
.btn.is-done { background: #2F7D4F; color: #fff; }
.form-status { min-height: 1.5em; margin: 12px 0 0; font-weight: 600; color: var(--c-ink-muted); }
.form-status.is-error { color: #B3402D; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation: none; } }
/* Guides: byline, short answer, sources, tables (AI/answer-engine friendly structure) */
.post-byline { color: var(--c-ink-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 24px; }
.post-byline strong { color: var(--c-ink); }
.short-answer { background: var(--c-paper); border-left: 4px solid var(--c-gold); border-radius: 0 10px 10px 0; padding: 18px 22px; margin: 0 0 28px; }
.short-answer p { margin: 0; }
.short-answer .short-answer-label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-deep); margin-bottom: 6px; }
.post-sources { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--c-border); font-size: 0.92rem; }
.post-sources h2 { font-size: 1.1rem; margin: 0 0 8px; }
.post-sources ul { margin: 0 0 12px; padding-left: 1.2em; }
.post-sources .post-note { color: var(--c-ink-muted); font-size: 0.85rem; margin: 0; }
.post-faq { margin-top: 2em; }
.table-wrap { overflow-x: auto; margin: 1.2em 0 1.6em; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 520px; }
.compare-table caption { text-align: left; font-weight: 700; padding-bottom: 8px; color: var(--c-ink); }
.compare-table th, .compare-table td { border: 1px solid var(--c-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.compare-table thead th { background: var(--c-dark); color: #fff; }
.compare-table tbody th { background: var(--c-paper); font-weight: 700; }
/* Optional newsletter tick box on the contact form */
.form-field.form-check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-bottom: 0; cursor: pointer; }
.form-field.form-check input[type="checkbox"] { width: 20px; height: 20px; padding: 0; margin: 3px 0 0; flex: none; accent-color: var(--c-gold-deep); }
/* ---------------------------------------------------------------
Service pages (/services/*): breadcrumb, lede, text/call strip,
three-step row, ticks lists, split layout, note box, closing band.
Built from existing tokens only.
--------------------------------------------------------------- */
.crumbs { font-size: 0.85rem; margin-bottom: 18px; color: #A9B6AF; }
.crumbs a { color: #DCE4DF; text-decoration: none; }
.crumbs a:hover { color: var(--c-gold); text-decoration: underline; }
.crumbs [aria-current] { color: var(--c-gold-light); }
.hero-page { padding: 72px 0 56px; }
.hero-page .lede { max-width: 640px; font-size: 1.15rem; }
.hero-note { margin: 16px 0 0; font-size: 0.95rem; color: #DCE4DF; }
.hero-note a { color: var(--c-gold); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-text { background: transparent; border-color: currentColor; }
.measure { max-width: 68ch; }
.section-head { max-width: 720px; margin-bottom: 28px; }
.kicker { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-deep); margin: 0 0 8px; }
.section-dark .kicker, .hero .kicker { color: var(--c-gold); }
.call-strip-band { background: var(--c-paper); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: 28px 0; }
.call-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.call-strip-h { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; margin: 0 0 4px; }
.call-strip-p { margin: 0; color: var(--c-ink-muted); }
.steps.steps-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .steps.steps-3 { grid-template-columns: 1fr; } }
.steps.steps-3 .step h3 { margin-bottom: 6px; }
.steps.steps-3 .step p { margin: 0; color: var(--c-ink-muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--c-gold-deep); font-weight: 800; }
.ticks-x li::before { content: "\2715"; color: var(--c-ink-muted); }
.svc-note { background: var(--c-paper); border-left: 4px solid var(--c-gold); border-radius: 0 10px 10px 0; padding: 18px 22px; margin-top: 24px; }
.svc-note h3 { margin-bottom: 6px; }
.svc-note p { margin: 0; color: var(--c-ink-muted); }
.cta-band { background: var(--c-dark); padding: 56px 0; }
.cta-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band h2 { color: var(--c-white); margin: 0 0 6px; }
.cta-band p { color: #DCE4DF; margin: 0; }
.cta-band .btn-text { color: var(--c-white); }
.svc-fineprint { font-size: 0.85rem; color: var(--c-ink-muted); margin-top: 20px; }
.ticks + h3, .ticks + h2 { margin-top: 1.6rem; }
/* ---------------------------------------------------------------
Calculator page (/calculator): tabs, inputs, result cards.
--------------------------------------------------------------- */
.calc-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 2px solid var(--c-border); margin-bottom: 28px; }
.calc-tab {
font: inherit; font-weight: 700; cursor: pointer; background: none; color: var(--c-ink-muted);
border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 12px 18px; min-height: 44px;
}
.calc-tab:hover { color: var(--c-ink); }
.calc-tab.is-active { color: var(--c-ink); border-bottom-color: var(--c-gold); }
.calc-tab:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.calc-panel[hidden] { display: none; }
.calc-sub { color: var(--c-ink-muted); margin-bottom: 24px; }
.calc-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
@media (max-width: 800px) { .calc-layout { grid-template-columns: 1fr; gap: 28px; } }
.calc-field { margin-bottom: 20px; }
.calc-field label { display: block; font-weight: 700; margin-bottom: 6px; }
.calc-field select, .calc-field input[type="number"] {
width: 100%; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 8px; font: inherit; background: var(--c-white);
}
.calc-money { display: flex; align-items: center; gap: 8px; }
.calc-money span { font-weight: 800; font-size: 1.1rem; }
.calc-range { width: 100%; margin-top: 10px; accent-color: var(--c-gold-deep); }
.calc-assume { font-size: 0.9rem; color: var(--c-ink-muted); margin-top: 8px; }
.calc-results { display: grid; gap: 16px; }
.calc-card { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 20px 22px; background: var(--c-white); }
.calc-card-cost { border-left: 4px solid var(--c-ink-muted); }
.calc-card-relief { border-left: 4px solid var(--c-gold); }
.calc-card-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold-deep); margin: 0 0 4px; }
.calc-figure { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1.1; margin: 0 0 6px; color: var(--c-ink); }
.calc-figure .unit { font-size: 1rem; font-weight: 600; color: var(--c-ink-muted); margin-left: 4px; }
.calc-line { margin: 0; color: var(--c-ink-muted); }
.calc-summary { margin: 4px 0 0; font-weight: 600; }
.calc-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 700px) { .card-grid-2 { grid-template-columns: 1fr; } }
/* Header dropdowns (Services, About). Hover or the caret button opens them; Escape closes. */
.nav-item.has-sub { position: relative; display: flex; align-items: center; gap: 2px; padding: 10px 0; }
.sub-toggle { background: none; border: 0; color: var(--c-white); cursor: pointer; width: 24px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.sub-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease; }
.nav-item.open .sub-toggle::after { transform: rotate(225deg) translate(-2px, -2px); }
.sub-toggle:hover, .sub-toggle:focus-visible { color: var(--c-gold); }
.sub-toggle:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.sub {
list-style: none; margin: 0; padding: 8px 0; display: none; position: absolute; top: 100%; left: -12px; min-width: 270px; z-index: 60;
background: var(--c-dark); border: 1px solid var(--c-dark-2); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
@media (min-width: 1001px) {
.nav-item.has-sub:hover .sub, .nav-item.has-sub.open .sub { display: block; }
}
.site-nav .sub a { display: block; padding: 9px 18px; font-weight: 600; white-space: nowrap; }
.site-nav .sub a:hover { background: var(--c-dark-2); }
.footer-legal p { margin: 0 0 10px; }
.footer-legal-links a { color: #DCE4DF; }
/* Header buttons stay on one line; the nav gets a little tighter so everything fits beside the logo. */
.site-nav a.nav-cta, .site-nav .nav-link { white-space: nowrap; }
@media (min-width: 1001px) {
.site-nav { gap: 20px; }
.site-nav a.nav-cta { margin-left: 0; padding-left: 20px; padding-right: 20px; }
}
/* Mobile menu: dropdowns become inline accordions. Kept last so it wins over the desktop dropdown rules above. */
@media (max-width: 1000px) {
.nav-item.has-sub { width: 100%; padding: 0; flex-wrap: wrap; }
.nav-item.has-sub > .nav-link { flex: 1; width: auto; }
.sub-toggle { width: 44px; height: 44px; }
.sub { position: static; display: none; width: 100%; min-width: 0; left: auto; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 14px; }
.nav-item.open .sub { display: block; }
.site-nav .sub a { padding: 9px 0; white-space: normal; }
.site-nav .sub a:hover { background: transparent; }
}
/* Homepage hero: copy on the left, call-back form on the right. */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 48px; } }
.hero-form-card { background: var(--c-dark-2); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 26px; }
.hero-form-card .hf-title { color: var(--c-white); font-size: 1.6rem; margin: 0 0 4px; }
.hero-form-card .hf-sub { color: #DCE4DF; margin: 0 0 18px; }
.hero-form-card .form-field { margin-bottom: 14px; }
.hero-form-card .form-field label { color: var(--c-white); }
.hero-form-card .hf-hint { font-weight: 400; color: #A9B6AF; font-size: 0.85rem; }
.hero-form-card .form-status { color: #DCE4DF; }
.hero-form-card .form-status.is-error { color: #FFB4A8; }
.hero-form-card .hf-fine { font-size: 0.8rem; color: #A9B6AF; margin: 14px 0 0; }
.hero-form-card .hf-fine a { color: #DCE4DF; }
/* Without JavaScript the three calculators are simply stacked; the tab bar only appears once calculator.js runs. */
.calc-tabs { display: none; }
.calc-js .calc-tabs { display: flex; }
.calc-panel + .calc-panel { margin-top: 48px; }
.calc-js .calc-panel + .calc-panel { margin-top: 0; }
/* Footer, laid out the way Marco's design has it: gold stripe, four wide columns, airy link list, wide legal block. */
.stripe { height: 4px; background: linear-gradient(90deg, #8A6A15, #C9A227 30%, #E4C05C 60%, #C9A227 85%, #8A6A15); }
.site-footer { padding: 0 0 0; border-top: 0; font-size: 0.96rem; }
.site-footer .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-top: 3rem; padding-bottom: 0; }
.site-footer .fh { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-white); margin: 0 0 0.9rem; }
.footer-col ul { display: grid; gap: 0.1rem; }
.footer-col li { margin: 0; }
.footer-col a { display: inline-block; padding-block: 0.4rem; }
.footer-col a:hover { text-decoration: underline; }
.footer-col li:not(:has(a)) { padding-block: 0.4rem; }
.site-footer .footer-brand p { max-width: 34ch; }
.site-footer .footer-tagline { margin-top: 1rem; }
.site-footer .footer-legal { margin-top: 2.2rem; padding: 1.6rem 0 2.4rem; border-top: 1px solid var(--c-dark-2); font-size: 0.84rem; line-height: 1.55; color: #DCE4DF; }
.site-footer .footer-legal p { max-width: 110ch; margin: 0 0 0.7em; }
.site-footer .footer-legal a { color: #fff; }
@media (max-width: 1000px) { .site-footer .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer .footer-inner { grid-template-columns: 1fr; } }
/* Marco's dark service cards ("Which one sounds like you?") and light "More finance" cards. */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
position: relative; display: flex; flex-direction: column; gap: 0.85rem; padding: 1.8rem 1.7rem 1.5rem; border-radius: 14px;
background: linear-gradient(160deg, #164029 0%, #0B1F14 72%); color: #fff; text-decoration: none; border: 1px solid #24503A;
overflow: hidden; isolation: isolate;
}
@media (prefers-reduced-motion: no-preference) { .pillar { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } }
.pillar::before { content: ""; position: absolute; right: -50px; bottom: -60px; width: 230px; height: 230px; background: radial-gradient(circle, rgba(201,162,39,0.22), transparent 70%); z-index: -1; }
.pillar-mark { position: absolute; right: 1rem; bottom: 0.6rem; width: 128px; height: 128px; color: rgba(201,162,39,0.1); z-index: -1; stroke-width: 1; }
.pillar-top { display: flex; align-items: center; gap: 0.9rem; }
.pillar-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--c-gold); color: var(--c-dark); flex: none; }
.pillar-icon svg { width: 28px; height: 28px; }
.pillar-tag { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-light); }
.pillar-badge { margin-left: auto; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--c-gold-light); color: var(--c-dark); padding: 0.25rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.pillar h3 { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.7rem); line-height: 1.12; margin: 0; color: #fff; }
.pillar-text { color: #DCE4DF; margin: 0; }
.pillar-cta { margin-top: auto; padding-top: 0.7rem; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--c-gold-light); font-weight: 700; }
.pillar-cta svg { width: 20px; height: 20px; }
.pillar:hover, .pillar:focus-visible { transform: translateY(-4px); border-color: var(--c-gold); box-shadow: 0 20px 44px rgba(11,31,20,0.3); }
.pillar:focus-visible { outline: 3px solid var(--c-gold-light); outline-offset: 3px; }
.more-finance { padding-top: 0; }
.more-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.more-card {
display: flex; flex-direction: column; padding: 1.4rem 1.3rem 1.2rem; border: 1px solid var(--c-border); border-radius: var(--radius);
background: var(--c-white); color: var(--c-ink); text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) { .more-card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } }
.more-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(201,162,39,0.12); color: var(--c-gold-deep); margin-bottom: 0.95rem; }
.more-icon svg { width: 26px; height: 26px; stroke-width: 1.6; }
.more-card h3 { font-size: 1.2rem; margin: 0 0 0.3rem; }
.more-card p { color: var(--c-ink-muted); margin: 0 0 1rem; flex: 1; font-size: 0.98rem; line-height: 1.5; }
.more-link { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; color: var(--c-gold-deep); }
.more-link svg { width: 18px; height: 18px; }
.more-card:hover, .more-card:focus-visible { border-color: var(--c-gold); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(11,31,20,0.12); }
.more-card:hover .more-icon, .more-card:focus-visible .more-icon { background: var(--c-gold); color: var(--c-dark); }
.more-card:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
/* Equipment & vehicle page: benefits strip, "what are you buying" cards, quote call-out lines. */
.benefit-strip { background: var(--c-dark-2); border-bottom: 1px solid rgba(255,255,255,0.08); }
.benefit-strip ul { list-style: none; margin: 0; padding: 16px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 28px; align-items: center; }
@media (max-width: 900px) { .benefit-strip ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .benefit-strip ul { grid-template-columns: 1fr; } }
.benefit-strip li { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-white); }
.asset-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .asset-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .asset-cards { grid-template-columns: 1fr; } }
.asset-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-white); font-weight: 700; line-height: 1.25; }
.asset-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(201,162,39,0.12); color: var(--c-gold-deep); }
.asset-icon svg { width: 24px; height: 24px; }
.quote-lead { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin: 0 0 0.5rem; }
.cta-band .cta-lead { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--c-white); margin: 0 0 4px; }
.structures .svc-note { max-width: 52rem; }
.site-footer .footer-legal .footer-credit { font-size: 0.72rem; color: #A9B6AF; margin: 1.1em 0 0; }
.site-footer .footer-legal .footer-credit a { color: #A9B6AF; text-decoration: underline; text-underline-offset: 2px; }
.site-footer .footer-legal .footer-credit a:hover { color: var(--c-gold-light); }
.footer-col .footer-social { list-style: none; display: flex; gap: 0.6rem; padding: 0; margin: 0.9rem 0 0; }
.footer-social li { margin: 0; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; color: var(--c-white); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); }
.footer-social svg { width: 20px; height: 20px; display: block; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--c-dark); background: var(--c-gold); border-color: var(--c-gold); text-decoration: none; }
/* ---------------------------------------------------------------
Header polish (desktop bar, dropdowns, Call button, mobile menu).
Identical on every page; the design system no longer restyles the nav.
--------------------------------------------------------------- */
.site-header {
background: rgba(11, 31, 20, 0.94);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--c-dark); } }
/* Links: quiet at rest, a fine gold underline on hover and for the current section. */
.site-nav .nav-link { position: relative; padding: 8px 0; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.9); }
.site-nav .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; border-radius: 2px; background: var(--c-gold); transform: scaleX(0); transform-origin: left; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--c-white); }
.site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { transform: scaleX(1); }
.site-nav a:focus-visible, .sub-toggle:focus-visible { outline: 2px solid var(--c-gold-light); outline-offset: 3px; border-radius: 6px; }
.sub-toggle { width: 26px; margin-left: -6px; opacity: 0.75; }
.sub-toggle:hover, .sub-toggle:focus-visible, .nav-item.open .sub-toggle { opacity: 1; }
/* Call button: set apart from the links, with a phone mark, a soft lift and a warm glow. */
.site-nav a.nav-cta {
display: inline-flex; align-items: center; gap: 9px; box-sizing: border-box; min-height: 52px; padding: 0 22px; border-radius: 10px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(201, 162, 39, 0.22);
}
html .site-nav a.nav-cta::before { display: none; } /* the design system's sweep effect uses this; the header button stays the same on every page */
.site-nav a.nav-cta::after {
content: ""; order: -1; width: 16px; height: 16px; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.site-nav a.nav-cta:hover { background: var(--c-gold-light); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 26px rgba(201, 162, 39, 0.34); }
.site-nav a.nav-cta:focus-visible { outline: 3px solid var(--c-gold-light); outline-offset: 3px; border-radius: 10px; }
/* Dropdown panel: roomier, softer, with the "all services" link set apart. */
.sub { padding: 10px; min-width: 285px; left: -14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.09); background: #0E2418; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); }
.site-nav .sub a { padding: 10px 14px; border-radius: 8px; font-size: 0.94rem; color: rgba(255, 255, 255, 0.92); }
.site-nav .sub a:hover, .site-nav .sub a:focus-visible { background: rgba(201, 162, 39, 0.14); color: var(--c-gold-light); }
#sub-services li:last-child { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.site-nav #sub-services li:last-child a { color: var(--c-gold-light); font-weight: 700; }
.site-nav #sub-services li:last-child a::after { content: " \2192"; }
/* Desktop spacing: real air between links, and more again before the Call button. */
@media (min-width: 1001px) {
.site-nav { gap: 22px; }
.site-nav a.nav-cta { margin-left: 16px; }
}
@media (min-width: 1200px) { .site-nav { gap: 26px; } .site-nav a.nav-cta { margin-left: 22px; } }
@media (min-width: 1360px) { .site-nav { gap: 30px; } .site-nav a.nav-cta { margin-left: 26px; } }
/* Motion: short, ease-out, and off for anyone who asks for reduced motion. */
@keyframes sub-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
.site-nav .nav-link::after { transition: transform 0.22s ease; }
.site-nav a.nav-cta { transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.site-nav a.nav-cta:hover { transform: translateY(-1px); }
.site-nav a.nav-cta:active { transform: translateY(0); }
.site-nav .sub a { transition: background-color 0.15s ease, color 0.15s ease; }
.sub-toggle { transition: opacity 0.15s ease; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1001px) {
.nav-item.has-sub:hover .sub, .nav-item.has-sub.open .sub { animation: sub-in 0.18s ease-out; }
}
/* Mobile menu: generous 48px rows with fine dividers, and a full-width Call button set well apart. */
@media (max-width: 1000px) {
.site-nav { padding: 4px 20px 24px; box-shadow: 0 24px 40px rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.site-nav .nav-link { display: flex; align-items: center; min-height: 48px; padding: 12px 0; font-size: 1.05rem; }
.site-nav .nav-link::after { display: none; }
.site-nav > a.nav-link, .nav-item.has-sub { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.sub { min-width: 0; left: auto; padding: 0 0 8px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.site-nav .sub a { padding: 12px 6px; font-size: 1rem; border-radius: 8px; }
.site-nav a.nav-cta { justify-content: center; width: 100%; min-height: 52px; margin: 20px 0 0; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1000px) { .site-nav.open { animation: menu-in 0.18s ease-out; } }
/* Scrollable tables can be reached and scrolled from the keyboard. */
.table-wrap:focus-visible { outline: 2px solid var(--c-gold-deep); outline-offset: 2px; }