@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap');

:root {
    --primary-color: #006ee6; /* Slightly deeper blue for stronger blue presence */
    --secondary-color: #28a745;
    --background-color: #d9f2ff; /* a touch more blue in the page background */
    --text-color: #343a40;
    --heading-color: #212529;
    --container-max-width: 1200px;
    --spacing-unit: 1.5rem;
    --base-font-size: 16px;
    --breakpoint-md: 768px;

    /* Availability Indicator Colors */
    --availability-available: var(--secondary-color); /* Green for available */
    --availability-booked: #fd7e14; /* Orange for fully booked */
    --availability-unavailable: #dc3545; /* Red for unavailable */

    /* Qualification Item Colors */
    --qualification-bg: rgba(40, 167, 69, 0.1); /* Subtle green background */
    --qualification-border: rgba(40, 167, 69, 0.4); /* Slightly stronger green border */
    --qualification-text: var(--secondary-color); /* Green text */
    --qualification-icon-color: var(--secondary-color); /* Green for icons */

    /* Typewriter Colors */
    --typewriter-text-color: #ff6b6b; /* Color for typewriter text */
    --typewriter-cursor-color: #ff6b6b; /* Color for the blinking cursor */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-size: var(--base-font-size);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive Utility Classes */
.hide-mobile { 
    display: block; 
}
.hide-desktop { 
    display: none; 
}

*, *::before, *::after {
    box-sizing: inherit;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: var(--heading-color);
    line-height: 1.2;
    margin-bottom: var(--spacing-unit);
}

h1 { 
    font-size: 2.5rem; 
}
h2 { 
    font-size: 2rem; 
}
h3 { 
    font-size: 1.75rem; 
}

p {
    margin-bottom: var(--spacing-unit);
    font-size: var(--base-font-size);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Ensure all body-level text (paragraphs, list items, labels, inputs, buttons, textarea, selects, inline spans and anchors used as body content)
   use Inter and the same base font size so body-copy is consistent across pages. Headings (h1,h2,h3) remain Playfair Display. */
p, li, label, input, textarea, select, button, .testimonial-text, .testimonial-author, .footer-credentials span, span, a.body-link {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--base-font-size);
    line-height: 1.45;
}

/* Make form controls inherit size & family where inline styles might not have set them explicitly */
input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
}

ul {
    list-style: disc;
    margin-bottom: var(--spacing-unit);
    padding-left: var(--spacing-unit);
}

li {
    margin-bottom: 0.5rem;
    font-size: var(--base-font-size);
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

section {
    padding: calc(var(--spacing-unit) * 3) 0;
    position: relative;
    z-index: 0;
}

/* Fading Effect: subtle, low-contrast blue wash that reads as white with a faint blue tint */
#about,
.experience,
.contact,
.hero {
    background: linear-gradient(to bottom, rgba(8,88,166,0.06) 0%, white 100%);
}

/* Header */
.site-header {
    background-color: var(--primary-color);
    color: white;
    /* reduced padding to make header skinnier */
    padding: 0.6rem 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

    /* Smooth hide/show when scrolling */
    transform: translateY(0);
    transition: transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease;
    will-change: transform, opacity;
}

/* Hidden state applied via JS while scrolling down */
.site-header.hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}

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

.site-logo {
    display: flex;
    align-items: center;
}

.site-logo img {
    /* smaller logo height to reduce overall header height */
    height: 60px;
    width: auto;
    margin-right: calc(var(--spacing-unit) * 0.6);
}

/* Hero logo centering (animation removed) */
.hero-top {
    text-align: center;
    margin-bottom: 0.6rem;
}
.hero-logo {
    max-width: 280px;
    width: 40%;
    height: auto;
    display: block;
    margin: 0 auto 0.6rem auto;
    will-change: transform;
    /* animation removed to keep logo static */
}

/* Slightly smaller on small screens for consistent layout */
@media (max-width: 900px) {
    .hero-logo { width: 220px; }
}
@media (max-width: 600px) {
    .hero-logo { width: 160px; }
}

/* Text blocks directly under logo aligned and tightened */
.hero-top-text .hero-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; /* ensure Playfair for hero title */
    font-size: 34px; /* adjusted hero title size to user request */
    font-weight: 700; /* bold */
    margin: 0 0 0.9rem 0; /* extra space between title and subtitle */
    color: var(--heading-color);
    line-height: 1.05;
    white-space: normal; /* allow wrapping */
    max-width: 640px; /* constrain width so it naturally breaks to two lines */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Ensure supporting hero copy uses Inter (body font) for consistent body typography */
.hero-top-text .hero-subtext,
.hero-top-text p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    color: var(--text-color);
    margin: 0 0 0.8rem 0;
    line-height: 1.45;
}

/* Slightly scale down on very small screens to keep layout tidy */
@media (max-width: 400px) {
    .hero-top-text .hero-title {
        font-size: 1.15rem;
    }
}
.hero-top-text .hero-subtext {
    font-size: 16px;
    margin: 0 0 0.8rem 0;
    color: var(--text-color);
}





/* Default Nav: Desktop horizontal menu */
.site-nav {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    color: white;
    padding-top: 0;
    box-shadow: none;
    transform: none;
    transition: none;
    z-index: auto;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure pointer-events and stacking context for nav links globally */
.site-nav a {
    display: inline-block;
    color: white;
    padding: 0.5rem 0;
    font-size: var(--base-font-size);
    text-decoration: none;
    position: relative;
    z-index: 10000;
    pointer-events: auto;
}

.site-nav ul,
.site-nav li {
    pointer-events: auto;
}

.site-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-unit);
}

.site-nav li {
    border-bottom: none;
    margin-bottom: 0;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.site-nav a:hover {
     background-color: transparent;
     text-decoration: none;
}

.site-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: white;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.site-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Hamburger */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    margin-left: auto;
    padding: 0.6rem 0.8rem;
    z-index: 210;
}

.menu-toggle .hamburger {
    display: inline-block;
    width: 22px;
    height: 2.25px;
    background: white;
    border-radius: 2px;
    position: relative;
    transition: background 0.25s;
}
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
    content: '';
    display: block;
    position: absolute;
    width: 22px;
    height: 2.25px;
    background: white;
    border-radius: 2px;
    transition: 0.3s;
}
.menu-toggle .hamburger::before {
    top: -7px;
}
.menu-toggle .hamburger::after {
    top: 7px;
}
.menu-toggle.active .hamburger {
    background: transparent;
}
.menu-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}
.menu-toggle.active .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}

