/* ==========================================================================
   OneTownCity — Design System
   One consistent, soft, premium visual language shared by every module.

   Design tokens (color/type/spacing/radius/shadow scales, light + dark) now
   live in tokens.css, loaded before this file — see base.html. Every rule
   below should read a --hk-* / --bs-* custom property from there rather than
   a literal value; that's what lets a single token change re-theme every
   module at once.
   ========================================================================== */

/* --- Base ------------------------------------------------------------ */
body {
    font-family: var(--bs-body-font-family);
    background-color: var(--bs-body-bg);
    color: var(--hk-ink);
    /* Compensates for the always-fixed navbar (see #hkNavbar below) so no
       page content ever starts underneath it. The homepage hero is the one
       deliberate exception — it wants to render full-bleed behind the glass
       navbar — so it cancels this via body.hk-has-transparent-hero. Reserves
       the floating island's top inset (16px) + its height (64px) + a small
       breathing gap before content (16px). */
    padding-top: 96px;
    /* AOS's fade-left/fade-right entrance animations (used throughout
       home/about/history) sit at a translateX(±100px)-ish offset before
       they scroll into view and trigger. Sections below the fold still
       carry that offset, which was pushing the document's scrollable width
       past the real viewport on narrow phones — Chrome/Safari mobile then
       auto-zoom the whole page out to fit, which is the "everything is
       shrunk and both edges are cropped" bug reported on iPhone widths.
       Clipping horizontal overflow here is the standard fix: it doesn't
       change any visible layout, it just stops the still-off-screen,
       about-to-animate-in copies from counting toward page width. */
    overflow-x: hidden;
}

body.hk-has-transparent-hero {
    padding-top: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hk-font-heading);
    font-weight: 600;
    color: var(--hk-ink);
    letter-spacing: -0.01em;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

a {
    transition: color .15s ease;
}

/* --- Ripple buttons ---------------------------------------------------- */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
}

.btn:active::after {
    opacity: 1;
    transform: scale(1.4);
    transition: 0s;
}

/* --- Shared reveal animation (paired with AOS, provides a CSS-only fallback) --- */
@keyframes hk-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hk-scale-in {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
}

/* --- Navbar ----------------------------------------------------------------
   Always position:fixed (every page, not just the homepage) so it can never
   be scrolled out of view, with a high z-index above ordinary content —
   below Bootstrap modals/tooltips (1055+) so those still layer correctly.
   body { padding-top } above reserves the matching space so nothing ends up
   hidden underneath it; the one exception is the homepage hero, which wants
   to render full-bleed behind the glass navbar (see .hk-has-transparent-hero
   and the hero's own negative margin, set via main.js).

   Two skins share this markup:
   - .hk-navbar-transparent  → homepage only, floats over the hero image
   - default (no modifier)   → every other page, glass-over-content
   .hk-navbar-solid is added by main.js once the user scrolls the transparent
   variant past the hero, cross-fading it into the same glass look the
   default skin already has. ---------------------------------------------- */
.navbar {
    position: fixed !important;
    top: var(--hk-space-4) !important;
    left: var(--hk-space-4);
    right: var(--hk-space-4);
    max-width: 1280px;
    margin: 0 auto;
    height: 64px;
    z-index: var(--hk-z-nav);
    padding-top: 0;
    padding-bottom: 0;
    border-radius: var(--hk-radius-xl);
    border: 1px solid transparent;
    transition: background-color var(--hk-duration-base) var(--hk-ease-out),
                color var(--hk-duration-base) var(--hk-ease-out),
                box-shadow var(--hk-duration-base) var(--hk-ease-out),
                backdrop-filter var(--hk-duration-base) var(--hk-ease-out),
                border-color var(--hk-duration-base) var(--hk-ease-out);
}

/* Bootstrap attaches flex layout to .navbar > .container-fluid already;
   this just lets it fill the island's full inner width/height. */
.hk-navbar-inner {
    height: 100%;
}

/* Below lg, .hk-navbar-inner's contents wrap onto a second row (brand pill,
   then the location button + hamburger below it) — but .navbar's height
   above stays a hardcoded 64px with overflow: visible, so that second row
   was rendering ~20px below the navbar's own white/glass background box
   instead of inside it: no backdrop behind it at all, just sitting directly
   on whatever page content happened to be underneath (misread as the
   navbar being "see-through" — it wasn't transparency, the box was
   genuinely too short to contain its own content). min-height instead of a
   fixed height lets the box grow to actually fit both rows. */
@media (max-width: 991.98px) {
    .navbar {
        height: auto;
        min-height: 64px;
    }

}

/* Below 414px the brand pill + location button + hamburger no longer fit
   on the navbar's one row (Bootstrap's default .navbar/.container-fluid
   flex-wrap), so they dropped to a second row — leaving the navbar much
   taller than the 64px body's padding-top assumed, and content (most
   visibly the dashboard's own menu button/title) rendering jammed right
   underneath it. Trimming the brand/location/hamburger padding and
   capping the location button's width reclaims just enough space for
   all three to stay on one row instead, down to a 320px viewport —
   preserving the single-row 64px navbar (and the existing body
   padding-top) instead of compensating for a taller one. */
@media (max-width: 413.98px) {
    /* Bootstrap's own .navbar-brand ships a built-in margin-right: 1rem,
       never reset here since .hk-navbar-inner's space-between already
       handles the brand/actions spacing — but that extra 16px was exactly
       what pushed the one-row total past the container width and forced
       the wrap this whole block exists to prevent. */
    .navbar-brand {
        margin-right: 0;
    }

    .navbar-toggler {
        padding: .25rem .5rem;
    }

    .hk-navbar-inner > .d-flex {
        gap: .35rem !important;
    }
}

/* Extra breathing room on the smallest phones, on top of
   .hk-location-trigger collapsing to icon-only below (same breakpoint) —
   shaving a little more off the hamburger and the gap next to it. Same
   specificity as the 413.98px block above; narrower query placed after it
   so it wins down here. */
@media (max-width: 349.98px) {
    .navbar-toggler {
        padding: .25rem .35rem;
    }

    .hk-navbar-inner > .d-flex {
        gap: .25rem !important;
    }
}

/* .72 alpha relies on the backdrop-filter blur below to make whatever
   scrolls underneath unrecognizable — without it (older browsers, some
   Android WebViews, "reduce transparency" accessibility settings, or just
   a phone where it renders weakly) that content just fades through instead
   of blurring, visible as page content "ghosting" through the navbar as
   you scroll any page, not just the homepage. Raised to a near-opaque .96
   so the navbar reads correctly with or without the blur actually
   compositing. */
.navbar:not(.hk-navbar-transparent) {
    background-color: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--hk-elevation-4) !important;
    border-color: var(--hk-border-soft);
}

html[data-theme="dark"] .navbar:not(.hk-navbar-transparent) {
    background-color: rgba(15, 23, 42, .94) !important;
    border-color: rgba(255, 255, 255, .1);
}

.hk-navbar-transparent {
    background-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: var(--hk-elevation-3) !important;
    border-color: rgba(255, 255, 255, 0.14);
}

.hk-navbar-transparent .navbar-brand,
.hk-navbar-transparent .navbar-nav .nav-link {
    color: #fff !important;
}

.hk-navbar-transparent .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

.hk-navbar-transparent .nav-link:hover,
.hk-navbar-transparent .nav-link:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.16);
}

.hk-navbar-solid {
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--hk-elevation-4) !important;
    border-color: var(--hk-border-soft);
}

html[data-theme="dark"] .hk-navbar-solid {
    background-color: rgba(15, 23, 42, .94) !important;
    border-color: rgba(255, 255, 255, .1);
}

.navbar .hk-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--hk-radius-md);
    background: rgba(0, 0, 0, .03);
    border: 1px solid var(--hk-border-soft);
}

.navbar .hk-theme-toggle:hover {
    background: rgba(0, 0, 0, .06);
}

html[data-theme="dark"] .navbar .hk-theme-toggle {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .1);
    color: var(--hk-ink-soft);
}

html[data-theme="dark"] .navbar .hk-theme-toggle:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.hk-navbar-transparent .hk-theme-toggle {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.hk-navbar-transparent .hk-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.24);
}

.hk-navbar-transparent.hk-navbar-solid .hk-theme-toggle {
    background: var(--hk-surface);
    border-color: var(--hk-border-soft);
    color: var(--hk-ink-soft);
}

/* Once scrolled past the hero, .hk-navbar-solid is added alongside
   .hk-navbar-transparent (which is never removed) — override its white-text
   rules back to the normal dark navbar colors so text stays legible against
   the now-solid glass background. */
.hk-navbar-transparent.hk-navbar-solid .navbar-brand,
.hk-navbar-transparent.hk-navbar-solid .navbar-nav .nav-link {
    color: var(--hk-ink) !important;
}

/* --- Floating dropdown-panel switcher -------------------------------------
   Generic pattern now used only by the language switcher (base.html,
   palette-switcher.js) — trigger reuses .hk-theme-toggle's exact sizing/
   glass treatment so it sits flush with the dark/light toggle in every
   navbar state (solid, transparent-over-hero, mobile drawer). The panel is
   a floating card rendered in normal flow (not portaled — unlike
   .hk-select, this trigger never sits inside an overflow:hidden hero) that
   scales+fades in with the site's signature ease-out-expo curve. */
.hk-palette-switcher {
    position: relative;
}

.hk-palette-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 248px;
    z-index: var(--hk-z-dropdown);
    background: var(--hk-surface);
    border: 1px solid var(--hk-border-soft);
    border-radius: var(--hk-radius-lg);
    box-shadow: var(--hk-elevation-5);
    padding: var(--hk-space-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.97);
    transform-origin: top right;
    transition: opacity .35s var(--hk-ease-out), transform .35s var(--hk-ease-out), visibility 0s linear .35s;
}

.hk-palette-switcher.is-open .hk-palette-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .35s var(--hk-ease-out), transform .35s var(--hk-ease-out), visibility 0s;
}

.hk-palette-panel-label {
    font-size: var(--hk-text-xs);
    font-weight: 600;
    letter-spacing: var(--hk-tracking-wide);
    text-transform: uppercase;
    color: var(--hk-ink-soft);
    padding: 0 var(--hk-space-2) var(--hk-space-2);
}

/* --- Notification badge — small count pill anchored to the navbar profile
   avatar (the notification list itself lives on the dedicated
   notifications page, linked from the profile dropdown). */
.hk-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--hk-brand-gradient);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.hk-palette-option {
    display: flex;
    align-items: center;
    gap: var(--hk-space-3);
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--hk-radius-md);
    padding: var(--hk-space-2) var(--hk-space-3);
    text-align: left;
    transition: background .25s var(--hk-ease-out), border-color .25s var(--hk-ease-out);
}

.hk-palette-option:hover {
    background: var(--hk-gradient-soft);
}

.hk-palette-option.is-active {
    border-color: var(--hk-glow-ring-color);
    background: var(--hk-gradient-soft);
}

.hk-palette-option-text {
    flex: 1;
    min-width: 0;
}

.hk-palette-option-name {
    display: block;
    font-size: var(--hk-text-sm);
    font-weight: 600;
    color: var(--hk-ink);
    line-height: var(--hk-leading-tight);
}

.hk-palette-option-desc {
    display: block;
    font-size: var(--hk-text-xs);
    color: var(--hk-ink-soft);
    line-height: var(--hk-leading-snug);
}

.hk-palette-option-check {
    flex: none;
    opacity: 0;
    color: var(--bs-primary);
    transition: opacity .25s var(--hk-ease-out);
}

.hk-palette-option.is-active .hk-palette-option-check {
    opacity: 1;
}

/* Mobile drawer variant: same swatch buttons laid out as a compact row
   instead of the floating panel (the drawer is already a modal-like
   surface, so a nested popover would be redundant chrome). */
.hk-palette-row-mobile {
    display: flex;
    gap: var(--hk-space-2);
}

.hk-palette-row-mobile .hk-palette-option {
    flex-direction: column;
    align-items: center;
    gap: var(--hk-space-1);
    padding: var(--hk-space-2);
    border: 1px solid var(--hk-border-soft);
}

.hk-palette-row-mobile .hk-palette-option-name {
    font-size: 10px;
    text-align: center;
}

.hk-palette-row-mobile .hk-palette-option-desc,
.hk-palette-row-mobile .hk-palette-option-check {
    display: none;
}

.hk-navbar-transparent.hk-navbar-solid .hk-logo-shell {
    border-color: rgba(15, 23, 42, .07);
    background: rgba(15, 23, 42, .02);
}

.hk-navbar-transparent.hk-navbar-solid .hk-logo-shell:hover {
    border-color: rgba(15, 23, 42, .14);
    background: rgba(15, 23, 42, .04);
}

html[data-theme="dark"] .hk-navbar-transparent.hk-navbar-solid .hk-logo-shell {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03);
}

html[data-theme="dark"] .hk-navbar-transparent.hk-navbar-solid .hk-logo-shell:hover {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .05);
}


.hk-navbar-transparent.hk-navbar-solid .navbar-toggler-icon {
    filter: none;
}

.hk-navbar-transparent.hk-navbar-solid .nav-link:hover,
.hk-navbar-transparent.hk-navbar-solid .nav-link:focus {
    color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--hk-font-heading);
    letter-spacing: var(--hk-tracking-tight);
    color: var(--hk-ink) !important;
}

/* No logotype SVG mark anymore — the wordmark is text-only. .hk-brand-mark
   still wraps the small contextual Bootstrap-icon badges on the auth pages
   (login.html / signin.html), so the class itself stays. */
.hk-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    transition: opacity var(--hk-duration-base) var(--hk-ease-out);
}

/* Single wrapper around "One" + "TownCity" — keeps the wordmark one flex
   item (not two), so .navbar-brand's gap only ever falls between the icon
   and the text, never inside the brand name itself. */
.hk-brand-word {
    display: inline-flex;
    align-items: baseline;
    font-size: 1.2rem;
    letter-spacing: var(--hk-tracking-tighter);
}

.hk-brand-word-one {
    font-weight: 500;
    color: inherit;
}

/* Premium glass chip around the logo assembly — a subtle inset card inside
   the navbar island, not a second heavy pill. Light/dark tuned separately
   since the bare rgba values read very differently on each surface. */
.hk-logo-shell {
    padding: .5rem 1rem;
    border-radius: var(--hk-radius-lg);
    border: 1px solid rgba(15, 23, 42, .07);
    background: rgba(15, 23, 42, .02);
    transition: transform var(--hk-duration-base) var(--hk-ease-out),
                border-color var(--hk-duration-base) var(--hk-ease-out),
                background-color var(--hk-duration-base) var(--hk-ease-out);
}

/* Must come after the base rule above (same specificity, narrower query —
   source order decides) — part of the one-row-navbar fix at 413.98px,
   see .navbar-toggler / .hk-navbar-inner > .d-flex nearer the top. */
@media (max-width: 413.98px) {
    .hk-logo-shell {
        padding: .5rem .6rem;
    }
}

.hk-logo-shell:hover {
    transform: scale(1.02);
    border-color: rgba(15, 23, 42, .14);
    background: rgba(15, 23, 42, .04);
}

html[data-theme="dark"] .hk-logo-shell {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03);
}

html[data-theme="dark"] .hk-logo-shell:hover {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .05);
}

/* The transparent hero navbar sits on a permanently dark backdrop
   regardless of the site-wide theme toggle, so its shell always uses the
   dark-surface treatment. */
.hk-navbar-transparent .hk-logo-shell {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
}

.hk-navbar-transparent .hk-logo-shell:hover {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .08);
}

.navbar-nav .nav-link {
    font-weight: 500;
    font-size: var(--hk-text-sm);
    /* Crisp/high-contrast permanently — not --hk-ink-soft, which reads as
       faint/washed-out and made resting links look inconsistent next to the
       bold accent color used on hover/active (see nav_categories.html and
       auth-state avatar/sign-in swap, none of which should affect this). */
    color: var(--hk-ink) !important;
    padding: .45rem 1.1rem !important;
    border-radius: var(--hk-radius-md);
    border: 1px solid transparent;
    transition: color var(--hk-duration-fast) var(--hk-ease-out),
                background-color var(--hk-duration-fast) var(--hk-ease-out);
    position: relative;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle);
}

.hk-navbar-transparent .navbar-nav .nav-link:hover,
.hk-navbar-transparent .navbar-nav .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.16);
}

.navbar-nav .nav-link.active {
    font-weight: 600;
    color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle);
}

.hk-navbar-transparent:not(.hk-navbar-solid) .navbar-nav .nav-link.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.16);
}

/* Dark theme: monochrome white/slate premium look (instead of the blue
   accent used in light theme) — matches the floating glass island's
   high-end SaaS chrome rather than a marketing-site nav. */
html[data-theme="dark"] .navbar-nav .nav-link:hover,
html[data-theme="dark"] .navbar-nav .nav-link:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .navbar-nav .nav-link.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .05);
}

.navbar-nav .nav-link.btn {
    padding: .55rem 1.15rem !important;
}

/* --- Navbar profile dropdown -------------------------------------------------
   Deliberately skips Bootstrap's .dropdown-toggle class (see base.html) —
   that class is what draws the default browser-select-style caret. Only
   data-bs-toggle="dropdown" is needed to wire up the show/hide JS. --------- */
.hk-navbar-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hk-gray-100);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: var(--hk-elevation-2);
    cursor: pointer;
    transition: transform var(--hk-duration-fast) var(--hk-ease-out), box-shadow var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-navbar-avatar-btn:hover,
.hk-navbar-avatar-btn:focus-visible {
    transform: scale(1.05);
    box-shadow: var(--hk-elevation-2), 0 0 0 3px rgba(249, 115, 22, .18);
}

html[data-theme="dark"] .hk-navbar-avatar-btn {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .10);
}

.hk-navbar-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.hk-navbar-avatar-initial {
    font-family: var(--hk-font-sans);
    color: var(--hk-ink);
    font-weight: 700;
    font-size: var(--hk-text-sm);
    line-height: 1;
}

