:root {
    --ink: #303745; /* dark slate (bars, footer, dark bands) */
    --ink-2: #1E2430;
    --blue: #3A8FD4; /* primary action blue */
    --blue-d: #2F7CBE;
    --steel: #4B5568;
    --text: #4A5468;
    --head: #26303F;
    --bg: #FFFFFF;
    --bg-soft: #F7F8FA;
    --bg-tint: #F7F8FA;
    --line: #E2E8F0;
    --max: 1240px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Montserrat',system-ui,sans-serif;
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--text);
    background: var(--bg-tint);
    -webkit-font-smoothing: antialiased
}

h1, h2, h3 {
    font-family: 'Playfair Display',serif;
    font-weight: 500;
    color: var(--head);
    line-height: 1.22
}

h1 {
    font-size: clamp(2.6rem,5.4vw,4.3rem)
}

h2 {
    font-size: clamp(1.9rem,3.2vw,2.7rem)
}

h3 {
    font-size: 1.28rem;
    font-weight: 600
}

p {
    max-width: 66ch
}

a {
    color: var(--blue)
}

img {
    max-width: 100%;
    display: block
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 30px
}

section {
    padding: 98px 0
}

.eyebrow {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 16px;
}

.center {
    text-align: center
}

    .center p {
        margin-left: auto;
        margin-right: auto
    }

.btn {
    display: inline-block;
    font-family: 'Montserrat',sans-serif;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 17px 34px;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .18s ease;
}

    .btn.blue {
        background: var(--blue);
        color: #fff
    }

        .btn.blue:hover {
            background: var(--blue-d)
        }

    .btn.dark {
        background: var(--ink);
        color: #fff
    }

        .btn.dark:hover {
            background: var(--ink-2)
        }

    .btn.outline {
        background: transparent;
        color: #fff;
        border-color: rgba(255,255,255,.75)
    }

        .btn.outline:hover {
            background: rgba(255,255,255,.14)
        }

    .btn:focus-visible, a:focus-visible {
        outline: 3px solid #A9C7E8;
        outline-offset: 2px
    }

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s ease,transform .8s ease
}

    .reveal.in {
        opacity: 1;
        transform: none
    }

    .reveal.d1 {
        transition-delay: .12s
    }

    .reveal.d2 {
        transition-delay: .24s
    }

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        transition: none !important;
        animation: none !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}

/* ---- Dark micro-bar ---- */
.microbar {
    background: var(--ink);
    color: #fff;
    font-size: .78rem
}

    .microbar .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 44px;
        gap: 16px;
        flex-wrap: wrap
    }

    .microbar .badges {
        display: flex;
        gap: 24px;
        align-items: center;
        font-weight: 600;
        letter-spacing: .02em
    }

        .microbar .badges a {
            color: #fff;
            text-decoration: none;
            opacity: .92
        }

            .microbar .badges a:hover {
                opacity: 1;
                text-decoration: underline
            }

    .microbar .right a {
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        font-size: .74rem;
        margin-left: 26px
    }

        .microbar .right a:hover {
            text-decoration: underline
        }

/* ---- Header ---- */
/* FIX: a little more room in the header so the full-size logo and a one-line menu fit on desktop */
header.site .wrap, .microbar .wrap {
    max-width: 1320px
}

header.site {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 var(--line)
}

header.site {
    transition: box-shadow .25s ease
}

    header.site .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 26px;
        min-height: 128px
    }

.brand {
    display: flex;
    align-items: center;
    margin-right: auto;
    flex: 0 0 auto /* FIX: the logo must not be squeezed by the menu */
}

    .brand img {
        height: 110px;
        width: auto;
        max-width: none; /* FIX: the global img{max-width:100%} let the logo be squashed when the header shrinks */
        aspect-ratio: 748 / 269;
        object-fit: contain
    }

/* FIX (Glen, Oct 31): the header no longer shrinks on scroll. The shrinking header was the source of every
   complaint about the logo (squashed, flickering, "shaking", changing size): it animated the logo, the Contact button and
   the menu every time the page crossed the scroll threshold, and it also triggered a scroll-anchoring loop. The header now
   keeps one size at all times; scrolling only adds a soft shadow under it. */
header.site {
    overflow-anchor: none
}

