/* =========================================================
   CleanScape — shared site header
   Single source of truth for the header on EVERY page.
   Loaded after each page's own stylesheet so it wins.

   All selectors are namespaced with `sh-` so they can never
   leak onto other <nav>/<header> elements (the footer nav
   used to inherit the old unscoped `nav{position:fixed}`
   rule and render as a second bar over the real header).
========================================================= */

.sh-root{
    --sh-bg:#000;
    --sh-line:rgba(255,255,255,.14);
    --sh-text:#fff;
    --sh-muted:#9aa7b2;
    --sh-blue:#168cff;
    --sh-blue-deep:#0873d9;
    --sh-radius:18px;
    --sh-inset:12px;
    --sh-height:64px;

    position:fixed;
    top:var(--sh-inset);
    left:var(--sh-inset);
    right:var(--sh-inset);
    z-index:1000;
    font-family:"DM Sans",Arial,Helvetica,sans-serif;
    line-height:1.4;
}

/* Skip link — the first thing a keyboard or screen-reader user
   meets. Clipped rather than hidden so it stays focusable, and it
   drops in below the bar on focus instead of behind it. */
.sh-skip{
    position:absolute;
    left:0;
    top:0;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    background:var(--sh-blue);
    color:#fff;
    font-size:14px;
    font-weight:700;
    border-radius:10px;
}

.sh-skip:focus{
    z-index:5;
    top:calc(var(--sh-height) + 10px);
    width:auto;
    height:auto;
    overflow:visible;
    clip-path:none;
    padding:13px 18px;
    outline:2px solid #fff;
    outline-offset:2px;
}

/* ---------- the bar itself ---------- */

.sh-bar{
    position:relative;
    max-width:1240px;
    margin:0 auto;
    height:var(--sh-height);
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 10px 0 14px;
    background:var(--sh-bg);
    border:1px solid var(--sh-line);
    border-radius:var(--sh-radius);
    box-shadow:0 14px 38px rgba(0,0,0,.5);
    transition:box-shadow .25s ease,border-color .25s ease;
}

.sh-root.is-scrolled .sh-bar{
    border-color:rgba(255,255,255,.22);
    box-shadow:0 18px 46px rgba(0,0,0,.7);
}

/* ---------- brand ---------- */

/* The logo PNG has an opaque black background baked in, so the
   bar behind it must stay true black or the square shows. */
.sh-brand{
    display:flex;
    align-items:center;
    flex-shrink:0;
    background:var(--sh-bg);
    border-radius:10px;
}

.sh-brand img{
    display:block;
    width:auto;
    height:50px;
    border:0;
}

/* ---------- desktop menu ---------- */

.sh-nav{
    display:flex;
    align-items:center;
    margin-left:auto;
}

.sh-menu{
    display:flex;
    align-items:center;
    gap:4px;
    list-style:none;
    margin:0;
    padding:0;
}

.sh-menu a{
    display:flex;
    align-items:center;
    height:40px;
    padding:0 12px;
    border-radius:10px;
    color:var(--sh-text);
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    transition:color .2s ease,background .2s ease;
}

.sh-menu a:hover{
    color:var(--sh-blue);
    background:rgba(255,255,255,.06);
}

/* Current page / section gets a visible marker, not just colour. */
.sh-menu a[aria-current]{
    color:var(--sh-blue);
    background:rgba(22,140,255,.12);
    box-shadow:inset 0 -2px 0 var(--sh-blue);
}

/* ---------- right hand actions ---------- */

.sh-actions{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:4px;
}

.sh-call{
    display:none;
    align-items:center;
    gap:8px;
    height:40px;
    padding:0 12px;
    border-radius:10px;
    color:var(--sh-text);
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    transition:color .2s ease,background .2s ease;
}

.sh-call:hover{
    color:var(--sh-blue);
    background:rgba(255,255,255,.06);
}

.sh-call svg{
    width:16px;
    height:16px;
    flex-shrink:0;
}

.sh-quote{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 18px;
    border:1px solid var(--sh-blue);
    border-radius:11px;
    background:var(--sh-blue);
    color:#fff;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.sh-quote:hover{
    background:var(--sh-blue-deep);
    border-color:var(--sh-blue-deep);
    transform:translateY(-1px);
}

/* ---------- burger ---------- */

.sh-burger{
    display:none;
    align-items:center;
    gap:9px;
    height:42px;
    padding:0 13px 0 12px;
    border:1px solid var(--sh-line);
    border-radius:11px;
    background:rgba(255,255,255,.05);
    color:var(--sh-text);
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    letter-spacing:.3px;
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease;
}

.sh-burger:hover{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.28);
}

.sh-burger-box{
    position:relative;
    display:block;
    width:18px;
    height:12px;
    flex-shrink:0;
}

.sh-burger-box span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform .25s ease,opacity .2s ease;
}

.sh-burger-box span:nth-child(1){ top:0; }
.sh-burger-box span:nth-child(2){ top:5px; }
.sh-burger-box span:nth-child(3){ top:10px; }

