/* =====================================================================
   Woulfe's K9 — Site header + slide-out drawer
   Depends on tokens.css.

   Three-part bar: nav left, logo centre, actions right. The logo is centred
   on the VIEWPORT, not between its siblings — a grid with equal outer
   columns, so the mark stays put no matter how long the nav or the phone
   number gets.

   Over a hero the bar is transparent and the page runs underneath it.
   Everywhere else it is a solid surface and the page is padded down.
   ===================================================================== */

/* BeTheme's header stays in the DOM — its sticky-scroll JS is wired into
   other parts of the theme — but is taken out of the layout entirely. */
#Header_wrapper,
#Action_bar,
#Top_bar,
.header_placeholder,
#Header_creative {
    display: none !important;
}

.wk9-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: calc(var(--k9-z-toast) + 1);
    padding: var(--k9-space-3) var(--k9-space-4);
    background: var(--k9-action);
    color: var(--k9-action-text);
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-body-sm);
    font-weight: var(--k9-weight-bold);
    border-radius: var(--k9-radius-sm);
}

.wk9-skip:focus {
    left: var(--k9-space-4);
    top: var(--k9-space-4);
}

/* ---------------------------------------------------------------------
   Bar
   ------------------------------------------------------------------- */

.wk9-header {
    --wk9-header-h: 108px;

    position: absolute;
    inset: 0 0 auto 0;
    z-index: var(--k9-z-nav);
    box-sizing: border-box;
    font-family: var(--k9-font-body);
    color: var(--k9-text);
    background: transparent;
    transition:
        background var(--k9-duration) var(--k9-ease),
        transform var(--k9-duration-slow) var(--k9-ease);
}

/* The rule under the bar is drawn as TWO segments rather than a border, so it
   can stop either side of the logo and let the mark hang across it. The gap is
   measured from the real logo in JS (--wk9-logo-half); the fallback covers the
   frame before that runs, and any no-JS case. */
.wk9-header::before,
.wk9-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    background: var(--k9-line-subtle);
    pointer-events: none;
}

.wk9-header::before {
    left: 0;
    right: calc(50% + var(--wk9-logo-half, 46px) + var(--k9-space-6));
}

.wk9-header::after {
    right: 0;
    left: calc(50% + var(--wk9-logo-half, 46px) + var(--k9-space-6));
}

.wk9-header *,
.wk9-header *::before,
.wk9-header *::after { box-sizing: border-box; }

.wk9-header--sticky { position: fixed; }

/* Logged in, WordPress pushes the page down for its admin bar but a fixed bar
   ignores that, so it slid under the admin bar and left a white strip below.
   Under 600px the admin bar scrolls away with the page, so no offset there. */
body.admin-bar .wk9-header--sticky { top: 32px; }

@media (max-width: 782px) {
    body.admin-bar .wk9-header--sticky { top: 46px; }
}

@media (max-width: 600px) {
    body.admin-bar .wk9-header--sticky { top: 0; }
}

/* Hidden on the way down, back on the way up.
   The transform lives ONLY here, never on the base rule: a transform on the
   bar would make it the containing block for anything fixed inside it, and
   `transform: none` in the resting state avoids that entirely. The mega
   panels hang off this element and travel with it, which is what we want —
   the drawer is a sibling and is unaffected. */
.wk9-header--sticky.is-hidden { transform: translateY(-100%); }

/* Nothing slides away mid-interaction. */
.wk9-header--sticky.has-mega.is-hidden { transform: none; }

/* Scrolled, or sitting on a page with no hero behind it: become a surface.
   Backdrop blur is a progressive nicety — the solid colour underneath it
   already carries the contrast, so nothing breaks without it. */
.wk9-header.is-solid::before,
.wk9-header.is-solid::after { background: var(--k9-line); }

.wk9-header.is-solid {
    background: rgba(var(--k9-black-rgb), 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.wk9-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--k9-space-4);
    height: var(--wk9-header-h);
    width: min(1560px, 100%);
    margin: 0 auto;
    padding: 0 var(--k9-gutter);
}

