/* ============================================================================
   FVA 2026 SITE STYLESHEET

   HOW THIS FILE IS ORDERED, and why it matters

     1. Vendor and reset      normalise, then the site's own element resets
     2. Template components   header, hero, cards, footer - from the mockups
     3. Media queries         largest breakpoint first, then down
     4. CMS + corrections     .page-content, .page-aside, contacts, homepage
                              feeds, focus visibility - everything added since
                              the site became database-driven

   Later wins at equal specificity, so section 4 is last on purpose: it has to
   out-rank template rules written for the mockups. Add new work THERE, not in
   the middle of section 2.

   TWO TRAPS THIS FILE HAS SET BEFORE

   Duplicate selectors. The same selector used to be declared up to seven times;
   edits landed on a copy that a later copy overrode, and appeared to do nothing.
   Cleaned out - keep it that way by searching for a selector before adding it.

   Resets that reach further than intended. `ul` with list-style none was written
   for nav menus and also stripped the bullets from prose; `a` with outline none
   removed the focus ring from every link on the site. Scope a reset to what it
   is for, or expect to fight it later.

   Verifying a change to this file: parse before and after, compute the winning
   declaration for every (media context, selector, property), and compare. That
   catches what a screenshot cannot, and it needs no deployment.
   ============================================================================ */
/* global css */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body {
    font-family: "Poppins", sans-serif;
    color: #373B49;
}

a {
    text-decoration: none;
    color: #373B49;
    outline: none;
    transition: 0.3s;
}

a:hover {
    color: #5FBDE2;
}

h1 {
    font-size: 60px;
    font-weight: 600;
    line-height: 70px;
}

h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 55px;
    letter-spacing: -1px;
}

h3 {
    font-size: 30px;
    font-weight: 600;
    line-height: 35px;
}

p,
span {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;

}

.container {
    max-width: 1260px;
}

/* header css */
form.mbl-search-form {
    display: none;
}

.top-header {
    background: #ffffff;
    z-index: 999;
    position: relative;
}

.top-right-menu ul.navbar-nav {
    justify-content: end;
    width: 100%;
}

.top-header ul.navbar-nav li {
    position: relative;
    margin-right: 30px;
}

.header-logo {
    text-align: left;
}

.top-header nav.navbar {
    background: #A1BA54;
}

.top-right-menu ul.navbar-nav li.nav-item:last-child {
    margin: 0;
}

.top-header .navbar-nav .nav-link {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    /* 6px, not 10px. This is THE rule that decides nav link height - a more specific,
       later, media-matching override elsewhere in this file silently fails to apply to
       padding (though its line-height does), which is unexplained. Rather than leave a
       rule that looks like it works and does not, the value is set at source.
       On mobile this gives 6 + 33 + 6 = 45px per item, which lifts the search box clear
       of the Cookie Script badge floating at the bottom of the screen. On desktop it
       tightens the header links by 8px, which is the price of it working. */
    padding: 6px 0px;
    transition: 0.3s;
}

.top-right-menu ul.navbar-nav li .nav-link {
    color: #373B49;
}

.top-header .navbar-nav .nav-link:hover,
.top-right-menu ul.navbar-nav li .nav-link.active {
    color: #5FBDE2;
}

.top-header .navbar-nav .nav-link:before {
    content: "";
    position: absolute;
    bottom: 8px;
    width: 0%;
    background: #5FBDE2;
    height: 2px;
    transition: 0.3s ease-in-out;
}

.top-right-menu nav.navbar {
    background: transparent;
}

.top-header .navbar-nav .nav-link:hover::before,
.top-right-menu ul.navbar-nav li .nav-link.active::before {
    width: 100%;
}

.top-header .main-menu .navbar-nav .nav-link:before {
    background: #100a4c;
}

.top-header .main-menu .navbar-nav .nav-link:hover {
    color: #100a4c;
}

.main-menu {
    padding: 14px 0;
}

.top-tablet {
    display: none;
}

.top-bar {
    background: #ffffff;
    padding: 40px 0px;
}

.menubar-icon .bar1,
.menubar-icon .bar2,
.menubar-icon .bar3 {
    width: 24px;
    height: 4px;
    margin: 6px 0;
    transition: 0.4s;
    background: #373B49;
}

.change .bar1 {
    transform: translate(0, 10px) rotate(-45deg);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: translate(0, -10px) rotate(45deg);
}


.top-header .container {
    position: relative;
}

.top-left span {
    font-size: 14px;
    display: inline-block;
    margin-right: 50px;
}

.top-bar .col-md-12 {
    display: flex;
    align-items: center;
    justify-content: end;
    padding-bottom: 0px;
}

.top-right .form-control {
    font-size: 15px;
    font-weight: 400;
    border: 1px solid #A1BA54;
    border-radius: 10px;
    box-shadow: none;
    padding: 7px 52px 7px 20px;
}

.top-right .form-control::placeholder {
    color: #7070706E;
}

.top-right form button.btn {
    background: #A1BA54;
    color: #fff;
    border-radius: 10px;
    position: absolute;
    right: 12px;
}

.top-bar .col-md-7 {
    display: flex;
    align-items: end;
    justify-content: end;
}

.top-header .second-menu {
    display: none;
}

.mbl-logo {
    display: none;
}

/* footer css start here */
footer.fva-footer {
    background: #373B49;
    padding-top: 70px;
    padding-bottom: 30px;
}

footer.fva-footer h3 {
    color: #fff;
    font-size: 35px;
    line-height: 42px;
    letter-spacing: -0.35px;
}

footer.fva-footer h3 p {
    font-size: 24px;
    line-height: 30px;
    margin-top: 10px;
    letter-spacing: -0.24px;
    font-weight: 600;
}

footer.fva-footer .fva-info {
    display: flex;
    flex-direction: column;
}

footer.fva-footer .fva-info p,
footer.fva-footer .fva-info p a {
    color: #fff;
    font-size: 20px;
    line-height: 32px;
    margin-top: 5px;
    margin-bottom: 20px;
}

footer.fva-footer ul li a:hover,
footer.fva-footer .fva-info p a:hover,
footer.fva-footer .fva-info a:hover {
    color: #5FBDE2;
}

footer.fva-footer .fva-info a:hover img {
    filter: brightness(0) saturate(100%) invert(66%) sepia(75%) saturate(369%) hue-rotate(164deg) brightness(90%) contrast(96%);
}

footer.fva-footer .fva-info span {
    color: #fff;
    width: 40%;
    display: inline-block;
}

footer.fva-footer .fva-info a {
    color: #fff;
    margin-top: 20px;
}

footer.fva-footer h4 {
    color: #fff;
    font-size: 24px;
    line-height: 42px;
    margin-bottom: 20px;
    margin-top: 34px;
}

footer.fva-footer ul {
    display: flex;
    flex-wrap: wrap;
}

footer.fva-footer ul li {
    width: 38.3%;
    margin-bottom: 0px;
}

/* The quick links are two INDEPENDENT columns, so each list stacks normally and a
   missing link shortens one column instead of reflowing both. Overrides the wrapping
   flex list above, which the rest of the footer still uses. */
footer.fva-footer .footer-links {
    display: flex;
    gap: 30px;
}

footer.fva-footer .footer-links ul {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

footer.fva-footer .footer-links ul li {
    width: auto;
}

footer.fva-footer ul li a {
    color: #fff;
    font-size: 15px;
    line-height: 22px;
}

footer.fva-footer .footer-copyright p {
    color: #fff;
    margin-top: 30px;
    font-size: 13px;
    line-height: 20px;
}

footer.fva-footer .footer-copyright p a {
    color: #fff;
    text-decoration: underline;
}

.footer-social-icons {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
}

.footer-social-icons img {
    width: 40px;
    margin-right: 20px;
    filter: brightness(0) invert(1);
}

/* footer css end here */

/* homepage css start here */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.fva-hero .fva_banner_slider {
    height: 495px;
}

.fva-hero .fva_banner_slider .slide-content {
    position: absolute;
    top: 14%;
    transform: translate(-50%);
    left: 36%;
    width: 36%;
    text-align: left;
}

.fva-hero .fva_banner_slider .swiper-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(8deg, #14141475, #3131317d);
    width: 100%;
    height: 100%;
}

.fva-hero .fva_banner_slider .slide-content h2 {
    font-size: 65px;
    color: #fff;
    line-height: 75px;
    letter-spacing: -0.3px;
}

.fva-hero .fva_banner_slider .slide-content h2 span {
    display: block;
    background: #735f8e;
    width: fit-content;
    padding: 0 10px;
    font-size: 65px;
    color: #fff;
    line-height: 70px;
    font-weight: 600;
    margin-left: -12px;
}

.fva-hero .fva_banner_slider .slide-content a {
    margin-top: 30px;
    display: flex;
    background: #5BB264;
    color: #fff;
    width: 138px;
    height: 50px;
    font-size: 14px;
    justify-content: center;
    border-radius: 19px;
    align-items: center;
    transition: 0.3s all;
    font-weight: 500;
}

.fva-hero .fva_banner_slider .slide-content a:hover {
    background: #5FBDE2;
}

.fva_banner_slider .swiper-pagination {
    bottom: 30px;
}

.fva-hero .fva_banner_slider .swiper-pagination-bullet {
    width: 16px !important;
    height: 16px !important;
    background: transparent;
    border: 1px solid #fff !important;
    opacity: 1;
    cursor: pointer;
}

.fva-hero .fva_banner_slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff;
    width: 16px !important;
    height: 16px !important;
}

.fva-cta {
    background: #142C55;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.fva-cta h1 {
    color: #fff;
    font-size: 40px;
}

.fva-cta p {
    color: #fff;
    font-size: 20px;
    width: 100%;
    margin: auto;
    line-height: 32px;
    margin-bottom: 40px;
    font-weight: 300;
}

.fva-cta a {
    display: flex;
    background: #5BB264;
    color: #fff;
    width: 138px;
    height: 50px;
    font-size: 14px;
    justify-content: center;
    border-radius: 19px;
    margin: auto;
    align-items: center;
    transition: 0.3s all;
    font-weight: 500;
}

.fva-cta a:hover {
    background: #5FBDE2;
}

.fva-services .services-grid ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 26px;
}

.fva-services .services-grid ul li {
    padding: 20px 30px;
    text-align: center;
    transition: 0.3s all;
    list-style: none;
}

.fva-services .services-grid ul li img {
    width: 100px;
    margin: auto;
    filter: brightness(0) invert(1);
    display: block;
}

.fva-services .services-grid ul li h5 {
    color: #fff;
    margin-top: 20px;
    font-size: 30px;
    font-weight: 300;
    line-height: 35px;
    margin-bottom: 0;
}

.fva-services .services-grid ul li:first-child {
    background: #735F8E;
}

.fva-services .services-grid ul li:first-child:hover {
    background: #735F8EBF;
}

.fva-services .services-grid ul li:nth-child(2) {
    background: #162E59;
}

.fva-services .services-grid ul li:nth-child(2):hover {
    background: #162E59BF;
}

.fva-services .services-grid ul li:nth-child(3) {
    background: #5FBDE2;
}

.fva-services .services-grid ul li:nth-child(3):hover {
    background: #5FBDE2BF;
}

.fva-services .services-grid ul li:nth-child(4) {
    background: #F2A55F;
}

.fva-services .services-grid ul li:nth-child(4):hover {
    background: #F2A55FBF;
}

.fva-services .services-grid ul li:nth-child(5) {
    background: #5BB264;
}

.fva-services .services-grid ul li:nth-child(5):hover {
    background: #5BB264BF;
}

.fva-services .services-grid ul li:nth-child(6) {
    background: #DD5465;
}

.fva-services .services-grid ul li:nth-child(6):hover {
    background: #DD5465BF;
}

.fva-services .services-grid ul li:nth-child(7) {
    background: #EA819D;
}

.fva-services .services-grid ul li:nth-child(7):hover {
    background: #EA819DBF;
}

.fva-services .services-grid ul li:nth-child(8) {
    background: #A1BA54;
}

.fva-services .services-grid ul li:nth-child(8):hover {
    background: #A1BA54BF;
}

.fva-services .services-grid ul li:last-child {
    background: #E56F61;
}

.fva-services .services-grid ul li:last-child:hover {
    background: #E56F61BF;
}

.fva-services {
    padding: 70px 0;
}

.fva-events-outer {
    background: #5FBDE2DE;
    padding-top: 70px;
    padding-bottom: 120px;
    margin-top: 120px;
}

.fva-services .container {
    max-width: 1180px;
}

.fva-newsletter {
    background: #735F8E;
    width: 78%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -180px;
    padding: 50px 40px;
    box-shadow: 0px 30px 60px #1A4D79A7;
}

.fva-newsletter h2 {
    color: #fff;
    font-size: 35px;
    text-align: center;
    margin-bottom: 20px;
    line-height: 45px;
}

.fva-newsletter form .form-group {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fva-newsletter form .form-group input {
    height: 54px;
    width: 50%;
    border-radius: 10px 0px 0px 10px;
    border: 0;
    padding: 10px 15px;
    outline: none;
}

.fva-newsletter form .form-group input::placeholder {
    color: #D7D7DA;
}

.fva-newsletter form .form-group button.fva-submit {
    background: #162E59;
    width: 127px;
    border: 0;
    height: 54px;
    color: #fff;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s all;
    letter-spacing: -0.14px;
}

.fva-newsletter form .form-group button.fva-submit:hover {
    background: #5BB264;
}

.fva-events-row {
    margin-top: 80px;
}

.fva_event_box {
    text-align: left;
}

.fva_event_box .fva-post .post-avtar {
    background: #735f8e;
}

.fva_event_box .fva-post .post-avtar img {
    width: 45px;
    filter: brightness(0) invert(1);
    height: 45px;
}

.fva_event_box>p {
    font-size: 15px;
    color: #B9B5B5;
    margin-bottom: 20px;
}

.fva_event_box h3 {
    color: #373B49;
    font-size: 25px;
    margin-bottom: 0;
}

.fva_event_box .fva-post-footer {
    text-align: center;
}

.fva_event_box .fva-post-footer button.fva-see-more {
    border: 0;
    background: #5BB264;
    height: 50px;
    width: 115px;
    border-radius: 19px;
    color: #fff;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s all;
}

.fva_event_box .fva-post-footer button.fva-see-more:hover {
    background: #5FBDE2;
}

.fva_event_box .fva-post span {
    color: #707070;
}

.fva_event_box .fva-post p {
    color: #373B49;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.15px;
    line-height: 22px;
}





.fva-logo-section {
    padding: 70px 0;
    padding-top: 40px;
}

.fva-logo-section h4 {
    color: #373B49;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 30px;
}

/* The positional tile colours that used to sit here (six rules per slide, keyed
   on :nth-child) have been removed. Tile colour now comes from the item's
   category, written as an inline style by index.asp, so these only ever fought
   with it - they were seven classes deep and repainted the calendar card until
   an !important was added to hold them off. Removing them removes the need for
   that !important, and stops the row count being a styling decision. */
/* homepage css end here */

/* Organisation support css start */
.fva-os-hero img {
    width: 100%;
    height: 377px;
    object-fit: cover;
}

.Organisation-support {
    padding: 50px 0 60px 0;
    position: relative;
}

.Organisation-support .container,
.support-content .container {
    max-width: 958px;
}

.Organisation-support:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 475px;
    background: #5BB264;
    z-index: -1;
}

/* Inline SVG icons (see funIcon in header.asp). Sized in em so they follow the text
   they sit beside, and nudged down to sit on the baseline the way a glyph would. */
.icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex: none;
}

/* Skip link. Off-screen until focused, then visible at the top left. Not
   display:none - that would remove it from the tab order entirely, which is the
   one thing it must not do. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: #162E59;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    border-bottom-right-radius: 6px;
}

.skip-link:focus {
    left: 0;
}

/* The skip target itself must never show a focus ring - it is an empty div that
   only exists to receive focus. */
#maincontent:focus {
    outline: none;
}

/* Search results */
.search-results ul {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.search-results li {
    padding: 16px 0;
    border-bottom: 1px solid #EEF1F5;
}

.search-results li a {
    font-size: 20px;
    font-weight: 600;
}

.search-results li p {
    margin: 6px 0 0;
    color: #4A5468;
}

/* Content blocks that render a list from a table - forums today, documents, news and
   events later. Deliberately plain: the list is content, not a feature panel. */
.block-list {
    margin-top: 8px;
}

.block-list-item {
    padding: 18px 0;
    border-bottom: 1px solid #EEF1F5;
}

.block-list-item:first-child {
    border-top: 1px solid #EEF1F5;
}

.block-list-item h3 {
    font-size: 22px;
    line-height: 28px;
    margin: 0 0 6px;
}

.block-list-item p {
    margin: 0;
}

/* "In this section" - the list of child pages rendered from tblCmsNav on any page
   that has published children. Deliberately quiet: it is a signpost, not the content. */
.child-pages {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #DDE3EA;
}

.child-pages h2 {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    margin-bottom: 12px;
    color: #373B49;
}

.child-pages ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 4px 24px;
}

.child-pages li a {
    display: block;
    padding: 7px 0;
    font-size: 17px;
    text-decoration: none;
    border-bottom: 1px solid #EEF1F5;
}

.child-pages li a:hover,
.child-pages li a:focus-visible {
    text-decoration: underline;
}

/* Images inside page content must not exceed their column. Applies to CMS content
   (staff paste in images at whatever size) and to ported pages whose images were
   sized for a full-width layout and now sit in a narrower column. */
.support-content img {
    max-width: 100%;
    height: auto;
}

/* The page title is an h1 for semantics and SEO, but a content page should not
   wear the 60px hero size that h1 carries elsewhere - match the old h2. */
.Organisation-support h1 {
    font-size: 40px;
    font-weight: 600;
    line-height: 55px;
    letter-spacing: -1px;
}

.Organisation-support p {
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    color: #373B49;
}

.support-content {
    color: #373B49;
    padding: 60px 0 50px 0;
}

.support-content h5 {
    font-size: 20px;
    line-height: 32px;
    font-weight: 400;
    padding-bottom: 20px;
}

.support-content ul li {
    padding-bottom: 15px;
    font-size: 15px;
    letter-spacing: -0.15px;
}

.support-content p {
    letter-spacing: -0.15px;
    margin: 0;
}
.fva-os .support-content ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #5BB264;
    font-size: 1.2em;
    line-height: 1;
}
.fva-os .support-content ul li {
   position: relative;
   padding-left: 18px;
}
.fva-os .support-content ul {
    margin-top: 20px;
}

.fva-os .fva-services {
    padding: 10px 0 60px 0;
}

.fva-os .fva-events-outer {
    background: #fff;
    padding-top: 10px;
    margin-top: 0;
    padding-bottom: 90px;
}

.fva-os .fva-newsletter {
    background: #DD5465;
    box-shadow: 0px 30px 60px #B9B5B5;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 100%;
    max-width: 936px;
}

.fva-os .fva-services .container {
    max-width: 1260px;
}

.fva-logo-section .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* case study page css end here */
.off-canvas-content {
    display: none;
}

.off-canvas-content p {
    font: normal normal normal 10px/15px Poppins;
    letter-spacing: 0px;
    color: #162E59;
}

