/* =========================================================
   Site refinements, loaded on every page after home-mayank.css (by navbar-mayank.php and navbar-quote-mayank.php),
   so a selector here beats the same selector there. Colour tokens live in theme-terracotta.css.
   ========================================================= */

/* ---------- Hero: the film is the subject ----------
   Desktop photo (hero-film.jpg): dark film half applied to a window. Its edge runs top to bottom at about 48% of the
   width, with an orange squeegee and gloved hands on it a little below the middle; clear, glare-filled glass on the right.
   The copy and the form are pushed apart so the film edge and the squeegee sit in the open strip between them.
   Phones and tablets: a full-screen banner (the form is a popup there). Upright screens get the portrait photo
   (hero-film-portrait.jpg: squeegee about 12 to 33% down, gloves to about 40%, plain tinted and clear glass below).
   The photo is exactly one screen tall, so the squeegee stays in the same place on every phone, and the copy sits over
   its lower part on a dark fade. If the copy needs more room (small phones), the banner grows on plain dark. */

/* the form is narrower now: wrap its intro line evenly instead of leaving one word on the second line */
.mh-hero .form-card__head p { text-wrap: balance; }

.mh-hero__bg picture { display: block; width: 100%; height: 100%; }

@media (max-width: 1023.98px) {
    .mh-hero { --hero-screen: calc(100svh - var(--nav-h)); }

    .mh-hero__bg { bottom: auto; height: var(--hero-screen); }

    .mh-hero__bg img { object-position: 50% 0; }

    .mh-hero__bg::after {
        background: linear-gradient(180deg,
            rgb(var(--mh-dark-rgb) / .3) 0%,
            rgb(var(--mh-dark-rgb) / 0) 12%,
            rgb(var(--mh-dark-rgb) / 0) 38%,
            rgb(var(--mh-dark-rgb) / .62) 52%,
            rgb(var(--mh-dark-rgb) / .86) 70%,
            rgb(var(--mh-dark-rgb) / 1) 100%);
    }

    /* fill the screen below the sticky header; the copy sits at the bottom */
    .mh-hero__inner {
        min-height: calc(100vh - var(--nav-h));
        min-height: var(--hero-screen);
        align-content: end;
    }

    /* the headline is a full keyword sentence, so it is set a little smaller to keep the copy below the squeegee */
    .mh-hero h1 { font-size: clamp(2rem, 6.4vw, 3rem); }
}

/* landscape phones and tablets get the wide photo: keep the squeegee in view */
@media (max-width: 1023.98px) and (orientation: landscape) {
    .mh-hero__bg img { object-position: 50% 55%; }
}

/* tablets also show the top bar above the header */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .mh-hero { --hero-screen: calc(100svh - var(--nav-h) - 38px); }
}

/* narrow phones: a one-line eyebrow and a slightly smaller intro, so the copy stays below the squeegee */
@media (max-width: 479px) {
    .mh-hero .mh-eyebrow { font-size: .7rem; letter-spacing: .1em; }
    .mh-hero .mh-eyebrow::before { display: none; }
    .mh-hero h1 { margin-bottom: 1rem; }
    .mh-hero__lead { margin-bottom: 1.5rem; font-size: 1.02rem; }
}

@media (min-width: 1024px) {
    .mh-hero__inner {
        grid-template-columns: minmax(0, min(33rem, 44%)) minmax(0, min(29.5rem, 41%));
        justify-content: space-between;
    }

    .mh-hero__bg img { object-position: 50% 58%; }

    .mh-hero__bg::after {
        background: linear-gradient(90deg,
            rgb(var(--mh-dark-rgb) / .8) 0%,
            rgb(var(--mh-dark-rgb) / .64) 30%,
            rgb(var(--mh-dark-rgb) / .12) 44%,
            rgb(var(--mh-dark-rgb) / .1) 62%,
            rgb(var(--mh-dark-rgb) / .4) 100%);
    }
}

/* ---------- Why film band: film-edge close-up; the dark tinted side sits behind the heading, the edge and squeegee stay in view ---------- */
.mh-why__band img { object-position: 60% 80%; }

/* ---------- Reviews ----------
   Phones: the reviewer pill row scrolls sideways; minmax(0, ...) stops its full width from stretching the column.
   Desktop: the reviewer list shows about four at a time and scrolls inside its column, with faded edges while there
   is more to scroll (site.js sets --fade-top / --fade-bottom and keeps the active reviewer in view).
   A counter beside the arrows shows which review is open, for any number of reviews. */
.mh-spot { grid-template-columns: minmax(0, 1fr); }

.mh-spot__count {
    flex: none;
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.mh-spot__count strong { color: var(--ink); }

@media (min-width: 1024px) {
    .mh-spot { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

    .mh-spot__tabs {
        max-height: 21rem;
        margin-left: -.5rem;
        padding: .5rem 1.25rem .5rem .5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgb(var(--ink-rgb) / .2) transparent;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade-bottom, 0px)), transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade-bottom, 0px)), transparent 100%);
    }
}

