/* ==========================================================================
   RoboYuwa NGO - Professional Stylesheet
   Brand Colors: Red (#CC0000), Black (#1A1A1A), White (#FFFFFF)
   ========================================================================== */

:root {
    /* -------------------------------------------------------------
       RoboYuwa Logo Core Identity
       ------------------------------------------------------------- */
    --ry-crimson: #E52525;
    --ry-crimson-dark: #A31010;
    --ry-crimson-glow: #FF3B30;
    --ry-crimson-gradient: linear-gradient(135deg, #FF2E2E 0%, #B31414 100%);
    --ry-crimson-shadow: 0 10px 28px rgba(229, 37, 37, 0.38);

    /* -------------------------------------------------------------
       Industrial Dark & Surface Hierarchy
       ------------------------------------------------------------- */
    --ry-dark-bg: #08090C;
    --ry-dark-surface: #12141A;
    --ry-dark-surface-glass: rgba(18, 20, 26, 0.92);
    --ry-dark-border: #222631;

    /* -------------------------------------------------------------
       Circuit Amber Accent
       ------------------------------------------------------------- */
    --ry-amber: #E59819;
    --ry-amber-hover: #F5A623;
    --ry-amber-dark: #CB8412;
    --ry-amber-gradient: linear-gradient(135deg, #F5A623 0%, #CB8412 100%);
    --ry-amber-shadow: 0 8px 24px rgba(229, 152, 25, 0.38);

    /* -------------------------------------------------------------
       Mission Impact Sage
       ------------------------------------------------------------- */
    --ry-sage: #376856;
    --ry-sage-dark: #274E40;

    /* -------------------------------------------------------------
       Canvas Light & Typography
       ------------------------------------------------------------- */
    --ry-white: #FFFFFF;
    --ry-platinum: #F6F8FA;
    --ry-gray-100: #F1F3F7;
    --ry-gray-600: #4B5262;
    --ry-gray-900: #101217;

    /* -------------------------------------------------------------
       Semantic Aliases
       ------------------------------------------------------------- */
    --primary-color: var(--ry-crimson);
    --primary-dark: var(--ry-crimson-dark);
    --primary-gradient: var(--ry-crimson-gradient);
    --amber-500: var(--ry-amber);
    --amber-600: var(--ry-amber-dark);
    --amber-gradient: var(--ry-amber-gradient);
    --sage-card: var(--ry-sage);
    --sage-dark: var(--ry-sage-dark);
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --text-main: var(--ry-gray-900);
    --text-light: var(--ry-gray-600);
    --gray-100: var(--ry-platinum);
    --gray-300: #D3D8E2;
    --gray-700: #2A2E39;
    --bg-light: #FFFFFF;
    --bg-dark: var(--ry-dark-bg);
    --white: #FFFFFF;
    --black: #08090C;
    --border-color: var(--ry-crimson);
    --transition: all 0.3s ease;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.25);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.55;
    color: var(--text-main);
}

body {
    background-color: var(--white);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

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

/* Typography */
h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.15;
    color: var(--black);
    margin-bottom: 1rem;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: -1px;
}

h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    letter-spacing: -0.5px;
}

h3 {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

p {
    margin-bottom: 1rem;
    color: var(--text-light);
    font-size: 1.02rem;
}

strong {
    color: var(--primary-color);
    font-weight: 600;
}

/* Layout & Utilities */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-padding {
    position: relative;
    padding: 5rem 0;
}

.bg-light {
    background-color: var(--gray-100);
}

.bg-dark {
    background-color: var(--bg-dark);
    color: var(--white);
}

.bg-dark p {
    color: var(--white);
}

.bg-dark h2,
.bg-dark h3,
.bg-dark h4 {
    color: var(--white);
}

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

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mt-5 {
    margin-top: 3rem;
}

.section-title {
    margin-bottom: 3rem;
}

.section-title.white h2 {
    color: var(--white);
}

.divider {
    height: 4px;
    width: 60px;
    background-color: var(--primary-color);
    margin-top: 0.5rem;
}

.divider.center {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Section Pulse Divider (RoboYuwa Tech Seam / Circuit Trace Divider)
   Directly matching reference design: horizontal line with a 45° upward peak
   ========================================================================== */

.section-pulse-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    z-index: 8;
    --pulse-divider-color: #000000;
}

body.light-theme .section-pulse-divider,
.light-theme .section-pulse-divider {
    --pulse-divider-color: #000000;
}

body.dark-theme .section-pulse-divider {
    --pulse-divider-color: rgba(255, 255, 255, 0.35);
}

.section-pulse-divider.divider-top {
    bottom: auto;
    top: 0;
    transform: rotate(180deg);
}

/* Left Vertical Accent Notch Marker (Disabled/Hidden) */
.section-pulse-divider .pulse-marker {
    display: none !important;
}

.section-pulse-divider .pulse-line {
    height: 2px;
    background-color: var(--pulse-divider-color);
    margin-bottom: 1px;
    transition: background-color 0.3s ease;
}

.section-pulse-divider .pulse-left {
    flex: 0 0 72%;
}

.section-pulse-divider .pulse-peak-svg {
    flex: 0 0 38px;
    width: 38px;
    height: 20px;
    display: block;
    margin-bottom: 0;
    overflow: visible;
}

.section-pulse-divider .pulse-peak-svg polyline {
    stroke: var(--pulse-divider-color);
    stroke-width: 2.2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease;
}

.section-pulse-divider .pulse-right {
    flex: 1;
}

/* Optional Alternate Positioning (Left Side Peak) */
.section-pulse-divider.pulse-left-side .pulse-left {
    flex: 0 0 28%;
}

/* Crimson Accent Variant */
.section-pulse-divider.pulse-crimson {
    --pulse-divider-color: var(--ry-crimson, #E52525);
}

/* Subtle Variant */
.section-pulse-divider.pulse-subtle {
    --pulse-divider-color: rgba(16, 18, 23, 0.15);
}

@media (max-width: 768px) {
    .section-pulse-divider .pulse-left {
        flex: 0 0 68%;
    }

    .section-pulse-divider.pulse-left-side .pulse-left {
        flex: 0 0 32%;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.85rem 1.9rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    border: 2px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-primary {
    background: var(--primary-gradient);
    color: var(--white);
    box-shadow: 0 10px 28px rgba(209, 0, 0, 0.24);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #EC2A2A 0%, #8E0000 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 34px rgba(209, 0, 0, 0.34);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(3px);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--white);
    color: var(--white);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.btn-primary-outline {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-primary-outline:hover,
.btn-primary-outline:focus {
    background-color: var(--primary-color);
    color: var(--white);
}

/* ==========================================================================
   Header & Navbar (Reference Transparent Style with Frosted Sticky State)
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.top-bar {
    background-color: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.45rem 0;
    font-size: 0.85rem;
    transition: height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
}

.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-info {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

.top-info .info-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s ease;
}

.top-info .info-item:hover {
    color: var(--amber-500);
}

.top-info .info-item i {
    color: var(--amber-500);
    font-size: 0.92rem;
}

.top-socials {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.top-social-link {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    text-decoration: none;
}

.top-social-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.navbar {
    background-color: transparent;
    padding: 1rem 0;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.logo img,
.logo-img {
    height: 48px;
    width: 48px;
    object-fit: contain;
    border-radius: 50%;
    background: #FFFFFF;
    padding: 3px;
    border: 2px solid rgba(229, 152, 25, 0.7);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.logo:hover img,
.logo:hover .logo-img {
    transform: scale(1.08) rotate(4deg);
    border-color: var(--amber-500);
    box-shadow: 0 6px 20px rgba(229, 152, 25, 0.45);
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.08;
    letter-spacing: -0.3px;
}

.brand-tagline {
    font-size: 0.68rem;
    color: var(--amber-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.nav-links ul {
    display: flex;
    align-items: center;
    gap: 1.85rem;
}

@media (max-width: 1120px) and (min-width: 769px) {
    .nav-links ul {
        gap: 1.15rem;
    }

    .nav-links a.nav-item {
        font-size: 0.9rem;
    }
}

.nav-links a.nav-item {
    font-weight: 500;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
    padding-bottom: 0.2rem;
    transition: color 0.25s ease;
}

.nav-links a.nav-item:hover {
    color: var(--amber-500);
}

.nav-links a.nav-item.active {
    color: var(--amber-500);
    font-weight: 600;
}

.nav-links a.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--amber-500);
    transition: width 0.3s ease;
}

.nav-links a.nav-item:hover::after,
.nav-links a.nav-item.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-search-btn,
.theme-toggle-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
}

.nav-search-btn:hover,
.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

.btn-pill-amber {
    background: var(--amber-gradient);
    color: #ffffff !important;
    padding: 0.68rem 1.85rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    box-shadow: 0 4px 18px rgba(229, 152, 25, 0.35);
    transition: all 0.25s ease;
    letter-spacing: 0.2px;
    text-decoration: none;
    display: inline-block;
}

.btn-pill-amber:hover {
    background: linear-gradient(135deg, #f0a325 0%, #ba760d 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(229, 152, 25, 0.5);
}

.btn-pill-crimson {
    background: linear-gradient(135deg, #E52525 0%, #B71C1C 100%);
    color: #ffffff !important;
    padding: 0.68rem 1.85rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    box-shadow: 0 4px 18px rgba(229, 37, 37, 0.38);
    transition: all 0.25s ease;
    letter-spacing: 0.2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-pill-crimson:hover {
    background: linear-gradient(135deg, #F03838 0%, #991414 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(229, 37, 37, 0.55);
    color: #ffffff !important;
}

/* Scrolled state for Header */
.header.scrolled {
    background-color: rgba(12, 12, 14, 0.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header.scrolled .top-bar {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    border: none;
}

.header.scrolled .navbar {
    padding: 0.65rem 0;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    position: relative;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--white);
    left: 0;
    transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}

.hamburger::before {
    top: -6px;
}

.hamburger::after {
    bottom: -6px;
}

.mobile-toggle.active .hamburger {
    background: transparent;
}

.mobile-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-toggle.active .hamburger::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* ==========================================================================
   Hero Section (Reference Layout & Multi-Slide Structure)
   ========================================================================== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--white);
    overflow: hidden;
    background-color: #0b0c10;
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 1.1s ease;
    z-index: 1;
    will-change: opacity;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Slide-out: outgoing slide fades down slightly */
.hero-slide.exiting {
    opacity: 0;
    z-index: 1;
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-bg img {
    position: absolute;
    top: 0;
    left: clamp(25px, 6vw, 90px);
    width: 100%;
    height: 110%;
    top: -5%;
    object-fit: cover;
    object-position: 86% center;
    opacity: 0.88;
    filter: brightness(0.85);
    transform: scale(1.08);
    transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 1.2s ease,
                filter 1.2s ease;
    will-change: transform;
}

.hero-slide.active .hero-bg img {
    transform: scale(1.01);
    filter: brightness(0.92);
}

/* Hero Progress Bar */
.hero-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--ry-crimson) 0%, var(--ry-amber) 100%);
    z-index: 20;
    border-radius: 0 2px 2px 0;
    transition: width 0.1s linear;
    box-shadow: 0 0 12px rgba(229, 37, 37, 0.7);
}

.hero-progress-bar.animating {
    transition: width 6.5s linear;
    width: 100%;
}

/* Slide Dot Indicators */
.hero-dot-nav {
    position: absolute;
    bottom: 2.4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.6rem;
    z-index: 20;
    align-items: center;
}

.hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-dot.active {
    width: 28px;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.hero-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.65);
    transform: scale(1.2);
}

.hero-bg .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(6, 7, 10, 0.98) 0%,
            rgba(6, 7, 10, 0.96) 24%,
            rgba(6, 7, 10, 0.82) 38%,
            rgba(6, 7, 10, 0.42) 54%,
            rgba(6, 7, 10, 0.12) 72%,
            rgba(6, 7, 10, 0.05) 100%),
        linear-gradient(180deg,
            rgba(6, 7, 10, 0.45) 0%,
            transparent 25%,
            transparent 75%,
            rgba(6, 7, 10, 0.75) 100%);
}

.hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 clamp(2rem, 7vw, 7.5rem);
}

.hero-content {
    position: relative;
    max-width: 700px;
    margin-left: 0;
    padding-top: 60px;
}

/* Hero Cyber Tech Grid */
.hero-cyber-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background-size: 50px 50px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, #000 30%, transparent 85%);
}

.hero-cyber-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: 200px 200px;
    background-image:
        linear-gradient(to right, rgba(229, 152, 25, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(229, 152, 25, 0.08) 1px, transparent 1px);
}

.hero-cyber-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 65% 50%, rgba(229, 152, 25, 0.06) 0%, transparent 60%);
    animation: gridGlowPulse 6s ease-in-out infinite alternate;
}

@keyframes gridGlowPulse {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

/* Staggered Hero Text Choreography */
.hero-slide .hero-eyebrow,
.hero-slide .hero-title .title-line,
.hero-slide .hero-desc,
.hero-slide .hero-actions {
    opacity: 0;
    will-change: transform, opacity;
}

.hero-slide.active .hero-eyebrow {
    animation: heroEyebrowSlide 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.hero-slide.active .hero-title .title-line {
    animation: heroTitleSlide 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

.hero-slide.active .hero-title br+.title-line {
    animation-delay: 0.38s;
}

.hero-slide.active .hero-desc {
    animation: heroDescSlide 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.hero-slide.active .hero-actions {
    animation: heroActionsSlide 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

@keyframes heroEyebrowSlide {
    0% {
        opacity: 0;
        transform: translateY(-16px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes heroTitleSlide {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(0.98);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroDescSlide {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroActionsSlide {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 1rem;
    background: rgba(229, 152, 25, 0.12);
    border: 1px solid rgba(229, 152, 25, 0.4);
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--amber-500);
    margin-bottom: 1.1rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--amber-500);
    box-shadow: 0 0 10px var(--amber-500);
    animation: badgePulse 2s infinite ease-in-out;
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.45;
    }
}

@keyframes heroTextIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.font-serif {
    font-family: var(--font-serif);
}

.font-serif-italic {
    font-family: var(--font-serif);
    font-style: italic;
}

.hero-eyebrow {
    display: block;
    font-size: clamp(1.4rem, 2.7vw, 2.2rem);
    color: var(--amber-500);
    font-weight: 400;
    margin-bottom: 0.6rem;
    letter-spacing: 0.4px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.hero-title {
    font-size: clamp(2.3rem, 4.6vw, 4.3rem);
    font-weight: 700;
    line-height: 1.1;
    color: #FFFFFF;
    letter-spacing: -0.5px;
    margin-bottom: 1.25rem;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
}

.title-line {
    display: inline-block;
    white-space: nowrap;
}

.hero-desc {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
    max-width: 580px;
    margin-bottom: 2.2rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

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

.btn-hero-pill {
    background: var(--ry-crimson-gradient);
    color: #ffffff !important;
    padding: 0.95rem 2.4rem;
    border-radius: 9999px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(229, 37, 37, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.3px;
}

.btn-hero-pill:hover {
    background: linear-gradient(135deg, #FF3838 0%, #990B0B 100%);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(229, 37, 37, 0.55);
}

.btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.92rem 2.2rem;
    border-radius: 9999px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #ffffff;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-ghost i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.btn-hero-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.75);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 255, 255, 0.12);
}

.btn-hero-ghost:hover i {
    transform: translateX(4px);
}


.hero-video-btn {
    background: none;
    border: none;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    transition: opacity 0.25s ease;
}

.hero-video-btn:hover .play-icon-circle {
    transform: scale(1.1);
    border-color: var(--ry-amber);
    background: rgba(229, 152, 25, 0.2);
    box-shadow: 0 0 20px rgba(229, 152, 25, 0.45);
}

.hero-video-btn:hover .video-btn-text {
    color: var(--ry-amber);
}

.play-icon-circle {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.08);
}

.play-icon-circle::before,
.play-icon-circle::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(229, 152, 25, 0.7);
    pointer-events: none;
    animation: playRadarPulse 2.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.play-icon-circle::after {
    animation-delay: 1.4s;
    border-color: rgba(229, 37, 37, 0.5);
}

@keyframes playRadarPulse {
    0% {
        transform: scale(0.85);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.85);
        opacity: 0;
    }
}

.video-btn-text {
    transition: color 0.25s ease;
}

/* ==========================================================================
   Mid-Right Slider Navigation (Circular Outline Arrows)
   ========================================================================== */
.hero-slider-nav {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.slider-arrow {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    background: rgba(8, 9, 12, 0.4);
    backdrop-filter: blur(6px);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-arrow:hover {
    border-color: var(--ry-crimson);
    background: var(--ry-crimson);
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(229, 37, 37, 0.45);
}

/* ==========================================================================
   Bottom-Right Floating Impact Card (Reference Sage Green)
   ========================================================================== */
.hero-impact-card {
    position: absolute;
    bottom: 48px;
    right: 0;
    z-index: 10;
    background-color: var(--sage-card);
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.4rem 2.8rem 1.4rem 2rem;
    border-top-left-radius: 32px;
    box-shadow: -8px -8px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease, background-color 0.3s ease;
    animation: impactCardFloat 4.5s ease-in-out infinite alternate;
}

@keyframes impactCardFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-9px);
    }
}

.hero-impact-card:hover {
    background-color: var(--sage-dark);
    transform: translateY(-3px);
}

.impact-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.impact-gift-svg {
    width: 44px;
    height: 44px;
}

.impact-card-details {
    display: flex;
    flex-direction: column;
}

.impact-card-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.impact-card-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -0.5px;
}

/* ==========================================================================
   Hero Section Bottom Floating Infinite Marquee (RoboYuwa Context)
   ========================================================================== */
.hero-marquee {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    background: rgba(8, 9, 12, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.8rem 0;
    overflow: hidden;
}

.hero-marquee .marquee-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    user-select: none;
}

.hero-marquee .marquee-wrapper::before,
.hero-marquee .marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: clamp(35px, 6vw, 90px);
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.hero-marquee .marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(8, 9, 12, 0.95) 0%, transparent 100%);
}

.hero-marquee .marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(8, 9, 12, 0.95) 0%, transparent 100%);
}

.hero-marquee .marquee-track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    animation: heroMarqueeScroll 32s linear infinite;
    gap: 1.8rem;
    padding-right: 1.8rem;
    will-change: transform;
}

.hero-marquee .marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

.hero-marquee .marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.25s ease;
    cursor: default;
}

.hero-marquee .marquee-item:hover {
    color: var(--amber-500);
}

.hero-marquee .marquee-icon {
    font-size: 1.05rem;
    color: var(--amber-500);
    transition: color 0.25s ease, transform 0.25s ease;
}

.hero-marquee .marquee-item:hover .marquee-icon {
    color: var(--ry-crimson);
    transform: scale(1.2);
}

.hero-marquee .marquee-dot {
    display: inline-block;
    color: var(--ry-crimson);
    font-size: 0.95rem;
    user-select: none;
    line-height: 1;
}

@keyframes heroMarqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* ==========================================================================
   Modals (Video Showcase & Quick Search)
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 8, 0.82);
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 1.5rem;
}

.modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 880px;
    background: #000000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.modal-close {
    position: absolute;
    top: -45px;
    right: 0;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
    color: var(--amber-500);
    transform: scale(1.15);
}

.search-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: #141519;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 2.2rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
}

.search-modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 0.9rem;
    margin-bottom: 1.4rem;
}

.search-modal-header .search-icon {
    font-size: 1.35rem;
    color: var(--amber-500);
}

.search-modal-header input {
    width: 100%;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    outline: none;
    font-family: inherit;
}

.search-modal-header input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-quick-tags {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.search-tag {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.2s ease;
}

.search-tag:hover {
    background: var(--amber-500);
    color: #ffffff;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Landing Page: About Showcase Section (4-Photo Collage + Stats Ribbon Reference)
   ========================================================================== */

.about-showcase-section {
    position: relative;
    width: 100%;
    padding: clamp(5rem, 8.5vh, 7rem) 0;
    background: #FFFFFF;
    overflow: hidden;
}

.about-showcase-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* -------------------------------------------------------------
   Top Row: Main Grid (Left 4-Photo Collage, Right Content & Features)
   ------------------------------------------------------------- */
.about-showcase-main {
    display: grid;
    grid-template-columns: 1.02fr 1.08fr;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5.5rem);
}

/* -------------------------------------------------------------
   Left Column: 4-Photo Asymmetric Collage Grid
   ------------------------------------------------------------- */
.about-collage-col {
    position: relative;
    width: 100%;
}

.about-collage-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.28fr;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    max-width: 585px;
    margin: 0 auto;
}

.collage-subcol {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.collage-card {
    position: relative;
    clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 36px);
    border-radius: 0 18px 18px 18px;
    overflow: hidden;
    background: #12141A;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.08));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.collage-card:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.14));
}

.collage-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 36px);
    border-radius: 0 18px 18px 18px;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.collage-card:hover img {
    transform: scale(1.06);
}

/* Specific heights matching the reference image asymmetry */
.card-top-left {
    height: 265px;
}

.card-top-left img {
    object-position: center 20%;
}

.card-bottom-left {
    height: 195px;
}

.card-bottom-left img {
    object-position: center 25%;
}

.card-top-right {
    height: 210px;
}

.card-top-right img {
    object-position: center 30%;
}

.card-bottom-right {
    height: 250px;
}