.navbar .dropdown-menu,
.hk-nav-drawer .dropdown-menu {
    border: 1px solid var(--hk-border-soft);
    border-radius: var(--hk-radius-lg);
    box-shadow: var(--hk-elevation-4);
    background-color: var(--hk-surface);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: .5rem;
    margin-top: .5rem !important;
    min-width: 220px;
    animation: hk-scale-in var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-nav-cat-menu {
    max-height: 70vh;
    overflow-y: auto;
    min-width: 260px;
}

.hk-nav-drawer .hk-nav-cat-menu {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.hk-nav-cat-menu .dropdown-item i {
    width: 1.1em;
    display: inline-block;
    text-align: center;
    margin-right: .25rem;
}

.hk-navbar-profile-label {
    padding: .4rem .7rem .5rem;
    font-size: var(--hk-text-xs);
    font-weight: 700;
    color: var(--hk-ink-soft);
    text-transform: uppercase;
    letter-spacing: var(--hk-tracking-widest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: var(--hk-radius-xs);
    padding: .55rem .7rem;
    font-size: var(--hk-text-sm);
    font-weight: 500;
    color: var(--hk-ink-soft);
    transition: background-color var(--hk-duration-fast) var(--hk-ease-out), color var(--hk-duration-fast) var(--hk-ease-out);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.hk-dropdown-badge {
    min-width: 20px;
    padding: .15rem .4rem;
    border-radius: 999px;
    background: var(--hk-brand-gradient);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

/* --- Mobile navigation drawer (Bootstrap Offcanvas, right-hand slide-in) ----- */
.hk-nav-drawer {
    width: min(320px, 86vw);
    background: var(--hk-surface);
    border-left: 1px solid var(--hk-border-soft);
    z-index: var(--hk-z-drawer);
}

.hk-nav-drawer .offcanvas-header {
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid var(--hk-border-soft);
}

.hk-nav-drawer .offcanvas-body {
    overflow-x: hidden;
    padding: 1.1rem 1rem 1.6rem;
    display: flex;
    flex-direction: column;
}

.hk-nav-drawer .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem !important;
    border-radius: var(--hk-radius-sm);
    font-weight: 600;
    font-size: var(--hk-text-md);
    color: var(--hk-ink) !important;
}

.hk-nav-drawer .nav-link:hover,
.hk-nav-drawer .nav-link:focus,
.hk-nav-drawer .nav-link.active {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary) !important;
}

.hk-nav-drawer .hk-nav-drawer-divider {
    height: 1px;
    background: var(--hk-border-soft);
    margin: .85rem 0;
    border: none;
}

.hk-nav-drawer .hk-nav-drawer-footer {
    margin-top: auto;
    padding-top: 1rem;
}

.offcanvas-backdrop {
    backdrop-filter: blur(2px);
}

/* --- Messages ------------------------------------------------------------ */
.alert {
    border-radius: var(--bs-border-radius-lg);
    border: none;
}

/* --- Toast notifications (Django messages framework) ---------------------
   Floating stack, top-right, below the fixed navbar — see base.html. Card
   background/border read straight off --hk-surface / --hk-border-soft, the
   same tokens every other themed surface uses, so light mode gets a clean
   white card and dark mode gets the deep slate surface + hairline border
   for free, no separate [data-theme="dark"] override needed here. */
.hk-toast-stack {
    position: fixed;
    top: calc(64px + var(--hk-space-4) * 2);
    right: var(--hk-space-4);
    z-index: var(--hk-z-toast);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.hk-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    max-width: 360px;
    padding: .85rem 1rem;
    border-radius: var(--hk-radius-md);
    background: var(--hk-surface);
    border: 1px solid var(--hk-border-soft);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .05), 0 4px 6px -4px rgba(0, 0, 0, .05);
    animation: hk-toast-in .3s var(--hk-ease-out) both;
}

.hk-toast.is-leaving {
    animation: hk-toast-out .3s var(--hk-ease-out) both;
}

.hk-toast-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    font-size: 1.05rem;
    line-height: 1;
}

.hk-toast-success .hk-toast-icon { color: var(--hk-emerald); }
.hk-toast-danger  .hk-toast-icon { color: var(--bs-danger); }
.hk-toast-warning .hk-toast-icon { color: var(--hk-gold); }
.hk-toast-info    .hk-toast-icon { color: var(--hk-sky); }

.hk-toast-message {
    flex: 1;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--hk-ink);
    padding-top: 2px;
}

.hk-toast-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--hk-ink-soft);
    font-size: .8rem;
    border-radius: var(--hk-radius-sm);
    transition: color .2s var(--hk-ease-out), background-color .2s var(--hk-ease-out);
}

.hk-toast-close:hover {
    color: var(--hk-ink);
    background: rgba(var(--bs-primary-rgb), .08);
}

@keyframes hk-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes hk-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(24px); }
}

@media (max-width: 576px) {
    .hk-toast-stack {
        left: var(--hk-space-4);
        right: var(--hk-space-4);
        width: auto;
    }

    .hk-toast {
        max-width: none;
    }
}

/* --- Push-notification "Enable" prompt --------------------------------------------------
   Injected by static/js/push-notifications.js, once per browser (dismissal
   is remembered in localStorage) — a bottom-anchored bar rather than the
   top-right .hk-toast-stack so it doesn't collide with real toasts, and
   persistent (no auto-dismiss timer) since it's a decision, not a status
   message. --------------------------------------------------------------- */
.hk-push-banner {
    position: fixed;
    left: 50%;
    bottom: var(--hk-space-4);
    z-index: var(--hk-z-toast);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem 1.25rem;
    width: min(560px, calc(100vw - 2rem));
    padding: .9rem 1.1rem;
    border-radius: var(--hk-radius-lg);
    background: var(--hk-surface);
    border: 1px solid var(--hk-border-soft);
    box-shadow: var(--hk-shadow-hover);
    transform: translate(-50%, 16px);
    opacity: 0;
    transition: transform .3s var(--hk-ease-out), opacity .3s var(--hk-ease-out);
    pointer-events: none;
}

.hk-push-banner.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.hk-push-banner-text {
    flex: 1 1 260px;
    font-size: .85rem;
    color: var(--hk-ink);
    line-height: 1.45;
}

.hk-push-banner-text i {
    color: var(--bs-primary);
    margin-right: .3rem;
}

.hk-push-banner-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
    margin-left: auto;
}

/* --- Hero ---------------------------------------------------------------
   .hk-hero is the shared compact gradient banner (About page, etc).
   .hk-hero-fullscreen is an additive modifier used only on the homepage,
   turning it into a full-bleed slide carousel with overlay. -------------- */
.hk-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--hk-gradient);
}

.hk-hero-fullscreen {
    min-height: 80vh;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    /* Guarantees clearance under the fixed transparent navbar even when the
       hero's own content (eyebrow + headline + search + stat tiles) is tall
       enough that vertical centering alone would push its top edge to y=0. */
    padding: 104px 0 48px;
}

/* --- Elite hero canvas ---------------------------------------------------
   Homepage-only. A flat, deep near-black base (no photography) layered with
   soft radial ambient glows in the brand's blue/violet family, plus a very
   faint grid texture for depth — the "premium tech platform" look, scoped
   to .hk-hero-elite so it never leaks into the compact .hk-hero banner
   shared by About/Contact/Privacy/Terms. -------------------------------- */
.hk-hero-elite {
    background: #020617;
}

.hk-hero-glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    opacity: .55;
}

.hk-hero-glow-a {
    width: 620px;
    height: 620px;
    top: -220px;
    left: -120px;
    background: radial-gradient(circle, rgba(91, 61, 224, .55) 0%, rgba(91, 61, 224, 0) 70%);
}

.hk-hero-glow-b {
    width: 560px;
    height: 560px;
    top: -80px;
    right: -160px;
    background: radial-gradient(circle, rgba(15, 76, 129, .55) 0%, rgba(15, 76, 129, 0) 70%);
}

.hk-hero-glow-c {
    width: 640px;
    height: 640px;
    bottom: -320px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(79, 134, 198, .35) 0%, rgba(79, 134, 198, 0) 70%);
    opacity: .4;
}

.hk-hero-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 90%);
    pointer-events: none;
}

.hk-hero::before,
.hk-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: 1;
}

.hk-hero::before {
    width: 420px;
    height: 420px;
    top: -180px;
    right: -120px;
}

.hk-hero::after {
    width: 280px;
    height: 280px;
    bottom: -160px;
    left: -80px;
    background: rgba(255, 255, 255, 0.06);
}

/* The elite hero draws its own glow layers (above) instead of these two
   flat circles, which were tuned for the solid-gradient banner. */
.hk-hero-elite::before,
.hk-hero-elite::after {
    display: none;
}

/* --- Site-wide dark-mode canvas ------------------------------------------
   Dark mode is one continuous slate-950 canvas with the same ambient
   indigo/blue corner glows the homepage hero pioneered (.hk-hero-elite,
   above) — every page shares it, not just Home/About/Contact, so switching
   the navbar theme toggle reads as one coherent premium surface everywhere.
   Fixed + no-repeat anchors the glows to the viewport corners instead of
   tiling down the length of a long page. */