/* ---------- Process ---------- */
/* the sideways step row must not widen the grid column (it pushed the section past the screen edge) */
.mh-process__grid > * { min-width: 0; }

/* Phones: steps side by side in a swipeable row. site.js adds .is-enhanced (shows the step counter and the
   progress bar) and, unless reduced motion is on, .is-pinned: the block becomes as tall as one screen plus a stretch
   of scrolling per step, and its stage (title, counter, row, progress) sticks under the header for that stretch.
   site.js moves the row on one step at a time as the page scrolls through it; after the last step the stage scrolls
   away with the section. Tablet and desktop keep the vertical timeline. */
.mh-steps__title,
.mh-steps__meta,
.mh-steps__progress { display: none; }

@media (max-width: 767px) {
    .mh-process .mh-timeline {
        display: flex;
        gap: 1rem;
        margin-inline: calc(var(--gutter) * -1);
        padding: .25rem var(--gutter) .75rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    .mh-process .mh-timeline:focus-visible { outline: 2px solid var(--mh-sky); outline-offset: -2px; border-radius: 18px; }

    .mh-process .mh-timeline::-webkit-scrollbar { display: none; }
    .mh-process .mh-timeline::before { display: none; } /* the vertical line */

    .mh-process .mh-timeline__item {
        flex: 0 0 82%;
        flex-direction: column;
        gap: 1rem;
        padding-bottom: 0;
        scroll-snap-align: start;
    }

    /* line from each step number to the next one */
    .mh-process .mh-timeline__item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 23px;
        left: 60px;
        right: -1rem;
        height: 2px;
        background: linear-gradient(90deg, var(--mh-sky), rgb(var(--mh-sky-rgb) / .15));
    }

    .mh-process .mh-timeline__item > div { min-height: 11rem; }
    .mh-process .mh-timeline__item:hover > div { transform: none; }

    .mh-steps.is-enhanced .mh-steps__meta,
    .mh-steps.is-enhanced .mh-steps__progress { display: flex; }

    .mh-steps__meta {
        gap: .35rem;
        margin: 0 0 1rem;
        font-family: var(--font-display);
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .6);
    }

    .mh-steps__meta strong { color: var(--mh-sky); }

    .mh-steps__progress { gap: .4rem; margin-top: .5rem; }
    .mh-steps__progress span { flex: 1; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .15); transition: background-color .3s; }
    .mh-steps__progress span.is-active { background: var(--mh-sky); }

    /* pinned stage: one screen below the header, less the fixed quote button on the home page */
    .mh-steps {
        --steps-count: 4;
        --steps-per: 42svh;     /* page scrolling per step while pinned */
        --steps-stage: calc(100svh - var(--nav-h) - var(--steps-bar, 0px));
    }

    .page--home .mh-steps { --steps-bar: calc(5rem + env(safe-area-inset-bottom)); }

    .mh-steps.is-pinned { height: calc(var(--steps-stage) + var(--steps-count) * var(--steps-per)); }

    .mh-steps.is-pinned .mh-steps__stage {
        position: sticky;
        top: var(--nav-h);
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: var(--steps-stage);
        padding-block: 1rem;
    }

    .mh-steps.is-pinned .mh-steps__title {
        display: block;
        margin: 0 0 .35rem;
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.02em;
        color: #fff;
    }

    /* The cards grow into the free height of the stage (the title, counter, step numbers and progress bar take about
       14rem), so the pinned screen is filled instead of leaving wide empty bands above and below. Each card gets its
       step icon and a large faint step number so the taller card does not look empty. */
    .mh-steps.is-pinned .mh-timeline { counter-reset: mh-step; }
    .mh-steps.is-pinned .mh-timeline__item { counter-increment: mh-step; }

    .mh-steps.is-pinned .mh-timeline__item > div {
        position: relative;
        overflow: hidden;
        flex: none; /* a fixed height: the shared card rule (flex: 1) would otherwise size it to its text */
        min-height: 0;
        height: clamp(12.5rem, calc(var(--steps-stage) - 14rem), 25rem);
        padding: 1.4rem 1.4rem 1.25rem;
    }

    .mh-steps.is-pinned .mh-timeline__item > div::after {
        content: "0" counter(mh-step);
        position: absolute;
        right: .75rem;
        bottom: -.9rem;
        font-family: var(--font-display);
        font-size: 7rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.05em;
        color: rgb(var(--mh-sky-rgb) / .09);
        pointer-events: none;
    }

    .mh-steps.is-pinned .mh-timeline__icon {
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        margin-bottom: 1rem;
        border-radius: 14px;
        background: rgb(var(--mh-sky-rgb) / .14);
        color: var(--mh-sky);
        font-size: 1.6rem;
    }

    .mh-steps.is-pinned .mh-timeline h3 { font-size: 1.3rem; margin-bottom: .45rem; }
    .mh-steps.is-pinned .mh-timeline p { font-size: 1rem; line-height: 1.6; }
}

