/* ==========================================================================
   SITE RESKIN (15 Oct 2026, DECISIONS 15 Oct). Loaded by includes/header.cfm
   ONLY when request.reskin is true (the ?reskin=on preview cookie, or the
   go-live switch in includes/inc_reskin.cfm). Nothing here can reach a
   visitor without it.

   The look is the homepage's 9 Sept desktop redesign, as on /about:
   cream page, Bricolage Grotesque headings, small uppercase labels, ONE dark
   green #194F35 for everything you click or read (DECISIONS 4 Oct; bright
   #5DAC46 only for the logo and the quote-box bolt, never a button), plain
   1px hairlines, photos as the big thing (pictures-are-the-big-thing).
   Never: a coloured bar down the left edge of anything (DECISIONS 8 Oct),
   rainbow icon tiles, em dashes in copy.

   Part 1 is a light base for every page. Part 2 is the shared building
   blocks (.rs-*) the reskinned pages are made of. Page-only rules live in
   assets/css/rs-<page>.css, loaded through request.reskinCss.
   ========================================================================== */

body.ft-reskin {
    --rs-ink: #183F2F;
    --rs-body: #4F5D4A;
    --rs-label: #5F754F;
    --rs-green: #194F35;
    --rs-green-deep: #0E3D24;
    --rs-num: #759456;
    --rs-wash: #E9EFE2;
    --rs-page: #F7F8F3;
    --rs-hair: #DFE6D8;
    --rs-field: #D8E0D2;
    --rs-radius: 16px;
    --rs-radius-sm: 10px;
    background: var(--rs-page);
}

/* ---------- Part 1: base ---------- */

/* Buttons in the one dark green. The variables are re-pointed on the button
   itself only: the logo and the bolt keep the bright brand green. */
body.ft-reskin .btn-ft,
body.ft-reskin .btn-ft:disabled,
body.ft-reskin .btn-ft.disabled {
    --ft-green: #194F35;
    --ft-green-dark: #0E3D24;
}
body.ft-reskin .btn-ft-outline {
    border-color: var(--rs-field);
    color: var(--rs-ink);
}
body.ft-reskin .btn-ft-outline:hover,
body.ft-reskin .btn-ft-outline:focus {
    background-color: var(--rs-green);
    border-color: var(--rs-green);
    color: #fff;
}
body.ft-reskin .nav-pills .nav-link.active,
body.ft-reskin .nav-pills .show > .nav-link { background-color: var(--rs-green); }
body.ft-reskin .nav-pills .nav-link { color: var(--rs-green); }