/* --- Responsive Navigation Hamburger --- */
@media (max-width: 991px) {
    .menu-toggle {
        display: block;
    }
    /* Keep header items on a single row on mobile so logo stays left and menu toggle stays right */
    .header-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .site-logo {
        margin-right: 0;
        display: flex;
        align-items: center;
    }
    /* MOBILE NAVIGATION PANEL (unchanged behavior) */
    .site-nav {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: var(--primary-color);
        flex-direction: column;
        padding-top: 100px;
        box-shadow: 3px 0 24px rgba(0,0,0,0.15);
        transform: translateY(-110%);
        transition: transform 0.35s cubic-bezier(0.52,0,0.18,1);
        z-index: 9999;
        align-items: flex-start;
        justify-content: flex-start;
        pointer-events: auto !important;
    }
    .site-nav.open {
        transform: translateY(0);
        pointer-events: auto !important;
    }
    /* Ensure menu item text is pure white in the opened mobile nav, overriding any inherited or theme colours.
       This forces link text, nested inline elements and SVG fills to white when the mobile nav overlay is open.
       Also explicitly cover hover, focus and active states to guarantee white color across interactions on mobile. */
    .site-nav.open a,
    body.nav-open .site-nav.open a,
    .site-nav.open a:visited,
    body.nav-open .site-nav.open a:visited,
    .site-nav.open a *,
    body.nav-open .site-nav.open a * {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important; /* Safari/TextFill override */
        fill: #ffffff !important; /* covers inline SVG icons */
        stroke: #ffffff !important;
        opacity: 1 !important;
    }
    /* Explicitly force interactive states to white as well (hover, focus, active) */
    .site-nav.open a:hover,
    .site-nav.open a:focus,
    .site-nav.open a:active,
    body.nav-open .site-nav.open a:hover,
    body.nav-open .site-nav.open a:focus,
    body.nav-open .site-nav.open a:active,
    .site-nav.open a:hover *,
    .site-nav.open a:focus *,
    .site-nav.open a:active *,
    body.nav-open .site-nav.open a:hover *,
    body.nav-open .site-nav.open a:focus *,
    body.nav-open .site-nav.open a:active * {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        fill: #ffffff !important;
        stroke: #ffffff !important;
        text-decoration: none !important;
        opacity: 1 !important;
    }
    .site-nav ul {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        padding-left: 0;
        pointer-events: auto;
        z-index: 10000;
    }
    .site-nav li {
        width: 100%;
        margin: 0;
        pointer-events: auto;
    }
    .site-nav a {
        display: block;
        width: 100%;
        padding: 1rem 2rem;
        font-size: 1.1rem;
        color: white;
        border-radius: 0;
        text-align: left;
        z-index: 10000;
        pointer-events: auto;
        position: relative;
    }
    .site-nav a::after {
        content: none;
    }

    /* Remove overlay/disable pointer events on background */
    body.nav-open::after {
        content: '';
        display: block;
        position: fixed;
        left: 0; top: 0; right: 0; bottom: 0;
        background: rgba(36,36,36,0.35);
        z-index: 9998;
        transition: background 0.16s;
        pointer-events: none !important;
    }
    .site-logo img {
        height: 55px;
        margin-right: 0.5rem;
    }
}

@media (max-width: 600px) {
    .site-logo img {
        height: 44px;
    }
    .site-header {
        padding: 0.75rem 0;
    }
    .site-nav {
        padding-top: 70px;
    }
    .site-nav a {
        padding: 0.9rem 1rem;
        font-size: 1rem;
    }
}