html[data-theme="dark"] body {
    background-image:
        radial-gradient(680px circle at 6% -10%, var(--hk-dark-glow-1), transparent 60%),
        radial-gradient(620px circle at 96% 6%, var(--hk-dark-glow-2), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* --- Context-aware category backgrounds (9 service pages) ----------------
   Each listing page sets data-category-bg on <body> (see the body_attrs
   block in business_list.html etc.) and gets a soft ambient wash in that
   category's color, plus a matching low-opacity floating watermark drawn by
   world-scene.js (below). */
body[data-category-bg="business"] {
    background-image: radial-gradient(900px circle at 50% -10%, rgba(var(--hk-cat-business-rgb), .08), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body[data-category-bg="restaurant"] {
    background-image: radial-gradient(900px circle at 50% -10%, rgba(var(--hk-cat-restaurant-rgb), .08), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body[data-category-bg="realestate"] {
    background-image: radial-gradient(900px circle at 50% -10%, rgba(var(--hk-cat-realestate-rgb), .08), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body[data-category-bg="health"] {
    background-image: radial-gradient(900px circle at 50% -10%, rgba(var(--hk-cat-health-rgb), .08), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body[data-category-bg="projects"] {
    background-image: radial-gradient(900px circle at 50% -10%, rgba(var(--hk-cat-projects-rgb), .08), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body[data-category-bg="events"] {
    background-image: radial-gradient(900px circle at 50% -10%, rgba(var(--hk-cat-events-rgb), .09), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body[data-category-bg="education"] {
    background-image: radial-gradient(900px circle at 50% -10%, rgba(var(--hk-cat-education-rgb), .07), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body[data-category-bg="transport"] {
    background-image: radial-gradient(900px circle at 50% -10%, rgba(var(--hk-cat-transport-rgb), .08), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body[data-category-bg="news"] {
    background-image: radial-gradient(900px circle at 50% -10%, rgba(var(--hk-cat-news-rgb), .07), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* --- World-scene background storyline system ------------------------------
   Supersedes the earlier icon-watermark and shop-visit-choreography
   attempts on this feature — a full inline-SVG "storyline" per category
   page: a small cast of hand-authored actors, each with its OWN
   percentage-timed @keyframes loop, all sharing one --world-duration
   custom property (set per scene) so their individual timelines land in
   sync and hand off to each other within a single, seamlessly-looping
   cycle. Built by world-scene.js. z-index:-1 (behind the page's own paint)
   — safe because every real layout element on the site is itself
   z-index:auto/positive, so this always paints behind them regardless of
   stacking order. Gated behind data-category-bg. */
.world-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}

.world-bg.is-active {
    opacity: 1;
    visibility: visible;
}

/* Shared "day/night" ambient wash — one soft glow breathing in/out on the
   exact same --world-duration as the actors, brightening mid-cycle and
   dimming right at the loop seam (0%/100%) so the story restarting is
   masked rather than an visible pop. */
.world-ambient {
    position: absolute;
    inset: 0;
    background: radial-gradient(120vmax 60vmax at 50% 120%, var(--world-tint, transparent), transparent 70%);
    animation: hk-world-ambient var(--world-duration, 16s) ease-in-out infinite;
}

@keyframes hk-world-ambient {
    0%   { opacity: .12; }
    45%  { opacity: .4; }
    55%  { opacity: .4; }
    100% { opacity: .12; }
}

.world-actor {
    position: absolute;
    line-height: 0;
    will-change: transform, opacity;
}

.world-actor svg {
    display: block;
    overflow: visible;
}

/* --- Restaurant: chef preps -> waiter carries the plate across the screen
   -> customer at the table -> plate cleared -> loop restarts. ------------ */
@keyframes wa-r-chef {
    0%   { transform: rotate(0deg); }
    6%   { transform: rotate(-10deg); }
    12%  { transform: rotate(10deg); }
    18%  { transform: rotate(-10deg); }
    24%  { transform: rotate(6deg); }
    30%, 100% { transform: rotate(0deg); }
}

@keyframes wa-r-waiter {
    0%, 26% { transform: translateX(0); opacity: 0; }
    30%     { opacity: 1; }
    54%     { transform: translateX(52vw); opacity: 1; }
    58%, 100% { opacity: 0; }
}

@keyframes wa-r-plate {
    0%, 53% { opacity: 0; transform: scale(.6); }
    57%     { opacity: 1; transform: scale(1); }
    82%     { opacity: 1; transform: scale(1); }
    88%     { opacity: 0; transform: scale(.7) translateY(6px); }
    100%    { opacity: 0; }
}

@keyframes wa-r-steam {
    0%, 56% { opacity: 0; transform: translateY(0) scale(.8); }
    62%     { opacity: .8; }
    80%, 100% { opacity: 0; transform: translateY(-24px) scale(1.3); }
}

@keyframes wa-r-customer {
    0%, 50% { opacity: .85; transform: translateY(0); }
    58%     { transform: translateY(-2px); }
    65%     { transform: translateY(0); }
    72%     { transform: translateY(-2px); }
    79%, 100% { transform: translateY(0); opacity: .85; }
}

@keyframes wa-r-receipt {
    0%, 84% { opacity: 0; transform: translateY(6px) scale(.8); }
    90%     { opacity: 1; transform: translateY(0) scale(1); }
    97%     { opacity: 1; }
    100%    { opacity: 0; }
}

/* --- Healthcare: patient arrives -> doctor + clipboard checkup -> patient
   recovers and leaves -> ambulance cameo -> loop restarts. --------------- */
@keyframes wa-h-patient {
    0%   { transform: translateX(-14vw); opacity: 0; }
    4%   { opacity: 1; }
    22%, 70% { transform: translateX(0); opacity: 1; }
    90%  { transform: translateX(60vw); opacity: 1; }
    96%, 100% { opacity: 0; }
}

@keyframes wa-h-doctor {
    0%, 18% { opacity: 0; transform: scale(.7); }
    24%     { opacity: 1; transform: scale(1); }
    30%     { transform: translateY(-2px); }
    38%     { transform: translateY(0); }
    46%     { transform: translateY(-2px); }
    54%, 70% { transform: translateY(0); opacity: 1; }
    76%, 100% { opacity: 0; }
}

@keyframes wa-h-clipboard {
    0%, 27% { opacity: 0; transform: rotate(-6deg); }
    32%     { opacity: 1; }
    40%     { transform: rotate(4deg); }
    48%     { transform: rotate(-4deg); }
    56%     { opacity: 1; transform: rotate(0deg); }
    62%, 100% { opacity: 0; }
}

@keyframes wa-h-ambulance {
    0%, 76% { transform: translateX(20vw); opacity: 0; }
    80%     { opacity: 1; }
    92%, 98% { transform: translateX(0); opacity: 1; }
    100%    { opacity: 0; }
}

/* Independent of --world-duration on purpose — a persistent EKG trace
   ticking on its own short loop, not part of the narrative handoff. */
@keyframes wa-h-heartbeat {
    0%   { stroke-dashoffset: 220; }
    100% { stroke-dashoffset: 0; }
}

/* --- Transport: commuter walks to the stop -> bus arrives -> boards ->
   bus crosses the screen -> loop restarts. -------------------------------- */
@keyframes wa-t-commuter {
    0%   { transform: translateX(-14vw); opacity: 0; }
    4%   { opacity: 1; }
    20%, 44% { transform: translateX(0); opacity: 1; }
    50%  { transform: translateX(2vw) scale(.5); opacity: 0; }
    100% { opacity: 0; }
}

@keyframes wa-t-ticket {
    0%, 23% { opacity: 0; transform: translateY(4px); }
    28%, 40% { opacity: 1; transform: translateY(0); }
    44%, 100% { opacity: 0; }
}

@keyframes wa-t-luggage {
    0%, 19% { opacity: 0; }
    24%, 46% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes wa-t-bus {
    0%   { transform: translateX(-40vw); opacity: 0; }
    6%   { opacity: 1; }
    30%, 48% { transform: translateX(0); opacity: 1; }
    80%  { transform: translateX(55vw); opacity: 1; }
    86%, 100% { opacity: 0; }
}

/* --- The remaining 6 categories (Business, Education, Real Estate,
   Upcoming Projects, Events, News) share a lighter 2-motion vocabulary
   instead of a fully bespoke cast — one walker approaching/leaving a
   storefront anchor, and floating props — parameterized per instance via
   --actor-start/--actor-exit custom properties (set inline by
   world-scene.js) rather than one keyframe per category. */
@keyframes wa-generic-approach {
    0%   { transform: translateX(var(--actor-start, -12vw)); opacity: 0; }
    6%   { opacity: 1; }
    45%, 75% { transform: translateX(0); opacity: 1; }
    92%  { transform: translateX(var(--actor-exit, 12vw)); opacity: 0; }
    100% { opacity: 0; }
}

@keyframes wa-generic-hover {
    0%, 100% { transform: translateY(0) rotate(-3deg); opacity: .85; }
    50%      { transform: translateY(-10px) rotate(3deg); opacity: 1; }
}

/* --- Celebration effects (celebrations.js) --------------------------------
   #fxLayer sits above everything, including modals — these are momentary
   foreground "wow" moments (order placed, review posted), not ambient
   background decor, so it deliberately does NOT share the -1/1 z-index
   tier the world-scene/canvas engines use. Every particle reads its own
   --fx-x/--fx-y (px offsets from its spawn point) through ONE shared
   keyframe, so confetti/burst/etc. never need their own @keyframes. */
#fxLayer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2000;
}

.fx-particle {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    animation-name: hk-fx-particle;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    animation-fill-mode: forwards;
}

.fx-confetti {
    background: currentColor;
    border-radius: 2px;
}

.fx-burst {
    width: auto;
    height: auto;
    margin: -.5em 0 0 -.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: currentColor;
}

.fx-burst::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

@keyframes hk-fx-particle {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--fx-x, 0), var(--fx-y, 0)) rotate(200deg); opacity: 0; }
}

.fx-glow {
    animation: hk-fx-glow 1.3s ease-out;
}

@keyframes hk-fx-glow {
    0%   { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .55); }
    100% { box-shadow: 0 0 0 26px rgba(var(--bs-primary-rgb), 0); }
}

/* The compact gradient hero banner (About/Contact/Privacy/Terms) drops its
   own blue/violet gradient in dark mode and goes transparent instead, so
   the body's ambient glow above shows straight through — the same canvas
   as the homepage's .hk-hero-elite, without duplicating its glow markup
   into every template that uses the compact hero. */
html[data-theme="dark"] .hk-hero:not(.hk-hero-elite) {
    background: transparent;
}

html[data-theme="dark"] .hk-hero:not(.hk-hero-elite)::before,
html[data-theme="dark"] .hk-hero:not(.hk-hero-elite)::after {
    display: none;
}

/* Hero icon badge (About/Contact) — a glass chip instead of a flat solid
   circle, so it reads as a deliberate mark rather than a mismatched button
   sitting on top of the gradient/ambient hero background, in both themes. */
.hk-hero .hk-icon-circle {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    box-shadow: var(--hk-elevation-4);
    transition: border-color var(--hk-duration-base) var(--hk-ease-out),
                transform var(--hk-duration-base) var(--hk-ease-out);
}

.hk-hero .hk-icon-circle:hover {
    border-color: rgba(240, 169, 58, .3);
    transform: scale(1.05);
}

.hk-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hk-hero-content h1 {
    color: #fff;
    font-size: var(--hk-text-5xl);
    font-weight: 800;
    letter-spacing: var(--hk-tracking-tightest);
    line-height: var(--hk-leading-tight);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

.hk-hero-content .lead {
    font-size: var(--hk-text-lg);
    line-height: var(--hk-leading-normal);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* h2 inside a hero (e.g. the About page's closing CTA banner) previously had
   no color rule of its own, so the global `h1,h2,...{ color: var(--hk-ink) }`
   (line 28) rendered it near-black on the dark hero background regardless of
   the section's .text-white — this gives it the same white/fluid treatment
   as .hk-hero-content h1, just one step down in scale. */
.hk-hero-content h2 {
    color: #fff;
    font-size: var(--hk-text-3xl);
    font-weight: 800;
    letter-spacing: var(--hk-tracking-tighter);
    line-height: var(--hk-leading-tight);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

/* --- Elite hero typography (homepage only) ------------------------------ */
.hk-hero-heading {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 1.15rem + 3.6vw, 3.75rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.hk-hero-heading .hk-gold-word {
    background: linear-gradient(90deg, var(--hk-gold-400) 0%, #F2841D 50%, var(--hk-gold-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hk-hero-subhead {
    font-size: clamp(.9rem, .82rem + .35vw, 1.15rem);
    font-weight: 400;
    color: rgba(216, 218, 234, .72);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
    letter-spacing: .005em;
}

/* --- Quick category pills under the hero search ------------------------ */
.hk-quick-pill-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 32px;
}

.hk-quick-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--hk-radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(216, 218, 234, .85);
    font-weight: 600;
    font-size: .8rem;
    text-decoration: none;
    box-shadow: var(--hk-elevation-1);
    transition: transform .2s var(--hk-ease-out), background-color .2s ease, border-color .2s ease, color .2s ease;
}

.hk-quick-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-2px);
}

/* --- Hero scroll cue ----------------------------------------------------- */
.hk-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, .75);
    font-size: 1.4rem;
    animation: hk-bounce 2s infinite;
}

@keyframes hk-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* --- Gold accent CTA (used sparingly: primary conversion actions) --------- */
.btn-hk-gold {
    background: var(--hk-gold);
    border: none;
    color: #4A3208;
    font-weight: 600;
    letter-spacing: var(--hk-tracking-normal);
}

.btn-hk-gold:hover,
.btn-hk-gold:focus {
    color: #4A3208;
    background: var(--hk-gold-300);
}

/* --- Elite search shell (hero search bar, homepage) -----------------------
   Compact glass module: blurred dark surface, borderless inputs separated
   by a hairline divider, gradient pill button. ---------------------------- */
.hk-search-shell {
    position: relative;
    /* One above .hk-hero-stats/.hk-quick-pill-row (both z-index: 2 in the same
       .hk-hero-content stacking context) — otherwise, being later in the DOM,
       they'd win the tie and paint over an open .hk-select-menu. */
    z-index: 3;
    max-width: 720px;
    background: rgba(18, 19, 27, .6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--hk-radius-xl);
    box-shadow: 0 0 50px -12px rgba(0, 0, 0, .5);
    padding: 8px;
}

.hk-search-shell-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.hk-search-shell-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 14px;
}

.hk-search-shell-icon {
    color: rgba(216, 218, 234, .45);
    font-size: .85rem;
    flex: none;
}

.hk-search-shell .form-control,
.hk-search-shell .form-select {
    border: none;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: .875rem;
    padding: .5rem 0;
}

.hk-search-shell .form-control::placeholder {
    color: rgba(216, 218, 234, .4);
}

.hk-search-shell .form-select {
    padding: .5rem 0;
}

.hk-search-shell .form-select option {
    color: var(--hk-ink);
    background: var(--hk-surface);
}

.hk-search-shell .form-control:focus,
.hk-search-shell .form-select:focus {
    box-shadow: none;
}

.hk-search-shell-divider {
    display: none;
    width: 1px;
    align-self: stretch;
    margin: 6px 0;
    background: rgba(255, 255, 255, .1);
}

.hk-search-shell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    border: none;
    border-radius: var(--hk-radius-lg);
    background: linear-gradient(90deg, var(--hk-gold-600) 0%, var(--hk-gold-400) 100%);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    box-shadow: var(--hk-elevation-3);
    transition: transform .2s var(--hk-ease-out), filter .2s ease;
}

.hk-search-shell-btn:hover {
    filter: brightness(1.08);
    transform: scale(1.02);
    color: #fff;
}

.hk-search-shell-btn:active {
    transform: scale(.98);
}

@media (min-width: 768px) {
    .hk-search-shell-row {
        flex-direction: row;
    }
    .hk-search-shell-field-text {
        flex: 1 1 auto;
    }
    .hk-search-shell-field-select {
        flex: 0 0 auto;
    }
    .hk-search-shell-divider {
        display: block;
    }
    .hk-search-shell-btn {
        width: auto;
    }
}

/* --- Custom category dropdown (hero search bar) ---------------------------
   Replaces the native <select>: an open option list is OS-rendered chrome
   that can't be restyled beyond color/background on <option>, which is what
   produced the unstyled white box over the dark hero. This is a plain
   div/ul listbox driven by main.js instead, so it inherits the same glass
   surface as .hk-search-shell. --------------------------------------------- */
.hk-select {
    position: relative;
}

.hk-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 160px;
    border: none;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: left;
    padding: .5rem 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.hk-select-trigger:focus-visible {
    outline: 2px solid rgba(240, 169, 58, .5);
    outline-offset: 2px;
    border-radius: var(--hk-radius-xs);
}

.hk-select-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-select-chevron {
    flex: none;
    font-size: .75rem;
    color: rgba(216, 218, 234, .5);
    transition: transform var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-select.is-open .hk-select-chevron {
    transform: rotate(180deg);
}

.hk-select-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: 240px;
    max-width: calc(100vw - 48px);
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: rgba(18, 19, 27, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--hk-radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    z-index: var(--hk-z-dropdown);
    opacity: 0;
    transform: scale(.96) translateY(-4px);
    pointer-events: none;
    transition: opacity var(--hk-duration-fast) var(--hk-ease-out),
                transform var(--hk-duration-fast) var(--hk-ease-out);
}

/* Own class rather than a .hk-select.is-open descendant combinator — once
   main.js portals the menu to <body> (see the .is-portaled rule below) it's
   no longer a DOM descendant of .hk-select, so the combinator would stop
   matching and the menu would stay invisible forever after the first open. */
.hk-select-menu.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.hk-select-menu.is-portaled {
    position: fixed;
    top: 0;
    left: 0;
}

.hk-select-menu::-webkit-scrollbar {
    width: 6px;
}

.hk-select-menu::-webkit-scrollbar-track {
    background: transparent;
}

.hk-select-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: var(--hk-radius-pill);
}

.hk-select-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .3);
}

.hk-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: .625rem .875rem;
    border-radius: var(--hk-radius-sm);
    color: rgba(216, 218, 234, .85);
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--hk-duration-fast) var(--hk-ease-out),
                color var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-select-option:hover,
.hk-select-option.is-focused {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.hk-select-option.is-active {
    background: rgba(240, 169, 58, .12);
    color: var(--hk-gold-400);
    font-weight: 600;
}

.hk-select-option-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hk-gold-400);
    box-shadow: 0 0 8px 1px rgba(240, 169, 58, .6);
    flex: none;
    opacity: 0;
}

.hk-select-option.is-active .hk-select-option-dot {
    opacity: 1;
}

/* --- Hero eyebrow pill (small uppercase label above the headline) --------- */
.hk-hero-eyebrow {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(216, 218, 234, .85);
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 7px 16px;
    border-radius: var(--hk-radius-pill);
    margin-bottom: 22px;
}

.hk-hero-eyebrow .hk-hero-eyebrow-dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hk-emerald-400);
    box-shadow: 0 0 0 0 rgba(47, 196, 136, .6);
    animation: hk-eyebrow-pulse 2s ease-out infinite;
}

@keyframes hk-eyebrow-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(47, 196, 136, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(47, 196, 136, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 196, 136, 0); }
}

.hk-hero-content .hk-gold-word {
    color: var(--hk-gold);
}

/* Full-line gradient text-clip for the homepage headline — falls back to
   solid white if background-clip: text isn't supported. */
.hk-hero-heading-gradient {
    color: #fff;
    background: var(--hk-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hk-hero-heading-gradient {
        -webkit-text-fill-color: initial;
        color: #fff;
    }
}

/* --- Hero stat tiles: bento-grid dashboard cards (homepage only) --------- */
.hk-hero-stats {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.hk-hero-stat-tile {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, transparent 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--hk-radius-xl);
    padding: 22px 10px;
    text-align: center;
    box-shadow: var(--hk-elevation-3);
    transition: border-color .3s ease, background-color .3s ease, transform .3s var(--hk-ease-out);
}

.hk-hero-stat-tile:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .15);
    transform: translateY(-4px);
}

.hk-hero-stat-icon {
    color: var(--hk-gold);
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.hk-hero-stat-tile .hk-stat-number {
    background: none;
    -webkit-text-fill-color: initial;
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(1.4rem, 1vw + 1.15rem, 2rem);
}

.hk-hero-stat-tile .hk-stat-label {
    color: var(--hk-gray-500);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 6px;
}

@media (max-width: 767.98px) {
    .hk-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Section rhythm ----------------------------------------------------------
   Shared vertical breathing room + alternating tone for every marketing
   section, replacing ad hoc `container py-5` — one token (--hk-section-py)
   controls the rhythm of the whole page. ------------------------------------ */
.hk-section {
    padding-top: var(--hk-section-py);
    padding-bottom: var(--hk-section-py);
}

.hk-section-tight {
    padding-top: calc(var(--hk-section-py) * .55);
    padding-bottom: calc(var(--hk-section-py) * .55);
}

/* Taller variant of the compact gradient banner — About/Contact page
   headers, where the flat color-to-light-section cutoff reads as abrupt
   at the default .hk-section-tight padding. Overrides padding-bottom only
   (source order wins over .hk-section-tight on the shared element). */
.hk-hero-tall {
    padding-bottom: calc(var(--hk-section-py) * 1.05);
}

/* Page-top hero rendering full-bleed behind the transparent floating navbar
   (body.hk-has-transparent-hero cancels the usual 96px body padding — see
   body, above) needs its own top clearance so the hero's content doesn't
   sit underneath the fixed island. Matches .hk-hero-fullscreen's 104px
   navbar-clearance padding exactly. Scoped to a modifier, not baked into
   .hk-hero-elite itself, since that class is also reused mid-page (About's
   closing CTA banner) where no such clearance is needed. */
.hk-hero-navbar-clear {
    padding-top: 104px;
}

.hk-section-alt {
    background-color: var(--hk-gray-50);
}

html[data-theme="dark"] .hk-section-alt {
    background-color: #0E0F16;
}

/* --- Section header (centered kicker + heading + subtext) -------------------- */
.hk-section-header {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.hk-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--hk-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--hk-tracking-widest);
    color: var(--bs-primary);
    margin-bottom: .9rem;
}

.hk-section-kicker::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-primary);
}

.hk-section-header h2 {
    font-size: var(--hk-text-3xl);
    letter-spacing: var(--hk-tracking-tighter);
    margin-bottom: .85rem;
}

.hk-section-header p {
    color: var(--hk-ink-soft);
    font-size: var(--hk-text-md);
    line-height: var(--hk-leading-normal);
    margin-bottom: 0;
}

/* --- Section header row (icon + heading, "View all" trailing) --------------- */
.hk-section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.hk-section-header-row h2 {
    font-size: var(--hk-text-2xl);
    letter-spacing: var(--hk-tracking-tight);
    margin-bottom: 0;
}

.hk-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: var(--hk-text-sm);
    color: var(--bs-primary);
    text-decoration: none;
    padding: .5rem 1rem;
    border-radius: var(--hk-radius-pill);
    border: 1px solid var(--hk-border-soft);
    transition: gap var(--hk-duration-fast) var(--hk-ease-out),
                background-color var(--hk-duration-fast) var(--hk-ease-out),
                border-color var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-view-all-link i {
    transition: transform var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-view-all-link:hover {
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    gap: .6rem;
}

.hk-view-all-link:hover i {
    transform: translateX(2px);
}

/* --- "How It Works" connected step timeline (About) --------------------------
   A staggered roadmap: a glowing indigo→violet→gold line runs down the
   center on desktop with cards alternating left/right of it, then collapses
   to a single left-aligned rail with stacked cards on mobile. Namespaced
   "hk-process-*" (not "hk-timeline-*") because .hk-timeline is already the
   chronological milestone list used elsewhere (see "Vertical timeline"
   below) — reusing that class collided its own ::before connector line
   with this component's. -------------------------------------------------- */
.hk-process-heading {
    font-size: var(--hk-text-4xl);
    font-weight: 800;
    margin-bottom: var(--hk-space-2);
}

.hk-process-timeline {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: var(--hk-space-2) 0;
}

.hk-process-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    width: 2px;
    border-radius: var(--hk-radius-pill);
    background: linear-gradient(180deg, var(--hk-violet-400) 0%, var(--hk-violet-500) 45%, var(--hk-gold-400) 100%);
    box-shadow: 0 0 16px rgba(124, 99, 232, .35);
    opacity: .55;
}

.hk-process-step {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: start;
    column-gap: var(--hk-space-4);
    margin-bottom: var(--hk-space-6);
}

.hk-process-step:last-child {
    margin-bottom: 0;
}

.hk-process-node {
    grid-column: 1;
    justify-self: start;
    width: 44px;
    height: 44px;
    border-radius: var(--hk-radius-md);
    background: #0B0D14;
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hk-text-md);
    font-weight: 900;
    z-index: 2;
    box-shadow: 0 0 18px rgba(240, 169, 58, .22), var(--hk-shadow-sm);
}

.hk-process-node span {
    background: linear-gradient(90deg, var(--hk-gold-300) 0%, var(--hk-gold-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hk-process-card {
    grid-column: 2;
    padding: var(--hk-space-5);
    border-radius: var(--hk-radius-lg);
    border: 1px solid var(--hk-border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: var(--hk-shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform var(--hk-duration-base) var(--hk-ease-out),
                box-shadow var(--hk-duration-base) var(--hk-ease-out),
                border-color var(--hk-duration-base) var(--hk-ease-out),
                background var(--hk-duration-base) var(--hk-ease-out);
}

.hk-process-card:hover {
    transform: scale(1.02);
    border-color: var(--hk-violet-400);
    background: linear-gradient(180deg, rgba(124, 99, 232, .08) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: var(--hk-shadow-hover);
}

.hk-process-card-head {
    display: flex;
    align-items: center;
    gap: var(--hk-space-3);
    margin-bottom: var(--hk-space-2);
}

.hk-process-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--hk-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 1px solid transparent;
}

.hk-process-card-icon--indigo {
    background-color: var(--hk-violet-bg);
    color: var(--hk-purple);
    border-color: rgba(124, 99, 232, .25);
}

.hk-process-card-icon--gold {
    background-color: var(--hk-gold-bg);
    color: var(--hk-gold-600);
    border-color: rgba(240, 169, 58, .3);
}

.hk-process-card-title {
    font-size: var(--hk-text-lg);
    font-weight: 700;
    color: var(--hk-ink);
    margin-bottom: 0;
}

.hk-process-card-text {
    color: var(--hk-ink-soft);
    font-size: var(--hk-text-sm);
    line-height: var(--hk-leading-normal);
    margin-bottom: 0;
}

html[data-theme="dark"] .hk-process-card-icon--indigo {
    color: var(--hk-violet-400);
}

html[data-theme="dark"] .hk-process-card-icon--gold {
    color: var(--hk-gold-300);
}

/* Desktop: stagger cards left/right of a centered track. */
@media (min-width: 992px) {
    .hk-process-track {
        left: 50%;
        transform: translateX(-50%);
    }

    .hk-process-step {
        grid-template-columns: 1fr 56px 1fr;
        column-gap: var(--hk-space-5);
    }

    .hk-process-node {
        grid-column: 2;
        justify-self: center;
    }

    .hk-process-step--left .hk-process-card {
        grid-column: 1;
        justify-self: end;
        text-align: right;
    }

    .hk-process-step--left .hk-process-card-head {
        flex-direction: row-reverse;
    }

    .hk-process-step--right .hk-process-card {
        grid-column: 3;
        justify-self: start;
    }
}

/* --- Section headers ------------------------------------------------- */
.hk-section-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

/* --- Icon circles (cards, hero) --------------------------------------- */
.hk-icon-circle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.hk-icon-circle-lg {
    width: 76px;
    height: 76px;
    min-width: 76px;
    font-size: 2rem;
}

/* --- Services section (homepage) — full-featured category cards --------
   Base rules read the same --hk-surface/--hk-border-soft tokens as every
   other card on the site, so light mode stays consistent with the rest of
   the app. The html[data-theme="dark"] overrides below are what turn this
   into the elite glass treatment — an inset image frame, a translucent
   gradient body, and a brand-orange hover glow — layered on top of the
   site-wide ambient canvas (see body background-image, above), instead of
   a parallel dark-only component. */
.hk-service-card {
    border: 1px solid var(--hk-border-soft);
    border-radius: var(--hk-radius-xl);
    background: var(--hk-surface);
    overflow: hidden;
    box-shadow: var(--hk-shadow-sm);
    transition: transform .5s var(--hk-ease-out), box-shadow .5s var(--hk-ease-out),
        border-color .5s var(--hk-ease-out), background-color .5s var(--hk-ease-out);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hk-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hk-shadow-hover);
}

html[data-theme="dark"] .hk-service-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .hk-service-card:hover {
    border-color: rgba(242, 132, 29, .25);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .015) 100%);
}

.hk-service-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    /* Frames the photo with a 12px margin on three sides (none on the
       bottom seam) so the floating icon below still overlaps the body
       cleanly — padding on an absolutely-positioned parent is honored by
       inset:0 children, so no extra markup is needed for the frame. */
    padding: 12px 12px 0;
}

/* Clips only the photo (and its hover zoom) — kept separate from
   .hk-service-card-media so the icon badge below can overlap the
   media/body seam without being cropped by this overflow. */
.hk-service-card-media-inner {
    position: absolute;
    inset: 12px 12px 0 12px;
    overflow: hidden;
    border-radius: var(--hk-radius-lg);
}

.hk-service-card-media-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--hk-ease-out);
}

.hk-service-card:hover .hk-service-card-media-inner img {
    transform: scale(1.08);
}

.hk-service-card-media-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(2, 6, 23, .75) 100%);
}

/* Icon-display mode: a premium 3D illustration centered on a tinted gradient
   backdrop, used instead of a cropped photo where a clean, consistent icon
   fits the site's theme better than a location photo. */
.hk-service-card-media.hk-service-card-media-icon .hk-service-card-media-inner {
    background: var(--hk-gradient-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hk-service-card-media.hk-service-card-media-icon .hk-service-card-media-inner::after {
    background: none;
}

.hk-service-card-media.hk-service-card-media-icon .hk-service-card-media-inner img {
    width: 58%;
    height: 58%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(15, 76, 129, .18));
    transition: transform .4s ease;
}

.hk-service-card:hover .hk-service-card-media.hk-service-card-media-icon .hk-service-card-media-inner img {
    transform: scale(1.1) translateY(-4px);
}

.hk-service-card-icon {
    position: absolute;
    bottom: -22px;
    left: 24px;
    z-index: 3;
    width: 50px;
    height: 50px;
    border-radius: var(--hk-radius-md);
    background: var(--hk-surface);
    color: var(--hk-brand-orange-500);
    border: 1px solid var(--hk-border-soft);
    box-shadow: var(--hk-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: transform .3s var(--hk-ease-out), background-color .3s ease,
        color .3s ease, border-color .3s ease;
}

.hk-service-card:hover .hk-service-card-icon {
    background: var(--hk-brand-gradient);
    color: #fff;
    border-color: transparent;
    transform: scale(1.1);
}

html[data-theme="dark"] .hk-service-card-icon {
    background: rgba(18, 19, 27, .92);
    border-color: rgba(245, 158, 11, .2);
    color: var(--hk-brand-orange-500);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--hk-shadow-md), 0 0 20px rgba(245, 158, 11, .15);
}

html[data-theme="dark"] .hk-service-card:hover .hk-service-card-icon {
    background: var(--hk-brand-gradient);
    color: #fff;
    border-color: transparent;
}

/* Positioned relative to the media box (not the inset frame), then nudged
   in by the 12px frame padding so it reads as floating inside the photo,
   matching .hk-service-card-media-inner's own inset. */
.hk-service-card-count {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--hk-radius-pill);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hk-service-card-body {
    padding: 34px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hk-service-card-body h5 {
    font-weight: 700;
    letter-spacing: var(--hk-tracking-tight);
    margin-bottom: 8px;
}

.hk-service-card-body p {
    color: var(--hk-ink-soft);
    font-size: .88rem;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 20px;
}

.hk-service-card-body .btn {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--hk-radius-md);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .01em;
    padding: 12px 20px;
    background: var(--hk-brand-gradient);
    color: #fff;
    box-shadow: 0 8px 20px rgba(242, 132, 29, .25);
    transition: transform .25s var(--hk-ease-out), box-shadow .25s ease, filter .25s ease;
}

.hk-service-card-body .btn:hover,
.hk-service-card-body .btn:focus-visible {
    filter: brightness(1.06);
    transform: scale(1.02);
    box-shadow: 0 10px 26px rgba(242, 132, 29, .35);
    color: #fff;
}

.hk-service-card-body .btn:active {
    transform: scale(.98);
}

/* --- Justified body copy (About page, and anywhere longer paragraphs need
   a more typeset, professional feel) -- text-align-last keeps the final
   line of each paragraph from being stretched into awkward gaps. --------- */
.hk-text-justify {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
}

/* --- About page: "Who We Are" photo + narrative showcase ------------------ */
.hk-about-service {
    padding: var(--hk-section-py) 0;
}

.hk-about-service-media {
    position: relative;
    border-radius: var(--hk-radius-xl);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--hk-border-soft);
    box-shadow: var(--hk-shadow-md);
    transition: transform var(--hk-duration-base) var(--hk-ease-out),
                box-shadow var(--hk-duration-base) var(--hk-ease-out);
}

.hk-about-service-media:hover {
    transform: scale(1.01);
    box-shadow: var(--hk-shadow-hover);
}

.hk-about-service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.hk-about-service-media:hover img {
    transform: scale(1.05);
}

/* --- Accent kicker + gradient title word (About "Who We Are") --------------
   Reuses the same gold gradient as the homepage search CTA
   (.hk-search-shell-btn) so the two pages share one accent identity. */
.hk-section-kicker--accent {
    color: var(--hk-gold-600);
}

.hk-section-kicker--accent::before {
    background: var(--hk-gold-600);
}

html[data-theme="dark"] .hk-section-kicker--accent {
    color: var(--hk-gold-400);
}

html[data-theme="dark"] .hk-section-kicker--accent::before {
    background: var(--hk-gold-400);
}

.hk-text-gradient-gold {
    background: linear-gradient(90deg, var(--hk-gold-600) 0%, var(--hk-gold-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Category cards ---------------------------------------------------- */
.hk-category-card {
    position: relative;
    border: none;
    border-radius: var(--hk-radius-card);
    background: var(--hk-surface);
    box-shadow: var(--hk-shadow-sm);
    transition: transform var(--hk-duration-luxury) var(--hk-ease-out), box-shadow var(--hk-duration-luxury) var(--hk-ease-out);
    cursor: pointer;
}

.hk-category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--hk-glow-ring-color), inset 0 0 24px -8px var(--hk-glow-ring-color);
    opacity: 0;
    transition: opacity var(--hk-duration-luxury) var(--hk-ease-out);
    pointer-events: none;
}

.hk-category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hk-shadow-hover);
}

