/* ==========================================================================
   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;
}

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;
}

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),
                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%;
}

.navbar:not(.hk-navbar-transparent) {
    background-color: rgba(255, 255, 255, .72) !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, .6) !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.72) !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, .6) !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-soft) !important;
}

.hk-navbar-transparent.hk-navbar-solid .navbar-brand {
    color: var(--hk-ink) !important;
}

.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);
}

.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);
    color: var(--hk-ink-soft) !important;
    padding: .4rem .8rem !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: var(--hk-radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, var(--hk-violet-400) 0%, var(--hk-violet-600) 100%);
    box-shadow: var(--hk-elevation-2);
    cursor: pointer;
    transition: transform var(--hk-duration-fast) var(--hk-ease-out);
}

.hk-navbar-avatar-btn:hover {
    transform: scale(1.05);
}

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

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

.navbar .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-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);
}

/* --- 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 {
    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;
}

/* --- 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;
}

/* 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 {
    border: none;
    border-radius: var(--hk-radius-card);
    background: var(--hk-surface);
    box-shadow: var(--hk-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

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

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

/* --- 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 .25s ease, box-shadow .25s ease;
}

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

.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);
}

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. ----------- */
.hk-solutions-media-frame {
    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%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--hk-radius-xl);
}

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

/* --- Digital Solutions service cards (Home) — glass micro-cards replacing
   a plain checklist, gold-tinted icon chip, gold border/glow on hover. ---- */
.hk-solution-card {
    display: flex;
    align-items: flex-start;
    gap: var(--hk-space-3);
    height: 100%;
    padding: var(--hk-space-4);
    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);
    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-solution-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hk-shadow-hover);
    border-color: var(--hk-gold-400);
    background: linear-gradient(180deg, rgba(240, 169, 58, .08) 0%, rgba(255, 255, 255, 0) 100%);
}

.hk-solution-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--hk-radius-md);
    background: var(--hk-gold-bg);
    color: var(--hk-gold-600);
    font-size: 1.05rem;
    transition: transform var(--hk-duration-base) var(--hk-ease-out);
}

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

.hk-solution-card-title {
    margin: 0;
    padding-top: 2px;
    font-size: var(--hk-text-sm);
    font-weight: 700;
    letter-spacing: var(--hk-tracking-tight);
    line-height: var(--hk-leading-snug);
    color: var(--hk-ink);
}

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

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

/* --- 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);
}

.hk-industry-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    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 - 76px);
}

.hk-auth-brand {
    flex: 1 1 46%;
    min-width: 0;
    /* Fixed to one viewport height and pinned there (rather than 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. */
    position: sticky;
    top: 76px;
    height: calc(100vh - 76px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: flex-start;
    padding: var(--hk-space-10) var(--hk-space-8);
    background: var(--hk-gradient);
    color: #fff;
}

.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;
}

.hk-navbar-craftlanee-logo {
    height: 18px;
}

/* Two swapped images (dark-text default, light-text for dark backgrounds)
   since the logo artwork is a raster lockup, not styleable via CSS color.
   Dark-text is the default (light glass navbar / light drawer surface);
   swap 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 {
    display: none;
}

.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 {
    display: none;
}

.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 {
    display: inline-block;
}

.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);
}

.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: var(--hk-surface);
    border-right: 1px solid var(--hk-border-soft);
    transition: background-color .3s ease, border-color .3s ease, backdrop-filter .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. */
@media (min-width: 992px) {
    .hk-dashboard-sidebar {
        position: sticky;
        top: 76px;
        height: calc(100vh - 76px);
        overflow-y: auto;
    }
}

.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 {
    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;
    background: var(--bs-primary-bg-subtle);
    border-radius: var(--bs-border-radius-lg);
    padding: 10px 12px;
    margin-bottom: 16px;
}

.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;
}

.hk-dash-link {
    color: var(--hk-ink-soft);
    border-radius: var(--hk-radius-md);
    padding: .6rem .8rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 500;
    font-size: .92rem;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

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

.hk-dash-link.active {
    background: var(--hk-gradient);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), .3);
}

.hk-dashboard-main {
    background: var(--bs-body-bg);
    transition: background-color .3s ease;
}

.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 .25s var(--hk-ease-out), box-shadow .25s ease, border-color .25s ease, background-color .3s 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 .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: #FCE9EC; color: var(--hk-red-600); }

