@charset "UTF-8";

:root {
    color-scheme: dark;
    --obsidian: #070709;
    --black-cherry: #171016;
    --oxblood: #4b2d2e;
    --combat-red: #d41115;
    --flame-red: #f42c1d;
    --burnt-umber: #824334;
    --warm-ash: #afa0a0;
    --sandstone: #d1c4b8;
    --teal: #32989d;
    --teal-deep: #276568;
    --slate: #394659;
    --slate-light: #6c7484;
    --blue-pale: #ccdaef;
    --text: #f2ece7;
    --text-muted: #b6acaa;
    --surface: #100d10;
    --surface-alt: #171016;
    --combat-red-hover: #f42c1d;
    --line: rgb(209 196 184 / 18%);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.75);
    --display: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --content: 1400px;
    --gutter: clamp(0.9rem, 3.5vw, 3.5rem);
    --section-space: clamp(4.5rem, 9vw, 10rem);
}

html[lang="kn"] {
    --display: "Noto Sans Kannada", "Montserrat", "Inter", sans-serif;
    --body: "Noto Sans Kannada", "Inter", sans-serif;
}

html[lang="hi"] {
    --display: "Noto Sans Devanagari", "Montserrat", "Inter", sans-serif;
    --body: "Noto Sans Devanagari", "Inter", sans-serif;
}

html[lang="kn"] h1,
html[lang="kn"] h2,
html[lang="kn"] h3,
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3 {
    line-height: 1.25;
    letter-spacing: normal;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: clamp(6rem, 9vw, 8.5rem);
    background: var(--obsidian);
}

:target,
[id] {
    scroll-margin-top: clamp(6rem, 9vw, 8.5rem);
}

/* Scroll-Reveal Micro-Interactions */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

body {
    margin: 0;
    background: var(--obsidian);
    color: var(--text);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

body,
button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

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

button,
a {
    touch-action: manipulation;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--sandstone);
    outline-offset: 4px;
}

::selection {
    background: var(--flame-red);
    color: #fff;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 1rem;
    left: 1rem;
    transform: translateY(-160%);
    padding: .75rem 1rem;
    background: var(--sandstone);
    color: var(--obsidian);
    font-weight: 700;
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    width: 100%;
    border-bottom: 1px solid rgb(209 196 184 / 12%);
    background: #070709;
    padding-inline: var(--gutter);
}

.header-inner {
    width: min(100%, var(--content));
    min-height: 114px;
    margin-inline: auto;
    padding-block: 0.85rem;
    padding-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 2.5vw, 3rem);
}

.brand {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.4vw, 1.4rem);
    min-width: 0;
    text-decoration: none;
}

.brand-logo-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    outline: none;
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.brand-logo-btn:hover .brand-logo {
    transform: scale(1.06);
    filter: drop-shadow(0 4px 22px rgba(244, 44, 29, 0.5));
}

.brand-logo-btn:focus-visible {
    outline: 2px solid var(--flame-red);
    outline-offset: 3px;
    box-shadow: 0 0 16px rgba(244, 44, 29, 0.45);
}

.brand-logo {
    width: clamp(82px, 5.8vw, 92px);
    height: auto;
    aspect-ratio: 1;
    display: block;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 18px rgb(0 0 0 / 60%));
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), filter .25s ease;
}

.brand:hover .brand-logo {
    transform: scale(1.04);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .28rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.brand-copy:hover .brand-name {
    color: #ffffff;
}

.brand-copy:focus-visible {
    outline: 2px solid var(--flame-red);
    outline-offset: 2px;
    border-radius: 2px;
}

.brand-name {
    display: block;
    font-family: var(--display);
    font-size: clamp(1.85rem, 2.2vw, 2.25rem);
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    transition: color .2s ease;
}

.brand-name b {
    color: var(--flame-red);
    font-weight: 900;
}

.brand-tagline,
.brand-association {
    display: block;
    max-width: 25rem;
    color: var(--warm-ash);
    font-size: clamp(0.66rem, 0.76vw, 0.74rem);
    font-weight: 500;
    letter-spacing: .065em;
    line-height: 1.35;
    text-transform: uppercase;
}

.footer-wordmark span {
    color: var(--flame-red);
}

.primary-navigation {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.4vw, 1.8rem);
    align-self: flex-end;
    padding-bottom: 0.45rem;
}

.primary-navigation > a:not(.nav-cta) {
    color: #e1d9d5;
    font-size: .78rem;
    transition: color .2s ease;
    white-space: nowrap;
}

.primary-navigation > a:not(.nav-cta):hover,
.primary-navigation > a:not(.nav-cta).is-active {
    color: var(--flame-red);
}

.primary-navigation > a:not(.nav-cta).is-active {
    font-weight: 700;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .72rem 1.3rem;
    border: 1px solid rgba(220, 20, 30, 0.72);
    background: rgba(18, 12, 16, 0.45);
    color: #fff;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}

.nav-cta:hover {
    border-color: var(--flame-red);
    background: rgba(212, 17, 21, 0.28);
    box-shadow: 0 0 16px rgba(244, 44, 29, 0.38);
    transform: translateY(-1px);
}

.nav-cta-desktop {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.58rem 1.15rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-cta-mobile {
    display: none !important;
}

.menu-toggle {
    display: none;
}

/* ==========================================================================
   Cinematic Hero Section
   ========================================================================== */

.hero {
    position: relative;
    min-height: calc(100vh - 114px);
    min-height: calc(100svh - 114px);
    overflow: hidden;
    isolation: isolate;
    padding-inline: var(--gutter);
    background:
        radial-gradient(ellipse at 80% 45%, rgb(212 17 21 / 20%), transparent 42%),
        radial-gradient(ellipse at 88% 18%, rgb(75 45 46 / 28%), transparent 34%),
        radial-gradient(ellipse at 15% 15%, rgb(212 17 21 / 8%), transparent 40%),
        linear-gradient(115deg, var(--obsidian) 0%, #0d090d 52%, #140b0f 100%);
}

.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 70% at 50% 50%, transparent 55%, rgba(7, 7, 9, 0.4) 85%, var(--obsidian) 100%),
        linear-gradient(180deg, rgba(7, 7, 9, 0.6) 0%, transparent 18%, transparent 78%, var(--obsidian) 100%);
}

.hero::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: radial-gradient(ellipse 65% 80% at 20% 50%, var(--obsidian) 35%, transparent 80%);
    content: "";
    pointer-events: none;
}

.hero-grain,
.admission-texture {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    opacity: .09;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

/* Atmospheric Drifting Smoke Clouds */
.hero-smoke {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    filter: blur(55px);
    opacity: 0.16;
    mix-blend-mode: screen;
}

.hero-smoke-1 {
    width: 650px;
    height: 480px;
    top: 25%;
    right: 5%;
    background: radial-gradient(ellipse at center, rgb(212 17 21 / 40%) 0%, rgb(75 45 46 / 25%) 40%, transparent 70%);
    animation: smokeDrift 18s ease-in-out infinite alternate;
}

.hero-smoke-2 {
    width: 520px;
    height: 380px;
    bottom: 12%;
    right: 20%;
    background: radial-gradient(ellipse at center, rgb(130 67 52 / 30%) 0%, rgb(23 16 22 / 20%) 50%, transparent 75%);
    animation: smokeDrift 24s ease-in-out infinite alternate-reverse;
}

@keyframes smokeDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    50% {
        transform: translate3d(-35px, -20px, 0) scale(1.08) rotate(3deg);
    }
    100% {
        transform: translate3d(20px, 15px, 0) scale(0.96) rotate(-2deg);
    }
}

/* Sparks & Embers Canvas */
.hero-sparks-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* Hero Content Grid */
.hero-inner {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(2rem, 3.5vw, 4rem);
    width: min(100%, var(--content));
    min-height: calc(100vh - 114px);
    min-height: calc(100svh - 114px);
    margin-inline: auto;
    padding-top: clamp(1.8rem, 3.5vh, 2.8rem);
    padding-bottom: clamp(4.5rem, 8vh, 5.5rem);
    padding-inline: 0;
}

.hero-copy {
    position: relative;
    z-index: 6;
    width: 100%;
    padding-top: 0.5rem;
}

.eyebrow,
.section-kicker {
    color: var(--warm-ash);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .19em;
    line-height: 1.4;
    text-transform: uppercase;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.25rem;
    color: #9c9795;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .18em;
}

.hero-eyebrow-dot,
.admission-status i {
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--flame-red);
    box-shadow: 0 0 14px rgb(244 44 29 / 85%);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: var(--display);
}

.hero h1 {
    max-width: 22ch;
    margin-bottom: 1.25rem;
    font-size: clamp(2.6rem, 3.8vw, 4.3rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.05;
    text-transform: uppercase;
}

.hero-title-white {
    display: block;
    color: #ffffff;
}

.hero-title-red {
    display: block;
    color: var(--flame-red);
}

.hero-lede {
    max-width: 33rem;
    margin-bottom: 1.85rem;
    color: #c4bcb8;
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.55;
    font-weight: 400;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.15rem;
}

.hero-whatsapp-slot {
    margin-bottom: 1.85rem;
}

.button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: .9rem 1.6rem;
    border: 1px solid transparent;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background: var(--combat-red);
    color: #fff;
    border-color: var(--combat-red);
    box-shadow: 0 4px 18px rgb(212 17 21 / 38%);
}

.button-primary:hover {
    background: var(--flame-red);
    border-color: var(--flame-red);
    box-shadow: 0 6px 26px rgb(244 44 29 / 55%);
}

.button-outline {
    border-color: rgb(255 255 255 / 32%);
    background: rgb(16 13 16 / 60%);
    color: #fff;
}

.button-outline:hover {
    border-color: #ffffff;
    background: rgb(255 255 255 / 12%);
}

.button-whatsapp {
    background: #1c743c;
    border-color: #25d366;
    color: #ffffff;
    gap: 0.85rem;
}

.button-whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    color: #070709;
}

.button-whatsapp .whatsapp-icon {
    flex-shrink: 0;
}

.button-whatsapp-pending {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    border: 1px dashed rgb(209 196 184 / 28%);
    background: rgb(14 11 14 / 78%);
    color: #9c9795;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: not-allowed;
    user-select: none;
    border-radius: 2px;
    transition: border-color .2s ease;
}

.button-whatsapp-pending:hover {
    transform: none;
    border-color: rgb(209 196 184 / 45%);
}

.button-whatsapp-pending .whatsapp-icon {
    color: #9c9795;
    opacity: 0.75;
    flex-shrink: 0;
}

.button-whatsapp-pending .pending-pill {
    display: inline-block;
    padding: 0.22rem 0.55rem;
    border-radius: 2px;
    background: rgb(209 196 184 / 12%);
    color: var(--sandstone);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.hero-affiliation {
    margin: 0;
    color: #8c8684;
    font-size: .68rem;
    letter-spacing: .09em;
    line-height: 1.55;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.affiliation-caption {
    font-size: .62rem;
    color: #85807e;
    letter-spacing: .14em;
}

.affiliation-org {
    color: #e0d8d4;
    font-weight: 700;
    letter-spacing: .06em;
}

/* ==========================================================================
   Hero Stage (Immersive Cinematic Kata Athlete Media)
   ========================================================================== */

.hero-art {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: min(740px, 86svh);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-art-number {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    font-family: var(--display);
    font-size: clamp(16rem, 30vw, 34rem);
    font-weight: 900;
    color: rgb(255 255 255 / 3.8%);
    letter-spacing: -.06em;
    line-height: .8;
    user-select: none;
    pointer-events: none;
}

.hero-art-ring {
    position: absolute;
    z-index: 1;
    top: 48%;
    left: 52%;
    transform: translate(-50%, -50%);
    width: clamp(420px, 44vw, 620px);
    aspect-ratio: 1;
    border: 1px solid rgb(220 20 30 / 32%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 45px rgb(212 17 21 / 8%);
}

.hero-vertical-mantra {
    position: absolute;
    z-index: 6;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .24em;
    color: rgb(209 196 184 / 55%);
    text-transform: uppercase;
    pointer-events: none;
}

.hero-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-height: clamp(560px, 78vh, 760px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: visible;
}

/* Ambient crimson backlight glow behind athlete */
.hero-stage-aura {
    position: absolute;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 65% 55% at 50% 48%, rgba(212, 17, 21, 0.32) 0%, rgba(244, 44, 29, 0.12) 42%, transparent 70%),
        radial-gradient(circle 48% at 50% 52%, rgba(212, 17, 21, 0.15) 0%, transparent 65%);
    filter: blur(40px);
    opacity: 0.95;
    mix-blend-mode: screen;
    animation: auraPulse 6s ease-in-out infinite alternate;
}

@keyframes auraPulse {
    0% {
        opacity: 0.85;
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1.04);
    }
}

/* Atmospheric shadows, smoke gradients, and crimson rim reflections */
.hero-stage-shadows {
    position: absolute;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(7, 7, 9, 0.8) 0%, transparent 68%),
        radial-gradient(ellipse 60% 50% at 50% 45%, rgba(212, 17, 21, 0.18) 0%, transparent 60%);
    opacity: 0.9;
}

/* Glowing Crimson Energy Arc & Slash Trails */
.hero-energy-trail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
    animation: energyTrailPulse 5s ease-in-out infinite alternate;
}

@keyframes energyTrailPulse {
    0% {
        opacity: 0.7;
        transform: scale(0.99) translate3d(0, 0, 0);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.02) translate3d(-3px, -2px, 0);
    }
    100% {
        opacity: 0.8;
        transform: scale(1.01) translate3d(2px, 1px, 0);
    }
}

/* Reflective Floor Sheen & Ambient Ground Light */
.hero-floor-sheen {
    position: absolute;
    bottom: -2%;
    left: -10%;
    right: -10%;
    height: 140px;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 65% 80% at 55% 95%, rgba(212, 17, 21, 0.28) 0%, rgba(75, 45, 46, 0.20) 35%, transparent 75%);
}

/* ==========================================================================
   Cinematic Senseis Leadership Showcase (Seamless Crossfade & Subtle Ken Burns)
   ========================================================================== */

.hero-stage-sequence {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}



/* ==========================================================================
   Cinematic Sensei Showcase (Seamless Blending & Real Slideshow Cycling)
   ========================================================================== */

/* Base Slide Container */
.hero-sensei-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.4s ease;
    will-change: opacity, transform;
}

.hero-sensei-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.hero-sensei-slide.is-previous {
    opacity: 0;
    visibility: visible;
    z-index: 1;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.4s ease;
}

/* Picture wrappers: sized directly to photograph proportions with layered perimeter dissolves */
.hero-sensei-slide[data-index="0"] picture {
    display: inline-block;
    width: 100%;
    max-width: 620px;
    aspect-ratio: 1024 / 694;
    position: relative;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 3%, rgba(0,0,0,0.6) 8%, #000 18%, #000 82%, rgba(0,0,0,0.6) 92%, rgba(0,0,0,0.15) 97%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 3%, rgba(0,0,0,0.6) 8%, #000 18%, #000 82%, rgba(0,0,0,0.6) 92%, rgba(0,0,0,0.15) 97%, transparent 100%);
    mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 3%, rgba(0,0,0,0.6) 8%, #000 18%, #000 82%, rgba(0,0,0,0.6) 92%, rgba(0,0,0,0.15) 97%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 3%, rgba(0,0,0,0.6) 8%, #000 18%, #000 82%, rgba(0,0,0,0.6) 92%, rgba(0,0,0,0.15) 97%, transparent 100%);
}

.hero-sensei-slide:not([data-index="0"]) picture {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 4%, #000 18%, #000 82%, rgba(0,0,0,0.2) 96%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 4%, #000 16%, #000 88%, rgba(0,0,0,0.2) 97%, transparent 100%);
    mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 4%, #000 18%, #000 82%, rgba(0,0,0,0.2) 96%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 4%, #000 16%, #000 88%, rgba(0,0,0,0.2) 97%, transparent 100%);
}

.hero-sensei-slide[data-index="0"] .hero-seq-frame {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    mask-image: none;
    -webkit-mask-image: none;
}

.hero-sensei-slide:not([data-index="0"]) .hero-seq-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    mask-image: none;
    -webkit-mask-image: none;
}

/* Bo-staff portrait optimal vertical center */
.hero-sensei-slide[data-index="4"] .hero-seq-frame {
    object-position: center 40%;
}

/* Frame Base Styling & Cinematic Zoom (scale 1.000 to 1.035) */
.hero-seq-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    pointer-events: none;
    transform: scale(1);
    transform-origin: center 46%;
    will-change: transform;
}

