/*
    Styles for the two things the reference theme genuinely never had: the
    contact panel and long-form prose pages.

    Everything else now uses the theme's own components -- breadcrumbs, the
    city-context grid, blog cards, city lists, zip chips -- so this sheet stayed
    small on purpose. If a rule here duplicates something in style.css, the right
    fix is to use the theme's markup instead of adding a rule.
*/

/* ── Montserrat, self-hosted ─────────────────────────────── */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Static page header ──────────────────────────────────── */

/* The theme leaves 35px under this header because nothing used to follow it.
   Our breadcrumb does, and the gap read as a hole between the two bars. */
.static-page-header {
    margin-bottom: 0;
}

/* ── Contact section map ─────────────────────────────────── */

/* ──────────────────────── The hero ──────────────────────── */

/* The photograph is the band, with a palette3 gradient over it: the copy sits
   on the dark end and the picture stays visible at the other. It is an <img>
   and not a background-image because it is the largest thing on the page, and
   only an <img> can be preloaded and given fetchpriority.

   isolation, so the negative z-index on the media cannot escape the section
   and slide behind the page background. */
.hero-section.sc-hero {
    position: relative;
    padding: 104px 0;
    isolation: isolate;
    text-align: left;
    background: var(--global-palette3);
}

.sc-hero-media { position: absolute; inset: 0; z-index: -1; }
.sc-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Left to right rather than top to bottom: the copy is on the left, and the
   right of the picture is the part worth leaving alone -- which is where the
   call card goes. */
.sc-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(0, 53, 84, 0.94) 0%,
        rgba(0, 53, 84, 0.86) 42%,
        rgba(0, 53, 84, 0.35) 78%,
        rgba(0, 53, 84, 0.2) 100%
    );
}

.sc-hero-grid {
    max-width: var(--global-content-width);
    margin: 0 auto;
    padding: 0 var(--global-content-edge-padding);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 56px;
    align-items: center;
}

/* 50px, which is what the theme's own h1 is everywhere else -- .hero-section h1
   drops it to 35px, for a centred heading with nothing beside it. */
.sc-hero h1 {
    font-size: 50px;
    line-height: 1.15;
    color: var(--global-palette9);
    margin-bottom: 18px;
}

@media (max-width: 1024px) { .sc-hero h1 { font-size: 40px; } }
@media (max-width: 600px)  { .sc-hero h1 { font-size: 32px; } }

.sc-hero-copy p {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 56ch;
}

/* ──────────────────────── The hero badges ──────────────────────── */

/* Three short labels, generated with the rest of the site blocks. They are
   what the business says about how it works -- never a credential, because
   whether it holds one is a fact nothing here can know. */
.sc-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.sc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px 7px 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--global-palette9);
    font-family: var(--global-heading-font-family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.sc-hero-badge svg { display: block; color: var(--global-palette2); flex: 0 0 auto; }

/* ──────────────────────── The call card ──────────────────────── */

/* White rather than glass: a card carrying hours and an email address has to
   be read, and a translucent panel over a photograph is a background that
   moves with the picture behind it. */
.sc-hero-card {
    padding: 30px 28px;
    background: var(--global-palette9);
    border-radius: 14px;
    border-top: 4px solid var(--global-palette1);
    box-shadow: 0 30px 50px -22px rgba(0, 20, 32, 0.6);
}

.sc-hero-card-label {
    display: block;
    font-family: var(--global-heading-font-family);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--global-palette5);
    margin-bottom: 6px;
}

.sc-hero-number {
    display: block;
    font-family: var(--global-heading-font-family);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--global-palette3);
    text-decoration: none;
    margin-bottom: 18px;
}

.sc-hero-number:hover { color: var(--global-palette1); }

.sc-hero-rows {
    margin: 0 0 22px;
    padding: 18px 0 0;
    border-top: 1px solid var(--global-palette7);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 14px;
}