/* Pages without a hero need the content pushed clear of a fixed bar. */
body.wk9-has-header:not(.wk9-hero-page) #Wrapper {
    padding-top: var(--wk9-header-offset, 88px);
}

/* ---------------------------------------------------------------------
   Left nav
   ------------------------------------------------------------------- */

.wk9-header__nav { min-width: 0; }

.wk9-header__menu {
    display: flex;
    align-items: center;
    gap: var(--k9-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wk9-header__menu > li { margin: 0; }

/* Direct children only. The training panel hangs inside one of these list
   items, and its cards are anchors too — a descendant selector here would set
   them in 11px uppercase micro type and draw the nav underline across them. */
.wk9-header__menu > li > a {
    position: relative;
    display: inline-block;
    padding: var(--k9-space-2) 0;
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--k9-text);
    transition: opacity var(--k9-duration-fast) var(--k9-ease);
}

/* The underline is drawn on a pseudo-element and scaled from the left, so it
   animates without the layout shift a border-bottom would cause. */
.wk9-header__menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--k9-action);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--k9-duration) var(--k9-ease);
}

.wk9-header__menu > li > a:hover,
.wk9-header__menu > li > a:focus-visible { opacity: 0.72; }

.wk9-header__menu > li > a:hover::after,
.wk9-header__menu > li > a:focus-visible::after,
.wk9-header__menu > .current-menu-item > a::after { transform: scaleX(1); }

.wk9-header__menu > .current-menu-item > a { color: var(--k9-text); }

/* Over a blurred photograph a hairline of shadow is what keeps white text
   crisp — the background behind the bar is not a known colour. */
.wk9-header__menu > li > a,
.wk9-header__wa { text-shadow: 0 1px 12px rgba(var(--k9-black-rgb), 0.55); }

/* ---------------------------------------------------------------------
   Centre logo
   ------------------------------------------------------------------- */

.wk9-header__brand {
    display: flex;
    justify-content: center;
    min-width: 0;
    /* Hangs past the bottom of the bar so it sits across the rule. The header
       must not clip for this — nothing here sets overflow. */
    transform: translateY(16px);
}

.wk9-header__logo {
    display: block;
    line-height: 0;
    text-decoration: none;
}

/* Scoped to .wk9-header on purpose. BeTheme ships
   `img:not([src$=".svg"]) { max-width:100%; height:auto }` — a :not() takes
   the specificity of its argument, so that rule is (0,1,1) and beats a bare
   single class. Two classes clears it without reaching for !important. */
.wk9-header .wk9-header__logo-img {
    display: block;
    width: auto;
    height: 88px;
    max-width: 300px;
    object-fit: contain;
}

/* The inline mark. currentColor on the root <svg> is what makes the black
   artwork render white — nothing in the file carries its own fill. */
.wk9-header__logo-svg {
    display: block;
    height: 88px;
    width: auto;
    color: var(--k9-text);
}

.wk9-header__logo-text {
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-title-sm);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-text);
    line-height: 1;
}

/* ---------------------------------------------------------------------
   Right actions
   ------------------------------------------------------------------- */

.wk9-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--k9-space-4);
    min-width: 0;
}

/* Account quick links: shown only on the condensed booking header (book.css). */
.wk9-header__quick { display: none; }

.wk9-header__wa {
    display: inline-flex;
    align-items: center;
    gap: var(--k9-space-2);
    text-decoration: none;
    color: var(--k9-text);
    font-size: var(--k9-text-body-sm);
    font-weight: var(--k9-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: color var(--k9-duration-fast) var(--k9-ease);
}

.wk9-header__wa:hover,
.wk9-header__wa:focus-visible { opacity: 0.78; }

.wk9-header__wa-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

.wk9-header__wa-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text);
}

/* Green means one thing here: a state. The ring is a separate pseudo-element
   so the dot itself never moves — animating the dot would make the baseline
   of the label next to it look unstable. */
