/* ==========================================================================
   N.M.S. Advisory & Assurance Pvt. Ltd.
   Master CSS Stylesheet (Reference: §5, §10, §11, §14, §15, §20)
   ========================================================================== */

@import url('variables.css');

/* ==========================================================================
   1. RESET & BASE RULES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--nms-paper-000);
    color: var(--nms-ink-900);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    overflow-x: hidden;
}

/* Nepali Specific Line-height overrides (Reference: §13) */
html[lang="ne"] body {
    font-family: var(--font-devanagari), var(--font-sans);
    line-height: calc(var(--lh-body) + 0.15);
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard);
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--nms-paper-000);
}
::-webkit-scrollbar-thumb {
    background: var(--nms-line-200);
    border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--nms-navy-700);
}

/* ==========================================================================
   2. TYPOGRAPHY (Reference: §4)
   ========================================================================== */
h1, h2, h3, .font-serif {
    font-family: var(--font-display);
    font-weight: 700;
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
}

h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    margin-bottom: var(--space-4);
}

h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    margin-bottom: var(--space-2);
}

.caption {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--nms-navy-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.text-gold {
    color: var(--nms-gold-500);
}

.text-muted {
    color: #555870;
}

/* ==========================================================================
   3. LAYOUT & CONTAINERS (Reference: §5)
   ========================================================================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-5);
    width: 100%;
}

.container-wide {
    max-width: var(--container-wide-width);
    margin: 0 auto;
    padding: 0 var(--space-5);
    width: 100%;
}

section {
    padding: var(--space-9) 0;
}

.section-tinted {
    background-color: var(--nms-navy-050);
}

.section-dark {
    background-color: var(--nms-navy-900);
    color: var(--nms-paper-000);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-7) auto;
}

/* Ascent line header divider (Reference: §2.2) */
.section-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(135deg, var(--nms-gold-500), transparent);
    margin: var(--space-3) auto 0 auto;
    transform: rotate(-10deg);
}

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

/* ==========================================================================
   4. NAVIGATION HEADER & MEGA MENU (Reference: §11, §23.4 navbar toggle)
   ========================================================================== */
.header-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background-color: rgba(251, 250, 247, 0.98);
    border-bottom: 1px solid var(--nms-line-200);
    z-index: var(--z-navbar);
    transition: all var(--dur-base) var(--ease-standard);
}

.header-nav.scrolled {
    height: 64px;
    background-color: rgba(19, 26, 74, 0.96);
    color: var(--nms-paper-000);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-nav.scrolled a {
    color: var(--nms-paper-000);
}

.header-nav.scrolled .logo-standard {
    display: none;
}
.header-nav.scrolled .logo-reversed {
    display: block;
}

.logo-reversed {
    display: none;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo-block {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 700;
    font-size: var(--fs-h3);
    color: var(--nms-navy-900);
}

.logo-block img {
    height: 40px;
    width: auto;
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: var(--space-5);
    height: 100%;
}

.nav-item {
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--nms-navy-900);
    position: relative;
    padding: var(--space-2) 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--nms-gold-500);
    transition: width var(--dur-fast) var(--ease-standard);
    transform: skewX(-15deg);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Lang Switcher (Reference: §10, §13) */
.lang-switch {
    display: flex;
    border: 1px solid var(--nms-line-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--nms-paper-000);
}

.header-nav.scrolled .lang-switch {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
}

.lang-switch a {
    padding: 6px 12px;
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--nms-navy-900);
}

.header-nav.scrolled .lang-switch a {
    color: var(--nms-paper-000);
}

.lang-switch a.active {
    background-color: var(--nms-gold-500);
    color: var(--nms-navy-900) !important;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
    gap: var(--space-2);
}

.btn-primary {
    background-color: var(--nms-navy-900);
    color: var(--nms-paper-000);
}

.btn-primary:hover {
    background-color: var(--nms-navy-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
}

.btn-accent {
    background-color: var(--nms-gold-500);
    color: var(--nms-navy-900);
}

.btn-accent:hover {
    background-color: var(--nms-gold-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
}

.btn-outline {
    background-color: transparent;
    border: none;
    color: var(--nms-navy-900);
}

.btn-outline:hover {
    background-color: var(--nms-navy-050);
}

.btn-text {
    background: none;
    padding: 0;
    color: var(--nms-navy-900);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.btn-text::after {
    content: '→';
    display: inline-block;
    transition: transform var(--dur-fast) var(--ease-standard);
}

.btn-text:hover::after {
    transform: translateX(4px);
}

/* MEGA MENU LAYOUT (Reference: §11) */
.mega-menu-item {
    position: static; /* Allows full-width drop */
}

.mega-menu-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--nms-paper-000);
    border-bottom: 2px solid var(--nms-navy-900);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--dur-base) var(--ease-standard);
    z-index: var(--z-navbar);
    border-top: 1px solid var(--nms-line-200);
}

.mega-menu-item:hover .mega-menu-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
    gap: var(--space-6);
}

.mega-menu-rail {
    list-style: none;
    border-right: 1px solid var(--nms-line-200);
    padding-right: var(--space-5);
}

.mega-menu-rail-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nms-navy-900);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--dur-fast) var(--ease-standard);
    gap: var(--space-2);
}

.mega-menu-rail-btn.active,
.mega-menu-rail-btn:hover {
    background-color: var(--nms-navy-900);
    color: var(--nms-paper-000);
}

