/* ============================================================
   SERVICE TABS & CATEGORIES
   ============================================================ */
.service-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
    padding: 0 1rem;
}
.s-tab {
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.s-tab:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
}
.s-tab.active {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--brand) 50%, transparent);
}

.category-block {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 3rem;
}
.category-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--line);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.category-title::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 22px;
    border-radius: 4px;
    background: var(--grad);
}
.is-empty {
    display: none !important;
}

/* ============================================================
   ABOUT HOME
   ============================================================ */
.about-home{padding:clamp(48px,7vw,88px) 0;background:var(--bg);overflow-x:clip}
.about-home .wrap{max-width:1180px;margin-inline:auto;padding:0 1rem;min-width:0;max-width:100%}
.about-home-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;min-width:0}
.about-home-image{position:relative;isolation:isolate;width:100%;max-width:100%;min-width:0}
.about-home-image img{width:100%;max-width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:0 8px 22px color-mix(in srgb,var(--brand-deep) 12%,transparent);aspect-ratio:4/3;object-fit:cover}
.about-home-image.ph{background:var(--grad);border-radius:var(--r);aspect-ratio:4/3;display:grid;place-items:center;font-size:5rem;color:#fff;box-shadow:var(--sh)}
.about-home-badge{position:absolute;bottom:-16px;left:20px;background:var(--grad-secondary);color:#fff;border:3px solid #fff;padding:.9rem 1.3rem;border-radius:14px;box-shadow:0 12px 28px color-mix(in srgb,var(--secondary) 40%,transparent);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:calc(100% - 2rem)}
.about-home-badge b{font-size:1.6rem;font-weight:800;line-height:1}
.about-home-badge small{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:.15rem;white-space:nowrap}
.about-home-content{min-width:0;max-width:100%}
.about-home-content h2{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--ink);margin:0 0 1rem;line-height:1.2}
.about-home-text{color:var(--muted);font-size:.95rem;line-height:1.75;margin:0 0 1.5rem}
.about-home-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.about-home-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.8rem;margin-top:1.5rem}
.about-home-stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.75rem;text-align:center}
.about-home-stat b{display:block;font-size:1.2rem;font-weight:800;color:var(--secondary);line-height:1.1}
.about-home-stat small{font-size:.72rem;color:var(--muted);margin-top:.2rem;display:block}
@media(max-width:800px){.about-home-grid{grid-template-columns:1fr}.about-home-badge{bottom:-14px;left:14px}}
@media(max-width:480px){.about-home-badge{padding:.65rem .95rem;border-radius:12px;left:8px;bottom:-12px}.about-home-badge b{font-size:1.3rem}.about-home-badge small{font-size:.6rem}}

/* ============================================================
   ROTATING LOGO — light ↔ dark swap
   ============================================================ */
.logo.logo-img img{grid-area:1/1}
.logo.logo-img img.logo-img--dark{display:none}
@media (prefers-color-scheme:dark){
    html:not([data-theme="light"]) .logo.logo-img.has-dark-logo img.logo-img--light{display:none}
    html:not([data-theme="light"]) .logo.logo-img.has-dark-logo img.logo-img--dark {display:block}
}
html[data-theme="dark"]  .logo.logo-img.has-dark-logo img.logo-img--light{display:none!important}
html[data-theme="dark"]  .logo.logo-img.has-dark-logo img.logo-img--dark {display:block!important}
html[data-theme="light"] .logo.logo-img.has-dark-logo img.logo-img--light{display:block!important}
html[data-theme="light"] .logo.logo-img.has-dark-logo img.logo-img--dark {display:none!important}

/* ============================================================
   SECTION SAFETY NETS & OVERRIDES
   ============================================================ */
@media (max-width:400px){
    .hero-slide h1{font-size:clamp(1.55rem,7vw,2rem)}
    .hero-slide p{font-size:.95rem}
    .hero-slide .row{gap:.5rem}
    .hero .b-gold,.hero .b-ghost{padding:.65rem 1rem;font-size:.85rem}
    .sg{grid-template-columns:1fr;gap:1rem}
    .sg b{font-size:2rem}
}
@media (max-width:480px){
    .stage{--sh:min(78vw,340px)}
    .dw.id{max-width:100%}
    .dm-plate{left:.5rem;right:.5rem;bottom:-1rem;padding:.65rem .85rem}
    .dm-plate b{font-size:.9rem}
    .dm-plate span{font-size:.72rem}
    .tm{aspect-ratio:16/10}
    .q i{width:38px;height:38px;font-size:1.1rem}
    .q b{font-size:.82rem}
    .q span{font-size:.7rem}
    .tmc{padding:1rem}
    .tc{padding:1rem}
}
html,body{overflow-x:hidden}
img{max-width:100%;height:auto}

