@font-face {
    font-family: "Tiro Devanagari KKB";
    src: url("/assets/fonts/TiroDevanagariKKB-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans Devanagari KKB";
    src: url("/assets/fonts/NotoSansDevanagariKKB-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans Devanagari KKB";
    src: url("/assets/fonts/NotoSansDevanagariKKB-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans Devanagari KKB";
    src: url("/assets/fonts/NotoSansDevanagariKKB-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
:root {
    --kkb-color-primary: #0e0353;
    --kkb-color-primary-hover: #1a0b72;
    --kkb-color-accent: #c58b18;

    --kkb-color-background: #f7f8fa;
    --kkb-color-surface: #ffffff;
    --kkb-color-surface-soft: #f1f3f6;

    --kkb-color-text: #1d2433;
    --kkb-color-text-muted: #667085;
    --kkb-color-heading: #111827;

    --kkb-color-border: #e2e6ec;
    --kkb-color-link: #173f8f;
    --kkb-color-link-hover: #0e0353;

    --kkb-font-body: "Tiro Devanagari KKB", "Nirmala UI", "Noto Serif Devanagari", serif;
    --kkb-font-heading: "Noto Sans Devanagari KKB", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
    --kkb-font-ui: "Noto Sans Devanagari KKB", "Nirmala UI", "Noto Sans Devanagari", sans-serif;

    --kkb-font-size-xs: 0.75rem;
    --kkb-font-size-sm: 0.875rem;
    --kkb-font-size-base: 1rem;
    --kkb-font-size-md: 1.125rem;
    --kkb-font-size-lg: 1.25rem;
    --kkb-font-size-xl: 1.5rem;
    --kkb-font-size-2xl: 1.875rem;
    --kkb-font-size-3xl: 2.25rem;

    --kkb-font-weight-regular: 400;
    --kkb-font-weight-medium: 500;
    --kkb-font-weight-bold: 700;

    --kkb-line-height-tight: 1.3;
    --kkb-line-height-normal: 1.65;
    --kkb-line-height-relaxed: 1.8;

    --kkb-space-1: 0.25rem;
    --kkb-space-2: 0.5rem;
    --kkb-space-3: 0.75rem;
    --kkb-space-4: 1rem;
    --kkb-space-5: 1.25rem;
    --kkb-space-6: 1.5rem;
    --kkb-space-8: 2rem;
    --kkb-space-10: 2.5rem;
    --kkb-space-12: 3rem;

    --kkb-radius-sm: 0.25rem;
    --kkb-radius-md: 0.5rem;
    --kkb-radius-lg: 0.75rem;

    --kkb-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
    --kkb-shadow-md: 0 4px 14px rgba(16, 24, 40, 0.1);

    --kkb-container-width: 1440px;
    --kkb-sidebar-left-width: 260px;
    --kkb-sidebar-right-width: 300px;
    --kkb-layout-gap: 18px;

    --kkb-transition-fast: 150ms ease;
    --kkb-transition-normal: 250ms ease;

    --kkb-z-navbar: 100;
    --kkb-z-dropdown: 200;
    --kkb-z-overlay: 300;

    --kkb-header-bg: #00132e;
    --kkb-header-text: #ffffff;
    
    --kkb-navbar-bg: #001d46;
    --kkb-navbar-text: #ffffff;
    --kkb-navbar-hover-bg: rgba(255, 255, 255, 0.10);
    --kkb-navbar-active-bg: rgba(255, 255, 255, 0.15);

    --kkb-navbar-height: 48px;
    --kkb-navbar-item-padding-x: 16px;

    --kkb-navbar-dropdown-bg: var(--kkb-color-surface);
    --kkb-navbar-dropdown-text: var(--kkb-color-text);
    --kkb-navbar-dropdown-hover-bg: var(--kkb-color-surface-soft);
    --kkb-navbar-dropdown-hover-text: var(--kkb-color-primary);
    --kkb-navbar-dropdown-border: var(--kkb-color-border);
    --kkb-navbar-dropdown-min-width: 240px;
    --kkb-navbar-dropdown-max-width: 340px;
    --kkb-navbar-dropdown-radius: var(--kkb-radius-md);

    /* Total left + right container space */
    --kkb-container-inline-space: 32px;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --kkb-container-inline-space: 16px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --kkb-container-inline-space: 8px;
    }
}

@media (max-width: 767px) {
    :root {
        --kkb-container-inline-space: 24px;
    }
}

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

html {
    margin: 0;
    padding: 0;
    scroll-behavior: auto;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
    margin-top: 0;
}

ul,
ol {
    padding-left: 1.5rem;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

[hidden] {
    display: none !important;
}
body {
    background: var(--kkb-color-background);
    color: var(--kkb-color-text);
    font-family: var(--kkb-font-body);
    font-size: var(--kkb-font-size-base);
    line-height: var(--kkb-line-height-normal);
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--kkb-color-heading);
    font-family: var(--kkb-font-heading);
    font-weight: 700;
    line-height: var(--kkb-line-height-tight);
}

h1 {
    font-size: clamp(1.75rem, 4vw, var(--kkb-font-size-3xl));
}

h2 {
    font-size: clamp(1.4rem, 3vw, var(--kkb-font-size-2xl));
}

h3 {
    font-size: clamp(1.15rem, 2.5vw, var(--kkb-font-size-xl));
}

h4 {
    font-size: var(--kkb-font-size-lg);
}

p {
    margin-bottom: var(--kkb-space-5);
}

a {
    color: var(--kkb-color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--kkb-transition-fast);
}

a:hover {
    color: var(--kkb-color-link-hover);
}

strong,
b {
    font-family: var(--kkb-font-heading);
    font-weight: 700;
}

small {
    font-size: var(--kkb-font-size-sm);
}

button,
input,
textarea,
select,
nav {
    font-family: var(--kkb-font-ui);
}

blockquote {
    margin: var(--kkb-space-6) 0;
    padding-left: var(--kkb-space-4);
    border-left: 4px solid var(--kkb-color-primary);
    color: var(--kkb-color-text-muted);
}
.kkb-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.kkb-container {
  width: min(100% - 2rem, var(--kkb-container-width));
  margin-inline: auto;
}

.kkb-text-muted {
  color: var(--kkb-color-text-muted);
}

.kkb-surface {
  background: var(--kkb-color-surface);
  border: 1px solid var(--kkb-color-border);
  border-radius: var(--kkb-radius-md);
}
.page-container {
    width: min(100%, var(--kkb-container-width));
    margin-inline: auto;
    display: grid;
    grid-template-columns: calc(var(--kkb-sidebar-left-width) + 26px) minmax(0, 1fr) clamp( 160px, calc(100vw - 1120px), var(--kkb-sidebar-right-width));
    gap: 8px;
    align-items: start;
    padding-top: 18px;
}
.left-sidebar,
.page-content,
.right-sidebar {
    min-width: 0;
}
.page-content {
    width: 100%;
}
.page-content__inner {
    width: 100%;
    min-width: 0;
}
.right-sidebar {
    width: 100%;
}
.right-sidebar__inner {
    width: 100%;
    min-height: 1px;
}

@media (max-width: 1279px) and (min-width: 1024px) {
    .page-container {
        grid-template-columns: 262px minmax(0, 1fr) 160px;
        gap: 6px;
    }
}
@media (max-width: 1023px) and (min-width: 768px) {
    .page-container {
        grid-template-columns: 252px minmax(0, 1fr);
        gap: 8px;
    }
    .right-sidebar {
        display: none;
    }
}
@media (max-width: 767px) {
    .page-container {
        width: min(calc(100% - var(--kkb-container-inline-space)), var(--kkb-container-width));
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kkb-space-6);
    }
    .page-content {
        grid-row: 1;
    }
    .left-sidebar {
        grid-row: 2;
    }
    .right-sidebar {
        display: none;
    }
}

/* Main page surface */

body {
    background: #ffffff;
}

.page-container {
    padding-bottom: 64px;
}

.page-content {
    width: 100%;
    padding: 8px 25px 64px;

    background: #ffffff;
    border-right: 1px solid #e6ebf2;
    border-left: 1px solid #e6ebf2;
}

.page-content__inner {
    width: 100%;
    min-width: 0;
}


/* Breadcrumb */

.page-toolbar {
    position: sticky;
    top: var(--kkb-navbar-height);
    z-index: calc(var(--kkb-z-navbar) - 1);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: -8px 0 18px;
    padding: 8px 0;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(226, 230, 236, 0.9);
    backdrop-filter: blur(8px);
}

.breadcrumb {
    min-width: 0;
    margin: 0;
    font-family: var(--kkb-font-ui);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-width: 0;

    color: var(--kkb-color-text-muted);
    font-size: var(--kkb-font-size-xs);
    line-height: 1.4;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: "";
    width: 6px;
    height: 6px;

    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;

    transform: rotate(45deg);
    opacity: 0.65;
}

.breadcrumb__link {
    color: var(--kkb-color-text-muted);
    text-decoration: none;
}

.breadcrumb__link:hover {
    color: #0d4395;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadcrumb__item--current {
    max-width: min(100%, 360px);
    overflow: hidden;
    color: #39465c;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Page heading */

.page-header {
    margin: 0 0 28px;
}

.page-title {
    margin: 0;

    color: #0b1220;

    font-family: var(--kkb-font-heading);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.22;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.page-description {
    box-sizing: border-box;
    width: 100%;
    margin: 18px 0 0;
    padding: 16px 20px;
    border: 1px solid #e8c878;
    border-left: 5px solid #d97706;
    border-radius: 10px;

    background: linear-gradient(120deg, #fff2d8 0%, #fff9eb 58%, #ffffff 100%);
    box-shadow: 0 5px 16px rgba(180, 83, 9, 0.08);
    color: #513819;

    font-family: var(--kkb-font-body);
    font-size: 0.975rem;
    line-height: 1.7;
}


/* Article typography */

.knowledge-content {
    color: #202124;

    font-family: var(--kkb-font-body);
    font-size: 1rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* Page renderer already provides the primary H1 */
.knowledge-content > h1:first-child {
    display: none;
}

#kkb-auto-toc:empty {
    display: none;
}

.knowledge-content > h2:first-of-type {
    margin-top: 0;
}

.knowledge-content h2,
.knowledge-content h3,
.knowledge-content h4 {
    scroll-margin-top: calc(var(--kkb-navbar-height) + 20px);
    overflow-wrap: anywhere;
}

.knowledge-content h2 {
    margin: 34px 0 14px;

    color: var(--kkb-color-heading);

    font-size: clamp(1.4rem, 2.1vw, 1.75rem);
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.35;
    /* Let long Hindi headings use the full line before wrapping. */
    text-wrap: wrap;
}

.knowledge-content > h2:not(:first-of-type) {
    padding-top: 26px;
    border-top: 1px solid #e6ebf2;
}

.knowledge-content h3 {
    margin: 30px 0 12px;

    color: var(--kkb-color-heading);

    font-size: clamp(1.2rem, 1.7vw, 1.4rem);
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.4;
}

.knowledge-content h4 {
    margin: 24px 0 10px;

    color: var(--kkb-color-heading);

    font-size: 1.075rem;
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.5;
}

.knowledge-content p {
    margin: 0 0 18px;
}

.knowledge-content > div:not([id="kkb-auto-toc"]) {
    margin-bottom: 14px;
}

.knowledge-content > div > :last-child {
    margin-bottom: 0;
}

.knowledge-content strong,
.knowledge-content b {
    color: #111827;
    font-family: inherit;
    font-weight: var(--kkb-font-weight-bold);
}

.knowledge-content a {
    position: relative;
    top: 0;

    padding: 3px 3px 1px;

    color: #006dcc;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;

    text-decoration: none;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;

    transition:
        color 160ms ease,
        top 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.knowledge-content a:hover {
    top: -1px;

    color: #006dcc;
    background-color: #ffffff;
    border-color: rgba(5, 121, 250, 0.35);
    box-shadow: 0 3px 10px rgba(5, 121, 250, 0.14);
}

.knowledge-content a.knowledge-content__internal-link {
    color: #006dcc;
    background-color: #ffffff;
    border-color: transparent;
    box-shadow: none;
    font-weight: 600;
}

.knowledge-content a.knowledge-content__internal-link:hover {
    border-color: rgba(5, 121, 250, 0.35);
}


/* Lists */

.knowledge-content ul,
.knowledge-content ol {
    margin: 0 0 20px;
    padding-inline-start: 1.5rem;
}

.knowledge-content li {
    margin: 7px 0;
    padding-inline-start: 4px;
}

.knowledge-content li::marker {
    color: #0d4395;
}


/* Quotes and basic legal notes */

.knowledge-content blockquote {
    margin: 22px 0;
    padding: 15px 18px;

    color: #173f78;
    background: #f4f8ff;
    border: 1px solid #cfddf5;
    border-left: 4px solid #1754b6;
    border-radius: var(--kkb-radius-md);

    font-family: inherit;
    font-style: normal;
}

.knowledge-content blockquote > :last-child {
    margin-bottom: 0;
}


/* Semantic callouts for new articles */

.knowledge-content > div:is(
    .kkb-summary,
    .kkb-definition,
    .kkb-important,
    .kkb-analysis,
    .kkb-warning,
    .kkb-tip
) {
    margin: 22px 0;
    padding: 16px 18px;

    color: #202124;
    border: 1px solid;
    border-inline-start-width: 4px;
    border-inline-start-color: var(--kkb-callout-accent);
    border-radius: var(--kkb-radius-md);

    line-height: 1.7;
}

.knowledge-content > div:is(
    .kkb-summary,
    .kkb-definition,
    .kkb-important,
    .kkb-analysis,
    .kkb-warning,
    .kkb-tip
) > strong:first-child {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 15px;

    color: #fff;
    background: var(--kkb-callout-accent);
    border-radius: 25px;
    font-family: var(--kkb-font-ui);
    font-size: 1rem;
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.5;
}

.knowledge-content > div:is(
    .kkb-summary,
    .kkb-definition,
    .kkb-important,
    .kkb-analysis,
    .kkb-warning,
    .kkb-tip
) > :last-child {
    margin-bottom: 0;
}

.knowledge-content > div:is(
    .kkb-summary,
    .kkb-definition,
    .kkb-important,
    .kkb-analysis,
    .kkb-warning
) > table:last-child {
    margin-top: 12px;
}

.knowledge-content > .kkb-summary {
    --kkb-callout-accent: #1754b6;
    background: #f4f8ff;
    border-color: #c8daf5;
}

.knowledge-content > .kkb-definition {
    --kkb-callout-accent: #13805b;
    background: #f2fbf8;
    border-color: #bfe6d8;
}

.knowledge-content > .kkb-important {
    --kkb-callout-accent: #8a5a08;
    background: #fffaf0;
    border-color: #efd8a6;
}

.knowledge-content > .kkb-analysis {
    --kkb-callout-accent: #385a91;
    background: #f5f7fb;
    border-color: #d7dfeb;
}

.knowledge-content > .kkb-warning {
    --kkb-callout-accent: #c2412d;
    background: #fff6f3;
    border-color: #f1c7be;
}

.knowledge-content > .kkb-tip {
    --kkb-callout-accent: #0f766e;
    background: #f0fdfa;
    border-color: #b7e5de;
}

.kkb-callout {
    margin: 22px 0;
    padding: 16px 18px;

    border: 1px solid;
    border-radius: var(--kkb-radius-md);

    font-family: var(--kkb-font-ui);
    line-height: 1.65;
}

.kkb-callout > :last-child {
    margin-bottom: 0;
}

.kkb-callout--info {
    color: #123f86;
    background: #f3f8ff;
    border-color: #c7daf7;
}

.kkb-callout--law {
    color: #145c43;
    background: #f1fbf7;
    border-color: #bde6d5;
}

.kkb-callout--warning {
    color: #8a4b08;
    background: #fff9ed;
    border-color: #f2d59b;
}


/* Reference-style information cards */

.kkb-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;

    margin: 22px 0;
}

.kkb-info-card {
    min-width: 0;
    padding: 16px 12px;

    color: #182a46;
    background: #ffffff;
    border: 1px solid #dfe6ef;
    border-radius: var(--kkb-radius-md);

    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.kkb-info-card > :last-child {
    margin-bottom: 0;
}


/* Tables */

.knowledge-content table {
    display: block;

    width: 100%;
    margin: 24px 0;
    overflow-x: auto;

    background: #ffffff;
    border: 1px solid #dfe6ef;
    border-radius: var(--kkb-radius-md);
}

.knowledge-content th,
.knowledge-content td {
    min-width: 180px;
    padding: 12px 14px;

    border: 1px solid #dfe6ef;

    text-align: start;
    vertical-align: top;
    line-height: 1.6;
}

.knowledge-content th {
    color: #163a72;
    background: #f3f6fb;
    font-weight: var(--kkb-font-weight-bold);
}

.knowledge-content tr:nth-child(even) td {
    background: #fafbfd;
}


/* Media, code and separators */

.knowledge-content img {
    max-width: 100%;
    height: auto;
    margin: 24px auto;

    border-radius: var(--kkb-radius-md);
}

.knowledge-content code {
    padding: 2px 6px;

    color: #7c2d12;
    background: #fff7ed;
    border-radius: var(--kkb-radius-sm);

    font-size: 0.9em;
}

.knowledge-content pre {
    max-width: 100%;
    margin: 24px 0;
    padding: 16px;
    overflow-x: auto;

    color: #e5edf8;
    background: #0d1b2f;
    border-radius: var(--kkb-radius-md);
}

.knowledge-content pre code {
    padding: 0;
    color: inherit;
    background: transparent;
}

.knowledge-content hr {
    margin: 34px 0;

    border: 0;
    border-top: 1px solid #dfe6ef;
}


/* Related articles */

#related-list {
    margin-top: 14px;
    padding: 16px 18px 16px 38px;

    background: #f8fafc;
    border: 1px solid #e1e7ef;
    border-radius: var(--kkb-radius-md);
}


/* Previous and next navigation */

.previous-next {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin-top: 48px;
    padding-top: 24px;

    border-top: 1px solid #dfe6ef;
    font-family: var(--kkb-font-ui);
}

.previous-next__item {
    display: flex;
    flex-direction: column;
    gap: 6px;

    min-width: 0;
    padding: 15px 16px;

    color: #1d2f4c;
    background: #ffffff;
    border: 1px solid #dfe6ef;
    border-radius: var(--kkb-radius-md);

    text-decoration: none;

    transition:
        border-color var(--kkb-transition-fast),
        box-shadow var(--kkb-transition-fast),
        transform var(--kkb-transition-fast);
}

.previous-next__item:hover {
    color: #0d4395;
    border-color: #afc5e7;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

.previous-next__item--next {
    text-align: end;
}

.previous-next__label {
    color: var(--kkb-color-text-muted);
    font-size: var(--kkb-font-size-xs);
    font-weight: var(--kkb-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.previous-next__title {
    font-size: var(--kkb-font-size-sm);
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.45;
    overflow-wrap: anywhere;
}


/* Responsive */

@media (max-width: 1279px) {
    .page-content {
        padding-inline: 20px;
    }
}

@media (max-width: 1023px) {
    .page-content {
        padding-inline: 16px;
    }

    .page-title {
        font-size: clamp(1.8rem, 4vw, 2.35rem);
    }

    .knowledge-content {
        font-size: 0.975rem;
    }
}

@media (max-width: 767px) {
    .page-container {
        padding-bottom: 40px;
    }

    .page-content {
        padding: 0 0 48px;
        border-right: 0;
        border-left: 0;
    }

    .breadcrumb {
        margin-bottom: 0;
    }

    .breadcrumb__item--current {
        max-width: 220px;
    }

    .page-header {
        margin-bottom: 24px;
    }

    .page-title {
        font-size: clamp(1.75rem, 8vw, 2.15rem);
    }

    .page-description {
        margin-top: 16px;
        padding: 12px 14px;
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .knowledge-content h2 {
        margin-top: 28px;
    }

    .knowledge-content > div:is(
        .kkb-summary,
        .kkb-definition,
        .kkb-important,
        .kkb-analysis,
        .kkb-warning,
        .kkb-tip
    ) {
        margin: 18px 0;
        padding: 14px;
    }

    .knowledge-content > h2:not(:first-of-type) {
        padding-top: 22px;
    }

    .knowledge-content table {
        border-radius: var(--kkb-radius-sm);
    }

    .previous-next {
        grid-template-columns: minmax(0, 1fr);
    }

    .previous-next__item--next {
        text-align: start;
    }
}

.left-sidebar {
    position: sticky;
    top: calc(var(--kkb-navbar-height) + 16px);
    align-self: start;
    min-width: 0;
}
.sidebar {
    width: 100%;
    max-height: calc(100dvh - var(--kkb-navbar-height) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--kkb-color-text);
    background: #f7f9fc;
    border: 1px solid #d5ddea;
    border-radius: var(--kkb-radius-lg);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.09);
    font-family: var(--kkb-font-ui);
    scrollbar-width: thin;
    scrollbar-color: rgba(14, 3, 83, 0.28) transparent;
}
.sidebar__header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 5px 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #061a3b 0%, #102f63 100%);
    border-radius: calc(var(--kkb-radius-lg) - 1px) calc(var(--kkb-radius-lg) - 1px) 0 0;
}
.sidebar__heading {
    min-width: 0;
}
.sidebar__title {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 1.0625rem;
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.35;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.sidebar__sections,
.sidebar__articles {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar__sections {
    padding: 4px 5px max(14px, var(--sidebar-active-scroll-space, 14px));
}
.sidebar__section {
    margin: 7px 0;
}
.sidebar__section:first-child {
    margin-top: 4px;
}
.sidebar__section:last-child {
    margin-bottom: 0;
}
.sidebar__details {
    margin: 0;
}
.sidebar__section-title {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto 24px;
    gap: 8px;
    align-items: start;
    min-height: 40px;
    margin: 0 4px;
    padding: 8px 10px;
    color: var(--kkb-color-heading);
    background: #ffffff;
    border: 1px solid #d8e0ec;
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.055);
    cursor: pointer;
    user-select: none;
    transition: color var(--kkb-transition-fast);
}
.sidebar__section-title::-webkit-details-marker {
    display: none;
}
.sidebar__section-title::marker {
    content: "";
}
.sidebar__section-title::after {
    content: "";
    margin-top: 4px;
    justify-self: center;
    width: 7px;
    height: 7px;
    padding: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--kkb-transition-fast);
}
.sidebar__details[open] > .sidebar__section-title::after {
    transform: rotate(45deg);
}
.sidebar__section-title:hover {
    color: #0d2f62;
    background: #f3f6fb;
    border-color: #aebdd2;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.09);
}
.sidebar__details[open] > .sidebar__section-title,
.sidebar__section--active .sidebar__section-title {
    color: #0b2d5f;
    background: #e8eef8;
    border-color: #bcc9dd;
    box-shadow: 0 4px 12px rgba(15, 42, 82, 0.1);
}
.sidebar__section-title:focus-visible {
    outline: 2px solid var(--kkb-color-primary);
    outline-offset: 3px;
    border-radius: var(--kkb-radius-sm);
}
.sidebar__header-icon {
    width: 38px;
    height: 38px;
    color: var(--kkb-color-accent);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 5c-4 4-4 9 0 12 4-3 4-8 0-12Z'/%3E%3Cpath d='M12 20Q32 14 52 20'/%3E%3Cpath d='M32 17v36'/%3E%3Cpath d='m13 21-8 23M13 21l8 23M51 21l-8 23M51 21l8 23'/%3E%3Cpath d='M4 44h18c-1 5-4 7-9 7s-8-2-9-7ZM42 44h18c-1 5-4 7-9 7s-8-2-9-7Z'/%3E%3Cpath d='M9 47h8M47 47h8'/%3E%3Cpath d='M32 52c-5 0-8 2-10 6h20c-2-4-5-6-10-6Z'/%3E%3Cpath d='M19 59h26'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 5c-4 4-4 9 0 12 4-3 4-8 0-12Z'/%3E%3Cpath d='M12 20Q32 14 52 20'/%3E%3Cpath d='M32 17v36'/%3E%3Cpath d='m13 21-8 23M13 21l8 23M51 21l-8 23M51 21l8 23'/%3E%3Cpath d='M4 44h18c-1 5-4 7-9 7s-8-2-9-7ZM42 44h18c-1 5-4 7-9 7s-8-2-9-7Z'/%3E%3Cpath d='M9 47h8M47 47h8'/%3E%3Cpath d='M32 52c-5 0-8 2-10 6h20c-2-4-5-6-10-6Z'/%3E%3Cpath d='M19 59h26'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sidebar__section-count {
    align-self: start;
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    color: #173b70;
    background: #e9eef6;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}
.sidebar__details[open] > .sidebar__section-title .sidebar__section-count,
.sidebar__section--active .sidebar__section-count {
    color: #ffffff;
    background: #173b70;
}
.sidebar__section-label {
    min-width: 0;
    font-size: var(--kkb-font-size-sm);
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}
.sidebar__articles {
    margin: 2px 0 14px;
    padding: 0 4px 0 10px;
}
.sidebar__article {
    margin: 2px 0;
}
.sidebar__link {
    position: relative;
    display: block;
    min-height: 28px;
    padding: 4px 4px 4px 20px;
    border-radius: var(--kkb-radius-md);
    color: #34445d;
    text-decoration: none;
    font-size: var(--kkb-font-size-sm);
    line-height: normal;
    overflow-wrap: anywhere;
    transition: color var(--kkb-transition-fast), background-color var(--kkb-transition-fast), box-shadow var(--kkb-transition-fast);
}
.sidebar__section-icon {
    display: block;
    align-self: start;
    justify-self: start;
    width: 22px;
    min-width: 22px;
    height: 22px;
    color: currentColor;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h5.2A4.3 4.3 0 0 1 12 8.8V21a4.5 4.5 0 0 0-4.5-4.5h-5Z'/%3E%3Cpath d='M21.5 4.5h-5.2A4.3 4.3 0 0 0 12 8.8V21a4.5 4.5 0 0 1 4.5-4.5h5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h5.2A4.3 4.3 0 0 1 12 8.8V21a4.5 4.5 0 0 0-4.5-4.5h-5Z'/%3E%3Cpath d='M21.5 4.5h-5.2A4.3 4.3 0 0 0 12 8.8V21a4.5 4.5 0 0 1 4.5-4.5h5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sidebar__link::before {
    content: "";
    position: absolute;
    top: calc(4px + 0.7em);
    left: 8px;
    width: 5px;
    height: 5px;
    background: transparent;
    border: 3px solid #0a2b62;
    border-radius: 50%;
    transform: translateY(-50%);
}
.sidebar__link:hover {
    color: var(--kkb-color-primary);
    background: #edf2f8;
}
.sidebar__link:focus-visible {
    color: var(--kkb-color-primary);
    background: rgba(14, 3, 83, 0.055);
    outline: 2px solid var(--kkb-color-primary);
    outline-offset: 2px;
}
.sidebar__article--active > .sidebar__link,
.sidebar__link[aria-current="page"] {
    isolation: isolate;
    padding: 9px 34px 9px 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--kkb-color-primary) 0%, #241078 100%);
    border: 1px solid rgba(197, 139, 24, 0.52);
    border-radius: 10px;
    box-shadow:
        0 7px 18px rgba(14, 3, 83, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-weight: 600;
    transform: translateX(2px);
}
.sidebar__article--active > .sidebar__link::after,
.sidebar__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #f0c46c;
    border-right: 2px solid #f0c46c;
    transform: translateY(-50%) rotate(45deg);
}
.sidebar__article--active > .sidebar__link:hover,
.sidebar__link[aria-current="page"]:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #1a0b72 0%, #30208a 100%);
    box-shadow:
        0 10px 24px rgba(14, 3, 83, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateX(4px);
}
.sidebar__article--active > .sidebar__link:focus-visible,
.sidebar__link[aria-current="page"]:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, var(--kkb-color-primary) 0%, #241078 100%);
    outline: 3px solid var(--kkb-color-accent);
    outline-offset: 2px;
}
.sidebar__article--active > .sidebar__link::before,
.sidebar__link[aria-current="page"]::before {
    width: 7px;
    height: 7px;
    top: calc(9px + 0.7em);
    left: 10px;
    border: 2px solid rgba(255, 255, 255, 0.92);
    background: var(--kkb-color-accent);
    box-shadow: 0 0 0 3px rgba(240, 196, 108, 0.16);
}
@media (prefers-reduced-motion: no-preference) {
    .sidebar__article--active > .sidebar__link,
    .sidebar__link[aria-current="page"] {
        transition:
            color var(--kkb-transition-fast),
            background var(--kkb-transition-fast),
            box-shadow var(--kkb-transition-fast),
            transform var(--kkb-transition-fast);
    }
}
.sidebar::-webkit-scrollbar {
    width: 8px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(14, 3, 83, 0.25);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(14, 3, 83, 0.42);
    border: 2px solid transparent;
    background-clip: padding-box;
}
@media (max-width: 767px) {
    .left-sidebar {
        position: relative;
        top: auto;
    }
    .sidebar {
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
    }
    .sidebar__header {
        position: relative;
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 60px;
        padding: 12px;
    }
    .sidebar__header-icon {
        width: 32px;
        height: 32px;
    }
    .sidebar__sections {
        padding-inline: 14px;
    }
    .sidebar__section-title {
        min-height: 56px;
    }
    .sidebar__link {
        min-height: 44px;
        padding-block: 10px;
    }
}


/* Reference-inspired sidebar presentation */
.sidebar {
    background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
    border: 1px solid #d7e3f2;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(25, 66, 122, 0.1);
}
.sidebar__header {
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
    min-height: 92px;
    padding: 20px 18px;
    overflow: hidden;
    color: #103b7c;
    background:
        radial-gradient(120% 95% at 100% 0%, rgba(183, 216, 255, 0.72) 0%, rgba(225, 239, 255, 0.34) 48%, transparent 68%),
        linear-gradient(120deg, #fff5de 0%, #fffaf0 42%, #eaf4ff 100%);
    border-bottom: 1px solid #d8e7f6;
    border-radius: 19px 19px 12px 12px;
}
.sidebar__header::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -12%;
    bottom: -34px;
    width: 78%;
    height: 58px;
    background: linear-gradient(165deg, rgba(67, 143, 246, 0.2), rgba(255, 193, 75, 0.7));
    border-radius: 50% 0 0 0;
    transform: rotate(-7deg);
}
.sidebar__header-icon { display: none; }
.sidebar__heading { position: relative; z-index: 1; }
.sidebar__title {
    color: #103b7c;
    font-size: 1.25rem;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}
.sidebar__sections { padding: 8px 9px 16px; }
.sidebar__section { margin: 8px 0; }
.sidebar__section-title {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 54px;
    margin: 0;
    padding: 7px 12px 7px 8px;
    color: #123b78;
    background: #ffffff;
    border: 1px solid #dce7f4;
    border-radius: 14px;
    box-shadow: 0 5px 14px rgba(34, 76, 132, 0.07);
}
.sidebar__section-title::after { display: none; }
.sidebar__section-title:hover {
    color: #0d4da4;
    background: #f8fbff;
    border-color: #bad5f6;
    box-shadow: 0 7px 18px rgba(34, 91, 165, 0.11);
}
.sidebar__details[open] > .sidebar__section-title,
.sidebar__section--active .sidebar__section-title {
    color: #123b78;
    background: linear-gradient(90deg, #e7f2ff 0%, #f7fbff 100%);
    border-color: #a9cff8;
    box-shadow: inset 5px 0 0 #2484f2, 0 6px 16px rgba(38, 111, 197, 0.1);
}
.sidebar__section-icon {
    position: relative;
    align-self: center;
    justify-self: start;
    width: 34px;
    min-width: 34px;
    height: 34px;
    color: #123b78;
    background: #edf3fb;
    border-radius: 50%;
    -webkit-mask: none;
    mask: none;
}
.sidebar__section-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: translate(-65%, -50%) rotate(-45deg);
    transition: transform var(--kkb-transition-fast);
}
.sidebar__details[open] > .sidebar__section-title .sidebar__section-icon,
.sidebar__section--active .sidebar__section-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #217df0 0%, #58a9ff 100%);
    box-shadow: 0 6px 13px rgba(33, 125, 240, 0.24);
}
.sidebar__details[open] > .sidebar__section-title .sidebar__section-icon::before,
.sidebar__section--active .sidebar__section-icon::before {
    transform: translate(-50%, -68%) rotate(45deg);
}
.sidebar__section-label {
    color: inherit;
    font-size: 0.875rem;
    line-height: 1.35;
    text-transform: none;
}
.sidebar__section-count {
    align-self: center;
    min-width: 34px;
    height: 30px;
    padding: 0 9px;
    color: #1476df;
    background: #e9f3ff;
    font-size: 0.8125rem;
}
.sidebar__details[open] > .sidebar__section-title .sidebar__section-count,
.sidebar__section--active .sidebar__section-count {
    color: #1476df;
    background: #dcecff;
}
.sidebar__articles {
    position: relative;
    margin: 8px 0 16px 18px;
    padding: 0 4px 0 28px;
}
.sidebar__articles::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 8px;
    left: 8px;
    width: 2px;
    background: #cbd9ea;
    border-radius: 999px;
}
.sidebar__article { margin: 1px 0; }
.sidebar__link {
    min-height: 30px;
    padding: 5px 7px 5px 19px;
    color: #17376b;
    border-radius: 9px;
    line-height: 1.35;
}
.sidebar__link::before {
    top: calc(5px + 0.675em);
    left: -23px;
    z-index: 1;
    width: 7px;
    height: 7px;
    background: #b9cbe2;
    border: 2px solid #f8fbff;
}
.sidebar__link:hover {
    color: #086bd8;
    background: #edf5ff;
}
.sidebar__article--active > .sidebar__link,
.sidebar__link[aria-current="page"] {
    padding: 6px 8px 6px 19px;
    color: #0874e3;
    background: linear-gradient(90deg, #e4f1ff 0%, #edf6ff 100%);
    border: 0;
    border-radius: 9px;
    box-shadow: none;
    font-weight: 700;
    transform: none;
}
.sidebar__article--active > .sidebar__link::after,
.sidebar__link[aria-current="page"]::after { display: none; }
.sidebar__article--active > .sidebar__link::before,
.sidebar__link[aria-current="page"]::before {
    top: calc(6px + 0.675em);
    left: -23px;
    width: 9px;
    height: 9px;
    background: #1883f5;
    border: 2px solid #eef6ff;
    box-shadow: 0 0 0 2px rgba(24, 131, 245, 0.12);
}
.sidebar__article--active > .sidebar__link:hover,
.sidebar__link[aria-current="page"]:hover {
    color: #075fb8;
    background: #dcecff;
    box-shadow: none;
    transform: none;
}
@media (max-width: 767px) {
    .sidebar__header { min-height: 82px; padding: 18px 16px; }
    .sidebar__sections { padding-inline: 10px; }
    .sidebar__section-title { min-height: 56px; }
    .sidebar__link { min-height: 42px; padding-block: 10px; }
    .sidebar__link::before { top: calc(10px + 0.675em); }
}



/* Layered wave for the main sidebar header */
.sidebar__header {
    position: sticky;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(95% 125% at 100% 0%, rgba(177, 213, 255, 0.75) 0%, rgba(225, 240, 255, 0.42) 48%, transparent 70%),
        linear-gradient(118deg, #fff3d9 0%, #fffaf0 43%, #e8f3ff 100%);
}
.sidebar__header::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 30%;
    right: -18%;
    bottom: -34px;
    height: 76px;
    pointer-events: none;
    background: linear-gradient(165deg, rgba(48, 133, 238, 0.05) 12%, rgba(83, 157, 247, 0.32) 50%, rgba(207, 229, 255, 0.2) 72%);
    border-radius: 58% 0 0 0;
    transform: rotate(-6deg);
}
.sidebar__header::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -15%;
    bottom: -38px;
    width: 88%;
    height: 72px;
    pointer-events: none;
    background: transparent;
    border-top: 4px solid rgba(242, 181, 55, 0.72);
    border-radius: 58% 0 0 0;
    transform: rotate(-7deg);
}


/* Compact header and control sizing refinements */
.sidebar__header {
    min-height: 64px;
    padding: 12px 16px;
}
.sidebar__section-title {
    grid-template-columns: 42px minmax(0, 1fr) auto;
}
.sidebar__details[open] > .sidebar__section-title,
.sidebar__section--active .sidebar__section-title {
    box-shadow: 0 6px 16px rgba(38, 111, 197, 0.1);
}
.sidebar__section-icon {
    width: 38px;
    min-width: 38px;
    height: 34px;
    border-radius: 17px;
}
.sidebar__section-count {
    min-width: 32px;
    height: 28px;
    padding-inline: 8px;
}
@media (max-width: 767px) {
    .sidebar__header {
        min-height: 64px;
        padding: 12px 14px;
    }
}


/* Final compact sidebar header height */
.sidebar__header {
    min-height: 50px;
    padding: 7px 12px;
}
.sidebar__title {
    font-size: 1rem;
    line-height: 1.3;
}
.sidebar__header::before {
    bottom: -24px;
    height: 50px;
}
.sidebar__header::after {
    bottom: -27px;
    height: 52px;
    border-top-width: 3px;
}
@media (max-width: 767px) {
    .sidebar__header {
        min-height: 50px;
        padding: 7px 12px;
    }
}


/* Compact section chevron control */
.sidebar__section-title {
    grid-template-columns: 36px minmax(0, 1fr) auto;
}
.sidebar__section-icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
}
.sidebar__section-icon::before {
    width: 7px;
    height: 7px;
    border-right-width: 2px;
    border-bottom-width: 2px;
}


/* Subtle chevron depth without competing with the label */
.sidebar__section-icon {
    box-shadow: none;
}
.sidebar__details[open] > .sidebar__section-title .sidebar__section-icon,
.sidebar__section--active .sidebar__section-icon {
    box-shadow: 0 2px 5px rgba(33, 125, 240, 0.14);
}


/* Preserve the original inner chevron */
.sidebar__section-icon::before {
    width: 8px;
    height: 8px;
    border-right-width: 3px;
    border-bottom-width: 3px;
}


/* Keep the scrollbar outside the visual sidebar card */
.left-sidebar {
    max-height: calc(100dvh - var(--kkb-navbar-height) - 32px);
    padding-right: 7px;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(31, 83, 145, 0.32) transparent;
}
.sidebar {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
}
.left-sidebar::-webkit-scrollbar { width: 7px; }
.left-sidebar::-webkit-scrollbar-track { background: transparent; }
.left-sidebar::-webkit-scrollbar-thumb {
    background: rgba(31, 83, 145, 0.3);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}
.left-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(31, 83, 145, 0.48);
    border: 2px solid transparent;
    background-clip: padding-box;
}
@media (max-width: 767px) {
    .left-sidebar {
        max-height: none;
        padding-right: 0;
        overflow: visible;
        overscroll-behavior: auto;
        scrollbar-gutter: auto;
    }
}


/* Center the compact sidebar category header */
.sidebar__header {
    place-items: center;
    text-align: center;
}
.sidebar__heading {
    width: 100%;
}
.sidebar__title {
    text-align: center;
}


/* Reference-matched compact category-header artwork */
.sidebar__header {
    background:
        radial-gradient(90% 150% at 100% -15%, rgba(183, 216, 255, 0.78) 0%, rgba(221, 238, 255, 0.42) 50%, transparent 72%),
        linear-gradient(112deg, #fff2d8 0%, #fff9eb 42%, #edf6ff 72%, #e4f1ff 100%);
}
.sidebar__header::before {
    left: 24%;
    right: -13%;
    bottom: -31px;
    height: 58px;
    background:
        linear-gradient(168deg, transparent 0 22%, rgba(128, 184, 252, 0.12) 23%, rgba(94, 161, 246, 0.4) 58%, rgba(208, 229, 255, 0.2) 100%);
    border-radius: 68% 0 0 0 / 88% 0 0 0;
    transform: rotate(-5deg);
}
.sidebar__header::after {
    right: -12%;
    bottom: -34px;
    width: 84%;
    height: 60px;
    background: transparent;
    border-top: 3px solid rgba(245, 184, 56, 0.78);
    border-radius: 66% 0 0 0 / 92% 0 0 0;
    transform: rotate(-6deg);
}


/* Scalable artwork matched to the supplied header reference */
.sidebar__header {
    background-color: #fff8e9;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 180' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23dcecff' stop-opacity='.72'/%3E%3Cstop offset='1' stop-color='%23cfe4ff' stop-opacity='.92'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d6e9ff' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%238fc3ff' stop-opacity='.72'/%3E%3C/linearGradient%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 180' preserveAspectRatio='none'%3E%3Cpath d='M0 143C155 205 350 124 535 150C690 172 820 101 1000 104V180H0Z' fill='%23dcecff' fill-opacity='.78'/%3E%3Cpath d='M535 148C682 137 805 34 1000 43V73C825 61 748 151 565 159Z' fill='%2399c8ff' fill-opacity='.58'/%3E%3Cpath d='M563 157C724 168 827 73 1005 78' fill='none' stroke='%23f2bd4b' stroke-width='7' stroke-linecap='round' stroke-opacity='.82'/%3E%3Cpath d='M0 143C175 163 330 135 515 153' fill='none' stroke='%23edf5ff' stroke-width='4' stroke-opacity='.9'/%3E%3C/svg%3E"),
        radial-gradient(95% 145% at 100% -20%, rgba(190, 220, 255, 0.72) 0%, rgba(229, 242, 255, 0.34) 52%, transparent 73%),
        linear-gradient(112deg, #fff1d5 0%, #fff9eb 44%, #edf6ff 75%, #e5f1ff 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.sidebar__header::before,
.sidebar__header::after {
    display: none;
}


/* Refined sidebar proportions and timeline alignment */
.sidebar__title {
    font-size: 1.125rem;
    line-height: 1.25;
}
.sidebar__section-title {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    min-height: 46px;
    padding: 5px 10px 5px 7px;
}
.sidebar__section-icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
}
.sidebar__details[open] > .sidebar__section-title .sidebar__section-icon,
.sidebar__section--active .sidebar__section-icon {
    box-shadow: 0 1px 3px rgba(33, 125, 240, 0.1);
}
.sidebar__articles {
    margin-left: 10px;
    padding-left: 22px;
}
.sidebar__articles::before {
    left: 6px;
}
.sidebar__link {
    padding-left: 17px;
}
.sidebar__link::before {
    left: -19px;
}
.sidebar__article--active > .sidebar__link,
.sidebar__link[aria-current="page"] {
    padding-left: 17px;
}
.sidebar__article--active > .sidebar__link::before,
.sidebar__link[aria-current="page"]::before {
    left: -19px;
}
@media (max-width: 767px) {
    .sidebar__section-title {
        min-height: 50px;
    }
}

.site-header {
    position: relative;
    z-index: 20;
    isolation: isolate;
    background-color: var(--kkb-header-bg);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 14px rgba(0, 19, 46, 0.18);
}

.site-header__inner {
    width: min(calc(100% - var(--kkb-container-inline-space)), var(--kkb-container-width));
    min-height: 84px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: var(--kkb-space-6);
}

.site-header__left,
.site-header__center,
.site-header__right {
    min-width: 0;
}

.site-header__left {
    display: flex;
    align-items: center;
}

.site-header__center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-header__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.site-header__saved {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 44px;
    padding: 8px 10px;
    border-radius: var(--kkb-radius-md);

    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    white-space: nowrap;

    font-family: var(--kkb-font-ui);
    font-size: var(--kkb-font-size-sm);
    font-weight: var(--kkb-font-weight-medium);

    transition:
        color var(--kkb-transition-fast),
        background-color var(--kkb-transition-fast);
}

.site-header__saved:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.site-header__saved:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    outline: 2px solid var(--kkb-color-accent);
    outline-offset: 2px;
}

.site-header__saved-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header__saved-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    color: #00132e;
    background: #ffffff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1;
}

.site-header__saved-count[hidden] {
    display: none;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--kkb-space-3);

    color: inherit;
    text-decoration: none;
}

.site-brand:hover {
    text-decoration: none;
}

.site-brand__logo {
    display: block;
    width: auto;
    height: 76px;
    flex-shrink: 0;
}

.site-brand__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-brand__name {
    margin: 0;
    font-family: var(--kkb-font-heading);
    font-size: var(--kkb-font-size-xl);
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.1;
    color: var(--kkb-header-text);
}

.site-brand__tagline {
    margin-top: 2px;

    font-family: var(--kkb-font-ui);
    font-size: var(--kkb-font-size-sm);
    font-weight: var(--kkb-font-weight-regular);

    color: rgba(255, 255, 255, 0.72);
}

/* Header Search */
.site-search {
    width: min(100%, 500px);
    display: flex;
    align-items: center;
    padding: 3px;

    background: #ffffff;
    border: 1px solid rgba(14, 3, 83, 0.18);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.site-search:focus-within {
    border-color: var(--kkb-color-primary);
    box-shadow:
        0 0 0 3px rgba(14, 3, 83, 0.10),
        0 3px 10px rgba(15, 23, 42, 0.08);
}
.site-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 33px;
    padding: 0 16px;
    color: var(--kkb-color-text);
    background: transparent;
    border: 0;
    outline: 0;
    font-family: var(--kkb-font-ui);
    font-size: 15px;
}
.site-search__input::placeholder {
    color: var(--kkb-color-text-muted);
    opacity: 0.85;
}
.site-search__button {
    flex: 0 0 auto;
    min-height: 33px;
    padding: 0 20px;
    color: #ffffff;
    background: var(--kkb-color-primary);
    border: 0;
    border-radius: 999px;
    font-family: var(--kkb-font-ui);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}
.site-search__button:hover {
    background: var(--kkb-color-primary-hover);
}
.site-search__button:active {
    transform: scale(0.97);
}
.site-search__button:focus-visible {
    outline: 2px solid var(--kkb-color-accent);
    outline-offset: 2px;
}

@media (max-width:1279px) {
    .site-header__inner {
        min-height: 80px;
    }
    .site-brand__logo {
        height: 72px;
    }
}

@media (max-width:1023px) {
    .site-header__inner {
        min-height: 72px;
        gap: var(--kkb-space-4);
    }
    .site-brand__logo {
        height: 64px;
    }
}

@media (max-width:767px) {
    .site-header__inner {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding-top: 6px;
    }
    .site-header__right {
        position: absolute;
        top: 14px;
        right: 0;
        display: flex;
    }

    .site-header__saved {
        min-width: 44px;
        padding: 8px;
        justify-content: center;
    }

    .site-header__saved-label {
        display: none;
    }

    .site-header__center {
        display: flex;
        grid-column: 1 / -1;
        width: 100%;
        padding-bottom: 12px;
    }

    .site-search {
        width: 100%;
        max-width: none;
    }

    .site-search__input {
        height: 42px;
        padding-inline: 14px;
        font-size: 16px;
    }

    .site-search__button {
        min-height: 42px;
        padding-inline: 16px;
    }

}
@media (min-width: 768px) and (max-width: 1023px) {
    .site-header__saved {
        width: 44px;
        padding: 8px;
        justify-content: center;
    }

    .site-header__saved-label {
        display: none;
    }
}

/* Desktop Navbar */
.site-nav {
    position: sticky;
    top: 0;
    z-index: var(--kkb-z-navbar);
    background-color: var(--kkb-navbar-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--kkb-font-ui);
    box-shadow: 0 4px 12px rgba(0, 19, 46, 0.16);
}
.site-nav__inner {
    width: min(calc(100% - var(--kkb-container-inline-space)), var(--kkb-container-width));
    height: var(--kkb-navbar-height);
    margin-inline: auto;
    display: flex;
    align-items: stretch;
}
.site-nav__home {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--kkb-navbar-height);
    min-width: var(--kkb-navbar-height);
    height: var(--kkb-navbar-height);
    overflow: hidden;
    color: transparent;
    font-size: 0;
    text-decoration: none;
    transition: background-color var(--kkb-transition-fast);
}
.site-nav__home::before {
    content: "";
    width: 22px;
    height: 22px;
    color: var(--kkb-navbar-text);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9.5h13V10'/%3E%3Cpath d='M9.5 19.5v-6h5v6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9.5h13V10'/%3E%3Cpath d='M9.5 19.5v-6h5v6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.site-nav__home:hover, .site-nav__home:focus-visible {
    color: var(--kkb-navbar-text);
    background: var(--kkb-navbar-hover-bg);
    box-shadow: inset 0 2px 0 #ffd400, inset 0 -2px 0 #ffd400;
}
.site-nav__menu {
    display: flex;
    flex: 0 1 auto;
    align-items: stretch;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 2px;
    list-style: none;
}
.site-nav__item {
    position: relative;
    margin: 0;
    padding: 0;
}
.site-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--kkb-navbar-height);
    padding: 0 18px;
    border-radius: 2px;
    color: var(--kkb-navbar-text);
    font-size: var(--kkb-font-size-sm);
    font-weight: var(--kkb-font-weight-medium);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--kkb-transition-fast), background-color var(--kkb-transition-fast);
}
.site-nav__menu>.site-nav__item>.site-nav__link {
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    color: var(--kkb-navbar-text);
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    transition: color .18s ease, background-color .18s ease;
}
.site-nav__item--has-children>.site-nav__link {
    gap: 8px;
}
.site-nav__menu>.site-nav__item--active-ancestor>.site-nav__link {
    color: var(--kkb-navbar-text);
    background-color: var(--kkb-navbar-active-bg);
}
.site-nav__item--has-children>.site-nav__link::after {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.78;
}
.site-nav__home:focus-visible, .site-nav__link:focus-visible, .site-nav__toggle:focus-visible, .site-nav__submenu-toggle:focus-visible {
    position: relative;
    z-index: 2;
    outline: 2px solid var(--kkb-color-primary);
    outline-offset: -3px;
}
.site-nav__toggle {
    display: none;
    margin-left: auto;
    padding: 0 var(--kkb-space-4);
    border: 0;
    background: transparent;
    color: var(--kkb-navbar-text);
    font-size: var(--kkb-font-size-xl);
}
.site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--kkb-z-dropdown);
    width: max-content;
    min-width: var(--kkb-navbar-dropdown-min-width);
    max-width: var(--kkb-navbar-dropdown-max-width);
    overflow-x: visible;
    overscroll-behavior: contain;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid rgba(14, 3, 83, .14);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    --kkb-dropdown-shift-y: 0px;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.site-nav__menu>.site-nav__item>.site-nav__submenu {
    transform: translateY(calc(6px + var(--kkb-dropdown-shift-y)));
}
.site-nav__menu>.site-nav__item:hover>.site-nav__submenu,
.site-nav__menu>.site-nav__item:focus-within>.site-nav__submenu {
    transform: translateY(var(--kkb-dropdown-shift-y));
}
.site-nav__item:hover>.site-nav__submenu,
.site-nav__item:focus-within>.site-nav__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.site-nav__submenu .site-nav__link {
    width: 100%;
    height: auto;
    min-height: 42px;
    padding: 10px 14px;
    border: 0;
    border-radius: 6px;
    color: #27344A;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    transition: color .16s ease, background-color .16s ease;
}
.site-nav__submenu .site-nav__item--active-ancestor > .site-nav__link {
    color: var(--kkb-color-primary);
    background-color: rgba(5, 121, 250, 0.08);
    font-weight: var(--kkb-font-weight-semibold);
    box-shadow: inset 3px 0 0 var(--kkb-color-primary);
}
.site-nav__submenu .site-nav__item--has-children>.site-nav__link {
    justify-content: space-between;
}
.site-nav__submenu .site-nav__item--has-children>.site-nav__link::after {
    width: 7px;
    height: 7px;
    margin: 0 2px 0 16px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .7;
}
.site-nav__submenu .site-nav__submenu {
    top: -9px;
    left: 100%;
    margin-left: 4px;
    border: 1px solid rgba(14, 3, 83, .14);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
    transform: translate(6px, var(--kkb-dropdown-shift-y, 0px));
}
.site-nav__submenu .site-nav__submenu.site-nav__submenu--open-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 4px;
    transform: translate(-6px, var(--kkb-dropdown-shift-y, 0px));
}