.mega-menu-content-pane {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.mega-menu-content-pane.active {
    display: grid;
}

.mega-menu-link-card {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--nms-paper-000);
    border: 1px solid transparent;
    transition: all var(--dur-base) var(--ease-standard);
}

.mega-menu-link-card:hover {
    border-color: var(--nms-line-200);
    background-color: var(--nms-paper-100);
}

.mega-menu-link-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--nms-navy-900);
    margin-bottom: var(--space-1);
}

.mega-menu-link-card p {
    font-size: var(--fs-caption);
    color: var(--nms-ink-900);
    opacity: 0.8;
}

/* Mobile Nav Toggles */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nms-navy-900);
}

.header-nav.scrolled .menu-toggle {
    color: var(--nms-paper-000);
}

/* ==========================================================================
   5. HERO SECTION (Reference: §9.1.1, §12)
   ========================================================================== */
.hero {
    position: relative;
    padding-top: 140px;
    padding-bottom: var(--space-10);
    min-height: 80vh;
    display: flex;
    align-items: center;
    background-color: var(--nms-navy-900);
    color: var(--nms-paper-000);
    overflow: hidden;
}

/* Hero Background Video / Poster overlay */
.hero-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* Cinematic Ken Burns Slideshow — replaces static video */
.hero-slideshow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

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

/* Ken Burns zoom/pan — each slide gets a different direction for visual variety */
.hero-slide:nth-child(1).active { animation: kenburns-1 7s ease-in-out forwards; }
.hero-slide:nth-child(2).active { animation: kenburns-2 7s ease-in-out forwards; }
.hero-slide:nth-child(3).active { animation: kenburns-3 7s ease-in-out forwards; }
.hero-slide:nth-child(4).active { animation: kenburns-4 7s ease-in-out forwards; }
.hero-slide:nth-child(5).active { animation: kenburns-5 7s ease-in-out forwards; }

@keyframes kenburns-1 {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -1%); }
}
@keyframes kenburns-2 {
    0% { transform: scale(1.1) translate(-1%, 0); }
    100% { transform: scale(1) translate(1%, 1%); }
}
@keyframes kenburns-3 {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(2%, -2%); }
}
@keyframes kenburns-4 {
    0% { transform: scale(1.08) translate(1%, 1%); }
    100% { transform: scale(1) translate(-1%, 0); }
}
@keyframes kenburns-5 {
    0% { transform: scale(1) translate(-1%, 1%); }
    100% { transform: scale(1.18) translate(1%, -1%); }
}

/* Slide caption — appears at bottom-left during highlight mode */
.slide-caption {
    position: absolute;
    bottom: 80px;
    left: 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s;
    z-index: 2;
}

.hero-slide.active .slide-caption {
    opacity: 1;
    transform: translateY(0);
}

.slide-caption-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--nms-gold-500);
    background: rgba(19, 26, 74, 0.7);
    padding: 4px 12px;
    display: inline-block;
    width: fit-content;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.slide-caption-text {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* Slideshow progress indicator bar at bottom of hero */
.slideshow-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 4;
}

.slideshow-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--nms-gold-500);
    transition: width 6s linear;
}

.slideshow-progress-bar.running {
    width: 100%;
}

/* Dim slideshow for text readability when content is active */
.intro-finished .hero-slideshow {
    opacity: 0.45;
    transition: opacity 1.2s ease-in-out;
}

.hero-intro-active .hero-slideshow {
    opacity: 0.8;
    transition: opacity 1.2s ease-in-out;
}

.hero-video-highlight-active .hero-slideshow {
    opacity: 0.9;
    transition: opacity 1.2s ease-in-out;
}

/* Show slide captions only during video highlight phase */
.slide-caption { opacity: 0 !important; }
.hero-video-highlight-active .hero-slide.active .slide-caption {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

@media (max-width: 768px) {
    .slide-caption { left: 20px; bottom: 60px; }
    .slide-caption-text { font-size: 1rem; }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(19, 26, 74, 0.4) 0%, rgba(19, 26, 74, 0.8) 100%);
    z-index: 2;
}

.hero-container {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-6);
    align-items: center;
}

.hero-content {
    max-width: 720px;
}

.hero-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background-color: rgba(242, 163, 62, 0.15);
    border: 1px solid var(--nms-gold-500);
    color: var(--nms-gold-500);
    border-radius: var(--radius-sm);
    font-size: var(--fs-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

.hero-content h1 {
    font-size: var(--fs-h1);
    margin-bottom: var(--space-4);
}

.hero-content p {
    font-size: var(--fs-h3);
    color: rgba(251, 250, 247, 0.85);
    margin-bottom: var(--space-6);
    font-weight: 300;
}

.hero-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Minimal right-side branding — transparent, no card background, center-aligned */
.hero-brand-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--nms-paper-000);
    padding: var(--space-4);
    z-index: 3;
    animation: fade-in-aside 1s ease-out forwards;
}

.hero-brand-logo {
    width: 90px;
    height: auto;
    margin-bottom: var(--space-4);
    filter: drop-shadow(0 0 10px rgba(242, 163, 62, 0.3));
    animation: slow-glow 3s infinite ease-in-out;
    align-self: center;
}

.hero-brand-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    align-items: center;
}

.hero-brand-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ffffff;
    text-transform: uppercase;
}

