/* Church Tenements Charity - site theme (loaded after style.css)
   "Bold & energetic" - aimed at young people under 25:
     - Bricolage Grotesque (chunky, characterful) for headings, DM Sans (clean, very readable) for body text
     - deep green as the main colour, with coral and sunny yellow accents
     - a yellow "highlighter" (<mark class="ct-mark">) on key words
   Colour contrast (WCAG AA) is noted next to each colour - check any new pairings at https://webaim.org/resources/contrastchecker/ */

:root {
    /* Fonts */
    --ct-font-head: 'Bricolage Grotesque', 'DM Sans', 'Segoe UI', Arial, sans-serif;
    --ct-font-body: 'DM Sans', 'Segoe UI', Arial, sans-serif;

    /* Main colour - deep green. White text on it = 7.8:1, it as text on white = 7.8:1 */
    --ct-accent: #0b5d4b;
    --ct-accent-dark: #084536;
    --ct-accent-tint: #e3f1ec;   /* light green background for tiles and cards */

    /* Coral - backgrounds behind dark text (ink on coral = 4.9:1), or as text only when large: 3.7:1 on white */
    --ct-coral: #e4572e;
    --ct-coral-dark: #b43a17;    /* coral for normal-size text (5.9:1 on white) */
    --ct-coral-tint: #fde8e1;

    /* Sunny yellow - only ever behind dark text (ink on yellow = 12.5:1), or as text on the dark footer */
    --ct-highlight: #ffd23f;
    --ct-highlight-tint: #fff5d1;

    --ct-ink: #14161b;           /* headings */
    --ct-text: #2f343c;          /* body text (12.5:1 on white) */
    --ct-muted: #5f6672;         /* small captions (5.8:1 on white) */
    --ct-line: #e3e6ea;          /* thin dividers */
    --ct-soft: #f5f7f6;          /* very light panel / image placeholder */
    --ct-radius: 16px;           /* rounded corners for cards, tiles and panels */
}

/* ---------- Type ---------- */

body {
    font-family: var(--ct-font-body);
    color: var(--ct-text);
    background: #ffffff;
    font-size: 17px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;   /* stop iPhone Safari enlarging text when the phone is turned sideways */
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(11, 93, 75, 0.15);   /* soft green flash when tapping links on iPhone/Android */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ct-font-head);
    color: var(--ct-ink);
    letter-spacing: -0.02em;
}

a {
    color: var(--ct-accent);
}

    a:hover, a:focus {
        color: var(--ct-accent-dark);
    }

.ct-heading {
    font-family: var(--ct-font-head);
    font-weight: 800 !important;   /* the template's .wrap-about styles would otherwise make these thin */
    color: var(--ct-ink);
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.ct-subheading {
    font-family: var(--ct-font-head);
    color: var(--ct-ink);
    font-size: 1.3rem;
    font-weight: 700;
}

.ct-lead {
    color: var(--ct-text);
    font-size: 1.25rem;
    font-weight: 500;
}

/* Yellow "highlighter pen" behind key words, e.g. <mark class="ct-mark">uni</mark>.
   Always dark text on the yellow, so it's readable anywhere (including over photos). */
.ct-mark {
    background: linear-gradient(transparent 12%, var(--ct-highlight) 12%, var(--ct-highlight) 88%, transparent 88%);
    color: var(--ct-ink) !important;
    padding: 0 0.2em;
    border-radius: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.ct-text {
    color: var(--ct-text);
}

/* Outlined icon style - thinner, quieter than the filled set */
.material-icons {
    font-family: 'Material Icons Outlined';
}

.ct-icon {
    font-size: 1.75rem;
    color: var(--ct-accent);
}

/* Round trustee photo on the Trustees page cards, with a white ring and the yellow "sticker" shadow */
.ct-trustee-photo {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 0 0.5rem;                  /* left-aligned, like the text on the cards */
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 4px 4px 0 var(--ct-highlight);
}

/* ---------- Header ---------- */

.ct-topbar {
    display: none;
}

.ftco-navbar-light {
    border-bottom: 1px solid var(--ct-line);
    background: #ffffff !important;
}

    /* Fun stripe along the very top of the header in the three brand colours (decorative only) */
    .ftco-navbar-light::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: linear-gradient(90deg,
            var(--ct-accent) 0 33.33%,
            var(--ct-highlight) 33.33% 66.66%,
            var(--ct-coral) 66.66% 100%);
    }

/* Site name: tilted "CT" badge + name + "Helping people since 1982" tagline */
.ct-brand,
.ct-brand:hover,
.ct-brand:focus {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--ct-font-head);
    color: var(--ct-accent) !important;
    text-decoration: none;
}

.ct-brand-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--ct-accent);
    color: #ffffff;                                  /* white on green = 7.6:1 */
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.03em;
    box-shadow: 4px 4px 0 var(--ct-highlight);       /* chunky yellow "sticker" shadow */
    transform: rotate(-6deg);
    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1);   /* small bounce */
}

    .ct-brand:hover .ct-brand-badge,
    .ct-brand:focus-visible .ct-brand-badge {
        transform: rotate(6deg) scale(1.08);
    }