.card-bottom-right img {
    object-position: center 25%;
}

/* -------------------------------------------------------------
   Right Column: Headline, Narrative Copy, Dual Features, & CTA
   ------------------------------------------------------------- */
.about-narrative-col {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Bold Headline (Matching Hero Section Playfair Display Serif Typography) */
.about-showcase-title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 3.2vw, 3.15rem);
    line-height: 1.18;
    font-weight: 700;
    color: #101217;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

/* Narrative Body */
.about-showcase-desc {
    font-size: clamp(0.98rem, 1.05vw, 1.06rem);
    line-height: 1.72;
    color: #525968;
    margin-bottom: 2rem;
    max-width: 580px;
}

.about-showcase-desc strong {
    color: #101217;
    font-weight: 700;
}

/* Dual Features Grid (Reference 2 Column side-by-side with line icons) */
.about-dual-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.85rem;
    margin-bottom: 2.25rem;
}

.dual-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.feature-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(229, 37, 37, 0.08);
    border: 1.5px solid rgba(229, 37, 37, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--ry-crimson);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.dual-feature-item:hover .feature-icon-box {
    background: var(--ry-crimson);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(229, 37, 37, 0.28);
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: #101217;
    margin-bottom: 0.35rem;
    letter-spacing: -0.2px;
}

.feature-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    color: #6D7586;
    margin-bottom: 0;
}

/* Rounded Pill Button with Arrow (Reference "Contact Us →") */
.about-showcase-action {
    display: flex;
    align-items: center;
}

.about-showcase-action .btn-ref-pill,
.btn-about-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.88rem 2.2rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #10141E 0%, #1D2433 100%) !important;
    box-shadow: 0 8px 22px rgba(16, 20, 30, 0.25);
    border: 1px solid transparent !important;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-showcase-action .btn-ref-pill span,
.btn-about-contact span {
    color: #FFFFFF !important;
}

.about-showcase-action .btn-ref-pill i,
.btn-about-contact i {
    font-size: 0.88rem;
    color: #FFFFFF !important;
    transition: transform 0.25s ease;
}

.about-showcase-action .btn-ref-pill:hover,
.btn-about-contact:hover {
    background: linear-gradient(135deg, #E52525 0%, #B81414 100%) !important;
    border-color: #E52525 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(229, 37, 37, 0.38);
}

.about-showcase-action .btn-ref-pill:hover span,
.btn-about-contact:hover span {
    color: #FFFFFF !important;
}

.about-showcase-action .btn-ref-pill:hover i,
.btn-about-contact:hover i {
    transform: translateX(4px);
    color: #FFFFFF !important;
}

/* -------------------------------------------------------------
   Bottom Row: Floating 4-Metric Stats Ribbon (Reference Light Card)
   ------------------------------------------------------------- */
.about-stats-ribbon {
    margin-top: clamp(3.2rem, 5.5vh, 4.8rem);
    background: #F6F8FA;
    border: 1px solid rgba(34, 38, 49, 0.08);
    border-radius: 20px;
    padding: clamp(1.8rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3.5rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.about-stats-ribbon:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.stat-ribbon-item {
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.25s ease;
}

.stat-ribbon-item:hover {
    transform: translateY(-2px);
}

.ribbon-icon {
    font-size: 1.85rem;
    color: #4A5A72;
    flex-shrink: 0;
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-ribbon-item:hover .ribbon-icon {
    color: var(--ry-crimson);
    transform: scale(1.12);
}

.ribbon-info {
    display: flex;
    flex-direction: column;
}

.ribbon-number {
    display: block;
    font-size: clamp(1.4rem, 1.85vw, 1.8rem);
    font-weight: 800;
    color: #101217;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.ribbon-label {
    display: block;
    font-size: 0.82rem;
    color: #6D7586;
    font-weight: 600;
    margin-top: 3px;
}

/* -------------------------------------------------------------
   Responsive Breakpoints
   ------------------------------------------------------------- */
@media (max-width: 991px) {
    .about-showcase-main {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .about-collage-grid {
        max-width: 520px;
    }

    .about-narrative-col {
        text-align: left;
    }

    .about-showcase-desc {
        max-width: 100%;
    }

    .about-stats-ribbon {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.5rem;
        padding: 2rem;
    }
}

@media (max-width: 600px) {
    .about-showcase-section {
        padding: 3.8rem 0;
    }

    .about-showcase-title {
        font-size: 1.85rem;
    }

    .about-collage-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .card-top-left {
        height: 185px;
    }

    .card-bottom-left {
        height: 145px;
    }

    .card-top-right {
        height: 155px;
    }

    .card-bottom-right {
        height: 175px;
    }

    .about-dual-features {
        grid-template-columns: 1fr;
        gap: 1.35rem;
    }

    .about-stats-ribbon {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        padding: 1.5rem;
    }

    .btn-ref-pill {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Who We Are / About Section — Full Viewport Split Screen (50/50 Sharp Edges)
   (Maintained for About Us page and subpages)
   ========================================================================== */

.about-split-screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 44% 56%;
    background: #FFFFFF;
    overflow: hidden;
}

@media (min-width: 992px) {
    .about-split-screen {
        height: 100vh;
        max-height: 100vh;
    }
}

/* -------------------------------------------------------------
   Left Column: Precision Framed Visual (Proportioned & Sharp)
   ------------------------------------------------------------- */
.about-split-media {
    position: relative;
    width: 100%;
    height: 100%;
    padding: clamp(1.6rem, 3.8vh, 3.2rem) clamp(1.6rem, 2.8vw, 2.8rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ry-dark-bg);
    border-right: 2px solid #14171E;
    box-sizing: border-box;
}

.about-media-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(229, 152, 25, 0.35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.about-media-inner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 0 !important;
    display: block;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-media-inner:hover img {
    transform: scale(1.035);
}

/* Sharp Technical Cyber Gradient Overlay */
.about-split-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(8, 9, 12, 0.48) 0%,
            transparent 35%,
            rgba(8, 9, 12, 0.25) 60%,
            rgba(8, 9, 12, 0.85) 100%),
        linear-gradient(90deg,
            transparent 65%,
            rgba(8, 9, 12, 0.55) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Sharp Technical Corner Brackets */
.sharp-hud-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--ry-amber);
    border-style: solid;
    pointer-events: none;
    z-index: 4;
}

.sharp-hud-corner.top-left {
    top: 16px;
    left: 16px;
    border-width: 2px 0 0 2px;
}

.sharp-hud-corner.top-right {
    top: 16px;
    right: 16px;
    border-width: 2px 2px 0 0;
}

.sharp-hud-corner.bottom-left {
    bottom: 16px;
    left: 16px;
    border-width: 0 0 2px 2px;
}

.sharp-hud-corner.bottom-right {
    bottom: 16px;
    right: 16px;
    border-width: 0 2px 2px 0;
}

/* Sharp Floating Top Tag */
.about-sharp-tag {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: rgba(8, 9, 12, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 152, 25, 0.45);
    border-left: 4px solid var(--ry-crimson);
    border-radius: 0 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.sharp-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: var(--ry-amber);
    box-shadow: 0 0 0 3px rgba(229, 152, 25, 0.35);
    animation: pulseGlowAmber 2.2s infinite;
}

.sharp-tag-text {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--white);
    text-transform: uppercase;
}

/* Sharp Floating Bottom Stat Banner */
.about-sharp-banner {
    position: absolute;
    bottom: 22px;
    left: 22px;
    right: 22px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 13px 18px;
    background: rgba(8, 9, 12, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--ry-amber);
    border-radius: 0 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
    color: var(--white);
}

.sharp-stat-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sharp-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 0 !important;
    background: rgba(229, 152, 25, 0.15);
    border: 1px solid rgba(229, 152, 25, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--ry-amber);
    flex-shrink: 0;
}

.sharp-stat-big {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--white);
    letter-spacing: -0.5px;
}

.sharp-stat-label {
    display: block;
    font-size: 0.75rem;
    color: #D3D8E2;
    font-weight: 500;
}

.sharp-stat-badge {
    padding: 6px 12px;
    border-radius: 0 !important;
    background: rgba(229, 37, 37, 0.18);
    border: 1px solid rgba(229, 37, 37, 0.4);
    color: #FF6666;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* -------------------------------------------------------------
   Right Column: 50% Content Frame (Fitted to 1 Screen Frame)
   ------------------------------------------------------------- */
.about-split-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 3.8vh, 3.8rem) clamp(2.5rem, 4.8vw, 5.2rem);
    background: #FFFFFF;
    overflow-y: auto;
}

/* Sharp Eyebrow */
.about-sharp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 0 !important;
    background: rgba(229, 152, 25, 0.09);
    border: 1px solid rgba(229, 152, 25, 0.3);
    border-left: 3px solid var(--ry-amber);
    color: var(--ry-amber-dark, #CB8412);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    margin-bottom: 0.75rem;
    width: fit-content;
    text-transform: uppercase;
}

.about-sharp-eyebrow i {
    font-size: 0.8rem;
    color: var(--ry-amber);
}

/* Headline */
.about-sharp-headline {
    font-size: clamp(1.6rem, 2.2vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--black);
    margin-bottom: 0.65rem;
    letter-spacing: -0.5px;
}

.text-gradient-crimson {
    background: linear-gradient(135deg, #E52525 0%, #A31010 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Accent Line */
.about-sharp-divider {
    width: 48px;
    height: 3px;
    border-radius: 0 !important;
    background: var(--primary-gradient);
    margin-bottom: 0.9rem;
}

/* Narrative Story */
.about-sharp-lead {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--ry-gray-900, #101217);
    font-weight: 500;
    margin-bottom: 0.55rem;
}

.about-sharp-body {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-light);
    margin-bottom: 1.15rem;
}

/* Mission & Vision Dual Cards in Single Screen Frame */
.about-sharp-mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    margin-bottom: 1.25rem;
}

.about-sharp-mv-card {
    background: var(--ry-platinum, #F6F8FA);
    border: 1px solid rgba(34, 38, 49, 0.1);
    border-radius: 0 !important;
    padding: 1.05rem 1.2rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.about-sharp-mv-card.mission {
    border-top: 3px solid var(--ry-crimson);
}

.about-sharp-mv-card.vision {
    border-top: 3px solid var(--ry-amber);
}

.about-sharp-mv-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.mv-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.5rem;
}

.mv-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.mv-icon-box.crimson {
    background: rgba(229, 37, 37, 0.12);
    color: var(--ry-crimson);
}

.mv-icon-box.amber {
    background: rgba(229, 152, 25, 0.14);
    color: var(--ry-amber);
}

.mv-card-header h4 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 0;
    letter-spacing: -0.2px;
}

.about-sharp-mv-card p {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-light);
    margin-bottom: 0;
}

/* Sharp Value Pillars */
.about-sharp-pillars {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.15rem;
}

.about-sharp-pillar {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    padding: 0.75rem 1rem;
    background: var(--ry-platinum, #F6F8FA);
    border: 1px solid rgba(34, 38, 49, 0.08);
    border-radius: 0 !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-sharp-pillar.crimson {
    border-left: 3px solid var(--ry-crimson);
}

.about-sharp-pillar.amber {
    border-left: 3px solid var(--ry-amber);
}

.about-sharp-pillar.sage {
    border-left: 3px solid var(--ry-sage);
}

.about-sharp-pillar:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.sharp-pillar-icon {
    width: 36px;
    height: 36px;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sharp-pillar-icon.crimson {
    background: rgba(229, 37, 37, 0.12);
    color: var(--ry-crimson);
}

.sharp-pillar-icon.amber {
    background: rgba(229, 152, 25, 0.14);
    color: var(--ry-amber);
}

.sharp-pillar-icon.sage {
    background: rgba(55, 104, 86, 0.14);
    color: var(--ry-sage);
}

.sharp-pillar-text h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 0.15rem;
    line-height: 1.25;
}

.sharp-pillar-text p {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-light);
    margin-bottom: 0;
}

/* Sharp Milestone Metrics Strip */
.about-sharp-metrics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    background: #FFFFFF;
    border: 1px solid rgba(34, 38, 49, 0.11);
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.25rem;
}

.sharp-metric-box {
    text-align: center;
    flex: 1;
}

.sharp-metric-num {
    display: block;
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--ry-crimson);
    line-height: 1.1;
}

.sharp-metric-lbl {
    display: block;
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.sharp-metric-sep {
    width: 1px;
    height: 28px;
    background: rgba(34, 38, 49, 0.12);
}

/* Sharp Action Buttons */
.about-sharp-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.btn-sharp {
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.78rem 1.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-sharp.btn-primary {
    background: var(--primary-gradient);
    color: var(--white);
    border: 2px solid transparent;
    box-shadow: 0 6px 18px rgba(229, 37, 37, 0.25);
}

.btn-sharp.btn-primary:hover {
    background: linear-gradient(135deg, #EC2A2A 0%, #8E0000 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(229, 37, 37, 0.35);
}

.btn-sharp.btn-outline-dark {
    color: var(--black);
    background: transparent;
    border: 2px solid rgba(8, 9, 12, 0.3);
}

.btn-sharp.btn-outline-dark:hover {
    border-color: var(--black);
    background: var(--black);
    color: var(--white);
    transform: translateY(-2px);
}

@keyframes pulseGlowAmber {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(229, 152, 25, 0.55);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(229, 152, 25, 0);
    }
}

/* Responsive Handling for Viewports < 992px */
@media (max-width: 991px) {
    .about-split-screen {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
    }

    .about-split-media {
        height: 50vh;
        min-height: 360px;
        border-right: none;
        border-bottom: 2px solid #14171E;
    }

    .about-split-content {
        height: auto;
        padding: 3rem 1.5rem;
    }

    .sharp-hud-corner.top-left {
        top: 16px;
        left: 16px;
    }

    .sharp-hud-corner.top-right {
        top: 16px;
        right: 16px;
    }

    .sharp-hud-corner.bottom-left {
        bottom: 16px;
        left: 16px;
    }

    .sharp-hud-corner.bottom-right {
        bottom: 16px;
        right: 16px;
    }

    .about-sharp-tag {
        top: 20px;
        left: 20px;
    }

    .about-sharp-banner {
        bottom: 20px;
        left: 20px;
        right: 20px;
    }
}

@media (max-width: 576px) {
    .about-split-media {
        height: 44vh;
        min-height: 300px;
    }

    .about-sharp-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 16px;
    }

    .about-sharp-metrics {
        flex-direction: column;
        gap: 0.8rem;
    }

    .sharp-metric-sep {
        width: 60px;
        height: 1px;
    }

    .about-sharp-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-sharp {
        width: 100%;
        justify-content: center;
    }
}

/* Mission & Vision */
.mission-vision-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.mission-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--primary-color);
}

.icon-wrapper {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* ==========================================================================
   Key Objectives Section (Architectural Chamfered Cards Reference Design)
   ========================================================================== */

.objectives-showcase-section {
    position: relative;
    width: 100%;
    padding: clamp(5.5rem, 9vh, 7.5rem) 0;
    background: #F6F8FA;
    overflow: hidden;
}

.objectives-showcase-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* -------------------------------------------------------------
   Top Split Header (Left Eyebrow & Title, Right Narrative Lead)
   ------------------------------------------------------------- */
.obj-header-row {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: flex-end;
    margin-bottom: clamp(3.2rem, 5.5vh, 4.5rem);
}

.obj-eyebrow,
.about-eyebrow,
.initiatives-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #525968;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.eyebrow-square {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-amber-hover) 100%);
    box-shadow: 0 2px 6px rgba(229, 152, 25, 0.4);
    display: inline-block;
}

.obj-main-title {
    font-size: clamp(2.1rem, 3.2vw, 3.1rem);
    font-weight: 700;
    color: #101217;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.obj-header-lead {
    font-size: clamp(0.98rem, 1.05vw, 1.08rem);
    line-height: 1.75;
    color: #505767;
    margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------
   4 Architectural Chamfered Cards Grid (Alternating Chamfer Corners)
   ------------------------------------------------------------- */
.objectives-chamfer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* Base Chamfer Card Shell */
.chamfer-card {
    position: relative;
    background: rgba(34, 38, 49, 0.12);
    padding: 1.5px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, filter 0.4s ease;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.04));
}

/* Card 01 & 03: Chamfer Top-Left Corner (45-degree angled cut) */
.chamfer-card.chamfer-top-left {
    clip-path: polygon(36px 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%, 0% 36px);
}

/* Card 02 & 04: Chamfer Top-Right Corner (45-degree angled cut) */
.chamfer-card.chamfer-top-right {
    clip-path: polygon(0% 0%, calc(100% - 36px) 0%, 100% 36px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%);
}

.chamfer-card:hover {
    transform: translateY(-8px);
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-crimson) 100%);
    filter: drop-shadow(0 18px 38px rgba(229, 152, 25, 0.18));
}

/* Card Interior Content Container */
.chamfer-card .card-inner {
    position: relative;
    background: #FFFFFF;
    width: 100%;
    height: 100%;
    padding: 2.2rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 310px;
    clip-path: inherit;
    transition: background 0.35s ease;
}

.chamfer-card:hover .card-inner {
    background: #FFFFFF;
}

/* Top Numeral Row (Reference: Massive light numerals in top right) */
.card-num-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 2rem;
}

.card-big-num {
    display: block;
    font-size: clamp(3.4rem, 4.2vw, 4.3rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -2.5px;
    color: #D7D0C7;
    transition: color 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.chamfer-card:hover .card-big-num {
    color: var(--ry-amber);
    transform: scale(1.08) translateY(-2px);
}

/* Bottom Card Narrative */
.card-content-bottom {
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #101217;
    margin-bottom: 0.65rem;
    line-height: 1.3;
    letter-spacing: -0.3px;
    transition: color 0.3s ease;
}

.chamfer-card:hover .card-title {
    color: var(--ry-crimson-dark, #A31010);
}

.card-desc {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #5F6777;
    margin-bottom: 0;
}

/* -------------------------------------------------------------
   Responsive Breakpoints for Key Objectives
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .objectives-chamfer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .chamfer-card .card-inner {
        min-height: 270px;
    }
}

@media (max-width: 768px) {
    .obj-header-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .obj-header-lead {
        margin-bottom: 0;
    }
}

@media (max-width: 576px) {
    .objectives-showcase-section {
        padding: 4rem 0;
    }

    .obj-main-title {
        font-size: 1.85rem;
    }

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

    .chamfer-card .card-inner {
        padding: 1.8rem 1.4rem;
        min-height: auto;
    }

    .card-big-num {
        font-size: 3.2rem;
    }
}

/* Objectives (Legacy - Maintained for About Page) */
.objectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.objective-item {
    background: var(--white);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    position: relative;
}

.obj-number {
    position: absolute;
    top: -15px;
    left: 20px;
    background: var(--black);
    color: var(--white);
    font-weight: 700;
    padding: 0.2rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Programs */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

/* Team Grid from About Page */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.team-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    transition: var(--transition);
    text-align: center;
    padding: 2rem 1.5rem;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.team-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--gray-100);
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.team-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    color: var(--black);
}

.team-card p {
    font-size: 0.95rem;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 0;
}

.team-card .member-role {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.5rem;
}

.program-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.program-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.program-img {
    height: 200px;
    overflow: hidden;
}

.program-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.program-card:hover .program-img img {
    transform: scale(1.05);
}

.program-content {
    padding: 1.5rem;
}

/* Impact */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    border-top: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    padding: 3rem 0;
}

.stat-box {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    font-size: 1.1rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.achievements-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: left;
}

.timeline-item {
    background: var(--gray-700);
    padding: 2rem;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

/* ==========================================================================
   EXECUTIVE DARK-MODE CONTACT SHOWCASE (Reference Split-Screen Layout)
   ========================================================================== */
.contact-page .header,
body:has(.contact-exec-wrapper) .header {
    background-color: rgba(8, 9, 12, 0.95);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-exec-wrapper {
    position: relative;
    background-color: var(--ry-dark-bg);
    color: #FFFFFF;
    min-height: 100vh;
    overflow: hidden;
    padding-top: 180px;
    /* Generous clearance preventing any header overlap */
    padding-bottom: 6.5rem;
}

/* Scenic Himalayan Background Layer with High-Tech Dark Scrim */
.contact-bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.contact-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    opacity: 0.22;
    filter: brightness(0.82) contrast(1.05) saturate(1.05);
    transform: scale(1.02);
}

.contact-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(8, 9, 12, 0.92) 0%,
            rgba(8, 9, 12, 0.72) 35%,
            rgba(8, 9, 12, 0.82) 70%,
            rgba(8, 9, 12, 0.96) 100%);
}

