/* ==========================================================================
   K.E.T College of Teacher Education — Design System
   --------------------------------------------------------------------------
   A single, reusable stylesheet shared across every page.
   Table of contents:
     1.  Design tokens (CSS custom properties)
     2.  Reset & base elements
     3.  Typography helpers
     4.  Layout: container, section, section headers
     5.  Buttons
     6.  Top bar
     7.  Header / primary navigation + dropdowns + mega menu
     8.  Mobile drawer + accordions
     9.  Page hero + breadcrumb
     10. Cards (feature, program, facility, contact, info)
     11. Statistics counters
     12. Timeline
     13. Accordion / FAQ
     14. Gallery + lightbox
     15. Tables (responsive)
     16. Forms
     17. Footer
     18. Notice dialog
     19. Utilities & helpers
     20. Legacy content skin (styles the original theme markup on inner pages)
     21. Responsive breakpoints
     22. Motion & accessibility preferences
   ========================================================================== */

/* 1. DESIGN TOKENS ========================================================= */
:root {
    /* Brand palette — navy & gold */
    --navy-50:  #f0f4fa;
    --navy-100: #dce5f2;
    --navy-200: #b9cbe4;
    --navy-300: #8fa9cf;
    --navy-400: #5f7fb4;
    --navy-500: #3d5e99;
    --navy-600: #28477e;
    --navy-700: #1b3563;
    --navy-800: #122b5c;
    --navy-900: #0a1f44;
    --navy-950: #061530;

    --gold-100: #f7efd4;
    --gold-200: #eedfa8;
    --gold-300: #e3cb74;
    --gold-400: #d6b84a;
    --gold-500: #c9a227;
    --gold-600: #b08d1f;
    --gold-700: #8f721a;

    --ink:      #1e293b;   /* slate-800 body text */
    --ink-soft: #475569;   /* slate-600 */
    --muted:    #64748b;   /* slate-500 */
    --line:     #e2e8f0;   /* slate-200 hairline */
    --surface:  #ffffff;
    --surface-2:#f8fafc;   /* slate-50 */
    --surface-3:#f1f5f9;   /* slate-100 */

    /* Typography */
    --font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(6, 21, 48, .06), 0 1px 3px rgba(6, 21, 48, .10);
    --shadow-md: 0 4px 6px rgba(6, 21, 48, .05), 0 10px 20px rgba(6, 21, 48, .08);
    --shadow-lg: 0 12px 28px rgba(6, 21, 48, .12), 0 4px 10px rgba(6, 21, 48, .07);
    --shadow-xl: 0 24px 50px rgba(6, 21, 48, .18);

    /* Layout */
    --container: 1200px;
    --gutter: clamp(1rem, 4vw, 2rem);
    --header-h: 96px;
    --topbar-h: 44px;

    --transition: .25s cubic-bezier(.4, 0, .2, 1);
}

/* 2. RESET & BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Force a 16px root so rem-based sizing is identical on every page.
   (Bootstrap 3, still loaded on inner pages for its grid, sets html to 10px,
   which otherwise shrinks the whole design system to 62.5%.) */
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: var(--navy-700); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-600); }

h1, h2, h3, h4, h5 { font-family: var(--font-serif); color: var(--navy-900); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; }

/* Focus: no ring for mouse/touch (removes the black outline that appears on
   click — Bootstrap draws it via a:focus on inner pages), keep a clear gold
   ring for keyboard users only, so the site stays accessible. */
:focus:not(:focus-visible) { outline: none; }
a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [tabindex]:focus { outline: none; }
:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: 4px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Skip link (accessibility) */
.ket-skip {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--gold-500); color: var(--navy-950); font-weight: 600;
    padding: .75rem 1.25rem; border-radius: var(--r-sm);
}
.ket-skip:focus { left: .5rem; top: .5rem; color: var(--navy-950); }

/* 3. TYPOGRAPHY HELPERS ==================================================== */
.ket-eyebrow {
    display: inline-block; font-family: var(--font-sans); font-weight: 600;
    font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold-700); margin-bottom: .75rem;
}
.ket-eyebrow--light { color: var(--gold-400); }
.ket-lead { font-size: 1.075rem; color: var(--ink-soft); }
.ket-title { font-size: clamp(1.75rem, 3.5vw, 2.6rem); }

/* 4. LAYOUT ================================================================ */
.ket-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.ket-section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.ket-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.ket-section--alt { background: var(--surface-2); }
.ket-section--navy { background: var(--navy-900); color: var(--navy-100); }
.ket-section--navy h2, .ket-section--navy h3 { color: #fff; }

.ket-section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ket-section__head--center { margin-inline: auto; text-align: center; }

.ket-grid { display: grid; gap: 1.5rem; }
.ket-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ket-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ket-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* 5. BUTTONS =============================================================== */
.ket-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-sans); font-weight: 600; font-size: .95rem;
    padding: .85rem 1.6rem; border-radius: var(--r-sm); border: 1.5px solid transparent;
    cursor: pointer; transition: var(--transition); text-align: center; line-height: 1.2;
}
.ket-btn svg { width: 1.05em; height: 1.05em; }
.ket-btn--primary { background: var(--gold-500); color: var(--navy-950); }
.ket-btn--primary:hover { background: var(--gold-400); color: var(--navy-950); transform: translateY(-1px); }
.ket-btn--dark { background: var(--navy-900); color: #fff; }
.ket-btn--dark:hover { background: var(--navy-800); color: #fff; transform: translateY(-1px); }
.ket-btn--ghost { background: transparent; color: var(--navy-800); border-color: var(--navy-200); }
.ket-btn--ghost:hover { border-color: var(--gold-500); color: var(--gold-700); }
.ket-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.ket-btn--ghost-light:hover { border-color: var(--gold-400); color: var(--gold-300); }
.ket-btn--sm { padding: .6rem 1.15rem; font-size: .875rem; }
.ket-btn--lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.ket-btn--block { display: flex; width: 100%; justify-content: center; }

/* 6. TOP BAR =============================================================== */
.ket-topbar { background: var(--navy-950); color: var(--navy-100); font-size: .82rem; }
.ket-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; padding-block: .4rem; }
.ket-topbar__affil { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ket-topbar__affil strong { color: var(--gold-400); font-weight: 600; }
.ket-topbar__affil span { color: var(--navy-400); margin-inline: .5rem; }
.ket-topbar__contact { display: flex; gap: 1.5rem; flex-shrink: 0; }
.ket-topbar__contact a { display: inline-flex; align-items: center; gap: .45rem; color: var(--navy-100); }
.ket-topbar__contact a:hover { color: var(--gold-300); }
.ket-topbar__contact svg { width: 15px; height: 15px; color: var(--gold-400); }

/* 7. HEADER / NAV ========================================================== */
.ket-header {
    position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--navy-100);
    transition: box-shadow var(--transition);
}
.ket-header.is-scrolled { box-shadow: var(--shadow-md); }
.ket-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); }