.ct-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.ct-brand-name {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

.ct-brand-tagline {
    margin-top: 0.3rem;
    font-family: var(--ct-font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ct-text);                           /* 12.5:1 on white */
}

/* The year as a tilted yellow sticker (ink on yellow = 12.5:1) */
.ct-brand-year {
    display: inline-block;
    padding: 0.05em 0.4em;
    border-radius: 5px;
    background: var(--ct-highlight);
    color: var(--ct-ink);
    font-family: var(--ct-font-head);
    font-weight: 800;
    transform: rotate(-3deg);
}

.ct-nav-link {
    font-family: var(--ct-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ct-ink) !important;
}

    .ct-nav-link:hover {
        color: var(--ct-accent) !important;
    }

/* "Can I apply?" button at the end of the menu */
.ct-nav-cta .btn-ct {
    padding: 0.55rem 1.1rem;
    font-size: 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Menu button - also when the header is "scrolled" (the template fades it to 50% black there,
   which fails contrast at 3.9:1; this keeps it solid at 17:1) */
.ftco-navbar-light .navbar-toggler,
.ftco-navbar-light.scrolled .navbar-toggler,
.ftco_navbar.ftco-navbar-light.scrolled .navbar-toggler {
    color: var(--ct-ink) !important;
    border-color: var(--ct-line) !important;
}

/* ---------- Phones & tablets (menu collapsed behind the "Menu" button) ---------- */
@media (max-width: 991.98px) {
    /* Keep the site name and the Menu button side by side on one line */
    .ftco_navbar > .container {
        flex-wrap: wrap;
        align-items: center;
    }

    .ct-brand,
    .ct-brand:hover,
    .ct-brand:focus {
        gap: 0.55rem;
        padding-top: 0.75rem;      /* bigger tap area (at least 44px tall) */
        padding-bottom: 0.75rem;
        margin-right: 0.5rem;
    }

    .ct-brand-badge {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 0.95rem;
        box-shadow: 3px 3px 0 var(--ct-highlight);
    }

    .ct-brand-name {
        font-size: 1.1rem;
    }

    .ct-brand-tagline {
        font-size: 0.78rem;
    }

    /* In the opened menu the button sits below the links with some breathing room */
    .ct-nav-cta {
        padding: 0.75rem 0 1rem;
    }

    .ftco-navbar-light .navbar-toggler {
        margin-left: auto;
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.95rem;
        font-weight: 700;
    }

    /* Menu links are big, easy-to-tap rows */
    .ct-nav-link {
        display: block;
        padding: 0.75rem 0 !important;
        font-size: 1.1rem;
    }
}

/* Small phones: slightly smaller site name so it fits next to the Menu button */
@media (max-width: 399.98px) {
    .ct-brand,
    .ct-brand:hover,
    .ct-brand:focus {
        gap: 0.45rem;
        margin-right: 0.25rem;
    }

    .ct-brand-badge {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 0.78rem;
        box-shadow: 2px 2px 0 var(--ct-highlight);
    }

    .ct-brand-name {
        font-size: 0.92rem;
    }

    .ct-brand-tagline {
        font-size: 0.72rem;
    }
}

/* Smallest phones (under 360px): a touch smaller again so the name and Menu button share one line */
@media (max-width: 359.98px) {
    .ct-brand-name {
        font-size: 0.86rem;
    }
}

/* Phones (under 480px): the Menu button shows just the icon, to leave room for the badge and tagline.
   Its accessible name (aria-label="Menu" in Site1.Master) still tells screen readers and voice control what it is. */
@media (max-width: 479.98px) {
    .ftco-navbar-light .navbar-toggler {
        font-size: 0;
        padding: 0.5rem 0.7rem;
    }

        .ftco-navbar-light .navbar-toggler .oi {
            font-size: 1.25rem;
        }
}

/* Desktop: the site name also gets a comfortable tap/click area */
@media (min-width: 992px) {
    .ct-brand {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    /* A little room between the colour stripe and the header contents */
    .ftco-navbar-light,
    .ftco-navbar-light.scrolled {
        padding-top: calc(6px + 0.5rem) !important;
        padding-bottom: 0.5rem !important;
    }

    /* Menu links get a soft yellow pill when you hover over them */
    .ct-nav-link {
        border-radius: 999px;
        padding-top: 0.55rem !important;      /* the template's tall padding would make the pill a big blob */
        padding-bottom: 0.55rem !important;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        transition: background-color 0.15s ease;
    }

        .ct-nav-link:hover {
            background: var(--ct-highlight-tint);
            color: var(--ct-ink) !important;
        }

    .ct-nav-cta {
        display: flex;
        align-items: center;
        margin-left: 0.5rem;
    }
}

/* Small laptops (992-1199px): tighter links, and the "Can I apply?" button is left out so the menu stays on one line */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ct-nav-link {
        white-space: nowrap;
        font-size: 0.95rem;
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }

    .ct-nav-cta {
        display: none;
    }
}

/* ---------- Home hero: text left, photo right ---------- */

.ct-hero {
    background: #ffffff;
    padding: 5rem 0 4rem;
}

    .ct-hero h1 {
        color: var(--ct-ink);
        font-size: 2.75rem;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .ct-hero p {
        color: var(--ct-text);
        font-size: 1.2rem;
    }

/* Photo slot - shows a soft grey panel until the image file exists */
.ct-hero-img,
.ct-photo {
    background-color: var(--ct-soft);
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

.ct-hero-img {
    min-height: 360px;
    height: 100%;
}

/* Home page "Who we are" photos (real <img> tags, so the alt text shows if a photo fails to load) */
img.ct-photo {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;          /* crop to fill the box without stretching (works in all browsers incl. Safari) */
    margin-bottom: 1.5rem;
}

/* If any photo fails to load, the browser shows its alt text instead - make that readable
   (dark text on the light placeholder background) rather than a blank box. */
img.ct-photo,
.ct-figure img {
    background-color: var(--ct-soft);
    color: var(--ct-text);
    font-size: 0.95rem;
    font-style: italic;
}

@media (max-width: 767.98px) {
    .ct-hero {
        padding: 3rem 0 2rem;
    }

        .ct-hero h1 {
            font-size: 2rem;
        }

    .ct-hero-img {
        min-height: 220px;
        margin-top: 2rem;
    }
}

/* ---------- Home page slider (owl carousel from the original template) ---------- */

.owl-carousel.home-slider.ct-slider,
.owl-carousel.home-slider.ct-slider .slider-item,
.owl-carousel.home-slider.ct-slider .slider-item .slider-text {
    height: 560px;
}

/* Slide photos are decorative backgrounds (the slide text carries the message, so screen readers skip them).
   The dark green background-color shows if a photo fails to load, so the white text is always readable. */
.owl-carousel.home-slider.ct-slider .slider-item {
    background-color: var(--ct-accent-dark);
    background-size: cover;
    background-position: center;
}

    /* Dark fade from the left so white text is always readable over the photo */
    .owl-carousel.home-slider.ct-slider .slider-item .overlay {
        background: linear-gradient(90deg, rgba(16, 18, 22, 0.78) 0%, rgba(16, 18, 22, 0.45) 55%, rgba(16, 18, 22, 0.1) 100%);
        opacity: 1;
    }

    .owl-carousel.home-slider.ct-slider .slider-item .slider-text .ct-slide-title {
        font-family: var(--ct-font-head);
        color: #ffffff;
        font-size: 3.25rem;
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.03em;
        margin-bottom: 1rem;
    }

    .owl-carousel.home-slider.ct-slider .slider-item .slider-text p {
        color: rgba(255, 255, 255, 0.92);
        font-size: 1.2rem;
        margin-bottom: 1.25rem;
    }

.owl-carousel.home-slider.ct-slider .owl-dots {
    position: absolute;
    bottom: 1.5rem;
    width: 100%;
}

    .owl-carousel.home-slider.ct-slider .owl-dots .owl-dot {
        background: rgba(255, 255, 255, 0.5);
    }

        .owl-carousel.home-slider.ct-slider .owl-dots .owl-dot.active {
            background: #ffffff;
        }

/* Phones: taller slides (text stacks up), smaller titles, and the Pause button moves to the
   top corner so it never covers the slide's buttons or the dots */
@media (max-width: 767.98px) {
    .owl-carousel.home-slider.ct-slider,
    .owl-carousel.home-slider.ct-slider .slider-item,
    .owl-carousel.home-slider.ct-slider .slider-item .slider-text {
        height: 560px;
    }

        .owl-carousel.home-slider.ct-slider .slider-item .slider-text {
            text-align: left;
            padding: 3.5rem 16px 3rem;   /* room for the Pause button above and the dots below */
        }

            .owl-carousel.home-slider.ct-slider .slider-item .slider-text .ct-slide-title {
                font-size: 2.1rem;
            }

            .owl-carousel.home-slider.ct-slider .slider-item .slider-text p {
                font-size: 1.05rem;
            }

        .owl-carousel.home-slider.ct-slider .slider-item .overlay {
            background: rgba(16, 18, 22, 0.62);
        }

    .ct-slider-wrap .ct-slider-toggle {   /* extra class so this beats the main .ct-slider-toggle rule further down */
        top: 0.75rem;
        bottom: auto;
        right: 0.75rem;
    }
}

@media (max-width: 359.98px) {
    .owl-carousel.home-slider.ct-slider .slider-item .slider-text .ct-slide-title {
        font-size: 1.8rem;
    }
}

/* Captioned photo used on inner pages */
.ct-figure {
    margin: 0 0 2rem;
}

    .ct-figure img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        display: block;
    }

    .ct-figure figcaption {
        color: var(--ct-muted);
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }

/* Inner page title */
/* Page title banner: deep green with playful coral and yellow circles (decorative only) */
.ct-page-banner {
    position: relative;
    overflow: hidden;
    background: var(--ct-accent);
    padding: 3.5rem 0 3rem;
    margin-bottom: 2.5rem;
}

    .ct-page-banner::before,
    .ct-page-banner::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .ct-page-banner::before {
        width: 240px;
        height: 240px;
        right: -60px;
        top: -90px;
        background: var(--ct-highlight);
    }

    .ct-page-banner::after {
        width: 120px;
        height: 120px;
        right: 170px;
        bottom: -70px;
        background: var(--ct-coral);
    }

    .ct-page-banner .container {
        position: relative;
        z-index: 1;
    }

    .ct-page-banner h1 {
        font-family: var(--ct-font-head);
        color: #ffffff;
        font-size: 2.9rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        margin: 0;
    }

    .ct-page-banner a {
        color: #ffffff !important;
    }

@media (max-width: 575.98px) {
    .ct-page-banner::before { width: 140px; height: 140px; right: -50px; top: -60px; }
    .ct-page-banner::after { display: none; }
    .ct-page-banner h1 { font-size: 2.2rem; }
}

/* ---------- Buttons ---------- */

.btn-ct {
    background: var(--ct-accent);
    border: 2px solid var(--ct-accent);
    color: #ffffff;
    border-radius: 6px;
    font-family: var(--ct-font-head);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 0 var(--ct-accent-dark);   /* chunky "pressable" look */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

    .btn-ct:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 var(--ct-accent-dark);
    }

    .btn-ct:hover,
    .btn-ct:focus {
        background: var(--ct-accent-dark);
        border-color: var(--ct-accent-dark);
        color: #ffffff;
    }

.btn-ct-outline,
.ct-hero .btn-light,
.ct-slider .btn-light,
.ct-callout .btn-light {
    background: #ffffff;
    border: 1px solid var(--ct-line);
    color: var(--ct-ink);
    border-radius: 6px !important;
    font-weight: 600;
}

/* Fix for a bug in the original template's style.css, which sets .px-4 / .pl-4 to only 0.2rem on the left
   (so button text sat against the left edge). Bootstrap's correct value is 1.5rem. */
.px-4,
.pl-4 {
    padding-left: 1.5rem !important;
}

/* Friendlier, rounder buttons - at least 44px tall so they're easy to tap on a phone */
.btn-ct,
.btn-ct-outline,
.ct-slider .btn-light,
.ct-callout .btn-light {
    border-radius: 999px !important;
    min-height: 44px;
}

    .btn-ct-outline:hover,
    .ct-hero .btn-light:hover,
    .ct-slider .btn-light:hover,
    .ct-callout .btn-light:hover {
        border-color: var(--ct-ink);
        color: var(--ct-ink);
        background: #ffffff;
    }

/* ---------- Content blocks ---------- */

/* Cards are just a thin rule on top and plenty of space - no boxes */
/* Cards: soft green tint with rounded corners */
.ct-card {
    background: var(--ct-accent-tint);
    border: 0;
    border-radius: var(--ct-radius);
    padding: 1.5rem;
    height: 100%;
    text-align: left !important;
}

    .ct-card h3 {
        color: var(--ct-ink);
        font-size: 1.15rem;
        font-weight: 700;
    }

    .ct-card p {
        color: var(--ct-text);
    }

a.ct-card {
    text-decoration: none;
}

    a.ct-card:hover h3 {
        color: var(--ct-accent);
    }

.ct-sidebar {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--ct-line);
    padding: 0.25rem 0 0.25rem 1.5rem;
}

    .ct-sidebar .ct-heading {
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ct-muted);
    }

/* Call-to-action box: warm yellow tint with a yellow stripe on the left */
.ct-callout {
    background: var(--ct-highlight-tint);
    color: var(--ct-text);
    border-radius: var(--ct-radius);
    border-left: 8px solid var(--ct-highlight);
    padding: 2.5rem 2rem;
}

/* ---------- Young-people-friendly components ---------- */

.ct-section {
    margin-top: 4.5rem;
    margin-bottom: 3rem;
}

/* "What could we help you with?" tiles */
.ct-tile {
    background: var(--ct-accent-tint);
    border-radius: var(--ct-radius);
    padding: 1.25rem 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--ct-ink);
    font-family: var(--ct-font-head);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
}

    .ct-tile .material-icons {
        font-size: 2.25rem;
        color: var(--ct-accent);
    }

