:root {
    --color-primary: #4a7c8c;
    --color-primary-dark: #3a5a6a;
    --color-accent: #7bbf8f;
    --color-light: #f8f9fa;
    --color-dark: #2d3436;
    --color-text: #555555;
    --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --max-width: 1100px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-light);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== Layout containers ===== */
.container {
    width: min(90%, var(--max-width));
    margin-inline: auto;
    padding-block: 1.5rem;
}

/* ===== Header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-primary);
    color: var(--color-light);
    /* Shadow is raised only once the page is scrolled (.is-scrolled), added by
       active-nav.js. At rest the header sits flat against the hero. */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

.logo:hover {
    opacity: 0.8;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.nav-list a {
    color: var(--color-light);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
}

.nav-list a:hover {
    opacity: 0.8;
}

.nav-list a.active {
    text-decoration: underline;
}

/* ===== Mobile nav toggle ===== */
/* Hidden on desktop, where the nav list is always visible. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Three bars drawn from one element, so animating to an "X" needs no extra
   markup and no icon font. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before {
    top: -7px;
}

.nav-toggle-bars::after {
    top: 7px;
}

/* Open state: the three bars collapse into an X. */
.site-header.nav-open .nav-toggle-bars {
    background-color: transparent;
}

.site-header.nav-open .nav-toggle-bars::before {
    transform: translateY(7px) rotate(45deg);
}

.site-header.nav-open .nav-toggle-bars::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== Scroll progress ===== */
/* Decorative reading-position indicator along the header's bottom edge.
   Absolutely positioned so it never adds height to the sticky header. */
.scroll-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
}

.scroll-progress-bar {
    width: 100%;
    height: 100%;
    background-color: var(--color-accent);
    /* Transform-only so the animation stays on the compositor and never
       triggers layout. Driven by active-nav.js. */
    transform: scaleX(0);
    transform-origin: left center;
}

/* ===== Main ===== */
.site-main {
    flex: 1;
}

/* ===== Hero ===== */
.hero {
    background: linear-gradient(rgba(74, 124, 140, 0.8), rgba(74, 124, 140, 0.85)),
                url('../images/hero-bg.jpg') center/cover no-repeat;
    color: var(--color-light);
    text-align: center;
    padding-block: 5rem 3rem;
}

.hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.1rem;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.hero .btn {
    margin-top: 0.5rem;
}

.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-dark);
}

.btn-primary:hover {
    background-color: #6bb07b;
    opacity: 0.9;
}

/* ===== Sections ===== */
.services,
.about {
    padding-block: 3rem 2rem;
}

.services h2,
.about h2 {
    color: var(--color-primary-dark);
    text-align: center;
    margin-bottom: 0.5rem;
}

.section-intro {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.about-content {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    justify-content: center;
}

.about .headshot {
    width: 240px;
    height: 280px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.about-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 550px;
}

/* Areas of focus, shown as four category tiles. The specific concerns each
   covers are named in full in the About section rather than repeated here, so
   the page states them once between them. */
.service-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.5rem;
    margin-top: 2.25rem;
}

.service-group-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    text-align: center;
    margin: 0;
    /* Sized and filled so four bare headings read as deliberate tiles rather
       than as a list that failed to populate. */
    background-color: #fff;
    border-radius: 8px;
    border-top: 3px solid var(--color-primary);
    padding: 1.5rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ===== Reveal on scroll =====
   The hidden state is scoped to .js-reveal, a class that reveal.js adds to
   <html> itself. If the script never runs, no rule here matches and the
   content is simply visible -- a script failure must never blank the page. */
.js-reveal .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ===== Footer ===== */
.site-footer {
    background-color: var(--color-primary-dark);
    color: var(--color-light);
    text-align: center;
    padding-block: 1.5rem;
    font-size: 0.9rem;
}

.footer-contact {
    margin-bottom: 0.5rem;
}

/* Crisis line sits last in the footer, deliberately unemphasised: same size and
   colour as the rest of the small print, separated only by some space. No
   colour change and no link -- drawing attention to it is the thing to avoid. */
.footer-crisis {
    margin-top: 1rem;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    /* Logo and toggle share the first row; the nav wraps onto its own row and
       collapses to zero height until the toggle opens it. */
    .site-header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0;
        padding-block: 0.5rem;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .main-nav {
        width: 100%;
        max-height: 0;
        overflow: hidden;
        /* visibility (not just opacity) takes the collapsed menu out of the tab
           order and out of the accessibility tree while it is closed. */
        visibility: hidden;
        opacity: 0;
        /* Deliberately no max-height transition here. Collapsing is instant on
           purpose: choosing a link closes the menu and starts a smooth scroll
           at the same moment, and an animated collapse would shift the page
           by the header's height mid-flight and land the target off-screen.
           Only the opening state below animates. */
        transition: opacity 0.25s ease, visibility 0s linear 0.3s;
    }

    .site-header.nav-open .main-nav {
        max-height: 12rem;
        visibility: visible;
        opacity: 1;
        transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0s;
    }

    .nav-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        padding-block: 1rem;
    }

    .hero {
        padding-block: 3rem 2rem;
    }

    .about-content {
        flex-direction: column;
        align-items: center;
    }

    .about .headshot {
        width: 170px;
        height: 200px;
    }

    .map-wrapper iframe {
        height: 200px;
    }
}

/* ===== Contact page ===== */
.contact {
    padding-block: 3rem 2rem;
}

.contact h2 {
    color: var(--color-primary-dark);
    text-align: center;
    margin-bottom: 0.5rem;
}

.contact .contact-details {
    text-align: center;
    max-width: 540px;
    margin-inline: auto;
}

.contact .contact-details p {
    margin-bottom: 0.5rem;
}

/* ===== Map ===== */
.map-wrapper {
    max-width: 540px;
    margin-inline: auto;
    margin-top: 2rem;
    border-radius: 8px;
    overflow: hidden;
}

.map-wrapper iframe {
    width: 100%;
    height: 300px;
    border: 0;
    display: block;
}

/* ===== Contact form ===== */
.contact-form {
    max-width: 540px;
    margin: 2rem auto 0;
}

.contact-form h2 {
    color: var(--color-primary-dark);
    text-align: center;
    margin-bottom: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.form-field label {
    text-align: left;
    font-weight: 500;
    color: var(--color-dark);
    font-size: 0.9rem;
}

.form-field input,
.form-field textarea {
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    background-color: var(--color-light);
    transition: border-color 0.2s;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(74, 124, 140, 0.2);
}

.form-field textarea {
    resize: vertical;
}

.contact-form .btn {
    width: 100%;
}

@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}