.ket-brand { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.ket-brand__logo { width: 62px; height: 62px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(10,31,68,.18)); }
.ket-brand__text { display: flex; flex-direction: column; min-width: 0; }
.ket-brand__name { font-family: var(--font-serif); font-weight: 700; color: var(--navy-900); font-size: 1.13rem; line-height: 1.15; }
.ket-brand__sub { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); font-weight: 600; margin-top: 3px; }

.ket-nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.ket-nav__item { position: relative; }
.ket-nav__link {
    display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-sans);
    font-weight: 500; font-size: .92rem; color: var(--navy-800);
    padding: .6rem .85rem; border-radius: var(--r-sm); background: none; border: 0; cursor: pointer;
    transition: var(--transition);
}
.ket-nav__link:hover, .ket-nav__toggle:hover { color: var(--gold-700); background: var(--navy-50); }
.ket-nav__link--active { color: var(--gold-700); font-weight: 600; }
.ket-nav__link svg { width: 16px; height: 16px; transition: transform var(--transition); }
.ket-nav__item:hover .ket-nav__toggle svg, .ket-nav__item:focus-within .ket-nav__toggle svg { transform: rotate(180deg); }

.ket-dropdown {
    position: absolute; top: 100%; left: 0; padding-top: .6rem; min-width: 16rem;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.ket-nav__item:hover .ket-dropdown, .ket-nav__item:focus-within .ket-dropdown,
.ket-nav__item.is-open .ket-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.ket-nav__item.is-open .ket-nav__toggle svg { transform: rotate(180deg); }
.ket-dropdown__panel { background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg); border: 1px solid var(--navy-100); padding: .5rem; }
.ket-dropdown ul { list-style: none; margin: 0; padding: 0; }
.ket-dropdown a { display: block; padding: .6rem .85rem; border-radius: var(--r-sm); font-size: .9rem; color: var(--navy-800); font-weight: 500; }
.ket-dropdown a:hover { background: var(--navy-50); color: var(--gold-700); }
.ket-dropdown__notice { display: block; width: 100%; text-align: left; padding: .6rem .85rem; border: 0; background: none; border-radius: var(--r-sm); font: inherit; font-size: .9rem; font-weight: 600; color: var(--gold-700); cursor: pointer; }
.ket-dropdown__notice:hover { background: var(--navy-50); }

/* Mega panel (Campus Life) */
.ket-mega { left: auto; right: 0; }
.ket-mega .ket-dropdown__panel { display: grid; grid-template-columns: repeat(3, minmax(11rem, 1fr)); gap: 1.5rem; padding: 1.5rem; width: 42rem; }
.ket-mega__title { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; padding: 0 .5rem .4rem; margin: 0; }

.ket-header__actions { display: flex; align-items: center; gap: .6rem; }

/* Hamburger */
.ket-hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: none; color: var(--navy-900); border-radius: var(--r-sm); cursor: pointer; }
.ket-hamburger:hover { background: var(--navy-50); }
.ket-hamburger svg { width: 26px; height: 26px; }

/* 8. MOBILE DRAWER ========================================================= */
.ket-drawer-overlay { position: fixed; inset: 0; z-index: 45; background: rgba(6,21,48,.6); opacity: 0; pointer-events: none; transition: opacity var(--transition); }
.ket-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.ket-drawer {
    position: fixed; top: 0; right: 0; z-index: 50; height: 100%; width: 340px; max-width: 86vw;
    background: #fff; box-shadow: var(--shadow-xl); transform: translateX(100%);
    transition: transform var(--transition); overflow-y: auto; overscroll-behavior: contain;
}
.ket-drawer.is-open { transform: translateX(0); }
.ket-drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: 1.25rem; border-bottom: 1px solid var(--navy-100); }
.ket-drawer__title { font-family: var(--font-serif); font-weight: 700; color: var(--navy-900); }
.ket-drawer__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: var(--r-sm); color: var(--navy-900); cursor: pointer; }
.ket-drawer__close:hover { background: var(--navy-50); }
.ket-drawer__close svg { width: 24px; height: 24px; }
.ket-drawer__nav { padding: 1rem; }
.ket-drawer__link { display: block; padding: .8rem .75rem; border-radius: var(--r-sm); font-weight: 500; color: var(--navy-900); border-top: 1px solid var(--surface-3); }
.ket-drawer__link:first-child { border-top: 0; }
.ket-drawer__link:hover { background: var(--navy-50); }
.ket-acc { border-top: 1px solid var(--surface-3); }
.ket-acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: .8rem .75rem; border: 0; background: none; font: inherit; font-weight: 500; color: var(--navy-900); border-radius: var(--r-sm); cursor: pointer; }
.ket-acc__btn:hover { background: var(--navy-50); }
.ket-acc__btn svg { width: 16px; height: 16px; transition: transform var(--transition); }
.ket-acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ket-acc__panel { display: none; padding: 0 .5rem .5rem 1rem; }
.ket-acc__panel.is-open { display: block; }
.ket-acc__panel a { display: block; padding: .55rem .75rem; border-radius: var(--r-sm); font-size: .9rem; color: var(--ink-soft); }
.ket-acc__panel a:hover { background: var(--navy-50); color: var(--gold-700); }
.ket-drawer__actions { margin-top: 1rem; padding: 0 .25rem; display: grid; gap: .75rem; }