.hero-sensei-slide.is-active[data-index="0"] .hero-seq-frame {
    animation: hero-drift-trio 5.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.hero-sensei-slide.is-active[data-index="1"] .hero-seq-frame {
    animation: hero-drift-1 5.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.hero-sensei-slide.is-active[data-index="2"] .hero-seq-frame {
    animation: hero-drift-2 5.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.hero-sensei-slide.is-active[data-index="3"] .hero-seq-frame {
    animation: hero-drift-3 5.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.hero-sensei-slide.is-active[data-index="4"] .hero-seq-frame {
    animation: hero-drift-4 5.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.hero-sensei-slide.is-active[data-index="5"] .hero-seq-frame {
    animation: hero-drift-5 5.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes hero-drift-trio {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.035) translate3d(0, -0.3%, 0); }
}
@keyframes hero-drift-1 {
    0% { transform: scale(1) translate3d(-0.3%, 0, 0); }
    100% { transform: scale(1.035) translate3d(0.3%, -0.2%, 0); }
}
@keyframes hero-drift-2 {
    0% { transform: scale(1.035) translate3d(0.3%, -0.2%, 0); }
    100% { transform: scale(1) translate3d(-0.3%, 0, 0); }
}
@keyframes hero-drift-3 {
    0% { transform: scale(1) translate3d(-0.3%, 0.2%, 0); }
    100% { transform: scale(1.035) translate3d(0.3%, -0.2%, 0); }
}
@keyframes hero-drift-4 {
    0% { transform: scale(1.035) translate3d(0.3%, 0.2%, 0); }
    100% { transform: scale(1) translate3d(-0.3%, -0.2%, 0); }
}
@keyframes hero-drift-5 {
    0% { transform: scale(1) translate3d(-0.3%, -0.2%, 0); }
    100% { transform: scale(1.035) translate3d(0.3%, 0.2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-seq-frame,
    .hero-sensei-slide.is-active .hero-seq-frame {
        animation: none !important;
        transform: scale(1.0) !important;
    }
}

.hero-stage-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    pointer-events: none;
    z-index: 2;
    display: none;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 2.5%, #000 6%, #000 94%, rgba(0, 0, 0, 0.45) 97.5%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 3%, #000 6%, #000 94%, rgba(0, 0, 0, 0.45) 97%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 2.5%, #000 6%, #000 94%, rgba(0, 0, 0, 0.45) 97.5%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 3%, #000 6%, #000 94%, rgba(0, 0, 0, 0.45) 97%, transparent 100%);
    mask-composite: intersect;
}

/* Bottom Bar: Scroll to Discover & Counter */
.hero-bottom-bar {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: max(var(--gutter), calc((100% - var(--content)) / 2));
    pointer-events: none;
    z-index: 10;
}

.hero-scroll {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: #b0a8a6;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: color .2s ease;
}

.hero-scroll:hover {
    color: #ffffff;
}

.hero-scroll-line {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 56px;
    height: 12px;
}

.hero-scroll-line .scroll-stem {
    position: absolute;
    left: 0;
    right: 6px;
    height: 1.5px;
    background: var(--flame-red);
    box-shadow: 0 0 6px rgb(244 44 29 / 60%);
}

.hero-scroll-line .scroll-tip {
    position: absolute;
    right: 0;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--flame-red);
    border-right: 1.5px solid var(--flame-red);
    transform: rotate(45deg);
}

.hero-index {
    color: #8c8684;
    font-family: var(--display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.values-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(.6rem, 3.5vw, 4rem);
    min-height: 76px;
    padding: 1rem var(--gutter);
    border-block: 1px solid var(--line);
    background: #0b090b;
    color: var(--sandstone);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.values-band i {
    width: 5px;
    height: 5px;
    background: var(--flame-red);
    transform: rotate(45deg);
}

.section {
    padding: var(--section-space) var(--gutter);
}

.section > *,
.footer-main,
.footer-bottom {
    width: min(100%, var(--content));
    margin-inline: auto;
}

.section-kicker {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.section-kicker span:first-child {
    color: var(--flame-red);
}

.section-kicker i {
    display: inline-block;
    width: 42px;
    height: 1px;
    background: var(--burnt-umber);
}

.section-intro {
    background:
        radial-gradient(ellipse at 0 100%, rgb(75 45 46 / 16%), transparent 45%),
        var(--black-cherry);
}

.intro-layout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
    gap: clamp(2rem, 8vw, 8rem);
    margin-top: 2.8rem;
}

.intro-layout h2,
.section-heading h2,
.principles-copy h2,
.schedule-intro h2,
.admission h2 {
    margin-bottom: 0;
    font-size: clamp(2rem, 5vw, 5.8rem);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .98;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.intro-lede {
    color: var(--text);
    font-size: clamp(1.13rem, 1.8vw, 1.48rem);
    line-height: 1.5;
}

.intro-copy > p:not(.intro-lede) {
    max-width: 34rem;
    color: var(--text-muted);
    font-size: .95rem;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--flame-red);
    color: var(--sandstone);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.text-link span {
    color: var(--flame-red);
}

.intro-rule {
    display: flex;
    justify-content: space-between;
    margin-top: clamp(4rem, 8vw, 8rem);
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--warm-ash);
    font-size: .58rem;
    letter-spacing: .18em;
}

.section-training {
    background:
        linear-gradient(180deg, var(--obsidian), #0b080a 100%);
}

.section-heading {
    max-width: 760px;
}

.section-heading h2 {
    margin-top: 1.7rem;
}

.section-heading > p,
.section-heading-row > p {
    max-width: 35rem;
    margin: 1.3rem 0 0;
    color: var(--text-muted);
}

.training-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 3.5rem;
    background: var(--line);
    border: 1px solid var(--line);
}

.intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.8rem;
    margin-top: 1.2rem;
}

.training-card {
    position: relative;
    min-height: 380px;
    padding: clamp(1.6rem, 3vw, 2.6rem);
    overflow: hidden;
    background: #100d10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .2s ease, border-color .2s ease;
}

.training-card:hover {
    transform: translateY(-2px);
    border-color: rgb(244 44 29 / 35%);
}

.training-card::after {
    position: absolute;
    right: -3rem;
    bottom: -7rem;
    width: 15rem;
    aspect-ratio: 1;
    border: 1px solid rgb(244 44 29 / 15%);
    border-radius: 50%;
    content: "";
}

.training-card-accent {
    background: linear-gradient(145deg, #251719, #110d10 75%);
}

.training-card-top {
    position: relative;
    z-index: 1;
}

.training-card-bottom {
    position: relative;
    z-index: 1;
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgb(209 196 184 / 12%);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.card-number {
    color: var(--flame-red);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .15em;
}

.card-symbol {
    display: block;
    margin-top: 2rem;
    color: rgb(209 196 184 / 45%);
    font-family: var(--display);
    font-size: 2rem;
    line-height: 1;
}

.training-card h3 {
    margin: 1rem 0 .6rem;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 750;
    letter-spacing: -.02em;
    overflow-wrap: break-word;
}

.training-card p {
    max-width: 19rem;
    margin-bottom: 0;
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1.5;
}

.training-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.training-tag {
    display: inline-block;
    padding: .2rem .5rem;
    background: rgb(209 196 184 / 8%);
    border: 1px solid rgb(209 196 184 / 15%);
    border-radius: 2px;
    color: var(--warm-ash);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.card-status {
    color: var(--warm-ash);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.card-status-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--flame-red);
    text-decoration: none;
    font-weight: 700;
    transition: color .2s ease;
}

.card-status-link:hover {
    color: #fff;
}

.section-principles {
    display: grid;
    grid-template-columns: minmax(250px, .85fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 9vw, 9rem);
    align-items: center;
    background: linear-gradient(110deg, #111014, #171016 65%, #241214);
}

.principles-art {
    position: relative;
    display: grid;
    min-height: 460px;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(140deg, rgb(75 45 46 / 60%), transparent 58%),
        radial-gradient(circle at 50% 44%, rgb(212 17 21 / 24%), transparent 40%),
        #0b090b;
}

.principles-circle {
    position: absolute;
    width: min(78%, 380px);
    aspect-ratio: 1;
    border: 1px solid rgb(209 196 184 / 32%);
    border-radius: 50%;
}

.principles-circle::before,
.principles-circle::after {
    position: absolute;
    inset: 12%;
    border: 1px solid rgb(244 44 29 / 46%);
    border-radius: 50%;
    content: "";
}

.principles-circle::after {
    inset: 25%;
    border-color: rgb(209 196 184 / 20%);
}

.principles-kanji {
    position: relative;
    color: var(--sandstone);
    font-family: var(--display);
    font-size: clamp(7rem, 15vw, 13rem);
    font-weight: 900;
    letter-spacing: -.1em;
    line-height: 1;
    text-shadow: 0 15px 55px rgb(0 0 0 / 50%);
}

.principles-side-label {
    position: absolute;
    right: 1rem;
    bottom: 1.5rem;
    color: var(--warm-ash);
    font-size: .55rem;
    letter-spacing: .18em;
    writing-mode: vertical-rl;
}

.principles-copy h2 {
    margin-top: 1.6rem;
}

.principles-lede {
    max-width: 34rem;
    margin: 1.4rem 0 2rem;
    color: var(--text-muted);
    font-size: 1.02rem;
}

.principle-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.principle-list li {
    display: flex;
    gap: 1.3rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
}

.principle-list li > span {
    padding-top: .15rem;
    color: var(--flame-red);
    font-size: .65rem;
    letter-spacing: .08em;
}

.principle-list strong {
    font-family: var(--display);
    font-size: 1.15rem;
}

.principle-list p {
    margin: .2rem 0 0;
    color: var(--text-muted);
    font-size: .83rem;
}

.content-note {
    margin: 1rem 0 0;
    color: var(--warm-ash);
    font-size: .65rem;
}

.section-senseis {
    background: var(--obsidian);
}

.section-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    max-width: none;
    gap: 1.5rem 3rem;
}

.section-heading-row > p {
    max-width: 25rem;
    margin: 0 0 .4rem;
}

.sensei-placeholder {
    position: relative;
    display: flex;
    min-height: 210px;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;
    padding: 2rem clamp(1.5rem, 5vw, 5rem);
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(100deg, #141014, #0c0a0d);
}

.sensei-outline {
    display: grid;
    width: 96px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgb(244 44 29 / 50%);
    border-radius: 50%;
    color: var(--warm-ash);
    font-size: 2.5rem;
}

.sensei-placeholder p {
    margin: .4rem 0 0;
    color: var(--text-muted);
}

.sensei-mark {
    position: absolute;
    right: 3rem;
    color: rgb(209 196 184 / 6%);
    font-family: var(--display);
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 900;
    letter-spacing: -.08em;
}

.sensei-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.sensei-card {
    position: relative;
    padding: 2.2rem 2rem;
    border: 1px solid var(--line);
    background: linear-gradient(145deg, #130f14 0%, #0a080c 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px;
    border-radius: 4px;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), border-color .28s ease, box-shadow .28s ease;
}

.sensei-card:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 44, 29, 0.45);
    box-shadow: 0 16px 36px -10px rgba(244, 44, 29, 0.2);
}

.sensei-card-media {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.sensei-silhouette-frame {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sensei-silhouette-icon {
    width: 100%;
    height: 100%;
    display: block;
}

.sensei-monogram-initials {
    position: absolute;
    bottom: -3px;
    right: -3px;
    padding: .12rem .4rem;
    background: var(--obsidian);
    border: 1px solid rgba(244, 44, 29, 0.65);
    border-radius: 2px;
    color: var(--sandstone);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.sensei-kanji-stamp {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: rgba(212, 17, 21, 0.88);
    border-radius: 50%;
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

.sensei-badge-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
}

.sensei-num {
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 900;
    color: rgba(209, 196, 184, 0.2);
}

.sensei-badge {
    color: var(--flame-red);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sensei-card h3 {
    margin: 0 0 .35rem;
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: .02em;
}

.sensei-assoc {
    margin: 0 0 .9rem;
    color: var(--warm-ash);
    font-size: .75rem;
    letter-spacing: .03em;
    line-height: 1.4;
}

.sensei-desc {
    margin: 0 0 1.5rem;
    color: var(--text-muted);
    font-size: .83rem;
    line-height: 1.55;
}

.sensei-card-footer {
    padding-top: 1.25rem;
    border-top: 1px solid rgb(209 196 184 / 12%);
}

.sensei-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    min-height: 48px;
    padding: .8rem 1.2rem;
    border-radius: 2px;
    border: 1px solid rgba(244, 44, 29, 0.55);
    background: rgba(244, 44, 29, 0.1);
    color: #ffffff;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .06em;
    transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.sensei-phone-btn:hover {
    background: var(--flame-red);
    border-color: var(--flame-red);
    box-shadow: 0 0 20px rgba(244, 44, 29, 0.4);
    transform: translateY(-2px);
    color: #ffffff;
}

.sensei-phone-btn:focus-visible {
    outline: 2px solid var(--sandstone);
    outline-offset: 2px;
}

.phone-icon {
    display: inline-flex;
    align-items: center;
    color: var(--flame-red);
    transition: color .2s ease;
}

.sensei-phone-btn:hover .phone-icon {
    color: #ffffff;
}

.sensei-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.section-branches {
    background:
        radial-gradient(ellipse at 95% 10%, rgb(130 67 52 / 18%), transparent 44%),
        #100d10;
}

.branch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.branch-card {
    position: relative;
    border: 1px solid var(--line);
    background: linear-gradient(160deg, #110e12 0%, #070709 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 4px;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), border-color .28s ease, box-shadow .28s ease;
}

.branch-card:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 44, 29, 0.45);
    box-shadow: 0 16px 36px -10px rgba(244, 44, 29, 0.2);
}

.branch-card-header {
    position: relative;
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid rgb(209 196 184 / 10%);
    background: rgb(20 16 20 / 60%);
}

.branch-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.branch-num-badge {
    display: inline-block;
    padding: .25rem .65rem;
    border-radius: 2px;
    background: rgba(244, 44, 29, 0.16);
    border: 1px solid rgba(244, 44, 29, 0.45);
    color: var(--flame-red);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.branch-kanji-emblem {
    color: rgba(209, 196, 184, 0.2);
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 900;
}

.branch-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    border: 1px solid rgba(244, 44, 29, 0.28);
    background: #0d090d;
    overflow: hidden;
    transition: border-color .28s ease, box-shadow .28s ease;
}

.branch-card-media.branch-card-media-authentic {
    aspect-ratio: 4 / 3;
}

.branch-card:hover .branch-card-media {
    border-color: rgba(244, 44, 29, 0.55);
    box-shadow: 0 10px 28px -6px rgba(244, 44, 29, 0.35);
}

.branch-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.branch-card:hover .branch-card-img {
    transform: scale(1.025);
}

.branch-visual-mask {
    position: relative;
    width: 100%;
    min-height: 84px;
    height: clamp(84px, 8.5vw, 110px);
    border-radius: 4px;
    border: 1px dashed rgb(209 196 184 / 22%);
    background:
        radial-gradient(ellipse at 80% 50%, rgba(244, 44, 29, 0.18), transparent 65%),
        linear-gradient(135deg, rgba(28, 20, 26, 0.65) 0%, rgba(10, 8, 12, 0.95) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .85rem 1rem;
    text-align: center;
    overflow: hidden;
    transition: border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.branch-card:hover .branch-visual-mask {
    border-color: rgba(244, 44, 29, 0.45);
    background:
        radial-gradient(ellipse at 80% 50%, rgba(244, 44, 29, 0.25), transparent 65%),
        linear-gradient(135deg, rgba(35, 22, 30, 0.75) 0%, rgba(12, 9, 14, 0.98) 100%);
}

.branch-mask-icon {
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.85;
    transition: transform .25s ease, opacity .25s ease;
}

.branch-card:hover .branch-mask-icon {
    transform: scale(1.1);
    opacity: 1;
}

.branch-mask-label {
    color: var(--warm-ash);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.35;
    max-width: 240px;
}

.branch-card-body {
    padding: 1.6rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.branch-kicker {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--flame-red);
    margin-bottom: .35rem;
}

.branch-card h3 {
    margin: 0 0 1rem;
    font-family: var(--display);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    overflow-wrap: break-word;
}

.branch-address-wrap {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: 2px;
    background: rgba(7, 7, 9, 0.65);
    border: 1px solid rgb(209 196 184 / 10%);
    margin-top: auto;
}

.branch-pin-icon {
    color: var(--flame-red);
    flex-shrink: 0;
    margin-top: .1rem;
}

.branch-address {
    margin: 0;
    color: #d8cfc8;
    font-size: .82rem;
    line-height: 1.5;
}

.branch-card-actions {
    padding: 1.25rem 1.6rem;
    border-top: 1px solid rgb(209 196 184 / 10%);
    background: rgb(13 10 13 / 40%);
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.branch-directions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
    min-height: 48px;
    padding: .75rem 1rem;
    border-radius: 2px;
    border: 1px solid rgba(209, 196, 184, 0.25);
    background: rgba(20, 16, 20, 0.7);
    color: var(--sandstone);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: all .2s ease;
}

.branch-directions-btn:hover {
    border-color: var(--flame-red);
    background: rgba(244, 44, 29, 0.15);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(244, 44, 29, 0.25);
}

.branch-directions-btn:focus-visible {
    outline: 2px solid var(--flame-red);
    outline-offset: 2px;
}

.branch-enquire-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .65rem 1rem;
    color: var(--warm-ash);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color .2s ease;
}

.branch-enquire-btn:hover {
    color: var(--flame-red);
}

.branch-footer-note {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border-radius: 2px;
    background: rgba(20, 16, 20, 0.55);
    border: 1px solid rgb(209 196 184 / 12%);
    color: var(--warm-ash);
    font-size: .76rem;
    line-height: 1.5;
}

.branch-footer-note .note-icon {
    color: var(--flame-red);
    font-size: 1rem;
    flex-shrink: 0;
}

.achievement-strip {
    padding: clamp(4.5rem, 8vw, 7rem) var(--gutter);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgb(22 11 13 / 97%), rgb(75 45 46 / 89%)),
        var(--oxblood);
}

.achievement-inner {
    position: relative;
    display: flex;
    width: min(100%, var(--content));
    align-items: center;
    gap: clamp(2rem, 7vw, 7rem);
    margin-inline: auto;
}

.achievement-stamp {
    display: grid;
    width: 112px;
    aspect-ratio: 1;
    flex: 0 0 auto;
    place-content: center;
    border: 1px solid rgb(209 196 184 / 55%);
    border-radius: 50%;
    color: var(--sandstone);
    font-family: var(--display);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: .85;
    text-align: center;
}

.achievement-inner .section-kicker {
    color: var(--sandstone);
}

.achievement-inner h2 {
    margin: 1rem 0 .8rem;
    font-family: var(--display);
    font-size: clamp(2.3rem, 4.7vw, 4.6rem);
    font-weight: 850;
    letter-spacing: -.04em;
    line-height: 1;
    text-transform: uppercase;
}

.achievement-inner p {
    max-width: 38rem;
    margin: 0;
    color: #ddd0cc;
    font-size: .9rem;
}

.achievement-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.5rem;
}

.achievement-pill {
    display: inline-block;
    padding: .35rem .85rem;
    background: rgb(0 0 0 / 40%);
    border: 1px solid rgb(209 196 184 / 22%);
    border-radius: 2px;
    color: var(--sandstone);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.achievement-outline {
    position: absolute;
    right: 0;
    color: rgb(209 196 184 / 7%);
    font-family: var(--display);
    font-size: 15rem;
    font-weight: 900;
    line-height: .8;
}

.section-schedule {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: clamp(3rem, 9vw, 9rem);
    background: #0b090b;
}

.schedule-intro h2 {
    margin-top: 1.6rem;
}

.schedule-intro > p {
    max-width: 27rem;
    margin: 1.4rem 0 1.3rem;
    color: var(--text-muted);
}

.schedule-note {
    color: var(--warm-ash);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .13em;
}

.schedule-times {
    border-top: 1px solid var(--line);
}

.schedule-row {
    display: grid;
    grid-template-columns: .7fr 1.3fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--line);
}

.schedule-period {
    color: var(--warm-ash);
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.schedule-row strong {
    font-family: var(--display);
    font-size: clamp(1.45rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.schedule-row small {
    color: var(--warm-ash);
    font-family: var(--body);
    font-size: .52em;
    font-weight: 600;
    letter-spacing: .05em;
}

.schedule-row strong b {
    margin-inline: .45rem;
    color: var(--flame-red);
    font-size: .65em;
}

.schedule-tag {
    padding: .35rem .55rem;
    border: 1px solid rgb(175 160 160 / 40%);
    color: var(--warm-ash);
    font-size: .54rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.section-gallery {
    background: var(--black-cherry);
}

.gallery-placeholders {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr;
    gap: .8rem;
    margin-top: 3rem;
}

.gallery-placeholder {
    position: relative;
    display: flex;
    min-height: 260px;
    align-items: end;
    justify-content: space-between;
    padding: 1.2rem;
    overflow: hidden;
    border: 1px solid rgb(209 196 184 / 20%);
    background:
        radial-gradient(circle at 70% 32%, rgb(130 67 52 / 34%), transparent 39%),
        linear-gradient(145deg, #20171b, #0d0b0f 72%);
}

.gallery-placeholder::before,
.gallery-placeholder::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76%;
    height: 1px;
    background: rgb(209 196 184 / 13%);
    content: "";
    transform: translate(-50%, -50%) rotate(-35deg);
}

.gallery-placeholder::after {
    transform: translate(-50%, -50%) rotate(35deg);
}

.gallery-placeholder span,
.gallery-placeholder b {
    position: relative;
    z-index: 1;
    color: var(--warm-ash);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .13em;
}

.gallery-placeholder b {
    color: var(--flame-red);
}

.gallery-placeholder-wide {
    min-height: 340px;
    background:
        radial-gradient(circle at 65% 34%, rgb(212 17 21 / 22%), transparent 38%),
        linear-gradient(145deg, #29191b, #0d0b0f 72%);
}

/* Belt Levels Details Section */
.section-belt-levels,
.section-fees {
    background:
        radial-gradient(ellipse at 15% 85%, rgb(75 45 46 / 35%), transparent 45%),
        radial-gradient(ellipse at 85% 15%, rgb(212 17 21 / 15%), transparent 40%),
        linear-gradient(180deg, var(--obsidian) 0%, #110d11 100%);
    border-top: 1px solid rgb(209 196 184 / 10%);
    scroll-margin-top: 5rem;
}

.belt-collapsible,
.fees-collapsible {
    margin-top: 2.5rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgb(13 10 13 / 85%);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.belt-collapsible:hover,
.belt-collapsible:focus-within,
.fees-collapsible:hover,
.fees-collapsible:focus-within {
    border-color: rgb(209 196 184 / 28%);
}

.belt-collapse-trigger,
.fees-collapse-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.6rem 2rem;
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease;
}

.belt-collapse-trigger:hover,
.fees-collapse-trigger:hover {
    background: rgb(209 196 184 / 4%);
}

.belt-collapse-trigger:focus-visible,
.fees-collapse-trigger:focus-visible {
    outline: 2px solid var(--flame-red);
    outline-offset: -2px;
}

.belt-trigger-lead,
.fees-trigger-lead {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

.belt-trigger-icon,
.fees-trigger-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    border: 1px solid rgb(244 44 29 / 40%);
    background: rgb(244 44 29 / 12%);
    color: var(--flame-red);
    flex-shrink: 0;
}

.belt-trigger-text,
.fees-trigger-text {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.belt-trigger-kicker,
.fees-trigger-kicker {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--warm-ash);
}

.belt-trigger-title,
.fees-trigger-title {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 800;
    letter-spacing: .02em;
    color: #ffffff;
}

.belt-trigger-desc,
.fees-trigger-desc {
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.45;
}

.belt-trigger-status,
.fees-trigger-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.belt-trigger-pill,
.fees-trigger-pill {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    border-radius: 20px;
    border: 1px solid rgb(244 44 29 / 40%);
    background: rgb(244 44 29 / 10%);
    color: var(--sandstone);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.belt-chevron,
.fees-chevron {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgb(7 7 9 / 60%);
    color: var(--sandstone);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .2s ease;
}

.belt-collapse-trigger:hover .belt-chevron,
.fees-collapse-trigger:hover .fees-chevron {
    border-color: var(--flame-red);
    color: #ffffff;
}

.belt-collapse-trigger[aria-expanded="true"] .belt-chevron,
.fees-collapse-trigger[aria-expanded="true"] .fees-chevron {
    transform: rotate(180deg);
    background: rgb(244 44 29 / 20%);
    border-color: var(--flame-red);
}

.belt-collapse-content,
.fees-collapse-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .38s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
    border-top: 1px solid transparent;
}

.belt-collapse-content[data-state="open"],
.fees-collapse-content[data-state="open"] {
    grid-template-rows: 1fr;
    opacity: 1;
    border-top-color: var(--line);
}

.belt-collapse-inner,
.fees-collapse-inner {
    overflow: hidden;
    visibility: hidden;
    transition: visibility .38s;
}

.belt-collapse-content[data-state="open"] .belt-collapse-inner,
.fees-collapse-content[data-state="open"] .fees-collapse-inner {
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .belt-collapse-content,
    .fees-collapse-content,
    .belt-chevron,
    .fees-chevron {
        transition: none !important;
    }
}

.belt-container,
.fees-container {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
    margin-top: 0;
    padding: 2.2rem;
}

.belt-table-card,
.fees-table-card {
    border: 1px solid var(--line);
    background: rgb(13 10 13 / 90%);
    box-shadow: 0 20px 45px rgb(0 0 0 / 40%);
    overflow: hidden;
}

.belt-table-responsive,
.fees-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.belt-table,
.fees-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: .9rem;
}

.belt-table th,
.belt-table td,
.fees-table th,
.fees-table td {
    padding: .95rem 1.25rem;
    border-bottom: 1px solid rgb(209 196 184 / 12%);
}

.belt-table th,
.fees-table th {
    background: rgb(7 7 9 / 80%);
    color: var(--warm-ash);
    font-family: var(--body);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.belt-table tbody tr,
.fees-table tbody tr {
    transition: background .15s ease;
}

.belt-table tbody tr:hover,
.fees-table tbody tr:hover {
    background: rgb(209 196 184 / 5%);
}

.belt-table tbody tr:last-child td,
.fees-table tbody tr:last-child td {
    border-bottom: 0;
}

.th-rank,
.td-rank {
    width: 60px;
    text-align: center;
}

.belt-rank {
    display: inline-block;
    color: var(--warm-ash);
    font-size: .75rem;
    font-weight: 700;
}

.belt-label-cell {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.belt-color-chip {
    display: inline-block;
    width: 28px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgb(255 255 255 / 15%);
    flex-shrink: 0;
}

.belt-name {
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: .02em;
    color: var(--text);
}

.text-right {
    text-align: right;
}

.belt-stage-badge {
    display: inline-flex;
    align-items: center;
    padding: .32rem .75rem;
    border-radius: 20px;
    border: 1px solid rgb(209 196 184 / 22%);
    background: rgb(209 196 184 / 6%);
    color: var(--sandstone);
    font-family: var(--body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: all .2s ease;
}

.belt-table tbody tr:hover .belt-stage-badge,
.fees-table tbody tr:hover .belt-stage-badge {
    border-color: rgb(244 44 29 / 40%);
    background: rgb(244 44 29 / 12%);
    color: #ffffff;
}

.section-belt-levels {
    scroll-margin-top: 5rem;
}

.anchor-alias {
    position: relative;
    top: -5.5rem;
    display: block;
    visibility: hidden;
    pointer-events: none;
}

.belt-notes-card,
.fees-notes-card {
    padding: 2rem;
    border: 1px solid rgb(209 196 184 / 20%);
    background: rgb(16 11 15 / 85%);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.belt-notes-header,
.fees-notes-header {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.belt-notes-icon,
.fees-notes-icon {
    font-size: 1.25rem;
}

.belt-notes-header h3,
.fees-notes-header h3 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.belt-notes-list,
.fees-notes-list {
    margin: 0;
    padding: 0 0 0 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    color: #e2d5d0;
    font-size: .84rem;
    line-height: 1.55;
}

.belt-notes-list li::marker,
.fees-notes-list li::marker {
    color: var(--flame-red);
}

.belt-status-banner,
.fees-status-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.15rem;
    border-left: 3px solid var(--flame-red);
    background: rgb(75 45 46 / 25%);
    font-size: .75rem;
    color: var(--warm-ash);
    line-height: 1.5;
}

.belt-status-banner .status-dot,
.fees-status-banner .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--flame-red);
    margin-top: .4rem;
    flex-shrink: 0;
}

.belt-status-banner p,
.fees-status-banner p {
    margin: 0;
}

.belt-status-banner em,
.fees-status-banner em {
    color: var(--sandstone);
    font-style: normal;
    font-weight: 700;
}

.admission {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 9rem) var(--gutter);
    background:
        radial-gradient(ellipse at 95% 90%, rgb(244 44 29 / 27%), transparent 40%),
        linear-gradient(113deg, #280f12, var(--oxblood) 68%, #31191b);
}

.admission-inner {
    position: relative;
    z-index: 1;
    width: min(100%, var(--content));
    margin-inline: auto;
}

.admission .section-kicker {
    color: var(--sandstone);
}

.admission h2 {
    max-width: 850px;
    margin-top: 1.7rem;
    font-size: clamp(3rem, 7vw, 6.8rem);
}

.admission h2 em {
    color: var(--sandstone);
}

.admission-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    margin-top: 2rem;
}

.admission-info {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.admission-lede {
    max-width: 34rem;
    margin: 0;
    color: #e2d5d0;
    font-size: 1.02rem;
    line-height: 1.6;
}

.admission-status {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--sandstone);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .13em;
}

.admission-status i {
    display: inline-block;
    background: var(--sandstone);
    box-shadow: none;
}

.admission-whatsapp-box {
    margin-top: 0.8rem;
    padding: 1.5rem;
    border: 1px solid rgb(209 196 184 / 16%);
    background: rgb(7 7 9 / 55%);
    backdrop-filter: blur(8px);
}

.admission-whatsapp-box h3 {
    margin-bottom: 0.45rem;
    font-size: 1.15rem;
    color: var(--text);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admission-whatsapp-box p {
    margin: 0 0 1.2rem;
    font-size: 0.83rem;
    color: var(--warm-ash);
    line-height: 1.55;
}

/* Accessible Admission Form Card */
.admission-card {
    position: relative;
    padding: clamp(1.6rem, 3.5vw, 2.75rem);
    border: 1px solid rgb(209 196 184 / 22%);
    background: rgb(13 10 13 / 88%);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 48px rgb(0 0 0 / 50%);
}

.admission-card-header {
    margin-bottom: 1.6rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgb(209 196 184 / 14%);
}

.admission-card-header h3 {
    margin: 0 0 0.35rem;
    font-size: 1.45rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admission-card-header p {
    margin: 0;
    color: var(--warm-ash);
    font-size: 0.78rem;
}

.required-mark {
    color: var(--flame-red);
}

/* Form Groups & Controls */
.admission-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.form-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sandstone);
}

.form-label .required-indicator {
    color: var(--flame-red);
    margin-left: 0.2rem;
}

.form-label .optional-indicator {
    color: var(--warm-ash);
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: lowercase;
}

.form-control {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(209 196 184 / 24%);
    border-radius: 0;
    background: rgb(7 7 9 / 75%);
    color: var(--text);
    font-family: var(--body);
    font-size: 0.92rem;
    line-height: 1.5;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.form-control::placeholder {
    color: rgb(175 160 160 / 60%);
}

textarea.form-control {
    min-height: 105px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d1c4b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px;
    padding-right: 2.5rem;
    cursor: pointer;
}

.form-control:focus {
    outline: none;
    border-color: var(--flame-red);
    background: rgb(13 10 13 / 95%);
    box-shadow: 0 0 0 3px rgb(244 44 29 / 20%);
}

.form-control[aria-invalid="true"] {
    border-color: var(--flame-red);
    background: rgb(212 17 21 / 8%);
}

.field-error {
    margin: 0;
    color: #ff6b6b;
    font-size: 0.74rem;
    line-height: 1.4;
}

.form-submit-row {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.form-submit-row .button {
    width: 100%;
    cursor: pointer;
}

.form-disclaimer {
    margin: 0;
    color: var(--warm-ash);
    font-size: 0.72rem;
    line-height: 1.5;
}

.form-disclaimer em {
    color: var(--sandstone);
    font-style: normal;
    font-weight: 600;
}

/* Feedback Notifications */
.admission-feedback {
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid transparent;
}

.admission-feedback-success {
    background: rgb(23 45 32 / 90%);
    border-color: #25d366;
    color: #e6f9ed;
}

.admission-feedback-success h4 {
    margin: 0 0 0.4rem;
    font-family: var(--display);
    font-size: 1.15rem;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admission-feedback-success p {
    margin: 0 0 0.5rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #d1fae5;
}

.admission-feedback-success .feedback-next-step {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgb(74 222 128 / 20%);
    font-size: 0.78rem;
    color: var(--sandstone);
}

.admission-feedback-error {
    background: rgb(60 18 20 / 90%);
    border-color: var(--flame-red);
    color: #ffe4e4;
}

.admission-feedback-error h4 {
    margin: 0 0 0.35rem;
    font-family: var(--display);
    font-size: 1.08rem;
    color: #ff8585;
    text-transform: uppercase;
}

.admission-feedback-error p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
}

.admission-feedback-error ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Accessible visually-hidden utility */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.admission-watermark {
    position: absolute;
    z-index: -1;
    right: -1rem;
    bottom: -7rem;
    color: rgb(7 7 9 / 17%);
    font-family: var(--display);
    font-size: clamp(20rem, 47vw, 48rem);
    font-weight: 900;
    letter-spacing: -.12em;
    line-height: .8;
}

.site-footer {
    padding: 3.5rem var(--gutter) 1.2rem;
    background: #080709;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: start;
    gap: 3rem;
    padding-bottom: 3rem;
}

.footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    text-decoration: none;
    color: var(--text);
}

.footer-logo {
    width: 58px;
    height: auto;
    aspect-ratio: 1;
    display: block;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.footer-brand-link:hover .footer-logo {
    transform: scale(1.04);
}

.footer-wordmark {
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: .07em;
}

.footer-brand p,
.footer-note p {
    max-width: 22rem;
    margin: .55rem 0 0;
    color: var(--text-muted);
    font-size: .77rem;
}

.footer-note .eyebrow {
    color: var(--sandstone);
    font-size: .56rem;
}

.back-to-top {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: var(--sandstone);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.back-to-top span {
    color: var(--flame-red);
    font-size: 1rem;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .55rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    color: var(--warm-ash);
    font-size: .66rem;
    letter-spacing: .04em;
    line-height: 1.6;
}

.footer-copyright {
    margin: 0;
    color: var(--warm-ash);
    font-size: clamp(0.64rem, 0.78vw, 0.72rem);
    letter-spacing: .03em;
    line-height: 1.5;
}

.footer-bottom-separator {
    display: block;
    width: 32px;
    height: 1px;
    background: rgb(209 196 184 / 16%);
    margin: .15rem auto;
}

.footer-credit {
    margin: 0;
    color: #8c8684;
    font-size: clamp(0.6rem, 0.72vw, 0.68rem);
    letter-spacing: .04em;
    line-height: 1.5;
}

.footer-credit-highlight {
    color: var(--flame-red);
    font-weight: 600;
    letter-spacing: .05em;
}

/* ==========================================================================
   ABOUT PAGE STYLES (Step 2: About the Association)
   ========================================================================== */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    margin-bottom: 1rem;
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--warm-ash);
}

.breadcrumb a {
    color: var(--sandstone);
    transition: color .2s ease;
}

.breadcrumb a:hover {
    color: var(--flame-red);
}

.breadcrumb span[aria-current="page"] {
    color: var(--flame-red);
    font-weight: 700;
}

.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-inline: var(--gutter);
    background:
        radial-gradient(ellipse at 75% 45%, rgb(75 45 46 / 35%), transparent 40%),
        radial-gradient(ellipse at 92% 10%, rgb(212 17 21 / 14%), transparent 30%),
        linear-gradient(115deg, var(--obsidian) 5%, #0e0a0e 55%, #140d10 100%);
    border-bottom: 1px solid var(--line);
}

.page-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, var(--obsidian) 0%, rgb(7 7 9 / 95%) 42%, rgb(7 7 9 / 40%) 100%);
    content: "";
}

.page-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 4.5rem);
    width: min(100%, var(--content));
    margin-inline: auto;
    padding-block: clamp(2.5rem, 5vh, 3.8rem) clamp(3.5rem, 6vh, 4.5rem);
}

.page-hero-copy {
    position: relative;
    z-index: 2;
}

.page-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.15rem;
    color: var(--sandstone);
}

.page-hero-eyebrow .hero-eyebrow-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--flame-red);
    box-shadow: 0 0 15px rgb(244 44 29 / 75%);
    flex-shrink: 0;
}

.page-hero h1 {
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.04;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.page-hero-lede {
    max-width: 34rem;
    margin-bottom: 1.75rem;
    color: #d5ccca;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.55;
}

.page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.page-hero-art {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    justify-self: end;
    display: grid;
    place-items: center;
}

.page-hero-art-frame {
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
}

.page-hero-art-ring {
    position: absolute;
    width: 86%;
    aspect-ratio: 1;
    border: 1px solid rgb(244 44 29 / 24%);
    border-radius: 50%;
    pointer-events: none;
}

.page-hero-watermark {
    position: absolute;
    top: 5%;
    right: -2%;
    color: rgb(209 196 184 / 7%);
    font-family: var(--display);
    font-size: clamp(8rem, 18vw, 18rem);
    font-weight: 900;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
    user-select: none;
}

.page-hero-art img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    object-position: center 18%;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgb(0 0 0 / 85%), 0 0 45px rgb(212 17 21 / 18%);
    border: 1px solid rgb(209 196 184 / 14%);
}

.page-hero-badge {
    position: absolute;
    z-index: 2;
    bottom: -1rem;
    left: 1.5rem;
    padding: .6rem 1.1rem;
    background: rgb(16 13 16 / 94%);
    border: 1px solid var(--combat-red);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgb(0 0 0 / 70%);
    display: flex;
    flex-direction: column;
}

.page-hero-badge .badge-title {
    font-family: var(--display);
    font-size: .88rem;
    font-weight: 900;
    letter-spacing: .08em;
    color: #fff;
}

.page-hero-badge .badge-subtitle {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--warm-ash);
}

/* 02. Association Overview Section */
.section-about-overview {
    background:
        radial-gradient(ellipse at 0 100%, rgb(75 45 46 / 15%), transparent 45%),
        var(--black-cherry);
}

.about-overview-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
    gap: clamp(2.5rem, 6vw, 6rem);
    margin-top: 2.8rem;
}

.overview-lead-col h2 {
    margin-bottom: 2rem;
}

.association-callout {
    border-left: 3px solid var(--combat-red);
    background: rgb(23 16 22 / 85%);
    border-top: 1px solid rgb(209 196 184 / 8%);
    border-right: 1px solid rgb(209 196 184 / 8%);
    border-bottom: 1px solid rgb(209 196 184 / 8%);
    padding: clamp(1.4rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.callout-kicker {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--flame-red);
}

.callout-title {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.callout-text {
    font-size: .92rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

.callout-text strong {
    color: var(--sandstone);
}

.overview-body-col > p:not(.intro-lede) {
    color: var(--text-muted);
    font-size: .95rem;
    margin-bottom: 1.2rem;
}

.association-facts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 2.5rem;
}

.fact-card {
    background: #0d0a0d;
    padding: 1.4rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.fact-number {
    font-family: var(--display);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--flame-red);
    line-height: 1;
    letter-spacing: -.02em;
}

.fact-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sandstone);
    line-height: 1.35;
}

/* 03. Mission and Vision Section */
.section-mission-vision {
    background: linear-gradient(180deg, var(--obsidian), #0b080a 100%);
}

.mv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 3.5rem;
}

.mv-card {
    padding: clamp(2rem, 3.5vw, 3rem);
    background: #0e0b0e;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.mv-card-mission {
    border-top: 3px solid var(--combat-red);
}

.mv-card-vision {
    border-top: 3px solid var(--burnt-umber);
}

.mv-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.mv-kanji {
    font-family: var(--display);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--sandstone);
    opacity: .35;
    line-height: 1;
}

.mv-badge {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .3rem .65rem;
    border-radius: 2px;
    background: rgb(209 196 184 / 10%);
    color: var(--sandstone);
}

.mv-card h3 {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: -.02em;
}

.mv-statement {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    color: #fff;
    font-style: italic;
    line-height: 1.55;
    margin-bottom: 2rem;
}

.mv-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.mv-points li {
    position: relative;
    padding-left: 1.3rem;
    font-size: .92rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.mv-points li::before {
    content: "▪";
    position: absolute;
    left: 0;
    color: var(--flame-red);
    font-size: .8rem;
}

/* 04. Core Values Section */
.section-values {
    background: var(--black-cherry);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 3.5rem;
}

.value-item {
    background: #0d0a0d;
    padding: clamp(1.6rem, 2.5vw, 2.2rem);
    display: flex;
    flex-direction: column;
    transition: background .2s ease;
}

.value-item:hover {
    background: #140d12;
}

.value-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.value-kanji {
    font-family: var(--display);
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--flame-red);
    opacity: .75;
    line-height: 1;
}

.value-index {
    font-family: var(--display);
    font-size: .75rem;
    font-weight: 800;
    color: var(--warm-ash);
    letter-spacing: .1em;
}

.value-item h3 {
    font-size: 1.35rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: .25rem;
    letter-spacing: -.01em;
}

.value-sub {
    color: var(--flame-red);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .85rem;
    display: block;
}

.value-item p {
    font-size: .9rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* 05. Leadership & Instructors Section */
.section-leadership {
    background: var(--obsidian);
}

.leadership-notice {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    padding: 1.25rem 1.6rem;
    border: 1px solid rgb(209 196 184 / 16%);
    border-left: 3px solid var(--flame-red);
    background: #120e12;
    margin: 2.2rem 0 3rem;
}

.notice-icon {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgb(244 44 29 / 15%);
    color: var(--flame-red);
    font-size: .85rem;
    font-weight: 800;
    flex-shrink: 0;
}

.notice-body strong {
    display: block;
    color: #fff;
    font-size: .88rem;
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.notice-body p {
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1.5;
    margin: 0;
}

.sensei-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.2rem, 2vw, 2rem);
}

.sensei-profile-card {
    background: #0f0b0f;
    border: 1px solid var(--line);
    padding: clamp(1.5rem, 2.5vw, 2.2rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 4px;
    transition: border-color .2s ease, transform .2s ease;
}

.sensei-profile-card:hover {
    border-color: rgb(244 44 29 / 45%);
    transform: translateY(-2px);
}

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

.sensei-number {
    font-family: var(--display);
    font-size: .75rem;
    font-weight: 800;
    color: var(--warm-ash);
    letter-spacing: .1em;
}

.sensei-crest {
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--flame-red);
    opacity: .7;
    line-height: 1;
}

.sensei-badge {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--flame-red);
    display: block;
}

.sensei-card-main h3 {
    font-size: 1.45rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: .3rem 0 .2rem;
}

.sensei-association {
    font-size: .72rem;
    color: var(--warm-ash);
    margin-bottom: 1rem;
    line-height: 1.35;
}

.sensei-desc {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1.8rem;
}

.sensei-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .85rem 1rem;
    background: rgb(209 196 184 / 6%);
    border: 1px solid var(--line);
    color: var(--sandstone);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    width: 100%;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.sensei-phone-btn:hover {
    background: var(--combat-red);
    border-color: var(--flame-red);
    color: #fff;
}

.sensei-phone-btn .phone-icon {
    color: var(--flame-red);
    font-size: .95rem;
}

.sensei-phone-btn:hover .phone-icon {
    color: #fff;
}

.leadership-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2.5rem;
}

/* 06. Training Philosophy Section */
.section-philosophy {
    background:
        radial-gradient(ellipse at 100% 0, rgb(75 45 46 / 18%), transparent 40%),
        var(--black-cherry);
}

.philosophy-layout {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    align-items: start;
    gap: clamp(2.5rem, 6vw, 6rem);
    margin-top: 2.8rem;
}

.philosophy-note {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgb(16 13 16 / 85%);
    border: 1px solid var(--line);
    border-left: 3px solid var(--flame-red);
}

.philosophy-note strong {
    display: block;
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: .4rem;
}

.philosophy-note p {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 1rem;
}

.philosophy-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.philosophy-pillar-card {
    background: #0d0a0d;
    border: 1px solid var(--line);
    padding: clamp(1.4rem, 2vw, 1.8rem);
    display: flex;
    flex-direction: column;
}

.philosophy-pillar-card.pillar-accent {
    border-color: rgb(212 17 21 / 40%);
    background: #130a0d;
}

.pillar-marker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pillar-kanji {
    font-family: var(--display);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--flame-red);
    opacity: .8;
    line-height: 1;
}

.pillar-label {
    font-size: .62rem;
    font-weight: 700;
    color: var(--warm-ash);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.philosophy-pillar-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.philosophy-pillar-card p {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* 07. About CTA Section */
.section-about-cta {
    background: linear-gradient(180deg, var(--black-cherry), var(--obsidian) 100%);
    padding-top: 0;
}

.about-cta-panel {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    background:
        radial-gradient(ellipse at 10% 90%, rgb(212 17 21 / 22%), transparent 40%),
        #120c11;
    border: 1px solid rgb(212 17 21 / 35%);
    padding: clamp(1.5rem, 4vw, 4.5rem);
    align-items: center;
}

.about-cta-content h2 {
    font-size: clamp(1.6rem, 4.5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 1.2rem 0 1rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.about-cta-content p {
    color: #d5ccca;
    font-size: .98rem;
    line-height: 1.55;
    max-width: 34rem;
}

.cta-branch-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.5rem 0 2rem;
}

.cta-branch-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    background: rgb(209 196 184 / 8%);
    border: 1px solid var(--line);
    font-size: .72rem;
    font-weight: 700;
    color: var(--sandstone);
    letter-spacing: .05em;
}

.cta-branch-pill .pill-num {
    color: var(--flame-red);
    font-family: var(--display);
}

.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.about-cta-aside {
    background: #090709;
    border: 1px solid var(--line);
    padding: clamp(1.8rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.aside-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--line);
}

.aside-badge img {
    margin-bottom: .75rem;
}

.aside-wordmark {
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.aside-wordmark b {
    color: var(--flame-red);
}

.aside-sub {
    font-size: .62rem;
    color: var(--warm-ash);
    margin-top: .25rem;
    max-width: 16rem;
    line-height: 1.35;
}

.aside-contact-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.aside-list-title {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sandstone);
    margin-bottom: .25rem;
}

.aside-phone-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .8rem;
    background: rgb(209 196 184 / 4%);
    border: 1px solid rgb(209 196 184 / 10%);
    font-size: .78rem;
    transition: all .2s ease;
}

.aside-phone-row:hover {
    background: var(--combat-red);
    border-color: var(--flame-red);
    color: #fff;
}

.aside-sensei-name {
    font-weight: 700;
}

.aside-sensei-num {
    color: var(--warm-ash);
    font-family: var(--display);
    letter-spacing: .05em;
}

.aside-phone-row:hover .aside-sensei-num {
    color: #fff;
}

/* About Page Responsive Rules */
@media (max-width: 1024px) {
    .page-hero-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding-block: 2.5rem 3.5rem;
    }

    .page-hero-art {
        justify-self: center;
        max-width: 420px;
    }

    .about-overview-layout,
    .philosophy-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-cta-panel {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 860px) {
    .values-grid,
    .sensei-cards-grid {
        grid-template-columns: 1fr;
    }

    .mv-grid {
        grid-template-columns: 1fr;
    }

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

    .philosophy-pillars {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .association-facts-grid {
        grid-template-columns: 1fr;
    }

    .page-hero-actions,
    .about-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-hero-badge {
        left: .5rem;
        bottom: -.5rem;
        padding: .5rem .8rem;
    }
}

/* ==========================================================================
   SENSEIS & BRANCHES PAGE STYLES (Step 3)
   ========================================================================== */

.sensei-monogram {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .65rem;
    border-radius: 3px;
    background: rgb(244 44 29 / 12%);
    border: 1px solid rgb(244 44 29 / 30%);
}

.mono-initials {
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: .06em;
}

.mono-kanji {
    font-family: var(--display);
    font-size: .85rem;
    color: var(--flame-red);
}

.section-branches-dir {
    background:
        radial-gradient(ellipse at 50% 100%, rgb(75 45 46 / 16%), transparent 50%),
        var(--black-cherry);
}

.branch-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    margin-top: 3.5rem;
}

.branch-detail-card {
    background: #0f0b0f;
    border: 1px solid var(--line);
    padding: clamp(1.6rem, 2.5vw, 2.2rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-radius: 4px;
    transition: border-color .2s ease, transform .2s ease;
}

.branch-detail-card:hover {
    border-color: rgb(244 44 29 / 50%);
    transform: translateY(-3px);
}

.branch-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.branch-num-badge {
    font-family: var(--display);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--flame-red);
    background: rgb(212 17 21 / 10%);
    padding: .25rem .65rem;
    border-radius: 2px;
    border: 1px solid rgb(212 17 21 / 25%);
}

.branch-kanji-marker {
    font-family: var(--display);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--sandstone);
    opacity: .3;
    line-height: 1;
}

.branch-detail-body h3 {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 1rem 0 .2rem;
    letter-spacing: -.02em;
}

.branch-sub {
    font-size: .72rem;
    color: var(--warm-ash);
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.branch-address-box {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    background: rgb(16 13 16 / 85%);
    border: 1px solid rgb(209 196 184 / 12%);
    margin-bottom: 1.25rem;
}

.address-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.address-text .address-label {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--warm-ash);
    margin-bottom: .25rem;
}

.address-text p {
    font-size: .88rem;
    color: var(--sandstone);
    line-height: 1.45;
    margin: 0;
}

.branch-curriculum-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.6rem;
}

.b-tag {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .25rem .55rem;
    background: rgb(209 196 184 / 6%);
    border: 1px solid rgb(209 196 184 / 14%);
    color: var(--warm-ash);
}

.branch-enquire-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: .85rem;
}