/* Background Ambient Glow & Yellow/Amber Orbital Accent from Reference */
.contact-ambient-glow {
    position: absolute;
    top: 15%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(229, 37, 37, 0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.contact-orbit-deco {
    position: absolute;
    top: 18%;
    right: -130px;
    width: 480px;
    height: 480px;
    border: 2px dashed rgba(229, 152, 25, 0.45);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    animation: rotateOrbit 90s linear infinite;
}

@keyframes rotateOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.contact-exec-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 5.5rem;
    align-items: flex-start;
}

/* Left Column: Identity, HQ, Provincial Hubs & Quick Direct Channels */
.contact-exec-left {
    display: flex;
    flex-direction: column;
}

.contact-org-label {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #E2E8F0;
    margin-bottom: 0.9rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.contact-exec-left .contact-main-title {
    font-family: var(--font-sans);
    font-size: clamp(2.8rem, 5.2vw, 4.2rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1px;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 3.2rem;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
}

.contact-block {
    margin-bottom: 2.8rem;
}

.contact-sub-title {
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ry-amber);
    margin-bottom: 0.85rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.contact-address-lines {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
}

.contact-address-lines p {
    font-size: 0.96rem;
    line-height: 1.6;
    color: #E2E8F0;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

.contact-address-lines .addr-line1 {
    color: #FFFFFF;
    font-weight: 600;
}

.contact-map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #FF4D4D;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    margin-top: 0.45rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.contact-map-link:hover {
    color: #FFA5A5;
    transform: translateX(3px);
}

.contact-map-link i {
    font-size: 0.78rem;
    color: #FF4D4D;
}

.contact-hub-cities {
    font-size: 1.22rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.6;
    margin-bottom: 0.45rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.contact-hub-cities span {
    color: var(--ry-amber);
    margin: 0 0.35rem;
    font-weight: 400;
}

.contact-hub-note {
    font-size: 0.88rem;
    color: #CBD5E1;
    line-height: 1.55;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

.contact-direct-strip {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.contact-direct-strip .direct-item {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.05rem;
    color: #F1F5F9;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.contact-direct-strip .direct-item:hover:not(.hours) {
    color: var(--ry-amber);
    transform: translateX(4px);
}

.contact-direct-strip .direct-item i {
    width: 22px;
    color: var(--ry-amber);
    font-size: 1.15rem;
    text-align: center;
}

.contact-direct-strip .direct-item.hours {
    color: #CBD5E1;
    font-size: 0.92rem;
}

/* Right Column: Context Statement & High-Tech Form */
.contact-exec-right {
    display: flex;
    flex-direction: column;
}

.contact-top-statement {
    text-align: right;
    margin-bottom: 2rem;
}

.contact-top-statement p {
    font-size: 0.9rem;
    color: #E2E8F0;
    line-height: 1.65;
    max-width: 440px;
    margin-left: auto;
    margin-bottom: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.contact-exec-form {
    display: flex;
    flex-direction: column;
}

.exec-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.35rem;
}

.exec-label {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 0.55rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.exec-input,
.exec-select,
.exec-textarea {
    width: 100%;
    background-color: rgba(12, 14, 20, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    padding: 0.85rem 1rem;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.exec-input:focus,
.exec-select:focus,
.exec-textarea:focus {
    border-color: var(--ry-amber);
    box-shadow: 0 0 14px rgba(229, 152, 25, 0.35);
    background-color: rgba(18, 21, 31, 0.95);
}

.exec-input::placeholder,
.exec-textarea::placeholder {
    color: #6B7280;
}

.select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.select-wrapper .exec-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}

.select-wrapper .exec-select option {
    background-color: #12141A;
    color: #FFFFFF;
    padding: 0.5rem;
}

.select-chevron {
    position: absolute;
    right: 1rem;
    pointer-events: none;
    font-size: 0.72rem;
    color: #8C93A3;
    transition: transform 0.2s ease, color 0.2s ease;
}

.select-wrapper:focus-within .select-chevron {
    color: var(--ry-amber);
}

.exec-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.35rem;
}

.exec-textarea {
    min-height: 115px;
    resize: vertical;
    line-height: 1.55;
}

/* Submit Area matching Reference Underline Style */
.exec-submit-container {
    margin-top: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.exec-submit-btn {
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 0.7rem 0.2rem;
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: color 0.2s ease;
}

.exec-submit-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--ry-crimson) 0%, var(--ry-amber) 100%);
    border-radius: 1px;
    transition: height 0.25s ease, box-shadow 0.25s ease;
}

.exec-submit-btn:hover {
    color: var(--ry-amber);
}

.exec-submit-btn:hover::after {
    height: 3px;
    box-shadow: 0 0 12px rgba(229, 152, 25, 0.6);
}

.exec-submit-btn:active {
    transform: translateY(1px);
}

.form-status-msg {
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 0.5rem 0;
    display: none;
}

.form-status-msg.success {
    display: block;
    color: #34D399;
}

.form-status-msg.error {
    display: block;
    color: #F87171;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .contact-exec-wrapper {
        padding-top: 165px;
    }

    .contact-exec-container {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .contact-top-statement {
        text-align: left;
    }

    .contact-top-statement p {
        margin-left: 0;
        max-width: 100%;
    }

    .contact-orbit-deco {
        width: 320px;
        height: 320px;
        right: -80px;
        top: 40%;
    }
}

@media (max-width: 768px) {
    .contact-exec-wrapper {
        padding-top: 120px;
    }
}

@media (max-width: 640px) {
    .contact-exec-wrapper {
        padding-top: 110px;
        padding-bottom: 5rem;
    }

    .contact-exec-wrapper .contact-main-title {
        font-size: 2.6rem;
        margin-bottom: 2.4rem;
    }

    .exec-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-hub-cities {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   LIGHT MODE STYLING (Contact Page & Site Components)
   ========================================================================== */
body.light-theme {
    background-color: #F8FAFC;
    color: #0F172A;
}

/* ==========================================================================
   Universal Constant Black Header & Navbar (All Inner Pages, Light & Dark Themes)
   The navigation bar on all inner pages (About, Donate, Membership, Team, Contact,
   Legal pages) ALWAYS remains sleek, executive black with white typography.
   ========================================================================== */
body:not(.home-page):not(:has(.hero)) .header,
body.contact-page .header,
body.about-page .header,
body.donate-page .header,
body.membership-page .header,
body.team-page .header,
body.legal-page .header,
body.light-theme:not(.home-page):not(:has(.hero)) .header,
body.light-theme.contact-page .header,
body.light-theme.about-page .header,
body.light-theme.donate-page .header,
body.light-theme.membership-page .header,
body.light-theme.team-page .header,
body.light-theme.legal-page .header,
body.light-theme:has(.contact-exec-wrapper) .header {
    background-color: rgba(10, 12, 16, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body:not(.home-page):not(:has(.hero)) .header.scrolled,
body.contact-page .header.scrolled,
body.about-page .header.scrolled,
body.donate-page .header.scrolled,
body.membership-page .header.scrolled,
body.team-page .header.scrolled,
body.legal-page .header.scrolled,
body.light-theme:not(.home-page):not(:has(.hero)) .header.scrolled {
    background-color: rgba(8, 10, 14, 0.98) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
}

body:not(.home-page):not(:has(.hero)) .top-bar,
body.contact-page .top-bar,
body.about-page .top-bar,
body.donate-page .top-bar,
body.membership-page .top-bar,
body.team-page .top-bar,
body.legal-page .top-bar,
body.light-theme:not(.home-page):not(:has(.hero)) .top-bar {
    background-color: rgba(6, 7, 10, 0.92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================================================
   Home Page Hero Navbar (Restored Previous Design)
   Transparent floating header over hero slider at scroll = 0, with frosted top-bar,
   transitioning cleanly to frosted dark executive bar on scroll with hidden top-bar.
   ========================================================================== */
body.home-page .header:not(.scrolled),
body:has(.hero) .header:not(.scrolled),
body.light-theme.home-page .header:not(.scrolled),
body.light-theme:has(.hero) .header:not(.scrolled),
body.dark-theme.home-page .header:not(.scrolled),
body.dark-theme:has(.hero) .header:not(.scrolled) {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.home-page .header:not(.scrolled) .top-bar,
body:has(.hero) .header:not(.scrolled) .top-bar,
body.light-theme.home-page .header:not(.scrolled) .top-bar,
body.light-theme:has(.hero) .header:not(.scrolled) .top-bar,
body.dark-theme.home-page .header:not(.scrolled) .top-bar,
body.dark-theme:has(.hero) .header:not(.scrolled) .top-bar {
    background-color: rgba(10, 10, 10, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 0.45rem 0 !important;
}

body.home-page .header:not(.scrolled) .navbar,
body:has(.hero) .header:not(.scrolled) .navbar {
    background-color: transparent !important;
    padding: 1rem 0 !important;
}

body.home-page .header.scrolled,
body:has(.hero) .header.scrolled,
body.light-theme.home-page .header.scrolled,
body.light-theme:has(.hero) .header.scrolled,
body.dark-theme.home-page .header.scrolled,
body.dark-theme:has(.hero) .header.scrolled {
    background-color: rgba(12, 12, 14, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

body.home-page .header.scrolled .top-bar,
body:has(.hero) .header.scrolled .top-bar,
body.light-theme.home-page .header.scrolled .top-bar,
body.light-theme:has(.hero) .header.scrolled .top-bar,
body.dark-theme.home-page .header.scrolled .top-bar,
body.dark-theme:has(.hero) .header.scrolled .top-bar {
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    border: none !important;
}

body.home-page .header.scrolled .navbar,
body:has(.hero) .header.scrolled .navbar {
    background-color: transparent !important;
    padding: 0.65rem 0 !important;
}

.top-info .info-item,
body .top-info .info-item,
body.light-theme .top-info .info-item,
body.dark-theme .top-info .info-item {
    color: rgba(255, 255, 255, 0.85) !important;
}

.top-info .info-item:hover,
body.light-theme .top-info .info-item:hover,
body.dark-theme .top-info .info-item:hover {
    color: var(--ry-amber) !important;
}

.top-info .info-item i,
body.light-theme .top-info .info-item i,
body.dark-theme .top-info .info-item i {
    color: var(--ry-amber) !important;
}

.top-social-link,
body .top-social-link,
body.light-theme .top-social-link,
body.dark-theme .top-social-link {
    color: rgba(255, 255, 255, 0.8) !important;
    background: transparent !important;
}

.top-social-link:hover,
body.light-theme .top-social-link:hover,
body.dark-theme .top-social-link:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.navbar,
body .navbar,
body.light-theme .navbar,
body.dark-theme .navbar {
    background-color: transparent !important;
}

.brand-name,
body .brand-name,
body.light-theme .brand-name,
body.dark-theme .brand-name {
    color: #FFFFFF !important;
}

.brand-tagline,
body .brand-tagline,
body.light-theme .brand-tagline,
body.dark-theme .brand-tagline {
    color: var(--amber-500) !important;
}

.nav-links a.nav-item,
body .nav-links a.nav-item,
body.light-theme .nav-links a.nav-item,
body.dark-theme .nav-links a.nav-item {
    color: rgba(255, 255, 255, 0.92) !important;
}

.nav-links a.nav-item:hover,
.nav-links a.nav-item.active,
body .nav-links a.nav-item:hover,
body .nav-links a.nav-item.active,
body.light-theme .nav-links a.nav-item:hover,
body.light-theme .nav-links a.nav-item.active,
body.dark-theme .nav-links a.nav-item:hover,
body.dark-theme .nav-links a.nav-item.active {
    color: var(--ry-amber) !important;
}

.nav-links a.nav-item::after {
    background-color: var(--ry-amber) !important;
}

.nav-search-btn,
.theme-toggle-btn,
body .nav-search-btn,
body .theme-toggle-btn,
body.light-theme .nav-search-btn,
body.light-theme .theme-toggle-btn,
body.dark-theme .nav-search-btn,
body.dark-theme .theme-toggle-btn {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.nav-search-btn:hover,
.theme-toggle-btn:hover,
body .nav-search-btn:hover,
body .theme-toggle-btn:hover,
body.light-theme .nav-search-btn:hover,
body.light-theme .theme-toggle-btn:hover,
body.dark-theme .nav-search-btn:hover,
body.dark-theme .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #FFFFFF !important;
}

.hamburger,
.hamburger::before,
.hamburger::after,
body .hamburger,
body .hamburger::before,
body .hamburger::after,
body.light-theme .hamburger,
body.light-theme .hamburger::before,
body.light-theme .hamburger::after {
    background-color: #FFFFFF !important;
}

@media (max-width: 991px) {

    .nav-links,
    body .nav-links,
    body.light-theme .nav-links,
    body.dark-theme .nav-links {
        background-color: rgba(10, 12, 16, 0.98) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6) !important;
    }
}

/* ==========================================================================
   Light / Dark Theme Toggle Icon Switch States
   Default / Light: Show Moon Icon (Amber), Hide Sun Icon
   Dark Theme: Show Sun Icon (Amber), Hide Moon Icon
   ========================================================================== */
.theme-icon-sun {
    display: none;
    color: #F59E0B;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.theme-icon-moon {
    display: inline-block;
    color: #F59E0B;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

body.dark-theme .theme-icon-sun {
    display: inline-block !important;
}

body.dark-theme .theme-icon-moon {
    display: none !important;
}

body.light-theme .theme-icon-sun {
    display: none !important;
}

body.light-theme .theme-icon-moon {
    display: inline-block !important;
}

.theme-toggle-btn:hover .theme-icon-moon,
.theme-toggle-btn:hover .theme-icon-sun {
    transform: rotate(20deg) scale(1.15);
}

/* Light Mode Contact Wrapper & Scenic Himalayan Background */
body.light-theme .contact-exec-wrapper {
    background-color: #F8FAFC;
    color: #0F172A;
}

body.light-theme .contact-bg-img {
    opacity: 0.15;
    filter: brightness(1.0) contrast(1.02) saturate(0.95);
}

body.light-theme .contact-bg-overlay {
    background: linear-gradient(180deg,
            rgba(248, 250, 252, 0.93) 0%,
            rgba(248, 250, 252, 0.76) 35%,
            rgba(248, 250, 252, 0.86) 70%,
            rgba(248, 250, 252, 0.98) 100%);
}

body.light-theme .contact-orbit-deco {
    border-color: rgba(229, 152, 25, 0.55);
}

/* Light Mode Left Column */
body.light-theme .contact-org-label {
    color: #64748B;
    text-shadow: none;
}

body.light-theme .contact-exec-wrapper .contact-main-title {
    color: #0F172A;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
}

body.light-theme .contact-sub-title {
    color: #D97706;
    text-shadow: none;
}

body.light-theme .contact-address-lines p {
    color: #334155;
    text-shadow: none;
}

body.light-theme .contact-address-lines .addr-line1 {
    color: #0F172A;
}

body.light-theme .contact-map-link {
    color: #E52525;
    text-shadow: none;
    font-weight: 600;
}

body.light-theme .contact-map-link:hover {
    color: #B91C1C;
    transform: translateX(3px);
}

body.light-theme .contact-map-link i {
    color: #E52525;
}

body.light-theme .contact-hub-cities {
    color: #0F172A;
    text-shadow: none;
}

body.light-theme .contact-hub-cities span {
    color: #D97706;
}

body.light-theme .contact-hub-note {
    color: #64748B;
    text-shadow: none;
}

body.light-theme .contact-direct-strip {
    border-top-color: rgba(0, 0, 0, 0.12);
}

body.light-theme .contact-direct-strip .direct-item {
    color: #1E293B;
    text-shadow: none;
}

body.light-theme .contact-direct-strip .direct-item:hover:not(.hours) {
    color: #D97706;
}

body.light-theme .contact-direct-strip .direct-item.hours {
    color: #64748B;
}

/* Light Mode Right Column & Form */
body.light-theme .contact-top-statement p {
    color: #475569;
    text-shadow: none;
}

body.light-theme .exec-label {
    color: #0F172A;
    text-shadow: none;
}

body.light-theme .exec-input,
body.light-theme .exec-select,
body.light-theme .exec-textarea {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid #CBD5E1;
    color: #0F172A;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-theme .exec-input:focus,
body.light-theme .exec-select:focus,
body.light-theme .exec-textarea:focus {
    border-color: #D97706;
    background-color: #FFFFFF;
    box-shadow: 0 0 14px rgba(217, 119, 6, 0.25);
}

body.light-theme .exec-input::placeholder,
body.light-theme .exec-textarea::placeholder {
    color: #94A3B8;
}

body.light-theme .select-wrapper .exec-select option {
    background-color: #FFFFFF;
    color: #0F172A;
}

body.light-theme .select-chevron {
    color: #64748B;
}

body.light-theme .exec-submit-btn {
    color: #0F172A;
}

body.light-theme .exec-submit-btn:hover {
    color: #D97706;
}

/* ==========================================================================
   EXECUTIVE HIGH-TECH FOOTER (RoboYuwa Brand Palette & Design System)
   Matching User's Reference Layout: Top Tri-Color Accent, 4 Columns,
   Minimalist Headings with Cyan Bars, Clean Links, Rectangular Newsletter,
   and Sleek Sub-Footer.
   ========================================================================== */
.footer {
    position: relative;
    background: #060709;
    color: #9CA3AF;
    padding: 0;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border-top: none;
}

/* Tri-Color Top Accent Line (RoboYuwa Brand: Crimson #E52525 -> Amber #E59819 -> Sage #376856) */
.footer-top-accent {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            var(--ry-crimson) 0%,
            var(--ry-crimson) 33.333%,
            var(--ry-amber) 33.333%,
            var(--ry-amber) 66.666%,
            var(--ry-sage) 66.666%,
            var(--ry-sage) 100%);
    box-shadow: 0 1px 8px rgba(229, 37, 37, 0.25);
    z-index: 10;
}

.footer-main-container {
    padding-top: 4.8rem;
    padding-bottom: 3.2rem;
}

/* 4-Column High-Tech Grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1.35fr;
    gap: 3.8rem;
    align-items: flex-start;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

/* Column 1: Brand */
.footer-logo-badge {
    display: inline-block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFFFFF;
    padding: 3px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    margin-bottom: 1.35rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid rgba(229, 152, 25, 0.4);
}

.footer-logo-badge:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(229, 152, 25, 0.4);
}

.footer-logo-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.footer-mission-text {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.65;
    color: #9CA3AF;
    max-width: 330px;
    margin-bottom: 1.6rem;
    font-weight: 400;
}

.footer-social-boxes {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.social-box-btn {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}

.social-box-btn:hover {
    color: #FFFFFF;
    border-color: var(--ry-crimson);
    background: rgba(229, 37, 37, 0.16);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 37, 37, 0.35);
}

/* Column Headings & RoboYuwa Brand Underline Bar */
.footer-col-header {
    font-family: var(--font-sans);
    font-size: 0.94rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.footer-title-bar {
    width: 28px;
    height: 2.5px;
    background: linear-gradient(90deg, var(--ry-crimson) 0%, var(--ry-amber) 100%);
    margin: 0.55rem 0 1.45rem 0;
    border-radius: 2px;
    box-shadow: 0 1px 6px rgba(229, 152, 25, 0.3);
}

/* Clean Nav Links (Shortcuts) */
.footer-clean-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.footer-clean-links li a {
    font-family: var(--font-sans);
    color: #9CA3AF;
    font-size: 0.91rem;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    line-height: 1.5;
}

.footer-clean-links li a:hover {
    color: #FFFFFF;
    transform: translateX(4px);
}

.footer-link-discord {
    color: var(--ry-amber) !important;
    font-weight: 500 !important;
}

.footer-link-discord i {
    font-size: 0.8rem;
    margin-left: 6px;
    color: var(--ry-amber);
    opacity: 0.95;
    transition: transform 0.2s ease;
}

.footer-link-discord:hover i {
    transform: scale(1.15);
}

/* Column 4: Newsletter */
.footer-newsletter-intro {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.6;
    color: #9CA3AF;
    margin-bottom: 1.35rem;
    max-width: 320px;
}

.footer-newsletter-box {
    display: flex;
    align-items: stretch;
    background: #101217;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    overflow: hidden;
    max-width: 340px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.footer-newsletter-box:focus-within {
    border-color: var(--ry-crimson);
    box-shadow: 0 0 14px rgba(229, 37, 37, 0.35);
}

.newsletter-dark-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 0.75rem 0.95rem;
    color: #FFFFFF;
    font-size: 0.88rem;
    font-family: var(--font-sans);
    min-width: 0;
}

.newsletter-dark-input::placeholder {
    color: #555D6E;
}

.newsletter-dark-btn {
    background: var(--ry-crimson);
    border: none;
    outline: none;
    padding: 0 1.25rem;
    color: #FFFFFF;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
}

.newsletter-dark-btn:hover {
    background: var(--ry-crimson-dark);
    box-shadow: 0 0 14px rgba(229, 37, 37, 0.45);
}

.newsletter-dark-btn:active {
    transform: scale(0.96);
}

/* Sub-Footer / Bottom Bar */
.footer-bottom-bar {
    margin-top: 4.8rem;
    padding-top: 2.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-bottom-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-copy-line1 {
    font-size: 0.85rem;
    color: #9CA3AF;
    margin: 0;
}

.footer-copy-line2 {
    font-size: 0.82rem;
    color: #6B7280;
    margin: 0;
}

.footer-copy-dev {
    font-size: 0.82rem;
    color: #8C93A3;
    margin: 0.25rem 0 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    letter-spacing: 0.2px;
}

.footer-copy-dev .developer-link {
    color: var(--ry-amber);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    transition: color 0.2s ease;
}

.footer-copy-dev .developer-link:hover {
    color: #FFFFFF;
}

.footer-copy-dev .developer-link i {
    font-size: 0.68rem;
    transition: transform 0.2s ease;
}

.footer-copy-dev .developer-link:hover i {
    transform: translate(1px, -1px);
}

.footer-bottom-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-bottom-nav a {
    color: #9CA3AF;
    font-size: 0.86rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom-nav a:hover {
    color: #FFFFFF;
}

.footer-bar-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
    user-select: none;
}

.footer-back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #FFFFFF !important;
    text-transform: uppercase;
    cursor: pointer;
}

.footer-back-to-top i {
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}

.footer-back-to-top:hover i {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }

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

    .stats-grid,
    .achievements-timeline {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.2rem 2.5rem;
    }
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }

    .nav-actions .btn-pill-amber {
        padding: 0.5rem 1.2rem;
        font-size: 0.85rem;
    }

    .nav-search-btn,
    .theme-toggle-btn {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(14, 15, 18, 0.98);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        padding: 0;
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-6px);
        transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease, padding 0.35s ease;
    }

    .nav-links.active {
        max-height: 480px;
        opacity: 1;
        padding: 1.2rem 1.5rem;
        transform: translateY(0);
    }

    .nav-links ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
    }

    .nav-links a.nav-item {
        font-size: 1.05rem;
        color: #ffffff;
    }

    .hero {
        min-height: 760px;
    }

    .hero-bg img {
        left: 0;
        object-position: center;
    }

    .hero-container {
        padding: 0 1.5rem;
    }

    .hero-content {
        padding-top: 100px;
        padding-bottom: 110px;
        max-width: 100%;
    }

    .hero-eyebrow {
        font-size: 1.35rem;
    }

    .hero-title {
        font-size: clamp(1.75rem, 6.2vw, 2.35rem);
        line-height: 1.15;
    }

    .hero-desc {
        font-size: 1rem;
        margin-bottom: 1.8rem;
    }

    .hero-actions {
        flex-direction: row;
        gap: 1.2rem;
    }

    .btn-hero-pill {
        padding: 0.85rem 1.8rem;
        font-size: 0.95rem;
    }

    .hero-slider-nav {
        right: 4%;
        top: 28%;
        gap: 0.6rem;
    }

    .slider-arrow {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .hero-impact-card {
        bottom: 42px;
        padding: 0.9rem 1.4rem;
        border-top-left-radius: 20px;
        gap: 0.85rem;
    }

    .impact-card-icon {
        width: 36px;
        height: 36px;
    }

    .impact-gift-svg {
        width: 34px;
        height: 34px;
    }

    .impact-card-label {
        font-size: 0.72rem;
    }

    .impact-card-value {
        font-size: 1.6rem;
    }

    .mission-vision-wrapper {
        grid-template-columns: 1fr;
    }

    .footer-main-container {
        padding-top: 3.5rem;
        padding-bottom: 2.5rem;
    }

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

    .footer-newsletter-box {
        max-width: 100%;
    }

    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        margin-top: 3.5rem;
        padding-top: 1.8rem;
    }

    .footer-bottom-nav {
        flex-wrap: wrap;
        gap: 1rem 1.2rem;
    }
}

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Major Initiatives Showcase Section (Exact Screen Frame 100vh Viewport)
   ========================================================================== */

.initiatives-showcase-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(2.8rem, 5.5vh, 4.5rem) 0;
    background: #FFFFFF;
    overflow: hidden;
    scroll-margin-top: 80px;
    box-sizing: border-box;
}

.initiatives-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* -------------------------------------------------------------
   Header & Action Area (Generous Reference Scale)
   ------------------------------------------------------------- */
.initiatives-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(1.6rem, 3.2vh, 2.6rem);
}

.initiatives-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #64748B;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.initiatives-breadcrumb i {
    color: var(--ry-amber);
    font-size: 0.92rem;
}

.initiatives-breadcrumb strong {
    color: #101217;
    font-weight: 700;
}

.initiatives-main-title {
    font-family: var(--font-serif);
    font-size: clamp(2.1rem, 3.4vw, 3.2rem);
    font-weight: 700;
    color: #101217;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 0.65rem;
    text-shadow: none !important;
    text-transform: none !important;
    filter: none !important;
}

.initiatives-main-title .text-gradient-crimson {
    text-shadow: none !important;
    filter: none !important;
}

.initiatives-subtitle {
    font-family: var(--font-sans);
    font-size: clamp(0.92rem, 1.05vw, 1.02rem);
    line-height: 1.62;
    color: #525968;
    max-width: 680px;
    margin: 0 auto clamp(1.1rem, 2.2vh, 1.6rem);
}

.initiatives-action-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-initiatives-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E59819 0%, #D4840D 100%);
    color: #FFFFFF !important;
    font-family: var(--font-sans);
    font-size: 0.94rem;
    font-weight: 600;
    padding: 0.74rem 2.3rem;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(229, 152, 25, 0.3);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    cursor: pointer;
}

.btn-initiatives-action:hover {
    background: linear-gradient(135deg, #F0A526 0%, #E59819 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(229, 152, 25, 0.45);
    color: #FFFFFF !important;
}

/* -------------------------------------------------------------
   3-Frame Chamfered Photo Gallery (Full Screen Frame Presence)
   ------------------------------------------------------------- */
.initiatives-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: clamp(1.2rem, 2.2vw, 2.2rem);
    align-items: center;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
}

.init-gallery-col {
    position: relative;
    width: 100%;
}

/* Diagonal 1: Top-Left & Bottom-Right Chamfers (Left & Right Frames) */
.frame-diagonal-1 {
    clip-path: polygon(52px 0%,
            calc(100% - 15px) 0%,
            100% 15px,
            100% calc(100% - 52px),
            calc(100% - 52px) 100%,
            15px 100%,
            0% calc(100% - 15px),
            0% 52px);
    height: clamp(280px, 32vh, 345px);
}

/* Diagonal 2: Top-Right & Bottom-Left Chamfers (Center Hero Frame) */
.frame-diagonal-2 {
    clip-path: polygon(15px 0%,
            calc(100% - 66px) 0%,
            100% 66px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            66px 100%,
            0% calc(100% - 66px),
            0% 15px);
    height: clamp(360px, 42vh, 435px);
}

.init-chamfer-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #1A1D24;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.init-chamfer-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.init-chamfer-frame:hover img {
    transform: scale(1.06);
}

/* Center Column Backing Layer */
.init-center-wrapper {
    position: relative;
    width: 100%;
}

.init-backing-frame {
    position: absolute;
    inset: -8px;
    background: #ECE7E1;
    clip-path: polygon(20px 0%,
            calc(100% - 72px) 0%,
            100% 72px,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            72px 100%,
            0% calc(100% - 72px),
            0% 20px);
    z-index: 0;
    transition: background 0.35s ease, transform 0.35s ease;
}

.init-center-wrapper:hover .init-backing-frame {
    background: rgba(229, 152, 25, 0.28);
    transform: scale(1.015);
}

.init-center-wrapper .init-chamfer-frame {
    position: relative;
    z-index: 1;
}

/* Centered Glassmorphic Play Button */
.init-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    text-decoration: none;
}

.play-icon-circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2.5px solid rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.25rem;
    padding-left: 3px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.init-play-btn:hover .play-icon-circle {
    background: var(--ry-crimson);
    border-color: #FFFFFF;
    transform: scale(1.14);
    box-shadow: 0 10px 32px rgba(229, 37, 37, 0.55);
}

/* Frame Caption Overlays */
.init-frame-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.8rem 1.3rem 1.1rem;
    background: linear-gradient(to top, rgba(16, 18, 23, 0.92) 0%, rgba(16, 18, 23, 0.48) 60%, transparent 100%);
    z-index: 3;
    pointer-events: none;
    transition: all 0.3s ease;
}

.init-frame-badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--ry-amber);
    margin-bottom: 0.25rem;
}

.init-frame-badge.highlight {
    color: #FFD166;
}

.init-frame-desc {
    font-family: var(--font-sans);
    font-size: 0.84rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* -------------------------------------------------------------
   Responsive Breakpoints
   ------------------------------------------------------------- */
@media (max-width: 991px) {
    .initiatives-showcase-section {
        min-height: auto;
        padding: 4.5rem 0;
    }

    .initiatives-gallery-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        gap: 2rem;
    }

    .frame-diagonal-1,
    .frame-diagonal-2 {
        height: 320px;
    }

    .frame-diagonal-1 {
        clip-path: polygon(42px 0%,
                100% 0%,
                100% calc(100% - 42px),
                calc(100% - 42px) 100%,
                0% 100%,
                0% 42px);
    }

    .frame-diagonal-2 {
        clip-path: polygon(0% 0%,
                calc(100% - 42px) 0%,
                100% 42px,
                100% 100%,
                42px 100%,
                0% calc(100% - 42px));
    }
}

@media (max-width: 576px) {
    .initiatives-showcase-section {
        padding: 3.5rem 0;
    }

    .frame-diagonal-1,
    .frame-diagonal-2 {
        height: 270px;
    }

    .play-icon-circle {
        width: 52px;
        height: 52px;
        font-size: 1.05rem;
    }

    .btn-initiatives-action {
        width: 100%;
        max-width: 270px;
        padding: 0.7rem 1.6rem;
    }
}

/* ==========================================================================
   Institutional Charter & Purpose Section (#charter)
   Spacious, architectural typography layout matching Objectives & About sections
   ========================================================================== */

.charter-showcase-section {
    position: relative;
    width: 100%;
    padding: clamp(5rem, 7.5vw, 7.5rem) 0;
    background: #F8FAFC;
    overflow: hidden;
    box-sizing: border-box;
}

.charter-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 4vw, 3.6rem);
}

