/* ---------- Base ---------- */
:root {
    --soil: #2b2a26;
    --moss: #4a7a35;
    --moss-dark: #365a26;
    --sand: #efe9dc;
    --paper: #fbfaf6;
    --ink: #24231f;
    --line: #cfc8b6;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;       /* header, layout, footer stacked */
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: var(--ink);
    background: #f1eee5;          /* soft sand outside the centered page */
}

h1, h2 { color: var(--soil); margin-top: 0; }

/* one font for every element on every page */
h1, h2, h3, p, li, a, figcaption, button, input, textarea { font-family: inherit; }
a { color: var(--moss-dark); }

/* ---------- Top banner (image across the top) ---------- */
.top {
    position: relative;
    height: 215px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background:
        linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 60%),
        url("../images/truck-trailer.jpg") center 49% / cover no-repeat;
    border-bottom: 4px solid var(--moss);
}

.top-text { padding: 1.5rem max(2rem, calc((100% - 1200px) / 2 + 2rem)); }   /* lines the title up with the centered page */

.top h1 { color: #fff; margin: 0; font-size: 2.4rem; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.top p  { margin: .25rem 0 0; font-size: 1.1rem; text-shadow: 0 2px 6px rgba(0,0,0,.6); }

/* ---------- Layout: left menu + content ---------- */
.layout {
    flex: 1;                      /* fills space between banner and footer */
    display: flex;
    width: 100%;
    max-width: 1200px;            /* menu + content stay together and centered on wide screens */
    margin: 0 auto;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--line);
}

.left {
    flex: 0 0 220px;
    background: var(--sand);
    border-right: 1px solid var(--line);
    padding: 1.5rem 0;
    /* stretches to full height of .layout automatically */
}

.left ul { list-style: none; margin: 0; padding: 0; }

/* menu and phone number follow the visitor down the page */
.left-inner { position: sticky; top: 1rem; }

.side-cta {
    margin: 1.25rem 1.25rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.side-cta p { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.4; color: var(--soil); }
.left .side-cta a {
    display: inline-block;
    padding: 0;
    border: 0;
    font-weight: bold;
    font-size: 1rem;
    color: var(--moss-dark);
}
.left .side-cta a:hover,
.left .side-cta a:focus-visible { background: none; border: 0; text-decoration: underline; }

.left a {
    display: block;
    padding: .75rem 1.5rem;       /* same left edge for every link */
    text-align: left;
    text-decoration: none;
    color: var(--soil);
    border-left: 4px solid transparent;
}

.left a:hover,
.left a:focus-visible { background: #e4dcc8; border-left-color: var(--moss); }

.left a[aria-current="page"] { font-weight: bold; border-left-color: var(--moss); background: #e4dcc8; }

.right {
    flex: 1;
    padding: 2rem;
    max-width: 900px;
}

.right ul { list-style: none; padding: 0; }
.right li { padding: .5rem 0; border-bottom: 1px solid var(--sand); }
.right section { margin-bottom: 2.5rem; }

/* ---------- Welcome page text ---------- */
.right p { max-width: 70ch; }
.right h3 { margin: 0 0 .5rem; color: var(--moss-dark); font-size: 1.15rem; }

/* intro paragraph matches the rest of the body text exactly */
.lead { font-size: 1rem; line-height: 1.6; color: var(--ink); font-weight: normal; }

.callout {
    max-width: 70ch;
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--sand);
    border-left: 4px solid var(--moss);
}
.callout p { margin: 0; }

.cta { margin-top: 1.75rem; }

.button {
    display: inline-block;
    margin-left: .5rem;
    padding: .55rem 1.2rem;
    background: var(--moss);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
}
.button:hover,
.button:focus-visible { background: var(--moss-dark); }

/* ---------- Services page ---------- */
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }
.right .jump li { padding: 0; border: 0; }
.jump a {
    display: inline-block;
    padding: .4rem .9rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--soil);
    text-decoration: none;
}
.jump a:hover, .jump a:focus-visible { background: var(--sand); border-color: var(--moss); }

/* Sticky jump bar: stays at the top of the window while scrolling */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.jump-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 0 1.5rem;
    padding: .75rem 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.jump-bar .jump { margin: 0; }