.site-nav__submenu .site-nav__submenu.site-nav__submenu--open-left::before {
    right: auto;
    left: 100%;
}

/*
 * Right-edge navigation trees must grow toward the available viewport space.
 * Keeping this direction in CSS avoids the brief right-side expansion that
 * occurred before the JavaScript overflow correction ran.
 */
@media (min-width: 768px) {
    .site-nav__menu > .site-nav__item[data-domain="public-law"] > .site-nav__submenu,
    .site-nav__menu > .site-nav__item[data-domain="corporate-law"] > .site-nav__submenu,
    .site-nav__menu > .site-nav__item[data-domain="special-law"] > .site-nav__submenu,
    .site-nav__menu > .site-nav__item[data-domain="latest-updates"] > .site-nav__submenu {
        right: 0;
        left: auto;
    }

    .site-nav__menu > .site-nav__item[data-domain="public-law"] .site-nav__submenu .site-nav__submenu,
    .site-nav__menu > .site-nav__item[data-domain="corporate-law"] .site-nav__submenu .site-nav__submenu,
    .site-nav__menu > .site-nav__item[data-domain="special-law"] .site-nav__submenu .site-nav__submenu,
    .site-nav__menu > .site-nav__item[data-domain="latest-updates"] .site-nav__submenu .site-nav__submenu {
        right: 100%;
        left: auto;
        margin-right: 4px;
        margin-left: 0;
    }

    .site-nav__menu > .site-nav__item[data-domain="public-law"] .site-nav__submenu .site-nav__submenu::before,
    .site-nav__menu > .site-nav__item[data-domain="corporate-law"] .site-nav__submenu .site-nav__submenu::before,
    .site-nav__menu > .site-nav__item[data-domain="special-law"] .site-nav__submenu .site-nav__submenu::before,
    .site-nav__menu > .site-nav__item[data-domain="latest-updates"] .site-nav__submenu .site-nav__submenu::before {
        right: auto;
        left: 100%;
    }

    .site-nav__menu > .site-nav__item[data-domain="public-law"] .site-nav__submenu .site-nav__item--has-children > .site-nav__link::after,
    .site-nav__menu > .site-nav__item[data-domain="corporate-law"] .site-nav__submenu .site-nav__item--has-children > .site-nav__link::after,
    .site-nav__menu > .site-nav__item[data-domain="special-law"] .site-nav__submenu .site-nav__item--has-children > .site-nav__link::after,
    .site-nav__menu > .site-nav__item[data-domain="latest-updates"] .site-nav__submenu .site-nav__item--has-children > .site-nav__link::after {
        margin-right: 16px;
        margin-left: 2px;
        transform: rotate(135deg);
    }
}