.hero-brand-tagline {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--nms-gold-500);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-brand-cert {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.hero-brand-stats {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(19, 26, 74, 0.4);
    border-top: 1px solid var(--nms-gold-500);
    border-bottom: 1px solid var(--nms-gold-500);
    padding: var(--space-2) var(--space-4);
}

.hero-brand-stat-sep {
    color: rgba(242, 163, 62, 0.5);
}

@keyframes fade-in-aside {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slow-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(242, 163, 62, 0.2)); }
    50% { filter: drop-shadow(0 0 20px rgba(242, 163, 62, 0.6)); }
}

/* Visual controls for hero video */
.hero-controls {
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-5);
    z-index: 4;
    display: flex;
    gap: var(--space-2);
}

.hero-control-btn {
    background: rgba(19, 26, 74, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--nms-paper-000);
    padding: 6px;
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast) var(--ease-standard);
}

.hero-control-btn:hover {
    background: var(--nms-navy-700);
}

/* ==========================================================================
   6. COMPLIANCE LEDGER STRIP (Reference: §1, §9.1.2, §14)
   ========================================================================== */
.service-typewriter-strip {
    background-color: var(--nms-gold-500);
    color: var(--nms-navy-900);
    border-top: 1px solid var(--nms-gold-700);
    border-bottom: 1px solid var(--nms-gold-700);
    overflow: hidden;
    position: relative;
    z-index: 10;
    padding: var(--space-3) 0;
}

.service-typewriter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    gap: var(--space-2);
    min-height: 24px;
}

.service-typewriter-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nms-navy-900);
    opacity: 0.95;
}

.service-typewriter-text {
    font-family: var(--font-display);
    color: var(--nms-navy-950);
}

.service-typewriter-cursor {
    animation: blink-cursor 0.8s infinite;
    color: var(--nms-navy-950);
    font-weight: bold;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* ==========================================================================
   7. TRUST LOGO BAR
   ========================================================================== */
.trust-bar {
    padding: var(--space-5) 0;
    background-color: var(--nms-navy-050);
    border-bottom: 1px solid var(--nms-line-200);
}

.trust-bar-text {
    font-size: var(--fs-caption);
    font-weight: 700;
    text-align: center;
    color: var(--nms-navy-700);
    margin-bottom: var(--space-4);
    letter-spacing: 0.05em;
}

.trust-logos-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.trust-logo-item {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 900;
    color: var(--nms-navy-900);
    opacity: 0.4;
    transition: opacity var(--dur-base) var(--ease-standard);
}

.trust-logo-item:hover {
    opacity: 1;
}

/* ==========================================================================
   8. CARD SYSTEM CORES (Reference: §10)
   ========================================================================== */

/* NMS Logo Banner Custom Card (Reference: Suitability Card in Prompt) */
.nms-card-seal {
    background-color: var(--nms-navy-900);
    color: var(--nms-paper-000);
    border: 2px solid var(--nms-gold-500);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.nms-card-seal::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(242, 163, 62, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.nms-card-seal-logo {
    width: 96px;
    height: 96px;
    margin-bottom: var(--space-4);
    background-color: var(--nms-paper-000);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-1);
}

.nms-card-seal-logo img {
    max-height: 100%;
    width: auto;
}

.nms-card-seal-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.nms-card-seal-tagline {
    font-size: 0.9rem;
    color: var(--nms-gold-500);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--nms-gold-500);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
    width: 80%;
}

.nms-card-seal-address {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: rgba(251, 250, 247, 0.8);
}

/* Service Card (Reference: §10) */
.nms-card-service {
    background-color: var(--nms-paper-000);
    border: 1px solid var(--nms-line-200);
    border-top: 3px solid var(--nms-navy-900);
    border-radius: var(--radius-sm);
    padding: var(--space-5);
    box-shadow: var(--shadow-1);
    transition: all var(--dur-base) var(--ease-standard);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nms-card-service-icon {
    font-size: 2rem;
    color: var(--nms-navy-900);
    margin-bottom: var(--space-3);
    transition: color var(--dur-base) var(--ease-standard);
}

.nms-card-service-num {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    color: var(--nms-gold-500);
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
}

.nms-card-service h3 {
    font-size: 1.2rem;
    color: var(--nms-navy-900);
    margin-bottom: var(--space-2);
}

.nms-card-service p {
    font-size: 0.95rem;
    color: var(--nms-ink-900);
    opacity: 0.9;
    margin-bottom: var(--space-4);
}

.nms-card-service:hover {
    border-top-color: var(--nms-gold-500);
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}

.nms-card-service:hover .nms-card-service-icon {
    color: var(--nms-gold-500);
}

.nms-card-service-cta {
    font-weight: 700;
    font-size: var(--fs-caption);
    color: var(--nms-navy-900);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.nms-card-service-cta::after {
    content: '→';
}

.nms-card-partner {
    background-color: var(--nms-paper-000);
    border: 1px solid var(--nms-line-200);
    border-top: 3px solid var(--nms-navy-900);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: all var(--dur-base) var(--ease-standard);
}

.nms-card-partner-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background-color: var(--nms-navy-050);
    transition: transform var(--dur-slow) var(--ease-standard);
}

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

.nms-card-partner-body {
    padding: var(--space-4);
}

.nms-card-partner-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--nms-navy-900);
    margin-bottom: var(--space-1);
}

.nms-card-partner-role {
    font-size: var(--fs-caption);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--nms-gold-500);
    margin-bottom: var(--space-3);
    letter-spacing: 0.05em;
}

.nms-card-partner-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-3);
}