.wk9-header__wa-dot {
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: var(--k9-radius-pill);
    background: var(--k9-success);
}

.wk9-header__wa-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--k9-success);
    animation: wk9-pulse 2.2s var(--k9-ease) infinite;
}

@keyframes wk9-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(2.8); opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
}

.wk9-header__wa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--k9-radius-pill);
    border: 1px solid var(--k9-line);
    color: var(--k9-whatsapp);
    background: rgba(var(--k9-black-rgb), 0.3);
}

.wk9-header__book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 var(--k9-space-6);
    border-radius: var(--k9-radius-pill);
    background: var(--k9-action);
    color: var(--k9-action-text);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background var(--k9-duration-fast) var(--k9-ease),
        transform var(--k9-duration-fast) var(--k9-ease);
}

.wk9-header__book:hover { background: var(--k9-action-hover); }
.wk9-header__book:active { transform: translateY(1px); }

/* Burger ------------------------------------------------------------- */

.wk9-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 0;
    border: 0;
    border-radius: var(--k9-radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--k9-text);
}

.wk9-burger__bar {
    display: block;
    height: 2px;
    width: 26px;
    background: currentColor;
    transition: width var(--k9-duration) var(--k9-ease);
}

/* The short second bar is the whole character of the reference mark. */
.wk9-burger__bar:last-child { width: 18px; }
.wk9-burger:hover .wk9-burger__bar:last-child { width: 26px; }

/* ---------------------------------------------------------------------
   Training mega panel

   One item in the inline nav carries a panel of cards instead of just a
   link. Built to the same language as the homepage hero: dark glass over
   the photography, desaturated imagery that comes back to full colour on
   hover, display type in caps.

   The panel is positioned against the HEADER, not against its own list
   item, so it can run the full width of the viewport — which is why the
   item is forced back to `position: static`.
   ------------------------------------------------------------------- */

.wk9-header__menu .wk9-header__item--mega {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--k9-space-2);
}

.wk9-header__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--k9-text);
    cursor: pointer;
    opacity: 0.68;
    /* The nav's text-shadow keeps the labels crisp over a photograph; an SVG
       needs the drop-shadow filter to get the same treatment. */
    filter: drop-shadow(0 1px 8px rgba(var(--k9-black-rgb), 0.55));
    transition:
        transform var(--k9-duration) var(--k9-ease),
        opacity var(--k9-duration-fast) var(--k9-ease);
}

.wk9-header__caret:hover { opacity: 1; }

.wk9-header__item--mega.is-open .wk9-header__caret {
    opacity: 1;
    transform: rotate(180deg);
}

/* The bar takes its solid ground while the panel is down — a transparent
   header with an opaque panel hanging off it reads as two loose objects. */
.wk9-header.has-mega {
    background: rgba(var(--k9-black-rgb), 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.wk9-header.has-mega::before,
.wk9-header.has-mega::after { background: var(--k9-line); }

/* Panel --------------------------------------------------------------- */

.wk9-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Nearly opaque on purpose. The hero's glass panels sit over their own
       photograph; this one sits over live page content, and at the header's
       own 0.86 the headline underneath read straight through the menu. */
    background: rgba(var(--k9-black-rgb), 0.99);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border-bottom: 1px solid var(--k9-line);
    box-shadow: var(--k9-shadow-4);
    opacity: 0;
    transform: translateY(-10px);
    /* Nothing in the panel is clickable until it is actually open, so a
       half-faded panel can never swallow a click meant for the page. */
    pointer-events: none;
    transition:
        opacity var(--k9-duration) var(--k9-ease),
        transform var(--k9-duration) var(--k9-ease);
}

.wk9-mega[hidden] { display: none; }

.wk9-header__item--mega.is-open .wk9-mega {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.wk9-mega__inner {
    width: min(1560px, 100%);
    margin: 0 auto;
    padding: var(--k9-space-6) var(--k9-gutter);
    /* The rail sits BESIDE the cards rather than above them. Stacked, the
       panel ran most of the height of the screen; alongside, the whole thing
       is as tall as one row of cards. */
    display: grid;
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
    align-items: center;
    gap: var(--k9-space-10);
}

/* Rail ---------------------------------------------------------------- */

.wk9-mega__head {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--k9-space-4);
}

.wk9-mega__headtext {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k9-space-2);
}