/* ============================================================
   HERO SLIDER — REDUCED SHADOW FOR BETTER VISIBILITY
   ============================================================ */
.hero-slide::before {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-deep) 60%, transparent) 0%, color-mix(in srgb, var(--brand-mid) 40%, transparent) 55%, color-mix(in srgb, var(--brand) 30%, transparent) 100%),
        radial-gradient(800px 500px at 10% 10%, color-mix(in srgb, var(--brand) 50%, transparent), transparent 60%),
        radial-gradient(700px 500px at 90% 90%, color-mix(in srgb, var(--brand-mid) 50%, transparent), transparent 60%) !important;
}
.hero-slide h1 {
    text-shadow: 0 2px 15px rgba(0,0,0,0.3) !important; /* Lighter text shadow */
}

.hero-slide canvas.hero-fx{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    pointer-events:none;
    z-index:1;
    opacity:.9;
}

/* ============================================================
   PARTNERS MARQUEE (With Custom Tooltips & Extra Small)
   ============================================================ */
.partners-strip {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    overflow: hidden;
    margin-bottom: 6rem; /* Large, safe gap before the footer */
}

.partners-strip .head {
    text-align: center;
    margin-inline: auto;
    max-width: none;
}
.partners-strip .head h2 { 
    margin-bottom: 0; 
}

.marquee {
    position: relative;
    margin-top: 2rem;
    overflow: hidden;
    padding: 3rem 0 1rem; /* Extra top padding to allow tooltip to show */
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee-scroll 55s linear infinite;
    will-change: transform;
}

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

.marquee-item {
    position: relative; /* Needed for tooltip positioning */
    flex: 0 0 auto;
    margin-right: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 40px;
    transition: transform .3s var(--ease);
}

.marquee-item:hover {
    transform: translateY(-3px) scale(1.05);
}

.marquee-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; 
    filter: grayscale(1);
    opacity: .6;
    transition: filter .3s, opacity .3s;
}

.marquee-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Custom Tooltip */
.marquee-item::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--ink);
    color: var(--bg);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10;
}

/* Tooltip Arrow */
.marquee-item::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border-width: 6px;
    border-style: solid;
    border-color: var(--ink) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
    z-index: 10;
}

.marquee-item:hover::after,
.marquee-item:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

@media (max-width: 480px) {
    .marquee-item { width: 80px; height: 32px; margin-right: 1.5rem; }
    .marquee-track { animation-duration: 40s; }
    .partners-strip { margin-bottom: 4rem; }
}

/* ============================================================
   "View All" buttons
   ============================================================ */
.section-actions {
    text-align: center;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.section-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
}
.section-actions .btn:hover {
    transform: translateY(-2px);
}

/* ============================================================
   MISSION / VISION / CORE VALUES
   ============================================================ */
.mv-section {
    padding: clamp(48px, 7vw, 88px) 0;
    background: var(--bg);
}
.mv-section .head {
    text-align: center;
    margin-inline: auto;
    max-width: none;
    margin-bottom: 2.5rem;
}
.mv-section .head h2 {
    margin: 0 0 .4rem;
}
.mv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.mv-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.75rem;
    box-shadow: var(--sh);
    transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
    display: flex;
    flex-direction: column;
}
.mv-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: var(--sh-lg);
}
.mv-card .mv-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--grad);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--brand) 50%, transparent);
}
.mv-card h3 {
    font-size: 1.15rem;
    margin: 0 0 .75rem;
    color: var(--ink);
    line-height: 1.3;
}
.mv-card .mv-content {
    font-size: .95rem;
    color: var(--muted);
    line-height: 1.7;
    flex: 1;
    min-width: 0;
}
.mv-card .mv-content p {
    margin: 0 0 .5rem;
}
.mv-card .mv-toggle {
    align-self: flex-start;
    margin-top: 1rem;
    background: none;
    border: none;
    color: var(--brand);
    font-weight: 700;
    font-size: .85rem;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: color .2s;
}
.mv-card .mv-toggle:hover {
    color: var(--secondary);
}