.nms-tag {
    background-color: var(--nms-navy-050);
    color: var(--nms-navy-900);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.nms-card-partner-bio {
    font-size: 0.9rem;
    color: var(--nms-ink-900);
    opacity: 0.85;
    margin-bottom: var(--space-3);
}

.nms-partner-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    border-top: 1px solid var(--nms-line-200);
    padding-top: var(--space-3);
    font-weight: 700;
    font-size: var(--fs-caption);
    color: var(--nms-navy-900);
    cursor: pointer;
}

.nms-card-partner:hover {
    border-top-color: var(--nms-gold-500);
    box-shadow: var(--shadow-2);
}

/* Animated statistics block (Reference: §19) */
.nms-stat-block {
    background-color: var(--nms-navy-900);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    box-shadow: var(--shadow-1);
    color: var(--nms-paper-000);
}

.nms-stat-number {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--nms-gold-500);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.nms-stat-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nms-paper-000);
    opacity: 0.8;
}

/* ==========================================================================
   9. INTERACTIVE SERVICE EXPLORER (Reference: §16)
   ========================================================================== */
.service-explorer {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.service-explorer-header {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-5);
    align-items: center;
}

/* Filter Tab buttons */
.service-explorer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-bottom: 1px solid var(--nms-line-200);
    padding-bottom: var(--space-3);
}

.service-explorer-tab {
    background: none;
    border: 1px solid var(--nms-line-200);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nms-navy-900);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
}

.service-explorer-tab:hover {
    background-color: var(--nms-navy-050);
}

.service-explorer-tab.active {
    background-color: var(--nms-navy-900);
    color: var(--nms-paper-000);
    border-color: var(--nms-navy-900);
}

.search-input-wrapper {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 10px 16px;
    padding-right: 40px;
    border: 1px solid var(--nms-line-200);
    border-radius: var(--radius-sm);
    background-color: var(--nms-paper-000);
    outline: none;
    transition: all var(--dur-fast) var(--ease-standard);
}

.search-input:focus {
    border-color: var(--nms-navy-900);
    box-shadow: 0 0 0 2px var(--nms-gold-500);
}

.search-input-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--nms-navy-700);
    pointer-events: none;
}

.service-explorer-desc-panel {
    background-color: var(--nms-navy-050);
    border-left: 4px solid var(--nms-gold-500);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-sm);
    transition: all var(--dur-base) var(--ease-standard);
}

.service-explorer-desc-panel p {
    font-size: 0.95rem;
    color: var(--nms-navy-900);
    font-weight: 500;
    margin: 0;
}

.explorer-load-more-container {
    text-align: center;
    margin-top: var(--space-6);
}

.service-explorer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    min-height: 280px;
}

.service-subcard {
    background-color: var(--nms-paper-000);
    border: 1px solid var(--nms-line-200);
    border-top: 3px solid var(--nms-navy-900);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all var(--dur-base) var(--ease-standard);
}

.service-subcard:hover {
    border-color: var(--nms-line-200);
    border-top-color: var(--nms-gold-500);
    box-shadow: var(--shadow-2);
    transform: translateY(-4px);
}

.service-subcard-header {
    margin-bottom: var(--space-3);
}

.service-subcard-cat {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--nms-gold-700);
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

.service-subcard-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nms-navy-900);
}

.service-subcard-body {
    font-size: 0.85rem;
    color: var(--nms-ink-900);
    opacity: 0.8;
    margin-bottom: var(--space-3);
}

.service-subcard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--nms-line-200);
    padding-top: var(--space-2);
}

.service-add-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-caption);
    font-weight: 700;
    color: var(--nms-navy-900);
    display: flex;
    align-items: center;
    gap: 4px;
}

.service-add-btn.added {
    color: var(--nms-success-600);
}

/* ==========================================================================
   10. GLOBAL SEMANTIC SEARCH OVERLAY (Reference: §17)
   ========================================================================== */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(19, 26, 74, 0.95);
    z-index: 10000;
    display: flex;
    justify-content: center;
    padding-top: 80px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--dur-base) var(--ease-standard);
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-overlay-container {
    width: 100%;
    max-width: 720px;
    margin: 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.search-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--nms-paper-000);
}

.search-overlay-close {
    background: none;
    border: none;
    color: var(--nms-paper-000);
    cursor: pointer;
    font-size: 1.5rem;
}

.search-overlay-input-wrap {
    position: relative;
}

.search-overlay-input {
    width: 100%;
    background-color: var(--nms-paper-000);
    border: 2px solid var(--nms-gold-500);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    font-size: 1.15rem;
    color: var(--nms-navy-900);
    outline: none;
}

.search-overlay-results {
    background-color: var(--nms-paper-000);
    border-radius: var(--radius-md);
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--space-4);
    box-shadow: var(--shadow-3);
}

.search-result-group {
    margin-bottom: var(--space-4);
}

.search-result-group-title {
    font-size: var(--fs-caption);
    font-weight: 700;
    color: var(--nms-gold-700);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--nms-line-200);
    padding-bottom: 4px;
}

.search-result-item {
    display: block;
    padding: 10px;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast);
}

.search-result-item:hover {
    background-color: var(--nms-navy-050);
}

.search-result-item h4 {
    font-size: 1rem;
    color: var(--nms-navy-900);
}

.search-result-item p {
    font-size: var(--fs-caption);
    color: var(--nms-ink-900);
    opacity: 0.8;
}

.search-result-highlight {
    background-color: rgba(242, 163, 98, 0.3);
    font-weight: 600;
    border-radius: 2px;
}