.site-nav__submenu .site-nav__item:hover>
.site-nav__submenu.site-nav__submenu--open-left,
.site-nav__submenu .site-nav__item:focus-within>
.site-nav__submenu.site-nav__submenu--open-left,
.site-nav__submenu .site-nav__item--open>
.site-nav__submenu.site-nav__submenu--open-left {
    transform: translate(
        0,
        var(--kkb-dropdown-shift-y, 0px)
    );
}
.site-nav__submenu .site-nav__submenu::before {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    width: 8px;
    height: 100%;
}
.site-nav__submenu>.site-nav__item {
    width: 100%;
    border-bottom: 1px solid rgba(14, 3, 83, .10);
}
.site-nav__submenu>.site-nav__item:last-child {
    border-bottom: 0;
}
.site-nav__submenu .site-nav__item:hover>.site-nav__submenu,
.site-nav__submenu .site-nav__item:focus-within>.site-nav__submenu {
    transform: translate(0, var(--kkb-dropdown-shift-y, 0px));
}
.site-nav__menu .site-nav__item:hover>.site-nav__link,
.site-nav__menu .site-nav__item:focus-within>.site-nav__link {
    color: var(--kkb-color-primary);
    background: rgba(14, 3, 83, 0.10);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--kkb-color-primary);
}
.site-nav__menu>.site-nav__item:hover>.site-nav__link,
.site-nav__menu>.site-nav__item:focus-within>.site-nav__link {
    color: var(--kkb-navbar-text);
    background-color: var(--kkb-navbar-hover-bg);
    box-shadow: inset 0 2px 0 #ffd400, inset 0 -2px 0 #ffd400;
}
.site-nav__submenu-toggle {
    display: none;
}

