/* =========================================================
   01. ROOT / DESIGN TOKENS
   ========================================================= */

:root {
    --primary-color: #ee3342;
    --secondary-color: #040707;

    --primary-light: #f56671;
    --primary-dark: #d92838;

    --secondary-light: #252929;
    --secondary-dark: #000000;

    --white: #ffffff;
    --black: #000000;

    --background-color: #ffffff;
    --background-light: #f7f7f7;
    --background-soft: #fafafa;
    --background-dark: var(--secondary-color);

    --text-primary: var(--secondary-color);
    --text-secondary: #6b7075;
    --text-muted: #8b8f93;
    --text-light: var(--white);

    --border-color: #e7e7e7;
    --border-dark: #252929;

    --success: #35c759;
    --success-strong: #12813a;

    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.14);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --transition: all 0.3s ease;

    --container-width: 1320px;

    --fs-hero: clamp(2.1rem, 3.4vw, 3.4rem);
    --fs-section: clamp(30px, 3.4vw, 40px);
    --fs-card-title: 19px;
    --fs-body: 16px;
    --fs-body-sm: 14px;
    --fs-eyebrow: 12px;

    --tracking-eyebrow: 0.12em;
    --tracking-heading: -1px;

    --space-section: 96px;
    --space-section-tablet: 72px;
    --space-section-mobile: 56px;

    --radius-card: 0px;
}


/* =========================================================
   02. BASE / RESET / TYPOGRAPHY
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: var(--fs-base, 16px);
    line-height: 1.6;

    color: var(--text-primary);
    background: var(--background-color);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;

    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;

    color: var(--text-primary);

    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: var(--kpc-heading-size);
}

h2 {
    font-size: var(--kpc-heading-size);
}

h3 {
    font-size: var(--fs-2xl, 28px);
}

p {
    margin-top: 0;

    color: var(--text-secondary);
}

/* Menu items rendered by wp_nav_menu() without a <ul> wrapper (used for
   the utility bar above the logo) still emit bare <li> elements, and
   browsers bullet those by default regardless of a parent <ul> — this
   is a blanket reset so no stray bullet ever appears next to a link. */
li {
    list-style: none;
}


/* =========================================================
   03. LAYOUT CONTAINER
   ========================================================= */

.container-custom {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   04. SHARED UTILITIES
   ========================================================= */

.section-header {
    max-width: 760px;

    margin-bottom: 55px;
}

.section-header.center {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--primary-color);

    font-size: var(--fs-eyebrow);
    font-weight: 700;

    letter-spacing: var(--tracking-eyebrow);

    text-transform: uppercase;
}

.section-eyebrow::before {
    content: "";

    width: 30px;
    height: 2px;

    background:
        var(--primary-color);
}

.section-title {
    margin-bottom: 18px;
}

.section-description {
    max-width: 650px;

    margin-bottom: 0;

    font-size: var(--fs-lg, 18px);
}


/* ---------------------------------------------------------
   04.2 BUTTONS
   --------------------------------------------------------- */

.btn-kpc {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding:
        0 28px;

    border:
        2px solid
        transparent;

    border-radius:
        var(--radius-pill);

    font-size: var(--fs-sm, 14px);
    font-weight: 700;

    cursor: pointer;

    transition:
        var(--transition);
}

.btn-kpc-primary {

    color:
        var(--white);

    background:
        var(--primary-color);
}

.btn-kpc-primary:hover {

    color:
        var(--white);

    background:
        var(--primary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(
            238,
            51,
            66,
            0.25
        );
}

.btn-kpc-secondary {

    color:
        var(--white);

    background:
        var(--secondary-color);
}

.btn-kpc-secondary:hover {

    color:
        var(--white);

    background:
        var(--secondary-light);

    transform:
        translateY(-2px);
}

.btn-kpc-outline {

    color:
        var(--secondary-color);

    background:
        transparent;

    border-color:
        var(--secondary-color);
}

.btn-kpc-outline:hover {

    color:
        var(--white);

    background:
        var(--secondary-color);
}

.btn-kpc-outline-light {

    color:
        var(--white);

    background:
        transparent;

    border-color:
        rgba(
            255,
            255,
            255,
            0.6
        );
}

.btn-kpc-outline-light:hover {

    color:
        var(--secondary-color);

    background:
        var(--white);

    border-color:
        var(--white);
}


/* =========================================================
   05. UTILITY ROW — the small top row of the header: utility links
   and the search button, sitting above the main menu and to the right
   of the logo. Text is dark here (solid header); the transparent-over-
   hero state in section 07 turns it white.
   ========================================================= */

.kpc-nav-utility {
    grid-area: utility;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 26px;

    min-height: 46px;

    border-bottom: 1px solid var(--border-color);
}

.kpc-utility-links {
    display: flex;
    align-items: center;

    gap: 30px;
}

.kpc-utility-links a {
    display: inline-flex;
    align-items: center;

    color: var(--secondary-color);

    font-size: var(--fs-sm, 14px);
    font-weight: 500;

    white-space: nowrap;

    transition: var(--transition);
}

.kpc-utility-links a:hover,
.kpc-utility-links a.active {
    color: var(--primary-color);
}

.kpc-utility-links a i {
    margin-right: 7px;

    font-size: 12px;
}


/* =========================================================
   06. MAIN NAVIGATION
   ========================================================= */

.main-nav {
    position: sticky;
    top: 0;

    z-index: 1000;

    background: var(--white);

    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(4, 7, 7, 0.06);

    transition: var(--transition);
}

.main-nav-inner {
    /* Logo on the left spanning both rows; utility row above the main
       menu on the right. Collapses to a plain flex row on mobile and,
       once scrolled, to a single slim row (see section 07). */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "logo utility"
        "logo menu";

    column-gap: 48px;
    align-items: center;
}


.kpc-logo {
    grid-area: logo;

    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.kpc-logo img {
    width: auto;
    height: 79.8px;

    object-fit: contain;

    transition: height 0.3s ease;
}


.main-menu {
    grid-area: menu;

    /* Height of the menu row; links, dropdown wrappers and the active
       underline all follow it, so the scrolled state can change it in
       one place. */
    --kpc-menu-h: 60px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 36px;
}

.main-menu > a,
.main-menu > .nav-dropdown > a {
    position: relative;

    display: flex;
    align-items: center;

    height: var(--kpc-menu-h, 60px);

    color: var(--secondary-color);

    font-size: var(--fs-base, 16px);
    font-weight: 600;

    white-space: nowrap;

    text-decoration: none;

    transition: var(--transition);
}

.main-menu > a::after,
.main-menu > .nav-dropdown > a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: calc(var(--kpc-menu-h, 60px) / 2 - 21px);

    height: 3px;

    background: var(--primary-color);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.3s ease;
}

.main-menu > a:hover,
.main-menu > .nav-dropdown > a:hover,
.main-menu > .nav-dropdown:hover > a {
    color: var(--primary-color);
}

.main-menu > a:hover::after,
.main-menu > .nav-dropdown > a:hover::after,
.main-menu > .nav-dropdown:hover > a::after {
    transform: scaleX(1);
}

.main-menu > a.active,
.main-menu > .nav-dropdown > a.active {
    color: var(--primary-color);
}

.main-menu > a.active::after,
.main-menu > .nav-dropdown > a.active::after {
    transform: scaleX(1);
}

.nav-dropdown {
    /* Deliberately not positioned: the mega-panel inside it anchors to
       .main-nav (sticky / absolute / fixed depending on scroll state),
       so it always sits flush under the header without any measuring. */
    position: static;

    height: var(--kpc-menu-h, 60px);

    display: flex;
    align-items: center;
}

.nav-dropdown > a {
    gap: 7px;
}

.nav-dropdown > a i {
    font-size: 9px;

    transition: transform 0.25s ease;
}

.nav-dropdown:hover > a i {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------
   The mega-panel — attached directly below the header and held inside
   the same container as the header content (logo on the left, search
   on the right), not run edge to edge. Left/right come from main.js,
   which measures the real container; the fallback below is only used
   for the instant before that runs.
   --------------------------------------------------------- */

.nav-dropdown-menu {
    position: absolute;

    /* Attached to the header's bottom edge, so it can never drift from
       the menu when the header moves (scroll down/up, fixed <-> absolute). */
    top: 100%;
    left: var( --kpc-nav-panel-left, max( 20px, calc( ( 100vw - 1296px ) / 2 ) ) );
    right: var( --kpc-nav-panel-right, max( 20px, calc( ( 100vw - 1296px ) / 2 ) ) );

    z-index: 1300;

    background: var(--white);

    border-top: 4px solid var(--primary-color);
    border-radius: 0 0 var(--radius-md) var(--radius-md);

    overflow: hidden;

    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: opacity 0.22s ease, transform 0.25s ease, visibility 0.22s;
}

.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown.is-open > .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Active-state — underlines whichever submenu link matches the page
   currently being viewed, at every level it appears in. */
.nav-grid-heading.is-current,
.nav-accordion-toggle.is-current {
    color: var(--primary-color);
}

.nav-grid-list > li > a.is-current,
.nav-accordion-list > li > a.is-current {
    color: var(--primary-color);
    font-weight: 700;

    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.nav-grid-inner {
    display: flex;
    align-items: stretch;
    gap: 34px;

    /* Width now comes from the panel itself, which is already held to
       the header's container. */
    max-width: none;
    margin: 0;

    max-height: calc(100vh - var(--kpc-nav-panel-top, 88px) - 28px);
    overflow-y: auto;

    padding: 32px clamp(20px, 3vw, 40px) 38px;
}

.nav-grid-groups {
    flex: 1 1 auto;

    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));

    gap: 30px 36px;

    align-content: start;
}

.nav-grid-group {
    min-width: 0;
}

.nav-grid-heading {
    display: block;

    padding: 0 0 7px;
    margin-bottom: 4px;

    border-bottom: 1px solid var(--primary-color);

    color: var(--secondary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;

    transition: color 0.2s ease;
}

a.nav-grid-heading:hover {
    color: var(--primary-color);
}

.nav-grid-list {
    list-style: none;

    margin: 0;
    padding: 0;
}

.nav-grid-list > li > a {
    display: block;

    padding: 8px 2px;

    color: var(--secondary-color);

    font-size: var(--fs-sm, 14px);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;

    transition: color 0.2s ease, transform 0.2s ease;
}

.nav-grid-list > li > a:hover {
    color: var(--primary-color);
    transform: translateX(3px);

    /* No underline by default — it appears only while hovering. */
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Deeper items (The Board, Share Registrars, Policies & Code of
   Conduct...) expand in place with a click, inside the same column —
   not a sideways flyout. */

.nav-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    gap: 10px;

    padding: 8px 2px;

    background: none;
    border: 0;

    color: var(--secondary-color);

    font-family: inherit;
    font-size: var(--fs-sm, 14px);
    font-weight: 600;
    text-align: left;

    cursor: pointer;

    transition: color 0.2s ease;
}

.nav-accordion-toggle:hover,
.nav-accordion.is-open > .nav-accordion-toggle {
    color: var(--primary-color);
}

.nav-accordion-toggle i {
    flex-shrink: 0;

    font-size: 10px;
    color: var(--text-muted);

    transition: transform 0.3s ease, color 0.2s ease;
}

.nav-accordion.is-open > .nav-accordion-toggle i {
    color: var(--primary-color);
    transform: rotate(180deg);
}

.nav-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;

    transition: grid-template-rows 0.3s ease;
}

.nav-accordion.is-open > .nav-accordion-panel {
    grid-template-rows: 1fr;
}

.nav-accordion-list {
    overflow: hidden;
    min-height: 0;

    list-style: none;

    /* Collapsed = genuinely empty. min-height: 0 can't remove padding or
       a border, so these only apply once the accordion is open — otherwise
       a stray sliver of the left border shows under every closed item. */
    margin: 0;
    padding: 0;

    border-left: 0 solid var(--border-color);
}

.nav-accordion.is-open > .nav-accordion-panel > .nav-accordion-list {
    margin: 2px 0 4px 2px;
    padding: 2px 0 4px 14px;

    border-left-width: 2px;
}

.nav-accordion-list > li > a {
    display: block;

    padding: 7px 2px;

    color: var(--text-muted);

    font-size: var(--fs-xs, 13px);
    text-decoration: none;

    transition: color 0.2s ease, transform 0.2s ease;
}

.nav-accordion-list > li > a:hover {
    color: var(--primary-color);
    transform: translateX(3px);

    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* The dark featured callout card — Investor Centre, etc. */

.nav-grid-featured {
    flex: 0 0 300px;

    display: flex;
    flex-direction: column;
    gap: 9px;

    padding: 24px;

    background: linear-gradient(160deg, var(--secondary-color), #2b2b2b);
    border-radius: var(--radius-md);

    color: var(--white);
    text-decoration: none;
}

.nav-grid-featured-eyebrow {
    font-size: var(--fs-2xs, 11px);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ff8a96;
}

.nav-grid-featured-title {
    font-size: var(--fs-lg, 18px);
    font-weight: 700;
    line-height: 1.3;
}

.nav-grid-featured-text {
    flex: 1;

    font-size: var(--fs-sm, 14px);
    line-height: 1.6;
    color: #c9c9c9;
}

.nav-grid-featured-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 4px;
    padding: 12px 20px;

    background: var(--primary-color);
    border-radius: var(--radius-pill);

    color: var(--white);
    font-size: var(--fs-xs, 13px);
    font-weight: 800;

    transition: background 0.2s ease;
}

.nav-grid-featured:hover .nav-grid-featured-btn {
    background: var(--primary-dark);
}

@media (max-width: 1200px) {
    .nav-grid-groups {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-grid-inner {
        flex-direction: column;
    }

    .nav-grid-featured {
        flex-basis: auto;
    }
}

@media (max-width: 991px) {
    .nav-dropdown-menu {
        display: none !important;
    }
}




/* ---------------------------------------------------------
   06.35 MEGA MENU — full-panel "Who We Are" / "Our Business" dropdown
   ---------------------------------------------------------
   Applies only to top-level nav items tagged "menu-item-mega" in the
   menu editor's CSS Classes field (see inc/nav-walker.php). Everything
   else keeps the plain hover .nav-dropdown-menu.
   --------------------------------------------------------- */

.nav-dropdown--mega {
    position: static;
}

.kpc-mega-menu {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;
    top: calc(130px + var(--wp-admin-bar-height, 0px));

    z-index: 1300;

    display: flex;

    /* Transparent — the right-hand panel no longer draws its own
       photo; it shows whatever page is actually behind it (see
       .kpc-mega-panel below). The sidebar stays legible because it
       sets its own solid background separately. */
    background: transparent;

    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

.nav-dropdown--mega.is-open .kpc-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kpc-mega-sidebar {
    display: flex;
    flex-direction: column;

    flex: 0 0 380px;

    padding: 40px 36px;

    background: var(--secondary-color);
}

.kpc-mega-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 30px;
}

.kpc-mega-eyebrow {
    color: var(--primary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kpc-mega-close {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--white);

    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;

    font-size: var(--fs-sm, 14px);
    cursor: pointer;

    transition: background 0.25s ease, border-color 0.25s ease;
}

.kpc-mega-close:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.kpc-mega-links {
    display: flex;
    flex-direction: column;
}

.kpc-mega-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 4px;

    color: var(--white);

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    font-size: var(--fs-lg, 18px);
    font-weight: 600;

    text-decoration: none;

    transition: color 0.25s ease, padding-left 0.25s ease;
}

.kpc-mega-link:first-child {
    padding-top: 4px;
}

.kpc-mega-link i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);

    transition: transform 0.25s ease, color 0.25s ease;
}

.kpc-mega-link:hover {
    color: var(--primary-light);
    padding-left: 10px;
}

.kpc-mega-link:hover i {
    color: var(--primary-color);
    transform: translateX(3px);
}

.kpc-mega-panel {
    position: relative;

    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 50px 60px;

    color: var(--white);
    text-decoration: none;

    overflow: hidden;

    isolation: isolate;
}

.kpc-mega-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    /* No image drawn here anymore — this stays transparent so the
       actual page underneath the fixed overlay shows through instead
       of a separate duplicate photo. */
    background: transparent;
}

.kpc-mega-panel::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    /* Lighter than before, since this is now sitting over whatever
       page happens to be behind it rather than a purpose-matched
       photo — just enough to keep the text readable. */
    background: linear-gradient(0deg, rgba(4, 7, 7, 0.75) 0%, rgba(4, 7, 7, 0.35) 45%, rgba(4, 7, 7, 0.12) 100%);
}

.kpc-mega-panel > * {
    position: relative;
    z-index: 2;
}

.kpc-mega-panel-eyebrow {
    display: block;

    margin-bottom: 14px;

    color: var(--primary-light);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kpc-mega-panel h3 {
    max-width: 560px;
    margin: 0 0 14px;

    color: var(--white);

    font-size: var(--kpc-heading-size);
    font-weight: 700;
    letter-spacing: -0.5px;
}

.kpc-mega-panel p {
    max-width: 480px;
    margin: 0 0 24px;

    color: rgba(255, 255, 255, 0.78);

    font-size: var(--fs-base, 16px);
    line-height: 1.7;
}

.kpc-mega-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--white);

    font-size: var(--fs-sm, 14px);
    font-weight: 700;

    transition: gap 0.25s ease;
}

.kpc-mega-panel:hover .kpc-mega-panel-cta {
    gap: 14px;
}

@media (max-width: 991px) {
    .kpc-mega-menu {
        display: none !important;
    }
}

body.kpc-mega-open {
    overflow: hidden;
}


.kpc-nav-actions {
    /* Only holds the hamburger, which only exists on mobile — on
       desktop the search button lives in the utility row instead. */
    display: none;
    align-items: center;

    flex-shrink: 0;
}

.nav-search {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0;

    border: 0;

    color: var(--secondary-color);

    background: transparent;

    font-size: var(--fs-lg, 18px);

    cursor: pointer;

    transition: var(--transition);
}

.nav-search:hover {
    color: var(--primary-color);

    transform: scale(1.05);
}

/* ---------------------------------------------------------
   Live search panel — expands directly below the header instead of
   a centred modal overlay, matching the reference design.
   --------------------------------------------------------- */

.kpc-search-panel {
    overflow: hidden;

    max-height: 0;

    background: var(--white);

    border-bottom: 1px solid transparent;

    transition: max-height 0.35s ease;
}

.kpc-search-panel.is-open {
    max-height: 480px;

    border-bottom-color: var(--border-color);

    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.08);
}

.kpc-search-box {
    position: relative;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 16px 0 10px;
}

.kpc-search-box > i {
    flex-shrink: 0;

    color: var(--text-muted);

    font-size: 16px;
}

.kpc-search-box input {
    flex: 1;
    min-width: 0;

    height: 48px;

    padding: 0 44px 0 4px;

    border: 0;
    border-bottom: 2px solid var(--border-color);

    color: var(--secondary-color);

    font-size: var(--fs-base, 16px);
    font-family: inherit;

    outline: none;

    background: transparent;

    transition: border-color 0.2s ease;
}

.kpc-search-box input:focus {
    border-color: var(--primary-color);
}

.kpc-search-clear {
    position: absolute;

    right: 0;
    top: 12px;

    width: 30px;
    height: 30px;

    display: none;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: var(--background-light);

    color: var(--text-muted);

    font-size: var(--fs-lg, 18px);
    line-height: 1;

    cursor: pointer;
}

.kpc-search-box input:not(:placeholder-shown) ~ .kpc-search-clear {
    display: flex;
}

.kpc-search-results {
    max-height: 340px;

    overflow-y: auto;

    padding: 4px 0 18px;

    display: grid;

    gap: 6px;
}

.kpc-sr-item {
    display: grid;
    gap: 2px;

    padding: 10px 14px;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    background: var(--white);

    text-decoration: none;

    transition: background 0.15s ease, border-color 0.15s ease;
}

.kpc-sr-item:hover,
.kpc-sr-item.is-active {
    background: rgba(238, 51, 66, 0.05);
    border-color: var(--primary-color);
}

.kpc-sr-label {
    color: var(--secondary-color);

    font-size: var(--fs-sm, 14px);
    font-weight: 700;
}

.kpc-sr-label mark {
    background: #ffe08a;
    color: inherit;

    border-radius: 3px;
    padding: 0 1px;
}

.kpc-sr-path {
    color: var(--text-muted);

    font-size: var(--fs-xs, 13px);
}

.kpc-sr-empty {
    padding: 16px;

    color: var(--text-muted);
    text-align: center;

    font-size: var(--fs-sm, 14px);
}

