:root {
    /* Fluid unit for the desktop header: 1% of the browser width,
       capped at 18.5px so things stop growing past ~1850px wide */
    --u:min(1vw, 18.5px);

    /* Brand palette (Lands Designs Website - Color Palette.pdf). The three
       used with transparency are set as RGB channels, for
       rgb(var(--deep-green-rgb) / 0.6) and the like. */
    --primary-green-rgb:1 128 103;
    --deep-green-rgb:1 77 65;
    --cream-rgb:241 233 216;
    --primary-green:rgb(var(--primary-green-rgb));
    --deep-green:rgb(var(--deep-green-rgb));
    --cream:rgb(var(--cream-rgb));
    --soft-gold:#b99a4b;

    /* Palette font colors (white is used as #fff) */
    --text-green:#1e4a3a;
    --light-gold:#fec880;

    /* Approved exceptions used in more than one place (one-off
       exceptions stay where they're used, with a comment) */
    --sage:#eeefe5;
    --beige:#e8e1d6;
}

body {
    margin:0;
    font-family: "Montserrat", sans-serif;
    background:var(--cream);
}

header {
    padding-top:calc(2 * var(--u));
    text-align:center;
    /* Lighter off-white used for the header in all the PDF mockups
       (approved exception to the palette) */
    background:#f8f4ea;

    /* Only the logo itself is clickable, not the header's full width */
    .logo-link {
        display:block;
        width:fit-content;
        max-width:100%;
        margin:0 auto;
    }

    img {
        display:block;
        width:calc(54 * var(--u));
        max-width:100%;
        height:auto;
        margin:0 auto;
    }
}

#site-nav {
    padding:calc(2.5 * var(--u)) 1rem calc(2 * var(--u));

    ul {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:0.75rem calc(5.3 * var(--u));
        margin:0;
        padding:0;
        list-style:none;
    }

    a {
        font-family: "Montserrat", sans-serif;
        font-size:max(14px, calc(1.4 * var(--u)));
        font-weight:500;
        color:var(--text-green);
        text-decoration:none;
        text-underline-offset:0.35em;
        transition:color 0.2s;
    }

    a:hover,
    a[aria-current="page"] {
        color:var(--soft-gold);
    }

    a[aria-current="page"] {
        text-decoration:underline;
        text-decoration-thickness:1px;
    }
}

.menu-toggle {
    display:none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Cormorant Garamond", serif;
    /* Headings are bold by default; sections only set other weights */
    line-height:1.2;
}

/* Full-width wavy SVG edges (homepage hero, season pages, maintenance,
   landscape). They may spill a little past their section, over the next one. */
.hero-wave,
.season-wave,
.services-wave,
.install-wave {
    position:absolute;
    left:0;
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
    pointer-events:none;
}

/* Button basics. Sections set the size, padding, colors and shape. */
.btn {
    display:inline-flex;
    align-items:center;
    box-sizing:border-box;
    font-weight:500;
    text-decoration:none;
    transition:background-color 0.2s, color 0.2s;

    /* Arrow icon */
    svg {
        fill:none;
        stroke:currentColor;
    }
}

/* Gold line with a dot in the middle. Each section sets its own width,
   margins and --gap (space between the dot and the lines), and can
   change --divider-color. */
.divider {
    --dot:max(6px, calc(0.42 * var(--u)));
    --gap:calc(0.68 * var(--u));
    --line:calc(50% - var(--dot) / 2 - var(--gap));
    --divider-color:var(--light-gold);
    display:block;
    height:var(--dot);
    /* The dot (a circle exactly the divider's height), then the two lines */
    background:
        radial-gradient(circle closest-side, var(--divider-color) 85%, transparent 100%) center / var(--dot) var(--dot),
        linear-gradient(var(--divider-color), var(--divider-color)) left center / var(--line) max(1px, calc(0.12 * var(--u))),
        linear-gradient(var(--divider-color), var(--divider-color)) right center / var(--line) max(1px, calc(0.12 * var(--u)));
    background-repeat:no-repeat;
}

/* "— LABEL —": a label with a short line on each side. Sections set these
   variables (on the section, so the mobile rule can override them):
   --eyebrow-size (font size), --eyebrow-line (line length), --eyebrow-rule
   (line thickness), --eyebrow-gap (space beside the text) and
   --eyebrow-shift (the lines' vertical position). */
.eyebrow {
    margin:0;
    font-size:var(--eyebrow-size, max(12px, calc(1.667 * var(--u))));
    font-weight:500;
    line-height:1.2;
    text-transform:uppercase;

    &::before,
    &::after {
        content:"";
        display:inline-block;
        width:var(--eyebrow-line, calc(3.07 * var(--u)));
        height:var(--eyebrow-rule, max(1px, calc(0.15 * var(--u))));
        vertical-align:var(--eyebrow-shift, 0.35em);
        background:currentColor;
    }

    &::before { margin-right:var(--eyebrow-gap, calc(0.78 * var(--u))); }
    &::after { margin-left:var(--eyebrow-gap, calc(0.78 * var(--u))); }
}

/* Icon circle with a thin ring just inside its edge (maintenance services
   and traits, landscape steps and roles). Sections set the size, and can
   change --circle-bg, --ring-color and --ring-inset (% of the circle). */
.ring-circle {
    position:relative;
    aspect-ratio:1;
    background:var(--circle-bg, #fff);
    border-radius:50%;

    &::before {
        content:"";
        position:absolute;
        inset:var(--ring-inset, 1.87%);
        border:1px solid var(--ring-color, var(--soft-gold));
        border-radius:50%;
    }
}

#hero {
    position:relative;
    /* Height follows the image's 1920x1028 proportions so it's never cropped.
       If the text ever needs more room, the hero grows and "cover" crops
       the photo slightly instead of leaving a gap. */
    aspect-ratio:1920 / 1028;
    background:var(--deep-green) url("../images/hp-hero-bg.jpg") no-repeat center / cover;
    --eyebrow-size:max(11px, calc(1.3 * var(--u)));
    --eyebrow-line:calc(2.6 * var(--u));
    --eyebrow-rule:max(1px, calc(0.12 * var(--u)));
    --eyebrow-gap:calc(0.68 * var(--u));

    .hero-panel {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        fill:rgb(var(--deep-green-rgb) / 0.6);
    }

    .hero-content {
        position:relative;
        z-index:1;
        padding:calc(6.8 * var(--u)) 0 calc(8 * var(--u)) calc(4.1 * var(--u));
        color:#fff;
    }

    /* Invisible float covering the whole hero, shaped like the area right of
       the panel's curve. Text lines stop short of it, so they follow the curve.
       The negative margins line it up with the hero's top-left corner. */
    .hero-wrap-shape {
        float:right;
        width:calc(100% + 4.1 * var(--u));
        aspect-ratio:1920 / 1028;
        margin:calc(-6.8 * var(--u)) 0 0 calc(-4.1 * var(--u));
        shape-outside:polygon(100% 0, 52.8% 0%, 52.8% 0.4%, 52.6% 1.7%, 52.2% 3.8%, 51.5% 6.7%, 50.3% 10.6%, 48.6% 15.2%, 47% 20.3%, 46.2% 25.4%, 46% 30.1%, 46.3% 34.3%, 46.8% 37.8%, 47.4% 40.4%, 47.6% 41.3%, 48% 44%, 48.3% 48.1%, 48.2% 53.6%, 47.4% 60%, 45.4% 67.3%, 45.1% 68.3%, 44.2% 71%, 43.1% 74.9%, 41.9% 79.2%, 41% 83.6%, 40.5% 87.4%, 40.6% 90.6%, 40.8% 93.6%, 41.2% 96.2%, 41.6% 98.2%, 41.9% 99.5%, 42% 100%, 100% 100%);
        /* Same gap as the text has on the left (padding-left above) */
        shape-margin:calc(4.1 * var(--u));
    }

    .eyebrow {
        margin:0 0 calc(2 * var(--u)) calc(4.3 * var(--u));
        color:var(--light-gold);
    }

    h1 {
        margin:0;
        font-size:max(30px, calc(3.96 * var(--u)));
    }

    .divider {
        width:calc(9.4 * var(--u));
        margin:calc(1.05 * var(--u)) 0 calc(1.6 * var(--u)) calc(0.35 * var(--u));
    }

    p:not(.eyebrow) {
        margin:0 0 calc(0.65 * var(--u));
        font-size:max(12px, calc(1.25 * var(--u)));
        line-height:1.35;
    }

    .btn {
        gap:calc(0.57 * var(--u));
        height:max(36px, calc(3.8 * var(--u)));
        margin-top:calc(2.6 * var(--u));
        padding:0 calc(1.4 * var(--u)) 0 calc(1.1 * var(--u));
        font-size:max(11px, calc(1.15 * var(--u)));
        text-transform:uppercase;
        color:var(--primary-green);
        /* Approved exception to the palette (client request) */
        background:#f4f0ea;
        border-radius:calc(0.5 * var(--u));

        svg {
            width:1.1em;
            height:1.1em;
            stroke-width:1.75;
        }
    }

    .btn:hover {
        color:#fff;
        background:var(--soft-gold);
    }

    .hero-wave {
        bottom:0;

        .wave-fill {
            fill:var(--primary-green);
        }

        /* Shape is traced from screenshot.png at its 3840px width */
        .wave-line {
            fill:none;
            stroke:var(--soft-gold);
            stroke-width:20;
        }
    }
}

