/* ========================================
   GARDEN GOATS AUSTRALIA – SERVICES PAGE
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Belleza&family=Caveat:wght@400..700&family=Fugaz+One&family=Montserrat:ital,wght@1,800&display=swap');

:root {
    --gg-green: #83c500;
    --gg-green-pale: #eaffd3;
    --gg-green-dark: #0a4a1c;
    --gg-green-deep: #00370c;
    --gg-ink: #172016;
}

* {
    box-sizing: border-box;
}

html:has(body.services-page) {
    overflow-x: clip;
}

body.services-page {
    margin: 0;
    min-height: 100vh;
    overflow-x: clip;
    background: linear-gradient(105deg, #f7ffec 0%, #f3ffe4 45%, #eaffd3 100%);
    color: var(--gg-ink);
    font-family: 'Belleza', sans-serif;
}


/* ========================================
   PLACEHOLDERS (swap for <img> later)
   ======================================== */

.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--gg-green-dark);
    background: rgba(131, 197, 0, 0.18);
    color: var(--gg-green-dark);
    text-align: center;
    overflow: hidden;
}

.image-placeholder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Once an image is placed, drop the dashed placeholder styling */
.image-placeholder:has(img) {
    border: 0;
    background: none;
}

.placeholder-text {
    color: #4d614a;
    font-style: italic;
}


/* ========================================
   HEADER
   ======================================== */

.services-header {
    position: relative;
    height: 48px;
    background: linear-gradient(90deg, #73b900 0%, #83c500 50%, #a4d92e 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
    z-index: 2;
    container-type: inline-size;
}

/* Logo size/position mirror the homepage (.site-logo in style.css) */
.services-logo {
    --mobile-logo-width: clamp(96px, 29vw, 124px);
    position: absolute;
    top: clamp(4px, 1.3vw, 7px);
    left: clamp(8px, 2vw, 12px);
    display: block;
    width: var(--mobile-logo-width);
    z-index: 10;
}

@media (min-width: 769px) {
    .services-logo {
        --desktop-page-gutter: clamp(8px, 0.8vw, 20px);
        top: clamp(8px, min(0.7cqw, 1vh), 14px);
        left: calc(var(--desktop-page-gutter) + clamp(10px, min(0.9cqw, 1.3vh), 20px));
        width: clamp(132px, min(10.5cqw, 15.8vh), 232px);
    }
}

.services-logo img {
    display: block;
    width: 100%;
    height: auto;
}


/* ========================================
   INTRODUCTION
   ======================================== */

.services-intro {
    --ute-w: 72vw;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin: 0;
    padding: 0 0 18px;
}

.services-intro-text {
    grid-row: 2;
    position: relative;
    z-index: 2;
    padding: 0 18px;
    margin-top: -3vw;
}

.services-intro h1 {
    margin: 0;
    color: var(--gg-green-dark);
    -webkit-text-stroke: 5px #eaffd3;
    paint-order: stroke fill;
    font-family: 'Fugaz One', cursive;
    font-size: clamp(30px, 9.5vw, 44px);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: 0.02em;
    /* hanging indent: first line (OUR) stays put, SERVICES starts 10px further right */
    padding-left: 10px;
    text-indent: -10px;
}

.services-subtitle {
    margin: 8px 0 0;
    -webkit-text-stroke: 0;
    color: var(--gg-green-deep);
    font-family: 'Caveat', cursive;
    font-size: clamp(20px, 5.8vw, 28px);
    line-height: 1.05;
}

.services-tagline {
    margin: 10px 0 14px;
    padding-top: 6px;
    border-top: 2px solid var(--gg-green);
    color: var(--gg-green-dark);
    font-family: 'Fugaz One', cursive;
    font-size: clamp(10px, 2.8vw, 13px);
    letter-spacing: 0.14em;
    display: inline-block;
}

.services-vehicle-photo {
    grid-row: 1;
    justify-self: end;
    position: relative;
    z-index: 1;
    width: var(--ute-w);
}

.services-vehicle-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Diagonal stripes that follow the photo's angled left edge (adjusted to the transparent image’s steeper diagonal) */
.services-vehicle-photo::before,
.services-vehicle-photo::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    width: calc(100% + 30px);
    pointer-events: none;
    --edge-top: calc(var(--ute-w) * 0.0229 + 30px);
    --edge-bottom: calc(var(--ute-w) * 0.224 + 30px);
}

/* dark inner stripe, ~5px thick */
.services-vehicle-photo::before {
    background: #003b16;
    clip-path: polygon(
        calc(var(--edge-top) - 21.2px) 0,
        var(--edge-top) 0,
        var(--edge-bottom) 100%,
        calc(var(--edge-bottom) - 21.2px) 100%
    );
}

/* lime outer stripe, ~10px thick, with a pale gap after the dark stripe */
.services-vehicle-photo::after {
    background: var(--gg-green);
    clip-path: polygon(
        calc(var(--edge-top) - 38.3px) 0,
        calc(var(--edge-top) - 27.6px) 0,
        calc(var(--edge-bottom) - 27.6px) 100%,
        calc(var(--edge-bottom) - 38.3px) 100%
    );
}

/* ONLINE QUOTE button: shared spec, identical to .quote-button in style.css */

.services-quote-button {
    display: block;
    box-sizing: border-box;
    height: 44px;
    min-height: 0;
    padding: 0 28px;
    border: 0;
    border-radius: 12px;
    background: #064b24;
    color: #fff;
    font-family: 'Fugaz One', cursive;
    font-size: 15px;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    outline: 0;
    box-shadow: 0 3px 8px rgba(0, 55, 12, 0.28);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.services-quote-button:hover {
    background: #0b6330;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 55, 12, 0.3);
}

.services-quote-button:active {
    background: #043a1a;
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 55, 12, 0.3);
}

.services-quote-button:focus-visible {
    outline: 3px solid #83c500;
    outline-offset: 3px;
}


/* ========================================
   MAIN SERVICES
   ======================================== */

.services-list {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 6vw, 36px);
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 16px 18px 40px;
}

.service-heading-band {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 14px 3px 8px;
    border-radius: 8px;
    background: linear-gradient(90deg, #eaffd3 0%, #c4ec6f 45%, var(--gg-green) 100%);
}

.service-heading-band h2 {
    margin: 0;
    color: var(--gg-green-deep);
    font-family: 'Fugaz One', cursive;
    font-size: clamp(17px, 5vw, 28px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.03em;
}

.service-icon {
    flex: 0 0 auto;
    display: block;
    width: 22px;
}

.service-icon img {
    display: block;
    width: 100%;
    height: auto;
}

.service-subtitle {
    margin: 1px 0 0;
    padding-left: 4px;
    color: var(--gg-green-dark);
    font-family: 'Caveat', cursive;
    font-weight: 600;
    font-size: clamp(21px, 5.8vw, 28px);
    line-height: 1.1;
}

.service-description {
    margin: 6px 0 0;
    padding-left: 4px;
    color: var(--gg-green-deep);
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 4.3vw, 18px);
    line-height: 1.6;
}

.service-description p {
    margin: 0;
}

.service-description p + p {
    margin-top: 11px;
}
/* ========================================
   MORE THAN MAINTENANCE
   ======================================== */

/* Green-to-white fade: begins where the NDIS section ends, fully white at the banner */
.more-section {
    --more-pad: clamp(32px, 5vw, 56px);
    position: relative;
    padding: var(--more-pad) 18px calc(var(--more-pad) / 2);
}

.more-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -32px;
    left: 0;
    right: 0;
    height: calc(32px + var(--more-pad));
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.28) 40%,
        rgba(255, 255, 255, 0.55) 60%,
        rgba(255, 255, 255, 0.82) 80%,
        #fff 100%);
    pointer-events: none;
}

.more-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: var(--more-pad);
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    pointer-events: none;
}

.more-inner {
    width: min(860px, 100%);
    margin: 0 auto;
}

.more-heading {
    padding: 9px 16px 7px;
    border-radius: 8px;
    background: var(--gg-green-dark);
    text-align: center;
}