/* -------------------------------------------------------------
   Top Row: Left Title & Lead Narrative, Right Constitutional Quote
   ------------------------------------------------------------- */
.charter-top-row {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 4vw, 3.8rem);
    align-items: center;
}

.charter-title-col {
    display: flex;
    flex-direction: column;
}

.charter-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ry-amber, #E59819);
    margin-bottom: 0.75rem;
}

.charter-main-title {
    font-size: clamp(2.1rem, 3.2vw, 2.9rem);
    line-height: 1.22;
    color: var(--ry-gray-900, #101217);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1.1rem 0;
}

.charter-lead-narrative {
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.7;
    color: var(--ry-gray-600, #4B5262);
    margin: 0;
    max-width: 600px;
}

/* Preamble Card */
.charter-quote-card {
    background: #FFFFFF;
    border: 1px solid rgba(16, 18, 23, 0.09);
    border-left: 4px solid var(--ry-crimson, #E52525);
    clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
    padding: clamp(1.8rem, 2.5vw, 2.4rem);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.charter-quote-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07);
}

.charter-quote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 12px;
    flex-wrap: wrap;
}

.preamble-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ry-crimson, #E52525);
}

.charter-quote-ref {
    font-weight: 600;
    color: var(--text-light, #8C93A3);
    font-size: 0.8rem;
}

.charter-quote-text {
    font-family: var(--font-serif);
    font-size: clamp(1.06rem, 1.35vw, 1.22rem);
    line-height: 1.65;
    color: var(--ry-gray-900, #101217);
    font-style: italic;
    margin: 0 0 1.25rem 0;
}

.charter-quote-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--ry-gray-600, #4B5262);
    border-top: 1px solid rgba(16, 18, 23, 0.07);
    padding-top: 1rem;
    gap: 14px;
    flex-wrap: wrap;
}

.charter-assembly-tag {
    font-weight: 600;
    color: var(--ry-gray-600, #4B5262);
}

.charter-quote-values {
    display: flex;
    gap: 14px;
    font-weight: 600;
    color: var(--ry-gray-900, #101217);
    font-size: 0.85rem;
}

.charter-quote-values span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.charter-quote-values span i {
    color: var(--ry-crimson, #E52525);
    font-size: 0.8rem;
}

/* -------------------------------------------------------------
   3 Spacious Architectural Directive Cards
   ------------------------------------------------------------- */
.charter-pillars-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.4rem, 2vw, 2rem);
}

.charter-card {
    position: relative;
    background: rgba(34, 38, 49, 0.1);
    padding: 1.5px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, filter 0.4s ease;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.03));
}

.charter-card.chamfer-top-left {
    clip-path: polygon(36px 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%, 0% 36px);
}

.charter-card.chamfer-top-right {
    clip-path: polygon(0% 0%, calc(100% - 36px) 0%, 100% 36px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%);
}

.charter-card:hover {
    transform: translateY(-8px);
    background: linear-gradient(135deg, var(--ry-amber, #E59819) 0%, var(--ry-crimson, #E52525) 100%);
    filter: drop-shadow(0 18px 36px rgba(229, 152, 25, 0.16));
}

.charter-card-inner {
    position: relative;
    background: #FFFFFF;
    width: 100%;
    height: 100%;
    padding: clamp(2rem, 2.5vw, 2.5rem) clamp(1.6rem, 2vw, 2rem) clamp(1.8rem, 2.2vw, 2.2rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 330px;
    clip-path: inherit;
    box-sizing: border-box;
    transition: background 0.35s ease;
}

.charter-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.2rem;
}

.directive-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ry-amber, #E59819);
    padding: 4px 10px;
    background: rgba(229, 152, 25, 0.1);
    border-radius: 4px;
}

.charter-card-num {
    display: block;
    font-size: clamp(2.8rem, 3.5vw, 3.6rem);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -2px;
    color: #E2DBD3;
    transition: color 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.charter-card:hover .charter-card-num {
    color: var(--ry-amber, #E59819);
    transform: scale(1.08) translateY(-2px);
}

.charter-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.4rem;
}

.charter-card-title {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 1.55vw, 1.45rem);
    line-height: 1.28;
    color: var(--ry-gray-900, #101217);
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    transition: color 0.3s ease;
}

.charter-card:hover .charter-card-title {
    color: var(--ry-crimson, #E52525);
}

.charter-card-desc {
    font-size: 0.96rem;
    line-height: 1.66;
    color: var(--ry-gray-600, #525968);
    margin: 0;
}

.charter-card-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #F8FAFC;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ry-gray-900, #101217);
    border: 1px solid rgba(16, 18, 23, 0.06);
    border-left-width: 3px;
    border-left-color: var(--ry-crimson, #E52525);
}

.charter-card-pill i {
    color: var(--ry-crimson, #E52525);
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 991px) {
    .charter-showcase-section {
        padding: 4.5rem 0;
    }

    .charter-top-row {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .charter-pillars-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}


/* ==========================================================================
   Testimonials Section (Chamfered Showcase Card Reference Design)
   ========================================================================== */

.testimonials-showcase-section {
    position: relative;
    width: 100%;
    padding: clamp(5.5rem, 9vh, 7.5rem) 0;
    background: #FFFFFF;
    overflow: hidden;
}


.testimonials-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* -------------------------------------------------------------
   Centered Header
   ------------------------------------------------------------- */
.testi-header-center {
    text-align: center;
    max-width: 680px;
    margin: 0 auto clamp(3.2rem, 5.5vh, 4.5rem);
}

.testi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #525968;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.testi-main-title {
    font-size: clamp(2.2rem, 3.4vw, 3.25rem);
    font-weight: 700;
    color: #101217;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.testi-subtitle {
    font-size: clamp(0.98rem, 1.05vw, 1.06rem);
    line-height: 1.72;
    color: #64748B;
    margin-bottom: 0;
}

/* -------------------------------------------------------------
   Slider Wrapper & Navigation
   ------------------------------------------------------------- */
.testi-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 2.8rem);
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
}

.testi-nav-btn {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    outline: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, box-shadow 0.25s ease;
    z-index: 5;
}

/* Left button: Light warm-sand (Reference) */
.testi-nav-btn.prev {
    background-color: #EFECE6;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #101217;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.testi-nav-btn.prev:hover {
    background-color: #E5E0D7;
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Right button: Warm Amber (Reference) */
.testi-nav-btn.next {
    background: linear-gradient(135deg, #F8CD96 0%, #E59819 100%);
    border: 1px solid rgba(229, 152, 25, 0.4);
    color: #101217;
    box-shadow: 0 4px 18px rgba(229, 152, 25, 0.3);
}

.testi-nav-btn.next:hover {
    background: linear-gradient(135deg, #FFB338 0%, #F5A623 100%);
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(229, 152, 25, 0.45);
}

/* -------------------------------------------------------------
   Main Chamfered Showcase Card
   ------------------------------------------------------------- */
.testi-showcase-card {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: rgba(34, 38, 49, 0.1);
    padding: 1.5px;
    border-radius: 0 28px 28px 28px;
    /* Top-left angled cut corner (Chamfer) */
    clip-path: polygon(55px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 55px);
    filter: drop-shadow(0 10px 32px rgba(0, 0, 0, 0.06));
    transition: filter 0.35s ease, background-color 0.35s ease;
}

.testi-showcase-card:hover {
    background: rgba(229, 152, 25, 0.35);
    filter: drop-shadow(0 18px 44px rgba(229, 152, 25, 0.14));
}

.testi-slides-track {
    position: relative;
    width: 100%;
    clip-path: inherit;
    border-radius: inherit;
}

.testi-slide {
    display: none;
    opacity: 0;
}

.testi-slide.active {
    display: block;
    animation: testiFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes testiFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.testi-card-inner {
    background: #FFFFFF;
    padding: clamp(2.2rem, 4vw, 3.6rem) clamp(2rem, 3.8vw, 3.4rem);
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: clamp(2rem, 3.8vw, 3.4rem);
    align-items: center;
    min-height: 380px;
    clip-path: inherit;
    border-radius: inherit;
}

/* -------------------------------------------------------------
   Left Column: Chamfered Photo Frame
   ------------------------------------------------------------- */
.testi-photo-col {
    position: relative;
    display: flex;
    justify-content: center;
}

.testi-photo-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 320px;
    /* Matching top-left cut corner */
    clip-path: polygon(42px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 42px);
    border-radius: 0 20px 20px 20px;
    background: #E8D3BA;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.testi-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.testi-card-inner:hover .testi-photo-frame img {
    transform: scale(1.05);
}

/* -------------------------------------------------------------
   Right Column: Content & Review
   ------------------------------------------------------------- */
.testi-content-col {
    display: flex;
    flex-direction: column;
}

.testi-stars {
    display: flex;
    gap: 5px;
    font-size: 1.3rem;
    color: var(--ry-amber);
    margin-bottom: 1.35rem;
}

.testi-quote {
    font-size: clamp(1.02rem, 1.18vw, 1.18rem);
    line-height: 1.72;
    color: #101217;
    font-weight: 500;
    margin-bottom: 1.85rem;
    font-style: normal;
}

.testi-author-meta {
    display: flex;
    flex-direction: column;
}

.testi-author-name {
    font-size: 1.48rem;
    font-weight: 700;
    color: #101217;
    margin-bottom: 0.25rem;
    letter-spacing: -0.3px;
}

.testi-author-role {
    font-size: 0.88rem;
    color: #6D7586;
    font-weight: 500;
}

/* -------------------------------------------------------------
   Slide Indicator Dots
   ------------------------------------------------------------- */
.testi-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 2rem;
}

.testi-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #D6CEC5;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 0;
}

.testi-dot.active {
    width: 28px;
    border-radius: 12px;
    background-color: var(--ry-amber);
}

/* -------------------------------------------------------------
   Responsive Breakpoints for Testimonials
   ------------------------------------------------------------- */
@media (max-width: 860px) {
    .testi-slider-wrapper {
        flex-direction: column;
        gap: 1.5rem;
    }

    .testi-nav-btn {
        display: none;
    }

    .testi-card-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.2rem 1.8rem;
    }

    .testi-photo-frame {
        max-width: 280px;
        height: 280px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .testimonials-showcase-section {
        padding: 4rem 0;
    }

    .testi-main-title {
        font-size: 1.95rem;
    }

    .testi-quote {
        font-size: 0.98rem;
        line-height: 1.65;
    }

    .testi-author-name {
        font-size: 1.25rem;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceArrow {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(5px);
    }

    60% {
        transform: translateY(3px);
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(209, 0, 0, 0.35);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(209, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(209, 0, 0, 0);
    }
}

/* ==========================================================================
   Call to Action (CTA) Showcase Section (Directly Matching Reference Image)
   ========================================================================== */

.cta-showcase-section {
    position: relative;
    width: 100%;
    padding: clamp(3.5rem, 6vh, 5rem) 0;
    background: #FFFFFF;
}

.cta-container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Chamfered Card: Top-Left & Bottom-Right Diagonal Cut Geometry */
.cta-chamfer-card {
    position: relative;
    background: #F3EFEB;
    padding: clamp(3.2rem, 5.5vh, 4.8rem) clamp(2rem, 4.5vw, 4.2rem);
    clip-path: polygon(78px 0%,
            calc(100% - 18px) 0%,
            100% 18px,
            100% calc(100% - 78px),
            calc(100% - 78px) 100%,
            18px 100%,
            0% calc(100% - 18px),
            0% 78px);
    filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.04));
    overflow: hidden;
}

/* Watermark Decorative Corner Badges (3 Chamfered Badges Row) */
.cta-badge-group {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    z-index: 1;
}

.cta-badge-group.top-right {
    top: 24px;
    right: 36px;
}

.cta-badge-group.bottom-left {
    bottom: 24px;
    left: 36px;
}

.cta-oct-badge {
    width: 58px;
    height: 48px;
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
    transition: transform 0.3s ease;
}

.cta-oct-badge::after {
    content: '';
    position: absolute;
    inset: 2.5px;
    background: #F3EFEB;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

/* Centered Content */
.cta-card-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

/* Eyebrow */
.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #555D6E;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.cta-eyebrow .eyebrow-square {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-amber-hover) 100%);
    box-shadow: 0 2px 8px rgba(229, 152, 25, 0.45);
    display: inline-block;
}

/* Main Title: Clean Serif Brand Typography */
.cta-main-title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 3.8vw, 3.3rem);
    font-weight: 700;
    color: #101217;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.95rem;
    text-shadow: none !important;
    text-transform: none !important;
    filter: none !important;
}

.cta-main-title .text-gradient-crimson {
    text-shadow: none !important;
    filter: none !important;
}

/* Subtitle Narrative */
.cta-subtitle {
    font-family: var(--font-sans);
    font-size: clamp(0.94rem, 1.05vw, 1.04rem);
    line-height: 1.68;
    color: #525968;
    max-width: 670px;
    margin: 0 auto clamp(1.8rem, 3vh, 2.4rem);
}

/* Dual Action Buttons Group */
.cta-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
    flex-wrap: wrap;
}

/* Primary Button: Circuit Amber Warm Solid */
.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E59819 0%, #D4840D 100%);
    color: #FFFFFF !important;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.8rem 2.2rem;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(229, 152, 25, 0.28);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    cursor: pointer;
}