.kpc-search-overlay {
    position: fixed;
    inset: 0;

    z-index: 1250;

    background: rgba(4, 7, 7, 0.45);

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.kpc-search-open .kpc-search-overlay {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 767px) {
    .kpc-search-panel.is-open {
        max-height: 420px;
    }

    .kpc-search-box input {
        font-size: var(--fs-base, 16px);
    }
}



.mobile-menu-btn {
    display: none;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0;

    border: 0;

    color: var(--secondary-color);

    background: transparent;

    font-size: var(--fs-xl, 22px);

    cursor: pointer;

    transition: var(--transition);
}

.mobile-menu-btn:hover {
    color: var(--primary-color);
}


.offcanvas {
    max-width: 360px;
}

.offcanvas-header {
    padding: 20px 25px;

    border-bottom:
        1px solid
        var(--border-color);
}

.offcanvas-header .kpc-logo {
    margin-right: 0;
}

.offcanvas-header .kpc-logo img {
    height: 55px;
}

.offcanvas-body {
    padding: 0;
}

.mobile-menu {
    display: flex;

    flex-direction: column;
}

.mobile-menu > a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 55px;

    padding: 0 25px;

    color: var(--secondary-color);

    border-bottom:
        1px solid
        var(--border-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;

    text-decoration: none;

    transition: var(--transition);
}

.mobile-menu > a:hover {
    color: var(--primary-color);

    background:
        var(--background-soft);
}

.mobile-menu > a.active {
    color: var(--primary-color);

    background:
        rgba(238, 51, 66, 0.04);
}

.mobile-menu > a.active::before,
.mobile-menu > a:hover::before {
    content: "";

    position: absolute;

    left: 0;

    top: 0;
    bottom: 0;

    width: 4px;

    background:
        var(--primary-color);
}

.mobile-nav-accordion {
    width: 100%;

    border-bottom:
        1px solid
        var(--border-color);
}

.mobile-nav-dropdown-toggle {
    width: 100%;

    min-height: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 25px;

    border: 0;

    background: transparent;

    color: var(--secondary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;

    text-align: left;

    cursor: pointer;

    transition: var(--transition);
}

.mobile-nav-dropdown-toggle:hover {
    color: var(--primary-color);

    background:
        var(--background-soft);
}

.mobile-nav-dropdown-toggle i {
    font-size: 10px;

    transition:
        transform 0.25s ease;
}

.mobile-nav-dropdown-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.mobile-nav-dropdown-toggle[aria-expanded="true"] {
    color: var(--primary-color);

    background:
        rgba(238, 51, 66, 0.04);
}

.mobile-nav-submenu-wrap {
    max-height: 0;

    overflow: hidden;

    transition: max-height 0.35s ease;
}

.mobile-nav-accordion.is-open .mobile-nav-submenu-wrap {
    max-height: 600px;
}

.mobile-nav-accordion.is-open .mobile-nav-dropdown-toggle i {
    transform: rotate(180deg);
}

.mobile-nav-accordion.is-open .mobile-nav-dropdown-toggle {
    color: var(--primary-color);

    background:
        rgba(238, 51, 66, 0.04);
}

/* Clean row list — matches the sidebar-tab dropdown used on the
 * Section Hub pages (About / Our Business), instead of the small
 * indented bullet-point style this used before. Padding + border here
 * compound naturally at deeper levels, since a submenu nests inside
 * the one above it — so a 3rd/4th-level item reads as visibly more
 * indented than a 1st-level one, without needing separate per-depth
 * CSS rules. */
.mobile-nav-submenu {
    padding: 0;
    padding-left: 14px;

    background: var(--background-soft);

    border-left: 2px solid var(--border-color);
}

.mobile-nav-submenu a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 56px;

    padding: 14px 25px;

    color: var(--secondary-color);

    border-bottom: 1px solid var(--border-color);

    font-size: var(--fs-base, 16px);
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none;

    transition: var(--transition);
}

.mobile-nav-submenu a:last-child {
    border-bottom: 0;
}

.mobile-nav-submenu a i {
    flex-shrink: 0;

    margin-left: 12px;

    color: var(--text-muted);

    font-size: 12px;

    transition: var(--transition);
}

.mobile-nav-submenu a:hover {
    color: var(--primary-color);

    background: rgba(238, 51, 66, 0.04);
}

.mobile-nav-submenu a:hover i {
    color: var(--primary-color);

    transform: translateX(3px);
}


@media (max-width: 1200px) {

    .main-nav-inner {
        column-gap: 32px;
    }

    .main-menu {
        gap: 24px;
    }

    .main-menu > a,
    .main-menu > .nav-dropdown > a {
        font-size: var(--fs-sm, 14px);
    }

    .kpc-utility-links {
        gap: 22px;
    }

}

@media (max-width: 991px) {

    .main-nav-inner {
        display: flex;

        min-height: 75px;

        justify-content: space-between;
    }

    .kpc-nav-utility,
    .main-menu {
        display: none;
    }

    .kpc-nav-actions {
        display: flex;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .kpc-logo img {
        height: 54.6px;
    }

}

@media (max-width: 575px) {

    .main-nav-inner {
        min-height: 70px;
    }

    .kpc-logo img {
        height: 50.4px;
    }

    .mobile-menu-btn {
        width: 40px;
        height: 40px;
        font-size: var(--fs-xl, 22px);
    }

    .offcanvas {
        width: 88% !important;
        max-width: 360px;
    }

    .mobile-menu a {
        min-height: 52px;
        padding:
            0 20px;
        font-size: var(--fs-xs, 13px);
    }

}


/* =========================================================
   07. TRANSPARENT HEADER (HERO PAGES)
   ========================================================= */

body.transparent-header .main-nav {
    position: absolute;
    top: var(--wp-admin-bar-height, 0px);
    left: 0;
    right: 0;

    z-index: 1002;

    background: transparent;

    transition:
        background 0.35s ease,
        box-shadow 0.35s ease;
}

/* !important only while un-scrolled: it is what keeps any stray border
   or shadow from showing as a line across the hero. It must NOT apply
   once scrolled, or it would also cancel that state's own shadow. */
body.transparent-header:not(.nav-scrolled) .main-nav {
    border-bottom: none !important;
    box-shadow: none !important;
}

body.transparent-header .main-nav,
body.transparent-header .main-nav-inner,
body.transparent-header .main-menu,
body.transparent-header .nav-dropdown {
    overflow: visible;
}

body.transparent-header:not(.nav-scrolled) .main-menu > a,
body.transparent-header:not(.nav-scrolled) .main-menu > .nav-dropdown > a {
    color: var(--white);

    text-shadow: 0 1px 10px rgba(4, 7, 7, 0.45);
}

/* Utility row over the hero: white text, and a hairline under it that
   runs from the logo to the right edge. */
body.transparent-header:not(.nav-scrolled) .kpc-nav-utility {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

body.transparent-header:not(.nav-scrolled) .kpc-utility-links a {
    color: var(--white);

    text-shadow: 0 1px 10px rgba(4, 7, 7, 0.45);
}

body.transparent-header:not(.nav-scrolled) .kpc-utility-links a:hover {
    color: var(--white);

    opacity: 0.75;
}

body.transparent-header:not(.nav-scrolled) .kpc-utility-links a.active {
    color: var(--white);

    font-weight: 700;
}

body.transparent-header:not(.nav-scrolled) .main-menu > a:hover,
body.transparent-header:not(.nav-scrolled) .main-menu > .nav-dropdown > a:hover,
body.transparent-header:not(.nav-scrolled) .main-menu > .nav-dropdown:hover > a,
body.transparent-header:not(.nav-scrolled) .main-menu > a.active,
body.transparent-header:not(.nav-scrolled) .main-menu > .nav-dropdown > a.active {
    color: var(--primary-color);
}

body.transparent-header:not(.nav-scrolled) .nav-search,
body.transparent-header:not(.nav-scrolled) .mobile-menu-btn {
    color: var(--white);
}

body.transparent-header:not(.nav-scrolled) .nav-search:hover,
body.transparent-header:not(.nav-scrolled) .mobile-menu-btn:hover {
    color: var(--primary-color);
}

body.transparent-header.nav-scrolled .main-nav {
    position: fixed;
    top: var(--wp-admin-bar-height, 0px);

    background: var(--white);

    border-bottom:
        1px solid
        var(--border-color);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Scrolled (desktop): the header slims down to ONE row — the utility
   links drop away (the logo does NOT shrink), the main menu takes the row, and the search button
   (which lives inside the collapsing utility row) is lifted out beside
   it via display: contents so it is never lost. */
@media (min-width: 992px) {

    body.transparent-header.nav-scrolled .main-nav-inner {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "logo menu search";

        column-gap: 40px;

        /* The logo keeps its full size when scrolled, so give the slim bar
           a little air above and below it instead of letting it touch the
           edges. */
        padding: 6px 0;
    }

    body.transparent-header.nav-scrolled .kpc-nav-utility {
        display: contents;
    }

    body.transparent-header.nav-scrolled .kpc-utility-links {
        display: none;
    }

    body.transparent-header.nav-scrolled .nav-search {
        grid-area: search;
    }

    body.transparent-header.nav-scrolled .main-menu {
        --kpc-menu-h: 80px;
    }

}

.nav-dropdown-menu {
    z-index: 1200;

    background: var(--white);
}

.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.nav-dropdown:focus-within > a i {
    transform: rotate(180deg);
}

.nav-dropdown-menu::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: -12px;

    height: 12px;
}



/* =========================================================
   08. GLOBAL OVERLAY — PWD ACCESSIBILITY BUTTON
   ========================================================= */

.pwd-accessibility {
    position: fixed;

    bottom: 24px;
    right: 18px;

    z-index: 1100;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    border: none;

    padding: 0;

    text-decoration: none;

    box-shadow: none;

    transition: transform 0.25s ease;

    overflow: visible;
}

.pwd-accessibility img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    transition: transform 0.25s ease;
}

.pwd-accessibility:hover {
    background: transparent;

    width: 46px;

    box-shadow: none;
}

.pwd-accessibility:hover img {
    transform: scale(1.15);
}

@media (max-width: 767px) {

    .pwd-accessibility {
        right: 10px;

        width: 36px;
        height: 36px;
    }

    .pwd-accessibility:hover {
        width: 36px;
    }

    .pwd-accessibility:hover img {
        transform: scale(1.1);
    }

}

/* ---------------------------------------------------------
   Accessibility popup panel — opens above the PWD button
   instead of navigating anywhere. Controls apply their effect
   via a few classes on <html>, handled in main.js.
   --------------------------------------------------------- */

.kpc-a11y-panel {
    position: fixed;

    right: 18px;
    bottom: 76px;

    z-index: 1101;

    width: 260px;

    padding: 16px;

    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.kpc-a11y-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kpc-a11y-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    color: var(--text-primary);
}

.kpc-a11y-close {
    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: var(--background-light);
    color: var(--text-secondary);

    cursor: pointer;
}

.kpc-a11y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 10px;

    font-size: var(--fs-xs, 13px);
    color: var(--text-secondary);
}

.kpc-a11y-btns {
    display: flex;
    gap: 6px;
}

.kpc-a11y-btns button {
    min-width: 30px;
    height: 30px;

    padding: 0 8px;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    background: var(--white);
    color: var(--text-primary);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;

    cursor: pointer;

    transition: var(--transition);
}

.kpc-a11y-btns button:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white);
}

.kpc-a11y-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    padding: 9px 4px;

    border: 0;
    border-top: 1px solid var(--border-color);

    background: transparent;
    color: var(--text-primary);

    font-size: var(--fs-xs, 13px);
    font-weight: 600;
    text-align: left;

    cursor: pointer;
}

.kpc-a11y-toggle-row i {
    width: 16px;

    color: var(--text-muted);
    font-size: 12px;
}

.kpc-a11y-toggle-row.is-active {
    color: var(--primary-color);
}

.kpc-a11y-toggle-row.is-active i {
    color: var(--primary-color);
}

/* Effects the panel's controls apply, via classes on <html> */

html.kpc-a11y-contrast {
    filter: contrast(1.35) saturate(1.1);
}

html.kpc-a11y-underline a {
    text-decoration: underline !important;
}

html.kpc-a11y-dyslexia body,
html.kpc-a11y-dyslexia input,
html.kpc-a11y-dyslexia textarea,
html.kpc-a11y-dyslexia button {
    font-family: Verdana, Tahoma, Arial, sans-serif !important;
    letter-spacing: 0.02em !important;
    line-height: 1.7 !important;
}

@media (max-width: 767px) {
    .kpc-a11y-panel {
        right: 10px;
        bottom: 64px;

        width: calc(100vw - 20px);
        max-width: 300px;
    }
}


/* =========================================================
   09. HERO
   ---------------------------------------------------------
   The WordPress admin toolbar (visible only to logged-in
   users previewing the site) is a fixed 32px bar that isn't
   accounted for by the viewport units (vh/dvh) the full-
   screen hero uses below. Without this, the hero renders
   exactly 32px taller than what's actually visible without
   scrolling — which is what pushes the progress bar at the
   bottom of the hero just out of view for an admin/editor.
   Public visitors never see the admin bar, so this has no
   effect for them; --wp-admin-bar-height simply stays 0.
   ========================================================= */

:root {
    --wp-admin-bar-height: 0px;
}

body.admin-bar {
    --wp-admin-bar-height: 32px;
}

/* WordPress core itself switches the admin bar to a taller,
   differently-positioned layout below 782px — this mirrors
   that same breakpoint so the offset always matches reality. */
@media screen and (max-width: 782px) {
    body.admin-bar {
        --wp-admin-bar-height: 46px;
    }
}

.kpc-hero {
    position: relative;

    height: calc(100vh - var(--wp-admin-bar-height, 0px));
    height: calc(100dvh - var(--wp-admin-bar-height, 0px));

    min-height: 560px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--secondary-color);
}

.kpc-hero-slides {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.kpc-hero-overlay {
    display: none;
}

.kpc-hero-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-position:
        center center;

    background-size: cover;

    background-repeat: no-repeat;

    opacity: 0;

    transform:
        scale(1.06);

    transition:
        opacity 1.5s ease-in-out,
        transform 7s ease-out;

    will-change:
        opacity,
        transform;

    isolation: isolate;
}

.kpc-hero-slide.active {
    opacity: 1;

    transform:
        scale(1);
}

.kpc-hero-slide > img,
.kpc-hero-slide > picture,
.kpc-hero-slide > picture img,
.kpc-hero-slide > video {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.kpc-hero-slide::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            160deg,
            rgba(4, 7, 7, 0.80) 0%,
            rgba(4, 7, 7, 0.30) 42%,
            rgba(4, 7, 7, 0.00) 72%
        ),
        linear-gradient(
            100deg,
            rgba(4, 7, 7, 0.92) 0%,
            rgba(4, 7, 7, 0.70) 30%,
            rgba(4, 7, 7, 0.28) 62%,
            rgba(4, 7, 7, 0.00) 88%
        );
}

.kpc-hero-slide::after {
    content: "";

    position: absolute;

    inset: auto 0 0 0;

    z-index: 1;

    height: 45%;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(4, 7, 7, 0.62) 0%,
            rgba(4, 7, 7, 0.22) 45%,
            rgba(4, 7, 7, 0.00) 100%
        );
}

.kpc-hero-slide > .container {
    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    align-items: center;

    padding-top: 205px;

    /* Extra room reserved below the content, accounting for the
       98px margin-top on .kpc-hero-content pushing it further down
       within the centered space — without this, a slide's button
       could sit close enough to the progress bar (absolutely
       positioned at bottom: 44px) to overlap it. */
    padding-bottom: 210px;
}

.kpc-hero-slide .kpc-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: none;

    display: flex;

    flex-direction: column;
}

/* Desktop/laptop only — leaves the mobile hero's anchored spacing
   (fixed a couple of messages back to prevent overflow/shake) untouched. */
@media (min-width: 992px) {
    .kpc-hero-slide .kpc-hero-content {
        margin-top: 98px;
    }
}

.kpc-hero-text {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 850px;
}

.kpc-hero .section-eyebrow {
    margin-bottom: 26px;

    color:
        var(--primary-color);
}

.kpc-hero-title {
    margin-bottom: 22px;

    color:
        var(--white);

    font-size:
        var(--kpc-heading-size);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing:
        -0.02em;

    /* em-based so it scales with the clamp() font-size above — always
       reserves exactly 2 lines' worth of height, whether this slide's
       title actually wraps to 1 line or 2. Without this, a short
       1-line title leaves the whole block shorter than a 2-line one,
       and everything below (description, button) shifts position
       when the slide changes — the "shake" this is fixing. */
    min-height: 2.2em;
}

/* The -37px pull-up and eyebrow tightening below were only ever meant
   for desktop, where there's slack to spare — on mobile the spacing
   is already compact (fixed a few rounds back to stop overflow), so
   applying the same negative margin there caused the title to
   overlap the description above it. Scoped to min-width so mobile
   keeps its own tuned spacing untouched. */
@media (min-width: 992px) {
    .kpc-hero-title {
        margin-bottom: -37px !important;
    }

    .kpc-hero .section-eyebrow {
        margin-bottom: 6px;
        color: var(--primary-color);
    }
}

.kpc-hero-title span {
    color:
        var(--white);
}

.kpc-hero-description {
    max-width: 580px;

    margin-bottom: 42px;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size: var(--fs-lg, 18px);

    line-height: 1.7;

    /* Caps every slide's description at 2 lines — this specific
       overlap (button colliding with the progress bar below it) was
       caused by one slide having a 3-line description while the
       others had shorter ones, so content height varied slide to
       slide. Clamping keeps it consistent and guarantees clearance
       regardless of which slide is showing. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    /* Reserves the full 2-line height even when a slide's actual text
       only fills 1 line — otherwise shorter slides leave a shorter
       block, and the button/progress-bar spacing shifts between
       slides (the same fix already applied to .kpc-hero-title above). */
    min-height: 3.4em;
}