.mv-values {
    margin-top: 2rem;
    padding: 1.75rem;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.mv-values h3 {
    font-size: 1.1rem;
    margin: 0 0 1rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .6rem;
}
.mv-values h3::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand), var(--secondary));
}
.mv-values ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .6rem 1.5rem;
}
.mv-values li {
    font-size: .92rem;
    color: var(--muted);
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    line-height: 1.55;
}
.mv-values li i {
    color: var(--brand);
    margin-top: 3px;
    flex: none;
    font-size: .9rem;
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-wm-section {
    position: relative;
    padding-top: clamp(2.5rem, 5vw, 4rem) !important;
    padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--brand) 18%, var(--bg));
}

.contact-wm-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--contact-wm-light, none);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: .08;
    pointer-events: none;
    z-index: 0;
    transition: opacity .3s ease;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .contact-wm-section {
        background-color: color-mix(in srgb, var(--brand) 22%, var(--bg));
    }
    html:not([data-theme="light"]) .contact-wm-section::before {
        background-image: var(--contact-wm-dark, var(--contact-wm-light, none));
        opacity: .06;
    }
}
html[data-theme="dark"] .contact-wm-section {
    background-color: color-mix(in srgb, var(--brand) 22%, var(--bg));
}
html[data-theme="dark"] .contact-wm-section::before {
    background-image: var(--contact-wm-dark, var(--contact-wm-light, none));
    opacity: .06;
}
html[data-theme="light"] .contact-wm-section {
    background-color: color-mix(in srgb, var(--brand) 18%, var(--bg));
}
html[data-theme="light"] .contact-wm-section::before {
    background-image: var(--contact-wm-light, none);
    opacity: .08;
}

.contact-card {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin-inline: auto;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line);
    border-top: 4px solid var(--brand);
    border-radius: var(--r);
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.contact-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 60%, var(--secondary) 100%);
    z-index: 2;
}

.contact-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}
.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: var(--grad);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--brand) 50%, transparent);
}
.contact-header h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    color: var(--ink);
    margin: 0 0 .5rem;
    position: relative;
    display: inline-block;
    padding-bottom: .6rem;
}
.contact-header h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-mid));
}
.contact-header p {
    color: var(--muted);
    margin: .35rem 0 0;
    font-size: .95rem;
}

.contact-card .alert {
    padding: .85rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--ink);
}
.contact-card .alert-success {
    background: color-mix(in srgb, var(--brand) 14%, var(--soft));
    border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
    color: var(--brand-deep);
}
.contact-card .alert-danger {
    background: color-mix(in srgb, var(--secondary) 14%, var(--soft));
    border-color: color-mix(in srgb, var(--secondary) 35%, var(--line));
    color: var(--secondary-deep);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .contact-card .alert-success {
        background: color-mix(in srgb, var(--brand) 22%, var(--card));
        color: var(--brand-light);
        border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    }
    html:not([data-theme="light"]) .contact-card .alert-danger {
        background: color-mix(in srgb, var(--secondary) 22%, var(--card));
        color: color-mix(in srgb, var(--secondary) 60%, #fff);
        border-color: color-mix(in srgb, var(--secondary) 45%, var(--line));
    }
}

.contact-card .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .contact-card .form-grid { grid-template-columns: 1fr; }
}
.contact-card .form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 0;
    min-width: 0;
}
.contact-card .form-group.full-width { grid-column: 1 / -1; }
.contact-card .form-group label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.contact-card .form-group label i {
    color: var(--brand);
    font-size: .82rem;
}
.contact-card .form-group input,
.contact-card .form-group select,
.contact-card .form-group textarea {
    padding: .72rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    width: 100%;
    box-sizing: border-box;
}
.contact-card .form-group input:hover,
.contact-card .form-group select:hover,
.contact-card .form-group textarea:hover {
    border-color: color-mix(in srgb, var(--brand) 50%, var(--line));
}
.contact-card .form-group input:focus,
.contact-card .form-group select:focus,
.contact-card .form-group textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.contact-card .form-group textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}
.contact-card .contact-submit-row {
    text-align: center;
    margin-top: 1.5rem;
}
.contact-card .contact-submit-row .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 2rem;
    font-size: .95rem;
    box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--brand) 55%, transparent);
}
.contact-card .contact-submit-row .btn:hover {
    box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--brand) 65%, transparent);
}