/* Custom CSS Design system for PSL Group */

/* ==========================================================================
   Phetsarath OT — the official Lao typeface (self-hosted, always available)
   Ministry of Posts and Telecommunications, Laos · SIL OFL
   ========================================================================== */
@font-face {
    font-family: 'Phetsarath OT';
    src: url('assets/Phetsarath-Regular.ttf') format('truetype');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Phetsarath OT';
    src: url('assets/Phetsarath-Bold.ttf') format('truetype');
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Color Palette - Light Theme (Phongsupthavy Corporate) */
    --bg-color: #F8F9FA;
    --text-color: #0A2540; /* Conglomerate Navy */
    --text-muted: #4a5568;
    --border-color: #e2e8f0;
    --border-light: #edf2f7;
    --accent-color: #C5A059; /* Royal Gold */
    --accent-dark: #A38241;
    --card-bg: #ffffff;
    --dock-bg: rgba(255, 255, 255, 0.75);
    --dock-border: rgba(10, 37, 64, 0.08);
    --dock-text: #0A2540;
    --dock-indicator: #0A2540;
    --modal-bg: #F8F9FA;
    --success-bg: #e8f5e9;
    --success-text: #2e7d32;
    
    /* Typography & Spacing */
    --font-primary: 'Plus Jakarta Sans', 'Phetsarath OT', 'Noto Sans Lao', 'Inter', sans-serif;
    --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-quick: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
    /* Color Palette - Dark Theme (High-end Carbon Slate) */
    --bg-color: #0e0f11;
    --text-color: #e2e4e9;
    --text-muted: #8b8f9a;
    --border-color: #2b2e35;
    --border-light: #1f2126;
    --accent-color: #dfba6b;
    --accent-dark: #bfa15f;
    --card-bg: #15171a;
    --dock-bg: rgba(14, 15, 17, 0.75);
    --dock-border: rgba(255, 255, 255, 0.08);
    --dock-text: #e2e4e9;
    --dock-indicator: #dfba6b;
    --modal-bg: #0e0f11;
    --success-bg: #1b2e1e;
    --success-text: #81c784;
}

/* Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Remove the grey flash when tapping on touch screens */
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.5s ease, color 0.5s ease;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
    font-family: var(--font-primary);
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: 0.002em;
    overflow-x: hidden;
    padding-bottom: 6rem; /* Space for the bottom dock */
}

/* Lao has stacked vowels/tone marks — give it extra leading for clarity */
html[lang="la"] body,
html[lang="la"] p,
html[lang="la"] li { line-height: 1.85; }

/* Buttons/links respond instantly to taps (no 300ms delay) */
a, button, .dock-item, .project-entry, .about-pillar, .activity-card,
.lang-btn-option, .theme-toggle, .submit-btn {
    touch-action: manipulation;
}

/* On touch devices, don't let hover lift effects "stick" after a tap */
@media (hover: none) {
    .project-entry:hover,
    .about-pillar:hover,
    .activity-card:hover,
    .portfolio-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Language Swapping Utility */
html[lang="en"] .lao-text,
html[lang="en"] .zh-text {
    display: none !important;
}

html[lang="la"] .en-text,
html[lang="la"] .zh-text {
    display: none !important;
}

html[lang="zh"] .en-text,
html[lang="zh"] .lao-text {
    display: none !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Header & Navigation Controls */
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    padding: 0 2rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    background-color: rgba(247, 246, 242, 0.75);
    transition: background-color 0.5s ease, border-bottom 0.5s ease;
}

[data-theme="dark"] .header {
    background-color: rgba(14, 15, 17, 0.75);
}

.header-container {
    position: sticky;
    top: 0;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background: transparent;
    padding: 0.55rem 2rem;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}

.header-container.scrolled {
    background: var(--bg-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 0.45rem 2rem;
    border-radius: 0 0 16px 16px;
}

[data-theme="dark"] .header-container.scrolled {
    background: var(--bg-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 0.45rem 2rem;
    border-radius: 0 0 16px 16px;
}

.brand-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    gap: 0.7rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.brand-logo-img {
    height: 34px;
    width: auto;
    display: block;
}

.logo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-color);
    display: inline-block;
}

.header-controls {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.mobile-dock-toggle {
    display: none;
}

.lang-switch-toggle {
    position: relative;
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 0;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    height: 32px;
}

.lang-toggle-bg {
    display: none; /* Hide the old black pill */
}

.lang-btn-option {
    position: relative;
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-btn-option img {
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    opacity: 0.4;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, box-shadow 0.3s ease;
    width: 24px;
    height: 18px;
    object-fit: cover;
}

.lang-btn-option:hover img {
    opacity: 0.7;
}

html[lang="en"] .lang-btn-option[data-lang="en"] img,
html[lang="la"] .lang-btn-option[data-lang="la"] img,
html[lang="zh"] .lang-btn-option[data-lang="zh"] img {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 50%;
    transition: var(--transition-quick);
}

.theme-toggle:hover {
    background-color: var(--border-light);
}

.theme-toggle .sun-icon,
.theme-toggle .moon-icon,
.theme-toggle .gem-icon,
.theme-toggle .gold-icon {
    display: none;
}

[data-theme="light"] .theme-toggle .moon-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .gem-icon {
    display: block;
}

/* Main Content Layout */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero Section */
.hero-section {
    padding: 9rem 0 4rem 0;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.hero-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-intro {
    width: 65%;
}

.vision-paragraph {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--accent-color);
}


.hero-pillars-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 2rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.hero-pillars-row {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    flex-wrap: nowrap;
    width: max-content;
    animation: desktopMarquee 35s linear infinite; /* Slower, more premium speed */
}

@keyframes desktopMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hero-pillars-row::-webkit-scrollbar {
    display: none;
}

.hero-pillars-row .glass-orb {
    flex: 0 0 auto;
    white-space: nowrap;
    position: static;
    width: auto;
    height: auto;
    border-radius: 50px; /* Pill shape */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    transform: none;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    padding: 0.5rem 1rem;
    cursor: default;
    gap: 0.75rem;
}
.hero-pillars-row .glass-orb:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.8);
}
.hero-pillars-row .orb-text {
    opacity: 1;
    transform: none;
    position: static;
    margin-top: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
}
.hero-pillars-row .orb-icon {
    font-size: 1.5rem;
    margin-bottom: 0;
    transform: none !important;
}


.hero-title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

.hero-title .lao-text {
    font-weight: 700;
}

.hero-description {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-muted);
    font-weight: 400;
    max-width: 680px;
}

.hero-meta {
    width: 32%;
    min-width: 300px;
    max-width: 380px;
    background: var(--card-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--accent-color);
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0; /* Let meta-item padding handle spacing */
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .hero-meta {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.hero-meta .meta-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-light);
}
.hero-meta .meta-item:first-child {
    padding-top: 0;
}
.hero-meta .meta-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.hero-meta .meta-icon-box {
    width: 38px;
    height: 38px;
    background: rgba(197, 160, 89, 0.1); /* Soft gold background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color);
    flex-shrink: 0;
}
.hero-meta .meta-icon-box svg {
    width: 18px;
    height: 18px;
}
.hero-meta .meta-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-meta .meta-label {
    display: none !important; /* Hide the labels, just show icon and value */
}
.hero-meta .meta-value {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.35;
    word-break: break-word;
}
.hero-meta .contact-links-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}


.meta-item {
    border-top: none;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 2rem;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.meta-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.meta-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.meta-value {
    font-size: 1.1rem;
    font-weight: 400;
}

/* Showcase Section */
.showcase-section {
    padding: 6rem 0;
    border-bottom: 1px solid var(--border-color);
}

.showcase-header {
    display: flex;
    align-items: center;
    margin-bottom: 3.5rem;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    /* must wrap: Lao titles are long and clip on phones with nowrap */
    white-space: normal;
}

.section-divider {
    flex-grow: 1;
    height: 1px;
    background-color: var(--border-color);
    margin-left: 2rem;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem;
}

.project-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: var(--transition-smooth);
    opacity: 1;
    transform: translateY(0);
}

.project-card.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    display: none;
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--border-light);
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(21, 21, 21, 0.4);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-quick);
}

.view-detail-btn {
    color: #ffffff;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 0.8rem 1.8rem;
    border-radius: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(10px);
    transition: var(--transition-quick);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.project-card:hover .card-image {
    transform: scale(1.05);
}

.project-card:hover .card-overlay {
    opacity: 1;
}

.project-card:hover .view-detail-btn {
    transform: translateY(0);
    background-color: #ffffff;
    color: #151515;
    border-color: #ffffff;
}

.card-details {
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.card-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid var(--border-color);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.card-caption {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.5;
}

/* Chronology / Timeline Section */
.chronology-section {
    padding: 6rem 0;
    border-bottom: 1px solid var(--border-color);
}

.chronology-header {
    margin-bottom: 4rem;
}

.chronology-subtitle {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-weight: 400;
}

.timeline-container {
    position: relative;
    padding: 2rem 0;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.step-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--bg-color);
    border: 2px solid var(--text-color);
    margin-bottom: 1.5rem;
    align-self: center;
    transition: var(--transition-quick);
}

.timeline-step:hover .step-marker {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.3);
}

.step-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-light);
    padding: 1.25rem;
    border-radius: 6px;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: var(--transition-quick);
}

[data-theme="dark"] .step-content {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.timeline-step:hover .step-content {
    border-color: var(--border-color);
    transform: translateY(-5px);
}

.step-year {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-color);
}

.step-title {
    font-size: 1rem;
    font-weight: 600;
}

.step-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    font-weight: 400;
}

/* Philosophy Section */
.philosophy-section {
    padding: 6.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.philosophy-grid {
    max-width: 900px;
    margin: 0 auto;
}

.section-tag {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}

.philosophy-text {
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

.philosophy-text.text-muted {
    font-size: 1.4rem;
    color: var(--text-muted);
}

/* Contact Section */
.contact-section {
    padding: 6rem 0 3rem 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: flex-start;
}

.contact-title {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.contact-sub {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-bottom: 3.5rem;
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-left: 2px solid var(--border-color);
    padding-left: 1.5rem;
}

.info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.info-value {
    font-size: 1.15rem;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 400;
}

.hover-link {
    transition: var(--transition-quick);
}

.hover-link:hover {
    color: var(--accent-color);
    padding-left: 5px;
}

/* Contact Form */
.contact-form-container {
    background-color: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .contact-form-container {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

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

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

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.form-input {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    padding: 0.9rem 1.2rem;
    border-radius: 4px;
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-quick);
    width: 100%;
}

.form-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(191, 161, 95, 0.15);
}

textarea.form-input {
    resize: vertical;
}

.submit-btn {
    background-color: var(--text-color);
    color: var(--bg-color);
    border: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 1rem 2rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-quick);
}

.submit-btn:hover {
    background-color: var(--accent-color);
    color: #ffffff;
}

.btn-arrow {
    font-size: 1.2rem;
    transition: var(--transition-quick);
}

.submit-btn:hover .btn-arrow {
    transform: translateX(5px);
}

.form-success-message {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--success-bg);
    color: var(--success-text);
    padding: 1.5rem;
    border-radius: 4px;
    animation: fadeIn 0.4s ease;
}

.success-icon {
    flex-shrink: 0;
}

.success-text {
    font-size: 0.95rem;
    font-weight: 500;
}

/* Footer Section */
.footer {
    border-top: 1px solid var(--border-light);
    padding: 2rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.footer-logo {
    height: 40px;
    width: auto;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.footer-logo:hover {
    opacity: 0.8;
}

/* Top Navigation Dock */
.dock-container {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 101;
}

.floating-dock {
    pointer-events: auto;
    display: flex;
    align-items: center;
}

[data-theme="dark"] .floating-dock {
    box-shadow: none;
}

.dock-list {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 0.25rem;
}

.dock-item {
    position: relative;
}

.dock-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--dock-text);
    padding: 0.6rem 1.1rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    gap: 0.4rem;
    transition: var(--transition-quick);
}

.dock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--dock-indicator);
    opacity: 0;
    transform: scale(0);
    transition: var(--transition-quick);
}