.btn-cta-primary:hover {
    background: linear-gradient(135deg, #F0A526 0%, #E59819 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(229, 152, 25, 0.42);
    color: #FFFFFF !important;
}

/* Secondary Button: Frosted Grey Surface */
.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.07);
    color: #2D3748 !important;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.8rem 2.2rem;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.09);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.btn-cta-secondary:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #101217 !important;
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.16);
}

/* Responsive Media Queries for CTA */
@media (max-width: 991px) {
    .cta-chamfer-card {
        padding: 3.2rem 2.2rem;
        clip-path: polygon(55px 0%,
                100% 0%,
                100% calc(100% - 55px),
                calc(100% - 55px) 100%,
                0% 100%,
                0% 55px);
    }

    .cta-oct-badge {
        width: 48px;
        height: 40px;
    }
}

@media (max-width: 768px) {
    .cta-badge-group {
        opacity: 0.45;
    }

    .cta-badge-group.top-right {
        top: 16px;
        right: 20px;
        gap: 6px;
    }

    .cta-badge-group.bottom-left {
        bottom: 16px;
        left: 20px;
        gap: 6px;
    }

    .cta-oct-badge {
        width: 38px;
        height: 32px;
    }

    .cta-chamfer-card {
        padding: 3rem 1.6rem;
        clip-path: polygon(40px 0%,
                100% 0%,
                100% calc(100% - 40px),
                calc(100% - 40px) 100%,
                0% 100%,
                0% 40px);
    }
}

@media (max-width: 576px) {
    .cta-showcase-section {
        padding: 2.5rem 0 1rem;
    }

    .cta-badge-group {
        display: none;
    }

    .cta-chamfer-card {
        padding: 2.6rem 1.25rem;
        clip-path: polygon(30px 0%,
                100% 0%,
                100% calc(100% - 30px),
                calc(100% - 30px) 100%,
                0% 100%,
                0% 30px);
        border-radius: 16px;
    }

    .cta-btn-group {
        flex-direction: column;
        width: 100%;
        gap: 0.85rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%;
        padding: 0.75rem 1.5rem;
    }
}

/* ==========================================================================
   Home Contact Showcase Section (Balanced Medium Scale & Brand Palette)
   ========================================================================== */

.home-contact-section {
    position: relative;
    width: 100%;
    padding: clamp(3.5rem, 5.5vh, 4.8rem) 0;
    background: #FFFFFF;
    overflow: hidden;
}

.home-contact-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* -------------------------------------------------------------
   Centered Header (Balanced Typography)
   ------------------------------------------------------------- */
.home-contact-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto clamp(1.8rem, 3vh, 2.6rem);
}

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--ry-crimson);
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}

.home-contact-title,
.home-contact-section .contact-main-title {
    font-family: var(--font-serif);
    font-size: clamp(2.1rem, 3.1vw, 2.9rem);
    font-weight: 700;
    color: #101217;
    letter-spacing: -0.02em;
    margin-bottom: 0.65rem;
    line-height: 1.2;
    text-shadow: none !important;
    text-transform: none !important;
    filter: none !important;
}

.home-contact-section .text-gradient-crimson {
    text-shadow: none !important;
    filter: none !important;
}

.contact-main-subtitle {
    font-family: var(--font-sans);
    font-size: clamp(0.92rem, 1vw, 1.02rem);
    line-height: 1.62;
    color: #525968;
    margin-bottom: 0;
}

/* -------------------------------------------------------------
   2-Column Grid: Proportional Medium Scale
   ------------------------------------------------------------- */
.home-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 3.2vw, 3rem);
    align-items: stretch;
    max-width: 1180px;
    margin: 0 auto;
}

/* Left Column: Chamfered Media Frame */
.contact-chamfer-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.contact-chamfer-media {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    flex: 1;
    /* Top-left angled cut corner (Chamfer) matching reference */
    clip-path: polygon(55px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 55px);
    border-radius: 0 26px 26px 26px;
    overflow: hidden;
    background: #F5EBE1;
    box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.07);
    transition: filter 0.35s ease, transform 0.35s ease;
}

.contact-chamfer-media:hover {
    filter: drop-shadow(0 16px 38px rgba(229, 152, 25, 0.2));
}

.contact-chamfer-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-chamfer-media:hover img,
.contact-chamfer-wrapper:hover .contact-chamfer-media img {
    transform: scale(1.04);
    filter: grayscale(0%);
}

/* Right Column: Chamfered Form Card with Brand Accents */
.contact-card-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    background: rgba(229, 152, 25, 0.4);
    padding: 1.5px;
    clip-path: polygon(55px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 55px);
    border-radius: 0 26px 26px 26px;
    filter: drop-shadow(0 14px 36px rgba(0, 0, 0, 0.05));
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, filter 0.35s ease;
}

.contact-card-wrapper:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-crimson) 100%);
    filter: drop-shadow(0 20px 42px rgba(229, 152, 25, 0.18));
}

.contact-form-card {
    width: 100%;
    background: #FFFFFF;
    border: none;
    clip-path: inherit;
    border-radius: inherit;
    padding: clamp(2rem, 2.8vw, 2.7rem) clamp(1.8rem, 2.5vw, 2.4rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: background 0.35s ease;
}

.contact-card-title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    font-weight: 700;
    color: #101217;
    margin-bottom: 1.25rem;
    letter-spacing: -0.3px;
    padding-top: 0.25rem;
}

.home-contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.92rem;
}

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

.contact-form-label {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    letter-spacing: -0.1px;
}

.contact-form-input,
.contact-form-textarea {
    width: 100%;
    background: #FAFAF9;
    border: 1.5px solid #E2E8F0;
    border-radius: 9px;
    padding: 0.7rem 0.95rem;
    font-family: var(--font-sans);
    font-size: 0.91rem;
    color: #101217;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    outline: none;
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
    color: #94A3B8;
    font-weight: 400;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
    background: #FFFFFF;
    border-color: var(--ry-crimson);
    box-shadow: 0 0 0 3px rgba(229, 37, 37, 0.12);
}

.contact-form-textarea {
    resize: vertical;
    min-height: 85px;
    height: 85px;
}

/* Terms Checkbox */
.contact-terms-group {
    margin-top: 0.15rem;
}

.contact-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
}

.contact-checkbox {
    width: 17px;
    height: 17px;
    accent-color: var(--ry-crimson);
    cursor: pointer;
    border-radius: 4px;
}

.terms-text {
    font-family: var(--font-sans);
    font-size: 0.84rem;
    color: #64748B;
    font-weight: 500;
}

/* Submit Button Row: Brand Color Palette */
.contact-submit-row {
    margin-top: 0.45rem;
    display: flex;
    align-items: center;
}

.btn-brand-submit {
    background: linear-gradient(135deg, var(--ry-crimson) 0%, #B81B1B 100%);
    border: 1px solid rgba(229, 37, 37, 0.5);
    border-radius: 9px;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 0.93rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 0.72rem 1.95rem;
    cursor: pointer;
    outline: none;
    box-shadow: 0 5px 16px rgba(229, 37, 37, 0.28);
    transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 110px;
}

.btn-brand-submit:hover {
    background: linear-gradient(135deg, #FF3838 0%, #D41A1A 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(229, 37, 37, 0.38);
}

.btn-brand-submit:active {
    transform: translateY(0);
}

.form-status-msg {
    margin-top: 0.7rem;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.48;
    padding: 0;
    border-radius: 7px;
    transition: all 0.25s ease;
}

.form-status-msg.error {
    color: #DC2626;
    padding: 0.6rem 0.8rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
}

.form-status-msg.success {
    color: #059669;
    padding: 0.6rem 0.8rem;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
}

/* -------------------------------------------------------------
   Responsive Breakpoints for Home Contact Section
   ------------------------------------------------------------- */
@media (max-width: 991px) {
    .home-contact-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }

    .contact-chamfer-media {
        min-height: 350px;
        max-height: 400px;
    }
}

@media (max-width: 576px) {
    .home-contact-section {
        padding: 3.5rem 0;
    }

    .home-contact-title,
    .home-contact-section .contact-main-title {
        font-size: 1.9rem;
    }

    .contact-card-wrapper {
        clip-path: polygon(42px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 42px);
        border-radius: 0 18px 18px 18px;
    }

    .contact-form-card {
        padding: 1.6rem 1.3rem;
        clip-path: inherit;
        border-radius: inherit;
    }

    .contact-chamfer-media {
        clip-path: polygon(42px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 42px);
        min-height: 280px;
    }
}

/* ==========================================================================
   Comprehensive Dark Theme Mode (body.dark-theme)
   Applies an executive, futuristic, high-contrast dark aesthetic across
   all light sections (About, Objectives, Initiatives, Testimonials,
   Contact, and CTA).
   ========================================================================== */

/* Universal Dark Canvas */
body.dark-theme {
    background-color: #08090C !important;
    color: #E2E8F0 !important;
}

body.dark-theme .header.scrolled {
    background-color: rgba(8, 9, 12, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* --------------------------------------------------------------------------
   1. About Showcase Section (#about)
   -------------------------------------------------------------------------- */
body.dark-theme .about-showcase-section {
    background: #08090C !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-theme .about-eyebrow {
    color: #CBD5E1 !important;
}

body.dark-theme .about-showcase-title {
    color: #FFFFFF !important;
}

body.dark-theme .about-showcase-desc {
    color: #94A3B8 !important;
}

body.dark-theme .about-showcase-desc strong {
    color: #FFFFFF !important;
}

body.dark-theme .feature-icon-box {
    background: rgba(229, 37, 37, 0.14) !important;
    border-color: rgba(229, 37, 37, 0.32) !important;
    color: #FF5252 !important;
}

body.dark-theme .dual-feature-item:hover .feature-icon-box {
    background: var(--ry-crimson) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(229, 37, 37, 0.45) !important;
}

body.dark-theme .feature-title {
    color: #FFFFFF !important;
}

body.dark-theme .feature-desc {
    color: #94A3B8 !important;
}

body.dark-theme .btn-ref-pill,
body.dark-theme .btn-about-contact {
    background: linear-gradient(135deg, #181D29 0%, #242D3F 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    color: #FFFFFF !important;
}

body.dark-theme .btn-ref-pill:hover,
body.dark-theme .btn-about-contact:hover {
    background: linear-gradient(135deg, #E52525 0%, #B81414 100%) !important;
    border-color: #E52525 !important;
    box-shadow: 0 10px 28px rgba(229, 37, 37, 0.45) !important;
}

body.dark-theme .about-stats-ribbon {
    background: #11141D !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

body.dark-theme .about-stats-ribbon:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(229, 152, 25, 0.35) !important;
}

body.dark-theme .ribbon-icon {
    color: #CBD5E1 !important;
}

body.dark-theme .stat-ribbon-item:hover .ribbon-icon {
    color: var(--ry-amber) !important;
}

body.dark-theme .ribbon-number {
    color: #FFFFFF !important;
}

body.dark-theme .ribbon-label {
    color: #94A3B8 !important;
}

body.dark-theme .collage-card {
    background: #141722 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45)) !important;
}

/* --------------------------------------------------------------------------
   2. Key Objectives Showcase Section (#objectives)
   -------------------------------------------------------------------------- */
body.dark-theme .objectives-showcase-section {
    background: #0C0E14 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-theme .obj-eyebrow {
    color: #CBD5E1 !important;
}

body.dark-theme .obj-main-title {
    color: #FFFFFF !important;
}

body.dark-theme .obj-header-lead {
    color: #94A3B8 !important;
}

body.dark-theme .chamfer-card {
    background: rgba(255, 255, 255, 0.08) !important;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.35)) !important;
}

body.dark-theme .chamfer-card:hover {
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-crimson) 100%) !important;
    filter: drop-shadow(0 18px 40px rgba(229, 152, 25, 0.28)) !important;
}

body.dark-theme .chamfer-card .card-inner {
    background: #11141D !important;
}

body.dark-theme .chamfer-card:hover .card-inner {
    background: #141824 !important;
}

body.dark-theme .card-big-num {
    color: #242A38 !important;
}

body.dark-theme .chamfer-card:hover .card-big-num {
    color: var(--ry-amber) !important;
}

body.dark-theme .card-title {
    color: #FFFFFF !important;
}

body.dark-theme .chamfer-card:hover .card-title {
    color: #FF5A5A !important;
}

body.dark-theme .card-desc {
    color: #94A3B8 !important;
}

/* --------------------------------------------------------------------------
   3. Major Initiatives Showcase Section (#programs)
   -------------------------------------------------------------------------- */
body.dark-theme .initiatives-showcase-section {
    background: #08090C !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-theme .initiatives-eyebrow {
    color: #CBD5E1 !important;
}

body.dark-theme .initiatives-main-title {
    color: #FFFFFF !important;
}

body.dark-theme .initiatives-subtitle {
    color: #94A3B8 !important;
}

body.dark-theme .initiatives-breadcrumb {
    color: #94A3B8 !important;
}

body.dark-theme .initiatives-breadcrumb strong {
    color: #FFFFFF !important;
}

body.dark-theme .init-backing-frame {
    background: #1C2230 !important;
}

body.dark-theme .init-chamfer-frame {
    background: #11141D !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

/* --------------------------------------------------------------------------
   4. Community Testimonials Showcase Section (#testimonials)
   -------------------------------------------------------------------------- */
body.dark-theme .testimonials-showcase-section {
    background: #0C0E14 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-theme .testi-eyebrow {
    color: #CBD5E1 !important;
}

body.dark-theme .testi-main-title {
    color: #FFFFFF !important;
}

body.dark-theme .testi-subtitle {
    color: #94A3B8 !important;
}

body.dark-theme .testi-nav-btn.prev {
    background-color: #1A1F2C !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .testi-nav-btn.prev:hover {
    background-color: #252C3D !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45) !important;
}

body.dark-theme .testi-showcase-card {
    background: rgba(255, 255, 255, 0.08) !important;
    filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.5)) !important;
}

body.dark-theme .testi-showcase-card:hover {
    background: rgba(229, 152, 25, 0.45) !important;
    filter: drop-shadow(0 18px 46px rgba(229, 152, 25, 0.2)) !important;
}

body.dark-theme .testi-card-inner {
    background: #11141D !important;
}

body.dark-theme .testi-quote {
    color: #E2E8F0 !important;
}

body.dark-theme .testi-author-name {
    color: #FFFFFF !important;
}

body.dark-theme .testi-author-role {
    color: #94A3B8 !important;
}

body.dark-theme .testi-photo-frame {
    background: #181C26 !important;
}

body.dark-theme .testi-dot {
    background: rgba(255, 255, 255, 0.2) !important;
}

body.dark-theme .testi-dot.active {
    background: var(--ry-amber) !important;
}

/* --------------------------------------------------------------------------
   5. Home Contact Showcase Section (#contact)
   -------------------------------------------------------------------------- */
body.dark-theme .home-contact-section {
    background: #08090C !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-theme .contact-eyebrow {
    color: #FF5A5A !important;
}

body.dark-theme .home-contact-title,
body.dark-theme .home-contact-section .contact-main-title {
    color: #FFFFFF !important;
}

body.dark-theme .contact-main-subtitle {
    color: #94A3B8 !important;
}

body.dark-theme .contact-card-wrapper {
    background: rgba(229, 152, 25, 0.35) !important;
    filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.55)) !important;
}

body.dark-theme .contact-card-wrapper:hover {
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-crimson) 100%) !important;
    filter: drop-shadow(0 20px 46px rgba(229, 152, 25, 0.28)) !important;
}

body.dark-theme .contact-form-card {
    background: #11141D !important;
    border: none !important;
}

body.dark-theme .contact-card-title {
    color: #FFFFFF !important;
}

body.dark-theme .contact-form-label {
    color: #CBD5E1 !important;
}