header.site.compact {
    box-shadow: 0 10px 30px -18px rgba(38,48,63,.35)
}


@media(max-width:1120px) {
    .brand img {
        height: 100px /* was 74px: with only Contact and Menu beside it there is room for a full-size logo */
    }
}

nav.main {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap; /* FIX: the menu wraps on narrower desktops instead of crushing the logo */
    justify-content: center
}

    nav.main > a, .dd > button {
        font-family: 'Montserrat',sans-serif;
        font-weight: 600;
        font-size: .8rem;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--head);
        text-decoration: none;
        background: none;
        border: 0;
        cursor: pointer;
        padding: 14px 9px;
    }

        nav.main > a:hover, .dd > button:hover {
            color: var(--blue)
        }

.dd {
    position: relative
}

    .dd > button::after {
        content: " ⌄";
        font-size: .9em
    }

    .dd .panel {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        border-top: 2px solid var(--blue);
        box-shadow: 0 22px 50px -18px rgba(38,48,63,.3);
        padding: 34px;
        z-index: 110;
        width: max-content;
        text-align: left;
    }

    .dd.open .panel {
        display: block
    }

.panel.megapanel {
    width: min(920px,94vw);
    display: none;
    grid-template-columns: 2.1fr 1fr;
    gap: 44px
}

.dd.open .panel.megapanel {
    display: grid
}

.panel .plabel {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 600;
    margin-bottom: 6px
}

.panel h4 {
    font-family: 'Playfair Display',serif;
    font-weight: 600;
    color: var(--head);
    font-size: 1.3rem;
    margin-bottom: 20px
}

.megabrands {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px 30px
}

    .megabrands a {
        text-decoration: none;
        text-align: center;
        color: var(--head);
        font-size: .85rem;
        font-weight: 500
    }

        .megabrands a:hover {
            color: var(--blue)
        }

    .megabrands .logo {
        height: 44px;
        display: grid;
        place-items: center;
        margin-bottom: 8px;
        background: #F0F3F7;
        border-radius: 4px;
        padding: 6px 10px
    }

    .megabrands img {
        max-height: 30px;
        max-width: 96px;
        object-fit: contain
    }

.appllist {
    display: grid;
    gap: 2px
}

    .appllist a {
        color: var(--blue);
        text-decoration: none;
        font-size: .92rem;
        padding: 6px 0;
        border-bottom: 1px solid var(--line)
    }

        .appllist a:hover {
            text-decoration: underline
        }

.panel .viewall {
    margin-top: 22px;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .06em
}

.simplemenu {
    display: grid;
    gap: 2px;
    min-width: 230px
}

    .simplemenu a {
        color: var(--text);
        text-decoration: none;
        padding: 9px 4px;
        font-size: .95rem
    }

        .simplemenu a:hover {
            color: var(--blue)
        }

.hdr-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto
}

.hdr-phones {
    text-align: right;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--head);
    line-height: 1.7
}

    .hdr-phones a {
        color: var(--head);
        text-decoration: none
    }

        .hdr-phones a:hover {
            color: var(--blue)
        }

.navtoggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 10px 14px;
    color: var(--head);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .78rem
}

@media(max-width:1120px) {
    nav.main, .hdr-phones {
        display: none
    }

    .navtoggle {
        display: block
    }
}

/* FIX: on phones the full-size logo, the Contact button and the Menu button do not fit side by side;
   the staging build hid this by squashing the logo. Contact is still in the menu. */
@media(max-width:640px) {
    .brand img {
        height: 64px
    }

    header.site .wrap {
        gap: 14px
    }

    .hdr-right .btn {
        display: none
    }
}

.mobilenav {
    display: none;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 14px 30px 26px
}

    .mobilenav.open {
        display: block
    }

    .mobilenav a {
        display: block;
        padding: 12px 0;
        color: var(--head);
        text-decoration: none;
        font-weight: 600;
        font-size: .85rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--bg-soft)
    }