/* ==========================================================================
   11. BENTO TESTIMONIALS GRID (Reference: §9.1.7)
   ========================================================================== */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: var(--space-4);
}

.bento-card {
    background-color: var(--nms-paper-100);
    border: 1px solid var(--nms-line-200);
    border-top: 3px solid var(--nms-navy-900);
    border-radius: var(--radius-sm);
    padding: var(--space-5);
    box-shadow: var(--shadow-1);
    transition: all var(--dur-base) var(--ease-standard);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bento-card:hover {
    border-top-color: var(--nms-gold-500);
    box-shadow: var(--shadow-2);
}

.bento-card-text {
    font-size: 1rem;
    font-style: italic;
    color: var(--nms-ink-900);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.bento-card-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.bento-card-author-info h5 {
    font-weight: 700;
    color: var(--nms-navy-900);
    font-size: 0.95rem;
}

.bento-card-author-info p {
    font-size: var(--fs-caption);
    color: var(--nms-ink-900);
    opacity: 0.8;
}

/* Bento Sizing Rules */
.bento-c-6 { grid-column: span 6; }
.bento-c-8 { grid-column: span 8; }
.bento-c-4 { grid-column: span 4; }
.bento-c-12 { grid-column: span 12; }
.bento-r-2 { grid-row: span 2; }

/* ==========================================================================
   12. MULTI-STEP PROPOSAL INTAKE FORM (Reference: §9.7)
   ========================================================================== */
.proposal-box {
    background-color: var(--nms-paper-000);
    border: 1px solid var(--nms-line-200);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-2);
    max-width: 720px;
    margin: 0 auto;
}

.proposal-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    position: relative;
}

.proposal-steps::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--nms-line-200);
    z-index: 1;
}

.proposal-step-line {
    position: absolute;
    top: 15px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--nms-navy-900);
    z-index: 2;
    transition: width var(--dur-base) var(--ease-standard);
}

.proposal-step-node {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--nms-paper-000);
    border: 2px solid var(--nms-line-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--nms-ink-900);
    position: relative;
    z-index: 3;
    transition: all var(--dur-base) var(--ease-standard);
}

.proposal-step-node.active {
    border-color: var(--nms-navy-900);
    background-color: var(--nms-navy-900);
    color: var(--nms-paper-000);
    box-shadow: 0 0 0 4px rgba(19, 26, 74, 0.1);
}

.proposal-step-node.completed {
    border-color: var(--nms-navy-900);
    background-color: var(--nms-navy-900);
    color: var(--nms-paper-000);
}

.proposal-form-step {
    display: none;
}

.proposal-form-step.active {
    display: block;
}

.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--nms-navy-900);
    margin-bottom: var(--space-2);
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--nms-line-200);
    border-radius: var(--radius-sm);
    outline: none;
    background-color: var(--nms-paper-000);
    transition: all var(--dur-fast) var(--ease-standard);
}

/* Explicit Focus Ring matching §20 accessibility rules */
.form-control:focus {
    border-color: var(--nms-navy-900);
    box-shadow: 0 0 0 2px var(--nms-gold-500);
}

.form-checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.form-checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    padding: 8px;
    border: 1px solid var(--nms-line-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--dur-fast);
}

.form-checkbox-item input {
    cursor: pointer;
}

.form-checkbox-item:hover {
    background-color: var(--nms-navy-050);
}

.form-checkbox-item.checked {
    border-color: var(--nms-navy-900);
    background-color: rgba(19, 26, 74, 0.05);
}

.proposal-nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-5);
    border-top: 1px solid var(--nms-line-200);
    padding-top: var(--space-4);
}

/* Form verification notification feedback (Reference: §10, §20) */
.toast-msg {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    background-color: var(--nms-navy-900);
    color: var(--nms-paper-000);
    border-left: 4px solid var(--nms-gold-500);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-3);
    z-index: 100000;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--dur-base) var(--ease-standard);
}

.toast-msg.success {
    border-left-color: var(--nms-success-600);
}

.toast-msg.active {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   13. BIO DRAWER CONTROLS
   ========================================================================== */
.bio-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) ease-out;
}

.bio-drawer.open {
    max-height: 300px;
    border-top: 1px dashed var(--nms-line-200);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
}

/* ==========================================================================
   14. CONTACT US & STATIC MAP (Reference: §9.8, §21.8 maps)
   ========================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-6);
    align-items: start;
}

.contact-info-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.map-wrapper {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--nms-line-200);
    box-shadow: var(--shadow-1);
}

.map-static-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.footer {
    background-color: var(--nms-navy-900);
    color: var(--nms-paper-000);
    padding: var(--space-9) 0 var(--space-5) 0;
    border-top: 2px solid var(--nms-gold-500);
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.footer-col h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
    position: relative;
}

.footer-col h4::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background-color: var(--nms-gold-500);
    margin-top: 8px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-links a {
    color: rgba(251, 250, 247, 0.7);
}

.footer-links a:hover {
    color: var(--nms-gold-500);
    padding-left: 4px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--fs-caption);
    color: rgba(251, 250, 247, 0.6);
}

.footer-socials {
    display: flex;
    gap: var(--space-3);
}

.footer-social-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast);
}

.footer-social-btn:hover {
    background-color: var(--nms-gold-500);
    color: var(--nms-navy-900);
}

/* ==========================================================================
   16. AMBIENT BACKGROUND CTA BAND (Reference: §15)
   ========================================================================== */