.dock-item.active .dock-link {
    background-color: var(--text-color);
    color: var(--bg-color);
}

.dock-item.active .dock-dot {
    opacity: 1;
    transform: scale(1);
    background-color: var(--bg-color);
}

.dock-item:not(.active) .dock-link:hover {
    background-color: rgba(128, 128, 128, 0.08);
}

/* Slide-up Project Detail Modal */
.project-modal {
    border: none;
    background: none;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    outline: none;
}

.project-modal::backdrop {
    background-color: rgba(14, 15, 17, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition-smooth);
}

.modal-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background-color: var(--modal-bg);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 10;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-quick);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.modal-close:hover {
    transform: scale(1.05);
    background-color: var(--text-color);
    color: var(--bg-color);
}

.modal-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    height: 100%;
    overflow: hidden;
}

.modal-media {
    width: 100%;
    height: 100%;
    background-color: var(--border-light);
}

.modal-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
    padding: 5rem 4rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.modal-tag {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-color);
    display: inline-block;
    margin-bottom: 0.75rem;
}

.modal-title {
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

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

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.stat-value {
    font-size: 1.05rem;
    font-weight: 500;
}

.modal-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-muted);
    font-weight: 400;
}

.modal-description p {
    margin-bottom: 1.5rem;
}

.modal-description h4 {
    color: var(--text-color);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
}

.modal-description ul {
    list-style-position: inside;
    margin-left: 0.5rem;
    margin-bottom: 1.5rem;
}

.modal-description li {
    margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Premium Project Portfolio (structured groups → entries → spec chips)
   --------------------------------------------------------------------------- */
.portfolio-lead {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--text-color);
    font-weight: 400;
    margin-bottom: 2.5rem;
}

.portfolio-group {
    margin-bottom: 3rem;
}

.portfolio-group:last-child {
    margin-bottom: 0;
}

.portfolio-group-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.3;
}

.portfolio-group-title .group-index {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.project-entries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}




.project-entry {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}
.project-entry:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}
[data-theme="dark"] .project-entry:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}
.project-img-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}
.project-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    cursor: zoom-in;
}
.project-entry:hover .project-card-img {
    transform: scale(1.08);
}
.project-info-container {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.spec-chips {
    margin-top: auto; /* push chips to bottom */
}

.project-entry-name {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.35;
    margin: 0 0 0.6rem 0;
}

.project-entry-detail {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    font-weight: 400;
    margin: 0 0 1.5rem 0;
}

.spec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.spec-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background-color: var(--border-light);
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    line-height: 1;
}

.spec-chip-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.spec-chip-value {
    font-weight: 600;
    color: var(--text-color);
}

/* Accent "tag" chip (e.g. client / category) */
.spec-chip--tag {
    background-color: rgba(196, 169, 127, 0.14);
    border-color: rgba(196, 169, 127, 0.4);
    background-color: color-mix(in srgb, var(--accent-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.spec-chip--tag .spec-chip-value {
    color: var(--accent-color);
    font-size: 0.78rem;
    font-weight: 600;
}

/* Spacing for the sub-group titles inside the portfolio grid */
.past-projects-grid .portfolio-group-title {
    margin-top: 3rem;
}

.past-projects-grid .portfolio-group-title:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   About / Company Overview
   --------------------------------------------------------------------------- */
.about-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem 2rem;
}

.about-lead {
    max-width: 900px;
    margin: 2rem auto 0;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-color);
    font-weight: 400;
}

.about-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.about-pillar {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    transition: var(--transition-quick);
}

.about-pillar:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.about-pillar-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border-radius: 14px;
    background-color: var(--border-light);
    margin-bottom: 1.25rem;
}

.about-pillar h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

.about-pillar p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-muted);
    font-weight: 400;
}

/* Animations */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-text {
    animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-text-delay {
    opacity: 0;
    animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* Scroll Animation classes */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.appear {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3.5rem;
    }
    .modal-body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
        padding: 4rem 2.5rem;
    }
}

@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .hero-meta {
        flex-direction: row;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    .meta-item { border: none; padding: 0; }
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    /* Vertical Timeline layout with scroll line on mobile/tablet */
    .timeline-container {
        padding-left: 2rem;
    }
    .timeline-line {
        left: 1rem;
        top: 0;
        width: 2px;
        height: 100%;
        transform: none;
        display: block;
    }
    .timeline-steps {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .timeline-step {
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
    }
    .step-marker {
        position: absolute;
        left: -2.3rem; /* Aligned with line */
        top: 1.5rem;
        display: block;
        z-index: 3;
    }
    .step-content {
        margin-left: 1rem;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    .modal-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .modal-media {
        height: 250px;
    }
    .modal-body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
        padding: 3rem 2rem;
    }
    .modal-wrapper {
        height: 95%;
    }
    .philosophy-text {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
        padding-bottom: 7.5rem;
    }
    .header {
        padding: 1rem 1.5rem;
    }
    .main-content {
        padding: 0 1.5rem;
    }
    .hero-title {
        font-size: 2.8rem;
    }
    .hero-meta {
        flex-direction: row;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    
    /* Premium glass dock: all five items fit evenly across the phone */
    .dock-container {
        width: 100%;
        padding: 0 0.6rem;
        bottom: 0.9rem;
    }
    .floating-dock {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        border-radius: 28px;
        padding: 0.35rem 0.3rem;
    }
    .dock-list {
        width: 100%;
        justify-content: space-between;
        gap: 0;
    }
    .dock-item {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.25rem 0.15rem 0.3rem;
        gap: 3px;
        border-radius: 18px;
    }
    .dock-icon {
        width: 36px;
        height: 36px;
    }
    .dock-icon svg {
        width: 20px;
        height: 20px;
    }
    .dock-label {
        font-size: 0.6rem;
    }

    .footer-container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .modal-wrapper {
        height: 100%;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .modal-media {
        height: 200px;
    }
    .modal-body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
        padding: 2.5rem 1.5rem;
        gap: 1.75rem;
    }
    .modal-title {
        font-size: 1.8rem;
    }
    .modal-close {
        top: 1rem;
        right: 1rem;
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 640px) {
    /* Keep the centered logo from colliding with the controls on phones */
    .header-container {
        justify-content: flex-start;
    }
    .header-controls {
        position: static;
        transform: none;
        margin-left: auto;
    }
    .brand-logo-img {
        height: 36px;
    }
    .brand-logo .logo-text {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-meta {
        flex-direction: column;
        padding: 2rem;
    }
    .contact-form-container {
        padding: 1.5rem;
    }
    .modal-stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Organization Structure Section
   ========================================================================== */
.org-section {
    padding: 8rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.org-header {
    margin-bottom: 5rem;
    text-align: center;
}

.org-tree-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Top Level */
.top-level {
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

.top-level::after {
    content: '';
    position: absolute;
    bottom: -4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 4rem;
    background-color: var(--border-color);
    z-index: -1;
}

/* Second Level Branches */
.org-level-branches {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
}

/* Horizontal connecting line */
.org-level-branches::before {
    content: '';
    position: absolute;
    top: -2px;
    left: calc(12.5% + 1rem); /* Roughly centering the line above the cards depending on wrap */
    right: calc(12.5% + 1rem);
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}

/* Vertical lines dropping down to cards */
.org-branch {
    flex: 1 1 200px;
    max-width: 280px;
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.org-branch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 2rem;
    background-color: var(--border-color);
    z-index: 1;
}

/* Card Styling */
.org-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    width: 100%;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

[data-theme="dark"] .org-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.org-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.org-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.primary-card {
    min-width: 320px;
    border-top: 4px solid var(--accent-color);
}

.secondary-card {
    border-top: 3px solid var(--text-muted);
}

.secondary-card:hover {
    border-top-color: var(--accent-color);
}

/* Text and Icons inside cards */
.org-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1.5rem auto;
    background-color: rgba(10, 186, 181, 0.1); /* Subtle accent bg */
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.org-card:hover .org-icon {
    background-color: var(--accent-color);
    color: #fff;
    transform: scale(1.1);
}

.org-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.org-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.org-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Responsive Org Chart */
@media (max-width: 900px) {
    .org-level-branches::before {
        display: none; /* Hide horizontal line on mobile */
    }
    
    .org-branch {
        flex: 1 1 100%;
        max-width: 350px;
        padding-top: 1rem;
        margin-bottom: 2rem;
    }

    .org-branch::before {
        display: none; /* Hide top drop lines */
    }

    .top-level::after {
        display: none;
    }
}

/* ==========================================================================
   Tab Navigation System
   ========================================================================== */
.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Activity Feed Styling */
.activity-feed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}
@media (max-width: 1200px) {
    .activity-feed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .activity-feed-grid { grid-template-columns: 1fr; }
}

.activity-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.activity-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.activity-img {
    position: relative;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--border-light), var(--card-bg));
}

/* Branded placeholder logo shown when there is no photo (or it fails to load) */
.activity-img-logo {
    width: 110px;
    height: auto;
    opacity: 0.5;
}

/* Real photo layered on top, covering the placeholder */
.activity-img-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.activity-content {
    padding: 1.5rem;
}

.activity-date {
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.activity-title {
    font-size: 1.25rem;
    margin: 0 0 1rem 0;
    color: var(--text-color);
}

.activity-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ==========================================================================
   Vision List Styling
   ========================================================================== */
.vision-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
    text-align: left;
    display: inline-block;
}

.vision-list li {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 2rem;
    line-height: 1.6;
}

.vision-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .vision-list li {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Premium Glass Dock (icon + label, circular active highlight)
   ========================================================================== */
.dock-list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.15rem;
}

.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 64px;
    padding: 0.3rem 0.6rem 0.35rem;
    border-radius: 22px;
    cursor: pointer;
    color: var(--dock-text);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color 0.25s ease, transform 0.12s ease;
}

.dock-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.25s ease;
}

.dock-icon svg {
    width: 19px;
    height: 19px;
    display: block;
    stroke: currentColor;
}

.dock-label {
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    line-height: 1;
    color: inherit;
}

/* Active: accent colour + a clean accent glass pill behind the whole tab */
.dock-item.active {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.dock-item.active .dock-icon {
    background-color: transparent;
}

/* Pressed feedback (feels responsive on touch) */
.dock-item:active {
    transform: scale(0.9);
}

@media (hover: hover) {
    .dock-item:not(.active):hover {
        color: var(--text-color);
        background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    }
    .dock-item:not(.active):hover .dock-icon {
        background-color: transparent;
    }
}

/* ==========================================================================
   Vision Glassmorphism Cards (Premium Circular)
   ========================================================================== */
.vision-glass-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.5rem;
    width: max-content;
    justify-content: flex-start;
}
.vision-glass-grid::-webkit-scrollbar {
    display: none;
}

.vision-glass-card {
    flex: 0 0 auto !important; /* Don't squeeze */
    white-space: nowrap !important; /* Don't wrap text */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: auto !important;
    height: auto !important;
    border-radius: 50px !important; /* Pill shape for floating look */
    padding: 0.75rem 1.5rem !important; /* Wider padding */
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
.vision-glass-card:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}
[data-theme="light"] .vision-glass-card {
    flex: 0 0 auto;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .vision-glass-card:hover {
    background: rgba(255, 255, 255, 1) !important;
}

[data-theme="light"] .vision-glass-card {
    flex: 0 0 auto;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: auto !important; /* Override 220px */
    height: auto !important; /* Override 220px */
    border-radius: 50px !important; /* Pill shape */
    padding: 0.5rem 1.2rem !important; /* Small padding */
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
}
.vision-glass-card:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}
[data-theme="light"] .vision-glass-card {
    flex: 0 0 auto;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .vision-glass-card:hover {
    background: rgba(255, 255, 255, 1) !important;
}

.glass-icon {
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
}

.glass-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
    text-align: left !important;
    opacity: 1 !important;
}

/* Color Matching Glows */
.vision-glass-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 60%);
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
}