/* Hero Section */
.hero {
    /* keep a predominantly white background with a very subtle blue fade at the top */
    background: linear-gradient(to bottom, rgba(8,88,166,0.06) 0%, #ffffff 100%);
    padding-top: calc(var(--spacing-unit) * 3);
    padding-bottom: calc(var(--spacing-unit) * 3);
    position: relative;
    z-index: 1;
}

/* Comparison Grid: equal-height cards for Agency vs Independent */
.section-compare-heading {
    margin-top: 1.5rem; /* a clearer gap from previous content */
    margin-bottom: 0.6rem;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.comparison-card {
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 170px; /* keep cards visually consistent */
    gap: 0.6rem;
}

.card-title {
    font-weight: 800;
    color: var(--heading-color);
    font-size: 1rem;
    margin-bottom: 0.25rem;
    align-self: stretch;
}

.card-list {
    margin: 0;
    padding-left: 1.1rem; /* align list text under the title */
    font-size: 0.95rem;
    color: var(--text-color);
    flex: 1;
}

/* Make sure list items have consistent spacing */
.card-list li {
    margin-bottom: 0.45rem;
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    .comparison-card {
        min-height: auto;
    }
}
.hero .container {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}
.hero-content {
    flex: 1;
    min-width: 300px;
    position: relative;
    z-index: 2;
}
.hero-content h2 {
    color: var(--heading-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--spacing-unit);
}
.hero-content h2 strong {
    font-weight: bold;
}
.hero-content h2 .hero-subtitle {
    font-size: 0.8em;
    font-weight: normal;
    margin-top: 0.2em;
    opacity: 0.9;
}
.hero-content p {
    color: var(--text-color);
    position: relative;
    z-index: 2;
    font-size: var(--base-font-size);
}
.hero-image {
    flex: 1;
    min-width: 300px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.hero-image img {
    /* Force a fixed visual frame, crop the top and use cover to zoom/align */
    width: 100%;
    height: 420px;
    object-fit: cover;            /* crop and fill the frame */
    object-position: center 18%;  /* shift focus down to remove top of image */
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

/* Mobile-only inserted hero image: hidden by default and styled/shown on small screens */
.mobile-hero-insert {
    display: none;
}

/* Mobile-only LEGO image shown directly under the "Why Families Choose Independent Support" heading.
   Hidden by default (desktop) and revealed on small screens. Styling matches the existing .why-image img sizing
   for the mobile breakpoint so visual appearance is unchanged. */
.leo-mobile-img-placeholder { display: none; } /* fallback if needed */
.lego-mobile-img {
    display: none; /* keep hidden on desktop */
}

/* Reveal and size for small screens — matches .why-image img mobile sizing */
@media (max-width: 900px) {
    .lego-mobile-img {
        display: block;
        width: 100%;
        height: 260px; /* match mobile .why-image img height */
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
        margin: 0.75rem 0;
    }

    /* MOBILE-ONLY: Enforce Title → Image → Text → Button order for Hero section */
    .hero .container {
        display: flex;
        flex-direction: column; /* stack vertically */
    }
    /* Hero title wrapper first */
    .hero .hero-top { order: 1; }
    /* Mobile-only hero image inserted directly after the subtitle */
    .hero .mobile-hero-insert { order: 2; display: block; }
    /* Text block (paragraphs) next */
    .hero .hero-content > div[style*="display:flex; gap:1rem;"] { order: 3; }
    /* Make sure CTA button inside text block is visually after the text */
    .home .check-availability-btn { order: 4; }

    /* MOBILE-ONLY: Enforce Title → Image → Text → Button order for "Why Families Choose Independent Support" */
    .why-grid { display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch; }
    /* Keep heading first */
    .why-grid .why-text h2 { order: 1; display: block; }
    /* Show the mobile LEGO image directly under the title */
    .why-grid .lego-mobile-img { order: 2; display: block; }
    /* The paragraph content follows the image */
    .why-grid .why-text p#why-paragraph { order: 3; }
    /* Read-more / CTA button last */
    .why-grid #why-toggle { order: 4; align-self: flex-start; }

    /* Ensure internal stacking inside why-text is column */
    .why-grid .why-text { display: flex; flex-direction: column; gap: 0.6rem; }

    /* Hide the desktop two-column image on mobile so the mobile LEGO image is the only image shown,
       guaranteeing Title → Image → Text → CTA order without duplicate visuals. */
    .why-image { display: none; }
}

/* On small screens show the inserted image (keeping same visual styling/ratio) and hide the side hero image */
@media (max-width: 900px) {
    .mobile-hero-insert {
        display: block;
        width: 100%;
        height: 220px; /* match responsive hero-image sizing used elsewhere on mobile */
        object-fit: cover;
        object-position: center 18%;
        border-radius: 8px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        margin: 0.75rem 0;
    }

    /* hide original hero image column on mobile to avoid duplicate visuals while preserving desktop markup */
    .hero-image {
        display: none;
    }
}

/* Hover effect preserved but scaled subtly so zoom doesn't reflow layout */
.hero-image img:hover {
    transform: translateY(-4px) scale(1.02);
}

/* Responsive adjustments for the cropped / zoomed frame */
@media (max-width: 900px) {
    .hero-image img {
        height: 300px;
        object-position: center 20%;
    }
}
@media (max-width: 600px) {
    .hero-image img {
        height: 220px;
        object-position: center 22%;
    }
}

/* Experience Section */
.experience {
    /* match homepage subtle blue wash: faint blue to white gradient */
    background: linear-gradient(to bottom, rgba(8,88,166,0.06) 0%, #ffffff 100%);
    color: var(--text-color);
}
.experience h3, .experience h4 {
     color: var(--heading-color);
}
.experience p {
    color: var(--text-color);
}

/* Section Difference: two-column layout with image left, text right */
/* Add spacing above and below the whole section so it sits further from the previous section and next content */
.section-difference {
    margin-top: calc(var(--spacing-unit) * 2.5);   /* increased gap above to separate from the Why Families section */
    margin-bottom: calc(var(--spacing-unit) * 2);  /* existing gap below preserved */
}

/* Extra vertical gap specifically below the "How Support Works" section on the home page */
.section-how-support {
    margin-bottom: calc(var(--spacing-unit) * 2); /* reduced gap so footer sits closer to last content */
}

.diff-grid {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start; /* ensure both columns align to top edge */
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-top: 0.5rem;
}

/* Why section two-column layout: keep image on the left and text on the right on wide screens, preserve read-more */
.why-grid {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
}

/* Force image column to appear first (left) and text second (right) on wider screens */
.why-image { order: 0; }
.why-text  { order: 1; }

/* Ensure the image column balances visually with text: larger image and cropped cover */
.why-image img {
    width: 100%;
    height: 340px;
    max-width: 520px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* Hide the why-image container when collapsed (used with Read more toggle) */
.why-image.collapsed {
    display: none;
}

/* Keep text column readable and explicitly aligned with the top edge of the image on wider screens */
.why-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* top-align text column with the left image */
    align-items: flex-start;      /* ensure children start at the top/left */
    margin-top: 0;                /* remove any residual spacing that could push content down */
}

/* Responsive: on small screens enforce Image → Title → Text order for the Why Families section */
@media (max-width: 900px) {
    .why-grid {
        display: flex;
        flex-direction: column;
        gap: 0.18rem; /* very small, clean gap to match other sections */
        align-items: stretch;
    }

    /* Hide the desktop two-column image on mobile to avoid duplicate visuals */
    .why-image {
        display: none;
    }

    /* Mobile ordering: Image first, Title immediately under it, then paragraph text */
    .why-grid .lego-mobile-img {
        order: 1;
        display: block;
        width: 100%;
        height: 260px;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
        margin: 0; /* remove extra margin so title sits close beneath the image */
    }

    .why-grid .why-text h2 {
        order: 2;
        margin: 0 0 0.18rem 0; /* minimal clean spacing under title */
        padding: 0;
        display: block;
        font-size: 34px;
        line-height: 1.15;
    }

    .why-grid .why-text p#why-paragraph {
        order: 3;
        margin-top: 0; /* ensure paragraph sits directly under the title */
    }

    .why-grid #why-toggle {
        order: 4;
        align-self: flex-start;
        margin-top: 0.5rem;
    }

    /* Keep internal layout of text column vertical on mobile */
    .why-grid .why-text {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        padding: 0;
    }
}
/* Force text on the left and image on the right on wider screens */
.diff-image {
    order: 1;
    flex: 1 1 44%;
    min-width: 260px;
}
.diff-image img {
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
    /* adjust focal point so the face and hair are visible — shifted higher */
    object-position: center 6%;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
    display: block;
}

/* Specific adjustment: ensure the visible crop for the How Support Works section shows the face
   without changing size or zoom — focal point moved higher to reveal head and hair. */
#how-support-works .diff-image img {
    object-position: center 6%;
}
.diff-text {
    order: 0;
    flex: 1 1 50%;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* keep the title and text aligned to the top of the column beside the image */
}
.diff-text h2 {
    margin: 0 0 0.75rem 0;
    align-self: flex-start;
    font-size: 32px;
}
.diff-text p {
    margin: 0;
    line-height: 1.5;
    font-size: 1.05rem;
    color: var(--text-color);
}

/* New: reverse layout for specific grids (e.g. "What Makes Me Different") so image appears left and text right on desktop,
   while small screens still stack image above text. */
.reverse-diff .diff-image { order: 0; }
.reverse-diff .diff-text  { order: 1; }

/* Keep mobile stacking behaviour consistent: image above text on small screens */
@media (max-width: 900px) {
    .reverse-diff .diff-image { order: 0; }
    .reverse-diff .diff-text  { order: 1; }
}

/* Responsive: stack image above text on small screens */
@media (max-width: 900px) {
    .diff-grid {
        flex-direction: column;
        gap: 0.9rem; /* slightly tightened globally for compact stacking */
    }
    /* keep image first on small screens so the picture appears above the text */
    .diff-image { order: 0; }
    .diff-text  { order: 1; }
    .diff-image img {
        max-height: 280px;
    }
    .diff-text {
        align-items: flex-start;
    }

    /* Fix: prevent service/home "What support looks like" image overlapping the section title on mobile */
    /* Target the services block specifically and clear any negative top margin so title remains above the image.
       Also include the #services id and .services-image class to cover the Services page markup where the section uses
       id="services" and a dedicated .services-image wrapper. Use !important to override inline negative margins. */
    .services .diff-image,
    .services .diff-grid .diff-image,
    #services .diff-image,
    #services .services-image,
    #services .diff-grid .diff-image {
        margin-top: 0 !important;
        position: static !important;
    }
    .services .diff-image img {
        height: auto;
        max-height: 320px;
        display: block;
        margin: 0;
    }

    /* Mobile-only: keep the Services page top image above the text but constrain it to the page padding
       so it sits consistently with other images (adds small left/right margins instead of edge-to-edge). */
    #services .services-image {
        position: static !important;
        width: calc(100% - 1.4rem) !important; /* respect typical container padding on mobile */
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    #services .services-image img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover;
        object-position: center;
        margin: 0 !important;
        border-radius: 8px; /* match other images' rounded corners */
    }

    /* Ensure Services top row stacks image first then text on small screens without changing desktop layout */
    #services .service-header-row,
    .service-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    /* Explicit ordering to guarantee image above text */
    #services .services-image {
        order: 0 !important;
        margin-top: 0 !important;
    }
    #services .services-copy {
        order: 1 !important;
    }

    /* Mobile-only: rebuild full-width support block to a tight vertical stack:
   Image → Title → Remaining text (remove extra spacing between image and title) */
    .full-width-support .diff-grid {
        /* stack vertically and eliminate any extra column gap on mobile */
        display: flex;
        flex-direction: column;
        gap: 0.12rem;            /* tiny, consistent gap between stacked items */
        margin-top: 0.12rem;     /* keep block close to previous content */
        align-items: stretch;
    }
    /* Ensure the image sits first and fills the width without extra bottom spacing */
    .full-width-support .diff-image {
        order: 1;
        width: 100%;
        flex: none;
    }
    .full-width-support .diff-image img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 420px;      /* preserve visual scale but avoid added vertical space */
        object-fit: cover;
        object-position: center 12%;
        clip-path: inset(0 0 22% 0);
        -webkit-clip-path: inset(0 0 22% 0);
        margin: 0;               /* remove any bottom margin that caused the large gap */
        border-radius: 8px;
    }
    /* Move the title directly under the image with only a small gap */
    .full-width-support .diff-text {
        order: 2;
        width: 100%;
        padding: 0;             /* remove internal padding that could create spacing */
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .full-width-support .diff-text h2 {
        order: 1;
        margin: 0 0 0.3rem 0;   /* small clean gap under the title */
        padding: 0;
        font-size: 34px;
        line-height: 1.15;
    }
    /* Ensure paragraph block follows directly after the title */
    .full-width-support .diff-text > div,
    .full-width-support .diff-text p {
        order: 2;
        margin-top: 0;
        margin-bottom: 0.5rem;
    }
}