#history {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:calc(2 * var(--u));
    padding:calc(1.9 * var(--u)) calc(3 * var(--u)) calc(4.4 * var(--u));
    color:#fff;
    background:var(--primary-green);
    /* 1px of green under the section, so a sub-pixel seam above the Contact
       section (seen in Firefox) shows green, not the cream page background */
    box-shadow:0 1px 0 var(--primary-green);
    --eyebrow-size:max(11px, calc(1.18 * var(--u)));
    --eyebrow-line:calc(1.77 * var(--u));
    --eyebrow-rule:max(1px, calc(0.12 * var(--u)));

    .history-text {
        flex:0 0 calc(39.4 * var(--u));
    }

    /* Line on the left only */
    .eyebrow {
        line-height:1.5;
        color:var(--light-gold);

        &::after { display:none; }
    }

    h2 {
        margin:calc(1.3 * var(--u)) 0 0;
        font-size:max(30px, calc(3.96 * var(--u)));
        line-height:0.9;
        /* Like the PDF, the heading is wider than the paragraphs below it,
           so let each line run past the column instead of wrapping */
        white-space:nowrap;
    }

    .divider {
        --gap:calc(0.57 * var(--u));
        width:calc(8.4 * var(--u));
        margin:calc(1.25 * var(--u)) 0 calc(1.6 * var(--u));
    }

    p:not(.eyebrow) {
        margin:0 0 calc(0.57 * var(--u));
        font-size:max(13px, calc(1.3 * var(--u)));
        line-height:1.28;
    }

    /* "39+ Years of Excellence" badge */
    .stat {
        display:flex;
        align-items:center;
        gap:calc(1.93 * var(--u));
        box-sizing:border-box;
        width:calc(30.2 * var(--u));
        min-height:calc(5.83 * var(--u));
        margin-top:calc(2.7 * var(--u));
        padding:0 calc(2.66 * var(--u));
        border:max(1px, calc(0.08 * var(--u))) solid var(--soft-gold);
        border-radius:calc(2.1 * var(--u));
    }

    .stat-number {
        font-family: "Cormorant Garamond", serif;
        font-size:max(32px, calc(3.13 * var(--u)));
        font-weight:700;
        line-height:1;
        color:var(--light-gold);
        /* Cormorant's old-style 3 and 9 hang below the baseline, so the
           number looks low when its box is centered. Measured from the
           font's glyph shapes, this lifts the ink to the true center. */
        transform:translateY(-0.25em);
        /* Equal-width digits so the count-up doesn't jitter */
        font-variant-numeric:tabular-nums;

        /* Created by js/main.js for the count-up animation */
        .count-digits {
            display:inline-block;
            text-align:right;
        }
    }

    .stat-label {
        font-size:max(11px, calc(1.04 * var(--u)));
        font-weight:500;
        line-height:1.6;
        text-transform:uppercase;
    }

    .history-photo {
        flex:0 0 calc(51.5 * var(--u));
        width:calc(51.5 * var(--u));
        height:auto;
        margin-top:calc(1.7 * var(--u));
    }
}

#contact {
    position:relative;
    /* Section = PDF page area y 2685-3792 (1920 x 1107). The photo PNG is
       exported at that same scale, so it lines up with the SVG shapes. */
    aspect-ratio:1920 / 1107;
    overflow-x:clip;
    /* Sit above #operate, which slides up underneath the bottom gold wave */
    z-index:1;
    color:var(--deep-green);
    /* The photo and green backdrop are drawn inside .contact-shapes, clipped
       along the bottom gold wave, so this stays transparent */
    background:none;

    .contact-shapes {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        overflow:visible;

        .bg,
        .edge-green { fill:var(--primary-green); }
        .panel { fill:var(--cream); }

        .edge-gold {
            fill:none;
            stroke:var(--soft-gold);
            stroke-width:4;
        }

        .wave-line {
            fill:none;
            stroke:var(--soft-gold);
            stroke-width:10;
        }

        .wave-line.bottom { stroke-width:6; }
    }

    /* Paddings are % of the section width, so the text stays inside the
       cream panel at any screen size */
    .contact-content {
        position:relative;
        z-index:1;
        padding:11.27% 0 0 58.56%;
    }

    .contact-leaf {
        display:block;
        width:calc(2.81 * var(--u));
        height:auto;
        margin-left:calc(0.78 * var(--u));
    }

    /* Gold line + dot (line first; .reverse puts the dot first) */
    .contact-rule {
        --dot:max(5px, calc(0.48 * var(--u)));
        display:block;
        width:calc(5.66 * var(--u));
        height:var(--dot);
        margin-top:calc(0.35 * var(--u));
        background:
            radial-gradient(circle closest-side, var(--soft-gold) 85%, transparent 100%) right center / var(--dot) var(--dot),
            linear-gradient(var(--soft-gold), var(--soft-gold)) left center / 78% max(1px, calc(0.1 * var(--u)));
        background-repeat:no-repeat;

        &.reverse {
            margin-top:calc(1.7 * var(--u));
            background-position:left center, right center;
        }
    }

    h2 {
        margin:calc(1.3 * var(--u)) 0 0;
        font-size:max(28px, calc(3.65 * var(--u)));
    }

    p {
        margin:calc(0.57 * var(--u)) 0 0;
        font-size:max(13px, calc(1.3 * var(--u)));
        line-height:1.36;
    }

    .contact-list {
        margin:calc(2.17 * var(--u)) 0 0 calc(-0.72 * var(--u));
        padding:0;
        list-style:none;

        li {
            display:flex;
            align-items:center;
            min-height:calc(2.57 * var(--u));
        }

        li + li {
            margin-top:calc(1.53 * var(--u));
        }
    }

    .contact-icon {
        flex-shrink:0;
        width:max(32px, calc(2.57 * var(--u)));
        height:auto;
        margin-right:calc(1.15 * var(--u));

        overflow:visible;

        circle { fill:var(--primary-green); }
        path { fill:#fff; }

        /* Thin gold ring: Soft Gold top and bottom, light gold at the sides */
        .ring {
            fill:none;
            stroke:url(#contact-icon-ring);
            stroke-width:1.3;
        }
    }

    .contact-label,
    .contact-value {
        font-size:max(15px, calc(1.77 * var(--u)));
        line-height:1.2;
    }

    .contact-label {
        flex:0 0 calc(12.55 * var(--u));
        font-weight:500;
        color:var(--soft-gold);
    }

    .contact-value {
        color:var(--deep-green);
        text-decoration:none;
    }

    a.contact-value:hover {
        color:var(--primary-green);
    }
}

#operate {
    position:relative;
    /* Section = PDF page area y 3792.4-4961.2 (1920 x 1168.8). The map PNG is
       1933 x 1174 and sits 8.4px left of the page edge in the PDF. */
    aspect-ratio:1920 / 1168.8;
    /* Slide up under the Contact section's bottom gold wave (102.4px at the
       1920px design width). Far enough that the curve is the border, but not
       so far that it hides the compass at the top-left of the map. */
    margin-top:-5.333%;
    color:#fff;
    background:var(--deep-green) url("../images/hp-where-we-operate-bg.jpg") no-repeat 63% top / 100.69% auto;
    --eyebrow-size:max(12px, calc(1.46 * var(--u)));
    --eyebrow-line:calc(2.71 * var(--u));
    --eyebrow-rule:max(1px, calc(0.13 * var(--u)));
    --eyebrow-gap:calc(0.6 * var(--u));
    --eyebrow-shift:0.3em;

    /* Where the curve rises above the map's top edge (over the ocean), fill the
       small gap with Deep Forest Green */
    &::before {
        content:"";
        position:absolute;
        left:0;
        right:0;
        bottom:100%;
        height:3vw;
        background:var(--deep-green);
    }

    /* Left 800px of the design: the map area the labels sit on */
    .operate-map {
        position:absolute;
        top:0;
        left:0;
        width:41.67%;
        height:100%;
    }

    .map-labels {
        display:block;
        width:100%;
        height:auto;

        rect,
        circle { fill:var(--soft-gold); }

        text {
            font-family: "Cormorant Garamond", serif;
            font-size:25px;
            font-weight:700;
            fill:#fff;
        }
    }

    /* Paddings are % of the section width so the text keeps its place
       over the ocean at any screen size */
    .operate-content {
        position:relative;
        z-index:1;
        padding:6.41% 0 0 56.06%;
    }

    /* Leaf centered above "— Where we Operate —" */
    .operate-eyebrow {
        display:inline-flex;
        flex-direction:column;
        align-items:center;
        gap:calc(0.72 * var(--u));
        margin-left:calc(0.2 * var(--u));

        img {
            width:calc(1.79 * var(--u));
            height:auto;
        }
    }

    /* "Where we Operate" keeps its own capitalization */
    .eyebrow {
        line-height:1.5;
        text-transform:none;
        color:var(--soft-gold);
    }

    h2 {
        margin:calc(3 * var(--u)) 0 0;
        font-size:max(30px, calc(3.96 * var(--u)));
        line-height:1.153;
    }

    /* Gold line ending in a dot */
    .operate-rule {
        --dot:max(5px, calc(0.48 * var(--u)));
        display:block;
        width:calc(6.75 * var(--u));
        height:var(--dot);
        margin:calc(2 * var(--u)) 0 0 calc(0.34 * var(--u));
        background:
            radial-gradient(circle closest-side, var(--soft-gold) 85%, transparent 100%) right center / var(--dot) var(--dot),
            linear-gradient(var(--soft-gold), var(--soft-gold)) left center / calc(100% - var(--dot) / 2) max(1px, calc(0.1 * var(--u)));
        background-repeat:no-repeat;
    }

    p:not(.eyebrow) {
        max-width:calc(32 * var(--u));
        margin:calc(2.32 * var(--u)) 0 0 calc(0.52 * var(--u));
        font-size:max(13px, calc(1.3 * var(--u)));
        line-height:1.43;
    }

    /* City "pills" are labels only, not links or buttons */
    .city-list {
        display:flex;
        flex-wrap:wrap;
        gap:calc(1.93 * var(--u)) calc(1.4 * var(--u));
        width:calc(40 * var(--u));
        margin:calc(3.1 * var(--u)) 0 0 calc(0.52 * var(--u));
        padding:0;
        list-style:none;

        li {
            display:flex;
            align-items:center;
            justify-content:center;
            box-sizing:border-box;
            min-width:calc(11.82 * var(--u));
            height:max(34px, calc(3.97 * var(--u)));
            padding:0 calc(2.3 * var(--u));
            font-family: "Cormorant Garamond", serif;
            font-size:max(14px, calc(1.3 * var(--u)));
            font-weight:700;
            white-space:nowrap;
            border:max(1.5px, calc(0.16 * var(--u))) solid var(--soft-gold);
            border-radius:999px;
        }
    }
}

footer {
    padding:calc(4 * var(--u)) 1rem calc(3.5 * var(--u));
    text-align:center;
    background:var(--deep-green);

    ul {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:0.75rem calc(5.3 * var(--u));
        margin:0 0 calc(3 * var(--u));
        padding:0;
        list-style:none;
    }

    a {
        font-family: "Montserrat", sans-serif;
        font-size:max(13px, calc(1.3 * var(--u)));
        font-weight:500;
        text-transform:uppercase;
        color:#fff;
        text-decoration:none;
        transition:color 0.2s;
    }

    a:hover {
        color:var(--soft-gold);
    }

    p {
        margin:0;
        font-family: "Cormorant Garamond", serif;
    }

    .tagline {
        font-size:max(16px, calc(1.6 * var(--u)));
        font-weight:600;
        color:var(--soft-gold);
    }

    .copyright {
        margin-top:calc(1 * var(--u));
        font-size:max(14px, calc(1.3 * var(--u)));
        font-weight:500;
        color:rgba(255, 255, 255, 0.5);
    }
}