.fva-os .fva-services .services-grid ul li:last-child {
    background: #5FBDE2;
}
.fva-os .fva-services .services-grid ul li:last-child:hover {
    background: #5FBDE2BF;
}

/* .left-team img { width: 100% } stood here until 22 Oct 2026: it stretched every
   image in the content column to the column's width - a 40px icon to 600px, and
   once the column widened to 820px a pasted 600px picture by a third, gone soft.
   Removed rather than overridden, because ANY stylesheet width (even auto) beats
   an img's own width attribute: with nothing set here an image takes its width
   attribute, else its natural size, and only shrinks to fit (.support-content img
   max-width: 100%, above). The scoped fixes further down that undid the stretch
   for particular pages are now simply redundant. */


/* Articles-events-form-css-end */

/* Responsive-media-device */
@media (max-width: 1440px) {
    .fva-hero .fva_banner_slider .slide-content h2 {
        font-size: 60px;
        line-height: 70px;
    }

    .fva-hero .fva_banner_slider .slide-content h2 span {
        font-size: 60px;
    }

    .fva-hero .fva_banner_slider .slide-content {
        width: 44%;
    }
}

@media (max-width: 1024px) {

    .top-header .container {
        max-width: 90%;
    }

    .top-right .form-control {
        width: 82%;
        margin-left: auto;
    }

    .fva-hero .fva_banner_slider {
        height: 68vh;
    }

    .fva-hero .fva_banner_slider .slide-content {
        top: 15%;
        left: 36%;
        width: 54%;
    }

    .fva-cta p {
        max-width: 90%;
    }

    .fva-cta {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .fva-services {
        padding: 50px 0;
    }

    .fva-services .services-grid ul {
        gap: 15px;
    }

    .fva-services .services-grid ul li {
        padding: 15px 10px;
    }

    .fva-newsletter {
        width: calc(100% - 20px);
        padding: 40px 40px;
    }

    .fva-newsletter h2 {
        max-width: 80%;
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .fva-events-row .swiper-pagination {
        text-align: center;
    }

    .fva-events-outer {
        padding-bottom: 50px;
    }

    .fva-services .container {
        max-width: 90%;
    }

    .container {
        max-width: 90%;
    }

    footer.fva-footer .fva-info span {
        width: 55%;
    }

    .Organisation-support .container,
    .support-content .container {
        max-width: 90%;
    }

    .fva-os .fva-services .container {
        max-width: 90%;
    }
    
}

@media (max-width: 1023px) {
    

    .fva-hero .fva_banner_slider .slide-content h2,
    .fva-hero .fva_banner_slider .slide-content h2 span {
        font-size: 50px;
        line-height: 60px;
    }

    .fva-hero .fva_banner_slider .slide-content {
        top: 15%;
        left: 35%;
        width: 45%;
    }

    .fva-services .services-grid ul li h5 {
        font-size: 24px;
        line-height: 25px;
    }

    /* ------------------ */
    .fva-events-outer .swiper-pagination-bullet {
        width: 14px !important;
        height: 14px !important;
        background: transparent;
        transform: unset;
        border: 1px solid #fff !important;
        opacity: 1;
    }

    .fva-events-outer .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #fff;
        width: 14px !important;
        height: 14px !important;
    }

    .fva-events-outer .swiper-pagination.swiper-pagination-bullets {
        bottom: 0;
    }

    .fva_event_slider {
        padding-bottom: 40px;
    }

}

@media (max-width: 992px) {
    .top-tablet {
        display: block;
    }

    .top-bar .col-md-5 {
        display: none;
    }

    .top-header .navbar-expand-lg .navbar-toggler {
        display: none;
    }

    .top-header ul.navbar-nav {
        flex-direction: row;
    }

    .top-header .collapse:not(.show) {
        display: block;
    }

    .top-header .col-md-7 {
        width: 100%;
        justify-content: flex-start;
    }

    .top-bar .col-md-12 {
        justify-content: space-between;
    }

    .top-bar {
        padding: 30px 0px 10px 0px;
    }

    .fva-hero .fva_banner_slider .slide-content {
        top: 10%;
        left: 40%;
        width: 60%;
    }

    .fva-newsletter form .form-group input {
        width: 70%;
    }

    .fva-events-outer {
        padding-bottom: 60px;
    }

    .fva-footer .col-md-4 {
        width: 40%;
    }

    .fva-footer .col-md-5 {
        width: 60%;
    }

    footer.fva-footer ul li {
        width: 50%;
    }

    footer.fva-footer .footer-copyright p br {
        display: none;
    }

    .fva-os .fva-events-outer {
        padding-bottom: 45px;
    }

    .Organisation-support:after {
        height: 515px;
    }

}

@media (max-width: 991px) {
    .fva-cta p br {
        display: none;
    }
}

@media (max-width: 768px) {
    .fva-hero .fva_banner_slider {
        height: 42vh;
    }
    
}

@media (max-width: 767px) {
    

    .top-header .navbar-expand-lg .navbar-toggler {
        display: block;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .top-header ul.navbar-nav {
        flex-direction: column;
    }

    .top-header .collapse:not(.show) {
        display: none;
    }

    .top-header .second-menu {
        display: block;
    }

    .mbl-logo {
        display: block;
    }

    .top-bar {
        display: none;
    }

    .fva-hero .fva_banner_slider .slide-content h2,
    .fva-hero .fva_banner_slider .slide-content h2 span {
        font-size: 35px;
        line-height: 40px;
    }

    .top-header nav.navbar {
        background: #fff;
        padding: 20px 0;
        border-bottom: 4px solid #A1BA54;
    }

    .mbl-logo img {
        width: 245px;
    }

    .fva-services .services-grid ul li img {
        width: 45px;
        height: 45px;
        object-fit: contain;
    }

    .fva-services .services-grid ul li {
        padding: 10px;
    }

    .fva-services .services-grid ul {
        gap: 10px;
    }

    .fva-hero .fva_banner_slider .slide-content {
        top: 10%;
        transform: translate(-50%);
        left: 50%;
        width: 70%;
    }

    .fva-hero .fva_banner_slider {
        height: 400px;
    }

    .fva-hero .fva_banner_slider .slide-content a {
        margin-top: 20px;
        width: 130px;
        height: 46px;
    }

    .fva_banner_slider .swiper-pagination {
        bottom: 30px;
    }

    .fva-cta h1 {
        color: #fff;
        font-size: 30px;
        line-height: 35px;
        max-width: 300px;
        margin: auto;
        margin-bottom: 20px;
    }

    .fva-cta p {
        color: #fff;
        font-size: 15px;
        width: 100%;
        margin: auto;
        line-height: 22px;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .fva-cta {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .fva-services .services-grid ul li h5 {
        font-size: 14px;
        line-height: 18px;
        margin-top: 10px;
    }

    .fva-services {
        padding: 40px 0;
    }

    .fva-events-outer .fva-newsletter h2 {
        font-size: 22px;
        line-height: 28px;
        max-width: 100%;
    }

    .fva-events-outer .fva-newsletter {
        padding: 30px 20px 40px 20px;
        width: 85%;
        margin-top: -140px;
    }

    .container {
        padding: 0 30px;
    }

    

    .fva-logo-section h4 {
        margin-bottom: 20px;
    }

    .fva-events-row {
        margin-top: 60px;
    }

    .fva-events-outer {
        padding-top: 50px;
        padding-bottom: 70px;
        margin-top: 100px;
    }

    footer.fva-footer {
        padding-top: 50px;
        padding-bottom: 30px;
    }

    footer.fva-footer h3 {
        font-size: 30px;
        line-height: 32px;
    }

    footer.fva-footer h3 p {
        font-size: 20px;
        line-height: 24px;
        margin-top: 10px;
    }

    footer.fva-footer .fva-info p,
    footer.fva-footer .fva-info p a {
        font-size: 18px;
        line-height: 28px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    footer.fva-footer .fva-info span {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
    }

    footer.fva-footer .fva-info a {
        font-size: 13px;
    }

    footer.fva-footer ul li a {
        font-size: 13px;
        line-height: 18px;
    }

    footer.fva-footer ul li {
        margin-bottom: 0px;
    }

    footer.fva-footer h4 {
        margin-bottom: 10px;
        margin-top: 15px;
    }

    footer.fva-footer .footer-copyright p {
        font-size: 10px;
        font-weight: 400;
        line-height: 15px;
    }

    body.active .top-header nav.navbar {
        background: #5FBDE233;
        height: 100vh;
        align-items: flex-start;
        position: relative;
    }

    /* The second shade of blue used to be a pseudo-element fixed at 60% of the menu's
       height, hand-tuned to land on the boundary between the two lists. Nothing tied it
       to the content, so adding the search box moved the boundary and left the colour
       band behind. The shading now belongs to the list it colours - see
       .navbar-collapse .navbar-nav below - so it cannot drift out of alignment again,
       whatever is added to the menu. */

    body.active .top-header .navbar-nav .nav-link {
    color: #162E59;
    font-size: 20px;
    font-weight: 600;
}

    /* column, not column-reverse: source order is display order. See the note in
       header.asp - the reversal meant the markup read one way and the phone showed
       another, and it stacked from the bottom up, so extra content pushed the topmost
       item over the logo. */
    /* NB this selector appears TWICE in this stylesheet - again below, around line
       3148. Same specificity, so the later one wins and this copy is effectively dead.
       Kept in step so that whichever a future reader edits, the result is the same. */
    body.active .top-header .navbar-collapse {
    max-height: calc(100vh - 75px);
}

    /* Each block carries its own background, sized by its own content. */
    /* The audience sections - the primary menu, on the stronger blue. */
    /* The site-wide shortcuts sit on the menu's own lighter blue. */
    .top-header ul.navbar-nav li {
        margin: 0;
    }

    /* The standalone .mbl-search magnifier that used to sit beside the hamburger has
       been removed from header.asp, along with the rules that sized and hid it. The
       search box is part of the menu now - see .mbl-search-form below. */

    .mbl-search-form .form-control {
        border: 1px solid #162E59;
        /* Was transparent. That was survivable when the box sat over the menu's flat
           blue; now it is lower down the panel and the page image showed through it. */
        background: #fff;
        font-size: 15px;
        line-height: 30px;
        border-radius: 10px;
        width: 100%;
        padding: 6px 60px 6px 15px;
        box-shadow: none;
        outline: none;
    }

    /* The 30px top margin, plus the list's own 12px bottom padding, left a 42px gap
       between "Contact us" and the search box. `margin: auto` was also pointless here -
       the form is a full-width flex item, so the auto side margins had nothing to
       centre and the auto bottom margin only absorbed slack. */
    body.active .top-header form.mbl-search-form {
        margin: 8px 0 0 0;
        width: 100%;
    }

    /* position:relative so the submit button anchors to the FORM. It was absolute with
       `right: 24px` and no positioned ancestor nearer than nav.navbar, so it was being
       placed against the whole viewport width - which only happened to land inside the
       box, and is exactly the sort of thing that drifts on a device with different
       metrics. */
    .mbl-search-form {
        position: relative;
    }

    .mbl-search-form button.btn {
        background: #162E59;
        border-radius: 10px;
        color: #fff;
        font-size: 20px;
        box-shadow: none;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .mbl-search-form .form-control::placeholder {
        color: #707070;
    }

    /* The search box is now simply PART OF THE MOBILE MENU rather than something a
       separate icon reveals. It lives inside .navbar-collapse, which is hidden until
       the menu opens, so showing it here means it appears with the menu - one tap,
       always visible, nothing to discover.

       The old arrangement had a standalone magnifier beside the hamburger that toggled
       this form. It could not work: the form is inside the collapsed menu, so tapping
       the magnifier before opening the menu set display on an element whose ancestor
       was still display:none - nothing happened. */
    /* NB the selector must be form.mbl-search-form, not .mbl-search-form. The global
       rule near the top of this file is sets display none on form.mbl-search-form -
       specificity (0,1,1) - so a bare class selector here loses to it regardless of
       coming later, and the search box would never appear. */
    /* Spacing is set by the body.active rule above - deliberately NOT here. Having a
       margin-top in both places meant editing one and seeing nothing change. */
    form.mbl-search-form {
        display: flex;
        width: 100%;
    }

    .fva-newsletter h2 {
        font-size: 22px;
        line-height: normal;
        max-width: 100%;
    }

    .fva-newsletter form .form-group input {
        width: 80%;
    }

    .fva-newsletter form .form-group button.fva-submit {
        width: 50px;
        font-size: 0;
        position: relative;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
    }

    .fva-newsletter form .form-group button.fva-submit span {
        font-size: 0;
        font-weight: 500;
    }
    .fva-newsletter form .form-group button.fva-submit::before {
        content: "";
        position: absolute;
        background: url(../images/chevron-right.png);
        width: 35px;
        height: 35px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        filter: brightness(0) invert(1);
        background-size: contain;
        background-repeat: no-repeat;
    }

    

    

    .fva-hero .fva_banner_slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 13px !important;
        height: 13px !important;
    }

    .fva-hero .fva_banner_slider .swiper-pagination-bullet {
        width: 13px !important;
        height: 13px !important;
    }

    .fva-footer .col-md-4 {
        width: 100%;
    }

    .fva-footer .col-md-5 {
        width: 100%;
    }

    .fva-logo-section {
        padding: 50px 0;
        padding-top: 50px;
    }

    body.active .top-header .off-canvas-content {
    position: absolute;
    top: auto;
    left: 25px;
    width: 78%;
    bottom: 0;
}

    /* SECOND COPY of this rule inside the SAME max-width:767px block - the selector
       appears twice, around 320 lines apart. Same specificity, so the later one wins
       and the earlier is dead weight. Both are corrected so they agree; if you change
       one, change the other, or you will edit the dead copy and see nothing happen.

       What was here: a colour band fixed at 54% of the menu height, plus
       column-reverse, a 79vh height and space-around. The percentage band could not
       follow the content, and space-around inside a fixed height spread the items
       until the topmost one sat over the logo. */
    body.active .top-header .navbar-collapse {
        flex-direction: column;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        padding-top: 20px;
        max-width: 100%;
        /* The menu scrolls if it outgrows the screen, so nothing is ever clipped or
           overlapped however many links are added. Only the logo row is reserved -
           the registered-charity text is hidden while the menu is open (see below),
           because ten links plus a search box plus 91px of legal text simply do not
           fit an 812px phone, and the search box was losing. */
        max-height: calc(100vh - 75px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* line-height only. The padding that used to be here did not apply, for reasons
       nobody could establish - the line-height in this same rule does. Padding is now
       set on the base rule at the top of this file instead, giving 6 + 33 + 6 = 45px
       per item: enough to lift the search box clear of the Cookie Script badge that
       floats over the bottom of the screen, and still a comfortable tap target. */
    body.active .top-header .navbar-nav .nav-link {
        line-height: 33px;
    }

    /* Hidden ONLY while the mobile menu is open. The same text appears in the footer of
       every page, so nothing is lost - it was competing with the menu for space it did
       not have, and clipping the search box. */
    body.active .top-header .off-canvas-content {
        display: none;
    }

    body.active .top-header .navbar-collapse .navbar-nav {
        width: 100%;
        max-width: 100%;
        padding: 12px 16px;
        margin: 0;
    }

    /* NB a setting padding 6px 0 on body.active .top-header .navbar-nav .nav-link rule was
       tried here to tighten the items. It matched, its media query matched, it was more
       specific than the 10px rule at the top of this file and came later - and it still
       did not take effect, even when an identical rule was injected last at runtime.
       Unexplained, so it was removed rather than left as dead CSS. Items stay at 52px
       (10px padding + 32px line-height), which is a fine tap target anyway. */

    body.active .top-header .navbar-collapse .navbar-nav:not(.second-menu) {
        background: #c6e8f3;
        border-radius: 10px;
    }

    body.active .top-header .navbar-collapse .second-menu {
        background: transparent;
    }

    h2 {
        font-size: 30px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: -0.75px;
    }

    /* The page title is an h1 and needs the same step down that h2 gets here -
       without it a title stays at desktop size on a phone and pushes the page
       sideways. */
    .Organisation-support h1 {
        font-size: 30px;
        line-height: 40px;
        letter-spacing: -0.75px;
    }

    .Organisation-support p {
        font-size: 18px;
        font-weight: 400;
        line-height: 30px;
    }

    .support-content h5 {
        font-size: 18px;
        line-height: 30px;
        font-weight: 400;
        color: #373B49;
    }

    .support-content {
        color: #373B49;
        padding: 30px 0 30px 0;
    }

    .fva-os .fva-events-outer .fva-newsletter {
        margin-top: 0;
        background: #EA819D;
        box-shadow: none;
    }

    .fva-os .fva-services {
        padding: 10px 0 30px 0;
        display: none;
    }

    .fva-os .fva-logo-section {
        padding: 10px 0 50px 0;
    }

    .fva-os .fva-services.d-none {
        display: block !important;
    }

    .fva-os .fva-events-outer {
        padding-bottom: 35px;
    }

    .Organisation-support:after {
        height: 1050px;
    }
}

@media (max-width: 600px) {
    .Organisation-support:after {
        height: 1000px;
    }

    .fva-os .fva-os-hero img {
        height: 282px;
    }
}

@media (max-width: 480px) {
    .fva-hero .fva_banner_slider .slide-content {
        transform: translate(-30%);
        left: 30%;
        width: 70%;
    }

    .fva-services .services-grid ul li {
        padding: 10px 5px;
    }

    .fva-events-outer .fva-newsletter {
        padding: 30px 16px 40px 16px;
        width: 100%;
    }

    .top-header .container {
        max-width: 100%;
    }

    .fva-services .container {
        max-width: 100%;
    }

    .fva-services .services-grid ul li h5 {
        font-size: 13px;
        line-height: 16px;
        margin-top: 10px;
    }

    .container {
    padding: 0 24px;
}

    .fva-events-outer .fva-newsletter h2 {
        font-size: 21px;
    }

    .fva_event_box {
        padding: 22px 16px;
        text-align: left;
    }

    .container {
        max-width: 100%;
    }

    .fva-logo-section .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .fva-footer .col-md-5 {
        width: 75%;
    }

    .mbl-logo img {
        width: 230px;
    }

    .menubar-icon .bar1,
    .menubar-icon .bar2,
    .menubar-icon .bar3 {
        width: 24px;
        height: 3px;
        margin: 4px 0;
        transition: 0.4s;
        background: #373B49;
    }

    .change .bar1 {
        transform: translate(0, 6px) rotate(-45deg);
    }

    .change .bar3 {
        transform: translate(0, -8px) rotate(45deg);
    }

    .Organisation-support .container,
    .support-content .container {
        max-width: 100%;
    }

    .Organisation-support {
        padding: 50px 0 30px 0;
        position: relative;
    }

    .fva-os .fva-services .container {
        max-width: 100%;
    }
    


}

/* ============================================================================
   TAP TARGETS - WCAG 2.2 "Target Size (Minimum)" (2.5.8, AA): 24x24 CSS pixels.

   THIS BLOCK IS LAST IN THE FILE ON PURPOSE. Several selectors in this
   stylesheet are declared two or three times (.fva-info a at 309 and 2790,
   .footer-copyright p at 359 and 2808, the hero bullets at 473 and 3152), and
   more than one editing session has been lost to changing a copy that a later
   copy overrides. Anything that has to win goes here, at the end, where nothing
   can be after it. Do not move these rules up into the file.

   Media queries do NOT add specificity, so a rule here beats the same selector
   inside an earlier @media even at a narrow width.

   DELIBERATELY NOT ENLARGED: the "Legal, privacy and cookie information" link,
   because it sits inside a sentence in the copyright paragraph, and 2.5.8
   explicitly excepts targets in a block of text - forcing it to 24px would
   break the paragraph's line spacing to satisfy a rule that does not apply.
   Also untouched: the Cookie Script banner's own controls, which are its
   markup, not ours.
   ============================================================================ */

/* Footer navigation - lists of links, not prose, so the exception does not apply */
footer.fva-footer .footer-links ul li a,
footer.fva-footer .fva-info a {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}

/* The one linked logo (OSCR) needs the anchor to BE the box, not sit inside it.
   An inline-block anchor is auto-height, so the image''s max-height: 100% had
   nothing to resolve against and was ignored - the logo rendered 104x108 and
   overflowed a 68px box. Making the anchor a full-size flex container gives the
   percentage something to measure, and removes the text line box that was
   putting this one logo 4px out of line with the other nine. */
.fva-logo-section .logos-inner .col a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Carousel dots. The visible dot stays 13px - it is a design element and the
   sizes are !important in two places - while an invisible pseudo-element gives
   it a 25px hit area. Enlarging the dot itself would mean fighting both. */
.swiper-pagination-bullet {
    position: relative;
}

.swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
}
/* Breadcrumb trail - a row of navigation links, measured at 23px tall on a
   content page. One pixel short is still short.

   min-WIDTH matters here too, and only for the first item: "Home" is a 16px
   house icon with visually-hidden text, so it was 16px wide however tall it got.
   A text link is never that narrow, which is why height alone looked sufficient
   until the first crumb was measured on its own. */
.breadcrumb .breadcrumb-item a {
    display: inline-block;
    min-height: 24px;
    min-width: 24px;
    line-height: 24px;
    text-align: center;
}
/* ----------------------------------------------------------------------------
   Homepage news/events/vacancies boxes, now generated from tblNewsEvents.

   "See more" became an <a> because it navigates - see index.asp. The existing
   rule is element-qualified (button.fva-see-more), so it no longer matches;
   this restates it for the link and adds what a link needs and a button did
   not. Kept here at the end of the file with the other rules that must win.  */
.fva_event_box .fva-post-footer a.fva-see-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #5BB264;
    height: 50px;
    width: 115px;
    border-radius: 19px;
    color: #fff;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s all;
}

.fva_event_box .fva-post-footer a.fva-see-more:hover {
    background: #5FBDE2;
    color: #fff;
}

/* Item titles are links now. They keep the box's typography rather than
   turning blue - the whole row reads as one item, and the underline on hover
   is what marks it as clickable. */
.fva_event_box .fva-post p a {
    color: inherit;
    text-decoration: none;
}

.fva_event_box .fva-post p a:hover,
.fva_event_box .fva-post p a:focus {
    text-decoration: underline;
}
/* ----------------------------------------------------------------------------
   Homepage boxes: category colour, calendar tiles, separators.

   Tile colour now comes from the database as an inline style, so the positional
   .swiper-slide:nth-child() colours at lines 794-860 no longer decide anything.
   They are left in place as the fallback for a tile with no category.          */

/* The icon is drawn as SVG, so it must not inherit the filter that was there to
   turn a dark PNG white - it is already white. */
/* SEPARATORS between items, not around them: the adjacent-sibling selector means
   the first row has no rule above it and the last none below, so the list is
   divided without being boxed in. */
.fva_event_box .fva-post + .fva-post {
    border-top: 1px solid #EEF1F5;
}

/* The calendar tile. Same footprint as the icon tile so the two boxes line up,
   with the three lines optically balanced rather than evenly spaced - the day
   number carries the weight and the other two are labels for it. */
.fva_event_box .fva-post .post-avtar.post-calendar {
    display: flex;
    line-height: 1;
    color: #fff;
}

.fva_event_box .post-calendar .cal-dow {
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.85;
}

/* The small grey line above each title. <time> is inline by default and inherits
   the span's colour; it is marked up as time so the exact date is machine-
   readable even when the visible text says "3 days ago". */
.fva_event_box .fva-post span time {
    color: inherit;
}
/* Both tile kinds share a footprint. Without this the icon tile would be sized
   by its 34px SVG (54px square) while the calendar tile is 65px wide, so the
   three boxes would not line up with each other as you swipe between them.
   The original 45px sizing came from the placeholder PNG, which no longer
   exists in these boxes. */
.fva_event_box .fva-post .post-avtar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}
/* The tile must NOT stretch to the height of its row. .fva-post is a Bootstrap
   .d-flex, whose default align-items is stretch, so a two-line title made a
   131px tall tile and a short one 65px - measured live, 65 to 131 within a
   single box. min-height and height:auto do not prevent this; only opting out
   of the stretch does. */
.fva_event_box .fva-post .post-avtar {
    align-self: flex-start;
}
/* The three calendar lines were each taking a 24px line box from a global rule -
   line-height:1 on the tile does not reach them, because a more specific
   selector elsewhere sets it on the span itself. Measured: 3 x 24px + margins +
   padding = 91px, against 62px for an icon tile. Set it where it will win.    */
.fva_event_box .post-calendar .cal-dow,
.fva_event_box .post-calendar .cal-day,
.fva_event_box .post-calendar .cal-mon {
    line-height: 1;
}

/* Now that the calendar tile is ~70px, both kinds agree on a footprint. */
/* ============================================================================
   TILES, VERSION 2 - the category colour as an ACCENT rather than a fill.

   The fill version put white on whatever categoryColour happened to be, and
   those values were picked to print category names on white: black for Job
   Vacancies, pale blue for Health and Social Care (white on it measured 2.3:1).
   Now the tile carries a 10% wash of the colour and the icon carries a darkened
   version of it, both computed in index.asp from the same database value.

   Last in the file, as with everything here that has to win.
   ============================================================================ */

/* Icon tile: light wash, coloured icon, hairline edge. Background, border-color
   and color all arrive as inline styles. */
.fva_event_box .fva-post .post-avtar {
    border: 1px solid transparent;
}

.fva_event_box .fva-post .post-avtar svg {
    display: block;
    color: inherit;
    /* the darkened category colour, set inline */;
}

/* ---- the calendar page --------------------------------------------------- */
.fva_event_box .fva-post .post-avtar.post-calendar {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /* room for the binder rings to sit above */
    padding: 0;
    overflow: visible;
    background: #fff;
    border: 1px solid #E3E7EC;
    border-radius: 10px;
    text-align: center;
}

/* The two binder rings. Pseudo-elements rather than markup - they are drawing,
   not content, and a screen reader has no use for them. */
.fva_event_box .post-calendar::before,
.fva_event_box .post-calendar::after {
    content: "";
    position: absolute;
    border-radius: 3px;
    background: #9AA3AE;
}

/* The month band. Its background is the darkened category colour, set inline,
   so white sits on it legibly whatever the category is. */
.fva_event_box .post-calendar .cal-mon {
    display: block;
    border-radius: 9px 9px 0 0;
    color: #fff;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.3px;
}

.fva_event_box .post-calendar .cal-day {
    display: block;
    color: #23272F;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fva_event_box .post-calendar .cal-dow {
    display: block;
    color: #707880;
    font-weight: 600;
    line-height: 1.2;
}
/* The !important that used to be here is gone with the positional colours it was
   holding off - see the note where they used to live. The card is white because
   the rule above says so, and nothing now argues. */

/* ============================================================================
   HOMEPAGE BOXES, TIGHTENED - more items in less height.

   FVA publishes a lot, and the point of these boxes is to show that. The old
   proportions came from a mockup carrying six lines of lorem ipsum, so they
   were sized for placeholder text rather than for a real feed. Everything here
   is a trim rather than a redesign: smaller tiles, tighter gaps, less padding
   around the box - which buys 8 items per box in roughly the height 6 used to
   take.

   The row count is a free choice now that colour comes from the data. It is set
   by TOP 8 in the three queries in index.asp; change it there, not here.
   ============================================================================ */

.fva_event_box {
    padding: 22px 18px;
}

.fva_event_box > p {
    margin-bottom: 12px;
}

.fva_event_box .fva-post {
    gap: 10px;
}

/* Was 14px padding + 14px margin. The hairline still separates the rows; it
   just no longer needs a corridor around it. */
.fva_event_box .fva-post + .fva-post {
    padding-top: 9px;
}

.fva_event_box .fva-post-footer {
    padding-top: 18px;
    padding-bottom: 4px;
}

/* Tiles: both kinds down to 56 wide, and both now carry the calendar card's
   shadow so the three boxes are consistent. The shadow is lighter than the
   card's - a flat tile sitting on the page rather than a piece of paper. */
.fva_event_box .fva-post .post-avtar {
    width: 56px;
    min-width: 56px;
    min-height: 56px;
    padding: 6px;
    border-radius: 10px;
}

.fva_event_box .fva-post .post-avtar svg {
    width: 28px;
    height: 28px;
}

/* ---- the calendar page, same trim ---------------------------------------- */
.fva_event_box .fva-post .post-avtar.post-calendar {
    width: 56px;
    min-width: 56px;
    min-height: 60px;
    margin-top: 6px;
    padding: 0;
    box-shadow: 0 2px 5px rgba(23, 30, 43, 0.13);
}

.fva_event_box .post-calendar::before,
.fva_event_box .post-calendar::after {
    top: -6px;
    width: 4px;
    height: 11px;
}

.fva_event_box .post-calendar::before { left: 13px; }
.fva_event_box .post-calendar::after  { right: 13px; }

.fva_event_box .post-calendar .cal-mon {
    padding: 3px 2px 2px;
    font-size: 11px;
}

.fva_event_box .post-calendar .cal-day {
    margin: 2px 0 0;
    font-size: 23px;
}

.fva_event_box .post-calendar .cal-dow {
    padding-bottom: 4px;
    font-size: 10px;
}

/* Item titles: capped at two lines.

   This is what actually compresses these boxes. Measured on the live page, the
   paddings above were worth about 11% while titles were running to three and
   four lines in a 302px column - one measured 96px on its own. Capping at two
   makes every row roughly the same height, which is what lets more items fit
   without the box sprawling. Only 6 of 24 current titles are long enough to be
   clipped at all.

   The full title stays in the DOM, so a screen reader still reads all of it and
   the clipping is purely visual.

   line-height 24px also fixes the tap target: an item title is a link in a LIST,
   not one inside a sentence, so the 24px minimum applies and it was 21px. */
.fva_event_box .fva-post p a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 24px;
}
/* --- four small adjustments ------------------------------------------------ */

/* 1. Less air above the separator. margin-top is the gap ABOVE the rule,
      padding-top the gap below it; only the first was too generous. */
.fva_event_box .fva-post + .fva-post {
    margin-top: 5px;
}

/* 2. The icon tiles were carrying a lighter shadow than the calendar card, so
      the card read as lifted and they read as flat. Same weight now. */
.fva_event_box .fva-post .post-avtar {
    box-shadow: 0 2px 5px rgba(23, 30, 43, 0.22);
}

/* 3. "See more" when there is no more - see index.asp for why it is a span and
      not a disabled link. Muted and inert, keeping the button's footprint so
      the three boxes stay the same height as you swipe between them. */
.fva_event_box .fva-post-footer span.fva-see-more-off {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 115px;
    border-radius: 19px;
    background: #EDEFF2;
    color: #9AA3AE;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
}

/* 4. The meta line is supporting information, so it now sits a step below the
      title rather than matching it. */
.fva_event_box .fva-post span {
    font-size: 13px;
}
/* ============================================================================
   CMS PAGE PROSE

   Scoped to .page-content, the wrapper header.asp puts around the block output.
   Bare tag selectors would have been simpler and wrong: application pages like
   award-nominations.asp share the same .col-md-12 and their form paragraphs are
   not body text.

   What was actually wrong, measured on payroll-obligations:
     p           margin-bottom 0     - every paragraph ran into the next
     ul          padding-left 0      - bullets unindented against the margin
     li          line-height 22.5px  - against 24px for paragraphs
     p / ul / li 15px / 16px / 15px  - three sizes for one block of text
     h2          40px / 55px         - identical to the h1 above it
   ============================================================================ */

.page-content {
    /* Measured at 76 characters a line, which is the top of the comfortable
       range. The sidebar for these pages does not render yet, so prose was
       running the full 958px - about 130 characters, nearly double. */
    max-width: 46rem;
}

/* ul li / ol li, not a bare li: the existing .support-content ul li sets 15px and
   is one element more specific than .page-content li, so a plainer selector lost
   and list items stayed a size smaller than the paragraphs around them. */
.page-content p,
.page-content ul li,
.page-content ol li {
    font-size: 16px;
    line-height: 26px;
}

.page-content p {
    margin: 0 0 16px;
}

/* The green ::before bullet sits at the li's left edge and the li already carries
   18px of padding for it, so an unordered list needs NO extra indent - that is
   the design, and adding 22px just pushed every list away from the prose it
   belongs to. Ordered lists do need room for their numbers. */
.page-content ul {
    padding-left: 0;
    margin: 0 0 16px;
}

.page-content ol {
    padding-left: 22px;
    margin: 0 0 16px;
}

/* SPACING BETWEEN ITEMS, not line spacing within them.

   The text was always on the same 26px line-height as the paragraphs around it.
   What read as double spacing was .support-content ul li setting
   padding-bottom: 15px, which stacked on top of the 6px margin here - 21px
   between one item and the next, against 16px between whole paragraphs.

   Zeroing that padding and setting the gap in one place brings it to 10px,
   about half, and leaves the lines inside a wrapped item reading exactly like
   body text. The selector names ul/ol to match the specificity of
   .support-content ul li, which a bare .page-content li loses to. */
.page-content ul li,
.page-content ol li {
    padding-bottom: 0;
    margin-bottom: 10px;
}

.page-content ul li:last-child,
.page-content ol li:last-child {
    margin-bottom: 0;
}

/* Sub-headings are subordinate to the page title, so they are visibly smaller
   than the h1's 40px rather than matching it. Space above, so a heading belongs
   to the section it opens instead of floating between two. */
.page-content h2 {
    font-size: 26px;
    line-height: 34px;
    font-weight: 600;
    margin: 34px 0 10px;
}

.page-content h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    margin: 26px 0 8px;
}

/* The first block often opens with a heading; it should not be pushed down. */
.page-content > h2:first-child,
.page-content > h3:first-child {
    margin-top: 0;
}

/* No trailing gap before whatever follows the prose. */
.page-content > *:last-child {
    margin-bottom: 0;
}
/* Two more that only showed up on the list-heavy service page.

   BULLETS. A global list-style none on ul sits in the template's reset - fine
   for the nav menus it was written for, and wrong for prose, where a bulleted
   list was rendering as indented text with nothing marking the items. Prose gets
   its bullets back; the reset stays untouched for everything else.

   TOP MARGIN. `.fva-os .support-content ul` sets margin: 20px, which is two
   classes deep and beat the 16px set here - so lists sat 20px below the text
   above and 16px above the text below. Small, but it is exactly the uneven
   rhythm that made the page feel unsettled. */
/* NO list-style on ul. The template already draws its own bullet - a green
   round dot from .fva-os .support-content ul li::before, positioned absolutely
   against the li's 18px padding - which is why the global reset turns the
   native marker off. Adding `list-style: disc` back gave every item BOTH: a
   black native marker and the green one beside it, a few pixels apart.
   The reset was right; what was missing was only the indent, below.

   Ordered lists keep their numbers, since there is no ::before doing that job. */
.page-content ol {
    list-style: decimal outside;
}

/* The ancestor is named to MATCH the specificity of .fva-os .support-content ul
   (two classes, one element) rather than beat it with !important; equal weight
   plus later position wins cleanly. .page-content only ever appears inside
   .support-content, so this is describing the real structure, not padding the
   selector to win an argument. */
.support-content .page-content ul,
.support-content .page-content ol {
    margin-top: 0;
    margin-bottom: 16px;
}
/* ----------------------------------------------------------------------------
   LINKS IN PROSE

   They were rendering as plain black body text - the same colour and weight as
   everything around them, with no underline. Nothing marked them as links at
   all except the cursor, which is no use to anyone scanning the page.

   Underlined AND coloured, deliberately: colour alone fails for anyone who does
   not distinguish it, and WCAG 1.4.1 is explicit that colour must not be the
   only means of conveying information.

   The colour is a darkened version of the brand green. The brand value itself,
   #5BB264, measures 2.6:1 on white - fine on a button where it is the
   background, well short of the 4.5:1 body text needs. #1F6B3B measures 6.5:1
   and still reads as the same green.
   ---------------------------------------------------------------------------- */
/* .page-aside too: the sidebar sits OUTSIDE .page-content, so contact links in it
   were falling back to the template's plain black anchor style - the same "links
   look like text" problem, in the one place that is almost entirely links. */
.page-content a,
.page-aside a {
    color: #1F6B3B;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.page-content a:hover,
.page-aside a:hover {
    color: #14512C;
    text-decoration-thickness: 2px;
}

/* ----------------------------------------------------------------------------
   INTRO -> CONTENT

   The page title and summary sit in section.Organisation-support; the blocks sit
   in section.support-content below it. Measured on payroll-obligations, the gap
   between them was 76px - the summary's own 16px margin plus 60px of padding at
   the foot of the section above. That padding is right when a section ends a
   page and far too much when the next thing is a continuation of the same
   thought.

   The rule is drawn as a pseudo-element rather than an <hr>: it is decoration,
   and an <hr> would announce a thematic break to a screen reader between an
   introduction and the body it introduces - which is not a break at all. It
   also means no markup change, so it applies to every CMS page at once.
   ---------------------------------------------------------------------------- */
.Organisation-support {
    padding-bottom: 26px;
}

/* A short bar on its own, NOT a coloured segment running into a hairline.
   The first attempt was green for the first 64px and pale grey for the rest of
   the measure, which is precisely the shape of a progress bar sitting at about
   6% - the eye reads "partly filled" before it reads "divider". Removing the
   grey removes the comparison: a 64px mark with nothing to be a fraction of. */
.page-content::before {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-bottom: 26px;
    border-radius: 2px;
    background: #5BB264;
}
/* ============================================================================
   READING PROGRESS + BACK TO TOP

   These were one control, built with animation-timeline: scroll(), @property and
   oklch(). Where all three are supported it was neat; where any is missing, the
   @supports fallback left a flat pale-blue square with no progress at all - the
   feature vanished rather than degrading, and nothing on screen said so. Since
   consistent rendering matters more here than doing it without JavaScript, both
   are now driven by custom.js, which behaves the same in every browser.

   Split apart, too. They answer different questions - "how much is left?" and
   "take me back" - and combining them made the progress a subtle fill on a small
   button, which is hard to read at 46px.
   ============================================================================ */

.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1080;
    pointer-events: none;   /* never intercepts a click meant for the page */
}

.read-progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    background: #5BB264;
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1080;
    /* 46px square - comfortably past the 24px minimum, and a size a thumb can
       hit without aiming. */
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #1F6B3B;
    color: #fff;
    box-shadow: 0 2px 8px rgba(23, 30, 43, 0.28);
    cursor: pointer;
    /* display:none until custom.js says otherwise, so it is out of the tab order
       while it is off screen - a hidden-but-focusable button is a trap. */
    display: none;
    align-items: center;
    justify-content: center;
}

.back-to-top.is-visible {
    display: flex;
}

.back-to-top:hover {
    background: #14512C;
}

.back-to-top:focus-visible {
    outline: 2px solid #1F6B3B;
    outline-offset: 3px;
}

/* The button sits where a cookie banner or chat widget often does, so it steps
   in a little on small screens rather than fighting for the same corner. */
@media (max-width: 575px) {
    .back-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 42px;
        height: 42px;
    }
}