/* 9. PAGE HERO + BREADCRUMB =============================================== */
.ket-page-hero { position: relative; background: linear-gradient(120deg, var(--navy-950), var(--navy-800)); color: #fff; padding-block: clamp(3rem, 7vw, 5rem); overflow: hidden; }
.ket-page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% -20%, rgba(201,162,39,.22), transparent 45%); pointer-events: none; }
.ket-page-hero__inner { position: relative; text-align: center; }
.ket-page-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 1rem; }
.ket-breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.ket-breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; color: var(--navy-200); }
.ket-breadcrumb li:not(:first-child)::before { content: "/"; color: var(--navy-400); }
.ket-breadcrumb a { color: var(--gold-300); font-weight: 500; }
.ket-breadcrumb a:hover { color: #fff; }

/* 10. CARDS ================================================================ */
.ket-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.75rem; transition: var(--transition); height: 100%; display: flex; flex-direction: column; }
.ket-card:hover { border-color: var(--gold-300); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.ket-card__icon { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--navy-50); color: var(--navy-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; transition: var(--transition); }
.ket-card:hover .ket-card__icon { background: var(--gold-100); color: var(--gold-700); }
.ket-card__icon svg { width: 26px; height: 26px; }
.ket-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.ket-card p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1rem; }
.ket-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--gold-700); }
.ket-card__link svg { width: 16px; height: 16px; transition: transform var(--transition); }
.ket-card:hover .ket-card__link svg { transform: translateX(4px); }

/* Media card (facility: image + body) */
.ket-media-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: var(--transition); height: 100%; display: flex; flex-direction: column; }
.ket-media-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--gold-300); }
.ket-media-card__img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: var(--surface-3); }
.ket-media-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.ket-media-card__body h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.ket-media-card__body p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1rem; }

/* 11. STAT COUNTERS ======================================================= */
.ket-stats { background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.ket-stat { padding: clamp(1.5rem, 3vw, 2.25rem); text-align: center; border-left: 1px solid var(--line); }
.ket-stat:first-child { border-left: 0; }
.ket-stat__num { font-family: var(--font-serif); font-weight: 800; font-size: clamp(2rem, 4vw, 2.75rem); color: var(--navy-900); line-height: 1; }
.ket-stat__num .ket-stat__suffix { color: var(--gold-600); }
.ket-stat__label { margin-top: .5rem; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* 12. TIMELINE ============================================================= */
.ket-timeline { position: relative; margin: 0; padding: 0 0 0 2rem; list-style: none; }
.ket-timeline::before { content: ""; position: absolute; left: 7px; top: .4rem; bottom: .4rem; width: 2px; background: var(--navy-100); }
.ket-timeline__item { position: relative; padding: 0 0 2rem; }
.ket-timeline__item:last-child { padding-bottom: 0; }
.ket-timeline__item::before { content: ""; position: absolute; left: -2rem; top: .3rem; width: 16px; height: 16px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px var(--gold-100); }
.ket-timeline__year { font-family: var(--font-sans); font-weight: 700; color: var(--gold-700); font-size: .85rem; letter-spacing: .05em; }
.ket-timeline__item h3 { font-size: 1.15rem; margin: .2rem 0 .35rem; }
.ket-timeline__item p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* 13. ACCORDION / FAQ ===================================================== */
.ket-faq { max-width: 52rem; }
.ket-faq__item { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: .85rem; background: #fff; overflow: hidden; }
.ket-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1.15rem 1.35rem; border: 0; background: none; font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--navy-900); cursor: pointer; }
.ket-faq__q:hover { color: var(--gold-700); }
.ket-faq__q svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--transition); color: var(--gold-600); }
.ket-faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.ket-faq__a { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.ket-faq__a-inner { padding: 0 1.35rem 1.25rem; color: var(--ink-soft); }

/* 14. GALLERY + LIGHTBOX =================================================== */
/* Masonry photo layout — varied heights instead of a uniform grid */
.ket-gallery { column-count: 3; column-gap: 1.25rem; }
.ket-gallery__item { position: relative; display: block; width: 100%; margin: 0 0 1.25rem; break-inside: avoid; border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in; border: 0; padding: 0; background: var(--surface-3); box-shadow: 0 2px 10px rgba(6,21,48,.08); transition: transform .35s ease, box-shadow .35s ease; }
.ket-gallery__item img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.ket-gallery__item::before { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--gold-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061530' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cpath d='M11 8v6'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E") center / 20px 20px no-repeat; opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .35s ease; z-index: 2; box-shadow: 0 4px 14px rgba(6,21,48,.35); }
.ket-gallery__item:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(6,21,48,.18); }
.ket-gallery__item:hover::before { opacity: 1; transform: scale(1); }

/* College videos */
.ket-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.ket-video { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: .75rem .75rem 1.1rem; box-shadow: 0 2px 10px rgba(6,21,48,.06); transition: transform .35s ease, box-shadow .35s ease; }
.ket-video:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(6,21,48,.14); }
.ket-video video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-md); display: block; }
.ket-video figcaption { margin-top: .85rem; text-align: center; font-family: var(--font-serif); font-weight: 700; color: var(--navy-900); font-size: 1.05rem; }
.ket-video figcaption::after { content: ""; display: block; width: 34px; height: 3px; margin: .5rem auto 0; border-radius: 2px; background: var(--gold-400); }
.ket-gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,21,48,.55), rgba(6,21,48,0) 55%); opacity: 0; transition: opacity .35s ease; }
.ket-gallery__item:hover img { transform: scale(1.07); }
.ket-gallery__item:hover::after { opacity: 1; }
.ket-lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(6,21,48,.9); display: none; align-items: center; justify-content: center; padding: 2rem; }
.ket-lightbox.is-open { display: flex; }
.ket-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--r-md); box-shadow: var(--shadow-xl); }
.ket-lightbox__close, .ket-lightbox__nav { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: var(--r-full); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); }
.ket-lightbox__close:hover, .ket-lightbox__nav:hover { background: var(--gold-500); color: var(--navy-950); }
.ket-lightbox__close { top: 1.5rem; right: 1.5rem; }
.ket-lightbox__close svg, .ket-lightbox__nav svg { width: 24px; height: 24px; }
.ket-lightbox__nav--prev { left: 1.5rem; }
.ket-lightbox__nav--next { right: 1.5rem; }
.ket-lightbox__count { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(255,255,255,.14); padding: .35rem 1.1rem; border-radius: var(--r-full); font-size: .88rem; letter-spacing: .08em; }
.ket-dialog .form-control { height: auto; margin-bottom: .85rem; }