.hk-category-card:hover::after {
    opacity: 1;
}

.hk-category-card .hk-icon-circle {
    margin: 0 auto;
}

/* --- Auto-fill listing grid -----------------------------------------------
   Replaces Bootstrap's row/col-* breakpoint grid on every listing page
   (business/property/job/event/news/project/directory/search + the
   homepage category and featured-projects sections) with a true fluid
   grid: columns are however many 280px-minimum cards fit the row, at any
   viewport width, with no explicit sm/md/lg breakpoints to maintain. Gap
   matches Bootstrap's g-4 (1.5rem) via --hk-space-5 so this drops in
   without a spacing shift.

   auto-fill, not auto-fit: with auto-fit, empty leftover tracks collapse
   and every real card grows via the minmax() 1fr max to fill the space
   they vacated — so a single result (or two) stretched to the full row
   width instead of staying card-sized. auto-fill keeps those tracks (just
   empty), so a card's max width is however wide *one column* actually is,
   the same whether the row holds 1 card or a full row of them. */
.hk-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--hk-space-5);
}

/* Same recipe, tighter minimum — for compact KPI/stat-tile rows (dashboard
   overviews) rather than full product cards. */
.hk-grid-auto-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--hk-space-4);
}

/* --- Universal listing card --------------------------------------------
   One shared visual recipe for every card in the app (business, property,
   job, event, news, upload hub). Add alongside a semantic class for
   module-specific tweaks if ever needed. */
.hk-card {
    position: relative;
    border: none;
    border-radius: var(--hk-radius-card);
    background: var(--hk-surface);
    overflow: hidden;
    box-shadow: var(--hk-shadow-sm);
    transition: transform var(--hk-duration-luxury) var(--hk-ease-out), box-shadow var(--hk-duration-luxury) var(--hk-ease-out);
}

/* Luxury inner-glow ring: a 1px inset border-image that fades in on hover,
   tinted by --hk-glow-ring-color (tokens.css) — reads as an on-theme glow
   under every palette instead of a fixed color, since that variable is what
   each palette block redefines. Layered via ::after (not border/outline) so
   it never shifts the card's box size or clips the lifted shadow above. */
.hk-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--hk-glow-ring-color), inset 0 0 24px -8px var(--hk-glow-ring-color);
    opacity: 0;
    transition: opacity var(--hk-duration-luxury) var(--hk-ease-out);
    pointer-events: none;
}

.hk-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hk-shadow-hover);
}

.hk-card:hover::after {
    opacity: 1;
}

.hk-card .card-title {
    font-weight: 600;
    color: var(--hk-ink);
}

.hk-card .btn {
    border-radius: var(--bs-border-radius);
    font-weight: 500;
}

.hk-card-img {
    height: 200px;
    object-fit: cover;
}

.hk-detail-img {
    height: 420px;
    object-fit: cover;
    border-radius: var(--hk-radius-card);
}

/* --- Card meta row (rating / views) and action row (save / maps / share) --- */
.hk-card-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .78rem;
    color: var(--hk-ink-soft);
    margin-bottom: .5rem;
}

.hk-card-meta-row .hk-rating i {
    color: var(--hk-gold);
}

.hk-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: .6rem;
}

.hk-card-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #F8F9FD;
    color: var(--hk-ink-soft);
    border: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    text-decoration: none;
    flex: none;
}

.hk-card-icon-btn:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    transform: translateY(-2px);
}

.hk-card-icon-btn.hk-fav-btn:hover {
    background-color: #FDE9EC;
    color: #E0426B;
}

/* --- Featured badge (floats on card corner) ----------------------------- */
.hk-badge-featured {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--hk-radius-pill);
    background: linear-gradient(135deg, #F5A524, #F7C94C);
    color: #59380A;
    box-shadow: 0 4px 10px rgba(245, 165, 36, .35);
}

/* --- Date badge (events / news) ----------------------------------------- */
.hk-badge-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
    font-size: .78rem;
    padding: 6px 12px;
    border-radius: var(--hk-radius-pill);
}

/* --- Type / category pill badges ---------------------------------------- */
.badge.bg-primary-subtle {
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--hk-radius-pill);
}

/* --- Breadcrumb ---------------------------------------------------------- */
.breadcrumb {
    background-color: var(--hk-surface);
    border-radius: var(--bs-border-radius-lg);
    padding: 12px 18px;
    box-shadow: var(--hk-shadow-sm);
}

.breadcrumb-item a {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-item.active {
    color: var(--hk-ink-soft);
}

/* --- List page search / filter bar --------------------------------------- */
.hk-search-bar {
    background-color: var(--hk-surface);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--hk-shadow-sm);
    padding: 22px;
}

.hk-search-bar .form-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hk-ink-soft);
    font-weight: 600;
}

.hk-search-bar .input-group-text {
    background-color: var(--hk-surface);
    border-right: none;
    border-color: var(--hk-border-soft);
}

.hk-search-bar .input-group .form-control,
.hk-search-bar .form-select {
    border-color: var(--hk-border-soft);
}

.hk-search-bar .input-group .form-control {
    border-left: none;
}

.hk-search-bar .form-control:focus,
.hk-search-bar .form-select:focus {
    box-shadow: none;
    border-color: var(--bs-primary);
}

/* --- Results summary bar -------------------------------------------------- */
.hk-results-bar {
    background-color: var(--bs-primary-bg-subtle);
    border-radius: var(--bs-border-radius-lg);
    padding: 10px 18px;
    font-size: .9rem;
    color: var(--hk-ink-soft);
}

.hk-results-bar a {
    color: var(--bs-primary);
    font-weight: 600;
    text-decoration: none;
}

/* --- Empty state ----------------------------------------------------------- */
.hk-empty-state {
    background-color: var(--hk-surface);
    border: 1.5px dashed var(--hk-border-soft);
    color: var(--hk-ink-soft);
    border-radius: var(--hk-radius-card);
}

.hk-empty-state i {
    color: var(--bs-primary-border-subtle);
}

/* The lone big icon (e.g. <i class="bi bi-shop display-4 d-block mb-3">) used
   across every "no results" state becomes a soft illustration-style badge. */
.hk-empty-state i.display-4 {
    display: block;
    width: 96px;
    height: 96px;
    line-height: 96px;
    text-align: center;
    border-radius: 50%;
    background: var(--hk-gradient-soft);
    color: var(--bs-primary) !important;
    font-size: 2.2rem !important;
    margin: 0 auto 1.1rem;
    animation: hk-scale-in .5s ease;
}

/* --- Image loading shimmer ---------------------------------------------------
   Applied to every card/detail image while it loads (see main.js); removed
   once the browser fires 'load'/'error', with a gentle fade-in. ------------- */
.hk-card-img,
.hk-detail-img {
    opacity: 1;
    transition: opacity .4s ease;
}

.hk-card-img.hk-img-loading,
.hk-detail-img.hk-img-loading {
    opacity: 0;
    background: linear-gradient(90deg, #E9EBF3 25%, #F3F4F9 37%, #E9EBF3 63%);
    background-size: 400% 100%;
    animation: hk-img-shimmer 1.4s ease infinite;
}

@keyframes hk-img-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.hk-stat-number {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    background: var(--hk-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.1;
}

.hk-stat-label {
    color: var(--hk-ink-soft);
    font-size: .85rem;
    font-weight: 500;
}

/* --- Category-aware image placeholder (no upload yet) -------------------- */
.hk-card-placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hk-gradient-soft);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.hk-card-placeholder i {
    font-size: 2.75rem;
    opacity: .55;
}

.hk-detail-placeholder {
    height: 420px;
    border-radius: var(--hk-radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hk-gradient-soft);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.hk-detail-placeholder i {
    font-size: 4.5rem;
    opacity: .55;
}

/* --- Skeleton loaders ------------------------------------------------------ */
.hk-skeleton {
    position: relative;
    overflow: hidden;
    background-color: #E9EBF3;
}

.hk-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    animation: hk-shimmer 1.4s infinite;
}

@keyframes hk-shimmer {
    100% { transform: translateX(100%); }
}

.hk-skeleton-card {
    border-radius: var(--hk-radius-card);
    overflow: hidden;
    box-shadow: var(--hk-shadow-sm);
    background: var(--hk-surface);
}

.hk-skeleton-img {
    height: 200px;
}

.hk-skeleton-line {
    height: 12px;
    border-radius: 6px;
    margin: 10px 16px;
}

/* --- Gradient detail hero (Jobs — no image field) --------------------------- */
.hk-detail-hero {
    background: var(--hk-gradient);
    border-radius: var(--hk-radius-card);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hk-detail-hero .hk-icon-circle {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* --- Detail info panel (Contact / Details boxes) ----------------------------- */
.hk-detail-panel {
    border: none;
    border-radius: var(--hk-radius-card);
    box-shadow: var(--hk-shadow-sm);
    background: var(--hk-surface);
}

/* --- Meta info grid (icon + label + value) ------------------------------------ */
.hk-meta-item {
    background-color: #F8F9FD;
    border-radius: var(--bs-border-radius-lg);
    padding: 14px 16px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color .2s ease;
}

.hk-meta-item:hover {
    background-color: var(--bs-primary-bg-subtle);
}

.hk-meta-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.hk-meta-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hk-ink-soft);
    margin-bottom: 2px;
}

.hk-meta-value {
    font-weight: 600;
    color: var(--hk-ink);
    font-size: .95rem;
}

.hk-meta-value a {
    color: var(--hk-ink);
    text-decoration: none;
}

.hk-meta-value a:hover {
    color: var(--bs-primary);
}

/* --- Contact page: premium card/input treatment -------------------------
   Modifiers layered on top of the shared .hk-detail-panel / .hk-meta-item
   components (used site-wide on business/job/property/event detail pages
   and dashboards) so this upgrade only applies where contact.html opts in
   via .hk-contact-*, leaving every other page that reuses the base classes
   untouched. Glass/gradient treatment is dark-mode only, matching the
   ambient slate-950 canvas those other pages already share; light mode
   keeps the plain .hk-detail-panel look. */
html[data-theme="dark"] .hk-contact-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, transparent 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: var(--hk-elevation-4);
}

.hk-contact-form .form-control {
    border-radius: var(--hk-radius-lg);
    transition: border-color .2s ease, box-shadow .2s ease;
}

html[data-theme="dark"] .hk-contact-form .form-control {
    background-color: rgba(2, 6, 23, .6);
    border-color: rgba(255, 255, 255, .1);
    color: #F4F5FA;
}

html[data-theme="dark"] .hk-contact-form .form-control:focus {
    border-color: var(--hk-gold-400);
    box-shadow: 0 0 0 .18rem rgba(240, 169, 58, .18);
}

.hk-contact-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--hk-radius-lg);
    background: linear-gradient(90deg, var(--hk-gold-600) 0%, var(--hk-gold-400) 100%);
    color: #fff;
    font-weight: 700;
    padding: 14px 26px;
    box-shadow: var(--hk-elevation-3);
    transition: transform .2s var(--hk-ease-out), filter .2s ease;
}

.hk-contact-submit-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #fff;
}

.hk-contact-submit-btn:active {
    transform: scale(.99);
}

.hk-contact-meta-item {
    transition: border-color .2s ease, background-color .2s ease;
}