/* Focusing <main> to move a keyboard user back to the top should not draw a ring
   around the whole page - the scroll is the feedback. */
#content:focus {
    outline: none;
}

/* Kept from the control this replaces: in-page anchor jumps glide rather than
   teleport, unless the reader has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
/* ----------------------------------------------------------------------------
   CONTACT BLOCK

   One contact row from tblCmsContacts, rendered wherever a page references it.
   Styled as a quiet card rather than more prose: it is a set of details to come
   back to, not something you read through, so it should be findable when you
   scan the page rather than blending into the paragraph above.
   ---------------------------------------------------------------------------- */
.page-content .contact-card,
.page-aside .contact-card {
    margin: 0 0 16px;
    padding: 18px 20px;
    border: 1px solid #DDE7DE;
    border-left: 4px solid #5BB264;
    border-radius: 10px;
    background: #F6FAF6;
}

.page-content .contact-card .contact-intro,
.page-aside .contact-card .contact-intro {
    margin: 0 0 10px;
    color: #4A5560;
}

.page-content .contact-card .contact-row,
.page-aside .contact-card .contact-row {
    margin: 0 0 6px;
    /* label and value on one line at any width, wrapping as a unit */
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
}

.page-content .contact-card .contact-row:last-child,
.page-aside .contact-card .contact-row:last-child {
    margin-bottom: 0;
}