.branch-subactions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.branch-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sandstone);
    padding: .55rem .8rem;
    background: rgb(209 196 184 / 4%);
    border: 1px solid var(--line);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.branch-action-link:hover {
    background: rgb(244 44 29 / 15%);
    border-color: var(--flame-red);
    color: #fff;
}

.section-schedules {
    background:
        radial-gradient(ellipse at 100% 100%, rgb(75 45 46 / 15%), transparent 40%),
        var(--obsidian);
}

.schedule-disclaimer-box {
    margin-top: 2rem;
    padding: 1.4rem;
    background: #120d11;
    border: 1px solid var(--line);
    border-left: 3px solid var(--flame-red);
}

.disclaimer-badge {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--flame-red);
    display: block;
    margin-bottom: .5rem;
}

.schedule-disclaimer-box p {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

.disclaimer-action-note {
    margin-top: .75rem !important;
    color: var(--sandstone) !important;
    font-size: .82rem !important;
}

.schedule-cards-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.schedule-period-card {
    background: #0e0b0e;
    border: 1px solid var(--line);
    padding: clamp(1.5rem, 2.5vw, 2rem);
}

.schedule-period-card.period-accent {
    border-color: rgb(212 17 21 / 35%);
    background: #130a0d;
}

.period-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

.period-icon {
    font-size: 1.3rem;
}

.period-label {
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: .06em;
}

.period-status {
    margin-left: auto;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    background: rgb(209 196 184 / 10%);
    color: var(--sandstone);
}

.period-time {
    font-family: var(--display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 900;
    color: var(--flame-red);
    margin-bottom: .5rem;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.period-desc {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 1024px) {
    .branch-detail-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes art-enter {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 1500px) {
    .hero-inner {
        min-height: min(840px, 100svh);
    }
}

@media (max-width: 1200px) {
    .header-inner {
        min-height: 104px;
        gap: 1.5rem;
    }

    .brand-logo {
        width: 78px;
    }

    .brand-name {
        font-size: 1.8rem;
    }

    .brand-tagline,
    .brand-association {
        font-size: .64rem;
        max-width: 22rem;
    }

    .hero-copy {
        width: 100%;
    }

    .hero h1 {
        font-size: clamp(2.35rem, 3.4vw, 3.1rem);
    }
}

@media (min-width: 1025px) and (max-width: 1340px) {
    .header-inner {
        gap: clamp(0.55rem, 1vw, 1.25rem);
    }
    .primary-navigation {
        gap: clamp(0.42rem, 0.85vw, 0.95rem);
    }
    .primary-navigation > a:not(.nav-cta) {
        font-size: clamp(0.69rem, 0.76vw, 0.76rem);
    }
    .brand-tagline {
        max-width: 13.5rem;
    }
}

@media (max-width: 1024px) {
    body.is-menu-open {
        overflow: hidden;
    }

    .header-inner {
        min-height: 96px;
        padding-block: .65rem;
    }

    .brand-logo {
        width: 70px;
    }

    .brand-name {
        font-size: 1.65rem;
    }

    .brand-tagline,
    .brand-association {
        font-size: .58rem;
        max-width: 18rem;
    }

    .menu-toggle {
        position: relative;
        z-index: 22;
        display: inline-flex;
        align-items: center;
        gap: .85rem;
        padding: .7rem 0 .7rem .7rem;
        border: 0;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: .66rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .menu-toggle-icon {
        display: grid;
        gap: 5px;
    }

    .menu-toggle-icon i {
        display: block;
        width: 23px;
        height: 1px;
        background: var(--flame-red);
        transition: transform .2s ease;
    }

    .is-menu-open .menu-toggle-icon i:first-child {
        transform: translateY(3px) rotate(45deg);
    }

    .is-menu-open .menu-toggle-icon i:last-child {
        transform: translateY(-3px) rotate(-45deg);
    }

    .primary-navigation {
        position: absolute;
        inset: 100% 0 auto;
        display: none;
        align-items: stretch;
        gap: 0;
        padding: .5rem var(--gutter) 1.5rem;
        border-bottom: 1px solid var(--line);
        background: #070709;
        box-shadow: 0 16px 32px rgb(0 0 0 / 80%);
        max-height: calc(100vh - 100%);
        max-height: calc(100dvh - 100%);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .is-menu-open .primary-navigation {
        display: flex;
        flex-direction: column;
    }

    .primary-navigation > a:not(.nav-cta) {
        padding: .8rem 0;
        border-bottom: 1px solid rgb(209 196 184 / 12%);
        font-size: .85rem;
    }

    .primary-navigation .nav-cta {
        justify-content: space-between;
        margin-top: 1rem;
    }

    .hero-copy {
        width: 88%;
    }

    .hero h1 {
        font-size: clamp(2.75rem, 4vw, 3.6rem);
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    .hero-art {
        justify-self: center;
        width: 100%;
        max-width: 480px;
        min-height: 0;
        height: clamp(400px, 50vh, 520px);
        overflow: visible;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .hero-stage {
        height: 100%;
    }

    .section-principles {
        grid-template-columns: .75fr 1.25fr;
        gap: 3rem;
    }

    .principles-art {
        min-height: 380px;
    }

    .schedule-row {
        grid-template-columns: .65fr 1.35fr;
    }

    .schedule-tag {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 700px) {
    :root {
        --section-space: 5rem;
    }

    html {
        scroll-padding-top: 5.75rem;
    }

    :target,
    [id] {
        scroll-margin-top: 5.75rem;
    }

    .header-inner {
        min-height: 84px;
        padding-block: .65rem;
        gap: .8rem;
    }

    .brand {
        gap: .75rem;
    }

    .brand-logo {
        width: 60px;
    }

    .brand-copy {
        gap: .18rem;
    }

    .brand-name {
        font-size: 1.45rem;
        letter-spacing: .05em;
    }

    .brand-tagline,
    .brand-association {
        max-width: 13.5rem;
        font-size: .52rem;
        line-height: 1.25;
    }

    .footer-logo {
        width: 48px;
    }

    .hero,
    .hero-inner {
        min-height: auto;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        align-items: flex-start;
        padding-top: 1.25rem;
        padding-bottom: 2.2rem;
    }

    .hero::before {
        background: linear-gradient(180deg, rgb(7 7 9 / 45%) 10%, rgb(7 7 9 / 74%) 45%, var(--obsidian) 94%);
    }

    .hero-copy {
        width: 100%;
        padding-top: 0;
    }

    .hero-eyebrow {
        margin-bottom: 0.75rem;
        font-size: .62rem;
    }

    .hero h1 {
        max-width: none;
        font-size: clamp(2rem, 8vw, 2.65rem);
        line-height: 1.06;
        margin-bottom: 0.85rem;
    }

    .hero-lede {
        max-width: 25rem;
        margin-bottom: 1.25rem;
        font-size: .95rem;
        line-height: 1.5;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
        max-width: 22rem;
        gap: .65rem;
        margin-bottom: .85rem;
    }

    .button {
        min-height: 48px;
        padding: .75rem 1.25rem;
        justify-content: space-between;
    }

    .hero-whatsapp-slot {
        margin-bottom: 1.25rem;
    }

    .hero-affiliation {
        max-width: 22rem;
        margin-top: 0;
        font-size: .6rem;
    }

    /* Fixed Martial Artist Stage for Mobile: Clean Seamless Blending (Zero Poster Box) */
    .hero-art {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: min(100%, 460px);
        min-height: 0;
        height: clamp(380px, 58vh, 480px);
        margin: 1.25rem auto 0;
        opacity: 1;
        justify-self: center;
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .hero-stage {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .hero-stage-sequence {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        overflow: visible;
    }

    .hero-seq-frame,
    .hero-stage-media,
    .hero-stage-fallback {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }

    .hero-art-number {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: clamp(8rem, 26vw, 13rem);
        line-height: 1;
    }

    .hero-art-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: clamp(240px, 72vw, 320px);
        height: clamp(240px, 72vw, 320px);
        max-width: 92%;
    }

    .hero-floor-sheen {
        bottom: 0;
        left: 0;
        right: 0;
        height: 70px;
    }

    .hero-vertical-mantra {
        display: none;
    }

    .hero-bottom-bar {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        padding-inline: 0;
        margin-top: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .hero-scroll {
        font-size: .56rem;
    }

    .hero-index {
        font-size: .65rem;
    }

    .values-band {
        min-height: 64px;
        gap: clamp(.55rem, 3vw, 1.1rem);
        font-size: .53rem;
        letter-spacing: .11em;
    }

    .values-band i {
        width: 4px;
        height: 4px;
    }

    .intro-layout {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        margin-top: 2rem;
    }

    .intro-layout h2,
    .section-heading h2,
    .principles-copy h2,
    .schedule-intro h2 {
        font-size: clamp(1.65rem, 7.5vw, 2.85rem);
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .intro-rule {
        gap: 1rem;
        margin-top: 3.4rem;
        font-size: .48rem;
        letter-spacing: .11em;
    }

    .training-grid,
    .branch-grid {
        grid-template-columns: 1fr;
    }

    .training-grid {
        gap: 1px;
        margin-top: 2.2rem;
    }

    .training-card {
        min-height: 270px;
        padding: 1.5rem;
    }

    .card-symbol {
        margin-top: 1.5rem;
    }

    .section-principles {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .principles-art {
        min-height: 310px;
        order: 2;
    }

    .principles-copy {
        order: 1;
    }

    .principles-kanji {
        font-size: 8rem;
    }

    .principles-circle {
        width: 72%;
    }

    .section-heading-row {
        display: block;
    }

    .section-heading-row > p {
        margin-top: 1rem;
    }

    .sensei-placeholder {
        min-height: 175px;
        gap: 1.1rem;
        margin-top: 2rem;
        padding: 1.3rem;
    }

    .sensei-outline {
        width: 67px;
        font-size: 1.8rem;
    }

    .sensei-mark {
        right: .5rem;
        bottom: -.1rem;
        font-size: 5rem;
    }

    .sensei-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .branch-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-top: 2rem;
    }

    .belt-collapse-trigger,
    .fees-collapse-trigger {
        padding: 1.25rem 1.4rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .belt-trigger-status,
    .fees-trigger-status {
        width: 100%;
        justify-content: space-between;
    }

    .belt-container,
    .fees-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.25rem;
    }

    .achievement-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .achievement-stamp {
        width: 62px;
        font-size: 1.15rem;
    }

    .achievement-inner h2 {
        font-size: clamp(2.1rem, 9vw, 3.5rem);
    }

    .achievement-inner p {
        font-size: .82rem;
    }

    .achievement-outline {
        display: none;
    }

    .section-schedule {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .schedule-row {
        grid-template-columns: .65fr 1.35fr;
        gap: .55rem;
        padding: 1.3rem 0;
    }

    .schedule-row strong {
        font-size: clamp(1.35rem, 6vw, 2rem);
    }

    .schedule-period {
        font-size: .63rem;
    }

    .schedule-tag {
        font-size: .48rem;
    }

    .gallery-placeholders {
        grid-template-columns: 1fr 1fr;
        gap: .55rem;
        margin-top: 2rem;
    }

    .gallery-placeholder,
    .gallery-placeholder-wide {
        min-height: 185px;
        padding: .8rem;
    }

    .gallery-placeholder-wide {
        grid-column: 1 / -1;
        min-height: 245px;
    }

    .gallery-placeholder span,
    .gallery-placeholder b {
        font-size: .47rem;
    }

    .admission-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .admission h2 {
        font-size: clamp(3rem, 12vw, 5rem);
    }

    .admission-watermark {
        right: -1rem;
        bottom: -2rem;
        font-size: 19rem;
    }

    .footer-main {
        grid-template-columns: 1fr auto;
        gap: 1.5rem;
        padding-bottom: 2rem;
    }

    .footer-note {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .footer-bottom {
        gap: .45rem;
        padding-top: 1.35rem;
    }

    .footer-copyright {
        font-size: .62rem;
        line-height: 1.5;
    }

    .footer-credit {
        font-size: .58rem;
        line-height: 1.5;
    }
}

@media (max-width: 380px) {
    .header-inner {
        min-height: 78px;
        padding-block: .5rem;
        gap: .5rem;
    }

    .brand {
        gap: .6rem;
    }

    .brand-logo {
        width: 56px;
    }

    .brand-name {
        font-size: 1.35rem;
    }

    .brand-tagline,
    .brand-association {
        max-width: 10.5rem;
        font-size: .48rem;
        line-height: 1.2;
    }

    .hero h1 {
        font-size: clamp(1.75rem, 7.5vw, 2.1rem);
    }

    .hero-art {
        height: clamp(340px, 54vh, 400px);
        max-width: min(100%, 360px);
    }

    .values-band {
        gap: .45rem;
        font-size: .47rem;
    }

    .schedule-row strong {
        font-size: 1.2rem;
    }

    .admission-card {
        padding: 1.2rem;
    }

    .button-whatsapp-pending {
        padding: 0.75rem 0.95rem;
        font-size: 0.67rem;
        gap: 0.55rem;
    }

    .button-whatsapp-pending .pending-pill {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .hero-stage-sequence,
    .hero-stage-video,
    .hero-sparks-canvas,
    .hero-smoke,
    .hero-energy-trail {
        display: none !important;
    }

    .hero-stage-fallback {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   ENHANCED COMPONENTS & SPRINTS MODULES (KARATE 365)
   ========================================================================== */

/* Status Pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid var(--line);
    color: var(--text);
}

.status-pill .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.status-pill-verified,
.status-pill-open,
.status-pill-resolved {
    background: rgb(46 139 87 / 18%);
    border-color: rgb(46 139 87 / 45%);
    color: #4ade80;
}

.status-pill-upcoming,
.status-pill-contacted {
    background: rgb(58 117 196 / 18%);
    border-color: rgb(58 117 196 / 45%);
    color: #93c5fd;
}

.status-pill-new {
    background: rgb(244 44 29 / 18%);
    border-color: rgb(244 44 29 / 45%);
    color: #f87171;
}

.status-pill-follow_up,
.status-pill-postponed {
    background: rgb(230 115 0 / 18%);
    border-color: rgb(230 115 0 / 45%);
    color: #fb923c;
}

.status-pill-closed,
.status-pill-completed {
    background: rgb(255 255 255 / 8%);
    border-color: rgb(255 255 255 / 15%);
    color: var(--text-muted);
}

/* Profile & Branch Heroes */
.profile-hero .page-hero-inner,
.branch-hero .page-hero-inner {
    align-items: center;
}

.profile-badge-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.profile-org-label {
    font-size: 0.82rem;
    color: var(--sandstone);
    font-weight: 600;
}

.profile-title {
    font-size: clamp(1.6rem, 5vw, 3.8rem);
    line-height: 1.15;
    margin: 0.4rem 0 0.8rem;
    color: #fff;
    font-family: var(--display);
    overflow-wrap: break-word;
    word-break: break-word;
}

.profile-designation {
    font-size: 1.1rem;
    color: var(--flame-red);
    font-weight: 700;
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
}

.profile-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 1.75rem 0;
}

.credential-notice-box {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    background: rgb(75 45 46 / 25%);
    border: 1px solid rgb(244 44 29 / 30%);
    border-radius: 8px;
    margin-top: 1.5rem;
}

.credential-notice-box .notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.credential-notice-box strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.credential-notice-box p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Portrait Card / Monogram Stage */
.profile-portrait-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgb(0 0 0 / 60%);
}

.portrait-monogram-stage {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgb(75 45 46 / 40%), var(--obsidian) 70%);
    border-bottom: 1px solid var(--line);
}

.portrait-monogram-stage .portrait-ring {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px dashed rgb(244 44 29 / 40%);
    animation: slowSpin 60s linear infinite;
}

@keyframes slowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.portrait-monogram-stage .portrait-kanji {
    position: absolute;
    font-size: 8rem;
    font-weight: 900;
    color: rgb(255 255 255 / 3%);
    pointer-events: none;
}

.portrait-initials-display {
    font-size: 4.8rem;
    font-weight: 900;
    font-family: var(--display);
    color: var(--sandstone);
    letter-spacing: 0.05em;
    text-shadow: 0 0 24px rgb(244 44 29 / 35%);
}

.portrait-caption {
    padding: 1.5rem;
    text-align: center;
}

.portrait-caption-title {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--display);
}

.portrait-caption-note {
    display: block;
    font-size: 0.88rem;
    color: var(--flame-red);
    font-weight: 600;
    margin: 0.25rem 0 0.65rem;
}

.portrait-pending-badge {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: rgb(255 255 255 / 5%);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    border: 1px dashed var(--line);
}

/* Specialities Grid */
.speciality-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.speciality-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.75rem;
    position: relative;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.speciality-card:hover {
    transform: translateY(-4px);
    border-color: rgb(244 44 29 / 45%);
}

.speciality-card .spec-num {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--flame-red);
    font-family: var(--display);
    margin-bottom: 0.5rem;
}

.speciality-card h3 {
    margin: 0 0 0.65rem;
    font-size: 1.2rem;
    color: #fff;
    font-family: var(--display);
}

.speciality-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* Technique Gallery Grid */
.technique-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.75rem;
    margin-top: 2rem;
}

.technique-card {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.technique-card:hover,
.technique-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--flame-red);
    box-shadow: 0 14px 28px rgb(0 0 0 / 50%);
}

.tech-media-frame {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #000;
}

.tech-media-frame picture {
    display: block;
    width: 100%;
    height: 100%;
}

.tech-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.technique-card:hover .tech-media-frame img {
    transform: scale(1.05);
}

.tech-card-sensei-img {
    object-fit: cover;
}

.tech-card-naveen-img {
    object-position: center 25%;
}

.tech-card-sadiq-img {
    object-position: center 20%;
}

.tech-card-manjunath-img {
    object-position: center 24%;
}

.tech-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(7 7 9 / 85%) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.technique-card:hover .tech-overlay,
.technique-card:focus-visible .tech-overlay {
    opacity: 1;
}

.tech-zoom-icon {
    font-size: 0.78rem;
    color: #fff;
    font-weight: 700;
    background: rgb(244 44 29 / 85%);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
}

.tech-cat-pill {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgb(0 0 0 / 70%);
    color: var(--sandstone);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    border: 1px solid var(--line);
}

.tech-caption {
    padding: 1.25rem;
}

.tech-caption h4 {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    color: #fff;
    font-family: var(--display);
}

.tech-caption p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Branch Specific Styles */
.branch-hero-address-card {
    display: flex;
    gap: 1.1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin: 1.5rem 0;
}

.branch-hero-address-card .address-pin-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.branch-hero-address-card .address-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--flame-red);
    margin-bottom: 0.25rem;
}

.branch-hero-address-card .address-full {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}

.branch-hero-address-card .address-landmark {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.branch-stage-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgb(0 0 0 / 60%);
}

.branch-card-visual-top {
    position: relative;
    height: 300px;
    background: radial-gradient(circle at center, rgb(75 45 46 / 45%), var(--obsidian) 75%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.branch-card-visual-top.branch-visual-authentic {
    height: auto;
    aspect-ratio: 4 / 3;
}

.branch-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.branch-stage-card:hover .branch-hero-image {
    transform: scale(1.02);
}

.branch-large-num {
    font-size: 6rem;
    font-weight: 900;
    font-family: var(--display);
    color: rgb(255 255 255 / 4%);
    position: absolute;
}

.branch-kanji-bg {
    font-size: 8rem;
    font-weight: 900;
    color: rgb(244 44 29 / 6%);
    position: absolute;
    pointer-events: none;
}

.branch-photo-fallback {
    position: relative;
    text-align: center;
    padding: 1.5rem;
    z-index: 2;
}

.branch-photo-fallback .camera-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.65rem;
}

.branch-photo-fallback .fallback-title {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--display);
}

.branch-photo-fallback .fallback-notice {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    max-width: 280px;
}

.branch-stage-meta {
    padding: 1.25rem;
}

.branch-stage-meta .meta-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgb(255 255 255 / 5%);
    font-size: 0.88rem;
}

.branch-stage-meta .meta-row:last-child {
    border-bottom: none;
}

.branch-stage-meta .meta-label {
    color: var(--text-muted);
}

.branch-stage-meta .meta-value {
    color: #fff;
    text-align: right;
}

/* Highlights Grid */
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.highlight-card {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.highlight-check {
    color: var(--flame-red);
    font-weight: 900;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.highlight-card p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.5;
}

/* Pagination Strip */
.profile-nav-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
    border-top: 1px solid var(--line);
    margin-top: 4rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.profile-nav-link {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.profile-nav-link:hover {
    border-color: var(--flame-red);
    transform: translateY(-2px);
}

.profile-nav-link .nav-direction {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--flame-red);
}

.profile-nav-link .nav-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--display);
}

.profile-nav-all {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--sandstone);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Gallery Styles & Filter Pills */
.gallery-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.5rem;
}

.gallery-filter-nav .filter-pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-pill {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    transition: all 0.2s ease;
}

.filter-pill:hover {
    border-color: var(--sandstone);
    color: #fff;
}

.filter-pill.is-active {
    background: var(--flame-red);
    border-color: var(--flame-red);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 14px rgb(244 44 29 / 40%);
}

.gallery-integrity-notice {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 1.25rem;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 2rem;
}

.gallery-integrity-notice .notice-icon {
    font-size: 1.35rem;
}

.gallery-integrity-notice p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.video-showcase-panel {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2.5rem;
    align-items: center;
}

.video-card-frame {
    position: relative;
    background: #000;
    aspect-ratio: 16 / 9;
}

.featured-kata-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--flame-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
}

.video-info-col {
    padding: 2rem;
}

.video-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--flame-red);
    letter-spacing: 0.08em;
}

.video-info-col h3 {
    margin: 0.35rem 0 0.75rem;
    font-size: 1.5rem;
    color: #fff;
    font-family: var(--display);
}

.video-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

.video-meta-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.v-tag {
    font-size: 0.75rem;
    background: rgb(255 255 255 / 6%);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    border: 1px solid var(--line);
    color: var(--sandstone);
}

.video-spec-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.gallery-masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1.75rem;
}

.gallery-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.gallery-tile:hover,
.gallery-tile:focus-visible {
    transform: translateY(-4px);
    border-color: var(--flame-red);
    box-shadow: 0 16px 32px rgb(0 0 0 / 60%);
}

.gallery-tile-art {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #050507;
}

.gallery-tile-art picture {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-tile-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    transition: transform 0.4s ease;
}

.gallery-tile-art img.tile-img-sensei-full {
    object-position: center center;
}

.gallery-tile-art img.tile-img-naveen-pose,
.gallery-tile-art img.tile-img-manjunath-pose {
    object-position: center 35%;
}

.gallery-tile-art img.tile-img-sadiq-action {
    object-position: center 65%;
}

.gallery-tile-art img.tile-img-manjunath-low {
    object-position: center 45%;
}

.gallery-tile:hover .gallery-tile-art img {
    transform: scale(1.06);
}

.tile-hover-mask {
    position: absolute;
    inset: 0;
    background: rgb(7 7 9 / 65%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gallery-tile:hover .tile-hover-mask,
.gallery-tile:focus-visible .tile-hover-mask {
    opacity: 1;
}

.tile-zoom-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--flame-red);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.tile-category-tag {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgb(0 0 0 / 75%);
    color: var(--sandstone);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    border: 1px solid var(--line);
}

.tile-sensei-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgb(217 29 37 / 92%), rgb(138 14 21 / 92%));
    color: #fff;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    border: 1px solid rgb(255 255 255 / 22%);
    box-shadow: 0 4px 12px rgb(0 0 0 / 45%);
}