html[data-theme="dark"] .hk-contact-meta-item {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .hk-contact-meta-item:hover {
    border-color: rgba(91, 61, 224, .35);
    background: rgba(255, 255, 255, .03);
}

.hk-contact-meta-icon {
    border-radius: var(--hk-radius-md);
}

html[data-theme="dark"] .hk-contact-meta-icon {
    background: rgba(91, 61, 224, .14);
    color: #9B8CF2;
    border: 1px solid rgba(91, 61, 224, .3);
}

/* --- "Why OneTownCity" feature cards ---------------------------------------- */
.hk-why-card {
    height: 100%;
    padding: var(--hk-space-5);
    background: var(--hk-surface);
    border: 1px solid var(--hk-border-soft);
    border-radius: var(--hk-radius-xl);
    box-shadow: var(--hk-shadow-sm);
    transition: transform var(--hk-duration-base) var(--hk-ease-out),
                box-shadow var(--hk-duration-base) var(--hk-ease-out),
                border-color var(--hk-duration-base) var(--hk-ease-out);
}

.hk-why-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hk-shadow-hover);
    border-color: transparent;
}

.hk-why-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hk-radius-md);
    font-size: 1.35rem;
    margin-bottom: var(--hk-space-4);
    transition: transform var(--hk-duration-base) var(--hk-ease-out);
}

.hk-why-card:hover .hk-why-icon {
    transform: scale(1.08);
}

.hk-why-icon--blue    { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.hk-why-icon--violet  { background-color: var(--hk-violet-bg); color: var(--hk-purple); }
.hk-why-icon--emerald { background-color: var(--hk-emerald-bg); color: var(--hk-emerald); }
.hk-why-icon--gold    { background-color: var(--hk-gold-bg); color: var(--hk-gold-600); }
.hk-why-icon--sky     { background-color: var(--hk-sky-bg); color: var(--hk-sky-400); }

.hk-why-card h3 {
    font-size: var(--hk-text-lg);
    font-weight: 700;
    letter-spacing: var(--hk-tracking-tight);
    color: var(--hk-ink);
    margin-bottom: var(--hk-space-2);
}

.hk-why-card p {
    color: var(--hk-ink-soft);
    font-size: var(--hk-text-base);
    line-height: var(--hk-leading-normal);
    margin-bottom: 0;
}

/* --- Mission & Vision bento cards (About) — glass dashboard widgets with a
   per-card accent glow on hover: indigo for Mission, gold for Vision. Shares
   the site's ambient dark canvas rather than painting its own fill. -------- */
.hk-bento-card {
    height: 100%;
    padding: var(--hk-space-6) var(--hk-space-5);
    border-radius: var(--hk-radius-xl);
    border: 1px solid var(--hk-border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: var(--hk-shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform var(--hk-duration-base) var(--hk-ease-out),
                box-shadow var(--hk-duration-base) var(--hk-ease-out),
                border-color var(--hk-duration-base) var(--hk-ease-out),
                background var(--hk-duration-base) var(--hk-ease-out);
}

.hk-bento-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hk-shadow-hover);
}

.hk-bento-card--indigo:hover {
    border-color: var(--hk-violet-400);
    background: linear-gradient(180deg, rgba(124, 99, 232, .10) 0%, rgba(255, 255, 255, 0) 100%);
}

.hk-bento-card--gold:hover {
    border-color: var(--hk-gold-400);
    background: linear-gradient(180deg, rgba(240, 169, 58, .10) 0%, rgba(255, 255, 255, 0) 100%);
}

.hk-bento-card--blue:hover {
    border-color: var(--bs-primary-border-subtle);
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), .10) 0%, rgba(255, 255, 255, 0) 100%);
}

.hk-bento-card--emerald:hover {
    border-color: var(--hk-emerald-400);
    background: linear-gradient(180deg, rgba(47, 196, 136, .10) 0%, rgba(255, 255, 255, 0) 100%);
}

.hk-bento-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hk-radius-md);
    font-size: 1.4rem;
    margin-bottom: var(--hk-space-4);
    border: 1px solid transparent;
    transition: transform var(--hk-duration-base) var(--hk-ease-out);
}

.hk-bento-card:hover .hk-bento-icon {
    transform: scale(1.08);
}

.hk-bento-icon--indigo {
    background-color: var(--hk-violet-bg);
    color: var(--hk-purple);
    border-color: rgba(124, 99, 232, .25);
}

.hk-bento-icon--gold {
    background-color: var(--hk-gold-bg);
    color: var(--hk-gold-600);
    border-color: rgba(240, 169, 58, .3);
}

.hk-bento-icon--blue {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    border-color: var(--bs-primary-border-subtle);
}

.hk-bento-icon--emerald {
    background-color: var(--hk-emerald-bg);
    color: var(--hk-emerald);
    border-color: rgba(47, 196, 136, .3);
}

.hk-bento-title {
    font-size: var(--hk-text-xl);
    font-weight: 800;
    letter-spacing: var(--hk-tracking-tight);
    color: var(--hk-ink);
    margin-bottom: var(--hk-space-3);
}

.hk-bento-text {
    color: var(--hk-ink-soft);
    font-size: var(--hk-text-base);
    line-height: var(--hk-leading-normal);
    letter-spacing: .01em;
}

/* Compact modifiers — 4-up team grid needs tighter type than the 2-up
   Mission/Vision cards sharing the same .hk-bento-card base. */
.hk-bento-title--sm {
    font-size: var(--hk-text-lg);
    letter-spacing: var(--hk-tracking-wide);
}

.hk-bento-text--sm {
    font-size: var(--hk-text-sm);
}

/* Team member name, sitting between the role heading (.hk-bento-title--sm)
   and the role description (.hk-bento-text--sm) on the "Our Team" cards —
   same high-contrast ink as the heading (not the muted body color) so it
   reads as a secondary anchor, one step down from the role title. */
.hk-bento-name {
    font-size: var(--hk-text-base);
    font-weight: 700;
    color: var(--hk-ink);
    letter-spacing: .01em;
    margin-bottom: var(--hk-space-3);
}

html[data-theme="dark"] .hk-bento-icon--indigo {
    color: var(--hk-violet-400);
}

html[data-theme="dark"] .hk-bento-icon--gold {
    color: var(--hk-gold-300);
}

html[data-theme="dark"] .hk-bento-icon--emerald {
    color: var(--hk-emerald-400);
}

html[data-theme="dark"] .hk-bento-card--indigo:hover {
    background: linear-gradient(180deg, rgba(124, 99, 232, .10) 0%, rgba(255, 255, 255, .02) 100%);
}

html[data-theme="dark"] .hk-bento-card--gold:hover {
    background: linear-gradient(180deg, rgba(240, 169, 58, .10) 0%, rgba(255, 255, 255, .02) 100%);
}

html[data-theme="dark"] .hk-bento-card--blue:hover {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), .10) 0%, rgba(255, 255, 255, .02) 100%);
}

html[data-theme="dark"] .hk-bento-card--emerald:hover {
    background: linear-gradient(180deg, rgba(47, 196, 136, .10) 0%, rgba(255, 255, 255, .02) 100%);
}

/* --- Digital Solutions media frame (Home) — glass-bordered image well with
   a soft lift-on-hover, theme-aware: near-invisible tint in light mode,
   visible glass panel once the dark canvas glows are behind it. Sits in a
   row.align-items-stretch next to the services grid, so it fills the full
   column height (fixed aspect-ratio only applies once the columns stack
   on mobile — see @media below). ------------------------------------------ */
.hk-solutions-media-frame {
    height: 100%;
    padding: var(--hk-space-2);
    border-radius: var(--hk-radius-2xl);
    border: 1px solid var(--hk-border-soft);
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--hk-shadow-md);
    transition: transform var(--hk-duration-slow) var(--hk-ease-out),
                box-shadow var(--hk-duration-slow) var(--hk-ease-out);
}

.hk-solutions-media-frame:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--hk-shadow-hover);
}

.hk-solutions-media-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--hk-radius-xl);
}

@media (max-width: 991.98px) {
    .hk-solutions-media-frame img {
        height: 350px;
    }
}

html[data-theme="dark"] .hk-solutions-media-frame {
    background: rgba(255, 255, 255, .04);
}

/* --- Digital Solutions single-service feature block (Home) — replaces the
   old multi-card grid now that there's exactly one service to show. A tall
   "split hero" panel (badge, headline, description, benefit list, CTA) that
   fills the same column height as .hk-solutions-media-frame beside it,
   instead of one small card floating in a mostly-empty half. ------------- */
.hk-service-feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: var(--hk-space-6) var(--hk-space-5);
    border-radius: var(--hk-radius-2xl);
    border: 1px solid var(--hk-border-soft);
    background: linear-gradient(160deg, rgba(240, 169, 58, .06) 0%, rgba(255, 255, 255, 0) 55%);
    box-shadow: var(--hk-shadow-md);
    transition: transform var(--hk-duration-slow) var(--hk-ease-out),
                box-shadow var(--hk-duration-slow) var(--hk-ease-out);
}

.hk-service-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--hk-shadow-hover);
}

.hk-service-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 7px 16px;
    margin-bottom: var(--hk-space-4);
    border-radius: var(--hk-radius-pill);
    background: var(--hk-gold-bg);
    color: var(--hk-gold-600);
    font-size: var(--hk-text-xs);
    font-weight: 700;
    letter-spacing: var(--hk-tracking-wide);
    text-transform: uppercase;
}

.hk-service-feature-title {
    margin-bottom: var(--hk-space-3);
    font-size: var(--hk-text-3xl);
    font-weight: 800;
    letter-spacing: var(--hk-tracking-tight);
    line-height: var(--hk-leading-tight);
    color: var(--hk-ink);
}

.hk-service-feature-desc {
    margin-bottom: var(--hk-space-5);
    max-width: 52ch;
    font-size: var(--hk-text-base);
    line-height: var(--hk-leading-normal);
    color: var(--hk-ink-soft);
}

.hk-service-feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--hk-space-3);
    margin: 0 0 var(--hk-space-6);
    padding: 0;
    list-style: none;
}

.hk-service-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--hk-space-3);
    font-size: var(--hk-text-sm);
    font-weight: 600;
    color: var(--hk-ink);
}

.hk-service-feature-list li i {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--hk-gold-bg);
    color: var(--hk-gold-600);
    font-size: .7rem;
}

.hk-service-feature-cta {
    width: fit-content;
}

html[data-theme="dark"] .hk-service-feature-badge,
html[data-theme="dark"] .hk-service-feature-list li i {
    color: var(--hk-gold-300);
}

/* --- Digital Solutions section divider + industry pills (Home) ---------- */
.hk-solutions-divider {
    height: 1px;
    margin: var(--hk-space-5) 0 var(--hk-space-4);
    border: none;
    background: var(--hk-border-soft);
}

/* Full-width grid so the pills use the whole section instead of being
   squeezed into the "Our Services" column above (see home.html). */
.hk-industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hk-space-3);
    width: 100%;
}

@media (max-width: 1024px) {
    .hk-industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .hk-industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--hk-space-2);
    }
}

.hk-industry-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--hk-space-3) var(--hk-space-4);
    border-radius: var(--hk-radius-md);
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--hk-border-soft);
    color: var(--hk-ink-soft);
    font-size: var(--hk-text-xs);
    font-weight: 600;
    box-shadow: var(--hk-elevation-1);
    transition: background var(--hk-duration-fast) var(--hk-ease-out),
                border-color var(--hk-duration-fast) var(--hk-ease-out),
                color var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-industry-pill:hover {
    background: var(--hk-gold-bg);
    border-color: var(--hk-gold-400);
    color: var(--hk-gold-600);
}

html[data-theme="dark"] .hk-industry-pill:hover {
    color: var(--hk-gold-300);
}

/* --- Description box -------------------------------------------------------- */
.hk-description-box {
    background-color: #F8F9FD;
    border-radius: var(--bs-border-radius-lg);
    padding: 22px;
    line-height: 1.75;
    color: var(--hk-ink-soft);
}

/* --- CTA buttons -------------------------------------------------------------- */
.hk-cta-btn {
    border-radius: var(--bs-border-radius);
    padding: 10px 26px;
    font-weight: 600;
}

/* Gold-gradient variant — pairs with .hk-cta-btn (not a replacement for it,
   so every other .hk-cta-btn usage across the site is unaffected). Same
   gradient/hover language as .hk-search-shell-btn, for one consistent
   "premium accent button" across the app. */
.hk-cta-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: var(--hk-radius-lg);
    color: #fff;
    background: linear-gradient(90deg, var(--hk-gold-600) 0%, var(--hk-gold-400) 100%);
    box-shadow: var(--hk-elevation-3);
    transition: transform .2s var(--hk-ease-out), filter .2s ease, box-shadow .2s ease;
}

.hk-cta-btn-gold:hover,
.hk-cta-btn-gold:focus-visible {
    color: #fff;
    filter: brightness(1.08);
    transform: scale(1.03);
    box-shadow: 0 0 28px rgba(240, 169, 58, .45), var(--hk-elevation-3);
}

.hk-cta-btn-gold:active {
    transform: scale(.98);
}

/* --- Related / more listings heading ------------------------------------------- */
.hk-related-heading {
    position: relative;
    padding-left: 16px;
    font-weight: 600;
}

.hk-related-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 4px;
    background: var(--hk-gradient);
}

/* --- Pagination ------------------------------------------------------------------ */
.pagination .page-link {
    border-radius: var(--bs-border-radius) !important;
    margin: 0 3px;
    color: var(--bs-primary);
    border: 1px solid var(--hk-border-soft);
    font-weight: 500;
    min-width: 42px;
    text-align: center;
}

.pagination .page-link:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff !important;
    padding-left: 18px;
    padding-right: 18px;
    box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), .3);
}

.pagination .page-item.disabled .page-link {
    color: #C3C7D6;
    background-color: transparent;
}

/* --- Auth shell (login / sign-in / register) ---------------------------------------
   Split-pane layout: a gradient brand narrative panel (desktop only) beside
   an ultra-clean form pane. Fills the viewport below the fixed navbar so it
   reads as its own full-bleed screen rather than a form dropped mid-page. -- */
.hk-auth-shell {
    display: flex;
    min-height: calc(100vh - 96px);
    /* Containing block for .hk-auth-brand's bottom-pinned fallback below —
       so "position: absolute; bottom: 0" resolves against the shell's own
       bottom edge, not the page's. */
    position: relative;
}

.hk-auth-brand {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--hk-space-10) var(--hk-space-8);
    background: var(--hk-gradient);
    color: #fff;
}

/* Pinned in place (rather than scrolling with the page or stretching to
   match the form column) so a tall form — e.g. the 9-field Register tab —
   can't drag this panel's vertically-centered content down out of view or
   off the bottom of the page.
   This used to be position: sticky, but sticky never actually engages here —
   verified in a live browser, same as .hk-dashboard-sidebar above: fixed is
   what reliably keeps it in place. Taking it out of flow means the form pane
   needs an explicit margin-left to stop the fixed panel overlapping it, and
   the panel needs its own width since it no longer sizes off flex-basis.
   top/height must match body's own navbar-clearance padding-top (line ~23) —
   the floating navbar's actual bottom edge sits at 96px (16px inset + 64px
   height + 16px gap), so the panel starts flush below it.

   Fixed-to-viewport has no notion of "the shell it lives in", though, so on
   a short viewport / tall Register form it would happily keep covering the
   footer forever once the shell scrolls past. main.js watches scroll and
   adds .hk-auth-brand--pinned-bottom once the shell's bottom edge is about
   to pass under the fixed panel's own bottom edge, switching it to
   position: absolute (anchored to .hk-auth-shell above) so it stops right
   at the shell boundary and scrolls away with the page from there — the
   same "stop at the container's end" behavior native position: sticky would
   give for free if it engaged here. */
@media (min-width: 992px) {
    .hk-auth-brand {
        position: fixed;
        top: 96px;
        left: 0;
        width: 46%;
        height: calc(100vh - 96px);
        /* Forces this onto its own GPU compositing layer immediately on
           load — without it, Chrome on Windows sometimes leaves a freshly
           created position:fixed layer unpainted (blank) until the next
           scroll event nudges the compositor into redrawing it. */
        transform: translateZ(0);
    }
    .hk-auth-brand.hk-auth-brand--pinned-bottom {
        position: absolute;
        top: auto;
        bottom: 0;
    }
    .hk-auth-form-pane {
        margin-left: 46%;
    }
}

.hk-auth-brand::before,
.hk-auth-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hk-auth-brand::before {
    width: 380px;
    height: 380px;
    top: -140px;
    right: -100px;
}

.hk-auth-brand::after {
    width: 260px;
    height: 260px;
    bottom: -140px;
    left: -60px;
    background: rgba(255, 255, 255, 0.06);
}

.hk-auth-brand-content {
    position: relative;
    z-index: 1;
    max-width: 420px;
}

.hk-auth-brand-content .hk-brand-mark {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.16);
    margin-bottom: var(--hk-space-6);
}

.hk-auth-brand-content h1 {
    color: #fff;
    font-size: var(--hk-text-3xl);
    letter-spacing: var(--hk-tracking-tighter);
    line-height: var(--hk-leading-tight);
    margin-bottom: var(--hk-space-3);
}

.hk-auth-brand-content p.lead {
    font-size: var(--hk-text-md);
    color: rgba(255, 255, 255, .8);
}

.hk-auth-feature-list {
    list-style: none;
    padding: 0;
    margin: var(--hk-space-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--hk-space-4);
}

.hk-auth-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: var(--hk-text-sm);
    color: rgba(255, 255, 255, .85);
}

.hk-auth-feature-list i {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: var(--hk-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    margin-top: 1px;
}

.hk-auth-form-pane {
    flex: 1 1 54%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hk-space-8) var(--hk-space-5);
    background: var(--bs-body-bg);
}

.hk-auth-form-card {
    width: 100%;
    max-width: 440px;
}

/* Bootstrap's .nav-justified flex children default to min-width:auto, so on
   narrow screens two labeled pill tabs can refuse to shrink and force the
   whole page wider instead of fitting their column — this reclaims normal
   flex-shrink behavior and truncates gracefully if it's ever truly tight. */
.hk-auth-form-card .nav-pills.nav-justified .nav-item {
    min-width: 0;
}

.hk-auth-form-card .nav-pills .nav-link {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    .hk-auth-brand {
        display: none;
    }
    .hk-auth-form-pane {
        flex: 1 1 100%;
    }
}

/* --- Excel Upload Center ----------------------------------------------------------- */
.hk-upload-card {
    text-align: center;
    padding: .5rem;
}

.hk-dropzone {
    border: 2px dashed var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius-xl);
    padding: 2.5rem 1.5rem;
    text-align: center;
    background-color: var(--bs-primary-bg-subtle);
    transition: border-color .2s ease, background-color .2s ease;
}