@media (min-width: 768px) and (max-width: 1279px) {
    :root {
        --kkb-navbar-height: 44px;
    }
    .site-nav__menu {
        gap: 0;
    }
    .site-nav__menu>.site-nav__item {
        flex: 0 0 auto;
    }
    .site-nav__menu>.site-nav__item>.site-nav__link {
        gap: 4px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .site-nav {
        --kkb-navbar-dropdown-min-width: 220px;
        --kkb-navbar-dropdown-max-width: 300px;
    }
    .site-nav__home {
        width: 42px;
        min-width: 42px;
    }
    .site-nav__home::before {
        width: 19px;
        height: 19px;
    }
    .site-nav__menu>.site-nav__item>.site-nav__link {
        font-size: 12.5px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .site-nav {
        --kkb-navbar-dropdown-min-width: 210px;
        --kkb-navbar-dropdown-max-width: 280px;
    }
    .site-nav__menu {
        flex-wrap: nowrap;
    }
    .site-nav__menu>.site-nav__item>.site-nav__link {
        padding-inline: 6px;
        font-size: 13px;
    }
    .site-nav__home {
        width: 40px;
        min-width: 40px;
    }
    .site-nav__home::before {
        width: 20px;
        height: 20px;
    }
    .site-nav__submenu .site-nav__link {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 11.5px;
    }
    .site-nav__item--has-children {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24px;
    }
    .site-nav__item--has-children>.site-nav__link {
        grid-column: 1;
    }
    .site-nav__item--has-children>.site-nav__link::after {
        display: none;
    }
    .site-nav__submenu-toggle {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        align-items: center;
        justify-content: center;
        width: 20px;
        min-height: var(--kkb-navbar-height);
        padding: 0;
        color: var(--kkb-color-primary);
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .site-nav__submenu .site-nav__submenu-toggle {
        min-height: 40px;
    }
    .site-nav .site-nav__submenu-toggle {
        appearance: none;
        margin: 0;
        font-size: 0;
        line-height: 1;
    }
    .site-nav .site-nav__submenu-toggle::before {
        all: initial;
        content: "";
        display: block;
        box-sizing: border-box;
        margin: -7px 0 0 0;
        width: 7px;
        height: 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.18s ease;
    }
    .site-nav__menu>.site-nav__item>.site-nav__submenu-toggle {
        color: var(--kkb-navbar-text);
    }
    .site-nav__submenu .site-nav__submenu-toggle {
        color: var(--kkb-color-primary);
    }
    .site-nav .site-nav__item--open>.site-nav__submenu-toggle::before {
        transform: rotate(225deg);
    }
    .site-nav__item--has-children>.site-nav__submenu {
        grid-column: 1 / -1;
    }
    .site-nav__item--open>.site-nav__submenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .site-nav__menu>.site-nav__item--open>.site-nav__submenu {
        transform: translateY(var(--kkb-dropdown-shift-y, 0px));
    }
    .site-nav__submenu .site-nav__item--open>.site-nav__submenu {
        transform: translate(0, var(--kkb-dropdown-shift-y, 0px));
    }
}

@media (max-width: 767px) {
    .site-nav__inner {
        width: 100%;
        height: auto;
        min-height: var(--kkb-navbar-height);
        flex-wrap: wrap;
    }
    .site-nav__home {
        margin-left: 8px;
    }
    .site-nav__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--kkb-navbar-height);
        height: var(--kkb-navbar-height);
        margin-left: auto;
        padding: 0;
        color: var(--kkb-navbar-text);
        cursor: pointer;
    }
    .site-nav__toggle span {
        font-size: 26px;
        line-height: 1;
    }
    .site-nav__menu {
        display: none;
        flex: 0 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100dvh - var(--kkb-navbar-height));
        overflow-y: auto;
        background: #fff;
        border-top: 1px solid rgba(14, 3, 83, 0.12);
    }
    .site-nav--open .site-nav__menu {
        display: flex;
    }
    .site-nav__item {
        width: 100%;
    }
    .site-nav__item--has-children {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 46px;
    }
    .site-nav__item>.site-nav__link {
        grid-column: 1;
        width: 100%;
        min-height: 46px;
        padding: 10px 16px;
        white-space: normal;
    }
    .site-nav__item:not(.site-nav__item--has-children)>.site-nav__link {
        grid-column: 1 / -1;
    }
    .site-nav__submenu-toggle {
        display: flex;
        grid-column: 2;
        align-items: center;
        justify-content: center;
        width: 46px;
        min-height: 46px;
        padding: 0;
        color: var(--kkb-color-primary);
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .site-nav__submenu-toggle::before {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.18s ease;
    }
    .site-nav__item--open>.site-nav__submenu-toggle::before {
        transform: rotate(225deg);
    }
    .site-nav__submenu {
        position: static;
        display: none;
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0 0 0 14px;
        background: #f8f9fc;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none !important;
    }
    .site-nav__item--open>.site-nav__submenu {
        display: block;
    }
    .site-nav__submenu .site-nav__submenu::before {
        display: none;
    }
    .site-nav__submenu .site-nav__link {
        min-height: 44px;
        padding: 9px 14px;
    }
    .site-nav__item--has-children>.site-nav__link::after {
        display: none;
    }
    .site-nav__menu .site-nav__item:hover>.site-nav__link,
    .site-nav__menu .site-nav__item:focus-within>.site-nav__link {
        box-shadow: inset 3px 0 0 var(--kkb-color-primary);
    }
    .site-nav__menu > .site-nav__item > .site-nav__link {
    color: var(--kkb-color-primary);
    background: transparent;
}
    .site-nav__menu > .site-nav__item--active-ancestor > .site-nav__link {
        color: #ffffff;
        background: var(--kkb-color-primary);
    }

    /*
     * A tap on the disclosure button leaves focus inside its parent item.
     * Reset the desktop focus-within treatment so mobile labels never inherit
     * a low-contrast foreground/background combination.
     */
    .site-nav__menu .site-nav__item--has-children:focus-within > .site-nav__link {
        color: #27344a;
        background: transparent;
        box-shadow: none;
    }
    .site-nav__menu > .site-nav__item--has-children:focus-within > .site-nav__link {
        color: var(--kkb-color-primary);
    }

    /* Match the desktop navy, white and gold treatment on expanded mobile rows. */
    .site-nav__menu .site-nav__item--has-children.site-nav__item--open > .site-nav__link,
    .site-nav__menu .site-nav__item--has-children.site-nav__item--open > .site-nav__submenu-toggle {
        background: var(--kkb-color-primary);
    }
    .site-nav__menu .site-nav__item--has-children.site-nav__item--open > .site-nav__link {
        color: #ffffff;
        box-shadow: inset 3px 0 0 #f4bd43;
    }
    .site-nav__menu .site-nav__item--has-children.site-nav__item--open > .site-nav__submenu-toggle {
        color: #f4bd43;
    }

    /* Preserve the stronger current-domain state while keeping the arrow clear. */
    .site-nav__menu > .site-nav__item--active-ancestor.site-nav__item--open > .site-nav__link,
    .site-nav__menu > .site-nav__item--active-ancestor.site-nav__item--open > .site-nav__submenu-toggle {
        background: var(--kkb-color-primary);
    }
    .site-nav__menu > .site-nav__item--active-ancestor.site-nav__item--open > .site-nav__link {
        color: #ffffff;
        box-shadow: inset 3px 0 0 #f4bd43;
    }
    .site-nav__menu > .site-nav__item--active-ancestor.site-nav__item--open > .site-nav__submenu-toggle {
        color: #f4bd43;
    }
}


/* Keep disclosure state authoritative on touch layouts, including focused buttons. */
@media (min-width: 768px) and (max-width: 1023px) {
    .site-nav .site-nav__item:not(.site-nav__item--open) > .site-nav__submenu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}
@media (min-width: 1024px) {
    .site-nav .site-nav__item--dismissed > .site-nav__submenu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}
.site-nav__toggle:focus-visible {
    outline: 3px solid #ffd400;
    outline-offset: -4px;
}

/* Modern desktop navigation feedback: a quiet glass surface with one gold cue. */
@media (min-width: 1024px) {
    .site-nav__home {
        width: calc(var(--kkb-navbar-height) - 8px);
        min-width: calc(var(--kkb-navbar-height) - 8px);
        height: calc(var(--kkb-navbar-height) - 8px);
        margin: 4px 4px 4px 0;
        border: 1px solid transparent;
        border-radius: 8px;
        transition:
            background 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease,
            transform 180ms ease;
    }

    .site-nav__home::after {
        content: "";
        position: absolute;
        right: 8px;
        bottom: -1px;
        left: 8px;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: #f4bd43;
        opacity: 0;
        transform: scaleX(.45);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .site-nav__home:hover,
    .site-nav__home:focus-visible {
        background: linear-gradient(110deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045));
        border-color: rgba(255, 212, 91, .28);
        box-shadow: 0 5px 16px rgba(0, 8, 28, .16);
        transform: translateY(-1px);
    }

    .site-nav__home:hover::after,
    .site-nav__home:focus-visible::after {
        opacity: 1;
        transform: scaleX(1);
    }

    .site-nav__menu > .site-nav__item > .site-nav__link {
        isolation: isolate;
        min-height: calc(var(--kkb-navbar-height) - 8px);
        margin-block: 4px;
        border-radius: 8px;
        font-weight: 500;
        transition:
            color 180ms ease,
            transform 180ms ease,
            box-shadow 180ms ease;
    }

    .site-nav__menu > .site-nav__item > .site-nav__link::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border: 1px solid transparent;
        border-radius: inherit;
        background:
            linear-gradient(110deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045)) padding-box,
            linear-gradient(110deg, rgba(255, 212, 91, .38), rgba(255, 255, 255, .08)) border-box;
        box-shadow: 0 5px 16px rgba(0, 8, 28, .16);
        opacity: 0;
        transform: scale(.94);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .site-nav__menu > .site-nav__item:hover > .site-nav__link,
    .site-nav__menu > .site-nav__item:focus-within > .site-nav__link,
    .site-nav__menu > .site-nav__item--active-ancestor > .site-nav__link {
        color: #fff;
        background: transparent;
        box-shadow: inset 0 -2px 0 #f4bd43;
        font-weight: 500;
        transform: translateY(-1px);
    }

    .site-nav__menu > .site-nav__item:hover > .site-nav__link::before,
    .site-nav__menu > .site-nav__item:focus-within > .site-nav__link::before,
    .site-nav__menu > .site-nav__item--active-ancestor > .site-nav__link::before {
        opacity: 1;
        transform: scale(1);
    }

    .site-nav__menu > .site-nav__item--has-children > .site-nav__link::after {
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .site-nav__menu > .site-nav__item--has-children:hover > .site-nav__link::after,
    .site-nav__menu > .site-nav__item--has-children:focus-within > .site-nav__link::after {
        opacity: 1;
        transform: translateY(2px) rotate(45deg);
    }

    .site-nav__submenu .site-nav__link {
        position: relative;
        padding-inline: 14px;
        border: 1px solid transparent;
        border-radius: 8px;
        box-shadow: none;
        font-weight: 500;
        transition:
            color 170ms ease,
            background 170ms ease,
            border-color 170ms ease,
            box-shadow 170ms ease,
            transform 170ms ease;
    }

    .site-nav__submenu .site-nav__item:hover > .site-nav__link,
    .site-nav__submenu .site-nav__item:focus-within > .site-nav__link {
        color: #092d65;
        background: linear-gradient(105deg, rgba(9, 57, 118, .10), rgba(244, 189, 67, .08));
        border-color: rgba(15, 69, 139, .11);
        box-shadow: 0 5px 14px rgba(15, 46, 91, .08);
        font-weight: 500;
        transform: translateX(2px);
    }

    .site-nav__submenu .site-nav__item--active-ancestor > .site-nav__link {
        color: #092d65;
        background: linear-gradient(105deg, rgba(9, 57, 118, .12), rgba(244, 189, 67, .11));
        border-color: rgba(229, 169, 43, .24);
        box-shadow: 0 5px 14px rgba(15, 46, 91, .07);
        font-weight: 500;
    }

    .site-nav__submenu .site-nav__item--has-children > .site-nav__link::after {
        transition: transform 170ms ease, color 170ms ease;
    }

    .site-nav__submenu .site-nav__item--has-children:hover > .site-nav__link::after,
    .site-nav__submenu .site-nav__item--has-children:focus-within > .site-nav__link::after {
        color: #c88912;
        transform: translateX(2px) rotate(-45deg);
    }

    .site-nav__menu > .site-nav__item[data-domain="public-law"] .site-nav__submenu .site-nav__item--has-children:hover > .site-nav__link::after,
    .site-nav__menu > .site-nav__item[data-domain="public-law"] .site-nav__submenu .site-nav__item--has-children:focus-within > .site-nav__link::after,
    .site-nav__menu > .site-nav__item[data-domain="corporate-law"] .site-nav__submenu .site-nav__item--has-children:hover > .site-nav__link::after,
    .site-nav__menu > .site-nav__item[data-domain="corporate-law"] .site-nav__submenu .site-nav__item--has-children:focus-within > .site-nav__link::after,
    .site-nav__menu > .site-nav__item[data-domain="special-law"] .site-nav__submenu .site-nav__item--has-children:hover > .site-nav__link::after,
    .site-nav__menu > .site-nav__item[data-domain="special-law"] .site-nav__submenu .site-nav__item--has-children:focus-within > .site-nav__link::after,
    .site-nav__menu > .site-nav__item[data-domain="latest-updates"] .site-nav__submenu .site-nav__item--has-children:hover > .site-nav__link::after,
    .site-nav__menu > .site-nav__item[data-domain="latest-updates"] .site-nav__submenu .site-nav__item--has-children:focus-within > .site-nav__link::after {
        transform: translateX(-2px) rotate(135deg);
    }

    @media (prefers-reduced-motion: reduce) {
        .site-nav__menu > .site-nav__item > .site-nav__link,
        .site-nav__menu > .site-nav__item > .site-nav__link::before,
        .site-nav__menu > .site-nav__item--has-children > .site-nav__link::after,
        .site-nav__home,
        .site-nav__home::after,
        .site-nav__submenu .site-nav__link,
        .site-nav__submenu .site-nav__item--has-children > .site-nav__link::after {
            transition: none;
        }
    }
}

.site-footer {
    position: relative;

    color: rgba(255, 255, 255, 0.78);
    background:
        linear-gradient(135deg, rgba(14, 3, 83, 0.18), transparent 46%),
        var(--kkb-header-bg);
    border-top: 3px solid var(--kkb-color-accent);

    font-family: var(--kkb-font-ui);
}

.site-footer__inner {
    width: min(
        calc(100% - var(--kkb-container-inline-space)),
        var(--kkb-container-width)
    );
    margin-inline: auto;
    padding: 48px 0 22px;
}

.site-footer__main {
    display: grid;
    grid-template-columns: minmax(280px, 1.6fr) repeat(2, minmax(170px, 0.7fr));
    gap: 48px;
    align-items: start;
}

.site-footer__brand-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    color: #ffffff;
    text-decoration: none;
}