/* the step icon only shows in the pinned phone cards */
.mh-timeline__icon { display: none; }

/* ---------- Footer: glowing outlined wordmark ---------- */
.mh-footer__word { -webkit-text-stroke: 1.5px rgb(var(--mh-sky-rgb) / .85); }

.mh-footer__word::before,
.mh-footer__word::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    pointer-events: none;
}

/* glow: a thicker, blurred copy of the outline behind it; only its opacity animates */
.mh-footer__word::before {
    z-index: -1;
    -webkit-text-stroke: .045em rgb(var(--mh-sky-rgb));
    filter: blur(.09em);
    opacity: .5;
    animation: ix-word-glow 3.2s ease-in-out infinite alternate;
}

/* highlight: a soft band of light that sweeps across the letters every few seconds */
.mh-footer__word::after {
    -webkit-text-stroke: 0;
    background: linear-gradient(100deg, transparent 0 42%, rgb(var(--mh-sky-rgb) / .38) 50%, transparent 58% 100%) no-repeat;
    background-size: 220% 100%;
    background-position: 120% 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: ix-word-sweep 7s ease-in-out infinite;
}

@keyframes ix-word-glow { from { opacity: .3; } to { opacity: .75; } }
@keyframes ix-word-sweep { 0%, 15% { background-position: 120% 0; } 65%, 100% { background-position: -20% 0; } }

@media (prefers-reduced-motion: reduce) {
    .mh-footer__word::before { animation: none; opacity: .55; }
    .mh-footer__word::after { display: none; }
}

/* ---------- Footer: agency credit in the bottom bar ---------- */
.mh-footer__credit a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgb(var(--mh-sky-rgb) / .5); text-underline-offset: 3px; }
.mh-footer__credit a:hover { color: var(--mh-sky); text-decoration-color: currentColor; }

/* ---------- Quote form: text-message consent box and the terms line ----------
   Small type and tight spacing so the form only grows a little; on desktop the field gaps and the message box are
   trimmed to win most of that height back. */
.mh-consent { margin: .1rem 0 .6rem; }

.mh-consent__check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .75rem; /* 12px: the smallest size that stays readable on a phone */
    line-height: 1.38;
    color: var(--muted);
    cursor: pointer;
}

.mh-consent__check input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: .1rem 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.mh-consent__req { color: var(--error); font-weight: 700; }
.mh-consent .field__error { margin-top: .3rem; font-size: .78rem; }
.mh-consent.has-error .mh-consent__check input { outline: 2px solid var(--error); outline-offset: 1px; }

.mh-consent__terms { margin: .45rem 0 0; font-size: .75rem; line-height: 1.38; color: var(--muted); text-align: center; }
.mh-consent__terms a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.mh-consent__terms a:hover { color: var(--accent); }

@media (min-width: 1024px) {
    .mh-hero .form-card { padding: 1.1rem 1.4rem 1rem; }
    .mh-hero .form-card__head { margin-bottom: .55rem; }
    .mh-hero .field { gap: .15rem; margin-bottom: .45rem; }
    .mh-hero .field label { font-size: .8rem; }
    .mh-hero .field input,
    .mh-hero .field select { padding-block: .45rem; }
    .mh-hero .field textarea { min-height: 40px; padding-block: .45rem; }
}

/* ---------- Quote form: frosted glass over the banner photo (desktop), like the trust bar ----------
   Slightly more opaque than the trust bar so the labels and fine print stay readable; the grey helper text inside
   is darkened for the same reason. Below 1024px the form sits on the plain dark panel, so it stays solid there. */
@media (min-width: 1024px) {
    .mh-hero .form-card {
        --muted: var(--ink-2);
        background: linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .5));
        border: 1px solid rgba(255, 255, 255, .7);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        backdrop-filter: blur(18px) saturate(160%);
        box-shadow: 0 30px 80px rgb(var(--mh-dark-rgb) / .35), inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    /* see-through fields with a bright edge, so the blurred photo shows through them too */
    .mh-hero .form-card .field input,
    .mh-hero .form-card .field select,
    .mh-hero .form-card .field textarea {
        background: rgba(255, 255, 255, .34);
        border-color: rgba(255, 255, 255, .85);
        box-shadow: inset 0 1px 2px rgb(var(--mh-dark-rgb) / .06);
    }

    .mh-hero .form-card .field input:hover,
    .mh-hero .form-card .field select:hover,
    .mh-hero .form-card .field textarea:hover { background: rgba(255, 255, 255, .46); }

    .mh-hero .form-card .field input:focus,
    .mh-hero .form-card .field select:focus,
    .mh-hero .form-card .field textarea:focus { background: rgba(255, 255, 255, .62); }
}

/* no blur support or reduced transparency: a solid card */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mh-hero .form-card { background: var(--surface); }
}