/* Tiles cycle through green, yellow and coral so the grid feels lively */
.ct-tiles li:nth-child(3n+2) .ct-tile {
    background: var(--ct-highlight-tint);
}

    .ct-tiles li:nth-child(3n+2) .ct-tile .material-icons {
        color: var(--ct-ink);
    }

.ct-tiles li:nth-child(3n+3) .ct-tile {
    background: var(--ct-coral-tint);
}

    .ct-tiles li:nth-child(3n+3) .ct-tile .material-icons {
        color: var(--ct-coral-dark);
    }

/* Numbered steps (home page "How it works" and How to Apply) */
.ct-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--ct-coral);          /* ink on coral = 4.9:1 */
    color: var(--ct-ink);
    font-family: var(--ct-font-head);
    font-weight: 800;
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.ct-steps-vertical li {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Lists with green tick marks */
.ct-checklist {
    list-style: none;
    padding-left: 0;
}

    .ct-checklist li {
        position: relative;
        padding-left: 1.9rem;
        margin-bottom: 0.5rem;
        color: var(--ct-text);
    }

        .ct-checklist li::before {
            content: "";
            position: absolute;
            left: 0.2rem;
            top: 0.35em;
            width: 0.55rem;
            height: 0.95rem;
            border: solid var(--ct-accent);
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

/* Highlighted note, e.g. "Someone can apply for you" */
.ct-note {
    background: var(--ct-accent-tint);
    border-radius: var(--ct-radius);
    padding: 1rem 1.25rem;
    color: var(--ct-ink);
}

/* "Can I apply?" checker */
.ct-checker {
    border: 2px solid var(--ct-accent);
    border-radius: var(--ct-radius);
    padding: 1.75rem;
    scroll-margin-top: 1rem;
}

.ct-question {
    border: 0;
    padding: 0;
    margin: 0 0 1.25rem;
}

    .ct-question legend {
        font-size: 1rem;
        font-weight: 600;
        color: var(--ct-ink);
        margin-bottom: 0.5rem;
    }

/* Big, easy-to-tap Yes / No choices */
.ct-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.4rem 1.25rem;
    margin: 0 0.5rem 0.5rem 0;
    border: 2px solid var(--ct-line);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    color: var(--ct-ink);
}

    .ct-choice input {
        width: 1.15rem;
        height: 1.15rem;
        accent-color: var(--ct-accent);
    }

    /* Selected answer. ":has()" needs iOS 15.4+ - the .is-checked class (added by the script on
       How to Apply) does the same job on older iPhones and browsers. */
    .ct-choice.is-checked {
        border-color: var(--ct-accent);
        background: var(--ct-accent-tint);
    }

    .ct-choice:has(input:checked) {
        border-color: var(--ct-accent);
        background: var(--ct-accent-tint);
    }

.ct-check-result:empty {
    display: none;
}

.ct-check-result {
    border-radius: var(--ct-radius);
    padding: 1rem 1.25rem;
    color: var(--ct-ink);
}

.ct-check-yes {
    background: var(--ct-accent-tint);
    border-left: 6px solid var(--ct-accent);
}

.ct-check-no,
.ct-check-info {
    background: var(--ct-highlight-tint);
    border-left: 6px solid var(--ct-highlight);
}

/* ---------- Grant application form (Apply.aspx) ---------- */

/* Each numbered part of the form */
.ct-form-section {
    border-top: 1px solid var(--ct-line);
    padding-top: 2rem;
    margin-top: 2rem;
}

.ct-form-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--ct-font-head);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ct-ink);
    margin-bottom: 1.25rem;
}