/* Full-width support section: ensure title aligns with image and maintain consistent vertical spacing */
.full-width-support .diff-grid {
    /* ensure the image and text stack align to the top edge */
    align-items: flex-start;
    gap: 1rem;
}
.full-width-support .diff-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* pin title to top of text column */
}
/* add a touch more space between the title and the paragraph for clearer visual hierarchy */
.full-width-support .diff-text h2 {
    margin-bottom: 1rem;
    line-height: 1.15;
}
/* keep paragraph block nicely separated and aligned with other sections */
.full-width-support .diff-text > div,
.full-width-support .diff-text p {
    margin-top: 0.25rem;
}

/* Full-width support: desktop/tablet cropping and spacing preserved; mobile rules below override for small screens */
.full-width-support .diff-image img {
    object-fit: cover;
    object-position: center 12%; /* move focal point up so head/shoulders remain visible */
    height: 420px;
    max-height: 420px;
    /* desktop/tablet crop preserved */
    clip-path: inset(0 0 22% 0);
    -webkit-clip-path: inset(0 0 22% 0);
}

/* MOBILE OVERRIDES: ensure a clean vertical stack (image → title → text) with minimal spacing and no extra crop */
@media (max-width: 900px) {
    .full-width-support .diff-grid {
        display: flex;
        flex-direction: column;
        gap: 0.08rem;            /* even tighter consistent gap on mobile */
        margin-top: 0.08rem;
        align-items: stretch;
    }
    .full-width-support .diff-image {
        order: 1;
        width: 100%;
        flex: none;
    }
    .full-width-support .diff-image img {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: cover;
        object-position: center 12%;
        clip-path: none;         /* remove desktop crop to avoid unexpected blank space */
        -webkit-clip-path: none;
        margin: 0;
        border-radius: 8px;
    }
    .full-width-support .diff-text {
        order: 2;
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .full-width-support .diff-text h2 {
        order: 1;
        margin: 0 0 0.18rem 0;   /* very small clean gap under the title */
        padding: 0;
        font-size: 34px;
        line-height: 1.15;
    }
    .full-width-support .diff-text > div,
    .full-width-support .diff-text p {
        order: 2;
        margin-top: 0;
        margin-bottom: 0.5rem;
    }
}

/* Testimonials Section */
.testimonials {
    background-color: var(--primary-color);
    padding: calc(var(--spacing-unit) * 3) 0;
    color: white;
}
.testimonials h3 {
    color: white;
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}
/* Carousel layout for testimonials */
.testimonial-carousel {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}
.testimonial-carousel .carousel-btn {
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 1rem;
    padding: 0.4rem;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    transition: background 0.12s ease, transform 0.08s ease;
}
.testimonial-carousel .carousel-btn:hover,
.testimonial-carousel .carousel-btn:focus {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
    outline: none;
}
.testimonial-track {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0.4rem 0.25rem;
    flex: 1 1 auto;
    /* Ensure the track can grow vertically with its children (prevents clipping when cards vary in height) */
    align-items: stretch;
    align-content: stretch;
}
.testimonial-track:focus {
    outline: 3px solid rgba(255,255,255,0.12);
    outline-offset: 6px;
}
.testimonial-track .testimonial-item {
    min-width: 260px;
    max-width: 340px;
    flex: 0 0 auto;
}

/* Mobile-only: switch testimonials to a stacked vertical list (full-width cards) while keeping desktop carousel unchanged */
@media (max-width: 900px) {
    /* Make carousel wrapper behave like a normal vertical list */
    .testimonial-carousel {
        display: block;
        gap: 0;
    }

    /* Testimonial track becomes a simple block container (no horizontal scroll / snapping) */
    .testimonial-track {
        display: block;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
        overflow-x: visible;
        overflow-y: visible;
        scroll-snap-type: none;
        -webkit-overflow-scrolling: auto;
    }

    /* Each testimonial item becomes a full-width stacked card with normal page padding */
    .testimonial-track .testimonial-item {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
        margin: 0 0 1rem 0 !important; /* vertical spacing between stacked cards */
        scroll-snap-align: none;
    }

    /* Keep existing padding inside cards but ensure they use the container width */
    .testimonial-item {
        padding-left: calc(var(--spacing-unit) * 0.6);
        padding-right: calc(var(--spacing-unit) * 0.6);
    }

    /* Hide carousel navigation buttons on mobile since list is vertical */
    .testimonial-carousel .carousel-btn {
        display: none;
    }
}

/* Fallback grid for very small screens if needed */
@media (max-width: 420px) {
    .testimonial-track .testimonial-item {
        min-width: 280px;
        max-width: 340px;
    }
}
.testimonial-item {
    background-color: white;
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 0.7); /* reduced overall padding so content sits higher */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    overflow: hidden;
}
.testimonial-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.testimonial-item::before {
    content: "“";
    position: absolute;
    top: 6px; /* moved quote mark higher to reduce top whitespace */
    left: 12px;
    font-size: 2.2em; /* slightly smaller so it doesn't push layout visually */
    color: rgba(0, 0, 0, 0.06); /* subtle decorative mark on white card */
    opacity: 0.85;
    font-family: Georgia, serif;
    z-index: 1;
    line-height: 1;
}
.testimonial-text {
    margin-bottom: calc(var(--spacing-unit) * 0.9);
    font-style: italic;
    color: var(--text-color);
    font-size: var(--base-font-size);
    position: relative;
    z-index: 2;
    padding-top: 6px; /* reduce top padding so the text sits higher in the card */
}
.testimonial-author {
    margin-top: auto;
    padding-top: calc(var(--spacing-unit) * 0.6); /* slightly reduced author spacing */
    border-top: 1px solid #eee;
    font-size: 0.95rem;
    color: var(--heading-color);
    text-align: right;
    line-height: 1.4;
    position: relative;
    z-index: 2;
}
.testimonial-author strong {
    display: inline;
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-right: 0.4rem;
    vertical-align: middle;
}
.testimonial-author span.author-details {
    display: block;
    color: var(--text-color);
    font-size: 0.9rem;
}
.testimonials .container > p {
    text-align: center;
    margin-top: calc(var(--spacing-unit) * 2);
    font-size: 0.95rem;
    color: white;
}