.gallery-tile-info {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.gallery-tile-info .tile-title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    color: #fff;
    font-family: var(--display);
}

.gallery-tile-info .tile-caption {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.tile-footer-meta {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid rgb(255 255 255 / 8%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tile-sensei-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--flame-red);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.tile-sensei-link:hover,
.tile-sensei-link:focus-visible {
    color: #ff4d54;
    transform: translateX(3px);
}

.lightbox-sensei-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--flame-red);
    text-decoration: none;
}

.lightbox-sensei-link[hidden] {
    display: none !important;
}

.lightbox-sensei-link:hover,
.lightbox-sensei-link:focus-visible {
    color: #ff4d54;
    text-decoration: underline;
}

.gallery-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 12px;
}

.gallery-empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.gallery-empty-state h3 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    color: #fff;
    font-family: var(--display);
}

.gallery-empty-state p {
    max-width: 540px;
    margin: 0 auto 1.5rem;
    color: var(--text-muted);
}

/* Lightbox Modal */
.lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox-modal.is-open {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(7 7 9 / 94%);
    backdrop-filter: blur(8px);
}

.lightbox-container {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-stage {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgb(0 0 0 / 80%);
}

.lightbox-image {
    max-height: 60vh;
    width: 100%;
    object-fit: contain;
    background: #000;
}

.lightbox-meta {
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--line);
    position: relative;
}

.lightbox-category-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--flame-red);
    margin-bottom: 0.25rem;
}

.lightbox-title {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
    color: #fff;
    font-family: var(--display);
}

.lightbox-caption {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 800px;
}

.lightbox-counter {
    position: absolute;
    top: 1.25rem;
    right: 1.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sandstone);
}

.lightbox-close-btn {
    position: absolute;
    top: -3.5rem;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem;
    transition: color 0.2s ease;
}

.lightbox-close-btn:hover {
    color: var(--flame-red);
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgb(16 13 16 / 80%);
    border: 1px solid var(--line);
    color: #fff;
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lightbox-nav-btn:hover {
    background: var(--flame-red);
    border-color: var(--flame-red);
}

.lightbox-prev-btn { left: -3.5rem; }
.lightbox-next-btn { right: -3.5rem; }

@media (max-width: 768px) {
    .lightbox-container {
        width: 95vw;
    }
    .lightbox-prev-btn { left: 0.5rem; }
    .lightbox-next-btn { right: 0.5rem; }
    .lightbox-close-btn { top: -2.8rem; right: 0.25rem; }
}

body.lightbox-locked {
    overflow: hidden !important;
}

/* Events & Results Page */
.events-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.5rem;
}

.events-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.75rem;
    margin-bottom: 3.5rem;
}

.event-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.event-card:hover {
    transform: translateY(-3px);
    border-color: rgb(244 44 29 / 40%);
}

.event-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.event-date-badge .event-cat-tag {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--flame-red);
    letter-spacing: 0.08em;
}

.event-date-badge .event-date-text {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--display);
}

.event-card-body h3 {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    color: #fff;
    font-family: var(--display);
    line-height: 1.3;
}

.event-meta-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}

.event-meta-list .meta-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.88rem;
}

.event-meta-list .meta-caption {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.event-meta-list p {
    margin: 0;
    color: #fff;
    font-weight: 500;
}

.event-description {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 1.25rem;
}

.event-instructions-box {
    padding: 0.85rem 1rem;
    background: rgb(255 255 255 / 4%);
    border-left: 3px solid var(--sandstone);
    font-size: 0.82rem;
    margin-bottom: 1.5rem;
}

.event-instructions-box strong {
    display: block;
    color: #fff;
    margin-bottom: 0.2rem;
}

.event-instructions-box p {
    margin: 0;
    color: var(--text-muted);
}

.event-card-footer {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.results-pending-card {
    display: flex;
    gap: 1.5rem;
    padding: 2.5rem;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 12px;
    align-items: flex-start;
}

.results-pending-card .pending-stamp {
    font-size: 2.2rem;
    color: var(--sandstone);
    flex-shrink: 0;
}

.results-pending-card h3 {
    margin: 0 0 0.65rem;
    font-size: 1.35rem;
    color: #fff;
    font-family: var(--display);
}

.results-pending-card p {
    margin: 0 0 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.results-pending-card .pending-sub {
    font-size: 0.88rem;
    color: var(--sandstone);
}

.results-pending-card .pending-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.category-chip {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    background: rgb(255 255 255 / 6%);
    border-radius: 4px;
    border: 1px solid var(--line);
}

.medal-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 999px;
}

.medal-gold {
    background: rgb(212 175 55 / 20%);
    color: #ffd700;
    border: 1px solid rgb(212 175 55 / 50%);
}

.medal-silver {
    background: rgb(192 192 192 / 20%);
    color: #e5e7eb;
    border: 1px solid rgb(192 192 192 / 50%);
}

.medal-bronze {
    background: rgb(205 127 50 / 20%);
    color: #f97316;
    border: 1px solid rgb(205 127 50 / 50%);
}

/* Programs Detailed Grid */
.programs-detailed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 2rem;
}

.program-detail-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.program-detail-card:hover {
    transform: translateY(-4px);
    border-color: rgb(244 44 29 / 45%);
}

.prog-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.prog-badge-group {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.prog-num {
    font-size: 1.2rem;
    font-weight: 900;
    font-family: var(--display);
    color: var(--flame-red);
}

.prog-kanji {
    font-size: 1.5rem;
    color: var(--sandstone);
    font-weight: 900;
}

.prog-audience-badge {
    font-size: 0.75rem;
    background: rgb(255 255 255 / 6%);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--sandstone);
    font-weight: 600;
}

.prog-card-body h3 {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
    color: #fff;
    font-family: var(--display);
}

.prog-tagline {
    font-size: 0.95rem;
    color: var(--flame-red);
    font-weight: 600;
    margin: 0 0 1rem;
}

.prog-description {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.prog-objectives-box {
    background: rgb(0 0 0 / 40%);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.prog-objectives-box .box-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--sandstone);
    letter-spacing: 0.05em;
    margin-bottom: 0.65rem;
}

.prog-objectives-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.prog-objectives-list li {
    font-size: 0.88rem;
    color: var(--text);
    position: relative;
    padding-left: 1.15rem;
    line-height: 1.45;
}

.prog-objectives-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--flame-red);
    font-weight: 900;
}

.prog-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}

.prog-meta-cell .meta-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}

.prog-meta-cell p {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: #fff;
}

.prog-card-footer {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}

/* Beginner Guide Layout */
.guide-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: flex-start;
}

.guide-notice-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: rgb(75 45 46 / 25%);
    border: 1px solid rgb(244 44 29 / 30%);
    border-radius: 8px;
    margin-top: 1.5rem;
}

.guide-notice-card .notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.guide-notice-card strong {
    display: block;
    color: #fff;
    margin-bottom: 0.25rem;
}

.guide-notice-card p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.guide-steps-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.step-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    align-items: flex-start;
}

.step-number {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--flame-red);
    font-family: var(--display);
    line-height: 1;
}

.step-content h3 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
    color: #fff;
    font-family: var(--display);
}

.step-content p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* Etiquette Grid */
.etiquette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.etiquette-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.75rem;
    position: relative;
}

.etiquette-kanji {
    display: block;
    font-size: 2.2rem;
    color: var(--sandstone);
    font-weight: 900;
    margin-bottom: 0.65rem;
}

.etiquette-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: #fff;
    font-family: var(--display);
}

.etiquette-card p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Belt Levels Banner Card */
.belt-banner-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--surface) 0%, rgb(75 45 46 / 35%) 100%);
    border: 1px solid rgb(244 44 29 / 35%);
    border-radius: 12px;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.banner-kicker {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--flame-red);
    letter-spacing: 0.08em;
}

.belt-banner-card h2 {
    margin: 0.35rem 0 0.5rem;
    font-size: 1.75rem;
    color: #fff;
    font-family: var(--display);
}

.belt-banner-card p {
    margin: 0;
    color: var(--text-muted);
    max-width: 650px;
}

/* Policies Page Quicknav & Blocks */
.policy-quicknav-band {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 4.5rem;
    z-index: 90;
    backdrop-filter: blur(8px);
    max-width: 100%;
    overflow: hidden;
}

.quicknav-inner {
    width: 100%;
    max-width: var(--content);
    margin: 0 auto;
    padding: 0.85rem var(--gutter);
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.quicknav-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--flame-red);
    letter-spacing: 0.05em;
}

.quicknav-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sandstone);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.quicknav-link:hover {
    background: rgb(255 255 255 / 8%);
    color: #fff;
}

.policy-content-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.policy-block h3 {
    margin: 0 0 0.65rem;
    font-size: 1.25rem;
    color: #fff;
    font-family: var(--display);
}

.policy-block p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.safety-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.safety-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.75rem;
}

.safety-card .safety-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.65rem;
}

.safety-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: #fff;
    font-family: var(--display);
}

.safety-card p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* FAQ Accordion */
.faq-accordion-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.faq-item[open] {
    border-color: rgb(244 44 29 / 45%);
}

.faq-question {
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--display);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    user-select: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    color: var(--flame-red);
    font-weight: 900;
    transition: transform 0.2s ease;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.faq-answer p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Form Checkbox Styles */
.form-group-checkbox {
    margin: 1.25rem 0;
}

.checkbox-label {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.45;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--flame-red);
    margin-top: 0.15rem;
    flex-shrink: 0;
    cursor: pointer;
}

/* Footer Columns Grid */
.footer-columns-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 2.5rem;
    padding: 4.5rem var(--gutter) 3rem;
    max-width: var(--content);
    margin: 0 auto;
}

.footer-col-title {
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--sandstone);
    letter-spacing: 0.08em;
    margin: 0 0 1.25rem;
    font-family: var(--display);
}

.footer-links-list,
.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links-list a {
    font-size: 0.88rem;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.footer-links-list a:hover {
    color: var(--flame-red);
}

.footer-phone-link {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.footer-phone-link:hover {
    transform: translateX(4px);
}

.footer-phone-link .f-sensei-name {
    color: #fff;
    font-weight: 600;
}

.footer-phone-link .f-sensei-num {
    color: var(--flame-red);
    font-size: 0.8rem;
}

.footer-values-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.footer-values-pills span {
    font-size: 0.72rem;
    background: rgb(255 255 255 / 6%);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--sandstone);
}

.footer-portal-link-wrap {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.footer-admin-link {
    font-size: 0.78rem;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.footer-admin-link:hover {
    color: var(--sandstone);
}

/* Admin Dashboard Specific Styles */
.admin-body {
    background: #09070a;
}

.admin-login-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem var(--gutter);
}

.admin-login-card {
    max-width: 460px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 25px 60px rgb(0 0 0 / 80%);
}

.admin-login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.admin-brand-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.aside-badge img,
.admin-brand img,
.admin-brand-link img {
    border-radius: 50%;
    object-fit: contain;
    display: block;
}

.admin-wordmark {
    font-size: 1.35rem;
    font-weight: 900;
    font-family: var(--display);
    color: #fff;
}

.admin-wordmark b {
    color: var(--flame-red);
}

.admin-portal-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--flame-red);
    letter-spacing: 0.1em;
    background: rgb(244 44 29 / 15%);
    border: 1px solid rgb(244 44 29 / 35%);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}

.admin-login-header h2 {
    margin: 0 0 0.5rem;
    font-size: 1.6rem;
    color: #fff;
    font-family: var(--display);
}

.admin-login-header p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.admin-login-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.admin-back-link {
    font-size: 0.85rem;
    color: var(--sandstone);
    font-weight: 600;
}

.admin-dashboard-body {
    background: #09070a;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-topbar-inner {
    max-width: var(--content);
    margin: 0 auto;
    padding: 0.85rem var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.admin-wordmark small {
    font-size: 0.65rem;
    background: var(--flame-red);
    color: #fff;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.admin-nav {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.admin-nav-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sandstone);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.admin-nav-link:hover,
.admin-nav-link.is-active {
    background: rgb(255 255 255 / 8%);
    color: #fff;
}

.admin-nav-link.is-active {
    color: var(--flame-red);
}

.admin-user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-user-pill {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 600;
}

.user-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
}

.admin-logout-btn {
    font-size: 0.82rem;
    color: var(--sandstone);
    border: 1px solid var(--line);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.admin-logout-btn:hover {
    border-color: var(--flame-red);
    color: var(--flame-red);
}

.admin-layout-container {
    flex: 1;
    max-width: var(--content);
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem var(--gutter);
}

.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.admin-kicker {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--flame-red);
    letter-spacing: 0.08em;
}

.admin-title {
    margin: 0.35rem 0 0;
    font-size: 2.2rem;
    color: #fff;
    font-family: var(--display);
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.75rem;
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.stat-card.stat-accent {
    border-color: rgb(244 44 29 / 45%);
    background: linear-gradient(135deg, var(--surface) 0%, rgb(75 45 46 / 35%) 100%);
}

.stat-card .stat-icon {
    font-size: 2.2rem;
}

.stat-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stat-value {
    display: block;
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    font-family: var(--display);
    line-height: 1.1;
}

.stat-sub {
    font-size: 0.75rem;
    color: var(--sandstone);
}

.admin-section {
    margin-bottom: 3rem;
}

.admin-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-section-heading h2 {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
    color: #fff;
    font-family: var(--display);
}

.admin-section-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.admin-table-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.sub-cell {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
}

.phone-link {
    color: var(--flame-red);
    font-weight: 600;
}

.btn-compact {
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
}

.admin-system-box {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.sys-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}

.sys-value {
    font-size: 0.85rem;
    color: var(--sandstone);
}

/* Split Layout for Enquiries */
.admin-split-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    align-items: flex-start;
}

@media (max-width: 1024px) {
    .admin-split-layout {
        grid-template-columns: 1fr;
    }
}

.detail-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.75rem;
    position: sticky;
    top: 5.5rem;
}

.detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
}

.detail-card-header h3 {
    margin: 0.35rem 0 0.2rem;
    font-size: 1.4rem;
    color: #fff;
    font-family: var(--display);
}

.detail-timestamp {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.close-detail {
    font-size: 1.8rem;
    color: var(--text-muted);
    line-height: 1;
}

.close-detail:hover {
    color: #fff;
}

.ref-badge {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--flame-red);
    letter-spacing: 0.08em;
}

.detail-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}

.info-row {
    font-size: 0.88rem;
}

.info-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.info-val {
    color: #fff;
}

.applicant-msg-box {
    padding: 0.85rem;
    background: rgb(0 0 0 / 40%);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.5;
}

.admin-filter-toolbar {
    margin-bottom: 1.75rem;
}

.admin-filter-form {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.filter-group label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sandstone);
    text-transform: uppercase;
}

.form-control-sm {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
}

.is-selected-row {
    background: rgb(244 44 29 / 8%);
}

.admin-card-boxed {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 2.25rem;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-col-full { grid-column: 1 / -1; }

.form-control-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
}

.admin-footer {
    background: var(--surface);
    border-top: 1px solid var(--line);
    text-align: center;
    padding: 1.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .footer-columns-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .footer-col-brand {
        grid-column: 1 / -1;
    }

    .video-showcase-panel {
        grid-template-columns: 1fr;
    }

    .guide-layout {
        grid-template-columns: 1fr;
    }
}

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

    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-topbar-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ==========================================================================
   KARATE 365 CMS — Admin Styling & Components
   ========================================================================== */

.admin-subnav {
    background: #0d0a0d;
    border-top: 1px solid rgb(255 255 255 / 6%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-subnav-inner {
    max-width: var(--content);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    gap: 0.25rem;
    align-items: center;
    white-space: nowrap;
}

.admin-subnav-inner .admin-nav-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sandstone);
    padding: 0.75rem 0.9rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-subnav-inner .admin-nav-link:hover {
    color: #fff;
    background: rgb(255 255 255 / 4%);
}

.admin-subnav-inner .admin-nav-link.is-active {
    color: var(--flame-red);
    background: transparent;
    border-bottom-color: var(--flame-red);
    font-weight: 700;
}

.admin-badge-count {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    border-radius: 999px;
    background: var(--oxblood);
    color: #fff;
    font-weight: 700;
}

.admin-badge-count.accent {
    background: var(--combat-red);
}

/* Admin Flash Alerts */
.admin-alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.92rem;
}

.admin-alert-success {
    background: rgb(34 197 94 / 12%);
    border: 1px solid rgb(34 197 94 / 35%);
    color: #86efac;
}

.admin-alert-error {
    background: rgb(244 44 29 / 12%);
    border: 1px solid rgb(244 44 29 / 40%);
    color: #fca5a5;
}

.admin-alert-warning {
    background: rgb(234 179 8 / 12%);
    border: 1px solid rgb(234 179 8 / 35%);
    color: #fde047;
}

/* Status Pills */
.status-pill {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-pill-draft { background: rgb(108 116 132 / 25%); color: #cbd5e1; border: 1px solid rgb(108 116 132 / 40%); }
.status-pill-scheduled { background: rgb(59 130 246 / 20%); color: #93c5fd; border: 1px solid rgb(59 130 246 / 40%); }
.status-pill-published { background: rgb(34 197 94 / 20%); color: #86efac; border: 1px solid rgb(34 197 94 / 40%); }
.status-pill-archived { background: rgb(156 163 175 / 15%); color: #9ca3af; border: 1px solid rgb(156 163 175 / 25%); }
.status-pill-urgent { background: rgb(244 44 29 / 30%); color: #fca5a5; border: 1px solid var(--flame-red); animation: pulse 2s infinite; }
.status-pill-new { background: rgb(244 44 29 / 25%); color: #fca5a5; border: 1px solid rgb(244 44 29 / 45%); }
.status-pill-contacted { background: rgb(59 130 246 / 20%); color: #93c5fd; border: 1px solid rgb(59 130 246 / 40%); }
.status-pill-resolved { background: rgb(34 197 94 / 20%); color: #86efac; border: 1px solid rgb(34 197 94 / 40%); }

/* Media Library Grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.media-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.media-card:hover {
    border-color: rgb(244 44 29 / 50%);
    transform: translateY(-2px);
}

.media-thumb-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.media-card:hover .media-thumb-img {
    transform: scale(1.04);
}

.media-info {
    padding: 0.85rem;
    font-size: 0.78rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.media-name {
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-meta-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.media-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.65rem;
    border-top: 1px solid var(--line);
    padding-top: 0.65rem;
}

/* Media Picker Modal */
.media-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 80%);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.media-modal-backdrop.is-open {
    display: flex;
}

.media-modal-dialog {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 40px rgb(0 0 0 / 60%);
}

.media-modal-header {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.media-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #fff;
}

.media-modal-body {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    flex: 1;
}

.media-modal-footer {
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Upload Dropzone */
.upload-dropzone {
    border: 2px dashed rgb(209 196 184 / 25%);
    border-radius: 8px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: rgb(255 255 255 / 2%);
    transition: all 0.2s ease;
    cursor: pointer;
}

.upload-dropzone:hover,
.upload-dropzone.is-dragover {
    border-color: var(--flame-red);
    background: rgb(244 44 29 / 5%);
}

/* Rich Text Format Toolbar */
.rich-editor-toolbar {
    display: flex;
    gap: 0.35rem;
    padding: 0.45rem 0.65rem;
    background: rgb(0 0 0 / 50%);
    border: 1px solid var(--line);
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    flex-wrap: wrap;
}

.rich-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--sandstone);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rich-btn:hover {
    background: rgb(255 255 255 / 10%);
    color: #fff;
    border-color: var(--line);
}

.rich-textarea {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Pagination */
.admin-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.admin-pagination .page-btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sandstone);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.admin-pagination .page-btn:hover,
.admin-pagination .page-btn.is-active {
    color: #fff;
    border-color: var(--flame-red);
    background: var(--combat-red);
}

.admin-pagination .page-btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Image Selector Input Group */
.image-picker-group {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.image-preview-thumbnail {
    width: 60px;
    height: 42px;
    border-radius: 4px;
    object-fit: cover;
    background: #000;
    border: 1px solid var(--line);
}

/* Urgent Announcement Alert Bar */
.urgent-announcement-bar {
    background: linear-gradient(90deg, #991b1b, #d41115);
    color: #fff;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    position: relative;
    z-index: 101;
    border-bottom: 1px solid rgb(255 255 255 / 15%);
}

.urgent-bar-inner {
    max-width: var(--content);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.urgent-pulse-tag {
    background: #000;
    color: #fca5a5;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    letter-spacing: 0.08em;
    animation: pulse 1.8s infinite;
}

.urgent-link {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}

/* ==========================================================================
   OFFICIAL SENSEI PHOTOGRAPHY & CINEMATIC ACTION INTEGRATION
   Palette: Obsidian #070709, Black Cherry #171016, Oxblood #4B2D2E,
            Combat Red #D41115, Flame Red #F42C1D, Burnt Umber #824334
   ========================================================================== */

/* 1. Individual Sensei Profile Hero Portrait (public/sensei.php) */
.profile-portrait-live {
    background: linear-gradient(180deg, var(--black-cherry) 0%, var(--obsidian) 100%);
    border: 1px solid rgba(212, 17, 21, 0.4);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(212, 17, 21, 0.16);
    border-radius: 12px;
    overflow: hidden;
}

.portrait-photo-stage {
    position: relative;
    height: 490px;
    background: radial-gradient(circle at 50% 25%, #2a151b 0%, var(--obsidian) 78%);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.portrait-photo-stage picture {
    display: block;
    width: 100%;
    height: 100%;
}

.portrait-photo-stage .portrait-ring {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1px dashed rgba(244, 44, 29, 0.45);
    animation: slowSpin 60s linear infinite;
    pointer-events: none;
    z-index: 2;
}

.page-hero-art .profile-portrait-img,
.portrait-photo-stage img,
.profile-portrait-img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
    border: none;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-hero-art .profile-portrait-naveen,
.portrait-photo-stage .profile-portrait-naveen,
.profile-portrait-naveen {
    object-position: center 4%;
}

.portrait-photo-stage.portrait-photo-stage-sadiq {
    height: auto;
    aspect-ratio: 1091 / 1441;
    max-height: 640px;
    background: #0b0d14;
}

.page-hero-art .profile-portrait-sadiq,
.portrait-photo-stage .profile-portrait-sadiq,
.profile-portrait-sadiq {
    object-position: center top;
}

.portrait-blend-mask.portrait-blend-mask-sadiq {
    background: linear-gradient(to bottom, transparent 86%, rgba(7, 7, 9, 0.35) 94%, rgba(7, 7, 9, 0.9) 100%);
}

.portrait-photo-stage.portrait-photo-stage-manjunath {
    height: auto;
    aspect-ratio: 1094 / 1438;
    max-height: 640px;
    background: #0b0d14;
}

.page-hero-art .profile-portrait-manjunath,
.portrait-photo-stage .profile-portrait-manjunath,
.profile-portrait-manjunath {
    object-position: center top;
}

.portrait-blend-mask.portrait-blend-mask-manjunath {
    background: linear-gradient(to bottom, transparent 86%, rgba(7, 7, 9, 0.35) 94%, rgba(7, 7, 9, 0.9) 100%);
}

.portrait-blend-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background:
        linear-gradient(to bottom, rgba(7, 7, 9, 0) 50%, rgba(7, 7, 9, 0.65) 80%, rgba(7, 7, 9, 0.98) 100%),
        radial-gradient(circle at 50% 18%, transparent 55%, rgba(7, 7, 9, 0.45) 100%);
}

.portrait-kio-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #ff9d9d;
    background: rgba(212, 17, 21, 0.14);
    border: 1px solid rgba(212, 17, 21, 0.32);
    padding: 0.28rem 0.8rem;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 0.5rem;
}

/* 2. Senseis & Branches Page (public/senseis-branches.php) */
.sensei-card-portrait-wrap {
    position: relative;
    width: 100%;
    height: 310px;
    border-radius: 6px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 25%, #25161c 0%, #070709 85%);
    border: 1px solid rgba(209, 196, 184, 0.14);
    margin-bottom: 1.4rem;
}

.sensei-card-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.sensei-card-portrait-naveen {
    object-position: center 12%;
}

.sensei-card-portrait-sadiq {
    object-position: center 10%;
}

.sensei-card-portrait-manjunath {
    object-position: center 10%;
}

.sensei-profile-card:hover .sensei-card-portrait-img {
    transform: scale(1.035);
}

.sensei-portrait-gradient-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 55%, rgba(15, 11, 15, 0.82) 82%, #0f0b0f 100%);
}

.sensei-kio-emblem {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.62rem;
    font-weight: 800;
    color: #fff;
    background: rgba(212, 17, 21, 0.88);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    letter-spacing: 0.08em;
    z-index: 4;
}

.sensei-card-portrait-wrap .sensei-number {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 4;
    background: rgba(7, 7, 9, 0.85);
    border: 1px solid rgba(209, 196, 184, 0.2);
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
}

/* 3. Homepage Sensei Avatar (public/index.php Section 04) */
.sensei-avatar-frame {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(244, 44, 29, 0.65);
    box-shadow: 0 0 16px rgba(212, 17, 21, 0.35);
    flex-shrink: 0;
    background: #070709;
}

.sensei-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sensei-avatar-naveen {
    object-position: center 12%;
}

.sensei-avatar-sadiq {
    object-position: center 10%;
}

.sensei-avatar-manjunath {
    object-position: center 10%;
}

.sensei-avatar-frame .sensei-kanji-stamp {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
}

/* 4. Homepage Moments in Motion Gallery (public/index.php Section 08) */
.home-martial-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.martial-card {
    background: linear-gradient(180deg, var(--black-cherry) 0%, var(--obsidian) 100%);
    border: 1px solid rgba(209, 196, 184, 0.16);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.martial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 44, 29, 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212, 17, 21, 0.2);
}

.martial-card-media {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--obsidian);
}

.martial-card-wide .martial-card-media {
    height: auto;
    aspect-ratio: 1.1 / 1;
}

.martial-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.martial-img-naveen {
    object-position: center 25%;
}

.martial-img-sadiq {
    object-fit: contain;
    object-position: center center;
    background: #070709;
}

.martial-card-media:has(.martial-img-sadiq) {
    background: #070709;
}

.martial-card-media:has(.martial-img-sadiq) .martial-card-overlay {
    background: linear-gradient(to top, rgba(7, 7, 9, 0.75) 0%, rgba(7, 7, 9, 0.15) 20%, transparent 45%);
}

.martial-img-manjunath {
    object-position: center 24%;
}

.martial-card:hover .martial-card-img {
    transform: scale(1.04);
}

.martial-card-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(7, 7, 9, 0.95) 0%, rgba(7, 7, 9, 0.3) 50%, transparent 100%),
        linear-gradient(to right, rgba(7, 7, 9, 0.35) 0%, transparent 45%);
}

.martial-cat-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    background: rgba(212, 17, 21, 0.88);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    z-index: 3;
}

.martial-num {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.5);
    z-index: 3;
}

.martial-card-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.martial-card-info h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.5rem;
    line-height: 1.35;
    font-family: var(--display);
}

.martial-card-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

.martial-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--flame-red);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.martial-link:hover {
    color: #ff8577;
    transform: translateX(3px);
}

.gallery-action-footer {
    margin-top: 2rem;
    text-align: center;
}

/* Responsive Styles for Karate Integration */
@media (max-width: 980px) {
    .home-martial-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.35rem;
        max-width: 100%;
    }
    .branch-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    .branch-visual-mask {
        height: clamp(90px, 14vw, 120px);
    }
    .martial-card-media {
        height: auto;
        aspect-ratio: 3 / 4;
    }
    .martial-card-wide .martial-card-media {
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .portrait-photo-stage {
        height: 400px;
    }
    .sensei-card-portrait-wrap {
        height: 280px;
    }
}

@media (max-width: 480px) {
    .home-martial-gallery {
        gap: 1.25rem;
        max-width: 100%;
    }
    .martial-card-media {
        height: auto;
        aspect-ratio: 3 / 4;
    }
    .martial-card-wide .martial-card-media {
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .martial-card-info {
        padding: 1.25rem 1rem;
    }
    .martial-card-info h3 {
        font-size: 1.1rem;
    }
    .martial-card-info p {
        font-size: 0.82rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 640px) {
    .technique-gallery-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .tech-media-frame {
        aspect-ratio: 16 / 11;
        min-height: 220px;
    }
    .branch-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .branch-card-header {
        padding: 1.2rem 1.3rem;
    }
    .branch-card-body {
        padding: 1.3rem;
    }
    .branch-card-actions {
        padding: 1.1rem 1.3rem;
    }
    .branch-visual-mask {
        height: 94px;
        min-height: 84px;
    }
    .portrait-photo-stage {
        height: clamp(380px, 92vw, 440px);
    }
    .page-hero-art .profile-portrait-naveen,
    .portrait-photo-stage .profile-portrait-naveen,
    .profile-portrait-naveen {
        object-position: center 1%;
    }
    .sensei-card-portrait-wrap {
        height: 260px;
    }
}

/* ==========================================================================
   Header Actions: Multilingual Switcher & Theme Toggle
   ========================================================================== */

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.45rem;
    margin-left: auto;
    flex-shrink: 0;
}

.header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
}

/* Language Switcher Segmented Control */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    background: rgb(255 255 255 / 6%);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 2px;
    gap: 2px;
}