@media (prefers-reduced-transparency: reduce) {
    .mh-hero .form-card { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Process steps on tablet and desktop: load one by one ----------
   site.js adds .is-sequenced, then, once the timeline is in view, step 1 appears, the orange line draws down to
   step 2, step 2 appears, and so on (.is-on). Without JS or with reduced motion all steps simply show. */
@media (min-width: 768px) {
    .mh-steps.is-sequenced .mh-timeline::before { background: rgb(var(--mh-sky-rgb) / .14); }

    .mh-steps.is-sequenced .mh-timeline::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: var(--line-from, 1.5rem);
        left: 23px;
        width: 2px;
        height: var(--line-len, 0px);
        background: var(--mh-sky);
        box-shadow: 0 0 10px rgb(var(--mh-sky-rgb) / .55);
        transform: scaleY(var(--line-scale, 0));
        transform-origin: top;
        transition: transform .55s var(--ease);
    }

    .mh-steps.is-sequenced .mh-timeline__item {
        z-index: 1;
        transition: opacity .5s var(--ease), transform .5s var(--ease);
        transition-delay: 0s;
    }

    .mh-steps.is-sequenced .mh-timeline__item:not(.is-on) { opacity: 0; transform: translateY(18px); }
    .mh-steps.is-sequenced .mh-timeline__item.is-on { opacity: 1; transform: none; }
    .mh-steps.is-sequenced .mh-timeline__item.is-on .mh-timeline__node { animation: ix-node-pop .45s var(--ease); }
}

@keyframes ix-node-pop { from { transform: scale(.55); } to { transform: scale(1); } }

/* ---------- Phones and tablets (below 1024px): the quote form opens in a popup ----------
   The form leaves the banner; a button fixed to the bottom of the screen opens it (site.js adds .is-open to #quote,
   which turns the same form into a centred popup over a dimmed page). The button hides while the popup or the
   mobile menu is open (both set body.no-scroll). */
.mh-quote-bar,
.mh-quote-close { display: none; }

@media (max-width: 1023.98px) {
    body.page--home { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); } /* room for the fixed button at the end of the page */

    .page--home #quote:not(.is-open) { display: none; }

    .page--home #quote.is-open {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: flex;
        padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: rgb(var(--mh-dark-rgb) / .72);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        opacity: 1;
        transform: none;
        transition: none;
        animation: ix-popup-fade .25s ease-out;
    }

    .page--home #quote.is-open .form-card {
        position: relative;
        width: 100%;
        max-width: 30rem;
        margin: auto;
        border: 0;
        border-radius: 20px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
        animation: ix-popup-rise .35s var(--ease);
    }

    .page--home #quote.is-open .form-card__head { padding-right: 2.75rem; }

    .mh-quote-close {
        position: absolute;
        top: .85rem;
        right: .85rem;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: var(--surface-2);
        color: var(--ink);
        font-size: 1.2rem;
        cursor: pointer;
    }

    .mh-quote-close:hover { background: var(--accent-soft); color: var(--accent-strong); }

    .mh-quote-bar {
        position: fixed;
        right: var(--gutter);
        bottom: calc(.75rem + env(safe-area-inset-bottom));
        left: var(--gutter);
        z-index: 150;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-height: 56px;
        padding: .75rem 1.25rem;
        border: 0;
        border-radius: 14px;
        background: var(--accent);
        color: #fff;
        font-family: var(--font-display);
        font-size: 1.08rem;
        font-weight: 700;
        box-shadow: 0 14px 34px rgb(var(--accent-rgb) / .45), 0 2px 6px rgb(var(--mh-dark-rgb) / .25);
        cursor: pointer;
        transition: background-color .2s, transform .15s;
    }

    .mh-quote-bar:hover { background: var(--accent-strong); }
    .mh-quote-bar:active { transform: translateY(1px) scale(.99); }
    .mh-quote-bar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
    body.no-scroll .mh-quote-bar { display: none; }
}

@media (max-width: 1023.98px) and (min-width: 640px) {
    .mh-quote-bar { right: auto; left: 50%; width: min(26rem, calc(100% - 2 * var(--gutter))); transform: translateX(-50%); }
    .mh-quote-bar:active { transform: translateX(-50%) translateY(1px) scale(.99); }
}

@keyframes ix-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ix-popup-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .page--home #quote.is-open,
    .page--home #quote.is-open .form-card { animation: none; }
}

/* ---------- Side menu on phones and tablets (below 1024px) ----------
   Slides in from the right over a dimmed page; the close button stays on top of it. Services is a button that opens
   and closes its list (site.js); the plain Services link is the desktop version. The header gets a solid background
   here: a blurred (backdrop-filter) header would trap the fixed menu inside its own strip. */
.nav__sub-toggle { display: none; }

