/* ==========================================================================
   FrenchFinance.co.uk -- css/site.css
   Purpose : Site styles. Palette taken from the French Finance logo (navy key,
             red, sun yellow, sunset orange, sea blue) on limestone and white.
             Fraunces for display, Nunito Sans for text, both self-hosted.
   Version : 1.5  2026-10-22 13:20:00
   Changelog:
     1.5  2026-10-22 13:20:00  Accessibility fixes: footer links in text underlined,
                              dark text on the calculator unavailable message, focus
                              outline for scrollable tables.
     1.4  2026-09-28 20:35:00  Home hero chooser bottom aligned with the bottom of the
                              hero buttons.
     1.3  2026-09-28 20:00:00  Logo 104px (76px on small screens), nav links kept on one
                              line with the menu button from 1199px down, five footer
                              columns for the new Services column, nested fieldset style
                              for the enquiry form introductions.
     1.2  2026-09-28 19:30:00  Home hero grid: chooser top aligned beside the headline,
                              no overlap into the next section, stacks between the
                              text and the buttons on mobile. Home answer block.
                              Generic hidden rule.
     1.1  2026-09-28 19:10:00  Bigger logo.
     1.0  2026-09-28 17:30:00  First cut.
   ========================================================================== */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(../fonts/fraunces-latin-wght-normal.woff2) format('woff2-variations'), url(../fonts/fraunces-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url(../fonts/fraunces-latin-wght-italic.woff2) format('woff2-variations'), url(../fonts/fraunces-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/nunito-sans-latin-wght-normal.woff2) format('woff2-variations'), url(../fonts/nunito-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/nunito-sans-latin-wght-italic.woff2) format('woff2-variations'), url(../fonts/nunito-sans-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --navy: #28337f;
  --navy-900: #151a45;
  --navy-700: #1f2766;
  --navy-100: #e9ebf6;
  --red: #e32b3c;
  --red-deep: #bf1e32;
  --sun: #fdd23f;
  --sun-soft: #fff5cc;
  --orange: #f28a30;
  --sky: #3ab4e6;
  --sky-soft: #e8f5fb;
  --ink: #171c3a;
  --text: #2b304b;
  --muted: #565c7a;
  --stone: #f6f1e7;
  --stone-2: #ece3d2;
  --line: #ddd5c6;
  --paper: #ffffff;
  --radius: 6px;
  --wrap: 1180px;
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'Nunito Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(21, 26, 69, .06), 0 8px 24px rgba(21, 26, 69, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.65; font-optical-sizing: auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-deep); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .6em; }
h1, h2 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2.15rem, 3.2vw + 1.1rem, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.15rem); }
h3 { font-size: 1.2rem; font-weight: 800; }
h4 { font-size: 1.02rem; font-weight: 800; }
p { margin: 0 0 1em; }
small, .small { font-size: .875rem; }
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--sun); color: var(--ink); padding: .6rem 1rem; z-index: 50; font-weight: 800; }
.skip:focus { left: .5rem; }
.todo { background: var(--sun); color: var(--ink); padding: 0 .3em; border-radius: 3px; font-weight: 700; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .7rem 1.25rem; border-radius: var(--radius); border: 2px solid transparent; font: 800 1rem/1.2 var(--f-body); text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn-primary { background: var(--red-deep); color: #fff; }
.btn-primary:hover { background: #9e1728; color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-900); color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun:hover { background: #f5c211; color: var(--ink); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- utility bar and header ---------- */
.utility { background: var(--navy-900); color: #d9dcf1; font-size: .875rem; }
.utility-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; }
.utility p { margin: 0; }
.utility a { color: var(--sun); font-weight: 700; text-decoration: none; }
.utility a:hover { text-decoration: underline; color: var(--sun); }
.utility-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 128px; }
.brand { flex-shrink: 0; }
.brand img { height: 104px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.site-nav a { display: block; padding: .55rem .6rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: .98rem; border-radius: 4px; white-space: nowrap; }
.site-nav ul a:hover { background: var(--stone); color: var(--navy); }
.site-nav a[aria-current] { color: var(--navy); box-shadow: inset 0 -3px 0 var(--sun); border-radius: 0; }
.site-nav .nav-cta { color: #fff; padding: .6rem 1rem; }
.nav-toggle { display: none; align-items: center; gap: .55rem; background: none; border: 2px solid var(--navy); color: var(--navy); border-radius: var(--radius); padding: .5rem .8rem; font: 800 .95rem var(--f-body); cursor: pointer; min-height: 44px; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

@media (max-width: 1199px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); flex-direction: column; align-items: stretch; padding: .75rem 1rem 1.25rem; gap: .75rem; }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { padding: .8rem .5rem; border-bottom: 1px solid var(--stone-2); }
  .site-nav a[aria-current] { box-shadow: inset 4px 0 0 var(--sun); padding-left: .9rem; }
  .brand img { height: 76px; }
  .header-inner { min-height: 96px; }
  .utility p:not(.utility-links) { display: none; }
  .utility-inner { justify-content: flex-end; }
}

/* ---------- home hero ---------- */
.home-hero { position: relative; color: #fff; background: var(--navy-900); isolation: isolate; }
.home-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; z-index: -2; }
.home-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,19,52,.9) 0%, rgba(15,19,52,.72) 42%, rgba(15,19,52,.18) 78%, rgba(15,19,52,.05) 100%); }
.home-hero-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); grid-template-rows: 1fr auto auto; grid-template-areas: "text chooser" "actions chooser" "note ."; column-gap: 3rem; row-gap: 0; align-items: start; padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-text { grid-area: text; }
.home-hero h1 { color: #fff; max-width: 18ch; }
.home-hero .lede { font-size: 1.18rem; max-width: 52ch; color: #eef0fb; }
.home-hero .eyebrow { color: var(--sun); }
.hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero-note { grid-area: note; font-size: .875rem; color: #cfd3ee; margin-top: 1rem; }
.chooser { grid-area: chooser; align-self: end; background: #fff; color: var(--text); border-radius: 10px; padding: 1.5rem; box-shadow: var(--shadow); border-top: 6px solid var(--sun); position: relative; }
.chooser h2 { font-size: 1.45rem; margin-bottom: .35rem; }
.chooser p { font-size: .95rem; color: var(--muted); }
.chooser fieldset { border: 0; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.chooser legend { font-weight: 800; margin-bottom: .5rem; color: var(--ink); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: flex; align-items: center; border: 2px solid var(--line); border-radius: var(--radius); padding: .65rem .75rem; font-weight: 700; cursor: pointer; min-height: 48px; line-height: 1.25; }
.choice input:checked + span { border-color: var(--navy); background: var(--navy-100); }
.choice input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.chooser .btn { width: 100%; }
@media (max-width: 900px) {
  .home-hero-inner { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "text" "chooser" "actions" "note"; row-gap: 1.5rem; }
  .hero-actions { margin-top: 0; }
  .hero-note { margin-top: -.5rem; }
  .chooser { align-self: start; }
  .home-hero::before { background: linear-gradient(180deg, rgba(15,19,52,.85) 0%, rgba(15,19,52,.7) 60%, rgba(15,19,52,.55) 100%); }
}

/* ---------- page hero ---------- */
.page-hero { position: relative; color: #fff; background: var(--navy-900); isolation: isolate; }
.page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(15,19,52,.88) 0%, rgba(15,19,52,.66) 48%, rgba(15,19,52,.12) 100%); }
.page-hero-inner { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.25rem, 4vw, 3.75rem); }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lede { font-size: 1.15rem; max-width: 60ch; color: #eef0fb; margin-bottom: 0; }
.page-hero-plain { background: var(--navy); }
.page-hero-plain::before { display: none; }
.eyebrow { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--red-deep); margin-bottom: .6rem; }
.page-hero .eyebrow { color: var(--sun); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.25rem; padding: 0; font-size: .875rem; color: #d7dbf3; }
.crumbs li + li::before { content: '/'; margin-right: .3rem; opacity: .7; }
.crumbs a { color: #fff; }
.crumbs a:hover { color: var(--sun); }

/* ---------- content layout ---------- */
.section { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }
.section-stone { background: var(--stone); }
.section-sky { background: var(--sky-soft); }
.section-head { max-width: 62ch; margin-bottom: 2rem; }
.home-answer { max-width: 72ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.home-answer p { font-size: 1.08rem; }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 4vw, 4rem); align-items: start; padding: clamp(2.25rem, 4vw, 3.5rem) 0 clamp(3rem, 5vw, 4.5rem); }
.layout-aside { position: sticky; top: 1rem; display: grid; gap: 1.25rem; }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } .layout-aside { position: static; } }

.prose { max-width: 72ch; }
.prose > h2 { margin-top: 2.4rem; padding-top: .2rem; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--red-deep); }
.updated { font-size: .875rem; color: var(--muted); margin-bottom: 1.5rem; }
.answer { background: var(--sun-soft); border-left: 6px solid var(--sun); padding: 1.1rem 1.35rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 2rem; }
.answer p:last-child { margin-bottom: 0; }
.answer-label { font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--ink); margin-bottom: .35rem; }
.note { background: var(--sky-soft); border-left: 6px solid var(--sky); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0; }
.note p:last-child { margin-bottom: 0; }
.warn { background: #fdecee; border-left: 6px solid var(--red); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0; }
.source { font-size: .85rem; color: var(--muted); }
.source a { color: var(--muted); }
figure { margin: 2rem 0; }
figure img { border-radius: var(--radius); }
figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }

/* tables */
.table-wrap { overflow-x: auto; margin: 1.25rem 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
table.data { width: 100%; border-collapse: collapse; font-size: .96rem; background: #fff; }
table.data caption { text-align: left; font-weight: 800; padding: .75rem 1rem; color: var(--ink); background: var(--stone); }
table.data th, table.data td { padding: .65rem 1rem; text-align: left; border-bottom: 1px solid var(--stone-2); vertical-align: top; }
table.data thead th { background: var(--navy); color: #fff; font-weight: 800; }
table.data tbody tr:nth-child(even) { background: #fbf8f2; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tfoot td { font-weight: 800; background: var(--stone); }
.copy-bar { display: flex; justify-content: flex-end; margin: -.75rem 0 1.5rem; }
.copy-btn { background: #fff; border: 1px solid var(--line); color: var(--navy); border-radius: var(--radius); padding: .35rem .75rem; font: 700 .85rem var(--f-body); cursor: pointer; min-height: 34px; }
.copy-btn:hover { border-color: var(--navy); }

/* side cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.35rem; }
.card h2, .card h3 { font-size: 1.2rem; }
.card-cta { background: var(--navy); color: #eef0fb; border: 0; }
.card-cta h2, .card-cta h3 { color: #fff; font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; }
.card-cta .btn { width: 100%; }
.toc ol { margin: 0; padding-left: 1.1rem; font-size: .95rem; }
.toc li { margin-bottom: .35rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc-title { font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin-bottom: .6rem; color: var(--ink); }

/* steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0 2rem; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 1.6rem 3.75rem; margin: 0; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--navy); color: #fff; font: 700 1.15rem/2.5rem var(--f-display); text-align: center; }
.steps > li::after { content: ''; position: absolute; left: 1.2rem; top: 2.6rem; bottom: .2rem; width: 2px; background: var(--stone-2); }
.steps > li:last-child::after { display: none; }
.steps h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.steps .when { display: inline-block; font-size: .8rem; font-weight: 800; background: var(--sun-soft); color: var(--ink); padding: .1rem .5rem; border-radius: 3px; margin-bottom: .4rem; }

/* key facts */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { padding: 1.5rem 1.25rem 1.25rem; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact .fact-num { font: 600 clamp(2rem, 2.6vw + 1rem, 2.9rem)/1 var(--f-display); color: var(--navy); margin-bottom: .5rem; }
.fact .fact-num span { font-size: .5em; font-weight: 600; }
.fact p { font-size: .95rem; margin-bottom: .4rem; }
.fact .fact-num { margin-bottom: .5rem; }
.fact .source { font-size: .8rem; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } .fact:nth-child(3) { border-left: 0; padding-left: 0; } .fact { border-top: 1px solid var(--line); } .fact:nth-child(-n+2) { border-top: 0; } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } .fact { border-left: 0; padding-left: 0; } .fact:nth-child(2) { border-top: 1px solid var(--line); } }

/* region tiles */
.tiles { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 240px 240px 200px; gap: .9rem; }
.tile { position: relative; overflow: hidden; border-radius: 10px; color: #fff; text-decoration: none; isolation: isolate; display: flex; align-items: flex-end; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(15,19,52,.88) 0%, rgba(15,19,52,.35) 55%, rgba(15,19,52,0) 100%); }
.tile:hover img { transform: scale(1.04); }
.tile:hover { color: #fff; }
.tile-body { padding: 1.1rem 1.2rem; }
.tile-name { font: 600 1.45rem/1.1 var(--f-display); display: block; margin-bottom: .3rem; }
.tile-note { font-size: .92rem; color: #e9ebf8; display: block; max-width: 44ch; }
.tile-a { grid-row: 1 / span 2; }
.tile-f { grid-column: 1 / span 3; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 220px; } .tile-a { grid-row: auto; grid-column: 1 / span 2; } .tile-f { grid-column: 1 / span 2; } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } .tile-a, .tile-f { grid-column: auto; } }

/* split feature */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-img img { border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.split-rev .split-img { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split-rev .split-img { order: 0; } }

/* link lists */
.link-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; padding: 1rem .25rem; text-decoration: none; color: var(--ink); }
.link-list a:hover { background: var(--stone); }
.link-list strong, .link-list .ll-title { font-weight: 800; font-size: 1.08rem; }
.link-list .ll-desc { grid-column: 1; color: var(--muted); font-size: .95rem; }
.link-list .ll-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--red-deep); font-weight: 800; }

.related { margin-top: 3rem; padding-top: 2rem; border-top: 3px solid var(--sun); }
.related h2 { font-size: 1.5rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 2rem; }
.related a { font-weight: 800; display: block; }
.related span { display: block; color: var(--muted); font-size: .92rem; }

/* call to action band */
.cta-band { background: var(--navy); color: #e3e6f7; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2.25rem, 4vw, 3.25rem) 0; }
.cta-band h2 { color: #fff; margin-bottom: .35rem; }
.cta-band p { margin: 0; max-width: 60ch; }
.cta-band a:not(.btn) { color: var(--sun); }
@media (max-width: 760px) { .cta-band-inner { flex-direction: column; align-items: flex-start; } }

/* agent band on home */
.agent-band { background: var(--stone); border-top: 6px solid var(--red-deep); }
.agent-band .split-img img { aspect-ratio: 3 / 2; }
.lang-pair { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.1rem; }
.form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.25rem .5rem; margin: 0; background: #fff; }
.form legend { font: 600 1.25rem var(--f-display); color: var(--ink); padding: 0 .4rem; }
.field { margin-bottom: 1rem; }
.field label, .field .label { display: block; font-weight: 800; color: var(--ink); margin-bottom: .3rem; }
.field .hint { display: block; font-size: .88rem; color: var(--muted); margin: -.1rem 0 .35rem; font-weight: 400; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=number], .field input[type=url], .field select, .field textarea {
  width: 100%; font: 1rem var(--f-body); color: var(--ink); background: #fff; border: 2px solid #b9b3a6; border-radius: var(--radius); padding: .65rem .75rem; min-height: 48px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); outline: 3px solid rgba(58,180,230,.45); outline-offset: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.check { display: grid; grid-template-columns: 26px 1fr; gap: .6rem; align-items: start; margin-bottom: .9rem; }
.check input { width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--navy); }
.check label { font-weight: 400; }
.form .sub-fieldset { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1rem 0 .25rem; margin: .25rem 0 1rem; background: none; }
.form .sub-fieldset legend { font: 800 1.02rem var(--f-body); padding: 0 .5rem 0 0; }
.form .sub-fieldset .hint { margin-bottom: .75rem; }
.radio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.error-summary { border: 3px solid var(--red); border-radius: var(--radius); padding: 1rem 1.25rem; background: #fdecee; }
.error-summary h2 { font-size: 1.2rem; color: var(--red-deep); }
.field-error { color: var(--red-deep); font-weight: 700; font-size: .92rem; display: block; margin-top: .3rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.step-head { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; font-weight: 800; color: var(--muted); }
.step-dot { width: 2rem; height: 2rem; border-radius: 50%; background: var(--stone-2); color: var(--ink); display: inline-grid; place-items: center; font-weight: 900; }
.step-dot.on { background: var(--navy); color: #fff; }
.indicator { border-radius: 10px; padding: 1rem 1.25rem; margin: 0 0 1rem; background: var(--sky-soft); border: 1px solid #bfe3f4; }
.indicator strong { color: var(--ink); }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.privacy-line { font-size: .9rem; color: var(--muted); }
.success { border-left: 6px solid #2f8a4c; background: #eaf6ee; padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; }

/* ---------- calculators ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.calc-inputs { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem; }
.calc-results { position: sticky; top: 1rem; background: var(--navy); color: #e8eaf8; border-radius: 10px; padding: 1.5rem; }
.calc-results h2 { color: #fff; font-size: 1.5rem; }
.calc-total { font: 600 clamp(2.1rem, 3vw + 1rem, 3rem)/1.05 var(--f-display); color: var(--sun); margin: .25rem 0 .35rem; }
.calc-sub { color: #cdd1ee; font-size: .95rem; margin-bottom: 1rem; }
.calc-results table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.calc-results th, .calc-results td { padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.14); text-align: left; font-weight: 400; }
.calc-results td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-results tr.total td, .calc-results tr.total th { font-weight: 800; color: #fff; border-bottom: 0; }
.calc-results .copy-btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); margin-top: 1rem; }
.calc-results .small { color: #bfc4e8; }
.calc-results a { color: var(--sun); }
.unavailable { background: #fdecee; color: var(--ink); border-left: 6px solid var(--red); padding: 1rem 1.25rem; }
.sources-list { font-size: .88rem; color: var(--muted); padding-left: 1.1rem; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc-results { position: static; } }

/* glossary and questions */
.glossary dt { font: 600 1.3rem var(--f-display); color: var(--ink); margin-top: 1.75rem; scroll-margin-top: 1rem; }
.glossary dt .say { font: italic 400 .95rem var(--f-body); color: var(--muted); margin-left: .5rem; }
.glossary dd { margin: .35rem 0 0; }
.az { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.5rem; }
.az a { display: inline-grid; place-items: center; min-width: 2.2rem; min-height: 2.2rem; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; font-weight: 800; }
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font: 600 1.2rem/1.3 var(--f-display); color: var(--ink); list-style: none; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; position: absolute; right: .5rem; top: .9rem; font: 400 1.6rem var(--f-body); color: var(--red-deep); }
.qa details[open] summary::after { content: '\2212'; }
.qa .qa-body { padding: 0 0 1.25rem; max-width: 70ch; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-900); color: #c9cdea; margin-top: 0; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--sun); text-decoration: underline; }
.site-footer p a { text-decoration: underline; text-underline-offset: 2px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 2.7fr; gap: 3rem; padding: 3.5rem 0 2rem; }
.footer-name { font: 600 1.6rem var(--f-display); color: #fff; margin-bottom: .6rem; }
.footer-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.footer-head { font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--sun); margin-bottom: .75rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .5rem; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.14); padding: 1.5rem 0 2.25rem; font-size: .875rem; }
.legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 0 0 1rem; }
.legal-links .linklike { color: #fff; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } .footer-nav { grid-template-columns: 1fr 1fr; } }

/* ---------- consent banner ---------- */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60; display: flex; justify-content: center; }
.consent[hidden] { display: none; }
[hidden] { display: none !important; }
.consent-inner { background: #fff; color: var(--text); max-width: 760px; width: 100%; border-radius: 10px; box-shadow: 0 10px 40px rgba(15,19,52,.3); border-top: 6px solid var(--sun); padding: 1.1rem 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.consent-inner p { margin: 0; font-size: .95rem; }
.consent-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 640px) { .consent-inner { grid-template-columns: 1fr; } .consent-actions .btn { flex: 1; } }

/* ---------- misc ---------- */
.two-col-list { columns: 2 260px; column-gap: 2.5rem; }
.pill-note { display: inline-block; background: var(--sun-soft); border-radius: 3px; padding: .05rem .45rem; font-size: .82rem; font-weight: 800; color: var(--ink); }
.lead-p { font-size: 1.15rem; color: var(--ink); }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .utility, .site-header, .site-footer, .consent, .cta-band, .layout-aside, .nav-toggle { display: none !important; } .page-hero { color: #000; background: none; } .page-hero-img, .page-hero::before { display: none; } .page-hero h1, .page-hero .lede, .crumbs a { color: #000; } }

/* two-step enquiry: step buttons only exist once site.js has taken over */
.js-only { display: none; }
.is-stepped .js-only { display: inline-flex; }
.step-head { flex-wrap: wrap; }
.form-aside-list { padding-left: 1.1rem; margin: 0; }
.form-aside-list li { margin-bottom: .5rem; }

.page-hero .lede a { color: var(--sun); }
.page-hero .lede a:hover { color: #fff; }