.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: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--hk-ink-soft);
    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);
}

.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;
}

.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 --------------------------------------------------------------
   Scoped to the dashboard shell only; toggled by adding data-theme="dark" to <html>,
   persisted in localStorage (see dashboard/base_dashboard.html). Reuses the same
   --hk-dark-bg / --hk-dark-glow-* tokens the public pages sit on, so .hk-dashboard-main
   stays transparent (the ambient ::before glow on <body> shows through) and every
   panel on top of it is genuine translucent glass, not a flat repaint. ------------------ */
html[data-theme="dark"] .hk-dashboard-main {
    background: transparent;
}

html[data-theme="dark"] .hk-dashboard-sidebar {
    background: rgba(18, 19, 32, .45);
    border-right-color: rgba(255, 255, 255, .06);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    color: #E4E6F1;
}

html[data-theme="dark"] .hk-stat-card,
html[data-theme="dark"] .hk-chart-card,
html[data-theme="dark"] .hk-dashboard-main .card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));
    background-color: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .07);
    color: #E4E6F1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-theme="dark"] .hk-stat-card:hover {
    background-color: rgba(255, 255, 255, .045);
    border-color: rgba(99, 102, 241, .4);
    box-shadow: 0 0 24px rgba(99, 102, 241, .18), var(--hk-elevation-4);
}

html[data-theme="dark"] .hk-stat-icon--indigo { background: rgba(91, 155, 232, .16); color: #8FBBF2; }
html[data-theme="dark"] .hk-stat-icon--gold { background: rgba(240, 169, 58, .16); color: #F5C570; }
html[data-theme="dark"] .hk-stat-icon--emerald { background: rgba(47, 196, 136, .16); color: #6BDCAF; }
html[data-theme="dark"] .hk-stat-icon--rose { background: rgba(224, 66, 107, .16); color: #F291A6; }

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-dashboard-main .table {
    color: #E4E6F1;
}

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

html[data-theme="dark"] .hk-dashboard-main .card-header {
    background-color: transparent !important;
    color: #E4E6F1;
    border-bottom-color: rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .hk-stat-card .hk-stat-value,
html[data-theme="dark"] .hk-dash-profile-name,
html[data-theme="dark"] .hk-dashboard-main h3,
html[data-theme="dark"] .hk-dashboard-main h4,
html[data-theme="dark"] .hk-dashboard-main h5,
html[data-theme="dark"] .hk-dashboard-main h6 {
    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);
}

.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;
}

html[data-theme="dark"] .hk-toolbar-strip .form-select,
html[data-theme="dark"] .hk-toolbar-strip .form-control {
    background-color: rgba(2, 6, 23, .5);
}

/* --- 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);
}

html[data-theme="dark"] .hk-bulkbar {
    background: rgba(255, 255, 255, .02);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));
    border-color: rgba(255, 255, 255, .07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="dark"] .hk-bulkbar.hk-bulkbar-active {
    background-color: rgba(91, 155, 232, .1);
    border-color: rgba(91, 155, 232, .4);
}

.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-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;
}

html[data-theme="dark"] .hk-dashboard-main .form-select,
html[data-theme="dark"] .hk-dashboard-main .form-control {
    background-color: #12141F;
    border-color: #262A3D;
    color: #E4E6F1;
}

html[data-theme="dark"] .hk-dashboard-main .table tbody tr:hover {
    background-color: #1D2032;
}

html[data-theme="dark"] .hk-row-action-btn {
    background: #20233590;
    color: #9AA0BE;
}

html[data-theme="dark"] .hk-type-business { background: rgba(var(--bs-primary-rgb), .18); }
html[data-theme="dark"] .hk-type-property { background: rgba(124, 58, 237, .18); color: #C4A6FA; }
html[data-theme="dark"] .hk-type-job { background: rgba(15, 163, 107, .18); }
html[data-theme="dark"] .hk-type-event { background: rgba(194, 105, 26, .2); color: #F0A868; }
html[data-theme="dark"] .hk-type-news { background: rgba(194, 44, 121, .2); color: #F291C0; }
html[data-theme="dark"] .hk-type-project { background: var(--hk-gold-bg); color: var(--hk-gold-400); }

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

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

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

html[data-theme="dark"] .hk-dashboard-main .text-muted {
    color: #8B90A6 !important;
}

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

html[data-theme="dark"] .hk-status-inactive { background: #20233590; color: #9AA0BE; }

/* --- 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;
}

html[data-theme="dark"] .hk-review-form {
    background: #191C2B;
    border-color: #262A3D;
}

/* --- 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);
}

.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;
}

/* --- History of Kuppam page ------------------------------------------------------------ */

/* Full-bleed photographic hero — a stack of absolutely-positioned slides
   crossfades behind the overlay (see hkHistoryHeroSlides in history.html);
   each slide gets its own slow Ken Burns zoom/pan so the cycle never looks
   like a hard cut even while the opacity transition is mid-flight. */
.hk-history-hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--hk-gray-950);
}

.hk-history-hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hk-history-hero-slide {
    position: absolute;
    inset: -2%; /* slight overscan so the pan/zoom never reveals an edge */
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    transition: opacity 2s var(--hk-ease-in-out);
    will-change: opacity, transform;
}

.hk-history-hero-slide.is-active {
    opacity: 1;
}

.hk-history-hero-slide-pan-a.is-active {
    animation: hk-history-zoom-in 8s linear forwards;
}

.hk-history-hero-slide-pan-b.is-active {
    animation: hk-history-zoom-pan 8s linear forwards;
}

@keyframes hk-history-zoom-in {
    from { transform: scale(1); }
    to   { transform: scale(1.15); }
}

@keyframes hk-history-zoom-pan {
    from { transform: scale(1.15) translate(0, 0); }
    to   { transform: scale(1.04) translate(-2.5%, -1.5%); }
}

@media (prefers-reduced-motion: reduce) {
    .hk-history-hero-slide,
    .hk-history-hero-slide.is-active {
        animation: none;
        transition: opacity .4s ease;
        transform: none;
    }
}

.hk-history-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Kept light enough that the historical photo underneath actually reads —
       previously near-opaque black (.82-.96) crushed it to an almost
       invisible dark silhouette. Still darkens top-to-bottom for the white
       badge/heading/sub-text contrast. */
    background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(2,6,23,.4) 55%, rgba(15,23,42,.72) 100%);
}

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