.sh-burger[aria-expanded="true"] .sh-burger-box span:nth-child(1){
    transform:translateY(5px) rotate(45deg);
}

.sh-burger[aria-expanded="true"] .sh-burger-box span:nth-child(2){
    opacity:0;
}

.sh-burger[aria-expanded="true"] .sh-burger-box span:nth-child(3){
    transform:translateY(-5px) rotate(-45deg);
}

/* ---------- slide-down panel (mobile) ---------- */

.sh-panel{
    position:absolute;
    top:calc(var(--sh-height) + 10px);
    left:0;
    right:0;
    max-height:calc(100dvh - var(--sh-height) - 34px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:8px 18px 64px;
    background:var(--sh-bg);
    border:1px solid var(--sh-line);
    border-radius:var(--sh-radius);
    box-shadow:0 26px 60px rgba(0,0,0,.75);
}

.sh-panel[hidden]{
    display:none;
}

.sh-group{
    padding:16px 0 4px;
    border-top:1px solid rgba(255,255,255,.09);
}

.sh-group:first-child{
    border-top:0;
    padding-top:8px;
}

/* The section headings that make the menu scannable. */
.sh-group > h2{
    margin:0 0 10px;
    color:var(--sh-muted);
    font-family:inherit;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

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

.sh-list a{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:48px;
    padding:6px 10px;
    margin:0 -10px;
    border-radius:12px;
    color:var(--sh-text);
    font-size:16px;
    font-weight:700;
    transition:background .2s ease,color .2s ease;
}

.sh-list a:hover{
    background:rgba(255,255,255,.07);
}

.sh-list a[aria-current]{
    color:var(--sh-blue);
    background:rgba(22,140,255,.12);
}

.sh-list svg{
    width:18px;
    height:18px;
    flex-shrink:0;
    color:var(--sh-blue);
}

.sh-list .sh-note{
    display:block;
    color:var(--sh-muted);
    font-size:13px;
    font-weight:400;
}

/* Area chips — quick access to the busiest towns. */
.sh-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}

.sh-chips a{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 13px;
    border:1px solid var(--sh-line);
    border-radius:100px;
    color:var(--sh-text);
    font-size:14px;
    font-weight:700;
    transition:border-color .2s ease,background .2s ease,color .2s ease;
}

.sh-chips a:hover{
    background:rgba(22,140,255,.12);
    border-color:rgba(22,140,255,.5);
    color:var(--sh-blue);
}

.sh-panel-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    margin-top:12px;
    border-radius:13px;
    background:var(--sh-blue);
    color:#fff;
    font-size:16px;
    font-weight:700;
}

.sh-panel-cta:hover{
    background:var(--sh-blue-deep);
}

.sh-legal{
    display:flex;
    flex-wrap:wrap;
    gap:6px 18px;
    margin-top:14px;
}

.sh-legal a{
    color:var(--sh-muted);
    font-size:13px;
    font-weight:600;
    min-height:44px;
    display:inline-flex;
    align-items:center;
}

.sh-legal a:hover{
    color:var(--sh-blue);
}

/* ---------- focus visibility ---------- */

.sh-root a:focus-visible,
.sh-root button:focus-visible{
    outline:2px solid var(--sh-blue);
    outline-offset:3px;
}

/* ---------- breakpoints ---------- */

/* Room for the phone number once the bar is wide enough. */
@media(min-width:1080px){
    .sh-call{
        display:flex;
    }
}

/* Tablet / mobile: flat link row is swapped for the panel. */
@media(max-width:900px){
    .sh-root{
        --sh-height:58px;
        --sh-inset:10px;
    }

    .sh-nav{
        display:none;
    }

    .sh-burger{
        display:inline-flex;
    }

    .sh-actions{
        margin-left:auto;
    }

    .sh-brand img{
        height:44px;
    }
}

/* Narrow phones: keep both the menu and the quote button. The
   burger drops its word rather than the CTA disappearing. */
@media(max-width:359px){
    .sh-burger-text{
        display:none;
    }

    .sh-burger{
        padding:0 13px;
    }

    .sh-quote{
        padding:0 14px;
    }

    .sh-bar{
        gap:10px;
        padding:0 8px 0 10px;
    }
}

@media(prefers-reduced-motion:reduce){
    .sh-root *,
    .sh-root *::before,
    .sh-root *::after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
    }
}

/* Anchor jumps must clear the fixed bar. Declared here so every
   page gets the same offset as the header it actually has. */
html{
    scroll-padding-top:96px;
}

@media(max-width:900px){
    html{
        scroll-padding-top:84px;
    }
}

/* Body scroll lock while the panel is open. */
body.sh-menu-open{
    overflow:hidden;
}

/* ---------- inline SVG icon primitives ---------- */

.sh-icon{
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sh-icon-solid{
    fill:currentColor;
    stroke:none;
}

.sh-sprite{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}