/* A fixed column so E-mail / Telephone / Address line up under each other. */
.page-content .contact-card .contact-label,
.page-aside .contact-card .contact-label {
    flex: 0 0 auto;
    min-width: 104px;
    color: #4A5560;
    font-weight: 600;
}
/* ----------------------------------------------------------------------------
   PAGE SIDEBAR

   Appears only when the page has something to put in it - at present, a contact.
   The five "Related Content" cards that used to live here were mockup behind
   flags nothing ever set, so this column had never rendered on any page.

   ON A PHONE the column stacks below the content, so the contact moves from
   beside the text to the end of the page. That is inherent to a two-column grid
   and is why the prose says "please get in touch" rather than pointing at
   details "below" or "to the right".
   ---------------------------------------------------------------------------- */
.page-aside {
    /* Follows the reader down a long page rather than scrolling away at the top.
       top clears nothing fixed - the header is not sticky - so 24px is just
       breathing room. */
    position: sticky;
    top: 24px;
}

.page-aside-title {
    /* The space belongs ABOVE a heading, where it separates one section from the
       last; below it the text should follow at once (Kenny, 27 Sep 2026: it had
       been 10px below and nothing above, so every heading sat on the previous
       paragraph and floated off its own). Paragraphs get a small gap of their
       own; it collapses into the heading margin, so a section never ends with
       both. */
    margin: 1.5rem 0 .3rem;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #373B49;
}

.page-aside-title:first-child {
    margin-top: 0;
}

.page-aside p {
    margin: 0 0 .6rem;
}

/* In a 300px column the label column would eat the value, so labels stack. */
@media (max-width: 1199px) {
    .page-aside .contact-card .contact-row {
        display: block;
    }
    .page-aside .contact-card .contact-label {
        display: block;
        min-width: 0;
    }
}

/* Stacked under the content on a phone, it is a card at the end of the page and
   wants a little air above it. */
@media (max-width: 767px) {
    .page-aside {
        position: static;
        margin-top: 28px;
    }
}
/* ============================================================================
   FOCUS VISIBILITY  (stage 4)

   The reset near the top of this file says:

       a  ->  text-decoration: none; color: #373B49; outline: none; transition: 0.3s

   That "outline: none" removes the focus ring from EVERY link on the site - the
   main menu, the audience bar, breadcrumbs, footer columns, "See more", the
   homepage news items. A keyboard user had no way to tell where they were on any
   page, which fails WCAG 2.4.7 Focus Visible. Two form controls suppressed it
   too. It was almost certainly written to stop the ring appearing on mouse
   clicks, which was a real annoyance before :focus-visible existed.

   :focus-visible is the modern answer: the browser shows the ring for keyboard
   users and withholds it from mouse users, so nothing needs to be suppressed.
   These rules are ADDITIVE - the reset is left alone, because a:focus-visible
   outranks a and every one of these outranks the rule it has to beat.

   Kept deliberately: #content and #maincontent, which are focused by script for
   the skip link and the back-to-top button. A ring around the whole page there
   would be noise, and the scroll is the feedback.
   ============================================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #1F6B3B;
    outline-offset: 2px;
    border-radius: 2px;
}

/* On a dark ground the green ring disappears; these use white instead.

   Declares the whole outline, not just outline-color, because Bootstrap ships
   .nav-link:focus-visible with outline: 0 and its own blue glow. That is two
   classes - more specific than the bare a:focus-visible above - so on the header
   menu it won, and setting only a colour on a zero-width outline does nothing.
   .top-header a:focus-visible is two classes and an element, so it takes it back.
   The blue glow is switched off so the indicator is the same everywhere.

   The skip link is here for the same reason: its own background is #162E59, and
   when focused it sits at the top left over the dark bar, so a green ring on it
   would be the one indicator on the site you could not see. */
.top-header a:focus-visible,
.fva-footer a:focus-visible,
.skip-link:focus-visible,
.back-to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: none;
}

/* Selectors long enough to beat the base rules that set outline: none on these
   two fields - .fva-newsletter form .form-group input is three classes deep. */
.fva-newsletter form .form-group input:focus-visible,
.mbl-search-form .form-control:focus-visible {
    outline: 2px solid #1F6B3B;
    outline-offset: 2px;
}
/* ============================================================================
   FOOTER LOGO STRIPS - funders, then accreditations

   WHAT WAS WRONG. `.logos-inner .col img` set width: 100%, and .col is
   Bootstrap's equal-width flex child, so every logo was drawn at exactly the
   same WIDTH and its height fell out of its aspect ratio. Measured at 1280px,
   the accreditation row ran 118, 48, 52, 112, 114, 111, 108, 114, 126, 114 -
   a wide badge rendered less than half the height of a tall one beside it.
   That is the ragged look; it was not a spacing problem.

   Logo strips normalise on HEIGHT and let width vary, which is what makes a row
   of unrelated marks look level. Every logo now shares an optical height and
   sizes itself horizontally, so the aspect ratios take care of themselves.

   Replaces seven rules, including three per-breakpoint patches and a
   `width: 20% !important` that forced five-per-row on phones regardless of how
   wide the logos actually were. One rule now covers every width, with a single
   size step down for small screens.

   Inline max-width attributes were removed from footer.asp at the same time -
   four logos said 100px and one said 180px, which is where the funders row got
   its odd sizing.
   ============================================================================ */

.fva-logo-section .logos-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* row gap then column gap - the row gap is what stops the strips colliding
       once they wrap on a narrow screen */
    gap: 20px 24px;
}

.fva-logo-section .logos-inner .col {
    /* EQUAL BOXES, not equal heights. Normalising on height gives a wide mark far
       more presence than a square one - Shared Care Scotland is 3.87:1, so at a
       shared 72px height it took 279px of width while a square badge took 72px.
       For a charity crediting funders and accreditations that reads as a ranking.

       Every logo now gets the same box and sits inside it, so a wide mark fills
       the width, a square one fills the height, and each occupies the same
       footprint. */
    flex: 0 0 auto;
    width: 100px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

/* The "Our funders:" label is a .col too, but it is text, not a mark. */
.fva-logo-section .logos-inner .col.logos-label {
    width: auto;
    height: auto;
    font-size: 15px;
    font-weight: 600;
    color: #373B49;
}

/* The mark fits its box rather than being forced to a fixed height. Combined
   with the boxes above this is what gives every funder and accreditation the
   same visual weight.

   The images were also cropped to their content at this point: internal padding
   ran from 0% on Shared Care and Disability Confident to 34% on Investing in
   Volunteers, so identical box sizes were still producing very different mark
   sizes. Trimmed, the file bounds now ARE the mark. */
.fva-logo-section .logos-inner .col img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

@media (max-width: 767px) {
    .fva-logo-section .logos-inner {
        gap: 18px 22px;
    }
    /* A smaller box on a phone; the mark still fits inside it rather than being
       forced to a height and overflowing the width. */
    .fva-logo-section .logos-inner .col {
        width: 88px;
        height: 56px;
    }
}

/* ----------------------------------------------------------------------------
   LOGO BOX SHAPE, PER STRIP

   One box shape cannot serve both rows, because the two rows hold different
   kinds of mark. The funders are wordmarks - Shared Care Scotland is 3.87:1 and
   HSCP 2.38:1 - so in a squarish box they fill the width and leave most of the
   height unused: Shared Care was rendering 100x26. The accreditations are the
   opposite, seven of ten being square badges carrying several lines of small
   text, which need height above all else.

   So the funders get a wide box and the accreditations a taller, larger one.

   The accreditation row now wraps to two lines at 1280 (10 boxes at 124px plus
   9 gaps is 1,456px against a container of about 1,256). That is deliberate:
   fitting all ten on one line capped the badges at 66px, and a badge nobody can
   read is not worth the row it saves.
   ---------------------------------------------------------------------------- */

.fva-logo-section .logos-inner.logos-funders .col {
    width: 150px;
    height: 72px;
}

.fva-logo-section .logos-inner.logos-accreditations .col {
    width: 124px;
    height: 84px;
}

@media (max-width: 767px) {
    .fva-logo-section .logos-inner.logos-funders .col {
        width: 116px;
        height: 56px;
    }
    .fva-logo-section .logos-inner.logos-accreditations .col {
        width: 92px;
        height: 64px;
    }
}
/* Align an icon tile with the first line of text beside it.

   The calendar tile has a 6px top margin so its binder rings have somewhere to
   sit, and that happens to bring it level with the meta line. An icon tile has
   no such margin, so the tile sat 6px above the text - measured, consistently,
   on both the news and vacancies boxes.

   Pulling the text column up rather than pushing the tile down is what was
   wanted: it closes the gap AND takes 6px off every row, about 48px from the
   news box. Applied to the whole column so the 22px between the meta line and
   the title is preserved - tightening the meta line-height instead would have
   closed that to 13px and left these two boxes reading differently from events.

   Keyed on .post-icon from index.asp rather than :has(), so it does not depend
   on selector support for something this load-bearing. */
.fva_event_box .fva-post.post-icon .col-md-8 {
    margin-top: -6px;
}
/* ---- content images (image blocks) -----------------------------------------
   A picture placed in the page body via the CMS. Responsive by default, and the
   width/height on the tag keep it from jumping as it loads. Centred with a
   caption under it, sized to sit comfortably within the reading measure rather
   than spanning the full column. */
.page-figure { margin: 1.6rem 0; text-align: center; }
.page-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.page-figure figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  color: #5a6472;
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   CASE STUDIES

   A case study is written and approved in the portal and appears here either as
   a block on an ordinary page (at one of four sizes) or in full on the shared
   case studies page. The four sizes share this base and differ by how much they
   render, not by wholly separate styling - so a study looks like the same thing
   wherever it is met.

   The quotation treatment is why staff are asked NOT to type quotation marks of
   their own: the marks are supplied by the graphic below, and a typed pair on
   top of it reads as a quote inside a quote.
   --------------------------------------------------------------------------- */
/* --cs is the category colour, set on the element by subWriteCaseStudy in
   header.asp. The neutral values come FIRST so a browser without color-mix -
   and a case study whose category has no usable colour - still gets a sensible
   panel rather than nothing. */
/* A RAISED CARD WITH A COLOURED SPINE. It sits on an ordinary content page
   among ordinary paragraphs, so the job is to read as a distinct OBJECT rather
   than as more of the page. A tinted panel alone did not do that - it was just
   as readable as a pull-quote or an aside - which is why the card is white
   against the page, lifted slightly, and labelled in words.

   --cs is the category colour, set on the element by subWriteCaseStudy in
   header.asp. The spine carries the theme; the label carries the meaning. */
.fva-casestudy {
  --cs: #5BB264;
  position: relative;
  overflow: hidden;
  margin: 2rem 0;
  padding: 1.5rem 1.7rem;
  background: #ffffff;
  border: 1px solid #e2e6ec;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(22, 46, 89, .07);
}
.fva-casestudy:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--cs);
}

/* The theme, said in words as well as in colour. Colour alone is not a label:
   it means nothing to a first-time reader and nothing at all to somebody who
   cannot distinguish these hues. */