.kpc-hero-slide .kpc-hero-text,
.kpc-hero-slide .kpc-hero-actions {
    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.kpc-hero-slide.active .kpc-hero-text {
    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0s;
}

.kpc-hero-slide.active .kpc-hero-actions {
    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0.1s;
}

.kpc-hero-actions {
    position: relative;

    z-index: 2;

    width: 100%;

    display: flex;

    align-items: center;

    /* Extra clearance from the progress bar below — the fixed
       heights on the title/description above now guarantee this gap
       stays the same on every slide, not just this one. */
    margin-bottom: 28px;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 8px;
}

/* Same reasoning as the title's -37px pull-up above: only meant for
   desktop's more generous spacing, not mobile's already-compact
   layout. */
@media (min-width: 992px) {
    .kpc-hero-actions {
        margin-top: -29px;
    }
}

.kpc-hero-buttons {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


.kpc-hero .kpc-hero-progress {
    position: absolute;

    left: 0;
    right: 0;

    bottom: 44px;

    z-index: 6;

    pointer-events: none;
}

.kpc-hero .kpc-hero-progress > .container {
    display: flex;

    height: auto;
}

.kpc-hero .kpc-hero-progress-track {
    width: 100%;

    max-width: none;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 0;

    pointer-events: auto;
}

.kpc-hero .kpc-hero-bar {
    flex: 1 1 0;

    min-width: 0;

    display: block;

    padding: 10px 0 12px;

    margin: 0;

    background: none;

    border: 0;

    appearance: none;

    -webkit-appearance: none;

    text-align: left;

    cursor: pointer;
}

.kpc-hero .kpc-hero-bar-label {
    display: block;

    margin-bottom: 13px;

    color:
        rgba(
            255,
            255,
            255,
            0.85
        );

    font-size: var(--fs-2xs, 11px);
    font-weight: 700;

    letter-spacing: 0.12em;
    line-height: 1.3;

    text-transform: uppercase;

    text-shadow:
        0 1px 10px rgba(4, 7, 7, 0.75),
        0 1px 2px rgba(4, 7, 7, 0.9);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: color 0.3s ease;
}

.kpc-hero .kpc-hero-bar.active .kpc-hero-bar-label,
.kpc-hero .kpc-hero-bar:hover .kpc-hero-bar-label {
    color: var(--white);
}

.kpc-hero .kpc-hero-bar-line {
    display: block;

    width: 100%;
    height: 2px;

    border-radius: 2px;

    background:
        rgba(
            255,
            255,
            255,
            0.28
        );

    overflow: hidden;

    transition:
        height 0.3s ease,
        background 0.3s ease;
}

.kpc-hero .kpc-hero-bar.active .kpc-hero-bar-line {
    height: 3px;
}

.kpc-hero .kpc-hero-bar-fill {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        var(--primary-color);

    transform:
        scaleX(0);

    transform-origin:
        left center;
}

.kpc-hero .kpc-hero-bar.done .kpc-hero-bar-fill {
    transform:
        scaleX(1);

    background:
        rgba(
            255,
            255,
            255,
            0.50
        );
}

.kpc-hero .kpc-hero-bar.active .kpc-hero-bar-fill {
    background:
        var(--primary-color);

    animation:
        kpcHeroFill
        var(--kpc-slide-duration, 6000ms)
        linear
        forwards;
}

@keyframes kpcHeroFill {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }
}

.kpc-hero .kpc-hero-bar:hover .kpc-hero-bar-line {
    background:
        rgba(
            255,
            255,
            255,
            0.50
        );
}

.kpc-hero .kpc-hero-bar:focus-visible {
    outline:
        2px solid
        var(--primary-color);

    outline-offset: 4px;

    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .kpc-hero .kpc-hero-bar.active .kpc-hero-bar-fill {
        animation: none;

        transform:
            scaleX(1);
    }

}


@media (max-width: 991px) {

    .kpc-hero {
        height: calc(100vh - var(--wp-admin-bar-height, 0px));
        height: calc(100dvh - var(--wp-admin-bar-height, 0px));

        min-height: 560px;
    }

    .kpc-hero-slide > .container {
        padding-top: 177px;

        padding-bottom: 130px;
    }

    .kpc-hero-slide::before {
        background:
            linear-gradient(
                165deg,
                rgba(4, 7, 7, 0.82) 0%,
                rgba(4, 7, 7, 0.34) 45%,
                rgba(4, 7, 7, 0.00) 75%
            ),
            linear-gradient(
                105deg,
                rgba(4, 7, 7, 0.93) 0%,
                rgba(4, 7, 7, 0.74) 32%,
                rgba(4, 7, 7, 0.34) 65%,
                rgba(4, 7, 7, 0.06) 92%
            );
    }

    .kpc-hero-text {
        max-width: 750px;
    }

    .kpc-hero-title {
        font-size:
            var(--kpc-heading-size);
    }

    .kpc-hero .kpc-hero-progress {
        bottom: 38px;
    }

    .kpc-hero .kpc-hero-progress-track {
        gap: 14px;
    }

    /* Only 2 bars visible at a time on mobile — main.js toggles which
       pair, based on which slide is currently showing. */
    .kpc-hero .kpc-hero-bar.is-hidden-mobile {
        display: none;
    }

}

@media (max-width: 767px) {

    .kpc-hero {
        height: calc(50vh - var(--wp-admin-bar-height, 0px));
        height: calc(50dvh - var(--wp-admin-bar-height, 0px));

        min-height: 440px;
    }

    .kpc-hero-slide::before {
        background:
            linear-gradient(
                170deg,
                rgba(4, 7, 7, 0.84) 0%,
                rgba(4, 7, 7, 0.40) 48%,
                rgba(4, 7, 7, 0.06) 80%
            ),
            linear-gradient(
                108deg,
                rgba(4, 7, 7, 0.92) 0%,
                rgba(4, 7, 7, 0.76) 40%,
                rgba(4, 7, 7, 0.42) 72%,
                rgba(4, 7, 7, 0.14) 100%
            );
    }

    /* Padding here was still sized for the old full-height hero — with
       the box now half as tall, that left barely 180px for the whole
       text block + button, which is why it was overflowing/getting
       cut off. Trimmed to just clear the header, with everything below
       compacted to match. Switched from centering the content block
       (inherited from the desktop rule) to anchoring it to the top:
       centering was both wasting space above the text AND — since
       different slides have different amounts of text — shifting the
       whole block up/down by a different amount on every slide change,
       which read as a "shake". Anchoring removes that inconsistency. */
    .kpc-hero-slide > .container {
        align-items: flex-start;

        padding-top: 128px;

        padding-bottom: 14px;
    }

    .kpc-hero-content {
        width: 100%;
        max-width: 100%;
    }

    .kpc-hero-text {
        width: 100%;
        max-width: 100%;
    }

    .kpc-hero .section-eyebrow {
        margin-bottom: 8px;

        font-size: var(--fs-2xs, 11px);
    }

    .kpc-hero-title {
        margin-bottom: 6px;

        font-size: var(--fs-xl, 22px);
        line-height: 1.2;

        /* Reserves space for 2 lines always, whether this slide's
           title actually wraps to 1 or 2 — keeps every slide's block
           the same height so switching slides doesn't jump/shake. */
        min-height: calc(20px * 1.2 * 2);
    }

    .kpc-hero-description {
        margin-bottom: 12px;

        font-size: var(--fs-xs, 13px);

        line-height: 1.45;

        /* Same fixed-height reasoning as the title above. */
        min-height: calc(12px * 1.45 * 2);

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .kpc-hero-actions {
        width: 100%;

        align-items: center;

        gap: 12px;
    }

    .kpc-hero-actions .btn-kpc {
        min-height: 38px;

        padding: 0 16px;

        font-size: var(--fs-2xs, 11px);
    }

    .kpc-hero .kpc-hero-progress {
        bottom: 12px;
    }

    .kpc-hero .kpc-hero-progress-track {
        gap: 10px;
    }

    .kpc-hero .kpc-hero-bar {
        padding: 8px 0;
    }

    .kpc-hero .kpc-hero-bar-label {
        font-size: var(--fs-2xs, 11px);
        letter-spacing: 0.06em;
    }

}

@media (max-width: 575px) {

    .kpc-hero {
        height: calc(50vh - var(--wp-admin-bar-height, 0px));
        height: calc(50dvh - var(--wp-admin-bar-height, 0px));

        min-height: 400px;
    }

    .kpc-hero-slide > .container {
        padding-top: 122px;

        padding-bottom: 14px;
    }

    .kpc-hero-slide::before {
        background:
            linear-gradient(
                172deg,
                rgba(4, 7, 7, 0.86) 0%,
                rgba(4, 7, 7, 0.44) 50%,
                rgba(4, 7, 7, 0.10) 82%
            ),
            linear-gradient(
                110deg,
                rgba(4, 7, 7, 0.92) 0%,
                rgba(4, 7, 7, 0.78) 45%,
                rgba(4, 7, 7, 0.46) 78%,
                rgba(4, 7, 7, 0.20) 100%
            );
    }

    .kpc-hero-title {
        font-size: var(--fs-xl, 22px);
    }

    .kpc-hero-title {
        min-height: calc(18px * 1.2 * 2);
    }

    .kpc-hero-description {
        font-size: var(--fs-2xs, 11px);

        min-height: calc(11.5px * 1.45 * 2);
    }

    .kpc-hero-actions {
        gap: 12px;
    }

    .kpc-hero-actions .btn-kpc {
        min-height: 36px;

        padding:
            0 16px;

        font-size: var(--fs-2xs, 11px);
    }

    .kpc-hero .kpc-hero-progress {
        bottom: 10px;
    }

    .kpc-hero .kpc-hero-progress-track {
        gap: 8px;
    }

}


@media (max-height: 700px) and (max-width: 767px) {

    .kpc-hero-slide > .container {
        align-items: flex-start;

        padding-top: 128px;

        padding-bottom: 14px;
    }

    .kpc-hero .section-eyebrow {
        margin-bottom: 8px;
    }

    .kpc-hero-description {
        margin-bottom: 12px;

        font-size: var(--fs-xs, 13px);
    }

    .kpc-hero-title {
        margin-bottom: 6px;

        font-size:
            var(--kpc-heading-size);
    }

    .kpc-hero .kpc-hero-progress {
        bottom: 12px;
    }

}

@media (max-height: 560px) and (max-width: 767px) {

    .kpc-hero-slide > .container {
        padding-top: 128px;

        padding-bottom: 92px;
    }

    .kpc-hero-description {
        display: none;
    }

    .kpc-hero .kpc-hero-bar-label {
        font-size: var(--fs-2xs, 11px);
    }

}



/* =========================================================
   11. NSE SHARE PRICE — TICKER RAIL
   ========================================================= */

.kpc-ticker {
    /* Top padding is 2px lighter than the bottom so the 3px red border
       doesn't add to the bar's overall height. */
    padding: 8px 0 9px;

    background: var(--white);

    color: var(--secondary-color);

    border-top: 3px solid var(--primary-color);
    border-bottom: 1px solid var(--border-color);
}

.kpc-ticker-inner {
    display: flex;
    align-items: center;

    gap: 24px;

    min-height: 40px;
}

.kpc-ticker-price,
.kpc-ticker-change,
.kpc-ticker-stat strong {
    font-variant-numeric: tabular-nums;

    font-feature-settings: "tnum";
}

.kpc-ticker-quote,
.kpc-ticker-stats {
    padding-left: 26px;

    border-left:
        1px solid
        var(--border-color);
}

.kpc-ticker-identity {
    display: flex;
    align-items: baseline;

    gap: 9px;

    flex-shrink: 0;
}

.kpc-ticker-badge {
    padding: 3px 7px;

    background: var(--primary-color);
    color: var(--white);

    border-radius: 2px;

    font-size: var(--fs-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.kpc-ticker-identity strong {
    color: var(--secondary-color);

    font-size: var(--fs-base, 16px);
    font-weight: 700;
}

.kpc-ticker-name {
    color: var(--secondary-color);

    font-size: var(--fs-xs, 13px);

    white-space: nowrap;
}

.kpc-ticker-quote {
    display: flex;
    align-items: baseline;

    gap: 12px;

    flex-shrink: 0;
}

.kpc-ticker-price {
    color: var(--secondary-color);

    font-size: var(--fs-xl, 22px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;

    white-space: nowrap;
}

.kpc-ticker-currency {
    margin-right: 5px;

    color: var(--primary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 600;
    letter-spacing: 0.06em;
}

.kpc-ticker-change {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    font-size: var(--fs-xs, 13px);
    font-weight: 700;

    white-space: nowrap;
}

.kpc-ticker-change.is-up,
.kpc-ticker-change.is-down,
.kpc-ticker-change.is-flat {
    /* Brand black for the figure; the arrow icon (brand red, below) is what
       says which way the price moved — so no green/red "good/bad" colouring
       that would fight the brand palette or be misread. */
    color: var(--secondary-color);
}

.kpc-ticker-change i {
    color: var(--primary-color);
}

.kpc-ticker-change i {
    font-size: 11px;
}

.kpc-ticker-change span {
    font-weight: 600;

    opacity: 0.75;
}

.kpc-ticker-stats {
    display: flex;
    align-items: center;

    gap: 24px;

    flex: 1 1 auto;

    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.kpc-ticker-stats::-webkit-scrollbar {
    display: none;
}

.kpc-ticker-stat {
    display: flex;
    flex-direction: column;

    gap: 3px;

    flex: 0 0 auto;
}

.kpc-ticker-stat:last-child {
    padding-right: 4px;
}

.kpc-ticker-stat span {
    color: var(--primary-color);

    font-size: var(--fs-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;

    text-transform: uppercase;

    white-space: nowrap;
}

.kpc-ticker-stat strong {
    color: var(--secondary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    line-height: 1.2;

    white-space: nowrap;
}

.kpc-ticker-meta {
    display: flex;
    align-items: center;

    gap: 16px;

    flex-shrink: 0;

    margin-left: auto;
}

.kpc-ticker-market {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    font-size: var(--fs-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;

    white-space: nowrap;
}

.kpc-ticker-market.is-open,
.kpc-ticker-market.is-closed {
    color: var(--secondary-color);
}

/* The status is carried by the dot; the word stays in brand black. */
.kpc-ticker-market.is-open .kpc-ticker-dot {
    background: var(--success-strong);

    box-shadow: 0 0 0 3px rgba(18, 129, 58, 0.18);
}

.kpc-ticker-market.is-closed .kpc-ticker-dot {
    background: var(--text-muted);
}

.kpc-ticker-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}

.kpc-ticker-market.is-open .kpc-ticker-dot {
    animation:
        kpcTickerPulse
        2s
        ease-in-out
        infinite;
}

@keyframes kpcTickerPulse {

    0%,
    100% {
        opacity: 1;

        box-shadow:
            0 0 0 0
            rgba(18, 129, 58, 0.35);
    }

    50% {
        opacity: 0.65;

        box-shadow:
            0 0 0 4px
            rgba(18, 129, 58, 0.00);
    }
}

@media (prefers-reduced-motion: reduce) {

    .kpc-ticker-market.is-open .kpc-ticker-dot {
        animation: none;
    }

}

.kpc-ticker-time {
    color: var(--secondary-color);

    font-size: var(--fs-2xs, 11px);

    white-space: nowrap;
}

.kpc-ticker-time:empty {
    display: none;
}

.kpc-ticker-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 4px 4px 4px 16px;

    color: var(--white);
    background: var(--primary-color);

    border-radius: 999px;

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease;
}

/* The arrow sits in its own white circle at the end of the pill. */
.kpc-ticker-link i {
    display: inline-grid;
    place-items: center;

    width: 24px;
    height: 24px;

    flex-shrink: 0;

    color: var(--primary-color);
    background: var(--white);

    border-radius: 50%;

    font-size: 10px;
}

.kpc-ticker-link i::before {
    display: inline-block;

    transition: transform 0.25s ease;
}

.kpc-ticker-link:hover {
    background: var(--primary-dark);

    box-shadow: 0 6px 16px rgba(238, 51, 66, 0.30);
}

.kpc-ticker-link:hover i::before {
    transform: translateX(2px);
}

.kpc-ticker-unavailable {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 44px;

    color: var(--secondary-color);

    font-size: var(--fs-xs, 13px);
}

.kpc-ticker-unavailable i {
    color: var(--primary-color);

    font-size: 12px;
}

.kpc-ticker.is-dark {
    background: var(--secondary-color);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.kpc-ticker.is-dark .kpc-ticker-quote,
.kpc-ticker.is-dark .kpc-ticker-stats {
    border-left-color:
        rgba(255, 255, 255, 0.12);
}

.kpc-ticker.is-dark .kpc-ticker-identity strong,
.kpc-ticker.is-dark .kpc-ticker-price {
    color: var(--white);
}

.kpc-ticker.is-dark .kpc-ticker-stat strong {
    color: rgba(255, 255, 255, 0.90);
}

.kpc-ticker.is-dark .kpc-ticker-name,
.kpc-ticker.is-dark .kpc-ticker-currency,
.kpc-ticker.is-dark .kpc-ticker-stat span,
.kpc-ticker.is-dark .kpc-ticker-time,
.kpc-ticker.is-dark .kpc-ticker-change.is-flat,
.kpc-ticker.is-dark .kpc-ticker-market.is-closed {
    color: rgba(255, 255, 255, 0.45);
}

.kpc-ticker.is-dark .kpc-ticker-change.is-up,
.kpc-ticker.is-dark .kpc-ticker-market.is-open {
    color: var(--success);
}

.kpc-ticker.is-dark .kpc-ticker-change.is-down {
    color: var(--primary-light);
}

.kpc-ticker.is-dark .kpc-ticker-link {
    color: var(--white);
    background: var(--primary-color);
}

.kpc-ticker.is-dark .kpc-ticker-link i {
    color: var(--primary-color);
    background: var(--white);
}

.kpc-ticker.is-dark .kpc-ticker-link:hover {
    color: var(--white);
    background: var(--primary-dark);
}

.kpc-ticker.is-dark .kpc-ticker-link:hover i {
    background: var(--white);
}

/* Desktop: the bar used to stretch across the full container — the stats
   block was set to grow into all spare room and the market/More group was
   pinned to the far right, leaving big empty gaps between items. Now it is
   one compact, centred group sized to its content. It needs ~1000px for all
   seven stats, so it only applies from 1200px up; below that the items wrap
   onto two rows (rules further down) instead of dropping any data. */
@media (min-width: 1200px) {

    .kpc-ticker-inner {
        justify-content: center;

        gap: 22px;
    }

    .kpc-ticker-stats {
        flex: 0 1 auto;

        gap: 20px;
    }

    .kpc-ticker-meta {
        margin-left: 0;
    }

}

@media (max-width: 1199px) {

    .kpc-ticker-inner {
        gap: 20px;
    }

    .kpc-ticker-quote,
    .kpc-ticker-stats {
        padding-left: 20px;
    }

    .kpc-ticker-stats {
        gap: 18px;
    }

}

/* Two rows below 1200px: identity / quote / market on top, ALL the stats on
   their own row underneath — nothing is hidden to make room. */
@media (max-width: 1199px) {

    .kpc-ticker-inner {
        flex-wrap: wrap;

        gap: 14px 20px;
    }

    .kpc-ticker-meta {
        order: 2;
    }

    .kpc-ticker-stats {
        order: 3;

        flex: 1 1 100%;

        padding-top: 14px;
        padding-left: 0;

        border-left: 0;

        border-top:
            1px solid
            var(--border-color);
    }

    .kpc-ticker.is-dark .kpc-ticker-stats {
        border-top-color:
            rgba(255, 255, 255, 0.10);
    }

}

@media (max-width: 767px) {

    .kpc-ticker {
        padding: 9px 0 10px;
    }

    .kpc-ticker-name {
        display: none;
    }

    .kpc-ticker-identity {
        flex: 1 1 100%;
    }

    .kpc-ticker-quote {
        padding-left: 0;

        border-left: 0;
    }

    .kpc-ticker-price {
        font-size: var(--fs-xl, 22px);
    }

    .kpc-ticker-link {
        font-size: var(--fs-2xs, 11px);
    }

}

@media (max-width: 575px) {

    .kpc-ticker-inner {
        gap: 12px 16px;
    }

    /* Seven stats can't sit in one 320-390px row, and a scrolling strip
       hides the last ones off-screen. Wrap them into a 4-column grid so
       every one is visible without swiping. */
    .kpc-ticker-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 12px 8px;

        padding-top: 12px;

        overflow: visible;
    }

    .kpc-ticker-time {
        display: none;
    }

    /* The "More" label used to be hidden here (arrow only) — fine for a bare
       text link, but the button would be left as an empty red capsule. The
       row wraps on very narrow phones, so the label can stay. */

}


/* =========================================================
   10. DISCOVER KPC
   ========================================================= */

.kpc-discover {
    position: relative;

    width: 100%;

    padding: var(--space-section) 0;

    background: var(--background-light);

    --radius-discover: 12px;
    --discover-gap: 22px;
    --discover-ratio: 2 / 3;

    --discover-head-indent: 0px;
}


.kpc-discover-head {
    max-width: 780px;

    margin-bottom: 90px;

    padding-left: var(--discover-head-indent);
}

.kpc-current-page-link {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

.kpc-discover-eyebrow {
    display: block;

    margin-bottom: 30px;

    color: var(--primary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.kpc-discover-head h2,
.kpc-discover-text {
    max-width: 620px;

    margin: 0;

    color: var(--text-primary);

    font-size: var(--fs-2xl, 28px);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: -0.2px;
}


.kpc-discover-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: var(--discover-gap);
}


.kpc-discover-card {
    position: relative;

    aspect-ratio: var(--discover-ratio);

    display: flex;
    flex-direction: column;

    justify-content: flex-start;

    padding: 30px 28px;

    background: var(--secondary-color);

    color: var(--white);

    border-radius: var(--radius-discover);

    text-decoration: none;

    overflow: hidden;

    isolation: isolate;
}

.kpc-discover-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image: var(--tile-image);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    /* Starts subtly zoomed in; hover "settles" it back to scale(1) so
       the full, undistorted photo reveals itself — a deliberate zoom
       OUT on interaction, rather than zooming further in. */
    transform: scale(1.08);

    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.kpc-discover-card:hover::before {
    transform: scale(1);
}

.kpc-discover-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(4, 7, 7, 0.78) 0%,
            rgba(4, 7, 7, 0.55) 22%,
            rgba(4, 7, 7, 0.22) 48%,
            rgba(4, 7, 7, 0.10) 68%,
            rgba(4, 7, 7, 0.42) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(4, 7, 7, 0.16) 0%,
            rgba(4, 7, 7, 0.16) 100%
        );
}

.kpc-discover-card > * {
    position: relative;

    z-index: 2;
}

.kpc-discover-card:focus-visible {
    outline: 2px solid var(--primary-color);

    outline-offset: 3px;
}


.kpc-discover-label {
    display: block;

    margin-bottom: 16px;

    color: var(--white);

    font-size: var(--fs-2xs, 11px);
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    text-shadow:
        0 1px 14px
        rgba(4, 7, 7, 0.5);
}


.kpc-discover-card h3 {
    max-width: 15ch;

    margin: 0;

    color: var(--white);

    font-size: var(--fs-xl, 22px);
    font-weight: 500;
    line-height: 1.35;

    letter-spacing: -0.2px;

    text-shadow:
        0 1px 18px
        rgba(4, 7, 7, 0.55);
}


.kpc-discover-arrow {
    position: absolute;

    right: 26px;
    bottom: 26px;

    z-index: 2;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--white);

    background: var(--secondary-color);

    border: 1px solid var(--secondary-color);
    border-radius: 50%;

    font-size: 13px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.kpc-discover-card:hover .kpc-discover-arrow {
    color: var(--white);

    background: var(--primary-color);

    border-color: var(--primary-color);

    transform: translateX(3px);
}


@media (max-width: 1199px) {

    .kpc-discover {
        --discover-gap: 18px;
        --discover-head-indent: 0px;
    }

    .kpc-discover-card {
        padding: 26px 24px;
    }

    .kpc-discover-arrow {
        right: 22px;
        bottom: 22px;

        width: 38px;
        height: 38px;
    }

}


@media (max-width: 991px) {

    .kpc-discover {
        padding: var(--space-section-tablet) 0;

        --discover-ratio: 4 / 5;
        --discover-head-indent: 0px;
    }

    .kpc-discover-head {
        max-width: 700px;

        margin-bottom: 55px;
    }

    .kpc-discover-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpc-discover-card h3 {
        max-width: 22ch;
    }

}


@media (max-width: 767px) {

    .kpc-discover {
        padding: var(--space-section-mobile) 0;

        --discover-ratio: 4 / 3;
    }

    .kpc-discover-head {
        margin-bottom: 40px;
    }

    .kpc-discover-eyebrow {
        margin-bottom: 20px;

        font-size: var(--fs-2xs, 11px);
    }

    .kpc-discover-grid {
        display: flex;

        gap: 14px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .kpc-discover-grid::-webkit-scrollbar {
        display: none;
    }

    .kpc-discover-card {
        flex: 0 0 100%;

        scroll-snap-align: start;

        padding: 24px 22px;
    }

    .kpc-discover-card h3 {
        max-width: 16ch;

        font-size: var(--fs-lg, 18px);
    }

    .kpc-discover-arrow {
        right: 20px;
        bottom: 20px;

        width: 36px;
        height: 36px;

        font-size: 12px;
    }

    /* Auto-sliding pagination dots — see initDiscoverCarousel() in main.js.
       Built and shown only on this mobile, one-card-per-view layout. */
    .kpc-discover-indicators {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 7px;

        margin-top: 18px;
    }

    .kpc-discover-indicators span {
        display: block;

        width: 7px;
        height: 7px;

        background: var(--border-color);

        border-radius: 50%;

        cursor: pointer;

        transition:
            width .25s ease,
            background .25s ease;
    }

    .kpc-discover-indicators span.active {
        width: 22px;

        background: var(--primary-color);

        border-radius: 10px;
    }

}


@media (max-width: 575px) {

    .kpc-discover-head h2,
    .kpc-discover-text {
        font-size: var(--fs-lg, 18px);
    }

}


@media (prefers-reduced-motion: reduce) {

    .kpc-discover-card::before,
    .kpc-discover-arrow {
        transition: none;
    }

    .kpc-discover-card::before,
    .kpc-discover-card:hover::before {
        transform: none;
    }

    .kpc-discover-card:hover .kpc-discover-arrow {
        transform: none;
    }

}


/* =========================================================
   13. KPC AT A GLANCE
   ========================================================= */

.kpc-glance-section {
    padding: var(--space-section) 0;

    background: var(--background-color);
    --glance-col-gap: 42px;
}


.kpc-glance-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 60px;

    /* Nothing follows this inside the section any more (the stats moved
       into the text column), so it must not add its own space — the
       section's padding is the only gap to the next section. */
    margin-bottom: 0;
}

.kpc-glance-split-text {
    max-width: 480px;
}

.kpc-glance-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color: var(--primary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kpc-glance-eyebrow-dash {
    display: block;

    width: 24px;
    height: 2px;

    background: var(--primary-color);
}

.kpc-glance-split-title {
    margin: 0 0 20px;

    color: var(--text-primary);

    font-size: var(--kpc-heading-size);
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: -1px;
}

.kpc-glance-split-title span {
    color: var(--primary-color);
}

.kpc-glance-split-text p {
    max-width: 460px;

    margin: 0 0 28px;

    color: var(--text-secondary);

    font-size: var(--fs-base, 16px);
    line-height: 1.85;
}

.kpc-glance-split-image {
    border-radius: var(--radius-md);

    overflow: hidden;
}

.kpc-glance-split-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    aspect-ratio: 4 / 3.2;
}

@media (max-width: 991px) {
    .kpc-glance-split {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .kpc-glance-split-text,
    .kpc-glance-split-text p {
        max-width: 100%;
    }

    .kpc-glance-split-image {
        order: -1;
    }
}


/* ---------------------------------------------------------
   "Read more" buttons — one look everywhere: a red pill with the label
   first and the arrow in a white circle at the end. News cards, sustainability
   pillars and the At a Glance link all share this badge; each one only sets
   its own size. (The ticker's "More" button is the same idea in white, on
   the red bar.)
   --------------------------------------------------------- */

.kpc-news-more i,
.kpc-pillar-more i,
.kpc-glance-head-arrow {
    display: inline-grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--primary-color);
    background: var(--white);

    border-radius: 50%;
}

.kpc-news-more i::before,
.kpc-pillar-more i::before,
.kpc-glance-head-arrow i::before {
    display: inline-block;

    transition: transform 0.25s ease;
}

.kpc-glance-head-link {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    padding: 5px 5px 5px 18px;

    color: var(--white);
    background: var(--primary-color);

    border-radius: 999px;

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.kpc-glance-head-arrow {
    width: 26px;
    height: 26px;

    font-size: 11px;
}

.kpc-glance-head-link:hover {
    background: var(--primary-dark);

    box-shadow: 0 6px 16px rgba(238, 51, 66, 0.30);
}

.kpc-glance-head-link:hover .kpc-glance-head-arrow i::before {
    transform: translateX(2px);
}

.kpc-glance-head-link:focus-visible {
    outline: 2px solid var(--primary-color);

    outline-offset: 4px;
}


.kpc-glance-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 0 var(--glance-col-gap);

    margin: 0;

    border: 0;
}

.kpc-glance-stats.is-three {
    grid-template-columns: repeat(3, 1fr);
}

/* Compact variant — used now that the stats sit inside the narrower
   text column instead of spanning the full section width. 2 columns
   instead of 4, smaller numbers, tighter spacing. */
.kpc-glance-stats--compact {
    grid-template-columns: repeat(2, 1fr);

    gap: 24px 32px;

    margin: 28px 0 4px;
}

.kpc-glance-stats--compact .kpc-stat {
    padding-bottom: 20px;
}

.kpc-glance-stats--compact .kpc-stat strong {
    margin-bottom: 8px;

    font-size: var(--fs-3xl, 36px);

    letter-spacing: -1px;
}

.kpc-glance-stats--compact .kpc-stat > span {
    font-size: var(--fs-xs, 13px);
}

.kpc-glance-stats--compact + .kpc-glance-note {
    display: block;

    margin: 0 0 24px;
}


.kpc-stat {
    display: flex;
    flex-direction: column;

    padding: 0 0 40px;

    border: 0;
    border-bottom: 1px solid var(--border-color);
}

.kpc-stat:not(:last-child),
.kpc-stat:not(:first-child) {
    padding-left: 0;
    padding-right: 0;

    border-right: 0;
}


.kpc-stat strong {
    display: block;

    margin-bottom: 22px;

    color: var(--text-primary);

    font-size: var(--kpc-heading-size);
    font-weight: 400;
    line-height: 1;

    letter-spacing: -1.5px;

    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";

    white-space: nowrap;
}

.kpc-stat-value {
    display: inline-block;

    text-align: left;

    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.kpc-stat .kpc-stat-unit {
    color: inherit;

    font-size: 0.42em;
    font-weight: 400;

    letter-spacing: -0.5px;
}


.kpc-stat > span {
    display: block;

    color: var(--text-primary);

    font-size: var(--fs-base, 16px);
    font-weight: 400;
    line-height: 1.5;
}


.kpc-glance-note {
    display: block;

    margin: 26px 0 0;

    color: var(--text-muted);

    font-size: var(--fs-2xs, 11px);
    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


@media (max-width: 1199px) {

    .kpc-glance-section {
        --glance-col-gap: 32px;
    }

    .kpc-stat strong {
        margin-bottom: 18px;

        letter-spacing: -1px;
    }

    .kpc-stat {
        padding-bottom: 32px;
    }

}


@media (max-width: 991px) {

    .kpc-glance-section {
        padding: var(--space-section-tablet) 0;

    }

    .kpc-glance-head-link {
        margin-bottom: 0;
    }

    .kpc-glance-stats,
    .kpc-glance-stats.is-three {
        grid-template-columns: repeat(2, 1fr);

        gap: 44px var(--glance-col-gap);
    }

}


@media (max-width: 767px) {

    .kpc-glance-section {
        padding: var(--space-section-mobile) 0;

        --glance-col-gap: 26px;
    }

    .kpc-glance-head h2 {
        margin-bottom: 18px;
    }

    .kpc-glance-stats,
    .kpc-glance-stats.is-three {
        gap: 34px var(--glance-col-gap);
    }

    .kpc-stat {
        padding-bottom: 24px;
    }

    .kpc-stat strong {
        margin-bottom: 14px;

        font-size: var(--fs-stat, 32px);
        letter-spacing: -0.8px;
    }

    .kpc-stat > span {
        font-size: var(--fs-sm, 14px);
    }

}


@media (max-width: 575px) {

    .kpc-glance-head h2 {
        font-size: var(--fs-2xl, 28px);
    }

    .kpc-stat strong {
        font-size: var(--fs-stat, 32px);
    }

    .kpc-stat > span {
        font-size: var(--fs-xs, 13px);
    }

}


@media (max-width: 380px) {

    .kpc-glance-section {
        --glance-col-gap: 18px;
    }

    .kpc-stat strong {
        font-size: var(--fs-stat, 32px);
    }

}


@media (prefers-reduced-motion: reduce) {

    .kpc-glance-head-arrow {
        transition: none;
    }

}



/* ---------------------------------------------------------
   At a Glance — editable layout, alignment & stat icons
   (settings: wp-admin > At-a-Glance Stats > Section Content)
   --------------------------------------------------------- */

/* Vertical alignment of text vs image */
.kpc-glance-split--valign-start { align-items: start; }
.kpc-glance-split--valign-end   { align-items: end; }

/* Image on the left (desktop only — stacked layouts keep image on top) */
@media (min-width: 992px) {
    .kpc-glance-split--image-left .kpc-glance-split-image {
        order: -1;
    }
    .kpc-glance-split--image-left .kpc-glance-split-text {
        justify-self: end;
    }
}

/* Text alignment */
.kpc-glance-align-center { text-align: center; }
.kpc-glance-align-right  { text-align: right; }

.kpc-glance-split .kpc-glance-align-center { justify-self: center; }
.kpc-glance-align-center .kpc-glance-eyebrow { justify-content: center; }
.kpc-glance-align-center p { margin-left: auto; margin-right: auto; }

.kpc-glance-align-right .kpc-glance-eyebrow { justify-content: flex-end; }
.kpc-glance-align-right p { margin-left: auto; }

/* Keep the button clear of the stats when the footnote is hidden */
.kpc-glance-stats--compact + .kpc-glance-head-link {
    margin-top: 24px;
}

/* Stats alignment (independent of the text alignment above) */
.kpc-glance-stats--align-left .kpc-stat   { align-items: flex-start; text-align: left; }
.kpc-glance-stats--align-center .kpc-stat { align-items: center;     text-align: center; }
.kpc-glance-stats--align-right .kpc-stat  { align-items: flex-end;   text-align: right; }

/* Stat icons */
.kpc-glance-stats {
    --kpc-glance-icon-color: var(--primary-color);
    --kpc-glance-icon-box: 44px;
    --kpc-glance-icon-font: 18px;
}

.kpc-glance-stats--icon-small {
    --kpc-glance-icon-box: 36px;
    --kpc-glance-icon-font: 15px;
}

.kpc-glance-stats--icon-large {
    --kpc-glance-icon-box: 56px;
    --kpc-glance-icon-font: 23px;
}

.kpc-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: var(--kpc-glance-icon-box);
    height: var(--kpc-glance-icon-box);

    margin-bottom: 16px;

    color: var(--kpc-glance-icon-color);

    font-size: var(--kpc-glance-icon-font);
    line-height: 1;
}

.kpc-stat-icon .dashicons {
    width: auto;
    height: auto;

    font-size: 1.15em;
    line-height: 1;
}

.kpc-glance-stats--icon-plain .kpc-stat-icon {
    width: auto;
    height: auto;

    font-size: calc(var(--kpc-glance-icon-font) * 1.4);
}

.kpc-glance-stats--icon-circle .kpc-stat-icon,
.kpc-glance-stats--icon-square .kpc-stat-icon {
    background: rgba(238, 51, 66, 0.1);
    background: color-mix(in srgb, var(--kpc-glance-icon-color) 12%, transparent);
}

.kpc-glance-stats--icon-circle .kpc-stat-icon  { border-radius: 50%; }
.kpc-glance-stats--icon-square .kpc-stat-icon  { border-radius: 12px; }

.kpc-glance-stats--icon-outline .kpc-stat-icon {
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

/* Icon beside the number + label */
.kpc-glance-stats--icon-side .kpc-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    align-items: start;

    column-gap: 14px;
}

.kpc-glance-stats--icon-side .kpc-stat-icon {
    grid-row: 1 / span 2;

    margin-bottom: 0;
}

.kpc-glance-stats--icon-side .kpc-stat > strong,
.kpc-glance-stats--icon-side .kpc-stat > span {
    grid-column: 2;
}

.kpc-glance-stats--icon-side.kpc-glance-stats--align-center .kpc-stat {
    grid-template-columns: auto auto;
    justify-content: center;

    text-align: left;
}

.kpc-glance-stats--icon-side.kpc-glance-stats--align-right .kpc-stat {
    grid-template-columns: auto auto;
    justify-content: end;
}

@media (max-width: 575px) {
    .kpc-glance-stats--icon-side .kpc-stat {
        column-gap: 10px;
    }

    .kpc-stat-icon {
        margin-bottom: 12px;
    }
}


/* =========================================================
   14. SUSTAINABILITY — THREE PILLARS
   ========================================================= */

.kpc-sustainability-section {
    padding: var(--space-section) 0;

    background: var(--background-color);

    --sustain-gap: 22px;
    --sustain-ratio: 16 / 9;
    --sustain-circle: 72px;

    --radius-sustain: 12px;
}


.kpc-sustain-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 100px;
}

.kpc-sustain-head-text {
    max-width: 660px;
}

.kpc-sustain-head h2 {
    margin: 0 0 26px;

    color: var(--text-primary);

    font-size: var(--kpc-heading-size);
    font-weight: 400;
    line-height: 1.2;

    letter-spacing: -0.5px;
}

.kpc-sustain-head p {
    max-width: 640px;

    margin: 0;

    color: var(--text-secondary);

    font-size: var(--fs-base, 16px);
    font-weight: 400;
    line-height: 1.85;
}


.kpc-sustain-credential {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-top: 22px;

    color: var(--text-muted);

    font-size: var(--fs-2xs, 11px);
    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.kpc-sustain-credential::before {
    content: "";

    width: 22px;
    height: 1px;

    background: var(--primary-color);
}


.kpc-sustain-head-link {
    display: inline-flex;
    align-items: center;

    gap: 22px;

    flex-shrink: 0;

    margin-bottom: -4px;

    color: var(--primary-color);

    font-size: var(--fs-base, 16px);
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;
}

.kpc-sustain-head-arrow {
    width: var(--sustain-circle);
    height: var(--sustain-circle);

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--white);

    background: var(--secondary-color);

    border: 1px solid var(--secondary-color);
    border-radius: 50%;

    font-size: 26px;
    line-height: 1;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.kpc-sustain-head-link:hover .kpc-sustain-head-arrow {
    color: var(--white);

    background: var(--primary-color);

    border-color: var(--primary-color);
}

.kpc-sustain-head-link:focus-visible {
    outline: 2px solid var(--primary-color);

    outline-offset: 5px;
}


.kpc-sustain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: var(--sustain-gap);
}


.kpc-pillar {
    display: flex;
    flex-direction: column;

    height: 100%;

    color: var(--text-primary);

    text-decoration: none;
}


.kpc-pillar-thumb {
    position: relative;

    aspect-ratio: var(--sustain-ratio);

    margin-bottom: 22px;

    background: var(--background-light);

    border-radius: var(--radius-sustain);

    overflow: hidden;

    transform: translateZ(0);
}

.kpc-pillar-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: inherit;

    transition:
        transform 0.6s ease;
}

.kpc-pillar:hover .kpc-pillar-thumb img {
    transform: scale(1.05);
}


.kpc-pillar h3 {
    margin: 0 0 14px;

    color: var(--text-primary);

    font-size: var(--fs-xl, 22px);
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: -0.3px;

    transition: color 0.3s ease;
}

.kpc-pillar:hover h3 {
    color: var(--primary-color);
}

.kpc-pillar p {
    margin: 0 0 24px;

    color: var(--text-secondary);

    font-size: var(--fs-base, 16px);
    line-height: 1.75;
}


.kpc-pillar-more {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    align-self: flex-start;

    gap: 12px;

    margin-top: auto;
    padding: 5px 5px 5px 18px;

    color: var(--white);
    background: var(--primary-color);

    border-radius: 999px;

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    line-height: 1;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.kpc-pillar-more i {
    width: 26px;
    height: 26px;

    font-size: 11px;
}

.kpc-pillar:hover .kpc-pillar-more {
    background: var(--primary-dark);

    box-shadow: 0 6px 16px rgba(238, 51, 66, 0.30);
}

.kpc-pillar:hover .kpc-pillar-more i::before {
    transform: translateX(2px);
}

.kpc-pillar:focus-visible {
    outline: 2px solid var(--primary-color);

    outline-offset: 4px;
}


@media (max-width: 1199px) {

    .kpc-sustainability-section {
        --sustain-gap: 18px;
        --sustain-circle: 64px;
    }

    .kpc-sustain-head-arrow {
        font-size: 23px;
    }

    .kpc-sustain-head {
        margin-bottom: 75px;
    }

    .kpc-pillar p {
        font-size: var(--fs-base, 16px);
    }

}


@media (max-width: 991px) {

    .kpc-sustainability-section {
        padding: var(--space-section-tablet) 0;

        --sustain-circle: 58px;
    }

    .kpc-sustain-head-arrow {
        font-size: 21px;
    }

    .kpc-sustain-head {
        flex-direction: column;

        align-items: flex-start;

        gap: 30px;

        margin-bottom: 50px;
    }

    .kpc-sustain-head-text {
        max-width: 700px;
    }

    .kpc-sustain-head-link {
        margin-bottom: 0;
    }

    .kpc-sustain-grid {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 40px;
    }

}


@media (max-width: 767px) {

    .kpc-sustainability-section {
        padding: var(--space-section-mobile) 0;

        --sustain-circle: 50px;
        --sustain-ratio: 16 / 10;
    }

    .kpc-sustain-head-arrow {
        font-size: 18px;
    }

    .kpc-sustain-head {
        gap: 24px;

        margin-bottom: 38px;
    }

    .kpc-sustain-head h2 {
        margin-bottom: 20px;
    }

    .kpc-sustain-head-link {
        gap: 16px;

        font-size: var(--fs-sm, 14px);
    }

    .kpc-sustain-grid {
        grid-template-columns: 1fr;

        row-gap: 36px;
    }

    .kpc-pillar-thumb {
        margin-bottom: 18px;
    }

    .kpc-pillar-more {
        margin-top: 0;
    }

    .kpc-pillar:hover .kpc-pillar-thumb img {
        transform: none;
    }

}


@media (max-width: 575px) {

    .kpc-sustain-head h2 {
        font-size: var(--fs-2xl, 28px);
    }

    .kpc-pillar h3 {
        font-size: var(--fs-lg, 18px);
    }

}


@media (prefers-reduced-motion: reduce) {

    .kpc-pillar-thumb img,
    .kpc-pillar-more,
    .kpc-sustain-head-arrow {
        transition: none;
    }

    .kpc-pillar:hover .kpc-pillar-thumb img {
        transform: none;
    }

}



/* ---------------------------------------------------------
   11b. NSE Stock Ticker plugin ([nse_ticker] → .nse-ticker)
   When the ticker is set to "Custom code" and that code is the NSE Stock
   Ticker plugin, restyle the plugin's markup so it matches the theme's
   default ticker rail exactly. Only the look changes — the plugin's
   markup, data-nse-field hooks and live refresh script are untouched.
   Everything is scoped under .kpc-ticker--custom so the plugin's own
   styling still applies anywhere else it is used.
   --------------------------------------------------------- */

.kpc-ticker--custom .nse-ticker {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    gap: 24px;

    width: 100%;
    min-height: 40px;

    padding: 0;

    background: transparent;
    color: var(--secondary-color);

    font-size: inherit;
    line-height: 1.2;

    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Groups */
.kpc-ticker--custom .nse-ticker__id,
.kpc-ticker--custom .nse-ticker__price,
.kpc-ticker--custom .nse-ticker__stats {
    width: auto;

    padding: 0;

    border-left: 0;
    border-top: 0;
}

.kpc-ticker--custom .nse-ticker__price,
.kpc-ticker--custom .nse-ticker__stats {
    padding-left: 26px;

    border-left: 1px solid var(--border-color);
}

/* Identity */
.kpc-ticker--custom .nse-ticker__id {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;

    gap: 9px;

    flex-shrink: 0;
}

.kpc-ticker--custom .nse-ticker__badge {
    padding: 3px 7px;

    background: var(--primary-color);
    color: var(--white);

    border-radius: 2px;

    font-size: var(--fs-2xs, 11px);
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.08em;
}

.kpc-ticker--custom .nse-ticker__symbol {
    color: var(--secondary-color);

    font-size: var(--fs-base, 16px);
    font-weight: 700;
}

.kpc-ticker--custom .nse-ticker__name {
    color: var(--secondary-color);

    font-size: var(--fs-xs, 13px);

    white-space: nowrap;
}

/* Price + change */
.kpc-ticker--custom .nse-ticker__price {
    display: flex;
    align-items: baseline;

    gap: 0;

    flex-shrink: 0;

    white-space: nowrap;
}

.kpc-ticker--custom .nse-ticker__ccy {
    margin-right: 5px;

    color: var(--primary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 600;
    letter-spacing: 0.06em;
}

.kpc-ticker--custom .nse-ticker__value {
    color: var(--secondary-color);

    font-size: var(--fs-stat, 32px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.kpc-ticker--custom .nse-ticker[data-direction] .nse-ticker__change,
.kpc-ticker--custom .nse-ticker .nse-ticker__change {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    margin-left: 12px;

    color: var(--secondary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;

    white-space: nowrap;
}

/* Brand-red arrow, same as the default rail (Font Awesome is loaded by
   the theme). Flat moves show a minus. */
.kpc-ticker--custom .nse-ticker__change::before {
    content: "\f068";

    color: var(--primary-color);

    font-family: "Font Awesome 6 Free";
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.kpc-ticker--custom .nse-ticker[data-direction="up"] .nse-ticker__change::before {
    content: "\f062";
}

.kpc-ticker--custom .nse-ticker[data-direction="down"] .nse-ticker__change::before {
    content: "\f063";
}

.kpc-ticker--custom .nse-ticker__pct {
    margin-left: 2px;

    font-size: 1em;
    font-weight: 600;

    opacity: 0.75;
}

/* Stats */
.kpc-ticker--custom .nse-ticker__stats {
    display: flex;
    align-items: center;

    gap: 24px;

    flex: 1 1 auto;

    min-width: 0;

    margin: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.kpc-ticker--custom .nse-ticker__stats::-webkit-scrollbar {
    display: none;
}

.kpc-ticker--custom .nse-ticker__stat {
    display: flex;
    flex-direction: column;

    gap: 3px;

    flex: 0 0 auto;

    margin: 0;
}

.kpc-ticker--custom .nse-ticker__stat:last-child {
    padding-right: 4px;
}

.kpc-ticker--custom .nse-ticker__stat dt {
    margin: 0;

    color: var(--primary-color);

    font-size: var(--fs-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;

    text-transform: uppercase;

    white-space: nowrap;
}

.kpc-ticker--custom .nse-ticker__stat dd {
    margin: 0;

    color: var(--secondary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    line-height: 1.2;

    white-space: nowrap;
}

/* Market status, time, More */
.kpc-ticker--custom .nse-ticker__meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    gap: 16px;

    flex-shrink: 0;

    width: auto;

    margin-left: auto;
    padding-left: 0;

    font-size: inherit;
}

.kpc-ticker--custom .nse-ticker__status,
.kpc-ticker--custom .nse-ticker__status.is-open,
.kpc-ticker--custom .nse-ticker__status.is-closed {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: var(--secondary-color);

    font-size: var(--fs-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;

    white-space: nowrap;
}

.kpc-ticker--custom .nse-ticker__status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--text-muted);
    box-shadow: none;
}

.kpc-ticker--custom .nse-ticker__status.is-open i {
    background: var(--success-strong);

    box-shadow: 0 0 0 3px rgba(18, 129, 58, 0.18);

    animation: kpcTickerPulse 2s ease-in-out infinite;
}

.kpc-ticker--custom .nse-ticker__time {
    color: var(--secondary-color);

    font-size: var(--fs-2xs, 11px);

    white-space: nowrap;
}

.kpc-ticker--custom .nse-ticker__more,
.kpc-ticker--custom .nse-ticker__more:visited {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-left: 0;
    padding: 4px 4px 4px 16px;

    color: var(--white);
    background: var(--primary-color);

    border-radius: 999px;

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease;
}

/* The arrow sits in its own white circle at the end of the pill. */
.kpc-ticker--custom .nse-ticker__more svg {
    flex-shrink: 0;

    width: 24px;
    height: 24px;

    padding: 6px;

    color: var(--primary-color);
    background: var(--white);

    border-radius: 50%;

    transform: none;
    transition: none;
}

.kpc-ticker--custom .nse-ticker__more svg path {
    transition: transform 0.25s ease;
}

.kpc-ticker--custom .nse-ticker__more:hover {
    color: var(--white);
    background: var(--primary-dark);

    box-shadow: 0 6px 16px rgba(238, 51, 66, 0.30);
}

.kpc-ticker--custom .nse-ticker__more:hover svg {
    transform: none;
}

.kpc-ticker--custom .nse-ticker__more:hover svg path {
    transform: translateX(1.5px);
}

.kpc-ticker--custom .nse-ticker--empty {
    display: flex;
    align-items: center;

    min-height: 44px;

    padding: 0;

    color: var(--secondary-color);

    font-size: var(--fs-xs, 13px);
}

@media (prefers-reduced-motion: reduce) {

    .kpc-ticker--custom .nse-ticker__status.is-open i {
        animation: none;
    }

}

/* Desktop: one compact, centred row — same as the default rail. */
@media (min-width: 1200px) {

    .kpc-ticker--custom .nse-ticker {
        justify-content: center;

        gap: 22px;
    }

    .kpc-ticker--custom .nse-ticker__stats {
        flex: 0 1 auto;

        gap: 20px;
    }

    .kpc-ticker--custom .nse-ticker__meta {
        margin-left: 0;
    }

}

/* Below 1200px: identity / price / market on top, all stats underneath. */
@media (max-width: 1199px) {

    .kpc-ticker--custom .nse-ticker {
        flex-wrap: wrap;

        gap: 14px 20px;
    }

    .kpc-ticker--custom .nse-ticker__price {
        padding-left: 20px;
    }

    .kpc-ticker--custom .nse-ticker__meta {
        order: 2;
    }

    .kpc-ticker--custom .nse-ticker__stats {
        order: 3;

        flex: 1 1 100%;

        gap: 18px;

        padding-top: 14px;
        padding-left: 0;

        border-left: 0;
        border-top: 1px solid var(--border-color);
    }

}

@media (max-width: 767px) {

    .kpc-ticker--custom .nse-ticker__name {
        display: none;
    }

    .kpc-ticker--custom .nse-ticker__id {
        flex: 1 1 100%;
    }

    .kpc-ticker--custom .nse-ticker__price {
        padding-left: 0;

        border-left: 0;
    }

    .kpc-ticker--custom .nse-ticker__value {
        font-size: var(--fs-stat, 32px);
    }

    .kpc-ticker--custom .nse-ticker__more {
        font-size: var(--fs-2xs, 11px);
    }

}

@media (max-width: 575px) {

    .kpc-ticker--custom .nse-ticker {
        gap: 12px 16px;
    }

    /* Eight stats (with Avg) in a 4-column grid, so all are visible. */
    .kpc-ticker--custom .nse-ticker__stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 12px 8px;

        padding-top: 12px;

        overflow: visible;
    }

    .kpc-ticker--custom .nse-ticker__time {
        display: none;
    }

}


/* =========================================================
   12. NEWS & EVENTS — ONE LEAD, TWO BESIDE IT
   ========================================================= */

.kpc-news-events {
    padding: var(--space-section) 0;

    background: var(--background-color);

    --news-gap: 24px;
    --news-lead-ratio: 10 / 9;

    --radius-news: 12px;
}


.kpc-news-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 34px;
}

.kpc-news-head h2 {
    max-width: 470px;

    margin: 0;

    color: var(--text-primary);

    font-size: var(--fs-2xl, 28px);
    font-weight: 400;
    line-height: 1.35;

    letter-spacing: -0.2px;
}


.kpc-news-head-link {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    flex-shrink: 0;

    color: var(--primary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;
}

.kpc-news-head-arrow {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--white);

    background: var(--secondary-color);

    border: 1px solid var(--secondary-color);
    border-radius: 50%;

    font-size: 12px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.kpc-news-head-link:hover .kpc-news-head-arrow {
    color: var(--white);

    background: var(--primary-color);

    border-color: var(--primary-color);
}

.kpc-news-head-link:focus-visible {
    outline: 2px solid var(--primary-color);

    outline-offset: 4px;
}


.kpc-news-grid {
    display: grid;

    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;

    gap: var(--news-gap);
}

.kpc-news-grid.is-three {
    grid-template-rows: repeat(3, 1fr);
}

.kpc-news-grid.is-three .kpc-news-item.is-lead {
    grid-row: 1 / 4;
}


.kpc-news-item {
    display: flex;
    flex-direction: column;

    min-height: 0;

    color: var(--text-primary);

    text-decoration: none;
}

.kpc-news-item.is-lead {
    grid-column: 1;
    grid-row: 1 / 3;
}


.kpc-news-thumb {
    position: relative;

    flex: 1 1 auto;

    min-height: 0;

    margin-bottom: 15px;

    background: var(--background-light);

    border-radius: var(--radius-news);

    overflow: hidden;

    transform: translateZ(0);
}

.kpc-news-item.is-lead .kpc-news-thumb {
    flex: 0 0 auto;

    aspect-ratio: var(--news-lead-ratio);
}

.kpc-news-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: inherit;

    transition:
        transform 0.6s ease;
}

.kpc-news-item:hover .kpc-news-thumb img {
    transform: scale(1.05);
}


.kpc-news-date {
    display: block;

    margin-bottom: 8px;

    color: var(--text-muted);

    font-size: var(--fs-2xs, 11px);
    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.kpc-news-item h3 {
    margin: 0 0 11px;

    color: var(--text-primary);

    font-size: var(--fs-base, 16px);
    font-weight: 500;
    line-height: 1.45;

    letter-spacing: -0.1px;

    transition: color 0.3s ease;
}

.kpc-news-item.is-lead h3 {
    font-size: var(--fs-lg, 18px);
    line-height: 1.4;
}

.kpc-news-item:hover h3 {
    color: var(--primary-color);
}


.kpc-news-more {
    /* Button: the label reads first, then the arrow in its own circle.
       The markup is arrow-then-label, so the row is reversed here rather
       than editing the template. align-self stops the pill stretching to
       the full width of the (column-flex) card. */
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    align-self: flex-start;

    gap: 12px;

    margin-top: auto;
    padding: 4px 4px 4px 16px;

    color: var(--white);
    background: var(--primary-color);

    border-radius: 999px;

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    line-height: 1;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.kpc-news-more i {
    width: 24px;
    height: 24px;

    font-size: 10px;
}

.kpc-news-item:hover .kpc-news-more {
    background: var(--primary-dark);

    box-shadow: 0 6px 16px rgba(238, 51, 66, 0.30);
}

.kpc-news-item:hover .kpc-news-more i::before {
    transform: translateX(2px);
}

.kpc-news-item:focus-visible {
    outline: 2px solid var(--primary-color);

    outline-offset: 4px;
}


/* Desktop: half the height of the old layout.
   The lead image is now a wide banner instead of a near-square, and the two
   cards beside it lay out horizontally (photo | text) instead of stacking a
   tall photo above the text. Both changes are needed: those two cards set the
   minimum height of the whole grid, so shortening the lead image alone only
   saved ~15%. Tablet and phone layouts (max-width: 991px) are untouched.

   The lead image fills the FULL height of the row, so it starts and ends on
   the same lines as the photos beside it. Its title and Read more button sit
   on the image over a dark gradient instead of underneath it — underneath,
   they left the lead image ~115px shorter than the photos on the right. */
@media (min-width: 992px) {

    .kpc-news-events {
        --news-lead-ratio: 17 / 8;
    }

    /* The lead item itself carries the aspect ratio, and nothing inside it
       takes up space (image, title and button are all absolutely positioned),
       so its height is exactly width / ratio. It is stretched in both
       directions so that when the cards beside it need more room (narrow
       desktop, long titles) the image grows to fill the row instead of
       leaving a gap under itself or overflowing its column. */
    .kpc-news-item.is-lead {
        position: relative;

        display: block;

        aspect-ratio: var(--news-lead-ratio);

        /* Both must be stretch. An item with an aspect ratio otherwise takes
           its WIDTH from its height whenever the row grows taller than the
           ratio alone would give — and spills out of its column, under the
           cards beside it. */
        align-self: stretch;
        justify-self: stretch;

        border-radius: var(--radius-news);

        overflow: hidden;
    }

    .kpc-news-item.is-lead .kpc-news-thumb {
        position: absolute;
        inset: 0;

        margin: 0;

        aspect-ratio: auto;
    }

    /* Dark gradient behind the text so it stays readable on any photo. */
    .kpc-news-item.is-lead .kpc-news-thumb::after {
        content: "";

        position: absolute;
        inset: 0;

        background:
            linear-gradient(
                to top,
                rgba(4, 7, 7, 0.86) 0%,
                rgba(4, 7, 7, 0.55) 34%,
                rgba(4, 7, 7, 0) 72%
            );

        pointer-events: none;
    }

    .kpc-news-item.is-lead h3,
    .kpc-news-item.is-lead:hover h3 {
        position: absolute;
        left: 28px;
        right: 28px;
        bottom: 72px;

        z-index: 2;

        margin: 0;

        color: var(--white);
    }

    .kpc-news-item.is-lead .kpc-news-more {
        position: absolute;
        left: 28px;
        bottom: 24px;

        z-index: 2;
    }

    .kpc-news-item:not(.is-lead) {
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        grid-template-rows: 1fr auto;

        column-gap: 16px;

        align-items: start;
    }

    .kpc-news-item:not(.is-lead) .kpc-news-thumb {
        grid-column: 1;
        grid-row: 1 / 3;

        align-self: stretch;

        margin-bottom: 0;
    }

    .kpc-news-item:not(.is-lead) h3 {
        grid-column: 2;
        grid-row: 1;

        margin: 0 0 10px;
    }

    .kpc-news-item:not(.is-lead) .kpc-news-more {
        grid-column: 2;
        grid-row: 2;

        /* end = pinned to the bottom of the card; start = keeps the pill its
           own width (a grid item otherwise stretches to fill its column). */
        align-self: end;
        justify-self: start;
    }

}


@media (max-width: 1199px) {

    .kpc-news-events {
        --news-gap: 20px;
    }

    .kpc-news-item.is-lead h3 {
        font-size: var(--fs-lg, 18px);
    }

    .kpc-news-item h3 {
        font-size: var(--fs-base, 16px);
    }

}


@media (max-width: 991px) {

    .kpc-news-events {
        padding: var(--space-section-tablet) 0;

        --news-lead-ratio: 16 / 9;
    }

    .kpc-news-head {
        margin-bottom: 28px;
    }

    .kpc-news-grid,
    .kpc-news-grid.is-three {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
    }

    .kpc-news-item.is-lead,
    .kpc-news-grid.is-three .kpc-news-item.is-lead {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .kpc-news-thumb {
        flex: 0 0 auto;

        aspect-ratio: 4 / 3;
    }

    .kpc-news-item.is-lead .kpc-news-thumb {
        aspect-ratio: var(--news-lead-ratio);
    }

    .kpc-news-grid.is-three .kpc-news-item:last-child:nth-child(4) {
        grid-column: 1;
    }

}


@media (max-width: 767px) {

    .kpc-news-events {
        padding: var(--space-section-mobile) 0;

        --news-gap: 32px;
        --news-lead-ratio: 16 / 10;
    }

    .kpc-news-head {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;

        margin-bottom: 26px;
    }

    .kpc-news-head h2 {
        max-width: none;
    }

    .kpc-news-grid,
    .kpc-news-grid.is-three {
        grid-template-columns: 1fr;
    }

    .kpc-news-thumb {
        aspect-ratio: 16 / 10;

        margin-bottom: 13px;
    }

    .kpc-news-item.is-lead h3 {
        font-size: var(--fs-lg, 18px);
    }

    .kpc-news-item h3 {
        font-size: var(--fs-base, 16px);
    }

    .kpc-news-item:hover .kpc-news-thumb img {
        transform: none;
    }

}


@media (max-width: 575px) {

    .kpc-news-events {
        --news-gap: 28px;
    }

    .kpc-news-head-arrow {
        width: 36px;
        height: 36px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .kpc-news-thumb img,
    .kpc-news-more,
    .kpc-news-head-arrow {
        transition: none;
    }

    .kpc-news-item:hover .kpc-news-thumb img {
        transform: none;
    }

}


/* =========================================================
   16. KEY DOCUMENTS — REPORTS & STATEMENTS
   ========================================================= */

.kpc-documents-section {
    padding: var(--space-section) 0;

    background: var(--background-light);

    --doc-circle: 58px;
    --doc-card-pad: 34px;
    --radius-doc: 18px;
}


.kpc-documents-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 45px;
}

.kpc-documents-head h2 {
    max-width: 620px;

    margin: 0;

    color: var(--text-primary);

    font-size: var(--kpc-heading-size);
    font-weight: 400;
    line-height: 1.2;

    letter-spacing: -0.5px;
}


.kpc-documents-head-link {
    display: inline-flex;
    align-items: center;

    gap: 20px;

    flex-shrink: 0;

    color: var(--primary-color);

    font-size: var(--fs-base, 16px);
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;
}

.kpc-documents-head-arrow {
    width: var(--doc-circle);
    height: var(--doc-circle);

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--white);

    background: var(--secondary-color);

    border: 1px solid var(--secondary-color);
    border-radius: 50%;

    font-size: 14px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.kpc-documents-head-link:hover .kpc-documents-head-arrow {
    color: var(--white);

    background: var(--primary-color);

    border-color: var(--primary-color);
}

.kpc-documents-head-link:focus-visible {
    outline: 2px solid var(--primary-color);

    outline-offset: 5px;
}


.kpc-doc-card {
    padding: 30px var(--doc-card-pad) 26px;

    background: var(--white);

    border-radius: var(--radius-doc);
}

.kpc-doc-card-title {
    margin: 0 0 26px;

    color: var(--text-primary);

    font-size: var(--fs-lg, 18px);
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: -0.2px;
}


.kpc-doc-list {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top: 1px solid var(--border-color);
}

.kpc-doc-row {
    margin: 0;

    border-bottom: 1px solid var(--border-color);
}

.kpc-doc-main {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;

    align-items: center;

    gap: 0 26px;

    padding: 19px 0;
}


.kpc-doc-title {
    min-width: 0;

    color: var(--text-primary);

    font-size: var(--fs-base, 16px);
    font-weight: 400;
    line-height: 1.45;

    text-decoration: none;

    transition: color 0.25s ease;
}

.kpc-doc-title:visited {
    color: var(--text-primary);
}

.kpc-doc-title:hover,
.kpc-doc-title:focus-visible {
    color: var(--primary-color);
}

.kpc-doc-title:focus-visible {
    outline: 2px solid var(--primary-color);

    outline-offset: 3px;
}


.kpc-doc-meta {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--text-muted);

    font-size: var(--fs-xs, 13px);
    font-weight: 400;

    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}

.kpc-doc-meta span + span::before {
    content: "•";

    margin-right: 9px;

    opacity: 0.65;
}


.kpc-doc-actions {
    display: flex;
    align-items: center;

    gap: 6px;
}

.kpc-doc-icon,
.kpc-doc-toggle {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0;

    color: var(--white);

    background: var(--secondary-color);

    border: 0;
    border-radius: 50%;

    font-family: inherit;
    font-size: 15px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.kpc-doc-icon:hover,
.kpc-doc-toggle:hover {
    color: var(--white);

    background: var(--primary-color);
}

.kpc-doc-icon:focus-visible,
.kpc-doc-toggle:focus-visible {
    outline: 2px solid var(--primary-color);

    outline-offset: 1px;
}

.kpc-doc-toggle i {
    transition: transform 0.3s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.kpc-doc-toggle[aria-expanded="true"] i {
    transform: rotate(45deg);
}


.kpc-doc-panel {
    display: grid;
    grid-template-rows: 0fr;

    overflow: hidden;

    transition: grid-template-rows 0.35s ease;
}

.kpc-doc-panel.is-open {
    grid-template-rows: 1fr;
}

.kpc-doc-panel > div {
    min-height: 0;

    overflow: hidden;
}

.kpc-doc-panel p {
    max-width: 70ch;

    margin: 0;

    padding: 0 0 24px;

    color: var(--text-secondary);

    font-size: var(--fs-sm, 14px);
    line-height: 1.75;
}


.kpc-doc-foot {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 18px;

    padding-top: 26px;
}

.kpc-doc-zip {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    color: var(--primary-color);

    font-size: var(--fs-sm, 14px);
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;
}

.kpc-doc-zip-btn {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--white);

    background: var(--secondary-color);

    border: 1px solid var(--secondary-color);
    border-radius: 50%;

    font-size: var(--fs-xs, 13px);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.kpc-doc-zip:hover .kpc-doc-zip-btn {
    color: var(--white);

    background: var(--primary-color);

    border-color: var(--primary-color);
}

.kpc-doc-zip:focus-visible {
    outline: 2px solid var(--primary-color);

    outline-offset: 4px;
}


@media (max-width: 1199px) {

    .kpc-documents-section {
        --doc-circle: 52px;
        --doc-card-pad: 28px;
    }

    .kpc-doc-main {
        gap: 0 18px;
    }

}


@media (max-width: 991px) {

    .kpc-documents-section {
        padding: var(--space-section-tablet) 0;

        --doc-circle: 48px;
    }

    .kpc-documents-head {
        flex-direction: column;

        align-items: flex-start;

        gap: 26px;

        margin-bottom: 32px;
    }

    .kpc-documents-head h2 {
        max-width: 700px;
    }

}


@media (max-width: 767px) {

    .kpc-documents-section {
        padding: var(--space-section-mobile) 0;

        --doc-card-pad: 20px;
        --radius-doc: 14px;
    }

    .kpc-doc-card {
        padding: 24px var(--doc-card-pad) 20px;
    }

    .kpc-doc-card-title {
        margin-bottom: 20px;

        font-size: var(--fs-lg, 18px);
    }

    .kpc-doc-main {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "title actions"
            "meta  actions";

        align-items: center;

        gap: 6px 12px;

        padding: 18px 0;
    }

    .kpc-doc-title {
        grid-area: title;

        font-size: var(--fs-base, 16px);
    }

    .kpc-doc-meta {
        grid-area: meta;

        flex-wrap: wrap;

        white-space: normal;

        font-size: var(--fs-2xs, 11px);
    }

    .kpc-doc-actions {
        grid-area: actions;
    }

    .kpc-doc-icon,
    .kpc-doc-toggle {
        font-size: 17px;
    }

    .kpc-doc-panel p {
        padding-bottom: 20px;

        font-size: var(--fs-sm, 14px);
    }

    .kpc-doc-foot {
        justify-content: space-between;

        padding-top: 20px;
    }

    .kpc-doc-zip {
        justify-content: space-between;

        width: 100%;

        gap: 12px;
    }

}


@media (max-width: 575px) {

    .kpc-documents-head h2 {
        font-size: var(--fs-2xl, 28px);
    }

    .kpc-doc-zip {
        font-size: var(--fs-xs, 13px);
    }

}


@media (prefers-reduced-motion: reduce) {

    .kpc-doc-panel,
    .kpc-doc-toggle i,
    .kpc-documents-head-arrow,
    .kpc-doc-zip-btn {
        transition: none;
    }

}


@media print {

    .kpc-documents-section {
        padding: 0;

        background: none;
    }

    .kpc-doc-card {
        padding: 0;

        border-radius: 0;
    }

    .kpc-doc-actions,
    .kpc-doc-foot,
    .kpc-documents-head-link {
        display: none;
    }

    .kpc-doc-panel,
    .kpc-doc-panel.is-open {
        display: block;

        grid-template-rows: none;
    }

}


/* =========================================================
   15. FOOTER
   ========================================================= */

.kpc-footer {
    position: relative;
    padding: 72px 0 0;
    background: var(--secondary-color);
    color: var(--text-light);
    overflow: hidden;
}

.kpc-footer-main {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 55px;
    padding-bottom: 50px;
}

.kpc-footer-intro {
    max-width: 360px;
}

.kpc-footer-label {
    display: inline-block;
    margin-bottom: 15px;

    color: var(--primary-color);

    font-size: var(--fs-2xs, 11px);
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.3;
}

.kpc-footer-intro h2 {
    margin: 0 0 15px;

    color: var(--white);

    font-size: var(--kpc-heading-size);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1px;
}

.kpc-footer-intro p {
    max-width: 330px;
    margin: 0;

    color: var(--text-muted);

    font-size: var(--fs-xs, 13px);
    line-height: 1.7;
}

.kpc-footer-socials {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
}

.kpc-footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    color: var(--text-light);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;

    font-size: var(--fs-xs, 13px);
    text-decoration: none;

    transition: var(--transition);
}

.kpc-footer-socials a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);

    transform: translateY(-2px);
}

.kpc-footer-column h3 {
    margin: 0 0 19px;

    color: var(--white);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.3;
    text-transform: uppercase;
}

.kpc-footer-column ul {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.kpc-footer-column li {
    margin: 0;
    padding: 0;
}

.kpc-footer-column a {
    display: inline-block;

    color: var(--text-muted);

    font-size: var(--fs-xs, 13px);
    line-height: 1.4;
    text-decoration: none;

    transition: var(--transition);
}

.kpc-footer-column a:hover {
    color: var(--white);
    transform: translateX(4px);
}

.kpc-footer-contact {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: center;
    gap: 25px;

    padding: 25px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kpc-footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kpc-footer-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    background: rgba(255, 255, 255, 0.06);
    color: var(--primary-color);

    border-radius: 50%;
}

.kpc-footer-contact-icon i {
    font-size: 13px;
}

.kpc-footer-contact-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kpc-footer-contact-item span {
    color: var(--text-muted);

    font-size: var(--fs-2xs, 11px);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.3;
    text-transform: uppercase;
}

.kpc-footer-contact-item strong {
    color: var(--white);

    font-size: var(--fs-xs, 13px);
    font-weight: 600;
    line-height: 1.4;
}

.kpc-footer-contact-action {
    display: flex;
    justify-content: flex-end;
}

.kpc-footer-contact-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 48px;
    padding: 0 24px;

    background: var(--primary-color);
    color: var(--white);

    border: 1px solid var(--primary-color);
    border-radius: var(--radius-pill);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1;
    text-decoration: none;
    text-transform: none;

    white-space: nowrap;

    transition: var(--transition);
}

.kpc-footer-contact-action a:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);

    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.kpc-footer-contact-action i {
    font-size: 11px;
    transition: var(--transition);
}

.kpc-footer-contact-action a:hover i {
    transform: translateX(4px);
}

.kpc-footer-bottom {
    background: var(--white);
    border-top: 1px solid var(--border-color);
}

.kpc-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;
    min-height: 68px;
}

.kpc-footer-bottom p {
    margin: 0;

    color: var(--text-secondary);

    font-size: var(--fs-2xs, 11px);
    line-height: 1.5;
}

.kpc-footer-legal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.kpc-footer-legal a {
    color: var(--text-secondary);

    font-size: var(--fs-2xs, 11px);
    line-height: 1.5;
    text-decoration: none;

    transition: var(--transition);
}

.kpc-footer-legal a:hover {
    color: var(--primary-color);
}

.kpc-footer-legal span {
    width: 3px;
    height: 3px;

    background: var(--border-color);

    border-radius: 50%;
}

@media (max-width: 1199px) {

    .kpc-footer-main {
        gap: 40px;
    }

    .kpc-footer-intro h2 {
        font-size: var(--fs-3xl, 36px);
    }

    .kpc-footer-contact {
        gap: 18px;
    }

}

@media (max-width: 991px) {

    .kpc-footer {
        padding-top: 65px;
    }

    .kpc-footer-main {
        grid-template-columns: 1.5fr repeat(3, 1fr);
        gap: 30px;
        padding-bottom: 45px;
    }

    .kpc-footer-intro h2 {
        font-size: var(--fs-3xl, 36px);
    }

    .kpc-footer-intro p {
        font-size: var(--fs-xs, 13px);
    }

    .kpc-footer-contact {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .kpc-footer-contact-action {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

}

@media (max-width: 767px) {

    .kpc-footer {
        padding-top: 55px;
    }

    .kpc-footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 38px 25px;
        padding-bottom: 40px;
    }

    .kpc-footer-intro {
        grid-column: 1 / -1;
        max-width: 500px;
    }

    .kpc-footer-intro h2 {
        font-size: var(--fs-2xl, 28px);
    }

    .kpc-footer-intro p {
        max-width: 400px;
        font-size: var(--fs-xs, 13px);
    }

    .kpc-footer-column h3 {
        margin-bottom: 14px;
        font-size: var(--fs-2xs, 11px);
    }

    .kpc-footer-column ul {
        gap: 9px;
    }

    .kpc-footer-column a {
        font-size: var(--fs-2xs, 11px);
    }

    .kpc-footer-contact {
        grid-template-columns: 1fr;
        gap: 18px;

        padding: 25px 0;
    }

    .kpc-footer-contact-action {
        grid-column: auto;
        justify-content: flex-start;
    }

    .kpc-footer-contact-action a {
        width: 100%;
    }

    .kpc-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 10px;

        min-height: auto;
        padding: 18px 0;
    }

    .kpc-footer-legal {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

}

@media (max-width: 576px) {

    .kpc-footer {
        padding-top: 48px;
    }

    .kpc-footer-main {
        gap: 32px 20px;
    }

    .kpc-footer-intro h2 {
        font-size: var(--fs-2xl, 28px);
        letter-spacing: -0.7px;
    }

    .kpc-footer-label {
        margin-bottom: 12px;
        font-size: var(--fs-2xs, 11px);
        letter-spacing: 1.5px;
    }

    .kpc-footer-intro p {
        font-size: var(--fs-2xs, 11px);
        line-height: 1.65;
    }

    .kpc-footer-socials {
        margin-top: 20px;
    }

    .kpc-footer-socials a {
        width: 34px;
        height: 34px;
        font-size: var(--fs-xs, 13px);
    }

    .kpc-footer-column h3 {
        font-size: var(--fs-2xs, 11px);
    }

    .kpc-footer-column a {
        font-size: var(--fs-2xs, 11px);
    }

    .kpc-footer-contact-item strong {
        font-size: var(--fs-2xs, 11px);
    }

    .kpc-footer-contact-item span {
        font-size: 8px;
    }

    .kpc-footer-bottom p,
    .kpc-footer-legal a {
        font-size: var(--fs-2xs, 11px);
    }

}

@media (max-width: 380px) {

    .kpc-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 28px 15px;
    }

    .kpc-footer-intro h2 {
        font-size: var(--fs-2xl, 28px);
    }

    .kpc-footer-column a {
        font-size: var(--fs-2xs, 11px);
    }

    .kpc-footer-contact {
        gap: 16px;
    }

    .kpc-footer-socials a {
        width: 32px;
        height: 32px;
    }

}


/* =========================================================
   17. INNER PAGES (extends the same design language)
   ========================================================= */

.kpc-page-hero {
    position: relative;
    min-height: 340px;
    padding: 140px 0 40px;
    display: flex;
    align-items: flex-end;
    background: var(--secondary-color);
    color: var(--white);
    overflow: hidden;
}

.kpc-page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .9;
}

.kpc-page-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4,7,7,.35) 0%, rgba(4,7,7,.45) 45%, rgba(4,7,7,.88) 100%);
}

.kpc-page-hero > .container {
    position: relative;
    z-index: 2;
}

.kpc-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: rgba(255,255,255,.6);
    font-size: var(--fs-xs, 13px);
    font-weight: 600;
}

.kpc-breadcrumbs a { color: rgba(255,255,255,.75); }
.kpc-breadcrumbs a:hover { color: var(--white); }

.kpc-page-hero h1 {
    margin: 0;
    color: var(--white);
    font-size: var(--kpc-heading-size);
    font-weight: 700;
    letter-spacing: -1px;
    max-width: 780px;
}

.kpc-page-hero p {
    max-width: 620px;
    margin: 18px 0 0;
    color: rgba(255,255,255,.75);
    font-size: var(--fs-base, 16px);
}

.kpc-content-area {
    padding: var(--space-section) 0;
}

.kpc-entry-content {
    /* Pages use the full container width (news posts keep a reading
       width — see single.php). */
    max-width: none;
}

.kpc-entry-content h2 {
    font-size: var(--fs-2xl, 28px);
    margin-top: 1.6em;
    letter-spacing: -0.5px;
}

.kpc-entry-content h3 {
    font-size: var(--fs-xl, 22px);
    margin-top: 1.3em;
}

.kpc-entry-content p,
.kpc-entry-content li {
    font-size: var(--fs-base, 16px);
    line-height: 1.8;
    color: var(--text-secondary);
}

.kpc-entry-content ul, .kpc-entry-content ol {
    padding-left: 1.3em;
    margin-bottom: 1.2em;
}

.kpc-entry-content ul li { list-style: disc; }
.kpc-entry-content ol li { list-style: decimal; }

.kpc-entry-content blockquote {
    border-left: 3px solid var(--primary-color);
    padding: 4px 0 4px 20px;
    color: var(--text-secondary);
    font-style: italic;
    margin: 1.6em 0;
}

.kpc-entry-content a { color: var(--primary-color); text-decoration: underline; }
.kpc-entry-content img { border-radius: var(--radius-md); margin: 1.4em 0; }

.kpc-two-col {
    display: grid;
    grid-template-columns: 2.1fr 1fr;
    gap: 55px;
}

.kpc-sidebar .widget {
    background: var(--background-light);
    border-radius: var(--radius-md);
    padding: 26px;
    margin-bottom: 24px;
}

.kpc-sidebar .widget-title {
    font-size: var(--fs-xs, 13px);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    font-weight: 700;
}

.kpc-sidebar ul li {
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--fs-sm, 14px);
}

.kpc-sidebar ul li:last-child { border-bottom: none; }
.kpc-sidebar ul li a:hover { color: var(--primary-color); }

.kpc-pagination {
    display: flex;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.kpc-pagination a, .kpc-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--background-light);
    font-weight: 700;
    font-size: var(--fs-xs, 13px);
}

.kpc-pagination .current { background: var(--secondary-color); color: var(--white); }
.kpc-pagination a:hover { background: var(--primary-color); color: var(--white); }

.kpc-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 60px;
}

.kpc-contact-card {
    background: var(--background-light);
    border-radius: var(--radius-md);
    padding: 30px;
}

/* =========================================================
   24. LEADERSHIP GRID (Board of Directors, Management Team)
   ========================================================= */

/* =========================================================
   24. LEADERSHIP PROFILES (Board of Directors, Management Team)
   ---------------------------------------------------------
   Large alternating photo/bio rows — one full-width row per
   person, photo and text swapping sides each row. Standalone
   pages only (not shown inside the Who We Are hub tabs).
   ========================================================= */

.kpc-leader-row {
    display: flex;
    align-items: center;

    gap: 60px;

    padding: 56px 0;

    border-bottom: 1px solid var(--border-color);
}

.kpc-leader-row:first-child {
    padding-top: 0;
}

.kpc-leader-row:last-child {
    border-bottom: 0;
}

.kpc-leader-row:nth-child(even) {
    flex-direction: row-reverse;
}

.kpc-leader-photo {
    flex: 0 0 42%;

    aspect-ratio: 4 / 3.4;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--secondary-color);
    border-radius: var(--radius-md);

    overflow: hidden;
}

.kpc-leader-photo img {
    display: block;

    width: 100%;
    height: var(--kpc-photo-img-h, 100%);

    /* Every photo fills its frame, so all profiles are the same size
       whatever shape the uploaded photo is. The crop is anchored to the
       top so faces stay in view on portrait shots.
       (Elementor widget: Style > Photo > Fit / Focus point / Shape.) */
    object-fit: cover;
    object-position: center top;
}

.kpc-leader-photo.has-photo {
    background: #f1f2f4;
}

.kpc-leader-initials {
    color: var(--white);

    font-size: var(--kpc-heading-size);
    font-weight: 700;
    letter-spacing: 0.02em;

    opacity: 0.85;
}

.kpc-leader-info {
    flex: 1 1 auto;
    min-width: 0;
}

.kpc-leader-info h2 {
    font-size: var(--fs-2xl, 28px);
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}

.kpc-leader-title {
    display: block;

    margin-bottom: 22px;

    color: var(--primary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kpc-leader-info p {
    font-size: var(--fs-base, 16px);
    line-height: 1.8;
    margin: 0 0 14px;
}

.kpc-leader-info p:last-child {
    margin-bottom: 0;
}

.kpc-leadership-note {
    margin: 10px 0 40px;
    padding: 16px 20px;

    background: rgba(238, 51, 66, 0.05);
    border-left: 3px solid var(--primary-color);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

    font-size: var(--fs-sm, 14px);
    color: var(--text-secondary);
}

@media (max-width: 767px) {
    .kpc-leader-row,
    .kpc-leader-row:nth-child(even) {
        flex-direction: column;
        align-items: stretch;

        gap: 24px;

        padding: 36px 0;
    }

    .kpc-leader-photo {
        flex-basis: auto;
        aspect-ratio: 4 / 3;
    }
}

/* Leadership Profiles widget (Elementor) — layout variants.
   The default "alternate" layout is exactly the rows above. */
.kpc-leader-name {
    font-size: var(--fs-2xl, 28px);
    letter-spacing: -0.3px;
    margin: 0 0 8px;
}

.kpc-leader-name a {
    color: inherit;
    text-decoration: none;
}

.kpc-leader-name a:hover {
    color: var(--primary-color);
}

.kpc-leader-photo {
    position: relative;
}

/* Profile-picture placeholder (Team Members without a photo). */
.kpc-leader-photo.is-placeholder {
    background: #e7e9ec;
}

.kpc-leader-photo img.kpc-avatar-placeholder {
    object-fit: cover;
}

.kpc-leaders--grid[style*="--kpc-team-cols"] {
    grid-template-columns: repeat(var(--kpc-team-cols), minmax(0, 1fr));
}

.kpc-leader-edit {
    display: inline-block;

    margin-top: 12px;

    color: var(--text-muted);

    font-size: var(--fs-xs, 13px);
    text-decoration: underline;
}

/* In the widget the first person is the first child, which the base
   rules above strip of top padding — give it back some room so it
   doesn't press against text placed above the widget. */
.kpc-leaders:not(.kpc-leaders--grid) > .kpc-leader-row:first-child {
    padding-top: 36px;
}

.kpc-leaders--left .kpc-leader-row,
.kpc-leaders--left .kpc-leader-row:nth-child(even) {
    flex-direction: row;
}

.kpc-leaders--right .kpc-leader-row,
.kpc-leaders--right .kpc-leader-row:nth-child(even) {
    flex-direction: row-reverse;
}

.kpc-leaders--stacked .kpc-leader-row,
.kpc-leaders--stacked .kpc-leader-row:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
}

.kpc-leaders--stacked .kpc-leader-photo {
    flex: 0 0 auto;
    width: 42%;
    max-width: 100%;
}

.kpc-leaders--grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
}

.kpc-leaders--grid .kpc-leader-row,
.kpc-leaders--grid .kpc-leader-row:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 0;
    border-bottom: 0;
}

.kpc-leaders--grid .kpc-leader-photo {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

.kpc-leaders--grid .kpc-leader-name {
    font-size: var(--fs-xl, 22px);
}

.kpc-leaders--grid .kpc-leader-title {
    margin-bottom: 12px;
}

.kpc-leaders--no-lines .kpc-leader-row {
    border-bottom: 0;
}

@media (max-width: 991px) {
    .kpc-leaders--grid,
    .kpc-leaders--grid[style*="--kpc-team-cols"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .kpc-leaders--left .kpc-leader-row,
    .kpc-leaders--right .kpc-leader-row,
    .kpc-leaders--left .kpc-leader-row:nth-child(even),
    .kpc-leaders--right .kpc-leader-row:nth-child(even) {
        flex-direction: column;
        align-items: stretch;
    }

    .kpc-leaders--stacked .kpc-leader-photo {
        width: 100%;
    }

    .kpc-leaders--grid,
    .kpc-leaders--grid[style*="--kpc-team-cols"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* WordPress standard: text for screen readers only. */
.screen-reader-text {
    position: absolute !important;

    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    border: 0;

    white-space: nowrap;
    word-wrap: normal !important;
}

/* Team lists — Read more link and text alignment (incl. justify). */
.kpc-leader-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 14px;

    color: var(--primary-color);

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.kpc-leader-more i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.kpc-leader-more:hover i {
    transform: translateX(3px);
}

a.kpc-leader-photo {
    display: flex;
}

.kpc-leaders--align-left .kpc-leader-info { text-align: left; }
.kpc-leaders--align-center .kpc-leader-info { text-align: center; }
.kpc-leaders--align-right .kpc-leader-info { text-align: right; }
.kpc-leaders--align-justify .kpc-leader-bio,
.kpc-leaders--align-justify .kpc-leader-bio p,
.kpc-profile--align-justify .kpc-profile-bio,
.kpc-profile--align-justify .kpc-profile-bio p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.kpc-profile--align-center .kpc-profile-info { text-align: center; }
.kpc-profile--align-right .kpc-profile-info { text-align: right; }

/* Team member profile page */
.kpc-profile {
    display: grid;
    grid-template-columns: minmax(0, var(--kpc-profile-photo, 40%)) minmax(0, 1fr);
    align-items: start;
    gap: 56px;
}

.kpc-profile--right {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--kpc-profile-photo, 40%));
}

.kpc-profile--right .kpc-profile-photo {
    order: 2;
}

.kpc-profile--top {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

.kpc-profile--top .kpc-profile-photo {
    width: min(100%, var(--kpc-profile-photo, 420px));
}

.kpc-profile .kpc-profile-photo {
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 4.6;
    position: sticky;
    top: calc(var(--kpc-menu-h, 60px) + 24px);
}

.kpc-profile-role {
    margin-bottom: 8px;
}

.kpc-profile-team {
    display: inline-block;
    margin-bottom: 26px;
    padding: 4px 12px;

    background: var(--background-light, #f5f6f7);
    border-radius: 999px;

    color: var(--text-secondary);

    font-size: var(--fs-xs, 13px);
    font-weight: 600;
}

.kpc-profile-bio p {
    margin: 0 0 16px;

    font-size: var(--fs-base, 16px);
    line-height: 1.85;
}

.kpc-profile-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 18px;

    color: var(--primary-color);

    font-size: var(--fs-sm, 14px);
    font-weight: 700;
    text-decoration: none;
}

.kpc-profile-back:hover i {
    transform: translateX(-3px);
}

.kpc-profile-back i {
    transition: transform 0.2s ease;
}

.kpc-profile-others {
    margin-top: 72px;
    padding-top: 48px;

    border-top: 1px solid var(--border-color);
}

.kpc-profile-others h2 {
    margin: 0 0 28px;

    font-size: var(--fs-2xl, 28px);
}

.kpc-profile-others-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 24px;
}

.kpc-profile-card {
    display: flex;
    flex-direction: column;
    gap: 4px;

    color: var(--text-primary);
    text-decoration: none;
}

.kpc-profile-card .kpc-profile-card-photo {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 12px;

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kpc-profile-card:hover .kpc-profile-card-photo {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.kpc-profile-card strong {
    font-size: var(--fs-base, 16px);
    line-height: 1.3;
}

.kpc-profile-card:hover strong {
    color: var(--primary-color);
}

.kpc-profile-card > span:last-child {
    color: var(--text-muted);

    font-size: var(--fs-xs, 13px);
}

@media (max-width: 991px) {
    .kpc-profile-others-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .kpc-profile,
    .kpc-profile--right {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .kpc-profile--right .kpc-profile-photo {
        order: 0;
    }

    .kpc-profile .kpc-profile-photo {
        position: static;
        aspect-ratio: 4 / 4;
    }

    .kpc-profile-others-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
    }
}

.kpc-contact-card i {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    color: var(--primary-color);
    margin-bottom: 18px;
    font-size: 17px;
}

.kpc-contact-card h3 { font-size: var(--fs-lg, 18px); margin-bottom: 8px; }
.kpc-contact-card p { font-size: var(--fs-sm, 14px); margin: 0; }

.kpc-contact-form-wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 50px;
    align-items: start;
}

.kpc-form-group { margin-bottom: 18px; }

.kpc-form-group label {
    display: block;
    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    margin-bottom: 8px;
}

.kpc-form-group input,
.kpc-form-group textarea,
.kpc-form-group select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-base, 16px);
}

.kpc-form-group textarea { min-height: 140px; resize: vertical; }

.kpc-form-note {
    font-size: var(--fs-xs, 13px);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}

.kpc-form-note.success { background: rgba(53,199,89,.12); color: var(--success-strong); }
.kpc-form-note.error { background: rgba(238,51,66,.1); color: var(--primary-dark); }

.kpc-map-embed {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    min-height: 320px;
}

.kpc-map-embed iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }

@media (max-width: 991px) {
    .kpc-two-col { grid-template-columns: 1fr; }
    .kpc-contact-grid { grid-template-columns: 1fr 1fr; }
    .kpc-contact-form-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .kpc-page-hero { min-height: 280px; padding: 130px 0 34px; }
    .kpc-content-area { padding: var(--space-section-mobile) 0; }
    .kpc-contact-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   18. COMMENTS
   ========================================================= */

.kpc-comments { margin-top: 55px; max-width: 820px; }
.kpc-comments .comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.kpc-comments .comment-body { padding: 20px 0; border-bottom: 1px solid var(--border-color); }
.kpc-comments .comment-reply-title { font-size: var(--fs-xl, 22px); }
.kpc-comments .comment-form input,
.kpc-comments .comment-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-family: inherit;
}
.kpc-comments .comment-form textarea { min-height: 140px; }


/* =========================================================
   19. 404
   ========================================================= */

.kpc-not-found { text-align: center; padding: 110px 0; }
.kpc-not-found .code {
    font-size: 6rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   20. BLOG / NEWSROOM LISTING GRID (archives, search results)
   ========================================================= */

.kpc-post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 28px;
    margin-bottom: 10px;
}

/* Wide variant — used on the Media/Newsroom listing now that it no
   longer shares the row with a sidebar, so cards get more room. */
.kpc-post-grid--wide {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
}

.kpc-post-card {
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    text-decoration: none;
}

.kpc-post-card .kpc-post-thumb {
    position: relative;
    aspect-ratio: 16/10;
    margin-bottom: 18px;
    background: var(--background-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transform: translateZ(0);
}

.kpc-post-card .kpc-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform .5s ease;
}

.kpc-post-card:hover .kpc-post-thumb img { transform: scale(1.06); }

.kpc-post-card .kpc-post-date {
    display: block;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-size: var(--fs-2xs, 11px);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.kpc-post-card h3 {
    font-size: var(--fs-lg, 18px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.2px;
    margin: 0 0 12px;
    transition: color .25s ease;
}

.kpc-post-card:hover h3 { color: var(--primary-color); }

.kpc-post-card p {
    font-size: var(--fs-sm, 14px);
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

.kpc-post-card .kpc-post-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    color: var(--primary-color);
    font-size: var(--fs-xs, 13px);
    font-weight: 600;
    transition: gap .25s ease;
}

.kpc-post-card:hover .kpc-post-more {
    gap: 13px;
}

@media (max-width: 1199px) {
    .kpc-post-grid--wide {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .kpc-post-grid,
    .kpc-post-grid--wide {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   21. CONTENT PROTECTION (Customizer: Content Protection)
   ========================================================= */

html.kpc-no-select,
html.kpc-no-select body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Form fields stay selectable/editable regardless — protection should
   never block a visitor from typing into or copying their own input. */
html.kpc-no-select input,
html.kpc-no-select textarea,
html.kpc-no-select select,
html.kpc-no-select [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}


/* =========================================================
   22. RELATED PAGES (internal linking — see inc/seo.php)
   ========================================================= */

/* =========================================================
   23. SECTION HUB — sidebar tabs + content panel (About, Our Business)
   ---------------------------------------------------------
   In-page equivalent of the mega menu: a 4/12-column list of
   sub-sections on the left, an 8/12-column content panel on the
   right, both inside a wider-than-usual container. Clicking a tab
   swaps the visible panel with no navigation — every panel's real
   content is already in the page (good for SEO), JS only toggles
   which one shows. See initHubTabs() in main.js.
   ========================================================= */

.kpc-hub-section {
    padding: 0 0 var(--space-section);
}

/* Wider than the site's normal 1320px container, but still with
   generous side gutters rather than running truly edge-to-edge. */
.kpc-hub-full {
    width: min(calc(100% - 48px), 1600px);
    margin-left: auto;
    margin-right: auto;
}

.kpc-hub-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;

    border-top: 1px solid var(--border-color);
}

.kpc-hub-sidebar {
    position: sticky;
    top: 100px;

    flex: 0 0 33.3333%;
    max-width: 33.3333%;

    padding: 0 40px 0 0;
    border-right: 1px solid var(--border-color);
}

.kpc-hub-sidebar-title {
    padding: 34px 0 20px;

    font-size: var(--fs-xs, 13px);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.kpc-hub-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 20px 4px;

    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-color);

    color: var(--text-primary);

    font-size: var(--fs-lg, 18px);
    font-weight: 600;
    text-align: left;

    cursor: pointer;

    transition: color 0.25s ease, padding-left 0.25s ease;
}

.kpc-hub-tab i {
    font-size: 12px;
    color: var(--text-muted);

    transition: transform 0.25s ease, color 0.25s ease;
}

.kpc-hub-tab:hover {
    color: var(--primary-color);
    padding-left: 8px;
}

.kpc-hub-tab.active {
    color: var(--primary-color);
}

.kpc-hub-tab.active i {
    color: var(--primary-color);
    transform: translateX(3px);
}

.kpc-hub-content {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;

    padding: 40px 0 40px 56px;
}

.kpc-hub-panel {
    display: none;
}

.kpc-hub-panel.active {
    display: block;

    animation: kpcHubFadeIn 0.35s ease;
}

@keyframes kpcHubFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kpc-hub-panel h2 {
    font-size: var(--fs-3xl, 36px);
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

/* Long tab content scrolls inside its own box instead of stretching
 * the whole page — keeps the sidebar and tab row usable regardless of
 * how much text a given section has. Touch-scrolls smoothly on iOS,
 * scrolls normally with a mouse wheel/trackpad everywhere else. */
.kpc-hub-panel-scroll {
    max-height: min(62vh, 640px);
    overflow-y: auto;

    padding-right: 18px;
    margin-right: -18px;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color: var(--border-dark) transparent;
}

.kpc-hub-panel-scroll::-webkit-scrollbar {
    width: 6px;
}

.kpc-hub-panel-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.kpc-hub-panel-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.kpc-hub-panel-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* A soft fade at the bottom hints there's more to scroll, without
 * needing JS to detect scroll position. */
.kpc-hub-panel {
    position: relative;
}

.kpc-hub-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 18px;
    bottom: 0;
    height: 36px;

    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background-color));

    pointer-events: none;

    opacity: 0;
    transition: opacity 0.2s ease;
}

.kpc-hub-panel.has-scroll::after {
    opacity: 1;
}

@media (max-width: 991px) {
    .kpc-hub-panel-scroll {
        max-height: min(55vh, 480px);
    }
}

@media (max-width: 991px) {
    .kpc-hub-layout {
        flex-direction: column;
    }

    .kpc-hub-sidebar,
    .kpc-hub-content {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* No in-page section switcher on mobile — the main nav's own
       "Who We Are" / "Our Business" submenu already lists every
       section as a real link, so this doesn't need a second, separate
       way to move between them. The page just shows its first section
       directly; use the menu to reach the others. */
    .kpc-hub-sidebar {
        display: none;
    }

    .kpc-hub-content {
        padding-left: 0;
        padding-top: 4px;
    }
}

.kpc-related-links {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.kpc-related-links h3 {
    font-size: var(--fs-base, 16px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.kpc-related-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kpc-related-links li {
    margin: 0;
}

.kpc-related-links a {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: var(--background-light);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs, 13px);
    font-weight: 600;
    transition: var(--transition);
}

.kpc-related-links a:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* ---------------------------------------------------------
   Homepage: tighter rhythm between sections.
   Scoped to the front page so inner pages keep their own spacing.
   Every homepage section pads its top and bottom with these
   variables, so the gap between two neighbouring sections is twice
   the value: 96px x 2 = 192px before, 64px x 2 = 128px now (tablet
   144 -> 96, mobile 112 -> 72). To tune it, change these three.
   --------------------------------------------------------- */

body.home {
    --space-section: 64px;
    --space-section-tablet: 48px;
    --space-section-mobile: 36px;
}

/* The two headings that also pushed their content down by 90-100px.
   Ranges are limited to where they used to be large, so the smaller
   tablet/mobile values are never raised. */
@media (min-width: 992px) {
    body.home .kpc-discover-head {
        margin-bottom: 56px;
    }
}

@media (min-width: 1200px) {
    body.home .kpc-sustain-head {
        margin-bottom: 60px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body.home .kpc-sustain-head {
        margin-bottom: 50px;
    }
}

/* ---------------------------------------------------------
   Utility links inside the mobile drawer. They used to sit in an
   always-visible red bar above the header; that bar is gone, so phones
   get them here instead.
   --------------------------------------------------------- */

.mobile-utility {
    display: flex;
    flex-direction: column;

    margin-top: 10px;

    border-top: 1px solid var(--border-color);
}

.mobile-utility a {
    display: flex;
    align-items: center;

    min-height: 52px;

    padding: 0 25px;

    color: var(--text-muted);

    border-bottom: 1px solid var(--border-color);

    font-size: var(--fs-sm, 14px);
    font-weight: 600;

    text-decoration: none;

    transition: var(--transition);
}

.mobile-utility a i {
    margin-right: 10px;

    color: var(--primary-color);
}

.mobile-utility a:hover,
.mobile-utility a.active {
    color: var(--primary-color);

    background: var(--background-soft);
}

/* =====================================================================
 * Documents download manager — [kpc_documents] / KPC Documents widget
 * ===================================================================== */
.kpc-docs {
    --kpc-docs-accent: var(--primary-color);
    --kpc-docs-radius: var(--radius-md);
    margin: 0 0 32px;
    color: var(--text-primary);
}
.kpc-docs-heading { margin: 0 0 18px; font-size: var(--fs-xl, 22px); font-weight: 700; letter-spacing: -0.5px; }
.kpc-docs-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin: 0 0 20px; padding: 14px; background: var(--background-light); border-radius: var(--kpc-docs-radius);
}
.kpc-docs-toolbar label { margin: 0; }
.kpc-docs-toolbar select,
.kpc-docs-search input {
    height: 44px; padding: 0 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--white); color: var(--text-primary); font-size: var(--fs-sm, 14px); font-family: inherit;
}
.kpc-docs-toolbar select { padding-right: 32px; max-width: 100%; }
.kpc-docs-search { position: relative; flex: 1 1 240px; }
.kpc-docs-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; }
.kpc-docs-search input { width: 100%; padding-left: 38px; }
.kpc-docs-toolbar select:focus, .kpc-docs-search input:focus { outline: 2px solid var(--kpc-docs-accent); outline-offset: 1px; border-color: transparent; }
.kpc-docs-go {
    height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-sm);
    background: var(--secondary-color); color: var(--white); font-weight: 600; font-size: var(--fs-sm, 14px); cursor: pointer;
}
.kpc-docs-go:hover { background: var(--kpc-docs-accent); }
.kpc-docs-reset { font-size: var(--fs-sm, 14px); color: var(--text-secondary); text-decoration: underline; }
.kpc-docs-count { margin: -6px 0 14px; font-size: var(--fs-sm, 14px); color: var(--text-secondary); }
.kpc-docs-empty { padding: 28px; text-align: center; color: var(--text-secondary); background: var(--background-light); border-radius: var(--kpc-docs-radius); }

/* Icons by file type */
.kpc-docs-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 10px; font-size: 21px;
    background: #f1f2f3; color: var(--text-secondary);
}
.kpc-docs-icon.is-pdf   { background: #fdecee; color: #d92838; }
.kpc-docs-icon.is-word  { background: #e8f0fd; color: #2b5797; }
.kpc-docs-icon.is-excel { background: #e6f5ec; color: #1d7044; }
.kpc-docs-icon.is-ppt   { background: #fdf0e7; color: #c4501b; }
.kpc-docs-icon.is-zip   { background: #fbf5e2; color: #9a7409; }
.kpc-docs-icon.is-image, .kpc-docs-icon.is-video, .kpc-docs-icon.is-audio { background: #f0ebfa; color: #6a3fb5; }

/* Buttons */
.kpc-docs-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kpc-docs-btn {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--kpc-docs-accent);
    background: var(--kpc-docs-accent); color: var(--white); font-size: var(--fs-sm, 14px); font-weight: 600; text-decoration: none;
    transition: var(--transition);
}
.kpc-docs-btn:hover, .kpc-docs-btn:focus { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }
.kpc-docs-btn.is-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-color); }
.kpc-docs-btn.is-ghost:hover, .kpc-docs-btn.is-ghost:focus { border-color: var(--text-primary); background: transparent; color: var(--text-primary); }
.kpc-docs-nofile { font-size: var(--fs-sm, 14px); color: var(--text-muted); }

/* Meta line */
.kpc-docs-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm, 14px); color: var(--text-secondary); }
.kpc-docs-meta { gap: 4px 0; }
.kpc-docs-meta > span:not(:last-child)::after { content: "\00b7"; margin: 0 8px; color: var(--text-muted); font-weight: 400; }
.kpc-docs-cat { color: var(--kpc-docs-accent); font-weight: 600; }
.kpc-docs-closes, .kpc-docs-closed { font-weight: 600; }
.kpc-docs-closes { color: var(--success-strong); }
.kpc-docs-closed { color: var(--text-muted); text-transform: uppercase; font-size: var(--fs-xs, 13px); letter-spacing: .06em; }
.kpc-docs .is-closed .kpc-docs-title, .kpc-docs .is-closed strong { color: var(--text-secondary); }

/* List / compact */
.kpc-docs-items { list-style: none; margin: 0; padding: 0; }
.kpc-docs--list .kpc-docs-item,
.kpc-docs--compact .kpc-docs-item {
    display: flex; align-items: center; gap: 18px; padding: 18px 20px;
    background: var(--white); border: 1px solid var(--border-color); border-radius: var(--kpc-docs-radius);
    transition: var(--transition);
}
.kpc-docs--list .kpc-docs-item + .kpc-docs-item { margin-top: 12px; }
.kpc-docs--list .kpc-docs-item:hover { box-shadow: var(--shadow-sm); border-color: transparent; }
.kpc-docs-body { flex: 1 1 auto; min-width: 0; }
.kpc-docs-title { margin: 0 0 5px; font-size: var(--fs-lg, 18px); font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.kpc-docs-desc { margin: 7px 0 0; font-size: var(--fs-sm, 14px); line-height: 1.55; color: var(--text-secondary); }
.kpc-docs--compact .kpc-docs-item { padding: 12px 4px; border-width: 0 0 1px; border-radius: 0; background: transparent; }
.kpc-docs--compact .kpc-docs-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 8px; }
.kpc-docs--compact .kpc-docs-title { font-size: var(--fs-base, 16px); margin-bottom: 2px; }
.kpc-docs--compact .kpc-docs-btn { padding: 7px 13px; font-size: var(--fs-xs, 13px); }

/* Grid */
.kpc-docs--grid .kpc-docs-items { display: grid; grid-template-columns: repeat(var(--kpc-docs-cols, 3), minmax(0, 1fr)); gap: 22px; }
.kpc-docs--grid .kpc-docs-item {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--white); border: 1px solid var(--border-color); border-radius: var(--kpc-docs-radius); transition: var(--transition);
}
.kpc-docs--grid .kpc-docs-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpc-docs-cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--background-light); }
.kpc-docs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kpc-docs-cover .kpc-docs-icon { width: 72px; height: 72px; font-size: 32px; border-radius: 16px; }
.kpc-docs--grid .kpc-docs-body { padding: 18px 20px 0; flex: 1 1 auto; }
.kpc-docs--grid .kpc-docs-actions { padding: 16px 20px 20px; }