.wk9-mega__eyebrow {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--k9-space-3);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-muted);
}

.wk9-mega__rule {
    display: block;
    width: 28px;
    height: 1px;
    flex: 0 0 28px;
    background: var(--k9-text-muted);
}

.wk9-mega__intro {
    margin: 0;
    font-size: var(--k9-text-body-sm);
    line-height: var(--k9-leading-body);
    color: var(--k9-text-secondary);
}

.wk9-mega__all {
    display: inline-flex;
    align-items: center;
    gap: var(--k9-space-3);
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 var(--k9-space-4);
    border: 1px solid var(--k9-line-strong);
    border-radius: var(--k9-radius-pill);
    text-decoration: none;
    color: var(--k9-text);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        background var(--k9-duration-fast) var(--k9-ease),
        border-color var(--k9-duration-fast) var(--k9-ease),
        color var(--k9-duration-fast) var(--k9-ease);
}

.wk9-mega__all:hover {
    background: var(--k9-action);
    border-color: var(--k9-action);
    color: var(--k9-action-text);
}

.wk9-mega__all svg { transition: transform var(--k9-duration) var(--k9-ease); }
.wk9-mega__all:hover svg { transform: translate(2px, -2px); }

/* Cards --------------------------------------------------------------- */

.wk9-mega__grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--k9-space-4);
}

/* Four cards: one row on wide screens, 2 × 2 below that — never 3 + 1. */
.wk9-mega__grid:has(> .wk9-mega__item:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1279px) {
    .wk9-mega__grid:has(> .wk9-mega__item:nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wk9-mega__item { margin: 0; }

/* Photograph beside the label, the way the reference reads — and the reason
   the whole panel is one card tall. */
.wk9-mega__card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: stretch;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--k9-line);
    border-radius: var(--k9-radius-lg);
    background: var(--k9-surface-card);
    text-decoration: none;
    transition:
        transform var(--k9-duration) var(--k9-ease),
        border-color var(--k9-duration) var(--k9-ease),
        background var(--k9-duration) var(--k9-ease);
}

.wk9-mega__card:hover {
    transform: translateY(-3px);
    border-color: var(--k9-line-strong);
    background: var(--k9-surface-card-2);
}

.wk9-mega__media {
    position: relative;
    display: block;
    overflow: hidden;
    /* Square, and stretched to whatever height the label needs — a fixed
       aspect-ratio would leave a gap under a three-line description. */
    min-height: 118px;
    background: var(--k9-surface-inset);
}

/* Two classes deep on purpose. BeTheme ships
   `img:not([src$=".svg"]) { max-width:100%; height:auto }` — a :not() carries
   the specificity of its argument, so that rule is (0,1,1) and a single class
   loses to it, collapsing the cover image to its intrinsic aspect. */
.wk9-mega .wk9-mega__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /* Photography is the only colour in the system, so it arrives held back
       and comes forward when the card is the one being considered. */
    filter: saturate(0.5) contrast(1.06);
    transform: scale(1.02);
    transition:
        transform 700ms var(--k9-ease),
        filter 700ms var(--k9-ease);
}

.wk9-mega__card:hover .wk9-mega__img {
    filter: saturate(1) contrast(1.06);
    transform: scale(1.07);
}

/* A card with no photograph still has to look deliberate. */
.wk9-mega__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    background: radial-gradient(120% 90% at 50% 0%, var(--k9-ink-700) 0%, var(--k9-black) 70%);
}

.wk9-mega__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(var(--k9-black-rgb), 0.78) 0%,
        rgba(var(--k9-black-rgb), 0.12) 55%,
        rgba(var(--k9-black-rgb), 0) 100%
    );
}