/* ===== This Season pages (this-season.html, spring-summer.html) =====
   Measurements come from Fall & Winter_Season.pdf (1920px wide), as
   px-at-1920 / 19.2 = --u. */

/* Divider size on the season pages (sections set color and margins) */
#season-hero .divider,
#season-thoughts .divider,
#season-highlights .divider,
#season-cta .divider {
    --dot:max(6px, calc(0.51 * var(--u)));
    --gap:calc(0.82 * var(--u));
    width:calc(11.53 * var(--u));
}

/* Button text and arrow size on the season pages */
#season-hero .btn,
#season-highlights .btn,
#season-cta .btn,
#not-found .btn {
    font-size:max(12px, calc(1.46 * var(--u)));

    svg {
        width:1.17em;
        height:1.02em;
        stroke-width:3;
    }
}

/* Green pill button with an arrow (season heroes, 404 page) */
#season-hero .btn,
#not-found .btn {
    gap:calc(1.35 * var(--u));
    height:max(38px, calc(4.73 * var(--u)));
    padding:0 calc(1.74 * var(--u)) 0 calc(1.31 * var(--u));
    color:#fff;
    background:var(--primary-green);
    border-radius:999px;

    &:hover {
        background:var(--soft-gold);
    }
}

/* Eyebrow size on the season sections */
#season-hero,
#season-thoughts,
#season-highlights {
    --eyebrow-size:max(11px, calc(1.5625 * var(--u)));
    --eyebrow-line:calc(3.21 * var(--u));
    --eyebrow-gap:calc(0.83 * var(--u));
}

/* Wavy gold edges between sections (paths are in PDF page coordinates).
   The fills carry the "Our thoughts" color right up to each gold curve. */
.season-wave {

    .wave-fill {
        fill:var(--sage);
    }

    .wave-line {
        fill:none;
        stroke:var(--soft-gold);
        stroke-width:10;
    }
}

#season-hero {
    position:relative;
    /* Sit above the next section, so the wave can spill into it */
    z-index:1;
    /* Height follows the photo's 1920x1086 proportions */
    aspect-ratio:1920 / 1086;
    color:#fff;
    background:
        linear-gradient(90deg, rgb(var(--deep-green-rgb) / 0.92) 0%, rgb(var(--deep-green-rgb) / 0.86) 46%, rgb(var(--deep-green-rgb) / 0) 66%),
        var(--deep-green) url("../images/fall-winter-hero-bg.jpg") no-repeat center / cover;

    .hero-content {
        position:relative;
        z-index:1;
        padding:calc(9.42 * var(--u)) 0 calc(8 * var(--u)) calc(3.93 * var(--u));
    }

    h1 {
        margin:calc(1.68 * var(--u)) 0 0;
        font-size:max(30px, calc(4.9 * var(--u)));
        color:var(--light-gold);
    }

    .divider {
        --divider-color:#fff;
        margin:calc(2.02 * var(--u)) 0 0 calc(0.27 * var(--u));
    }

    p:not(.eyebrow) {
        max-width:calc(37.2 * var(--u));
        margin:calc(2.94 * var(--u)) 0 0;
        font-size:max(12px, calc(1.354 * var(--u)));
        line-height:1.538;
    }

    .btn {
        margin-top:calc(4.62 * var(--u));
    }

    .season-wave {
        bottom:0;
    }
}

#season-thoughts {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:calc(2 * var(--u));
    padding:0 calc(5.49 * var(--u)) calc(1.67 * var(--u)) calc(3.94 * var(--u));
    color:var(--text-green);
    /* The PDFs' pale sage, an approved exception to the palette */
    background:var(--sage);

    /* Above the next section's wave, whose fill reaches up into this one */
    .thoughts-text {
        position:relative;
        z-index:1;
        flex:0 1 calc(39.6 * var(--u));
        padding-top:calc(5.92 * var(--u));
    }

    .eyebrow {
        font-weight:600;
        white-space:nowrap;
        color:var(--primary-green);
    }

    h2 {
        margin:calc(2.11 * var(--u)) 0 0;
        font-size:max(30px, calc(4.9 * var(--u)));
        color:var(--deep-green);
    }

    .divider {
        --divider-color:var(--soft-gold);
        margin:calc(1.28 * var(--u)) 0 calc(2.67 * var(--u));
    }

    p:not(.eyebrow) {
        margin:calc(0.78 * var(--u)) 0 0;
        font-size:max(13px, calc(1.354 * var(--u)));
        line-height:1.538;
    }

    .divider + p {
        margin-top:0;
    }

    /* The gold arch frame is part of the image. Stacked above the hero
       so the hero wave's cream fill can't cover its top. */
    .thoughts-photo {
        position:relative;
        z-index:2;
        display:block;
        flex:0 0 calc(36.82 * var(--u));
        width:calc(36.82 * var(--u));
        height:auto;
    }
}

#season-highlights {
    position:relative;
    padding:calc(5.98 * var(--u)) 1rem calc(1.67 * var(--u));
    text-align:center;
    color:var(--deep-green);
    background:var(--cream);

    /* The wave straddles the top edge: 65 of its 145 units sit above it */
    .season-wave {
        top:0;
        transform:translateY(-44.8%);
    }

    .eyebrow {
        color:var(--primary-green);
    }

    h2 {
        margin:calc(1.23 * var(--u)) 0 0;
        font-size:max(30px, calc(4.9 * var(--u)));
    }

    .divider {
        --divider-color:var(--soft-gold);
        margin:calc(2.06 * var(--u)) auto 0;
    }

    .highlight-cards {
        display:flex;
        justify-content:center;
        gap:calc(2.76 * var(--u));
        margin:calc(2.89 * var(--u)) 0 0;
        padding:0;
        list-style:none;

        li {
            position:relative;
            flex:0 1 calc(26.46 * var(--u));
            overflow:hidden;
            /* Same rounding as the corners in the photos (54px of 508 x 500) */
            border-radius:10.63% / 10.8%;
            text-align:left;
            color:#fff;
        }

        /* Darken the bottom of the photo so the white text reads */
        li::after {
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(rgb(var(--deep-green-rgb) / 0) 40%, rgb(var(--deep-green-rgb) / 0.5) 72%, rgb(var(--deep-green-rgb) / 0.85));
            mix-blend-mode:multiply;
            pointer-events:none;
        }

        img {
            display:block;
            width:100%;
            height:auto;
        }
    }

    .card-text {
        position:absolute;
        left:calc(1.59 * var(--u));
        right:calc(1.1 * var(--u));
        bottom:calc(1.28 * var(--u));
        z-index:1;
    }

    h3 {
        margin:0;
        font-family: "Montserrat", sans-serif;
        font-size:max(13px, calc(1.5625 * var(--u)));
    }

    .card-text p {
        margin:calc(1.29 * var(--u)) 0 0;
        font-size:max(11px, calc(1.354 * var(--u)));
        line-height:1.538;
    }

    .btn-see-more {
        gap:calc(1.04 * var(--u));
        height:max(36px, calc(3.69 * var(--u)));
        margin-top:calc(3.29 * var(--u));
        padding:0 calc(1.73 * var(--u)) 0 calc(1.95 * var(--u));
        color:#fff;
        background:var(--primary-green);
        border-radius:max(5px, calc(0.54 * var(--u)));
    }

    .btn-see-more:hover {
        background:var(--soft-gold);
    }
}

#season-cta {
    /* Background image (gradient + branches) is 1920 x 613 */
    aspect-ratio:1920 / 613;
    box-sizing:border-box;
    padding:calc(3.66 * var(--u)) 1rem calc(2 * var(--u));
    text-align:center;
    color:#fff;
    background:var(--deep-green) url("../images/fall-winter-bring-festive-joy_bg.jpg") no-repeat center / cover;

    h2 {
        margin:0;
        font-size:max(28px, calc(3.85 * var(--u)));
    }

    p {
        margin:calc(1.13 * var(--u)) 0 0;
        font-size:max(13px, calc(1.354 * var(--u)));
        line-height:1.538;
    }

    .divider {
        --divider-color:var(--soft-gold);
        margin:calc(2.75 * var(--u)) auto 0;
    }

    .cta-buttons {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:calc(1.97 * var(--u));
        margin-top:calc(2.74 * var(--u));
    }

    .btn {
        justify-content:center;
        gap:calc(1.15 * var(--u));
        min-width:calc(23.51 * var(--u));
        height:max(38px, calc(4.73 * var(--u)));
        padding:0 calc(1.74 * var(--u));
        text-transform:uppercase;
        color:var(--primary-green);
        background:#fff;
        border-radius:999px;

        svg {
            stroke-width:1.25;
        }
    }

    .btn:hover {
        color:#fff;
        background:var(--soft-gold);
    }
}

/* Spring & Summer (spring-summer.html): light hero with green text, a
   different photo frame, the pink sprig and a green CTA band.
   Measurements from Spring & Summer_Season.pdf. */
.season-spring {

    #season-hero {
        color:var(--text-green);

        .eyebrow { color:var(--primary-green); }
        h1 { color:var(--deep-green); }
        .divider { --divider-color:var(--soft-gold); }
    }

    #season-thoughts .eyebrow {
        font-weight:500;
    }

    /* The sprig hangs off the right edge of the page */
    #season-highlights {
        overflow-x:clip;
    }

    .highlights-sprig {
        position:absolute;
        top:calc(-0.9 * var(--u));
        right:calc(-2.03 * var(--u));
        z-index:1;
        width:calc(18.91 * var(--u));
        height:auto;
        pointer-events:none;
    }

    #season-cta {
        background-image:url("../images/spring-summer-ready-to-beautify_bg.jpg");
    }
}