.sc-hero-rows dt {
    font-family: var(--global-heading-font-family);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--global-palette5);
    padding-top: 2px;
}

/* overflow-wrap, because a long email in a 274px column has nowhere to break
   -- the same thing that pushed the address out of its footer column. */
.sc-hero-rows dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--global-palette4);
    overflow-wrap: anywhere;
}

.sc-hero-rows dd a { color: inherit; text-decoration: none; font-weight: 600; }
.sc-hero-rows dd a:hover { color: var(--global-palette1); }

.sc-hero .sc-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 20px;
    border-radius: 100px;
    font-family: var(--global-heading-font-family);
    font-size: 16px;
    font-weight: 600;
}

.sc-hero-cta svg { display: block; flex: 0 0 auto; }

/* ──────────────────── The centred hero ──────────────────── */

/* Every page but the home page. The card carries hours and an email address,
   which earns a panel on the page somebody lands on first; on the other
   eighty-five there is nothing to put beside the copy, and a card repeating
   the header's number is a card nobody reads. So the copy takes the middle. */
.sc-hero-grid.sc-hero-center {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}

.sc-hero-center .sc-hero-copy { max-width: 760px; }
.sc-hero-center .sc-hero-copy p { max-width: none; margin-left: auto; margin-right: auto; }
.sc-hero-center .sc-hero-badges { justify-content: center; }

/* One large button instead of the card: the number is the thing to press, so
   it is set as the number rather than as a word. */
.sc-hero .sc-hero-call {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding: 16px 34px 16px 28px;
    border-radius: 100px;
    background: var(--global-palette-btn-bg);
    color: var(--global-palette-btn);
    text-decoration: none;
    text-align: left;
    box-shadow: 0 18px 34px -16px rgba(0, 20, 32, 0.55);
}

.sc-hero .sc-hero-call:hover { background: var(--global-palette-btn-bg-hover); color: #fff; }
.sc-hero-call svg { display: block; flex: 0 0 auto; }
.sc-hero-call-body { display: flex; flex-direction: column; gap: 1px; }

.sc-hero-call-label {
    font-family: var(--global-heading-font-family);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
}

.sc-hero-call-number {
    font-family: var(--global-heading-font-family);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .sc-hero .sc-hero-call { padding: 14px 26px 14px 22px; gap: 11px; }
    .sc-hero-call-number { font-size: 19px; }
}

@media (max-width: 1024px) {
    .sc-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
}

@media (max-width: 860px) {
    .hero-section.sc-hero { padding: 72px 0; }
    .sc-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .sc-hero-card { margin-top: 8px; }
}

@media (max-width: 600px) {
    /* A gradient that works across a wide band is no gradient at all once the
       copy covers the whole picture. */
    .sc-hero-scrim {
        background: linear-gradient(
            180deg,
            rgba(0, 53, 84, 0.88) 0%,
            rgba(0, 53, 84, 0.94) 100%
        );
    }
}

/* ────────────────────── Copy beside an image ────────────────────── */

/* Four sections share this layout, and each one now takes the shape its own
   copy is already in: about is four prose paragraphs, why-choose is five
   labelled lines, service-extra is three paragraphs, and why-choose-service is
   six sentences from site.why_choose.

   The theme's .section-common gives all four `display:flex` columns with 20px
   of padding and an #f9f9f9 background -- a grey that is not in the palette.
   The grid below replaces that, so .section-common is overridden rather than
   edited. */
.sc-split {
    padding: 80px 0;
    background: var(--global-palette8);
}

.sc-split .container {
    max-width: var(--global-content-width);
    margin: 0 auto;
    padding: 0 var(--global-content-edge-padding);
}

.sc-split h2 {
    font-family: var(--global-heading-font-family);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--global-palette3);
    margin: 0 0 18px;
}

.sc-split p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--global-palette4);
    margin: 0 0 16px;
}

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