.wk9-mega__index {
    position: absolute;
    left: var(--k9-space-3);
    bottom: var(--k9-space-2);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    font-variant-numeric: tabular-nums;
    color: var(--k9-text-secondary);
}

.wk9-mega__body {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--k9-space-1);
    padding: var(--k9-space-4) var(--k9-space-5);
}

.wk9-mega__title {
    display: block;
    /* Room for the corner arrow, which is absolute and would otherwise sit
       on top of a two-line title. */
    padding-right: var(--k9-space-6);
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-title-sm);
    line-height: var(--k9-leading-title);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-text);
}

/* Clamped rather than trusted: this is a menu, and one long description
   should not be able to make the whole panel taller. */
.wk9-mega__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--k9-text-caption);
    line-height: var(--k9-leading-body);
    color: var(--k9-text-muted);
}

.wk9-mega__go {
    position: absolute;
    top: var(--k9-space-4);
    right: var(--k9-space-4);
    display: inline-flex;
    color: var(--k9-text-faint);
    transition:
        transform var(--k9-duration) var(--k9-ease),
        color var(--k9-duration) var(--k9-ease);
}

.wk9-mega__card:hover .wk9-mega__go {
    color: var(--k9-text);
    transform: translate(3px, -3px);
}

/* The shared focus ring rounds everything it touches to radius-xs, which is
   wrong on a card and on a pill. (0,3,0) beats the (0,2,1) it is overriding. */
.wk9-header .wk9-mega__card:focus-visible { border-radius: var(--k9-radius-lg); }
.wk9-header .wk9-mega__all:focus-visible { border-radius: var(--k9-radius-pill); }

/* text-transform and letter-spacing inherit, and the bar sets both on the
   list item this panel hangs from. Without this the descriptions come out in
   letter-spaced capitals. */
.wk9-mega {
    text-transform: none;
    letter-spacing: normal;
}

/* Entrance ------------------------------------------------------------
   The contents come in behind the panel rather than with it, so the cards
   are not sliding in over open space. Delays are nth-child, so a panel of
   three and a panel of four both stagger without being numbered. */

.wk9-mega__head,
.wk9-mega__item {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--k9-duration-slow) var(--k9-ease),
        transform var(--k9-duration-slow) var(--k9-ease);
}

.wk9-header__item--mega.is-open .wk9-mega__head,
.wk9-header__item--mega.is-open .wk9-mega__item {
    opacity: 1;
    transform: none;
}

.wk9-header__item--mega.is-open .wk9-mega__head { transition-delay: 60ms; }
.wk9-header__item--mega.is-open .wk9-mega__item:nth-child(1) { transition-delay: 110ms; }
.wk9-header__item--mega.is-open .wk9-mega__item:nth-child(2) { transition-delay: 165ms; }
.wk9-header__item--mega.is-open .wk9-mega__item:nth-child(3) { transition-delay: 220ms; }
.wk9-header__item--mega.is-open .wk9-mega__item:nth-child(n + 4) { transition-delay: 275ms; }

/* Three cards and a rail need real width. Below this the rail goes back on
   top, as a single line, and the cards take the full measure. */
@media (max-width: 1320px) {
    .wk9-mega__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--k9-space-5);
        padding: var(--k9-space-5) var(--k9-gutter) var(--k9-space-6);
    }

    .wk9-mega__head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: var(--k9-space-5);
    }

    .wk9-mega__intro { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    /* Still hides — it just does not slide. */
    .wk9-header { transition: none; }

    .wk9-mega,
    .wk9-mega__card,
    .wk9-mega .wk9-mega__img,
    .wk9-mega__go,
    .wk9-header__caret { transition: none; }

    /* Nothing may be left waiting on a transition that never runs. */
    .wk9-mega__head,
    .wk9-mega__item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------------
   Slide-out drawer

   Built to the Figma slide-over (node 24:62). Row numbers and the corner
   arrow are drawn in CSS rather than markup, so a menu built in
   Appearance → Menus styles identically to the built-in fallback — neither
   knows it is being numbered.
   ------------------------------------------------------------------- */

.wk9-navdrawer {
    position: fixed;
    inset: 0;
    z-index: var(--k9-z-drawer);
    font-family: var(--k9-font-body);
}

/* The header sets this for its own subtree; the drawer is a sibling, so it
   needs its own. Without it the panel's 48px padding is added OUTSIDE the
   540px width and the drawer comes out 636px wide. */
.wk9-navdrawer,
.wk9-navdrawer *,
.wk9-navdrawer *::before,
.wk9-navdrawer *::after { box-sizing: border-box; }

.wk9-navdrawer[hidden] { display: none; }

.wk9-navdrawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(var(--k9-black-rgb), 0.68);
    opacity: 0;
    transition: opacity var(--k9-duration-slow) var(--k9-ease);
}