@media (min-width: 769px) {

    .season-spring {

        /* Cream fade over the left of the photo, measured from the PDF */
        #season-hero {
            background:
                linear-gradient(90deg, rgb(var(--cream-rgb) / 0.9) 0%, rgb(var(--cream-rgb) / 0.8) 10%, rgb(var(--cream-rgb) / 0.82) 36%, rgb(var(--cream-rgb) / 0.66) 44%, rgb(var(--cream-rgb) / 0.12) 53%, rgb(var(--cream-rgb) / 0) 57%),
                var(--cream) url("../images/spring-summer-hero-bg.jpg") no-repeat center / cover;

            /* The heading sits 14px lower than on Fall & Winter; the divider doesn't move */
            h1 { margin-top:calc(2.41 * var(--u)); }
            .divider { margin-top:calc(1.29 * var(--u)); }
        }

        #season-thoughts {
            padding-right:calc(5.8 * var(--u));

            .thoughts-text {
                flex-basis:calc(36.98 * var(--u));
                padding-top:calc(5.62 * var(--u));
            }

            p:not(.eyebrow) {
                text-align:justify;
            }

            .thoughts-photo {
                flex-basis:calc(39.79 * var(--u));
                width:calc(39.79 * var(--u));
            }
        }

        #season-highlights {
            padding-bottom:calc(2.71 * var(--u));
        }

        /* Band image is 1920 x 600 */
        #season-cta {
            aspect-ratio:1920 / 600;
            padding-top:calc(2.62 * var(--u));
        }
    }
}

@media (max-width: 768px) {

    .season-spring {

        #season-hero {
            background:
                /* The text fills the whole hero here, so the cream covers it evenly
                   (as strong as the fade behind the text on desktop), with a soft
                   green shadow under the header */
                linear-gradient(rgb(var(--deep-green-rgb) / 0.3), rgb(var(--deep-green-rgb) / 0.12) 20px, rgb(var(--deep-green-rgb) / 0) 60px),
                linear-gradient(rgb(var(--cream-rgb) / 0.9), rgb(var(--cream-rgb) / 0.9)),
                var(--cream) url("../images/spring-summer-hero-bg.jpg") no-repeat 70% center / cover;
        }

        /* Room for the sprig above the "Featured This Season" label */
        #season-highlights {
            padding-top:5.75rem;
        }

        /* Below the gold wave, not over it */
        .highlights-sprig {
            top:1rem;
            right:-1rem;
            width:110px;
        }
    }
}

/* ===== Maintenance page (maintenance.html) =====
   Measurements come from Maintenance_page.pdf (1920px wide), as
   px-at-1920 / 19.2 = --u. */

/* Centered text on cream: the Maintenance and Landscape intros, the
   Landscape foreman section and the 404 page (each sets its own sizes) */
#maint-intro,
#land-intro,
#land-foreman,
#not-found {
    text-align:center;
    color:var(--text-green);
    background:var(--cream);

    .eyebrow { color:var(--soft-gold); }
    .divider { --divider-color:var(--soft-gold); }
}

/* One eyebrow style for those, the other Landscape sections and the
   Contact hero: 30px at 1920 (Landscape_page.pdf), so the page-top
   eyebrows all match */
#maint-intro,
#land-intro,
#land-install,
#land-foreman,
#land-work,
#contact-hero,
#not-found {
    --eyebrow-size:max(12px, calc(1.5625 * var(--u)));
    --eyebrow-gap:calc(0.88 * var(--u));
}

/* The page-top intros match: eyebrow height, and heading size and
   spacing (Landscape_page.pdf values; the Maintenance PDF's differ a little) */
#maint-intro,
#land-intro,
#not-found {
    padding:calc(2.74 * var(--u)) 1rem 0;

    h1 {
        margin:calc(1.1 * var(--u)) 0 0;
        font-size:max(30px, calc(4.583 * var(--u)));
    }
}

#maint-intro {
    padding-bottom:calc(1.35 * var(--u));

    .divider {
        --dot:max(6px, calc(0.48 * var(--u)));
        --gap:calc(0.78 * var(--u));
        width:calc(11 * var(--u));
        margin:calc(1.79 * var(--u)) auto 0;
    }

    p:not(.eyebrow) {
        max-width:calc(48.5 * var(--u));
        margin:calc(2.23 * var(--u)) auto 0;
        font-size:max(13px, calc(1.302 * var(--u)));
        font-weight:500;
        line-height:1.6;
    }
}

/* Photo band with the 8 service circles. Section = PDF page area
   y 821-1759 (1920 x 938), the same size as the photo. */
#maint-services {
    position:relative;
    /* Above the next section, so the bottom wave can spill into it */
    z-index:1;
    aspect-ratio:1920 / 938;
    background:var(--primary-green) url("../images/maintenance_hero_bg.jpg") no-repeat center top / cover;

    .services-wave {
        z-index:1;

        &.top { top:0; }
        &.bottom { bottom:0; }

        .wave-line {
            fill:none;
            stroke-width:10;
        }
    }

    /* Cream above the top wave covers the white edge of the photo */
    .top .wave-fill { fill:var(--cream); }
    .bottom .wave-fill { fill:var(--primary-green); }

    /* Positions are % of the section, so the circles stay put on the photo */
    .service-list {
        position:absolute;
        z-index:2;
        top:11.9%;
        left:10.82%;
        width:78.79%;
        display:grid;
        /* 4 circles of 266.8px across 1512.8px, evenly spaced */
        grid-template-columns:repeat(4, 17.635%);
        justify-content:space-between;
        margin:0;
        padding:0;
        list-style:none;

        /* Circles are .ring-circle */
        li {
            /* Lets the label size itself to the circle (cqi units) */
            container-type:inline-size;
        }

        /* Second row: 111px gap = 41.75% of a circle's width */
        li:nth-child(n+5) {
            margin-top:41.75%;
        }

        /* Icons sit on a common baseline; --w is the icon's width in the PDF */
        img {
            position:absolute;
            left:50%;
            bottom:51.6%;
            width:calc(var(--w) / 266.8 * 100%);
            height:auto;
            transform:translateX(-50%);
        }

        span {
            position:absolute;
            top:54.2%;
            left:8%;
            right:8%;
            height:20.8%;
            display:flex;
            align-items:center;
            justify-content:center;
            /* Fallback for browsers without container units: 7.5% of a
               circle that's 13.9% of the page width */
            font-size:max(11px, 1.04vw);
            font-size:max(11px, 7.5cqi);
            line-height:1.235;
            text-align:center;
            color:var(--text-green);
        }
    }
}

/* Land Designs vs. Competitors. The green heading band is PDF page area
   y 1759-2050; the bottom wave of #maint-services spills into its top. */