/* Flash news ticker */
.ket-flashnews { display: flex; align-items: stretch; background: var(--navy-950); color: #fff; overflow: hidden; border-bottom: 2px solid var(--gold-500); }
.ket-flashnews__label { flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem; background: var(--gold-500); color: var(--navy-950); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; padding: .65rem 1.25rem; }
.ket-flashnews__label svg { width: 16px; height: 16px; }
.ket-flashnews__viewport { flex: 1; min-width: 0; overflow: hidden; position: relative; }
.ket-flashnews__track { display: inline-flex; align-items: center; white-space: nowrap; padding-left: 100%; animation: ket-marquee 34s linear infinite; }
.ket-flashnews:hover .ket-flashnews__track { animation-play-state: paused; }
.ket-flashnews__track a { color: #fff; font-size: .92rem; display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 3rem .65rem 0; }
.ket-flashnews__track a:hover { color: var(--gold-300); text-decoration: underline; }
.ket-flashnews__badge { background: #e02424; color: #fff; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .45rem; border-radius: 3px; animation: ket-flash-blink 1s steps(2, start) infinite; }
@keyframes ket-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes ket-flash-blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
    .ket-flashnews__track { animation: none; padding-left: 1rem; white-space: normal; }
    .ket-flashnews__badge { animation: none; }
}

/* 15. TABLES ============================================================== */
.ket-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ket-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.ket-table thead th { background: var(--navy-900); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; text-align: left; padding: .95rem 1.15rem; }
.ket-table tbody td { padding: .9rem 1.15rem; border-top: 1px solid var(--line); vertical-align: middle; color: var(--ink-soft); font-size: .95rem; }
.ket-table tbody tr:nth-child(even) { background: var(--surface-2); }
.ket-table tbody tr:hover { background: var(--gold-100); }
.ket-table img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--r-full); }

/* 16. FORMS =============================================================== */
.ket-field { margin-bottom: 1.1rem; }
.ket-field label { display: block; font-weight: 600; font-size: .88rem; color: var(--navy-800); margin-bottom: .4rem; }
.ket-input, .ket-textarea, select.ket-input {
    width: 100%; font: inherit; color: var(--ink); background: #fff;
    border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .8rem 1rem; transition: var(--transition);
}
.ket-input:focus, .ket-textarea:focus { border-color: var(--gold-500); outline: none; box-shadow: 0 0 0 3px var(--gold-100); }
.ket-textarea { min-height: 140px; resize: vertical; }

/* 17. FOOTER ============================================================== */
.ket-footer { background: var(--navy-950); color: var(--navy-200); }
.ket-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(4rem, 7vw, 5.5rem); }
.ket-footer__brand-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ket-footer__brand-row img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(201,162,39,.35)); }
.ket-footer__brand-row p { font-family: var(--font-serif); font-weight: 700; color: #fff; margin: 0; line-height: 1.25; font-size: 1.05rem; }
.ket-footer p { color: var(--navy-200); font-size: .94rem; line-height: 1.65; }
.ket-footer__affil { font-size: .8rem; color: var(--navy-300); margin-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: .75rem; }
.ket-footer h3 { color: var(--gold-400); font-family: var(--font-sans); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.4rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.ket-footer ul { list-style: none; margin: 0; padding: 0; }
.ket-footer li { margin-bottom: .75rem; }
.ket-footer li a { color: var(--navy-200); font-size: .92rem; transition: color var(--transition), padding-left var(--transition); }
.ket-footer li a:hover { color: var(--gold-400); padding-left: 4px; }
.ket-committee th, .ket-committee td { white-space: nowrap; }
.ket-prog-link { color: #0a66c2; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.ket-prog-link::after { content: " \2197"; font-size: .85em; }
.ket-prog-link:hover, .ket-prog-link:focus { color: #084a8c; }
.ket-social { display: flex; gap: .65rem; align-items: center; }
.ket-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--navy-100); transition: var(--transition); }
.ket-social a:hover { background: var(--gold-400); color: var(--navy-950); }
.ket-social svg { width: 16px; height: 16px; }
.ket-footer__social { margin-top: 1.25rem; }
.ket-topbar .ket-social { gap: .4rem; }
.ket-topbar .ket-social a { width: 26px; height: 26px; background: none; }
.ket-topbar .ket-social a:hover { background: rgba(255,255,255,.12); color: var(--gold-300); }
.ket-topbar .ket-social svg { width: 14px; height: 14px; color: var(--gold-400); }
.ket-footer__bar { border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.2); }
.ket-footer__bar-inner { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding-block: 1.75rem; font-size: .82rem; color: var(--navy-300); }

/* 18. NOTICE DIALOG ======================================================= */
.ket-dialog { width: min(94vw, 52rem); border: 0; border-radius: var(--r-xl); padding: 0; box-shadow: var(--shadow-xl); scrollbar-width: none; -ms-overflow-style: none; }
.ket-dialog::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ket-dialog::backdrop { background: rgba(6,21,48,.78); backdrop-filter: blur(4px); }
.ket-dialog__body { padding: clamp(1.75rem, 4vw, 2.5rem); }
.ket-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--gold-200); }
.ket-dialog__head h2 { margin: 0; font-size: 1.75rem; }
.ket-dialog__head p { margin: .35rem 0 0; font-size: .92rem; color: var(--muted); }
.ket-dialog__close { width: 44px; height: 44px; border: 1.5px solid var(--line); background: none; border-radius: var(--r-full); color: var(--navy-900); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition); }
.ket-dialog__close:hover { background: var(--navy-50); border-color: var(--navy-200); }
.ket-dialog__close svg { width: 20px; height: 20px; }
.ket-notice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.75rem; }
.ket-notice-box { background: linear-gradient(135deg, var(--navy-50), #fff); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: 1.35rem; position: relative; overflow: hidden; }
.ket-notice-box::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--gold-500); border-radius: 2px 0 0 2px; }
.ket-notice-box h3 { font-family: var(--font-sans); font-size: .95rem; font-weight: 700; color: var(--navy-900); margin: 0 0 .85rem; }
.ket-notice-box ul { list-style: none; margin: 0; padding: 0; }
.ket-notice-box li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--ink-soft); margin-bottom: .55rem; padding: .4rem .6rem; border-radius: var(--r-sm); cursor: pointer; transition: background var(--transition); }
.ket-notice-box li:hover { background: var(--navy-100); color: var(--navy-900); }
.ket-notice-box li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); flex-shrink: 0; }
.ket-notice-box li a { color: inherit; text-decoration: none; flex: 1; }
.ket-notice-box li:hover a { color: var(--gold-700); }
.ket-dialog__actions { display: flex; flex-wrap: wrap; gap: .85rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.ket-dialog__actions .ket-btn { flex: 1; min-width: 14rem; justify-content: center; }

/* 19. UTILITIES =========================================================== */
.ket-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ket-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ket-chip { background: var(--navy-50); color: var(--navy-800); font-weight: 500; font-size: .85rem; padding: .4rem .9rem; border-radius: var(--r-full); }
.ket-link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--gold-700); }
.ket-link-arrow svg { width: 16px; height: 16px; transition: transform var(--transition); }
.ket-link-arrow:hover svg { transform: translateX(4px); }
.ket-prose p { color: var(--ink-soft); }
.ket-prose h2 { margin-top: 2rem; }
.ket-prose h3 { margin-top: 1.5rem; }
.ket-center { text-align: center; }
.ket-mt-0 { margin-top: 0; }