.site-footer__logo {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    object-fit: contain;
}

.site-footer__brand-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.site-footer__name {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.3;
}

.site-footer__tagline {
    color: rgba(255, 255, 255, 0.68);
    font-size: var(--kkb-font-size-sm);
    line-height: 1.5;
}

.site-footer__description {
    max-width: 48ch;
    margin: 18px 0 0;

    color: rgba(255, 255, 255, 0.72);
    font-family: var(--kkb-font-body);
    font-size: 0.95rem;
    line-height: 1.75;
}

.site-footer__group {
    min-width: 0;
}

.site-footer__heading {
    margin: 0 0 16px;

    color: #ffffff;
    font-size: 1rem;
    font-weight: var(--kkb-font-weight-bold);
    line-height: 1.4;
}

.site-footer__heading::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 9px;
    background: var(--kkb-color-accent);
}

.site-footer__list {
    display: grid;
    gap: 10px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__list a {
    position: relative;
    display: inline-block;
    padding: 2px 0;

    color: rgba(255, 255, 255, 0.74);
    text-decoration: none;

    transition:
        color var(--kkb-transition-fast),
        transform var(--kkb-transition-fast);
}

.site-footer__list a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;

    height: 1px;
    background: var(--kkb-color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--kkb-transition-fast);
}