.hk-history-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1.1rem;
    padding: .45rem 1.1rem;
    border-radius: var(--hk-radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: var(--hk-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--hk-tracking-widest);
}

.hk-history-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,.45);
}

.hk-history-hero-sub {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    color: #F1F5F9;
    font-weight: 600;
    line-height: var(--hk-leading-normal);
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

.hk-history-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255,255,255,.9);
    font-size: 1.1rem;
    animation: hk-bounce 2s infinite;
    transition: background-color .3s ease;
}

.hk-history-scroll-cue:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.hk-history-toc {
    position: sticky;
    top: 76px;
    z-index: 5;
    background: var(--hk-surface);
    border-bottom: 1px solid var(--hk-border-soft);
    padding: 14px 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.hk-history-toc a {
    display: inline-block;
    margin-right: 8px;
    padding: 7px 16px;
    border-radius: var(--hk-radius-pill);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.hk-history-toc a:hover {
    background: var(--bs-primary);
    color: #fff;
}

.hk-history-section {
    padding: calc(var(--hk-section-py) * .8) 0;
    scroll-margin-top: 135px;
}

.hk-history-section:nth-of-type(even) {
    background-color: var(--hk-gray-50);
}

/* Premium photo "mat" frame — a light card wrapper around every
   .hk-history-media panel, shared by all History sections (kept white/light
   per-page, not the dark showcase treatment used on the homepage hero). */
.hk-history-frame {
    padding: .5rem;
    border-radius: var(--hk-radius-2xl);
    border: 1px solid var(--hk-border-soft);
    background: var(--hk-surface);
    box-shadow: var(--hk-shadow-md);
    transition: transform var(--hk-duration-slow) var(--hk-ease-out),
                box-shadow var(--hk-duration-base) var(--hk-ease-out);
}

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

/* Real-photo media panel (replaces the old gradient/icon placeholder) */
.hk-history-media {
    position: relative;
    border-radius: var(--hk-radius-xl);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

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

.hk-history-media.hk-history-media-contain {
    background: var(--bs-primary-bg-subtle);
}

.hk-history-media.hk-history-media-contain img {
    object-fit: contain;
    padding: 2.5rem;
}

.hk-history-media:hover img {
    transform: scale(1.06);
}

.hk-history-media-tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 6px 12px;
    border-radius: var(--hk-radius-md);
}

.hk-history-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    border: 1px solid var(--bs-primary-border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: var(--hk-elevation-2);
}

/* Typography hierarchy shared by every History section — tighter tracking
   on headings, wider/calmer rhythm on body copy — applied once here so no
   individual section's markup needs a special heading/paragraph class. */
.hk-history-section h2 {
    font-weight: 800;
    letter-spacing: var(--hk-tracking-tight);
}

.hk-history-section p.text-muted {
    line-height: var(--hk-leading-normal);
    letter-spacing: .01em;
}

.hk-history-note {
    background: var(--hk-gradient-soft);
    border-radius: var(--hk-radius-card);
    padding: 1.25rem 1.5rem;
    font-size: .92rem;
    color: var(--hk-ink-soft);
}

/* --- Vertical timeline (chronological quick index) --------------------------------------
   Base rules stay theme-neutral (same --hk-surface/--hk-ink tokens as every
   other card); html[data-theme="dark"] overrides below layer on the glass
   node + gradient-track treatment so it reads as part of the same premium
   dark canvas as the homepage category cards, without touching the DOM. */
.hk-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 2px;
}

.hk-timeline::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--hk-gradient);
}