.season { --accent: var(--moss); margin-bottom: 3rem; scroll-margin-top: 5rem; }
.season.autumn   { --accent: #b5651d; }
.season.winter   { --accent: #3b6a8f; }
.season.hardscape { --accent: #6f6a5d; }
.season > h2 { padding-bottom: .5rem; border-bottom: 3px solid var(--accent); }
.season h3 { margin-top: 2rem; color: var(--accent); }

.split { display: grid; grid-template-columns: 1fr 260px; gap: 1.5rem; align-items: start; }

.service-list { margin: 1rem 0; }
.service-list.cols { columns: 2; column-gap: 2rem; }
.right .service-list li {
    position: relative;
    padding: .3rem 0 .3rem 1.6rem;
    border: 0;
    break-inside: avoid;
}
.service-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: bold; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin: 1.25rem 0 2rem; }
.gallery.two { grid-template-columns: repeat(2, 1fr); }
.shot { margin: 0; }
.shot a { display: block; cursor: zoom-in; }
.shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.shot.tall img { aspect-ratio: 3 / 4; }

/* ---------- Photo viewer (Services page) ---------- */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(15,15,13,.94); }
.lb[hidden] { display: none; }
.lb-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;           /* we handle swipe, pinch and drag ourselves */
}
.lb-img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100% - 9rem);
    max-height: calc(100% - 8rem);
    transform-origin: center center;
    transition: transform .18s ease, opacity .2s ease;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
}
.lb-zoomed .lb-img { cursor: grab; }
.lb-dragging .lb-img { transition: none; cursor: grabbing; }
.lb-loading .lb-img { opacity: .25; }

.lb-btn {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    color: #fff;
    font: inherit;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255,255,255,.32); }
.lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }

.lb-bar {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .75rem;
    background: rgba(0,0,0,.6);
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
}
.lb-bar .lb-btn { position: static; width: 40px; height: 40px; font-size: 1.4rem; }
.lb-bar .lb-reset { width: auto; padding: 0 .9rem; border-radius: 999px; font-size: .9rem; }
.lb-count { min-width: 4.5rem; text-align: center; font-size: .95rem; }

/* ---------- Footer ---------- */
.bottom {
    background: var(--soil);
    color: #fff;
    text-align: center;
    padding: 1rem;
}
.bottom p { margin: 0; }
.bottom a { color: #cfe3c0; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    :root { --nav-h: calc(5rem + 2px); }   /* height of the pinned menu + phone bar */

    .top { height: 220px; }
    .top h1 { font-size: 1.7rem; }
    .layout { flex-direction: column; }

    /* menu and phone number stay pinned across the top of the screen */
    .left { flex: none; position: sticky; top: 0; z-index: 20; border-right: 0; border-bottom: 1px solid var(--line); padding: 0; }
    .left-inner { position: static; }
    .left ul { display: flex; flex-wrap: nowrap; justify-content: space-between; }
    .left li { flex: 1 1 auto; }
    .left a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.75rem;
        padding: 0 .3rem;
        font-size: .8rem;
        white-space: nowrap;
        border-left: 0;
        border-bottom: 3px solid transparent;
    }
    .left a:hover, .left a:focus-visible, .left a[aria-current="page"] { border-bottom-color: var(--moss); }
    .side-cta { margin: 0; padding: 0; border-top: 1px solid var(--line); text-align: center; }
    .side-cta p { display: none; }
    .left .side-cta a { display: flex; align-items: center; justify-content: center; height: 2.25rem; width: 100%; font-size: .95rem; }

    .right { padding: 1.25rem; }
    .split { grid-template-columns: 1fr; }
    .service-list.cols { columns: 1; }

    /* the Services jump bar sits just under the pinned menu */
    .jump-bar { top: var(--nav-h); }
    .season { scroll-margin-top: 10rem; }
    .jump-bar .jump { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .jump a { white-space: nowrap; }

    /* photo viewer */
    .lb-img { max-width: 100%; max-height: calc(100% - 9rem); }
    .lb-prev, .lb-next { width: 40px; height: 40px; background: rgba(0,0,0,.5); }
    .lb-prev { left: .5rem; }
    .lb-next { right: .5rem; }
}