/* Centered single-column family testimonials helper styles */
.centered-testimonials {
    /* full-bleed white band spanning the viewport; inner content remains centered */
    display: flex;
    justify-content: center;
    padding: 1.25rem 0;
    background: #ffffff;
}
.centered-testimonials .diff-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}
.centered-testimonials .diff-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 760px;
    padding: 1.25rem;
    background: transparent; /* inner panel transparent so the section band is the white area */
    border-radius: 12px;
    box-shadow: none;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.centered-testimonials .diff-text h2 {
    text-align: center;
    margin: 0 auto 3.6rem; /* increased space below title for clearer separation */
    color: var(--heading-color); /* darker heading on white card */
}

/* Ensure the specific homepage testimonial title is always centered */
#family-testimonials {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto 0.75rem;
}
.centered-testimonials .diff-text p {
    text-align: center;
    margin: 0;
    /* keep the first paragraph flush, additional paragraphs get extra spacing for clear separation */
    margin-top: 0;
    max-width: 680px;
    color: var(--text-color);
}
/* Add increased vertical space between consecutive testimonial paragraphs only in the Family Testimonials area */
.centered-testimonials .diff-text p + p {
    margin-top: 1.25rem;
}
.centered-testimonials .diff-text > div {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
}

/* Mobile adjustments: remove outer padding to better fit the viewport and keep card readable */
@media (max-width: 900px) {
    .centered-testimonials { padding: 0.6rem; }
    .centered-testimonials .diff-text { padding: 1rem; max-width: 100%; border-radius: 10px; }
    .centered-testimonials .diff-text p { font-size: 15px; }
}