.wk9-navdrawer__panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(540px, 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--k9-space-10);
    padding: var(--k9-space-10) var(--k9-space-12) var(--k9-space-12);
    background: var(--k9-surface-inset);
    border-left: 1px solid var(--k9-line);
    box-shadow: var(--k9-shadow-4);
    transform: translateX(100%);
    transition: transform var(--k9-duration-slow) var(--k9-ease-spring);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wk9-navdrawer.is-open .wk9-navdrawer__scrim { opacity: 1; }
.wk9-navdrawer.is-open .wk9-navdrawer__panel { transform: translateX(0); }

/* Staggered entrance -------------------------------------------------
   The contents come in behind the panel, one after another. Delays are
   nth-child rather than a per-item custom property, so a menu built in
   Appearance → Menus staggers without anything having to number it.

   The hidden state is scoped to .wk9-navdrawer, which only exists while the
   drawer is in the DOM — so there is no way for these to strand something
   invisible on the page itself. */
.wk9-navdrawer__head,
.wk9-navdrawer__menu > li,
.wk9-navdrawer__cta,
.wk9-navdrawer__foot > * {
    opacity: 0;
    transform: translateX(18px);
    transition:
        opacity var(--k9-duration-slow) var(--k9-ease),
        transform var(--k9-duration-slow) var(--k9-ease);
}

.wk9-navdrawer.is-open .wk9-navdrawer__head,
.wk9-navdrawer.is-open .wk9-navdrawer__menu > li,
.wk9-navdrawer.is-open .wk9-navdrawer__cta,
.wk9-navdrawer.is-open .wk9-navdrawer__foot > * {
    opacity: 1;
    transform: none;
}

/* The panel itself takes ~280ms to arrive; everything inside starts after it
   so the content is not sliding in over open space. */
.wk9-navdrawer.is-open .wk9-navdrawer__head { transition-delay: 120ms; }

.wk9-navdrawer.is-open .wk9-navdrawer__menu > li:nth-child(1) { transition-delay: 180ms; }
.wk9-navdrawer.is-open .wk9-navdrawer__menu > li:nth-child(2) { transition-delay: 235ms; }
.wk9-navdrawer.is-open .wk9-navdrawer__menu > li:nth-child(3) { transition-delay: 290ms; }
.wk9-navdrawer.is-open .wk9-navdrawer__menu > li:nth-child(4) { transition-delay: 345ms; }
.wk9-navdrawer.is-open .wk9-navdrawer__menu > li:nth-child(5) { transition-delay: 400ms; }
.wk9-navdrawer.is-open .wk9-navdrawer__menu > li:nth-child(6) { transition-delay: 455ms; }
.wk9-navdrawer.is-open .wk9-navdrawer__menu > li:nth-child(n + 7) { transition-delay: 510ms; }

.wk9-navdrawer.is-open .wk9-navdrawer__cta { transition-delay: 560ms; }

.wk9-navdrawer.is-open .wk9-navdrawer__foot > *:nth-child(1) { transition-delay: 610ms; }
.wk9-navdrawer.is-open .wk9-navdrawer__foot > *:nth-child(2) { transition-delay: 655ms; }
.wk9-navdrawer.is-open .wk9-navdrawer__foot > *:nth-child(3) { transition-delay: 700ms; }

