/* ================================
   BRAND THEME — COLOURS & FONTS
================================ */
:root {
    /* Exact brand colours from business card */
    --ignite-green: #3E5A2A;
    /* deep olive */
    --ignite-blush: #E8DCD3;
    /* soft neutral blush */
    --ignite-blush-dark: #D2C3B8;
    /* deeper blush for hover */

    /* Typography */
    --heading-font: "Cormorant Garamond", serif;
    --body-font: "Lora", serif;

    /* Text colours */
    --text-dark: #4A4A4A;
    /* soft charcoal */
    --text-light: #ffffff;
}

/* ================================
   GLOBAL RESET
================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #FAF7F4;
    /* soft warm neutral */
    color: var(--text-dark);
    font-family: var(--body-font);
    line-height: 1.75;
}

/* ================================
   GLOBAL TYPOGRAPHY
================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    color: var(--ignite-green);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

p {
    margin-bottom: 20px;
    font-size: 1.15rem;
    line-height: 1.85;
}

/* ================================
   GLOBAL CONTAINERS
================================ */
.container,
.section-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 70px 20px;
}

/* ================================
   HEADER / NAVIGATION
================================ */
header {
    background: white;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 20;
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav ul {
    display: flex;
    gap: 28px;
    list-style: none;
}

nav a {
    color: var(--ignite-green);
    background: white;
    padding: 8px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.25s ease;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

nav a:hover {
    background: var(--ignite-blush);
    color: var(--ignite-green);
    border-color: var(--ignite-blush-dark);
}

/* Mobile nav */
@media (max-width: 700px) {
    header {
        padding: 10px 0;
    }

    .nav-container {
        flex-direction: column;
        gap: 30px;
    }

    nav ul {
        flex-direction: column;
        gap: 15px;
    }
}

/* ================================
   LOGO RESPONSIVE BEHAVIOUR
================================ */

/* Default: desktop + tablet */
.logo-desktop {
    display: block;
    width: 300px;
    height: auto;
}

.logo-mobile {
    display: none;
}

/* Mobile breakpoint */
@media (max-width: 700px) {
    .logo-desktop {
        display: none;
    }

    .logo-mobile {
        display: block;
        width: auto;
        height: 150px;
    }
}

/* ================================
   NAV BOOK BUTTON
================================ */

.nav-book-button {
    background-color: #b57f7f;
    /* your blush tone */
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    margin-left: 20px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.nav-book-button:hover {
    background-color: #a06d6d;
}

/* Align nav items + button */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Make sure nav list + button sit nicely */
nav ul {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* MOBILE */
@media (max-width: 900px) {
    .nav-book-button {
        display: none;
        /* optional: hide on mobile if menu collapses */
    }
}

/* ================================
   STICKY NAVIGATION
================================ */

header {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #ffffff;
    /* solid background so text stays readable */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    /* soft premium shadow */
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Keep nav content aligned */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
}

/* Prevent layout shift when sticky activates */
header img {
    display: block;
}

header.scrolled {
    background-color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* ================================
   HAMBURGER BUTTON
================================ */

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: #333;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Hamburger animation when active */
.hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ================================
   MOBILE MENU
================================ */

.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu ul {
    list-style: none;
    padding: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-menu a {
    text-decoration: none;
    font-size: 18px;
    color: #333;
}

.mobile-book {
    background-color: #b57f7f;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    display: inline-block;
}

/* ================================
   MOBILE BREAKPOINT
================================ */

@media (max-width: 900px) {
    nav.nav-links {
        display: none;
    }

    /* Show Book Now button on mobile */
    .nav-book-button {
        display: inline-block;
        margin-left: auto;
    }

    .hamburger {
        display: flex;
    }

    /* Align hamburger + book button */
    .nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
}

/* ================================
   HERO SECTION (HOME)
================================ */
.hero {
    background-image: url('../images/hero-photo.png');
    background-size: cover;
    background-position: center;

    /* Make hero smaller */
    min-height: 45vh;
    /* was 70vh */
    padding: 60px 20px 40px;
    /* was 120px 20px 60px */

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;

    /* reduce padding so it feels less chunky */
    padding: 30px 20px;
}

.hero h1 {
    font-size: 2.6rem;
    /* was 3.2rem */
}

.hero p {
    font-size: 1.15rem;
    /* was 1.25rem */
    color: var(--ignite-green);
}

/* ================================
   BUTTONS
================================ */
.button-primary {
    background: var(--ignite-blush);
    color: var(--ignite-green);
    padding: 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s ease;
    display: inline-block;
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.button-primary:hover {
    background: var(--ignite-blush-dark);
}

/* ================================
   ABOUT PAGE
================================ */
.about-two-column {
    display: flex;
    flex-direction: row-reverse;
    gap: 60px;
}

.about-photo {
    width: 100%;
    max-width: 300px;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.about-text-column p {
    font-family: var(--body-font);
    font-size: 1.2rem;
    line-height: 1.9;
    color: var(--text-dark);
}

/* Mobile */
@media (max-width: 900px) {
    .about-two-column {
        flex-direction: column;
        gap: 30px;
    }
}

/* ================================
   FIX — ABOUT PAGE LAYOUT
================================ */

/* Restore spacing for the whole About page */
.about-hero.section {
    padding: 100px 20px 60px;
}

/* Fix heading spacing */
.about-heading {
    text-align: center;
    margin-bottom: 50px;
}

/* Restore proper two-column layout */
.about-two-column {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 60px;
    text-align: left;
}

/* Fix photo column width */
.about-photo-column {
    flex: 1 1 40%;
    display: flex;
    justify-content: center;
}

/* Fix photo sizing */
.about-photo {
    width: 100%;
    max-width: 320px;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Fix text column width */
.about-text-column {
    flex: 1 1 60%;
    text-align: left;
}

/* Restore paragraph spacing */
.about-text-column p,
.about-long-text p {
    font-size: 1.2rem;
    line-height: 1.9;
    margin-bottom: 22px;
}

/* Restore long-text block spacing */
.about-long-text {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto 0;
    text-align: left;
}

/* CTA spacing */
.cta-bottom {
    text-align: center;
    margin-top: 40px;
}

/* Mobile layout fix */
@media (max-width: 900px) {
    .about-two-column {
        flex-direction: column;
        gap: 40px;
        text-align: left;
    }

    .about-photo-column {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .about-text-column {
        width: 100%;
        text-align: left;
    }
}

/* ================================
   HOME — GREEN SECTION
================================ */
.section-yellow {
    background: var(--ignite-green);
    color: white;
    padding: 120px 20px;
}

.section-yellow p {
    font-size: 1.15rem;
    line-height: 1.85;
}

/* ================================
   ISSUES SECTION
================================ */
.issues.section {
    background: var(--ignite-blush);
    color: var(--ignite-green);
    padding: 100px 20px;
}

.issues-list {
    columns: 2;
    column-gap: 60px;
    max-width: 900px;
    margin: 0 auto;
    list-style: none;
}

.issues-list li {
    padding-left: 28px;
    position: relative;
}

.issues-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--ignite-green);
}

@media (max-width: 768px) {
    .hero {
        min-height: 35vh;
        padding: 40px 20px;
    }

    .hero-content {
        padding: 20px 15px;
    }

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

    .hero p {
        font-size: 1rem;
    }
}

/* ================================
   SAGE SECTION (renamed from section-yellow)
================================ */
.section-sage {
    position: relative;
    padding: 120px 20px;

    background: linear-gradient(to right,
            #4f6b63 0%,
            #6b857d 100%);

    color: #f7f7f7;
}

.section-sage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.section-sage .section-inner {
    position: relative;
    z-index: 2;
}

/* ================================
   TWO-COLUMN — DESKTOP
================================ */

.section-sage.two-column .section-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

.section-sage.two-column .text-column {
    flex: 0 0 60%;
}

.section-sage.two-column .image-column {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-sage.two-column .image-column img {
    max-height: 520px;
    width: auto;
    object-fit: contain;
    border-radius: 0px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.section-sage.two-column .divider {
    width: 2px;
    background: rgba(255, 255, 255, 0.35);
    height: 85%;
    align-self: center;
    border-radius: 2px;
}

/* ================================
   TWO-COLUMN — MOBILE (IMAGE ON TOP)
================================ */

@media (max-width: 900px) {

    .section-sage.two-column .section-inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    /* Hide divider on mobile */
    .section-sage.two-column .divider {
        display: none;
    }

    /* Move the IMAGE COLUMN (3rd child) to the top */
    .section-sage.two-column .section-inner>.image-column {
        order: -1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Make the image full-width but controlled */
    .section-sage.two-column .image-column img {
        width: 100%;
        max-width: 420px;
        height: auto;
    }

    /* Text column full width */
    .section-sage.two-column .text-column {
        width: 100%;
        text-align: left;
    }
}

/* ================================
   ISSUES SECTION — BIGGER HEADER + TEXT
================================ */
.issues.section {
    background: var(--ignite-blush);
    color: var(--ignite-green);
    padding: 100px 20px;
}

.issues.section h2 {
    margin-bottom: 50px;
    font-size: 2.4rem;
    /* bigger header */
    line-height: 1.3;
}

.issues-list {
    columns: 2;
    column-gap: 60px;
    max-width: 900px;
    margin: 0 auto;
    list-style: none;
}

.issues-list li {
    padding-left: 28px;
    position: relative;
    font-size: 1.2rem;
    /* bigger list text */
    line-height: 1.75;
    /* more breathing room */
}

.issues-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--ignite-green);
}

/* ================================
   EMPATHY SECTION — ADJUSTED SIZE
================================ */
.empathy.section {
    padding: 100px 20px;
}

.empathy-list {
    max-width: 750px;
    margin: 20px auto 30px;
}

.empathy-list li {
    font-size: 1.20rem;
    /* reduced from 1.35rem */
    line-height: 1.55;
    margin-bottom: 14px;
    color: var(--ignite-green);
}

.modalities-list {
    margin: 20px 0 30px;
    padding-left: 22px;
    list-style: disc;
}

.modalities-list li {
    margin-bottom: 10px;
    font-size: 1.15rem;
    line-height: 1.75;
}

/* ================================
   BEIGE SECTION
================================ */
.how-help.section {
    padding: 100px 20px;
}

.how-help.section p {
    margin-bottom: 22px;
}

/* Fix bottom CTA */
.home .button-primary,
a.button-primary:last-of-type {
    display: block;
    width: fit-content;
    margin: 40px auto 0;
}

/* Mobile layout fixes */
@media (max-width: 900px) {
    .two-column .section-inner {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .divider {
        display: none;
    }

    .text-column {
        text-align: left;
    }
}

/* ================================
   PEARL SECTION — DESKTOP
================================ */

.pearl-section .pearl-inner {
    max-width: 1100px;
    /* keeps content inside browser width */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;

    display: flex;
    flex-direction: row;
    /* keep side-by-side on desktop */
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;

    overflow-x: hidden;
    /* prevents sideways scroll */
}

.pearl-section .pearl-image-col {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pearl-section .pearl-image-col img {
    max-width: 420px;
    width: 100%;
    height: auto;
}

.pearl-section .pearl-text-col {
    flex: 0 0 60%;
    text-align: left;
    max-width: 650px;
    /* prevents text from stretching too wide */
}


/* ================================
   PEARL SECTION — MOBILE
================================ */

@media (max-width: 900px) {

    .pearl-section .pearl-inner {
        flex-direction: column;
        /* stack image + text */
        gap: 30px;
        text-align: center;
    }

    .pearl-section .pearl-image-col {
        order: -1;
        /* image on top */
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pearl-section .pearl-image-col img {
        width: 100%;
        max-width: 420px;
        height: auto;
    }

    .pearl-section .pearl-text-col {
        width: 100%;
        text-align: left;
        max-width: none;
        /* allow natural width on mobile */
    }
}

/* ================================
   PEARL SECTION — FIX OVERFLOW
================================ */

.pearl-section {
    overflow-x: hidden;
    /* stops sideways cut-off */
}

.pearl-section .pearl-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* IMPORTANT: prevents text dropping under image */
    gap: 60px;
    box-sizing: border-box;
}

.pearl-section .pearl-image-col {
    flex: 0 0 35%;
    /* slightly smaller so text fits */
    max-width: 35%;
}

.pearl-section .pearl-text-col {
    flex: 1;
    /* text takes remaining space */
    min-width: 0;
    /* CRITICAL: prevents text from overflowing */
    box-sizing: border-box;
}

/* Image sizing */
.pearl-section .pearl-image-col img {
    width: 100%;
    max-width: 380px;
    /* slightly smaller to prevent overflow */
    height: auto;
}

/* ================================
   MOBILE — STACK CLEANLY
================================ */
@media (max-width: 900px) {

    .pearl-section .pearl-inner {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 30px;
        text-align: center;
    }

    .pearl-section .pearl-image-col,
    .pearl-section .pearl-text-col {
        max-width: 100%;
        width: 100%;
    }

    .pearl-section .pearl-image-col img {
        max-width: 420px;
        width: 100%;
    }

    .pearl-section .pearl-text-col {
        text-align: left;
    }
}

/* ================================
   SECTION SEPARATORS — FIXED
================================ */

/* Add spacing so sections breathe */
.section-sage,
.pearl-section,
.how-help {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
}

/* Soft divider line ABOVE each section */
.section-sage::before,
.pearl-section::before,
.how-help::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
}

/* Remove line above the very first section if needed */
.section-sage:first-of-type::before {
    display: none;
}

/* ================================
   SERVICES CARDS — BLUSH + LIGHT GREEN
================================ */

/* Tighten spacing between hero and cards on Services page */
.services-hero.section {
    padding-bottom: 0px;
    /* reduce from 100–120px */
}

.services-cards.section {
    padding-top: 0px;
    /* reduce from 80px */
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

/* Base card styling */
.service-card {
    border-radius: 14px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Alternating colours — MATCHING LONG SECTIONS */
.service-card:nth-child(odd) {
    background: #F8E7E7;
    /* SAME blush as long descriptions */
    color: var(--ignite-green-dark);
}

.service-card:nth-child(even) {
    background: #9bb3ac;
    /* lighter sage green */
    color: #ffffff;
}

/* Hover effect */
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* Icon styling */
.service-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    object-fit: contain;
    opacity: 0.9;
}

/* Headings — bigger + friendlier */
.service-card h3 {
    margin-top: 10px;
    margin-bottom: 14px;
    font-size: 1.35rem;
    /* bigger */
    font-weight: 600;
    /* less elegant */
    font-family: var(--body-font);
    /* friendly, readable */
}

/* Paragraph — bigger + softer */
.service-card p {
    margin-top: 12px;
    font-size: 1.1rem;
    /* bigger */
    line-height: 1.6;
    font-family: var(--body-font);
}

/* Alternating long-section backgrounds — MATCH CARDS */
.service-bg-blush {
    background: #F8E7E7;
    /* same blush as cards */
}

.service-bg-sage {
    background: #9bb3ac;
    /* same soft sage as cards */
}

.service-card img.service-icon {
    display: none !important;
}

/* ================================
   CONTACT PAGE
================================ */

/* Two-column layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/* Mobile */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Hero spacing */
.contact-hero.section {
    padding: 20px 20px 10px;
}

.contact-hero .section-inner h1 {
    margin-bottom: 10px;
}

/* Main section spacing */
.contact-content.section {
    padding: 20px 20px 60px;
}

/* Headings */
.contact-form-area h2,
.contact-details-area h3 {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

/* Form labels */
.contact-form label {
    font-size: 1.1rem;
    margin-bottom: 14px;
}

/* Form fields */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 1.05rem;
    margin-top: 6px;
    margin-bottom: 18px;
    border: 1px solid #e6e0d9;
    border-radius: 8px;
    background: white;
}

/* Contact details list */
.contact-info {
    list-style: none;
    margin-bottom: 25px;
}

.contact-info li {
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 1.05rem;
    border: 1px solid #e6e0d9;
    border-radius: 8px;
    background: white;
    color: var(--text-dark);
}

/* Placeholder styling */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #9a948c;
    /* soft neutral tone */
    font-style: italic;
}

/* Focus state for a clean highlight */
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--ignite-blush-dark);
    box-shadow: 0 0 4px rgba(210, 195, 184, 0.4);
}

.session-type {
    margin-top: 15px;
    font-size: 1.1rem;
    color: var(--ignite-green);
}

/* ================================
   BUTTONS — UNIFIED STYLE
================================ */

/* Center the Email button */
.contact-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 25px 0 40px;
}

/* Make Send + Email identical */
.contact-form button.button-primary,
.contact-buttons .button-primary {
    padding: 14px 32px;
    /* match global */
    margin-top: 0 !important;
    /* override global margin */
    text-align: center;
}

/* Center the Email button */
.contact-buttons {
    display: flex;
    justify-content: center;
    width: 100%;
}

.contact-buttons .button-primary {
    margin: 0 auto;
}

/* ================================
   CONTACT PAGE — FINAL ALIGNMENT FIX
================================ */

/* Ensure the right column behaves normally */
.contact-details-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centers everything inside */
    text-align: center;
    /* centers text and button */
}

/* Center the Email button perfectly */
.contact-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 25px 0 40px;
}

/* Match Send + Email button styles */
.contact-form button.button-primary,
.contact-buttons .button-primary {
    padding: 14px 32px;
    margin-top: 0 !important;
    text-align: center;
}

/* ================================
   CONTACT PAGE — CENTER BUTTONS
================================ */

/* Center both Call and Email buttons */
.contact-buttons {
    text-align: center;
    /* centers inline elements like <a> */
    margin: 25px 0 40px;
}

/* Make both buttons identical */
.contact-buttons .button-primary,
.contact-form button.button-primary {
    background: var(--ignite-blush);
    color: var(--ignite-green);
    padding: 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: 0.25s ease;
    border: 1px solid var(--ignite-blush-dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin-top: 0;
    /* override global margin */
}

/* Hover effect */
.contact-buttons .button-primary:hover,
.contact-form button.button-primary:hover {
    background: var(--ignite-blush-dark);
    color: var(--ignite-green);
}

/* Make the right column fill the full grid width */
.contact-details-area {
    width: 100% !important;
    display: block !important;
}

/* Center the Email button properly */
.contact-buttons {
    width: 100% !important;
    text-align: center !important;
    margin: 0px 0 40px;
}

/* Ensure the button itself doesn't push sideways */
.contact-buttons .button-primary {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
}

.contact-info a {
    color: var(--ignite-green);
    /* brand colour */
    text-decoration: underline;
    /* keeps accessibility */
    font-weight: 500;
    /* subtle emphasis */
}

.contact-info a:hover {
    color: var(--ignite-blush-dark);
    /* gentle hover */
}

/* ================================
   FOOTER
================================ */
footer {
    background: var(--ignite-blush);
    color: var(--ignite-green);
    text-align: center;
    padding: 25px 0;
    margin-top: 40px;
    font-size: 0.9rem;
}

.site-footer .footer-acknowledgement {
    background: #4f6b63;
    /* darker green from your palette */
    color: #ffffff;
    /* white text for contrast */
    font-size: 1.15rem;
    /* calmer size */
    line-height: 1.6;
    padding: 18px 20px;
    margin-bottom: 20px;
    border-radius: 6px;
}