/* === Bootstrap variable theming (scoped to Services section) === */
#services .btn.btn-primary {
    /* base */
    --bs-btn-color: #fff;
    --bs-btn-bg: #5e6d25;
    --bs-btn-border-color: #5e6d25;

    /* hover */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4f5c1f;          /* a bit darker */
    --bs-btn-hover-border-color: #4f5c1f;

    /* active */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #445219;         /* even darker */
    --bs-btn-active-border-color: #445219;

    /* disabled */
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5e6d25;
    --bs-btn-disabled-border-color: #5e6d25;

    /* focus ring */
    --bs-btn-focus-shadow-rgb: 94, 109, 37; /* rgb of #5e6d25 */
}

#services .btn.btn-outline-primary {
    /* outline variant driven by variables too */
    --bs-btn-color: #5e6d25;
    --bs-btn-border-color: #5e6d25;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5e6d25;
    --bs-btn-hover-border-color: #5e6d25;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4f5c1f;
    --bs-btn-active-border-color: #4f5c1f;

    --bs-btn-disabled-color: #5e6d25;
    --bs-btn-disabled-border-color: #5e6d25;

    --bs-btn-focus-shadow-rgb: 94, 109, 37;
}

/* Page background stays on brand */
#services.section-bg,
#services.srv-section { background-color: #e9e8e6; }

/* Optional: subtle card hover lift to bring back “alive” feeling */
#services .card,
#services .srv-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
#services .card:hover,
#services .srv-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}


/* === Services page: typography + spacing + uniform media === */
#services{
    --sage:#5e6d25; --ink:#1f2328; --muted:#636a73; --line:#dcdad6;
    background:#e9e8e6; color:var(--ink);
}

/* Hero */
#services .hero-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:.25rem}
#services .hero-title{color:var(--sage);font-weight:800;font-size:clamp(1.6rem,1.1rem + 1.8vw,2.25rem);line-height:1.2}
#services .lead{color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:72ch;margin:.25rem auto 1.25rem}

/* Keep Bootstrap dynamics for buttons */
#services .btn.btn-primary{
    --bs-btn-color:#fff; --bs-btn-bg:var(--sage); --bs-btn-border-color:var(--sage);
    --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#4f5c1f; --bs-btn-hover-border-color:#4f5c1f;
    --bs-btn-active-bg:#445219; --bs-btn-active-border-color:#445219;
    --bs-btn-focus-shadow-rgb:94,109,37;
}
#services .btn.btn-outline-primary{
    --bs-btn-color:var(--sage); --bs-btn-border-color:var(--sage);
    --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--sage); --bs-btn-hover-border-color:var(--sage);
    --bs-btn-focus-shadow-rgb:94,109,37;
}

/* Content block wrapper (works with your current .row/.col markup) */
#services .srv-row{
    background:#fff;border:1px solid var(--line);border-radius:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    padding:16px;                 /* inner padding so text doesn't touch edges */
    margin-block:28px;            /* even vertical rhythm between blocks */
    transition:transform .15s ease, box-shadow .15s ease;
}
#services .srv-row:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.08)}
#services .srv-body{padding:8px 12px}

/* UNIFORM image size (the key fix) */
#services .srv-thumb{
    width:100%;
    aspect-ratio: 16 / 9;         /* every image same height */
    object-fit: cover;
    display:block;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
}

/* Clear text hierarchy */
#services .srv-body h3{
    color:#222;font-weight:700;
    font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem);
    margin:0 0 .4rem;
}
#services .srv-body p{margin-bottom:.5rem;color:var(--muted)}
#services .srv-price{color:#222;font-weight:700;margin-top:.25rem;margin-bottom:0}
#services .srv-note{color:#6b6b6b;font-size:.92rem}


/* Ensure heading looks like Contact page */
#services .heading-section {
    position: relative;
    font-weight: 800;
    color: #0e1b2a; /* dark heading like Contact */
}
#services .heading-section::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    background: #5e6d25;
    border-radius: 2px;
    margin: .5rem auto 0; /* centered underline */
}
#services .subheading {
    color: #15803D; /* same green as Contact subtitle */
}


/* --- Modern card look for Services --- */
#services{
    --brand:#15803d;           /* your RGB(21,128,61) */
    --ink:#1f2328; --muted:#636a73; --line:#e5e7eb;
}

/* Card container */
#services .srv-row{
    position: relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    padding:20px;
    margin-block: 26px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    border-top:4px solid rgba(21,128,61,.18);       /* subtle accent bar */
}
#services .srv-row:hover{
    transform: translateY(-3px);
    box-shadow:0 16px 40px rgba(0,0,0,.09);
    border-top-color: var(--brand);
}