#maint-compare {
    --eyebrow-rule:max(1px, calc(0.14 * var(--u)));

    .compare-head {
        padding:calc(1.79 * var(--u)) 1rem calc(2.31 * var(--u));
        text-align:center;
        color:#fff;
        background:var(--primary-green);
    }

    /* "— THE LAND DESIGNS DIFFERENCE —" */
    .eyebrow {
        color:var(--light-gold);
    }

    h2 {
        margin:calc(1.14 * var(--u)) 0 0;
        font-size:max(30px, calc(4.48 * var(--u)));
    }

    .compare-head .divider {
        --dot:max(6px, calc(0.6 * var(--u)));
        --gap:calc(0.96 * var(--u));
        width:calc(13.65 * var(--u));
        margin:calc(1.94 * var(--u)) auto 0;
    }

    /* The two columns: PDF page area y 2050-3557. One shared grid: a title
       row plus 6 card rows. Both columns use it (subgrid), and the 1fr rows
       all match the tallest card, so every card is the same height and the
       two columns line up row by row. */
    .compare-body {
        position:relative;
        display:grid;
        grid-template-columns:repeat(2, calc(40.89 * var(--u)));
        grid-template-rows:auto repeat(6, minmax(calc(7.34 * var(--u)), 1fr));
        row-gap:calc(2.03 * var(--u));
        justify-content:space-between;
        padding:calc(11.22 * var(--u)) calc(2.6 * var(--u)) calc(5.55 * var(--u)) calc(2.88 * var(--u));
        overflow:hidden;
        /* Palette grey gradient, with Primary Green fading in at the right edge */
        background:
            linear-gradient(90deg, rgb(var(--primary-green-rgb) / 0) 88%, rgb(var(--primary-green-rgb) / 0.5)),
            linear-gradient(90deg, #cccbcb 55%, #e3ded5);
    }

    .compare-bg {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;

        .green { fill:var(--primary-green); }
        /* PDF beige (#e8e1d6), an approved exception to the palette, so the
           panel stands apart from the cream section below */
        .panel { fill:var(--beige); }

        .gold {
            fill:none;
            stroke:var(--soft-gold);
            stroke-width:1;
            /* Keep the line 1px thin however much the SVG stretches */
            vector-effect:non-scaling-stroke;
        }
    }

    /* Faded fern in the bottom-left corner, in front of the last card so its
       tips overlap it. Sized in --u like the cards, so the overlap holds. */
    .compare-fern {
        position:absolute;
        left:calc(-1.41 * var(--u));
        bottom:0;
        z-index:2;
        width:calc(10.5 * var(--u));
        height:auto;
        opacity:0.3;
        pointer-events:none;
    }

    .compare-col {
        position:relative;
        z-index:1;
        grid-row:1 / -1;
        display:grid;
        grid-template-rows:subgrid;
    }

    .ours { --accent:var(--primary-green); }
    .theirs { --accent:var(--soft-gold); }

    .compare-col h3 {
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:calc(5.16 * var(--u));
        /* 2.4u below the title in all: the row gap plus this */
        margin:0 0 calc(0.37 * var(--u));
        font-size:max(16px, calc(1.87 * var(--u)));
        font-weight:400;
        line-height:1.2;
        text-align:center;
        text-transform:uppercase;
        color:#fff;
        background:var(--accent);
        border-radius:max(5px, calc(0.45 * var(--u)));
    }

    .compare-list {
        grid-row:2 / -1;
        display:grid;
        grid-template-rows:subgrid;
        margin:0;
        padding:0;
        list-style:none;

        li {
            display:flex;
            align-items:center;
            box-sizing:border-box;
            padding:0 calc(1.38 * var(--u)) 0 calc(2.55 * var(--u));
            /* Cream lightened with white, a touch brighter than the panel */
            background:linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)), var(--cream);
            border:1px solid var(--accent);
            border-radius:max(5px, calc(0.45 * var(--u)));
        }
    }

    /* White circle with the icon; --w is the icon's width in the PDF */
    .compare-icon {
        display:grid;
        place-items:center;
        flex:0 0 calc(5.02 * var(--u));
        aspect-ratio:1;
        box-sizing:border-box;
        background:#fff;
        border:1px solid var(--accent);
        border-radius:50%;

        img {
            width:calc(var(--w) / 96.4 * 100%);
            height:auto;
        }
    }

    .compare-text {
        flex:1;
        align-self:flex-start;
        margin-left:calc(1.2 * var(--u));
        padding:calc(1.37 * var(--u)) 0 calc(0.9 * var(--u));
        color:var(--text-green);
    }

    h4 {
        margin:0;
        font-size:max(14px, calc(1.3 * var(--u)));
        font-weight:400;
        text-transform:uppercase;

        /* Short accent rule under the title */
        &::after {
            content:"";
            display:block;
            width:calc(2.69 * var(--u));
            height:1px;
            margin-top:calc(0.75 * var(--u));
            background:var(--accent);
        }
    }

    .compare-text p {
        max-width:calc(27.6 * var(--u));
        margin:calc(0.44 * var(--u)) 0 0;
        font-size:max(12px, calc(1.04 * var(--u)));
        line-height:1.4;
    }

    /* ✓ / ✕ / ? badges. Green and red are an approved exception to the palette. */
    .badge {
        display:grid;
        place-items:center;
        flex:0 0 calc(2.14 * var(--u));
        aspect-ratio:1;
        margin-left:calc(1 * var(--u));
        font-size:max(12px, calc(1.2 * var(--u)));
        font-weight:700;
        line-height:1;
        color:#fff;
        border-radius:50%;

        &.yes { background:#2ea049; }
        &.no { background:#ec452e; }
        &.maybe { background:var(--soft-gold); }
    }

    /* Centered on the curve, halfway down */
    .compare-vs {
        position:absolute;
        top:50.6%;
        left:49.45%;
        z-index:2;
        display:grid;
        place-items:center;
        box-sizing:border-box;
        width:calc(5.76 * var(--u));
        aspect-ratio:1;
        margin:0;
        font-family: "Cormorant Garamond", serif;
        font-size:max(20px, calc(2.78 * var(--u)));
        line-height:1;
        color:#fff;
        background:var(--primary-green);
        border:max(2px, calc(0.16 * var(--u))) solid var(--soft-gold);
        border-radius:50%;
        transform:translate(-50%, -50%);
    }
}

/* "What Is an Account Manager?": PDF page area y 3557-4693 */
#maint-account {
    display:flex;
    align-items:flex-start;
    padding:0 calc(7.93 * var(--u)) calc(4.53 * var(--u)) calc(4.17 * var(--u));
    color:var(--text-green);
    background:var(--cream);

    .divider {
        --divider-color:var(--soft-gold);
    }

    /* Illustration (rendered from the PDF, rings included) between two dividers */
    .account-art {
        flex:0 0 calc(32.55 * var(--u));
        padding-top:calc(13.84 * var(--u));

        img {
            display:block;
            width:100%;
            height:auto;
            margin:calc(2.11 * var(--u)) 0 calc(2.38 * var(--u));
        }

        .divider {
            --dot:max(6px, calc(0.47 * var(--u)));
            --gap:calc(0.75 * var(--u));
            width:calc(10.63 * var(--u));
            margin:0 auto;
        }
    }

    .account-text {
        flex:0 0 calc(48.42 * var(--u));
        margin-left:calc(6.93 * var(--u));
        padding-top:calc(4.32 * var(--u));
    }

    /* "— YOUR POINT OF CONTACT —" */
    .eyebrow {
        color:var(--soft-gold);
    }

    h2 {
        margin:calc(0.91 * var(--u)) 0 0;
        font-size:max(28px, calc(3.96 * var(--u)));
        font-weight:600;
    }

    .account-text .divider {
        --dot:max(6px, calc(0.39 * var(--u)));
        --gap:calc(1.28 * var(--u));
        width:calc(10.59 * var(--u));
        margin:calc(0.69 * var(--u)) 0 0 calc(0.58 * var(--u));
    }

    .account-text p:not(.eyebrow) {
        margin:calc(0.75 * var(--u)) 0 0 calc(0.46 * var(--u));
        font-size:max(13px, calc(1.302 * var(--u)));
        font-weight:500;
        line-height:1.6;
        text-align:justify;
    }

    .account-text .divider + p {
        margin-top:calc(1.42 * var(--u));
    }

    /* 8 traits: 4 per row, circle centers 258.4px apart like the PDF */
    .account-traits {
        display:grid;
        grid-template-columns:repeat(4, 1fr);
        row-gap:calc(1.5 * var(--u));
        width:calc(53.83 * var(--u));
        margin:calc(0.98 * var(--u)) 0 0 calc(-2.48 * var(--u));
        padding:0;
        list-style:none;

        li {
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:calc(1.29 * var(--u));
            font-size:max(12px, calc(1.04 * var(--u)));
            font-weight:600;
            line-height:1.2;
            text-align:center;
            white-space:nowrap;
        }
    }

    /* .ring-circle; --w is the icon's width in % */
    .trait-icon {
        display:grid;
        place-items:center;
        width:calc(7.58 * var(--u));
        --ring-inset:3.4%;

        img {
            width:calc(var(--w) * 1%);
            height:auto;
        }
    }
}

/* ===== Landscape page (landscape.html) =====
   Measurements come from Landscape_page.pdf (1920px wide), as
   px-at-1920 / 19.2 = --u. */

/* Intro (shares its base, heading included, with the Maintenance intro).
   The 404 page uses the same divider and text. */
#land-intro {
    padding-bottom:calc(0.46 * var(--u));
}

#land-intro,
#not-found {

    .divider {
        --dot:max(6px, calc(0.5 * var(--u)));
        --gap:calc(0.78 * var(--u));
        width:calc(10.94 * var(--u));
        margin:calc(1.8 * var(--u)) auto 0;
    }

    p:not(.eyebrow) {
        max-width:calc(50 * var(--u));
        margin:calc(2.27 * var(--u)) auto 0;
        font-size:max(13px, calc(1.354 * var(--u)));
        line-height:1.538;
    }
}

/* Divider size on the three Landscape bands (sections set color and margins) */
#land-install .divider,
#land-foreman .divider,
#land-work .divider {
    --dot:max(6px, calc(0.57 * var(--u)));
    --gap:calc(0.91 * var(--u));
    width:calc(12.83 * var(--u));
}

/* "How We Install": photo band with the 4 steps. Section = PDF page area
   y 813-1828 (1920 x 1015). The photo has the PDF's 50% Primary Green
   tint baked in. */
#land-install {
    position:relative;
    /* Above the next section, so the bottom wave can spill into it */
    z-index:1;
    padding:calc(7.74 * var(--u)) 1rem calc(9.46 * var(--u));
    text-align:center;
    color:#fff;
    background:var(--primary-green) url("../images/landscape-install-bg.jpg") no-repeat center / cover;

    .install-wave {
        z-index:1;

        &.top { top:0; }
        &.bottom { bottom:0; }

        .wave-fill { fill:var(--cream); }

        .wave-line {
            fill:none;
            stroke:var(--soft-gold);
            stroke-width:5;
        }
    }

    /* "— SEAMLESS INSTALLATIONS —" */
    .eyebrow {
        color:var(--light-gold);
    }

    h2 {
        margin:calc(1.84 * var(--u)) 0 0;
        font-size:max(30px, calc(4.646 * var(--u)));
    }

    .divider {
        margin:calc(2.34 * var(--u)) auto 0;
    }

    /* 4 columns, 452px apart in the PDF */
    .install-steps {
        display:grid;
        grid-template-columns:repeat(4, calc(23.55 * var(--u)));
        justify-content:center;
        margin:calc(2.61 * var(--u)) 0 0;
        padding:0;
        list-style:none;
    }

    li {
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    /* .ring-circle; the icon SVG is drawn to the circle's full size */
    .step-icon {
        display:block;
        width:calc(7.79 * var(--u));

        img {
            display:block;
            width:100%;
            height:auto;
        }
    }

    h3 {
        margin:calc(3.11 * var(--u)) 0 0;
        font-family:"Montserrat", sans-serif;
        font-size:max(13px, calc(1.484 * var(--u)));
        text-transform:uppercase;
    }

    p:not(.eyebrow) {
        max-width:calc(var(--w) * var(--u));
        margin:calc(1.05 * var(--u)) 0 0;
        font-size:max(12px, calc(1.146 * var(--u)));
        line-height:1.56;
    }
}

/* "What Is a Landscape Foreman?": text, then the 4 role circles beside the
   hexagon art (shares its base with the intros). Starts at PDF y 1828,
   right under the install band; the eyebrow sits up beside that band's
   bottom wave, as in the PDF. */
#land-foreman {
    padding:0 0 calc(0.89 * var(--u));

    h2 {
        margin:calc(1.84 * var(--u)) 0 0;
        font-size:max(30px, calc(4.646 * var(--u)));
    }

    .divider {
        margin:calc(2.32 * var(--u)) auto 0;
    }

    > p:not(.eyebrow) {
        max-width:calc(41.5 * var(--u));
        margin:calc(1.55 * var(--u)) auto 0;
        font-size:max(13px, calc(1.354 * var(--u)));
        line-height:1.4615;
    }

    /* Roles on the left, art on the right; together they span the page */
    .foreman-row {
        display:flex;
        justify-content:center;
        align-items:flex-start;
        gap:calc(6.34 * var(--u));
        margin-top:calc(0.55 * var(--u));
        padding:0 calc(4.43 * var(--u)) 0 calc(3.36 * var(--u));
    }

    .foreman-roles {
        display:flex;
        flex:none;
        width:calc(58.69 * var(--u));
        margin:calc(6.08 * var(--u)) 0 0;
        padding:0;
        list-style:none;

        li {
            position:relative;
            flex:1;
            display:flex;
            flex-direction:column;
            align-items:center;
        }

        /* Thin gold line with a dot between neighbours */
        li + li::before,
        li + li::after {
            content:"";
            position:absolute;
            left:0;
            background:var(--soft-gold);
        }

        li + li::before {
            top:calc(-0.06 * var(--u));
            width:1px;
            height:calc(9.21 * var(--u));
        }

        li + li::after {
            top:calc(4.28 * var(--u));
            width:calc(0.64 * var(--u));
            aspect-ratio:1;
            border-radius:50%;
            transform:translate(-50%, -50%);
        }

        span:last-child {
            margin-top:calc(1.21 * var(--u));
            font-size:max(12px, calc(1.365 * var(--u)));
            line-height:1.26;
        }
    }

    /* .ring-circle in green with a cream ring; the icon SVG is drawn to
       the circle's full size */
    .role-icon {
        display:block;
        width:calc(9.22 * var(--u));
        --circle-bg:var(--primary-green);
        --ring-color:var(--cream);
        --ring-inset:3.5%;

        img {
            display:block;
            width:100%;
            height:auto;
        }
    }

    .foreman-art {
        display:block;
        flex:none;
        width:calc(27.19 * var(--u));
        height:auto;
    }
}