/* 20. LEGACY CONTENT SKIN =================================================
   These rules restyle the ORIGINAL theme markup that remains inside inner-page
   content, so pages look on-brand without rewriting every content block. */

/* ── 20a. BASE FONT OVERRIDE ──────────────────────────────────────────────
   Bootstrap sets html/body to 14px which shrinks all inner-page text.
   Force everything back to the same 16px base the index page uses. */
.ket-legacy,
.ket-legacy body {
    font-size: 16px;
    line-height: 1.7;
    font-family: var(--font-sans);
    color: var(--ink);
}
/* Content headings & text — SCOPED TO .section so they only style the page
   content and never leak into the shared header, footer, drawer or dialog
   chrome (those keep their own component sizes, identical to the index page). */
.ket-legacy .section h1 { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); color: var(--navy-900); line-height: 1.2; }
.ket-legacy .section h2 { font-family: var(--font-serif); font-size: clamp(1.65rem, 3.2vw, 2.4rem); color: var(--navy-900); line-height: 1.25; }
.ket-legacy .section h3 { font-family: var(--font-serif); font-size: clamp(1.3rem, 2.5vw, 1.9rem); color: var(--navy-900); line-height: 1.3; }
.ket-legacy .section h4 { font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--navy-900); line-height: 1.35; }
.ket-legacy .section h5 { font-family: var(--font-serif); font-size: 1.1rem; color: var(--navy-900); }
.ket-legacy .section p  { font-size: 1rem; line-height: 1.8; color: var(--ink-soft); margin-bottom: 1rem; }
.ket-legacy .section li { font-size: 1rem; line-height: 1.8; }
.ket-legacy .section small { font-size: .9rem; line-height: 1.6; }
/* Footer text — keep legible but slightly smaller like index footer */
.ket-footer p, .ket-footer li, .ket-footer a { font-size: .95rem; }
.ket-footer__bar-inner p { font-size: .85rem; }

/* ── 20b. EQUAL-HEIGHT CONTACT BOXES ──────────────────────────────────────
   Make the three small-box columns in the contact page stretch to the same
   height regardless of content length. */
.ket-legacy .contactv2 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.ket-legacy .contactv2 > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.ket-legacy .small-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── 20c. REMOVE MAGNIFIER / BLACK OVERLAY ON ADMISSION CARDS ─────────────
   The old style.css .magnifier creates a teal / dark flash when clicking
   images on the admission page. We fully suppress it inside .ket-legacy. */
.ket-legacy .magnifier {
    display: none !important;
}
/* Also kill any -webkit tap highlight that causes dark flash on mobile */
.ket-legacy .blog-box,
.ket-legacy .blog-box a,
.ket-legacy .blog-box img,
.ket-legacy .entry {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.ket-legacy .section { padding-block: clamp(3rem, 7vw, 5.5rem); position: relative; }
.ket-legacy .section.nopadtop { padding-top: 0; }
.ket-legacy .section.gb { background: var(--surface-2); }

/* Legacy page-title band -> premium hero */
.ket-legacy .section.db {
    background: linear-gradient(120deg, var(--navy-950) 0%, var(--navy-800) 60%, #1e4080 100%);
    color: #fff; padding-block: clamp(4rem, 8vw, 6rem);
    position: relative; overflow: hidden;
}
.ket-legacy .section.db::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(201,162,39,.18) 0%, transparent 60%);
    pointer-events: none;
}
.ket-legacy .section.db::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-600));
}
.ket-legacy .section.db .container { position: relative; }
.ket-legacy .section.db .page-title h1,
.ket-legacy .section.db .page-title h3 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1rem; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.ket-legacy .section.db .breadcrumb {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
    background: none; padding: 0; margin: 0; list-style: none; font-size: .87rem;
}
.ket-legacy .section.db .breadcrumb > li { color: var(--navy-200); display: inline-flex; align-items: center; gap: .5rem; }
.ket-legacy .section.db .breadcrumb > li + li::before { content: "/"; color: var(--navy-400); }
.ket-legacy .section.db .breadcrumb a { color: var(--gold-300); font-weight: 600; }
.ket-legacy .section.db .breadcrumb a:hover { color: #fff; }
.ket-legacy .section.db .breadcrumb > .active { color: var(--navy-100); }

/* Boxed content -> premium card */
.ket-legacy .boxed {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
    box-shadow: var(--shadow-md); padding: clamp(2rem, 5vw, 3rem);
}

/* Inner page section headings */
.ket-legacy .section.gb h3 {
    font-family: var(--font-serif); color: var(--navy-900);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    display: flex; align-items: center; gap: .65rem;
    margin-bottom: 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--navy-100);
}
.ket-legacy .section.gb h3::before {
    content: ""; display: inline-block; width: 5px; height: 1.2em;
    background: linear-gradient(to bottom, var(--gold-400), var(--gold-600));
    border-radius: 3px; flex-shrink: 0;
}