.fva-casestudy-flag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .5rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--cs);
}
.fva-casestudy-flag svg { width: 15px; height: 15px; flex: none; }
.fva-casestudy h2,
.fva-casestudy h3 { margin-top: 0; }
.fva-casestudy h3 a { color: #162E59; text-decoration: none; }
.fva-casestudy h3 a:hover,
.fva-casestudy h3 a:focus { text-decoration: underline; }

/* The strapline is the study's own subtitle, not a heading - kept quieter than
   the title so the two do not compete. */
.fva-casestudy-strap {
  font-size: 1.05rem;
  color: #373B49;
  font-style: italic;
  margin-bottom: 1rem;
}

.fva-casestudy-more { margin: 1rem 0 0; font-weight: 600; }
.fva-casestudy-more a { color: #1F6B3B; }

/* When the work concluded. Last, and quiet - it is provenance, not content. */
.fva-casestudy-when {
  margin: 1.2rem 0 0;
  font-size: .9rem;
  color: #5a6472;
}

.case-study-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0 0 1.2rem;
}

/* The pull-out quotation. The graphic carries the opening mark, so the text
   itself must not - see funStripWrappingQuotes in header.asp, which removes one
   wrapping pair from the 34 quotations written before that was asked for. */
.fva-post-quote {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 1.6rem 0;
  padding: 1.2rem 1.4rem;
  background: #F4F6F9;
  background: color-mix(in srgb, var(--cs) 8%, #F7F9FB);
  border-radius: 6px;
}
.fva-post-quote img { width: 34px; height: auto; flex: none; margin-top: .2rem; }
.fva-post-quote h4 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.5;
  font-weight: 500;
  color: #162E59;
  font-style: italic;
}

/* The list on the case studies page: the same minimal blocks, tightened up so a
   run of them reads as a list rather than as a series of separate panels. */
.fva-casestudy-list .fva-casestudy { margin: 1rem 0; padding: 1.1rem 1.3rem; }
.fva-casestudy-list .fva-casestudy h3 { font-size: 1.2rem; }

@media (max-width: 575px) {
  .fva-casestudy { padding: 1.1rem 1.2rem; }
  .fva-post-quote { flex-direction: column; gap: .5rem; padding: 1rem 1.1rem; }
  .fva-post-quote h4 { font-size: 1.05rem; }
}

/* ---- News and events (news-and-events.asp) ------------------------------------
   The listing, topic, search and item views. The design's news classes were
   mockup-only and went in the July clean-up, so these are theirs rebuilt on the
   page's own prefix. The topic colour arrives inline per item as the custom
   property --topic, from the topic's colour in the database. Greens are the
   site's own: 1f6b3b and 5bb264, as the header and tiles use them.

   SPECIFICITY. Everything here is written under .support-content, the section
   header.asp opens for an application page, because the template's rules for
   that section outrank a lone class: .fva-os .support-content ul li puts a
   green bullet and 18px of padding on every list item in it, h2 carries the
   hero's 55px leading and -1px tracking, and p, span pins 15px/24px on any
   span. Measured on the first version of this block, written as single classes:
   bullets down the events list, 55px leading on a 23px heading, 15px badges on
   a 14px meta line. The list rules go one step further, under
   .fva-os .support-content, so they beat the bullet rule on specificity rather
   than on order.

   PROSE. The CMS intro and the item text are wrapped in .page-content by the
   page file, so they take the CMS prose rules above - measure, 16px on 26px,
   paragraph spacing, green links - rather than a second copy of them here. Only
   the green opening bar is dropped: it marks the top of a CMS page's prose, and
   here the column opens with the search bar, the item text with its date box. */

/* Links in the news column read as links, as CMS prose does (.page-content a).
   The template's bare a is the body colour with no underline. */
.support-content .fva-news a { color: #1f6b3b; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.support-content .fva-news a:hover, .support-content .fva-news a:focus-visible { color: #14512c; text-decoration-thickness: 2px; }

/* Section headings inside the column, not the hero's h2. */
.support-content .fva-news-h { font-size: 1.45rem; line-height: 1.3; letter-spacing: 0; margin: 1.6rem 0 .8rem; }
.support-content .fva-news-h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: 0; margin: 1.4rem 0 .6rem; }
.support-content .fva-news-attachments h2, .support-content .fva-news-costs h2, .support-content .fva-news-organiser h2,
.support-content .fva-news-workshops h2, .support-content .fva-news-whatnow h2 { font-size: 1.1rem; line-height: 1.3; letter-spacing: 0; margin: 0 0 .4rem; }

/* Filter bar */
.support-content .fva-news-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1.4rem; }
.support-content .fva-news-filters input[type="search"] { flex: 1 1 220px; min-width: 0; padding: .55rem .8rem; border: 1px solid #cfd6d2; border-radius: 6px; font: inherit; }
.support-content .fva-news-filters select { flex: 0 1 260px; padding: .55rem .8rem; border: 1px solid #cfd6d2; border-radius: 6px; font: inherit; background: #fff; }
.support-content .fva-news-filters button { padding: .6rem 1.1rem; border: 0; border-radius: 6px; background: #1f6b3b; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.support-content .fva-news-filters button:hover, .support-content .fva-news-filters button:focus-visible { background: #17532e; }

/* Meta line, badges and topic chips. Each sets its own size and leading because
   of p, span. The chip rule is written on a.fva-news-topic so it outranks the
   column link rule above wherever a chip appears, sidebar included. */
.support-content .fva-news-muted { color: #6a746f; font-size: .92em; }
.support-content .fva-news-meta { font-size: .9rem; color: #5c665f; display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; margin: 0 0 .35rem; }
.support-content .fva-news-meta span { font-size: inherit; line-height: 1.6; }
.support-content .fva-news-sectionnav { font-size: .9rem; color: #6a746f; }
.support-content .fva-news-sectionnav a { margin-right: .9rem; }
.support-content a.fva-news-topic { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; line-height: 1.5; font-weight: 600; text-decoration: none; color: #373b49; background: color-mix(in srgb, var(--topic, #1f6b3b) 18%, #fff); border-left: 4px solid var(--topic, #1f6b3b); }
.support-content a.fva-news-topic:hover, .support-content a.fva-news-topic:focus-visible { background: color-mix(in srgb, var(--topic, #1f6b3b) 32%, #fff); color: #373b49; text-decoration: none; }
.support-content .fva-news-cancelled { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: #9b3a2e; color: #fff; font-size: .78rem; line-height: 1.5; font-weight: 600; }
.support-content .fva-news-pin { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: #f7ecd4; color: #7a5510; font-size: .78rem; line-height: 1.5; font-weight: 600; }

/* Post list: front page, topic and search. A featured post is a card, and stays
   one when it is first in the list. */
.support-content .fva-news-posts { display: flex; flex-direction: column; }
.support-content .fva-news-post { padding: .9rem 0; border-top: 1px solid #e2e7e4; }
.support-content .fva-news-post:first-child { border-top: 0; }
.support-content .fva-news-post h3 { font-size: 1.12rem; line-height: 1.3; letter-spacing: 0; margin: 0 0 .3rem; }
.support-content .fva-news-post h3 a { color: #373b49; text-decoration: none; }
.support-content .fva-news-post h3 a:hover, .support-content .fva-news-post h3 a:focus-visible { color: #1f6b3b; text-decoration: underline; }
.support-content .fva-news-post p { margin: 0; color: #3f4a44; }
.support-content .fva-news-post.fva-news-pinned, .support-content .fva-news-post.fva-news-pinned:first-child { background: #fbf7ee; padding: .9rem 1rem; border: 1px solid #efe2c4; border-radius: 8px; margin: .4rem 0; }

/* Coming up: date, title and topic on one grid row, no bullet. */
.fva-os .support-content .fva-news-upcoming { list-style: none; margin: 0 0 1rem; padding: 0; }
.fva-os .support-content .fva-news-upcoming li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .2rem .8rem; align-items: baseline; padding: .25rem 0; }
.fva-os .support-content .fva-news-upcoming li::before { content: none; }
.fva-os .support-content .fva-news-upcoming li.dayfirst { border-top: 1px solid #e2e7e4; padding-top: .6rem; margin-top: .3rem; }
.fva-os .support-content .fva-news-upcoming li:first-child { border-top: 0; margin-top: 0; }
.support-content .fva-news-upcoming time { font-weight: 600; color: #3f4a44; white-space: nowrap; }
.support-content .fva-news-more, .support-content .fva-news-archive { margin: .4rem 0 1rem; }
.support-content .fva-news-more > summary, .support-content .fva-news-archive > summary { cursor: pointer; color: #1f6b3b; font-weight: 600; }
.fva-os .support-content .fva-news-archive ul { margin: .6rem 0 0; }

/* Single item: the date box, notices, booking */
.support-content .fva-news-when { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 1rem 0; padding: .9rem 1.1rem; background: #f3f6f4; border-radius: 8px; }
.support-content .fva-news-when dt { font-weight: 700; }
.support-content .fva-news-when dd { margin: 0; }
.support-content .fva-news-notice { margin: 1rem 0; padding: .8rem 1rem; border-left: 4px solid #b7791f; background: #fbf3e2; border-radius: 0 6px 6px 0; }
.support-content .fva-news-notice-warn { border-color: #9b3a2e; background: #f8e6e2; }
.support-content .fva-news-notice p { margin: 0; }
.support-content .fva-news-book { margin: 1rem 0; }
.support-content .fva-news a.fva-news-bookbtn { display: inline-block; padding: .7rem 1.4rem; border-radius: 6px; background: #1f6b3b; color: #fff; font-weight: 700; text-decoration: none; }
.support-content .fva-news a.fva-news-bookbtn:hover, .support-content .fva-news a.fva-news-bookbtn:focus-visible { background: #17532e; color: #fff; }

/* Pictures: .left-team img forces width 100% on every image in the column,
   which would blow a 200px logo up to the measure. Natural size, capped. */
.support-content .fva-news-picture { display: block; width: auto; max-width: min(100%, 480px); height: auto; margin: 0 0 1rem; border-radius: 6px; }
.support-content .fva-news-pictures img { width: auto; max-width: min(100%, 320px); height: auto; margin: 0 .6rem .6rem 0; border-radius: 6px; }
.support-content .fva-news-body { margin: 1rem 0; }
.support-content .fva-news-body img { width: auto; max-width: 100%; height: auto; }
.support-content .fva-news .page-content { margin-bottom: 1rem; }
.support-content .fva-news .page-content::before { content: none; }

/* The sections under the text */
.support-content .fva-news-attachments, .support-content .fva-news-costs, .support-content .fva-news-organiser,
.support-content .fva-news-workshops, .support-content .fva-news-whatnow { margin: 1.4rem 0; }
.support-content .fva-news-workshops dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; }
.support-content .fva-news-workshops dt { font-weight: 700; white-space: nowrap; }
.support-content .fva-news-workshops dd { margin: 0; }
.support-content .fva-news-workshops dd p { margin: .2rem 0 0; color: #3f4a44; font-size: .95em; }

/* Sidebar: topic list with the topic's colour as a rail, no bullet */
.support-content .fva-news-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fva-os .support-content .fva-news-topics { list-style: none; margin: 0 0 1rem; padding: 0; }
.fva-os .support-content .fva-news-topics li { display: flex; justify-content: space-between; gap: .6rem; padding: .28rem 0; border-top: 1px solid #e9edeb; }
.fva-os .support-content .fva-news-topics li::before { content: none; }
.fva-os .support-content .fva-news-topics li:first-child { border-top: 0; }
.support-content .fva-news-topics a { border-left: 4px solid var(--topic, #1f6b3b); padding-left: .5rem; text-decoration: none; }

@media (max-width: 575px) {
  .fva-os .support-content .fva-news-upcoming li { grid-template-columns: 4.6rem 1fr; }
  .fva-os .support-content .fva-news-upcoming li .fva-news-topic { grid-column: 2; }
  .support-content .fva-news-when, .support-content .fva-news-workshops dl { grid-template-columns: 1fr; }
}

/* ---- Public forms (register-an-event.asp, post-a-staff-vacancy.asp) -----------
   The two forms share forms.inc and this block. Written under .support-content
   for the same reason as the news block above it: the template's rules for
   that section outrank a lone class. Controls are the site's own inputs, not
   Bootstrap's .form-control, which the header's search box has restyled. The
   file list and the terms list are lists, so their rules sit under
   .fva-os .support-content to beat the bullet rule. */
.support-content .fva-form fieldset { border: 0; padding: 0; margin: 0 0 1.8rem; min-width: 0; }
.support-content .fva-form legend { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; margin: 0 0 .8rem; padding: 0; float: none; width: auto; color: #162e59; }
.support-content .fva-form .sf-field { margin: 0 0 1rem; }
.support-content .fva-form .sf-label { display: block; font-weight: 600; margin: 0 0 .3rem; }
.support-content .fva-form .sf-req { color: #9b3a2e; margin-left: .2rem; }
.support-content .fva-form .sf-help { display: block; font-size: .9rem; line-height: 1.5; color: #5c665f; margin: .3rem 0 0; }
.support-content .fva-form .sf-input { display: block; width: 100%; padding: .55rem .8rem; border: 1px solid #cfd6d2; border-radius: 6px; font: inherit; line-height: 1.5; color: #373b49; background: #fff; }
.support-content .fva-form .sf-input:focus { outline: 2px solid #5fbde2; outline-offset: 1px; border-color: #5fbde2; }
.support-content .fva-form textarea.sf-input { min-height: 9rem; resize: vertical; }
.support-content .fva-form input[type="date"].sf-input { max-width: 16rem; }
.support-content .fva-form .sf-invalid { border-color: #9b3a2e; background: #fff8f7; }
.support-content .fva-form .sf-error { color: #9b3a2e; font-size: .9rem; margin: .3rem 0 0; }
.support-content .fva-form .sf-summary { margin: 0 0 1.4rem; padding: .9rem 1.1rem; border-left: 4px solid #9b3a2e; background: #f8e6e2; border-radius: 0 6px 6px 0; }
.support-content .fva-form .sf-summary p { margin: 0; }
.fva-os .support-content .fva-form .sf-summary ul { margin: .5rem 0 0; }
.fva-os .support-content .fva-form .sf-summary ul li { padding-bottom: .2rem; font-size: inherit; }
.support-content .fva-form .sf-summary a { color: #7a2a20; }
.support-content .fva-form .sf-check { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 .5rem; font-weight: 400; cursor: pointer; }
.support-content .fva-form .sf-check input { margin: .3rem 0 0; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.support-content .fva-form .sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.support-content .fva-form input[type="file"] { display: block; font: inherit; margin: .2rem 0 0; max-width: 100%; }
.fva-os .support-content .fva-form .sf-files { list-style: none; margin: .6rem 0 0; padding: 0; }
.fva-os .support-content .fva-form .sf-files li { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; padding: .45rem 0; border-top: 1px solid #e2e7e4; font-size: inherit; }
.fva-os .support-content .fva-form .sf-files li::before { content: none; }
.support-content .fva-form .sf-files .sf-name { font-weight: 600; word-break: break-all; }
.support-content .fva-form .sf-files .sf-size { color: #5c665f; font-size: .9rem; }
.support-content .fva-form .sf-files .sf-state { color: #1f6b3b; font-size: .9rem; }
.support-content .fva-form .sf-files .sf-failed .sf-state { color: #9b3a2e; }
.support-content .fva-form .sf-files .sf-lead { display: inline-flex; gap: .3rem; align-items: center; font-size: .9rem; margin: 0; }
.support-content .fva-form .sf-remove { border: 0; background: none; color: #1f6b3b; text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; padding: 0; }
.support-content .fva-form .sf-submit { display: inline-block; padding: .8rem 1.6rem; border: 0; border-radius: 6px; background: #1f6b3b; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.support-content .fva-form .sf-submit:hover, .support-content .fva-form .sf-submit:focus-visible { background: #17532e; }
.support-content .fva-form .sf-submit:disabled { opacity: .55; cursor: wait; }
.support-content .fva-form .sf-done { padding: 1rem 1.2rem; border-left: 4px solid #1f6b3b; background: #eaf5ee; border-radius: 0 6px 6px 0; margin: 0 0 1.4rem; }
.support-content .fva-form .sf-done .fva-news-h { margin-top: 0; }
.support-content .fva-form .sf-terms { margin: 0 0 1rem; font-size: .92rem; }
.support-content .fva-form .sf-terms > summary { cursor: pointer; color: #1f6b3b; font-weight: 600; }
.fva-os .support-content .fva-form .sf-terms ul { margin: .6rem 0 0; }
.fva-os .support-content .fva-form .sf-terms ul li { padding-bottom: .4rem; font-size: inherit; }
.support-content .fva-form [hidden] { display: none !important; }
.support-content .fva-form .cf-turnstile { margin: .4rem 0 1rem; }

/* ---- Booking a place (bookaplace.asp, workshops.asp) --------------------------
   The root booking page carried its layout in an inline stylesheet written
   against the old template's tables. The 2026 version uses the public forms'
   controls (.fva-form above) and adds only what a booking needs: the seam
   between reading about the event and booking, the attendee grid, the "already
   booked" question, the sessions prompt and the session list. Same scoping
   rules as the two blocks above. */
.support-content .fva-form .sf-row { display: flex; gap: .7rem; }
.support-content .fva-form .sf-row > .sf-field { flex: 1 1 0; min-width: 0; }
.support-content .fva-form .sf-panel { border: 1px solid #d7e2ea; background: #f7fafc; border-radius: 6px; padding: 1rem 1.1rem .4rem; margin: 1.2rem 0 1.6rem; }
.support-content .fva-form .sf-panel h3 { margin-top: 0; }
.support-content .fva-form .sf-btn-secondary { display: inline-block; padding: .6rem 1.1rem; border: 1px solid #1f6b3b; border-radius: 6px; background: #fff; color: #1f6b3b; font: inherit; font-weight: 600; cursor: pointer; }
.support-content .fva-form .sf-btn-secondary:hover, .support-content .fva-form .sf-btn-secondary:focus-visible { background: #eaf5ee; }
.support-content .fva-form .sf-submit.sf-warn { background: #b7791f; }
.support-content .fva-form .sf-submit.sf-warn:hover, .support-content .fva-form .sf-submit.sf-warn:focus-visible { background: #96620f; }
.support-content .fva-form .sf-submit.sf-danger { background: #9b3a2e; }
.support-content .fva-form .sf-submit.sf-danger:hover, .support-content .fva-form .sf-submit.sf-danger:focus-visible { background: #7a2a20; }
.support-content .fva-form .sf-check input.bigtick { width: 1.3rem; height: 1.3rem; }
.support-content .fva-form .sf-check .sf-help { margin-top: .2rem; }
.support-content .fva-book .bk-split { border: 0; border-top: 2px solid #e0e8ed; margin: 1.6rem 0 1.4rem; }
.support-content .fva-book .eventbody { margin: 0 0 1rem; }
.support-content .fva-book .eventbody img { width: auto; max-width: 100%; height: auto; }
.support-content .fva-book .bk-sessions { margin: 1.1rem 0; padding: 1rem 1.1rem; border: 2px solid #1f6fb2; border-radius: 6px; background: #eef5fb; }
.support-content .fva-book .bk-sessions p { margin: 0; font-size: 1.15rem; line-height: 1.45; }
.support-content .fva-book .bk-already { margin: 0 0 1.2rem; padding: .9rem 1.1rem; border: 2px solid #d9822b; border-radius: 6px; background: #fff8ef; }
.support-content .fva-book .bk-already p { margin: 0 0 .6rem; }
.fva-os .support-content .fva-book .bk-already ul { margin: 0 0 .8rem; }
.support-content .fva-book .bk-already form { display: inline; margin-left: .5rem; }
.support-content .fva-book .bk-already .sf-help { margin-top: .8rem; }
.support-content .fva-book .bk-full { color: #9b3a2e; }
.support-content .fva-book .bk-mine { color: #1f6b3b; }
.support-content .fva-book .bk-terms { margin: 1.4rem 0 .6rem; }
/* the attendee grid: can never outgrow the column it sits in */
.support-content .fva-book .bk-people { width: 100%; table-layout: fixed; border-collapse: collapse; margin: .4rem 0 .6rem; }
.support-content .fva-book .bk-people col.c-name { width: 19%; }
.support-content .fva-book .bk-people col.c-mail { width: 26%; }
.support-content .fva-book .bk-people col.c-req { width: 36%; }
.support-content .fva-book .bk-people th { text-align: left; font-size: .85rem; font-weight: 600; color: #5c665f; padding: 0 .4rem .3rem 0; vertical-align: bottom; }
.support-content .fva-book .bk-people td { padding: 0 .4rem .4rem 0; vertical-align: top; }
.support-content .fva-book .bk-people th:last-child, .support-content .fva-book .bk-people td:last-child { padding-right: 0; }
.support-content .fva-book .bk-people .sf-input { padding: .45rem .6rem; }
/* the session chooser: a timetable, no bullets */
.fva-os .support-content .fva-book .bk-sessionlist { list-style: none; margin: .4rem 0 1rem; padding: 0; }
.fva-os .support-content .fva-book .bk-sessionlist li { padding: .45rem 0; border-top: 1px solid #e2e7e4; font-size: inherit; }
.fva-os .support-content .fva-book .bk-sessionlist li::before { content: none; }
.fva-os .support-content .fva-book .bk-sessionlist li.bk-time { font-weight: 700; padding: 1rem 0 .3rem; border-top: 0; }
.support-content .fva-book .bk-sessionlist .sf-check { margin: 0; }
.support-content .fva-book .bk-sessionlist .bk-summary { display: block; color: #444; font-size: .95em; margin: .2rem 0 0; }
@media (max-width: 700px) {
  /* ON A PHONE THE ATTENDEE GRID BECOMES A LIST: each person is a stacked
     block, the header row goes, and the placeholders name the boxes */
  .support-content .fva-book .bk-people, .support-content .fva-book .bk-people tbody,
  .support-content .fva-book .bk-people tr, .support-content .fva-book .bk-people td { display: block; width: auto; }
  .support-content .fva-book .bk-people { table-layout: auto; }
  .support-content .fva-book .bk-people .peoplehead { display: none; }
  .support-content .fva-book .bk-people tr.person { border: 1px solid #e0e8ed; border-radius: 6px; padding: .5rem; margin-bottom: .6rem; background: #fff; }
  .support-content .fva-book .bk-people td { padding: 0 0 .4rem; }
  .support-content .fva-book .bk-people tr.person td:last-child { padding-bottom: 0; }
  .support-content .fva-form .sf-row { flex-direction: column; gap: 0; }
  .support-content .fva-book .bk-already form { display: block; margin: .6rem 0 0; }
}

/* ---- Volunteering opportunities (volunteering-opportunities.asp) --------------
   The list is the news page's post list in another coat; the opportunity page
   reuses the date box (.fva-news-when) for its key facts and the forms'
   controls for the enquiry. Two things of its own: the when-it-takes-place grid
   and the board-role badge in the volunteering topic's own colour (e91546).
   Same scoping as the blocks above. */
.support-content .fva-opp .opp-list { display: flex; flex-direction: column; }
.support-content .fva-opp .opp-card { padding: .8rem 0; border-top: 1px solid #e2e7e4; }
.support-content .fva-opp .opp-card:first-child { border-top: 0; }
.support-content .fva-opp .opp-card h3 { font-size: 1.12rem; line-height: 1.3; letter-spacing: 0; margin: 0 0 .25rem; }
.support-content .fva-opp .opp-card h3 a { color: #373b49; text-decoration: none; }
.support-content .fva-opp .opp-card h3 a:hover, .support-content .fva-opp .opp-card h3 a:focus-visible { color: #1f6b3b; text-decoration: underline; }
.support-content .fva-opp .opp-meta { font-size: .9rem; color: #5c665f; display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; }
.support-content .fva-opp .opp-meta span { font-size: inherit; line-height: 1.6; }
.support-content .fva-opp .opp-board { display: inline-block; padding: .05rem .55rem; border-radius: 999px; background: #fde7ee; color: #9b1b45; font-size: .78rem; line-height: 1.5; font-weight: 600; white-space: nowrap; }
.support-content .fva-opp .fva-news-when dd .fva-news-muted { font-size: .85em; }
.support-content .fva-opp .opp-when { border-collapse: collapse; margin: .4rem 0 1.2rem; font-size: .95rem; }
.support-content .fva-opp .opp-when th, .support-content .fva-opp .opp-when td { padding: .3rem .9rem; border: 1px solid #e2e7e4; text-align: center; }
.support-content .fva-opp .opp-when th { font-weight: 600; background: #f3f6f4; }
.support-content .fva-opp .opp-when tbody th { text-align: left; }
.support-content .fva-opp .opp-when .opp-tick { color: #1f6b3b; font-weight: 700; }
.support-content .fva-opp .opp-when .opp-no { color: #b8c0bb; }
.support-content .fva-opp .opp-details { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: .4rem 0 1.4rem; }
.support-content .fva-opp .opp-details dt { font-weight: 700; }
.support-content .fva-opp .opp-details dd { margin: 0; }
.support-content .fva-opp .opp-details dd p { margin: 0 0 .5rem; }
.support-content .fva-opp .opp-board-box { margin: .6rem 0 1.2rem; padding: .9rem 1.1rem; border-left: 4px solid #e91546; background: #fdf1f5; border-radius: 0 6px 6px 0; }
.support-content .fva-opp .opp-board-box p { margin: 0; }
.support-content .fva-opp .opp-enquire { margin: 1.4rem 0; padding: 1rem 1.1rem .4rem; border: 1px solid #d7e2ea; background: #f7fafc; border-radius: 6px; }
.support-content .fva-opp .opp-enquire h2 { margin-top: 0; }
.support-content .fva-opp .opp-print { font-size: .9rem; }
.support-content .fva-news-filters .opp-tick-label { display: flex; gap: .4rem; align-items: center; font-size: .95rem; }
@media (max-width: 575px) {
  .support-content .fva-opp .opp-details { grid-template-columns: 1fr; }
  .support-content .fva-opp .opp-when { font-size: .85rem; }
  .support-content .fva-opp .opp-when th, .support-content .fva-opp .opp-when td { padding: .25rem .45rem; }
}
/* Printing an opportunity - the old viewopp.asp was a chrome-less copy of the
   page for exactly this; now the page itself prints without the furniture. */
@media print {
  .top-header, footer.fva-footer, .page-aside, nav[aria-label="breadcrumb"],
  .fva-news-filters, .cf-turnstile, .opp-enquire, .opp-print, .sf-submit { display: none !important; }
  .support-content .row > .col-md-8 { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .support-content .page-content { max-width: none; }
}
/* ---- Directory of services (directory-of-services.asp) -------------------------
   The root directory2.asp's record-page stylesheet, carried across as written
   (the rec* classes) and scoped; the orange accent it used was the old site's
   section colour and is this site's green and navy here. The old template's
   list6 wrapper selectors are gone, so recdesc and friends are plain classes.
   The sidebar's inputs keep the widths the page gives them inline. The class
   sits on the main column AND the sidebar, because the filters live in the
   sidebar. */
.support-content .fva-dir .recgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin: 22px 0 0; }
.support-content .fva-dir .reccard { background: #F7FAFB; border: 1px solid #E1E9EC; border-radius: 6px; padding: 16px 18px; }
.support-content .fva-dir .recsec { font-size: 1.1em; font-weight: 700; color: #162e59; margin: 26px 0 8px; padding-bottom: 5px; border-bottom: 1px solid #E6ECEE; }
.support-content .fva-dir .reccardhead { font-size: 1.1em; font-weight: 700; color: #162e59; margin-bottom: 9px; }
.support-content .fva-dir a.recbtn { display: block; background: #1f6b3b; color: #fff; text-align: center; font-weight: 600; padding: 9px 12px; border-radius: 6px; margin: 0 0 7px; text-decoration: none; }
.support-content .fva-dir a.recbtn:hover, .support-content .fva-dir a.recbtn:focus { background: #17532e; color: #fff; text-decoration: none; }
.support-content .fva-dir a.recbtn.ghost { background: #fff; color: #162e59; border: 1px solid #C9D5D9; }
.support-content .fva-dir a.recbtn.ghost:hover, .support-content .fva-dir a.recbtn.ghost:focus { background: #EEF4F6; color: #162e59; }
.support-content .fva-dir a.recbtn:focus { outline: 2px solid #14232B; outline-offset: 2px; }
.support-content .fva-dir a.recbtn.recmail { overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; }
.support-content .fva-dir .reclabel { font-size: 0.8em; font-weight: 700; letter-spacing: 0.04em; color: #5A6B72; margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #E6ECEE; }
.support-content .fva-dir .recaddr { margin: 0 0 10px; line-height: 1.45; }
.support-content .fva-dir .recline { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; }
.support-content .fva-dir .recline > a.recbtn { flex: 1 1 auto; min-width: 0; margin: 0; }
.support-content .fva-dir .recline .reclinetext { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.support-content .fva-dir .recline .reclinenote { flex: 0 1 auto; font-size: 0.85em; color: #767676; line-height: 1.3; }
.support-content .fva-dir a.reciconbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; background: #1f6b3b; color: #fff; text-decoration: none; font-size: 15px; }
.support-content .fva-dir a.reciconbtn:hover, .support-content .fva-dir a.reciconbtn:focus { background: #17532e; color: #fff; text-decoration: none; }
.support-content .fva-dir a.reciconbtn:focus { outline: 2px solid #14232B; outline-offset: 2px; }
.support-content .fva-dir .recsocials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.support-content .fva-dir a.recsocial { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 6px; background: #fff; color: #162e59; border: 1px solid #C9D5D9; text-decoration: none; font-size: 17px; }
.support-content .fva-dir a.recsocial:hover, .support-content .fva-dir a.recsocial:focus { background: #EEF4F6; color: #162e59; text-decoration: none; }
.support-content .fva-dir a.recsocial:focus { outline: 2px solid #14232B; outline-offset: 2px; }
.support-content .fva-dir .recglyphx { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 16px; line-height: 1; }
.support-content .fva-dir a.recpill { display: inline-block; background: #EEF2F3; color: #3C525B; font-size: 0.92em; padding: 4px 11px; border-radius: 13px; margin: 0 5px 6px 0; text-decoration: none; border: 1px solid #DFE7EA; }
.support-content .fva-dir a.recpill:hover, .support-content .fva-dir a.recpill:focus { background: #DFE7EA; color: #14232B; text-decoration: none; }
.support-content .fva-dir .recquiet { font-size: 0.85em; color: #767676; }
.support-content .fva-dir p.recdesc { font-size: 1.15em; line-height: 1.6; margin: 0 0 4px; }
.support-content .fva-dir p.recquiet { font-size: 0.85em; }
.support-content .fva-dir p.recreg { font-size: 1em; color: #5A6B72; }
.support-content .fva-dir p.recaddr { margin: 0 0 10px; line-height: 1.45; }
/* the list and home tables, and the filter controls */
.support-content .fva-dir table { width: 100%; }
.support-content .fva-dir td, .support-content .fva-dir th { vertical-align: top; }
.support-content .fva-dir input[type="text"], .support-content .fva-dir select { padding: .45rem .6rem; border: 1px solid #cfd6d2; border-radius: 6px; font: inherit; background: #fff; max-width: 100%; }
.support-content .fva-dir input[type="submit"] { display: inline-block; padding: .5rem 1rem; border: 1px solid #1f6b3b; border-radius: 6px; background: #fff; color: #1f6b3b; font: inherit; font-weight: 600; cursor: pointer; }
.support-content .fva-dir input[type="submit"]:hover, .support-content .fva-dir input[type="submit"]:focus-visible { background: #eaf5ee; }
.support-content .fva-dir form { margin: 0 0 .6rem; }
@media (max-width: 700px) {
  .support-content .fva-dir .recgrid { grid-template-columns: 1fr; gap: 18px; }
  .support-content .fva-dir .recgrid .reccol-contact { order: -1; }
}

/* ---- make-or-cancel-appointment.asp: the Footcare Fife request page ----------
   Mostly elderly visitors, often on a telephone: larger type, big single-column
   targets, nothing that depends on hovering. The root page carried these as an
   inline stylesheet; here they sit under .support-content so they beat the
   site's own element rules (see the note at the head of the .fva-news block). */
.support-content .fva-ff { font-size: 1.06em; }
.support-content .fva-ff .ff-sub { font-size: 1.15rem; line-height: 1.3; letter-spacing: 0; margin: 1.3rem 0 .5rem; color: #162e59; }
.support-content .fva-ff .ff-card { border: 1px solid #cfd6d2; border-radius: 8px; padding: .9rem 1rem; margin: 0 0 .7rem; background: #fff; }
.support-content .fva-ff .ff-when { display: block; font-size: 1.15em; font-weight: 700; color: #162e59; }
.support-content .fva-ff .ff-where { display: block; color: #5c665f; margin-top: .15rem; }
.support-content .fva-ff a.ff-btn { display: inline-block; margin-top: .7rem; min-width: 12rem; text-align: center; text-decoration: none; }
.support-content .fva-ff .sf-panel p { margin: 0 0 .6rem; }
.support-content .fva-ff textarea.sf-input { min-height: 0; }
.support-content .fva-ff .sf-done p { margin: 0; }
@media (max-width: 600px) {
  .support-content .fva-ff a.ff-btn { display: block; width: 100%; box-sizing: border-box; }
}

/* ---- grant_apply.asp: the grant application form (and its landing pages) ------
   The form keeps the two-column striped tables its applicants know from years of
   FVA grant forms; Bootstrap 5 (this site's) already styles .table, .alert and
   .btn-*, so this covers what it does not - .well and the section headings - and
   brings the controls and buttons into line with the site's other forms. */
.support-content .fva-grant h3 { font-size: 1.45rem; line-height: 1.3; letter-spacing: 0; margin: 1.4rem 0 .8rem; }
.support-content .fva-grant h4 { font-size: 1.2rem; line-height: 1.3; letter-spacing: 0; margin: 1.4rem 0 .6rem; color: #162e59; }
.support-content .fva-grant .lead { font-size: 1.1em; }
.support-content .fva-grant .well { background: #f7fafc; border: 1px solid #d7e2ea; border-radius: 6px; padding: 1rem 1.1rem; margin: 1rem 0; }
.support-content .fva-grant .well-small { padding: .7rem .9rem; }
.support-content .fva-grant .alert { margin: 0 0 1rem; }
.support-content .fva-grant table.fva-grant-table { margin: .6rem 0 1rem; }
.support-content .fva-grant table.fva-grant-table td, .support-content .fva-grant table.fva-grant-table th { vertical-align: top; padding: .65rem .55rem; line-height: 1.5; }
.support-content .fva-grant table.fva-grant-table input[type="text"], .support-content .fva-grant table.fva-grant-table input[type="email"],
.support-content .fva-grant table.fva-grant-table input[type="number"], .support-content .fva-grant table.fva-grant-table input[type="date"],
.support-content .fva-grant table.fva-grant-table select, .support-content .fva-grant table.fva-grant-table textarea { font: inherit; line-height: 1.5; padding: .45rem .65rem; border: 1px solid #cfd6d2; border-radius: 6px; background: #fff; color: #373b49; max-width: 100%; box-sizing: border-box; }
.support-content .fva-grant table.fva-grant-table input:focus, .support-content .fva-grant table.fva-grant-table select:focus, .support-content .fva-grant table.fva-grant-table textarea:focus { outline: 2px solid #5fbde2; outline-offset: 1px; border-color: #5fbde2; }
.support-content .fva-grant input[type="file"] { font: inherit; }
.support-content .fva-grant .btn { font: inherit; font-weight: 600; border-radius: 6px; padding: .55rem 1.1rem; }
.support-content .fva-grant .btn-lg { padding: .8rem 1.6rem; }
.support-content .fva-grant .btn-success { background: #1f6b3b; border-color: #1f6b3b; color: #fff; }
.support-content .fva-grant .btn-success:hover, .support-content .fva-grant .btn-success:focus-visible { background: #17532e; border-color: #17532e; color: #fff; }
.support-content .fva-grant .badge { font-size: .78em; vertical-align: middle; font-weight: 600; }
.support-content .fva-grant .gf-scheme { border: 1px solid #cfd6d2; border-radius: 8px; padding: 1rem 1.1rem; margin: 0 0 .8rem; background: #fff; }
.support-content .fva-grant .gf-scheme h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.support-content .fva-grant .gf-scheme p { margin: 0 0 .5rem; }
.support-content .fva-grant a.gf-btn { display: inline-block; text-decoration: none; margin-top: .4rem; }
/* The column stretches every image to its full width (.left-team img, for
   pasted pictures); the grants engine's status icons are 345px PNGs, so they
   ballooned. Images inside the form keep their own size, and the icons are
   sized here. */
.support-content .fva-grant img { width: auto; max-width: 100%; height: auto; }
.support-content .fva-grant img.gf-status { width: 1.5rem; height: 1.5rem; object-fit: contain; vertical-align: -.3rem; margin-right: .35rem; }
/* The hub's list of sections: number over title, status with its icon, one
   button per row. */
.support-content .fva-grant table.gf-sections { margin: 1rem 0 1.2rem; border-top: 2px solid #d7e2ea; }
.support-content .fva-grant table.gf-sections td { vertical-align: middle; padding: .7rem .5rem; border-bottom: 1px solid #e2e7e4; line-height: 1.4; }
.support-content .fva-grant table.gf-sections td.gf-sec-title { font-weight: 600; padding-left: 0; }
.support-content .fva-grant table.gf-sections .gf-sec-no { display: block; font-size: .8rem; font-weight: 600; color: #5b6770; }
.support-content .fva-grant table.gf-sections td.gf-sec-state { white-space: nowrap; color: #5b6770; width: 9.5rem; }
.support-content .fva-grant table.gf-sections td.gf-sec-go { text-align: right; white-space: nowrap; width: 7rem; padding-right: 0; }
.support-content .fva-grant table.gf-sections .btn-sm { padding: .35rem .9rem; font-size: .9rem; }
@media (max-width: 700px) {
  .support-content .fva-grant table.gf-sections tr { display: block; padding: .5rem 0; border-bottom: 1px solid #e2e7e4; }
  .support-content .fva-grant table.gf-sections td { display: inline-block; width: auto; border: 0; padding: .2rem 1rem .2rem 0; }
  .support-content .fva-grant table.gf-sections td.gf-sec-title { display: block; width: 100%; padding-bottom: .4rem; }
  .support-content .fva-grant table.gf-sections td.gf-sec-go { text-align: left; }
  .support-content .fva-grant table.fva-grant-table tr { display: block; padding: .5rem 0; border-top: 1px solid #e2e7e4; }
  .support-content .fva-grant table.fva-grant-table td { display: block; width: 100% !important; padding: .25rem 0; }
  .support-content .fva-grant table.fva-grant-table td input[type="text"], .support-content .fva-grant table.fva-grant-table td input[type="email"] { width: 100% !important; }
}

/* ---- Section colour (28 Sep 2026) ---------------------------------------
   header.asp sets --sec, --sec-ink and --sec-text on <body> (class has-sec)
   from tblCmsThemes, through the page's place in the structure. Everything
   below reads those three; nothing here names a section. */
.has-sec .fva-os-hero { border-bottom: 6px solid var(--sec); }
.Organisation-support .sec-label { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--sec-ink, #1f6b3b); margin: 0 0 2px; }
.breadcrumb .breadcrumb-item a.crumb-sec { color: var(--sec-ink) !important; }

/* In this section: tiles on a section root, cards on a hub below it. Both
   sit on the .child-pages base rules and override them. */
/* The content-list bullet (.fva-os .support-content ul li::before) and its
   18px indent must not reach the tiles, the cards or the related strip. */
.fva-os .support-content .child-pages li, .related-pages li { padding-left: 0; }
.fva-os .support-content .child-pages li::before, .related-pages li::before { content: none; }
.child-pages.child-tiles ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.child-pages.child-tiles li a { display: flex; flex-direction: column; justify-content: flex-start; min-height: 128px; height: 100%; padding: 18px 18px 16px; border-radius: 6px; border-bottom: 0; background: var(--sec, #1f6b3b); color: var(--sec-text, #fff); text-decoration: none; transition: .2s filter; }
.child-pages.child-tiles li:nth-child(3n+2) a { filter: brightness(.94); }
.child-pages.child-tiles li:nth-child(3n+3) a { filter: brightness(.88); }
.child-pages.child-tiles li a:hover, .child-pages.child-tiles li a:focus-visible { filter: brightness(.78); text-decoration: none; }
.child-pages.child-tiles li a b { font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: 0; }
.child-pages.child-tiles li a span { font-size: 13.5px; line-height: 1.4; margin-top: 6px; opacity: .92; }
.child-pages.child-cards ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.child-pages.child-cards li a { display: block; height: 100%; padding: 12px 14px; border: 1px solid #e2e7e4; border-top: 4px solid var(--sec, #1f6b3b); border-radius: 6px; background: #fff; text-decoration: none; color: #373b49; }
.child-pages.child-cards li a b { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: 3px; }
.child-pages.child-cards li a span { font-size: 13.5px; color: #5c665f; line-height: 1.45; }
.child-pages.child-cards li a:hover b, .child-pages.child-cards li a:focus-visible b { text-decoration: underline; }

/* Related pages: the strip below the content, built from the structure. */
.related-pages { padding: 30px 0 10px; }
.related-pages h2 { font-size: 20px; line-height: 28px; letter-spacing: 0; margin: 0 0 12px; color: #373b49; }
.related-pages ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.related-pages li a { display: block; height: 100%; padding: 11px 13px; border: 1px solid #e2e7e4; border-top: 4px solid var(--sec, #1f6b3b); border-radius: 6px; background: #fff; text-decoration: none; color: #373b49; }
.related-pages li a i { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--sec-ink, #1f6b3b); margin-bottom: 3px; }
.related-pages li a b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; margin-bottom: 2px; }
.related-pages li a span { font-size: 13px; color: #5c665f; line-height: 1.45; }
.related-pages li a:hover b, .related-pages li a:focus-visible b { text-decoration: underline; }
/* A light tint of the card's own section colour behind it (Kenny, 29 Sep 2026),
   a shade deeper on hover. 8% keeps the grey summary text above 4.5:1 on every
   section colour. A browser without color-mix() ignores these and keeps the
   white above - a plain card, never an unreadable one. */
.related-pages li a { background: color-mix(in srgb, var(--sec, #1f6b3b) 8%, #fff); }
.related-pages li a:hover,
.related-pages li a:focus-visible { background: color-mix(in srgb, var(--sec, #1f6b3b) 14%, #fff); }

/* Home tiles coloured by the section they link to (footer.asp, funTileTheme).
   Placed after the positional colours above so the themed colour wins. */
.fva-services .services-grid ul li.themed { background: var(--tile); }
.fva-services .services-grid ul li.themed:hover { filter: brightness(.9); }
.fva-services .services-grid ul li.themed h5 { color: var(--tile-text, #fff); }
.fva-services .services-grid ul li.themed.dark img { filter: brightness(0) opacity(.8); }

/* ---- Navigation, phase 2 (28 Sep 2026) ---------------------------------
   Section menus in the green bar, the section nav in the sidebar, the
   related-pages block and the site map. All read the section tokens. */
.top-header .main-menu .navbar-nav .sec-item { position: relative; display: flex; align-items: center; }
.top-header .main-menu .sec-item > .nav-link { position: relative; }
.top-header .main-menu .sec-toggle { background: transparent; border: 0; padding: 4px 8px; margin-left: -6px; color: #fff; cursor: pointer; line-height: 1; }
.top-header .main-menu .sec-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 3px; }
.top-header .main-menu .sec-chev { display: inline-block; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.top-header .main-menu .sec-item.open .sec-chev { transform: rotate(225deg); margin-top: 4px; }
.top-header .main-menu .sec-item.sec-current > .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--sec, #14232b); }
.top-header .main-menu .sec-panel { display: none; background: #fff; border-top: 4px solid var(--sec, #1f6b3b); box-shadow: 0 10px 24px rgba(20, 35, 43, .18); border-radius: 0 0 8px 8px; padding: 10px 6px 8px; min-width: 270px; }
.top-header .main-menu .sec-panel ul { list-style: none; margin: 0; padding: 0; }
.top-header .main-menu .sec-panel li { margin: 0; padding: 0; position: static; }
.top-header .main-menu .sec-panel li::before { content: none; }
.top-header .main-menu .sec-panel a { display: block; padding: 7px 14px; color: #373b49; font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 4px; }
.top-header .main-menu .sec-panel a:hover, .top-header .main-menu .sec-panel a:focus-visible { background: #f3f6f4; color: var(--sec-ink-panel, #1f6b3b); }
.top-header .main-menu .sec-panel .sec-all { margin-top: 6px; border-top: 1px solid #e2e7e4; border-radius: 0; color: var(--sec-ink-panel, #1f6b3b); font-weight: 600; }
@media (min-width: 768px) {
  .top-header .main-menu .sec-panel { position: absolute; top: 100%; left: 0; z-index: 1000; }
  .top-header .main-menu .sec-item:hover > .sec-panel, .top-header .main-menu .sec-item:focus-within > .sec-panel, .top-header .main-menu .sec-item.open > .sec-panel { display: block; }
}
@media (max-width: 767px) {
  .top-header .main-menu .sec-item { flex-wrap: wrap; }
  .top-header .main-menu .sec-item > .nav-link { flex: 1 1 0; min-width: 0; }
  .top-header .main-menu .sec-toggle { color: #162e59; margin-left: 0; padding: 10px 14px; }
  .top-header .main-menu .sec-chev { width: 10px; height: 10px; }
  .top-header .main-menu .sec-panel { width: 100%; min-width: 0; background: transparent; box-shadow: none; border-top: 0; border-left: 4px solid var(--sec, #1f6b3b); border-radius: 0; margin: 0 0 8px 4px; padding: 2px 0 2px 12px; }
  .top-header .main-menu .sec-panel a { color: #162e59; font-size: 16px; padding: 8px 6px; }
  .top-header .main-menu .sec-panel .sec-all { border-top-color: rgba(22, 46, 89, .2); }
  .top-header .main-menu .sec-item.open > .sec-panel { display: block; }
}

/* In this section: the sidebar navigation on every content page below a root. */
.page-aside .section-nav { margin: 0 0 1.6rem; }
.page-aside .section-nav .page-aside-title { color: var(--sec-ink, #1f6b3b); border-bottom: 3px solid var(--sec, #1f6b3b); padding-bottom: .3rem; }
.page-aside .section-nav ul { list-style: none; margin: 0; padding: 0; }
.page-aside .section-nav li { margin: 0; padding: 0; }
.fva-os .support-content .page-aside .section-nav li::before { content: none; }
.page-aside .section-nav a { display: block; padding: .38rem 0; border-bottom: 1px solid #eef1f5; color: #373b49; text-decoration: none; font-size: 15px; line-height: 1.4; }
.page-aside .section-nav a:hover, .page-aside .section-nav a:focus-visible { color: var(--sec-ink, #1f6b3b); text-decoration: underline; }
.page-aside .section-nav a[aria-current="page"] { font-weight: 600; color: var(--sec-ink, #1f6b3b); border-left: 3px solid var(--sec, #1f6b3b); padding-left: .5rem; }
.page-aside .section-nav ul ul { margin: 0 0 .3rem .9rem; }
.page-aside .section-nav ul ul a { font-size: 14px; padding: .28rem 0; }
.page-aside .section-nav .section-nav-all { display: inline-block; margin-top: .6rem; font-size: 14px; font-weight: 600; color: var(--sec-ink, #1f6b3b); }

/* Related pages placed by an editor inside the content: the strip's cards,
   each carrying its own page's section colour. */
.related-pages.related-inline { padding: 4px 0 14px; }
.fva-os .support-content .related-pages.related-inline li::before { content: none; }
.fva-os .support-content .related-pages.related-inline li { padding-left: 0; }

/* The site map. */
.site-map .sm-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 28px; }
.site-map .sm-section { margin: 0 0 1.6rem; padding-top: .6rem; border-top: 4px solid var(--sec, #1f6b3b); }
.site-map .sm-section h2 { font-size: 20px; margin: .2rem 0 .5rem; color: var(--sec-ink, #1f6b3b); letter-spacing: 0; }
.site-map ul { list-style: none; margin: 0; padding: 0; }
.site-map li { margin: 0; padding: 0; }
.fva-os .support-content .site-map li::before { content: none; }
.site-map ul ul { margin: .1rem 0 .4rem 1.1rem; }
.site-map a { text-decoration: none; color: #373b49; display: inline-block; padding: .2rem 0; }
.site-map a:hover, .site-map a:focus-visible { text-decoration: underline; color: var(--sec-ink, #1f6b3b); }

/* Section menus, continued (28 Sep 2026): a section with more than eight pages
   gets a two-column panel, and the last section opens its panel leftwards so
   it stays inside the window. Phones keep one column. */
.top-header .main-menu .sec-panel li { break-inside: avoid; }
.top-header .main-menu .sec-panel.sec-panel-wide { min-width: 540px; }
.top-header .main-menu .sec-panel.sec-panel-wide ul { column-count: 2; column-gap: 10px; }
@media (min-width: 768px) {
  .top-header .main-menu .sec-item:last-child > .sec-panel { left: auto; right: 0; }
}
@media (max-width: 767px) {
  .top-header .main-menu .sec-panel.sec-panel-wide { min-width: 0; }
  .top-header .main-menu .sec-panel.sec-panel-wide ul { column-count: 1; }
}

/* The section nav at the foot of a tool page aside (28 Sep 2026): a rule off from the help above it. */
.page-aside > .section-nav:not(:first-child) { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid #e2e7e4; }

/* ============================================================================
   OPTION C - header, home page and footer (29 Sep 2026)

   Source: _design/option-c (option-c-handoff.md, option-c-reference.html).
   Values come from css/fva-tokens.css, loaded before this file.

   HOW THIS BLOCK STAYS OUT OF THE OLD RULES' WAY. The brief keeps the old
   section classes (top-header, fva-hero, fva-services, fva-events-outer,
   support-newsletter, fva-logo-section) so a diff reads, but everything INSIDE
   them is new and prefixed oc-, so the template's descendant rules - services-
   grid tiles, fva_event_box rows, logos-inner boxes - have nothing to match.
   Where an old rule still reaches a kept class it is out-ranked here by
   specificity (and, for the hero dots, by an !important of higher specificity,
   because the old ones are !important). Nothing above was deleted: the old
   rules still serve pages that have not moved to Option C, and removing dead
   ones is a separate, verifiable job.

   The template's element rules still apply to anything without a class of its
   own - p and span at 15px/24px, h2 at 40px/55px with -1px tracking - so every
   text element below sets its font in full rather than only its size.

   Contrast (brief 1.2 and 4): navy on the light fills, white on the dark ones.
   Two of the designer's pairs are under 4.5:1 with white - coral 3.1:1 and red
   3.8:1 - so white text on them is only ever LARGE text here (the tile labels
   at 20px/600, the audience-card names at 19px/600), where 3:1 is the bar.
   The button hover is green with NAVY text: white on #5bb264 is 2.6:1.
   ============================================================================ */

.oc-wrap {
    width: 100%;
    max-width: 1160px;             /* 1128px of content + 16px gutters: 76px margins at 1280 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* ---- buttons (brief 1.3) --------------------------------------------------- */
.oc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 25px;
    background: var(--fva-green-deep);
    color: #fff;
    font: 600 14px/20px var(--fva-font-sans);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.oc-btn:hover,
.oc-btn:focus-visible {
    background: var(--fva-green);
    color: var(--fva-navy);
}
.oc-btn-secondary {
    background: #fff;
    color: var(--fva-navy);
    box-shadow: inset 0 0 0 2px var(--fva-navy);
}
.oc-btn-secondary:hover,
.oc-btn-secondary:focus-visible {
    background: var(--fva-sky-tint);
    color: var(--fva-navy);
}
/* Bootstrap's success button, everywhere it is used without a rule of its own
   (the grants engine keeps its darker green). Bootstrap 5.3 reads these vars. */
.btn-success {
    --bs-btn-bg: #3a8443;
    --bs-btn-border-color: #3a8443;
    --bs-btn-hover-bg: #5bb264;
    --bs-btn-hover-border-color: #5bb264;
    --bs-btn-hover-color: #162e59;
    --bs-btn-active-bg: #2f6d37;
    --bs-btn-active-border-color: #2f6d37;
    --bs-btn-disabled-bg: #3a8443;
    --bs-btn-disabled-border-color: #3a8443;
}

/* ---- focus (brief 4): 3px navy outside controls on white, 3px white on colour */
.top-header.oc-header a:focus-visible,
.top-header.oc-header button:focus-visible,
.top-header.oc-header input:focus-visible,
.oc-home a:focus-visible,
.oc-home button:focus-visible,
.oc-home input:focus-visible,
.oc-notice a:focus-visible {
    outline: 3px solid var(--fva-navy);
    outline-offset: 2px;
    box-shadow: none;
}
.oc-home .oc-tile:focus-visible,
.oc-home .oc-hero a:focus-visible,
.oc-home .oc-hero button:focus-visible,
.oc-bulletin a:focus-visible,
.oc-bulletin button:focus-visible,
.oc-bulletin input:focus-visible,
.oc-footer a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: none;
}
/* tiles touch each other, so their ring sits inside the tile */
.oc-home .oc-tile:focus-visible { outline-offset: -6px; }
/* the phone pills scroll sideways, and a ring outside them would be clipped */
.top-header.oc-header .oc-aud a:focus-visible { outline-offset: -3px; }

/* ---- 2.1 the header -------------------------------------------------------- */
.oc-header { background: #fff; }
.oc-hdr-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    min-height: 94px;
    padding-top: 12px;
    padding-bottom: 12px;
}
/* The logo is centred in the white bar, not sat on its bottom edge beside the
   utility links (Kenny, 29 Sep 2026: it read as too close to the olive bar). */
.oc-logo { display: block; align-self: center; line-height: 0; }
.oc-logo img { display: block; height: 44px; width: auto; }
.oc-hdr-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.oc-search { display: flex; margin: 0; }
.oc-search input {
    width: 210px;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--fva-olive);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: #fff;
    color: var(--fva-ink);
    font: 400 14px/20px var(--fva-font-sans);
    box-sizing: border-box;
}
.oc-search input::placeholder { color: var(--fva-text-muted); opacity: 1; }
.oc-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: var(--fva-olive);
    color: var(--fva-navy);
    cursor: pointer;
}
.oc-search button svg { width: 18px; height: 18px; stroke-width: 2.4; }
/* Sign in / Sign out (19 Oct 2026, Kenny chose option D): an outline button on the
   search box's row, the same height and corners, so it reads as an action and not
   as one more of the site's shortcuts underneath. header.asp subRenderSignInButton. */
.oc-hdr-tools { display: flex; align-items: center; gap: 16px; }
.oc-acct {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--fva-navy);
    border-radius: 10px;
    background: #fff;
    color: var(--fva-navy);
    font: 600 14px/20px var(--fva-font-sans);
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}
.oc-acct svg { width: 18px; height: 18px; stroke-width: 2.2; }
.oc-acct:hover,
.oc-acct[aria-current="page"] { background: var(--fva-sky-tint); color: var(--fva-navy); }
.oc-acct:focus-visible { outline: 2px solid var(--fva-sky); outline-offset: 2px; }
.oc-util ul {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.oc-util a {
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    color: var(--fva-ink);
    font: 400 15px/22px var(--fva-font-sans);
    text-decoration: none;
}
.oc-util a:hover { color: var(--fva-navy); border-bottom-color: var(--fva-sky); }
.oc-util a[aria-current="page"] { border-bottom-color: var(--fva-sky); }

/* the audience bar: five plain links (brief 1.1) */
.oc-aud { background: var(--fva-olive); }
.oc-aud ul {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 56px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.oc-aud a {
    position: relative;
    display: inline-block;
    padding: 6px 0;
    color: var(--fva-navy);
    font: 600 15px/22px var(--fva-font-sans);
    text-decoration: none;
}
/* The section you are in is underlined exactly as a link is on hover - the same
   line, at the same depth and weight. Until 19 Oct 2026 it was a separate 3px bar
   under the link's padded box, which sat lower and heavier than the hover line
   (Kenny). One rule for both, so they cannot drift apart again. */
.oc-aud a:hover,
.oc-aud a.on,
.oc-aud a[aria-current="page"] { color: var(--fva-navy); text-decoration: underline; text-underline-offset: 6px; }

/* phone-only parts: hidden on a desktop */
.oc-hdr-btns,
.oc-menu { display: none; }

/* ---- 2.2 the notice bar ---------------------------------------------------- */
.oc-notice {
    display: flex;
    align-items: center;
    min-height: 48px;
    background: var(--fva-sky-tint);
    border-top: 1px solid var(--fva-sky);
    border-bottom: 1px solid var(--fva-sky);
}
.oc-notice p.oc-wrap {
    margin: 0 auto;
    padding-top: 12px;
    padding-bottom: 12px;
    color: var(--fva-ink);
    font: 400 15px/22px var(--fva-font-sans);
    text-align: center;
}
.oc-notice span { font: inherit; }
.oc-notice strong { font-weight: 600; }
.oc-notice-sep { margin: 0 4px; }
.oc-notice a {
    color: var(--fva-navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.oc-notice a:hover { color: var(--fva-green-deep); }
.oc-notice-success { background: #dcefdd; border-color: var(--fva-green); }
.oc-notice-warning { background: #fde9d5; border-color: var(--fva-orange); }
.oc-notice-urgent  { background: #fbdde1; border-color: var(--fva-red); }

/* ---- 2.3 the rotating banner ----------------------------------------------- */
.fva-hero.oc-hero { position: relative; background: var(--fva-navy); }
.fva-hero.oc-hero .fva_banner_slider { height: 520px; }
.oc-hero .swiper-slide.oc-slide {
    position: relative;
    display: block;
    height: 100%;
    background: var(--fva-navy);
    text-align: left;
}
.oc-hero .swiper-slide.oc-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}
.fva-hero.oc-hero .fva_banner_slider .swiper-slide::before {
    z-index: 1;
    background: linear-gradient(90deg, rgba(22, 46, 89, .82) 0%, rgba(22, 46, 89, .55) 45%, rgba(22, 46, 89, .05) 100%);
}
.oc-slide > .oc-wrap { position: relative; z-index: 2; height: 100%; }
.oc-slide-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    max-width: 640px;
    padding-top: 84px;
}
.oc-eyebrow {
    display: inline-block;
    margin: 0;
    padding: 0 16px;
    background: var(--fva-purple);
    color: #fff;
    font: 600 40px/52px var(--fva-font-sans);
    letter-spacing: -.3px;
}
.oc-slide-body h2 {
    margin: 0;
    color: #fff;
    font: 600 56px/64px var(--fva-font-sans);
    letter-spacing: -.5px;
}
.oc-slide-sub {
    max-width: 560px;
    margin: 0;
    color: #fff;
    font: 400 18px/28px var(--fva-font-sans);
}
.oc-hero .oc-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    cursor: pointer;
}
.oc-hero .oc-arrow:hover { background: rgba(255, 255, 255, .32); }
.oc-hero .oc-prev { left: 20px; }
.oc-hero .oc-next { right: 20px; }
/* The dots: a 14px ring (white-filled for the current slide) drawn inside a 44px
   button, so the touch target meets brief 4 while the dot keeps the design's
   size. The old dot rules are !important, hence these. */
.fva-hero.oc-hero .fva_banner_slider .swiper-pagination {
    bottom: 10px;
    z-index: 3;
    display: flex;
    justify-content: center;
}
.fva-hero.oc-hero .fva_banner_slider .swiper-pagination-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    opacity: 1;
}
.fva-hero.oc-hero .fva_banner_slider .swiper-pagination-bullet::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
}
.fva-hero.oc-hero .fva_banner_slider .swiper-pagination-bullet-active::before { background: #fff; }
.oc-home .oc-hero .swiper-pagination-bullet:focus-visible { outline-offset: -6px; }

/* ---- section headings, shared by 2.4 and 2.8 -------------------------------- */
.oc-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 22px;
}
.oc-sec-head h2 {
    margin: 0;
    color: var(--fva-ink);
    font: 600 32px/40px var(--fva-font-sans);
    letter-spacing: -.6px;
}
.oc-sec-head a {
    color: var(--fva-green-deep);
    font: 600 14px/20px var(--fva-font-sans);
    text-decoration: none;
}
.oc-sec-head a:hover { color: var(--fva-navy); text-decoration: underline; }
/* green-deep is 4.26:1 on the grey of What's happening - a shade darker there (5.8:1) */
.oc-happening .oc-sec-head a { color: #2f6d37; }
.oc-happening .oc-sec-head a:hover { color: var(--fva-navy); }
.oc-sec-head a span { font: inherit; }

/* ---- 2.4 how can we help you? --------------------------------------------- */
.oc-help { padding: 56px 0 40px; }
.oc-aud-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.oc-aud-cards > li { display: flex; min-width: 0; }
.oc-aud-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #e6e7ea;
    background: #fff;
    color: var(--fva-ink);
    text-decoration: none;
}
.oc-aud-card:hover { color: var(--fva-ink); border-color: var(--fva-iron); }
.oc-aud-card:hover .oc-aud-more { text-decoration: underline; }
.oc-aud-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 14px 16px;
    font: 600 19px/24px var(--fva-font-sans);
    box-sizing: border-box;
}
.oc-aud-hd .oc-ic { flex: 0 0 26px; }
.oc-aud-card ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px 16px 16px;
    list-style: none;
}
.oc-aud-card li {
    position: relative;
    padding-left: 14px;
    font: 400 13px/18px var(--fva-font-sans);
}
.oc-aud-card li::before {
    content: "\203A";
    position: absolute;
    left: 0;
    color: var(--fva-green-deep);
    font-weight: 600;
}
.oc-aud-more {
    margin-top: auto;
    padding: 0 16px 14px;
    color: var(--fva-green-deep);
    font: 600 13px/18px var(--fva-font-sans);
}
.oc-aud-more span { font: inherit; }

/* ---- 2.5 the mosaic -------------------------------------------------------- */
.fva-services.oc-tiles-sec { padding: 16px 0 40px; background: transparent; }
.oc-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.oc-tile-li { display: flex; min-width: 0; }
.oc-tile-li.oc-wide { grid-column: span 2; }
.oc-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    height: 180px;
    padding: 18px 20px;
    overflow: hidden;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    transition: filter .2s;
}
a.oc-tile:hover { filter: brightness(1.06); }
.oc-tile .oc-ic { position: absolute; top: 18px; left: 20px; width: 40px; height: 40px; }
.oc-tile-l {
    position: relative;
    font: 600 20px/26px var(--fva-font-sans);
    letter-spacing: -.2px;
}
.oc-tile small {
    position: relative;
    font: 400 12px/16px var(--fva-font-sans);
}
/* 85% on white text only: navy at 85% over the light fills drops under 4.5:1 */
.oc-tile:not(.oc-dk) small { opacity: .85; }
.oc-tile.oc-photo,
a.oc-tile.oc-photo:hover { background: var(--fva-navy); color: #fff; }
.oc-tile.oc-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
}

/* ---- 2.6 the bulletin sign-up --------------------------------------------- */
.support-newsletter.oc-bulletin-sec { margin: 0; padding: 8px 16px 56px; background: transparent; }
.oc-bulletin {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 40px 34px;
    background: var(--fva-purple);
    box-shadow: 0 30px 60px rgba(26, 77, 121, .45);
    color: #fff;
    text-align: center;
    box-sizing: border-box;
}
.oc-bulletin h2 {
    margin: 0 0 16px;
    color: #fff;
    font: 600 24px/32px var(--fva-font-sans);
    letter-spacing: 0;
}
.oc-bulletin form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0;
}
.oc-bulletin input {
    width: 440px;
    max-width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--fva-ink);
    font: 400 15px/20px var(--fva-font-sans);
    box-sizing: border-box;
}
.oc-bulletin input::placeholder { color: var(--fva-text-muted); opacity: 1; }
.oc-bulletin .oc-btn { padding: 0 28px; }

/* ---- 2.7 FVA in numbers ---------------------------------------------------- */
.oc-stats-sec { background: var(--fva-navy); color: #fff; }
.oc-stats {
    display: grid;
    grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
    align-content: center;
    align-items: start;
    gap: 24px;
    min-height: 220px;
    margin: 0 auto;
    padding-top: 44px;
    padding-bottom: 44px;
    list-style: none;
}
.oc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.oc-stat b { font: 600 44px/48px var(--fva-font-sans); letter-spacing: -1px; }
.oc-stat span { color: var(--fva-iron); font: 400 14px/20px var(--fva-font-sans); }

/* ---- 2.8 what's happening in Fife ------------------------------------------ */
.fva-events-outer.oc-happening { margin-top: 0; padding: 56px 0; background: var(--fva-surface-soft); }
.oc-panels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.oc-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    box-shadow: var(--fva-shadow-card);
}
.oc-panel-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
}
.oc-panel-hd h3 {
    margin: 0;
    color: inherit;
    font: 600 20px/26px var(--fva-font-sans);
    letter-spacing: 0;
}
.oc-panel-hd span { font: 400 12px/16px var(--fva-font-sans); white-space: nowrap; }
.oc-panel-bd {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 10px 14px 16px;
}
.oc-rows { margin: 0 0 12px; padding: 0; list-style: none; }
.oc-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 6px;
    border-radius: 6px;
    color: var(--fva-ink);
    text-decoration: none;
}
.oc-row:hover { background: var(--fva-surface-soft); color: var(--fva-ink); }
.oc-row:hover strong { text-decoration: underline; }
.oc-cal {
    display: flex;
    flex: 0 0 50px;
    flex-direction: column;
    align-items: center;
    height: 58px;
    overflow: hidden;
    border: 1px solid var(--fva-iron);
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    text-align: center;
}
/* sentence case (Sep, Tue), a point larger than the design's capitals - Kenny's
   standing preference; capitals would need the tracking the design gave them */
.oc-cal .oc-cal-m {
    display: block;
    width: 100%;
    padding: 3px 0;
    background: var(--fva-purple);
    color: #fff;
    font: 600 11px/12px var(--fva-font-sans);
}
.oc-cal b { padding-top: 4px; color: var(--fva-navy); font: 600 20px/22px var(--fva-font-sans); }
.oc-cal .oc-cal-d { color: var(--fva-text-muted); font: 400 10px/12px var(--fva-font-sans); }
.oc-box {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
}
.oc-box .oc-ic { width: 24px; height: 24px; }
.oc-txt { display: block; min-width: 0; font: 400 14px/20px var(--fva-font-sans); }
.oc-txt strong {
    display: -webkit-box;
    overflow: hidden;
    font: 600 14px/20px var(--fva-font-sans);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.oc-chip {
    display: inline-block;
    margin-bottom: 3px;
    padding: 1px 8px;
    border-radius: 9px;
    font: 600 11px/16px var(--fva-font-sans);
}
.oc-meta {
    display: block;
    margin-bottom: 2px;
    color: var(--fva-text-muted);
    font: 400 12px/16px var(--fva-font-sans);
}
.oc-meta time { font: inherit; }
.oc-empty { margin: 8px 6px 12px; color: var(--fva-text-muted); font: 400 14px/20px var(--fva-font-sans); }
.oc-btn.oc-btn-block { width: 100%; min-height: 42px; margin-top: auto; }
/* Each panel in its News and Events topic colour (Kenny, 17 Oct 2026): Community
   Events purple, General News blue, Job Vacancies black - the header fills are set
   in index.asp. The buttons and the events date band take a DEEPER shade of the
   same colour, because white 14px text on the topic colour itself is only about
   3.4:1. The header's heading is large text, where 3:1 is enough; its small count
   sits on a darkened pill so it reads at 6:1 or better. Vacancies cannot go deeper
   than black, so its header is dark grey and its pill and button are black. */
.oc-panel-events .oc-btn-block, .oc-panel-events .oc-cal .oc-cal-m { background: #9c2fa8; color: #fff; }
.oc-panel-events .oc-btn-block:hover, .oc-panel-events .oc-btn-block:focus-visible { background: #7a2384; color: #fff; }
.oc-panel-news .oc-btn-block { background: #0b6a99; color: #fff; }
.oc-panel-news .oc-btn-block:hover, .oc-panel-news .oc-btn-block:focus-visible { background: #08506f; color: #fff; }
.oc-panel-vacancies .oc-btn-block { background: #000; color: #fff; }
.oc-panel-vacancies .oc-btn-block:hover, .oc-panel-vacancies .oc-btn-block:focus-visible { background: #555; color: #fff; }
.oc-panel-events .oc-panel-hd span, .oc-panel-news .oc-panel-hd span, .oc-panel-vacancies .oc-panel-hd span { padding: 1px 8px; border-radius: 9px; background: rgba(0, 0, 0, .28); }
.oc-panel-vacancies .oc-panel-hd span { background: #000; }

/* ---- 2.9 the footer ---------------------------------------------------------
   The logo strip above it is NOT Option C: Kenny kept the previous layout and
   sizes (29 Sep 2026), so it is styled by FOOTER LOGO STRIPS further up. */
.oc-footer { background: var(--fva-ink); color: #fff; }
.oc-footer > .oc-wrap { padding-top: 22px; padding-bottom: 20px; }
.oc-strap { margin: 0 0 24px; color: #fff; font: 600 15px/22px var(--fva-font-sans); }
.oc-ftr-cols { display: flex; gap: 60px; }
.oc-footer h2 {
    margin: 0 0 6px;
    color: #fff;
    font: 600 18px/26px var(--fva-font-sans);
    letter-spacing: 0;
}
.oc-ftr-contact { display: flex; flex: 0 1 380px; flex-direction: column; gap: 14px; }
.oc-footer .oc-ftr-contact h2 { margin: 0; font: 300 30px/38px var(--fva-font-sans); }
.oc-ftr-contact h2 span { display: block; color: #fff; font: 600 20px/28px var(--fva-font-sans); }
.oc-ftr-reach { margin: 0; color: #fff; font: 400 15px/24px var(--fva-font-sans); }
.oc-ftr-reach a { color: #fff; text-decoration: none; }
.oc-ftr-reach a:hover { color: #fff; text-decoration: underline; }
.oc-ftr-reach .oc-ftr-phone { font-weight: 600; }
.oc-ftr-addr { margin: 0; color: var(--fva-iron); font: 400 13px/20px var(--fva-font-sans); }
.oc-ftr-addr a { color: var(--fva-sky); text-decoration: underline; }
.oc-ftr-addr a:hover { color: #fff; }
.oc-social { display: flex; gap: 12px; }
.oc-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--fva-navy);
}
.oc-social a:hover { background: var(--fva-sky); color: var(--fva-navy); }
.oc-ftr-links ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.oc-ftr-links a { color: #fff; font: 400 15px/26px var(--fva-font-sans); text-decoration: none; }
.oc-ftr-links a:hover { color: #fff; text-decoration: underline; }
.oc-ftr-bulletins {
    display: flex;
    flex: 0 0 250px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-left: auto;
}
.oc-ftr-bulletins p { margin: 0; color: var(--fva-iron); font: 400 13px/20px var(--fva-font-sans); }
.oc-ftr-bulletins .oc-btn { min-height: 44px; padding: 0 22px; }
.oc-legal {
    margin: 0;
    padding: 16px 0 20px;
    border-top: 1px solid #4b5060;
    color: var(--fva-silver);
    font: 400 12px/18px var(--fva-font-sans);
}
.oc-legal .oc-wrap { display: block; color: inherit; font: inherit; }
.oc-legal a { color: var(--fva-iron); text-decoration: underline; }
.oc-legal a:hover { color: #fff; }

/* ---- responsive (brief 3) --------------------------------------------------
   Tablet 768-1199: audience cards 3 + 2, tiles two up, panels 2 + 1.
   Header below 992: logo, search button, menu button; audience pills.
   Phone below 768: one column, except the tiles (two up). */
@media (max-width: 1199.98px) {
    .fva-hero.oc-hero .fva_banner_slider { height: 440px; }
    .oc-slide-body { padding-top: 64px; }
    .oc-eyebrow { font-size: 32px; line-height: 42px; }
    .oc-slide-body h2 { font-size: 44px; line-height: 52px; }

    /* 3 + 2: a six-track grid, three cards of two tracks, then two of three */
    .oc-aud-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .oc-aud-cards > li { grid-column: span 2; }
    .oc-aud-cards > li:nth-child(3n+1):nth-last-child(2),
    .oc-aud-cards > li:nth-child(3n+1):nth-last-child(2) + li { grid-column: span 3; }
    .oc-aud-cards > li:nth-child(3n+1):last-child { grid-column: span 6; }

    .oc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oc-tile-li.oc-last-odd { grid-column: span 2; }

    .oc-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oc-panels > .oc-panel:nth-child(3) { grid-column: span 2; }

    .oc-ftr-cols { flex-wrap: wrap; gap: 32px 48px; }
    .oc-ftr-contact { flex: 1 1 100%; }
    .oc-ftr-bulletins { margin-left: 0; }
}

@media (max-width: 991.98px) {
    .oc-hdr-row {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0;
        min-height: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    /* the logo gives way to the two buttons, never the other way round: at 38px
       tall it is 248px wide, and two 44px buttons do not fit beside that on a
       375px phone - they wrapped to a second line */
    .oc-logo { flex: 1 1 0; min-width: 0; }
    .oc-logo img { max-width: 100%; height: auto; max-height: 38px; }
    .oc-hdr-btns { display: flex; flex: 0 0 auto; gap: 4px; margin-left: auto; }
    .oc-icon-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--fva-navy);
        cursor: pointer;
    }
    .oc-icon-btn svg { width: 24px; height: 24px; }
    .oc-header.oc-search-open .oc-search-toggle,
    .oc-header.oc-menu-open .oc-menu-toggle { background: var(--fva-sky-tint); }
    .oc-menu-toggle .oc-ic-close,
    .oc-header.oc-menu-open .oc-menu-toggle .oc-ic-menu { display: none; }
    .oc-header.oc-menu-open .oc-menu-toggle .oc-ic-close { display: block; }

    /* the search form becomes a full-width row under the logo */
    .oc-hdr-right { order: 3; width: 100%; align-items: stretch; gap: 0; }
    .oc-util { display: none; }
    .oc-search { margin-top: 10px; }
    .oc-search input { flex: 1 1 auto; width: auto; min-width: 0; height: 44px; font-size: 16px; }
    .oc-search button { width: 48px; height: 44px; }
    .oc-js .oc-header:not(.oc-search-open) .oc-search { display: none; }
    /* sign in: the person icon among the header buttons does it here, so the
       desktop button goes, and the search row is the search form alone */
    .oc-hdr-tools { display: block; }
    .oc-acct { display: none; }

    /* the audience links as a sideways-scrolling row of pills */
    .oc-aud { background: #fff; border-bottom: 1px solid var(--fva-iron); }
    .oc-aud .oc-wrap { padding-left: 0; padding-right: 0; }
    .oc-aud ul {
        gap: 8px;
        height: auto;
        padding: 0 16px 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .oc-aud ul::-webkit-scrollbar { display: none; }
    .oc-aud li { flex: 0 0 auto; }
    .oc-aud a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 16px;
        border-radius: 22px;
        background: var(--fva-olive);
        font-size: 14px;
        white-space: nowrap;
    }
    .oc-aud a:hover { text-decoration: none; }
    /* on a phone the section you are in is the navy pill, with no underline */
    .oc-aud a.on,
    .oc-aud a[aria-current="page"] { background: var(--fva-navy); color: #fff; text-decoration: none; }

    /* the menu: sections with their pages folding out, then the utility links */
    .oc-menu { display: block; border-bottom: 1px solid var(--fva-iron); background: #fff; }
    .oc-js .oc-header:not(.oc-menu-open) .oc-menu { display: none; }
    .oc-menu .oc-wrap { padding-top: 4px; padding-bottom: 12px; }
    .oc-menu ul { margin: 0; padding: 0; list-style: none; }
    .oc-menu .sec-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 0;
        border-bottom: 1px solid #e6e7ea;
    }
    .oc-menu .sec-item > .nav-link {
        flex: 1 1 0;
        min-width: 0;
        padding: 11px 0;
        color: var(--fva-navy);
        font: 600 16px/22px var(--fva-font-sans);
        text-decoration: none;
    }
    .oc-menu .sec-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--fva-navy);
        cursor: pointer;
    }
    .oc-menu .sec-chev {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-top: -4px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s;
    }
    .oc-menu .sec-item.open .sec-chev { margin-top: 4px; transform: rotate(225deg); }
    .oc-menu .sec-panel {
        display: none;
        width: 100%;
        margin: 0 0 10px 4px;
        padding: 2px 0 2px 12px;
        border-left: 4px solid var(--sec, var(--fva-olive));
    }
    .oc-menu .sec-item.open > .sec-panel { display: block; }
    .oc-menu .sec-panel a {
        display: block;
        padding: 10px 6px;
        color: var(--fva-ink);
        font: 400 15px/22px var(--fva-font-sans);
        text-decoration: none;
    }
    .oc-menu .sec-panel .sec-all { color: var(--fva-navy); font-weight: 600; }
    .oc-menu-util { display: flex; flex-wrap: wrap; gap: 0 20px; padding-top: 6px; }
    .oc-menu-util a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--fva-ink);
        font: 400 15px/22px var(--fva-font-sans);
        text-decoration: none;
    }
    .oc-menu-util a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--fva-sky); text-underline-offset: 6px; }
}

@media (max-width: 767.98px) {
    .oc-notice p.oc-wrap { padding-top: 8px; padding-bottom: 8px; font-size: 12px; line-height: 18px; }

    .fva-hero.oc-hero .fva_banner_slider { height: 360px; }
    .fva-hero.oc-hero .fva_banner_slider .swiper-slide::before {
        background: linear-gradient(180deg, rgba(22, 46, 89, .05) 0%, rgba(22, 46, 89, .55) 45%, rgba(22, 46, 89, .88) 100%);
    }
    .oc-slide > .oc-wrap { display: flex; align-items: flex-end; }
    .oc-slide-body { gap: 10px; padding-top: 0; padding-bottom: 60px; }
    .oc-eyebrow { padding: 0 10px; font-size: 20px; line-height: 30px; }
    .oc-slide-body h2 { font-size: 28px; line-height: 34px; letter-spacing: -.3px; }
    .oc-slide-sub { display: none; }
    .oc-slide-body .oc-btn { min-height: 44px; }
    .oc-hero .oc-arrow { display: none; }

    .oc-sec-head h2 { font-size: 26px; line-height: 32px; }
    .oc-help { padding: 40px 0 28px; }
    .oc-aud-cards { grid-template-columns: minmax(0, 1fr); }
    .oc-aud-cards > li,
    .oc-aud-cards > li:nth-child(3n+1):nth-last-child(2),
    .oc-aud-cards > li:nth-child(3n+1):nth-last-child(2) + li,
    .oc-aud-cards > li:nth-child(3n+1):last-child { grid-column: auto; }

    .fva-services.oc-tiles-sec { padding: 8px 0 32px; }
    .oc-tiles { gap: 12px; }
    .oc-tile { height: 104px; padding: 12px 14px; gap: 2px; }
    .oc-tile .oc-ic { top: 12px; left: 14px; width: 30px; height: 30px; }
    .oc-tile-l { font-size: 14px; line-height: 18px; letter-spacing: 0; }
    .oc-tile small { font-size: 11px; line-height: 14px; }

    .support-newsletter.oc-bulletin-sec { padding: 8px 16px 40px; }
    .oc-bulletin { padding: 24px 20px 26px; }
    .oc-bulletin h2 { font-size: 20px; line-height: 28px; }
    .oc-bulletin form { flex-direction: column; align-items: stretch; }
    .oc-bulletin input { width: 100%; }

    .oc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; min-height: 0; padding-top: 32px; padding-bottom: 32px; }
    .oc-stat:last-child:nth-child(odd) { grid-column: span 2; }
    .oc-stat b { font-size: 34px; line-height: 40px; }

    .fva-events-outer.oc-happening { padding: 40px 0; }
    .oc-panels { grid-template-columns: minmax(0, 1fr); }
    .oc-panels > .oc-panel:nth-child(3) { grid-column: auto; }
    .oc-rows > li:nth-child(n+6) { display: none; }


    .oc-ftr-cols { flex-direction: column; gap: 28px; }
    .oc-ftr-contact, .oc-ftr-bulletins { flex: none; }
}

/* ---- Hero photos (19 Oct 2026) -------------------------------------------
   header.asp writes the hero as a picture element from heroes.inc: a 3:2 crop
   for phones, a 4:1 band for everything wider. Each img carries its photo's
   focal point in percent, --hx/--hy for the band and --nx/--ny for the phone
   crop. object-fit: cover (Organisation support, above) cuts the photo to the
   377px box; these keep the subject in the part that is left. */
.fva-os-hero img { object-position: var(--hx, 50%) var(--hy, 50%); }
@media (max-width: 600px) {
    .fva-os .fva-os-hero img { object-position: var(--nx, 50%) var(--ny, 50%); }
}

/* ---- Wider content on bigger screens (22 Oct 2026) -------------------------
   Kenny: on a laptop or wider the title and content sat in a 958px column (main
   639px, sidebar 319px) under a 1160px header, with white space either side and
   the content indented from the logo. From 1025px up they now match the header's
   1160px (.oc-wrap), the sidebar is a fixed 340px and the main column takes the
   rest - 820px at full width. At 1024px and below nothing changes: the 90% rules
   in the max-width 1024px block above (and 100% on phones) still apply - starting
   at 993 instead overrode them and ran the content edge to edge at 1000px. Only
   the page's own two columns are sized (support-content > container > row),
   never rows nested inside content.
   LINE LENGTH stays readable: CMS prose already stops at 46rem (.page-content,
   about 76 characters a line); paragraphs and list items elsewhere in the main
   column - tool and form pages - and the summary under the page title get the
   same measure, while tables, forms and grids use the full width.
   PICTURES are no longer stretched: see where .left-team img used to be, above. */
@media (min-width: 1025px) {
    .Organisation-support .container,
    .support-content .container {
        max-width: 1160px;
    }
    .support-content > .container > .row > .col-md-8 {
        flex: 0 0 auto;
        width: calc(100% - 340px);
    }
    .support-content > .container > .row > .col-md-4 {
        flex: 0 0 auto;
        width: 340px;
    }
}
.support-content > .container > .row > .col-md-8 p,
.support-content > .container > .row > .col-md-8 li,
.support-content > .container > .row > .col-md-12 p,
.support-content > .container > .row > .col-md-12 li,
.Organisation-support .container p {
    max-width: 46rem;
}