/* One eyebrow for all of them. The four sections used to write theirs three
   different ways -- a bold paragraph, a .section-tag class, and "WHY CHOOSE
   US?" typed in capitals -- so they set at three sizes and one of them
   shouted. */
.sc-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 14px;
    border-radius: 100px;
    background: var(--global-palette7);
    color: var(--global-palette3);
    font-family: var(--global-heading-font-family);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* .section-common .button is two classes, so the pill needs the section class
   to win back the theme's own 100px radius. */
.sc-split .sc-split-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 16px 32px;
    border-radius: 100px;
    background: var(--global-palette-btn-bg);
    color: var(--global-palette-btn);
    font-family: var(--global-heading-font-family);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.sc-split .sc-split-cta:hover { background: var(--global-palette-btn-bg-hover); color: #fff; }
.sc-split-cta svg { display: block; flex: 0 0 auto; }

/* ────────────────────── about: the arch ────────────────────── */

.sc-split-arch .container {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

/* The section name set sideways on a hairline: no extra markup in the section,
   only shape. */
.sc-vlabel {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    justify-self: center;
    padding: 18px 0 18px 18px;
    border-left: 1px solid rgba(0, 53, 84, 0.18);
    font-family: var(--global-heading-font-family);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--global-palette5);
}

.sc-split-arch .sc-split-shot { position: relative; }

/* An arch. The photographs are 800x600, so the top of the frame is the part
   that can be cut without losing the subject. */
.sc-split-arch img {
    aspect-ratio: 4 / 5;
    border-radius: 220px 220px 16px 16px;
    box-shadow: 0 26px 46px -26px rgba(0, 53, 84, 0.5);
}

/* A real count, assembled from the lists themselves, so it cannot overstate
   the coverage. */
.sc-split-fact {
    position: absolute;
    right: -14px;
    bottom: 28px;
    padding: 12px 20px;
    border-radius: 100px;
    background: var(--global-palette9);
    color: var(--global-palette3);
    font-family: var(--global-heading-font-family);
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 16px 28px -16px rgba(0, 53, 84, 0.45);
}

/* ────────────────────── why-choose: sticky photograph, numbered rows ────────────────────── */

.sc-split-sticky .container {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

/* The photograph holds while five labelled rows go past it. This is the
   tallest of the four sections, and the only one with the height for it. */
.sc-split-sticky .sc-split-shot { position: sticky; top: 32px; }

.sc-split-sticky img {
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    box-shadow: 0 24px 44px -26px rgba(0, 53, 84, 0.55);
}

.sc-steps { list-style: none; margin: 6px 0 0; padding: 0; }

.sc-step {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid rgba(0, 53, 84, 0.12);
}

.sc-step:first-child { border-top: 0; padding-top: 0; }

/* Outlined rather than filled: five solid numerals this size would be the
   loudest thing in the section. */
.sc-step-num {
    font-family: var(--global-heading-font-family);
    font-size: 46px;
    font-weight: 700;
    line-height: 0.9;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--global-palette1);
}

.sc-step-body h3 {
    font-family: var(--global-heading-font-family);
    font-size: 19px;
    font-weight: 700;
    color: var(--global-palette3);
    margin: 0 0 6px;
}

.sc-step-body p { margin: 0; }

/* ────────────────────── service-extra: the offset block ────────────────────── */

.sc-split-offset .container {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.sc-split-offset .sc-split-shot { position: relative; }

/* Behind and below, so the photograph reads as placed rather than dropped in.
   The only one of the four that keeps the picture at its native 4:3. */
.sc-split-block {
    position: absolute;
    inset: 26px -20px -20px 26px;
    border-radius: 14px;
    background: var(--global-palette1);
}

.sc-split-offset img {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    box-shadow: 0 24px 44px -26px rgba(0, 53, 84, 0.55);
}

/* ────────────────────── why-choose-service: the ruled list ────────────────────── */

.sc-split-rail .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 64px;
    align-items: center;
}

.sc-split-rail img {
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    box-shadow: 0 24px 44px -26px rgba(0, 53, 84, 0.55);
}

/* Six sentences, not labelled lines, so there is no term to set above them --
   the rail and the dots are what make six of them scannable. */
.sc-rail {
    list-style: none;
    margin: 4px 0 0;
    padding-left: 26px;
    border-left: 2px solid var(--global-palette7);
}

.sc-rail-row {
    position: relative;
    padding: 14px 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--global-palette4);
}