/* Table */
.kpc-docs-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--kpc-docs-radius); }
.kpc-docs-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 14px); }
.kpc-docs-table thead tr { background: var(--background-light); }
.kpc-docs-table th { text-align: left; padding: 13px 16px; background: var(--background-light); font-size: var(--fs-xs, 13px); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.kpc-docs-table td { padding: 14px 16px; border-top: 1px solid var(--border-color); vertical-align: middle; color: var(--text-secondary); }
.kpc-docs-table tbody tr:hover td { background: var(--background-soft); }
.kpc-docs-cell-title { display: flex; gap: 14px; align-items: center; }
.kpc-docs-cell-title .kpc-docs-icon { width: 40px; height: 40px; font-size: 18px; }
.kpc-docs-cell-title strong { display: block; color: var(--text-primary); font-weight: 600; line-height: 1.35; }
.kpc-docs-cell-title small { display: block; margin-top: 3px; font-size: var(--fs-xs, 13px); }
.kpc-docs-nowrap { white-space: nowrap; }
.kpc-docs-table .kpc-docs-actions { flex-direction: column; align-items: stretch; justify-content: center; }
.kpc-docs-table .kpc-docs-btn { justify-content: center; }

/* Pagination */
.kpc-docs-pages { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.kpc-docs-pages .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-weight: 600; font-size: var(--fs-sm, 14px); text-decoration: none;
}
.kpc-docs-pages .page-numbers.current { background: var(--kpc-docs-accent); border-color: var(--kpc-docs-accent); color: var(--white); }
.kpc-docs-pages a.page-numbers:hover { border-color: var(--text-primary); }
.kpc-docs-pages .dots { border: 0; }

/* Win over page-content styles (links, lists, paragraphs) */
.kpc-docs .kpc-docs-items { margin: 0; padding: 0; }
.kpc-docs .kpc-docs-items > li { list-style: none; font-size: inherit; line-height: inherit; }
.kpc-docs .kpc-docs-heading { margin-top: 0; }
.kpc-docs a.kpc-docs-btn { color: var(--white); text-decoration: none; }
.kpc-docs a.kpc-docs-btn.is-ghost { color: var(--text-primary); }
.kpc-docs a.kpc-docs-reset { color: var(--text-secondary); }
.kpc-docs p.kpc-docs-desc { margin: 7px 0 0; font-size: var(--fs-sm, 14px); line-height: 1.55; color: var(--text-secondary); }
.kpc-docs p.kpc-docs-count, .kpc-docs p.kpc-docs-empty { font-size: var(--fs-sm, 14px); line-height: 1.5; }
.kpc-docs--list .kpc-docs-actions { flex-wrap: nowrap; }
.kpc-docs-table td:first-child { min-width: 260px; width: 42%; }
.kpc-docs-table .kpc-docs-desc { line-height: 1.45; }
.kpc-docs--table .kpc-docs-toolbar,
.kpc-docs--table .kpc-docs-heading { max-width: none; }

@media (max-width: 991.98px) {
    .kpc-docs--grid .kpc-docs-items { grid-template-columns: repeat(min(var(--kpc-docs-cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .kpc-docs-toolbar { padding: 12px; }
    .kpc-docs-toolbar > label:not(.kpc-docs-search) { flex: 1 1 calc(50% - 5px); }
    .kpc-docs-toolbar select { width: 100%; }
    .kpc-docs-go { flex: 1 1 100%; }
    .kpc-docs--list .kpc-docs-item { flex-wrap: wrap; padding: 16px; gap: 14px; }
    .kpc-docs--list .kpc-docs-body { flex: 1 1 calc(100% - 64px); }
    .kpc-docs--list .kpc-docs-actions { flex: 1 1 100%; flex-wrap: wrap; }
    .kpc-docs-table td:first-child { min-width: 0; width: 100%; }
    .kpc-docs--compact .kpc-docs-item { flex-wrap: wrap; }
    .kpc-docs--compact .kpc-docs-body { flex: 1 1 calc(100% - 56px); }
    .kpc-docs--compact .kpc-docs-actions { flex: 1 1 100%; padding-left: 54px; }
    .kpc-docs--grid .kpc-docs-items { grid-template-columns: minmax(0, 1fr); }
    .kpc-docs-table thead { display: none; }
    .kpc-docs-table, .kpc-docs-table tbody, .kpc-docs-table tr, .kpc-docs-table td { display: block; width: 100%; }
    .kpc-docs-table tr { padding: 14px 16px; border-top: 1px solid var(--border-color); }
    .kpc-docs-table tr:first-child { border-top: 0; }
    .kpc-docs-table td { padding: 3px 0; border: 0; }
    .kpc-docs-table td:first-child { padding-bottom: 8px; }
    .kpc-docs-table .kpc-docs-actions { flex-direction: row; justify-content: flex-start; padding-top: 10px; }
}

/* Elementor's own ".elementor img { height: auto }" loads after the theme
   and has the same weight, which made photos keep their own shape (gaps
   above/below or overflow — most visible on phones). Restore "fill the frame". */
.elementor .kpc-leader-photo img { height: var(--kpc-photo-img-h, 100%); }
.elementor .kpc-glance-split-image img,
.elementor .kpc-pillar-thumb img,
.elementor .kpc-news-thumb img,
.elementor .kpc-post-card .kpc-post-thumb img,
.elementor .kpc-docs-cover img,
.elementor .kpc-hero-slide > img,
.elementor .kpc-hero-slide > picture img { height: 100%; }

/* Elementor containers define their own --border-color (empty unless a
   border is set), which blanked every theme border inside Elementor pages.
   Give theme content inside Elementor widgets the theme's value back. */
:root { --kpc-theme-border-color: var(--border-color); }
.elementor-widget-container,
.elementor-widget { --border-color: var(--kpc-theme-border-color, #e7e7e7); }


/* "Read more" pills: plain white arrow, no white circle behind it. */
.kpc-news-more i,
.kpc-pillar-more i,
.kpc-glance-head-arrow {
    color: var(--white);
    background: transparent;
}
.kpc-glance-head-link { padding-right: 10px; gap: 6px; }
.kpc-pillar-more { padding-right: 10px; }
.kpc-news-more { padding-right: 9px; }

/* =====================================================================
 * KPC Tabs (Investor Relations and any page) — inc/tabs.php
 * ===================================================================== */
.kpc-tabs {
    --kpc-tabs-accent: var(--primary-color);
    --kpc-tabs-text: var(--text-primary);
    --kpc-tabs-muted: var(--text-secondary);
    --kpc-tabs-bar-bg: var(--white);
    --kpc-tabs-line: #e7e7e7;
    margin: 0 0 40px;
}
.kpc-tabs-bar {
    position: relative;
    z-index: 20;
    background: var(--kpc-tabs-bar-bg);
    border-bottom: 1px solid var(--kpc-tabs-line);
    margin-bottom: 36px;
}
.kpc-tabs.is-sticky .kpc-tabs-bar { position: sticky; top: var(--kpc-tabs-top, 0px); transition: top .2s ease; }
.kpc-tabs-nav,
.kpc-tabs-sub {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.kpc-tabs-nav::-webkit-scrollbar, .kpc-tabs-sub::-webkit-scrollbar { display: none; }
.kpc-tabs-sub[hidden] { display: none; }
.kpc-tabs--align-center .kpc-tabs-nav, .kpc-tabs--align-center .kpc-tabs-sub { justify-content: center; }
.kpc-tabs--align-stretch .kpc-tabs-nav > .kpc-tabs-tab { flex: 1 1 0; justify-content: center; }

.kpc-tabs .kpc-tabs-tab,
.kpc-tabs .kpc-tabs-subtab {
    display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap; text-decoration: none; cursor: pointer;
    font-family: inherit; line-height: 1.2;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.kpc-tabs .kpc-tabs-tab {
    position: relative;
    padding: 18px 20px;
    color: var(--kpc-tabs-text);
    font-size: var(--fs-base, 16px); font-weight: 600;
}
.kpc-tabs .kpc-tabs-tab i { font-size: 11px; transition: transform .2s ease; }
.kpc-tabs .kpc-tabs-tab.is-active i { transform: rotate(180deg); }
.kpc-tabs .kpc-tabs-tab:hover, .kpc-tabs .kpc-tabs-tab:focus-visible { color: var(--kpc-tabs-accent); }
.kpc-tabs .kpc-tabs-tab:focus-visible, .kpc-tabs .kpc-tabs-subtab:focus-visible { outline: 2px solid var(--kpc-tabs-accent); outline-offset: -2px; }

/* Underline (default) */
.kpc-tabs--underline .kpc-tabs-tab::after {
    content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 3px;
    background: var(--kpc-tabs-accent); border-radius: 3px 3px 0 0;
    transform: scaleX(0); transition: transform .25s ease;
}
.kpc-tabs--underline .kpc-tabs-tab.is-active { color: var(--kpc-tabs-accent); }
.kpc-tabs--underline .kpc-tabs-tab.is-active::after { transform: scaleX(1); }

/* Pills */
.kpc-tabs--pills .kpc-tabs-bar { border-bottom: 0; padding: 8px; background: var(--background-light); border-radius: var(--radius-pill); }
.kpc-tabs--pills.has-open-sub .kpc-tabs-bar { border-radius: var(--radius-md); }
.kpc-tabs--pills .kpc-tabs-tab { padding: 12px 20px; border-radius: var(--radius-pill); }
.kpc-tabs--pills .kpc-tabs-tab.is-active { background: var(--kpc-tabs-accent); color: var(--white); }

/* Boxed */
.kpc-tabs--boxed .kpc-tabs-nav { gap: 0; }
.kpc-tabs--boxed .kpc-tabs-tab { border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: -1px; }
.kpc-tabs--boxed .kpc-tabs-tab.is-active { background: var(--white); border-color: var(--kpc-tabs-line); color: var(--kpc-tabs-accent); box-shadow: inset 0 3px 0 var(--kpc-tabs-accent); }

/* Sub-tabs row */
.kpc-tabs-sub {
    gap: 8px;
    padding: 12px 20px 14px;
    border-top: 1px solid var(--kpc-tabs-line);
    background: var(--background-soft);
}
.kpc-tabs--pills .kpc-tabs-sub { background: transparent; border-top: 0; padding: 10px 12px 4px; }
.kpc-tabs .kpc-tabs-subtab {
    padding: 8px 16px;
    border: 1px solid var(--kpc-tabs-line); border-radius: var(--radius-pill);
    background: var(--white); color: var(--kpc-tabs-muted);
    font-size: var(--fs-sm, 14px); font-weight: 600;
}
.kpc-tabs .kpc-tabs-subtab:hover { color: var(--kpc-tabs-accent); border-color: var(--kpc-tabs-accent); }
.kpc-tabs .kpc-tabs-subtab.is-active { background: var(--kpc-tabs-accent); border-color: var(--kpc-tabs-accent); color: var(--white); }

/* Panels */
.kpc-tabs-panel { display: none; }
.kpc-tabs-panel.is-active { display: block; animation: kpcTabIn .25s ease; }
@keyframes kpcTabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kpc-tabs-panel-title { margin: 0 0 22px; font-size: var(--fs-2xl, 28px); letter-spacing: -0.5px; }
.kpc-tabs-note { padding: 14px 18px; border-left: 3px solid var(--kpc-tabs-accent); background: rgba(238, 51, 66, .05); font-size: var(--fs-sm, 14px); color: var(--text-secondary); }
.kpc-tabs-moved { margin: 0 !important; }
/* In the Elementor editor every panel stays visible so it can be edited. */
.elementor-editor-active .kpc-tabs-panel { display: block; }
.elementor-editor-active .kpc-tabs-panel:not(.is-active) { opacity: .55; }
.elementor-editor-active .kpc-tabs-panel + .kpc-tabs-panel { margin-top: 28px; padding-top: 28px; border-top: 1px dashed var(--kpc-tabs-line); }

@media (max-width: 767px) {
    .kpc-tabs-bar { margin-left: -12px; margin-right: -12px; margin-bottom: 26px; }
    .kpc-tabs .kpc-tabs-tab { padding: 15px 14px; font-size: var(--fs-base, 16px); }
    .kpc-tabs--underline .kpc-tabs-tab::after { left: 14px; right: 14px; }
    .kpc-tabs-sub { padding: 10px 12px 12px; }
    .kpc-tabs--align-stretch .kpc-tabs-nav > .kpc-tabs-tab { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .kpc-tabs-panel.is-active { animation: none; }
}

/* Investor Relations page built with Elementor: full content width. */
.kpc-ir-elementor .kpc-entry-content { max-width: none; }


/* =====================================================================
 * Investor Relations section — template "Investor Relations (Tabs)"
 * ===================================================================== */
.kpc-ir-hero {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 380px;
    padding: 130px 0 60px;
    background: var(--secondary-color);
    color: var(--white);
    text-align: center;
    overflow: hidden;
}
.kpc-ir-hero .container { position: relative; z-index: 1; }
.kpc-ir-hero-section { margin: 0 0 10px; font-size: var(--fs-2xl, 28px); font-weight: 700; letter-spacing: -0.3px; color: var(--white); }
.kpc-ir-hero-title { margin: 0; font-size: var(--kpc-heading-size); font-weight: 300; letter-spacing: -1px; line-height: 1.1; color: var(--white); }

.kpc-irnav {
    position: sticky; top: var(--kpc-irnav-top, 0px); z-index: 30;
    background: var(--white);
    border-bottom: 1px solid #e7e7e7;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
}
.kpc-irnav-list {
    display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;
    gap: 0 8px; margin: 0; padding: 0; list-style: none;
}
.kpc-irnav-item { position: relative; display: flex; align-items: center; }
.kpc-irnav .kpc-irnav-link {
    display: block; padding: 20px 16px;
    color: var(--text-primary); font-size: var(--fs-lg, 18px); font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: color .2s ease;
}
.kpc-irnav-item.has-sub .kpc-irnav-link { padding-right: 4px; }
.kpc-irnav .kpc-irnav-link:hover,
.kpc-irnav-item.is-current > .kpc-irnav-link { color: var(--primary-color); }
.kpc-irnav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin-right: 6px; padding: 0;
    border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: var(--fs-2xs, 11px);
    border-radius: 50%;
}
.kpc-irnav-toggle:hover, .kpc-irnav-toggle:focus-visible { color: var(--primary-color); background: var(--background-light); }
.kpc-irnav-toggle i { transition: transform .2s ease; }
.kpc-irnav-item.is-open .kpc-irnav-toggle i { transform: rotate(180deg); }
.kpc-irnav-sub {
    position: absolute; top: 100%; left: 0; min-width: 240px;
    margin: 0; padding: 8px 0; list-style: none;
    background: var(--white); border: 1px solid #e7e7e7; border-top: 3px solid var(--primary-color);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.kpc-irnav-item.is-open > .kpc-irnav-sub { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 992px) {
    .kpc-irnav-item.has-sub:hover > .kpc-irnav-sub,
    .kpc-irnav-item.has-sub:focus-within > .kpc-irnav-sub { opacity: 1; visibility: visible; transform: none; }
}
.kpc-irnav-sub a {
    display: block; padding: 10px 20px;
    color: var(--text-primary); font-size: var(--fs-base, 16px); text-decoration: none; white-space: nowrap;
}
.kpc-irnav-sub a:hover, .kpc-irnav-sub a.is-current { color: var(--primary-color); background: var(--background-soft); }

.kpc-ir-content { padding-top: 64px; }
.kpc-ir-ticker { margin-bottom: 36px; }
.kpc-ir-subhead { margin: 40px 0 20px; font-size: var(--fs-2xl, 28px); letter-spacing: -0.4px; }

.kpc-ir-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.kpc-ir-cards li { list-style: none; }
.kpc-ir-card {
    position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%;
    padding: 26px 64px 26px 24px;
    background: var(--white); border: 1px solid #e7e7e7; border-radius: var(--radius-md);
    color: var(--text-primary); text-decoration: none;
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.kpc-ir-card:hover { box-shadow: var(--shadow-md); border-color: transparent; transform: translateY(-2px); color: var(--text-primary); }
.kpc-ir-card-title { font-size: var(--fs-lg, 18px); font-weight: 600; }
.kpc-ir-card-text { font-size: var(--fs-sm, 14px); color: var(--text-secondary); line-height: 1.55; }
.kpc-ir-card-arrow {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 50%; background: var(--primary-color); color: var(--white); font-size: 13px;
}

@media (max-width: 991.98px) {
    .kpc-irnav-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .kpc-irnav-list::-webkit-scrollbar { display: none; }
    .kpc-irnav .container { padding-left: 0; padding-right: 0; }
    .kpc-irnav .kpc-irnav-link { padding: 16px 12px; font-size: var(--fs-base, 16px); }
    .kpc-irnav-item:first-child .kpc-irnav-link { padding-left: 16px; }
    .kpc-irnav-item { position: static; }
    /* On phones a dropdown opens full width under the bar. */
    .kpc-irnav-sub { left: 0; right: 0; top: 100%; min-width: 0; border-radius: 0; }
}
@media (max-width: 767px) {
    .kpc-ir-hero { min-height: 280px; padding: 110px 0 44px; }
    .kpc-ir-content { padding-top: 40px; }
}

/* Investor Relations — a tab page's own tabs (Financials: Financial Statements | …)
   sit right under the banner, full width, in place of the main tab bar. */
.kpc-ir-intro { margin-bottom: 32px; }
.kpc-ir-content.has-subtabs { padding-top: 0; }
.kpc-ir-content.has-subtabs .kpc-tabs { margin-top: 0; }
.kpc-ir-content.has-subtabs .kpc-tabs-bar {
    margin: 0 calc(50% - 50vw) 56px;
    padding: 0 calc(50vw - 50%);
    background: var(--white);
    border-bottom: 1px solid #e7e7e7;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
}
.kpc-ir-content.has-subtabs .kpc-tabs .kpc-tabs-tab { padding: 20px 18px; font-size: var(--fs-lg, 18px); font-weight: 500; }
.kpc-ir-content.has-subtabs .kpc-ir-intro { margin-top: 0; }
.kpc-ir-page { overflow-x: clip; }
@media (max-width: 767px) {
    .kpc-ir-content .kpc-tabs--align-center .kpc-tabs-nav { justify-content: flex-start; }
    .kpc-ir-content.has-subtabs .kpc-tabs-bar { margin-bottom: 36px; }
    .kpc-ir-content.has-subtabs .kpc-tabs .kpc-tabs-tab { padding: 16px 14px; font-size: var(--fs-base, 16px); }
}

/* Team / department pages (/team/board/) */
.kpc-team-intro { max-width: 820px; margin-bottom: 36px; }
.kpc-team-subhead { margin: 56px 0 20px; font-size: var(--fs-2xl, 28px); }

/* Key documents cards (homepage, Tenders, Careers): no date / type / size line. */
.kpc-doc-meta { display: none !important; }
.kpc-doc-main { grid-template-columns: minmax(0, 1fr) auto; }

/* =====================================================================
 * Investor Relations — dashboard design (brand colours)
 * ===================================================================== */
.kpc-ir-page {
    --kpc-irb-ink: #0b1011;
    --kpc-irb-ink-2: #151b1c;
    --kpc-irb-ink-3: #232a2b;
    --kpc-irb-muted: #6b7075;
    --kpc-irb-line: #e9eaec;
    --kpc-irb-paper: #f7f7f8;
    --kpc-irb-red: var(--primary-color);
    --kpc-irb-red-2: #f56671;
    --kpc-irb-radius: 22px;
    --kpc-irb-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    background: var(--kpc-irb-paper);
}
.kpc-ir-page .kpc-content-area { background: var(--kpc-irb-paper); }

/* Hero (all Investor Relations pages) */
.kpc-irh,
.kpc-ir-page .kpc-ir-hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(1100px 560px at 92% -10%, rgba(238, 51, 66, .26) 0%, transparent 55%),
        radial-gradient(900px 500px at 0% 110%, #1d2425 0%, transparent 60%),
        linear-gradient(160deg, #040707 0%, #0b1011 55%, #161d1e 100%);
}
.kpc-irh::before,
.kpc-ir-page .kpc-ir-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
    z-index: 1;
}
.kpc-irh-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .18; mix-blend-mode: luminosity; }
.kpc-ir-page .kpc-ir-hero .kpc-page-hero-bg { opacity: .2; mix-blend-mode: luminosity; }
.kpc-ir-page .kpc-ir-hero .kpc-page-hero-bg::after { display: none; }
.kpc-ir-page .kpc-ir-hero-section { color: var(--kpc-irb-red-2); font-size: var(--fs-xs, 13px); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.kpc-ir-page .kpc-ir-hero-title { font-family: var(--kpc-irb-serif); font-weight: 600; letter-spacing: -.025em; }

.kpc-irh { padding: 150px 0 96px; }
.kpc-irh-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; }
.kpc-irh-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
    padding: 7px 16px; border-radius: 40px;
    background: rgba(238, 51, 66, .1); border: 1px solid rgba(238, 51, 66, .3);
    color: var(--kpc-irb-red-2); font-size: var(--fs-xs, 13px); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.kpc-irh-eyebrow i { font-size: 6px; }
.kpc-irh-title { margin: 0 0 22px; font-family: var(--kpc-irb-serif); font-size: var(--kpc-heading-size); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; color: #fff; }
.kpc-irh-accent { font-style: italic; font-weight: 400; background: linear-gradient(120deg, #ff5a67, #ffb3b9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpc-irh-lede { max-width: 540px; margin: 0 0 36px; color: #b7bcbf; font-size: var(--fs-lg, 18px); line-height: 1.7; }
.kpc-irh-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.kpc-ir-page a.kpc-irh-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 28px; border-radius: 50px; border: 0;
    background: linear-gradient(135deg, #f24552, var(--kpc-irb-red));
    color: #fff; font-size: var(--fs-sm, 14px); font-weight: 700; text-decoration: none;
    box-shadow: 0 16px 32px -12px rgba(238, 51, 66, .6);
    transition: transform .25s ease, box-shadow .25s ease;
}
.kpc-ir-page a.kpc-irh-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -14px rgba(238, 51, 66, .75); color: #fff; }
.kpc-ir-page a.kpc-irh-btn.is-ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); box-shadow: none; color: #e9ecee; backdrop-filter: blur(8px); }
.kpc-ir-page a.kpc-irh-btn.is-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(238, 51, 66, .55); }

.kpc-irh-panel {
    position: relative; padding: 30px 28px;
    background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.14); border-radius: var(--kpc-irb-radius);
    backdrop-filter: blur(20px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.kpc-irh-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 102, 113, .8), transparent); }
.kpc-irh-panel-label { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: #979ca0; font-size: var(--fs-2xs, 11px); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.kpc-irh-panel-label i { color: var(--kpc-irb-red-2); }
.kpc-irh-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.kpc-irh-stat:last-of-type { border-bottom: 0; }
.kpc-irh-stat-label { color: #a9aeb2; font-size: var(--fs-sm, 14px); font-weight: 500; }
.kpc-irh-stat-value { font-family: var(--kpc-irb-serif); font-size: var(--fs-stat, 32px); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.kpc-irh-stat-value small { margin-left: 6px; font-family: Inter, sans-serif; font-size: var(--fs-xs, 13px); font-weight: 600; }
.kpc-irh-stat-value small.is-up { color: #5fd98d; }
.kpc-irh-stat-value small.is-down { color: #ff8a93; }
a.kpc-irh-stat.is-link { align-items: center; transition: color .2s ease; }
a.kpc-irh-stat.is-link .kpc-irh-stat-label { color: #e4e7e9; line-height: 1.45; }
a.kpc-irh-stat.is-link .kpc-irh-stat-label i { color: var(--kpc-irb-red-2); margin-right: 6px; }
a.kpc-irh-stat.is-link > i { color: #7c8286; font-size: 12px; transition: transform .2s ease, color .2s ease; }
a.kpc-irh-stat.is-link:hover > i { color: var(--kpc-irb-red-2); transform: translateX(3px); }
.kpc-irh-empty { color: #a9aeb2; font-size: var(--fs-sm, 14px); margin: 0; }
.kpc-ir-page a.kpc-irh-nse { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: rgba(238, 51, 66, .1); border: 1px solid rgba(238, 51, 66, .25); color: #d4d7da; font-size: var(--fs-xs, 13px); text-decoration: none; }
.kpc-ir-page a.kpc-irh-nse strong { color: #fff; letter-spacing: .04em; white-space: nowrap; }

/* Tab bars — icons, muted text, red underline */
.kpc-ir-page .kpc-irnav,
.kpc-ir-content.has-subtabs .kpc-tabs-bar {
    background: rgba(247, 247, 248, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--kpc-irb-line); box-shadow: none;
}
.kpc-ir-page .kpc-irnav-list { justify-content: flex-start; gap: 0 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.kpc-ir-page .kpc-irnav-list::-webkit-scrollbar { display: none; }
.kpc-ir-page .kpc-irnav .kpc-irnav-link,
.kpc-ir-content.has-subtabs .kpc-tabs .kpc-tabs-tab {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    padding: 19px 18px; color: var(--kpc-irb-muted); font-size: var(--fs-sm, 14px); font-weight: 600; letter-spacing: .005em;
}
.kpc-ir-page .kpc-irnav .kpc-irnav-link i { font-size: 13px; opacity: .7; }
.kpc-ir-page .kpc-irnav .kpc-irnav-link::after {
    content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2.5px; border-radius: 2px;
    background: linear-gradient(90deg, var(--kpc-irb-red), var(--kpc-irb-red-2));
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.kpc-ir-page .kpc-irnav .kpc-irnav-link:hover,
.kpc-ir-content.has-subtabs .kpc-tabs .kpc-tabs-tab:hover { color: var(--kpc-irb-ink); }
.kpc-ir-page .kpc-irnav-item.is-current > .kpc-irnav-link,
.kpc-ir-content.has-subtabs .kpc-tabs .kpc-tabs-tab.is-active { color: var(--kpc-irb-ink); }
.kpc-ir-page .kpc-irnav-item.is-current > .kpc-irnav-link i { opacity: 1; color: var(--kpc-irb-red); }
.kpc-ir-page .kpc-irnav-item.is-current > .kpc-irnav-link::after { transform: scaleX(1); }
.kpc-ir-content.has-subtabs .kpc-tabs--align-center .kpc-tabs-nav { justify-content: flex-start; }
.kpc-ir-content.has-subtabs .kpc-tabs--underline .kpc-tabs-tab::after { left: 18px; right: 18px; background: linear-gradient(90deg, var(--kpc-irb-red), var(--kpc-irb-red-2)); height: 2.5px; transform-origin: left; }

/* Section head */
.kpc-irb-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--kpc-irb-line); }
.kpc-irb-head h2 { margin: 0; font-family: var(--kpc-irb-serif); font-size: var(--kpc-heading-size); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--kpc-irb-ink); }
.kpc-irb-head h2 em { font-style: italic; font-weight: 500; color: var(--kpc-irb-red); }
.kpc-irb-head p { margin: 8px 0 0; max-width: 560px; color: var(--kpc-irb-muted); font-size: var(--fs-base, 16px); }

/* Bento grid */
.kpc-irb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.kpc-irb-4 { grid-column: span 4; }
.kpc-irb-8 { grid-column: span 8; }
.kpc-irb-12 { grid-column: span 12; }
.kpc-irb-7 { grid-column: span 7; }
.kpc-irb-5 { grid-column: span 5; }
.kpc-irb-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    padding: 30px 28px; background: #fff; border: 1px solid var(--kpc-irb-line); border-radius: var(--kpc-irb-radius);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    animation: kpcIrbIn .7s ease both; animation-delay: calc(var(--i, 0) * .06s);
}
.kpc-irb-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -25px rgba(4, 7, 7, .28); border-color: #dcdee1; }
@keyframes kpcIrbIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.kpc-irb-card.is-dark { background: linear-gradient(160deg, #151b1c, #040707); border-color: rgba(255,255,255,.08); color: #fff; }
.kpc-irb-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; background: linear-gradient(145deg, #fdeef0, #fbdde0); color: var(--kpc-irb-red); font-size: 18px; }
.kpc-irb-card.is-dark .kpc-irb-icon { background: rgba(238, 51, 66, .16); color: var(--kpc-irb-red-2); }
.kpc-irb-title { margin: 0 0 6px; font-family: var(--kpc-irb-serif); font-size: var(--fs-xl, 22px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--kpc-irb-ink); }
.kpc-irb-card.is-dark .kpc-irb-title { color: #fff; }
.kpc-irb-sub { margin: 0 0 20px; color: var(--kpc-irb-muted); font-size: var(--fs-sm, 14px); font-weight: 500; }
.kpc-irb-card.is-dark .kpc-irb-sub { color: #979ca0; }
.kpc-irb-text, .kpc-irb-empty { color: var(--kpc-irb-muted); font-size: var(--fs-sm, 14px); line-height: 1.6; margin: 0 0 12px; }
.kpc-irb-card.is-dark .kpc-irb-empty { color: #979ca0; }

.kpc-ir-page a.kpc-irb-row {
    display: flex; align-items: center; gap: 13px; padding: 12px 0;
    border-bottom: 1px dashed #e7e8ea; color: var(--kpc-irb-ink-3); font-size: var(--fs-sm, 14px); font-weight: 500; text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
}
.kpc-ir-page a.kpc-irb-row:last-child { border-bottom: 0; }
.kpc-ir-page a.kpc-irb-row:hover { color: var(--kpc-irb-red); padding-left: 5px; }
.kpc-irb-lead { width: 16px; flex-shrink: 0; color: var(--kpc-irb-red); font-size: var(--fs-sm, 14px); text-align: center; }
.kpc-irb-row-text { flex: 1; min-width: 0; }
.kpc-irb-badge { margin-left: auto; flex-shrink: 0; padding: 4px 10px; border-radius: 30px; background: #f1f2f3; color: #4b5156; font-size: var(--fs-2xs, 11px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.kpc-irb-badge.is-new { background: #fdecee; color: var(--primary-dark); }
.kpc-ir-page a.kpc-irb-row.kpc-irb-more { margin-top: auto; font-weight: 600; color: var(--kpc-irb-ink); }
.kpc-irb-card.is-dark a.kpc-irb-row { color: #d5d8da; border-bottom-color: rgba(255,255,255,.08); }
.kpc-irb-card.is-dark a.kpc-irb-row:hover { color: var(--kpc-irb-red-2); }
.kpc-irb-card.is-dark a.kpc-irb-row.kpc-irb-more { color: #fff; }
.kpc-irb-card.is-dark .kpc-irb-lead { color: var(--kpc-irb-red-2); }

.kpc-irb-donut-wrap { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
.kpc-irb-donut { position: relative; flex-shrink: 0; width: 110px; height: 110px; border-radius: 50%; }
.kpc-irb-donut::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #fff; }
.kpc-irb-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-xs, 13px); }
.kpc-irb-legend div { display: flex; align-items: center; gap: 8px; color: var(--kpc-irb-ink-3); font-weight: 500; }
.kpc-irb-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.kpc-irb-pct { margin-left: auto; font-weight: 700; color: var(--kpc-irb-ink); }

.kpc-irb-cal { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.kpc-irb-cal-date { width: 54px; flex-shrink: 0; padding: 6px 0; text-align: center; border-radius: 12px; background: rgba(238, 51, 66, .12); border: 1px solid rgba(238, 51, 66, .28); }
.kpc-irb-cal-date .d { display: block; font-family: var(--kpc-irb-serif); font-size: var(--fs-lg, 18px); font-weight: 700; line-height: 1; color: var(--kpc-irb-red-2); }
.kpc-irb-cal-date .m { display: block; margin-top: 2px; font-size: var(--fs-2xs, 11px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #979ca0; }
.kpc-irb-cal .t { font-size: var(--fs-sm, 14px); font-weight: 600; color: #fff; }
.kpc-irb-cal .s { margin-top: 2px; font-size: var(--fs-xs, 13px); color: #979ca0; }

.kpc-irb-contact { display: flex; gap: 13px; align-items: flex-start; padding: 10px 0; font-size: var(--fs-sm, 14px); }
.kpc-irb-contact > i { width: 16px; margin-top: 4px; color: var(--kpc-irb-red-2); }
.kpc-irb-contact strong { display: block; color: #fff; font-size: var(--fs-xs, 13px); font-weight: 600; }
.kpc-irb-contact span, .kpc-ir-page .kpc-irb-contact a { color: #a9aeb2; font-size: var(--fs-sm, 14px); text-decoration: none; }
.kpc-ir-page .kpc-irb-contact a:hover { color: #fff; }
.kpc-irb-reg { display: flex; align-items: center; gap: 13px; margin: 8px 0; padding: 13px 15px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: .2s; }
.kpc-irb-reg:hover { background: rgba(255,255,255,.08); border-color: rgba(238, 51, 66, .4); }
.kpc-irb-reg .ic { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: rgba(238, 51, 66, .16); color: var(--kpc-irb-red-2); font-size: var(--fs-xs, 13px); }
.kpc-irb-reg .n { color: #fff; font-size: var(--fs-sm, 14px); font-weight: 600; }
.kpc-irb-reg .d { color: #979ca0; font-size: var(--fs-xs, 13px); }

.kpc-irb-news { display: grid; grid-template-columns: 1fr; gap: 0; }
.kpc-irb-news .kpc-irb-news-row { padding: 16px 0; border-bottom: 1px solid var(--kpc-irb-line); }
.kpc-irb-news .kpc-irb-news-row:last-child { border-bottom: 0; }
.kpc-ir-page a.kpc-irb-news-row { display: flex; gap: 16px; align-items: flex-start; text-decoration: none; }
.kpc-irb-news-thumb { display: grid; place-items: center; flex-shrink: 0; width: 76px; height: 64px; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg, #232a2b, #0b1011); color: rgba(255,255,255,.4); }
.kpc-irb-news-thumb img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.kpc-irb-news-meta { display: block; margin-bottom: 4px; color: var(--kpc-irb-red); font-size: var(--fs-2xs, 11px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.kpc-irb-news-title { display: block; color: var(--kpc-irb-ink); font-size: var(--fs-base, 16px); font-weight: 600; line-height: 1.35; }
.kpc-ir-page a.kpc-irb-news-row:hover .kpc-irb-news-title { color: var(--kpc-irb-red); }
.kpc-irb-news-date { display: block; margin-top: 4px; color: var(--kpc-irb-muted); font-size: var(--fs-xs, 13px); }

.kpc-irb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kpc-ir-page a.kpc-irb-tile { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border: 1px solid var(--kpc-irb-line); border-radius: 14px; color: var(--kpc-irb-ink); font-weight: 600; font-size: var(--fs-sm, 14px); text-decoration: none; transition: .2s; }
.kpc-ir-page a.kpc-irb-tile:hover { border-color: var(--kpc-irb-red); color: var(--kpc-irb-red); }

.kpc-irb-cta {
    grid-column: span 12; position: relative; overflow: hidden;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 32px;
    padding: 48px; border-radius: var(--kpc-irb-radius); border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(120deg, #0b1011 0%, #151b1c 60%, #2a1113 100%);
    animation: kpcIrbIn .7s ease both; animation-delay: calc(var(--i, 0) * .06s);
}
.kpc-irb-cta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(238, 51, 66, .3), transparent 65%); pointer-events: none; }
.kpc-irb-cta > * { position: relative; z-index: 1; }
.kpc-irb-cta h3 { margin: 0 0 6px; font-family: var(--kpc-irb-serif); font-size: var(--fs-3xl, 36px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.kpc-irb-cta h3 em { font-style: italic; font-weight: 500; color: var(--kpc-irb-red-2); }
.kpc-irb-cta p { margin: 0; max-width: 540px; color: #b7bcbf; font-size: var(--fs-base, 16px); }

.is-ir-home .kpc-ir-content { padding-top: 56px; }

@media (max-width: 1080px) {
    .kpc-irh-inner { grid-template-columns: 1fr; gap: 44px; }
    .kpc-irb { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .kpc-irb-4, .kpc-irb-8, .kpc-irb-7, .kpc-irb-5 { grid-column: span 6; }
    .kpc-irb-12, .kpc-irb-cta { grid-column: span 6; }
    .kpc-irb-news { grid-template-columns: 1fr; gap: 16px; }
}
@media (min-width: 700px) and (max-width: 1080px) {
    .kpc-irb-4 { grid-column: span 3; }
}
@media (max-width: 640px) {
    .kpc-irh { padding: 120px 0 64px; }
    .kpc-irb { grid-template-columns: 1fr; gap: 16px; }
    .kpc-irb-4, .kpc-irb-8, .kpc-irb-7, .kpc-irb-5, .kpc-irb-12, .kpc-irb-cta { grid-column: span 1; }
    .kpc-irb-card { padding: 24px 20px; }
    .kpc-irb-cta { padding: 32px 24px; }
    .kpc-ir-page .kpc-irnav .kpc-irnav-link, .kpc-ir-content.has-subtabs .kpc-tabs .kpc-tabs-tab { padding: 16px 13px; font-size: var(--fs-sm, 14px); }
}
@media (prefers-reduced-motion: reduce) {
    .kpc-irb-card, .kpc-irb-cta { animation: none; }
}

.kpc-ir-content.has-subtabs .kpc-tabs .kpc-tabs-tab i { font-size: 13px; opacity: .7; }
.kpc-ir-content.has-subtabs .kpc-tabs .kpc-tabs-tab.is-active i { opacity: 1; color: var(--kpc-irb-red); }
.kpc-ir-page .kpc-docs-toolbar { background: #fff; border: 1px solid var(--kpc-irb-line); }

/* Investor Relations: no decorative icons in the hero, cards or lists. */
.kpc-irb-icon,
.kpc-irb-lead,
.kpc-irh-eyebrow i,
.kpc-irh-panel-label i,
.kpc-irh-btn i,
.kpc-irh-stat-label i,
.kpc-irb-contact > i,
.kpc-irb-reg .ic { display: none !important; }
.kpc-ir-page a.kpc-irb-row { gap: 12px; }
.kpc-irb-contact { gap: 0; }
.kpc-irb-reg { padding: 12px 16px; }
.kpc-irb-title { margin-top: 2px; }

/* Investor Relations sub-pages: breadcrumb banner like the rest of the site */
.kpc-ir-page .kpc-ir-hero { justify-content: flex-start; align-items: flex-end; text-align: left; min-height: 340px; padding: 140px 0 44px; }
.kpc-ir-page .kpc-ir-hero .container { width: 100%; }
.kpc-ir-page .kpc-ir-crumbs { margin-bottom: 14px; }
.kpc-ir-page .kpc-ir-hero-title { font-family: inherit; font-size: var(--kpc-heading-size); font-weight: 700; letter-spacing: -1px; }
@media (max-width: 767px) {
    .kpc-ir-page .kpc-ir-hero { min-height: 260px; padding: 110px 0 32px; }
}

/* Investor Relations banners — same look as the homepage hero: the full-colour
   photo with the homepage's dark gradient, no grid squares or red glow. */
.kpc-irh,
.kpc-ir-page .kpc-ir-hero { background: var(--secondary-color); }
.kpc-irh::before,
.kpc-ir-page .kpc-ir-hero::before {
    -webkit-mask-image: none; mask-image: none;
    background-size: auto;
    background-image:
        linear-gradient(160deg, rgba(4, 7, 7, .80) 0%, rgba(4, 7, 7, .30) 42%, rgba(4, 7, 7, 0) 72%),
        linear-gradient(100deg, rgba(4, 7, 7, .92) 0%, rgba(4, 7, 7, .70) 30%, rgba(4, 7, 7, .28) 62%, rgba(4, 7, 7, 0) 88%);
}
.kpc-irh::after,
.kpc-ir-page .kpc-ir-hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(4, 7, 7, .62) 0%, rgba(4, 7, 7, .22) 45%, rgba(4, 7, 7, 0) 100%);
}
.kpc-irh-bg,
.kpc-ir-page .kpc-ir-hero .kpc-page-hero-bg { opacity: 1; mix-blend-mode: normal; filter: none; }
.kpc-ir-page .kpc-ir-hero > .container { position: relative; z-index: 2; }

/* IR home banner — homepage hero typography, label and buttons */
.kpc-irh .kpc-irh-kicker { display: inline-flex; margin-bottom: 18px; color: var(--primary-color); }
.kpc-irh-title { font-family: inherit; font-size: var(--kpc-heading-size); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.kpc-irh-accent { font-style: normal; font-weight: 800; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--primary-color); }
.kpc-irh-lede { color: rgba(255, 255, 255, .82); }
.kpc-ir-page a.btn-kpc { text-decoration: none; }
.kpc-ir-page a.kpc-irh-btn-ghost { color: var(--white); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .45); }
.kpc-ir-page a.kpc-irh-btn-ghost:hover { color: var(--secondary-color); background: var(--white); border-color: var(--white); transform: translateY(-2px); }
.kpc-ir-page .kpc-ir-hero-title { font-weight: 800; }
@media (min-width: 992px) {
    .kpc-irh .kpc-irh-kicker { margin-bottom: 14px; }
}
.kpc-irh-stat-value { font-family: inherit; font-weight: 800; }

/* =========================================================
   Footer (2.15): four equal link columns (Investor Relations first),
   no contact row, centred social icons.
   ========================================================= */
.kpc-footer-main { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 36px; border-bottom: 0; }
.kpc-footer-socials.kpc-footer-socials--center {
    justify-content: center;
    margin: 0;
    padding: 28px 0 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 991px) {
    .kpc-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .kpc-footer-socials.kpc-footer-socials--center { padding: 24px 0 28px; }
}

/* 2.20.1 — the rewritten hero title runs to two lines on desktop: no
   pull-up (it made the title overlap the description), and room for a
   three-line description so the new intro isn't cut off. */
.kpc-hero-title { min-height: 0; }
@media (min-width: 992px) {
    .kpc-hero-title { margin-bottom: 18px !important; }
}
.kpc-hero-description { -webkit-line-clamp: 4; min-height: 0; max-width: 720px; }


/* ---------- 2.26.0 — justified body text across the site ---------- */
/* Text in the page content is justified; anything a widget or section
 * sets its own alignment for (e.g. centred Elementor text) keeps it. */
#main-content { text-align: justify; }
#main-content :where(p, li, dd, td, blockquote) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* Headings, buttons and form controls stay left-aligned (justified short lines look broken). */
:where(#main-content) :where(h1, h2, h3, h4, h5, h6, button, label, th, figcaption, input, select, textarea, .elementor-widget-heading, .elementor-button, .ks-tab, .ks-nav) { text-align: left; }
/* …unless they sit in a section that centres its content. */
:where(#main-content) :where([class*="-align-center"], .kpc-not-found, .kpc-docs-empty, .kep-feats, .kep-noevent, .kir-cal, .kpc-irb-cal-date, .elementor-align-center) :where(h1, h2, h3, h4, h5, h6, button, label, .elementor-button) { text-align: inherit; }
/* Banners keep left-aligned text. */
:where(#main-content) :where([class*="hero"], .ks-tabnav, .ks-sdg-back) { text-align: left; }
:where(#main-content) :where(.ks-sdg-back p) { text-align: justify; }
/* Homepage "Discover KPC" intro: body text (a paragraph, not a heading), justified. */
.kpc-discover-head h2, .kpc-discover-head .kpc-discover-text { max-width: 640px; margin: 0; color: var(--text-primary); font-size: var(--fs-lg, 18px); font-weight: 400; line-height: 1.65; letter-spacing: 0; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }


/* ---------- 2.27.0 — optional second hero button (outline on the photo) ---------- */
.btn-kpc-ghost { color: var(--white); background: transparent; border-color: rgba(255, 255, 255, 0.75); }
.btn-kpc-ghost:hover, .btn-kpc-ghost:focus-visible { color: var(--secondary-color); background: var(--white); border-color: var(--white); transform: translateY(-2px); }


/* ---------- 2.27.2 — hero progress bars: 4 in view on desktop ----------
 * With more than four slides, the strip shows four bars at a time and
 * slides along with the slider (main.js sets --kpc-bar-offset). Mobile
 * keeps its own two-at-a-time behaviour. */
@media (min-width: 992px) {
    .kpc-hero .kpc-hero-progress-track.is-windowed {
        --kpc-bar-gap: 16px;
        gap: var(--kpc-bar-gap);
        overflow: hidden;
        /* room for the focus ring so it isn't clipped */
        padding: 4px;
        margin: -4px;
    }
    .kpc-hero .kpc-hero-progress-track.is-windowed .kpc-hero-bar {
        flex: 0 0 calc((100% - (var(--kpc-bars-in-view, 4) - 1) * var(--kpc-bar-gap)) / var(--kpc-bars-in-view, 4));
        transform: translateX(calc(var(--kpc-bar-offset, 0) * (-100% - var(--kpc-bar-gap))));
        transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
    }
    .kpc-hero .kpc-hero-progress-track.is-windowed .kpc-hero-bar.is-out-of-view {
        opacity: 0;
        pointer-events: none;
    }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .kpc-hero .kpc-hero-progress-track.is-windowed .kpc-hero-bar { transition: none; }
}