.more-heading h2 {
    margin: 0;
    color: #fff;
    font-family: 'Fugaz One', cursive;
    font-size: clamp(22px, 4.2vw, 32px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.03em;
}

.more-intro {
    margin: 16px 0 0;
    color: var(--gg-green-deep);
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    text-align: left;
}

.more-intro-lead {
    display: block;
    margin: 0 0 6px;
    color: var(--gg-green-dark);
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-size: clamp(18px, 2.4vw, 22px);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: none;
    -webkit-text-stroke: 0;
    -webkit-font-smoothing: antialiased;
    line-height: 1.25;
}

.more-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.more-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px 18px 16px;
    border: 2px solid #d3efa0;
    border-radius: 34px 10px 34px 10px;
    background: linear-gradient(135deg, #f1fbdc 0%, #fbfff4 70%);
    box-shadow: 0 2px 6px rgba(10, 74, 28, 0.06);
}

.more-icon {
    flex: 0 0 auto;
    display: block;
    width: 84px;
}

.more-icon img {
    display: block;
    width: 100%;
    height: auto;
}

.more-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.more-label {
    color: var(--gg-green-dark);
    font-family: 'Fugaz One', cursive;
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.more-description {
    color: var(--gg-green-deep);
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
}


/* ========================================
   TABLET / DESKTOP
   ======================================== */

@media (min-width: 769px) {
    .services-header {
        height: 56px;
    }

    .services-intro {
        /* scales with the viewport below 1440px so the text never reaches the diagonal edge */
        --ute-w: min(810px, 56.25vw);
        --ute-bleed: calc(var(--ute-w) * 0.163);
        padding: 0;
        align-items: center;
        overflow-x: clip;
    }

    .services-vehicle-photo {
        margin-right: calc(var(--ute-bleed) * -1);
        align-self: start;
    }

    .services-intro-text,
    .services-vehicle-photo {
        grid-row: 1;
        grid-column: 1;
    }

    .services-intro-text {
        justify-self: start;
        margin-top: 0;
        padding: 24px 28px 24px min(232px, 16.1vw);
    }

    .services-intro h1 {
        font-size: clamp(54px, calc(7vw - max(0px, 1440px - 100vw) * 0.015), 103px);
        font-style: italic;
        line-height: 0.82;
        -webkit-text-stroke: 6px #eaffd3;
    }

    .services-subtitle {
        margin-top: -4px;
        /* keep the subtitle left of the photo's angled edge */
        max-width: none;
        white-space: nowrap;
        font-size: clamp(20px, 2vw, 28px);
        line-height: 0.95;
    }

    .services-tagline {
        margin: 8px 0 16px;
        font-size: 12px;
        letter-spacing: 0.1em;
    }

    .services-quote-button {
        position: relative;
        top: 15px;
        left: -50px;
        height: 48px;
        padding: 0 40px;
        font-size: 18px;
    }

    .services-list {
        gap: 0;
        width: min(1480px, 100%);
        padding: 40px 28px 32px;
    }

    .service-block {
        display: grid;
        grid-template-columns: 39% 1fr;
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 0;
        padding: 16px 0;
        border-bottom: 1px solid rgba(131, 197, 0, 0.45);
    }

    .service-block:last-child {
        border-bottom: 0;
    }

    .service-heading-band {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        gap: 10px;
        padding: 2px 16px 2px 6px;
        margin-right: 24px;
    }

    .service-heading-band h2 {
        font-size: clamp(18px, 1.8vw, 22px);
        line-height: 1.15;
    }

    .service-subtitle {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        margin-right: 24px;
        font-size: 26px;
    }

    .service-description {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        margin: 0;
        padding: 2px 0 2px 28px;
        border-left: 1px solid var(--gg-green);
        font-size: 16px;
        line-height: 1.5;
    }

}

.services-footer {
    background: #fff;
}

.services-footer-art {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

@media (max-width: 800px), (min-width: 801px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
    .more-section {
        padding: 28px 18px 18px;
    }

    .more-heading {
        padding: 8px 12px 6px;
    }

    .more-heading h2 {
        font-size: clamp(21px, 6vw, 28px);
    }

    .more-intro {
        margin-top: 13px;
        font-size: 15px;
        text-align: left;
    }

    .more-items {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 15px;
    }

    .more-item {
        gap: 12px;
        padding: 14px 16px 14px 12px;
        border-radius: 28px 8px 28px 8px;
    }

    .more-icon {
        width: 68px;
    }

    .more-label {
        font-size: 17px;
    }

    .more-description {
        font-size: 14px;
    }
}

/* Mobile refinements (desktop is unaffected) */
@media (max-width: 768px), (min-width: 769px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
    .services-intro {
        --ute-w: 79.2vw;
        --ute-bleed: calc(var(--ute-w) * 0.163);
        padding-bottom: 20px;
        overflow-x: clip;
    }

    .services-vehicle-photo {
        margin-right: calc(var(--ute-bleed) * -1);
    }

    .services-intro-text {
        padding: 0 20px;
        margin-top: calc(-9vw + 24px);
    }

    .services-intro h1 {
        font-size: clamp(34px, 10.5vw, 50px);
        font-style: italic;
        line-height: 0.82;
    }

    .services-subtitle {
        margin-top: 4px;
        font-size: clamp(19px, 5.6vw, 26px);
        line-height: 1;
    }

    .services-tagline {
        margin: 8px 0 14px;
        font-size: clamp(10px, 2.9vw, 12px);
        letter-spacing: 0.1em;
    }

    .services-list {
        gap: 0;
        padding: 20px 20px 32px;
    }

    .service-block {
        padding: 14px 0;
        border-bottom: 1px solid rgba(131, 197, 0, 0.45);
    }

    .service-block:first-child {
        padding-top: 0;
    }

    .service-block:last-child {
        border-bottom: 0;
    }

    .service-heading-band {
        padding: 3px 14px 3px 6px;
    }

    .service-subtitle {
        margin-top: 1px;
        padding-left: 6px;
        font-size: clamp(21px, 5.8vw, 26px);
        line-height: 1.05;
    }

    .service-description {
        margin-top: 2px;
        padding-left: 6px;
        font-size: 16px;
        line-height: 1.45;
    }
}

@media (max-width: 600px) {
    .services-header {
        height: 36px;
    }

    .services-intro-text {
        margin-top: calc(-9vw + 44px);
    }

    .service-description {
        text-align: left;
        margin-top: 10px;
        font-size: 15.5px;
        line-height: 1.45;
    }

    .service-subtitle {
        font-size: clamp(18.9px, 5.22vw, 23.4px);
    }

    .services-list {
        padding-top: 5px;
    }
}

/* Narrow desktop / tablet: hero keeps the stacked mobile composition (hero only) */
@media (min-width: 769px) and (max-width: 1000px) {
    .services-intro {
        --ute-w: 79.2vw;
        align-items: normal;
        padding: 0 0 20px;
    }

    .services-intro-text {
        grid-row: 2;
        justify-self: stretch;
        margin-top: -9vw;
        padding: 0 20px;
    }

    .services-vehicle-photo {
        align-self: auto;
    }

    .services-intro h1 {
        font-size: clamp(34px, 10.5vw, 50px);
        -webkit-text-stroke: 5px #eaffd3;
    }

    .services-subtitle {
        margin-top: 4px;
        white-space: normal;
        font-size: clamp(19px, 5.6vw, 26px);
        line-height: 1;
    }

    .services-tagline {
        margin: 8px 0 14px;
        font-size: 12px;
    }

    .services-quote-button {
        top: auto;
        left: auto;
    }
}

/* Ultrawide: larger ute, text group aligned with the centred services column (hero only) */
@media (min-width: 1600px) {
    .services-intro {
        --ute-w: clamp(810px, calc(810px + (100vw - 1600px) * 0.7), 1350px);
    }

    .services-intro-text {
        align-self: center;
        padding-left: max(232px, calc((100vw - 1480px) / 2 + 28px));
    }

    .services-intro h1 {
        font-size: clamp(103px, calc(103px + (100vw - 1600px) * 0.04), 124px);
    }

    .services-subtitle {
        font-size: clamp(28px, calc(28px + (100vw - 1600px) * 0.004), 33px);
    }

    .services-tagline {
        font-size: clamp(12px, calc(12px + (100vw - 1600px) * 0.0016), 14px);
    }

    .services-quote-button {
        left: 0;
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-quote-button {
        transition: none;
    }
}

.hero-word {
    display: inline-block;
    text-indent: 0;
    animation: hero-word-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-word-services {
    animation-name: hero-word-in-right;
    animation-duration: 0.6s;
    animation-delay: 0.25s;
}

@keyframes hero-word-in {
    from { transform: translateX(-100vw); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes hero-word-in-right {
    from { transform: translateX(100vw); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-word,
    .hero-word-services {
        animation: none;
    }
}


/* ========================================
   THREE PILLARS — TARGETED SERVICES REDESIGN
   ======================================== */
.services-main{width:min(1400px,calc(100% - 56px));margin:0 auto;padding:30px 0 50px}
.pillar{display:grid;grid-template-columns:minmax(280px,39%) minmax(0,1fr);align-items:center;gap:clamp(22px,3vw,52px);padding:22px 0;border-bottom:1px solid #b6dc78}
.pillar-photo{position:relative;aspect-ratio:1.32;border-radius:20px;overflow:hidden;background:linear-gradient(145deg,#dff6c0,#8bc942 60%,#4c912d);min-height:210px}
.pillar-photo img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.pillar-photo-fallback{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;color:#164f25;font:700 15px/1.4 'Belleza',sans-serif;letter-spacing:.14em}
.photo-daisy{font-size:46px;line-height:1}
.pillar-photo.has-photo .pillar-photo-fallback{display:none}
.pillar-content{min-width:0}
.pillar-number{display:flex;align-items:center;gap:12px;color:#76b900;font:italic 800 16px 'Montserrat',sans-serif}
.pillar-number:after{content:'';height:1px;width:78px;background:#b2d77b}
.pillar-content h2{margin:5px 0 0;color:#064b24;font:italic 400 clamp(24px,2.4vw,37px)/1.1 'Fugaz One',cursive;letter-spacing:-.025em}
.pillar-heading-leaf{color:#78bb10;font:normal 30px 'Belleza',sans-serif}
.pillar-tagline{margin:2px 0 11px;color:#104b27;font:600 clamp(22px,2.1vw,30px)/1.15 'Caveat',cursive}
.pillar-summary,.care-grid p{margin:0;color:#193b21;font:400 clamp(15px,1.12vw,17px)/1.52 'Segoe UI',Arial,sans-serif}
.pillar-features{list-style:none;padding:0;margin:20px 0 14px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.pillar-features li{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;color:#174524;font:400 12px/1.25 'Segoe UI',Arial,sans-serif}
.feature-icon{display:grid;place-items:center;width:clamp(37px,3.4vw,50px);height:clamp(37px,3.4vw,50px);border-radius:50%;background:#e3f9bd;color:#185b2d;font:normal 27px/1 'Segoe UI Symbol','Segoe UI',sans-serif}
.pillar-details{margin-top:10px}
.pillar-details summary{display:inline-flex;align-items:center;gap:12px;padding:10px 15px;border:1px solid #82bf16;border-radius:12px;color:#064b24;background:#f5ffe8;cursor:pointer;list-style:none;font:italic 400 13px 'Fugaz One',cursive;letter-spacing:.035em;user-select:none}
.pillar-details summary::-webkit-details-marker{display:none}
.pillar-details summary:hover{background:#e6f8c9}
.pillar-details summary:focus-visible{outline:3px solid #064b24;outline-offset:3px}
.toggle-sign:before{content:'+';font:700 20px/1 'Segoe UI',sans-serif}
.pillar-details[open] .toggle-sign:before{content:'−'}
.when-open{display:none}.pillar-details[open] .when-open{display:inline}.pillar-details[open] .when-closed{display:none}
.pillar-expanded{margin-top:14px;padding:18px 22px;border-left:3px solid #8bc500;border-radius:0 12px 12px 0;background:rgba(230,249,204,.65);color:#163c21;font:400 15.5px/1.65 'Segoe UI',Arial,sans-serif}
.pillar-expanded p{margin:0 0 12px}.pillar-expanded p:last-child{margin-bottom:0}
.pillar-expanded h3{margin:14px 0 6px;color:#07512a;font:400 17px/1.25 'Fugaz One',sans-serif}.pillar-expanded h3:first-child{margin-top:0}
.care-panel{margin:38px 0 0;padding:25px clamp(22px,3vw,45px);border-radius:20px;background:linear-gradient(110deg,#e4f8c9,#f3ffe6 48%,#d9f2b2)}
.care-title h2{margin:0;color:#064b24;font:italic 400 clamp(22px,2.4vw,33px)/1.2 'Fugaz One',cursive}
.care-title .pillar-tagline{margin:3px 0 18px}
.care-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.care-checklist{list-style:none;padding:0 0 0 28px;margin:0;border-left:1px solid #93c54d;display:grid;gap:10px;color:#173d20;font:400 14px/1.35 'Segoe UI',Arial,sans-serif}
.care-checklist li{position:relative;padding-left:25px}.care-checklist li:before{content:'✓';position:absolute;left:0;top:0;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#064b24;color:white;font:bold 12px Arial}
/* Compact desktop hero: preserve diagonal composition and all existing assets. */
@media(min-width:1001px){
 .services-intro{--ute-w:min(650px,46vw);min-height:0}
 .services-intro-text{padding-top:12px;padding-bottom:12px}
 .services-intro h1{font-size:clamp(52px,5.4vw,78px)}
 .services-quote-button{top:6px}
}
@media(min-width:1600px){
 .services-intro{--ute-w:clamp(650px,40vw,890px)}
 .services-intro h1{font-size:clamp(78px,5vw,100px)}
 .services-intro-text{padding-left:max(232px,calc((100vw - 1480px)/2 + 28px))}
}
@media(max-width:1000px){.services-main{width:min(850px,calc(100% - 36px))}.pillar{grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:22px}.pillar-features{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px), (min-width:681px) and (max-width:940px) and (orientation:landscape) and (max-height:500px){.services-main{width:calc(100% - 36px);padding-top:12px}.pillar{grid-template-columns:1fr;gap:17px;padding:22px 0}.pillar-photo{aspect-ratio:1.6;min-height:0}.pillar-content h2{font-size:clamp(22px,6vw,29px)}.pillar-features{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}.feature-icon{width:43px;height:43px}.care-panel{margin-top:22px;padding:22px 18px}.care-grid{grid-template-columns:1fr;gap:20px}.care-checklist{border-left:0;border-top:1px solid #93c54d;padding:19px 0 0}.pillar-expanded{padding:14px 16px}}
@media(prefers-reduced-motion:reduce){.pillar-details summary{scroll-behavior:auto}}

/* ========================================
   APPROVED SERVICE COPY – CONTENT HIERARCHY
   ======================================== */
.pillar-overview, .pillar-summary-body { display: block; }
.pillar-overview { margin-bottom: 9px; color: #064b24; font-weight: 650; line-height: 1.45; }
.pillar-summary-body { line-height: 1.58; }
.pillar-expanded h3:not(:first-child) { margin-top: 23px; padding-top: 16px; border-top: 1px solid rgba(10,74,28,.2); }
.pillar-expanded .subsection-tagline { margin: 0 0 12px; color: #104b27; font-style: italic; }
.pillar-expanded p { overflow-wrap: break-word; }
.care-grid > div > p .pillar-overview { margin-bottom: 10px; }
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .pillar-overview { margin-bottom: 8px; }
  .pillar-expanded h3:not(:first-child) { margin-top: 19px; padding-top: 14px; }
}

/* Service headings: replace numbering and ornaments with a restrained rule */
.pillar-content h2 { display: flex; align-items: center; gap: 8px; }
.pillar-content h2::after { content: ""; flex: 1 1 24px; min-width: 16px; height: 1px; background: #b2d77b; }
/* Seasonal work is a separate, optional addition to routine maintenance */
.seasonal-addon { margin-top: 24px; padding: 16px 0 0; border-top: 1px solid rgba(10,74,28,.22); }
.seasonal-addon-label { display: inline-block; margin: 0 0 9px !important; color: #37672b; font: 700 11px/1.35 'Segoe UI',Arial,sans-serif; letter-spacing: .12em; }
.pillar-expanded .seasonal-addon h3 { margin: 0 0 6px; padding: 0; border: 0; }
@media(max-width:680px), (min-width:681px) and (max-width:940px) and (orientation:landscape) and (max-height:500px) { .pillar-content h2 { gap: 8px; } .seasonal-addon { margin-top: 20px; } }

/* Desktop refinement: anchor photographs to the service headings instead of
   vertically centring them against expanded Read More content. */
@media (min-width: 1001px) {
  .services-main { padding-top: 12px; }
  .pillar { align-items: start; padding: 18px 0 24px; gap: clamp(22px, 2.5vw, 40px); }
  .pillar-photo { align-self: start; aspect-ratio: 1.55; min-height: 0; }
  .pillar-content { align-self: start; }
  .pillar-tagline { margin-bottom: 8px; }
  .pillar-features { margin-top: 14px; margin-bottom: 10px; }
  .pillar-details { margin-top: 7px; }
  .pillar-expanded { margin-top: 11px; }
}

/* Compact editorial service layout — desktop only.
   Photos support the copy rather than determine the height of each section. */
@media (min-width: 1001px) {
  .services-main { padding-top: 8px; }
  .pillar {
    grid-template-columns: minmax(185px, 27%) minmax(0, 1fr);
    gap: clamp(22px, 2.4vw, 38px);
    align-items: start;
    padding: 13px 0 16px;
  }
  .pillar-photo {
    aspect-ratio: 4 / 3;
    min-height: 0;
    width: 100%;
    align-self: start;
    border-radius: 15px;
  }
  .pillar-content h2 { margin-top: 1px; }
  .pillar-tagline { margin: 1px 0 7px; }
  .pillar-overview { margin-bottom: 5px; }
  .pillar-summary-body { line-height: 1.48; }
  .pillar-features { margin: 10px 0 7px; gap: 8px; }
  .pillar-features li { gap: 5px; }
  .feature-icon { width: 40px; height: 40px; font-size: 23px; }
  .pillar-details { margin-top: 5px; }
  .pillar-details summary { padding: 8px 13px; }
}


/* Final spacing and transition refinements */
/* Section headings provide separation without additional full-width dividers. */
.pillar { border-bottom: 0; }
@media (min-width: 1001px) {
  .pillar { padding-top: 27px; padding-bottom: 30px; }
}
@media (min-width: 681px) and (max-width: 1000px) {
  .pillar { padding-top: 27px; padding-bottom: 30px; }
}
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .pillar { padding-top: 29px; padding-bottom: 31px; }
  /* A wrapped long heading gets a full-width understated rule beneath it. */
  .pillar-content h2 { flex-wrap: wrap; column-gap: 8px; row-gap: 7px; }
  .pillar-content h2::after { flex: 0 0 100%; min-width: 0; }
}
/* Transition the pale page background into the white illustrated footer gradually.
   Keep the artwork itself on white so its existing image background blends. */
.services-footer {
  background: linear-gradient(to bottom, #f3ffe4 0, #f8fff1 55px, #ffffff 155px);
  padding-top: 155px;
}
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-footer {
    background: linear-gradient(to bottom, #f3ffe4 0, #ffffff 105px);
    padding-top: 105px;
  }
}

/* Desktop proportions inspired by 80% zoom, without shrinking body text. */
@media (min-width: 1001px) {
  .services-main { width: min(1180px, calc(100% - 64px)); padding-top: 5px; padding-bottom: 38px; }
  .pillar { grid-template-columns: minmax(175px, 24%) minmax(0, 1fr); column-gap: clamp(24px, 2.2vw, 34px); padding-top: 23px; padding-bottom: 24px; }
  .pillar-photo { aspect-ratio: 4 / 3; border-radius: 14px; }
  .pillar-content h2 { font-size: clamp(24px, 2vw, 32px); }
  .pillar-tagline { font-size: clamp(22px, 1.85vw, 27px); }
  .pillar-summary, .care-grid p { font-size: 16px; }
  .pillar-features { margin-top: 12px; margin-bottom: 9px; }
  .services-intro { --ute-w: min(565px, 40vw); }
  .services-intro-text { padding-top: 8px; padding-bottom: 8px; }
  .services-intro h1 { font-size: clamp(52px, 4.8vw, 72px); }
  .services-quote-button { top: 3px; }
}
@media (min-width: 1600px) {
  .services-intro { --ute-w: clamp(565px, 36vw, 790px); }
  .services-intro h1 { font-size: clamp(72px, 4.6vw, 90px); }
}


/* October refinement: retain legible text while giving the desktop
   the compact visual rhythm of the preferred 80%-zoom reference. */
@media (min-width: 1001px) {
  .services-main { width: min(1080px, calc(100% - 64px)); padding-top: 0; }
  .pillar { grid-template-columns: minmax(155px, 20%) minmax(0, 1fr); column-gap: clamp(22px, 2vw, 30px); padding-top: 19px; padding-bottom: 20px; }
  .pillar-photo { aspect-ratio: 4 / 3; }
  .pillar-content h2 { font-size: clamp(23px, 1.8vw, 29px); }
  .pillar-tagline { font-size: clamp(21px, 1.65vw, 25px); margin-bottom: 5px; }
  .pillar-summary, .care-grid p { font-size: 15.5px; }
  .pillar-features { margin-top: 9px; margin-bottom: 6px; }
  .feature-icon { width: 37px; height: 37px; font-size: 22px; }
  .services-intro { --ute-w: min(510px, 36vw); }
  .services-intro h1 { font-size: clamp(50px, 4.4vw, 66px); }
}
@media (min-width: 1600px) {
  .services-intro { --ute-w: clamp(510px, 32vw, 720px); }
  .services-intro h1 { font-size: clamp(66px, 4.2vw, 84px); }
}

/* Mobile: photographs are secondary visual accents, not full-width cards.
   Preserve the original images, copy and the expandable sections. */
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .pillar { gap: 12px; padding-top: 23px; padding-bottom: 24px; }
  .pillar-photo { width: min(76%, 320px); aspect-ratio: 1.85; min-height: 0; border-radius: 12px; }
  .pillar-content h2 { margin-top: 0; }
}

/* Approved editorial mockup — responsive service proportions.
   Overrides the earlier experimental compact-desktop rules. */
@media (min-width: 1001px) {
  .services-main {
    width: min(1280px, calc(100% - 72px));
    padding-top: 18px;
    padding-bottom: 55px;
  }
  .pillar {
    grid-template-columns: minmax(260px, 29%) minmax(0, 1fr);
    gap: clamp(26px, 2.5vw, 38px);
    align-items: start;
    padding: 23px 0 28px;
  }
  .pillar-photo {
    width: 100%;
    aspect-ratio: 1.55;
    min-height: 0;
    border-radius: 13px;
  }
  .pillar-content h2 { font-size: clamp(26px, 2.05vw, 34px); margin-top: 0; }
  .pillar-tagline { font-size: clamp(23px, 1.8vw, 28px); margin: 3px 0 8px; }
  .pillar-summary { font-size: 16px; line-height: 1.55; }
  .pillar-overview { margin-bottom: 7px; }
  .pillar-summary-body { line-height: 1.55; }
  .pillar-features { margin: 17px 0 12px; gap: 10px; }
  .pillar-features li { gap: 7px; font-size: 12px; }
  .feature-icon { width: 43px; height: 43px; font-size: 24px; }
  .pillar-details { margin-top: 9px; }
  .pillar-details summary { padding: 9px 14px; }
}
@media (min-width: 1600px) {
  .services-main { width: min(1330px, calc(100% - 96px)); }
}
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-main { width: calc(100% - 32px); padding-top: 16px; }
  .pillar { grid-template-columns: 1fr; gap: 12px; padding: 22px 0 25px; }
  .pillar-photo {
    width: 100%;
    max-width: none;
    aspect-ratio: 2.05;
    min-height: 0;
    border-radius: 12px;
  }
  .pillar-content h2 { margin-top: 0; }
}


/* Ultrawide editorial polish — targeted refinement only.
   Keep hero, mobile layout, content and interaction unchanged. */
@media (min-width: 1001px) {
  .pillar {
    grid-template-columns: minmax(270px, 31%) minmax(0, 1fr);
    column-gap: clamp(28px, 2.5vw, 40px);
  }
  .pillar-features {
    width: 100%;
    max-width: 690px;
    margin-top: 18px;
    margin-bottom: 15px;
    column-gap: 12px;
    row-gap: 12px;
  }
  .pillar-details { margin-top: 13px; }
}

/* Desktop hero heading breathing room — leave the logo, ute and mobile layout untouched. */
@media (min-width: 1001px) {
  .services-intro-text {
    padding-top: 36px;
  }
}

/* Mobile service photos: taller framing, less aggressive cropping. */
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .pillar-photo { aspect-ratio: 4 / 3; }
}

/* Mobile-only finishing touches: readability and comfortable section rhythm. */
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .pillar { padding-bottom: 39px; }
  .pillar-summary, .care-grid p { font-size: 16px; line-height: 1.65; }
  .pillar-overview { margin-bottom: 11px; line-height: 1.5; }
  .pillar-summary-body { line-height: 1.65; }
  .pillar-features { margin-top: 19px; margin-bottom: 15px; gap: 15px 9px; }
  .pillar-features li { font-size: 12.5px; line-height: 1.35; gap: 8px; }
  .feature-icon { width: 47px; height: 47px; font-size: 25px; }
  .pillar-details { margin-top: 10px; }
  .care-title h2 { font-size: clamp(24px, 6vw, 29px); }
  .care-checklist { font-size: 14px; line-height: 1.5; }
}

/* NDIS: full-width introduction, two-column benefit list, then expanded copy.
   No divider or forced vertical stretching. */
.care-panel { display: block; }
.care-intro { margin-bottom: 18px; }
.care-intro > p { margin: 0; max-width: 940px; }
.care-intro .care-title .pillar-tagline { margin-bottom: 15px; }
.care-content-stack { display: block; }
.care-content-stack .care-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(22px, 4vw, 60px);
  row-gap: 14px;
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  max-width: 1040px;
}
.care-content-stack .care-checklist li { min-width: 0; }
.care-content-stack .care-details { margin: 0; }
.care-content-stack .care-details > summary { width: max-content; }
.care-content-stack .care-details .pillar-expanded {
  max-width: 780px;
  margin-top: 10px;
}
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .care-intro { margin-bottom: 16px; }
  .care-content-stack .care-checklist {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
    margin-bottom: 18px;
  }
  .care-content-stack .care-details .pillar-expanded { max-width: 100%; }
}

/* NDIS / DVA / aged-care — illustrated full-width feature */
.care-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 38px 0 0;
  padding: clamp(24px,3vw,48px);
  border-radius: 24px;
  background: linear-gradient(110deg,#f0fbe3 0%,#effbe0 65%,#e8f8d6 100%);
}
.care-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto auto;
  width: 57%;
  height: min(100%, 610px);
  background: url('images/NDIS.png') right bottom / contain no-repeat;
  pointer-events: none;
}
.care-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,rgba(244,253,234,.6) 0%,rgba(244,253,234,.3) 48%,transparent 75%);
  pointer-events: none;
}
.care-intro { max-width: 58%; margin-bottom: 18px; }
.care-intro > p { max-width: none; }
.care-title h2 { font-size: clamp(25px,2.9vw,43px); }
.care-title .pillar-tagline { font-size: clamp(23px,2.2vw,32px); }
.care-intro .pillar-overview { font-size: clamp(17px,1.3vw,21px); }
.care-content-stack { position: relative; }
.care-content-stack .care-checklist { max-width: 59%; column-gap: 22px; }
.care-content-stack .care-checklist li { font-size: clamp(13px,1.05vw,16px); }
.care-content-stack .care-details .pillar-expanded {
  max-width: none;
  margin-top: 12px;
  background: rgba(235,249,215,.94);
  backdrop-filter: blur(4px);
}
@media(min-width:1001px) {
  .services-main { width: min(1480px,calc(100% - 56px)); }
  .care-panel { margin-top: 42px; }
}
@media(min-width:681px) and (max-width:1100px) {
  .care-panel::before { width: 54%; opacity: .72; }
  .care-intro { max-width: 65%; }
  .care-content-stack .care-checklist { max-width: 67%; }
}
@media(max-width:680px), (min-width:681px) and (max-width:940px) and (orientation:landscape) and (max-height:500px) {
  .care-panel { padding: 22px 18px; }
  .care-panel::before { width: 100%; height: 270px; top: 0; opacity: .32; background-position: right top; }
  .care-panel::after { background: linear-gradient(180deg,rgba(244,253,234,.58),rgba(244,253,234,.94) 240px); }
  .care-intro { max-width: 100%; }
  .care-content-stack .care-checklist { max-width: 100%; grid-template-columns: 1fr; }
  .care-title h2 { font-size: clamp(23px,6vw,30px); }
}

/* Routine Maintenance: custom illustrated service icons */
.pillar-features .feature-icon:has(img){overflow:hidden;grid-template:minmax(0,1fr)/minmax(0,1fr);}
.pillar-features .feature-icon img{display:block;width:100%;height:100%;object-fit:contain;}

/* Routine Maintenance only: enlarge illustrated icons to 56px. */
#pillar-01-heading ~ .pillar-features .feature-icon { width:56px; height:56px; font-size:initial; background:transparent; }
/* Target via section structure for consistent browser support. */
.pillar:has(#pillar-01-heading) .pillar-features .feature-icon { width:56px; height:56px; font-size:initial; background:transparent; }
.pillar:has(#pillar-01-heading) .pillar-features .feature-icon img { width:100%; height:100%; object-fit:contain; }

/* Routine Maintenance: enlarge artwork within existing 56px circles only. */
.pillar:has(#pillar-01-heading) .pillar-features .feature-icon img { transform:scale(1.25); transform-origin:center; }

/* Routine Maintenance: clear 72px illustrated icons, with artwork fully visible. */
.pillar:has(#pillar-01-heading) .pillar-features .feature-icon {
  width:72px; height:72px; flex:0 0 72px; overflow:visible; background:transparent;
}
.pillar:has(#pillar-01-heading) .pillar-features .feature-icon img {
  display:block; width:100%; height:100%; object-fit:contain; transform:scale(calc(1.12 * var(--icon-k, 1))) translate(var(--icon-x, 0%), var(--icon-y, 0%));
}
.pillar:has(#pillar-01-heading) .pillar-features { align-items:start; }
@media(max-width:680px), (min-width:681px) and (max-width:940px) and (orientation:landscape) and (max-height:500px) {
  .pillar:has(#pillar-01-heading) .pillar-features .feature-icon {
    width:clamp(56px,17vw,72px); height:clamp(56px,17vw,72px); flex-basis:auto;
  }
}

/* Restoration: match approved 72px Routine Maintenance illustration sizing. */
.pillar:has(#pillar-02-heading) .pillar-features .feature-icon {
  width:72px; height:72px; flex:0 0 72px; overflow:visible; background:transparent;
}
.pillar:has(#pillar-02-heading) .pillar-features .feature-icon img {
  display:block; width:100%; height:100%; object-fit:contain; transform:scale(calc(1.12 * var(--icon-k, 1))) translate(var(--icon-x, 0%), var(--icon-y, 0%));
}
.pillar:has(#pillar-02-heading) .pillar-features { align-items:start; }
@media(max-width:680px), (min-width:681px) and (max-width:940px) and (orientation:landscape) and (max-height:500px) {
  .pillar:has(#pillar-02-heading) .pillar-features .feature-icon {
    width:clamp(56px,17vw,72px); height:clamp(56px,17vw,72px); flex-basis:auto;
  }
}

/* Lawn & Garden Improvements: match approved 72px illustrated icon sizing. */
.pillar:has(#pillar-03-heading) .pillar-features .feature-icon { width:72px; height:72px; flex:0 0 72px; overflow:visible; background:transparent; }
.pillar:has(#pillar-03-heading) .pillar-features .feature-icon img { display:block; width:100%; height:100%; object-fit:contain; transform:scale(calc(1.12 * var(--icon-k, 1))) translate(var(--icon-x, 0%), var(--icon-y, 0%)); }
.pillar:has(#pillar-03-heading) .pillar-features { align-items:start; }
@media(max-width:680px), (min-width:681px) and (max-width:940px) and (orientation:landscape) and (max-height:500px) { .pillar:has(#pillar-03-heading) .pillar-features .feature-icon { width:clamp(56px,17vw,72px); height:clamp(56px,17vw,72px); flex-basis:auto; } }

/* Desktop hero: bring the ute into the composition without distorting the photo.
   Mobile and stacked tablet hero remain unchanged. */
@media (min-width: 1001px) {
  .services-intro { --ute-w: min(688px, 48.6vw); }
}
@media (min-width: 1600px) {
  .services-intro { --ute-w: clamp(688px, 43.2vw, 972px); }
}

/* Ultrawide desktop: bring the hero heading and quote group left for balance.
   Overrides earlier centred-column padding without affecting other breakpoints. */
@media (min-width: 1600px) {
  .services-intro-text {
    padding-left: clamp(170px, calc((100vw - 1480px) / 2 - 92px), 320px);
  }
}


/* Belleza typography for service headings and expanded-section subheadings.
   Keep the hero title, handwritten taglines and buttons unchanged. */
.services-page .pillar-content h2,
.services-page .care-title h2,
.services-page .pillar-expanded h3 {
    font-family: 'Belleza', sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.025em;
}

/* Belleza for the short introductory descriptions below each service tagline.
   Preserve the handwritten taglines, feature labels and expanded body copy. */
.services-page .pillar-content > .pillar-summary,
.services-page .pillar-content > .pillar-summary .pillar-summary-body {
    font-family: 'Belleza', sans-serif;
    font-weight: 400;
}
@media (min-width: 769px) {
    .services-page .pillar-content > .pillar-summary {
        font-size: clamp(18px, 1.12vw, 19px);
        line-height: 1.5;
    }
}


/* Editorial refinements: carry Belleza through expanded service content. */
.services-page .pillar-expanded {
  font-family: 'Belleza', sans-serif;
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 1.62;
  background: rgba(230, 249, 204, 0.43);
  padding: 23px 26px;
}
.services-page .pillar-expanded p { line-height: 1.62; }
.services-page .pillar-expanded .seasonal-addon h3 {
  font-family: 'Belleza', sans-serif;
  font-size: clamp(19px, 1.25vw, 22px);
  line-height: 1.35;
  letter-spacing: 0.035em;
}
/* Give the illustrated services a touch more horizontal space on desktop only. */
@media (min-width: 1001px) {
  .services-page .pillar-features { gap: 13px; }
}
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page .pillar-expanded { padding: 18px 18px; font-size: 16px; }
}


/* Desktop editorial proportions: retain the open feel of the zoomed-out view
   while keeping all reading text at a comfortable, real CSS size.
   Mobile and tablet layouts are deliberately excluded. */
@media (min-width: 1001px) {
  .services-page .services-main {
    width: min(1320px, calc(100% - 96px));
    padding-top: 18px;
  }
  .services-page .pillar {
    grid-template-columns: minmax(260px, 29%) minmax(0, 1fr);
    column-gap: clamp(30px, 3vw, 44px);
    padding-top: 23px;
    padding-bottom: 28px;
    align-items: start;
  }
  .services-page .pillar-photo {
    aspect-ratio: 1.55;
    min-height: 0;
  }
  .services-page .pillar-content h2 {
    font-size: clamp(26px, 1.8vw, 33px);
  }
  .services-page .pillar-content > .pillar-summary {
    font-size: 18px;
    line-height: 1.55;
  }
  .services-page .pillar-expanded {
    font-size: 18px;
    line-height: 1.6;
    max-width: none;
    padding: 24px 28px;
  }
  .services-page .pillar-expanded p { line-height: 1.6; }
  .services-page .pillar-features {
    margin-top: 14px;
    margin-bottom: 11px;
    column-gap: 15px;
  }
  .services-page .pillar-features li { font-size: 13px; }
}

/* Desktop-only second pass: a more compact, editorial composition.
   Keep the reading copy at 18px; do not zoom the page. */
@media (min-width: 1001px) {
  .services-page .services-main {
    width: min(1190px, calc(100% - 88px));
    padding-top: 12px;
  }
  .services-page .pillar {
    grid-template-columns: minmax(220px, 27%) minmax(0, 1fr);
    column-gap: clamp(27px, 2.7vw, 39px);
    padding-top: 18px;
    padding-bottom: 21px;
  }
  .services-page .pillar-photo { aspect-ratio: 1.55; }
  .services-page .pillar-content h2 { font-size: clamp(24px, 1.65vw, 29px); }
  .services-page .pillar-tagline { font-size: clamp(20px, 1.5vw, 24px); }
  .services-page .pillar-content > .pillar-summary { font-size: 18px; line-height: 1.5; }
  .services-page .pillar-expanded { font-size: 18px; line-height: 1.6; }
  .services-page .pillar-features { margin-top: 10px; margin-bottom: 8px; column-gap: 11px; }
  .services-page .pillar-features li { font-size: 12px; }
  .services-page .pillar .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-01-heading) .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-02-heading) .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-04-heading) .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-03-heading) .pillar-features .feature-icon {
    width: 62px; height: 62px; flex: 0 0 62px;
  }
  .services-page .services-intro { --ute-w: min(620px, 43vw); }
  .services-page .services-intro h1 { font-size: clamp(53px, 5.1vw, 79px); }
}
@media (min-width: 1600px) {
  .services-page .services-intro { --ute-w: clamp(620px, 39vw, 850px); }
}


/* Desktop composition reset — deliberately scoped; mobile and tablet untouched.
   Scale the hero down, widen the editorial content, and keep text readable. */
@media (min-width: 1001px) {
  .services-page .services-logo {
    width: clamp(100px, 7.4vw, 142px);
  }
  .services-page .services-intro {
    --ute-w: clamp(385px, 31vw, 610px);
    min-height: 0;
    padding-bottom: 8px;
  }
  .services-page .services-intro-text {
    padding: 12px 20px 14px clamp(155px, 12vw, 225px);
    margin-top: 0;
  }
  .services-page .services-intro h1 {
    font-size: clamp(42px, 3.65vw, 61px);
    line-height: .84;
    -webkit-text-stroke: 4px #eaffd3;
  }
  .services-page .services-subtitle {
    font-size: clamp(19px, 1.65vw, 25px);
    margin-top: 4px;
  }
  .services-page .services-tagline {
    font-size: 10px;
    margin: 6px 0 10px;
  }
  .services-page .services-quote-button {
    height: 38px;
    padding: 0 22px;
    font-size: 12px;
    border-radius: 9px;
  }
  .services-page .services-main {
    width: min(1380px, calc(100% - 112px));
    padding-top: 12px;
  }
  .services-page .pillar {
    grid-template-columns: minmax(215px, 245px) minmax(0, 1fr);
    column-gap: clamp(28px, 2.7vw, 44px);
    padding: 14px 0 20px;
  }
  .services-page .pillar-photo {
    width: 100%;
    aspect-ratio: 1.55;
    min-height: 0;
    border-radius: 11px;
  }
  .services-page .pillar-content h2 { font-size: clamp(22px, 1.48vw, 26px); }
  .services-page .pillar-tagline { font-size: clamp(18px, 1.25vw, 22px); margin-bottom: 5px; }
  .services-page .pillar-content > .pillar-summary {
    font-size: 17px;
    line-height: 1.48;
  }
  .services-page .pillar-expanded {
    font-size: 17px;
    line-height: 1.55;
    padding: 22px 26px;
  }
  .services-page .pillar-expanded p { line-height: 1.55; }
  .services-page .pillar-features {
    margin-top: 9px;
    margin-bottom: 7px;
    gap: 10px;
  }
  .services-page .pillar-features li { font-size: 12px; }
  .services-page .pillar .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-01-heading) .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-02-heading) .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-04-heading) .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-03-heading) .pillar-features .feature-icon {
    width: 55px; height: 55px; flex: 0 0 55px;
  }
}
@media (min-width: 1600px) {
  .services-page .services-intro { --ute-w: clamp(500px, 31vw, 650px); }
  .services-page .services-intro-text {
    padding-left: max(185px, calc((100vw - 1380px) / 2));
  }
}

/* Desktop header alignment and subtle heading refinement (mobile unchanged). */
@media (min-width: 1001px) {
  .services-page .services-intro-text {
    padding-left: clamp(150px, 10vw, 185px);
  }
  .services-page .pillar-content h2 {
    font-size: clamp(21px, 1.40vw, 24.5px);
  }
}
@media (min-width: 1600px) {
  .services-page .services-intro-text {
    padding-left: clamp(150px, 9.5vw, 175px);
  }
}

/* Header CTA and featured photography — desktop only, preserving mobile layout. */
@media (min-width: 1001px) {
  /* Keep the CTA aligned with the heading and tagline, rather than offsetting it. */
  .services-page .services-intro .services-quote-button {
    position: relative;
    top: 0;
    left: 0;
    margin: 1px 0 0;
    display: block;
    width: fit-content;
    transform: none;
  }
  .services-page .services-intro .services-tagline {
    margin-bottom: 8px;
  }
  /* Give the actual project photographs more presence without enlarging typography. */
  .services-page .pillar {
    grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
    column-gap: clamp(26px, 2.5vw, 40px);
  }
  .services-page .pillar-photo {
    aspect-ratio: 1.55;
  }
}
@media (min-width: 1001px) and (max-width: 1150px) {
  .services-page .pillar {
    grid-template-columns: minmax(245px, 29%) minmax(0, 1fr);
  }
}

/* Larger featured service photography and more prominent quote CTA — desktop only. */
@media (min-width: 1001px) {
  .services-page .pillar {
    grid-template-columns: minmax(300px, 375px) minmax(0, 1fr);
    column-gap: clamp(26px, 2.5vw, 40px);
  }
  .services-page .services-intro .services-quote-button {
    height: 46px;
    padding: 0 32px;
    font-size: 15px;
    border-radius: 10px;
  }
}
@media (min-width: 1001px) and (max-width: 1150px) {
  .services-page .pillar { grid-template-columns: minmax(270px, 33%) minmax(0, 1fr); }
}

/* Final desktop refinements: nudge CTA left and give service sections more air. */
@media (min-width: 1001px) {
  .services-page .services-intro .services-quote-button { left: -4px; }
  .services-page .pillar { padding-top: 23px; padding-bottom: 37px; }
}

/* Keep the illustrated soil footer contained on desktop; mobile unchanged. */
@media (min-width: 801px) {
  .services-footer-art {
    width: min(1100px, 100%);
    max-width: 100%;
    height: auto;
    margin-inline: auto;
  }
}

/* Desktop: align soil illustration with the service content width,
   and close the excess gap above it. Mobile is untouched. */
@media (min-width: 1001px) {
  .services-page .services-footer { padding-top: 82px; }
  .services-page .services-footer-art {
    display: block;
    width: min(1380px, calc(100% - 112px));
    max-width: 100%;
    height: auto;
    margin-inline: auto;
  }
}

/* Refined care panel: quiet, text-led closing section (all viewport sizes). */
.services-page .care-panel {
  background: linear-gradient(125deg, #f2fbe9 0%, #eaf7dc 100%);
  border: 1px solid rgba(31, 99, 43, .13);
  box-shadow: 0 8px 26px rgba(20, 66, 31, .035);
}
.services-page .care-panel::before,
.services-page .care-panel::after { content: none; display: none; }
.services-page .care-intro { max-width: 100%; margin-bottom: 20px; }
.services-page .care-intro > p:not(.care-copy) { max-width: 850px; }
.services-page .care-content-stack .care-checklist {
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 5vw, 90px);
  row-gap: 16px;
  margin-bottom: 0;
}
.services-page .care-content-stack .care-checklist li { font-size: clamp(14px, 1vw, 16px); line-height: 1.5; }
@media (max-width: 768px), (min-width: 769px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page .care-content-stack .care-checklist {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .services-page .care-details { display: none; }
}

/* Desktop finishing refinement: compact, borderless care statement and nearby footer.
   Mobile and tablet remain as previously designed. */
@media (min-width: 1001px) {
  .services-page .care-panel {
    box-sizing: border-box;
    width: min(900px, 100%);
    margin: 30px auto 0;
    padding: 30px 34px 32px;
    border: 0;
    box-shadow: none;
    border-radius: 18px;
    background: linear-gradient(125deg, #f2fbe9 0%, #eaf7dc 100%);
  }
  .services-page .care-intro {
    max-width: 100%;
    margin-bottom: 29px;
  }
  .services-page .care-intro > p:not(.care-copy) { max-width: 790px; }
  .services-page .care-content-stack .care-checklist {
    width: min(760px, 100%);
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 18px;
    margin: 0;
  }
  .services-page .services-main { padding-bottom: 0; }
  .services-page .services-footer { padding-top: 22px; }
}

/* Desktop NDIS closing statement: align with service photography, without a card. */
@media (min-width: 1001px) {
  .services-page .care-panel {
    width: min(900px, 100%);
    margin: 38px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .services-page .care-content-stack .care-checklist {
    width: min(760px, 100%);
  }
  .services-page .services-footer { padding-top: 28px; }
}

/* Mobile only: bring the underground illustration closer to the NDIS section. */
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page .services-footer {
    padding-top: 12px;
    background: linear-gradient(to bottom, #f3ffe4 0, #ffffff 75px);
  }
}

/* Final desktop polish: a gentler transition, more space above the NDIS
   statement, and a heading proportionate to the service titles.
   Mobile spacing and its raised footer remain unchanged. */
@media (min-width: 1001px) {
  .services-page .care-panel { margin-top: 68px; }
  .services-page .care-title h2 { font-size: clamp(23px, 2.3vw, 36px); }
  .services-page .services-footer {
    background: linear-gradient(to bottom,
      #f2ffe7 0%,
      #f5ffed 32%,
      #f9fff5 66%,
      #ffffff 100%);
    background-size: 100% 260px;
    background-repeat: no-repeat;
    background-color: #ffffff;
  }
}

/* Desktop: give the logo and services heading more separation,
   without changing the spacing within the heading/tagline/CTA group. */
@media (min-width: 1001px) {
  .services-page .services-intro-text {
    padding-left: clamp(168px, calc(10vw + 18px), 203px);
  }
}
@media (min-width: 1600px) {
  .services-page .services-intro-text {
    padding-left: clamp(168px, calc(9.5vw + 18px), 193px);
  }
}

/* Homepage dropdown anchors: leave breathing room above the targeted section headings. */
#pillar-01-heading,#pillar-02-heading,#pillar-03-heading,#pillar-04-heading,#care-panel-heading{scroll-margin-top:28px}

/* Phones only: tighter, slightly heavier service headings (Belleza has one weight, so a hairline stroke thickens it). */
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page .pillar-content h2,
  .services-page .care-title h2,
  .services-page .pillar-expanded h3 {
    letter-spacing: -0.015em;
    -webkit-text-stroke: 0.6px currentColor;
  }
}

/* ONLINE QUOTE button: exact replica of the homepage hero button (size, type, border, radius, link). */
.services-page .services-intro .services-quote-button.services-quote-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    text-indent: 0;
    text-decoration: none;
    box-sizing: border-box;
    border: 2px solid #dff4cc;
    letter-spacing: 0.5px;
    word-spacing: 6px;
    height: 40px;
    min-width: 151px;
    padding: 0 20px;
    font-size: 13px;
    border-radius: 11px;
}
@media (min-width: 769px) {
    .services-page .services-intro .services-quote-button.services-quote-button {
        --btn-h: clamp(46px, 2.78vw, 53px);
        height: var(--btn-h);
        min-width: 0;
        padding: 0 calc(var(--btn-h) * 0.83);
        font-size: calc(var(--btn-h) * 0.37);
    }
}
/* Desktop (1280px and up): 20px more room between each service's subtitle and its row of icons. */
@media (min-width: 1280px) {
  .services-page .pillar-content .pillar-features { padding-top: 20px; }
}
/* REGULAR CARE subheading: same look as the SEASONAL TREATMENTS subheading. */
.services-page .pillar-expanded h3.subheading-match {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-family: 'Belleza', sans-serif;
  font-size: clamp(19px, 1.25vw, 22px);
  line-height: 1.35;
  letter-spacing: 0.035em;
}
/* All expanded-panel subheadings share the REGULAR CARE / SEASONAL TREATMENTS size. */
.services-page .pillar-expanded h3 {
  font-size: clamp(19px, 1.25vw, 22px);
  line-height: 1.35;
  letter-spacing: 0.035em;
}
/* NDIS, DVA & AGED-CARE body copy matches the service panels' body copy on desktop. */
@media (min-width: 1001px) {
  .services-page .care-intro .pillar-summary-body { font-size: 17px; }
}
/* NDIS checklist: single column on desktop. */
@media (min-width: 769px) {
  .services-page .care-content-stack .care-checklist {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
}
/* Footer: fade from transparent (so the page background shows through, no hard edge) into white. */
.services-page .services-footer {
  --footer-fade: 260px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.04) 12%,
      rgba(255,255,255,.14) 28%,
      rgba(255,255,255,.32) 46%,
      rgba(255,255,255,.58) 64%,
      rgba(255,255,255,.82) 82%,
      rgba(255,255,255,.95) 93%,
      #fff 100%),
    linear-gradient(#fff, #fff);
  background-size: 100% var(--footer-fade), 100% 100%;
  background-position: 0 0, 0 calc(var(--footer-fade) - 1px);
}
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page .services-footer { --footer-fade: 105px; }
}
/* Subtitle and tagline removed: keep a gap between the heading and the quote button. */
.services-page .services-intro .services-quote-button.services-quote-button { margin-top: 16px; }
@media (min-width: 1001px) {
  .services-page .services-intro .services-quote-button.services-quote-button { margin-top: 18px; }
}
/* Mobile only: slightly larger OUR SERVICES heading (about +8%). */
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page .services-intro h1 { font-size: clamp(42px, 11.4vw, 54px); }
}
/* Mobile only: heading group 10px higher; first service image 15px closer to the quote button
   (25px up overall, since the button itself moves up 10px). */
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page .services-intro-text { position: relative; top: -10px; }
  .services-page .services-main { margin-top: -25px; }
}
/* Fourth service section (placeholders until real photo and icons are added): same icon sizing as Restoration. */
.pillar:has(#pillar-04-heading) .pillar-features .feature-icon {
  width:72px; height:72px; flex:0 0 72px; overflow:visible; background:transparent;
}
.pillar:has(#pillar-04-heading) .pillar-features .feature-icon img {
  display:block; width:100%; height:100%; object-fit:contain; transform:scale(calc(1.12 * var(--icon-k, 1))) translate(var(--icon-x, 0%), var(--icon-y, 0%));
}
.pillar:has(#pillar-04-heading) .pillar-features { align-items:start; }
@media(max-width:680px), (min-width:681px) and (max-width:940px) and (orientation:landscape) and (max-height:500px) {
  .pillar:has(#pillar-04-heading) .pillar-features .feature-icon {
    width:clamp(56px,17vw,72px); height:clamp(56px,17vw,72px); flex-basis:auto;
  }
}
.services-page .pillar:has(#pillar-01-heading) .pillar-photo img{object-fit:cover;object-position:center 10%}
.services-page .pillar:has(#pillar-03-heading) .pillar-photo img{object-fit:cover;object-position:center 0%}
/* Service icons: each illustration's green circle fills a different share of its image file and some sit off-centre.
   These values (measured from the artwork) scale every circle to 95% of the icon box and centre it, so all icons
   render at exactly the same size with the same gap above their labels. */
.services-page .feature-icon img[src$="/icon1.webp"] { --icon-k: 1.029; --icon-x: 1.8%; --icon-y: -0.8%; }
.services-page .feature-icon img[src$="/Icon2.webp"] { --icon-k: 0.991; --icon-x: -0.5%; --icon-y: -3.1%; }
.services-page .feature-icon img[src$="/Icon3.webp"] { --icon-k: 1.031; --icon-x: 0%; --icon-y: -3.4%; }
.services-page .feature-icon img[src$="/Icon4.webp"] { --icon-k: 0.984; --icon-x: -0.7%; --icon-y: 0.9%; }
.services-page .feature-icon img[src$="/Icon5.webp"] { --icon-k: 0.974; --icon-x: 0.9%; --icon-y: -1.2%; }
.services-page .feature-icon img[src$="/Icon6.webp"] { --icon-k: 1.002; --icon-x: 1.6%; --icon-y: -1.7%; }
.services-page .feature-icon img[src$="/icon7.webp"] { --icon-k: 1.004; --icon-x: -0.7%; --icon-y: -1.5%; }
.services-page .feature-icon img[src$="/icon8.webp"] { --icon-k: 1.020; --icon-x: -0.5%; --icon-y: -0.5%; }
.services-page .feature-icon img[src$="/icon9.webp"] { --icon-k: 0.985; --icon-x: -0.5%; --icon-y: -1.2%; }
.services-page .feature-icon img[src$="/icon11.webp"] { --icon-k: 0.953; --icon-x: -0.2%; --icon-y: -1.6%; }
.services-page .feature-icon img[src$="/icon12.webp"] { --icon-k: 0.982; --icon-x: -0.2%; --icon-y: 0.7%; }
.services-page .feature-icon img[src$="/icon13.webp"] { --icon-k: 1.049; --icon-x: -2.2%; --icon-y: -0.7%; }
.services-page .feature-icon img[src$="/icon14.webp"] { --icon-k: 1.010; --icon-x: 0.4%; --icon-y: 0%; }
.services-page .feature-icon img[src$="/icon15.webp"] { --icon-k: 1.007; --icon-x: -0.6%; --icon-y: -0.2%; }
.services-page .feature-icon img[src$="/icon16.webp"] { --icon-k: 0.957; --icon-x: 0.4%; --icon-y: 0.6%; }
.services-page .feature-icon img[src$="/icon17.webp"] { --icon-k: 0.957; --icon-x: -0.4%; --icon-y: 0%; }

@media (min-width:769px) and (max-width:1000px){.services-page .pillar .pillar-tagline{font-size:25px}}
@media (min-width:1001px){.services-page .pillar .pillar-tagline{font-size:clamp(21px,calc(1.25vw + 3px),25px)}}

.services-page .pillar .pillar-tagline,
.services-page .care-title .pillar-tagline{font-weight:400}

.pillar-content h2::after{height:0;background:none;border-top:1px solid #b2d77b}

/* Services accordion: compact phone previews; inclusions live inside the expandable panel. */
@media (min-width: 681px) {
  .services-page .care-details { display: none; }
}
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page .pillar { gap: 0; padding-top: 18px; padding-bottom: 20px; }
  /* Phone reading order: heading and tagline, photo, description (with icons at its end), enquiry link. */
  .services-page .pillar-content { display: contents; }
  .services-page .pillar-content h2 { order: -2; }
  .services-page .pillar .pillar-tagline { order: -1; }
  .services-page .pillar-photo { aspect-ratio: 1.95; object-fit: cover; }
  .services-page .pillar-details { margin-top: 10px; }
  .services-page .pillar-details:not(.care-details) summary { padding: 12px 18px; }
  .services-page .pillar-details:not(.care-details) .pillar-expanded { padding: 20px; }
  .services-page .pillar-expanded h3 { font-size: 21px; letter-spacing: .01em; margin-bottom: 8px; }
  .services-page .pillar-expanded h3:not(:first-child) { margin-top: 26px; padding-top: 20px; }
  .services-page .pillar-expanded p { line-height: 1.72; margin-bottom: 14px; }
  .services-page .pillar-expanded > .pillar-features { margin: 22px 0 0; padding: 22px 0 0; border: 0; border-top: 1px solid #b2d77b; }
  .services-page .care-panel { padding-bottom: 20px; }
  .services-page .care-content-stack { gap: 0; }
  .services-page .care-title h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; }
}
.care-title h2::after { content: ""; flex: 1 1 24px; height: 0; border-top: 1px solid #b2d77b; }
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) { .care-title h2::after { flex: 0 0 100%; } }
/* Mobile header (768px and below): ute photo, stripes, grass and OUR SERVICES form one composition.
   The heading is one shared layout drawn twice in the same grid cell: a solid layer and an outline layer,
   each clipped to opposite sides of the photo's diagonal edge so the letters always line up. */

@media (max-width: 768px), (min-width: 769px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page .services-header { height: 12px; }
  .services-page .services-intro {
    --ute-w: min(100vw, 620px);
    --hero-h: calc(var(--ute-w) * 0.3705);
    --hero-box: calc(var(--hero-h) + var(--ute-w) * 0.11);
    --hero-x: calc(100% - var(--ute-w) * 0.8141 - 40px);
    --hero-xe: calc(var(--hero-x) + var(--hero-box) * 0.5428);
    --hero-pad: clamp(14px, 4.4vw, 20px);
    position: relative;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    row-gap: 8px;
    padding-bottom: 4px;
  }
  .services-page .services-intro-text { display: contents; }
  .services-page .services-intro .services-vehicle-photo { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  .services-page .services-intro::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hero-box);
    pointer-events: none;
    background: url("images/Grass.png") right calc(var(--ute-w) * -0.163) bottom 0 / var(--ute-w) auto no-repeat;
    clip-path: polygon(var(--hero-x) 0, 100% 0, 100% 100%, var(--hero-xe) 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  .services-page .services-intro h1 {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 3;
    display: grid;
    height: var(--hero-box);
    margin: 0;
    padding: 0;
    text-indent: 0;
    font-size: clamp(44px, 15vw, 84px);
    line-height: 0.82;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 0;
  }
  .services-page .services-intro .hero-text {
    grid-area: 1 / 1;
    display: grid;
    align-content: end;
    justify-items: start;
    padding: 0 0 calc(var(--ute-w) * 0.03) var(--hero-pad);
    position: relative;
    top: 15px;
  }
  .services-page .services-intro .hero-word-services { margin-left: 10px; }
  .services-page .services-intro .hero-word-our { margin-bottom: -0.26em; position: relative; top: 30px; }
  .services-page .services-intro .hero-text {
    color: #00370C;
    -webkit-text-stroke: 3px #fff;
    paint-order: stroke fill;
    stroke-linejoin: round;
  }
  .services-page .services-intro .services-logo {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: clamp(72px, 19.9vw, 95px);
    margin: -8px 0 0 calc(clamp(6px, 2vw, 10px) - 3px);
    z-index: 4;
  }
  .services-page .services-intro .services-quote-button.services-quote-button {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    margin: 0 0 0 calc(var(--hero-pad) + 50px);
  }
  .services-page .services-main { margin-top: -2px; }
}

/* ========================================
   LARGE-SCREEN SHARED STYLES.
   ======================================== */
@media (min-width: 1001px) {
  .services-page .services-intro {
    --hero-h: calc(var(--ute-w) * 0.3705);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    overflow-x: clip;
  }
  .services-page .services-intro-text { display: contents; }
  .services-page .services-intro .services-vehicle-photo {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: end;
    margin-right: calc(var(--ute-bleed) * -1);
  }
  .services-page .services-intro::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hero-box);
    pointer-events: none;
  }
  .services-page .services-intro h1 {
    grid-area: 1 / 1;
    align-self: start;
    position: relative;
    z-index: 3;
    display: grid;
    height: var(--hero-box);
    margin: 0;
    padding: 0;
    text-indent: 0;
    font-style: italic;
    line-height: 0.82;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 0;
  }
  .services-page .services-intro .hero-text {
    grid-area: 1 / 1;
    display: grid;
    align-content: end;
    justify-items: start;
    position: relative;
    color: #00370C;
    paint-order: stroke fill;
    stroke-linejoin: round;
  }
  .services-page .services-main {
    margin: 0 auto;
    padding-top: clamp(0px, 0.5vw, 8px);
  }
  .services-page .pillar {
    column-gap: clamp(32px, 4.4vw, 64px);
    align-items: center;
    padding: clamp(22px, 2.4vw, 36px) 0;
  }
  .services-page .pillar:has(.pillar-details[open]) { align-items: start; }
  .services-page .pillar-photo {
    aspect-ratio: 1.45;
    min-height: 0;
    border-radius: 22px;
    overflow: hidden;
  }
  .services-page .pillar-photo img { width: 100%; height: 100%; object-fit: cover; }
  .services-page .pillar-content h2 { font-size: clamp(24px, 2vw, 30px); }
  .services-page .pillar .pillar-tagline { font-size: clamp(24px, 2vw, 30px); }
  .services-page .pillar-details { margin-top: clamp(16px, 1.6vw, 24px); }
  .services-page .pillar-details:not(.care-details) .pillar-expanded { padding: clamp(20px, 2vw, 28px); }
  .services-page .pillar-expanded h3 { font-size: 21px; letter-spacing: .01em; margin-bottom: 8px; }
  .services-page .pillar-expanded h3:not(:first-child) { margin-top: 24px; padding-top: 18px; }
  .services-page .pillar-expanded p { line-height: 1.7; margin-bottom: 14px; }
  .services-page .pillar-expanded > .pillar-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px clamp(10px, 1.6vw, 24px);
    margin: 0 0 22px;
    padding: 0 0 22px;
    border: 0;
    border-bottom: 1px solid #b2d77b;
  }
  .services-page .pillar-expanded > .pillar-features + h3 { margin-top: 0; padding-top: 0; border-top: 0; }
  .services-page .pillar-expanded .feature-icon { width: clamp(56px, 4.6vw, 72px); height: clamp(56px, 4.6vw, 72px); }

  .services-page .care-panel { width: 100%; max-width: none; margin-top: clamp(24px, 3vw, 44px); }
}

/* Desktop: show the tray, retaining only the source image's transparent right gutter off-screen. */
@media (min-width: 1001px) {
  .services-page .services-header { z-index: 4; height: 50.4px; }
  .services-page .services-logo {
    width: clamp(134.55px, 11.063vw, 191.061px);
    left: calc(clamp(10.8px, 1vw, 18px) + 45px);
    transform: none;
  }
  .services-page .services-intro {
    --ute-w: min(53.176vw, 830.484px);
    --ute-bleed: calc(var(--ute-w) * 0.065);
    /* Limit hero height without narrowing the photo; keep its diagonal aligned after vertical cropping. */
    --hero-h: min(calc(var(--ute-w) * 0.30381), 230.8464px);
    --photo-crop-top: calc((var(--ute-w) * 0.3705 - var(--hero-h)) * 0.5);
    --photo-box: calc(var(--hero-h) + var(--ute-w) * 0.0164);
    --hero-box: calc(var(--photo-box) / 0.92);
    --hero-x: calc(100% - var(--ute-w) * 0.9121 + var(--photo-crop-top) * 0.5428);
    --hero-xe: calc(var(--hero-x) + var(--hero-box) * 0.5428);
    /* Heading starts a comfortable gap after the logo's right edge (logo left + logo width + gap). */
    --hero-pad: calc(clamp(10.8px, 1vw, 18px) + 45px + clamp(134.55px, 11.063vw, 191.061px) + clamp(26px, 5vw - 34px, 54px) + clamp(0px, 100vw - 1884px, 110px));
    /* Shared reference for the source PNG's diagonal and its foreground. */
    --photo-edge-top: max(0px, calc(var(--photo-crop-top) * 0.5978 - var(--ute-w) * 0.00258));
    --photo-edge-x: calc(100% - var(--ute-w) + var(--ute-bleed) + var(--photo-edge-top));
    --photo-extension: min(31.28px, var(--photo-crop-top));
    --stripe-offset: 27.37px;
    --grass-offset: 11.73px;
    --grass-bottom: calc(var(--photo-box) + var(--grass-offset));
    --grass-edge-x: calc(var(--photo-edge-x) - var(--stripe-offset) + var(--grass-offset) * 0.5978);
  }
  .services-page .services-intro .services-vehicle-photo {
    height: var(--hero-h);
  }
  .services-page .services-intro .services-vehicle-photo img {
    height: calc(var(--hero-h) + var(--photo-extension));
    object-fit: cover;
    /* Reveal lower source rows without moving or enlarging the existing photograph. */
    object-position: center calc(var(--photo-crop-top) * -1);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--grass-bottom) - 15.64px), transparent calc(var(--grass-bottom) - 9.384px));
    mask-image: linear-gradient(to bottom, #000 calc(var(--grass-bottom) - 15.64px), transparent calc(var(--grass-bottom) - 9.384px));
  }
  .services-page .services-intro .services-vehicle-photo::before {
    left: calc(var(--photo-edge-top) - var(--stripe-offset));
    z-index: 1;
    width: 35.19px;
    height: var(--grass-bottom);
    bottom: auto;
    background: linear-gradient(to right, #83C500 0 8.602px, transparent 8.602px 13.294px, #00370C 13.294px 35.19px);
    clip-path: none;
    transform: skewX(30.87deg);
    transform-origin: top left;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 10.948px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 10.948px), transparent 100%);
  }
  .services-page .services-intro .services-vehicle-photo::after {
    content: none;
  }
  .services-page .services-intro::after {
    top: var(--grass-offset);
    bottom: auto;
    height: var(--photo-box);
    opacity: 1;
    /* Retain the dense lower PNG rows; scale blades to the banner height, not its width. */
    background:
      url("images/Grass.png") right calc(var(--ute-bleed) * -1) bottom 0 / auto calc(var(--hero-h) * 0.32) repeat-x,
      linear-gradient(to bottom, transparent calc(100% - 18.768px), #f3ffe4 calc(100% - 9.384px)) 0 0 / 100% 100% no-repeat;
    clip-path: polygon(var(--grass-edge-x) 0, 100% 0, 100% 100%, calc(var(--grass-edge-x) + var(--photo-box) * 0.5978) 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 6.256px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 6.256px), transparent 100%);
  }
  /* Heading and service links form one column between the logo and the ute; its right edge stops short of the diagonal stripes. */
  .services-page .services-intro-text {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: var(--hero-box);
    min-width: 0;
    margin: 0;
    padding: 12px calc(100% - var(--photo-edge-x) + var(--stripe-offset) - var(--hero-box) * 0.46 - clamp(0px, (100vw - 1680px) * .11, 27px) + 24px) calc(var(--ute-w) * 0.0205) var(--hero-pad);
    z-index: 3;
  }
  .services-page .services-intro h1 { height: auto; font-size: min(6.56vw, 91.512px); }
  .services-page .services-intro .hero-text {
    align-content: center;
    top: 0;
    padding: 0;
    -webkit-text-fill-color: #00370C;
    -webkit-text-stroke: 3.6px #fff;
  }
  .services-page .services-intro .hero-word-our {
    position: static;
    margin-bottom: 0.02em;
  }
  .services-page .services-intro .hero-text > br { display: none; }
  .services-page .services-intro .hero-word-services { margin-left: 0.12em; }
  /* Service links tucked beneath the heading, starting at the SERVICES left edge (moved here by script at 1280px and up). */
  .services-page .services-intro .services-quicknav { z-index: 4; width: auto; max-width: 100%; margin: 13px 0 0 calc(min(6.56vw, 91.512px) * .12); padding: 0; }
  .services-page .services-intro .services-quicknav ul { flex-wrap: wrap; }
  .services-page .services-intro .services-quicknav li:first-child { margin-left: 0; }
  .services-page .services-intro .services-quicknav li:last-child { margin-right: 0; }
  .services-page .services-intro .services-quicknav li + li::before { margin: 0 .88em; }
  .services-page .services-intro .services-quicknav a { font-size: 13.8px; }
  .services-page .services-main {
    --service-gap: clamp(18px, 1.6vw, 26.1px);
    --service-content-offset: clamp(8px, calc(8px + (100vw - 1001px) * .0897), 31.6px);
    --service-feature-offset: clamp(10px, calc(10px + (100vw - 1001px) * .11685), 42.6px);
    --service-text-offset: calc((100% - var(--service-gap) * 2) * .321 + var(--service-gap));
    --service-text-width: calc((100% - var(--service-gap) * 2) * .429);
    /* Wide screens: rows extend left into the spare outer margin, never past the header logo. */
    --service-shift: clamp(0px, (100vw - 1733.76px) / 2 - 70px, 70px);
    /* Left edge of the service headings (middle column), used to align the NDIS box. */
    --service-heading-offset: calc((100% - var(--service-gap) * 2) * .2889 + var(--service-gap) - var(--service-shift));
    width: min(1733.76px, calc(100% - 43.2px));
    padding-top: clamp(0px, .5vw, 7.2px);
    margin-inline: auto;
  }
  .services-page .pillar,
  .services-page .care-panel {
    display: grid;
    /* Columns are sized from the pre-extension width so photos and reading widths are unchanged; the extension is absorbed by the empty trailing track. */
    --row-w: calc(100% - var(--service-shift, 0px));
    grid-template-columns: calc((var(--row-w) - var(--service-gap) * 2) * .2889) clamp(252px, var(--row-w) * .28 - 93px, 327px) minmax(0, 1fr) calc((var(--row-w) - var(--service-gap) * 2) * .0321 - var(--service-gap) + var(--service-shift, 0px) + 93px);
    grid-template-rows: min-content min-content 1fr;
    column-gap: var(--service-gap);
    row-gap: 0;
    align-items: start;
    padding: 30.3px 0;
    margin-left: calc(var(--service-shift, 0px) * -1);
    border-bottom: 1px solid #b6dc78;
  }
  /* Extra breathing room sits only between services; the outer edges keep their spacing to the hero and NDIS banner. */
  .services-page .pillar:first-child { padding-top: 15.3px; }
  .services-page .pillar:has(#pillar-03-heading) { border-bottom: 0; padding-bottom: 15.3px; }
  /* The photo starts level with the top of the first service icon's circle (icon grid margin less the 2px the illustrated circles extend above their box). */
  .services-page .pillar-photo { grid-column: 1; grid-row: 3; top: 0; width: 100%; aspect-ratio: 16 / 9; align-self: start; margin-top: var(--service-content-offset); border-radius: 19.8px; }
  .services-page .pillar-content { display: contents; }
  /* Heading and tagline may run on over the empty space above the copy, so the narrower middle column never wraps them. */
  .services-page .pillar-content h2 { grid-column: 2 / 4; grid-row: 1; font-size: clamp(22.66px, 1.81vw, 25.9px); -webkit-text-stroke: .6px currentColor; }
  /* Bottom margin absorbs the larger heading's extra line height so the photo, icons and copy keep their vertical position. */
  .services-page .pillar .pillar-tagline { grid-column: 2 / 4; grid-row: 2; font-size: clamp(18.9px, 1.6vw, 21.6px); margin: 1.8px 0 calc(5.4px - clamp(1.87px, .15vw, 2.14px) * 1.1); }
  .services-page .pillar-content::before,
  .services-page .care-title::before {
    content: none;
  }
  .services-page .pillar-content h2::after { content: none; }
  .services-page .pillar-details { margin: 8.1px 0 0; }
  /* The copy starts with the photo and icons; the first subheading's capitals sit level with the top of the icon circles. */
  .services-page .pillar-content > .pillar-details { grid-column: 3; grid-row: 3; min-width: 0; margin: calc(var(--service-content-offset) - clamp(13.3px, .97vw, 15.45px) * .36) 0 0; }
  .services-page .pillar-details > summary { display: none; }
  .services-page .pillar-details:not(.care-details) .pillar-expanded {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 14.4px;
    line-height: 1.55;
  }
  .services-page .pillar-expanded h3,
  .services-page .pillar-expanded h3.subheading-match,
  .services-page .pillar-expanded .seasonal-addon h3 {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: clamp(13.3px, .97vw, 15.45px);
    font-weight: 300;
    letter-spacing: .055em;
  }
  .services-page .pillar-expanded h3 { margin: 0 0 5.4px; }
  .services-page .pillar-expanded h3:not(:first-child) { margin-top: 7.2px; padding-top: 6.5px; }
  .services-page .pillar-expanded p {
    font-family: 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
    font-weight: 350;
    line-height: 1.55;
    max-width: min(58em, 92%);
    margin: 0 0 7.2px;
  }
  .services-page .pillar-expanded p:last-child { margin-bottom: 0; }
  .services-page .seasonal-addon { margin-top: 7.2px; padding-top: 6.5px; }
  .services-page .pillar > .pillar-features {
    grid-column: 2;
    grid-row: 3;
    grid-template-columns: repeat(2, 100.8px);
    align-content: start;
    justify-content: start;
    align-self: start;
    gap: 12.6px 21.6px;
    max-width: none;
    margin: var(--service-feature-offset) 0 0 8px;
    padding: 0;
    border-left: 0;
    background: none;
  }
  .services-page .pillar > .pillar-features li { font-size: 10.8px; line-height: 1.35; gap: 5.4px; }
  .services-page .pillar:has(#pillar-01-heading, #pillar-02-heading, #pillar-03-heading, #pillar-04-heading) .pillar-features .feature-icon {
    width: 63.4px;
    height: 63.4px;
    flex-basis: 63.4px;
  }
  .services-page .pillar-expanded > .pillar-enquire { margin: 20px 0 0; font-size: 11.5px; }
  .services-page .care-panel {
    --care-padding: clamp(16.2px, 1.5vw, 21.6px);
    --care-gap: clamp(16.2px, 1.5vw, 21.6px);
    width: min(916.5312px, calc((100% - var(--service-text-offset)) * .96), 100%);
    margin: 95.9px 0 0 calc(var(--service-heading-offset) - var(--care-padding));
    column-gap: var(--care-gap);
    row-gap: 0;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    grid-template-rows: auto;
    align-items: center;
    padding: var(--care-padding) var(--care-padding) 140.4px;
    border: 0;
    border-radius: 16.2px;
    background: linear-gradient(to bottom, #00370C calc(100% - 113.4px), rgba(0, 55, 12, .95) calc(100% - 94.5px), rgba(0, 55, 12, .8) calc(100% - 75.6px), rgba(0, 55, 12, .5) calc(100% - 56.7px), rgba(0, 55, 12, .2) calc(100% - 37.8px), rgba(0, 55, 12, .05) calc(100% - 18.9px), rgba(0, 55, 12, 0));
    overflow: visible;
  }
  .services-page .care-panel::before {
    content: none;
    display: none;
  }
  .services-page .care-panel::after {
    content: none;
    display: none;
  }
  .services-page .care-intro { position: relative; top: -54.9px; grid-column: 1; grid-row: 1; align-self: center; min-width: 0; max-width: none; margin: 0; }
  .services-page .care-title h2 { font-size: clamp(23.790186px, 2.013984vw, 27.188784px); color: #f7ffec; white-space: normal; }
  .services-page .care-heading-line { display: inline; white-space: nowrap; }
  .services-page .care-intro .care-title .pillar-tagline { margin: -1.8px 0 11px; font-size: clamp(20.412px, 1.728vw, 23.328px); color: #cbe99a; -webkit-text-stroke: .405px #00370C; }
  .services-page .care-title h2::after { content: none; }
  .services-page .care-content-stack { display: contents; }
  .services-page .care-content-stack .care-checklist {
    position: relative;
    top: 13.5px;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: row;
    gap: 10.08px;
    align-self: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .services-page .care-content-stack .care-checklist li {
    font-family: 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
    font-size: 16.83px;
    font-weight: 300;
    color: #f7ffec;
    line-height: 1.55;
    padding-left: 24.75px;
  }
  .services-page .care-checklist li::before { width: 16.83px; height: 16.83px; font-size: 11.88px; background: #83C500; color: #00370C; top: .3em; }
  .services-page .care-details:has(.pillar-expanded:empty) { display: none; }
  html:has(.services-page) { container-type: inline-size; }
  .services-page .services-footer {
    position: relative;
    width: 100cqw;
    max-width: none;
    /* Preserve the artwork position beneath the extended card and its fade. */
    margin: calc(-118.8px - .455729cqw) calc(50% - 50cqw) 0;
    padding-top: 0;
    background: transparent;
  }
  .services-page .services-footer-art {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* Quick service navigation beneath the hero. */
.services-page .services-quicknav { position: relative; z-index: 2; width: min(1733.76px, calc(100% - 43.2px)); margin: 0 auto; padding: 2px 0 25px; }
.services-page .services-quicknav ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.services-page .services-quicknav li { flex: none; display: flex; align-items: center; }
.services-page .services-quicknav li:first-child { margin-left: auto; }
.services-page .services-quicknav li:last-child { margin-right: auto; }
.services-page .services-quicknav li + li::before { content: "\00B7"; margin: 0 .85em; color: rgba(0, 55, 12, .45); font-size: 15px; }
.services-page .services-quicknav a {
  display: inline-block;
  padding: 8px 1px;
  color: #00370C;
  font: 400 13.5px/1.2 'Belleza', 'Segoe UI', Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color .2s ease;
}
.services-page .services-quicknav a:hover,
.services-page .services-quicknav a:focus-visible { text-decoration-color: currentColor; }
@media (max-width: 1000px) {
  .services-page .services-quicknav { width: 100%; padding: 0 0 6px; }
  .services-page .services-quicknav ul {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .services-page .services-quicknav ul::-webkit-scrollbar { display: none; }
  .services-page .services-quicknav a { padding: 13px 1px; font-size: 13px; white-space: nowrap; }
}
@media (min-width: 769px) and (max-width: 1000px) {
  .services-page .services-quicknav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 12px;
    overflow: visible;
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .services-page .services-quicknav li {
    flex: 0 1 130px;
    justify-content: center;
    min-width: 0;
    margin: 0;
  }
  .services-page .services-quicknav li:first-child,
  .services-page .services-quicknav li:last-child { margin: 0; }
  .services-page .services-quicknav li + li::before { content: none; }
  .services-page .services-quicknav a { white-space: normal; text-align: center; }
  .services-page .pillar:not(.pillar--intro) .pillar-details {
    display: inline-block;
    width: fit-content;
    vertical-align: middle;
    margin: 10px 0 0;
  }
  .services-page .pillar:not(.pillar--intro) .pillar-details[open] {
    display: block;
    width: 100%;
  }
  .services-page .pillar:not(.pillar--intro) .pillar-enquire {
    display: inline-flex;
    vertical-align: middle;
    margin: 10px 0 0 12px;
  }
}
/* The header nav wraps below its single-row fit; keep separators from leading wrapped rows. */
@media (min-width: 1280px) and (max-width: 2023px) {
  .services-page .services-intro .services-quicknav ul {
    justify-content: center;
    column-gap: 1.76em;
  }
  .services-page .services-intro .services-quicknav li + li::before { content: none; }
}

/* Understated service-specific enquiry link. */
.services-page .pillar-enquire {
  display: flex;
  align-items: center;
  gap: .6em;
  width: fit-content;
  max-width: 100%;
  margin-top: 16px;
  color: #00370C;
  font: 600 12px/1.2 'Segoe UI', Arial, sans-serif;
  letter-spacing: .14em;
  text-decoration: underline;
  text-decoration-color: rgba(0, 55, 12, .32);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color .2s ease;
}
.services-page .pillar-enquire:hover,
.services-page .pillar-enquire:focus-visible { text-decoration-color: currentColor; }
.services-page .pillar-enquire-arrow { display: inline-block; text-decoration: none; letter-spacing: 0; }
@media (max-width: 1000px) {
  .services-page .pillar-enquire { min-height: 44px; margin-top: 6px; }
}

/* Desktop: a restrained lift on the decorative service illustrations (no pointer cue; they are not links). */
@media (hover: hover) and (min-width: 1001px) {
  .services-page .pillar > .pillar-features .feature-icon img { transition: filter .35s ease; }
  .services-page .pillar > .pillar-features li:hover .feature-icon img { filter: drop-shadow(0 3px 5px rgba(0, 55, 12, .2)) saturate(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .services-page .pillar > .pillar-features .feature-icon img,
  .services-page .pillar-enquire,
  .services-page .services-quicknav a { transition: none; }
}

/* Phones: each service opens with a short introduction, a text-based Explore control and the enquiry link.
   .pillar--intro is set by the placement script at 680px and below only. */
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  /* Two columns only for the action row (GET A QUOTE | EXPLORE); everything else spans both. Dense flow keeps the pair on one row. */
  .services-page .pillar.pillar--intro { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; column-gap: 16px; padding-top: 28px; padding-bottom: 27px; }
  .services-page .pillar.pillar--intro > *,
  .services-page .pillar.pillar--intro > .pillar-content > * { grid-column: 1 / -1; }
  .services-page .pillar.pillar--intro:first-child { padding-top: 18px; }
  .services-page .pillar--intro .pillar-intro { margin-top: 20px; min-width: 0; }
  /* Calmer editorial type scale: heading > tagline > subheadings > body. */
  .services-page .pillar--intro .pillar-content h2 { font-size: clamp(20.25px, 5.52vw, 26.7px); }
  .services-page .pillar.pillar--intro .pillar-tagline { font-size: 19.8px; margin: 1px 0 12px; }
  .services-page .pillar--intro .pillar-expanded h3 { font-size: 16.4px; margin-bottom: 6px; }
  .services-page .pillar--intro .pillar-expanded p { line-height: 1.6; margin-bottom: 11px; }
  .services-page .pillar--intro .pillar-expanded .seasonal-addon { margin-top: 16px; padding-top: 14px; }
  /* Intro subheading: matches the expanded panel's mobile subheadings (e.g. SEASONAL TREATMENTS). */
  .services-page .pillar-intro h3 {
    margin: 0 0 6px;
    color: #07512a;
    font: 400 16.4px/1.35 'Belleza', sans-serif;
    letter-spacing: .035em;
    -webkit-text-stroke: .6px currentColor;
  }
  .services-page .pillar-intro p { margin: 0; color: #163c21; font: 400 16px/1.6 'Belleza', sans-serif; }
  .services-page .pillar--intro .pillar-details { margin-top: 0; }
  .services-page .pillar--intro .pillar-details > summary { display: none; }
  .services-page .pillar--intro .pillar-details .pillar-expanded {
    margin: 0;
    padding: 14px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .services-page .pillar.pillar--intro > .pillar-content > .pillar-more {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: .6em;
    width: fit-content;
    min-height: 44px;
    margin: 17px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #00370C;
    font: 600 11.5px/1.2 'Segoe UI', Arial, sans-serif;
    letter-spacing: .14em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .services-page .pillar-more-sign { display: inline-block; min-width: .75em; font-size: 15px; line-height: 1; letter-spacing: 0; }
  .services-page .pillar--intro .pillar-more:focus-visible { outline: 2px solid #00370C; outline-offset: 3px; border-radius: 4px; }
  /* GET A QUOTE: small outlined button on the Explore control's centreline; ::before extends the tap target to 44px. */
  .services-page .pillar.pillar--intro > .pillar-content > .pillar-enquire {
    grid-column: 1;
    justify-self: start;
    position: relative;
    align-self: center;
    min-height: 38px;
    margin: 17px 0 0;
    padding: 0 14px;
    border: 1px solid #00370C;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease;
  }
  .services-page .pillar--intro .pillar-enquire::before { content: ""; position: absolute; inset: -4px 0; }
  .services-page .pillar--intro .pillar-enquire:hover,
  .services-page .pillar--intro .pillar-enquire:focus-visible { background: rgba(0, 55, 12, .05); }
  .services-page .pillar--intro .pillar-enquire:focus-visible { outline: 2px solid #00370C; outline-offset: 3px; }
}

/* Aged Care, DVA & NDIS: photographic close with a soft transition into the footer. */
.services-page .care-panel {
  --care-content-clearance: 0px;
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  width: min(1160px, calc(100% - 174px));
  margin: calc(clamp(34px, 3vw, 48px) + 40px) auto 0;
  padding: clamp(28px, 3vw, 42px);
  padding-bottom: calc(clamp(28px, 3vw, 42px) + 35px + var(--care-content-clearance));
  border: 0;
  border-radius: 20px;
  background: #00370C;
}
.services-page .care-panel::before { content: none; }
.services-page .care-panel::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 72%, rgba(243, 255, 228, .025) 80%, rgba(243, 255, 228, .09) 87%, rgba(243, 255, 228, .25) 93%, rgba(243, 255, 228, .58) 98%, #f3ffe4 100%),
    linear-gradient(to right, #00370C 0%, #00370C 46%, rgba(0, 55, 12, .92) 55%, rgba(0, 55, 12, .52) 66%, rgba(0, 55, 12, .16) 78%, rgba(0, 55, 12, .03) 90%, transparent 100%);
}
.services-page .care-photo {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 29%);
  mask-image: linear-gradient(to right, transparent 0%, #000 29%);
}
.services-page .care-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
}
.services-page .care-intro,
.services-page .care-content-stack {
  position: relative;
  z-index: 2;
  width: 60%;
  max-width: none;
}
.services-page .care-intro {
  position: relative;
  top: auto;
  margin: 0 0 5px;
}
.services-page .care-title h2 {
  margin: 0;
  color: #f7ffec;
  font-size: clamp(23.790186px, 2.013984vw, 27.188784px);
}
.services-page .care-title h2::after { content: none; }
.services-page .care-title .pillar-tagline {
  margin: 3px 0 14px;
  color: #cbe99a;
}
.services-page .care-lead {
  margin: 0 0 16px;
  color: #cbe99a;
  font: italic 400 clamp(16px, 1.25vw, 18px)/1.45 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
}
.services-page .care-copy {
  max-width: 100%;
  margin: 0;
  color: #f7ffec;
  font: 350 15px/1.55 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
}
.services-page .care-copy + .care-copy { margin-top: 10px; }
.services-page .care-content-stack {
  display: grid;
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4px;
  margin: 0;
}
.services-page .care-content-stack .care-checklist {
  position: static;
  top: auto;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 4px;
  max-width: none;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}
.services-page .care-content-stack > .pillar-enquire {
  grid-column: 2;
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  margin: 20px 0 0;
}
.services-page .care-content-stack .care-checklist li {
  min-width: 0;
  padding-left: 22px;
  color: #f7ffec;
  font-size: 14px;
  line-height: 1.45;
}
.services-page .care-checklist li::before {
  top: .1em;
  background: #83C500;
  color: #00370C;
}
.services-page .care-content-stack > .pillar-enquire {
  color: #f7ffec;
  text-decoration-color: rgba(247, 255, 236, .55);
}
.services-page .care-content-stack > .pillar-enquire:hover,
.services-page .care-content-stack > .pillar-enquire:focus-visible { text-decoration-color: currentColor; }
@media (min-width: 769px) and (max-width: 1000px) {
  .services-page .care-panel { width: 100%; }
  .services-page .care-intro,
  .services-page .care-content-stack { width: 58%; }
  .services-page .care-photo { width: 45%; }
}
@media (min-width: 1001px) {
  .services-page .care-panel {
    --care-content-clearance: 70px;
    width: min(1160px, calc(100% - 174px));
    margin-right: auto;
    margin-left: auto;
  }
  .services-page .services-footer {
    margin-top: calc(-153.8px - .455729cqw);
  }
}
@media (max-width: 768px), (min-width: 769px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page .care-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-top: 26px;
    padding: 24px 20px 70px;
    padding-bottom: 70px;
    border-radius: 18px 18px 0 0;
    background: #00370C;
    overflow: visible;
  }
  .services-page .care-panel::after {
    bottom: -16px;
    background:
      linear-gradient(to bottom, transparent 0, transparent calc(100% - 64px), rgba(243, 255, 228, .025) calc(100% - 56px), rgba(243, 255, 228, .09) calc(100% - 48px), rgba(243, 255, 228, .25) calc(100% - 38px), rgba(243, 255, 228, .58) calc(100% - 27px), #f3ffe4 calc(100% - 16px), rgba(243, 255, 228, 0) 100%);
  }
  .services-page .care-intro,
  .services-page .care-content-stack {
    width: 100%;
    max-width: none;
  }
  .services-page .care-intro { margin-bottom: 16px; }
  .services-page .care-title h2 { font-size: clamp(23px, 6vw, 30px); }
  .services-page .care-intro .care-title .pillar-tagline {
    margin: 3px 0 12px;
    font-size: clamp(21px, 5.3vw, 26px);
  }
  .services-page .care-lead { font-size: 16px; }
  .services-page .care-copy { font-size: 15px; line-height: 1.55; }
  .services-page .care-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(190px, 61vw, 275px);
    margin-bottom: 30px;
    border-radius: 12px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  }
  .services-page .care-photo img { object-position: 54% 50%; }
  .services-page .care-content-stack { display: block; margin: 0; }
  .services-page .care-content-stack .care-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 14px;
    margin: 0 0 26px;
  }
  .services-page .care-content-stack .care-checklist li { font-size: 13px; }
  .services-page .care-content-stack > .pillar-enquire {
    justify-self: start;
    min-height: 44px;
    margin: 10px auto 0 22px;
  }
  .services-page .services-main { padding-bottom: 0; }
  .services-page .services-footer { padding-top: 0; }
}
@media (max-width: 400px) {
  .services-page .care-panel { padding-right: 17px; padding-left: 17px; }
  .services-page .care-content-stack .care-checklist { grid-template-columns: minmax(0, 1fr); gap: 15px; }
}

/* Short landscape keeps the portrait composition inside a phone-sized column. */
@media (min-width: 769px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .services-page {
    --mobile-reference-width: min(100vw, 430px);
  }
  .services-page .services-header,
  .services-page .services-intro,
  .services-page .services-quicknav,
  .services-page .services-footer {
    width: min(100%, 430px);
    margin-inline: auto;
  }
  .services-page .services-header { height: 12px; }
  .services-page .services-logo {
    top: clamp(4px, calc(var(--mobile-reference-width) * .013), 7px);
    left: clamp(8px, calc(var(--mobile-reference-width) * .02), 12px);
    width: clamp(96px, calc(var(--mobile-reference-width) * .29), 124px);
  }
  .services-page .services-intro {
    --ute-w: var(--mobile-reference-width);
    --hero-pad: clamp(14px, calc(var(--mobile-reference-width) * .044), 20px);
  }
  .services-page .services-intro h1 {
    font-size: clamp(42px, calc(var(--mobile-reference-width) * .114), 54px);
  }
  .services-page .services-quicknav { padding-right: 0; padding-left: 0; }
  .services-page .services-main {
    width: min(calc(100% - 32px), 398px);
    margin-right: auto;
    margin-left: auto;
  }
  .services-page .pillar.pillar--intro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .services-page .pillar.pillar--intro > .pillar-content > .pillar-more,
  .services-page .pillar.pillar--intro > .pillar-content > .pillar-enquire {
    justify-self: center;
  }
  .services-page .pillar-content h2,
  .services-page .care-title h2 {
    font-size: clamp(22px, calc(var(--mobile-reference-width) * .06), 30px);
  }
  .services-page .pillar-content h2 { min-width: 0; max-width: 100%; }
  .services-page .pillar .pillar-tagline,
  .services-page .care-intro .care-title .pillar-tagline {
    font-size: clamp(20.4px, calc(var(--mobile-reference-width) * .053), 26px);
  }
}

.service-heading-daisy {
    display: inline-block;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
    transform-origin: center;
}

.service-heading-daisy.is-animated {
    animation: service-daisy-turn 1.8s ease-in-out 1 both;
}

@keyframes service-daisy-turn {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(25deg); }
}

@media (max-width: 768.99px), (min-width: 769px) and (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
    .service-heading-daisy {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-heading-daisy.is-animated {
        animation: none;
    }
}

/* Tablet portrait: stack service content while keeping tablet accordion controls. */
@media (min-width: 681px) and (max-width: 1100px) and (orientation: portrait) {
  .services-page .services-main {
    width: min(850px, calc(100% - 48px));
    padding: 24px 0 50px;
  }
  .services-page .pillar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 22px 0 24px;
  }
  .services-page .pillar .pillar-content { display: contents; }
  .services-page .pillar-content h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 8px;
    max-width: 100%;
    text-align: center;
  }
  .services-page .pillar-content h2::after {
    content: "";
    flex: 0 0 100%;
    min-width: 0;
    width: 100%;
  }
  .services-page .pillar .pillar-tagline {
    margin-bottom: 0;
    text-align: center;
  }
  .services-page .pillar-photo {
    top: auto;
    align-self: start;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1.6;
    min-height: 0;
    margin: 18px 0 0;
  }
  .services-page .pillar-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .services-page .pillar-tablet-layout {
    display: grid;
    width: 100%;
    grid-template-areas:
      "photo"
      "features"
      "actions"
      "expanded";
    grid-template-columns: minmax(0, 1fr);
    margin-top: 18px;
  }
  .services-page .pillar-tablet-layout > .pillar-photo {
    grid-area: photo;
    align-self: start;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 2.35;
    min-height: 0;
    margin: 0;
  }
  .services-page .pillar-tablet-layout > .pillar-photo img {
    object-fit: cover;
  }
  .services-page .pillar-tablet-layout > .pillar-features {
    grid-area: features;
    justify-self: center;
    align-self: start;
    width: fit-content;
    max-width: 100%;
    grid-template-columns: repeat(6, minmax(0, 82px));
    align-items: start;
    justify-content: center;
    gap: 12px 12px;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
  }
  .services-page .pillar-tablet-layout > .pillar-features li {
    gap: 5px;
    min-width: 0;
  }
  .services-page .pillar-tablet-layout > .pillar-features li > span:last-child {
    display: flex;
    min-height: 30px;
    align-items: flex-start;
    justify-content: center;
  }
  .services-page .pillar:has(#pillar-01-heading) .pillar-tablet-layout > .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-02-heading) .pillar-tablet-layout > .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-03-heading) .pillar-tablet-layout > .pillar-features .feature-icon,
  .services-page .pillar:has(#pillar-04-heading) .pillar-tablet-layout > .pillar-features .feature-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }
  .services-page .pillar:has(#pillar-02-heading) .pillar-tablet-layout > .pillar-features {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(100%, 458px);
  }
  .services-page .pillar-tablet-actions {
    display: flex;
    grid-area: actions;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 34px;
    min-width: 0;
    margin-top: 26px;
  }
  .services-page .pillar-tablet-actions > .pillar-details:not(.care-details) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    margin: 0;
  }
  .services-page .pillar-tablet-actions > .pillar-details:not(.care-details) > summary {
    display: flex;
    width: fit-content;
    margin: 0;
  }
  .services-page .pillar-tablet-layout > .pillar-expanded {
    grid-area: expanded;
    align-self: start;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 16px 0 0;
    padding: 18px 22px;
    border: 0;
    border-left: 3px solid #8bc500;
    border-radius: 0 12px 12px 0;
    background: rgba(230, 249, 204, .65);
  }
  .services-page .pillar:not(.pillar--intro) .pillar-tablet-actions > .pillar-enquire {
    align-self: center;
    margin: 0;
  }
}

@media (min-width: 681px) and (max-width: 740px) and (orientation: portrait) {
  .services-page .pillar-tablet-layout > .pillar-features,
  .services-page .pillar:has(#pillar-02-heading) .pillar-tablet-layout > .pillar-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 294px);
    gap: 12px 12px;
  }
}