.sc-rail-row::before {
    content: "";
    position: absolute;
    left: -33px;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--global-palette1);
    box-shadow: 0 0 0 4px var(--global-palette8);
}

/* ────────────────────── Narrow screens ────────────────────── */

@media (max-width: 1024px) {
    .sc-split h2 { font-size: 30px; }
    .sc-split-arch .container { gap: 28px; }
    .sc-split-sticky .container,
    .sc-split-offset .container,
    .sc-split-rail .container { gap: 40px; }
    .sc-step { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
    .sc-step-num { font-size: 36px; }
}

@media (max-width: 860px) {
    .sc-split { padding: 56px 0; }

    .sc-split-arch .container,
    .sc-split-sticky .container,
    .sc-split-offset .container,
    .sc-split-rail .container { grid-template-columns: minmax(0, 1fr); }

    /* Sticky needs a column taller than the viewport to stick inside, and a
       stacked section has none. */
    .sc-split-sticky .sc-split-shot { position: static; }

    /* The sideways label has no margin to live in once the grid collapses. */
    .sc-vlabel { display: none; }
    .sc-split-arch img { aspect-ratio: 1 / 1; border-radius: 160px 160px 16px 16px; }
    .sc-split-fact { right: 10px; }

    .sc-split-sticky img, .sc-split-rail img { aspect-ratio: 4 / 3; }
    .sc-split-block { inset: 16px -12px -12px 16px; }

    /* The photograph goes above the copy in all four. */
    .sc-split .sc-split-shot { order: -1; }
}

@media (max-width: 600px) {
    .sc-split h2 { font-size: 26px; }
}

/* ── The contact section ─────────────────────────────────── */

/* Four facts as tiles, then the map at the container's full width. It used to
   be a details card beside a map card, both white on grey, which wrapped the
   map in a 20px frame and a shadow it did not need.

   The gradient is a layered background on the section itself rather than a
   full-bleed pseudo-element: the section is already the full width of the
   page, so there is nothing to stretch and nothing to overflow. The band is
   232px tall, which puts its edge through the upper half of the tiles so the
   white cards straddle the colour instead of sitting on it. */
.contact-section.sc-contact {
    padding-top: 72px;
    background:
        linear-gradient(135deg, var(--global-palette3) 0%, #005b80 55%, var(--global-palette1) 100%)
            top left / 100% 232px no-repeat,
        var(--global-palette8);
}

.contact-section.sc-contact h2 {
    color: var(--global-palette9);
}

/* auto-fit, because the address tile drops out on the sixty location pages and
   on a project with no address yet: three tiles then share the row evenly
   rather than leaving a hole where the fourth was. */
.sc-contact-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.sc-contact-tile {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 28px 24px;
    background: var(--global-palette9);
    border-radius: 10px;
    box-shadow: 0 20px 34px -20px rgba(0, 53, 84, 0.5);
    min-width: 0;
}

.sc-contact-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 11px;
    border-radius: 50%;
    background: var(--global-palette1);
    color: var(--global-palette9);
    flex: 0 0 auto;
}

.sc-contact-ico svg { display: block; }

.sc-contact-label {
    font-family: var(--global-heading-font-family);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--global-palette5);
}

/* overflow-wrap, because a long email in a 220px tile has no space to break
   at -- the same thing that pushed the address out of its footer column. */