.card-honesty { --glow-color: #3b82f6; border-bottom: 2px solid #3b82f6; } 
.card-safety { --glow-color: #f59e0b; border-bottom: 2px solid #f59e0b; } 
.card-quality { --glow-color: #8b5cf6; border-bottom: 2px solid #8b5cf6; } 
.card-art { --glow-color: #ec4899; border-bottom: 2px solid #ec4899; } 
.card-time { --glow-color: #10b981; border-bottom: 2px solid #10b981; } 




/* ==========================================================================
   Roadmap Timeline
   ========================================================================== */
.roadmap-section {
    padding: 6rem 2rem;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.roadmap-header {
    text-align: center;
    margin-bottom: 5rem;
}





/* ==========================================================================
   Organization Structure (Template Style)
   ========================================================================== */
.org-section {
    padding: 5rem 2rem;
    background-color: transparent;
    text-align: center;
}

.org-template-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    padding-top: 2rem;
}

.org-center-chain {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.org-capsule {
    padding: 1rem 2rem;
    border-radius: 40px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    z-index: 2;
    position: relative;
}

.org-capsule h4 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.org-capsule p {
    font-size: 0.9rem;
    margin: 0;
}

.solid-gold {
    background: #c29d5b; /* Muted gold from image */
    color: #fff;
    border: none;
}

.solid-gold h4, .solid-gold p {
    color: #fff;
}

.outline-gold {
    background: var(--card-bg);
    border: 2px solid #c29d5b;
    color: #c29d5b;
}

.outline-gold h4 {
    color: #c29d5b;
}

.outline-gold p {
    color: var(--text-muted);
}

.org-v-line {
    width: 2px;
    background-color: #c29d5b;
}

.org-v-line.center {
    height: 40px;
}

.org-v-line.short {
    height: 15px;
}

.org-h-split {
    width: 66%; /* Spans across 3 columns */
    height: 2px;
    background-color: #c29d5b;
}

.org-columns-container {
    display: flex;
    justify-content: center;
    gap: 3rem;
    width: 100%;
    margin-top: 0;
}

.org-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 320px;
}

/* The vertical tree in the columns */
.org-left-tree {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding-left: 20px;
    margin-top: 10px;
}

.org-left-line {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 25px; /* stops before the last item's center */
    width: 2px;
    background-color: #c29d5b;
    z-index: 1;
}

.org-list-item {
    display: flex;
    align-items: center;
    margin-top: 25px;
    position: relative;
    z-index: 2;
}

.org-h-connector {
    width: 20px;
    height: 2px;
    background-color: #c29d5b;
}

.org-card-modern {
    background: var(--card-bg);
    border-radius: 16px;
    border-top: 4px solid #c29d5b;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    padding: 1.5rem;
    width: 100%;
    text-align: left;
    margin-left: -2px; /* Connects flush with connector */
}

.org-card-modern h4 {
    color: var(--text-color);
    font-size: 1.05rem;
    margin: 0;
}




/* ==========================================================================
   Corporate Portfolio Section (New Projects Tab)
   ========================================================================== */
.portfolio-section {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.portfolio-header {
    text-align: center;
    margin-bottom: 4rem;
}

.portfolio-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 1rem auto 0;
}

.portfolio-tier {
    margin-bottom: 5rem;
    position: relative;
}

.tier-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 1rem;
}

.tier-header h3 {
    font-size: 1.8rem;
    margin: 0;
    color: var(--text-color);
}

.tier-badge {
    background: linear-gradient(135deg, #d4af37, #c29d5b);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

.tier-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    margin-top: -1rem;
}

/* Tier 1 Grid */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .tier-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .tier-grid {
        grid-template-columns: 1fr;
    }
}


.portfolio-card {
    position: relative;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.portfolio-card:hover {
    transform: translateY(-5px);
}

.card-glass-bg {
    position: absolute;
    top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, #8b0000, #d4af37);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.portfolio-card h4 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d4af37;
    margin: 0 0 1.5rem 0;
}

.card-desc {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

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

.card-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--accent-color);
    transform: rotate(45deg);
}

/* Tier 2 Highways */
.highway-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.highway-item {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.highway-item:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border-color: #d4af37;
}

.hw-icon {
    font-size: 2rem;
    margin-right: 1.5rem;
}

.hw-details {
    flex-grow: 1;
}

.hw-details h4 {
    margin: 0 0 0.3rem 0;
    font-size: 1.2rem;
    color: var(--text-color);
}

.hw-details p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.hw-length {
    font-size: 1.25rem;
    font-weight: 600;
    color: #8b0000;
    background: rgba(139, 0, 0, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

/* Tier 3 Past Projects */
.past-projects-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
}

.past-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.past-list li {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 1rem;
    position: relative;
    padding-left: 2rem;
}

.past-list li:last-child {
    border-bottom: none;
}

.past-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #d4af37;
    font-weight: bold;
}

@media (min-width: 768px) {
    .past-list {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    .past-list li {
        border-bottom: none;
        border-left: 1px solid var(--border-color);
        padding-left: 1.5rem;
    }
    .past-list li::before {
        left: -8px;
        background: var(--card-bg);
        width: 16px;
        text-align: center;
    }
}


/* ==========================================================================
   Premium Single-Page Additions
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
    position: relative;
    background-color: var(--bg-primary);
}

.premium-mesh-bg {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.portfolio-card {
    position: relative;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.portfolio-card:hover {
    transform: translateY(-5px);
}

.card-glass-bg {
    position: absolute;
    top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, #8b0000, #d4af37);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.portfolio-card h4 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d4af37;
    margin: 0 0 1.5rem 0;
}

.card-desc {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

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

.card-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--accent-color);
    transform: rotate(45deg);
}

/* Tier 2 Highways */
.highway-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.highway-item {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.highway-item:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border-color: #d4af37;
}

.hw-icon {
    font-size: 2rem;
    margin-right: 1.5rem;
}

.hw-details {
    flex-grow: 1;
}

.hw-details h4 {
    margin: 0 0 0.3rem 0;
    font-size: 1.2rem;
    color: var(--text-color);
}

.hw-details p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.hw-length {
    font-size: 1.25rem;
    font-weight: 600;
    color: #8b0000;
    background: rgba(139, 0, 0, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

/* Tier 3 Past Projects */
.past-projects-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
}

.past-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.past-list li {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 1rem;
    position: relative;
    padding-left: 2rem;
}

.past-list li:last-child {
    border-bottom: none;
}

.past-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #d4af37;
    font-weight: bold;
}

@media (min-width: 768px) {
    .past-list {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    .past-list li {
        border-bottom: none;
        border-left: 1px solid var(--border-color);
        padding-left: 1.5rem;
    }
    .past-list li::before {
        left: -8px;
        background: var(--card-bg);
        width: 16px;
        text-align: center;
    }
}


/* ==========================================================================
   Premium Single-Page Additions
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
    position: relative;
    background-color: var(--bg-primary);
}

.premium-mesh-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: radial-gradient(circle at 15% 50%, rgba(27, 117, 187, 0.05), transparent 40%),
                radial-gradient(circle at 85% 30%, rgba(58, 170, 53, 0.05), transparent 40%),
                radial-gradient(circle at 50% 80%, rgba(227, 36, 43, 0.03), transparent 50%);
    pointer-events: none;
}

[data-theme="dark"] .premium-mesh-bg {
    background: radial-gradient(circle at 15% 50%, rgba(27, 117, 187, 0.08), transparent 40%),
                radial-gradient(circle at 85% 30%, rgba(58, 170, 53, 0.08), transparent 40%),
                radial-gradient(circle at 50% 80%, rgba(227, 36, 43, 0.05), transparent 50%);
}

.page-section {
    padding: 3.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#home {
    padding-top: 1rem;
}

nav.dock-list {
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0;
}

a.dock-item {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
}

/* =========================================
   Project Modal Styles
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(245, 247, 246, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

[data-theme="dark"] .modal-overlay { background: rgba(14, 18, 20, 0.85); }

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: var(--surface);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--glass-border);
    overflow-y: auto;
    position: relative;
    transform: translateY(30px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal-close:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    transform: rotate(90deg);
}

.modal-body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .modal-body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color); flex-direction: row; }
}

.modal-img-container {
    width: 100%;
    height: 250px;
    flex-shrink: 0;
    background: var(--surface-alt);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .modal-img-container {
        width: 45%;
        height: auto;
        min-height: 400px;
    }
}

#modal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-info {
    padding: 40px;
    flex: 1;
}

.modal-tag {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 12px;
}

#modal-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    line-height: 1.2;
}

.modal-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--glass-border);
}

.modal-meta-item {
    display: flex;
    flex-direction: column;
}

.modal-meta-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.modal-meta-value {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.modal-desc {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1.05rem;
}

.modal-desc p {
    margin-bottom: 16px;
}


/* ==========================================================================
   Premium Animations & Interactions
   ========================================================================== */

/* Scroll Reveal */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000), transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    will-change: opacity, transform;
}

.animate-on-scroll.appear,
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced Hover Interactions */
.contact-card, .project-entry {
    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;
}

.contact-card:hover, .project-entry:hover, .vision-glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .contact-card:hover, [data-theme="dark"] .project-entry:hover, [data-theme="dark"] .vision-glass-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

/* Ken Burns / Parallax Zoom */
@keyframes kenBurns {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.project-card-img {
    animation: kenBurns 20s ease-in-out infinite alternate;
}
.project-entry:hover .project-card-img {
    /* Stop infinite animation and force slightly larger scale on hover */
    animation-play-state: paused;
    transform: scale(1.08) !important;
}


/* ==========================================================================
   Orbit Vision Layout
   ========================================================================== */
.philosophy-content {
    width: 100%;
    padding: 2rem 0 6rem 0;
    overflow: hidden;
}

.orbit-container {
    position: relative;
    width: 700px;
    height: 700px;
    margin: 0 auto;
    border-radius: 50%;
    /* Optional subtle ring background */
    /* border: 1px dashed rgba(10, 37, 64, 0.1); */
}

.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    text-align: center;
    z-index: 10;
    background: var(--bg-color);
    padding: 2rem;
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(255,255,255,0.8);
}

.orbit-center .section-tag {
    justify-content: center;
    margin-bottom: 1rem;
}

.orbit-center .philosophy-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0;
}

.glass-orb {
    position: absolute;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 5;
    cursor: default;
}

.orb-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    transition: transform 0.4s ease;
}

.orb-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    position: absolute;
    bottom: 1.5rem;
}

/* Hover Effects */
.glass-orb:hover {
    transform: translate(-50%, -50%) translateY(-10px) scale(1.1) !important;
    z-index: 20;
}
.glass-orb:hover .orb-icon {
    transform: translateY(-10px);
}
.glass-orb:hover .orb-text {
    opacity: 1;
    transform: translateY(0);
}

/* Unique Glows */
.orb-honesty { box-shadow: 0 15px 35px rgba(0, 0, 255, 0.05); }
.orb-honesty:hover { box-shadow: 0 20px 50px rgba(0, 0, 255, 0.15), inset 0 0 0 2px rgba(0,0,255,0.1); }

.orb-safety { box-shadow: 0 15px 35px rgba(255, 165, 0, 0.05); }
.orb-safety:hover { box-shadow: 0 20px 50px rgba(255, 165, 0, 0.15), inset 0 0 0 2px rgba(255,165,0,0.1); }

.orb-quality { box-shadow: 0 15px 35px rgba(0, 255, 255, 0.05); }
.orb-quality:hover { box-shadow: 0 20px 50px rgba(0, 255, 255, 0.15), inset 0 0 0 2px rgba(0,255,255,0.1); }

.orb-art { box-shadow: 0 15px 35px rgba(255, 0, 255, 0.05); }
.orb-art:hover { box-shadow: 0 20px 50px rgba(255, 0, 255, 0.15), inset 0 0 0 2px rgba(255,0,255,0.1); }

.orb-time { box-shadow: 0 15px 35px rgba(0, 255, 0, 0.05); }
.orb-time:hover { box-shadow: 0 20px 50px rgba(0, 255, 0, 0.15), inset 0 0 0 2px rgba(0,255,0,0.1); }


/* Positioning (72 degrees apart) on a 350px radius circle */
/* r = 350px. 
   1: top center (0 deg) -> x=0, y=-r 
   2: top right (72 deg) -> x=r*sin(72), y=-r*cos(72) -> x=333, y=-108
   3: bottom right (144 deg) -> x=r*sin(144), y=-r*cos(144) -> x=206, y=283
   4: bottom left (216 deg) -> x=r*sin(216), y=-r*cos(216) -> x=-206, y=283
   5: top left (288 deg) -> x=r*sin(288), y=-r*cos(288) -> x=-333, y=-108
   Center of container is (350, 350).
*/
.orb-1 { top: 0%; left: 50%; transform: translate(-50%, -50%); }
.orb-2 { top: 19%; left: 97.5%; transform: translate(-50%, -50%); }
.orb-3 { top: 90%; left: 79%; transform: translate(-50%, -50%); }
.orb-4 { top: 90%; left: 21%; transform: translate(-50%, -50%); }
.orb-5 { top: 19%; left: 2.5%; transform: translate(-50%, -50%); }

/* Mobile Layout */
@media (max-width: 900px) {
    .orbit-container {
        width: 100%;
        height: auto;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .orbit-center {
        position: relative;
        top: 0; left: 0; transform: none;
        width: 100%;
        padding: 0 1rem;
        box-shadow: none;
        background: transparent;
        margin-bottom: 3rem;
    }
    
    #vision-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        width: 100%;
    }
    
    .glass-orb {
        position: relative;
        top: 0 !important; left: 0 !important; transform: none !important;
        width: 100%;
        height: auto;
        border-radius: 16px;
        padding: 2rem 1rem;
    }
    
    .glass-orb:hover {
        transform: translateY(-5px) !important;
    }
    
    .orb-icon {
        transform: none !important;
    }
    
    .orb-text {
        opacity: 1;
        transform: none;
        position: relative;
        bottom: 0;
        margin-top: 1rem;
    }
    
    /* Make the last odd orb span 2 columns */
    .glass-orb:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}


/* ==========================================================================
   Image Lightbox
   ========================================================================== */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 37, 64, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.lightbox.active .lightbox-img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: #ffffff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: var(--accent-color);
}