/* ---- Hero (video style) ---- */
.hero {
    position: relative;
    min-height: 92svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    padding: 120px 0
}

    .hero .media {
        position: absolute;
        inset: 0
    }

    .hero .slide {
        position: absolute;
        inset: -6%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 3s ease;
        will-change: transform,opacity
    }

        .hero .slide.active {
            opacity: 1
        }
        /* Per-slide camera moves — push-in, aerial drift, pull-back — so stills read as footage */
        .hero .slide.cam-push.active {
            animation: camPush 16s ease-in-out forwards
        }

        .hero .slide.cam-drift.active {
            animation: camDrift 16s ease-in-out forwards
        }

        .hero .slide.cam-pull.active {
            animation: camPull 16s ease-in-out forwards
        }

@keyframes camPush {
    from {
        transform: scale(1.02)
    }

    to {
        transform: scale(1.16)
    }
}

@keyframes camDrift {
    from {
        transform: scale(1.12) translateX(2.5%)
    }

    to {
        transform: scale(1.12) translateX(-2.5%)
    }
}

@keyframes camPull {
    from {
        transform: scale(1.18)
    }

    to {
        transform: scale(1.04)
    }
}

.hero .scrim {
    position: absolute;
    inset: 0;
    background: rgba(30,38,52,.44)
}

.hero .wrap {
    position: relative;
    z-index: 2;
    max-width: 960px
}

.hero .heyebrow {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 22px;
    text-shadow: 0 1px 10px rgba(0,0,0,.4)
}

.hero h1 {
    color: #fff;
    text-shadow: 0 2px 26px rgba(0,0,0,.45);
    margin: 0 auto;
    max-width: 18ch
}

.hero p.lede {
    color: #F1F4F8;
    font-size: 1.12rem;
    margin: 30px auto 38px;
    max-width: 58ch;
    text-shadow: 0 1px 12px rgba(0,0,0,.4)
}

.hero .ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap
}

.motionbtn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(20,28,44,.72);
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 4px;
    padding: 9px 14px;
    font-family: 'Montserrat',sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer
}

    .motionbtn:hover {
        background: rgba(20,28,44,.9)
    }

/* ---- Review pills ---- */
.pills {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 26px 0
}

    .pills .wrap {
        display: flex;
        gap: 18px;
        justify-content: center;
        flex-wrap: wrap
    }

.pill {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-size: .92rem;
    background: linear-gradient(90deg,#306FAB,#387FBA);
    border-radius: 50px;
    padding: 13px 26px;
    box-shadow: 0 12px 26px -14px rgba(46,92,151,.6);
}

    .pill:hover {
        filter: brightness(1.06)
    }

    .pill .star {
        color: #F4C242
    }

    .pill b {
        font-weight: 700
    }

    .pill span.div {
        opacity: .55
    }

/* ---- Intro ---- */
.intro p.big {
    font-size: 1.05rem;
    margin-top: 22px
}

/* ---- Brand row ---- */
.brandsec {
    padding: 98px 0;
    text-align: center
}

.brandrow {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 48px 0 44px
}

    .brandrow a {
        background: #F0F3F7;
        border: 1px solid var(--line);
        border-radius: 4px;
        display: grid;
        place-items: center;
        width: 150px;
        height: 88px;
        padding: 14px 18px;
        transition: all .2s ease;
    }

        .brandrow a:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 34px -18px rgba(38,48,63,.35);
            background: #fff
        }

    .brandrow img {
        max-height: 44px;
        max-width: 112px;
        object-fit: contain
    }

/* ---- Schedule (blurred bg + white card form) ---- */
.schedule {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(160deg,#F4F7FA 0%,#E9EEF5 55%,#E2E9F2 100%);
}

    .schedule .lead {
        max-width: 720px;
        margin: 0 auto 54px;
        text-align: center
    }

        .schedule .lead p {
            margin: 18px auto 0
        }

.card {
    background: #fff;
    border-top: 3px solid var(--blue);
    border-radius: 4px;
    max-width: 840px;
    margin: 0 auto;
    box-shadow: 0 30px 70px -28px rgba(38,48,63,.35);
    padding: 56px;
}

    .card .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 26px
    }

    .card label {
        display: block;
        font-size: .9rem;
        font-weight: 700;
        color: var(--head);
        margin: 22px 0 8px
    }

    .card input, .card select, .card textarea {
        width: 100%;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 3px;
        font-size: .98rem;
        font-family: inherit;
        background: #fff;
        color: var(--text);
    }

        .card input:focus-visible, .card select:focus-visible, .card textarea:focus-visible {
            outline: 3px solid #A9C7E8
        }

    .card .btn {
        width: 100%;
        margin-top: 34px;
        padding: 19px
    }

    .card .fine {
        font-size: .8rem;
        margin-top: 14px;
        color: var(--steel)
    }