/* Friendly start: the four reassurance points at the top of the form */
.ct-reassure {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    grid-template-columns: 1fr;          /* phones: one under another */
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .ct-reassure {
        grid-template-columns: 1fr 1fr;  /* 2 x 2 */
    }
}

    .ct-reassure li {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.9rem 1rem;
        border-radius: var(--ct-radius);
        background: var(--ct-accent-tint);
        color: var(--ct-text);
        line-height: 1.45;
    }

    .ct-reassure li:nth-child(2) { background: var(--ct-highlight-tint); }
    .ct-reassure li:nth-child(3) { background: var(--ct-coral-tint); }

    .ct-reassure strong {
        color: var(--ct-ink);
    }

.ct-reassure-icon {
    flex: none;
    font-size: 1.6rem;
    color: var(--ct-accent);
}

/* "Handy to have ready" - tucked away in an expandable box so the start isn't a wall of text */
.ct-before-start {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--ct-line);
    border-radius: var(--ct-radius);
}

    .ct-before-start summary {
        min-height: 28px;
        font-weight: 700;
        color: var(--ct-ink);
        cursor: pointer;
    }

/* A little "?" in the intro text, matching the help buttons */
.ct-tip-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    height: 1.35em;
    border: 2px solid var(--ct-accent);
    border-radius: 50%;
    color: var(--ct-accent);
    font-weight: 800;
    font-size: 0.85em;
    line-height: 1;
    vertical-align: text-bottom;
}

/* Step-by-step: progress line, "Done" ticks and the "Next" buttons */
.ct-step-progress {
    font-weight: 700;
    color: var(--ct-ink);
}

.ct-progress-summary {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
}

.ct-current-step {
    color: var(--ct-ink);
    font-weight: 700;
}

.ct-progress-track {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 0.6rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ct-accent-tint);
}

.ct-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--ct-accent);
    transition: width 180ms ease;
}

.ct-form-section {
    scroll-margin-top: 110px;            /* clear the sticky header when moving to the next step */
}

.ct-step-done {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.25rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--ct-accent-tint);
    color: var(--ct-accent-dark);        /* 9.9:1 on the green tint */
    font-family: var(--ct-font-body);
    font-size: 0.85rem;
    font-weight: 700;
}

    .ct-step-done .material-icons {
        font-size: 1.05rem;
    }

    .ct-step-done[hidden] {
        display: none;
    }

.ct-step-next {
    margin-top: 1.5rem;
}

/* Collapsible sections: the script in Apply.aspx puts each heading's text inside this button */
.ct-form-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.25rem 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .ct-form-toggle:hover {
        color: var(--ct-accent);
    }

/* Arrow on the right: points down when open, right when closed */
.ct-form-arrow {
    flex: none;
    margin-left: auto;
    margin-right: 0.5rem;
    width: 0.7rem;
    height: 0.7rem;
    border: solid currentColor;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.ct-form-section.is-closed .ct-form-arrow {
    transform: rotate(-45deg);
}

.ct-form-section.is-closed {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

    .ct-form-section.is-closed .ct-form-title {
        margin-bottom: 0;
    }

/* "Open all / Close all" line above the form */
.ct-form-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 1rem;
    margin-bottom: 0.5rem;
}

.ct-form-controls-buttons {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 575.98px) {
    .ct-form-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-progress-summary,
    .ct-progress-track,
    .ct-form-controls-buttons {
        grid-column: 1;
    }

    .ct-progress-track {
        grid-row: 2;
    }

    .ct-form-controls-buttons {
        grid-row: 3;
        justify-content: flex-start;
    }
}

    .ct-form-controls .btn {
        min-height: 44px;
        font-size: 0.95rem;
    }

/* The "Send my application" button, below the last section */
.ct-form-send {
    border-top: 1px solid var(--ct-line);
    margin-top: 2rem;
    padding-top: 2rem;
}

.ct-form-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--ct-accent);
    color: #ffffff;                      /* white on green = 7.6:1 */
    font-size: 1.1rem;
}

.ct-field {
    margin-bottom: 1.5rem;
}

.ct-label {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ct-ink);
    margin-bottom: 0.35rem;
}

.ct-optional {
    font-style: normal;
    font-weight: 400;
    color: var(--ct-muted);
}