.hk-dropzone:hover {
    border-color: var(--bs-primary);
}

.hk-columns-table th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hk-ink-soft);
}

.hk-error-list {
    max-height: 280px;
    overflow-y: auto;
}

/* --- Footer -----------------------------------------------------------------
   Always dark regardless of site theme (it's the one surface that stays
   constant), built on the same --hk-dark-* primitives as dark mode itself so
   it never looks like a bolted-on separate skin. --------------------------- */
footer {
    background-color: var(--hk-footer-bg) !important;
    border-top: 1px solid var(--hk-footer-border);
    padding-top: var(--hk-space-12) !important;
    padding-bottom: var(--hk-space-6) !important;
    transition: background-color var(--hk-duration-base) var(--hk-ease-out), border-color var(--hk-duration-base) var(--hk-ease-out);
}

footer a {
    transition: color var(--hk-duration-fast) var(--hk-ease-out), transform var(--hk-duration-fast) var(--hk-ease-out);
}

footer a:hover {
    color: #fff !important;
}

.hk-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--hk-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: var(--hk-tracking-tight);
    color: #fff;
}

/* Gradient text-clip for the "TownCity" half of the wordmark, and for the
   hero headline — both read from the same brand gradient token. */
.hk-brand-accent {
    background: var(--hk-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}

.hk-footer-tagline {
    color: #9096AD;
    font-size: var(--hk-text-sm);
    line-height: var(--hk-leading-normal);
    max-width: 32ch;
}

.hk-navbar-powered {
    padding-left: var(--hk-space-3);
    margin-left: var(--hk-space-1);
    border-left: 1px solid var(--hk-border-soft);
}

.hk-navbar-powered-text {
    font-size: 10px;
    font-weight: 600;
    color: var(--hk-ink-soft);
    text-transform: uppercase;
    letter-spacing: var(--hk-tracking-widest);
    margin-right: var(--hk-space-2);
    white-space: nowrap;
}

/* Wrapper pins both logo variants to the same box so swapping between them
   is a crossfade, not an instant display:none/block cut. That instant cut
   is what made the wordmark flash unreadable mid-scroll: the glass navbar's
   background-color transition (--hk-duration-base) takes 250ms to fade
   between transparent-over-hero and solid-glass, but the old display swap
   happened in a single frame at the exact scrollY threshold — so for part
   of that 250ms window the wrong-contrast logo sat on the not-yet-settled
   background. Fading both in lockstep with the same duration keeps the
   logo legible throughout the transition instead of just at its endpoints. */
.hk-navbar-craftlanee-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 18px;
}

.hk-navbar-craftlanee-logo {
    height: 18px;
    width: auto;
    transition: opacity var(--hk-duration-base) var(--hk-ease-out);
}

/* Dark-text is the default (light glass navbar / light drawer surface);
   crossfade to light-text over the transparent hero and in dark theme,
   mirroring the .hk-navbar-transparent / [data-theme="dark"] rules above. */
.hk-navbar-craftlanee-logo-light {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.hk-navbar-craftlanee-logo-dark {
    opacity: 1;
}

.hk-navbar-transparent:not(.hk-navbar-solid) .hk-navbar-craftlanee-logo-dark,
html[data-theme="dark"] .navbar:not(.hk-navbar-transparent) .hk-navbar-craftlanee-logo-dark,
html[data-theme="dark"] .hk-navbar-transparent.hk-navbar-solid .hk-navbar-craftlanee-logo-dark,
html[data-theme="dark"] .hk-nav-drawer .hk-navbar-craftlanee-logo-dark {
    opacity: 0;
}

.hk-navbar-transparent:not(.hk-navbar-solid) .hk-navbar-craftlanee-logo-light,
html[data-theme="dark"] .navbar:not(.hk-navbar-transparent) .hk-navbar-craftlanee-logo-light,
html[data-theme="dark"] .hk-navbar-transparent.hk-navbar-solid .hk-navbar-craftlanee-logo-light,
html[data-theme="dark"] .hk-nav-drawer .hk-navbar-craftlanee-logo-light {
    opacity: 1;
}

.hk-craftlanee-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hk-craftlanee-credit {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--hk-footer-border);
    border-radius: var(--hk-radius-lg);
    padding: 1rem 1.25rem;
}

.hk-craftlanee-credit a {
    color: #C9D3FB;
    text-decoration: none;
    font-weight: 500;
}

.hk-craftlanee-credit a:hover {
    color: #fff !important;
}

.hk-footer-heading {
    font-family: var(--hk-font-heading);
    font-size: var(--hk-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--hk-tracking-wide);
    color: #E4E6F1;
    margin-bottom: 1.1rem;
}

.hk-footer-links a {
    color: #9096AD;
    text-decoration: none;
    display: inline-block;
    padding: .3rem 0;
    font-size: var(--hk-text-sm);
}

.hk-footer-links a:hover {
    color: #fff !important;
    transform: translateX(3px);
}

/* Categories list: 13 entries in one column ran taller than every other
   footer column and threw the row off balance, so it splits into a
   2-column grid (1 column on very narrow screens). */
.hk-footer-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--hk-space-4);
}

.hk-footer-categories-grid a {
    padding: .3rem 0;
    transition: color var(--hk-duration-fast) var(--hk-ease-out), transform var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-footer-categories-grid a:hover {
    transform: translateX(2px);
}

@media (max-width: 480px) {
    .hk-footer-categories-grid {
        grid-template-columns: 1fr;
    }
}

.hk-social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hk-footer-border);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color var(--hk-duration-base) var(--hk-ease-out), transform var(--hk-duration-base) var(--hk-ease-out), border-color var(--hk-duration-base) var(--hk-ease-out);
}

.hk-social-icon:hover {
    background: var(--hk-gradient);
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
}

.hk-newsletter-form {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hk-footer-border);
    border-radius: var(--hk-radius-pill);
    padding: 6px;
    transition: border-color var(--hk-duration-fast) var(--hk-ease-out), background-color var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-newsletter-form:focus-within {
    border-color: rgba(91, 155, 232, .5);
    background: rgba(255, 255, 255, 0.07);
}

.hk-newsletter-form input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: var(--hk-text-sm);
}

.hk-newsletter-form input::placeholder {
    color: #6E7388;
}

.hk-newsletter-form input:focus {
    outline: none;
    box-shadow: none;
}

.hk-footer-bottom {
    border-top: 1px solid var(--hk-footer-border);
    padding-top: var(--hk-space-5);
    margin-top: var(--hk-space-6);
}

.hk-footer-legal a {
    color: #9096AD;
    text-decoration: none;
    font-size: var(--hk-text-sm);
}

.hk-footer-legal a:hover {
    color: #fff !important;
}

/* --- Dashboard (Admin / Super Admin) -------------------------------------------------
   Sidebar is a Bootstrap responsive offcanvas (.offcanvas-lg): a static
   260px column at lg+ and a slide-in drawer below it, triggered by the
   hamburger in .hk-dash-mobile-bar — same drawer pattern as the main
   navbar, just for the dashboard shell.

   Dark mode reads the same --hk-dark-bg / --hk-dark-glow-* tokens as the
   public pages (see tokens.css) instead of a parallel hardcoded palette, so
   the dashboard's dark canvas is the same continuous surface as Home/About/
   Contact — the sidebar and cards are translucent glass over it rather than
   flat opaque panels. ------------------------------------------------------ */
.hk-dashboard {
    display: flex;
    min-height: calc(100vh - 76px);
}

.hk-dashboard-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #F8FAFC;
    border-right: 1px solid var(--hk-border-soft);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Below lg, Bootstrap's .offcanvas-lg takes over as a fixed slide-in drawer —
   only pin the sidebar in place for the persistent desktop layout so we don't
   fight that positioning on mobile.

   This used to be position: sticky, but sticky never actually engages here —
   verified in a live browser: .hk-dashboard-sidebar is a flex item of
   .hk-dashboard (display: flex), and a sticky flex item whose height is
   stretched to match its sibling (the default align-items: stretch) does not
   stick in Chromium — getBoundingClientRect() proved it was tracking scrollY
   1:1 like plain static positioning, even though getComputedStyle reported
   "sticky". Confirmed switching .hk-dashboard to display:block made sticky
   engage, and forcing position:fixed on the sidebar worked immediately — so
   fixed is what's used here rather than fighting the flex/sticky interaction.
   That does give up the old "background column grows with the page" glass
   effect (the box is viewport-height now, not stretched to content height),
   traded for the sidebar actually never moving, which is the requirement. */
@media (min-width: 992px) {
    .hk-dashboard-sidebar {
        position: fixed;
        /* Must match body's own navbar-clearance padding-top (line ~23) —
           the floating navbar's actual bottom edge sits at 96px (16px inset
           + 64px height + 16px gap), so the sidebar starts flush below it. */
        top: 96px;
        left: 0;
        height: calc(100vh - 96px);
        overflow-y: auto;
    }

    .hk-dashboard-main {
        margin-left: 260px;
    }
}

.hk-dashboard-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--hk-border-soft);
}

.hk-dash-sidebar-footer {
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--hk-border-soft);
}

/* .hk-dash-mobile-bar nests inside .hk-dash-mainbar now (hamburger + title
   on the left, compact weather chip pinned right via ms-auto) — NOT the
   pre-existing .hk-dash-topbar (that class is the per-page header row used
   by favorites.html / my_listings.html / notifications.html, unrelated to
   this shared dashboard-shell bar; reusing its name would have leaked this
   divider onto those pages too). The divider that used to live on the
   mobile bar itself moved up to .hk-dash-mainbar so it spans the full row,
   not just the mobile-only sub-block. */
.hk-dash-mainbar {
    /* This row's two children (hamburger+title, and the weather chip pinned
       right via ms-auto) never shrink — on narrow phones their combined
       width doesn't fit in one line, and since body has overflow-x: hidden,
       the excess was silently clipped instead of visible/scrollable (the
       weather chip's temperature/condition/wind text was getting cut off
       on the right). Wrapping lets the chip drop to its own line instead of
       losing content. */
    flex-wrap: wrap;
    row-gap: .5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hk-border-soft);
}

.hk-dash-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--hk-border-soft);
}

.hk-dash-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--hk-border-soft);
}

.hk-dash-profile img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.hk-dash-profile .hk-dash-profile-name {
    font-weight: 600;
    font-size: .85rem;
    color: var(--hk-ink);
    line-height: 1.2;
}

.hk-dash-profile .hk-dash-profile-role {
    font-size: .72rem;
    color: var(--bs-primary);
    font-weight: 500;
}

/* --- Profile card header (dashboard/partials/profile_card.html) — shared
   avatar + name + role treatment across Explorer, Content Provider and
   Super Admin dashboards, so every role gets the same polished pane. ------ */
.hk-profile-avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bs-primary-border-subtle);
    box-shadow: var(--hk-shadow-sm);
}

.hk-profile-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--hk-ink);
    line-height: 1.25;
}

.hk-profile-role-badge {
    display: inline-block;
    margin-top: 4px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    border-radius: var(--hk-radius-pill);
    padding: 3px 10px;
}

/* --- Weather Reporting Engine widget (dashboard sidebar) — sits inline in
   the unified sidebar panel as a thin-bordered, transparent block rather
   than a standalone floating card. -------------------------------------- */
.hk-weather-widget {
    border: 1px solid #E2E8F0;
    border-radius: var(--hk-radius-lg);
    background: transparent;
    padding: 12px 14px;
    margin-bottom: 16px;
    transition: background-color .3s ease, border-color .3s ease;
}

.hk-weather-widget-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hk-ink-soft);
    margin-bottom: 8px;
}

.hk-weather-widget-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hk-weather-emoji {
    font-size: 1.75rem;
    line-height: 1;
}

.hk-weather-main {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hk-weather-temp {
    font-family: var(--hk-font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--hk-ink);
}

.hk-weather-condition {
    font-size: .74rem;
    color: var(--hk-ink-soft);
}

.hk-weather-wind {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--hk-border-soft);
    font-size: .74rem;
    color: var(--hk-ink-soft);
}

html[data-theme="dark"] .hk-weather-widget {
    background: transparent;
    border-color: rgba(255, 255, 255, .08);
}

/* Compact variant — lives in the dashboard main-content topbar (see
   base_dashboard.html) rather than the sidebar, so it reads as a single-line
   utility chip: no "LOCAL WEATHER" label, wind folded inline behind a
   divider instead of its own bordered row. */
.hk-weather-widget-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    margin-bottom: 0;
}

.hk-weather-widget-compact .hk-weather-emoji {
    font-size: 1.3rem;
}

.hk-weather-widget-compact .hk-weather-temp {
    font-size: 1rem;
}

.hk-weather-wind-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 10px;
    margin-left: 2px;
    border-left: 1px solid var(--hk-border-soft);
    font-size: .74rem;
    color: var(--hk-ink-soft);
    white-space: nowrap;
}

.hk-dash-link {
    color: #64748B;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 500;
    font-size: .92rem;
    transition: background-color .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
}

.hk-dash-link:hover {
    background-color: rgba(var(--bs-primary-rgb), .06);
    color: var(--bs-primary);
    transform: translateX(2px);
}

.hk-dash-link.active {
    background-color: rgba(var(--bs-primary-rgb), .07);
    color: var(--bs-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

/* The main workspace follows the shared token system like every other page
   — .navbar and .hk-dashboard-sidebar read the same live theme tokens, so
   toggling data-theme now repaints the whole dashboard (chrome + canvas)
   as one atomic switch instead of just the surrounding chrome. */
.hk-dashboard-main {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    /* .hk-dashboard-main is a flex item of .hk-dashboard (display: flex) and
       is effectively the ONLY item in that row at every width — the sidebar
       is always taken out of flow (position: fixed on desktop, Bootstrap's
       .offcanvas-lg fixed-and-hidden below lg). A flex item still can't
       shrink past its content's intrinsic width by default (min-width: auto),
       so a wide table (e.g. Manage Users) was forcing this whole column
       wider than the viewport instead of staying put and letting its own
       .table-responsive scroll internally — and since body has
       overflow-x: hidden (see body{} above), that overflow wasn't even
       reachable via a page-level scrollbar, just silently clipped. */
    min-width: 0;
}

.hk-dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.hk-theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--hk-border-soft);
    background: var(--hk-surface);
    color: var(--hk-ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
}

.hk-theme-toggle:hover {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

/* --- Stat cards: bento-grid metric widgets ---------------------------------------------
   .hk-stat-icon carries a soft translucent color glow behind the glyph
   instead of a flat outlined box; the accent is picked per metric via a
   modifier class (indigo/gold/emerald/rose) reusing the existing color
   primitives from tokens.css rather than introducing new literals. -------- */
.hk-stat-card {
    position: relative;
    border: 1px solid var(--hk-border-soft);
    border-radius: var(--hk-radius-xl);
    background: var(--hk-surface);
    box-shadow: var(--hk-shadow-sm);
    padding: 1.25rem 1.35rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    transition: transform var(--hk-duration-luxury) var(--hk-ease-out), box-shadow var(--hk-duration-luxury) ease, border-color var(--hk-duration-luxury) ease, background-color var(--hk-duration-luxury) ease;
}

.hk-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hk-shadow-hover);
    border-color: rgba(var(--bs-primary-rgb), .35);
}

.hk-stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--hk-glow-ring-color), inset 0 0 24px -8px var(--hk-glow-ring-color);
    opacity: 0;
    transition: opacity var(--hk-duration-luxury) var(--hk-ease-out);
    pointer-events: none;
}

.hk-stat-card:hover::after {
    opacity: 1;
}

.hk-stat-card .hk-stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.hk-stat-icon--indigo { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.hk-stat-icon--gold { background: var(--hk-gold-bg); color: var(--hk-gold-600); }
.hk-stat-icon--emerald { background: var(--hk-emerald-bg); color: var(--hk-emerald); }
.hk-stat-icon--rose { background: var(--hk-red-bg); color: var(--hk-red-600); }
.hk-stat-icon--sky { background: var(--hk-sky-bg); color: var(--hk-sky); }
.hk-stat-icon--violet { background: var(--hk-violet-bg); color: var(--hk-purple); }

/* --- Post Performance: YouTube-Studio-style engagement metric cards --------------------
   Same surface/shadow/radius language as .hk-stat-card, plus a trend badge
   (up/down/new) pairing each count with its week-over-week delta. -------- */
.hk-yt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.hk-yt-card {
    border: 1px solid var(--hk-border-soft);
    border-radius: var(--hk-radius-xl);
    background: var(--hk-surface);
    box-shadow: var(--hk-shadow-sm);
    padding: 1.25rem 1.35rem;
    transition: transform var(--hk-duration-luxury) var(--hk-ease-out), box-shadow var(--hk-duration-luxury) ease;
}

.hk-yt-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hk-shadow-hover);
}

.hk-yt-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .9rem;
}

.hk-trend-badge {
    font-size: .7rem;
    font-weight: 700;
    padding: .3rem .6rem;
    border-radius: var(--hk-radius-pill);
    white-space: nowrap;
}

.hk-trend-up { background: var(--hk-emerald-bg); color: var(--hk-emerald); }
.hk-trend-down { background: var(--hk-red-bg); color: var(--hk-red-600); }
.hk-trend-flat { background: #F1F5F9; color: var(--hk-ink-soft); }

/* --- Post Analytics drill-down table: clickable rows expand a detail tray ------------- */
.hk-analytics-table thead.table-light th {
    background-color: #F8F9FD;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hk-ink-soft);
    border-bottom: none;
}

html[data-theme="dark"] .hk-analytics-table thead.table-light th {
    background-color: rgba(255, 255, 255, .03);
}

.hk-analytics-row {
    cursor: pointer;
}

.hk-analytics-row:hover {
    background-color: var(--bs-primary-bg-subtle);
}

.hk-tray-chevron {
    transition: transform .2s ease;
    color: var(--hk-ink-soft);
}

.hk-analytics-row[aria-expanded="true"] .hk-tray-chevron {
    transform: rotate(180deg);
}

.hk-tray {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75rem;
    padding: 1.1rem 1.5rem;
    background: #F8F9FD;
    border-top: 1px dashed var(--hk-border-soft);
    border-bottom: 1px dashed var(--hk-border-soft);
}

.hk-tray-metric {
    text-align: center;
    min-width: 84px;
}

.hk-tray-metric-value {
    font-family: var(--hk-font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--hk-ink);
    line-height: 1.1;
}

.hk-tray-metric-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hk-ink-soft);
    margin-top: .25rem;
}