@media(max-width:720px) {
    .card {
        padding: 34px
    }

        .card .row {
            grid-template-columns: 1fr
        }
}

/* ---- Story + numbers ---- */
.story .wrap {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 70px;
    align-items: start
}

.story p {
    margin-top: 18px
}

.numbers {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px -26px rgba(38,48,63,.25);
    border-radius: 4px;
    padding: 44px 46px
}

    .numbers .nlabel {
        font-size: .74rem;
        font-weight: 600;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--steel);
        margin-bottom: 26px
    }

    .numbers .n {
        padding: 20px 0;
        border-top: 1px solid var(--line)
    }

        .numbers .n:first-of-type {
            border-top: 0;
            padding-top: 0
        }

    .numbers .big {
        font-family: 'Playfair Display',serif;
        font-weight: 600;
        color: var(--blue);
        font-size: 2.5rem;
        line-height: 1.1
    }

    .numbers .cap {
        font-size: .95rem;
        margin-top: 4px
    }

@media(max-width:980px) {
    .story .wrap {
        grid-template-columns: 1fr
    }
}

/* ---- Three cards ---- */
.cards3 {
    background: #fff
}

    .cards3 .grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 26px;
        margin-top: 52px
    }

.qcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 40px 36px;
    box-shadow: 0 14px 34px -24px rgba(38,48,63,.25)
}

    .qcard .ic {
        width: 52px;
        height: 52px;
        border-radius: 8px;
        background: #E4EFFA;
        display: grid;
        place-items: center;
        margin-bottom: 24px
    }

    .qcard h3 {
        margin-bottom: 12px
    }

    .qcard p {
        font-size: .96rem
    }

@media(max-width:980px) {
    .cards3 .grid {
        grid-template-columns: 1fr
    }
}

/* ---- Dark Where We Serve ---- */
.serve {
    background: var(--ink);
    color: #D9DEE7;
    text-align: center
}

    .serve h2 {
        color: #fff
    }

    .serve .eyebrow {
        color: #7FB4E8
    }

    .serve p.sub {
        margin: 16px auto 52px;
        color: #C4CBD8
    }

    .serve .cardsrow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 26px;
        max-width: 940px;
        margin: 0 auto;
        text-align: left
    }

.scard {
    background: #3A4356;
    border-radius: 4px;
    padding: 40px 42px
}

    .scard::before {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        background: var(--blue);
        margin-bottom: 22px
    }

    .scard h3 {
        color: #fff;
        font-size: 1.5rem;
        margin-bottom: 14px
    }

    .scard p {
        color: #C4CBD8;
        font-size: .97rem
    }

    .scard a {
        color: #7FB4E8;
        text-decoration: none;
        font-weight: 600
    }

        .scard a:hover {
            text-decoration: underline
        }

@media(max-width:820px) {
    .serve .cardsrow {
        grid-template-columns: 1fr
    }
}

/* ---- Careers band ---- */
.careers {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line)
}

    .careers .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        flex-wrap: wrap
    }

    .careers p {
        margin-top: 14px;
        max-width: 52ch
    }

/* ---- CTA dark band ---- */
.ctaband {
    background: var(--ink-2);
    color: #fff;
    padding: 78px 0
}

    .ctaband .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        flex-wrap: wrap
    }

    .ctaband h2 {
        color: #fff
    }

    .ctaband .eyebrow {
        color: #7FB4E8
    }

    .ctaband p {
        color: #C4CBD8;
        margin-top: 12px;
        max-width: 52ch
    }