.sc-contact-value {
    font-family: var(--global-heading-font-family);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--global-palette3);
    overflow-wrap: anywhere;
}

.sc-contact-value a {
    color: inherit;
    text-decoration: none;
}

.sc-contact-value a:hover {
    color: var(--global-palette1);
    text-decoration: underline;
}

.sc-contact-map {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 15px 15px -12px rgba(0, 53, 84, 0.12);
}

.sc-contact-map iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
}

@media (max-width: 767px) {
    .contact-section.sc-contact {
        background:
            linear-gradient(135deg, var(--global-palette3) 0%, #005b80 55%, var(--global-palette1) 100%)
                top left / 100% 180px no-repeat,
            var(--global-palette8);
    }

    .sc-contact-map iframe { height: 300px; }
}

/* The theme styles .contact-card and .map-card but never gave .map-container a
   height, so the map column collapsed around the iframe instead of matching the
   card beside it. */
.contact-section .map-card {
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.contact-section .map-card iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
}

/* ── Prose and blog posts ────────────────────────────────── */

.prose-section .container,
.blog-post-section .container {
    max-width: 780px;
}

.prose-section p,
.blog-post-section p {
    margin-bottom: 20px;
    line-height: 1.8;
}

.post-meta {
    color: #7b8991;
    font-size: 15px;
    margin-bottom: 24px;
}

/* ── Why-choose bullets ──────────────────────────────────── */

/* The reference theme ships this section but never styled its list, so the
   bullets fell back to browser defaults. A tick reads better than a disc for
   a list of reasons to hire someone. */
.why-choose-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.why-choose-list li {
    position: relative;
    padding-left: 30px;
    line-height: 1.6;
}

.why-choose-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #12a8cc;
    font-weight: 700;
}

/* ── Long location lists ─────────────────────────────────── */

/* Thirty items in two columns is a very tall list on a wide screen. The theme
   stops at two, so widen it only where there is genuinely room. */
@media (min-width: 1100px) {
    .city-list.neighborhood-list,
    .city-list.nearby-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Footer ──────────────────────────────────────────────── */

/* Four columns: who the business is and how to reach it, then the pages, the
   services and the places. The last two exist so every page links to the nine
   service pages and to the areas -- which is what a footer on a local site is
   for, beyond the copyright line this one used to carry alone.

   The theme's footer is light: palette3 text on the page background, with
   palette1 as the accent. These follow it rather than inventing a dark bar. */

.sc-footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1.1fr 1fr;
    gap: 48px;
    padding: 44px 0 36px;
    border-top: 1px solid var(--global-palette7);
}

.sc-footer-col {
    min-width: 0;   /* long service names must wrap, not widen the column */
}

.sc-footer-logo {
    margin: 0 0 16px;
}

.sc-footer-logo img {
    width: 150px;
    height: auto;
}

.sc-footer-grid,
.site-footer-nap,
.nap-copyright {
    font-family: var(--global-heading-font-family);
}

.sc-footer-heading {
    margin: 0 0 14px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--global-palette5);
}

.sc-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.sc-footer-list li {
    margin-bottom: 9px;
}