@media (max-width: 900px) {
    /* keep the CEO/company-info card beside the intro (its original narrow,
       single-column layout) instead of stacking it full-width */
    .hero-grid {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .hero-intro {
        width: 58%;
    }
    .hero-meta {
        width: 40%;
        min-width: 0;
        max-width: 330px;
        margin-top: 0;
    }
}



/* ==========================================================================
   MOBILE "FIT ONE SCREEN" OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 768px) {
    /* Compress the Hero Section drastically to fit on one screen */
    .hero-section {
        padding: 4.5rem 0 1rem 0 !important; /* Smaller top and bottom padding */
        position: relative !important;
        overflow: hidden !important;
    }
    .hero-grid {
        display: flex !important;
        flex-direction: row !important; /* Force Side-by-side on mobile */
        align-items: flex-start !important;
        gap: 0.5rem !important; 
    }
    .hero-intro {
        width: 55% !important;
        flex: 0 0 55% !important;
    }
    
    /* Shrink the title to fit nicely */
    .hero-title {
        font-size: 1.6rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.1 !important;
    }
    
    /* Condense the paragraphs */
    .vision-paragraph {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    .hero-description {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 5 Pillars: slide live show animation */
    .hero-pillars-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        animation: mobileMarquee 12s linear infinite !important;
        margin-top: 1rem !important;
        overflow: visible !important;
    }
    
    @keyframes mobileMarquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    
    .hero-pillars-row .glass-orb {
        margin-right: 0.5rem !important;
    }
    
    /* Shrink Contact Card container and put on right side */
    .hero-meta {
        width: 45% !important;
        flex: 0 0 45% !important;
        margin-top: 0 !important;
        padding: 0.5rem !important;
    }
    .meta-item {
        flex-direction: column !important; /* Stack icon and text to fit narrow column */
        align-items: flex-start !important;
        padding-bottom: 0.4rem !important;
        margin-bottom: 0.4rem !important;
        gap: 0.2rem !important;
    }
    .meta-item:last-child {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .meta-content {
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }
    .meta-value {
        font-size: 0.65rem !important; /* Extremely small to fit 45% width */
        line-height: 1.2 !important;
        word-break: break-word !important;
    }
    .meta-label {
        font-size: 0.5rem !important;
        margin-bottom: 2px !important;
    }
    .meta-icon-box {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
        margin-bottom: 0.2rem !important;
    }
    .meta-icon-box svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ==========================================================================
   BULLETPROOF MOBILE LAYOUT & BOTTOM DOCK
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

@media (max-width: 768px) {
    /* Position the header items using flex flow on mobile to prevent overlapping */
    .header-container {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0.5rem 1rem !important;
    }
    
    .brand-logo {
        position: relative !important;
        left: 0 !important;
        top: auto !important;
        transform: none !important;
        margin-right: auto !important; /* Push the other items to the right */
        order: 1 !important;
    }
    
    .header-controls {
        position: relative !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
        gap: 0.2rem !important; /* Move mode toggle closer to language switcher */
        order: 2 !important;
    }
    
    .dock-container {
        position: relative !important;
        right: 0 !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        padding: 0 !important;
        z-index: 9999 !important;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        order: 3 !important;
        margin-left: 1.25rem !important; /* Move 3 dot menu further away from mode toggle */
    }
    
    .lang-switch-toggle {
        width: auto !important;
        gap: 0.4rem !important;
    }
    
    .lang-btn-option img {
        width: 20px !important;
        height: 15px !important;
    }
    
    .mobile-dock-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0,0,0,0.1);
        color: #333;
        cursor: pointer;
        z-index: 10000;
        pointer-events: auto;
    }
    .mobile-dock-toggle svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    [data-theme="dark"] .mobile-dock-toggle {
        background: rgba(20, 20, 20, 0.9);
        border: 1px solid rgba(255,255,255,0.1);
        color: #fff;
    }
    
    .floating-dock {
        position: fixed !important;
        top: 70px !important;
        right: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        transform: translateY(-10px) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 0 12px 12px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    [data-theme="dark"] .floating-dock {
        background: rgba(30, 30, 30, 0.95) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .floating-dock.show {
        pointer-events: auto !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
    
    .dock-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
        padding: 0.5rem 0 !important;
        align-items: stretch !important;
        overflow: visible !important;
    }
    
    .dock-item {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    
    .dock-link {
        display: flex !important;
        width: 100% !important;
        padding: 0.8rem 1.5rem !important;
        border-radius: 0 !important;
        justify-content: flex-start !important;
        box-sizing: border-box;
    }
    
    .dock-item:not(:last-child) .dock-link {
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    [data-theme="dark"] .dock-item:not(:last-child) .dock-link {
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    
    /* Ensure Header doesn't overflow */
    .header-container {
        flex-wrap: nowrap !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    /* Hide the text 'LAO', 'EN', 'ZH' on mobile, just show small buttons */
    .lang-btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    .theme-toggle {
        padding: 0.4rem !important;
    }
    
    /* Ensure Hero Intro takes exactly 100% of the screen width */
    .hero-intro {
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-meta {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   SHRINK-TO-FIT DESKTOP LAYOUTS ON MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    /* Force Roadmap to stay horizontal and zoom out */
    .roadmap-section {
        overflow: hidden !important;
    }
    .roadmap-path-container {
        width: 1100px !important;
        margin: 0 auto !important;
        transform: scale(0.33) !important;
        transform-origin: center center !important;
        margin-top: -30% !important;
        margin-bottom: -30% !important;
    }
    
    /* Chrome/Safari specific zoom support to fix bounding boxes */
    @supports (zoom: 0.35) {
        .roadmap-path-container {
            transform: none !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            zoom: 0.33 !important;
            display: flex !important;
            justify-content: center !important;
        }
    }
    
    /* Force Org Chart to stay horizontal and zoom out */
    .org-template-wrapper {
        width: 1100px !important;
        margin: 0 auto !important;
        transform: scale(0.33) !important;
        transform-origin: top center !important;
        margin-bottom: -50% !important;
    }
    
    @supports (zoom: 0.35) {
        .org-template-wrapper {
            transform: none !important;
            margin-bottom: 0 !important;
            zoom: 0.35 !important;
        }
    }
    
    /* Adjust specific roadmap offsets if needed when scaled */
    .roadmap-stop {
        min-width: 320px !important;
    }
}

/* ==========================================================================
   CLEAN MODERN MOBILE HERO & INFO CARD (2026 refresh)
   Overrides the cramped side-by-side hero with a stacked, readable layout.
   ========================================================================== */
@media (max-width: 768px) {
    .hero-section {
        padding: 4.5rem 0 1.5rem 0 !important;
    }
    /* Stack: intro on top, info card full-width below */
    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1.5rem !important;
    }
    .hero-intro,
    .hero-meta {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .hero-title {
        font-size: 2.1rem !important;
        line-height: 1.15 !important;
        margin-bottom: 0.85rem !important;
    }
    .hero-description {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.5rem !important;
    }

    /* The contact info as one clean, premium card */
    .hero-meta {
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 18px !important;
        padding: 0.5rem 1.25rem !important;
        margin-top: 0 !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
    }
    .hero-meta .meta-item,
    .meta-item {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.85rem !important;
        padding: 0.9rem 0 !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border-light) !important;
    }
    .hero-meta .meta-item:last-child,
    .meta-item:last-child {
        border-bottom: none !important;
        padding-bottom: 0.4rem !important;
    }
    .meta-icon-box {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 12px !important;
    }
    .meta-icon-box svg {
        width: 18px !important;
        height: 18px !important;
    }
    .meta-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.15rem !important;
        min-width: 0 !important;
    }
    .meta-label {
        font-size: 0.62rem !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 0 !important;
    }
    .meta-value {
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
    }
    .contact-links-group {
        gap: 0.05rem !important;
    }

    /* News feed: single full-width column that fits the phone (was clipping) */
    .activity-section {
        padding: 4rem 1.25rem !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .activity-feed-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        width: 100% !important;
    }
    .activity-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Keep all card grids to one tidy column on phones */
    .about-pillars,
    .project-entries,
    .tier-grid,
    .highway-list {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   PREMIUM REFRESH (2026): elevated Tiffany surfaces, real info card,
   and a clean seamless 5-pillar marquee. This block is authoritative.
   ========================================================================== */

/* 1) Tiffany: clean frosted-white cards with thin gold outlines */

/* 2) The hero info card — a genuine elevated card in every theme */
.hero-meta {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
}
[data-theme="dark"] .hero-meta {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}
.hero-meta .meta-item { border-bottom-color: var(--border-light); }

/* 3) The 5 pillars: a calm static row of pills (wraps on small screens) */
.hero-pillars-container {
    width: 100%;
    overflow: hidden;
    padding: 1.6rem 0;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.hero-pillars-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 0 !important;
    /* opacity:1 is required: the .animate-text-delay class sets opacity:0 and
       relies on a fadeIn animation that no longer applies here */
    opacity: 1 !important;
}
.vision-glass-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    row-gap: 0.9rem !important;
}
/* Each pillar is a clean floating pill */
.hero-pillars-row .vision-glass-card,
.vision-glass-card {
    position: relative !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    white-space: nowrap !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0.9rem 0 0 !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 999px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.25s ease !important;
}
[data-theme="dark"] .vision-glass-card {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
.vision-glass-card:hover { transform: translateY(-3px) !important; }
.vision-glass-card::before { display: none !important; } /* drop old glow blob */
.vision-glass-card .glass-icon {
    font-size: 1.2rem !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.vision-glass-card .glass-text {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
    white-space: nowrap !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .hero-pillars-container {
        margin-top: 1.25rem;
        padding: 1.25rem 0;
    }
    .vision-glass-card {
        padding: 0.5rem 1rem !important;
        margin-right: 0.7rem !important;
    }
    .vision-glass-card .glass-text { font-size: 0.8rem !important; }
}

/* ==========================================================================
   MOBILE MENU VISIBILITY (per theme) + COMPACT "NAME CARD" INFO CARD
   ========================================================================== */
@media (max-width: 768px) {
    /* Dropdown nav menu: solid, high-contrast panel in every theme */
    .floating-dock {
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }
    [data-theme="light"] .floating-dock {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme="dark"] .floating-dock {
        background: #15171a !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
    }
    /* Clear, readable menu rows */
    .floating-dock .dock-item { color: var(--text-color) !important; }
    .floating-dock .dock-item .dock-label {
        color: var(--text-color) !important;
        opacity: 1 !important;
        font-size: 0.95rem !important;
    }
    .floating-dock .dock-item.active,
    .floating-dock .dock-item.active .dock-label { color: var(--accent-color) !important; }
    .floating-dock .dock-icon svg { stroke: currentColor !important; }

    /* Company info as a compact business "name card" */
    .hero-meta {
        padding: 0.35rem 1rem !important;
        border-radius: 16px !important;
    }
    .hero-meta .meta-item,
    .meta-item {
        padding: 0.5rem 0 !important;
        gap: 0.6rem !important;
    }
    .meta-icon-box {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
    }
    .meta-icon-box svg { width: 15px !important; height: 15px !important; }
    .meta-label {
        font-size: 0.55rem !important;
        letter-spacing: 0.07em !important;
    }
    .meta-value { font-size: 0.8rem !important; line-height: 1.3 !important; }
    /* Make the first row (the person's name) read like the card's headline */
    .hero-meta .meta-item:first-child .meta-value {
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }
}

/* ==========================================================================
   MOBILE ORGANIZATION CHART — original tree scaled to FIT the screen width
   (JS measures the chart and sets the exact scale so nothing is cut off and
    all connector lines stay aligned)
   ========================================================================== */
@media (max-width: 768px) {
    .org-section { padding: 3rem 0.75rem 3rem !important; overflow: hidden !important; position: relative !important; }
    .org-section .org-header { padding: 0 !important; }

    /* Force the frame to exactly the viewport width (full-bleed) so the JS
       scale is computed against the screen, not the chart's own width */
    .org-scroll {
        position: relative !important;
        width: 100vw !important; max-width: 100vw !important;
        margin-left: 50% !important; transform: translateX(-50%) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 0.5rem 0.5rem 1rem !important;
    }

    /* Keep the original layout; JS applies transform: scale(...) to fit */
    .org-template-wrapper {
        transform-origin: top left !important;
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        zoom: 1 !important;
    }
    .org-v-line, .org-h-split, .org-left-line, .org-h-connector { display: none !important; }
}

/* ---- Premium polish for the org cards (all screen sizes; sizes unchanged) ---- */
.org-capsule { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08) !important; }
.org-capsule.solid-gold {
    background: linear-gradient(135deg, #d9bd7e, #b8975a) !important;
    box-shadow: 0 12px 28px rgba(184, 151, 90, 0.35) !important;
}
[data-theme="dark"] .org-capsule { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important; }
.org-card-modern { box-shadow: 0 5px 16px rgba(0, 0, 0, 0.06) !important; }

/* ==========================================================================
   MOBILE: company info as a tap-to-open button + popup
   ========================================================================== */
.company-info-trigger { display: none; }

.info-modal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: flex-end; justify-content: center; }
.info-modal[hidden] { display: none; }
.info-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.25s ease; }
.info-modal.open .info-modal-backdrop { opacity: 1; }
.info-modal-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 22px 22px 0 0;
    padding: 1.1rem 1.25rem 1.6rem;
    box-shadow: 0 -12px 45px rgba(0,0,0,0.35);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
    max-height: 85vh;
    overflow-y: auto;
}
.info-modal.open .info-modal-card { transform: translateY(0); }
.info-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.info-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--text-color); }
.info-modal-close {
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}
.info-modal-close:active { background: rgba(128,128,128,0.15); }
.info-modal-body .meta-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; }

@media (min-width: 600px) {
    .info-modal { align-items: center; }
    .info-modal-card { border-radius: 22px; transform: translateY(20px) scale(0.97); box-shadow: 0 25px 60px rgba(0,0,0,0.4); }
    .info-modal.open .info-modal-card { transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
    /* Hide the inline card; the button opens it in a popup instead */
    .hero-meta { display: none !important; }

    .company-info-trigger {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        margin-top: 1.25rem;
        padding: 0.8rem 1rem;
        border-radius: 16px;
        cursor: pointer;
        text-align: left;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        box-shadow: 0 8px 22px rgba(0,0,0,0.10);
        color: var(--text-color);
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s ease, border-color 0.2s ease;
    }
    .company-info-trigger:active { transform: scale(0.98); }
    .cit-icon {
        flex-shrink: 0; width: 42px; height: 42px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 12px; background: rgba(191,161,95,0.15); color: var(--accent-color);
    }
    .cit-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    .cit-title { font-size: 0.95rem; font-weight: 700; }
    .cit-sub { font-size: 0.72rem; color: var(--text-muted); }
    .cit-arrow { color: var(--accent-color); font-size: 1.15rem; flex-shrink: 0; }
}

/* ==========================================================================
   ORG CHART — robust connectors (replace the misaligned manual line divs)
   Guarantees lines meet the boxes at every size. Applies on desktop & mobile.
   ========================================================================== */
.org-v-line, .org-h-split, .org-left-line, .org-h-connector { display: none !important; }

.org-columns-container { align-items: flex-start; }

/* President -> Vice President */
.org-center-chain > .org-capsule { position: relative; margin-bottom: 28px; }
.org-center-chain > .org-capsule:last-child { margin-bottom: 0; }
.org-center-chain > .org-capsule:not(:last-child)::after {
    content: ''; position: absolute; left: 50%; top: 100%;
    transform: translateX(-50%); width: 2px; height: 28px; background: #c29d5b;
}

/* Vice President -> horizontal bus */
.org-columns-container { position: relative; margin-top: 28px; }
.org-columns-container::before {
    content: ''; position: absolute; left: 50%; top: -28px;
    transform: translateX(-50%); width: 2px; height: 28px; background: #c29d5b;
}

/* Horizontal bus across the managers + a drop into each one */
.org-column { position: relative; padding-top: 28px; }
.org-column::before {  /* vertical drop to the manager */
    content: ''; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%); width: 2px; height: 28px; background: #c29d5b;
}
.org-column::after {   /* bus segment (extends into the gaps so it's continuous) */
    content: ''; position: absolute; top: 0; left: -24px; right: -24px;
    height: 2px; background: #c29d5b;
}
.org-column:first-child::after { left: 50%; }
.org-column:last-child::after { right: 50%; }
.org-column:only-child::after { display: none; }

/* Manager -> its units (centred, connected) */
.org-left-tree { align-items: center; margin-top: 0; padding-left: 0; }
.org-list-item { position: relative; margin-top: 26px; }
.org-list-item::before {
    content: ''; position: absolute; left: 50%; bottom: 100%;
    transform: translateX(-50%); width: 2px; height: 26px; background: #c29d5b;
}

/* ==========================================================================
   SUBSIDIARIES — live premium marquee of companies under PSL Group
   ========================================================================== */
.subsidiaries-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 2rem;
}
.subs-header { text-align: center; margin-bottom: 2.5rem; }
.subs-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.subs-track {
    display: flex;
    width: max-content;
    align-items: stretch;
    animation: pslMarquee 45s linear infinite;
}
.subs-track:hover { animation-play-state: paused; }
.sub-chip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-right: 1.25rem;
    padding: 0.9rem 1.5rem;
    border-radius: 16px;
    white-space: nowrap;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .sub-chip { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }
.sub-chip-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.sub-chip-name { font-weight: 600; font-size: 0.98rem; color: var(--text-color); letter-spacing: 0.01em; }

@media (max-width: 768px) {
    .subsidiaries-section { padding: 3rem 0 1.5rem; }
    .subs-track { animation-duration: 30s; }
    .sub-chip { padding: 0.75rem 1.1rem; margin-right: 0.9rem; }
    .sub-chip-logo { width: 32px; height: 32px; }
    .sub-chip-name { font-size: 0.85rem; }
}

/* ==========================================================================
   FIX: mobile menu (3-line) button colour in Tiffany mode
   ========================================================================== */

/* ==========================================================================
   PREMIUM NAME-CARD popup (company info)
   ========================================================================== */
.info-modal-card {
    border-top: 3px solid var(--accent-color) !important;
}
.info-modal-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}
.info-modal-brand img { width: 40px; height: 40px; object-fit: contain; }
.info-modal-brand .imb-name { font-weight: 700; font-size: 1.05rem; color: var(--text-color); }
.info-modal-brand .imb-tag {
    font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent-color); font-weight: 600;
}

/* ==========================================================================
   PREMIUM 2026 POLISH · clean glassmorphism, soft light on dark, smooth iOS
   --------------------------------------------------------------------------
   Subtle, not heavy. Frosted-glass surfaces, glowing icon orbs, gentle light
   blooms in the dark areas, refined headings, and responsive tap feedback.
   ========================================================================== */

/* --- design tokens: glass + glow, tuned per theme --- */
:root {
    --glass-surface: linear-gradient(155deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42));
    --glass-border: rgba(255,255,255,0.75);
    --glass-top-light: rgba(255,255,255,0.95);
    --glass-shadow: 0 22px 45px -18px rgba(10,37,64,0.22);
    --orb-surface: linear-gradient(150deg, color-mix(in srgb, var(--accent-color) 22%, transparent), color-mix(in srgb, var(--accent-color) 6%, transparent));
    --orb-glow: 0 8px 22px -6px color-mix(in srgb, var(--accent-color) 45%, transparent);
    --bloom: color-mix(in srgb, var(--accent-color) 16%, transparent);
}
[data-theme="dark"] {
    --glass-surface: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    --glass-border: rgba(255,255,255,0.10);
    --glass-top-light: rgba(255,255,255,0.22);
    --glass-shadow: 0 26px 55px -20px rgba(0,0,0,0.65);
    --bloom: color-mix(in srgb, var(--accent-color) 18%, transparent);
}