/* Availability Section */
.availability-rates {
    background-color: white;
    padding: calc(var(--spacing-unit) * 3) 0;
}
.availability-visual-placeholder {
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.availability-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-unit);
}
.availability-item {
    background-color: transparent;
    padding: var(--spacing-unit);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.3s ease;
}
.availability-item .status.available { 
    color: white; 
}
.availability-item:has(.status.available) {
    background-color: var(--availability-available);
    color: white;
}
.availability-item .status.fully-booked,
.availability-item .status.unavailable {
     color: white;
}
.availability-item:has(.status.fully-booked),
.availability-item:has(.status.unavailable) {
    background-color: var(--availability-unavailable);
    color: white;
}
.availability-item:has(.status.available) *,
.availability-item:has(.status.fully-booked) *,
.availability-item:has(.status.unavailable) * {
    color: white !important;
}
.availability-item .day {
    font-weight: bold;
    font-size: 1rem;
    flex-shrink: 0;
}
.availability-item .time {
    font-size: 1rem;
    flex-grow: 1;
}
.availability-item .status {
    font-weight: bold;
    font-size: 1rem;
    flex-shrink: 0;
}

.rates-list {
    margin-bottom: var(--spacing-unit);
    font-size: var(--base-font-size);
}
.rates-list p, .rates-list ul {
    font-size: var(--base-font-size);
}
.rates-list strong {
    color: var(--heading-color);
}

/* Qualifications List Styles */
.qualifications-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-unit);
    width: 100%;
    max-width: var(--container-max-width);
    margin: var(--spacing-unit) auto 0;
}
.experience-qualifications {
    margin-top: calc(var(--spacing-unit) * 2);
}
.qualification-item {
    display: flex;
    align-items: center;
    background-color: var(--qualification-bg);
    border: 1px solid var(--qualification-border);
    border-radius: 5px;
    padding: 0.75rem var(--spacing-unit);
    color: var(--qualification-text);
    font-weight: bold;
    font-size: 0.95rem;
    gap: 0.5rem;
}
.qualification-item::before {
    content: '✓';
    display: inline-block;
    font-size: 0.22em;
    color: var(--qualification-icon-color);
    font-weight: bold;
    margin-right: 0.25rem;
}
.qualification-item span { 
    display: none; 
}
@media (max-width: 767px) {
     .qualifications-list { 
        grid-template-columns: 1fr; 
     }
}

/* Experience highlight */
.experience-highlight {
    font-size: 1.5rem;
    font-style: italic;
    text-align: center;
    margin: calc(var(--spacing-unit) * 2) 0;
    padding: var(--spacing-unit);
    background-color: rgba(40, 167, 69, 0.05);
    border-left: 4px solid var(--secondary-color);
    color: var(--heading-color);
    border-radius: 8px;
}

/* Contact Section */
.contact {
    /* Match hero/home subtle blue wash used site-wide for page sections */
    background: linear-gradient(to bottom, rgba(8,88,166,0.06) 0%, #ffffff 100%);
    padding: calc(var(--spacing-unit) * 3) 0;
    position: relative;
    z-index: 1;
}

/* Small left text + small right image row used in contact intro */
.contact-intro-row {
    display: flex;
    align-items: center; /* vertical center text and image */
    gap: 0rem; /* minimal gap so image sits tightly next to the text */
    margin-bottom: 1rem;
}
.contact-intro-text {
    flex: 1 1 420px;
    min-width: 220px;
}
.contact-intro-text p { margin: 0 0 0.35rem 0; line-height:1.45; }

/* Keep the image proportionally scaled to match the height of the text block */


/* On narrow screens stack the image below the text and enforce Title → Image → Supporting text order */
@media (max-width: 900px) {
    .contact-intro-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Ensure the text block appears first (title inside), image is immediately after, and remaining text follows */
    .contact-intro-text {
        order: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
    }
    /* Keep the H1 as the first visual element inside the text block */
    .contact-intro-text h1 {
        order: 1;
        width: 100%;
        margin-bottom: 0.6rem;
    }
    /* All other children of the text block (intro paragraphs / small spacers) move after the image */
    .contact-intro-text > *:not(h1) {
        order: 3;
    }

    /* Place the image container between title and supporting text */
    .contact-intro-image {
        order: 2 !important;                   /* ensure image sits directly under the title */
        width: 100% !important;                /* fill content width to avoid overflow */
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: flex-start !important;
        display: block !important;
        box-sizing: border-box;
        overflow: hidden !important;           /* prevent any child from overflowing the section */
        border-radius: 8px;
        box-shadow: 0 12px 24px rgba(0,0,0,0.10);
    }

    .contact-intro-image img {
        width: 100% !important;
        height: auto !important;               /* scale naturally to avoid overflow */
        max-width: 100% !important;
        display: block !important;
        border-radius: 8px;
        object-fit: cover;
        object-position: top;
        margin: 0;
    }

    /* Mobile-only: hide the original side image and reveal the duplicate image placed under the H1 */
    .contact-intro-image.hide-on-mobile {
        display: none !important;
    }
    .contact-intro-image-mobile {
        display: none;
        width: 100%;
        height: auto;
    }
    .contact-intro-image-mobile {
        /* ensure it becomes visible and fits the content width on small screens */
    }
    .contact-intro-image-mobile {
        display: block !important;
    }
}
.contact .container h3,
.contact .container p {
    color: var(--text-color);
}
.contact .container a {
    color: var(--heading-color);
    text-decoration: underline;
}
.contact a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* Unified primary button used across the site (matches .check-availability-btn) */
.contact-max-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.contact-max-btn,
.support-start-btn {
    display: inline-block;
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 0.62rem 1.2rem;
    font-weight: 700;
    border-radius: 24px;
    text-decoration: none;
    font-size: 0.98rem;
    transition: background 0.14s ease, transform 0.12s ease, box-shadow 0.14s ease;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    cursor: pointer;
    letter-spacing: 0.3px;
}

/* Hover / focus states aligned with check-availability behaviour */
.contact-max-btn:hover,
.contact-max-btn:focus,
.support-start-btn:hover,
.support-start-btn:focus {
    background: #005ed6; /* slightly darker blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
    color: #fff;
}

/* Hero call-to-action button (unified primary button style) */
.hero-cta-container {
    margin-top: 1.25rem;
}
.support-start-btn {
    /* shared styles moved to the unified block above; keep class present for markup */
}

/* Check Availability button — left-aligned and primary blue */
.check-availability-btn {
    display: inline-block;
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 0.62rem 1.2rem;
    font-weight: 700;
    border-radius: 24px;
    text-decoration: none;
    font-size: 0.98rem;
    transition: background 0.14s ease, transform 0.12s ease, box-shadow 0.14s ease;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    margin-left: 0; /* ensure it aligns with left edge of paragraph text */
}
.check-availability-btn:hover,
.check-availability-btn:focus {
    background: #005ed6; /* slightly darker blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    color: #fff;
}

/* Add vertical spacing under the "Read more" toggle in the compare section to separate it from the following section */
#why-toggle {
    margin-bottom: 1.5rem;
}