.lang-btn {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--body), 'Noto Sans Kannada', 'Noto Sans Devanagari', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.15;
    padding: 0.22rem 0.48rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(.16, 1, .3, 1);
    white-space: nowrap;
}

.lang-btn:hover {
    color: var(--text);
    background: rgb(255 255 255 / 8%);
}

.lang-btn.is-active,
.lang-btn[aria-pressed="true"] {
    background: var(--combat-red);
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(212, 17, 21, 0.4);
}

.lang-btn:focus-visible {
    outline: 2px solid var(--flame-red);
    outline-offset: 2px;
}

/* Theme Toggle Button */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: rgb(255 255 255 / 6%);
    color: var(--text);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(.16, 1, .3, 1);
}

.theme-toggle:hover {
    border-color: var(--flame-red);
    color: var(--flame-red);
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(244, 44, 29, 0.25);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--flame-red);
    outline-offset: 2px;
}

.theme-icon {
    width: 15px;
    height: 15px;
    display: block;
    transition: transform 0.25s ease;
}

/* In dark mode: Sun icon is visible (indicates switch to light) */
.theme-icon-sun {
    display: block;
}
.theme-icon-moon {
    display: none;
}

/* In light mode: Moon icon is visible (indicates switch to dark) */
[data-theme="light"] .theme-icon-sun {
    display: none;
}
[data-theme="light"] .theme-icon-moon {
    display: block;
}

/* Responsive adjustments for header actions */
@media (max-width: 1024px) {
    .header-right {
        flex-direction: row;
        align-items: center;
        gap: 0.35rem;
        margin-left: auto;
    }
    .header-actions {
        gap: 0.35rem;
    }
    .nav-cta-desktop {
        display: none !important;
    }
    .nav-cta-mobile {
        display: flex !important;
    }
    .primary-navigation {
        align-self: auto;
        padding-bottom: 1.5rem;
    }
    .lang-btn {
        padding: 0.22rem 0.40rem;
        font-size: 0.65rem;
    }
    .theme-toggle {
        width: 28px;
        height: 28px;
    }
    .theme-icon {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .brand-tagline {
        display: none;
    }
    .header-inner {
        gap: 0.35rem;
    }
    .header-right {
        gap: 0.25rem;
    }
    .header-actions {
        gap: 0.25rem;
    }
    .lang-switcher {
        padding: 1px;
    }
    .lang-btn {
        padding: 0.2rem 0.32rem;
        font-size: 0.62rem;
    }
    .theme-toggle {
        width: 26px;
        height: 26px;
    }
    .theme-icon {
        width: 13px;
        height: 13px;
    }
}

/* ==========================================================================
   Complete Cohesive Light Theme Implementation
   ========================================================================== */

:root[data-theme="light"],
[data-theme="light"] {
    color-scheme: light;
    --obsidian: #F7F6F3;            /* Warm off-white main background */
    --surface: #FFFFFF;             /* Pure white primary surface */
    --surface-alt: #F0EEEA;         /* Soft neutral secondary surface */
    --black-cherry: #F0EEEA;        /* Soft neutral secondary surface */
    --oxblood: #8B1115;             /* Refined deep crimson */
    --combat-red: #D41115;          /* Brand red */
    --flame-red: #D41115;           /* Brand red */
    --combat-red-hover: #A90E12;    /* Dark-red hover */
    --burnt-umber: #8A3622;         /* Warm earthy accent */
    --warm-ash: #615F67;            /* Accessible dark grey for muted labels */
    --sandstone: #3B3A40;           /* High-contrast charcoal neutral */
    --teal: #1F6B6F;
    --teal-deep: #164F52;
    --slate: #485568;
    --slate-light: #5F6A7D;
    --blue-pale: #1F3A60;
    --text: #171719;                /* Deep obsidian primary text (16:1+ contrast) */
    --text-muted: #55545A;          /* Charcoal grey secondary text (7.4:1 contrast) */
    --line: #E1DED8;                /* Subtle warm grey border */
    --shadow-sm: 0 2px 8px rgba(23, 23, 25, 0.05);
    --shadow-md: 0 8px 24px rgba(23, 23, 25, 0.07);
    --shadow-lg: 0 16px 40px rgba(23, 23, 25, 0.09);
}

/* Header Light Theme */
[data-theme="light"] .site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 12px rgb(0 0 0 / 4%);
}

[data-theme="light"] .brand-name {
    color: var(--text);
}

[data-theme="light"] .brand-tagline,
[data-theme="light"] .brand-association {
    color: var(--text-muted);
}

[data-theme="light"] .primary-navigation > a:not(.nav-cta) {
    color: var(--text);
}

[data-theme="light"] .primary-navigation > a:not(.nav-cta):hover,
[data-theme="light"] .primary-navigation > a:not(.nav-cta).is-active {
    color: var(--combat-red);
}

[data-theme="light"] .nav-cta {
    background: #d41115;
    color: #ffffff;
    border-color: #d41115;
}

[data-theme="light"] .nav-cta:hover {
    background: #b00d11;
    border-color: #b00d11;
    box-shadow: 0 4px 14px rgba(212, 17, 21, 0.35);
}

[data-theme="light"] .menu-toggle {
    color: var(--text);
}

@media (max-width: 1024px) {
    [data-theme="light"] .primary-navigation {
        background: #ffffff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 16px 32px rgb(0 0 0 / 12%);
    }
    [data-theme="light"] .primary-navigation > a:not(.nav-cta) {
        border-bottom: 1px solid var(--line);
    }
}

/* Controls Light Theme */
[data-theme="light"] .lang-switcher {
    background: rgb(0 0 0 / 5%);
    border-color: var(--line);
}

[data-theme="light"] .lang-btn {
    color: var(--text-muted);
}

[data-theme="light"] .lang-btn:hover {
    color: var(--text);
    background: rgb(0 0 0 / 6%);
}

[data-theme="light"] .lang-btn.is-active,
[data-theme="light"] .lang-btn[aria-pressed="true"] {
    background: var(--combat-red);
    color: #ffffff !important;
}

[data-theme="light"] .theme-toggle {
    background: rgb(0 0 0 / 5%);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="light"] .theme-toggle:hover {
    border-color: var(--combat-red);
    color: var(--combat-red);
}

/* Hero Section Light Theme */


[data-theme="light"] .hero-vignette {
    background:
        radial-gradient(circle at 50% 50%, transparent 45%, rgb(247 244 240 / 70%) 85%, var(--obsidian) 100%),
        linear-gradient(180deg, rgb(247 244 240 / 80%) 0%, transparent 20%, transparent 75%, var(--obsidian) 100%);
}

[data-theme="light"] .hero::before {
    background: linear-gradient(90deg, var(--obsidian) 0%, rgb(247 244 240 / 92%) 45%, rgb(247 244 240 / 30%) 100%);
}

[data-theme="light"] .hero-title-white {
    color: var(--text);
}

[data-theme="light"] .hero-lede {
    color: var(--text-muted);
}

[data-theme="light"] .hero-smoke {
    opacity: 0.05;
}

/* Page Hero across Subpages in Light Theme */
[data-theme="light"] .page-hero {
    background:
        radial-gradient(ellipse at 85% 35%, rgb(212 17 21 / 7%), transparent 45%),
        linear-gradient(115deg, var(--obsidian) 0%, #ffffff 50%, var(--obsidian) 100%);
    border-bottom: 1px solid var(--line);
}

[data-theme="light"] .page-hero::before {
    background: linear-gradient(90deg, var(--obsidian) 0%, rgb(247 244 240 / 94%) 45%, rgb(247 244 240 / 30%) 100%);
}

[data-theme="light"] .page-hero h1,
[data-theme="light"] .profile-title,
[data-theme="light"] #branch-name {
    color: var(--text);
}

[data-theme="light"] .page-hero-lede,
[data-theme="light"] .profile-designation {
    color: var(--text-muted);
}

[data-theme="light"] .page-hero-eyebrow {
    color: var(--warm-ash);
}

[data-theme="light"] .page-hero-badge,
[data-theme="light"] .credential-notice-box {
    background: rgb(255 255 255 / 92%);
    border: 1px solid var(--line);
    color: var(--text);
}

[data-theme="light"] .page-hero-watermark {
    opacity: 0.04;
    color: #000000;
}

[data-theme="light"] .breadcrumb a {
    color: var(--text-muted);
}

[data-theme="light"] .hero-affiliation {
    color: var(--warm-ash);
}

[data-theme="light"] .hero-affiliation strong,
[data-theme="light"] .hero-affiliation .affiliation-name {
    color: var(--text);
}

/* Values Band in Light Theme */
[data-theme="light"] .values-band {
    background: var(--surface-alt);
    color: var(--text-muted);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

[data-theme="light"] .values-band span {
    color: var(--text);
}

/* Cards & Surface Components Light Theme */
[data-theme="light"] .card,
[data-theme="light"] .training-card,
[data-theme="light"] .speciality-card,
[data-theme="light"] .technique-card,
[data-theme="light"] .practice-card,
[data-theme="light"] .practice-panel,
[data-theme="light"] .program-card,
[data-theme="light"] .program-detail-card,
[data-theme="light"] .sensei-card,
[data-theme="light"] .sensei-profile-card,
[data-theme="light"] .branch-card,
[data-theme="light"] .event-card,
[data-theme="light"] .circular-card,
[data-theme="light"] .article-card,
[data-theme="light"] .belt-card,
[data-theme="light"] .belt-notes-card,
[data-theme="light"] .fees-notes-card,
[data-theme="light"] .belt-table-card,
[data-theme="light"] .fees-table-card,
[data-theme="light"] .admission-card,
[data-theme="light"] .about-mission-card,
[data-theme="light"] .about-vision-card,
[data-theme="light"] .association-callout,
[data-theme="light"] .fact-card,
[data-theme="light"] .mv-card,
[data-theme="light"] .schedule-card,
[data-theme="light"] .schedule-period-card,
[data-theme="light"] .philosophy-pillar-card,
[data-theme="light"] .etiquette-card,
[data-theme="light"] .safety-card,
[data-theme="light"] .gallery-tile,
[data-theme="light"] .faq-item,
[data-theme="light"] .aside-badge,
[data-theme="light"] .martial-card {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 6%);
    color: var(--text);
}

[data-theme="light"] .card:hover,
[data-theme="light"] .training-card:hover,
[data-theme="light"] .speciality-card:hover,
[data-theme="light"] .technique-card:hover,
[data-theme="light"] .etiquette-card:hover,
[data-theme="light"] .safety-card:hover,
[data-theme="light"] .gallery-tile:hover,
[data-theme="light"] .program-card:hover,
[data-theme="light"] .sensei-card:hover,
[data-theme="light"] .branch-card:hover,
[data-theme="light"] .event-card:hover,
[data-theme="light"] .martial-card:hover {
    border-color: rgba(212, 17, 21, 0.4);
    box-shadow: 0 8px 24px rgba(212, 17, 21, 0.12);
}

/* ==========================================================================
   Section: Training Programmes Light Theme
   ========================================================================== */
[data-theme="light"] .section-training {
    background: var(--obsidian);
}

[data-theme="light"] .training-grid {
    background: var(--line);
    border-color: var(--line);
    box-shadow: 0 4px 20px rgb(0 0 0 / 4%);
}

[data-theme="light"] .training-card {
    background: #ffffff;
    color: var(--text);
}

[data-theme="light"] .training-card::after {
    border-color: rgba(212, 17, 21, 0.12);
}

[data-theme="light"] .training-card-accent {
    background: linear-gradient(155deg, #fff9f8 0%, #ffffff 80%);
    border-color: rgba(212, 17, 21, 0.28);
    box-shadow: 0 6px 22px rgba(212, 17, 21, 0.08);
}

[data-theme="light"] .card-symbol {
    color: rgba(212, 17, 21, 0.18);
}

[data-theme="light"] .training-card h3 {
    color: var(--text);
}

[data-theme="light"] .training-card p {
    color: var(--text-muted);
}

[data-theme="light"] .training-card-bottom {
    border-top-color: var(--line);
}

[data-theme="light"] .training-tag {
    background: rgba(23, 23, 25, 0.04);
    border-color: var(--line);
    color: var(--text-muted);
}

[data-theme="light"] .card-status {
    color: var(--text-muted);
}

[data-theme="light"] .card-status-link {
    color: var(--combat-red);
}

[data-theme="light"] .card-status-link:hover {
    color: #9a1013;
}

[data-theme="light"] .text-link {
    color: var(--text);
    border-bottom-color: var(--combat-red);
}

[data-theme="light"] .text-link:hover {
    color: var(--combat-red);
}

/* ==========================================================================
   Section: Principles / Why Karate Light Theme
   ========================================================================== */
[data-theme="light"] .section-principles {
    background: linear-gradient(110deg, var(--surface-alt) 0%, var(--obsidian) 65%, var(--surface-alt) 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

[data-theme="light"] .principles-art {
    background:
        linear-gradient(140deg, rgb(212 17 21 / 8%), transparent 58%),
        radial-gradient(circle at 50% 44%, rgb(212 17 21 / 10%), transparent 50%),
        #ffffff;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 5%);
}

[data-theme="light"] .principles-circle {
    border-color: var(--line);
}

[data-theme="light"] .principles-circle::before {
    border-color: rgb(212 17 21 / 25%);
}

[data-theme="light"] .principles-circle::after {
    border-color: var(--line);
}

[data-theme="light"] .principles-kanji {
    color: var(--text);
    text-shadow: 0 10px 30px rgb(0 0 0 / 8%);
}

[data-theme="light"] .principles-side-label {
    color: var(--text-muted);
}

[data-theme="light"] .principles-copy h2 {
    color: var(--text);
}

[data-theme="light"] .principles-lede {
    color: var(--text-muted);
}

[data-theme="light"] .principle-list li {
    border-top-color: var(--line);
}

[data-theme="light"] .principle-list strong {
    color: var(--text);
}

[data-theme="light"] .principle-list p {
    color: var(--text-muted);
}

/* ==========================================================================
   Section: Branches Light Theme
   ========================================================================== */
[data-theme="light"] .section-branches {
    background: var(--obsidian);
}

[data-theme="light"] .branch-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 6%);
}

[data-theme="light"] .branch-card-header {
    background: var(--surface-alt);
    border-bottom-color: var(--line);
}

[data-theme="light"] .branch-card h3 {
    color: var(--text);
}

[data-theme="light"] .branch-kanji-emblem {
    color: var(--line);
}

[data-theme="light"] .branch-card-media {
    border-color: rgba(212, 17, 21, 0.22);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .branch-visual-mask {
    border-color: var(--line);
    background:
        radial-gradient(ellipse at 80% 50%, rgba(212, 17, 21, 0.08), transparent 60%),
        linear-gradient(135deg, rgba(240, 235, 230, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
}

[data-theme="light"] .branch-mask-label {
    color: var(--text-muted);
}

[data-theme="light"] .branch-address-wrap {
    background: var(--surface-alt);
    border-color: var(--line);
}

[data-theme="light"] .branch-address {
    color: var(--text-muted);
}

[data-theme="light"] .branch-card-actions {
    background: var(--surface-alt);
    border-top-color: var(--line);
}

[data-theme="light"] .branch-directions-btn {
    border-color: var(--line);
    background: #ffffff;
    color: var(--text);
}

[data-theme="light"] .branch-directions-btn:hover {
    border-color: var(--combat-red);
    color: var(--combat-red);
    background: rgba(212, 17, 21, 0.04);
}

[data-theme="light"] .branch-enquire-btn {
    background: var(--combat-red);
    color: #ffffff;
    border-color: var(--combat-red);
}

[data-theme="light"] .branch-enquire-btn:hover {
    background: #b00d11;
    border-color: #b00d11;
}

[data-theme="light"] .branch-footer-note {
    background: var(--surface-alt);
    border-color: var(--line);
    color: var(--text-muted);
}

[data-theme="light"] .branch-footer-note p {
    color: var(--text-muted);
}

[data-theme="light"] .branch-footer-note strong {
    color: var(--text);
}

/* ==========================================================================
   Section: Achievement Strip Light Theme
   ========================================================================== */
[data-theme="light"] .achievement-strip {
    background: linear-gradient(90deg, var(--surface-alt) 0%, var(--surface-alt) 60%, var(--surface-alt) 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

[data-theme="light"] .achievement-stamp {
    border-color: rgba(212, 17, 21, 0.35);
    color: var(--text);
}

[data-theme="light"] .achievement-inner .section-kicker {
    color: var(--combat-red);
}

[data-theme="light"] .achievement-inner h2 {
    color: var(--text);
}

[data-theme="light"] .achievement-inner p {
    color: var(--text-muted);
}

[data-theme="light"] .achievement-pill {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
    box-shadow: 0 2px 6px rgb(0 0 0 / 4%);
}

[data-theme="light"] .achievement-outline {
    color: rgba(23, 23, 25, 0.04);
}

/* ==========================================================================
   Section: Schedule Light Theme
   ========================================================================== */
[data-theme="light"] .section-schedule {
    background: var(--obsidian);
}

[data-theme="light"] .schedule-intro h2 {
    color: var(--text);
}

[data-theme="light"] .schedule-intro > p {
    color: var(--text-muted);
}

[data-theme="light"] .schedule-note {
    color: var(--text-muted);
}

[data-theme="light"] .schedule-times {
    border-top-color: var(--line);
}

[data-theme="light"] .schedule-row {
    border-bottom-color: var(--line);
}

[data-theme="light"] .schedule-period {
    color: var(--text);
}

[data-theme="light"] .schedule-row strong {
    color: var(--text);
}

[data-theme="light"] .schedule-tag {
    background: rgba(23, 23, 25, 0.06);
    border-color: var(--line);
    color: var(--text-muted);
}

/* ==========================================================================
   Section: Belt Levels & Collapsible Tables Light Theme
   ========================================================================== */
[data-theme="light"] .section-belt-levels {
    background: var(--obsidian);
}

[data-theme="light"] .belt-collapsible,
[data-theme="light"] .fees-collapsible {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}

[data-theme="light"] .belt-trigger-title,
[data-theme="light"] .fees-trigger-title {
    color: var(--text);
}

[data-theme="light"] .belt-trigger-kicker,
[data-theme="light"] .fees-trigger-kicker {
    color: var(--text-muted);
}

[data-theme="light"] .belt-trigger-desc,
[data-theme="light"] .fees-trigger-desc {
    color: var(--text-muted);
}

[data-theme="light"] .belt-trigger-pill,
[data-theme="light"] .fees-trigger-pill {
    background: rgba(212, 17, 21, 0.08);
    border-color: rgba(212, 17, 21, 0.28);
    color: #9a1b1e;
}

[data-theme="light"] .belt-chevron,
[data-theme="light"] .fees-chevron {
    background: rgba(23, 23, 25, 0.05);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="light"] .belt-collapse-trigger:hover,
[data-theme="light"] .fees-collapse-trigger:hover {
    background: rgba(23, 23, 25, 0.03);
}

[data-theme="light"] .belt-table-card,
[data-theme="light"] .fees-table-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 16px rgb(0 0 0 / 5%);
}

[data-theme="light"] .belt-table th,
[data-theme="light"] .fees-table th {
    background: var(--surface-alt);
    color: var(--text);
    border-bottom-color: var(--line);
}

[data-theme="light"] .belt-table td,
[data-theme="light"] .fees-table td {
    border-bottom-color: var(--line);
}

[data-theme="light"] .belt-table tbody tr:hover,
[data-theme="light"] .fees-table tbody tr:hover {
    background: rgba(23, 23, 25, 0.03);
}

[data-theme="light"] .belt-rank {
    color: var(--text-muted);
}

[data-theme="light"] .belt-name {
    color: var(--text);
}

[data-theme="light"] .belt-stage-badge {
    background: rgba(23, 23, 25, 0.05);
    border-color: var(--line);
    color: var(--text-muted);
}

[data-theme="light"] .belt-table tbody tr:hover .belt-stage-badge,
[data-theme="light"] .fees-table tbody tr:hover .belt-stage-badge {
    background: rgba(212, 17, 21, 0.1);
    border-color: rgba(212, 17, 21, 0.3);
    color: #9a1b1e;
}

[data-theme="light"] .belt-notes-card,
[data-theme="light"] .fees-notes-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 16px rgb(0 0 0 / 5%);
}

[data-theme="light"] .belt-notes-header h3,
[data-theme="light"] .fees-notes-header h3 {
    color: var(--text);
}

[data-theme="light"] .belt-notes-list,
[data-theme="light"] .fees-notes-list {
    color: var(--text-muted);
}

[data-theme="light"] .belt-status-banner,
[data-theme="light"] .fees-status-banner {
    background: rgba(212, 17, 21, 0.06);
    border-left-color: var(--combat-red);
    color: var(--text-muted);
}

[data-theme="light"] .belt-status-banner em,
[data-theme="light"] .fees-status-banner em {
    color: var(--text);
}

/* ==========================================================================
   Section: Admission Light Theme
   ========================================================================== */
[data-theme="light"] .admission {
    background:
        radial-gradient(ellipse at 95% 90%, rgb(212 17 21 / 8%), transparent 40%),
        linear-gradient(115deg, var(--surface-alt) 0%, var(--surface-alt) 55%, var(--surface-alt) 100%);
    border-top: 1px solid var(--line);
}

[data-theme="light"] .admission-lede {
    color: var(--text-muted);
}

[data-theme="light"] .admission-status {
    color: var(--text-muted);
}

[data-theme="light"] .admission-status i {
    background: var(--combat-red);
}

[data-theme="light"] .admission-whatsapp-box {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}

[data-theme="light"] .admission-whatsapp-box h3 {
    color: var(--text);
}

[data-theme="light"] .admission-whatsapp-box p {
    color: var(--text-muted);
}

[data-theme="light"] .admission-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 10px 40px rgb(0 0 0 / 8%);
    color: var(--text);
}

[data-theme="light"] .admission-card-header {
    border-bottom-color: var(--line);
}

[data-theme="light"] .admission-card-header h3 {
    color: var(--text);
}

[data-theme="light"] .admission-card-header p {
    color: var(--text-muted);
}

/* Practice Pillars in Light Theme */
[data-theme="light"] .practice-pillars-grid .pillar-item {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
}

/* Admission Form & Inputs Light Theme */
[data-theme="light"] .admission-form-card,
[data-theme="light"] .admission-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 10px 40px rgb(0 0 0 / 8%);
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--line);
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
    border-color: #d41115;
    box-shadow: 0 0 0 3px rgba(212, 17, 21, 0.15);
}

[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder {
    color: var(--warm-ash);
}

[data-theme="light"] .form-label {
    color: var(--text);
}

[data-theme="light"] .form-privacy-note {
    color: var(--text-muted);
}

/* .button-primary standardized in main light refinement system */

/* .button-outline standardized in main light refinement system */

/* Footer Light Theme */
[data-theme="light"] .site-footer {
    background: var(--surface-alt);
    color: var(--text-muted);
    border-top: 1px solid var(--line);
}

[data-theme="light"] .footer-wordmark {
    color: var(--text);
}

[data-theme="light"] .footer-affiliation-text {
    color: var(--text-muted);
}

[data-theme="light"] .footer-col-title {
    color: var(--text);
}

[data-theme="light"] .footer-links-list a {
    color: var(--text-muted);
}

[data-theme="light"] .footer-links-list a:hover {
    color: var(--combat-red);
}

[data-theme="light"] .footer-values-pills span {
    background: rgb(0 0 0 / 5%);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="light"] .footer-phone-link {
    background: rgb(0 0 0 / 4%);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="light"] .footer-phone-link:hover {
    background: #ffffff;
    border-color: var(--combat-red);
}

[data-theme="light"] .footer-admin-link {
    color: var(--text-muted);
}

[data-theme="light"] .footer-admin-link:hover {
    color: var(--text);
}

[data-theme="light"] .footer-bottom {
    border-top: 1px solid var(--line);
    color: var(--text-muted);
}

/* Urgent Announcement Bar Light Theme */
[data-theme="light"] .urgent-announcement-bar {
    background: #fff0f0;
    color: var(--text);
    border-bottom: 1px solid rgba(212, 17, 21, 0.2);
}

[data-theme="light"] .urgent-pulse-tag {
    background: #d41115;
    color: #ffffff;
}

[data-theme="light"] .urgent-link {
    color: #c41014;
}

/* Modal Lightbox Light Theme */
[data-theme="light"] .lightbox-modal {
    background: rgba(247, 244, 240, 0.96);
}

[data-theme="light"] .lightbox-caption-bar {
    background: #ffffff;
    border-top: 1px solid var(--line);
    color: var(--text);
}

[data-theme="light"] .field-error {
    color: #b70d10;
    font-weight: 600;
}

/* ==========================================================================
   Complete Light Theme Text Contrast & Component Overrides
   ========================================================================== */

/* 1. Sensei Profile Page & Portrait Card (public/sensei.php) */
[data-theme="light"] .portrait-caption-title {
    color: var(--text);
}

[data-theme="light"] .portrait-caption-note {
    color: var(--combat-red);
}

[data-theme="light"] .portrait-kio-badge {
    color: #9a1b1e;
    background: rgba(212, 17, 21, 0.08);
    border-color: rgba(212, 17, 21, 0.28);
    font-weight: 700;
}

[data-theme="light"] .portrait-pending-badge {
    color: var(--text-muted);
    background: rgba(23, 23, 25, 0.05);
    border-color: var(--line);
}

[data-theme="light"] .portrait-blend-mask {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 55%, rgba(247, 244, 240, 0.7) 82%, #ffffff 100%),
        radial-gradient(circle at 50% 18%, transparent 65%, rgba(0, 0, 0, 0.06) 100%);
}

[data-theme="light"] .portrait-photo-stage {
    background: radial-gradient(circle at 50% 25%, #fff0f2 0%, #ffffff 78%);
}

[data-theme="light"] .profile-portrait-live {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 10px 30px rgb(0 0 0 / 8%), 0 0 20px rgba(212, 17, 21, 0.08);
}

[data-theme="light"] .profile-portrait-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
}

[data-theme="light"] .portrait-monogram-stage {
    background: radial-gradient(circle at center, rgba(212, 17, 21, 0.06), #ffffff 70%);
    border-bottom-color: var(--line);
}

[data-theme="light"] .portrait-initials-display {
    color: var(--text);
    text-shadow: 0 0 20px rgba(212, 17, 21, 0.15);
}

/* 2. Speciality Cards (The 4 Approved Specialities on sensei.php) */
[data-theme="light"] .speciality-card {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
    color: var(--text);
}

[data-theme="light"] .speciality-card:hover {
    border-color: rgba(212, 17, 21, 0.45);
    box-shadow: 0 8px 24px rgba(212, 17, 21, 0.12);
}

[data-theme="light"] .speciality-card h3 {
    color: var(--text);
}

[data-theme="light"] .speciality-card p {
    color: var(--text-muted);
}

[data-theme="light"] .speciality-card .spec-num {
    color: var(--combat-red);
}

/* 3. Technique Gallery Cards (on sensei.php) */
[data-theme="light"] .technique-card {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}

[data-theme="light"] .tech-caption h4 {
    color: var(--text);
}

[data-theme="light"] .tech-caption p {
    color: var(--text-muted);
}

[data-theme="light"] .tech-cat-pill {
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
    border-color: var(--line);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 4. Sensei Pagination Navigation (sensei.php) */
[data-theme="light"] .profile-nav-link {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
}

[data-theme="light"] .profile-nav-link:hover {
    border-color: var(--combat-red);
    box-shadow: 0 4px 14px rgba(212, 17, 21, 0.12);
}

[data-theme="light"] .profile-nav-link .nav-name {
    color: var(--text);
}

[data-theme="light"] .profile-nav-link .nav-direction {
    color: var(--combat-red);
}

[data-theme="light"] .profile-nav-all {
    color: var(--text-muted);
}

[data-theme="light"] .profile-nav-all:hover {
    color: var(--combat-red);
}

/* 5. Sensei Cards & Phone Buttons (Homepage & Directory) */
[data-theme="light"] .sensei-card h3,
[data-theme="light"] .sensei-card-main h3 {
    color: var(--text);
}

[data-theme="light"] .sensei-phone-btn {
    color: #9a1b1e;
    background: rgba(212, 17, 21, 0.08);
    border-color: rgba(212, 17, 21, 0.3);
}

[data-theme="light"] .sensei-phone-btn:hover {
    background: var(--flame-red);
    border-color: var(--flame-red);
    color: #ffffff;
}

[data-theme="light"] .sensei-phone-btn:hover .phone-icon {
    color: #ffffff;
}

[data-theme="light"] .sensei-portrait-gradient-mask {
    background: linear-gradient(to bottom, transparent 60%, rgba(247, 244, 240, 0.7) 85%, #ffffff 100%);
}

[data-theme="light"] .sensei-card-portrait-wrap {
    background: radial-gradient(circle at 50% 25%, #fff0f2 0%, #ffffff 85%);
    border-color: var(--line);
}

[data-theme="light"] .sensei-card-portrait-wrap .sensei-number {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="light"] .mono-initials {
    color: var(--text);
}

[data-theme="light"] .credential-notice-box strong {
    color: var(--text);
}

/* 6. Verification & Status Badges (WCAG Contrast Compliant) */
[data-theme="light"] .status-pill-verified,
[data-theme="light"] .status-pill-open,
[data-theme="light"] .status-pill-resolved {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
    color: #14532d;
    font-weight: 700;
}

[data-theme="light"] .status-pill-upcoming,
[data-theme="light"] .status-pill-contacted {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #1e40af;
    font-weight: 700;
}

[data-theme="light"] .status-pill-new {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #991b1b;
    font-weight: 700;
}

[data-theme="light"] .status-pill-follow_up,
[data-theme="light"] .status-pill-postponed {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.3);
    color: #9a3412;
    font-weight: 700;
}

[data-theme="light"] .status-pill-closed,
[data-theme="light"] .status-pill-completed {
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.25);
    color: #334155;
}

/* 7. Gallery Page Contrast (public/gallery.php) */
[data-theme="light"] .video-info-col h3 {
    color: var(--text);
}

[data-theme="light"] .gallery-tile-info .tile-title {
    color: var(--text);
}

[data-theme="light"] .gallery-empty-state h3 {
    color: var(--text);
}

[data-theme="light"] .tile-category-tag {
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
    border-color: var(--line);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .v-tag {
    background: rgba(23, 23, 25, 0.04);
    border-color: var(--line);
    color: var(--text-muted);
}

[data-theme="light"] .filter-pill:hover {
    color: var(--combat-red);
    border-color: var(--combat-red);
    background: rgba(212, 17, 21, 0.05);
}

/* 8. Events Page Contrast (public/events.php) */
[data-theme="light"] .event-card-body h3 {
    color: var(--text);
}

[data-theme="light"] .event-date-badge .event-date-text {
    color: var(--text);
}

[data-theme="light"] .event-meta-list p {
    color: var(--text);
}

[data-theme="light"] .event-instructions-box {
    background: rgba(23, 23, 25, 0.04);
    border-left-color: var(--combat-red);
}

[data-theme="light"] .event-instructions-box strong {
    color: var(--text);
}

[data-theme="light"] .results-pending-card h3 {
    color: var(--text);
}

/* 9. Programs & Etiquette Contrast (public/programs.php) */
[data-theme="light"] .prog-card-body h3 {
    color: var(--text);
}

[data-theme="light"] .prog-meta-cell p {
    color: var(--text);
}

[data-theme="light"] .prog-objectives-box {
    background: var(--surface-alt);
    border-color: var(--line);
}

[data-theme="light"] .prog-objectives-box .box-title {
    color: var(--text);
}

[data-theme="light"] .step-content h3 {
    color: var(--text);
}

[data-theme="light"] .guide-notice-card {
    background: rgba(212, 17, 21, 0.05);
    border-color: rgba(212, 17, 21, 0.2);
}

[data-theme="light"] .guide-notice-card strong {
    color: var(--text);
}

[data-theme="light"] .etiquette-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}

[data-theme="light"] .etiquette-card h3 {
    color: var(--text);
}

[data-theme="light"] .etiquette-kanji {
    color: rgba(212, 17, 21, 0.2);
}

[data-theme="light"] .belt-banner-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}

[data-theme="light"] .belt-banner-card h2 {
    color: var(--text);
}

/* 10. Martial Gallery & About Page Contrast */
[data-theme="light"] .martial-card-info h3 {
    color: var(--text);
}

[data-theme="light"] .martial-num {
    color: var(--sandstone);
}

[data-theme="light"] .callout-title {
    color: var(--text);
}

[data-theme="light"] .mv-statement {
    color: var(--text);
}

[data-theme="light"] .notice-body strong {
    color: var(--text);
}

[data-theme="light"] .page-hero-badge .badge-title {
    color: var(--text);
}

[data-theme="light"] .philosophy-pillar-card {
    background: #ffffff;
    border-color: var(--line);
    color: var(--text);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}

[data-theme="light"] .philosophy-pillar-card.pillar-accent {
    background: linear-gradient(155deg, #fff9f8 0%, #ffffff 80%);
    border-color: rgba(212, 17, 21, 0.28);
}

[data-theme="light"] .philosophy-note {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}

[data-theme="light"] .philosophy-note strong {
    color: var(--text);
}

/* 11. Schedule Period Cards (on senseis-branches.php) */
[data-theme="light"] .schedule-period-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}

[data-theme="light"] .schedule-period-card.period-accent {
    background: linear-gradient(155deg, #fff9f8 0%, #ffffff 80%);
    border-color: rgba(212, 17, 21, 0.28);
}

[data-theme="light"] .period-label {
    color: var(--text);
}

[data-theme="light"] .schedule-disclaimer-box {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}

/* 12. Policies & Safety Cards (public/policies.php) */
[data-theme="light"] .policy-block h3 {
    color: var(--text);
}

[data-theme="light"] .safety-card {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}

[data-theme="light"] .safety-card h3 {
    color: var(--text);
}

/* 13. Lightbox Title & Footer Contact Contrast */
[data-theme="light"] .lightbox-title {
    color: var(--text);
}

[data-theme="light"] .lightbox-counter {
    color: var(--text-muted);
}

[data-theme="light"] .footer-phone-link .f-sensei-name {
    color: var(--text);
}

body.is-menu-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .footer-columns-grid {
        gap: 1.5rem;
        padding-top: 2.5rem;
        padding-bottom: 2rem;
    }
}

/* ==========================================================================
   Header Official Logo Preview Lightbox Dialog
   ========================================================================== */
.logo-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    background: rgba(7, 7, 9, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.logo-dialog-backdrop.is-open {
    display: flex;
    opacity: 1;
}

.logo-dialog-card {
    position: relative;
    max-width: min(92vw, 460px);
    width: 100%;
    background: linear-gradient(155deg, #171016 0%, #0a070a 100%);
    border: 1px solid rgba(212, 17, 21, 0.45);
    border-radius: 16px;
    padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.5rem, 4vw, 2.25rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.85),
        0 0 40px rgba(212, 17, 21, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: scale(0.92);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.logo-dialog-backdrop.is-open .logo-dialog-card {
    transform: scale(1);
}

.logo-dialog-glow {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 280px;
    height: 280px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 44, 29, 0.25) 0%, rgba(212, 17, 21, 0.08) 50%, transparent 75%);
    filter: blur(32px);
    pointer-events: none;
    z-index: 0;
}

.logo-dialog-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(18, 12, 16, 0.7);
    color: #e1d9d5;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.logo-dialog-close:hover {
    background: var(--flame-red);
    color: #ffffff;
    border-color: var(--flame-red);
    transform: scale(1.08);
}

.logo-dialog-close:focus-visible {
    outline: 2px solid var(--flame-red);
    outline-offset: 2px;
}

.logo-dialog-frame {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(180px, 48vw, 300px);
    height: clamp(180px, 48vw, 300px);
    margin-bottom: 1.5rem;
}

.logo-dialog-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.7));
    user-select: none;
}