body.dark-theme .contact-form-input,
body.dark-theme .contact-form-textarea {
    background: #181C26 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

body.dark-theme .contact-form-input::placeholder,
body.dark-theme .contact-form-textarea::placeholder {
    color: #64748B !important;
}

body.dark-theme .contact-form-input:focus,
body.dark-theme .contact-form-textarea:focus {
    background: #1E2330 !important;
    border-color: var(--ry-crimson) !important;
    box-shadow: 0 0 0 3px rgba(229, 37, 37, 0.25) !important;
}

body.dark-theme .contact-terms-group label,
body.dark-theme .contact-terms-text {
    color: #94A3B8 !important;
}

body.dark-theme .contact-terms-group a {
    color: var(--ry-amber) !important;
}

body.dark-theme .contact-chamfer-media {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

/* --------------------------------------------------------------------------
   6. Call to Action Showcase Section (#cta)
   -------------------------------------------------------------------------- */
body.dark-theme .cta-showcase-section,
body:not(.light-theme) .cta-showcase-section {
    background: #08090C !important;
}

body.dark-theme .cta-chamfer-card,
body:not(.light-theme) .cta-chamfer-card {
    background: #11141D !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    filter: drop-shadow(0 16px 42px rgba(0, 0, 0, 0.55)) !important;
}

body.dark-theme .cta-oct-badge,
body:not(.light-theme) .cta-oct-badge {
    background: rgba(255, 255, 255, 0.12) !important;
}

body.dark-theme .cta-oct-badge::after,
body:not(.light-theme) .cta-oct-badge::after {
    background: #11141D !important;
}

body.dark-theme .cta-eyebrow,
body:not(.light-theme) .cta-eyebrow {
    color: #CBD5E1 !important;
}

body.dark-theme .cta-main-title,
body:not(.light-theme) .cta-main-title {
    color: #FFFFFF !important;
}

body.dark-theme .cta-subtitle,
body:not(.light-theme) .cta-subtitle {
    color: #94A3B8 !important;
}

body.dark-theme .btn-cta-secondary,
body:not(.light-theme) .btn-cta-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
}

body.dark-theme .btn-cta-secondary:hover,
body:not(.light-theme) .btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   7. Card & Component Surfaces Across Other Pages
   -------------------------------------------------------------------------- */
body.dark-theme .team-card,
body.dark-theme .program-card {
    background: #11141D !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .team-card h3,
body.dark-theme .program-card h3 {
    color: #FFFFFF !important;
}

body.dark-theme .team-card .member-role {
    color: #94A3B8 !important;
}

body.dark-theme .section-pulse-divider {
    --pulse-divider-color: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   8. Institutional Charter Showcase Section (#charter)
   -------------------------------------------------------------------------- */
body.dark-theme .charter-showcase-section {
    background: #08090C !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-theme .charter-eyebrow {
    color: #CBD5E1 !important;
}

body.dark-theme .charter-main-title {
    color: #FFFFFF !important;
}

body.dark-theme .charter-lead-narrative {
    color: #94A3B8 !important;
}

body.dark-theme .charter-quote-card {
    background: #11141D !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-left-color: var(--ry-crimson) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme .charter-quote-ref {
    color: #64748B !important;
}

body.dark-theme .charter-quote-text {
    color: #FFFFFF !important;
}

body.dark-theme .charter-quote-footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    color: #94A3B8 !important;
}

body.dark-theme .charter-assembly-tag {
    color: #94A3B8 !important;
}

body.dark-theme .charter-quote-values {
    color: #CBD5E1 !important;
}

body.dark-theme .charter-card {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .charter-card .charter-card-inner {
    background: #11141D !important;
}

body.dark-theme .charter-card:hover {
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-crimson) 100%) !important;
}

body.dark-theme .charter-card-num {
    color: #242938 !important;
}

body.dark-theme .charter-card:hover .charter-card-num {
    color: var(--ry-amber) !important;
}

body.dark-theme .directive-badge {
    background: rgba(229, 152, 25, 0.18) !important;
    color: var(--ry-amber) !important;
}

body.dark-theme .charter-card-title {
    color: #FFFFFF !important;
}

body.dark-theme .charter-card-desc {
    color: #94A3B8 !important;
}

body.dark-theme .charter-card-pill {
    background: #181C26 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-left-color: var(--ry-crimson) !important;
    color: #E2E8F0 !important;
}

/* ==========================================================================
   ABOUT US REDESIGN (Reference Architecture)
   ========================================================================== */

/* Hero Section: Single Screen Frame (Expansive & Uncongested) */
.about-hero-ref {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    box-sizing: border-box;
    padding: clamp(100px, 12vh, 130px) 0 clamp(24px, 3.5vh, 40px);
    background: radial-gradient(circle at 85% 20%, rgba(229, 152, 25, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 10% 80%, rgba(229, 37, 37, 0.03) 0%, transparent 35%),
        #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

body:not(.light-theme) .about-hero-ref {
    background: radial-gradient(circle at 85% 20%, rgba(229, 152, 25, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 12% 85%, rgba(229, 37, 37, 0.06) 0%, transparent 40%),
        var(--ry-dark-bg);
}

.about-hero-container {
    max-width: 1400px;
    width: 92%;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(1.4rem, 2.8vh, 2.5rem);
    height: 100%;
}

/* -------------------------------------------------------------
   Top Row: 2-Column Split Grid (Headline & Visual Showcase)
   ------------------------------------------------------------- */
.about-hero-grid {
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: clamp(2.5rem, 4.5vw, 5rem);
    align-items: center;
    flex: 1;
}

.about-ref-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-ref-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    letter-spacing: 0.03em;
}

.about-ref-breadcrumb .breadcrumb-bracket {
    color: #94A3B8;
    font-weight: 500;
}

.about-ref-breadcrumb .breadcrumb-link {
    color: #64748B;
    text-decoration: none;
    transition: color 0.2s ease;
}

.about-ref-breadcrumb .breadcrumb-link:hover {
    color: var(--ry-amber);
}

.about-ref-breadcrumb .breadcrumb-slash {
    color: #CBD5E1;
}

.about-ref-breadcrumb .breadcrumb-active {
    color: var(--ry-amber);
    font-weight: 700;
}

.about-hero-eyebrow {
    display: block;
    font-size: clamp(1.3rem, 2.2vw, 1.85rem);
    color: var(--amber-500, #E59819);
    font-weight: 400;
    margin-bottom: 0.45rem;
    letter-spacing: 0.4px;
    font-family: var(--font-serif);
    font-style: italic;
    line-height: 1.2;
}

body:not(.light-theme) .about-hero-eyebrow {
    color: #FBBF24;
    text-shadow: 0 2px 14px rgba(229, 152, 25, 0.35);
}

.about-ref-title {
    font-family: var(--font-serif);
    font-size: clamp(2.35rem, 3.8vw, 3.85rem);
    font-weight: 700;
    line-height: 1.12;
    color: #0F172A;
    letter-spacing: -0.025em;
    margin-bottom: 1.1rem;
}

body:not(.light-theme) .about-ref-title {
    color: #FFFFFF;
}

.about-ref-title .text-gradient-crimson {
    text-shadow: none !important;
    filter: none !important;
}

.about-ref-lead {
    font-size: clamp(0.98rem, 1.05vw, 1.12rem);
    line-height: 1.72;
    color: #475569;
    margin-bottom: 1.65rem;
    max-width: 660px;
}

body:not(.light-theme) .about-ref-lead {
    color: rgba(255, 255, 255, 0.82);
}

.about-ref-hero-actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.about-ref-hero-actions .btn-pill-amber,
.about-ref-hero-actions .btn-pill-crimson {
    padding: 0.85rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.btn-outline-clean {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.82rem 1.85rem;
    border-radius: 9999px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1.5px solid #CBD5E1;
    color: #1E293B;
    background: transparent;
    text-decoration: none;
    transition: all 0.25s ease;
}

body:not(.light-theme) .btn-outline-clean {
    border-color: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

.btn-outline-clean:hover {
    border-color: var(--ry-amber);
    color: var(--ry-amber);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(229, 152, 25, 0.18);
}

/* Right Visual Frame with Chamfer Cut & Floating Circular Badge */
.about-ref-visual-frame {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
}

.about-ref-visual-media {
    position: relative;
    width: 100%;
    clip-path: polygon(52px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 52px);
    border-radius: 0 28px 28px 28px;
    overflow: hidden;
    background: #12141A;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
    filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.12));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.about-ref-visual-media:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 24px 55px rgba(229, 152, 25, 0.25));
}

body:not(.light-theme) .about-ref-visual-media {
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.55);
    filter: drop-shadow(0 26px 60px rgba(0, 0, 0, 0.65));
}

.about-ref-visual-img {
    width: 100%;
    height: clamp(300px, 38vh, 410px);
    object-fit: cover;
    display: block;
    clip-path: polygon(52px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 52px);
    border-radius: 0 28px 28px 28px;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-ref-visual-media:hover .about-ref-visual-img {
    transform: scale(1.04);
}

/* Rotating Circular Badge */
.about-circular-badge-wrap {
    position: absolute;
    bottom: -22px;
    left: -22px;
    width: 120px;
    height: 120px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

body:not(.light-theme) .about-circular-badge-wrap {
    background: #151821;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}

.about-circular-badge-wrap:hover {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 20px 48px rgba(229, 152, 25, 0.4);
}

.circular-text-svg {
    width: 100%;
    height: 100%;
    animation: spinCircle 20s linear infinite;
    pointer-events: none;
}

.circular-text-svg text {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    fill: #1E293B;
    letter-spacing: 2.2px;
}

body:not(.light-theme) .circular-text-svg text {
    fill: #F1F5F9;
}

.circular-badge-center {
    position: absolute;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #E59819 0%, #CB8412 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.15rem;
    box-shadow: 0 6px 16px rgba(229, 152, 25, 0.45);
}

@keyframes spinCircle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* -------------------------------------------------------------
   Bottom Deck: Integrated Manifesto & 4-Metric Impact Counters
   ------------------------------------------------------------- */
.about-hero-deck {
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: clamp(1.4rem, 2.5vw, 2.2rem);
    align-items: stretch;
}

/* Base Deck Card Shell with Chamfer Shape & Border Gradient */
.about-deck-manifesto,
.about-deck-stats {
    position: relative;
    padding: 1.5px;
    /* Creates crisp continuous border along angled chamfer */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease, background 0.35s ease;
}

/* Left: Manifesto Card (Chamfer Top-Left Corner) */
.about-deck-manifesto {
    clip-path: polygon(34px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 34px);
    border-radius: 0 24px 24px 24px;
    background: linear-gradient(135deg, rgba(229, 152, 25, 0.55) 0%, rgba(229, 37, 37, 0.35) 50%, rgba(229, 152, 25, 0.2) 100%);
    filter: drop-shadow(0 12px 28px rgba(229, 152, 25, 0.1));
}

.about-deck-manifesto:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, #E59819 0%, #E52525 60%, #CB8412 100%);
    filter: drop-shadow(0 18px 38px rgba(229, 152, 25, 0.25));
}

body:not(.light-theme) .about-deck-manifesto {
    background: linear-gradient(135deg, rgba(229, 152, 25, 0.45) 0%, rgba(229, 37, 37, 0.25) 50%, rgba(255, 255, 255, 0.08) 100%);
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.5));
}

body:not(.light-theme) .about-deck-manifesto:hover {
    background: linear-gradient(135deg, #E59819 0%, #E52525 65%, #CB8412 100%);
    filter: drop-shadow(0 20px 45px rgba(229, 152, 25, 0.35));
}

/* Right: 4-Metric Stats Card (Chamfer Top-Right Corner) */
.about-deck-stats {
    clip-path: polygon(0% 0%, calc(100% - 34px) 0%, 100% 34px, 100% 100%, 0% 100%);
    border-radius: 24px 0 24px 24px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.15) 0%, rgba(229, 152, 25, 0.45) 55%, rgba(229, 37, 37, 0.3) 100%);
    filter: drop-shadow(0 12px 28px rgba(15, 23, 42, 0.07));
}

.about-deck-stats:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, #E52525 0%, #E59819 60%, #CB8412 100%);
    filter: drop-shadow(0 18px 38px rgba(229, 37, 37, 0.22));
}

body:not(.light-theme) .about-deck-stats {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(229, 152, 25, 0.35) 60%, rgba(229, 37, 37, 0.25) 100%);
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.5));
}

body:not(.light-theme) .about-deck-stats:hover {
    background: linear-gradient(135deg, #E52525 0%, #E59819 65%, #CB8412 100%);
    filter: drop-shadow(0 20px 45px rgba(229, 37, 37, 0.35));
}

/* Card Interior Content Container */
.about-deck-manifesto .deck-card-inner,
.about-deck-stats .deck-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    clip-path: inherit;
    border-radius: inherit;
    transition: background 0.35s ease;
}

.about-deck-manifesto .deck-card-inner {
    background: linear-gradient(145deg, #FFFFFF 0%, #FFFDF9 45%, #FFF8EE 100%);
    padding: clamp(1.2rem, 2vh, 1.85rem) clamp(1.5rem, 2.2vw, 2.4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body:not(.light-theme) .about-deck-manifesto .deck-card-inner {
    background: linear-gradient(145deg, #131722 0%, #0E1118 100%);
}

.about-deck-stats .deck-card-inner {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 55%, #F1F5F9 100%);
    padding: clamp(1.2rem, 2vh, 1.85rem) clamp(1.4rem, 2vw, 2rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: clamp(0.6rem, 1.1vw, 1.2rem);
    text-align: center;
}

body:not(.light-theme) .about-deck-stats .deck-card-inner {
    background: linear-gradient(145deg, #141824 0%, #0E1119 100%);
}

/* Manifesto Content Elements */
.manifesto-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #8D5B06;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

body:not(.light-theme) .manifesto-eyebrow,
body.dark-theme .manifesto-eyebrow {
    color: #F5A623;
}

.manifesto-eyebrow .eyebrow-square {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-amber-hover) 100%);
    box-shadow: 0 2px 8px rgba(229, 152, 25, 0.45);
    display: inline-block;
    flex-shrink: 0;
}

.manifesto-eyebrow-line {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, rgba(229, 152, 25, 0.7) 0%, rgba(229, 152, 25, 0) 100%);
    border-radius: 2px;
}

.manifesto-statement {
    font-family: var(--font-serif);
    font-size: clamp(0.95rem, 1.02vw, 1.08rem);
    font-weight: 400;
    line-height: 1.65;
    color: #1E293B;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

body:not(.light-theme) .manifesto-statement {
    color: #F8FAFC;
}

.manifesto-highlight {
    font-weight: 700;
    color: #B42318;
}

body:not(.light-theme) .manifesto-highlight {
    color: #FFFFFF;
    text-shadow: 0 0 12px rgba(229, 152, 25, 0.35);
}

.manifesto-faded {
    color: #64748B;
    font-weight: 400;
}

body:not(.light-theme) .manifesto-faded {
    color: rgba(255, 255, 255, 0.72);
}

/* 4-Metric Impact Counters */
.about-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    position: relative;
}

.about-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.4rem;
    top: 15%;
    height: 70%;
    width: 1.5px;
    background: linear-gradient(to bottom, transparent, rgba(229, 152, 25, 0.4) 35%, rgba(229, 37, 37, 0.3) 70%, transparent);
}

body:not(.light-theme) .about-stat-item:not(:last-child)::after {
    background: linear-gradient(to bottom, transparent, rgba(229, 152, 25, 0.45) 35%, rgba(229, 37, 37, 0.35) 70%, transparent);
}

.stat-big-num {
    font-size: clamp(2.05rem, 2.8vw, 2.9rem);
    font-weight: 800;
    font-family: var(--font-serif);
    background: linear-gradient(135deg, #CB8412 0%, #E52525 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.3rem;
}

body:not(.light-theme) .stat-big-num {
    background: linear-gradient(135deg, #FFB338 0%, #FF4D4D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(229, 152, 25, 0.3));
}

.stat-sub-label {
    font-size: clamp(0.72rem, 0.8vw, 0.84rem);
    font-weight: 700;
    color: #334155;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body:not(.light-theme) .stat-sub-label {
    color: rgba(255, 255, 255, 0.78);
}

/* -------------------------------------------------------------
   Feature Sections: Mission, Vision, History (Image 2 & 3)
   ------------------------------------------------------------- */
/* ==========================================================================
   Feature Sections — Unified Elegant Design System
   (Mission, Vision, History — matching How We Work aesthetic)
   ========================================================================== */

.about-feature-section {
    position: relative;
    padding: clamp(4.5rem, 8vh, 7rem) 0 clamp(4.5rem, 8vh, 7.5rem);
    background: #FFFFFF;
    transition: background 0.35s ease;
}

body:not(.light-theme) .about-feature-section,
body.dark-theme .about-feature-section {
    background: var(--ry-dark-bg);
}

.about-feature-section.alt-bg {
    background: #F8FAFC;
}

body:not(.light-theme) .about-feature-section.alt-bg,
body.dark-theme .about-feature-section.alt-bg {
    background: #0B0D12;
}

/* ---- Split Header Row (same pattern as How We Work) ---- */
.feature-header-row {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #555D6E;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

body:not(.light-theme) .feature-eyebrow,
body.dark-theme .feature-eyebrow {
    color: #CBD5E1;
}

.feature-eyebrow .eyebrow-square {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-amber-hover) 100%);
    box-shadow: 0 2px 8px rgba(229, 152, 25, 0.45);
    display: inline-block;
    flex-shrink: 0;
}

.feature-section-title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #101217;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin: 0;
}

body:not(.light-theme) .feature-section-title,
body.dark-theme .feature-section-title {
    color: #FFFFFF;
}

.feature-header-lead {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    line-height: 1.75;
    color: #525968;
    margin: 0;
}

body:not(.light-theme) .feature-header-lead,
body.dark-theme .feature-header-lead {
    color: #94A3B8;
}

/* ---- 2-Column Grid ---- */
.feature-content-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: center;
}

/* Flip variant: content on left, image on right */
.feature-content-grid--flip {
    grid-template-columns: 1.1fr 1fr;
}

/* ---- Feature Content Body ---- */
.feature-content-body {
    font-family: var(--font-sans);
    font-size: clamp(0.97rem, 1.02vw, 1.05rem);
    line-height: 1.8;
    color: #475569;
    margin-bottom: 1.8rem;
}

body:not(.light-theme) .feature-content-body,
body.dark-theme .feature-content-body {
    color: rgba(255, 255, 255, 0.72);
}

/* ---- Feature Checklist Column ---- */
.feature-checklist-column {
    display: flex;
    flex-direction: column;
}

/* ---- Chamfer Check Card Items ---- */
.feature-checklist-stack {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.feature-check-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.04);
    border-left: 2.5px solid rgba(229, 152, 25, 0.4);
    padding: 0.9rem 1.4rem;
    clip-path: polygon(0 0,
            calc(100% - 14px) 0,
            100% 14px,
            100% 100%,
            0 100%);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body:not(.light-theme) .feature-check-card,
body.dark-theme .feature-check-card {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: rgba(229, 152, 25, 0.3);
}

.feature-check-card:hover {
    background: rgba(229, 152, 25, 0.07);
    border-left-color: var(--ry-amber);
    transform: translateX(5px);
}

.fcc-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(229, 152, 25, 0.14);
    color: #D4840D;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

body:not(.light-theme) .fcc-icon,
body.dark-theme .fcc-icon {
    background: rgba(229, 152, 25, 0.18);
    color: #F5A623;
}

.feature-check-card:hover .fcc-icon {
    background: rgba(229, 152, 25, 0.22);
}

.fcc-text {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.4;
}

body:not(.light-theme) .fcc-text,
body.dark-theme .fcc-text {
    color: #E2E8F0;
}

/* ---- Keep old collage styles and add selectors ---- */
.about-collage-wrap {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Main Image Chamfer Frame */
.collage-main-frame {
    width: 82%;
    height: 480px;
    position: relative;
    clip-path: polygon(48px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 48px);
    border-radius: 0 22px 22px 22px;
    overflow: hidden;
    background: #12141A;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.12));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.about-collage-wrap:hover .collage-main-frame {
    transform: translateY(-4px);
    filter: drop-shadow(0 28px 65px rgba(0, 0, 0, 0.18));
}

body:not(.light-theme) .collage-main-frame,
body.dark-theme .collage-main-frame {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.55));
}

body:not(.light-theme) .about-collage-wrap:hover .collage-main-frame,
body.dark-theme .about-collage-wrap:hover .collage-main-frame {
    filter: drop-shadow(0 32px 75px rgba(229, 152, 25, 0.22));
}

.collage-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    clip-path: inherit;
    border-radius: inherit;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-collage-wrap:hover .collage-main-img {
    transform: scale(1.06);
}

/* Floating Overlapping Secondary Image Frame */
.collage-overlap-frame {
    position: absolute;
    width: 60%;
    height: 310px;
    background: #FFFFFF;
    padding: 5px;
    clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 36px);
    border-radius: 0 18px 18px 18px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18);
    filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.18));
    display: block;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.about-collage-wrap:hover .collage-overlap-frame {
    transform: translateY(-8px) scale(1.02);
    filter: drop-shadow(0 28px 65px rgba(229, 152, 25, 0.25));
}

body:not(.light-theme) .collage-overlap-frame,
body.dark-theme .collage-overlap-frame {
    background: #12141A;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.7));
}

.collage-overlap-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    clip-path: inherit;
    border-radius: inherit;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-collage-wrap:hover .collage-overlap-img {
    transform: scale(1.06);
}

/* Positioning variants */
.about-collage-wrap.pos-right .collage-overlap-frame {
    right: 0;
    bottom: -30px;
}

.about-collage-wrap.pos-left .collage-main-frame {
    margin-left: auto;
    clip-path: polygon(0% 0%, calc(100% - 48px) 0%, 100% 48px, 100% 100%, 0% 100%);
    border-radius: 22px 0 22px 22px;
}

.about-collage-wrap.pos-left .collage-overlap-frame {
    left: 0;
    bottom: -30px;
    clip-path: polygon(0% 0%, calc(100% - 36px) 0%, 100% 36px, 100% 100%, 0% 100%);
    border-radius: 18px 0 18px 18px;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .feature-header-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .feature-content-grid,
    .feature-content-grid--flip {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    /* On mobile, flip brings image below text — reset order */
    .feature-content-grid--flip .feature-checklist-column {
        order: 1;
    }

    .feature-content-grid--flip .about-collage-wrap {
        order: 2;
    }

    .about-collage-wrap {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .collage-main-frame {
        width: 90%;
        height: 320px;
        clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 36px);
        border-radius: 0 18px 18px 18px;
    }

    .about-collage-wrap.pos-left .collage-main-frame {
        clip-path: polygon(0% 0%, calc(100% - 36px) 0%, 100% 36px, 100% 100%, 0% 100%);
        border-radius: 18px 0 18px 18px;
    }

    .collage-overlap-frame {
        width: 60%;
        height: 210px;
        bottom: -20px;
        clip-path: polygon(28px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 28px);
        border-radius: 0 14px 14px 14px;
        padding: 4px;
    }

    .about-collage-wrap.pos-left .collage-overlap-frame {
        clip-path: polygon(0% 0%, calc(100% - 28px) 0%, 100% 28px, 100% 100%, 0% 100%);
        border-radius: 14px 0 14px 14px;
    }

    .feature-check-card:hover {
        transform: none;
    }
}

/* -------------------------------------------------------------
   How We Work (Why Builders Trust RoboYuwa - Reference Layout)
   ------------------------------------------------------------- */
.how-we-work-section {
    position: relative;
    padding: clamp(4.5rem, 8vh, 7rem) 0 clamp(4.5rem, 8vh, 7.5rem);
    background: #FFFFFF;
    transition: background 0.35s ease;
}

body:not(.light-theme) .how-we-work-section,
body.dark-theme .how-we-work-section {
    background: #090B0F;
}

/* Split Header Row */
.how-work-header-row {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.how-work-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #555D6E;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

body:not(.light-theme) .how-work-eyebrow,
body.dark-theme .how-work-eyebrow {
    color: #CBD5E1;
}

.how-work-eyebrow .eyebrow-square {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-amber-hover) 100%);
    box-shadow: 0 2px 8px rgba(229, 152, 25, 0.45);
    display: inline-block;
    flex-shrink: 0;
}

.how-work-title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #101217;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin: 0;
}

body:not(.light-theme) .how-work-title,
body.dark-theme .how-work-title {
    color: #FFFFFF;
}

.how-work-lead {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    line-height: 1.75;
    color: #525968;
    margin: 0;
}

body:not(.light-theme) .how-work-lead,
body.dark-theme .how-work-lead {
    color: #94A3B8;
}

/* 2-Column Grid */
.how-work-grid {
    display: grid;
    grid-template-columns: 1fr 1.18fr;
    gap: clamp(2rem, 4vw, 3.8rem);
    align-items: stretch;
}

/* Left Featured Visual: Top-Right & Bottom-Left Chamfer Cut, Top-Left & Bottom-Right Rounded */
.how-work-visual-frame {
    position: relative;
    width: 100%;
    min-height: 520px;
    height: 100%;
    clip-path: polygon(0 32px, 3px 20px, 10px 10px, 20px 3px, 32px 0,
            calc(100% - 90px) 0, 100% 90px,
            100% calc(100% - 32px), calc(100% - 3px) calc(100% - 20px), calc(100% - 10px) calc(100% - 10px), calc(100% - 20px) calc(100% - 3px), calc(100% - 32px) 100%,
            90px 100%, 0 calc(100% - 90px));
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.08));
    overflow: hidden;
    background: #0E1118;
}

body:not(.light-theme) .how-work-visual-frame,
body.dark-theme .how-work-visual-frame {
    filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.6));
}

.how-work-visual-img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.how-work-visual-frame:hover .how-work-visual-img {
    transform: scale(1.04);
}

/* Right Column: 3 Stacked Chamfer Cards */
.how-work-cards-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.4rem;
}