.ct-hint {
    color: var(--ct-muted);              /* 5.8:1 on white */
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

/* Text boxes and drop-downs: 16px text (stops iPhones zooming in), big enough to tap,
   and a border dark enough to see (3.3:1 on white) */
.ct-form-section .form-control {
    font-size: 1rem;
    min-height: 48px;
    padding: 0.6rem 0.85rem;
    border: 2px solid #868e9a;
    border-radius: 10px;
    color: var(--ct-ink);
    background-color: #ffffff;
}

    .ct-form-section .form-control:focus {
        border-color: var(--ct-accent);
        box-shadow: none;
    }

    .ct-form-section .form-control[aria-invalid="true"] {
        border-color: var(--ct-coral-dark);
    }

.ct-form-section .custom-select {
    height: auto;
    padding-right: 2.25rem;
}

/* "Find your address" (Google address search) - a soft green box above the address fields */
.ct-address-search {
    background: var(--ct-accent-tint);
    border-radius: var(--ct-radius);
    padding: 1.25rem 1.5rem;
}

    /* Google's search box (a web component) - full width, light colours to match the form */
    .ct-address-search gmp-place-autocomplete {
        display: block;
        width: 100%;
        color-scheme: light;
    }

.ct-address-status:empty {
    display: none;
}

.ct-address-status {
    margin: 0.75rem 0 0;
    font-weight: 700;
    color: var(--ct-accent-dark);        /* 9.9:1 on the green tint */
}

.ct-address-credit {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

/* Help notes ("?" buttons next to questions - built by js/apply-form.js from data-tip="...") */
.ct-label-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

    .ct-label-row .ct-label {
        margin-bottom: 0;
    }

legend.ct-has-tip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ct-tip-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;                         /* 28px circle; at least 24px to tap (WCAG 2.5.8) */
    height: 28px;
    padding: 0;
    border: 2px solid var(--ct-accent);
    border-radius: 50%;
    background: #ffffff;
    color: var(--ct-accent);             /* 7.6:1 on white */
    font-family: var(--ct-font-head);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

    .ct-tip-btn:hover,
    .ct-tip-btn[aria-expanded="true"] {
        background: var(--ct-accent);
        color: #ffffff;
    }

.ct-tip-note {
    position: relative;
    margin: 0.25rem 0 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--ct-highlight-tint);
    border-left: 5px solid var(--ct-highlight);
    color: var(--ct-ink);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Postcode check message (postcodes.io) under the postcode box */
.ct-postcode-status:empty {
    display: none;
}

.ct-postcode-status {
    margin: -0.75rem 0 1.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    border-left: 5px solid var(--ct-line);
    background: var(--ct-soft);
    color: var(--ct-ink);
    font-weight: 600;
}

    .ct-postcode-status.is-ok {
        border-left-color: var(--ct-accent);
        background: var(--ct-accent-tint);
    }

    .ct-postcode-status.is-info {
        border-left-color: var(--ct-highlight);
        background: var(--ct-highlight-tint);
    }

    .ct-postcode-status.is-warning {
        border-left-color: var(--ct-coral-dark);
        background: var(--ct-coral-tint);
    }

/* Date of birth: Day / Month / Year boxes side by side, sized for 2, 2 and 4 numbers */
.ct-date {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ct-date-label {
    display: block;
    font-weight: 600;
    color: var(--ct-ink);
    margin-bottom: 0.25rem;
}

.ct-form-section .ct-date-2 { width: 4.5rem; }
.ct-form-section .ct-date-4 { width: 6.5rem; }

/* Shorter boxes for short answers, so it's obvious what's expected */
.ct-input-short { max-width: 10rem; }
.ct-input-date { max-width: 14rem; }
.ct-input-medium { max-width: 18rem; }

/* Error message under a box. ASP.NET shows/hides it with an inline style, so the spacing is done with a
   block ::before (it only exists while the message is showing). */
.ct-field-error {
    color: var(--ct-coral-dark);         /* 5.9:1 on white */
    font-weight: 700;
}

    .ct-field-error::before {
        content: "";
        display: block;
        height: 0.35rem;
    }

/* "There's a problem" box at the top of the form */
.ct-error-summary {
    border: 3px solid var(--ct-coral-dark);
    border-radius: var(--ct-radius);
    background: var(--ct-coral-tint);
    color: var(--ct-ink);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    scroll-margin-top: 120px;            /* clear the sticky header when the page jumps here */
}

    .ct-error-summary ul {
        margin-bottom: 0;
        padding-left: 1.25rem;
    }

.ct-error-summary-title {
    font-family: var(--ct-font-head);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ct-ink);
    margin-bottom: 0.5rem;
}

/* Radio button choices (asp:RadioButtonList with RepeatLayout="UnorderedList") as big, easy-to-tap pills */
.ct-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .ct-options li {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding-left: 1rem;
        border: 2px solid var(--ct-line);
        border-radius: 999px;
    }

    .ct-options input {
        width: 1.2rem;
        height: 1.2rem;
        margin: 0;
        flex: none;
        accent-color: var(--ct-accent);
        cursor: pointer;
    }

    .ct-options label {
        margin: 0;
        padding: 0.6rem 1.1rem 0.6rem 0.6rem;
        font-weight: 600;
        color: var(--ct-ink);
        cursor: pointer;
    }

    .ct-options li:focus-within {
        outline: 3px solid var(--ct-accent);
        outline-offset: 2px;
    }

    /* Selected choice (.is-checked is added by the page script for browsers without :has()) */
    .ct-options li.is-checked {
        border-color: var(--ct-accent);
        background: var(--ct-accent-tint);
    }

    .ct-options li:has(input:checked) {
        border-color: var(--ct-accent);
        background: var(--ct-accent-tint);
    }

/* Extra boxes shown when someone is applying for a young person */
.ct-helper {
    background: var(--ct-highlight-tint);
    border-radius: var(--ct-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* Money boxes with a £ sign inside on the left */
.ct-money {
    position: relative;
    max-width: 12rem;
}

    .ct-money-prefix {
        position: absolute;
        left: 0.95rem;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 700;
        color: var(--ct-ink);
        pointer-events: none;
    }

    .ct-form-section .ct-money .form-control {
        padding-left: 1.9rem;
    }

/* Tick boxes in "Check and send" */
.ct-tick {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

    .ct-tick input[type="checkbox"] {
        width: 24px;                     /* at least 24px to tap (WCAG 2.5.8) */
        height: 24px;
        margin-top: 0.1rem;
        flex: none;
        accent-color: var(--ct-accent);
        cursor: pointer;
    }

    .ct-tick label {
        margin: 0;
        font-weight: 600;
        color: var(--ct-ink);
        cursor: pointer;
    }

/* Spam trap box - moved off screen so people never see it */
.ct-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Thank-you message after sending */
.ct-success {
    background: var(--ct-accent-tint);
    border-left: 8px solid var(--ct-accent);
    border-radius: var(--ct-radius);
    padding: 2rem;
}

.ct-reference {
    font-family: var(--ct-font-head);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--ct-ink);
    margin-bottom: 0.75rem;
}

@media (max-width: 575.98px) {
    .ct-form-title {
        font-size: 1.3rem;
    }

    .ct-success {
        padding: 1.5rem;
    }
}

/* Section anchors (#check, #steps ...) leave a little space above when jumped to */
[id] {
    scroll-margin-top: 1rem;
}

    .ct-callout h2 {
        font-family: var(--ct-font-head);
        color: var(--ct-ink);
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .ct-callout p {
        color: var(--ct-text);
    }

/* Key facts strip */
.ct-stats {
    background: #ffffff;
    border-top: 1px solid var(--ct-line);
    border-bottom: 1px solid var(--ct-line);
    padding: 2rem 0 1rem;
}

.ct-stat {
    margin-bottom: 1rem;
}

.ct-stat-number {
    display: block;
    font-family: var(--ct-font-head);
    color: var(--ct-accent);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* Alternate the big fact colours: green, coral, ink */
.ct-stat:nth-child(2) .ct-stat-number { color: var(--ct-coral-dark); }
.ct-stat:nth-child(3) .ct-stat-number { color: var(--ct-ink); }

.ct-stat-label {
    display: block;
    color: var(--ct-muted);
    font-size: 0.875rem;
}

.ct-band {
    background: var(--ct-soft);
    padding: 3.5rem 0 3rem;
}

/* =========================================================================================
   HOME PAGE COLOUR AND GRAPHICS (Index.aspx)
   Bold blocks of the three brand colours, wavy edges and "sticker" shadows, to match the header.
   Every text colour below has been checked against its background (notes give the contrast).
   ========================================================================================= */

/* 1. Key facts: four bold colour blocks with a slight playful tilt */
.ct-stats {
    border: 0;
    padding: 2.5rem 0 1.5rem;
}

    .ct-stats .ct-stat {
        margin-bottom: 1rem;
    }

    .ct-stats .ct-stat > span:not(.sr-only) {
        position: relative;              /* above the coloured block (::before) */
    }

.ct-stat {
    --stat-bg: var(--ct-accent);
}

    .ct-stats .ct-stat .ct-stat-number,
    .ct-stats .ct-stat .ct-stat-label {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .ct-stats .ct-stat::before {
        content: "";
        position: absolute;
        inset: 0 7.5px;                  /* inside the Bootstrap column gutters */
        border-radius: var(--ct-radius);
        background: var(--stat-bg);
        transform: rotate(-1.5deg);
        box-shadow: 0 6px 0 rgba(20, 22, 27, 0.12);
    }

    .ct-stats .ct-stat {
        position: relative;
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
    }

    /* Colours: green / white text 7.6:1, yellow / ink 12.5:1, coral / ink 4.9:1, ink / yellow 12.5:1 */
    .ct-stats .ct-stat:nth-child(1) { --stat-bg: var(--ct-accent); }
    .ct-stats .ct-stat:nth-child(2) { --stat-bg: var(--ct-highlight); }
    .ct-stats .ct-stat:nth-child(3) { --stat-bg: var(--ct-coral); }
    .ct-stats .ct-stat:nth-child(4) { --stat-bg: var(--ct-ink); }
    .ct-stats .ct-stat:nth-child(even)::before { transform: rotate(1.5deg); }

    .ct-stats .ct-stat:nth-child(1) .ct-stat-number,
    .ct-stats .ct-stat:nth-child(1) .ct-stat-label { color: #ffffff; }
    .ct-stats .ct-stat:nth-child(2) .ct-stat-number,
    .ct-stats .ct-stat:nth-child(2) .ct-stat-label,
    .ct-stats .ct-stat:nth-child(3) .ct-stat-number,
    .ct-stats .ct-stat:nth-child(3) .ct-stat-label { color: var(--ct-ink); }
    .ct-stats .ct-stat:nth-child(4) .ct-stat-number { color: var(--ct-highlight); }
    .ct-stats .ct-stat:nth-child(4) .ct-stat-label { color: #ffffff; }

    .ct-stats .ct-stat-label {
        font-weight: 600;
        font-size: 0.9rem;
    }

/* 2. "What could we help you with?" tiles: icons in white badges, and a little lift */
.ct-tile {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .ct-tile:hover {
        transform: translateY(-4px) rotate(-1deg);
        box-shadow: 0 8px 0 rgba(20, 22, 27, 0.08);
    }

    .ct-tile .material-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 50%;
        background: #ffffff;
        font-size: 1.9rem;
        box-shadow: 3px 3px 0 rgba(20, 22, 27, 0.08);
    }

/* 3. "How it works": deep green band with wavy top and bottom edges */
.ct-band-green {
    position: relative;
    background: var(--ct-accent);
    color: #ffffff;
    margin: 4rem 0;
    padding: 3rem 0 3.5rem;
}

    /* The waves are simple SVG shapes in the band's green, drawn just above and below it (decorative) */
    .ct-band-green::before,
    .ct-band-green::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 36px;
        background-repeat: repeat-x;
        background-size: 720px 36px;
        pointer-events: none;
    }

    .ct-band-green::before {
        top: -35px;
        /* the wave starts and ends at the same height, so it repeats seamlessly */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 36' preserveAspectRatio='none'%3E%3Cpath d='M0 18 C180 0 180 0 360 18 S540 36 720 18 V36 H0 Z' fill='%230b5d4b'/%3E%3C/svg%3E");
    }

    .ct-band-green::after {
        bottom: -35px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 36' preserveAspectRatio='none'%3E%3Cpath d='M0 18 C180 36 180 36 360 18 S540 0 720 18 V0 H0 Z' fill='%230b5d4b'/%3E%3C/svg%3E");
    }

    .ct-band-green .ct-heading,
    .ct-band-green .ct-subheading {
        color: #ffffff;                  /* white on green = 7.6:1 */
    }

    .ct-band-green p {
        color: rgba(255, 255, 255, 0.92);
    }

    /* Links in the band: white and underlined (green links would vanish on the green) */
    .ct-band-green a:not(.btn),
    .ct-band-green a:not(.btn):hover {
        color: #ffffff;
        text-decoration: underline;
        text-decoration-color: var(--ct-highlight);
        text-decoration-thickness: 2px;
    }

    /* Big yellow step numbers, joined by a dashed line on wider screens */
    .ct-band-green .ct-steps {
        position: relative;
    }

    .ct-band-green .ct-step-number {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.6rem;
        background: var(--ct-highlight);   /* ink on yellow = 12.5:1 */
        color: var(--ct-ink);
        box-shadow: 4px 4px 0 var(--ct-accent-dark);
        position: relative;
        z-index: 1;
    }

@media (min-width: 768px) {
    .ct-band-green .ct-steps::before {
        content: "";
        position: absolute;
        top: 1.75rem;                    /* through the middle of the numbers */
        left: 2rem;
        right: 33%;
        border-top: 3px dashed rgba(255, 255, 255, 0.45);
    }
}

    /* Yellow button on the green band (ink on yellow = 12.5:1) */
    .ct-band-green .btn-ct {
        background: var(--ct-highlight);
        border-color: var(--ct-highlight);
        color: var(--ct-ink);
        box-shadow: 0 4px 0 #c9a21a;
    }

        .ct-band-green .btn-ct:hover,
        .ct-band-green .btn-ct:focus {
            background: #ffe27a;
            border-color: #ffe27a;
            color: var(--ct-ink);
        }

    .ct-band-green .ct-mark {
        color: var(--ct-ink) !important;
    }

/* 4. "Who we are" photos: chunky offset frame in yellow / coral behind each photo */
.ct-photo-frame {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ct-radius);
    box-shadow: 12px 12px 0 var(--ct-highlight);
    margin-bottom: 1.75rem;
    transform: rotate(-1deg);
}

.ct-photo-frame-coral {
    box-shadow: -12px 12px 0 var(--ct-coral);
    transform: rotate(1deg);
}

/* 6. Cartoon illustrations (images/illustrations/*.svg - drawn for this site, so free to use).
      Decorative only (alt=""), and hidden on small screens where there isn't room. Not used on Apply.aspx. */
.ct-art-host {
    position: relative;
}

.ct-art {
    position: absolute;
    pointer-events: none;
    user-select: none;
    display: none;                       /* shown from tablet width up (below) */
}

@media (min-width: 768px) {
    .ct-art { display: block; }

    /* football beside "What could we help you with?" */
    .ct-art-football {
        right: 15px;
        top: -18px;
        width: 92px;
        height: auto;
        transform: rotate(-12deg);
    }

    /* school beside "Who we are" */
    .ct-art-school {
        right: 15px;
        top: -34px;
        width: 170px;
        height: auto;
    }

    .ct-text-narrow {
        max-width: 62ch;
    }
}

/* two trees standing on the bottom wave of "How it works" (needs the room on wide screens) */
@media (min-width: 992px) {
    .ct-art-tree {
        right: 3%;
        bottom: -14px;
        width: 110px;
        height: auto;
        z-index: 1;
    }

    .ct-art-tree-small {
        right: calc(3% + 95px);
        bottom: -12px;
        width: 72px;
        height: auto;
        z-index: 1;
    }
}

/* Page banners on every page except Apply: a little hill with a tree, a school and a football.
   Add class="ct-banner-plain" to a page's banner to leave it out. */
@media (min-width: 768px) {
    .ct-page-banner:not(.ct-banner-plain) .container::after {
        content: "";
        position: absolute;
        right: 200px;
        bottom: -48px;                   /* sits on the bottom edge of the banner */
        width: 290px;
        height: 122px;
        background: url("../images/illustrations/banner-scene.svg") no-repeat center bottom / contain;
        pointer-events: none;
    }
}

/* 5. "Not sure if you can apply?" box: decorative circles like the page banners */
.ct-callout-fun {
    position: relative;
    overflow: hidden;
}

    .ct-callout-fun::before,
    .ct-callout-fun::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .ct-callout-fun::before {
        width: 180px;
        height: 180px;
        right: -50px;
        top: -70px;
        background: var(--ct-coral);
        opacity: 0.85;
    }

    .ct-callout-fun::after {
        width: 90px;
        height: 90px;
        right: 120px;
        bottom: -55px;
        background: var(--ct-accent);
        opacity: 0.85;
    }

    .ct-callout-fun > .row {
        position: relative;
        z-index: 1;
    }

@media (max-width: 767.98px) {
    .ct-callout-fun::before { width: 120px; height: 120px; right: -40px; top: -50px; }
    .ct-callout-fun::after { display: none; }
}

/* FAQ */
#faq .card {
    border: 0;
    border-bottom: 1px solid var(--ct-line);
    border-radius: 0;
}

#faq .card-header {
    background: transparent;
    border: 0;
    padding: 0.5rem 0;
}

#faq .btn-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 44px;
    color: var(--ct-ink);
    font-weight: 600;
    white-space: normal;
    padding-left: 0;
    padding-right: 0;
    text-decoration: none;
}

    #faq .btn-link:hover {
        color: var(--ct-accent);
    }

    /* Arrow on the right of each question: points right when closed, down when open.
       It follows the button's aria-expanded (which Bootstrap updates and screen readers announce as
       "collapsed" / "expanded"), so what people see always matches what screen readers say.
       It's drawn with CSS borders, so screen readers don't read it out. Same arrow as the form on Apply.aspx. */
    #faq .btn-link::after {
        content: "";
        flex: none;
        width: 0.65rem;
        height: 0.65rem;
        margin-right: 0.5rem;
        border: solid currentColor;
        border-width: 0 3px 3px 0;
        transform: rotate(-45deg);
        transition: transform 0.2s ease;
    }

    #faq .btn-link[aria-expanded="true"]::after {
        transform: rotate(45deg);
    }

#faq .card-body {
    padding: 0 0 1rem;
}

