.container.top h1, .container.top h3 {
    color: white;
    position: absolute;
    text-align: center;
}

.container.top h1 {
    top: 18%;
    letter-spacing: 1px;
}

.container.top h3 {
    top: 30%;
}

.container.top form.toolbar.availability.lite {
    position: absolute;
    text-align: center;
    top: 38%;
    left: 50%;
    transform: translateX(-50%);
}

.container.text-boxes.iconic,
.container.text-boxes.services {
    height: 30vh;
}

.container.text-boxes.iconic .text-box,
.container.text-boxes.services .text-box {
    top: 10%;
    padding: 0;
}

.container.text-boxes.iconic .text-box h2,
.container.text-boxes.services .text-box h2 {
    /* Same hex as the icon above it (var(--secondary-color), #9f6f00) - font-weight: 200 was
       thin enough that the identical color read as pale/washed-out next to the icon's bold 2px
       stroke (2026-09-11, per Thomas: "change the titles... to fit with the changed colour").
       500 gives it equal visual saturation/presence without going heavy. */
    font-weight: 500;
    font-size: 1.5em;
    margin: 15px 0 0 0;
}

.container.text-boxes.iconic .text-box-content,
.container.text-boxes.services .text-box-content {
    line-height: 1.6;
    margin: 0;
}

.container.text-boxes.memorable,
.container.text-boxes.not-all {
    height: fit-content;
}

.container.text-boxes.memorable .text-box.wide h3,
.container.text-boxes.not-all .text-box.wide h3 {
    color: var(--primary-color);
    /* Same pale-at-large-size issue the icon titles had (2026-09-11) - 200 read washed out at
       2em. 400 (vs. the icon titles' 500) keeps more of this section's softer, pull-quote feel
       while still giving the blue real presence. */
    font-weight: 400;
    font-size: 2.0em;
    margin: 0;

}
.container.text-boxes.memorable .text-box.wide,
.container.text-boxes.not-all .text-box.wide {
    width: 100%;
    padding: 0 20px;
}

.container.text-boxes.memorable .text-box.wide p {
    line-height: 1.7;
}

/* Reviews (2026-09-11, per Thomas) - real, verified Google reviews from the business's own
   Google Business Profile (https://share.google/XqNo5hNeTk9uLXnMk), pasted in and trimmed for
   length where noted, never invented - see the "See all reviews on Google" link at the bottom,
   which lets a visitor verify these against the live listing directly.

   Block-level override of .container's own flex/100vh base (same reasoning as
   .container.mosaic.simple above) - a heading followed by a card grid doesn't fit that shape.
   The card grid itself uses the same repeat(auto-fit, minmax(...)) technique as
   .container.mosaic.simple's tiles, for the same reason: 5 reviews is again not a clean multiple
   of any fixed column count, and auto-fit tiles them evenly at whatever count exists (3, 5, or a
   future 4/6) without ever needing a redesign. */
.container.reviews {
    display: block;
    height: auto;
    box-sizing: border-box;
    /* No top padding - every .container already carries a 60px bottom margin (see
       --primary-margin-bottom) as the standard inter-section gap; adding 40px here on top of
       that gave this one section a 100px gap instead of the usual 60px (2026-09-11, per Thomas -
       spotted it looked bigger than the gap above it). Horizontal padding stays, for the heading/
       cards' own breathing room at narrow viewports where .container.center's max-width isn't
       actually constraining anything. */
    padding: 0 20px;
}

.container.reviews h2 {
    margin-bottom: 30px;
}

/* auto-fit alone reproduces the exact problem it solved for the location tiles: 5 reviews at
   min 260px only fits 4 per row inside this section's 1200px max-width (.container.center), so
   the 5th sat alone on its own row - the same stranded-tile look, just with an extra step
   (2026-09-11, confirmed via screenshot at 1400px viewport before adding the fixed-5 rule below).
   auto-fit still drives the default (narrow-viewport) case, where wrapping to fewer per row as
   the viewport shrinks is normal reflow, not a leftover - only above 1240px (where the 1200px
   container has room for 5 real columns without cramming them under ~220px each) does a fixed
   5-column row take over, matching the exact review count today. */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