/* ---- Footer ---- */
footer {
    background: #1E2430;
    color: #C4CBD8;
    padding: 70px 0 34px;
    font-size: .93rem
}

    footer .cols {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 50px
    }

    footer .flogo {
        height: 114px; /* was 88px: +30% (Glen, Oct 31, v24) */
        width: auto;
        max-width: none;
        aspect-ratio: 748 / 269;
        object-fit: contain;
        margin-bottom: 20px
    }

    footer h3 {
        font-family: 'Playfair Display',serif;
        color: #fff;
        font-size: 1.15rem;
        font-weight: 600;
        margin-bottom: 18px
    }

    footer ul {
        list-style: none
    }

    footer li {
        padding: 5px 0
    }

    footer a {
        color: #C4CBD8;
        text-decoration: none
    }

        footer a:hover {
            color: #fff;
            text-decoration: underline
        }

    footer .tel {
        color: #7FB4E8 !important;
        font-weight: 600
    }

    footer .legal {
        border-top: 1px solid rgba(255,255,255,.12);
        margin-top: 52px;
        padding-top: 24px;
        display: flex;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
        font-size: .82rem
    }

@media(max-width:980px) {
    footer .cols {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:560px) {
    footer .cols {
        grid-template-columns: 1fr
    }
}

/* ---- Chat pill ---- */
.chatfab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 120
}

    .chatfab button {
        background: var(--ink);
        color: #fff;
        border: 0;
        border-radius: 6px;
        padding: 16px 24px;
        cursor: pointer;
        font-family: 'Montserrat',sans-serif;
        font-weight: 600;
        font-size: .8rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 18px 38px -14px rgba(0,0,0,.5);
    }

        .chatfab button:hover {
            background: var(--ink-2)
        }

.chatpanel {
    display: none;
    position: fixed;
    right: 22px;
    bottom: 88px;
    z-index: 120;
    width: min(340px,90vw);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.4);
    overflow: hidden
}

    .chatpanel.open {
        display: block
    }

    .chatpanel .head {
        background: var(--ink);
        color: #fff;
        padding: 16px 18px;
        font-weight: 600;
        font-size: .9rem
    }

    .chatpanel .bod {
        padding: 18px
    }

        .chatpanel .bod p {
            font-size: .9rem;
            margin-bottom: 14px
        }

    .chatpanel .quick a {
        display: block;
        border: 1px solid var(--line);
        border-radius: 5px;
        padding: 10px 14px;
        margin-bottom: 8px;
        text-decoration: none;
        color: var(--head);
        font-size: .9rem;
        font-weight: 600
    }

        .chatpanel .quick a:hover {
            background: var(--bg-soft);
            color: var(--blue)
        }

/* Footer: the text under the logo is centred on the logo (the column is held to the logo width, 114px x 748/269 = 317px) (Glen, Oct 31, v25) */
footer .cols > div:first-child {
    max-width: 317px;
    text-align: center
}

/* FIX: the contact form honeypot field (.hp) had no style on staging, so "Leave this field empty" was visible to customers */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

/* Live Google My Maps embed (Service Area and Contact pages) */
.mapembed {
    display: block;
    width: 100%;
    height: 480px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #e9eef5
}

.mapwrap.small .mapembed {
    height: 320px
}

@media(max-width:640px) {
    .mapembed, .mapwrap.small .mapembed {
        height: 360px
    }
}

/* Brand boxes (Brands page and home page): one size for logo boxes and name boxes. Logos keep their own proportions
   and colours inside the box (object-fit: contain; the padding is the clear space). Dark boxes carry white artwork;
   the Miele box is Miele red and its wordmark is enlarged (see .bbox.miele). Both grids are capped at 1010px and
   centred, so a row holds six boxes and a short last row centres under the row above. */
.brandgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 1136px; /* 7 x 152px + 6 x 12px: the seven logo tiles on one row at 1280 */
    margin: 36px auto
}

.bcell {
    width: 152px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.bcell .bbox {
    width: 100%
}

.bcap {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    color: var(--steel);
    text-align: center
}

.bbox {
    width: 152px; /* 7 x 152px + 6 x 12px gap = 1136px: seven tiles per row inside the 1136px grid */
    height: 96px;
    box-sizing: border-box;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    place-items: center
}

.bbox.name {
    background: #f4f6f8;
    border-color: #d0d6dd
}

.bbox.pad {
    padding: 26px 30px /* Elica: a wide wordmark, kept well inside the tile */
}

.bbox.dark {
    background: var(--ink);
    border-color: var(--ink)
}

.bbox.miele {
    background: #8C0014; /* the red field of the Miele logo itself, so the red fills the whole box */
    border-color: #8C0014;
    padding: 0;
    overflow: hidden;
    display: flex; /* flex centres the oversized SVG symmetrically; grid placement pushed it to the left edge */
    align-items: center;
    justify-content: center
}

.bbox img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain /* every logo fills the same inner area, keeping its own proportions (the small Miele SVG scales up losslessly) */
}