/* --- frosted glass cards: refined surface, top light edge, ambient depth --- */
.about-pillar,
.activity-card,
.contact-card {
    background: var(--card-bg);
    background-image: var(--glass-surface);
    background-blend-mode: overlay;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    position: relative;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.5s cubic-bezier(0.16,1,0.3,1),
                border-color 0.5s ease;
}
/* hairline of light along the top edge — the "glass" catch-light */
.about-pillar::before,
.activity-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-top-light), transparent);
    opacity: 0.8;
    pointer-events: none;
}
.about-pillar:hover,
.activity-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent-color) 55%, var(--glass-border));
    box-shadow: var(--glass-shadow), 0 0 0 1px color-mix(in srgb, var(--accent-color) 20%, transparent),
                0 18px 50px -20px var(--bloom);
}

/* project cards: same premium glass + soft accent glow on hover */
.project-entry {
    box-shadow: var(--glass-shadow);
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.5s cubic-bezier(0.16,1,0.3,1),
                border-color 0.5s ease;
}
.project-entry:hover,
[data-theme="dark"] .project-entry:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color));
    box-shadow: var(--glass-shadow), 0 20px 55px -22px var(--bloom);
}
/* gentle gradient veil over photos so titles & glow read cleanly */
.project-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.18));
    pointer-events: none;
}