/* "Installed Landscapes" green band. Section = PDF page area y 2773-3345
   (1920 x 572); the band SVG stretches to fill it. */
#land-work {
    position:relative;
    box-sizing:border-box;
    aspect-ratio:1920 / 572;
    padding-top:calc(10.98 * var(--u));
    text-align:center;
    color:#fff;
    background:var(--cream);

    .work-band {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }

    /* Above the band */
    .eyebrow,
    h2,
    .divider {
        position:relative;
    }

    /* "— COMPLETED WORK —" */
    .eyebrow {
        color:var(--light-gold);
    }

    h2 {
        margin:calc(0.25 * var(--u)) 0 0;
        font-size:max(30px, calc(4.837 * var(--u)));
    }

    .divider {
        margin:calc(0.74 * var(--u)) auto 0;
    }
}

/* Gallery: 13 full-width rows, photos alternating right and left. Each row
   is 1920 x 822.4 in the PDF (between the frame lines' centers); all sizes
   are % of the row, so the layout scales the same at every width. The PDF's
   rows differ by a few px; these are the averages. */
#land-gallery {
    /* Frames run off the page edge */
    overflow:hidden;
    /* Space above the footer */
    padding-bottom:11.17%;
    background:var(--cream);
    --frame:max(2px, 0.26vw);

    .gallery-rows {
        margin:0;
        padding:0;
        list-style:none;
    }

    li {
        position:relative;
        aspect-ratio:1920 / 822.4;
    }

    /* Neighbouring frames share their line */
    li + li {
        margin-top:-0.146%;
    }

    /* The green frame: a line with a half-round outer end, plus a solid
       green strip along the straight edges, behind the photo */
    li::before {
        content:"";
        position:absolute;
        top:calc(var(--frame) / -2);
        bottom:calc(var(--frame) / -2);
        border:var(--frame) solid var(--primary-green);
        background:linear-gradient(var(--primary-green), var(--primary-green)) no-repeat;
        background-size:calc(100% - 18.26vw) 100%;
    }

    /* Photo: inset inside the frame. Its curved end is the PDF's clip curve
       (not a half-ellipse: it meets the straight edges at an angle, which
       keeps it inside the frame line), as % of the photo so it scales. */
    li > img:first-child {
        position:absolute;
        top:0.948%;
        width:86.755%;
        height:98.1%;
        object-fit:cover;
    }

    .row-fern {
        position:absolute;
        height:auto;
    }

    /* Photo on the right, rounded end on the left */
    .photo-right {

        &::before {
            left:calc(12.396% - var(--frame) / 2);
            right:-1%;
            border-right:0;
            border-radius:9999px 0 0 9999px;
            background-position:right;
        }

        > img:first-child {
            right:0;
            clip-path:polygon(100% 0%, 20.23% 0%, 18.86% 0.68%, 17.52% 1.5%, 16.22% 2.45%, 14.95% 3.54%, 13.72% 4.75%, 12.53% 6.08%, 11.38% 7.53%, 10.27% 9.08%, 9.21% 10.75%, 8.19% 12.52%, 7.23% 14.38%, 6.31% 16.34%, 5.45% 18.39%, 4.64% 20.52%, 3.89% 22.73%, 3.2% 25.01%, 2.57% 27.36%, 2% 29.78%, 1.5% 32.26%, 1.06% 34.79%, 0.69% 37.38%, 0.38% 40.01%, 0.16% 42.68%, 0% 45.39%, 0% 48.49%, 0% 51.57%, 0.04% 54.63%, 0.24% 57.66%, 0.53% 60.65%, 0.91% 63.59%, 1.38% 66.47%, 1.93% 69.3%, 2.56% 72.05%, 3.28% 74.73%, 4.06% 77.32%, 4.93% 79.82%, 5.86% 82.23%, 6.87% 84.52%, 7.94% 86.71%, 9.08% 88.77%, 10.28% 90.7%, 11.54% 92.5%, 12.86% 94.15%, 14.23% 95.65%, 15.66% 97%, 17.13% 98.17%, 18.66% 99.18%, 20.23% 100%, 100% 100%);
        }

        .row-fern {
            left:-0.26%;
            bottom:0.38%;
            width:12.12%;
        }
    }

    /* The last fern sits right on the footer: down through the section's
       bottom padding (214.5px = 26.08% of a 822.4px row) */
    li:last-child .row-fern {
        bottom:-26.08%;
    }

    /* Photo on the left, rounded end on the right */
    .photo-left {

        &::before {
            left:-1%;
            right:calc(12.396% - var(--frame) / 2);
            border-left:0;
            border-radius:0 9999px 9999px 0;
            background-position:left;
        }

        > img:first-child {
            left:0;
            clip-path:polygon(0% 0%, 79.77% 0%, 81.14% 0.68%, 82.48% 1.5%, 83.78% 2.45%, 85.05% 3.54%, 86.28% 4.75%, 87.47% 6.08%, 88.62% 7.53%, 89.73% 9.08%, 90.79% 10.75%, 91.81% 12.52%, 92.77% 14.38%, 93.69% 16.34%, 94.55% 18.39%, 95.36% 20.52%, 96.11% 22.73%, 96.8% 25.01%, 97.43% 27.36%, 98% 29.78%, 98.5% 32.26%, 98.94% 34.79%, 99.31% 37.38%, 99.62% 40.01%, 99.84% 42.68%, 100% 45.39%, 100% 48.49%, 100% 51.57%, 99.96% 54.63%, 99.76% 57.66%, 99.47% 60.65%, 99.09% 63.59%, 98.62% 66.47%, 98.07% 69.3%, 97.44% 72.05%, 96.72% 74.73%, 95.94% 77.32%, 95.07% 79.82%, 94.14% 82.23%, 93.13% 84.52%, 92.06% 86.71%, 90.92% 88.77%, 89.72% 90.7%, 88.46% 92.5%, 87.14% 94.15%, 85.77% 95.65%, 84.34% 97%, 82.87% 98.17%, 81.34% 99.18%, 79.77% 100%, 0% 100%);
        }

        .row-fern {
            left:86.48%;
            bottom:0.33%;
            width:13.41%;
        }
    }
}

/* ===== Contact page (contact.html) =====
   Measurements come from Contact Us_page.pdf (1920px wide), as
   px-at-1920 / 19.2 = --u. */

/* One photo section from header to footer: PDF page area y 341-1711.
   The PDF's overlay stops 18px short of the footer; this one covers the
   whole photo. Deep Forest Green at 60% replaces the PDF's off-palette
   #012f26. */
#contact-hero {
    padding:calc(8.28 * var(--u)) 1rem calc(10.54 * var(--u));
    text-align:center;
    color:#fff;
    background:
        linear-gradient(rgb(var(--deep-green-rgb) / 0.6), rgb(var(--deep-green-rgb) / 0.6)),
        var(--deep-green) url("../images/contact-hero-bg.jpg") no-repeat center / cover;

    /* "— CONTACT US —" */
    .eyebrow {
        color:var(--light-gold);
    }

    h1 {
        margin:calc(4.49 * var(--u)) 0 0;
        font-size:max(30px, calc(5 * var(--u)));
    }

    /* The PDF's Raleway at 56px; Montserrat runs wider, so a touch smaller */
    .contact-lead {
        margin:calc(1.91 * var(--u)) 0 0;
        font-size:max(16px, calc(2.75 * var(--u)));
        font-weight:500;
        line-height:1.553;
        color:var(--cream);
    }

    /* Short line through a dot (no gaps) */
    .divider {
        --divider-color:var(--cream);
        --dot:max(6px, calc(0.57 * var(--u)));
        --gap:0px;
        width:calc(4.56 * var(--u));
        margin:calc(2 * var(--u)) auto 0;
    }

    /* Phone circle, "Give us a Call" and the number: one tap-to-call link */
    .contact-call {
        display:flex;
        flex-direction:column;
        align-items:center;
        width:fit-content;
        margin:calc(4.06 * var(--u)) auto 0;
        color:#fff;
        text-decoration:none;

        img {
            width:calc(11.78 * var(--u));
            height:auto;
        }
    }

    /* An h2, so the font, weight and line height come from the global
       heading rule */
    .call-heading {
        margin:calc(2.07 * var(--u)) 0 0;
        font-size:max(26px, calc(4.125 * var(--u)));
    }

    .call-number {
        margin-top:calc(0.86 * var(--u));
        font-size:max(18px, calc(2.865 * var(--u)));
        font-weight:300;
        line-height:1.2;
        transition:color 0.2s;
    }

    .contact-call:hover .call-number,
    .contact-call:focus-visible .call-number {
        color:var(--light-gold);
    }
}

/* ===== 404 page (404.html) =====
   No mockup: built from the Landscape intro, with two green buttons. Tall
   enough that the footer sits low on most screens. */
#not-found {
    min-height:calc(100vh - 32 * var(--u));
    padding-bottom:calc(8 * var(--u));
    /* "— ERROR 404 —" much larger than the usual eyebrow */
    --eyebrow-size:max(22px, calc(2.8 * var(--u)));
    --eyebrow-line:calc(5 * var(--u));
    --eyebrow-rule:max(2px, calc(0.2 * var(--u)));
    --eyebrow-gap:calc(1.4 * var(--u));

    .not-found-buttons {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:calc(1.5 * var(--u));
        margin-top:calc(3.5 * var(--u));
    }
}

/* Account manager traits, narrower desktops: let long labels wrap */
@media (min-width: 769px) and (max-width: 1300px) {

    #maint-account .account-traits li {
        white-space:normal;
    }
}