/* Media stays perfectly consistent */
#services .srv-thumb{
    width:100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display:block;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
}

/* Typography & spacing */
#services .srv-body{ padding:10px 14px; }
#services .srv-title{
    color:#0e1b2a; font-weight:800;
    font-size:clamp(1.25rem,1.05rem + .9vw,1.65rem);
    letter-spacing:-.01em; margin:0 0 .35rem;
}
#services .srv-sub{ color:var(--muted); line-height:1.65; margin:.25rem 0 .5rem; }
#services .srv-price{ color:#111827; font-weight:700; margin:.35rem 0 0; }
#services .srv-note{ color:#6b7280; font-size:.92rem; }

/* Small "chip" for format/category */
#services .srv-chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.25rem .6rem; font-size:.8rem; font-weight:600;
    color:var(--brand); background:rgba(21,128,61,.10);
    border:1px solid rgba(21,128,61,.18); border-radius:999px;
}

/* CTA keeps Bootstrap dynamics, just color-tuned */
#services .btn.btn-outline-primary{
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 21,128,61;
}
/* Add column gap for image/text inside cards */
#services .srv-row {
    --bs-gutter-x: 3.5rem;   /* ≈ 24px */
    --bs-gutter-y: 1.25rem;     /* vertical gap when stacked on mobile */
}
@media (min-width: 992px){
    #services .srv-row { --bs-gutter-x: 2rem; }  /* ≈ 32px on lg+ */
}



/* === CodeStitch #1529 (scoped, no title/image) === */

/* Local tokens so we don't override site-wide :root */
#reviews-1529{
    --primary: #15803d;             /* your brand green */
    --primaryLight: #15803d;
    --secondary: #15803d;           /* used for border/mask/blob */
    --secondaryLight: #15803d;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;

    /* 60px - 100px top/btm, 16px sides (from CodeStitch) */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;

    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Container */
#reviews-1529 .cs-container{
    /* 34.375rem (mobile) -> 80rem (tablet) */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6.3vw, 4rem);
}

/* The review card */
#reviews-1529 .cs-review{
    width: 100%;
    padding: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 7vw, 6.875rem);
    box-sizing: border-box;
    border: 1px solid var(--secondary);
    border-radius: clamp(2rem, 5vw, 6.25rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}
#reviews-1529 .cs-review:before{
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--secondary);
    border-radius: clamp(2rem, 5vw, 6.25rem);
    opacity: 0.1;
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* We are REMOVING .cs-image-group & .cs-picture in markup, so no need to style them here. */

/* Text block */
#reviews-1529 .cs-flex{ max-width: 46rem; }
#reviews-1529 .cs-quote{
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 400;
    margin: 0 0 1.5rem;
    color: var(--bodyTextColor);
}
#reviews-1529 .cs-name{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 0.25rem;
    color: var(--headerColor);
    display: block;
}
/* Use brand instead of orange for consistency */
#reviews-1529 .cs-job{
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--primary);
    display: block;
}

/* Mask (kept for completeness; harmless without picture) */
#reviews-1529 .cs-mask{
    --maskBorder: #ffffff;
    --maskBG: #fff0ec;
    width: 101%;
    height: 101%;
    position: absolute;
    inset: -1px;
}
#reviews-1529 .cs-mask path{ transition: stroke 0.3s; }

/* Decorative blobs & squiggles (as in CodeStitch) */
#reviews-1529 .cs-blob-wrapper{
    width: 100%; height: 100%;
    border-radius: clamp(2rem, 5vw, 6.25rem);
    overflow: hidden; pointer-events: none;
    position: absolute; inset: 0; z-index: -1;
}
#reviews-1529 .cs-blob{ --blobColor: var(--secondary); }
#reviews-1529 .cs-blob1{
    width: 6.25rem; height: auto; opacity: .25;
    position: absolute; top: -.3125rem; left: -1.875rem;
}
#reviews-1529 .cs-blob2{
    width: clamp(14.9375rem, 40vw, 28.8125rem); height: auto; opacity: .25;
    position: absolute; right: -3.125rem; bottom: -.9375rem;
}
#reviews-1529 .cs-graphic{ position: absolute; z-index: 1; }
#reviews-1529 .cs-graphic-one{
    width: clamp(3rem, 10vw, 8.625rem); height: auto;
    top: -1.25rem; right: -1.25rem; transform: rotate(104deg);
}
#reviews-1529 .cs-graphic-two{
    width: clamp(5.5rem, 15vw, 12.3125rem); height: auto;
    bottom: -1.25rem; left: -2rem;
}