.logo-dialog-caption {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.logo-dialog-title {
    font-family: var(--display);
    font-size: clamp(1.4rem, 3.5vw, 1.85rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

.logo-dialog-subtitle {
    font-size: clamp(0.74rem, 1.8vw, 0.85rem);
    color: var(--sandstone);
    font-weight: 600;
    letter-spacing: 0.04em;
    max-width: 22rem;
    line-height: 1.4;
    margin: 0;
}

.logo-dialog-tag {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.25rem 0.75rem;
    background: rgba(212, 17, 21, 0.16);
    border: 1px solid rgba(212, 17, 21, 0.45);
    border-radius: 2px;
    color: var(--flame-red);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Light Theme Support */
[data-theme="light"] .brand-logo-btn:focus-visible {
    outline: 2px solid var(--combat-red);
    box-shadow: 0 0 14px rgba(212, 17, 21, 0.35);
}

[data-theme="light"] .logo-dialog-backdrop {
    background: rgba(247, 244, 240, 0.88);
}

[data-theme="light"] .logo-dialog-card {
    background: #ffffff;
    border-color: rgba(212, 17, 21, 0.35);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.18),
        0 0 35px rgba(212, 17, 21, 0.15),
        inset 0 1px 0 rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .logo-dialog-close {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--line);
}

[data-theme="light"] .logo-dialog-close:hover {
    background: var(--combat-red);
    color: #ffffff;
    border-color: var(--combat-red);
}

[data-theme="light"] .logo-dialog-title {
    color: var(--text);
}

[data-theme="light"] .logo-dialog-subtitle {
    color: var(--text-muted);
}

/* ==========================================================================
   Organization Hierarchy & Dropdown Navigation
   ========================================================================== */

/* Navigation Dropdown Component */
.nav-item-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #e1d9d5;
    font-size: .78rem;
    text-decoration: none;
    transition: color .2s ease;
    white-space: nowrap;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.is-active,
.nav-item-dropdown:hover .nav-dropdown-trigger,
.nav-item-dropdown:focus-within .nav-dropdown-trigger {
    color: var(--flame-red);
}

.nav-dropdown-trigger.is-active {
    font-weight: 700;
}

.nav-caret {
    transition: transform 0.25s ease;
    display: inline-block;
    color: currentColor;
    flex-shrink: 0;
}

.nav-item-dropdown:hover .nav-caret,
.nav-item-dropdown:focus-within .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 290px;
    background: rgba(16, 13, 16, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(212, 17, 21, 0.4);
    border-radius: 10px;
    padding: 0.55rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(212, 17, 21, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.18s ease, color 0.18s ease;
}

.nav-dropdown-link:hover,
.nav-dropdown-link.is-active {
    background: rgba(212, 17, 21, 0.14);
}

.nav-dropdown-link .dropdown-link-title {
    font-family: var(--display);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    color: #ffffff;
    display: block;
}

.nav-dropdown-link:hover .dropdown-link-title,
.nav-dropdown-link.is-active .dropdown-link-title {
    color: var(--flame-red);
}

.nav-dropdown-link .dropdown-link-desc {
    font-size: 0.68rem;
    color: var(--sandstone);
    font-weight: 500;
    line-height: 1.25;
    display: block;
}

/* Mobile Drawer Dropdown Adaptation */
@media (max-width: 1024px) {
    .nav-item-dropdown {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        border-bottom: 1px solid rgb(209 196 184 / 12%);
    }

    .nav-dropdown-trigger {
        padding: 0.8rem 0;
        justify-content: space-between;
        font-size: 0.85rem;
        width: 100%;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none !important;
        opacity: 1;
        pointer-events: auto;
        min-width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border: none;
        border-left: 2px solid var(--flame-red);
        border-radius: 0;
        box-shadow: none;
        padding: 0.25rem 0 0.5rem 1rem;
        margin-bottom: 0.5rem;
        gap: 0.2rem;
    }

    .nav-dropdown-link {
        padding: 0.45rem 0.6rem;
    }

    .nav-caret {
        display: none;
    }
}

/* Lateral Sub-Navigation Pill Bar */
.org-subnav-bar {
    position: sticky;
    top: 76px;
    z-index: 90;
    background: rgba(7, 7, 9, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212, 17, 21, 0.25);
    padding: 0.65rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.org-subnav-inner {
    max-width: var(--content);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.org-subnav-inner::-webkit-scrollbar {
    display: none;
}

.org-subnav-heading {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--warm-ash);
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.org-subnav-items {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.org-subnav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(209, 196, 184, 0.18);
    background: rgba(23, 16, 22, 0.6);
    color: #e1d9d5;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.org-subnav-pill:hover {
    border-color: var(--flame-red);
    background: rgba(212, 17, 21, 0.18);
    color: #ffffff;
    transform: translateY(-1px);
}

.org-subnav-pill.is-active {
    background: var(--flame-red);
    border-color: var(--flame-red);
    color: #ffffff;
    font-weight: 750;
    box-shadow: 0 0 16px rgba(244, 44, 29, 0.45);
}

.org-subnav-pill .pill-sub {
    font-size: 0.62rem;
    opacity: 0.85;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 3-Tier Organizational Hierarchy Visual Tree */
.org-hierarchy-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 920px;
    margin: 2.5rem auto 0;
    width: 100%;
}

.hierarchy-node {
    width: 100%;
    background: linear-gradient(145deg, #161016 0%, #0d090d 100%);
    border: 1px solid rgba(212, 17, 21, 0.35);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    position: relative;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hierarchy-node:hover {
    transform: translateY(-2px);
    border-color: var(--flame-red);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.75), 0 0 28px rgba(212, 17, 21, 0.18);
}

.hierarchy-node.is-current {
    border-color: var(--flame-red);
    border-width: 2px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.85), 0 0 35px rgba(244, 44, 29, 0.28);
    background: linear-gradient(145deg, #1e131b 0%, #100b10 100%);
}

.node-badge-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.node-tier-tag {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--flame-red);
    background: rgba(212, 17, 21, 0.14);
    border: 1px solid rgba(212, 17, 21, 0.45);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.node-role-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sandstone);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.node-current-pill {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--flame-red);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(244, 44, 29, 0.5);
}

.node-card-body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
}

.node-icon-crest {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    background: rgba(212, 17, 21, 0.12);
    border: 1px solid rgba(212, 17, 21, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--flame-red);
    flex-shrink: 0;
}

.node-crest-budo {
    color: #ff5744;
    background: rgba(244, 44, 29, 0.14);
    border-color: rgba(244, 44, 29, 0.4);
}

.node-crest-karate {
    background: rgba(18, 12, 16, 0.85);
    padding: 6px;
}

.node-crest-karate img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.node-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.node-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.node-title {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #ffffff;
    margin: 0;
    line-height: 1.15;
}

.node-alias {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sandstone);
    line-height: 1.3;
}

.node-summary {
    font-size: 0.84rem;
    color: var(--warm-ash);
    line-height: 1.45;
    margin: 0;
}

.node-highlights {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.nh-pill {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--sandstone);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
}

.node-cta-cell {
    flex-shrink: 0;
}

.node-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.15rem;
    border-radius: 4px;
    background: rgba(212, 17, 21, 0.18);
    border: 1px solid var(--flame-red);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.node-action-btn:hover {
    background: var(--flame-red);
    box-shadow: 0 0 16px rgba(244, 44, 29, 0.45);
    transform: translateY(-1px);
}

.node-status-text {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--flame-red);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Hierarchy Connector Stems */
.hierarchy-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 0;
    position: relative;
    width: 100%;
}

.connector-stem {
    width: 2px;
    height: 28px;
    background: linear-gradient(to bottom, var(--flame-red), rgba(212, 17, 21, 0.25));
}

.connector-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(23, 16, 22, 0.85);
    border: 1px solid rgba(212, 17, 21, 0.3);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--sandstone);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.connector-arrow {
    color: var(--flame-red);
    font-weight: 900;
}

/* Entity Cards Grid */
.entity-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.75rem;
    margin-top: 2rem;
}

.entity-card {
    background: linear-gradient(155deg, #171016 0%, #0d090d 100%);
    border: 1px solid rgba(212, 17, 21, 0.35);
    border-radius: 12px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.entity-card:hover {
    transform: translateY(-3px);
    border-color: var(--flame-red);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(212, 17, 21, 0.16);
}

.entity-card-current {
    border-color: var(--flame-red);
    border-width: 2px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(244, 44, 29, 0.2);
}

.entity-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.entity-tier {
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    color: var(--flame-red);
    text-transform: uppercase;
}

.entity-badge {
    font-size: 0.64rem;
    font-weight: 800;
    color: #ffffff;
    background: var(--flame-red);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
}

.entity-link-badge {
    font-size: 0.7rem;
    font-weight: 750;
    color: var(--flame-red);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.15s ease;
}

.entity-link-badge:hover {
    color: #ffffff;
}

.entity-card h3 {
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.entity-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--sandstone);
    font-weight: 600;
    margin-bottom: 0.85rem;
    line-height: 1.35;
}

.entity-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 1rem;
}

.entity-points {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.entity-points li {
    font-size: 0.8rem;
    color: #e1d9d5;
    position: relative;
    padding-left: 1.15rem;
    line-height: 1.4;
}

.entity-points li::before {
    content: "▪";
    position: absolute;
    left: 0;
    color: var(--flame-red);
    font-size: 0.9rem;
    line-height: 1;
    top: 0.1rem;
}

.entity-card-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(209, 196, 184, 0.12);
}

/* Page Hero Affiliation Badge */
.hero-affiliation-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 1rem;
    background: rgba(23, 16, 22, 0.6);
    border: 1px solid rgba(212, 17, 21, 0.35);
    border-radius: 6px;
    margin-top: 1.25rem;
    width: fit-content;
}

.affil-tier {
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    color: var(--flame-red);
    text-transform: uppercase;
}

.affil-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* Distinct Hero Frame Styles */
.page-hero-frame-ssdka {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(209, 196, 184, 0.12);
}

.ssdka-seal-badge {
    background: rgba(23, 16, 22, 0.92);
    border-color: rgba(209, 196, 184, 0.35);
}

.page-hero-frame-ma365 {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 45px rgba(244, 44, 29, 0.22);
}

.ma365-budo-badge {
    background: rgba(23, 16, 22, 0.92);
    border-color: rgba(244, 44, 29, 0.45);
}

.karate365-dojo-badge {
    background: rgba(23, 16, 22, 0.92);
    border-color: rgba(212, 17, 21, 0.45);
}

/* Governance Grid */
.governance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.gov-card {
    background: linear-gradient(145deg, #161016 0%, #0d090d 100%);
    border: 1px solid rgba(212, 17, 21, 0.3);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.gov-icon {
    font-size: 1.75rem;
    display: block;
    line-height: 1;
}

.gov-card h3 {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.gov-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Light Theme Adaptations for Organization Components */
[data-theme="light"] .nav-dropdown-trigger {
    color: var(--text);
}

[data-theme="light"] .nav-dropdown-trigger:hover,
[data-theme="light"] .nav-dropdown-trigger.is-active,
[data-theme="light"] .nav-item-dropdown:hover .nav-dropdown-trigger {
    color: var(--combat-red);
}

[data-theme="light"] .nav-dropdown-menu {
    background: var(--surface);
    border-color: rgba(212, 17, 21, 0.3);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(212, 17, 21, 0.08);
}

[data-theme="light"] .nav-dropdown-link:hover,
[data-theme="light"] .nav-dropdown-link.is-active {
    background: rgba(212, 17, 21, 0.08);
}

[data-theme="light"] .nav-dropdown-link .dropdown-link-title {
    color: var(--text);
}

[data-theme="light"] .nav-dropdown-link:hover .dropdown-link-title,
[data-theme="light"] .nav-dropdown-link.is-active .dropdown-link-title {
    color: var(--combat-red);
}

[data-theme="light"] .nav-dropdown-link .dropdown-link-desc {
    color: var(--text-muted);
}

[data-theme="light"] .org-subnav-bar {
    background: rgba(247, 246, 243, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .org-subnav-heading {
    color: var(--text-muted);
}

[data-theme="light"] .org-subnav-pill {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="light"] .org-subnav-pill:hover {
    border-color: var(--combat-red);
    background: rgba(212, 17, 21, 0.08);
    color: var(--combat-red);
}

[data-theme="light"] .org-subnav-pill.is-active {
    background: var(--combat-red);
    border-color: var(--combat-red);
    color: #ffffff;
}

[data-theme="light"] .org-subnav-pill .pill-sub {
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
}

[data-theme="light"] .hierarchy-node {
    background: var(--surface);
    border-color: rgba(212, 17, 21, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .hierarchy-node.is-current {
    background: var(--surface);
    border-color: var(--combat-red);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 0 25px rgba(212, 17, 21, 0.14);
}

[data-theme="light"] .node-title {
    color: var(--text);
}

[data-theme="light"] .node-alias {
    color: var(--text-muted);
}

[data-theme="light"] .node-summary {
    color: var(--text-muted);
}

[data-theme="light"] .nh-pill {
    background: var(--surface-alt);
    border-color: var(--line);
    color: var(--text-muted);
}

[data-theme="light"] .node-role-badge {
    color: var(--text-muted);
}

[data-theme="light"] .node-action-btn {
    background: rgba(212, 17, 21, 0.08);
    border-color: var(--combat-red);
    color: var(--combat-red);
}

[data-theme="light"] .node-action-btn:hover {
    background: var(--combat-red);
    color: #ffffff;
}

[data-theme="light"] .connector-badge {
    background: var(--surface);
    border-color: rgba(212, 17, 21, 0.25);
    color: var(--text-muted);
}

[data-theme="light"] .entity-card {
    background: var(--surface);
    border-color: rgba(212, 17, 21, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .entity-card h3 {
    color: var(--text);
}

[data-theme="light"] .entity-sub {
    color: var(--text-muted);
}

[data-theme="light"] .entity-points li {
    color: var(--text);
}

[data-theme="light"] .hero-affiliation-badge {
    background: var(--surface);
    border-color: rgba(212, 17, 21, 0.25);
}

[data-theme="light"] .affil-name {
    color: var(--text);
}

[data-theme="light"] .gov-card {
    background: var(--surface);
    border-color: rgba(212, 17, 21, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .gov-card h3 {
    color: var(--text);
}

@media (max-width: 640px) {
    .node-card-body {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: left;
    }

    .node-icon-crest {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }

    .node-cta-cell {
        margin-top: 0.5rem;
    }

    .node-action-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-dialog-backdrop,
    .logo-dialog-card,
    .brand-logo-btn,
    .hierarchy-node,
    .entity-card,
    .nav-dropdown-menu,
    .org-subnav-pill,
    .affiliation-card {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Technical Affiliations & Institutional Recognitions Section
   ========================================================================== */

.section-affiliations {
    position: relative;
    background: radial-gradient(circle at 50% 0%, rgb(75 45 46 / 20%) 0%, var(--obsidian) 70%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: clamp(3.5rem, 6vw, 6.5rem) var(--gutter);
}

.affiliations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 1.8vw, 1.75rem);
    margin-top: clamp(2rem, 3.5vw, 3.5rem);
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.affiliation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(145deg, rgba(23, 16, 22, 0.85) 0%, rgba(16, 13, 16, 0.95) 100%);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: clamp(1.4rem, 2vw, 1.85rem);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    backdrop-filter: blur(8px);
    overflow: hidden;
}

.affiliation-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--combat-red) 0%, transparent 100%);
    opacity: 0.6;
    transition: opacity 0.25s ease;
}

.affiliation-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 17, 21, 0.45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 17, 21, 0.12);
}

.affiliation-card:hover::before {
    opacity: 1;
}

.affiliation-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(209, 196, 184, 0.08);
}

.affiliation-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--flame-red);
    background: rgba(212, 17, 21, 0.1);
    border: 1px solid rgba(212, 17, 21, 0.25);
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
}

.affiliation-crest-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sandstone);
    opacity: 0.65;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.affiliation-card:hover .affiliation-crest-icon {
    opacity: 1;
    color: var(--flame-red);
    transform: scale(1.1);
}

.affiliation-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex-grow: 1;
}

.affiliation-prefix {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--warm-ash);
}

.affiliation-text {
    font-family: var(--display);
    font-size: clamp(0.95rem, 1.05vw, 1.12rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--text);
    margin: 0;
}

/* Administrative Governance Assurance Strip */
.affiliations-assurance-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: rgba(16, 13, 16, 0.85);
    border: 1px solid rgba(209, 196, 184, 0.14);
    border-radius: 12px;
    padding: 1.1rem 1.6rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.affiliations-assurance-bar .assurance-icon {
    font-size: 1.45rem;
    flex-shrink: 0;
    line-height: 1;
}

.affiliations-assurance-bar .assurance-copy {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--sandstone);
    flex-grow: 1;
}

.affiliations-assurance-bar .assurance-copy strong {
    color: var(--text);
    font-weight: 700;
    display: inline;
    margin-right: 0.35rem;
}

.affiliations-assurance-bar .assurance-link {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--flame-red);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, transform 0.2s ease;
}

.affiliations-assurance-bar .assurance-link:hover {
    color: #ff5b4f;
    text-decoration: underline;
}