.cta-mesh-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--nms-navy-900) 0%, #0a0e2b 100%);
    border-top: 1px solid var(--nms-line-200);
    border-bottom: 1px solid var(--nms-line-200);
}

/* CSS conic/radial gradient animation to simulate shader mesh gradient (degrades to static PNG fallback) */
.cta-mesh-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: radial-gradient(at 20% 20%, rgba(242, 163, 62, 0.04) 0px, transparent 50%),
                      radial-gradient(at 80% 40%, rgba(242, 163, 62, 0.03) 0px, transparent 50%),
                      radial-gradient(at 40% 80%, rgba(19, 26, 74, 0.8) 0px, transparent 50%);
    animation: animate-mesh 12s ease infinite alternate;
}

@keyframes animate-mesh {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.1) translate(2%, 2%); }
    100% { transform: scale(1) translate(0, 0); }
}

.cta-mesh-container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--space-7) 0;
    max-width: 800px;
    margin: 0 auto;
}

/* ==========================================================================
   17. RESPONSIVE MEDIA QUERIES (Reference: §20 accessibility)
   ========================================================================== */

/* Laptop screens (< 1200px) */
@media (max-width: 1200px) {
    :root {
        --fs-h1: 2.8rem;
        --fs-h2: 2rem;
    }
    
    .hero-container {
        grid-template-columns: 1.1fr 0.9fr;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet Screens (< 1024px) */
@media (max-width: 1024px) {
    :root {
        --fs-h1: 2.4rem;
        --fs-h2: 1.8rem;
    }
    
    section {
        padding: var(--space-7) 0;
    }
    
    .hero {
        padding-top: 100px;
        min-height: auto;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-content {
        margin: 0 auto;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .hero-floating-card-wrapper {
        justify-content: center;
        margin-top: var(--space-5);
    }
    
    .service-explorer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

/* Mobile Screens (< 768px) - CRITICAL RESPONSIVENESS FOCUS (Reference: USER REQUEST) */
@media (max-width: 768px) {
    :root {
        --fs-h1: 2.1rem;
        --fs-h2: 1.6rem;
        --fs-h3: 1.25rem;
        --fs-body: 1rem;
    }
    
    /* Navigation Bar on Mobile */
    .header-nav {
        height: 60px;
    }
    
    .logo-block {
        font-size: 1.2rem;
    }
    
    .logo-block img {
        height: 32px;
    }
    
    .menu-toggle {
        display: block;
        font-size: 1.8rem;
    }
    
    .nav-menu {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background-color: var(--nms-paper-000);
        flex-direction: column;
        align-items: center;
        padding-top: var(--space-6);
        gap: var(--space-5);
        transform: translateX(100%);
        transition: transform var(--dur-slow) var(--ease-standard);
        overflow-y: auto;
        border-top: 1px solid var(--nms-line-200);
    }
    
    .nav-menu.open {
        transform: translateX(0);
    }
    
    .nav-item {
        height: auto;
        width: 100%;
        justify-content: center;
    }
    
    .nav-link {
        font-size: 1.2rem;
        font-weight: 700;
        text-align: center;
        width: 80%;
        border-bottom: 1px solid var(--nms-line-200);
        padding-bottom: var(--space-2);
    }
    
    /* mega-menu behavior collapse (Reference: §11) */
    .mega-menu-overlay {
        position: relative;
        top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        display: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--dur-base) ease-out;
    }
    
    .mega-menu-item.open .mega-menu-overlay {
        display: block;
        max-height: 1000px;
    }
    
    .mega-menu-grid {
        grid-template-columns: 1fr;
        padding: var(--space-3) 0;
        gap: var(--space-3);
    }
    
    .mega-menu-rail {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--nms-line-200);
        padding-bottom: var(--space-3);
    }
    
    .mega-menu-content-pane {
        grid-template-columns: 1fr;
    }
    
    .nav-actions {
        display: flex;
        gap: var(--space-3);
    }
    
    .nav-actions a.btn {
        display: none; /* Hide proposal CTA on mobile header */
    }
    
    .lang-switch {
        margin-top: var(--space-4);
    }
    
    /* Hero on Mobile */
    .hero {
        padding-top: 80px;
        padding-bottom: var(--space-8);
    }
    
    .hero-content h1 {
        font-size: var(--fs-h1);
    }
    
    .hero-content p {
        font-size: 1.15rem;
    }
    
    /* Service Explorer mobile grids */
    .service-explorer-header {
        grid-template-columns: 1fr;
    }
    
    .service-explorer-tabs {
        justify-content: center;
    }
    
    .service-explorer-grid {
        grid-template-columns: 1fr;
    }
    
    /* Grid system standard overrides */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
    
    /* Bento Grid mobile reflow */
    .bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    
    .bento-c-6, .bento-c-8, .bento-c-4, .bento-c-12 {
        grid-column: span 1;
    }
    
    /* Proposal steps layout */
    .form-checkbox-group {
        grid-template-columns: 1fr;
    }
    
    .proposal-steps {
        padding: 0 var(--space-2);
    }
    
    .proposal-step-node {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    /* Footer layout mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   18. ACCESSIBILITY RULES & PREFERS-REDUCED-MOTION (Reference: §5, §14, §20)
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--nms-gold-500) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
    
    .ledger-track {
        animation: none !important;
        transform: none !important;
        width: 100%;
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
    }
    
    .cta-mesh-bg {
        animation: none !important;
    }
    
    .hero-slideshow .hero-slide {
        animation-duration: 12s !important; /* Slower Ken Burns on mobile */
    }
}

/* ==========================================================================
   11. PWC STYLE CARD OVERRIDES & HOVER ANIMATIONS
   ========================================================================== */

/* 1. Sharp edges for all cards */
.nms-card-seal,
.nms-card-service,
.nms-card-partner,
.service-subcard,
.bento-card,
.nms-card-partner-img,
.nms-card-seal::before {
    border-radius: 0 !important;
}

/* 2. Standardized Top border background line */
.nms-card-service,
.nms-card-partner,
.service-subcard,
.bento-card {
    border-top: 3px solid rgba(19, 26, 74, 0.08) !important;
    position: relative !important;
}

/* 3. Golden border filling animation on top border */
.nms-card-service::before,
.nms-card-partner::before,
.service-subcard::before,
.bento-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: var(--nms-gold-500) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Hover / Active / Touch states triggers top border filling */
.nms-card-service:hover::before,
.nms-card-partner:hover::before,
.service-subcard:hover::before,
.bento-card:hover::before,
.nms-card-service:active::before,
.nms-card-partner:active::before,
.service-subcard:active::before,
.bento-card:active::before,
.nms-card-service.active-touch::before,
.nms-card-partner.active-touch::before,
.service-subcard.active-touch::before,
.bento-card.active-touch::before {
    transform: scaleX(1) !important;
}

/* 4. Highlight of shadows and translation lift on hover/active/touch */
.nms-card-service,
.nms-card-partner,
.service-subcard,
.bento-card,
.nms-card-seal {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.nms-card-service:hover,
.nms-card-partner:hover,
.service-subcard:hover,
.bento-card:hover,
.nms-card-seal:hover,
.nms-card-service:active,
.nms-card-partner:active,
.service-subcard:active,
.bento-card:active,
.nms-card-seal:active,
.nms-card-service.active-touch,
.nms-card-partner.active-touch,
.service-subcard.active-touch,
.bento-card.active-touch,
.nms-card-seal.active-touch {
    box-shadow: 0 16px 40px rgba(19, 26, 74, 0.12), 0 4px 16px rgba(242, 163, 62, 0.15) !important;
}

/* ==========================================================================
   12. BUTTON GOLDEN CIRCLE BLOOM ANIMATIONS (clip-path: circle from bottom-left)
   ========================================================================== */

/* 1. Base setup — sharp corners, no borders, overflow hidden + isolation for z-index scoping */
.btn,
.service-add-btn,
.nms-partner-btn {
    border-radius: 0 !important;
    border: none !important;
    outline: none !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;  /* creates stacking context so ::before z-index:-1 stays below text */
}

/* 2. The golden circle bloom — z-index:-1 puts it below text but above button background */
.btn::before,
.service-add-btn::before,
.nms-partner-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: var(--nms-gold-500) !important;
    /* Circle starts at size 0% from bottom-left corner (0% = left, 100% = bottom) */
    clip-path: circle(0% at 0% 100%) !important;
    transition: clip-path 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    pointer-events: none !important;
    z-index: -1 !important;  /* goes below button text; isolation:isolate on parent stops it going below bg */
}

/* Expand circle to 150% of diagonal — fully covers button in circular shape */
.btn:hover::before,
.btn:active::before,
.btn.active-touch::before,
.service-add-btn:hover::before,
.service-add-btn:active::before,
.service-add-btn.active-touch::before,
.nms-partner-btn:hover::before,
.nms-partner-btn:active::before,
.nms-partner-btn.active-touch::before {
    clip-path: circle(150% at 0% 100%) !important;
}

/* 3. Primary / Accent Buttons — navy base, text transitions to navy when gold fills */
.btn-primary,
.btn-accent {
    background-color: var(--nms-navy-900) !important;
    color: var(--nms-paper-000) !important;
    transition: color 0.8s ease, transform 0.2s ease !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary.active-touch,
.btn-accent:hover, .btn-accent:active, .btn-accent.active-touch {
    color: var(--nms-navy-900) !important;
    transform: translateY(-2px) !important;
}

/* 4. Outline Button / Load More Button — transparent base, text transitions to navy */
.btn-outline {
    background-color: transparent !important;
    /* NOTE: No color override — respects inline style (e.g. color:white on hero) */
    border: none !important;
    transition: color 0.8s ease, transform 0.2s ease !important;
}

.btn-outline:hover, .btn-outline:active, .btn-outline.active-touch {
    color: var(--nms-navy-900) !important;
    border: none !important;
    transform: translateY(-2px) !important;
}

/* 5. Add to Proposal Buttons in Explorer */
.service-add-btn {
    background-color: transparent !important;
    color: var(--nms-navy-900) !important;
    border: none !important;
    transition: color 0.8s ease, transform 0.2s ease !important;
}

.service-add-btn:hover, .service-add-btn:active, .service-add-btn.active-touch {
    color: var(--nms-navy-900) !important;
}

/* When added — show solid gold, disable circle animation */
.service-add-btn.added {
    background-color: var(--nms-gold-500) !important;
    color: var(--nms-navy-900) !important;
}

.service-add-btn.added::before {
    display: none !important;
}

/* 6. Partner drawer buttons */
.nms-partner-btn {
    width: 100% !important;
    padding: 10px 16px !important;
    border: none !important;
    background-color: transparent !important;
    color: var(--nms-navy-900) !important;
    transition: color 0.8s ease !important;
}

.nms-partner-btn:hover, .nms-partner-btn:active, .nms-partner-btn.active-touch {
    color: var(--nms-navy-900) !important;
}


/* ==========================================================================
   13. CINEMATIC VIDEO INTRO OVERLAY & FULL-SCREEN LAYOUT
   ========================================================================== */

/* Expand hero to full screen for cinematic impact */
.hero {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding-top: 100px !important;
    padding-bottom: var(--space-8) !important;
}

/* Set up hero content container defaults for transition */
.hero-container {
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Slideshow default: dimmed for readability when content is active */

/* Base style for the cinematic video overlay */
.hero-intro-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(19, 26, 74, 0.3) !important; /* Lighter overlay to highlight the video clip */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out !important;
}

/* Intro content card styled with premium drop shadow */
.hero-intro-content {
    max-width: 720px;
    transform: translateY(20px);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-intro-logo {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-4);
    animation: logo-glowing 2s infinite ease-in-out;
    filter: drop-shadow(0 0 15px rgba(242, 163, 62, 0.5));
}

.hero-intro-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes logo-glowing {
    0% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(242, 163, 62, 0.5)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(242, 163, 62, 0.8)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(242, 163, 62, 0.5)); }
}

.hero-intro-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-2);
    text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.hero-intro-subtitle {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    color: var(--nms-gold-500);
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-intro-tag {
    font-family: var(--font-sans);
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-5);
    text-transform: uppercase;
}

/* Progress bar timer */
.hero-intro-progress {
    width: 240px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 auto var(--space-5);
    position: relative;
    overflow: hidden;
}

.hero-intro-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--nms-gold-500);
}