@media (max-width: 1023.98px) {
    .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }

    .nav {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 2;
        width: min(22rem, 86vw);
        max-height: none;
        padding: calc(var(--nav-h) + .25rem) 1.25rem 1.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--surface);
        border-bottom: 0;
        box-shadow: -24px 0 60px rgb(var(--mh-dark-rgb) / .28);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .35s var(--ease), visibility 0s linear .35s;
    }

    .nav-open .nav { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }

    /* label level with the close button at the top of the menu */
    .nav::before {
        content: "Menu";
        position: absolute;
        top: 0;
        left: 1.25rem;
        display: flex;
        align-items: center;
        height: var(--nav-h);
        font-family: var(--font-display);
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* the dimmed page behind the menu; a tap on it closes the menu */
    .site-header::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgb(var(--mh-dark-rgb) / .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility 0s linear .3s;
    }

    .site-header.nav-open::after { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }

    .nav-toggle { position: relative; z-index: 3; }

    /* Services: a button with an arrow, its list hidden until tapped */
    .nav__item.has-dropdown > a.nav__link { display: none; }

    .nav__sub-toggle {
        display: flex;
        justify-content: space-between;
        width: 100%;
        background: none;
        border: 0;
        border-bottom: 1px solid var(--line);
        text-align: left;
    }

    .nav__sub-toggle i { display: inline-block; font-size: 1rem; transition: transform .25s var(--ease); }
    .nav__sub-toggle:hover { color: var(--accent); }
    .nav__item.is-expanded > .nav__sub-toggle { color: var(--accent); }
    .nav__item.is-expanded > .nav__sub-toggle i { transform: rotate(180deg); }

    .nav__item.has-dropdown > .dropdown { display: none; }
    .nav__item.has-dropdown.is-expanded > .dropdown { display: grid; animation: ix-drop .25s var(--ease); }
}

@keyframes ix-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .nav,
    .site-header::after { transition: none; }
    .nav__item.has-dropdown.is-expanded > .dropdown { animation: none; }
}

/* ---------- Quote popup on phones: compact so the whole form fits on one screen ----------
   Slimmer fields and tighter gaps; Phone and Email share a row; the message box starts one line tall (it can still be
   dragged taller). Field text stays at 16px: smaller text makes iPhones zoom in when a field is tapped. */
@media (max-width: 1023.98px) {
    .page--home #quote .form-card { padding: 1rem 1.1rem .9rem; }
    .page--home #quote .form-card__head { margin-bottom: .5rem; }
    .page--home #quote .form-card__head h2 { font-size: 1.25rem; margin-bottom: .1rem; }
    .page--home #quote .form-card__head p { font-size: .84rem; line-height: 1.4; }
    .page--home #quote .form-alert { margin-bottom: .6rem; padding: .6rem .75rem; font-size: .85rem; }
    .page--home #quote .field { gap: .15rem; margin-bottom: .5rem; }
    .page--home #quote .field label { font-size: .8rem; }
    .page--home #quote .field input,
    .page--home #quote .field select,
    .page--home #quote .field textarea { padding: .45rem .75rem; }
    .page--home #quote .field textarea { height: 44px; min-height: 44px; }
    .page--home #quote .field-row { grid-template-columns: 1fr 1fr; gap: 0 .6rem; }
    .page--home #quote .field__error { font-size: .75rem; }
    .page--home #quote .mh-consent { margin: .1rem 0 .55rem; }
    .page--home #quote .mh-consent__check { line-height: 1.32; }
    .page--home #quote .btn--block { padding-block: .7rem; }
    .page--home #quote .mh-consent__terms { margin-top: .4rem; }
}

/* ---------- Privacy Policy and Terms & Conditions ----------
   Readable text column; on desktop a sticky list of sections sits beside it. */
.mh-legal__grid { display: grid; gap: 2rem; align-items: start; }