/* Tablet+ */
@media only screen and (min-width: 31.25rem){        /* 500px */
    #reviews-1529 .cs-container{ max-width: 80rem; }
    #reviews-1529 .cs-review{
        max-width: none;
        flex-direction: row;         /* keep responsive behavior */
    }
    /* We’re not rendering .cs-image-group, so no flex split needed there */
}

/* Desktop+ */
@media only screen and (min-width: 81.25rem){        /* 1300px */
    #reviews-1529 .cs-picture{ font-size: inherit; }   /* harmless if not present */
}




/* === CodeStitch #1529 (scoped, no title/image) === */

/* Local tokens so we don't override site-wide :root */
#reviews-1529{
    --primary: #15803d;             /* your brand green */
    --primaryLight: #15803d;
    --secondary: #15803d;           /* used for border/mask/blob */
    --secondaryLight: #15803d;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;

    /* smaller overall section padding */
    --sectionPadding: clamp(1.5rem, 3.2vw, 2.5rem) 1rem;

    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Container */
#reviews-1529 .cs-container{
    /* 34.375rem (mobile) -> 80rem (tablet) */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 1.75rem); /* tighter gap */
}

/* The review card */
#reviews-1529 .cs-review{
    width: 100%;
    max-width: 880px; /* cap card width so it feels smaller */
    margin-inline: auto;
    padding: clamp(1rem, 2.6vw, 1.75rem) clamp(1rem, 3vw, 2rem); /* smaller padding */
    box-sizing: border-box;
    border: 1px solid var(--secondary);
    border-radius: clamp(1rem, 3vw, 2rem); /* slightly smaller radius */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}
#reviews-1529 .cs-review:before{
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--secondary);
    border-radius: clamp(1rem, 3vw, 2rem);
    opacity: 0.1;
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* We are REMOVING .cs-image-group & .cs-picture in markup, so no need to style them here. */

/* Text block */
#reviews-1529 .cs-flex{
    max-width: 46rem;
    text-align: center;          /* center text */
    margin-inline: auto;
}
#reviews-1529 .cs-quote{
    font-size: clamp(0.8rem, 1.5vw, 1rem); /* slightly smaller */
    line-height: 1.7;
    font-weight: 400;
    margin: 0 0 1rem;
    color: var(--bodyTextColor);
}
#reviews-1529 .cs-name{
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 0.25rem;
    color: var(--headerColor);
    display: block;
    text-align: center;          /* center name */
}
/* Use brand instead of orange for consistency */
#reviews-1529 .cs-job{
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--primary);
    display: block;
    text-align: center;          /* center role if used */
}

/* Mask (kept for completeness; harmless without picture) */
#reviews-1529 .cs-mask{
    --maskBorder: #ffffff;
    --maskBG: #fff0ec;
    width: 101%;
    height: 101%;
    position: absolute;
    inset: -1px;
}
#reviews-1529 .cs-mask path{ transition: stroke 0.3s; }

/* Decorative blobs & squiggles (as in CodeStitch) */
#reviews-1529 .cs-blob-wrapper{
    width: 100%; height: 100%;
    border-radius: clamp(1rem, 3vw, 2rem);
    overflow: hidden; pointer-events: none;
    position: absolute; inset: 0; z-index: -1;
}
#reviews-1529 .cs-blob{ --blobColor: var(--secondary); }
#reviews-1529 .cs-blob1{
    width: 4.5rem; height: auto; opacity: .25; /* smaller */
    position: absolute; top: -.3125rem; left: -1.875rem;
}
#reviews-1529 .cs-blob2{
    width: clamp(9rem, 22vw, 16rem); height: auto; opacity: .25; /* smaller */
    position: absolute; right: -3.125rem; bottom: -.9375rem;
}
#reviews-1529 .cs-graphic{ position: absolute; z-index: 1; }
/* Seed logo */
#reviews-1529 .cs-graphic-one{
    width: clamp(4rem, 8vw, 7rem);
    height: auto;
    top: -1.25rem;
    right: -2rem;
    transform: rotate(24deg);
    transform-origin: top right;
}


#reviews-1529 .cs-graphic-two{
    width: clamp(4.5rem, 10vw, 9rem); height: auto; /* smaller */
    bottom: -1.25rem; left: -2rem;
}

/* Tablet+ */
@media only screen and (min-width: 31.25rem){        /* 500px */
    #reviews-1529 .cs-container{ max-width: 80rem; }
    #reviews-1529 .cs-review{
        max-width: none;
        flex-direction: row;         /* keep responsive behavior */
    }
    /* We’re not rendering .cs-image-group, so no flex split needed there */
}

/* Desktop+ */
@media only screen and (min-width: 81.25rem){        /* 1300px */
    #reviews-1529 .cs-picture{ font-size: inherit; }   /* harmless if not present */
}