/* Light Theme Overrides */
[data-theme="light"] .section-affiliations {
    background: radial-gradient(circle at 50% 0%, rgba(212, 17, 21, 0.05) 0%, var(--obsidian) 70%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

[data-theme="light"] .affiliation-card {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .affiliation-card:hover {
    border-color: var(--combat-red);
    box-shadow: var(--shadow-md), 0 0 16px rgba(212, 17, 21, 0.08);
}

[data-theme="light"] .affiliation-card-header {
    border-bottom: 1px solid var(--line);
}

[data-theme="light"] .affiliation-badge {
    background: rgba(212, 17, 21, 0.08);
    border-color: rgba(212, 17, 21, 0.2);
    color: var(--combat-red);
}

[data-theme="light"] .affiliation-crest-icon {
    color: var(--sandstone);
}

[data-theme="light"] .affiliation-prefix {
    color: var(--warm-ash);
}

[data-theme="light"] .affiliation-text {
    color: var(--text);
}

[data-theme="light"] .affiliations-assurance-bar {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .affiliations-assurance-bar .assurance-copy {
    color: var(--text-muted);
}

[data-theme="light"] .affiliations-assurance-bar .assurance-copy strong {
    color: var(--text);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .affiliations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.15rem;
    }
}

@media (max-width: 680px) {
    .affiliations-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .affiliations-assurance-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1.15rem;
    }

    .affiliations-assurance-bar .assurance-link {
        align-self: flex-start;
    }
}

/* ==========================================================================
   Homepage Recognitions & Affiliations Horizontal Strip (5 Rows)
   ========================================================================== */

.recognitions-bar-section {
    position: relative;
    background: #090709;
    border-top: 1px solid rgba(212, 17, 21, 0.35);
    border-bottom: 1px solid var(--line);
    padding: clamp(1.8rem, 3.2vw, 2.85rem) var(--gutter);
}

.rec-bar-container {
    width: min(100%, 1220px);
    margin-inline: auto;
    text-align: center;
}

.rec-bar-header {
    margin-bottom: clamp(0.85rem, 1.4vw, 1.25rem);
}

.rec-bar-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--flame-red);
    background: rgba(212, 17, 21, 0.08);
    border: 1px solid rgba(212, 17, 21, 0.24);
    padding: 0.32rem 0.85rem;
    border-radius: 50px;
}

.rec-bar-rows {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(16, 13, 16, 0.92) 0%, rgba(12, 9, 12, 0.96) 100%);
    border: 1px solid rgba(209, 196, 184, 0.12);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.rec-bar-row {
    position: relative;
    padding: clamp(0.72rem, 1.1vw, 1.05rem) clamp(1rem, 2vw, 1.85rem);
    border-bottom: 1px solid rgba(209, 196, 184, 0.1);
    transition: background-color 0.2s ease;
}

.rec-bar-row:last-child {
    border-bottom: none;
}

.rec-bar-row:hover {
    background-color: rgba(212, 17, 21, 0.035);
}

/* Restrained subtle red indicator */
.rec-bar-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 2px;
    background: var(--combat-red);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.rec-bar-row:hover::before {
    opacity: 0.85;
}

.rec-row-content {
    font-family: var(--display);
    font-size: clamp(0.85rem, 0.95vw, 0.94rem);
    line-height: 1.55;
    color: var(--text);
    margin: 0;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.rec-row-content strong {
    color: #ffffff;
    font-weight: 600;
}

/* Light Theme Styling */
[data-theme="light"] .recognitions-bar-section {
    background: var(--surface-alt);
    border-top: 1px solid rgba(212, 17, 21, 0.25);
    border-bottom: 1px solid var(--line);
}

[data-theme="light"] .rec-bar-kicker {
    background: rgba(212, 17, 21, 0.08);
    border-color: rgba(212, 17, 21, 0.25);
    color: var(--combat-red);
}

[data-theme="light"] .rec-bar-rows {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .rec-bar-row {
    border-bottom: 1px solid var(--line);
}

[data-theme="light"] .rec-bar-row:hover {
    background-color: rgba(212, 17, 21, 0.03);
}

[data-theme="light"] .rec-row-content {
    color: var(--text-muted);
}

[data-theme="light"] .rec-row-content strong {
    color: var(--text);
    font-weight: 600;
}

/* Responsive Narrow Screen Adaptations */
@media (max-width: 640px) {
    .recognitions-bar-section {
        padding: 1.5rem 0.85rem;
    }

    .rec-bar-rows {
        border-radius: 8px;
    }

    .rec-bar-row {
        padding: 0.72rem 0.85rem;
    }

    .rec-row-content {
        font-size: 0.82rem;
        line-height: 1.5;
        text-align: center;
    }
}

/* ==========================================================================
   Recognitions & Affiliations — Moving Logo Marquee Strip (12 Positions)
   ========================================================================== */

.rec-bar-title {
    font-family: var(--display);
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0.65rem 0 1.25rem;
    line-height: 1.2;
}

[data-theme="light"] .rec-bar-title {
    color: var(--text);
}

.marquee-logo-strip {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0.75rem 0 1.5rem;
    margin-bottom: clamp(1.2rem, 2.2vw, 1.85rem);
    mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}

.marquee-track-container {
    display: flex;
    width: max-content;
    gap: 1.25rem;
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
    animation: continuousMarquee 45s linear infinite;
    will-change: transform;
}

.marquee-logo-strip:hover .marquee-track,
.marquee-logo-strip:focus-within .marquee-track,
.marquee-logo-strip:active .marquee-track {
    animation-play-state: paused;
}

@keyframes continuousMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% - 1.25rem));
    }
}

.marquee-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 205px;
    height: 88px;
    padding: 0.5rem 0.75rem;
    background: rgba(18, 14, 18, 0.75);
    border: 1px solid rgba(209, 196, 184, 0.12);
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
    user-select: none;
    flex-shrink: 0;
    box-sizing: border-box;
}

.marquee-logo-card:hover {
    border-color: rgba(212, 17, 21, 0.45);
    background: rgba(24, 17, 23, 0.95);
    box-shadow: 0 6px 20px rgba(212, 17, 21, 0.15);
    transform: translateY(-2px);
}

.marquee-logo-img {
    max-height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.marquee-logo-card:hover .marquee-logo-img {
    transform: scale(1.05);
}

.marquee-logo-label {
    display: block;
    font-family: var(--display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.35rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: break-word;
}

.marquee-logo-card:hover .marquee-logo-label {
    color: #ffffff;
}

/* Badge card for pending logo asset uploads */
.marquee-logo-card.is-badge {
    background: linear-gradient(145deg, rgba(23, 16, 22, 0.9) 0%, rgba(13, 10, 14, 0.95) 100%);
    border: 1px solid rgba(212, 17, 21, 0.24);
}

.marquee-badge-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    width: 100%;
}

.marquee-badge-abbr {
    font-family: var(--display);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    text-align: center;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: break-word;
}

.marquee-badge-tier {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--flame-red);
    text-transform: uppercase;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    text-align: center;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: break-word;
}

.marquee-logo-card.is-badge:hover .marquee-badge-abbr {
    color: #ffffff;
}

.marquee-logo-card.is-badge:hover .marquee-badge-tier {
    color: #ff6859;
}