/* Small-screen: make buttons full width stacked */
@media (max-width: 600px) {
    .hero-cta-container { margin-top: 0.9rem; text-align: center; flex-direction: column; align-items: stretch; }
    .support-start-btn, .check-availability-btn { width: 100%; padding: 0.9rem 0; }
}

/* Short italic helper text below hero button */
.stay-connected {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: left;
}
.stay-connected em {
    font-style: italic;
    opacity: 0.95;
}

/* Small-screen adjustment */
@media (max-width: 600px) {
    .hero-cta-container { margin-top: 0.9rem; text-align: center; }
    .support-start-btn { width: 100%; padding: 0.9rem 0; font-size: 0.98rem; }
    .stay-connected { text-align: center; }
}

@media (max-width: 600px) {
    .contact-max-btn {
        width: 100%;
        font-size: 1rem;
        padding: 0.9em 0;
    }
    .contact-max-btn-container {
        margin-top: 1.2rem;
    }
}

/* Footer */
.site-footer {
    background-color: #0b2a4a; /* navy background */
    color: #ffffff; /* white text */
    /* increase vertical padding so footer content appears lower within the footer */
    padding: calc(var(--spacing-unit) * 2) 0;
}
.footer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-unit);
}

/* Keep stacked column layout on narrow viewports for readability */
@media (max-width: 600px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }
}

/* Small spacer between the left and right footer columns — keeps a visual gap in the middle */
.footer-spacer {
    flex: 0 0 48px; /* fixed middle gap on wider screens */
    min-width: 24px;
    width: 48px;
    height: 1px; /* invisible box (used for layout only) */
}

/* Smaller footer subtitle used for the name/description to match email/contact lines */
.footer-subtitle {
    margin: 0 0 0.35rem 0;
    /* unified footer text size so name/description, email and helper line match */
    font-size: 0.95rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.95);
}

/* Discreet credentials list in footer - two straight columns */
.footer-credentials {
    /* larger, legible credentials text kept in the right-hand footer column but aligned to the left margin inside that column */
    font-size: 0.90rem;
    color: rgba(255,255,255,0.95);
    max-width: 1000px;
    /* left-align credentials text within the right-hand column while the column itself remains on the right */
    text-align: left;
    line-height: 1.45;
    margin-top: 0.9rem;
    letter-spacing: 0.2px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1rem;
    justify-items: start; /* place items on the left within their grid cells */
    align-items: start;
    padding-left: 0; /* preserve spacing so items sit flush to the column's left edge */
}
.footer-credentials span {
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
    font-weight: 400;
    color: rgba(255,255,255,0.95);
    width: auto;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 0.9rem; /* keep size for readability and consistency */
}

/* Add a green check mark before each credential item */
.footer-credentials span::before {
    content: '✓';
    display: inline-block;
    width: 1em;
    margin-right: 0.5rem;
    color: var(--secondary-color);
    font-weight: 700;
    text-align: center;
    font-size: 0.95rem;
    vertical-align: middle;
}



/* Heading style for credentials — placed above and aligned with the credential items (right column) */
.footer-credentials-heading {
    font-weight: 700;
    font-size: 0.95rem; /* increased slightly for better legibility */
    margin: 0 0 0.4rem 0;
    text-align: left;
    color: rgba(255,255,255,0.95);

    /* Place the heading above the credentials and align it left within the right-hand column */
    align-self: flex-start;
    justify-self: start;
    padding-left: 0;
    display: block;
}

/* Desktop-only: force footer subtitle to break into two lines while keeping mobile inline.
   .footer-break is inline by default so mobile retains a single visible line; at desktop widths
   we switch the span to display:block so the subtitle cleanly becomes two lines without changing wording. */
.footer-subtitle .footer-break {
    display: inline;
}
@media (min-width: 900px) {
    .footer-subtitle .footer-break {
        display: block;
    }
}

/* Smaller variant used for the contact / descriptor lines in the footer */
.site-footer .footer-subtitle,
.site-footer .footer-contact {
    font-size: 0.95rem; /* slightly larger for improved readability */
    line-height: 1.35;
    color: rgba(255,255,255,0.92);
}

/* Collapse to single column on narrow screens for readability */
@media (max-width: 600px) {
    .footer-credentials {
        grid-template-columns: 1fr;
        gap: 0.35rem 0.45rem;
        font-size: 0.50rem;
    }
    .footer-credentials span {
        font-size: 0.45rem;
    }
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    body { 
        font-size: 1rem; 
    }
    /* Keep header row layout on mobile (logo left, menu right) by not forcing column here */
    .header-container { 
        /* preserve row layout set earlier to ensure logo left / menu right */
        flex-direction: row; 
        align-items: center; 
        justify-content: space-between;
    }
    .site-logo { 
        margin-bottom: 0; 
    }
    .site-logo img { 
        height: 60px; 
    }
    #typewriter-text { 
        font-size: 1.3rem; 
        margin-bottom: 1rem; 
    }
    .site-nav { 
        width: 100%; 
        justify-content: center; 
    }
    .site-nav ul { 
        justify-content: center; 
        gap: 0.5rem; 
    }
    .site-nav a { 
        padding: 0.25rem 0.5rem; 
        font-size: 1rem; 
    }
    section { 
        padding: calc(var(--spacing-unit) * 1.5) 0; 
    }
    #about { 
        padding-top: calc(var(--spacing-unit) * 1); 
    }
    .hero { 
        padding-top: calc(var(--spacing-unit) * 2); 
        padding-bottom: calc(var(--spacing-unit) * 2); 
    }
    .hero .container { 
        gap: var(--spacing-unit); 
    }
    .hero-image { 
        margin-top: var(--spacing-unit); 
    }
    .experience-highlight { 
        font-size: 1.2rem; 
        margin: var(--spacing-unit) 0; 
        padding: var(--spacing-unit) 0.75rem; 
    }
    .testimonial-item { 
        padding: var(--spacing-unit); 
    }
    .testimonial-text { 
        padding-top: 15px; 
    }
    .testimonial-author { 
        font-size: 0.85rem; 
    }
    .testimonial-author strong { 
        font-size: 1rem; 
    }
    .availability-item { 
        padding: 0.75rem var(--spacing-unit); 
    }
    .qualifications-list { 
        grid-template-columns: 1fr; 
    }
    .site-footer { 
        padding: calc(var(--spacing-unit) * 1.5) 0; 
    }
}