.site-footer__list a:hover {
    color: #ffffff;
    transform: translateX(2px);
}

.site-footer__list a:hover::after {
    transform: scaleX(1);
}

.site-footer__brand-link:focus-visible,
.site-footer__list a:focus-visible {
    outline: 2px solid var(--kkb-color-accent);
    outline-offset: 4px;
}

.site-footer__disclaimer {
    display: flex;
    gap: 8px;

    margin-top: 36px;
    padding: 14px 16px;

    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-inline-start: 3px solid var(--kkb-color-accent);
    border-radius: var(--kkb-radius-md);

    font-family: var(--kkb-font-body);
    font-size: var(--kkb-font-size-sm);
    line-height: 1.65;
}

.site-footer__disclaimer strong {
    flex: 0 0 auto;
    color: #ffffff;
    font-family: var(--kkb-font-ui);
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 24px;

    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);

    color: rgba(255, 255, 255, 0.58);
    font-size: var(--kkb-font-size-xs);
    line-height: 1.5;
}

.site-footer__copyright,
.site-footer__closing {
    margin: 0;
}

.site-footer__visitor-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #cbd5e1;
    font-size: 13px;
}

.site-footer__visitor-count[hidden] {
    display: none;
}

.site-footer__visitor-count > span:first-child,
.site-footer__visitor-count strong {
    color: #f0c46c;
}

.site-footer__visitor-count strong {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
    .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .site-footer__inner {
        padding: 38px 0 20px;
    }

    .site-footer__main {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .site-footer__brand {
        grid-column: auto;
    }

    .site-footer__disclaimer,
    .site-footer__bottom {
        flex-direction: column;
    }

    .site-footer__bottom {
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer__list a,
    .site-footer__list a::after {
        transition: none;
    }
}

.site-page {
    padding: 36px 0 72px;
    background: #ffffff;
}
.site-page__inner {
    width: min(calc(100% - var(--kkb-container-inline-space)), 920px);
    margin-inline: auto;
}
.site-page__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    color: var(--kkb-color-text-muted);
    font-family: var(--kkb-font-ui);
    font-size: var(--kkb-font-size-xs);
}
.site-page__breadcrumb a {
    color: var(--kkb-color-text-muted);
    text-decoration: none;
}
.site-page__breadcrumb a:hover {
    color: var(--kkb-color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-page__header {
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--kkb-color-border);
}
.site-page__header h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.2;
}
.site-page__header p {
    max-width: 72ch;
    margin: 14px 0 0;
    color: #3d4655;
    font-family: var(--kkb-font-body);
    font-size: 1.05rem;
    line-height: 1.75;
}
.site-page__content {
    color: #202124;
    font-family: var(--kkb-font-body);
    font-size: 1rem;
    line-height: 1.8;
}
.site-page__content h2,
.site-page__content h3 {
    margin: 32px 0 12px;
}
.site-page__content h2 {
    padding-top: 24px;
    border-top: 1px solid #e6ebf2;
    font-size: 1.55rem;
}
.site-page__content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.site-page__content h3 {
    font-size: 1.2rem;
}
.site-page__content p,
.site-page__content ul,
.site-page__content ol {
    margin: 0 0 18px;
}
.site-page__content li {
    margin: 7px 0;
}
.site-page__content li::marker {
    color: var(--kkb-color-primary);
}
.site-page__content a {
    color: #0579fa;
    text-decoration: none;
}
.site-page__content a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-page__notice {
    margin: 24px 0;
    padding: 16px 18px;
    color: #173f78;
    background: #f4f8ff;
    border: 1px solid #cfddf5;
    border-inline-start: 4px solid #1754b6;
    border-radius: var(--kkb-radius-md);
}

@media (max-width: 767px) {
    .site-page {
        padding: 24px 0 48px;
    }
    .site-page__header h1 {
        font-size: clamp(1.75rem, 8vw, 2.15rem);
    }
    .site-page__content h2 {
        font-size: 1.35rem;
    }
}

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: var(--kkb-z-overlay);

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;
    padding: 0;

    color: #ffffff;
    background: var(--kkb-navbar-bg);
    border: 1px solid rgba(197, 139, 24, 0.8);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 29, 70, 0.18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);

    transition:
        opacity var(--kkb-transition-fast),
        visibility var(--kkb-transition-fast),
        transform var(--kkb-transition-fast),
        background-color var(--kkb-transition-fast),
        border-color var(--kkb-transition-fast);
}

.back-to-top--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover {
    background: #003a76;
    border-color: #d9a52e;
    transform: translateY(-2px);
}

.back-to-top:focus-visible {
    outline: 3px solid rgba(5, 121, 250, 0.35);
    outline-offset: 3px;
}

.back-to-top__icon {
    position: relative;
    width: 14px;
    height: 16px;
}

.back-to-top__icon::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 3px;

    width: 8px;
    height: 8px;

    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}

.back-to-top__icon::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 6px;

    width: 2px;
    height: 11px;

    background: currentColor;
    border-radius: 999px;
}

@media (max-width: 767px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: none;
    }
}

.save-page-button {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 14px;

    color: #ffffff;
    background: var(--kkb-navbar-bg);
    border: 1px solid rgba(197, 139, 24, 0.8);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0, 29, 70, 0.18);
    cursor: pointer;

    font-family: var(--kkb-font-ui);
    font-size: var(--kkb-font-size-sm);
    font-weight: var(--kkb-font-weight-medium);

    width: max-content;
    margin: 0;

    transition:
        background-color var(--kkb-transition-fast),
        border-color var(--kkb-transition-fast),
        transform var(--kkb-transition-fast);
}

.save-page-button:hover {
    background: #003a76;
    border-color: #d9a52e;
    transform: translateY(-2px);
}

.save-page-button:focus-visible {
    outline: 3px solid rgba(5, 121, 250, 0.35);
    outline-offset: 3px;
}

.save-page-button--saved {
    color: #ffffff;
    background: #18794e;
    border-color: #12633f;
}

.save-page-button--saved:hover {
    background: #12633f;
    border-color: #0d5033;
}

.save-page-button__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.save-page-button--saved .save-page-button__icon {
    fill: currentColor;
}

@media (max-width: 767px) {
    .save-page-button {
        min-height: 42px;
        padding: 8px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .save-page-button {
        transition: none;
    }
}

.social-share {
    position: relative;
    overflow: hidden;
    margin-top: 44px;
    padding: 22px;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(251, 191, 36, 0.14), transparent 34%),
        linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
    font-family: var(--kkb-font-ui);
}

.social-share__heading {
    margin-bottom: 16px;
}

.social-share__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #a15c06;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: normal;
}

.social-share h2 {
    margin: 0;
    color: #15233b;
    font-size: 1.15rem;
    line-height: 1.35;
}

.social-share__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.social-share__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.social-share__button svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-share__button--facebook svg {
    fill: currentColor;
    stroke: none;
}

.social-share__button:hover {
    color: #ffffff;
    filter: brightness(1.06);
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.18);
    text-decoration: none;
    transform: translateY(-2px);
}

.social-share__button:focus-visible {
    outline: 3px solid rgba(217, 119, 6, 0.35);
    outline-offset: 3px;
}