/* Simple, minimal table (used for the mailing list on Contact Us) */
.ct-table {
    color: var(--ct-text);
    font-size: 0.95rem;
}

    .ct-table thead th {
        color: var(--ct-ink);
        font-weight: 600;
        border-top: 0;
        border-bottom: 2px solid var(--ct-ink);
        white-space: nowrap;
    }

    /* Row headers (first cell of each row in the figures tables) look like normal text */
    .ct-table tbody th {
        color: var(--ct-text);
        font-weight: 400;
        border-top: 1px solid var(--ct-line);
        vertical-align: top;
    }

    .ct-table td {
        border-top: 1px solid var(--ct-line);
        vertical-align: top;
    }

.ct-muted {
    color: var(--ct-muted) !important;
    font-style: italic;
}

.ct-placeholder {
    background: #fff8e1;
    border: 1px dashed #c9a227;
    color: #6b5500;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.95rem;
}

/* ---------- Footer ---------- */

.ftco-footer.ftco-bg-dark {
    background: var(--ct-ink) !important;
    border-top: 8px solid var(--ct-highlight);
}

.ftco-footer .ftco-heading-2 {
    font-family: var(--ct-font-head);
    color: var(--ct-highlight);           /* yellow on ink = 12.5:1 */
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ftco-footer p,
.ftco-footer a {
    color: rgba(255, 255, 255, 0.75);
}

    .ftco-footer a:hover {
        color: #ffffff;
    }

/* ---------- Welcome pop-up (Site1.Master + js/welcome-popup.js) ----------
   White card with the header's three-colour stripe, the tilted "CT" sticker badge,
   playful corner circles like the page banners, and quick-link tiles in green / yellow / coral. */

.ct-welcome {
    position: fixed;
    width: calc(100% - 32px);            /* 16px gap either side on phones */
    max-width: 480px;
    max-height: calc(100% - 32px);
    overflow: hidden auto;
    margin: auto;
    padding: 2.25rem 1.75rem 1.5rem;
    border: 0;
    border-radius: var(--ct-radius);
    background: #ffffff;
    color: var(--ct-text);
    box-shadow: 10px 10px 0 var(--ct-highlight), 0 20px 50px rgba(20, 22, 27, 0.3);
}

    .ct-welcome[open] {
        animation: ct-welcome-in 0.35s cubic-bezier(.34, 1.56, .64, 1);
    }

    .ct-welcome::backdrop {
        background: rgba(20, 22, 27, 0.6);
    }

    /* Three-colour stripe along the top, same as the header */
    .ct-welcome::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: linear-gradient(90deg,
            var(--ct-accent) 0 33.33%,
            var(--ct-highlight) 33.33% 66.66%,
            var(--ct-coral) 66.66% 100%);
    }

    /* Coral circle peeking in at the top-right corner (decorative) */
    .ct-welcome::after {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        right: -60px;
        top: -70px;
        border-radius: 50%;
        background: var(--ct-coral-tint);
        pointer-events: none;
    }

    .ct-welcome > * {
        position: relative;
        z-index: 1;                      /* above the decorative circle */
    }