/* --- premium glowing icon orbs (frosted glass + light ring) --- */
.about-pillar-icon,
.hero-meta .meta-icon-box {
    background: var(--orb-surface) !important;
    color: var(--accent-color);
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    box-shadow: var(--orb-glow),
                inset 0 1px 1px rgba(255,255,255,0.35);
    position: relative;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
}
/* inner top sheen */
.about-pillar-icon::after,
.hero-meta .meta-icon-box::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -10%;
    width: 70%;
    height: 80%;
    background: radial-gradient(circle, rgba(255,255,255,0.45), transparent 70%);
    pointer-events: none;
}
.about-pillar:hover .about-pillar-icon {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 30px -6px color-mix(in srgb, var(--accent-color) 60%, transparent),
                inset 0 1px 1px rgba(255,255,255,0.4);
}

/* --- section heading kicker: glowing accent pill with a live dot --- */
.sub-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.9rem;
}
.sub-heading::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 18%, transparent),
                0 0 12px color-mix(in srgb, var(--accent-color) 70%, transparent);
}

/* refined section titles — a touch of glow lifts them off the dark canvas */
[data-theme="dark"] .section-title,
[data-theme="dark"] .hero-title {
    text-shadow: 0 1px 30px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

/* --- soft light blooms in the dark areas (localized, gentle; dark theme only) --- */
[data-theme="dark"] .page-section {
    position: relative;
}
[data-theme="dark"] .page-section > * {
    position: relative;
    z-index: 1;
}
[data-theme="dark"] #home::before,
[data-theme="dark"] #about::before,
[data-theme="dark"] #projects::before {
    content: "";
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 320px;
    background: radial-gradient(ellipse at center, var(--bloom), transparent 70%);
    filter: blur(20px);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

/* --- smooth, tactile feedback for touch (iOS) --- */
a, button, .dock-item, .theme-toggle, .lang-btn-option,
.about-pillar, .project-entry, .activity-card, .sub-chip {
    -webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
    button:active, .dock-item:active, .theme-toggle:active,
    .lang-btn-option:active, .submit-btn:active,
    .project-card-img:active, .activity-img-photo:active {
        transform: scale(0.96);
        transition: transform 0.12s ease;
    }
}

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

/* ==========================================================================
   CLASSIC LUXURY · soft, framed cards + elegant serif headings
   --------------------------------------------------------------------------
   A government-grade, "wealth" feel: every card softened with deep layered
   shadows, a refined accent frame-line, generous rounded corners, and a
   classic serif for display headings (paired with Noto Serif Lao so Lao
   script stays coherent). Touches every box so nothing feels flat.
   ========================================================================== */

:root {
    /* deep, soft, layered shadow — reads as expensive, not harsh */
    --soft-shadow: 0 1px 2px rgba(10,37,64,0.04),
                   0 10px 22px -10px rgba(10,37,64,0.10),
                   0 32px 60px -22px rgba(10,37,64,0.16);
    --glass-shadow: var(--soft-shadow);
    /* fine accent hairline along the top inner edge — the "framed art" detail */
    --card-frame: inset 0 1.5px 0 color-mix(in srgb, var(--accent-color) 32%, transparent);
    --font-display: 'Playfair Display', 'Phetsarath OT', 'Noto Serif Lao', Georgia, serif;
}
[data-theme="dark"] {
    --soft-shadow: 0 1px 2px rgba(0,0,0,0.30),
                   0 12px 28px -12px rgba(0,0,0,0.50),
                   0 38px 72px -24px rgba(0,0,0,0.62);
}

/* --- elegant classic serif for display headings --- */
.hero-title,
.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.005em;
}
.hero-title { font-weight: 700; letter-spacing: -0.01em; }

/* --- one soft, framed card language for every box on the site --- */
.about-pillar,
.activity-card,
.contact-card,
.project-entry,
.roadmap-card,
.portfolio-card,
.vision-glass-card,
.org-card,
.hero-meta,
.step-content,
.info-modal-card {
    border-radius: 18px !important;
    box-shadow: var(--soft-shadow), var(--card-frame) !important;
    transition: transform 0.55s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.55s cubic-bezier(0.16,1,0.3,1),
                border-color 0.45s ease !important;
}

/* normalise the heavy coloured top borders into the refined inset frame */
.roadmap-card,
.hero-meta {
    border-top: 1px solid var(--glass-border) !important;
}

/* gentle, consistent hover: soft lift + warm accent bloom + accent edge */
.about-pillar:hover,
.activity-card:hover,
.contact-card:hover,
.project-entry:hover,
.portfolio-card:hover,
.vision-glass-card:hover,
.roadmap-card:hover,
.org-card:hover {
    box-shadow: var(--soft-shadow), var(--card-frame),
                0 26px 60px -26px var(--bloom) !important;
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color)) !important;
}

/* soften the smaller pieces too — chips, org capsules, stat tiles */
.sub-chip { box-shadow: var(--soft-shadow); border-radius: 16px; }
.spec-chip { box-shadow: var(--soft-shadow); border-radius: 12px; }
.org-capsule { box-shadow: var(--soft-shadow) !important; }
.stat-item { border-radius: 12px; box-shadow: var(--soft-shadow); }

/* refined gold-to-hairline dividers (classic, restrained) */
.section-divider {
    height: 1px !important;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent-color) 42%, transparent),
        var(--border-color) 55%, transparent) !important;
}

/* refine the portfolio cards' loud top stripe into an elegant gold band, and
   drop the doubled inset frame so each card carries a single classic accent */
.card-glass-bg {
    height: 3px !important;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent-color) 22%, transparent),
        var(--accent-color) 50%,
        color-mix(in srgb, var(--accent-color) 22%, transparent)) !important;
}
.portfolio-card {
    box-shadow: var(--soft-shadow) !important;
}
.portfolio-card:hover {
    box-shadow: var(--soft-shadow), 0 26px 60px -26px var(--bloom) !important;
}