/* Chamfer Card: Top-Left & Bottom-Right Diagonal Cut, Top-Right & Bottom-Left Rounded */
.why-trust-card {
    position: relative;
    background: rgba(0, 0, 0, 0.07);
    padding: 1.5px;
    clip-path: polygon(42px 0,
            calc(100% - 22px) 0, calc(100% - 13px) 2.5px, calc(100% - 5px) 9px, 100% 22px,
            100% calc(100% - 42px),
            calc(100% - 42px) 100%,
            22px 100%, 9px calc(100% - 5px), 2.5px calc(100% - 13px), 0 calc(100% - 22px),
            0 42px);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.03));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease, background 0.3s ease;
}

body:not(.light-theme) .why-trust-card,
body.dark-theme .why-trust-card {
    background: rgba(255, 255, 255, 0.09);
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.45));
}

.why-trust-card:hover {
    transform: translateX(8px);
    background: linear-gradient(135deg, var(--ry-amber) 0%, var(--ry-crimson) 100%);
    filter: drop-shadow(0 14px 36px rgba(229, 152, 25, 0.2));
}

.why-trust-card-inner {
    background: #FAF8F5;
    padding: clamp(1.6rem, 2.6vh, 2.2rem) clamp(1.8rem, 2.8vw, 2.5rem);
    clip-path: polygon(42px 0,
            calc(100% - 22px) 0, calc(100% - 13px) 2.5px, calc(100% - 5px) 9px, 100% 22px,
            100% calc(100% - 42px),
            calc(100% - 42px) 100%,
            22px 100%, 9px calc(100% - 5px), 2.5px calc(100% - 13px), 0 calc(100% - 22px),
            0 42px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background 0.35s ease;
}

body:not(.light-theme) .why-trust-card-inner,
body.dark-theme .why-trust-card-inner {
    background: #11141D;
}

.why-trust-card-title {
    font-family: var(--font-sans);
    font-size: clamp(1.2rem, 1.55vw, 1.45rem);
    font-weight: 700;
    color: #101217;
    letter-spacing: -0.015em;
    margin-bottom: 0.55rem;
}

body:not(.light-theme) .why-trust-card-title,
body.dark-theme .why-trust-card-title {
    color: #FFFFFF;
}

.why-trust-card-desc {
    font-family: var(--font-sans);
    font-size: clamp(0.92rem, 0.98vw, 1rem);
    line-height: 1.65;
    color: #525968;
    margin: 0;
}

body:not(.light-theme) .why-trust-card-desc,
body.dark-theme .why-trust-card-desc {
    color: #94A3B8;
}

/* Responsive Queries */
@media (max-width: 991px) {
    .how-work-header-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

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

    .how-work-visual-frame,
    .how-work-visual-img {
        min-height: 380px;
        height: 380px;
    }
}

@media (max-width: 640px) {
    .how-work-visual-frame {
        clip-path: polygon(0 22px, 2px 14px, 7px 7px, 14px 2px, 22px 0,
                calc(100% - 60px) 0, 100% 60px,
                100% calc(100% - 22px), calc(100% - 2px) calc(100% - 14px), calc(100% - 7px) calc(100% - 7px), calc(100% - 14px) calc(100% - 2px), calc(100% - 22px) 100%,
                60px 100%, 0 calc(100% - 60px));
        min-height: 300px;
        height: 300px;
    }

    .how-work-visual-img {
        min-height: 300px;
        height: 300px;
    }

    .why-trust-card,
    .why-trust-card-inner {
        clip-path: polygon(30px 0,
                calc(100% - 16px) 0, 100% 16px,
                100% calc(100% - 30px),
                calc(100% - 30px) 100%,
                16px 100%, 0 calc(100% - 16px),
                0 30px);
    }

    .why-trust-card:hover {
        transform: none;
    }
}

/* -------------------------------------------------------------
   Call To Action & Team Integration
   ------------------------------------------------------------- */
.about-cta-section {
    padding: 95px 0;
    background: #FFFFFF;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body:not(.light-theme) .about-cta-section {
    background: #08090C;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-cta-box {
    background: linear-gradient(135deg, rgba(229, 37, 37, 0.08) 0%, rgba(229, 152, 25, 0.08) 100%);
    border: 1px solid rgba(229, 152, 25, 0.25);
    border-radius: 24px;
    padding: 4rem 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    position: relative;
    overflow: hidden;
}

body:not(.light-theme) .about-cta-box {
    background: linear-gradient(135deg, rgba(229, 37, 37, 0.15) 0%, rgba(229, 152, 25, 0.12) 100%), #12141C;
    border-color: rgba(229, 152, 25, 0.3);
}

.about-cta-content h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.02em;
    margin-bottom: 0.8rem;
}

body:not(.light-theme) .about-cta-content h3 {
    color: #FFFFFF;
}

.about-cta-content p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #475569;
    max-width: 600px;
}

body:not(.light-theme) .about-cta-content p {
    color: rgba(255, 255, 255, 0.8);
}

.about-cta-actions {
    display: flex;
    gap: 1.2rem;
    flex-shrink: 0;
}

/* Responsive Breakpoints */
@media (max-height: 800px) and (min-width: 1025px) {
    .about-hero-ref {
        padding: clamp(90px, 11vh, 105px) 0 clamp(16px, 2.5vh, 26px);
    }

    .about-hero-container {
        gap: clamp(1rem, 2vh, 1.5rem);
    }

    .about-ref-title {
        font-size: clamp(2.1rem, 3.2vw, 2.9rem);
        margin-bottom: 0.6rem;
    }

    .about-ref-lead {
        margin-bottom: 1.1rem;
        line-height: 1.55;
    }

    .about-ref-visual-img {
        height: clamp(250px, 32vh, 310px);
    }

    .about-deck-manifesto .deck-card-inner,
    .about-deck-stats .deck-card-inner {
        padding: clamp(0.95rem, 1.4vh, 1.3rem) clamp(1.2rem, 1.8vw, 1.8rem);
    }

    .stat-big-num {
        font-size: clamp(1.75rem, 2.2vw, 2.2rem);
    }
}

@media (max-width: 1024px) {
    .about-hero-ref {
        min-height: auto;
        height: auto;
        padding: 120px 0 60px;
    }

    .about-hero-grid,
    .about-feature-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-ref-visual-frame {
        max-width: 500px;
        margin: 0 auto;
    }

    .about-ref-visual-img {
        height: 330px;
    }

    .about-hero-deck {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .about-collage-wrap {
        max-width: 100%;
    }

    .collage-main-frame {
        width: 85%;
        height: 420px;
    }

    .collage-overlap-frame {
        width: 55%;
        height: 270px;
    }


    .about-cta-box {
        flex-direction: column;
        text-align: center;
        padding: 3rem 2rem;
    }

    .about-cta-actions {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .about-hero-ref {
        padding: 105px 0 45px;
    }

    .about-ref-visual-media {
        clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 36px);
        border-radius: 0 20px 20px 20px;
    }

    .about-ref-visual-img {
        height: 250px;
        clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 36px);
        border-radius: 0 20px 20px 20px;
    }

    .about-circular-badge-wrap {
        width: 95px;
        height: 95px;
        bottom: -16px;
        left: -12px;
    }

    .circular-badge-center {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }

    .about-deck-manifesto {
        clip-path: polygon(24px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 24px);
        border-radius: 0 18px 18px 18px;
    }

    .about-deck-stats {
        clip-path: polygon(0% 0%, calc(100% - 24px) 0%, 100% 24px, 100% 100%, 0% 100%);
        border-radius: 18px 0 18px 18px;
    }

    .about-deck-stats .deck-card-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 0.75rem;
        padding: 1.25rem 1rem;
    }

    .about-stat-item:nth-child(2)::after {
        display: none;
    }

    .about-stat-item:not(:last-child)::after {
        right: -0.375rem;
    }

    .stat-big-num {
        font-size: 1.55rem;
    }

    .collage-main-frame {
        width: 90%;
        height: 320px;
        clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 36px);
        border-radius: 0 18px 18px 18px;
    }

    .about-collage-wrap.pos-left .collage-main-frame {
        clip-path: polygon(0% 0%, calc(100% - 36px) 0%, 100% 36px, 100% 100%, 0% 100%);
        border-radius: 18px 0 18px 18px;
    }

    .collage-overlap-frame {
        width: 60%;
        height: 210px;
        bottom: -20px;
        clip-path: polygon(28px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 28px);
        border-radius: 0 14px 14px 14px;
        padding: 4px;
    }

    .about-collage-wrap.pos-left .collage-overlap-frame {
        clip-path: polygon(0% 0%, calc(100% - 28px) 0%, 100% 28px, 100% 100%, 0% 100%);
        border-radius: 14px 0 14px 14px;
    }


    .about-cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .about-cta-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   OUR TEAM PAGE REDESIGN (Reference Architecture)
   ========================================================================== */

/* Hero Section */
.team-hero-ref {
    position: relative;
    padding: 170px 0 70px;
    background: #FFFFFF;
    overflow: hidden;
}

body:not(.light-theme) .team-hero-ref {
    background: var(--ry-dark-bg);
}

/* Team Dedicated Sections (Advisory, Executive, Department Heads) */
.team-section {
    position: relative;
    padding: clamp(60px, 7vw, 95px) 0 clamp(75px, 8vw, 110px);
    background: #FFFFFF;
    transition: background 0.35s ease;
}

body:not(.light-theme) .team-section {
    background: var(--ry-dark-bg);
}

.team-section.alt-bg {
    background: #F8FAFC;
}

body:not(.light-theme) .team-section.alt-bg {
    background: #0B0D13;
}

.team-sec-header {
    text-align: center;
    max-width: 740px;
    margin: 0 auto clamp(2.8rem, 5vw, 4.2rem);
}

.team-sec-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ry-amber);
    margin-bottom: 0.7rem;
}

.team-sec-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 0.85rem;
}

body:not(.light-theme) .team-sec-title {
    color: #FFFFFF;
}

.team-sec-desc {
    font-size: 1.02rem;
    line-height: 1.68;
    color: #555D6E;
    margin: 0 auto;
}

body:not(.light-theme) .team-sec-desc {
    color: rgba(255, 255, 255, 0.72);
}

/* 2-Column Centered Cards Grid for Advisory Board */
.team-grid-advisory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
    gap: 3.5rem 3rem;
    margin: 0 auto;
    max-width: 900px;
}

@media (max-width: 768px) {
    .team-grid-advisory {
        grid-template-columns: 1fr;
    }
}

/* 5-Card Layout for Executive and Department Heads */
.team-grid-5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem 2.5rem;
}

@media (min-width: 1024px) {
    .team-grid-5 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3.5rem 2.5rem;
    }

    .team-grid-5 .team-card-ref {
        width: calc((100% - 5rem) / 3);
        max-width: 380px;
    }
}

@media (max-width: 991px) and (min-width: 641px) {
    .team-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .team-grid-5 {
        grid-template-columns: 1fr;
    }
}

.team-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: flex-end;
    margin-bottom: 3.5rem;
}

.team-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748B;
    margin-bottom: 1.2rem;
}

body:not(.light-theme) .team-hero-eyebrow {
    color: rgba(255, 255, 255, 0.75);
}

.eyebrow-square-ref {
    width: 14px;
    height: 14px;
    background: var(--ry-amber);
    background: linear-gradient(135deg, #F5A623 0%, #D48813 100%);
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(229, 152, 25, 0.4);
}

.team-ref-title {
    font-size: clamp(2.5rem, 4.8vw, 4.2rem);
    font-weight: 800;
    line-height: 1.08;
    color: #0F172A;
    letter-spacing: -0.025em;
}

body:not(.light-theme) .team-ref-title {
    color: #FFFFFF;
}

.team-ref-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
}

.team-ref-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #475569;
}

body:not(.light-theme) .team-ref-lead {
    color: rgba(255, 255, 255, 0.78);
}

.btn-outline-pill,
.hero-pill-jump {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.8rem;
    border-radius: 9999px;
    font-size: 0.92rem;
    font-weight: 600;
    border: 1.5px solid #CBD5E1;
    color: #1E293B;
    background: transparent;
    text-decoration: none;
    transition: all 0.25s ease;
}

body:not(.light-theme) .btn-outline-pill,
body:not(.light-theme) .hero-pill-jump {
    border-color: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

.btn-outline-pill:hover,
.hero-pill-jump:hover {
    border-color: var(--ry-amber);
    background: rgba(229, 152, 25, 0.08);
    color: var(--ry-amber);
    transform: translateY(-2px);
}

/* Category Filter Tabs */
.team-filter-nav {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 4rem;
}

body:not(.light-theme) .team-filter-nav {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.team-filter-btn {
    padding: 0.65rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #64748B;
    background: #F1F5F9;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
}

body:not(.light-theme) .team-filter-btn {
    background: #141720;
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.06);
}

.team-filter-btn:hover {
    color: #0F172A;
    background: #E2E8F0;
}

body:not(.light-theme) .team-filter-btn:hover {
    color: #FFFFFF;
    background: #1C212E;
}

.team-filter-btn.active {
    background: var(--ry-amber);
    background: linear-gradient(135deg, #F5A623 0%, #D48813 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(229, 152, 25, 0.35);
}

body:not(.light-theme) .team-filter-btn.active {
    background: linear-gradient(135deg, #F5A623 0%, #D48813 100%);
    color: #FFFFFF;
}

/* Team Grid & Chamfered Cards matching Reference */
.team-grid-ref {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem 2.5rem;
    margin-bottom: 6rem;
}

/* Dual-Layer Chamfered Card Chassis for Team Members (Matching Other Pages) */
.team-card-ref {
    position: relative;
    padding: 2px;
    clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
    background: #B9C4D1;
    display: flex;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease;
}

body:not(.light-theme) .team-card-ref,
body.dark-theme .team-card-ref {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.team-card-ref:hover {
    transform: translateY(-7px);
    background: linear-gradient(135deg, var(--ry-crimson) 0%, var(--ry-amber) 100%);
    box-shadow: 0 22px 55px rgba(229, 37, 37, 0.18);
}

body:not(.light-theme) .team-card-ref:hover,
body.dark-theme .team-card-ref:hover {
    background: linear-gradient(135deg, var(--ry-crimson) 0%, var(--ry-amber) 100%);
    box-shadow: 0 24px 60px rgba(229, 37, 37, 0.28);
}

.team-card-ref.hidden {
    display: none;
}

/* Inner Card Container */
.team-card-inner {
    width: 100%;
    background: #FFFFFF;
    clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
    padding: clamp(1.2rem, 1.8vw, 1.5rem);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: background 0.35s ease;
}

body:not(.light-theme) .team-card-inner,
body.dark-theme .team-card-inner {
    background: #11141E;
}

/* Chamfered Image Container inside the card */
.team-card-frame {
    position: relative;
    width: 100%;
    height: 330px;
    background: #F3F4F6;
    clip-path: polygon(20px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 20px);
    border-radius: 0 16px 16px 16px;
    overflow: hidden;
    margin-bottom: 1.3rem;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

body:not(.light-theme) .team-card-frame,
body.dark-theme .team-card-frame {
    background: #161A26;
}

.team-card-ref:hover .team-card-frame {
    transform: translateY(-3px);
}

.team-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-card-ref:hover .team-card-img {
    transform: scale(1.05);
}

/* Department Badge */
.team-card-dept-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.32rem 0.75rem;
    border-radius: 9999px;
    color: #1E293B;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

body:not(.light-theme) .team-card-dept-tag,
body.dark-theme .team-card-dept-tag {
    background: rgba(18, 21, 30, 0.94);
    color: #E2E8F0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Card Content Info */
.team-card-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.team-card-name {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.18;
    margin-bottom: 0.3rem;
    letter-spacing: -0.015em;
}

body:not(.light-theme) .team-card-name,
body.dark-theme .team-card-name {
    color: #FFFFFF;
}

.team-card-role {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ry-amber);
    margin-bottom: 0.75rem;
}

body:not(.light-theme) .team-card-role,
body.dark-theme .team-card-role {
    color: #FBBF24;
}

.team-card-responsibilities {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #555D6E;
    margin-bottom: 0.5rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body:not(.light-theme) .team-card-responsibilities,
body.dark-theme .team-card-responsibilities {
    color: rgba(255, 255, 255, 0.7);
}

/* Social Icon Strip */
.team-card-socials {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    margin-top: auto;
}

body:not(.light-theme) .team-card-socials,
body.dark-theme .team-card-socials {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.team-social-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F1F5F9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

body:not(.light-theme) .team-social-link,
body.dark-theme .team-social-link {
    background: #181C28;
    color: rgba(255, 255, 255, 0.7);
}

.team-social-link:hover {
    background: var(--ry-amber);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 152, 25, 0.35);
}

/* -------------------------------------------------------------
   Interdepartmental Collaboration Matrix & Governance (From Docs)
   ------------------------------------------------------------- */
.team-governance-section {
    padding: 100px 0;
    background: #F8FAFC;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Cross-Functional Governance Matrix (Interdepartmental Synergies & Workflows)
   ========================================================================== */

.gov-matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
}

/* Dual-Layer Chamfered Card Chassis (Matching Other Pages) */
.gov-matrix-card {
    position: relative;
    padding: 2px;
    clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
    background: #B9C4D1;
    display: flex;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease;
}

body:not(.light-theme) .gov-matrix-card,
body.dark-theme .gov-matrix-card {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.gov-matrix-card:hover {
    transform: translateY(-7px);
    background: linear-gradient(135deg, var(--ry-crimson) 0%, var(--ry-amber) 100%);
    box-shadow: 0 22px 55px rgba(229, 37, 37, 0.2);
}

body:not(.light-theme) .gov-matrix-card:hover,
body.dark-theme .gov-matrix-card:hover {
    background: linear-gradient(135deg, var(--ry-crimson) 0%, var(--ry-amber) 100%);
    box-shadow: 0 24px 60px rgba(229, 37, 37, 0.3);
}

/* Inner Card Container */
.gov-matrix-inner {
    width: 100%;
    background: #FFFFFF;
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    padding: clamp(1.8rem, 2.3vw, 2.3rem);
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    box-sizing: border-box;
    transition: background 0.35s ease;
}

body:not(.light-theme) .gov-matrix-inner,
body.dark-theme .gov-matrix-inner {
    background: #11141E;
}

.gov-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

/* Octagonal Icon Box */
.gov-icon-oct {
    width: 44px;
    height: 44px;
    background: rgba(229, 152, 25, 0.1);
    color: var(--ry-amber);
    border: 1px solid rgba(229, 152, 25, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    transition: all 0.35s ease;
    flex-shrink: 0;
}

body:not(.light-theme) .gov-icon-oct,
body.dark-theme .gov-icon-oct {
    background: rgba(229, 152, 25, 0.15);
    border-color: rgba(229, 152, 25, 0.35);
    color: #FBBF24;
}

.gov-matrix-card:hover .gov-icon-oct {
    background: var(--ry-amber);
    color: #FFFFFF;
    transform: rotate(45deg);
    border-color: var(--ry-amber);
    box-shadow: 0 4px 14px rgba(229, 152, 25, 0.4);
}

.gov-matrix-card:hover .gov-icon-oct i {
    transform: rotate(-45deg);
    transition: transform 0.35s ease;
}

.gov-icon-oct i {
    transition: transform 0.35s ease;
}

/* Synergy Pod Pill */
.gov-synergy-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ry-amber);
    background: rgba(229, 152, 25, 0.09);
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    border: 1px solid rgba(229, 152, 25, 0.22);
}

body:not(.light-theme) .gov-synergy-badge,
body.dark-theme .gov-synergy-badge {
    background: rgba(229, 152, 25, 0.14);
    color: #FBBF24;
    border-color: rgba(229, 152, 25, 0.3);
}

.gov-card-title {
    font-family: var(--font-serif);
    font-size: 1.32rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0;
}

body:not(.light-theme) .gov-card-title,
body.dark-theme .gov-card-title {
    color: #FFFFFF;
}

.gov-card-desc {
    font-size: 0.92rem;
    line-height: 1.66;
    color: #555D6E;
    margin: 0;
    flex-grow: 1;
}

body:not(.light-theme) .gov-card-desc,
body.dark-theme .gov-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

.gov-card-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    margin-top: auto;
    display: flex;
    align-items: center;
}

body:not(.light-theme) .gov-card-footer,
body.dark-theme .gov-card-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.gov-deliverable-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #10B981;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.22);
    padding: 0.38rem 0.85rem;
    border-radius: 9999px;
    width: fit-content;
}

body:not(.light-theme) .gov-deliverable-pill,
body.dark-theme .gov-deliverable-pill {
    background: rgba(16, 185, 129, 0.14);
    color: #34D399;
    border-color: rgba(52, 211, 153, 0.3);
}

/* Responsive Rules */
@media (max-width: 1024px) {
    .team-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .team-grid-ref {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 1.8rem;
    }

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

@media (max-width: 640px) {
    .team-hero-ref {
        padding: 130px 0 50px;
    }

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

    .team-card-frame {
        height: 350px;
    }

    .gov-matrix-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Programs & Initiatives Redesign - Professional Editorial Design System
   ========================================================================== */

.prog-hero-ref {
    position: relative;
    padding: 160px 0 70px;
    background: #FFFFFF;
    overflow: hidden;
}

body:not(.light-theme) .prog-hero-ref {
    background: var(--ry-dark-bg);
}

.prog-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: flex-end;
    margin-bottom: 3.5rem;
}

.prog-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748B;
    margin-bottom: 1.2rem;
}

body:not(.light-theme) .prog-hero-eyebrow {
    color: rgba(255, 255, 255, 0.75);
}

.prog-ref-title {
    font-size: clamp(2.5rem, 4.8vw, 4.2rem);
    font-weight: 800;
    line-height: 1.08;
    color: #0F172A;
    letter-spacing: -0.025em;
}

body:not(.light-theme) .prog-ref-title {
    color: #FFFFFF;
}

.prog-ref-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
}

.prog-ref-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #475569;
}

body:not(.light-theme) .prog-ref-lead {
    color: rgba(255, 255, 255, 0.78);
}

/* -------------------------------------------------------------
   Impact Counter Ribbon (Verified Documentation Figures)
   ------------------------------------------------------------- */
.prog-stats-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
    padding: 1.8rem 2.2rem;
    background: #F8FAFC;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}

body:not(.light-theme) .prog-stats-ribbon {
    background: #11141E;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.prog-stat-item {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.prog-stat-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(229, 152, 25, 0.12);
    color: var(--ry-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.prog-stat-details {
    display: flex;
    flex-direction: column;
}

.prog-stat-num {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: #0F172A;
    letter-spacing: -0.02em;
}

body:not(.light-theme) .prog-stat-num {
    color: #FFFFFF;
}

.prog-stat-lbl {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.2rem;
}

body:not(.light-theme) .prog-stat-lbl {
    color: rgba(255, 255, 255, 0.65);
}

/* -------------------------------------------------------------
   Program Filter Navigation Tabs
   ------------------------------------------------------------- */
.prog-filter-nav {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 3.5rem;
}

body:not(.light-theme) .prog-filter-nav {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.prog-filter-btn {
    padding: 0.65rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #64748B;
    background: #F1F5F9;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
}

body:not(.light-theme) .prog-filter-btn {
    background: #141720;
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.06);
}

.prog-filter-btn:hover {
    color: #0F172A;
    background: #E2E8F0;
}

body:not(.light-theme) .prog-filter-btn:hover {
    color: #FFFFFF;
    background: #1C212E;
}

.prog-filter-btn.active {
    background: linear-gradient(135deg, #F5A623 0%, #D48813 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(229, 152, 25, 0.35);
}

body:not(.light-theme) .prog-filter-btn.active {
    background: linear-gradient(135deg, #F5A623 0%, #D48813 100%);
    color: #FFFFFF;
}

/* -------------------------------------------------------------
   Program Cards Grid (Architectural Cards with Media)
   ------------------------------------------------------------- */
.prog-grid-ref {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
    margin-bottom: 5rem;
}

.prog-card-ref {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

body:not(.light-theme) .prog-card-ref {
    background: #131620;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.prog-card-ref:hover {
    transform: translateY(-8px);
    border-color: rgba(229, 152, 25, 0.4);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

body:not(.light-theme) .prog-card-ref:hover {
    box-shadow: 0 22px 50px rgba(229, 152, 25, 0.18);
}

.prog-card-ref.hidden {
    display: none;
}

.prog-card-media {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: #0E1117;
}

.prog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.prog-card-ref:hover .prog-card-img {
    transform: scale(1.06);
}

/* Badge States */
.prog-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    z-index: 2;
}

.prog-badge.amber {
    background: rgba(229, 152, 25, 0.92);
    color: #FFFFFF;
}

.prog-badge.green {
    background: rgba(39, 174, 96, 0.92);
    color: #FFFFFF;
}

.prog-badge.crimson {
    background: rgba(229, 37, 37, 0.92);
    color: #FFFFFF;
}

.prog-badge.blue {
    background: rgba(41, 128, 185, 0.92);
    color: #FFFFFF;
}

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

.prog-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0F172A;
    margin-bottom: 0.75rem;
}

body:not(.light-theme) .prog-card-title {
    color: #FFFFFF;
}

.prog-card-desc {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #64748B;
    margin-bottom: 1.4rem;
}

body:not(.light-theme) .prog-card-desc {
    color: rgba(255, 255, 255, 0.72);
}

.prog-card-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.prog-card-meta li {
    font-size: 0.84rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
}

body:not(.light-theme) .prog-card-meta li {
    color: rgba(255, 255, 255, 0.65);
}

.prog-card-meta li i {
    color: var(--ry-amber);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

.prog-card-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body:not(.light-theme) .prog-card-actions {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.prog-btn-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ry-amber);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

.prog-btn-link:hover {
    color: #D48813;
    gap: 10px;
}

.prog-tag-pill {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    background: #F1F5F9;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
}

body:not(.light-theme) .prog-tag-pill {
    background: #1A1E2B;
    color: #94A3B8;
}

/* -------------------------------------------------------------
   RoboLearn 12-Week Curriculum Showcase (4 Phased Grid)
   ------------------------------------------------------------- */
.curriculum-section {
    padding: 100px 0;
    background: #F8FAFC;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body:not(.light-theme) .curriculum-section {
    background: #0C0E14;
    border-color: rgba(255, 255, 255, 0.08);
}

.curriculum-phase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3.5rem;
}

.curriculum-phase-card {
    background: #FFFFFF;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    padding: 2rem 1.6rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body:not(.light-theme) .curriculum-phase-card {
    background: #131620;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.curriculum-phase-card:hover {
    transform: translateY(-6px);
    border-color: var(--ry-amber);
    box-shadow: 0 16px 36px rgba(229, 152, 25, 0.14);
}

.phase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.phase-step-pill {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ry-amber);
    background: rgba(229, 152, 25, 0.1);
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
}

body:not(.light-theme) .phase-step-pill {
    background: rgba(229, 152, 25, 0.18);
}

.phase-duration {
    font-size: 0.8rem;
    font-weight: 600;
    color: #94A3B8;
}

.phase-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
}

body:not(.light-theme) .phase-title {
    color: #FFFFFF;
}

.phase-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #64748B;
}

body:not(.light-theme) .phase-desc {
    color: rgba(255, 255, 255, 0.7);
}

.phase-modules-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #475569;
}

body:not(.light-theme) .phase-modules-list {
    color: rgba(255, 255, 255, 0.65);
}

.phase-modules-list li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.phase-modules-list li i {
    color: #27AE60;
    font-size: 0.8rem;
}

.phase-deliverable-box {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ry-amber);
}

body:not(.light-theme) .phase-deliverable-box {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------
   Resource Allocation & Governance (Treasurer's Report)
   ------------------------------------------------------------- */
.resource-alloc-section {
    padding: 90px 0;
    background: #FFFFFF;
}

body:not(.light-theme) .resource-alloc-section {
    background: var(--ry-dark-bg);
}

.resource-alloc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3.5rem;
}

.alloc-card {
    background: #F8FAFC;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    transition: transform 0.3s ease;
}

body:not(.light-theme) .alloc-card {
    background: #11141E;
    border-color: rgba(255, 255, 255, 0.08);
}

.alloc-card:hover {
    transform: translateY(-4px);
}

.alloc-pct {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ry-amber);
}

.alloc-bar-track {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 9999px;
    overflow: hidden;
}

body:not(.light-theme) .alloc-bar-track {
    background: rgba(255, 255, 255, 0.1);
}

.alloc-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #F5A623 0%, #D48813 100%);
}