/* Miele: the wordmark is 75% of the SVG's width, so the SVG is shown at 154px to make the wordmark about 116px wide,
   the width of the Scotsman logo in its box. The artwork is unchanged; the red field overflowing the box is hidden
   and is the same red as the box. */
.bbox.miele img {
    width: 154px;
    height: auto;
    max-width: none
}

.bbox span {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--head);
    text-align: center
}

@media(max-width:640px) {
    .brandgrid {
        gap: 12px
    }

    .bbox, .bcell {
        width: calc(50% - 6px)
    }

    .bbox {
        height: 84px;
        padding: 14px 16px
    }

    .bbox.pad {
        padding: 22px 26px
    }
}

.megabrands .logo.dark {
    background: var(--ink)
}

.megabrands .logo.pad {
    padding: 8px 22px
}

/* Brands page sections (v23): logos on white; 'Also Serviced' on #f7f8fa with a thin top border, a smaller H2 and a subline */
.brandsec.logos {
    background: #fff
}

.brandsec.also {
    background: #f7f8fa;
    border-top: 1px solid var(--line)
}

.brandsec.also h2 {
    font-size: clamp(1.52rem, 2.56vw, 2.16rem) /* 80% of the h2 size */
}

.brandsec.also .subline {
    font-size: 14px;
    color: var(--steel);
    text-align: center;
    margin: 10px auto 0
}

.megabrands .logo.miele {
    background: #8C0014;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.megabrands .logo.miele img {
    width: 128px; /* wordmark about 96px wide, the width of the Scotsman logo in its tile */
    height: auto;
    max-width: none;
    max-height: none
}

/* Mobile menu (<= 980px): a full-width panel under the sticky header, not a flex item in the header row (v21). */
.mobilenav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 105;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    box-shadow: 0 22px 50px -18px rgba(38,48,63,.3)
}

.mnav-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bg-soft);
    padding: 12px 0;
    font-family: inherit;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--head);
    cursor: pointer
}

.mnav-toggle::after {
    content: " ⌄";
    font-size: .9em
}

.mnav-panel {
    display: none;
    padding: 12px 0 4px;
    border-bottom: 1px solid var(--bg-soft)
}

.mnav-panel.open {
    display: block
}

.mnav-panel .megabrands {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* columns may shrink below the image width; the tiles clip */
    gap: 14px 10px
}

.mnav-panel .megabrands .logo {
    padding: 6px 8px;
    overflow: hidden
}

.mnav-panel .megabrands img {
    max-width: 100%
}

.mnav-panel .megabrands .logo.miele img {
    width: 118px;
    max-width: none
}

.mnav-panel .megabrands a {
    display: block;
    padding: 0;
    border: 0;
    font-size: .72rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500
}

.mnav-panel .mnav-all {
    display: block;
    padding: 14px 0 10px;
    border-bottom: 0;
    color: var(--blue);
    font-size: .8rem
}

.megabrands img {
    width: auto;
    height: auto
}

/* Mega menu panel: anchored to the left edge of the menu row (nav.main) instead of centred under the Services item,
   so it no longer runs left over the header logo (Monica, Oct 31, v20). Width capped so it stays inside the viewport. */
nav.main {
    position: relative
}

.dd:has(.megapanel) {
    position: static
}

.dd .panel.megapanel {
    left: 0;
    right: auto;
    transform: none;
    width: min(920px, calc(100vw - 420px))
}

/* Review-only notes: strip every element with this class before launch */
.reviewnote {
    font-style: italic;
    color: var(--steel)
}

.megabrands .bname {
    display: grid;
    place-items: center;
    height: 44px;
    background: #F0F3F7;
    border-radius: 4px;
    padding: 6px 10px;
    font-family: 'Playfair Display', serif;
    font-size: .9rem;
    line-height: 1.15;
    text-align: center;
    color: #26303F
}

.microbar .right {
    margin-left: auto
}