.social-share__button--facebook { background: linear-gradient(135deg, #1877f2, #0d5fc7); }
.social-share__button--whatsapp { background: linear-gradient(135deg, #25d366, #128c4b); }
.social-share__button--x { background: linear-gradient(135deg, #20242a, #050505); }
.social-share__button--linkedin { background: linear-gradient(135deg, #0a66c2, #084d91); }
.social-share__button--telegram { background: linear-gradient(135deg, #2aabee, #1686bd); }
.social-share__button--reddit { background: linear-gradient(135deg, #ff5700, #d94700); }
.social-share__button--pinterest { background: linear-gradient(135deg, #e60023, #b9001c); }
.social-share__button--native { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.social-share__button--copy {
    color: #27364f;
    background: #ffffff;
    border-color: #ccd7e5;
}
.social-share__button--copy:hover { color: #173f78; }
.social-share__button--copied {
    color: #ffffff;
    background: linear-gradient(135deg, #15805c, #0f684a);
    border-color: transparent;
}
.social-share__button--copied:hover { color: #ffffff; }

@media (max-width: 1023px) {
    .social-share__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .social-share {
        margin-top: 34px;
        padding: 17px 14px;
        border-radius: 14px;
    }
    .social-share__actions { gap: 8px; }
    .social-share__button {
        min-height: 44px;
        padding-inline: 9px;
        font-size: 0.76rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-share__button { transition: none; }
}

.social-launcher {
    position: fixed;
    z-index: var(--kkb-z-overlay);
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    font-family: var(--kkb-font-ui);
}

.social-launcher__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(245, 158, 11, .7);
    border-radius: 999px;
    color: #fbbf24;
    background: #001d46;
    box-shadow: 0 10px 28px rgba(0, 19, 46, .24);
    font: inherit;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.social-launcher--on-dark .social-launcher__toggle {
    color: #0e0353;
    background: rgba(255, 255, 255, .96);
    border-color: rgba(240, 196, 108, .9);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

.social-launcher--on-dark .social-launcher__toggle:hover,
.social-launcher--on-dark .social-launcher__toggle:focus-visible,
.social-launcher--on-dark.social-launcher--open .social-launcher__toggle {
    color: #001d46;
    background: #f7d994;
}

.social-launcher__toggle:hover,
.social-launcher__toggle:focus-visible,
.social-launcher--open .social-launcher__toggle {
    background: #0e0353;
    box-shadow: 0 12px 32px rgba(0, 19, 46, .32);
    transform: translateY(-2px);
}

.social-launcher__toggle:focus-visible,
.social-launcher__link:focus-visible {
    outline: 3px solid rgba(245, 158, 11, .45);
    outline-offset: 3px;
}

.social-launcher__toggle svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-launcher__toggle span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.social-launcher__panel { position: absolute; top: 50%; left: calc(100% + 9px); display: flex; align-items: center; gap: 5px; width: max-content; padding: 7px; border: 1px solid rgba(14, 3, 83, .13); border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 24px rgba(0, 19, 46, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-6px, -50%); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.social-launcher__panel::before { content: ""; position: absolute; top: 0; right: 100%; width: 10px; height: 100%; }
.social-launcher__link { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid #e5e9f0; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0, 19, 46, .1); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.social-launcher__link:hover { border-color: rgba(197, 139, 24, .65); box-shadow: 0 5px 12px rgba(0, 19, 46, .16); transform: translateY(-2px); }
.social-launcher__link img { display: block; width: 30px; height: 30px; border-radius: 0; object-fit: contain; }
.social-launcher__link--youtube img { width: 29px; height: 24px; }
.social-launcher__link--x img { width: 23px; height: 23px; }
.social-launcher__link--linkedin img { width: 28px; height: 28px; }

.social-launcher:hover .social-launcher__panel,
.social-launcher:focus-within .social-launcher__panel,
.social-launcher--open .social-launcher__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }

@media (max-width: 767px) {
    .social-launcher { top: 50%; bottom: auto; left: 6px; transform: translateY(-50%); }
    .social-launcher__panel { top: 50%; bottom: auto; left: calc(100% + 8px); gap: 4px; padding: 6px; transform: translate(-6px, -50%); }
    .social-launcher__link { width: 32px; height: 32px; flex-basis: 32px; }
    .social-launcher__link img { width: 27px; height: 27px; }
    .social-launcher__link--youtube img { width: 26px; height: 22px; }
    .social-launcher__link--x img { width: 21px; height: 21px; }
    .social-launcher__link--linkedin img { width: 25px; height: 25px; }
    .social-launcher:not(.social-launcher--open) .social-launcher__panel { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-6px, -50%); }
    .social-launcher--open .social-launcher__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }
    .social-launcher__toggle { width: 36px; min-width: 36px; max-width: 36px; height: 36px; min-height: 36px; aspect-ratio: 1; flex: 0 0 36px; border-radius: 50%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    .social-launcher__toggle:focus { outline: none; }
    .social-launcher__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245, 158, 11, .45), 0 10px 28px rgba(0, 19, 46, .24); }
    .social-launcher__toggle svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .social-launcher__toggle,
    .social-launcher__link { transition: none; }
}

.saved-pages__toolbar { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.saved-pages__clear, .saved-pages__remove { min-height: 40px; padding: 8px 14px; border: 1px solid #b42318; border-radius: var(--kkb-radius-md); color: #b42318; background: #ffffff; cursor: pointer; font-family: var(--kkb-font-ui); font-weight: var(--kkb-font-weight-medium); }
.saved-pages__clear:hover, .saved-pages__remove:hover { color: #ffffff; background: #b42318; }
.saved-pages__clear:focus-visible, .saved-pages__remove:focus-visible, .saved-pages__link:focus-visible { outline: 3px solid rgba(5, 121, 250, 0.35); outline-offset: 3px; }
.saved-pages__empty { padding: 24px; color: #475467; background: #f8fafc; border: 1px solid #dfe6ef; border-radius: var(--kkb-radius-md); text-align: center; }
.saved-pages__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.saved-pages__item { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; padding: 16px 18px; background: #ffffff; border: 1px solid #dfe6ef; border-radius: var(--kkb-radius-md); box-shadow: var(--kkb-shadow-sm); }
.saved-pages__details { min-width: 0; }
.site-page__content .saved-pages__link { color: #006dcc; font-family: var(--kkb-font-ui); font-size: 1.05rem; font-weight: var(--kkb-font-weight-bold); text-decoration: none; }
.site-page__content .saved-pages__link:hover { color: #004f99; text-decoration: none; }
.saved-pages__date { margin: 5px 0 0; color: var(--kkb-color-text-muted); font-family: var(--kkb-font-ui); font-size: var(--kkb-font-size-xs); }
@media (max-width: 599px) { .saved-pages__item { align-items: flex-start; flex-direction: column; } .saved-pages__remove { align-self: flex-end; } }


.search-results__form { max-width: 760px; }
.search-results__form label { display: block; margin-bottom: 8px; }
.search-results__controls { display: flex; gap: 8px; }
.search-results__controls input { flex: 1; min-width: 0; width: 100%; padding: 10px; font-size: 16px; border: 1px solid #667085; border-radius: 6px; }
.search-results__controls button { min-height: 44px; padding: 10px 18px; background: var(--kkb-color-primary); color: white; border: 0; border-radius: 6px; }
.search-results :is(input, button, a):focus-visible { outline: 3px solid #c58b18; outline-offset: 3px; }
.search-results ul { list-style: none; padding: 0; }
.search-results li { padding: 16px 0; border-bottom: 1px solid var(--kkb-color-border); overflow-wrap: anywhere; }
.search-results li a { display: inline-block; padding-block: 10px; font-weight: 700; }
.search-results li p { margin-bottom: 0; }


.site-page:has(.domain-directory) { background: #f5f7fb; }
.site-page__inner:has(.domain-directory) { width: min(calc(100% - var(--kkb-container-inline-space)), 1200px); }
.domain-directory { font-family: var(--kkb-font-ui); }
.domain-directory__intro { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: clamp(24px, 4vw, 42px); background: linear-gradient(135deg, #001d46 0%, #062a5b 100%); color: #fff; border-radius: 18px; box-shadow: 0 18px 45px rgba(0,29,70,.14); position: relative; overflow: hidden; }
.domain-directory__intro::after { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -120px; border: 1px solid rgba(240,196,108,.28); border-radius: 50%; box-shadow: 0 0 0 34px rgba(240,196,108,.05), 0 0 0 68px rgba(240,196,108,.035); pointer-events: none; }
.domain-directory__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #f0c46c; }
.site-page__content .domain-directory__intro h2 { color: #fff; margin: 12px 0; padding: 0; border: 0; font-size: clamp(1.65rem, 3vw, 2.2rem); }
.domain-directory__intro p { max-width: 65ch; margin-bottom: 0; color: #e1e8f2; }
.domain-directory__stats { display: flex; gap: 30px; text-align: center; font-size: 13px; position: relative; z-index: 1; }
.domain-directory__stats strong { display: block; font-size: 32px; line-height: 1.1; color: #f0c46c; }
.domain-directory__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 34px 0 18px; }
.site-page__content .domain-directory__heading h2 { margin: 0; padding: 0; border: 0; font-size: 22px; }
.domain-directory__heading > span { color: #667085; font-size: 13px; }
.domain-directory__group + .domain-directory__group { margin-top: 30px; }
.domain-directory__group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #dfe5ee; }
.site-page__content .domain-directory__group-heading h3 { margin: 0; color: #0e0353; font-size: 18px; }
.domain-directory__group-heading span { color: #667085; font-size: 12px; }
.domain-directory__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.site-page__content .domain-directory__card { position: relative; display: flex; min-width: 0; min-height: 250px; padding: 24px; gap: 18px; color: #101828; background: linear-gradient(145deg, #fff 0%, #fbfcff 100%); border: 1px solid #dfe5ee; border-radius: 16px; text-decoration: none; box-shadow: 0 6px 22px rgba(18, 40, 74, .05); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.site-page__content .domain-directory__card::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, #c58b18, #f0c46c); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.site-page__content .domain-directory__card:hover { color: #101828; transform: translateY(-4px); border-color: rgba(197,139,24,.55); box-shadow: 0 16px 38px rgba(18,40,74,.12); text-decoration: none; }
.site-page__content .domain-directory__card:hover::after { transform: scaleX(1); }
.domain-directory__icon { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; color: #0e0353; background: #faf2df; border-radius: 14px; transition: background-color .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease; }
.domain-directory__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s ease, stroke .28s ease; }
.domain-directory__card:hover .domain-directory__icon, .domain-directory__card:focus-visible .domain-directory__icon { color: #fbbf24; background: #0f172a; transform: translateY(-2px) scale(1.04); box-shadow: 0 9px 20px rgba(15,23,42,.2); }
.domain-directory__card:hover .domain-directory__icon svg, .domain-directory__card:focus-visible .domain-directory__icon svg { transform: scale(1.07); }
.domain-directory__card-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.domain-directory__card-meta { color: #667085; font-size: 12px; }
.domain-directory__card strong { display: block; margin-top: 12px; font-size: 19px; line-height: 1.45; overflow-wrap: anywhere; color: #101828; }
.domain-directory__card-description { display: block; margin-top: 10px; color: #596579; font-family: var(--kkb-font-body); font-size: 14px; line-height: 1.65; }
.domain-directory__card-action { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; color: #173f8f; font-size: 14px; font-weight: 700; }
.domain-directory__card-action span { font-size: 20px; transition: transform .2s ease; }
.domain-directory__card:hover .domain-directory__card-action span { transform: translateX(4px); }
.domain-directory__card:focus-visible { outline: 3px solid #c58b18; outline-offset: 4px; }
.domain-directory__note { margin-top: 30px; padding: 16px 20px; border-left: 3px solid #c58b18; background: #fff; font-size: 13px; color: #596579; }
@media (max-width: 1023px) { .domain-directory__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .domain-directory__intro { grid-template-columns: 1fr; } .domain-directory__stats { text-align: left; } }
@media (max-width: 767px) { .domain-directory__group-heading { display: block; } .domain-directory__group-heading span { display: block; margin-top: 5px; } .domain-directory__grid { grid-template-columns: 1fr; } .domain-directory__intro { padding: 22px; border-radius: 14px; } .domain-directory__heading { display: block; } .domain-directory__heading > span { display: block; margin-top: 8px; } .site-page__content .domain-directory__card { min-height: 220px; padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .domain-directory__card, .domain-directory__card::after, .domain-directory__card-action span, .domain-directory__icon, .domain-directory__icon svg { transition: none; } }


.home-main{background:#f5f7fb;color:#10244d}.home-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 75% 20%,rgba(35,97,184,.35),transparent 28%),linear-gradient(125deg,#031a3e 0%,#082858 58%,#061a39 100%);color:#fff;border-bottom:1px solid rgba(215,161,51,.32)}.home-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(238,182,65,.28) .7px,transparent .7px);background-size:22px 22px;opacity:.16}.home-hero__inner{position:relative;z-index:1;width:min(100% - 32px,1280px);margin:auto;padding:54px 0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:50px;align-items:center}.home-hero__eyebrow{display:inline-flex;margin:0 0 14px;padding:7px 13px;border:1px solid rgba(245,188,67,.38);border-radius:99px;background:rgba(245,188,67,.1);color:#ffd273;font-weight:700;font-size:.84rem}.home-hero h1{max-width:760px;margin:0;font-size:clamp(2.1rem,4vw,4rem);line-height:1.12;color:#fff;letter-spacing:-.035em}.home-hero__intro{max-width:760px;margin:19px 0 0;color:#d8e2f2;font-size:1.04rem;line-height:1.8}.home-search{display:flex;max-width:690px;margin-top:25px;padding:5px;background:#fff;border-radius:12px;box-shadow:0 18px 45px rgba(0,0,0,.23)}.home-search input{min-width:0;flex:1;border:0;padding:12px 15px;font:inherit;color:#162d57;background:transparent}.home-search input:focus{outline:2px solid #efb536;outline-offset:2px;border-radius:8px}.home-search button{border:0;border-radius:8px;padding:0 23px;background:#e8a91f;color:#071d3f;font:inherit;font-weight:800;cursor:pointer}.home-search button:hover{background:#f5bf48}.home-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:700px;margin-top:28px;border-top:1px solid rgba(255,255,255,.14);padding-top:20px}.home-stats div{padding:0 18px;border-left:1px solid rgba(255,255,255,.13)}.home-stats div:first-child{padding-left:0;border-left:0}.home-stats strong,.home-stats span{display:block}.home-stats strong{color:#ffd067;font-size:1.2rem}.home-stats span{margin-top:4px;color:#bfcde2;font-size:.78rem}.home-hero__codes{position:relative;padding:28px 25px;border:1px solid rgba(245,188,67,.36);border-radius:22px;background:linear-gradient(145deg,rgba(20,56,108,.92),rgba(3,20,47,.96));box-shadow:0 26px 60px rgba(0,0,0,.3)}.home-hero__codes>p{margin:0 0 15px;color:#fff;font-weight:800;font-size:1.08rem}.home-hero__seal{position:absolute;right:20px;top:-22px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#eeb740;color:#092049;font-size:1.55rem;font-weight:800;box-shadow:0 9px 24px rgba(0,0,0,.24)}.home-hero__codes a{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(2,16,39,.55);color:#fff;text-decoration:none}.home-hero__codes a:hover{border-color:rgba(245,188,67,.6);transform:translateX(2px)}.home-hero__codes strong{color:#ffd067}.home-hero__codes span{font-size:.78rem;color:#d4deed}.home-shell{width:min(100% - 32px,1380px);margin:0 auto;padding:34px 0 55px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.home-feed{min-width:0}.home-section{margin-bottom:26px;padding:28px;border:1px solid #dfe6f0;border-radius:18px;background:#fff;box-shadow:0 8px 28px rgba(16,44,85,.055)}.home-section__header{margin-bottom:23px}.home-section__header span{color:#a96900;font-size:.76rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.home-section__header h2{margin:4px 0 5px;color:#0b2e68;font-size:clamp(1.55rem,2.3vw,2.15rem)}.home-section__header p{margin:0;color:#617087;font-size:.92rem}.home-domains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.home-domain{position:relative;min-width:0;padding:20px 18px;border:1px solid #dce4ee;border-radius:15px;background:linear-gradient(150deg,#fff,#f9fbff);color:#172b4c;text-decoration:none;box-shadow:0 4px 14px rgba(19,53,101,.045);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.home-domain:hover,.home-domain:focus-visible{transform:translateY(-4px);border-color:#e5ad38;box-shadow:0 14px 34px rgba(15,49,98,.13)}.home-domain:focus-visible{outline:3px solid rgba(27,107,211,.35);outline-offset:3px}.home-domain__icon{width:43px;height:43px;display:grid;place-items:center;margin-bottom:13px;border-radius:12px;background:#e9f2ff;color:#0c5ebf;font-size:.76rem;font-weight:900;letter-spacing:.04em}.home-domain:nth-child(2n) .home-domain__icon{background:#fff1d8;color:#9b5a00}.home-domain:nth-child(3n) .home-domain__icon{background:#e8f8f1;color:#13704c}.home-domain__heading strong,.home-domain__heading small{display:block}.home-domain__heading strong{color:#0b2e68;font-size:1.02rem}.home-domain__heading small{margin-top:2px;color:#738097;font-size:.7rem}.home-domain p{min-height:62px;margin:12px 0 10px;color:#596981;font-size:.79rem;line-height:1.65}.home-domain ul{min-height:70px;margin:0;padding:0;list-style:none;color:#33455f;font-size:.73rem}.home-domain li{position:relative;padding:3px 0 3px 13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size: 0.83rem;}.home-domain li:before{content:"";position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%;background:#d69818}.home-domain__meta{display:block;margin-top:13px;padding-top:11px;border-top:1px solid #e7ecf3;color:#6a788d;font-size:.69rem}.home-domain__action{display:flex;justify-content:space-between;align-items:center;margin-top:11px;color:#0b5fc0;font-size:.77rem;font-weight:800}.home-domain--upcoming{opacity:.72}.home-domain--upcoming .home-domain__action{color:#7b8491}.home-articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.home-article{display:flex;flex-direction:column;min-width:0;padding:19px;border:1px solid #dfe6ef;border-radius:14px;background:#fbfcfe}.home-article__top{display:flex;gap:8px;justify-content:space-between;align-items:center;font-size:.69rem}.home-article__top span{padding:4px 8px;border-radius:20px;background:#eaf2ff;color:#115ea9;font-weight:700}.home-article__top time{color:#7b8799}.home-article h3{margin:14px 0 8px;font-size:.98rem;line-height:1.55}.home-article h3 a{color:#102f65;text-decoration:none}.home-article h3 a:hover{color:#b06b00}.home-article p{margin:0 0 16px;color:#627087;font-size:.77rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.home-article__link{margin-top:auto;color:#0d5fb9;text-decoration:none;font-size:.77rem;font-weight:800}.home-ad-rail{position:sticky;top:18px;display:grid;gap:20px}.home-ad{min-height:250px;display:grid;place-content:center;text-align:center;border:1px dashed #bdc7d5;border-radius:12px;background:#eef1f5;color:#7e8998}.home-ad--large{min-height:600px}.home-ad span{font-size:.72rem;letter-spacing:.13em}.home-ad small{margin-top:5px;font-size:.65rem;color:#9aa3af}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(max-width:1170px){.home-domains{grid-template-columns:repeat(2,minmax(0,1fr))}.home-articles{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:1023px){.home-hero__inner{grid-template-columns:minmax(0,1fr) 270px;gap:28px;padding:42px 0}.home-shell{grid-template-columns:minmax(0,1fr) 240px;gap:16px}.home-section{padding:22px}.home-ad--large{min-height:480px}.home-articles{grid-template-columns:1fr}}@media(max-width:767px){.home-hero__inner{width:min(100% - 24px,680px);grid-template-columns:1fr;padding:35px 0}.home-hero h1{font-size:2.2rem}.home-hero__codes{display:none}.home-stats{grid-template-columns:1fr 1fr}.home-stats div:nth-child(3){grid-column:1/-1;margin-top:15px;padding:15px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.12)}.home-shell{width:min(100% - 20px,680px);display:block;padding-top:18px}.home-ad-rail{display:none}.home-section{padding:18px 14px;border-radius:14px}.home-domains,.home-articles{grid-template-columns:1fr}.home-domain p,.home-domain ul{min-height:0}.home-search button{padding:0 16px}.home-hero__intro{font-size:.94rem}.home-section__header h2{font-size:1.55rem}}

/* Reference layout correction: two-column content grid beside the ad rail. */
.home-hero {
  background-color: #0f172a;
  background-image:
    radial-gradient(circle at 78% 18%, rgba(30, 64, 175, 0.22), transparent 30%),
    linear-gradient(125deg, #0f172a 0%, #111c35 58%, #0b1326 100%);
}

.home-hero::before {
  background-image:
    radial-gradient(rgba(217, 119, 6, 0.34) 0.55px, transparent 0.55px),
    radial-gradient(rgba(217, 119, 6, 0.2) 0.55px, transparent 0.55px);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  opacity: 0.16;
}

.home-hero__codes {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border-color: rgba(245, 158, 11, 0.34);
}

.home-hero__codes a {
  background: rgba(2, 6, 23, 0.56);
  border-color: rgba(148, 163, 184, 0.15);
}

.home-domains {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.home-domain {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
  padding: 24px;
  border-radius: 16px;
  background: #ffffff;
  border-color: rgba(203, 213, 225, 0.85);
}

.home-domain__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 13px;
  font-size: 0.82rem;
}

.home-domain__heading {
  grid-column: 2;
  align-self: center;
}

.home-domain__heading strong {
  font-size: 1.14rem;
}

.home-domain p,
.home-domain ul,
.home-domain__meta,
.home-domain__action {
  grid-column: 1 / -1;
}

.home-domain p {
  min-height: 0;
  margin: 18px 0 10px;
  font-size: 0.88rem;
}

.home-domain ul {
  min-height: 64px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}

.home-domain__meta {
  margin-top: 14px;
}

.home-articles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1170px) {
  .home-domains,
  .home-articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) and (min-width: 768px) {
  .home-domain {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 18px;
    column-gap: 12px;
  }

  .home-domain__icon {
    width: 46px;
    height: 46px;
  }

  .home-domain ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .home-domains,
  .home-articles {
    grid-template-columns: 1fr;
  }
}

.home-domain__icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reference-faithful hero and domain card composition. */
.home-hero__inner {
  padding-top: 62px;
  padding-bottom: 62px;
}

.home-hero h1 span {
  display: block;
  margin-top: 4px;
  color: #fbbf24;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 25px;
}

.home-hero__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 22px;
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.home-hero__actions a:hover,
.home-hero__actions a:focus-visible {
  transform: translateY(-2px);
}

.home-hero__primary {
  color: #111827;
  background: #d97706;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.2);
}

.home-hero__primary:hover {
  background: #f59e0b;
}

.home-hero__secondary {
  color: #e2e8f0;
  background: #1e293b;
  border: 1px solid #475569;
}

.home-hero__secondary:hover {
  background: #273449;
  border-color: #64748b;
}

.home-hero__codes h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.2rem;
}

.home-hero__codes > p {
  margin: 4px 0 16px;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 500;
}

.home-hero__codes-link {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  text-align: center;
}

.home-hero__codes-link a {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fbbf24;
  font-size: 0.76rem;
  font-weight: 800;
}

.home-domain {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  background: #ffffff;
}

.home-domain__icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 0 17px;
  border-radius: 13px;
}

.home-domain__heading {
  width: 100%;
}

.home-domain__heading strong {
  color: #0f172a;
  font-size: 1.4rem;
}

.home-domain__heading small {
  margin-top: 3px;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 700;
}

.home-domain p {
  width: 100%;
  margin: 14px 0 11px;
  color: #64748b;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.home-domain ul {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 14px;
  margin: 0 0 15px;
  font-size: 0.875rem;
  line-height: 1.55;
}

.home-domain li {
  font-size: 0.875rem;
}

.home-domain__action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: auto;
  margin-top: auto;
  padding: 10px 14px;
  color: #8f5000;
  background: #fff1d8;
  border: 1px solid #edc56d;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.home-domain__action-arrow {
  font-size: 1.35rem;
  line-height: 0.75;
  transition: transform 180ms ease;
}

.home-domain:hover .home-domain__action,
.home-domain:focus-visible .home-domain__action {
  color: #fbbf24;
  background: #0f172a;
  border-color: #d97706;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
}

.home-domain:hover .home-domain__action-arrow,
.home-domain:focus-visible .home-domain__action-arrow {
  transform: translateX(4px);
}

@media (max-width: 860px) and (min-width: 768px) {
  .home-domain {
    display: flex;
    padding: 19px;
  }

  .home-domain__icon {
    width: 50px;
    height: 50px;
  }

  .home-domain ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .home-hero__actions {
    flex-direction: column;
  }

  .home-hero__actions a {
    width: 100%;
  }
}

/* Exact reference hero placement and icon treatment. */
.home-hero {
  background-color: #0f172a;
  background-image: none;
}

.home-hero::before {
  background-color: #0f172a;
  background-image:
    radial-gradient(rgba(217, 119, 6, 0.5) 0.5px, transparent 0.5px),
    radial-gradient(rgba(217, 119, 6, 0.5) 0.5px, #0f172a 0.5px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  opacity: 0.1;
}

.home-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  padding-top: 58px;
  padding-bottom: 58px;
}

.home-hero__copy {
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.home-hero__eyebrow {
  margin-bottom: 18px;
  padding: 8px 14px;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.04), 0 8px 24px rgba(0, 0, 0, 0.14);
  font-weight: 800;
  opacity: 1;
}

.home-hero h1 {
  margin-inline: auto;
}

.home-hero__intro {
  margin-inline: auto;
}

.home-hero__actions {
  justify-content: center;
}

.home-hero__actions svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-hero__primary {
  background: #d97706;
  color: #020617;
}

.home-hero__primary:hover,
.home-hero__primary:focus-visible {
  background: #f59e0b;
}

.home-hero__secondary {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}

.home-stats {
  margin-inline: auto;
  text-align: left;
}

.home-hero__codes {
  width: min(100%, 480px);
  justify-self: center;
  padding: 28px 30px;
  background: linear-gradient(145deg, #1e293b, #020617);
  border: 1px solid rgba(245, 158, 11, 0.34);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34);
}

.home-hero__seal {
  top: -20px;
  right: -16px;
  background: #f59e0b;
  color: #0f172a;
}

.home-hero__seal svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-hero__codes > a {
  background: rgba(15, 23, 42, 0.86);
  border-color: #1e293b;
}

@media (max-width: 767px) {
  .home-hero__copy {
    text-align: left;
  }

  .home-hero__actions {
    justify-content: stretch;
  }

  .home-stats {
    text-align: left;
  }

  .home-hero__codes {
    display: block;
    width: calc(100% - 14px);
  }
}

/* Domain icon interaction from the supplied reference. */
.home-domain__icon {
  transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}

.home-domain__icon svg {
  transition: transform 0.28s ease, stroke 0.28s ease;
}

.home-domain:hover .home-domain__icon,
.home-domain:focus-visible .home-domain__icon {
  color: #fbbf24;
  background: #0f172a;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 9px 20px rgba(15, 23, 42, 0.2);
}

.home-domain:hover .home-domain__icon svg,
.home-domain:focus-visible .home-domain__icon svg {
  transform: scale(1.07);
}

.home-domain:hover .home-domain__heading strong,
.home-domain:focus-visible .home-domain__heading strong {
  color: #b45309;
}

/* Clearer hero badge and structured codes card typography. */
.home-hero__eyebrow {
  gap: 8px;
  color: #f59e0b;
  background: rgba(197, 139, 24, 0.14);
  border-color: rgba(245, 158, 11, 0.68);
  font-family: var(--kkb-font-ui);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  opacity: 1;
  text-shadow: none;
}

.home-hero__eyebrow > span {
  color: #f59e0b;
  -webkit-text-fill-color: #f59e0b;
  opacity: 1;
}

.home-hero__eyebrow svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-hero__codes {
  width: min(100%, 540px);
  padding: 27px 28px 24px;
}

.home-hero__codes h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  line-height: 1.35;
}

.home-hero__codes h2 svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fbbf24;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-hero__codes > p {
  margin: 6px 0 18px 34px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.home-hero__codes > a {
  grid-template-columns: minmax(118px, 0.72fr) minmax(0, 1.28fr);
  gap: 18px;
  min-height: 55px;
  padding: 13px 15px;
}

.home-hero__codes > a strong {
  font-size: 0.94rem;
  line-height: 1.35;
  white-space: nowrap;
}

.home-hero__codes > a span {
  font-size: 0.94rem;
  line-height: 1.45;
  color: #e2e8f0;
  text-align: left;
}

.home-hero__codes-link a {
  font-size: 0.88rem;
}

@media (max-width: 520px) {
  .home-hero__eyebrow {
    font-size: 0.9375rem;
  }

  .home-hero__codes {
    padding-inline: 18px;
  }

  .home-hero__codes > p {
    margin-left: 0;
  }

  .home-hero__codes > a {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Darker card copy for improved readability. */
.home-domain__heading small {
  color: #475569;
}

.home-domain p {
  color: #43536a;
}

.home-domain ul,
.home-domain li {
  color: #263a57;
}

.home-article p {
  color: #43536a;
}

.home-article__top time {
  color: #5b687a;
}

.home-article__top {
  font-size: 0.8125rem;
}

.home-article h3 {
  font-size: 1.0625rem;
  line-height: 1.55;
}

.home-article p {
  font-size: 0.9rem;
  line-height: 1.7;
}

.home-article__link {
  font-size: 0.875rem;
}

/* Make every latest-content card one clear interactive target. */
.home-article {
  color: #172b4c;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.home-article h3 {
  color: #102f65;
}

.home-article:hover,
.home-article:focus-visible {
  color: #172b4c;
  background: #ffffff;
  border-color: #e1a62c;
  box-shadow: 0 14px 30px rgba(15, 49, 98, 0.14);
  text-decoration: none;
  transform: translateY(-4px);
}

.home-article:hover h3,
.home-article:focus-visible h3 {
  color: #b06b00;
}

.home-article:hover .home-article__link,
.home-article:focus-visible .home-article__link {
  color: #b06b00;
}

.home-article:focus-visible {
  outline: 3px solid rgba(217, 119, 6, 0.32);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .home-article { transition: none; }
}

/* Prevent the two Devanagari hero heading lines from overlapping. */
.home-hero h1 {
  line-height: 1.3;
}

.home-hero h1 span {
  margin-top: 0.14em;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .home-hero h1,
  .home-hero h1 span {
    line-height: 1.34;
  }
}

/* Hero shows useful content scope only; total page count is intentionally omitted. */
.home-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-stats div:nth-child(3) {
  grid-column: auto;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 767px) {
  .home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Center the Legal Domains section introduction. */
#legal-domains > .home-section__header {
  text-align: center;
}

#legal-domains > .home-section__header > div {
  width: min(100%, 760px);
  margin-inline: auto;
}

#legal-domains > .home-section__header p {
  margin-inline: auto;
}

/* Center both remaining hero statistics within their columns. */
.home-stats,
.home-stats div {
  text-align: center;
}

@media (max-width: 767px) {
  .home-stats,
  .home-stats div {
    text-align: center;
  }
}