/* Body text in legacy content */
.ket-legacy .section.gb p,
.ket-legacy .section.gb li {
    font-family: var(--font-sans);
    font-size: 1.035rem;
    line-height: 1.8;
    color: var(--ink-soft);
}
.ket-legacy .blog-desc-big p { text-align: justify; }

/* Blog/course boxes -> cards */
.ket-legacy .blog-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: var(--transition); height: 100%; }
.ket-legacy .blog-box:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--gold-300); }
.ket-legacy .blog-box .image-wrap { overflow: hidden; }
.ket-legacy .blog-box .image-wrap img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .4s ease; }
.ket-legacy .blog-box:hover .image-wrap img { transform: scale(1.05); }
.ket-legacy .blog-desc { padding: 1.5rem 1.6rem 1.75rem; }
.ket-legacy .blog-desc h4 { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: .5rem; }
.ket-legacy .blog-desc h4 a { color: var(--navy-900); }
.ket-legacy .blog-desc h4 a:hover { color: var(--gold-700); }
.ket-legacy .blog-desc p { color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
.ket-legacy .readmore { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--gold-700); font-size: .9rem; letter-spacing: .01em; margin-top: .25rem; }
.ket-legacy .readmore::after { content: "\2192"; }
.ket-legacy .readmore:hover { color: var(--navy-800); }

/* Equal-height card rows — make every .blog-box in a row the same height,
   with the image area fixed and the "Read more" link pinned to the bottom.
   (Bootstrap 3 floats columns, so they don't stretch on their own.) */
.ket-legacy .row:has(.blog-box) { display: flex; flex-wrap: wrap; }
.ket-legacy .row:has(.blog-box) > [class*="col-"] { display: flex; float: none; margin-bottom: 1.5rem; }
.ket-legacy .blog-box { display: flex; flex-direction: column; }
.ket-legacy .blog-box .blog-desc { display: flex; flex-direction: column; flex: 1 1 auto; }
.ket-legacy .blog-box .blog-desc .readmore { margin-top: auto; }

/* Vision/mission "box" blocks */
.ket-legacy .box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 3vw, 2rem); height: 100%; }
.ket-legacy .box h4 { font-size: 1.3rem; margin-bottom: .75rem; }
.ket-legacy .box .vision-icon, .ket-legacy .box img.vision-icon { width: 56px; height: 56px; object-fit: contain; margin-bottom: 1rem; }

/* Custom module (about split) */
.ket-legacy .custom-module h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.ket-legacy .custom-module p { color: var(--ink-soft); }
.ket-legacy .custom-module img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }

/* Small contact boxes */
.ket-legacy .small-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 1.4rem 1.25rem; text-align: center; height: 100%; transition: var(--transition); }
.ket-legacy .small-box:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--gold-300); }
.ket-legacy .small-box i { font-size: 1.6rem; color: var(--gold-600); margin-bottom: .5rem; display: inline-block; }
.ket-legacy .small-box h4 { font-size: 1.1rem; margin: 0 0 .6rem; }
.ket-legacy .small-box small { display: block; color: var(--ink-soft); font-size: .92rem; margin: 2px 0; }
.ket-legacy .small-box a { display: inline; margin-top: 0; font-size: .95rem; }

/* Check lists */
.ket-legacy ul.check, .ket-legacy ul.my-list { list-style: none; padding: 0; }
.ket-legacy ul.check li { position: relative; padding: .6rem 0 .6rem 1.85rem; border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--ink-soft); }
.ket-legacy ul.check li::before { content: "\2713"; position: absolute; left: 0; top: .6rem; width: 22px; height: 22px; background: var(--gold-100); color: var(--gold-700); border-radius: 50%; font-size: .75rem; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Legacy tables — premium styling */
.ket-legacy table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.ket-legacy .table-container, .ket-legacy .table-responsive, .ket-legacy .table-container.fixed-width {
    overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.ket-legacy table th {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
    color: #fff; font-family: var(--font-sans); font-weight: 700;
    font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
    text-align: left; padding: 1.1rem 1.3rem;
}
.ket-legacy table td {
    padding: 1rem 1.3rem; border-top: 1px solid var(--line);
    color: var(--ink-soft); vertical-align: middle; font-size: .97rem;
    line-height: 1.5;
}
.ket-legacy table tbody tr:nth-child(even) { background: var(--surface-2); }
.ket-legacy table tbody tr:hover { background: var(--gold-100); transition: background .2s; }
.ket-legacy table img {
    width: 72px; height: 72px; object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--gold-300);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    display: block;
}

/* About-page institution detail table — label column styling */
.ket-legacy .table-responsive table th {
    background: var(--navy-50); color: var(--navy-800); font-weight: 600;
    font-size: .9rem; letter-spacing: .02em; text-transform: none;
    border-right: 2px solid var(--gold-300); width: 40%;
}
.ket-legacy .table-responsive table th:first-child { border-radius: 0; }
.ket-legacy .table-responsive table td { font-weight: 500; color: var(--ink); }

/* Legacy images inside content */
.ket-legacy .blog-desc-big { overflow: hidden; border-radius: var(--r-lg); }
.ket-legacy .blog-desc-big img.img-responsive,
.ket-legacy .blog-desc-big img.img-rounded {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--r-lg);
    transition: transform .4s ease;
    box-shadow: var(--shadow-md);
}
.ket-legacy .blog-desc-big:hover img { transform: scale(1.03); }
.ket-legacy img.img-responsive, .ket-legacy img.img-rounded { border-radius: var(--r-lg); }
.ket-legacy .img-circle { border-radius: 50%; }

