/* ==========================================================================
   The site shell: header, command palette, phone dock and page transitions.
   There are no menus. One command bar opens the palette, which holds every link the menus
   held plus the articles, and filters as you type; the footer lists the main pages again.
   Header colours come from the variables main.css already sets on .header (transparent over
   the hero, a dark bar once scrolled, and the light theme's versions), so the bar follows them.
   ========================================================================== */

/* ---------- header ---------- */
.header.hd { padding: 14px 0; }
.scrolled .header.hd { backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.hd .hd-in { display: flex; align-items: center; gap: 18px; }
/* main.css reorders the old header's parts below 1200px (logo, toggle, menu button); this one
   keeps its source order at every width. */
.header.hd .logo, .header.hd .theme-toggle { order: 0; flex: none; }

.hd-cmd { flex: 0 1 460px; margin-inline: auto; display: flex; align-items: center; gap: 11px; height: 46px; padding: 0 8px 0 16px;
    border-radius: 13px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 78%);
    background: color-mix(in srgb, var(--default-color), transparent 94%);
    color: color-mix(in srgb, var(--default-color), transparent 28%); font-size: .95rem; text-decoration: none; cursor: text;
    transition: border-color .2s, background .2s, color .2s; }
.hd-cmd:hover, .hd-cmd:focus-visible { border-color: var(--accent-color); color: var(--default-color);
    background: color-mix(in srgb, var(--default-color), transparent 90%); }
.hd-cmd i { color: var(--accent-color); }
.hd-cmd span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-kbd, .cmd kbd { font: 600 .7rem/1 var(--default-font); padding: 5px 7px; border-radius: 6px; white-space: nowrap;
    border: 1px solid color-mix(in srgb, currentColor, transparent 70%); background: transparent; color: inherit; opacity: .8; }

.hd-end { display: flex; align-items: center; gap: 14px; flex: none; }
.hd-xp, .hd-xp:hover { display: inline-flex; align-items: center; gap: 8px; font: 600 .92rem/1 var(--nav-font); color: var(--heading-color); text-decoration: none; }
.hd-xp:hover { color: var(--accent-color); }
.hd-xp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color), transparent 40%); animation: hd-pulse 2.4s ease-out infinite; }
@keyframes hd-pulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hd-book, .hd-book:hover { display: inline-flex; align-items: center; gap: 7px; padding: 11px 17px; border-radius: 11px; background: var(--accent-fill);
    color: #fff; font: 600 .92rem/1 var(--nav-font); text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s; }
.hd-book:hover { background: var(--accent-fill-hover); transform: translateY(-1px); }

@media (max-width: 991px) {
    .hd .hd-in { gap: 12px; }
    .hd .logo .brand-sub { display: none; }
    .hd-cmd { height: 42px; flex: 1; margin-inline: 0; }
    .hd-kbd, .hd-xp, .hd-book { display: none; }
}
@media (max-width: 420px) {
    .hd .logo .brand-wordmark { display: none; }
}

/* ---------- command palette ---------- */
.cmd { width: min(660px, calc(100% - 24px)); max-height: min(74vh, 640px); margin: 11vh auto auto; padding: 0;
    border: 1px solid rgba(var(--ink), .14); border-radius: 18px; background: var(--surface); color: var(--default-color);
    box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .65); overflow: hidden; }
.cmd[open] { display: flex; flex-direction: column; animation: cmd-in .22s cubic-bezier(.16, 1, .3, 1); }
.cmd::backdrop { background: rgba(2, 6, 3, .55); backdrop-filter: blur(5px); }
@keyframes cmd-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } }

.cmd-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(var(--ink), .1); }
.cmd-top > i { color: var(--accent-color); font-size: 1.1rem; }
.cmd-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--heading-color); font: inherit; font-size: 1.05rem; }
.cmd-input::placeholder { color: rgba(var(--ink), .45); }
.cmd-input::-webkit-search-cancel-button { display: none; }
.cmd-esc { border: 0; background: none; padding: 0; color: rgba(var(--ink), .6); cursor: pointer; }

.cmd-list { overflow: auto; overscroll-behavior: contain; padding: 6px 8px 10px; }
.cmd-group-name { margin: 12px 10px 6px; font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(var(--ink), .5); }
.cmd-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 10px; border-radius: 11px;
    color: var(--heading-color); text-decoration: none; scroll-margin: 8px; }