@media (min-width: 1240px) {
    .reviews-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.review-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--primary-box-shadow);
    padding: 24px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.review-stars {
    color: var(--secondary-color);
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.review-quote {
    color: #555;
    line-height: 1.6;
    flex-grow: 1;
    margin: 0 0 16px 0;
}

.review-quote::before {
    content: "\201C";
}

.review-quote::after {
    content: "\201D";
}

.review-author {
    font-family: var(--secondary-font);
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}

.review-source {
    font-weight: 400;
    color: #888;
}

.reviews-see-all {
    display: inline-block;
    margin: 30px 0 10px;
    color: var(--primary-color);
    font-family: var(--secondary-font);
    text-decoration: none;
}

.reviews-see-all:hover {
    text-decoration: underline;
}

/* =========================
   RESPONSIVE (2026-10-03, per Thomas)
   Everything above is sized for a wide screen: fixed-height sections (30vh/50vh) holding
   three or five columns. On a narrow screen the text outgrew those heights and ran over the
   section below, and the hero's absolutely-placed heading ran under the search card.
   ========================= */

/* The location tiles' 320px minimum is wider than the smallest phones. */
.container.mosaic.simple {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

@media (max-width: 1000px) {
    /* Three columns still fit here, but not inside 30vh. */
    .container.text-boxes.iconic,
    .container.text-boxes.services {
        height: auto;
    }
}

@media (max-width: 768px) {
    /* Hero: heading, strapline and search card stacked in normal flow, so a strapline that
       wraps pushes the card down instead of sliding under it. */
    .container.top {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 0 16px;
    }

    .container.top h1,
    .container.top h3 {
        position: static;
        text-shadow: 0 1px 12px rgba(0, 40, 80, 0.45);
    }

    .container.top h1 {
        font-size: clamp(2.1rem, 9.5vw, 3.2rem);
        line-height: 1.15;
        margin: 0 0 12px 0;
    }

    .container.top h3 {
        font-size: 1.05rem;
        line-height: 1.45;
        max-width: 22em;
        margin: 0 0 28px 0;
    }

    /* Icon rows: one per line. */
    .container.text-boxes.iconic,
    .container.text-boxes.services {
        row-gap: 44px;
        box-sizing: border-box;
        padding: 0 24px;
    }

    .container.text-boxes.iconic .text-box,
    .container.text-boxes.services .text-box {
        width: 100%;
    }

    .container.text-boxes.iconic .text-box-content,
    .container.text-boxes.services .text-box-content {
        max-width: 30em;
        padding: 12px 0 0 0;
    }

    .container.text-boxes .text-box-icon {
        width: 72px;
        height: 72px;
    }

    /* Picture mosaic: the tall tile on top, the other four in a 2 x 2 grid under it. */
    .container.mosaic.ornate {
        height: auto;
    }

    .container.mosaic.ornate .left,
    .container.mosaic.ornate .right {
        width: 100%;
        height: auto;
    }

    .container.mosaic.ornate .left .tile {
        height: 38vh;
    }

    .container.mosaic.ornate .right .tile {
        height: 24vh;
    }

    .container.mosaic.ornate .tile {
        border-width: 4px;
    }

    .container.mosaic.ornate .tile h2 {
        font-size: 1.35em;
        line-height: 1.2;
        margin: 0;
        padding: 0 8px;
    }

    .container.mosaic.simple .tile {
        height: 34vh;
    }

    .container.text-boxes.memorable .text-box.wide,
    .container.text-boxes.not-all .text-box.wide {
        box-sizing: border-box;
        padding: 0 24px;
    }

    .container.text-boxes.memorable .text-box.wide h3,
    .container.text-boxes.not-all .text-box.wide h3 {
        font-size: 1.6em;
        line-height: 1.25;
    }

    .container.text-boxes.not-all {
        row-gap: 44px;
    }
}