/* Sidebar / banner images */
.ket-legacy .banner-widget { text-align: center; }
.ket-legacy .banner-widget img, .ket-legacy .sidebar img {
    border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
    width: 100%; object-fit: cover;
}

/* Portrait caption — name + role beneath a person's photo (management, principal, manager) */
.ket-portrait-cap { text-align: center; margin-top: 1rem; }
.ket-portrait-cap strong { display: block; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: var(--navy-900); line-height: 1.3; }
.ket-portrait-cap em { display: block; margin-top: .2rem; font-style: italic; font-size: .95rem; color: var(--gold-700); }

/* Legacy buttons */
.ket-legacy .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-sans); font-weight: 600; font-size: .95rem; padding: .8rem 1.5rem; border-radius: var(--r-sm); border: 1.5px solid transparent; transition: var(--transition); }
.ket-legacy .btn-primary { background: var(--gold-500); color: var(--navy-950); border-color: var(--gold-500); }
.ket-legacy .btn-primary:hover { background: var(--gold-400); color: var(--navy-950); }
.ket-legacy .btn-default { background: transparent; color: var(--navy-800); border-color: var(--navy-200); }
.ket-legacy .btn-default:hover { border-color: var(--gold-500); color: var(--gold-700); }

/* Forms inside legacy content */
.ket-legacy .form-control {
    width: 100%; font: inherit; color: var(--ink); background: #fff;
    border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .8rem 1rem;
    margin-bottom: 1rem; transition: var(--transition);
}
.ket-legacy .form-control:focus { border-color: var(--gold-500); outline: none; box-shadow: 0 0 0 3px var(--gold-100); }
.ket-legacy textarea.form-control { min-height: 140px; resize: vertical; }
.ket-legacy .section-title { text-align: center; margin-bottom: 1.75rem; }
.ket-legacy .section-title h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.ket-legacy .error-message { color: #c0392b; font-size: .82rem; display: block; margin: -.6rem 0 .6rem; }

/* Media embeds (maps, video) */
.ket-legacy iframe { max-width: 100%; border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }

/* Facility album grid */
.ket-fac-section {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--navy-100);
}
.ket-fac-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ket-fac-header {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem;
}
.ket-fac-header__icon {
    width: 52px; height: 52px; border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.ket-fac-header__icon svg { width: 26px; height: 26px; color: var(--gold-400); }
.ket-fac-header h3 {
    font-family: var(--font-serif); color: var(--navy-900);
    font-size: clamp(1.3rem, 2.5vw, 1.65rem);
    margin: 0; border: none; padding: 0; display: block;
}
.ket-fac-header h3::before { display: none; }
.ket-fac-desc {
    color: var(--ink-soft); font-size: 1.025rem; line-height: 1.8;
    margin-bottom: 1.75rem; max-width: 820px;
}
.ket-fac-album {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ket-fac-album__item {
    position: relative; border-radius: var(--r-lg); overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    background: var(--surface-3);
}
.ket-fac-album__item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .45s ease;
    border-radius: var(--r-lg);
    display: block;
}
.ket-fac-album__item:hover img { transform: scale(1.07); }
.ket-fac-album__item::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,21,48,.55) 0%, transparent 55%);
    opacity: 0; transition: opacity .3s ease;
    border-radius: var(--r-lg);
}
.ket-fac-album__item:hover::after { opacity: 1; }
.ket-fac-album__overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1rem 1.1rem .8rem;
    color: #fff; font-size: .88rem; font-weight: 600;
    opacity: 0; transition: opacity .3s ease;
    z-index: 1;
}
.ket-fac-album__item:hover .ket-fac-album__overlay { opacity: 1; }

/* Hide leftover theme chrome that may remain in content */
.ket-legacy #preloader, .ket-legacy .slider-bottom { display: none !important; }
.ket-legacy .invis { visibility: hidden; margin: 0 !important; height: 0 !important; }

/* 21. RESPONSIVE ========================================================== */
@media (max-width: 1024px) {
    :root { --header-h: 80px; }
    .ket-nav, .ket-header__cta { display: none; }
    .ket-hamburger { display: inline-flex; }
    .ket-stats { grid-template-columns: repeat(2, 1fr); }
    .ket-stat:nth-child(-n+2) { border-bottom: 0; }
    .ket-stat:nth-child(3) { border-left: 0; }
    .ket-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .ket-brand__logo { width: 52px; height: 52px; }
}
@media (max-width: 900px) {
    .ket-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .ket-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .ket-gallery { column-count: 2; }
    .ket-topbar__contact { display: none; }
    .ket-fac-album { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ket-grid--2, .ket-grid--3, .ket-grid--4 { grid-template-columns: 1fr; }
    .ket-stats { grid-template-columns: 1fr 1fr; }
    .ket-gallery { column-count: 2; }
    .ket-brand__sub { display: none; }
    .ket-notice-grid { grid-template-columns: 1fr; }
    .ket-footer__grid { grid-template-columns: 1fr; }
    .ket-dialog__actions .ket-btn { min-width: 0; }
    .ket-fac-album { grid-template-columns: 1fr; }
    .ket-fac-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 460px) {
    .ket-gallery { column-count: 1; }
}

/* 22. MOTION & A11Y ======================================================= */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 23. LANDING HERO & HOME SECTIONS ======================================== */
.ket-hero { position: relative; background: var(--navy-950); color: #fff; overflow: hidden; }
.ket-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ket-hero__overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(6,21,48,.96) 0%, rgba(6,21,48,.86) 40%, rgba(10,31,68,.55) 100%); }
.ket-hero__inner { position: relative; padding-block: clamp(4rem, 10vw, 7.5rem) clamp(6rem, 12vw, 10rem); max-width: 62rem; }
.ket-hero__eyebrow { color: var(--gold-400); font-weight: 600; font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; }
.ket-hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.08; margin: 1.25rem 0 0; max-width: 20ch; }
.ket-hero h1 em { color: var(--gold-400); font-style: normal; }
.ket-hero__lead { color: var(--navy-100); font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 42rem; margin-top: 1.5rem; }
.ket-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.ket-hero__utils { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2.5rem; }
.ket-hero__utils button, .ket-hero__utils a { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; color: var(--navy-100); font: inherit; font-size: .92rem; cursor: pointer; }
.ket-hero__utils button:hover, .ket-hero__utils a:hover { color: var(--gold-300); }
.ket-hero__utils svg { width: 18px; height: 18px; color: var(--gold-400); }