.sc-footer-list a {
    color: var(--global-palette4);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.sc-footer-list a:hover,
.sc-footer-list a:focus {
    color: var(--global-palette1);
    border-bottom-color: currentColor;
}

/* ── The trust block ─────────────────────────────────────── */

/* Name, address, phone, email and hours, identically formatted on every page.
   The repetition is the point: it is what a visitor scans for and what a
   consistent local listing means. */

.site-footer-nap {
    line-height: 1.6;
    color: var(--global-palette4);
}

.site-footer-nap p {
    margin: 0 0 9px;
    display: flex;
    gap: 9px;
    align-items: baseline;
    min-width: 0;
}

.site-footer-nap p > a,
.site-footer-nap p > span:not(.nap-icon) {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* An icon per row, matching the ones the contact page already uses, so the
   eye can find the phone without reading the labels. Fixed width keeps the
   values in a column; aria-hidden because the text says what each one is. */
.site-footer-nap .nap-icon {
    flex: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.75;
}

.site-footer-nap .nap-address,
.site-footer-nap .nap-phone {
    font-size: 1rem;
}

.site-footer-nap .nap-phone a {
    font-weight: 600;
}

.site-footer-nap .nap-email {
    font-size: 0.92rem;
}

.site-footer-nap .nap-hours {
    font-size: 0.9rem;
    color: var(--global-palette5);
}

/* Underline on hover only: five underlined lines in a row read as a list of
   links rather than as an address. */
.site-footer-nap a {
    color: var(--global-palette4);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.site-footer-nap a:hover,
.site-footer-nap a:focus {
    color: var(--global-palette1);
    border-bottom-color: currentColor;
}

.nap-copyright {
    margin: 0;
    font-size: 0.9rem;
    color: var(--global-palette5);
}

/* ── Narrower screens ────────────────────────────────────── */

@media (max-width: 1024px) {
    .sc-footer-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 32px;
    }

    /* The areas column drops under the services one rather than squeezing
       four columns into a tablet. */
    .sc-footer-grid > .sc-footer-col:last-child {
        grid-column: 2 / -1;
    }
}

@media (max-width: 767px) {
    .sc-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        padding: 32px 0 24px;
    }

    .sc-footer-nap-col {
        grid-column: 1 / -1;
    }

    .sc-footer-grid > .sc-footer-col:last-child {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .sc-footer-grid {
        grid-template-columns: 1fr;
    }
}

/* The way out of a capped list. Set apart so it does not read as another
   service: six of twenty-five in the footer, and the rest a guess away. */
.sc-footer-list .sc-footer-all {
    margin-top: 13px;
}

.sc-footer-list .sc-footer-all a {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--global-palette1);
}

.sc-footer-list .sc-footer-all a::after {
    content: " \2192";
}

/* ── The header row ──────────────────────────────────────── */

/* The brand keeps the white field; the menu and the phone ride a palette3
   panel that runs off the right of the screen. Two surfaces in one row: the
   logo sits somewhere quiet, the phone somewhere loud.

   The panel supplies the gap the brand name needs -- it used to be a 56px
   column-gap here, back when both sides were on the same white field and an
   inline text lockup ran straight into the first menu item. */
.site-main-header-inner-wrap.site-header-row {
    column-gap: 0;
}

/* #main-header only renders at 1025px and up; below that the theme swaps in
   its own mobile header, so none of this needs a narrow-screen form. The
   clipping absorbs the scrollbar's width, which 100vw counts in the negative
   margin below and the container's centring gutter does not. There are no
   dropdown menus in this header to clip. */
#main-header .site-main-header-wrap {
    overflow: hidden;
}

/* The panel has to reach the edge of the glass, so the container gives up its
   right padding and the panel cancels the centring gutter. */
#main-header .site-main-header-wrap .site-container {
    padding-right: 0;
}

#main-header .site-header-main-section-right {
    align-self: stretch;
    align-items: center;
    gap: 24px;
    padding: 0 28px 0 38px;
    margin-right: calc(-1 * max(0px, (100vw - var(--global-content-width)) / 2));
    background: var(--global-palette3);
    border-radius: 60px 0 0 60px;
}

/* Palette7 on navy rather than the theme's palette3 on white. The ID raises
   specificity over the theme's own three-class selector. */
#main-header .main-navigation .primary-menu-container > ul li.menu-item > a {
    color: var(--global-palette7);
}

#main-header .main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: var(--global-palette9);
}

#main-header .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
    color: var(--global-palette9);
    box-shadow: inset 0 -3px 0 var(--global-palette1);
}

/* ── The header call block ───────────────────────────────── */

/* Not the theme's pill: that button is every CTA on every page, so a pill up
   here read as one more of them. The caption says "Call now" and not "24/7" --
   hours are per project, and one of the five is closed six days a week. */