/* --- refined numerals: tabular figures + elegant display numbers --- */
.stat-value, .card-value, .roadmap-year, .spec-chip-value,
.meta-value, .project-entry-detail {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.stat-value, .card-value {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}
/* value figures follow the theme accent (was hard-coded gold) */
.card-value { color: var(--accent-color) !important; }

/* ==========================================================================
   TIFFANY · clean light "glass" refinement + font-colour hierarchy
   ========================================================================== */

/* airy canvas: a soft vertical wash of Tiffany blue (lighter at the top) */

/* frost every card so the Tiffany blue glows softly through the glass */

/* --- TEXT ON THE TEAL CANVAS: ivory headings, gold kicker, light body --- */

/* text inside the white cards: deep teal headings, muted teal body */

/* clean frosted-white surfaces with a thin gold outline (no gold fill) */

/* icon orbs become GOLD CIRCLE LINES — a thin gold ring, light fill, gold mark */

/* the tier badge: a refined gold OUTLINE pill (gold line, not a gold fill) */

/* ==========================================================================
   PRO ICONOGRAPHY · crafted line-icons replace emoji (premium, consistent)
   ========================================================================== */
.about-pillar-icon svg { width: 26px; height: 26px; display: block; }
.glass-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-color); }
.glass-icon svg { width: 18px; height: 18px; display: block; }
.hw-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-color); }
.hw-icon svg { width: 26px; height: 26px; display: block; }

/* portfolio card icon → a refined accent glass orb, matching the about pillars */
.card-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: var(--accent-color);
    background: var(--orb-surface);
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    box-shadow: var(--orb-glow), inset 0 1px 1px rgba(255,255,255,0.4);
    margin-bottom: 1.4rem;
    font-size: 0;
}
.card-icon svg { width: 28px; height: 28px; display: block; }

/* ==========================================================================
   EDITORIAL TYPOGRAPHY · refined scale, rhythm and letter-spacing
   ========================================================================== */
.hero-title { letter-spacing: -0.018em; line-height: 1.07; }
.section-title { letter-spacing: 0; line-height: 1.15; }
.sub-heading { font-size: 0.7rem; letter-spacing: 0.26em; }
.about-pillar h4,
.portfolio-card h4,
.roadmap-card h4,
.project-entry-name { letter-spacing: 0.002em; }
.hero-description,
.about-lead,
.about-pillar p,
.card-desc,
.portfolio-subtitle,
.vision-paragraph { line-height: 1.78; }
/* a touch more air inside the premium cards */
.about-pillar { padding: 2.25rem 2rem; }
.portfolio-card { padding: 2.6rem 2.2rem; }

/* ==========================================================================
   BRAND CONSISTENCY · every accent follows the active theme (no stray gold/red)
   ========================================================================== */
.tier-badge {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark)) !important;
    color: #fff !important;
}
.hw-length {
    color: var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 9%, transparent) !important;
}
.past-list li::before { color: var(--accent-color) !important; }
.portfolio-card:hover,
.roadmap-card:hover {
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color)) !important;
}
.roadmap-year {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark)) !important;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent-color) 60%, transparent) !important;
}

/* Tiffany / Gold: white card form → clean white inputs, gold edge */

/* ==========================================================================
   CORPORATE ROADMAP · "The Road Ahead" — a perspective road to the future
   A dark asphalt road recedes to a glowing horizon (far = founding) and
   widens toward the viewer (near = today → future). Gold lane markings drift
   forward; milestones sit along the road, growing as they approach.
   ========================================================================== */
.road-journey {
    position: relative;
    max-width: 1080px;
    margin: 1rem auto 0;
    padding: 0 1.5rem 2rem;
}

/* --- the road scene (sits behind the milestones) --- */
.road-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.road-sky {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 220px;
    background: radial-gradient(70% 120% at 50% 100%,
        rgba(230,194,122,0.20), transparent 70%);
}
.road-horizon {
    position: absolute;
    top: 46px; left: 50%;
    transform: translateX(-50%);
    width: 240px; height: 90px;
    background: radial-gradient(ellipse at center,
        rgba(255,244,214,0.9), rgba(230,194,122,0.5) 35%, transparent 72%);
    filter: blur(6px);
    border-radius: 50%;
}
.road-surface {
    position: absolute;
    top: 80px; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 340px;
    background:
        linear-gradient(180deg, #1c4a47 0%, #123734 40%, #0c2826 100%);
    clip-path: polygon(45.5% 0, 54.5% 0, 86% 100%, 14% 100%);
    box-shadow: 0 0 80px rgba(0,0,0,0.25);
}
/* soft bright edges of the tarmac */
.road-surface::before,
.road-surface::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 46%;
    background: linear-gradient(180deg, rgba(230,194,122,0.55), rgba(230,194,122,0.12));
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 96% 100%);
    opacity: 0.5;
}
.road-surface::before { left: 0; transform: scaleX(-1); }
.road-surface::after  { right: 0; }
/* drifting centre lane markings (perspective taper) */
.road-lane {
    position: absolute;
    top: 80px; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 64px;
    clip-path: polygon(46% 0, 54% 0, 58% 100%, 42% 100%);
    background: repeating-linear-gradient(180deg,
        rgba(244,214,150,0.95) 0 16px, transparent 16px 54px);
    /* shift exactly one pattern period (54px) so the loop is perfectly
       seamless — a continuous drift, not a stuttering "loading" restart */
    animation: roadLaneMove 2.4s linear infinite;
}
@keyframes roadLaneMove {
    from { background-position-y: 0; }
    to   { background-position-y: 54px; }
}

/* --- milestones along the road --- */
.road-stops {
    position: relative;
    z-index: 2;
    padding-top: 96px;
}
.road-stop {
    display: grid;
    grid-template-columns: 1fr 96px 1fr;
    align-items: center;
    column-gap: 1.5rem;
    margin-bottom: 1.6rem;
}
.road-card {
    grid-column: 1;
    justify-self: end;
    position: relative;
    max-width: 430px;
    background: var(--card-bg);
    background-image: var(--glass-surface);
    background-blend-mode: overlay;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.55rem 1.8rem;
    box-shadow: var(--soft-shadow), var(--card-frame);
}
.road-stop:nth-child(even) .road-card {
    grid-column: 3;
    justify-self: start;
}
/* connector from card to the road */
.road-card::after {
    content: "";
    position: absolute;
    top: 2rem;
    width: 1.5rem; height: 2px;
    background: linear-gradient(90deg, rgba(230,194,122,0.9), rgba(230,194,122,0.2));
}
.road-stop:nth-child(odd) .road-card::after { right: -1.5rem; }
.road-stop:nth-child(even) .road-card::after { left: -1.5rem; transform: scaleX(-1); }

.road-year {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0.015em;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    margin-bottom: 0.6rem;
    background: linear-gradient(120deg, #d8b25a 0%, #b0851f 55%, #8a6916 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.road-year::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 8px;
    border-radius: 3px;
    background: linear-gradient(90deg, #d8b25a, rgba(216,178,90,0.15));
}
.road-card h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.5rem 0;
}
.road-card p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

/* the milestone node sitting on the road (grows as it nears the viewer) */
.road-node {
    grid-column: 2;
    justify-self: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #f4d696;
    border: 2px solid #fff7e6;
    box-shadow: 0 0 0 5px rgba(230,194,122,0.18), 0 0 16px rgba(244,214,150,0.85);
}
.road-stops .road-stop:nth-child(2) .road-node { width: 20px; height: 20px; }
.road-stops .road-stop:nth-child(3) .road-node { width: 24px; height: 24px; }

/* --- the future, nearest to the viewer --- */
.road-stop--future .road-node--future {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #fff4d6, #e6c27a 70%);
    box-shadow: 0 0 0 8px rgba(230,194,122,0.20),
                0 0 30px rgba(244,214,150,0.9);
    animation: roadFuturePulse 2.6s ease-in-out infinite;
}
.road-stop--future .road-node--future::after {
    content: "";
    width: 14px; height: 14px;
    border-right: 3px solid #5a3d12;
    border-bottom: 3px solid #5a3d12;
    transform: rotate(45deg) translate(-2px,-2px);
}
@keyframes roadFuturePulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(230,194,122,0.20), 0 0 26px rgba(244,214,150,0.8); }
    50%      { box-shadow: 0 0 0 12px rgba(230,194,122,0.10), 0 0 42px rgba(244,214,150,1); }
}
.road-card--future {
    border-color: rgba(230,194,122,0.6);
    box-shadow: var(--soft-shadow), 0 0 0 1px rgba(230,194,122,0.4), 0 18px 50px -18px rgba(230,194,122,0.5);
}
.road-year--future {
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    background: none;
    -webkit-text-fill-color: #c79436;
    color: #c79436;
}
.road-year--future::after { display: none; }

/* a little extra room so the glowing horizon reads as "distance" */
.roadmap-section .roadmap-header { margin-bottom: 0.5rem; }

/* ==========================================================================
   ORG CHART · keep each unit label on a single line (boxes hug their text)
   ========================================================================== */
.org-column { width: auto; min-width: 240px; }
.org-left-tree { width: max-content; min-width: 100%; }
.org-card-modern { width: max-content; }
.org-card-modern h4 { white-space: nowrap; font-size: 0.98rem; }
.org-capsule h4, .org-capsule p { white-space: nowrap; }
/* keep the chart within the viewport so the JS can scale it to fit any width */
.org-section { max-width: 100vw; overflow: hidden; }
.org-scroll { width: 100%; max-width: 100vw; overflow: hidden; margin: 0 auto; }

/* ==========================================================================
   PHONE (scaled ~900 viewport): compact the top nav so it fits in one tidy
   row. Because the whole page is scaled less, these still render larger and
   are easier to tap than the previous layout.
   ========================================================================== */
@media (max-width: 1000px) {
    .header-container { padding: 0.5rem 0.85rem; }
    .brand-logo { font-size: 1.12rem; gap: 0.5rem; }
    .brand-logo-img { height: 28px; }
    .dock-list { gap: 2px; }
    a.dock-item { padding: 6px 9px; gap: 5px; }
    .dock-item { min-width: 0; }
    .dock-icon { width: 28px; height: 28px; }
    .dock-icon svg { width: 17px; height: 17px; }
    .dock-label { font-size: 0.64rem; }
    .header-controls { gap: 0.55rem; }
    .lang-switch-toggle, .lang-btn-option { gap: 0.3rem; }
}

/* ==========================================================================
   THE 5 PROMISES · bigger, colourful pills with a symbol per meaning
   Each commitment gets its own signature colour + matching icon badge.
   ========================================================================== */
.hero-pillars-row .vision-glass-card,
.vision-glass-card {
    padding: 0.6rem 1.6rem 0.6rem 0.6rem !important;
    gap: 0.85rem !important;
    border-radius: 999px !important;
    margin-right: 1.1rem !important;
}
.vision-glass-card .glass-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}
.vision-glass-card .glass-icon svg { width: 24px !important; height: 24px !important; }
.vision-glass-card .glass-text { font-size: 1rem !important; font-weight: 600 !important; }