.cmd-item > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(var(--ink), .06); color: var(--accent-color); font-size: .9rem; }
.cmd-t { display: grid; gap: 1px; min-width: 0; }
.cmd-t > span { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-t small { color: rgba(var(--ink), .55); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-item:hover, .cmd-item.is-active { background: rgba(var(--ink), .07); color: var(--heading-color); }
.cmd-item.is-active { box-shadow: inset 2px 0 0 var(--accent-color); }
.cmd-item.is-active > i { background: var(--accent-fill); color: #fff; }
.cmd-item[hidden], .cmd-group[hidden] { display: none; }
.cmd-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid rgba(var(--ink), .1); font-size: .74rem; color: rgba(var(--ink), .5); }
.cmd-foot kbd { margin-right: 4px; }
/* Before any typing, long groups show their first few; a search reaches all of them. */
.cmd:not(.is-searching) .cmd-more,
.cmd:not(.is-searching) .cmd-group:not(:has(.cmd-item:not(.cmd-more))) { display: none; }

@media (max-width: 600px) {
    .cmd { margin-top: 10px; max-height: calc(100dvh - 120px); border-radius: 16px; }
    .cmd-foot { display: none; }
}

/* ---------- phone dock ---------- */
.dock { display: none; }
@media (max-width: 991px) {
    .dock { position: fixed; z-index: 998; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        width: min(440px, calc(100% - 20px)); display: flex; justify-content: space-between; gap: 2px; padding: 6px;
        border-radius: 20px; border: 1px solid rgba(var(--ink), .12);
        background: color-mix(in srgb, var(--surface), transparent 10%); backdrop-filter: blur(16px);
        box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55); }
    .dock a { flex: 1; display: grid; justify-items: center; gap: 4px; padding: 8px 2px 7px; border-radius: 14px;
        color: rgba(var(--ink), .68); font: 600 .66rem/1 var(--nav-font); text-decoration: none; }
    .dock a i { font-size: 1.15rem; line-height: 1; }
    .dock a[aria-current="page"] { color: var(--accent-color); }
    .dock .dock-cmd i { display: grid; place-items: center; width: 42px; height: 30px; margin-top: -2px; border-radius: 11px;
        background: var(--accent-fill); color: #fff; font-size: 1rem; }
    .dock a:active { background: rgba(var(--ink), .08); }

    /* Room for the dock: the page's last lines, and the floating buttons, sit above it. */
    body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
    .whatsapp-float { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
    .scroll-top { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- choice chips ---------- */
/* Radio buttons dressed as chips: the home page planner, the services filter and the enquiry
   forms. The real radio covers the chip, invisible, so focus, keyboard and forms all work as
   they would for a plain radio. */
.chip-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.chip-set legend { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 12px; font-size: .76rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .62); }
.chip-n { font-family: var(--display-font); font-size: 1rem; letter-spacing: 0; color: var(--accent-color); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 99px;
    border: 1px solid rgba(var(--ink), .14); background: var(--surface); color: var(--heading-color); font-weight: 600; font-size: .93rem;
    cursor: pointer; user-select: none; transition: border-color .2s, background .2s, color .2s, transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; }
.chip i { color: var(--accent-color); font-size: 1rem; transition: color .2s; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip:hover { border-color: color-mix(in srgb, var(--accent-color), transparent 35%); transform: translateY(-2px); }
.chip:has(input:checked) { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; box-shadow: 0 10px 24px -12px var(--accent-fill); }
.chip:has(input:checked) i { color: #fff; }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent-color); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }
/* Inside the enquiry forms, whose label and input rules (kinetic.css .kn-form) are broader. */
.kn-form .chip { display: inline-flex; gap: 9px; font-size: .9rem; color: var(--heading-color); }
.kn-form .chip input { width: auto; padding: 0; border: 0; }
.kn-form .chip input:focus { outline: none; }
.kn-form .chip-set { display: grid; gap: 0; }

/* The services overview's filter */
.sv-filter { margin-bottom: clamp(26px, 4vw, 44px); }
.sv-filter-note { margin: 14px 0 0; min-height: 1.5em; color: rgba(var(--ink), .65); font-size: .95rem; }
.sv-filter-note a { margin-left: 6px; font-weight: 600; }
.sv-index li[hidden] { display: none; }

/* ---------- page transitions ---------- */
/* Same-site navigations cross-fade instead of flashing white, where the browser supports it;
   elsewhere pages load exactly as before. The header and dock stay put across the change. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .header.hd { view-transition-name: site-header; }
    .dock { view-transition-name: site-dock; }
    ::view-transition-old(root) { animation: 160ms ease both vt-out; }
    ::view-transition-new(root) { animation: 280ms cubic-bezier(.16, 1, .3, 1) both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    .hd-xp-dot { animation: none; }
    .cmd[open] { animation: none; }
}