/* Maintenance service circles, large phones / small tablets: 4 across */
@media (min-width: 560px) and (max-width: 768px) {

    #maint-account ul.account-traits {
        grid-template-columns:repeat(4, 1fr);
    }

    /* "ul" outranks the 2-column rule in the main mobile block further down */
    #maint-services ul.service-list {
        max-width:700px;
        grid-template-columns:repeat(4, 1fr);
    }
}

/* Where we Operate, narrower desktops: the text no longer fits at its
   design position, so center it vertically over the ocean and tighten the
   pills, keeping the section (and map) at the design's exact shape */
@media (min-width: 769px) and (max-width: 1200px) {

    #operate {
        display:flex;
        align-items:center;

        .operate-content {
            flex:1;
            padding:calc(2 * var(--u)) calc(3 * var(--u)) calc(2 * var(--u)) 56.06%;
        }

        p:not(.eyebrow) {
            max-width:none;
        }

        .city-list {
            width:auto;

            li {
                min-width:0;
                padding:0 calc(1.2 * var(--u));
            }
        }
    }
}

/* Tablet & mobile: hamburger menu */
@media (max-width: 768px) {

    /* Eyebrows: fixed sizes on small screens (beats the section variables) */
    .eyebrow {
        --eyebrow-line:1.5rem;
        --eyebrow-rule:1px;
        --eyebrow-gap:0.75rem;
        font-size:0.75rem;
    }

    #maint-intro .eyebrow,
    #land-intro .eyebrow,
    #land-install .eyebrow,
    #land-foreman .eyebrow,
    #land-work .eyebrow,
    #contact-hero .eyebrow,
    #maint-compare .eyebrow,
    #maint-account .eyebrow {
        font-size:0.85rem;
    }

    /* Section headings that share the same small-screen size */
    #season-thoughts h2,
    #season-highlights h2,
    #maint-intro h1,
    #land-intro h1,
    #land-install h2,
    #land-foreman h2,
    #land-work h2,
    #contact-hero h1,
    #not-found h1,
    #maint-compare h2 {
        margin-top:0.75rem;
        font-size:2.25rem;
        line-height:1.1;
    }

    /* Body text that shares the same small-screen size (sections set the
       margins). Same selectors as the desktop rules, so this wins. */
    #history p:not(.eyebrow),
    #contact p,
    #operate p:not(.eyebrow),
    #season-hero p:not(.eyebrow),
    #season-thoughts p:not(.eyebrow),
    #season-cta p,
    #maint-intro p:not(.eyebrow),
    #maint-account .account-text p:not(.eyebrow),
    #land-intro p:not(.eyebrow),
    #not-found p:not(.eyebrow),
    #land-foreman > p:not(.eyebrow) {
        max-width:none;
        font-size:0.95rem;
        line-height:1.5;
    }

    /* Dividers: fixed size on small screens. (Same selectors as the desktop
       rules, so this wins; sections below can still adjust them.) */
    #hero .divider,
    #history .divider,
    #season-hero .divider,
    #season-thoughts .divider,
    #season-highlights .divider,
    #season-cta .divider,
    #maint-intro .divider,
    #maint-compare .compare-head .divider,
    #maint-account .account-art .divider,
    #maint-account .account-text .divider,
    #land-intro .divider,
    #not-found .divider,
    #land-install .divider,
    #land-foreman .divider,
    #land-work .divider {
        --dot:6px;
        --gap:0.75rem;
        width:5rem;
    }

    body.nav-open {
        overflow:hidden;
    }

    header {
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:1rem;
        padding:1rem;
        text-align:left;

        .logo-link {
            max-width:min(70%, 380px);
            margin:0;
        }

        img {
            width:auto;
            margin:0;
        }
    }

    .menu-toggle {
        position:relative;
        z-index:101;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:6px;
        width:44px;
        height:44px;
        padding:8px;
        flex-shrink:0;
        background:none;
        border:0;
        cursor:pointer;

        span {
            display:block;
            height:2px;
            background:var(--text-green);
            border-radius:2px;
            transition:transform 0.3s, opacity 0.3s;
        }
    }

    /* Turn the bars into an X when open */
    .menu-toggle[aria-expanded="true"] {
        span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
        span:nth-child(2) { opacity:0; }
        span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
    }

    #site-nav {
        position:fixed;
        top:0;
        left:0;
        z-index:100;
        width:min(80vw, 320px);
        height:100vh;
        height:100dvh;
        padding:1.5rem 0;
        overflow-y:auto;
        background:var(--primary-green);
        box-shadow:4px 0 20px rgb(var(--deep-green-rgb) / 0.35);
        transform:translateX(-100%);
        visibility:hidden;
        transition:transform 0.3s ease, visibility 0s 0.3s;

        ul {
            flex-direction:column;
            gap:0;
        }

        li + li {
            border-top:1px solid rgba(255, 255, 255, 0.2);
        }

        a {
            display:block;
            padding:1rem 1.5rem;
            font-size:1.1rem;
            color:#fff;
            transition:background-color 0.2s;
        }

        a:hover,
        a[aria-current="page"] {
            color:#fff;
        }

        a:hover,
        a:active,
        a:focus-visible,
        a[aria-current="page"] {
            background:var(--soft-gold);
        }

        a[aria-current="page"] {
            text-decoration:none;
        }
    }

    body.nav-open #site-nav {
        transform:none;
        visibility:visible;
        transition:transform 0.3s ease;
    }

    /* Hero: full-width tint instead of the curved panel, fixed text sizes */
    #hero {
        aspect-ratio:auto;
        background-image:
            linear-gradient(rgb(var(--deep-green-rgb) / 0.6), rgb(var(--deep-green-rgb) / 0.6)),
            url("../images/hp-hero-bg.jpg");

        .hero-panel,
        .hero-wrap-shape {
            display:none;
        }

        .hero-content {
            padding:3rem 1.5rem calc(3rem + 4vw);
        }

        .eyebrow {
            margin:0 0 1rem;
        }

        h1 {
            font-size:2.25rem;
        }

        .divider {
            margin:1.5rem 0 1.75rem;
        }

        p:not(.eyebrow) {
            margin-bottom:0.75rem;
            font-size:0.95rem;
        }

        .btn {
            gap:0.5rem;
            margin-top:1.25rem;
            padding:0.75rem 1.1rem;
            font-size:0.8rem;
            border-radius:6px;
        }
    }

    #history {
        flex-direction:column;
        gap:2.5rem;
        padding:3rem 1.5rem;

        .history-text {
            flex:none;
        }

        h2 {
            margin-top:0.75rem;
            font-size:2.25rem;
            line-height:1.05;
            white-space:normal;
        }

        .divider {
            --gap:0.6rem;
            margin:1.5rem 0 1.75rem;
        }

        p:not(.eyebrow) {
            margin-bottom:0.75rem;
        }

        .stat {
            gap:1rem;
            width:auto;
            min-height:4.5rem;
            margin-top:1.75rem;
            padding:0 1.5rem;
            border-width:1px;
            border-radius:1.25rem;
        }

        .stat-number {
            font-size:2.5rem;
        }

        .stat-label {
            font-size:0.75rem;
        }

        .history-photo {
            flex:none;
            width:100%;
            max-width:420px;
            margin:0 auto;
        }
    }

    #contact {
        aspect-ratio:auto;
        overflow:hidden;
        padding-bottom:3rem;

        /* Photo on top: crop the PNG to just its photo area (left 1268px) */
        &::before {
            content:"";
            display:block;
            aspect-ratio:1268 / 1065;
            background:var(--primary-green) url("../images/hp-contact-us-bg.jpg") no-repeat left top / 151.6% auto;
        }

        .contact-shapes {
            display:none;
        }

        /* Keep the palm fronds in the cream panel's top-right and bottom-right corners */
        background:
            url("../images/fern-bottom.png") no-repeat right bottom / 150px auto,
            var(--cream);

        .contact-content {
            padding:2.5rem 1.5rem 0;
            background:url("../images/fern-top.png") no-repeat right top / 90px auto;
        }

        .contact-leaf {
            width:40px;
            margin-left:0.5rem;
        }

        .contact-rule {
            --dot:6px;
            width:5rem;
            margin-top:0.5rem;
            background-size:6px 6px, 78% 1px;

            &.reverse {
                margin-top:1.5rem;
            }
        }

        h2 {
            margin-top:1rem;
            font-size:2.25rem;
        }

        p {
            margin-top:0.5rem;
        }

        .contact-list {
            margin:1.5rem 0 0;

            li + li {
                margin-top:1rem;
            }
        }

        .contact-icon {
            width:40px;
            margin-right:0.75rem;
        }

        .contact-label,
        .contact-value {
            font-size:1.05rem;
        }

        .contact-label {
            flex:0 0 auto;
            margin-right:0.75rem;
        }
    }

    #operate {
        aspect-ratio:auto;
        margin-top:0;
        padding-bottom:3rem;

        &::before {
            display:none;
        }

        background:var(--primary-green);

        /* Map on top, cropped to its left 800px with the labels over it */
        .operate-map {
            position:relative;
            width:100%;
            height:auto;
            aspect-ratio:800 / 1168.8;
            background:url("../images/hp-where-we-operate-bg.jpg") no-repeat 0.74% top / 241.7% auto;
        }

        .operate-content {
            padding:2.5rem 1.5rem 0;
        }

        .operate-eyebrow {
            gap:0.5rem;
            margin-left:0;

            img { width:28px; }
        }

        .eyebrow {
            --eyebrow-line:1.75rem;
            --eyebrow-gap:0.6rem;
            font-size:0.9rem;
        }

        h2 {
            margin-top:1.5rem;
            font-size:2.25rem;
            line-height:1.1;
        }

        .operate-rule {
            --dot:6px;
            width:5rem;
            margin:1.25rem 0 0;
            background-size:6px 6px, calc(100% - 3px) 1px;
        }

        p:not(.eyebrow) {
            margin:1.25rem 0 0;
        }

        .city-list {
            gap:0.75rem;
            width:auto;
            margin:1.75rem 0 0;

            li {
                min-width:0;
                height:2.5rem;
                padding:0 1.1rem;
                font-size:1rem;
                border-width:1.5px;
            }
        }
    }

    footer {
        padding:2.5rem 1.5rem;

        ul {
            gap:0.75rem 1.5rem;
            margin-bottom:1.75rem;
        }

        /* Force a line break after the 3rd link (Landscape & Contact Us on line 2) */
        ul::after {
            content:"";
            flex-basis:100%;
            order:1;
            margin-top:-0.75rem;
        }

        li:nth-child(n+4) {
            order:2;
        }

        a {
            font-size:0.85rem;
        }

        .tagline {
            font-size:1.15rem;
            line-height:1.3;
        }

        .copyright {
            margin-top:0.5rem;
            font-size:0.95rem;
        }
    }

    /* ===== This Season pages ===== */
    #season-hero .btn,
    #season-highlights .btn,
    #season-cta .btn,
    #not-found .btn {
        font-size:0.85rem;
    }

    /* Hero: full-width tint over the photo, fixed text sizes */
    #season-hero {
        aspect-ratio:auto;
        background:
            linear-gradient(rgb(var(--deep-green-rgb) / 0.82), rgb(var(--deep-green-rgb) / 0.82)),
            var(--deep-green) url("../images/fall-winter-hero-bg.jpg") no-repeat 70% center / cover;

        .hero-content {
            padding:3rem 1.5rem calc(3rem + 6vw);
        }

        h1 {
            margin-top:1rem;
            font-size:2.25rem;
        }

        .divider {
            margin:1.5rem 0 1.75rem;
        }

        p:not(.eyebrow) {
            margin:0;
        }

        .btn {
            gap:0.5rem;
            height:auto;
            margin-top:1.75rem;
            padding:0.8rem 1.25rem;
        }
    }

    #season-thoughts {
        flex-direction:column;
        gap:2.5rem;
        padding:3.5rem 1.5rem 3rem;

        .thoughts-text {
            flex:none;
            padding-top:0;
        }

        .eyebrow {
            white-space:normal;
        }

        .divider {
            margin:1.5rem 0 1.75rem;
        }

        p:not(.eyebrow) {
            margin-top:0.75rem;
        }

        .thoughts-photo {
            flex:none;
            width:100%;
            max-width:420px;
            margin:0 auto;
        }
    }

    #season-highlights {
        padding:3.5rem 1.5rem 3rem;

        .divider {
            margin:1.5rem auto 0;
        }

        .highlight-cards {
            flex-direction:column;
            align-items:center;
            gap:1.5rem;
            margin-top:2rem;

            li {
                flex:none;
                width:100%;
                max-width:400px;
            }
        }

        .card-text {
            left:1.25rem;
            right:1.25rem;
            bottom:1.25rem;
        }

        h3 {
            font-size:1.15rem;
        }

        .card-text p {
            margin-top:0.5rem;
            font-size:0.9rem;
            line-height:1.45;
        }

        .btn-see-more {
            gap:0.5rem;
            height:auto;
            margin-top:2rem;
            padding:0.7rem 1.25rem;
            border-radius:6px;
        }
    }

    #season-cta {
        aspect-ratio:auto;
        padding:3rem 1.5rem;

        h2 {
            font-size:2rem;
        }

        p {
            margin-top:0.75rem;

            /* Let the line wrap naturally on narrow screens */
            br { display:none; }
        }

        .divider {
            margin:1.5rem auto 0;
        }

        .cta-buttons {
            flex-direction:column;
            align-items:center;
            gap:1rem;
            margin-top:1.75rem;
        }

        .btn {
            gap:0.5rem;
            width:100%;
            max-width:300px;
            min-width:0;
            height:auto;
            padding:0.9rem 1.25rem;
        }
    }

    /* ===== Maintenance & Landscape pages ===== */
    #maint-intro,
    #land-intro,
    #not-found {
        padding:3rem 1.5rem 2rem;

        .divider {
            margin-top:1.5rem;
        }

        p:not(.eyebrow) {
            margin-top:1.25rem;
        }
    }

    /* Circles in two columns over the photo. The photo is scaled a little
       past the section's height and anchored at the bottom, which crops
       off the white edge along its top. */
    #maint-services {
        aspect-ratio:auto;
        padding:calc(4vw + 2.5rem) 1.5rem calc(9vw + 2.5rem);
        background-size:auto 112%;
        background-position:center bottom;

        .service-list {
            position:static;
            width:auto;
            max-width:360px;
            margin:0 auto;
            grid-template-columns:repeat(2, 1fr);
            gap:1.25rem;

            li:nth-child(n+5) {
                margin-top:0;
            }
        }
    }

    #maint-compare {

        .compare-head {
            padding:2.25rem 1.5rem 2.75rem;
        }

        .compare-head .divider {
            margin-top:1.5rem;
        }

        /* Columns stack: ours on cream, theirs on the grey gradient, with
           the VS circle straddling the join */
        .compare-body {
            display:block;
            padding:0;
            background:none;
        }

        .compare-bg,
        .compare-fern {
            display:none;
        }

        .compare-col {
            display:block;
            padding:2.5rem 1.25rem;
        }

        .ours {
            padding-bottom:3.5rem;
            background:var(--beige);
        }

        .theirs {
            padding-top:3.5rem;
            background:linear-gradient(#cccbcb, #e3ded5);
        }

        .compare-col h3 {
            min-height:3.25rem;
            margin-bottom:1.25rem;
            padding:0.5rem 1rem;
            font-size:1.15rem;
            border-radius:6px;
        }

        .compare-list {
            display:block;

            li {
                min-height:0;
                padding:1rem 0.9rem;
                border-radius:6px;
            }

            li + li {
                margin-top:0.9rem;
            }
        }

        .compare-icon {
            flex-basis:3.25rem;
        }

        .compare-text {
            align-self:center;
            margin-left:0.9rem;
            padding:0;
        }

        h4 {
            font-size:1.05rem;

            &::after {
                width:2.25rem;
                margin-top:0.4rem;
            }
        }

        .compare-text p {
            max-width:none;
            margin-top:0.4rem;
            font-size:0.85rem;
        }

        .badge {
            flex-basis:1.75rem;
            margin-left:0.75rem;
            font-size:0.9rem;
        }

        .compare-vs {
            position:relative;
            top:auto;
            left:auto;
            width:4.5rem;
            margin:-2.25rem auto;
            font-size:1.75rem;
            border-width:2px;
            transform:none;
        }
    }

    /* Account manager: text first, then the illustration, traits 2 across */
    #maint-account {
        flex-direction:column;
        padding:3rem 1.5rem;

        .account-art {
            order:2;
            flex:none;
            width:100%;
            max-width:340px;
            margin:2.5rem auto 0;
            padding-top:0;

            img {
                margin:1.25rem 0;
            }
        }

        .account-text {
            flex:none;
            margin-left:0;
            padding-top:0;
        }

        h2 {
            margin-top:0.75rem;
            font-size:2rem;
            line-height:1.1;
        }

        .account-text .divider {
            margin:1.25rem 0 0;
        }

        .account-text p:not(.eyebrow) {
            margin:0.75rem 0 0;
            text-align:left;
        }

        .account-text .divider + p {
            margin-top:1.25rem;
        }

        .account-traits {
            grid-template-columns:repeat(2, 1fr);
            gap:1.5rem 1rem;
            width:auto;
            margin:2rem 0 0;

            li {
                gap:0.6rem;
                font-size:0.85rem;
                white-space:normal;
            }
        }

        .trait-icon {
            width:5.5rem;
        }
    }

    /* ===== Landscape page ===== */
    /* Steps in two columns. A little extra green over the photo, since the
       small text sits over the bright walls here. */
    #land-install {
        padding:calc(4vw + 3rem) 1.5rem calc(5vw + 3rem);
        background-image:
            linear-gradient(rgb(var(--primary-green-rgb) / 0.35), rgb(var(--primary-green-rgb) / 0.35)),
            url("../images/landscape-install-bg.jpg");

        .divider {
            margin-top:1.5rem;
        }

        .install-steps {
            grid-template-columns:repeat(2, 1fr);
            gap:2.25rem 1.25rem;
            max-width:420px;
            margin:2.25rem auto 0;
        }

        .step-icon {
            width:5.5rem;
        }

        h3 {
            margin-top:1rem;
            font-size:0.9rem;
        }

        p:not(.eyebrow) {
            max-width:none;
            margin-top:0.5rem;
            font-size:0.85rem;
            line-height:1.5;
        }
    }

    /* Roles in two columns (no separators), art centered below */
    #land-foreman {
        padding:2.5rem 1.5rem 3.5rem;

        .divider {
            margin-top:1.5rem;
        }

        > p:not(.eyebrow) {
            margin-top:1.25rem;
        }

        .foreman-row {
            display:block;
            margin-top:2.5rem;
            padding:0;
        }

        .foreman-roles {
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:2rem 1rem;
            width:auto;
            max-width:360px;
            margin:0 auto;

            li + li::before,
            li + li::after {
                display:none;
            }

            span:last-child {
                margin-top:0.75rem;
                font-size:0.9rem;
            }
        }

        .role-icon {
            width:6rem;
        }

        .foreman-art {
            width:100%;
            max-width:320px;
            margin:2.5rem auto 0;
        }
    }

    /* The band stretches to fit the text */
    #land-work {
        aspect-ratio:auto;
        padding:4.5rem 1.5rem 5rem;

        .divider {
            margin-top:1.25rem;
        }
    }

    /* ===== 404 page ===== */
    #not-found {
        min-height:0;
        padding-bottom:4rem;

        .eyebrow {
            --eyebrow-line:2.5rem;
            --eyebrow-rule:2px;
            --eyebrow-gap:1rem;
            font-size:1.5rem;
        }

        .not-found-buttons {
            flex-direction:column;
            align-items:center;
            gap:1rem;
            margin-top:2rem;
        }

        .btn {
            gap:0.5rem;
            height:auto;
            padding:0.8rem 1.25rem;
        }
    }

    /* ===== Contact page ===== */
    #contact-hero {
        padding:3.5rem 1.5rem 4rem;

        .contact-lead {
            margin-top:1rem;
            font-size:1.1rem;
            line-height:1.5;
        }

        .divider {
            --dot:6px;
            width:4rem;
            margin-top:1.5rem;
        }

        .contact-call {
            margin-top:2rem;

            img {
                width:7rem;
            }
        }

        .call-heading {
            margin-top:1.25rem;
            font-size:2rem;
        }

        .call-number {
            margin-top:0.25rem;
            font-size:1.6rem;
        }
    }
}

/* Older browsers without "overflow-x: clip" (used on the homepage contact
   section and the Spring sprig): stop sideways scrolling page-wide instead */
@supports not (overflow-x: clip) {
    body {
        overflow-x:hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    #site-nav,
    .menu-toggle span {
        transition:none !important;
    }
}