.alloc-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0F172A;
}

body:not(.light-theme) .alloc-title {
    color: #FFFFFF;
}

.alloc-desc {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #64748B;
}

body:not(.light-theme) .alloc-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------------------
   Interactive Syllabus Modal
   ------------------------------------------------------------- */
.syllabus-modal-dialog {
    max-width: 820px;
    width: 90%;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

body:not(.light-theme) .syllabus-modal-dialog {
    background: #131620;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.syllabus-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.syllabus-table th,
.syllabus-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body:not(.light-theme) .syllabus-table th,
body:not(.light-theme) .syllabus-table td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.syllabus-table th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--ry-amber);
    background: rgba(229, 152, 25, 0.06);
}

body:not(.light-theme) .syllabus-table th {
    background: rgba(229, 152, 25, 0.12);
}

/* -------------------------------------------------------------
   Responsive Breakpoints
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .prog-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .prog-stats-ribbon {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

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

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

    .resource-alloc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .prog-hero-ref {
        padding: 130px 0 50px;
    }

    .prog-stats-ribbon {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    .prog-grid-ref {
        grid-template-columns: 1fr;
    }

    .curriculum-phase-grid {
        grid-template-columns: 1fr;
    }

    .syllabus-modal-dialog {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   ROBOYUWA LEGAL & POLICY SUITE (Privacy, Terms, Cookies)
   Official Brand Palette: Crimson (#E52525), Amber (#E59819), Obsidian (#08090C)
   ========================================================================== */

.legal-hero {
    position: relative;
    padding: 160px 0 60px;
    background: var(--ry-dark-bg);
    overflow: hidden;
}

.legal-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 70% at 85% 30%, rgba(229, 37, 37, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 15% 75%, rgba(229, 152, 25, 0.08) 0%, transparent 55%),
        url('../assets/workshop.png') center/cover no-repeat;
    opacity: 0.18;
    z-index: 0;
}

.legal-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, rgba(8, 9, 12, 0.98) 0%, rgba(8, 9, 12, 0.88) 60%, rgba(163, 16, 16, 0.12) 100%);
    z-index: 1;
}

.legal-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(229, 37, 37, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(229, 37, 37, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    z-index: 1;
    opacity: 0.7;
}

.legal-hero .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.legal-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(229, 152, 25, 0.12);
    border: 1px solid rgba(229, 152, 25, 0.35);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ry-amber);
    margin-bottom: 1.2rem;
}

.legal-hero-badge .badge-icon {
    font-size: 0.82rem;
}

.legal-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    max-width: 860px;
}

.legal-hero-title .gradient-text {
    background: linear-gradient(135deg, #FF4545 0%, #E59819 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-hero-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 780px;
    margin-bottom: 2rem;
}

.legal-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.legal-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
}

.legal-meta-pill i {
    color: var(--ry-amber);
    font-size: 0.78rem;
}

.legal-meta-pill.verified {
    border-color: rgba(55, 104, 86, 0.4);
    background: rgba(55, 104, 86, 0.15);
    color: #4ade80;
}

.legal-meta-pill.verified i {
    color: #4ade80;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 rgba(34, 197, 94, 0.4);
    animation: legalPulse 2s infinite;
}

@keyframes legalPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Document Switcher Nav Bar */
.legal-nav-strip {
    background: var(--ry-dark-surface);
    border-top: 1px solid var(--ry-dark-border);
    border-bottom: 1px solid var(--ry-dark-border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
}

.legal-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-x: auto;
    scrollbar-width: none;
}

.legal-nav-container::-webkit-scrollbar {
    display: none;
}

.legal-nav-tabs {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    white-space: nowrap;
}

.legal-nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    transition: all 0.25s ease;
    text-decoration: none;
}

.legal-nav-tab i {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
}

.legal-nav-tab:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06);
}

.legal-nav-tab:hover i {
    color: var(--ry-amber);
}

.legal-nav-tab.active {
    color: #FFFFFF;
    background: var(--ry-crimson-gradient);
    box-shadow: 0 4px 14px rgba(229, 37, 37, 0.35);
}

.legal-nav-tab.active i {
    color: #FFFFFF;
}

.legal-nav-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-nav-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-nav-action:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Legal Main Body */
.legal-main {
    background: var(--ry-platinum);
    padding: 3.5rem 0 6rem;
}

.legal-main .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.legal-grid {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* Sidebar */
.legal-sidebar {
    position: sticky;
    top: 75px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.legal-sidebar-card {
    background: #FFFFFF;
    border: 1px solid rgba(16, 18, 23, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.sidebar-card-header {
    padding: 1rem 1.2rem;
    background: var(--ry-dark-surface);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-card-title {
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
}

.sidebar-card-title i {
    color: var(--ry-amber);
}

.sidebar-card-tag {
    font-size: 0.68rem;
    padding: 2px 7px;
    background: rgba(229, 37, 37, 0.2);
    border: 1px solid rgba(229, 37, 37, 0.4);
    border-radius: 4px;
    color: #FF6B6B;
    font-weight: 600;
}

.legal-toc-list {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

.legal-toc-list::-webkit-scrollbar {
    width: 4px;
}

.legal-toc-list::-webkit-scrollbar-thumb {
    background: rgba(16, 18, 23, 0.15);
    border-radius: 4px;
}

.legal-toc-item {
    margin: 0;
}

.legal-toc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 0.84rem;
    color: var(--ry-gray-600);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.legal-toc-link:hover {
    color: var(--ry-crimson);
    background: rgba(229, 37, 37, 0.04);
    border-left-color: rgba(229, 37, 37, 0.35);
}

.legal-toc-link.active {
    color: var(--ry-crimson);
    font-weight: 700;
    background: rgba(229, 37, 37, 0.06);
    border-left-color: var(--ry-crimson);
}

.toc-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ry-gray-600);
    background: rgba(16, 18, 23, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    font-family: var(--font-serif);
}

.legal-toc-link.active .toc-badge {
    background: var(--ry-crimson);
    color: #FFFFFF;
}

.sidebar-help-card {
    padding: 1.25rem;
    background: #FFFFFF;
    border: 1px solid rgba(16, 18, 23, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.sidebar-help-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ry-gray-900);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.sidebar-help-title i {
    color: var(--ry-crimson);
}

.sidebar-help-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ry-gray-600);
    margin-bottom: 0.9rem;
}

.sidebar-contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ry-platinum);
    border: 1px solid rgba(16, 18, 23, 0.06);
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ry-crimson);
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    word-break: break-all;
}

.sidebar-contact-link:hover {
    background: rgba(229, 37, 37, 0.08);
    border-color: rgba(229, 37, 37, 0.2);
}

.sidebar-sla {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--ry-sage);
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Content Area */
.legal-content-flow {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.legal-summary-card {
    background: linear-gradient(135deg, rgba(229, 152, 25, 0.05) 0%, #FFFFFF 100%);
    border: 1px solid rgba(229, 152, 25, 0.28);
    border-left: 4px solid var(--ry-amber);
    border-radius: 12px;
    padding: 1.8rem 2rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.8rem;
}

.summary-card-header i {
    font-size: 1.2rem;
    color: var(--ry-amber);
}

.summary-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ry-gray-900);
}

.summary-card-text {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--ry-gray-600);
}

.legal-card {
    background: #FFFFFF;
    border: 1px solid rgba(16, 18, 23, 0.08);
    border-radius: 14px;
    padding: 2.4rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    scroll-margin-top: 80px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.legal-card:hover {
    border-color: rgba(229, 37, 37, 0.18);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.legal-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(16, 18, 23, 0.06);
}

.legal-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(229, 37, 37, 0.08);
    border: 1.5px solid rgba(229, 37, 37, 0.2);
    border-radius: 8px;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--ry-crimson);
    flex-shrink: 0;
}

.legal-card-title-group {
    flex: 1;
}

.legal-card-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ry-gray-900);
    line-height: 1.25;
}

.legal-card-subtitle {
    font-size: 0.84rem;
    color: var(--ry-gray-600);
    margin-top: 3px;
}

.legal-prose {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #374151;
}

.legal-prose p {
    margin-bottom: 1.2rem;
}

.legal-prose p:last-child {
    margin-bottom: 0;
}

.legal-prose strong {
    color: var(--ry-gray-900);
    font-weight: 600;
}

.legal-bullets {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.legal-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.93rem;
    line-height: 1.65;
    color: #374151;
}

.legal-bullet-item i {
    margin-top: 4px;
    color: var(--ry-crimson);
    font-size: 0.82rem;
    flex-shrink: 0;
}

.legal-bullet-item i.sage-check {
    color: var(--ry-sage);
}

.legal-bullet-item strong {
    color: var(--ry-gray-900);
}

/* Feature Grid Cards inside Legal Content */
.legal-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.legal-mini-card {
    background: var(--ry-platinum);
    border: 1px solid rgba(16, 18, 23, 0.07);
    border-radius: 9px;
    padding: 1.2rem 1.4rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.legal-mini-card:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 37, 37, 0.25);
}

.mini-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background: rgba(229, 37, 37, 0.1);
    color: var(--ry-crimson);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.mini-card-icon.amber-bg {
    background: rgba(229, 152, 25, 0.12);
    color: var(--ry-amber);
}

.mini-card-icon.sage-bg {
    background: rgba(55, 104, 86, 0.12);
    color: var(--ry-sage);
}

.mini-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ry-gray-900);
    margin-bottom: 0.35rem;
}

.mini-card-desc {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--ry-gray-600);
}

/* Legal Data Table */
.legal-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 1.4rem 0;
    border: 1px solid rgba(16, 18, 23, 0.08);
    border-radius: 10px;
}

.legal-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}

.legal-data-table th {
    background: var(--ry-dark-surface);
    color: #FFFFFF;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--ry-dark-border);
}

.legal-data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(16, 18, 23, 0.06);
    color: #374151;
    line-height: 1.55;
}

.legal-data-table tr:last-child td {
    border-bottom: none;
}

.legal-data-table tr:nth-child(even) td {
    background: rgba(246, 248, 250, 0.7);
}

.cookie-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.cookie-badge.necessary {
    background: rgba(229, 37, 37, 0.12);
    color: var(--ry-crimson);
}

.cookie-badge.analytics {
    background: rgba(229, 152, 25, 0.14);
    color: #b4710b;
}

.cookie-badge.functional {
    background: rgba(55, 104, 86, 0.14);
    color: var(--ry-sage);
}

/* Callout Box inside content */
.legal-callout {
    background: rgba(55, 104, 86, 0.07);
    border: 1px solid rgba(55, 104, 86, 0.25);
    border-left: 4px solid var(--ry-sage);
    border-radius: 8px;
    padding: 1.1rem 1.4rem;
    margin: 1.4rem 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.legal-callout.amber-callout {
    background: rgba(229, 152, 25, 0.07);
    border-color: rgba(229, 152, 25, 0.25);
    border-left-color: var(--ry-amber);
}

.legal-callout i {
    color: var(--ry-sage);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.legal-callout.amber-callout i {
    color: var(--ry-amber);
}

.legal-callout-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ry-gray-900);
}

/* Official Department Seal Card */
.legal-seal-card {
    background: var(--ry-dark-surface);
    border: 1px solid var(--ry-dark-border);
    border-radius: 14px;
    padding: 2.2rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}

.legal-seal-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 50%, rgba(229, 37, 37, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.legal-seal-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--ry-amber);
    box-shadow: 0 0 20px rgba(229, 152, 25, 0.3);
    object-fit: cover;
    flex-shrink: 0;
}

.legal-seal-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.legal-seal-org {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ry-amber);
    margin-bottom: 0.3rem;
}

.legal-seal-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.4rem;
}

.legal-seal-desc {
    font-size: 0.84rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

.legal-seal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 0.8rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.legal-seal-meta span strong {
    color: rgba(255, 255, 255, 0.9);
}

/* Toast Notification for Clipboard Copy */
.legal-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--ry-dark-surface);
    color: #FFFFFF;
    border: 1px solid var(--ry-dark-border);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.legal-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.legal-toast i {
    color: #22c55e;
}

/* Responsive Media Queries for Legal Suite */
@media (max-width: 992px) {
    .legal-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .legal-sidebar {
        position: relative;
        top: 0;
    }

    .legal-toc-list {
        max-height: 260px;
    }

    .legal-seal-card {
        flex-direction: column;
        text-align: center;
        gap: 1.2rem;
    }

    .legal-seal-meta {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .legal-hero {
        padding: 130px 0 50px;
    }

    .legal-hero-title {
        font-size: 2.1rem;
    }

    .legal-card {
        padding: 1.6rem 1.25rem;
    }

    .legal-card-title {
        font-size: 1.25rem;
    }

    .legal-summary-card {
        padding: 1.4rem 1.25rem;
    }

    .legal-nav-container {
        padding: 0 1rem;
    }
}

/* Print Optimization */
@media print {

    .header,
    .footer,
    .legal-nav-strip,
    .legal-sidebar,
    .nav-actions,
    .modal-backdrop,
    .footer-bottom-bar,
    .legal-toast,
    .page-header-bg {
        display: none !important;
    }

    body {
        background: #FFFFFF !important;
        color: #000000 !important;
        font-size: 12pt;
    }

    .legal-hero {
        padding: 20px 0 !important;
        background: transparent !important;
        color: #000000 !important;
    }

    .legal-hero-title,
    .legal-card-title,
    .summary-card-title,
    .legal-seal-title {
        color: #000000 !important;
    }

    .legal-hero-title .gradient-text {
        -webkit-text-fill-color: initial !important;
        color: #000000 !important;
    }

    .legal-main {
        padding: 0 !important;
        background: transparent !important;
    }

    .legal-grid {
        display: block !important;
    }

    .legal-card {
        box-shadow: none !important;
        border: 1px solid #CCCCCC !important;
        page-break-inside: avoid;
        margin-bottom: 20px !important;
    }

    .legal-summary-card {
        border-left: 4px solid #333333 !important;
        background: #FAFAFA !important;
        border: 1px solid #DDDDDD !important;
    }

    .legal-seal-card {
        background: #F4F4F4 !important;
        color: #000000 !important;
        border: 1px solid #CCCCCC !important;
    }

    .legal-seal-desc,
    .legal-seal-meta {
        color: #333333 !important;
    }
}