html[data-theme="dark"] .hk-timeline::before {
    width: 2px;
    background: linear-gradient(180deg, var(--hk-violet-400) 0%, var(--hk-brand-orange-500) 55%, rgba(242, 132, 29, .15) 100%);
    box-shadow: 0 0 16px rgba(124, 99, 232, .35);
}

.hk-timeline-item {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 2rem;
    text-decoration: none;
    color: inherit;
}

.hk-timeline-item:last-child {
    padding-bottom: 0;
}

.hk-timeline-icon {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: var(--hk-radius-lg);
    background: var(--hk-surface);
    border: 3px solid var(--bs-primary);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: var(--hk-shadow-sm);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--hk-ease-out);
}

.hk-timeline-item:hover .hk-timeline-icon {
    background: var(--hk-gradient);
    color: #fff;
    transform: scale(1.08);
}

html[data-theme="dark"] .hk-timeline-icon {
    background: rgba(18, 19, 27, .92);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--hk-brand-orange-500);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 20px rgba(99, 102, 241, .15);
}

html[data-theme="dark"] .hk-timeline-item:hover .hk-timeline-icon {
    background: rgba(18, 19, 27, .92);
    color: var(--hk-brand-orange-500);
    border-color: rgba(242, 132, 29, .4);
    transform: scale(1.1);
}

.hk-timeline-body {
    background: var(--hk-surface);
    border: 1px solid transparent;
    border-radius: var(--hk-radius-xl);
    box-shadow: var(--hk-shadow-sm);
    padding: 20px 24px;
    flex: 1;
    transition: box-shadow .3s ease, transform .3s var(--hk-ease-out), border-color .3s ease, background-color .3s ease;
}

.hk-timeline-item:hover .hk-timeline-body {
    box-shadow: var(--hk-shadow-hover);
    transform: translateX(4px);
}

html[data-theme="dark"] .hk-timeline-body {
    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-timeline-item:hover .hk-timeline-body {
    border-color: rgba(255, 255, 255, .15);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .015) 100%);
    transform: translateX(4px) translateY(-2px);
}

.hk-timeline-period {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--bs-primary);
    display: block;
    margin-bottom: 4px;
}

html[data-theme="dark"] .hk-timeline-period {
    color: var(--hk-brand-orange-500);
}

.hk-timeline-title {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: var(--hk-tracking-tight);
    color: var(--hk-ink);
    margin-bottom: 4px;
}

.hk-timeline-summary {
    font-size: .85rem;
    line-height: 1.6;
    letter-spacing: .01em;
    color: var(--hk-ink-soft);
    margin-bottom: 0;
}

/* --- 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);
}

/* 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: #dc3545;
}

.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: #dc3545;
    font-size: .8rem;
    margin-top: .35rem;
}

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: #12141F;
    border-color: #262A3D;
    color: #E4E6F1;
}

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-history-section:nth-of-type(even) {
    background-color: var(--hk-dark-surface-2);
}

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 {
    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"] .hk-history-toc {
    border-bottom-color: var(--hk-border-soft);
}

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

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;
}

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);
}

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);
}