/* Button glow and keyboard ring in the dark green (fueltool.css uses the bright green). */
body.ft-reskin .btn-ft:hover, body.ft-reskin .btn-ft-outline:hover { box-shadow: 0 6px 16px rgba(25,79,53,0.22); }
body.ft-reskin .btn-ft:focus-visible, body.ft-reskin .btn-ft-outline:focus-visible { box-shadow: 0 0 0 3px rgba(25,79,53,0.35); }
body.ft-reskin :focus-visible { outline-color: #194F35; }
body.ft-reskin .rs-hero--photo :focus-visible:not(:where(.quote-widget *, .rs-card *, .rs-panel *)),
body.ft-reskin .rs-pull :focus-visible,
body.ft-reskin #ftCookieBar :focus-visible { outline-color: #fff; }

/* Cards that rely on the page behind them stay white on the cream page; the old
   checkout steps and green text helpers follow the one dark green. */
body.ft-reskin .card-ft { background: #fff; }
body.ft-reskin .checkout-step, body.ft-reskin .text-ft-green-dark { --ft-green: #194F35; --ft-green-dark: #194F35; }

/* Footer: the homepage's cream footer on every page, every width. Its
   columns fade in with AOS; never leave them invisible. */
body.ft-reskin .footer-ft {
    background: var(--rs-page);
    color: #56694d;
    border-top: 1px solid var(--rs-hair);
    padding-top: 40px;
}
body.ft-reskin .footer-ft h6 { color: #244931; }
body.ft-reskin .footer-ft a { color: #476540; }
body.ft-reskin .footer-ft a:hover { color: var(--rs-green); }
body.ft-reskin .footer-ft .footer-bottom { color: #647758; border-top-color: #dce5d2; }
body.ft-reskin .footer-ft [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Footer on phones (15 Oct review): the brand block and the first column were centred while every
   link list was left-aligned, the tagline was said twice, and Terms and Privacy were listed twice.
   Now everything is left-aligned; the brand block's own tagline line (which also repeated "Customer
   terms - Privacy policy", both already in Tools & Guides) is hidden, and so is the "Fueltool" title
   under the logo lockup that opens the same block. Nothing is removed from the HTML (footer.cfm is
   shared with today's site) and the desktop footer is unchanged. */
@media (max-width: 767.98px) {
    body.ft-reskin .footer-ft .ft-footer-brand { text-align: left; }
    body.ft-reskin .footer-ft .ft-footer-brand .ft-footer-tag { display: none; }
    body.ft-reskin .footer-ft .row > [class*="col-"]:first-child { text-align: left; }
    body.ft-reskin .footer-ft .row > [class*="col-"]:first-child h6 { display: none; }
    body.ft-reskin .footer-ft .row > [class*="col-"]:first-child p:last-child { margin-bottom: 0; }
}

/* Preview pill: tells Rhys he is looking at the new look, one tap to leave. */
.rs-preview-pill {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #183F2F;
    color: #fff !important;
    font: 600 12px/1.2 'Open Sans', system-ui, sans-serif;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    opacity: 0.92;
}
.rs-preview-pill span { color: #9FD8B4; text-decoration: underline; }
.rs-preview-pill:hover { opacity: 1; }

/* ---------- Part 2: building blocks ---------- */

/* Page wrapper: <main class="rs-page"> right after the nav */
.rs-page { background: var(--rs-page); color: var(--rs-body); overflow-x: clip; }
.rs-page p { line-height: 1.7; }
.rs-page a:not(.btn):not(.rs-btn):not(.rs-preview-pill) { color: var(--rs-green); text-underline-offset: 3px; }
/* Inline links in body text differ from the words around them by more than colour (15 Oct review):
   underlined, thin and a little below the text. Buttons, arrow links and the details card's phone,
   email and web lines are not body-text links and keep their own look. */
body.ft-reskin :is(.rs-page, .ab-page, .ft-about) p a:where(:not(.rs-btn, .btn, .rs-arrow, .ab-btn, .ab-more, .rs-preview-pill)) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
body.ft-reskin .rs-page p.rs-contact-line a { text-decoration: none; }
.rs-page h1, .rs-page h2, .rs-page h3,
.rs-page .rs-display {
    font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
    color: var(--rs-ink);
    text-wrap: balance;
}

/* Small uppercase label above a heading */
.rs-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--rs-label);
    margin: 0 0 12px;
}

/* Headings */
.rs-page h1, .rs-page .rs-h1, .rs-h1 { font-size: 32px; font-weight: 700; line-height: 1.06; letter-spacing: -0.8px; margin: 0 0 14px; }
.rs-page h2, .rs-page .rs-h2, .rs-h2 { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.6px; margin: 0 0 16px; }
.rs-page h3, .rs-page .rs-h3, .rs-h3 { font-size: 18px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; }
.rs-lead { font-size: 16px; color: var(--rs-body); margin: 0 0 6px; max-width: 36em; }

/* Breadcrumb inside a hero */
.rs-page .breadcrumb { font-size: 13px; margin: 0 0 18px; }
.rs-page .breadcrumb a { color: var(--rs-label); }
.rs-page .breadcrumb-item.active { color: var(--rs-ink); }

/* Hero: pale wash band, heading left, usually the quote box right */
.rs-hero { background: var(--rs-wash); padding: 20px 0 28px; }
.rs-hero .row { align-items: center; }

/* Photo hero: the photo IS the band. Set the photo per page with
   style="--rs-hero-photo: var(--rs-photo-<slot>)". Text sits on the darker
   left (desktop) or top (phone) side. */
.rs-hero--photo {
    position: relative;
    background: #24372B var(--rs-hero-photo, none) center 40% / cover no-repeat;
    color: #fff;
    overflow: hidden;
}
.rs-hero--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,34,23,0.82) 0%, rgba(12,34,23,0.62) 55%, rgba(12,34,23,0.40) 100%);
}
.rs-hero--photo > .container { position: relative; }
.rs-hero--photo h1,
.rs-hero--photo .rs-h1 { color: #fff; }
.rs-hero--photo .rs-lead,
.rs-hero--photo p:not(:where(.quote-widget *, .rs-card *, .rs-panel *)) { color: rgba(255,255,255,0.92); }
.rs-hero--photo .rs-eyebrow { color: #CFE5C5; }
.rs-hero--photo .breadcrumb a,
.rs-hero--photo .breadcrumb-item.active,
.rs-hero--photo .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.85); }
body.ft-reskin .rs-page .rs-hero--photo a:not(.btn):not(.rs-btn):not(:where(.quote-widget *, .rs-card *, .rs-panel *)) { color: #fff; }
body.ft-reskin .rs-page .rs-hero--photo .breadcrumb a:not(:where(.quote-widget *)) { color: rgba(255,255,255,0.85); }

/* Numbers strip under a hero (white band, hairlines between) */
.rs-facts { background: #fff; border-bottom: 1px solid var(--rs-hair); }
.rs-facts-grid { display: grid; grid-template-columns: 1fr 1fr; }
.rs-fact { padding: 16px 12px 16px 20px; text-align: left; border-top: 1px solid var(--rs-hair); }
.rs-fact:nth-child(odd) { border-right: 1px solid var(--rs-hair); padding-left: 0; }
.rs-fact:nth-child(-n+2) { border-top: none; }
.rs-fact strong {
    display: block;
    font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
    color: var(--rs-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.4px;
}
.rs-fact span { display: block; font-size: 13px; line-height: 1.4; color: var(--rs-label); margin-top: 4px; }

/* Sections: generous padding, a hairline between neighbours. Inside, the
   usual pattern is row > .col-lg-5.rs-side (label + heading) and .col-lg-7. */
.rs-section { padding: 36px 0; }
.rs-section + .rs-section { border-top: 1px solid var(--rs-hair); }
.rs-section--wash { background: var(--rs-wash); }
.rs-section--white { background: #fff; }

/* The label + heading (.rs-side) sits ABOVE its content, never in a narrow column beside it
   (Rhys 15 Oct: columns that don't line up). Every column in that row goes full width, and
   the text under the heading keeps a reading width. */
.rs-page .row:has(> .rs-side) > * { flex: 0 0 100%; width: 100%; max-width: 100%; }
.rs-page .row:has(> .rs-side) { --bs-gutter-y: 0; row-gap: 20px; }
.rs-page .row:has(> .rs-side) > :not(.rs-side) > :is(p, ol:not(.rs-steps--row), .rs-card, .rs-copy) { max-width: 52rem; }
.rs-page .rs-side h2, .rs-page .rs-side .rs-h2 { margin-bottom: 0; }
.rs-copy p { font-size: 15.5px; margin: 0 0 14px; }
.rs-statement { font-size: 16px; line-height: 1.7; color: var(--rs-ink); margin: 0 0 12px; }
.rs-small { font-size: 14px; color: var(--rs-body); }
.rs-muted { font-size: 13px; color: var(--rs-label); }

/* Cards */
.rs-card {
    background: #fff;
    border: 1px solid var(--rs-hair);
    border-radius: var(--rs-radius);
    padding: 18px 20px;
}
.rs-card + .rs-card { margin-top: 12px; }
.rs-cards > .rs-card + .rs-card { margin-top: 0; }
.rs-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* Numbered steps (01 02 03) */
.rs-steps { list-style: none; padding: 0; margin: 0; }
.rs-steps li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rs-hair);
    font-size: 15px;
    line-height: 1.6;
}
.rs-steps li:first-child { padding-top: 0; }
.rs-steps li:last-child { border-bottom: none; }
.rs-num { font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif; font-size: 20px; color: var(--rs-num); line-height: 1.3; }

/* The same steps laid across the page (2-4 of them), for a heading-above section: set the
   count with style="--rs-steps: 4". Stacked as the plain list on a phone. */
@media (min-width: 768px) {
    .rs-steps--row { display: grid; grid-template-columns: repeat(var(--rs-steps, 3), minmax(0, 1fr)); gap: 0 28px; }
    .rs-steps--row li { display: block; padding: 16px 0 0; border-bottom: none; border-top: 1px solid var(--rs-field); }
    .rs-steps--row li:first-child { padding-top: 16px; }
    .rs-steps--row .rs-num { display: block; margin-bottom: 6px; }
}

/* Icon in a soft circle, always the one dark green (no rainbow tiles) */
.rs-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--rs-wash); color: var(--rs-green);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}

/* Full-width dark green band with one big line */
.rs-pull { background: var(--rs-green); padding: 34px 0; text-align: center; }
.rs-pull p {
    font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
    color: #fff; font-size: 24px; font-weight: 700; line-height: 1.2;
    letter-spacing: -0.4px; margin: 0 auto; max-width: 22em; text-wrap: balance;
}

/* Photos between sections. Set the photo with
   style="--rs-band-photo: var(--rs-photo-<slot>)". */
.rs-photo-band {
    height: 200px;
    background: #24372B var(--rs-band-photo, none) center / cover no-repeat;
}
.rs-split { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
.rs-split-photo {
    aspect-ratio: 3 / 2;
    border-radius: var(--rs-radius);
    background: #24372B var(--rs-band-photo, none) center / cover no-repeat;
}

/* Buttons and arrow links */
.rs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--rs-green); color: #fff; font-weight: 700; font-size: 15px;
    padding: 12px 20px; border-radius: var(--rs-radius-sm); border: none;
    text-decoration: none; white-space: nowrap;
}
.rs-btn:hover, .rs-btn:focus { background: var(--rs-green-deep); color: #fff; }
.rs-btn--ghost { background: #fff; color: var(--rs-ink); border: 1.5px solid var(--rs-field); }
.rs-btn--ghost:hover { background: var(--rs-green); color: #fff; border-color: var(--rs-green); }
.rs-arrow { font-weight: 700; text-decoration: none; }
.rs-arrow::after { content: " \2192"; }

/* Quotes from customers */
.rs-quote {
    margin: 0; background: #fff; border: 1px solid var(--rs-hair); border-radius: var(--rs-radius);
    padding: 20px; display: flex; flex-direction: column; justify-content: space-between;
}
.rs-quote blockquote { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--rs-ink); }
.rs-quote figcaption { font-size: 13px; font-weight: 600; color: var(--rs-label); }

/* Forms (sign-in, register, contact): calm fields, dark green focus */
.rs-panel {
    background: #fff; border: 1px solid var(--rs-hair); border-radius: var(--rs-radius);
    padding: 22px 20px; max-width: 520px; margin: 0 auto;
}
.rs-page .form-label:not(:where(.quote-widget *)), .rs-form label { font-weight: 600; font-size: 14px; color: var(--rs-ink); }
.rs-page .form-control:not(:where(.quote-widget *)), .rs-page .form-select:not(:where(.quote-widget *)) {
    border: 1px solid var(--rs-field); border-radius: var(--rs-radius-sm);
    padding: 0.65rem 0.85rem; font-size: 16px; background: #fff;
}
.rs-page .form-control:not(:where(.quote-widget *)):focus, .rs-page .form-select:not(:where(.quote-widget *)):focus {
    border-color: var(--rs-green); box-shadow: 0 0 0 3px rgba(25,79,53,0.15);
}
.rs-page .form-check-input:not(:where(.quote-widget *)):checked { background-color: var(--rs-green); border-color: var(--rs-green); }

/* Questions and answers (Bootstrap accordion) */
.rs-faq .accordion-item {
    border: 1px solid var(--rs-hair); border-radius: var(--rs-radius-sm) !important;
    overflow: hidden; margin-bottom: 10px; background: #fff;
}
.rs-faq .accordion-header { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.rs-faq .accordion-button {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23194F35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23194F35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    letter-spacing: normal;
    font-weight: 700; color: var(--rs-ink); font-size: 15.5px; background: #fff; box-shadow: none;
}
.rs-faq .accordion-button:not(.collapsed) { background: var(--rs-wash); color: var(--rs-ink); }
.rs-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(25,79,53,0.15); }
.rs-faq .accordion-body { color: var(--rs-body); line-height: 1.7; font-size: 15px; }

/* Long lists of links (towns, regions) */
.rs-links { list-style: none; padding: 0; margin: 4px 0 0; columns: 2; column-gap: 20px; font-size: 14.5px; line-height: 1.9; }
.rs-links li { break-inside: avoid; }
.rs-links a { text-decoration: none; }
.rs-links a:hover { text-decoration: underline; }

/* ---------- Bigger screens ---------- */
@media (min-width: 768px) {
    .rs-facts-grid { grid-template-columns: repeat(4, 1fr); }
    .rs-fact { border-top: none; border-right: 1px solid var(--rs-hair); padding: 20px 12px 20px 24px; }
    .rs-fact:nth-child(odd) { padding-left: 24px; }
    .rs-fact:first-child { padding-left: 0; }
    .rs-fact:last-child { border-right: none; }
    .rs-cards { grid-template-columns: 1fr 1fr; gap: 16px; }
    .rs-cards--3 { grid-template-columns: repeat(3, 1fr); }
    .rs-links { columns: 3; }
    .rs-split { grid-template-columns: 1fr 1fr; gap: 40px; }
    .rs-photo-band { height: 280px; }
}
@media (min-width: 992px) {
    body.ft-reskin { --rs-radius: 4px; }
    .rs-hero { padding: 28px 0 52px; }
    .rs-hero--photo { padding: 40px 0 64px; min-height: 440px; display: flex; align-items: center; }
    .rs-hero--photo::before {
        background: linear-gradient(90deg, rgba(12,34,23,0.84) 0%, rgba(12,34,23,0.58) 45%, rgba(12,34,23,0.14) 100%);
    }
    .rs-hero--photo > .container { width: 100%; }
    .rs-page h1, .rs-page .rs-h1, .rs-h1 { font-size: 50px; letter-spacing: -1.5px; margin-bottom: 18px; }
    .rs-page h2, .rs-page .rs-h2, .rs-h2 { font-size: 38px; letter-spacing: -1.1px; }
    .rs-page h3, .rs-page .rs-h3, .rs-h3 { font-size: 19px; }
    .rs-lead { font-size: 18px; }
    .rs-fact strong { font-size: 30px; }
    .rs-fact span { font-size: 13px; }
    .rs-section { padding: 60px 0; }
    .rs-side h2, .rs-side .rs-h2 { margin-bottom: 0; }
    .rs-copy p { font-size: 16.5px; }
    .rs-statement { font-size: 18px; }
    .rs-steps li { grid-template-columns: 56px 1fr; font-size: 16px; padding: 16px 0; }
    .rs-num { font-size: 21px; }
    .rs-card { padding: 24px 28px; }
    .rs-pull { padding: 48px 0; }
    .rs-pull p { font-size: 34px; letter-spacing: -0.8px; }
    .rs-photo-band { height: 360px; }
    .rs-links { columns: 4; }
    /* a short list (up to 8 links: Counties in North Wales, Northern Ireland on /towns) in four columns
       leaves the right quarter empty; three columns fill the width */
    .rs-links:not(:has(> li:nth-child(9))) { columns: 3; }
    .rs-panel { padding: 30px 32px; }
}