/* signature colour + glow per promise */
.card-honesty .glass-icon { background: linear-gradient(135deg,#14b8b0,#0a827c) !important; box-shadow: 0 6px 18px -5px rgba(10,138,133,0.65) !important; }
.card-safety  .glass-icon { background: linear-gradient(135deg,#f4b64e,#e0871a) !important; box-shadow: 0 6px 18px -5px rgba(224,135,26,0.65) !important; }
.card-quality .glass-icon { background: linear-gradient(135deg,#4aa6ea,#2f7fd1) !important; box-shadow: 0 6px 18px -5px rgba(47,127,209,0.6) !important; }
.card-art     .glass-icon { background: linear-gradient(135deg,#c46fdb,#9a3fc0) !important; box-shadow: 0 6px 18px -5px rgba(154,63,192,0.6) !important; }
.card-time    .glass-icon { background: linear-gradient(135deg,#4fce8d,#2fa86a) !important; box-shadow: 0 6px 18px -5px rgba(47,168,106,0.6) !important; }

/* give each pill a faint wash of its colour so the row reads colourful */
.card-honesty { border-color: rgba(20,184,176,0.45) !important; }
.card-safety  { border-color: rgba(224,135,26,0.45) !important; }
.card-quality { border-color: rgba(47,127,209,0.45) !important; }
.card-art     { border-color: rgba(154,63,192,0.45) !important; }
.card-time    { border-color: rgba(47,168,106,0.45) !important; }

/* ==========================================================================
   HERO v3 · "glassmorphism trust" — badge, gradient headline, CTAs, stats
   Reference-grade: tight tracking, glass pills, masked marquees.
   ========================================================================== */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-reveal { opacity: 0; animation: heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
.hero-d1 { animation-delay: 0.05s; }
.hero-d2 { animation-delay: 0.15s; }
.hero-d3 { animation-delay: 0.28s; }
.hero-d4 { animation-delay: 0.4s; }
.hero-d5 { animation-delay: 0.55s; }

/* --- trust badge (glass pill) --- */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    margin-bottom: 1.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg) 70%, transparent);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    box-shadow: var(--soft-shadow);
}
.hero-badge svg { width: 13px; height: 13px; color: var(--hero-gold, #b8860b); flex-shrink: 0; }

/* --- headline: tighter, larger, with a gradient second line --- */
.hero-title { letter-spacing: -0.025em; line-height: 1.04; }
.hero-title-grad {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.56em;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.18;
    background: var(--hero-grad, linear-gradient(105deg, #0A2540 15%, #b8860b 90%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.12em; /* keep Lao descenders unclipped */
}
:root            { --hero-grad: linear-gradient(105deg, #0A2540 15%, #b8860b 90%); --hero-gold: #b8860b; }
[data-theme="dark"]    { --hero-grad: linear-gradient(105deg, #ffffff 15%, #ffcd75 90%); --hero-gold: #ffcd75; }

/* --- CTA buttons --- */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.8rem;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 1.9rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, background 0.25s ease;
}
.hero-cta svg { width: 17px; height: 17px; transition: transform 0.25s ease; }
.hero-cta--primary {
    background: var(--text-color);
    color: var(--bg-color);
    box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--text-color) 55%, transparent);
}
.hero-cta--primary:hover { transform: translateY(-2px) scale(1.015); }
.hero-cta--primary:hover svg { transform: translateX(4px); }
.hero-cta--glass {
    background: color-mix(in srgb, var(--card-bg) 65%, transparent);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.hero-cta--glass:hover { transform: translateY(-2px); background: var(--card-bg); }

/* --- glass stats band --- */
.hero-stats {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.6rem;
    padding: 1.5rem 2rem;
    border-radius: 22px;
    background: var(--card-bg);
    background-image: var(--glass-surface);
    background-blend-mode: overlay;
    border: 1px solid var(--border-color);
    box-shadow: var(--soft-shadow), var(--card-frame);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.hero-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.3rem;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.hero-stat:hover { transform: translateY(-3px); }
.hero-stat-value {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--text-color);
}
.hero-stat-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.hero-stat-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, var(--border-color), transparent);
    flex-shrink: 0;
}

/* --- masked edge fade on the subsidiaries marquee (reference detail) --- */
.subs-marquee {
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

/* --- CTA buttons: both share the same calm teal-outline glass style --- */
.hero-cta--primary,
.hero-cta--glass {
    border: 1px solid rgba(10, 186, 181, 0.55);
    background: rgba(10, 186, 181, 0.08);
    color: #0a8a85;
    box-shadow: none;
}
.hero-cta--primary:hover,
.hero-cta--glass:hover { transform: translateY(-2px); background: rgba(10, 186, 181, 0.16); }
.hero-cta--primary:hover svg { transform: translateX(4px); }
[data-theme="dark"] .hero-cta--primary,
[data-theme="dark"] .hero-cta--glass { color: #6fe4df; background: rgba(10, 186, 181, 0.12); }

/* ==========================================================================
   ABOUT PILLARS · one-line 3D "card stand" carousel (narrow screens)
   Cards sit in a perspective row; the centered card faces the viewer and the
   side cards stand angled like a gallery — swipe to rotate through.
   ========================================================================== */
@media (max-width: 1000px) {
    .about-pillars {
        display: flex;
        overflow-x: auto;
        gap: 1.1rem;
        padding: 1.6rem 17% 2rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        perspective: 1100px;
    }
    .about-pillars::-webkit-scrollbar { display: none; }
    .about-pillar {
        flex: 0 0 60%;
        min-width: 230px;
        scroll-snap-align: center;
        transform-style: preserve-3d;
        will-change: transform;
    }
}

/* ==========================================================================
   2026 REFINEMENT · hero aside w/ featured photography, corporate footer,
   tighter roadmap, consistent news crops
   ========================================================================== */

/* --- hero right column: info card + featured photo stacked --- */
.hero-aside {
    width: 32%;
    min-width: 300px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.hero-aside .hero-meta {
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* --- featured work photography card --- */
.hero-photo-card {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    aspect-ratio: 4 / 3;
    background: var(--card-bg);
}
.hero-photo-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 6s ease;
}
.hero-photo-card:hover img { transform: scale(1.08); }
.hero-photo-card figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.6rem 1.2rem 1rem;
    background: linear-gradient(180deg, transparent, rgba(8, 9, 11, 0.82));
}
.hero-photo-card .hpc-kicker {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffcd75;
}
.hero-photo-card .hpc-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* --- site footer --- */
.site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    position: relative;
    z-index: 10;
}
.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 0.7fr 1fr 1.2fr;
    gap: 2.5rem;
    padding: 3.5rem 2rem 2.5rem;
}
.footer-brand .footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 800;
    font-size: 1.15rem;
}
.footer-brand .footer-logo img { height: 42px; width: auto; }
.footer-tagline {
    margin-top: 1rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 340px;
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.footer-heading {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin: 0 0 0.4rem 0;
}
.footer-col a,
.footer-col span {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.55;
    transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--text-color); }
.footer-bottom {
    border-top: 1px solid var(--border-light);
    padding: 1.2rem 2rem calc(1.2rem + 5.5rem); /* clearance for the fixed dock */
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}
@media (max-width: 992px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
    .footer-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem 2rem; }
}
/* the footer supplies the dock clearance now */
body { padding-bottom: 0; }

/* --- roadmap: interleave the alternating cards to remove dead space --- */
@media (min-width: 821px) {
    .road-stop:nth-child(even) { margin-top: -4.5rem; }
    .road-stop { margin-bottom: 1.1rem; }
}
/* --- roadmap on phones: single readable column beside the road --- */
@media (max-width: 820px) {
    .road-surface, .road-lane { width: 200px; }
    .road-stops { padding-top: 72px; }
    .road-stop {
        grid-template-columns: 1fr;
        column-gap: 0;
        margin-bottom: 1.4rem;
    }
    .road-card,
    .road-stop:nth-child(even) .road-card {
        grid-column: 1;
        justify-self: center;
        max-width: 520px;
        width: 100%;
    }
    .road-card::after { display: none; }
    .road-node { display: none; }
}

/* --- news cards: identical, calm crops in every card --- */
.activity-img {
    height: auto;
    aspect-ratio: 16 / 10;
}

/* --- mobile: give the hero aside full width below the intro --- */
@media (max-width: 992px) {
    .hero-aside {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }
}

/* --- sections are flex items (.page-section is a column flex): allow them
   to shrink to the viewport instead of their content's min-content width --- */
.page-section > * {
    min-width: 0;
    max-width: 100%;
}

/* ==========================================================================
   STRATEGIC PROJECTS · one-line 3D "card stand" carousel (narrow screens)
   Mirrors the About pillars: cards sit in a perspective row, the centered
   card faces the viewer, side cards angle inward — swipe to rotate through.
   ========================================================================== */
@media (max-width: 1000px) {
    .portfolio-tier .tier-grid {
        display: flex;
        align-items: flex-start; /* each card keeps its natural height */
        overflow-x: auto;
        gap: 1.1rem;
        padding: 1.6rem 17% 2rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        perspective: 1100px;
    }
    .portfolio-tier .tier-grid::-webkit-scrollbar { display: none; }
    .portfolio-tier .tier-grid .portfolio-card {
        flex: 0 0 72%;
        min-width: 250px;
        max-width: 360px;
        scroll-snap-align: center;
        transform-style: preserve-3d;
        will-change: transform;
    }
}

/* ==========================================================================
   CLEAN 2026 · calmer hero, leadership card in About, vision block in About
   ========================================================================== */

/* a calmer, tighter hero (the long vision text now lives in About) */
.hero-description { font-size: 1.08rem; }
.hero-section { padding-bottom: 3.2rem; }

/* --- small presidential card (About) --- */
.leader-card {
    display: flex;
    align-items: center;
    gap: 1.05rem;
    width: fit-content;
    max-width: 100%;
    margin: 2.2rem auto 0;
    padding: 0.85rem 1.7rem 0.85rem 0.95rem;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.45);
}
.leader-monogram {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #2b2008;
    background: linear-gradient(135deg, #f0d494 0%, #dfba6b 45%, #b08a33 100%);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.55), 0 6px 16px -6px rgba(223, 186, 107, 0.55);
}
.leader-text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    text-align: left;
    min-width: 0;
}
.leader-kicker {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-color);
}
.leader-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
}
.leader-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
@media (max-width: 480px) {
    .leader-card {
        border-radius: 20px;
        padding: 0.9rem 1.1rem;
    }
}

/* --- vision block inside About --- */
.about-vision {
    margin-top: 3.8rem;
    text-align: center;
}
.about-vision-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1.1rem;
}
.about-vision .vision-paragraph {
    max-width: 880px;
    margin: 0 auto;
    padding: 0;
    border-left: none;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.85;
    color: var(--text-muted);
}
.about-vision .hero-pillars-container {
    border-top: none;
    margin-top: 0.9rem;
    padding-bottom: 0;
}