/* Head --------------------------------------------------------------- */

.wk9-navdrawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
}

.wk9-navdrawer__logo { display: block; line-height: 0; }

.wk9-navdrawer__logo .wk9-header__logo-svg,
.wk9-navdrawer__logo .wk9-header__logo-img {
    height: 58px;
    width: auto;
    color: var(--k9-text);
}

.wk9-navdrawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--k9-radius-pill);
    background: transparent;
    color: var(--k9-text);
    cursor: pointer;
    transition: background var(--k9-duration-fast) var(--k9-ease);
}

.wk9-navdrawer__close:hover { background: var(--k9-surface-hover); }

/* Body --------------------------------------------------------------- */

.wk9-navdrawer__body {
    display: flex;
    flex-direction: column;
    gap: var(--k9-space-10);
    flex: 0 0 auto;
}

.wk9-navdrawer__menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    /* Drives the 01/02/03 row numbers below. */
    counter-reset: wk9-nav;
    border-top: 1px solid var(--k9-line-subtle);
}

/* Direct children only, so a menu built in Appearance → Menus with sub-items
   cannot pull them into the numbering or the display type. */
.wk9-navdrawer__menu > li {
    margin: 0;
    counter-increment: wk9-nav;
    border-bottom: 1px solid var(--k9-line-subtle);
}

.wk9-navdrawer__menu > li > a {
    display: flex;
    align-items: center;
    gap: var(--k9-space-5);
    padding: var(--k9-space-6) 0;
    text-decoration: none;
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-title-lg);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-grey-100);
    transition: color var(--k9-duration-fast) var(--k9-ease);
}

/* Row number. decimal-leading-zero is what gives 01…09 without any PHP. */
.wk9-navdrawer__menu > li > a::before {
    content: counter(wk9-nav, decimal-leading-zero);
    flex: 0 0 auto;
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-semibold);
    letter-spacing: var(--k9-tracking-micro);
    color: var(--k9-text-faint);
    transition: color var(--k9-duration-fast) var(--k9-ease);
}

/* Corner arrow, pushed to the right end. A mask rather than a background
   image so it takes currentColor and can change on hover. */
.wk9-navdrawer__menu > li > a::after {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-left: auto;
    background: currentColor;
    color: var(--k9-text-faint);
    -webkit-mask: var(--wk9-arrow) center / contain no-repeat;
    mask: var(--wk9-arrow) center / contain no-repeat;
    transition: transform var(--k9-duration) var(--k9-ease);
}

.wk9-navdrawer__menu {
    --wk9-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.4L10.4 3.6M10.4 9.1V3.6H4.9'/%3E%3C/svg%3E");
}

.wk9-navdrawer__menu > li > a:hover,
.wk9-navdrawer__menu > li > a:focus-visible { color: var(--k9-text); }

.wk9-navdrawer__menu > li > a:hover::before,
.wk9-navdrawer__menu > li > a:focus-visible::before { color: var(--k9-text-secondary); }

.wk9-navdrawer__menu > li > a:hover::after,
.wk9-navdrawer__menu > li > a:focus-visible::after { transform: translate(3px, -3px); }

.wk9-navdrawer__menu > .current-menu-item > a { color: var(--k9-text); }


.wk9-navdrawer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    width: 100%;
    padding: 0 var(--k9-space-6);
    border-radius: var(--k9-radius-pill);
    background: var(--k9-action);
    color: var(--k9-action-text);
    font-size: var(--k9-text-caption);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--k9-duration-fast) var(--k9-ease);
}

.wk9-navdrawer__cta:hover { background: var(--k9-action-hover); }

/* Foot --------------------------------------------------------------- */

.wk9-navdrawer__foot {
    display: flex;
    flex-direction: column;
    gap: var(--k9-space-6);
    flex: 0 0 auto;
}