.mh-legal__toc {
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.mh-legal__toc-title {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.mh-legal__toc ol { display: grid; gap: .1rem; margin: 0; padding-left: 1.2rem; color: var(--muted); font-size: .92rem; }
.mh-legal__toc a { display: inline-block; padding: .2rem 0; color: var(--ink-2); text-decoration: none; }
.mh-legal__toc a:hover { color: var(--accent); }

.mh-legal__body { max-width: 72ch; }
.mh-legal__updated { margin: 0 0 1.5rem; font-size: .9rem; color: var(--muted); }

.mh-legal__body section {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.mh-legal__body section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.mh-legal__body h2 { margin-bottom: .75rem; font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.mh-legal__body p,
.mh-legal__body li { color: var(--ink-2); line-height: 1.7; }
.mh-legal__body ul { display: grid; gap: .5rem; padding-left: 1.2rem; }
.mh-legal__body a { color: var(--accent-strong); font-weight: 600; }
.mh-legal__body .mh-legal__contact { padding-left: 0; list-style: none; }
.mh-legal__contact li { display: flex; align-items: center; gap: .6rem; }
.mh-legal__contact i { flex: none; font-size: 1.2rem; color: var(--accent); }

@media (min-width: 1024px) {
    .mh-legal__grid { grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; }
    .mh-legal__toc { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
}

/* get-a-quote page footer: the credit sits on its own line under the copyright */
.mh-qfoot__bottom .mh-footer__credit { margin-top: .4rem; }

/* get-a-quote page: the form card is dark glass, so the consent and terms text switch to light colours */
.mh-qform .mh-consent__check,
.mh-qform .mh-consent__terms { color: rgba(255, 255, 255, .72); }
.mh-qform .mh-consent__terms a { color: #fff; }
.mh-qform .mh-consent__terms a:hover { color: var(--mh-sky); }
.mh-qform .mh-consent__req { color: #ffb4ab; }
.mh-qform .mh-consent .field__error { color: #ffb4ab; }
.mh-qform .mh-consent.has-error .mh-consent__check input { outline-color: #ff8a80; }
/* ---------- Thank-you page (after any form is sent) ----------
   The banner photo darkened behind, the logo on top, then one white card: check mark, "Thank you!", a call button
   and a countdown back to the home page. Built like the Nagra Roofing reference, in this site's colours. */
.mh-thanks {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1.5rem, 6vh, 4rem) var(--gutter);
    overflow: hidden;
    background: var(--mh-dark);
}

.mh-thanks__bg { position: absolute; inset: 0; z-index: -1; }
.mh-thanks__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }

.mh-thanks__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(var(--mh-dark-rgb) / .8), rgb(var(--mh-dark-rgb) / .72) 45%, rgb(var(--mh-dark-rgb) / .86));
}

.mh-thanks__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 4vh, 2.25rem);
    width: 100%;
    max-width: 44rem;
}

.mh-thanks__brand { color: #fff; }
.mh-thanks__brand img { width: 48px; height: 48px; }
.mh-thanks__brand .brand__name { font-size: 1.45rem; }
.mh-thanks__brand .brand__tag { display: block; color: rgba(255, 255, 255, .72); }

.mh-thanks__card {
    width: 100%;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 6vw, 3.5rem) clamp(1.6rem, 4vw, 2.25rem);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgb(0 0 0 / .4);
    text-align: center;
}

.mh-thanks__icon {
    display: inline-grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 2.75rem;
}

.mh-thanks__rule { display: block; width: 3.5rem; height: 2px; margin: 1.1rem auto 1.35rem; border-radius: 2px; background: rgb(var(--accent-rgb) / .45); }

.mh-thanks h1 { margin: 0 0 .85rem; color: var(--ink); font-size: clamp(2.4rem, 7vw, 3.5rem); line-height: 1.05; letter-spacing: -.03em; }
.mh-thanks__lead { max-width: 31rem; margin: 0 auto 1.1rem; color: var(--ink-2); font-size: clamp(1.02rem, 2.4vw, 1.15rem); line-height: 1.6; }
.mh-thanks__ask { margin: 0 0 1.1rem; color: var(--ink-2); font-size: 1.05rem; }

.mh-thanks__actions { display: grid; justify-content: center; gap: .75rem; }
.mh-thanks__actions .btn { min-width: min(18.5rem, 100%); padding: 1rem 1.6rem; font-size: 1.08rem; font-weight: 700; }
.mh-thanks__actions .btn i { font-size: 1.3rem; }
.mh-thanks__actions .btn--primary { box-shadow: 0 14px 30px rgb(var(--accent-rgb) / .3); }
.mh-thanks__actions .btn--outline { border-color: var(--line); color: var(--ink); }
.mh-thanks__actions .btn--outline:hover { border-color: var(--ink); }

.mh-thanks__timer { display: grid; justify-items: center; gap: .45rem; margin: 1.4rem 0 0; color: var(--muted); font-size: .92rem; }
.mh-thanks__back { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.mh-thanks__back:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
    .mh-thanks__card { animation: mh-thanks-rise .6s var(--ease) both; }
    .mh-thanks__icon { animation: mh-thanks-pop .5s .25s var(--ease) both; }
}

@keyframes mh-thanks-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mh-thanks-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 479.98px) {
    .mh-thanks__brand .brand__name { font-size: 1.25rem; }
    .mh-thanks__brand img { width: 42px; height: 42px; }
    .mh-thanks__icon { width: 4.5rem; height: 4.5rem; font-size: 2.25rem; }
    .mh-thanks__actions { justify-content: stretch; }
}

/* ---------- Logo: the client's lockup (mark, ARCHITECTURAL TINT, COMMERCIAL WINDOW TINTING) ----------
   One image, so the old separate name and tagline text is gone. Dark lettering on light backgrounds (header),
   white lettering on dark ones (footers, thank-you page). The images are 640x164, shown by height. */
.brand--logo { gap: 0; line-height: 0; }
.brand--logo img { width: auto; height: 56px; }
.mh-footer .brand--logo img { height: 64px; }
.mh-qfoot .brand--logo img { height: 56px; }
.mh-thanks__brand.brand--logo img { width: auto; height: 72px; }

@media (max-width: 479.98px) {
    .brand--logo img { height: 44px; }
    .mh-thanks__brand.brand--logo img { height: 58px; }
}

/* =====================================================================
   Blog: the article list (blog.php) and a single article (/blog/<slug>)
   ===================================================================== */

/* ---------- Category chips ---------- */
.mh-blog__filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

.mh-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 99px;
    transition: color .2s, border-color .2s, background .2s;
}

.mh-chip small { font-size: .78rem; font-weight: 700; color: var(--muted); }
.mh-chip:hover { color: var(--accent); border-color: var(--accent); }
.mh-chip.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }
.mh-chip.is-active small { color: rgba(255, 255, 255, .8); }