/* -------------------------------------------------------------
   STATE 1: INTRO IS ACTIVE
   - Video highlighted (full opacity)
   - Intro text overlay visible
   - Hero description / widgets hidden
   ------------------------------------------------------------- */
/* .hero-intro-active .hero-slideshow opacity controlled in Section 5 slideshow CSS */

.hero-intro-active .hero-intro-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.hero-intro-active .hero-intro-content {
    transform: translateY(0);
}

.hero-intro-active .hero-container {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    pointer-events: none !important;
}

/* Start the progress bar countdown animation when active */
.hero-intro-active .hero-intro-progress-bar {
    width: 100%;
    transition: width 6s linear !important; /* Match the JS countdown limit */
}

/* -------------------------------------------------------------
   STATE 2: INTRO IS FINISHED / MAIN PAGE ACTIVE
   - Video dimmed down to 0.25 (PwC style) to optimize text contrast
   - Intro overlay hidden
   - Hero description & floating widgets render beautifully
   ------------------------------------------------------------- */
/* .intro-finished .hero-slideshow opacity controlled in Section 5 slideshow CSS */

.intro-finished .hero-intro-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

.intro-finished .hero-container {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Highlight button style modifications */
#video-highlight-btn span {
    font-size: 24px;
}

/* Adjust header bar styling on load to look super premium */
.hero-intro-active ~ .service-typewriter-strip,
.hero-intro-active ~ .trust-bar {
    opacity: 0.1;
    pointer-events: none;
    transition: opacity 1s ease;
}