/* Light Theme Styling for Marquee */
[data-theme="light"] .marquee-logo-card {
    background: #ffffff;
    border-color: rgba(40, 25, 25, 0.14);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .marquee-logo-card:hover {
    border-color: rgba(212, 17, 21, 0.45);
    background: #fff8f8;
    box-shadow: 0 6px 20px rgba(212, 17, 21, 0.12);
}


[data-theme="light"] .marquee-logo-label {
    color: var(--text-muted);
}

[data-theme="light"] .marquee-logo-card:hover .marquee-logo-label {
    color: var(--combat-red);
}

[data-theme="light"] .marquee-logo-card.is-badge {
    background: linear-gradient(145deg, #ffffff 0%, #faf5f2 100%);
    border-color: rgba(212, 17, 21, 0.28);
}

[data-theme="light"] .marquee-badge-abbr {
    color: var(--text);
}

[data-theme="light"] .marquee-badge-tier {
    color: var(--combat-red);
}

@media (prefers-reduced-motion: reduce) {
    .marquee-logo-strip {
        mask-image: none !important;
        -webkit-mask-image: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1.2rem;
    }
    .marquee-track-container {
        width: 100%;
    }
    .marquee-track {
        animation: none !important;
    }
    .marquee-track[aria-hidden="true"] {
        display: none !important;
    }
}

/* ==========================================================================
   Section: What Is Karate? (Educational Foundation)
   ========================================================================== */

.section-what-is-karate {
    position: relative;
    padding: clamp(3.5rem, 6vw, 6.5rem) var(--gutter);
    background: #080709;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

[data-theme="light"] .section-what-is-karate {
    background: #fbf9f6;
    border-bottom-color: rgba(40, 25, 25, 0.1);
}

.what-karate-container {
    width: min(100%, var(--content));
    margin-inline: auto;
}

.what-karate-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.what-karate-copy {
    display: flex;
    flex-direction: column;
}

.what-karate-heading {
    font-family: var(--display);
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0.5rem 0 1.25rem;
}

.what-karate-heading em {
    font-style: italic;
    color: var(--combat-red);
    font-family: var(--display);
}

.what-karate-desc {
    font-size: clamp(1.02rem, 1.25vw, 1.18rem);
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 2rem;
    max-width: 62ch;
}

.what-karate-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

.what-karate-point {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.2rem;
    background: rgba(18, 14, 18, 0.8);
    border: 1px solid rgba(209, 196, 184, 0.12);
    border-radius: 8px;
    border-left: 3px solid var(--combat-red);
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.what-karate-point:hover {
    transform: translateX(4px);
    border-color: rgba(212, 17, 21, 0.45);
    background: rgba(24, 17, 23, 0.95);
}

[data-theme="light"] .what-karate-point {
    background: #ffffff;
    border-color: rgba(40, 25, 25, 0.12);
    border-left: 3px solid var(--combat-red);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .what-karate-point:hover {
    background: #fff8f8;
    border-color: rgba(212, 17, 21, 0.4);
}

.point-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--flame-red);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(244, 44, 29, 0.5);
}

.point-text {
    font-family: var(--display);
    font-size: clamp(0.88rem, 1vw, 0.98rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text);
}

.what-karate-media {
    position: relative;
    display: flex;
    justify-content: center;
}

.what-karate-frame {
    position: relative;
    width: 100%;
    max-width: 460px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(209, 196, 184, 0.16);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .what-karate-frame {
    border-color: rgba(40, 25, 25, 0.15);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.what-karate-aura {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 25%, rgba(212, 17, 21, 0.22) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}

.what-karate-kanji {
    position: absolute;
    bottom: -1rem;
    right: 0.8rem;
    font-family: serif;
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

[data-theme="light"] .what-karate-kanji {
    color: rgba(0, 0, 0, 0.05);
}

.what-karate-img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.what-karate-frame:hover .what-karate-img {
    transform: scale(1.03);
}

/* ==========================================================================
   Section: Our Style — Dynamic Shotokan (Cinematic Black & Crimson)
   ========================================================================== */

.section-dynamic-shotokan {
    position: relative;
    padding: clamp(3.5rem, 6vw, 6.5rem) var(--gutter);
    background: linear-gradient(180deg, #090709 0%, #110c10 50%, #070709 100%);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

[data-theme="light"] .section-dynamic-shotokan {
    background: linear-gradient(180deg, var(--surface-alt) 0%, var(--obsidian) 50%, var(--surface-alt) 100%);
    border-bottom-color: var(--line);
}

.shotokan-container {
    width: min(100%, var(--content));
    margin-inline: auto;
}

.shotokan-card {
    position: relative;
    background: rgba(14, 11, 14, 0.85);
    border: 1px solid rgba(212, 17, 21, 0.3);
    border-radius: 18px;
    padding: clamp(2rem, 4.5vw, 3.8rem);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

[data-theme="light"] .shotokan-card {
    background: #ffffff;
    border-color: rgba(212, 17, 21, 0.35);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.shotokan-aura {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 17, 21, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.shotokan-grid {
    position: relative;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    z-index: 1;
}

.shotokan-media {
    position: relative;
}

.shotokan-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(209, 196, 184, 0.16);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .shotokan-frame {
    border-color: rgba(40, 25, 25, 0.15);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

.shotokan-watermark {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    font-family: serif;
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

[data-theme="light"] .shotokan-watermark {
    color: rgba(0, 0, 0, 0.07);
}

.shotokan-img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.shotokan-frame:hover .shotokan-img {
    transform: scale(1.03);
}

.shotokan-badge-tag {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(7, 7, 9, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 17, 21, 0.4);
    padding: 0.4rem 0.85rem;
    border-radius: 4px;
    font-family: var(--display);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--flame-red);
    text-transform: uppercase;
    z-index: 2;
}

[data-theme="light"] .shotokan-badge-tag {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(212, 17, 21, 0.45);
    color: var(--combat-red);
}

.shotokan-copy {
    display: flex;
    flex-direction: column;
}

.shotokan-heading {
    font-family: var(--display);
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0.5rem 0 1.25rem;
}

.shotokan-heading em {
    font-style: italic;
    color: var(--combat-red);
    font-family: var(--display);
}

.shotokan-desc {
    font-size: clamp(1.02rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 2rem;
    max-width: 64ch;
}

.shotokan-grid-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.shotokan-pill {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.15rem;
    background: rgba(18, 14, 18, 0.7);
    border: 1px solid rgba(209, 196, 184, 0.12);
    border-radius: 8px;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.shotokan-pill:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 17, 21, 0.45);
    background: rgba(24, 17, 23, 0.95);
}

[data-theme="light"] .shotokan-pill {
    background: #fbf9f6;
    border-color: rgba(40, 25, 25, 0.12);
}

[data-theme="light"] .shotokan-pill:hover {
    background: #fff8f8;
    border-color: rgba(212, 17, 21, 0.4);
}

.pill-number {
    font-family: var(--display);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--flame-red);
    background: rgba(212, 17, 21, 0.1);
    border: 1px solid rgba(212, 17, 21, 0.25);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    flex-shrink: 0;
}

[data-theme="light"] .pill-number {
    color: var(--combat-red);
    background: rgba(212, 17, 21, 0.08);
    border-color: rgba(212, 17, 21, 0.2);
}

.pill-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pill-content strong {
    font-family: var(--display);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.pill-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* Responsive Adaptations for What Is Karate & Dynamic Shotokan */
@media (max-width: 960px) {
    .what-karate-grid,
    .shotokan-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .what-karate-media,
    .shotokan-media {
        order: -1;
        max-width: 520px;
        margin-inline: auto;
        width: 100%;
    }

    .what-karate-points,
    .shotokan-grid-points {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .marquee-logo-strip {
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    .marquee-logo-card {
        width: 175px;
        height: 82px;
        padding: 0.45rem 0.6rem;
    }

    .marquee-logo-img {
        max-height: 36px;
        max-width: 130px;
    }

    .marquee-logo-label {
        font-size: 0.62rem;
        line-height: 1.2;
    }

    .marquee-badge-abbr {
        font-size: 0.76rem;
        line-height: 1.2;
    }

    .marquee-badge-tier {
        font-size: 0.55rem;
        line-height: 1.2;
    }

    .what-karate-heading,
    .shotokan-heading {
        font-size: 1.85rem;
    }

    .what-karate-desc,
    .shotokan-desc {
        font-size: 0.96rem;
    }
}






/* ==========================================================================
   KARATE 365 - SENSEI NAVEEN LEGENDARY PROFILE DESIGN SYSTEM
   ========================================================================== */

/* Hero Enhancements */
.legendary-profile-title {
    font-size: clamp(2.4rem, 5.5vw, 4.4rem);
    letter-spacing: -0.02em;
    font-weight: 900;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 40%, rgba(255, 255, 255, 0.75) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.05;
    margin-bottom: 0.6rem;
}

.legendary-profile-role {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--display);
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    font-weight: 700;
    color: var(--flame-red);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.8rem;
    background: rgba(212, 17, 21, 0.12);
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(212, 17, 21, 0.35);
    width: fit-content;
}

.legendary-portrait-card {
    border-color: rgba(212, 17, 21, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(212, 17, 21, 0.25);
}

/* Sticky Profile Sub-Navigation */
.profile-subnav {
    position: sticky;
    top: clamp(3.8rem, 5.5vw, 4.8rem);
    z-index: 90;
    background: rgba(11, 11, 14, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(212, 17, 21, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    margin-bottom: 2rem;
}

.profile-subnav-inner {
    max-width: var(--content);
    margin: 0 auto;
    padding: 0.6rem var(--gutter);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.profile-subnav-inner::-webkit-scrollbar {
    display: none;
}

.subnav-link {
    white-space: nowrap;
    font-family: var(--display);
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.45rem 0.95rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    flex-shrink: 0;
}

.subnav-link:hover,
.subnav-link:focus-visible {
    color: #ffffff;
    background: rgba(212, 17, 21, 0.2);
    border-color: rgba(212, 17, 21, 0.5);
    transform: translateY(-1px);
}

/* Achievement Counters Section */
.profile-achievements {
    padding-top: clamp(2rem, 4vw, 4rem);
}

.achievement-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.2rem, 2.5vw, 2.2rem);
    margin-bottom: 1.5rem;
}

.stat-card-gold {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.12) 0%, rgba(18, 18, 22, 0.95) 75%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 14px;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    text-align: center;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(245, 158, 11, 0.4);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.stat-card-gold:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.25);
}

.stat-card-badge-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.stat-gold-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}

.stat-kanji {
    font-family: serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(245, 158, 11, 0.4);
    user-select: none;
}

.stat-number-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.stat-number {
    font-family: var(--display);
    font-size: clamp(3.5rem, 6.5vw, 5.2rem);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(180deg, #fef08a 0%, #f59e0b 55%, #b45309 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.3));
}

.stat-suffix {
    font-family: var(--display);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 800;
    color: #f59e0b;
    text-transform: uppercase;
}

.stat-label {
    font-family: var(--display);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.45rem;
    line-height: 1.25;
}

.stat-sublabel {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.archive-disclosure-box {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid #f59e0b;
    padding: 1rem 1.4rem;
    border-radius: 8px;
    margin-top: 1.5rem;
}

.archive-disclosure-box .disclosure-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.archive-disclosure-box .disclosure-text {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Section 2: Qualifications & Credentials */
.qualifications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.2rem, 2.5vw, 2.2rem);
    margin-bottom: 2rem;
}

.qualification-card {
    background: linear-gradient(180deg, rgba(20, 20, 24, 0.95) 0%, rgba(12, 12, 15, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-top: 3px solid var(--combat-red);
    border-radius: 12px;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.qualification-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 17, 21, 0.5);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

.qual-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.qual-badge {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--flame-red);
    background: rgba(212, 17, 21, 0.12);
    border: 1px solid rgba(212, 17, 21, 0.3);
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
}

.qual-discipline {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qual-rank-display {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.qual-belt-indicator {
    width: 28px;
    height: 9px;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(212, 17, 21, 0.6);
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

.qual-rank-display h3 {
    font-family: var(--display);
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.15;
}

.qual-org {
    font-family: var(--display);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--warm-ash);
    margin-bottom: 0.6rem;
    line-height: 1.35;
}

.qual-status {
    font-size: 0.8rem;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qual-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

.technical-authority-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.8rem;
    align-items: center;
    background: linear-gradient(90deg, rgba(212, 17, 21, 0.15) 0%, rgba(18, 18, 22, 0.95) 100%);
    border: 1px solid rgba(212, 17, 21, 0.4);
    border-radius: 12px;
    padding: clamp(1.4rem, 2.5vw, 2.2rem);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.auth-shield {
    font-size: 2.8rem;
    filter: drop-shadow(0 4px 12px rgba(212, 17, 21, 0.5));
}

.auth-tag {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--flame-red);
    margin-bottom: 0.35rem;
}

.auth-body-col h3 {
    font-family: var(--display);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.6rem;
}

.auth-body-col p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Section 3: Competitive Legacy */
.legacy-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.4rem, 2.5vw, 2.2rem);
}

.legacy-card {
    background: rgba(18, 18, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.legacy-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 17, 21, 0.5);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(212, 17, 21, 0.2);
}

.legacy-card-media {
    position: relative;
    height: 240px;
    background: #000000;
    overflow: hidden;
    cursor: pointer;
}

.legacy-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s ease;
}

.legacy-card:hover .legacy-card-media img {
    transform: scale(1.05);
}

.legacy-media-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.legacy-card-media:hover .legacy-media-overlay,
.legacy-card-media:focus-visible .legacy-media-overlay {
    opacity: 1;
}

.overlay-zoom {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(212, 17, 21, 0.85);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legacy-card-badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    background: rgba(212, 17, 21, 0.9);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.legacy-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.legacy-date-row {
    margin-bottom: 0.5rem;
}

.legacy-date {
    font-size: 0.8rem;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legacy-card-content h3 {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.legacy-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 1rem;
    flex: 1;
}

.legacy-verification-note {
    font-size: 0.8rem;
    color: var(--warm-ash);
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--combat-red);
    padding: 0.5rem 0.75rem;
    border-radius: 0 4px 4px 0;
    margin: 0;
    display: flex;
    gap: 0.45rem;
}

/* Section 4: Certificate & Trophy Vault */
.vault-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.2rem, 2.5vw, 2rem);
}

.vault-item-card {
    background: rgba(18, 18, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.vault-item-card:hover,
.vault-item-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(212, 17, 21, 0.6);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(212, 17, 21, 0.2);
    outline: none;
}

.vault-media-frame {
    position: relative;
    height: 260px;
    background: #060608;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem;
}

.vault-media-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center center;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
    border-radius: 4px;
}

.vault-item-card:hover .vault-media-img {
    transform: scale(1.03);
}

.vault-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vault-item-card:hover .vault-overlay,
.vault-item-card:focus-visible .vault-overlay {
    opacity: 1;
}

.vault-zoom-pill {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--combat-red);
    padding: 0.45rem 1rem;
    border-radius: 999px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.vault-category-pill {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    background: rgba(15, 15, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    backdrop-filter: blur(8px);
}

.vault-caption {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vault-caption h4 {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.vault-caption p {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.85rem;
    flex: 1;
}

.vault-badge-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Section 5: Leadership & Governance */
.leadership-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.2rem, 2vw, 1.8rem);
    margin-bottom: 2rem;
}

.leadership-role-card {
    background: rgba(18, 18, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--combat-red);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.leadership-role-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 17, 21, 0.5);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6);
}

.role-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.role-badge {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--flame-red);
    background: rgba(212, 17, 21, 0.12);
    border: 1px solid rgba(212, 17, 21, 0.3);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}

.role-category-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.role-title {
    font-family: var(--display);
    font-size: 1.18rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.4rem;
    line-height: 1.25;
}

.role-org {
    font-family: var(--display);
    font-size: 0.92rem;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 0.65rem;
    line-height: 1.35;
}

.role-desc {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

.teaching-philosophy-card {
    position: relative;
    background: linear-gradient(135deg, rgba(25, 15, 17, 0.95) 0%, rgba(12, 12, 15, 0.98) 100%);
    border: 1px solid rgba(212, 17, 21, 0.35);
    border-radius: 12px;
    padding: clamp(1.6rem, 3vw, 2.5rem);
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.philosophy-kanji {
    position: absolute;
    right: 1.5rem;
    bottom: -1rem;
    font-size: 8rem;
    font-family: serif;
    font-weight: 900;
    color: rgba(212, 17, 21, 0.06);
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

.philosophy-tag {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--flame-red);
    margin-bottom: 0.4rem;
    display: inline-block;
}

.philosophy-content h3 {
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.85rem;
}

.philosophy-content p {
    font-size: 0.94rem;
    color: var(--warm-ash);
    line-height: 1.7;
    margin: 0;
    max-width: 850px;
}

/* Section 6: Documented Career Timeline */
.timeline-container {
    position: relative;
    padding-left: 2rem;
}

.timeline-track {
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 20px;
    width: 2px;
    background: linear-gradient(180deg, var(--combat-red) 0%, rgba(212, 17, 21, 0.3) 70%, rgba(255, 255, 255, 0.1) 100%);
}

.timeline-entries {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-entry {
    position: relative;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}

.timeline-marker {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    position: relative;
}

.marker-dot {
    position: absolute;
    left: -2rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--obsidian);
    border: 3px solid var(--combat-red);
    box-shadow: 0 0 10px rgba(212, 17, 21, 0.8);
}

.marker-year {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.timeline-content-card {
    background: rgba(18, 18, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.timeline-content-card:hover {
    transform: translateX(4px);
    border-color: rgba(212, 17, 21, 0.4);
}

.timeline-card-header {
    margin-bottom: 0.5rem;
}

.timeline-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    margin-bottom: 0.4rem;
}

.timeline-title {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.timeline-org {
    font-family: var(--display);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}

.timeline-desc {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (1024px, 768px, 390px, 360px)
   ========================================================================== */

@media (max-width: 1024px) {
    .achievement-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
    .qualifications-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
    .legacy-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vault-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .profile-subnav {
        top: 3.5rem;
    }
    .portrait-photo-stage {
        height: clamp(380px, 92vw, 440px);
    }
    .page-hero-art .profile-portrait-sadiq,
    .portrait-photo-stage .profile-portrait-sadiq,
    .profile-portrait-sadiq,
    .page-hero-art .profile-portrait-manjunath,
    .portrait-photo-stage .profile-portrait-manjunath,
    .profile-portrait-manjunath {
        object-position: center top;
    }
    .achievement-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .qualifications-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .technical-authority-banner {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: left;
    }
    .legacy-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .legacy-card-media {
        height: 220px;
    }
    .vault-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .vault-media-frame {
        height: 220px;
    }
    .timeline-container {
        padding-left: 1.5rem;
    }
    .timeline-entry {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .marker-dot {
        left: -1.5rem;
    }
    .timeline-marker {
        margin-bottom: 0.2rem;
    }
}

@media (max-width: 480px) {
    .portrait-photo-stage {
        height: clamp(370px, 105vw, 420px);
    }
    .page-hero-art .profile-portrait-naveen,
    .portrait-photo-stage .profile-portrait-naveen,
    .profile-portrait-naveen {
        object-position: center 1%;
    }
    .page-hero-art .profile-portrait-sadiq,
    .portrait-photo-stage .profile-portrait-sadiq,
    .profile-portrait-sadiq,
    .page-hero-art .profile-portrait-manjunath,
    .portrait-photo-stage .profile-portrait-manjunath,
    .profile-portrait-manjunath {
        object-position: center top;
    }
    .vault-gallery-grid {
        grid-template-columns: 1fr;
    }
    .vault-media-frame {
        height: 240px;
    }
    .stat-number {
        font-size: 3.2rem;
    }
    .legendary-profile-role {
        font-size: 0.85rem;
        padding: 0.35rem 0.85rem;
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .stat-card-gold,
    .qualification-card,
    .legacy-card,
    .vault-item-card,
    .leadership-role-card,
    .timeline-content-card,
    .subnav-link {
        transition: none !important;
        transform: none !important;
    }
    .legacy-card-media img,
    .vault-media-img {
        transition: none !important;
        transform: none !important;
    }
}

/* Homepage Leadership, Branches & Martial Arts in Action Enhancements */
.sensei-card.sensei-card-featured {
    padding: 1.35rem;
    cursor: pointer;
    border-radius: 8px;
    background: linear-gradient(155deg, #151016 0%, #09070b 100%);
    border: 1px solid rgba(209, 196, 184, 0.16);
}

.sensei-card.sensei-card-featured:hover,
.sensei-card.sensei-card-featured:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(212, 17, 21, 0.65);
    box-shadow: 0 20px 42px -12px rgba(0, 0, 0, 0.78), 0 0 26px rgba(212, 17, 21, 0.22);
    outline: none;
}

.sensei-card-featured .sensei-card-portrait-link {
    display: block;
    text-decoration: none;
    height: 320px;
    margin-bottom: 1.25rem;
    border-radius: 6px;
}

.sensei-card-featured:hover .sensei-card-portrait-img {
    transform: scale(1.04);
}

.sensei-card-featured .sensei-kanji-stamp {
    top: auto;
    bottom: 0.75rem;
    left: 0.75rem;
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
    z-index: 4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.sensei-card-featured .sensei-badge-row {
    margin-bottom: 0.55rem;
}

.sensei-card-title-link,
.branch-card-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sensei-card-title-link:hover,
.branch-card-title-link:hover {
    color: var(--flame-red);
}

.sensei-role-line {
    margin: 0 0 0.45rem;
    color: #f42c1d;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}

.branch-card-media,
.branch-card-media-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.sensei-card-portrait-wrap picture,
.martial-card-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.branch-card-media-link-unused {
    display: block;
    text-decoration: none;
    color: inherit;
}

.branch-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.branch-cta-row .branch-footer-note {
    margin-top: 0;
    flex: 1 1 320px;
}

.martial-card[data-gallery-item] {
    cursor: pointer;
}

.martial-sensei-kicker {
    margin: 0 0 0.35rem !important;
    font-size: 0.68rem !important;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--flame-red) !important;
}

.martial-img-naveen {
    object-position: center 35%;
}

.martial-img-manjunath {
    object-position: center 35%;
}

.martial-img-sadiq-action {
    object-fit: cover;
    object-position: center 65%;
}

.martial-img-manjunath-low {
    object-fit: cover;
    object-position: center 45%;
}

.martial-img-sensei-full {
    object-fit: contain;
    object-position: center center;
    background: radial-gradient(circle at 50% 45%, #1c1015 0%, #070709 85%);
}

[data-theme="light"] .sensei-card.sensei-card-featured {
    background: #FFFFFF;
    border-color: #E1DED8;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .sensei-card-title-link,
[data-theme="light"] .branch-card-title-link {
    color: #171719;
}

@media (max-width: 680px) {
    .home-martial-gallery {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    .sensei-card-featured .sensei-card-portrait-link {
        height: 290px;
    }
    .branch-cta-row {
        flex-direction: column;
        align-items: stretch;
    }
    .branch-cta-row .button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   KARATE 365 — Complete Light Theme Visual Refinement System
   Palette:
   - Main background (--obsidian): #F7F6F3
   - Primary surface (--surface): #FFFFFF
   - Secondary surface (--surface-alt / --black-cherry): #F0EEEA
   - Primary text (--text): #171719
   - Secondary text (--text-muted): #55545A
   - Muted labels (--warm-ash): #615F67
   - Brand red (--combat-red / --flame-red): #D41115
   - Dark-red hover (--combat-red-hover): #A90E12
   - Borders (--line): #E1DED8
   ========================================================================== */

/* 1. Accessibility Skip Link & Global Text Defaults */
[data-theme="light"] body {
    background-color: var(--obsidian);
    color: var(--text);
}

[data-theme="light"] .skip-link {
    background: #FFFFFF;
    color: #171719;
    border: 2px solid #D41115;
    box-shadow: var(--shadow-md);
}

/* 2. Header, Brand, Navigation, Dropdowns & Controls */
[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #E1DED8;
    box-shadow: 0 2px 12px rgba(23, 23, 25, 0.05);
}

[data-theme="light"] .brand-name,
[data-theme="light"] .brand-copy:hover .brand-name {
    color: #171719;
}

[data-theme="light"] .brand-tagline,
[data-theme="light"] .brand-association {
    color: #55545A;
}

[data-theme="light"] .primary-navigation > a:not(.nav-cta),
[data-theme="light"] .nav-dropdown-trigger {
    color: #171719;
    font-weight: 600;
}

[data-theme="light"] .primary-navigation > a:not(.nav-cta):hover,
[data-theme="light"] .primary-navigation > a:not(.nav-cta).is-active,
[data-theme="light"] .nav-dropdown-trigger:hover,
[data-theme="light"] .nav-dropdown-trigger.is-active,
[data-theme="light"] .nav-item-dropdown:hover .nav-dropdown-trigger,
[data-theme="light"] .nav-item-dropdown:focus-within .nav-dropdown-trigger {
    color: #D41115;
}

[data-theme="light"] .nav-cta {
    background: #D41115;
    border-color: #D41115;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(212, 17, 21, 0.22);
}

[data-theme="light"] .nav-cta:hover,
[data-theme="light"] .nav-cta:focus-visible {
    background: #A90E12;
    border-color: #A90E12;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(169, 14, 18, 0.3);
}

[data-theme="light"] .lang-switcher {
    background: #F0EEEA;
    border: 1px solid #E1DED8;
}

[data-theme="light"] .lang-btn {
    color: #55545A;
}

[data-theme="light"] .lang-btn:hover {
    color: #171719;
    background: #FFFFFF;
}

[data-theme="light"] .lang-btn.is-active,
[data-theme="light"] .lang-btn[aria-pressed="true"] {
    background: #D41115;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(212, 17, 21, 0.28);
}

[data-theme="light"] .theme-toggle {
    background: #F0EEEA;
    border: 1px solid #E1DED8;
    color: #171719;
}

[data-theme="light"] .theme-toggle:hover {
    background: #FFFFFF;
    border-color: #D41115;
    color: #D41115;
    box-shadow: 0 2px 8px rgba(212, 17, 21, 0.16);
}

/* 3. Buttons & Interactive CTAs */
[data-theme="light"] .button-primary {
    background: #D41115;
    border-color: #D41115;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(212, 17, 21, 0.22);
}

[data-theme="light"] .button-primary:hover,
[data-theme="light"] .button-primary:focus-visible {
    background: #A90E12;
    border-color: #A90E12;
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(169, 14, 18, 0.32);
}

[data-theme="light"] .button-outline {
    background: #FFFFFF;
    border: 1px solid #CFCBC3;
    color: #171719;
    box-shadow: 0 1px 3px rgba(23, 23, 25, 0.04);
}

[data-theme="light"] .button-outline:hover,
[data-theme="light"] .button-outline:focus-visible {
    background: #F0EEEA;
    border-color: #A90E12;
    color: #A90E12;
    box-shadow: 0 4px 12px rgba(23, 23, 25, 0.08);
}

[data-theme="light"] .button-whatsapp-pending {
    background: #F0EEEA;
    border: 1px dashed #CFCBC3;
    color: #55545A;
}

/* 4. Hero & Subpage Hero Refinement */


[data-theme="light"] .hero::before {
    background: linear-gradient(90deg, #F7F6F3 0%, rgba(247, 246, 243, 0.94) 46%, rgba(247, 246, 243, 0.25) 100%);
}

[data-theme="light"] .hero-vignette {
    background:
        radial-gradient(circle at 50% 50%, transparent 48%, rgba(247, 246, 243, 0.65) 85%, #F7F6F3 100%),
        linear-gradient(180deg, rgba(247, 246, 243, 0.72) 0%, transparent 20%, transparent 78%, #F7F6F3 100%);
}





[data-theme="light"] .hero-art-number {
    color: rgba(23, 23, 25, 0.045);
}

[data-theme="light"] .affiliation-org {
    color: #3B3A40;
}

[data-theme="light"] .hero-scroll,
[data-theme="light"] .hero-index {
    color: #55545A;
}

[data-theme="light"] .hero-title-white,
[data-theme="light"] .page-hero h1,
[data-theme="light"] .profile-title,
[data-theme="light"] #branch-name {
    color: #171719;
}

[data-theme="light"] .hero-lede,
[data-theme="light"] .page-hero-lede,
[data-theme="light"] .profile-designation {
    color: #55545A;
}

[data-theme="light"] .page-hero {
    background:
        radial-gradient(ellipse at 85% 35%, rgba(212, 17, 21, 0.06), transparent 48%),
        linear-gradient(115deg, #F7F6F3 0%, #FFFFFF 52%, #F0EEEA 100%);
    border-bottom: 1px solid #E1DED8;
}

[data-theme="light"] .page-hero::before {
    background: linear-gradient(90deg, #F7F6F3 0%, rgba(247, 246, 243, 0.94) 45%, rgba(247, 246, 243, 0.25) 100%);
}

[data-theme="light"] .page-hero-art-frame {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-md);
}

@media (max-width: 700px) {
    [data-theme="light"] .hero::before {
        background: linear-gradient(180deg, rgba(247, 246, 243, 0.45) 10%, rgba(247, 246, 243, 0.78) 45%, #F7F6F3 94%);
    }
}

/* 5. Section Hierarchy, Senseis, Dojo Branches & Martial Arts in Action */
[data-theme="light"] .values-band {
    background: #F0EEEA;
    color: #55545A;
    border-top: 1px solid #E1DED8;
    border-bottom: 1px solid #E1DED8;
}

[data-theme="light"] .values-band span {
    color: #171719;
}

[data-theme="light"] .affiliations-section {
    background: #FFFFFF;
    border-top: 1px solid #E1DED8;
    border-bottom: 1px solid #E1DED8;
}

[data-theme="light"] .affiliation-card {
    background: #F7F6F3;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .affiliation-card-primary {
    background: linear-gradient(160deg, #FFFFFF 0%, #FAF7F5 100%);
    border-color: rgba(212, 17, 21, 0.3);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .section-senseis {
    background: #F7F6F3;
}

[data-theme="light"] .sensei-avatar-frame {
    background: #F0EEEA;
}

[data-theme="light"] .sensei-role-line {
    color: #D41115;
}

[data-theme="light"] .section-branches {
    background: #F0EEEA;
    border-top: 1px solid #E1DED8;
    border-bottom: 1px solid #E1DED8;
}

[data-theme="light"] .branch-card {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .branch-card-header,
[data-theme="light"] .branch-card-actions {
    background: #F7F6F3;
    border-color: #E1DED8;
}

[data-theme="light"] .branch-card-media {
    background: #F0EEEA;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .branch-address-wrap {
    background: #F7F6F3;
    border-color: #E1DED8;
}

[data-theme="light"] .branch-address {
    color: #171719;
}

[data-theme="light"] .branch-footer-note {
    background: #FFFFFF;
    border-color: #E1DED8;
    color: #55545A;
}

[data-theme="light"] .section-practice {
    background: #F7F6F3;
}

[data-theme="light"] .martial-card {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .martial-card-media,
[data-theme="light"] .martial-card-media:has(.martial-img-sadiq) {
    background: #F0EEEA;
}

[data-theme="light"] .martial-img-sadiq,
[data-theme="light"] .martial-img-sensei-full {
    background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #EFECE6 88%);
}

[data-theme="light"] .martial-card-overlay,
[data-theme="light"] .martial-card-media:has(.martial-img-sadiq) .martial-card-overlay {
    background: linear-gradient(to top, rgba(23, 23, 25, 0.14) 0%, transparent 35%);
}

[data-theme="light"] .martial-num {
    color: #171719;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.15rem 0.48rem;
    border-radius: 4px;
    border: 1px solid rgba(23, 23, 25, 0.12);
    font-size: 0.82rem;
}

[data-theme="light"] .martial-link {
    color: #D41115;
}

[data-theme="light"] .martial-link:hover {
    color: #A90E12;
}

/* 6. Forms, Inputs, Selects & Feedback States */
[data-theme="light"] .form-control,
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background: #FFFFFF;
    border: 1px solid #CFCBC3;
    color: #171719;
    box-shadow: inset 0 1px 2px rgba(23, 23, 25, 0.03);
}

[data-theme="light"] .form-control::placeholder,
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder {
    color: #76747C;
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
    background: #FFFFFF;
    border-color: #D41115;
    box-shadow: 0 0 0 3px rgba(212, 17, 21, 0.14);
    color: #171719;
}

[data-theme="light"] select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23171719' stroke-width='1.75' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

[data-theme="light"] select.form-control option {
    background: #FFFFFF;
    color: #171719;
}

[data-theme="light"] .form-group label,
[data-theme="light"] .form-label {
    color: #171719;
}

[data-theme="light"] .admission-feedback-success {
    background: #F0FDF4;
    border-color: #86EFAC;
    color: #14532D;
}

[data-theme="light"] .admission-feedback-success strong {
    color: #14532D;
}

[data-theme="light"] .admission-feedback-error {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #7F1D1D;
}

[data-theme="light"] .admission-feedback-error strong {
    color: #991B1B;
}

/* 7. Sensei Legendary Profile Design System (public/sensei.php) */
[data-theme="light"] .legendary-profile-title {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #171719;
    color: #171719;
}

[data-theme="light"] .portrait-photo-stage.portrait-photo-stage-sadiq,
[data-theme="light"] .portrait-photo-stage.portrait-photo-stage-manjunath {
    background: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #F0EEEA 85%);
}

[data-theme="light"] .portrait-blend-mask.portrait-blend-mask-sadiq,
[data-theme="light"] .portrait-blend-mask.portrait-blend-mask-manjunath {
    background: linear-gradient(to bottom, transparent 86%, rgba(247, 246, 243, 0.4) 94%, #FFFFFF 100%);
}

[data-theme="light"] .profile-subnav {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #E1DED8;
    border-bottom: 1px solid #E1DED8;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .subnav-link {
    background: #F7F6F3;
    border: 1px solid #E1DED8;
    color: #55545A;
}

[data-theme="light"] .subnav-link:hover,
[data-theme="light"] .subnav-link:focus-visible {
    background: rgba(212, 17, 21, 0.08);
    border-color: rgba(212, 17, 21, 0.35);
    color: #D41115;
}

[data-theme="light"] .profile-stats-section {
    background: linear-gradient(180deg, #F0EEEA 0%, #F7F6F3 100%);
    border-bottom: 1px solid #E1DED8;
}

[data-theme="light"] .stat-card-gold {
    background: radial-gradient(circle at 50% 0%, rgba(217, 119, 6, 0.08) 0%, #FFFFFF 75%);
    border: 1px solid rgba(180, 83, 9, 0.25);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .stat-card-gold:hover {
    border-color: rgba(180, 83, 9, 0.45);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .stat-number {
    background: linear-gradient(180deg, #92400E 0%, #B45309 55%, #78350F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .stat-label {
    color: #171719;
}

[data-theme="light"] .stat-scope {
    color: #B45309;
}

[data-theme="light"] .stat-desc {
    color: #55545A;
}

[data-theme="light"] .archive-disclosure-box {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    border-left: 3px solid #D97706;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .archive-disclosure-box p {
    color: #55545A;
}

[data-theme="light"] .archive-disclosure-box strong {
    color: #92400E;
}

[data-theme="light"] .qualification-card {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .qualification-card:hover {
    border-color: rgba(212, 17, 21, 0.4);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .qual-discipline-badge {
    color: #D41115;
    background: rgba(212, 17, 21, 0.08);
    border-color: rgba(212, 17, 21, 0.25);
}

[data-theme="light"] .qual-rank-display h3 {
    color: #171719;
}

[data-theme="light"] .qual-org {
    color: #3B3A40;
}

[data-theme="light"] .qual-meta-row {
    border-top-color: #E1DED8;
    border-bottom-color: #E1DED8;
}

[data-theme="light"] .qual-meta-label {
    color: #615F67;
}

[data-theme="light"] .qual-meta-val {
    color: #B45309;
}

[data-theme="light"] .qual-notes {
    color: #55545A;
}

[data-theme="light"] .technical-authority-banner {
    background: linear-gradient(90deg, rgba(212, 17, 21, 0.06) 0%, #FFFFFF 100%);
    border: 1px solid rgba(212, 17, 21, 0.28);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .auth-seal {
    background: rgba(212, 17, 21, 0.1);
    border-color: rgba(212, 17, 21, 0.3);
    color: #D41115;
}

[data-theme="light"] .auth-kicker {
    color: #B45309;
}

[data-theme="light"] .auth-body-col h3 {
    color: #171719;
}

[data-theme="light"] .auth-body-col p {
    color: #55545A;
}

[data-theme="light"] .legacy-card {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .legacy-card:hover {
    border-color: rgba(180, 83, 9, 0.45);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .legacy-card-media {
    background: #F0EEEA;
    border-bottom: 1px solid #E1DED8;
}

[data-theme="light"] .legacy-card-content h3 {
    color: #171719;
}

[data-theme="light"] .legacy-card-org {
    color: #B45309;
}

[data-theme="light"] .legacy-card-desc {
    color: #55545A;
}

[data-theme="light"] .legacy-verification-note {
    background: #F7F6F3;
    border-left-color: #16A34A;
    color: #3B3A40;
}

[data-theme="light"] .profile-vault-section {
    background: #F0EEEA;
    border-top: 1px solid #E1DED8;
    border-bottom: 1px solid #E1DED8;
}

[data-theme="light"] .vault-item-card {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .vault-item-card:hover,
[data-theme="light"] .vault-item-card:focus-visible {
    border-color: #D41115;
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .vault-media-frame {
    background: #F7F6F3;
    border-bottom: 1px solid #E1DED8;
}

[data-theme="light"] .vault-category-pill {
    background: rgba(255, 255, 255, 0.94);
    color: #171719;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .vault-caption h4 {
    color: #171719;
}

[data-theme="light"] .vault-caption p {
    color: #55545A;
}

[data-theme="light"] .leadership-role-card {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .leadership-role-card:hover {
    border-color: rgba(212, 17, 21, 0.38);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .role-title {
    color: #171719;
}

[data-theme="light"] .role-org {
    color: #B45309;
}

[data-theme="light"] .role-scope {
    color: #55545A;
}

[data-theme="light"] .teaching-philosophy-card {
    background: linear-gradient(135deg, #FFF9F8 0%, #FFFFFF 100%);
    border: 1px solid rgba(212, 17, 21, 0.25);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .philosophy-kanji {
    color: rgba(212, 17, 21, 0.22);
}

[data-theme="light"] .philosophy-content h3 {
    color: #171719;
}

[data-theme="light"] .philosophy-content p {
    color: #55545A;
}

[data-theme="light"] .timeline-track::before {
    background: linear-gradient(180deg, #D41115 0%, rgba(217, 119, 6, 0.45) 50%, rgba(23, 23, 25, 0.12) 100%);
}

[data-theme="light"] .marker-dot {
    background: #D41115;
    border-color: #F7F6F3;
}

[data-theme="light"] .marker-year {
    color: #171719;
}

[data-theme="light"] .timeline-content-card {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .timeline-content-card:hover {
    border-color: rgba(180, 83, 9, 0.4);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .timeline-cat-pill {
    color: #B45309;
    background: rgba(217, 119, 6, 0.1);
    border-color: rgba(217, 119, 6, 0.28);
}

[data-theme="light"] .timeline-title {
    color: #171719;
}

[data-theme="light"] .timeline-desc {
    color: #55545A;
}

[data-theme="light"] .tech-media-frame {
    background: #F0EEEA;
}

/* 8. About Pages, Senseis & Branches Directory, and Branch Detail Pages */
[data-theme="light"] .values-grid {
    background: #E1DED8;
    border-color: #E1DED8;
}

[data-theme="light"] .value-item {
    background: #FFFFFF;
    color: #171719;
}

[data-theme="light"] .value-item:hover {
    background: #FAF9F6;
}

[data-theme="light"] .value-item h3 {
    color: #171719;
}

[data-theme="light"] .leadership-notice {
    background: #FFFFFF;
    border-color: #E1DED8;
    border-left: 3px solid #D41115;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .section-about-cta {
    background: linear-gradient(180deg, #F0EEEA 0%, #F7F6F3 100%);
}

[data-theme="light"] .about-cta-panel {
    background:
        radial-gradient(ellipse at 10% 90%, rgba(212, 17, 21, 0.06), transparent 45%),
        #FFFFFF;
    border: 1px solid rgba(212, 17, 21, 0.28);
    box-shadow: var(--shadow-lg);
    color: #171719;
}

[data-theme="light"] .about-cta-content h2 {
    color: #171719;
}

[data-theme="light"] .about-cta-content p {
    color: #55545A;
}

[data-theme="light"] .cta-branch-pill {
    background: #F0EEEA;
    border-color: #E1DED8;
    color: #3B3A40;
}

[data-theme="light"] .about-cta-aside {
    background: #F7F6F3;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-sm);
    color: #171719;
}

[data-theme="light"] .aside-wordmark,
[data-theme="light"] .aside-sensei-name {
    color: #171719;
}

[data-theme="light"] .aside-phone-row {
    background: #FFFFFF;
    border-color: #E1DED8;
    color: #171719;
}

[data-theme="light"] .aside-phone-row:hover {
    background: #D41115;
    border-color: #D41115;
    color: #FFFFFF;
}

[data-theme="light"] .aside-phone-row:hover .aside-sensei-name,
[data-theme="light"] .aside-phone-row:hover .aside-sensei-num {
    color: #FFFFFF;
}

[data-theme="light"] .branch-detail-card {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-md);
    color: #171719;
}

[data-theme="light"] .branch-detail-card:hover {
    border-color: rgba(212, 17, 21, 0.45);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .branch-detail-body h3 {
    color: #171719;
}

[data-theme="light"] .branch-address-box {
    background: #F7F6F3;
    border: 1px solid #E1DED8;
}

[data-theme="light"] .address-text p {
    color: #171719;
}

[data-theme="light"] .b-tag {
    background: #F0EEEA;
    border-color: #E1DED8;
    color: #55545A;
}

[data-theme="light"] .branch-action-link {
    background: #F7F6F3;
    border-color: #E1DED8;
    color: #171719;
}

[data-theme="light"] .branch-action-link:hover {
    background: #D41115;
    border-color: #D41115;
    color: #FFFFFF;
}

[data-theme="light"] .branch-hero-address-card {
    background: #FFFFFF;
    border-color: #E1DED8;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .branch-hero-address-card .address-full {
    color: #171719;
}

[data-theme="light"] .branch-stage-card {
    background: #FFFFFF;
    border-color: #E1DED8;
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .branch-card-visual-top {
    background: radial-gradient(circle at center, rgba(212, 17, 21, 0.08), #F0EEEA 75%);
    border-bottom-color: #E1DED8;
}

[data-theme="light"] .branch-large-num {
    color: rgba(23, 23, 25, 0.06);
}

[data-theme="light"] .branch-photo-fallback .fallback-title {
    color: #171719;
}

[data-theme="light"] .branch-stage-meta .meta-row {
    border-bottom-color: #E1DED8;
}

[data-theme="light"] .branch-stage-meta .meta-value {
    color: #171719;
}

[data-theme="light"] .node-icon-crest,
[data-theme="light"] .node-icon-crest.node-crest-karate {
    background: #F7F6F3;
    border-color: rgba(212, 17, 21, 0.25);
}

[data-theme="light"] .ssdka-seal-badge,
[data-theme="light"] .ma365-budo-badge,
[data-theme="light"] .karate365-dojo-badge {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(212, 17, 21, 0.28);
    box-shadow: var(--shadow-md);
    color: #171719;
}

/* 9. Gallery, Circulars, News, Policies & Lightbox Modal */
[data-theme="light"] .gallery-integrity-notice {
    background: #FFFFFF;
    border-color: #E1DED8;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .gallery-integrity-notice strong {
    color: #171719;
}

[data-theme="light"] .video-showcase-panel {
    background: #FFFFFF;
    border-color: #E1DED8;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .gallery-tile-art {
    background: #F0EEEA;
}

[data-theme="light"] .tile-footer-meta {
    border-top-color: #E1DED8;
}

[data-theme="light"] .tile-sensei-link:hover,
[data-theme="light"] .tile-sensei-link:focus-visible {
    color: #A90E12;
}

[data-theme="light"] .gallery-pill {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    color: #171719;
    text-decoration: none;
    transition: all 0.2s ease;
}

[data-theme="light"] .gallery-pill:hover {
    border-color: #D41115;
    color: #D41115;
    background: rgba(212, 17, 21, 0.05);
}

[data-theme="light"] .gallery-pill.is-active {
    background: #D41115;
    border-color: #D41115;
    color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(212, 17, 21, 0.28);
}

[data-theme="light"] .lightbox-backdrop {
    background: rgba(23, 23, 25, 0.84);
}

[data-theme="light"] .lightbox-stage {
    background: #FFFFFF;
    border-color: #E1DED8;
    box-shadow: 0 24px 60px rgba(23, 23, 25, 0.28);
}

[data-theme="light"] .lightbox-image {
    background: #F7F6F3;
}

[data-theme="light"] .lightbox-meta {
    background: #FFFFFF;
    border-top-color: #E1DED8;
}

[data-theme="light"] .lightbox-nav-btn {
    background: #FFFFFF;
    border-color: #E1DED8;
    color: #171719;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .lightbox-nav-btn:hover {
    background: #D41115;
    border-color: #D41115;
    color: #FFFFFF;
}

[data-theme="light"] .faq-question,
[data-theme="light"] .faq-question span:first-child {
    color: #171719;
}

[data-theme="light"] .quicknav-link {
    color: #55545A;
}

[data-theme="light"] .quicknav-link:hover {
    background: #F0EEEA;
    color: #D41115;
}

[data-theme="light"] .association-callout-panel {
    background: #FFFFFF;
    border: 1px solid #E1DED8;
    box-shadow: var(--shadow-md);
    color: #171719;
}

[data-theme="light"] .association-callout-panel h2 {
    color: #171719;
}

[data-theme="light"] .branch-pill-link {
    background: #F0EEEA;
    border-color: #E1DED8;
    color: #3B3A40;
}

[data-theme="light"] .status-pill-published {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.35);
    color: #14532D;
}

[data-theme="light"] .status-pill-urgent {
    background: rgba(212, 17, 21, 0.12);
    border-color: #D41115;
    color: #991B1B;
}

/* 10. Footer Refinement */
[data-theme="light"] .site-footer {
    background: #F0EEEA;
    color: #55545A;
    border-top: 1px solid #E1DED8;
}

[data-theme="light"] .footer-wordmark,
[data-theme="light"] .footer-col-title,
[data-theme="light"] .footer-phone-link .f-sensei-name {
    color: #171719;
}

[data-theme="light"] .footer-links-list a {
    color: #55545A;
}

[data-theme="light"] .footer-links-list a:hover {
    color: #D41115;
}










/* ==========================================================================
   Light Mode: Elegant Warm White & Light Smoky-Grey Martial Hero Atmosphere
   ========================================================================== */
[data-theme="light"] .hero {
    /* Soft crimson ambient illumination + subtle charcoal shading + warm white/light smoky-grey gradient */
    background:
        radial-gradient(ellipse 65% 55% at 75% 50%, rgba(212, 17, 21, 0.16) 0%, rgba(212, 17, 21, 0.04) 46%, transparent 70%),
        radial-gradient(ellipse 55% 58% at 75% 50%, rgba(35, 32, 38, 0.18) 0%, rgba(55, 50, 58, 0.08) 45%, transparent 72%),
        linear-gradient(105deg, #FAFAF8 0%, #F5F3EF 45%, #EBE7E1 78%, #E4DFD8 100%);
    border-bottom: 1px solid #D8D4CC;
}

[data-theme="light"] .hero::before {
    display: none;
}

[data-theme="light"] .hero-vignette {
    display: none;
}

[data-theme="light"] .hero-art {
    background: transparent;
}

[data-theme="light"] .hero h1,
[data-theme="light"] .hero-title-white {
    color: #151417;
}

[data-theme="light"] .hero-lede {
    color: #48454D;
}

[data-theme="light"] .hero-eyebrow {
    color: #5C5862;
}

[data-theme="light"] .hero-affiliation {
    color: #6E6975;
}

[data-theme="light"] .hero-affiliation strong,
[data-theme="light"] .hero-affiliation .affiliation-name {
    color: #1A191D;
}

[data-theme="light"] .hero .button-outline {
    background: #FFFFFF;
    border: 1px solid #C4BFB6;
    color: #151417;
    box-shadow: 0 1px 3px rgba(21, 20, 23, 0.08);
}

[data-theme="light"] .hero .button-outline:hover {
    background: #F0ECE5;
    border-color: #D41115;
    color: #D41115;
}

[data-theme="light"] .hero-art-number {
    color: rgba(21, 20, 23, 0.05);
}

[data-theme="light"] .hero-vertical-mantra {
    color: rgba(60, 55, 65, 0.45);
}

[data-theme="light"] .hero-scroll,
[data-theme="light"] .hero-index {
    color: #5C5862;
}

[data-theme="light"] .hero-stage-shadows {
    background:
        radial-gradient(ellipse 68% 62% at 50% 48%, rgba(20, 16, 22, 0.28) 0%, rgba(32, 24, 30, 0.14) 45%, rgba(65, 45, 52, 0.04) 68%, transparent 84%),
        radial-gradient(ellipse 60% 50% at 50% 48%, rgba(212, 17, 21, 0.14) 0%, transparent 65%);
}

[data-theme="light"] .hero-floor-sheen {
    background: radial-gradient(ellipse 65% 70% at 50% 95%, rgba(212, 17, 21, 0.22) 0%, transparent 72%);
}

@media (max-width: 1024px) {
    [data-theme="light"] .hero {
        background:
            radial-gradient(ellipse 70% 50% at 50% 75%, rgba(212, 17, 21, 0.14) 0%, transparent 60%),
            linear-gradient(180deg, #FAFAF8 0%, #F5F3EF 50%, #ECE8E2 100%);
    }
}
/* ==========================================================================
   Hero Content Staggered Entrance Animations
   ========================================================================== */
@keyframes heroFadeRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.hero-copy > .eyebrow,
.hero-copy > .hero-eyebrow {
    animation: heroFadeRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero-copy > .hero-title {
    animation: heroFadeRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
.hero-copy > .hero-lede {
    animation: heroFadeRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}
.hero-copy > .hero-actions {
    animation: heroFadeRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.48s both;
}
.hero-copy > .hero-whatsapp-slot,
.hero-copy > .hero-affiliation {
    animation: heroFadeRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}