.sc-header-call {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    text-decoration: none;
    white-space: nowrap;
}

.sc-header-call-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--global-palette1);
    color: var(--global-palette9);
    flex: 0 0 auto;
}

.sc-header-call-ico svg { display: block; }

.sc-header-call-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sc-header-call-label {
    font-family: var(--global-heading-font-family);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(219, 237, 242, 0.65);
}

.sc-header-call-number {
    font-family: var(--global-heading-font-family);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--global-palette9);
}

.sc-header-call:hover .sc-header-call-number { color: var(--global-palette2); }
.sc-header-call:hover .sc-header-call-ico { background: var(--global-palette2); color: var(--global-palette3); }

/* The brand is nowrap, so without this the left column refuses to give ground
   and pushes the nav off the row instead of letting the gap close. */
.site-main-header-inner-wrap .site-header-section-left {
    min-width: 0;
}

/* Navigation never wraps. A menu on two rows is not a menu, and with the gap
   above taking 56px the six items wanted 633px in a 595px column. The theme
   gives each link 0.85em of side padding, which is generous for six of them. */
.main-navigation .primary-menu-container > ul {
    flex-wrap: nowrap;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
    padding-left: 0.6em;
    padding-right: 0.6em;
    white-space: nowrap;
}

/* 1025px is the narrowest the desktop header is ever shown at, and at that
   width the panel's padding is what has to give. */
@media (max-width: 1200px) {
    #main-header .site-header-main-section-right {
        gap: 18px;
        padding: 0 20px 0 26px;
    }

    .sc-header-call { padding-left: 18px; }
    .sc-header-call-number { font-size: 19px; }
}

/* ── The logo lockup ─────────────────────────────────────── */

/* The mark as an image, the brand name as text beside it. It used to be one
   flat PNG with the words painted in by GD -- which is where the name went
   after the image model garbled its own lettering. In HTML it is crisp at any
   size, wraps when a long brand needs it, and cannot be mis-drawn. */

.brand.has-logo-image {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.sc-logo-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;   /* the name wraps; the mark never shrinks */
}

.sc-logo-name {
    font-family: var(--global-heading-font-family);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--global-palette3);
    text-transform: uppercase;

    /* One line. Two names in a lockup read as two things, and the second line
       pushes the mark off centre. */
    white-space: nowrap;

    /* Positive tracking, unlike the mixed-case version this replaced: upper
       case without it sets as a solid block. */
    letter-spacing: 0.03em;
}

/* The footer carries the same lockup, a size larger, with room under it
   before the address begins. */
.sc-footer-brand {
    margin-bottom: 18px;
}

.sc-footer-brand .sc-logo-mark {
    width: 52px;
    height: 52px;
}

.sc-footer-brand .sc-logo-name {
    font-size: 1rem;
}

/* The theme sets the legal links at 15px, beside a copyright line this file
   sets at 14.4px -- two sizes in one strip. */
.footer-legal-nav a,
.footer-legal-nav span {
    font-size: 0.9rem;
}

/* The one place the name may wrap: a footer column is narrow, and nowrap
   would push it under the next column instead. */
@media (max-width: 1024px) {
    .sc-footer-brand .sc-logo-name {
        white-space: normal;
        line-height: 1.25;
    }
}

@media (max-width: 1024px) {
    .sc-logo-name {
        font-size: 0.88rem;
        letter-spacing: 0.02em;
    }
}

@media (max-width: 860px) {
    .sc-logo-name {
        font-size: 0.8rem;
    }
}

/* Under 480px the mark carries the header on its own: thirty characters of
   brand name beside an icon leaves nothing for the menu button. */
@media (max-width: 480px) {
    .sc-logo-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .brand.has-logo-image {
        gap: 0;
    }

    .sc-logo-mark {
        width: 40px;
        height: 40px;
    }
}