/* ---------- Article cards ---------- */
.mh-blog__grid { display: grid; gap: 1.5rem; }
.mh-blog__feature + .mh-blog__grid { margin-top: 1.5rem; }
@media (min-width: 640px) { .mh-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mh-blog__grid { grid-template-columns: repeat(3, 1fr); } }

.mh-post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: transform .3s var(--ease), box-shadow .3s;
}

.mh-post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.mh-post-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    font-size: 2.6rem;
    color: rgba(255, 255, 255, .55);
    background: linear-gradient(135deg, var(--mh-dark), var(--mh-dark-2));
}

.mh-post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mh-post-card:hover .mh-post-card__media img { transform: scale(1.05); }

.mh-post-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.6rem; }

.mh-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .82rem; color: var(--muted); }

.mh-post-tag {
    padding: .22rem .75rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-strong);
    text-decoration: none;
    background: var(--accent-soft);
    border-radius: 99px;
}

.mh-post-card h3 { margin: .85rem 0 .55rem; font-size: 1.25rem; line-height: 1.25; }
.mh-post-card h3 a { color: var(--ink); text-decoration: none; }
.mh-post-card h3 a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.mh-post-card:hover h3 a { color: var(--accent); }
.mh-post-card p { margin: 0 0 1.2rem; color: var(--muted); font-size: .95rem; }
.mh-post-card .link-arrow { margin-top: auto; color: var(--accent-strong); }

/* the newest article, wide, above the grid */
@media (min-width: 900px) {
    .mh-post-card--feature { flex-direction: row; }
    .mh-post-card--feature .mh-post-card__media { flex: 1 1 55%; aspect-ratio: auto; min-height: 340px; }
    .mh-post-card--feature .mh-post-card__body { flex: 1 1 45%; justify-content: center; padding: clamp(2rem, 4vw, 3rem); }
    .mh-post-card--feature h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
    .mh-post-card--feature p { font-size: 1.05rem; }
}

/* ---------- Pages and empty state ---------- */
.mh-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.mh-pager span { font-size: .95rem; font-weight: 600; color: var(--muted); }
.mh-pager .btn.is-disabled { opacity: .45; pointer-events: none; }

.mh-blog__empty {
    display: grid;
    justify-items: center;
    gap: .6rem;
    max-width: 560px;
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
}

.mh-blog__empty i { font-size: 2.6rem; color: var(--accent); }
.mh-blog__empty h2 { margin: 0; font-size: 1.5rem; }
.mh-blog__empty p { margin: 0 0 .6rem; color: var(--muted); }

/* ---------- Single article ---------- */
.mh-post .mh-phead__inner h1 { max-width: 24ch; font-size: clamp(2rem, 4.6vw, 3.4rem); }
.mh-post .mh-phead__inner p { max-width: 62ch; }
/* a long title must not push the breadcrumb pill off a phone screen: it shortens with "..." instead */
.mh-post .mh-crumb ol { max-width: 100%; }
.mh-post .mh-crumb li { flex: none; white-space: nowrap; }
.mh-post .mh-crumb li[aria-current] { flex: 0 1 auto; min-width: 0; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; }

/* article on the left, sidebar on the right (stacked on phones and tablets) */
.mh-article__grid { display: grid; gap: 2.5rem; }
.mh-article__main { min-width: 0; }
.mh-article__side { display: grid; align-content: start; gap: 1.5rem; }

.mh-side-card {
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.mh-side-card__title { margin: 0 0 1rem; padding-bottom: .9rem; font-size: 1.15rem; border-bottom: 1px solid var(--line); }

.mh-side-list { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }

.mh-side-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .75rem;
    margin-inline: -.75rem;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: 10px;
    transition: color .2s, background .2s;
}