.intro-finished ~ .service-typewriter-strip,
.intro-finished ~ .trust-bar {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 1s ease;
}

/* ==========================================================================
   14. LOCK SCROLL AND CINEMATIC VIDEO HIGHLIGHT INTERFACES
   ========================================================================== */

/* Lock main page scrolling during intro / video highlight phase */
body.lock-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* Highlight video overlay properties */
.hero-video-highlight-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-8) var(--space-6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out !important;
    background: radial-gradient(circle at center, transparent 60%, rgba(19, 26, 74, 0.4) 100%) !important;
}

/* Live indicators showing video stream state */
.highlight-info {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(19, 26, 74, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--nms-gold-500);
    border-radius: 50%;
    display: inline-block;
    animation: live-pulse 1.5s infinite;
}

@keyframes live-pulse {
    0% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(242, 163, 62, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(242, 163, 62, 0); }
    100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(242, 163, 62, 0); }
}

.highlight-text {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: #ffffff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.highlight-skip-btn {
    color: #ffffff !important;
    background: rgba(19, 26, 74, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: var(--shadow-2) !important;
    font-size: var(--fs-button) !important;
    transition: all 0.3s ease !important;
}

.highlight-skip-btn:hover {
    background: var(--nms-gold-500) !important;
    color: var(--nms-navy-900) !important;
    border-color: var(--nms-gold-500) !important;
}

/* Mouse wheel / scroll prompting animation */
.highlight-scroll-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
}

.highlight-scroll-prompt span.material-symbols-outlined {
    font-size: 28px;
    animation: bounce-arrow 1.5s infinite;
}

@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* -------------------------------------------------------------
   STATE 3: VIDEO HIGHLIGHT ACTIVE
   - Video highlighted (highest visibility)
   - Overlay controls active
   - Main description content still hidden
   ------------------------------------------------------------- */
/* .hero-video-highlight-active .hero-slideshow opacity controlled in Section 5 slideshow CSS */

.hero-video-highlight-active .hero-video-highlight-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.hero-video-highlight-active .hero-container {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    pointer-events: none !important;
}

.hero-video-highlight-active .hero-intro-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Fade up transition when hero container displays */
.intro-finished .hero-container {
    animation: hero-fade-up-reveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes hero-fade-up-reveal {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}