.hk-tray-actions {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.hk-stat-card .hk-stat-value {
    font-family: var(--hk-font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--hk-ink);
    line-height: 1.1;
}

.hk-stat-card .hk-stat-label {
    color: var(--hk-ink-soft);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: .2rem;
}

.hk-dash-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: #94A3B8;
    margin: 1.75rem 0 .9rem;
}

.hk-dash-section-title:first-child {
    margin-top: 0;
}

.hk-dashboard-main .card {
    border: none;
    border-radius: var(--hk-radius-card);
    box-shadow: var(--hk-shadow-sm);
}

.hk-dashboard-main .card-header {
    border-radius: var(--hk-radius-card) var(--hk-radius-card) 0 0 !important;
    border-bottom: 1px solid var(--hk-border-soft);
}

/* Overview's "Recent Admin Requests" / "Recent Logins" / "Recent Contact
   Messages" cards each render a `d-flex justify-content-between` row: a
   free-text span (name, email, or a spam submission's subject/URL) next to
   a fixed badge or timestamp. A flex item can't shrink below its content's
   intrinsic width by default, and a long unbroken token (a URL with no
   spaces is the real-world case that surfaced this — see contact form spam)
   doesn't wrap on its own — so it was forcing the whole row wider than its
   card and pushing the badge/timestamp out past the visible edge, silently
   clipped by body's overflow-x: hidden instead of visible or reachable. */
.hk-dashboard-main .list-group-item > span:first-child {
    min-width: 0;
    overflow-wrap: break-word;
}

.hk-dashboard-main .list-group-item .badge {
    flex-shrink: 0;
    margin-left: .5rem;
}

.hk-dashboard-main .table thead.table-light th {
    background-color: #F8F9FD;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hk-ink-soft);
    border-bottom: none;
}

html[data-theme="dark"] .hk-dashboard-main .table thead.table-light th {
    background-color: rgba(255, 255, 255, .03);
}

.hk-chart-card {
    background: var(--hk-surface);
    border-radius: var(--hk-radius-card);
    box-shadow: var(--hk-shadow-sm);
    padding: 1.25rem;
    height: 100%;
}

/* --- Dashboard dark mode --------------------------------------------------------------
   Toggled by adding data-theme="dark" to <html>, persisted in localStorage (see
   dashboard/base_dashboard.html). .hk-dashboard-sidebar gets its own opaque-panel
   treatment below (a single solid slate column, not a glass/blur card), while
   .hk-dashboard-main now follows the same shared tokens as the rest of the site —
   see the .hk-dashboard-main rule above. ------------------------------------------ */
html[data-theme="dark"] .hk-dashboard-sidebar {
    background: #0F172A;
    border-right-color: rgba(255, 255, 255, .06);
    color: #E4E6F1;
}

html[data-theme="dark"] .hk-dash-brand {
    border-bottom-color: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .hk-dash-sidebar-footer {
    border-top-color: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .hk-dash-profile-name {
    color: #F1F2F8;
}

/* --- Dashboard: Posts toolbar & table polish ----------------------------------------- */
.hk-filter-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--hk-ink-soft);
    margin-bottom: .35rem;
    display: block;
}

.hk-dashboard-main .form-select,
.hk-dashboard-main .form-control {
    border-color: var(--hk-border-soft);
    border-radius: var(--hk-radius-md);
    font-size: .85rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.hk-dashboard-main .form-select:focus,
.hk-dashboard-main .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .12);
}

/* The compact toolbar padding above has the same specificity as Bootstrap's
   .form-floating > .form-select/.form-control padding, and loads after it —
   so on dashboard pages using floating-label fields (e.g. listing_submit.html)
   it was winning and collapsing the top padding the floated label needs room
   for, making select values render on top of their label. Restore it here. */
.hk-dashboard-main .form-floating > .form-select,
.hk-dashboard-main .form-floating > .form-control {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

.hk-dashboard-main .btn {
    border-radius: var(--hk-radius-md);
    font-size: .86rem;
}

/* Consolidated filter strip (replaces the old two-row Bootstrap grid form):
   one flex row that wraps as needed, so search + every select + the apply
   button read as a single control instead of a disjointed cluster. */
.hk-toolbar-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}

.hk-toolbar-strip .hk-toolbar-search {
    flex: 1 1 220px;
    min-width: 180px;
}

.hk-toolbar-strip .hk-toolbar-field {
    flex: 0 1 auto;
    min-width: 132px;
}

.hk-toolbar-strip .form-select,
.hk-toolbar-strip .form-control {
    background-color: var(--hk-surface);
}

.hk-toolbar-apply-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: var(--hk-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

/* --- Bulk action bar: glass pill row with a gradient primary action ------------------- */
.hk-bulkbar {
    border: 1px solid var(--hk-border-soft);
    border-radius: var(--hk-radius-xl);
    background: var(--hk-surface);
    padding: .85rem 1.1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.hk-bulkbar.hk-bulkbar-active {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.hk-bulkbar-count {
    font-size: .82rem;
    font-weight: 600;
    color: var(--hk-ink-soft);
}

.hk-bulkbar.hk-bulkbar-active .hk-bulkbar-count {
    color: var(--bs-primary);
}

.hk-bulkbar-apply-btn {
    background: linear-gradient(90deg, var(--hk-blue-600), var(--hk-violet-500));
    border: none;
    color: #fff;
    font-weight: 600;
    padding: .55rem 1.4rem;
    border-radius: var(--hk-radius-md);
    box-shadow: var(--hk-shadow-sm);
    transition: transform .2s var(--hk-ease-out), box-shadow .2s ease, filter .2s ease;
}

.hk-bulkbar-apply-btn:hover {
    filter: brightness(1.08);
    box-shadow: var(--hk-shadow-md);
}

.hk-bulkbar-apply-btn:active {
    transform: scale(.98);
}

.hk-post-thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: var(--hk-shadow-sm);
}

.hk-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .7rem;
    border-radius: var(--hk-radius-pill);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.hk-status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: currentColor;
}

.hk-status-approved { background: var(--hk-emerald-bg); color: var(--hk-emerald); }
.hk-status-pending { background: var(--bs-warning-bg-subtle); color: #B8790A; }
.hk-status-rejected { background: #FCE9EC; color: #dc3545; }
.hk-status-changes_requested { background: var(--bs-info-bg-subtle); color: #0C7C92; }
.hk-status-draft { background: #F1F2F8; color: var(--hk-ink-soft); }

.hk-type-pill {
    display: inline-block;
    padding: .3rem .62rem;
    border-radius: var(--hk-radius-pill);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.hk-type-business { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.hk-type-property { background: #F1E8FD; color: #7C3AED; }
.hk-type-job { background: var(--hk-emerald-bg); color: var(--hk-emerald); }
.hk-type-event { background: #FFEFE0; color: #C2691A; }
.hk-type-news { background: #FDE4EE; color: #C22C79; }
.hk-type-project { background: var(--hk-gold-bg); color: var(--hk-gold-600); }

.hk-row-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F8F9FD;
    color: var(--hk-ink-soft);
    border: none;
    font-size: .85rem;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.hk-row-action-btn:hover {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    transform: translateY(-1px);
}

.hk-row-action-btn.hk-row-action-danger:hover {
    background: #FCE9EC;
    color: #dc3545;
}

.hk-dashboard-main .table tbody tr {
    transition: background-color .12s ease;
}

.hk-dashboard-main .table tbody tr:hover {
    background-color: #FAFBFF;
}

.hk-dashboard-main .table td {
    vertical-align: middle;
}

.hk-post-title-off {
    opacity: .55;
}

.hk-toolbar-card .card-body {
    padding: 1.25rem 1.4rem;
}

/* --- Enterprise data grid card (dashboard/users.html and similar list
   screens): a crisp white card with a tighter, flatter radius than the
   default --hk-radius-card, plus a contextual toolbar docked to its top
   edge for bulk actions instead of a separate floating pill above it. ---- */
.hk-toolbar-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.hk-toolbar-count {
    font-size: .82rem;
    font-weight: 600;
    color: var(--hk-ink-soft);
    white-space: nowrap;
}

.hk-data-card {
    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
    overflow: hidden;
}

.hk-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid #F1F5F9;
    transition: background-color .2s ease;
}

.hk-table-toolbar.hk-bulkbar-active {
    background: var(--bs-primary-bg-subtle);
}

.hk-table-toolbar .hk-bulkbar-apply-btn:disabled {
    opacity: 1;
    background: #F8F9FD;
    color: var(--hk-ink-soft);
    filter: none;
    box-shadow: none;
    cursor: not-allowed;
}

.hk-data-card .table {
    --bs-table-border-color: #F1F5F9;
}

.hk-data-card .table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748B;
    background: #F8FAFC;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid #F1F5F9;
}

.hk-data-card .table tbody td {
    padding: .85rem 1.1rem;
}

.hk-data-card .table tbody tr:last-child td {
    border-bottom: none;
}

.hk-data-card .table tbody tr:hover {
    background-color: #F8FAFC;
    transition: background-color .2s ease;
}

html[data-theme="dark"] .hk-data-card {
    background: var(--hk-surface);
    border-color: var(--hk-border-soft);
    box-shadow: var(--hk-shadow-sm);
}

html[data-theme="dark"] .hk-data-card .table {
    --bs-table-border-color: var(--hk-border-soft);
}

html[data-theme="dark"] .hk-data-card .table thead th {
    color: var(--hk-ink-soft);
    background: rgba(255, 255, 255, .03);
    border-bottom-color: var(--hk-border-soft);
}

html[data-theme="dark"] .hk-data-card .table tbody tr:hover {
    background-color: rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .hk-table-toolbar {
    border-bottom-color: var(--hk-border-soft);
}

html[data-theme="dark"] .hk-table-toolbar .hk-bulkbar-apply-btn:disabled {
    background: #1D2032;
    color: var(--hk-ink-soft);
}

.hk-status-active {
    background: var(--hk-emerald-bg);
    color: var(--hk-emerald-600);
}

.hk-row-action-btn.hk-row-action-warning:hover {
    background: var(--bs-warning-bg-subtle);
    color: #B8790A;
}

/* .hk-dash-link is the sidebar's own nav item, so it stays theme-reactive
   alongside .hk-dashboard-sidebar above. */
html[data-theme="dark"] .hk-dash-link {
    color: #94A3B8;
}

html[data-theme="dark"] .hk-dash-link:hover {
    background-color: rgba(255, 255, 255, .08);
    color: #C7D2FE;
}

html[data-theme="dark"] .hk-dash-link.active {
    background-color: rgba(255, 255, 255, .08);
    color: #F1F5F9;
    box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

html[data-theme="dark"] .hk-theme-toggle {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
    color: #E4E6F1;
}

.hk-status-active { background: var(--hk-emerald-bg); color: var(--hk-emerald); }
.hk-status-inactive { background: #F1F2F8; color: var(--hk-ink-soft); }

/* --- Manage Categories: accordion drawer table ----------------------------------------- */
.hk-cat-card {
    background: transparent;
}

.hk-cat-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.hk-cat-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.hk-cat-table thead th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hk-ink-soft);
    padding: .9rem 1.35rem;
    border-bottom: 1px solid #E2E8F0;
    text-align: left;
}

.hk-cat-table tbody td {
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid #E2E8F0;
    vertical-align: middle;
}

.hk-cat-row-top {
    cursor: pointer;
    transition: background-color .15s ease;
}

.hk-cat-row-top:hover {
    background-color: #F8FAFC;
}

.hk-cat-chevron {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--hk-ink-soft);
    margin-right: .35rem;
    transition: transform .25s var(--hk-ease-out), background-color .15s ease, color .15s ease;
}

.hk-cat-row-top:not(.collapsed) .hk-cat-chevron {
    transform: rotate(90deg);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.hk-cat-subcount {
    display: inline-block;
    margin-left: .55rem;
    padding: .12rem .55rem;
    border-radius: var(--hk-radius-pill);
    background: #F1F2F8;
    color: var(--hk-ink-soft);
    font-size: .68rem;
    font-weight: 700;
}

.hk-cat-drawer-cell {
    padding: 0 !important;
    border-bottom: 1px solid #E2E8F0;
}

.hk-cat-drawer-row:last-child .hk-cat-drawer-cell {
    border-bottom: none;
}

.hk-cat-drawer {
    background: var(--hk-gray-50);
    padding: .9rem 1.35rem 1.15rem 3.4rem;
}

.hk-cat-subrow {
    display: grid;
    grid-template-columns: minmax(140px, 1.6fr) minmax(120px, 1fr) 90px 90px auto;
    align-items: center;
    gap: .5rem .75rem;
    padding: .6rem .85rem;
    border-radius: 10px;
    transition: background-color .15s ease;
}

.hk-cat-subrow:hover {
    background: var(--hk-surface);
}

.hk-cat-subrow + .hk-cat-subrow {
    margin-top: .2rem;
}

.hk-cat-subrow-head {
    padding: 0 .85rem .5rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hk-ink-soft);
}

.hk-cat-subrow-head:hover {
    background: transparent;
}

.hk-cat-sub-col-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.hk-cat-sub-label {
    font-weight: 600;
    color: var(--hk-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-cat-sub-col-type {
    color: var(--hk-ink-soft);
    font-size: .78rem;
}

@media (max-width: 767.98px) {
    .hk-cat-subrow {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .hk-cat-subrow-head {
        display: none;
    }

    .hk-cat-sub-col-actions {
        justify-content: flex-start !important;
    }
}

.hk-cat-add-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .8rem;
    padding: .45rem .9rem;
    border-radius: var(--hk-radius-pill);
    border: 1.5px dashed var(--hk-border-soft);
    background: transparent;
    color: var(--bs-primary);
    font-size: .82rem;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}

.hk-cat-add-sub-btn:hover {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
}

.hk-cat-empty-sub {
    color: var(--hk-ink-soft);
    font-size: .85rem;
    padding: .5rem .85rem;
}

/* "Add a New Listing" quick-pick grid (my_listings.html / admin_dashboard.html)
   — one card per top-level category. align-content:start keeps a card that
   expands its subcategory drawer from stretching every other card in the
   same row to match its height (CSS Grid's default stretch behavior). */
.hk-quickadd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    align-content: start;
}

.hk-quickadd-card {
    display: flex;
    flex-direction: column;
    background: var(--hk-surface);
    border: 1px solid var(--hk-border-soft);
    border-radius: 12px;
    box-shadow: var(--hk-shadow-sm);
    padding: 1.1rem 1rem .9rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hk-quickadd-card:hover {
    border-color: var(--bs-primary);
    box-shadow: var(--hk-shadow-hover);
    transform: translateY(-2px);
}

.hk-quickadd-card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    gap: .6rem;
    color: var(--hk-ink);
}

.hk-quickadd-card-link-static {
    cursor: default;
}

.hk-quickadd-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    flex-shrink: 0;
}

.hk-quickadd-label {
    font-weight: 700;
    font-size: .88rem;
    line-height: 1.25;
}

.hk-quickadd-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .9rem;
    padding: .4rem .7rem;
    border: none;
    border-radius: var(--hk-radius-pill);
    background: var(--hk-gray-100);
    color: var(--hk-ink-soft);
    font-size: .74rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.hk-quickadd-trigger:hover,
.hk-quickadd-trigger:focus-visible {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    outline: none;
}

.hk-quickadd-trigger i {
    transition: transform .2s ease;
}

.hk-quickadd-trigger:not(.collapsed) i {
    transform: rotate(180deg);
}

.hk-quickadd-subgrid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--hk-border-soft);
}

.hk-quickadd-sub-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    border-radius: var(--hk-radius-pill);
    background: var(--hk-gray-50);
    border: 1px solid var(--hk-border-soft);
    color: var(--hk-ink);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.hk-quickadd-sub-pill:hover {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

html[data-theme="dark"] .hk-quickadd-trigger {
    background: rgba(255, 255, 255, .06);
    color: var(--hk-ink-soft);
}

html[data-theme="dark"] .hk-quickadd-sub-pill {
    background: rgba(255, 255, 255, .03);
}

html[data-theme="dark"] .hk-cat-table thead th,
html[data-theme="dark"] .hk-cat-table tbody td,
html[data-theme="dark"] .hk-cat-drawer-cell {
    border-bottom-color: var(--hk-border-soft);
}

html[data-theme="dark"] .hk-cat-row-top:hover {
    background-color: rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .hk-cat-drawer {
    background: rgba(255, 255, 255, .02);
}

html[data-theme="dark"] .hk-cat-subrow:hover {
    background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .hk-cat-subcount {
    background: rgba(255, 255, 255, .08);
    color: #C7D2FE;
}

/* --- Inline moderation panel (approve/reject/changes-requested with a note) ----------- */
.hk-review-form {
    background: #F8F9FD;
    border: 1px solid var(--hk-border-soft);
    border-radius: var(--bs-border-radius-lg);
    padding: 14px 16px;
}

/* --- Community engagement (listing detail pages) -------------------------------------- */
.hk-engage-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.hk-engage-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--hk-radius-pill);
    border: 1.5px solid var(--hk-border-soft);
    background: var(--hk-surface);
    color: var(--hk-ink-soft);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.hk-engage-btn:hover {
    border-color: var(--bs-primary-border-subtle);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    transform: translateY(-2px);
}

.hk-engage-btn.hk-like-active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.hk-engage-btn.hk-fav-active {
    background: #E0426B;
    border-color: #E0426B;
    color: #fff;
}

.hk-engage-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--hk-radius-pill);
    background: #F8F9FD;
    color: var(--hk-ink-soft);
    font-weight: 600;
    font-size: .85rem;
}

.hk-engage-stat .bi-star-fill {
    color: var(--hk-gold);
}

.hk-share-card,
.hk-comments-card,
.hk-reviews-card {
    background: var(--hk-surface);
    border-radius: var(--hk-radius-card);
    box-shadow: var(--hk-shadow-sm);
    padding: 1.4rem;
    height: 100%;
}

.hk-share-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: 1.5px solid var(--hk-border-soft);
    background: var(--hk-surface);
    color: var(--hk-ink-soft);
    transition: all .2s ease;
}

.hk-share-icon-btn:hover {
    transform: translateY(-3px);
    color: #fff;
    border-color: transparent;
}

.hk-share-whatsapp:hover { background: #25D366; }
.hk-share-facebook:hover { background: #1877F2; }
.hk-share-telegram:hover { background: #229ED9; }
.hk-share-twitter:hover { background: #000; }
.hk-share-copy:hover { background: var(--bs-primary); }

/* --- Floating WhatsApp action button (site-wide, see base.html) ------------
   Fixed bottom-right on every page, below the navbar/dropdown/modal z-index
   band so it never fights the offcanvas drawer or a modal, but stays above
   ordinary page content. The ping ring and glass tooltip are pure CSS; only
   the tooltip's auto-show-then-dismiss timing lives in main.js. -------------- */
.hk-whatsapp-fab-wrap {
    position: fixed;
    right: var(--hk-space-5);
    bottom: var(--hk-space-5);
    z-index: 1035;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--hk-space-3);
}

/* Public/marketing widget only — hidden the moment the body is inside an
   authenticated dashboard shell (see body_class on dashboard/base_dashboard.html). */
body.hk-dashboard-active .hk-whatsapp-fab-wrap {
    display: none;
}

.hk-whatsapp-fab {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--hk-emerald-400), var(--hk-emerald-600));
    color: #fff;
    font-size: 1.6rem;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(15, 163, 107, 0.35);
    transition: transform var(--hk-duration-base) var(--hk-ease-out),
                box-shadow var(--hk-duration-base) var(--hk-ease-out);
}

.hk-whatsapp-fab:hover,
.hk-whatsapp-fab:focus-visible {
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 14px 38px rgba(15, 163, 107, 0.45);
}

.hk-whatsapp-fab:hover i,
.hk-whatsapp-fab:focus-visible i {
    transform: rotate(12deg);
}

.hk-whatsapp-fab i {
    position: relative;
    z-index: 1;
    transition: transform var(--hk-duration-base) var(--hk-ease-out);
}

.hk-whatsapp-fab-ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--hk-emerald-500);
    opacity: .35;
    animation: hk-whatsapp-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes hk-whatsapp-ping {
    0%   { transform: scale(1);    opacity: .35; }
    75%, 100% { transform: scale(1.7); opacity: 0; }
}

.hk-whatsapp-fab-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--hk-gold-400);
    border: 2px solid var(--hk-emerald-600);
    z-index: 2;
}

/* Glassmorphic chat-preview tooltip */
.hk-whatsapp-tooltip {
    max-width: 240px;
    padding: var(--hk-space-3);
    border-radius: var(--hk-radius-lg);
    background: rgba(17, 24, 39, .92);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    box-shadow: var(--hk-elevation-5);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--hk-duration-base) var(--hk-ease-out),
                transform var(--hk-duration-base) var(--hk-ease-out);
}

.hk-whatsapp-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hk-whatsapp-tooltip-title {
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: 2px;
}

.hk-whatsapp-tooltip-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    line-height: 1;
}

.hk-whatsapp-tooltip-close:hover {
    background: rgba(255, 255, 255, .22);
}

@media (prefers-reduced-motion: reduce) {
    .hk-whatsapp-fab-ping {
        animation: none;
        display: none;
    }
    .hk-whatsapp-fab,
    .hk-whatsapp-fab i,
    .hk-whatsapp-tooltip {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .hk-whatsapp-fab-wrap {
        right: var(--hk-space-4);
        bottom: var(--hk-space-4);
    }
    .hk-whatsapp-fab {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }
    .hk-whatsapp-tooltip {
        max-width: calc(100vw - 3.5rem);
    }
}

.hk-comment-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: var(--hk-gradient);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hk-comment-item,
.hk-review-item {
    background: #F8F9FD;
    border-radius: var(--bs-border-radius-lg);
    padding: 14px 16px;
}

/* Interactive 5-star picker for the review form */
.hk-star-picker {
    display: inline-flex;
    gap: 6px;
    font-size: 1.6rem;
    cursor: pointer;
}

.hk-star-picker i {
    color: #D8DAE8;
    transition: color .15s ease, transform .15s ease;
}

.hk-star-picker i.is-filled {
    color: var(--hk-gold);
}

.hk-star-picker i:hover {
    transform: scale(1.15);
}

/* Read-only star display for submitted reviews */
.hk-star-display {
    color: var(--hk-gold);
    font-size: .95rem;
    letter-spacing: 2px;
}

.hk-star-display .bi-star {
    color: #D8DAE8;
}

/* --- Gallery of Kuppam ------------------------------------------------------------------ */
.hk-gallery-item {
    position: relative;
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    box-shadow: var(--hk-shadow-sm);
}

.hk-gallery-item.hk-gallery-wide {
    aspect-ratio: 2.2 / 1;
}

.hk-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.hk-gallery-item:hover img {
    transform: scale(1.1);
}

.hk-gallery-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 10px 12px;
    background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

.hk-gallery-item:hover .hk-gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

/* --- Photo credits ------------------------------------------------------------------------ */
.hk-credits {
    font-size: .78rem;
    color: var(--hk-ink-soft);
}

.hk-credits summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
    color: var(--hk-ink-soft);
    transition: color var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-credits summary:hover {
    color: var(--hk-gold-600);
}

.hk-credits summary::marker,
.hk-credits summary::-webkit-details-marker {
    display: none;
    content: '';
}

.hk-credits summary::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-credits[open] summary::before {
    transform: rotate(45deg);
}

.hk-credits ul {
    columns: 2;
    margin-top: .75rem;
}

@media (max-width: 767.98px) {
    .hk-credits ul {
        columns: 1;
    }
}

/* --- Sitewide form polish (floating labels + validation feedback) -------------------- */
.form-control,
.form-select {
    border-color: var(--hk-border-soft);
    border-radius: var(--bs-border-radius-lg);
    transition: border-color var(--hk-duration-fast) var(--hk-ease-out),
                box-shadow var(--hk-duration-fast) var(--hk-ease-out),
                background-color var(--hk-duration-fast) var(--hk-ease-out);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .12);
}

.form-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--hk-ink);
}