.ket-stats-wrap { position: relative; z-index: 10; margin-top: clamp(-5rem, -8vw, -3.5rem); }

.ket-about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ket-about__media { position: relative; }
.ket-about__media img { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ket-about__badge { position: absolute; right: -1.25rem; bottom: -1.25rem; background: var(--navy-900); color: #fff; border-radius: var(--r-lg); padding: 1.1rem 1.4rem; box-shadow: var(--shadow-xl); }
.ket-about__badge strong { display: block; font-family: var(--font-serif); font-size: 1.6rem; color: var(--gold-400); }
.ket-about__badge span { font-size: .82rem; color: var(--navy-200); }

.ket-vm { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: clamp(1.75rem, 3vw, 2.25rem); }
.ket-vm__icon { width: 48px; height: 48px; border-radius: var(--r-md); background: rgba(201,162,39,.16); color: var(--gold-400); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.ket-vm__icon svg { width: 24px; height: 24px; }
.ket-vm p { color: var(--navy-100); margin: 0; }

.ket-disclosure { background: var(--navy-50); border-radius: var(--r-xl); padding: clamp(1.75rem, 4vw, 3rem); }
.ket-disclosure__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ket-doc-link { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem 1.1rem; font-weight: 500; color: var(--navy-900); font-size: .92rem; }
.ket-doc-link svg { width: 18px; height: 18px; color: var(--gold-600); flex-shrink: 0; }
.ket-doc-link:hover { border-color: var(--gold-400); color: var(--gold-700); }

.ket-contact-band { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ket-contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ket-contact-list li { display: flex; gap: .85rem; margin-bottom: 1rem; color: var(--navy-100); }
.ket-contact-list svg { width: 22px; height: 22px; color: var(--gold-400); flex-shrink: 0; }
.ket-contact-actions { display: flex; flex-direction: column; gap: 1rem; }

@media (max-width: 860px) {
    .ket-about, .ket-contact-band { grid-template-columns: 1fr; }
    .ket-about__media { max-width: 30rem; }
    .ket-disclosure__grid { grid-template-columns: 1fr; }
}

/* 25. HOME — EVENTS & NEWS =============================================== */
.ket-en-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.ket-en-col__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: .85rem; border-bottom: 2px solid var(--navy-100); }
.ket-en-col__title { display: flex; align-items: center; gap: .6rem; font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; color: var(--navy-900); margin: 0; }
.ket-en-col__title svg { width: 22px; height: 22px; color: var(--gold-600); }
.ket-en-col__link { font-size: .82rem; font-weight: 600; color: var(--gold-700); white-space: nowrap; }
.ket-en-col__link:hover { color: var(--navy-800); }

/* Upcoming events */
.ket-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ket-event { display: flex; gap: 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; transition: var(--transition); }
.ket-event:hover { box-shadow: var(--shadow-lg); transform: translateX(4px); border-color: var(--gold-300); }
.ket-event__date { flex-shrink: 0; width: 62px; text-align: center; background: var(--navy-900); border-radius: var(--r-md); padding: .55rem 0; align-self: flex-start; }
.ket-event__date .d { display: block; font-family: var(--font-serif); font-weight: 800; font-size: 1.65rem; line-height: 1; color: #fff; }
.ket-event__date .m { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-400); margin-top: .25rem; }
.ket-event__body { min-width: 0; }
.ket-event__body h3 { font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 .35rem; color: var(--navy-900); line-height: 1.25; }
.ket-event__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .78rem; color: var(--gold-700); font-weight: 600; margin: 0 0 .45rem; }
.ket-event__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.ket-event__meta svg { width: 13px; height: 13px; }
.ket-event__body p { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }

/* Latest news */
.ket-news { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ket-news-item { display: flex; gap: .85rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: var(--transition); }
.ket-news-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--gold-300); }
.ket-news-item__thumb { flex-shrink: 0; width: 90px; overflow: hidden; background: var(--surface-3); }
.ket-news-item__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ket-news-item:hover .ket-news-item__thumb img { transform: scale(1.06); }
.ket-news-item__body { padding: .65rem 1rem .65rem 0; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ket-news-item__meta { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--gold-700); margin: 0 0 .2rem; }
.ket-news-item__meta span { color: var(--muted); font-weight: 500; }
.ket-news-item__body h3 { font-family: var(--font-serif); font-size: .98rem; margin: 0 0 .2rem; line-height: 1.25; }
.ket-news-item__body h3 a { color: var(--navy-900); }
.ket-news-item__body h3 a:hover { color: var(--gold-700); }
.ket-news-item__body p { margin: 0; font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }

@media (max-width: 860px) { .ket-en-grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
    .ket-news-item { flex-direction: column; }
    .ket-news-item__thumb { width: 100%; height: 140px; }
    .ket-news-item__body { padding: .85rem 1rem 1rem; }
}