/* Small laptops/tablet portrait or smaller: stack hero section */
@media (max-width: 900px) {
    .hero .container {
        flex-direction: column;
        gap: var(--spacing-unit);
    }
    .hero-content, .hero-image {
        min-width: 0;
        width: 100%;
    }
    .hero-image { 
        margin-top: var(--spacing-unit); 
    }
}

/* True mobile: reduce padding further, card readability */
@media (max-width: 600px) {
    .container {
        padding: 0 0.7rem;
    }
    .hero-content, .hero-image {
        padding: 0;
        min-width: 0;
        width: 100%;
    }
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .testimonial-item {
        padding: 0.9rem;
        font-size: 1rem;
    }
    .availability-list {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    /* Home page — mobile only: ensure Check availability button text is perfectly centered and has safe internal padding */
    .home .check-availability-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.62rem 1.2rem; /* preserve original visual size while guaranteeing internal space */
        line-height: 1; /* prevents vertical clipping */
        white-space: nowrap;
    }
}

/* Extra bottom spacing specifically for the About page to create more room before the footer */
.about {
    padding-bottom: calc(var(--spacing-unit) * 4);
}

/* Mobile-only: make homepage hero title more prominent (only on small screens and only on the home page) */
@media (max-width: 600px) {
    .home .hero-top-text .hero-title {
        /* Reduce size so the hero heading is visually balanced on mobile while keeping line breaks and layout unchanged */
        font-size: 28px;
        line-height: 1.02;
    }
}

/* Crop the About page header image slightly from the top and bottom without changing layout or zoom.
   Scoped to .about-header-image so the same image elsewhere is unaffected. */
.about-header-image img {
    width: 100%;
    height: 320px;                /* fixed display frame so cropping is consistent */
    max-height: 420px;
    object-fit: cover;            /* preserve zoom/cover behavior */
    object-position: center 6%;   /* move focal point higher to bring the picture up */
    clip-path: inset(4% 0 8% 0);  /* crop a little less from top and a bit more from bottom to raise visible content */
    -webkit-clip-path: inset(4% 0 8% 0);
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    display: block;
}

/* Slightly adjust on narrow screens to keep the crop proportional */
@media (max-width: 900px) {
    .about-header-image img {
        height: 260px;
        clip-path: inset(4% 0 8% 0);
        -webkit-clip-path: inset(4% 0 8% 0);
        object-position: center 10%;
    }
}

/* Mobile-only: center text inside the Services page "Contact" button without altering size/shape/color.
   Targets only the button inside the #services section so other buttons remain unchanged. */
@media (max-width: 600px) {
    #services .support-start-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* Mobile-only: ensure the About page 'Contact Max' call-to-action text is perfectly centered
   horizontally and vertically inside the button without changing size, shape, color or position.
   Scoped to the .about page only and applies only on small screens. */
@media (max-width: 900px) {
    .about .support-start-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1 !important; /* prevents vertical clipping */
    }
}

/* Mobile alignment: ensure the Services page top image shares the same left/right page margins as the text */
@media (max-width: 900px) {
    /* Make the image container match the text column width on mobile and expand to fill available content width */
    #services .services-image {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;                /* avoid staying as a narrow fixed flex child */
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        align-self: flex-start !important;   /* keep left alignment with text block */
    }
    /* Ensure the img inside scales and uses cover while keeping height-auto to avoid vertical spacing changes */
    #services .services-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 8px !important;
    }
}

/* MOBILE: Improve testimonial card contrast and readability without changing layout or behavior */
@media (max-width: 900px) {
    /* Slightly darker, more readable body text and stronger separation from the white page background.
       Keep sizes, spacing and carousel behavior unchanged; only visual contrast adjustments below. */
    .testimonial-item {
        /* keep white card but add a very subtle cool-gray gradient and thin border for separation */
        background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
        border: 1px solid rgba(11, 42, 74, 0.06); /* soft navy tint to separate card from white band */
        padding: calc(var(--spacing-unit) * 0.7); /* small increase to give text breathing room */
        box-shadow: 0 8px 18px rgba(0,0,0,0.06); /* slightly more subtle shadow on mobile for depth */
    }

    /* Darken main testimonial text for maximum contrast on mobile screens */
    .testimonial-text {
        color: #0b1720 !important; /* strong near-black for legibility */
        font-weight: 500;
    }

    /* Make author line slightly more prominent and clearly separated */
    .testimonial-author {
        color: #07203a !important; /* deep navy */
        border-top: 1px solid rgba(11,42,74,0.06) !important;
    }

    /* Reduce decorative quote opacity so it doesn't compete with text */
    .testimonial-item::before {
        color: rgba(11,42,74,0.04);
    }
}

/* MOBILE-ONLY: center the text inside the Testimonials page "Contact Max" button without changing its size, shape, color, or position */
@media (max-width: 900px) {
    .testimonials .contact-max-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1 !important;
    }

    /* Reduce vertical gap between the section title and the intro line on mobile only.
       This brings "Trusted by Families Across Melbourne’s West" closer to the TESTIMONIALS heading. */
    .testimonials .testimonials-intro {
        margin-top: 0.25rem !important;
        margin-bottom: 0.9rem !important;
    }
}

/* About page mobile: reduce gap between header image and the first paragraph for a tighter, cohesive stack */
@media (max-width: 900px) {
    /* tighten the flex gap between the image and text column in the about header */
    .about-header {
        gap: 0.4rem !important;
    }

    /* specifically bring the paragraph that begins "Support, for me..." closer to the image above it */
    .about-header-text > p:first-of-type {
        margin-top: 0.35rem !important;
    }
}