/* Floating label wrapper — every text/email/tel/textarea/select input site-wide.
   The widget's own placeholder is kept (Django forms already set one) but hidden
   visually so it doesn't double up with the floated label. The wrapper itself
   lifts slightly on :focus-within, not just the control, so the whole field
   reads as one elevated unit rather than just a border flashing color. -------- */
.form-floating {
    transition: transform var(--hk-duration-fast) var(--hk-ease-out);
}

.form-floating:focus-within {
    transform: translateY(-1px);
}

.form-floating > .form-control,
.form-floating > .form-select {
    border-color: var(--hk-border-soft);
    border-radius: var(--bs-border-radius-lg);
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .12);
}

.form-floating > .form-control::placeholder {
    color: transparent;
}

.form-floating > label {
    color: var(--hk-ink-soft);
    transition: color var(--hk-duration-fast) var(--hk-ease-out);
}

.form-floating > textarea.form-control {
    height: auto;
    min-height: calc(3.5rem + 2px);
    padding-top: 1.625rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--bs-primary);
    opacity: 1;
}

/* Client-side validation states (main.js adds .was-validated on submit) —
   token-consistent success/error tints instead of Bootstrap's stock red/green. */
.was-validated .form-control:valid,
.was-validated .form-select:valid,
.was-validated .form-floating > .form-control:valid,
.was-validated .form-floating > .form-select:valid {
    border-color: var(--hk-emerald-500);
    background-image: none;
}

.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
    box-shadow: 0 0 0 .18rem rgba(15, 163, 107, .16);
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.was-validated .form-floating > .form-control:invalid,
.was-validated .form-floating > .form-select:invalid {
    border-color: var(--hk-red-600);
    background-image: none;
}

.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
    box-shadow: 0 0 0 .18rem rgba(220, 53, 69, .16);
}

/* Password field eye-toggle (sign in / register forms) */
.hk-password-field {
    position: relative;
}

.hk-password-field > .form-control {
    padding-right: 2.75rem;
}

.hk-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--hk-ink-soft);
    cursor: pointer;
    z-index: 5;
}

.hk-password-toggle:hover,
.hk-password-toggle:focus-visible {
    color: var(--bs-primary);
}

/* Inline validation — wrap a .form-floating (or any field block) in
   .hk-field-invalid when {{ field.errors }} is truthy; no widget changes needed. */
.hk-field-invalid > .form-control,
.hk-field-invalid > .form-select {
    border-color: var(--hk-red-600);
}

.hk-field-invalid > .form-control:focus,
.hk-field-invalid > .form-select:focus {
    box-shadow: 0 0 0 .18rem rgba(220, 53, 69, .15);
}

.hk-field-error {
    color: var(--hk-red-600);
    font-size: .8rem;
    margin-top: .35rem;
}

/* Working Days & Hours picker (WorkingDaysHoursWidget, core/forms.py) — one
   row per day: enable checkbox + label, then start/end time inputs either
   side of a "to" separator, all on one line on wider screens; stacks on
   mobile since a 4-up row doesn't fit a phone width. */
.hk-working-hours-picker {
    border: 1px solid var(--hk-border-soft);
    border-radius: var(--hk-radius-md);
    padding: .85rem 1rem;
    background: var(--hk-surface);
}

.hk-wh-row {
    display: grid;
    grid-template-columns: 9.5rem 1fr auto 1fr;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--hk-border-soft);
}

.hk-wh-row:last-of-type {
    border-bottom: none;
}

.hk-wh-day-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 0;
    font-size: .88rem;
    color: var(--hk-ink);
    cursor: pointer;
}

.hk-wh-time {
    min-width: 0;
}

.hk-wh-row:not(:has(.hk-wh-enable:checked)) .hk-wh-time {
    opacity: .45;
    pointer-events: none;
}

.hk-wh-sep {
    font-size: .8rem;
    color: var(--hk-ink-soft);
    text-align: center;
}

@media (max-width: 575.98px) {
    .hk-wh-row {
        grid-template-columns: 1fr;
        gap: .35rem;
    }
    .hk-wh-sep {
        text-align: left;
        padding-left: .1rem;
    }
}

/* Password strength meter (register form) — hidden until the field has a
   value, so it doesn't clutter the form before the user starts typing. */
.hk-password-strength {
    margin-top: -.75rem;
    margin-bottom: 1rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .2s ease, opacity .2s ease, margin .2s ease;
}

.hk-password-strength.is-visible {
    max-height: 10rem;
    opacity: 1;
}

.hk-password-strength-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--hk-border-soft);
    overflow: hidden;
    margin-bottom: .5rem;
}

.hk-password-strength-bar > span {
    display: block;
    height: 100%;
    width: 0;
    background: transparent;
    transition: width .2s ease, background-color .2s ease;
}

.hk-password-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem .75rem;
    font-size: .78rem;
    color: var(--hk-ink-soft);
}

.hk-password-checklist li {
    display: flex;
    align-items: center;
    gap: .35rem;
    transition: color .15s ease;
}

.hk-password-checklist li::before {
    content: "\25CB";
    font-size: .7rem;
    color: var(--hk-border-soft);
}

.hk-password-checklist li.is-met {
    color: var(--hk-emerald);
}

.hk-password-checklist li.is-met::before {
    content: "\2713";
    color: var(--hk-emerald);
}

/* Submit-button loading state — prevents duplicate submissions while the
   POST round-trip (full page reload) is in flight. */
.hk-btn-loading {
    opacity: .85;
    cursor: progress;
    pointer-events: none;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-floating > .form-control,
html[data-theme="dark"] .form-floating > .form-select {
    background-color: var(--hk-surface);
    border-color: var(--hk-gray-800);
    color: var(--hk-ink);
}

/* Bootstrap's stock select chevron is baked in as a fixed-gray SVG data-URI
   (--bs-form-select-bg-img) that can't read a CSS custom property from
   inside the url() — so it has to be repointed to a light-matching stroke
   color explicitly here rather than via a var(), unlike every other
   dark-mode override on this page. */
html[data-theme="dark"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E4E6F1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .form-floating > label {
    color: #9AA0BE;
}

/* --- Sitewide pagination polish ------------------------------------------------------- */
.pagination {
    gap: 6px;
}

.pagination .page-link {
    border: none;
    border-radius: var(--hk-radius-pill);
    color: var(--hk-ink-soft);
    font-weight: 600;
    min-width: 40px;
    text-align: center;
    padding: .5rem .85rem;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.pagination .page-link:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    transform: translateY(-1px);
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .15);
}

.pagination .page-item.active .page-link {
    background: var(--hk-gradient);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    background: transparent;
    color: var(--hk-ink-soft);
    opacity: .55;
}

html[data-theme="dark"] .pagination .page-link {
    color: #9AA0BE;
}

html[data-theme="dark"] .pagination .page-link:hover {
    background-color: rgba(var(--bs-primary-rgb), .18);
}

/* --- Sitewide dark theme: remaining components that use a literal color
   instead of a token (everything else already flips via the tokens redefined
   at the top of this file under html[data-theme="dark"]) ------------------- */
html[data-theme="dark"] .hk-card-icon-btn,
html[data-theme="dark"] .hk-meta-item,
html[data-theme="dark"] .hk-description-box,
html[data-theme="dark"] .hk-engage-stat,
html[data-theme="dark"] .hk-comment-item,
html[data-theme="dark"] .hk-review-item,
html[data-theme="dark"] .hk-tray,
html[data-theme="dark"] .hk-review-form {
    background-color: #1D2032;
}

html[data-theme="dark"] .hk-meta-item:hover {
    background-color: var(--bs-primary-bg-subtle);
}

html[data-theme="dark"] .hk-card-img.hk-img-loading,
html[data-theme="dark"] .hk-detail-img.hk-img-loading {
    background: linear-gradient(90deg, #1D2032 25%, #262A3D 37%, #1D2032 63%);
    background-size: 400% 100%;
}

html[data-theme="dark"] .hk-skeleton {
    background-color: #1D2032;
}

html[data-theme="dark"] .hk-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}

html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--hk-ink-soft);
}

html[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1) brightness(1.8);
}

/* Bootstrap text-color utilities (.text-muted, .text-dark) are used across
   every template for card titles and secondary copy but aren't theme-aware
   by default — left alone, they render near-invisible on a dark surface. */
html[data-theme="dark"] .text-muted {
    color: var(--hk-ink-soft) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body {
    color: var(--hk-ink) !important;
}

html[data-theme="dark"] .text-secondary {
    color: var(--hk-ink-soft) !important;
}

/* The footer (templates/base.html) is always visually dark regardless of
   the light/dark theme toggle (--hk-footer-bg: var(--hk-dark-bg)), so in
   light mode its .text-secondary text was still using Bootstrap's
   light-mode default color, which only reached ~4.0-4.3:1 against the
   footer's dark background (WCAG AA needs 4.5:1) — axe-core flagged this
   on every page. --hk-ink-soft isn't right here: it was just tuned for
   *light* backgrounds (see --hk-gray-500 above) and would read even worse
   against a dark one (3.15:1) — this needs its own lighter value, confirmed
   via the WCAG relative-luminance formula: #9CA3AF reaches 7.45:1 against
   the footer's dark background. Scoped to the footer only; everywhere else
   .text-secondary is against a light background and already passes. */
footer .text-secondary {
    color: #9CA3AF !important;
}

html[data-theme="dark"] .bg-white {
    background-color: var(--hk-surface) !important;
}

html[data-theme="dark"] .bg-light {
    background-color: #171A28 !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--hk-border-soft) !important;
}

html[data-theme="dark"] .card {
    background-color: var(--hk-surface);
    color: var(--hk-ink);
}

/* Bootstrap's .btn-close renders a dark icon meant for light backgrounds —
   it disappears against the dark drawer/sidebar surfaces used in dark
   theme, so it needs the same light variant Bootstrap ships as
   .btn-close-white. */
html[data-theme="dark"] .hk-nav-drawer .btn-close,
html[data-theme="dark"] .hk-dashboard-sidebar .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] hr {
    border-color: var(--hk-border-soft);
    opacity: 1;
}

html[data-theme="dark"] .hk-whatsapp-tooltip {
    background: rgba(10, 11, 22, .92);
    border-color: rgba(255, 255, 255, .08);
}

.hk-location-trigger {
    border: 1px solid var(--hk-border-soft);
    color: inherit;
    white-space: nowrap;
}

.hk-location-trigger:hover,
.hk-location-trigger:focus-visible {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* Unlike the nav links, .hk-location-trigger's "color: inherit" doesn't
   reliably pick up a light color from an ancestor in dark mode, leaving its
   pin icon/text the same near-black as the now-dark glass navbar background
   — invisible. Every other navbar action button (.hk-theme-toggle, the
   language switcher) already sets its own explicit dark-theme color for
   this reason; this one was missing it. */
html[data-theme="dark"] .navbar .hk-location-trigger {
    color: var(--hk-ink-soft);
    border-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .navbar .hk-location-trigger:hover,
html[data-theme="dark"] .navbar .hk-location-trigger:focus-visible {
    color: #fff;
    border-color: var(--bs-primary);
}

/* Same gap, different navbar state: on the homepage hero the navbar starts
   transparent over a dark background image (.hk-navbar-transparent, see the
   .navbar-brand/.nav-link white-text rules above) regardless of the site's
   light/dark theme — this button needs its own white treatment there too,
   then to hand back off to the normal ink color once .hk-navbar-solid is
   added on scroll (mirrors .hk-theme-toggle's same two extra states). */
.hk-navbar-transparent .hk-location-trigger {
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
}

.hk-navbar-transparent .hk-location-trigger:hover,
.hk-navbar-transparent .hk-location-trigger:focus-visible {
    color: #fff;
    border-color: #fff;
    background-color: rgba(255, 255, 255, .16);
}

.hk-navbar-transparent.hk-navbar-solid .hk-location-trigger {
    color: var(--hk-ink);
    border-color: var(--hk-border-soft);
}

.hk-location-modal .modal-content {
    border-radius: 8px;
}

.hk-location-modal #hkLocationResults {
    max-height: 45vh;
    overflow-y: auto;
}

@media (max-width: 575.98px) {
    body {
        overflow-x: clip;
    }

    [data-aos] {
        transform: none !important;
    }

    /* A city name (or "Choose city") plus the brand pill and hamburger
       competing for one navbar row doesn't have enough space at phone
       widths no matter how the trigger's own width is capped — a fixed
       max-width just moved the overflow into the label itself, forcing an
       ellipsis (previously observed truncating "Choose city" to "Choos…"
       at 375px). Dropping the text label and keeping only the pin icon
       removes the space contention at its source instead of clipping
       around it: the icon alone is a well-understood "location" affordance,
       the button's aria-label still names it for assistive tech, and the
       full city name is one tap away in the picker modal either way. */
    .hk-location-trigger span {
        display: none;
    }

    .hk-location-trigger {
        padding-left: .55rem;
        padding-right: .55rem;
    }
}