@keyframes ct-welcome-in {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

/* Stop the page behind scrolling while the pop-up is open */
body.ct-welcome-open {
    overflow: hidden;
}

.ct-welcome-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--ct-line);
    border-radius: 50%;
    background: #ffffff;
    color: var(--ct-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.2s ease;
}

    .ct-welcome-close:hover {
        border-color: var(--ct-ink);
        transform: rotate(90deg);
    }

.ct-welcome-badge {
    margin-bottom: 1.1rem;
}

.ct-welcome-title {
    font-family: var(--ct-font-head);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ct-ink);
    margin: 0 0 0.5rem;
    padding-right: 2.5rem;               /* keep clear of the close button */
}

.ct-welcome-text {
    font-size: 1.05rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

/* Quick links: 2 x 2 tiles */
.ct-welcome-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

    .ct-welcome-links a {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        height: 100%;
        min-height: 44px;
        padding: 1rem;
        border-radius: var(--ct-radius);
        background: var(--ct-accent-tint);
        color: var(--ct-ink);
        font-family: var(--ct-font-head);
        font-weight: 700;
        font-size: 1.05rem;
        line-height: 1.25;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .ct-welcome-links a:hover {
            color: var(--ct-ink);
            transform: translateY(-3px) rotate(-1deg);
            box-shadow: 0 6px 0 rgba(20, 22, 27, 0.08);
        }

    /* Icons in white circles, like the home page tiles */
    .ct-welcome-links .material-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        background: #ffffff;
        color: var(--ct-accent);
        font-size: 1.6rem;
        box-shadow: 3px 3px 0 rgba(20, 22, 27, 0.08);
    }

    /* Cycle green, yellow, coral - then solid green for the main "Apply" action (white on green = 7.6:1) */
    .ct-welcome-links li:nth-child(2) a { background: var(--ct-highlight-tint); }
    .ct-welcome-links li:nth-child(2) .material-icons { color: var(--ct-ink); }
    .ct-welcome-links li:nth-child(3) a { background: var(--ct-accent); color: #ffffff; }
    .ct-welcome-links li:nth-child(3) a:hover { color: #ffffff; }
    .ct-welcome-links li:nth-child(4) a { background: var(--ct-coral-tint); }
    .ct-welcome-links li:nth-child(4) .material-icons { color: var(--ct-coral-dark); }

.ct-welcome-skip {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem;
    border: 0;
    background: none;
    color: var(--ct-muted);              /* 5.8:1 on white */
    font-family: var(--ct-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

    .ct-welcome-skip:hover {
        color: var(--ct-ink);
    }

@media (max-width: 399.98px) {
    .ct-welcome {
        padding: 2rem 1.1rem 1rem;
    }

    .ct-welcome-title {
        font-size: 1.6rem;
    }

    .ct-welcome-links a {
        padding: 0.8rem;
        font-size: 0.95rem;
    }
}

/* =========================================================================================
   ACCESSIBILITY (WCAG 2.2 AA)
   ========================================================================================= */

/* "Skip to main content" link - off-screen until it receives keyboard focus */
.ct-skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 10000;
    background: var(--ct-ink);
    color: #ffffff !important;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}

    .ct-skip-link:focus {
        top: 1rem;
    }

/* The <main> element gets focus from the skip link - no outline needed on the whole area */
#main-content:focus {
    outline: none;
}

/* Clear, consistent focus outline for keyboard users on every link, button and form field */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--ct-accent) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px #ffffff !important;
}

.ftco-footer a:focus-visible,
.ct-page-banner a:focus-visible,
.ct-band-green a:focus-visible,
.ct-band-green button:focus-visible,
.ct-slider-wrap a:focus-visible,
.ct-slider-wrap button:focus-visible {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 5px var(--ct-ink) !important;
}

/* Links inside text are underlined, so they don't rely on colour alone (WCAG 1.4.1) */
main a:not(.btn),
.ftco-footer a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Current page in the menu (set with aria-current by the script in Site1.Master) */
.ct-nav-link[aria-current="page"] {
    color: var(--ct-ink) !important;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--ct-coral);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* Slider wrapper, pause/play button, and bigger dot targets (at least 24px - WCAG 2.5.8) */
.ct-slider-wrap {
    position: relative;
}

.ct-slider-toggle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;   /* above the slides, but below the sticky menu bar (z-index 3) */
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    background: rgba(16, 18, 22, 0.75);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

    .ct-slider-toggle .material-icons {
        font-size: 1.2rem;
    }

.owl-carousel.home-slider.ct-slider .owl-dots .owl-dot {
    width: 24px;
    height: 24px;
    margin: 4px;
    background: transparent !important;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .owl-carousel.home-slider.ct-slider .owl-dots .owl-dot span {
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(16, 18, 22, 0.4);
    }

    .owl-carousel.home-slider.ct-slider .owl-dots .owl-dot.active span {
        background: #ffffff;
    }

/* Admin "Edit" / "Add Record +" buttons (real buttons so they work with the keyboard) */
.ct-edit-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ct-accent) !important;
    padding: 0.25rem 0;
    text-decoration: underline;
}

/* Respect the visitor's "reduce motion" setting: no animations or smooth scrolling */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Template "fade in on scroll" elements are shown straight away */
    .ftco-animate {
        opacity: 1 !important;
        visibility: visible !important;
    }
}