.wk9-navdrawer__wa {
    display: inline-flex;
    align-items: center;
    gap: var(--k9-space-3);
    text-decoration: none;
    color: var(--k9-text);
    font-size: var(--k9-text-body-sm);
    font-weight: var(--k9-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.wk9-navdrawer__wa svg { color: var(--k9-whatsapp); flex: 0 0 20px; }

.wk9-navdrawer__meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-size: var(--k9-text-body-sm);
    line-height: 1.7;
    color: var(--k9-text-muted);
}

.wk9-navdrawer__social {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--k9-space-6);
}

.wk9-navdrawer__social a {
    text-decoration: none;
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-semibold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-faint);
    transition: color var(--k9-duration-fast) var(--k9-ease);
}

.wk9-navdrawer__social a:hover { color: var(--k9-text); }

/* ---------------------------------------------------------------------
   Focus
   ------------------------------------------------------------------- */

.wk9-header a:focus-visible,
.wk9-header button:focus-visible,
.wk9-navdrawer a:focus-visible,
.wk9-navdrawer button:focus-visible {
    outline: none;
    box-shadow: var(--k9-focus-ring);
    border-radius: var(--k9-radius-xs);
}

/* ---------------------------------------------------------------------
   Responsive

   The inline nav and the phone number are the first things to go: the
   drawer already carries every one of those links, so nothing is lost.
   ------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .wk9-header__menu { gap: var(--k9-space-4); }
    .wk9-header__wa-text { display: none; }
}

@media (max-width: 900px) {
    .wk9-header { --wk9-header-h: 84px; }
    .wk9-header__brand { transform: translateY(11px); }
    .wk9-header__nav { display: none; }
    .wk9-header__inner { grid-template-columns: 1fr auto 1fr; }
    .wk9-header .wk9-header__logo-img,
    .wk9-header__logo-svg { height: 62px; }
}

/* Phones and small tablets: WhatsApp | logo | menu.

   With the inline nav gone the grid's first column would be empty, pulling
   the logo left and bunching the actions on the right. Instead the actions
   wrapper steps aside (display: contents) so WhatsApp and the burger become
   grid items of their own, either side of a truly centred logo. Booking
   lives in the hero and the drawer at this size, so the pill goes. */
@media (max-width: 900px) {
    .wk9-header__inner { grid-template-columns: 1fr auto 1fr; }
    .wk9-header__actions { display: contents; }
    .wk9-header__book { display: none; }

    .wk9-header__wa {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    .wk9-header__brand { grid-column: 2; grid-row: 1; }
    .wk9-burger {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        /* The bars sit left inside the button; nudge so their right edge
           lines up with the gutter, mirroring the WhatsApp circle. */
        margin-right: -10px;
    }

    /* A 44px circle: a proper tap target, and the same visual weight as
       the burger opposite it. */
    .wk9-header .wk9-header__wa-icon {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
    .wk9-header__wa-icon svg { width: 22px; height: 22px; }
}

@media (max-width: 620px) {
    .wk9-header__actions { gap: var(--k9-space-2); }
    .wk9-navdrawer__panel {
        padding: var(--k9-space-6) var(--k9-space-6) var(--k9-space-8);
        gap: var(--k9-space-8);
    }
    .wk9-navdrawer__body { gap: var(--k9-space-8); }
    .wk9-navdrawer__menu > li > a {
        font-size: var(--k9-text-title-md);
        padding: var(--k9-space-5) 0;
    }
    .wk9-navdrawer__logo .wk9-header__logo-svg,
    .wk9-navdrawer__logo .wk9-header__logo-img { height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .wk9-header,
    .wk9-header__menu a::after,
    .wk9-navdrawer__scrim,
    .wk9-navdrawer__panel,
    .wk9-navdrawer__menu > li > a,
    .wk9-burger__bar { transition: none; }

    /* Nothing may be left hidden waiting for a transition that never runs. */
    .wk9-navdrawer__head,
    .wk9-navdrawer__menu > li,
    .wk9-navdrawer__cta,
    .wk9-navdrawer__foot > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .wk9-header__wa-dot::after { animation: none; opacity: 0; }
}