.mh-side-list a:hover, .mh-side-list a.is-active { color: var(--accent-strong); background: var(--accent-soft); }
.mh-side-list small { min-width: 1.6rem; padding: .1rem .5rem; font-size: .75rem; font-weight: 700; text-align: center; color: var(--muted); background: var(--surface-2); border-radius: 99px; }
.mh-side-list a.is-active small { color: #fff; background: var(--accent); }
.mh-side-list--icons a { justify-content: flex-start; }
.mh-side-list--icons i { flex: none; font-size: 1.25rem; color: var(--accent); }

.mh-side-quote {
    padding: 1.75rem 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border-radius: 20px;
    box-shadow: 0 16px 36px rgb(var(--accent-rgb) / .3);
}

.mh-side-quote h2 { margin: 0 0 .5rem; font-size: 1.4rem; color: #fff; }
.mh-side-quote p { margin: 0 0 1.25rem; font-size: .95rem; color: rgba(255, 255, 255, .88); }
.mh-side-quote__phone { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; font-weight: 700; color: #fff; text-decoration: none; }
.mh-side-quote__phone:hover { text-decoration: underline; }

/* tablet: categories and services side by side, the quote card across the top */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .mh-article__side { grid-template-columns: repeat(2, 1fr); }
    .mh-side-quote { grid-column: 1 / -1; order: -1; }
}

@media (max-width: 639.98px) {
    .mh-side-quote { order: -1; }
}

@media (min-width: 1024px) {
    .mh-article__grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 3.5rem; }
    .mh-side-quote { position: sticky; top: calc(var(--nav-h) + 1.5rem); } /* stays in view while the article scrolls */
}

.mh-article__notice { margin-bottom: 1.5rem; padding: .8rem 1.1rem; font-weight: 600; color: var(--accent-strong); background: var(--accent-soft); border-radius: 12px; }

.mh-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-bottom: 1.75rem; font-size: .92rem; color: var(--muted); }
.mh-article__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.mh-article__meta i { font-size: 1.1rem; color: var(--accent); }
.mh-article__meta a.mh-post-tag:hover { color: #fff; background: var(--accent); }

.mh-article__media { margin: 0 0 2.25rem; }
.mh-article__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow-lg); }

.mh-article__body { font-size: 1.08rem; line-height: 1.8; color: var(--ink-2); }
.mh-article__body > p:first-child { font-size: 1.22rem; color: var(--ink); }
.mh-article__body p { margin: 0 0 1.35em; }
.mh-article__body h2 { margin: 2.2em 0 .6em; font-size: clamp(1.5rem, 3vw, 2rem); }
.mh-article__body h3 { margin: 1.8em 0 .5em; font-size: 1.3rem; }
.mh-article__body ul, .mh-article__body ol { display: grid; gap: .5rem; margin: 0 0 1.35em; padding-left: 1.4rem; }
.mh-article__body li::marker { font-weight: 700; color: var(--accent); }
.mh-article__body a { font-weight: 600; color: var(--accent-strong); text-underline-offset: .2em; }
.mh-article__body a:hover { color: var(--accent); }
.mh-table { overflow-x: auto; margin: 0 0 1.35em; border: 1px solid var(--line); border-radius: var(--radius-sm); } /* wide tables scroll inside the box on phones */
.mh-table table { width: 100%; border-collapse: collapse; font-size: .98rem; line-height: 1.5; }
.mh-table th, .mh-table td { padding: .75rem clamp(.55rem, 2vw, 1rem); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.mh-table th { color: var(--ink); background: var(--surface-2); }
.mh-table td:first-child { font-weight: 600; color: var(--ink); }
.mh-table tbody tr:last-child td { border-bottom: 0; }
.mh-article__body > :first-child { margin-top: 0; }
.mh-article__body > :last-child { margin-bottom: 0; }

.mh-article__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.mh-article__foot .link-arrow { color: var(--accent-strong); }

@media (prefers-reduced-motion: reduce) {
    .mh-post-card, .mh-post-card__media img { transition: none; }
}

/* ---------- Home page: "From the blog" carousel ----------
   A sideways row of article cards that snaps card by card (swipe on touch screens, the arrows from site.js on larger
   ones): one card wide on phones, two on tablets, three on desktop. */
.mh-blogcar__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.mh-blogcar__head .mh-head { margin-bottom: 0; }
.mh-blogcar__actions { display: flex; align-items: center; gap: .6rem; }
.mh-blogcar__actions .link-arrow { margin-right: .9rem; color: var(--accent-strong); }
.mh-blogcar__controls { display: flex; gap: .6rem; }
.mh-blogcar__controls[hidden] { display: none; }
.mh-blogcar .mh-spot__arrow:disabled { opacity: .4; pointer-events: none; }

.mh-blogcar__track {
    display: flex;
    gap: 1.5rem;
    margin: -.5rem -1rem -1.5rem; /* the padding below leaves room inside the scroll area for the hover lift and shadows */
    padding: .5rem 1rem 2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
    list-style: none;
}

.mh-blogcar__track::-webkit-scrollbar { display: none; }
.mh-blogcar__track:focus-visible { outline: 3px solid rgb(var(--accent-rgb) / .4); outline-offset: 2px; border-radius: 20px; }

.mh-blogcar__slide { display: flex; flex: 0 0 86%; scroll-snap-align: start; }
.mh-blogcar__slide .mh-post-card { flex: 1; min-width: 0; }

@media (min-width: 640px) { .mh-blogcar__slide { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1024px) { .mh-blogcar__slide { flex-basis: calc((100% - 3rem) / 3); } }

/* ---------- Links inside the call-to-action text ----------
   Copy can link to a page with [text](page) (see rich() in config.php). On the orange card and band the default link
   colour would disappear into the background, so these are white, bold and underlined. */
.mh-cta__text p a,
.cta-band p a { font-weight: 700; color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.mh-cta__text p a:hover,
.cta-band p a:hover { text-decoration-thickness: 2px; }